/* for logo moving */
        .header-wrapper {
            overflow: hidden; /* Prevent content from overflowing */
        }

        .site-name {
            display: flex;
            align-items: center;
            justify-content: flex-start; /* Initially start on the left */
            animation: slide 6s linear infinite alternate; /* Alternate motion */
            position: relative;
        }
        .site-name:hover {
            animation-play-state: paused; /* Pause animation on hover */
        }
        @keyframes slide {
            0% {
                transform: translateX(-100%); /* Start off-screen to the left */
            }
            50% {
                transform: translateX(50%); /* Center horizontally */
            }
            100% {
                transform: translateX(100%); /* Move off-screen to the right */
            }
        }

        .scrolling-logo,
        .scrolling-title {
            animation: none; /* Ensures child elements do not inherit animation */
        }

        /* for header and footer */
        footer, main , header, section {
            border: 1px solid;
            padding: 5px;
            text-align: center;
            margin: 5px;
            left: 10px;
            right: 10px;
        }
        footer{
            position: fixed;
            bottom: 5px;
        }
        main{
            padding-left: 2px !important; 
            padding-right: 2px !important; 
        }
        .header-wrapper {
            height: 60px;
            background-color: #faf9f9;
            color: black;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        main , footer{
            background-color: #34b091;
        }
        

         /**meanu icon **/
         .menuIcon{
            border: 1px solid black;
            background-color: #34b091;
            border-radius: 5px;
            width: 30px;
            height: 25px;
        }
        .menuIcon div{
            border: 1px solid black;
            padding: 1px;
            margin: 2px;
            background-color: black;
        }

        /* Navbar and Footer item adjustments */
	   .navbar-nav, .footer-wrapper .nav {
    	    display: flex;
            flex-wrap: wrap;
            justify-content: space-around; /* Distributes items based on content size */
            gap: 5px; /* Optional: Adds spacing between items */
            margin: 0;
        }
        ul.nav.navbar-nav {
            padding: 0; 
        }
       .navbar-nav li, .footer-wrapper .nav li {
            list-style: none;
            text-align: center;
        }
       .navbar-nav li a, .footer-wrapper .nav li a {
            background-color: black;
            color: white;
            text-decoration: none;
            padding: 5px;
            display: block;
            width: auto; /* Allows width to adjust based on content */
            white-space: wrap; /* Prevents text wrapping */
        }

       
        @media (max-width: 768px) {
            .navbar-nav, .footer-wrapper .nav {
                flex-direction: column; /* Stack items vertically on smaller screens */
                align-items: center;
                width: auto;
                margin: 2px;
            } 
            .navbar-nav li a{
            margin: 10px;
            }
            .navbar-nav{
                display: none;
            }
            footer{
                position: relative;
            }
        }
        @media (min-width: 769px) {
        .menuIcon{
                display: none;
            }
        }
        .sub-services-panel {
            display: none;
            position: absolute;
            top: 150px;
            left: 20px;
            width: 90%;
            background-color: #34b091;
            padding: 15px;
            border: 1px solid #34b091;
            z-index: 9999; 
            transition: transform 0.3s ease-in-out;
            transform: translateY(-100%); /* Start off-screen */
        }
        .sub-services-panel.open {
            transform: translateY(0); /* Slide in from the top */
            display: block; /* Make sure it is visible when open */
        }
        /* Sub-services styling to align items side-by-side */
        .sub-services {
            display: flex;
            justify-content: space-around; /* Distribute items evenly */
            padding: 0;
            list-style-type: disc; /* Dots (bullet points) */
        }
        .sub-services li {
            display: inline-block;
            margin-right: 20px;
            list-style-position: inside; /* Dots next to text */
        }
        .nested-sub-services {
            display: none;
            margin-top: 10px;
            padding-left: 20px;
            list-style-type: circle; /* Nested bullets */
        }
        .nested-sub-services li {
            margin-bottom: 5px;
        }
        .nested-sub-services li a {
            color: white;
        }

        /** for grid containers **/
        section.container {
            box-sizing: border-box; /* Ensures padding and borders are included in the dimensions */
            margin: 0 auto; /* Centers the container horizontally */
            padding: 20px;
            background-color: #f9f9f9;
            max-height: 410px; /* Set the maximum height for the section */
            overflow-y: auto; /* Enable vertical scrolling */
            overflow-x: hidden; /* Prevent horizontal scrolling */
            border: 1px solid #ddd; /* Optional: Add a border for better visibility */
        }
        .grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 80px;
            margin: 50px;
            }
        .grid-item {
            background-color: #f9f9f9;
            color: #34b091;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .grid-item:hover {
            transform: translateY(-5px);
            box-shadow: 0px 8px 20px  #045842;
            border: 1px solid #084131;
        }

        .grid-item h1 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .grid-item a {
            background-color: #2a9276;
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 5px;
        }

        .grid-item a:hover {
            background-color: #1f7059;
        }