:root {
        --primary-color: #F07B5E;
        --accent-green: #2BAE66;
        --accent-green-light: #EAF7ED;
        --primary-light: #FFF1EC;
        --accent-sage: #F8FAFC;
        --black: #000;
        --white: #fff;
        --text: #1F2937;
        --border: #E5E7EB;
        --shadow: 0 12px 40px rgba(0, 0, 0, .08);
        --shadow-lg: 0 20px 50px rgba(0, 0, 0, .12);
        --shadow-sm: 0 5px 20px rgba(0, 0, 0, .05);
    }

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

    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        color: var(--text);
        background: #fff;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

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

    ul {
        list-style: none;
    }

    /* Accessibility Screen Reader Only Utility */
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

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

    button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        background: none;
    }

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

    .main-header {
        position: absolute;
        width: 100%;
        top: 30px;
        left: 0;
        z-index: 999;
        transition: .35s;
    }

    .main-header.sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        padding: 6px 0;
    }

    .main-header.sticky .nav-wrapper {
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 8px 35px;
    }

    .nav-wrapper {

        max-width: 1320px;
        margin: auto;

        background: #fff;

        border-radius: 24px;

        padding: 18px 35px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        box-shadow: var(--shadow);

    }

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

    .logo img {
        height: 62px;
        width: auto;
    }

    /*=========================
        MENU
==========================*/

    .navbar {

        display: flex;

        align-items: center;

    }

    .nav-menu {

        display: flex;

        align-items: center;

        gap: clamp(16px, 1.8vw, 26px);

    }

    .nav-menu>li {

        position: relative;

    }

    .nav-menu>li>a {

        color: var(--text);

        font-size: 16px;

        font-weight: 600;

        transition: .3s;

    }

    .nav-menu>li>a:hover {

        color: var(--primary-color);

    }

    .active {

        color: var(--primary-color) !important;

    }

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

    .nav-menu>li.dropdown>a {

        display: inline-flex;

        align-items: center;

        gap: 6px;

    }

    .nav-menu>li.dropdown>a i {

        font-size: 11px;

        transition: transform .3s ease;

    }

    .nav-menu>li.dropdown:hover>a i {

        transform: rotate(180deg);

    }

    .dropdown-menu {

        position: absolute;

        left: 50%;

        transform: translateX(-50%);

        top: 130%;

        width: 320px;

        background: #fff;

        border-radius: 14px;

        box-shadow: 0 16px 48px rgba(0, 0, 0, .12);

        opacity: 0;

        visibility: hidden;

        transition: all .35s cubic-bezier(.4, 0, .2, 1);

        border: 1px solid rgba(229, 231, 235, .8);

        padding: 4px;

        max-height: 70vh;

        overflow-y: auto;

        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;

    }

    .dropdown-menu::-webkit-scrollbar {

        width: 5px;

    }

    .dropdown-menu::-webkit-scrollbar-track {

        background: transparent;

    }

    .dropdown-menu::-webkit-scrollbar-thumb {

        background: var(--border);

        border-radius: 5px;

    }

    .dropdown-menu::-webkit-scrollbar-thumb:hover {

        background: #d1d5db;

    }

    .dropdown-menu::before {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        height: 3px;

        background: linear-gradient(90deg, var(--primary-color), #f5a68c);

    }

    .dropdown:hover .dropdown-menu {

        opacity: 1;

        visibility: visible;

        top: 115%;

    }

    .dropdown-menu li {

        border-bottom: 1px solid #f3f4f6;

        border-radius: 8px;

        margin: 3px 0;

    }

    .dropdown-menu li:last-child {

        border: none;

    }

    .dropdown-menu a {

        display: flex;

        align-items: center;

        gap: 10px;

        padding: 14px 16px;

        color: #4B5563;

        font-size: 14px;

        font-weight: 500;

        line-height: 1.35;

        transition: all .3s cubic-bezier(.4, 0, .2, 1);

        border-radius: 8px;

        position: relative;

    }

    .dropdown-menu a::before {

        content: '';

        position: absolute;

        left: 16px;

        width: 0;

        height: 2px;

        bottom: 10px;

        background: var(--primary-color);

        transition: width .3s ease;

    }

    .dropdown-menu a:hover {

        background: linear-gradient(135deg, #FFF8F6 0%, #FFFFFF 100%);

        color: var(--primary-color);

        padding-left: 20px;

        transform: translateX(3px);

    }

    .dropdown-menu a:hover::before {

        width: 18px;

    }

    .dropdown-menu li:first-child a {

        border-top-left-radius: 8px;

        border-top-right-radius: 8px;

    }

    .dropdown-menu li:last-child a {

        border-bottom-left-radius: 8px;

        border-bottom-right-radius: 8px;

    }

    /*=========================
      RIGHT SIDE
==========================*/

    .nav-right {

        display: flex;

        align-items: center;

        gap: 18px;

    }

    .navbar .mobile-cta {

        display: none;

    }

    .quote-btn {

        background: #0f172a;

        color: #fff;

        padding: 11px 22px;

        font-size: 14px;

        border-radius: 50px;

        display: inline-flex;

        align-items: center;

        gap: 9px;

        font-weight: 600;

        transition: all .3s ease;

        white-space: nowrap;

        text-decoration: none;

        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);

    }

    .quote-btn:hover {

        background: var(--primary-color);

        color: #fff;

        transform: translateY(-1px);

        box-shadow: 0 8px 20px rgba(238, 119, 90, 0.35);

    }

    .menu-toggle {

        display: none;

        align-items: center;

        gap: 15px;

        border: none;

        background: none;

        cursor: pointer;

        padding: 4px;

        z-index: 10;

    }

    .menu-toggle span {

        font-weight: 600;

    }

    .hamburger {

        display: flex;

        flex-direction: column;

        gap: 6px;

    }

    .hamburger span {

        width: 26px;

        height: 2px;

        background: #000;

        transition: .35s ease;

        transform-origin: center;

    }

    .menu-toggle.active .hamburger span:nth-child(1) {

        transform: translateY(8px) rotate(45deg);

    }

    .menu-toggle.active .hamburger span:nth-child(2) {

        opacity: 0;

        transform: scaleX(0);

    }

    .menu-toggle.active .hamburger span:nth-child(3) {

        transform: translateY(-8px) rotate(-45deg);

    }

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

    @media(max-width:991px) {

        .main-header {

            top: 15px;

        }

        .main-header.sticky {
            top: 0;
            left: 0;
            width: 100%;
            background: #ffffff;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            padding: 6px 0;
        }

        .main-header.sticky .nav-wrapper {
            max-width: 100%;
            padding: 8px 20px;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .main-header.sticky .navbar {
            top: 62px;
        }

        .menu-toggle {

            display: flex;

        }

        .navbar {

            position: fixed;

            left: 15px;

            right: 15px;

            top: 82px;

            background: #fff;

            display: none;

            border-radius: 20px;

            padding: 12px 20px 20px;

            box-shadow: var(--shadow-lg);

            max-height: calc(100vh - 110px);

            overflow-y: auto;

            -webkit-overflow-scrolling: touch;

        }

        .navbar.active {

            display: block;

            animation: slideDown .35s ease forwards;

        }

        @keyframes slideDown {

            from {

                opacity: 0;

                transform: translateY(-10px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }

        .nav-menu {

            flex-direction: column;

            gap: 0;

        }

        .nav-menu li {

            width: 100%;

            border-bottom: 1px solid #f3f4f6;

        }

        .nav-menu li:last-child {

            border-bottom: none;

        }

        .nav-menu>li>a {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 16px 0;

        }

        .dropdown>a i {

            transition: .3s;

        }

        .dropdown.active>a i {

            transform: rotate(180deg);

        }

        .dropdown-menu {

            position: relative;

            width: 100%;

            opacity: 1;

            visibility: visible;

            display: none;

            top: 0;

            box-shadow: none;

            border-radius: 0;

            padding: 8px 0 8px 12px;

            border-top: 1px solid #f3f4f6;

            border-left: 2px solid #f1f1f1;

            margin-left: 8px;

        }

        .dropdown-menu::before {

            display: none;

        }

        .dropdown-menu li {

            border-bottom: 1px solid #f3f4f6;

            margin: 2px 0;

            border-radius: 8px;

        }

        .dropdown-menu li:last-child {

            border-bottom: none;

        }

        .dropdown-menu a {

            padding: 11px 14px !important;

            font-size: 14px !important;

            border-radius: 8px;

            color: #4B5563;

            font-weight: 500;

            display: flex;

            align-items: center;

            gap: 10px;

            transition: all .25s ease;

            position: relative;

        }

        .dropdown-menu a::before {

            display: none;

        }

        .dropdown-menu a:hover {

            background: linear-gradient(135deg, #FFF8F6 0%, #FFFFFF 100%);

            padding-left: 18px !important;

            color: var(--primary-color);

            transform: translateX(3px);

        }

        .dropdown.active .dropdown-menu {

            display: block;

        }

        .quote-btn {

            display: none;

        }

        .navbar .mobile-cta {

            display: flex;

            margin-top: 18px;

            justify-content: center;

            padding-top: 16px;

            border-top: 1px solid #f3f4f6;

        }

        .navbar .mobile-cta .quote-btn {

            display: inline-flex;
            width: 100%;
            justify-content: center;
            padding: 14px 24px;
            font-size: 15px;

        }

    }

    @media(max-width:768px) {

        .logo img {

            height: 48px;

        }

        .nav-wrapper {

            max-width: calc(100% - 24px);
            border-radius: 16px;
            padding: 13px 16px;

        }

        .navbar {

            left: 12px;
            right: 12px;
            top: 76px;
            padding: 10px 16px 16px;
            max-height: calc(100vh - 98px);
            border-radius: 16px;

        }

        .nav-menu>li>a {

            padding: 14px 0;
            font-size: 15px !important;

        }

        .navbar .mobile-cta {

            margin-top: 14px;
            padding-top: 14px;

        }

    }

    @media(max-width:575px) {

        .main-header {

            top: 10px;

        }

        .main-header.sticky {
            top: 0;
            left: 0;
            width: 100%;
            background: #ffffff;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            padding: 4px 0;
        }

        .logo img {

            height: 44px;

        }

        .nav-wrapper {

            max-width: calc(100% - 20px);
            border-radius: 14px;
            padding: 12px 15px;

        }

        .hamburger {

            gap: 5px;

        }

        .hamburger span {

            width: 24px;
            height: 2px;

        }

        .menu-toggle.active .hamburger span:nth-child(1) {

            transform: translateY(7px) rotate(45deg);

        }

        .menu-toggle.active .hamburger span:nth-child(3) {

            transform: translateY(-7px) rotate(-45deg);

        }

        .navbar {

            left: 10px;
            right: 10px;
            top: 72px;
            padding: 8px 14px 14px;
            max-height: calc(100vh - 92px);
            border-radius: 14px;

        }

        .nav-menu>li>a {

            padding: 13px 0;
            font-size: 14.5px !important;

        }

        .dropdown-menu a {

            padding: 10px 12px !important;
            font-size: 13.5px !important;

        }

        .navbar .mobile-cta {

            margin-top: 12px;
            padding-top: 12px;

        }

        .navbar .mobile-cta .quote-btn {

            padding: 13px 20px;
            font-size: 14.5px;

        }

    }

    @media(max-width:480px) {

        .main-header {

            top: 8px;

        }

        .main-header.sticky {
            top: 0;
            left: 0;
            width: 100%;
            background: #ffffff;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            padding: 4px 0;
        }

        .logo img {

            height: 40px;

        }

        .nav-wrapper {

            max-width: calc(100% - 16px);
            border-radius: 13px;
            padding: 11px 13px;

        }

        .hamburger {

            gap: 4.5px;

        }

        .hamburger span {

            width: 22px;

        }

        .menu-toggle.active .hamburger span:nth-child(1) {

            transform: translateY(6.5px) rotate(45deg);

        }

        .menu-toggle.active .hamburger span:nth-child(3) {

            transform: translateY(-6.5px) rotate(-45deg);

        }

        .navbar {

            left: 8px;
            right: 8px;
            top: 66px;
            padding: 8px 12px 12px;
            max-height: calc(100vh - 86px);
            border-radius: 13px;

        }

        .nav-menu>li>a {

            padding: 12px 0;
            font-size: 14px !important;

        }

        .dropdown-menu a {

            padding: 9.5px 11px !important;
            font-size: 13px !important;

        }

        .navbar .mobile-cta {

            margin-top: 10px;
            padding-top: 10px;

        }

        .navbar .mobile-cta .quote-btn {

            padding: 12px 18px;
            font-size: 14px;
            gap: 10px;

        }

    }

    @media(max-width:360px) {

        .logo img {

            height: 36px;

        }

        .nav-wrapper {

            max-width: calc(100% - 12px);
            border-radius: 12px;
            padding: 10px 12px;

        }

        .hamburger span {

            width: 20px;

        }

        .menu-toggle.active .hamburger span:nth-child(1) {

            transform: translateY(6px) rotate(45deg);

        }

        .menu-toggle.active .hamburger span:nth-child(3) {

            transform: translateY(-6px) rotate(-45deg);

        }

        .navbar {

            left: 6px;
            right: 6px;
            top: 62px;
            padding: 6px 10px 10px;
            max-height: calc(100vh - 80px);
            border-radius: 12px;

        }

        .nav-menu>li>a {

            padding: 11px 0;
            font-size: 13.5px !important;

        }

        .navbar .mobile-cta .quote-btn {

            padding: 11px 16px;
            font-size: 13.5px;

        }

    }

    /*=========================
        HERO
=========================*/
    /*=============================
 HERO SECTION
=============================*/

    /*==============================
            HERO
===============================*/

    .hero {

        position: relative;

        padding-top: 220px;

        padding-bottom: 60px;

        overflow: hidden;

        background: #fff;

    }

    .hero::before {

        content: "";

        position: absolute;

        width: 550px;

        height: 550px;

        border-radius: 50%;

        background: #FFF4EF;

        top: -120px;

        right: -150px;

        z-index: 0;

    }

    .hero .container {

        max-width: 1320px;

        margin: auto;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 60px;

        position: relative;

        z-index: 2;

        padding: 0 24px;

    }

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

    .hero-content {

        width: 48%;

    }

    .hero-badge {

        display: inline-flex;

        align-items: center;

        padding: 12px 22px;

        background: #EAF7ED;

        color: #249B56;

        border-radius: 40px;

        font-weight: 600;

        margin-bottom: 25px;

    }

    .hero h1 {

        font-size: 52px;

        line-height: 1.15;

        color: #111;

        font-weight: 800;

        margin-bottom: 24px;

    }

    .hero h1 span {

        color: #F07B5E;

    }

    .hero-content>p {

        font-size: 16px;

        line-height: 1.75;

        color: #666;

        max-width: 560px;

    }

    .hero-buttons {

        display: flex;

        gap: 20px;

        margin-top: 40px;

        flex-wrap: wrap;

    }

    .btn-primary {

        padding: 18px 36px;

        background: var(--primary-color);

        color: #fff;

        border-radius: 50px;

        font-weight: 600;

        transition: all .3s ease;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        white-space: nowrap;

    }

    .btn-primary:hover {

        background: #111;

        color: #fff;

        transform: translateY(-2px);

        box-shadow: 0 10px 25px rgba(240, 123, 94, .3);

    }

    .btn-outline {

        padding: 18px 36px;

        border: 2px solid var(--primary-color);

        color: var(--primary-color);

        border-radius: 50px;

        font-weight: 600;

        transition: all .3s ease;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        white-space: nowrap;

    }

    .btn-outline:hover {

        background: var(--primary-color);

        color: #fff;

        transform: translateY(-2px);

        box-shadow: 0 10px 25px rgba(240, 123, 94, .25);

    }

    .hero-counter {

        display: flex;

        gap: 45px;

        margin-top: 60px;

    }

    .counter-item h2 {

        font-size: 42px;

        color: #F07B5E;

    }

    .counter-item span {

        color: #666;

    }

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

    .hero-image {

        width: 52%;

        position: relative;

    }

    .hero-image img {

        width: 100%;

        height: 480px;

        object-fit: cover;

        border-radius: 30px;

        display: block;

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

    }

    /*==============================
CARDS
===============================*/

    .hero-card {

        position: absolute;

        background: #fff;

        border-radius: 20px;

        padding: 22px;

        box-shadow: 0 20px 45px rgba(0, 0, 0, .12);

        min-width: 240px;

    }

    .hero-card h4 {

        font-size: 26px;

        margin-bottom: 6px;

    }

    .hero-card p {

        margin: 0;

        color: #666;

    }

    .card-one {

        bottom: 35px;

        left: 25px;

    }

    .card-two {

        top: 40px;

        right: 25px;

    }

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

    @media(max-width:1200px) {

        .hero {
            padding-top: 145px;
            padding-bottom: 40px;
        }

        .hero::before {
            width: 480px;
            height: 480px;
            top: -110px;
            right: -130px;
        }

        .hero .container {
            max-width: 1140px;
            gap: 52px;
            padding: 0 22px;
        }

        .hero-content {
            width: 50%;
        }

        .hero-badge {
            padding: 11px 20px;
            font-size: 13.5px;
            margin-bottom: 22px;
        }

        .hero h1 {
            font-size: 44px;
            line-height: 1.15;
            margin-bottom: 20px;
        }

        .hero-content>p {
            font-size: 17px;
            line-height: 1.85;
            max-width: 520px;
        }

        .hero-buttons {
            gap: 18px;
            margin-top: 36px;
        }

        .btn-primary,
        .btn-outline {
            padding: 17px 33px;
            font-size: 15px;
        }

        .hero-counter {
            gap: 38px;
            margin-top: 54px;
        }

        .counter-item h2 {
            font-size: 38px;
        }

        .hero-image {
            width: 50%;
        }

        .hero-image img {
            height: 420px;
            border-radius: 27px;
        }

        .hero-card {
            min-width: 210px;
            padding: 19px;
            border-radius: 18px;
        }

        .hero-card h4 {
            font-size: 23px;
            margin-bottom: 5px;
        }

        .hero-card p {
            font-size: 14.5px;
        }

        .card-one {
            bottom: 28px;
            left: 20px;
        }

        .card-two {
            top: 32px;
            right: 20px;
        }

    }

    @media(max-width:991px) {

        .hero {
            padding-top: 135px;
            padding-bottom: 45px;
        }

        .hero::before {
            width: 420px;
            height: 420px;
            top: -95px;
            right: -110px;
        }

        .hero .container {
            flex-direction: column;
            gap: 46px;
            padding: 0 20px;
        }

        .hero-content {
            width: 100%;
            max-width: 640px;
            text-align: center;
            margin: auto;
        }

        .hero-content p {
            margin: auto;
            max-width: 580px;
        }

        .hero-badge {
            padding: 10.5px 20px;
            font-size: 13px;
            margin-bottom: 20px;
        }

        .hero h1 {
            font-size: 38px;
            line-height: 1.15;
            margin-bottom: 18px;
        }

        .hero-content>p {
            font-size: 16.5px;
            line-height: 1.82;
        }

        .hero-buttons {
            justify-content: center;
            gap: 16px;
            margin-top: 34px;
        }

        .btn-primary,
        .btn-outline {
            padding: 16.5px 32px;
            font-size: 15px;
        }

        .hero-counter {
            justify-content: center;
            flex-wrap: wrap;
            gap: 32px;
            margin-top: 46px;
        }

        .counter-item h2 {
            font-size: 36px;
        }

        .hero-image {
            width: 100%;
            max-width: 580px;
            margin: auto;
        }

        .hero-image img {
            height: 380px;
            border-radius: 24px;
        }

        .hero-card {
            min-width: 190px;
            padding: 17px 18px;
            border-radius: 17px;
        }

        .hero-card h4 {
            font-size: 21px;
            margin-bottom: 4px;
        }

        .hero-card p {
            font-size: 14px;
            max-width: none;
            color: #666;
        }

        .card-one {
            bottom: 22px;
            left: 18px;
        }

        .card-two {
            top: 26px;
            right: 18px;
        }

    }

    @media(max-width:768px) {

        .hero {
            padding-top: 125px;
            padding-bottom: 40px;
        }

        .hero::before {
            width: 360px;
            height: 360px;
            top: -80px;
            right: -100px;
        }

        .hero .container {
            gap: 40px;
            padding: 0 18px;
        }

        .hero-content {
            max-width: 100%;
        }

        .hero-badge {
            padding: 10px 18px;
            font-size: 13px;
            margin-bottom: 20px;
        }

        .hero h1 {
            font-size: 32px;
            line-height: 1.15;
            margin-bottom: 16px;
        }

        .hero-content>p {
            font-size: 16px;
            line-height: 1.78;
        }

        .hero-buttons {
            flex-direction: row;
            justify-content: center;
            gap: 16px;
            margin-top: 32px;
        }

        .btn-primary,
        .btn-outline {
            width: auto;
            max-width: none;
            text-align: center;
            padding: 16px 28px;
            font-size: 15px;
        }

        .hero-counter {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 26px;
            justify-content: center;
            margin-top: 40px;
        }

        .counter-item h2 {
            font-size: 36px;
            line-height: 1;
            margin-bottom: 5px;
        }

        .counter-item span {
            font-size: 14.5px;
            display: block;
        }

        .hero-image {
            max-width: 520px;
        }

        .hero-image img {
            height: 340px;
            border-radius: 22px;
        }

        .hero-card {
            min-width: 170px;
            padding: 15px 16px;
            border-radius: 16px;
        }

        .hero-card h4 {
            font-size: 19px;
            margin-bottom: 4px;
        }

        .hero-card p {
            font-size: 13.5px;
        }

        .card-one {
            bottom: 18px;
            left: 16px;
        }

        .card-two {
            top: 22px;
            right: 16px;
        }

    }

    @media(max-width:576px) {

        .hero {
            padding-top: 130px;
            padding-bottom: 35px;
            overflow: hidden;
        }

        .hero::before {
            width: 300px;
            height: 300px;
            top: -85px;
            right: -110px;
            opacity: .85;
        }

        .hero .container {
            gap: 38px;
            padding: 0 18px;
        }

        .hero-badge {
            padding: 9px 16px;
            font-size: 12px;
            margin-bottom: 18px;
        }

        .hero h1 {
            font-size: 28px;
            line-height: 1.2;
            margin-bottom: 16px;
            letter-spacing: -.3px;
        }

        .hero-content>p {
            font-size: 15.5px;
            line-height: 1.72;
            max-width: 100%;
        }

        .hero-buttons {
            flex-direction: column;
            align-items: center;
            margin-top: 28px;
            gap: 13px;
        }

        .btn-primary,
        .btn-outline {
            width: 100%;
            max-width: 320px;
            padding: 15px 28px;
            font-size: 15px;
            text-align: center;
        }

        .hero-counter {
            flex-direction: column;
            gap: 20px;
            margin-top: 36px;
            text-align: center;
        }

        .counter-item h2 {
            font-size: 40px;
            font-weight: 800;
            line-height: 1;
            margin-bottom: 4px;
        }

        .counter-item span {
            font-size: 14.5px;
            font-weight: 500;
        }

        .hero-image {
            margin-top: 4px;
            max-width: 100%;
        }

        .hero-image img {
            border-radius: 22px;
            height: 300px;
            max-height: 300px;
            object-fit: cover;
            object-position: top center;
        }

        .hero-card {
            min-width: 150px;
            padding: 13px 14px;
            border-radius: 15px;
        }

        .hero-card h4 {
            font-size: 17px;
            margin-bottom: 3px;
        }

        .hero-card p {
            font-size: 12.5px;
        }

        .card-one {
            bottom: 14px;
            left: 14px;
        }

        .card-two {
            top: 18px;
            right: 14px;
        }

    }

    @media(max-width:400px) {

        .hero {
            padding-top: 170px;
            padding-bottom: 40px;
        }

        .hero::before {
            width: 260px;
            height: 260px;
            right: -100px;
            top: -75px;
        }

        .hero .container {
            gap: 34px;
            padding: 0 16px;
        }

        .hero-badge {
            font-size: 11px;
            padding: 8px 14px;
            margin-bottom: 16px;
        }

        .hero h1 {
            font-size: 29px;
            line-height: 1.18;
            margin-bottom: 16px;
        }

        .hero-content>p {
            font-size: 14.5px;
            line-height: 1.68;
        }

        .hero-buttons {
            gap: 12px;
            margin-top: 26px;
        }

        .btn-primary,
        .btn-outline {
            padding: 14px 24px;
            font-size: 14px;
        }

        .hero-counter {
            gap: 17px;
            margin-top: 32px;
        }

        .counter-item h2 {
            font-size: 36px;
        }

        .counter-item span {
            font-size: 13.5px;
        }

        .hero-image img {
            border-radius: 20px;
            height: 330px;
            max-height: 330px;
        }

        .hero-card {
            display: none;
        }

    }



    /*==========================
        ABOUT US
==========================*/

    .about-section {

        padding: 60px 0;

        background: #FFF1EC;

    }

    .about-section .container:not(.about-intro-container):not(.strength-container) {

        max-width: 1320px;

        margin: auto;

        display: grid;

        grid-template-columns: 0.9fr 1.1fr;

        gap: 50px;

        align-items: center;

        padding: 0 24px;

    }

    .about-section.about-section--intro .container.about-intro-container {

        max-width: 1320px !important;

        margin: auto;

        display: grid !important;

        grid-template-columns: 1.1fr 1fr !important;

        gap: 56px !important;

        align-items: center;

        padding: 0 24px !important;

    }

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

    .about-image {

        position: relative;

        border-radius: 22px;

        overflow: hidden;

        box-shadow: 0 20px 50px rgba(15, 23, 42, .10);

    }

    .about-image img {

        width: 100%;

        height: 420px;

        object-fit: cover;

        display: block;

    }

    .about-experience-badge {

        position: absolute;

        bottom: 18px;

        left: 18px;

        background: #fff;

        padding: 14px 18px;

        border-radius: 14px;

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

        display: flex;

        flex-direction: column;

        line-height: 1.1;

    }

    .about-experience-badge .abt-num {

        font-size: 32px;

        font-weight: 800;

        color: var(--primary-color);

    }

    .about-experience-badge .abt-lbl {

        font-size: 13px;

        color: #666;

        font-weight: 600;

        margin-top: 4px;

    }

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

    .about-content .section-badge {

        position: relative;

        display: inline-flex;
        align-items: center;

        padding: 10px 22px 10px 44px;

        color: #fff;

        font-weight: 700;

        font-size: 13px;

        letter-spacing: .3px;

        text-transform: uppercase;

        border-radius: 50px;

        background: linear-gradient(90deg, var(--primary-color) 0%, #ff9475 100%);

        border: none;

        margin-bottom: 20px;

        box-shadow: 0 10px 22px rgba(240, 123, 94, 0.28);

        overflow: hidden;

    }

    .about-content .section-badge::before {

        content: "";

        position: absolute;

        left: 14px;

        top: 50%;

        transform: translateY(-50%);

        width: 18px;

        height: 18px;

        border-radius: 50%;

        background: #fff;

        box-shadow: inset 0 0 0 4px rgba(43, 174, 102, 0.20);

    }

    .about-content .section-badge::after {

        content: "\f06c";

        font-family: "Font Awesome 6 Free";

        font-weight: 900;

        position: absolute;

        left: 16.5px;

        top: 50%;

        transform: translateY(-50%);

        font-size: 10px;

        color: #2BAE66;

        z-index: 2;

    }

    .about-content h2 {

        font-size: 38px;

        color: #111;

        line-height: 1.2;

        margin-bottom: 16px;

        font-weight: 800;

    }

    .about-content p {

        color: #555;

        line-height: 1.75;

        font-size: 15.5px;

        margin-bottom: 20px;

        text-align: left;

    }

    .about-features {

        list-style: none;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 12px 20px;

        margin: 0 0 24px;

        padding: 0;

    }

    .about-features li {

        display: flex;

        align-items: center;

        gap: 10px;

        font-size: 14.5px;

        color: #374151;

        font-weight: 500;

    }

    .about-features li i {

        color: var(--accent-green);

        font-size: 17px;

        flex-shrink: 0;

    }

    .about-btn {

        display: inline-block;

        padding: 14px 30px;

        background: var(--primary-color);

        color: #fff;

        border-radius: 50px;

        font-weight: 600;

        font-size: 15px;

        transition: .3s;

    }

    .about-btn:hover {

        background: #111;

        transform: translateY(-2px);

    }

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

    @media(max-width:1200px) {

        .about-section .container {
            gap: 42px;
        }

        .about-image img {
            height: 380px;
        }

        .about-content h2 {
            font-size: 34px;
        }

        .about-content p {
            font-size: 15px;
        }

        .about-content .section-badge {
            padding: 9px 20px 9px 42px;
            font-size: 12.5px;
            margin-bottom: 18px;
        }

        .about-content .section-badge::before {
            left: 13px;
            width: 17px;
            height: 17px;
        }

        .about-content .section-badge::after {
            left: 15.5px;
            font-size: 9.5px;
        }

    }

    @media(max-width:991px) {

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

        .about-section .container:not(.about-intro-container):not(.strength-container) {

            grid-template-columns: 1fr;

            gap: 36px;

            padding: 0 20px;

            max-width: 620px;

        }

        .about-image img {
            height: 320px;
        }

        .about-content {
            text-align: center;
            max-width: 620px;
            margin: auto;
            width: 100%;
        }

        .about-content h2 {
            font-size: 32px;
            line-height: 1.2;
            margin-bottom: 14px;
        }

        .about-content p {
            font-size: 15.5px;
            margin-bottom: 18px;
        }

        .about-features {
            gap: 10px 16px;
            margin: 0 auto 20px;
        }

        .about-features li {
            font-size: 14px;
            justify-content: center;
        }

        .about-features li i {
            font-size: 16px;
        }

        .about-content .section-badge {
            padding: 9px 20px 9px 42px;
            font-size: 12.5px;
            margin-bottom: 18px;
        }

        .about-content .section-badge::before {
            left: 13px;
            width: 17px;
            height: 17px;
        }

        .about-content .section-badge::after {
            left: 15.5px;
            font-size: 9.5px;
        }

    }

    @media(max-width:768px) {

        .about-section {
            padding: 55px 0;
        }

        .about-section .container:not(.about-intro-container):not(.strength-container) {
            gap: 32px;
            padding: 0 18px;
            grid-template-columns: 1fr;
        }

        .about-image img {
            height: 260px;
            border-radius: 18px;
        }

        .about-experience-badge {

            padding: 12px 16px;

            bottom: 14px;

            left: 14px;

            border-radius: 12px;

        }

        .about-experience-badge .abt-num {
            font-size: 28px;
        }

        .about-experience-badge .abt-lbl {
            font-size: 12px;
        }

        .about-content h2 {
            font-size: 28px;
        }

        .about-content p {
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 16px;
        }

        .about-features {
            gap: 10px;
            margin-bottom: 20px;
        }

        .about-features li {
            font-size: 13.5px;
            gap: 8px;
        }

        .about-features li i {
            font-size: 15px;
        }

        .about-btn {
            padding: 13px 26px;
            font-size: 14.5px;
        }

        .about-content .section-badge {
            padding: 8px 18px 8px 40px;
            font-size: 12px;
            margin-bottom: 16px;
        }

        .about-content .section-badge::before {
            left: 12px;
            width: 16px;
            height: 16px;
        }

        .about-content .section-badge::after {
            left: 14.5px;
            font-size: 9px;
        }

    }

    @media(max-width:576px) {

        .about-section {
            padding: 50px 0;
        }

        .about-section .container:not(.about-intro-container):not(.strength-container) {
            gap: 28px;
            padding: 0 18px;
            grid-template-columns: 1fr;
        }

        .about-image img {
            height: 220px;
            border-radius: 18px;
        }

        .about-experience-badge {

            padding: 10px 14px;

            bottom: 12px;

            left: 12px;

            border-radius: 11px;

        }

        .about-experience-badge .abt-num {
            font-size: 24px;
        }

        .about-experience-badge .abt-lbl {
            font-size: 11.5px;
            margin-top: 3px;
        }

        .about-content h2 {
            font-size: 25px;
            line-height: 1.22;
            margin-bottom: 12px;
        }

        .about-content p {
            font-size: 14.5px;
            line-height: 1.68;
            margin-bottom: 14px;
        }

        .about-features {

            grid-template-columns: 1fr;

            gap: 10px;

            margin-bottom: 18px;

        }

        .about-features li {
            font-size: 14px;
            justify-content: flex-start;
            gap: 10px;
        }

        .about-features li i {
            font-size: 16px;
        }

        .about-btn {

            display: block;

            width: 100%;

            text-align: center;

            padding: 14px 24px;

            font-size: 14.5px;

            border-radius: 48px;

        }

        .about-content .section-badge {
            padding: 8px 16px 8px 38px;
            font-size: 11.5px;
            margin-bottom: 14px;
        }

        .about-content .section-badge::before {
            left: 11px;
            width: 15px;
            height: 15px;
        }

        .about-content .section-badge::after {
            left: 13px;
            font-size: 8.5px;
        }

    }

    @media(max-width:400px) {

        .about-section {
            padding: 45px 0;
        }

        .about-section .container:not(.about-intro-container):not(.strength-container) {
            gap: 24px;
            padding: 0 16px;
            grid-template-columns: 1fr;
        }

        .about-image img {
            height: 190px;
            border-radius: 16px;
        }

        .about-experience-badge {
            display: none;
        }

        .about-content h2 {
            font-size: 22px;
            line-height: 1.25;
            margin-bottom: 10px;
        }

        .about-content p {
            font-size: 14px;
            line-height: 1.65;
            margin-bottom: 12px;
        }

        .about-features {
            gap: 8px;
            margin-bottom: 16px;
        }

        .about-features li {
            font-size: 13.5px;
            gap: 8px;
        }

        .about-features li i {
            font-size: 15px;
        }

        .about-btn {
            padding: 13px 22px;
            font-size: 14px;
        }

        .about-content .section-badge {
            padding: 7px 14px 7px 36px;
            font-size: 11px;
            margin-bottom: 12px;
        }

        .about-content .section-badge::before {
            left: 10px;
            width: 14px;
            height: 14px;
        }

        .about-content .section-badge::after {
            left: 12px;
            font-size: 8px;
        }

    }


    /*==========================
    PROJECTS SECTION
===========================*/

    .projects-section {

        padding: 60px 0;

        background: #FFF1EC;

        position: relative;

        overflow: hidden;

    }

    .projects-section::before {

        content: "";

        position: absolute;

        top: -60px;

        left: -80px;

        width: 340px;

        height: 340px;

        border-radius: 50%;

        background: radial-gradient(circle, rgba(43, 174, 102, 0.09) 0%, rgba(43, 174, 102, 0) 70%);

        pointer-events: none;

    }

    .projects-section::after {

        content: "";

        position: absolute;

        bottom: -100px;

        right: -80px;

        width: 420px;

        height: 420px;

        border-radius: 50%;

        background: radial-gradient(circle, rgba(240, 123, 94, 0.10) 0%, rgba(240, 123, 94, 0) 70%);

        pointer-events: none;

    }

    .projects-container {

        max-width: 1320px;

        margin: auto;

        padding: 0 24px;

        position: relative;

        z-index: 1;

    }

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

    .projects-heading {

        text-align: center;

        margin: 0 0 48px;

    }

    .projects-heading h2 {

        font-size: 44px;

        line-height: 1.18;

        color: #111;

        font-weight: 800;

        margin: 0;

    }

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

    .projects-cta-bottom {

        margin-top: 52px;

        text-align: center;

    }

    .projects-view-all {

        display: inline-flex;

        align-items: center;

        gap: 10px;

        padding: 16px 36px;

        background: #fff;

        color: var(--primary-color);

        border: 1.5px solid var(--primary-color);

        border-radius: 50px;

        font-weight: 700;

        font-size: 15.5px;

        transition: all .3s ease;

        box-shadow: 0 8px 22px rgba(240, 123, 94, 0.10);

    }

    .projects-view-all i {

        font-size: 12px;

        transition: transform .3s ease;

    }

    .projects-view-all:hover {

        background: var(--primary-color);

        color: #fff;

        transform: translateY(-2px);

        box-shadow: 0 12px 28px rgba(240, 123, 94, 0.28);

    }

    .projects-view-all:hover i {

        transform: translateX(4px);

    }

    /* ============== GRID + CARDS ============== */

    .projects-grid {

        display: grid;

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

        gap: 32px;

    }

    /* ===== Projects Swiper Slider ===== */
    .projects-swiper-container {
        position: relative;
        padding: 0 45px;
        margin-top: 10px;
    }

    .projects-swiper {
        padding: 10px 0 58px;
        position: relative;
        overflow: hidden;
    }

    .projects-swiper .swiper-wrapper {
        align-items: stretch;
        transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important;
        will-change: transform;
    }

    .projects-swiper .swiper-slide {
        height: auto;
        display: flex;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .projects-swiper .swiper-slide .project-card {
        height: 100%;
        width: 100%;
    }

    .projects-swiper-btn {
        position: absolute;
        top: calc(50% - 28px);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #fff;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 12;
        box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
        border: 1px solid rgba(229, 231, 235, .9);
        font-size: 16px;
        transition: all .35s cubic-bezier(.22, .61, .36, 1);
    }

    .projects-swiper-btn:hover {
        background: linear-gradient(135deg, var(--primary-color), #ff9475);
        color: #fff;
        box-shadow: 0 16px 40px rgba(240, 123, 94, 0.4);
        border-color: transparent;
        transform: scale(1.08);
    }

    .projects-swiper-prev {
        left: -10px;
    }

    .projects-swiper-next {
        right: -10px;
    }

    .projects-swiper-btn.swiper-button-disabled {
        opacity: .45;
        cursor: not-allowed;
        transform: scale(1) !important;
        background: #fff !important;
        color: var(--primary-color) !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
        pointer-events: none;
    }

    .projects-swiper-pagination {
        bottom: 0 !important;
        position: absolute;
        left: 50% !important;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        z-index: 10;
    }

    .projects-swiper-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(240, 123, 94, 0.22);
        opacity: 1;
        transition: all .3s ease;
        margin: 0 !important;
        cursor: pointer;
    }

    .projects-swiper-pagination .swiper-pagination-bullet-active {
        background: var(--primary-color);
        width: 28px;
        border-radius: 20px;
    }

    @media (max-width: 1200px) {
        .projects-swiper-container {
            padding: 0 35px;
        }

        .projects-swiper-btn {
            width: 48px;
            height: 48px;
            font-size: 14px;
        }

        .projects-swiper-prev {
            left: -12px;
        }

        .projects-swiper-next {
            right: -12px;
        }
    }

    @media(max-width: 991px) {
        .projects-swiper-container {
            padding: 0;
        }

        .projects-swiper-btn {
            display: none;
        }

        .projects-swiper {
            padding: 8px 0 52px;
        }
    }

    .project-card {

        background: #fff;

        border-radius: 26px;

        overflow: hidden;

        border: 1px solid rgba(15, 23, 42, 0.06);

        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);

        transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s cubic-bezier(.22, .61, .36, 1), border-color .4s cubic-bezier(.22, .61, .36, 1);

        will-change: transform, box-shadow;

        display: flex;

        flex-direction: column;

    }

    .project-card:hover {

        transform: translateY(-12px);

        box-shadow: 0 30px 60px rgba(240, 123, 94, 0.18);

        border-color: rgba(240, 123, 94, 0.25);

    }

    .project-image {

        position: relative;

        overflow: hidden;

        aspect-ratio: 16/11;

    }

    .project-image img {

        width: 100%;

        height: 100%;

        object-fit: cover;

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

        display: block;

    }

    .project-card:hover .project-image img {

        transform: scale(1.1);

    }

    .project-tag {

        position: absolute;

        top: 20px;

        left: 20px;

        display: inline-block;

        padding: 9px 18px;

        background: rgba(255, 255, 255, 0.94);

        color: var(--primary-color);

        font-size: 13px;

        font-weight: 700;

        letter-spacing: .2px;

        border-radius: 999px;

        backdrop-filter: blur(6px);

        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);

        z-index: 2;

    }

    .project-tag--sage {

        color: #2BAE66;

        background: rgba(234, 247, 237, 0.95);

    }

    .project-tag--coral {

        color: #fff;

        background: linear-gradient(90deg, var(--primary-color), #ff9475);

    }

    .project-body {

        padding: 28px 28px 24px;

        display: flex;

        flex-direction: column;

        flex: 1;

    }

    .project-meta {

        display: flex;

        align-items: center;

        gap: 16px;

        flex-wrap: wrap;

        margin-bottom: 14px;

    }

    .project-meta span {

        display: inline-flex;

        align-items: center;

        gap: 7px;

        font-size: 13.5px;

        color: #6B7280;

        font-weight: 500;

    }

    .project-meta span i {

        color: var(--primary-color);

        font-size: 13px;

    }

    .project-body h3 {

        font-size: 22px;

        font-weight: 800;

        color: #111;

        line-height: 1.35;

        margin: 0 0 12px;

        transition: color .3s ease;

        /* Ensure consistent title height */
        min-height: 60px;

    }

    .project-card:hover .project-body h3 {

        color: var(--primary-color);

    }

    .project-body>p {

        font-size: 15px;

        line-height: 1.72;

        color: #5E6A79;

        margin: 0;

        flex: 1;

        /* Ensure consistent description height and clamp to 3 lines */
        min-height: 78px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;

    }

    .project-foot {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding-top: 18px;

        border-top: 1px solid rgba(15, 23, 42, 0.07);

    }

    .project-stat {

        display: flex;

        flex-direction: column;

        line-height: 1.1;

    }

    .project-stat strong {

        font-size: 23px;

        font-weight: 800;

        color: var(--primary-color);

        margin-bottom: 5px;

    }

    .project-stat small {

        font-size: 12.5px;

        color: #6B7280;

        font-weight: 600;

        letter-spacing: .2px;

    }

    .project-link {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 46px;

        height: 46px;

        border-radius: 16px;

        background: #FFF1EC;

        color: var(--primary-color);

        font-size: 15px;

        transition: all .3s ease;

    }

    .project-link:hover {

        background: var(--primary-color);

        color: #fff;

        transform: rotate(-10deg);

    }

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

    @media(max-width:1200px) {

        .projects-heading {
            margin-bottom: 40px;
        }

        .projects-heading h2 {
            font-size: 38px;
        }

        .projects-cta-bottom {
            margin-top: 44px;
        }

        .projects-grid {

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

            gap: 26px;

        }

        .project-body {
            padding: 24px 24px 20px;
        }

        .project-body h3 {
            font-size: 20px;
        }

        .project-body>p {
            font-size: 14.5px;
            margin-bottom: 16px;
        }

        .project-stat strong {
            font-size: 21px;
        }

        .project-link {
            width: 43px;
            height: 43px;
        }

    }

    @media(max-width:991px) {

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

        .projects-section::before {
            width: 260px;
            height: 260px;
            top: -40px;
            left: -60px;
        }

        .projects-section::after {
            width: 300px;
            height: 300px;
            bottom: -60px;
            right: -60px;
        }

        .projects-container {
            padding: 0 20px;
        }

        .projects-heading {
            margin-bottom: 40px;
        }

        .projects-heading h2 {
            font-size: 35px;
        }

        .projects-cta-bottom {
            margin-top: 42px;
        }

        .projects-grid {

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

            gap: 26px;

        }

        .project-body {
            padding: 24px 24px 20px;
        }

        .project-body h3 {
            font-size: 19.5px;
        }

        .project-body>p {
            font-size: 14.5px;
        }

    }

    @media(max-width:768px) {

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

        .projects-section::before {
            width: 220px;
            height: 220px;
            top: -30px;
            left: -50px;
        }

        .projects-section::after {
            width: 240px;
            height: 240px;
            bottom: -40px;
            right: -50px;
        }

        .projects-container {
            padding: 0 18px;
        }

        .projects-heading {
            margin-bottom: 36px;
        }

        .projects-heading h2 {
            font-size: 31px;
        }

        .projects-cta-bottom {
            margin-top: 38px;
        }

        .projects-view-all {
            padding: 14px 28px;
            font-size: 14.5px;
        }

        .projects-grid {
            gap: 24px;
        }

        .project-tag {
            top: 16px;
            left: 16px;
            padding: 7px 14px;
            font-size: 12px;
        }

        .project-body {
            padding: 22px 22px 18px;
        }

        .project-meta {
            gap: 13px;
            margin-bottom: 11px;
        }

        .project-meta span {
            font-size: 12.5px;
        }

        .project-body h3 {
            font-size: 18.5px;
            margin-bottom: 9px;
        }

        .project-body>p {
            font-size: 14px;
            line-height: 1.65;
            margin-bottom: 15px;
        }

        .project-foot {
            padding-top: 14px;
        }

        .project-stat strong {
            font-size: 19px;
        }

        .project-stat small {
            font-size: 11.5px;
        }

        .project-link {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            font-size: 13.5px;
        }

    }

    @media(max-width:576px) {

        .projects-section {
            padding: 55px 0;
        }

        .projects-section::before {
            display: none;
        }

        .projects-section::after {
            display: none;
        }

        .projects-container {
            padding: 0 18px;
        }

        .projects-heading {
            margin-bottom: 32px;
        }

        .projects-heading h2 {
            font-size: 27px;
            margin: 0;
        }

        .projects-cta-bottom {
            margin-top: 36px;
        }

        .projects-view-all {
            width: 100%;
            justify-content: center;
        }

        .projects-grid {

            grid-template-columns: 1fr;

            gap: 24px;

        }

        .project-card {
            border-radius: 22px;
        }

        .project-tag {
            top: 16px;
            left: 16px;
            padding: 7px 14px;
            font-size: 12px;
        }

        .project-body {
            padding: 22px 22px 18px;
        }

        .project-body h3 {
            font-size: 19px;
        }

        .project-body>p {
            font-size: 14.5px;
        }

        .project-stat strong {
            font-size: 20px;
        }

        .project-stat small {
            font-size: 11.5px;
        }

        .project-link {
            width: 43px;
            height: 43px;
            border-radius: 14px;
            font-size: 14px;
        }

    }

    @media(max-width:400px) {

        .projects-section {
            padding: 50px 0;
        }

        .projects-container {
            padding: 0 16px;
        }

        .projects-heading {
            margin-bottom: 28px;
        }

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

        .projects-cta-bottom {
            margin-top: 32px;
        }

        .projects-view-all {
            padding: 13px 22px;
            font-size: 14px;
        }

        .projects-grid {
            gap: 20px;
        }

        .project-card {
            border-radius: 20px;
        }

        .project-tag {
            top: 12px;
            left: 12px;
            padding: 6px 12px;
            font-size: 11px;
        }

        .project-body {
            padding: 18px 18px 16px;
        }

        .project-meta {
            gap: 10px;
        }

        .project-meta span {
            font-size: 11.5px;
        }

        .project-body h3 {
            font-size: 16.5px;
        }

        .project-body>p {
            font-size: 13.5px;
            line-height: 1.63;
            margin-bottom: 12px;
        }

        .project-foot {
            padding-top: 10px;
        }

        .project-stat strong {
            font-size: 17px;
        }

        .project-stat small {
            font-size: 10.5px;
        }

        .project-link {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            font-size: 12.5px;
        }

    }


    /*==========================
    TESTIMONIALS SECTION (SWIPER CAROUSEL)
===========================*/

    .testimonials-section {

        padding: 60px 0;

        background: #ffffff;

        position: relative;

        overflow: hidden;

    }

    .testimonials-section::before {

        content: "";

        position: absolute;

        top: -80px;

        right: -60px;

        width: 340px;

        height: 340px;

        border-radius: 50%;

        background: radial-gradient(circle, rgba(240, 123, 94, 0.14) 0%, rgba(240, 123, 94, 0) 70%);

        pointer-events: none;

    }

    .testimonials-section::after {

        content: "";

        position: absolute;

        bottom: -100px;

        left: -70px;

        width: 380px;

        height: 380px;

        border-radius: 50%;

        background: radial-gradient(circle, rgba(43, 174, 102, 0.10) 0%, rgba(43, 174, 102, 0) 70%);

        pointer-events: none;

    }

    .testimonials-container {

        max-width: 1360px;

        margin: auto;

        padding: 0 76px;

        position: relative;

        z-index: 1;

    }

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

    .testimonials-heading {

        text-align: center;

        margin: 0 0 44px;

    }

    .testimonials-heading h2 {

        font-size: 40px;

        line-height: 1.18;

        color: #111;

        font-weight: 800;

        margin: 0;

    }

    /* ============== SWIPER CAROUSEL ============== */

    .testimonials-swiper {

        padding: 16px 8px 58px 8px;

        position: relative;

    }

    .testimonials-swiper .swiper-wrapper {

        align-items: stretch;

    }

    .testimonials-swiper .swiper-slide {

        height: auto;

    }

    /* ============== CARDS ============== */

    .testimonial-card {

        background: #fff;

        border-radius: 24px;

        padding: 34px 30px 28px;

        height: 100%;

        position: relative;

        border: 1px solid rgba(15, 23, 42, 0.05);

        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);

        transition: all .4s cubic-bezier(.22, .61, .36, 1);

        display: flex;

        flex-direction: column;

    }

    .testimonial-card:hover {

        transform: translateY(-6px);

        box-shadow: 0 28px 55px rgba(240, 123, 94, 0.18);

        border-color: rgba(240, 123, 94, 0.22);

    }

    .testimonial-card--feature {

        background: linear-gradient(160deg, #ffffff 0%, #FFF1EC 100%);

        border-color: rgba(240, 123, 94, 0.20);

        box-shadow: 0 22px 45px rgba(240, 123, 94, 0.14);

    }

    .testimonial-card--feature:hover {

        box-shadow: 0 32px 60px rgba(240, 123, 94, 0.24);

    }

    .testimonial-quote {

        position: absolute;

        top: 26px;

        right: 28px;

        width: 44px;

        height: 44px;

        border-radius: 14px;

        background: linear-gradient(135deg, #FFF1EC 0%, #FFE1D6 100%);

        color: var(--primary-color);

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 16px;

    }

    .testimonial-card--feature .testimonial-quote {

        background: linear-gradient(135deg, var(--primary-color), #ff9475);

        color: #fff;

    }

    .testimonial-stars {

        display: flex;

        align-items: center;

        gap: 4px;

        margin-bottom: 18px;

        color: #F6B000;

        font-size: 15px;

    }

    .testimonial-text {

        color: #3F4858;

        line-height: 1.75;

        font-size: 15.5px;

        margin: 0 0 26px;

        flex: 1;

    }

    .testimonial-author {

        display: flex;

        align-items: center;

        gap: 14px;

        padding-top: 20px;

        border-top: 1px solid rgba(15, 23, 42, 0.07);

    }

    .author-avatar {

        width: 50px;

        height: 50px;

        border-radius: 16px;

        background: linear-gradient(135deg, #F07B5E, #ff9475);

        color: #fff;

        font-weight: 800;

        font-size: 16px;

        display: flex;

        align-items: center;

        justify-content: center;

        letter-spacing: .3px;

        box-shadow: 0 8px 18px rgba(240, 123, 94, 0.22);

        flex-shrink: 0;

    }

    .author-avatar--sage {

        background: linear-gradient(135deg, #2BAE66, #34c779);

        box-shadow: 0 8px 18px rgba(43, 174, 102, 0.24);

    }

    .author-avatar--coral {

        background: linear-gradient(135deg, #E86446, #F07B5E);

        box-shadow: 0 8px 18px rgba(232, 100, 70, 0.26);

    }

    .author-info {

        display: flex;

        flex-direction: column;

        line-height: 1.2;

    }

    .author-info strong {

        font-size: 15.5px;

        color: #111;

        font-weight: 800;

        margin-bottom: 5px;

    }

    .author-info small {

        font-size: 12.5px;

        color: #6B7280;

        font-weight: 500;

    }

    /* ============== SWIPER NAV BUTTONS ============== */

    .testimonial-swiper-btn {

        position: absolute;

        top: calc(50% - 40px);

        width: 54px;

        height: 54px;

        border-radius: 50%;

        background: #fff;

        color: var(--primary-color);

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        z-index: 12;

        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);

        border: 1px solid rgba(229, 231, 235, .9);

        font-size: 16px;

        transition: all .35s cubic-bezier(.22, .61, .36, 1);

    }

    .testimonial-swiper-btn:hover {

        background: linear-gradient(135deg, var(--primary-color), #ff9475);

        color: #fff;

        box-shadow: 0 16px 40px rgba(240, 123, 94, 0.4);

        border-color: transparent;

        transform: scale(1.08);

    }

    .testimonial-swiper-prev {

        left: 10px;

    }

    .testimonial-swiper-next {

        right: 10px;

    }

    .testimonial-swiper-btn.swiper-button-disabled {

        opacity: .45;

        cursor: not-allowed;

        transform: scale(1) !important;

        background: #fff !important;

        color: var(--primary-color) !important;

        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;

        border-color: rgba(229, 231, 235, .8) !important;

    }

    @media (min-width:1200px) {

        .testimonial-swiper-prev {
            left: 10px;
        }

        .testimonial-swiper-next {
            right: 10px;
        }

    }

    @media (min-width:1400px) {

        .testimonials-container {
            padding: 0 80px;
        }

        .testimonial-swiper-prev {
            left: 12px;
        }

        .testimonial-swiper-next {
            right: 12px;
        }

    }

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

    .testimonial-swiper-pagination {

        bottom: 0 !important;

        position: absolute;

        left: 50% !important;

        transform: translateX(-50%);

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

    }

    .testimonial-swiper-pagination .swiper-pagination-bullet {

        width: 10px;

        height: 10px;

        border-radius: 50%;

        background: rgba(240, 123, 94, 0.22);

        opacity: 1;

        transition: all .3s ease;

        margin: 0 !important;

    }

    .testimonial-swiper-pagination .swiper-pagination-bullet-active {

        background: var(--primary-color);

        width: 28px;

        border-radius: 20px;

    }

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

    @media(max-width:1200px) {

        .testimonials-container {
            padding: 0 64px;
        }

        .testimonials-heading {
            margin-bottom: 40px;
        }

        .testimonials-heading h2 {
            font-size: 36px;
        }

        .testimonials-swiper {
            padding: 12px 6px 54px 6px;
        }

        .testimonial-swiper-btn {

            width: 48px;
            height: 48px;

            border-radius: 50%;

            font-size: 14px;

        }

        .testimonial-card {
            padding: 30px 26px 24px;
        }

        .testimonial-quote {
            top: 24px;
            right: 24px;
            width: 40px;
            height: 40px;
            border-radius: 13px;
            font-size: 15px;
        }

        .testimonial-text {
            font-size: 15px;
            margin-bottom: 24px;
            line-height: 1.72;
        }

    }

    @media(max-width:991px) {

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

        .testimonials-section::before {
            width: 260px;
            height: 260px;
            top: -50px;
            right: -50px;
        }

        .testimonials-section::after {
            width: 280px;
            height: 280px;
            bottom: -60px;
            left: -60px;
        }

        .testimonials-container {
            padding: 0 20px;
        }

        .testimonials-heading {
            margin-bottom: 38px;
        }

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

        .testimonials-swiper {
            padding: 8px 0 52px;
        }

        .testimonial-swiper-btn {
            display: none;
        }

        .testimonial-card {
            padding: 30px 28px 24px;
        }

        .testimonial-text {
            font-size: 15px;
        }

    }

    @media(max-width:768px) {

        .testimonials-section {
            padding: 55px 0;
        }

        .testimonials-section::before {
            width: 220px;
            height: 220px;
            top: -30px;
            right: -40px;
        }

        .testimonials-section::after {
            width: 240px;
            height: 240px;
            bottom: -40px;
            left: -40px;
        }

        .testimonials-container {
            padding: 0 18px;
        }

        .testimonials-heading {
            margin-bottom: 34px;
        }

        .testimonials-heading h2 {
            font-size: 30px;
        }

        .testimonials-swiper {
            padding: 6px 0 48px;
        }

        .testimonial-card {
            padding: 28px 24px 22px;
            border-radius: 22px;
        }

        .testimonial-quote {
            top: 22px;
            right: 22px;
            width: 38px;
            height: 38px;
            border-radius: 12px;
            font-size: 14px;
        }

        .testimonial-stars {
            gap: 3px;
            font-size: 14px;
            margin-bottom: 16px;
        }

        .testimonial-text {
            font-size: 14.5px;
            line-height: 1.68;
            margin-bottom: 22px;
        }

        .author-avatar {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            font-size: 15px;
        }

        .author-info strong {
            font-size: 15px;
            margin-bottom: 4px;
        }

        .author-info small {
            font-size: 12px;
        }

        .testimonial-author {
            padding-top: 18px;
            gap: 12px;
        }

    }

    @media(max-width:576px) {

        .testimonials-section {
            padding: 50px 0;
        }

        .testimonials-section::before {
            display: none;
        }

        .testimonials-section::after {
            display: none;
        }

        .testimonials-container {
            padding: 0 18px;
        }

        .testimonials-heading {
            margin-bottom: 30px;
        }

        .testimonials-heading h2 {
            font-size: 26px;
        }

        .testimonials-swiper {
            padding: 4px 0 44px;
        }

        .testimonial-card {
            padding: 26px 22px 22px;
            border-radius: 20px;
        }

        .testimonial-quote {
            top: 20px;
            right: 20px;
            width: 36px;
            height: 36px;
            border-radius: 12px;
            font-size: 13.5px;
        }

        .testimonial-stars {
            margin-bottom: 14px;
        }

        .testimonial-text {
            font-size: 14.5px;
            line-height: 1.68;
            margin-bottom: 20px;
        }

        .author-avatar {
            width: 44px;
            height: 44px;
            border-radius: 13px;
            font-size: 14.5px;
        }

        .author-info strong {
            font-size: 14.5px;
        }

        .author-info small {
            font-size: 11.5px;
        }

        .testimonial-author {
            padding-top: 16px;
        }

        .testimonial-swiper-pagination {
            gap: 7px;
        }

        .testimonial-swiper-pagination .swiper-pagination-bullet {
            width: 9px;
            height: 9px;
        }

        .testimonial-swiper-pagination .swiper-pagination-bullet-active {
            width: 24px;
        }

    }

    @media(max-width:400px) {

        .testimonials-section {
            padding: 45px 0;
        }

        .testimonials-container {
            padding: 0 16px;
        }

        .testimonials-heading {
            margin-bottom: 26px;
        }

        .testimonials-heading h2 {
            font-size: 23px;
        }

        .testimonials-swiper {
            padding: 2px 0 40px;
        }

        .testimonial-card {
            padding: 24px 20px 20px;
            border-radius: 18px;
        }

        .testimonial-quote {
            display: none;
        }

        .testimonial-stars {
            font-size: 13px;
            margin-bottom: 12px;
        }

        .testimonial-text {
            font-size: 14px;
            line-height: 1.65;
            margin-bottom: 18px;
        }

        .author-avatar {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            font-size: 14px;
        }

        .author-info strong {
            font-size: 14px;
            margin-bottom: 3px;
        }

        .author-info small {
            font-size: 11px;
        }

        .testimonial-author {
            padding-top: 14px;
            gap: 10px;
        }

        .testimonial-swiper-pagination .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
        }

        .testimonial-swiper-pagination .swiper-pagination-bullet-active {
            width: 20px;
        }

    }


    /*==========================
    SERVICES SECTION
===========================*/

    .services-section {

        padding: 60px 0;

        background: #FFF1EC;

        position: relative;

    }

    .services-section .container {

        max-width: 1320px;

        margin: auto;

        padding: 0 24px;

    }

    .services-heading {

        text-align: center;

        max-width: 720px;

        margin: 0 auto 46px;

    }

    .services-heading .section-badge {

        margin-bottom: 18px;

    }

    .services-heading h2 {

        font-size: 48px;

        line-height: 1.15;

        color: #111;

        font-weight: 800;

    }

    .services-heading h2 span {

        color: var(--primary-color);

    }

    .services-heading p {

        font-size: 17px;

        color: #666;

        line-height: 1.8;

    }

    .services-grid {

        display: grid;

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

        gap: 24px;

    }

    /* ===== Services Swiper Slider ===== */
    .services-swiper-container {
        position: relative;
        padding: 0 54px;
        margin-top: 10px;
    }

    .services-swiper {
        padding: 10px 0 58px;
        position: relative;
        overflow: hidden;
    }

    .services-swiper .swiper-wrapper {
        align-items: stretch;
        transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important;
        will-change: transform;
    }

    .services-swiper .swiper-slide {
        height: auto;
        display: flex;
    }

    .services-swiper .swiper-slide .service-card {
        height: 100%;
        width: 100%;
        transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s cubic-bezier(.22, .61, .36, 1), border-color .35s cubic-bezier(.22, .61, .36, 1);
        will-change: transform;
    }

    .services-swiper-btn {
        position: absolute;
        top: calc(50% - 32px);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #ffffff;
        color: #1F2937;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 15;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
        border: 1px solid #e2e8f0;
        font-size: 15px;
        transition: all .3s cubic-bezier(.22, .61, .36, 1);
    }

    .services-swiper-btn:hover {
        background: #EE775A;
        color: #ffffff;
        box-shadow: 0 10px 28px rgba(238, 119, 90, 0.4);
        border-color: #EE775A;
        transform: scale(1.08);
    }

    .services-swiper-prev {
        left: 2px;
    }

    .services-swiper-next {
        right: 2px;
    }

    .services-swiper-btn.swiper-button-disabled {
        opacity: .35;
        cursor: not-allowed;
        transform: scale(1) !important;
        background: #fff !important;
        color: #94a3b8 !important;
        box-shadow: none !important;
        pointer-events: none;
    }

    .services-swiper-pagination {
        bottom: 0 !important;
        position: absolute;
        left: 50% !important;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        z-index: 10;
    }

    .services-swiper-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(240, 123, 94, 0.22);
        opacity: 1;
        transition: all .3s ease;
        margin: 0 !important;
        cursor: pointer;
    }

    .services-swiper-pagination .swiper-pagination-bullet-active {
        background: var(--primary-color);
        width: 28px;
        border-radius: 20px;
    }

    @media (max-width: 1200px) {
        .services-swiper-container {
            padding: 0 35px;
        }

        .services-swiper-btn {
            width: 48px;
            height: 48px;
            font-size: 14px;
        }

        .services-swiper-prev {
            left: -12px;
        }

        .services-swiper-next {
            right: -12px;
        }
    }

    @media(max-width: 991px) {
        .services-swiper-container {
            padding: 0;
        }

        .services-swiper-btn {
            display: none;
        }

        .services-swiper {
            padding: 8px 0 52px;
        }
    }


    .service-card {

        background: #fff;

        border-radius: 22px;

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

        box-shadow: var(--shadow-sm);

        transition: all .35s cubic-bezier(.4, 0, .2, 1);

        display: flex;

        flex-direction: column;

        position: relative;

        overflow: hidden;

    }

    .service-card:hover {

        transform: translateY(-7px);

        box-shadow: 0 28px 65px rgba(15, 23, 42, .10);

        border-color: transparent;

    }

    .service-image {

        position: relative;

        aspect-ratio: 4 / 3;

        overflow: hidden;

        width: 100%;

    }

    .service-image img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center;

        transition: transform .6s cubic-bezier(.4, 0, .2, 1);

        display: block;

    }

    .service-card:hover .service-image img {

        transform: scale(1.08);

    }

    .service-image::after {

        content: '';

        position: absolute;

        inset: 0;

        background: linear-gradient(180deg,
                rgba(15, 23, 42, .35) 0%,
                rgba(15, 23, 42, 0) 55%,
                rgba(15, 23, 42, 0) 100%);

        opacity: .7;

        pointer-events: none;

        transition: opacity .35s ease;

    }

    .service-card:hover .service-image::after {

        background: linear-gradient(180deg,
                rgba(240, 123, 94, .55) 0%,
                rgba(240, 123, 94, .12) 55%,
                rgba(15, 23, 42, 0) 100%);

        opacity: 1;

    }

    .service-image-icon {

        position: absolute;

        top: 16px;

        left: 16px;

        z-index: 2;

        width: 46px;

        height: 46px;

        border-radius: 14px;

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

        backdrop-filter: blur(8px);

        color: var(--primary-color);

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 20px;

        box-shadow: 0 8px 22px rgba(0, 0, 0, .14);

        transition: all .35s ease;

    }

    .service-card:hover .service-image-icon {

        background: var(--primary-color);

        color: #fff;

        transform: scale(1.08) rotate(-5deg);

        box-shadow: 0 10px 26px rgba(240, 123, 94, .35);

    }

    .service-body {

        padding: 26px 22px 24px;

        display: flex;

        flex-direction: column;

        flex-grow: 1;

    }

    .service-body h3 {

        font-size: 19px;

        color: #111;

        margin-bottom: 10px;

        font-weight: 700;

        line-height: 1.35;

        transition: color .3s ease;

        /* Ensure consistent height for 1 and 2 line titles */
        min-height: 52px;

    }

    .service-card:hover h3 {

        color: var(--primary-color);

    }

    .service-body p {

        color: #666;

        line-height: 1.7;

        font-size: 14.5px;

        margin-bottom: 18px;

        flex-grow: 1;

        /* Ensure consistent height for descriptions and clamp to 4 lines */
        min-height: 98px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;

    }

    .service-link {

        display: inline-flex;

        align-items: center;

        gap: 8px;

        font-weight: 600;

        color: var(--primary-color);

        font-size: 14px;

        transition: all .3s ease;

    }

    .service-link i {

        font-size: 12px;

        transition: transform .3s ease;

    }

    .service-card:hover .service-link i {

        transform: translateX(4px);

    }

    .services-cta {

        text-align: center;

        margin-top: 50px;

    }

    .services-cta .btn-primary {

        display: inline-flex;

        align-items: center;

        gap: 10px;

        padding: 18px 38px;

    }

    .services-cta .btn-primary i {

        font-size: 15px;

    }

    /* ===== Services Responsive ===== */

    @media(max-width:1200px) {

        .services-heading h2 {
            font-size: 42px;
        }

        .services-grid {
            gap: 20px;
        }

        .service-body {
            padding: 24px 20px 22px;
        }

        .service-body h3 {
            font-size: 18px;
        }

        .service-image-icon {
            width: 44px;
            height: 44px;
            font-size: 19px;
            top: 14px;
            left: 14px;
        }

    }

    @media(max-width:991px) {

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

        .services-section .container {
            padding: 0 20px;
        }

        .services-heading {

            padding: 0;

            margin-bottom: 40px;

            max-width: 620px;

        }

        .services-heading h2 {
            font-size: 36px;
        }

        .services-grid {

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

            gap: 22px;

        }

        .service-card {
            border-radius: 20px;
        }

        .service-image-icon {

            width: 48px;
            height: 48px;

            font-size: 20px;

            top: 16px;
            left: 16px;

            border-radius: 14px;

        }

        .service-body {

            padding: 24px 22px 22px;

        }

        .service-body h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .service-body p {
            font-size: 14px;
            margin-bottom: 16px;
        }

        .services-cta {
            margin-top: 42px;
        }

    }

    @media(max-width:768px) {

        .services-section {
            padding: 55px 0;
        }

        .services-section .container {
            padding: 0 18px;
        }

        .services-heading {
            margin-bottom: 36px;
        }

        .services-heading h2 {
            font-size: 32px;
        }

        .services-grid {
            gap: 18px;
        }

        .service-card {
            border-radius: 18px;
        }

        .service-image-icon {

            width: 44px;
            height: 44px;

            font-size: 18px;

            top: 14px;
            left: 14px;

            border-radius: 12px;

        }

        .service-body {

            padding: 22px 20px 20px;

        }

        .service-body h3 {
            font-size: 17px;
        }

        .service-body p {
            font-size: 14px;
            line-height: 1.65;
            margin-bottom: 16px;
        }

        .service-link {
            font-size: 13px;
        }

        .services-cta {
            margin-top: 38px;
        }

        .services-cta .btn-primary {
            padding: 16px 32px;
            font-size: 15px;
        }

    }

    @media(max-width:576px) {

        .services-section {
            padding: 50px 0;
        }

        .services-section .container {
            padding: 0 18px;
        }

        .services-heading {
            margin-bottom: 32px;
        }

        .services-heading h2 {

            font-size: 28px;

            line-height: 1.2;

        }

        .services-grid {

            grid-template-columns: 1fr;

            gap: 16px;

        }

        .service-card {

            border-radius: 18px;

        }

        .service-image-icon {

            width: 46px;
            height: 46px;

            font-size: 19px;

            top: 16px;
            left: 16px;

            border-radius: 13px;

        }

        .service-body {

            padding: 22px 20px 20px;

        }

        .service-body h3 {
            font-size: 17px;
            margin-bottom: 10px;
        }

        .service-body p {
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 16px;
        }

        .service-link {
            font-size: 13px;
        }

        .services-cta {
            margin-top: 34px;
        }

        .services-cta .btn-primary {

            width: 100%;

            justify-content: center;

            padding: 15px 26px;

            font-size: 15px;

            border-radius: 48px;

        }

    }

    @media(max-width:400px) {

        .services-section {
            padding: 45px 0;
        }

        .services-section .container {
            padding: 0 16px;
        }

        .services-heading {
            margin-bottom: 28px;
        }

        .services-heading h2 {
            font-size: 24px;
            line-height: 1.22;
        }

        .services-grid {
            gap: 14px;
        }

        .service-card {

            border-radius: 16px;

        }

        .service-image-icon {

            width: 42px;
            height: 42px;

            font-size: 17px;

            top: 14px;
            left: 14px;

            border-radius: 12px;

        }

        .service-body {

            padding: 20px 18px 18px;

        }

        .service-body h3 {
            font-size: 16px;
            margin-bottom: 8px;
        }

        .service-body p {
            font-size: 13px;
            line-height: 1.68;
            margin-bottom: 14px;
        }

        .services-cta {
            margin-top: 30px;
        }

        .services-cta .btn-primary {
            padding: 14px 24px;
            font-size: 14px;
        }

    }


    /*=====================================
  REUSABLE SECTION RESPONSIVE BASES
  =====================================*/

    /* Standard headings utility */
    .section-heading {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 50px;
    }

    .section-heading .section-badge {
        margin-bottom: 18px;
    }

    .section-heading h2 {
        font-size: 46px;
        line-height: 1.2;
        color: #111;
        font-weight: 800;
        margin-bottom: 16px;
    }

    .section-heading h2 span {
        color: var(--primary-color);
    }

    .section-heading p {
        font-size: 17px;
        color: #666;
        line-height: 1.8;
    }

    /* Generic cards grid (services, features, etc) */
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .card {
        background: #fff;
        border-radius: 20px;
        padding: 32px 28px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border);
        transition: all .35s ease;
    }

    .card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow);
        border-color: transparent;
    }

    .card .card-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--primary-light), #FFE4D9);
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        margin-bottom: 22px;
        transition: .3s;
    }

    .card:hover .card-icon {
        background: var(--primary-color);
        color: #fff;
        transform: rotate(-5deg) scale(1.05);
    }

    .card h3 {
        font-size: 22px;
        color: #111;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .card p {
        color: #666;
        line-height: 1.75;
        font-size: 15px;
    }

    /* Stats strip */
    .stats-strip {
        padding: 60px 0;
        background: linear-gradient(135deg, #F4F9F4 0%, #FFF 45%, #FFF8F6 100%);
    }

    .stats-strip-inner {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 24px;
        text-align: center;
    }

    .stat {
        background: #fff;
        padding: 30px 22px;
        border-radius: 18px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border);
        transition: .3s;
    }

    .stat:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow);
    }

    .stat-num {
        display: block;
        font-size: 44px;
        font-weight: 800;
        color: var(--primary-color);
        line-height: 1;
        margin-bottom: 8px;
    }

    .stat-label {
        display: block;
        color: #666;
        font-weight: 600;
        font-size: 14px;
    }

    /* CTA section */
    .cta-section {
        padding: 60px 0;
        background: #fff;
    }

    .cta-card {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .cta-inner {
        background: linear-gradient(135deg, var(--primary-color), #f5a68c);
        border-radius: 28px;
        padding: 60px 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        color: #fff;
    }

    .cta-inner h2 {
        font-size: 40px;
        line-height: 1.2;
        font-weight: 800;
        color: #fff;
        margin-bottom: 10px;
    }

    .cta-inner p {
        font-size: 17px;
        opacity: .95;
    }

    .cta-inner .btn-cta {
        background: #fff;
        color: var(--primary-color);
        padding: 18px 36px;
        border-radius: 50px;
        font-weight: 700;
        white-space: nowrap;
        transition: .3s;
    }

    .cta-inner .btn-cta:hover {
        background: #111;
        color: #fff;
        transform: translateY(-2px);
    }

    /* Footer base */
    .footer {
        background: #0F172A;
        color: #CBD5E1;
        padding: 60px 0 30px;
    }

    .footer a {
        color: #94A3B8;
    }

    .footer a:hover {
        color: var(--primary-color);
    }

    .footer-inner {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 24px;
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 50px;
        margin-bottom: 40px;
    }

    .footer-col h4 {
        color: #fff;
        font-size: 17px;
        margin-bottom: 20px;
        font-weight: 700;
    }

    .footer-col li {
        margin-bottom: 12px;
        font-size: 15px;
    }

    .footer-bottom {
        max-width: 1320px;
        margin: 0 auto;
        padding: 24px 24px 0;
        border-top: 1px solid rgba(148, 163, 184, .15);
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #94A3B8;
        font-size: 14px;
    }

    /* ===== Responsive for reusable sections ===== */
    @media(max-width:1200px) {
        .section-heading h2 {
            font-size: 40px;
        }

        .cards-grid {
            gap: 24px;
        }

        .cta-inner h2 {
            font-size: 34px;
        }

        .footer-inner {
            gap: 35px;
        }
    }

    @media(max-width:991px) {
        .section-heading {
            padding: 0 20px;
            margin-bottom: 42px;
        }

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

        .section-heading p {
            font-size: 16px;
        }

        .cards-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 22px;
            padding: 0 20px;
        }

        .card {
            padding: 28px 24px;
        }

        .stats-strip-inner {
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
            padding: 0 20px;
        }

        .stat-num {
            font-size: 40px;
        }

        .cta-inner {
            flex-direction: column;
            text-align: center;
            padding: 48px 34px;
            gap: 28px;
            border-radius: 22px;
        }

        .cta-inner h2 {
            font-size: 30px;
        }

        .cta-inner p {
            font-size: 16px;
        }

        .footer-inner {
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            padding: 0 20px;
        }

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

    @media(max-width:768px) {
        .section-heading {
            padding: 0 18px;
            margin-bottom: 38px;
        }

        .section-heading h2 {
            font-size: 30px;
            margin-bottom: 12px;
        }

        .section-heading .section-badge {
            font-size: 12px;
            padding: 8px 16px;
            margin-bottom: 14px;
        }

        .section-heading p {
            font-size: 15px;
        }

        .cards-grid {
            grid-template-columns: 1fr;
            gap: 18px;
            padding: 0 18px;
        }

        .card {
            padding: 24px 22px;
            border-radius: 18px;
        }

        .card .card-icon {
            width: 56px;
            height: 56px;
            font-size: 22px;
            border-radius: 14px;
            margin-bottom: 18px;
        }

        .card h3 {
            font-size: 19px;
        }

        .card p {
            font-size: 14px;
        }

        .stats-strip {
            padding: 50px 0;
        }

        .stats-strip-inner {
            gap: 14px;
            padding: 0 18px;
        }

        .stat {
            padding: 24px 18px;
            border-radius: 16px;
        }

        .stat-num {
            font-size: 34px;
        }

        .stat-label {
            font-size: 13px;
        }

        .cta-card {
            padding: 0 18px;
        }

        .cta-inner {
            padding: 42px 28px;
            border-radius: 20px;
            gap: 24px;
        }

        .cta-inner h2 {
            font-size: 26px;
        }

        .cta-inner p {
            font-size: 15px;
        }

        .cta-inner .btn-cta {
            padding: 15px 30px;
            font-size: 15px;
        }

        .footer {
            padding: 50px 0 25px;
        }

        .footer-inner {
            grid-template-columns: 1fr;
            gap: 34px;
            padding: 0 18px;
        }

        .footer-col h4 {
            font-size: 16px;
            margin-bottom: 16px;
        }

        .footer-bottom {
            font-size: 13px;
            padding: 20px 18px 0;
        }
    }

    @media(max-width:576px) {
        .section-heading {
            padding: 0 18px;
            margin-bottom: 34px;
        }

        .section-heading h2 {
            font-size: 26px;
            line-height: 1.25;
        }

        .section-heading .section-badge {
            font-size: 11px;
            padding: 7px 14px;
        }

        .section-heading p {
            font-size: 14px;
            line-height: 1.7;
        }

        .cards-grid {
            gap: 14px;
            padding: 0 16px;
        }

        .card {
            padding: 22px 20px;
            border-radius: 16px;
        }

        .card .card-icon {
            width: 52px;
            height: 52px;
            font-size: 20px;
            border-radius: 13px;
            margin-bottom: 16px;
        }

        .card h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .card p {
            font-size: 14px;
            line-height: 1.7;
        }

        .stats-strip {
            padding: 45px 0;
        }

        .stats-strip-inner {
            gap: 12px;
            padding: 0 16px;
        }

        .stat {
            padding: 22px 14px;
            border-radius: 14px;
        }

        .stat-num {
            font-size: 30px;
            margin-bottom: 6px;
        }

        .stat-label {
            font-size: 12px;
        }

        .cta-card {
            padding: 0 16px;
        }

        .cta-inner {
            padding: 38px 24px;
            border-radius: 18px;
            gap: 22px;
        }

        .cta-inner h2 {
            font-size: 24px;
            line-height: 1.25;
        }

        .cta-inner p {
            font-size: 14px;
        }

        .cta-inner .btn-cta {
            padding: 14px 28px;
            font-size: 14px;
            width: 100%;
        }

        .footer {
            padding: 45px 0 22px;
        }

        .footer-inner {
            gap: 30px;
            padding: 0 16px;
        }

        .footer-col h4 {
            font-size: 15px;
            margin-bottom: 14px;
        }

        .footer-col li {
            font-size: 14px;
            margin-bottom: 10px;
        }

        .footer-bottom {
            padding: 18px 16px 0;
            font-size: 12px;
            gap: 12px;
        }
    }

    @media(max-width:400px) {
        .section-heading h2 {
            font-size: 23px;
        }

        .section-heading p {
            font-size: 13px;
        }

        .cards-grid {
            gap: 12px;
            padding: 0 14px;
        }

        .card {
            padding: 20px 18px;
        }

        .stat {
            padding: 20px 12px;
        }

        .stat-num {
            font-size: 28px;
        }

        .cta-inner {
            padding: 34px 20px;
            gap: 20px;
        }

        .cta-inner h2 {
            font-size: 21px;
        }

        .cta-inner p {
            font-size: 13px;
        }

        .cta-inner .btn-cta {
            padding: 13px 24px;
            font-size: 13px;
        }
    }


    /*==========================
    WHY CHOOSE SECTION
===========================*/

    .why-choose-section {

        padding: 60px 0;

        background: #ffffff;

        position: relative;

        overflow: hidden;

    }

    .why-choose-section::before {

        content: "";

        position: absolute;

        width: 420px;

        height: 420px;

        border-radius: 50%;

        background: rgba(255, 255, 255, 0.55);

        top: -120px;

        left: -120px;

        z-index: 0;

    }

    .why-choose-section::after {

        content: "";

        position: absolute;

        width: 320px;

        height: 320px;

        border-radius: 50%;

        background: rgba(43, 174, 102, 0.06);

        bottom: -80px;

        right: -80px;

        z-index: 0;

    }

    .why-choose-section .container {

        max-width: 1320px;

        margin: auto;

        padding: 0 24px;

        position: relative;

        z-index: 2;

    }

    .why-choose-heading {

        text-align: center;

        max-width: 720px;

        margin: 0 auto 50px;

    }

    .why-choose-heading .section-badge {

        margin-bottom: 18px;

    }

    .why-choose-heading h2 {

        font-size: 48px;

        line-height: 1.15;

        color: #111;

        font-weight: 800;

        margin-bottom: 18px;

    }

    .why-choose-heading h2 span {

        color: var(--primary-color);

    }

    .why-choose-heading p {

        font-size: 17px;

        color: #666;

        line-height: 1.8;

    }

    .why-choose-grid {

        display: grid;

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

        gap: 24px;

    }

    .why-choose-card {

        background: #fff;

        border-radius: 22px;

        padding: 34px 28px 30px;

        box-shadow: 0 10px 30px rgba(15, 23, 42, .06);

        border: 1px solid rgba(229, 231, 235, .8);

        transition: all .38s cubic-bezier(.4, 0, .2, 1);

        position: relative;

        overflow: hidden;

    }

    .why-choose-card::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        height: 3px;

        background: linear-gradient(90deg, var(--primary-color), #f5a68c);

        transform: scaleX(0);

        transform-origin: left;

        transition: transform .45s cubic-bezier(.4, 0, .2, 1);

    }

    .why-choose-card:hover {

        transform: translateY(-8px);

        box-shadow: 0 28px 65px rgba(240, 123, 94, .12);

        border-color: transparent;

    }

    .why-choose-card:hover::before {

        transform: scaleX(1);

    }

    .why-choose-icon {

        width: 68px;

        height: 68px;

        border-radius: 18px;

        background: linear-gradient(135deg, #FFF1EC 0%, #FFE4D9 100%);

        color: var(--primary-color);

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 28px;

        margin-bottom: 24px;

        transition: all .4s cubic-bezier(.4, 0, .2, 1);

        box-shadow: 0 8px 22px rgba(240, 123, 94, .10);

    }

    .why-choose-card:hover .why-choose-icon {

        background: linear-gradient(135deg, var(--primary-color), #f5a68c);

        color: #fff;

        transform: rotate(-6deg) scale(1.08);

        box-shadow: 0 14px 32px rgba(240, 123, 94, .30);

    }

    .why-choose-card h3 {

        font-size: 21px;

        color: #111;

        margin-bottom: 14px;

        font-weight: 700;

        line-height: 1.3;

        transition: color .3s ease;

    }

    .why-choose-card:hover h3 {

        color: var(--primary-color);

    }

    .why-choose-card p {

        color: #666;

        line-height: 1.75;

        font-size: 15px;

        margin: 0;

    }

    /* ===== Why Choose Responsive ===== */

    @media(max-width:1200px) {

        .why-choose-heading h2 {
            font-size: 42px;
        }

        .why-choose-heading {
            margin-bottom: 46px;
        }

        .why-choose-grid {
            gap: 20px;
        }

        .why-choose-card {
            padding: 30px 24px 26px;
        }

        .why-choose-icon {
            width: 62px;
            height: 62px;
            font-size: 25px;
            margin-bottom: 20px;
        }

        .why-choose-card h3 {
            font-size: 19px;
        }

    }

    @media(max-width:991px) {

        .why-choose-section {
            padding: 60px 0;
        }

        .why-choose-section .container {
            padding: 0 20px;
        }

        .why-choose-section::before {
            width: 340px;
            height: 340px;
            top: -100px;
            left: -100px;
        }

        .why-choose-section::after {
            width: 260px;
            height: 260px;
            bottom: -60px;
            right: -60px;
        }

        .why-choose-heading {

            padding: 0;

            margin-bottom: 42px;

            max-width: 620px;

        }

        .why-choose-heading h2 {
            font-size: 36px;
        }

        .why-choose-heading p {
            font-size: 16px;
        }

        .why-choose-grid {

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

            gap: 22px;

        }

        .why-choose-card {

            border-radius: 20px;

            padding: 30px 26px 26px;

        }

        .why-choose-icon {

            width: 64px;
            height: 64px;

            font-size: 26px;

            border-radius: 17px;

            margin-bottom: 22px;

        }

        .why-choose-card h3 {
            font-size: 19px;
            margin-bottom: 12px;
        }

        .why-choose-card p {
            font-size: 14.5px;
        }

    }

    @media(max-width:768px) {

        .why-choose-section {
            padding: 55px 0;
        }

        .why-choose-section .container {
            padding: 0 18px;
        }

        .why-choose-section::before {
            width: 280px;
            height: 280px;
            top: -80px;
            left: -80px;
        }

        .why-choose-section::after {
            width: 220px;
            height: 220px;
            bottom: -50px;
            right: -50px;
        }

        .why-choose-heading {
            margin-bottom: 38px;
        }

        .why-choose-heading h2 {
            font-size: 32px;
            margin-bottom: 14px;
        }

        .why-choose-heading p {
            font-size: 15px;
            line-height: 1.75;
        }

        .why-choose-grid {
            gap: 18px;
        }

        .why-choose-card {

            border-radius: 18px;

            padding: 26px 22px 22px;

        }

        .why-choose-icon {

            width: 58px;
            height: 58px;

            font-size: 23px;

            border-radius: 15px;

            margin-bottom: 18px;

        }

        .why-choose-card h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .why-choose-card p {
            font-size: 14px;
            line-height: 1.7;
        }

        .why-choose-heading .section-badge {
            font-size: 12px;
            padding: 9px 18px;
            margin-bottom: 16px;
        }

    }

    @media(max-width:576px) {

        .why-choose-section {
            padding: 50px 0;
        }

        .why-choose-section .container {
            padding: 0 18px;
        }

        .why-choose-section::before {
            width: 240px;
            height: 240px;
            top: -70px;
            left: -80px;
        }

        .why-choose-section::after {
            display: none;
        }

        .why-choose-heading {
            margin-bottom: 34px;
        }

        .why-choose-heading h2 {

            font-size: 28px;

            line-height: 1.22;

            margin-bottom: 12px;

        }

        .why-choose-heading p {
            font-size: 14px;
            line-height: 1.7;
        }

        .why-choose-grid {

            grid-template-columns: 1fr;

            gap: 16px;

        }

        .why-choose-card {

            border-radius: 18px;

            padding: 26px 22px 22px;

        }

        .why-choose-icon {

            width: 60px;
            height: 60px;

            font-size: 24px;

            border-radius: 15px;

            margin-bottom: 18px;

        }

        .why-choose-card h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .why-choose-card p {
            font-size: 14px;
            line-height: 1.72;
        }

        .why-choose-heading .section-badge {
            font-size: 11px;
            padding: 8px 16px;
            margin-bottom: 14px;
        }

    }

    @media(max-width:400px) {

        .why-choose-section {
            padding: 45px 0;
        }

        .why-choose-section .container {
            padding: 0 16px;
        }

        .why-choose-section::before {
            width: 200px;
            height: 200px;
            top: -60px;
            left: -70px;
        }

        .why-choose-heading {
            margin-bottom: 30px;
        }

        .why-choose-heading h2 {
            font-size: 24px;
            line-height: 1.25;
        }

        .why-choose-heading p {
            font-size: 13px;
        }

        .why-choose-grid {
            gap: 14px;
        }

        .why-choose-card {

            border-radius: 16px;

            padding: 22px 20px 20px;

        }

        .why-choose-icon {

            width: 54px;
            height: 54px;

            font-size: 21px;

            border-radius: 14px;

            margin-bottom: 16px;

        }

        .why-choose-card h3 {
            font-size: 17px;
            margin-bottom: 9px;
        }

        .why-choose-card p {
            font-size: 13px;
            line-height: 1.7;
        }

        .why-choose-heading .section-badge {
            font-size: 11px;
            padding: 7px 14px;
            margin-bottom: 12px;
        }

    }


    /*==========================
    WORKING PROCESS SECTION
===========================*/

    /*================================================================
    REDESIGNED PROCESS TIMELINE SECTION
==================================================================*/
    .process-section {
        padding: 60px 0;
        background: radial-gradient(circle at 90% 10%, rgba(43, 174, 102, 0.03) 0%, #ffffff 60%);
        position: relative;
    }

    .process-section .container {
        max-width: 1320px;
        margin: auto;
        padding: 0 24px;
        position: relative;
        z-index: 2;
    }

    .process-split-wrapper {
        display: flex;
        gap: 80px;
        align-items: stretch;
    }

    .process-left-col {
        flex: 0 0 38%;
        min-width: 0;
        position: relative;
    }

    /* Left side: Sticky Heading Panel */
    .process-sticky-panel {
        position: -webkit-sticky;
        position: sticky;
        top: 130px;
        z-index: 10;
        will-change: transform;
    }

    .process-sticky-panel .process-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(43, 174, 102, 0.1);
        color: var(--primary-color);
        border: 1px solid rgba(43, 174, 102, 0.2);
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 24px;
    }

    .process-sticky-panel h2 {
        font-size: 44px;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.15;
        margin-bottom: 24px;
    }

    .process-sticky-panel h2 span {
        color: var(--primary-color);
        background: var(--primary-color);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .process-sticky-panel p {
        font-size: 17px;
        color: #475569;
        line-height: 1.75;
        margin-bottom: 35px;
    }

    .process-cta-box {
        display: flex;
    }

    /* Right side: Vertical Timeline */
    .process-timeline {
        position: relative;
        padding-left: 50px;
    }

    /* Central vertical connecting line */
    .process-timeline::before {
        content: "";
        position: absolute;
        left: 20px;
        top: 15px;
        bottom: 15px;
        width: 2px;
        background: #e2e8f0;
    }

    .timeline-node {
        position: relative;
        margin-bottom: 45px;
    }

    .timeline-node:last-child {
        margin-bottom: 0;
    }

    /* Left Marker (Number + Glow Icon) */
    .node-number-marker {
        position: absolute;
        left: -50px;
        top: 5px;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .node-num {
        width: 42px;
        height: 42px;
        background: #ffffff;
        border: 2px solid #e2e8f0;
        color: #475569;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 800;
        transition: all 0.4s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    }

    .node-icon-glow {
        position: absolute;
        left: 55px;
        top: 2px;
        width: 48px;
        height: 48px;
        background: #f8fafc;
        border-radius: 12px;
        border: 1px solid rgba(226, 232, 240, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #64748b;
        transition: all 0.4s ease;
    }

    .node-card {
        background: #ffffff;
        border-radius: 20px;
        border: 1px solid rgba(226, 232, 240, 0.8);
        padding: 28px 30px 28px 80px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.01);
    }

    /* Hover effects */
    .timeline-node:hover .node-num {
        border-color: var(--primary-color);
        background: var(--primary-color);
        color: #ffffff;
        box-shadow: 0 0 15px rgba(43, 174, 102, 0.35);
    }

    .timeline-node:hover .node-icon-glow {
        background: rgba(43, 174, 102, 0.08);
        color: var(--primary-color);
        border-color: rgba(43, 174, 102, 0.2);
        transform: rotate(5deg) scale(1.05);
    }

    .timeline-node:hover .node-card {
        transform: translateX(10px);
        border-color: rgba(43, 174, 102, 0.25);
        box-shadow: 0 12px 25px rgba(15, 23, 42, 0.04);
    }

    .node-card h3 {
        font-size: 19px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 8px;
    }

    .node-card p {
        font-size: 14.5px;
        color: #64748b;
        line-height: 1.6;
        margin: 0;
    }

    /* ================= RESPONSIVE: 1200px ================= */

    @media(max-width:1200px) {

        .process-sticky-panel h2 {
            font-size: 38px;
        }

    }

    /* ================= RESPONSIVE: 991px ================= */

    @media(max-width:991px) {

        .process-split-wrapper {
            flex-direction: column;
            gap: 50px;
        }

        .process-left-col {
            flex: 0 0 100%;
            width: 100%;
        }

        .process-sticky-panel {
            position: static;
            max-width: 700px;
        }

        .process-sticky-panel h2 {
            font-size: 34px;
            margin-bottom: 16px;
        }

        .process-sticky-panel p {
            font-size: 16px;
        }

    }

    /* ================= RESPONSIVE: 768px ================= */

    @media(max-width:768px) {

        .process-sticky-panel h2 {
            font-size: 30px;
            margin-bottom: 14px;
        }

        .process-sticky-panel p {
            font-size: 15px;
        }

    }

    /* ================= RESPONSIVE: 576px ================= */

    @media(max-width:576px) {

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

        .process-timeline {
            padding-left: 35px;
        }

        .process-timeline::before {
            left: 15px;
        }

        .node-number-marker {
            left: -35px;
        }

        .node-num {
            width: 32px;
            height: 32px;
            font-size: 12px;
        }

        .node-icon-glow {
            left: 45px;
            width: 38px;
            height: 38px;
            font-size: 16px;
        }

        .node-card {
            padding: 20px 20px 20px 65px;
        }

        .node-card h3 {
            font-size: 17px;
        }

        .node-card p {
            font-size: 13.5px;
        }

        .process-sticky-panel h2 {
            font-size: 28px;
            line-height: 1.22;
            margin-bottom: 12px;
        }

        .process-sticky-panel p {
            font-size: 14.5px;
        }

    }

    /* ================= RESPONSIVE: 400px ================= */

    @media(max-width:400px) {

        .process-section {
            padding: 45px 0;
        }

        .process-timeline {
            padding-left: 25px;
        }

        .process-timeline::before {
            left: 10px;
        }

        .node-number-marker {
            left: -25px;
        }

        .node-num {
            width: 28px;
            height: 28px;
            font-size: 11px;
        }

        .node-icon-glow {
            left: 35px;
            width: 32px;
            height: 32px;
            font-size: 14px;
        }

        .node-card {
            padding: 15px 15px 15px 50px;
        }

        .node-card h3 {
            font-size: 15px;
        }

        .node-card p {
            font-size: 13px;
        }

        .process-sticky-panel h2 {
            font-size: 24px;
            line-height: 1.25;
        }

        .process-sticky-panel p {
            font-size: 13.5px;
        }

    }


    /*================================================================
    CONTACT US PAGE
================================================================*/

    .page-contact {

        background: #fff;

    }

    /* ================= PAGE HERO ================= */

    .page-hero {

        padding: 150px 0 80px;

        background: #FFF1EC;

        position: relative;

        overflow: hidden;

    }

    .page-hero::before {

        display: none;

    }

    .page-hero::after {

        display: none;

    }

    .page-hero-inner {

        max-width: 880px;

        margin: auto;

        text-align: center;

        padding: 0 24px;

        position: relative;

        z-index: 1;

    }

    .page-hero-badge {

        margin-bottom: 20px;

    }

    .page-hero h1 {

        font-size: 48px;

        line-height: 1.15;

        color: #111;

        font-weight: 800;

        margin: 0 0 18px;

        letter-spacing: -.5px;

    }

    .page-hero h1 span {

        color: var(--primary-color);

    }

    .page-hero p {

        font-size: 17px;

        color: #555;

        line-height: 1.8;

        margin: 0 auto 28px;

        max-width: 680px;

    }

    .page-breadcrumb {

        list-style: none;

        padding: 0;

        margin: 0;

        display: inline-flex;

        align-items: center;

        gap: 12px;

        padding: 12px 22px;

        border-radius: 999px;

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

        border: 1px solid rgba(15, 23, 42, 0.06);

        backdrop-filter: blur(6px);

        font-size: 14px;

        color: #6B7280;

        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);

    }

    .page-breadcrumb li a {

        color: #111;

        font-weight: 600;

        transition: color .2s ease;

        display: inline-flex;

        align-items: center;

        gap: 8px;

    }

    .page-breadcrumb li a:hover {

        color: var(--primary-color);

    }

    .page-breadcrumb li a i {

        color: var(--primary-color);

        font-size: 12px;

    }

    .page-breadcrumb .sep {

        color: #94A3B8;

        font-size: 10px;

    }

    .page-breadcrumb li:last-child {

        color: #6B7280;

        font-weight: 500;

    }

    /* ================= PAGE BANNER ================= */

    .page-banner {

        padding: 170px 0 70px;

        background: #F07B5E;
        background: linear-gradient(135deg, #F07B5E 0%, #f5a68c 100%);
        background: linear-gradient(135deg, var(--primary-color) 0%, #f5a68c 100%);

        position: relative;

        overflow: hidden;

    }

    .page-banner::before {

        content: '';

        position: absolute;

        top: -80px;

        left: -120px;

        width: 420px;

        height: 420px;

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

        border-radius: 50%;

        pointer-events: none;

    }

    .page-banner::after {

        content: '';

        position: absolute;

        bottom: -100px;

        right: -150px;

        width: 500px;

        height: 500px;

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

        border-radius: 50%;

        pointer-events: none;

    }

    .page-banner-inner {

        max-width: 900px;

        margin: auto;

        text-align: center;

        padding: 0 24px;

        position: relative;

        z-index: 1;

    }

    .page-banner h1 {

        font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif;

        font-size: 80px;

        line-height: 1.1;

        color: #ffffff;

        font-weight: 500;

        margin: 0 0 28px;

        letter-spacing: -.5px;

    }

    .page-banner-breadcrumb {

        list-style: none;

        padding: 0;

        margin: 0;

        display: inline-flex;

        align-items: center;

        gap: 14px;

        font-size: 16px;

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

    }

    .page-banner-breadcrumb li a {

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

        font-weight: 500;

        transition: color .25s ease;

    }

    .page-banner-breadcrumb li a:hover {

        color: #ffffff;

    }

    .page-banner-breadcrumb .sep {

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

        font-weight: 400;

    }

    .page-banner-breadcrumb li:last-child {

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

        font-weight: 400;

    }

    @media (max-width:1399px) {

        .page-banner h1 {
            font-size: 72px;
        }

    }

    @media (max-width:1199px) {

        .page-banner {
            padding: 140px 0 85px;
        }

        .page-banner h1 {
            font-size: 64px;
        }

    }

    @media (max-width:991px) {

        .page-banner {
            padding: 140px 0 75px;
        }

        .page-banner::before {
            width: 300px;
            height: 300px;
            top: -60px;
            left: -80px;
        }

        .page-banner::after {
            width: 360px;
            height: 360px;
            bottom: -70px;
            right: -100px;
        }

        .page-banner h1 {
            font-size: 56px;
            margin-bottom: 24px;
        }

        .page-banner-breadcrumb {
            font-size: 15px;
        }

    }

    @media (max-width:767px) {

        .page-banner {
            padding: 175px 0 65px;
        }

        .page-banner::before,
        .page-banner::after {
            display: none;
        }

        .page-banner-inner {
            padding: 0 18px;
        }

        .page-banner h1 {
            font-size: 48px;
        }

        .page-banner-breadcrumb {
            font-size: 14.5px;
            gap: 12px;
        }

    }

    @media (max-width:575px) {

        .page-banner {
            padding: 175px 0 55px;
        }

        .page-banner h1 {
            font-size: 42px;
            margin-bottom: 20px;
        }

    }

    @media (max-width:400px) {

        .page-banner {
            padding: 170px 0 50px;
        }

        .page-banner-inner {
            padding: 0 16px;
        }

        .page-banner h1 {
            font-size: 36px;
        }

        .page-banner-breadcrumb {
            font-size: 14px;
        }

    }

    /* ================= CONTACT INFO CARDS ================= */

    .contact-info-section {

        padding: 60px 0 10px;

    }

    .contact-info-section .container {

        max-width: 1320px;

        margin: 0 auto;

        padding: 0 24px;

        position: relative;

        z-index: 3;

    }

    .contact-info-grid {

        display: grid;

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

        gap: 28px;

    }

    .contact-info-card {

        background: #fff;

        padding: 32px 28px 30px;

        border-radius: 22px;

        border: 1px solid rgba(15, 23, 42, 0.06);

        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);

        transition: all .4s cubic-bezier(.22, .61, .36, 1);

        position: relative;

        overflow: hidden;

    }

    .contact-info-card::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        width: 0;

        height: 3px;

        background: var(--primary-color);

        transition: width .4s ease;

    }

    .contact-info-card:hover {

        transform: translateY(-6px);

        box-shadow: 0 26px 55px rgba(240, 123, 94, 0.18);

        border-color: rgba(240, 123, 94, 0.20);

    }

    .contact-info-card:hover::before {

        width: 100%;

    }

    .contact-info-card--accent {

        background: #FFF1EC;

        border-color: rgba(240, 123, 94, 0.20);

        box-shadow: 0 20px 45px rgba(240, 123, 94, 0.14);

    }

    .cic-icon {

        width: 56px;

        height: 56px;

        border-radius: 16px;

        background: #FFF1EC;

        color: var(--primary-color);

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 20px;

        margin-bottom: 18px;

        box-shadow: inset 0 0 0 1px rgba(240, 123, 94, 0.10);

        transition: all .3s ease;

    }

    .cic-icon--accent {

        background: var(--primary-color);

        color: #fff;

        box-shadow: 0 10px 24px rgba(240, 123, 94, 0.30);

    }

    .contact-info-card:hover .cic-icon:not(.cic-icon--accent) {

        background: var(--primary-color);

        color: #fff;

        box-shadow: 0 10px 24px rgba(240, 123, 94, 0.30);

    }

    .contact-info-card h3,
    .contact-info-card h4 {

        font-size: 18px;

        font-weight: 800;

        color: #111;

        margin: 0 0 10px;

    }

    .contact-info-card p {

        margin: 0;

        font-size: 15px;

        color: #4B5563;

        line-height: 1.7;

    }

    .contact-info-card p a {

        color: #4B5563;

        font-weight: 500;

        transition: color .2s ease;

    }

    .contact-info-card p a:hover {

        color: var(--primary-color);

    }

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

    .contact-main-section {

        padding: 70px 0 80px;

        position: relative;

    }

    .contact-main-section .container {

        max-width: 1320px;

        margin: auto;

        padding: 0 24px;

    }

    .contact-main-grid {

        display: grid;

        grid-template-columns: 1.3fr 1fr;

        gap: 36px;

        align-items: start;

    }

    /* --- FORM --- */

    .contact-form-wrapper {

        background: #fff;

        padding: 38px 40px 40px;

        border-radius: 24px;

        border: 1px solid rgba(15, 23, 42, 0.06);

        box-shadow: 0 16px 45px rgba(15, 23, 42, 0.07);

    }

    .contact-form-head {

        margin-bottom: 28px;

    }

    .contact-form-head h2 {

        font-size: 32px;

        color: #111;

        line-height: 1.2;

        font-weight: 800;

        margin: 14px 0 12px;

    }

    .contact-form-head h2 span {

        color: var(--primary-color);

    }

    .contact-form-head p {

        font-size: 15.5px;

        color: #555;

        line-height: 1.75;

        margin: 0;

        max-width: 580px;

    }

    .contact-form {

        display: flex;

        flex-direction: column;

        gap: 18px;

    }

    .cf-row {

        display: flex;

        flex-direction: column;

        gap: 18px;

    }

    .cf-row-2 {

        flex-direction: row;

        gap: 20px;

    }

    .cf-field {

        display: flex;

        flex-direction: column;

        gap: 8px;

        flex: 1;

        min-width: 0;

    }

    .cf-field label {

        font-size: 13px;

        font-weight: 700;

        color: #1F2937;

        letter-spacing: .2px;

    }

    .cf-field input,
    .cf-field select,
    .cf-field textarea {

        width: 100%;

        box-sizing: border-box;

        border: 1.5px solid #E5E7EB;

        background: #FAFBFC;

        color: #111;

        border-radius: 14px;

        padding: 14px 16px;

        font-size: 14.5px;

        font-family: inherit;

        transition: all .25s ease;

        outline: none;

        resize: vertical;

    }

    .cf-field textarea {

        min-height: 120px;

    }

    .cf-field input::placeholder,
    .cf-field textarea::placeholder {

        color: #9CA3AF;

    }

    .cf-field input:focus,
    .cf-field select:focus,
    .cf-field textarea:focus {

        border-color: var(--primary-color);

        background: #fff;

        box-shadow: 0 0 0 4px rgba(240, 123, 94, 0.12);

    }

    .cf-row-submit {

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        gap: 16px;

        flex-wrap: wrap;

        margin-top: 4px;

    }

    .cf-submit {

        display: inline-flex;

        align-items: center;

        gap: 10px;

        border: none;

        cursor: pointer;

        padding: 15px 32px;

        background: var(--primary-color);

        color: #fff;

        border-radius: 50px;

        font-weight: 700;

        font-size: 15px;

        font-family: inherit;

        box-shadow: 0 12px 28px rgba(240, 123, 94, 0.28);

        transition: all .3s ease;

    }

    .cf-submit i {

        font-size: 12px;

        transition: transform .3s ease;

    }

    .cf-submit:hover {

        transform: translateY(-2px);

        box-shadow: 0 16px 34px rgba(240, 123, 94, 0.36);

    }

    .cf-submit:hover i {

        transform: translate(2px, -2px);

    }

    .cf-note {

        display: inline-flex;

        align-items: center;

        gap: 8px;

        font-size: 12.5px;

        color: #6B7280;

        font-weight: 500;

    }

    .cf-note i {

        color: var(--accent-green);

        font-size: 14px;

    }

    /* --- SIDE (MAP + CARD) --- */

    .contact-side-wrapper {

        display: flex;

        flex-direction: column;

        gap: 24px;

    }

    .contact-map {

        border-radius: 22px;

        overflow: hidden;

        border: 1px solid rgba(15, 23, 42, 0.06);

        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);

        height: 300px;

    }

    .contact-map iframe {

        width: 100%;

        height: 100%;

        border: none;

        display: block;

        filter: grayscale(.05);

    }

    .contact-side-card {

        background: #FFF1EC;

        border-radius: 22px;

        padding: 28px 28px 26px;

        border: 1px solid rgba(240, 123, 94, 0.18);

        box-shadow: 0 14px 40px rgba(240, 123, 94, 0.10);

    }

    .contact-side-card h3,
    .contact-side-card h4 {

        font-size: 18px;

        font-weight: 800;

        color: #111;

        margin: 0 0 16px;

    }

    .office-hours {

        list-style: none;

        padding: 0;

        margin: 0;

        display: flex;

        flex-direction: column;

        gap: 12px;

    }

    .office-hours li {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 10px 14px;

        background: rgba(255, 255, 255, 0.75);

        border-radius: 12px;

        border: 1px solid rgba(15, 23, 42, 0.05);

    }

    .office-hours li span {

        font-size: 14px;

        color: #4B5563;

        font-weight: 500;

    }

    .office-hours li strong {

        font-size: 14px;

        font-weight: 800;

        color: #111;

    }

    .office-hours li .c-soft {

        color: #94A3B8;

    }

    .side-divider {

        height: 1px;

        background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.10), transparent);

        margin: 22px 0;

    }

    .side-socials {

        display: flex;

        align-items: center;

        gap: 10px;

        flex-wrap: wrap;

    }

    .side-socials a {

        width: 40px;

        height: 40px;

        border-radius: 12px;

        background: #fff;

        color: #475569;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 14px;

        border: 1px solid rgba(15, 23, 42, 0.06);

        transition: all .25s ease;

    }

    .side-socials a:hover {

        background: var(--primary-color);

        color: #fff;

        border-color: var(--primary-color);

        transform: translateY(-2px);

        box-shadow: 0 10px 20px rgba(240, 123, 94, 0.22);

    }

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

    @media(max-width:1200px) {

        .page-hero {
            padding: 140px 0 70px;
        }

        .page-hero h1 {
            font-size: 44px;
        }

        .page-hero p {
            font-size: 16.5px;
        }

        .contact-info-section {
            padding-top: 85px;
        }

        .contact-info-section .container {
            margin-top: 0;
        }

        .contact-info-grid {
            gap: 24px;
        }

        .contact-info-card {
            padding: 28px 24px 26px;
        }

        .cic-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            font-size: 18px;
            margin-bottom: 16px;
        }

        .contact-info-card h4 {
            font-size: 17px;
        }

        .contact-info-card p {
            font-size: 14.5px;
        }

        .contact-main-section {
            padding: 60px 0 70px;
        }

        .contact-main-grid {
            gap: 30px;
            grid-template-columns: 1.2fr 1fr;
        }

        .contact-form-wrapper {
            padding: 34px 32px 34px;
        }

        .contact-form-head h2 {
            font-size: 30px;
        }

        .contact-form-head p {
            font-size: 15px;
        }

        .contact-map {
            height: 280px;
        }

    }

    @media(max-width:991px) {

        .page-hero {
            padding: 140px 0 60px;
        }

        .page-hero::before {
            width: 300px;
            height: 300px;
            top: -80px;
            left: -60px;
        }

        .page-hero::after {
            width: 320px;
            height: 320px;
            bottom: -80px;
            right: -60px;
        }

        .page-hero h1 {
            font-size: 38px;
        }

        .page-hero p {
            font-size: 16px;
            margin-bottom: 24px;
            max-width: 600px;
        }

        .page-breadcrumb {
            padding: 10px 18px;
            font-size: 13.5px;
        }

        .contact-info-section {
            padding-top: 75px;
            padding-bottom: 0;
        }

        .contact-info-section .container {
            margin-top: 0;
            padding: 0 20px;
        }

        .contact-info-grid {

            grid-template-columns: 1fr;

            gap: 18px;

            max-width: 540px;

            margin: auto;

        }

        .contact-info-card {
            padding: 26px 24px 24px;
        }

        .contact-main-section {
            padding: 50px 0 60px;
        }

        .contact-main-section .container {
            padding: 0 20px;
        }

        .contact-main-grid {

            grid-template-columns: 1fr;

            gap: 28px;

        }

        .contact-form-wrapper {
            padding: 30px 28px 32px;
        }

        .contact-form-head h2 {
            font-size: 28px;
        }

        .contact-form-head p {
            font-size: 15px;
        }

        .cf-row-2 {
            flex-direction: column;
            gap: 18px;
        }

        .contact-map {
            height: 320px;
        }

        .contact-side-card {
            padding: 26px 24px 24px;
        }

    }

    @media(max-width:768px) {

        .page-hero {
            padding: 130px 0 55px;
        }

        .page-hero::before {
            width: 240px;
            height: 240px;
        }

        .page-hero::after {
            width: 260px;
            height: 260px;
        }

        .page-hero-inner {
            padding: 0 18px;
        }

        .page-hero h1 {
            font-size: 34px;
            line-height: 1.18;
            margin-bottom: 14px;
        }

        .page-hero p {
            font-size: 15.5px;
            line-height: 1.75;
            margin-bottom: 22px;
        }

        .page-breadcrumb {
            padding: 9px 16px;
            font-size: 13px;
            gap: 10px;
        }

        .contact-info-section {
            padding-top: 70px;
        }

        .contact-info-section .container {
            margin-top: 0;
            padding: 0 18px;
        }

        .contact-info-card {
            padding: 24px 22px 22px;
            border-radius: 20px;
        }

        .cic-icon {
            width: 48px;
            height: 48px;
            border-radius: 13px;
            font-size: 17px;
            margin-bottom: 14px;
        }

        .contact-info-card h4 {
            font-size: 16.5px;
            margin-bottom: 8px;
        }

        .contact-info-card p {
            font-size: 14px;
            line-height: 1.65;
        }

        .contact-main-section {
            padding: 45px 0 55px;
        }

        .contact-main-section .container {
            padding: 0 18px;
        }

        .contact-form-wrapper {
            padding: 28px 24px 30px;
            border-radius: 22px;
        }

        .contact-form-head {
            margin-bottom: 24px;
        }

        .contact-form-head h2 {
            font-size: 26px;
            margin-top: 12px;
        }

        .contact-form-head p {
            font-size: 14.5px;
        }

        .contact-form {
            gap: 16px;
        }

        .cf-row {
            gap: 16px;
        }

        .cf-row-2 {
            gap: 16px;
        }

        .cf-field label {
            font-size: 12.5px;
        }

        .cf-field input,
        .cf-field select,
        .cf-field textarea {
            padding: 13px 15px;
            font-size: 14px;
            border-radius: 13px;
        }

        .cf-field textarea {
            min-height: 110px;
        }

        .cf-row-submit {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
        }

        .cf-submit {
            padding: 14px 28px;
            font-size: 14.5px;
        }

        .contact-map {
            height: 280px;
        }

        .contact-side-card {
            padding: 24px 22px 22px;
            border-radius: 20px;
        }

        .office-hours {
            gap: 10px;
        }

        .office-hours li {
            padding: 9px 12px;
        }

        .office-hours li span {
            font-size: 13.5px;
        }

        .office-hours li strong {
            font-size: 13.5px;
        }

        .side-divider {
            margin: 18px 0;
        }

        .side-socials {
            gap: 9px;
        }

        .side-socials a {
            width: 38px;
            height: 38px;
            border-radius: 11px;
            font-size: 13.5px;
        }

    }

    @media(max-width:576px) {

        .page-hero {
            padding: 175px 0 50px;
        }

        .page-hero::before,
        .page-hero::after {
            display: none;
        }

        .page-hero-inner {
            padding: 0 18px;
        }

        .page-hero h1 {
            font-size: 30px;
            line-height: 1.2;
        }

        .page-hero p {
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .page-breadcrumb {
            width: 100%;
            justify-content: center;
        }

        .contact-info-section {
            padding-top: 65px;
        }

        .contact-info-section .container {
            margin-top: 0;
            padding: 0 18px;
        }

        .contact-info-grid {
            gap: 16px;
        }

        .contact-info-card {
            padding: 22px 20px 20px;
            border-radius: 18px;
        }

        .cic-icon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            font-size: 16px;
        }

        .contact-info-card h4 {
            font-size: 16px;
        }

        .contact-info-card p {
            font-size: 13.5px;
        }

        .contact-main-section {
            padding: 40px 0 50px;
        }

        .contact-main-section .container {
            padding: 0 18px;
        }

        .contact-main-grid {
            gap: 22px;
        }

        .contact-form-wrapper {
            padding: 24px 20px 26px;
            border-radius: 20px;
        }

        .contact-form-head {
            margin-bottom: 22px;
        }

        .contact-form-head .section-badge {
            padding: 8px 16px;
            font-size: 12px;
            margin-bottom: 12px;
        }

        .contact-form-head h2 {
            font-size: 23px;
            margin-top: 0;
        }

        .contact-form-head p {
            font-size: 14px;
            line-height: 1.68;
        }

        .contact-form {
            gap: 14px;
        }

        .cf-row {
            gap: 14px;
        }

        .cf-row-2 {
            gap: 14px;
        }

        .cf-field label {
            font-size: 12px;
        }

        .cf-field input,
        .cf-field select,
        .cf-field textarea {
            padding: 12.5px 14px;
            font-size: 13.5px;
            border-radius: 12px;
        }

        .cf-row-submit {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .cf-submit {
            width: 100%;
            justify-content: center;
            padding: 14px 24px;
            font-size: 14.5px;
        }

        .cf-note {
            justify-content: center;
        }

        .contact-map {
            height: 240px;
            border-radius: 20px;
        }

        .contact-side-card {
            padding: 22px 20px 20px;
            border-radius: 18px;
        }

        .contact-side-card h4 {
            font-size: 17px;
            margin-bottom: 14px;
        }

        .side-socials {
            gap: 8px;
        }

    }

    @media(max-width:400px) {

        .page-hero {
            padding: 170px 0 45px;
        }

        .page-hero-inner {
            padding: 0 16px;
        }

        .page-hero h1 {
            font-size: 26px;
        }

        .page-hero p {
            font-size: 14px;
            line-height: 1.68;
            margin-bottom: 18px;
        }

        .page-breadcrumb {
            padding: 8px 14px;
            font-size: 12px;
            gap: 8px;
        }

        .contact-info-section {
            padding-top: 60px;
        }

        .contact-info-section .container {
            padding: 0 16px;
            margin-top: 0;
        }

        .contact-info-grid {
            gap: 14px;
        }

        .contact-info-card {
            padding: 20px 18px 18px;
            border-radius: 16px;
        }

        .cic-icon {
            width: 44px;
            height: 44px;
            border-radius: 11px;
            font-size: 15px;
            margin-bottom: 12px;
        }

        .contact-info-card h4 {
            font-size: 15.5px;
            margin-bottom: 7px;
        }

        .contact-info-card p {
            font-size: 13px;
        }

        .contact-main-section {
            padding: 35px 0 45px;
        }

        .contact-main-section .container {
            padding: 0 16px;
        }

        .contact-main-grid {
            gap: 20px;
        }

        .contact-form-wrapper {
            padding: 22px 18px 24px;
            border-radius: 18px;
        }

        .contact-form-head h2 {
            font-size: 21px;
        }

        .contact-form-head p {
            font-size: 13.5px;
        }

        .contact-form {
            gap: 12px;
        }

        .cf-row {
            gap: 12px;
        }

        .cf-row-2 {
            gap: 12px;
        }

        .cf-field label {
            font-size: 11.5px;
            gap: 7px;
        }

        .cf-field input,
        .cf-field select,
        .cf-field textarea {
            padding: 12px 13px;
            font-size: 13px;
            border-radius: 11px;
        }

        .cf-submit {
            padding: 13px 22px;
            font-size: 14px;
        }

        .cf-note {
            font-size: 11.5px;
            text-align: center;
        }

        .contact-map {
            height: 220px;
            border-radius: 18px;
        }

        .contact-side-card {
            padding: 20px 18px 18px;
            border-radius: 16px;
        }

        .contact-side-card h4 {
            font-size: 16px;
            margin-bottom: 12px;
        }

        .office-hours {
            gap: 9px;
        }

        .office-hours li {
            padding: 8px 10px;
            border-radius: 10px;
            flex-wrap: wrap;
            gap: 6px;
        }

        .office-hours li span {
            font-size: 13px;
        }

        .office-hours li strong {
            font-size: 13px;
        }

        .side-divider {
            margin: 16px 0;
        }

        .side-socials {
            gap: 7px;
        }

        .side-socials a {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            font-size: 13px;
        }

    }


    /*================================================================
    ABOUT PAGE SECTIONS
==================================================================*/

    /* ---------- Generic Section-badge (base + sage variant) ---------- */

    .section-badge {

        position: relative;

        display: inline-flex;
        align-items: center;

        padding: 10px 22px 10px 44px;

        color: #fff;

        font-weight: 700;

        font-size: 13px;

        letter-spacing: .3px;

        text-transform: uppercase;

        border-radius: 50px;

        background: linear-gradient(90deg, var(--primary-color) 0%, #ff9475 100%);

        border: none;

        margin-bottom: 20px;

        box-shadow: 0 10px 22px rgba(240, 123, 94, 0.28);

        overflow: hidden;

    }

    .section-badge::before {

        content: "";

        position: absolute;

        left: 14px;

        top: 50%;

        transform: translateY(-50%);

        width: 18px;

        height: 18px;

        border-radius: 50%;

        background: #fff;

        box-shadow: inset 0 0 0 4px rgba(43, 174, 102, 0.20);

    }

    .section-badge::after {

        content: "\f06c";

        font-family: "Font Awesome 6 Free";

        font-weight: 900;

        position: absolute;

        left: 16.5px;

        top: 50%;

        transform: translateY(-50%);

        color: #2BAE66;

        font-size: 10px;

    }

    .section-badge--sage {

        background: linear-gradient(90deg, #2E8B57 0%, #4CAF7F 100%);

        box-shadow: 0 10px 22px rgba(46, 139, 87, 0.25);

    }

    .section-badge--sage::after {

        color: var(--primary-color);

    }

    /* ---------- About sections (base) ---------- */

    .about-section {
        background-color: #FFF1EC !important;
        padding: 60px 0;

        background: #fff;

        position: relative;

        overflow: hidden;

    }

    /* Override homepage `.about-section .container` grid on about-page sections */
    .page-about .about-section .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        align-items: stretch !important;
        padding: 0 20px !important;
    }

    /* Override homepage `.about-content` restrictive styles for the about-page */
    .page-about .about-content {
        max-width: 100% !important;
        margin: 0 !important;
        width: 100% !important;
        text-align: left !important;
    }

    .about-section--peach {

        background: var(--peach);
        background-color: white !important;

    }

    .about-container {

        max-width: 1200px;

        margin: 0 auto;
        padding: 0 20px;

    }

    /* About-intro: 2-col layout (text + visual), left-aligned text */

    .about-section--intro .about-content {

        max-width: 100%;

        text-align: left;

        margin: 0;

        width: 100%;

    }

    .about-section--intro .about-content h2 {

        font-size: 46px;

        line-height: 1.18;

        color: #111;

        font-weight: 800;

        margin: 0 0 26px;

    }

    .about-section--intro .about-content p {

        font-size: 17px;

        line-height: 1.82;

        color: #4B5563;

        margin: 0 0 18px;

        max-width: 880px;

    }

    .about-section--white {

        background: #ffffff !important;

    }

    .about-intro-content {

        max-width: 100% !important;

        margin: 0 !important;

        width: 100% !important;

        text-align: left !important;

    }

    .about-intro-content .section-badge {

        margin-bottom: 22px;

    }

    .about-intro-content h2 {

        margin-bottom: 26px !important;

    }

    .about-intro-content p {

        max-width: 100% !important;

    }

    .about-intro-meta {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 14px 22px;

        margin-top: 30px;

    }

    .about-intro-meta-item {

        display: flex;

        align-items: center;

        gap: 10px;

        font-size: 14.5px;

        font-weight: 600;

        color: #1F2937;

    }

    .about-intro-meta-item i {

        flex-shrink: 0;

        width: 24px;

        height: 24px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        background: #E8F7ED;

        color: var(--accent-green);

        font-size: 12px;

        font-weight: 900;

    }

    .about-intro-stats {

        position: relative;

    }

    .about-stats-panel {

        background: #ffffff;

        border: 1px solid rgba(15, 23, 42, .07);

        border-radius: 24px;

        padding: 32px;

        box-shadow: 0 20px 56px rgba(15, 23, 42, .08);

    }

    .about-stats-grid {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 16px;

        margin-bottom: 26px;

    }

    .about-stat-card {

        border-radius: 16px;

        padding: 22px 18px;

        text-align: center;

        border: 1px solid rgba(15, 23, 42, .08);

    }

    .about-stat-card strong {

        display: block;

        font-size: 42px;

        font-weight: 800;

        line-height: 1;

        margin-bottom: 10px;

    }

    .about-stat-card span {

        display: block;

        font-size: 13px;

        font-weight: 600;

        letter-spacing: .2px;

        color: #4B5563;

        line-height: 1.45;

        text-transform: uppercase;

    }

    .about-stat-card--white {

        background: #F9FAFB;

        background: rgba(249, 250, 251, 0.7);

    }

    .about-stat-card--white strong {

        color: var(--primary-color);

    }

    .about-stat-card--dark {

        background: #0F172A;

        border-color: #0F172A;

    }

    .about-stat-card--dark strong {

        color: var(--primary-color);

    }

    .about-stat-card--dark span {

        color: #CBD5E1;

    }

    .about-stats-badges {

        display: flex;

        flex-wrap: wrap;

        gap: 10px;

        margin-bottom: 24px;

    }

    .about-stat-badge {

        display: inline-flex;

        align-items: center;

        gap: 8px;

        padding: 8px 14px;

        border-radius: 50px;

        background: #F3F4F6;

        border: 1px solid rgba(15, 23, 42, .08);

        font-size: 13px;

        font-weight: 600;

        color: #1F2937;

    }

    .about-stat-badge i {

        color: var(--accent-green);

        font-size: 13px;

    }

    .about-stat-badge--coral {

        background: #FFF1EC;

        background: rgba(240, 123, 94, 0.10);

        border-color: rgba(240, 123, 94, 0.20);

        color: #B14A30;

    }

    .about-stat-badge--coral i {

        color: var(--primary-color);

    }

    .about-stats-divider {

        height: 1px;

        background: rgba(15, 23, 42, .08);

        margin-bottom: 20px;

    }

    .about-stats-satisfaction {

        position: relative;

    }

    .about-satisfaction-bar {

        width: 100%;

        height: 8px;

        border-radius: 50px;

        background: #E5E7EB;

        overflow: hidden;

        margin-bottom: 14px;

    }

    .about-satisfaction-fill {

        height: 100%;

        width: 98%;

        border-radius: 50px;

        background: linear-gradient(90deg, var(--primary-color), #FF9475);

    }

    .about-stats-satisfaction p {

        margin: 0;

        font-size: 14.5px;

        color: #374151;

        font-weight: 500;

        line-height: 1.5;

    }

    .about-stats-satisfaction p i {

        color: var(--accent-green);

        margin-right: 6px;

        font-size: 15px;

    }

    .about-stats-satisfaction p strong {

        color: #111;

    }

    @media(max-width:1200px) {

        .about-section.about-section--intro .container.about-intro-container {
            gap: 44px !important;
        }

        .about-intro-content h2 {
            font-size: 40px !important;
        }

        .about-stat-card strong {
            font-size: 38px;
        }

        .about-stats-panel {
            padding: 28px;
        }

    }

    @media(max-width:991px) {

        .about-section.about-section--intro .container.about-intro-container {
            grid-template-columns: 1fr !important;
            gap: 48px !important;
        }

        .about-intro-stats {
            max-width: 560px;
            margin: 0 auto;
            width: 100%;
        }

        .about-intro-content {
            text-align: left;
        }

        .about-intro-content h2 {
            font-size: 38px !important;
        }

        .about-section--intro {
            padding: 60px 0 !important;
        }

    }

    @media(max-width:768px) {

        .about-intro-content h2 {
            font-size: 32px !important;
        }

        .about-stats-panel {
            padding: 24px;
            border-radius: 20px;
        }

        .about-stat-card strong {
            font-size: 34px;
        }

        .about-stat-card span {
            font-size: 12px;
        }

        .about-intro-meta {
            grid-template-columns: 1fr;
            gap: 12px;
            margin-top: 24px;
        }

    }

    @media(max-width:575px) {

        .about-intro-content h2 {
            font-size: 28px !important;
        }

        .about-stats-panel {
            padding: 20px;
            border-radius: 18px;
        }

        .about-stats-grid {
            gap: 12px;
        }

        .about-stat-card strong {
            font-size: 30px;
        }

        .about-stat-card {
            padding: 18px 14px;
            border-radius: 14px;
        }

        .about-intro-meta-item {
            font-size: 14px;
        }

        .about-stats-badges {
            gap: 8px;
        }

        .about-stat-badge {
            font-size: 12.5px;
            padding: 7px 12px;
        }

        .about-stats-satisfaction p {
            font-size: 14px;
        }

    }

    @media(max-width:480px) {

        .about-intro-content h2 {
            font-size: 25px !important;
        }

        .about-intro-content .section-badge {
            font-size: 11.5px !important;
            padding: 8px 16px 8px 38px !important;
            margin-bottom: 18px;
        }

        .about-stats-panel {
            padding: 18px;
        }

        .about-stat-card strong {
            font-size: 28px;
        }

        .about-stat-card span {
            font-size: 11.5px;
        }

    }

    @media(max-width:360px) {

        .about-intro-content h2 {
            font-size: 22px !important;
        }

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

        .about-stats-panel {
            padding: 16px;
        }

    }

    .about-content {

        max-width: 100%;

        margin: 0 auto;

        text-align: left;

    }

    .about-content h2 {

        font-size: 44px;

        line-height: 1.2;

        color: #111;

        font-weight: 800;

        margin: 0 0 24px;

        text-align: left;

    }

    .about-content p {

        font-size: 17px;

        line-height: 1.82;

        color: #4B5563;

        margin: 0 0 16px;

    }

    .about-lead {

        font-size: 18.5px !important;

        color: #1F2937;

        font-weight: 600;

    }

    .about-lead strong {

        color: #111;

    }

    .about-content p strong {

        color: #111;

    }

    /* ---------- Section Head ---------- */

    .about-section-head {

        max-width: 820px;

        margin: 0 auto 52px;

        text-align: left;

    }

    .about-section-head--center {

        max-width: 820px;

        margin: 0 auto 52px;

        text-align: center;

    }

    .about-section-head h2,
    .about-section-head--center h2 {

        font-size: 44px;

        line-height: 1.2;

        color: #111;

        font-weight: 800;

        margin: 0 0 18px;

    }

    .about-section-head p,
    .about-section-head--center p {

        font-size: 17px;

        line-height: 1.8;

        color: #4B5563;

        margin: 0;

    }

    .about-section-head p strong,
    .about-section-head--center p strong {

        color: #111;

    }

    /* ---------- Strength Card ---------- */

    .strength-card {

        margin: 0 auto;

        max-width: 880px;

        background: #fff;

        border-radius: 28px;

        padding: 44px 52px;

        text-align: left;

        box-shadow: 0 20px 55px rgba(15, 23, 42, 0.07);

        border: 1px solid rgba(229, 231, 235, .6);

        position: relative;

    }

    .strength-icon {

        width: 72px;

        height: 72px;

        border-radius: 22px;

        background: linear-gradient(135deg, var(--primary-color), #ff9475);

        color: #fff;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 28px;

        margin: 0 0 22px;

        box-shadow: 0 14px 30px rgba(240, 123, 94, 0.28);

    }

    .strength-card p {

        text-align: left;

        font-size: 17px;

        line-height: 1.82;

        color: #374151;

        margin: 0 0 14px;

    }

    .strength-card p:last-child {
        margin-bottom: 0;
    }

    .strength-card p strong {

        color: var(--primary-color);

    }

    /* ---------- Mission & Vision ---------- */

    .about-section--mission-vision {

        background-color: #fff !important;
        padding: 46px 0;

    }

    .about-section--mission-vision .about-section-head {

        margin-bottom: 30px;

    }

    .mission-vision-grid {

        display: grid;

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

        gap: 22px;

        max-width: 1060px;

        margin: 0 auto;

    }

    .mv-card {

        background: #fff;

        border-radius: 18px;

        padding: 30px 30px 28px;

        box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);

        border: 1px solid rgba(15, 23, 42, .08);

        position: relative;

        overflow: hidden;

        display: grid;

        grid-template-columns: auto 1fr;

        column-gap: 14px;

        align-items: start;

        transition: all .4s cubic-bezier(.22, .61, .36, 1);

    }

    .mv-card::before {

        content: "";

        position: absolute;

        top: -80px;

        right: -80px;

        width: 190px;

        height: 190px;

        border-radius: 50%;

        opacity: .08;

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

    }

    .mission-card.mv-card::before {

        background: linear-gradient(135deg, var(--primary-color), #ff9475);

    }

    .vision-card.mv-card::before {

        background: linear-gradient(135deg, #2E8B57, #4cb876);

    }

    .mv-card:hover {

        transform: translateY(-6px);

        box-shadow: 0 22px 46px rgba(15, 23, 42, 0.09);

    }

    .mv-card:hover::before {

        opacity: .10;

        transform: scale(1.15);

    }

    .mv-icon {

        width: 58px;

        height: 58px;

        border-radius: 16px;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #fff;

        font-size: 23px;

        margin-bottom: 0;

        position: relative;

        z-index: 1;

    }

    .mv-icon--mission {

        background: linear-gradient(135deg, var(--primary-color), #ff9475);

        box-shadow: 0 16px 34px rgba(240, 123, 94, .30);

    }

    .mv-icon--vision {

        background: linear-gradient(135deg, #2E8B57, #4cb876);

        box-shadow: 0 16px 34px rgba(46, 139, 87, .28);

    }

    .mv-label {

        display: inline-block;

        align-self: start;

        justify-self: start;

        font-size: 11px;

        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: 1.5px;

        padding: 6px 13px;

        border-radius: 999px;

        margin: 9px 0 0;

        position: relative;

        z-index: 1;

    }

    .mission-card .mv-label {

        background: rgba(240, 123, 94, .10);

        color: var(--primary-color);

    }

    .vision-card .mv-label {

        background: rgba(46, 139, 87, .10);

        color: #2E8B57;

    }

    .mv-card h3 {

        grid-column: 1 / -1;

        font-size: 21px;

        line-height: 1.25;

        color: #111;

        font-weight: 800;

        margin: 16px 0 13px;

        position: relative;

        z-index: 1;

    }

    .mv-card p {

        grid-column: 1 / -1;

        font-size: 15px;

        line-height: 1.65;

        color: #4B5563;

        margin: 0 0 18px;

        position: relative;

        z-index: 1;

    }

    .mv-points {

        grid-column: 1 / -1;

        list-style: none;

        padding: 0;

        margin: 0;

        display: flex;

        flex-direction: column;

        gap: 8px;

        position: relative;

        z-index: 1;

    }

    .mv-points li {

        display: flex;

        align-items: center;

        gap: 9px;

        font-size: 14px;

        color: #1F2937;

        font-weight: 500;

    }

    .mv-points li i {

        width: 20px;

        height: 20px;

        border-radius: 50%;

        color: #fff;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 10px;

        flex-shrink: 0;

    }

    .mission-card .mv-points li i {

        background: linear-gradient(135deg, var(--primary-color), #ff9475);

    }

    .vision-card .mv-points li i {

        background: linear-gradient(135deg, #2E8B57, #4cb876);

    }

    /* ---------- Values Grid (5 cards) ---------- */

    .values-grid {

        display: grid;

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

        gap: 22px;

        max-width: 1200px;

        margin: 0 auto;

    }

    .value-card {

        background: #fff;

        border-radius: 22px;

        padding: 30px 22px 28px;

        text-align: center;

        box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);

        border: 1px solid rgba(229, 231, 235, .6);

        transition: all .35s cubic-bezier(.22, .61, .36, 1);

        position: relative;

        overflow: hidden;

    }

    .value-card::after {

        content: "";

        position: absolute;

        top: -40px;

        right: -40px;

        width: 120px;

        height: 120px;

        border-radius: 50%;

        opacity: 0;

        transition: opacity .35s ease;

    }

    .value-card:hover {

        transform: translateY(-10px);

        box-shadow: 0 24px 50px rgba(15, 23, 42, 0.10);

    }

    .value-card:hover::after {

        opacity: .08;

    }

    .value-icon {

        width: 66px;

        height: 66px;

        border-radius: 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 26px;

        margin: 0 auto 20px;

        color: #fff;

        position: relative;

        z-index: 1;

    }

    .value-icon--1 {
        background: linear-gradient(135deg, #F07B5E, #ff9475);
        box-shadow: 0 12px 28px rgba(240, 123, 94, .30);
    }

    .value-card:nth-child(1):hover::after {
        background: #F07B5E;
    }

    .value-icon--2 {
        background: linear-gradient(135deg, #6C63FF, #9b93ff);
        box-shadow: 0 12px 28px rgba(108, 99, 255, .30);
    }

    .value-card:nth-child(2):hover::after {
        background: #6C63FF;
    }

    .value-icon--3 {
        background: linear-gradient(135deg, #2E8B57, #4cb876);
        box-shadow: 0 12px 28px rgba(46, 139, 87, .30);
    }

    .value-card:nth-child(3):hover::after {
        background: #2E8B57;
    }

    .value-icon--4 {
        background: linear-gradient(135deg, #F59E0B, #fbbf24);
        box-shadow: 0 12px 28px rgba(245, 158, 11, .30);
    }

    .value-card:nth-child(4):hover::after {
        background: #F59E0B;
    }

    .value-icon--5 {
        background: linear-gradient(135deg, #0EA5E9, #38bdf8);
        box-shadow: 0 12px 28px rgba(14, 165, 233, .30);
    }

    .value-card:nth-child(5):hover::after {
        background: #0EA5E9;
    }

    .value-card h3,
    .value-card h4 {

        font-size: 18px;

        color: #111;

        font-weight: 800;

        margin: 0 0 10px;

        line-height: 1.35;

        position: relative;

        z-index: 1;

        transition: color .3s ease;

    }

    .value-card p {

        font-size: 14px;

        line-height: 1.65;

        color: #4B5563;

        margin: 0;

        position: relative;

        z-index: 1;

    }

    /* ---------- Overview Grid ---------- */

    .overview-grid {

        display: grid;

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

        gap: 24px;

        margin-top: 36px;

    }

    .overview-stat {

        background: #fff;

        border-radius: 22px;

        padding: 32px 20px 28px;

        text-align: center;

        box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);

        border: 1px solid rgba(229, 231, 235, .55);

        transition: all .35s cubic-bezier(.22, .61, .36, 1);

        position: relative;

        overflow: hidden;

    }

    .overview-stat::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        height: 4px;

        background: linear-gradient(90deg, var(--primary-color), #ff9475);

        transform: scaleX(.4);

        transform-origin: left;

        transition: transform .35s ease;

    }

    .overview-stat:hover {

        transform: translateY(-8px);

        box-shadow: 0 24px 52px rgba(240, 123, 94, .15);

        border-color: rgba(240, 123, 94, .25);

    }

    .overview-stat:hover::before {
        transform: scaleX(1);
    }

    .overview-stat strong {

        display: block;

        font-size: 42px;

        line-height: 1.1;

        font-weight: 900;

        color: var(--primary-color);

        margin: 0 0 10px;

    }

    .overview-stat span {

        font-size: 15px;

        line-height: 1.45;

        color: #374151;

        font-weight: 600;

        display: block;

    }

    /* ---------- About page - RESPONSIVE ---------- */

    @media(max-width:1200px) {

        .about-section {
            padding: 85px 0;
        }

        .about-content {
            max-width: 800px;
        }

        .about-content h2 {
            font-size: 40px;
            margin-bottom: 22px;
        }

        .strength-card {
            padding: 38px 44px;
        }

        .about-section-head h2 {
            font-size: 40px;
        }

        .mission-vision-grid {
            gap: 24px;
        }

        .mv-card {
            padding: 28px 28px 26px;
            border-radius: 18px;
        }

        .mv-icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            font-size: 22px;
            margin-bottom: 0;
        }

        .mv-card h3 {
            font-size: 20px;
            margin-top: 15px;
        }

        .mv-card p {
            font-size: 14.8px;
        }

        .values-grid {
            gap: 18px;
        }

        .value-card {
            padding: 26px 20px 24px;
        }

        .value-icon {
            width: 62px;
            height: 62px;
            border-radius: 18px;
            font-size: 24px;
        }

        .value-card h4 {
            font-size: 17px;
        }

        .value-card p {
            font-size: 13.5px;
        }

        .overview-grid {
            gap: 20px;
            margin-top: 32px;
        }

        .overview-stat strong {
            font-size: 38px;
        }

        .overview-stat span {
            font-size: 14.5px;
        }

    }

    @media(max-width:991px) {

        .about-section {
            padding: 75px 0;
        }

        .about-content h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .about-content p {
            font-size: 16px;
            line-height: 1.8;
        }

        .about-lead {
            font-size: 17px !important;
        }

        .section-badge {
            padding: 9px 20px 9px 42px;
            font-size: 12.5px;
            margin-bottom: 18px;
        }

        .section-badge::before {
            left: 13px;
            width: 17px;
            height: 17px;
        }

        .section-badge::after {
            left: 15.5px;
            font-size: 9.5px;
        }

        .strength-card {
            margin-top: 22px;
            padding: 34px 36px;
            border-radius: 24px;
        }

        .strength-icon {
            width: 66px;
            height: 66px;
            border-radius: 20px;
            font-size: 25px;
        }

        .strength-card p {
            font-size: 16px;
        }

        .about-section-head {
            margin-bottom: 44px;
        }

        .about-section-head h2 {
            font-size: 36px;
            margin-bottom: 16px;
        }

        .about-section-head p {
            font-size: 16px;
        }

        .mission-vision-grid {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .mv-card {
            padding: 28px 28px 26px;
            border-radius: 18px;
        }

        .mv-icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            font-size: 22px;
            margin-bottom: 0;
        }

        .mv-card h3 {
            font-size: 20px;
            margin-top: 15px;
            margin-bottom: 12px;
        }

        .mv-card p {
            font-size: 14.8px;
            margin-bottom: 17px;
        }

        .mv-points li {
            font-size: 14.5px;
        }

        .values-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .overview-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .overview-stat strong {
            font-size: 36px;
        }

    }

    @media(max-width:768px) {

        .about-section {
            padding: 65px 0;
        }

        .about-content h2 {
            font-size: 31px;
            margin-bottom: 18px;
        }

        .section-badge {
            padding: 9px 18px 9px 40px;
            font-size: 12px;
            margin-bottom: 16px;
        }

        .section-badge::before {
            left: 12px;
            width: 16px;
            height: 16px;
        }

        .section-badge::after {
            left: 14.5px;
            font-size: 9px;
        }

        .strength-card {
            padding: 30px 28px;
            border-radius: 22px;
        }

        .strength-icon {
            width: 62px;
            height: 62px;
            border-radius: 18px;
            font-size: 23px;
            margin-bottom: 20px;
        }

        .strength-card p {
            font-size: 15.5px;
        }

        .about-section-head {
            margin-bottom: 38px;
        }

        .about-section-head h2 {
            font-size: 31px;
            margin-bottom: 14px;
        }

        .about-section-head p {
            font-size: 15.5px;
        }

        .mission-vision-grid {
            gap: 22px;
        }

        .mv-card {
            padding: 26px 24px 24px;
            border-radius: 18px;
        }

        .mv-icon {
            width: 52px;
            height: 52px;
            border-radius: 15px;
            font-size: 20px;
            margin-bottom: 0;
        }

        .mv-card h3 {
            font-size: 19px;
            margin-top: 14px;
            margin-bottom: 11px;
        }

        .mv-card p {
            font-size: 14.5px;
            margin-bottom: 16px;
        }

        .mv-points {
            gap: 9px;
        }

        .mv-points li {
            font-size: 14px;
            gap: 9px;
        }

        .mv-points li i {
            width: 20px;
            height: 20px;
            font-size: 10px;
        }

        .values-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
        }

        .value-card {
            padding: 24px 18px 22px;
            border-radius: 20px;
        }

        .value-icon {
            width: 58px;
            height: 58px;
            border-radius: 17px;
            font-size: 22px;
        }

        .value-card h4 {
            font-size: 16px;
        }

        .value-card p {
            font-size: 13.5px;
        }

        .overview-grid {
            gap: 18px;
            margin-top: 28px;
        }

        .overview-stat {
            padding: 28px 18px 24px;
            border-radius: 20px;
        }

        .overview-stat strong {
            font-size: 34px;
        }

        .overview-stat span {
            font-size: 14px;
        }

    }

    @media(max-width:576px) {

        .about-section {
            padding: 55px 0;
        }

        .about-content h2 {
            font-size: 27px;
            margin-bottom: 16px;
        }

        .about-content p {
            font-size: 15px;
            line-height: 1.75;
        }

        .about-lead {
            font-size: 16px !important;
        }

        .section-badge {
            padding: 8px 16px 8px 38px;
            font-size: 11.5px;
            margin-bottom: 14px;
        }

        .section-badge::before {
            left: 11px;
            width: 15px;
            height: 15px;
        }

        .section-badge::after {
            left: 13px;
            font-size: 8.5px;
        }

        .strength-card {
            padding: 26px 22px;
            border-radius: 20px;
        }

        .strength-icon {
            width: 58px;
            height: 58px;
            border-radius: 17px;
            font-size: 22px;
            margin-bottom: 18px;
        }

        .strength-card p {
            font-size: 15px;
        }

        .about-section-head {
            margin-bottom: 32px;
        }

        .about-section-head h2 {
            font-size: 27px;
            margin-bottom: 12px;
        }

        .about-section-head p {
            font-size: 15px;
        }

        .mission-vision-grid {
            gap: 18px;
        }

        .mv-card {
            padding: 24px 20px 22px;
            border-radius: 17px;
            grid-template-columns: 1fr;
        }

        .mv-icon {
            width: 50px;
            height: 50px;
            border-radius: 15px;
            font-size: 19px;
            margin-bottom: 14px;
        }

        .mv-label {
            font-size: 11.5px;
            padding: 6px 14px;
            margin-bottom: 12px;
            letter-spacing: 1.2px;
        }

        .mv-card h3 {
            grid-column: 1;
            font-size: 19px;
            margin: 0 0 12px;
        }

        .mv-card p {
            font-size: 14.5px;
            margin: 0 0 16px;
        }

        .mv-points {
            gap: 9px;
        }

        .mv-points li {
            font-size: 13.5px;
            gap: 8px;
        }

        .mv-points li i {
            width: 20px;
            height: 20px;
            font-size: 10px;
        }

        .values-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .value-card {
            padding: 22px 16px 20px;
        }

        .value-icon {
            width: 54px;
            height: 54px;
            border-radius: 16px;
            font-size: 21px;
        }

        .value-card h4 {
            font-size: 16px;
        }

        .value-card p {
            font-size: 13px;
        }

        .overview-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .overview-stat {
            padding: 24px 16px 22px;
            border-radius: 18px;
        }

        .overview-stat strong {
            font-size: 30px;
        }

        .overview-stat span {
            font-size: 13px;
        }

    }

    @media(max-width:400px) {

        .about-section {
            padding: 50px 0;
        }

        .about-content h2 {
            font-size: 24px;
            margin-bottom: 14px;
        }

        .section-badge {
            padding: 7px 14px 7px 36px;
            font-size: 11px;
            margin-bottom: 12px;
        }

        .section-badge::before {
            left: 10px;
            width: 14px;
            height: 14px;
        }

        .section-badge::after {
            left: 12px;
            font-size: 8px;
        }

        .strength-card {
            padding: 22px 18px;
            border-radius: 18px;
        }

        .strength-icon {
            width: 54px;
            height: 54px;
            border-radius: 16px;
            font-size: 20px;
        }

        .strength-card p {
            font-size: 14.5px;
        }

        .about-section-head {
            margin-bottom: 28px;
        }

        .about-section-head h2 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .about-section-head p {
            font-size: 14.5px;
        }

        .mission-vision-grid {
            gap: 16px;
        }

        .mv-card {
            padding: 22px 18px 20px;
            border-radius: 16px;
            grid-template-columns: 1fr;
        }

        .mv-icon {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            font-size: 18px;
            margin-bottom: 12px;
        }

        .mv-label {
            font-size: 11px;
            padding: 6px 12px;
            margin-bottom: 11px;
            letter-spacing: 1px;
        }

        .mv-card h3 {
            grid-column: 1;
            font-size: 18px;
            margin: 0 0 11px;
        }

        .mv-card p {
            font-size: 14px;
            margin: 0 0 15px;
        }

        .mv-points {
            gap: 8px;
        }

        .mv-points li {
            font-size: 13px;
            gap: 8px;
        }

        .mv-points li i {
            width: 19px;
            height: 19px;
            font-size: 9.5px;
        }

        .values-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .value-card {
            padding: 22px 20px 20px;
            border-radius: 18px;
        }

        .value-card h4 {
            font-size: 17px;
        }

        .overview-grid {
            grid-template-columns: 1fr;
            gap: 14px;
            margin-top: 24px;
        }

        .overview-stat strong {
            font-size: 32px;
        }

        .overview-stat span {
            font-size: 14px;
        }

    }


    /*================================================================
    SITE FOOTER (BLACK)
================================================================*/

    .site-footer {

        background: #0B0B0F;

        color: #C8CBD2;

        font-family: 'Poppins', sans-serif;

        overflow: hidden;

    }

    .site-footer .container {

        max-width: 1320px;

        margin: auto;

        padding: 0 24px;

    }

    /* ============== TOP CTA BAND ============== */

    .footer-top {

        background: #111118;

        border-bottom: 1px solid rgba(240, 123, 94, 0.18);

        padding: 28px 0;

        position: relative;

        overflow: hidden;

    }

    .footer-top::before {

        display: none;

    }

    .footer-top::after {

        display: none;

    }

    .ft-inner {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 24px;

        flex-wrap: wrap;

        position: relative;

        z-index: 1;

    }

    .ft-tag {

        display: flex;

        align-items: center;

        gap: 16px;

    }

    .ft-tag>i {

        width: 48px;

        height: 48px;

        border-radius: 14px;

        background: var(--primary-color);

        color: #fff;

        font-size: 18px;

        display: flex;

        align-items: center;

        justify-content: center;

        box-shadow: 0 10px 26px rgba(240, 123, 94, 0.30);

        flex-shrink: 0;

    }

    .ft-tag>div {

        display: flex;

        flex-direction: column;

        gap: 4px;

        line-height: 1.25;

    }

    .ft-tag strong {

        color: #fff;

        font-size: 17px;

        font-weight: 700;

        letter-spacing: .2px;

    }

    .ft-tag small {

        color: #9BA3AF;

        font-size: 13.5px;

        font-weight: 400;

    }

    .ft-cta {

        display: inline-flex;

        align-items: center;

        gap: 10px;

        padding: 14px 28px;

        background: var(--primary-color);

        color: #fff;

        border-radius: 50px;

        font-weight: 700;

        font-size: 14.5px;

        box-shadow: 0 12px 28px rgba(240, 123, 94, 0.28);

        transition: all .3s ease;

        flex-shrink: 0;

        white-space: nowrap;

    }

    .ft-cta i {

        font-size: 12px;

        transition: transform .3s ease;

    }

    .ft-cta:hover {

        transform: translateY(-2px);

        box-shadow: 0 18px 36px rgba(240, 123, 94, 0.40);

    }

    .ft-cta:hover i {

        transform: translateX(4px);

    }

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

    .footer-main {

        padding: 70px 0 50px;

        background: #0B0B0F;

        position: relative;

    }

    .footer-main::before {

        display: none;

    }

    .fm-grid {

        display: grid;

        grid-template-columns: 1.3fr 1fr 1.1fr 1.3fr;

        gap: 44px 36px;

        position: relative;

        z-index: 1;

    }

    .fm-col h3,
    .fm-col h4 {

        color: #fff;

        font-size: 15px;

        font-weight: 700;

        letter-spacing: .4px;

        text-transform: uppercase;

        margin: 0 0 22px;

        position: relative;

        padding-bottom: 14px;

    }

    .fm-col h3::after,
    .fm-col h4::after {

        content: "";

        position: absolute;

        left: 0;

        bottom: 0;

        width: 36px;

        height: 3px;

        border-radius: 999px;

        background: var(--primary-color);

    }

    /* --- Brand --- */

    .fm-logo {

        margin-bottom: 20px;

    }

    .fm-logo-link {

        display: inline-block;

        line-height: 0;

    }

    .fm-logo-img {

        max-width: 220px;

        width: 100%;

        height: auto;

        display: block;

    }

    .fm-about {

        color: #9EA4AF;

        font-size: 14.5px;

        line-height: 1.75;

        margin: 0 0 22px;

        max-width: 360px;

    }

    .fm-socials {

        display: flex;

        align-items: center;

        gap: 10px;

        flex-wrap: wrap;

    }

    .fm-socials a {

        width: 38px;

        height: 38px;

        border-radius: 11px;

        background: rgba(255, 255, 255, 0.06);

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

        color: #C8CBD2;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 13.5px;

        transition: all .3s ease;

    }

    .fm-socials a:hover {

        background: var(--primary-color);

        color: #fff;

        border-color: var(--primary-color);

        transform: translateY(-3px);

        box-shadow: 0 10px 20px rgba(240, 123, 94, 0.28);

    }

    /* --- Nav Columns --- */

    .fm-nav ul {

        list-style: none;

        padding: 0;

        margin: 0;

        display: flex;

        flex-direction: column;

        gap: 12px;

    }

    .fm-nav ul li a {

        color: #9EA4AF;

        font-size: 14.5px;

        font-weight: 500;

        line-height: 1.25;

        display: inline-flex;

        align-items: center;

        gap: 0;

        position: relative;

        transition: all .25s ease;

        padding-left: 0;

    }

    .fm-nav ul li a::before {

        content: "›";

        display: inline-block;

        margin-right: 8px;

        color: var(--primary-color);

        font-weight: 700;

        opacity: .6;

        transform: translateX(0);

        transition: all .25s ease;

    }

    .fm-nav ul li a:hover {

        color: var(--primary-color);

        transform: translateX(3px);

    }

    .fm-nav ul li a:hover::before {

        opacity: 1;

        transform: translateX(2px);

    }

    /* --- End Column --- */

    .fm-nl-text {

        color: #9EA4AF;

        font-size: 14px;

        line-height: 1.7;

        margin: 0 0 18px;

    }

    .fm-newsletter {

        display: flex;

        align-items: center;

        gap: 8px;

        padding: 6px;

        border-radius: 14px;

        background: rgba(255, 255, 255, 0.04);

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

        margin-bottom: 28px;

        transition: border-color .25s ease;

    }

    .fm-newsletter:focus-within {

        border-color: rgba(240, 123, 94, 0.35);

    }

    .fm-newsletter input {

        flex: 1;

        min-width: 0;

        border: none;

        outline: none;

        background: transparent;

        color: #fff;

        padding: 10px 12px;

        font-size: 14px;

        font-family: inherit;

    }

    .fm-newsletter input::placeholder {

        color: #6D727C;

    }

    .fm-newsletter button {

        width: 40px;

        height: 40px;

        border: none;

        cursor: pointer;

        border-radius: 10px;

        background: var(--primary-color);

        color: #fff;

        font-size: 13px;

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all .3s ease;

        box-shadow: 0 8px 18px rgba(240, 123, 94, 0.28);

        flex-shrink: 0;

    }

    .fm-newsletter button:hover {

        transform: translateX(2px);

        box-shadow: 0 10px 22px rgba(240, 123, 94, 0.38);

    }

    .fm-mini-contact ul {

        list-style: none;

        padding: 0;

        margin: 0;

        display: flex;

        flex-direction: column;

        gap: 14px;

    }

    .fm-mini-contact ul li {

        display: flex;

        align-items: flex-start;

        gap: 12px;

        color: #9EA4AF;

        font-size: 13.5px;

        line-height: 1.55;

    }

    .fm-mini-contact ul li>i {

        width: 34px;

        height: 34px;

        border-radius: 10px;

        background: rgba(255, 255, 255, 0.05);

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

        color: var(--primary-color);

        font-size: 13px;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;

        margin-top: 2px;

    }

    .fm-mini-contact ul li a {

        color: #C8CBD2;

        transition: color .2s ease;

    }

    .fm-mini-contact ul li a:hover {

        color: var(--primary-color);

    }

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

    .footer-bottom {

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

        padding: 22px 0;

        background: #050507;

    }

    .fb-inner {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 20px;

        flex-wrap: wrap;

    }

    .fb-inner small {

        color: #7B808A;

        font-size: 13px;

        font-weight: 400;

        letter-spacing: .2px;

    }

    .fb-legal {

        list-style: none;

        padding: 0;

        margin: 0;

        display: flex;

        align-items: center;

        gap: 22px;

        flex-wrap: wrap;

    }

    .fb-legal li a {

        color: #7B808A;

        font-size: 13px;

        transition: color .2s ease;

        font-weight: 500;

    }

    .fb-legal li a:hover {

        color: var(--primary-color);

    }

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

    @media(max-width:1200px) {

        .site-footer .container {
            padding: 0 20px;
        }

        .ft-inner {
            gap: 20px;
        }

        .ft-tag strong {
            font-size: 16px;
        }

        .ft-tag small {
            font-size: 13px;
        }

        .ft-cta {
            padding: 13px 26px;
            font-size: 14px;
        }

        .footer-main {
            padding: 65px 0 46px;
        }

        .fm-grid {

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

            gap: 40px 32px;

        }

        .fm-col h3,
        .fm-col h4 {
            font-size: 14.5px;
            margin-bottom: 20px;
            padding-bottom: 12px;
        }

        .fm-logo-img {
            max-width: 200px;
        }

        .fm-about {
            font-size: 14px;
            margin-bottom: 20px;
        }

        .fm-nav ul {
            gap: 11px;
        }

        .fm-nav ul li a {
            font-size: 14px;
        }

    }

    @media(max-width:991px) {

        .footer-top {
            padding: 24px 0;
        }

        .ft-tag>i {
            width: 44px;
            height: 44px;
            border-radius: 13px;
            font-size: 17px;
        }

        .ft-inner {
            gap: 18px;
        }

        .ft-cta {
            padding: 12px 24px;
            font-size: 14px;
        }

        .footer-main {
            padding: 58px 0 42px;
        }

        .site-footer .container {
            padding: 0 20px;
        }

        .fm-grid {

            grid-template-columns: 1fr 1fr;

            gap: 38px 30px;

        }

        .fm-brand {
            grid-column: 1 / -1;
        }

        .fm-about {
            max-width: 100%;
        }

        .fm-col h3,
        .fm-col h4 {
            font-size: 14px;
            margin-bottom: 18px;
        }

        .footer-bottom {
            padding: 20px 0;
        }

    }

    @media(max-width:768px) {

        .footer-top {
            padding: 22px 0;
        }

        .ft-tag>i {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            font-size: 16px;
        }

        .ft-tag strong {
            font-size: 15.5px;
        }

        .ft-tag small {
            font-size: 12.5px;
        }

        .ft-inner {

            flex-direction: column;

            align-items: flex-start;

            gap: 16px;

        }

        .ft-cta {
            align-self: stretch;
            justify-content: center;
            display: flex;
        }

        .site-footer .container {
            padding: 0 18px;
        }

        .footer-main {
            padding: 52px 0 38px;
        }

        .fm-grid {
            gap: 36px 26px;
        }

        .fm-logo {
            margin-bottom: 18px;
        }

        .fm-logo-img {
            max-width: 180px;
        }

        .fm-about {
            font-size: 14px;
            margin-bottom: 18px;
        }

        .fm-socials a {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            font-size: 13px;
        }

        .fm-col h3,
        .fm-col h4 {
            font-size: 13.5px;
            margin-bottom: 18px;
            padding-bottom: 12px;
        }

        .fm-nav ul {
            gap: 10px;
        }

        .fm-nav ul li a {
            font-size: 13.5px;
        }

        .fm-newsletter {
            margin-bottom: 26px;
        }

        .fm-mini-contact ul {
            gap: 12px;
        }

        .fb-inner {
            gap: 14px;
        }

        .fb-legal {
            gap: 18px;
        }

    }

    @media(max-width:576px) {

        .footer-top {
            padding: 20px 0;
        }

        .ft-inner {
            gap: 14px;
        }

        .ft-tag {
            gap: 12px;
        }

        .ft-tag>i {
            width: 40px;
            height: 40px;
            border-radius: 11px;
            font-size: 15.5px;
        }

        .ft-tag strong {
            font-size: 15px;
        }

        .ft-tag small {
            font-size: 12px;
        }

        .ft-cta {
            padding: 12px 22px;
            font-size: 14px;
            width: 100%;
        }

        .site-footer .container {
            padding: 0 18px;
        }

        .footer-main {
            padding: 46px 0 34px;
        }

        .fm-grid {

            grid-template-columns: 1fr;

            gap: 34px;

        }

        .fm-brand {
            grid-column: auto;
        }

        .fm-col h3,
        .fm-col h4 {
            font-size: 13px;
            margin-bottom: 17px;
            padding-bottom: 11px;
        }

        .fm-logo {
            margin-bottom: 16px;
        }

        .fm-logo-img {
            max-width: 170px;
        }

        .fm-about {
            font-size: 13.5px;
            line-height: 1.7;
            margin-bottom: 16px;
        }

        .fm-socials {
            gap: 9px;
        }

        .fm-socials a {
            width: 36px;
            height: 36px;
        }

        .fm-nav ul {
            gap: 10px;
        }

        .fm-nav ul li a {
            font-size: 14px;
        }

        .fm-nl-text {
            font-size: 13.5px;
            line-height: 1.68;
            margin-bottom: 16px;
        }

        .fm-newsletter {
            margin-bottom: 24px;
        }

        .fm-newsletter input {
            font-size: 13.5px;
            padding: 10px 10px;
        }

        .fm-newsletter button {
            width: 38px;
            height: 38px;
            border-radius: 9px;
        }

        .fm-mini-contact ul {
            gap: 11px;
        }

        .fm-mini-contact ul li {
            font-size: 13px;
        }

        .fm-mini-contact ul li>i {
            width: 32px;
            height: 32px;
            border-radius: 9px;
            font-size: 12.5px;
        }

        .footer-bottom {
            padding: 18px 0;
        }

        .fb-inner {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 12px;
        }

        .fb-legal {
            gap: 16px;
            justify-content: center;
        }

    }

    @media(max-width:400px) {

        .footer-top {
            padding: 18px 0;
        }

        .site-footer .container {
            padding: 0 16px;
        }

        .ft-tag {
            gap: 10px;
        }

        .ft-tag>i {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            font-size: 15px;
        }

        .ft-tag strong {
            font-size: 14.5px;
        }

        .ft-tag small {
            font-size: 11.5px;
        }

        .ft-cta {
            padding: 12px 20px;
            font-size: 13.5px;
        }

        .footer-main {
            padding: 42px 0 30px;
        }

        .fm-grid {
            gap: 30px;
        }

        .fm-logo-img {
            max-width: 160px;
        }

        .fm-about {
            font-size: 13px;
            line-height: 1.68;
        }

        .fm-socials a {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            font-size: 12.5px;
        }

        .fm-col h3,
        .fm-col h4 {
            font-size: 12.5px;
            margin-bottom: 16px;
            padding-bottom: 10px;
        }

        .fm-nav ul {
            gap: 9px;
        }

        .fm-nav ul li a {
            font-size: 13.5px;
        }

        .fm-nl-text {
            font-size: 13px;
            margin-bottom: 14px;
        }

        .fm-newsletter {
            padding: 5px;
            border-radius: 12px;
            margin-bottom: 22px;
        }

        .fm-newsletter input {
            font-size: 13px;
            padding: 9px 10px;
        }

        .fm-newsletter button {
            width: 36px;
            height: 36px;
            border-radius: 8px;
        }

        .fm-mini-contact ul {
            gap: 10px;
        }

        .fm-mini-contact ul li {
            font-size: 12.5px;
        }

        .fm-mini-contact ul li>i {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            font-size: 12px;
        }

        .footer-bottom {
            padding: 16px 0;
        }

        .fb-inner small {
            font-size: 12px;
        }

        .fb-legal {
            gap: 14px;
        }

        .fb-legal li a {
            font-size: 12px;
        }

    }


    /* ================================================================
    OUR STRENGTH SECTION (2x2 FEATURE GRID)
================================================================ */

    .about-section--strength {

        padding: 60px 0;
        background: #FFF1EC !important;

    }

    .strength-container {

        max-width: 1320px;
        margin: 0 auto;
        padding: 0 24px;
        display: block !important;

    }

    /*================================================================
        REDESIGNED OUR STRENGTHS SECTION
    ==================================================================*/
    .about-section--strength {
        padding: 60px 0;
        background: #fff8f5;
        /* Premium soft peach background tint */
        position: relative;
    }

    .strength-split-wrapper {
        display: grid;
        grid-template-columns: 4.5fr 7.5fr;
        gap: 80px;
        align-items: start;
    }

    .strength-info-panel {
        position: sticky;
        top: 120px;
    }

    .strength-info-panel h2 {
        font-size: 42px;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.2;
        margin: 20px 0 24px;
    }

    .strength-info-panel h2 span {
        color: var(--primary-color);
        background: none;
        -webkit-text-fill-color: initial;
    }

    .strength-info-panel p {
        font-size: 17px;
        color: #475569;
        line-height: 1.75;
        margin-bottom: 35px;
    }

    .strength-panel-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 30px;
        border: 1px solid rgba(240, 123, 94, 0.15);
        box-shadow: 0 10px 30px rgba(240, 123, 94, 0.04);
        display: inline-block;
    }

    .spc-metric {
        display: flex;
        flex-direction: column;
    }

    .spc-num {
        font-size: 48px;
        font-weight: 800;
        color: var(--primary-color);
        line-height: 1.1;
    }

    .spc-lbl {
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 8px;
    }

    /* Right side list */
    .strength-list-panel {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .strength-item {
        background: #ffffff;
        border-radius: 20px;
        padding: 20px 20px;
        border: 1px solid rgba(226, 232, 240, 0.8);
        display: flex;
        gap: 30px;
        align-items: flex-start;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.01);
    }

    .strength-item:hover {
        transform: translateX(10px);
        border-color: rgba(240, 123, 94, 0.25);
        box-shadow: 0 12px 25px rgba(240, 123, 94, 0.06);
    }

    .strength-item-number {
        font-size: 20px;
        font-weight: 800;
        color: var(--primary-color);
        background: rgba(240, 123, 94, 0.08);
        width: 46px;
        height: 46px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.4s ease;
    }

    .strength-item:hover .strength-item-number {
        background: var(--primary-color);
        color: #ffffff;
    }

    .strength-item-content h3 {
        font-size: 20px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 8px;
    }

    .strength-item-content p {
        font-size: 15px;
        color: #64748b;
        line-height: 1.6;
        margin: 0;
    }

    /* Responsive strengths styling */
    @media (max-width: 991px) {
        .strength-split-wrapper {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .strength-info-panel {
            position: static !important;
            top: auto !important;
        }

        .strength-info-panel h2 {
            font-size: 34px;
            margin: 16px 0 20px;
        }

        .strength-info-panel p {
            margin-bottom: 24px;
        }

        .strength-item:hover {
            transform: none !important;
        }
    }

    @media (max-width: 768px) {
        .about-section--strength {
            padding: 50px 0;
        }

        .strength-container {
            padding: 0 20px;
        }

        .strength-info-panel h2 {
            font-size: 30px;
        }

        .strength-info-panel p {
            font-size: 15.5px;
            line-height: 1.65;
        }

        .strength-panel-card {
            padding: 24px 26px;
            border-radius: 18px;
            display: block;
            width: 100%;
            max-width: 340px;
            box-sizing: border-box;
        }

        .spc-num {
            font-size: 40px;
        }
    }

    @media (max-width: 576px) {
        .about-section--strength {
            padding: 45px 0;
        }

        .strength-container {
            padding: 0 16px;
        }

        .strength-split-wrapper {
            gap: 28px;
        }

        .strength-info-panel h2 {
            font-size: 26px;
            line-height: 1.25;
            margin: 12px 0 14px;
        }

        .strength-info-panel p {
            font-size: 14.5px;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .strength-panel-card {
            padding: 18px 20px;
            border-radius: 16px;
            max-width: 100%;
            display: block;
        }

        .spc-num {
            font-size: 36px;
        }

        .spc-lbl {
            font-size: 12px;
            margin-top: 6px;
        }

        .strength-list-panel {
            gap: 16px;
        }

        .strength-item {
            padding: 18px 16px;
            gap: 16px;
            border-radius: 16px;
        }

        .strength-item-number {
            width: 40px;
            height: 40px;
            font-size: 16px;
            border-radius: 10px;
        }

        .strength-item-content h3 {
            font-size: 17px;
            margin-bottom: 6px;
        }

        .strength-item-content p {
            font-size: 13.5px;
            line-height: 1.55;
        }
    }

    @media (max-width: 380px) {
        .strength-info-panel h2 {
            font-size: 23px;
        }

        .strength-item {
            padding: 16px 14px;
            gap: 12px;
        }

        .strength-item-number {
            width: 36px;
            height: 36px;
            font-size: 15px;
        }

        .strength-item-content h3 {
            font-size: 16px;
        }

        .spc-num {
            font-size: 32px;
        }
    }

    /* ==========================================
   PROJECTS CATEGORIES GRID PAGE
========================================== */
    .projects-section {
        padding: 60px 0;
        background: #f8fafc;
    }

    .projects-section .container {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 24px;
    }

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

    .project-category-card {
        background: #ffffff;
        border-radius: 20px;
        border: 1px solid var(--border, #e2e8f0);
        box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        height: 100%;
    }

    .project-category-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
        border-color: var(--primary-color);
    }

    .project-category-image {
        width: 100%;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        position: relative;
        background: #f1f5f9;
    }

    .project-category-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .project-category-card:hover .project-category-image img {
        transform: scale(1.06);
    }

    .project-category-body {
        padding: 24px;
        text-align: center;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        border-top: 1px solid rgba(226, 232, 240, 0.6);
    }

    .project-category-body h3 {
        font-size: 19px;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
        transition: color 0.3s ease;
        line-height: 1.4;
    }

    .project-category-card:hover .project-category-body h3 {
        color: var(--primary-color);
    }

    /* Responsive for Projects Categories Grid */
    @media (max-width: 991px) {
        .projects-section {
            padding: 60px 0;
        }

        .projects-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        .projects-section .container {
            padding: 0 20px;
        }
    }

    @media (max-width: 600px) {
        .projects-section {
            padding: 50px 0;
        }

        .projects-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .projects-section .container {
            padding: 0 16px;
        }

        .project-category-body {
            padding: 20px;
        }

        .project-category-body h3 {
            font-size: 17px;
        }
    }


    /*================================================================
    HVAC ASYMMETRIC SPLIT SECTION
==================================================================*/
    .hvac-split-section {
        padding: 60px 0;
        background: #f8fafc;
        position: relative;
        overflow: hidden;
    }

    /* Background decorative gradient glow */
    .hvac-split-section::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(240, 123, 94, 0.04) 0%, rgba(255, 255, 255, 0) 70%);
        top: -200px;
        left: -100px;
        pointer-events: none;
    }

    .hvac-split-section .container {
        max-width: 1320px;
        margin: auto;
        padding: 0 24px;
        position: relative;
        z-index: 2;
    }

    .hvac-split-wrapper {
        display: grid;
        grid-template-columns: 4.2fr 7.8fr;
        gap: 60px;
        align-items: stretch;
    }

    /* Left side: Information Panel */
    .hvac-info-panel {
        background: #0f172a;
        border-radius: 28px;
        padding: 50px 45px;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .hvac-info-panel::before {
        content: "";
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(240, 123, 94, 0.15) 0%, transparent 60%);
        pointer-events: none;
    }

    .hvac-info-panel .panel-content {
        position: relative;
        z-index: 2;
    }

    .hvac-accent-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(240, 123, 94, 0.15);
        border: 1px solid rgba(240, 123, 94, 0.25);
        color: #ff9475;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 24px;
    }

    .hvac-info-panel h2 {
        font-size: 38px;
        line-height: 1.2;
        font-weight: 800;
        margin-bottom: 20px;
        color: #ffffff;
    }

    .hvac-info-panel h2 span {
        color: #ff9475;
        background: linear-gradient(to right, #ff9475, #f07b5e);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .hvac-info-panel p {
        font-size: 16px;
        color: #94a3b8;
        line-height: 1.7;
        margin-bottom: 35px;
    }

    .hvac-stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 40px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 30px;
    }

    .stat-box {
        display: flex;
        flex-direction: column;
    }

    .stat-number {
        font-size: 32px;
        font-weight: 800;
        color: #ffffff;
        line-height: 1;
        margin-bottom: 6px;
    }

    .stat-label {
        font-size: 13px;
        color: #64748b;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .hvac-panel-btn {
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #f07b5e;
        color: #ffffff;
        padding: 16px 32px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 15px;
        box-shadow: 0 10px 20px rgba(240, 123, 94, 0.2);
        transition: all 0.3s ease;
    }

    .hvac-panel-btn:hover {
        background: #ff9475;
        transform: translateY(-2px);
        box-shadow: 0 15px 25px rgba(240, 123, 94, 0.35);
    }

    .hvac-panel-btn i {
        transition: transform 0.3s ease;
    }

    .hvac-panel-btn:hover i {
        transform: translateX(4px);
    }

    /* Right side: 2x2 Grid of Custom Cards */
    .hvac-services-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .hvac-grid-card {
        background: #ffffff;
        border-radius: 24px;
        border: 1px solid rgba(226, 232, 240, 0.8);
        padding: 35px 30px;
        position: relative;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.01);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .hvac-grid-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 4px;
        background: #f07b5e;
        border-radius: 4px 4px 0 0;
        transition: width 0.4s ease;
    }

    .hvac-grid-card:hover {
        transform: translateY(-8px);
        border-color: rgba(240, 123, 94, 0.2);
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
    }

    .hvac-grid-card:hover::before {
        width: 100%;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 22px;
    }

    .card-icon-box {
        width: 48px;
        height: 48px;
        background: rgba(240, 123, 94, 0.08);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #f07b5e;
        transition: all 0.4s ease;
    }

    .hvac-grid-card:hover .card-icon-box {
        background: #f07b5e;
        color: #ffffff;
        transform: rotate(5deg) scale(1.05);
    }

    .card-number {
        font-size: 16px;
        font-weight: 800;
        color: #cbd5e1;
        transition: color 0.4s ease;
    }

    .hvac-grid-card:hover .card-number {
        color: #f07b5e;
    }

    .card-body h3 {
        font-size: 19px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 10px;
        transition: color 0.3s ease;
    }

    .card-body p {
        font-size: 14px;
        color: #64748b;
        line-height: 1.6;
        margin: 0 0 22px;
    }

    .card-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: auto;
    }

    .card-tag {
        font-size: 11px;
        font-weight: 600;
        background: #f1f5f9;
        color: #475569;
        padding: 5px 12px;
        border-radius: 50px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        transition: all 0.3s ease;
    }

    .hvac-grid-card:hover .card-tag {
        background: rgba(240, 123, 94, 0.08);
        color: #f07b5e;
    }

    .card-overlay-link {
        position: absolute;
        inset: 0;
        z-index: 3;
    }

    /* Responsive Overrides */
    @media (max-width: 991px) {
        .hvac-split-wrapper {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .hvac-info-panel {
            padding: 40px;
        }
    }

    @media (max-width: 600px) {
        .hvac-split-section {
            padding: 60px 0;
        }

        .hvac-info-panel {
            padding: 35px 25px;
        }

        .hvac-info-panel h2 {
            font-size: 30px;
        }

        .hvac-services-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .hvac-grid-card {
            padding: 30px 24px;
        }
    }

    /*================================================================
        CONTACT PAGE MAP TABS STYLE
    ==================================================================*/
    .map-tabs-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }

    .map-tabs-header {
        display: flex;
        gap: 10px;
        background: #f1f5f9;
        padding: 6px;
        border-radius: 12px;
        border: 1px solid rgba(15, 23, 42, 0.04);
    }

    .map-tab-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 16px;
        background: transparent;
        border: none;
        border-radius: 8px;
        font-size: 13.5px;
        font-weight: 600;
        color: #475569;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .map-tab-btn i {
        font-size: 14px;
        transition: color 0.3s ease;
    }

    .map-tab-btn:hover {
        color: var(--primary-color);
    }

    .map-tab-btn.active {
        background: #ffffff;
        color: var(--primary-color);
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
    }

    /*=========================
    PRIVACY POLICY / LEGAL PAGES
==========================*/

    .legal-section {
        padding: 80px 0;
        background-color: #F8FAFC;
        width: 100%;
    }

    .legal-section .container {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 24px;
        width: 100%;
        box-sizing: border-box;
    }

    .legal-grid {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 36px;
        align-items: start;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .legal-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 110px;
        align-self: start;
        background: #ffffff;
        border-radius: 20px;
        padding: 24px;
        border: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: var(--shadow-sm);
        z-index: 10;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .legal-sidebar h2,
    .legal-sidebar h4 {
        font-size: 17px;
        font-weight: 700;
        color: #0F172A;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 2px solid var(--primary-light);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .legal-sidebar h2 i,
    .legal-sidebar h4 i {
        color: var(--primary-color);
    }

    .legal-toc-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .legal-toc-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 10px;
        color: #475569;
        font-size: 13.5px;
        font-weight: 500;
        transition: all 0.25s ease;
        text-decoration: none;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .legal-toc-link span {
        color: inherit;
    }

    .legal-toc-link:hover,
    .legal-toc-link.active {
        background: var(--primary-light);
        color: var(--primary-color) !important;
        font-weight: 600;
        transform: translateX(4px);
    }

    .legal-toc-link.active span {
        color: var(--primary-color) !important;
    }

    .legal-sidebar-contact {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px dashed #E2E8F0;
    }

    .legal-sidebar-contact h3,
    .legal-sidebar-contact h5 {
        font-size: 15px;
        font-weight: 700;
        color: #0F172A;
        margin-bottom: 8px;
    }

    .legal-sidebar-contact p {
        font-size: 13px;
        color: #64748B;
        line-height: 1.5;
        margin-bottom: 14px;
    }

    .legal-sidebar-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 10px 16px;
        background: var(--accent-green);
        color: #fff;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: 600;
        transition: background 0.3s ease;
    }

    .legal-sidebar-btn:hover {
        background: #239454;
        color: #fff;
    }

    .legal-main-content {
        display: flex;
        flex-direction: column;
        gap: 30px;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .legal-meta-card {
        background: linear-gradient(135deg, #ffffff 0%, var(--primary-light) 100%);
        border: 1px solid rgba(240, 123, 94, 0.2);
        border-radius: 20px;
        padding: 28px 32px;
        box-shadow: var(--shadow-sm);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .legal-meta-info {
        flex: 1;
        min-width: 240px;
    }

    .legal-meta-info h2 {
        font-size: 24px;
        font-weight: 700;
        color: #0F172A;
        margin-bottom: 6px;
        line-height: 1.3;
    }

    .legal-meta-info p {
        font-size: 14px;
        color: #64748B;
        line-height: 1.5;
    }

    .legal-meta-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: #ffffff;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 600;
        color: var(--primary-color);
        box-shadow: 0 4px 12px rgba(240, 123, 94, 0.12);
        max-width: 100%;
    }

    .legal-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 36px;
        border: 1px solid rgba(15, 23, 42, 0.06);
        box-shadow: var(--shadow-sm);
        scroll-margin-top: 120px;
        overflow-wrap: break-word;
        word-break: break-word;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .legal-card-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 20px;
        padding-bottom: 14px;
        border-bottom: 1px solid #F1F5F9;
    }

    .legal-card-header .icon-box {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--primary-light);
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .legal-card-header h3 {
        font-size: 20px;
        font-weight: 700;
        color: #0F172A;
        line-height: 1.3;
    }

    .legal-card-body p {
        font-size: 15px;
        line-height: 1.7;
        color: #475569;
        margin-bottom: 16px;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .legal-card-body p:last-child {
        margin-bottom: 0;
    }

    .legal-card-body a {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .legal-card-body ul {
        margin: 16px 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .legal-card-body ul li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 14.5px;
        line-height: 1.6;
        color: #334155;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .legal-card-body ul li i {
        color: var(--accent-green);
        margin-top: 4px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .policy-highlight-box {
        background: var(--accent-green-light);
        border-left: 4px solid var(--accent-green);
        border-radius: 12px;
        padding: 20px 24px;
        margin: 20px 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .policy-highlight-box p {
        color: #166534;
        font-size: 14.5px;
        line-height: 1.6;
        margin: 0;
    }

    .legal-contact-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
        margin-top: 20px;
        width: 100%;
        max-width: 100%;
    }

    .legal-contact-item {
        background: #F8FAFC;
        border-radius: 14px;
        padding: 20px;
        border: 1px solid #E2E8F0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .legal-contact-item h4,
    .legal-contact-item h5 {
        font-size: 15px;
        font-weight: 700;
        color: #0F172A;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .legal-contact-item h4 i,
    .legal-contact-item h5 i {
        color: var(--primary-color);
        flex-shrink: 0;
    }

    .legal-contact-item p {
        font-size: 13.5px;
        color: #64748B;
        line-height: 1.5;
        margin: 0;
    }

    .legal-contact-item a {
        color: var(--primary-color);
        font-weight: 600;
        transition: color 0.2s ease;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .legal-contact-item a:hover {
        color: var(--accent-green);
    }

    /* ===================================
   RESPONSIVE BREAKPOINTS FOR LEGAL
====================================== */

    @media (max-width: 1199px) {
        .legal-grid {
            grid-template-columns: 270px 1fr;
            gap: 28px;
        }

        .legal-card {
            padding: 30px;
        }
    }

    @media (max-width: 991px) {
        .legal-section {
            padding: 30px 0 60px;
        }

        .legal-section .container {
            padding: 0 16px;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .legal-grid {
            display: block;
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }

        /* Hide TOC sidebar on mobile view to prevent header overlap and ensure main site header is 100% visible */
        .legal-sidebar {
            display: none !important;
        }

        .legal-card {
            scroll-margin-top: 100px;
        }
    }

    @media (max-width: 768px) {
        .legal-section {
            padding: 24px 0 50px;
        }

        .legal-main-content {
            gap: 16px;
        }

        .legal-meta-card {
            padding: 18px 20px;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            border-radius: 16px;
        }

        .legal-meta-info {
            min-width: 0;
            width: 100%;
        }

        .legal-meta-info h2 {
            font-size: 19px;
            line-height: 1.35;
        }

        .legal-meta-info p {
            font-size: 13.5px;
        }

        .legal-meta-badge {
            font-size: 12px;
            padding: 6px 14px;
        }

        .legal-card {
            padding: 22px 18px;
            border-radius: 16px;
            border: 1px solid rgba(15, 23, 42, 0.05);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
        }

        .legal-card-header {
            gap: 12px;
            margin-bottom: 14px;
            padding-bottom: 12px;
        }

        .legal-card-header .icon-box {
            width: 36px;
            height: 36px;
            font-size: 15px;
            border-radius: 10px;
        }

        .legal-card-header h3 {
            font-size: 17px;
            font-weight: 700;
        }

        .legal-card-body p {
            font-size: 14px;
            line-height: 1.65;
            margin-bottom: 12px;
        }

        .legal-card-body ul {
            margin: 12px 0;
            gap: 10px;
        }

        .legal-card-body ul li {
            font-size: 13.5px;
            gap: 10px;
        }

        .legal-contact-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }
    }

    @media (max-width: 576px) {
        .legal-sidebar {
            padding: 8px 10px;
            border-radius: 12px;
        }

        .legal-toc-link {
            padding: 7px 12px;
            font-size: 12px;
            border-radius: 16px;
        }

        .legal-meta-card {
            padding: 16px 14px;
            border-radius: 14px;
        }

        .legal-meta-info h2 {
            font-size: 17px;
        }

        .legal-meta-info p {
            font-size: 12.5px;
        }

        .legal-card {
            padding: 18px 14px;
            border-radius: 14px;
        }

        .legal-card-header {
            gap: 10px;
        }

        .legal-card-header .icon-box {
            width: 32px;
            height: 32px;
            font-size: 14px;
            border-radius: 8px;
        }

        .legal-card-header h3 {
            font-size: 16px;
        }

        .legal-card-body p {
            font-size: 13.5px;
            line-height: 1.6;
        }

        .legal-card-body ul li {
            font-size: 13px;
            line-height: 1.55;
        }

        .policy-highlight-box {
            padding: 14px 14px;
            border-radius: 10px;
            margin: 14px 0;
            border-left-width: 3px;
        }

        .policy-highlight-box p {
            font-size: 13px;
        }

        .legal-contact-item {
            padding: 14px;
            border-radius: 12px;
        }

        .legal-contact-item h4,
        .legal-contact-item h5 {
            font-size: 14px;
        }

        .legal-contact-item p {
            font-size: 12.5px;
        }
    }

    /* ==========================================================================
   Image & Text Parallel Layout Alignment (2-Column Grid Sections)
   ========================================================================== */

    /* 1. Introduction Section Grid Alignment */
    .aud-intro-grid {
        align-items: stretch !important;
    }

    .aud-intro-visual-wrapper {
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        position: relative !important;
    }

    .aud-intro-img {
        height: 100% !important;
        width: 100% !important;
        min-height: 0 !important;
        object-fit: cover !important;
        border-radius: 24px !important;
    }

    .aud-intro-badge {
        bottom: 24px !important;
        left: 24px !important;
    }

    /* 2. Alternating Services Rows Image Alignment (Eliminate dead space under text) */
    .aud-alt-row {
        align-items: center !important;
    }

    .aud-alt-visual {
        position: relative !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        box-shadow: var(--aud-shadow-lg) !important;
        border: 6px solid var(--aud-white) !important;
        width: 100% !important;
    }

    .aud-alt-visual img {
        height: 440px !important;
        width: 100% !important;
        object-fit: cover !important;
        transition: var(--aud-transition) !important;
    }

    /* 3. Benefits Section Visual Wrapper Alignment */
    .aud-benefits-grid {
        align-items: stretch !important;
    }

    .aud-benefits-visual-wrapper {
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        position: relative !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        box-shadow: var(--aud-shadow-lg) !important;
        border: 4px solid var(--aud-white) !important;
    }

    .aud-benefits-visual-wrapper img {
        height: 100% !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        object-fit: cover !important;
    }

    /* Responsive alignment for tablet & mobile views */
    @media (max-width: 991px) {

        .aud-intro-grid,
        .aud-alt-row,
        .aud-benefits-grid {
            align-items: center !important;
        }

        .aud-intro-visual-wrapper {
            height: auto !important;
            min-height: 0 !important;
            display: block !important;
            position: relative !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow: hidden !important;
        }

        .aud-alt-visual img {
            height: 380px !important;
        }

        .aud-benefits-visual-wrapper img {
            height: 400px !important;
        }

        .aud-intro-img {
            height: 280px !important;
            width: 100% !important;
            max-width: 100% !important;
            display: block !important;
            object-fit: cover !important;
        }

        .aud-intro-badge {
            position: static !important;
            margin-top: 20px !important;
            display: inline-flex !important;
            padding: 14px 22px !important;
            border-radius: 14px !important;
        }
    }

    /* ==========================================================================
   MERGED FROM green-building.css
   ========================================================================== */

    /* ==========================================================================
   SUSTAINERGIC TECH - GREEN BUILDING & SUSTAINABILITY CERTIFICATIONS CSS
   ========================================================================== */

    :root {
        --gb-forest-dark: var(--text);
        --gb-forest: #111111;
        --gb-emerald: var(--accent-green);
        --gb-sage: var(--primary-color);
        --gb-sage-light: var(--primary-light);
        --gb-sage-ultra-light: var(--primary-light);
        --gb-gold: #c5a880;
        --gb-gold-hover: #b3946b;
        --gb-gold-light: #f7f4ee;
        --gb-teal: #0d9488;
        --gb-teal-light: #f0fdfa;
        --gb-white: var(--white);
        --gb-text-dark: var(--text);
        --gb-text-muted: #5c6f64;
        --gb-border: var(--border);
        --gb-border-light: var(--border);
        --gb-shadow: var(--shadow);
        --gb-shadow-sm: var(--shadow-sm);
        --gb-shadow-lg: var(--shadow-lg);
        --gb-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --gb-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ==========================================================================
   RESET & UTILITIES
   ========================================================================== */

    .gb-section {
        padding: 60px 0;
        position: relative;
        overflow: hidden;
    }

    .gb-section--light {
        background-color: var(--gb-sage-ultra-light);
    }

    .gb-section--grey {
        background-color: #f3f4f6;
    }

    .gb-section--dark {
        background-color: var(--gb-forest-dark);
        color: var(--gb-white);
    }

    .gb-container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
        width: 100%;
    }

    .gb-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 48px;
        align-items: stretch;
    }

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

    /* Typography & Labels */
    .gb-label {
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--gb-sage);
        margin-bottom: 12px;
        position: relative;
        padding-left: 20px;
    }

    .gb-label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 2px;
        background-color: var(--gb-sage);
    }

    .gb-label--gold {
        color: var(--gb-gold);
    }

    .gb-label--gold::before {
        background-color: var(--gb-gold);
    }

    .gb-title-main {
        font-size: 40px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--gb-text-dark);
        margin-bottom: 20px;
    }

    .gb-title-main span {
        color: var(--gb-sage);
    }

    .gb-section--dark .gb-title-main {
        color: var(--gb-white);
    }

    .gb-section--dark .gb-title-main span {
        color: var(--gb-gold);
    }

    .gb-text-lead {
        font-size: 17px;
        line-height: 1.7;
        color: var(--gb-text-muted);
        margin-bottom: 30px;
    }

    .gb-section--dark .gb-text-lead {
        color: #a7c5b4;
    }

    /* Buttons */
    .gb-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 28px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 12px;
        transition: var(--gb-transition);
        gap: 10px;
    }

    .gb-btn--primary {
        background-color: var(--gb-sage);
        color: var(--gb-white);
        box-shadow: 0 4px 14px rgba(240, 123, 94, 0.25);
    }

    .gb-btn--primary:hover {
        background-color: var(--gb-forest);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(17, 17, 17, 0.3);
        color: var(--gb-white);
    }

    .gb-btn--outline {
        border: 2px solid var(--gb-border);
        color: var(--gb-text-dark);
        background-color: transparent;
    }

    .gb-btn--outline:hover {
        border-color: var(--gb-sage);
        background-color: var(--gb-sage-light);
        color: var(--gb-sage);
        transform: translateY(-3px);
    }

    .gb-btn--white-outline {
        border: 2px solid rgba(255, 255, 255, 0.2);
        color: var(--gb-white);
    }

    .gb-btn--white-outline:hover {
        background-color: var(--gb-white);
        color: var(--gb-forest-dark);
        border-color: var(--gb-white);
        transform: translateY(-3px);
    }

    .gb-btn--gold {
        background-color: var(--gb-gold);
        color: var(--gb-forest-dark);
        box-shadow: 0 4px 14px rgba(197, 168, 128, 0.25);
    }

    .gb-btn--gold:hover {
        background-color: var(--gb-gold-hover);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(197, 168, 128, 0.4);
        color: var(--gb-forest-dark);
    }

    /* ==========================================================================
   1. HERO BANNER
   ========================================================================== */

    .gb-hero {
        position: relative;
        padding: 170px 0 70px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #f5a68c 100%);
        z-index: 1;
        overflow: hidden;
    }

    .gb-hero::after {
        content: '';
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
        top: -100px;
        right: -100px;
        z-index: -1;
    }

    .gb-hero-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 48px;
        align-items: center;
    }

    /* Breadcrumbs */
    .gb-breadcrumbs {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 24px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
    }

    .gb-breadcrumbs a {
        color: rgba(255, 255, 255, 0.85);
        transition: var(--gb-transition);
    }

    .gb-breadcrumbs a:hover {
        color: var(--gb-white);
    }

    .gb-breadcrumbs li.sep,
    .gb-breadcrumbs li.sep i {
        color: rgba(255, 255, 255, 0.5);
        font-size: 11px;
    }

    .gb-breadcrumbs li.active {
        color: var(--text);
        font-weight: 600;
    }

    .gb-hero-title {
        font-size: 52px;
        font-weight: 800;
        line-height: 1.15;
        color: var(--gb-white);
        margin-bottom: 20px;
    }

    .gb-hero-title span {
        color: var(--gb-white);
    }

    .gb-hero-subtitle {
        font-size: 18px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 36px;
    }

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

    .gb-hero .gb-btn--primary {
        background-color: var(--gb-white);
        color: var(--primary-color);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    }

    .gb-hero .gb-btn--primary:hover {
        background-color: #111111;
        color: var(--gb-white);
        box-shadow: 0 6px 20px rgba(17, 17, 17, 0.2);
    }

    .gb-hero .gb-btn--outline {
        border-color: rgba(255, 255, 255, 0.4);
        color: var(--gb-white);
    }

    .gb-hero .gb-btn--outline:hover {
        border-color: var(--gb-white);
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--gb-white);
    }

    /* Hero Visual & Cards */
    .gb-hero-visual {
        position: relative;
        display: flex;
        justify-content: center;
    }

    .gb-hero-img-wrapper {
        position: relative;
        border-radius: 30px;
        overflow: visible;
        box-shadow: var(--gb-shadow-lg);
        border: 8px solid var(--gb-white);
        transform: perspective(1000px) rotateY(-5deg);
        transition: var(--gb-transition);
    }

    .gb-hero-img-wrapper:hover {
        transform: perspective(1000px) rotateY(0deg) scale(1.02);
    }

    .gb-hero-img-wrapper img {
        width: 100%;
        max-height: 480px;
        object-fit: cover;
        border-radius: 22px;
        display: block;
    }

    /* Background floating elements */
    .gb-hero-floating-card {
        position: absolute;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.8);
        padding: 14px 18px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 5;
        animation: float 6s ease-in-out infinite;
        max-width: max-content;
    }

    .gb-hero-floating-card--one {
        top: 12%;
        left: -15px;
        animation-delay: 0s;
    }

    .gb-hero-floating-card--two {
        bottom: 10%;
        right: -15px;
        animation-delay: 3s;
    }

    .gb-hero-fc-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background-color: var(--gb-sage-light);
        color: var(--gb-sage);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .gb-hero-floating-card--two .gb-hero-fc-icon {
        background-color: var(--gb-gold-light);
        color: var(--gb-gold-hover);
    }

    .gb-hero-fc-text h5,
    .gb-hero-fc-text strong,
    .gb-hero-fc-text .fc-title {
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: var(--gb-text-dark);
        margin: 0 0 2px 0;
    }

    .gb-hero-fc-text p {
        font-size: 12px;
        color: var(--gb-text-muted);
        margin: 0;
    }

    /* Transition Bottom Wave */
    .gb-hero-wave-divider {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        transform: rotate(180deg);
    }

    .gb-hero-wave-divider svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 50px;
    }

    .gb-hero-wave-divider .shape-fill {
        fill: var(--gb-white);
    }

    /* Float Animation */
    @keyframes float {

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

        50% {
            transform: translateY(-10px);
        }
    }

    /* ==========================================================================
   2. INTRODUCTION SECTION
   ========================================================================== */

    .gb-intro-visual-wrapper {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .gb-intro-img {
        border-radius: 24px;
        box-shadow: var(--gb-shadow-lg);
        border: 4px solid var(--gb-white);
        width: 100%;
        height: 100%;
        min-height: 420px;
        object-fit: cover;
    }

    .gb-intro-badge {
        position: absolute;
        bottom: -20px;
        left: 40px;
        background-color: var(--gb-forest-dark);
        color: var(--gb-white);
        padding: 24px 30px;
        border-radius: 20px;
        box-shadow: var(--gb-shadow-lg);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .gb-intro-badge strong {
        font-size: 32px;
        font-weight: 800;
        color: var(--gb-gold);
        line-height: 1;
    }

    .gb-intro-badge span {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-top: 4px;
        color: var(--gb-sage-light);
    }

    .gb-intro-capabilities {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin: 32px 0;
    }

    .gb-cap-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .gb-cap-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background-color: var(--gb-sage-light);
        color: var(--gb-sage);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .gb-cap-text h3,
    .gb-cap-text h4 {
        font-size: 15px;
        font-weight: 600;
        color: var(--gb-text-dark);
        margin-bottom: 4px;
    }

    .gb-cap-text p {
        font-size: 13px;
        line-height: 1.5;
        color: var(--gb-text-muted);
    }

    .gb-trust-highlights {
        display: flex;
        align-items: center;
        gap: 30px;
        padding-top: 24px;
        border-top: 1px solid var(--gb-border-light);
    }

    .gb-trust-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--gb-text-dark);
    }

    .gb-trust-item i {
        color: var(--gb-sage);
        font-size: 16px;
    }

    /* ==========================================================================
   3. CERTIFICATION SERVICES SECTION
   ========================================================================== */

    .gb-section-header {
        text-align: center;
        max-width: 700px;
        margin: 0 auto 56px auto;
    }

    .gb-services-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .gb-service-card {
        background-color: var(--gb-white);
        border: 1px solid var(--gb-border-light);
        border-radius: 20px;
        padding: 36px;
        box-shadow: var(--gb-shadow-sm);
        transition: var(--gb-transition);
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .gb-service-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background-color: transparent;
        transition: var(--gb-transition);
        z-index: 2;
    }

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

    .gb-service-card:hover::before {
        background-color: var(--gb-sage);
    }

    .gb-card-icon-wrapper {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        background-color: var(--gb-sage-light);
        color: var(--gb-sage);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        margin-bottom: 24px;
        transition: var(--gb-transition);
    }

    .gb-service-card:hover .gb-card-icon-wrapper {
        background-color: var(--gb-sage);
        color: var(--gb-white);
        transform: scale(1.05) rotate(5deg);
    }

    .gb-card-logo-wrapper {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        background-color: var(--gb-white);
        border: 1px solid var(--gb-border-light);
        box-shadow: var(--gb-shadow-sm);
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        transition: var(--gb-transition);
        overflow: hidden;
    }

    .gb-card-logo-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .gb-service-card:hover .gb-card-logo-wrapper {
        transform: scale(1.08);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        border-color: var(--primary-color);
    }

    .gb-service-card h3 {
        font-size: 20px;
        font-weight: 700;
        color: var(--gb-text-dark);
        margin-bottom: 14px;
    }

    .gb-service-card p {
        font-size: 14.5px;
        line-height: 1.65;
        color: var(--gb-text-muted);
        margin-bottom: 24px;
        flex-grow: 1;
    }

    .gb-card-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--gb-sage);
        transition: var(--gb-transition);
    }

    .gb-card-link i {
        font-size: 12px;
        transition: var(--gb-transition);
    }

    .gb-service-card:hover .gb-card-link {
        color: var(--gb-forest);
    }

    .gb-service-card:hover .gb-card-link i {
        transform: translateX(4px);
    }

    /* ==========================================================================
   4. CERTIFICATION PROCESS
   ========================================================================== */

    .gb-process-timeline {
        position: relative;
        margin-top: 60px;
    }

    /* Timeline Horizontal Line */
    .gb-process-line {
        position: absolute;
        top: 40px;
        left: 10%;
        width: 80%;
        height: 2px;
        background-color: #E2E8F0;
        border-top: 2px dashed var(--primary-color);
        z-index: 1;
    }

    .gb-process-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
        position: relative;
        z-index: 2;
    }

    .gb-process-grid--4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        position: relative;
        z-index: 2;
    }

    .gb-process-grid--5 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        position: relative;
        z-index: 2;
    }

    .gb-process-grid--7 {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 16px;
        position: relative;
        z-index: 2;
    }

    .gb-process-step {
        text-align: center;
        position: relative;
    }

    .gb-process-num-wrapper {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: var(--gb-white);
        border: 3px solid var(--gb-border);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
        font-size: 24px;
        font-weight: 700;
        color: var(--gb-sage);
        transition: var(--gb-transition);
        position: relative;
        box-shadow: var(--gb-shadow-sm);
    }

    .gb-process-step:hover .gb-process-num-wrapper {
        background-color: var(--gb-sage);
        color: var(--gb-white);
        border-color: var(--gb-sage);
        transform: scale(1.05);
        box-shadow: 0 8px 24px rgba(240, 123, 94, 0.2);
    }

    .gb-process-step h4 {
        font-size: 15px;
        font-weight: 700;
        color: var(--gb-text-dark);
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .gb-process-step p {
        font-size: 13px;
        line-height: 1.5;
        color: var(--gb-text-muted);
    }

    /* ==========================================================================
   5. KEY BENEFITS SECTION
   ========================================================================== */

    .gb-benefits-list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
        margin-top: 24px;
    }

    .gb-benefit-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        background-color: var(--gb-white);
        border: 1px solid var(--gb-border-light);
        border-radius: 14px;
        box-shadow: var(--gb-shadow-sm);
        transition: var(--gb-transition);
    }

    .gb-benefit-item:hover {
        transform: translateX(6px);
        border-color: var(--gb-border);
        box-shadow: var(--gb-shadow);
    }

    .gb-benefit-check {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--gb-sage-light);
        color: var(--gb-sage);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: bold;
        flex-shrink: 0;
        transition: var(--gb-transition);
    }

    .gb-benefit-item:hover .gb-benefit-check {
        background-color: var(--gb-sage);
        color: var(--gb-white);
    }

    .gb-benefit-item span {
        font-size: 15px;
        font-weight: 600;
        color: var(--gb-text-dark);
    }

    /* Left building wrapper */
    .gb-benefits-visual-wrapper {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--gb-shadow-lg);
        border: 4px solid var(--gb-white);
    }

    .gb-benefits-visual-wrapper img {
        width: 100%;
        height: 560px;
        object-fit: cover;
    }

    /* ==========================================================================
   6. WHY CHOOSE SUSTAINERGIC TECH
   ========================================================================== */

    .gb-why-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 48px;
    }

    .gb-why-card {
        background: var(--gb-white);
        border: 1px solid var(--gb-border);
        border-radius: 18px;
        padding: 32px;
        transition: var(--gb-transition);
        box-shadow: var(--gb-shadow-sm);
    }

    .gb-why-card:hover {
        background: var(--gb-white);
        border-color: var(--gb-sage);
        transform: translateY(-5px);
        box-shadow: var(--gb-shadow);
    }

    .gb-why-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        background-color: rgba(197, 168, 128, 0.15);
        color: var(--gb-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin-bottom: 20px;
        transition: var(--gb-transition);
    }

    .gb-why-card:hover .gb-why-icon {
        background-color: var(--gb-gold);
        color: var(--gb-forest-dark);
    }

    .gb-why-card h4 {
        font-size: 17px;
        font-weight: 700;
        color: var(--gb-text-dark);
        margin-bottom: 10px;
    }

    .gb-why-card p {
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--gb-text-muted);
    }

    /* Trust indicators & Statistics band */
    .gb-stats-band {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 70px;
        padding-top: 50px;
        border-top: 1px solid var(--gb-border);
        text-align: center;
    }

    .gb-stat-item h3 {
        font-size: 42px;
        font-weight: 800;
        color: var(--gb-sage);
        line-height: 1.1;
        margin-bottom: 6px;
    }

    .gb-stat-item p {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--gb-text-muted);
    }

    /* ==========================================================================
   7. CALL TO ACTION SECTION
   ========================================================================== */

    .gb-cta-banner {
        position: relative;
        padding: 120px 0;
        background-image: url('../images/green-building-hero.png');
        background-size: cover;
        background-position: center;
        text-align: center;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: var(--gb-shadow-lg);
        margin: 50px auto;
        max-width: 1240px;
        width: calc(100% - 48px);
    }

    .gb-cta-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(43, 174, 102, 0.95) 0%, rgba(31, 41, 55, 0.9) 100%);
        z-index: 1;
    }

    .gb-cta-content {
        position: relative;
        z-index: 2;
        max-width: 780px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .gb-cta-content h2 {
        font-size: 42px;
        font-weight: 800;
        color: var(--gb-white);
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .gb-cta-content p {
        font-size: 17px;
        line-height: 1.65;
        color: #a7c5b4;
        margin-bottom: 36px;
    }

    .gb-cta-buttons {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    /* ==========================================================================
   8. RELATED SERVICES
   ========================================================================== */

    .gb-related-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .gb-related-card {
        background-color: var(--gb-white);
        border: 1px solid var(--gb-border-light);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--gb-shadow-sm);
        transition: var(--gb-transition);
        display: flex;
        flex-direction: column;
    }

    .gb-related-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--gb-shadow-lg);
        border-color: var(--gb-border);
    }

    .gb-related-img-box {
        position: relative;
        height: 200px;
        overflow: hidden;
    }

    .gb-related-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--gb-transition);
    }

    .gb-related-card:hover .gb-related-img-box img {
        transform: scale(1.08);
    }

    .gb-related-icon-box {
        position: absolute;
        bottom: 14px;
        right: 14px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background-color: #f07b5e;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-shadow: 0 4px 14px rgba(240, 123, 94, 0.4);
        z-index: 10;
    }

    .gb-related-body {
        padding: 24px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .gb-related-body h3 {
        font-size: 18px;
        font-weight: 700;
        color: var(--gb-text-dark);
        margin-bottom: 12px;
    }

    .gb-related-body p {
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--gb-text-muted);
        margin-bottom: 20px;
        flex-grow: 1;
    }

    .gb-related-link {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--gb-sage);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: var(--gb-transition);
    }

    .gb-related-link i {
        font-size: 11px;
        transition: var(--gb-transition);
    }

    .gb-related-card:hover .gb-related-link {
        color: var(--gb-forest);
    }

    .gb-related-card:hover .gb-related-link i {
        transform: translateX(4px);
    }

    /* Green Building Page Viewport Safety */
    .page-green-building {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    @media (max-width: 1200px) {
        .gb-hero-title {
            font-size: 46px;
        }

        .gb-cta-banner {
            max-width: 1000px;
        }

        .gb-process-grid--7 {
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
    }

    @media (max-width: 991px) {
        .gb-section {
            padding: 50px 0;
        }

        .gb-grid-2 {
            grid-template-columns: 1fr;
            gap: 40px;
            align-items: start;
        }

        .gb-intro-visual-wrapper {
            height: auto;
        }

        .gb-intro-img {
            height: 380px;
            min-height: auto;
        }

        .gb-hero-grid {
            grid-template-columns: 1fr;
            gap: 50px;
            text-align: center;
        }

        .gb-breadcrumbs {
            justify-content: center;
        }

        .gb-hero-actions {
            justify-content: center;
        }

        .gb-hero-floating-card--one {
            left: 0;
        }

        .gb-hero-floating-card--two {
            right: 0;
        }

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

        .gb-process-line {
            display: none;
        }

        .gb-process-grid,
        .gb-process-grid--4,
        .gb-process-grid--7 {
            grid-template-columns: 1fr !important;
            gap: 20px;
            max-width: 480px;
            margin: 0 auto;
        }

        .gb-process-step {
            display: flex;
            align-items: center;
            text-align: left;
            background-color: var(--gb-white);
            border: 1px solid var(--gb-border-light);
            border-radius: 16px;
            padding: 20px;
            box-shadow: var(--gb-shadow-sm);
        }

        .gb-process-num-wrapper {
            margin: 0 20px 0 0;
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            font-size: 18px;
        }

        .gb-process-step-content {
            flex-grow: 1;
        }

        .gb-process-step h3,
        .gb-process-step h4 {
            margin-bottom: 4px;
        }

        .gb-process-step p {
            margin-bottom: 0;
        }

        .gb-benefits-visual-wrapper img {
            height: 400px;
        }

        .gb-why-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .gb-stats-band {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .gb-cta-banner {
            padding: 80px 0;
            margin: 40px auto;
        }

        .gb-cta-content h2 {
            font-size: 32px;
        }

        .gb-related-grid {
            grid-template-columns: 1fr;
            max-width: 480px;
            margin: 0 auto;
        }

        .gb-hero-img-wrapper {
            transform: none !important;
        }

        .gb-intro-visual-wrapper {
            height: auto !important;
            display: block !important;
            position: relative !important;
            width: 100% !important;
        }

        .gb-intro-img {
            height: 280px !important;
            min-height: auto !important;
            width: 100% !important;
            max-width: 100% !important;
            object-fit: cover !important;
            object-position: left center !important;
            display: block !important;
            border-radius: 20px !important;
        }

        .gb-intro-badge {
            position: static !important;
            margin-top: 20px !important;
            display: inline-flex !important;
            padding: 16px 24px !important;
            border-radius: 14px !important;
            width: auto !important;
            max-width: 100% !important;
        }

        .gb-intro-badge strong {
            font-size: 22px !important;
        }
    }

    @media (max-width: 768px) {
        .gb-hero {
            padding: 140px 0 70px;
        }

        .gb-hero-title {
            font-size: 34px;
        }

        .gb-hero-subtitle {
            font-size: 15.5px;
        }

        .gb-title-main {
            font-size: 28px;
        }

        .gb-why-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 576px) {
        .gb-container {
            padding: 0 18px;
        }

        .gb-intro-capabilities {
            grid-template-columns: 1fr;
            gap: 18px;
        }

        .gb-trust-highlights {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .gb-hero-floating-card {
            display: none !important;
        }

        .gb-hero-actions {
            flex-direction: column;
            width: 100%;
            gap: 12px;
        }

        .gb-hero-actions .gb-btn {
            width: 100%;
        }

        .gb-cta-buttons {
            flex-direction: column;
            width: 100%;
            padding: 0 16px;
            gap: 12px;
        }

        .gb-cta-buttons .gb-btn {
            width: 100%;
        }

        .gb-service-card {
            padding: 24px 20px;
        }

        .gb-benefits-visual-wrapper img {
            height: 280px;
        }

        .gb-intro-img {
            height: 280px;
        }
    }

    @media (max-width: 480px) {
        .gb-container {
            padding: 0 16px;
        }

        .gb-hero {
            padding: 125px 0 50px;
        }

        .gb-hero-title {
            font-size: 27px;
            line-height: 1.25;
        }

        .gb-hero-subtitle {
            font-size: 14px;
            line-height: 1.55;
        }

        .gb-title-main {
            font-size: 24px;
            line-height: 1.3;
        }

        .gb-text-lead {
            font-size: 14.5px;
            line-height: 1.6;
        }

        .gb-hero-img-wrapper {
            border-width: 4px;
            border-radius: 20px;
        }

        .gb-hero-img-wrapper img {
            border-radius: 16px;
        }

        .gb-intro-img,
        .gb-benefits-visual-wrapper img {
            height: 230px;
            border-radius: 18px;
        }

        .gb-service-card {
            padding: 20px 16px;
            border-radius: 16px;
        }

        .gb-card-icon-wrapper,
        .gb-card-logo-wrapper {
            width: 52px;
            height: 52px;
            font-size: 22px;
            margin-bottom: 16px;
            border-radius: 12px;
        }

        .gb-service-card h3 {
            font-size: 18px;
            line-height: 1.35;
            margin-bottom: 10px;
        }

        .gb-service-card p {
            font-size: 13.5px;
            line-height: 1.6;
        }

        .gb-process-step {
            padding: 16px 14px;
            border-radius: 14px;
        }

        .gb-process-num-wrapper {
            width: 46px;
            height: 46px;
            font-size: 16px;
            margin: 0 14px 0 0;
            border-radius: 12px;
        }

        .gb-process-step h3,
        .gb-process-step h4 {
            font-size: 16px;
        }

        .gb-process-step p {
            font-size: 13px;
            line-height: 1.5;
        }

        .gb-why-card {
            padding: 20px 16px;
            border-radius: 14px;
        }

        .gb-why-card h3,
        .gb-why-card h4 {
            font-size: 17px;
        }

        .gb-why-card p {
            font-size: 13.5px;
        }

        .gb-stats-band {
            padding: 24px 16px;
            gap: 24px;
        }

        .gb-stat-item h3 {
            font-size: 30px;
        }

        .gb-stat-item p {
            font-size: 13px;
        }

        .gb-cta-banner {
            padding: 50px 18px;
            margin: 30px 10px;
            border-radius: 20px;
        }

        .gb-cta-content h2 {
            font-size: 22px;
            line-height: 1.3;
        }

        .gb-cta-content p {
            font-size: 14px;
        }
    }

    @media (max-width: 380px) {
        .gb-hero-title {
            font-size: 24px;
        }

        .gb-title-main {
            font-size: 22px;
        }

        .gb-intro-img,
        .gb-benefits-visual-wrapper img {
            height: 200px;
        }

        .gb-service-card {
            padding: 16px 14px;
        }

        .gb-btn {
            padding: 12px 20px;
            font-size: 14px;
        }
    }


    /* ==========================================================================
   MERGED FROM audits.css
   ========================================================================== */

    /* ==========================================================================
   SUSTAINERGIC TECH - ENERGY & WATER AUDITS SERVICES CSS
   ========================================================================== */

    :root {
        --aud-forest-dark: var(--text);
        /* Root Dark color */
        --aud-forest: #111111;
        --aud-emerald: var(--accent-green);
        /* Root green */
        --aud-sage: var(--primary-color);
        /* Root Coral */
        --aud-sage-light: var(--primary-light);
        --aud-sage-ultra-light: var(--primary-light);

        /* Energy Accents (Warm Amber/Yellow) */
        --aud-energy: #d97706;
        --aud-energy-light: #fef3c7;

        /* Water Accents (Cool Blue/Teal) */
        --aud-water: #0284c7;
        --aud-water-light: #e0f2fe;

        --aud-white: var(--white);
        --aud-text-dark: var(--text);
        --aud-text-muted: #5c6f64;
        --aud-border: var(--border);
        --aud-border-light: var(--border);
        --aud-shadow: var(--shadow);
        --aud-shadow-sm: var(--shadow-sm);
        --aud-shadow-lg: var(--shadow-lg);
        --aud-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --aud-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ==========================================================================
   RESET & UTILITIES
   ========================================================================== */

    .aud-section {
        padding: 60px 0;
        position: relative;
        overflow: hidden;
    }

    .aud-section--light {
        background-color: var(--aud-sage-ultra-light);
    }

    .aud-section--light-blue {
        background-color: var(--aud-water-light);
    }

    .aud-section--dark {
        background-color: var(--aud-forest-dark);
        color: var(--aud-white);
    }

    .aud-container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
        width: 100%;
    }

    .aud-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 48px;
        align-items: center;
    }

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

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

    /* Typography & Labels */
    .aud-label {
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--aud-sage);
        margin-bottom: 12px;
        position: relative;
        padding-left: 20px;
    }

    .aud-label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 2px;
        background-color: var(--aud-sage);
    }

    .aud-label--blue {
        color: var(--aud-water);
    }

    .aud-label--blue::before {
        background-color: var(--aud-water);
    }

    .aud-title-main {
        font-size: 40px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--aud-text-dark);
        margin-bottom: 20px;
    }

    .aud-title-main span {
        color: var(--aud-sage);
    }

    .aud-section--dark .aud-title-main {
        color: var(--aud-white);
    }

    .aud-text-lead {
        font-size: 17px;
        line-height: 1.7;
        color: var(--aud-text-muted);
        margin-bottom: 30px;
    }

    /* Buttons */
    .aud-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 28px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 12px;
        transition: var(--aud-transition);
        gap: 10px;
    }

    .aud-btn--primary {
        background-color: var(--aud-sage);
        color: var(--aud-white);
        box-shadow: 0 4px 14px rgba(240, 123, 94, 0.25);
    }

    .aud-btn--primary:hover {
        background-color: var(--aud-forest);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(17, 17, 17, 0.3);
        color: var(--aud-white);
    }

    .aud-btn--outline {
        border: 2px solid var(--aud-border);
        color: var(--aud-text-dark);
        background-color: transparent;
    }

    .aud-btn--outline:hover {
        border-color: var(--aud-emerald);
        background-color: var(--aud-sage-light);
        color: var(--aud-emerald);
        transform: translateY(-3px);
    }

    .aud-btn--white-outline {
        border: 2px solid rgba(255, 255, 255, 0.2);
        color: var(--aud-white);
    }

    .aud-btn--white-outline:hover {
        background-color: var(--aud-white);
        color: var(--aud-forest-dark);
        border-color: var(--aud-white);
        transform: translateY(-3px);
    }

    .aud-btn--energy {
        background-color: var(--aud-energy);
        color: var(--aud-white);
        box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
    }

    .aud-btn--energy:hover {
        background-color: #b45309;
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(180, 83, 9, 0.4);
        color: var(--aud-white);
    }

    .aud-btn--water {
        background-color: var(--aud-water);
        color: var(--aud-white);
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
    }

    .aud-btn--water:hover {
        background-color: #0369a1;
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(3, 105, 161, 0.4);
        color: var(--aud-white);
    }

    /* ==========================================================================
   1. HERO BANNER
   ========================================================================== */

    .aud-hero {
        position: relative;
        padding: 170px 0 70px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #f5a68c 100%);
        z-index: 1;
        overflow: hidden;
    }

    .aud-hero::after {
        content: '';
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
        top: -100px;
        right: -100px;
        z-index: -1;
    }

    .aud-hero-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 48px;
        align-items: center;
    }

    /* Breadcrumbs */
    .aud-breadcrumbs {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 24px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
    }

    .aud-breadcrumbs a {
        color: rgba(255, 255, 255, 0.85);
        transition: var(--aud-transition);
    }

    .aud-breadcrumbs a:hover {
        color: var(--aud-white);
    }

    .aud-breadcrumbs li.sep,
    .aud-breadcrumbs li.sep i {
        color: rgba(255, 255, 255, 0.5);
        font-size: 11px;
    }

    .aud-breadcrumbs li.active {
        color: var(--text);
        font-weight: 600;
    }

    .aud-hero-title {
        font-size: 52px;
        font-weight: 800;
        line-height: 1.15;
        color: var(--aud-white);
        margin-bottom: 20px;
    }

    .aud-hero-title span {
        color: var(--aud-white);
    }

    .aud-hero-subtitle {
        font-size: 18px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 36px;
    }

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

    .aud-hero .aud-btn--primary {
        background-color: var(--aud-white);
        color: var(--primary-color);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    }

    .aud-hero .aud-btn--primary:hover {
        background-color: #111111;
        color: var(--aud-white);
        box-shadow: 0 6px 20px rgba(17, 17, 17, 0.2);
    }

    .aud-hero .aud-btn--outline {
        border-color: rgba(255, 255, 255, 0.4);
        color: var(--aud-white);
    }

    .aud-hero .aud-btn--outline:hover {
        border-color: var(--aud-white);
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--aud-white);
    }

    /* Hero Visual & Cards */
    .aud-hero-visual {
        position: relative;
        display: flex;
        justify-content: center;
    }

    .aud-hero-img-wrapper {
        position: relative;
        border-radius: 30px;
        overflow: visible;
        box-shadow: var(--aud-shadow-lg);
        border: 8px solid var(--aud-white);
        transform: perspective(1000px) rotateY(-5deg);
        transition: var(--aud-transition);
    }

    .aud-hero-img-wrapper:hover {
        transform: perspective(1000px) rotateY(0deg) scale(1.02);
    }

    .aud-hero-img-wrapper img {
        width: 100%;
        max-height: 480px;
        object-fit: cover;
        border-radius: 22px;
        display: block;
    }

    /* Background floating elements */
    .aud-hero-floating-card {
        position: absolute;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.8);
        padding: 14px 18px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 5;
        animation: float 6s ease-in-out infinite;
        max-width: max-content;
    }

    .aud-hero-floating-card--one {
        top: 12%;
        left: -15px;
        animation-delay: 0s;
    }

    .aud-hero-floating-card--two {
        bottom: 10%;
        right: -15px;
        animation-delay: 3s;
    }

    .aud-hero-fc-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background-color: var(--aud-energy-light);
        color: var(--aud-energy);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .aud-hero-floating-card--two .aud-hero-fc-icon {
        background-color: var(--aud-water-light);
        color: var(--aud-water);
    }

    .aud-hero-fc-text h5,
    .aud-hero-fc-text strong,
    .aud-hero-fc-text .fc-title {
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: var(--aud-text-dark);
        margin: 0 0 2px 0;
    }

    .aud-hero-fc-text p {
        font-size: 12px;
        color: var(--aud-text-muted);
        margin: 0;
    }

    /* Float Animation */
    @keyframes float {

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

        50% {
            transform: translateY(-10px);
        }
    }

    /* ==========================================================================
   2. INTRODUCTION SECTION
   ========================================================================== */

    .aud-intro-visual-wrapper {
        position: relative;
    }

    .aud-intro-img {
        border-radius: 24px;
        box-shadow: var(--aud-shadow-lg);
        border: 4px solid var(--aud-white);
        width: 100%;
        object-fit: cover;
    }

    .aud-intro-badge {
        position: absolute;
        bottom: -20px;
        left: 40px;
        background-color: var(--aud-forest-dark);
        color: var(--aud-white);
        padding: 24px 30px;
        border-radius: 20px;
        box-shadow: var(--aud-shadow-lg);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .aud-intro-badge strong {
        font-size: 28px;
        font-weight: 800;
        color: var(--aud-emerald);
        line-height: 1;
    }

    .aud-intro-badge span {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-top: 4px;
        color: var(--aud-white);
    }

    .aud-intro-capabilities {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin: 32px 0;
    }

    .aud-cap-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .aud-cap-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background-color: var(--aud-sage-light);
        color: var(--aud-sage);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .aud-cap-text h3,
    .aud-cap-text h4 {
        font-size: 15px;
        font-weight: 600;
        color: var(--aud-text-dark);
        margin-bottom: 4px;
    }

    .aud-cap-text p {
        font-size: 13px;
        line-height: 1.5;
        color: var(--aud-text-muted);
    }

    .aud-trust-highlights {
        display: flex;
        align-items: center;
        gap: 30px;
        padding-top: 24px;
        border-top: 1px solid var(--aud-border-light);
    }

    .aud-trust-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--aud-text-dark);
    }

    .aud-trust-item i {
        color: var(--aud-emerald);
        font-size: 16px;
    }

    /* ==========================================================================
   3. AUDIT SERVICES SECTION
   ========================================================================== */

    .aud-section-header {
        text-align: center;
        max-width: 700px;
        margin: 0 auto 56px auto;
    }

    .aud-alternating-services {
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

    .aud-alt-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 60px;
        align-items: center;
    }

    .aud-alt-row:nth-child(even) .aud-alt-visual {
        order: 2;
    }

    .aud-alt-row:nth-child(even) .aud-alt-content {
        order: 1;
    }

    .aud-alt-visual {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--aud-shadow-lg);
        border: 6px solid var(--aud-white);
    }

    .aud-alt-visual img {
        width: 100%;
        height: 380px;
        object-fit: cover;
        transition: var(--aud-transition);
    }

    .aud-alt-row:hover .aud-alt-visual img {
        transform: scale(1.03);
    }

    .aud-alt-content-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
    }

    .aud-alt-icon-box {
        width: 54px;
        height: 54px;
        border-radius: 12px;
        background-color: var(--aud-energy-light);
        color: var(--aud-energy);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    .aud-alt-row:nth-child(2n) .aud-alt-icon-box {
        background-color: var(--aud-water-light);
        color: var(--aud-water);
    }

    .aud-alt-content h3 {
        font-size: 26px;
        font-weight: 700;
        color: var(--aud-text-dark);
    }

    .aud-alt-content p {
        font-size: 15px;
        line-height: 1.65;
        color: var(--aud-text-muted);
        margin-bottom: 24px;
    }

    /* Key Assessment & Expected outcomes columns */
    .aud-results-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-bottom: 28px;
        padding-top: 10px;
    }

    .aud-results-col h4 {
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--aud-text-dark);
        margin-bottom: 12px;
    }

    .aud-results-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .aud-results-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13.5px;
        color: var(--aud-text-dark);
    }

    .aud-results-item i {
        color: var(--aud-energy);
        font-size: 12px;
    }

    .aud-alt-row:nth-child(2n) .aud-results-item i {
        color: var(--aud-water);
    }

    /* ==========================================================================
   4. COMBINED RESOURCE ANALYSIS
   ========================================================================== */

    .aud-comparison-grid {
        display: grid;
        grid-template-columns: 1fr 120px 1fr;
        gap: 20px;
        align-items: center;
        margin-top: 48px;
    }

    .aud-comp-card {
        background-color: var(--aud-white);
        border: 1px solid var(--aud-border-light);
        border-radius: 20px;
        padding: 40px;
        box-shadow: var(--aud-shadow-sm);
        transition: var(--aud-transition);
    }

    .aud-comp-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--aud-shadow);
    }

    .aud-comp-card--energy {
        border-top: 5px solid var(--aud-energy);
    }

    .aud-comp-card--water {
        border-top: 5px solid var(--aud-water);
    }

    .aud-comp-card-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
    }

    .aud-comp-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    .aud-comp-card--energy .aud-comp-icon {
        background-color: var(--aud-energy-light);
        color: var(--aud-energy);
    }

    .aud-comp-card--water .aud-comp-icon {
        background-color: var(--aud-water-light);
        color: var(--aud-water);
    }

    .aud-comp-card h3 {
        font-size: 22px;
        font-weight: 700;
        color: var(--aud-text-dark);
    }

    .aud-comp-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .aud-comp-item {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14.5px;
        color: var(--aud-text-dark);
    }

    .aud-comp-item i {
        font-size: 14px;
    }

    .aud-comp-card--energy .aud-comp-item i {
        color: var(--aud-energy);
    }

    .aud-comp-card--water .aud-comp-item i {
        color: var(--aud-water);
    }

    /* Central Building visual divider */
    .aud-comp-divider {
        text-align: center;
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .aud-comp-divider-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: var(--aud-white);
        border: 2px solid var(--aud-border);
        box-shadow: var(--aud-shadow);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: var(--aud-emerald);
        position: relative;
        z-index: 2;
    }

    .aud-comp-divider::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 100%;
        background-color: var(--aud-border);
        z-index: 1;
    }

    /* ==========================================================================
   5. AUDIT PROCESS
   ========================================================================== */

    .aud-process-timeline {
        position: relative;
        margin-top: 60px;
    }

    .aud-process-line {
        position: absolute;
        top: 40px;
        left: 8%;
        width: 84%;
        height: 2px;
        background-color: var(--aud-border);
        z-index: 1;
    }

    .aud-process-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
        position: relative;
        z-index: 2;
    }

    .aud-process-grid--7 {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 16px;
        position: relative;
        z-index: 2;
    }

    .aud-process-step {
        text-align: center;
        position: relative;
    }

    .aud-process-num-wrapper {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: var(--aud-white);
        border: 3px solid var(--aud-border);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
        font-size: 24px;
        font-weight: 700;
        color: var(--aud-sage);
        transition: var(--aud-transition);
        position: relative;
        box-shadow: var(--aud-shadow-sm);
    }

    .aud-process-step:hover .aud-process-num-wrapper {
        background-color: var(--aud-sage);
        color: var(--aud-white);
        border-color: var(--aud-sage);
        transform: scale(1.05);
        box-shadow: 0 8px 24px rgba(240, 123, 94, 0.2);
    }

    .aud-process-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .aud-process-step h3,
    .aud-process-step h4 {
        font-size: 15px;
        font-weight: 700;
        color: var(--aud-text-dark);
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .aud-process-step p {
        font-size: 13px;
        line-height: 1.5;
        color: var(--aud-text-muted);
    }

    /* ==========================================================================
   6. AREAS WE ASSESS GRID
   ========================================================================== */

    .aud-assess-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    .aud-assess-card {
        background-color: var(--aud-white);
        border: 1px solid var(--aud-border-light);
        border-radius: 16px;
        padding: 24px;
        text-align: center;
        box-shadow: var(--aud-shadow-sm);
        transition: var(--aud-transition);
    }

    .aud-assess-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--aud-shadow);
    }

    .aud-assess-card--energy:hover {
        border-color: var(--aud-energy);
    }

    .aud-assess-card--water:hover {
        border-color: var(--aud-water);
    }

    .aud-assess-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        margin: 0 auto 16px auto;
        transition: var(--aud-transition);
    }

    .aud-assess-card--energy .aud-assess-icon {
        background-color: var(--aud-energy-light);
        color: var(--aud-energy);
    }

    .aud-assess-card--water .aud-assess-icon {
        background-color: var(--aud-water-light);
        color: var(--aud-water);
    }

    .aud-assess-card--energy:hover .aud-assess-icon {
        background-color: var(--aud-energy);
        color: var(--aud-white);
    }

    .aud-assess-card--water:hover .aud-assess-icon {
        background-color: var(--aud-water);
        color: var(--aud-white);
    }

    .aud-assess-card h3,
    .aud-assess-card h4 {
        font-size: 15px;
        font-weight: 700;
        color: var(--aud-text-dark);
        margin: 0;
    }

    /* ==========================================================================
   7. FACILITIES WE SUPPORT
   ========================================================================== */

    .aud-fac-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    .aud-fac-card {
        background-color: var(--aud-white);
        border: 1px solid var(--aud-border-light);
        border-radius: 16px;
        padding: 24px;
        text-align: center;
        box-shadow: var(--aud-shadow-sm);
        transition: var(--aud-transition);
    }

    .aud-fac-card:hover {
        transform: translateY(-5px);
        border-color: var(--aud-emerald);
        box-shadow: var(--aud-shadow);
    }

    .aud-fac-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        background-color: var(--aud-sage-light);
        color: var(--aud-sage);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        margin: 0 auto 16px auto;
        transition: var(--aud-transition);
    }

    .aud-fac-card:hover .aud-fac-icon {
        background-color: var(--aud-sage);
        color: var(--aud-white);
    }

    .aud-fac-card h3,
    .aud-fac-card h4 {
        font-size: 15.5px;
        font-weight: 700;
        color: var(--aud-text-dark);
        margin: 0;
    }

    /* ==========================================================================
   8. KEY BENEFITS SECTION
   ========================================================================== */

    .aud-benefits-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 24px;
    }

    .aud-benefit-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        background-color: var(--aud-white);
        border: 1px solid var(--aud-border-light);
        border-radius: 12px;
        box-shadow: var(--aud-shadow-sm);
        transition: var(--aud-transition);
    }

    .aud-benefit-item:hover {
        transform: translateX(6px);
        border-color: var(--aud-border);
        box-shadow: var(--aud-shadow);
    }

    .aud-benefit-check {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--aud-sage-light);
        color: var(--aud-sage);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: bold;
        flex-shrink: 0;
        transition: var(--aud-transition);
    }

    .aud-benefit-item:hover .aud-benefit-check {
        background-color: var(--aud-emerald);
        color: var(--aud-white);
    }

    .aud-benefit-item span {
        font-size: 14px;
        font-weight: 600;
        color: var(--aud-text-dark);
    }

    .aud-benefits-visual-wrapper {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--aud-shadow-lg);
        border: 4px solid var(--aud-white);
    }

    .aud-benefits-visual-wrapper img {
        width: 100%;
        height: 520px;
        object-fit: cover;
    }

    /* ==========================================================================
   9. WHY CHOOSE SUSTAINERGIC TECH
   ========================================================================== */

    .aud-why-choose-section {
        background-color: var(--aud-white);
    }

    .aud-why-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 48px;
    }

    .aud-why-card {
        background: var(--aud-white);
        border: 1px solid var(--aud-border);
        border-radius: 18px;
        padding: 32px;
        transition: var(--aud-transition);
        box-shadow: var(--aud-shadow-sm);
    }

    .aud-why-card:hover {
        background: var(--aud-white);
        border-color: var(--aud-emerald);
        transform: translateY(-5px);
        box-shadow: var(--aud-shadow);
    }

    .aud-why-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        background-color: var(--aud-sage-light);
        color: var(--aud-sage);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin-bottom: 20px;
        transition: var(--aud-transition);
    }

    .aud-why-card:hover .aud-why-icon {
        background-color: var(--aud-emerald);
        color: var(--aud-white);
    }

    .aud-why-card h3,
    .aud-why-card h4 {
        font-size: 17px;
        font-weight: 700;
        color: var(--aud-text-dark);
        margin-bottom: 10px;
    }

    .aud-why-card p {
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--aud-text-muted);
    }

    /* ==========================================================================
   10. CALL TO ACTION SECTION
   ========================================================================== */

    .aud-cta-banner {
        position: relative;
        padding: 120px 0;
        background-image: url('../images/audits-hero.png');
        background-size: cover;
        background-position: center;
        text-align: center;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: var(--aud-shadow-lg);
        margin: 50px auto;
        max-width: 1240px;
        width: calc(100% - 48px);
    }

    .aud-cta-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(43, 174, 102, 0.95) 0%, rgba(31, 41, 55, 0.9) 100%);
        z-index: 1;
    }

    .aud-cta-content {
        position: relative;
        z-index: 2;
        max-width: 780px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .aud-cta-content h2 {
        font-size: 42px;
        font-weight: 800;
        color: var(--aud-white);
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .aud-cta-content p {
        font-size: 17px;
        line-height: 1.65;
        color: #a7c5b4;
        margin-bottom: 36px;
    }

    .aud-cta-buttons {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    /* ==========================================================================
   11. RELATED SERVICES
   ========================================================================== */

    .aud-related-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .aud-related-card {
        background-color: var(--aud-white);
        border: 1px solid var(--aud-border-light);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--aud-shadow-sm);
        transition: var(--aud-transition);
        display: flex;
        flex-direction: column;
    }

    .aud-related-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--aud-shadow-lg);
        border-color: var(--aud-emerald);
    }

    .aud-related-img-box {
        position: relative;
        height: 200px;
        overflow: hidden;
    }

    .aud-related-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--aud-transition);
    }

    .aud-related-card:hover .aud-related-img-box img {
        transform: scale(1.08);
    }

    .aud-related-icon-box {
        position: absolute;
        bottom: 14px;
        right: 14px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background-color: #f07b5e;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-shadow: 0 4px 14px rgba(240, 123, 94, 0.4);
        z-index: 10;
    }

    .aud-related-body {
        padding: 24px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .aud-related-body h3 {
        font-size: 18px;
        font-weight: 700;
        color: var(--aud-text-dark);
        margin-bottom: 12px;
    }

    .aud-related-body p {
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--aud-text-muted);
        margin-bottom: 20px;
        flex-grow: 1;
    }

    .aud-related-link {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--aud-sage);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: var(--aud-transition);
    }

    .aud-related-link i {
        font-size: 11px;
        transition: var(--aud-transition);
    }

    .aud-related-card:hover .aud-related-link {
        color: var(--aud-sage);
    }

    .aud-related-card:hover .aud-related-link i {
        transform: translateX(4px);
    }

    /* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */

    @media (max-width: 1200px) {
        .aud-hero-title {
            font-size: 46px;
        }

        .aud-cta-banner {
            max-width: 1000px;
        }

        .aud-process-grid--7 {
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
    }

    @media (max-width: 991px) {
        .aud-section {
            padding: 50px 0;
        }

        .aud-grid-2 {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .aud-hero-grid {
            grid-template-columns: 1fr;
            gap: 50px;
            text-align: center;
        }

        .aud-breadcrumbs {
            justify-content: center;
        }

        .aud-hero-actions {
            justify-content: center;
        }

        .aud-hero-floating-card--one {
            left: 0;
        }

        .aud-hero-floating-card--two {
            right: 0;
        }

        .aud-alternating-services {
            gap: 60px;
        }

        .aud-alt-row {
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .aud-alt-row:nth-child(even) .aud-alt-visual {
            order: 0;
        }

        .aud-alt-row:nth-child(even) .aud-alt-content {
            order: 0;
        }

        .aud-comparison-grid {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .aud-comp-divider {
            height: 60px;
        }

        .aud-comp-divider::before {
            width: 100%;
            height: 2px;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }

        .aud-process-line {
            display: none;
        }

        .aud-process-grid,
        .aud-process-grid--7 {
            grid-template-columns: 1fr !important;
            gap: 30px;
            max-width: 480px;
            margin: 0 auto;
        }

        .aud-process-step {
            display: flex;
            align-items: flex-start;
            text-align: left;
            background-color: var(--aud-white);
            border: 1px solid var(--aud-border-light);
            border-radius: 16px;
            padding: 20px;
            box-shadow: var(--aud-shadow-sm);
        }

        .aud-process-num-wrapper {
            margin: 0 20px 0 0;
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            font-size: 18px;
        }

        .aud-process-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex: 1;
            min-width: 0;
        }

        .aud-assess-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .aud-fac-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .aud-benefits-visual-wrapper img {
            height: 400px;
        }

        .aud-why-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .aud-cta-banner {
            padding: 80px 0;
            margin: 40px auto;
        }

        .aud-cta-content h2 {
            font-size: 32px;
        }

        .aud-related-grid {
            grid-template-columns: 1fr;
            max-width: 480px;
            margin: 0 auto;
        }
    }

    @media (max-width: 768px) {
        .aud-hero {
            padding: 150px 0 80px;
        }

        .aud-hero-title {
            font-size: 36px;
        }

        .aud-hero-subtitle {
            font-size: 16px;
        }

        .aud-title-main {
            font-size: 32px;
        }

        .aud-why-grid {
            grid-template-columns: 1fr;
        }

        .aud-intro-badge {
            position: static;
            margin-top: 24px;
            padding: 16px 20px;
            border-radius: 12px;
        }

        .aud-benefits-list {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 576px) {
        .aud-intro-capabilities {
            grid-template-columns: 1fr;
            gap: 18px;
        }

        .aud-trust-highlights {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .aud-hero-floating-card {
            display: none;
        }

        .aud-hero-actions {
            flex-direction: column;
            width: 100%;
        }

        .aud-hero-actions .aud-btn {
            width: 100%;
        }

        .aud-cta-buttons {
            flex-direction: column;
            width: 100%;
            padding: 0 16px;
        }

        .aud-cta-buttons .aud-btn {
            width: 100%;
        }

        .aud-why-card {
            padding: 24px;
        }

        .aud-assess-grid {
            grid-template-columns: 1fr;
        }

        .aud-fac-grid {
            grid-template-columns: 1fr;
        }

        .aud-results-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }
    }

    @media (max-width: 480px) {
        .aud-hero {
            padding: 130px 0 60px;
        }

        .aud-hero-title {
            font-size: 28px;
            line-height: 1.25;
        }

        .aud-title-main {
            font-size: 24px;
        }

        .aud-alt-content-header h3 {
            font-size: 20px;
        }

        .aud-alt-visual img {
            border-radius: 16px;
        }

        .aud-alt-content {
            padding: 0;
        }

        .aud-btn {
            width: 100%;
            text-align: center;
            justify-content: center;
        }
    }


    /* ==========================================================================
   MERGED FROM simulation-modeling.css
   ========================================================================== */

    /* ==========================================================================
   SUSTAINERGIC TECH - SIMULATION & MODELING SERVICES CSS
   ========================================================================== */

    :root {
        --sm-forest-dark: var(--text);
        --sm-forest: #111111;
        --sm-emerald: var(--accent-green);
        --sm-sage: var(--primary-color);
        --sm-sage-light: var(--primary-light);
        --sm-sage-ultra-light: var(--primary-light);
        --sm-gold: var(--primary-color);
        /* Root Accent Coral */
        --sm-gold-hover: #d85d3f;
        /* Darker Coral */
        --sm-gold-light: var(--primary-light);
        /* Root Light Coral */
        --sm-teal: #06b6d4;
        /* Cyan */
        --sm-teal-light: #ecfeff;
        /* Light Cyan Background */
        --sm-blue: #3b82f6;
        /* Soft Blue */
        --sm-blue-light: #eff6ff;
        /* Light Blue Background */
        --sm-white: var(--white);
        --sm-text-dark: var(--text);
        --sm-text-muted: #5c6f64;
        --sm-border: var(--border);
        --sm-border-light: var(--border);
        --sm-shadow: var(--shadow);
        --sm-shadow-sm: var(--shadow-sm);
        --sm-shadow-lg: var(--shadow-lg);
        --sm-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --sm-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ==========================================================================
   RESET & UTILITIES
   ========================================================================== */

    .sm-section {
        padding: 60px 0;
        position: relative;
        overflow: hidden;
    }

    .sm-section--light {
        background-color: var(--sm-sage-ultra-light);
    }

    .sm-section--light-blue {
        background-color: var(--sm-sage-ultra-light);
    }

    .sm-section--dark {
        background-color: var(--sm-forest-dark);
        color: var(--sm-white);
    }

    .sm-container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
        width: 100%;
    }

    .sm-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 48px;
        align-items: center;
    }

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

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

    /* Typography & Labels */
    .sm-label {
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--sm-gold);
        margin-bottom: 12px;
        position: relative;
        padding-left: 20px;
    }

    .sm-label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 2px;
        background-color: var(--sm-gold);
    }

    .sm-label--blue {
        color: var(--sm-blue);
    }

    .sm-label--blue::before {
        background-color: var(--sm-blue);
    }

    .sm-title-main {
        font-size: 40px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--sm-text-dark);
        margin-bottom: 20px;
    }

    .sm-title-main span {
        color: var(--sm-gold);
    }

    .sm-section--dark .sm-title-main {
        color: var(--sm-white);
    }

    .sm-section--dark .sm-title-main span {
        color: var(--sm-teal);
    }

    .sm-text-lead {
        font-size: 17px;
        line-height: 1.7;
        color: var(--sm-text-muted);
        margin-bottom: 30px;
    }

    .sm-section--dark .sm-text-lead {
        color: #a7c5b4;
    }

    /* Buttons */
    .sm-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 28px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 12px;
        transition: var(--sm-transition);
        gap: 10px;
    }

    .sm-btn--primary {
        background-color: var(--sm-sage);
        color: var(--sm-white);
        box-shadow: 0 4px 14px rgba(240, 123, 94, 0.25);
    }

    .sm-btn--primary:hover {
        background-color: var(--sm-forest);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(17, 17, 17, 0.3);
        color: var(--sm-white);
    }

    .sm-btn--outline {
        border: 2px solid var(--sm-border);
        color: var(--sm-text-dark);
        background-color: transparent;
    }

    .sm-btn--outline:hover {
        border-color: var(--sm-gold);
        background-color: var(--sm-gold-light);
        color: var(--sm-gold);
        transform: translateY(-3px);
    }

    .sm-btn--white-outline {
        border: 2px solid rgba(255, 255, 255, 0.2);
        color: var(--sm-white);
    }

    .sm-btn--white-outline:hover {
        background-color: var(--sm-white);
        color: var(--sm-forest-dark);
        border-color: var(--sm-white);
        transform: translateY(-3px);
    }

    .sm-btn--gold {
        background-color: var(--sm-gold);
        color: var(--sm-white);
        box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25);
    }

    .sm-btn--gold:hover {
        background-color: var(--sm-gold-hover);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(15, 118, 110, 0.4);
        color: var(--sm-white);
    }

    /* ==========================================================================
   1. HERO BANNER
   ========================================================================== */

    .sm-hero {
        position: relative;
        padding: 170px 0 70px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #f5a68c 100%);
        z-index: 1;
        overflow: hidden;
    }

    .sm-hero::after {
        content: '';
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
        top: -100px;
        right: -100px;
        z-index: -1;
    }

    .sm-hero-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 48px;
        align-items: center;
    }

    /* Breadcrumbs */
    .sm-breadcrumbs {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 24px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
    }

    .sm-breadcrumbs a {
        color: rgba(255, 255, 255, 0.85);
        transition: var(--sm-transition);
    }

    .sm-breadcrumbs a:hover {
        color: var(--sm-white);
    }

    .sm-breadcrumbs li.sep,
    .sm-breadcrumbs li.sep i {
        color: rgba(255, 255, 255, 0.5);
        font-size: 11px;
    }

    .sm-breadcrumbs li.active {
        color: var(--text);
        font-weight: 600;
    }

    .sm-hero-title {
        font-size: 52px;
        font-weight: 800;
        line-height: 1.15;
        color: var(--sm-white);
        margin-bottom: 20px;
    }

    .sm-hero-title span {
        color: var(--sm-white);
    }

    .sm-hero-subtitle {
        font-size: 18px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 36px;
    }

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

    .sm-hero .sm-btn--primary {
        background-color: var(--sm-white);
        color: var(--primary-color);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    }

    .sm-hero .sm-btn--primary:hover {
        background-color: #111111;
        color: var(--sm-white);
        box-shadow: 0 6px 20px rgba(17, 17, 17, 0.2);
    }

    .sm-hero .sm-btn--outline {
        border-color: rgba(255, 255, 255, 0.4);
        color: var(--sm-white);
    }

    .sm-hero .sm-btn--outline:hover {
        border-color: var(--sm-white);
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--sm-white);
    }

    /* Hero Visual & Cards */
    .sm-hero-visual {
        position: relative;
        display: flex;
        justify-content: center;
    }

    .sm-hero-img-wrapper {
        position: relative;
        border-radius: 30px;
        overflow: visible;
        box-shadow: var(--sm-shadow-lg);
        border: 8px solid var(--sm-white);
        transform: perspective(1000px) rotateY(-5deg);
        transition: var(--sm-transition);
    }

    .sm-hero-img-wrapper:hover {
        transform: perspective(1000px) rotateY(0deg) scale(1.02);
    }

    .sm-hero-img-wrapper img {
        width: 100%;
        max-height: 480px;
        object-fit: cover;
        border-radius: 22px;
        display: block;
    }

    /* Background floating elements */
    .sm-hero-floating-card {
        position: absolute;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.8);
        padding: 14px 18px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 5;
        animation: float 6s ease-in-out infinite;
        max-width: max-content;
    }

    .sm-hero-floating-card--one {
        top: 12%;
        left: -15px;
        animation-delay: 0s;
    }

    .sm-hero-floating-card--two {
        bottom: 10%;
        right: -15px;
        animation-delay: 3s;
    }

    .sm-hero-fc-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background-color: var(--sm-gold-light);
        color: var(--sm-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .sm-hero-floating-card--two .sm-hero-fc-icon {
        background-color: var(--sm-blue-light);
        color: var(--sm-blue);
    }

    .sm-hero-fc-text h5,
    .sm-hero-fc-text strong,
    .sm-hero-fc-text .fc-title {
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: var(--sm-text-dark);
        margin: 0 0 2px 0;
    }

    .sm-hero-fc-text p {
        font-size: 12px;
        color: var(--sm-text-muted);
        margin: 0;
    }

    /* Float Animation */
    @keyframes float {

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

        50% {
            transform: translateY(-10px);
        }
    }

    /* ==========================================================================
   2. INTRODUCTION SECTION
   ========================================================================== */

    .sm-intro-visual-wrapper {
        position: relative;
    }

    .sm-intro-img {
        border-radius: 24px;
        box-shadow: var(--sm-shadow-lg);
        border: 4px solid var(--sm-white);
        width: 100%;
        object-fit: cover;
    }

    .sm-intro-badge {
        position: absolute;
        bottom: -20px;
        left: 40px;
        background-color: var(--sm-forest-dark);
        color: var(--sm-white);
        padding: 24px 30px;
        border-radius: 20px;
        box-shadow: var(--sm-shadow-lg);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sm-intro-badge strong {
        font-size: 28px;
        font-weight: 800;
        color: var(--sm-teal);
        line-height: 1;
    }

    .sm-intro-badge span {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-top: 4px;
        color: var(--sm-white);
    }

    .sm-intro-capabilities {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin: 32px 0;
    }

    .sm-cap-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .sm-cap-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background-color: var(--sm-gold-light);
        color: var(--sm-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .sm-cap-text h3,
    .sm-cap-text h4 {
        font-size: 15px;
        font-weight: 600;
        color: var(--sm-text-dark);
        margin-bottom: 4px;
    }

    .sm-cap-text p {
        font-size: 13px;
        line-height: 1.5;
        color: var(--sm-text-muted);
    }

    .sm-trust-highlights {
        display: flex;
        align-items: center;
        gap: 30px;
        padding-top: 24px;
        border-top: 1px solid var(--sm-border-light);
    }

    .sm-trust-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--sm-text-dark);
    }

    .sm-trust-item i {
        color: var(--sm-gold);
        font-size: 16px;
    }

    /* ==========================================================================
   3. EXPERTISE Alternating Content Sections
   ========================================================================== */

    .sm-section-header {
        text-align: center;
        max-width: 700px;
        margin: 0 auto 56px auto;
    }

    .sm-alternating-services {
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

    .sm-alt-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 60px;
        align-items: center;
    }

    .sm-alt-row:nth-child(even) .sm-alt-visual {
        order: 2;
    }

    .sm-alt-row:nth-child(even) .sm-alt-content {
        order: 1;
    }

    .sm-alt-visual {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--sm-shadow-lg);
        border: 6px solid var(--sm-white);
    }

    .sm-alt-visual img {
        width: 100%;
        height: 380px;
        object-fit: cover;
        transition: var(--sm-transition);
    }

    .sm-alt-row:hover .sm-alt-visual img {
        transform: scale(1.03);
    }

    .sm-alt-content-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
    }

    .sm-alt-icon-box {
        width: 54px;
        height: 54px;
        border-radius: 12px;
        background-color: var(--sm-gold-light);
        color: var(--sm-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    .sm-alt-row:nth-child(2n) .sm-alt-icon-box {
        background-color: var(--sm-blue-light);
        color: var(--sm-blue);
    }

    .sm-alt-content h3 {
        font-size: 26px;
        font-weight: 700;
        color: var(--sm-text-dark);
    }

    .sm-alt-content p {
        font-size: 15px;
        line-height: 1.65;
        color: var(--sm-text-muted);
        margin-bottom: 24px;
    }

    /* Key Analysis list */
    .sm-alt-analysis-title {
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--sm-text-dark);
        margin-bottom: 12px;
    }

    .sm-alt-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 28px;
    }

    .sm-alt-list-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: var(--sm-text-dark);
    }

    .sm-alt-list-item i {
        color: var(--sm-gold);
        font-size: 13px;
    }

    .sm-alt-row:nth-child(2n) .sm-alt-list-item i {
        color: var(--sm-blue);
    }

    /* CFD Visual Split Indicator */
    .sm-cfd-split {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px dashed var(--sm-border);
    }

    .sm-cfd-box h4,
    .sm-cfd-box h5 {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--sm-text-dark);
        margin-bottom: 4px;
    }

    .sm-cfd-box p {
        font-size: 12.5px;
        line-height: 1.4;
        color: var(--sm-text-muted);
        margin: 0;
    }

    /* ==========================================================================
   4. SIMULATION WORKFLOW
   ========================================================================== */

    .sm-process-timeline {
        position: relative;
        margin-top: 60px;
    }

    .sm-process-line {
        position: absolute;
        top: 40px;
        left: 8%;
        width: 84%;
        height: 2px;
        background-color: var(--sm-border);
        z-index: 1;
    }

    .sm-process-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
        position: relative;
        z-index: 2;
    }

    .sm-process-step {
        text-align: center;
        position: relative;
    }

    .sm-process-num-wrapper {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: var(--sm-white);
        border: 3px solid var(--sm-border);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
        font-size: 24px;
        font-weight: 700;
        color: var(--sm-gold);
        transition: var(--sm-transition);
        position: relative;
        box-shadow: var(--sm-shadow-sm);
    }

    .sm-process-step:hover .sm-process-num-wrapper {
        background-color: var(--sm-gold);
        color: var(--sm-white);
        border-color: var(--sm-gold);
        transform: scale(1.05);
        box-shadow: 0 8px 24px rgba(13, 148, 136, 0.2);
    }

    .sm-process-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sm-process-step h3,
    .sm-process-step h4 {
        font-size: 15px;
        font-weight: 700;
        color: var(--sm-text-dark);
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .sm-process-step p {
        font-size: 13px;
        line-height: 1.5;
        color: var(--sm-text-muted);
    }

    /* ==========================================================================
   5. APPLICATIONS GRID
   ========================================================================== */

    .sm-app-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    .sm-app-card {
        background-color: var(--sm-white);
        border: 1px solid var(--sm-border-light);
        border-radius: 16px;
        padding: 24px;
        text-align: center;
        box-shadow: var(--sm-shadow-sm);
        transition: var(--sm-transition);
    }

    .sm-app-card:hover {
        transform: translateY(-5px);
        border-color: var(--sm-gold);
        box-shadow: var(--sm-shadow);
    }

    .sm-app-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        background-color: var(--sm-gold-light);
        color: var(--sm-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        margin: 0 auto 16px auto;
        transition: var(--sm-transition);
    }

    .sm-app-card:hover .sm-app-icon {
        background-color: var(--sm-gold);
        color: var(--sm-white);
    }

    .sm-app-card h3,
    .sm-app-card h4 {
        font-size: 15.5px;
        font-weight: 700;
        color: var(--sm-text-dark);
        margin: 0;
    }

    /* ==========================================================================
   6. KEY OUTCOMES SECTION
   ========================================================================== */

    .sm-outcomes-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 24px;
    }

    .sm-outcome-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        background-color: var(--sm-white);
        border: 1px solid var(--sm-border-light);
        border-radius: 12px;
        box-shadow: var(--sm-shadow-sm);
        transition: var(--sm-transition);
    }

    .sm-outcome-item:hover {
        transform: translateX(6px);
        border-color: var(--sm-border);
        box-shadow: var(--sm-shadow);
    }

    .sm-outcome-check {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--sm-gold-light);
        color: var(--sm-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: bold;
        flex-shrink: 0;
        transition: var(--sm-transition);
    }

    .sm-outcome-item:hover .sm-outcome-check {
        background-color: var(--sm-gold);
        color: var(--sm-white);
    }

    .sm-outcome-item span {
        font-size: 14px;
        font-weight: 600;
        color: var(--sm-text-dark);
    }

    .sm-outcomes-visual-wrapper {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--sm-shadow-lg);
        border: 4px solid var(--sm-white);
    }

    .sm-outcomes-visual-wrapper img {
        width: 100%;
        height: 520px;
        object-fit: cover;
    }

    /* ==========================================================================
   7. WHY CHOOSE SUSTAINERGIC TECH
   ========================================================================== */

    .sm-why-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 48px;
    }

    .sm-why-card {
        background: var(--sm-white);
        border: 1px solid var(--sm-border);
        border-radius: 18px;
        padding: 32px;
        transition: var(--sm-transition);
        box-shadow: var(--sm-shadow-sm);
    }

    .sm-why-card:hover {
        background: var(--sm-white);
        border-color: var(--sm-gold);
        transform: translateY(-5px);
        box-shadow: var(--sm-shadow);
    }

    .sm-why-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        background-color: var(--sm-gold-light);
        color: var(--sm-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin-bottom: 20px;
        transition: var(--sm-transition);
    }

    .sm-why-card:hover .sm-why-icon {
        background-color: var(--sm-gold);
        color: var(--sm-white);
    }

    .sm-why-card h3,
    .sm-why-card h4 {
        font-size: 17px;
        font-weight: 700;
        color: var(--sm-text-dark);
        margin-bottom: 10px;
    }

    .sm-why-card p {
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--sm-text-muted);
    }

    /* ==========================================================================
   8. CALL TO ACTION SECTION
   ========================================================================== */

    .sm-cta-banner {
        position: relative;
        padding: 120px 0;
        background-image: url('../images/simulation-hero.png');
        background-size: cover;
        background-position: center;
        text-align: center;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: var(--sm-shadow-lg);
        margin: 50px auto;
        max-width: 1240px;
        width: calc(100% - 48px);
    }

    .sm-cta-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(43, 174, 102, 0.95) 0%, rgba(31, 41, 55, 0.9) 100%);
        z-index: 1;
    }

    .sm-cta-content {
        position: relative;
        z-index: 2;
        max-width: 780px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .sm-cta-content h2 {
        font-size: 42px;
        font-weight: 800;
        color: var(--sm-white);
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .sm-cta-content p {
        font-size: 17px;
        line-height: 1.65;
        color: #a7c5b4;
        margin-bottom: 36px;
    }

    .sm-cta-buttons {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    /* ==========================================================================
   9. RELATED SERVICES
   ========================================================================== */

    .sm-related-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .sm-related-card {
        background-color: var(--sm-white);
        border: 1px solid var(--sm-border-light);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--sm-shadow-sm);
        transition: var(--sm-transition);
        display: flex;
        flex-direction: column;
    }

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

    .sm-related-img-box {
        position: relative;
        height: 200px;
        overflow: hidden;
    }

    .sm-related-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--sm-transition);
    }

    .sm-related-card:hover .sm-related-img-box img {
        transform: scale(1.08);
    }

    .sm-related-icon-box {
        position: absolute;
        bottom: 14px;
        right: 14px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background-color: #f07b5e;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-shadow: 0 4px 14px rgba(240, 123, 94, 0.4);
        z-index: 10;
    }

    .sm-related-body {
        padding: 24px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .sm-related-body h3 {
        font-size: 18px;
        font-weight: 700;
        color: var(--sm-text-dark);
        margin-bottom: 12px;
    }

    .sm-related-body p {
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--sm-text-muted);
        margin-bottom: 20px;
        flex-grow: 1;
    }

    .sm-related-link {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--sm-gold);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: var(--sm-transition);
    }

    .sm-related-link i {
        font-size: 11px;
        transition: var(--sm-transition);
    }

    .sm-related-card:hover .sm-related-link {
        color: var(--sm-gold-hover);
    }

    .sm-related-card:hover .sm-related-link i {
        transform: translateX(4px);
    }

    /* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */

    @media (max-width: 1200px) {
        .sm-hero-title {
            font-size: 46px;
        }

        .sm-cta-banner {
            max-width: 1000px;
        }
    }

    @media (max-width: 991px) {
        .sm-section {
            padding: 50px 0;
        }

        .sm-grid-2 {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .sm-hero-grid {
            grid-template-columns: 1fr;
            gap: 50px;
            text-align: center;
        }

        .sm-breadcrumbs {
            justify-content: center;
        }

        .sm-hero-actions {
            justify-content: center;
        }

        .sm-hero-floating-card--one {
            left: 0;
        }

        .sm-hero-floating-card--two {
            right: 0;
        }

        .sm-alternating-services {
            gap: 60px;
        }

        .sm-alt-row {
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .sm-hero-img-wrapper {
            transform: none !important;
            border-width: 4px !important;
        }

        .sm-intro-visual-wrapper {
            height: auto !important;
            width: 100% !important;
        }

        .sm-intro-img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            object-fit: cover !important;
            display: block !important;
        }

        .sm-alt-row:nth-child(even) .sm-alt-visual {
            order: 0;
        }

        .sm-alt-row:nth-child(even) .sm-alt-content {
            order: 0;
        }

        .sm-process-line {
            display: none;
        }

        .sm-process-grid {
            grid-template-columns: 1fr;
            gap: 30px;
            max-width: 480px;
            margin: 0 auto;
        }

        .sm-process-step {
            display: flex;
            align-items: flex-start;
            text-align: left;
            background-color: var(--sm-white);
            border: 1px solid var(--sm-border-light);
            border-radius: 16px;
            padding: 20px;
            box-shadow: var(--sm-shadow-sm);
        }

        .sm-process-num-wrapper {
            margin: 0 20px 0 0;
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            font-size: 18px;
        }

        .sm-process-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex: 1;
            min-width: 0;
        }

        .sm-app-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .sm-outcomes-visual-wrapper img {
            height: 400px;
        }

        .sm-why-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .sm-cta-banner {
            padding: 80px 0;
            margin: 40px auto;
        }

        .sm-cta-content h2 {
            font-size: 32px;
        }

        .sm-related-grid {
            grid-template-columns: 1fr;
            max-width: 480px;
            margin: 0 auto;
        }
    }

    @media (max-width: 768px) {
        .sm-hero {
            padding: 150px 0 80px;
        }

        .sm-hero-title {
            font-size: 36px;
        }

        .sm-hero-subtitle {
            font-size: 16px;
        }

        .sm-title-main {
            font-size: 32px;
        }

        .sm-why-grid {
            grid-template-columns: 1fr;
        }

        .sm-intro-badge {
            position: static;
            margin-top: 24px;
            padding: 16px 20px;
            border-radius: 12px;
        }

        .sm-outcomes-list {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 576px) {
        .sm-intro-capabilities {
            grid-template-columns: 1fr;
            gap: 18px;
        }

        .sm-trust-highlights {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .sm-hero-floating-card {
            display: none;
        }

        .sm-hero-actions {
            flex-direction: column;
            width: 100%;
        }

        .sm-hero-actions .sm-btn {
            width: 100%;
        }

        .sm-cta-buttons {
            flex-direction: column;
            width: 100%;
            padding: 0 16px;
        }

        .sm-cta-buttons .sm-btn {
            width: 100%;
        }

        .sm-why-card {
            padding: 24px;
        }

        .sm-app-grid {
            grid-template-columns: 1fr;
        }

        .sm-cfd-split {
            grid-template-columns: 1fr;
            gap: 12px;
        }
    }

    @media (max-width: 480px) {
        .sm-hero {
            padding: 130px 0 60px;
        }

        .sm-hero-title {
            font-size: 28px;
            line-height: 1.25;
        }

        .sm-title-main {
            font-size: 24px;
        }

        .sm-alt-content-header h3 {
            font-size: 20px;
        }

        .sm-alt-visual img {
            border-radius: 16px;
        }

        .sm-alt-content {
            padding: 0;
        }

        .sm-btn {
            width: 100%;
            text-align: center;
            justify-content: center;
        }
    }