/* Estilos base (Mobile First) */
.about-andipa {
    background-color: #003366;
    color: #fff;
    padding: 20px 0; /* Ajusta padding geral */
    text-align: center;
}

.about-andipa .container {
    display: flex;
    flex-direction: column; /* Exibe os itens em coluna por padrão */
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 0; /* Remove padding interno */
}

.about-andipa .title {
    font-size: 1.5rem; /* Aumenta o tamanho da fonte */
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.about-andipa .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
}

.about-andipa .content p {
    font-size: 1.25rem;
    line-height: 1.6;
}

.about-andipa .slider {
    position: relative;
    width: calc(100% - 40px); /* Reduz a largura para incluir o espaçamento lateral */
    margin: 5px auto; /* Ajusta a margem */
    aspect-ratio: 16 / 9; /* Define a proporção 16:9 */
    overflow: hidden; /* Impede que imagens fora do quadro fiquem visíveis */
    box-shadow: 0 0 10px 5px #ffffff; /* Adiciona um box-shadow branco mais delicado */
    border-radius: 10px; /* Canto arredondado opcional */
    background-color: #003366; /* Fundo no caso de ausência de imagem */
}

.about-andipa .slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.about-andipa .slide {
    flex: 0 0 100%;
    height: 100%;
    background-size: cover; /* Garante que a imagem ocupe toda a área */
    background-position: center;
}

.about-andipa .prev,
.about-andipa .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; /* Define largura do botão */
    height: 40px; /* Define altura do botão */
    background: rgba(255, 255, 255, 0.5); /* Fundo branco semi-transparente */
    border: none;
    border-radius: 50%; /* Torna o botão circular */
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-andipa .prev:before,
.about-andipa .next:before {
    content: '';
    display: block;
    width: 12px; /* Largura da seta */
    height: 12px; /* Altura da seta */
    border: solid #4d4d4d; /* Cor cinza escuro para a seta */
    border-width: 0 2px 2px 0; /* Define o formato da seta */
}

.about-andipa .prev:before {
    transform: rotate(135deg); /* Seta para a esquerda */
}

.about-andipa .next:before {
    transform: rotate(-45deg); /* Seta para a direita */
}

.about-andipa .prev {
    left: 10px;
}

.about-andipa .next {
    right: 10px;
}

/* Responsividade */

/* Smartphones médios (360px - 640px) */
@media (min-width: 360px) and (max-width: 640px) {
    .about-andipa .title h2 {
        font-size: 1.75rem;
    }

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

/* Smartphones grandes (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    .about-andipa .content {
        padding: 10px;
    }
}

/* Tablets pequenos (600px - 1024px) */
@media (min-width: 600px) and (max-width: 1024px) {
    .about-andipa .container {
        padding: 20px;
    }
}

/* Dispositivos com resolução superior a 768px */
@media (min-width: 768px) {
    .about-andipa .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .about-andipa .content {
        flex: 1;
		order: 1;
        max-width: 50%;
        text-align: justify;
		margin: auto;
    }

    .about-andipa .slider {
        flex: 1;
		order: 2;
        max-width: 40%;
		aspect-ratio: 4 / 3; /* Define a proporção 4:4 */
        margin: auto;
    }
}

/* Tablets grandes (768px - 1280px) */
@media (min-width: 768px) and (max-width: 1280px) {
    .about-andipa {
        padding: 30px 0;
    }
}

/* Laptops pequenos (1025px - 1366px) */
@media (min-width: 1025px) and (max-width: 1366px) {
    .about-andipa .content {
        max-width: 70%;
    }

    .about-andipa .slider {
        width: 50%;
    }
}

/* Laptops médios (1367px - 1440px) */
@media (min-width: 1367px) and (max-width: 1440px) {
    .about-andipa .title h2 {
        font-size: 2.25rem;
    }

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

/* Laptops grandes (1441px - 1920px) */
@media (min-width: 1441px) and (max-width: 1920px) {
    .about-andipa {
        padding: 20px 0 100px 0;
    }
	
    .about-andipa h2.title {
        font-size: 2.5rem;
		margin: 25px 0;
    }
	
    .about-andipa .content {
		padding: 50px;
    }

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

    .about-andipa .slider {
        box-shadow: 0 0 15px 7px #ffffff;

        max-width: 50%;
		aspect-ratio: 2 / 1; /* Define a proporção 4:4 */
    }
}

/* Desktops Full HD (1921px - 2559px) */
@media (min-width: 1921px) and (max-width: 2559px) {
    .about-andipa .title h2 {
        font-size: 2.5rem;
    }

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

/* Resolução 2K (2560px - 3840px) */
@media (min-width: 2560px) and (max-width: 3840px) {
    .about-andipa {
        padding: 50px 0;
    }

    .about-andipa .slider {
        width: 60%;
    }
}

/* Resolução 4K (3840px e acima) */
@media (min-width: 3840px) {
    .about-andipa .content h2 {
        font-size: 3rem;
    }

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