/* Reset básico */  
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  

/* Corpo da página */  
body {  
  font-family: 'Open Sans', sans-serif;  
  background: linear-gradient(135deg, #d0e8f2, #f0f4f8); /* fundo com gradiente suave */  
  color: #222;  
  line-height: 1.6;  

  @media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }

  nav a {
    margin-left: 0;
    margin-bottom: 10px;
  }
}
}  

/* Container geral */  
.container {  
  width: 90%;  
  max-width: 1200px;  
  margin: 0 auto;  
}  

/* Cabeçalho com efeito de gradiente diferenciado */  
header {  
  background: linear-gradient(135deg, #006994, #00b3a4); /* tons azul-turquesa */  
  padding: 20px 40px;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  position: sticky;  
  top: 0;  
  z-index: 999;  
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);  
  transition: background 0.5s ease;  
}  
.logo-area {  
  display: flex;  
  align-items: center;  
}  
.logo-icon {  
  width: 50px;  
  height: 50px;  
  margin-right: 15px;  
  filter: drop-shadow(0 0 8px #00b3a4);  
}  
.logo-text {  
  font-family: 'Montserrat', sans-serif;  
  color: #fff;  
  font-size: 2rem;  
  font-weight: 700;  
}  
nav a {  
  color: #fff;  
  margin-left: 25px;  
  font-size: 1rem;  
  font-weight: 600;  
  text-decoration: none;  
  padding: 8px 15px;  
  border-radius: 25px;  
  transition: all 0.3s ease;  
}  
nav a:hover {  
  background-color: rgba(255, 255, 255, 0.2);  
  transform: scale(1.1);  
}  

/* Seção heróica com fundo com efeito de iluminação */  
.hero {  
  background-image: linear-gradient(rgba(0, 138, 153, 0.6), rgba(0, 138, 153, 0.6)),  
    url('IMG/instaaa.png');  
  background-size: cover;  
  background-position: center;  
  height: 80vh;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  text-align: center;  
  padding: 0 20px;  
  color: #fff;  
  position: relative;  
}  
.hero::after {  
  content: "";  
  position: absolute;  
  top: 0; left: 0; right: 0; bottom: 0;  
  background: rgba(0, 0, 0, 0.3);  
}  
.hero-content {  
  position: relative;  
  z-index: 1;  
  max-width: 800px;  
}  
.hero h2 {  
  font-family: 'Montserrat', sans-serif;  
  font-size: 3rem;  
  margin-bottom: 20px;  
}  
.hero p {  
  font-size: 1.3rem;  
  margin-bottom: 30px;  
}  
.btn-whatsapp {  
  background-color: #25D366; /* cor do WhatsApp */  
  color: #fff;  
  padding: 15px 30px;  
  border-radius: 50px;  
  font-weight: bold;  
  text-decoration: none;  
  display: inline-flex;  
  align-items: center;  
  font-size: 1.2rem;  
  transition: all 0.3s ease;  
}  
.btn-whatsapp:hover {  
  background-color: #1da851;  
  transform: scale(1.05);  
}  
.btn-whatsapp i {  
  margin-right: 10px;  
  font-size: 1.4rem;  
}  

/* Seções gerais */  
.section {  
  padding: 60px 20px;  
  background: linear-gradient(135deg, #f0f4f8, #d0e8f2);  
  border-radius: 10px;  
  margin: 20px 0;  
  box-shadow: 0 4


  <style>
  .grande-negrito {
    font-size: 50px; /* tamanho grande */
    font-weight: bold; /* negrito */
  }
</style>

     @media (max-width: 768px) {
         /* Estilos para telas menores ou iguais a 768px (ex: celulares) */
         body {
             font-size: 14px;
         }
         .container {
             width: 100%;
         }
     }