/* CSS to about */

#about {
    height: auto;
    width: 100%;
    background-color:#41598E;
    padding-bottom: 7%;
    padding-top: 7%; /*importante para quando clico em sobre no menu ir bonito*/
}

.about {
    height: 90vh;
    display: flex;
    width:auto;
    background-color: #f5f5f5;
    margin-left: 9vw;
    margin-right: 9vw;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 4%;

    border-radius:2cap;
}

.about-esq {
    width: 50%;
    height: 100%;
    margin-right: 3%;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.about-esq img{
    max-height: 100%; /* Ensures the image fits the container */
    max-width: 100%; /* Keeps the image proportional */
    object-fit: contain; /* Ensures the image fits without distortion */
}

.about-dta {
    width: 50%;
    height: 100%;
    padding-top:5%;
    margin-left: 3%;
    display: flex;
    align-items: center;
}

.about-text {
    margin-top: 6%;
    max-height: 55vh; /* Set the height for the scrolling container */
    overflow-y: auto; /* Enable vertical scrolling */
    font-size: 17px;
    line-height: 22px;
    font-family: "Roboto";
    font-weight: 360;
    padding-right: 3%;
}

/* Hover effect for p in .about-text */
.about-text p:hover {
    transform: translateY(-4px); /* Moves the card up by 10px */
    transition: transform 0.3s ease; /* Smooth animation */
}

/* Optional: Customize scrollbar appearance for modern browsers */
.about-text::-webkit-scrollbar {
    width: 8px;
}

.about-text::-webkit-scrollbar-thumb {
    background-color: #41598E;
    border-radius: 10px;
}

.about-text::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

/* Hover effect for hero-dta */
.about-esq:hover {
    transform: translateY(-10px); /* Moves the card up by 10px */
    transition: transform 0.3s ease; /* Smooth animation */
}

/* Hover effect for hero-dta */
.about-esq:first-of-type:hover {
    transform: translateY(-10px); /* Moves the card up by 10px */
    transition: transform 0.3s ease; /* Smooth animation */
}