@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

:root {
    --linear-gradient: linear-gradient(90deg, #4897D4, #1E864B, #FE7005, #5C2FCA);
    --color-blue: #4897D4;
    --color-purple: #5C2FCA;
    --color-green: #1E864B;
    --color-orange:#FE7005;
    --color-clean: #F9F9F9;
    --color-white: #fff;
    --color-black: #000;
    --font-texto: 'Inter', sans-serif;
    --font-titulo: 'Cairo', sans-serif;
}

/* SESSAO O QUE É O MORAL DE CRIA */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 3.75rem;
    padding-top: 3.75rem;
    box-sizing: border-box;    
}

.content {
    width: 100%;
    padding-top: 1.25rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.texto-container {
    text-align: justify;
    font-family: var(--font-texto);
    margin-top: 20px;
}

#subtitulo {
    color: var(--color-purple);
    font-weight: 700;
    margin-bottom: 24px;
    font-size: 36px;
    font-family: var(--font-titulo);
}

#img-container {
    width: 100%;
    max-width: 500px;
    height: auto;
}

.imagem {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.texto-container {
    flex: 1.6;
    margin-top: 20px;
}

#btn-saiba-mais {
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    background-color: var(--color-orange);
    border: none;
    color: var(--color-white);
    font-family: var(--font-texto);
    font-weight: bold;
    float: right;
    font-size: 20px;
    border: 2px solid var(--color-orange);
}

#btn-saiba-mais:hover {
    background-color: var(--color-white);
    color: var(--color-orange);
    border: 2px solid var(--color-orange);
}

/* SESSAO IMPACTO */
.container-impacto {
    width: 100%;
    min-height: 500px; /* ou outra altura adequada */
    background-image: url("../img/impacto.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom:  50px;
}

.titulo-impacto {
    color: var(--color-white);
    font-family: 'Cairo', sans-serif;
    text-align: center;
    font-weight: 800;
    font-size: 64px;
    position: relative;
    display: inline-block;
    margin-top: 6vh;
}

.titulo-impacto::after {
    position: absolute;
    content: '';
    height: 6px;
    width: 100%; 
    background: var(--linear-gradient);
    bottom: -8px;
    border-radius: 15px;
    left: 0; 
}

.container-dados {
    display: flex;
    flex-direction: row;
    color: var(--color-white);
    font-size: 24px;
    font-family: var(--font-texto);
    justify-content: space-around;
    margin: 10%;
    width: 100%;
    max-width: 1500px;
}

.dados {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 15%;
}

.titulo-dados {
    color: #4897D4;
    font-size: 64px;
    font-family: var(--font-titulo);
    font-weight: 800;  
}

.container-dados p {
    color: #ffffff;
    font-size: 24px;
    font-family: var(--font-texto);
    text-align: center;
}

/* SESSAO LOJA */
.titulo-loja {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px; 
}

.titulo-produto {
    align-items: center;
    text-align: center;
    font-family: var(--font-texto);
    font-size: 24px;
    margin: 0;
    padding: 0px;
}

.preço {
    color: var(--color-purple);
    font-size: 64px;
    font-family: var(--font-titulo);
    font-weight: 800;
    margin: 0;
    align-items: center;
    margin-top: -30px;
}

.btn-loja {
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    background-color: var(--color-orange);
    border: none;
    color: var(--color-white);
    font-family: var(--font-texto);
    font-weight: bold;
    font-size: 24px;
    border: 2px solid var(--color-orange);
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.btn-loja:hover {
    background-color: #fff;
    color: #FE7005;
}

.camiseta {
    display: flex;
    width: 100%;
    height: 600px;
    align-items: center;
    margin-bottom: -100px;
    justify-content: baseline;
}

.img-camiseta {
    width: 500px;
    align-items: center;
    text-align: center;
    margin: 15%;
    z-index: 2;
}

.caneca {
    display: flex;
    width: 100%;
    height: 625px;
    align-items: center;
    justify-content: end;
    background-color: #d9d9d9;
    clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0% 100%);
    position: relative;
    gap: 5rem;
    height: auto;
}

.img-caneca {
    display: flex;
    width: 500px;
    margin: 10%;
    z-index: 2;

}


/* SESSAO PROJETOS */
.container-projetos {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 0;
}

.projetos {
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    flex-wrap: wrap;
    margin-top: 28px;
    gap: 18px;
}

.projetos * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.projetos img {
    display: block;
}

.sustentabilidade {
    text-align: center;
    background-color: #1e864b;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
}

.profissional {
    text-align: center;
    background-color: #5c2fca;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
}

.esporte {
    text-align: center;
    background-color: #4897D4;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
}

.projeto-titulo {
    color: var(--color-white);
    font-size: 28px;
    font-family: var(--font-titulo);
    font-weight: bold;
    padding: 35px 0; 
    margin-top: auto;
}


/* SESSAO NOS ACOMPANHE */
.nos-acompanhe {
    margin-top: 90px;
    position: relative;
    text-align: center;
}

.moral-2 {
    height: 497px;
    width: 100%;
    background-color: #4897D4;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    position: relative;
    padding-top: 0px;

}

.moral-2 a {
    background-color: var(--color-white);
    padding: 0px 20px 10px 120px;
    border-radius: 15px;
    text-decoration: none;
    color: var(--color-black);
    font-weight: 800;
    font-size: 40px;
    display: flex;
    align-items: center;
    height: auto;
    width: fit-content;
}

.icone {
    width: 100px;
    position: absolute;
}

.moral2-insta {
    display: flex;
    align-items: center;
    margin-left: 80px;
    margin-top: -20px;
}

.container-img {
    display: flex;
    width: 100%;
    flex-direction: row;
    background-color: var(--color-blue);
    align-items: center;
    justify-items: center;
    padding-left: 120px;
    padding-right: 120px;
    justify-content: center;
    gap: 20px;                 
    padding: 0 40px;
}

.moral2-img img {
    border-radius: 15px;
}

.casa-formacao {
    height: 497px;
    width: 100%;
    background-color: #5C2FCA;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    position: relative;
    padding-top: 0px;

}

.casa-formacao .icone {
    rotate: 24deg;
    top: -20px;
    right: 20px;
}

.casa-formacao .container-img {
    display: flex;
    width: 100%;
    flex-direction: row;
    background-color: var(--color-purple);
    align-items: center;
    justify-items: center;
    padding-left: 120px;
    padding-right: 120px;
    justify-content: center;
    gap: 20px;                 
    padding: 0 40px;
}

.casa-insta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 100px;
    margin-top: -20px;
    position: relative;
}

.casa-insta a {
    background-color: var(--color-white);
    padding: 0px 120px 10px 20px;
    border-radius: 15px;
    text-decoration: none;
    color: var(--color-black);
    font-weight: 800;
    font-size: 40px;
    display: flex;
    align-items: center;
    height: auto;
    width: fit-content;
}


/* PARCEIROS */
.parceiros {
    text-align: center;
    padding: 40px 20px;
  }
  
  .parceiros-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    /* flex-wrap: wrap;  */
    margin-top: 30px;
  }
  
  .parceiros-container img {
    max-width: 250px;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
  }
  
  .parceiros-container img:hover {
    transform: scale(1.05);
  }
  

    /* ----TABLET---- */
@media screen and (min-width: 1025px) and (max-width: 1300px) {
    /* impacto */
    .dados {
        width: 25%;
    }

    /* SESSAO LOJA */
    .camiseta {
        margin-bottom: 0.5rem;
      }

    .camiseta,
    .caneca {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 2rem 2rem;
        column-gap: 2rem; 
        row-gap: 0;        
    }

    .btn-loja {
        font-size: 18px;
        padding: 0.4rem 1.2rem;
        white-space: nowrap;
        display: inline-block;
    }

    .img-camiseta,
    .img-caneca {
        width: 500px;
        max-width: 90vw;
        height: auto;
        margin: 0;
    }

    .caneca {
        clip-path: polygon(0 7%, 100% 0%, 100% 100%, 0% 100%);
    }
 
    /* SESSAO NOS ACOMPANHE */
    .moral-2{
    margin-top: 50px;
    }

    .moral2-insta a {
        font-size: 28px;
        padding: 0 15px 8px 105px;
    }
    
    .moral2-insta .icone {
        width: 50px;
        margin-top: 15px;
        margin-bottom: 35px;
    }

    .container-img {
        gap: 5px;
        padding: 0 20px;
    }
    
    .casa-formacao .container-img {
        gap: 10px;
        padding: 0 50px;
    }
    
}    
     
    /* ----MOBILE---- */
@media screen and (max-width: 1024px) {
    /* sessao o que é o moral */
    .container {
        margin-top: -50px;
    }

    .content {
        flex-direction: column;
        align-items: center;
    }
      
    #subtitulo {
        font-size: 24px;
        text-align: center;
    }

    .texto-container {
        margin-bottom: -100px;
    }
    
    #btn-saiba-mais {
        display: none;
    }

    /* impacto */
    .container-impacto {
        background-position: center;
        padding: 2rem 1rem;
        min-height: auto;
    }
    
    .titulo-impacto {
        font-size: 36px;
        margin-top: 1rem;
    }
    
    .titulo-impacto::after {
        height: 6px;
    }
    
    .container-dados {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        margin: 2rem 0;
    }
    
    .dados {
        width: 40%;
    }
    
    .titulo-dados {
        font-size: 36px;
    }
    
    .container-dados p {
        font-size: 16px;
    }
    
    /* SESSAO LOJA */
    .container-produtos {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-items: center;
    }
    
    .camiseta,
    .caneca {
        flex-direction: column;
        height: auto;
        justify-content: center;
        align-items: center;
        padding: 4rem 1rem;
    }
    
    .camiseta {
        background-color: #fff;
        margin-top: -50px;
        
    }
    
    .caneca {
        background-color: #d9d9d9;
        clip-path: polygon(0 7%, 100% 0%, 100% 100%, 0% 100%);
        padding-top: 3rem;
        padding-bottom: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
        gap: 0.5rem;
    }
    
    .img-camiseta,
    .img-caneca {
        width: 80%;
        max-width: 500px;
        margin: 0 auto 1rem auto;
        order: -1; 
    }
    
    .titulo-produto {
        font-size: 18px;
        padding: 0 1rem;
        text-align: center;
    }
    
    .preço {
        font-size: 36px;
        margin-top: -2rem;
        margin-bottom: -0.25rem;
    }
    
    .btn-loja {
        font-size: 18px;
        padding: 0.5rem 1.5rem;
    }

    /* SESSAO PROJETOS */
    
    .projetos {
        flex-direction: column;
        align-items: center;
    }
      
    .sustentabilidade,
    .profissional,
    .esporte {
        /* width: 100%; */
        min-width: 300px;
        max-width: 300px;
        /* margin: auto; */
    }

    .projeto-titulo {
        font-size: 22px;
        padding: 18px 0;
    }




    /* SESSAO NOS ACOMPANHE */
    .moral-2{
        margin-top: 30px;
    }

    .moral2-img:nth-child(3),
    .casa-formacao .container-img .moral2-img:nth-child(3) {
        display: none; /* esconder a terceira imagem */
    }

    .container-img {
        gap: 10px !important;
        justify-content: center !important;
        margin: auto;
    }

    .moral2-img img {
        width: 100%;
        max-width: 300px !important;
        height: auto;
    }

    .moral2-insta .icone img,
    .casa-insta .icone img {
        width: 90px !important;
        height: auto !important;
    }

    .moral2-insta {
        margin-left: 10px !important;
    }

    .casa-insta {
        margin-right: 10px !important;
        margin-top: -30px;
        
    }

    .moral2-insta a {
        font-size: 22px !important;
        padding: 0 15px 8px 80px !important;
    }

    .casa-insta a{
        font-size: 22px !important;
        padding: 0 24px 8px 8px !important;
        margin-right: -28px !important;
    }
    
    .moral-2,
    .casa-formacao {
        height: auto !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .casa-insta .icone {
        position: static !important;
        margin-top: 0 !important;
    }


    /* PARCEIROS */
    .parceiros-container {
        flex-direction: column;
        gap: 0.5rem;
      }
    
      .parceiros-container img {
        max-width: 40%;
      }
    
}