/* Reset */
body { margin:0; font-family:"Segoe UI", sans-serif; line-height:1.6; color:#333; scroll-behavior:smooth; background:#fff; }

/* Navbar */
.navbar {
  height: 50px;
  opacity: 0.8;
  position:fixed; top:0; left:3px; width:98%; border-radius: 10px; 
  background:#d864ce; padding:12px; 
  display:flex; justify-content:space-between; align-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.1); z-index:1000; box-shadow: 5px 5px 40px 5px #d864ce;
}

.navlek { max-width: 100%; height: auto; border-radius: 10px; position: fixed; opacity: 0.7;}
.logo { height: 50px; width: 340px; font-size:25px; font-weight:650; color:#000; box-shadow: 2px 2px 20px 2px aqua; border-radius: 10px;}
.logo p {margin-top:0px; margin-left: 40px;}
.nav-links { list-style:none; display:flex; gap:10px;  }
.nav-links a { text-decoration:none; color:black; font-size: 16px; font-weight:600; border: 1.5px solid black; padding: 1px 10px; border-radius: 10px; box-shadow: 1px 1px 15px 1px aqua;}
.nav-links a:hover { color: black; background-color: rgb(24, 185, 185); transform: scale(0.); transition: 0.2s; font-size: 17px; }


/* Hero */
.hero { margin-top:74px; height:90vh; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:white; text-align:center;}
#particles { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.hero .overlay { position:relative; z-index:1; max-width:600px; padding:20px; margin-top: 20px; margin-bottom: 20px; }

.hero-descriptio {font-size: 45px; color: black;}
.hero-description {
    font-size: 20px;
    color: #000 ; 
    font-weight: bold;
    box-shadow: 3px 3px 20px 3px aqua;
    border-radius: 5px;
}

.subsub {width: 400px; margin-left: 100px; font-size: 20px; color: #033138; border-radius: 5px; box-shadow: 3px 3px 20px 3px rgb(139, 10, 129);}

.directtt a{ text-decoration: none; list-style: none; color: aqua; background-color: black; padding: 3px 8px; margin-left: 80px; border-radius: 10px; box-shadow: 2px 2px 20px 2px #054853;}

.hero-buttons .btn.primary {background:#9333ea; color:#fff; }
.hero-buttons .btn.primary:hover { transform:scale(1.05); color: #000;}

.btn.secondary { background:#f59e0b; color:#000; }
.btn.secondary:hover{ transform:scale(1.05); color: #000;}

/* Aside */ 
.aside-info { display:flex; justify-content:space-between; align-items:center; padding:50px 10%; gap:40px; flex-wrap:wrap; margin-top: 25px; }
.aside-info .text { flex:1; text-align:left; }
.aside-info .image img { max-width:350px; border-radius:20px; }
.aside-info .text h2 { font-size: 35px; color: #000;}
.aside-info .text p {font-size: 20px; font-weight: 600; color: #000;}
.aside-info .text a {color: aqua;}
/* Sections */
.section { padding:80px 10%; text-align:center; }
.section.alt { background:#536f8b; }
.section.highlight { background:#9333ea; color:#fff; opacity: 0.95;}


/* Features */
.features-grid {border-radius: 13px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-top:30px; background-color: aqua; opacity: 0.9; color: white;}
.feature {opacity: 0.98; background:#000; padding:20px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.1); font-size: 19px;}
.feature small { display:block; margin-top:5px; color:#fff; }

/* Imagens Full Banner */
.full-banner {
  gap: 20px;
  width:300px;
  height:350px;
  object-fit:cover;
  margin:30px 0;
  border-radius:8px;
  box-shadow: 5px 5px 20px 5px #9333ea;
}


.ful-banner {  width:320px;
  max-height:420px;
  object-fit:cover;
  margin:5px 0;
  border-radius:8px;
  box-shadow: 5px 5px 20px 5px #d864ce;
}

.text-img {box-shadow: 5px 5px 35px 5px aqua; }

.fiii {font-size: 18px; margin-bottom: 30px;}
/* Depoimentos */
.testimonials { background:linear-gradient(130deg,#f3e8ff,#52768f); }
.carousel-container { overflow:hidden; max-width:700px; margin: 0 auto; }
.carousel { display:flex; transition:transform 0.8s ease-in-out; gap: 30px; margin-right: 40px; padding-bottom: 2px;}
.card { min-width:70%; flex-shrink:0; background:#fff; border-radius:12px; padding:20px; box-shadow:0 4px 12px rgba(0,0,0,0.15); font-style:italic; font-size:16px; }
.card img {margin-left: 20%; margin-bottom: 20px; display: flex; width: 350px; height: 200px; box-shadow: 5px 5px 20px 5px #d864ce;}
.kkkk {font-size: 19px; font-weight: bold;}

/* Footer */
footer { text-align:center; padding:20px; background:#111111; color:#aca7a7; opacity: 0.9; border-radius: 15px;}
footer .socials a { color:#beb8b8; text-decoration:none; margin:0 5px; }
footer .socials a:hover { text-decoration:underline; }

/* Botões */
.btn { padding:12px 24px; border-radius:30px; text-decoration:none; font-weight:bold; transition:0.3s; margin:5px; display:inline-block; }
.btn.primary { background:#000; color:#9333ea; }
.btn.primary:hover { transform:scale(1.05); color: #fff;}
.btn.secondary { background:#f59e0b; color:#fff; }
.btn.secondary:hover { transform:scale(1.05); }

/* Scroll Reveal */
.reveal { opacity:0; transform:translateY(40px); transition:all 0.8s ease; }
.reveal.active { opacity:1; transform:translateY(0); }


.pan {color: rgb(1, 250, 250);}
.paaan{color: #000; font-size: 16px;}
.hhh{color: #000; border: solid 1px #000; width: 400px; margin: 0 auto; border-radius: 10px; background-color: black; box-shadow: aqua 2px 2px 10px 2px;}
.hhh a {text-decoration: none; color: aqua;}
.hhh:hover {color: white; transition: 0.3s; transform: translateY(-2px);}
.bonnus{color: #000; font-weight: bold;}





.pricing {
  opacity: 0.85;
  text-align: center;
  padding: 60px 20px;
  background: #9333ea;
  font-family: Arial, sans-serif;
}

.pricing h2 {
  font-weight: bold;
  color: black;
  font-size: 2rem;
  margin-bottom: 40px;
}

.pricing-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.plan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #000;
  color: aqua;
  border: 2px solid #eee;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 5px 5px 20px 5px aqua;
  transition: transform 0.3s ease;
}

.plan:hover {
  transform: translateY(-5px);
}


.plan h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.plan p {
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.plan img {
  width: 200px;
  height: 250px;
  opacity: 0.99;
}

.plan .price {
  display: block;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
}

.classic {
 display:flex; justify-content:space-between; align-items:center; padding:50px 10%; gap:40px; flex-wrap:wrap; margin-top: 25px; 

}

.container-flex {

  opacity: 0.95;
  display: flex;
  flex-direction: row;
  gap: 100px;
  justify-content: center;
  align-items: center;

}
.tect {
  height: 400px;
  width: 50%;
  margin-top: 0;
}

.tect h5 {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  margin-bottom: 15px;
}
.tect p {
  padding: 10px;
  font-size: 18px;
  color: #000;
  font-weight: 600;
  box-shadow: rgb(163, 9, 137) 3px 3px 20px 3px;
  border-radius: 5px;
  padding: 10px;
}

.tect1 {
  height: 450px;
  width: 350px;
  margin-top: 0;
  box-shadow: rgb(26, 27, 27) 5px 5px 20px 5px;
  border-radius: 10px;
  cursor: pointer;}

  .btnnnn {
    padding: 8px 25px;
    margin-left: 33%;
    border-radius: 10px;
    margin-top: 15px;
    color: #5b08a8;
    font-weight: bold;
    box-shadow: rgb(163, 9, 137) 3px 3px 20px 3px;
  }

  .btnnnn:hover {
    background-color: aqua;
    color: black;
    transition: 0.3s;
    transform: scale(1.1);
    cursor: pointer;
  }

.btnn {
  background: #5b08a8;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
  box-shadow: 2px 2px 10px 2px aqua;
}
.btnn a {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.btnn:hover {
  background: aqua;
  color: black;
}

.featured {
  border: 2px solid #4CAF50;
  box-shadow: 5px 5px 20px 5px aqua;
  transform: scale(1.05);
}



.oiae {
  font-weight: 900;
  margin-bottom: 50px;
  padding: 10px;
  color: #000;
  box-shadow: aqua 5px 5px 20px 5px;
}

.fts {
  width: 70px;
  height: 50px;
  margin-left: 0;
  margin-right: 5px;
  border-radius: 15px;
   box-shadow: rgb(26, 27, 27) 2px 2px 10px 2px;
   cursor: pointer;
}

.fts:hover {
  transform:scale(1.1); 
  transition: 0.3s;
}

.content-fts {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.oooo h3 {
 margin-top: 0;
 font-size: 10px;
 gap: 15px;
}

.rrrr p {
  font-size: 10px;
  margin: 0 0 10px 5px;
  border: 0.8px solid black;
  border-radius: 5px;
  box-shadow: rgb(26, 27, 27) 2px 2px 10px 2px;
  font-weight: bold;
  max-width: 600px;
  color: black;
  cursor: pointer;
}

.todo-content {
  display: flex;
  flex-direction: row;
  gap: 60px;
  padding: 10px;
}


.section-inbut {
  z-index: 1;
  background-color: white;
  opacity: 0.99;
  padding: 20px 5px;
  
}

.avaliection {
   font-size: 20px;
   font-weight: bold;
}

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

  .container-flex {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap: 50px;
    justify-content: center;
    align-items: center;
    justify-items: center;
    
  }

  .tect {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .tect h5 {
    font-size: 18px;
    text-align: center;
    margin-left: 10px;
  }

  .btnnnn {
    margin-top: 5px;
    margin-left: 20%;
  }

  .tect1 {
margin-top: 90px;
  
  }
  .mouve{
    display: none;
    margin-left: 30px;
  }

  .hero {width: 100%; margin-right: 30px;}

  .hero .overlay {
    display: flex;
    flex-direction: column;
    justify-items: center;
  }

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

  

  .section-inbut {
   display: flex;
   flex-direction: column;
   gap: 15px;
  }

  .todo-content {
    flex-direction: column;
    gap: 20px;
  }

  .navbar { width: 100%; position:  fixed; display:flex; flex-direction: column; justify-content: center; align-items: center;  height: 40px;   gap: 75px; margin: auto; background-color: rgb(238, 69, 224);}
  .navlek {
    height: 100vh;
    position: fixed;
  }

   .logo p {
      width: 70vw;
   }

  .logo {    
    width: 100vw;
    position: sticky;
    top: 30px;
    background-color: rgb(238, 69, 224);
  }

 .subsub{margin: 0 auto; max-width: 80vw;}

 .nav-menu {width: 100vw; margin-right: 50px; margin-top: 5px;}



 .nav-links a {border: 1.5px solid rgb(8, 10, 10); width: 100%; background-color: rgb(238, 69, 224); box-shadow: aqua 2px 2px 10px 2px; border-radius: 10px; padding: 4px; text-decoration:none; color:black; font-weight: bold; font-size: 17px; margin-top: 1px;}

 .nav-links a:hover {background-color: aqua; color: black; font-size: 20px; transition: 0.3s; transform: scale(1.5);}


.full-banner {
  width: 350px;
}

.hhh {
  width: 80vw;
  margin: 0 auto;
}


}