/* --- Provided CSS Styles --- */
        html{
            font-size:16px;
            width: 100dvw;
            /* Scrollbar hiding for html */
            overflow-y: scroll;
            scrollbar-width: none; /* For Firefox */
            -ms-overflow-style: none; /* For IE and Edge legacy */
        }

        /* Scrollbar hiding for html (Webkit browsers) */
        html::-webkit-scrollbar {
            display: none;
        }

        body {
            width: 100dvw;
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f3f4f6; /* bg-gray-100 */
            color: #374151; /* default text color */
            /* Scrollbar hiding for body */
            overflow-y: scroll;
            scrollbar-width: none; /* For Firefox */
            -ms-overflow-style: none; /* For IE and Edge legacy */
        }

        /* Scrollbar hiding for body (Webkit browsers) */
        body::-webkit-scrollbar {
            display: none;
        }

        .container {
            max-width: 1200px; /* equivalent to Tailwind container with max-width */
            margin-left: auto;
            margin-right: auto;
            /* Adjusted padding for better mobile display */
            padding-left: 1rem; /* px-4 */
            padding-right: 1rem; /* px-4 */
        }

        /* Header */
        .site-header {
            background-color: #028d9b; /* bg-custom-teal-dark */
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); /* shadow-md */
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 1rem; /* py-4 */
            padding-bottom: 1rem; /* py-4 */
        }

        .navbar-brand {
            display: flex;
            align-items: center;
        }

        .logo {
            height: 2.5rem; /* h-10 */
            margin-right: 0.5rem; /* mr-2 */
        }

        .brand-text {
            font-size: 1.25rem; /* text-xl */
            font-weight: 700; /* font-bold */
            color: #ffffff; /* text-white */
        }

        .navbar-links {
            display: none; /* hidden by default, will be shown on larger screens */
            align-items: center;
            gap: 1.5rem; /* space-x-6 */
        }

        .navbar-links a {
            color: #ffffff; /* text-white */
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .navbar-links a:hover {
            color: #e5e7eb; /* hover:text-gray-200 */
        }

        .consulting-button {
            background-color: #00bfb3; /* bg-custom-teal-light */
            color: #ffffff; /* text-white */
            padding: 0.5rem 1rem; /* px-4 py-2 */
            border-radius: 9999px; /* rounded-full */
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .consulting-button:hover {
            background-color: #009688; /* hover:bg-custom-teal-lighter-darker */
        }

        .mobile-menu-button {
            display: block; /* shown by default */
            margin-right: 1rem; /* Added margin to move it left */
        }

        .mobile-menu-button .menu-toggle {
            color: #ffffff; /* text-white */
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
        }

        .mobile-menu-button .menu-toggle:hover {
            color: #e5e7eb; /* hover:text-gray-200 */
        }

        /* Explicitly set SVG stroke color to white and define size */
        .mobile-menu-button .menu-toggle svg {
            stroke: #ffffff;
            width: 24px; /* Explicitly set width */
            height: 24px; /* Explicitly set height */
        }

        .mobile-nav-links {
            background-color: #028d9b; /* bg-custom-teal-dark */
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); /* shadow-md */
            padding-bottom: 1rem;
            /* Removed display: none; here to make it visible by default */
        }

        .mobile-nav-links.hidden {
            display: none; /* Keep this rule for toggling visibility with JS */
        }

        .mobile-nav-links a {
            display: block;
            padding: 0.75rem 1.5rem; /* px-6 py-3 */
            color: #ffffff; /* text-white */
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .mobile-nav-links a:hover {
            background-color: #016a74; /* hover:bg-custom-teal-darker */
        }

        .mobile-consulting-button {
            display: block;
            padding: 0.75rem 1.5rem; /* px-6 py-3 */
            background-color: #00bfb3; /* bg-custom-teal-light */
            color: #ffffff; /* text-white */
            text-align: center;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .mobile-consulting-button:hover {
            background-color: #009688; /* hover:bg-custom-teal-lighter-darker */
        }

        /* Media query for larger screens (md breakpoint) */
        @media (min-width: 768px) {
            .navbar-links {
                display: flex; /* show on md and larger */
            }

            .mobile-menu-button {
                display: none; /* hide on md and larger */
            }

            .mobile-nav-links {
                display: none !important; /* ensure hidden on md and larger */
            }
            /* Adjusted container padding for larger screens */
            .container {
                padding-left: 1.5rem; /* px-6 */
                padding-right: 1.5rem; /* px-6 */
            }
        }

        /* Hero Section */
        .hero-section {
            min-height: 100vh; /* Full height on larger screens */
            width: 100%;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
        }

        @media (max-width: 768px) {
            .hero-section {
                min-height: 50vh; /* 50% height on smaller screens */
            }
        }

        .slideshow-container {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .mySlides {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }

        .mySlides.active {
            opacity: 1;
        }

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

        .overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.5); /* bg-black opacity-50 */
            z-index: 10;
        }

        .hero-content {
            position: relative;
            z-index: 15;
            padding-top: 6rem; /* py-24 */
            padding-bottom: 6rem; /* py-24 */
            /* Padding handled by the .container class */
            max-width: 100%; /* container */
            margin-left: auto;
            margin-right: auto;
        }

        .hero-content h1 {
            font-size: 2.25rem; /* text-4xl */
            line-height: 1.25; /* leading-tight */
            font-weight: 700; /* font-bold */
            margin-bottom: 1rem; /* mb-4 */
        }

        @media (min-width: 768px) {
            .hero-content h1 {
                font-size: 3.75rem; /* md:text-6xl */
            }
        }

        .hero-content p {
            font-size: 1.25rem; /* text-xl */
            margin-bottom: 2rem; /* mb-8 */
        }

        @media (min-width: 768px) {
            .hero-content p {
                font-size: 1.5rem; /* md:text-2xl */
            }
        }

        .hero-button {
            background-color: #00bfb3; /* bg-custom-teal-light */
            color: #ffffff; /* text-white */
            padding: 0.75rem 2rem; /* px-8 py-3 */
            border-radius: 9999px; /* rounded-full */
            text-decoration: none;
            transition: background-color 0.3s ease;
            display: inline-block; /* To apply padding and margin correctly */
        }

        .hero-button:hover {
            background-color: #009688; /* hover:bg-custom-teal-lighter-darker */
        }

        .dots-container {
            position: absolute;
            bottom: 50px; /* Adjusted position lower */
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            z-index: 20; /* Above the overlay and waves */
        }

        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .dot.active, .dot:hover {
            background-color: #717171;
        }

        /* Navigation arrows */
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.1s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            z-index: 20; /* Above the overlay */
        }

        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }
        .prev{
            left: 0;
            border-radius: 3px 0 0 3px;
        }

        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
            color:#009688;
        }
        .prev:active, .next:active{
            background-color: #016a74;
            color:white;
        }

        .wave-container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 10; /* Below text overlay, above slideshow */
            line-height: 0; /* Remove extra space below SVG */
        }

        .wave-container svg {
            display: block; /* Ensure SVG takes up its defined space */
            width: 100%; /* Make SVG responsive */
            height: auto; /* Maintain aspect ratio */
        }

        /* Services Section */
        .services-section {
            padding-top: 4rem; /* py-16 */
            padding-bottom: 4rem; /* py-16 */
            background-color: #f3f4f6; /* bg-gray-100 */
            text-align: center;
        }

        .services-section h2 {
            font-size: 1.875rem; /* text-3xl */
            font-weight: 700; /* font-bold */
            color: #1f2937; /* text-gray-800 */
            margin-bottom: 3rem; /* mb-12 */
        }

        .services-grid {
            display: grid;
            grid-template-columns: 1fr; /* Default to single column */
            gap: 2rem; /* gap-8 */
        }

        @media (min-width: 768px) { /* md breakpoint */
            .services-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 columns on md */
            }
        }

        @media (min-width: 1024px) { /* lg breakpoint */
            .services-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 columns on lg */
            }
        }

        .service-item {
            background-color: #ffffff; /* bg-white */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
            padding: 2rem; /* p-8 */
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .service-icon {
            font-size: 3rem;
            color: #028d9b; /* dark teal */
            margin-bottom: 1rem;
        }

        .service-item h3 {
            font-size: 1.25rem; /* text-xl */
            font-weight: 600; /* font-semibold */
            color: #374151; /* text-gray-700 */
            margin-bottom: 1rem; /* mb-4 */
        }

        .service-item p {
            color: #4b5563; /* text-gray-600 */
            text-align: center;
        }

        /* About Section */
        .about-section {
            padding-top: 4rem; /* py-16 */
            padding-bottom: 4rem; /* py-16 */
            background-color: #ffffff; /* bg-white */
            text-align: center;
        }

        .about-section h2 {
            font-size: 1.875rem; /* text-3xl */
            font-weight: 700; /* font-bold */
            color: #1f2937; /* text-gray-800 */
            margin-bottom: 3rem; /* mb-12 */
        }

        .about-section p {
            color: #4b5563; /* text-gray-600 */
            max-width: 48rem; /* max-w-3xl */
            margin-left: auto;
            margin-right: auto;
        }

        /* Contact Section */
        .contact-section {
            padding-top: 4rem; /* py-16 */
            padding-bottom: 4rem; /* py-16 */
            background-color: #f3f4f6; /* bg-gray-100 */
            text-align: center;
        }

        .contact-section h2 {
            font-size: 1.875rem; /* text-3xl */
            font-weight: 700; /* font-bold */
            color: #1f2937; /* text-gray-800 */
            margin-bottom: 3rem; /* mb-12 */
        }

        .contact-section p {
            color: #4b5563; /* text-gray-600 */
            max-width: 48rem; /* max-w-3xl */
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 2rem; /* mb-8 */
        }

        .contact-button-container {
            display: flex;
            justify-content: center;
        }

        .contact-button {
            background-color: #00bfb3; /* bg-custom-teal-light */
            color: #ffffff; /* text-white */
            padding: 0.75rem 2rem; /* px-8 py-3 */
            border-radius: 9999px; /* rounded-full */
            text-decoration: none;
            transition: background-color 0.3s ease;
            display: inline-block;
        }

        .contact-button:hover {
            background-color: #009688; /* hover:bg-custom-teal-lighter-darker */
        }

        /* Footer */
        .site-footer {
            background-color: #1f2937; /* bg-gray-800 */
            color: #d1d5db; /* text-gray-300 */
            padding-top: 3rem; /* py-12 */
            padding-bottom: 3rem; /* py-12 */
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1fr; /* Default to single column */
            gap: 2rem; /* gap-8 */
        }

        @media (min-width: 768px) { /* md breakpoint */
            .footer-grid {
                grid-template-columns: repeat(3, 1fr); /* 3 columns on md */
            }
        }

        .footer-grid h3 {
            font-size: 1.125rem; /* text-lg */
            font-weight: 600; /* font-semibold */
            color: #ffffff; /* text-white */
            margin-bottom: 1rem; /* mb-4 */
        }

        .footer-grid p {
            margin-bottom: 0.5rem; /* mb-2 */
        }

        .icon-margin {
            margin-right: 0.5rem; /* mr-2 */
        }

        .map-container {
            border-radius: 0.5rem; /* rounded-lg */
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
        }

        .map-container iframe {
            width: 100%; /* Ensure iframe is full width of its container */
            height: 200px; /* Adjust height as needed for mobile */
        }

        .social-icons {
            display: flex;
            gap: 1rem; /* space-x-4 */
        }

        .social-icon-link {
            color: #d1d5db; /* text-gray-300 */
            transition: color 0.3s ease;
        }

        .social-icon-link:hover {
            color: #009688; /* hover:text-white */
        }

        .social-icon {
            font-size: 1.5rem; /* text-2xl */
        }

        .copyright {
            margin-top: 2rem; /* mt-8 */
            text-align: center;
            color: #6b7280; /* text-gray-500 */
            font-size: 0.875rem; /* text-sm */
        }

        /* Custom colors for consistency */
        .text-custom-teal-dark {
            color: #028d9b;
        }

        .bg-custom-teal-dark {
            background-color: #028d9b;
        }

        .hover\:bg-custom-teal-darker:hover {
            background-color: #016a74; /* A darker shade of #028d9b */
        }
        .bg-custom-teal-light {
            background-color: #00bfb3; /* Using the other requested color for a lighter shade */
        }
        .text-custom-teal-light {
            color: #00bfb3; /* Using the other requested color for a lighter shade */
        }

        /* New hover class for the lighter teal buttons */
        .hover\:bg-custom-teal-lighter-darker:hover {
            background-color: #009688; /* A darker shade of #00bfb3 */
        }
        .anchor{
            text-decoration: none;
            color:white;
        }
        .anchor:hover{
            color:#009688;
        }
        /* --- End of Provided CSS Styles --- */