@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
main{
    background: rgba(245, 222, 178, 0.5);
    opacity: 0.8;
}

body {
    font-family: 'Poppins', sans-serif;

}

/* Headers Titles Styles */

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

h2 {
    font-size: 1.8rem;
    font-weight: 600;
}

h3 {
    font-size: 1.4rem;
    font-weight: 800;
}

h4 {
    font-size: 1.1rem;
    font-weight: 600;
}

h5 {
    font-size: 1rem;
    font-weight: 400;
    color: #1d1d1d;
}

h6 {
    color: #d8d8d8 !important;
}

/* Header NavBar */
header{
    box-shadow: 0 0 15px black;
}
.navbar {
    
    background-color: white;
    font-size: 16px;
    align-items: center;
    margin-top: 1rem;
}

.navbar div ul li i {
    font-size: 1.2rem;
    padding: 0 7px;
    cursor: pointer;
    transition: 0.3s ease;
}
.navbar div ul li i:hover,
.navbar div ul li i.active {
    color: coral;
}
.bg-light .navbar-nav .nav-link {
    padding: 0 20px;
    transition: 0.3s ease;
}
.bg-light .navbar-nav .nav-link:hover,
.bg-light .navbar-nav .nav-link.active {
    text-shadow: 0 0 8px black;
    color: coral;
}
.navbar-ligth .navbar-nav .nav-link.active {
    text-shadow: 0 0 8px black;
    color: coral;
}
#bar{
    font-size: 1.5rem;
    padding: 7px;
    cursor: pointer;
    
    transition: 0.3s ease;
    color: black;
}
#bar:hover, #bar.active{
color: #fff;
}

/* Mobile Nav */

@media only screen and (max-width:991px){
    body > header > nav > div > button:hover #bar,
    body > header > nav > div > button:focus #bar{
        background-color: #fb774b;
    }
    body > header > nav > div > button:hover #bar,
    body > header > nav > div > button:focus #bar{
       color:#fff;
    }
    #navbarSupportedContent > ul {
margin: 1rem;
justify-content: flex-end;
align-items: flex-end;
text-align: right;
    }

}

.bg-light, .navbar-toggler{
    border: none!important;
    outline: none!important;
}

/* Home */
#home{
    background-image: url("./../assets/back.jpg");
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: top center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
#home span {
    color: coral;
}
#home .button {
    font-size: 0.8rem; 
    margin-left: 10%;
    padding: 13px 30px;
    border-radius: 30px;
    font-weight: 500;
    background-color: #1d1d1d;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;

}
#home .button a {
    text-decoration: none;
    color: aliceblue;
    transition: 0.3s;
}
 #home .button:hover a{
    text-emphasis-color: rgb(240, 241, 255) !important;
} 
#home .button:hover {
    box-shadow: 0 0 8px black;
    
    scale: 1.1;
}

/* NEW */
#new .one img{
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
#new .one .detail{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: 0.3s ease;
}
#new .one:hover .detail{
    cursor: pointer;
    background-color: rgba(245, 178, 178, 0.7);
}

#new .one:nth-child(1) .detail{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
}
#new .one:nth-child(2) .detail{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#new .one:nth-child(3) .detail{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
}
#new .one button:nth-child(1){
    left: 50%;
}
#new .one button{
    background: transparent;
    
    outline: none;
    border: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #2a2a2a;
    text-transform: uppercase;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 2.5px;
    transform: translateY(70px);
    transition: 0.3s ease;
}

#new button:hover {
    text-decoration: dotted;
    text-shadow: 0 0 8px black;
    color:#fff;
    border-bottom: 1px solid #fff;

}

/* Feacture */

#feacture .product{
    cursor: pointer;
  
}
#feacture hr {
    width: 30px;
    height: 2px;
    border-top: none;
    background-color: #fb774b;
    opacity: 1;
}
#feacture .stars{padding: 10px 0;}
#feacture .stars i{
    font-size: 1rem;
} 
#feacture .stars i:hover{
    background-color: goldenrod;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    scale: 1.2;
}
#feacture .product  button{
    background: #fb774b; 
    outline: none;
    border: none;
   transform: translateY(20px);
   opacity: 0;
    color: white;
    text-transform: uppercase;
    transition: 0.3s all;
    padding: 5px;   
    transition: 0.3s ease;
}

#feacture .product:hover button {
  
    transform: translateY(0);
    box-shadow: 0 0 15px black;
    color:aliceblue;
    opacity: 1;
}
#feacture .product img{
    transition: 0.3s all;
}
#feacture .product img:hover{
    opacity: 0.7;
}

/* Bannar */

#banner{
    background-image: url("./../assets/banner/2.jpg");
    width: 100%;
    height: 60vh;
    background-size: cover;
    background-position: top 70px center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
#banner h1{
    color: #fff;
}
#banner h4{
    color: #d8d8d8;
}

#banner .container button{
    background: #fb774b; 
    outline: none;
    border: none;
   transform: translateY(20px);
   
    color: white;
    text-transform: uppercase;
    transition: 0.3s all;
    padding: 5px;
}

/* Clothes */

#clothes .product{
    cursor: pointer;
  
}
#clothes hr {
    width: 30px;
    height: 2px;
    border-top: none;
    background-color: #fb774b;
    opacity: 1;
}
#clothes .stars{
    padding: 10px 0;
}
#clothes .stars i
 {
    font-size: 1rem;


} 
#clothes .stars i:hover{
    background-color: goldenrod;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    scale: 1.2;
}
#clothes .product  button{
    background: #fb774b; 
    outline: none;
    border: none;
   transform: translateY(20px);
   opacity: 0;
    color: white;
    text-transform: uppercase;
    transition: 0.3s all;
    /* border-bottom: 1px solid #2a2a2a; */
    padding: 5px;
   
    transition: 0.3s ease;
}

#clothes .product:hover button {
  
    transform: translateY(0);
    box-shadow: 0 0 15px black;
    color:aliceblue;
    opacity: 1;
}
#clothes .product img{
    height: 50vh;
    transition: 0.3s all;
}
#clothes .product img:hover{
    opacity: 0.7;
}

/* Watches */

#watches .product{
    cursor: pointer;
  
}
#watches hr {
    width: 30px;
    height: 2px;
    border-top: none;
    background-color: #fb774b;
    opacity: 1;
}
#watches .stars{
    padding: 10px 0;
}
#watches .stars i{
    font-size: 1rem;


} 
#watches .stars i:hover{
    background-color: goldenrod;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    scale: 1.2;
}
#watches .product  button{
    background: #fb774b; 
    outline: none;
    border: none;
   transform: translateY(20px);
   opacity: 0;
    color: white;
    text-transform: uppercase;
    transition: 0.3s all;
    padding: 5px;   
    transition: 0.3s ease;
}
#watches .product:hover button {
  
    transform: translateY(0);
    box-shadow: 0 0 15px black;
    color:aliceblue;
    opacity: 1;
}
#watches .product img{
    height: 50vh;
    transition: 0.3s all;
}
#watches .product img:hover{
    opacity: 0.7;
}

/* Shoes*/

#shoes .product{
    cursor: pointer;
}
#shoes hr {
    width: 30px;
    height: 2px;
    border-top: none;
    background-color: #fb774b;
    opacity: 1;
}
#shoes .stars{padding: 10px 0;}
#shoes .stars i
 {
    font-size: 1rem;
} 
#shoes .stars i:hover{
    background-color: goldenrod;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    scale: 1.2;
}
#shoes .product  button{
    background: #fb774b; 
    outline: none;
    border: none;
   transform: translateY(20px);
   opacity: 0;
    color: white;
    text-transform: uppercase;
    transition: 0.3s all;
    padding: 5px;
    transition: 0.3s ease;
}

#shoes .product:hover button {
  
    transform: translateY(0);
    box-shadow: 0 0 15px black;
    color:aliceblue;
    opacity: 1;
}
#shoes .product img{
    height: 50vh;
    transition: 0.3s all;
}
#shoes .product img:hover{
    opacity: 0.7;
}

/* Footer */
#footer{
    background-color: #222222;
}
#footer h5{
    color: #d8d8d8;
    font-weight: 700;
    font-size: 1.2rem;
}
#footer li{
    padding-bottom: 4px;
}
#footer li a{
    font-size: 0.8rem;
    color: #999;
    text-decoration: none;
}
#footer li a:hover{
    text-decoration: underline;
    color: #d8d8d8;
}
#footer p{
    color: #999;
    }
#footer .copyright a{
    color: #000;
    width: 38px;
    height: 38px;
    background-color: #fff;
    display: inline-block;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    transition: 0.3s ease;
    margin: 0 5px;
}

#footer .copyright a:hover{
    color: #fff;
    background-color: #fb774b;
}

/* Shop */

#shop .product{
    cursor: pointer;
  
}
#shop hr {
    width: 30px;
    height: 2px;
    border-top: none;
    background-color: #fb774b;
    opacity: 1;
}
#shop .stars{padding: 10px 0;}
#shop .stars i{
    font-size: 1rem;
} 
#shop .stars i:hover{
    background-color: goldenrod;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    scale: 1.2;
}
#shop .product  button{
    background: #fb774b; 
    outline: none;
    border: none;
   transform: translateY(20px);
   opacity: 0;
    color: white;
    text-transform: uppercase;
    transition: 0.3s all;
    padding: 5px;   
    transition: 0.3s ease;
}

#shop .product:hover button {
  
    transform: translateY(0);
    box-shadow: 0 0 15px black;
    color:aliceblue;
    opacity: 1;
}
#shop .product img{
    height: 300px;
    transition: 0.3s all;
}
#shop .product img:hover{
    opacity: 0.7;
}
#shop > div.row.mx-auto.container > nav > ul > li.page-item.active > a{
    background-color: #000;
    color:#fff
}
#shop > div.row.mx-auto.container > nav > ul > li.page-item>a:nth-child(n):hover{
    background-color: #fb774b;
    color: #000;

}

/* Detail */
.dproduct .small-img-col{
    flex-basis: 24%;
    cursor: pointer;
}
.dproduct select{
    display: block;
    padding: 5px 10px;
}
.dproduct input{
    width: 50px;
    height: 40px;
    padding-left: 10px;
    font-size: 16px;
    margin-right: 10px;
}
.dproduct input:focus{
    outline: none;
}
.dproduct .buy-btn{
    background: #fb774b; 
    outline: none;
    border: none;
    color: white;
    text-transform: uppercase;
    transition: 0.3s all;
    padding: 10px;   
    transition: 0.3s ease;
}
.dproduct .buy-btn:hover{
    box-shadow: 0 0 15px black;
}
/* Blogs */

#blog-h hr{
    width: 30px;
    height: 2px;
    border-top: none;
    background-color: #fb774b;
    opacity: 1;
}
#blog-container .post .post-img{
    overflow: hidden;
    cursor: pointer;
}
#blog-container .post img{
transition: 0.3s ease;
}
#blog-container .post:hover img{
    transform: scale(1.3) rotate(-10deg);
    opacity: 0.8;
}
#blog-container .post:hover h3{
    transition: 0.3s ease;
}
#blog-container .post:hover h3{
    color: coral;
}
#blog-container .ban-img img{
    border-radius: 50px;
}
#blog-container .col-lg-4 img{
    height: 50vh;
    border-radius: 50px;
}
#blog-container .post:hover h4{
    transition: 0.3s ease;
}
#blog-container .post:hover h4{
    color: coral;
}

/* About */
.card
{
    width: 100% !important; 
    background-color: transparent !important; 
    border: none !important;
}
 .cart img{
    width: 50%;
    height: 50vh;
    object-fit: cover;
    object-position: center;
 }
#card-a hr,
#card-f hr{
    width: 30px;
    height: 2px;
    border-top: none;
    background-color: #fb774b;
    opacity: 1;
}

/* Contact */
#contact-h hr, #contact-e hr{
    width: 30px;
    height: 2px;
    border-top: none;
    background-color: #fb774b;
    opacity: 1;
}
#contact-e  button{
    background: #fb774b; 
    outline: none;
    border: none;
    color: white;
    text-transform: uppercase;
    transition: 0.3s all;
    padding: 10px;   
    transition: 0.3s ease;
}
#contact-e  button:hover{
    box-shadow: 0 0 15px black;
}
#contact-e  textarea{
    resize: none;

}
#contact-e textarea:focus{
    outline: none;
}


/* Cart */

#cart-h hr{
    width: 30px;
    height: 2px;
    border-top: none;
    background-color: #fb774b;
    opacity: 1;
}
#cart-cont table{
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
#cart-cont table thead{
    font-weight: 700;
}
#cart-cont table thead td{
    background: #fb774b;
    color: #fff;
    border: none;
    padding: 6px 0;
}
#cart-cont table td{
    border: 1px solid black;
    text-align: center;
}
#cart-cont table td:nth-child(1){
    width: 100px;
}
#cart-cont table td:nth-child(2), #cart-cont table td:nth-child(3) {
    width: 200px;
}

#cart-cont table td:nth-child(3),#cart-cont table td:nth-child(4),
#cart-cont table td:nth-child(5),#cart-cont table td:nth-child(6){
    width: 170px;
}

#cart-cont table td img{
    width: 100px;
    height: 80px;
    object-fit: cover;
}
#cart-cont table td i{
    color: #8d8c89;
    transition: 0.1s ease;
}
#cart-cont table td i:hover{
    color: red;
    scale: 1.1;
    }
#cart-b .coupon .div{
    border: 1px solid #b6b3b3;
}
#cart-b .coupon p,
#cart-b .coupon input{
padding: 0 12px;
}
#cart-b .total .div{
    border: 1px solid #b6b3b3;
}
#cart-b .coupon h5,
#cart-b .total h5{
    color: #fff;
    background: #fb774b;
   border: none;
   padding: 6px 12px;
   font-weight: 700;
    
}
#cart-b .total h6{
 color: black !important;
    
}
#card-b hr{
    width: 100%;
    height: 1px;
    opacity: 1;
}
#cart-b  button{
    background: black; 
    outline: none;
    border: none;
    color: white;
    text-transform: uppercase;
    transition: 0.3s all;
    padding: 10px;   
    transition: 0.3s ease;
}
#cart-b .coupon input{
    height: 44px;
}

#cart-b .coupon input{
   margin: 0 0 20px 12px;
}
#cart-b .total div>div{
    padding:  0 12px;
}
#cart-b .total div>.btn-c{
margin: 0 12px 20px 0;
display: flex;
justify-content: flex-end;
}