.main-content {
    max-width: 1200px;
    width: 100%;
    background-color: #fff; /* White background for the content */    
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: auto;    
}

.middle-background{
    background-color:white;
    padding-bottom:20px
}

body {
    margin: 0;
    padding: 0;    
    background-image: linear-gradient(to top, #d3d3d3, #808080);
    font-family: Arial, sans-serif;
}

.content-row {
    display: flex;   
    
}

.center-left-wrapper {
    width: 250px;
    
}

.home-page-carousel1 {
    flex: 1; /* This will take up the remaining space in the container */
    padding-left: 23px   

}

.VDC-icons {
    display: flex;
    justify-content: center; /* Centers the icons horizontally */
    gap: 20px; /* Spacing between each icon */
    padding-top: 25px;
    background: white;
}

    .VDC-icons a {
        display: inline-block; /* Treats each link as a block for styling */
        border: 2px solid #ccc;
        border-radius: 10px; /* Adds rounded corners to the border */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        transition: transform 0.2s; /* Smooth transition for hover effect */
    }

        .VDC-icons a:hover {
            transform: scale(1.05); /* Slightly enlarges the icon/link on hover */
        }

    .VDC-icons img {
        display: block; /* Prevents bottom margin/padding in images */
        width: 350px;
        height: auto;
    }

@media (max-width: 768px) {
    .VDC-icons {
        flex-direction: column; /* Stacks the icons vertically */
        align-items: center; /* Centers the icons */
        gap: 10px; /* Reduces the spacing between icons for mobile */
    }

        .VDC-icons img {
            width: 100%; /* Adjusts the image to fit the container */
            max-width: 300px; /* Sets a reasonable maximum width */
        }
}

.carousels-container {
    display: flex;
    justify-content: space-around; /* Center the carousels horizontally */
    flex-wrap: wrap; /* Allow carousels to wrap onto the next line on smaller screens */
    gap: 20px; /* Space between carousels */
    background: white;
    padding-top: 25px;
    padding-left: 20px;
    padding-right: 20px;   

}

.carousel-container {
    flex: 1; /* Each carousel container will take equal width */
    min-width: 250px; /* Minimum width for each carousel to ensure they don't get too small */
    border: 2px solid #000000;    
    overflow: hidden; /* Ensures that anything outside the border-radius is clipped */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 10px; /* Adds some space around each carousel container */
    
}

    .carousel-container img {
        width: 100%; /* Makes the image take the full width of its container */
        height: auto; /* Makes the image take the full height of its container */
        object-fit: contain; /* Ensures the whole image fits inside the box without cropping */
    }

.eva-training-background {
    background-color: #8E9CB0;
    text-align: center;
}

.eva-training-content {
    display: flex; /* Use flexbox layout */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Distribute space between items */
    flex-wrap: wrap; /* Allow items to wrap as needed */
}

.eva-training-button {
    background-color: red; /* Button background color */
    color: white; /* Text color */
    text-align: center;
    padding: 10px 20px; /* Padding inside the button */
    text-decoration: none;
    border-radius: 5px; /* Rounded corners */
    border: 2px solid white; /* Bold white border */
    position: relative; /* Needed for pseudo-elements */
    overflow: hidden; /* Ensures pseudo-elements don't overflow */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    display: block; /* Display buttons as block-level elements */
    font-weight: bold; /* Make the text bold */
    margin: 10px auto; /* Center buttons and add space between them */
    width: auto; /* Adjust the width to fit the content */
}

    .eva-training-button:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
        border-radius: 5px; /* Match the button's border-radius */
        transition: opacity 0.3s ease;
    }

    .eva-training-button:hover:before {
        opacity: 0; /* Fade out the glossy effect on hover */
    }

    .eva-training-button:hover {
        background-color: darkred; /* Darker shade on hover */
        color: white;
        cursor: pointer;
        text-decoration:underline;
    }

.eva-training-textbox {
    background-color: lightgray;
    padding: 5px 0; /* Top and bottom padding */
    display: inline-block; /* Allows the span to be treated as inline for centering purposes */
    width: 100%; /* Ensures the div takes full width */
}

.eva-training-text {
    font-size: 24px; /* Example font size */
    color: #000; /* Text color */
    font-weight: bold; /* Bold text */
    display: block; /* Ensures the span takes the full width for centering */
}
.eva-training {    
    background-color: white;
    border: 2px solid black;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    margin: 20px auto; /* Add margin around the container, auto horizontally centers the div */
    max-width: 98%; /* Maximum width of the container */
}

.mobile-apps-flag {
    display: flex;
    justify-content: space-around; /* Adjust the gap between images */
    padding: 20px;
    background-color: white; /* Ensure the overall background is white */    
}

.app-flag-container {
    text-align: center; /* Center the content */
    background-color: white; /* Ensure the overall container has a white background */   
    margin: 10px auto; /* Center the container and add margin around it */    
    width: fit-content; /* Adjust the width to fit the content */
    display: inline-block; /* Display as inline-block for better control */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);   
   
}

.app-flag-image {
    max-width: 100%; /* Ensure the image is responsive */
    height: auto;    
    border: 2px solid black;
}

.app-flag-textbox {
    background-color: #f0f0f0; /* Light grey background for the text box */
    padding: 10px; /* Padding inside the text box */    
    width: 318px; /* Match the width of the images for alignment */
    margin-left: auto; /* Center the text box */
    margin-right: auto; /* Center the text box */
    border: 2px solid black;
    margin-bottom: -5px;
}

.app-flag-text {
    font-weight: bold; /* Make the text bold */
    color: black; /* Set text color to black */
    text-align: center; /* Center the text within its container */
    display: block; /* Ensure the text is treated as a block element for proper alignment */
}

.state-flag-image {
    width: 318px; /* Adjust width as needed */
    height: 212px; /* Maintain aspect ratio */
    display: block; /* Display block to remove bottom space/margin */
    margin-left: auto; /* Center the image horizontally */
    margin-right: auto; /* Center the image horizontally */
    border: 2px solid black;
}

@media (max-width: 768px) {
    .mobile-apps-flag {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items in the column */
        gap: 20px; /* Add space between items */
    }

    .app-flag-container {
        width: 100%; /* Allow containers to take full width in mobile view */
        max-width: 320px; /* Restrict to a reasonable max width */
    }

    .app-flag-textbox {
        width: 100%; /* Make the textbox full width for alignment */
        max-width: 320px; /* Restrict to the same max width as the container */
    }

    .state-flag-image, .app-flag-image {
        width: 100%; /* Make images responsive for mobile */
        max-width: 320px; /* Restrict to a reasonable max width */
    }
}

.local-government-container {
    width: 1050px;
    height: 500px; /* Example height, adjust as necessary */
    margin: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 1.25em;
    color: #333;
    position: relative;
    background-color: white;
    border: 2px solid black;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    overflow: hidden; /* Hide overflow content */    
}


.local-government-text-overlay-top, .local-government-text-overlay-bottom {
    background-color: lightgrey;
    padding: 10px 20px;
    text-align: center;
    border: 1px solid #ccc;
    font-weight: bold;
}

.local-government-image-container img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover; /* Cover the container without losing aspect ratio */
    max-height: 400px; /* Example maximum height, adjust as necessary */
}


.local-government-link, .local-government-link:hover, .local-government-link:focus {
    text-decoration: none; /* Removes underline from links */
    color: inherit; /* Inherits text color from parent, preventing color change */
    display: block; /* Makes the link block-level, allowing it to wrap the div */
    outline: none; /* Optional: Removes the outline on focus for aesthetics, consider accessibility */
}

@media (max-width: 768px) {
    .local-government-container {
        width: 90%; /* Shrinks container width to 90% of the screen */
        max-width: 400px; /* Optional: Restrict the maximum width */
        height: auto; /* Allow height to adjust based on content */
        font-size: 1em; /* Adjust font size for smaller screens */
        margin: 10px auto; /* Adds margin for better spacing */
    }

    .local-government-image-container img {
        max-height: 200px; /* Reduce image height for smaller screens */
    }

    .local-government-text-overlay-top,
    .local-government-text-overlay-bottom {
        font-size: 0.9em; /* Reduce font size of text overlays */
        padding: 8px 15px; /* Adjust padding for smaller screens */
    }
}



.buyer-information-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 50px;
    box-sizing: border-box;
    padding-top: 25px;
}

.info-list {
    list-style-type: disc;
    padding-left: 20px;
}

.info-text {
    margin: 0 0 .25rem; /* Changed from .25px to .25rem for better scalability */
}

/* Updated .text-section to center the button */
.text-section {
    display: flex;
    justify-content: center; /* This will center the button horizontally */
    width: 100%; /* Make sure it spans the full width */
}

.info-button {
    background-color: transparent;
    border: 2px solid red;
    color: red;
    padding: 10px 20px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    display: inline-block; /* You might want to change this to 'block' if you want the button to take the full width of .text-section */
    margin-top: 20px;
}
.info-button:hover{
    color: black;
}

.image-section {
    flex-basis: 20%;
    text-align: center;
}

.robot-image {
    max-width: 100%;
    height: auto;
}

.buyer-info-section {
    flex-basis: 40%;
    text-align: left;
    padding-left: 20px;
}

.buyer-info-title {
    margin: 0 0 10px;
}

.buyer-info-description {
    margin: 0 0 20px;
}

.buyer-info-button {
    background-color: transparent;
    border: 2px solid red;
    color: red;
    padding: 10px 20px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin: 10px 0;
}

.supplier-buyer-training{
    background: white;
    padding: 20px;
}

@media (max-width: 768px) {
    .buyer-information-content-wrapper {
        flex-direction: column;
        padding: 20px;
    }

    .text-section, .buyer-info-section, .image-section {
        text-align: center;
        padding: 0;
        flex-basis: 100%;
    }

    .info-button, .buyer-info-button {
        width: 100%;
        margin: 10px 0;
    }
}

.eVA-Robot {
    background-color: white;   
    padding-left: 50px;
}

.content {
    display: flex;
    align-items: center;
    background-color: white;
    padding-right:250px;
    max-width: 1024px;
    width: 100%;
}

.image-container img {
    max-width: 100%;
    height: auto;
}

.buyer-information-center-text-container {
    padding: 20px;
    text-align: center;
    padding-bottom: 125px;
}

    .text-container h1 {
        color: #333;
        font-size: 24px;
        font-weight: bold;
    }

    .text-container p {
        color: black;
        font-size: 14px;
    }

@media (max-width: 768px) {
    .buyer-information-center-text-container h1 {
        padding-left: 40px
        
    }

    .buyer-information-center-text-container p {
        padding-left: 40px
    }

    .image-container{
        display: none;
    }
}

.btn {
    background-color: transparent;
    border: 2px solid red;
    color: red;
    padding: 10px 20px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    display: inline-block; /* You might want to change this to 'block' if you want the button to take the full width of .text-section */
    margin-top: 20px;
}

.state-flag-image-no-box {
    max-width: 100%; /* Ensure the image is responsive */
    height: auto;
    border: 2px solid black;
    /* Remove any margin, padding, border, or shadows that might be creating the box effect */
    margin-bottom: 0;
    padding-bottom: 0;    
    box-shadow: none;
    display: block; /* Display block to remove bottom space/margin */
    margin-left: auto; /* Center the image horizontally */
    margin-right: auto; /* Center the image horizontally */
}

#alert-container {   
    text-align: center;
    border-radius: 0;
    border: none;
    margin-bottom: 0; /* Remove margin between alerts and navbar */}