@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
    font-family: "PT Serif";
    margin: 0;
    padding: 0;
    /* evita que elementos aumente de tamanho de forma inesperada facilitando o controle da responsividade respeitado os tamanhos definidos */
    box-sizing: border-box;
    list-style: none;
    /*  */

}

.cabecalho {

    /* preenchimento e cores */
    background: #000000;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(71, 64, 64, 1) 100%, rgba(196, 187, 187, 1) 61%, rgba(255, 247, 247, 0.68) 100%);
    color: white;
    padding: 1.5rem;
    /* poderia ser 24px  */

    /* Alinhamento dos itens */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;

    /* header fixo */
    position: sticky;
    left: 0;
    top: 0;
    z-index: 777;
}


/*  logo do header*/
.divlogo img {
    width: 55%;
    /* usando a % para diminuir seu tamnho */
}


/* estilizando o buttom do header */
.divbuttom a button {

    width: 5rem;
    /* 5x 16= 80px essa é a conta padrão */
    padding: 0.5rem;
    /* 8px preenchimento */
    background-color: rgb(224, 115, 13);
    /* cor do botão */
    border: none;
    /*remoção das cores */
    font-weight: 700;
    /* peso da expressura das letras */
    border-radius: 5px;
    /* aredondamneto da bordar pode se sar o px por ser um elemento fixo */
    font-family: "PT Serif";
    color: white;

}


.section1 {

    padding: 9rem;
    /* preenchimento interno da section */
    background-image: url(imagens/squad.avif);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    /*poderia usar 32px   */
    flex-wrap: wrap;
    /*elemento que informa as div que em algum momento poderam quebrar se casso necessario  */

}

.div01 {
    background: #000000;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(71, 64, 64, 1) 100%, rgba(196, 187, 187, 1) 61%, rgba(255, 247, 247, 0.68) 100%);
    font-weight: bold;
    /* cor de fundo */
    color: white;
    /* cor da letra */
    text-align: center;
    /* alinhamento centralizado do texto */
    font-size: 1.8;
    /*  tamnaho da fonte*/
    padding: 1rem;
    /* preenchimento */
    width: 25%;
    /* lagura da caixa em porcentagem*/
    height: 20rem;
    /*altura  */
    min-width: 299px;
    /* tamanho minimo  */


}



.div02 {

    padding: 1rem;
    /* preenchimento */
    width: 25%;
    /* lagura da caixa em porcentagem*/
    height: 20rem;
    /*altura  */
    min-width: 299px;
    /* tamanho minimo  */
    background-image: url(imagens/gramado.png);
    background-repeat: no-repeat;
    background-position: top;
    /* linear-gradient(180deg, #01021064 8, 33%, rgba(7, 15, 28, 0.755) 100%), url(imagens/torcida2.png); */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-direction: column;

}


.ul-div1 li a {

    text-decoration: none;
    background-color: rgb(247, 122, 5);
    color: white;
    padding: 1.5px;
    font-size: 1rem;
    border-radius: 5px;
    /*aredondamento da borda  */


}

.ul-div1 li {
    margin: 30px 45px;
    /* altera os 4 lados dos elementos o primeiro elemnto em px é(superior e inferior) segundo elemento é (esqueda e direita) */


}

.ul-div1 {
    margin: 5px 5px;
}

.fa-9,
.fa-7 {

    color: #000000;
    font-size: 2rem;

}

span {
    color: rgb(224, 115, 13);

}

.img-div {

    padding: 6%;
    background-image: url(footer-corinthians-nike-futebol.webp);
    background-position: center;
    background-size: cover;
    /* preenchimento total da img na caixa */
}

.section2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 5rem;
    background: #000000;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(71, 64, 64, 1) 100%, rgba(196, 187, 187, 1) 61%, rgba(255, 247, 247, 0.68) 100%);
    flex-wrap: wrap;
    /* wrap coso nessesario quebrar as caixas dependendo da tela */

}

.div-caixa {
    width: 25%;
    height: 22rem;
    background-color: white;
    min-width: 299px;
    font-size: 1rem;
    font-weight: 600;
    color: #000000;
    box-shadow: 8px 8px 18px rgb(0, 0, 0);
    cursor: pointer;

}

.div-caixa:hover {
    box-shadow: 10px 10px 20px rgb(224, 115, 13);
    transition: 0.8;

}

.section2 .cx01 {
    background-color: #000000;
    color: white;
    text-align: center;
}

.section2 div p {
    font-size: 1.1rem;
    font-weight: 400;
    margin-top: 1.5rem;

}

.section2 .cx02 {
    background-image: url(imagens/camisa-3-corinthians-v2.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22rem 22rem;

}

.section2 .cx03 {
    background-image: url(imagens/atleta-corinthians-1.avif);
    background-size: 22rem 22rem;
    background-repeat: no-repeat;
    background-position: center;

}

.section2 .cx03 button {
    padding: 0.3rem;
    font-weight: 900;
    border: rgb(179, 89, 6);
    border-radius: 7px;
    background-color: rgb(224, 115, 13);
    font-size: 1rem;
    color: white;
}

.section2 .cx03 {
    display: flex;
    align-items: center;
    justify-content: center;

}


.section3 {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 5rem;
    background-image: url(imagens/arena-corinthians.jpg);
    flex-wrap: wrap;
    /* wrap coso nessesario quebrar as caixas 
    dependendo da tela */
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.divsec3-a,
.divsec3-b {

    height: 15rem;
    padding: 1rem;

}

.text-div3 {

    text-align: center;
    margin-top: 5px;
    margin: 1rem;
    font-weight: 600;
}

.fa-youtube {

    color: red;
    font-size: 2rem;

}

.fa-x-twitter {
    color: #000000;
    font-size: 2rem;

}

.fa-instagram {

    color: rgb(211, 16, 211);
    font-size: 2rem;
    font-weight: 900;

}

.div-button-sec3 a button {
    padding: 0.6rem;
    background-color: #000000;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    border: none;



}

.textsec-3b p {
    color: #000000;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    margin-top: 1rem;


}

.section4 {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 5rem;
    background: #423333;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgb(124, 109, 109) 100%, rgb(107, 76, 76) 61%, rgba(255, 247, 247, 0.68) 100%);
    flex-wrap: wrap;
    /* wrap coso nessesario quebrar as caixas dependendo da tela */
    text-align: center;

}

.section4 .cxa {
    background-image: url(imagens/produto.avif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22rem 22rem;

}

.section4 .cxb {
    background-image: url(imagens/produto2.avif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22rem 22rem;
}

.section4 .cxc h2 {
    text-align: center;

}

.section4 .cxc p {
    text-align: center;
    text-decoration: none;
    margin-top: 1rem;
    font-size: 0.9rem;

}

.fa-star,
.fa-star-half {
    text-align: center;
    color: rgb(255, 167, 3);
    font-weight: 900;

}

.section4 .cxc button {
    padding: 0.3rem;
    font-weight: 900;
    border: rgb(179, 89, 6);
    border-radius: 5px;
    background-color: rgb(224, 115, 13);
    font-size: 0.7rem;
    color: white;

}

.rodape {
    background: #423333;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgb(124, 109, 109) 100%, rgb(107, 76, 76) 61%, rgba(255, 247, 247, 0.68) 100%);
    padding: 2.5rem;
    text-align: center;
    font-size: 1.1rem;

}

.content {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;

}

.sicialmidia {
    padding: 1.5rem;
    /* preenchimento e respiro dos icones */

}

.sicialmidia p{
    color: white;
    font-weight: 800;
    
}

.sicialmidia i {
    font-size: 2em;
    /* 32px tamanho do icon */
    margin: 0.5em;
}

.line {
    width: 60%;
    /* largura da linha */
    margin: 0.3rem auto;
    /* espaçamento em torno da linha superio e inferior (0.5) com as laterais automaticas definido pelo navegador*/
    background-color: rgb(224, 115, 13);
    /* cor de fubdo da linha */
    border: none;
    /* remover a borda da linha */
    height: 2px;
    /* manter altura fixa da linha em px*/

}

.div-list ul li a {
    color: white;
    text-decoration: none;

}

.div-list ul li a:hover {
    color: rgb(224, 115, 13);
    transition: 0.8s;

}