@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
   :root{
    --header-height :3rem;

    --font-medium:500;
    --font-semi-bold:600;
    --font-bold:700;

    --dark-color:#141414;
    --dark-color-light:#BABABA;
    --dark-color-lighten:#F2F2F2;
    --white-color:#FFF;

    --body-font:'Poppins',sans-serif;
    --big-font-size:1.25rem;
     --bigger-font-size:1.5rem;
    --biggest-font-size:2rem;
    --h2-font-size:1.25rem;
    --normal-font-size:.938rem;
    --smaller-font-size:.813rem;

    --mb-1:.5rem;
    --mb-2:1rem;
    --mb-3:1.5rem;
    --mb-4:2rem;
    --mb-5:2.5rem;
    --mb-6:3rem;
    
    --z-fixed: 100;
    --rotate-img:rotate(-30deg);

   } 
   @media screen and (min-width:768px){
    :root{
        --big-font-size:1.5rem;
        --bigger-font-size:2rem;
       --biggest-font-size:3rem;
       --normal-font-size:1rem;
       --smaller-font-size:.875rem;
    }
   }
   *,::before,::after{
    box-sizing:border-box;
   }
   html{
    scroll-behavior:smooth;
   }
   body{
    margin:var(--header-height) 0 0 0;
    font-family:var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    color: var(--dark-color);
    line-height: 1.6;
   }

   h1,h2,h3,p,ul{
    margin:0;
   }
    
   ul{
    padding:0;
    list-style:none;
   }
   a{
    text-decoration: none;
    color: var(--dark-color);
   }
   img{
    max-width:100%;
    height: auto;
    display: block;
   }

   .section{
    padding: 5rem 0 2rem;
   }
   .section-title{
    position: relative;
    font-size:var(--big-font-size);
    margin-bottom: var(--mb-4);
    text-align: center;
    letter-spacing: .1rem;
   }
   .section-title::after{
    content: '';
    position: absolute;
    width: 56px;
    height: .18rem;
    top: -1rem;
    left: 0;
    right: 0;
    margin: auto;
    background-color: var(--dark-color);
   }
   .bd-grid{
      max-width: 1024px;
      display:grid;
      grid-template-columns: 100%;
      column-gap: 2rem;
      width: calc(100%-2rem);
      margin-left: var(--mb-2);
      margin-right: var(--mb-2);
   }
   .l-header{
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--z-fixed);
      background-color: var(--dark-color-lighten);

   }
   .nav{
      height: var(--header-height);
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   @media screen and (max-width:768px) {
      .nav_menu{
         position: fixed;
         top: var(--header-height);
         left: -100%;
         width: 70%;
         height: 100vh;
         padding: 2rem;
         background-color: var(--white-color );
         transition: .5s;
      }
   }

   .nav_item{
      margin-bottom:var(--mb-4);

   }
   .nav_logo{
      font-weight: var(--font-semi-bold);

   }
   .nav_toggle,.nav_shop{
    font-size: 1.3rem;
    cursor:pointer;
   } 
   
   .show{
    left: 0;
   }
   .active{
      position: relative;
   }
   .active::before{
      content: '';
      position: absolute;
      bottom: -.5rem;
      left: 45%;
      width: 4px;
      height: 4px;
      background-color: var(--dark-color);
      border-radius: 50%;

   }
   .scroll-header{
      background-color: var(--white-color);
      box-shadow: 0 2px 4px rgba(0,0,0,.1);
   }
   .home{
      background-color: var(--dark-color-lighten);
      overflow: hidden;
   }
   .home_container{
      height:calc(100vh - var(--header-height));
   }
   .home_sneaker{
      position: relative;
      display: flex;
      justify-content: center;
      align-self: center;
   }
   .home_shape{
      width: 220px;
      height: 220px;
      background-color: var(--dark-color);
      border-radius: 50%;
   }

   .home_img{
      position:absolute;
      top:1.5rem;
      max-width: initial;
      width: 275px;
      transform: var(--rotate-img);
   }
   .home_new{
      display: block;
      font-size: var(--smaller-font-size);
      font-weight: var(--font-semi-bold);
      margin-bottom: var(--mb-2);
   }
   .home_title{
      font-size: var(--bigger-font-size);
      margin-bottom: var(--mb-1);
      
   }
   .home_description{
      margin-bottom: var(--mb-6);
   }

   .button{
      display: inline-block;
      background-color: var(--dark-color);
      padding: 1.125rem 2rem;
      color: var(--white-color);
      font-weight: var(--font-medium);
      border-radius: .5rem;
      transition: .3s;
   }
   .button:hover{
      transform: translateY(-.25rem);
   }
   .button-light{
      display: inline-flex;
      color: var(--dark-color);
      font-weight: var(--font-bold);
      align-items: center;
   }
   .button-icon{
      font-size: 1.25rem;
      margin-left: var(--mb-1);
      transition: .3s;
   }
   .button-light:hover .button-icon{
      transform: translateX(.25rem);
   }

   .featured_container{
     row-gap: 3rem;

     grid-template-columns: repeat(auto-fit,minmax(300px,auto));

   }
   .sneaker{
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem;
      background-color: var(--dark-color-lighten);
      border-radius: 5rem;
      transition: .5s;
   }
   .sneaker_sale{
      position:absolute;
      left: 1rem;
      background-color: var(--dark-color);
      color: var(--white-color);
      padding: .25rem .5rem;
      border-radius: .25rem;
      font-size: var(--h2-font-size);
      transform: rotate(-90deg);
      letter-spacing: .1rem;

   }
   .sneaker_img{
      width: 220px;
      margin-top: var(--mb-3);
      margin-bottom: var(--mb-6);
      transform: var(--rotate-img);
      filter: drop-shadow(0 12px 8px rgba(0,0,0,.2));

        
   }
   .sneaker_name, .sneaker_perci{
      font-size: var(--h2-font-size);
      letter-spacing: .1rem;
      font-weight: var(--font-bold);
   }
.sneaker_name{
   margin-bottom:var(--mb-1) ;
}
.sneaker_perci{
   margin-bottom: var(--mb-4);
}

.sneaker:hover{
     transform: translateY(-.5rem );
}

.collection_container{
   row-gap: 2rem;
   justify-content: center;
}
.collection_card{
   position: relative;
   display: flex;
   height: 328px;
   background-color: var(--dark-color-lighten);
   padding: 2rem;
   border-radius: .5rem;
   transition: .3s;
}
.collection_data{
   align-self: flex-end;

}
.collection_img{
   position: absolute;
   top: 0;
   right: 0;
   width: 230px;
}
.collection_name{
   font-size: var(--bigger-font-size);
   margin-bottom: .25rem;
}
.collection_description{
   margin-bottom: var(--mb-2);
}
.collection_card:hover{
   transform: translateY(-.5rem);
}
.women_container{
   row-gap: 2rem;
   grid-template-columns: repeat(auto-fit,minmax(300px,auto));
}
.offer_container{
   display: grid;
   grid-template-columns: 55% 45%;
   column-gap: 0;
   background-color: var(--dark-color-lighten);
   border-radius: .5rem;
   justify-content: center;
   
}
.offer_data{
   padding: 4rem 0 4rem 1.5rem;
}
.offer_title{
   font-size: var(--bigger-font-size);
   margin-bottom: .25rem;
}
.offer_description{
   margin-bottom: var(--mb-3);
}
.offer_img{
   width: 153px;
}
.new_container{
   row-gap: 2rem;
}
.new_mens{
   display: flex;
   flex-direction:column;
   justify-content: center;
   background-color: var(--dark-color-lighten);
   border-radius: 1rem;
   padding: 2rem;
}

.new_mens-img{
   width: 276px;
   margin-bottom: var(--mb-3);
}
.new_title{
      font-size: var(--bigger-font-size);
      margin-bottom: .25rem;

}
.new_perci{
   display: block;
   margin-bottom: var(--mb-3);
}
.new_sneaker{
   display: grid;
   gap: 1.5rem;
   grid-template-columns: repeat(auto-fit,minmax(300px,1fr));

}
.new-sneaker-card{
   position: relative;
   padding: 3.5rem 1.5rem;
   background-color: var(--dark-color-lighten);
   border-radius: .5rem;
   overflow: hidden;
   display: flex;
   justify-content: center;
}
.new_sneaker-img{
   width: 220px;

}
.new_sneaker-overlay{
   position: absolute;
   left: 0;
   bottom: -100%; 
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgba(138, 138,138,.3);
   transition: .6s;
}
 .new-sneaker-card:hover .new_sneaker-overlay{
   bottom: 0;
 }  
 .newsletter_container{
   background-color: var(--dark-color);
   color: var(--white-color);
   padding: 2rem .5rem;
   border-radius: .5rem;
   text-align: center;
   
 }

 .newsletter_title{
   font-size: var(--bigger-font-size);
   margin-bottom: var(--mb-2);

 }

 .newsletter_description{
   margin-bottom:var(--mb-5);
 }
.newsletter_subscribe{
   display: flex;
   column-gap: .5rem;
   background-color: var(--white-color);
   padding: .5rem;
   border-radius: .5rem;
}
.newsletter_input{
   outline: none;
   border: none;
   width: 90%;
   font-size: var(--normal-font-size);
}
.newsletter_input::placeholder{
   color: var(--dark-color);
   font-family: var(--body-font);
   font-size: var(--normal-font-size);
   font-weight: var(--font-semi-bold);
}
.footer_container{
   grid-template-columns: repeat(auto-fit,minmax(220px,1fr));

}

.footer_box{
   margin-bottom: var(--mb-4);
}
.footer_title{
   font-size:var(--big-font-size);
}
.footer_link{
   display: block;
   width: max-content;
   margin-bottom: var(--mb-1);
}
.footer_social{
   font-size: 1.5rem;
   margin-right: 1.25rem;
}
.footer_copy{
   padding-top:3rem;
   font-size: var(--smaller-font-size);
   columns: var(--dark-color-light);
   text-align: center;
}
@media screen and (min-width:576px){
   .offer_container{
      grid-template-columns: max-content,max-content;

   }
   .offer_data{
      text-align: center;
   }
   .new_mens{
      align-items: center;
   }
}

@media screen and (min-width:768px){
   body{
      margin: 0;
   }
   .section{
      padding: 7rem 0;
   }
   .section-title::after{
      width: 76px;
   }
   .nav{
      height: calc(var(--header-height)+ 1.5rem);
   }
   .nav_menu{
      margin-left: auto;
   }
   .nav_list{
      display: flex;
   }
   .nav_item{
      margin-left: var(--mb-6);
      margin-bottom: 0;
   }
   .nav_toggle{
      display: none;
   }
   .home_container{
      height: 100vh;
      display: grid;
      grid-template-columns: max-content;
      justify-content: center;
      align-items: center;
   }
   .home_sneaker{
      order: 1;
   }
   .home_shape{
      width: 376px;
      height: 376px;
   }
   .home_img{
      width: 470px;
      top: 3.5rem;
      right: 0;
      left: -3rem;
   }
   .newsletter_container{
      display: grid;
      grid-template-columns: max-content,max-content;
      justify-content: center;
      align-items: center;
      padding: 4.5rem 2rem;
      column-gap: 3rem;
   }
   .newsletter_description{
      margin-bottom: 0;
   }
   .newsletter_subscribe{
      width: 360px;
      height: max-content;
   }
   @media screen and (min-width:1024px){
      .bd-grid{
         margin-left: auto;
         margin-right: auto;
      }
      .home_container{
         column-gap: 8rem;
      }
      .collection_container{
         grid-template-columns: repeat(2, 415px);
      }
      .new_container{
         grid-template-columns: max-content 1fr;
      }
      .new_mens{
         align-items: initial;
         justify-content: flex-end;
         padding: 4rem 2rem;
      }
      .new_mens-img{
         margin-bottom: var(--mb-6);
      }
   }
}