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

  body {
      background: #f1f3f6;
  }

  
  /* ================= TOP NAVBAR ================= */

  .navbar {
      width: 100%;
      background: #ffffff;

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

      padding: 12px 40px;

      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

      position: sticky;
      top: 0;
      z-index: 1000;
  }


  /* ================= LOGO ================= */

  .logo {
      display: flex;
      flex-direction: column;
      cursor: pointer;
  }

  .logo h1 {
      color: #2874f0;
      font-size: 30px;
      font-weight: 700;
      line-height: 1;
  }

  .logo p {
      font-size: 12px;
      color: #666;
      margin-top: 3px;
  }

  .logo span {
      color: #f9b000;
      font-weight: 600;
  }

  /* ================= SEARCH ================= */

  .search-box {
      width: 45%;
      height: 50px;

      background: #f0f5ff;

      border-radius: 10px;

      display: flex;
      align-items: center;

      padding: 0 18px;

      transition: 0.3s;
  }

  .search-box:hover {
      box-shadow: 0 4px 15px rgba(40, 116, 240, 0.15);
  }

  .search-box i {
      color: #2874f0;
      font-size: 18px;
  }

  .search-box input {
      width: 100%;
      height: 100%;

      border: none;
      outline: none;

      background: transparent;

      padding-left: 15px;

      font-size: 15px;
  }






/* ================= SECOND NAV ================= */

        .second-nav{
            width:100%;
            height:50px;

            background:#232f3e;

            display:flex;
            align-items:center;

            padding:0 25px;

            gap:25px;

            color:white;
        }

        .second-nav a{
            text-decoration:none;
            color:white;

            font-size:14px;
            font-weight:500;

            transition:0.3s;
        }

        .second-nav a:hover{
            color:#febd69;
        }



  @media(max-width:768px) {
      .hero-slider {
          height: 450px;
      }
   .second-nav{
                overflow-x:auto;
                white-space:nowrap;
            }
      .content {
          left: 5%;
          right: 5%;
      }

      .content h1 {
          font-size: 42px;
      }

      .content p {
          font-size: 16px;
      }
  }














  /* ================= MENU ================= */

  .menu {
      display: flex;
      align-items: center;
      gap: 25px;
  }

  .menu-item {
      position: relative;
  }

  .menu-item a {
      text-decoration: none;
      color: #222;

      font-size: 15px;
      font-weight: 500;

      display: flex;
      align-items: center;
      gap: 8px;

      transition: 0.3s;
  }

  .menu-item a:hover {
      color: #2874f0;
  }

  /* Cart Badge */

  .badge {
      position: absolute;
      top: -8px;
      right: -10px;

      background: red;
      color: white;

      width: 18px;
      height: 18px;

      border-radius: 50%;

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

      font-size: 11px;
      font-weight: 600;
  }

  /* Login Button */

  .login-btn {
      background: #2874f0;
      color: white !important;

      padding: 10px 22px;

      border-radius: 8px;

      transition: 0.3s;
  }

  .login-btn:hover {
      background: #0f5de2;
      transform: translateY(-2px);
  }


    /* ================= MOBILE ================= */

  .mobile-bottom {
      display: none;
  }

  .menu-btn {
      display: none;
  }

  @media(max-width:900px) {

      .search-box {
          width: 35%;
      }

      .category-bar {
          overflow-x: auto;
          justify-content: flex-start;
      }
  }

  /* ================= MOBILE VIEW ================= */

  @media(max-width:768px) {

      .navbar {
          padding: 12px 15px;
          gap: 15px;
          flex-wrap: wrap;
      }

      .search-box {
          width: 100%;
          order: 3;
      }

        .products{
                margin-top:180px;
            }
      /* Hide Desktop Menu */

      .menu {
          display: none;
      }

      .hero {
          height: 320px;
          padding: 30px;
      }

      .hero-content h1 {
          font-size: 38px;
      }

      .hero-content p {
          font-size: 15px;
      }

      /* Bottom Navigation */

      .mobile-bottom {
          width: 100%;
          height: 70px;

          background: white;

          position: fixed;
          bottom: 0;
          left: 0;

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

          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);

          z-index: 1000;
      }

      .mobile-bottom a {
          text-decoration: none;
          color: #555;

          display: flex;
          flex-direction: column;
          align-items: center;

          font-size: 12px;
          gap: 5px;
      }

      .mobile-bottom i {
          font-size: 22px;
      }

      .mobile-bottom a:hover {
          color: #2874f0;
      }

      body {
          padding-bottom: 80px;
      }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* ================= MOBILE ================= */

  .mobile-bottom {
      display: none;
  }

  .menu-btn {
      display: none;
  }

  @media(max-width:900px) {

      .search-box {
          width: 35%;
      }

      .category-bar {
          overflow-x: auto;
          justify-content: flex-start;
      }
  }
  
    /* ================= MOBILE VIEW ================= */

  @media(max-width:768px) {

      .navbar {
          padding: 12px 15px;
          gap: 15px;
          flex-wrap: wrap;
      }

      .search-box {
          width: 100%;
          order: 3;
      }

        .products{
                margin-top:180px;
            }
      /* Hide Desktop Menu */

      .menu {
          display: none;
      }

      .hero {
          height: 320px;
          padding: 30px;
      }

      .hero-content h1 {
          font-size: 38px;
      }

      .hero-content p {
          font-size: 15px;
      }

      /* Bottom Navigation */

      .mobile-bottom {
          width: 100%;
          height: 70px;

          background: white;

          position: fixed;
          bottom: 0;
          left: 0;

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

          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);

          z-index: 1000;
      }

      .mobile-bottom a {
          text-decoration: none;
          color: #555;

          display: flex;
          flex-direction: column;
          align-items: center;

          font-size: 12px;
          gap: 5px;
      }

      .mobile-bottom i {
          font-size: 22px;
      }

      .mobile-bottom a:hover {
          color: #2874f0;
      }

      body {
          padding-bottom: 80px;
      }
  }

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

.footer{
    background:#131921;
    color:#fff;
    margin-top:100px;
}


/* CONTAINER */

.footer-container{
    width:90%;
    margin:auto;

    padding:60px 0;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:40px;
}

/* BOX */

.footer-box h2{
    color:#2874f0;
    margin-bottom:18px;
    font-size:32px;
}

.footer-box h3{
    margin-bottom:20px;
    font-size:22px;
}

.footer-box p{
    color:#cfcfcf;
    line-height:1.8;
    font-size:14px;
    margin-bottom:10px;
}

/* LINKS */

.footer-box ul{
    list-style:none;
}

.footer-box ul li{
    margin-bottom:14px;
}

.footer-box ul li a{
    text-decoration:none;
    color:#cfcfcf;
    transition:0.3s;
    font-size:14px;
}

.footer-box ul li a:hover{
    color:#fff;
    padding-left:6px;
}

/* SOCIAL */

.social-icons{
    display:flex;
    gap:14px;
    margin-top:20px;
}

.social-icons a{
    width:42px;
    height:42px;

    background:#232f3e;

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

    border-radius:50%;

    color:#fff;
    text-decoration:none;

    transition:0.3s;
}

.social-icons a:hover{
    background:#2874f0;
    transform:translateY(-5px);
}

/* PAYMENT */

.payment-icons{
    display:flex;
    gap:14px;
    margin-top:20px;
}

.payment-icons i{
    font-size:32px;
    color:#fff;
}

/* BOTTOM */

.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.08);

    text-align:center;

    padding:20px;

    font-size:14px;

    color:#cfcfcf;
}

/* MOBILE */

@media(max-width:768px){

    .footer{
        padding-bottom:80px;
    }
    .footer-container{
        gap:35px;
    }

}