/* Reset básico */
* {
    margin: 0; /* Remove todas as margens padrão de todos os elementos */
    padding: 0; /* Remove todo o preenchimento (padding) padrão de todos os elementos */
    box-sizing: border-box; /* Inclui bordas e preenchimento no cálculo do tamanho total dos elementos */
}

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: #616F39; /* Define a cor de fundo do corpo da página */
    color: #262525; /* Define a cor padrão do texto no corpo da página */
}

h1{
color:#ffffff;
padding-top: 40px;
padding-bottom: 25px;
font-size: 30px;
}

h2{
    color: #262525;
    font-size: 25px;
}

h3{
    color: #262525;
    font-size: 20px;
}

h4{
    color: #A7D129;
}

hr{
    border: 5px solid #A7D129;
    border-radius: 50%;
}

.espacamento{
    margin-left: 30px;
    padding-top: 10px;
}

li{
    margin-top: 20px;
    text-align: left;
    margin-left: 15%;
    font-weight: bold;
}

ul{
    padding-top: 40px;
    font-size: 20px;    
}

ul, dd{
    font-size: 18px;
    text-align: left;
}

dd{
    margin-left: 17%;
    padding: 5px;
    color: #A7D129;
}

/* Header (Cabeçalho) */
header.container {
    width: 100%; /* O header ocupa 100% da largura da página */
    background-color: #262525; /* Cor de fundo do cabeçalho */
    border-bottom: 4px solid #616F39; /* Borda inferior de 4px com cor #616F39 para destacar o cabeçalho */
}

.header-content {
    display: flex; /* Usa Flexbox para posicionar os elementos filhos */
    align-items: center; /* Alinha os itens verticalmente no centro do cabeçalho */
    justify-content: space-between; /* Deixa o maior espaço possível entre os itens filhos */
}

.logo img {
    max-width: 100%; /* A largura máxima da imagem da logo não ultrapassa o tamanho do container */
    height: 60px; /* Define a altura fixa de 60px para a logo */
}
.logado{
    font-weight: bold; /* Deixa o texto do botão em negrito */
    color: #ffffff;
    font-size: 18px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.login-btn a {
    background-color: #A7D129; /* Cor de fundo do botão de login */
    border-radius: 12px; /* Bordas arredondadas no botão de login */
    padding: 10px 20px; /* Espaçamento interno de 10px (vertical) e 20px (horizontal) */
    font-weight: bold; /* Deixa o texto do botão em negrito */
    text-decoration: none; /* Remove o sublinhado do link */
    color: #262525; /* Define a cor do texto do botão como preto */
    transition: background-color 0.3s ease-in-out; /* Faz a transição suave de cor de fundo ao passar o mouse */
}

.login-btn a:hover {
    background-color: #616F39; /* Cor de fundo do botão ao passar o mouse */
    color: #fff; /* Cor do texto do botão ao passar o mouse */
}

/* Sistema de Colunas */
[class*=col-] {
    float: left; /* Faz com que as colunas fiquem lado a lado */
    padding: 0px 15px; /* Adiciona espaçamento de 15px nas laterais das colunas */
}

.col-1  { width: 8.33%;  }  /* Define a largura de 1/12 da tela */
.col-2  { width: 16.66%; }  /* Define a largura de 2/12 da tela */
.col-3  { width: 25%;    }  /* Define a largura de 3/12 da tela */
.col-4  { width: 33.33%; }  /* Define a largura de 4/12 da tela */
.col-5  { width: 41.66%; }  /* Define a largura de 5/12 da tela */
.col-6  { width: 50%;    }  /* Define a largura de 6/12 da tela (metade da tela) */
.col-7  { width: 58.33%; }  /* Define a largura de 7/12 da tela */
.col-8  { width: 66.66%; }  /* Define a largura de 8/12 da tela */
.col-9  { width: 75%;    }  /* Define a largura de 9/12 da tela */
.col-10 { width: 83.33%; }  /* Define a largura de 10/12 da tela */
.col-11 { width: 91.66%; }  /* Define a largura de 11/12 da tela */
.col-12 { width: 100%;   }  /* Define a largura total da tela (12/12) */ 

/* Container principal */
.container {
    width: 100%; /* O container ocupa 100% da largura disponível */
    margin: 0 auto; /* Centraliza o container horizontalmente */
}

/* Estilo para limpar o float */
.row::after {
    content: ""; /* Adiciona um conteúdo vazio para forçar o clear float */
    display: table; /* Garante que o container reconheça os elementos filhos */
    clear: both; /* Remove o efeito de float dos elementos filhos */
}

.row {
    display: flex; /* Usa Flexbox para criar um sistema de layout flexível */
    flex-wrap: wrap; /* Permite que os elementos quebrem de linha se necessário */
}

/* Menu Principal */
/* Estilo base do menu tradicional (Desktop) */
.main-menu {
    display: flex; /* Itens em linha */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Alinha verticalmente */
    list-style: none; /* Remove marcadores */
    padding: 3px; /* Remove o espaçamento padrão */
    margin: 0; /* Remove margens padrão */
    background-color: #A7D129; /* Cor de fundo */
    max-width: 100%;
    
}

/* Ícone do menu hambúrguer (Escondido por padrão) */
.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: #262525;
    padding: 10px;
    transition: color 0.3s ease;
    background-color: #A7D129;
}

/* Quando o mouse passa por cima, muda a cor */
.menu-toggle:hover {
    color: #616F39;
    
}

/* Itens do Menu */
.main-item {
    margin: 0 5px; /* Espaçamento entre os itens */
    position: relative; /* Necessário para o submenu */
}

.main-item a {
    display: block; /* Link ocupa toda a área */
    padding: 10px 20px; /* Espaçamento interno */
    background-color: #616F39; /* Fundo do botão */
    color: white; /* Cor do texto */
    text-decoration: none; /* Remove sublinhado */
    border-radius: 5px; /* Bordas arredondadas */
    text-align: center; /* Centraliza o texto */
    transition: background-color 0.3s ease; /* Animação ao passar o mouse */
}

/* Hover no item principal */
.main-item a:hover {
    background-color: #A7D129; /* Fundo muda no hover */
    color: #262525; /* Texto muda no hover */
}

/* Submenu */
.sub-menu {
    display: none; /* Esconde o submenu inicialmente */
    position: absolute; /* Posição em relação ao item pai */
    top: 100%; /* Alinha abaixo do item pai */
    left: 50%; /* Centraliza em relação ao botão pai */
    transform: translateX(-50%); /* Ajusta para centralizar completamente */
    list-style: none; /* Remove marcadores */
    background-color: #616F39; /* Fundo do submenu */
    padding: 10px 17px 10px 0px; /* Espaçamento interno */
    border-radius: 10px; /* Bordas arredondadas */
    min-width: 250px; /* Largura mínima fixa */
    text-align: left; /* Centraliza o texto no submenu */
    z-index: 999; /* Garante que o submenu fique acima de outros elementos */
}

/* Exibe o submenu no hover */
.main-item:hover .sub-menu {
    display: block; /* Mostra o submenu */
}

/* Itens do submenu */
.sub-item a {
    display: block; /* O link ocupa toda a área do item */
    color: #262525; /* Define a cor do texto do item */
    text-decoration: none; /* Remove o sublinhado */
    background-color: #A7D129; /* Cor de fundo padrão do submenu */
    padding: 10px 20px; /* Espaçamento interno */
    border-radius: 10px; /* Bordas arredondadas */
    transition: all 0.3s ease-in-out; /* Anima a transição de cor ao passar o mouse */
    margin: 0;
}

/* Hover no submenu */
.sub-item a:hover {
    background-color: #616F39; /* Fundo muda no hover */
    color: white; /* Texto muda no hover */
}

/* Estilo base para o submenu */
.design-sub-menu {
    display: none; /* Esconde o submenu por padrão */
    position: absolute;
    left: 94%; /* Alinha ao lado direito do item "Design gráfico" */
    top: 20px;
    background-color: #616F39; /* Fundo branco */
    z-index: 10;
    transition: all 0.3s ease-in-out; /* Anima a transição de cor ao passar o mouse */
    padding: 10px 0px 0px 10px;
    list-style: none;
}

/* Estilo para os itens do submenu */
.design-sub-menu .sub-item {
    margin: 0;
    background-color: #616F39;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Exibir o submenu quando o item pai é "hover" */
.sub-item.dropdown:hover .design-sub-menu {
    display: block;
}

/* Opcional: estilos adicionais */
.design-sub-menu .sub-item a {
    text-decoration: none;
    color: #333;
}

.design-sub-menu .sub-item a:hover {
    color: #ffffff; /* Cor azul no hover */
}


/* Hero */
.hero {
    background-color: #616F39; /* Define a cor de fundo da seção "Hero" */
    color: #fff; /* Define a cor do texto como branco */
    text-align: center; /* Centraliza horizontalmente o texto dentro da seção */
    padding: 20px 0; /* Adiciona 20px de espaçamento no topo e na parte inferior */
}

.hero h2 {
    font-size: 30px; /* Define o tamanho da fonte do título <h2> dentro da seção Hero */
    margin-top: 40px;
}

/* Rodapé (Footer) */
footer{
    display: flex;
    background-color: #262525; /* Define a cor de fundo do rodapé */
    color: #fff; /* Define a cor do texto como branco */
    padding: 10px ; /* Adiciona 10px de espaçamento no topo e na parte inferior */
    font-weight: bold; /* Deixa o texto do rodapé em negrito */
    text-align: center;
    border-top: 1px solid #A7D129;
    margin-top: auto; /* Garante que o footer seja empurrado para o final */
}

footer a, li {
    text-decoration: none;
    color: #fff;
}

    .footer1{
        text-align: left;
    }

/* Slider (Carrossel de Imagens) */
.secaoSlide {
    background: linear-gradient(to right, #A7D129, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #A7D129); 
    /* Cria um gradiente de cor que vai do verde-claro (#A7D129) para o branco (#ffffff) e volta ao verde */
    pointer-events: none; /* Impede interações do usuário */
    user-select: none; /* Impede seleção de imagens */
}

.slider {
    width: 100%; /* Define que o slider ocupará 100% da largura disponível */
    max-width: 1000px; /* Define a largura máxima de 1000px */
    height: 400px; /* Define uma altura fixa de 400px */
    margin: 10px auto; /* Adiciona 10px de margem superior e inferior e centraliza horizontalmente */
    overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse o container do slider */
    position: relative; /* Necessário para que o z-index funcione corretamente */
    z-index: 1; /* Define a posição do slider atrás do menu e de outros elementos */
    padding-top: 15px;
}

/* Container de Imagens do Slider */
.image-container {
    display: flex; /* Usa o Flexbox para alinhar as imagens horizontalmente */
    transition: transform 0.3s linear; /* Faz a transição de movimento do carrossel de forma suave em 0.3 segundos */
    gap: 8px; /* Define o espaçamento horizontal de 8px entre as imagens */
    background-color: rgb(255, 255, 255); /* Define a cor de fundo como branco */
}

/* Estilo de cada imagem dentro do Carrossel */
.image-container img {
    width: 170px; /* Define a largura de 250px para cada imagem */
    height: 370px; /* Define a altura de 370px para cada imagem */
    object-fit: cover; /* Garante que a imagem ocupe todo o espaço sem distorcer */
    border: 2px solid #616F39; /* Adiciona uma borda de 2px de cor #616F39 */
    border-radius: 5px; /* Arredonda levemente os cantos da imagem com um raio de 5px */
}

/* Galeria de Imagens SITES PRONTOS */
div.scroll-container {
    background-color: #333;
    overflow-x: auto;
    white-space: nowrap;
    padding: 15px;
    text-align: center;
    color: #ffffff;
}

.modeloSite{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #A7D129;
    background-color: #616F39;
    padding: 3px;
}

div.scroll-container img {
    padding: 1px 0px 2px 3px;
    width: auto;
    height: 320px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

div.scroll-container img:hover {
    transform: scale(1.05);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: flex-start; /* Alinha a imagem no topo */
    z-index: 9999;
    overflow: auto; /* Adiciona barra de rolagem quando necessário */
    padding: 20px 0; /* Espaço extra para facilitar a rolagem */
}

/* Lightbox - Imagem */
.lightbox img {
    width: 70vw; /* 70% da largura da tela */
    height: auto; /* Mantém a altura proporcional */
    max-height: none; /* Permite que a altura ultrapasse a tela */
    object-fit: contain; /* Mantém a proporção correta da imagem */
    border-radius: 10px;
}


/* Botões de navegação */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50%;
    user-select: none;
    z-index: 10000; /* Garante que os botões de navegação fiquem na frente da imagem */
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

.prev:hover, .next:hover {
    background-color: #555;
}

/* Botão de fechar */
.close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    color: white;
    background-color: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
    z-index: 10000; /* Garante que o botão de fechar fique na frente de tudo */
}

.close:hover {
    color: #f00;
}

/*ORÇAMENTO*/
.orcamento{
    background-color: #616F39;
    text-align: center;
    justify-content: center; /* Centraliza horizontalmente */
    padding-bottom: 20px;
    color: #ffffff;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}



.orcar {
    border: 2px solid #A7D129;
    display: inline-block;
    width: 650px;
    text-align: left;
    font-size: 18px;
    padding: 15px 15px 15px 15px;
    border-radius: 10px;
}

.orcar input[type="text"],[type="email"],[type="number"],[type="password"],[type="date"] {
    width: 350px;
    font-size: 18px;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
}

.orcar textarea{
    font-size: 18px;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
}

.orcar input[type="radio"]{
    font-size: 18px;
    margin-bottom: 7px;
    margin-top: 8px;
}

select{
    font-size: 18px;
    background-color: rgb(97, 111, 57, 0.9);    
    border: 2px solid #A7D129;
    border-radius: 5px;
    color: #262525;
    padding: 5px;
}

.valorMeses{
    font-size: 16px;
    width: 160px;
    background-color: rgb(97, 111, 57,);
    color: #262525;
    margin-top: 10px;
    padding: 5px;
    border-radius: 5px;
}

.btnSitesProntos button{
    background-color: #A7D129; /* Cor de fundo do botão de login */
    border-radius: 8px; /* Bordas arredondadas no botão de login */
    padding: 8px 20px; /* Espaçamento interno de 10px (vertical) e 20px (horizontal) */
    color: #000; /* Define a cor do texto do botão como preto */
    transition: background-color 0.3s ease-in-out; /* Faz a transição suave de cor de fundo ao passar o mouse */
    font-size: 18px;
    width: 150px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.btnSitesProntos button:hover{
    background-color: #616F39; /* Cor de fundo do botão de login quando o mouse passa por cima */
    color: #ffffff;
}

/* Texto Motivacional */
div.textoMotivacional {
    font-size: 18px; /* 18px em uma base de 16px */
    color: #ffffff;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    width: 65%;
    margin: 0 auto; /* Centraliza o elemento horizontalmente */
    padding: 20px 0px 10px 0px; /* Adiciona um pouco de espaço interno */
}

/* Página CONVERTER IMAGEM */
.converterImagem {
    background-color: #616F39;
    text-align: center;
    justify-content: center; /* Centraliza horizontalmente */
    padding-bottom: 20px;
    color: #ffffff;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.converterImg{
    border: 2px solid #A7D129;
    display: inline-block;
    width: 800px;
    text-align: left;
    font-size: 18px;
    padding: 15px 0px 15px 15px;
    border-radius: 10px;
    margin-bottom: 25px;
}

.converterImg form input{
    font-size: 18px;
    background-color: rgb(97, 111, 57, 0.9);    
    border-radius: 5px;
    color: #262525;
    padding: 15px;
}

.converterImg form button{
    background-color: #A7D129; /* Cor de fundo do botão de login */
    border-radius: 8px; /* Bordas arredondadas no botão de login */
    padding: 8px 20px; /* Espaçamento interno de 10px (vertical) e 20px (horizontal) */
    color: #262525; /* Define a cor do texto do botão como preto */
    transition: background-color 0.3s ease-in-out; /* Faz a transição suave de cor de fundo ao passar o mouse */
    font-size: 18px;
    width: 150px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.converterImg form button:hover{
    background-color: #616F39; /* Cor de fundo do botão de login quando o mouse passa por cima */
    color: #ffffff;
}

.converterImg img{
    width: 350px;
    height: auto;
    margin-top: 15px;
}

/*ICONES PAGINA PRINCIPAL*/
.quadro1{
    display: flex;
    justify-content: center; /* Centraliza os pacotes horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    flex-wrap: wrap; /* Permite quebra para telas menores */
    gap: 20px; /* Espaçamento entre os pacotes */
    padding: 40px 20px;
    margin: 0 auto;
    text-align: center;
}

.quadro1 img{
    width: 150px;
    height: auto;
}

.quadro2 img{
    width: 50px;
    height: auto;
}
.quadro2{
    display: flex;
    justify-content: center; /* Centraliza os pacotes horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    flex-wrap: wrap; /* Permite quebra para telas menores */
    gap: 25px; /* Espaçamento entre os pacotes */
    padding: 40px 20px;
    margin: 0 auto;
    text-align: center;
}

.pacoteIcon {
    box-sizing: border-box;
    width: 300px;
    height: 300px;
    border: 4px solid #262525;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    background: #616F39;
}

.pacoteIcon2 {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    text-align: center;
}

/*VALORES DA PAGINA INICIAL*/
.quadro {
    display: flex;
    justify-content: center; /* Centraliza os pacotes horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    flex-wrap: wrap; /* Permite quebra para telas menores */
    gap: 20px; /* Espaçamento entre os pacotes */
    max-width: 100%;
    padding: 40px 20px;
    margin: 0 auto;
    text-align: center;
}

.pacote {
    box-sizing: border-box;
    width: 400px;
    height: 950px;
    border: 4px solid #A7D129;
    border-radius: 15px;
    padding: 24px;
    text-align: center;
    transition: transform 0.3s ease;
    background: #616F39;
    color: #ffffff;
}

.pacote:hover {
    transform: translateY(-15px);
}

.nomePacote {
    color: #A7D129;
    font-weight: 300px;
    font-size: 30px;
    margin-bottom: 10px;
}

/*REDES SOCIAL*/ 
  ul.redesSociais {
    padding-left: 0;
    width: 620px;
    height: auto;
    position: relative;
    left: 50%;
    margin-top: 0px;
    margin-left: -450px;
    margin-bottom: 100px;
    cursor: pointer;
  }
  
  ul.redesSociais li {
    list-style-position: inside;
    display: block;
    position: absolute;
    right: 50%;
    transition: all 500ms;
    top: -10px;
  }
  
  /*Sem Mouse*/
  ul.redesSociais li.facebook {
    transform: scale(0.5);
    margin-right: -10px;
    z-index:1;
  }
  ul.redesSociais li.twitter {
    transform: scale(0.5);
    margin-right: -50px;
    z-index:2;
  }
  ul.redesSociais li.googleplus {
    transform: scale(0.5);
    margin-right: -90px;
    z-index:1;
  }
  
  /*Com Mouse*/
  ul.redesSociais:hover li.facebook {
    margin-right: 20px;
  }
  ul.redesSociais:hover li.twitter {
    margin-right: -50px;
  }
  ul.redesSociais:hover li.googleplus {
    margin-right: -120px;
  }

  /*TABELAS*/

  table{
    width: 100%;
    color: #262525;
    background-color: #ffffff;
    border-collapse: collapse;
  }
  
  th {
    text-align: center; /* Centraliza o texto dos cabeçalhos */
    font-weight: bold;
    background-color: #262525;
    color: #ffffff;
    padding: 8px;
  }
  td{
    border: 1px solid #262525;
    padding: 8px;
    text-align: left;
  }
  tr:nth-child(even) {
    background-color: #cdcbcb; /* Cor de fundo para linhas pares */
  }
  tr:nth-child(odd) {
    background-color: #f2f2f2; /* Cor de fundo para linhas ímpares */
  }

  .fotoAdmin{
    width: 150px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  /* Configuração para telas menores que 1200px (Exemplo: Laptops) */
@media screen and (max-width: 1440px) {
    .pacote {
        width: 350px;
        height: auto;
    }

    .orcar {
        width: 600px;
    }

    .converterImg {
        width: 600px;
    }

}

@media screen and (max-width: 1300px) {

}

/* Configuração para tablets (Exemplo: Telas menores que 1024px) */
@media screen and (max-width: 1024px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }

    .logo img {
        height: 50px;
    }

    .login-btn {
        margin-top: 10px;
    }

    .main-menu {
        flex-direction: column;
        text-align: center;
    }

    .pacote {
        width: 80%;
        height: auto;
    }

    .orcar, .converterImg {
        width: 90%;
    }

    .slider {
        max-width: 90%;
        height: auto;
    }

    .image-container img {
        width: 200px;
        height: auto;
    }

    .quadro1 {
        flex-direction: column;
    }

        .menu-toggle {
            display: block; /* Exibe o botão hambúrguer */
        }
    
        .main-menu {
            display: none; /* Esconde o menu tradicional */
            flex-direction: column;
            position: absolute;
            top: 80px;
            left: 0;
            width: 50%;
            background-color: #A7D129;
            text-align: center;
            margin-left: 40px;
            padding: 10px 0;
            z-index: 1000;
            transition: all 0.3s ease-in-out;
        }
    
        /* ✅ Exibe o menu quando o mouse passa por cima do botão hambúrguer */
        .menu-toggle:hover + .main-menu,
        .main-menu:hover {
            display: flex;
        }
    
        .main-item {
            margin: 10px 0;
        }


}
    /* ✅ Garante que o menu tradicional continue visível em telas grandes (Desktop) */
    @media screen and (min-width: 1025px) {
        .main-menu {
            display: flex !important;
        }

    }

/* Configuração para celulares (Exemplo: Telas menores que 768px) */
@media screen and (max-width: 768px) {
    h1 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    .logo img {
        height: 40px;
    }

    .hero h2 {
        font-size: 22px;
    }

    .main-menu {
        flex-direction: column;
        padding: 5px;
    }

    .main-item {
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }

    .main-item a {
        padding: 8px;
        font-size: 16px;
    }

    .pacote {
        width: 100%;
        height: auto;
    }

    .orcar, .converterImg {
        width: 95%;
    }

    .orcamento {
        padding: 15px;
    }

    footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px;
    }

    footer .col-4 {
        width: 100%;
        margin-bottom: 15px;
    }

    .footer1 h2 {
        font-size: 18px;
    }

    .slider {
        max-width: 100%;
        height: auto;
    }

    .image-container img {
        width: 150px;
        height: auto;
    }

    .btnSitesProntos button {
        width: 100%;
        font-size: 16px;
    }
    
    h5{
        color: #ffffff;
        font-size: 10px;
        margin-left: 30%;
    }

}

/* Configuração para telas menores que 480px (Exemplo: Smartphones Pequenos) */
@media screen and (max-width: 480px) {
    h1 {
        font-size: 20px;
    }

    hr{
        align-items: center;
        text-align: center;
        margin: auto;
    }

    .logo img {
        height: 30px;
    }

    .hero h2 {
        font-size: 18px;
    }

    .pacote {
        width: 100%;
        padding: 15px;
    }

    .orcar, .converterImg {
        width: 100%;
    }

    .orcamento {
        padding: 10px;
    }

    footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px;
    }

    footer .col-4 {
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
    }

    .footer1 h2 {
        font-size: 18px;
        text-align: center;
        padding-top: 30px;
    }

    .slider {
        max-width: 100%;
        height: auto;
    }

    .image-container img {
        width: 120px;
        height: auto;
    }

    .btnSitesProntos button {
        width: 100%;
        font-size: 14px;
    }

    .main-menu {
        padding: 3px;
    }

    .main-item a {
        font-size: 14px;
        padding: 5px;
    }

    .pacoteIcon{
        width: 280px;
    }
      /*Sem Mouse*/
    ul.redesSociais li.facebook {
        transform: scale(0.5);
        margin-right: -160px;
        z-index:1;
    }
    ul.redesSociais li.twitter {
        transform: scale(0.5);
        margin-right: -200px;
        z-index:2;
    }
    ul.redesSociais li.googleplus {
        transform: scale(0.5);
        margin-right: -240px;
        z-index:1;
    }
      /*Com Mouse*/
    ul.redesSociais:hover li.facebook {
        margin-right: -130px;
    }
    ul.redesSociais:hover li.twitter {
        margin-right: -200px;
    }
    ul.redesSociais:hover li.googleplus {
        margin-right: -270px;
    }

    .orcar {
        width: 90%;
    }

    .orcar input[type="text"],[type="email"],[type="number"],[type="password"],[type="date"] {
        width: 100% !important;
    }
    .orcar textarea{
        width: 100% !important;
    }

}

/* Configuração para telas menores que 320px (Exemplo: Smartphones Pequenos) */
@media screen and (max-width: 320px) {
    .login-btn{
        width: 300px;
        margin: 0;
        display: flex;
    }

}