:root {
        --navy: #014687;
        --navy-2: #074580;
        --navy-3: #014584;
        --gold: #f80001;
        --gold-light: #eb0102;
        --cream: #f3f0e9;
        --white: #fff;
        --text: #17212b;
        --muted: #65727e;
        --line: #dce1e4;
        --shadow: 0 25px 60px rgba(4, 18, 30, .12);
        --radius: 4px;
        --container: 1240px;
        --header-h: 86px
    }

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

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 100px
    }

    body {
        font-family: Inter, sans-serif;
        color: var(--text);
        background: #fff;
        line-height: 1.7;
        overflow-x: hidden
    }

    body.menu-open {
        overflow: hidden
    }

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

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

    button,
    input,
    select,
    textarea {
        font: inherit
    }

    .container {
        width: min(calc(100% - 40px), var(--container));
        margin: auto
    }

    .section {
        padding: 110px 0
    }

    .skip-link {
        position: fixed;
        left: 20px;
        top: -100px;
        z-index: 9999;
        background: #fff;
        padding: 12px 18px
    }

    .skip-link:focus {
        top: 20px
    }

    .page-loader {
        position: fixed;
        inset: 0;
        background: var(--navy);
        z-index: 9999;
        display: grid;
        place-items: center;
        transition: .5s
    }

    .page-loader.hidden {
        opacity: 0;
        visibility: hidden
    }

    .loader-mark {
        width: inherit;
        height: 80px;
        border: 1px solid rgba(255, 255, 255, .35);
        display: grid;
        place-items: center;
        color: var(--gold-light);
        font: 800 20px Manrope;
        animation: pulse 1.2s infinite
    }

    @keyframes pulse {
        50% {
            transform: scale(.88);
            opacity: .5
        }
    }

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

    .site-header {
        position: absolute;
        top: 48px;
        /* matches .topbar-inner height */
        left: 0;
        width: 100%;
        z-index: 1000;

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


    /* Navbar initially transparent */
    .site-header .navbar {
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
    }


    /* =========================================================
   FIXED HEADER AFTER SCROLL
========================================================= */

    .site-header.scrolled {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    .site-header.scrolled .navbar {
        background: rgba(1, 70, 135, .97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        box-shadow: 0 10px 35px rgba(0, 0, 0, .18);

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


    /* Optional logo resize after scroll */
    .site-header.scrolled .brand-logo {
        height: 54px;
    }


    /* Smooth logo transition */
    .brand-logo {
        transition: height .3s ease;
    }

    .topbar {
        background: var(--navy);
        color: #dce5ec;
        font-size: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .topbar-inner {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .topbar p i,
    .topbar a i {
        color: var(--gold);
        margin-right: 7px
    }

    .topbar-links {
        display: flex;
        gap: 24px
    }

    .navbar {
        transition: .35s;
        border-bottom: 1px solid rgba(255, 255, 255, .14)
    }

    .navbar-inner {
        height: var(--header-h);
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .site-header.scrolled .navbar {
        background: rgba(7, 19, 31, .96);
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .12)
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: 13px;
        color: #fff
    }

    .brand-logo {
        display: block;
        width: auto;
        height: 62px;
        max-width: 230px;
        object-fit: contain;
    }

    @media (max-width: 767px) {
        .brand-logo {
            height: 48px;
            max-width: 190px;
        }
    }

    .brand-symbol {
        width: 48px;
        height: 48px;
        border: 1px solid rgba(229, 196, 125, .6);
        display: grid;
        place-items: center;
        position: relative;
        transform: rotate(45deg)
    }

    .brand-symbol span {
        transform: rotate(-45deg);
        font: 800 21px Manrope;
        color: var(--gold-light)
    }

    .brand-copy {
        display: flex;
        flex-direction: column;
        line-height: 1.05
    }

    .brand-copy strong {
        font: 700 17px Manrope;
        letter-spacing: .2px
    }

    .brand-copy small {
        text-transform: uppercase;
        color: var(--gold-light);
        font-size: 11px;
        letter-spacing: 4px;
        margin-top: 7px
    }

    .nav-menu {
        display: flex;
        align-items: center;
        gap: 30px;
        color: #fff
    }

    .nav-link {
        font-size: 13px;
        font-weight: 600;
        position: relative;
        padding: 34px 0
    }

    .nav-link:after {
        content: "";
        height: 2px;
        width: 0;
        background: var(--gold);
        position: absolute;
        left: 0;
        bottom: 23px;
        transition: .3s
    }

    .nav-link:hover:after,
    .nav-link.active:after {
        width: 100%
    }

    .menu-toggle {
        display: none;
        border: 0;
        background: none;
        width: 34px
    }

    .menu-toggle span {
        display: block;
        height: 2px;
        background: white;
        margin: 7px 0;
        transition: .3s
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 15px 23px;
        border: 1px solid transparent;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: .2px;
        cursor: pointer;
        transition: .3s
    }

    .btn:hover {
        transform: translateY(-2px)
    }

    .btn-sm {
        padding: 12px 18px
    }

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

    .btn-gold:hover {
        background: var(--gold-light)
    }

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

    .btn-outline-light {
        border-color: rgba(255, 255, 255, .5);
        color: var(--gold);
    }

    .btn-outline-light:hover {
        background: #fff;
        color: var(--navy)
    }

    .hero {
        /* min-height: 860px; */
        height: 100vh;
        position: relative;
        color: #fff;
        display: flex;
        align-items: center
    }

    .hero-bg,
    .hero-overlay,
    .hero-grid-pattern {
        position: absolute;
        inset: 0
    }

    .hero-bg {
        background: url('../images/sreeramakrishnaelevators-banner.webp') center/cover no-repeat;
        transform: scale(1.02)
    }

    .hero-overlay {
        background: linear-gradient(90deg, rgba(5, 16, 27, .96) 0%, rgba(5, 16, 27, .78) 43%, rgba(5, 16, 27, .3) 80%)
    }

    .hero-grid-pattern {
        opacity: .07;
        background-image: linear-gradient(rgba(255, 255, 255, .45) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .45) 1px, transparent 1px);
        background-size: 80px 80px
    }

    .hero-content {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .hero-copy {
        max-width: 800px
    }

    .eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #9a6c22;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 2.3px;
        font-weight: 800;
        margin-bottom: 20px
    }

    .eyebrow span {
        display: inline-block;
        width: 35px;
        height: 1px;
        background: var(--gold)
    }

    .eyebrow.light {
        color: var(--gold-light)
    }

    .hero h1 {
        font: 700 clamp(40px, 6.4vw, 75px)/1.02 Manrope;
        letter-spacing: -3px
    }

    .hero h1 em {
        font-style: normal;
        color: var(--gold-light)
    }

    .hero-copy>p {
        max-width: 690px;
        color: #d4dce2;
        font-size: 18px;
        margin: 28px 0 38px
    }

    .hero-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap
    }

    .hero-side-card {
        width: 260px;
        background: rgba(8, 25, 39, .72);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, .18);
        padding: 30px;
        margin-bottom: 10px
    }

    .card-number {
        font: 800 42px Manrope;
        color: var(--gold-light);
        display: block
    }

    .hero-side-card strong {
        font: 700 18px Manrope
    }

    .hero-side-card p {
        font-size: 13px;
        color: #c6d0d7;
        margin: 12px 0 18px
    }

    .hero-side-card a {
        font-size: 12px;
        color: var(--gold-light);
        font-weight: 700
    }

    .hero-stats {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 3;
        border-top: 1px solid rgba(255, 255, 255, .16);
        background: rgba(6, 19, 31, .65);
        backdrop-filter: blur(10px)
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr)
    }

    .stats-grid article {
        padding: 24px 28px;
        border-right: 1px solid rgba(255, 255, 255, .15);
        display: flex;
        align-items: center;
        gap: 13px
    }

    .stats-grid article:first-child {
        border-left: 1px solid rgba(255, 255, 255, .15)
    }

    .stats-grid strong {
        font: 800 30px Manrope;
        color: var(--gold-light)
    }

    .stats-grid strong:after {
        content: "+"
    }

    .stats-grid article:nth-child(3) strong:after {
        content: "/7"
    }

    .stats-grid article:nth-child(4) strong:after {
        content: "%"
    }

    .stats-grid span {
        font-size: 12px;
        color: #d0d8df;
        text-transform: uppercase;
        letter-spacing: 1px
    }

    .about {
        background: #fff
    }

    .about-grid {
        display: grid;
        grid-template-columns: 1.02fr .98fr;
        gap: 100px;
        align-items: center
    }

    .about-visual {
        height: 620px;
        position: relative
    }

    .image-frame {
        overflow: hidden
    }

    .image-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .main-image {
        width: 76%;
        height: 570px
    }

    .floating-image {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 46%;
        height: 265px;
        border: 10px solid white;
        box-shadow: var(--shadow)
    }

    .experience-badge {
        position: absolute;
        right: 7%;
        top: 40px;
        background: var(--gold);
        width: 165px;
        height: 165px;
        color: var(--navy);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px
    }

    .experience-badge strong {
        font: 800 45px Manrope
    }

    .experience-badge span {
        font-size: 11px;
        text-transform: uppercase;
        font-weight: 800;
        line-height: 1.5
    }

    .about h2,
    .section-heading h2,
    .services h2,
    .quote-content h2,
    .contact h2,
    .testimonial-heading h2 {
        font: 700 clamp(38px, 4.2vw, 58px)/1.12 Manrope;
        letter-spacing: -1.8px
    }

    .about-copy .lead {
        font-size: 18px;
        color: #354652;
        margin: 27px 0 18px
    }

    .about-copy>p:not(.lead) {
        color: var(--muted)
    }

    .feature-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
        margin: 34px 0
    }

    .feature-list>div {
        display: flex;
        gap: 12px
    }

    .feature-list i {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #f2e7d2;
        color: #9f6e1d;
        font-size: 11px
    }

    .feature-list span {
        font-size: 13px;
        color: var(--muted)
    }

    .feature-list strong {
        display: block;
        color: var(--text);
        font: 700 14px Manrope;
        margin-bottom: 3px
    }

    .text-link {
        display: inline-flex;
        gap: 10px;
        color: #9b691b;
        font-weight: 800;
        font-size: 13px;
        border-bottom: 1px solid #d2b179;
        padding-bottom: 5px
    }

    .solutions {
        background: var(--cream)
    }

    .section-heading {
        max-width: 780px;
        margin-bottom: 55px
    }

    .section-heading.centered {
        text-align: center;
        margin-left: auto;
        margin-right: auto
    }

    .section-heading.centered .eyebrow {
        justify-content: center
    }

    .section-heading p {
        color: var(--muted);
        font-size: 16px;
        margin-top: 18px
    }

    .solution-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 410px;
        gap: 18px
    }

    .solution-card {
        position: relative;
        overflow: hidden;
        color: white
    }

    .solution-card.large {
        grid-column: span 2
    }

    .solution-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .7s
    }

    .solution-card:hover img {
        transform: scale(1.06)
    }

    .solution-shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 25%, rgba(4, 17, 29, .93))
    }

    .solution-content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 30px
    }

    .solution-content>span {
        font: 700 11px Manrope;
        color: var(--gold-light);
        letter-spacing: 2px
    }

    .solution-content h3 {
        font: 700 23px Manrope;
        margin: 7px 0
    }

    .solution-content p {
        font-size: 13px;
        color: #d8e0e5;
        max-width: 430px
    }

    .solution-content a {
        display: inline-block;
        margin-top: 15px;
        font-size: 12px;
        font-weight: 800;
        color: var(--gold-light)
    }

    .services {
        background: var(--navy);
        color: #fff;
        position: relative;
        overflow: hidden
    }

    .services:after {
        content: "";
        position: absolute;
        width: 550px;
        height: 550px;
        border: 1px solid rgba(255, 255, 255, .05);
        border-radius: 50%;
        left: -250px;
        bottom: -300px
    }

    .services-layout {
        display: grid;
        grid-template-columns: .78fr 1.22fr;
        gap: 80px;
        align-items: center
    }

    .services-intro p {
        color: #b8c4cd;
        margin: 24px 0 35px
    }

    .services-grid {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .service-item {
        padding: 38px;
        border-left: 1px solid rgba(255, 255, 255, .12);
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        position: relative
    }

    .service-item:nth-child(3),
    .service-item:nth-child(4) {
        border-bottom: 0
    }

    .service-item>span {
        position: absolute;
        right: 28px;
        top: 28px;
        color: #688095;
        font: 700 12px Manrope
    }

    .service-icon {
        font-size: 27px;
        color: var(--gold-light);
        margin-bottom: 25px
    }

    .service-item h3 {
        font: 700 18px Manrope;
        margin-bottom: 12px
    }

    .service-item p {
        font-size: 13px;
        color: #9fb0bd
    }

    .section-heading.split {
        max-width: none;
        display: grid;
        grid-template-columns: 1fr .8fr;
        gap: 100px;
        align-items: end
    }

    .process-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line)
    }

    .process-step {
        padding: 40px 28px;
        border-right: 1px solid var(--line);
        position: relative
    }

    .process-step:first-child {
        border-left: 1px solid var(--line)
    }

    .process-step>span {
        position: absolute;
        right: 20px;
        top: 20px;
        color: #bdc4c9;
        font: 700 12px Manrope
    }

    .process-icon {
        font-size: 28px;
        color: #a77627;
        margin-bottom: 60px
    }

    .process-step h3 {
        font: 700 18px Manrope;
        margin-bottom: 12px
    }

    .process-step p {
        font-size: 13px;
        color: var(--muted)
    }

    .projects {
        background: #f7f8f8
    }

    .project-grid {
        display: grid;
        grid-template-columns: 1.1fr .9fr 1fr;
        grid-template-rows: 330px 330px;
        gap: 18px
    }

    .project-card {
        position: relative;
        overflow: hidden;
        grid-column: span 1
    }

    .project-card.tall {
        grid-row: span 2
    }

    .project-card:last-child {
        grid-column: span 2
    }

    .project-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .7s
    }

    .project-card:hover img {
        transform: scale(1.05)
    }

    .project-overlay {
        position: absolute;
        inset: 0;
        padding: 28px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: linear-gradient(180deg, transparent 30%, rgba(5, 17, 27, .9));
        color: #fff
    }

    .project-overlay span {
        color: var(--gold-light);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 800
    }

    .project-overlay h3 {
        font: 700 20px Manrope;
        margin: 6px 0
    }

    .project-overlay p {
        font-size: 12px;
        color: #ccd5dc
    }

    .maintenance-cta {
        background: var(--gold);
        padding: 65px 0px;
        color: var(--white);
    }

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

    .cta-kicker {
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 10px;
        font-weight: 800
    }

    .maintenance-inner h2 {
        font: 700 clamp(32px, 4vw, 48px) Manrope;
        margin: 7px 0
    }

    .maintenance-inner p {
        color: var(--white);
    }

    .cta-actions {
        display: flex;
        align-items: center;
        gap: 25px;
        flex-shrink: 0
    }

    .phone-link {
        display: flex;
        gap: 12px;
        align-items: center
    }

    .phone-link i {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(7, 19, 31, .25)
    }

    .phone-link span {
        font-size: 11px
    }

    .phone-link strong {
        display: block;
        font-size: 15px
    }

    .testimonial-layout {
        display: grid;
        grid-template-columns: .72fr 1.28fr;
        gap: 90px;
        align-items: center
    }

    .testimonial-heading h2 {
        margin-bottom: 35px
    }

    .testimonial-controls {
        display: flex;
        gap: 10px
    }

    .testimonial-controls button {
        width: 48px;
        height: 48px;
        border: 1px solid var(--line);
        background: white;
        cursor: pointer;
        transition: .3s
    }

    .testimonial-controls button:hover {
        background: var(--navy);
        color: #fff
    }

    .testimonial-slider {
        background: var(--cream);
        min-height: 430px;
        padding: 55px;
        position: relative
    }

    .testimonial {
        display: none
    }

    .testimonial.active {
        display: block;
        animation: fade .5s
    }

    @keyframes fade {
        from {
            opacity: 0;
            transform: translateX(15px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .quote-icon {
        font: 700 90px/1 Georgia;
        color: var(--gold);
        height: 65px
    }

    .stars {
        color: #b47a1c;
        letter-spacing: 5px;
        font-size: 12px
    }

    .testimonial blockquote {
        font: 500 21px/1.7 Manrope;
        color: #2c3942;
        margin: 25px 0 35px
    }

    .client {
        display: flex;
        align-items: center;
        gap: 14px
    }

    .client-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: var(--navy);
        color: var(--gold-light);
        display: grid;
        place-items: center;
        font-weight: 800
    }

    .client strong {
        font: 700 14px Manrope;
        display: block
    }

    .client span {
        font-size: 11px;
        color: var(--muted)
    }

    .quote-section {
        background: linear-gradient(110deg, var(--navy), #102c41);
        color: white
    }

    .quote-grid {
        display: grid;
        grid-template-columns: .82fr 1.18fr;
        gap: 85px;
        align-items: center
    }

    .quote-content p {
        color: #b7c5cf;
        margin: 25px 0
    }

    .quote-content ul {
        list-style: none;
        display: grid;
        gap: 10px
    }

    .quote-content li {
        font-size: 13px
    }

    .quote-content li i {
        color: var(--gold-light);
        margin-right: 10px
    }

    .quote-form {
        background: #fff;
        color: var(--text);
        padding: 42px
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px
    }

    .quote-form label {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .7px;
        display: block;
        margin-bottom: 17px
    }

    .quote-form input,
    .quote-form select,
    .quote-form textarea {
        display: block;
        width: 100%;
        border: 1px solid #d9dfe3;
        background: #fafafa;
        padding: 14px 15px;
        margin-top: 7px;
        outline: none;
        font-size: 13px;
        text-transform: none;
        letter-spacing: normal
    }

    .quote-form input:focus,
    .quote-form select:focus,
    .quote-form textarea:focus {
        border-color: var(--gold);
        background: #fff
    }

    .consent {
        display: flex !important;
        align-items: center;
        gap: 9px;
        text-transform: none !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        color: var(--muted)
    }

    .consent input {
        width: auto;
        margin: 0
    }

    .form-submit {
        width: 100%
    }

    .form-status {
        font-size: 12px;
        margin-top: 12px
    }

    .form-status.success {
        color: #1b7c43
    }

    .form-status.error {
        color: #b32424
    }

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center
    }

    .contact-info>p {
        color: var(--muted);
        margin: 22px 0 30px
    }

    .contact-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px
    }

    .contact-list>a,
    .contact-list>div {
        display: flex;
        gap: 13px;
        align-items: flex-start
    }

    .contact-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border: 1px solid #d8dee2;
        color: #a16f20;
        display: grid;
        place-items: center
    }

    .contact-list small {
        display: block;
        color: var(--muted);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1.2px
    }

    .contact-list strong {
        font: 700 13px/1.5 Manrope
    }

    .map-card {
        min-height: 460px;
        background: linear-gradient(rgba(6, 20, 32, .82), rgba(6, 20, 32, .82)), url('https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?auto=format&fit=crop&w=1000&q=80') center/cover;
        display: grid;
        place-items: center;
        text-align: center;
        color: white
    }

    .map-placeholder {
        max-width: 360px;
        padding: 30px
    }

    .map-placeholder i {
        font-size: 45px;
        color: var(--gold-light)
    }

    .map-placeholder h3 {
        font: 700 25px Manrope;
        margin: 15px 0 8px
    }

    .map-placeholder p {
        font-size: 13px;
        color: #c4d0d8;
        margin-bottom: 22px
    }

    .footer {
        background: #050e16;
        color: #aebbc5;
        padding-top: 75px
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 55px;
        padding-bottom: 55px
    }

    .footer-brand {
        margin-bottom: 28px
    }

    .footer-about p,
    .footer-grid>div>p {
        font-size: 13px
    }

    .footer-grid h3 {
        color: #fff;
        font: 700 14px Manrope;
        margin-bottom: 22px
    }

    .footer-grid>div>a:not(.brand) {
        display: block;
        font-size: 12px;
        margin: 10px 0;
        transition: .3s
    }

    .footer-grid>div>a:hover {
        color: var(--gold-light)
    }

    .social-links {
        display: flex;
        gap: 9px;
        margin-top: 24px
    }

    .social-links a {
        width: 38px;
        height: 38px;
        display: grid !important;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .14)
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, .1);
        min-height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 11px
    }

    .footer-bottom div {
        display: flex;
        gap: 20px
    }

    .floating-whatsapp {
        position: fixed;
        z-index: 800;
        left: 22px;
        bottom: 22px;
        background: #20b75a;
        color: #fff;
        border-radius: 30px;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 13px 18px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
        font-size: 12px;
        font-weight: 800
    }

    .floating-whatsapp i {
        font-size: 20px
    }

    .back-to-top {
        position: fixed;
        z-index: 800;
        right: 22px;
        bottom: 22px;
        width: 45px;
        height: 45px;
        background: var(--navy);
        color: #fff;
        border: 0;
        opacity: 0;
        visibility: hidden;
        cursor: pointer;
        transition: .3s
    }

    .back-to-top.show {
        opacity: 1;
        visibility: visible
    }

    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: .8s ease
    }

    .reveal.visible {
        opacity: 1;
        transform: none
    }

    .delay-1 {
        transition-delay: .12s
    }

    .delay-2 {
        transition-delay: .24s
    }

    .delay-3 {
        transition-delay: .36s
    }

    @media(max-width:1050px) {
        .topbar {
            display: none
        }

        .nav-menu {
            position: fixed;
            inset: 86px 0 0 0;
            background: var(--navy);
            padding: 35px 28px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0;
            transform: translateX(100%);
            transition: .35s
        }

        .nav-menu.open {
            transform: none
        }

        .nav-link {
            padding: 15px 0;
            width: 100%;
            border-bottom: 1px solid rgba(255, 255, 255, .1)
        }

        .nav-link:after {
            display: none
        }

        .nav-quote {
            margin-top: 24px
        }

        .menu-toggle {
            display: block
        }

        .hero-side-card {
            display: none
        }

        .about-grid,
        .services-layout,
        .testimonial-layout,
        .quote-grid,
        .contact-grid {
            grid-template-columns: 1fr;
            gap: 60px
        }

        .about-copy {
            max-width: 760px
        }

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

        .solution-card.large {
            grid-column: span 2
        }

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

        .process-step:nth-child(2) {
            border-right: 1px solid var(--line)
        }

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

        .project-card.tall {
            grid-row: span 1
        }

        .project-card:last-child {
            grid-column: span 1
        }

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

        .footer-grid>div:last-child {
            grid-column: span 3
        }

        .maintenance-inner {
            align-items: flex-start;
            flex-direction: column
        }

        .section-heading.split {
            grid-template-columns: 1fr;
            gap: 20px
        }
    }

    @media(max-width:720px) {
        .container {
            width: min(calc(100% - 28px), var(--container))
        }

        .section {
            padding: 78px 0
        }

        .navbar-inner {
            height: 76px
        }

        .nav-menu {
            inset: 76px 0 0
        }

        .brand-symbol {
            width: 40px;
            height: 40px
        }

        .brand-copy strong {
            font-size: 14px
        }

        .brand-copy small {
            font-size: 9px
        }

        .hero-bg {
            background-image:
                url('../images/sreeramakrishnaelevators-responsive-banner.webp');

            background-repeat: no-repeat;

            background-size: cover;

            background-position: center top;
        }


        .hero {
            min-height: 790px;
            height: auto;
            padding: 160px 0 150px
        }

        .hero h1 {
            font-size: 47px;
            letter-spacing: -2px
        }

        .hero-copy>p {
            font-size: 15px
        }

        .hero-actions {
            flex-direction: column;
            align-items: stretch
        }

        .hero-stats {
            position: absolute
        }

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

        .stats-grid article {
            padding: 13px 10px
        }

        .stats-grid article:nth-child(3) {
            border-left: 1px solid rgba(255, 255, 255, .15)
        }

        .stats-grid strong {
            font-size: 22px
        }

        .stats-grid span {
            font-size: 9px
        }

        .about-visual {
            height: 480px
        }

        .main-image {
            width: 88%;
            height: 440px
        }

        .floating-image {
            height: 190px
        }

        .experience-badge {
            width: 125px;
            height: 125px;
            right: 0;
            flex-direction: column;
        }

        .experience-badge strong {
            font-size: 32px
        }

        .feature-list,
        .contact-list,
        .form-row {
            grid-template-columns: 1fr
        }

        .solution-grid {
            grid-template-columns: 1fr;
            grid-auto-rows: 390px
        }

        .solution-card.large {
            grid-column: auto
        }

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

        .service-item {
            border-right: 1px solid rgba(255, 255, 255, .12)
        }

        .service-item:nth-child(3) {
            border-bottom: 1px solid rgba(255, 255, 255, .12)
        }

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

        .process-step {
            border-left: 1px solid var(--line)
        }

        .project-grid {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(4, 340px)
        }

        .project-card,
        .project-card:last-child {
            grid-column: auto
        }

        .maintenance-cta {
            padding: 50px 0
        }

        .cta-actions {
            align-items: flex-start;
            flex-direction: column
        }

        .testimonial-slider {
            padding: 35px 25px
        }

        .testimonial blockquote {
            font-size: 17px
        }

        .quote-form {
            padding: 26px 20px
        }

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

        .footer-about {
            grid-column: span 2
        }

        .footer-grid>div:last-child {
            grid-column: span 2
        }

        .footer-bottom {
            padding: 20px 0;
            flex-direction: column;
            gap: 8px;
            text-align: center
        }

        .floating-whatsapp span {
            display: none
        }

        .floating-whatsapp {
            width: 48px;
            height: 48px;
            padding: 0;
            justify-content: center
        }

        .reveal {
            transition-delay: 0s !important
        }
    }



    @media(max-width:1050px) {

        .topbar {
            display: none;
        }

        .navbar {
            position: relative;
            z-index: 1002;
        }

        .navbar-inner {
            position: relative;
            z-index: 1003;
        }

        .nav-menu {
            position: fixed;

            top: 86px;
            left: 0;
            right: 0;
            bottom: 0;

            width: 100vw;
            height: calc(100dvh - 86px);

            margin: 0;
            padding: 35px 28px;

            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0;

            background: var(--navy);

            color: #fff;

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

            transform: translateX(100%);
            transition: transform .35s ease;

            z-index: 1001;
        }

        .nav-menu.open {
            transform: translateX(0);
        }

        .nav-link {
            display: block;

            width: 100%;

            padding: 16px 0;

            color: #fff;

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

        .nav-link:after {
            display: none;
        }

        .nav-quote {
            margin-top: 25px;
        }

        .menu-toggle {
            display: block;

            position: relative;

            z-index: 1005;
        }

        .menu-toggle span {
            background: #fff;
        }

        .hero-side-card {
            display: none;
        }
    }

    @media(max-width:720px) {

        .navbar-inner {
            height: 76px;
        }

        .nav-menu {
            top: 76px;

            width: 100vw;
            height: calc(100dvh - 76px);

            padding: 28px 22px;
        }
    }

    /* ===== Multi-page premium additions ===== */
    .inner-header .navbar {
        background: rgba(7, 19, 31, .88);
        backdrop-filter: blur(12px)
    }

    .page-hero,
    .article-hero {
        position: relative;
        min-height: 560px;
        display: flex;
        align-items: flex-end;
        color: #fff;
        padding: 190px 0 95px;
        overflow: hidden;
        background: linear-gradient(90deg, rgba(5, 16, 27, .96), rgba(5, 16, 27, .72)), url('https://images.unsplash.com/photo-1626863905121-3b0c0ed7b94c?auto=format&fit=crop&w=2000&q=90') center/cover no-repeat
    }

    .page-hero:after,
    .article-hero:after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .08;
        background-image: linear-gradient(rgba(255, 255, 255, .45) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .45) 1px, transparent 1px);
        background-size: 80px 80px
    }

    .page-hero .container,
    .article-hero .container {
        position: relative;
        z-index: 2
    }

    .page-hero h1,
    .article-hero h1 {
        font: 700 clamp(48px, 6vw, 82px)/1.04 Manrope;
        letter-spacing: -3px;
        max-width: 930px
    }

    .page-hero h1 em,
    .article-hero h1 em {
        font-style: normal;
        color: var(--gold-light)
    }

    .page-hero p,
    .article-hero p {
        max-width: 700px;
        margin-top: 22px;
        color: #d4dce2;
        font-size: 17px
    }

    .about-page-hero {
        background-image: linear-gradient(90deg, rgba(5, 16, 27, .96), rgba(5, 16, 27, .63)), url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2000&q=88')
    }

    .services-page-hero {
        background-image: linear-gradient(90deg, rgba(5, 16, 27, .96), rgba(5, 16, 27, .58)), url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=2000&q=88')
    }

    .blog-page-hero {
        background-image: linear-gradient(90deg, rgba(5, 16, 27, .96), rgba(5, 16, 27, .62)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2000&q=88')
    }

    .contact-page-hero {
        background-image: linear-gradient(90deg, rgba(5, 16, 27, .97), rgba(5, 16, 27, .63)), url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2000&q=88')
    }

    .cream-section {
        background: var(--cream)
    }

    .home-service-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px
    }

    .premium-service-card {
        background: #fff;
        padding: 42px 34px;
        box-shadow: 0 15px 45px rgba(4, 18, 30, .07);
        position: relative;
        border-top: 3px solid transparent;
        transition: .35s
    }

    .premium-service-card:hover {
        transform: translateY(-8px);
        border-color: var(--gold);
        box-shadow: var(--shadow)
    }

    .premium-service-card>span {
        position: absolute;
        top: 25px;
        right: 28px;
        color: #c8cfd4;
        font: 700 12px Manrope
    }

    .premium-service-card>i {
        font-size: 35px;
        color: #a77424;
        margin-bottom: 28px
    }

    .premium-service-card h3 {
        font: 700 22px Manrope;
        margin-bottom: 12px
    }

    .premium-service-card p {
        font-size: 13px;
        color: var(--muted);
        min-height: 88px
    }

    .premium-service-card a {
        display: inline-flex;
        gap: 8px;
        margin-top: 20px;
        color: #9b691b;
        font-size: 12px;
        font-weight: 800
    }

    .value-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px
    }

    .value-card {
        background: #fff;
        padding: 36px 28px;
        border: 1px solid #e2e5e7
    }

    .value-card i {
        font-size: 30px;
        color: #a87526;
        margin-bottom: 24px
    }

    .value-card h3 {
        font: 700 19px Manrope;
        margin-bottom: 10px
    }

    .value-card p {
        font-size: 13px;
        color: var(--muted)
    }

    .service-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 90px;
        align-items: center
    }

    .service-detail-grid.reverse .service-detail-image {
        order: 2
    }

    .service-detail-image {
        height: 570px;
        overflow: hidden
    }

    .service-detail-image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .service-detail-copy {
        position: relative
    }

    .service-number {
        font: 800 86px/1 Manrope;
        color: #edf0f2;
        position: absolute;
        right: 0;
        top: -25px;
        z-index: -1
    }

    .service-detail-copy h2 {
        font: 700 clamp(38px, 4.4vw, 58px)/1.12 Manrope;
        letter-spacing: -1.7px
    }

    .service-detail-copy .lead {
        font-size: 18px;
        color: #344550;
        margin: 22px 0 14px
    }

    .service-detail-copy>p:not(.lead) {
        color: var(--muted)
    }

    .service-checks {
        list-style: none;
        display: grid;
        gap: 12px;
        margin: 28px 0 32px
    }

    .service-checks li {
        font-size: 13px
    }

    .service-checks i {
        color: #a36f1e;
        margin-right: 10px
    }

    .blog-preview {
        background: #fff
    }

    .blog-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px
    }

    .blog-card {
        background: #fff;
        border: 1px solid #e1e5e8;
        transition: .35s;
        overflow: hidden
    }

    .blog-card:hover {
        transform: translateY(-7px);
        box-shadow: var(--shadow)
    }

    .blog-card>img {
        width: 100%;
        height: 250px;
        object-fit: cover
    }

    .blog-card-body {
        padding: 28px
    }

    .blog-card-body small {
        color: #a16f20;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        font-size: 10px;
        font-weight: 800
    }

    .blog-card-body h3 {
        font: 700 21px/1.35 Manrope;
        margin: 10px 0 12px
    }

    .blog-card-body p {
        color: var(--muted);
        font-size: 13px
    }

    .blog-card-body a {
        display: inline-flex;
        gap: 8px;
        color: #9b691b;
        font-size: 12px;
        font-weight: 800;
        margin-top: 20px
    }

    .center-action {
        text-align: center;
        margin-top: 42px
    }

    .blog-list-grid .blog-card>img {
        height: 290px
    }

    .article-hero {
        min-height: 620px;
        align-items: flex-end;
        background-image: linear-gradient(90deg, rgba(5, 16, 27, .97), rgba(5, 16, 27, .72)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2000&q=88')
    }

    .article-hero h1 {
        max-width: 1000px
    }

    .article-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 70px;
        align-items: start
    }

    .article-main-image {
        width: 100%;
        height: 460px;
        object-fit: cover;
        margin-bottom: 35px
    }

    .article-content p {
        color: #576570;
        margin: 0 0 22px
    }

    .article-content .article-lead {
        font: 500 19px/1.8 Manrope;
        color: #283740
    }

    .article-content h2 {
        font: 700 29px Manrope;
        margin: 38px 0 14px
    }

    .article-note {
        display: flex;
        gap: 16px;
        background: var(--cream);
        padding: 24px;
        margin: 35px 0;
        border-left: 3px solid var(--gold)
    }

    .article-note i {
        color: #a26e1e;
        margin-top: 5px
    }

    .article-note p {
        margin: 0
    }

    .article-sidebar {
        position: sticky;
        top: 130px
    }

    .sidebar-card {
        border: 1px solid #e0e4e7;
        padding: 28px;
        margin-bottom: 22px
    }

    .sidebar-card h3 {
        font: 700 18px Manrope;
        margin-bottom: 14px
    }

    .sidebar-card p {
        font-size: 13px;
        color: var(--muted);
        margin-bottom: 20px
    }

    .sidebar-card>a:not(.btn) {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #edf0f2;
        font-size: 12px;
        font-weight: 700
    }

    .sidebar-card>a:not(.btn):hover {
        color: #9b691b
    }

    .quote-form textarea {
        resize: vertical
    }

    .contact .map-card {
        box-shadow: var(--shadow)
    }

    @media(max-width:1050px) {

        .home-service-cards,
        .value-grid {
            grid-template-columns: 1fr 1fr
        }

        .service-detail-grid {
            grid-template-columns: 1fr;
            gap: 45px
        }

        .service-detail-grid.reverse .service-detail-image {
            order: 0
        }

        .article-layout {
            grid-template-columns: 1fr
        }

        .article-sidebar {
            position: static;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px
        }

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

        .page-hero,
        .article-hero {
            min-height: 500px
        }
    }

    @media(max-width:720px) {

        .page-hero,
        .article-hero {
            min-height: 480px;
            padding: 145px 0 70px
        }

        .page-hero h1,
        .article-hero h1 {
            font-size: 44px;
            letter-spacing: -2px
        }

        .page-hero p,
        .article-hero p {
            font-size: 15px
        }

        .home-service-cards,
        .value-grid,
        .blog-grid,
        .article-sidebar {
            grid-template-columns: 1fr
        }

        .premium-service-card p {
            min-height: auto
        }

        .service-detail-image {
            height: 390px
        }

        .article-main-image {
            height: 300px
        }

        .blog-card>img,
        .blog-list-grid .blog-card>img {
            height: 230px
        }
    }

    /* Enquiry popup */
    .text-button {
        border: 0;
        background: none;
        padding: 0;
        color: var(--gold-light);
        font: 700 12px Inter;
        cursor: pointer
    }

    .text-button:hover {
        color: #fff
    }

    .nav-quote {
        font-family: Inter
    }

    .enquiry-launch-card {
        background: #fff;
        color: var(--text);
        padding: 46px;
        box-shadow: 0 25px 60px rgba(0, 0, 0, .18)
    }

    .enquiry-launch-card .launch-icon {
        width: 64px;
        height: 64px;
        display: grid;
        place-items: center;
        background: #f4ead7;
        color: #9a6a21;
        font-size: 25px;
        margin-bottom: 24px
    }

    .enquiry-launch-card h3 {
        font: 700 28px/1.25 Manrope;
        margin-bottom: 12px
    }

    .enquiry-launch-card p {
        color: var(--muted);
        margin-bottom: 26px
    }

    .enquiry-modal {
        position: fixed;
        inset: 0;
        z-index: 5000;
        display: grid;
        place-items: center;
        padding: 24px;
        opacity: 0;
        visibility: hidden;
        transition: .28s
    }

    .enquiry-modal.open {
        opacity: 1;
        visibility: visible
    }

    .enquiry-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(3, 10, 17, .78);
        backdrop-filter: blur(7px)
    }

    .enquiry-modal-dialog {
        position: relative;
        z-index: 1;
        width: min(1040px, 100%);
        max-height: calc(100vh - 48px);
        overflow: auto;
        background: #fff;
        display: grid;
        grid-template-columns: .82fr 1.18fr;
        box-shadow: 0 35px 100px rgba(0, 0, 0, .35);
        transform: translateY(18px) scale(.985);
        transition: .28s
    }

    .enquiry-modal.open .enquiry-modal-dialog {
        transform: none
    }

    .enquiry-modal-copy {
        background: linear-gradient(145deg, var(--navy), #12344b);
        color: #fff;
        padding: 48px 42px;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .enquiry-modal-copy h2 {
        font: 700 38px/1.12 Manrope;
        letter-spacing: -1.3px
    }

    .enquiry-modal-copy>p {
        color: #b9c7d0;
        margin: 20px 0 28px
    }

    .modal-service-points {
        display: grid;
        gap: 13px
    }

    .modal-service-points span {
        font-size: 13px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1)
    }

    .modal-service-points i {
        width: 26px;
        color: var(--gold-light)
    }

    .enquiry-modal-form-wrap {
        padding: 16px
    }

    .enquiry-modal .quote-form {
        box-shadow: none;
        padding: 28px
    }

    .enquiry-modal-close {
        position: absolute;
        right: 15px;
        top: 15px;
        z-index: 4;
        width: 42px;
        height: 42px;
        border: 0;
        background: #fff;
        color: var(--navy);
        box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
        cursor: pointer;
        font-size: 17px
    }

    .enquiry-modal-close:hover {
        background: var(--gold)
    }

    body.enquiry-open {
        overflow: hidden
    }

    .form-status:empty {
        display: none
    }

    .form-status.is-success {
        display: block;
        color: #16723c;
        background: #edf8f1;
        padding: 10px 12px
    }

    .form-status.is-error {
        display: block;
        color: #a52a2a;
        background: #fff0f0;
        padding: 10px 12px
    }

    .form-submit.is-loading {
        opacity: .7;
        pointer-events: none
    }

    .service-card-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-top: 20px
    }

    .service-card-actions .premium-service-card a,
    .service-card-actions a {
        margin-top: 0
    }

    .mini-enquiry {
        border: 0;
        background: none;
        color: var(--navy);
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
        border-bottom: 1px solid #cdb07a;
        padding: 0 0 4px
    }

    .mini-enquiry:hover {
        color: #9b691b
    }

    .detail-hero-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 32px
    }

    .service-installation-hero {
        background-image: linear-gradient(90deg, rgba(5, 16, 27, .96), rgba(5, 16, 27, .58)), url('https://images.unsplash.com/photo-1626863905121-3b0c0ed7b94c?auto=format&fit=crop&w=2000&q=90')
    }

    .service-servicing-hero {
        background-image: linear-gradient(90deg, rgba(5, 16, 27, .96), rgba(5, 16, 27, .58)), url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=2000&q=88')
    }

    .service-maintenance-hero {
        background-image: linear-gradient(90deg, rgba(5, 16, 27, .96), rgba(5, 16, 27, .6)), url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=2000&q=88')
    }

    .service-process-six {
        grid-template-columns: repeat(3, 1fr);
        flex-wrap: wrap
    }

    .service-process-six .process-step:nth-child(3) {
        border-right: 1px solid var(--line)
    }

    .service-process-six .process-step:nth-child(4) {
        border-left: 1px solid var(--line)
    }

    @media(max-width:900px) {
        .enquiry-modal-dialog {
            grid-template-columns: 1fr
        }

        .enquiry-modal-copy {
            padding: 34px 30px
        }

        .enquiry-modal-copy h2 {
            font-size: 31px
        }

        .modal-service-points {
            display: none
        }

        .service-process-six {
            grid-template-columns: 1fr 1fr
        }
    }

    @media(max-width:720px) {
        .enquiry-modal {
            padding: 10px
        }

        .enquiry-modal-dialog {
            max-height: calc(100vh - 20px)
        }

        .enquiry-modal-copy {
            padding: 30px 22px 20px
        }

        .enquiry-modal-copy .eyebrow {
            margin-bottom: 10px
        }

        .enquiry-modal-copy h2 {
            font-size: 25px
        }

        .enquiry-modal-copy>p {
            font-size: 12px;
            margin: 12px 0 0
        }

        .enquiry-modal-form-wrap {
            padding: 0
        }

        .enquiry-modal .quote-form {
            padding: 22px 18px
        }

        .enquiry-modal-close {
            right: 8px;
            top: 8px;
            width: 36px;
            height: 36px
        }

        .enquiry-launch-card {
            padding: 30px 24px
        }

        .service-card-actions {
            align-items: flex-start;
            flex-direction: column
        }

        .detail-hero-actions {
            flex-direction: column;
            align-items: stretch
        }

        .service-process-six {
            grid-template-columns: 1fr
        }

        .service-process-six .process-step {
            border-left: 1px solid var(--line);
            border-right: 1px solid var(--line)
        }
    }



    .brochure-edge-tab {
        position: fixed;
        top: 50%;
        right: 0;
        z-index: 9999;

        display: flex;
        align-items: center;
        gap: 12px;

        width: 245px;
        padding: 12px 14px 12px 12px;

        color: var(--white);
        background:
            linear-gradient(135deg,
                var(--navy) 0%,
                var(--navy-2) 55%,
                var(--navy-3) 100%);

        border: 1px solid rgba(248, 0, 1, 0.55);
        border-right: 0;
        border-radius: 18px 0 0 18px;

        text-decoration: none;

        box-shadow:
            -12px 16px 40px rgba(1, 70, 135, 0.28),
            inset 0 0 0 1px rgba(255, 255, 255, 0.05);

        overflow: hidden;

        transform:
            translateY(-50%) translateX(178px);

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

    .brochure-edge-tab::before {
        content: "";

        position: absolute;
        inset: 0;

        border-radius: inherit;

        background:
            linear-gradient(90deg,
                rgba(248, 0, 1, 0.2),
                rgba(248, 0, 1, 0.05) 45%,
                transparent 75%);

        pointer-events: none;
    }

    .brochure-edge-tab::after {
        content: "";

        position: absolute;
        top: -70px;
        left: -80px;

        width: 140px;
        height: 190px;

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

        transform: rotate(18deg);
        transition: left 0.7s ease;

        pointer-events: none;
    }

    .brochure-edge-tab:hover {
        color: var(--white);

        transform:
            translateY(-50%) translateX(0);

        border-color: var(--gold);

        box-shadow:
            -18px 22px 55px rgba(1, 70, 135, 0.35),
            0 0 28px rgba(248, 0, 1, 0.2);
    }

    .brochure-edge-tab:hover::after {
        left: 260px;
    }

    .brochure-edge-icon {
        position: relative;
        z-index: 1;

        flex: 0 0 46px;

        display: grid;
        place-items: center;

        width: 46px;
        height: 46px;

        color: var(--white);

        background:
            linear-gradient(145deg,
                var(--gold-light),
                var(--gold));

        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 13px;

        box-shadow:
            0 8px 18px rgba(248, 0, 1, 0.32);

        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
    }

    .brochure-edge-icon i {
        font-size: 19px;
    }

    .brochure-edge-tab:hover .brochure-edge-icon {
        transform: scale(1.06);

        box-shadow:
            0 10px 24px rgba(248, 0, 1, 0.42);
    }

    .brochure-edge-text {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;

        min-width: 130px;
    }

    .brochure-edge-text small {
        margin-bottom: 3px;

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

        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1.3px;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .brochure-edge-text strong {
        color: var(--white);

        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
    }

    .brochure-edge-arrow {
        position: relative;
        z-index: 1;

        display: grid;
        place-items: center;

        width: 32px;
        height: 32px;

        color: var(--white);

        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;

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

    .brochure-edge-arrow i {
        font-size: 12px;
    }

    .brochure-edge-tab:hover .brochure-edge-arrow {
        color: var(--white);
        background: var(--gold);
        border-color: var(--gold);

        transform: translateY(3px);
    }

    .brochure-edge-tab:hover .brochure-edge-icon i {
        animation: brochureFileMove 0.8s ease;
    }

    @keyframes brochureFileMove {
        0% {
            transform: translateY(0);
        }

        35% {
            transform: translateY(-4px);
        }

        70% {
            transform: translateY(3px);
        }

        100% {
            transform: translateY(0);
        }
    }

    @media (max-width: 767px) {
        .brochure-edge-tab {
            top: auto;
            right: 15px;
            bottom: 88px;

            width: 58px;
            height: 58px;
            padding: 6px;

            border: 1px solid rgba(248, 0, 1, 0.65);
            border-radius: 16px;

            box-shadow:
                0 14px 32px rgba(1, 70, 135, 0.28),
                0 5px 14px rgba(248, 0, 1, 0.18);

            transform: none;
        }

        .brochure-edge-tab:hover {
            transform: translateY(-4px);
        }

        .brochure-edge-tab::after {
            display: none;
        }

        .brochure-edge-icon {
            flex: 0 0 44px;

            width: 44px;
            height: 44px;

            border-radius: 12px;
        }

        .brochure-edge-text,
        .brochure-edge-arrow {
            display: none;
        }
    }


    /* ==========================================================
   VIDEO + FAQ SECTION
   NO BOOTSTRAP REQUIRED
========================================================== */


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

    .home-video-section {
        position: relative;
        padding: 100px 0 105px;
        overflow: hidden;
        background:
            radial-gradient(circle at 88% 10%,
                rgba(248, 0, 1, .045),
                transparent 30%),
            #f6f3ed;
    }


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

    .home-video-section .section-heading {
        margin-bottom: 45px;
    }

    .home-video-section .section-heading.split {
        display: grid;
        grid-template-columns: 1fr .72fr;
        gap: 70px;
        align-items: end;
    }

    .home-video-section .section-heading h2 {
        margin: 15px 0 0;

        color: var(--navy);

        font-size: clamp(38px, 4.5vw, 62px);
        line-height: 1.02;
        font-weight: 700;
        letter-spacing: -2px;
    }

    .home-video-section .section-heading>p {
        max-width: 500px;
        margin: 0;

        color: var(--muted);

        font-size: 15px;
        line-height: 1.8;
    }


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

    .home-video-wrapper {
        position: relative;

        width: 100%;

        margin: 0 auto;
    }


    /* ==========================================================
   VIDEO IMAGE AREA
========================================================== */

    .home-video-media {
        position: relative;

        width: 100%;
        height: 570px;

        overflow: hidden;

        background: #061c30;

        box-shadow:
            0 35px 80px rgba(2, 24, 44, .13);
    }

    .home-video-media>img {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;
        object-position: center;

        transform: scale(1.001);

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

    .home-video-media:hover>img {
        transform: scale(1.04);
    }


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

    .home-video-overlay {
        position: absolute;

        inset: 0;

        z-index: 1;

        pointer-events: none;

        background:
            linear-gradient(90deg,
                rgba(3, 20, 35, .78) 0%,
                rgba(3, 20, 35, .48) 38%,
                rgba(3, 20, 35, .15) 75%,
                rgba(3, 20, 35, .15) 100%);
    }


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

    .home-video-play {
        position: absolute;

        top: 50%;
        left: 50%;

        z-index: 5;

        width: 104px;
        height: 104px;

        padding: 0;

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

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

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

        border-radius: 50%;

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

        color: #fff;

        cursor: pointer;

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

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

    .home-video-play::before {
        content: "";

        position: absolute;

        inset: 10px;

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

        border-radius: 50%;
    }

    .home-video-play::after {
        content: "";

        position: absolute;

        inset: -13px;

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

        border-radius: 50%;
    }

    .home-video-play span {
        position: relative;

        z-index: 2;

        width: 60px;
        height: 60px;

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

        border-radius: 50%;

        background: var(--gold);

        color: #fff;

        font-size: 18px;

        box-shadow:
            0 13px 35px rgba(0, 0, 0, .3);

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

    .home-video-play span i {
        margin-left: 4px;
    }

    .home-video-play:hover {
        transform:
            translate(-50%, -50%) scale(1.07);

        border-color: #fff;

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

    .home-video-play:hover span {
        transform: scale(1.05);
    }


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

    .home-video-caption {
        position: absolute;

        left: 48px;
        bottom: 44px;

        z-index: 3;

        display: flex;
        align-items: flex-start;

        gap: 17px;

        color: #fff;
    }

    .video-caption-line {
        width: 45px;
        height: 2px;

        margin-top: 11px;

        flex-shrink: 0;

        background: var(--gold);
    }

    .home-video-caption small {
        display: block;

        margin-bottom: 7px;

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

        font-size: 10px;
        line-height: 1;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 1.7px;
    }

    .home-video-caption h3 {
        max-width: 480px;

        margin: 0;

        color: #fff;

        font-size: clamp(26px, 3vw, 37px);

        line-height: 1.08;

        font-weight: 650;

        letter-spacing: -.7px;
    }


    /* ==========================================================
   VIDEO INFO BAR
========================================================== */

    .home-video-info {
        position: relative;

        z-index: 6;

        width: calc(100% - 110px);

        margin:
            0 auto;

        padding:
            27px 34px;

        display: grid;

        grid-template-columns:
            auto 1fr;

        gap: 27px;

        align-items: center;

        background:
            linear-gradient(110deg,
                var(--navy) 0%,
                var(--navy-2) 100%);

        color: #fff;

        box-shadow:
            0 22px 55px rgba(1, 70, 135, .12);
    }

    .video-info-number {
        padding-right: 27px;

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

        color: var(--gold);

        font-size: 42px;

        line-height: 1;

        font-weight: 750;

        letter-spacing: -1px;
    }

    .home-video-info strong {
        display: block;

        margin-bottom: 5px;

        color: #fff;

        font-size: 15px;
        line-height: 1.3;

        font-weight: 650;
    }

    .home-video-info p {
        max-width: 700px;

        margin: 0;

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

        font-size: 12px;

        line-height: 1.65;
    }


    /* ==========================================================
   VIDEO MODAL
   NO BOOTSTRAP
========================================================== */

    .custom-video-modal {
        position: fixed;

        inset: 0;

        z-index: 999999;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 35px;

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

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        background: transparent;

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


    /* Open modal */

    .custom-video-modal.active {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }


    /* ==========================================================
   MODAL DARK BACKDROP
========================================================== */

    .custom-video-backdrop {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        background:
            rgba(0, 12, 23, .91);

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

        cursor: pointer;
    }


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

    .custom-video-box {
        position: relative;

        z-index: 2;

        width: min(1080px, 94vw);

        max-height: 90vh;

        opacity: 0;

        transform:
            translateY(25px) scale(.965);

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

    .custom-video-modal.active .custom-video-box {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }


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

    .custom-video-frame {
        position: relative;

        width: 100%;

        aspect-ratio: 16 / 9;

        overflow: hidden;

        background: #000;

        box-shadow:
            0 35px 90px rgba(0, 0, 0, .55);
    }

    .custom-video-frame iframe {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        display: block;

        border: 0;

        background: #000;
    }


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

    .custom-video-close {
        position: absolute;

        top: -21px;
        right: -21px;

        z-index: 6;

        width: 48px;
        height: 48px;

        padding: 0;

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

        border: 0;

        border-radius: 50%;

        background: var(--gold);

        color: #fff;

        font-size: 18px;

        cursor: pointer;

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

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

    .custom-video-close:hover {
        background: var(--gold-light);

        transform: rotate(90deg);
    }


    /* Disable body scroll while popup is open */

    body.video-modal-open {
        overflow: hidden;
    }


    /* ==========================================================
   FAQ SECTION
========================================================== */

    .home-faq-section {
        position: relative;

        padding:
            105px 0 110px;

        overflow: hidden;

        background:
            radial-gradient(circle at 90% 10%,
                rgba(248, 0, 1, .08),
                transparent 30%),
            linear-gradient(130deg,
                #03192d 0%,
                #014687 100%);

        color: #fff;
    }


    /* Background decorative circles */

    .home-faq-section::before {
        content: "";

        position: absolute;

        width: 530px;
        height: 530px;

        top: -320px;
        right: -180px;

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

        border-radius: 50%;

        pointer-events: none;
    }

    .home-faq-section::after {
        content: "";

        position: absolute;

        width: 360px;
        height: 360px;

        left: -175px;
        bottom: -220px;

        border-radius: 50%;

        background:
            rgba(248, 0, 1, .035);

        pointer-events: none;
    }


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

    .faq-layout {
        position: relative;

        z-index: 2;

        display: grid;

        grid-template-columns:
            minmax(330px, .82fr) minmax(500px, 1.18fr);

        gap: 85px;

        align-items: start;
    }


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

    .faq-intro {
        padding-top: 20px;
    }

    .home-faq-section .eyebrow {
        color:
            rgba(255, 255, 255, .65);
    }

    .home-faq-section .eyebrow span {
        background: var(--gold);
    }

    .home-faq-section .faq-intro h2 {
        margin:
            17px 0 20px;

        color: #fff;

        font-size:
            clamp(39px, 4.3vw, 57px);

        line-height: 1.03;

        font-weight: 700;

        letter-spacing:
            -1.8px;
    }

    .faq-intro>p {
        max-width: 455px;

        margin:
            0 0 34px;

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

        font-size: 14px;

        line-height: 1.8;
    }


    /* ==========================================================
   FAQ HELP CARD
========================================================== */

    .faq-help-card {
        position: relative;

        max-width: 430px;

        padding:
            23px;

        display: flex;

        align-items: center;

        gap: 18px;

        overflow: hidden;

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

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

    .faq-help-card::before {
        content: "";

        position: absolute;

        top: 0;
        left: 0;

        width: 42px;
        height: 3px;

        background: var(--gold);
    }

    .faq-help-icon {
        flex: 0 0 58px;

        width: 58px;
        height: 58px;

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

        background: var(--gold);

        color: #fff;

        font-size: 20px;
    }

    .faq-help-card small {
        display: block;

        margin-bottom: 4px;

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

        font-size: 9px;

        line-height: 1;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 1.3px;
    }

    .faq-help-card h4 {
        margin:
            0 0 7px;

        color: #fff;

        font-size: 16px;

        line-height: 1.3;

        font-weight: 600;
    }

    .faq-help-card .text-button {
        padding: 0;

        border: 0;

        background: transparent;

        color: var(--gold);

        font-family: inherit;

        font-size: 12px;

        font-weight: 650;

        cursor: pointer;
    }

    .faq-help-card .text-button i {
        margin-left: 5px;

        transition:
            transform .25s ease;
    }

    .faq-help-card .text-button:hover i {
        transform: translateX(5px);
    }


    /* ==========================================================
   FAQ ACCORDION WRAPPER
========================================================== */

    .premium-faq {
        width: 100%;

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


    /* ==========================================================
   FAQ ITEM
========================================================== */

    .faq-item {
        position: relative;

        width: 100%;

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


    /* ==========================================================
   FAQ QUESTION
========================================================== */

    .faq-question {
        width: 100%;

        min-height: 76px;

        margin: 0;

        padding:
            21px 0;

        display: grid;

        grid-template-columns:
            36px 1fr 32px;

        gap: 14px;

        align-items: center;

        border: 0;

        outline: 0;

        background: transparent;

        color: #fff;

        font-family: inherit;

        text-align: left;

        cursor: pointer;
    }

    .faq-question:focus {
        outline: none;
    }


    /* FAQ number */

    .faq-number {
        color:
            rgba(255, 255, 255, .34);

        font-size: 9px;

        line-height: 1;

        font-weight: 700;

        letter-spacing: 1px;

        transition:
            color .25s ease;
    }


    /* Question text */

    .faq-question-text {
        padding-right: 15px;

        color: #fff;

        font-size: 15px;

        line-height: 1.45;

        font-weight: 600;

        transition:
            color .25s ease;
    }


    /* ==========================================================
   FAQ PLUS ICON
========================================================== */

    .faq-toggle {
        position: relative;

        width: 30px;
        height: 30px;

        display: block;

        flex-shrink: 0;

        border-radius: 50%;

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

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

    .faq-toggle::before,
    .faq-toggle::after {
        content: "";

        position: absolute;

        top: 50%;
        left: 50%;

        background: #fff;

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

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

    .faq-toggle::before {
        width: 10px;
        height: 1px;
    }

    .faq-toggle::after {
        width: 1px;
        height: 10px;
    }


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

    .faq-question:hover .faq-question-text {
        color: var(--gold);
    }

    .faq-question:hover .faq-toggle {
        background:
            rgba(248, 0, 1, .65);
    }


    /* ==========================================================
   FAQ ACTIVE
========================================================== */

    .faq-item.active .faq-number,

    .faq-item.active .faq-question-text {
        color: var(--gold);
    }

    .faq-item.active .faq-toggle {
        background: var(--gold);
    }

    .faq-item.active .faq-toggle::after {
        opacity: 0;

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


    /* ==========================================================
   FAQ ANSWER
========================================================== */

    .faq-answer {
        max-height: 0;

        overflow: hidden;

        opacity: 0;

        visibility: hidden;

        transition:
            max-height .4s ease,
            opacity .3s ease,
            visibility .3s ease;
    }

    .faq-answer-inner {
        padding:
            0 48px 25px 50px;

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

        font-size: 13px;

        line-height: 1.78;
    }


    /* Active answer */

    .faq-item.active .faq-answer {
        opacity: 1;

        visibility: visible;
    }


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

    @media (max-width: 1199px) {

        .home-video-section {
            padding:
                85px 0 90px;
        }

        .home-video-media {
            height: 520px;
        }

        .faq-layout {
            gap: 60px;

            grid-template-columns:
                minmax(300px, .8fr) minmax(420px, 1.2fr);
        }

    }


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

    @media (max-width: 991px) {

        .home-video-section,
        .home-faq-section {
            padding:
                75px 0;
        }

        .home-video-section .section-heading.split {
            grid-template-columns: 1fr;

            gap: 20px;
        }

        .home-video-section .section-heading>p {
            max-width: 650px;
        }

        .home-video-media {
            height: 470px;
        }

        .home-video-info {
            width:
                calc(100% - 55px);
        }

        .faq-layout {
            grid-template-columns: 1fr;

            gap: 50px;
        }

        .faq-intro {
            padding-top: 0;
        }

        .faq-intro>p {
            max-width: 650px;
        }

        .faq-help-card {
            max-width: 540px;
        }

    }


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

    @media (max-width: 767px) {

        .home-video-section,
        .home-faq-section {
            padding:
                60px 0;
        }


        /* Heading */

        .home-video-section .section-heading {
            margin-bottom: 30px;
        }

        .home-video-section .section-heading h2 {
            font-size: 37px;

            letter-spacing: -1.2px;
        }

        .home-video-section .section-heading>p {
            font-size: 14px;
        }


        /* Video */

        .home-video-media {
            height: 410px;
        }

        .home-video-play {
            width: 80px;
            height: 80px;
        }

        .home-video-play::before {
            inset: 8px;
        }

        .home-video-play::after {
            inset: -9px;
        }

        .home-video-play span {
            width: 50px;
            height: 50px;

            font-size: 15px;
        }


        /* Caption */

        .home-video-caption {
            left: 24px;
            right: 24px;

            bottom: 28px;

            gap: 12px;
        }

        .video-caption-line {
            width: 28px;
        }

        .home-video-caption h3 {
            font-size: 25px;
        }


        /* Info */

        .home-video-info {
            width:
                calc(100% - 28px);

            padding:
                23px;

            grid-template-columns: 1fr;

            gap: 15px;
        }

        .video-info-number {
            padding:
                0 0 13px;

            border-right: 0;

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

            font-size: 36px;
        }


        /* Modal */

        .custom-video-modal {
            padding:
                18px;
        }

        .custom-video-box {
            width: 100%;
        }

        .custom-video-close {
            top: -18px;
            right: -5px;

            width: 42px;
            height: 42px;

            font-size: 16px;
        }


        /* FAQ */

        .home-faq-section .faq-intro h2 {
            font-size: 38px;

            letter-spacing:
                -1.3px;
        }

        .faq-layout {
            gap: 40px;
        }

        .faq-help-card {
            max-width: 100%;
        }

        .faq-question {
            min-height: 68px;

            padding:
                18px 0;

            grid-template-columns:
                29px 1fr 30px;

            gap: 9px;
        }

        .faq-question-text {
            padding-right: 5px;

            font-size: 14px;
        }

        .faq-answer-inner {
            padding:
                0 8px 21px 38px;

            font-size: 13px;
        }

    }


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

    @media (max-width: 480px) {

        .home-video-section,
        .home-faq-section {
            padding:
                50px 0;
        }

        .home-video-section .section-heading h2 {
            font-size: 32px;
        }

        .home-video-media {
            height: 360px;
        }

        .home-video-caption {
            left: 20px;
            right: 20px;

            bottom: 22px;
        }

        .video-caption-line {
            display: none;
        }

        .home-video-caption small {
            font-size: 8px;

            letter-spacing:
                1.3px;
        }

        .home-video-caption h3 {
            font-size: 22px;
        }

        .home-video-play {
            width: 72px;
            height: 72px;
        }

        .home-video-play span {
            width: 46px;
            height: 46px;

            font-size: 14px;
        }

        .home-video-info {
            width:
                calc(100% - 20px);

            padding:
                20px;
        }

        .video-info-number {
            font-size: 32px;
        }

        .home-video-info strong {
            font-size: 14px;
        }

        .home-video-info p {
            font-size: 11px;
        }


        /* FAQ */

        .home-faq-section .faq-intro h2 {
            font-size: 33px;
        }

        .faq-intro>p {
            font-size: 13px;
        }

        .faq-help-card {
            padding: 18px;

            gap: 14px;

            align-items: flex-start;
        }

        .faq-help-icon {
            flex-basis: 50px;

            width: 50px;
            height: 50px;

            font-size: 17px;
        }

        .faq-question {
            grid-template-columns:
                25px 1fr 28px;
        }

        .faq-number {
            font-size: 8px;
        }

        .faq-question-text {
            font-size: 13px;
        }

        .faq-toggle {
            width: 28px;
            height: 28px;
        }

        .faq-answer-inner {
            padding:
                0 5px 20px 34px;

            font-size: 12px;
        }

    }


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

    @media (max-width: 360px) {

        .home-video-media {
            height: 330px;
        }

        .home-video-section .section-heading h2,
        .home-faq-section .faq-intro h2 {
            font-size: 29px;
        }

        .faq-question-text {
            font-size: 12.5px;
        }

    }


    /* ==========================================================
   MULTI VIDEO SLIDER
========================================================== */

    .home-video-slider-wrap {
        position: relative;
        width: 100%;
        padding: 0 58px;
    }

    .home-video-slider {
        width: 100%;
        overflow: hidden;
    }

    .home-video-slider-track {
        display: flex;
        width: 100%;
        transition: transform .65s cubic-bezier(.22, .7, .2, 1);
        will-change: transform;
    }

    .home-video-slide {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
    }

    .home-video-slider-nav {
        position: absolute;
        top: 50%;
        z-index: 15;

        width: 46px;
        height: 46px;

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

        padding: 0;

        border: 1px solid rgba(1, 70, 135, .25);
        border-radius: 50%;

        background: #fff;
        color: var(--navy);

        cursor: pointer;

        transform: translateY(-50%);

        box-shadow:
            0 10px 28px rgba(1, 70, 135, .12);

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

    .home-video-slider-nav:hover {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy);
    }

    .home-video-slider-prev {
        left: 0;
    }

    .home-video-slider-next {
        right: 0;
    }

    .home-video-slider-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;

        margin-top: 24px;
    }

    .home-video-slider-dot {
        width: 9px;
        height: 9px;

        padding: 0;
        border: 0;
        border-radius: 50%;

        background: #c9ced3;

        cursor: pointer;

        transition: .25s ease;
    }

    .home-video-slider-dot.active {
        width: 27px;

        border-radius: 20px;

        background: var(--gold);
    }


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

    @media (max-width: 991px) {

        .home-video-slider-wrap {
            padding: 0 48px;
        }

    }


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

    @media (max-width: 767px) {

        .home-video-slider-wrap {
            padding: 0 34px;
        }

        .home-video-slider-nav {
            width: 34px;
            height: 34px;

            font-size: 12px;
        }

        .home-video-slider-prev {
            left: -2px;
        }

        .home-video-slider-next {
            right: -2px;
        }

        .home-video-slider-dots {
            margin-top: 18px;
        }

    }


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

    @media (max-width: 480px) {

        .home-video-slider-wrap {
            padding: 0 27px;
        }

        .home-video-slider-nav {
            width: 30px;
            height: 30px;
        }

    }

    .floating-call {
        position: fixed;
        right: 0;
        bottom: 110px;
        z-index: 800;

        display: flex;
        align-items: center;
        gap: 10px;

        padding: 10px 14px 10px 10px;

        background: var(--navy);
        color: #fff;

        border-radius: 28px 0 0 28px;

        box-shadow: 0 12px 30px rgba(0, 0, 0, .22);

        text-decoration: none;

        transform: translateX(82px);

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

    .floating-call:hover {
        transform: translateX(0);
        background: var(--gold);
        color: #fff;
    }

    .floating-call-icon {
        width: 42px;
        height: 42px;

        flex: 0 0 42px;

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

        border-radius: 50%;

        background: var(--gold);
        color: #fff;

        font-size: 17px;
    }

    .floating-call:hover .floating-call-icon {
        background: var(--navy);
    }

    .floating-call-text {
        min-width: 65px;

        display: flex;
        flex-direction: column;

        line-height: 1.2;
    }

    .floating-call-text small {
        font-size: 10px;
        opacity: .75;
    }

    .floating-call-text strong {
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
    }

    @media (max-width: 767px) {

        .floating-call {
            left: 20px;
            bottom: 82px;

            width: 52px;
            height: 52px;

            padding: 0;

            border-radius: 50%;

            transform: none;

            justify-content: center;
        }

        .floating-call:hover {
            transform: none;
        }

        .floating-call-icon {
            width: 48px;
            height: 48px;
            flex: 0 0 48px;
        }

        .floating-call-text {
            display: none;
        }
    }


/* ==========================================================
   FINAL GLOBAL FIXES
   Keep this block at the END of style.css
========================================================== */

/* ---------- Loader ---------- */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity .4s ease,
        visibility .4s ease;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ---------- Header ---------- */

.site-header {
    top: 40px;
}

.site-header.scrolled {
    top: 0;
}


/* ---------- Floating buttons ---------- */

.floating-whatsapp,
.floating-call,
.brochure-edge-tab,
.back-to-top {
    position: fixed;
    z-index: 1600;
}

.floating-whatsapp {
    opacity: 1;
    visibility: visible;
}

.back-to-top {
    pointer-events: none;
}

.back-to-top.show {
    pointer-events: auto;
}


/* ---------- Enquiry popup ---------- */

.enquiry-modal {
    pointer-events: none;
}

.enquiry-modal.open {
    pointer-events: auto;
}


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

@media (max-width: 1050px) {

    .topbar {
        display: none !important;
    }

    .site-header,
    .site-header.inner-header,
    .site-header.scrolled {
        top: 0 !important;
    }

    .navbar {
        position: relative;
        z-index: 1002;
        background: rgba(1, 70, 135, .97);
    }

   
    .navbar-inner {
        position: relative;
        z-index: 1003;
        height: 86px;
    }

    .brand {
        position: relative;
        z-index: 1005;
    }

    .brand-logo {
        width: auto;
        height: 54px;
        max-width: 210px;
        object-fit: contain;
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 1005;
        width: 38px;
        padding: 4px 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        margin: 7px 0;
        background: #fff;
        transition:
            transform .3s ease,
            opacity .3s ease;
    }

    body.menu-open .menu-toggle span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    body.menu-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.menu-open .menu-toggle span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .nav-menu {
        position: fixed !important;
        top: 86px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: calc(100dvh - 86px) !important;

        margin: 0 !important;
        padding: 28px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;

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

        background: var(--navy) !important;
        color: #fff !important;

        transform: translateX(100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            transform .35s ease,
            visibility .35s ease !important;

        z-index: 1001 !important;
    }

    .nav-menu.open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .nav-link {
        display: block;
        width: 100%;
        padding: 17px 0;
        color: #fff;
        font-size: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .nav-link::after {
        display: none;
    }

    .nav-quote {
        width: 100%;
        margin-top: 25px;
        justify-content: center;
    }

    body.menu-open {
        overflow: hidden;
    }
}


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

@media (max-width: 767px) {

    .navbar-inner {
        height: 76px;
    }

    .brand-logo {
        height: 48px;
        max-width: 180px;
    }

    .nav-menu {
        top: 76px !important;
        height: calc(100dvh - 76px) !important;
        padding: 24px 20px !important;
    }

    .nav-link {
        padding: 15px 0;
        font-size: 14px;
    }

    /* Left bottom stack */
    .floating-whatsapp {
        left: 16px !important;
        right: auto !important;
        bottom: 18px !important;

        width: 52px;
        height: 52px;
        padding: 0;

        justify-content: center;
        border-radius: 50%;
    }

    .floating-whatsapp span {
        display: none;
    }

    .floating-call {
        left: 16px !important;
        right: auto !important;
        bottom: 82px !important;

        width: 52px;
        height: 52px;
        padding: 0;

        justify-content: center;
        border-radius: 50%;

        transform: none !important;
    }

    .floating-call:hover {
        transform: none !important;
    }

    .floating-call-text {
        display: none;
    }

    /* Right bottom stack */
    .brochure-edge-tab {
        top: auto !important;
        right: 16px !important;
        bottom: 82px !important;

        width: 58px !important;
        height: 58px !important;

        padding: 6px !important;
        border-radius: 16px !important;

        transform: none !important;
    }

    .brochure-edge-tab:hover {
        transform: translateY(-3px) !important;
    }

    .brochure-edge-text,
    .brochure-edge-arrow {
        display: none !important;
    }

    .back-to-top {
        right: 16px !important;
        bottom: 18px !important;
    }

    .reveal {
        transition-delay: 0s !important;
    }
}


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

@media (max-width: 480px) {

    .brand-logo {
        height: 44px;
        max-width: 165px;
    }

    .menu-toggle {
        width: 32px;
    }

    .nav-menu {
        padding: 22px 18px !important;
    }
}

/* ==========================================================
   FINAL RESPONSIVE HEADER/FLOATING PATCH V2
========================================================== */

@media (max-width: 1050px) {
    .site-header,
    .site-header.inner-header,
    .site-header.scrolled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 2000 !important;
    }

    .site-header .navbar,
    .site-header.scrolled .navbar,
    .inner-header .navbar {
        /* background: rgba(1,70,135,.98) !important; */
        box-shadow: 0 8px 24px rgba(0,0,0,.16);
    }

    .nav-menu {
        z-index: 1999 !important;
    }

    .menu-toggle,
    .brand {
        z-index: 2002 !important;
    }
}

.floating-whatsapp,
.floating-call,
.brochure-edge-tab,
.back-to-top {
    z-index: 3000 !important;
}

.enquiry-modal {
    z-index: 10000 !important;
}

.custom-video-modal {
    z-index: 10001 !important;
}

.page-loader {
    z-index: 20000 !important;
}