* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* overflow-x: hidden; */
        }

        /* General Body Styles */
        html,
        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            overflow-x: hidden;
            /* Prevent horizontal scroll */
            background-color: #fff;

            /* Ensure background is dark for top bar visibility */
        }

        /* Loader styles */
        #loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            /* or white, etc. */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        /* Spinner animation */
        .spinner {
            border: 8px solid #ccc;
            border-top: 8px solid #00ffcc;
            border-radius: 50%;
            width: 70px;
            height: 70px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }



        /* Navbar */
        .navbar {
            position: absolute;
            z-index: 1000;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.5rem 2rem;
            flex-wrap: wrap;
            background: transparent;
        }

        /* Logo */
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo img {
            height: 40px;
        }

        /* Nav Links */
        .nav-links {
            display: flex;
            align-items: center;
            gap: 30px;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 10px 40px;
            border-radius: 40px;
            transition: 0.3s ease;
        }

        .nav-links a {
            text-decoration: none;
            color: white;
            font-weight: 400;
            transition: color 0.3s ease;
            font-size: 1.1rem;
        }

        .nav-links a:hover {
            color: #00ffbb;
        }

        /* Dropdown */
        .dropdown {
            position: relative;
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            top: 20px;
            left: -50%;
            background: #fff;
            border-radius: 25px;
            overflow: hidden;
            min-width: 220px;
            z-index: 1000;
            border: 10px solid #047857;
            border-top: none;
            padding: 10px;
        }

        .dropdown-menu a {
            display: block;
            padding: 10px 15px;
            color: #000;
            font-size: 1rem;
        }

        .dropdown-menu a:hover {
            color: #00a07a;
        }

        .dropdown:hover .dropdown-menu {
            display: block;
        }

        /* Contact Buttons */
        .contact-buttons {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .phone-btn {
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 30px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            color: #fff;
        }

        .phone-btn i {
            color: #00ffbb;
        }

        .get-in-touch {
            text-decoration: none;
            background-color: #00c389;
            border: none;
            padding: 10px 18px;
            border-radius: 30px;
            font-weight: 600;
            color: black;
            cursor: pointer;
            transition: background 0.3s ease;
            margin-right: 10px;
        }

        .get-in-touch i {
            margin-left: 5px;
        }

        .get-in-touch:hover {
            background-color: #00a56d;
        }

        /* Mobile Menu Icon */
        .mobile-icon {
            display: none;
            font-size: 1.5rem;
            color: white;
            cursor: pointer;
            position: absolute;
            right: 3%;
            top: -50%;
            z-index: 100;
        }



        /* Responsive */
        @media screen and (max-width: 1024px) {
            .navbar {
                flex-direction: column;
                align-items: flex-start;
                margin-top: 0;
            }

            .nav-links {
                position: absolute;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
                flex-direction: column;
                align-items: flex-start;
                width: 98%;
                background-color: #fff;
                color: #000;
                padding: 0px 50px;
                /* initially no top/bottom padding */
                left: 1%;
                top: 80%;
            }

            /* When shown */
            .nav-links.show {
                max-height: 450px;
                /* adjust as needed */
                padding: 50px 30px;
            }

            .nav-links a {
                color: #000;
                /* font-size: 0.8rem; */
            }

            .nav-links.show {
                display: flex;
            }

            .contact-buttons {
                display: none;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
                /* margin-top: 10px; */
            }

            .mobile-icon {
                display: block;
                margin-left: auto;
                top: 0px;
            }

            .dropdown-menu {
                left: 100%;
                top: -500%;
                border: 10px solid #047857;
                /* border-left: none; */

            }


        }


        @media screen and (max-width: 1024px) {
            .nav-links a {
                color: #000;
                font-size: 14px;
            }

            .mobile-icon {
                top: 25px;
            }

        }

        /* Optional: make both icons same size */






        .slider {
            position: relative;
            width: 98%;
            height: 45rem;
            margin: 0.8rem auto;
            overflow: hidden;
            border-radius: 2rem;
        }

        .slides-container {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;
        }

        .slide {
            height: 100%;
            flex: 0 0 100%;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .content {
            position: absolute;
            top: 35%;
            left: 2rem;
            color: white;
            text-shadow: 1px 1px 5px black;
            max-width: 90%;
        }

        .content h1 {
            font-size: 4rem;
            margin-bottom: 10px;
        }

        .content p {
            font-size: 1.5rem;
        }

        .navigation-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: white;
            height: 8rem;
            width: 4rem;
            color: white;
            border: none;
            font-size: 24px;
            z-index: 10;
            right: 0;
            border-radius: 2rem 0 0 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: .5rem;
        }

        .nav-button {
            display: flex;
            cursor: pointer;
            border: 1px solid gray;
            border-radius: 50%;
            padding: 8px;
            background-color: gray;
            transition: background-color 0.3s ease;
        }

        .nav-button:active {
            background-color: #000;
        }

        .nav-button:hover {
            background-color: black;
        }

        .contact-btn {
            margin-left: 10.6rem;
            margin-top: .8rem;
            background-color: white;
            color: #047857;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            border: 1px solid white;
            border-radius: .5rem;
            font-weight: bold;
            transition: 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
            width: 200px;
            text-decoration: none;
        }


        .contact-btn:hover {
            background-color: black;
            color: white;
            border: 1px solid black;
        }

        .nav-button.active {
            background-color: #333;
        }



        @media (max-width: 1024px) {
            .slider {
                height: 35rem;
            }

            .content h1 {
                font-size: 2.5rem;
                /* width: 90%; */
            }

            .content p {
                font-size: 1.3rem;
            }

            .contact-btn {
                margin-left: 6rem;
                padding: 0.8rem 1.5rem;
                font-size: 1rem;
            }
        }

        @media (max-width: 768px) {
            .slider {
                height: 28rem;
            }

            .content {
                top: 10rem;
                left: 1rem;
            }

            .content h1 {
                font-size: 2rem;
            }

            .content p {
                font-size: 1rem;
            }

            .contact-btn {
                margin-left: 3rem;
                padding: 0.7rem 1.2rem;
                font-size: 0.9rem;
            }

            .navigation-button {
                height: 6rem;
                width: 3rem;
            }

            .nav-button {
                padding: 6px;
            }
        }

        @media (max-width: 480px) {
            .slider {
                height: 22rem;
            }

            .content {
                top: 9rem;
                left: 1rem;
            }

            .content h1 {
                font-size: 1.8rem;
            }

            .content p {
                font-size: 0.9rem;
            }

            .contact-btn {
                margin-left: 1rem;
                padding: 0.5rem 1rem;
                font-size: 0.8rem;
            }

            .navigation-button {
                height: 5rem;
                width: 2.5rem;
            }

            .nav-button {
                padding: 5px;
            }
        }


        .nav-bar {
            position: absolute;
            z-index: 20;
            background-color: white;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-top: 2rem;
            padding: 1.2rem 3rem;
            border-radius: 2rem;
            font-size: 1.1rem;
        }

        @media (max-width: 600px) {
            .content h1 {
                font-size: 20px;
            }

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

            .nav-button {
                font-size: 18px;
                padding: 6px;
            }
        }

        /* Top Bar Styles */
        .top-bar {
            background-color: transparent;
            /* bg-gray-900 equivalent */
            color: #000;
            /* text-gray-400 equivalent */
            font-size: 0.875rem;
            /* text-sm equivalent */
            padding: 0.5rem 1.5rem;
            /* py-2 px-6 equivalent */
            display: flex;
            flex-direction: column;
            /* flex-col equivalent */
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
            /* space-y-2 equivalent */
        }

        @media (min-width: 768px) {
            .top-bar {
                flex-direction: row;
                /* md:flex-row equivalent */
                padding: 0.5rem 3rem;
                /* md:px-12 equivalent */
                gap: 0;
                /* md:space-y-0 equivalent */
            }
        }

        .top-bar-left,
        .top-bar-right {
            display: flex;
            flex-direction: column;
            /* flex-col equivalent */
            align-items: center;
            gap: 0.5rem;
            /* space-y-2 equivalent */
        }

        @media (min-width: 768px) {

            .top-bar-left,
            .top-bar-right {
                flex-direction: row;
                /* md:flex-row equivalent */
                gap: 1.5rem;
                /* md:space-x-6 equivalent */
            }
        }

        .top-bar-item {
            display: flex;
            align-items: center;
        }

        .top-bar-icon {
            width: 1rem;
            /* w-4 equivalent */
            height: 1rem;
            /* h-4 equivalent */
            margin-right: 0.25rem;
            /* mr-1 equivalent */
            stroke: currentColor;
            stroke-width: 1.5;
        }

        .top-bar-item i {
            font-size: 14px;
            margin-right: 2px;
            margin-top: auto;
        }

        .social-icons {
            display: flex;
            gap: 0.75rem;
            /* space-x-3 equivalent */
        }

        .social-icons a {
            color: #000;
            /* text-gray-400 equivalent */
        }


        /* Header/Navigation Bar Styles */
        .main-header {
            position: absolute;
            /* top: 2.5rem; top-10 equivalent */
            left: -5%;
            width: 100%;
            z-index: 30;
            /* padding: 1rem 1rem; py-4 px-6 equivalent */
        }

        @media (min-width: 768px) {
            .main-header {
                padding: 1rem 3rem;
                /* md:px-12 equivalent */
            }
        }


        /* About Us Section */
        .about-us-section {
            padding: 60px 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Center items for the overall section */
            background-color: #f8f8f8;
            /* Light grey background */
        }

        .about-us-intro {
            margin-bottom: 40px;
            min-width: 1240px;
            max-width: 100wh;
            /* Constrain width */
            /* width: 100%; */
            text-align: left;
        }

        .about-us-intro-1 {
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
            gap: 80px;
        }

        .about-us-label {
            background-color: transparent;
            /* Light blue background */

            color: #00c389;
            /* Green text */
            padding: 8px 15px;
            border-radius: 25px;
            font-weight: 600;
            font-size: 1.2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
            /* Prevent text from wrapping */
            height: 25px;
            gap: 5px;
            border: 2px solid #ccc;
            margin-top: 20px;

        }

        .about-us-label span {
            width: auto;
            /* Adjust icon size relative to font size */
            height: 1em;
            margin-right: 5px;
            color: #494949;
            /* Green icon color */
            font-size: 0.8rem;
            letter-spacing: 1px;
        }

        #text-green {
            color: #00c389;
        }


        .about-us-text-content {
            flex-grow: 1;
            /* Allow this content to take available space */
            max-width: 900px;
            /* Max width for the text content */
            margin: auto;
        }

        .about-us-heading {
            font-size: 4em;
            font-weight: 800;
            color: #333;
            line-height: 1.2;
            margin-bottom: 20px;
            /* max-width removed as it's now constrained by parent */
        }

        .about-us-paragraph {
            font-size: 1em;
            color: #555;
            line-height: 1.6;
            /* margin-bottom removed as it's handled by parent flex container */
            /* max-width removed as it's now constrained by parent */
        }

        .feature-cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            max-width: 100%;
        }

        .feature-card {
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Align items to the start for text */
            text-align: left;
            transition: transform 0.3s ease;
            position: relative;
            /* Needed for absolute positioning of icon */
            width: 300px;
            height: auto;
            gap: 20px;
            flex-wrap: wrap;

        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-card-icon {
            position: absolute;
            /* Position icon absolutely */
            top: 15px;
            /* Adjust as needed */
            right: 20px;
            /* Adjust as needed */
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .feature-card-icon svg {
            width: 50px;
            height: 50px;
            color: #00c389;
            /* Green icon color */
            stroke-width: 1.5;
            padding-top: 20px;
        }

        .feature-card-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 10px;
            padding-right: 50px;
            /* Make space for the icon */
        }

        .feature-card-divider {
            width: 100%;
            /* Full width of the card */
            height: 1px;
            background-color: #eee;
            /* Light grey line */
            margin-bottom: 15px;
            /* Space between divider and description */
        }

        .feature-card-description {
            font-size: 0.95em;
            color: #666;
            line-height: 1.5;
        }

        @media (max-width: 1024px) {

            .about-us-intro {
                min-width: auto;
                padding: 0 20px;
                /* text-align: center; */
            }

            .about-us-heading {
                font-size: 2.5em;
                /* text-align: center; */
                margin-left: 00px;
            }

            .about-us-paragraph {
                text-align: left;
            }

            .feature-cards-container {
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 20px;
            }

            .feature-card {
                width: 100%;
                padding: 20px;
            }

            .feature-card-icon {
                top: 10px;
                right: 15px;
                width: 60px;
                height: 60px;
            }

            .feature-card-icon svg {
                width: 40px;
                height: 40px;
                padding-top: 15px;
            }

            .feature-card-title {
                font-size: 1rem;
                padding-right: 40px;
            }

            .feature-card-description {
                font-size: 0.9em;
            }
        }

        @media (max-width: 600px) {
            .about-us-section {
                padding: 40px 20px;
            }

            .about-us-intro-1 {
                gap: 10px;
            }

            .about-us-label {
                font-size: 1rem;
                padding: 6px 12px;
                height: auto;
                flex-wrap: wrap;
                text-align: center;
            }

            .about-us-heading {
                font-size: 2em;
            }

            .feature-cards-container {
                grid-template-columns: 1fr;
            }

            .feature-card {
                align-items: flex-start;
                text-align: left;
            }
        }


        /* ========== BASE STYLES ========== */

        /* ... All your base styles here (unchanged) ... */

        /* Already included above, so skipping rewriting the unchanged part for brevity */

        /* ========== MEDIA QUERIES ========== */

        /* Small screens (up to 600px) */
        @media (max-width: 600px) {
            .top-bar {
                flex-direction: column;
                align-items: center;
                gap: 4px;
            }

            .navbar {
                padding: 20px;
            }

            .about-us-heading {
                font-size: 2em;
            }

            .about-us-paragraph {
                font-size: 1em;
            }

            .feature-cards-container {
                grid-template-columns: 1fr;
            }

            .feature-card {
                align-items: center;
                text-align: center;
            }

            .feature-card-icon {
                position: static;
                margin-bottom: 20px;
            }

            .feature-card-title {
                padding-right: 0;
            }
        }

        /* Medium screens (up to 900px) */
        @media (max-width: 900px) {
            .about-us-intro {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .about-us-label {
                margin-right: 0;
                margin-bottom: 20px;
            }

            .about-us-text-content {
                text-align: center;
            }
        }

        /* Medium & above screens (768px and up) */
        @media (min-width: 768px) {
            .top-bar {
                flex-direction: row;
                padding: 0.5rem 3rem;
                gap: 0;
            }

            .top-bar-left,
            .top-bar-right {
                flex-direction: row;
                gap: 1.5rem;
            }

            .main-header {
                padding: 1rem 3rem;
            }
        }


        /* Moving Text Section */
        .moving-text-section {
            background-color: #f8f8f8;
            /* Same as body background */
            padding: 40px 0;
            /* Vertical padding */
            overflow: hidden;
            /* Hide overflowing text */
            white-space: nowrap;
            /* Prevent text from wrapping */
        }

        .moving-text-container {
            display: inline-block;
            /* Allows content to be wider than container */
            animation: marquee 20s linear infinite;
            /* Animation for continuous movement */
            /* Removed padding-left: 100%; */
        }

        .moving-text-item {
            display: inline-block;
            /* Keep items in a line */
            font-size: 3.5em;
            /* Large font size */
            font-weight: 900;
            /* Extra bold */
            margin: 0 20px;
            /* Space between items */
            text-transform: uppercase;
        }

        .moving-text-item.black {
            color: #333;
            /* Black text */
        }

        .moving-text-item.outline {
            color: transparent;
            /* Transparent fill */
            -webkit-text-stroke: 2px #333;
            /* Black stroke for outline effect */
            text-stroke: 2px #333;
        }

        .moving-text-item.plus {
            color: #00c389;
            /* Green color for plus sign */
        }

        /* Marquee Animation */
        @keyframes marquee {
            0% {
                transform: translateX(0%);
            }

            100% {
                transform: translateX(-50%);
            }

            /* Changed to -50% for infinite loop with duplicated content */
        }



        /* WHO WE ARE Section */
        .who-we-are-section {
            background-color: #1a2a2a;
            /* Dark teal background */
            padding: 40px 40px;
            color: #fff;
            display: flex;
            /* Use flexbox for layout */
            justify-content: center;
            /* Center content horizontally */
            align-items: center;
            /* Center content vertically */
            position: relative;
            /* For absolute positioning of background elements */
            overflow: hidden;
            /* Hide overflowing background elements */
            border-radius: 20px;
            /* Apply rounded corner to the section itself */
            margin: 30px;
        }

        /* Remove previous abstract background elements */
        .who-we-are-section::before,
        .who-we-are-section::after {
            content: none;
            /* Remove them */
        }

        .who-we-are-top-right-graphic {
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            /* Size of the graphic area */
            height: 300px;
            background-color: transparent;
            /* Section background handles the dark color */
            overflow: hidden;
            /* To clip the inner pattern */
            border-top-right-radius: 20px;
            /* Match section's border-radius */
            z-index: 0;
            /* Behind content */
        }

        .who-we-are-top-right-graphic::before {
            content: '';
            position: absolute;
            top: -50%;
            /* Adjust to ensure pattern covers the div after skew */
            left: -50%;
            width: 200%;
            /* Make it large enough */
            height: 100%;
            background-image:
                repeating-linear-gradient(45deg,
                    /* Angle of the stripes */
                    #00c389 0px,
                    /* Light green solid stripe */
                    /* #00c389 25px, */
                    white 25px,
                    /* White solid stripe */
                    white 50px,
                    transparent 50px,
                    /* Transparent gap (shows dark background) */
                    /* transparent 75px */
                );
            background-size: 75px 75px;
            /* Size of one repeating pattern unit */
            transform: skewX(-20deg);
            /* Skew the entire pattern */
            transform-origin: top right;
            /* Origin for the skew transformation */
            opacity: 0.9;
            /* Slightly transparent to blend */
        }


        .who-we-are-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 40px;
            align-items: flex-start;
            /* Align items to the start (left) */
            position: relative;
            /* Ensure content is above pseudo-elements */
            z-index: 1;
        }

        .who-we-are-intro {
            display: flex;
            flex-direction: column;
            /* Stack label and heading */
            align-items: flex-start;
            /* Align to the left */
            margin-bottom: 20px;
            /* Space between intro and main content */

        }

        .who-we-are-label {
            display: flex;
            align-items: center;
            background-color: transparent;
            /* No background color */
            color: #00c389;
            /* Green text */
            padding: 0;
            /* Remove padding */
            border-radius: 0;
            /* No border radius */
            font-weight: 600;
            font-size: 0.9em;
            margin-bottom: 10px;
            /* Space between label and heading */
            border: 2px solid #cccccc8c;
            padding: 5px 10px;
            border-radius: 25px;
        }

        .who-we-are-label .dot-icon {
            width: 8px;
            /* Small dot size */
            height: 8px;
            background-color: #00c389;
            /* Green dot */
            border-radius: 50%;
            margin-right: 8px;
            /* Space between dot and text */
            display: inline-block;
        }

        .who-we-are-heading {
            font-size: 3.2em;
            font-weight: 800;
            line-height: 1.2;
            color: #fff;
            /* White text */
            text-align: left;
            /* Align to the left */
            max-width: 600px;
            /* Limit width for readability */
        }

        .who-we-are-main {
            display: flex;
            flex-direction: row;
            /* Default to row layout */
            align-items: center;
            gap: 40px;
            width: 100%;
        }

        .who-we-are-image {
            flex: 1;
            min-width: 300px;
            /* Minimum width for image container */
            position: relative;
            /* Needed for absolute positioning of overlay */
        }



        .who-we-are-image img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
        }

        .who-we-are-image img {
            position: relative;
            /* Needed for 'x' transform to behave properly */
            transform: translateX(-100px);
            /* Start off-screen to the left */
            opacity: 0;
        }

        .experience-overlay {
            position: absolute;
            bottom: 0px;
            /* Distance from bottom */
            left: 0px;
            /* Distance from left */
            background-color: #1a2a2a;
            /* Dark teal with transparency */
            border-top-right-radius: 10px;
            padding: 15px 20px;
            display: flex;
            align-items: baseline;
            /* Align "25+" and "Years of experience" baseline */
            gap: 10px;
            color: #fff;
        }

        .experience-overlay {
            position: absolute;
            opacity: 0;
            transform: translateX(-50px);
        }


        .experience-overlay .number {
            font-size: 2.5em;
            /* Large size for "25+" */
            font-weight: 800;
            color: #00c389;
            /* Green color */
            line-height: 1;
            /* Adjust line height to prevent extra space */
        }

        .experience-overlay .text {
            font-size: 0.9em;
            /* Smaller size for "Years of experience" */
            font-weight: 500;
            line-height: 1.3;
            /* Adjust line height */
            display: flex;
            flex-direction: column;
            /* Stack "Years of" and "experience" */
        }


        .who-we-are-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 30px;
        }

        .who-we-are-text>* {
            opacity: 0;
            transform: translateY(50px);
        }

        .who-we-are-text p {
            font-size: 0.8rem;
            line-height: 1.6;
            color: #e0e0e0;
            /* Lighter text for contrast */
        }

        .who-we-are-text h1 {
            color: #00c389;
            font-size: 1rem;
            padding-top: 10px;
        }

        .mission-vision-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .mission-vision-title {
            font-size: 0.9em;
            font-weight: 700;
            color: #00c389;
            /* Green for mission/vision titles */
            flex-basis: 30%;
            /* Allocate space for title */
            text-align: left;
        }

        .mission-vision-description {
            font-size: 0.8em;
            color: #a0aec0;
            /* Greyish color for descriptions */
            flex-basis: 65%;
            /* Allocate space for description */
            text-align: right;
        }

        .content-divider {
            width: 100%;
            height: 1px;
            background-color: rgba(255, 255, 255, 0.1);
            /* Light grey line for dividers */
            margin: 10px 0;
        }

        .know-more-button-container {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            /* Align button to the left */
            margin-top: 20px;
            /* Space above the button */
        }

        .know-more-button {
            background-color: #fff;
            /* Green button */
            color: #000;
            padding: 12px 25px;
            border: none;
            border-radius: 10px;
            display: flex;
            align-items: center;
            transition: background-color 0.3s ease;
            cursor: pointer;
        }

        .know-more-button:hover {
            background-color: #00a07a;
            /* Darker green on hover */
        }

        .know-more-button svg {
            width: 1.2em;
            height: 1.2em;
            margin-left: 10px;
            stroke-width: 2;
        }

        /* Responsive adjustments */
        @media (max-width: 900px) {
            .about-us-intro {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .about-us-label {
                margin-right: 0;
                margin-bottom: 20px;
            }

            .about-us-text-content {
                text-align: center;
            }

            .who-we-are-heading {
                font-size: 2.5em;
                text-align: center;
                /* Center heading on smaller screens */
            }

            .who-we-are-main {
                flex-direction: column;
                /* Stack image and text vertically */
            }

            .who-we-are-image {
                min-width: unset;
                width: 100%;
            }

            .experience-section {
                justify-content: center;
            }

            .mission-vision-row {
                flex-direction: column;
                /* Stack mission/vision title and description */
                align-items: flex-start;
                /* Align to left when stacked */
                padding: 10px 0;
            }

            .mission-vision-title,
            .mission-vision-description {
                flex-basis: auto;
                /* Reset flex-basis */
                width: 100%;
                /* Take full width */
                text-align: left;
                /* Align text to left */
            }

            .mission-vision-description {
                margin-top: 5px;
                /* Add some space between stacked items */
            }

            .know-more-button-container {
                justify-content: center;
                /* Center button on small screens */
            }

            .experience-overlay {
                bottom: 10px;
                /* Adjust for smaller screens */
                left: 10px;
                /* Adjust for smaller screens */
                padding: 10px 15px;
            }

            .experience-overlay .number {
                font-size: 2em;
            }

            .experience-overlay .text {
                font-size: 0.8em;
            }
        }





        /* OUR SERVICE Section */
        .our-service-section {
            background-color: #f8f8f8;
            /* Light grey background */
            padding: 10px 40px;
            color: #333;
            display: flex;
            flex-direction: column;
            /* Changed to column for top-level content */
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .our-service-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            /* Stack on mobile */
            gap: 20px;
            align-items: flex-start;
            position: relative;
            z-index: 1;
        }

        .our-service-intro {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-around;
            margin-bottom: 20px;
            width: 100%;
        }

        .our-service-label {
            display: flex;
            align-items: center;
            color: #000;
            font-weight: 600;
            font-size: 0.9em;
            margin-bottom: 10px;
            border: 2px solid #ccc;
            padding: 5px 10px;
            border-radius: 25px;
            margin-top: 20px;
        }

        .our-service-label .dot-icon {
            width: 8px;
            height: 8px;
            background-color: #00c389;
            border-radius: 50%;
            margin-right: 8px;
            display: inline-block;
        }

        .our-service-heading {
            font-size: 3.2em;
            font-weight: 800;
            line-height: 1.2;
            color: #333;
            /* text-align: center; */
            max-width: 600px;
            margin-left: 20px;
        }

        .service-main-content {
            display: flex;
            gap: 50px;
            width: 100%;
            align-items: center;
            /* Center items when stacked */
            justify-content: left;
            padding: 20px 0;
        }

        .service-image-container {
            display: flex;
            flex: 1;
            max-width: 500px;
            height: 400px;
            border-radius: 10px;
            overflow: hidden;
            /* Ensure image corners are rounded */
            /* Removed box-shadow */
            justify-content: space-around;
            margin-left: 200px;
        }

        .service-image-container img {
            width: 500px;
            height: 400px;
            display: block;
            object-fit: cover;
            /* Remove extra space below image */
            transition: opacity 0.3s ease-in-out;
            /* Smooth transition for image change */
        }

        .service-list-container {
            flex: 1;
            width: 100%;
            max-width: 500px;
            /* Limit width for list */
        }

        .service-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            cursor: pointer;
            /* Indicate interactivity */
        }

        .service-item-title {
            font-size: 1.2em;
            font-weight: 500;
            /* Changed to 500 */
            color: #666;
            /* Changed to lighter grey */
        }

        .service-item-icon-wrapper {
            width: 40px;
            /* Fixed size for the circle */
            height: 40px;
            border-radius: 50%;
            background-color: #e0e0e0;
            /* Light grey background for most icons */
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s ease;
        }

        .service-item-icon-wrapper.green-bg {
            background-color: #00c389;
            /* Green background for specific icon */
        }

        .service-item-icon-wrapper svg {
            width: 20px;
            height: 20px;
            color: #666;
            /* Changed to lighter grey */
            stroke-width: 2;
        }

        .service-item-icon-wrapper.green-bg svg {
            color: #fff;
            /* White icon for green background */
        }

        .service-divider {
            width: 100%;
            height: 1px;
            background-color: #e0e0e0;
            /* Light grey divider */
        }


        .circle-design-elements {
            position: absolute;
            left: -15%;
            top: 51%;
            transform: translateY(100px);
            /* initial offset */
            opacity: 0;
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 0;
            padding-left: 20px;
        }

        .circle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }

        .circle.dark-teal {
            background-color: #0f1818;
            /* Dark teal */
            position: absolute;
            top: -110%
        }

        .circle.light-green {
            background-color: #098e66;
            /* Green */
            position: absolute;
            top: -80px;
        }

        .circle.light-grey {
            background-color: #d3d3d3;
            /* Light grey */
            position: relative;
        }


        /* ========== MEDIA QUERIES ========== */

        @media (max-width: 1224px) {
            .our-service-intro {
                flex-direction: column;
                align-items: flex-start;
                text-align: left;
            }

            .our-service-heading {
                font-size: 2em;
                margin: auto;
                text-align: center;
            }

            .service-main-content {
                /* flex-direction: column; */
                gap: 30px;
                align-items: center;
            }

            .service-image-container {
                margin-left: 100px;
                max-width: 100%;
                height: auto;
            }

            .service-list-container {
                max-width: 100%;
            }

            .circle-design-elements {
                /* display: none; */
                left: -15%;
            }
        }


        @media (max-width: 980px) {

            .service-image-container {
                margin: auto;
            }

            .circle-design-elements {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .our-service-intro {
                flex-direction: column;
                align-items: flex-start;
                text-align: left;
            }

            .our-service-heading {
                font-size: 2em;
                margin-right: 0;
            }

            .service-main-content {
                flex-direction: column;
                gap: 30px;
                align-items: center;
            }

            .service-image-container {
                /* margin-left: 0; */
                max-width: 100%;
                height: auto;
            }

            .service-list-container {
                max-width: 100%;
            }

            .circle-design-elements {
                display: none;
            }
        }

        @media (max-width: 540px) {
            .our-service-intro {
                flex-direction: column;
                align-items: flex-start;
                text-align: left;
            }

            .our-service-heading {
                font-size: 2em;
                /* margin-right: 0; */
            }

            .service-main-content {
                flex-direction: column;
                /* gap: 30px; */
                align-items: center;
                margin: auto;
            }

            .service-image-container {
                margin-left: 0;
                max-width: 300px;
                /* min-width: 300px; */
                height: auto;
            }

            .service-list-container {
                max-width: auto;
            }

            .circle-design-elements {
                display: none;
            }
        }


        /* New Experience Section Styles */
        .experience-section {
            min-width: 1240px;
            max-width: 100%;
            background-color: #f8f8f8;
            padding: 60px 40px;
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 30px;
            margin: 10px auto;
        }

        .experience-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            flex: 1 1 200px;
            min-width: 200px;
            max-width: 200px;
        }

        .experience-item-title {
            display: flex;
            align-items: center;
            font-size: 1.1em;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }

        .experience-item-title .dot-icon {
            width: 8px;
            height: 8px;
            background-color: #00c389;
            border-radius: 50%;
            margin-right: 8px;
            display: inline-block;
        }

        .experience-item-number {
            font-size: 2.5em;
            font-weight: 800;
            color: #333;
        }

        /* ✅ Media Query for Mobile Devices (Two items per row) */

        @media (max-width: 1224px) {
            .experience-section {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                min-width: auto;
                margin: 0 auto;
            }

            .experience-item {
                max-width: 45%;
                align-items: flex-start;
                text-align: left;
            }

            .experience-item-number {
                font-size: 2.2em;
            }

        }

        @media (max-width: 980px) {
            .experience-section {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                min-width: auto;
                margin: 0 auto;
            }

            .experience-item {
                flex: 1 1 45%;
                /* Take ~45% space to allow 2 in a row */
                max-width: 45%;
                /* min-width: 150px; */
                align-items: flex-start;
                text-align: left;
                margin: auto;
            }

            .experience-item-number {
                font-size: 2.2em;
            }

        }

        @media (max-width: 600px) {
            .experience-section {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                min-width: auto;
            }

            .experience-item {
                flex: 1 1 45%;
                /* Take ~45% space to allow 2 in a row */
                max-width: 45%;
                min-width: 120px;
                align-items: flex-start;
                text-align: left;
            }

            .experience-item-number {
                font-size: 1.5em;
                margin-left: 15px;
            }

            .experience-item-title {
                font-size: 1rem;
            }
        }






        .container-wrapper {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3rem 1rem;
            /* py-12 px-4 */
        }

        @media (min-width: 640px) {

            /* sm:px-6 */
            .container-wrapper {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }
        }

        @media (min-width: 1024px) {

            /* lg:px-8 */
            .container-wrapper {
                padding-left: 2rem;
                padding-right: 2rem;
            }
        }

        .main-container {
            max-width: 80rem;
            /* max-w-6xl */
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 3rem;
            /* space-y-12 */
        }

        /* Top Section */
        .top-section {
            display: flex;
            flex-direction: column;
            /* align-items: flex-start; */
            justify-content: space-between;
            margin-bottom: 2.5rem;
            /* mb-10 */
        }

        @media (min-width: 768px) {

            /* md:flex-row md:items-center */
            .top-section {
                flex-direction: row;
                align-items: center;
            }
        }

        .heading-content {
            margin-bottom: 1.5rem;
            /* mb-6 */
            display: flex;
            gap: 50px;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        @media (min-width: 768px) {

            /* md:mb-0 */
            .heading-content {
                margin-bottom: 0;
            }
        }

        /* "OUR PROCESS" tag */
        .process-tag {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            /* text-sm */
            font-weight: 500;
            /* font-medium */
            color: #4b5563;
            /* text-gray-600 */
            margin-bottom: 0.5rem;
            /* mb-2 */
            border: 2px solid #ccc;
            padding: 5px 10px;
            border-radius: 25px;
            margin-top: 15px;
        }

        .process-tag-dot {
            width: 0.5rem;
            height: 0.5rem;
            background-color: #10b981;
            /* bg-green-500 */
            border-radius: 9999px;
            /* rounded-full */
            margin-right: 0.5rem;
            /* mr-2 */
        }

        /* Main Heading */
        .main-heading {
            font-size: 2.25rem;
            /* text-4xl */
            font-weight: 700;
            /* font-bold */
            color: #111827;
            /* text-gray-900 */
            line-height: 1.25;
            /* leading-tight */
            width: 100%;
            text-align: center;
        }

        .main-heading-2 {
            font-size: 1.5rem;
            color: #111827;
            /* width: 800px; */
            margin: 0 auto;
            /* margin: 0 190px; */
            text-align: center;
        }

        @media (min-width: 640px) {

            /* sm:text-5xl */
            .main-heading {
                font-size: 3rem;
            }

            .main-heading .break-line {
                display: inline;
                /* sm:inline */
            }
        }

        @media (min-width: 1024px) {

            /* lg:text-6xl */
            .main-heading {
                font-size: 3.75rem;
            }
        }

        .main-heading .break-line {
            display: none;
            /* hidden */
        }

        /* Steps Grid */
        .steps-grid {
            display: grid;
            grid-template-columns: 1fr;
            /* grid-cols-1 */
            gap: 2rem;
            padding-top: 2rem;
            /* Add padding to separate from top section */
            /* border-top: 1px solid #e5e7eb; Add a subtle line above the steps */
        }

        @media (min-width: 768px) {

            /* md:grid-cols-2 */
            .steps-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {

            /* lg:grid-cols-4 */
            .steps-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* Individual Step Card - Now without card styling */
        .step-card {
            background-color: transparent;
            /* Remove background */
            border-radius: 0;
            /* Remove border-radius */
            box-shadow: none;
            /* Remove shadow */
            padding: 0;
            /* Remove padding */
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

        .step-icon-container {
            width: 4rem;
            /* w-16 */
            height: 4rem;
            /* h-16 */
            background-color: #b2f5ea;
            /* bg-teal-200 */
            opacity: 0.7;
            /* bg-opacity-70 */
            border-radius: 0.75rem;
            /* rounded-xl */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            /* mb-6 */
        }

        .step-icon {
            width: 2rem;
            /* w-8 */
            height: 2rem;
            /* h-8 */
            color: #047857;
            /* text-teal-600 */
        }

        .step-title {
            font-size: 1.25rem;
            /* text-xl */
            font-weight: 600;
            /* font-semibold */
            color: #111827;
            /* text-gray-900 */
            margin-bottom: 0.5rem;
            /* mb-2 */
        }

        .step-description {
            color: #4b5563;
            /* text-gray-600 */
            font-size: 1rem;
            /* text-base */
        }

        .step-card-hr {
            width: 100%;
            margin-bottom: 50px;
            color: #c5bfbf8d;
        }

        /* ========== Mobile (max-width: 640px) ========== */
        @media (max-width: 640px) {
            .step-card-hr {
                width: 100%;
            }

            .main-heading {
                font-size: 1.75rem;
                width: 100%;
            }

            .main-heading-2 {
                font-size: 1.25rem;
                margin: 0;
                width: 100%;
                text-align: center;
            }

            .top-section {
                gap: 1rem;
            }

            .steps-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .step-icon-container {
                width: 3rem;
                height: 3rem;
                margin-bottom: 1rem;
            }

            .step-icon {
                width: 1.5rem;
                height: 1.5rem;
            }

            .step-title {
                font-size: 1rem;
            }

            .step-description {
                font-size: 0.875rem;
            }
        }

        /* ========== Tablet (min-width: 768px and max-width: 1023px) ========== */
        @media (min-width: 768px) and (max-width: 1023px) {
            .main-heading {
                font-size: 2.5rem;
                width: 100%;
            }

            .main-heading-2 {
                font-size: 1.375rem;
                margin: 0 auto;
                text-align: left;
                width: 90%;
            }

            .top-section {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 2rem;
            }

            .steps-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
            }

            .step-icon-container {
                width: 3.5rem;
                height: 3.5rem;
            }

            .step-icon {
                width: 1.75rem;
                height: 1.75rem;
            }
        }

        /* ========== Desktop (min-width: 1024px) ========== */
        @media (min-width: 1024px) {
            .main-heading {
                font-size: 3.75rem;
            }

            .main-heading-2 {
                font-size: 1.5rem;
                margin: 0 190px;
            }

            .top-section {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }

            .steps-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 2.5rem;
            }
        }




        .main-wrapper {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            padding: 1.5rem;
            max-width: 1200px;
            /* Max width to contain content */
            width: 100%;
        }

        @media (min-width: 1024px) {
            .main-wrapper {
                flex-direction: row;
                gap: 3rem;
            }
        }

        /* Left Section: Why Choose Us */

        .way-choose-us {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: auto;
        }

        .why-choose-us-section {
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            overflow: hidden;
            /* To contain the image */
            flex: 2.5;
            /* Take equal space */

        }

        .why-choose-us-section {
            opacity: 0;
            transform: translateX(-100px);
            /* shifted to the left */
            /* transition: all 0.6s ease; */
        }

        .why-choose-us-tag {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            font-weight: 500;
            color: #4b5563;
            margin-bottom: 1rem;
            border: 2px solid #ccc;
            padding: 5px 10px;
            border-radius: 25px;
        }

        .why-choose-us-tag-dot {
            width: 0.5rem;
            height: 0.5rem;
            background-color: #10b981;
            border-radius: 9999px;
            margin-right: 0.5rem;
        }

        .why-choose-us-heading {
            font-size: 2.5rem;
            font-weight: 700;
            color: #111827;
            line-height: 1.2;
            margin-bottom: 2rem;
            /* margin-top: 50px; */
        }

        .why-choose-detail {
            display: flex;
            justify-content: space-between;
            padding: 10px 0px;
        }

        .why-choose-detail-h3 {
            font-size: 1rem;
            color: #00a07a;
            padding-bottom: 10px;
            border-bottom: 1px solid #00a07a;
        }

        .why-choose-detail-p {
            font-size: 0.8rem;
            color: #4b5563;
            text-align: right;
            border-bottom: 1px solid #00a07a;
        }

        .why-choose-detail-p:nth-last-child {
            border-bottom: none;
        }

        /* Right Section: Get Free Consulting Form */
        .consulting-form-section {
            background-color: #1a202c;
            /* Dark background */
            border-radius: 1rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            padding: 2.5rem;
            flex: 2.5;
            opacity: 0;
            transform: translateX(100px);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .consulting-form-heading {
            font-size: 2rem;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 2rem;
        }

        .form-grid {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .form-group {
            position: relative;
        }

        .form-input,
        .form-select {
            width: 100%;
            padding: 0.75rem 1rem;
            background-color: #2d3748;
            border: 1px solid #4a5568;
            border-radius: 0.5rem;
            color: #ffffff;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .form-input::placeholder {
            color: #a0aec0;
            /* Placeholder color */
        }

        .form-input:focus,
        .form-select:focus {
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
        }

        .form-select {
            appearance: none;
            /* Remove default arrow */
            padding-right: 2.5rem;
            /* Space for custom arrow */
        }

        .form-select-arrow {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #a0aec0;
            pointer-events: none;
            /* Allow clicks on the select itself */
        }

        .send-message-button {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            color: #1a202c;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .send-message-button:hover {
            background-color: #e2e8f0;
        }

        .send-message-button svg {
            margin-left: 0.5rem;
            width: 1rem;
            height: 1rem;
        }



        .articles-sections {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 2rem;
        }

        .articles-container {
            max-width: 1200px;
            width: 100%;
            text-align: center;
        }

        .articles-header {
            margin-bottom: 3rem;
        }

        .articles-tag {
            display: inline-flex;
            align-items: center;
            font-size: 0.875rem;
            font-weight: 500;
            color: #4b5563;
            margin-bottom: 0.5rem;
            /* background-color: #e0e0e0; */
            /* Light grey background for the tag */
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            /* Fully rounded */
            border: 2px solid #ccc;
        }

        .articles-tag-dot {
            width: 0.5rem;
            height: 0.5rem;
            background-color: #10b981;
            border-radius: 9999px;
            margin-right: 0.3rem;
        }

        .articles-heading {
            font-size: 2.5rem;
            font-weight: 700;
            color: #111827;
            line-height: 1.2;
        }

        @media (min-width: 768px) {
            .articles-heading {
                font-size: 3.5rem;
            }
        }

        .articles-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        @media (min-width: 768px) {
            .articles-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .articles-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .articles-grid {
            opacity: 0;
            transform: translateX(100px);
        }

        .article-card {
            background-color: #ffffff;
            border-radius: 0.75rem;
            /* Rounded corners for the entire card */
            overflow: hidden;
            /* Ensures image corners are rounded within the card */
            display: flex;
            flex-direction: column;
            text-align: left;
            position: relative;
            /* For absolute positioning of elements inside */
        }

        .article-image-container {
            position: relative;
            /* To position the meta info over the image */
            width: 100%;
            height: 300px;
            /* Fixed height for consistency */
            overflow: hidden;
            /* Ensures image corners are rounded */
            border-top-left-radius: 0.75rem;
            /* Match card border radius */
            border-top-right-radius: 0.75rem;
            /* Match card border radius */
        }

        .article-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: relative;
        }

        .article-meta {
            position: absolute;
            /* Position over the image */
            bottom: 0;
            left: 0;
            font-size: 0.875rem;
            color: #000;
            background-color: #ffffff;
            padding: 0.7rem 0.95rem;
            border-top-right-radius: 0.5rem;
            display: flex;
            gap: 0.5rem;
            align-items: center;
            font-size: 0.6rem;
        }

        .article-content {
            padding-left: 10px;
        }

        .article-meta-dot {
            width: 0.375rem;
            height: 0.375rem;
            background-color: #10b981;
            /* border-radius: 9999px; */
            display: inline-block;
            vertical-align: middle;
        }

        .article-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 1rem;
            line-height: 1.4;
            margin-top: 20px;
        }

        .read-more-container {
            display: flex;
            align-items: center;
            gap: 10px;
            /* Space between "Readmore" text and the icon button */
        }

        .read-more-text {
            font-size: 1rem;
            /* Adjust as needed */
            font-weight: 600;
            color: #333;
            /* Dark grey color for the text */
            text-decoration: underline;
            /* Underline the text */
            text-underline-offset: 4px;
            /* Adjust underline position */
            transition: color 0.3s ease;
        }

        .read-more-text:hover {
            color: #10b981;
            /* Change color on hover */
        }

        .icon-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            /* Size of the square button */
            height: 40px;
            /* Size of the square button */
            background-color: #10b981;
            /* Green background */
            border-radius: 8px;
            /* Rounded corners for the button */
            transition: background-color 0.3s ease;
            cursor: pointer;
            border: none;
            /* Remove default button border */
            padding: 0;
            /* Remove default button padding */
        }

        .icon-button:hover {
            background-color: #0d9a6c;
            /* Darker green on hover */
        }

        .icon-button svg {
            width: 20px;
            /* Size of the arrow icon */
            height: 20px;
            /* Size of the arrow icon */
            color: #ffffff;
            /* White color for the icon */
            stroke-width: 2;
            /* Adjust stroke thickness for the arrow */
        }

        .article-card:hover .article-image {
            transform: scale(1.05);
            /* Scale up image on card hover */
        }


        footer {
            background-color: #0a191b;
            /* Light background for the overall page */
            display: flex;
            justify-content: center;
            align-items: flex-end;
            /* Align footer to the bottom */
            min-height: auto;
        }


        .footer-container {
            background-color: #0a191b;
            /* Dark background for the footer */
            color: #e0e0e0;
            /* Light text color */
            padding: 2rem 1.5rem;
            width: 100%;
            max-width: 1400px;
            /* Max width for the footer content */
            box-sizing: border-box;
        }

        /* Top Section: Logo, Line, and Social Icons */
        .footer-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 2rem;
            /* Removed border-bottom here as the line is now a separate element */
            margin-bottom: 2rem;
            padding: 0 30px;
            flex-wrap: wrap;
            /* Allow wrapping on smaller screens */
            gap: 1rem;
            /* Space between items when wrapped */
        }

        .footer-logo {
            width: 150px;
            display: flex;
            align-items: center;
            font-size: 1.8rem;
            font-weight: 700;
            color: #10b981;
            /* Green color for Humace */
            flex-shrink: 0;
            /* Prevent logo from shrinking */
        }

        .footer-logo img {
            width: 100%;
        }

        .footer-logo-icon {
            width: 35px;
            height: 35px;
            background-color: #10b981;
            /* Green background for the icon */
            border-radius: 50%;
            margin-right: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0a191b;
            /* Dark color for the placeholder icon */
            font-size: 1.2rem;
        }

        .footer-line {
            flex-grow: 1;
            /* Make the line take up available space */
            height: 1px;
            background-color: rgba(255, 255, 255, 0.1);
            /* Subtle line color */
            margin: 0 1.5rem;
            /* Space on both sides of the line */
            min-width: 50px;
            /* Ensure line is visible even if content is short */
        }

        @media (max-width: 767px) {
            .footer-line {
                display: none;
                /* Hide line on smaller screens if it breaks layout */
            }
        }

        .social-icons {
            display: flex;
            gap: 0.75rem;
            flex-shrink: 0;
            /* Prevent social icons from shrinking */
        }

        .social-icon-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: #ffffff;
            /* White background for the icons */
            border-radius: 50%;
            color: #0a191b;
            /* Dark color for the icon itself */
            font-size: 1rem;
            text-decoration: none;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .social-icon-link:hover {
            background-color: #e0e0e0;
            /* Slightly darker white on hover */
            color: #0a191b;
        }

        /* Main Footer Content Grid */
        .footer-main-content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2.5rem;
            margin-bottom: 2.5rem;
            padding: 20px 30px;
        }

        @media (min-width: 768px) {
            .footer-main-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .footer-main-content {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .footer-section h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: #10b981;
            /* Green color for section titles */
            margin-bottom: 1rem;
        }

        .footer-section p,
        .footer-section a {
            font-size: 0.95rem;
            color: #b0b0b0;
            /* Lighter grey for content text */
            text-decoration: none;
            line-height: 1.6;
            transition: scale 0.3s;
            margin-bottom: 5px;
        }

        .footer-section a:hover {
            color: #10b981;
            /* Green on hover for links */
            scale: 1.05;
        }

        .footer-section ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            /* Use grid for two columns */
            grid-template-columns: 1fr;
            /* Default to one column */
            gap: 0.5rem;
            /* Gap between list items */
        }

        @media (min-width: 768px) {

            /* Adjust breakpoint as needed for two columns */
            .footer-section ul.company-links {
                grid-template-columns: 1fr 1fr;
                /* Two columns for company links */
                column-gap: 1.5rem;
                /* Space between columns */
            }
        }

        .footer-section ul li {
            margin-bottom: 0;
            /* Remove individual margin as gap handles spacing */
        }

        .footer-section ul li a {
            display: flex;
            align-items: center;
            width: 170px;
        }

        .footer-section ul li a::before {
            content: '>';
            /* Custom bullet point */
            margin-right: 0.5rem;
            color: #10b981;
            /* Green color for the bullet */
            font-weight: 700;
        }

        /* Newsletter Subscription */
        .newsletter-form {
            display: flex;
            /* Changed to flex for horizontal layout */
            flex-direction: row;
            /* Arrange items in a row */
            gap: 0;
            /* Remove gap between input and button */
            border: 1px solid rgba(255, 255, 255, 0.2);
            /* Add border to the container */
            border-radius: 0.5rem;
            /* Apply border-radius to the container */
            overflow: hidden;
            /* Ensure inner elements conform to border-radius */
        }

        .newsletter-input {
            flex-grow: 1;
            /* Allow input to take available space */
            padding: 0.75rem 1rem;
            background-color: #1a2c2e;
            /* Darker input background */
            border: none;
            /* Remove individual border as it's on the container */
            border-radius: 0;
            /* Remove individual border-radius */
            color: #e0e0e0;
            font-size: 0.95rem;
            outline: none;
            box-sizing: border-box;
        }

        .newsletter-input::placeholder {
            color: #888;
        }

        .newsletter-input:focus {
            /* Border color will be on the container now */
        }

        .newsletter-submit-button {
            padding: 0.75rem 1rem;
            background-color: #10b981;
            /* Green submit button */
            color: #0a191b;
            /* Dark text for button */
            border: none;
            border-radius: 0;
            /* Remove individual border-radius */
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
            flex-shrink: 0;
            /* Prevent button from shrinking */
        }

        .newsletter-submit-button:hover {
            background-color: #0d9a6c;
        }

        /* Bold phone number in Say Hello section */
        .footer-section .phone-number {
            font-weight: 700;
            /* Make phone number bold */
            color: #e0e0e0;
            /* Ensure it's light colored */
        }

        /* Bottom Section: Copyright and Legal Links */
        .footer-bottom {
            background-color: #0a191b;
            /* Same dark background as footer */
            padding-top: 1.5rem;
            /* Removed border-top here as the inner container will have it */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* Center content vertically */
            gap: 1rem;
            text-align: center;
            padding-bottom: 0;
            /* Remove padding-bottom from outer container */
        }

        .footer-bottom-inner {
            background-color: #1a2c2e;
            /* Slightly lighter dark background */
            border-radius: 0.75rem;
            /* Rounded corners */
            padding: 1.25rem 1.5rem;
            /* Padding inside the new container */
            width: calc(100% - 3rem);
            /* Adjust width to account for padding of parent */
            max-width: 1200px;
            /* Max width for the inner container */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            box-sizing: border-box;
        }

        @media (min-width: 768px) {
            .footer-bottom-inner {
                flex-direction: row;
            }
        }

        .footer-copyright {
            font-size: 0.85rem;
            color: #888;
            /* Darker grey for copyright text */
            margin: 0;
            /* Remove default paragraph margin */
        }

        .footer-legal-links {
            display: flex;
            gap: 0.75rem;
            /* Reduced gap for pipe separator */
            align-items: center;
            /* Align items for vertical centering of pipe */
        }

        .footer-legal-links a {
            font-size: 0.85rem;
            color: #888;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-legal-links a:hover {
            color: #10b981;
        }

        .footer-legal-links span.separator {
            color: #888;
            /* Color for the pipe separator */
            font-size: 0.85rem;
        }