/*Configurações padrão*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Futura Condensed Extra Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Futura Condensed Extra Bold'), url('Futura Condensed Extra Bold.woff') format('woff');
}

@import url('https://fonts.cdnfonts.com/css/helvetica-neue-55');

h1,
h2,
h3,
h4 {
    font-family: 'Futura Condensed Extra Bold';
    color: #1A1A1A;
}

p,
span,
a {
    font-family: 'Helvetica Neue', sans-serif;
    color: #1A1A1A;
    text-decoration: none;
}

svg {
    height: 25px;
    width: 25px;
    color: #1A1A1A;
}

::-webkit-scrollbar {
    /* Largura da barra de rolagem */
    width: 10px;
}

::-webkit-scrollbar-track {
    /* Cor de fundo da barra de rolagem */
    background-color: #e0dede;
}

::-webkit-scrollbar-thumb {
    /* Cor do indicador da barra de rolagem */
    background-color: #5e5e5e;
}

::-webkit-scrollbar-thumb:hover {
    /* Cor do indicador da barra de rolagem ao passar o mouse */
    background-color: #747474;
}

/*---------------------------------------------------------------------*/

/*PRIMEIRA PÁGINA - HOME*/

/*Formatação do body*/
#body-home {
    display: grid;
    grid-template-areas:
        "navbar"
        "main";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    height: 100vh;
    margin: 0;
}

/*Formatação da barra de navegação (navbar) do body*/
#body-home nav {
    grid-area: navbar;
    height: 80px;
    width: 100%;
    background-color: #FAFAFA;
    display: grid;
    grid-template-columns: 1fr 6fr 1fr;
    align-content: center;
}

/*Logo da navbar*/
#body-home nav div:nth-of-type(1) {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Links do meio da navbar*/
#body-home nav div:nth-of-type(2) {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 25%;
}

/*Links da direita da navbar*/
#body-home nav div:nth-of-type(3) {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/*Formatação do main*/
#body-home main {
    grid-area: main;
    overflow-y: auto;
    background-color: #FAFAFA;
}

/*Cabeçalho do main*/
#body-home main header {
    width: 100%;
    height: 628px;
    background-image: url(imgs/home-landscape.png);
    padding-left: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

/*Cores dos textos do header*/
#body-home main header h1,
h2,
p {
    color: #FAFAFA;
}

/*Formatação do h1 do header*/
#body-home main header h1 {
    font-size: 50px;
    padding-left: 20px;
}

/*Formatação do h2 do header*/
#body-home main header h2 {
    font-size: 130px;
}

/*Formatação do <a> do header*/
#body-home main header a {
    background-color: #1A1A1A;
    width: 230px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

#body-home main header a:hover {
    transition: 0.5s;
    background-color: #880A13;
}

#section-categories {
    width: 100%;
    display: flex;
    padding-top: 30px;
    padding-bottom: 30px;
    justify-content: space-evenly;
    height: auto;
}

#section-categories a {
    background-color: #880A13;
    width: 140px;
    height: 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FAFAFA;
    transition: 0.5s;
}

#section-categories a:hover {
    background-color: #1A1A1A;
    transition: 0.5s;
}

.divs-article h1 {
    font-size: 50px;
}

.divs-article {
    width: 800px;
    height: 500px;
    background-color: #e8e8e8;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.divs-article div:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-bottom: 30px;
    padding-left: 30px;
    gap: 20px;
}

#div-ronaldo {
    display: flex;
    align-items: end;
}

#div-ronaldo img {
    width: 618px;
    height: 344px;
}

#section-promo {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

#section-promo h1 {
    font-size: 60px;
}

#container-cards {
    width: 1200px;
    height: 450px;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

#cards-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 30px;
    padding: 0 50px;
}

.cards {
    min-width: 300px;
}

#card1 {
    display: grid;
    grid-template-columns: 150px 150px;
    grid-template-rows: 6fr repeat(3, 0.5);
    column-gap: 15px;
}

.background-shirt-div {
    grid-column: span 2;
    background-color: #e8e8e8;
    border-radius: 5px;
    display: flex;
    justify-content: center;
}

#p1 {
    grid-column: span 2;
}

#card1 span {
    grid-column: span 2;
}

#card1 p:nth-of-type(3) {
    text-decoration: line-through red 2px;
}

#main-carousel {
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
    padding-top: 30px;
    margin-bottom: 30px;
}

#card1 p {
    color: #1A1A1A;
    font-family: 'Helvetica Neue', sans-serif;
}

#main-carousel p,
span {
    color: #1A1A1A;
    font-family: 'Helvetica Neue', sans-serif;
}

#p1 {
    font-weight: 700;
    padding-top: 5px;
}

#card1 span {
    background-color: #3A4D8F;
    display: block;
    width: auto;
    max-width: 75px;
    display: flex;
    justify-content: center;
    border-radius: 3px;
    color: #B3B3B3;
    padding: 2px;
    margin-bottom: 4px;
}

#main-carousel span {
    background-color: #3A4D8F;
    display: block;
    width: 50px;
    display: flex;
    justify-content: center;
    border-radius: 3px;
    color: #B3B3B3;
    padding: 2px;
    margin-bottom: 4px;
}

.carousel-btns {
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

#body-home footer {
    width: 100%;
    background-color: #1A1A1A;
    height: auto;
    display: grid;
    grid-template-columns: 7fr 3fr;
    align-items: center;
}

#body-home footer div img {
    height: 40px;
    width: 40px;
}

#body-home footer div p {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 600;
    font-size: 20px;
}

#body-home footer div {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 15px;
    padding-right: 15px;
}

#section-product {
    display: flex;
    width: 100%;
    padding-top: 50px;
}

#div-productImg {
    width: 40%;
    display: flex;
    justify-content: flex-end;
}

#div-productImg div {
    height: 500px;
    width: 500px;
    background-color: #e8e8e8;
    border-radius: 10px;
    display: flex;
}

#infos-product {
    width: 60%;
    display: grid;
    grid-template-rows: 1fr 2fr 0.5fr 1fr 0.2fr 1fr 1.2fr 0.3fr 1.5fr;
    padding-top: 5px;
    padding-left: 7%;
}

#infos-product span {
    background-color: #3A4D8F;
    display: inline-block;
    width: auto;
    height: 25px;
    margin-top: 15px;
    max-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    color: #B3B3B3;
}

#infos-product h3 {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 50px;
}

#infos-product p {
    color: #1A1A1A;
    padding-top: 5px;
    text-decoration: underline;
    cursor: pointer;
}

#sub-divInfos {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

#sub-divInfos p {
    text-decoration: none;
}

#sub-divInfos p:nth-of-type(1) {
    text-decoration: line-through rgba(0, 0, 0, 0.39);
    color: rgba(0, 0, 0, 0.5);
    font-size: 30px;
    margin-bottom: 5px;
}

#sub-divInfos p:nth-of-type(2) {
    color: #3A4D8F;
    font-size: 45px;
}

#line {
    margin-top: 15px;
    border-top: solid 1px rgba(0, 0, 0, 0.5);
    width: 500px;
}

#infos-product h2 {
    color: black;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 500;
    padding-top: 10px;
}

#tams-div {
    display: flex;
    gap: 10px;
    padding-left: 5px;
}

#tams-div div {
    color: #1A1A1A;
    font-family: 'Helvetica Neue', sans-serif;
    height: 50px;
    width: 50px;
    border: solid rgba(0, 0, 0, 0.5) 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    cursor: pointer;
}

#tams-div div:hover {
    transition: 0.3s;
    background-color: #3A4D8F;
    color: #e8e8e8;
}

#p11 {
    padding-left: 5px;
    cursor: pointer;
}

#cartbtn {
    display: flex;
    background-color: #880A13;
    height: 60px;
    width: 450px;
    border-radius: 2px;
    margin-top: 14px;
    color: #e8e8e8;
    font-family: 'Helvetica Neue', sans-serif;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    cursor: pointer;
}

#cartbtn:hover {
    background-color: #72080f;
}

#section-similares {
    padding-top: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

#section-similares h3 {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 35px;
}

#line2 {
    border-top: solid 1px hsla(0, 0%, 0%, 0.5);
    width: 70%;
}

#section-avaliacoes {
    padding-top: 40px;
    padding-left: 20%;
    width: 100%;
    padding-bottom: 50px;
}

#section-avaliacoes h3 {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 30px;
    text-decoration: underline 1px;
}

#comment {
    display: grid;
    grid-template-columns: 0.7fr 7fr;
    grid-template-rows: 0.5fr 1fr 0.5fr;
    height: 100px;
    width: 800px;
    padding-top: 30px;
}

#comment img {
    grid-row: span 3;
    align-self: start;
    justify-self: start;
    width: 50px;
    height: 50px;
}

#comment p {
    color: #1a1a1a;
    font-weight: 600;
}

#comment p:nth-of-type(2) {
    font-weight: 400;
}

#comment p:nth-of-type(3) {
    font-weight: 400;
    text-decoration: underline;
}

#section-buscar {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
}

#section-buscar h3 {
    font-size: 35px;
}

#search-bar {
    width: 1100px;
    height: 45px;
    background-color: #d9d9d9;
    border-radius: 15px;
    margin-top: 20px;
    display: flex;
    justify-content: end;
    gap: 830px;
}

#search-bar div {
    height: 100%;
    width: 80px;
    background-color: #880A13;
    border-radius: 0 15px 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#search-bar div svg {
    width: 25px;
    height: 25px;
    fill: white;
}

#search-bar input {
    background-color: transparent;
    border: transparent;
    outline: none;
    font-family: 'Helvetica Neue', sans-serif;
}

#section-grade {
    width: 100%;
    padding: 5% 18% 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 40px;
}


#card1 a:hover {
    text-decoration: underline;
}

#section-contact {
    width: 100%;
    display: flex;
}

#contact-infos {
    width: 50%;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    padding-left: 8%;
}

#contact-img {
    width: 50%;
    display: flex;
    justify-content: center;
    padding-top: 2%;
    padding-right: 2%;
}

#contact-img img {
    height: 450px;
    width: 450px;
}

#title-ci div {
    width: 10px;
    height: 80%;
    background-color: #880A13;
}

#title-ci {
    display: flex;
    align-items: center;
    gap: 15px;
}

#title-ci h3 {
    font-size: 50px;
}

#infos img{
    height: 25px;
    width: 25px;
}

#infos {
    display: flex;
    height: 50%;
    align-items: center;
    background-color: #d9d9d9;
    width: 50%;
    border-radius: 10px;
    padding-left: 15px;
    gap: 10px;
    margin-top: 20px;
}

#infos input {
    background-color: transparent;
    border: transparent;
    outline: transparent;
    width: 80%;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 15px;
}

#infos input::placeholder {
    font-size: 15px;
    font-style: italic;
}

#send-button {
    display: flex;
    height: 40%;
    align-items: center;
    background-color: #880A13;
    width: 25%;
    border-radius: 10px;
    margin-top: 20px; 
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
}

#send-button:hover {
    background-color: #72080f;
}

#section-infos {
    background: linear-gradient(to top, #890A13 50%, #FAFAFA 50%);
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#infos-div {
    height: 300px;
    width: 300px;
    background-color: #d9d9d9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#text-contact {
    width: 100%;
    background-color: #880A13;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#text-contact h3 {
    font-size: 35px;
    color: #fafafa;
}

.text-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    gap: 15px;
}

#text-div1 {
    padding-left: 13%;
    padding-bottom: 5%;
}

#text-div2 {
    padding-right: 10%;
    padding-bottom: 5%;
}

#section-title-sobre {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
    padding-left: 10%;
    padding-top: 1%;
}

#section-title-sobre div{
    height: 200px;
    width: 10px;
    background-color: #880A13;
}

#section-title-sobre h3 {
    font-size: 60px;
}

#section-txt-sobre {
    width: 100%;
    display: grid;
    grid-template-rows: 1fr 3fr 1fr 3fr 1fr 3fr;
    padding-left: 0%;
    padding-top: 5%;
}

#section-txt-sobre h3 {
    padding-left: 15%;
    font-size: 25px;
    padding-top: 30px;
}

#section-txt-sobre p {
    color: #1A1A1A;
}

#section-txt-sobre div {
    display: flex;
    align-items: center;
    gap: 3.6%;
    padding-left: 5%;
}

#section-txt-sobre div:nth-of-type(2) {
    padding-left: 6.4%;
}

#section-txt-sobre div:nth-of-type(3) {
    padding-left: 6.3%;
}

#title-carrinho {
    font-size: 50px;
    padding-top: 40px;
    padding-left: 100px;
}

#section-carrinho {
    width: 100%;
    padding-left: 100px;
    padding-top: 30px;
    display: grid;
    grid-template-rows: 3fr 3fr 3fr 1fr;
}

#item-carrinho {
    height: 350px;
    width: 85%;
    background-color: #d9d9d9;
    display: flex;
    align-items: center;
    padding-left: 50px;
    margin-top: 50px;
}

#item-img {
    height: 300px;
    width: 300px;
    background-color: #e8e8e8;
    border-radius: 10px;
}

#item-img img {
    width: 300px;
    height: 300px;
}

#item-infos {
    height: 90%;
    display: grid;
    grid-template-rows: 0.5fr 1fr 1fr 1fr;
    width: 70%;
    padding-left: 30px;
}

#item-infos span {
    background-color: #3A4D8F;
    display: block;
    height: 25px;
    width: auto;
    max-width: 75px;
    display: flex;
    justify-content: center;
    border-radius: 3px;
    color: #B3B3B3;
    padding: 5px;
    align-items: center;
    margin-top: 10px;
}

#item-infos p {
    color: #1A1A1A;
    font-size: 45px;
}

#item-infos a {
    color: #3A4D8F;
    font-size: 45px;
    padding-top: 10px;
}

.buyBtn {
    height: 50px;
    width: 300px;
    background-color: #890A13;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#btn1 p {
    color: #d9d9d9;
    font-size: 30px;
}

.buyBtn:hover {
    background-color: #72080f;
}

#bottomBtn p {
    font-size: 25px;
}

#bottomBtn {
    margin-top: 50px;
}

#space {
    height: 100px;
}

#space2 {
    height: 180px;
}