*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
}
body{
 size: 1vw;
}
.bannermedia{
  display: none;
}
#kadam{
  width: 34%;
  height: 55px;
 padding: 5px;
 padding-left: 20px;
 background-color: white;
 color: black;
 margin: 30px auto 40px 5px;
}
#topsecnd{
  display: flex;
  width: 90%;
 margin: auto;
}
.banner div h1{
  left: 30px;
  font-size: 2rem;
}

.banner{
  width: 100%;
  display: flex;
  margin-left: 5%;
}
.banner-child1{
margin-right: 10%;
width: 40%;
}

.banner div p{

  left: 30px;
  font-size: 1rem;
}
.banner div button{

  font-size: 1rem;
  width: 50%;
  height: 50px;
  color: white;
  background-color: #0e1111;
  border-radius: 4px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.bannersecound img{
  margin-top: 2%;
}
.bannersecound {
text-align: center;
}
.bannersecound p{
  font-size: 1rem;
}
.bannersecound h4{
  font-size: 1.5rem;
  margin: 1% auto;
}

#style{
  display: flex;
  justify-content: space-evenly;
  margin: auto;
 
  margin-top: 50px;
}
#style img{
  width: 100%;
  margin: 20px;
}
#style h2{
 font-size: 40px;
 display: flex;
  justify-content: center;
  margin: 10px;
}
#style div{
  width: 30%;
  
 }
 #style h3{
  margin: auto;
  width: 90%;
  font-size: 30x;
  display: flex;
   justify-content: center;
   margin: 20px;
 }
 
 .playstore{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.playstore img{
  width: 38%;
}





#footbox{
  display: flex;
  justify-content: space-evenly;
  margin-top: 30px;
  background-color: black;
  color: white;
  padding-top: 50px;
 }

#footbox button{
  width: auto;
  padding: 15px;
  color: white;
 border-color: white;
 border-width: 4px;
  background-color: black;
  font-size: 20px;
  margin: 10px auto 20px 10px;
  
}
#footbox p{
font-size: 20px;
margin: 10px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}



#topsecnd img{
  width: 100%;
  height: auto;
}
#top{
    height: 60px;
    align-items: center;
    color: white;
    background-color: #0e1111;
    margin-bottom: 0.5px;
    display: flex;
    gap: 25px;
    justify-content: flex-end;
    padding-right: 30px;
    font-size: 15px;
}
#brandlogos{
  display: flex;
  gap: 20px;
  margin-top: 40px;
  margin-left: 20px;
  margin-right: 20px;
}
#brandlogos img{
 
 width: 15%;
 height: auto;
 margin:auto;
}


  #arrow{
    height: 10px;
    width: 12px;
  }

#category{
  margin-top: 55px;
  display: flex;
  margin-bottom: 50px;

}
#category p{
   font-size: 22px;
   display: flex;
   justify-content: center;
   text-decoration: underline;

 text-decoration-style: solid;
 padding-top: 10px;
  margin-bottom: 10px;
}



#category img{
  width: 100%;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #0e1111;
    color: #fff;
  }
  #footlogo{
    border-radius: 90%;
    margin-top: 0px;
    margin-left: 25px;
  }
  .logo {
    display: flex;
    gap: 20px;
    font-size: 25px;
    margin-top: 0px;
  align-items: center;
  border: 1px white;
  margin-bottom: 0px;
  }
  .hamburger {
    display: none;
    cursor: pointer;
  }
  
  .line {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px;
  }
  
  .nav-links {
    display: flex;
    justify-content: space-around;
    width: 50%;
  }
  
  .nav-links li {
    list-style: none;
  }
  
  .nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
  }
  #shoes{
    display: flex;
    width: 98%;
    margin: auto;
  }
  #shoes img{
    width: 100%;
  }
  #shoes p{
    font-size: 20px;
    display: flex;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    justify-content: center;
    margin: 20px 0px;
  }
  #balls{
    display: flex;
   padding: 20px ;
  }
  #balls img{
    margin: 30px;
   width: 90%;
  }
  #balls h3{
    display: flex;
    justify-content: center;
    font-size: 40px;
  }
  #balls p{
    display: flex;
    justify-content: center;
    font-size: 25px;
    text-decoration: underline;
    margin: 10px;
    margin-left: 0px;
  }
  .onlinepayment{
    display: grid;
    grid-template-columns: repeat(7,1fr);
   
   }
  @media screen and (max-width: 1500px) {
    .banner{
      display: flex;
      flex-direction: column;
   
    }
    #top>h3{
      margin-left: 2%;
    }
    .hideinput{
      display: none;
    }
   
    .last{
      gap: 20px;
    }
    .banner div h1{
    margin: 1%;
      font-size:20px;
    }
    #category{
      display: grid;
      grid-template-columns: repeat(2,1fr);
    }
    #brandlogos{
      display: grid;
      grid-template-columns: repeat(2,1fr);
    }
    #brandlogos img{
     width: 100%;
    }
    #balls{
      display: grid;
      grid-template-columns: repeat(1,1fr);
    }
    #shoes{
      display: grid;
      grid-template-columns: repeat(2,1fr);
    }
    #topsecnd{
      display: grid;
      grid-template-columns: repeat(1,1fr);
    }
  
    .bannermedia {
      
      margin-top: 30px;
      display: grid;
      justify-content: center;
    }
    .bannermedia img{
      width: 90%;
      margin: auto;
    }
    .bannermedia h1{
      margin: 1%;
      font-size: 55px;
      display: flex;
      justify-content: center;
    }
    .bannermedia p{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 28px;
      margin: 10px;
    }
    .bannermedia button{
      display: flex;
      justify-content: center;
      width: 80%;
      height: 50px;
      background-color: black;
      color: white;
      align-items: center;
      margin: 20px auto 30px auto;
      font-size: 20px;
      
    }
   
    .banner div p{
     margin: 1%;
      font-size:11px;
    }
    .banner div button{
      margin: 1%;
      font-size: 11px;
      width:16%;
      height: 30px;
      color: white;
      background-color: #0e1111;
      border-radius: 4px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    #footbox{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    #footbox div{
     width: 50%;
     margin: auto;
     
    }
    #footbox button{
      width: 90%;
    
      
     }
     .onlinepayment{
      display: grid;
      grid-template-columns: repeat(5,1fr);
     
     }
   #style{
    display: grid;
      grid-template-columns: repeat(1,1fr);
   }
   #style div{
   width: 80%;
   margin: auto;
   margin-bottom: 50px;
   }
   #style h2{
    font-size: 30px;
   }
   #style p{
    font-size: 20px;
   }

    .nav-links {
      position: absolute;
      right: 0px;
      height: 92vh;
      top: 16.60vh;
      background-color: #0e1111;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 50%;
      transform: translateX(100%);
      transition: transform 0.5s ease-in;
    }
    #kadam{
      width: 50%;
    }
    .nav-links li {
      opacity: 0;
    }
    
    .hamburger {
      display: block;
     margin-left: 1%;
    }
   
  
  .nav-active {
    transform: translateX(0%);
  }
  
  .animate-in {
    animation: fadeIn 0.5s ease-in forwards;
  }
  
  .animate-out {
    animation: fadeOut 0.5s ease-out forwards;
  }
  ion-icon{
    font-size: 30px;
    margin: 0px 20px 0px 5px;
  }
  #heart_cart{
    display: flex;
    margin: 0px;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .playstore img{
    margin-top: 20px;
    width: 100%;
    margin-bottom: 10px;
        }
       
}
/* Style the search container */
.search-container {
  position: relative;
  display: inline-block;
}

/* Style the input field */
.search-container input[type="text"] {
  padding-left: 10px;
  border: none;
  border-bottom: 2px solid #aaa;
  font-size: 16px;
  width: 300px;
  height: 50px;
  margin-right: 20px;
}

/* Style the search icon */
.search-container button[type="submit"] {
  position: absolute;
  top: 50%;
  left: 270px;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* Style the Font Awesome icon */
.search-container button[type="submit"] i {
 
  color: #aaa;
}
#magnify{
    height: 22px;
    width: 22px;
   
   justify-self: end;

}
.flex{
  display: flex;
}

/* Style the Font Awesome icon */
.search-container button[type="submit"] i {
  font-size: 24px;
  color: #aaa;
 
}
.last{
  display: flex;
  justify-content: space-between;
  margin: 30px 80px 30px 80px;
}
.last img{
 width: 200px;
} 



.onlinepayment img{
width: 60px;
margin: 5px;
}

#style p{
  font-size: 40x;
  display: flex;
   justify-content: center;
   text-decoration: underline;
 }
 body {
  size: 100vw;
  overflow-x: hidden; /* Hide horizontal overflow */
}

::-webkit-scrollbar {
  width: 20px; /* Width of the scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Color of the track */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: #888; /* Color of the scroll handle */
  border-radius: 6px; /* Rounded corners */
  border: 3px solid #f1f1f1; /* Border around the handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Color of the scroll handle on hover */
}