*,
*::before,
*::after{
    box-sizing: border-box;
}
:root{
    --ff-primary:'Open Sans', sans-serif;
    --ff-secondary:'Roboto Slab', serif;

    --fw-reg: 300;
    --fw-bold: 900;

    --clr-light:rgb(223, 185, 185);
    --clr-dark: #303030;
    --clr-accent:rgb(212, 25, 25);

    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;


    --bs: 0.25em 0.25em 0.75em rgba(0,0,0,0.25);
}


@media (min-width: 800px)
{
    :root{
        --fs-h1: 4.5rem;
        --fs-h2: 3.75rem;
        --fs-h3: 1.5rem;
        --fs-body: 1.25rem;
    }
}
html{
    scroll-behavior: smooth;
    scrollbar-color: var(--clr-accent);
}
img{
    display: block;
    max-width:100%;
}
body{
    margin:0;
    padding:0;  
    
}
/* Navigation */
.nav
{
    margin:0;
    padding:0;  
}
.logo{
padding:1em 2em;
background-color: var(--clr-accent);
color:white;
}
.nav_list{
    list-style-type: none;
    overflow: hidden;
    background-color:var(--clr-dark);  
    padding: 0;
    margin:0;
}
 .nav_list_item{
    float:left;
    color:var(--clr-light);
   
} 
.nav_link{
    display:block;
    text-decoration:none;
    color:var(--clr-light);
    padding:1em 2em;
}
.cart{
    position: absolute;
    right:0;
}
.cart:hover i{
    background-color: var(--clr-light);
    color:var(--clr-dark);
}

.nav_list_item .fa{
    font-size:1.05em!important;
}
.nav_link:hover, .nav_sublist_link:hover{
    color:black;
    background-color:var(--clr-light);
}

.nav_sublist{
    display:none;
    position:absolute;
}
.nav_list_item:hover .nav_sublist{
    display:block;
    padding:0;
    margin:0;
    color:var(--clr-dark);
    background-color:var(--clr-light);
    z-index:1000;
}
.nav_sublist_link{
    display:block;
    padding:1em 2em;
    background-color:var(--clr-dark);
    color:var(--clr-light);
    text-decoration:none;
   
}

button{
    display:inline-block;
    padding: 0.5em 1.5em;
    background-color: var(--clr-accent);
    color:var(--clr-dark);
    text-decoration: none;
    cursor: pointer;
    font-size:1em;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    letter-spacing: 2px;
    transition: transform 200ms ease-in-out;
}
.nav_toggle{
    padding:1.4em;
    margin:0.5em;
    border:none;
    outline: none;
    cursor: pointer;
    position: absolute;
    right:0;
    top:0;
    z-index:1000;
    
}
.nav_toggle:focus{
    outline:3px solid var(--clr-accent);
    outline-offset:0.3em;
}
.nav_open .nav_toggle{
    position:fixed;
}
.nav_open .nav{
    position:fixed;
    background-color: var(--clr-dark);
    color: var(--clr-light);
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: 100;
    transition: 0.3s;
   
}
.nav_open .nav_list{ 
    display:block;

}
.nav_open .hamburger{
   transform: rotate(.625turn);
}
.nav_open .hamburger::before{
    transform: rotate(90deg) translate(-12px);
}
.nav_open .hamburger::after{
    opacity:0;
}


.hamburger{
    display:block;
    position: relative;
}
.hamburger,
.hamburger::before,
.hamburger::after{
    background:var(--clr-dark);
    width: 3em;
    height: 6px;
    border-radius: 1em;
    transition: transform ease-in-out;
    
}
.hamburger::before,
.hamburger::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
 

}
.hamburger::before{
    top:12px;
}
.hamburger::after{
    bottom: 12px;
}
.nav_toggle{
    display:none;
}

@media screen and (max-width: 600px) {
    .nav .nav_list{
        display: none;
      }
    .nav_open .nav{
        display:block;

    }
    .nav_open .logo{
        display:none;
    }
    .nav_open .nav_list{
        display:block;
    }
    .nav_open .nav_list:hover .nav_sublist{
        display:block;
    }
    .nav_open .nav_list_item{
        display:block;
        float:none;
    }
    .nav_open .nav_link{
        display: block;
    }
    .nav .nav_toggle {
      float: right;
      display: block;
    }
  } 
body{
    font-family: var(--ff-primary);
}
  /* Introduction */
  .intro{
    width:100%;
    min-height:700px;
    margin-bottom:1em;
    background-image: url("img/intro_img.jpg");
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
 .btn{
     border:0;
     outline:0;
     position:absolute;
     left:20%;
     top:70%;
     padding:1em 2em;
     color:var(--clr-light);
     background-color: var(--clr-accent);
     font-family: var(--ff-primary);
 }
 .lets_shop_btn{
     text-decoration: none;
     color: inherit;
 }
 .btn:hover{
     background-color: var(--clr-dark);
     color: var(--clr-light);
 }

 /* New Arrival */
 .new_arrivals{
     color:var(--clr-dark);
     text-align:left;
     margin-bottom:0.5em;

 }
 .new_arrival_title,.best_seller_title,.featured_title{
     background-color: var(--clr-accent);
     color:var(--clr-light);
     width:8em;
     height:1.5em;
     text-align: center;
     border-radius:0 2em 2em 0;
 }
 .new_arrival_items{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    grid-column-gap: 2em;
    grid-row-gap: 1em;
    padding:2em;
    position:relative;
}
.new_arrival_link{
    background: var(--clr-light);
    overflow: hidden;
}

.new_arrival_img:hover{
    opacity:0.5;
}
figure{
    padding:0;
    margin:0;
    box-shadow: var(--bs);
}
figcaption{
text-decoration: none;
color:black;
background-color: var(--clr-light);
text-align: center;
}

/* BestSeller */
.best_seller{
    color:var(--clr-light);
    text-align:left;
    margin-bottom:0.5em;

}
.best_seller_title{
    font-family: var(--ff-secondary);
    font-weight: var(--fw-bold);
}
.best_seller_items{
   display:grid;
   grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
   grid-column-gap: 2em;
   grid-row-gap: 1em;
   padding:2em;
}
.best_seller_link{
   background: var(--clr-light);
   overflow: hidden;
}

.best_seller_img:hover{
   opacity:0.5;
}

/* Featured */

.featured{
    color:var(--clr-dark);
    text-align:left;
    margin-bottom:0.5em;

}
.featured_title{
    font-family: var(--ff-secondary);
    font-weight: var(--fw-bold);
}
.featured_items{
   display:grid;
   grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
   grid-column-gap: 2em;
   grid-row-gap: 1em;
   padding:2em;
   
}
.featured_link{
   background: var(--clr-light);
   overflow: hidden;
}

.featured_img:hover{
   opacity:0.5;
}


/* Footer */
.footer_section{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    background-color: var(--clr-dark);
    color:var(--clr-light);
    font-weight: var(--fw-bold);
}
.footer_list{
    list-style-type:none;
}
.footer_link{
    text-decoration: none;
    color: var(--clr-light);
}
.fa{
    font-size:1.5rem;
    color:var(--clr-light);
}
.footer_link:hover, .footer .fa:hover{
    color:var(--clr-accent);
}