/* =========================================================
   SHANTA KRISHNA APARTMENTS
   MASTER RESPONSIVE CSS
   HOME + ABOUT + AMENITIES + GALLERY + CONTACT
========================================================= */


/* =========================================================
   GLOBAL SAFETY
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body.menu-open {
    overflow: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}


/* =========================================================
   1200PX - SMALL LAPTOP
========================================================= */

@media (max-width: 1200px) {

    section {
        padding-left: 6%;
        padding-right: 6%;
    }

    header {
        padding-left: 5%;
        padding-right: 5%;
    }

    nav {
        gap: 27px;
    }

    .header-cta {
        padding: 12px 20px;
        font-size: 13px;
    }


    /* HOME */

    .hero-content h1 {
        font-size: 48px;
    }

    .about .container {
        gap: 45px;
    }


    /* ABOUT PAGE */

    .about-intro-container,
    .story-container,
    .architecture-container {
        gap: 60px;
    }


    /* AMENITIES */

    .amenity-content {
        padding: 80px 8%;
    }

    .amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* CONTACT */

    .contact-about-container,
    .contact-container {
        gap: 55px;
    }


    /* FOOTER */

    .footer-container {
        width: 90%;
        gap: 40px;
    }

    .footer-bottom {
        width: 90%;
    }

}


/* =========================================================
   992PX - TABLET + MOBILE MENU
========================================================= */

@media (max-width: 992px) {

    section {
        padding: 80px 6%;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .site-header {

        height: 88px;

        padding: 0 6%;

        display: flex;

        align-items: center;

        justify-content: space-between;
    }

    .logo {
        position: relative;
        z-index: 10002;
    }

    .logo img {
        height: 68px;
        width: auto;
    }

    .header-cta {
        display: none;
    }

    .mobile-only-cta {
        display: block;
        margin-top: 20px;
        padding: 16px 5px !important;
        text-align: center;
    }


    /* =====================================================
       HAMBURGER
    ===================================================== */

    .hamburger {

        display: flex;

        width: 45px;
        height: 45px;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        position: relative;

        cursor: pointer;

        z-index: 10002;
    }

    .hamburger span {

        display: block;

        width: 27px;

        height: 2px;

        margin: 4px 0;

        background: var(--peach-light);

        border-radius: 5px;

        transition: 0.35s ease;
    }


    /* HAMBURGER X */

    .hamburger.active span:nth-child(1) {
        transform:
            translateY(10px)
            rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {

        opacity: 0;

        transform: scaleX(0);
    }

    .hamburger.active span:nth-child(3) {

        transform:
            translateY(-10px)
            rotate(-45deg);
    }


    /* =====================================================
       SIDE NAVIGATION
    ===================================================== */

    #navbar {

        position: fixed;

        top: 0;

        right: -100%;

        width: min(82%, 390px);

        height: 100dvh;

        padding:
            115px
            35px
            40px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

        gap: 0;

        background:

            linear-gradient(
                160deg,
                rgba(22,22,22,.99),
                rgba(5,5,5,.99)
            );

        backdrop-filter: blur(22px);

        -webkit-backdrop-filter: blur(22px);

        box-shadow:
            -20px 0 60px
            rgba(0,0,0,.55);

        transition:

            right
            .45s
            cubic-bezier(.77,0,.18,1);

        z-index: 10000;
    }

    #navbar.active {
        right: 0;
    }


    #navbar a {

        width: 100%;

        display: block;

        padding:
            18px
            5px;

        font-size: 18px;

        color: white;

        border-bottom:

            1px solid
            rgba(255,255,255,.08);

        transition: .3s;
    }

    #navbar a:hover,
    #navbar a.active {

        color: var(--peach-light);

        padding-left: 12px;
    }

    #navbar a::after {
        display: none;
    }


    /* MENU BACKDROP */

    body::after {

        content: "";

        position: fixed;

        inset: 0;

        background:
            rgba(0,0,0,.67);

        backdrop-filter: blur(3px);

        -webkit-backdrop-filter: blur(3px);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition: .35s;

        z-index: 9998;
    }

    body.menu-open::after {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }


    /* =====================================================
       HOME HERO
    ===================================================== */

    .hero {

        height: 100dvh;

        min-height: 620px;

        padding:

            105px
            6%
            55px;
    }

    .hero-content {

        width: 100%;

        max-width: 800px;
    }

    .hero-content h1 {

        font-size:
            clamp(
                38px,
                7vw,
                50px
            );

        line-height: 1.2;
    }


    /* =====================================================
       HOME ABOUT
    ===================================================== */

    .about .container {

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-image {

        max-width: 700px;

        margin: auto;
    }

    .about-content {

        max-width: 750px;

        margin: auto;

        text-align: center;
    }

    .stats {

        max-width: 750px;

        margin:
            30px auto 0;
    }


    /* =====================================================
       HOME HIGHLIGHTS
    ===================================================== */

    .highlight-grid {

        grid-template-columns:

            repeat(
                2,
                1fr
            );
    }


    /* =====================================================
       HOME APARTMENTS
    ===================================================== */

    .cards {

        grid-template-columns:
            repeat(2,1fr);
    }


    /* =====================================================
       ABOUT PAGE
    ===================================================== */

    .about-page-hero {

        height: 70vh;

        min-height: 550px;
    }

    .about-hero-content h1 {

        font-size:
            clamp(
                55px,
                10vw,
                80px
            );
    }


    .about-intro-container {

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .about-intro-title,
    .about-intro-text {

        max-width: 750px;

        margin-left: auto;

        margin-right: auto;
    }


    .story-container {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .story-image {

        max-width: 750px;

        margin: auto;
    }

    .story-image img {
        height: 500px;
    }

    .story-content {

        max-width: 750px;

        margin: auto;
    }


    .vision-cards {

        grid-template-columns:

            repeat(
                2,
                1fr
            );
    }


    .architecture-container {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .architecture-content {

        max-width: 700px;

        margin: auto;
    }

    .architecture-image {

        max-width: 750px;

        margin: auto;
    }


    /* =====================================================
       AMENITIES PAGE
    ===================================================== */

    .amenities-hero {

        min-height: 620px;

        padding:
            100px
            6%
            60px;
    }

    .amenities-hero-content h1 {

        font-size:
            clamp(
                50px,
                9vw,
                75px
            );
    }


    .amenities-intro-container {

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .intro-left,
    .intro-right {

        max-width: 750px;

        margin: auto;
    }


    .amenity-showcase {

        grid-template-columns: 1fr;

        min-height: auto;
    }


    .amenity-showcase.reverse .amenity-image,
    .amenity-showcase.reverse .amenity-content {

        order: initial;
    }


    .amenity-image img {

        min-height: 0;

        height: 500px;
    }

    .amenity-content {

        min-height: 450px;

        padding:
            70px
            8%;
    }


    .amenities-grid {

        grid-template-columns:

            repeat(
                2,
                1fr
            );
    }


    /* =====================================================
       GALLERY PAGE
    ===================================================== */

    .gallery-hero {

        height: 65vh;

        min-height: 500px;
    }


    .gallery-grid {

        grid-template-columns:

            repeat(
                2,
                1fr
            );

        grid-auto-rows: 260px;
    }


    .gallery-item.large {

        grid-column:
            span 2;
    }


    /* =====================================================
       CONTACT PAGE
    ===================================================== */

    .contact-hero {

        min-height: 480px;
    }


    .contact-about-container {

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .contact-about-image {

        max-width: 750px;

        margin: auto;
    }

    .contact-about-image img {
        height: 500px;
    }

    .contact-about-content {

        max-width: 750px;

        margin: auto;
    }


    .contact-container {

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .contact-info {

        max-width: 700px;
    }

    .contact-form-box {

        width: 100%;

        max-width: 850px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer-container {

        grid-template-columns:
            repeat(2,1fr);

        width: 88%;

        gap:
            45px
            35px;
    }

    .footer-bottom {
        width: 88%;
    }

}


/* =========================================================
   768PX - TABLET PORTRAIT
========================================================= */

@media (max-width: 768px) {


    section {

        padding:
            70px
            5%;
    }


    /* HEADER */

    .site-header {

        height: 78px;

        padding:
            0
            5%;
    }

    .logo img {
        height: 58px;
    }


    /* =====================================================
       HOME HERO
    ===================================================== */

    .hero {

        height: 100svh;

        min-height: 600px;

        padding:
            95px
            5%
            45px;
    }

    .hero-content h3 {

        font-size: 12px;

        letter-spacing: 3px;
    }

    .hero-content h1 {

        font-size:
            clamp(
                32px,
                8vw,
                42px
            );
    }

    .hero-content p {

        font-size: 16px;
    }


    .hero-buttons {

        gap: 13px;

        flex-wrap: wrap;
    }

    .btn,
    .btn2 {

        padding:
            13px
            25px;

        font-size: 14px;
    }


    /* HOME ABOUT */

    .about-content h2,
    .highlights h2,
    .apartments h2 {

        font-size: 34px;
    }

    .stats {

        display: grid;

        grid-template-columns:

            repeat(
                3,
                1fr
            );

        gap: 12px;
    }

    .stats div {

        padding:
            18px
            10px;
    }

    .stats h3 {
        font-size: 30px;
    }


    /* HOME CARDS */

    .cards {

        grid-template-columns: 1fr;

        max-width: 600px;

        margin: auto;
    }

    .card img {
        height: 320px;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .about-page-hero {

        height: 65vh;

        min-height: 500px;
    }

    .about-hero-content {

        padding:
            20px;
    }

    .about-hero-content span {

        letter-spacing: 4px;
    }

    .about-hero-content h1 {

        font-size: 55px;
    }


    .about-introduction,
    .about-story,
    .vision-section,
    .architecture-section,
    .about-final-cta {

        padding:
            80px
            6%;
    }


    .about-intro-title h2 {

        font-size: 42px;
    }

    .about-intro-text .large-text {

        font-size: 19px;
    }


    .story-image img {

        height: 430px;
    }

    .story-content h2 {

        font-size: 40px;
    }


    .vision-heading h2 {

        font-size: 40px;
    }


    .vision-cards {

        grid-template-columns: 1fr;
    }


    .architecture-content h2 {

        font-size: 40px;
    }


    .lifestyle-section {

        min-height: 550px;

        padding:
            80px
            6%;
    }


    .lifestyle-content h2,
    .about-final-content h2 {

        font-size: 45px;
    }


    /* =====================================================
       AMENITIES
    ===================================================== */

    .amenities-hero {

        height: 90svh;

        min-height: 600px;

        padding:
            110px
            6%
            60px;
    }


    .amenities-hero-content h1 {

        font-size: 55px;
    }

    .amenities-hero-content p {

        font-size: 15px;
    }


    .amenities-intro,
    .amenities-grid-section,
    .amenities-cta {

        padding:
            80px
            6%;
    }


    .intro-left h2 {

        font-size: 42px;
    }

    .intro-right .intro-large {

        font-size: 19px;
    }


    .amenity-image img {

        height: 420px;
    }

    .amenity-number {

        font-size: 50px;

        left: 25px;

        bottom: 25px;
    }

    .amenity-content {

        min-height: auto;

        padding:
            60px
            7%;
    }

    .amenity-content h2 {

        font-size: 40px;
    }


    .grid-heading h2 {

        font-size: 40px;
    }


    .amenities-video {

        min-height: 600px;

        padding:
            80px
            6%;
    }

    .video-content h2 {

        font-size: 45px;
    }

    .amenities-cta-content h2 {

        font-size: 45px;
    }


    /* =====================================================
       GALLERY
    ===================================================== */

    .gallery-hero {

        height: 60vh;

        min-height: 480px;
    }

    .gallery-hero-content h1 {

        font-size: 60px;
    }


    .gallery-intro {

        padding:
            85px
            25px
            55px;
    }

    .gallery-intro h2 {

        font-size: 40px;
    }


    .gallery-section {

        padding:
            30px
            5%
            80px;
    }

    .gallery-grid {

        grid-template-columns:

            repeat(
                2,
                1fr
            );

        grid-auto-rows: 230px;

        gap: 10px;
    }


    .gallery-overlay {

        opacity: 1;

        padding: 18px;
    }


    .gallery-video {

        min-height: 500px;

        padding:
            80px
            6%;

        background-attachment: scroll;
    }

    .gallery-video-content h2 {

        font-size: 45px;
    }


    /* =====================================================
       CONTACT
    ===================================================== */

    .contact-hero {

        height: 55vh;

        min-height: 450px;
    }

    .contact-hero-content h1 {

        font-size: 58px;
    }


    .contact-about,
    .contact-section {

        padding:
            80px
            6%;
    }


    .contact-about-image img {

        height: 430px;
    }

    .contact-about-content h2,
    .contact-info h2 {

        font-size: 40px;
    }


    .contact-form-box {

        padding: 40px;
    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;
    }


    /* MAP */

    .map-section {

        padding-left: 5%;

        padding-right: 5%;
    }

    .map-container iframe {

        width: 100%;
    }


    /* FOOTER */

    .footer {

        padding-top: 55px;
    }

    .footer-container {

        width: 90%;

        grid-template-columns:

            repeat(
                2,
                1fr
            );

        gap:
            40px
            25px;
    }


    .footer-bottom {

        width: 90%;

        flex-direction: column;

        text-align: center;
    }


    /* FLOATING BUTTONS */

    .floating-call,
    .floating-whatsapp {

        width: 50px;

        height: 50px;

        right: 18px;
    }

    .floating-call {

        bottom: 18px;
    }

    .floating-whatsapp {

        bottom: 80px;
    }

}


/* =========================================================
   576PX - MOBILE
========================================================= */

@media (max-width: 576px) {


    section {

        padding:
            60px
            20px;
    }


    /* =====================================================
       MENU
    ===================================================== */

    #navbar {

        width: 87%;

        padding:

            100px
            25px
            30px;
    }

    #navbar a {

        font-size: 17px;

        padding:
            16px
            5px;
    }


    /* =====================================================
       HOME
    ===================================================== */

    .hero {

        min-height: 590px;

        padding:
            95px
            20px
            40px;
    }

    .hero-content h3 {

        font-size: 10px;

        letter-spacing: 2.5px;
    }

    .hero-content h1 {

        font-size:
            clamp(
                28px,
                9vw,
                36px
            );
    }

    .hero-content p {

        font-size: 14px;

        line-height: 1.6;
    }


    .hero-buttons {

        flex-direction: column;

        align-items: center;

        width: 100%;
    }

    .btn,
    .btn2 {

        width:
            min(
                260px,
                100%
            );

        text-align: center;
    }


    .about-content h2,
    .highlights h2,
    .apartments h2 {

        font-size: 29px;
    }


    .stats {

        grid-template-columns:
            1fr 1fr;
    }

    .stats div:last-child {

        grid-column:
            1 / -1;
    }


    .highlight-grid {

        grid-template-columns: 1fr;
    }


    .card img {
        height: 230px;
    }


    /* =====================================================
       ABOUT PAGE
    ===================================================== */

    .about-page-hero {

        height: 60svh;

        min-height: 450px;
    }

    .about-hero-content span {

        font-size: 10px;

        letter-spacing: 3px;
    }

    .about-hero-content h1 {

        font-size: 43px;
    }

    .about-hero-content p {

        font-size: 14px;
    }


    .hero-scroll {
        bottom: 20px;
    }


    .about-introduction,
    .about-story,
    .vision-section,
    .architecture-section,
    .about-final-cta {

        padding:
            65px
            20px;
    }


    .about-intro-title h2 {

        font-size: 32px;
    }

    .about-intro-text .large-text {

        font-size: 17px;
    }

    .about-intro-text p {

        font-size: 14px;
    }


    .story-image img {

        height: 350px;
    }


    .image-number {

        width: 55px;

        height: 55px;

        right: 20px;

        bottom: 20px;

        font-size: 17px;
    }


    .story-content h2 {

        font-size: 32px;
    }


    .story-stat {

        grid-template-columns:

            repeat(
                3,
                1fr
            );

        gap: 10px;
    }

    .story-stat strong {

        font-size: 20px;
    }

    .story-stat span {

        font-size: 8px;

        letter-spacing: 1px;
    }


    .vision-heading {

        margin-bottom: 40px;
    }

    .vision-heading h2 {

        font-size: 32px;
    }


    .vision-card {

        padding:
            35px
            25px;

        min-height: auto;
    }


    .architecture-content h2 {

        font-size: 32px;
    }


    .architecture-image img {

        min-height: 330px;

        object-fit: cover;
    }


    .lifestyle-section {

        min-height: 500px;

        padding:
            70px
            20px;
    }

    .lifestyle-content h2,
    .about-final-content h2 {

        font-size: 34px;
    }


    .cta-buttons {

        flex-direction: column;

        align-items: center;
    }


    /* =====================================================
       AMENITIES
    ===================================================== */

    .amenities-hero {

        min-height: 600px;

        padding:
            100px
            20px
            60px;
    }


    .amenities-hero-content span {

        font-size: 10px;

        letter-spacing: 3px;
    }


    .amenities-hero-content h1 {

        font-size: 45px;

        line-height: 1;
    }

    .amenities-hero-content p {

        font-size: 14px;
    }


    .hero-number {

        right: 20px;

        bottom: 25px;
    }


    .amenities-intro,
    .amenities-grid-section,
    .amenities-cta {

        padding:
            65px
            20px;
    }


    .intro-left h2 {

        font-size: 32px;
    }

    .intro-right .intro-large {

        font-size: 17px;
    }


    .amenity-image img {

        height: 330px;
    }


    .amenity-content {

        padding:
            45px
            20px;
    }

    .amenity-content h2 {

        font-size: 32px;
    }

    .amenity-content p {

        font-size: 14px;
    }


    .amenity-number {

        font-size: 40px;

        left: 18px;

        bottom: 18px;
    }


    .amenities-grid {

        grid-template-columns: 1fr;
    }

    .amenity-card {

        min-height: auto;

        padding:
            35px
            25px;
    }


    .grid-heading h2 {

        font-size: 32px;
    }


    .amenities-video {

        min-height: 550px;

        padding:
            60px
            20px;
    }

    .video-content h2 {

        font-size: 34px;
    }


    .video-play-btn {

        width: 65px;

        height: 65px;
    }


    .video-popup {

        padding: 15px;
    }


    .amenities-cta-content h2 {

        font-size: 34px;
    }


    /* =====================================================
       GALLERY
    ===================================================== */

    .gallery-hero {

        height: 55svh;

        min-height: 430px;
    }


    .gallery-hero-content {

        padding: 20px;
    }

    .gallery-hero-content span {

        font-size: 10px;

        letter-spacing: 3px;
    }

    .gallery-hero-content h1 {

        font-size: 47px;
    }

    .gallery-hero-content p {

        font-size: 14px;
    }


    .gallery-intro {

        padding:
            70px
            20px
            45px;
    }

    .gallery-intro h2 {

        font-size: 32px;
    }


    .gallery-section {

        padding:
            25px
            15px
            65px;
    }


    .gallery-filters {

        gap: 8px;

        margin-bottom: 35px;
    }

    .filter-btn {

        padding:
            9px
            15px;

        font-size: 11px;
    }


    .gallery-grid {

        grid-template-columns: 1fr;

        grid-auto-rows: 300px;

        gap: 12px;
    }


    .gallery-item.large,
    .gallery-item.tall {

        grid-column: auto;

        grid-row: auto;
    }


    .gallery-item {

        height: 300px;
    }


    .gallery-overlay {

        padding: 15px;
    }


    .gallery-overlay h3 {

        font-size: 16px;
    }


    .view-image {

        width: 42px;

        height: 42px;
    }


    .gallery-video {

        min-height: 480px;

        padding:
            65px
            20px;
    }

    .gallery-video-content h2 {

        font-size: 34px;
    }


    .lightbox {

        padding:
            15px;
    }

    .lightbox img {

        max-width: 92%;

        max-height: 80vh;
    }


    /* =====================================================
       CONTACT PAGE
    ===================================================== */

    .contact-hero {

        height: 52svh;

        min-height: 420px;
    }

    .contact-hero-content {

        padding:
            20px;
    }

    .contact-hero-content span {

        font-size: 10px;

        letter-spacing: 3px;
    }

    .contact-hero-content h1 {

        font-size: 45px;
    }

    .contact-hero-content p {

        font-size: 14px;
    }


    .contact-about,
    .contact-section {

        padding:
            65px
            20px;
    }


    .contact-about-image img {

        height: 340px;
    }


    .contact-about-content h2,
    .contact-info h2 {

        font-size: 32px;
    }


    .small-title {

        font-size: 10px;

        letter-spacing: 3px;
    }


    .contact-detail {

        gap: 13px;
    }

    .contact-icon {

        width: 44px;

        height: 44px;

        min-width: 44px;
    }


    .contact-social {

        flex-wrap: wrap;
    }


    /* CONTACT FORM */

    .contact-form-box {

        padding:
            30px
            20px;
    }


    .form-heading h3 {

        font-size: 27px;
    }


    .form-row {

        display: grid;

        grid-template-columns: 1fr;
    }


    .input-group input,
    .input-group select,
    .input-group textarea {

        width: 100%;

        font-size: 16px;
    }


    .contact-submit {

        width: 100%;

        justify-content: center;
    }


    /* MAP */

    .map-section {

        padding:
            65px
            20px;
    }


    .map-heading h2 {

        font-size: 32px;
    }


    .map-container iframe {

        min-height: 350px;
    }


    /* CONTACT CTA */

    .contact-cta {

        min-height: 480px;

        padding:
            70px
            20px;
    }


    .contact-cta-content h2 {

        font-size: 34px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer {

        padding-top: 50px;
    }

    .footer-container {

        width:
            calc(
                100% - 40px
            );

        grid-template-columns: 1fr;

        gap: 35px;

        padding-bottom: 40px;
    }


    .footer-logo {

        width: 145px;
    }


    .footer-col h3 {

        font-size: 18px;

        margin-bottom: 18px;
    }


    .footer-brand p,
    .visit-col p,
    .contact-item p {

        font-size: 13px;
    }


    .footer-bottom {

        width:
            calc(
                100% - 40px
            );

        padding:
            20px 0;

        gap: 12px;
    }


    .footer-bottom p,
    .footer-bottom a {

        font-size: 11px;
    }


    /* FLOATING */

    .floating-call,
    .floating-whatsapp {

        width: 48px;

        height: 48px;

        right: 14px;
    }

    .floating-call {

        bottom: 14px;
    }

    .floating-whatsapp {

        bottom: 74px;
    }

}


/* =========================================================
   390PX - SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .site-header {

        padding:
            0
            16px;
    }


    .logo img {

        height: 52px;
    }


    .hero-content h1 {

        font-size: 27px;
    }


    .about-hero-content h1,
    .gallery-hero-content h1,
    .contact-hero-content h1 {

        font-size: 40px;
    }


    .amenities-hero-content h1 {

        font-size: 40px;
    }


    .about-intro-title h2,
    .story-content h2,
    .vision-heading h2,
    .architecture-content h2,
    .intro-left h2,
    .amenity-content h2,
    .grid-heading h2,
    .gallery-intro h2,
    .contact-about-content h2,
    .contact-info h2 {

        font-size: 29px;
    }


    .story-stat {

        grid-template-columns: 1fr;
    }


    .stats {

        grid-template-columns: 1fr;
    }

    .stats div:last-child {

        grid-column: auto;
    }


    .gallery-item {

        height: 260px;
    }

    .gallery-grid {

        grid-auto-rows: 260px;
    }


    .footer-container,
    .footer-bottom {

        width:
            calc(
                100% - 32px
            );
    }

}


/* =========================================================
   340PX - VERY SMALL MOBILE
========================================================= */

@media (max-width: 340px) {

    .hero-content h1 {

        font-size: 24px;
    }


    .hero-content p {

        font-size: 12px;
    }


    .btn,
    .btn2 {

        width: 210px;

        font-size: 12px;
    }


    .amenities-hero-content h1 {

        font-size: 35px;
    }


    .about-hero-content h1,
    .gallery-hero-content h1,
    .contact-hero-content h1 {

        font-size: 36px;
    }


    .story-stat {

        grid-template-columns: 1fr;
    }


    .gallery-item {

        height: 240px;
    }

}


/* =========================================================
   LANDSCAPE PHONE
========================================================= */

@media
(max-height: 500px)
and
(orientation: landscape) {

    #navbar {

        padding-top: 80px;

        overflow-y: auto;
    }

    #navbar a {

        padding:
            10px
            5px;
    }


    .hero,
    .amenities-hero {

        height: auto;

        min-height: 500px;

        padding-top: 100px;

        padding-bottom: 50px;
    }


    .about-page-hero,
    .gallery-hero,
    .contact-hero {

        min-height: 450px;

        height: auto;
    }

}