*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body{color:#fff;overflow-x:hidden;}
.bg{
position:fixed;
top:0;left:0;
width:100%;height:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
z-index:-1;
transition:0.6s ease;
}
.blue-theme{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('https://images.unsplash.com/photo-1502741338009-cac2772e18bc');
}
.orange-theme{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('https://images.unsplash.com/photo-1497534446932-c925b458314e');
}
.mint-theme{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('https://images.unsplash.com/photo-1528825871115-3581a5387919');
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
}
.logo{font-size:28px;font-weight:800;}
nav a{
margin:0 15px;
text-decoration:none;
color:#fff;
font-weight:500;
position:relative;
padding:5px 0;
}
nav a::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:0%;
height:3px;
background:#fff;
transition:0.4s ease;
border-radius:2px;
}
nav a:hover::after{width:100%;}
.hero{
height:90vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
}
.hero h1{
font-size:52px;
font-weight:800;
animation:fadeDown 1s ease;
}
.hero p{
margin-top:15px;
font-size:18px;
opacity:0.9;
animation:fadeUp 1.2s ease;
}
.btn{
margin-top:25px;
padding:12px 30px;
border:none;
border-radius:30px;
background:#fff;
color:#333;
font-weight:600;
cursor:pointer;
transition:0.3s;
}
.btn:hover{transform:scale(1.1);}
.flavors{
margin-top:40px;
display:flex;
gap:20px;
}
.flavor-btn{
padding:10px 20px;
border-radius:25px;
border:2px solid #fff;
background:transparent;
color:#fff;
cursor:pointer;
transition:0.3s;
}
.flavor-btn:hover{
background:#fff;
color:#333;
}
.cards{
display:flex;
justify-content:center;
gap:30px;
padding:60px 40px;
}
.card{
background:rgba(255,255,255,0.15);
backdrop-filter:blur(12px);
padding:30px;
border-radius:20px;
width:250px;
text-align:center;
transition:0.4s;
}
.card:hover{
transform:translateY(-12px);
background:rgba(255,255,255,0.25);
}
footer{
text-align:center;
padding:20px;
background:rgba(0,0,0,0.3);
}
@keyframes fadeDown{
from{opacity:0;transform:translateY(-40px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(40px);}
to{opacity:1;transform:translateY(0);}
}
/* Large Screens */
@media (min-width: 1200px) {

  .cards {
    gap: 50px;
    padding: 80px 100px;
  }

  .card {
    width: 320px;
    padding: 50px;
    border-radius: 25px;
  }

  .card h3 {
    font-size: 26px;
  }

  .card p {
    font-size: 18px;
    line-height: 1.6;
  }

}