/* Customize the scrollbar track */
::-webkit-scrollbar {
    width: 15px; /* Width of the scrollbar */
}

/* Scrollbar track */
::-webkit-scrollbar-track {
    background: #f5f5f5; /* Color of the track (background of scrollbar) */
}

/* Scrollbar handle (thumb) */
::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 6px; /* Rounded corners */
    border: 2px solid #f5f5f5; /* Space around the thumb */
}

/* On hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker color when hovered */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f4f4f4;
    overflow-x: hidden;
}

html{
    scroll-behavior: smooth;
}

.header-image {
    width: 100%;
    height: 110px; /* Adjust height as needed */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add bottom shadow */
    margin-bottom: -20px;
    background: radial-gradient(circle, #6f00debe, #6f00dea1);
}

.header-image img {
    width: 100%;
    height: 167%;
    object-fit: cover; /* Crop the image to fill the header */
    object-position: center top; /* Crop from the top of the image */
    display: block;
    margin-top: -60px;
}

/* Overlay Text Styles */
.overlay-text {
    position: absolute; /* Position absolutely within the header */
    top: 20px; /* Distance from the top */
    left: 20px; /* Distance from the left */
    color: rgb(249, 245, 245); /* Text color */
    text-align: left; /* Align text to the left */
    padding: 10px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners */
}   

.overlay-text h1 {
    font-size: 3em; /* Font size for the heading */
    margin: 0; /* Remove default margin */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
    margin-top: -12px;
}

/* service section  */
.service-category {
    margin-bottom: 15px;
    margin-top: 20px;
    margin-left: 30px;
}

.service-category h3 {
    font-size: 38px;
    margin-bottom: 20px;
    color: #444;
}

.service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.service-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;
    flex-basis: calc(25% - 20px);
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.service-item p {
    margin-top: 10px;
    font-size: 18px;
    color: #555;
}

/* Hover effect */
.service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Footer container */
.footer {
    display: flex;
    justify-content: space-between; /* Space between links and copyright text */
    align-items: center;
    background-color: #333333; /* Background color */
    color: #fff; /* Text color */
    padding: 20px; /* Padding for the footer */
    width: 100%; /* Full width */
    height: 300px;
    box-sizing: border-box; /* Include padding and border in the element's width and height */
    font-size: 1.5rem; /* Adjust font size if needed */
    position: relative; /* Relative positioning to allow full width */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Useful links section */
.useful-links {
    text-align: center; /* Align text to the left */
    margin-left: 60px;
    margin-bottom: 65px;
}

.useful-links h3 {
    margin-bottom: 10px; /* Space below the heading */
    
}

.useful-links ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    font-size: 11px;
}

.useful-links li {
    margin-bottom: 5px; /* Space between list items */
}

.useful-links a {
    color: #fff; /* Link color */
    text-decoration: none; /* Remove underline from links */
    font-size: 16px;
}

.useful-links a:hover {
    text-decoration: underline; /* Underline links on hover */
}

/* About Us section */
.about-us {
    text-align: center; /* Center align the text */
    margin-bottom: 100px; /* Space between About Us and copyright text */
    
}

.about-us h3 {
    margin-bottom: 10px; /* Space below the heading */
}

.about-us p {
    max-width: 600px; /* Limit the width of the text for readability */
    margin: 0 auto; /* Center the text block */
    font-size: 16px;
    text-wrap: wrap;
}

/* Copyright section styling */
.copyright-section {
    position: absolute; /* Position it relative to the footer */
    bottom: -20px; /* Position at the bottom */
    left: 20px; /* Position to the left */
    text-align: left; /* Align text to the left */
    font-size: 11px;
    width: auto; /* Adjust width */
    margin-left: -15px;
}

/* <!-- right side connect with us  --> */
.connect-with-us {
    text-align: center;
    margin-bottom: 80px;
    margin-right: 20px;
}

.connect-with-us h3 {
    margin-bottom: 10px;
}

.connect-with-us p {
    margin: 5px 0;
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
}

.connect-with-us p i {
    margin-right: 8px; /* Space between the icon and text */
}

.social-media {
    margin-top: 10px;
}

.social-media a {   
    color: #fff;
    margin-right: 10px;
    font-size: 1.4rem;
    text-decoration: none;
}

.social-media a:hover {
    color: #ddd; /* Change color on hover */
}

/* Copyright Section */
.copyright-section {
    position: absolute; /* Position it relative to the footer */
    bottom: 10px; /* Position at the bottom */
    left: 95px; /* Position to the left */
    text-align: left; /* Align text to the left */
    font-size: 16px;
    width: auto; /* Adjust width */
}

/* responsice  */

@media (max-width: 510px) and (min-width: 320px) {
    html, body {
        padding: 0; /* Remove any extra padding */
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    .header-image {
        height: 80px; /* Adjust header height */
    }

    .header-image img {
        height: 100%; /* Ensure image fits within header */
        object-fit: cover; /* Maintain aspect ratio */
        object-position: center; /* Center the image */
    }

    .overlay-text h1 {
        font-size: 2em; /* Smaller font size for heading */
    }

    .service-category {
        margin-left: 10px; /* Reduce margin on the left */
    }

    .service-category h3 {
        font-size: 24px; /* Decrease font size for service category */
    }

    .service-list {
        flex-direction: row; /* Align items in a row */
        justify-content: center; /* Center items */
        gap: 10px; /* Reduce gap between cards */
    }

    .service-item {
        flex-basis: calc(90% - 10px); /* Adjust card width */
        padding: 10px; /* Reduce padding within cards */
        box-shadow: none; /* Remove shadow for a flat design */
        transition: none; /* Disable hover effect */
    }

    .service-item img {
        height: auto; /* Ensure image fits */
    }

    .service-item p {
        font-size: 22px; /* Smaller font size for description */
        padding: 1px;
    }

    /* Adjusting the footer layout */
    .footer {
        flex-direction: column;
        padding: 5px; /* Further reduced padding */
        height: auto; /* Auto height for smaller screens */
    }

    .useful-links {
        text-align: center; /* Center useful links */
        margin: 0; /* Reset margin */
        width: 100%; /* Full width */
        padding: 0 10px; /* Add left and right padding */
        margin-bottom: 20px; /* Add margin below */
    }
    .useful-links h3{
        font-size: 1.2rem;
    }

    .useful-links li {
        font-size: 10px; /* Further reduce list item size */
    }

    .about-us {
        display: flex; /* Use flexbox for alignment */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Center items vertically */
        width: 100%; /* Full width */
        padding: 0 5px; /* Add some padding for spacing */
        box-sizing: border-box; /* Include padding in width calculation */
        margin-bottom: 20px; /* Reduce the gap to 20px */
    }

    .about-us p {
        max-width: 95%; /* Limit width to 95% of the container */
        margin: 0 auto; /* Center the paragraph */
        font-size: 12px; /* Further reduce font size for mobile */
        line-height: 1.4; /* Adjust line height for better readability */
        text-align: center; /* Center the text */
        text-wrap: wrap;
    }

    .about-us h3,   
    .connect-with-us h3 {
        font-size: 1.2rem; /* Reduce heading size */
        text-align: center; /* Center headings */
    }

    .copyright-section {
        text-align: center; /* Center the copyright text */
        font-size: 12px; /* Adjust font size */
        margin-left: -80px;
    }

    .connect-with-us {
        text-align: center; /* Center connect with us section */
    }

    .social-media {
        display: flex; /* Display social media links in a row */
        justify-content: center; /* Center social media links */
        margin-top: 10px; /* Add space above */
    }

    .social-media a {
        font-size: 1.2rem; /* Further reduce icon size */
    }
}