*{
    
    margin:0;
    padding:0;
    cursor: pointer;
   overflow-x: hidden;
    
}
.promo-message{
   
   background-color: white;
   justify-content: center;
   height: 2.75rem;
   font-family:FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif ;
   font-size: 14px;
  
   font-weight:bold;
   line-height: 1.428;
   color: black;
   padding-top: 25px;
   text-align:center;
}
.n1{
    background-color: black;
    
    background-origin:border-box;
    
    align-items: stretch;
    border: 0px solid black;
    width: 100%;
    height: 67px;
    display: flex;
    color:white;
    font-family:FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font: 14px;
    font-weight:700; 
    word-spacing: 25px;
    margin-top: 0.25rem;
    padding-bottom:30px;
    padding:10px;
    padding-inline-start: 40px;
    line-height: 2.5;
    box-sizing:border-box;
    cursor: pointer;
    white-space: nowrap;
    position: sticky;
    top:0;
    z-index:1000;
    overflow-x: hidden;
}
nav{
    position: sticky;
    top:0;
    z-index: 1000;
    height:50px;
    width:90px;
    size: 16px;
    overflow-x: hidden;
    
}
.b{
    margin-left: 155px;
    background-color: black;
    width: 150px;
    color: white;
    font-size: 15px;
    font-weight: 550;
    padding: 5px;
    word-spacing: 5px;
    font-family:Verdana, Geneva, Tahoma, sans-serif; 
    border: 1px groove;
    cursor: pointer;
    padding-bottom: 13px;
    padding-right: 5px;
    align-self: center;
  overflow-x: hidden;
    
}
.b:hover{
    
    color: white;
    opacity: 0.5;
}
.b::before{
    content:"";
    display:inline-block;
    height: 16px;
    width: 16px;
    background-image: url("/images/search.png");
    background-size: cover;
    background-position: top;
    margin-right: 15px;
    padding-right: 10px;
    size: 1px;
    margin-top: 3px;
    margin-right:8px;
    
}
.like{
    height: 25px;
    width: 28px;
    padding-left: 50px;
    margin-top: 9px;

}
.like:hover{
    opacity: 0.5;
}
.cart{
    height: 25px;
    width: 26px;
    padding-left: 35px;
    margin-top: 10px;
}
.cart:hover{
    opacity: 0.5;
}
.profile{
    height: 27px;
    width: 27px;
    padding-left: 27px;
    margin-top: 9px;
}
.profile:hover{
    opacity: 0.5;
}
.div{
    background-color:rgb(232, 222, 209) ;
    position: relative;
    width: 100%;
    height: 425px;
    background-repeat: no-repeat;
    background-clip: border-box;
    }
.back-image{
    position: absolute;
    top:0%;
    left: 5%;
}
.back-image img{
    width: 600px;
    height: 400px;
}
.offer-text{
    
    margin-left: 700px;
    line-height: 40px;
   
}
.offer-text h2{
    overflow: hidden;
    font-size: 37px;
    font-weight: bold;
    padding-top: 130px;
    font-family: FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.p1{
   
    box-sizing: border-box;
    font-family: FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.cat-buttons{
    display:flex;
    justify-content:flex-end;
    margin-right:125px;
    
    
    
 
    
}
.cat-buttons button{
    height: 40px;
    width: 110px;
    padding: 10px 20px;
    background-color: black;
    color: white;
    padding: 10px 10px;
    border: none;
    margin-right: 15px;
    margin-top:17px;
    font-weight: bold;
    font-size: 15px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    
}
/*.cat-buttons button:hover{

}*/
.united{
    height: 40px;
    text-align: center;
    font-weight: 700;
    font-size: large;
    font-family: FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 28px;
    margin-top: 50px;
    
}
.circles{
    font-size:x-small;
    font-weight: 700;
    display: flex;
    margin-left: 350px;
    margin-top: -80px;

    
}
.circle{
    background-color: rgba(128, 128, 128, 0.47);
    overflow: hidden;
    color: black;
    border-radius: 50%;
    height: 80px;
    width: 80px;
    border: 3px solid rgb(236, 155, 3);
    padding: 5px 5px;
    display: flex;
   
    justify-content: center;
    position: relative;
    align-items: center;
    margin-right:20px;
    box-sizing: content-box;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
    font-style: normal;
}

.circle img{
    width: 85px;
    height: 85px;
    border-radius: 50%;
   

}
.squares{
    display: inline-block;
    margin-right:1px;
    padding-left: 10px;
    overflow: hidden;

}
.square{
    height: 300px;
    width: 300;
    display:flex;
    
    justify-content: space-around;
    position:relative;
    box-sizing:border-box;
    margin-top: 50px;
    padding: 5px;
    margin-left: 10px;
    
    
}
.square img{
    max-width:100%;
    max-height: 100%;
   
    
}
.square h3,p{
    text-align: center;
    font-family: FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.7 ;
}
.invented{
    
    text-align: center;
    font-family: FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.7 ;
}
.reinvented{
    font-size: 37px;
    font-weight: bold;
    padding-top: 90px;
    
}
.icon{
    display: inline-block;
    margin-right:5px;
    padding-left: 10px;
}

.icons{
   
    /*height: 2000px;
    width: 1230px;*/
    display:flex;
    
    
    position:relative;
    box-sizing:border-box;
    margin-top: 50px;
    padding: 20px;
    margin-left: 20px;
}
.icon img{
    max-width: 100%;
    max-height: 100%;
}

.icons h3,p{
     text-align: center;
    font-family: FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.7 ;
}
.box{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 40px;
    overflow-x: hidden;
   
}
 .box img{
   max-width:100%;
   max-height: 50%;
   overflow-x: hidden;
}
.buttons{
  
   
    position: relative;
    left:845px;
    bottom:205px;

}
.buttons button{
     height: 49px;
    width: 140px;
    padding: 10px 18px;
    background-color:white;
    color:black;
    padding: 10px 10px;
    border: none;
    margin-right: 15px;
    margin-top:17px;
    font-weight: bold;
    font-size: 15px;
    position: relative;
    
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.origin{
    width: 100%;
    height:50% ;
    position: relative;
    padding-top:-0.1px;
}
.origin img{
   max-width:100%;
   max-height: 50%;
   
}
.shop-btn{
    
    
    position: relative;
    left:130px;
    bottom:205px;

} 
.shop-btn button{
    height: 47px;
    width: 130px;
    padding: 10px 20px;
    background-color:white;
    color:black;
    padding: 10px 10px;
    border: none;
    margin-right: 15px;
    margin-top:17px;
    font-weight: bold;
    font-size: 15px;
    position: relative;
    
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
} 



.squid{
    width: 100%;
    height:50% ;
    position: relative;
    padding-top: -0.123;
    overflow-x: hidden;
}
.squid img{
   padding-top:10px;
   max-width:100%;
   max-height: 50%;
   overflow-x: hidden;
   
}
.shop-btn2{
    
    
    position: relative;
    left:180px;
    bottom:205px;

} 
.shop-btn2 button{
    height: 47px;
    width: 130px;
    padding: 10px 20px;
    background-color:white;
    color:black;
    padding: 10px 10px;
    border: none;
    margin-right: 15px;
    margin-top:17px;
    font-weight: bold;
    font-size: 15px;
    position: relative;
    
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
} 
   
.spot{
    
    text-align: center;
    font-family: FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;;
    line-height: 1.7 ;
}
.spot-light{
    font-size: 37px;
    font-weight: bold;
    padding-top: 1px;
    
}
.photos{
    display: flex;
    margin-right:1px;
    padding-left: 10px;
}
.photo{
    height: 250px;
    width: 250;
    display:flex;
    
    justify-content: space-around;
    position:relative;
    box-sizing:border-box;
    margin-top: 50px;
    padding: 5px;
    margin-left: 10px;
}
.photo img{
    max-width:100%;
    max-height: 100%;
}

.step{
     
    text-align:left;
    padding-left: 30px;
    font-family: FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;;
   
}
.step-light{
    font-size: 26px;
    font-weight:650;
    padding-top: 60px;
    
}
.steps{
    display: flex;
       
    margin-right:1px;
    padding-left: 10px;
    padding-top: 0px;
    
}
.step-lights{
    height: 270px;
    width: 270;
    display:flex;
      
    padding-top: 0px;
    justify-content: space-around;
    position:relative;
    box-sizing:border-box;
    margin-top: 50px;
    padding: 5px;
    margin-left: 15px;
}
.step-lights img{
     
    max-width:100%;
    max-height: 100%;
}
.step-lights h3{
    text-align: center;
    font-family: FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    left: 50px;
}

.gearup{
    text-align:left;
    padding-left: 30px;
    font-family: FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;;
}
.gearups{
    font-size: 26px;
    font-weight:650;
    padding-top: 60px;
}
.gearsports{
    display: flex;
    margin-right:1px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 200px;
}
.gearsport{
    height: 250px;
    width: 250;
    display:flex;
    padding-top: 0px;
    justify-content: space-around;
    position:relative;
    box-sizing:border-box;
    margin-top: 50px;
    padding: 15 15px;
    margin-left: 20px;
}
.gearsport img{
    max-width:100%;
    max-height: 100%;
    
}



   

.photos, .steps, .gearsports {
    display: flex;
    flex-wrap: wrap;    /* ✅ allows wrapping instead of forcing scroll */
    overflow: hidden;   /* ✅ stops unwanted y-scroll inside elements */
}

.footer-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* Two equal columns */
  gap: 1px;                     /* Space between fruits & vegetables */
  max-width: 100%;
  height: 450px;
  background-color: rgba(0, 0, 0, 0.888);
  padding-left: 30px;

  
}



.footer-column {
padding-top:50px;
height:300px;

color: white;
display: grid;
gap:1px; 
font-family: FFDINforPuma, Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;;

}
.footer-column div:hover{
    text-decoration: underline;
}
.footer-columns{
    color: white;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr;
    padding-right: 20px;
    overflow: hidden;
    padding: 20px 10px;
}
.footer-columns .img1{
    
    
    display: grid;
    padding-right: 20px;
    padding-bottom: 50px;
    height: 20px;
    width: 20px;
}
 .footer-icon{
    overflow: hidden;
   display: grid;
   
   
}