.image-row {
    display: flex;
    flex-direction: row;
    gap: 10vw; /* space between images */
    overflow-x: auto; /* optional: allow horizontal scroll on very small screens */
  }
  
  .img {
    display: flex;
    flex-direction: row;
    width: 100px; /* or any fixed size */
    height: auto;
    overflow-x: auto; /* optional: allow horizontal scroll on very small screens */

  }

.col-for-info {
    /* margin-top: 15px; */
    margin-bottom: 10px;
    font-family: 'Fira Sans';
}

.info-col {
    width: 40vw;
}


.image {
max-width: 60%; /* Adjust based on your desired layout */
margin-left: 10vw;
margin-top: 5vh;
}

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

.section-header {
    border-bottom: solid gray;
    margin-top: 5vh;
    font-family: 'Fira Sans';
    margin-bottom: 5px;}

.last-item {
    margin-bottom: 10px;
    font-family: 'Fira Sans';
}


.container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: flex-start; /* Align items at the top */
    max-width: 1600px; /* Limit container width */
    width: 100%;
    gap: 20px; /* Space between image and boxes */
    padding-top: 40px;
  }
.image-container {
    background-color: #ffffff;
    flex: 1; /* Take available space */
    max-width: 100%; /* Limit to half the container */
}
.image-container img {
    width: 100%; /* Responsive width */
    height: auto; /* Maintain aspect ratio */
    max-width: 1000px; /* Cap image width */
    background-color: #ffffff;
}
.box-container {
    flex: 1; /* Take available space */
    padding-top: 30px;
    max-width: 50%; /* Limit to half the container */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between boxes */
}


.box {
width: 0;
height: 70px;
background-color: #71C0BB;
margin: 0px 0;
overflow: hidden;
display: flex;
align-items: center;
padding-left: 20px;
color: rgba(255, 255, 255, 0);
font-size: 24px;
transition: width 0.5s ease-in-out, color 1.5s ease-in-out; /* Added color transition */
border-radius: 0 40px 40px 0; /* No radius on left corners, 20px on right corners */
}

.box span {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
/* General expanded style */
.box.expanded {
    width: 350px;
    color: rgba(255, 255, 255, 1); /* Fully opaque text when expanded */
}

.box.expanded span {
    opacity: 1;
}
/* Specific styles for each box ID when expanded */
#box1.expanded {
    background-color: #332D56; /* Red for box1 */
    width: 400px; /* Slightly wider */
}

#box2.expanded {
background-color: #4E6688; /* Green for box2 */
width: 250px; /* Slightly wider */
}

#box3.expanded {
background-color: #71C0BB; /* Yellow for box3 */
width: 500px;
}

#box4.expanded {
background-color: #67c9b0; /* Yellow for box3 */
width: 370px;
}

#box5.expanded {
background-color: #c1e283; /* Yellow for box3 */
width: 500px;
}
    

.box span b {
    font-size: 38px; /* Larger font size for text in <b> tags */
}

.btn {
    background-color: #E3EEB2;
    color: #332D56;
}