/* NAVBAR */

@media screen and (max-width: 60em) {
    .main-logo {
        padding: 3vw;
    }
    #section-navbar {
        height: 10vh;
        /* padding: 1vw; */
    }
    .mobile-menu {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 10;
        font-size: 2em;
        padding: 1em 2vw;
        background: var(--black);
        border-radius: 0px 0px 0px 10px;
        cursor: pointer;
    }
    #ul-navbar-options {
        display: block;
        top: -9999%;
        padding: 1vh 1vw;
        transition: all 0.5s;
        height: auto;
        overflow: auto;
        /* right: -100%; */
    }
    .li-navbar-options {
        display: block;
        text-align: right;
        font-size: 3em;
    }
    #ul-navbar-options.nav-mobile-display {
        display: block;
        transition: all 0.5s;
        /* right: 0; */
        top: 11vh;
    }
}


/* HOMEPAGE */

@media screen and (max-width: 60em) {
    #page-1 {
        height: 100vh;
        background: transparent;
    }
}

@media screen and (max-width: 60em) {
    #sub-section-main-image {
        width: 100vw;
        position: absolute;
        bottom: 0;
        /* height: 50vh; */
    }
    #header-main-image {
        display: none;
        background-size: 70vw;
        position: relative;
        width: 70vw;
        height: 70vw;
        background-attachment: fixed;
        background-position: left bottom;
    }
    .main-image {
        display: block;
        max-width: 70%;
        max-height: 50vh;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 0;
    }
    #section-homepage {
        display: block;
        grid-template-columns: none;
        text-align: center;
        height: 100%;
    }
    .sub-section-cotent-wrap {
        height: 100%;
        padding-top: 15%;
    }
    #sub-section-main-content {
        width: 100%;
        position: relative;
        margin-top: 0;
    }
    .nalanda-logo {
        width: 80%;
    }
    #sub-section-homepage {
        width: auto;
        top: auto;
        /* position: relative; */
        display: block;
    }
    .home-sub-section.homepage-btn-wrap {
        position: absolute;
        right: 2vw;
        top: 20vh;
        width: 25vw;
    }
    .homepage.homepage-btn {
        display: block;
    }
    .homepage-icons {
        width: 7vw;
    }
    .homepage-header {
        font-size: 1.5em;
    }
    .homepage-sub-header {
        font-size: 1em;
    }
}


/* FLOORPLAN */

@media screen and (max-width: 60em) {
    #page-2 {
        margin-bottom: 0;
    }
    .floor-plan {
        left: auto;
        max-width: 50vw;
        max-height: 90vh;
        height: auto;
        right: 30vw;
    }
    #sub-section-navbar-fp {
        width: 24vw;
        bottom: 1vh;
        right: 1vw;
    }
    .map-container {
        width: 100%;
        padding: 0 0.5vw;
    }
    .sub-header-floor-plans {
        width: 100%;
        left: 0;
        position: relative;
        top: 10vh;
    }
    .fp-content-container {
        position: relative;
    }
    .header-3 {
        font-size: 3em;
    }
    .table-fp-size {
        columns: 1;
        font-size: 1.5em;
    }
    .table-fp-size tr {
        height: 1.25em;
    }
    .floorplan-content-wrap {
        width: 30%;
        position: absolute;
        right: 0;
    }
    .header-fp {
        text-align: center;
        top: -5vh;
        font-size: 5em;
    }
    .header-plan-sizes {
        display: block;
        font-size: 1rem;
    }
    .floorplan-content-wrap h3 {
        font-size: 1.5em;
        /* position: absolute; */
        /* right: 0; */
        /* width: 30%; */
        font-size: 2em;
    }
    .page-content-fp {
        width: 100%;
        /* position: absolute; */
        /* right: 0; */
        font-size: 1.5em;
    }
    .li-navbar-options.floorplan-btn {
        font-size: 1.5em;
    }
    .sub-header.sub-header-navbar-fp {
        padding: 0;
    }
    .img-magnifier-glass {
        display: none;
    }
}


/* FEATURES & SPECIFICATIONS*/

@media screen and (max-width: 60em) {
    #page-3 {
        min-height: auto;
        padding-top: 10vh;
    }
    #section-features {
        min-height: auto;
    }
    #sub-section-features {
        height: auto;
    }
    #page-content-features {
        height: auto;
        padding-top: 1vh;
    }
    .features-tr {
        width: 33%;
        padding: 2vh 2vw;
        height: 5vh;
        position: relative;
        margin-bottom: 3vh;
    }
    .features-table {
        display: block;
        height: auto;
    }
    .features-icons {
        height: 5vh;
        position: absolute;
        left: 5%;
        top: 0;
        padding: 1vw;
        max-width: 25%;
    }
    .features-label {
        width: 60%;
        left: 0%;
        font-size: 1.25em;
    }
    #page-4 {
        min-height: auto;
    }
    #section-specifications {
        padding-top: 2vh;
    }
    #sub-section-specifications {
        /* column-count: 1; */
        display: block;
        /* grid-template-columns: repeat(2, 1fr); */
        /* grid-auto-rows: minmax(100px, auto); */
        width: 100%;
        max-height: none;
        height: auto;
        margin-bottom: 2vh;
    }
    .sub-header-specifications {
        padding: 1vw;
        top: 0;
        transform: none;
        width: 90%;
        margin-left: 5%;
    }
    .specs-label {
        text-align: left;
        font-size: 1.5em;
    }
    .specs-content {
        text-align: left;
        padding-left: 5%;
    }
    #sub-section-specifications-image {
        width: 100%;
    }
}


/* LOCATION BENEFITS */

@media screen and (max-width: 60em) {
    #page-5 {
        min-height: auto;
        margin-bottom: 0px;
    }
    #section-location-benefits {
        padding-top: 5vh;
    }
    .map-image {
        max-width: none;
        width: 60vw;
        padding-left: 0vw;
        height: auto;
        margin-left: 0vw;
        /* display: block; */
    }
    #sub-section-location {
        /* white-space: nowrap; */
        max-width: none;
        width: 39vw;
        padding-left: 0;
        /* display: block; */
        overflow: hidden;
    }
    #sub-section-location h1 {
        font-size: 1.5em;
    }
    .page-content.location-benefits {
        /* width: 100%; */
        /* display: block; */
        /* position: relative; */
        font-size: 1.5em;
    }
    .page-content.suitable {
        padding-top: 0;
        font-size: 1.25em;
        margin-top: 1vh;
    }
}


/* GALLERY */

@media screen and (max-width: 60em) {
    #page-6 {
        min-height: auto;
        padding-bottom: 5vh;
    }
    .gallery {
        max-height: 60vh;
        overflow-y: hidden;
    }
    .img-c {
        width: 40%;
        height: 100%;
    }
}


/* CONTACT */

@media screen and (max-width: 60em) {
    #page-7 {
        padding-top: 5vh;
        min-height: auto;
        overflow: hidden;
        height: auto;
    }
    .section-left {
        display: block;
        width: 80vw;
        margin-left: 10vw;
        margin-bottom: 5vh;
    }
    .sub-section.sub-section-inquiry {
        display: inline-block;
        width: 100%;
        vertical-align: top;
        padding-top: 0;
    }
    .inquiry-label {
        display: block;
        text-align: left;
        width: 100%;
        font-size: 1.5rem;
        margin-bottom: 0.5vh;
    }
    .input-text {
        font-size: 1.25rem;
        width: 100%;
    }
    #sub-section-message {
        min-height: auto;
    }
    textarea {
        height: 10vh;
    }
    #sub-section-submit {
        position: relative;
        /* float: right; */
        right: 0;
        /* bottom: -5vh; */
        width: 100%;
        text-align: right;
    }
    .section-right {
        width: 80%;
        margin-left: 10%;
    }
    #sub-section-map {
        height: 20vh;
        width: 100%;
    }
    .sub-section-address {
        width: 100%;
        margin: 2vh auto;
        font-size: 1em;
    }
    .section-footer {
        position: relative;
    }
    .sub-section-footer {
        width: 24.7%;
        height: auto;
    }
    .submit-button {
        font-size: 1.5em;
    }
    .footer-label {
        font-size: 0.8em;
        line-height: 1;
    }
    .footer-images {
        max-width: 100%;
        height: auto;
        position: relative;
    }
}