@import url('https://fonts.googleapis.com/css2?family=Tajawal&display=swap');

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div,
* {
    font-family: 'tajawal', sans-serif;
    /* font-optical-sizing: auto; */
    font-weight: 400;
    /* font-style: normal;
    font-variation-settings:
      "slnt" 0; */
}
/********** Template CSS **********/

body{
    background: #dccdb4;
    overflow-y: hidden;
}
:root{
    --primary: #6e6354;
    --secondary: #fffbf2;
}

.fs-48{
    font-size: 48px !important;
}
.fs-30{
    font-size: 30px !important;
}
.fs-28{
    font-size: 28px !important;
}
.fs-24{
    font-size: 24px !important;
}
.w-700{
    font-weight: 700 !important;
}

.w-500{
    font-weight: 500 !important;
}
.w-400{
    font-weight: 400 !important;
}

.main-color{
    color: var(--primary);
}

.sec-bg{
    background-color: var(--secondary);
    color: var(--primary) !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .5s;
}


.slider--section{
    background-color: #dccdb4;

    position: relative;
    top: -110px;
}
.cat--section{
    /* background-image: url(../img/products.png); */
    background-size: 101% 101%;
    background: #dccdb4;
    background-position: center;
    background-repeat: no-repeat;

    padding-bottom: 100px;
}

body > section.cat--section > div:nth-child(1) > div.w-50.p-5.position-absolute{
    background-color: #dccdb4 !important;
}
body > section.cat--section > div:nth-child(2) > div.w-50.p-5.position-absolute{
    background-color: #dccdb4 !important;
}
body > section.cat--section > div:nth-child(3) > div.w-50.p-5.position-absolute{
    background-color: #dccdb4 !important;
}
#navbarCollapse > div > a.nav-item.nav-link{
    color: #6e6354;
    font-size: 24px;
    font-weight: 500;
}


.footer{
    /* background-image: url(../img/footer.png); */
    background-size:100% 100%;
    background-position: top  ;
    background-repeat: no-repeat;
    background-color: #dccdb4 !important;

}


@media screen and (max-width: 850px) {
    .fs-24 {
        font-size: 16px !important;
    }
    .fs-48{
        font-size: 28px !important;
    }
    .fs-28{
        font-size: 22px !important;
    }
}