@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;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');


  /*@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
MAYKONSILVEIA.COM.BR */
/* Aplica estilos globais a todos os elementos MAYKONSILVEIA.COM.BR */
* {
    margin: 0; /* Remove margem MAYKONSILVEIA.COM.BR MAYKONSILVEIA.COM.BR */
    padding: 0; /* Remove preenchimento MAYKONSILVEIA.COM.BR */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura/altura MAYKONSILVEIA.COM.BR */
    outline: none; /* Remove contorno (por exemplo, em campos de entrada focados) MAYKONSILVEIA.COM.BR */
    border: none;
    text-decoration: none; /* Remove decoração de texto (por exemplo, sublinhados em links) MAYKONSILVEIA.COM.BR */
    list-style: none; /* Remove estilo de lista (por exemplo, marcadores em listas) MAYKONSILVEIA.COM.BR */
    scroll-behavior: smooth; /* Suaviza a rolagem da página MAYKONSILVEIA.COM.BR */
    font-family: 'Poppins', sans-serif; /* Define a fonte padrão MAYKONSILVEIA.COM.BR */
}

/* Define o tamanho da fonte base para HTML MAYKONSILVEIA.COM.BR */
html {
    font-size: 65.5%; /* 65.5% do tamanho padrão do navegador MAYKONSILVEIA.COM.BR */
}

/* Define variáveis globais de cores e estilos MAYKONSILVEIA.COM.BR */
:root {
    --cor-principal: #d117ff; /* Cor principal MAYKONSILVEIA.COM.BR */
    --cor-escura: #340474; /* Cor escura MAYKONSILVEIA.COM.BR */
    --cor-branca: #ffffff; /* Cor branca MAYKONSILVEIA.COM.BR */
    --cor-busca: #f2f2f2; /* Cor branca MAYKONSILVEIA.COM.BR */
    --cor-7-2: #141622; /* Cor branca MAYKONSILVEIA.COM.BR */
    --cor-7-3: rgba(171, 13, 211, 0.5); /* Cor branca MAYKONSILVEIA.COM.BR */
    --cor-7-4: #27AE60; /* Cor whatsapp MAYKONSILVEIA.COM.BR */
    --cor-7-5: #09cc5a; /* Cor whatsapp hover MAYKONSILVEIA.COM.BR */
    --cor-7-6: #6809e4; /* Cor branca MAYKONSILVEIA.COM.BR */
    --cor-7-7: #d117ff; /* Cor branca MAYKONSILVEIA.COM.BR */
}

/* Estilos para o topo do site MAYKONSILVEIA.COM.BR */
/*== INICIO TOPO SUPERIOR SITE ==MAYKONSILVEIA.COM.BR */

/* Estiliza a caixa externa no cabeçalho do site MAYKONSILVEIA.COM.BR */
.super-topo .super-topo-box {
    width: 100%; /* Largura total MAYKONSILVEIA.COM.BR */
    background: var(--cor-principal); /* Cor de fundo principal MAYKONSILVEIA.COM.BR */
}

.super-topo .super-topo-box .super-topo-box-corpo{
    display: flex; /* Usa flexbox para layout MAYKONSILVEIA.COM.BR */
    background: var(--cor-escura); /* Cor de fundo escura MAYKONSILVEIA.COM.BR */
    align-items: center; /* Centraliza verticalmente os itens MAYKONSILVEIA.COM.BR */
    justify-content: space-between; /* Espaço entre itens distribuído igualmente MAYKONSILVEIA.COM.BR */
    padding: 1rem 0; /* Preenchimento vertical de 1rem MAYKONSILVEIA.COM.BR */
    clip-path: polygon(8% 0%, 92% 0%, 96% 100%, 5% 100%); /* Recorte personalizado da caixa MAYKONSILVEIA.COM.BR */
}

/* Estiliza a primeira coluna na caixa interna MAYKONSILVEIA.COM.BR */
.super-topo-box .super-topo-box-corpo .col-1 {
    display: flex; /* Usa flexbox para layout MAYKONSILVEIA.COM.BR */
    gap: 1rem; /* Espaço de 1rem entre itens MAYKONSILVEIA.COM.BR */
    align-items: center; /* Centraliza os itens verticalmente MAYKONSILVEIA.COM.BR */
    justify-content: center; /* Centraliza os itens horizontalmente MAYKONSILVEIA.COM.BR */
    color: var(--cor-branca); /* Cor do texto branco MAYKONSILVEIA.COM.BR */
    margin-left: 13rem; /* Margem esquerda de 13rem MAYKONSILVEIA.COM.BR */
}


.super-topo-box .super-topo-box-corpo .col-1 span{
    font-size: 1.1rem;
}

.super-topo-box .super-topo-box-corpo .col-1 span i{
    color: var(--cor-principal);
    padding-right: 0.5rem;
    font-size: 1.1rem;
}

.super-topo-box .super-topo-box-corpo .col-2{
    display: flex; /* Usa flexbox para layout MAYKONSILVEIA.COM.BR */
    justify-content: center; /* Centraliza os itens horizontalmente MAYKONSILVEIA.COM.BR */
    align-items: center; /* Centraliza os itens verticalmente MAYKONSILVEIA.COM.BR */
    gap: 1rem; /* Espaço de 1rem entre itens MAYKONSILVEIA.COM.BR */
    color: var(--cor-branca); /* Cor do texto branco MAYKONSILVEIA.COM.BR */
    margin-right: 13rem; /* Margem esquerda de 13rem MAYKONSILVEIA.COM.BR */
}

/* Estiliza links, spans e ícones dentro da coluna 2 do topo superior MAYKONSILVEIA.COM.BR */
.super-topo-box .super-topo-box-corpo .col-2 a,
.super-topo-box .super-topo-box-corpo .col-2 span,
.super-topo-box .super-topo-box-corpo .col-2 .social i {
    color: var(--cor-branca); /* Define a cor do texto como branca MAYKONSILVEIA.COM.BR */
    font-size: 1.1rem; /* Define o tamanho da fonte MAYKONSILVEIA.COM.BR */
    transition: 0.4s; /* Transição suave para alterações de estilo MAYKONSILVEIA.COM.BR */
}

/* Estiliza a seção de mídia social na coluna 2 do topo superior MAYKONSILVEIA.COM.BR */
.super-topo-box .super-topo-box-corpo .col-2 .social {
    display: flex; /* Usa flexbox para layout MAYKONSILVEIA.COM.BR */
    gap: 0.9rem; /* Espaço de 0.9rem entre itens MAYKONSILVEIA.COM.BR */
}

/* Estiliza ícones dentro de links na coluna 2 do topo superior MAYKONSILVEIA.COM.BR */
.super-topo-box .super-topo-box-corpo .col-2 a i {
    padding-right: 0.5rem; /* Espaço à direita do ícone MAYKONSILVEIA.COM.BR */
}

/* Altera a cor dos ícones e links ao passar o mouse MAYKONSILVEIA.COM.BR */
.super-topo-box .super-topo-box-corpo .col-2 i:hover,
.super-topo-box .super-topo-box-corpo .col-2 a:hover {
    color: var(--cor-principal); /* Muda a cor para a cor principal MAYKONSILVEIA.COM.BR */
}

/* Estilos responsivos para telas com largura máxima de 1150px MAYKONSILVEIA.COM.BR */
@media(max-width: 1150px) {
    /* Ajusta margens das colunas no topo superior MAYKONSILVEIA.COM.BR */
    .super-topo-box .super-topo-box-corpo .col-1 {
        margin-left: 8rem; /* Margem esquerda para a coluna 1 MAYKONSILVEIA.COM.BR */
    }

    .super-topo-box .super-topo-box-corpo .col-2 {
        margin-right: 8rem; /* Margem direita para a coluna 2 MAYKONSILVEIA.COM.BR */
    }
}

/* Estilos responsivos para telas com largura máxima de 991px MAYKONSILVEIA.COM.BR */
@media(max-width: 991px) {
    /* Esconde o topo superior em telas menores MAYKONSILVEIA.COM.BR */
    .super-topo {
        display: none; /* Oculta o topo superior MAYKONSILVEIA.COM.BR */
    }
}

/*== FIM TOPO SUPERIOR SITE MSFLIX RESPONSIVO ==MAYKONSILVEIA.COM.BR */

/*== FIM TOPO SUPERIOR SITE ==MAYKONSILVEIA.COM.BR */


/*== INICIO CABEÇALHO DO SITE E MENU SUPERIOR SITE ==MAYKONSILVEIA.COM.BR */
/* Estiliza o menu principal do site MAYKONSILVEIA.COM.BR */
.topo-menu-site {
    display: flex; /* Usa display flex para um layout flexível MAYKONSILVEIA.COM.BR */
    align-items: center; /* Centraliza os itens verticalmente MAYKONSILVEIA.COM.BR */
    justify-content: space-between; /* Espaço distribuído igualmente entre os itens MAYKONSILVEIA.COM.BR */
    width: 100%; /* Largura total do elemento MAYKONSILVEIA.COM.BR */
    position: sticky; /* Posicionamento fixo ao rolar a página MAYKONSILVEIA.COM.BR */
    left: 0; /* Alinha à esquerda MAYKONSILVEIA.COM.BR */
    top: 0; /* Posiciona no topo MAYKONSILVEIA.COM.BR */
    padding: 0.5rem 9.5%; /* Preenchimento ao redor MAYKONSILVEIA.COM.BR */
    background: var(--cor-branca); /* Cor de fundo branca MAYKONSILVEIA.COM.BR */
    box-shadow: 0 0 5px rgba(190, 190, 190, 0.5), /* Sombra para destacar MAYKONSILVEIA.COM.BR */
               0 0 10px rgba(190, 190, 190, 0.5);
    z-index: 1000; /* Define a ordem de empilhamento MAYKONSILVEIA.COM.BR */
    transition: 0.4s ease; /* Transição suave para alterações de estilo MAYKONSILVEIA.COM.BR */
}

/* Estiliza o menu quando recebe a classe 'sticky' MAYKONSILVEIA.COM.BR */
.topo-menu-site.sticky {
    padding: 0 9.5%; /* Ajusta o preenchimento MAYKONSILVEIA.COM.BR */
}

/* Estiliza a imagem do logo dentro do menu do site MAYKONSILVEIA.COM.BR */
.topo-menu-site .logo img {
    width: 200px; /* Largura fixa para a imagem do logo MAYKONSILVEIA.COM.BR */
}

/* Estiliza a navegação dentro do menu do site MAYKONSILVEIA.COM.BR */
.topo-menu-site nav {
    display: flex; /* Usa display flex para um layout flexível MAYKONSILVEIA.COM.BR */
    align-items: center; /* Centraliza os itens verticalmente MAYKONSILVEIA.COM.BR */
    justify-content: center; /* Centraliza os itens horizontalmente MAYKONSILVEIA.COM.BR */
    gap: 2rem; /* Espaço de 2rem entre os itens MAYKONSILVEIA.COM.BR */
}


/* Estiliza os itens da lista no menu do site MAYKONSILVEIA.COM.BR */
nav .menuSite ul li {
    padding: 2.5rem 0.5rem; /* Espaçamento vertical e horizontal MAYKONSILVEIA.COM.BR */
}

/* Estiliza os links dentro do menu do site MAYKONSILVEIA.COM.BR */
nav .menuSite .menuLinks {
    display: flex; /* Usa flexbox para layout MAYKONSILVEIA.COM.BR */
    position: relative; /* Posição relativa para posicionamento de elementos filhos MAYKONSILVEIA.COM.BR */
    align-items: center; /* Centraliza os itens verticalmente MAYKONSILVEIA.COM.BR */
    justify-content: center; /* Centraliza os itens horizontalmente MAYKONSILVEIA.COM.BR */
    gap: 1.5rem; /* Espaço entre os itens MAYKONSILVEIA.COM.BR */
}

/* Estiliza os links individuais dentro do menu MAYKONSILVEIA.COM.BR */
nav .menuSite .menuLinks li a {
    position: relative; /* Posição relativa para ajustes de posicionamento MAYKONSILVEIA.COM.BR */
    color: var(--cor-escura); /* Cor do texto MAYKONSILVEIA.COM.BR */
    font-size: 1.4rem; /* Tamanho da fonte MAYKONSILVEIA.COM.BR */
    font-weight: 600; /* Peso da fonte MAYKONSILVEIA.COM.BR */
}

/* Estiliza a seção de anúncios no menu MAYKONSILVEIA.COM.BR */
nav .menuAnunciar {
    display: flex; /* Usa flexbox para layout MAYKONSILVEIA.COM.BR */
    align-items: center; /* Centraliza os itens verticalmente MAYKONSILVEIA.COM.BR */
    gap: 1.5rem; /* Espaço entre os itens MAYKONSILVEIA.COM.BR */
}

/* Estiliza os ícones na seção de anúncios MAYKONSILVEIA.COM.BR */
nav .menuAnunciar i {
    font-size: 1.9rem; /* Tamanho da fonte do ícone MAYKONSILVEIA.COM.BR */
    color: var(--cor-escura); /* Cor do ícone MAYKONSILVEIA.COM.BR */
    cursor: pointer; /* Cursor de ponteiro para indicar clicabilidade MAYKONSILVEIA.COM.BR */
}

/* Estiliza o botão de adicionar anúncios MAYKONSILVEIA.COM.BR */
nav .menuAnunciar .addBtn {
    position: relative; /* Posição relativa MAYKONSILVEIA.COM.BR */
    color: var(--cor-branca); /* Cor do texto MAYKONSILVEIA.COM.BR */
    background: var(--cor-principal); /* Cor de fundo principal MAYKONSILVEIA.COM.BR */
    padding: 1.2rem 1.5rem; /* Preenchimento ao redor do texto MAYKONSILVEIA.COM.BR */
    font-size: 1.6rem; /* Tamanho da fonte MAYKONSILVEIA.COM.BR */
    border-radius: 14px; /* Bordas arredondadas MAYKONSILVEIA.COM.BR */
    font-weight: 600; /* Peso da fonte MAYKONSILVEIA.COM.BR */
    cursor: pointer; /* Cursor de ponteiro MAYKONSILVEIA.COM.BR */
    transition: 0.7s; /* Transição suave para alterações de estilo MAYKONSILVEIA.COM.BR */
}

/* Altera o estilo do botão ao passar o mouse MAYKONSILVEIA.COM.BR */
nav .menuAnunciar .addBtn:hover {
    background: var(--cor-escura); /* Cor de fundo escura MAYKONSILVEIA.COM.BR */
    color: var(--cor-branca); /* Cor do texto branca MAYKONSILVEIA.COM.BR */
}

/* Estiliza ícones dentro do botão de adicionar anúncios MAYKONSILVEIA.COM.BR */
nav .menuAnunciar .addBtn i,
nav .menuAnunciar .addBtn i:hover {
    color: var(--cor-branca); /* Cor do ícone branca MAYKONSILVEIA.COM.BR */
    padding-right: 0.5rem; /* Espaço à direita do ícone MAYKONSILVEIA.COM.BR */
}

/* Estiliza o botão do menu para telas menores MAYKONSILVEIA.COM.BR */
#menuBtn {
    font-size: 3.5rem; /* Tamanho grande da fonte para melhor visibilidade MAYKONSILVEIA.COM.BR */
}

/* Altera a cor do ícone ao passar o mouse MAYKONSILVEIA.COM.BR */
nav .menuAnunciar i:hover {
    color: var(--cor-principal); /* Muda a cor para a cor principal MAYKONSILVEIA.COM.BR */
}

/* Altera a cor dos links ao passar o mouse ou quando estão ativos MAYKONSILVEIA.COM.BR */
nav .menuSite ul li a:hover,
nav .menuSite ul li a.active {
    color: var(--cor-principal); /* Muda a cor para a cor principal MAYKONSILVEIA.COM.BR */
}


/* INICIO ------------ menuSub 1 -----------MAYKONSILVEIA.COM.BR */
/* Estiliza os submenus no menu do site MAYKONSILVEIA.COM.BR */
nav .menuSite ul li .menuSub {
    display: flex; /* Usa display flex para um layout flexível MAYKONSILVEIA.COM.BR */
    flex-direction: column; /* Organiza itens em coluna MAYKONSILVEIA.COM.BR */
    align-items: left; /* Alinha itens à esquerda MAYKONSILVEIA.COM.BR */
    position: absolute; /* Posicionamento absoluto para sobreposição MAYKONSILVEIA.COM.BR */
    top: 7rem; /* Posiciona 7rem abaixo do elemento pai MAYKONSILVEIA.COM.BR */
    text-align: justify; /* Justifica o texto MAYKONSILVEIA.COM.BR */
    width: 180px; /* Largura fixa MAYKONSILVEIA.COM.BR */
    background: var(--cor-branca); /* Cor de fundo branca MAYKONSILVEIA.COM.BR */
    border-radius: 10px; /* Bordas arredondadas MAYKONSILVEIA.COM.BR */
    box-shadow: 0 0 5px rgba(190, 190, 190, 0.5); /* Sombra para destaque MAYKONSILVEIA.COM.BR */
    padding: 1rem 0 0; /* Preenchimento interno MAYKONSILVEIA.COM.BR */
    display: none; /* Oculto inicialmente MAYKONSILVEIA.COM.BR */
}

/* Transição suave para itens do menu MAYKONSILVEIA.COM.BR */
nav .menuSite ul li {
    transition: 0.4s ease; /* Transição suave para alterações de estilo MAYKONSILVEIA.COM.BR */
}

/* Mostra o submenu ao passar o mouse sobre o item do menu MAYKONSILVEIA.COM.BR */
nav .menuSite ul li:hover .menuSub {
    display: flex; /* Exibe o submenu MAYKONSILVEIA.COM.BR */
}

/* Estiliza os itens do submenu MAYKONSILVEIA.COM.BR */
nav .menuSite ul li .menuSub li {
    border-bottom: 1px solid rgba(190, 190, 190, 0.5); /* Borda inferior para separação MAYKONSILVEIA.COM.BR */
    padding: 0.5rem 0 1rem 1rem; /* Preenchimento interno MAYKONSILVEIA.COM.BR */
    z-index: 100; /* Ordem de empilhamento MAYKONSILVEIA.COM.BR */
    overflow: hidden; /* Oculta conteúdo excedente MAYKONSILVEIA.COM.BR */
}

/* Estiliza os links dentro dos itens do submenu MAYKONSILVEIA.COM.BR */
nav .menuSite ul li .menuSub li a {
    font-size: 1.2rem; /* Tamanho da fonte MAYKONSILVEIA.COM.BR */
    transition: 0.4s ease; /* Transição suave para alterações de estilo MAYKONSILVEIA.COM.BR */
}

/* Altera o estilo do link ao passar o mouse sobre ele MAYKONSILVEIA.COM.BR */
nav .menuSite ul li .menuSub li:hover a {
    font-size: 1.3rem; /* Aumenta o tamanho da fonte MAYKONSILVEIA.COM.BR */
    padding-left: 0.5rem; /* Espaço à esquerda do link MAYKONSILVEIA.COM.BR */
}

/* FIM ------------ menuSub 1 -----------MAYKONSILVEIA.COM.BR */

/* INICIO ------------ menuSub 2 -----------MAYKONSILVEIA.COM.BR */

/* Estiliza os submenus secundários MAYKONSILVEIA.COM.BR */
.menuSub li .menuSub-dois {
    position: absolute; /* Posicionamento absoluto para sobreposição MAYKONSILVEIA.COM.BR */
    left: 182px; /* Posicionado 182px à esquerda do elemento pai MAYKONSILVEIA.COM.BR */
    width: 180px; /* Largura fixa MAYKONSILVEIA.COM.BR */
    display: flex; /* Usa display flex para um layout flexível MAYKONSILVEIA.COM.BR */
    flex-direction: column; /* Organiza itens em coluna MAYKONSILVEIA.COM.BR */
    margin-top: -3rem; /* Ajusta a margem superior MAYKONSILVEIA.COM.BR */
    align-items: left; /* Alinha itens à esquerda MAYKONSILVEIA.COM.BR */
    text-align: justify; /* Justifica o texto MAYKONSILVEIA.COM.BR */
    background: var(--cor-branca); /* Cor de fundo branca MAYKONSILVEIA.COM.BR */
    padding: 1rem 0 0; /* Preenchimento interno MAYKONSILVEIA.COM.BR */
    box-shadow: 0 0 5px rgba(190, 190, 190, 0.5); /* Sombra para destaque MAYKONSILVEIA.COM.BR */
    border-radius: 10px; /* Bordas arredondadas MAYKONSILVEIA.COM.BR */
    z-index: 111; /* Ordem de empilhamento MAYKONSILVEIA.COM.BR */
    overflow: hidden; /* Oculta conteúdo excedente MAYKONSILVEIA.COM.BR */
    display: none; /* Oculto inicialmente MAYKONSILVEIA.COM.BR */
}

/* Mostra o submenu secundário ao passar o mouse sobre o item do submenu MAYKONSILVEIA.COM.BR */
.menuSub li:hover .menuSub-dois {
    display: flex; /* Exibe o submenu secundário MAYKONSILVEIA.COM.BR */
}

/* Estiliza a seta indicativa para o submenu secundário MAYKONSILVEIA.COM.BR */
.menuSub li .setaBaixo {
    position: absolute; /* Posicionamento absoluto MAYKONSILVEIA.COM.BR */
    left: 150px; /* Posicionado 150px à esquerda do elemento pai MAYKONSILVEIA.COM.BR */
    top: 5px; /* Posicionado 5px abaixo do topo do elemento pai MAYKONSILVEIA.COM.BR */
    color: var(--cor-escura); /* Cor da seta MAYKONSILVEIA.COM.BR */
}

/* Mantém a cor da seta ao passar o mouse sobre o item do submenu MAYKONSILVEIA.COM.BR */
.menuSub li:hover .setaBaixo {
    color: var(--cor-escura); /* Cor da seta MAYKONSILVEIA.COM.BR */
}

/* FIM ------------ menuSub 2 -----------MAYKONSILVEIA.COM.BR */

/* INICIO ------------ CELULAR CABEÇALHO DO SITE E MENU -----------MAYKONSILVEIA.COM.BR */
/* Estilos para telas com largura máxima de 1370px MAYKONSILVEIA.COM.BR */
@media(max-width:1370px) {
    /* Reduz o espaço entre itens na seção de anúncios MAYKONSILVEIA.COM.BR */
    nav .menuAnunciar {
        gap: 1rem; /* Espaço entre os itens reduzido MAYKONSILVEIA.COM.BR */
    }

    /* Reduz o espaço entre os links do menu MAYKONSILVEIA.COM.BR */
    nav .menuSite .menuLinks {
        gap: 0.5rem; /* Espaço entre os links reduzido MAYKONSILVEIA.COM.BR */
    }
}

/* Estilos para telas com largura máxima de 1190px MAYKONSILVEIA.COM.BR */
@media(max-width:1190px) {
    /* Ajusta o preenchimento dos itens da lista no menu MAYKONSILVEIA.COM.BR */
    nav .menuSite ul li {
        padding: 2.1rem 0; /* Preenchimento vertical ajustado MAYKONSILVEIA.COM.BR */
    }

    /* Oculta o botão de adicionar anúncios em telas menores MAYKONSILVEIA.COM.BR */
    nav .menuAnunciar .addBtn {
        display: none; /* Botão ocultado MAYKONSILVEIA.COM.BR */
    }
}

/* Estilos para telas com largura máxima de 991px MAYKONSILVEIA.COM.BR */
@media(max-width:991px) {
    /* Altera o posicionamento e a visibilidade dos links do menu MAYKONSILVEIA.COM.BR */
    nav .menuSite .menuLinks {
        position: absolute; /* Posicionamento absoluto MAYKONSILVEIA.COM.BR */
        top: 5.3rem; /* Posicionado 5.3rem abaixo do topo MAYKONSILVEIA.COM.BR */
        display: block; /* Exibição em bloco MAYKONSILVEIA.COM.BR */
        width: 100%; /* Largura total MAYKONSILVEIA.COM.BR */
        left: 0px; /* Alinhado à esquerda MAYKONSILVEIA.COM.BR */
        background: var(--cor-branca); /* Cor de fundo branca MAYKONSILVEIA.COM.BR */
        box-shadow: 0 0 5px rgba(190, 190, 190, 0.5), /* Sombra para destaque MAYKONSILVEIA.COM.BR */
                    0 0 10px rgba(190, 190, 190, 0.5);
        padding-left: 30px; /* Preenchimento à esquerda MAYKONSILVEIA.COM.BR */
        transition: 0.5s ease-in-out; /* Transição suave para alterações de estilo MAYKONSILVEIA.COM.BR */
        display: none; /* Inicialmente oculto (será alterado por JavaScript) MAYKONSILVEIA.COM.BR */
    }

    /* Estilos para quando os links do menu estão ativos (visíveis) MAYKONSILVEIA.COM.BR */
    nav .menuSite .menuLinks.active {
        display: block; /* Exibe os links do menu MAYKONSILVEIA.COM.BR */
    }

    /* Ajusta o preenchimento do menu principal quando 'sticky' MAYKONSILVEIA.COM.BR */
    .topo-menu-site.sticky {
        padding: 0.6rem 9.5%; /* Ajuste do preenchimento MAYKONSILVEIA.COM.BR */
    }

    /* Ajusta o preenchimento dos itens da lista no menu MAYKONSILVEIA.COM.BR */
    nav .menuSite ul li {
        padding: 1rem 0; /* Preenchimento vertical reduzido MAYKONSILVEIA.COM.BR */
    }

    /* Altera o posicionamento dos submenus MAYKONSILVEIA.COM.BR */
    nav .menuSite ul li .menuSub {
        position: sticky; /* Posicionamento fixo ao rolar a página MAYKONSILVEIA.COM.BR */
        display: none; /* Inicialmente oculto MAYKONSILVEIA.COM.BR */
    }

    /* Ajusta o posicionamento dos submenus secundários ao passar o mouse MAYKONSILVEIA.COM.BR */
    .menuSub li:hover .menuSub-dois {
        position: sticky; /* Posicionamento fixo MAYKONSILVEIA.COM.BR */
        margin-top: 0rem; /* Margem superior ajustada MAYKONSILVEIA.COM.BR */
    }

    /* Oculta o ícone do carrinho de compras na seção de anúncios MAYKONSILVEIA.COM.BR */
    nav .menuAnunciar i.cart {
        display: none; /* Ícone do carrinho ocultado MAYKONSILVEIA.COM.BR */
    }
}

/* Estilos para telas com largura máxima de 420px MAYKONSILVEIA.COM.BR */
@media(max-width:420px) {
    /* Ajusta a largura da imagem do logo no menu do site MAYKONSILVEIA.COM.BR */
    .topo-menu-site .logo img {
        width: 120px; /* Reduz a largura do logo para 120px MAYKONSILVEIA.COM.BR */
    }

    /* Ajusta a posição dos links do menu MAYKONSILVEIA.COM.BR */
    nav .menuSite .menuLinks {
        top: 4.6rem; /* Posiciona os links 4.6rem abaixo do topo MAYKONSILVEIA.COM.BR */
    }
}

/* FIM ------------ CELULAR CABEÇALHO DO SITE E MENU -----------MAYKONSILVEIA.COM.BR */

/*== FIM CABEÇALHO DO SITE E MENU SUPERIOR SITE ==MAYKONSILVEIA.COM.BR */



/*== INICIO SLIDE DESTAQUE DO SITE ==MAYKONSILVEIA.COM.BR */
/* Estiliza o contêiner do slide de destaque MAYKONSILVEIA.COM.BR */
.slide-destaque .slide {
    display: flex; /* Usa flexbox para um layout flexível MAYKONSILVEIA.COM.BR */
    flex-wrap: wrap; /* Permite que os itens se enrolem para a próxima linha MAYKONSILVEIA.COM.BR */
    align-items: center; /* Centraliza os itens verticalmente MAYKONSILVEIA.COM.BR */
    justify-content: center; /* Centraliza os itens horizontalmente MAYKONSILVEIA.COM.BR */
    width: 100%; /* Largura total MAYKONSILVEIA.COM.BR */
    height: 110vh; /* Altura baseada em 110% da altura da viewport MAYKONSILVEIA.COM.BR */
    padding: 0 15rem; /* Preenchimento horizontal de 15rem MAYKONSILVEIA.COM.BR */
}

/* Estiliza a primeira coluna dentro do slide MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 {
    flex: 1 1 20rem; /* Flexibilidade e base de 20rem para a largura MAYKONSILVEIA.COM.BR */
}

/* Estiliza o elemento h4 dentro da primeira coluna do slide MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 h4 {
    font-size: 2.5rem; /* Tamanho da fonte de 2.5rem MAYKONSILVEIA.COM.BR */
    color: var(--cor-principal); /* Cor principal para o texto MAYKONSILVEIA.COM.BR */
    text-transform: uppercase; /* Transforma o texto em maiúsculas MAYKONSILVEIA.COM.BR */
    letter-spacing: 3px; /* Espaçamento de 3px entre as letras MAYKONSILVEIA.COM.BR */
    padding-bottom: 3rem; /* Preenchimento inferior de 3rem MAYKONSILVEIA.COM.BR */
}

/* Estiliza o elemento h1 dentro da primeira coluna do slide MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 h1 {
    color: var(--cor-branca); /* Cor branca para o texto MAYKONSILVEIA.COM.BR */
    font-size: 3.2rem; /* Tamanho da fonte de 3.2rem MAYKONSILVEIA.COM.BR */
    text-transform: capitalize; /* Primeira letra de cada palavra em maiúscula MAYKONSILVEIA.COM.BR */
    letter-spacing: 3px; /* Espaçamento de 3px entre as letras MAYKONSILVEIA.COM.BR */
}

/* Estiliza o elemento span dentro do h1 no slide MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 h1 span {
    color: var(--cor-principal); /* Cor principal para o texto MAYKONSILVEIA.COM.BR */
}


/* Estiliza o parágrafo na primeira coluna do slide de destaque MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 p {
    color: var(--cor-branca); /* Cor branca para o texto MAYKONSILVEIA.COM.BR */
    font-size: 1.4rem; /* Tamanho da fonte de 1.4rem MAYKONSILVEIA.COM.BR */
    letter-spacing: 2px; /* Espaçamento de 2px entre as letras MAYKONSILVEIA.COM.BR */
    padding-top: 2rem; /* Preenchimento superior de 2rem MAYKONSILVEIA.COM.BR */
}

/* Estiliza a seção de botões na primeira coluna do slide MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 .button {
    display: flex; /* Usa flexbox para layout flexível MAYKONSILVEIA.COM.BR */
    flex-wrap: wrap; /* Permite que os itens se enrolem para a próxima linha MAYKONSILVEIA.COM.BR */
    gap: 1rem; /* Espaço de 1rem entre os itens MAYKONSILVEIA.COM.BR */
    padding-top: 4rem; /* Preenchimento superior de 4rem MAYKONSILVEIA.COM.BR */
}

/* Estiliza os botões dentro da seção de botões MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 .button button {
    font-size: 1.7rem; /* Tamanho da fonte de 1.7rem MAYKONSILVEIA.COM.BR */
    font-weight: 600; /* Peso da fonte de 600 MAYKONSILVEIA.COM.BR */
    letter-spacing: 2px; /* Espaçamento de 2px entre as letras MAYKONSILVEIA.COM.BR */
    border-radius: 10px; /* Bordas arredondadas MAYKONSILVEIA.COM.BR */
    position: relative; /* Posicionamento relativo MAYKONSILVEIA.COM.BR */
    padding: 1.8rem 2.8rem 1.8rem 2rem; /* Preenchimento ao redor do botão MAYKONSILVEIA.COM.BR */
    transition: 0.5s ease; /* Transição suave para alterações de estilo MAYKONSILVEIA.COM.BR */
    cursor: pointer; /* Cursor de ponteiro para indicar clicabilidade MAYKONSILVEIA.COM.BR */
}

/* Estiliza ícones dentro dos botões MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 .button button i {
    font-size: 2.5rem; /* Tamanho da fonte do ícone de 2.5rem MAYKONSILVEIA.COM.BR */
    position: absolute; /* Posicionamento absoluto MAYKONSILVEIA.COM.BR */
    top: 33%; /* Posicionado a 33% do topo MAYKONSILVEIA.COM.BR */
    right: -1rem; /* Posicionado 1rem à direita MAYKONSILVEIA.COM.BR */
    transform: translate(-40%); /* Deslocamento para ajuste de posicionamento MAYKONSILVEIA.COM.BR */
}

/* Estiliza o botão 'lojasBtn' MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 .button a.lojasBtn {
    background: var(--cor-principal); /* Cor de fundo principal MAYKONSILVEIA.COM.BR */
    color: var(--cor-branca); /* Cor do texto branca MAYKONSILVEIA.COM.BR */
    padding:15px;
    border-radius:5px;
    font-size: 1.5rem;
}

/* Estiliza o botão 'sobreBtn' MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 .button a.sobreBtn {
    background: var(--cor-branca); /* Cor de fundo principal MAYKONSILVEIA.COM.BR */
    color: var(--cor-principal); /* Cor do texto principal MAYKONSILVEIA.COM.BR */
    padding:15px;
    border-radius:5px;
    font-size: 1.5rem;
}

/* Estiliza os botões ao passar o mouse sobre eles MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 .button a.lojasBtn:hover,
.slide-destaque .slide .col-1 .button a.sobreBtn:hover {
    background: var(--cor-escura); /* Cor de fundo escura MAYKONSILVEIA.COM.BR */
    color: var(--cor-branca); /* Cor do texto branca MAYKONSILVEIA.COM.BR */
}

/* Estiliza a segunda coluna do slide de destaque MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-2 {
    flex: 1 1 40rem; /* Flexibilidade e base de 40rem para a largura MAYKONSILVEIA.COM.BR */
    padding-top: 3rem; /* Preenchimento superior de 3rem MAYKONSILVEIA.COM.BR */
}

/* Estiliza a imagem na segunda coluna do slide MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-2 img {
    width: 80%; /* Largura de 80% MAYKONSILVEIA.COM.BR */
    height: auto; /* Altura automática para manter a proporção MAYKONSILVEIA.COM.BR */
}

/* Estiliza os botões de navegação do swiper (slider) MAYKONSILVEIA.COM.BR */
.slide-destaque .swiper [class^="swiper-button-"] {
    color: var(--cor-branca); /* Cor do texto branca MAYKONSILVEIA.COM.BR */
    background: var(--cor-7-3); /* Cor de fundo semi-transparente MAYKONSILVEIA.COM.BR */
    padding: 2.5rem; /* Preenchimento ao redor MAYKONSILVEIA.COM.BR */
}

/* Altera o estilo dos botões do swiper ao passar o mouse MAYKONSILVEIA.COM.BR */
.slide-destaque .swiper [class^="swiper-button-"]:hover {
    background: var(--cor-principal); /* Cor de fundo principal MAYKONSILVEIA.COM.BR */
}

/* Estiliza o ícone antes dos botões do swiper MAYKONSILVEIA.COM.BR */
.slide-destaque .swiper [class^="swiper-button-"]::before {
    font-size: 2rem; /* Tamanho da fonte de 2rem MAYKONSILVEIA.COM.BR */
}


/*== INICIO CELULAR SLIDER ==MAYKONSILVEIA.COM.BR */
/* Estilos para telas com largura máxima de 1150px MAYKONSILVEIA.COM.BR */
@media(max-width:1150px) {
    /* Ajusta o slide de destaque para telas menores MAYKONSILVEIA.COM.BR */
    .slide-destaque .slide {
        height: auto; /* Altura automática MAYKONSILVEIA.COM.BR */
        padding: 5rem 10rem; /* Preenchimento interno MAYKONSILVEIA.COM.BR */
        display: block; /* Exibição em bloco MAYKONSILVEIA.COM.BR */
    }

    /* Ajusta a imagem na segunda coluna do slide MAYKONSILVEIA.COM.BR */
    .slide-destaque .slide .col-2 img {
        width: 90%; /* Largura de 90% MAYKONSILVEIA.COM.BR */
        height: 35rem; /* Altura fixa de 35rem MAYKONSILVEIA.COM.BR */
    }
}

/* Estilos para telas com largura máxima de 600px MAYKONSILVEIA.COM.BR */
@media(max-width:600px) {
    /* Ajusta o preenchimento do slide de destaque MAYKONSILVEIA.COM.BR */
    .slide-destaque .slide {
        padding: 5rem 7rem; /* Preenchimento interno ajustado MAYKONSILVEIA.COM.BR */
    }

    /* Ajusta o tamanho da fonte do elemento h4 na primeira coluna MAYKONSILVEIA.COM.BR */
    .slide-destaque .slide .col-1 h4 {
        font-size: 2rem; /* Tamanho da fonte reduzido para 2rem MAYKONSILVEIA.COM.BR */
    }

    /* Mantém o tamanho da fonte do elemento h1 na primeira coluna MAYKONSILVEIA.COM.BR */
    .slide-destaque .slide .col-1 h1 {
        font-size: 3.2rem; /* Tamanho da fonte mantido em 3.2rem MAYKONSILVEIA.COM.BR */
    }

    /* Ajusta a imagem na segunda coluna do slide MAYKONSILVEIA.COM.BR */
    .slide-destaque .slide .col-2 img {
        width: 90%; /* Largura de 90% MAYKONSILVEIA.COM.BR */
        height: auto; /* Altura automática para manter proporções MAYKONSILVEIA.COM.BR */
    }

    /* Ajusta o preenchimento e o tamanho da fonte dos botões MAYKONSILVEIA.COM.BR */
    .slide-destaque .slide .col-1 .button button {
        padding: 1.5rem 2.8rem 1.5rem 2rem; /* Preenchimento interno ajustado MAYKONSILVEIA.COM.BR */
        font-size: 1.3rem; /* Tamanho da fonte reduzido para 1.3rem MAYKONSILVEIA.COM.BR */
    }

    /* Ajusta o tamanho da fonte dos ícones nos botões MAYKONSILVEIA.COM.BR */
    .slide-destaque .slide .col-1 .button button i {
        font-size: 2rem; /* Tamanho da fonte dos ícones reduzido para 2rem MAYKONSILVEIA.COM.BR */
    }
}


   /* Estilos para telas com largura máxima de 450px MAYKONSILVEIA.COM.BR */
@media(max-width:450px) {
    /* Ajusta o tamanho da fonte do elemento h4 na primeira coluna do slide de destaque MAYKONSILVEIA.COM.BR */
    .slide-destaque .slide .col-1 h4 {
        font-size: 1.3rem; /* Reduz o tamanho da fonte para 1.3rem MAYKONSILVEIA.COM.BR */
    }

    /* Ajusta o tamanho da fonte do elemento h1 na primeira coluna do slide de destaque MAYKONSILVEIA.COM.BR */
    .slide-destaque .slide .col-1 h1 {
        font-size: 2.2rem; /* Reduz o tamanho da fonte para 2.2rem MAYKONSILVEIA.COM.BR */
    }
    
    .slide-destaque .slide .col-1 .button a.sobreBtn {
        padding:10px;
        border-radius:5px;
        font-size: 1.2rem;
    }

    /* Estiliza o botão 'lojasBtn' MAYKONSILVEIA.COM.BR */
.slide-destaque .slide .col-1 .button a.lojasBtn {
    padding:10px;
    border-radius:5px;
    font-size: 1.2rem;
}
}


/*== FIM CELULAR SLIDER ==MAYKONSILVEIA.COM.BR */

/*== FIM SLIDE DESTAQUE DO SITE ==MAYKONSILVEIA.COM.BR */



/*== INICIO BUSCA DO SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
.busca-site{
    position: relative; /* Define a posição do elemento como relativa ao seu local normal */
    padding: 0 16rem; /* Define o preenchimento superior e inferior como 0, esquerda e direita como 16rem */
    background: var(--cor-busca); /* Cor de fundo cinza claro */
}

.busca-site .filtro{
    max-width: 1000px;/* Largura máxima do elemento é 1200px */
    width: 80%; /* Largura do elemento é 100% do seu container pai */
    padding: 2.5rem; /* Preenchimento em todas as direções de 2.5rem */
    position: absolute; /* Posicionamento absoluto em relação ao seu pai mais próximo com posição relativa */
    top: -7rem; /* Posiciona o elemento 7rem acima do topo do seu container pai */
    left: 10rem;
    right: 10rem;
    z-index: 111; /* Define a ordem de empilhamento do elemento como 111 */
    background-color: var(--cor-branca); /* Usa uma variável CSS para a cor de fundo */
    box-shadow: 0 0 5px rgba(190, 190, 190, 0.5), 
                0 0 10px rgba(190, 190, 190, 0.5); /* Aplica sombra ao redor do elemento */
    border-radius: 5px; /* Arredonda os cantos do elemento */
    overflow: hidden; /* Oculta conteúdo que excede os limites do elemento */
    margin: 0 auto;
}

.filtro .filtro-linha{
    display: grid; /* Usa o layout de grade para organizar o conteúdo */
    grid-template-columns: 1fr 1fr 1fr 1fr; /* Divide o elemento em quatro colunas iguais */
    align-items: center; /* Alinha os itens da grade ao centro verticalmente */
    gap: 3rem; /* Espaço de 3rem entre as células da grade */
}


.filtro h3{
    font-size: 2.7rem; /* Tamanho da fonte de 2.7rem */
    font-weight: 500; /* Peso da fonte como 500 (semi-negrito) */
    color: var(--cor-escura); /* Cor da fonte definida por uma variável CSS */
    letter-spacing: 1px; /* Espaçamento de 1px entre letras */
    padding-bottom: 2rem; /* Preenchimento inferior de 2rem */
}


.filtro .filtro-linha h4{
    font-size: 1.7rem; /* Define o tamanho da fonte para 1.7rem */
    color: var(--cor-escura); /* Define a cor do texto usando uma variável CSS */
    padding-bottom: 1.5rem; /* Define um preenchimento inferior de 1.5rem */
}

.filtro .filtro-linha select{
    font-size: 1.5rem; /* Tamanho da fonte do elemento select */
    font-weight: 500; /* Peso da fonte (semi-negrito) */
    width: 200px; /* Largura do elemento select */
    height: 45px; /* Altura do elemento select */
    border: 1px solid var(--cor-escura); /* Borda com 1px de espessura e cor definida por variável */
    border-radius: 5px; /* Arredonda as bordas com raio de 5px */
    padding: 0 1rem; /* Preenchimento horizontal de 1rem */
    color: var(--cor-escura); /* Cor do texto definida por variável */
}


.filtro .filtro-linha select option{
    padding: 0.5rem; /* Preenchimento de 0.5rem para cada opção no select */
    border-bottom: 1px solid var(--cor-escura); /* Borda inferior para cada opção */
}

.filtro .filtro-linha select option{
    padding: 0.5rem; /* Preenchimento de 0.5rem para cada opção no select */
    border-bottom: 1px solid var(--cor-escura); /* Borda inferior para cada opção */
}

.busca-site .busca-site-btn button{
    font-size: 1.5rem; /* Tamanho da fonte do botão */
    background: var(--cor-principal); /* Cor de fundo do botão definida por variável */
    margin-top: 4rem; /* Margem superior de 4rem */
    padding: 1.3rem 2rem; /* Preenchimento vertical de 1.3rem e horizontal de 2rem */
    border-radius: 0.5rem; /* Arredonda as bordas do botão */
    color: var(--cor-branca); /* Cor do texto do botão definida por variável */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    transition: 0.5s ease; /* Transição suave para mudanças de estado, como hover */
}

.busca-site .busca-site-btn button i{
    padding-right: 0.5rem; /* Preenchimento à direita para o ícone dentro do botão */
}

.busca-site .busca-site-btn button:hover{
    background-color: var(--cor-escura); /* Muda a cor de fundo do botão quando passa o mouse */
}


/*== INICIO CELULAR BUSCA DO SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
@media(max-width: 1500px){
    /* Esta regra de mídia aplica estilos quando a largura da tela é menor ou igual a 1500px */
/*max-width: 100%; A largura máxima do elemento .filtro é ajustada para 100% */
    .busca-site .filtro {
        max-width: 100%;
        } 
    

    .busca-site{
        padding: 0 100px 0 0;
        }
        
    /*  padding: 0 100px 0 0; O preenchimento do elemento .busca-site é ajustado para 0 em todas as direções */
}

@media(max-width: 991px){
    /* Estilos para telas com largura menor ou igual a 991px */

    .busca-site .filtro {
        max-width: 100%;
        } 

    .filtro .filtro-linha{
        grid-template-columns: 1fr 1fr 1fr; /* Ajusta o layout de grade para 3 colunas de tamanhos iguais */
    } 
}

@media(max-width: 768px){
    /* Estilos para telas com largura menor ou igual a 768px */
    .busca-site .filtro {
        max-width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        } 

    .filtro .filtro-linha{
        grid-template-columns: 1fr 1fr; /* Ajusta o layout de grade para 2 colunas de tamanhos iguais */
    } 
}

@media(max-width: 600px){
    /* Estilos para telas com largura menor ou igual a 600px */
    .busca-site .filtro {
        max-width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        } 
    .filtro .filtro-linha{
        gap: 0.5rem; /* Reduz o espaçamento entre as células da grade para 0.5rem */
    }

}

@media(max-width: 450px){
    /* Estilos aplicados quando a largura da tela é menor ou igual a 450px */

    .busca-site .filtro {
        max-width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        } 

    .filtro .filtro-linha{
        grid-template-columns: 1fr; /* Ajusta o layout de grade para uma única coluna */
    } 

    .filtro .filtro-linha select{
        width: 100%; /* Faz com que os elementos select ocupem 100% da largura do seu container pai */
    } 

    .filtro .busca-site-btn button{
        width: 100%; /* Ajusta os botões para ocuparem 100% da largura do seu container pai */
    }
}


@media(max-width: 350px){
    /* Estilos aplicados quando a largura da tela é menor ou igual a 450px */

    .busca-site .filtro {
        max-width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        } 

    .filtro .filtro-linha{
        grid-template-columns: 1fr; /* Ajusta o layout de grade para uma única coluna */
    } 

    .filtro .filtro-linha select{
        width: 95%!important; /* Faz com que os elementos select ocupem 100% da largura do seu container pai */
    } 

    .filtro .busca-site-btn button{
        width: 140%; /* Ajusta os botões para ocuparem 100% da largura do seu container pai */
    }
}

/*== FIM CELULAR BUSCA DO SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */

/*== FIM BUSCA DO SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */


/*== INICIO SOBRE NÓS SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
section{
    padding: 2.5rem 16rem; /* Define o preenchimento interno da seção, com 2.5rem em cima e embaixo e 16rem nas laterais */
    background: var(--cor-busca); /* Define a cor de fundo da seção como cinza claro (#f2f2f2) */
}

.sobreNos{
   display: flex; /* Utiliza flexbox para a disposição dos elementos internos */
   flex-wrap: wrap; /* Permite que os itens do flexbox se enrolem para a próxima linha se necessário */
   gap: 4rem; /* Define um espaço de 4rem entre os itens do flexbox */
   align-items: center; /* Alinha os itens verticalmente ao centro */
   justify-content: center; /* Centraliza os itens horizontalmente */
   padding-top: 20rem; /* Define um preenchimento superior de 35rem */
   z-index: 10;
}

.sobreNos .col-3{
    flex: 1 1 20rem; /* Define a flexibilidade do item: pode crescer e encolher, com base inicial de 20rem */
    position: relative; /* Estabelece um contexto de posicionamento relativo para os elementos filhos absolutamente posicionados */
}

.sobreNos .col-3 img.s-img-um{
    width: 100%; /* A imagem ocupa 100% da largura do seu container pai */
    height: auto; /* Define a altura da imagem para 45rem */
}

.sobreNos .col-3 .s-valor{
    position: absolute; /* Posiciona o elemento de forma absoluta em relação ao seu parente mais próximo com posição relativa */
    top:0; /* Posiciona no topo do container parente */
    left: 0; /* Alinha à esquerda do container parente */
    display: flex; /* Utiliza flexbox para a disposição dos elementos internos */
    gap: 10px; /* Espaçamento de 10px entre os elementos do flexbox */
    align-items: center; /* Alinha os itens do flexbox verticalmente ao centro */
    background-color: #141622; /* Define a cor de fundo para um tom escuro (#141622) */
    padding: 1rem; /* Preenchimento interno de 1rem em todas as direções */
    border-radius: 20px; /* Arredonda os cantos com um raio de 20px */
}

.sobreNos .col-3 .s-valor span{
    font-size: 1.6rem; /* Tamanho da fonte de 1.6rem */
    font-weight: 600; /* Peso da fonte como semi-negrito (600) */
    text-transform: capitalize; /* Primeira letra de cada palavra em maiúscula */
    color: var(--cor-branca); /* Define a cor do texto usando uma variável CSS para branco */
}

.sobreNos .col-3 .s-valor img.s-img-dois{
    width: 80px; /* Define a largura da imagem para 80px */
}

.sobreNos .col-4{
    flex: 1 1 20rem; /* Define a flexibilidade do item: pode crescer e encolher, com base inicial de 20rem */
}

.sobreNos .col-4 h4{
    font-size: 2rem; /* Tamanho da fonte do cabeçalho h4 */
    font-weight: 500; /* Peso da fonte como médio (500) */
    color: var(--cor-principal); /* Cor do texto definida por uma variável CSS para a cor principal */
    letter-spacing: 1px; /* Espaçamento entre as letras de 1px */
    padding-bottom: 1rem; /* Preenchimento inferior de 1rem */
}

.sobreNos .col-4 h4 i{
    padding-right: 0.5rem; /* Preenchimento à direita para ícones dentro do cabeçalho h4 */
}

.sobreNos .col-4 h3{
    font-size: 4rem; /* Tamanho da fonte do cabeçalho h3 */
    text-transform: capitalize; /* Primeira letra de cada palavra em maiúscula */
    padding-bottom: 2rem; /* Preenchimento inferior de 2rem */
    color: var(--cor-escura); /* Cor do texto definida por uma variável CSS para a cor escura */
}

.sobreNos .col-4 h3 span{
    color: var(--cor-principal); /* Cor do texto para o elemento span dentro do h3 definida pela cor principal */
}

.sobreNos .col-4 p.text{
    font-size: 1.4rem; /* Tamanho da fonte do parágrafo */
    color: var(--cor-escura); /* Cor do texto do parágrafo definida pela cor escura */
    padding-bottom: 1rem; /* Preenchimento inferior de 1rem para o parágrafo */
}

.sobreNos .col-4 .p1{
    font-size: 1.5rem; /* Tamanho da fonte de um elemento com a classe .p1 */
    padding-bottom: 1rem; /* Preenchimento inferior de 1rem para o elemento com a classe .p1 */
}

.sobreNos .col-4 .p1 i{
    font-size: 1.6rem; /* Tamanho da fonte para o elemento ícone dentro da classe .p1 */
    color: var(--cor-principal); /* Cor do ícone definida pela cor principal */
    padding-right: 0.5rem; /* Preenchimento à direita do ícone */
}

.sobreNos .col-4 a{
    font-size: 1.6rem; /* Tamanho da fonte para links */
    color: var(--cor-branca); /* Cor do texto do link definida por uma variável CSS para branco */
    position: relative; /* Posição relativa para o link */
    margin-top: 2.5rem; /* Margem superior de 2.5rem para o link */
    background: var(--cor-principal); /* Cor de fundo do link definida pela cor principal */
    padding: 1.5rem 3.5rem; /* Preenchimento do link */
    border-radius: 10px; /* Arredondamento dos cantos do link */
    cursor: pointer; /* Cursor de ponteiro para indicar clicabilidade */
    transition: 0.5s ease; /* Transição suave para mudanças de estado, como hover */
}

.sobreNos .col-4 a:hover{
    background: var(--cor-escura); /* Muda a cor de fundo do link no estado hover para a cor escura */
}

.sobreNos .col-4 a i{
    font-size: 2rem; /* Tamanho da fonte para ícones dentro do link */
    position: absolute; /* Posiciona o ícone de forma absoluta em relação ao link */
    top: 20px; /* Posiciona o ícone a 20px do topo do link */
}


/*== INICIO CELULAR SOBRE NÓS DO MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
@media(max-width: 991px){
    /* Estilos aplicados para telas com largura até 991px */

    .sobreNos{
        padding-top: 40rem; /* Aumenta o preenchimento superior da seção .sobreNos para 40rem */
    }

    section{
        padding: 2.5rem 10rem; /* Ajusta o preenchimento da seção para 2.5rem em cima e embaixo, e 10rem nas laterais */
    }

    .sobreNos .col-4 h3{
        font-size: 2.5rem; /* Reduz o tamanho da fonte do cabeçalho h3 para 2.5rem */
    }

    .sobreNos .col-3 img.s-img-um{
        margin-top: 130px; /* Define uma margem superior de 130px para a imagem */
        height: auto; /* Ajusta a altura da imagem para ser automática */
    }
 
}

@media(max-width: 768px){
    /* Estilos para telas com largura até 768px */

    .sobreNos{
        padding-top: 50rem; /* Aumenta o preenchimento superior da seção .sobreNos para 50rem */
    }

    .sobreNos .col-3 img.s-img-um{
        margin-top: 130px; /* Mantém a margem superior de 130px para a imagem */
        height: auto; /* Altura da imagem continua automática */
    }
}

@media(max-width: 600px){
    /* Estilos para telas com largura até 600px */

    section{
        padding: 2.5rem 7rem; /* Reduz o preenchimento lateral da seção para 7rem */
    }

    .sobreNos .col-4 h3{
        font-size: 2.9rem; /* Aumenta o tamanho da fonte do cabeçalho h3 para 2.9rem */
    }

    .sobreNos .col-3 img.s-img-um{
        margin-top: 130px; /* Mantém a margem superior de 130px para a imagem */
        height: auto; /* Altura da imagem continua automática */
    }

}

@media(max-width: 450px){
    /* Estilos para telas com largura até 450px */

    .sobreNos .col-3 img.s-img-um{
        margin-top: 100px; /* Mantém a margem superior de 130px para a imagem */
        height: auto; /* Altura da imagem continua automática */
    }

    .sobreNos{
        padding-top: 50rem; /* Aumenta significativamente o preenchimento superior da seção .sobreNos para 80rem */
    }

    .sobreNos .col-4 h3{
        font-size: 2.4rem; /* Reduz o tamanho da fonte do cabeçalho h3 para 2.4rem */
    }
}

/*== FIM CELULAR SOBRE NÓS DO SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
/*== FIM SOBRE NÓS SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */



/*==INICIO CONTADOR DO SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
/* Classe .contador */
.contador{
    /* Configura o layout do container para ser uma grade */
    display: grid;

    /* Define quatro colunas de largura igual dentro da grade */
    grid-template-columns: 1fr 1fr 1fr 1fr;

    /* Espaçamento entre os itens da grade */
    gap: 2rem;

    /* Largura do container estendida para 100% do elemento pai */
    width: 100%;

    /* Altura mínima do container é 50% da altura da viewport */
    min-height: 50vh;

    /* Define a imagem de fundo do container */
    background: url('../img/contador/bg-contador.jpg');

    /* Garante que a imagem de fundo cubra toda a área do container */
    background-size: cover;

    /* Centraliza a imagem de fundo no container */
    background-position: top;

    /* Impede que a imagem de fundo se repita */
    background-repeat: no-repeat;

    background-attachment: fixed;
}

/* Classe .contador-box dentro de .contador */
.contador .contador-box{
    /* Configura o layout do elemento para ser um flex container */
    display: flex;

    /* Os itens no flex container são dispostos em uma coluna */
    flex-direction: column;

    /* Alinha os itens do flex container ao centro horizontalmente */
    align-items: center;

    /* Centraliza os itens do flex container verticalmente */
    justify-content: center;

    /* Texto alinhado ao centro */
    text-align: center;
}

/* Imagens dentro de .contador-box */
.contador .contador-box img{
    /* Largura fixa para as imagens */
    width: 70px;

    /* Altura fixa para as imagens */
    height: 70px;

    /* Bordas das imagens arredondadas formando um círculo */
    border-radius: 50%;

    /* Cor de fundo para as imagens, usando uma variável CSS */
    background: var(--cor-branca);

    /* Espaçamento interno ao redor da imagem */
    padding: 0.5rem;
}

/* Span com a classe .numero dentro de .contador-box */
.contador .contador-box span.numero{
  /* Espaçamento ao redor do span */
  padding: 1rem 0;

  /* Tamanho da fonte para o span */
  font-size: 3.2rem;

  /* Peso da fonte (grosso) */
  font-weight: 600;

  /* Cor do texto, usando uma variável CSS */
  color: var(--cor-branca);
}

/* Span com a classe .text dentro de .contador-box */
.contador .contador-box span.text{
    /* Tamanho da fonte para o span */
    font-size: 1.5rem;

    /* Peso da fonte */
    font-weight: 500;

    /* Cor do texto, usando uma variável CSS */
    color: var(--cor-branca);
  }

/* Tag i dentro do span com a classe .text */
.contador .contador-box span.text i{
 /* Espaçamento à direita do elemento i */
 padding-right: 0.5rem;
}


/*==INICIO CELULAR CONTADOR DO SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
/* Regra de mídia para telas com largura máxima de 1280px */
@media(max-width: 1280px){
    /* Seleciona elementos com a classe .contador */
    .contador{
        /* Define o espaçamento interno do elemento. 
           2rem de espaçamento vertical (topo e base) e 10rem de espaçamento horizontal (esquerda e direita) */
        padding: 2rem 10rem;
    }
 }
 
 /* Regra de mídia para telas com largura máxima de 991px */
 @media(max-width: 991px){
     /* Seleciona elementos com a classe .contador */
     .contador{
         /* Altera o layout da grade para duas colunas de largura igual */
         grid-template-columns: 1fr 1fr;
     }
  }
 
  /* Regra de mídia para telas com largura máxima de 768px */
  @media(max-width: 768px){
     /* Seleciona elementos com a classe .contador */
     .contador{
         /* Redefine o espaçamento interno do elemento para telas menores. 
            Mantém 2rem de espaçamento vertical, mas reduz o espaçamento horizontal para 7rem */
         padding: 2rem 7rem;
     }
  }
/*==FIM CELULAR CONTADOR DO SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
/*==FIM CONTADOR DO SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */



/*== INICIO CARROS RECENTES SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
.carrosRecentes {
    text-align: center;   /* Centraliza o texto dentro do contêiner .carrosRecentes */
    padding-top: 7rem;    /* Adiciona um espaçamento superior de 7rem no contêiner .carrosRecentes */
}

section h4 {
    color: var(--cor-principal);    /* Define a cor do texto como a variável --cor-principal para os elementos h4 dentro de .carrosRecentes */
    font-size: 2rem;    /* Define o tamanho da fonte como 2rem para os elementos h4 dentro de .carrosRecentes */
    font-weight: 600;   /* Define a espessura da fonte como 600 (negrito) para os elementos h4 dentro de .carrosRecentes */
    text-transform: uppercase;   /* Transforma o texto em maiúsculas para os elementos h4 dentro de .carrosRecentes */
    letter-spacing: 2px;    /* Adiciona espaçamento entre letras de 2px para os elementos h4 dentro de .carrosRecentes */
}

section h4 i {
    padding-right: 0.5rem;   /* Adiciona um espaçamento à direita de 0.5rem para os elementos <i> dentro de h4 dentro de .carrosRecentes */
}

section h1 {
    position: relative; /*NOVO ADICIONAR NA PROXIMA AULA QUE É A 13 */
    margin-bottom: 6rem; /*NOVO ADICIONAR NA PROXIMA AULA QUE É A 13 */

    padding-bottom: 4rem;   /* Adiciona um espaçamento inferior de 4rem para os elementos h1 dentro de .carrosRecentes */
    font-size: 4.7rem;    /* Define o tamanho da fonte como 4.7rem para os elementos h1 dentro de .carrosRecentes */
    color: var(--cor-escura);    /* Define a cor do texto como a variável --cor-escura para os elementos h1 dentro de .carrosRecentes */
    text-transform: capitalize;   /* Capitaliza o texto para os elementos h1 dentro de .carrosRecentes */
    letter-spacing: 1px;    /* Adiciona espaçamento entre letras de 1px para os elementos h1 dentro de .carrosRecentes */
}

section h1 span {
    color: var(--cor-principal);    /* Define a cor do texto como a variável --cor-principal para os elementos span dentro de h1 dentro de .carrosRecentes */
}

/*NOVO ADICIONAR NA PROXIMA AULA QUE É A 13 */
/* Adicionado na próxima aula (Aula 13) */

/* Pseudo-elemento '::before' para a tag h1 dentro da seção */
section h1::before {
    /* Definindo o conteúdo como vazio */
    content: '';
    /* Configurando a largura e altura do pseudo-elemento */
    width: 100px;
    height: 10px;
    /* Posicionando o pseudo-elemento absolutamente no fundo central da tag h1 */
    position: absolute;
    left: 50%;
    bottom: 0;
    /* Configurando a cor de fundo e a borda do pseudo-elemento */
    background-color: var(--cor-branca);
    border: 4px solid var(--cor-principal);
    /* Adicionando borda arredondada */
    border-radius: 10px;
    /* Movendo o pseudo-elemento para a esquerda em 50% do seu próprio tamanho */
    transform: translateX(-50%);
}

/* Pseudo-elemento '::after' para a tag h1 dentro da seção */
section h1::after {
    /* Definindo o conteúdo como vazio */
    content: '';
    /* Configurando a largura e altura do pseudo-elemento */
    width: 20px;
    height: 10px;
    /* Posicionando o pseudo-elemento absolutamente no fundo da tag h1, ligeiramente à esquerda do centro */
    position: absolute;
    left: 48%;
    bottom: 1.1rem;
    /* Movendo o pseudo-elemento para a esquerda em 50% do seu próprio tamanho */
    transform: translateX(-50%);
    /* Adicionando borda arredondada */
    border-radius: 40px;
    /* Configurando a cor de fundo do pseudo-elemento */
    background-color: var(--cor-escura);
}


.carrosRecentes .cr-linha {
    display: grid;   /* Define o contêiner .cr-linha como uma grade */
    grid-template-columns: 1fr 1fr 1fr 1fr;   /* Divide a grade em quatro colunas iguais dentro de .cr-linha */
    gap: 1.5rem;    /* Adiciona um espaçamento de 1.5rem entre as colunas da grade dentro de .cr-linha */
}



.cr-linha .cr-col {
    padding: 1rem;   /* Adiciona um espaçamento interno de 1rem para os elementos .cr-col dentro de .cr-linha */
    box-shadow: 0 0 5px var(--cor-escura);   /* Adiciona uma sombra ao redor dos elementos .cr-col dentro de .cr-linha */
    background-color: var(--cor-branca);   /* Define a cor de fundo como a variável --cor-branca para os elementos .cr-col dentro de .cr-linha */
    border-radius: 5px;   /* Adiciona bordas arredondadas com raio de 10px para os elementos .cr-col dentro de .cr-linha */
    text-align: justify;   /* Justifica o texto dentro dos elementos .cr-col dentro de .cr-linha */
}


.cr-linha .cr-col .img-cr {
    width: 100%;   /* Define a largura da imagem como 100% do contêiner */
    height: 15rem;   /* Define a altura da imagem como 15rem */
    overflow: hidden;   /* Oculta o conteúdo que ultrapassa as dimensões do contêiner */
    border-radius: 5px;   /* Adiciona bordas arredondadas com raio de 10px à imagem */
    transition: 0.5s ease;   /* Adiciona uma transição suave de 0.5s */
}

.cr-linha .cr-col .img-cr img {
    position: relative;   /* Define a posição relativa para a imagem */
    width: 100%;   /* Define a largura da imagem como 100% do contêiner */
    height: 100%;   /* Define a altura da imagem como 100% do contêiner */
    object-fit: cover;   /* Redimensiona a imagem mantendo a proporção, cobrindo o contêiner */
    border-radius: 5px;   /* Adiciona bordas arredondadas com raio de 5px à imagem */
    cursor: pointer;   /* Altera o cursor para um ponteiro quando passa sobre a imagem */
    transition: 0.5s ease;   /* Adiciona uma transição suave de 0.5s */
}

.cr-linha .cr-col .img-cr:hover img {
    transform: scale(1.3);   /* Aumenta a escala da imagem em 1.3 vezes ao passar o mouse sobre ela */
}

.cr-linha .cr-col h5 {
    font-size: 1.8rem;   /* Define o tamanho da fonte como 1.8rem para os elementos h5 */
    padding: 1rem 0;   /* Adiciona espaçamento interno de 1rem acima e abaixo para os elementos h5 */
    color: var(--cor-escura);   /* Define a cor do texto como a variável --cor-escura para os elementos h5 */
}

.carrosRecentes .cr-linhaDois {
    display: grid;   /* Define o contêiner .cr-linha como uma grade */
    grid-template-columns: 1fr 1fr;   /* Divide a grade em quatro colunas iguais dentro de .cr-linha */
    gap: 1.5rem;    /* Adiciona um espaçamento de 1.5rem entre as colunas da grade dentro de .cr-linha */
}

.cr-linhaDois .cr-col {
    padding: 1rem;   /* Adiciona um espaçamento interno de 1rem para os elementos .cr-col dentro de .cr-linha */
    box-shadow: 0 0 5px var(--cor-escura);   /* Adiciona uma sombra ao redor dos elementos .cr-col dentro de .cr-linha */
    background-color: var(--cor-branca);   /* Define a cor de fundo como a variável --cor-branca para os elementos .cr-col dentro de .cr-linha */
    border-radius: 5px;   /* Adiciona bordas arredondadas com raio de 10px para os elementos .cr-col dentro de .cr-linha */
    text-align: justify;   /* Justifica o texto dentro dos elementos .cr-col dentro de .cr-linha */
}

.cr-linhaDois .cr-col h5 {
    font-size: 1.8rem;   /* Define o tamanho da fonte como 1.8rem para os elementos h5 */
    padding: 1rem 0;   /* Adiciona espaçamento interno de 1rem acima e abaixo para os elementos h5 */
    color: var(--cor-escura);   /* Define a cor do texto como a variável --cor-escura para os elementos h5 */
}


.cr-linha .cr-col .classificacoes {
    display: flex;   /* Define o contêiner .classificacoes como um flex container */
    gap: 1rem;   /* Adiciona um espaçamento de 1rem entre os elementos filho de .classificacoes */
    align-items: center;   /* Alinha os itens ao centro dentro de .classificacoes */
    padding-bottom: 0.5rem;   /* Adiciona um espaçamento inferior de 0.5rem para .classificacoes */
}

.cr-col .cl-estrelas i {
    color: var(--cor-principal);   /* Define a cor do texto como a variável --cor-principal para os elementos <i> dentro de .cl-estrelas */
    font-size: 1.4rem;   /* Define o tamanho da fonte como 1.4rem para os elementos <i> dentro de .cl-estrelas */
}

.cr-col .cl-estrelas .cl-ct-estrelas span {
    font-size: 1.1rem;   /* Define o tamanho da fonte como 1.3rem para os elementos span dentro de .cl-estrelas .cl-ct-estrelas */
    font-weight: 600;   /* Define a espessura da fonte como 600 (negrito) para os elementos span dentro de .cl-estrelas .cl-ct-estrelas */
    color: var(--cor-escura);   /* Define a cor do texto como a variável --cor-escura para os elementos span dentro de .cl-estrelas .cl-ct-estrelas */
}

.cr-col .cr-info {
    display: grid;   /* Define o contêiner .cr-info como uma grade */
    grid-template-columns: 1fr 1fr;   /* Divide a grade em duas colunas iguais dentro de .cr-info */
    gap: 0.5rem;   /* Adiciona um espaçamento de 0.5rem entre as colunas da grade dentro de .cr-info */
    padding-bottom: 0.5rem;   /* Adiciona um espaçamento inferior de 0.5rem para .cr-info */
}

.cr-col .cr-info span {
    font-size: 1.1rem;   /* Define o tamanho da fonte como 1.1rem para os elementos span dentro de .cr-info */
    color: var(--cor-escura);   /* Define a cor do texto como a variável --cor-escura para os elementos span dentro de .cr-info */
}

.cr-col .cr-info i {
    color: var(--cor-principal);   /* Define a cor do texto como a variável --cor-principal para os elementos <i> dentro de .cr-info */
    padding-right: 0.3rem;   /* Adiciona um espaçamento à direita de 0.3rem para os elementos <i> dentro de .cr-info */
}

.cr-col .cr-valor {
    display: flex;   /* Define o contêiner .cr-valor como um flex container */
    align-items: center;   /* Alinha os itens ao centro dentro de .cr-valor */
    justify-content: space-between;   /* Distribui o espaço restante igualmente entre os elementos filho de .cr-valor */
}


.cr-col .cr-valor p {
    color: var(--cor-principal);   /* Define a cor do texto como a variável --cor-principal para os elementos p dentro de .cr-valor */
    font-size: 1.3rem;   /* Define o tamanho da fonte como 1.8rem para os elementos p dentro de .cr-valor */
    font-weight: 600;   /* Define a espessura da fonte como 600 (negrito) para os elementos p dentro de .cr-valor */
}

.cr-col .cr-valor a {
    background-color: #d117ff;   /* Define a cor de fundo como #d117ff para os elementos a dentro de .cr-valor */
    padding: 0.8rem 2.8rem;   /* Adiciona espaçamento interno de 0.8rem superior e inferior, e 2.8rem à esquerda e à direita para os elementos a dentro de .cr-valor */
    border-radius: 0.5rem;   /* Adiciona bordas arredondadas com raio de 0.5rem aos elementos a dentro de .cr-valor */
    color: var(--cor-branca);   /* Define a cor do texto como a variável --cor-branca para os elementos a dentro de .cr-valor */
    cursor: pointer;   /* Altera o cursor para um ponteiro quando passa sobre os elementos a dentro de .cr-valor */
    transition: 0.3s ease;   /* Adiciona uma transição suave de 0.3s aos elementos a dentro de .cr-valor */
}

.cr-col .cr-valor a:hover {
    background-color: var(--cor-escura);   /* Define a cor de fundo como a variável --cor-escura para os elementos a:hover dentro de .cr-valor */
}

.carrosRecentes a.cr-link{
 font-size: 1.4rem;
 font-weight: 600;
 background-color: var(--cor-principal);
 margin-top: 4rem;
 padding: 1.4rem 3.5rem;
 color: var(--cor-branca);
 border-radius: 12px;
 cursor: pointer;
 transition: 0.5s ease;
}

.carrosRecentes a.cr-link:hover{
    background-color: var(--cor-escura);
}

.carrosRecentes a.cr-link i{
    padding-left: 0.5rem;
}
/*== INICIO CELULAR CARROS RECENTES SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */

@media (max-width: 1350px) {
    .carrosRecentes .cr-linha {
        grid-template-columns: 1fr 1fr;   /* Altera a grade para duas colunas quando a largura da tela é no máximo 1350px */
    }
}

@media (max-width: 768px) {

    .carrosRecentes .cr-linha {
        grid-template-columns: 1fr;   /* Altera a grade para uma coluna quando a largura da tela é no máximo 768px */
    }

    .cr-linha .cr-col .img-cr {
        height: auto;   /* Permite que a altura da imagem seja ajustada automaticamente para se adaptar à largura da tela */
    }

    section h1 {
        font-size: 2.8rem;   /* Altera o tamanho da fonte para 2.8rem quando a largura da tela é no máximo 768px */
    }
}

@media (max-width: 450px) {
    section h1 {
        font-size: 2.4rem;   /* Altera o tamanho da fonte para 2.4rem quando a largura da tela é no máximo 450px */
    }
}

/*== FIM CELULAR CARROS RECENTES SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
/*== FIM CARROS RECENTES SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */



/*== INICIO DEPARTAMENTOS CARROS RECENTES SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
.departamento{
    text-align: center;
    padding-top: 7rem;
    padding-bottom: 3rem;
    background-color: var(--cor-branca);
}

.departamento .dep-linha{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
}

.dep-linha .dep-col{
 width: 100%;
 padding: 2rem;
 background: var(--cor-busca);
 border-radius: 12px;
 box-shadow: 0 0 5px var(--cor-escura);
 transition: 0.4s ease;
}


.dep-linha .dep-col:hover{
    transform: translateY(-10px);
    box-shadow: 0 0 5px var(--cor-principal);
}

.dep-linha .dep-col img{
    width: 100%;
    height: auto;
}

.dep-linha .dep-col h5{
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--cor-escura);
}

.dep-linha .dep-col:hover h5{
 color: var(--cor-principal);
}

/*== INICIO CELULAR DEPARTAMENTOS CARROS RECENTES SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
@media(max-width:1350px){
    .departamento .dep-linha{

        grid-template-columns: 1fr 1fr 1fr 1fr;

    }
    
}

@media(max-width:768px){
    .departamento .dep-linha{

        grid-template-columns: 1fr 1fr 1fr;

    }
    
}

@media(max-width:600px){
    .departamento .dep-linha{

        grid-template-columns: 1fr 1fr;

    }
    
}

@media(max-width:450px){
    .departamento .dep-linha{

        grid-template-columns: 1fr;

    }

    .dep-linha .dep-col img{
        width: 100%;
        height: auto;
    }
    
}
/*== FIM CELULAR DEPARTAMENTOS CARROS RECENTES SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */

/*== FIM DEPARTAMENTOS CARROS RECENTES SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */


/*== INICIO CTA PLAY VÍDEO CARROS RECENTES SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
/* Estilo para a classe 'play' */

/* Configurando o layout flexível para centralizar conteúdo vertical e horizontalmente */
.play {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centralizando o texto horizontalmente dentro do contêiner flexível */
    text-align: center;
    /* Ocupando 100% da largura do contêiner pai */
    width: 100%;
    /* Definindo a altura mínima como 80% da altura da viewport */
    min-height: 80vh;
    /* Definindo uma imagem de fundo usando a URL especificada */
}

/* Estilo para a classe 'play-btn' dentro da classe 'play' */

/* Configurando a posição relativa para o elemento .play-btn */
.play .play-btn {
    position: relative;
    /* Definindo um fundo branco usando uma variável CSS personalizada (--cor-branca) */
    background: var(--cor-branca);
    /* Definindo a largura e altura do elemento como 100 pixels, criando um botão quadrado */
    width: 100px;
    height: 100px;
    /* Definindo o tamanho da fonte como 5 rem (1 rem é igual ao tamanho da fonte do elemento raiz do HTML) */
    font-size: 5rem;
    /* Definindo a cor do texto usando uma variável CSS personalizada (--cor-principal) */
    color: var(--cor-principal);
    /* Definindo a altura da linha como 100 pixels, centralizando verticalmente o texto dentro do botão */
    line-height: 100px;
    /* Adicionando borda circular ao elemento com um raio de 50%, criando um botão circular */
    border-radius: 50%;
}
/* Pseudo-elementos '::before' e '::after' para efeitos decorativos no botão */

/* Selecionando os pseudo-elementos '::before' e '::after' dentro da classe 'play-btn' que está dentro da classe 'play' */
.play .play-btn::before,
.play .play-btn::after {
    /* Definindo o conteúdo do pseudo-elemento como vazio */
    content: '';
    /* Definindo a posição absoluta em relação ao elemento pai (.play-btn) */
    position: absolute;
    /* Deslocando os pseudo-elementos para fora do botão (-20px de cada lado) */
    top: -20px;
    left: -20px;
    bottom: -20px;
    right: -20px;
    /* Adicionando uma borda ao redor dos pseudo-elementos com uma cor RGBA (roxo) e 50% de borda circular */
    border: 6px solid var(--cor-7-3);
    border-radius: 50%;
    /* Aplicando a animação 'animar' com duração de 1.5s, timing linear e repetição infinita */
    animation: animar 1.5s linear infinite;
    /* Configurando a opacidade inicial dos pseudo-elementos como 1 (totalmente visíveis) */
    opacity: 1;
}

/* Definindo um conjunto de etapas de animação chamado 'animar' usando keyframes */

@keyframes animar {
    /* Etapa inicial (0%): Escala do elemento é 0.5, tornando-o 50% do tamanho original */
    0% {
        transform: scale(0.5);
    }

    /* Etapa intermediária (50%): A opacidade do elemento é 1, tornando-o completamente visível */
    50% {
        opacity: 1;
    }

    /* Etapa final (100%): Escala do elemento é 1.5, tornando-o 150% do tamanho original */
    100% {
        transform: scale(1.5);
    }
} 

/* Configurando a animação com um atraso de 0.5s para o pseudo-elemento '::after' */

/* Adicionando um atraso de 0.5 segundos à animação do pseudo-elemento '::after' */
.play .play-btn::after {
    animation-delay: 0.5s;
}
/*== FIM CTA PLAY VÍDEO CARROS RECENTES SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */


/*== INICIO REVENDAS DE VEÍCULOS SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
.revendas{
    background-color: var(--cor-branca);
    padding-top: 7rem;
    padding-bottom: 3rem;
    text-align: center;
}

.revendas .revenda-linha{
   display: grid; 
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 2.5rem;
}

.revenda-linha .revenda-col{
  position: relative;
  width: 100%; 
  text-align: justify; 
  background-color: var(--cor-branca);
  box-shadow: 0 0 5px var(--cor-escura);
  padding: 1rem;
  border-radius: 12px;
  transition: 0.5s ease;
}

.revenda-linha .revenda-col:hover{
    transform: translateY(-10px);
}

.revenda-linha .revenda-col .revenda-img {
    background-color: var(--cor-busca);
    border-radius: 12px;
}
.revenda-linha .revenda-col .revenda-img img{
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.revenda-linha .revenda-col .revenda-total-carros{
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--cor-principal);
    color: var(--cor-branca);
    padding: 0.7rem 1.4rem;
    font-size: 1.3rem;
    border-radius: 40px;
}

.revenda-linha .revenda-col h5{
    font-size: 1.6rem;
    padding: 1rem 0;
}

.revenda-linha .revenda-col p{
   font-size: 1.3rem;
   color: var(--cor-escura);
   padding-bottom: 1rem; 
}

.revenda-linha .revenda-col p i{
 color: var(--cor-principal);
 padding-right: 0.5rem;
}

/*== INICIO CELULAR REVENDAS DE VEÍCULOS SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
@media(max-width:1250px){
    .revenda .revenda-linha{
        grid-template-columns: 1fr 1fr 1fr;
    }

    .revenda-linha .revenda-col .revenda-img img{
        width: 100%;
        height: auto;
    }
}

@media(max-width:991px){
    .revendas .revenda-linha{
        grid-template-columns: 1fr 1fr;
    }

    .revenda-linha .revenda-col .revenda-img img{
        width: 100%;
        height: auto;
    }
}

@media(max-width:450px){
    .revendas .revenda-linha{
        grid-template-columns: 1fr;
    }

    .revenda-linha .revenda-col .revenda-img img{
        width: 100%;
        height: auto;
    }
}
/*== FIM CELULAR REVENDAS DE VEÍCULOS SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */


/*== FIM REVENDAS DE VEÍCULOS SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */


/*== INICIO GERAÇÃO DE VALOR VEÍCULOS SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
.gerarValor{
    width: 100%;
    background-color: var(--cor-escura);
}

.gerarValor .g-v-linha{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 4rem 0;
}

.gerarValor .g-v-linha .col-1{
    display: flex;
    flex: 1 1 10rem;
    gap: 2rem;
    flex-direction: column;

}

.gerarValor .g-v-linha .col-1.centro{
    padding-top: 6rem;
}

.gerarValor .g-v-linha .col-2{
    flex: 1 1 30rem;
}

.gerarValor .g-v-linha .col-2 img{
    width: 100%;
    height: auto;
    transition: 0.5s ease;
}

.gerarValor .g-v-linha .col-2 img:hover{
    transform: translateY(-20px);
}

.g-v-linha .col-1 .g-v-um{
  background-color: var(--cor-branca);
  border-radius: 12px;
  padding: 1.3rem;

}

.col-1 .g-v-um .g-v-numero{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
}

.col-1 .g-v-um .g-v-numero img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.col-1 .g-v-um .g-v-numero h2{
    font-size: 6rem;
    color: var(--cor-principal);
}

.col-1 .g-v-um h5{
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--cor-escura);
    padding-bottom: 1rem;
}

.col-1 .g-v-um p{
    font-size: 1.3rem;
    color: var(--cor-escura);
}


.g-v-linha .col-2  h4{
 font-size: 2rem;
 font-weight: 600;
 text-transform: uppercase;
 color: var(--cor-branca);
 letter-spacing: 2px;
 padding-bottom: 1.5rem;
  
}

.g-v-linha .col-2  h4 i{
 padding-right: 0.5rem;
}

.g-v-linha .col-2 h3{
    font-size: 3.5rem;
    color: var(--cor-branca);
    text-transform: capitalize;
    letter-spacing: 1px;
    padding-bottom: 4rem;
}

.g-v-linha .col-2 h3 span{
    color: var(--cor-principal);
}

.g-v-linha .col-2 p{
    font-size: 1.3rem;
    color: var(--cor-branca);
    padding-bottom: 3rem;
}

/*== INICIO CELULAR GERAÇÃO DE VALOR VEÍCULOS SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */
@media(max-width:768px){
    .g-v-linha .col-2 h3{
        font-size: 2.4rem;
    }
}

@media(max-width:550px){
    .g-v-linha .col-2 h3{
        font-size: 2.4rem;
    }

    .gerarValor .g-v-linha .col-2 img{
        height: auto;
    }
}

@media(max-width:450px){
    .g-v-linha .col-2 h3{
        font-size: 2.4rem;
    }

    .gerarValor .g-v-linha .col-2 img{
        height: auto;
    }
}
/*== FIM CELULAR GERAÇÃO DE VALOR VEÍCULOS SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */


/*== FIM GERAÇÃO DE VALOR VEÍCULOS SITE MAYKONSILVEIA.COM.BR E MSFLIX.COM.BR */



/*== INICIO ITEM MARCAS MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/
.marcas{
    text-align: center;
    padding-top: 7rem;
}

.marcas .marca-linha{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 2.5rem;
}

.marca-linha .marca-col{
position:relative;
padding: 1rem;
background-color: var(--cor-branca);
border-radius: 12px;
box-shadow: 0 0 5px var(--cor-escura);
}

.marca-linha .marca-col:hover{
    transform: translateY(-10px);
}

.marca-linha .marca-col img{
    width: 100%;
    height: auto;
}

.marca-linha .marca-col h5{
    font-size: 1.4rem;
    color: var(--cor-escura);
    font-weight: 600;
}

@media(max-width:1300px){
    .marcas .marca-linha{
        grid-template-columns: 1fr 1fr 1fr; 
    }

    .marca-linha .marca-col img{
        height: auto;
    }
}

@media(max-width:768px){
    .marcas .marca-linha{
        grid-template-columns: 1fr 1fr; 
    }

    .marca-linha .marca-col img{
        height: auto;
    }

    .marcas h1{
        font-size: 2.8rem;
    }
}


@media(max-width:450px){
    .marcas .marca-linha{
        grid-template-columns: 1fr; 
    }

    .marca-linha .marca-col img{
        height: auto;
    }

    .marcas h1{
        font-size: 2.8rem;
    }
}

/*== FIM ITEM MARCAS MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/


/*== INICIO DEPOIMENTOS MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/
.depoimentos{
    text-align: center;
    padding-top: 7rem;
    padding-bottom: 5rem;
}

.depoimentos .slide{
    background-color: var(--cor-branca);
    box-shadow:  0 0 2px var(--cor-escura);
    padding: 1rem;
}

.depoimentos .slide img{
    width: 120px;
    height: 120px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    background: var(--cor-principal);
    padding: 0.5rem;
}

.depoimentos .slide h5{
    font-size: 1.8rem;
    color: var(--cor-escura);
    padding: 0.5rem;
}

.depoimentos .slide span{
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--cor-principal);

}

.depoimentos .slide p{
    color: var(--cor-escura);
    padding: 1.4rem;
}

.depoimentos .slide i{
    color: var(--cor-principal);
}
/*== FIM DEPOIMENTOS MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/



/*== INICIO BAIXAR APP MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/
section h1.baixar-titulo{
 font-size: 3.5rem;
 margin-bottom: 0;
 padding-bottom: 1rem;
}

section h1.baixar-titulo::before{
    border: none;
    background: transparent;
}

section h1.baixar-titulo::after{
    background: transparent;
}

.baixarApp{
    background-color: var(--cor-branca);
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.baixarApp .baixar-linha{
    position:relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--cor-busca);
    border-radius: 10px;
    padding: 2rem;
    overflow: hidden;
}

.baixarApp .baixar-linha .baixar-col{
    flex: 1 1 20rem;
}

.baixar-linha .baixar-col p.texto{
 font-size: 1.4rem;
 color: var(--cor-escura);
 padding-bottom: 2rem;
}

.baixar-linha .baixar-col .baixar-box{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.baixar-linha .baixar-col .baixar-box a{
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 3rem;
    border-radius: 30px;
}

.baixar-linha .baixar-col .baixar-box a img{
    width: 40px;
    height: 40px;
    color: var(--cor-branca);
}

.baixar-linha .baixar-col .baixar-box a span{
    font-size: 1.3rem;
    color: var(--cor-branca);
}

.baixar-linha .baixar-col .baixar-box a p{
    font-size: 1.5rem;
    color: var(--cor-branca);
}


.baixar-linha .baixar-col .baixar-box a.google{
background-color: var(--cor-principal);
color: var(--cor-branca);
transition: 0.4s;
}

.baixar-linha .baixar-col .baixar-box a.apple{
    background-color: var(--cor-escura);
    color: var(--cor-branca);
    transition: 0.4s;
}


.baixar-linha .baixar-col .baixar-box a:hover.google{
    background-color: var(--cor-escura);
    color: var(--cor-branca);
}
    
.baixar-linha .baixar-col .baixar-box a:hover.apple{
        background-color: var(--cor-principal);
        color: var(--cor-branca);
}

.baixar-linha .baixar-col img.baixar-fone{
    position: absolute;
    top: 0.5rem;
    width: 50%;
    height: auto;
    transition: 0.5s ease;
}

.baixar-linha .baixar-col img.baixar-fone:hover{
  transform: rotate(-15deg);
}

@media(max-width:1200px){
    .baixarApp .baixar-linha{
        flex-direction: column;
    }

    .baixar-linha .baixar-col img.baixar-fone{
        position: inherit;
        margin-top: 2rem;
        height: auto;
    }
}


@media(max-width:768px){
    .baixar-linha .baixar-col img.baixar-fone{
        width: 100%;
        height: auto;
    }

    .baixar-linha .baixar-col .baixar-box{
        flex-direction: column;
    }
}


@media(max-width:450px){
    section h1.baixar-titulo{
        font-size: 2.4rem;
    }
}
/*== FIM BAIXAR APP MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/

/*== INICIO BOTÃO MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/
.btn-msflix{
    background: var(--cor-principal);
    padding:10px;
    font-size: 1.4rem;
    color: var(--cor-branca);
    width: 100%;
    border-radius: 5px;
    transition: 0.5s ease;
}

.btn-msflix:hover{
    background: var(--cor-escura);
}
/*== FIM BOTÃO MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/


/*== INICIO RODAPÉ MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/
.rodape{
    background: var(--cor-escura);
}

.rodape .rodape-linha{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
    padding: 2rem 16rem;
}

.rodape-linha .rodape-col img{
    width: 200px;
    height: auto;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.rodape-linha .rodape-col p{
    font-size: 1.3rem;
    color: var(--cor-branca);
    padding-bottom: 2.5rem;
}

.rodape-linha .rodape-col span{
    display: block;
    font-size: 1.2rem;
    color: var(--cor-branca);
    padding-bottom: 1rem;
}

.rodape-linha .rodape-col span i{
    background-color: var(--cor-principal);
    font-size: 15px;
    padding: 0.5rem;
    margin-right: 5px;
    border-radius: 10px;
}

.rodape-linha .rodape-col h5{
    position: relative;
    font-size: 1.9rem;
    color: var(--cor-branca);
    margin: 1rem 0;
    padding: 0.5rem;
    letter-spacing: 1px;
}

.rodape-linha .rodape-col h5::before{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 3px;
    border-radius: 3px;
    background-color: var(--cor-branca);
}

.rodape-linha .rodape-col h5::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 40px;
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background-color: var(--cor-principal);
}

.rodape-linha .rodape-col  a{
    display: block;
    font-size: 1.6rem;
    color: var(--cor-branca);
    padding-top: 1rem;
    transition: 0.4s ease;
}

.rodape-linha .rodape-col  a:hover{
    color: var(--cor-principal);
    padding-left: 5px;

}

.rodape-linha .rodape-col input{
    width: 100%;
    height: 40px;
    font-size: 1.4rem;
    color: var(--cor-escura);
    padding-left: 10px;
    margin-bottom: 1.5rem;

}

.rodape-linha .rodape-col button{
    background-color: var(--cor-principal);
    font-size: 1.6rem;
    color: var(--cor-branca);
    padding: 1rem 2rem;
    cursor: pointer;
    transition: 0.4s ease;
}

.rodape-linha .rodape-col button:hover{
    background-color: var(--cor-escura);
    border:1px solid var(--cor-branca);
}

.rodape .rodape-direitos{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 2rem 16rem;
    background-color: var(--cor-7-6);

}

.rodape .rodape-direitos p{
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-branca);
    letter-spacing: 1px;
}

.rodape .rodape-direitos p span{
    color: var(--cor-principal);
}

.rodape .rodape-direitos .rodape-redes{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1.3rem 15rem;
    background-color: var(--cor-principal);
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 5% 100%);
}

.rodape .rodape-direitos .rodape-redes i{
    font-size: 1.6rem;
    color: var(--cor-principal);
    background-color: var(--cor-branca);
    margin-left: 20px;
    padding: 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.4s ease;
}

.rodape .rodape-direitos .rodape-redes i:hover{
    transform: scale(1.1);
}

@media(max-width:1390px){
    .rodape .rodape-direitos .rodape-redes{
        padding: 1.3rem 5rem;
    }
}

@media(max-width:1150px){
    .rodape .rodape-direitos .rodape-redes{
        position: inherit;
        background: none;
        padding: 1.3rem 0;
    }

    .rodape .rodape-direitos{
        flex-direction: column;
    }

    .rodape .rodape-linha{
       grid-template-columns: 1fr 1fr 1fr; 
    }
}

@media(max-width:991px){
    .rodape .rodape-linha{
        padding: 2rem 10rem;
     }

     .rodape .rodape-direitos{
        padding: 2rem 10rem;
    }
}


@media(max-width:768px){
    .rodape .rodape-linha{
        grid-template-columns: 1fr 1fr; 
     }
}

@media(max-width:600px){
    .rodape .rodape-linha{
        grid-template-columns: 1fr; 
        padding: 2rem 7rem;
     }

     .rodape .rodape-direitos{
        padding: 2rem 7rem;
    }
}
/*== FIM RODAPÉ MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/

/*== CATEGORIAS MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/
.categorias-carros{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 50vh;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/mscta/bg-cta-ms.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.categorias-carros h2{
    font-size: 2.2rem;
    color: var(--cor-branca);
}

.categorias-carros .link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--cor-branca);
    padding-top: 2rem;

}

.categorias-carros .link a{
    font-size: 1rem;
    color: var(--cor-branca);
}

.categorias-carros .link a:hover{
    color:var(--cor-principal);
}

.categorias-carros .link span, 
.categorias-carros .link p{
    font-size: 1rem;
    color: var(--cor-branca);
}
/*== FIM CATEGORIAS DISMAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/

/*== INICIO MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/
.carrosRecentes .cr-linha.linha{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}

.carrosRecentes.cats{
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.carrosRecentes.cats .col-1{
  flex: 1 1 2rem;
  width: 200px;
  text-align: justify;
}

.carrosRecentes.cats .col-2{
  flex: 1 1 60rem;
}

.carrosRecentes.cats .cr-col .img-cr {
  height: auto;
}

.carrosRecentes.cats .col-1 h5{
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom:2rem; 
  padding-top: 0.5rem;
}

.carrosRecentes.cats .col-1 h5::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 3px;
  background-color: var(--cor-principal);
  border-radius: 3px;
}

.carrosRecentes.cats .col-1 .filtroBusca{
  position: relative;
  width: 100%;
  height: 40px;
  margin-bottom: 1rem;
}

.carrosRecentes.cats .col-1 .filtroBusca .filtro-cat{
  width: 100%;
  height: 100%;
  padding: 10px;
  font-size: 1.4rem;
  border: 1px solid var(--cor-escura);
  border-radius:5px;
}

.carrosRecentes.cats .col-1 .filtroBusca i{
  position: absolute;
  top:10px;
  right: 10px;
  font-size: 1.8rem;
  color: var(--cor-principal);

}

.carrosRecentes.cats .col-1 .caixaBusca{
  font-size: 1.4rem;
  color: var(--cor-escura);
}

.carrosRecentes.cats .col-1 .cat-col .caixaBusca select{
    font-size: 1.1rem;
    color: var(--cor-escura);
    padding: 1rem;
    border: 1px solid  var(--cor-escura);
    border-radius: 4px;
    width: 100%;
}

.carrosRecentes.cats .col-1 input{
  margin-right: 0.5rem; 
  accent-color: var(--cor-principal); 
  margin-bottom: 1.5rem;
}

.carrosRecentes.cats .col-1 .cat-col{
  background-color: var(--cor-branca);
  margin-bottom: 1rem;
  padding: 2rem 1.5rem;
  text-align: justify;
  box-shadow: 0 0 2px var(--cor-escura);
  border-radius: 5px;
}

.carrosRecentes.cats .col-2 .cat-veiculos-top{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 1rem;
  background-color: var(--cor-branca);
  margin-bottom: 2rem;
  box-shadow: 0 0 2px var(--cor-escura);
  border-radius: 5px;
}

.carrosRecentes.cats .col-2 .cat-veiculos-top span{
  font-size: 1.3rem;
  font-weight: 500;
  color:var(--cor-escura);
}

.carrosRecentes.cats .col-2 .cat-veiculos-top i{
  font-size: 2rem;
  margin-right: 0.3rem;
  color:var(--cor-escura);
}

.carrosRecentes.cats .col-2 .cat-veiculos-top i.grade{
  color: var(--cor-principal);
  padding: 5px;
  border: 1px solid var(--cor-principal); 
  cursor: pointer;
}

.carrosRecentes.cats .col-2 .cat-veiculos-top select{
  font-size: 1.3rem;
  color: var(--cor-escura);
  padding: 1rem 2rem;
  border: 1px solid var(--cor-principal); 
  border-radius: 4px;

}

.carrosRecentes.cats .col-2 .paginacao{
  display: flex;  
  gap: 2rem;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.carrosRecentes.cats .col-2 .paginacao span{
  font-size: 1.5rem;
  color: var(--cor-branca);
  background-color: var(--cor-principal);
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 3px;
  cursor: pointer;
}



.carrosRecentes.cats .col-2 .paginacao span.p-numero{
 background-color: var(--cor-escura);
 transition: 0.4s ease;
}

.carrosRecentes.cats .col-2 .paginacao span.p-numero:hover{
  background-color: var(--cor-principal); 
}

/*== INICIO CELULAR CATEGORIAS DE VEICULOS MAYKONSILVEIRA.COM.BR E MSFLIX.COM.BR ==*/
@media(max-width:991px){
  .carrosRecentes .cr-linha.linha{
    grid-template-columns: 1fr 1fr;
  }

  .carrosRecentes.cats .cr-col .img-cr {
    height: auto;
  }

}

@media(max-width:680px){
  .carrosRecentes .cr-linha.linha{
    grid-template-columns: 1fr;
  }

  .carrosRecentes.cats .col-1 {
    flex: 1 1 2rem;
    width: 100%;
  }

}

@media(max-width:420px){
 
  section{
    padding: 2.5rem 3rem;
  }

}

/*== FIM CELULAR MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/

/*== FIM MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/


/*== INICIO LISTAGEM DE CARROS MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/
.carrosRecentes .cr-linha.linha.listagem-carros{
 display: block;
}


.carrosRecentes.cats .cr-linha.linha.listagem-carros .cr-col{
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.carrosRecentes .cr-linha.linha.listagem-carros .cr-col .img-cr{
    flex: 1 1 70rem;
    width: 100%;
    height: auto;
}

.carrosRecentes .cr-linha.linha.listagem-carros .cr-col .lista{
    flex: 1 1 30rem;
}

.carrosRecentes .cr-linha.linha.listagem-carros .cr-col .lista .cr-info{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.carrosRecentes .cr-linha.linha.listagem-carros .cr-col .lista p.texto{
    font-size: 1.3rem;
    color: var(--cor-escura);
    padding-bottom: 1rem;
}

/*== INICIO CELULAR LISTAGEM DE CARROS MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/
@media(max-width:850px){

    .carrosRecentes .cr-linha.linha.listagem-carros .cr-col{
        flex-wrap: wrap;
    }

    .carrosRecentes .cr-linha.linha.listagem-carros .cr-col .img-cr{
      width: 100%;
      height: auto;
    }
    
}

@media(max-width:550px){
    .carrosRecentes .cr-linha.linha.listagem-carros .cr-col .lista .cr-info{
        grid-template-columns: 1fr 1fr;
    }

}
/*== FIM CELULAR LISTAGEM DE CARROS MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/

/*== FIM LISTAGEM DE CARROS MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/


/*== INICIO VISUALIZAÇÃO DO ANUNCIO MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/
.slider{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding-top: 3rem;
    background-color: var(--cor-busca);
}


.slider .slide_um{
    flex: 1 1 50rem;
}

.slider .anuncio-barra-lateral{
    flex: 1 1 5rem;
}

.slider .slide_um .col-1{
    background-color: var(--cor-branca);
    padding: 2rem 1.5rem;
    box-shadow: 0 0 3px var(--cor-escura);
    margin-bottom: 1rem;
    border-radius: 5px;
}

.slide_um h6{
    font-size: 1.4rem;
    color: var(--cor-branca);
    background-color: var(--cor-principal);
    width: 115px;
    padding: 0.2rem 1rem;
    border-radius: 3px;
    margin-bottom: 1rem;
}

.slide_um h5{
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: capitalize;
    padding-bottom: 1rem;
}

.slide_um .data{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap:1.5rem;
}

.slide_um .data span{
    font-size: 1.3rem;
    color: var(--cor-escura);
}

.slide_um .data span i{
    color: var(--cor-principal);
    padding-right: 0.5rem;
    padding-bottom: 3rem;
}

.slider .swiper{
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.slider .swiper::-webkit-scrollbar {height: 7px;}
.slider .swiper::-webkit-scrollbar-thumb {background-color: var(--cor-escura);}

.slider .swiper .swiper-slide {
    display: flex;
    text-align: center;
    align-items: left;
    justify-content: left;
    overflow: hidden;
    padding: 5px;
}


.slider .swiper .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 5px var(--cor-escura);

}

.slider .swiper{
    width: 100%;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
}

.slider .swiper .swiper-slide{
    background-size: cover;
    background-position: center;
}

.slider .anuncioSlide2{
    width: 100%;
    height: 60%;
}


.slider .anuncioSlide{
    height: 20%;
    box-sizing: border-box;
    padding:  10px 0;
}

.slider .anuncioSlide2 .swiper-slide{
    width: 24%;
    height: 100%;
    margin: 0 auto;
    opacity: 1;
    border-radius: 10px;
}


.slider .slide_um .col-1 .anuncio-linha{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
}

.slide_um .col-1 .anuncio-linha .anuncio-box{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.slide_um .col-1 .anuncio-linha .anuncio-box i{
    font-size: 1.9rem;
    color: var(--cor-principal);
}

.slide_um .col-1 .anuncio-linha .anuncio-box span{
    font-size: 1.2rem;
    color: var(--cor-escura);
}

.slide_um .col-1 .anuncio-linha .anuncio-box p{
    font-size: 1.1rem;
    color: var(--cor-escura);
    font-weight: 500;
}

/*PROXIMA AULA*/
.slide_um .col-1 p.dec{
    font-size: 1.4rem;
    padding-bottom: 1rem;
    color: var(--cor-escura);
    transition: 0.4s ease;
}

/*PROXIMA AULA*/
.col-1 .redes{
    background:var(--cor-7-7); 
    padding:5px; 
    font-size:1.2rem; 
    color:var(--cor-branca); 
    border-radius:5px;
}

.col-1 .redes:hover{
    background:var(--cor-7-6); 
}

.slide_um .col-1 .anuncio-acessorios{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

.slide_um .col-1 .anuncio-acessorios p.ac{
    font-size: 1.3rem;
    color: var(--cor-escura);
}

.slide_um .col-1 .anuncio-acessorios p.ac i{
    color:var(--cor-principal);
    padding-right: 0.5rem;
}

.slide_um .col-1 .anuncio-historico p.ac{
    font-size: 1.3rem;
    color: var(--cor-escura);
}

.slide_um .col-1 .anuncio-historico p.ac i{
    color:var(--cor-principal);
    padding-right: 0.5rem;
}

.anuncio-barra-lateral .col-2{
    background-color: var(--cor-branca);
    padding: 2rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 3px var(--cor-escura);
}

.anuncio-barra-lateral .col-2 h3{
    font-size: 2.5rem;
    color: var(--cor-principal);
    padding-bottom: 1rem;
}

.anuncio-barra-lateral .col-2 .anuncio-bl-localizacao{
    display: flex;
    grid-area: 1rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: 1.1rem;
}

.anuncio-barra-lateral .col-2 .anuncio-bl-localizacao i{
    color: var(--cor-principal);
    padding-right: 0.5rem;
}

.anuncio-barra-lateral .col-2 .anuncio-bl-cliente{
    display: flex;
    gap: 1rem;
    align-items: center;
}

.anuncio-barra-lateral .col-2 .anuncio-bl-cliente img{
    width: 50px;
    height:50px;
    border-radius: 50%;
    border: 2px solid var(--cor-principal);
}

.anuncio-barra-lateral .col-2 .anuncio-bl-cliente h6{
    font-size: 1.1rem;
    color: var(--cor-escura);
}

.anuncio-barra-lateral .col-2 .anuncio-bl-cliente span{
    display: block;
    font-size: 1rem;
    color: var(--cor-principal);
    font-weight: 600;
}

.anuncio-barra-lateral .col-2 .anuncio-bl-cliente i{
    font-size: 1.7rem;
    margin-top: 1rem;
    color: var(--cor-escura);
    padding-right: 0.5rem;
    cursor: pointer;
}

.anuncio-barra-lateral .col-2 .anuncio-bl-cliente i:hover{
    color: var(--cor-principal);
    
}

.anuncio-barra-lateral .col-2 .anuncio-bl-cliente p{
    margin: 3px 0 3px 0;
}

.anuncio-barra-lateral .col-2 .anuncio-bl-cliente p .btn-anuncio{
    background-color: var(--cor-7-4);
    font-size: 1.1rem;
    color: var(--cor-branca);
    padding: 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.5s ease;
    vertical-align: middle;
}

.anuncio-barra-lateral .col-2 .anuncio-bl-cliente .btn-anuncio i{
    color: var(--cor-branca);
    
}

.anuncio-barra-lateral .col-2 .anuncio-bl-cliente p .btn-anuncio:hover{
    background-color: var(--cor-7-5);
}



.anuncio-barra-lateral .col-2 h6{
    font-size: 1.6rem;
    color: var(--cor-escura);
    padding-bottom: 0.5rem;
}

.anuncio-barra-lateral .col-2 input,
.anuncio-barra-lateral .col-2 textarea{
    width: 100%;
    border:1px solid var(--cor-escura);
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 5px;
    font-size: 1.4rem;

}

.anuncio-barra-lateral .col-2 button{
    position: relative;
    font-size: 1.2rem;
    color: var(--cor-branca);
    padding:  1rem 2.5rem;
    margin-top: 2rem;
    border-radius: 0.5rem;
    background-color: var(--cor-principal);
    cursor: pointer;
    transition: 0.4s ease;
}

.anuncio-barra-lateral .col-2 button:hover{
    background-color: var(--cor-escura);
}

.anuncio-barra-lateral .col-2 button i{
    position: absolute;
    top: 15px;
}

/*== INICIO CELULAR VISUALIZAÇÃO DO ANUNCIO MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/
@media(max-width:768px){
    .slider .swiper{
        height: auto;
    }

    .slider{
       display: inherit;
    }

    .slider .slide_um .col-1 .anuncio-linha {
      grid-template-columns: 1fr 1fr;
    }

    .slider .slide_um .col-1 .anuncio-acessorios {
      grid-template-columns: 1fr 1fr;
    }
}


@media(max-width:450px){
    .slider .swiper{
        height: auto;
    }

    .slider{
       display: inherit;
    }

    .slider .slide_um .col-1 .anuncio-linha {
        grid-template-columns: 1fr;
      }
  
      .slider .slide_um .col-1 .anuncio-acessorios {
        grid-template-columns: 1fr;
      }
}


/*== FIM CELULAR VISUALIZAÇÃO DO ANUNCIO MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/

/*== FIM INICIO VISUALIZAÇÃO DO ANUNCIO MAYKONSILVERIA.COM.BR E MSFLIX.COM.BR*/

.paginacaoGeral{
    display: flex;  
    gap: 2rem;
    align-items: center;
    justify-content: center;
    margin: 10px;
  }
  
.paginacaoGeral span{
    text-align: center;
    font-size: 1.5rem;
    color: var(--cor-branca);
    background-color: var(--cor-principal);
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    cursor: pointer;
  }
  
  
  
  .paginacaoGeral span.p-numero{
   background-color: var(--cor-escura);
   transition: 0.4s ease;
  }
  
  .paginacaoGeral span.p-numero:hover{
    background-color: var(--cor-principal); 
  }


  /* MENU MODAL */
  .menu-modal-container{
    background: rgba(0,0,0,0.7);
    position: fixed;
    top: 0; left: 0;
    height: 100%; width: 100%;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
  }

  .menu-modal-container .menu-modal{
    text-align: center;
    background: #fff!important;
    padding: 3rem 2rem;
    border-radius: .5rem;
    width: 70rem;
  }


  .menu-modal-container .menu-modal.active{
    display: inline-block;
  }

  .menu-modal-container .menu-modal h3{
  padding: 1rem 0;
  font-size: 2.5rem;
  color: #130f40;
  }

  .menu-modal-container .menu-modal p{
    font-size: 1.6rem;
    color: #666;
    padding: 1rem 0;
    line-height: 2;
  }

  .menu-modal-container .menu-modal .valor{
  font-size: 2.5rem;
  color: #130f40;
  margin-bottom: .5rem;
  }

  .menu-modal-container .btn-modal{
    background-color: var(--cor-7-7);
    color: var(--cor-branca);
    padding: 10px;
    font-size: 1.3rem;
    border-radius: 5px;
    transition: 0.5s ease;
  }

  .menu-modal-container .btn-modal:hover{
    background-color: var(--cor-escura);
  }

  #fechar{
    background-color: red;
    position: absolute;
    top: 1.5rem; right: 2.5rem;
    font-size: 3rem;
    cursor: pointer;
    color: #fff;
    padding:10px;
    border-radius:5px;
    transition: 0.5s ease;
  }
  
  #fechar:hover{
    background-color: rgb(179, 8, 8);
  }


/*ESTILOS DO SELECT 2 CDN EXTERNA*/
  .select2{
    font-size: 1.5rem;  
    font-weight: 500; 
    width: 200px; 
    height: 45px; 
    border: 1px solid var(--cor-escura); 
    border-radius: 5px; 
    padding: 0 1rem; 
    color: var(--cor-escura);
    outline: none;
}

.select2-selection--single{
    border: none!important;
    margin:7px;
    padding: 0 1rem; 
    color: var(--cor-escura)!important;
}