@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /*fontes*/
    --fonte-título:  "Big Shoulders", sans-serif;
    --font-texto:  "DM Sans", sans-serif;
    --font-description:  "Poppins", sans-serif;

    /*cores*/
    --preto: #0c1117;
    --azul: #0053A8;
    --azul-escuro: #07305a;
    --amarelo: #e3cc1d;
}

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

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

::-webkit-scrollbar-track {
  background: var(--azul-escuro); /* Fundo da barra */
  border-radius: 0px;
}

::-webkit-scrollbar-thumb {
  background: var(--amarelo); /* A parte que você arrasta */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--azul); /* Cor ao passar o mouse */
}

header {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: var(--azul);
    border-bottom: 3px solid var(--amarelo);
}

header .back-page a{
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #fff;
    font-family: var(--font-description);
    transition: .5s ease-in-out;
    font-size: 1.1em;
}

header .back-page a:hover {
    gap: 10px;
    color: var(--amarelo);
}

header .logo img{
    width: 150px;
}

header .title h1 {
    color: #fff;
    font-family: var(--fonte-título);
    font-size: 3em;
    font-weight: 400;
}

main {
    min-width: 100%;
}


/*CATALOGO*/

#catalogo {
    position: relative;
    z-index: 0;
    width: 100%;
    min-height: 100vh;
    padding: 80px 0;
    background-image: url("images/brown-oak-wood-textured-design-background.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: inset 0px 16px 20px rgba(255, 255, 255, 0.354);
    display: flex;
    align-items: center;
    flex-direction: column;
}

#catalogo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.582);
    z-index: -1;
}

.titulo {
    font-family: var(--fonte-título);
    color: #fff;
    font-size: 2em;
    text-shadow: 2px 3px 10px rgba(0, 0, 0, 0.443);
    text-align: center;
}
/*Catálogo/Cards*/

#tabela {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#tabela h2{
    position: relative;
    color: #fff;
    font-family: var(--fonte-título);
    font-size: 2.5em;
    display: flex;
    width: 100%;
    justify-content: start;
    margin: 15px;
    text-shadow: 1px 2px 8px black;
}

#tabela h2::before {
    position: absolute;
    content: '';
    height: 4px;
    width: 98%;
    background: linear-gradient(to left, var(--amarelo), #fff, var(--amarelo));
    bottom: -6px;
}

.row-cards {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    flex-wrap: wrap;
}

.cards-produtos {
    background-color: #ffffff;
    width: 200px;
    height: 260px;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.612);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px;
}

.cards-produtos .imagem {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
}

.cards-produtos .imagem img{
    width: 60%;
    border-radius: 10px;
}

/*DESCRIÇÃO*/

.cards-produtos .descricao p{
    margin: 10px;
    text-align: center;
    font-family: var(--font-description);
    font-weight: 700;
    color: #2a2b2c;
    font-size: 0.8em;
}


/*catalogo/link page */
#saibamais {
    z-index: 10;
    padding-top: 50px;
}

.link-page-catalogo a{
    text-decoration: none;
    font-family: var(--font-texto);
    font-size: 2em;
    font-weight: 700;
    color: #fff;
    background-color: var(--azul);
    border: 3px solid #fff;
    padding: 18px;
    transition: background-color .4s ease-in-out;
    text-shadow: 2px 3px 10px rgba(0, 0, 0, 0.443);
    cursor: pointer;
}

.link-page-catalogo a:hover{
    background-color: #ffffffe2;
    color: var(--azul);
    border: 2px solid var(--amarelo);
    opacity: 1;
    transform: translateX(0);
    text-shadow: none;
}

.link-page-catalogo a:hover i{
    opacity: 1;
    transform: translateX(0);
    width: 20px;
}

.link-page-catalogo i{
    width: 0;
    opacity: 0;
    margin-left: 0;
    transition: all 0.2s ease;
}

@media (max-width: 768px) {
/*CATÁLOGO*/
#tabela .row-cards {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    gap: 15px;
    padding: 0 16px;
    width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#tabela .row-cards .cards-produtos {
    flex: 0 0 auto;
    width: 200px;
}

/*escondendo a scroll bar*/

#tabela .row-cards::-webkit-scrollbar {
    display: none;
}
}