<style>
        body {
            font-family: 'Inter', sans-serif;
            color: #333;
        }
        .bg-delvani-green {
            background-color: #465f1e; /* Updated to the new green color */
        }
        .text-delvani-green {
            color: #465f1e; /* Updated to the new green color */
        }
        .border-delvani-green {
            border-color: #465f1e; /* Updated to the new green color */
        }
        .hero-slider {
            position: relative;
            width: 100%;
            overflow: hidden;
            height: 500px; /* Slider height set to 500px */
        }
        .hero-slide {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            display: none; /* Hidden by default */
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 1s ease-in-out;
            opacity: 0;
        }
        .hero-slide.active {
            display: block;
            opacity: 1;
        }
        .slider-overlay {
    background: linear-gradient(to right, rgba(70, 95, 30, 0.5), rgba(56, 142, 60, 0.5));
}
        .section-heading {
            position: relative;
            padding-bottom: 1rem;
            margin-bottom: 2rem;
        }
        .section-heading::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: #465f1e; /* Updated to the new green color */
            border-radius: 2px;
        }
        .service-card {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        /* Adjusted footer styles */
        .footer-link {
            color: #4A5568; /* Darker gray for links on white background */
        }
        .footer-link:hover {
            color: #465f1e; /* Updated to the new green color */
        }
        .dark-footer {
            background-color: #1a1a1a; /* Dark background */
            color: #ccc; /* Light text for dark background */
        }
        .dark-footer h3 {
            color: #fff; /* White headings for dark background */
        }

        /* Mobile Navigation Overlay */
        .mobile-nav-overlay {
            position: fixed;
            top: 0;
            right: 0; /* Align to the right */
            width: 100%; /* Full screen width */
            height: 100%;
            background-color: #fff; /* White background */
            z-index: 50;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transform: translateX(100%); /* Start off-screen to the right */
            transition: transform 0.3s ease-in-out;
            box-shadow: -5px 0 15px rgba(0,0,0,0.2); /* Add shadow for depth */
        }
        .mobile-nav-overlay.active {
            transform: translateX(0); /* Slide in */
        }
        .mobile-nav-overlay .close-btn {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            font-size: 2.5rem;
            color: #333; /* Black text */
            cursor: pointer;
        }
        .mobile-nav-overlay ul li {
            margin-bottom: 1.5rem;
        }
        .mobile-nav-overlay ul li a {
            font-size: 2rem;
            color: #333; /* Black text */
            transition: color 0.3s ease-in-out;
        }
        .mobile-nav-overlay ul li a:hover {
            color: #465f1e; /* Updated to the new green color */
        }


        .slider-dots {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.5rem;
            z-index: 3; /* Ensure dots are above slides */
        }
        .dot {
            width: 10px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
        }
        .dot.active {
            background-color: #465f1e; /* Updated to the new green color */
        }

        /* Scroll to Top Button */
        #scrollToTopBtn {
            display: none; /* Hidden by default */
            position: fixed; /* Fixed/sticky position */
            bottom: 20px; /* Place the button at the bottom of the page */
            right: 30px; /* Place the button 30px from the right */
            z-index: 99; /* Make sure it does not overlap */
            border: none; /* Remove borders */
            outline: none; /* Remove outline */
            background-color: #465f1e; /* Updated to the new green color */
            color: white; /* Text color */
            cursor: pointer; /* Add a mouse pointer on hover */
            width: 50px; /* Set fixed width */
            height: 50px; /* Set fixed height */
            border-radius: 50%;
            font-size: 24px; /* Increase icon size */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
            transition: background-color 0.3s, transform 0.3s;
            display: flex; /* Use flexbox for centering */
            align-items: center; /* Center vertically */
            justify-content: center; /* Center horizontally */
        }

        #scrollToTopBtn:hover {
            background-color: #388E3C; /* Darker green on hover (adjust if needed to match new green palette) */
            transform: translateY(-2px);
        }

        /* Preloader Styles */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff; /* White background for preloader */
            z-index: 9999; /* Ensure it's on top of everything */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.7s ease-out; /* Smooth fade-out */
            opacity: 1;
        }

        #preloader.hidden {
            opacity: 0;
            visibility: hidden;
        }

        @keyframes spin-clockwise {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes spin-counter-clockwise {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-360deg); }
        }

        .preloader-gear-1 {
            animation: spin-clockwise 2s linear infinite;
        }

        .preloader-gear-2 {
            animation: spin-counter-clockwise 2s linear infinite;
            margin-left: -20px; /* Overlap slightly for grinding effect */
        }

 /* Testimonial Slider Styles */
        .testimonial-slider-container {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .testimonial-slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .testimonial-card-wrapper {
            flex: 0 0 33.3333%; /* Show 3 cards at a time for desktop */
            padding: 1rem;
            box-sizing: border-box;
        }

        @media (max-width: 1024px) {
            .testimonial-card-wrapper {
                flex: 0 0 50%; /* Show 2 cards at a time for tablet */
            }
        }

        @media (max-width: 768px) {
            .testimonial-card-wrapper {
                flex: 0 0 100%; /* Show 1 card at a time for mobile */
            }
        }

        .testimonial-card {
            background-color: #fff;
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            /* Kept font change */
        }

        .testimonial-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #465f1e;
            color: white;
            font-size: 2.5rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
        }

        .testimonial-quote {
            font-style: normal;
            font-family: Arial, sans-serif; /* Changed to Arial */
            color: #555;
            margin-bottom: 1rem;
        }

        .testimonial-name {
            font-weight: bold;
            color: #333;
        }

        .testimonial-designation {
            color: #777;
            font-size: 0.9rem;
        }

        /* Removed .testimonial-nav-button styles as buttons are removed */

        .testimonial-dots {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
            gap: 0.5rem;
        }

        .testimonial-dots .dot {
            background-color: #ccc;
        }

        .testimonial-dots .dot.active {
            background-color: #465f1e;
        }

        /* New styles for active testimonial card */
        .testimonial-card.active-middle {
            background-color: #465f1e; /* Delvani Green */
            color: white; /* All text color */
        }

        .testimonial-card.active-middle .testimonial-quote,
        .testimonial-card.active-middle .testimonial-name,
        .testimonial-card.active-middle .testimonial-designation {
            color: white;
        }

        /* Style for the testimonial avatar when its parent card is active-middle */
        .testimonial-card.active-middle .testimonial-avatar {
            background-color: white; /* White background for the avatar */
            color: #465f1e; /* Delvani Green text color for contrast */
        }

        /* Service Slider Styles */
        .service-slider-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            background-color: #fff;
        }

        .service-slider {
            display: flex;
            transition: transform 0.7s ease-in-out;
        }

        .service-slide {
            flex: 0 0 100%; /* Each slide takes full width of container */
            display: flex;
            flex-direction: column; /* Stack image and text on small screens */
            align-items: center;
            justify-content: center;
            padding: 2rem;
            box-sizing: border-box;
        }

        @media (min-width: 768px) {
            .service-slide {
                flex-direction: row; /* Side-by-side on larger screens */
                height: 450px; /* Fixed height for service slides */
            }
        }

        .service-slide-image {
            width: 100%;
            height: 250px; /* Fixed height for image on small screens */
            background-size: cover;
            background-position: center;
            border-radius: 0.5rem;
            flex-shrink: 0; /* Prevent image from shrinking */
        }

        @media (min-width: 768px) {
            .service-slide-image {
                width: 50%;
                height: 100%; /* Image takes full height of slide */
            }
        }

        .service-slide-content {
            width: 100%;
            padding: 1rem 0; /* Adjust padding for content */
        }

        @media (min-width: 768px) {
            .service-slide-content {
                width: 50%;
                padding: 0 2rem; /* Adjust padding for content */
            }
        }

        .service-slider-dots {
            position: relative; /* Changed to relative for below slider */
            margin-top: 1.5rem; /* Space between slider and dots */
            display: flex;
            justify-content: center;
            gap: 0.75rem;
            z-index: 10;
        }

        .service-dot {
            width: 12px;
            height: 12px;
            background-color: #ccc;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
        }

        .service-dot.active {
            background-color: #465f1e;
        }

        /* About Us Gallery Carousel Styles */
        .about-us-gallery {
            position: relative;
            overflow: hidden;
            border-radius: 0.5rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            height: 400px; /* Fixed height for the gallery on desktop */
        }

        .about-us-slide-container {
            display: flex;
            transition: transform 0.7s ease-in-out;
            width: 100%; /* Ensure container takes full width */
            height: 100%; /* Occupy full height of parent gallery */
        }

        .about-us-slide-container img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Cover the area, crop if necessary */
            border-radius: 0.25rem; /* Slightly rounded corners for images */
            flex-shrink: 0; /* Prevent images from shrinking */
        }
        
        /* Overlay for About Us Gallery */
        .about-us-gallery::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(70, 95, 30, 0.4); /* #465f1e with 40% opacity */
            z-index: 1; /* Ensure it's above images but below any controls if added */
            border-radius: 0.5rem; /* Match parent border-radius */
        }

        @media (max-width: 767px) {
            .about-us-gallery {
                height: 300px; /* Adjusted height for mobile */
            }
        }

        /* Social Icons in Header */
        .header-social-icons .social-icon {
            color: #465f1e; /* Delvani green */
            font-size: 1.5rem; /* Adjust size as needed */
            transition: color 0.3s ease-in-out;
            margin-left: 1rem; /* Space between icons */
        }

        .header-social-icons .social-icon:hover {
            color: #388E3C; /* Darker green on hover */
        }
 /* General Body Styling */
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
            color: #343a40;
        }

        /* WhatsApp Button and Text Bubble Container */
        .whatsapp-container {
            position: fixed;
            bottom: 20px;
            left: 20px; /* Positioned to the left */
            display: flex; /* Side-by-side arrangement */
            align-items: center; /* Vertically center items */
            z-index: 1000;
            cursor: pointer;
            /* Removed bounceUpDown animation */
        }

        /* WhatsApp Button Styling */
        .whatsapp-button {
            background-color: #25D366;
            color: white;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, outline 0.3s ease-in-out;
            outline: 3px solid transparent; /* Initial transparent outline */
            outline-offset: 2px; /* Space between icon and outline */
            position: relative; /* Needed for shine effect */
            overflow: hidden; /* Hide overflow of shine */
            animation: shineButton 2.5s infinite linear; /* Apply shine animation */
        }

        /* Shine Keyframe Animation for Button */
        @keyframes shineButton {
            0% {
                background-position: -100px;
            }
            100% {
                background-position: 100px;
            }
        }

        .whatsapp-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%; /* Start off-screen to the left */
            width: 70%; /* INCREASED WIDTH OF THE SHINE */
            height: 100%;
            background: rgba(255, 255, 255, 0.3); /* White translucent shine */
            transform: skewX(-20deg); /* Angle the shine */
            pointer-events: none; /* Allow clicks to pass through */
            background: linear-gradient(to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.5) 50%, /* INCREASED OPACITY */
                rgba(255, 255, 255, 0) 100%
            ); /* Gradient for a softer shine */
             animation: shineEffect 2.5s infinite linear; /* Apply the shine effect */
        }

        .whatsapp-button:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            outline-color: #25D366; /* Shine effect on hover */
            animation: none; /* Stop shine on hover if desired, or change animation */
        }
         .whatsapp-button:hover::before {
            animation: none; /* Stop shine on hover if desired */
            background: none; /* Remove shine on hover */
        }


        .whatsapp-button img {
            width: 35px;
            height: 35px;
        }

        /* Text Bubble Styling - Always visible and positioned parallel */
        .whatsapp-text-bubble {
            background-color: #ffffff;
            color: #333;
            padding: 10px 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-left: 15px; /* Space between bubble and icon */
            position: relative;
            font-size: 0.95em;
            white-space: nowrap; /* Keep text on one line */
            opacity: 1; /* Make it fully opaque */
            visibility: visible; /* Make it always visible */
            transform: translateX(0); /* Ensure it's in its final position */
            transition: none; /* No fade/slide-in animation on load */
            overflow: hidden; /* Hide overflow of shine */
            animation: shineBubble 2.5s infinite linear; /* Apply shine animation */
        }

        /* Shine Keyframe Animation for Bubble */
        @keyframes shineBubble {
            0% {
                background-position: -200px; /* Adjust based on bubble width */
            }
            100% {
                background-position: 200px; /* Adjust based on bubble width */
            }
        }

        .whatsapp-text-bubble::before {
            content: '';
            position: absolute;
            /* Adjust caret position for bubble on the left of text */
            left: -8px; /* Position the caret to the left of the bubble */
            top: 50%;
            transform: translateY(-50%) rotate(45deg); /* Center and rotate */
            width: 15px;
            height: 15px;
            background-color: #ffffff;
            border-bottom: 1px solid #eee; /* Match bubble border */
            border-left: 1px solid #eee; /* Match bubble border */
            box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for caret */
            z-index: 1; /* Ensure caret is above the shine effect if any */
        }

        .whatsapp-text-bubble::after { /* Using ::after for the shine on the bubble */
            content: '';
            position: absolute;
            top: 0;
            left: -100%; /* Start off-screen to the left */
            width: 50%; /* INCREASED WIDTH OF THE SHINE */
            height: 100%;
            background: linear-gradient(to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.6) 50%, /* INCREASED OPACITY */
                rgba(255, 255, 255, 0) 100%
            ); /* Gradient for a softer shine */
            transform: skewX(-20deg); /* Angle the shine */
            pointer-events: none; /* Allow clicks to pass through */
            animation: shineEffect 2.5s infinite linear; /* Apply the shine effect */
        }


        /* Global Shine Effect Keyframes (reused for both) */
        @keyframes shineEffect {
            0% {
                left: -50%;
            }
            100% {
                left: 100%;
            }
        }

        /* Modal Styling (Same as previous, included for completeness) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1001; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.6); /* Darker overlay */
            display: flex; /* Use flex for centering */
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .modal.show {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background-color: #ffffff;
            margin: auto;
            padding: 35px 30px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            position: relative;
            width: 90%;
            max-width: 700px;
            transform: translateY(-20px);
            transition: transform 0.3s ease-out;
            box-sizing: border-box;
        }

        .modal.show .modal-content {
            transform: translateY(0);
        }

        .close-button {
            color: #888;
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 32px;
            font-weight: normal;
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .close-button:hover,
        .close-button:focus {
            color: #333;
        }

        .modal h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #343a40;
            font-weight: 600;
            font-size: 1.8em;
        }

        /* Form Layout with Flexbox for Horizontal Arrangement */
        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 0px;
        }

        .form-group {
            flex: 1 1 calc(50% - 10px);
            min-width: 150px;
            margin-bottom: 20px;
        }

        .form-group.full-width {
            flex: 1 1 100%;
        }

        /* CAPTCHA styling */
        .captcha-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .captcha-group label {
            margin-bottom: 0;
            white-space: nowrap;
        }

        .captcha-group input {
            flex: 1;
            min-width: 80px;
        }

        #captchaDisplay {
            font-size: 1.1em;
            font-weight: 600;
            color: #28a745;
            background-color: #e2ffe8;
            padding: 8px 12px;
            border-radius: 5px;
            border: 1px dashed #28a745;
        }


        .modal form label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: #495057;
            font-size: 0.95em;
        }

        .modal form input[type="text"],
        .modal form input[type="tel"],
        .modal form input[type="email"],
        .modal form input[type="number"] {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ced4da;
            border-radius: 8px;
            font-size: 1em;
            color: #495057;
            box-sizing: border-box;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .modal form input[type="text"]:focus,
        .modal form input[type="tel"]:focus,
        .modal form input[type="email"]:focus,
        .modal form input[type="number"]:focus {
            border-color: #28a745;
            box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
            outline: none;
        }

        /* Button Styling */
        .modal form button[type="submit"] {
            background-color: #25D366; /* WhatsApp green */
            color: white;
            padding: 12px 20px; /* Medium size adjustment */
            font-size: 1.05em; /* Slightly reduced font size */
            border: none;
            border-radius: 25px; /* More rounded corners (half of typical height for pill shape) */
            cursor: pointer;
            width: auto; /* Allow width to fit content, not full width */
            display: block; /* Ensures margin auto works */
            margin: 10px auto 0 auto; /* Center the button, 10px top margin */
            font-weight: 600;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Add box-shadow to transition */
            /* Shiny effect with linear gradient and subtle shadow */
            background-image: linear-gradient(to right, #25D366, #20B351); /* Subtle gradient for depth */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 255, 255, 0.4) inset; /* Outer shadow + inner white glow */
        }

        .modal form button[type="submit"]:hover {
            background-color: #1DA851; /* Darker green on hover */
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.6) inset; /* More pronounced shadow and shine on hover */
        }

        /* --- Mobile Responsiveness --- */
        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                padding: 25px 20px;
            }

            .modal h2 {
                font-size: 1.5em;
                margin-bottom: 20px;
            }

            .form-group {
                flex: 1 1 100%; /* Stack inputs on small screens */
                margin-bottom: 15px;
            }

            .captcha-group {
                flex-direction: column;
                align-items: flex-start;
            }

            .captcha-group input {
                width: 100%;
                margin-top: 5px;
            }
        }

    </style>