/* Navigation Bar */
        /* Navbar Background */
        nav {
            background-color: rgb(6, 139, 32); /* Dark green background */
            color: white;
            padding: 10px 0;
        }

        /* Navbar Links */
        nav .navbar-nav .nav-link {
            color: white !important; /* White text for links */
            padding: 10px 15px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease; /* Smooth transition effect */
        }

        /* Navbar Links Hover Effect */
        nav .navbar-nav .nav-link:hover {
            background-color: rgb(134, 209, 30); /* Light green background on hover */
            color: rgb(6, 139, 32); /* Dark green text on hover */
            border: 2px solid rgb(6, 139, 32);
            border-radius: 5px;
        }

        /* Navbar Brand (Logo) */
        nav .navbar-brand {
            color: white;
            font-size: 1.8rem;
            font-weight: bold;
        }

        /* Navbar Toggler Button (Hamburger menu for mobile view) */
        .navbar-toggler {
            border-color: rgb(134, 209, 30) !important; /* Light green border for toggle button */
        }

        /* Active link state */
        nav .navbar-nav .nav-item.active .nav-link {
            background-color: rgb(134, 209, 30); /* Active link will have light green background */
            color: rgb(6, 139, 32); /* Active link text in dark green */
            border: 2px solid rgb(6, 139, 32);
            border-radius: 5px;
        }

        /* Ensure that the toggle icon is visible on dark background */
        .navbar-toggler-icon {
            /*background-color: rgb(134, 209, 30);*/ /* Light green color for hamburger icon */
        }

        /* Navbar Brand Hover */
        nav .navbar-brand:hover {
            color: rgb(134, 209, 30); /* Light green hover effect on brand */
        }

        /* Ensure proper alignment for mobile view */
        .navbar-collapse {
            justify-content: flex-end; /* Align the links to the right */
        }

        /* Make sure active link is correctly highlighted */
        .navbar-nav .nav-link.active {
            font-weight: bold;
            background-color: rgb(134, 209, 30); /* Background color for active link */
            color: rgb(6, 139, 32); /* Text color for active link */
        }



        /* Hero Section */
        .hero-section {
            position: relative;
            background: linear-gradient(135deg, rgb(134, 209, 30), rgb(6, 139, 32)); /* Gradient with green tones */
            background-size: cover;
            height: 400px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: white;
            overflow: hidden;
        }

        .hero-section h1 {
            font-size: 3.5rem;
            font-weight: bold;
            z-index: 1;
        }

        .hero-section p {
            font-size: 1.25rem;
        }

        /* Floating Circle Animation */
        .floating-circle {
            position: absolute;
            border-radius: 50%;
            animation: float 10s ease-in-out infinite;
        }

        /* Circle 1 (Light Green) */
        .circle1 {
            width: 120px;
            height: 120px;
            top: 20%;
            left: 10%;
            background-color: rgb(134, 209, 30); /* Light Green */
            animation-delay: 0s;
        }

        /* Circle 2 (Dark Green) */
        .circle2 {
            width: 150px;
            height: 150px;
            top: 30%;
            right: 5%;
            background-color: rgb(6, 139, 32); /* Dark Green */
            animation-delay: 3s;
        }

        /* Circle 3 (Medium Green) */
        .circle3 {
            width: 100px;
            height: 100px;
            bottom: 10%;
            left: 35%;
            background-color: rgb(51, 168, 42); /* Medium Green */
            animation-delay: 6s;
        }

        /* Circle 4 (Different Green) */
        .circle4 {
            width: 180px;
            height: 180px;
            top: 50%;
            left: 60%;
            background-color: rgb(94, 179, 24); /* Another Green shade */
            animation-delay: 8s;
        }

        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-30px) rotate(180deg);
            }
            100% {
                transform: translateY(0) rotate(360deg);
            }
        }

        /* Styling for CTA Button */
        /* Buttons */
        .cta-button {
            background-color: rgb(134, 209, 30); /* Primary green */
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            font-weight: bold;
            text-transform: uppercase;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .cta-button:hover {
            background-color: rgb(6, 139, 32); /* Darker green on hover */
            transform: scale(1.05); /* Slight enlargement on hover */
            color: rgb(255 255 255);
        }

        /* Section Styling */
        .feature-section {
            padding: 60px 0;
        }

        /*   About Us Page    */

        /* Service Cards */
        .service-card {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 30px;
            text-align: center;
            border-radius: 8px;
            background-color: #f9f9f9; /* White background for cards */
            border: 2px solid rgb(6, 139, 32); /* Green border */
            transition: all 0.3s ease-in-out;
        }

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

        .service-card .feature-icon {
            font-size: 3rem;
            color: rgb(134, 209, 30); /* Primary green for icons */
        }

        .about-section-title {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        /*   Contact Us Page    */
        /* Contact Section */
        .contact-section {
            background-color: #f9f9f9;
            padding: 60px 0;
        }

        .contact-card {
            background-color: white;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            border: 1px solid #6e8e27;
            margin:10px;
        }

        .contact-card h2 {
            color: rgb(6, 139, 32); /* Theme color for section titles */
        }

        .contact-form input, .contact-form textarea {
            margin-bottom: 15px;
            border-radius: 5px;
            padding: 10px;
            border: 1px solid #ccc;
            width: 100%;
        }

        .contact-form button {
            background-color: rgb(6, 139, 32);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-weight: bold;
        }

        .contact-form button:hover {
            background-color: rgb(134, 209, 30);
        }

        .contact-info i {
            color: rgb(6, 139, 32);
            font-size: 1.5rem;
        }

        /* Contact Info Paragraph */
        .contact-card p {
            color: #333; /* Dark text color for paragraph */
        }

        /* Social Media Icons */
        .contact-card .fab {
            font-size: 1.5rem;
            color: rgb(6, 139, 32); /* Theme color for icons */
            transition: color 0.3s ease;
        }

        .contact-card .fab:hover {
            color: rgb(134, 209, 30); /* Hover effect for icons */
        }

        .contact-card h4,p i {
            color: rgb(6, 139, 32); /* Theme color for the location pin */
        }

        /* Google Map */
        .contact-card iframe {
            border-radius: 10px; /* Optional rounded corners */
        }






        /*   Products Page    */
        .card:hover {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .card-img-top {
            height: 200px;
            object-fit: cover;
        }
        .table td, .table th {
            vertical-align: middle;
        }

        .card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .card-body {
            flex-grow: 1;
        }

        .product-card {
            border: 2px solid #6e8e27; /* Set border color to match the green theme */
            display: flex;
            flex-direction: column;
            height: 100%;
            border-radius: 10px;
            background-color: #fff;
            transition: transform 0.3s ease-in-out;
        }

        .product-card .card-body {
            flex-grow: 1;
        }

        /* Card hover effect */
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
        }

        /* Title style */
        .product-card .card-title {
            color: #6e8e27; /* Title color with your theme green */
            font-size: 1.2rem;
            font-weight: bold;
        }

        /* Button styles */
        .btn-link {
            color: #6e8e27;
            text-decoration: underline;
        }

        .btn-link:hover {
            color: #4b6f22;
        }

        /* Specifications section */
        .table-bordered td, .table-bordered th {
            border-color: #d0e1a1; /* Lighter green border for the table */
        }

        .table-striped tbody tr:nth-child(odd) {
            background-color: #f7f7f7;
        }

        /* Button styling for download */
        .btn-success {
            background-color: #6e8e27;
            border-color: #6e8e27;
            color: white;
            font-weight: bold;
        }

        .btn-success:hover {
            background-color: #6b7e24;
            border-color: #6b7e24;
        }

        /* Collapse section background */
        /*.collapse {
            background-color: #f3f3f3;
            padding: 20px;
            border-radius: 5px;
        }*/



        /*   Gallery Page    */
        /* Custom Styles for the Gallery Page */        

        /* Gallery Section */
        .gallery-section {
            background-color: #f9f9f9;
            padding: 60px 10px;
        }

        .gallery-title {
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5rem;
            color: rgb(6, 139, 32);
        }

        .gallery-item {
            margin-bottom: 30px;
            border-radius: 8px;
            overflow: hidden;
/*            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
            width: 360px;
            margin: 5px;
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        .gallery-item img {
            width: 100%;
            height: auto;
            transition: transform 0.3s ease;
            border-radius: 10px;
            border: 1px solid #6e8e27;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);            
        }

        .gallery-item img:hover {
            transform: scale(1.05); /* Zoom effect on hover */            
        }

        /* filter image */
          .gallery-item {
              margin-bottom: 20px;
            }

            .gallery-item img {
              width: 100%;
              height: auto;
            }

            .gallery {
              display: flex;
              flex-wrap: wrap;
              gap: 15px;
            }

            .filter-btns {
              margin-bottom: 20px;
            }

            .filter-btns button {
              margin: 5px;
            }

            .filter-btn {
                background-color: #6e8e27; /* Theme color */
                color: white;
                border: none;
                padding: 10px 40px;
                font-size: 1rem;
                cursor: pointer;
                margin: 0 5px;
                border-radius: 5px;
                transition: background-color 0.3s;
            }

            .filter-btn:hover {
                background-color: #4b6f22; /* Darker shade on hover */
            }

        





        /*   Certificates Page    */
        
        .certificate-thumbnail {
            display: flex;
            flex-direction: column; /* Stack the content vertically */
            justify-content: space-between; /* Ensures the image and text are spaced evenly */
            height: 100%; /* Allow full height to be taken */
            border: 2px solid rgb(6, 139, 32); /* Optional border for cards */
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            background-color: #f9f9f9; /* Background for cards */            
            padding: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .certificate-thumbnail:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* Modal Styling */
        .modal-content {
            background-color: #f9f9f9;
            border-radius: 10px;
        }

        .modal-header {
            border-bottom: 2px solid rgb(6, 139, 32);
        }

        .modal-title {
            color: rgb(255, 255, 255);
        }

        .modal-body {
            padding: 20px;
        }

        /* Custom Modal Dialog */
        .custom-modal-dialog {
            max-width: 800px; /* Adjust modal width as per your theme */
            margin: 1.75rem auto; /* Center modal */
        }

        /* Custom Modal Content */
        .custom-modal-content {
            background-color: rgb(255, 255, 255); /* White background for modal content */
            border-radius: 10px; /* Rounded corners */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
        }

        /* Custom Modal Header */
        .custom-modal-header {
            background-color: rgb(134, 209, 30); /* Light green background */
            color: rgb(255, 255, 255); /* White text */
            border-bottom: 1px solid rgb(6, 139, 32); /* Dark green border */
        }

        /* Custom Modal Body (now with green background and white text) */
        .custom-modal-body {
            background-color: rgb(6, 139, 32); /* Dark green background for modal body */
            color: rgb(255, 255, 255); /* White text */
            font-family: 'Arial', sans-serif; /* Adjust to match your site's font */
            padding: 20px;
        }

        /* Button styles */
        .custom-modal-body .btn-primary {
            background-color: rgb(134, 209, 30); /* Green background for buttons */
            border: none;
        }

        .custom-modal-body .btn-primary:hover {
            background-color: rgb(6, 139, 32); /* Dark green for button hover */
        }

        .custom-modal-header .btn-close {
            background-color: transparent;
            border: none;
        }

        /* Fallback Message Styles */
        #fallbackMessage {
            font-size: 14px;
            color: rgb(255, 255, 255); /* White text color for fallback message */
            text-align: center;
        }


        /* Section Title */
        .section-title {
            color: rgb(6, 139, 32);
            font-size: 2.5rem;
            margin-bottom: 30px;
        }

        




        /*   Home Page    */
        /* The container for the sliding images */
        .image-marquee {
            width: 100%;
            overflow: hidden; /* Hides the extra images that are out of the container */
            margin: 20px auto;
        }

        /* The container holding all the images */
        .image-container {
            display: flex;
            animation: marquee 25s linear infinite; /* The marquee animation */
        }

        /* Individual images */
        .image-container img {
            width: 300px;
            height: auto;
            transition: transform 0.3s ease;
            margin-right: 10px;
        }

        /* Enlarge image on hover */
        .image-container img:hover {
            transform: scale(1.1);
        }

        /* Keyframes for continuous scrolling animation */
        @keyframes marquee {
            0% {
                transform: translateX(0);  /* Starting point */
            }
            100% {
                transform: translateX(-100%); /* Move left by the total width of the container */
            }
        }


        /* Footer */
        footer {
            background-color: rgb(6, 139, 32); /* Dark green footer */
            color: white;
            padding: 40px 0; /* Slightly increased padding for more space */
        }

        /* Footer Links */
        footer a {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease; /* Smooth color transition */
        }

        /* Footer Links Hover Effect */
        footer a:hover {
            color: rgb(134, 209, 30); /* Light green hover effect for links */
        }

        /* Footer Heading */
        footer h5 {
            font-weight: bold;
            color: #fff;
            margin-bottom: 15px; /* Space between heading and content */
        }

        /* Social Media Icons */
        footer .fab {
            font-size: 1.5rem;
            color: white;
            margin-right: 15px; /* Space between social icons */
            transition: color 0.3s ease;
        }

        footer .fab:hover {
            color: rgb(134, 209, 30); /* Light green hover effect for icons */
        }

        /* Container Adjustments for Footer */
        footer .container {
            max-width: 1200px; /* Max-width for large screens */
        }

        footer p i {
            color: rgb(255, 255, 255); /* Theme color for the location pin */
        }





        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            footer .col-md-3, footer .col-md-6 {
                text-align: center; /* Center the text on mobile */
            }

            footer .fab {
                font-size: 1.3rem;
            }

            .floating-circle{
                display: none;
            }
        }