/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333; /* Adjust text color as needed */
}

.container {
    width: 90%;
    max-width: 1200px; /* Adjust max-width as needed */
    margin: 0 auto;
}

/* Header Styling */
.site-header {
    background-color: #e0e6eb; /* Light gray background */
    padding: 20px 0;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 2em;
    font-weight: bold;
    /* Add styles for your logo image/SVG */
}

.site-nav ul {
    list-style: none;
    display: flex;
}

.site-nav ul li {
    margin-left: 30px; /* Adjust spacing between menu items */
}

.site-nav ul li a {
    text-decoration: none;
    color: #333; /* Adjust link color */
    font-weight: 400;
    transition: color 0.3s ease;
}

.site-nav ul li a:hover {
    color: #00bcd4; /* Teal color for hover */
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px; /* Adjust border-radius as needed */
    transition: background-color 0.3s ease;
    font-weight: 600;
}

.btn-contact {
    background-color: transparent;
    color: #00bcd4; /* Teal color */
    border: 2px solid #00bcd4; /* Teal border */
}

.btn-contact:hover {
    background-color: #00bcd4;
    color: #fff;
}

/* Hero Section Styling */
.hero-section {
    background-image: url('hero-background.jpg'); /* Replace with your background image */
    background-size: cover;
    background-position: center;
    height: 70vh; /* Adjust height as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; /* White text color */
    text-align: center;
    position: relative; /* Needed for potential overlay */
}

/* Optional: Add an overlay to the hero image for better text readability */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Adjust opacity as needed */
}

.hero-content {
    position: relative; /* Place content above the overlay */
    z-index: 1; /* Ensure content is above the overlay */
}

.hero-section h1 {
    font-size: 3.5em; /* Adjust font size as needed */
    margin-bottom: 20px;
}

/* Basic responsiveness for header */
@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
    }

    .site-nav ul {
        margin-top: 10px;
        flex-direction: column;
        align-items: center;
    }

    .site-nav ul li {
        margin: 5px 0;
    }

    .btn-contact {
        margin-top: 10px;
    }

    .hero-section h1 {
        font-size: 2.5em; /* Adjust font size for smaller screens */
    }
}
/* About Section Styling */
.about-section {
    padding: 80px 0; /* Adjust padding as needed */
    text-align: center; /* Center the text */
    background-color: #fff; /* White background */
}

.about-section .container {
    max-width: 800px; /* Limit the width of the text block for better readability */
}

.about-section p {
    font-size: 1.2em; /* Adjust font size as needed */
    line-height: 1.8; /* Adjust line height for readability */
    margin-bottom: 0; /* Remove default paragraph margin */
}

.about-section strong {
    font-weight: 600; /* Ensure bold text uses the correct weight */
}

/* Responsiveness for About Section */
@media (max-width: 768px) {
    .about-section {
        padding: 50px 0; /* Reduce padding on smaller screens */
    }

    .about-section .container {
        width: 95%; /* Adjust container width for smaller screens */
    }

    .about-section p {
        font-size: 1em; /* Adjust font size for smaller screens */
    }
}
/* Values Section Styling */
.values-section {
    padding: 80px 0; /* Adjust padding as needed */
    background-color: #f8f8f8; /* Light gray background */
}

.values-content{
    display: flex;
    align-items: center;
    gap: 40px; /* Space between image and info */
}

.values-image {
    flex: 1; /* Allow image to take up available space */
    text-align: center; /* Center the image if it's smaller */
}

.values-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; /* Add some border-radius to the image */
}

.values-info {
    flex: 1; /* Allow info to take up available space */
}

.values-info .section-title {
    display: block;
    font-size: 1em;
    color: #00bcd4; /* Teal color */
    margin-bottom: 10px;
}

.values-tabs {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
}

.tab-button {
    padding: 10px 20px;
    border: none;
    background-color: #e0e6eb; /* Light gray background */
    color: #333; /* Dark text color */
    cursor: pointer;
    font-weight: 600;
    border-radius: 5px;
    margin-right: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-bottom: 10px; /* Add margin for wrapping */
}

.tab-button.active {
    background-color: #00bcd4; /* Teal background for active tab */
    color: #fff; /* White text for active tab */
}

.values-tab-content .tab-pane {
    display: none; /* Hide all tab panes by default */
}

.values-tab-content .tab-pane.active {
    display: block; /* Show the active tab pane */
    background-color: #00bcd4; /* Teal background for content */
    color: #fff; /* White text for content */
    padding: 30px;
    border-radius: 10px;
}

.values-tab-content .tab-pane h2 {
    font-size: 2em; /* Adjust headline size */
    margin-bottom: 10px;
}

.values-tab-content .tab-pane p {
    font-size: 1.1em; /* Adjust paragraph size */
    line-height: 1.6;
}


/* Responsiveness for Values Section */
@media (max-width: 768px) {
    .values-content {
        flex-direction: column; /* Stack image and info vertically */
        gap: 30px; /* Adjust gap for stacked layout */
    }

    .values-image,
    .values-info {
        flex: none; /* Remove flex grow */
        width: 100%; /* Make them take full width */
    }

    .values-tabs {
        justify-content: center; /* Center tabs when stacked */
    }

    .tab-button {
        margin-right: 5px; /* Reduce margin between buttons */
        margin-bottom: 5px;
    }

    .values-tab-content .tab-pane {
        padding: 20px; /* Reduce padding for content on smaller screens */
    }

    .values-tab-content .tab-pane h2 {
        font-size: 1.6em; /* Adjust headline size */
    }

    .values-tab-content .tab-pane p {
        font-size: 1em; /* Adjust paragraph size */
    }
}
/* Purpose Section Styling */
.purpose-section {
    padding: 80px 0; /* Adjust padding as needed */
    background-color: #fff; /* White background */
}

.purpose-section .container {
    max-width: 1000px; /* Adjust max-width as needed */
}

.purpose-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space out text and icons */
    gap: 30px; /* Space between text and icons */
}

.purpose-content p {
    font-size: 1.2em; /* Match font size with about section */
    line-height: 1.8;
    flex: 1; /* Allow text to take up available space */
}

.purpose-content strong {
    font-weight: 600;
}

.social-icons {
    display: flex;
    gap: 15px; /* Space between icons */
    flex-shrink: 0; /* Prevent icons from shrinking */
}

.social-icons a {
    display: flex; /* Use flexbox to center the icon */
    justify-content: center; /* Center icon horizontally */
    align-items: center; /* Center icon vertically */
    width: 40px; /* Adjust icon container size */
    height: 40px; /* Adjust icon container size */
    border-radius: 50%;
    background-color: #000; /* Black background for icons */
    color: #fff; /* White color for Font Awesome icons */
    font-size: 20px; /* Adjust Font Awesome icon size */
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.social-icons a:hover {
    background-color: #333; /* Darker black on hover */
}

/* Remove the img styles as we are now using Font Awesome icons */
/*
.social-icons img {
    width: 20px;
    height: 20px;
    filter: invert(100%);
}
*/


/* Responsiveness for Purpose Section */
@media (max-width: 768px) {
    .purpose-content {
        flex-direction: column; /* Stack text and icons vertically */
        text-align: center; /* Center text when stacked */
        gap: 20px; /* Adjust gap for stacked layout */
    }

    .purpose-content p {
        font-size: 1em; /* Adjust font size for smaller screens */
    }

    .social-icons {
        justify-content: center; /* Center icons when stacked */
    }
}
/* Carousel Section Styling */
.carousel-section {
    padding: 0; /* Remove padding if you want the carousel edge-to-edge */
    overflow: hidden; /* Hide anything outside the container */
    background-color: #f8f8f8; /* Optional background color */
}

.carousel-container {
    overflow-x: auto; /* Enable horizontal scrolling */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;  /* Hide scrollbar for Internet Explorer and Edge */
    scroll-behavior: smooth; /* Optional: smooth scrolling */
    cursor: grab; /* Indicate that the element can be dragged */
}

.carousel-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}


.carousel-track {
    display: flex;
    /* Remove gap or use very small gap if images should touch or have minimal space */
}

.carousel-slide {
    flex: 0 0 auto; /* Prevent slides from shrinking or growing, set base size to auto */
    width: 80vw; /* Set width relative to viewport width (adjust as needed) */
    max-width: 500px; /* Set a maximum width for larger screens (adjust as needed) */
    margin-right: 15px; /* Space between slides (adjust as needed) */
    border-radius: 10px; /* Optional: add border-radius to slides/images */
    overflow: hidden; /* Hide overflow if border-radius is applied */
}

.carousel-slide:last-child {
    margin-right: 0; /* Remove margin from the last slide */
}

.carousel-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover; /* Crop the image to cover the area without distortion */
    border-radius: 10px; /* Optional: add border-radius to images */
}

/* Optional: Adjust styles for very small screens if needed */
@media (max-width: 480px) {
    .carousel-slide {
        width: 90vw; /* Increase width on very small screens */
    }
}
/* Services Section Styling */
.services-section {
    padding: 80px 0; /* Adjust padding as needed */
    background-color: #fff; /* White background */
}

.services-section .section-title {
    display: block;
    font-size: 1em;
    color: #00bcd4; /* Teal color */
    margin-bottom: 20px;
    text-align: center; /* Center the section title */
}

.services-list {
    max-width: 800px; /* Limit the width of the services list */
    margin: 0 auto; /* Center the services list */
    position: relative; /* Set position relative for absolute positioning of the icon */
}

.moving-icon {
    position: absolute; /* Position the icon absolutely */
    top: 0; /* Initial top position (will be updated by JS) */
    left: 0; /* Initial left position (will be updated by JS) */
    width: 24px; /* Adjust icon width */
    height: 24px; /* Adjust icon height */
    transition: top 0.3s ease, left 0.3s ease; /* Smooth transition for movement */
    z-index: 1; /* Ensure icon is above other content */
}

.moving-icon img {
    display: block;
    width: 100%;
    height: auto;
}


.service-item {
    margin-bottom: 15px; /* Space between service items */
    cursor: pointer; /* Indicate that the item is clickable */
    position: relative; /* Needed for calculating header position */
    padding-left: 30px; /* Add padding to make space for the moving icon */
}

.service-header {
    display: flex;
    align-items: center;
    padding: 10px 0;
    transition: color 0.3s ease;
}

.service-header h3 {
    font-size: 1.5em; /* Adjust title size */
    font-weight: 600;
    margin: 0; /* Remove default margin */
}


.service-content {
    height: 0; /* Use height: 0 to hide content initially */
    overflow: hidden;
    transition: height 0.3s ease, padding 0.3s ease; /* Transition height and padding */
    padding: 0 20px; /* Set horizontal padding even when hidden */
    background-color: #f8f8f8; /* Light gray background for content */
    border-radius: 0 0 5px 5px; /* Adjust border-radius for the bottom */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.service-content p {
    font-size: 1em; /* Adjust paragraph size */
    line-height: 1.6;
    color: #333; /* Adjust text color */
    margin: 0; /* Remove default margin */
}

/* Responsiveness for Services Section */
@media (max-width: 768px) {
    .services-section {
        padding: 50px 0; /* Reduce padding on smaller screens */
    }

    .services-list {
        width: 95%; /* Adjust width for smaller screens */
    }

    .service-item {
        padding-left: 25px; /* Adjust padding for smaller screens */
    }

    .moving-icon {
        width: 20px; /* Adjust icon size for smaller screens */
        height: 20px; /* Adjust icon size for smaller screens */
    }

    .service-header h3 {
        font-size: 1.3em; /* Adjust title size for smaller screens */
    }

    .service-content {
        padding: 0 15px; /* Adjust horizontal padding for smaller screens */
    }

    .service-content p {
        font-size: 0.95em; /* Adjust paragraph size for smaller screens */
    }
}
/* Laboratory Section Styling */
.laboratory-section {
    padding: 80px 0; /* Adjust padding as needed */
    background-color: #fff; /* White background */
    text-align: center; /* Center content */
}

.laboratory-section .section-title {
    display: block;
    font-size: 1em;
    color: #00bcd4; /* Teal color */
    margin-bottom: 10px;
}

.laboratory-section h2 {
    font-size: 2.5em; /* Adjust headline size */
    margin-bottom: 20px;
}

.laboratory-section p {
    font-size: 1.1em; /* Adjust paragraph size */
    line-height: 1.8;
    margin-bottom: 20px;
}

.laboratory-section strong {
    font-weight: 600;
}

.laboratory-points {
    display: flex;
    justify-content: space-around; /* Distribute points evenly */
    align-items: flex-start; /* Align items to the top */
    margin-top: 40px;
    background-color: #00bcd4; /* Teal background */
    color: #fff; /* White text */
    padding: 30px 20px; /* Adjust padding */
    border-radius: 10px; /* Optional: border-radius */
    flex-wrap: wrap; /* Allow points to wrap on smaller screens */
}

.point-item {
    flex: 1; /* Allow items to grow and shrink */
    padding: 0 15px; /* Add horizontal padding */
    text-align: center; /* Center text within each point */
    min-width: 250px; /* Minimum width to prevent squishing */
}

.point-item i {
    font-size: 2.5em; /* Adjust icon size */
    margin-bottom: 15px;
    color: #fff; /* White icon color */
}

.point-item h4 {
    font-size: 1.2em; /* Adjust title size */
    margin-bottom: 10px;
}

.point-item p {
    font-size: 1em; /* Adjust paragraph size */
    line-height: 1.6;
    margin-bottom: 0; /* Remove default paragraph margin */
}

.laboratory-cta {
    margin-top: 60px; /* Space above the CTA */
}

.laboratory-cta h3 {
    font-size: 2em; /* Adjust headline size */
    margin-bottom: 20px;
}

.btn-yellow {
    background-color: #f8d74c; /* Yellow color */
    color: #333; /* Dark text color */
    border: none; /* Remove border */
    padding: 12px 30px; /* Adjust padding */
    font-size: 1.1em; /* Adjust font size */
    font-weight: 600;
}

.btn-yellow:hover {
    background-color: #f0c538; /* Slightly darker yellow on hover */
}

/* Responsiveness for Laboratory Section */
@media (max-width: 768px) {
    .laboratory-section {
        padding: 50px 0; /* Reduce padding */
    }

    .laboratory-section h2 {
        font-size: 2em; /* Adjust headline size */
    }

    .laboratory-section p {
        font-size: 1em; /* Adjust paragraph size */
    }

    .laboratory-points {
        flex-direction: column; /* Stack points vertically */
        gap: 30px; /* Add space between stacked points */
        padding: 20px; /* Adjust padding */
    }

    .point-item {
        padding: 0; /* Remove horizontal padding when stacked */
        min-width: auto; /* Remove minimum width restriction */
    }

     .point-item i {
        font-size: 2em; /* Adjust icon size for smaller screens */
        margin-bottom: 10px;
    }

    .point-item h4 {
        font-size: 1.1em; /* Adjust title size */
    }

    .point-item p {
        font-size: 0.95em; /* Adjust paragraph size */
    }

    .laboratory-cta {
        margin-top: 40px; /* Adjust space above CTA */
    }

    .laboratory-cta h3 {
        font-size: 1.6em; /* Adjust headline size */
    }

    .btn-yellow {
        padding: 10px 25px; /* Adjust button padding */
        font-size: 1em; /* Adjust button font size */
    }
}
/* Methodology Section Styling */
.methodology-section {
    padding: 80px 0; /* Adjust padding as needed */
    background-color: #1a1a1a; /* Dark background */
    color: #fff; /* White text */
}

.methodology-section .section-title {
    display: block;
    font-size: 1em;
    color: #00bcd4; /* Teal color */
    margin-bottom: 10px;
    text-align: center; /* Center the section title */
}

.methodology-content {
    display: flex;
    gap: 40px; /* Space between columns */
    align-items: flex-start; /* Align items to the top */
    margin-top: 40px;
}

.methodology-left {
    flex: 1; /* Allow left column to take up available space */
    max-width: 400px; /* Limit the width of the left column */
}

.methodology-left h2 {
    font-size: 2.8em; /* Adjust headline size */
    line-height: 1.2;
    margin-bottom: 20px;
}

.methodology-left p {
    font-size: 1.1em; /* Adjust paragraph size */
    line-height: 1.8;
}

.methodology-right {
    flex: 1.5; /* Allow right column to take up more space */
}

.methodology-right .phase {
    margin-bottom: 20px; /* Space below each phase */
}

.methodology-right .phase h3,
.methodology-right .team h3,
.methodology-right .results h3 {
    font-size: 1.5em; /* Adjust title size */
    font-weight: 600;
    margin-bottom: 5px;
    color: #f8d74c; /* Yellow color for titles */
}

.methodology-right .results h3 {
    color: #00bcd4; /* Teal color for results title */
}
.methodology-right .team h3 {
    color: #00bcd4; /* Teal color for results title */
}

.methodology-right p {
    font-size: 1.1em; /* Adjust paragraph size */
    line-height: 1.6;
    margin-bottom: 20px; /* Space below paragraphs */
}

.methodology-right .team,
.methodology-right .results {
    margin-top: 30px; /* Space above team and results */
}


/* Responsiveness for Methodology Section */
@media (max-width: 768px) {
    .methodology-section {
        padding: 50px 0; /* Reduce padding */
    }

    .methodology-content {
        flex-direction: column; /* Stack columns vertically */
        gap: 30px; /* Adjust gap */
        margin-top: 30px;
    }

    .methodology-left,
    .methodology-right {
        flex: none; /* Remove flex grow */
        width: 100%; /* Take full width */
        max-width: 100%; /* Remove max-width restriction */
    }

    .methodology-left h2 {
        font-size: 2em; /* Adjust headline size */
        text-align: center; /* Center headline */
    }

    .methodology-left p {
        font-size: 1em; /* Adjust paragraph size */
        text-align: center; /* Center paragraph */
    }

    .methodology-right .phase h3,
    .methodology-right .team h3,
    .methodology-right .results h3 {
        font-size: 1.3em; /* Adjust title size */
    }

     .methodology-right p {
        font-size: 1em; /* Adjust paragraph size */
        margin-bottom: 15px;
    }
}
/* Contact Section Styling */
.contact-section {
    background-image: url('contact-background.jpg'); /* Replace with your background image */
    background-size: cover;
    background-position: center;
    padding: 100px 0; /* Adjust padding to give space above and below */
    position: relative; /* Needed for positioning the form container */
    color: #333; /* Default text color for the form */
}

/* Optional: Add an overlay to the background image */
.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Adjust opacity as needed */
    z-index: 1; /* Ensure overlay is below the form */
}

.contact-section .container {
    display: flex;
    justify-content: flex-end; /* Push the form to the right */
    position: relative; /* Needed for z-index of the form */
    z-index: 2; /* Ensure form is above the overlay */
}

.contact-form-container {
    background-color: #e0e6eb; /* Light gray background for the form */
    padding: 40px;
    border-radius: 10px;
    width: 100%; /* Default full width on small screens */
    max-width: 500px; /* Limit width on larger screens */
}

.contact-form-container h2 {
    font-size: 2em; /* Adjust headline size */
    margin-bottom: 30px;
    text-align: left; /* Align title to the left */
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 1em;
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-bottom: 1px solid #ccc; /* Light gray bottom border */
    background-color: transparent; /* Transparent background */
    font-size: 1em;
    color: #333; /* Text color for input */
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    border-bottom-color: #00bcd4; /* Teal border on focus */
}

.form-group textarea {
    resize: vertical; /* Allow vertical resizing */
}

.contact-form-container .btn-yellow {
    width: 100%; /* Make button full width in the form */
    padding: 12px; /* Adjust button padding */
}

/* Responsiveness for Contact Section */
@media (max-width: 768px) {
    .contact-section {
        padding: 60px 0; /* Adjust padding */
    }

    .contact-section .container {
        justify-content: center; /* Center the form on smaller screens */
    }

    .contact-form-container {
        padding: 30px; /* Adjust form padding */
        max-width: 95%; /* Allow form to take up more width */
    }

    .contact-form-container h2 {
        font-size: 1.8em; /* Adjust headline size */
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea {
        padding: 8px; /* Adjust input padding */
        font-size: 0.95em; /* Adjust input font size */
    }

    .contact-form-container .btn-yellow {
        padding: 10px; /* Adjust button padding */
        font-size: 1em; /* Adjust button font size */
    }
}
/* Footer Styling */
.site-footer {
    background-color: #00bcd4; /* Teal background */
    color: #000; /* White text */
    padding: 40px 0 20px 0; /* Adjust padding */
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Light white line */
    padding-bottom: 30px; /* Space below the line */
}

.footer-left {
    flex: 1; /* Allow to grow */
    max-width: 250px; /* Limit width */
}

.footer-left h2 {
    font-size: 1.8em; /* Adjust headline size */
    line-height: 1.3;
    margin: 0; /* Remove default margin */
}

.footer-center {
    flex: 1; /* Allow to grow */
    text-align: center; /* Center navigation on larger screens */
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack links vertically */
    align-items: center; /* Center links horizontally when stacked */
}

.footer-nav ul li {
    margin-bottom: 5px; /* Space between links */
}

.footer-nav ul li a {
    text-decoration: none;
    color: #000; /* White link color */
    font-size: 1em;
    transition: color 0.3s ease;
}

.footer-nav ul li a:hover {
    color: #333; /* Darker color on hover */
}

.footer-right {
    flex: 1; /* Allow to grow */
    max-width: 200px; /* Limit width */
    text-align: right; /* Align content to the right */
}

.footer-right .social-icons {
    display: flex;
    justify-content: flex-end; /* Push icons to the right */
    gap: 10px; /* Adjust space between icons */
    margin-bottom: 20px;
}

/* Reuse social icon styling from previous section, adjust if needed for footer */
.site-footer .social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px; /* Adjust icon container size */
    height: 30px; /* Adjust icon container size */
    border-radius: 50%;
    background-color: #000; /* White background for icons */
    color: #fff; /* Black color for Font Awesome icons */
    font-size: 16px; /* Adjust Font Awesome icon size */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.site-footer .social-icons a:hover {
    background-color: #ccc; /* Lighter gray on hover */
    color: #000;
}

.footer-logo {
    color:#000;
    display: block; /* Remove any extra space below the image */
    max-width: 100%; /* Ensure the image is responsive within its container */
    height: auto; /* Maintain aspect ratio */
    /* Add specific width or height if needed to match the design */
}
.footer-logo img {
    max-width: 100%; /* Ensure the logo is responsive */
    height: auto; /* Maintain aspect ratio */
}
.footer-bottom {
    padding-top: 20px;
    font-size: 0.9em;
    text-align: center;
    color: rgba(255, 255, 255, 0.6); /* Lighter white for bottom text */
}

/* Responsiveness for Footer */
@media (max-width: 768px) {
    .site-footer .container {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center items */
        border-bottom: none; /* Remove border on smaller screens */
        padding-bottom: 0;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        flex: none; /* Remove flex grow */
        width: 100%; /* Take full width */
        max-width: 100%; /* Remove max-width */
        text-align: center; /* Center text */
        margin-bottom: 20px; /* Add space between stacked elements */
    }

     .footer-nav ul {
        flex-direction: column; /* Ensure links remain stacked */
        align-items: center; /* Center links */
    }

    .footer-right .social-icons {
        justify-content: center; /* Center icons */
        margin-bottom: 15px;
    }

    .site-footer {
         padding: 30px 0 15px 0; /* Adjust overall padding */
    }
}