/* SECTION ABOUT */
#about {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3em 8%; /* Espaçamento geral */
    background-color: #f5f5f5; /* Fundo branco */
}

.about-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px; /* Largura máxima */
    width: 100%;
    gap: 2rem; /* Espaçamento entre imagem e conteúdo */
}

.about-image {
    flex: 1;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 20px; /* Arredonda as bordas */
    object-fit: cover;
    max-height: 450px; /* Limita a altura da imagem */
}

.about-content {
    flex: 1;
    padding: 2rem; /* Espaçamento interno */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espaçamento entre os elementos */
}

.about-header {
    background-color: #fff; /* Fundo cinza claro */
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.about-header h2 {
    font-size: 1.8rem;
    color: #2bae41; /* Verde principal */
    margin: 0;
}

.about-quote {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.circles {
    position: relative; /* Define o container como referência para os elementos absolutos */
    width: 40px; /* Define a largura total do grupo de círculos */
    height: 40px; /* Altura para ajustar a sobreposição */
}

.circle-dark {
    width: 20px; /* Tamanho do círculo verde escuro */
    height: 20px;
    background-color: #2bae41; /* Verde escuro */
    border-radius: 50%; /* Deixa o elemento redondo */
    position: absolute; /* Posição em relação ao container .circles */
    top: 5px; /* Ajusta a posição vertical */
    left: 0; /* Ajusta a posição horizontal */
    z-index: 2; /* Fica na frente do círculo claro */
}

.circle-light {
    width: 30px; /* Tamanho do círculo verde claro */
    height: 30px;
    background-color: #d9efde; /* Verde claro */
    border-radius: 50%; /* Deixa o elemento redondo */
    position: absolute; /* Posição em relação ao container .circles */
    top: 0; /* Ajusta a posição vertical */
    left: 10px; /* Ajusta a posição horizontal */
    z-index: 1; /* Fica atrás do círculo escuro */
}


.about-content p {
    font-size: 1rem;
    color: #516560;
    line-height: 1.6;
    margin: 0;
}

.btn-try {
    background-color: #2bae41;
    color: #fff;
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    align-self: flex-start;
}

.btn-try:hover {
    background-color: #248f3d; /* Escurece no hover */
}

/* RESPONSIVIDADE */
@media (max-width: 1024px) {
    .about-container {
        flex-direction: column; /* Coluna em telas menores */
        text-align: center;
    }

    .about-image, .about-content {
        max-width: 100%;
    }

    .about-content {
        padding: 1.5rem;
    }

    .btn-try {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .about-content h2 {
        font-size: 1.5rem;
    }

    .about-content p {
        font-size: 0.9rem;
    }

    .btn-try {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    .circle-dark {
        width: 15px;
        height: 15px;
    }

    .circle-light {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 480px) {
    .about-container {
        gap: 1rem;
    }

    .about-image img {
        max-height: 300px;
    }

    .about-content {
        padding: 1rem;
    }

    .about-header h2 {
        font-size: 1.2rem;
    }

    .about-content p {
        font-size: 0.8rem;
    }

    .btn-try {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
}