h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{font-family:title-font;}
#homeBanner{
    background: url("/images/home_page/banner_bg.jpg") no-repeat top center;
    background-size: cover;
    text-align: center;
    padding: 150px 0;
    position: relative;
    overflow: hidden;
}
#homeBanner:before{
    content: "";
    position: absolute;
    height: 110px;
    background-color: white;
    top: -60px;
    left: -50px;
    right: -50px;
    transform: rotate(-3deg);
    z-index: 0;
}
#homeBanner:after{
    content: "";
    position: absolute;
    height: 110px;
    background-color: var(--very-light-gray);
    bottom: -60px;
    left: -50px;
    right: -50px;
    transform: rotate(-3deg);
    z-index: 0;
}
#homeBanner a{
    direction: ltr;
    display: inline-block;
    border: none;
    background-image: linear-gradient(to right, var(--master-green) 0%, var(--master-yellow) 100%);
    color: white;
    padding: 0 30px;
    margin-top: 50px;
}
#homeBanner .code{
    font-size: 25px;
}
#homeBanner .number{
    font-size: 40px;
    font-weight: bold;
}
#homeBanner i{
    font-size: 65px;
    transform: rotate(-35deg) translateY(-2px) translateX(2px);
    margin-right: 20px;
    color: var(--master-yellow);
    transition: color .3s linear;
}
#homeBanner i:after{
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    left: 28px;
    top: -6px;
    z-index: -1;
    border-radius: 6px 50px 0 0;
    transform: rotate(36deg);
    background-image: linear-gradient(to right, var(--master-green) 0%, #47b088 100%);
}
#homeBanner a:hover i{
    color: white;
    transition: color .3s linear;
}
#features .icon{
    width: 70px;
    height: 70px;
}
@media (max-width: 575px) {
    .reseller-banner{
        margin-left: 0;
        margin-right: 0;
    }
}
.reseller-banner:before{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 150px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #ffffff1a;
    clip-path: polygon(13% 0, 100% 0, 100% 100%, 0% 100%);
    transition: width .3s ease-in;
}
@media (max-width: 389px) {
    .reseller-banner:before{
        width: 118px;
    }
}
.reseller-banner:hover:before{
    width: 800px;
}
.reseller-banner>div:first-child{
    background-repeat: no-repeat;
    background-position: center center;
    clip-path: polygon(13% 0, 100% 0, 100% 100%, 0% 100%);
}
.reseller-banner.bg-yellow>div:first-child{
    background-color: #f6b618fa;
    background-image: url("/images/home_page/seller-banner-yellow-bg.png");
    background-size: contain;
}
.reseller-banner.bg-green>div:first-child{
    background-color: #1ea4a8;
    background-image: url("/images/home_page/seller-banner-green-bg.png");
    background-size: contain;
}
#productsCategories{
    /*background: url("/images/home_page/products_category_bg.jpg") no-repeat 118% center;*/
    overflow: hidden;
    position: relative;
    padding-bottom: 150px;
}
#productsCategories a{
    box-shadow: #dcdcdc 0px 1px 5px 1px;
    transition: all .2s linear;
}
#productsCategories a:hover{
    background-color: var(--master-green);
    box-shadow: #b7b7b7 0px 3px 9px 3px;
    transform: translateY(-3px);
    transition: all .2s linear;
}
#productsCategories .cat-image{
    width: 67px;
    height: 67px;
    padding: 1px 1px 0 0;
    background-image: linear-gradient(to bottom, var(--master-green), var(--master-yellow));
    transition: all .2s linear;
}
#productsCategories .cat-image>*{
    width: 65px;
    height: 65px;
    background-color: white;
    padding: 12px;
    transition: all .2s linear;
}
#productsCategories a:hover .cat-image,
#productsCategories a:hover .cat-image>div{
    background: white;
    transition: all .2s linear;
}
#productsCategories a:hover i,
#productsCategories a:hover h2{
    color: white;
    transition: all .2s linear;
}
#SendShoppingList{
    transform: rotate(-3deg);
    margin-bottom: 55px;
    position: relative;
}
#SendShoppingList:before{
    content: "";
    position: absolute;
    left: -20px;
    right: -20px;
    top: 0;
    bottom: 0;
    background: url("/images/home_page/sms_newsletter_bg.jpg") no-repeat center center;
    background-size: cover;
}
#SendShoppingList>div{
    background-color: #000000e0;
    padding: 100px 0;
    margin: 0 -20px;
}
#SendShoppingList .container{
    transform: rotate(3deg);
}
#whatsAppBtn{
    background-color: #25d36630;
    transition: all linear .3s;
}
#whatsAppBtn:hover{
    background-color: #25d366;
}
#telegramBtn{
    background-color: #179cde30;
    transition: all linear .3s;
}
#telegramBtn:hover{
    background-color: #179cde;
}
input.subbutton.joomsms_button{
    display: block;
    width: 100%;
    padding: 15px 0;
    cursor: pointer;
}
button.joomsms_buttonCountryCode{
    display: none!important;
}
.joomsms_form>input:first-child,
.joomsms_form input.phoneNumberField{
    border-radius: 10px;
    padding: 20px 10px;
    width: 100% !important;
    max-width: 100%!important;
    margin-bottom: 10px;
}
#workTime .calendar{
    width: 70px;
    height: 70px;
    background: #EFEFEF;
}
#contactInfo{
    background: #EFEFEF;
}
#contactInfo .phone-icon{
    font-size: 6rem;
}
#contactInfo .phone-icon>i{
    transform: rotate(-38deg);
}
#contactInfo .call-info>a{
    font-size: 2.5rem;
}
#contactInfo .call-info>p{
    font-size: 1.4rem;
}
#mapWrapper{
    width: 720px;
    left: 15px;
    position: absolute;
}
#experience{
    position: absolute;
    width: 300px;
    height: 300px;
    bottom: 20px;
    left: 0;
    z-index: 9;
}
#experience:before{
    content: "";
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: white;
    bottom: 10px;
    left: 15px;
    position: absolute;
    box-shadow: #0000002e 1px 2px 11px 1px;
}
#experience>div{
    box-shadow: #00000024 3px 2px 5px 4px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 1;
}
#contactFormWrapper{
    background-color: #F3F3F3;
    border-radius: 10px;
}
@media (max-width: 1399px) {
    #mapWrapper{
        width: 630px;
    }
    #experience{
        left: -60px;
    }
    #contactInfo .phone-icon {
        font-size: 5rem;
    }
}
@media (max-width: 1199px) {
    #mapWrapper{
        width: 510px;
    }
    #contactInfo .phone-icon{
        font-size: 3rem;
    }
    #experience{
        width: 260px;
        height: 260px;
        left: -50px;
        bottom: 20px;
    }
    #contactInfo .call-info>a{
        font-size: 2rem;
    }
    #contactInfo .call-info>p{
        font-size: 1.2rem;
    }
}
@media (max-width: 991px) {
    #mapWrapper{
        width: 100%;
        position: unset;
    }
    #experience{
        width: 300px;
        height: 300px;
        left: 0;
        bottom: 20px;
    }
}
@media (max-width: 767px) {
    #experience{
        width: 230px;
        height: 230px;
        bottom: 40px;
    }
}
@media (max-width: 575px) {
    #experience{
        width: 100%;
        height: unset;
        position: unset;
    }
    #experience:before{
        display: none;
    }
    #experience>div{
        border-radius: 1rem;
        height: unset;
        box-shadow: none;
    }
    #contactInfo .phone-icon {
        font-size: 2.5rem;
    }
}
#faq .card-body{
    color: var(--medium-gray);
    font-size: 15px;
}
#faq .faq-row{
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: #00000026 0 1px 5px;
    border-right: 2px var(--master-green) solid;
    overflow: hidden;
}
.faq-header button{
    font-size: inherit;
}
.faq-header button:before{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--medium-gray);
    display: inline-block;
    margin-left: 10px;
}
.faq-header button:after{
    content: "\f068";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    color: var(--medium-gray);
    float: left;
    transform: translateY(3px);
}
.faq-header button.collapsed:after{
    content: "\f067";
}
.faq-row .btn:not(.collapsed) ,.faq-row .collapse.show{
    background-color: white;
}

#brands{
    background: var(--gray) url("/images/home_page/email_newsletter_bg.png") no-repeat bottom center;
    background-size: contain;
    overflow: hidden;
    position: relative;
}
#brands:before{
    content: "";
    position: absolute;
    height: 200px;
    background-color: var(--very-light-gray);
    top: -148px;
    left: -50px;
    right: -50px;
    transform: rotate(-3deg);
    z-index: 0;
}

.latestArticles .articles-image{
    border-radius: 10px;
    overflow: hidden;
}
#knowledgeWrapper{
    background-color: #F6F6F6;
    padding: 30px;
    box-shadow: #0000001f 0 0 15px;
}
.newsflash>.row{
    background-color: var(--very-light-gray);
    padding: 5px 15px;
    border-radius: 10px;
    border-right: 1px var(--master-green) solid;
}
#sp-footer1:before{
    background-color: white;
}