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

html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body{
    font-family: 'Poppins', sans-serif;
    background-color: #f1f1f1;
}

:root{
    --color-subText: #3f5568;
    --color-title: #006CC4;
    --primary: #edffe2e5;
    --secondary: #006cc4bb;
    --houver-link: #75c444;
    --hover-btn-nav: #5d9b36;
    --dark: #18374e;
    --light: #eff1f3;
    --gray: #191e2e;
    --backgrond-navbar: linear-gradient(rgb(17, 30, 59), rgba(26, 46, 30, 0.342));
    --background-card:#fff;
    --background-container-about-us: #ebe5fc;
    --backgrond-numbers: linear-gradient(135deg, #6f45e2d5 0%, #88d3cec9 100%);
    font-size-adjust:1em
}

/*********************************Botaõ***********************************/
.container-btn{
    width: 100%;
    text-align: center;
}

.btn-cta{
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    background-color: var(--color-title);
    color: var(--light);
    padding: 1% 3%;
    box-shadow: 0 2px 8px var(--dark);
    cursor: pointer;
    transition: all 0.35s ease;
}

.btn-cta:hover{
    background-color: #00559b;
    border-radius: 0 15px;
}
/*********************************Botaõ***********************************/

/******************************Efeitos***********************************/
  .box {
    opacity: 0;
    transform: translateY(100px);
    transition: 1s ease-in-out;
  }
  .box.visible {
    opacity: 1;
    transform: translateY(0);
  }

  @keyframes mover1 {
    0% { transform: translatex(800px); }
    100% { transform: translatex(0); }
}

@keyframes loading2 {
  0% {
      transform: rotateY(0)
  }

  100% {
      transform: rotateY(25deg)
      
  }
}
/*************************Efeitos**********************************/

header{
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(8, 15, 29, 0.425), rgba(26, 46, 30, 0.281)), url('../img/img-hero16.png');
    background-size: cover;
    background-position: center;
    padding-top: 5.3em; /* igual à altura da navbar */
    box-shadow: 0 3px 10px rgba(8, 15, 29, 0.479);
}


.nav-bar{
    width: 100%;
    height: 5.3em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--backgrond-navbar);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    padding-top: 3%;
    padding-bottom: 3%;
}

.link-planos{
    background-color: #17458a;
    padding: 1% 2%;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

.dropdown-menu li {
    padding: 0.5em 1em;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-title);
    border: 1px solid var(--color-title);
    list-style: none;
    padding: 0;
    margin: 0; /* <-- já evita espaço extra */
    z-index: 1000;
    width: max-content; /* <-- dropdown só ocupa o necessário */
}


 .link-planos:hover .dropdown-menu {
    display: block;
    border-radius: 0 15px;
  }

.logo{
    width: 100%;
    text-align: center;
}

.logo img{
    width: 18%;
}

.nav{
    width: 100%;
}

.nav-link{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.nav-link li{
    list-style: none;
    margin-left: 4%;
    position: relative;
    z-index: 1;

}

.nav-link li a{
    text-decoration: none;
    color: var(--light);
    transition: all 0.35s ease;
}

.nav-link li a:hover{
    color: var(--houver-link);
}

.nav-btn{
    width: 100%;
    text-align: center;
}

.nav-btn button{
    color: var(--light);
    border: solid 1px var(--light);
    font-size: 1em;
    background-color:#88d3ce04;
    padding: 2.8% 5%;
    border-radius: 7px;
    transition: all 0.35s ease;
    cursor: pointer;
}

.nav-btn button:hover{
    background-color: var(--hover-btn-nav);
    color: var(--light);
    border: solid 1px var(--hover-btn-nav);
    border-radius: 0 15px;
}

.hero-slogan{
    width: 100%;
    margin-top: 13%;
    text-align: center;
    animation: mover1 2s;
}

.hero-slogan h1{
    font-size: 3.5em;
    color: var(--light);
    line-height: 1.2em;
}

.hero-content{
    margin-top: 2%;
    width: 100%;
    color: var(--light);
    text-align: center;
    animation: mover1 2s;
}

.hero-content p{
    font-size: 1.2em;
    font-weight: 500 ;
}

.hero-btn{
    width: 100%;
    margin-top: 2%;
    text-align: center;
    animation: mover1 2s;
}

.hero-btn-planos{
    color: var(--light);
    border: none;
    font-size: 1em;
    background-color: var(--houver-link);
    box-shadow: 0 4px 15px #7bc74c88 ;
    padding: 0.8% 2%;
    border-radius: 7px;
    transition: all 0.35s ease;
    cursor: pointer;
}

.hero-btn-planos:hover{
    transform: translatey(-3px);
    box-shadow: 0 6px 20px hsla(97, 52%, 52%, 0.5);
    background-color: #578b37;
    border-radius: 0 15px;
}

.hero-btn-faleConosco{
    color: var(--light);
    border: none;
    font-size: 1em;
    background-color:var(--color-title);
    padding: 0.8% 2%;
    border-radius: 7px;
    transition: all 0.5s ease;
    cursor: pointer;
    margin-left: 1%;
    transition: all 0.35s ease;
    box-shadow: 0 6px 20px #006cc477;
}

.hero-btn-faleConosco:hover{
    transform: translatey(-3px);
    background-color: #00559b;
    box-shadow: 0 6px 20px #006cc4a8;
    border-radius: 0 15px;
}

/*texto*/
.container-text-planos{
    width: 100%;
    text-align: center;
    margin-top: 8%;
}

.container-text-planos h1{
    color: var(--dark);
    padding: 0 10%;
}

.container-text-planos p{
    color: var(--dark);
    font-size: 1.5em;
}

/*cards*/
.container-cards{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 3%;
    margin-top: 3%;
    margin-bottom: 4%;
    padding-bottom: 2%;
    padding-left: 15%;
    padding-right: 15%;
}

.card-body-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background-image: linear-gradient(to right, hsla(196, 85%, 57%, 0.2), hsla(207, 100%, 38%, 0.35));
    transform: translateY(50px);
    transition: 1.3s ease-in-out;
    box-shadow: 0 3px 6px #0f68a33b;
    padding: 2% 0;
}

.card-body-container-corporativo{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background-color: #048b806b;
    background-image: linear-gradient(to right, hsla(196, 85%, 57%, 0.5), hsla(207, 100%, 38%, 0.5));
    transform: translateY(50px);
    transition: 1.3s ease-in-out;
    box-shadow: 0 3px 6px #00000048;
}

.card-body-container-corporativo a{
    text-decoration: none;
}

.card-body-container-corporativo:hover{
    background-image: linear-gradient(to right, hsla(196, 85%, 57%, 1), hsla(207, 100%, 38%, 1));
}

.corporativo-customizados{
    width: 100%;
    color: var(--dark);
    text-align: center;
}

.corporativo-customizados p{
    font-size: 1.8em;
    color: #ffffff;
    font-weight: 500;
}

.card-body-container a{
    text-decoration: none;
}

.card-body-container:hover{
    background-image: linear-gradient(to right, hsla(196, 85%, 57%, 0.5), hsla(207, 100%, 38%, 0.5));
}

.img-card{
padding: 7% 2%;
border-radius: 5px;
text-align: center;
}

.img-card img{
    width: 20%;
}

.card-body{
    width: 100%;
    padding: 0.5%;
}

.card-body h3{
    width: 100%;
    color: var(--dark);
    text-align: center;
    font-size: 2em;
}


.card-body h5{
    width: 100%;
    color: var(--dark);
    text-align: center;
    font-size: 1.2em;
    }

.card-body P {
    width: 100%;
    color: var(--dark);
    text-align: center;
    }

.container-plano-valores{
    width: auto;
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75em;
    padding: 4% 2%;
}

.container-plano-valores a{
    width: 100%;
    background-color: #2a9cfa;
    border-radius: 2em;
    transition: all 0.1s ease-in-out;
}

#plano1-valores-desc{
    width: 100%;
    font-size: 2em;
    color: #ffffff;
    font-weight: 600;
}

.container-plano-valores p{
    color: #89dd54;
}

.plano1-valores-prec{
    font-size: 1.5em;
    font-weight: 700;
    margin-left: 3%;
    margin-right: 3%;
}

.btn-container{
    width: 100%;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 7%;
}

.btn-container input{
    padding: 3% 17%; 
    border-radius: 5px;
    background-color: #89dd54;
    border: none;
    color: #ffffff;
    font-size: 1em;
    transition: 0.3s ease-in-out;
}

.btn-container input:hover{
    background-color: #7dc74c;
    color: #ffffff;
    border: none;
    cursor: pointer;
    border-radius: 0 15px;
}

/*Frases Seção*/
.frase-secao1{
    color: var(--dark);
    text-align: center;
    margin-top: 8%;
    padding: 0 10%;
}

.frase-secao2{
    text-align: center;
    margin-top: 2%;
    padding: 0 10%;
}

.frase-secao2 h1{
    color: var(--dark);
    text-align: center;
    margin-top: 2%;
    padding: 0 10%;
    font-size: 2em;
}

.frase-secao3{
    margin: 6% 10% 0 10%;
    padding: 0 2%;
    border-radius: 8px;
}

.frase-secao3 h1{
    color: var(--dark);
    text-align: center;
    padding-top: 5px;
}

.frase-secao3 h3{
    color: var(--dark);
    text-align: center;
    margin-top: 2%;
    padding-bottom: 7px;
}

.frase-secao4 h1{
    color: var(--dark);
    text-align: center;
    margin-top: 8%;
    padding: 0 10%;
    margin-bottom: 4%;
    font-size: 2em;
}

.container-icones-mini{
    margin-top: 3%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 9em;
}

.container-icones-mini img{
    width: 5%;
}

/*Sobre nós*/
.container-sobre-nos-bg{
    width: 100%;
    height: auto;
    background: linear-gradient(#f1f1f1, rgba(22, 37, 25, 0.726)), url('../img/img_bg_sobre6.jpg');
    background-size: cover;
    background-position: center;
    margin-top: 4%;
}

.sobre-a-empresa-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3% 15%;
}

.sobre-a-empresa{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sobre-a-empresa h1{
    color: var(--dark);
    font-size: 2em;
    text-align: center;
    font-size: 3em;
}

.sobre-a-empresa p{
    color: var(--dark);
    margin-top: 3%;
    padding: 0 10em;
    text-align: center;
    font-size: 1.2em;
}

.missao-visao-valores-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.m-v-v{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5%;
}

.m-v-v img{
    width: 20%;
}

.m-v-v h1{
    color: #319cff;
}

.m-v-v p{
    color: var(--light);
}



/*Cobertura*/
.cobertura-container{
    width: 100%;
    height: auto;
    padding: 5% 15%;
    background: linear-gradient(#f1f1f1, #ffffffb0), url('../img/mapa\ 1.png');
    background-size: cover;
    background-position: center;
}

.titulo-cobertura h1{
    text-align: center;
    color: var(--dark);
    font-size: 3em;
    margin-top: 3%;
}

.card-cidades-atendidas{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10em;
    padding: 3% 2%;
    background-color: #7dc74c;
    border-radius: 8px;
    margin-top: 8%;
}

.jacarei-container h2{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
}

.saojose-container h2{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
}

/*teste velocidade*/
.teste-velocidade-container{
    width: 100%;
    height: auto;
    background: linear-gradient(rgba(8, 15, 29, 0.527), rgba(26, 46, 30, 0.692)), url('../img/Frame\ 3.png');
    background-size: cover;
    background-position: center;
    padding: 5%;
}

.area-cliente{
    text-align: center;
    padding: 0 15%;
}

.area-cliente h1{
    color: var(--light);
    font-size: 2em;
}

.velocity-test{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5% 15%;
}

.nav-btn3{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.nav-btn3 img{
    width: 20%;
}

.nav-btn3 button{
    color: var(--light);
    border: none;
    font-size: 1em;
    background-color:#058eff;
    border-radius: 7px;
    transition: all 0.35s ease;
    cursor: pointer;
    width: 12em;
    height: 3em;
}

.nav-btn3 button:hover{
    background-color:#0479da;
    opacity: 0.7;
    border-radius: 0 15px;
}

.nav-btn4{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.nav-btn4 img{
    width: 20%;
}

.nav-btn4 button{
    color: var(--light);
    border: none;
    font-size: 1em;
    background-color:#058eff;
    border-radius: 7px;
    transition: all 0.35s ease;
    cursor: pointer;
    width: 12em;
    height: 3em;
}

.nav-btn4 button:hover{
    background-color:#0479da;
    opacity: 0.7;
    border-radius: 0 15px;
}

.nav-btn5{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.nav-btn5 img{
    width: 20%;
}

.nav-btn5 button{
    color: var(--light);
    border: none;
    font-size: 1em;
    background-color:#058eff;
    padding: 0;
    border-radius: 7px;
    transition: all 0.35s ease;
    cursor: pointer;
    width: 12em;
    height: 3em;
}

.nav-btn5 button:hover{
    background-color:#0479da;
    opacity: 0.7;   
    border-radius: 0 15px;
}

/*Entre Seção*/
.entre-secao-container{
    margin-top: 5%;
    width: 100%;
    padding: 0 10%;
}

.entre-secao-container h3{
    text-align: center;
    color: var(--dark);
}

.entre-secao-img{
    margin-top: 3%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 9em;
}

.entre-secao-img img{
    width: 7%;
}

.bonus-container{
    width: 100%;
    height: 70vh;
    background: linear-gradient(#f1f1f1, #f1f1f14f), url('../img/tv.png');
    background-size: cover;
    background-position: center; 
}

.bonus-container h1{
    margin-top: 6%;
    text-align: center;
    color: var(--dark);
}

.bonus-container p{
    margin-top: 6%;
    text-align: center;
    color: var(--dark);
    font-size: 1.5em;
}

.bonus-container img{
    width: 3%;
}

/*Depoimentos*/
.testimony{
    width: 100%;
    height: auto;
    margin-top: 5%;
    background-size: cover;
    background-position: center;
    padding: 5.3em 0; /* igual à altura da navbar */
    background: linear-gradient(#f1f1f1, #006cc49f);
}

.container-testimony{
    width: 100%;
}

.container-title-testimony{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-title-testimony h1{
    color: var(--dark);
    font-size: 2.5em;
}

.container-title-testimony p{
    margin-top: 1%;
    font-size: 1.2em;
    color: var(--dark);
}

.container-testimony-card{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 5%;
    padding: 0 5%;
    gap: 2%;
}

.container-messsage{
    width: 100%;
    height: 18em;
    background-color: var(--light);
    padding: 2%;
    border-radius: 10px;
}

.container-messsage p{
    color: var(--dark);
}

.container-testemony-img{
    width: 100%;
    margin-top: 5%;
}

.container-testemony-img h2{    
    color: var(--dark);
}

.container-testemony-img p{    
    color: var(--dark);
}

.container-testemony-img img{
    width: 20%;
    border-radius: 50%;
}

.orcamento{
    width: 100%;
    height: auto;
    background: linear-gradient(#040a0631, #f1f1f1);
    background-size: cover;
    background-position: center;
}

.orcamento-conatiner{
    text-align: center;
    margin-bottom: 3%;
    padding-top: 6%;
}

.orcamento-conatiner h1 {
    text-align: center;
    color: var(--dark);
    font-size: 2.5em;
}

.orcamento-conatiner p {
    text-align: center;
    color: var(--dark);
}

/*listas*/
.list-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5em;
    margin-top: 6%;
}

.list li{
    color: var(--dark);
}

/*duvidas*/
.faq {
  max-width: 700px;
  margin: 50px auto;
  padding: 20px;
  margin-top: 4%;
}

.faq h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 2rem;
  color: var(--dark);
}

.faq-item {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.faq-question {
  width: 100%;
  padding: 15px;
  background: #f7f7f7;
  border: none;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: all 0.3s;
  color: var(--dark);
}

.faq-question:hover {
  background: #80c754;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 15px;
  color: var(--dark);
}

.faq-answer p {
  margin: 10px 0;
}



/*footer*/
footer{
    width: 100%;
    height: auto;
    margin-top: 6%;
    background: linear-gradient(rgba(4, 10, 6, 0.747), rgba(42, 56, 77, 0.932)), url('../img/img-hero.png');
    background-size: cover;
    background-position: center;
}

.container-footer{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:normal;
    padding: 2% 20%;
    gap: 5%;
}

.container-footer-message{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.container-footer-message h2{
    color: var(--light);
}

.container-footer-message p{
    margin-top: 5%;
    color: var(--light);
}

.container-footer-link{
    width: 100%;
}

.container-footer-link h2{
    color: var(--light);
}

.footer-link{
    margin-top: 2%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 1em;
    margin: 4% 0;
    padding: 0;
    list-style: none;
}

.footer-link li{
    list-style: none;
}

.footer-link a{
    text-decoration: none;
    color: var(--light);
    transition: all 0.3s ease-in;
}

.footer-link a:hover{
    color: var(--houver-link);
}

.container-footer-contato h2{
    color: var(--light);
}

.footer-link-contato{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 1em;
    color: var(--light);
    margin: 10% 0;
    padding: 0;
    list-style: none;
}

.footer-link-contato li{
    list-style: none;
}

.container-linha{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-linha hr{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 10%;
}

.copyright{
    text-align: center;
    color: var(--light);
    font-size: 1.1em;
    padding:2% 0%;
}

.logo-footer{
    text-align: center;
    width: 100%;
    padding-bottom: 2%;
}

.logo-footer img{
    width: 6%;
}

.logo-footer a{
    text-decoration: none;
    color: var(--light);
}

.whars-static{
  position: fixed;         
  bottom: 1%;             
  left: 1%;
  z-index: 5;
}

.whars-static img{
  width: 55%;
  cursor: pointer;
  animation: loading2 0.7s linear infinite;
}

.instag-static{
    position: fixed;          /* Fixa o ícone na posição */
    bottom: 10%;             /* Distância da parte inferior da tela */
    left: 1%;
    z-index: 5;
}

.instag-static img{
    width: 55%;
    cursor: pointer;
    animation: loading2 0.7s linear infinite;
}

@media (max-width: 768px) {
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body{
    font-family: 'Poppins', sans-serif;
    background-color: #f1f1f1;
}

:root{
    --color-title: #006CC4;
    --primary: #edffe2e5;
    --secondary: #006cc4bb;
    --houver-link: #75c444;
    --hover-btn-nav: #5d9b36;
    --dark: #18374e;
    --light: #eff1f3;
    --gray: #191e2e;
    --backgrond-navbar: linear-gradient(rgb(17, 30, 59), rgba(26, 46, 30, 0.342));
    --backgrond-navbar-mobile: linear-gradient(rgba(26, 46, 30, 0.342), rgb(17, 30, 59));
    --background-card:#fff;
    --background-container-about-us: #ebe5fc;
    --backgrond-numbers: linear-gradient(135deg, #6f45e2d5 0%, #88d3cec9 100%);
    font-size-adjust:1em
}

/*********************************Botaõ***********************************/
.container-btn{
    width: 100%;
    text-align: center;
    margin-bottom: 10%;
}

.btn-cta{
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    background-color: var(--color-title);
    color: var(--light);
    padding: 3% 6%;
    box-shadow: 0 2px 8px var(--dark);
    cursor: pointer;
    transition: all 0.35s ease;
}

.btn-cta:hover{
    background-color: #00559b;
    border-radius: 0 15px;
}
/*********************************Botaõ***********************************/

/******************************Efeitos***********************************/
  .box {
    opacity: 0;
    transform: translateY(50px);
    transition: 1s ease-in-out;
  }
  .box.visible {
    opacity: 1;
    transform: translateY(0);
  }

  @keyframes mover1 {
    0% { transform: translatex(800px); }
    100% { transform: translatex(0); }
}
/*************************Efeitos**********************************/

header{
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(8, 15, 29, 0.425), rgba(26, 46, 30, 0.281)), url('../img/img-hero16.png');
    background-size: cover;
    background-position: center;
    padding-top: 5.3em; /* igual à altura da navbar */
    box-shadow: 0 3px 10px rgba(8, 15, 29, 0.479);
}

.nav-bar{
    width:100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--backgrond-navbar);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    padding-top: 3%;
    padding-bottom: 3%;
}

/*humburger*/
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 9%;
  height: 24px;
  cursor: pointer;
  margin-top: 3%;
}

.hamburger .line {
  width: 100%;
  height: 3px;
  background-color: var(--light);
  transition: all 0.3s ease;
}

.nav{
  height: 100vh;
  font-family: 'Poppins', sans-serif;
  display: flex;
  position: absolute;
  top: 100%; /* Ajuste conforme o tamanho do header */
  right: -100%; /* Esconde o menu fora da tela */
  max-width: 100%;
  background: var(--backgrond-navbar-mobile);
  transition: right 0.3s ease;
  border-radius: 1px 0px 0px 1px;
}

/* Classe para mostrar o menu */
.nav.active{
  right: 0;
}

/* Animação do ícone hamburger */
.hamburger.active .line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .line:nth-child(2) {
  opacity: 0;
}

.hamburger.active .line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -5px);
}


.logo{
    width: 100%;
    text-align: center;
}

.logo img{
    width: 17%;
}

.link-planos{
    background-color: #17458a00;
    padding: 0% 0%;
    border-radius: 0px;
    position: relative;
    cursor: pointer;
}

.dropdown-menu li {
    display: none;
    padding: 0em 0em;
}

.dropdown-menu{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff00;
    border: 1px solid #ffffff00;
    list-style: none;
    padding: 0;
    margin-top: 0%;
    z-index: 1000;
}

 .link-planos:hover .dropdown-menu {
    display: block;
    border-radius: 0 15px;
  }

.nav-link{
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items:center;
    padding-bottom: 0%;
    padding-left: 3%;
    padding-right: 3%;
    gap: 0.3em;
    margin-top: 20%;
     
}

.nav-link li{
    width: 100%;
    list-style: none;
    margin-left: 0%;
    background: #f7f7f7;
    text-align: center;
    padding: 2% 0;
    border-radius: 7px;
}

.nav-link li a{
    width: 100%;
    text-decoration: none;
    color: var(--dark);
    transition: all 0.35s ease;
  
}

.nav-link li a:hover{
    color: var(--houver-link);
}

.nav-btn{
    width: 100%;
    text-align: center;
}

.nav-btn button{
    color: var(--light);
    border: solid 1px var(--light);
    font-size: 1em;
    background-color:#88d3ce04;
    padding: 2.8% 5%;
    border-radius: 7px;
    transition: all 0.35s ease;
    cursor: pointer;
}

.nav-btn button:hover{
    background-color: var(--hover-btn-nav);
    color: var(--light);
    border: solid 1px var(--hover-btn-nav);
    border-radius: 7px;
}

.hero-slogan{
    width: 100%;
    margin-top: 40%;
    text-align: center;
    animation: mover1 2s;
    padding: 3%;
}

.hero-slogan h1{
    font-size: 2em;
    color: var(--light);
    line-height: 1.2em;
}

.hero-content{
    margin-top: 2%;
    width: 100%;
    color: var(--light);
    text-align: center;
    animation: mover1 2s;
}

.hero-content p{
    font-size: 1.2em;
    font-weight: 500;
    padding: 3%;
}

.hero-btn{
    width: 100%;
    margin-top: 2%;
    text-align: center;
    animation: mover1 2s;
}

.hero-btn-planos{
    color: var(--light);
    border: none;
    font-size: 1em;
    background-color: var(--houver-link);
    box-shadow: 0 4px 15px #7bc74c88 ;
    padding: 2% 4%;
    border-radius: 7px;
    transition: all 0.35s ease;
    cursor: pointer;
}

.hero-btn-planos:hover{
    transform: translatey(-3px);
    box-shadow: 0 6px 20px hsla(97, 52%, 52%, 0.5);
    background-color: #578b37;
    border-radius: 0 15px;
}

.hero-btn-faleConosco{
    color: var(--light);
    border: none;
    font-size: 1em;
    background-color:var(--color-title);
    padding: 2% 4%;
    border-radius: 7px;
    transition: all 0.5s ease;
    cursor: pointer;
    margin-left: 1%;
    transition: all 0.35s ease;
    box-shadow: 0 6px 20px #006cc477;
}

.hero-btn-faleConosco:hover{
    transform: translatey(-3px);
    background-color: #00559b;
    box-shadow: 0 6px 20px #006cc4a8;
    border-radius: 0 15px;
}

/*texto*/
.container-text-planos{
    width: 100%;
    text-align: center;
    margin-top: 10%;
}

.container-text-planos h1{
    color: var(--dark);
    padding: 0 3%;
}

.container-text-planos p{
    color: var(--dark);
    font-size: 1.2em;
    padding: 0 3%;
}

/*cards*/
.container-cards{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    margin-top: 3%;
    margin-bottom: 25%; /*Resolução momentânea*/
    padding-bottom: 2%;
    padding-left: 3%;
    padding-right: 3%;
}

.card-body-container{
    width: 100%;
    display: flex;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background-image: linear-gradient(to right, hsla(196, 85%, 57%, 0.2), hsla(207, 100%, 38%, 0.35));
    transform: translateY(50px);
    transition: 1.3s ease-in-out;
    box-shadow: 0 3px 6px #0f68a33b;
    padding: 2% 0;
}

.card-body-container-corporativo{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background-color: #048b806b;
    background-image: linear-gradient(to right, hsla(196, 85%, 57%, 0.5), hsla(207, 100%, 38%, 0.5));
    transform: translateY(50px);
    transition: 1.3s ease-in-out;
    box-shadow: 0 3px 6px #00000048;
}

.card-body-container-corporativo a{
    text-decoration: none;
}

.card-body-container-corporativo:hover{
    background-image: linear-gradient(to right, hsla(196, 85%, 57%, 1), hsla(207, 100%, 38%, 1));
}

.corporativo-customizados{
    width: 100%;
    color: var(--dark);
    text-align: center;
}

.corporativo-customizados p{
    font-size: 1.8em;
    color: #ffffff;
    font-weight: 500;
}

.card-body-container a{
    text-decoration: none;
}

.card-body-container:hover{
    background-image: linear-gradient(to right, hsla(196, 85%, 57%, 0.5), hsla(207, 100%, 38%, 0.5));
}

.img-card{
padding: 7% 2%;
border-radius: 5px;
text-align: center;
}

.img-card img{
    width: 20%;
}

.card-body{
    width: 100%;
    padding: 0.5%;
}

.card-body h3{
    width: 100%;
    color: var(--dark);
    text-align: center;
    font-size: 2em;
}


.card-body h5{
    width: 100%;
    color: var(--dark);
    text-align: center;
    font-size: 1.2em;
    }

.card-body P {
    width: 100%;
    color: var(--dark);
    text-align: center;
    }

.container-plano-valores{
    width: auto;
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75em;
    padding: 4% 2%;
}

.container-plano-valores a{
    width: 100%;
    background-color: #2a9cfa;
    border-radius: 2em;
    transition: all 0.1s ease-in-out;
}


#plano1-valores-desc{
    width: 100%;
    font-size: 2em;
    color: #ffffff;
    font-weight: 600;
}

.container-plano-valores p{
    color: #89dd54;
}

.plano1-valores-prec{
    font-size: 1.5em;
    font-weight: 700;
    margin-left: 3%;
    margin-right: 3%;
}

.btn-container{
    width: 100%;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 7%;
}

.btn-container input{
    padding: 3% 17%; 
    border-radius: 5px;
    background-color: #89dd54;
    border: none;
    color: #ffffff;
    font-size: 1em;
    transition: 0.3s ease-in-out;
}

.btn-container input:hover{
    background-color: #7dc74c;
    color: #ffffff;
    border: none;
    cursor: pointer;
    border-radius: 0 15px;
}

/*Frases Seção*/
.frase-secao1{
    color: var(--dark);
    text-align: center;
    margin-top: 8%;
    padding: 0 3%;
}

.frase-secao2{
    color: var(--dark);
    text-align: center;
    margin-top: 6%;
    padding: 0 3%;
}

.frase-secao2 h1{
    color: var(--dark);
    text-align: center;
    margin-top: 6%;
    padding: 0 3%;
    font-size: 1.3em;
}

.frase-secao3{
    margin: 6% 10% 0 10%;
    padding: 0 2%;
    border-radius: 8px;
}

.frase-secao3 h1{
    color: var(--dark);
    text-align: center;
    padding-top: 5px;
}

.frase-secao3 h3{
    color: var(--dark);
    text-align: center;
    margin-top: 6%;
    padding-bottom: 7px;
}

.frase-secao4 h1{
    color: var(--dark);
    text-align: center;
    margin-top: 8%;
    padding: 0 3%;
    margin-bottom: 8%;
    font-size: 1.3em;
}

.container-icones-mini{
    margin-top: 6%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2.5em;
    padding: 0 3%;
}

.container-icones-mini img{
    width: 15%;
}

/*Sobre nós*/
.container-sobre-nos-bg{
    width: 100%;
    height: auto;
    background: linear-gradient(#f1f1f1, rgba(22, 37, 25, 0.726)), url('../img/img_sobre.png');
    background-size: cover;
    background-position: center;
    margin-top: 10%;
}

.sobre-a-empresa-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3% 3%;
}

.sobre-a-empresa{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sobre-a-empresa h1{
    color: var(--dark);
    text-align: center;
    font-size: 2em;
}

.sobre-a-empresa p{
    color: var(--dark);
    margin-top: 3%;
    padding: 0 0em;
    text-align: center;
    font-size: 1.2em;
}

.missao-visao-valores-container{ /*provisório - propor um carrossel ou outro layout*/
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
    margin-top: 15%;
}

.m-v-v{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5%;
}

.m-v-v img{
    width: 20%;
}

.m-v-v h1{
    color: #319cff;
}

.m-v-v p{
    color: var(--light);
}

/*Cobertura*/
.cobertura-container{
    width: 100%;
    height: auto;
    padding: 5% 3%;
    background: linear-gradient(#f1f1f1, #ffffffb0), url('../img/mapa\ 1.png');
    background-size: cover;
    background-position: center;
}

.titulo-cobertura h1{
    text-align: center;
    color: var(--dark);
    font-size: 2em;
    margin-top: 8%;
}

.card-cidades-atendidas{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    padding: 3% 2%;
    background-color: #7dc74c;
    border-radius: 8px;
    margin-top: 8%;
}

.jacarei-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jacarei-container h2{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
}

.saojose-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.saojose-container h2{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
}

/*teste velocidade*/
.teste-velocidade-container{
    width: 100%;
    height: auto;
    background: linear-gradient(rgba(8, 15, 29, 0.527), rgba(26, 46, 30, 0.692)), url('../img/Frame\ 3.png');
    background-size: cover;
    background-position: center;
    padding: 5%;
}

.area-cliente{
    text-align: center;
    padding: 0 3%;
}

.area-cliente h1{
    color: var(--light);
    font-size:1.5em;
    margin-top: 8%;
}

.velocity-test{ /*provisório - propor um carrossel ou outro layout*/
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5% 3%;
}

.nav-btn3{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.nav-btn3 img{
    width: 20%;
}

.nav-btn3 button{
    color: var(--light);
    border: none;
    font-size: 1em;
    background-color:#058eff;
    border-radius: 7px;
    transition: all 0.35s ease;
    cursor: pointer;
    width: 12em;
    height: 3em;
}

.nav-btn3 button:hover{
    background-color:#0479da;
    opacity: 0.7;
    border-radius: 0 15px;
}

.nav-btn4{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.nav-btn4 img{
    width: 20%;
}

.nav-btn4 button{
    color: var(--light);
    border: none;
    font-size: 1em;
    background-color:#058eff;
    border-radius: 7px;
    transition: all 0.35s ease;
    cursor: pointer;
    width: 12em;
    height: 3em;
}

.nav-btn4 button:hover{
    background-color:#0479da;
    opacity: 0.7;
    border-radius: 0 15px;
}

.nav-btn5{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

.nav-btn5 img{
    width: 20%;
}

.nav-btn5 button{
    color: var(--light);
    border: none;
    font-size: 1em;
    background-color:#058eff;
    padding: 0;
    border-radius: 7px;
    transition: all 0.35s ease;
    cursor: pointer;
    width: 12em;
    height: 3em;
}

.nav-btn5 button:hover{
    background-color:#0479da;
    opacity: 0.7;   
    border-radius: 0 15px;
}

/*Entre seção*/
.entre-secao-container{
    margin-top: 10%;
    width: 100%;
    padding: 0 3%;
}

.entre-secao-container h3{
    text-align: center;
    color: var(--dark);
}

.entre-secao-img{
    margin-top: 3%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3em;
}

.entre-secao-img img{
    width: 15%;
}

/*Bônus*/
.bonus-container{
    width: 100%;
    height: auto;
    background: linear-gradient(#f1f1f1, #f1f1f14f), url('../img/tv.png');
    background-size: contain;
    background-position: center; 
    background-repeat: no-repeat;
    background-position: top; /* foca na parte superior da imagem */
}

.bonus-container h1{
    margin-top: 12%;
    text-align: center;
    color: var(--dark);
}

.bonus-container p{
    margin-top: 6%;
    text-align: center;
    color: var(--dark);
    font-size: 1em;
}

.bonus-container img{
    width: 3%;
}

/*Depoimentos*/
.testimony{
    width: 100%;
    height: auto;
    margin-top: 5%;
    background-size: cover;
    background-position: center;
    padding: 5.3em 3%; /* igual à altura da navbar */
    background: linear-gradient(#f1f1f1, #006cc49f);
}

.container-testimony{
    width: 100%;
}

.container-title-testimony{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-title-testimony h1{
    color: var(--dark);
    font-size: 1.8em;
    text-align: center;
}

.container-title-testimony p{
    margin-top: 1%;
    font-size: 1.2em;
    color: var(--dark);
    text-align: center;
}

.container-testimony-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 5%;
    padding: 0 0%;
    gap: 0.8em;
}

.container-messsage{
    width: 100%;
    height: 18em;
    background-color: var(--light);
    padding: 2%;
    border-radius: 10px;
}

.container-messsage p{
    color: var(--dark);
}

.container-testemony-img{
    width: 100%;
    margin-top: 5%;
}

.container-testemony-img h2{    
    color: var(--dark);
}

.container-testemony-img p{    
    color: var(--dark);
}

.container-testemony-img img{
    width: 20%;
    border-radius: 50%;
}

.orcamento{
    width: 100%;
    height: auto;
    background: linear-gradient(#040a0631, #f1f1f1);
    background-size: cover;
    background-position: center;
}

.orcamento-conatiner{
    text-align: center;
    margin-bottom: 3%;
    padding-top: 6%;
}

.orcamento-conatiner h1 {
    text-align: center;
    color: var(--dark);
    font-size: 2em;
    margin-top: 3%;
}

.orcamento-conatiner p {
    margin-top: 3%;
    margin-bottom: 8%;
    text-align: center;
    color: var(--dark);
}

/*listas*/
.list-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:initial;
    margin-top: 15%;
    padding: 0 4%;
}

.list li{
    color: var(--dark);
}

/*duvidas*/
.faq {
  max-width: 700px;
  margin: 50px auto;
  padding: 5% 3%;
  margin-top: 4%;
}

.faq h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 2rem;
  color: var(--dark);
}

.faq-item {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.faq-question {
  width: 100%;
  padding: 15px;
  background: #f7f7f7;
  border: none;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: all 0.3s;
  color: var(--dark);
}

.faq-question:hover {
  background: #80c754;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 15px;
  color: var(--dark);
}

.faq-answer p {
  margin: 10px 0;
}


/*footer*/
footer{
    width: 100%;
    height: auto;
    margin-top: 6%;
    background: linear-gradient(rgba(4, 10, 6, 0.747), rgba(42, 56, 77, 0.932)), url('../img/img-hero.png');
    background-size: cover;
    background-position: center;
   
}

.container-footer{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:normal;
    padding: 3% 3%;
    gap: 2%;
}

.container-footer-message{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.container-footer-message h2{
    color: var(--light);
}

.container-footer-message p{
    margin-top: 5%;
    color: var(--light);
}

.container-footer-link{
    width: 100%;
}

.container-footer-link h2{
    color: var(--light);
}

.footer-link{
    margin-top: 2%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 1em;
    margin: 4% 0;
    padding: 0;
    list-style: none;
}

.footer-link li{
    list-style: none;
}

.footer-link a{
    text-decoration: none;
    color: var(--light);
    transition: all 0.3s ease-in;
}

.footer-link a:hover{
    color: var(--light);
}

.container-footer-contato h2{
    color: var(--light);
}

.footer-link-contato{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 1em;
    color: var(--light);
    margin: 10% 0;
    padding: 0;
    list-style: none;
}

.footer-link-contato li{
    list-style: none;
}

.container-linha{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-linha hr{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 10%;
}

.copyright{
    text-align: center;
    color: var(--light);
    font-size: 1.1em;
    padding:2% 0%;
}

.logo-footer{
    text-align: center;
    width: 100%;
    padding-bottom: 2%;
}

.logo-footer img{
    width: 24%;
}

.logo-footer a{
    text-decoration: none;
    color: var(--light);
}

.whars-static{
  position: fixed;         
  bottom: 7%;             
  left: 2%;
  z-index: 99;
}

.whars-static img{
  width: 48%;
  cursor: pointer;
  animation: loading2 0.7s linear infinite;
}

.instag-static{
    position: fixed;
    bottom: 0%;  
    left: 2%;
    z-index: 99;
}

.instag-static img{
    width: 48%;
    cursor: pointer;
    animation: loading2 0.7s linear infinite;
}

}