.xl-container{max-width: var(--px-1688);margin: 0 auto;position: relative;width: 90%}
.lg-container{max-width: var(--px-1640);margin: 0 auto;position: relative;width: 90%}
.md-container{max-width: var(--px-1540);margin: 0 auto;position: relative;width: 90%}
.container{max-width: var(--px-1400);margin: 0 auto;position: relative;width: 90%}
.sm-container{max-width: var(--px-1360);margin: 0 auto;position: relative;width: 90%}
.xsm-container{max-width: var(--px-1128);margin: 0 auto;position: relative;width: 90%}
.heading02{font-size: var(--px-56);font-weight: var(--reg);line-height: 1;color: var(--dark-black);}
.heading03{font-size: var(--px-24);line-height: 1.2;font-weight: var(--reg);color: var(--white);}
p{font-weight: var(--reg);font-size: var(--px-16);line-height: 1.5;font-family: var(--Inter);}
.theme-btn{background: var(--dark-black);color: var(--white);text-decoration: none;padding: var(--px-10) var(--px-20);font-size: var(--px-16);font-weight: var(--med);text-transform: capitalize;width: max-content}
.text-center{text-align: center;}
.text-left{text-align: left;}
.section{padding: var(--px-100) 0;}
.page-wrapper{max-width: 1920px;width: 100%;margin: 0 auto;position: relative;overflow: hidden;box-shadow: 0 0 0.375em rgba(0, 0, 0, 0.25);}
.pb-0{padding-bottom: 0;}
.span{color: var(--theme);}





.header {background: #121417;padding: var(--px-20) 0 0 0;position: fixed;z-index: 999;width: 100%;top: 0;left: 0;right: 0;}
.header .left-logo img{width: var(--px-172);}
.header .right-logo img{width: var(--px-192);}
.header .lg-container{display:flex;justify-content:space-between;align-items:center;}
.header-right{display:flex;align-items:center;gap:var(--px-28);}
.header .theme-btn{background:#222929;color:white;border-radius: unset;border: none;}
.header .theme-btn:hover{background-color: var(--theme);}
.menu-btn {width: 25px;height: 20px;background: none;border: none;border-bottom: solid 2px var(--white);cursor: pointer;display: block;z-index: 9999;}
.menu-btn:before, .menu-btn:after {content: '';display: block;width: 100%;height: 2px;background: var(--white);margin: 4.5px 0;transform-origin: 8px 1px;transition: ease .3s all;}
.menu-btn.active {border-bottom: none;}
.menu-btn.active:before {transform: rotate(45deg);background: #FFFFFF;}
.menu-btn.active:after {transform: rotate(-45deg);background: #FFFFFF;}
.header .nav-menu{position: fixed;top: 0;right: 0;width: var(--px-348);height: 100vh;background: #121417;padding: var(--px-120) var(--px-40) var(--px-40);z-index: 999;transform: translateX(100%);transition: transform .4s ease;}
.header .nav-menu.active{transform: translateX(0);}
.header .nav-menu li{margin-bottom: var(--px-20);}
.header .nav-menu a{color: #fff;text-decoration: none;font-size:var(--px-18);}
.header .nav-menu a:hover{color: var(--theme);}
.header .nav-menu li.active a{color: var(--theme);}
.header .nav-menu li.active::after{width:100%;}
.header .nav-menu li a{transition:.3s;}

.hero-banner-section{position: relative;width: 100%;height: 100vh;overflow: hidden;}
.hero-banner-section .banner-video{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover; transform: scale(1); transition: .6s transform ease;margin-top: var(--px-108);}
.hero-banner-section.active .banner-video{transform: scale(0.8)}
.hero-banner-section.active .banner-content {opacity: 0;}
.banner-content{position:absolute;top:31%;left:64%;transform:translate(-50%,-50%);z-index:2;width:100%;max-width:var(--px-900);padding:0 var(--px-20);}
.banner-content .heading02{font-size:var(--px-80);font-weight:var(--reg);color:var(--white);text-transform:uppercase;text-align:center;margin-bottom:18px;font-family:var(--cinzel);}
.banner-content p { margin-left: var(--px-300);font-size:var(--px-16);line-height:1.5;color:var(--white);text-align:left;}
.banner-content .heading02 span{display:inline-block;margin-left:30%; }
.banner-content{
    opacity:0;
    visibility:hidden;
    transform:translate(-50%, -40px);
    filter:blur(10px);
}


.facilities-section{padding:var(--px-32) 0 ;}
.facilities-section .facility-box{display: flex;gap:var(--px-52);}
.facilities-section .theme-btn{font-size: var(--px-24);padding: var(--px-32) var(--px-60);display: block;}
.facilities-section .theme-btn:hover{color:var(--theme);}


.introduction-section .container{display:grid;grid-template-columns:48% 52%;background-color: #D8D7D6;}
.introduction-section .left-box{padding: var(--px-68) var(--px-48) var(--px-64) var(--px-56);}
.introduction-section .sub-title{display:flex;justify-content: flex-start;align-items:center;gap:var(--px-12);font-size:var(--px-16);text-transform:uppercase;color:var(--theme);margin-bottom:var(--px-10);}
.introduction-section .heading02 span{color: var(--theme);margin-bottom: var(--px-14);}
.introduction-section .heading02{margin-bottom: var(--px-14);}
.introduction-section .btn-group{margin-top: var(--px-56);}
.introduction-section .btn-group .theme-btn:hover{background-color: #D8D7D6;color: var(--black);border: 1px solid #222929}
.sub-title span{width:var(--px-60);height:1px;background:#00AEEF;display:block;}


.project-overview-section{padding: var(--px-96) 0;position: relative;background-image: url(../img/background-grid-overview.png);background-repeat: no-repeat, no-repeat;background-position: bottom left;background-size: 27%;}
.project-overview-section .sub-title{display:flex;justify-content:center;align-items:center;gap:var(--px-14);color:var(--theme);font-size:var(--px-16);text-transform:uppercase;margin-bottom:var(--px-10);}
.project-overview-section .sub-title span{width:var(--px-60);height:1px;background:var(--theme);}
.project-overview-section .heading02 span{color:var(--theme);}
.project-overview-section .heading02{margin-bottom: var(--px-28);}
.overview-grid{display:grid;grid-template-columns:repeat(3,1fr);}
.project-overview-section .overview-card{background:var(--theme);color:#fff;padding:var(--px-44) var(--px-156) var(--px-28) var(--px-28);border:1px solid rgba(255,255,255,.4);transition:.4s;}
.project-overview-section .overview-card .name{font-size: var(--px-24);font-weight: var(--reg);}
.project-overview-section .overview-card .heading03{font-size: var(--px-36);font-weight: var(--sb);font-family: var(--Inter);}
.project-overview-section .overview-card p {color:rgba(255,255,255,.8);margin-bottom: 0;}



.privileges-section .md-container{padding:var(--px-100) 0 var(--px-276);background-image: url(../img/background-grid-privillage.png);background-repeat: no-repeat, no-repeat;background-position: left bottom;background-size: 37%;}
/* .privileges-section .developer-wrapper{display:grid;grid-template-columns:58% 42%;align-items:center;gap:60px;} */
.sub-title{display:flex;justify-content:center;align-items:center;gap:var(--px-14);color:var(--theme);font-size:var(--px-16);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--px-10);}
.privileges-section .heading02{margin-bottom: var(--px-72);color: #0A254F;}
.privileges-section .heading02 span{color:var(--theme);}
.privileges-grid{display:grid;grid-template-columns:14% 14% 14% 14% 14% ;gap: var(--px-40) 7.5% ;}
.privilege-item h3{font-size:var(--px-24);font-weight:var(--reg);position:relative;padding-bottom:var(--px-14);}
.privilege-item h3::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--px-40);
    height: 2px;
    background: var(--theme);
    transition: width .4s ease, background-color .4s ease;
}

.privilege-item:hover h3::after{
    width: calc(var(--px-40) + var(--px-36));
    background: #CB9D06;
}
.privilege-item svg{width: var(--px-44);}
.privilege-item:hover svg .st0{
    fill: #CB9D06;
    stroke: #CB9D06;
}

.developer-section {padding-bottom: var(--px-76);}
.developer-section .heading02{margin-bottom: var(--px-16);}
.developer-section .heading03{font-size: var(--px-56);font-weight: var(--med);color: var(--dark-black);font-family: var(--Inter);}
.developer-wrapper{display:grid;grid-template-columns:49% 44%;align-items:center;gap:5%}
.developer-section .sub-title {display: flex;justify-content: flex-start;align-items: center;}
.developer-stats{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid #bdbdbd;}
.developer-section  .stat-box{padding:var(--px-40) var(--px-32) var(--px-32) var(--px-24);border-right:1px solid #bdbdbd;border-bottom:1px solid #bdbdbd;}
.developer-section  .stat-box:nth-child(2),
.developer-section .stat-box:nth-child(4){border-right:none;}
.developer-section .stat-box:nth-child(3),
.developer-section  .stat-box:nth-child(4){border-bottom:none;}


.plan-section{position:relative;padding: var(--px-276) 0 0 0;}
.arrow-btn {position: absolute;top: 82%;transform: translateY(-50%);background: none;border: none;cursor: pointer;z-index: 10;padding: 0;right:24%}
.plan-prev img,
.plan-next img{width:var(--px-56);height:var(--px-56);display:block;}



.landmark-section{padding: var(--px-56) 0 var(--px-164);}
.landmark-section p{text-align: center;margin: var(--px-32) 0 ;}
.solution-l-box {display: grid;gap: 1.4%;margin-top: var(--px-20);grid-template-columns: 24% 24% 24% 24%;}
.acc-row .theme-btn{padding:var(--px-10) var(--px-20);background:var(--theme);color:var(--white);cursor:pointer;font-size:var(--px-40);font-weight: var(--reg);transition:.3s;position:relative;width: 100%;font-family: var(--Inter);}
.acc-row.active .theme-btn{background:var(--white);color:#d5a12a;border:1px solid var(--theme);}
.toggle-box ul li{display:flex;justify-content:space-between;padding:var(--px-14) 0;border-bottom:1px solid #222929;font-size:var(--px-24);font-weight: var(--reg);}
.toggle-box ul li:last-child{border-bottom:none;}
.toggle-box{display:none;}
.acc-row.active .toggle-box{display:block;}
.toggle-box span{margin-top: var(--px-32);font-size: var(--px-16);font-weight: var(--reg);}


.footer{background:var(--dark-black);color:var(--white);padding:var(--px-80) 0 var(--px-28);}
.footer-top{display:grid;grid-template-columns:1.2fr 1fr 1.5fr .4fr;gap:var(--px-68);align-items:flex-start;}
.footer-menu a:hover{color:var(--theme);}
.footer-menu li {font-size: var(--px-16);font-weight: var(--reg);margin-bottom: var(--px-18);color: var(--white);font-family: var(--Inter);}
.contact-info li{display:flex;align-items:center;gap:var(--px-14);margin-bottom:var(--px-18);font-size: var(--px-16);}
.footer-social{display:flex;flex-direction:column;align-items:flex-end;gap:var(--px-10);margin-top: var(--px-100);}
.footer-bottom{margin-top:var(--px-24);padding-top:var(--px-8);border-top:1px solid rgba(255,255,255,.25);display:flex;justify-content:space-between;align-items:center;}
.footer-contact p{margin-bottom: var(--px-12);}
.contact-info img{width: var(--px-24);}
.footer-social img{width: var(--px-32);}
.foooter-logo img {width: var(--px-380);}
.footer-bottom a{font-size:var(--px-16)}


.experience-section{position:relative;height:100vh;overflow:hidden;background:#D8D7D6;}
.experience-section .heading02{position:absolute;top:50%;right: calc(var(--px-180) * -1);;transform:translate(-50%,-50%);z-index:2;font-size: var(--px-100);font-family: var(--Inter);color: #8D8683;}
.experience-section img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index: 9;transform:translateY(100%);}
.experience-section .mobile-img{display:none;}

.gallery-section{background:var(--dark-black);position:relative;}
.gallery-section .gallery-grid .gallery-item{position: relative;}
.fancybox__caption{font-size:var(--px-16);text-align:center;color:var(--white);}
.gallery-section .gallery-item img{border-radius: var(--px-18);}
.gallery-section .gallery-item p{position: absolute;color: var(--white);bottom: var(--px-14);left: var(--px-12);padding: var(--px-10) var(--px-28);background-color:var(--black);border-radius:var(--px-10);font-size: var(--px-16);}
.gallery-section .top-box{
display: grid;grid-template-columns: 45% 55%;background:var(--dark-black);margin-bottom: var(--px-18);}
.gallery-section .gallery-grid{ display: grid;grid-template-columns: 49% 49%;row-gap:2%;column-gap: 1%}
.gallery-section .bottom-box{display: grid;grid-template-columns: 55% 45%;margin-top: var(--px-56);}
.gallery-section .bottom-box .gallery-item{margin-bottom: -17%;position: relative;z-index: 9;}.gallery-section .top-box .gallery-item{margin-top: -17%;position: relative;z-index: 9;}
.gallery-section .content-box .heading02{color: var(--white);}
.gallery-section .top-box .content-box  {padding: var(--px-108) var(--px-140) var(--px-168) var(--px-240);}
.gallery-section .sub-title {display: flex;justify-content: flex-start;}
.gallery-section .bottom-box .content-box  {padding: var(--px-136) var(--px-480) var(--px-156) var(--px-160);}
.gallery-section .bottom-box .sub-title {font-size: var(--px-56);font-weight: var(--reg);font-family: var(--playfair);}
.heading2 span{
    position: relative;
    display: inline-block;
    color: var(--theme);
    padding-right: var(--px-88);
}

.heading2 span::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--px-72);
    height: 1px;
    background: var(--theme);
    transform: translateY(-50%);
    transition: width .3s ease;
}

.heading2 span::before{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--px-8);
    height: var(--px-8);
    border-top: 1px solid var(--theme);
    border-right: 1px solid var(--theme);
    transform: translateY(-50%) rotate(45deg);
    transition: transform .3s ease;
}
.heading2:hover{
    transform: scale(1.08);
}

.word{
display:inline-flex;
margin-right:12px;
}
.letterDrop{
display:inline-block;
}
 .word{margin-right: 20px}
 .word .letterDrop{width: 60px;}
   .letterDrop {
  position: relative;
  top: 0;  
  display: inline-block;
  text-transform: uppercase; 
  letter-spacing: 0.5em;
  opacity: 0.8;
  transform: rotateX(-90deg);
  animation: letterDrop 1.2s ease 1 normal forwards;
}

@keyframes letterDrop {
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 0.8;
        top: 3.75em;

    }
    100% {
        opacity: 1;
        top: 4.50em;
        transform: rotateX(360deg);
    }
}




/* popup-section */
.popup-section{max-width: var(--px-700);margin: 0 auto;padding: var(--px-40) var(--px-72);background: var(--dark-black);position: fixed;top: 50%;transform: translateY(-50%);left: 0;right: 0;display: none;z-index: 999;}
.popup-section .close-btn{
  position: absolute;
    top: 2%;
    right: 2%;
    cursor: pointer;
    width: var(--px-44);
    background: #fff;
    border-radius: 100%;
}
.enquiry-content .heading02{color:var(--white);margin-bottom:var(--px-48);}
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea{width:100%;background:#2A2A29;border:1px solid rgba(255,255,255,.2);padding:var(--px-18) var(--px-20);font-size:var(--px-16);margin-bottom:var(--px-16);outline:none; color: #FFFFFF; }

.enquiry-form input::placeholder,
.enquiry-form textarea::placeholder{color:rgba(255, 255, 255, 0.3);}

.phone-row p{display: grid;
    grid-template-columns: 30% 70%;}
.phone-row p br{display:none;}
.phone-row select{color: var(--white);}
.enquiry-form textarea{height:var(--px-152);resize:none;}
.checkbox{display:flex;gap:var(--px-12);align-items:flex-start;margin:var(--px-20) 0 var(--px-40);color:#fff;font-size:var(--px-16);line-height:1.3;font-family: var(--Inter);}
.checkbox input{width:var(--px-20);height:var(--px-20);margin-top:var(--px-20);}
.enquiry-form .theme-btn {
    background: var(--white);
    color: var(--dark-black);
    padding: var(--px-10) var(--px-20);
    border: none;
    font-size: var(--px-24);
    display: block;
    margin: 0 auto;
    cursor: pointer;
    transition: .3s;
	width:max-content;}
.enquiry-form .theme-btn:hover{background:var(--theme);color:var(--white);}
.overlay {position: fixed;top: 0;bottom: 0;right: 0;left: 0;background-color: rgba(0, 0, 0, 0.4);display: none;z-index: 99;}
.wpcf7 form .wpcf7-response-output{display:none;}


/* thank-you */
.thankyou-content{ height: 100vh;margin: 0 auto;align-items: center;justify-content: center;display: flex; background-image: url(../img/black-md-img.jpg); background-repeat: no-repeat; background-size: cover;}
.thankyou-content .wrapper-2{padding: var(--px-16);text-align: center;}
.thankyou-content .wrapper-2 h1{font-size: var(--px-80);color: var(--theme);margin: 0;margin-bottom: 10px;font-weight:700}
.thankyou-content .wrapper-2 .theme-btn{margin-top: var(--px-20); margin-inline: auto;}
.thankyou-content .wrapper-2 p{margin: 0;}
.thankyou-content .wrapper-2 .theme-btn:hover{background:#d9d9d9d9;color: var(--theme);border: 1px solid var(--theme);}


.wpcf7-not-valid-tip { margin-top: calc(var(--px-10) * -1);}