/* Preloader styles */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #2c3e50;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #preloader .spinner {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Adjust font sizes and layout for smaller screens */
        @media (max-width: 768px) {
            .hero-section {
                padding: 20px;
                text-align: center;
            }

            .hero-content h1 {
                font-size: 1.5rem;
                /* Reduce font size for smaller screens */
            }

            .hero-content p {
                font-size: 1rem;
                /* Adjust paragraph font size */
            }

            .hero-content .btn {
                padding: 10px 25px;
                /* Reduce padding for button */
                font-size: 1rem;
                /* Adjust button font size */
            }
        }

        /* Further adjustments for extra small screens */
        @media (max-width: 576px) {
            .hero-content h1 {
                font-size: 1.25rem;
            }

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

            .hero-content .btn {
                padding: 8px 20px;
                font-size: 0.95rem;
            }
        }

        /* Navbar */
        .navbar {
            padding: 15px 0;
            background-color: #2c3e50;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand img {
            max-width: 50px;
            margin-right: 10px;
        }

        .navbar-nav .nav-item {
            margin-left: 20px;
        }

        .navbar-nav .nav-link {
            color: #ecf0f1;
            padding: 10px 15px;
            transition: all 0.3s ease;
        }

        .navbar-nav .nav-link:hover {
            color: #1abc9c;
        }

        /* Navbar Toggler Button Customization */
        .custom-toggler {

            /* Add a stylish background color */
            border: none;
            /* Remove default border */
            padding: 8px 12px;
            /* Add padding for better spacing */
            border-radius: 50px;
            /* Round the corners */
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            /* Add shadow for depth */
            transition: all 0.3s ease;
            /* Smooth hover effect */
        }

        .custom-toggler:hover {
            background-color: goldenrod;
            /* Darken on hover for effect */
            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
            /* Enhance shadow on hover */
        }

        /* Custom Icon Styling */
        .custom-toggler .navbar-toggler-icon {
            background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba%281, 1, 1, 0.7%29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
            filter: brightness(0) invert(1);
            /* Ensures icon is visible on darker button */
            width: 24px;
            height: 24px;
        }

        /* Service Cards */
        .service-card {
            border: 2px solid #ecf0f1;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
        }

        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
        }

        .service-card i {
            font-size: 3rem;
            color: #3498db;
        }

        /* Our Team Section */
        .team-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .team-card:hover {
            transform: translateY(-10px);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            /* Shadow effect like services section */
        }

        .team-card img {
            transition: transform 0.3s ease;
        }

        .team-card:hover img {
            transform: scale(1.1);
        }

        /* Testimonial Section */
        .testimonial-item {
            text-align: center;
            padding: 30px;
            border-radius: 10px;
            background: #f8f9fa;
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .testimonial-item:hover {
            transform: scale(1.05);
        }

        .testimonial-item img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 50%;
            margin-bottom: 20px;
        }

        .testimonial-item h5 {
            font-weight: bold;
            margin-top: 15px;
        }

        .testimonial-item .fst-italic {
            color: #555;
        }

        /* Footer */
        footer {
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
        }

        /* Mobile Navbar Styles */
        @media (max-width: 767px) {
            .navbar-nav {
                text-align: center;
            }

            .navbar-nav .nav-item {
                margin: 10px 0;
            }

            .hero-content h1 {
                font-size: 2.5rem;
            }

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

        /* Typing animation styles */
        .animated-text-container {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            border-right: 3px solid #f39c12;
            /* Blinking cursor */
            animation: typing 4s steps(30, end), blink-caret 0.75s step-end infinite;
        }

        /* Keyframes for typing */
        @keyframes typing {
            from {
                width: 0;
            }

            to {
                width: 100%;
            }
        }

        /* Blinking cursor */
        @keyframes blink-caret {
            50% {
                border-color: transparent;
            }
        }


        #contact .google-map {
            margin-top: 20px;
        }

        .contact-form .form-group {
            margin-bottom: 15px;
        }

        .contact-form button {
            margin-top: 20px;
        }

        /* Appointment Section Styling */
        #appointment {
            padding: 60px 0;
            background-color: #f9f9f9;
        }

        #appointment h2 {
            font-size: 2rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 30px;
            text-align: center;
        }

        /* Form Styling */
        .appointment-form .form-group {
            margin-bottom: 15px;
        }

        .appointment-form .form-control {

            padding: 10px;
            border-radius: 5px;
            font-size: 1rem;
            width: 100%;
        }

        .appointment-form button {
            margin-top: 20px;
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .appointment-form button:hover {
            background-color: #0056b3;
        }

        /* Google Map Integration for Appointment Section */
        #appointment .google-map {
            margin-top: 20px;
        }

        /* Responsive Design for Appointment Section */
        @media (max-width: 767px) {
            #appointment h2 {
                font-size: 1.8rem;
            }

            .appointment-form .form-group {
                margin-bottom: 15px;
            }

            .appointment-form button {
                width: 100%;
                padding: 12px 20px;
            }
        }

        /* WhatsApp Floating Button */
        .whatsapp-float {
            position: fixed;
            bottom: 90px;
            right: 40px;
            background-color: #25D366;
            border-radius: 50%;
            padding: 10px;
            font-size: 5px;
            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
            color: white;
            text-align: center;
            z-index: 1000;
            transition: background-color 0.3s ease;
        }

        .whatsapp-float:hover {
            background-color: #128C7E;
        }

        .whatsapp-float i {
            font-size: 30px;
        }

        /* Style for the scroll-to-top button */
        #scrollToTopBtn {
            position: fixed;
            bottom: 20px;
            right: 40px;
            background-color: #27ae60;
            /* Change color to match your website theme */
            border: none;
            color: white;
            padding: 15px;
            font-size: 15px;
            border-radius: 50%;
            display: none;
            /* Initially hidden */
            cursor: pointer;
            z-index: 1000;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        #scrollToTopBtn:hover {
            background-color: #1d8e47;
            /* Darker shade on hover */
        }

        /* Remove border for accordion */
        .accordion-item,
        .accordion-header,
        .accordion-button,
        .accordion-body {
            border: none;
        }

        /* Remove shadow */
        .team-card {
            box-shadow: none;
        }

        /* Optionally, remove the rounded corners if needed */
        .accordion-item,
        .accordion-header,
        .accordion-button,
        .team-card {
            border-radius: 0;
        }
        /* Style for the Load More button */
#loadMoreBtn {
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#loadMoreBtn:hover {
    background-color: #2ecc71;
    /* Lighter green for hover effect */
    transform: scale(1.05);
    /* Slight zoom effect on hover */
}

/* Style for additional content */
#additionalContent {
    margin-top: 20px;
    padding: 15px;
    background-color: #f1f1f1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}