*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    
}
html,body{
    height: auto;
    width: 100%;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid rgba(255,255,255,0.75);
  animation: typing 3s steps(30, end) infinite alternate;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

.bubble {
  position: absolute;
  bottom: -10%;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  animation: rise 12s infinite ease-in;
}

@keyframes rise {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-800px) scale(1.3); opacity: 0; }
}

/* Create multiple random bubbles */
.bubble:nth-child(1) { width: 25px; height: 25px; left: 10%; animation-delay: 0s; }
.bubble:nth-child(2) { width: 40px; height: 40px; left: 30%; animation-delay: 2s; }
.bubble:nth-child(3) { width: 15px; height: 15px; left: 50%; animation-delay: 4s; }
.bubble:nth-child(4) { width: 50px; height: 50px; left: 70%; animation-delay: 6s; }
.bubble:nth-child(5) { width: 30px; height: 30px; left: 85%; animation-delay: 1s; }
.bubble:nth-child(6) { width: 20px; height: 20px; left: 95%; animation-delay: 3s; }

/* Responsive Adjustments */
@media (max-width: 768px) {
  section { height: auto; padding: 1rem 0; text-align: center; }
  .typewriter { font-size: 1rem; }
  .bubble { display: none; } /* reduce load on mobile */
}
 /* part-2 */
  
      /* Bubble Animation */
      @keyframes bubble {
        0% {
          transform: translateY(0) scale(1);
          opacity: 1;
        }
        100% {
          transform: translateY(-120px) scale(1.2);
          opacity: 0;
        }
      }
      .animate-bubble {
        animation: bubble 6s ease-in-out infinite;
      }
      .animate-bubble.delay-200 {
        animation-delay: 2s;
      }
      .animate-bubble.delay-400 {
        animation-delay: 4s;
      }

      /* Responsive adjustments */
      @media (max-width: 1024px) {
        #header {
          height: auto;
          flex-direction: row;
          padding: 1rem 2rem;
        }
        .logo-container {
          width: 100px;
          height: 55px;
        }
        .text-content h1 {
          font-size: 1.5rem;
        }
        .text-content p {
          font-size: 0.9rem;
        }
      }

      @media (max-width: 768px) {
        #header {
          flex-direction: column;
          height: auto;
          gap: 0.5rem;
          padding: 1rem;
          text-align: center;
        }
        .logo-container {
          width: 90px;
          height: 50px;
          margin: 0 auto;
        }
        .text-content h1 {
          font-size: 1.4rem;
          line-height: 1.3;
        }
        .social-icons {
          margin-top: 0.5rem;
        }
      }

      @media (max-width: 480px) {
        #header {
          padding: 0.75rem;
          gap: 0.5rem;
        }
        .logo-container {
          width: 80px;
          height: 45px;
        }
        .text-content h1 {
          font-size: 1.2rem;
        }
        .text-content p {
          font-size: 0.8rem;
        }
        .social-icons a {
          font-size: 1.5rem;
        }
      }

 
    /* part-3 + Including the media querries */
    .part-3 {
      height: auto;
      width: 100%;
    }
    .eco-navbar {
      position: sticky;
      top: 0;
      z-index: 999;
      background-color: #312885;
      color: white;
      width: 100%;
      position: relative;
      z-index: 1000;
    }
    .eco-container {
      max-width: 1200px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 20px;
      position: relative;
    }
    .eco-logo {
      color: white;
      font-size: 14px;
      margin-left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
    .eco-nav-links {
      margin-left: 10px;
      flex-wrap: wrap;
      width: 100%;
      flex-wrap: wrap;
      display: flex;
      list-style: none;
      gap: 20px;
    }
    .eco-nav-links li {
      position: relative;
    }
    .eco-nav-links > li > a {
      color: white;
      font-size: 14px;
      white-space: nowrap;
      color: white;
      text-decoration: none;
      padding: 10px;
      display: block;
      cursor: pointer;
      transition: background 0.3s;
    }
    .eco-nav-links li:hover > a {
      background: #333;
      border-radius: 4px;
    }

    .eco-login-btn {
      padding: 6px 12px;
      background: yellow;
      color: black;
      font-weight: bold;
      border-radius: 4px;
      text-decoration: none;
    }
    .eco-cart-btn {
      margin-left: 10px;
      color: white;
      font-size: 18px;
      text-decoration: none;
    }

    .eco-hamburger {
      display: none;
      font-size: 24px;
      cursor: pointer;
    }

    .eco-mega-wrapper {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100vw;
      background: white;
      color: black;
      display: none;
      padding: 30px 40px;
      z-index: 999;
      animation: fadeSlide 0.3s ease forwards;
    }
    .eco-mega-wrapper.active {
      display: block;
    }
    .eco-mega-content {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      max-width: 1200px;
      margin: auto;
    }
    .eco-mega-content ul {
      list-style: none;
      width: 200px;
    }
    .eco-mega-content h3 {
      font-size: 14px;
      margin-bottom: 8px;
    }
    .eco-mega-content li a {
      color: black;
      text-decoration: none;
      padding: 4px 0;
      font-size: 14px;
      display: block;
      transition: color 0.3s;
    }
    .eco-mega-content li a:hover {
      color: #007bff;
    }

    @keyframes fadeSlide {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .eco-submenu-toggle {
      display: none;
      font-size: 18px;
      padding-left: 6px;
      color: yellow;
      cursor: pointer;
    }
    .eco-mobile-submenu {
      display: none;
      background: #222;
      padding: 10px 20px;
    }
    .eco-mobile-submenu.active {
      display: block;
    }
    .eco-mobile-submenu li {
      color: #bbb;
      font-size: 14px;
      padding: 4px 0;
    }
    .eco-mobile-submenu li strong {
      display: block;
      color: #fff;
      margin-top: 10px;
      font-weight: bold;
    }
    .eco-mobile-submenu li a {
      color: #ddd;
      padding: 4px 0;
      display: block;
      text-decoration: none;
    }
    .eco-mobile-submenu li a:hover {
      color: #fff;
    }

    @media (max-width: 768px) {
      .eco-hamburger {
        display: block;
      }
      .eco-nav-links {
        display: none;
        flex-direction: column;
        background: #111;
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
      }
      .eco-nav-links.show {
        display: flex;
      }
      .eco-submenu-toggle {
        display: inline;
      }
      .eco-mega-wrapper {
        display: none !important;
      }
    }
    @media (max-width: 768px) {
      .eco-container.eco-flex-wrap {
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .eco-logo {
        order: -1;
        margin-right: auto;
      }
    }