*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body{
  font-family:Montserrat;
}

/* Header */

header{
  background-color:#FAFAFA ;
  height:5rem;
  width:100%;
}
.container{
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.logo{
  padding:1.5em;
}
.menu{
  display: none;
}

#menu-icon{
  padding:0.5em;
  width:100px;
  height:100px;
  cursor:pointer;
}

/* SideNav */

#sideNav{
  position:absolute;
  width:100%;
  height:100%;;
  background-color:#FAFAFA;
  z-index:2;
  transition: .5s;
}
#sideNav ul{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}
#sideNav ul li{
  width:100%;
  text-align: center;
  padding:2em;
  list-style: none;
}
#sideNav ul li a{
  text-decoration: none;
  font-weight: 600;
  color:#000;
}

/* Product Area */

.product-title{
  font-weight:bold;
  margin:0 auto;
  text-align: center;
  padding:1em;
}
.product-left-col{
  text-align: center;
}
.product-left-col img{
  width:95%;
  border-radius: 8px;
  padding:0.1em;
}
.slider-images img{
  width:24%;
  padding:0.1em;
}
.slider-images{
  display:flex;
  justify-content: space-around;
}
.thumbnail{
  border-radius:8px;
  height:80px;
}
.thumbnail.active{
  opacity:1;
}
.thumbnail:hover{
  opacity:1;
}
.thumbnail{
  cursor:pointer;
  opacity:0.6;
}
.product-right-col{
  width:100%;
}
.product-detail-row{
  display:flex;
  justify-content: space-between;
}
.detail-left-row{
  flex-basis:45%;
  text-align: start;
  padding-left:0.5em;
}
.detail-right-row{
  flex-basis:45%;
}

.item-sm{
  font-weight:bold;
  font-size:1rem;
  margin:0.5em 0.5em;
}
.pr{
  color: #737B7D;
  font-size: 1rem;
  line-height: 1.2rem;
  letter-spacing: 0.01em;
  margin:0.5em 0.5em;
}
.description{
  width:95%;
  text-align: start;
  letter-spacing: 0.1rem;
  margin:0.7rem;
  font-size:1.2rem;
}
.item-box{
  text-align: center;
  padding:1.5em 1.5em;
  background: #F5F5F5;
  max-width:90%;
  margin:1rem;
  border-radius:0.5em;
  font-weight: 700;;
}
.btn-row{
  width:100%;
  display:flex;
  justify-content: space-between;
}
.btn-1{
  flex-basis:48%;
  min-width:160px;
  padding:1em 0em;
  background:  #8D8BDC;
  border-radius: 8px;
  border:none;
  font-weight:bold;
  cursor:pointer;
}
.btn-2{
  flex-basis:48%;
  padding:0.9em 0.7em;
  background: #39DB49;
  border-radius: 8px;
  border:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items: center;
}
.btn-2 img{
  padding-right:0.7em;
}
.btn-text{
  min-width:98px;
}

/* Footer */

#footer{
  width:100%;
  color:#000;
  margin-top:2.5rem;
  padding:1em 1em;
  text-align: center;
  background:  #8D8BDC;
  font-weight: bold;
}

/* Media Queries */

@media (max-width:300px){
  .product-detail-row{
    display:block;
  }
  .detail-left-row{
    padding-left:0;
  }
  .btn-row{
    display:block;
    text-align: center;
  }
  .btn-2{
    margin-top:1em;
    margin-left:4.5em;
  }
}

@media (min-width:415px){
  .btn-row{
    justify-content: space-around;
  }
  .product-title{
    font-size: 1.7rem;;
  }
}

@media (min-width:600px){
  .thumbnail{
    height:125px;
  }
}

@media (min-width:900px){
  #menu-icon{
    display: none;
  }
  .menu{
    display: flex;
  }
  #sideNav{
    display: none;
  }
  .menu ul{
    display: flex;
  }
  .menu ul li{
    list-style: none;
    padding:0.5em 1em;
  }
  .menu ul li a{
    text-decoration: none;
    color:black;
    font-size:1.2rem;
    font-weight:550;
  }
  .logo{
    margin-left:4.5em;
  }
  .product-row{
    display:flex;
    justify-content: space-around;
  }
  .product-title{
    font-size: 2rem;
  }
  .product-left-col{
    flex-basis:45%;
    margin-top:2em; 
    padding-left:1em;
    padding-right:3em;
  }
  .product-right-col{
    margin-top:4em;
    margin-left:3em;
    flex-basis:45%;
  }
  #featured-image{
    width:100%;
    height:40%;
    margin:0 2em;
  }
  .slider-images img{
    height:70px;
  }
  .slider-images{
    width:100%;
    height:15%;
    margin:0 2em;
  }
  .detail-left-row{
    flex-basis:35%;
  
  }
  .detail-left-row.item-sm{
    width:50px;
  }
  .detail-right-row{
    flex-basis:60%;
  }
  .item-sm{
    margin:1em;
    font-size: 1rem;
    max-width: 100px;
  }
  .pr{
    margin:1em;
  }
  .description{
    padding-top:1em;
    padding-left:0.5em;
    max-width:85%;
  }
  .item-box{
    margin-top:1.5em;
    margin-right:15em;
    border-radius:0.5em;
  }
  .btn-row{
    justify-content: space-between;
    align-items: flex-start;
    margin-left:1em
  }
  .btn-1{
    flex-basis:45%;
    min-width:170px;
    padding:1em 3em;
  }
  .btn-2{
    flex-basis:45%;
    padding:1em 3em;
    margin-right:18em;
  }
  #footer{
    margin-top:5em;
  }
}
@media (min-width:1200px){
  #menu-icon{
    display: none;
  }
  .menu{
    display: flex;
  }
  #sideNav{
    display: none;
  }
  .menu ul{
    display: flex;
  }
  .menu ul li{
    list-style: none;
    padding:0.5em 1em;
  }
  .menu ul li a{
    text-decoration: none;
    color:black;
    font-size:1.2rem;
    font-weight:550;
  }
  .logo{
    margin-left:4.5em;
  }
  .product-row{
    display:flex;
    justify-content: space-between;
  }
  .product-title{
    font-size: 2rem;
  }
  .product-left-col{
    flex-basis:50%;
    margin-top:3em; 
  }
  .product-right-col{
    margin-top:4em;
    margin-left:2em;
    flex-basis:50%;
  }
  #featured-image{
    max-width:80%;
    height:70%;
    margin:0 6em;
  }
  .slider-images img{
    height:120px;
  }
  .slider-images{
    width:80%;
    height:20%;
    margin:0 6em;
  }
  .detail-left-row{
    flex-basis:35%;
  }
  .detail-right-row{
    flex-basis:60%;
  }
  .item-sm{
    margin:1em;
    font-size:1.2rem;
    max-width: 200px;
  }
  .pr{
    margin:1em;
  }
  .description{
    padding-top:1em;
    padding-left:0.5em;
    max-width:85%;
  }
  .item-box{
    margin-top:1.5em;
    margin-right:15em;
    border-radius:0.5em;
  }
  .btn-row{
    justify-content: space-between;
    align-items: flex-start;
    margin-left:1em
  }
  .btn-1{
    flex-basis:45%;
    min-width:170px;
    padding:1em 3em;
  }
  .btn-2{
    flex-basis:45%;
    padding:1em 3em;
    margin-right:18em;
  }
  #footer{
    margin-top:5em;
  }
}
@media (min-width:1500px){
  .btn-row{
    justify-content: space-around;
  }
}