.solucoes {
    align-items: center;
    color: #3C0606;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.solucoes.ativo {
    opacity: 1;
    transform: translateY(0);
}

.texto-s1{
    font-family:'Times New Roman', Times, serif;
    position: absolute;
    margin-right: 49%;
    margin-left: 5%;
    padding: 24px;
    right: 3%;
}

h2{
    font-size: 50px;
    font-weight: bold;
}

.texto-s1 .ksagro{
    color: rgb(54, 82, 54);
}

.texto-s1 .ksmob{
    color:rgb(36, 36, 121)
}

.texto-s1 .kslog{
    color:rgb(150, 57, 21)
}

p{
    font-size: 20px;
}

.foto-s1{
    margin-top: 100px;
    margin-left: 59%;
    width: 35%;
    height: 90%;
    padding: 24px;
    border-radius: 60px;
    background-color: #ff0000;
    background: linear-gradient(rgba(29, 63, 44, 0.4), rgba(29, 63, 44, 0.4)), url('/images/farmer-2.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
}

.texto-s2{
    font-family:'Times New Roman', Times, serif;
    position: absolute;
    margin-left: 49%;
    margin-right: 5%;
    padding: 24px;
    left: 3%;
}

.texto-s2 .kssilo{
    color:rgb(36, 36, 121)
}

.texto-s2 .itgestor{
    color:rgb(150, 57, 21)
}

.foto-s2{
    margin-top: 100px;
    margin-left: 5%;
    width: 35%;
    padding: 24px;
    border-radius: 60px;
    background-color: #ff0000;
    background: linear-gradient(rgba(52, 63, 138, 0.4), rgba(52, 63, 138, 0.4)), url('/images/silo.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
}

.foto-s3{
    margin-top: 100px;
    margin-left: 59%;
    width: 35%;
    padding: 24px;
    border-radius: 60px;
    background-color: #ff0000;
    background: linear-gradient(rgba(52, 63, 138, 0.4), rgba(52, 63, 138, 0.4)), url('/images/mob.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 35% center;
    transition: transform 0.5s ease;
}

.foto-s4{
    margin-top: 100px;
    margin-left: 5%;
    width: 35%;
    padding: 24px;
    border-radius: 60px;
    background-color: #ff0000;
    background: linear-gradient(rgba(168, 101, 56, 0.4), rgba(168, 101, 56, 0.4)), url('/images/businessman.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 65% center;
    transition: transform 0.5s ease;
}

.foto-s5{
    margin-top: 100px;
    margin-left: 59%;
    width: 35%;
    padding: 24px;
    border-radius: 60px;
    background-color: #ff0000;
    background: linear-gradient(rgba(168, 101, 56, 0.4), rgba(168, 101, 56, 0.4)), url('/images/kslog_truck.png'); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 35% center;
    transition: transform 0.5s ease;
}

@media (max-width: 1024px) {
   h2 {
        font-size: 28px;
    }

    p {
        font-size: 16px;
    }

    button {
        width: 100%;
    }
}

@media (max-width: 600px) {
    h2 {
        font-size: 28px;
    }

    p {
        font-size: 16px;
    }

    button {
        width: 100%;
    }
}

/* boas práticas */
* { box-sizing: border-box; }

/* mobile / zoom estreito */
@media (max-width: 900px) {
    /* evita scroll horizontal causado por margens/larguras */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* garante que o container não mantenha altura fixa (ex.: h-[500px] do Tailwind) */
    .solucoes {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;   /* centraliza horizont. */
        justify-content: center !important; /* centraliza verticalmente */
        text-align: center !important;
        padding: 20px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 16px !important;
    }

    /* remove imagens (caso use essa regra) */
    .foto-s1,
    .foto-s2,
    .foto-s3,
    .foto-s4,
    .foto-s5 {
        display: none !important;
    }

    /* força os blocos de texto a saírem do absolute e ocuparem largura correta */
    .texto-s1,
    .texto-s2 {
        position: static !important;    /* anula position: absolute */
        width: 100% !important;
        max-width: 900px;               /* limita largura para leitura confortável */
        margin: 0 auto !important;
        padding: 0 12px !important;
        text-align: center !important;
    }

    /* evita quebras estranhas e cortes de palavras */
    .texto-s1 p,
    .texto-s2 p,
    .texto-s1 h2,
    .texto-s2 h2 {
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        line-height: 1.45;      /* melhora legibilidade */
        margin: 12px 0;
    }

    /* títulos */
    .texto-s1 h2, .texto-s2 h2 {
        font-size: 28px !important;
        margin-bottom: 8px !important;
        word-break: keep-all;   /* evita quebra de palavras no título quando possível */
    }

    /* parágrafos */
    .texto-s1 p, .texto-s2 p {
        font-size: 16px !important;
    }

    /* botão: centralizado e com largura controlada */
    .texto-s1 button,
    .texto-s2 button {
        display: inline-block;
        width: 100%;
        max-width: 320px;
        margin: 16px auto 0;
        box-sizing: border-box;
    }

    /* Remove qualquer margem lateral que pudesse causar overflow */
    .texto-s1, .texto-s2, .solucoes {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}