/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;600&display=swap');

body {
    font-family: 'Roboto', sans-serif; /* Base font for body text */
    line-height: 1.6;
    margin: 20px;
    background-color: #f9f9f9; /* Light background for better readability */
}

.content-container {
    max-width: 1200px; /* Set the width of the content container */
    margin: 0 auto;
}

.bold-title {
    font-size: 28px; /* Adjust font size */
    font-family: 'Open Sans', sans-serif; /* Font for the title */
    font-weight: 600; /* Make the title bold */
    margin-bottom: 20px; /* Add space below the title */
    text-align: center; /* Center the title */
    color: #333; /* Darker color for title */
}

.image-text-pair {
    display: flex; /* Use flexbox to align items horizontally */
    justify-content: space-between; /* Space between the text and the image */
    align-items: center; /* Align items vertically in the center */
    margin-bottom: 30px; /* Add space between each image-text pair */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    background-color: #fff; /* White background for each pair */
    padding: 15px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow for a subtle elevation effect */
}

.text-content {
    max-width: 700px; /* Limit width of the text area */
}

.description-title {
    font-size: 22px; /* Size for the description title */
    font-family: 'Open Sans', sans-serif; /* Font for description titles */
    font-weight: 600;
    color: #444; /* Slightly lighter color than main title */
    margin-bottom: 10px;
}

.float-image {
    width: 400px; /* Set the width of the image */
    height: 300px; /* Set the height of the image */
    border: 5px solid #000; /* Add a 5px black border around the image */
    border-radius: 8px; /* Rounded corners for the image */
    margin-top: 10px; /* Add space on top when wrapping */
}

p {
    font-family: 'Roboto', sans-serif; /* Font for the description text */
    font-size: 16px;
    color: #555; /* Text color */
    margin: 0; /* Remove margin to align properly with the image */
    text-align: justify; /* Justifies the text */
}

@media screen and (max-width: 768px) {
    .image-text-pair {
        flex-direction: column; /* Stack the text and image vertically */
        align-items: flex-start; /* Align items to the left */
    }

    .float-image,
    .text-content {
        width: 100%; /* Make both the image and text full-width */
    }

    .float-image {
        height: auto; /* Adjust height automatically to maintain aspect ratio */
    }
}

@media screen and (max-width: 480px) {
    .bold-title {
        font-size: 24px; /* Adjust title size for smaller screens */
    }

    body {
        margin: 10px; /* Reduce body margin on very small screens */
    }
}