*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:active,
:hover,
:focus {
  outline: 0 !important;
  outline-offset: 0;
}

a,
a:hover {
  text-decoration: none;
}

a:hover {
  color: var(--primary-color) !important;
}

ul,
ol {
  margin: 0;
  padding: 0;
}


:root {
  --primary-color: #ff553e;
  --secondary-color: #333;
  --white-color: #fff;
  --black-color: #000;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 100%;
  font-weight: 400;
  font-family: 'Dosis', sans-serif;
}

h1 {
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 1rem;
  text-transform: uppercase;
  color: var(--white-color);
}

h2 {
  font-weight: 600;
  font-size: 1.5625rem;
  text-transform: capitalize;
  color: var(--white-color);
  line-height: 2.5rem;
}

h4 {
  color: var(--white-color);
  text-transform: capitalize;
  font-size: 1.125rem;
  font-weight: 400;
  margin-bottom: 0.9375rem;
  transition: all .3s linear;
}

h5 {
  color: var(--white-color);
  text-transform: capitalize;
  font-size: 0.875rem;
  font-weight: 400;
  margin-bottom: 10px;
}

p {
  font-size: 1rem;
  color: var(--white-color);
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 0.0625rem;
  opacity: 0.8;
}

.main-btn {
  height: 40px;
  line-height: 40px;
  font-size: 1.125rem;
  display: inline-block;
  color: var(--white-color);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 30px;
}

.main-btn:hover {
  color: var(--primary-color) !important;
}

.wrapper {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: var(--secondary-color);
}

.text-content {
  width: 60%;
  margin: auto;
}

/* Header */

.navigation-wrap{
  position:fixed;
  width: 100%;
  left:0;
  z-index:1000;
  -webkit-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out;
  background-color: #1D1D1D; 
}
.navigation-wrap .nav-item{
  padding:0 0.5rem;
  transition:all 200ms linear;
}

.navigation-wrap .nav-link{
  padding-top:0.9375rem;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: uppercase;
  color:var(--white-color);
  letter-spacing:0.0625rem;
}
.navigation-wrap .nav-link:hover,
.navigation-wrap .nav-link.active{
  color:var(--primary-color);
}

/* top-banner */
 
#home .carousel-caption{
  top:12rem;
}
#home .carousel-caption p{
  max-width: 36.25rem;
  margin:1.0625rem auto;
}

/* New-arrivals section */

.new-arrivals .banner-info{
  bottom:30px;
  margin:auto;
  width:100%;
  position:absolute;
  z-index:9;
  padding:0 15px;
}
.new-arrivals .card-banner:nth-child(2) h2,
.new-arrivals .card-banner:nth-child(2) p,
.new-arrivals .card-banner:nth-child(2) a{
  color:var(--black-color);
}

.new-arrivals .card-banner .card-thumb,
.products .item-product{
  position:relative;
  display:block;
  overflow: hidden;
}
.new-arrivals .card-banner .card-thumb img,
.products .item-product img{
  transition: all .5s ease-out 0s;
}
.new-arrivals .card-banner .card-thumb img:hover,
.products .item-product img:hover{
  transform:scale(1.2);
  opacity:0.6;
}

/* Products section */

.products .wrapper{
  background-color:var(--black-color);
}
.products .nav-tabs{
  border:0;
  justify-content: center;
}
.products .nav-tabs .nav-link{
  display:block;
  padding:0 30px;
  border: 1px solid var(--white-color);
  border-radius: 20px;
  background-color: var(--black-color);
  color:var(--white-color);
  height:36px;
  margin:10px;
  line-height: 34px;
  text-transform: uppercase;

} 
.products .product-info .cat-parent,
.products .product-info .wishlist i{
  font-size: 0.875rem;
  color:var(--white-color);
  opacity: 0.6;
  text-transform: uppercase;
}
.products .product-title a{
  margin: 0 0 7px;
  display:block;
  color:var(--white-color);
  overflow:hidden;
  white-space: nowrap;
  text-transform: uppercase;
}
.products .rating i{
  color:#f4d632
}
.basket a i{
  color:var(--white-color);
}

/* deal-of-the-day section */

.deal-of-the-day{
  background-image:url("img-4.jpg");
  background-position: center;
  background-repeat: no-repeat;
} 
 
/* blog section */

.blog-section{
  background-color:var(--black-color);
} 

.blog-section .card-thumb{
  position:relative;
  display:block;
  overflow: hidden;
}

.blog-section .card-thumb img{
  transition: all .5s ease-out 0s;
}

.blog-section .card-thumb img:hover{
  transform:scale(1.2);
  opacity:0.6;
}


/* footer section */

.footer{
  background-color:var(--secondary-color);
} 
.footer .footer-social a i {
  font-size: 1.5rem;
  color:var(--white-color);
  padding:0 1rem;
}
.footer .footer-social a:hover i{
  color:var(--primary-color);
}

.sec1{
  height: auto;
  width: auto;
  justify-content: space-evenly;
}
.sec1 .hards img{
  width: 200px;
  border-radius: 4px;
  padding: 3px;
  border-radius: 10px;
  margin-left: -7px;
}
.col1{
  height: 300px;
  border: 1px solid gray;
  margin-top: 100px;
  border-radius: 10px;
  width: 210px;
}

.col1 .s1 h6{
  color: red;
}

.col1 .s1 h5{
  color: #1D1D1D;
}

.col1 .s1 h4{
  color: #131111;
  margin-bottom: -0.5px;
}

.col1 .s1 h5 a{
  margin-bottom: 50
  
}

.sec1 .demo img{
  width: 500px;
  margin-top: 80px;
}

.sec1 .col1 .s1 h5 a{
  color: brown;
}

.more{
  height: 50px;
  width: 250px;
  border: 1px solid brown;
  margin-left: 500px;
  margin-top: 20px;
  border-radius: 8px;
}
.more div.btn{
 color: black;
 justify-content: center;
 margin:40px;
 margin-top: 5px;
 margin-left: 38px;
}

.more:hover{
  background-color: brown;
  color: #fff;
}
.more div.btn:hover{
  background-color: brown;
  color: #fff;
}