body {
      margin: 0;
      padding: 0;
      font-family: "Poppins", sans-serif;
      background: linear-gradient(#d5f2ee, #d7edea, #dfeae9);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
      
    }






/* Premium Navbar */
.navbar-wrapper {
  height: 80px;
  width: 100%;
}

.navbar {
  position: fixed;
  top: 5px;

  max-width: 1200px;    /* ← main fix */
  margin: 0 auto;       /* ← center with gap */
  left: 0; right: 0;     /* ← equal space left-right */

  height: 70px;

  background: linear-gradient(
      to right,
      rgba(198, 241, 231, 0.9),
      rgba(193, 224, 249, 0.9)
  );
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.4);

  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);

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

  padding: 0 30px;
  z-index: 999;
  
}

.logo {
  font-size: 24px;
  font-weight: 800;
  color: #0b8d5c;
}

.navbar ul {
  display: flex;
  gap: 28px;
}

.navbar ul li {
  list-style: none;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.navbar ul li:hover {
  color: #0b8d5c;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.navbar a {
  text-decoration: none;
  color: inherit;
}
.navbar a:hover {
  text-decoration: none;
  color: inherit;
}







    .circle {
      position: absolute;
      width: 80vw;
      /* ✅ screen width ke hisaab se */
      height: 80vw;
      /* ✅ height bhi responsive */
      max-width: 700px;
      max-height: 700px;
      border-radius: 50%;
      z-index: -1;
      /* overflow-x: hidden; */
    }

    /* Left */
    .circle-left {
      top: -15vh;
      left: -25vw;
      background: linear-gradient(to right, #D4F1ED, #B2EFE7, #67CEC0);
      overflow-x: hidden;
    }

    /* Right */
    .circle-right {
      top: -15vh;
      right: -25vw;
      background: linear-gradient(to left, #D4F1ED, #B2EFE7, #67CEC0);
      overflow-x: hidden;
    }

.navbar{
  display: flex;
}




    /* Container */
    .container {
      flex: 1;
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 900px;
      padding: 0 20px;
    
    }

    /* Logo */
    .logo img {
      margin-top: 20px;
      width: 110px;
      border: 2px solid rgb(83, 213, 206);
      border-radius: 20px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
         filter: drop-shadow(0 0 12px rgba(0, 255, 170, 0.5));
   transition: transform 1.5s ease;
    }

   .logo-rotate {
  display: inline-block;
  transition: transform 1.5s ease-in-out;
}

.logo-rotate:hover {
  animation: spin 2s linear infinite;   /* continuous rotation */
  transform: scale(1.05);   
}

/* Keyframes for rotation */
@keyframes spin {
  from { transform: rotate(0deg) scale(1.05); }
  to   { transform: rotate(360deg) scale(1.05); }
}


    /* name */
    .name {
      color: rgb(8, 108, 60);
      font-weight: 1000;
      font-size: 1.5rem;
    }

    /* heading */
    h1 {
      margin: 5px 0;
      font-size: 2.1rem;
      font-weight: 700;
      color: black;

    }

    h1 span {
      color: rgb(8, 108, 60);
    }



    p.sub {
      font-size: 0.8rem;
      margin-bottom: 20px;
      margin-top: auto;
      color: #141212;
      font-weight: 700;
    }

    /* Countdown */
    /* Countdown */
    .countdown {
      display: flex;
      gap: 20px;
      margin: 25px 0 40px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .time-box {
      background: #ffffff;
      border-radius: 10px;
      padding: 10px 18px;
      min-width: 50px;
      box-shadow: 4px 4px 8px rgba(134, 228, 182, 0.844);
      /* -8px -8px 12px rgba(134, 228, 182, 0.844); */
     
      cursor: pointer;
       display: inline-block;
   display: inline-block;
  animation: scalePulse 2.0s ease-in-out infinite;
    }

    @keyframes scalePulse {
   0%   { transform: scale(1); }
  50%  { transform: scale(1.15); } /* zoom */
  100% { transform: scale(1); }
}

    .time-box h2 {
      margin: 0;
      font-size: 1.9rem;
      font-weight: bold;
      color: #2a7ae4;
    }

    .time-box span {
      font-size: 0.8rem;
      color: #555;
    }


    /* Features */
    .features {
      margin-top: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 33px;
      margin-bottom: 25px;
    }

    .card {

      background-color: #FFFFFF66;
      border-radius: 0px 0px 10px 10px;
      /* bottom corners rounded */
      padding: 25px;
      text-align: left;
      box-shadow: 4px 4px 8px rgba(169, 239, 205, 0.844);
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid rgb(106, 198, 223);

    }

    .card h3 {
      margin: -25px -25px -6px -25px;
      /* card padding remove effect */
      padding: 18px;
      font-size: 1rem;
      font-weight: 600;
      background: #98BBEF;
      /* heading background color */
      color: black;
      border-radius: 0px 0px 10px 10px;
      /* bottom corners rounded */
      box-shadow: 4px 4px 8px rgba(16, 174, 205, 0.312);
      border: 2px solid rgba(30, 144, 255, 1) ;    /* Dodger Blue */



    }


    .card p {
      font-size: 14px;
      color: #292525;
      font-weight: 700;
      margin-left: -18px;
      text-align: left;
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: 12px 12px 16px rgba(134, 228, 182, 0.844);
    }

    .card button {
      position: absolute;
      margin-top: 97px;
      
      border: none;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 0.82rem;
      cursor: pointer;
      margin-left: 48px;
        color: #0b8d5c;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 255, 170, 0.3);
overflow: hidden;
  transition: 0.3s ease;

 }

 /* Button hover movement */
.card button:hover {
  transform: scale(1.06);
  border-color: #00ff9d;
}

/* ✨ Animated Shine Effect */
.card button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;

  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );

  transform: skewX(-20deg);
  transition: 0.5s;
}

/* Move shine across */
.card button:hover::before {
  left: 100%;
}

/* ✨ Morphing Border Animation */
.card button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid transparent;

  animation: borderMorph 3s ease-in-out infinite;
}

@keyframes borderMorph {
  0%   { border-color: #e386dd; }
  50%  { border-color: #3fccdc; }
  100% { border-color: #3bc549; }
}
    

    /* Modal background */
.modal {
  display: none; /* hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* transparent black overlay */

  align-items: center;
  justify-content: center;
}

/* Modal box */
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  text-align: left;
}

/* Close button */
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  /* background-color: #d6dfec; */
  /* padding: 5px;
  border-radius: 5px; */
  
}


    /* Subscription */
    .subscribe {
      margin: 20px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      /* ✅ vertical alignment fix */
      gap: 15px;
      /* no gap between input & button */
    }

    .subscribe input {
      padding: 12px 15px;
      /* ✅ same padding as button */
      border: none;
      outline: none;
      border-radius: 25px;
      /* ✅ left side rounded */
      width: 300px;
      transition: width 0.3s;
      font-size: 1rem;
      margin-top: 2vw;
    }

    .subscribe input:focus {
      width: 350px;
      border: 2px solid #2b6cb0;
    }

    .subscribe button {
      padding: 12px 20px;
      /* ✅ same vertical size */
      border: none;
      border-radius: 25px;
      /* ✅ right side rounded */
      background: linear-gradient(to right, #667eea, #764ba2);
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 1rem;
      margin-top: 2vw;
    }

    .subscribe button:hover {
      transform: scale(1.05);
    }


    /* Social Buttons */
    .social {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      margin-top: 20px;
    }

    .social a {
      display: inline-flex;
      align-items: center;
      padding: 10px 15px;
      border-radius: 25px;
      width: auto;
      color: #fff;
      font-size: 1.2rem;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .social a img {
      width: 20px;
      /* icon size */
      height: 20px;
      object-fit: contain;
      margin-left: 5px;
      /* thoda sa gap, agar bilkul chipka chahiye to 0px karo */
    }

    .social a:hover {
      transform: scale(1.05);
    }

   
    

    /* Footer */
    footer {
      margin-top: auto;
      padding: 15px;
      font-size: 0.8rem;
      color: #140f0f;
       
     
    
    }

    /* Responsive Fix for Countdown */
    @media (max-width: 600px) {
      .countdown {
        flex-wrap: wrap;
        /* ✅ ab wrap hoga, scroll nahi */
        justify-content: center;
        gap: 8px;
        /* ✅ chhoti gap */
        padding: 0 5px;
        /* ✅ left/right padding kam */
      }

      .container {

        padding: 0 0px;
        overflow-x: hidden;
      }


      .time-box {
        padding: 6px 8px;
        /* ✅ chhoti padding */
        min-width: 60px;
        /* ✅ chhoti width */
      }

      .time-box h2 {
        font-size: 1.1rem;
        /* ✅ number chhota */
      }

      .time-box span {
        font-size: 0.65rem;
        /* ✅ text chhota */
      }

      .features {
        margin: 25px;
        margin-top: -10px;
        margin-bottom: 40px;
      }

      .card button {
        margin-top: 10px;
        position: static;
        /* ✅ normal flow */
        align-self: flex-start;
        margin-left: -10px;
      }

      .last{
        padding-top: 15px;
      }

      .logo img {
        width: 70px;
      }

      .name {
        font-size: 1rem;
      }

      h1 {
        font-size: 1.3rem;
        font-weight: 800;
      }

      p.sub {
        font-size: 0.6rem;
        margin-top: 2px;
        font-weight: 800;
      }

      .circle-left {
        top: -1vh;
        left: -50vw;
      }

      .circle-right {
        top: -1vh;
        right: -50vw;
      }

      .subscribe input:focus {
        width: 280px;
      }
      
    .subscribe input {
   
      width: 260px;
     
    }

    }


    /* Extra Small Devices Fix (320px - 350px) */
    @media (max-width: 450px) {
     
    

      .navbar ul li {
  
  font-size: 15px;
  font-weight: 400;
 

}


.navbar ul {

  gap: 10px;
}
     
      .countdown {
        flex-wrap: nowrap;
        /* ✅ ek hi line */
        gap: 6px;
        /* ✅ chhoti gap */
        padding: 0 2px;
      }

      .container {

        padding: 0 0px;
        overflow-x: hidden;
      }


      .time-box {
        padding: 5px 6px;
        min-width: 55px;
      }

      .time-box h2 {
        font-size: 1rem;
      }

      .time-box span {
        font-size: 0.6rem;
      }

      /* ✅ Cards ko 2x2 grid me rakhne ke liye */
      .features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* ✅ do-do column */
        gap: 15px;
        margin: 10px;
      }

      .card h3 {
        font-size: 0.9rem;
        padding: 10px;
      }

      .card p {
        font-size: 12px;
      }

      .card button {
        margin-top: 8px;
        font-size: 0.7rem;
        padding: 4px 8px;
      }
      

      .logo img {
        width: 65px;
      }

      h1 {
        font-size: 1.1rem;
      }

      p.sub {
        font-size: 0.55rem;
      }

      .social a {

        padding: 8px 12px;

      }

      .subscribe {
        margin-top: 35px;
        gap: 8px;
        max-width: 95%;

      }

      .subscribe input {

        width: 170px;

      }

      .subscribe input:focus {
        width: 180px;

      }

      .subscribe button {
        padding: 10px 18px;
        max-width: 95%;

      }

      .social a {

        width: auto;
        margin-left: 1px;
        margin-right: 1px;
        font-size: 1.0rem;

      }

      .features {
        margin: 25px;
        margin-top: -10px;
        margin-bottom: 40px;
      }

      .card button {
        font-size: 0.7rem;
        /* ✅ chhota text */
        padding: 4px 8px;
        /* ✅ compact button */
      
       margin-left: -10px;
      }

       .social a {
    font-size: 0.9rem;
    padding: 8px 12px;
    max-width: 95%;   /* ✅ thoda aur screen cover kar le but edge se chipke nahi */
  }
}