* {
    margin: 0;
    padding: 0;
    /* overflow-y: hidden; */
}

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Regular.ttf') format('woff2'),
        url('../fonts/Avenir-Regular.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brownstd';
    src: url('../fonts/brownstd-bold.ttf') format('woff2'),
        url('../fonts/brownstd-bold.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --main-font: "Avenir";
    --second-font: "brownstd";
}

body {
    margin: 0 !important;
    overflow-x: hidden;
}

.herosection {
    padding: 50px;
    display: flex;
    gap: 20px;
    width: 100%;
    height: 100vh;
    overflow-y: hidden;
}

.herosection .heroimagesec {
    width: 100%;
    height: 100%;
    position: relative;
}

.herosection .heroimagesec img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.herosection .heroimagesec .toptext {
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
}

.herosection .heroimagesec .toptext h2 {
    font-size: 180px;
    text-transform: uppercase;
    color: #fff;
}

.bg-image,
.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-video {
    display: none;
    z-index: 1;
}



.herosection .heroimagesec .bottomtext {
    position: absolute;
    bottom: 10%;
    width: 100%;
    text-align: center;
}

.herosection .heroimagesec .bottomtext img {
    width: 45px;
    cursor: pointer;
}

.herosection .heroimagesec .bottomtext h2 {
    font-size: 22px;
    text-transform: uppercase;
    color: #fff;
    font-family: var(--main-font);
    font-weight: normal;
}

.herosection .logosec img {
    width: 100%;
    height: 100%
}

.herosection .logosec {
    width: auto;
    height: 100%
}

.sidebarflex {
    /* padding: 50px; */
    width: 100%;
    height: 100vh;
    overflow-y: hidden;
    position: relative;
    top: 0;
}

.sidebarflex .leftsidebar {
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 20px;

}

.sidebarflex .leftsidebar .left {
    /* width: 100%; */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    z-index: 2;
    padding: 50px 0px 50px 50px;
}

.sidebarflex .leftsidebar .left .leftimg {
    display: flex;
    justify-content: space-between;
}

.sidebarflex .leftsidebar .left .leftimg img,
.sidebarflex .leftsidebar .left .flexdivbottom img {
    width: 60px
}

.sidebarflex .leftsidebar .left .flexdivbottom .imgflex {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebarflex .leftsidebar .left .leftimg h2 {
    transform: rotate(90deg);
    font-size: 22px;
    text-transform: uppercase;
    color: #1B1818;
    font-family: var(--main-font);
    font-weight: normal;
    z-index: 1;
}

.dashlineimg {
    height: auto;
    width: 25px !important;
}

.sidebarflex .leftsidebar .bottomfooter {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px 50px 50px 0px;
    align-items: flex-end;
}

.sidebarflex .leftsidebar .bottomfooter .content p {
    font-family: var(--main-font);
    font-size: 15px;
    margin: 0;
}

.sidebarflex .leftsidebar .bottomfooter .logo img {
    width: 150px;
}

.right50px {
    position: absolute;
    right: 50px;
    z-index: 3;
}

.right30px {
    position: absolute;
    right: 30px;
    cursor: pointer;

}


.menu-panel {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 2;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* ACTIVE */
.menu-panel.active {
    opacity: 1;
    pointer-events: auto;
}

/* MENU LIST */
.menu-list {
    display: flex;
    padding: 20px;
    margin: 0;
}

.menu-list li {
    writing-mode: sideways-lr;
    transform: translateY(40px);
    opacity: 0;
    transition: all 0.6s ease;
    font-size: 14px;
    letter-spacing: 2px;
    list-style: none;
    border-right: 1px solid #000;
    padding: 0 20px;

}

.menu-list li a {
    text-decoration: none;
    color: #1B1818;
    font-size: 60px;
}

/* TEXT ANIMATION WHEN OPEN */
.menu-panel.active .menu-list li {
    transform: translateY(0);
    opacity: 1;
}

/* STAGGER EFFECT */
.menu-list li:nth-child(1) {
    transition-delay: 0.1s;
}

.menu-list li:nth-child(2) {
    transition-delay: 0.2s;
}

.menu-list li:nth-child(3) {
    transition-delay: 0.3s;
}

.menu-list li:nth-child(4) {
    transition-delay: 0.4s;
}

.menu-list li:nth-child(5) {
    transition-delay: 0.5s;
}

.menu-list li:nth-child(6) {
    transition-delay: 0.6s;
}

.menu-list li:nth-child(7) {
    transition-delay: 0.7s;
}

.menu-list li:nth-child(8) {
    transition-delay: 0.8s;
}

/* CLOSE BUTTON */
.close-btn {
    position: absolute;
    top: 50px;
    position: absolute;
    right: 30px;
    cursor: pointer;
    transform: rotate(90deg);
    font-size: 22px;
    text-transform: uppercase;
    color: #1B1818;
    font-family: var(--main-font);
    font-weight: normal;
    background-color: unset;
    padding: unset;
    border: unset;
}

.sidebarmainsection {
    position: relative;
    width: 100%;
    height: 100vh;
}



.sidebarmainsection {
    position: relative;
}

.menu-slider {
    padding: 50px 90px 130px 130px;
    position: absolute;
    z-index: 0;
    color: #000;
    top: 0;
    width: 100%;
    height: 100%;
}

.menuswiperslider.container {
    max-width: 1200px;
    margin: auto;
}

.menuswiperslider .swiper {
    width: 100%;
    overflow: visible;
}

.menuswiperslider .swiper-slide {
    height: 70vh;
    display: flex;
    align-items: left;
    justify-content: space-between;
    padding: 30px 0;
    cursor: pointer;
    transition: all .4s ease;
    flex-direction: column;
    border-left: 1px solid #000;
    margin-right: 0 !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.menuswiperslider .swiper-slide-active {
    opacity: 1;
}

.menuswiperslider .swiper-slide a {
    color: #1B1818;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 70vh;
}

.menuswiperslider .swiper-slide:hover a {

    color: #fff;
    z-index: 1;
}

.menuswiperslider .swiper-slide h2 {
    font-size: 30px;
    font-weight: normal;
    margin-top: 10%;
    z-index: 1;
    padding-left: 30px;
}

.menuswiperslider .number {
    font-size: 120px;
    font-weight: normal;
    letter-spacing: 3px;
    color: #00A1ED;
    z-index: 1;
    padding-left: 30px;
}

.menuswiperslider .swiper-slide:hover h2,
.menuswiperslider .swiper-slide:hover .number {
    color: #fff;
}

.menuswiperslider .slide-1 {
    position: relative;
    overflow: hidden;
}

.menuswiperslider .swiper-slide {
    position: relative;
    overflow: hidden;
}

/* Common background layer */
.menuswiperslider .swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 0;
}

/* Individual slide images */
.menuswiperslider .slide-1::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/herosection/slide1.png');
}

.menuswiperslider .slide-2::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/herosection/slide2.png');
}

.menuswiperslider .slide-3::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/herosection/slide3.png');
}

.menuswiperslider .slide-4::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/herosection/slide4.png');
}

.menuswiperslider .slide-5::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/herosection/slide5.png');
}

.menuswiperslider .slide-6::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/herosection/slide6.png');
}

.menuswiperslider .slide-7::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/herosection/slide7.png');
}

/* Fade on hover */
.menuswiperslider .swiper-slide:hover::before {
    opacity: 1;
}

.menuswiperslider .arrownone {
    opacity: 0;
}

.menuswiperslider .swiper-slide:hover .arrownone {
    opacity: 1;
}

.menuswiperslider:not(.in-view) .swiper-slide {
    opacity: 0;
    transform: translateY(150px);
}

.menuswiperslider.in-view .swiper-slide {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease;
}

.menuswiperslider.in-view .swiper-slide:nth-child(1) {
    transition-delay: 0.1s;
}

.menuswiperslider.in-view .swiper-slide:nth-child(2) {
    transition-delay: 0.2s;
}

.menuswiperslider.in-view .swiper-slide:nth-child(3) {
    transition-delay: 0.3s;
}

.menuswiperslider.in-view .swiper-slide:nth-child(4) {
    transition-delay: 0.4s;
}

.menuswiperslider.in-view .swiper-slide:nth-child(5) {
    transition-delay: 0.5s;
}

.menuswiperslider.in-view .swiper-slide:nth-child(6) {
    transition-delay: 0.6s;
}

.menuswiperslider.in-view .swiper-slide:nth-child(7) {
    transition-delay: 0.7s;
}


.home-models {
    height: 100vh;
    padding: 50px 90px 130px 130px;

    overflow: hidden;

}

.home-models .homemodelstitle h2 {
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 55px;
    font-weight: normal;
    margin-top: -15px;
    padding: 0;
    color: #1B1818;
    line-height: normal;
}

/* Initial state */
.home-models:not(.in-view) .home-model-contentflex>div,
.home-models:not(.in-view) .homemodelstitle {
    opacity: 0;
    transform: translateY(80px);
}

/* Animate state */
.home-models.in-view .home-model-contentflex>div,
.home-models.in-view .homemodelstitle {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s ease;
}

.home-models.in-view .homemodelstitle {
    transition-delay: 0.1s;
}

.home-models.in-view .left h2 {
    transition-delay: 0.2s;
}

.home-models.in-view .left .firstp {
    transition-delay: 0.3s;
}

.home-models.in-view .left .secp {
    transition-delay: 0.5s;
}

.home-models.in-view .left .thirdp {
    transition-delay: 0.5s;
}

.home-models.in-view .right .modelcard {
    transition-delay: 0.6s;
}

.home-models .home-model-contentflex {
    display: flex;
    gap: 20px;
}

.home-models .home-model-contentflex .left h2 {
    color: #00A1ED;
    font-family: var(--second-font);
    font-size: 28px;
}

.home-models .home-model-contentflex .left p {
    color: #707070;
    font-family: var(--main-font);
    font-size: 18px;
}

.home-models .home-model-contentflex .left p.thirdp {
    color: #000;
}

.home-models .home-model-contentflex .right .modelflex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.home-models .home-model-contentflex .right .modelflex .modelcard {
    position: relative;
    overflow: hidden;
}

.home-models .home-model-contentflex .right .modelflex .modelcard img {
    width: 100%;
    height: 100%;
}

.home-models .home-model-contentflex .right .modelflex .modelcard:nth-child(3) {
    grid-column: 1 / -1;
}

.home-models .home-model-contentflex .right .modelflex .modelcard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.342);
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.home-models .home-model-contentflex .right .modelflex .modelcard h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 2;
    text-align: center;
    font-family: var(--main-font);
    text-transform: uppercase;
    font-size: 27px;
    font-weight: normal;
}

.home-models .home-model-contentflex .right .modelflex .modelcard {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.model-details-wrapper {
    width: 100%;
    height: 82vh;
    background: #fff;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* When Active */
.home-models.show-details .model-details-wrapper {
    opacity: 1;
    visibility: visible;
    transition: all 0.6s ease-in-out;
}

.home-models.show-details .homemodelstitle,
.home-models.show-details .home-model-contentflex {
    display: none;
}

/* Fade out cards */
.home-models.show-details .modelflex {
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}


/* Individual Model Details */
.model-details {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    position: absolute;
    width: 100%;
    height: 100%;
}

.model-details.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.model-details-centerset {
    width: 100%;
    height: 65vh;
    padding: 100px 0;
    overflow-y: scroll;
    scrollbar-width: none;
}

.model-details-wrapper .model-details .detailstitle h2 {
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 55px;
    font-weight: normal;
    margin-top: -15px;
    padding: 0;
    color: #1B1818;
    line-height: normal;
}

.model-details-wrapper .model-details .detailstitle .back-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    background-color: #F0F0F0;
    border-radius: 10px;
    border: unset;
    text-transform: uppercase;
    justify-content: center;
    padding: 10px 25px;
    cursor: pointer;
}

.model-details-wrapper .model-details-flex-div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

}

.model-details-wrapper .model-details-flex-div .model-cards {
    width: 100%;
}

.model-details-wrapper .model-details-flex-div .model-cards .modelimg img {
    height: 300px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.model-details-wrapper .model-details-flex-div .model-cards .modelcon {
    margin-top: 20px;
}

.model-details-wrapper .model-details-flex-div .model-cards .modelcon .modeldetailsno {
    display: flex;
    gap: 30px;
}

.model-details-wrapper .model-details-flex-div .model-cards .modelcon .modeldetailsno .line {
    border-right: 1px solid #000;
    padding-right: 30px;
}

.model-details-wrapper .model-details-flex-div .model-cards .modelcon .modeldetailsno .line p {
    margin: 0;
    font-family: var(--main-font);
    font-size: 16px;
    color: #6F706F;
}

.model-details-wrapper .model-details-flex-div .model-cards .modelcon .sqftdata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.model-details-wrapper .model-details-flex-div .model-cards .modelcon .sqftdata h2 {
    font-family: var(--main-font);
    color: #000;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 25px;
}

.model-details-wrapper .model-details-flex-div .model-cards .modelcon .sqftdata p {
    margin: 0;
    font-family: var(--main-font);
    color: #000;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 22px;
}

.particulermodel-details {

    opacity: 0;
    transition: opacity 0.4s ease;
    height: 100%;
}

.particulermodel-details.active {

    opacity: 1;

}

.home-models.listing-active .model-details-wrapper {
    display: none;
}

.modellistingwrapper {
    display: none;
}

.modellistingwrapper.active {
    display: block;
    height: 100%;
}

.modellistingwrapper .particulermodel-details .detailstitle h2 {
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 55px;
    font-weight: normal;
    margin-top: -15px;
    padding: 0;
    color: #1B1818;
    line-height: normal;
}

.modellistingwrapper .particulermodel-details .detailstitle .back-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    background-color: #F0F0F0;
    border-radius: 10px;
    border: unset;
    text-transform: uppercase;
    justify-content: center;
    padding: 10px 25px;
    cursor: pointer;
    z-index: 1;
    position: relative;
}

.modellistingwrapper .perticuler-modelflex {
    display: flex;
    padding: 20px 0 0;
    gap: 30px;
}

.modellistingwrapper .perticuler-modelflex .leftside {
    width: 30%
}

.modellistingwrapper .perticuler-modelflex .leftside img {
    width: 100%;
    padding-bottom: 20px;
}

.modellistingwrapper .perticuler-modelflex .rightside {
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.modellistingwrapper .perticuler-modelflex .rightside .floreplanimg {
    display: flex;
    gap: 20px;
    height: 600px;

    cursor: pointer;
}

.modellistingwrapper .perticuler-modelflex .rightside .floreplanimg img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    object-position: center;

}

.modellistingwrapper .perticuler-modelflex .leftside .flex {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #000;
    padding: 15px 0;
}

.modellistingwrapper .perticuler-modelflex .leftside .flex.lotno {
    border-top: 1px solid #000;
}

.modellistingwrapper .perticuler-modelflex .leftside .flex h2 {
    font-family: var(--main-font);
    font-size: 20px;
    font-weight: normal;
}

.modellistingwrapper .perticuler-modelflex .leftside .flex p {
    font-family: var(--main-font);
    font-size: 20px;
    font-weight: normal;
    margin: 0;
}

.modellistingwrapper .perticuler-modelflex .leftside .flex .eleflex {
    display: flex;
    gap: 10px;
    cursor: pointer;
    z-index: 1;
    position: relative;
}

.modellistingwrapper .perticuler-modelflex .leftside .flex .eleflex .elebtn {
    background-color: #F0F0F0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: var(--main-font);
    border-radius: 7px;
    text-transform: uppercase;
}

.modellistingwrapper .perticuler-modelflex .leftside .flex .eleflex .elebtn.active {
    background-color: #000;
    color: #fff;
}


.florerightmodel {}

.florerightmodel.active {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.florerightmodel.active .floreplanimg {
    background: #fff;
    padding: 20px;

    width: 90%;
    position: relative;
    padding: 50px;
    height: 91% !important;
    display: flex;
    justify-content: center;

}

.close-floor {
    display: none;
}

.florerightmodel.active .close-floor {
    position: absolute;
    top: 10px;
    right: 0px;
    font-size: 35px;
    background: none;
    border: none;
    color: #000;
    cursor: pointer;
    display: flex;
}

.florerightmodel .zoomimg img {
    display: none;
}

.florerightmodel.active .zoomimg img {
    display: flex;
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 80px !important;
    height: 80px !important;
}

.SITEPLAN {
    height: 100vh;
    padding: 50px 90px 130px 130px;
    overflow: hidden;
}

.SITEPLAN .SITE-PLANtitle h2 {
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 55px;
    font-weight: normal;
    margin-top: -15px;
    padding: 0;
    color: #1B1818;
    line-height: normal;
}

.amenitymap {
    height: 100vh;
    padding: 50px 90px 130px 130px;
    overflow: hidden;
}

.amenitymap .amenitymaptitle h2 {
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 55px;
    font-weight: normal;
    margin-top: -15px;
    padding: 0;
    color: #1B1818;
    line-height: normal;
}

.amenitymap .map-section {
    width: 100%;
    height: 65vh;

}

.amenitymap .map-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.amenitymap .map-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* TABS */
.amenitymap .map-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px;

    flex-wrap: wrap;
}

.amenitymap .tab-btn {
    padding: 12px 22px;
    border-radius: 8px;
    border: none;
    background: #F0F0F0;
    cursor: pointer;
    font-weight: normal;
    font-family: var(--main-font);
    transition: all 0.3s ease;
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}


.amenitymap .tab-btn.active {
    background: #00A1ED;
    color: #fff;
}

.amenitymap .tab-btn.active .activenone {
    display: none;
}

.activeblock {
    display: none;
}

.amenitymap .tab-btn.active .activeblock {
    display: flex;
}



/* WHEN SECTION ACTIVE */
/* INITIAL STATE */
.amenitymap .amenitymaptitle h2,
.amenitymap .map-tabs .tab-btn {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease;
}

/* WHEN IN VIEW */
.amenitymap.in-view .amenitymaptitle h2,
.amenitymap.in-view .map-tabs .tab-btn {
    opacity: 1;
    transform: translateY(0);
}

/* STAGGER EFFECT */
.amenitymap.in-view .map-tabs .tab-btn:nth-child(1) {
    transition-delay: 0.2s;
}

.amenitymap.in-view .map-tabs .tab-btn:nth-child(2) {
    transition-delay: 0.3s;
}

.amenitymap.in-view .map-tabs .tab-btn:nth-child(3) {
    transition-delay: 0.4s;
}

.amenitymap.in-view .map-tabs .tab-btn:nth-child(4) {
    transition-delay: 0.5s;
}

.amenitymap.in-view .map-tabs .tab-btn:nth-child(5) {
    transition-delay: 0.6s;
}

.amenitymap.in-view .map-tabs .tab-btn:nth-child(6) {
    transition-delay: 0.7s;
}

.amenitymap.in-view .map-tabs .tab-btn:nth-child(7) {
    transition-delay: 0.8s;
}

.feature-finishes {
    height: 100vh;
    padding: 50px 90px 130px 130px;
    overflow: hidden;
}

.feature-finishes .feature-finishestitle h2 {
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 55px;
    font-weight: normal;
    margin-top: -15px;
    padding: 0;
    color: #1B1818;
    line-height: normal;
}




.features-section {
    display: flex;
    height: 70vh;
    gap: 30px;
}

/* LEFT IMAGE */
.features-left {
    width: 45%;
}

.features-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
    cursor: pointer;
    z-index: 1;
    position: relative;
}

/* RIGHT SIDE */
.features-right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* LIST */
.featurelist {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    transition: transform 0.5s ease;
    width: 100%;
}

.featurelist li {
    text-align: right;
    font-family: var(--main-font);
    font-weight: normal;
    padding: 25px 0;
    font-size: 25px;
    cursor: pointer;
    opacity: 0.2;
    transition: all 0.3s ease;
    border-top: 1px solid #000;
    width: 100%;
    color: #000;
}

/* ACTIVE CENTER */
.featurelist li.active {
    font-size: 30px;
    font-weight: normal;
    opacity: 1;
}

/* Near items */
.featurelist li.near {
    opacity: 0.6;
}

.featurelist li.active::after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url("../images/features/arrow.png") no-repeat center;
    background-size: contain;
    margin-left: 40px;
    vertical-align: middle;
}



.feature-details-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
    z-index: 1;
    width: 100%;
    overflow: hidden;
}

.feature-details-wrapper .feature-details {
    width: 100%;
    height: 85vh;
}

.feature-details-wrapper.active {
    opacity: 1;
    visibility: visible;
}

.feature-details-wrapper.active .features-section {
    display: none;
}


.feature-details img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}




.feature-details-wrapper .feature-details .detailstitle h2 {
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 55px;
    font-weight: normal;
    margin-top: -15px;
    padding: 0;
    color: #1B1818;
    line-height: normal;
}

.feature-details-wrapper .feature-details .detailstitle .back-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    background-color: #F0F0F0;
    border-radius: 10px;
    border: unset;
    text-transform: uppercase;
    justify-content: center;
    padding: 10px 25px;
    cursor: pointer;
    z-index: 2;
    position: relative;
}

.feature-details-wrapper .feature-details .detailstitle .back-btn img {
    width: 10px;
}

.feature-finishes .feature-finishestitle h2,
.feature-finishes .features-left img {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s ease;
}

.feature-finishes.in-view .feature-finishestitle h2 {
    opacity: 1;
    transform: translateY(0);
}

.feature-finishes.in-view .features-left img {
    opacity: 1;
    transform: translateY(0);
}

.featurelist {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s ease;
}

/* STAGGER EFFECT */
.feature-finishes.in-view ul {
    opacity: 1;
    transform: translateY(0);
}

.feature-details-wrapper .detailscontentflex {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 30px;
    padding: 20px 0;

    overflow-y: scroll;
    z-index: 1;
    position: relative;
    scrollbar-width: thin;
}

.feature-details-wrapper .detailscontentflex .contentleft img {
    width: 100%;
    max-height: 100%;
}

.feature-details-wrapper .detailscontentflex .contentright h2 {
    color: #00A1ED;
    font-family: var(--main-font);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 22px;
}

.feature-details-wrapper .detailscontentflex .contentright ul {
    padding: 0;
    font-family: var(--main-font);
    font-weight: normal;
    font-size: 20px;
    color: #707070;
    margin-left: 25px;
}

.contentleft img {
    opacity: 0;
    transform: translateX(-80px);
    animation: slideFade 3s ease-in forwards;
    /* <-- added forwards */
}

/* Define the animation */
@keyframes slideFade {
    0% {
        opacity: 0;
        transform: translateX(-80px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* gallery  */
.gallery {
    height: 100vh;
    padding: 50px 90px 130px 130px;
    overflow: hidden;
}
/* Default State (Before in-view) */
.gallerytitle > div,
.gallerytitle,
.galleryleft p,.galleryleft h2 {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
}

/* When .gallery has .in-view class */
.gallery.in-view .gallerytitle > div,
.gallery.in-view .gallerytitle,
.gallery.in-view .galleryleft p ,
.gallery.in-view .galleryleft h2{
    opacity: 1;
    transform: translateY(0);
}

/* Delay Controls */
.gallery.in-view .gallerytitle {
    transition-delay: 0.1s;
}
.gallery.in-view .galleryleft h2 {
    transition-delay: 0.2s;
}
.gallery.in-view .galleryleft p {
    transition-delay: 0.3s;
}

.gallery .gallerytitle h2 {
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 55px;
    font-weight: normal;
    margin-top: -15px;
    padding: 0;
    color: #1B1818;
    line-height: normal;
}

.gallery .gallery-main-data {
    height: 70vh;
    display: flex;
    align-items: center;
}

.gallery .gallery-main-data .galleryleft {
    width: 30%;
}

.gallery .gallery-main-data .galleryleft h2 {
    text-transform: uppercase;
    color: #00A1ED;
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 25px;
}

.gallery .gallery-main-data .galleryleft p {
    color: #707070;
    font-family: var(--main-font);
    font-weight: normal;
    font-size: 18px;
}


/* slider  */

.gallery .galleryright {
    width: 60%;
    display: flex;
    gap: 40px;
}

/* MAIN SLIDER */
.gallery .main-slider {
    width: 75%;
    height: 800px;
    overflow: hidden;
    position: relative;
}

.gallery .slides {
    display: flex;
    flex-direction: column;
    transition: 0.6s ease;

    align-items: center;
}

.gallery .slides img {
    height: 350px;
    width: 600px;

    object-fit: cover;
    opacity: 0.3;
    transform: scale(0.85);
    transition: 0.4s ease;
}

.gallery .slide-item {
    position: relative;
    height: 350px;
    z-index: 999;
    cursor: pointer;
}


/* Overlay */
.gallery .slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    text-align: center;
    color: #fff;
    opacity: 0;
    transition: 0.4s ease;
    z-index: 2;
}

/* Dark overlay background */
.gallery .slide-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: 0.4s ease;
}

.gallery .slide-item:hover::after {
    opacity: 1;
}

.gallery .slide-item:hover .slide-content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.gallery .slide-item .slide-content h2{
    font-size: 25px;
    font-family: var(--main-font);
    font-weight: normal;
    text-transform: uppercase;
}
.gallery .modal-slider {
    overflow: hidden;
}

.gallery .modal-track {
    display: flex;
    transition: transform 0.5s ease;
}

.gallery .modal-track img {
    width: 100%;
    height: 80vh;
    object-fit: contain;
    flex-shrink: 0;
}

/* ACTIVE */
.gallery .slides img.active {
    opacity: 1;
    transform: scale(1);
}

/* Gradient Fade */
.gallery .main-slider::before,
.gallery .main-slider::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 80px;
    pointer-events: none;
    z-index: 2;
}

.gallery .main-slider::before {
    top: 0;
    background: linear-gradient(to bottom, #ffffffb0, transparent);
}

.gallery .main-slider::after {
    bottom: 0;
    background: linear-gradient(to top, #ffffffb0, transparent);
}

/* THUMBNAILS */
.gallery .thumbs {
    width: 150px;
    height: 100%;
    overflow: auto;
}

.gallery .thumbs img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    margin-bottom: 15px;
    cursor: pointer;
    opacity: 0.5;
    transition: 0.3s;
}

.gallery .thumbs img.active {
    opacity: 1;
}


/* MODAL */
.gallery .image-modal{
    position:fixed;
    inset:0;
    background:rgba(0, 0, 0, 0.685);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.gallery .modal-slider{
    position:relative;
    width:90%;
    
}

.gallery .modal-image{
    width:100%;
    height:80vh;
    object-fit:contain;
}
.gallery .modal-image img{
    width: 100%;
}
.gallery .close-btn{
    position:absolute;
    top:30px;
    right:40px;
    font-size:40px;
    color:#fff;
    cursor:pointer;
}

.gallery .prev, .next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:#fff;
    font-size:40px;
    cursor:pointer;
}

.gallery .prev{ left:0px; }
.gallery .next{ right:0px; }

/* gallery  */
.builder-story-flexdiv > div,
.builder-story-flexdiv,
.builder-story-flexdiv p,.builder-story-flexdiv h2 ,
.builder-story-flexdiv  .rightside  .imgflex,
.flexcontentdiv-story h2,
.flexcontentdiv-story p,
.flexcontentdiv-story .imgdiv,
.logoflexdiv{
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
}

/* When .gallery has .in-view class */
.builder-story.in-view .builder-story-flexdiv > div,
.builder-story.in-view .builder-story-flexdiv,
.builder-story.in-view .builder-story-flexdiv p ,
.builder-story.in-view .builder-story-flexdiv .builder-storytitle h2,
.builder-story.in-view .rightside  .imgflex,
.builder-story.in-view .builder-story-flexdiv h2,
.builder-story.in-view .flexcontentdiv-story h2,
.builder-story.in-view .flexcontentdiv-story .imgdiv,
.builder-story.in-view .flexcontentdiv-story p,
.builder-story.in-view .logoflexdiv{
    opacity: 1;
    transform: translateY(0);
}



.ourhistory {
    height: 100vh;
    padding: 50px 90px 130px 130px;
    overflow: hidden;
}

.ourhistory .ourhistorytitle h2 {
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 55px;
    font-weight: normal;
    margin-top: -15px;
    padding: 0;
    color: #1B1818;
    line-height: normal;
}

.ourhistory .ourhistoryflex {
    display: flex;
    height: 85vh;
    overflow: hidden;
    gap: 50px;
}

.ourhistory .ourhistoryflex .historyleft {
    width: 100%;
}

.ourhistory .ourhistoryflex .historyright {
    width: 18%;
}

.ourhistory .ourhistoryflex .historyright img {
    width: 100%;
    height: auto;
}

.ourhistory .ourhistoryflex .historyleft .contentflex-div {
    display: flex;
    gap: 40px;
}

.ourhistory .ourhistoryflex .historyleft .history-content h2 {
    text-transform: uppercase;
    color: #00A1ED;
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 25px;
}

.ourhistory .ourhistoryflex .historyleft .history-content p {
    color: #000;
    font-family: var(--main-font);
    font-weight: normal;
    font-size: 18px;
}

.ourhistory .ourhistoryflex .historyleft .contentflex-div .flexleft h2,
.ourhistory .ourhistoryflex .historyleft .contentflex-div .flexright h2 {
    text-transform: uppercase;
    color: #00A1ED;
    font-family: var(--main-font);
    font-weight: normal;
    font-size: 18px;
    padding-bottom: 15px;
}

.ourhistory .ourhistoryflex .historyleft .contentflex-div .flexleft p,
.ourhistory .ourhistoryflex .historyleft .contentflex-div .flexright p {
    color: #707070;
    font-family: var(--main-font);
    font-weight: normal;
    font-size: 17px;
}

/* builder  */
.historyleft > div,
.historyleft,
.historyleft p,.historyleft h2 ,
.historyright  .img{
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
}

/* When .gallery has .in-view class */
.ourhistory.in-view .historyleft > div,
.ourhistory.in-view .historyleft,
.ourhistory.in-view .historyleft p ,
.ourhistory.in-view .historyleft h2 ,
.ourhistory.in-view .historyleft .history-content h2,
.ourhistory.in-view .historyleft .ourhistorytitle h2,
.ourhistory.in-view .historyright  .img{
    opacity: 1;
    transform: translateY(0);
}

/* Delay Controls */
.ourhistory.in-view .historyleft {
    transition-delay: 0.1s;
}
.ourhistory.in-view .historyleft h2 {
    transition-delay: 0.2s;
}
.ourhistory.in-view .historyleft p {
    transition-delay: 0.3s;
}


.builder-story {
    height: 100vh;
    padding: 50px 90px 130px 130px;
    overflow: hidden;
}

.builder-story .builder-storytitle h2 {
    text-transform: uppercase;
    font-family: var(--main-font);
    font-size: 55px;
    font-weight: normal;
    margin-top: -15px;
    padding: 0;
    color: #1B1818;
    line-height: normal;
}

.builder-story .builder-story-flexdivmain {
    height: 85vh;
    overflow: hidden;
}

.builder-story .builder-story-flexdiv {
    display: flex;

    gap: 50px;
}

.builder-story .builder-story-flexdiv .leftside {
    width: 60%;
}

.builder-story .builder-story-flexdiv .leftside .content {
    margin-top: 22%;
}

.builder-story .builder-story-flexdiv .leftside .content h2 {
    text-transform: uppercase;
    color: #00A1ED;
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 22px;
    padding-bottom: 15px;
}

.builder-story .builder-story-flexdiv .leftside .content p {
    color: #707070;
    font-family: var(--main-font);
    font-weight: normal;
    font-size: 18px;
}

.builder-story .builder-story-flexdiv .rightside .imgflex .left img {
    height: 240px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.builder-story .builder-story-flexdiv .rightside .imgflex .right img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    object-position: center;
}

.builder-story .builder-story-flexdiv .leftside .content p.colorchange {
    color: #000;
}

.builder-story .builder-story-flexdiv .rightside {
    width: 100%;
}

.builder-story .builder-story-flexdiv .rightside .imgflex {
    gap: 20px;
    display: flex;
    width: 100%;
    height: 500px;
}

.builder-story .builder-story-flexdiv .rightside .imgflex .left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.builder-story .builder-story-flexdiv .rightside .imgflex .right {
    width: 70%;
}

.builder-story .flexcontentdiv-story {
    display: flex;
    gap: 50px;
}

.builder-story .flexcontentdiv-story .left {
    width: 60%;
}

.builder-story .flexcontentdiv-story h2 {
    text-transform: uppercase;
    color: #00A1ED;
    font-family: var(--main-font);
    font-weight: normal;
    font-size: 18px;
    padding-bottom: 0px;
}

.builder-story .flexcontentdiv-story .right {
    display: flex;
    width: 100%;
    gap: 20px;
}

.builder-story .flexcontentdiv-story .right img {
    width: 100%;
}

.builder-story .flexcontentdiv-story .right .imgdiv {
    width: 40%;
}

.builder-story .flexcontentdiv-story p {
    color: #707070;
    font-family: var(--main-font);
    font-weight: normal;
    font-size: 16px;
}

.builder-story .logoflexdiv {
    display: flex;
    gap: 20px;
    margin-top: -60px;

}