*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
  scroll-behavior:smooth;
}

body{
  background:#faf7f0;
  color:#333;
}


/* ===== PREMIUM NAVBAR ===== */

.navbar{
  position:fixed;
  top:0;
  width:100%;
  padding:15px 50px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(15px);

  box-shadow:0 8px 30px rgba(0,0,0,.15);
  z-index:1000;
}

.brand{
  display:flex;
  align-items:center;

}

.brand img{
  height:55px;
}

.navbar nav a{
  color:#fff;
  text-decoration:none;
  margin-left:25px;
  position:relative;
  font-weight:500;
}


/* underline animation */
.navbar nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-5px;
  width:0;
  height:2px;
  background:#f5c542;
  transition:.3s;
}

.navbar nav a:hover::after{
  width:100%;
}


/* ===== WOW HERO ===== */

.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}

.hero{
  position:relative;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;

  background:
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url("hero.jpg");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}


.hero-content{
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(15px);
  padding:50px 40px;
  border-radius:25px;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
  max-width:520px;
}

.hero-logo{
  width:110px;
  margin-bottom:20px;
}

.floating{
  animation:float 4s ease-in-out infinite;
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-15px)}
}

.gradient-text{
  font-size:42px;
  line-height:1.2;
  background:linear-gradient(90deg,#fff,#f5c542);
  -webkit-background-clip:text;
  color:transparent;
}

.hero p{
  margin:20px 0;
  font-size:16px;
  opacity:.9;
}

.hero-actions{
  display:flex;
  gap:15px;
  justify-content:center;
  margin-top:25px;
}
.hero{
  animation:zoomHero 20s ease-in-out infinite alternate;
}

@keyframes zoomHero{
  0%{background-size:100%}
  100%{background-size:110%}
}


/* Buttons */
.btn{
  padding:14px 28px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:.4s;
}

.btn.glow{
  background:#f5c542;
  color:#000;
  box-shadow:0 0 30px rgba(245,197,66,.6);
}

.btn.glow:hover{
  box-shadow:0 0 60px rgba(245,197,66,1);
  transform:scale(1.05);
}

.btn.outline{
  border:2px solid #fff;
  color:#fff;
}

.section{
  padding:80px 20px;
  text-align:center;
}

.products .product-grid{
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
}

.card{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(10px);
  border-radius:20px;
  padding:30px;
  width:260px;
  transition:.4s;
  position:relative;
}

.card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(120deg,#f5c542,#b5c35f);
  opacity:0;
  z-index:-1;
  transition:.4s;
}

.card:hover{
  transform:translateY(-15px) scale(1.03);
}

.card:hover::before{
  opacity:1;
}

/* ===== PREMIUM ABOUT ===== */

.about-premium{
  padding:120px 20px;
  background:linear-gradient(135deg,#f6f9f8,#e1efed);
  text-align:center;
}

.about-premium h2{
  font-size:40px;
  margin-bottom:25px;
  font-weight:700;
}

.about-premium p{
  max-width:750px;
  margin:auto;
  font-size:18px;
  line-height:1.8;
  opacity:.8;
}

/* ===== PREMIUM PRODUCTS ===== */

.products{
  padding:120px 20px;
  background:linear-gradient(120deg,#1f4037,#99f2c8);
  color:white;
}

.products h2{
  font-size:38px;
  margin-bottom:60px;
}

/* grid */
.products .product-grid{
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}

/* premium card */
.card{
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(15px);

  padding:40px 30px;
  width:280px;
  border-radius:25px;

  box-shadow:0 25px 60px rgba(0,0,0,.3);

  transition:.4s;
}

/* hover magic */
.card:hover{
  transform:translateY(-18px) scale(1.05);
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}

.card h3{
  font-size:22px;
  margin-bottom:10px;
}

.card p{
  opacity:.85;
  margin-bottom:20px;
}

/* button */
.card button{
  background:#f5c542;
  color:#000;
  border:none;
  padding:12px 24px;
  border-radius:25px;
  font-weight:600;
  cursor:pointer;
}
.btn{
  background:#f5c542;
  box-shadow:0 10px 25px rgba(245,197,66,.5);
  transition:.3s;
}

.btn:hover{
  transform:scale(1.08);
}

/* ===== WHY PREMIUM ===== */

.why-premium{
  padding:120px 20px;
  background:linear-gradient(120deg,#f6f9f8,#e1efed);
  text-align:center;
}

.why-title{
  font-size:38px;
  margin-bottom:70px;
  font-weight:700;
}

/* grid */
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  max-width:1100px;
  margin:auto;
}

/* cards */
.why-card{
  background:#fff;
  padding:40px 25px;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.1);
  transition:.4s;
}

.why-card:hover{
  transform:translateY(-12px);
  box-shadow:0 35px 80px rgba(0,0,0,.2);
}

.icon{
  font-size:40px;
  margin-bottom:15px;
}

.why-card h3{
  margin-bottom:10px;
}

.why-card p{
  opacity:.7;
  font-size:14px;
}

/* mobile */
@media(max-width:768px){
  .why-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* ===== PREMIUM CONTACT SECTION ===== */

.contact-section{
  padding:120px 20px;
  background:linear-gradient(135deg,#1f4037,#99f2c8);
  color:#fff;
  text-align:center;
}

.contact-title{
  font-size:42px;
  margin-bottom:60px;
  font-weight:700;
}

.contact-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  max-width:1100px;
  margin:auto;
  align-items:center;
}

/* LEFT SIDE */
.contact-info{
  text-align:left;
}

.contact-info h3{
  font-size:28px;
  margin-bottom:30px;
}

.info-item{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:20px;
  font-size:18px;
}

/* RIGHT FORM */
.contact-form{
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(15px);
  padding:40px;
  border-radius:25px;
  box-shadow:0 30px 70px rgba(0,0,0,.3);
  display:flex;
  flex-direction:column;
  gap:15px;
}

.contact-form input,
.contact-form textarea{
  padding:12px;
  border:none;
  border-radius:12px;
  font-size:16px;
}

.contact-form button{
  background:#f5c542;
  color:#000;
  padding:14px;
  border:none;
  border-radius:30px;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}

.contact-form button:hover{
  transform:scale(1.05);
}

/* MOBILE */
@media(max-width:768px){
  .contact-container{
    grid-template-columns:1fr;
    text-align:center;
  }

  .contact-info{
    text-align:center;
  }
}



/* ===== FOOTER PREMIUM ===== */

.footer{
  background:linear-gradient(120deg,#111,#222);
  color:#fff;
  padding:70px 30px 20px;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  max-width:1100px;
  margin:auto;
}

.footer-logo{
  height:55px;
  margin-bottom:10px;
}

.footer h4{
  margin-bottom:10px;
  color:#f5c542;
}

.copyright{
  margin-top:40px;
  text-align:center;
  font-size:14px;
  opacity:.7;
}

/* ================================= */
/* 📱 MOBILE RESPONSIVE (ADD LAST) */
/* ================================= */

@media (max-width: 768px){

  /* Navbar */
  .navbar{
    padding:12px 18px;
  }

  .navbar nav{
    display:none; /* mobile pe links hide (simple look) */
  }

  .logo{
    font-size:18px;
  }

  .logo img{
    height:38px;
  }



  .hero{
    height:80vh;

    background-size:contain;   /* image full show hogi */
    background-position:center;

    padding:20px;
  }

  .hero-content{
    padding:25px;
  }

  .gradient-text{
    font-size:26px;
  }



  .btn{
    padding:10px 18px;
    font-size:14px;
  }

  /* Sections spacing */
  .section{
    padding:60px 15px;
  }

  /* Product cards */
  .products .product-grid{
    flex-direction:column;
    align-items:center;
  }

  .card{
    width:90%;
  }

  /* Why grid */
  .why-grid{
    grid-template-columns:1fr 1fr;
  }

  /* Form */
  form{
    width:100%;
    padding:0 10px;
  }

  input, textarea{
    font-size:16px; /* zoom fix */
  }

  /* WhatsApp button bigger */
  .whatsapp{
    padding:18px;
    font-size:22px;
  }

}