body {font-family: 'Metropolis', Consolas, sans-serif; color: #000;-webkit-font-smoothing: antialiased; overflow-x: hidden; padding-top: 76px;}
.clb{clear:both;}
.padd-0{padding:0px !important;}
.top-10{ margin-top:10px;}
.top-15{ margin-top:15px;}
.top-20{ margin-top:20px;}
.top-30{ margin-top:30px;}
.bottom-10{margin-bottom:10px;}
.fl{float:left;}
.fr{float:right;}
.text-left{text-align:left!important;}
.text-center{text-align:center!important;}
.text-right{text-align:right!important;}
.pad-top-25{ padding-top:25px;}
.border-0{border:0px!important;}
.center-block{ margin:0 auto; float:none;}
.border-red{border:1px solid red!important;}
.border-blue{border:1px solid blue;}
.border-gry{border:1px solid #7c7c7c!important;}
.img-reset-border{-webkit-border-radius: 0px!important;-moz-border-radius: 0px!important;border-radius: 0px!important;}

/*==================================*/

.nav-section {padding: 15px;position: fixed;z-index: 99;top: 0;width: 100%;background-color:transparent;/*transparent*/;transition: background-color 0.3s ease, box-shadow 0.3s ease;}

.nav-section.scrolled {background-color: #ece2d2;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);}
.nav-section i {color: #FFF; font-size: 40px;}
.enq-btn {text-align: right; padding-top: 10px;}
.enq-btn a {background: #FFF; color: #000;text-decoration: none;padding: 5px;}
.enq-btn a:hover {background: #a9ffd7;}

.hamburger-btn{text-align:right;}
/* Hamburger button — reset button styles */
.menu-toggle {background: #ece2d2;border: none;padding: 8px 10px;cursor: pointer;line-height: 1;-webkit-border-radius: 5px!important;-moz-border-radius: 5px!important;border-radius: 5px!important;}
.menu-toggle i {color: #2e6b53;font-size: 30px;transition: color 0.3s ease;}




/* Offcanvas styling */
.menu-logo{height:auto;-webkit-border-radius: 0rem;-moz-border-radius: 0rem;border-radius: 0rem;}
.offcanvas {background-color: #1d5c46;color: #FFF;width: 320px;}
.offcanvas-header {border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.offcanvas-title {color: #FFF;font-weight: 600; letter-spacing: 1px;}
.offcanvas-menu {list-style: none; padding: 0;margin: 0;}
.offcanvas-menu li {border-bottom: 1px solid rgba(255, 255, 255, 0.08);}
.offcanvas-menu li a {display: block;color: #FFF;text-decoration: none;padding: 16px 0;font-size: 18px;transition: color 0.3s ease, padding-left 0.3s ease;}

.offcanvas-menu li a:hover {color: #a9ffd7;padding-left: 8px;}


/* Hero slides up behind transparent header */

.banner-container{margin-top: -5px;}
.logo{height:70px;-webkit-border-radius: 0rem;-moz-border-radius: 0rem;border-radius: 0rem;}
.img-corner{-webkit-border-radius: 1.25rem!important;-moz-border-radius: 1.25rem!important;border-radius: 1.25rem!important;}
/*===========================*/
.section-1{padding-top:1rem; padding-bottom:1rem;}
.section-1 p{font-family: 'Metropolis';font-weight: 500;font-size:20px; font-style: normal;color:#d36070; text-align:center;margin-bottom: 0;letter-spacing:1px;}
.section-1 p span{color:#32b4e8;}

.code-braces-big{font-size:3.4rem; color:#000!important;font-family: 'Consolas';font-weight: bold;font-style: normal;}
.code-braces-sm{font-size:1.5rem; color:#000!important;font-family: 'Consolas';font-weight:normal;font-style: normal;}

.section-2{padding-top:3rem; padding-bottom:3rem;background: url('../images/bg-dot.webp') repeat center / 58px 58px;}

.section-2 h2{font-family: 'Metropolis';font-weight: 500;font-size:20px; text-align:center;color:#d36070;}
.section-2 h2 span{color:#32b4e8;}
.section-2 p{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#FFF; font-size:16px; text-align:center;}

.section-3{padding-top:1rem; padding-bottom:1rem;}
.brcs-img{text-align:right;}
.brcs-img img{ position: relative;margin-top: -12%;}
.data-text p{font-family: 'Metropolis';font-weight: 500;font-size:20px; font-style: normal;color:#000; text-align:center;margin-bottom: 0; word-spacing: 10px;letter-spacing:1px;}
.data-text-2 p{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#000; font-size:16px; text-align:center;margin-bottom: 10px;}
.banner-2 img{position: relative;margin-top: -11%; -webkit-border-radius: 1.25rem;-moz-border-radius: 1.25rem;border-radius: 1.25rem;}
.data-text-3{position: relative;margin-top: -8%;}
.data-text-3 h3{font-family: 'Metropolis';font-weight: 400;font-style: normal;color:#000; font-size:27px; text-align:center;line-height:35px;}

.section-4{padding-top:8rem; padding-bottom:8rem;background: url('../images/bg-dot.webp') repeat center / 58px 58px;margin-top: -6%;}
.section-4-data h3{font-family: 'Metropolis';font-weight: 500;font-style: normal;color:#d36070; font-size:18px; text-align:center;letter-spacing:1px;}
.section-4-data h3 span{color:#32b4e8;}
.section-4-data p{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#FFF; font-size:16px; text-align:center;margin-bottom: 10px;}
.brcs-img-2 img{height:82px;}

.section-5{padding-top:2rem; padding-bottom:2rem;}
.banner-5-cont img{position:relative; margin-top:-15%;}

.section-before-after{padding-top:0rem; padding-bottom:0rem; background:#ece2d2;}
.section-accordion{padding-top:2rem; padding-bottom:2rem;}

.over-txt-wrapper {width: 100%;display: flex;justify-content: center;align-items: center;}
.over-txt {font-family: 'Metropolis', sans-serif;font-weight: 500;font-style: normal;color: #FFF;font-size: 18px;text-align: center;margin: 0; letter-spacing:1px;}
.over-txt span {font-size: 4rem;line-height: 0;vertical-align: middle;}


.section-am{padding-top:0rem; padding-bottom:1rem; background: url('../images/bg-dot.webp') repeat center / 58px 58px;}
.section-am-bg{/*background: url('../images/bg-dot.webp') repeat center / 58px 58px;*/padding:2rem;}

.am-text-img{text-align:center; margin-bottom:15px;}
.am-text-img img{height: 70px;margin-bottom: 10px;}
.am-text-img h4{font-family: 'Metropolis';font-weight: 500;font-style: normal;color:#FFF; font-size:16px; text-align:center;margin-bottom: 4px;}
.am-text-img p{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#FFF; font-size:15px; text-align:center;}

/**==========Hover and color 3D image animated-banner-box==========*/
.am-text-img img,
.am-text-img h4 {transition: all 0.3s ease;}
.am-text-img:hover img {filter: invert(36%) sepia(35%) saturate(738%) hue-rotate(105deg) brightness(95%) contrast(88%);}
.am-text-img:hover h4 {color: #2f6d55;}
.am-text-img:hover p {color: #2f6d55;}
.animated-banner-box {perspective: 1000px; }


.animated-banner-box img {transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease; transform-style: preserve-3d;  border-radius: 0px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }


.animated-banner-box:hover img {transform: rotateX(8deg) rotateY(-4deg) translateZ(20px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);}
/*============================*/


.section-the-code{padding-top:1rem; padding-bottom:1rem;}
.section-the-code h4{font-family: 'Metropolis';font-weight: 600;font-style: normal;color:#000; font-size:16px; text-align:center;letter-spacing:1px;margin-bottom: 4px;}
.dot-bg-img{margin-top: -23%;}

.section-specification{padding-top:2rem; padding-bottom:2rem; background:#ece2d2;}
.section-specification p{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#000; font-size:16px; text-align:center;}
.section-speci-data{margin-top:20px;}
.section-speci-data h3{font-family: 'Consolas';font-weight: bold;font-style: normal;color:#000; font-size:22px; text-align:left;margin-bottom: 4px;}
.section-speci-data p{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#000; font-size:16px; text-align:left; margin-bottom:20px;}
.section-speci-data ul{padding:0px; margin:10px 15px 0px 15px; }
.section-speci-data ul li{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#000; font-size:16px; text-align:left;margin-bottom:10px;}

.section-gallery{padding-top:1rem; padding-bottom:2rem;}
.section-gallery-title{padding:0px;}
.section-gallery-title h3{font-family: 'Consolas';font-weight: bold;font-style: normal;color:#000; font-size:22px; text-align:center;margin-bottom: 0px;}

.gallery-title-braces-big{font-size:6rem; color:#000!important;font-family: 'Consolas';font-weight: bold;font-style: normal;}
.gallery-title-braces-sm{font-size:3rem; color:#000!important;font-family: 'Consolas';font-weight:bold;font-style: normal;}

.section-life{padding-top:3rem; padding-bottom:2rem;background: url('../images/bg-dot.webp') repeat center / 58px 58px;}
.section-life h2{font-family: 'Consolas';font-weight: normal;font-style: normal;color:#FFF; font-size:22px; text-align:center;margin-bottom: 4px;}
.section-life p{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#FFF; font-size:16px; text-align:center; margin-bottom:20px;}

.section-life a{background:#2f6c54; color:#FFF;font-family: 'Consolas';font-weight: normal;font-style: normal; text-transform:uppercase; font-size:18px; padding:11px 16px; text-decoration:none; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.section-life a:hover{background:#000;}



.section-map{padding-top:2rem; padding-bottom:0rem;}
.map-container{position: relative;margin-top: -15%;}
.section-map h3{font-family: 'Consolas';font-weight: normal;font-style: normal;color:#000; font-size:22px; text-align:center;margin-bottom: 4px;margin-top: 0px;}
.section-map p{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#000; font-size:16px; text-align:center; margin-bottom:20px;}

.section-map h4{font-family: 'Consolas';font-weight: 600;font-style: normal;color:#000; font-size:20px; text-align:left;margin-bottom: 4px;}
.section-map ul{padding:0px; margin:10px 15px 0px 15px; }
.section-map ul li{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#000; font-size:16px; text-align:left;margin-bottom:5px;}

.section-explore{padding-top:2rem; padding-bottom:2rem;background: url('../images/bg-dot.webp') repeat center / 58px 58px;}
.section-explore h3{font-family: 'Consolas';font-weight: normal;font-style: normal;color:#FFF; font-size:22px; text-align:center;}


.section-vr{padding-top:2rem; padding-bottom:0rem;}
.section-vr  h3{font-family: 'Consolas';font-weight: normal;font-style: normal;color:#000; font-size:22px; text-align:center;}
.section-vr a{background:#2f6c54; color:#FFF;font-family: 'Consolas';font-weight: normal;font-style: normal; text-transform:uppercase; font-size:18px; padding:11px 16px; text-decoration:none; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.section-vr a:hover{background:#000;}

.responsive-iframe-container {position: relative;width: 100%;height: 0;padding-bottom: 33.25%;overflow: hidden; margin-bottom:35px;}
.responsive-iframe-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;}

.section-floor-plan{padding-top: 2rem;padding-bottom: 2rem;background: #ece2d2;}

.section-form{padding-top:2rem; padding-bottom:32rem;background: url('../images/bg-dot.webp') repeat center / 58px 58px;}


.section-form-2{padding-top:1rem; padding-bottom:4rem;}
.form-container{position: relative;margin-top: -90%;}
.contact-card {border: none;border-radius: 2px;box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);}
.form-title {font-size: 20px;text-transform: uppercase;color: #1a1a1a;letter-spacing: 0.5px;text-align: center;font-family: 'Consolas';font-weight: 600;font-style: normal;}
.form-control {padding: 12px 15px;border-radius: 2px;}
.form-control:focus {border-color: #e63946;box-shadow: 0 0 0 0.2rem rgba(230, 57, 70, 0.15);}
.btn-submit {background: #2f6c54;border: none;color: #fff;font-weight: 700;text-transform: uppercase;letter-spacing: 1px;padding: 12px;border-radius: 8px;transition: background 0.3s, transform 0.2s; font-family: 'Consolas';font-weight: 600;font-style: normal; font-size:20px;}
.btn-submit:hover {background: #000;color: #fff;transform: translateY(-1px);}
.form-note {font-size: 0.75rem;color: #6c757d;text-align: center;margin-bottom: 0;line-height: 1.5;}

.form-label{font-family: 'Metropolis';font-weight: 500;font-style: normal;}

.footer{background:#e5e5e5;padding-top:1rem; padding-bottom:1rem;}
.footer h3{font-family: 'Consolas';font-weight: 600;font-style: normal;color:#000; font-size:22px; text-align:center;letter-spacing:0px;}
.footer p{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#000; font-size:16px; text-align:center; margin-bottom:6px;}
.footer-tele a{color:#000; font-size:20px;font-family: 'Consolas';font-weight: 600;font-style: normal; text-decoration:none;}
.mob-bg-padd{padding: 0px; -webkit-border-radius: 0px!important;-moz-border-radius: 0px!important;border-radius: 0px!important;}
.card{ -webkit-border-radius: 0px!important;-moz-border-radius: 0px!important;border-radius: 0px!important;}

.g-map-btn{margin-top:25px; background:#2f6c54; color:#FFF;font-family: 'Consolas';font-weight: normal;font-style: normal; text-transform:uppercase; font-size:18px; padding:15px 16px; text-decoration:none; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.g-map-btn:hover{background:#000;}


.webp-icon {transition: filter 0.3s ease;}
.webp-icon:hover {filter: invert(36%) sepia(35%) saturate(738%) hue-rotate(105deg) brightness(95%) contrast(88%);}

.tnc{font-size:12px;font-family: 'Metropolis';font-weight: 500;font-style: normal;color:#000;}
.lable-text span{color:#FF0000;}
img{-webkit-border-radius: 1.25rem;-moz-border-radius: 1.25rem;border-radius: 1.25rem;}

.section-rera{padding-top: 2rem;padding-bottom: 1rem;background: #ece2d2;}
.section-rera h3{font-family: 'Consolas';font-weight: bold;font-style: normal;color:#000; font-size:22px; text-align:center;margin-bottom: 4px;}
.section-rera p{font-family: 'Metropolis';font-weight: 300;font-style: normal;color:#000; font-size:18px; text-align:center; margin-bottom:20px;}
/*=======================*/
.section-gallery-title-2 {padding-top: 0rem; padding-bottom: 0rem; text-align:center;padding-left: 2.5rem;}
.brc-1{font-size: 3rem; color: #000 !important; font-family: 'Consolas'; font-weight: bold; font-style: normal;padding-top: 35px;}
.brc-2{font-size: 6rem;color: #000 !important; font-family: 'Consolas'; font-weight: bold;font-style: normal;}
.brc-text{font-family: 'Consolas'; font-weight: bold; font-style: normal; color: #000; font-size: 22px; text-align: center;margin-bottom: 0px; padding-top: 59px;}
.mob-logo-footer  img{-webkit-border-radius: 0px!important;-moz-border-radius: 0px!important;border-radius: 0px!important;}

/*================================================*/
.section-card {padding: 0px;background:#ece2d2;}
.section-title {font-weight: 600;letter-spacing: -0.02em;margin-bottom: 1.5rem;color: #1e2a3a;border-left: 5px solid #0d6efd;padding-left: 1rem;}

 /* ---------- VERTICAL CAROUSEL (3D STACK) ---------- */
.vertical-carousel-wrapper {position: relative;width: 100%;height: 500px;display: flex;justify-content: center;align-items: center;perspective: 1200px;overflow: hidden;pointer-events: auto; margin-bottom:3rem;}
.vertical-carousel {position: relative;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;transform-style: preserve-3d;}
.v-card {position: absolute;width: 70%;max-width: 850px;height: 400px;transition: all 0.4s ease-in-out;opacity: 0;border-radius: 1.25rem;overflow: hidden;box-shadow: 0 10px 30px rgba(0,0,0,0.2);cursor: pointer;transform: translateY(0) scale(0.8);z-index: 0;}
.no-transition .v-card { transition: none !important; }
.v-card img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform 0.3s ease;}
.v-card.active {opacity: 1;z-index: 10;transform: translateY(0) scale(1);box-shadow: 0 25px 50px rgba(0,0,0,0.4);cursor: zoom-in;}
.v-card.active:hover img { transform: scale(1.05); }
.v-card.prev {opacity: 0.85;z-index: 5;transform: translateY(-30%) scale(0.85);filter: brightness(0.8);cursor: pointer;}
.v-card.next {opacity: 0.85;z-index: 5;transform: translateY(30%) scale(0.85); filter: brightness(0.8);cursor: pointer;}
.carousel-controls {position: absolute;right: 5%;top: 50%;transform: translateY(-50%);display: flex;flex-direction: column;gap: 10px;z-index: 20;}
.carousel-controls button {width: 45px;height: 45px;display: flex;align-items: center;justify-content: center;font-size: 14px;transition: 0.3s;border: none;background: #ece2d2;color: #000; border-radius: 50%;box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
.carousel-controls button:hover {background-color: #2f6c54; color:#FFF; transform: scale(1.1);}

/* ---------- TAB STYLING ---------- */
.nav-tabs {border-bottom: none;justify-content: center;}
.nav-tabs .nav-link {font-weight: 600;color: #000;border: none;padding: 0.65rem 1.5rem;border-radius: 2rem;margin: 0 0.3rem;background: #f1f4f8;transition: all 0.2s; font-family: 'Consolas';font-weight: 600;font-style: normal; text-transform:uppercase;}
.nav-tabs .nav-link:hover {background:#000!important;color: #FFF;}
.nav-tabs .nav-link.active {background: #2f6d55!important;color: white; box-shadow: 0 6px 12px -4px #000;}
.arrow-btn{color:#000;font-size: 2rem;}



/* ---------- IMAGE ACCORDION (DESKTOP) ---------- */

.image-accordion {display: flex;flex-direction: row;gap: 8px;height: 420px;border-radius: 1.25rem;overflow: hidden;}
.accordion-panel {flex: 1;background-size: cover;background-position: center;border-radius: 1.25rem;transition: flex 0.5s cubic-bezier(0.2, 0.9, 0.3, 1), filter 0.3s;cursor: pointer;position: relative;overflow: hidden;box-shadow: 0 10px 20px -5px rgba(0,0,0,0.15); }
.accordion-panel:hover,
.accordion-panel.expanded {flex: 4;filter: brightness(1.05);}
.accordion-panel .panel-label {position: absolute; bottom: 16px;left: 16px;background: rgba(0,0,0,0.6);backdrop-filter: blur(4px);color: white;padding: 0.4rem 1rem;border-radius: 2rem;font-size: 0.9rem;font-weight: 500;opacity: 0;transform: translateY(10px); transition: opacity 0.25s, transform 0.25s; pointer-events: none;white-space: nowrap;}
.accordion-panel:hover .panel-label,
.accordion-panel.expanded .panel-label {opacity: 1;transform: translateY(0);}

/* ---------- MODAL ---------- */

.modal-img-full {width: 100%;border-radius: 1rem;}
.modal-gallery-full{width:1200px!important;}
.modal-lg {--bs-modal-width: 900px;}

/* ---------- BEFORE / AFTER SLIDER ---------- */
.comparison-wrapper {position: relative;width: 100%;/*max-width: 700px;*/margin: 0 auto;border-radius: 1.5rem;overflow: hidden;aspect-ratio: 16 / 10;user-select: none;}
.comparison-img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;pointer-events: none;}
.comparison-before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.comparison-after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);}
.comparison-handle {position: absolute;top: 0;bottom: 0;width: 8px;background: #007a57;left: 50%;transform: translateX(-50%);cursor: ew-resize;box-shadow: 0 0 0 2px rgba(0,0,0,0.2), 0 0 20px rgba(255,255,255,0.5); z-index: 10; display: flex;align-items: center;justify-content: center;pointer-events: none;}
.comparison-handle::after {content: "⇔"; background:#007a57;color: #FFF;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 1.4rem;box-shadow: 0 4px 12px rgba(0,0,0,0.3);border: 2px solid #007a57;pointer-events: none;padding: 20px;}
.comparison-slider {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;cursor: ew-resize;margin: 0;z-index: 20;-webkit-appearance: none;appearance: none;background: transparent;}
.comparison-slider::-webkit-slider-thumb {
      -webkit-appearance: none;appearance: none; width: 40px;height: 40px;border-radius: 50%;background: transparent;cursor: ew-resize;}
.comparison-slider::-moz-range-thumb {width: 40px;  height: 40px;border-radius: 50%;background: transparent;border: none;cursor: ew-resize;}
.comparison-label {position: absolute;bottom: 16px;background: rgba(0,0,0,0.6);color: white;padding: 0.3rem 1rem;border-radius: 30px;font-size: 0.85rem;backdrop-filter: blur(4px);z-index: 5;}
.label-before { left: 16px; }
.label-after { right: 16px; }

    /* ---------- RESPONSIVE (MOBILE FIX) ---------- */
@media (max-width: 992px) {
     .image-accordion { height: 280px; }
    }
	
	
@media (max-width: 768px) {
  
.vertical-carousel-wrapper { height: 350px; }
.v-card { width: 90%; height: 220px; }
.v-card.prev { transform: translateY(-25%) scale(0.85); }
.v-card.next { transform: translateY(25%) scale(0.85); }

     
.image-accordion {flex-direction: column;height: 600px; gap: 6px;}
.accordion-panel {flex: 1;width: 100%;min-height: 45px;transition: flex 0.4s ease, filter 0.3s;}
.accordion-panel:hover,
.accordion-panel.expanded {flex: 4;}
.accordion-panel .panel-label {opacity: 1;transform: translateY(0);font-size: 0.8rem;padding: 0.3rem 0.8rem;bottom: 10px;left: 10px;}
    }


/* ---------- SIMPLE CAROUSEL (TABBED) ---------- */
.simple-carousel .carousel-item img {height: auto;object-fit: none;cursor: zoom-in; height:550px; -webkit-border-radius: 1.25rem!important;-moz-border-radius: 1.25rem!important;border-radius: 1.25rem!important;}
.simple-carousel .carousel-caption{background: rgba(0, 0, 0, 0.45);backdrop-filter: blur(4px);border-radius: 2rem;padding: 0.75rem 1.5rem;bottom: 1.5rem;left: 10%;right: 10%;width: fit-content;margin: 0 auto;}



@media (max-width: 768px) {
.simple-carousel .carousel-item img {height: 260px;}
    }


 /* ----- Scoped styles only for our unique modal (#websiteViewerModal) ----- */
#websiteViewerModal .modal-dialog {max-width: 90vw;width: 90vw; height: 90vh;  margin: 5vh auto;}
#websiteViewerModal .modal-content {height: 100%;border-radius: 1rem;overflow: hidden;display: flex;flex-direction: column;position: relative;}
#websiteViewerModal .modal-body {flex: 1 1 auto;padding: 0; overflow: hidden;background: #f8f9fa;}
#websiteViewerModal .modal-body iframe {width: 100%;height: 100%;border: 0;display: block;}

    /* ---- Floating close button (top-right) ---- */
#websiteViewerModal .modal-close-float { position: absolute;top: 12px;right: 12px;z-index: 1055;width: 40px;height: 40px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.55);      border: 2px solid rgba(255, 255, 255, 0.8);color: #fff;font-size: 1.25rem;font-weight: bold;line-height: 1;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: background-color 0.2s ease, transform 0.2s ease;padding: 0;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);}
#websiteViewerModal .modal-close-float:hover {background-color: rgba(220, 53, 69, 0.9);transform: scale(1.1);}
#websiteViewerModal .modal-close-float:focus-visible {outline: 3px solid #0d6efd; outline-offset: 2px;}

    /* On very small screens */
@media (max-width: 576px) {
	
#websiteViewerModal .modal-dialog {max-width: 95vw; width: 95vw;height: 95vh;margin: 2.5vh auto;}
#websiteViewerModal .modal-close-float {top: 8px;right: 8px;width: 36px;height: 36px;font-size: 1.1rem;}

}


 /* ----- Scoped styles only for our unique modal (#websiteViewerModal) ----- */
#websiteViewerModal-2 .modal-dialog {max-width: 90vw;width: 90vw; height: 90vh;  margin: 5vh auto;}
#websiteViewerModal-2 .modal-content {height: 100%;border-radius: 1rem;overflow: hidden;display: flex;flex-direction: column;position: relative;}
#websiteViewerModal-2 .modal-body {flex: 1 1 auto;padding: 0; overflow: hidden;background: #f8f9fa;}
#websiteViewerModal-2 .modal-body iframe {width: 100%;height: 100%;border: 0;display: block;}

    /* ---- Floating close button (top-right) ---- */
#websiteViewerModal-2 .modal-close-float { position: absolute;top: 12px;right: 12px;z-index: 1055;width: 40px;height: 40px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.55);      border: 2px solid rgba(255, 255, 255, 0.8);color: #fff;font-size: 1.25rem;font-weight: bold;line-height: 1;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: background-color 0.2s ease, transform 0.2s ease;padding: 0;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);}
#websiteViewerModal-2 .modal-close-float:hover {background-color: rgba(220, 53, 69, 0.9);transform: scale(1.1);}
#websiteViewerModal-2 .modal-close-float:focus-visible {outline: 3px solid #0d6efd; outline-offset: 2px;}

    /* On very small screens */
@media (max-width: 576px) {
	
#websiteViewerModal-2 .modal-dialog {max-width: 95vw; width: 95vw;height: 95vh;margin: 2.5vh auto;}
#websiteViewerModal-2 .modal-close-float {top: 8px;right: 8px;width: 36px;height: 36px;font-size: 1.1rem;}

}

	
	
/*===========================*/

.modal-header {background:#659a81; color:#FFF;text-transform:uppercase;}
.btn-download{background:#659a81; color:#FFF; padding:10px 10px;letter-spacing:0.5px;border:0px; font-size:16px; text-transform:uppercase;margin-bottom:1rem;  font-family: 'Montserrat', sans-serif;}
.btn-download:hover{background:#000; color:#FFF;}
.required-star{color:#FF0000;}


/*======Fixed========*/

#fixedButton { position: fixed;right: 0;top: 44%;transform: translateY(-50%);color: #fff;border: none; padding: 3px 1px; cursor: pointer; writing-mode: vertical-lr;  text-orientation: upright; z-index: 1050; font-family: 'Gotham';font-weight: 500;font-style: normal; text-transform:uppercase; font-size:15px; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px;}
#fixedButton:hover{}
#fixedButton img{height:88px;border-radius: 0px;}

#fixedButton a{display: block; margin-top: -7px; margin-bottom: 10px;float: left;}



/*===========Whatsapp==============*/
.whatsapp-float {position: fixed;bottom: 30px;right: 30px;z-index: 1050;display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;background-color: #25D366; color: white;border-radius: 50%;text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);transition: all 0.2s ease-in-out;font-size: 32px;}
.whatsapp-float:hover {background-color: #128C7E;color: white;transform: scale(1.1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);text-decoration: none;}


    @keyframes soft-pulse {
      0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
      70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
      100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
    }
    .whatsapp-float {animation: soft-pulse 2.5s infinite;}
    /* Respect user reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      .whatsapp-float {animation: none;}
      .whatsapp-float:hover {transform: none;}
    }

    /* Small screens: adjust position & size */
    @media (max-width: 576px) {
      .whatsapp-float {bottom: 20px;right: 20px;width: 55px;height: 55px;font-size: 28px;}
    }
	
	
td{color:#000;font-size:14px;}
.table > :not(caption) > * > * {border-bottom-width:0px;}
	
/*============================================*/

.visi-desk{display:block!important;}
.visi-mob{display:none!important;}

::-webkit-input-placeholder { /* Edge */
  color:  #7a7a7a !important; font-family: 'Montserrat', sans-serif; font-weight: 400; font-style: normal;}

:-ms-input-placeholder { color:  #7a7a7a !important; font-family: 'Montserrat', sans-serif;  font-weight: 400; font-style: normal;}

::placeholder {color: #7a7a7a !important;font-family: 'Montserrat', sans-serif;font-weight: 400;font-style: normal;}


/*===================*/


 /* ---- full-width hero section ---- */
.liquid-hero {position: relative;width: 100%;height: 100vh;height: 100svh;min-height: 500px;max-height: 1100px; overflow: hidden; cursor: none; display: flex; align-items: center; justify-content: center;background: #0d1117; touch-action: none;margin-top: -78px; }
.liquid-hero img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;display: block;pointer-events: none; filter: none !important;      user-select: none;      -webkit-user-drag: none;-webkit-border-radius: 0px!important;-moz-border-radius: 0px!important;border-radius: 0px!important;    }

    .img-base { z-index: 1; }

    /* overlay image – revealed by liquid mask with distortion */
    .img-overlay {
      z-index: 2;
      mask-image: radial-gradient(circle 0px at 50% 50%, black 0%, transparent 0%);
      -webkit-mask-image: radial-gradient(circle 0px at 50% 50%, black 0%, transparent 0%);
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      will-change: mask-image, -webkit-mask-image;
    }

    /* dark gradient for text readability */
    .liquid-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0.25) 70%,
        rgba(0, 0, 0, 0.75) 100%
      );
      pointer-events: none;
    }

    /* ---- hero content ---- */
    .hero-content {
      position: relative;
      z-index: 10;
      text-align: center;
      color: #fff;
      padding: 1.5rem 1.25rem;
      max-width: 800px;
      width: 100%;
      pointer-events: none;
      animation: fadeUp 1s ease-out 0.2s both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(25px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .hero-content h1 {
      font-size: clamp(1.75rem, 6vw, 4rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.15;
      margin-bottom: 0.9rem;
      text-shadow: 0 2px 30px rgba(0,0,0,0.5);
    }

    .hero-content p {
      font-size: clamp(0.9rem, 2vw, 1.25rem);
      font-weight: 400;
      color: rgba(255,255,255,0.85);
      max-width: 560px;
      margin: 0 auto 1.75rem;
      line-height: 1.55;
    }

    .hero-btn {
      display: inline-block;
      padding: 0.8rem 2.2rem;
      font-size: clamp(0.9rem, 1.5vw, 1rem);
      font-weight: 600;
      color: #0d1117;
      background: #fff;
      border: none;
      border-radius: 50px;
      text-decoration: none;
      letter-spacing: 0.01em;
      box-shadow: 0 8px 30px rgba(0,0,0,0.25);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      pointer-events: auto;
      cursor: pointer;
    }

    .hero-btn:hover,
    .hero-btn:active {
      transform: translateY(-2px);
      box-shadow: 0 12px 35px rgba(0,0,0,0.35);
    }

    /* hint label */
    .hero-hint {
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      color: rgba(255,255,255,0.65);
      font-size: clamp(0.65rem, 1.4vw, 0.85rem);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 0.55rem;
      pointer-events: none;
      animation: fadeIn 1.5s ease-out 1s both;
      white-space: nowrap;
    }

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

    .hero-hint .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,0.7);
      animation: pulseDot 1.8s infinite;
    }

    @keyframes pulseDot {
      0%, 100% { opacity: 0.4; transform: scale(1); }
      50%      { opacity: 1;   transform: scale(1.5); }
    }

    /* ============================================================
       REAL LIQUID CURSOR
       – SVG turbulence + displacement filter for genuine water distortion
       – no glossy effects, no borders
       – organic morphing shape
       ============================================================ */

    /* hidden SVG filters for liquid distortion */
    .svg-filters {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    /* main liquid cursor blob */
    .liquid-blob {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      left: 0;
      top: 0;
      opacity: 0;
      width: 160px;
      height: 160px;
      /* organic non-circle shape */
      border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%;
      /* matte, flat water color – no gloss, no shine */
      background: radial-gradient(
        circle at 50% 50%,
        rgba(90, 160, 230, 0.28) 0%,
        rgba(70, 140, 220, 0.18) 50%,
        rgba(50, 120, 200, 0.04) 100%
      );
      box-shadow: 0 0 60px rgba(80, 150, 220, 0.22);
      border: none;
      /* liquid distortion filter applied */
      filter: url(#liquidDistortion) blur(0.3px);
      transform: translate(-50%, -50%) scale(0.5);
      transition: opacity 0.4s ease, width 0.3s ease, height 0.3s ease;
      will-change: left, top, width, height, transform, border-radius;
      animation: liquidMorph 6s infinite ease-in-out;
    }

    .liquid-blob.active {
      opacity: 1;
    }

    /* trailing liquid blob – bigger, softer, lags behind */
    .liquid-blob-trail {
      position: fixed;
      pointer-events: none;
      z-index: 9998;
      left: 0;
      top: 0;
      opacity: 0;
      width: 120px;
      height: 120px;
      border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%;
      background: radial-gradient(
        circle at 50% 50%,
        rgba(80, 150, 220, 0.18) 0%,
        rgba(60, 130, 210, 0.08) 55%,
        transparent 100%
      );
      box-shadow: 0 0 80px rgba(70, 140, 210, 0.15);
      border: none;
      filter: url(#liquidDistortion) blur(2px);
      transform: translate(-50%, -50%) scale(0.4);
      transition: opacity 0.6s ease, width 0.35s ease, height 0.35s ease;
      will-change: left, top, width, height, transform, border-radius;
      animation: liquidMorphTrail 8s infinite ease-in-out reverse;
    }

    .liquid-blob-trail.active {
      opacity: 0.7;
    }

    /* secondary inner liquid layer for depth */
    .liquid-blob::after {
      content: '';
      position: absolute;
      top: 15%;
      left: 15%;
      width: 70%;
      height: 70%;
      border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
      background: radial-gradient(
        circle at 45% 45%,
        rgba(120, 190, 240, 0.15) 0%,
        transparent 75%
      );
      filter: url(#liquidDistortion);
      animation: liquidMorph 5s infinite ease-in-out reverse;
    }

    /* --- organic morphing keyframes --- */
    @keyframes liquidMorph {
      0%   { border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; }
      16%  { border-radius: 45% 55% 42% 58% / 58% 42% 58% 42%; }
      33%  { border-radius: 55% 45% 60% 40% / 42% 58% 40% 60%; }
      50%  { border-radius: 40% 60% 48% 52% / 60% 40% 55% 45%; }
      66%  { border-radius: 60% 40% 45% 55% / 45% 60% 40% 55%; }
      83%  { border-radius: 48% 52% 58% 42% / 55% 45% 58% 42%; }
      100% { border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; }
    }

    @keyframes liquidMorphTrail {
      0%   { border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%; }
      25%  { border-radius: 42% 58% 60% 40% / 55% 45% 60% 40%; }
      50%  { border-radius: 60% 40% 45% 55% / 40% 60% 50% 50%; }
      75%  { border-radius: 45% 55% 58% 42% / 58% 42% 55% 45%; }
      100% { border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%; }
    }

    /* ripple droplets that spawn on movement */
    .liquid-ripple {
      position: fixed;
      pointer-events: none;
      z-index: 9997;
      left: 0;
      top: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(140, 200, 255, 0.25) 0%,
        transparent 70%
      );
      filter: url(#liquidDistortion) blur(1px);
      transform: translate(-50%, -50%) scale(0.3);
      opacity: 0.8;
      transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1),
                  opacity 1.2s ease;
      will-change: transform, opacity;
    }

    /* touch instruction */
    .touch-instruction {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: none;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      background: rgba(0, 0, 0, 0.35);
      animation: fadeInOut 4s ease-in-out forwards;
    }

    .touch-instruction-inner {
      text-align: center;
      color: #fff;
      padding: 1.5rem 2rem;
      border-radius: 20px;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(6px);
      max-width: 90%;
    }

    .touch-instruction-inner .icon {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
      display: block;
      animation: touchMove 1.8s infinite ease-in-out;
    }

    @keyframes touchMove {
      0%, 100% { transform: translateX(-10px); }
      50%      { transform: translateX(10px); }
    }

    .touch-instruction-inner p {
      margin: 0;
      font-size: 0.95rem;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.9);
    }

    @keyframes fadeInOut {
      0%   { opacity: 0; }
      15%  { opacity: 1; }
      75%  { opacity: 1; }
      100% { opacity: 0; visibility: hidden; }
    }

    @media (hover: none) and (pointer: coarse) {
      .touch-instruction { display: flex; }
    }

    @media (hover: none) {
      .liquid-hero { cursor: auto; }
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 992px) {
      .hero-content h1 { font-size: clamp(1.75rem, 5.5vw, 3rem); }
      .hero-content p  { font-size: clamp(0.9rem, 1.8vw, 1.1rem); }
    }

    @media (max-width: 576px) {
      .liquid-hero { min-height: 480px; }
      .hero-content { padding: 1.25rem 1rem; }
      .hero-content h1 { font-size: clamp(1.5rem, 7vw, 2.2rem); }
      .hero-content p  { font-size: 0.9rem; margin-bottom: 1.4rem; }
      .hero-btn { padding: 0.75rem 1.9rem; font-size: 0.9rem; }
      .hero-hint { bottom: 1rem; }
    }

    @media (max-width: 380px) {
      .hero-content h1 { font-size: 1.4rem; }
      .hero-content p  { font-size: 0.85rem; }
      .hero-btn { padding: 0.7rem 1.6rem; font-size: 0.85rem; }
    }

    @media (max-height: 500px) and (orientation: landscape) {
      .liquid-hero { height: auto; min-height: 100vh; }
      .hero-content h1 { font-size: 1.6rem; margin-bottom: 0.5rem; }
      .hero-content p  { font-size: 0.85rem; margin-bottom: 1rem; }
      .hero-btn { padding: 0.6rem 1.5rem; font-size: 0.85rem; }
      .hero-hint { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .liquid-blob,
      .liquid-blob-trail,
      .hero-content,
      .hero-hint {
        animation: none !important;
      }
    }
	
/*========================*/
/*=========thank you=======*/
.thankyou-section{padding-top: 11rem;padding-bottom: 32rem;margin-top:28px; background:#316e56;}
.thankyou-section h1{color:#FFF; font-size:45px; text-align:center;font-family: 'Consolas';font-weight: bold;font-style: normal; margin-bottom:10px; text-transform:uppercase;}
.thankyou-section h2{color:#FFF; font-size:20px; text-align:center;font-family: 'Metropolis';font-weight: 300;font-style: normal;}


.thankyou-section a{margin-top:25px; background:#000; color:#FFF;font-family: 'Consolas';font-weight: normal;font-style: normal; text-transform:uppercase; font-size:18px; padding:15px 16px; text-decoration:none; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.thankyou-section a:hover{background:#000;}
/*===================*/

/*============================================*/

@media (max-width:486px){ 

.visi-desk{display:none!important;}
.visi-mob{display:block!important;}

.banner-container {margin-top: 11px;}
.code-braces-big {font-size: 2rem;}
.section-1 p {font-size: 17px;letter-spacing: 0px;}
.section-2 h2 {font-size: 17px;}
.section-2 p {font-size: 15px;}
.brcs-img img {margin-top: -24%;height: 112px;}
.data-text p {font-size: 15px;word-spacing: 0px;letter-spacing: 0px;}
.data-text-2 p {font-size: 15px;}
.data-text-3 h3 {font-size: 20px;line-height: 33px;}
.section-4 {margin-top: -25%;padding-bottom: 3rem;}
.section-4-data p {font-size: 15px;}
.brcs-img-2 img {height: 97px;margin-left: 25%;}
.banner-5-cont img {margin-top: -17%;}
.over-txt {font-size: 16px;letter-spacing: 0px;}
.simple-carousel .carousel-item img {object-fit:scale-down;}
.over-txt span {font-size: 2rem;}
.mob-bg-padd{padding: 0px; border-radius: 0px;}
.mob-bg-padd img{border-radius: 0px;}
.dot-bg-img {margin-top: -9%;height: 144px; display:none;}
.section-specification p {font-size: 15px;}
.section-speci-data {padding-left:20px;}
.section-speci-data h3 {font-size: 18px;text-align: left;}
.section-speci-data ul li {font-size: 15px;text-align: left;  margin-bottom: 6px;}
.gallery-title-braces-sm{font-size: 2rem;}
.section-gallery-title h3{font-size: 19px;}
.gallery-title-braces-big{font-size: 3rem;}
.section-life h2{font-size: 20px; margin-bottom:15px;}
.section-life p{font-size: 15px;}
.map-container {margin-top: -54%;}

.am-text-img img {height: 60px; margin-bottom: 10px;}
.am-text-img h4 {font-size: 15px;}
.section-vr {padding-top: 0rem;padding-bottom: 0rem;}

.section-map h3 {font-size: 20px;margin-top:25px;}
.section-map h4 {font-size: 18px;}
.section-map ul {padding: 0px;margin: 10px 15px 20px 15px;}
.section-explore h3 {font-size: 20px;}
.section-vr h3 {font-size: 20px;margin-top: 25px;}
.section-vr a {font-size: 16px;padding: 9px 15px;}
.section-form {padding-top: 2rem;padding-bottom: 21rem;}
.form-title {font-size: 18px;letter-spacing: 0px;}
.footer p {font-size: 15px;}
.footer-tele{text-align:center;margin-top: 25px;}
.mob-logo-footer{text-align:center; margin-bottom:25px;}
.mob-logo-footer img{height: 62px;}
.footer-tele a {font-size: 18px;}
.footer h3 {font-size: 20px;}
.brc-text {font-size: 20px;padding-top: 1px;}
.brc-1 {font-size: 1.5rem; padding-top: 1px;}
.responsive-iframe-container {padding-bottom: 64.25%;margin-bottom: 0px;}

.mob-ul-li-btn{display:block; width:100%;}
.mob-ul-li-btn button{display:block; width:100%; margin-bottom: 15px!important;}
.g-map-btn {margin-top: 25px;margin-bottom: 25px;font-size: 18px;padding: 11px 14px;}

.menu-logo {height:62px;}
.offcanvas-menu li a {padding: 12px 0;font-size: 16px;}

.liquid-hero {max-height: 480px!important;}

.thankyou-section {padding-top: 6rem;padding-bottom: 14rem;margin-top: 8px; background: #316e56;}
.thankyou-section h1 {font-size: 40px;}
.thankyou-section h2 {font-size: 18px;}


}