*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}

body{
  color:white;
  background: linear-gradient(-45deg,#0f172a,#1e3a8a,#020617,#1e293b);
  background-size:400% 400%;
  animation:bg 10s ease infinite;
}
@keyframes bg{
  0%{background-position:0%}
  50%{background-position:100%}
  100%{background-position:0%}
}

/* HEADER */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
}

nav{
  display:flex;
}

nav a{
  color:white;
  margin:10px;
  text-decoration:none;
  position:relative;
}

/* UNDERLINE */
nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:0;
  height:2px;
  background:#22c55e;
  transition:0.3s;
}
nav a:hover::after,
nav a.active::after{
  width:100%;
}

/* HAMBURGER */
.menu-toggle{
  display:none;
  font-size:28px;
  cursor:pointer;
}

/* HERO */
.hero{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.hero h1{font-size:50px}
.hero span{color:#22c55e}

.btn{
  display:inline-block;
  margin-top:20px;
  padding:12px 25px;
  background:linear-gradient(45deg,#22c55e,#16a34a);
  border-radius:10px;
  color:white;
  text-decoration:none;
}

/* SECTION */
section{padding:80px 20px;text-align:center}

/* CARDS */
.cards{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
}
.card{
  flex:1;
  min-width:250px;
  background:rgba(255,255,255,0.05);
  padding:20px;
  border-radius:15px;
  backdrop-filter:blur(10px);
  transition:0.4s;
}
.card:hover{
  transform:translateY(-10px) scale(1.05);
}
.card img{
  width:100%;
  border-radius:10px;
}

/* PRICING */
.price{
  width:250px;
  background:rgba(255,255,255,0.05);
  padding:25px;
  border-radius:15px;
  text-align:center;
  transition:0.3s;
}
.price:hover{
  transform:translateY(-10px) scale(1.05);
}
.price h3{color:#22c55e}

/* CONTACT */
input,textarea{
  width:80%;
  padding:10px;
  margin:10px;
  border:none;
  border-radius:8px;
}

/* WHATSAPP */
.whatsapp{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#22c55e;
  padding:15px;
  border-radius:50%;
  text-decoration:none;
  color:white;
}

/* MOBILE */
@media(max-width:768px){

  .menu-toggle{
    display:block;
  }

  nav{
    position:absolute;
    top:70px;
    right:0;
    background:#020617;
    flex-direction:column;
    width:200px;
    display:none;
  }

  nav a{
    display:block;
    padding:15px;
  }

  nav.active{
    display:flex;
  }

  .hero h1{
    font-size:30px;
  }

  input,textarea{
    width:95%;
  }
}