@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap');

/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Nunito', sans-serif;
  background: #231f20;
}

.floating-icons{
    position:fixed;
    right:0;
    top:110px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:9999;
}

.icon-box{

    width:50px;
    height:50px;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
    overflow:hidden;

    background:rgba(48, 48, 48, 0.05);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.38);
    border-right:none;

    border-radius:50%;

    transition:transform .28s ease;

    text-decoration:none;

}

/* white edge glow */

.icon-box::after{

    content:"";

    position:absolute;

    top:0;
    right:0;

    width:2px;
    height:100%;

    background:rgba(255,255,255,.95);

    box-shadow:0 0 15px rgba(255,255,255,.8);

}

/* glass shine */

.icon-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    135deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.03) 45%,
    transparent 70%
    );

    pointer-events:none;

}

.icon-box:hover{

    transform:translateX(-12px);

}

.icon-box i{
  color:#fff;
    font-size:22px;

}

@media (max-width:786px){

.floating-icons{
    position:fixed;
    left:70px;
   
    bottom:12px;
    top:auto;
     
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;

    z-index:9999;
}

.icon-box{
    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(45,45,45,.25);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.icon-box::after{
    display:none;
}

.icon-box:hover{
    transform:none;
}

.badge{
    top:-5px;
    right:-5px;
}

}
/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 20px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  background: transparent;
  transition: 0.3s;

  /* ADD THIS */
  transform: translateY(-100%);
  animation: navbarDrop 0.8s ease-out forwards;
}

/* DROP ANIMATION */
@keyframes navbarDrop {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/* SCROLL EFFECT */
.navbar.scrolled{
    background:rgba(219, 216, 216, 0.84);   
    backdrop-filter:blur(10px);        
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid #adacac;
}


.navbar.scrolled a{
    color:#000;
}

/* MENU ICON (hamburger) BLACK */
.navbar.scrolled .menu-btn{
    color:#000;
}

/* LOGO TEXT "NAMBIAR" RED */
.navbar.scrolled .logo-wrap h1{
    color: #990505;   
}

/* "BUILDERS" TEXT BLACK */
.navbar.scrolled .logo-wrap p{
    color:#000;
}

/* MOBILE HEADER SCROLL STATE */
.mobile-header.scrolled {
    background: rgba(219, 216, 216, 0.84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #adacac;
}

/* Nambiar (h2) */
.mobile-header.scrolled .logo-wrap h1 {
    color: #990505;
}

/* BUILDERS (span) */
.mobile-header.scrolled .logo-wrap p {
    color: #000;
}




/* Logo */
.logo-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
a{
    text-decoration: none;
}

/* Top */
.logo-top{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-icon{
    width:38px;
    height:auto;
    object-fit:contain;
}

.logo-text{
    display:flex;
    flex-direction:column;
    margin-left:-6px;
}

.logo-text h1{
    margin:0;
    font-family:'Cormorant Garamond', serif;
    font-size:34px;
    font-weight:600;
    line-height:1;
    color:#fff;

}

.logo-text p{
    margin-bottom:2px;
    font-family:'Cormorant Garamond', serif;
    font-size:10px;
    letter-spacing:10px;
    color:#fff;
}

/* Bottom */
.partner{
    width:100%;
    margin-top:2px;
    border-top:1px solid rgba(255,255,255,.35);
    padding-top:1px;
}

.partner span{
    display:block;
    font-family:'Jost',sans-serif;
    font-size:9px;
    font-weight:normal;
    letter-spacing:1.3px;
    color: #f8f7f7;
}

/* ---------------------- */
/* Mobile */
/* ---------------------- */
@media (max-width:768px){

    .logo-icon{
        width:28px;
    }

     .logo-text{
          margin-left:-7px;
     }
    .logo-text h1{
        font-size:25px;
    }

    .logo-text p{
        font-size:6px;
        letter-spacing:8.2px;
    }


    .partner{
    width:120px;
    margin-top:1px;
   
    padding-top:1px;
}
    .partner span{
        font-size:6.5px;
        letter-spacing:.8px;
    }
}


/*==========================================
            POPUP OVERLAY
==========================================*/

.popup-overlay1{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.72);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999999;
    animation:fadeIn .35s ease;
}

/*==========================================
            POPUP BOX
==========================================*/

.popup-box1{
    position:relative;
    width:600px;
    background:#7b9162;
    padding:32px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.popup-inner1{
    border:1px solid rgba(255,255,255,.22);
    padding:34px 42px 38px;
}

/*==========================================
              CLOSE BUTTON
==========================================*/

.popup-close1{
    position:absolute;
    top:-1px;
    right:-1px;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.35);
    background:#7b9162;
    color:#fff;
    font-size:34px;
    line-height:38px;
    cursor:pointer;
    transition:.3s;
}

.popup-close1:hover{
    background:#6d8357;
}

/*==========================================
                TITLE
==========================================*/

.popup-inner1 h2{
    margin:0 0 40px;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
    font-size:22px;
    font-weight:700;
    text-transform:uppercase;
}

/*==========================================
                INPUTS
==========================================*/

.input-group1{
    margin-bottom:28px;
}

.input-group1 input{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.8);
    color:#fff;
    font-size:18px;
    padding:8px 0 12px;
    outline:none;
}

.input-group1 input::placeholder{
    color:#fff;
    opacity:.95;
}

/*==========================================
            LOOKING FOR
==========================================*/

.looking-for1{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin:18px 0 28px;
    color:#fff;
    font-size:16px;
}

.looking-for1 span{
    font-weight:500;
}

.looking-fo1 label{
    display:flex;
    align-items:center;
    gap:4px;
    cursor:pointer;
}

.looking-for1 input[type=radio]{
    accent-color:#fff;
    transform:scale(1.05);
}

/*==========================================
                BUTTON
==========================================*/

.interest-btn1{
    width:100%;
    height:50px;
    border:none;
    background:#fff;
    color:#222;
    font-size:18px;
    letter-spacing:1px;
    cursor:pointer;
    transition:.35s;
}

.interest-btn1:hover{
    background:#f2f2f2;
}

/*==========================================
             ANIMATION
==========================================*/

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/*==========================================
              MOBILE
==========================================*/

@media(max-width:786px){

.popup-box1{
    width:92%;
    padding:18px;
}

.popup-inner1{
    padding:24px;
}

.popup-inner1 h2{
    font-size:20px;
    margin-bottom:30px;
}

.input-group1 input{
    font-size:16px;
}

.looking-for1{
    gap:10px;
    font-size:15px;
}

.interest-btn1{
    height:46px;
    font-size:16px;
}

.popup-close1{
    width:40px;
    height:40px;
    font-size:28px;
}

}

.header-logo{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

/*==========================================
        DESKTOP LOGO
==========================================*/

.desktop-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    width:fit-content;
    gap:10px;
    text-decoration:none;
}

.desktop-brand img{
    width:45px;
    height:45px;
    object-fit:contain;
    flex-shrink:0;
}



/*=========================================
        HERO SECTION
=========================================*/
/* Hero Section */
.hero {
    width: 100%;
    overflow: hidden;
}

.hero img {
    width: 100%;
    height: 100vh;
    display: block;
    object-fit: cover;
    cursor: pointer;
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .hero img {
        height: 70vh;
    }
}

/* Mobile (up to 767px) */
@media (max-width: 786px) {
    .hero img {
        height: auto;
        width: 100%;
        object-fit: contain;
    }
}

/*
.hero{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    background:#000;
    display:flex;
    font-family:"Jost",sans-serif;
}

.hero-left{
    position:relative;
    width:60%;
    height:100%;
    overflow:hidden;
    background:#000;
    clip-path: polygon(
        0 0,
        100% 0,
        90% 100%,
        0 100%
    );
}

.hero-left img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.45),
        rgba(0,0,0,.15),
        rgba(0,0,0,.05)
    );
    z-index:2;
}

.hero-content{
    position:absolute;
    left:clamp(16px, 4vw, 60px);
    bottom:clamp(20px, 5vh, 70px);
    z-index:5;
    max-width:90%;
}

.hero-content h1{
    margin:0;
    color:#fff;
    font-size:clamp(20px, 4.4vw, 64px);
    line-height:.92;
    font-weight:800;
    letter-spacing:-2px;
    text-transform:uppercase;
}


.hero-right{
    position:relative;
    width:45.9%;      
    height:100%;
    margin-left:-5.1%;
    background:#000;
    overflow:hidden;
    clip-path: polygon(
        13% 0,
        100% 0,
        100% 100%,
        0.5% 100%
    );
}

*/
/*=========================================
        TOP IMAGE
=========================================*/
/*
.right-image{
    position:relative;
    width:100%;
    height:66%;
    overflow:hidden;
    background:#000;
}

.right-image img{
    width:100%;
    height:99.5%;
    object-fit:cover;
    object-position:38% 35%;
    display:block;
}

.right-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.05),
        rgba(0,0,0,.15),
        rgba(0,0,0,.35)
    );
}

*/

/*=========================================
        SPORTS DISTRICT TITLE
=========================================*/
/*
.sports-title{
    position:absolute;
    top:70%;
    left:clamp(14px, 3vw, 45px);
    z-index:5;
    max-width:90%;
    margin-left:20px;
}

.sports-title h2{
    margin:0;
    color:#fff;
    font-family:"Jost",sans-serif;
    font-size:clamp(18px, 3.6vw, 52px);
    font-weight:800;
    line-height:.90;
    letter-spacing:-2px;
    text-transform:uppercase;
    text-shadow:0 8px 20px rgba(0,0,0,.35);
}
    */

/*=========================================
        ORANGE STRIP
=========================================*/
/*
.launch-strip{
    position:absolute;
    top:62.8%;
    left:-4%;
    width:108%;
    height:clamp(14px, 2.6vw, 38px);
    background:#f3a321;
    transform:rotate(-4deg);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:22;
    box-shadow:0 6px 14px rgba(0,0,0,.25);
    transition:.4s;
    padding:0 4px;
    box-sizing:border-box;
    white-space:nowrap;
}

.hero:hover .launch-strip{
    transform:rotate(-4deg) scale(1.02);
}

.launch-strip p{
    color:#111;
    font-family:"Jost",sans-serif;
    font-size:clamp(6px, 1vw, 14px);
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    white-space:nowrap;
}

.launch-strip span{
    font-size:clamp(6px, .85vw, 11px);
    font-weight:600;
}
    */

/*=========================================
        BOTTOM BLACK SECTION
=========================================*/
/*
.right-bottom{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:34%;
    background:#000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 clamp(10px, 2vw, 30px);
    box-sizing:border-box;
    z-index:15;
    gap:10px;
}

.bottom-text{
    max-width:55%;
    flex:1 1 auto;
    min-width:0;
}

.bottom-text p{
    color:#fff;
    font-family:"Jost",sans-serif;
    font-size:clamp(8px, 1vw, 13px);
    font-weight:400;
    line-height:1.4;
    letter-spacing:1px;
    text-transform:uppercase;
}

.district-logo{
    width:clamp(90px, 16vw, 230px);
    height:auto;
    object-fit:contain;
    transition:.4s;
    flex:0 0 auto;
}

.district-logo:hover{
    transform:scale(1.05);
}
*/

/*==================================================
                MOBILE HERO
==================================================*/
/*
@media (max-width:786px){

.hero{
    height:350px !important;
    min-height:350px;
    display:flex;
    flex-direction:row;
    overflow:hidden;
}

.hero-left{
    width:60%;
    flex:0 0 60%;
    height:100%;
    clip-path:polygon(
        0 0,
        100% 0,
        90% 100%,
        0 100%
    );
}

.hero-content{
    left:12px;
    bottom:16px;
}

.hero-content h1{
    font-size:18px;
    line-height:1;
    letter-spacing:-0.5px;
    font-weight:800;
}

.hero-right{
    width:45.9%;
    flex:0 0 45.9%;
    height:100%;
    margin-left:-5.1%;
    clip-path:polygon(
        13% 0,
        100% 0,
        100% 100%,
        0.5% 100%
    );
}

.right-image{
    height:66%;
}

.right-image img{
    object-position:38% 35%;
}

.sports-title{
    top:70%;
    left:14px;
    margin-left:20px;
}

.sports-title h2{
    font-size:18px;
    line-height:.9;
    letter-spacing:-0.5px;
}

.launch-strip{
    top:62.8%;
    left:-4%;
    width:108%;
    height:14px;
    transform:rotate(-4deg);
}

.launch-strip p{
    font-size:5px;
    letter-spacing:.5px;
}

.launch-strip span{
    font-size:6px;
}

.right-bottom{
    height:34%;
    padding:0 8px;
}

.bottom-text{
    max-width:110px;
}

.bottom-text p{
    font-size:3px;
    line-height:1.3;
    letter-spacing:.2px;
}

.district-logo{
    width:80px;
}

}

-->

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

.mobile-header{
    display:none;
}

/* ===========================
MOBILE NAV
=========================== */

.mobile-nav{
    position: fixed;
    top: 0;
    right: -100%;
    width: 60%;
    height: 100vh;
    background: #231f20;
    z-index: 999999;
    overflow-y: auto;
    transition: right .4s ease;
}

.mobile-nav.active{
    right: 0;
}


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

.mobile-header{
    display:none;
}

@media screen and (max-width:1024px){

.navbar{
    display:none;
}

.mobile-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:70px;

    background: #231f20;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 10px;

    z-index:999999;


}

.mobile-brand{
    display:flex;
    align-items:center;
    flex:1;
    min-width:0;
    text-decoration:none;
       opacity:0;
    transform: translateY(-20px);
    animation: brandDrop 0.8s ease-out forwards;
}


@keyframes brandDrop {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


#menuBtn{
    width:40px;
    height:40px;
    background:none;
    border:none;
    cursor:pointer;
  
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;

    opacity:0;
    transform: translateY(-20px);
    animation: menuBtn 0.8s ease-out forwards;
}

@keyframes menuBtn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ALL LINES */
#menuBtn span{
    display:block;
    height:2px;
    background:#fff;
      margin-left:12px;
}

/* TOP LINE */
#menuBtn span:nth-child(1){
    width:24px;
}

/* MIDDLE LINE */
#menuBtn span:nth-child(2){
    width:24px;
}

#menuBtn span:nth-child(3){
    width:12px;   
}



/*=========================================
MOBILE NAVIGATION
=========================================*/

.mobile-nav{

    position:fixed;

    top:0;
    right:-100%;

    width:60%;

    height:100vh;

    background:#231f20;

    z-index:999999;

    overflow-y:auto;

    transition:right .4s ease;


}

.mobile-nav.active{

    right:0;

}

/* Close */
#closeBtn{
    position:absolute;
    top:18px;
    right:20px;

    width:40px;
    height:40px;

    background:none;
    border:none;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* LINES */
#closeBtn span{
    position:absolute;
    width:28px;      
    height:1.5px;    
    background:#fff;
    transition:0.3s;
}

/* CROSS */
#closeBtn span:nth-child(1){
    transform:rotate(45deg);
}

#closeBtn span:nth-child(2){
    transform:rotate(-45deg);
}

/* List */

.mobile-list{

    list-style:none;

    margin:0;

    padding:80px 0 30px;

}

.mobile-list li{

    margin:0;

    padding:0;

}

/* Links */

.mobile-list a{

    display:flex;

    align-items:center;

    justify-content:space-between;
    padding:18px 24px;
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:500;

}

/* Accordion */

.accordion{
    width:100%;
    background:none;
    border:none;
    color:#fff;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 24px;
    font-size:16px;
}

/* Small Accordion */

.accordion.small{
    font-size:15px;
 padding-left:40px;
}

/* Arrow */

.arrow{
    width:26px;
    height:26px;
    background:#36402f;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    transition:.3s;
}

/* Submenu */
.submenu{
    list-style:none;
    margin:0;
    padding:0;
    background:#1b1919;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.submenu a{
    padding:14px 58px;
    font-size:14px;
}

/* Contact */
.contact-group>a{
    background: #231f20;
    font-weight:600;

}

.contact-links{
    list-style:none;
    margin-left:20px;
    padding:12px 0;
    background: #1b1919;
}

.contact-links a{
    padding:6px 34px;
    font-size:14px;
    border:none !important;   
}


.contact-links a::after{
    display:none;
}

     .hero {
        height: auto;
         padding-top: 70px
    }

    .hero-bg {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }

}


.mobile-list a,
.accordion,
.submenu a{
    position:relative;
}

/* CUSTOM BORDER */
.mobile-list a::after,
.accordion::after,
.submenu a::after{
    content:"";
    position:absolute;
    bottom:0;

    left:20px;   
    width:calc(100% - 20px);

    height:1px;
    background:rgba(255,255,255,.08);
}

/* Tablet */

@media(max-width:786px){

.mobile-nav{

    width:82%;

    right:-82%;

}
 .mobile-header{
        height:70px;
        padding:0 10px;
    }

    .mobile-brand{
        gap:6px;
    }

    .mobile-brand img{
        width:38px;
        height:38px;
    }

    /* Nambiar */
    .brand-text h2{
        font-size:18px;
        line-height:1;
    }

    /* BUILDERS */
    .brand-text span{
        font-size:7px;
        letter-spacing:5px;
        margin-top:2px;
    }

    /* Vertical Divider */
    .partner-divider{
        height:30px;
        margin:0 2px;
    }

    /* Right Side */
    .partner-text{
        margin-top:0;
    }

    .partner-text h3{
        font-size:12px;
        letter-spacing:.6px;
        line-height:1;
    }

    .partner-text p{
        font-size:8px;
        letter-spacing:.5px;
        line-height:1.1;
        margin-top:2px;
    }

    /* Hamburger */
    #menuBtn{
        width:36px;
        height:36px;
    }

    #menuBtn span:nth-child(1),
    #menuBtn span:nth-child(2){
        width:20px;
    }

    #menuBtn span:nth-child(3){
        width:10px;
    }

}

/* Mobile */

@media(max-width:480px){

.mobile-nav{

    width:90%;

    right:-90%;

}

}


.welcome-section{

    background:#231f20;
    padding:30px 0 80px;
    position:relative;

}

.container{

    width:100%;
    max-width:1320px;

    margin:auto;
    
    padding:0 20px;
    
    display:grid;

    grid-template-columns:300px 1fr;

    column-gap:5px;

    align-items:flex-start;

}

/*==================================================
LEFT LOGO
==================================================*/

.left-side{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:20px;

}
.left-side img{
    width:100%;
    max-width:350px;
    display:block;
    object-fit:contain;
    transition:.5s;
}

.left-side img:hover{

    transform:scale(1.03);

}

/*==================================================
RIGHT CONTENT
==================================================*/

.right-side{

    max-width:890px;

}

.right-side h2{

    font-size:18px;

    line-height:1.45;

    font-weight:300;

    letter-spacing:.2px;

    color:#ffffff;

    margin-bottom:25px;

}

.right-side p{

    font-size:16px;

    line-height:1.8;

    font-weight:300;

    color:#e9e9e9;

    margin-bottom:20px;

    letter-spacing:.1px;

}

.right-side p:last-of-type{

    margin-bottom:32px;

}

.tagline{

    font-size:16px;

    font-weight:300;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#ffffff;

}

/*==================================================
DIVIDER
==================================================*/

.divider{

    width:160px;
    height:1px;
    background:rgba(255,255,255,.18);

    margin:70px auto 70px;

}

/*==================================================
BOTTOM CONTENT
==================================================*/

.bottom-content{

    max-width:980px;

    margin:0 auto;

    text-align:center;

    padding:0 40px;

}

.bottom-content h1{

    font-size:22px;

    font-weight:300;
    margin-top:-30px;
    letter-spacing:10px;

    line-height:.4;

    text-transform:uppercase;

    color:#ffffff;

    margin-bottom:25px;

}

.bottom-content p{

    max-width:980px;

    margin:0 auto;

    font-size:14px;

    font-weight:200;

    line-height:2.05;

    color:#ededed;

    letter-spacing:.2px;

}

.bottom-tagline{

    margin-top:10px;

    font-size:16px;

    font-weight:300;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#ffffff;

}

/*==================================================
HOVER EFFECTS
==================================================*/

.tagline,
.bottom-tagline{

    transition:.35s ease;

}

.tagline:hover,
.bottom-tagline:hover{

    letter-spacing:11px;

}

.right-side h2,
.bottom-content h1{

    transition:.4s ease;

}

.right-side h2:hover,
.bottom-content h1:hover{

    transform:translateY(-2px);

}

/*==================================================
FADE ANIMATION BASE
==================================================*/

.left-side,
.right-side,
.bottom-content{

    opacity:0;

    transform:translateY(50px);

    transition:all .9s ease;

}

.left-side.show,
.right-side.show,
.bottom-content.show{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
TABLET
==================================================*/

@media (max-width:1024px){

    .welcome-section{
        padding:90px 0 110px;
        margin-top:-1px;
    }

    .container{

        max-width:900px;

        grid-template-columns:220px 1fr;

        column-gap:60px;

        padding:0 40px;

    }

    .left-side img{

        max-width:280px;
        margin-top:-60px;

    }

    .right-side{

        max-width:100%;

    }

    .right-side h2{

        font-size:32px;

        margin-bottom:28px;

        line-height:1.5;

    }

    .right-side p{

        font-size:17px;

        line-height:1.9;

        margin-bottom:22px;

    }

    .tagline{

        font-size:20px;

        letter-spacing:6px;

    }

    .divider{

        width:130px;

        margin:80px auto 55px;

    }

    .bottom-content{

        max-width:800px;

    }

    .bottom-content h1{

        font-size:42px;

        letter-spacing:8px;

        margin-bottom:30px;

    }

    .bottom-content p{

        font-size:19px;

        line-height:1.8;

    }

    .bottom-tagline{

        margin-top:35px;

        font-size:20px;

        letter-spacing:6px;

    }

}

/*==================================================
MOBILE
==================================================*/

@media (max-width:786px){

    .welcome-section{

        padding:40px 0 80px;

    }

    .container{

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

        gap:20px;

        padding:0 15px;

    }

    .left-side{

        padding-top:0;

    }

    .left-side img{

        max-width:200px;

    }

    .right-side{

        max-width:100%;

    }

    .right-side h2{

        font-size:18px;

        line-height:1.5;

        margin-bottom:28px;

    }

    .right-side p{

        font-size:28px;

        line-height:1.9;

        margin-bottom:18px;

    }

    .tagline{

        font-size:14px;

        letter-spacing:4px;

        line-height:1.7;

    }

    .divider{

        width:120px;

        margin:60px auto 40px;

    }

    .bottom-content{

        padding:0 20px;
        

    }

    .bottom-content h1{

        font-size:12px;

        letter-spacing:3px;

        line-height:1.5;
     
        margin-bottom:15px;
        margin-top:10px;

    }

    .bottom-content p{

        font-size:16px;

        line-height:1.8;

    }

    .bottom-tagline{

        margin-top:30px;

        font-size:16px;

        letter-spacing:4px;

        line-height:1.7;

    }

}

/*==================================================
SMALL MOBILE
==================================================*/

@media (max-width:480px){

    .welcome-section{

        padding:60px 0 70px;

    }

    .container{

        padding:0 20px;

    }

    .left-side img{

        max-width:200px;

    }

    .right-side h2{

        font-size:22px;

    }

    .right-side p{

        font-size:17px;

    }

    .tagline{

        font-size:14px;

        letter-spacing:3px;

    }

    .bottom-content h1{

        font-size:18px;
        letter-spacing:3px;

    }

    .bottom-content p{

        font-size:15px;

    }

    .bottom-tagline{

        font-size:14px;

        letter-spacing:3px;

    }

}

/*==================================================
SMOOTH TRANSITIONS
==================================================*/

img,
h1,
h2,
p,
.tagline,
.bottom-tagline{

    transition:all .35s ease;
}


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

.gallery-wrapper{
    display:flex;
    position:relative;
    align-items:flex-start;
    background:#000;
   

}

.gallery-left{
    width:100%;
}

.gallery-right{
    position:absolute;
    top:0;
    right:0;
    width:550px;
    height:100%;
    pointer-events:none;
    z-index:100;
}


/* ==============================
   IMAGE SECTION
============================== */

.gallery-image-wrap{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.gallery-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* ==============================
   IMAGE LABEL
============================== */

.img-label{

    position:absolute;

    top:25px;

    left:25px;

    color:#fff;

    font-size:24px;

    letter-spacing:1px;

    text-transform:uppercase;

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

    padding:6px 14px;

    opacity:0;

    transform:translateX(-80px);

    transition:.7s cubic-bezier(.22,1,.36,1);

}

.img-label.active{

    opacity:1;

    transform:translateX(0);

}


/* ==============================
   INFO CARD
============================== */

.info-card{

    position:sticky;

    top:170px;

    margin-left:auto;

    width:520px;

    height:400px;

    padding:35px 40px;

    background:rgba(20,20,20,.82);


    pointer-events:auto;

}


/* ==============================
   GRID
============================== */

.stats-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

     
    margin-top:-40px;
}

.stats-col{

    display:flex;

    flex-direction:column;

}

.stat-block{

    padding:18px 0;

}

.stat-text{

    color:#fff;

    font-size:14px;


    font-weight:300;

}


/* ==========================================
   MOBILE / TABLET GALLERY
========================================== */

.mobile-gallery{
    display:none;
    width:100%;
    background:#221d1f;
}

.mySwiper,
.swiper{
    width:100%;
    overflow:hidden;
}

.swiper-wrapper{
    width:100%;
}

.swiper-slide{
    position:relative;
    width:100%;
}

.swiper-slide img{
    width:100%;
    height:230px;
    object-fit:cover;
    display:block;
}

/* ===============================
   IMAGE LABEL
=============================== */

.mobile-gallery .img-label{
    position:absolute;
    top:15px;
    left:15px;
    background:rgba(0,0,0,.35);
    color:#fff;
    padding:7px 12px;
    font-size:15px;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:0;
    transform:translateX(-50px);
    transition:.5s ease;
}

.mobile-gallery .img-label.active{
    opacity:1;
    transform:translateX(0);
}

/* ===============================
   PAGINATION
=============================== */

.swiper-pagination{
    bottom:8px !important;
}

.swiper-pagination-bullet{
    width:10px !important;
    height:10px !important;
    background:#b8b8b8 !important;
    opacity:1 !important;
    margin:0 5px !important;
}

.swiper-pagination-bullet-active{
    background:#fff !important;
    transform:scale(1.2);
}

/* Active Label */

.mobile-gallery .img-label{

    opacity:0;

    transform:translateX(-50px);

    transition:.6s ease;

}

.mobile-gallery .img-label.active{

    opacity:1;

    transform:translateX(0);

}


/* Pagination */

.swiper-pagination{

    bottom:15px !important;

}

.swiper-pagination-bullet{

    width:10px;

    height:10px;

    background:#d9d9d9 !important;

    opacity:1;

    transition:.3s;

}

.swiper-pagination-bullet-active{

    background:#ffffff !important;

    transform:scale(1.25);

}
/* ==========================================
   MOBILE INFO CARD
========================================== */

.mobile-info-card{

    width:100%;
    background:#221d1f;
    padding:18px 18px 30px;

}

.mobile-info-card .stat-item{

    position:relative;
    text-align:center;
    padding:10px 0;

}

.mobile-info-card .stat-item p{

    margin:0;
    color:#fff;
    font-size:15px;
    font-weight:300;
    line-height:1.55;
    letter-spacing:.2px;

}

/* Divider */

.mobile-info-card .stat-item::after{

    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:70px;
    height:1px;
    background:rgba(255,255,255,.15);

}

.mobile-info-card .stat-item:last-child::after{

    display:none;

}

/* ==========================================
   TABLET
========================================== */

@media (min-width:768px) and (max-width:1024px){

.desktop-gallery{
    display:none;
}

.mobile-gallery{
    display:block;
}

.swiper-slide img{
    height:420px;
}

.mobile-gallery .img-label{
    font-size:24px;
    top:20px;
    left:20px;
}

.mobile-info-card{
    padding:25px 35px 40px;
}

.mobile-info-card .stat-item{
    padding:12px 0;
}

.mobile-info-card .stat-item p{
    font-size:18px;
    line-height:1.6;
}

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:786px){

.desktop-gallery{
    display:none;
}

.mobile-gallery{
    display:block;
}

.swiper-slide img{
    height:220px;
}

.mobile-gallery .img-label{
    font-size:14px;
    top:12px;
    left:12px;
    padding:6px 10px;
}

.mobile-info-card{
    padding:18px 15px 30px;
}

.mobile-info-card .stat-item{
    padding:8px 0;
}

.mobile-info-card .stat-item p{
    font-size:14px;
    line-height:1.55;
}

}




/*=========================================
    AWARD SECTION
=========================================*/

.award-section{
    background:#221d1f;
    padding:90px 0 100px;
    text-align:center;
    overflow:hidden;
}

.section-line{
    width:110px;
    height:1px;
    background:rgba(255,255,255,.25);
    margin:0 auto 40px;
}

.section-title{
    color:#fff;
    font-size:32px;
    font-weight:10;
    letter-spacing:4px;
    text-transform:uppercase;
    line-height:1.3;
    margin:0 0 50px;
       opacity:0;
    transform:translateY(-80px);
  
}

.section-title.show{
    animation:titleReveal 1.2s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes titleReveal{

    from{
        opacity:0;
        transform:translateY(-80px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


.award-card{

    width:520px;


    margin:auto;

    padding:45px;

    border:1px solid rgba(255,255,255,.12);

    background:#231e20;

    transition:.4s;

}

.award-card:hover{

    transform:translateY(-6px);

}

.award-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.award-image img{

    width:110px;

    display:block;

}

.award-text{
    
    margin-top:15px;

    color:#fff;

    font-size:16px;

    font-weight:300;

    line-height:1.6;

}


/*=========================================
    STORY SECTION
=========================================*/

.story-section{

    background:#221d1f;

    padding:0 0;

    text-align:center;

}

.video-wrapper{

    position:relative;

    width:90%;

    max-width:1400px;

    margin:auto;

    overflow:hidden;

}

.video-wrapper video{

    width:100%;

    display:block;

}


/*=========================================
    PLAY BUTTON
=========================================*/

.play-btn{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:95px;

    height:95px;

    border-radius:50%;

    border:none;

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

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.35s;

}

.play-btn:hover{

    transform:translate(-50%,-50%) scale(1.08);

}

.play-btn svg{

    width:34px;

    height:34px;

}


/*=========================================
    VIDEO CONTROLS
=========================================*/

.video-controls{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    display:flex;

    align-items:center;

    gap:20px;

    padding:18px 25px;

    background:linear-gradient(to top,rgba(0,0,0,.85),transparent);

}

.video-controls button{

    background:none;

    border:none;

    color:#fff;

    cursor:pointer;

    font-size:22px;

}

.video-controls span{

    color:#fff;

    font-size:14px;

    min-width:55px;

}

#progressBar{

    flex:1;

    appearance:none;

    height:3px;

    background:rgba(255,255,255,.35);

    cursor:pointer;

}

#progressBar::-webkit-slider-thumb{

    appearance:none;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#fff;

}



/*=========================================
    TABLET
=========================================*/

@media(max-width:1024px){

.award-section,
.story-section{

padding:70px 20px;
margin-top:-60px;

}

.award-section .section-title{

font-size:18px;

letter-spacing:4px;

margin-bottom:40px;
 
margin-top:-3px;


}




.award-card{

width:85%;

padding:35px;
margin-bottom:-10px

}

.award-image img{

width:140px;

}

.award-text{

font-size:18px;

}

.play-btn{

width:75px;

height:75px;

}

}


/*=========================================
    MOBILE
=========================================*/

@media(max-width:786px){

.award-section,
.story-section{

padding:55px 15px;

}

.section-line{

width:90px;

margin-bottom:25px;

}

.story-section .section-title{

font-size:18px;

letter-spacing:3px;
margin-top:-3px;
margin-bottom:10px;

}

.award-card{

width:100%;

padding:25px 18px;

}

.award-image img{

width:110px;

}

.award-text{

font-size:16px;

line-height:1.3;

margin-top:22px;

}

.video-wrapper{

width:100%;

}

.play-btn{

width:60px;

height:60px;

}

.play-btn svg{

width:24px;

height:24px;

}

.video-controls{

padding:10px;

gap:10px;

}

.video-controls button{

font-size:18px;

}

.video-controls span{

font-size:11px;

min-width:42px;

}

}


/*=============================
    LOCATION SECTION
==============================*/

.location-section{

    background:#221d1f;
    padding:90px 0 100px;
    text-align:center;
    overflow:hidden;

}


/* Map */

.location-map{

    width:100%;
    max-width:1200px;
    margin:auto;

}

.location-map img{

    width:80%;
    display:absolute;
    object-fit:contain;
    cursor:pointer;

}

@media(max-width:1024px){

.location-section{

    padding:70px 25px;

}

.location-section .section-title{

    font-size:24px;
    letter-spacing:5px;
    margin-bottom:45px;

}

.location-map{

    width:100%;

}

}

@media(max-width:786px){

.location-section{

    padding:55px 15px;

}

.location-section .section-line{

    width:70px;
    margin-bottom:25px;

}

.location-section .section-title{

    font-size:18px;
    letter-spacing:2px;
    line-height:1.5;
    margin-bottom:30px;
    margin-top:-3px;

}

.location-map{

    width:100%;

}

.location-map img{

    width:100%;
    border-radius:4px;

}

}


/*=========================================
            PLAY SECTION
=========================================*/

.play-section{
    background:#221d1f;
    padding:90px 0;
    margin-top:-50px;
}

.play-section .section-line{
    width:90px;
    height:1px;
    background:rgba(255,255,255,.3);
    margin:0 auto 35px;
}

.play-section .section-title{
    color:#fff;
    font-size:32px;
    font-weight:300;
    letter-spacing:6px;
    text-align:center;
    margin-bottom:70px;
}

/*=========================================
CARD
=========================================*/

.play-card{
    position:relative;
    width:100%;
    margin-bottom:2px;
    overflow:hidden;
}

.play-card img{
    width:100%;
    height:640px;
    display:block;
    object-fit:cover;
    transition:1s;
}


/*=========================================
OVERLAY
=========================================*/

.play-overlay{
    position:absolute;
    left:50%;
    bottom: 10px;
    transform:translateX(-50%);
    width:650px;
    background:rgba(48, 40, 40, 0.45);
   
    padding:30px 35px;
    text-align:center;
}

.play-title{
    color:#fff;
    font-size:26px;
    font-weight:300;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.play-desc{
    color:#fff;
    font-size:18px;
  
}

/*=========================================
ANIMATION
=========================================*/

.play-title{
    opacity:0;
    transform:translateX(-120px);
    transition:1s;
}

.play-desc{
    opacity:0;
    transform:translateX(120px);
    transition:1s;
}

.play-card.show .play-title{
    opacity:1;
    transform:translateX(0);
}

.play-card.show .play-desc{
    opacity:1;
    transform:translateX(0);
    transition-delay:.25s;
}

/*=========================================
TABLET
=========================================*/

@media(max-width:1024px){

.play-section{
    padding:70px 0;
}

.play-section .section-title{
    font-size:22px;
}

.play-card img{
    height:500px;
}

.play-overlay{
    width:90%;
    bottom:25px;
    padding:22px;
}

.play-title{
    font-size:24px;
}

.play-desc{
    font-size:15px;
}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:786px){

.play-section{
    padding:50px 15px;
}

.play-section .section-title{
    font-size:18px;
    letter-spacing:2px;
    margin-top:-3px;
    margin-bottom:20px;
}


.play-card{
    margin-bottom:20px;
     width:100%;
}


.play-card img{
    height:180px;
    width:350px;
   
}

/* REMOVE OVERLAY */

.play-overlay{

    position:static;

    width:100%;

    transform:none;

    background:none;

    backdrop-filter:none;

    padding:25px 15px 0;

    text-align:center;

}

.play-title{

    color:#fff;

    font-size:15px;

    margin-bottom:2px;

}

.play-desc{

    color:#ddd;

    font-size:14px;


}

.play-card:hover img{

    transform:none;

}

}

/*==================================================
                AMENITIES SECTION
                  PART 1
==================================================*/

.amn-section{
    width:100%;
    background:#221d1f;
    padding:10px 10px;
    overflow:hidden;
    position:relative;
    margin-top:-60px;
}

/*=========================================
SECTION TITLE
=========================================*/

.section-line{
    width:110px;
    height:1px;
    background:#6d6767;
    margin:0 auto 28px;
}

.section-title{
    text-align:center;
    color:#fff;
    font-size:32px;
    font-weight:300;
    letter-spacing:8px;
    margin-top:60px;
    margin-bottom:10px;
    text-transform:uppercase;
}

/*=========================================
MAIN LAYOUT
=========================================*/

.amn-wrapper{

    width:100%;


    margin:auto;

    display:grid;

    grid-template-columns:minmax(0,1fr) 310px;

    gap:5px;

    align-items:stretch;

}

/*=========================================
LEFT IMAGE
=========================================*/

.amn-left{

    position:relative;

    overflow:hidden;

    background:#111;

}

.amn-main-image{

    width:100%;

    height:760px;

    object-fit:cover;

    display:block;

    transition:.45s ease;

}

.amn-main-image.fade{

    opacity:.25;

}

/*=========================================
DOTS
=========================================*/

.amn-dots{

    position:absolute;

    left:50%;

    bottom:22px;

    transform:translateX(-50%);

    display:flex;

    gap:10px;

    z-index:30;

   

}

.amn-dots span{

    width:11px;

    height:11px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    cursor:pointer;

     border: 1px solid #fff;

    transition:.35s;

}

.amn-dots span:hover{

    background:#fff;

}

.amn-dots span.active{

    background:#fff;

    transform:scale(1.25);

}

/*=========================================
RIGHT PANEL
=========================================*/

.amn-right{

    position:relative;

    width:310px;

    height:760px;

    overflow:hidden;

    background:#1f1b1c;

}

/*=========================================
SCROLL BUTTONS
=========================================*/

.amn-scroll-btn{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:rgba(40,40,40,.82);

    color:#fff;

    cursor:pointer;

    z-index:50;

    transition:.35s;

}

.amn-scroll-up{

    top:10px;

}

.amn-scroll-down{

    bottom:10px;

}

.amn-scroll-btn:hover{

    background:#fff;

    color:#000;

}

/*=========================================
THUMB CONTAINER
=========================================*/

.amn-thumb-container{

    position:absolute;

    top:0;

    left:0;

    right:0;

    bottom:0;

    overflow:hidden;

    padding:0;

}

/*=========================================
THUMB LIST
=========================================*/

.amn-thumb-list{

    height:100%;

    overflow-y:auto;

    overflow-x:hidden;

    display:flex;

    flex-direction:column;

    gap:3px;

    scroll-behavior:smooth;

    -ms-overflow-style:none;

    scrollbar-width:none;

}

.amn-thumb-list::-webkit-scrollbar{

    display:none;

}


/*=========================================
THUMB ITEM
=========================================*/

.amn-thumb{

    position:relative;
    width:100%;
    height:180px;
    overflow:hidden;
    cursor:pointer;
    flex-shrink:0;
    background:#000;
    border:none;
    padding:0;
}

/*=========================================
IMAGE
=========================================*/

.amn-thumb img{

    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:.45s ease;

}

/*=========================================
BLACK OVERLAY
=========================================*/

.amn-thumb::before{

    content:"";

    position:absolute;

    inset:0;


    transition:.35s ease;

    z-index:1;

}

/*=========================================
ACTIVE ITEM
=========================================*/

.amn-thumb.active::before{

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

}

/*=========================================
HOVER
=========================================*/

.amn-thumb:hover::before{

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

}

.amn-thumb:hover img{

    transform:scale(1.05);

}

/*=========================================
TEXT
=========================================*/
.amn-thumb-title{

    position:absolute;

    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    display:inline-block;

    width:auto;
    max-width:90%;

    padding:8px 18px;

    color:#fff;

    font-size:16px;
    font-weight:600;

    letter-spacing:1px;
    line-height:1.4;

    text-transform:uppercase;

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

    z-index:5;

    pointer-events:none;

    transition:.3s;

    white-space:nowrap;   /* single line */
}

/*=========================================
ACTIVE TEXT
=========================================*/

.amn-thumb.active .amn-thumb-title{

    color:#fff;

}

/*=========================================
IMAGE BRIGHTNESS
=========================================*/

.amn-thumb img{

    filter:brightness(.92);

}

.amn-thumb.active img{

    filter:brightness(1);

}

/*=========================================
SMOOTH EFFECT
=========================================*/

.amn-thumb,
.amn-thumb img,
.amn-thumb-title,
.amn-thumb::before{

    transition:all .35s ease;

}

/*=========================================
TOP/BOTTOM FADE
=========================================*/

.amn-right::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:70px;


    z-index:15;

    pointer-events:none;

}

.amn-right::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:70px;


    z-index:15;

    pointer-events:none;

}

/*=========================================
ARROWS
=========================================*/

.amn-scroll-up{

    top:14px;

    z-index:30;

}

.amn-scroll-down{

    bottom:14px;

    z-index:30;

}

.amn-scroll-btn{

    width:38px;

    height:38px;

    border-radius:50%;

    background:rgba(35,35,35,.85);

    color:#fff;

    border:none;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.amn-scroll-btn:hover{

    background:#fff;

    color:#000;

    transform:translateX(-50%) scale(1.08);

}

/*==================================================
TABLET & MOBILE
==================================================*/

@media (max-width:1024px){

.amn-section .section-title{
    font-size: 18px;
 
}

.amn-wrapper{
    display:block;
}

.amn-left{
    width:100%;
}

.amn-main-image{
    width:100%;
    height:420px;
    object-fit:cover;
    
}

.amn-dots{
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    padding:8px 14px;
    border-radius:20px;
    background:rgba(0,0,0,.35);
    gap:6px;
}

.amn-dots span{
    width:8px;
    height:8px;
    background:rgba(255,255,255,.45);
}

.amn-dots span.active{
    background:#fff;
}

.amn-right{
    position:relative;
    width:100%;
    height:90px;
    margin-top:8px;
    background:none;
}

.amn-thumb-container{
    width:100%;
    height:90px;
    overflow:hidden;
}

.amn-thumb-list{

    display:flex;
    flex-direction:row;

    gap:4px;

    height:100%;

    overflow-x:auto;
    overflow-y:hidden;

    padding:0 42px;
    scroll-padding:0 42px;

    scroll-behavior:smooth;

    scrollbar-width:none;
    -ms-overflow-style:none;
}

.amn-thumb-list::-webkit-scrollbar{
    display:none;
}

.amn-thumb{

    position:relative;

    flex:0 0 120px;

    width:120px;
    height:90px;

    overflow:hidden;

    border:none;

    border-radius:2px;

    padding:0;

    cursor:pointer;
}

.amn-thumb img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.35s;
    
}

.amn-thumb::before{
    display:none !important;
}


.amn-thumb.active{

    outline:2px solid #fff;
}

.amn-thumb-title{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:85%;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;
    text-overflow:ellipsis;

    white-space:normal;

    color:#fff;

    font-size:10px;
    font-weight:600;

    line-height:1.2;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:.4px;

    padding:2px 5px;

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

  

    z-index:2;

    pointer-events:none;
}

/* Arrow Buttons */

.amn-scroll-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:36px;
    height:36px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    z-index:99;

    transition:.3s;
}

.amn-scroll-btn:hover{

    background:#fff;
    color:#000;
}

.amn-scroll-up{

    left:8px;

    transform:translateY(-50%) rotate(-90deg);
}

.amn-scroll-down{

    right:8px;

    left:auto;

    transform:translateY(-50%) rotate(-90deg);
}

}


/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){

.amn-main-image{
    height:250px;
}

.amn-right{
    height:72px;
}

.amn-thumb-container{
    height:72px;
}

.amn-thumb{

    flex:0 0 92px;

    width:92px;
    height:72px;
}

.amn-thumb-title{

    width:88%;

    font-size:8px;

    line-height:1.15;

    padding:2px 4px;

    -webkit-line-clamp:2;
}

.amn-scroll-btn{

    width:30px;
    height:30px;

    font-size:11px;
}

.section-title{

    font-size:22px;
}

}


/*==================================================
SMALL MOBILE
==================================================*/

@media (max-width:480px){

.amn-main-image{
    height:220px;
}

.amn-right{
    height:68px;
}

.amn-thumb-container{
    height:68px;
}

.amn-thumb{

    flex:0 0 86px;

    width:86px;
    height:68px;
}

.amn-thumb-title{

    font-size:7px;

    line-height:1.1;

    padding:2px 3px;

    width:90%;
}

.amn-scroll-btn{

    width:28px;
    height:28px;

    font-size:10px;
}

}


/*==================================================
        TESTIMONIALS SECTION
==================================================*/

.df-testimonials-section{

    width:100%;

    background:#221d1f;

    padding:70px 60px;

    position:relative;

    overflow:hidden;

}

/*==================================================
        COMMON TITLE
==================================================*/

.df-section-line{

    width:90px;

    height:1px;

    background:#726b6b;

    margin:0 auto 25px;

}

.df-section-title{

    color:#fff;

    text-align:center;

    font-size:32px;

    font-weight:300;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:10px;

}

/*==================================================
        SLIDER WRAPPER
==================================================*/

.df-slider-wrapper{

    position:relative;

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*==================================================
        SLIDER
==================================================*/

.df-slider{

    width:100%;

    overflow:hidden;

}

.df-slider-track{

    display:flex;

    gap:10px;

    transition:.6s ease;

    will-change:transform;

}

/*==================================================
        VIDEO CARD
==================================================*/

.df-video-card{

    position:relative;

    flex:0 0 calc(33.333% - 7px);

    height:250px;

    overflow:hidden;

    cursor:pointer;

    background:#000;

}

/*==================================================
        IMAGE
==================================================*/

.df-video-thumb{

    width:100%;

    height:250px;

    display:block;

    object-fit:cover;

    transition:.45s ease;

}

/*==================================================
        OVERLAY
==================================================*/

.df-video-card::before{

    content:"";

    position:absolute;

    inset:0;

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

    transition:.35s;

    z-index:1;

}

/*==================================================
        HOVER
==================================================*/

.df-video-card:hover::before{

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

}

.df-video-card:hover .df-video-thumb{

    transform:scale(1.06);

}

/*==================================================
        PLAY BUTTON
==================================================*/

.df-play-btn{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:60px;

    height:60px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.95);

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:22px;

    cursor:pointer;

    z-index:20;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

    backdrop-filter:blur(3px);

}

.df-play-btn:hover{

    background:#fff;

    color:#111;

    transform:translate(-50%,-50%) scale(1.08);

}

/*==================================================
        PULSE RING
==================================================*/

.df-play-btn::before{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.45);

    animation:dfPulse 2.2s infinite;

}

@keyframes dfPulse{

    0%{

        transform:scale(.8);

        opacity:1;

    }

    100%{

        transform:scale(1.35);

        opacity:0;

    }

}

/*==================================================
        ARROWS
==================================================*/

.df-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:54px;

    height:54px;

    border-radius:50%;

    border:none;

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

    color:#fff;

    font-size:28px;

    cursor:pointer;

    z-index:50;

    transition:.35s;

}

.df-prev{

    left:-28px;

}

.df-next{

    right:-28px;

}

.df-arrow:hover{

    background:#fff;

    color:#000;

    transform:translateY(-50%) scale(1.08);

}

/*==================================================
        MASTER PLAN SECTION
==================================================*/

.df-master-section{

    width:100%;

    background:#221d1f;

    padding:80px 60px 100px;

    position:relative;

}

.df-master-wrapper{

    width:100%;

    overflow:hidden;

    border-radius:8px;

    position:relative;

}

.df-master-image{

    width:100%;

    display:block;

    object-fit:cover;

    transition:.6s ease;

}

.df-master-wrapper:hover .df-master-image{

    transform:scale(1.03);

}


/*==================================================
        VIDEO POPUP
==================================================*/

.df-video-popup{

    position:fixed;

    inset:0;

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

    display:flex;

    align-items:center;

    justify-content:center;

    padding:50px;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

    box-sizing:border-box;

    backdrop-filter:blur(6px);

}

.df-video-popup.active{

    opacity:1;

    visibility:visible;

}

/*==================================================
        POPUP INNER
==================================================*/

.df-popup-inner{

    position:relative;

    width:100%;

    max-width:1200px;

    animation:dfZoom .35s ease;

}

@keyframes dfZoom{

    from{

        opacity:0;

        transform:translateY(20px) scale(.94);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/*==================================================
        VIDEO
==================================================*/

.df-popup-video{

    width:100%;

    max-height:85vh;

    display:block;

    object-fit:contain;

    background:#000;

    border-radius:14px;

    box-shadow:0 25px 70px rgba(0,0,0,.6);

}

/*==================================================
        CLOSE BUTTON
==================================================*/

.df-popup-close{

    position:absolute;

    top:-18px;

    right:-18px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#111;

    font-size:24px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s ease;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

    z-index:10;

}

.df-popup-close:hover{

    background:#d5b36a;

    color:#fff;

    transform:rotate(90deg) scale(1.08);

}


/*==================================================
        CARD ANIMATION
==================================================*/

.df-video-card{

    animation:dfFadeUp .7s ease both;

}

.df-video-card:nth-child(2){

    animation-delay:.1s;

}

.df-video-card:nth-child(3){

    animation-delay:.2s;

}

.df-video-card:nth-child(4){

    animation-delay:.3s;

}

.df-video-card:nth-child(5){

    animation-delay:.4s;

}

.df-video-card:nth-child(6){

    animation-delay:.5s;

}

@keyframes dfFadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        IMAGE SHADOW
==================================================*/

.df-video-card{

    box-shadow:

    0 12px 30px rgba(0,0,0,.35);

}

/*==================================================
        ACTIVE CARD
==================================================*/

.df-video-card.active{

    transform:scale(1.02);

}

.df-video-card.active::before{

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

}

/*==================================================
        SMOOTH TRANSITIONS
==================================================*/

.df-video-card,

.df-video-thumb,

.df-play-btn,

.df-arrow,

.df-master-image,

.df-popup-video,

.df-popup-close{

    transition:all .35s ease;

}

/*==================================================
        PREVENT IMAGE DRAG
==================================================*/

.df-video-thumb,

.df-master-image{

    -webkit-user-drag:none;

    user-select:none;

}

/*==================================================
        SELECTION
==================================================*/

.df-testimonials-section *::selection,

.df-master-section *::selection{

    background:#c79d56;

    color:#fff;

}

/*==================================================
        TABLET
==================================================*/

@media (max-width:1024px){

.df-testimonials-section{
    padding:60px 20px;
}

.df-master-section{
    padding:60px 20px 80px;
}

.df-section-title{
    font-size:30px;
    letter-spacing:6px;
    
    margin-bottom:10px;
}

.df-slider{
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.df-slider::-webkit-scrollbar{
    display:none;
}

.df-slider-track{
    gap:12px;
}

.df-video-card{
    flex:0 0 calc(50% - 10px);
    height:230px;
}

.df-video-thumb{
    width:100%;
    height:230px;
    object-fit:cover;
}

.df-play-btn{
    width:70px;
    height:70px;
    font-size:24px;
}

.df-play-btn::before{
    width:90px;
    height:90px;
}

.df-arrow{
    width:46px;
    height:46px;
    font-size:22px;
}

.df-prev{
    left:5px;
}

.df-next{
    right:5px;
}

.df-video-popup{
    padding:30px;
}

.df-popup-inner{
    max-width:900px;
}

.df-popup-video{
    max-height:75vh;
}

.df-popup-close{
    width:42px;
    height:42px;
    top:-14px;
    right:-14px;
    font-size:20px;
}

}

/*==================================================
        MOBILE
==================================================*/

@media (max-width:786px){

.df-testimonials-section{
    padding:50px 15px;
}

.df-master-section{
    padding:50px 15px 70px;
}

.df-section-line{
    width:90px;
}

.df-section-title{
    font-size:18px;
    letter-spacing:4px;
    margin-bottom:10px;
}

.df-slider-track{
    gap:10px;
}

.df-video-card{
    flex:0 0 100%;
    height:230px;
}

.df-video-thumb{
    width:100%;
    height:230px;
    object-fit:cover;
}

.df-play-btn{
    width:60px;
    height:60px;
    font-size:20px;
}

.df-play-btn::before{
    width:80px;
    height:80px;
}

.df-arrow{
    width:40px;
    height:40px;
    font-size:18px;
}

.df-prev{
    left:0;
}

.df-next{
    right:0;
}

.df-video-popup{
    padding:15px;
}

.df-popup-inner{
    width:100%;
}

.df-popup-video{
    width:100%;
    max-height:60vh;
    border-radius:10px;
}

.df-popup-close{
    width:38px;
    height:38px;
    top:-10px;
    right:-10px;
    font-size:18px;
}

}

/*==================================================
        SMALL MOBILE
==================================================*/

@media (max-width:480px){

.df-testimonials-section{
    padding:40px 12px;
}

.df-master-section{
    padding:40px 12px 60px;
}

.df-section-title{
    font-size:18px;
    letter-spacing:3px;
}

.df-video-card{
    flex:0 0 100%;
    height:230px;
}

.df-video-thumb{
    width:100%;
    height:230px;
    object-fit:cover;
}

.df-play-btn{
    width:50px;
    height:50px;
    font-size:18px;
}

.df-play-btn::before{
    width:68px;
    height:68px;
}

.df-arrow{
    width:34px;
    height:34px;
    font-size:16px;
}

.df-master-wrapper{
    border-radius:4px;
}

}


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

.df-footer{

    width:100%;

    background: #252d20;


    color:#fff;
 font-family: "Jost", sans-serif;
   

}

/*==================================================
        TOP BAR
==================================================*/

.df-footer-top{

    padding:18px 40px;

    border-bottom:1px solid rgba(255,255,255,.08);



}

.df-footer-toggle{

    display:flex;

    align-items:center;

    gap:6px;

    background:none;

    border:none;

    color:#fff;

    font-size:14px;

    font-weight:500;

    letter-spacing:1px;

    cursor:pointer;

    transition:.35s;

}

.df-footer-toggle:hover{

    color: #fffffff3;

}

.df-footer-toggle i{

    font-size:14px;

    transition:.35s;
    

}

.df-footer-toggle.active i{

    transform:rotate(180deg);

}

/*==================================================
        DROPDOWN
==================================================*/

.df-footer-dropdown{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:max-height .5s ease,opacity .4s ease;

}

.df-footer-dropdown.active{

    max-height:900px;

    opacity:1;

}

/*==================================================
        GRID
==================================================*/

.df-footer-grid{

    display:grid;

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

    gap:60px;

    padding:40px;

}

/*==================================================
        COLUMN
==================================================*/

.df-footer-column{

    display:flex;

    flex-direction:column;

}

.df-footer-heading{

    font-size:14px;

    font-weight:600;

    margin-bottom:22px;

    color:#fff;

    letter-spacing:1px;

}

/*==================================================
        LINKS
==================================================*/

.df-footer-links{

    list-style:none;

    padding:0;

    margin:0;

}

.df-footer-links li{

    margin-bottom:2px;
    


}

.df-footer-links a{

    color:#fff;

    text-decoration:none;


    font-size:13px;

    transition:.3s;

    display:inline-block;

}

.df-footer-links a:hover{

    color: #fffffff3;

    transform:translateX(6px);

}

/*==================================================
        BOTTOM
==================================================*/

.df-footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 40px;

}

.df-footer-copy{

    font-size:15px;

    color:#fff;

    letter-spacing:.4px;

}

/*==================================================
        SOCIAL
==================================================*/

.df-footer-social{

    display:flex;

    align-items:center;

    gap:16px;

}

.df-social-icon{

    color:#fff;

    text-decoration:none;

    font-size:18px;

    transition:.35s;

}

.df-social-icon:hover{

    color: #fffffff3;

    transform:translateY(-4px);

}

/*==================================================
        TABLET
==================================================*/

@media(max-width:1024px){

.df-footer{
    
    padding-bottom:60px;
}

.df-footer-top{

    padding:20px;

}

.df-footer-grid{

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

    gap:40px;

    padding:30px 20px;

}

.df-footer-heading{

    font-size:16px;

}

.df-footer-links a{

    font-size:1p2x;

}

.df-footer-bottom{

    padding:25px 20px;

}

.df-footer-social{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    gap:20px;

}
.df-social-icon{

    font-size:24px;

}

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:786px){

.df-footer-top{

    padding:18px 15px;

}

.df-footer-toggle{

    font-size:17px;

}

.df-footer-grid{

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

    gap:35px 20px;

    padding:25px 15px;

}

.df-footer-heading{

    font-size:16px;

    margin-bottom:15px;

}

.df-footer-links li{

    margin-bottom:3px;

}

.df-footer-links a{

    font-size:14px;

    line-height:1.5;

}

.df-footer-bottom{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

    padding:22px 15px;

}

.df-footer-copy{

    font-size:14px;

}

.df-footer-social{

    gap:20px;

}

.df-social-icon{

    font-size:24px;

}

}

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

.nm-amenities{

    width:100%;
    background:#221d1f;
    padding:10px 0 110px;
    overflow:hidden;
    position:relative;

}

.nm-amenities-wrapper{

    width:85%;
    max-width:1220px;
    margin:0 auto;
    position:relative;

}


/*==================================================
                TAB AREA
==================================================*/

.nm-amenities-tabs{

    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:10px;
    position:relative;
    z-index:5;
    margin-bottom:-1px;

}


/*==================================================
                TAB BUTTON
==================================================*/

.nm-tab-btn{

    flex:1;
    max-width:290px;
    height:52px;

    border:none;
    outline:none;

    background:#efefef;

    color:#181818;

    font-family:"Jost",sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:1.2px;
    text-transform:uppercase;

    cursor:pointer;

    transition:.35s ease;

    position:relative;

}


/*==================================================
            TAB HOVER
==================================================*/

.nm-tab-btn:hover{

    background: #f7f7f7;
    color: #111;

}


/*==================================================
            ACTIVE TAB
==================================================*/

.nm-tab-btn.active{

    background: #101010;
    color: #fff;

}


/*==================================================
            ACTIVE WHITE LINE
==================================================*/

.nm-tab-btn::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:15px;

    transform:translateX(-50%);

    width:0;

    height:2px;

    background:#fff;

    transition:.35s;

}

.nm-tab-btn.active::after{

    width: 105px;

}


/*==================================================
            TAB FOCUS
==================================================*/

.nm-tab-btn:focus{

    outline:none;

}


/*==================================================
            TAB ACTIVE ANIMATION
==================================================*/

.nm-tab-btn.active{

    animation:nmTab .35s ease;

}

@keyframes nmTab{

    from{

        transform:translateY(8px);

    }

    to{

        transform:translateY(0);

    }

}

/*==================================================
            CONTENT BOX
==================================================*/

.nm-tab-content{

    display:none;

    background : #111111;

    padding:20px 90px 90px;

    color: #ffffff;

    position:relative;

    overflow:hidden;

    animation:nmContentFade .55s ease;

}

.nm-tab-content.active{

    display:block;

}

/*==================================================
            CONTENT FADE
==================================================*/

@keyframes nmContentFade{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*==================================================
            TITLE
==================================================*/

.nm-title{

    margin:0 0 40px;

    font-family:"Jost",sans-serif;

    font-size:22px;

    font-weight:300;

    letter-spacing:6px;

    text-transform:uppercase;

    color:#ffffff;

    opacity:0;

    transform:translateY(-45px);

}

/*==================================================
        TITLE ANIMATION
==================================================*/

.nm-tab-content.active .nm-title{

    animation:nmTitleDrop .75s ease forwards;

}

@keyframes nmTitleDrop{

    from{

        opacity:0;

        transform:translateY(-45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            GRID
==================================================*/

.nm-list-grid{

    display:grid;

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

    column-gap:110px;

    row-gap:50px;

    align-items:flex-start;

}

/*==================================================
            LIST
==================================================*/

.nm-list{

    list-style:none !important;

    margin:0;

    padding:0;

}

.nm-list ul{

    list-style:none !important;

    margin:0;

    padding:0;

}

/*==================================================
            REMOVE BULLETS
==================================================*/

.nm-list li{

    list-style:none !important;

}

.nm-list li::marker{

    content:"";

}

.nm-list li::before{

    display:none !important;

    content:none !important;

}

/*==================================================
            LIST ITEMS
==================================================*/

.nm-list li{

    color:#f5f5f5;

    font-family:"Jost",sans-serif;

    font-size:14px;

    font-weight:300;

    line-height:1.9;

    letter-spacing:.4px;

    margin-bottom:10px;

    transition:.35s ease;

}

/*==================================================
            LIST HOVER
==================================================*/

.nm-list li{

    cursor:default;
    position:relative;

}

.nm-list li:hover{

    color:#ffffff;
    transform:translateX(6px);

}

/*==================================================
            STAGGER ANIMATION
==================================================*/

.nm-tab-content.active .nm-list li{

    opacity:0;
    transform:translateY(20px);
    animation:nmListFade .55s ease forwards;

}

.nm-tab-content.active .nm-list li:nth-child(1){animation-delay:.03s;}
.nm-tab-content.active .nm-list li:nth-child(2){animation-delay:.06s;}
.nm-tab-content.active .nm-list li:nth-child(3){animation-delay:.09s;}
.nm-tab-content.active .nm-list li:nth-child(4){animation-delay:.12s;}
.nm-tab-content.active .nm-list li:nth-child(5){animation-delay:.15s;}
.nm-tab-content.active .nm-list li:nth-child(6){animation-delay:.18s;}
.nm-tab-content.active .nm-list li:nth-child(7){animation-delay:.21s;}
.nm-tab-content.active .nm-list li:nth-child(8){animation-delay:.24s;}
.nm-tab-content.active .nm-list li:nth-child(9){animation-delay:.27s;}
.nm-tab-content.active .nm-list li:nth-child(10){animation-delay:.30s;}
.nm-tab-content.active .nm-list li:nth-child(11){animation-delay:.33s;}
.nm-tab-content.active .nm-list li:nth-child(12){animation-delay:.36s;}
.nm-tab-content.active .nm-list li:nth-child(13){animation-delay:.39s;}
.nm-tab-content.active .nm-list li:nth-child(14){animation-delay:.42s;}
.nm-tab-content.active .nm-list li:nth-child(15){animation-delay:.45s;}
.nm-tab-content.active .nm-list li:nth-child(16){animation-delay:.48s;}
.nm-tab-content.active .nm-list li:nth-child(17){animation-delay:.51s;}
.nm-tab-content.active .nm-list li:nth-child(18){animation-delay:.54s;}
.nm-tab-content.active .nm-list li:nth-child(19){animation-delay:.57s;}
.nm-tab-content.active .nm-list li:nth-child(20){animation-delay:.60s;}
.nm-tab-content.active .nm-list li:nth-child(21){animation-delay:.63s;}
.nm-tab-content.active .nm-list li:nth-child(22){animation-delay:.66s;}
.nm-tab-content.active .nm-list li:nth-child(23){animation-delay:.69s;}
.nm-tab-content.active .nm-list li:nth-child(24){animation-delay:.72s;}
.nm-tab-content.active .nm-list li:nth-child(25){animation-delay:.75s;}
.nm-tab-content.active .nm-list li:nth-child(26){animation-delay:.78s;}
.nm-tab-content.active .nm-list li:nth-child(27){animation-delay:.81s;}
.nm-tab-content.active .nm-list li:nth-child(28){animation-delay:.84s;}
.nm-tab-content.active .nm-list li:nth-child(29){animation-delay:.87s;}
.nm-tab-content.active .nm-list li:nth-child(30){animation-delay:.90s;}
.nm-tab-content.active .nm-list li:nth-child(31){animation-delay:.93s;}
.nm-tab-content.active .nm-list li:nth-child(32){animation-delay:.96s;}
.nm-tab-content.active .nm-list li:nth-child(33){animation-delay:.99s;}
.nm-tab-content.active .nm-list li:nth-child(34){animation-delay:1.02s;}
.nm-tab-content.active .nm-list li:nth-child(35){animation-delay:1.05s;}
.nm-tab-content.active .nm-list li:nth-child(36){animation-delay:1.08s;}
.nm-tab-content.active .nm-list li:nth-child(37){animation-delay:1.11s;}
.nm-tab-content.active .nm-list li:nth-child(38){animation-delay:1.14s;}
.nm-tab-content.active .nm-list li:nth-child(39){animation-delay:1.17s;}
.nm-tab-content.active .nm-list li:nth-child(40){animation-delay:1.20s;}

/*==================================================
            FADE ANIMATION
==================================================*/

@keyframes nmListFade{

    0%{

        opacity:0;
        transform:translateY(22px);

    }

    100%{

        opacity:1;
        transform:translateY(0);

    }

}

/*==================================================
            CONTENT SMOOTH TRANSITION
==================================================*/

.nm-tab-content{

    transition:opacity .45s ease,
               transform .45s ease;

}

/*==================================================
            BUTTON TRANSITION
==================================================*/

.nm-tab-btn{

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;

}

.nm-tab-btn:hover{

    transform:translateY(-2px);

}

.nm-tab-btn.active:hover{

    transform:none;

}

/*==================================================
            TITLE LETTER SPACING
==================================================*/

.nm-title{

    transition:all .45s ease;

}

/*==================================================
            GRID SMOOTH
==================================================*/

.nm-list-grid{

    transition:.45s ease;

}

/*==================================================
            TABLET
==================================================*/

@media (max-width:1024px){

.nm-amenities{

    padding:20px 0;

}

.nm-amenities-wrapper{

    width:92%;

}

.nm-tab-btn{

    min-width:220px;
    padding:22px 20px;
    font-size:13px;
    letter-spacing:1px;

}

.nm-tab-content{

    padding:60px 50px;

}

.nm-title{

    font-size:34px;
    letter-spacing:4px;
    margin-bottom:50px;

}

.nm-list-grid{

    grid-template-columns:repeat(2,1fr);
    column-gap:60px;
    row-gap:35px;

}

.nm-list li{

    font-size:14px;
    line-height:1.85;
    margin-bottom:14px;

}

}


/*==================================================
            MOBILE
==================================================*/

@media (max-width:786px){

.nm-amenities{

    padding:0;


}

.nm-amenities-wrapper{

    width:90%;

}

.nm-amenities-tabs{

    display:block;

}

.nm-tab-btn{

    width:100%;
    max-width:100%;
    min-width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:22px 22px;

    background:#ffffff;

    border-bottom:1px solid #dddddd;

    font-size:13px;

    text-align:left;

}

.nm-tab-btn:not(:last-child){

    border-right:none;

}

.nm-tab-btn.active{

    background:#111111;
    color:#ffffff;

}

.nm-tab-btn::after{

    display:none;

}

.nm-tab-content{

    padding:35px 22px;

}

.nm-title{

    font-size:18px;

    letter-spacing:2px;

    margin-bottom:20px;

}

.nm-list-grid{

    grid-template-columns:1fr;

    column-gap:0;

    row-gap:0;

}

.nm-list{

    margin-bottom:14px;

}

.nm-list li{

    font-size:13px;

    line-height:1.8;

    margin-bottom:12px;

}

}


/*==========================================
            FLOOR PLANS SECTION
==========================================*/

.fp-section{

    width:100%;
    background:#221d1f;
    padding: 30px 0 80px;
    overflow:hidden;
    position:relative;

}

.fp-container{

    width:80%;
    max-width:1500px;
    margin:auto;

}

/*==========================================
            HEADING
==========================================*/

.fp-heading{

    text-align:center;
    margin-bottom:40px;

}

.fp-line{

    width:250px;
    height:1px;
    background:rgba(255,255,255,.25);
    display:block;
    margin:0 auto 35px;

}

.fp-heading h2{

    color:#fff;
    font-size:32px;
    font-family:"Jost",sans-serif;
    font-weight:300;
    letter-spacing:10px;
    text-transform:uppercase;
    margin:0;
    animation:titleDown .9s ease;

}

@keyframes titleDown{

    from{

        opacity:0;
        transform:translateY(-45px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*==========================================
            SLIDER
==========================================*/

.fp-slider{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    position:relative;

}

/*==========================================
            ARROWS
==========================================*/

.fp-arrow{

    width:70px;
    height:70px;
    border:none;
    background:transparent;
    color:#fff;
    cursor:pointer;
    transition:.35s;
    flex-shrink:0;

}

.fp-arrow i{

    font-size:34px;

}

.fp-arrow:hover{

    transform:scale(1.15);
    color:#d9d3ca;

}

/*==========================================
            SLIDES WRAPPER
==========================================*/

.fp-slides{

    width:100%;
    max-width:980px;
    position:relative;
    overflow:hidden;

}

/*==========================================
            SINGLE SLIDE
==========================================*/

.fp-slide{

    display:none;
    text-align:center;
    animation:fadeSlide .7s ease;

}

.fp-slide.active{

    display:block;

}

@keyframes fadeSlide{

    from{

        opacity:0;
        transform:scale(.95);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

/*==========================================
            IMAGE
==========================================*/

.fp-slide img{

    width:100%;
    max-width:760px;
    margin:auto;
    display:block;
    transition:.5s;
    animation:imageZoom .9s ease;

}

@keyframes imageZoom{

    from{

        opacity:0;
        transform:scale(.92);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

/*==========================================
            TEXT
==========================================*/

.fp-info{

    margin-top:45px;
    color:#fff;
    animation:textUp .9s ease;

}

@keyframes textUp{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


.fp-info p{

    font-family:"Jost",sans-serif;
    font-size:12px;
    font-weight:300;
    line-height:1.9;
    letter-spacing:1px;
    margin:0;

}

.fp-info strong{

    font-weight:400;

}

/*==========================================
            TABLET
==========================================*/

@media(max-width:1024px){

    .fp-section{

        width:100%;
        padding:50px 0;

    }

    .fp-container{

        width:90%;
        max-width:90%;
        margin:auto;

    }

.fp-heading h2{

    font-size:4px;
    letter-spacing:6px;

}

.fp-slider{

    gap:20px;

}

.fp-arrow{

    width:50px;
    height:50px;

}

.fp-arrow i{

    font-size:24px;

}

.fp-slide img{

    max-width:100%;

}



.fp-info p{

    font-size:12px;

}

}

/*==========================================
            MOBILE
==========================================*/

@media(max-width:768px){

.fp-slider{

    display:grid;
    grid-template-columns:50px 1fr 50px;
    align-items:center;
    gap:8px;

}

.fp-heading{

    margin-bottom:30px;

}

.fp-heading h2{

    font-size:18px;
    letter-spacing:5px;

}

.fp-line{

    width:100px;
    margin-bottom:22px;

}

.fp-slide img{

    max-width:100%;

}

.fp-info{

    margin-top:15px;

}



.fp-info p{

    font-size:12px;
    line-height:1.8;
    padding:0 10px;

}

.fp-arrow i{

    font-size:12px;

}

}

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

.gs-section{

    width:100%;
    background:#221d1f;
    padding:90px 0 120px;
    overflow:hidden;
    margin-top:-80px;

}

.gs-container{

    width:90%;
    max-width:1500px;
    margin:auto;

}

/*==================================================
                HEADING
==================================================*/

.gs-heading{

    text-align:center;
    margin-bottom:60px;

}

.gs-line{

    display:block;
    width:110px;
    height:1px;
    background:rgba(255,255,255,.15);
    margin:0 auto 30px;

}

.gs-heading h2{

    color:#fff;
    font-size:44px;
    font-weight:300;
    font-family:"Jost",sans-serif;
    letter-spacing:10px;
    text-transform:uppercase;
    margin:0;

    animation:gsHeading .8s ease;

}

@keyframes gsHeading{

    from{

        opacity:0;
        transform:translateY(-40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*==================================================
                SLIDER
==================================================*/

.gs-slider{

    width:100%;
    position:relative;
    margin:auto;
    overflow:hidden;
    background: #221d1f;
  

}

.gs-slider-wrapper{

    position:relative;
    width:100%;
    height:620px;

}

/*==================================================
                SLIDES
==================================================*/

.gs-slide{

    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:all .8s ease;

}

.gs-slide.active{

    opacity:1;
    visibility:visible;

}

.gs-slide img{

    width:100%;
    height:620px;
    object-fit:cover;
    display:block;
  

    animation:gsZoom 7s linear;

}

@keyframes gsZoom{

    from{

        transform:scale(1.08);

    }

    to{

        transform:scale(1);

    }

}

/*==================================================
                IMAGE OVERLAY
==================================================*/

.gs-slide::after{

    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.40),

        rgba(0,0,0,.08)

    );

    border-radius:18px;

}


/*==================================================
                ARROW BUTTONS
==================================================*/

.gs-arrow{

    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:62px;
    height:62px;
    border:none;
    outline:none;
    border-radius:50%;
    cursor:pointer;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    color:#fff;
    z-index:20;
    transition:.45s ease;

}

.gs-prev{

    left:35px;

}

.gs-next{

    right:35px;

}

.gs-arrow i{

    font-size:20px;
    transition:.35s;

}

.gs-arrow:hover{

    background:#fff;
    color:#222;
    transform:translateY(-50%) scale(1.08);

}

.gs-arrow:hover i{

    transform:scale(1.15);

}

/*==================================================
                DOTS
==================================================*/

.gs-dots{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin-top:35px;

}

.gs-dot{

    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    cursor:pointer;
    transition:.4s;

}

.gs-dot:hover{

    background:#ffffff;

}

.gs-dot.active{

    width:42px;
    border-radius:30px;
    background:#fff;

}

/*==================================================
            SLIDE ANIMATION
==================================================*/

.gs-slide.active{

    animation:gsFade .9s ease;

}

@keyframes gsFade{

    from{

        opacity:0;
        transform:scale(1.03);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

/*==================================================
            ARROW HOVER MOVE
==================================================*/

.gs-slider:hover .gs-prev{

    left:25px;

}

.gs-slider:hover .gs-next{

    right:25px;

}

/*==================================================
            IMAGE SHADOW
==================================================*/

.gs-slide img{

    box-shadow:0 30px 80px rgba(0,0,0,.35);

}

/*==================================================
            HOVER EFFECT
==================================================*/

.gs-slider:hover img{

    filter:brightness(.96);

}

/*==================================================
            SMOOTH TRANSITION
==================================================*/

.gs-slide img{

    transition:transform 1.5s ease,
               filter .4s ease;

}

.gs-slide.active img{

    transform:scale(1);

}

/*==================================================
        SUBTLE GLOW
==================================================*/

.gs-slider{

    box-shadow:0 30px 80px rgba(0,0,0,.18);

}
/*==========================================
        SPECIFICATION SECTION
==========================================*/

.gs-spec-heading{
    margin:30px 0 50px;
    text-align:center;
    background:#221d1f;
}

.gs-spec-heading h2{
    font-size:32px;
}
.gs-spec-grid{
    width:calc(100% - 120px);
    max-width:1450px;
    margin:0 auto;
    padding:0 30px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    column-gap:90px;
    justify-content:center;
    align-items:start;
    margin-left:60px;
}

.gs-column{
    padding:0 30px;
    text-align:center;
}

.gs-item{
    margin-bottom:18px;
    text-align:center;
}

.gs-item:last-child{
    margin-bottom:0;
        list-style-position:inside;
    padding:0;
    margin:0;
    text-align:center;
}

/*==========================================
            TITLE
==========================================*/

.gs-item h3{
    font-family:"Jost",sans-serif;
    font-size:18px;
    font-weight:500;
    color:#ffffff;
    margin:0 0 6px;
    text-align:left;
    letter-spacing:.4px;
}

/*==========================================
            LIST
==========================================*/

.gs-item ul{
    margin:0;
    padding-left:30px;
    list-style:disc;
}

.gs-item ul li{
    color:rgba(255,255,255,.92);
    font-family:"Jost",sans-serif;
    font-size:15px;
    font-weight:200;
    
    margin:0;
    padding:0;
    text-align:left;
    transition:.35s;
}

.gs-item ul li+li{
    margin-top:1px;
}

.gs-item ul li::marker{
    color:#ffffff;
    font-size:14px;
}

.gs-item ul li:hover{
    color:#ffffff;
    transform:translateX(5px);
}




/*==================================================
                TABLET
==================================================*/

@media(max-width:1024px){

.gs-section{

    padding:70px 0 90px;

}

.gs-slider-wrapper,
.gs-slide img{

    height:500px;

}

.gs-heading{

    margin-bottom:45px;

}

.gs-heading h2{

    font-size:34px;
    letter-spacing:6px;

}

.gs-line{

    width:90px;
    margin-bottom:22px;

}

.gs-arrow{

    width:52px;
    height:52px;

}

.gs-arrow i{

    font-size:18px;

}

.gs-prev{

    left:18px;

}

.gs-next{

    right:18px;

}


.gs-spec-heading{
    margin:50px 0;
}

.gs-spec-heading h2{
    font-size:28px;
}

.gs-spec-grid{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0 30px;
    grid-template-columns:repeat(2,1fr);
    column-gap:40px;
}

.gs-column{
    padding:0;
    text-align:left;
}

.gs-item{
    margin-bottom:22px;
    text-align:left;
}

.gs-item h3{
    font-size:18px;
    text-align:left;
    margin-bottom:8px;
}

.gs-item ul{
    padding-left:20px;
}

.gs-item ul li{
    font-size:14px;
    line-height:1.7;
    text-align:left;
}
}

/*==================================================
                MOBILE
==================================================*/

@media(max-width:768px){

.gs-section{

    padding:55px 0 70px;

}

.gs-container{

    width:94%;

}

.gs-heading{

    margin-bottom:35px;

}

.gs-heading h2{

    font-size:24px;
    letter-spacing:5px;

}

.gs-line{

    width:70px;
    margin-bottom:18px;

}

.gs-slider-wrapper,
.gs-slide img{

    height:270px;


}

.gs-arrow{

    width:42px;
    height:42px;

}

.gs-arrow i{

    font-size:14px;

}

.gs-prev{

    left:8px;

}

.gs-next{

    right:8px;

}

.gs-dots{

    gap:10px;
    margin-top:22px;

}

.gs-dot{

    width:10px;
    height:10px;

}

.gs-dot.active{

    width:28px;

}

.gs-spec-heading{
    margin:45px 0 35px;
}

.gs-spec-heading h2{
    font-size:24px;
}

.gs-spec-grid{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0 20px;
    display:grid;
    grid-template-columns:1fr;
    row-gap:25px;
}

.gs-column{
    padding:0;
    text-align:left;
}

.gs-item{
    width:100%;
    margin-bottom:20px;
    text-align:left;
}

.gs-item h3{
    font-size:18px;
    text-align:left;
    margin-bottom:8px;
}

.gs-item ul{
    padding-left:18px;
    margin:0;
}

.gs-item ul li{
    font-size:14px;
    line-height:1.7;
    text-align:left;
    margin:0;
}

}


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

.cv-section{
    width:100%;
    background:#221d1f;
    padding:10px 0 70px;
    position:relative;
    overflow:hidden;
    
}

.cv-container{
    width:94%;
    max-width:1600px;
    margin:auto;
}

.cv-line{
    width:140px;
    height:1px;
    background:rgba(255,255,255,.25);
    margin:0 auto 50px;
}

.cv-line.bottom{
    margin:55px auto;
}

/*==========================================
                WRAPPER
==========================================*/

.cv-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
    min-height:620px;
    overflow:hidden;
}

/*==========================================
                FORM SIDE
==========================================*/
.cv-form-box{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:700px;

    background-image:url("../images/exterior4.webp"); /* Your image */
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.cv-overlay{
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, 0.69);
}

.cv-form-content{
    position:relative;
    z-index:2;
    width:72%;
}

.cv-form-content h2{
    color:#fff;
    text-align:center;
    font-family:"Jost",sans-serif;
    font-size:24px;
    font-weight:300;
    letter-spacing:8px;
    margin:0 0 55px;
}

/*==========================================
                INPUT
==========================================*/

.cv-input{
    position:relative;
    margin-bottom:28px;
}

.cv-input input{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.35);
    color:#fff;
    font-size:15px;
    font-family:"Jost",sans-serif;
    padding:10px 0;
    outline:none;
    transition:.35s;
}

.cv-input label{
    position:absolute;
    left:0;
    top:10px;
    color:rgba(255,255,255,.75);
    font-size:15px;
    font-family:"Jost",sans-serif;
    pointer-events:none;
    transition:.35s;
}

.cv-input input:focus{
    border-color:#ffffff;
}

.cv-input input:focus+label,
.cv-input input:valid+label{
    top:-12px;
    font-size:11px;
    letter-spacing:1px;
    color:#ffffff;
}

/*==========================================
            CHECKBOX
==========================================*/

.cv-check{
    margin:15px 0 25px;
}

.cv-check label{
    display:flex;
    align-items:flex-start;
    gap:10px;
    cursor:pointer;
}

.cv-check input{
    margin-top:4px;
    accent-color:#fff;
}

.cv-check span{
    color:#fff;
    font-size:12px;
    line-height:1.8;
    font-family:"Jost",sans-serif;
}

/*==========================================
            CAPTCHA
==========================================*/

.cv-captcha{
    width:280px;
    max-width:90%;
    height:58px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 15px;
    margin:35px auto 28px;
}

.cv-captcha input{
    width:18px;
    height:18px;
}

.cv-captcha span{
    flex:1;
    margin-left:10px;
    color:#111;
    font-size:17px;
    font-family:"Jost",sans-serif;
}

.cv-captcha img{
    width:42px;
}

/*==========================================
                MAP
==========================================*/

.cv-map{
    position:relative;
    min-height:620px;
    overflow:hidden;
}

.cv-map iframe{
    width:100%;
    height:100%;
    border:0;
    filter:grayscale(100%) brightness(.55) contrast(1.1);
}

/*==========================================
                BUTTON
==========================================*/

.cv-btn{
    display:block;
    margin:25px auto 0;
    width:140px;
    height:48px;
     background:linear-gradient(
        to bottom,
        #8a8888 0%,
        #222222 50%,
        #8a8888 100%
    );
    border:1px solid rgba(122, 120, 120, 0.56);
    color:#fff;
    font-family:"Jost",sans-serif;
    font-size:14px;
    letter-spacing:4px;
    cursor:pointer;
    transition:.4s;
    border-radius:8px;
}



/*==========================================
            RERA TEXT
==========================================*/

.cv-rera{
    text-align:center;
}

.cv-rera p{
    color:#fff;
    font-family:"Jost",sans-serif;
    font-size:14px;
    letter-spacing:2px;
    font-weight:300;
    margin:0 0 28px;
  
}

.cv-rera p:last-child{
    margin-bottom:0;
}

/*==========================================
            INPUT ANIMATION
==========================================*/

.cv-input input:hover{
    border-color:#ffffff;
}

.cv-input input::placeholder{
    color:transparent;
}

/*==========================================
                SCROLL EFFECT
==========================================*/

.cv-form-box,
.cv-map{
    transition:.6s ease;
}

.cv-form-box:hover{
    transform:translateY(-5px);
}

.cv-map:hover{
    transform:translateY(-5px);
}

.cv-form-box:hover .cv-overlay{
    background:rgba(0,0,0,.60);
}

/*==========================================
            TABLET
==========================================*/

@media(max-width:1024px){

.cv-wrapper{
    grid-template-columns:1fr;
}

.cv-map{
    order:1;
    min-height:450px;
}

.cv-form-box{
    order:2;
    min-height:700px;
}

.cv-form-content{
    width:85%;
}

.cv-form-content h2{
    font-size:24px;
    letter-spacing:6px;
}

.cv-rera p{
    font-size:16px;
}

}

/*==========================================
                MOBILE
==========================================*/

@media(max-width:786px){

.cv-section{
    padding:60px 0;
}

.cv-container{
    width:94%;
}

.cv-line{
    width:90px;
    margin-bottom:35px;
}



.cv-map{
    min-height:320px;
}

.cv-form-box{
    min-height:auto;
    padding:50px 0;
}

.cv-form-content{
    width:90%;
}

.cv-form-content h2{
    font-size:18px;
    letter-spacing:5px;
    margin-bottom:35px;
}

.cv-input{
    margin-bottom:24px;
}

.cv-input input{
    font-size:14px;
}

.cv-input label{
    font-size:13px;
}

.cv-check span{
    font-size:13px;
    line-height:1.7;
}

.cv-captcha{
    height:68px;
}

.cv-captcha span{
    font-size:14px;
}

.cv-btn{
    width:160px;
    height:48px;
    font-size:15px;
    letter-spacing:3px;
}

.cv-rera p{
    font-size:13px;
    letter-spacing:1px;
    line-height:1.8;
    margin-bottom:20px;
}

}

/*==========================================
            DISCLAIMER
==========================================*/

.disclaimer-section{
    background: #e0dddd;
    min-height:40px;
    padding:10px 0;
    border-top:1px solid #d6d3d3;
}

.disclaimer-container{
    width:90%;
    max-width:1400px;
    margin:0 auto;
}

.disclaimer-container h3{
    color:#111;
    font-family:"Jost",sans-serif;
    font-size:16px;
    font-weight:600;
    margin:0 0 8px;
}

.disclaimer-container p{
    color:#555;
    font-family:"Jost",sans-serif;
    font-size:12px;
    line-height:1;
    margin:0;
    font-weight:400;
}

.disclaimer-container strong{
    color:#000;
    font-weight:600;
}

@media(max-width:768px){

.disclaimer-section{
    padding:8px 0;
}

.disclaimer-container{
    width:94%;
}

.disclaimer-container h3{
    font-size:15px;
}

.disclaimer-container p{
    font-size:11px;
   
}

}



/*=========================================
POPUP OVERLAY
=========================================*/

.popup-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(6px);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:35px;

    opacity:0;

    visibility:hidden;

    transition:.45s ease;

    z-index:999999;

}

.popup-overlay.active{

    opacity:1;

    visibility:visible;

}


/*=========================================
POPUP CONTAINER
=========================================*/

.enquiry-popup{

    width:700px;

    max-width:100%;

    background:#231f20;

    border:1px solid rgba(255,255,255,.18);


    padding:15px 50px;

    position:relative;

    box-sizing:border-box;


    transform:translateY(60px) scale(.95);

    opacity:0;

    transition:.45s ease;

}

.popup-overlay.active .enquiry-popup{

    transform:translateY(0) scale(1);

    opacity:1;

}


/*=========================================
TITLE
=========================================*/

.popup-title{

    margin:0 0 40px;

    text-align:center;

    color:#fff;

    font-family:"Jost",sans-serif;

    font-size:22px;

    font-weight:300;

    letter-spacing:8px;

    text-transform:uppercase;

    opacity:0;

    transform:translateY(-35px);

}

.popup-overlay.active .popup-title{

    animation:titleDown .7s forwards;

}

@keyframes titleDown{

    from{

        opacity:0;

        transform:translateY(-35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================
CLOSE BUTTON
=========================================*/

.close-popup{

    position:absolute;

    top:18px;

    right:22px;

    width:36px;

    height:36px;

    border:none;

    background:none;

    color:#fff;

    font-size:34px;

    cursor:pointer;

    transition:.35s;

}




/*=========================================
FORM
=========================================*/

.enquiry-form{

    width:100%;

}

.form-row{

    display:grid;

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

    gap:20px;

    margin-bottom:22px;

}

.form-group{

    position:relative;

}

.form-group.full{

    margin-bottom:24px;

}

/*=========================================
INPUTS
=========================================*/

.form-group input,
.form-group select{

    width:100%;

    height:48px;

    background:transparent;

    border:none;

    border-bottom:1px solid rgba(255,255,255,.25);

    outline:none;

    color:#fff;

    font-size:15px;

    font-family:"Jost",sans-serif;

    padding:0;

    transition:.35s;

}

/* Placeholder */

.form-group input::placeholder{

    color:rgba(255,255,255,.65);

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:13px;

}

/* Focus */

.form-group input:focus,
.form-group select:focus{

    border-bottom:1px solid #ffffff;

}

/*=========================================
SELECT BOX
=========================================*/

.form-group.full{

    position:relative;

}

/* Hide browser arrow */

.form-group select{

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    cursor:pointer;

    color:#fff;

    padding-right:35px;

}

/* Default option */

.form-group select option{

    background:#231f20;

    color:#fff;

    font-size:15px;

}

/* Custom Arrow */

.form-group.full::after{

    content:"⌄";

    position:absolute;

    right:5px;

    top:50%;

    transform:translateY(-50%);

    color:#fff;

    font-size:22px;

    pointer-events:none;

}

/* Hover */

.form-group select:hover{

    border-bottom:1px solid #f3a321;

}

/*=========================================
REMOVE INPUT BACKGROUND
=========================================*/

.form-group input:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #231f20 inset;

    -webkit-text-fill-color:#fff;

}

/*=========================================
SMOOTH ANIMATION
=========================================*/

.form-group{

    opacity:0;

    transform:translateY(20px);

}

.popup-overlay.active .form-group{

    animation:fieldFade .5s forwards;

}

.popup-overlay.active .form-group:nth-child(1){

    animation-delay:.15s;

}

.popup-overlay.active .form-group:nth-child(2){

    animation-delay:.25s;

}

.popup-overlay.active .form-group:nth-child(3){

    animation-delay:.35s;

}

.popup-overlay.active .form-group:nth-child(4){

    animation-delay:.45s;

}

@keyframes fieldFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================
CHECKBOX
=========================================*/

.check-box{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:25px 0;

    cursor:pointer;

}

.check-box input{

    width:18px;

    height:18px;

    accent-color:#ffffff;

    cursor:pointer;

    margin-top:3px;

}

.check-box span{

    color:#d9d9d9;

    font-size:13px;

    line-height:1.7;

    letter-spacing:.3px;

    font-family:"Jost",sans-serif;

}

/*=========================================
CAPTCHA
=========================================*/

.captcha-box{

    width:50%;

    height:78px;

    border:1px solid rgba(255,255,255,.28);

    background:transparent;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 18px;

    margin:25px auto;

    box-sizing:border-box;

}
.captcha-left{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

}

.captcha-left input{

    display:none;

}

/* Fake Checkbox */

.fake-box{

    width:24px;

    height:24px;

    border:2px solid #fff;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.fake-box::after{

    content:"✓";

    color:#4CAF50;

    font-size:18px;

    opacity:0;

    transition:.3s;

}

.captcha-left input:checked + .fake-box::after{

    opacity:1;

}

.robot-text{

    color:#fff;

    font-size:15px;

    font-family:Arial,sans-serif;

}

.captcha-right{

    text-align:center;

}

.captcha-right img{

    width:34px;

    display:block;

    margin:auto;

}

.captcha-right small{

    display:block;

    color:#bdbdbd;

    font-size:10px;

    line-height:1.2;

}

/*=========================================
SUBMIT BUTTON
=========================================*/

.submit-btn{

    width:170px;

    height:48px;

    display:block;

    margin:30px auto 0;

    border:none;

    border-radius:6px;

    background:linear-gradient(to bottom,#777,#444,#777);

    color:#fff;

    font-size:16px;

    letter-spacing:3px;

    font-family:"Jost",sans-serif;

    cursor:pointer;

    transition:.35s;

}



/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:786px){

.popup-overlay{

    padding:0;

}

.enquiry-popup{

    width:100%;

    padding:10px 30px;

}

.popup-title{

    font-size:18px;

    letter-spacing:4px;

    margin-bottom:10px;

}

.form-row{

    grid-template-columns:1fr;

    gap:18px;

}

.form-group input,
.form-group select{

    font-size:14px;

}

.check-box span{

    font-size:12px;

}

  .captcha-box{

        width:100%;

        margin:20px auto;

    }

.robot-text{

    font-size:13px;

}

.captcha-right img{

    width:28px;

}

.submit-btn{

    width:150px;

    height:44px;

    font-size:15px;

}

}

/*=========================================
POPUP ANIMATION
=========================================*/

.popup-overlay.active .check-box{

    animation:fadeUp .7s ease .4s both;

}

.popup-overlay.active .captcha-box{

    animation:fadeUp .7s ease .5s both;

}

.popup-overlay.active .submit-btn{

    animation:fadeUp .7s ease .6s both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*=========================================
CALL POPUP OVERLAY
=========================================*/

.call-overlay{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

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


    opacity:0;
    visibility:hidden;

    transition:.45s ease;

    z-index:999999;

    padding:20px;

}

/* Active */

.call-overlay.active{

    opacity:1;

    visibility:visible;

}


/*=========================================
POPUP BOX
=========================================*/

.call-popup{

    width:570px;

    max-width:100%;

    background:#231f20;

    position:relative;

    padding:70px 55px 60px;

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

    transform:translateY(50px) scale(.94);

    opacity:0;

    transition:.5s ease;

}

.call-overlay.active .call-popup{

    transform:translateY(0) scale(1);

    opacity:1;

}


/*=========================================
CLOSE BUTTON
=========================================*/

.call-close{

    position:absolute;

    top:18px;
    right:20px;

    width:40px;
    height:40px;

    border:none;

    background:none;

    color:#666;

    font-size:38px;

    cursor:pointer;

    transition:.35s;

}

.call-close:hover{

    color:#fff;

    transform:rotate(90deg);

}


/*=========================================
CONTENT
=========================================*/

.call-content{

    text-align:center;

}


/*=========================================
SMALL TEXT
=========================================*/

.call-small{

    color:#ffffff;

    font-family:"Jost",sans-serif;

    font-size:18px;

    line-height:1.6;

    font-weight:300;

    margin:0 0 35px;

    opacity:0;

}

.call-overlay.active .call-small{

    animation:fadeDown .8s ease .2s forwards;

}


/*=========================================
CALL NUMBER
=========================================*/

.call-number{

    display:inline-flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

    color:#fff;

    font-family:"Jost",sans-serif;

    font-size:20px;

    letter-spacing:4px;

    font-weight:300;

    text-transform:uppercase;

    opacity:0;

}

.call-number span{

    font-size:20px;

    letter-spacing:5px;

    color:#ffffff;

}

.call-overlay.active .call-number{

    animation:fadeUp .8s ease .45s forwards;

}

/*=========================================
HOVER EFFECTS
=========================================*/

.call-popup::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

}

.call-number{

    transition:.35s;

}

.call-number:hover{

    color:#d7b27a;

    transform:scale(1.03);

}

.call-number:hover span{

    color:#d7b27a;

}


/*=========================================
OPEN ANIMATION
=========================================*/

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================
MOBILE
=========================================*/

@media(max-width:786px){

.call-overlay{

    padding:20px;

}

.call-popup{

    width:100%;

    max-width:360px;

    padding:55px 25px 45px;

}

.call-close{

    top:12px;

    right:12px;

    font-size:34px;

}

.call-small{

    font-size:15px;

    line-height:1.6;

    margin-bottom:28px;

}

.call-number{

    display:flex;

    flex-direction:column;

    gap:10px;

    font-size:18px;

    letter-spacing:3px;

}

.call-number span{

    font-size:22px;

    letter-spacing:2px;

    word-break:break-word;

}

}


/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.call-popup{

    padding:50px 20px 40px;

}

.call-small{

    font-size:14px;

}

.call-number{

    font-size:16px;

    letter-spacing:2px;

}

.call-number span{

    font-size:20px;

}

}



/*=========================================
POPUP OVERLAY
=========================================*/

.message-overlay{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    padding:25px 0;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:999999;

}

.message-overlay.active{

    opacity:1;

    visibility:visible;

}


/*=========================================
POPUP
=========================================*/

.message-popup{

    width:700px;

    max-width:92%;

    height:560px;     

    background:#231f20;

    padding:22px 45px;

    position:relative;

    overflow:hidden;   


    transform:translateY(40px) scale(.96);

    opacity:0;

    transition:.45s;

}

.message-overlay.active .message-popup{

    transform:translateY(0) scale(1);

    opacity:1;

}


/*=========================================
CLOSE BUTTON
=========================================*/

.message-close{

    position:absolute;

    right:22px;

    top:18px;

    background:none;

    border:none;

    color:#ffffff;

    font-size:36px;

    cursor:pointer;

    transition:.35s;

}

.message-close:hover{

    color:#d6b178;

    transform:rotate(90deg);

}


/*=========================================
TITLE
=========================================*/

.message-title{

    text-align:center;

    color:#fff;

    font-size:26px;

    font-weight:300;

    margin-bottom:10px;

    letter-spacing:5px;


    text-transform:uppercase;

    font-family:"Jost",sans-serif;

    opacity:0;

    transform:translateY(-40px);

}

.message-overlay.active .message-title{

    animation:titleDown .7s ease forwards;

}

@keyframes titleDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================
FORM
=========================================*/

.message-form{

    width:100%;

}


/*=========================================
GROUP
=========================================*/

.message-group{

    position:relative;

    margin-bottom:16px;

}


/*=========================================
INPUT
=========================================*/

.message-group input,

.message-group textarea,

.message-group select{

    width:100%;

    background:transparent;

    border:none;

    border-bottom:1px solid rgba(255,255,255,.22);

    color:#fff;

    font-size:14px;

    font-family:"Jost",sans-serif;

    padding:10px 0;

    outline:none;

    transition:.35s;

}


/*=========================================
PLACEHOLDER
=========================================*/

.message-group input::placeholder,

.message-group textarea::placeholder{

    color:#d7d7d7;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:.6px;

}


/*=========================================
FOCUS
=========================================*/
.message-group input:focus,
.message-group textarea:focus,
.message-group select:focus{

    border-bottom:1px solid #fff;

    box-shadow:none;

}


/*=========================================
TEXTAREA
=========================================*/

.message-group textarea{

    resize:none;

      height:70px;

    padding-top:8px;

}


/*=========================================
SELECT
=========================================*/

.message-group select{

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    cursor:pointer;

    color:#fff;

}


/* Arrow */

.select-group::after{

    content:"";

    position:absolute;

    right:8px;

    top:50%;

    margin-top:-2px;

    border-left:6px solid transparent;

    border-right:6px solid transparent;

    border-top:7px solid #fff;

    pointer-events:none;

}


/* Dropdown List */

.message-group select option{

    background:#2a2524;

    color:#fff;

    padding:12px;

}

/*=========================================
SUBMIT BUTTON
=========================================*/

.message-submit{

    display:block;

    width:180px;

    height:48px;

    margin:35px auto 0;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:8px;

    color:#ffffff;

    font-size:17px;

    letter-spacing:4px;

    text-transform:uppercase;

    font-family:"Jost",sans-serif;

    background:linear-gradient(
        to bottom,
        #7f7f7f,
        #3a3a3a,
        #7f7f7f
    );

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.35),
        0 5px 15px rgba(0,0,0,.35);

    transition:.35s ease;

}

.message-submit:hover{

    transform:translateY(-3px);

    background:linear-gradient(
        to bottom,
        #999999,
        #505050,
        #999999
    );

}

.message-submit:active{

    transform:translateY(0);

}


/*=========================================
INPUT ANIMATION
=========================================*/

.message-overlay.active .message-group{

    animation:fadeUp .6s ease forwards;

}

.message-overlay.active .message-group:nth-child(1){

    animation-delay:.10s;

}

.message-overlay.active .message-group:nth-child(2){

    animation-delay:.18s;

}

.message-overlay.active .message-group:nth-child(3){

    animation-delay:.26s;

}

.message-overlay.active .message-group:nth-child(4){

    animation-delay:.34s;

}

.message-overlay.active .message-group:nth-child(5){

    animation-delay:.42s;

}

.message-overlay.active .message-group:nth-child(6){

    animation-delay:.50s;

}

.message-overlay.active .message-submit{

    animation:fadeUp .6s ease .60s both;

}

.message-group{

    opacity:0;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================
INPUT HOVER
=========================================*/

.message-group input:hover,
.message-group textarea:hover,
.message-group select:hover{

    border-bottom:1px solid #fff;

}



/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:786px){

.message-overlay{

    padding:15px;

}

.message-popup{

    width:100%;

    max-width:100%;

    padding:28px 22px;

}

.message-title{

    font-size:22px;

    letter-spacing:4px;

    margin-bottom:25px;

}

.message-close{

    font-size:30px;

    top:12px;

    right:15px;

}

.message-group{

    margin-bottom:22px;

}

.message-group input,

.message-group textarea,

.message-group select{

    font-size:14px;

    padding:10px 0;

}

.message-group textarea{

    height:85px;

}

.message-submit{

    width:160px;

    height:45px;

    font-size:15px;

    margin-bottom:30px;

    letter-spacing:3px;

}

}


/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.message-popup{

    padding:22px 18px;

}

.message-title{

    font-size:18px;

    letter-spacing:3px;

}

.message-submit{

    width:145px;

    height:42px;

    font-size:14px;

    margin-top:-10px;

}

.message-group textarea{

    height:75px;

}



}


/*=========================================
OPTION COLORS
=========================================*/

.message-group select option{

    background:#262120;

    color:#ffffff;

}


/*=========================================
PLACEHOLDER COLOR
=========================================*/

.message-group input::placeholder,

.message-group textarea::placeholder{

    color:#d8d8d8;

    opacity:1;

}


/*=========================================
FOCUS GLOW
=========================================*/

.message-group input:focus,

.message-group textarea:focus,

.message-group select:focus{

    box-shadow:none;

    border-bottom:1px solid #d6b178;

}




/* ===========================================================
   BROCHURE SECTION (inline in the page — no modal for the PDF)
   =========================================================== */
 
.brochure-section{
    width:100%;
    max-width:900px;
    margin:0 auto;
    text-align:center;

    margin-bottom:30px;
}
 
.brochure-subtitle{
    display:block;
    color: #fff;
    font-family:"Jost",sans-serif;
    font-size:24px;
    font-weight:400;
    letter-spacing:5px;
    text-transform:uppercase;
    margin-bottom:18px;
}

/* View brochure trigger — same gradient family as your other CTAs */
.br-view-btn{
    display:inline-block;
    width:220px;
    height:50px;
    background:linear-gradient(to bottom,#7f7f7f,#3a3a3a,#7f7f7f);
    border:none;
    border-radius:8px;
    color:#fff;
    font-family:"Jost",sans-serif;
    font-size:14px;
    letter-spacing:4px;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 5px 15px rgba(0,0,0,.35);
    transition:.35s ease;
}
.br-view-btn:hover{
    transform:translateY(-3px);
    background:linear-gradient(to bottom,#999,#505050,#999);
}
 
/* ===========================================================
   PDF PREVIEW — appears directly below the button, blurred,
   with two buttons sitting on top of the blur.
   =========================================================== */
 
.br-preview-wrap{
    position:relative;
    width:100%;
    height:640px;
    margin:40px auto 0;
    background:#1a1717;
    overflow:hidden;
    display:none;              /* shown via JS after "View Brochure" click */
    border:1px solid rgba(255,255,255,.08);
}
.br-preview-wrap.show{display:block;}
 
.br-pdf-frame{
    width:100%;
    height:100%;
    border:none;
    background:#2b2828;
    transition:filter .5s ease;
    filter:blur(10px);          /* blurred by default */
    pointer-events:none;        /* can't interact with the raw pdf until unlocked */
}
.br-pdf-frame.unlocked{
    filter:blur(0);
    pointer-events:auto;
}
 
/* Dark scrim + the two gate buttons, sitting on top of the blur */
.br-preview-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    background:rgba(0,0,0,.45);
    transition:opacity .4s ease, visibility .4s ease;
}
.br-preview-overlay.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
 
.br-preview-overlay .br-gate-label{
    color:#fff;
    font-family:"Jost",sans-serif;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:6px;
    opacity:.85;
}
 
.br-gate-btn{
    width:230px;
    height:48px;
    border:none;
    border-radius:8px;
    color:#fff;
    font-family:"Jost",sans-serif;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    cursor:pointer;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s ease;
}
 
.br-gate-btn.br-contact-gate{
    background:linear-gradient(to bottom,#7f7f7f,#3a3a3a,#7f7f7f);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 5px 15px rgba(0,0,0,.35);
}
.br-gate-btn.br-contact-gate:hover{
    transform:translateY(-3px);
    background:linear-gradient(to bottom,#999,#505050,#999);
}
 
.br-gate-btn.br-download-gate{
    background:transparent;
    border:1px solid #d6b178;
    color:#d6b178;
}
.br-gate-btn.br-download-gate:hover{
    background:#d6b178;
    color:#231f20;
}
 
/* Once unlocked, a slim top toolbar replaces the overlay */
.br-unlocked-bar{
    position:absolute;
    top:0; left:0; right:0;
    display:none;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    padding:12px 18px;
    background:linear-gradient(to bottom, rgba(0,0,0,.65), transparent);
    z-index:5;
}
.br-unlocked-bar.show{display:flex;}
.br-unlocked-bar a{
    background:linear-gradient(to bottom,#7f7f7f,#3a3a3a,#7f7f7f);
    color:#fff;
    font-family:"Jost",sans-serif;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    padding:9px 18px;
    border-radius:6px;
    text-decoration:none;
    transition:.3s;
}
.br-unlocked-bar a:hover{background:linear-gradient(to bottom,#999,#505050,#999);}
 
/* ===========================================================
   CONTACT MODAL — collects details, then "emails" them
   =========================================================== */
 
.br-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.75);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:none; align-items:center; justify-content:center; padding:20px;
    z-index:999999;
}
.br-overlay.active{display:flex;}
 
.br-lead-panel{
    width:600px; max-width:92%; background:#231f20; padding:22px 45px 40px;
    position:relative; box-shadow:0 25px 60px rgba(0,0,0,.55);
    transform:translateY(40px) scale(.96); opacity:0; transition:.45s;
}
.br-overlay.active .br-lead-panel{transform:translateY(0) scale(1); opacity:1;}
 
.br-close{
    position:absolute; right:22px; top:18px; background:none; border:none;
    color:#fff; font-size:36px; cursor:pointer; transition:.35s;
}
.br-close:hover{color:#d6b178; transform:rotate(90deg);}
 
.br-title{
    text-align:center; color:#fff; font-size:24px; font-weight:300; margin-bottom:10px;
    letter-spacing:5px; text-transform:uppercase; font-family:"Jost",sans-serif;
}
.br-subtitle{
    text-align:center; color:#d7d7d7; font-size:13px; letter-spacing:1px;
    margin-bottom:30px; font-family:"Jost",sans-serif;
}
 
.br-group{position:relative; margin-bottom:18px;}
.br-group input{
    width:100%; background:transparent; border:none;
    border-bottom:1px solid rgba(255,255,255,.22); color:#fff; font-size:14px;
    font-family:"Jost",sans-serif; padding:10px 0; outline:none; transition:.35s;
}
.br-group input::placeholder{
    color:#d7d7d7; font-size:15px; text-transform:uppercase; letter-spacing:.6px;
}
.br-group input:focus, .br-group input:hover{border-bottom:1px solid #fff;}
 
.br-submit{
    display:block; width:220px; height:48px; margin:30px auto 0; border:none; outline:none;
    cursor:pointer; border-radius:8px; color:#fff; font-size:15px; letter-spacing:3px;
    text-transform:uppercase; font-family:"Jost",sans-serif;
    background:linear-gradient(to bottom,#7f7f7f,#3a3a3a,#7f7f7f);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 5px 15px rgba(0,0,0,.35);
    transition:.35s ease;
}
.br-submit:hover{transform:translateY(-3px); background:linear-gradient(to bottom,#999,#505050,#999);}
.br-submit:disabled{opacity:.6; cursor:not-allowed; transform:none;}
 
.br-confirm{
    display:none; flex-direction:column; align-items:center; text-align:center; gap:12px;
    padding:20px 10px 10px;
}
.br-confirm.show{display:flex;}
.br-confirm span{color:#d6b178; text-transform:uppercase; letter-spacing:3px; font-size:15px;}
.br-confirm p{color:#fff; font-size:14px; letter-spacing:.4px; font-family:"Jost",sans-serif;}
 
@media(max-width:786px){
 .brochure-subtitle{
 
    font-size:14px;

}
  .br-preview-wrap{height:460px;}
  .br-lead-panel{padding:28px 22px 34px;}
  .br-title{font-size:18px; letter-spacing:4px;}
}

.message-confirm {
    display: none;
    text-align: center;
    padding: 20px;
    font-size: 16px;
    color: #2e7d32;
}

.message-confirm.show {
    display: block;
}

.popup-confirm1 {
    display: none;
    text-align: center;
    padding: 20px;
    font-size: 16px;
    color: #2e7d32;
}

.popup-confirm1.show {
    display: block;
}