body {
      background: #f5f5f5;
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .nav1 {
      display: flex;
      justify-content: space-between;
      padding: 5px 20px;
      height: 25px;
    }
    
    .nav1 p {
      margin-left: 20px;
      margin-top: 0;
      color: #000;
      font-size: 14px;
    }
    .nav1cont {
      display: flex;
      gap: 15px; 
    }
    .main-nav {
      background: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 40px;
      height: 40px;
      position: relative;
    }

    .logo img {
      height: 60px;
      width: 60px;
    }

    .main-nav-content {
      display: flex;
      gap: 25px;
      margin-left: 188px;
    }

    .main-nav-content a {
      text-decoration: none;
      color: black;
      font-weight: 600;
      padding: 5px 0;
    }

    .main-nav-content li {
      list-style: none;
      position: relative;
    }

    .main-nav-content ul {
      display: flex;
      gap: 25px;
      margin: 0;
      padding: 0;
    }


    .dropdown {
        position: fixed;        
        top: 90px;              
        left: 0;                
        width: 100vw;           
        background: white;
        padding: 30px 50px;
        display: none;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        border-top: 1px solid #ddd;

    }

    .main-nav-content li:hover .dropdown {
        display: grid;
        animation: slideDown 0.3s ease-in-out;
    }


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

    .dropdown h4 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
    }

    .dropdown a {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: #333;
      text-decoration: none;
    }

    .dropdown a:hover {
      color: #000;
      font-weight: bold;
    }

    .right-section {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .search-btn {
      position: relative;
      display: flex;
      align-items: center;
    }

    .search-btn input {
      padding: 8px 35px;
      border-radius: 20px;
      border: 1px solid #ccc;
      outline: none;
      width: 100px;
      font-size: 14px;
      background: #f5f5f5;
    }

    .search-btn img {
      position: absolute;
      left: 10px;
      width: 16px;
      height: 16px;
      pointer-events: none;
      cursor: pointer;
    }

    .icons {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .icons img {
      width: 22px;
      height: 22px;
      cursor: pointer;
    }
    .img{
        display: flex;
        gap: 10px;
    }
    .nike-heading {
        font-family: 'Anton','Impact', sans-serif;
        letter-spacing: 1px;
        line-height: 0.9;
        font-size: 70px; 
        font-weight: 900;
        line-height: 1;
        text-align: center; 
    }

.featured {
  padding: 60px 40px;
  background: #fff;
}
.featured h2 {
  font-size: 28px;
  margin-bottom: 30px;
  font-weight: 700;
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.card {
  background: #f5f5f5;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s;
}
.card img {
  width: 100%;
  display: block;
}
.card h3 {
  margin: 15px 0 5px;
}
.card a {
  display: inline-block;
  margin-bottom: 15px;
  text-decoration: none;
  font-weight: bold;
  color: black;
}
.card:hover {
  transform: translateY(-5px);
}


.trending {
  padding: 60px 40px;
}
.trending h2 {
  font-size: 28px;
  margin-bottom: 25px;
}
.trending-grid {
  display: flex;
  gap: 20px;
}
.trend {
  flex: 1;
  text-align: center;
  transition: transform 0.3s;
}
.trend img {
  width: 100%;
  border-radius: 12px;
}
.trend p {
  margin-top: 10px;
  font-weight: bold;
}
.trend:hover {
  transform: scale(1.05);
}


footer {
  background: #111;
  color: #bbb;
  padding: 40px;
}
.footer-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 30px;
}
.footer-top h4 {
  color: #fff;
  margin-bottom: 10px;
}
.footer-top a {
  display: block;
  color: #bbb;
  text-decoration: none;
  margin-bottom: 6px;
  font-size: 14px;
}
.footer-top a:hover {
  color: #fff;
}
.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 15px;
  text-align: center;
  font-size: 13px;
}


@media (max-width: 1024px) {
  .main-nav-content {
    gap: 15px;
    margin-left: 50px;
  }
  .search-btn input {
    width: 80px;
  }
  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trending-grid {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .nav1 {
    flex-direction: column;
    align-items: center;
    height: auto;
    gap: 5px;
  }
  .main-nav {
    flex-direction: column;
    height: auto;
    padding: 15px;
  }
  .main-nav-content ul {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  .right-section {
    margin-top: 10px;
    flex-direction: column;
    gap: 10px;
  }
  .img {
    flex-direction: column;
    align-items: center;
  }
  .featured-grid {
    grid-template-columns: 1fr;
  }
  .trending-grid {
    flex-direction: column;
  }
  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .logo img {
    height: 45px;
    width: 45px;
  }
  .search-btn input {
    width: 100%;
    max-width: 200px;
  }
  .nike-heading {
    font-size: 40px;
  }
  .card img, .trend img {
    height: auto;
  }
}