/* Introduction section container */
#introduction {
    background-image: url('/img/aims-check.jpg'); /* Replace with your image path */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    position: relative; /* Required for absolute positioning of the image */
    width: 100%;
    height: 500px; /* Adjust height as needed */
    overflow: hidden; /* Prevent any overflow issues */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    text-align: center; /* Center text inside content */
    padding: 0; /* Ensure no padding is applied to the container */
    margin: 0; /* Ensure no margin is applied to the container */
}

/* Intro content styling */
.intro-content {
    position: relative; /* Ensure it sits above the image */
    z-index: 2; /* Higher than the image and overlay */
    color: white; /* Text color for contrast */
    background: rgba(0, 0, 0, 0.5); /* Optional: Add a semi-transparent background for readability */
    padding: 20px; /* Adjust padding as needed */
    border-radius: 8px; /* Optional: Rounded corners for the content container */
    max-width: 600px; /* Optional: Limit the width of the content */
    margin-top: 80px;
}

/* Optional: Additional styling for h1 and p elements inside intro-content */
.intro-content h1 {
    margin-bottom: 10px; /* Adjust margin as needed */
    font-size: 2.5em; /* Adjust font size as needed */
}

.intro-content p {
    margin: 0; /* Remove default margin */
    font-size: 1.2em; /* Adjust font size as needed */
}

/* Content Section */
#content {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    flex-wrap: wrap; /* Allows content to wrap on smaller screens */
}

.left-column,
.right-column {
    flex: 1;
    padding: 10px; /* Adjust padding as needed */
}

.left-column {
    padding-right: 10px; /* Adjust padding as needed */
}

.right-column {
    padding-left: 10px; /* Adjust padding as needed */
}

.left-image {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.right-column h2 {
    margin-bottom: 10px;
}

.right-column p {
    margin-bottom: 20px;
}

.points-list img {
    margin-right: 10px;
}
.right-text ul {
    list-style: none;
    padding: 0;
}
.right-text ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.right-text ul li::before {
    content: "\2713"; /* Check mark symbol */
    margin-right: 10px;
    color: green;
}
.quote-button {
    padding: 10px 20px; /* Top and bottom padding, left and right padding */
    border: none; /* Remove default border */
    border-radius: 8px; /* Rounded corners */
    background-color: #007BFF; /* Background color */
    color: white; /* Text color */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth background color transition */
}

.quote-button:hover {
    background-color: #0056b3; /* Darker background on hover */
}

/* Additional Info Section */
#additional-info {
    padding: 20px;
    background-color: #f9f9f9; /* Optional: background color for the section */
}

.info-intro {
    text-align: center;
    margin-bottom: 40px;
}

.info-intro h2 {
    margin-bottom: 10px;
    color: #333; /* Adjust as needed */
}

.info-intro p {
    color: #666; /* Adjust as needed */
}

.info-details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.info-item {
    flex: 1;
    padding: 0 15px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.info-item h3 {
    margin-bottom: 10px;
    color: #007BFF; /* Adjust as needed */
}

.info-item p {
    color: #444; /* Adjust as needed */
}

/* Partners Section */
#partners {
    padding: 20px;
    text-align: center;
}

.partners-intro h2 {
    margin-bottom: 20px;
    color: #007BFF; /* Adjust as needed */
}

.partners-image {
    width: 100%; /* Ensure the image covers the full width of the section */
    height: auto;
    max-width: 100%; /* Remove the limit on max-width */
    display: block; /* Remove extra space below the image */
}

#content .left-column .left-image-1 {
    width: 600px; 
    height: 500px;
}

#content .left-column .left-image-2 {
    width: 600px; 
    height: 500px; 
    margin-left: 200px; 
    margin-top: -30px;
}

#content .left-column .left-image-3 {
    width: 300px; 
    height: 200px; 
    margin-left: 700px; 
    margin-top: -3800px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .intro-content h1 {
        font-size: 2em; /* Smaller font size on smaller screens */
    }

    .intro-content p {
        font-size: 1em; /* Smaller font size on smaller screens */
    }

    #content {
        flex-direction: column; /* Stack columns vertically on smaller screens */
        margin-top: 20px;
    }

    .left-column,
    .right-column {
        padding: 10px 0; /* Adjust padding for stacked layout */
    }
}

@media (max-width: 480px) {
    .intro-content {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .intro-content h1 {
        font-size: 1.5em; /* Smaller font size on extra-small screens */
    }

    .intro-content p {
        font-size: 0.9em; /* Smaller font size on extra-small screens */
    }

    .quote-button {
        font-size: 14px; /* Adjust font size for smaller screens */
        padding: 8px 16px; /* Adjust padding for smaller screens */
    }

    #content .left-column .left-image-1 {
        width: 200px; 
        height: 150px;
        /* margin-top: 100px; */
    }
    
    #content .left-column .left-image-2 {
        width: 200px; 
        height: 150px; 
        margin-left: 10px; 
        /* margin-top: 100px; */
    }
    
    #content .left-column .left-image-3 {
        width: 200px; 
        height: 150px; 
        margin-left: 100px; 
        margin-top: -50px;
    }
}