#hero{
    height: calc(100dvh - 208px);
    border-bottom: 22px solid #FEB300;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#hero .inner{
    width: 700px;
    background: #2B2B2B;
    padding: 50px 30px;
    position: absolute;
    bottom: -22px;
    left: 15%;
}

#hero p:first-of-type{
    color: #FEB300;
    font-size: 21px;
    font-weight: 700;
    margin: 0;
}

#hero h1{
    color: #FFFFFF;
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 30px;
}

#hero p{
    color: #FFFFFF;
    margin-bottom: 50px;
}

@media(max-width:1100px){
    #hero .inner{
        left: 50%;
        transform: translatex(-50%);
    }
}

@media(max-width:750px){
    #hero .inner{
        width: 90%;
    }
}

@media(max-width:576px){
    #hero .btn-yellow{
        margin-bottom: 15px;
    }
    
    #hero .btn{
        width: 100%;
    }
    #hero {
        height: 100dvh;
    }
}

#pages{
    padding: 50px 0;
}

#pages .inner{
    background: #2B2B2B
}

#pages .inner img{
    width: 100%;
    height: 386px;
    object-fit: cover;
}

#pages .inner .content{
    padding: 40px 30px;
}

#pages h2 {
    color: #fff;
    font-size: 27px;
    font-weight: 900;
    margin-bottom: 19px;
}

#pages p{
    color: #fff;
}

#pages .row{
    align-items: center;
}

#pages .wrap{
    background: #2B2B2B;
    display: flex;
    align-items: stretch;
}

#pages .wrap:first-of-type{
    margin-bottom: 20px;
}

#pages .left,
#pages .right{
    width: 50%;
}

#pages .right{
    min-height: 100%;
}

#pages .wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#pages .wrap .content{
    padding: 30px 20px;
}

@media(max-width:1200px){
    #pages .wrap{
        flex-direction: column;
    }
    #pages .left,
    #pages .right{
        width: 100%;
    }
    #pages .wrap img{
        height: 386px;
    }
    #pages .wrap .content{
        padding: 40px 30px;
    }
    
}

#popularP{
    padding: 100px 0 150px;
    background-size: cover;
    background-repeat: no-repeat;
}

#popularP h2{
    text-align: center;
    font-size: 36px;
    color: #FFFFFF;
    font-weight: 900;
    margin-bottom: 20px;
}

#popularP p{
    text-align: center;
    color: #fff;
    font-size: 19px;
    font-weight: 300;
}

#popularP .btn{
    margin: 0 auto;
    display: block;
    width: 250px
}

#popularP .click{
    margin-top: 40px;
}

#about{
    overflow: hidden;
}

#about .container-fluid{
    padding: 0;
}

#about img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#about .content{
    padding: 130px 100px;
    background: #F8F8F8;
}

#about .left{
    padding-right: 0;
}

#about .right{
    padding-left: 0;
}

#about .wrap{
    display: flex;
}

#about h2{
    font-size: 36px;
    color: #000000;
    font-weight: 900;
    margin-bottom: 0px;
}

#about .line{
    width: 50px;
    background: #FEB300;
    height: 5px;
    opacity: 1;
    margin: 60px 0;
}

#about .content p{
    color: #000000;
}

#about .c1{
    padding-right: 50px
}

#about .c2{
    padding-left: 50px
}

#about .find{
    background: #2B2B2B;
    border-top: #FEB300 solid 11px;
    padding: 50px 130px 50px 50px;
    display: flex;
    justify-content: space-between;
}

#about .find p{
    margin: 0;
    font-size: 31px;
    font-weight: 900;
    color: #fff;
}

@media(max-width:1600px){
    #about .content{
        padding: 80px;
    }
    
    #about .find{
        padding: 50px 80px 50px 50px;
    }
}

@media(max-width:1400px){
    #about .content{
        padding: 50px;
    }
    #about .find{
        padding: 50px;
    }
}

@media(max-width:1200px){
    #about .content{
        padding: 50px;
    }
    
    #about .content .wrap{
        flex-direction: column;
    }
    
    #about .c1,
    #about .c2{
        padding: 0;
    }
}

@media(max-width:991px){
    #about img{
        width: 100%;
        height: 400px
    }
    #about .right{
        padding-left: calc(var(--bs-gutter-x)* .5);
    }
}

@media(max-width:576px){
    #about .content{
        padding: 50px 15px;
    }
    #about .find{
        padding: 50px 15px;
        flex-direction: column;
    }
    #about .find p{
        margin-bottom: 20px;
    }
}

#values{
    padding: 100px 0 70px;
}

#values .header{
    padding-bottom: 50px;
}

#values h2{
    text-align: center;
    color: #2B2B2B;
    font-size: 36px;
    font-weight: 900;
}

#values .header p{
    text-align: center;
    color: #2B2B2B;
    font-size: 19px;
    font-weight: 300;
}

#values .inner{
    border: 1px solid #FEB300;
    border-radius: 10px;
    padding: 40px 20px;
}

#values img{
    margin: 0 auto 20px;
    display: block;
}

#values h3{
    color: #2B2B2B;
    text-align: center;
    font-size: 25px;
    line-height: 30px;
    margin-bottom: 20px;
}

#values .inner p{
    text-align: center;
    color: #2B2B2B;
    margin: 0;
}

/* ======================================================================================================
PRODUCTS
======================================================================================================*/
#popular_products{
    margin-bottom: -80px;
}
#popular_products .products{
    position: relative;
    top: -80px;
    margin-bottom: 50px;
}
.slick-autoplay-toggle-button{
    display: none;
}
#popular_products .product{
    cursor: pointer;
    padding: 0 10px;
}
#popular_products .product a{
    text-decoration: none;
}
#popular_products .product .inner{
    margin: 0;
    background: #F8F8F8;
    border-radius: 10px;
    padding: 10px 10px 50px;
}
#popular_products .product h3 {
    color: #2B2B2B;
    font-size: 17px;
    line-height: 20px;
    text-align: center;
}
#popular_products .product .content{
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#popular_products .product .line{
    background:#FEB300;
    height: 3px;
    width: 50px;
    margin: 10px 0;
}
#popular_products .product .category p{
    margin: 0;
    color: #2B2B2B;
}
#popular_products .product .price {
    color: #2B2B2B !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    margin: 20px 0 !important;
}
#popular_products .product .image-wrap{
    border: 1px solid #F2EBE3;
    border-radius: 8px;
    margin-bottom: 30px;
    padding: 0;
    position: relative;
}
#popular_products .product a img {
    margin: 0 !important;
    width: 279px !important;
    height: 279px !important;
    object-fit: cover;
}

/* =======================================================
popular_categories
=======================================================*/

#popular_categories {
    margin: -80px 0 50px;
}
#popular_categories .cat {
    padding: 10px;
}
#popular_categories .cat .inner {
    background: #F8F8F8;
    border-radius: 8px;
    display: flex;
    padding: 5px;
}
#popular_categories .cat .inner .left {
    flex: 0 0 50%;
}
#popular_categories .cat img {
    height: 264px;
    width: 264px;
    border-radius: 8px;
}
#popular_categories .right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 40px;
}

#popular_categories h3{
    color: #2B2B2B;
    font-size: 30px;
    line-height: 37px;
    font-weight: 600;
}
#popular_categories .text p{
    color: #2B2B2B;
}

@media(max-width: 991px){
    #popular_categories .cat .inner {
        flex-direction: column;
    }
    #popular_categories .cat .inner .left {
        flex: 0 0 100%;
        margin: 10px auto;
    }
    #popular_categories .right {
        padding-right: 0;
        padding: 10px;
        text-align: center;
    }
}

/* =======================================================
Overide
=======================================================*/
#content{
    overflow-x: hidden;
}