@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --teal: #05b9aa;
    --teal2: #63e4d7;
    --deep: #022e2c;
    --deep2: #061b1c;
    --ink: #07191b;
    --muted: #66777a;
    --line: #dce8e6;
    --soft: #f4f8f7;
    --white: #fff;
    --radius: 20px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: "DM Sans", Arial, sans-serif;
    color: var(--ink);
    background: #fff
}

a {
    text-decoration: none;
    color: inherit
}

button {
    font: inherit
}

img {
    max-width: 100%;
    display: block
}

.header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(4, 26, 26, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    transition: .35s
}

.header.scrolled {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px);
    color: var(--ink);
    border-color: rgba(5, 40, 39, .08);
    box-shadow: 0 10px 40px rgba(0, 30, 29, .08)
}

.nav-wrap {
    height: 82px;
    max-width: 1480px;
    margin: auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 30px
}

.brand {
    width: 154px;
    flex: none
}

.brand img {
    width: 154px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .25))
}

.header nav {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-left: auto
}

.header nav a {
    font-size: 16px !important;
    font-weight: 700;
    white-space: nowrap;
    position: relative
}

.header nav a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 0;
    height: 2px;
    background: var(--teal);
    transition: .25s
}

.header nav a:hover:after {
    width: 100%
}

.top-contact {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-left: 2px
}

.phone-icon {
    font-size: 25px;
    color: var(--teal2)
}

.top-contact b {
    font-size: 12px;
    display: block
}

.top-contact small {
    font-size: 9px;
    opacity: .7
}

.nav-cta,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 21px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    transition: .3s;
    border: 0;
    cursor: pointer
}

.nav-cta {
    background: var(--teal);
    color: #fff;
    box-shadow: 0 8px 24px rgba(5, 185, 170, .22)
}

.nav-cta:hover,
.btn.primary:hover {
    transform: translateY(-2px);
    background: #039487
}

.menu {
    display: none;
    background: none;
    border: 0;
    color: inherit;
    font-size: 26px
}

.hero {
    min-height: 920px;
    position: relative;
    overflow: hidden;
    background: #041f1e;
    color: #fff;
    display: flex;
    align-items: center
}

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

.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(1, 24, 23, .96) 0%, rgba(1, 24, 23, .84) 34%, rgba(1, 24, 23, .36) 64%, rgba(1, 24, 23, .18) 100%)
}

.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    right: 4%;
    top: 16%;
    background: radial-gradient(circle, rgba(0, 203, 187, .18), transparent 68%);
    filter: blur(4px)
}

.hero-content {
    position: relative;
    z-index: 5;
    width: min(670px, 49%);
    margin-left: max(7vw, 45px);
    padding-top: 70px
}

.eyebrow,
.kicker {
    font-size: 10px;
    letter-spacing: 2.5px;
    font-weight: 800;
    color: #72e3d8
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 11px
}

.eyebrow span {
    height: 1px;
    width: 38px;
    background: rgba(255, 255, 255, .45)
}

.hero h1 {
    font-family: Manrope, sans-serif;
    font-size: clamp(48px, 5.7vw, 86px);
    line-height: .98;
    margin: 19px 0 25px;
    letter-spacing: -4px
}

.hero h1 em {
    font-style: normal;
    color: #09cbb9
}

.hero p {
    max-width: 590px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .8);
    font-size: 15px
}

.actions {
    display: flex;
    gap: 12px;
    margin: 30px 0
}

.btn.primary {
    background: var(--teal);
    color: #fff
}

.btn.glass {
    border: 1px solid rgba(255, 255, 255, .38);
    color: #fff;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(10px)
}

.btn.dark {
    background: var(--deep);
    color: #fff
}

.btn.darkghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid #9db4b2
}

.hero-proof {
    display: flex;
    gap: 25px;
    margin-top: 46px;
    flex-wrap: wrap
}

.hero-proof span {
    font-size: 10px;
    color: #dce9e7;
    border-left: 1px solid rgba(255, 255, 255, .25);
    padding-left: 12px
}

.hero-proof b {
    display: block;
    color: #68dfd4;
    font-size: 9px;
    margin-bottom: 5px;
    letter-spacing: 1px
}

.hero-model {
    position: absolute;
    z-index: 4;
    right: 3.5%;
    top: 15%;
    width: 48%;
    height: 70%
}

.model-card {
    position: relative;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .025));
    box-shadow: 0 30px 100px rgba(0, 0, 0, .25), inset 0 0 60px rgba(0, 215, 196, .04);
    backdrop-filter: blur(4px);
    overflow: hidden
}

.model-card:after {
    content: "";
    position: absolute;
    inset: auto 10% 5%;
    height: 25%;
    background: radial-gradient(ellipse, rgba(0, 214, 196, .25), transparent 65%);
    pointer-events: none
}

.model-top {
    position: absolute;
    z-index: 5;
    left: 25px;
    right: 25px;
    top: 20px;
    display: flex;
    justify-content: space-between;
    color: #d7eeeb;
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 800
}

.model-top i {
    font-style: normal;
    width: 31px;
    height: 31px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    display: grid;
    place-items: center
}

.hero-model canvas,
.model-box canvas {
    width: 100%;
    height: 100%;
    display: block
}

.model-hint {
    position: absolute;
    z-index: 5;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 9px;
    color: rgba(255, 255, 255, .65);
    letter-spacing: .4px
}

.model-hint span {
    margin: 0 6px;
    color: var(--teal)
}

.hero-bottom {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 0;
    padding: 18px max(7vw, 45px);
    background: rgba(0, 20, 19, .44);
    border-top: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px)
}

.hero-bottom span {
    flex: 1;
    text-align: center;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #d7e6e4;
    border-right: 1px solid rgba(255, 255, 255, .13)
}

.hero-bottom span:last-child {
    border: 0
}

.float {
    position: fixed;
    z-index: 110;
    right: 18px;
    bottom: 24px;
    display: grid;
    gap: 9px
}

.float a {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2)
}

.float strong {
    font-size: 18px
}

.float small {
    font-size: 7px;
    margin-top: -10px
}

.intro-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1320px;
    margin: auto;
    padding: 28px 30px;
    gap: 30px;
    border-bottom: 1px solid var(--line)
}

.intro-strip div {
    display: grid;
    gap: 5px;
    padding-left: 20px;
    border-left: 1px solid var(--line)
}

.intro-strip span {
    font-size: 8px;
    letter-spacing: 2px;
    color: #10a79a;
    font-weight: 800
}

.intro-strip b {
    font-size: 12px;
    color: #274143
}

.section {
    padding: 105px max(5vw, 30px)
}

.section-head {
    max-width: 1380px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end
}

.section-head>div {
    max-width: 820px
}

.section h2,
.about h2,
.building-section h2,
.doors h2,
.spares h2,
.model-section h2,
.testimonials h2,
.chennai h2,
.faq h2,
.contact h2 {
    font-family: Manrope, sans-serif;
    font-size: clamp(34px, 4vw, 57px);
    line-height: 1.04;
    letter-spacing: -2.7px;
    margin: 13px 0
}

.section h2 strong,
.about h2 strong,
.building-section h2 strong,
.doors h2 strong,
.spares h2 strong,
.model-section h2 strong,
.testimonials h2 strong,
.chennai h2 strong,
.faq h2 strong,
.contact h2 strong {
    color: var(--teal)
}

.section-head p,
.doors p,
.about-copy p,
.building-copy p,
.spare-copy p,
.model-section p,
.testimonials .section-head p,
.cert p,
.chennai p,
.contact p {
    color: var(--muted);
    line-height: 1.75;
    font-size: 14px
}

.outline {
    border: 1px solid #a9c0bd;
    padding: 13px 19px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    transition: .25s
}

.outline:hover {
    background: var(--deep);
    color: #fff;
    border-color: var(--deep)
}

.cards {
    max-width: 1380px;
    margin: 43px auto 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px
}

.card {
    background: #fff;
    border-radius: 17px;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(11, 43, 42, .08);
    border: 1px solid #e4eeec;
    position: relative;
    transition: .3s
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(5, 60, 58, .14)
}

.card img {
    width: 100%;
    height: 154px;
    object-fit: cover;
    transition: .4s
}

.card:hover img {
    transform: scale(1.04)
}

.card span {
    display: block;
    padding: 14px 43px 15px 15px;
    font-size: 12px;
    font-weight: 800
}

.card i {
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--teal);
    color: #fff;
    font-style: normal;
    font-size: 11px
}

.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
    padding-right: 0;
    background: #f3f8f7
}

.about-photo {
    min-height: 670px;
    overflow: hidden;
    position: relative
}

.about-photo>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.photo-note {
    position: absolute;
    left: 30px;
    bottom: 30px;
    background: rgba(3, 39, 37, .84);
    backdrop-filter: blur(12px);
    color: #fff;
    padding: 17px 20px;
    border-radius: 14px;
    min-width: 220px
}

.photo-note span {
    color: var(--teal2);
    font-size: 10px
}

.photo-note b,
.photo-note small {
    display: block
}

.photo-note b {
    font-size: 13px;
    margin-top: 7px
}

.photo-note small {
    font-size: 9px;
    color: #bdd0ce;
    margin-top: 3px
}

.about-copy {
    padding: 80px max(5vw, 50px);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.about-copy p {
    max-width: 690px
}

.benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 30px
}

.benefits span {
    background: #fff;
    border: 1px solid #e2ecea;
    border-radius: 13px;
    padding: 17px;
    position: relative;
    padding-left: 35px
}

.benefits span:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 20px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal)
}

.benefits b,
.benefits small {
    display: block
}

.benefits b {
    font-size: 11px
}

.benefits small {
    font-size: 9px;
    color: var(--muted);
    margin-top: 3px
}

.building-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
    max-width: 1500px;
    margin: auto
}

.building-image {
    position: relative
}

.building-image img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    border-radius: 25px
}

.building-image:before {
    content: "";
    position: absolute;
    inset: 15px -15px -15px 15px;
    border: 1px solid #b8d2ce;
    border-radius: 25px;
    z-index: -1
}

.building-list {
    margin-top: 35px;
    border-top: 1px solid var(--line)
}

.building-list span {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    font-weight: 700
}

.building-list b {
    font-size: 9px;
    color: var(--teal);
    letter-spacing: 1px
}

.doors {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 70px;
    align-items: center;
    background: #fff
}

.door-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px
}

.door-list div {
    min-height: 155px;
    border-radius: 17px;
    background: linear-gradient(145deg, #eef6f5, #fff);
    border: 1px solid #dfebe9;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    transition: .25s
}

.door-list div:hover {
    background: var(--deep);
    color: #fff
}

.door-list b {
    font-size: 9px;
    color: var(--teal)
}

.door-list span {
    font-size: 12px;
    font-weight: 800
}

.spares {
    background: var(--soft);
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 70px;
    align-items: center
}

.spare-visual {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px
}

.spare-visual div {
    height: 180px;
    border-radius: 17px;
    background: linear-gradient(145deg, #fff, #dfeae8);
    border: 1px solid #dbe8e6;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 18px
}

.spare-visual b {
    font-size: 13px;
    letter-spacing: 1px
}

.spare-visual small {
    font-size: 9px;
    color: var(--muted);
    margin-top: 4px
}

.model-section {
    background: linear-gradient(115deg, #032d2b, #061d1e);
    color: #fff;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    min-height: 690px;
    padding: 100px 7vw;
    align-items: center;
    overflow: hidden
}

.model-section p {
    color: #b8ccca;
    max-width: 540px
}

.model-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 25px
}

.model-actions>span {
    font-size: 9px;
    color: #91aaa7;
    line-height: 1.5
}

.model-box {
    height: 600px;
    position: relative
}

.model-frame {
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 30px;
    background: radial-gradient(circle at 50% 55%, rgba(0, 209, 192, .11), transparent 45%), rgba(255, 255, 255, .025);
    overflow: hidden;
    position: relative
}

.model-frame:after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 7%;
    height: 20%;
    background: radial-gradient(ellipse, rgba(0, 215, 197, .25), transparent 65%);
    pointer-events: none
}

.projects {
    background: #fff
}

.gallery-grid {
    max-width: 1380px;
    margin: 38px auto 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 13px
}

.gallery-grid img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 16px;
    transition: .3s
}

.gallery-grid img:hover {
    transform: translateY(-4px)
}

.testimonials {
    background: #f5f9f8
}

.review-mark {
    font-family: Georgia, serif;
    font-size: 100px;
    line-height: .5;
    color: #b8ddd8
}

.testimonial-grid {
    max-width: 1380px;
    margin: 42px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.testimonial-grid article {
    background: #fff;
    border: 1px solid #e1ebe9;
    border-radius: 19px;
    padding: 27px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 12px 35px rgba(4, 48, 46, .05)
}

.stars {
    color: #06a99b;
    letter-spacing: 4px;
    font-size: 12px
}

.testimonial-grid p {
    font-family: Manrope, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: #173839
}

.testimonial-grid article div:last-child b,
.testimonial-grid article div:last-child small {
    display: block
}

.testimonial-grid article div:last-child b {
    font-size: 11px
}

.testimonial-grid article div:last-child small {
    font-size: 9px;
    color: #899b9b;
    margin-top: 3px
}

.cert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px
}

.certs {
    display: flex;
    gap: 13px;
    flex-wrap: wrap
}

.certs div {
    width: 120px;
    height: 108px;
    border: 1px solid #cddbd9;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: 900;
    color: #1b4d4b;
    background: #fff
}

.certs small {
    font-size: 8px;
    color: #6f8583;
    margin-top: 4px
}

.chennai {
    padding: 95px 7vw;
    background: linear-gradient(90deg, rgba(0, 30, 29, .97), rgba(0, 50, 48, .88)), url('assets/img/lift-3.webp') center/cover;
    color: #fff;
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    align-items: center;
    gap: 45px
}

.chennai p {
    color: #c1d0cf
}

.service-points {
    display: grid;
    gap: 14px;
    font-size: 12px;
    font-weight: 700
}

.service-points span {
    color: #d8ebe9
}

.service-points span:first-letter {
    color: var(--teal2)
}

.faq {
    text-align: center
}

.faq-grid {
    max-width: 1080px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    text-align: left
}

.faq details {
    border: 1px solid #dce8e7;
    border-radius: 12px;
    padding: 18px 20px;
    background: #fff;
    transition: .25s
}

.faq details[open] {
    border-color: #8bcac3;
    box-shadow: 0 8px 25px rgba(0, 50, 48, .05)
}

.faq summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 800
}

.faq details p {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
    margin: 12px 0 0
}

.contact {
    background: #edf6f4;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap
}

.contact>div {
    margin-right: auto
}

.contact p {
    margin-bottom: 0
}

footer {
    background: #032e2d;
    color: #d9eeec;
    padding: 42px 6vw;
    display: grid;
   
    gap: 30px;
    font-size: 11px
}

.foot-brand img {
    width: 155px;
    height: auto;
    filter: none
}

.foot-brand p {
    margin: 4px 0 0;
    color: #98b7b4;
    font-size: 9px
}

.foot-brand+div,
.foot-brand~div {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.foot-brand~div b {
    font-size: 10px
}

.foot-brand~div small {
    font-size: 9px;
    color: #8daaa8
}








/* =========================================
   PREMIUM 3D ELEVATOR SECTION
========================================= */
.model-section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(360px, .86fr) minmax(560px, 1.14fr);
    align-items: center;
    gap: clamp(44px, 6vw, 92px);
    min-height: 780px;
    padding: 96px clamp(28px, 7vw, 118px);
    background:
        radial-gradient(circle at 76% 48%, rgba(0,205,190,.12), transparent 31%),
        radial-gradient(circle at 12% 88%, rgba(0,205,190,.05), transparent 24%),
        linear-gradient(125deg,#032f2d 0%,#021f20 56%,#06191a 100%);
    color:#fff;
    overflow:hidden;
}
.model-section::before {
    content:""; position:absolute; width:620px; height:620px; right:-240px; top:-250px;
    border:1px solid rgba(255,255,255,.055); border-radius:50%; pointer-events:none;
}
.model-section::after {
    content:""; position:absolute; width:410px; height:410px; left:-235px; bottom:-245px;
    border:1px solid rgba(0,210,190,.07); border-radius:50%; pointer-events:none;
}
.model-content { position:relative; z-index:2; max-width:560px; }
.model-content h2 {
    margin:16px 0 22px; font-family:"Manrope",sans-serif;
    font-size:clamp(42px,4.7vw,70px); line-height:.98; letter-spacing:-3.5px; color:#fff;
}
.model-content h2 strong { display:block; color:#08c8b8; }
.model-content > p { max-width:500px; margin:0; color:#a8c4c0; font-size:15px; line-height:1.85; }
.model-actions { display:flex; align-items:center; gap:22px; margin-top:34px; }
.model-actions .btn { white-space:nowrap; }
.model-instructions { display:flex; flex-direction:column; gap:5px; color:#789b97; font-size:11px; line-height:1.5; }
.model-features {
    display:grid; grid-template-columns:repeat(3,1fr); margin-top:56px;
    border-top:1px solid rgba(255,255,255,.11);
}
.model-features > div { padding:21px 18px 0 0; }
.model-features > div + div { padding-left:18px; border-left:1px solid rgba(255,255,255,.09); }
.model-features span { display:block; margin-bottom:8px; color:#08c8b8; font-size:10px; font-weight:800; letter-spacing:1px; }
.model-features b { display:block; color:#fff; font-size:12px; }
.model-features small { display:block; margin-top:5px; color:#769490; font-size:9px; line-height:1.5; }
.model-box { position:relative; z-index:2; width:100%; max-width:820px; margin-left:auto; }
.model-frame {
    position:relative; width:100%; height:620px; overflow:hidden;
    border:1px solid rgba(190,235,229,.20); border-radius:30px;
    background:
        radial-gradient(ellipse at 50% 68%, rgba(0,225,208,.18), transparent 35%),
        linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.012));
    box-shadow:inset 0 0 90px rgba(0,0,0,.18),0 34px 90px rgba(0,0,0,.24);
}
.model-frame::before {
    content:""; position:absolute; left:7%; right:7%; bottom:9%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,220,205,.55),transparent); pointer-events:none;
}
.model-frame::after {
    content:""; position:absolute; inset:20px; border:1px solid rgba(255,255,255,.035);
    border-radius:22px; pointer-events:none;
}
.model-frame canvas { position:absolute; inset:0; width:100%!important; height:100%!important; display:block; cursor:grab; touch-action:none; }
.model-frame canvas:active { cursor:grabbing; }
.model-loading {
    position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px;
    background:rgba(2,30,29,.45); color:#91aaa7; font-size:11px; transition:opacity .4s ease;
}
.model-loading.loaded { opacity:0; visibility:hidden; pointer-events:none; }
.loader-ring { width:28px; height:28px; border:2px solid rgba(255,255,255,.14); border-top-color:#05c4b4; border-radius:50%; animation:modelSpin .8s linear infinite; }
@keyframes modelSpin { to { transform:rotate(360deg); } }
.model-top-label { display:flex; justify-content:space-between; margin-bottom:12px; padding:0 6px; color:#71928e; font-size:9px; font-weight:800; letter-spacing:1.6px; }
.model-bottom { display:flex; justify-content:space-between; margin-top:12px; padding:0 6px; color:#678682; font-size:10px; }
.model-bottom span:first-child { color:#a9c1be; }
.model-spec { position:absolute; z-index:4; display:flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid rgba(193,232,226,.13); border-radius:999px; background:rgba(1,24,24,.52); backdrop-filter:blur(8px); color:#8cb3ae; font-size:8px; letter-spacing:1.3px; }
.model-spec i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#08c8b8; box-shadow:0 0 12px rgba(8,200,184,.65); }
.model-spec b { color:#e0f1ee; font-size:8px; font-weight:800; }
.spec-top { left:24px; top:22px; }
.spec-bottom { left:24px; bottom:22px; }
.model-door-hint { position:absolute; z-index:4; right:24px; bottom:23px; color:#789b97; font-size:8px; letter-spacing:1.1px; }
.model-door-hint span { color:#08c8b8; padding:0 5px; }

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

@media (max-width: 1000px) {
    .model-section { grid-template-columns:1fr; gap:46px; padding:82px 30px; }
    .model-content { max-width:760px; }
    .model-box { max-width:900px; margin:0 auto; }
    .model-frame { height:560px; }
}


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

@media (max-width: 600px) {
    .model-section { padding:66px 18px; gap:36px; }
    .model-content h2 { font-size:39px; letter-spacing:-2px; }
    .model-content > p { font-size:13px; }
    .model-actions { align-items:flex-start; flex-direction:column; gap:15px; }
    .model-features { grid-template-columns:1fr; margin-top:36px; }
    .model-features > div, .model-features > div + div { padding:15px 0; border-left:0; border-bottom:1px solid rgba(255,255,255,.08); }
    .model-frame { height:480px; border-radius:22px; }
    .model-top-label, .model-bottom { font-size:8px; }
    .model-spec { padding:8px 10px; font-size:7px; }
    .spec-top { left:14px; top:14px; }
    .spec-bottom { left:14px; bottom:14px; max-width:68%; flex-wrap:wrap; gap:7px; }
    .model-door-hint { right:14px; bottom:15px; font-size:7px; }
}













@media(max-width:1150px) {
    .header nav {
        gap: 15px
    }

    .top-contact {
        display: none
    }

    .hero-content {
        width: 55%
    }

    .hero-model {
        width: 52%
    }

    .cards {
        grid-template-columns: repeat(3, 1fr)
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .chennai {
        grid-template-columns: 1fr 1fr
    }

    .chennai .btn {
        grid-column: 2
    }
}

@media(max-width:820px) {
    .nav-wrap {
        height: 72px;
        padding: 0 17px
    }

    .brand,
    .brand img {
        width: 145px;
        height: 68px
    }

    .menu {
        display: block;
        margin-left: auto
    }

    .header nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: #fff;
        color: var(--ink);
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        box-shadow: 0 20px 30px rgba(0, 0, 0, .08)
    }

    .header nav.open {
        display: flex
    }

    .nav-cta {
        display: none
    }

    .hero {
        min-height: 920px;
        align-items: flex-end
    }

    .hero-video {
        object-position: 80% center
    }

    .hero-shade {
        background: none;
    }

    .hero-content {
        width: auto;
        margin: 0;
        padding: 0 22px 105px;
        display:none;
    }

    .hero h1 {
        font-size: 49px;
        letter-spacing: -2.8px
    }

    .hero p {
        font-size: 13px
    }

    .hero-proof {
        gap: 12px;
        margin-top: 25px
    }

    .hero-proof span {
        font-size: 9px
    }

    .hero-model {
        width: 92%;
        height: 49%;
        right: 4%;
        top: 85px
    }

    .model-card {
        border-radius: 23px
    }

    .hero-bottom {
        display: none
    }

    .intro-strip {
        grid-template-columns: 1fr;
        padding: 20px 22px;
        gap: 14px
    }

    .intro-strip div {
        padding-left: 14px
    }

    .section {
        padding: 75px 20px
    }

    .section-head {
        display: block
    }

    .section-head .outline {
        display: inline-flex;
        margin-top: 20px
    }

    .cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 27px
    }

    .card img {
        height: 135px
    }

    .card span {
        font-size: 10px
    }

    .about,
    .building-section,
    .doors,
    .spares,
    .model-section {
        grid-template-columns: 1fr
    }

    .about-photo {
        min-height: 380px
    }

    .about-copy {
        padding: 55px 22px
    }

    .building-section {
        gap: 45px
    }

    .building-image img {
        height: 390px
    }

    .building-image:before {
        inset: 10px -8px -8px 8px
    }

    .door-list {
        grid-template-columns: 1fr 1fr
    }

    .spares {
        gap: 35px
    }

    .spare-visual {
        grid-template-columns: repeat(2, 1fr)
    }

    .model-section {
        padding: 75px 20px
    }

    .model-box {
        height: 480px
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .gallery-grid img {
        height: 160px
    }

    .testimonial-grid {
        grid-template-columns: 1fr
    }

    .cert {
        display: block
    }

    .certs {
        margin-top: 28px
    }

    .chennai {
        grid-template-columns: 1fr;
        padding: 75px 22px;
        gap: 25px
    }

    .chennai .btn {
        grid-column: auto
    }

    .faq-grid {
        grid-template-columns: 1fr
    }

    .contact {
        padding: 60px 22px
    }

    footer {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:480px) {
    .hero {
        min-height: 540px
    }

    .hero-model {
        height: 42%;
        top: 86px
    }

    .hero h1 {
        font-size: 40px
    }

    .actions {
        flex-wrap: wrap
    }

    .btn {
        padding: 12px 16px
    }

    .benefits {
        grid-template-columns: 1fr
    }

    .door-list {
        grid-template-columns: 1fr
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr
    }

    .certs div {
        width: calc(50% - 7px)
    }

    .float {
        right: 10px
    }

    .float a {
        width: 50px;
        height: 50px
    }

    .model-box {
        height: 400px
    }

    footer {
        grid-template-columns: 1fr
    }
}
/* Self-contained 3D elevator visualizer */
.model-loading.loaded {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}
.model-frame canvas {
    touch-action: none;
}

/* =========================================================
   3D SECTION — PREMIUM SPLIT LAYOUT
   Left content + right 3D elevator box
========================================================= */
#elevator-3d.model-section{
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    align-items:center;
    gap:clamp(42px,5vw,86px);
    min-height:780px;
    padding:92px clamp(28px,7vw,110px) 84px;
    text-align:left;
    background:
      radial-gradient(circle at 76% 48%, rgba(0,211,194,.12), transparent 28%),
      radial-gradient(circle at 12% 100%, rgba(0,211,194,.06), transparent 30%),
      linear-gradient(145deg,#032e2d 0%,#021f20 55%,#031819 100%);
}
#elevator-3d .model-content{
    width:100%;
    max-width:590px;
    margin:0;
    justify-self:start;
}
#elevator-3d .model-content .kicker{display:inline-block;}
#elevator-3d .model-content h2{
    margin:14px 0 20px;
    max-width:570px;
    font-size:clamp(46px,5vw,72px);
    line-height:.95;
    letter-spacing:-4px;
}
#elevator-3d .model-content > p{
    max-width:520px;
    margin:0;
    font-size:15px;
    line-height:1.8;
}
#elevator-3d .model-actions{
    justify-content:flex-start;
    margin-top:30px;
}
#elevator-3d .model-features{
    width:100%;
    margin:46px 0 0;
    text-align:left;
    border-top:1px solid rgba(255,255,255,.10);
    border-bottom:1px solid rgba(255,255,255,.08);
    background:transparent;
    border-radius:0;
    overflow:hidden;
}
#elevator-3d .model-features > div{
    padding:18px 18px 16px 0;
}
#elevator-3d .model-features > div + div{
    padding-left:18px;
    border-left:1px solid rgba(255,255,255,.09);
}
#elevator-3d .model-box{
    width:100%;
    max-width:820px;
    margin:0 0 0 auto;
    justify-self:end;
}
#elevator-3d .model-top-label{
    width:100%;
    margin:0 0 10px;
    padding:0 6px;
    text-align:left;
}
#elevator-3d .model-top-label span:last-child{text-align:right;}
#elevator-3d .model-frame{
    height:600px;
    border-radius:30px;
    background:
      radial-gradient(ellipse at 50% 70%,rgba(0,231,213,.20),transparent 30%),
      radial-gradient(circle at 50% 40%,rgba(255,255,255,.055),transparent 44%),
      linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.012));
    overflow:hidden;
}
#elevator-3d .model-frame::after{inset:18px;border-radius:24px;}
#elevator-3d .model-bottom{
    width:100%;
    margin:10px 0 0;
    padding:0 6px;
}

@media (max-width:1100px){
  #elevator-3d.model-section{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:38px;
    padding:78px 34px 70px;
  }
  #elevator-3d .model-content h2{font-size:clamp(42px,5vw,62px);}
  #elevator-3d .model-frame{height:550px;}
}
@media (max-width:800px){
  #elevator-3d.model-section{
    grid-template-columns:1fr;
    gap:42px;
    min-height:auto;
    padding:76px 24px 68px;
  }
  #elevator-3d .model-content{max-width:700px;}
  #elevator-3d .model-box{max-width:900px;margin:0 auto;}
  #elevator-3d .model-frame{height:540px;}
}
@media (max-width:600px){
  #elevator-3d.model-section{padding:64px 16px 54px;gap:30px;}
  #elevator-3d .model-content h2{font-size:40px;letter-spacing:-2.5px;}
  #elevator-3d .model-content > p{font-size:13px;line-height:1.7;}
  #elevator-3d .model-actions{align-items:flex-start;flex-direction:column;gap:15px;}
  #elevator-3d .model-features{grid-template-columns:1fr;margin-top:30px;}
  #elevator-3d .model-features > div,
  #elevator-3d .model-features > div + div{padding:15px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.08);}
  #elevator-3d .model-features > div:last-child{border-bottom:0;}
  #elevator-3d .model-frame{height:470px;border-radius:22px;}
  #elevator-3d .model-top-label,#elevator-3d .model-bottom{font-size:8px;}
}










.dl-explorer-section {

    --dl-cyan: #08d5d1;
    --dl-cyan-light: #16e8e2;
    --dl-dark: #002c2d;
    --dl-border: rgba(127, 235, 232, .16);

    position: relative;

    width: 100%;

    min-height: 800px;

    overflow: hidden;

    color: #ffffff;

    background: #002c2d;

    isolation: isolate;

}


/* =========================================================
   ACTUAL SECTION BACKGROUND IMAGE
========================================================= */

.dl-explorer-bg {

    position: absolute;

    inset: 0;

    z-index: -5;

    background-image:
        url("../assets/images/3d-background.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}


/* Dark premium overlay */

.dl-explorer-overlay {

    position: absolute;

    inset: 0;

    z-index: -4;

    background:

        linear-gradient(
            90deg,
            rgba(0, 30, 31, .96) 0%,
            rgba(0, 45, 46, .82) 48%,
            rgba(0, 28, 30, .70) 100%
        );

}


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

.dl-floor-grid {

    position: absolute;

    left: -10%;

    right: -10%;

    bottom: -28%;

    height: 52%;

    z-index: -2;

    opacity: .32;

    background-image:

        linear-gradient(
            rgba(0, 222, 219, .13) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 222, 219, .13) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    transform:
        perspective(650px)
        rotateX(62deg);

    transform-origin:
        center bottom;

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.dl-explorer-container {

    width:
        min(1280px, 92%);

    min-height:
        675px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        47% 53%;

    align-items:
        center;

}


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

.dl-explorer-content {

    position:
        relative;

    z-index:
        10;

    padding:
        45px 20px 25px 0;

}


/* =========================================================
   EYEBROW
========================================================= */

.dl-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        22px;

    color:
        var(--dl-cyan);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        3px;

}


.dl-eyebrow-dot {

    width:
        5px;

    height:
        5px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--dl-cyan);

    box-shadow:
        0 0 14px
        var(--dl-cyan);

}


.dl-eyebrow-line {

    width:
        48px;

    height:
        1px;

    margin-left:
        2px;

    background:
        var(--dl-cyan);

    opacity:
        .65;

}


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

.dl-explorer-title {

    margin:
        0;

    max-width:
        650px;

    font-size:
        clamp(48px, 5.2vw, 76px);

    line-height:
        .95;

    letter-spacing:
        -3.5px;

    font-weight:
        700;

    color:
        #ffffff;

}


.dl-explorer-title span {

    color:
        var(--dl-cyan);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.dl-explorer-description {

    max-width:
        590px;

    margin:
        27px 0 26px;

    color:
        #c7dddd;

    font-size:
        14px;

    line-height:
        1.75;

}


/* =========================================================
   CTA
========================================================= */

.dl-explorer-actions {

    display:
        flex;

    align-items:
        center;

}


.dl-explore-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        15px 23px;

    color:
        #003536;

    background:
        var(--dl-cyan);

    border-radius:
        40px;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        800;

    transition:
        all .3s ease;

    box-shadow:
        0 10px 30px
        rgba(0, 210, 210, .10);

}


.dl-explore-btn i {

    font-size:
        12px;

    transition:
        transform .3s ease;

}


.dl-explore-btn:hover {

    color:
        #003536;

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(0, 220, 220, .25);

}


.dl-explore-btn:hover i {

    transform:
        translateX(5px);

}


/* =========================================================
   FEATURES
========================================================= */

.dl-explorer-features {

    display:
        grid;

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

    margin-top:
        42px;

    border-top:
        1px solid
        var(--dl-border);

    border-bottom:
        1px solid
        var(--dl-border);

}


.dl-feature-item {

    min-height:
        88px;

    padding:
        16px 12px 15px 0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    border-right:
        1px solid
        var(--dl-border);

}


.dl-feature-item:last-child {

    border-right:
        none;

}


.dl-feature-icon {

    width:
        25px;

    height:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    color:
        var(--dl-cyan);

    font-size:
        21px;

}


.dl-feature-text {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.dl-feature-text strong {

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        700;

}


.dl-feature-text span {

    color:
        rgba(200,225,225,.65);

    font-size:
        7px;

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.dl-explorer-visual {

    position:
        relative;

    width:
        100%;

    height:
        660px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

}


/* =========================================================
   VISUAL LABEL
========================================================= */

.dl-visual-label {

    position:
        absolute;

    top:
        24px;

    left:
        5%;

    z-index:
        30;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--dl-cyan);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.dl-live-dot {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--dl-cyan);

    box-shadow:
        0 0 10px
        var(--dl-cyan);

    animation:
        dlLivePulse 2s infinite;

}


.dl-visual-hint {

    position:
        absolute;

    top:
        24px;

    right:
        5%;

    z-index:
        30;

    color:
        rgba(18, 220, 216, .70);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


/* =========================================================
   LIFT IMAGE WRAPPER
========================================================= */

.dl-lift-wrapper {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    z-index:
        5;

}


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

.dl-lift-image {

    position:
        relative;

    width:
        95%;

    max-width:
        650px;

    height:
        97%;

    object-fit:
        contain;

    object-position:
        center bottom;

    display:
        block;

    animation:
        dlLiftFloat
        5.5s
        ease-in-out
        infinite;

    filter:
        drop-shadow(
            0 28px 30px
            rgba(0,0,0,.42)
        )

        drop-shadow(
            0 0 35px
            rgba(0,220,220,.08)
        );

    transition:
        transform .5s ease,
        filter .5s ease;

}


.dl-explorer-visual:hover .dl-lift-image {

    transform:
        translateY(-6px)
        scale(1.012);

    filter:
        drop-shadow(
            0 30px 40px
            rgba(0,0,0,.48)
        )

        drop-shadow(
            0 0 45px
            rgba(0,220,220,.13)
        );

}


/* =========================================================
   LIFT BOTTOM GLOW
========================================================= */

.dl-lift-bottom-glow {

    position:
        absolute;

    left:
        50%;

    bottom:
        28px;

    width:
        430px;

    height:
        115px;

    transform:
        translateX(-50%);

    z-index:
        1;

    background:

        radial-gradient(
            ellipse,
            rgba(0,235,230,.50),
            rgba(0,180,180,.14) 38%,
            transparent 72%
        );

    filter:
        blur(20px);

    animation:
        dlBottomGlow
        4s
        ease-in-out
        infinite;

}


/* =========================================================
   ORBITS
========================================================= */

.dl-orbit {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        2;

    border:
        1px solid
        rgba(0,220,220,.13);

}


.dl-orbit-one {

    width:
        500px;

    height:
        500px;

    right:
        -20px;

    top:
        75px;

}


.dl-orbit-two {

    width:
        405px;

    height:
        405px;

    right:
        28px;

    top:
        125px;

    border-style:
        dashed;

    animation:
        dlOrbitRotate
        20s
        linear
        infinite;

}


.dl-orbit-three {

    width:
        290px;

    height:
        290px;

    right:
        85px;

    top:
        185px;

    opacity:
        .5;

}


/* =========================================================
   CALLOUT
========================================================= */

.dl-callout {

    position:
        absolute;

    z-index:
        50;

    display:
        flex;

    align-items:
        center;

}


.dl-callout-box {

    width:
        142px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(0,220,220,.60);

    border-radius:
        8px;

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

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.16);

}


.dl-callout-box strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        14px;

    line-height:
        1.2;

}


.dl-callout-box span {

    display:
        none;

    margin-top:
        4px;

    color:
        #b7d3d3;

    font-size:
        7px;

    line-height:
        1.35;

}


.dl-callout-line {

    width:
        40px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(0,220,220,.15),
            var(--dl-cyan)
        );

}


.dl-callout-point {

    width:
        23px;

    height:
        23px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #003536;

    background:
        var(--dl-cyan);

    font-size:
        10px;

    box-shadow:

        0 0 0 5px
        rgba(0,220,220,.08),

        0 0 22px
        rgba(0,220,220,.30);

    animation:
        dlPointPulse
        2.5s
        ease-in-out
        infinite;

}


/* =========================================================
   CALLOUT POSITIONS
========================================================= */

.dl-callout-control {

    left:
        1%;

    top:
        19%;

}


.dl-callout-traction {

    right:
        0%;

    top:
        23%;

}


.dl-callout-cabin {

    left:
        5%;

    top:
        43%;

}


.dl-callout-guide {

    right:
        0%;

    top:
        48%;

}


.dl-callout-door {

    left:
        1%;

    top:
        66%;

}


.dl-callout-shaft {

    right:
        -1%;

    top:
        70%;

}


/* =========================================================
   SCAN LINE
========================================================= */

.dl-scan-line {

    position:
        absolute;

    left:
        20%;

    right:
        18%;

    top:
        20%;

    height:
        1px;

    z-index:
        20;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,220,220,.7),
            transparent
        );

    opacity:
        .20;

    animation:
        dlScanMove
        5s
        ease-in-out
        infinite;

}


/* =========================================================
   BOTTOM COMPONENT WRAPPER
========================================================= */

.dl-component-wrapper {

    position:
        relative;

    width:
        min(1180px, 92%);

    margin:
        -5px auto 28px;

    padding:
        15px 52px;

    display:
        flex;

    align-items:
        center;

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

    border-radius:
        15px;

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

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    z-index:
        80;

}


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

.dl-component-list {

    width:
        100%;

    display:
        grid;

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

    gap:
        15px;

}


.dl-component-card {

    min-width:
        0;

    cursor:
        pointer;

    transition:
        all .3s ease;

}


.dl-component-card:hover {

    transform:
        translateY(-4px);

}


.dl-component-image {

    position:
        relative;

    width:
        100%;

    height:
        125px;

    overflow:
        hidden;

    border-radius:
        7px;

    border:
        1px solid
        transparent;

}


.dl-component-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .4s ease,
        opacity .3s ease;

    opacity:
        .78;

}


.dl-component-card:hover
.dl-component-image img {

    transform:
        scale(1.06);

    opacity:
        1;

}


.dl-component-card.active
.dl-component-image {

    border-color:
        var(--dl-cyan);

    box-shadow:
        0 0 18px
        rgba(0,220,220,.15);

}


.dl-component-card.active
.dl-component-image img {

    opacity:
        1;

}


.dl-component-card > span {

    display:
        block;

    margin-top:
        8px;

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        600;

}


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

.dl-component-arrow {

    position:
        absolute;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    color:
        #ffffff;

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

    cursor:
        pointer;

    z-index:
        20;

    transition:
        all .25s ease;

}


.dl-component-arrow:hover {

    color:
        #003536;

    background:
        var(--dl-cyan);

    border-color:
        var(--dl-cyan);

}


.dl-component-prev {

    left:
        12px;

}


.dl-component-next {

    right:
        12px;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes dlLiftFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


@keyframes dlBottomGlow {

    0%,
    100% {

        opacity:
            .42;

        transform:
            translateX(-50%)
            scale(.94);

    }

    50% {

        opacity:
            .85;

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

    }

}


@keyframes dlPointPulse {

    0%,
    100% {

        box-shadow:

            0 0 0 4px
            rgba(0,220,220,.08),

            0 0 18px
            rgba(0,220,220,.20);

    }

    50% {

        box-shadow:

            0 0 0 8px
            rgba(0,220,220,.10),

            0 0 28px
            rgba(0,220,220,.32);

    }

}


@keyframes dlOrbitRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes dlScanMove {

    0% {

        top:
            18%;

        opacity:
            0;

    }

    20% {

        opacity:
            .20;

    }

    50% {

        opacity:
            .13;

    }

    100% {

        top:
            78%;

        opacity:
            0;

    }

}


@keyframes dlLivePulse {

    0%,
    100% {

        opacity:
            .5;

        transform:
            scale(.8);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.2);

    }

}


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

@media (max-width: 1100px) {

    .dl-explorer-container {

        grid-template-columns:
            46% 54%;

    }


    .dl-explorer-title {

        font-size:
            56px;

    }


    .dl-explorer-description {

        font-size:
            13px;

    }


    .dl-callout-box {

        width:
            120px;

    }


    .dl-callout-line {

        width:
            25px;

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .dl-explorer-section {

        min-height:
            auto;

    }


    .dl-explorer-container {

        width:
            92%;

        grid-template-columns:
            1fr;

    }


    .dl-explorer-content {

        padding:
            60px 0 20px;

    }


    .dl-explorer-title {

        font-size:
            clamp(48px, 8vw, 68px);

    }


    .dl-explorer-description {

        max-width:
            650px;

    }


    .dl-explorer-visual {

        height:
            580px;

        margin-top:
            0;

    }


    .dl-component-wrapper {

        margin-top:
            -10px;

    }

}


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

@media (max-width: 600px) {

    .dl-explorer-section {

        padding:
            0 0 20px;

    }


    .dl-explorer-container {

        width:
            92%;

    }


    .dl-explorer-content {

        padding:
            48px 0 10px;

    }


    .dl-eyebrow {

        font-size:
            8px;

        letter-spacing:
            2px;

        margin-bottom:
            18px;

    }


    .dl-eyebrow-line {

        width:
            30px;

    }


    .dl-explorer-title {

        font-size:
            45px;

        letter-spacing:
            -2px;

        line-height:
            .98;

    }


    .dl-explorer-description {

        margin:
            20px 0;

        font-size:
            12px;

        line-height:
            1.7;

    }


    .dl-explore-btn {

        padding:
            13px 19px;

        font-size:
            11px;

    }


    /* FEATURES */

    .dl-explorer-features {

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

        margin-top:
            30px;

    }


    .dl-feature-item {

        min-height:
            75px;

        padding:
            12px 8px 10px 0;

    }


    .dl-feature-item:nth-child(2) {

        border-right:
            none;

    }


    .dl-feature-item:nth-child(-n+2) {

        border-bottom:
            1px solid
            var(--dl-border);

    }


    .dl-feature-icon {

        font-size:
            18px;

    }


    .dl-feature-text strong {

        font-size:
            8px;

    }


    .dl-feature-text span {

        display:
            none;

    }


    /* VISUAL */

    .dl-explorer-visual {

        height:
            500px;

        margin-top:
            15px;

    }


    .dl-visual-label {

        top:
            8px;

        left:
            0;

        font-size:
            7px;

    }


    .dl-visual-hint {

        top:
            8px;

        right:
            0;

        font-size:
            6px;

    }


    .dl-lift-image {

        width:
            112%;

        height:
            100%;

    }


    /* ORBITS */

    .dl-orbit-one {

        width:
            350px;

        height:
            350px;

        right:
            -80px;

        top:
            65px;

    }


    .dl-orbit-two {

        width:
            285px;

        height:
            285px;

        right:
            -35px;

        top:
            100px;

    }


    .dl-orbit-three {

        width:
            220px;

        height:
            220px;

        right:
            30px;

        top:
            135px;

    }


    /* CALLOUTS */

    .dl-callout-box {

        width:
            92px;

        padding:
            7px 8px;

    }


    .dl-callout-box strong {

        font-size:
            7px;

    }


    .dl-callout-box span {

        display:
            none;

    }


    .dl-callout-line {

        width:
            14px;

    }


    .dl-callout-point {

        width:
            20px;

        height:
            20px;

        font-size:
            8px;

    }


    .dl-callout-control {

        left:
            -8%;

        top:
            18%;

    }


    .dl-callout-traction {

        right:
            -8%;

        top:
            22%;

    }


    .dl-callout-cabin {

        left:
            -8%;

        top:
            42%;

    }


    .dl-callout-guide {

        right:
            -8%;

        top:
            47%;

    }


    .dl-callout-door {

        left:
            -8%;

        top:
            63%;

    }


    .dl-callout-shaft {

        right:
            -8%;

        top:
            68%;

    }


    /* BOTTOM COMPONENTS */

    .dl-component-wrapper {

        width:
            92%;

        padding:
            12px 42px;

        margin:
            -2px auto 10px;

    }


    .dl-component-list {

        display:
            flex;

        gap:
            12px;

        overflow-x:
            auto;

        scroll-behavior:
            smooth;

        scrollbar-width:
            none;

    }


    .dl-component-list::-webkit-scrollbar {

        display:
            none;

    }


    .dl-component-card {

        flex:
            0 0 120px;

    }


    .dl-component-image {

        height:
            62px;

    }


    .dl-component-card > span {

        font-size:
            8px;

    }


    .dl-component-arrow {

        width:
            29px;

        height:
            29px;

        font-size:
            9px;

    }


    .dl-component-prev {

        left:
            8px;

    }


    .dl-component-next {

        right:
            8px;

    }

}


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

@media (max-width: 380px) {

    .dl-explorer-title {

        font-size:
            39px;

    }


    .dl-explorer-visual {

        height:
            450px;

    }


    .dl-callout-box {

        width:
            82px;

    }

}
















/* =========================================
   DYNAMIC LIFTS - SOLUTIONS SECTION
========================================= */

.dl-solutions {
    position: relative;
    width: 100%;
    overflow: hidden;

    background-color: #f8fcfd;

    /* YOUR BACKGROUND PNG */
    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.96) 0%,
            rgba(255,255,255,0.82) 38%,
            rgba(255,255,255,0.20) 72%,
            rgba(255,255,255,0.05) 100%
        ),
        url("../assets/images/lift-solution-back.png");

    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;

    padding: 105px 0 100px;
}


.dl-spare-parts-list {
    display: flex;
    flex-wrap: wrap;

    gap: 7px 0;

    margin-top: 24px;

    max-width: 650px;
    margin-bottom:24px;
}

.dl-spare-parts-list span {
    position: relative;

    color: rgba(255,255,255,0.92);

    font-size: 14px;
    font-weight: 500;

    line-height: 1.4;

    padding-right: 15px;
    margin-right: 10px;
}

.dl-spare-parts-list span::after {
    content: "|";

    position: absolute;
    right: 0;
    top: 0;

    color: #08c8d2;

    opacity: 0.7;
}

.dl-spare-parts-list span:last-child::after {
    display: none;
}


/* subtle white overlay */
.dl-solutions::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.25),
            rgba(255,255,255,0.05) 40%,
            rgba(248,252,253,0.85) 100%
        );

    pointer-events: none;
    z-index: 0;
}


/* =========================================
   BACKGROUND GLOW
========================================= */

.dl-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
    z-index: 0;
}

.dl-bg-glow-1 {
    width: 350px;
    height: 350px;

    background: rgba(0, 190, 205, 0.10);

    top: 120px;
    right: 5%;
}

.dl-bg-glow-2 {
    width: 250px;
    height: 250px;

    background: rgba(0, 120, 150, 0.08);

    bottom: 100px;
    left: -100px;
}


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

.dl-solutions-container {
    position: relative;
    z-index: 2;

    width: min(1440px, calc(100% - 70px));

    margin: 0 auto;
}


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

.dl-solutions-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;
}


.dl-solutions-heading {
    max-width: 850px;
}


/* =========================================
   EYEBROW
========================================= */

.dl-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: #009eb2;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 4px;
    text-transform: uppercase;
}


.dl-eyebrow-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #00b8c5;

    box-shadow:
        0 0 0 6px rgba(0,184,197,0.10);
}


.dl-eyebrow-line {
    width: 75px;
    height: 1px;

    background: linear-gradient(
        90deg,
        #00aebe,
        transparent
    );
}


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

.dl-solutions-heading h2 {
    margin: 0;

    color: #082b35;

    font-size: clamp(48px, 5vw, 76px);
    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -3px;
}


.dl-solutions-heading h2 span {
    display: block;

    color: #08aeba;
}


.dl-solutions-heading p {
    max-width: 780px;

    margin: 25px 0 0;

    color: #557582;

    font-size: 17px;
    line-height: 1.75;
}


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

.dl-view-btn {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 7px 8px 7px 27px;

    color: #fff;

    background: #063a46;

    border-radius: 50px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    box-shadow:
        0 15px 35px rgba(4,56,68,0.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.dl-view-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 20px 40px rgba(4,56,68,0.25);
}


.dl-view-arrow {
    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background: #0cc4d2;

    color: #063a46;

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


.dl-view-btn:hover .dl-view-arrow {
    transform: rotate(-45deg);
    background: #fff;
}


/* =========================================
   FEATURES
========================================= */

.dl-features {
    display: grid;

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

    gap: 35px;

    margin-top: 38px;
}


.dl-feature {
    display: flex;
    align-items: center;

    gap: 14px;
}


.dl-feature-icon {
    flex-shrink: 0;

    width: 54px;
    height: 54px;

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

    border-radius: 50%;

    color: #00aebe;

    background:
        rgba(224,248,250,0.88);

    font-size: 20px;

    box-shadow:
        inset 0 0 0 1px rgba(0,174,190,0.05);
}


.dl-feature strong {
    display: block;

    color: #102f38;

    font-size: 14px;
    font-weight: 800;
}


.dl-feature small {
    display: block;

    margin-top: 4px;

    color: #6c8992;

    font-size: 12px;
}


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

.dl-products-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 55px;
}


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

.dl-product-card {
    position: relative;

    display: block;

    height: 275px;

    overflow: hidden;

    border-radius: 22px;

    text-decoration: none;

    background: #fff;

    box-shadow:
        0 15px 45px rgba(10,70,80,0.10);

    transform:
        translateY(40px);

    opacity: 0;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}


.dl-product-card.is-visible {
    transform: translateY(0);
    opacity: 1;
}


.dl-product-card:hover {
    transform:
        translateY(-10px);

    box-shadow:
        0 25px 55px rgba(5,72,82,0.20);
}


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

.dl-product-image {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.dl-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .6s ease;
}


.dl-product-card:hover img {
    transform: scale(1.09);

    filter: saturate(1.08);
}


/* =========================================
   DARK GRADIENT
========================================= */

.dl-product-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3,28,35,0.00) 20%,
            rgba(3,35,44,0.08) 45%,
            rgba(2,43,53,0.90) 100%
        );

    z-index: 1;

    transition:
        background .4s ease;
}


.dl-product-card:hover .dl-product-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(3,28,35,0.02) 15%,
            rgba(2,45,55,0.12) 42%,
            rgba(2,43,53,0.94) 100%
        );
}


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

.dl-product-number {
    position: absolute;

    top: 17px;
    left: 18px;

    z-index: 3;

    color: rgba(255,255,255,0.85);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}


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

.dl-product-bottom {
    position: absolute;

    left: 17px;
    right: 17px;
    bottom: 17px;

    z-index: 3;

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

    gap: 10px;
}


.dl-product-title {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}


.dl-product-title span {
    color: #fff;

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

    white-space: nowrap;
}


/* =========================================
   ICON
========================================= */

.dl-product-icon {
    flex-shrink: 0;

    width: 47px;
    height: 47px;

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

    border-radius: 50%;

    color: #fff;

    background:
        rgba(4,42,51,0.50);

    border:
        1px solid rgba(255,255,255,0.75);

    backdrop-filter:
        blur(8px);

    font-size: 17px;

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


.dl-product-card:hover .dl-product-icon {
    background: #08c1d0;

    border-color: #08c1d0;

    transform: rotate(-8deg);
}


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

.dl-product-arrow {
    flex-shrink: 0;

    width: 43px;
    height: 43px;

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

    border-radius: 50%;

    color: #073640;

    background: #0bc3d2;

    font-size: 14px;

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


.dl-product-card:hover .dl-product-arrow {
    transform: rotate(-45deg) scale(1.08);

    background: #fff;
}


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

.dl-product-card::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -70px;
    right: -70px;

    border-radius: 50%;

    background:
        rgba(0,202,215,0.30);

    filter: blur(25px);

    opacity: 0;

    transition: opacity .4s ease;

    z-index: 2;
}


.dl-product-card:hover::after {
    opacity: 1;
}


/* =========================================
   7TH CARD
========================================= */

.dl-product-card:nth-child(5) {
    grid-column: span 1;
}

.dl-product-card:nth-child(6) {
    grid-column: span 1;
}

.dl-product-card:nth-child(7) {
    grid-column: span 1;
}


/* =========================================
   RESPONSIVE - TABLET
========================================= */

@media (max-width: 1100px) {

    .dl-solutions {
        padding: 80px 0;
    }

    .dl-solutions-container {
        width: min(94%, 900px);
    }

    .dl-solutions-top {
        align-items: flex-start;
    }

    .dl-solutions-heading h2 {
        font-size: 55px;
    }

    .dl-features {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 25px;
    }

    .dl-products-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 18px;
    }

    .dl-product-card {
        height: 280px;
    }
}


/* =========================================
   RESPONSIVE - MOBILE
========================================= */

@media (max-width: 700px) {

    .dl-solutions {

        padding:
            70px 0 65px;

        background-position:
            58% top;

        background-size:
            auto 100%;
    }


    .dl-solutions-container {
        width: calc(100% - 30px);
    }


    .dl-solutions-top {
        display: block;
    }


    .dl-eyebrow {
        font-size: 9px;

        letter-spacing: 2.5px;

        margin-bottom: 15px;
    }


    .dl-solutions-heading h2 {
        font-size: 40px;

        line-height: 1.02;

        letter-spacing: -1.5px;
    }


    .dl-solutions-heading p {
        margin-top: 18px;

        font-size: 14px;

        line-height: 1.65;
    }


    .dl-view-btn {
        display: inline-flex;

        margin-top: 25px;

        padding-left: 20px;

        font-size: 13px;
    }


    .dl-view-arrow {
        width: 42px;
        height: 42px;
    }


    .dl-features {
        grid-template-columns: 1fr 1fr;

        gap: 22px 12px;

        margin-top: 32px;
    }


    .dl-feature {
        gap: 9px;
    }


    .dl-feature-icon {
        width: 42px;
        height: 42px;

        font-size: 15px;
    }


    .dl-feature strong {
        font-size: 11px;
    }


    .dl-feature small {
        font-size: 9px;
    }


    .dl-products-grid {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 40px;
    }


    .dl-product-card {
        height: 250px;

        border-radius: 18px;
    }


    .dl-product-title span {
        font-size: 15px;
    }


    .dl-product-icon {
        width: 43px;
        height: 43px;
    }


    .dl-product-arrow {
        width: 40px;
        height: 40px;
    }

}


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

@media (max-width: 420px) {

    .dl-solutions-heading h2 {
        font-size: 34px;
    }

    .dl-features {
        grid-template-columns: 1fr;
    }

    .dl-feature {
        padding: 5px 0;
    }

}












/* =========================================================
   VX2 BUILDING SECTION
   ISOLATED CLASSES - WILL NOT AFFECT OLD DESIGN
========================================================= */

.vx2-building-section {
    position: relative;

    width: 100%;

    padding: 110px 0 115px;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #ffffff 48%,
            #f3fafb 100%
        );

    isolation: isolate;
}


.vx2-building-bg {
    position: absolute;

    inset: 0;

    z-index: -1;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(8, 105, 116, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8, 105, 116, .035) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image:
        linear-gradient(
            90deg,
            black 0%,
            black 45%,
            transparent 90%
        );
}


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

.vx2-building-container {
    width: min(1320px, calc(100% - 80px));

    margin: auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 90px;
}


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

.vx2-building-content {
    max-width: 610px;
}


/* =========================================================
   EYEBROW
========================================================= */

.vx2-building-eyebrow {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    color: #08adb8;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;
}


.vx2-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #08bbc5;

    box-shadow:
        0 0 0 6px rgba(8,187,197,.10);
}


.vx2-line {
    width: 65px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #08bbc5,
            transparent
        );
}


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

.vx2-building-title {
    margin: 0 !important;

    color: #082b34 !important;

    font-size: clamp(46px, 4.5vw, 68px) !important;

    line-height: 1.02 !important;

    letter-spacing: -3px !important;

    font-weight: 800 !important;
}


.vx2-building-title span {
    display: block;

    color: #09b5bd !important;

    font-weight: 800 !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.vx2-building-desc {
    max-width: 560px;

    margin: 25px 0 0;

    color: #617b84;

    font-size: 15px;

    line-height: 1.75;
}


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

.vx2-building-list {
    margin-top: 34px;

    border-top:
        1px solid rgba(10,76,87,.14);
}


.vx2-building-row {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 72px;

    border-bottom:
        1px solid rgba(10,76,87,.14);

    transition:
        background .35s ease,
        padding .35s ease;
}


.vx2-building-row:hover,
.vx2-building-row.active {
    padding-left: 12px;

    background:
        linear-gradient(
            90deg,
            rgba(8,184,195,.075),
            transparent
        );
}


/* NUMBER */

.vx2-row-number {
    width: 50px;

    flex-shrink: 0;

    color: #09b4be;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* CONTENT */

.vx2-row-content {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.vx2-row-content strong {
    color: #12343d;

    font-size: 14px;

    font-weight: 700;
}


.vx2-row-content small {
    color: #849ba1;

    font-size: 10px;
}


/* ARROW */

.vx2-row-arrow {
    width: 36px;
    height: 36px;

    display: flex;

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

    border-radius: 50%;

    background: #09bac4;

    color: #fff;

    opacity: 0;

    transform: scale(.7);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.vx2-building-row:hover .vx2-row-arrow,
.vx2-building-row.active .vx2-row-arrow {
    opacity: 1;

    transform: scale(1);
}


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

.vx2-building-btn {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 30px;

    padding: 6px 7px 6px 22px;

    border-radius: 50px;

    background: #063d46;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 15px 35px rgba(4,58,68,.15);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.vx2-building-btn span {
    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 50%;

    background: #09c2cc;

    color: #063d46;

    transition:
        transform .3s ease;
}


.vx2-building-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 20px 45px rgba(4,58,68,.22);
}


.vx2-building-btn:hover span {
    transform: translateX(4px);
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.vx2-building-visual {
    position: relative;

    min-height: 570px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* BACKDROP */

.vx2-image-backdrop {
    position: absolute;

    width: 600px;
    height: 520px;

    right: -30px;

    border-radius: 40px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(0,193,204,.13),
            transparent 65%
        );

    filter: blur(5px);
}


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

.vx2-image-card {
    position: relative;

    width: 610px;
    height: 535px;

    overflow: hidden;

    border-radius: 28px;

    background: #063b44;

    box-shadow:
        0 35px 70px rgba(6,58,68,.20);

    transform: rotate(0deg);

    z-index: 2;

    transition:
        transform .6s ease,
        box-shadow .6s ease;
}


.vx2-image-card:hover {
    transform:
        translateY(-7px)
        scale(1.01);

    box-shadow:
        0 45px 90px rgba(6,58,68,.27);
}


.vx2-image-card img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    display: block;

    transition:
        transform 1s cubic-bezier(.2,.8,.2,1);
}


.vx2-image-card:hover img {
    transform: scale(1.045);
}


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

.vx2-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(2,31,38,.55)
        );
}


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

.vx2-image-caption {
    position: absolute;

    left: 22px;
    bottom: 22px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 11px 18px 11px 12px;

    border-radius: 13px;

    background:
        rgba(3,54,64,.76);

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

    backdrop-filter: blur(12px);

    color: #fff;

    z-index: 3;
}


.vx2-image-caption > span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #0ac2cd;

    box-shadow:
        0 0 14px rgba(10,194,205,.8);
}


.vx2-image-caption small {
    display: block;

    color: #81dce1;

    font-size: 7px;

    letter-spacing: 2px;

    font-weight: 700;
}


.vx2-image-caption strong {
    display: block;

    margin-top: 2px;

    font-size: 13px;
}


/* =========================================================
   FLOATING DETAIL
========================================================= */

.vx2-floating-detail {
    position: absolute;

    right: -18px;
    bottom: 45px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 12px;

    border-radius: 10px;

    background: #063d46;

    color: #fff;

    box-shadow:
        0 15px 30px rgba(3,54,64,.18);
}


.vx2-detail-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #0ac3ce;
}


.vx2-floating-detail small {
    display: block;

    color: #7ed9df;

    font-size: 7px;

    letter-spacing: 1.5px;
}


.vx2-floating-detail strong {
    display: block;

    color: #fff;

    font-size: 18px;

    line-height: 1.1;
}


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

@media (max-width: 1050px) {

    .vx2-building-container {
        width: min(92%, 900px);

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .vx2-building-content {
        max-width: 800px;
    }

    .vx2-building-visual {
        min-height: 500px;
    }

    .vx2-image-card {
        width: min(100%, 700px);

        height: 500px;
    }

    .vx2-floating-detail {
        right: 0;
    }
}


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

@media (max-width: 600px) {

    .vx2-building-section {
        padding: 75px 0;
    }

    .vx2-building-container {
        width: calc(100% - 30px);

        gap: 45px;
    }

    .vx2-building-title {
        font-size: 42px !important;

        letter-spacing: -2px !important;
    }

    .vx2-building-desc {
        font-size: 14px;

        margin-top: 20px;
    }

    .vx2-building-list {
        margin-top: 28px;
    }

    .vx2-building-row {
        min-height: 70px;
    }

    .vx2-row-content strong {
        font-size: 12px;
    }

    .vx2-row-content small {
        display: none;
    }

    .vx2-row-number {
        width: 40px;
    }

    .vx2-row-arrow {
        width: 33px;
        height: 33px;

        opacity: 1;

        transform: scale(1);
    }

    .vx2-building-visual {
        min-height: auto;
    }

    .vx2-image-card {
        width: 100%;

        height: 430px;

        border-radius: 22px;
    }

    .vx2-image-backdrop {
        width: 100%;
        height: 100%;
    }

    .vx2-floating-detail {
        right: -5px;
        bottom: 25px;
    }
}











/* =========================================================
   VX3 TESTIMONIALS
   NO CLIENT IMAGES
========================================================= */

.vx3-testimonials {
    position: relative;

    width: 100%;

    padding: 115px 0 100px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbfb 58%,
            #eefafa 100%
        );

    isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.vx3-testimonials-bg {
    position: absolute;

    inset: 0;

    z-index: -1;

    background-image:
        radial-gradient(
            rgba(7, 185, 195, .12) 1px,
            transparent 1px
        );

    background-size: 24px 24px;

    opacity: .25;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 25%,
            black 75%,
            transparent
        );
}


/* Large soft glow */

.vx3-testimonials::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -220px;
    top: 40px;

    border-radius: 50%;

    background:
        rgba(7, 190, 201, .07);

    filter: blur(80px);

    z-index: -1;

    pointer-events: none;
}


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

.vx3-testimonials-container {
    width: min(1380px, calc(100% - 80px));

    margin: auto;
}


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

.vx3-testimonials-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 55px;
}


.vx3-testimonials-heading {
    max-width: 820px;
}


/* KICKER */

.vx3-testimonials-kicker {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: #08aeb8;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3.5px;
}


.vx3-testimonials-kicker > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #08bdc7;

    box-shadow:
        0 0 0 6px rgba(8,189,199,.10);
}


.vx3-testimonials-kicker i {
    display: block;

    width: 65px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #08b8c2,
            transparent
        );
}


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

.vx3-testimonials-heading h2 {
    margin: 0 !important;

    color: #082b34 !important;

    font-size: clamp(48px, 5vw, 70px) !important;

    line-height: .98 !important;

    letter-spacing: -3px !important;

    font-weight: 800 !important;
}


.vx3-testimonials-heading h2 strong {
    color: #08b6be !important;

    font-weight: 800 !important;
}


.vx3-testimonials-heading p {
    max-width: 720px;

    margin: 22px 0 0;

    color: #657e86;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   TRUST BLOCK
========================================================= */

.vx3-trust-block {
    display: flex;

    align-items: center;

    gap: 15px;

    flex-shrink: 0;

    padding: 13px 18px;

    border:
        1px solid rgba(7, 119, 130, .13);

    border-radius: 15px;

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

    box-shadow:
        0 15px 35px rgba(4,70,80,.06);

    backdrop-filter: blur(12px);
}


.vx3-trust-symbol {
    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 50%;

    background:
        #e7f9fa;

    color: #08aeb9;

    font-size: 17px;
}


.vx3-trust-block small {
    display: block;

    margin-bottom: 3px;

    color: #8aa0a6;

    font-size: 8px;

    letter-spacing: 2px;

    font-weight: 700;
}


.vx3-trust-block strong {
    color: #12343d;

    font-size: 13px;

    font-weight: 700;
}


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

.vx3-testimonial-grid {
    display: grid;

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

    gap: 22px;
}


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

.vx3-testimonial-card {
    position: relative;

    min-height: 325px;

    padding: 30px;

    overflow: hidden;

    border:
        1px solid rgba(7, 83, 95, .12);

    border-radius: 22px;

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

    box-shadow:
        0 20px 55px rgba(4,61,70,.06);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}


/* Cyan side line */

.vx3-testimonial-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 24px;
    bottom: 24px;

    width: 3px;

    border-radius: 0 5px 5px 0;

    background:
        #08b9c3;

    transform: scaleY(0);

    transform-origin: center;

    transition:
        transform .4s ease;
}


.vx3-testimonial-card:hover,
.vx3-testimonial-active {
    transform: translateY(-8px);

    border-color:
        rgba(8,184,194,.28);

    box-shadow:
        0 30px 65px rgba(4,61,70,.11);
}


.vx3-testimonial-card:hover::before,
.vx3-testimonial-active::before {
    transform: scaleY(1);
}


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

.vx3-card-top {
    display: flex;

    align-items: center;

    gap: 12px;
}


.vx3-card-number {
    color: #8ba1a7;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.vx3-stars {
    display: flex;

    gap: 4px;

    color: #08b3bd;

    font-size: 10px;
}


.vx3-quote-icon {
    margin-left: auto;

    width: 43px;
    height: 43px;

    display: flex;

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

    border-radius: 50%;

    background:
        #effafa;

    color: #09b6bf;

    font-size: 15px;

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


.vx3-testimonial-card:hover .vx3-quote-icon {
    transform: rotate(-8deg);

    background:
        #08b9c3;

    color: #fff;
}


/* =========================================================
   REVIEW
========================================================= */

.vx3-review {
    max-width: 470px;

    min-height: 105px;

    margin: 34px 0 30px;

    color: #12353e;

    font-size: 18px;

    line-height: 1.55;

    font-weight: 500;
}


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

.vx3-card-footer {
    display: flex;

    align-items: center;

    gap: 12px;

    padding-top: 22px;

    border-top:
        1px solid rgba(7,83,95,.10);
}


.vx3-client-mark {
    width: 43px;
    height: 43px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #e3f8f9,
            #d3f1f3
        );

    color: #08aeb8;

    font-size: 14px;
}


.vx3-card-footer strong {
    display: block;

    color: #12343d;

    font-size: 12px;

    font-weight: 800;
}


.vx3-card-footer small {
    display: block;

    margin-top: 3px;

    color: #8a9ea3;

    font-size: 9px;
}


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

.vx3-testimonials-bottom {
    display: flex;

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

    gap: 18px;

    margin-top: 42px;
}


.vx3-slider-line {
    width: 75px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #9bdde1
        );
}


.vx3-slider-line.right {
    background:
        linear-gradient(
            90deg,
            #9bdde1,
            transparent
        );
}


.vx3-slider-dots {
    display: flex;

    align-items: center;

    gap: 7px;
}


.vx3-slider-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #bce8eb;
}


.vx3-slider-dots span.active {
    width: 10px;
    height: 10px;

    background: #08b9c3;

    box-shadow:
        0 0 0 5px rgba(8,185,195,.09);
}


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

@media (max-width: 1000px) {

    .vx3-testimonials {
        padding: 90px 0;
    }

    .vx3-testimonials-container {
        width: min(92%, 850px);
    }

    .vx3-testimonials-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 30px;
    }

    .vx3-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .vx3-testimonial-card {
        min-height: auto;
    }

    .vx3-review {
        min-height: auto;
    }

}


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

@media (max-width: 600px) {

    .vx3-testimonials {
        padding: 75px 0 70px;
    }

    .vx3-testimonials-container {
        width: calc(100% - 30px);
    }

    .vx3-testimonials-header {
        margin-bottom: 35px;
    }

    .vx3-testimonials-heading h2 {
        font-size: 42px !important;

        letter-spacing: -2px !important;
    }

    .vx3-testimonials-heading p {
        font-size: 14px;

        line-height: 1.7;
    }

    .vx3-trust-block {
        width: 100%;
    }

    .vx3-testimonial-card {
        padding: 24px;

        border-radius: 18px;
    }

    .vx3-review {
        font-size: 16px;

        line-height: 1.55;

        margin: 28px 0;
    }

    .vx3-testimonials-bottom {
        margin-top: 30px;
    }

    .vx3-slider-line {
        width: 45px;
    }

}


















/* =========================================================
   VX4 CERTIFICATION SECTION
========================================================= */

.vx4-certification-section {
    position: relative;

    width: 100%;

    min-height: 720px;

    padding: 105px 0 110px;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #ffffff 0%,
            #ffffff 45%,
            #f1fafb 100%
        );

    isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.vx4-cert-bg {
    position: absolute;

    inset: 0;

    z-index: -2;

    background-image:
        linear-gradient(
            rgba(8, 110, 120, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8, 110, 120, .035) 1px,
            transparent 1px
        );

    background-size: 75px 75px;

    opacity: .5;

    mask-image:
        linear-gradient(
            90deg,
            black 0%,
            black 55%,
            transparent 100%
        );
}


/* right glow */

.vx4-certification-section::after {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -180px;
    top: 20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(5, 190, 201, .15),
            transparent 68%
        );

    filter: blur(15px);

    z-index: -1;

    pointer-events: none;
}


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

.vx4-cert-container {
    width: min(1380px, calc(100% - 80px));

    margin: auto;

    display: grid;

    grid-template-columns:
        .88fr 1.12fr;

    align-items: center;

    gap: 70px;
}


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

.vx4-cert-content {
    max-width: 650px;
}


/* =========================================================
   KICKER
========================================================= */

.vx4-cert-kicker {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 23px;

    color: #08aeb9;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3.5px;
}


.vx4-cert-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #08bdc6;

    box-shadow:
        0 0 0 6px rgba(8,189,198,.10);
}


.vx4-cert-kicker i {
    width: 70px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #08b9c2,
            transparent
        );
}


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

.vx4-cert-title {
    margin: 0 !important;

    color: #082b34 !important;

    font-size: clamp(52px, 5vw, 76px) !important;

    line-height: .98 !important;

    letter-spacing: -3.5px !important;

    font-weight: 800 !important;
}


.vx4-cert-title span {
    display: block;

    color: #08b6bf !important;

    font-weight: 800 !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.vx4-cert-description {
    max-width: 600px;

    margin: 25px 0 32px;

    color: #647f87;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   BADGES
========================================================= */

.vx4-cert-badges {
    display: grid;

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

    gap: 10px;

    max-width: 650px;
}


.vx4-cert-badge {
    min-height: 115px;

    padding: 17px 12px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    gap: 9px;

    border:
        1px solid rgba(7,83,95,.10);

    border-radius: 16px;

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

    box-shadow:
        0 12px 30px rgba(4,65,74,.045);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.vx4-cert-badge:hover,
.vx4-cert-badge.active {
    transform: translateY(-5px);

    border-color:
        rgba(8,183,193,.45);

    box-shadow:
        0 18px 35px rgba(4,65,74,.09);
}


.vx4-badge-icon {
    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 50%;

    background: #e7f9fa;

    color: #08aeb8;

    font-size: 15px;
}


.vx4-cert-badge strong {
    display: block;

    color: #12343c;

    font-size: 15px;

    font-weight: 800;
}


.vx4-cert-badge small {
    display: block;

    margin-top: 2px;

    color: #789097;

    font-size: 9px;
}


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

.vx4-cert-btn {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-top: 30px;

    padding: 6px 7px 6px 22px;

    border-radius: 50px;

    background: #063d46;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 15px 35px rgba(4,59,69,.15);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.vx4-cert-btn i {
    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 50%;

    background: #08c1cb;

    color: #063d46;

    transition:
        transform .3s ease;
}


.vx4-cert-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 20px 45px rgba(4,59,69,.22);
}


.vx4-cert-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.vx4-cert-visual {
    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Glow */

.vx4-cert-glow {
    position: absolute;

    width: 550px;
    height: 380px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(7,193,203,.16),
            transparent 70%
        );

    filter: blur(15px);
}


/* =========================================================
   STAGE
========================================================= */

.vx4-cert-stage {
    position: relative;

    width: 570px;
    height: 510px;

    display: flex;

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

    z-index: 2;
}


/* =========================================================
   PLATFORM
========================================================= */

.vx4-cert-platform {
    position: absolute;

    width: 500px;
    height: 70px;

    bottom: 22px;

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            #dff7f8,
            #b9e6e9
        );

    box-shadow:
        0 10px 25px rgba(7,174,185,.18),
        0 0 0 2px rgba(7,177,188,.08);

    z-index: 0;
}


.vx4-cert-platform::after {
    content: "";

    position: absolute;

    left: 10%;
    right: 10%;

    bottom: -7px;

    height: 10px;

    border-radius: 50%;

    background:
        rgba(4,91,101,.13);

    filter: blur(5px);
}


/* =========================================================
   CERTIFICATE
========================================================= */

.vx4-certificate {
    position: absolute;

    width: 310px;
    height: 405px;

    overflow: hidden;

    background: #fff;

    border:
        1px solid rgba(5,65,75,.14);

    box-shadow:
        0 25px 50px rgba(4,59,68,.17);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}


.vx4-certificate img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover !important;
}


/* Back */

.vx4-certificate-back {
    right: 35px;
    top: 45px;

    transform:
        rotate(3deg)
        scale(.91);

    opacity: .9;

    z-index: 1;
}


/* Front */

.vx4-certificate-front {
    left: 70px;
    top: 25px;

    transform:
        rotate(-2deg);

    z-index: 3;
}


.vx4-cert-stage:hover .vx4-certificate-front {
    transform:
        translateY(-8px)
        rotate(-1deg);
}


.vx4-cert-stage:hover .vx4-certificate-back {
    transform:
        translate(12px, -5px)
        rotate(5deg)
        scale(.91);
}


/* =========================================================
   LAUREL DECORATION
========================================================= */

.vx4-cert-laurel {
    position: absolute;

    display: flex;

    flex-direction: column;

    gap: 12px;

    color: rgba(8,166,177,.13);

    font-size: 30px;

    z-index: 0;
}


.vx4-laurel-left {
    left: 25px;
    top: 70px;

    transform: rotate(-25deg);
}


.vx4-laurel-right {
    right: 20px;
    top: 65px;

    transform:
        scaleX(-1)
        rotate(-25deg);
}


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

.vx4-cert-nav {
    position: absolute;

    top: 50%;

    z-index: 8;

    width: 48px;
    height: 48px;

    border: 0;

    border-radius: 50%;

    display: flex;

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

    background: #ffffff;

    color: #063d46;

    box-shadow:
        0 12px 30px rgba(4,70,80,.13);

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


.vx4-cert-nav:hover {
    background: #08bbc5;

    color: #fff;

    transform: scale(1.08);
}


.vx4-cert-prev {
    left: 0;
}


.vx4-cert-next {
    right: 0;
}


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

.vx4-cert-pagination {
    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;

    z-index: 9;
}


.vx4-cert-pagination span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #b9dfe2;
}


.vx4-cert-pagination span.active {
    width: 25px;

    border-radius: 20px;

    background: #08b9c3;
}


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

@media (max-width: 1100px) {

    .vx4-cert-container {
        width: min(92%, 900px);

        grid-template-columns: 1fr;

        gap: 65px;
    }

    .vx4-cert-content {
        max-width: 800px;
    }

    .vx4-cert-visual {
        min-height: 570px;
    }

}


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

@media (max-width: 600px) {

    .vx4-certification-section {
        padding: 75px 0 85px;
    }

    .vx4-cert-container {
        width: calc(100% - 30px);

        gap: 45px;
    }

    .vx4-cert-title {
        font-size: 43px !important;

        letter-spacing: -2px !important;
    }

    .vx4-cert-description {
        font-size: 14px;

        margin-top: 20px;
    }


    .vx4-cert-badges {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;
    }


    .vx4-cert-badge {
        min-height: 105px;
    }


    .vx4-cert-visual {
        min-height: 480px;

        width: 100%;
    }


    .vx4-cert-stage {
        width: 100%;

        height: 450px;
    }


    .vx4-certificate {
        width: 230px;
        height: 315px;
    }


    .vx4-certificate-front {
        left: 25px;
        top: 35px;
    }


    .vx4-certificate-back {
        right: 0;
        top: 65px;
    }


    .vx4-cert-platform {
        width: 90%;

        bottom: 30px;
    }


    .vx4-cert-nav {
        width: 40px;
        height: 40px;

        font-size: 11px;
    }


    .vx4-cert-prev {
        left: -5px;
    }


    .vx4-cert-next {
        right: -5px;
    }


    .vx4-laurel-left {
        left: 0;
    }


    .vx4-laurel-right {
        right: 0;
    }

}












/* =========================================================
   DYNAMIC LIFTS - NEW FOOTER
   UNIQUE PREFIX: DLX
========================================================= */

.dlx-footer,
.dlx-footer *,
.dlx-footer *::before,
.dlx-footer *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.dlx-footer {

    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 75%,
            rgba(0, 190, 200, .08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #03191a 0%,
            #052728 48%,
            #031b1c 100%
        );

    color: #ffffff;

    font-family: "Poppins", Arial, sans-serif;

    isolation: isolate;
}


/* subtle engineering grid */

.dlx-footer::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    opacity: .55;

    z-index: -2;
}


/* cyan glow */

.dlx-footer::after {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    bottom: -350px;

    border-radius: 50%;

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

    filter: blur(100px);

    pointer-events: none;

    z-index: -1;
}


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

.dlx-footer-grid {

    position: relative;

    width: min(1380px, calc(100% - 100px));

    margin: 0 auto;

    padding: 85px 0 75px;

    display: grid;

    grid-template-columns:
        1.55fr
        .72fr
        1fr
        1.55fr;

    gap: 65px;

    align-items: start;
}


/* =========================================================
   BRAND
========================================================= */

.dlx-footer-brand {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.dlx-footer-logo {

    width: 155px;
    height: 108px;

    display: flex;

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

    padding: 12px;

    background: #ffffff;

    border-radius: 16px;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.dlx-footer-logo:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);
}


.dlx-footer-logo img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* description */

.dlx-footer-description {

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

    margin: 27px 0 25px;

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

    font-size: 14px;

    line-height: 1.85;

    font-weight: 400;
}


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

.dlx-footer-socials {

    display: flex;

    align-items: center;

    gap: 10px;
}


.dlx-footer-socials a {

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

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

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

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

    text-decoration: none;

    font-size: 14px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.dlx-footer-socials a:hover {

    transform: translateY(-4px);

    background: #08bdc5;

    border-color: #08bdc5;

    color: #ffffff;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.dlx-footer-column,
.dlx-footer-contact {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.dlx-footer-column h3,
.dlx-footer-contact h3 {

    position: relative;

    margin: 2px 0 28px;

    padding: 0;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;
}


.dlx-footer-column h3::after,
.dlx-footer-contact h3::after {

    content: "";

    display: block;

    width: 30px;
    height: 2px;

    margin-top: 10px;

    border-radius: 10px;

    background: #08bec7;
}


/* links */

.dlx-footer-column > a {

    display: block;

    margin: 0 0 14px;

    padding: 0;

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

    font-size: 13px;

    line-height: 1.55;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.dlx-footer-column > a:hover {

    color: #08c2ca;

    transform: translateX(5px);
}


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

.dlx-footer-contact {

    width: 100%;
}


.dlx-contact-row {

    width: 100%;

    display: grid;

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

    gap: 13px;

    align-items: start;

    margin-bottom: 21px;
}


.dlx-contact-icon {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background: rgba(0,190,200,.10);

    border: 1px solid rgba(0,190,200,.10);

    color: #08c1ca;

    font-size: 12px;
}


.dlx-contact-text {

    min-width: 0;
}


.dlx-contact-text strong {

    display: block;

    margin: 0 0 3px;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 600;
}


.dlx-contact-text p {

    margin: 0;

    padding: 0;

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

    font-size: 13px;

    line-height: 1.7;
}


/* contact links */

.dlx-contact-link {

    width: 100%;

    display: grid;

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

    align-items: center;

    gap: 13px;

    margin: 0 0 14px;

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

    font-size: 13px;

    line-height: 1.5;

    text-decoration: none;

    transition: color .25s ease;
}


.dlx-contact-link:hover {

    color: #08c1ca;
}


.dlx-contact-link small {

    display: inline;

    margin-left: 4px;

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

    font-size: 10px;
}


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

.dlx-footer-bottom {

    width: min(1380px, calc(100% - 100px));

    min-height: 72px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

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


.dlx-footer-bottom > p {

    margin: 0;

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

    font-size: 11px;

    line-height: 1.5;
}


.dlx-footer-bottom-right {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 11px;

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

    font-size: 11px;
}


.dlx-footer-bottom-right i {

    width: 4px;
    height: 4px;

    display: block;

    border-radius: 50%;

    background: #08bdc5;
}


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

@media (max-width: 1100px) {

    .dlx-footer-grid {

        width: calc(100% - 70px);

        grid-template-columns:
            1.25fr
            1fr;

        gap: 55px;
    }


    .dlx-footer-bottom {

        width: calc(100% - 70px);
    }

}


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

@media (max-width: 700px) {

    .dlx-footer-grid {

        width: calc(100% - 36px);

        grid-template-columns: 1fr;

        gap: 42px;

        padding: 60px 0 50px;
    }


    .dlx-footer-brand {

        max-width: 420px;
    }


    .dlx-footer-logo {

        width: 145px;
        height: 100px;
    }


    .dlx-footer-description {

        max-width: 100%;

        font-size: 13px;

        line-height: 1.8;
    }


    .dlx-footer-column h3,
    .dlx-footer-contact h3 {

        font-size: 15px;
    }


    .dlx-footer-column > a {

        font-size: 13px;

        margin-bottom: 13px;
    }


    .dlx-contact-text p,
    .dlx-contact-link {

        font-size: 12.5px;
    }


    .dlx-footer-bottom {

        width: calc(100% - 36px);

        min-height: auto;

        padding: 20px 0;

        flex-direction: column;

        justify-content: center;

        text-align: center;

        gap: 12px;
    }


    .dlx-footer-bottom-right {

        justify-content: center;

        text-align: center;
    }

}


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

@media (max-width: 420px) {

    .dlx-footer-grid {

        width: calc(100% - 28px);

        padding-top: 50px;
    }


    .dlx-contact-row {

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

        gap: 10px;
    }


    .dlx-contact-link {

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

        gap: 10px;
    }


    .dlx-contact-icon {

        width: 36px;
        height: 36px;
    }


    .dlx-footer-bottom {

        width: calc(100% - 28px);
    }

}













/* =========================================================
   DYNAMIC LIFTS CTA
========================================================= */

.dlx-cta-section,
.dlx-cta-section *,
.dlx-cta-section *::before,
.dlx-cta-section *::after {
    box-sizing: border-box;
}

.dlx-cta-section {

    position: relative;

    width: 100%;
    min-height: 440px;

    overflow: hidden;

    background-image: url("../assets/images/cta-background.png");

    background-repeat: no-repeat;

    /* IMPORTANT */
    background-size: cover;

    background-position: center center;

    isolation: isolate;
}


/* LIGHT OVERLAY */

.dlx-cta-overlay {

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.94) 34%,
            rgba(255,255,255,.70) 52%,
            rgba(255,255,255,.22) 72%,
            rgba(255,255,255,.03) 100%
        );
}


/* INNER */

.dlx-cta-inner {

    position: relative;

    width: min(1380px, calc(100% - 100px));

    min-height: 440px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    padding: 65px 0;
}


/* CONTENT */

.dlx-cta-content {

    width: 58%;

    position: relative;

    z-index: 3;
}


/* KICKER */

.dlx-cta-kicker {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

    color: #087c84;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2.8px;

    text-transform: uppercase;
}

.dlx-cta-kicker span {

    width: 12px;
    height: 12px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #08bbc3;

    box-shadow: 0 0 0 7px rgba(8,187,195,.10);
}

.dlx-cta-kicker i {

    width: 55px;
    height: 1px;

    background: rgba(8,124,132,.45);
}


/* HEADING */

.dlx-cta-content h2 {

    max-width: 700px;

    margin: 0;

    color: #082d33;

    font-family: "Poppins", Arial, sans-serif;

    font-size: clamp(45px, 5vw, 72px);

    line-height: 1.02;

    letter-spacing: -3px;

    font-weight: 700;
}

.dlx-cta-content h2 strong {

    display: block;

    color: #08b8c0;

    font-weight: 700;
}


/* DESCRIPTION */

.dlx-cta-content p {

    max-width: 560px;

    margin: 22px 0 25px;

    color: #527282;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   BUTTONS
   NOW LEFT SIDE ONLY
========================================================= */

.dlx-cta-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    width: fit-content;
}


/* COMMON */

.dlx-cta-call,
.dlx-cta-whatsapp {

    min-height: 58px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 7px 9px 7px 8px;

    border-radius: 30px;

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* CALL */

.dlx-cta-call {

    min-width: 235px;

    background: #073f45;

    color: #fff;

    box-shadow:
        0 12px 30px rgba(0,50,55,.18);
}

.dlx-cta-call:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(0,50,55,.25);
}


/* WHATSAPP */

.dlx-cta-whatsapp {

    min-width: 190px;

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

    color: #082d33;

    border: 1px solid rgba(7,61,67,.18);

    box-shadow:
        0 10px 28px rgba(0,50,55,.10);

    backdrop-filter: blur(10px);
}

.dlx-cta-whatsapp:hover {

    transform: translateY(-3px);

    background: #fff;
}


/* ICON */

.dlx-cta-icon {

    width: 44px;
    height: 44px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #08bec6;

    color: #fff;

    font-size: 16px;
}

.dlx-cta-whatsapp .dlx-cta-icon {

    background: #20b95a;
}


/* TEXT */

.dlx-cta-call span:nth-child(2),
.dlx-cta-whatsapp span:nth-child(2) {

    display: flex;

    flex-direction: column;

    gap: 2px;

    white-space: nowrap;
}

.dlx-cta-call small,
.dlx-cta-whatsapp small {

    font-size: 8px;

    letter-spacing: 1.4px;

    opacity: .65;

    font-weight: 600;
}

.dlx-cta-call span:nth-child(2) {

    font-size: 13px;

    font-weight: 600;
}

.dlx-cta-whatsapp span:nth-child(2) {

    font-size: 13px;

    font-weight: 600;
}


/* ARROW */

.dlx-cta-call > i,
.dlx-cta-whatsapp > i {

    width: 32px;
    height: 32px;

    display: flex;

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

    margin-left: auto;

    border-radius: 50%;

    font-size: 10px;

    transition: transform .3s ease;
}

.dlx-cta-call > i {

    background: rgba(255,255,255,.10);
}

.dlx-cta-whatsapp > i {

    background: #08bec6;

    color: #fff;
}

.dlx-cta-call:hover > i,
.dlx-cta-whatsapp:hover > i {

    transform: rotate(45deg);
}


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

@media (max-width: 900px) {

    .dlx-cta-inner {

        width: calc(100% - 60px);
    }

    .dlx-cta-content {

        width: 65%;
    }

    .dlx-cta-content h2 {

        font-size: 52px;
    }

    .dlx-cta-actions {

        flex-wrap: wrap;
    }

}


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

@media (max-width: 700px) {

    .dlx-cta-section {

        min-height: auto;

        background-position: 68% center;
    }


    .dlx-cta-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.97) 0%,
                rgba(255,255,255,.94) 48%,
                rgba(255,255,255,.72) 75%,
                rgba(255,255,255,.30) 100%
            );
    }


    .dlx-cta-inner {

        width: calc(100% - 36px);

        min-height: auto;

        padding: 55px 0 65px;

        align-items: flex-start;
    }


    .dlx-cta-content {

        width: 100%;
    }


    .dlx-cta-content h2 {

        font-size: clamp(38px, 10vw, 52px);

        letter-spacing: -2px;
    }


    .dlx-cta-content p {

        font-size: 14px;

        max-width: 480px;
    }


    .dlx-cta-actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }


    .dlx-cta-call,
    .dlx-cta-whatsapp {

        width: 100%;

        min-width: 0;
    }

}


/* SMALL MOBILE */

@media (max-width: 420px) {

    .dlx-cta-inner {

        width: calc(100% - 28px);

        padding: 45px 0 55px;
    }


    .dlx-cta-content h2 {

        font-size: 37px;
    }


    .dlx-cta-kicker {

        font-size: 9px;

        letter-spacing: 2px;
    }

}



/* CTA ARROW - FORCE VISIBLE */
.dlx-cta-call > i,
.dlx-cta-whatsapp > i {

    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;

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

    margin-left: auto !important;

    border-radius: 50% !important;

    font-family: Arial, sans-serif !important;
    font-style: normal !important;

    font-size: 18px !important;
    font-weight: 400 !important;

    line-height: 1 !important;

    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;

    z-index: 10 !important;
}


/* Hide FA icon rendering */
.dlx-cta-call > i::before,
.dlx-cta-whatsapp > i::before {

    content: "↗" !important;

    font-family: Arial, sans-serif !important;

    font-size: 18px !important;
    font-weight: 500 !important;

    line-height: 1 !important;
}


/* CALL ARROW */
.dlx-cta-call > i {

    background: rgba(255,255,255,.14) !important;

    color: #ffffff !important;
}


/* WHATSAPP ARROW */
.dlx-cta-whatsapp > i {

    background: #08bec6 !important;

    color: #ffffff !important;
}


/* HOVER */
.dlx-cta-call:hover > i,
.dlx-cta-whatsapp:hover > i {

    transform: rotate(45deg);

}

/* =========================================================
   FINAL PREMIUM OVERRIDES
========================================================= */
.header nav a{font-size:13.5px;letter-spacing:.05px;}
.header nav{gap:68px;}
.nav-cta{font-size:13px;padding:15px 23px;}
.menu{font-size:25px;line-height:1;cursor:pointer;padding:8px;}
.float{right:20px;bottom:22px;gap:10px;}
.float a{width:56px;height:56px;border-radius:50%;font-size:20px;text-decoration:none;display:grid;place-items:center;}
.float a:first-child{background:#08b9b5;}
.float a:last-child{background:#18bd61;}
.float i{line-height:1;}
.float small,.float strong{display:none!important;}
@media(max-width:820px){
 .nav-wrap{height:76px;} .brand,.brand img{width:132px;height:62px;}
 .header nav{top:76px;padding:18px 20px 22px;gap:0;border-top:1px solid rgba(5,40,39,.08);}
 .header nav a{width:100%;padding:13px 4px;font-size:14px;border-bottom:1px solid rgba(5,40,39,.07);}
 .header nav a:last-child{border-bottom:0;} .header nav a:after{display:none;}
 .menu{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;}
}
@media(max-width:480px){.float{right:14px;bottom:16px;}.float a{width:50px;height:50px;font-size:18px;}}

/* Testimonials carousel */
.vx3-testimonial-grid{display:flex!important;flex-wrap:nowrap!important;gap:24px!important;overflow:hidden!important;padding:8px 2px 30px!important;transition:transform .7s cubic-bezier(.22,.61,.36,1);}
.vx3-testimonial-card{flex:0 0 calc((100% - 48px)/3)!important;width:calc((100% - 48px)/3)!important;min-width:0!important;box-sizing:border-box;}
.vx3-testimonial-extra-cards{display:none!important;}
.vx3-testimonials-bottom{margin-top:6px;}
.vx3-slider-dots span{cursor:pointer;transition:.3s ease;}
.vx3-slider-dots span.active{width:26px!important;border-radius:999px!important;}
.vx3-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:44px;height:44px;border-radius:50%;border:1px solid #c3dddd;background:rgba(255,255,255,.96);color:#073c40;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 25px rgba(0,50,50,.08);transition:.3s ease;}
.vx3-carousel-arrow:hover{background:#08b9b5;color:#fff;border-color:#08b9b5;}
.vx3-carousel-prev{left:-22px;} .vx3-carousel-next{right:-22px;}
@media(max-width:1050px){.vx3-testimonial-card{flex-basis:calc((100% - 24px)/2)!important;width:calc((100% - 24px)/2)!important;}}
@media(max-width:700px){
 .vx3-testimonials-container{width:calc(100% - 32px)!important;}
 .vx3-testimonials-heading h2{font-size:44px!important;letter-spacing:-2px!important;}
 .vx3-testimonial-card{flex-basis:100%!important;width:100%!important;}
 .vx3-testimonial-grid{gap:0!important;}
 .vx3-testimonials-header{gap:26px!important;}
 .vx3-trust-block{width:100%;box-sizing:border-box;}
 .vx3-carousel-arrow{display:none;}
}

/* 3D Explorer framing */
.dl-explorer-section{overflow:hidden!important;}
.dl-explorer-visual{overflow:visible!important;}
#modelCanvas2{touch-action:none!important;overflow:visible!important;}
@media(min-width:901px){.dl-explorer-visual{height:660px!important;min-height:660px!important;}}
@media(max-width:900px){.dl-explorer-visual{height:590px!important;min-height:590px!important;}}
@media(max-width:600px){.dl-explorer-visual{height:520px!important;min-height:520px!important;margin-top:0!important;}.dl-explorer-content{padding-top:42px!important;}}

/* =========================================================
   DYNAMIC LIFTS — PREMIUM PRODUCTS MEGA MENU
========================================================= */
.header,
.header .nav-wrap,
.header nav,
.mega-item { overflow: visible; }

.mega-item {
    position: static;
    height: 100%;
    display: flex;
    align-items: center;
}

.mega-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 10px 0;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: relative;
}

.mega-trigger i {
    font-size: 9px;
    transition: transform .25s ease;
}

.mega-item.open .mega-trigger i,
.mega-item:hover .mega-trigger i {
    transform: rotate(180deg);
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 10px);
    width: min(1180px, calc(100vw - 40px));
    background: rgba(255,255,255,.985);
    color: #4c5658;
    border: 1px solid rgba(6, 54, 53, .09);
    border-top: 2px solid #06b8ae;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 26px 70px rgba(0, 35, 35, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index: 999;
}

.mega-item:hover > .mega-menu,
.mega-item.open > .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.mega-menu::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    width: 16px;
    height: 16px;
    background: #fff;
    border-left: 1px solid rgba(6, 54, 53, .09);
    border-top: 1px solid rgba(6, 54, 53, .09);
    transform: translateX(-50%) rotate(45deg);
    z-index: -1;
}

.mega-tabs {
    width: 240px;
    position: absolute;
    inset: 0 auto 0 0;
    border-right: 1px solid #e3e9e8;
    background: #fff;
    border-radius: 0 0 0 16px;
    padding-top: 2px;
}

.mega-tab {
    width: 100%;
    min-height: 62px;
    padding: 17px 18px;
    border: 0;
    border-bottom: 1px solid #e7eceb;
    background: transparent;
    color: #72797a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    transition: .2s ease;
}

.mega-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
}

.mega-tab i {
    font-size: 10px;
    opacity: 0;
    transform: translateX(-4px);
    transition: .2s ease;
}

.mega-tab:hover,
.mega-tab.active {
    color: #04afa6;
    background: #f8fbfb;
}

.mega-tab.active::before { background: #06b8ae; }
.mega-tab.active i { opacity: 1; transform: none; }

.mega-panels {
    margin-left: 240px;
    min-height: 335px;
    padding: 22px 26px 26px;
}

.mega-panel {
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 22px;
    align-items: start;
}

.mega-panel.active { display: grid; }

.mega-col {
    min-width: 0;
}

.mega-col h4 {
    margin: 0 0 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e8ecec;
    position: relative;
    color: #354044;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.mega-col h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 50px;
    height: 2px;
    background: #06b8ae;
}

.mega-col .mega-subhead {
    margin-top: 23px;
}

.mega-col a {
    display: block;
    padding: 7px 0;
    border-bottom: 1px solid #eef1f0;
    color: #72797a;
    font-size: 12.5px;
    line-height: 1.35;
    transition: color .2s ease, padding-left .2s ease;
}

.mega-col a:last-child { border-bottom: 0; }
.mega-col a:hover { color: #00a69d; padding-left: 5px; }

/* Desktop nav spacing after Products was introduced */
@media(min-width:821px) {
    .header nav { align-items: center; }
    .header nav > a { display: inline-flex; align-items: center; }
}

/* =========================================================
   MOBILE FULL-WIDTH NAV + PRODUCT ACCORDION
========================================================= */
@media(max-width:820px) {
    .header .nav-wrap {
        height: 76px;
        padding: 0 16px;
    }

    .header nav {
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        overflow-x: hidden;
        display: none;
        padding: 0;
        gap: 0;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        color: #102326;
        border-top: 1px solid rgba(5,40,39,.08);
        box-shadow: 0 22px 45px rgba(0,0,0,.13);
    }

    .header nav.open { display: flex; }

    .header nav > a {
        width: 100%;
        min-height: 54px;
        padding: 16px 20px;
        border-bottom: 1px solid #edf1f0;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 700;
    }

    .header nav > a:after { display: none; }

    .mega-item {
        width: 100%;
        height: auto;
        display: block;
        border-bottom: 1px solid #edf1f0;
    }

    .mega-trigger {
        width: 100%;
        min-height: 54px;
        padding: 16px 20px;
        justify-content: space-between;
        color: #102326;
        font-size: 14px;
        font-weight: 700;
    }

    .mega-trigger i { font-size: 10px; }

    .mega-menu {
        position: static;
        width: 100%;
        max-width: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #f7faf9;
        transition: none;
    }

    .mega-item.open > .mega-menu {
        display: block;
        transform: none;
    }

    .mega-menu::before { display: none; }

    .mega-tabs {
        position: static;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-right: 0;
        border-bottom: 1px solid #dfe7e5;
        border-radius: 0;
        padding: 0;
    }

    .mega-tab {
        min-height: 50px;
        padding: 13px 14px;
        font-size: 11px;
        line-height: 1.25;
        border-bottom: 0;
        border-right: 1px solid #dfe7e5;
    }

    .mega-tab:last-child { border-right: 0; }

    .mega-tab i { display: none; }

    .mega-panels {
        margin-left: 0;
        min-height: 0;
        padding: 18px 18px 20px;
    }

    .mega-panel.active { grid-template-columns: 1fr; gap: 18px; }

    .mega-panel .mega-col { padding-bottom: 2px; }

    .mega-col h4 { font-size: 12px; }
    .mega-col a { font-size: 12px; padding: 7px 0; }

    .nav-cta { display: none; }
}

@media(max-width:420px) {
    .mega-tab { font-size: 10px; padding-left: 10px; padding-right: 10px; }
    .mega-panels { padding-left: 15px; padding-right: 15px; }
}
@media(max-width:820px){
    .mega-item:not(.open):hover > .mega-menu { display:none; }
}

/* =========================================================
   FINAL HOME POLISH — TESTIMONIALS + 3D EXPLORER
========================================================= */

/* Keep testimonial carousel inside one clean viewport. */
.vx3-testimonial-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:24px!important;
    overflow:visible!important;
    width:100%!important;
    padding:8px 2px 30px!important;
    transition:transform .75s cubic-bezier(.22,.61,.36,1)!important;
    will-change:transform;
}

.vx3-testimonial-card{
    flex:0 0 calc((100% - 48px)/3)!important;
    width:calc((100% - 48px)/3)!important;
    min-width:0!important;
    box-sizing:border-box;
}

.vx3-testimonial-card:nth-child(n+4){
    display:flex!important;
}

.vx3-testimonials-bottom{
    margin-top:10px!important;
}

.vx3-slider-dots span{
    cursor:pointer;
    transition:width .3s ease,transform .3s ease,background .3s ease;
}

.vx3-slider-dots span.active{
    width:26px!important;
    border-radius:999px!important;
}

.vx3-carousel-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid rgba(7,83,95,.14);
    background:rgba(255,255,255,.96);
    color:#073c40;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(0,50,50,.10);
    transition:all .3s ease;
}

.vx3-carousel-arrow:hover{
    background:#08b9b5;
    color:#fff;
    border-color:#08b9b5;
    transform:translateY(-50%) scale(1.06);
}

.vx3-carousel-prev{left:8px;}
.vx3-carousel-next{right:8px;}

@media(max-width:1050px){
    .vx3-testimonial-card{
        flex-basis:calc((100% - 24px)/2)!important;
        width:calc((100% - 24px)/2)!important;
    }
}

@media(max-width:700px){
    .vx3-testimonials-container{
        width:calc(100% - 30px)!important;
    }
    .vx3-testimonial-grid{
        gap:0!important;
        padding:8px 0 26px!important;
    }
    .vx3-testimonial-card{
        flex-basis:100%!important;
        width:100%!important;
    }
    .vx3-carousel-arrow{display:none!important;}
}

/* 3D explorer: give the procedural elevator more breathing room so it
   stays centered during rotation instead of clipping at the top. */
#elevator-3d .model-frame{
    overflow:hidden!important;
}

#elevator-3d #modelCanvas2{
    display:block!important;
    width:100%!important;
    height:100%!important;
}

@media(min-width:601px){
    #elevator-3d .model-frame{height:600px!important;}
}

@media(max-width:600px){
    #elevator-3d .model-frame{
        height:500px!important;
        min-height:500px!important;
    }
}


/* =========================================================
   FINAL RESPONSIVE POLISH — HOME PAGE
   3D explorer removed; testimonials + mobile nav stabilized.
========================================================= */
:root{--dl-accent:#08b9c3;--dl-deep:#063d46;}

/* Keep the brand accent identical across every section heading. */
.hero h1 em,
.vx2-building-title span,
.vx3-testimonials-heading h2 strong,
.vx4-cert-title span,
.dlx-cta-content h2 strong,
.dl-solutions h2 span,
.section-head h2 strong,
.contact h2 strong{
    color:var(--dl-accent)!important;
}

/* Testimonials: clean, readable cards on every carousel page. */
.vx3-testimonials{overflow:hidden!important;}
.vx3-testimonials-container{overflow:visible!important;}
.vx3-testimonial-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:24px!important;
    width:100%!important;
    overflow:visible!important;
    padding:8px 2px 30px!important;
    margin:0!important;
    transition:transform .72s cubic-bezier(.22,.61,.36,1)!important;
    will-change:transform;
}
.vx3-testimonial-card{
    flex:0 0 calc((100% - 48px)/3)!important;
    width:calc((100% - 48px)/3)!important;
    min-width:0!important;
    max-width:none!important;
    min-height:325px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
}
.vx3-review{
    width:100%!important;
    max-width:none!important;
    min-height:110px!important;
    margin:34px 0 30px!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
}
.vx3-card-footer{margin-top:auto!important;}
.vx3-testimonial-extra-cards{display:none!important;}
.vx3-testimonials-bottom{margin-top:12px!important;}
.vx3-carousel-arrow{display:grid!important;}
.vx3-carousel-prev{left:-22px!important;}
.vx3-carousel-next{right:-22px!important;}

/* Full-screen mobile navigation. */
@media(max-width:820px){
    html,body{overflow-x:hidden!important;}
    .header{z-index:10000!important;}
    .header .nav-wrap{height:76px!important;min-height:76px!important;}
    .header nav{
        position:fixed!important;
        top:76px!important;
        left:0!important;
        right:0!important;
        bottom:0!important;
        width:100vw!important;
        height:calc(100dvh - 76px)!important;
        max-height:none!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
        z-index:9999!important;
        background:#fff!important;
        padding:0 0 28px!important;
        box-shadow:0 20px 50px rgba(0,30,35,.18)!important;
    }
    .header nav.open{display:flex!important;}
    .header nav > a{
        min-height:58px!important;
        padding:17px 22px!important;
        font-size:16px!important;
        line-height:1.2!important;
    }
    .mega-trigger{
        min-height:58px!important;
        padding:17px 22px!important;
        font-size:16px!important;
    }
    .mega-menu{max-height:none!important;overflow:visible!important;}
    .mega-tabs{grid-template-columns:1fr 1fr!important;}
    .mega-tab{min-height:54px!important;font-size:12px!important;}
    .mega-panels{padding:20px 22px 28px!important;}
    .mega-panel.active{gap:22px!important;}
    .mega-col h4{font-size:13px!important;}
    .mega-col a{font-size:13px!important;padding:8px 0!important;}
    .menu{position:relative;z-index:10001!important;}

    .vx3-testimonials-container{width:calc(100% - 30px)!important;}
    .vx3-testimonials-heading h2{font-size:42px!important;line-height:1.02!important;letter-spacing:-1.8px!important;}
    .vx3-testimonial-grid{gap:0!important;padding:8px 0 28px!important;}
    .vx3-testimonial-card{
        flex:0 0 100%!important;
        width:100%!important;
        min-height:330px!important;
        padding:26px!important;
        border-radius:20px!important;
    }
    .vx3-review{font-size:17px!important;line-height:1.55!important;min-height:115px!important;}
    .vx3-carousel-arrow{display:none!important;}
    .vx3-slider-line{width:42px!important;}
}

@media(max-width:420px){
    .header nav > a,.mega-trigger{font-size:15px!important;}
    .vx3-testimonials-heading h2{font-size:36px!important;}
    .vx3-testimonial-card{padding:22px!important;}
    .vx3-review{font-size:16px!important;}
}

/* =========================================================
   FINAL DYNAMIC LIFTS POLISH
========================================================= */
:root{
  --dl-accent:#08b9c3;
  --teal:#08b9c3;
  --teal2:#08b9c3;
  --dl-deep:#063d46;
}

/* One accent language everywhere */
.kicker,.eyebrow,.dl-eyebrow,.vx3-testimonials-kicker,
.dl3d-kicker,.hero-proof b,
.hero h1 em,.section h2 strong,.about h2 strong,.building-section h2 strong,
.doors h2 strong,.spares h2 strong,.model-section h2 strong,.testimonials h2 strong,
.chennai h2 strong,.faq h2 strong,.contact h2 strong,
.vx2-building-title span,.vx3-testimonials-heading h2 strong,.vx4-cert-title span,
.dlx-cta-content h2 strong,.dl-solutions h2 span{color:var(--dl-accent)!important;}

.btn,.nav-cta,.dl-view-btn,.vx2-building-btn,.dl3d-reset{--btn-accent:var(--dl-accent);}
.header nav a:after,.mega-col h4:after,.dlx-footer-column h3:after,.dlx-footer-contact h3:after{background:var(--dl-accent)!important;}

/* =========================================================
   3D EXPLORER — centered and safe on mobile
========================================================= */
.dl3d-final{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:#022f30;
  isolation:isolate;
}
.dl3d-final-bg{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(1,35,35,.97) 0%,rgba(1,35,35,.91) 42%,rgba(1,35,35,.55) 100%),
    url('../assets/images/3d-background.png') center/cover no-repeat;
}
.dl3d-final-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 50%,rgba(8,185,195,.18),transparent 34%);}
.dl3d-final-inner {
    width: min(1440px, calc(100% - 80px));
    margin: 0 auto;
    padding: 92px 0 82px;

    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% / 50% */
    align-items: center;
    gap: 40px;
}
.dl3d-final-copy{min-width:0;}
.dl3d-kicker{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:3px;color:var(--dl-accent);}
.dl3d-kicker i{width:8px;height:8px;border-radius:50%;background:var(--dl-accent);box-shadow:0 0 0 6px rgba(8,185,195,.1);}
.dl3d-kicker b{width:58px;height:1px;background:linear-gradient(90deg,var(--dl-accent),transparent);}
.dl3d-final-copy h2{font-family:Manrope,sans-serif;font-size:clamp(48px,5vw,76px);line-height:.95;letter-spacing:-4px;margin:18px 0 24px;color:#fff;}
.dl3d-final-copy h2 strong{color:var(--dl-accent);font-weight:800;}
.dl3d-final-copy>p{max-width:570px;color:rgba(225,245,242,.72);font-size:15px;line-height:1.8;margin:0;}
.dl3d-actions{display:flex;align-items:center;gap:22px;margin-top:30px;}
.dl3d-reset{border:0;border-radius:999px;padding:14px 21px;background:var(--dl-accent);color:#062d31;font-weight:800;font-size:12px;cursor:pointer;box-shadow:0 12px 30px rgba(8,185,195,.18);}
.dl3d-reset:hover{background:#09c8d0;transform:translateY(-2px);}
.dl3d-reset span{margin-left:8px;}
.dl3d-hints{display:flex;flex-direction:column;gap:6px;color:rgba(222,243,240,.62);font-size:10px;line-height:1.4;}
.dl3d-features{display:grid;grid-template-columns:repeat(3,1fr);margin-top:52px;border-top:1px solid rgba(255,255,255,.11);border-bottom:1px solid rgba(255,255,255,.09);}
.dl3d-features>div{padding:20px 18px 20px 0;display:flex;flex-direction:column;gap:5px;min-width:0;}
.dl3d-features>div+div{padding-left:18px;border-left:1px solid rgba(255,255,255,.09);}
.dl3d-features small{font-size:9px;color:var(--dl-accent);font-weight:800;letter-spacing:1px;}
.dl3d-features strong{font-size:12px;color:#fff;}
.dl3d-features span{font-size:9px;color:rgba(220,240,237,.52);}
.dl3d-final-stage-wrap{min-width:0;}
.dl3d-stage-top,.dl3d-caption{display:flex;justify-content:space-between;align-items:center;color:rgba(168,218,214,.62);font-size:8px;letter-spacing:2px;padding:0 6px 10px;font-weight:700;}
.dl3d-final-stage{position:relative;width:100%;height:610px;border:1px solid rgba(167,235,228,.20);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.035);box-shadow:inset 0 0 80px rgba(0,220,210,.05),0 30px 80px rgba(0,0,0,.16);}
.dl3d-final-stage:before{content:"";position:absolute;inset:18px;border:1px solid rgba(180,235,230,.06);border-radius:24px;pointer-events:none;}
.dl3d-live{position:absolute;z-index:4;left:24px;top:24px;padding:9px 13px;border-radius:999px;background:rgba(0,30,30,.62);border:1px solid rgba(140,226,219,.12);font-size:8px;letter-spacing:1px;color:#9cd9d4;}
.dl3d-live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dl-accent);margin-right:6px;box-shadow:0 0 0 4px rgba(8,185,195,.08);}
.dl3d-live b{color:#fff;margin-left:8px;}
#modelCanvas2{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;touch-action:none!important;}
.dl3d-loading{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;transition:.35s;}
.dl3d-loading.loaded{opacity:0;visibility:hidden;}
.dl3d-stage-bottom{position:absolute;z-index:4;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;gap:20px;color:rgba(170,220,216,.55);font-size:7px;letter-spacing:1.5px;pointer-events:none;}
.dl3d-caption{padding-top:10px;padding-bottom:0;}

/* =========================================================
   TESTIMONIALS — 3 desktop cards, no partial fourth card
========================================================= */
.vx3-testimonials{overflow:hidden!important;}
.vx3-testimonials-container{overflow:visible!important;}
.vx3-testimonial-grid{display:flex!important;flex-wrap:nowrap!important;gap:24px!important;overflow:visible!important;padding:8px 0 30px!important;margin:0!important;}
.vx3-testimonial-card{min-width:0!important;max-width:none!important;box-sizing:border-box!important;min-height:325px!important;display:flex!important;flex-direction:column!important;}
.vx3-review{width:100%!important;max-width:none!important;white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;}
.vx3-card-footer{margin-top:auto!important;}
.vx3-testimonial-extra-cards{display:none!important;}
.vx3-carousel-arrow{display:grid!important;position:absolute!important;top:50%!important;transform:translateY(-50%)!important;width:44px!important;height:44px!important;border-radius:50%!important;z-index:20!important;background:#fff!important;border:1px solid rgba(8,185,195,.22)!important;color:var(--dl-accent)!important;box-shadow:0 12px 28px rgba(0,60,65,.12)!important;place-items:center!important;cursor:pointer!important;}
.vx3-carousel-arrow:hover{background:var(--dl-accent)!important;border-color:var(--dl-accent)!important;color:#fff!important;transform:translateY(-50%) scale(1.06)!important;}
.vx3-carousel-prev{left:10px!important;}
.vx3-carousel-next{right:10px!important;}
.vx3-slider-dots button{border:0;background:#b9dfe2;width:8px;height:8px;border-radius:50%;padding:0;cursor:pointer;}
.vx3-slider-dots button.active{width:26px;border-radius:999px;background:var(--dl-accent);}

/* =========================================================
   MOBILE NAV — truly full viewport
========================================================= */
@media(max-width:820px){
  .header{z-index:10000!important;}
  .header .nav-wrap{height:76px!important;min-height:76px!important;padding:0 18px!important;}
  .brand,.brand img{width:132px!important;height:62px!important;}
  .menu{width:44px!important;height:44px!important;display:grid!important;place-items:center!important;font-size:25px!important;z-index:10002!important;}
  .header nav{position:fixed!important;top:76px!important;left:0!important;right:0!important;width:100vw!important;height:calc(100dvh - 76px)!important;max-height:none!important;margin:0!important;padding:0 0 40px!important;overflow-y:auto!important;overflow-x:hidden!important;display:none!important;flex-direction:column!important;align-items:stretch!important;background:#fff!important;color:#102326!important;border:0!important;border-top:1px solid #e7efee!important;box-shadow:none!important;}
  .header nav.open{display:flex!important;}
  .header nav>a{width:100%!important;min-height:64px!important;padding:20px 28px!important;display:flex!important;align-items:center!important;border-bottom:1px solid #e8efee!important;font-size:17px!important;font-weight:700!important;}
  .header nav>a:after{display:none!important;}
  .mega-item{width:100%!important;height:auto!important;display:block!important;border-bottom:1px solid #e8efee!important;}
  .mega-trigger{width:100%!important;min-height:64px!important;padding:20px 28px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;font-size:17px!important;color:#102326!important;}
  .mega-menu{position:static!important;transform:none!important;width:100%!important;max-width:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;display:none!important;background:#f7fbfb!important;}
  .mega-item.open>.mega-menu{display:block!important;}
  .mega-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;border-bottom:1px solid #e1ebea!important;}
  .mega-tab{min-height:54px!important;padding:12px 14px!important;font-size:11px!important;}
  .mega-panels{padding:20px 24px 30px!important;}
  .mega-panel.active{display:grid!important;grid-template-columns:1fr!important;gap:22px!important;}
  .mega-col{width:100%!important;}
  .mega-col h4{font-size:13px!important;margin:0 0 8px!important;}
  .mega-col a{font-size:13px!important;padding:9px 0!important;}
  .nav-cta{display:none!important;}

  /* 3D */
  .dl3d-final-inner{width:calc(100% - 28px);grid-template-columns:1fr;gap:34px;padding:68px 0 58px;}
  .dl3d-final-copy h2{font-size:42px;letter-spacing:-2.5px;line-height:.98;margin:16px 0 18px;}
  .dl3d-final-copy>p{font-size:14px;line-height:1.7;}
  .dl3d-actions{align-items:flex-start;gap:15px;margin-top:24px;flex-direction:column;}
  .dl3d-features{margin-top:30px;grid-template-columns:1fr;}
  .dl3d-features>div,.dl3d-features>div+div{padding:15px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.08);}
  .dl3d-features>div:last-child{border-bottom:0;}
  .dl3d-stage-top{font-size:7px;}
  .dl3d-final-stage{height:520px;border-radius:22px;}
  .dl3d-final-stage:before{inset:12px;border-radius:17px;}
  .dl3d-live{left:16px;top:16px;font-size:7px;padding:8px 10px;}
  .dl3d-stage-bottom{left:16px;right:16px;bottom:15px;font-size:6px;}
  .dl3d-caption{font-size:7px;}

  /* Testimonials */
  .vx3-testimonials-container{width:calc(100% - 28px)!important;}
  .vx3-testimonials-header{align-items:flex-start!important;flex-direction:column!important;gap:24px!important;margin-bottom:34px!important;}
  .vx3-testimonials-heading h2{font-size:38px!important;line-height:1.02!important;letter-spacing:-2px!important;}
  .vx3-testimonials-heading p{font-size:14px!important;line-height:1.65!important;}
  .vx3-trust-block{width:100%!important;}
  .vx3-testimonial-grid{gap:0!important;padding:6px 0 28px!important;}
  .vx3-testimonial-card{padding:24px!important;min-height:360px!important;border-radius:20px!important;}
  .vx3-card-top{gap:9px!important;}
  .vx3-review{font-size:16px!important;line-height:1.55!important;min-height:130px!important;margin:28px 0 24px!important;}
  .vx3-carousel-arrow{width:38px!important;height:38px!important;}
  .vx3-carousel-prev{left:8px!important;}
  .vx3-carousel-next{right:8px!important;}
}
@media(max-width:420px){
  .dl3d-final-copy h2{font-size:37px;}
  .dl3d-final-stage{height:500px;}
  .vx3-testimonials-heading h2{font-size:34px!important;}
  .vx3-testimonial-card{padding:21px!important;min-height:350px!important;}
  .vx3-review{font-size:15px!important;min-height:120px!important;}
}

/* =========================================================
   FINAL MOBILE FIX — FULLSCREEN NAV + LIFT ENGINEERING VISUAL
========================================================= */
@media (max-width:820px){
  /* Full viewport mobile navigation */
  .header{z-index:10000!important;}
  .header .nav-wrap{
    position:relative!important;
    z-index:10003!important;
    height:76px!important;
    min-height:76px!important;
    padding:0 18px!important;
    background:rgba(255,255,255,.94)!important;
    backdrop-filter:blur(16px)!important;
  }
  .brand{position:relative!important;z-index:10004!important;width:132px!important;}
  .brand img{width:132px!important;height:62px!important;object-fit:contain!important;}
  .menu{
    position:relative!important;
    z-index:10005!important;
    width:46px!important;
    height:46px!important;
    display:grid!important;
    place-items:center!important;
    margin-left:auto!important;
    border:0!important;
    border-radius:12px!important;
    background:var(--dl-accent,#08b9b5)!important;
    color:#fff!important;
    font-size:21px!important;
    box-shadow:0 10px 25px rgba(0,100,100,.16)!important;
  }

  .header nav{
    position:fixed!important;
    inset:0!important;
    top:0!important;
    width:100vw!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    padding:96px 0 30px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    background:
      radial-gradient(circle at 85% 10%,rgba(8,185,181,.16),transparent 30%),
      linear-gradient(145deg,#022e2c 0%,#031d1e 58%,#061415 100%)!important;
    color:#fff!important;
    border:0!important;
    box-shadow:none!important;
  }
  .header nav.open{display:flex!important;}
  .header nav>a{
    width:100%!important;
    min-height:70px!important;
    padding:20px 28px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    color:#fff!important;
    font-size:18px!important;
    font-weight:700!important;
    letter-spacing:-.2px!important;
  }
  .header nav>a:hover{color:var(--dl-accent,#08b9b5)!important;}
  .header nav>a:after{display:none!important;}

  .mega-item{
    width:100%!important;
    height:auto!important;
    display:block!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    background:transparent!important;
  }
  .mega-trigger{
    width:100%!important;
    min-height:70px!important;
    padding:20px 28px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    border:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:18px!important;
    font-weight:700!important;
    cursor:pointer!important;
  }
  .mega-trigger i{color:var(--dl-accent,#08b9b5)!important;font-size:13px!important;transition:transform .25s ease!important;}
  .mega-item.open .mega-trigger i{transform:rotate(180deg)!important;}

  .mega-menu{
    position:static!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:rgba(255,255,255,.045)!important;
    display:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  .mega-item.open>.mega-menu{display:block!important;}
  .mega-tabs{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    background:rgba(0,0,0,.10)!important;
  }
  .mega-tab{
    min-height:58px!important;
    padding:13px 12px!important;
    border:0!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
    background:transparent!important;
    color:rgba(255,255,255,.62)!important;
    font-size:11px!important;
    font-weight:700!important;
    text-align:left!important;
  }
  .mega-tab.active{color:var(--dl-accent,#08b9b5)!important;background:rgba(8,185,181,.07)!important;}
  .mega-tab i{display:none!important;}
  .mega-panels{padding:20px 28px 30px!important;}
  .mega-panel.active{display:grid!important;grid-template-columns:1fr!important;gap:22px!important;}
  .mega-col{width:100%!important;}
  .mega-col h4{font-size:12px!important;color:var(--dl-accent,#08b9b5)!important;margin:0 0 7px!important;}
  .mega-col h4:after{background:var(--dl-accent,#08b9b5)!important;}
  .mega-col a{font-size:14px!important;color:rgba(255,255,255,.82)!important;padding:8px 0!important;border-bottom:1px solid rgba(255,255,255,.06)!important;}
  .mega-col a:hover{color:#fff!important;padding-left:0!important;}
  .nav-cta{display:none!important;}

  /* Spare-parts / lift engineering visual: keep complete lift inside viewport */
  .dl-explorer-visual{
    width:100%!important;
    height:570px!important;
    min-height:570px!important;
    margin:0!important;
    overflow:hidden!important;
    position:relative!important;
  }
  .dl-lift-wrapper{
    inset:18px 0 58px!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 44px!important;
    overflow:visible!important;
  }
  .dl-lift-image{
    width:100%!important;
    max-width:370px!important;
    height:100%!important;
    max-height:500px!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
    animation:dlLiftFloatMobile 5.5s ease-in-out infinite!important;
  }
  .dl-explorer-visual:hover .dl-lift-image{transform:none!important;}

  /* Keep callout labels fully visible instead of hanging outside viewport */
  .dl-callout{z-index:60!important;}
  .dl-callout-box{
    width:82px!important;
    min-width:82px!important;
    padding:7px 7px!important;
    border-radius:7px!important;
    background:rgba(0,35,37,.92)!important;
  }
  .dl-callout-box strong{font-size:7px!important;line-height:1.25!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .dl-callout-box span{display:none!important;}
  .dl-callout-line{width:8px!important;min-width:8px!important;}
  .dl-callout-point{width:20px!important;height:20px!important;font-size:8px!important;}
  .dl-callout-control{left:3px!important;top:19%!important;}
  .dl-callout-traction{right:3px!important;top:23%!important;}
  .dl-callout-cabin{left:3px!important;top:43%!important;}
  .dl-callout-guide{right:3px!important;top:48%!important;}
  .dl-callout-door{left:3px!important;top:66%!important;}
  .dl-callout-shaft{right:3px!important;top:70%!important;}

  .dl-component-wrapper{
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    bottom:8px!important;
    width:auto!important;
    margin:0!important;
    padding:9px 38px!important;
    z-index:70!important;
  }
}

@keyframes dlLiftFloatMobile{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-7px,0);}
}

/* =========================================================
   FINAL MOBILE + TESTIMONIAL POLISH
   - Full-screen premium mobile navigation
   - Keep the engineering lift centered and fully visible
   - 3 testimonial cards visible on desktop
   - Manual testimonial carousel (no forced auto slide)
   - Common Dynamic Lifts teal accent
========================================================= */
:root{--dl-accent:#08b9c3!important;--teal:#08b9c3!important;}

/* Keep all primary accents consistent */
.btn.primary,.nav-cta,.dl-view-btn,.vx2-building-btn,.dl3d-reset,
.dlx-cta-call,.dlx-cta-whatsapp{background:var(--dl-accent)!important;}
.header nav a:after,.mega-col h4:after,.dlx-footer-column h3:after,
.dlx-footer-contact h3:after{background:var(--dl-accent)!important;}
.dl-solutions h2 span,.vx2-building-title span,.vx3-testimonials-heading h2 strong,
.vx4-cert-title span{color:var(--dl-accent)!important;}

/* Desktop testimonial viewport */
@media(min-width:821px){
  .vx3-testimonials{overflow:hidden!important;}
  .vx3-testimonials-container{overflow:visible!important;}
  .vx3-testimonial-grid{width:100%!important;}
  .vx3-testimonial-card{min-height:330px!important;}
  .vx3-carousel-arrow{top:50%!important;}
  .vx3-carousel-prev{left:18px!important;}
  .vx3-carousel-next{right:18px!important;}
}

@media(max-width:820px){
  /* ---------- MOBILE HEADER ---------- */
  .header{
    z-index:100000!important;
    background:#fff!important;
    color:#102326!important;
    border-bottom:1px solid rgba(8,55,58,.08)!important;
    box-shadow:0 8px 25px rgba(0,35,38,.08)!important;
  }
  .header .nav-wrap{
    height:72px!important;
    min-height:72px!important;
    padding:0 16px!important;
    max-width:none!important;
    background:#fff!important;
  }
  .brand,.brand img{width:128px!important;height:58px!important;object-fit:contain!important;}
  .menu{
    width:44px!important;height:44px!important;
    border-radius:12px!important;
    background:transparent!important;
    color:#09282b!important;
    box-shadow:none!important;
    font-size:24px!important;
    border:1px solid rgba(8,40,43,.10)!important;
  }

  /* Full mobile navigation — no narrow centered panel */
  .header nav,
  .header nav.open{
    position:fixed!important;
    top:72px!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    height:calc(100dvh - 72px)!important;
    max-height:none!important;
    padding:10px 0 28px!important;
    margin:0!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:
      radial-gradient(circle at 90% 4%,rgba(8,185,195,.18),transparent 28%),
      linear-gradient(145deg,#062f31 0%,#042326 52%,#071719 100%)!important;
    color:#fff!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:0 20px 60px rgba(0,0,0,.30)!important;
  }
  .header nav.open{display:flex!important;}
  .header nav:before{
    content:"PRODUCTS • LIFTS • DOOR SYSTEMS • SPARE PARTS";
    display:block!important;
    padding:12px 22px 10px!important;
    color:rgba(255,255,255,.42)!important;
    font-size:8px!important;
    font-weight:800!important;
    letter-spacing:2px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }
  .header nav>a{
    width:100%!important;
    min-height:62px!important;
    padding:18px 24px!important;
    display:flex!important;
    align-items:center!important;
    color:#fff!important;
    font-size:17px!important;
    font-weight:700!important;
    border-bottom:1px solid rgba(255,255,255,.09)!important;
    background:transparent!important;
  }
  .header nav>a:hover{color:var(--dl-accent)!important;background:rgba(255,255,255,.035)!important;}
  .mega-item{width:100%!important;border-bottom:1px solid rgba(255,255,255,.09)!important;background:transparent!important;}
  .mega-trigger{
    width:100%!important;min-height:62px!important;padding:18px 24px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    border:0!important;background:transparent!important;color:#fff!important;
    font-size:17px!important;font-weight:700!important;
  }
  .mega-trigger i{color:var(--dl-accent)!important;font-size:12px!important;}
  .mega-menu{
    position:static!important;width:100%!important;max-width:none!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;transform:none!important;opacity:1!important;visibility:visible!important;
    background:rgba(0,0,0,.13)!important;display:none!important;
  }
  .mega-item.open>.mega-menu{display:block!important;}
  .mega-tabs{grid-template-columns:1fr 1fr!important;background:rgba(8,185,195,.04)!important;}
  .mega-tab{min-height:54px!important;padding:11px 12px!important;color:rgba(255,255,255,.58)!important;font-size:10px!important;}
  .mega-tab.active{color:var(--dl-accent)!important;background:rgba(8,185,195,.08)!important;}
  .mega-panels{padding:18px 24px 25px!important;}
  .mega-panel.active{grid-template-columns:1fr!important;gap:18px!important;}
  .mega-col h4{font-size:11px!important;color:var(--dl-accent)!important;margin-bottom:5px!important;}
  .mega-col a{font-size:13px!important;color:rgba(255,255,255,.78)!important;padding:7px 0!important;border-bottom:1px solid rgba(255,255,255,.055)!important;}
  .nav-cta{display:none!important;}

  /* ---------- ENGINEERING / SPARE PARTS SECTION ---------- */
  .dl-explorer-section{overflow:hidden!important;}
  .dl-explorer-container{width:100%!important;max-width:none!important;}
  .dl-explorer-content{padding:38px 20px 14px!important;}
  .dl-explorer-title{font-size:36px!important;line-height:1.02!important;letter-spacing:-1.6px!important;}
  .dl-explorer-description{font-size:13px!important;line-height:1.65!important;max-width:100%!important;}
  .dl-spare-parts-list{gap:6px 8px!important;}
  .dl-spare-parts-list span{font-size:11px!important;line-height:1.35!important;}
  .dl-explorer-actions{margin-top:18px!important;}
  .dl-explore-btn{padding:13px 18px!important;font-size:11px!important;}

  .dl-explorer-visual{
    width:100%!important;
    height:570px!important;
    min-height:570px!important;
    margin:0!important;
    overflow:hidden!important;
    position:relative!important;
  }
  .dl-lift-wrapper{
    position:absolute!important;
    inset:10px 0 62px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 38px!important;
    overflow:visible!important;
  }
  .dl-lift-image{
    position:relative!important;
    width:100%!important;
    max-width:370px!important;
    height:100%!important;
    max-height:505px!important;
    object-fit:contain!important;
    object-position:center center!important;
    margin:auto!important;
    transform:none!important;
    animation:dlLiftFloatMobileFinal 5.5s ease-in-out infinite!important;
  }
  .dl-explorer-visual:hover .dl-lift-image{transform:none!important;}

  .dl-callout{z-index:60!important;}
  .dl-callout-box{
    width:82px!important;min-width:82px!important;
    padding:7px 6px!important;border-radius:7px!important;
    background:rgba(0,35,37,.94)!important;
    border-color:rgba(8,185,195,.65)!important;
  }
  .dl-callout-box strong{font-size:7px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .dl-callout-box span{display:none!important;}
  .dl-callout-line{width:8px!important;min-width:8px!important;}
  .dl-callout-point{width:20px!important;height:20px!important;font-size:8px!important;}
  .dl-callout-control{left:3px!important;top:20%!important;}
  .dl-callout-traction{right:3px!important;top:23%!important;}
  .dl-callout-cabin{left:3px!important;top:43%!important;}
  .dl-callout-guide{right:3px!important;top:48%!important;}
  .dl-callout-door{left:3px!important;top:66%!important;}
  .dl-callout-shaft{right:3px!important;top:70%!important;}

  .dl-component-wrapper{
    position:absolute!important;left:12px!important;right:12px!important;bottom:8px!important;
    width:auto!important;margin:0!important;padding:9px 38px!important;z-index:70!important;
  }
  .dl-component-list{gap:10px!important;overflow:hidden!important;}
  .dl-component-card{flex:0 0 120px!important;}
  .dl-component-image{height:62px!important;}
  .dl-component-card span{font-size:8px!important;}

  /* ---------- TESTIMONIALS ---------- */
  .vx3-testimonials{overflow:hidden!important;}
  .vx3-testimonials-container{width:calc(100% - 28px)!important;margin:0 auto!important;}
  .vx3-testimonials-header{gap:20px!important;margin-bottom:28px!important;}
  .vx3-testimonials-heading h2{font-size:38px!important;line-height:1.02!important;letter-spacing:-1.8px!important;}
  .vx3-testimonials-heading p{font-size:13px!important;line-height:1.65!important;max-width:100%!important;}
  .vx3-trust-block{width:100%!important;}
  .vx3-testimonial-grid{gap:0!important;padding:5px 0 28px!important;}
  .vx3-testimonial-card{padding:22px!important;min-height:330px!important;border-radius:20px!important;}
  .vx3-card-top{gap:7px!important;}
  .vx3-review{font-size:15px!important;line-height:1.55!important;min-height:112px!important;margin:25px 0 20px!important;}
  .vx3-card-footer{padding-top:14px!important;}
  .vx3-carousel-arrow{
    width:38px!important;height:38px!important;top:50%!important;
    transform:translateY(-50%)!important;z-index:50!important;
    background:#fff!important;border-color:rgba(8,185,195,.28)!important;
  }
  .vx3-carousel-prev{left:12px!important;}
  .vx3-carousel-next{right:12px!important;}

  /* ---------- FINAL 3D CANVAS SECTION ---------- */
  .dl3d-final{overflow:hidden!important;}
  .dl3d-final-inner{width:calc(100% - 28px)!important;grid-template-columns:1fr!important;gap:28px!important;padding:58px 0 48px!important;}
  .dl3d-final-copy h2{font-size:39px!important;line-height:.98!important;letter-spacing:-2px!important;}
  .dl3d-final-copy>p{font-size:13px!important;line-height:1.7!important;}
  .dl3d-final-stage-wrap{width:100%!important;min-width:0!important;}
  .dl3d-final-stage{height:480px!important;width:100%!important;border-radius:20px!important;overflow:hidden!important;}
  .dl3d-final-stage:before{inset:10px!important;border-radius:15px!important;}
  #modelCanvas2{width:100%!important;height:100%!important;}
}

@media(max-width:420px){
  .dl-explorer-content{padding-left:16px!important;padding-right:16px!important;}
  .dl-explorer-title{font-size:32px!important;}
  .dl-explorer-visual{height:540px!important;min-height:540px!important;}
  .dl-lift-wrapper{inset:5px 0 58px!important;padding:0 32px!important;}
  .dl-lift-image{max-width:340px!important;max-height:485px!important;}
  .dl-callout-box{width:76px!important;min-width:76px!important;}
  .vx3-testimonials-container{width:calc(100% - 22px)!important;}
  .vx3-testimonials-heading h2{font-size:34px!important;}
  .vx3-testimonial-card{padding:20px!important;min-height:325px!important;}
  .vx3-review{font-size:14px!important;min-height:105px!important;}
  .vx3-carousel-prev{left:8px!important;}
  .vx3-carousel-next{right:8px!important;}
  .dl3d-final-stage{height:450px!important;}
}

@keyframes dlLiftFloatMobileFinal{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-5px,0);}
}