/* Info Section Styling */
.info {
    background-color: #1E408C; /* Background color */
    color: white; /* Text color */
    padding: 50px; /* Section padding */
    box-sizing: border-box; /* Include padding in width */
    display: flex;
    flex-direction: column; /* Stack main content and footer vertically */
    align-items: center; /* Center-align all text */
}

.info-container {
    display: flex;
    justify-content: space-between; /* Align content horizontally */
    gap: 50px; /* Space between left and right columns */
    width: 100%; /* Full-width container */
}

.info-left, .info-right {
    flex: 1; /* Equal space for left and right columns */
}

.info-logo {
    width: auto; /* Maintain original aspect ratio */
    align-self: flex-start; /* Align logo to the top-left */
}

.info-header, .info-office-header {
    font-family: 'Spartan', sans-serif;
    font-size: 24px; /* Font size */
    font-weight: bold; /* Bold weight */
    margin-top: 10px; /* Space above header */
}

.info-description {
    font-family: 'Spartan', sans-serif;
    font-size: 15px; /* Font size */
    font-weight: 300; /* Bold weight */
    line-height: 1.6; /* Improve readability */
    margin-top: 10px; /* Space above description */
}

.info-office-details {
    font-family: 'Spartan', sans-serif;
    font-size: 14px; /* Font size */
    font-weight: 300; /* Bold weight */
    line-height: 1.6; /* Improve readability */
    margin-top: 10px; /* Space above office details */
}

.info-footer {
    font-family: 'Spartan', sans-serif;
    font-size: 18px; /* Font size */
    font-weight: bold; /* Bold weight */
    text-align: center; /* Center-align text */
    margin-top: 20px; /* Space above footer */
}

/* Responsive Design */

/* Devices 768px or smaller */
@media (max-width: 768px) {
    .info-container {
        flex-direction: column; /* Stack left and right columns vertically */
        gap: 30px; /* Reduce gap for smaller screens */
    }

    .info-header, .info-office-header {
        font-size: 20px; /* Adjust font size */
    }

    .info-description, .info-office-details {
        font-size: 13px; /* Adjust font size */
    }

    .info-footer {
        font-size: 16px; /* Adjust font size */
    }
}

/* Devices 480px or smaller */
@media (max-width: 480px) {
    .info-container {
        flex-direction: column; /* Stack left and right columns vertically */
        gap: 20px; /* Further reduce gap for smaller screens */
    }

    .info-header, .info-office-header {
        font-size: 18px; /* Further adjust font size */
    }

    .info-description, .info-office-details {
        font-size: 12px; /* Further adjust font size */
    }

    .info-footer {
        font-size: 14px; /* Further adjust font size */
    }
}