@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    --white:white;
    --grey:#b3b3b3;
    --nav-clr:#fffffff0;
    --hero-h3:'Libre Baskerville', serif;
    --font1:'Mulish', sans-serif;
}
*{
    font-size: 16px;
    font-family: var(--font1);
}
img{
    width: 100%;
    height: 100%;
}

.wrapper{
    overflow: hidden;
}
/*Navigation*/
.mob-nav{
    text-align: end;
}
.mob-nav a{
    padding:10px 0;
    color: black;
}
.mob-nav .navbar-links{
    background-color: var(--nav-clr);
    top: 85px;
}
.navlogo{
    letter-spacing: 0.3em;
    font-size: 0.9em;
    font-weight: bold;
}
header{
    background-color: var(--nav-clr);
    z-index: 1;
}
.mob-nav i{
    font-size: 1.5em;
}
.navbar-links a{
    font-size: .9em;
    font-weight: bold;
    transition: .5s;
}

.navbar-links a:hover{
    margin-top:10px;
}

.navbar-links i{
    font-size: 1em;
    margin-left: 0.6em;
}
.navbar-links{
    width: 100vw;
}
.navicons{
    width: 125px;
}
.navicons sup{
    margin-left: 6px;
}
/*Hero Section*/
.hero-section{
    background-image: url(../images/background/hero-sec-back.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
}
.hero-sec-content h3{
    font-weight: 700;
    font-family: var(--hero-h3);
    margin-bottom: 30px;
}

.hero-span{
    font-family: var(--hero-h3);
    color:black;
}

.hero-sec-content-btn a{
    font-size: 1em;
    font-weight: bold;
    padding: 13px 25px;
    border: 2px solid black;
}
.hero-section .container-fluid{
    background: linear-gradient(90deg, rgba(131,58,180,0.7455181901862307) 0%, rgba(253,29,29,0.45420166357558645) 50%, rgba(252,176,69,0.18529410055037643) 100%);
}

/*Hero Section Hover*/
.hero-section a{
    transition: .5s;
}
.hero-section a:hover {
    color: #fff !important;
    background-color: black;
}

/*Features Section*/
.feature-section .row{
    padding: 14px;
}

.feature-section i{
    font-size: 1.2em;
}

.feature-section h3{
    font-family: var(--hero-h3);
    font-size: 0.8em;
    letter-spacing: 0.2em;
}

.feature-section p{
    color: var(--grey);
    font-size: 1em;
    margin: 0 auto;
}

/*sale section*/
.sale-img span{
    font-size: 0.7em;
    letter-spacing: 0.3em;
    padding:0.5em 0;
}

.sale-text h3{
    font-size: 1em;
    margin-top: 20px;
}

.sale-text span{
    font-size: 0.9em;
}

.sale-img{
    overflow: hidden;
}
.sale-img img{
    transition: .5s;
}
.sale-img img:hover{
    transform: scale(1.5);
}

/* .sales figure{
    transition:.5s;
}
.sales figure:hover{
    box-shadow: 0px 0px 30px #b3b3b3;
    transform: scale(1.05);
    border-radius: 20px;
} */

/*week deals*/
.week-deals .row{
    background-image: url(../images/background/deals-back.jpg);
    background-size: cover;
    background-position:center;
    background-attachment: fixed;
    height: 90vh;
}

.week-deals span{
    font-size: 1em;
}

.week-deals h3{
    font-size: 2em;
    font-weight: 800;
    font-family: var(--hero-h3);
}

.week-deals p{
    font-size: 1em;
}

.week-deals a{
    font-size: 0.8em;
}

.week-deals .container{
     width: 90%;
}

/*Popular Items*/
.popular-items h3{
    font-size: 1.5em;
    font-family: var(--hero-h3);
}
.popular-items i{
    border: 2px solid #808080ba;
    color: #808080ba;
}

.r-l-btns{
    width: 70px;
}

.item-txt h3{
    font-size: 0.8em;
    margin-top: 20px;
}
.sale-price{
    font-size: 0.8em;
}

.item-img{
    overflow: hidden;
}

.item-img img{
    transition: .5s;
}

.item-img img:hover{
    transform: scale(1.5);
}

/*hover*/
.r-l-btns i:hover{
    border: 2px soid black;
}

/*Footer*/
footer .col h3{
    font-family: var(--hero-h3);
    font-size: 1.3em;
}

footer a{
    text-decoration: none;
    color:black;
}

footer button{
    font-size: 0.7em;
}

/********* 5 7 6  d e v i c e s ************/
@media(min-width:576px){
    .fea-1{
        max-width: 48.5% !important;
    }        

    .email-updates input{
        width: 400px;
    }
}
/********* 7 6 8  d e v i c e s ************/
@media(min-width:768px){
    .fea-1{
        max-width: 32% !important;
    }
}

/********* 9 9 2  d e v i c e s ************/
@media(min-width:992px){
    .navbar-links{
        width: 500px;
    }
}