@font-face {
    font-family: 'Acta Display Book';
    src: url('../font/Acta Display Book.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Metropolis-Black';
    src: url('../font/Metropolis-Black.otf');
    
}

.section_HomepageTop {
    background: url(../images/HomePage2024/HomePage_bg.png) no-repeat #b4a0e6;
    background-position: center 80px;
    background-size: cover;
    height: 700px;
}

.HomepageTop-textbox {
    height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left:12%
}
    .HomepageTop-textbox div {
        color: #fff;
        font-family: 'Acta Display Book';
        font-size:65px;
        line-height:55px;
    }
    .HomepageTop-textbox .small {
        font-family: Metropolis;
        color: #fff;
        font-size: 26px;
    }
.section_slider {
    margin-top: 50px
}

.HPheading-1 {
    font-family: 'Metropolis-Black';
    color: #000;
    font-size: 28px;
}
.HPheading-1.bolder {
    color: #000;
    font-weight:bolder
}
.HPparagraph-1 {
    color: #000;
    font-size: 16px;
}
    .HPparagraph-1.purple.bolder {
        font-family: 'Metropolis-Black';
    }
    .HPparagraph-1.purple {
        color: #9479d7;
        font-size: 20px;
    }


.section_productsseries{
    padding-top:30px;
    margin:0px 0 40px 0;

}
.products-series {
    display: flex;
    justify-content: space-around;
}

.products-series ._SkinCare {
    background: url(../images/HomePage2024/_SkinCare.png) no-repeat;
}
.products-series ._Hair {
    background: url(../images/HomePage2024/_Hair.png) no-repeat;
}
    .products-series ._Mental {
        background: url(../images/HomePage2024/_Mental.png) no-repeat;
    }
    .products-series ._Health {
        background: url(../images/HomePage2024/_Health.png) no-repeat;
    }
    .products-series .sbg {
        background-size: contain;
        text-align: center;
        height: 260px;
    }
    .products-series .title {
        font-weight:600;
        padding-top:25px;
        text-align:center
    }
    .products-series .small {
        text-align: center;
        width: 200px;
        font-size:10px;
        line-height:13px;
        padding:5px 20px;
    }

.BtnDiscover {

    margin-top:10px;
    background: #c7bdff;
    border-radius: 30px;
    padding: 10px 15px;
    color: #000;
    font-size:11px;
    font-weight:600;
}

.section_toppicks {
    padding: 40px;
}
    .section_toppicks h1 {
        color: #000;
        font-family: 'Acta Display Book';
        font-size: 30px;
        padding-bottom: 20px;
    }

#toppicks-slider .owl-wrapper {
    padding: 0 0px;
}
#toppicks-slider {
    height:230px;
}

#toppicks-slider .owl-controls {
    top: 10%;
    padding:0;
    margin:0;
}

    #toppicks-slider .owl-controls .owl-buttons .owl-prev {
      left:-10px;
        background-image: url(../images/HomePage2024/prev-button.png) !important;

    }

    #toppicks-slider .owl-controls .owl-buttons .owl-next {
        right:-10px;
        background-image: url(../images/HomePage2024/next-button.png) !important;
    }

.toppicks img{
    width: 200px;
    padding:0 20px;
}
.toppicks p {
    color: #000;
    width: 200px;
    padding:0 0px;
    text-align: center
}

.toppicks-product {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

    .toppicks-product img {
        width: 180px;
        padding: 0 15px;
    }

    .toppicks-product p {
        color: #000
    }

.BtnShopNow {
    border: #000 solid 0.6px;
    padding: 10px 30px;
    text-align: center;
    color: #000
}

    .BtnShopNow:hover {
        background: #f3f3f3;
        color: #333
    }


.section_HomepageBottom {
    background: #f3f3f3;
}
.section_HomepageBottom h1 {
    font-family: 'Metropolis-Black';
    text-align: center;
    font-size: 20px;
    padding: 30px 0 15px 0;
    color: #000;
    margin:0
}
.section_HomepageBottomMember{
    margin-top:-10px;
    margin-bottom:20px;
}
.Become {
    background: url(../images/HomePage2024/SignUp.png) no-repeat;
    background-size: contain;
    text-align: center;
    height: 200px;
}
    .Become h2 {
        color: #fff;
        font-family: 'Acta Display Book';
        font-size: 36px;
        line-height: 40px;
        padding: 15px 0 5px 0;
        text-align: center
    }
    .Become .btnsignup {
    background: #c7bdff;
    border-radius: 30px;
    padding: 5px 15px;
    color: #000;
    font-size: 11px;
    font-weight: 600;
    }

.Exclusive {
    background: #b6b2f0;
    padding:20px 25px;
    border-radius:25px;
    margin-top:20px;
}
    .Exclusive h1 {
        text-align:center;

        color: #fff;
    }
.reward {
    display: flex;
    padding: 20px;
    justify-content: space-evenly;
}
.Exclusive-icon {
    display: flex;
    padding:10px 20px;
    

}
.Exclusive-icon img {
    padding: 10px;
    width:100%;
}
.payment-icon {
    display: flex;
    padding: 10px 20px;
    justify-content: space-around;
}
}
    .payment-icon div {
        padding: 0px 0px 0px 0px;
        width: 130px;
    }

    .payment-icon img {
        width: 100%;
    }
.atomeimg{
    background:#ededed;
    margin:15px 0 ;
    border-radius:25px;;
}
.footer_top_part {
    background-color: #b6b2f0 !important
}
.footer_top_part{
    color:#fff
}

    .footer_top_part h1 {
        color: #fff;
        font-family: 'Acta Display Book';
        font-size: 22px;
    }
.WhatsApp{
    width:50%
}
.WhatsApptel {
    font-size: 14px;
    padding-top:10px;
}
.footer-link li {
     padding-bottom: 4px;
}
.copyright{
    font-size:9px;
    text-align:center;
    color:#60269e;
}
.footer_top_part .footerlogo {

    background: url(../images/HomePage2024/maelogo-white.png) no-repeat;
    background-position: right 0px;
    background-size: 130px;
    height: 80px;
}
@media only screen and (max-width: 780px) {
    .section_HomepageTop {
        background-position: center 80px;
        background-size: contain;
        height: 400px;
    }

    .HomepageTop-textbox {
        height: 500px;
        margin-left: 5%
    }
        .HomepageTop-textbox div {
            font-size: 40px;
            line-height: 35px;
        }
        .HomepageTop-textbox .small {
            font-size: 18px;
        }

    .products-series .sbg {
        height: 230px;
        margin:0 5px;
    }
    .products-series .small {
        width: 180px;
        padding: 5px 10px;
    }


    .toppicks-product img {
        width: 150px;
        padding: 0 10px;
    }
    .toppicks-product p {
        color: #000;
        font-size:11px;
    }

        #toppicks-slider .owl-controls{
            display:block !important
        }
            #toppicks-slider .owl-controls .owl-buttons .owl-prev {
                left: -25px;
                width: 30px !important;
                height: 64px !important;
            }

            #toppicks-slider .owl-controls .owl-buttons .owl-next {
                right: -25px;
                width: 30px !important;
                height: 64px !important;
            }

    .toppicks img {
        width: 200px;
        padding: 0 15px;
    }

    .toppicks p {
        width: 220px;
    }
    .Become{
        height:120px;
    }
        .Become h2 {
            font-size: 24px;
            line-height: 26px;
            padding: 10px 0 0px 0;
        }
    .Exclusive {
        background: #b6b2f0;
        padding: 5px 0px 0 0;
    }

        .Exclusive h1 {
            font-size: 21px;
        }
    .Exclusive-icon {
        display: flex;
        padding: 0px 10px;
        justify-content: space-around;
    }
        .Exclusive-icon img {
            padding: 5px 10px 15px 10px;
        }

    .payment-icon div {
        padding: 5px 10px 15px 10px;
        width:150px;
    }

    .WhatsApp {
        width: 80%;
    }
    .footer-link li {
        padding-bottom: 0px;

    }
}

@media only screen and (max-width: 440px) {

    .section_slider {
        margin-top: 20px;
    }


    .section_HomepageTop {
        background-position: center 90px;
        background-size: contain;
        height: 300px;
    }

    .HomepageTop-textbox {
        height: 400px;
        margin-left: 4%
    }

        .HomepageTop-textbox div {
            font-size:24px;
            line-height: 26px;
        }

        .HomepageTop-textbox .small {
            font-size: 12px;
        }

        .section{
            margin:20px 0
        }
    .HPheading-1 {
        font-size: 16px;
    }

    .HPparagraph-1 {
        font-size: 9px;
    }

        .HPparagraph-1.purple {
            font-size: 12px;
        }
    .section_productsseries{
        padding:0
    }
    .products-series {
        justify-content: space-evenly;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .products-series .sbg {
        height:260px;
        margin:20px 0 0px 0px;
    }

    .products-series .small {
        width: 200px;
        padding: 5px 10px;
    }
    .BtnDiscover{
        margin-bottom  :10px;
    }

    .section_toppicks{
        padding:0 0 20px 0
    }
    #toppicks-slider .owl-controls{
        top:50px;
    }

        #toppicks-slider .owl-controls .owl-buttons .owl-prev {
            left: -10px;
            background-size: 70% !important;
            background-repeat: no-repeat !important;
        }

        #toppicks-slider .owl-controls .owl-buttons .owl-next {
            right: -10px;
            background-size: 70% !important;
            background-repeat: no-repeat !important
        }
    #toppicks-slider {
        height: 200px;
    }
    .toppicks img {
        width: 90%;
        padding: 0 20px;
    }

        .toppicks p {
            width: 100%;
        }

    .toppicks-product {
        flex-wrap: wrap;
    }

    .toppicks-product img {
        width: 200px;
        padding: 0 20px;
    }

    .toppicks-product p {
        color: #000;
        font-size: 11px;
    }
    .section_HomepageBottom h1 {
        font-size: 14px;
        padding: 20px 0 5px 0;
    }
    .reward {
        padding: 0px;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: center;
        align-items: center;
        justify-content: space-evenly;
    }
    
    .reward div {
        width:80px;
    }

    .Become {
        height: 120px;
        background-size:cover;
        margin-bottom:10px
    }

        .Become h2 {
            font-size: 21px;
            line-height: 23px;
            padding: 15px 0 0px 0;
        }

    .Exclusive {
        background: #b6b2f0;
        padding: 5px 0px 15px 0;
    }

        .Exclusive h1 {
            font-size: 21px;
        }

.Exclusive-icon {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-evenly;
}
    .Exclusive-icon div {
        width: 120PX;
        padding:0  10px ;
        text-align:center
    }
    .Exclusive-icon img {
        width: 100%;
    }
    

.payment-icon {
    align-items: center;
    padding:0;
}
    .payment-icon div {
        padding: 0px 0px 0px 0px;
        width: 40px;
    }
    .payment-icon img {
        width: 40PX;
    }

.atomeimg{
    padding:0 0PX;
    border-radius:15px;
  
}
.atomeimg img {
    padding: 0 0PX;

}


.footer_top_part h1 {
    font-size: 18px;
}

    .WhatsApp {
        width: 100%;
    }

    .footer-link li {
        padding-bottom: 0px;
    }
    .footer_top_part {
        font-size: 10px;
    }
        .footer_top_part .footerlogo {
            background: url(../images/HomePage2024/maelogo-white.png) no-repeat;
            background-position: 90% 5px;
            background-size: 100px;
            height: 60px;
        }
        .footer_top_part i {
            font-size: 21px!important;
        }
    .copyright {
        font-size: 8px;
        padding-top: 10px;
    }
}




@media only screen and (max-width: 390px) {
    .section_HomepageTop {
        height: 280px;
    }

    .HomepageTop-textbox {
        height: 360px;
        margin-left: 3%
    }

        .HomepageTop-textbox div {
            font-size: 23px;
            line-height: 24px;
        }

        .HomepageTop-textbox .small {
            font-size: 12px;
        }

    .section {
        margin: 20px 0
    }

    .HPheading-1 {
        font-size: 14px;
        line-height:14px;
    }

    .HPparagraph-1 {
        font-size: 8px;
        line-height: 8px;
    }

        .HPparagraph-1.purple {
            font-size: 10px;
        }


        .products-series .sbg {
            height: 390px;
            margin: 20px 0 0px 0px;
        }

    .products-series .title {
        font-size:28px;
        text-align: center;
    }
    .products-series .small {
        width: 300px;
        font-size: 16px;
        line-height:22px;
        padding:5px 30px;
    }


    .BtnDiscover {
        font-size:18px;
        margin-bottom: 0px;
    }

    .section_toppicks {
        padding: 0 0 20px 0
    }

    #toppicks-slider .owl-controls {
        top: 50px;
    }

        #toppicks-slider .owl-controls .owl-buttons .owl-prev {
            left: -10px;
            background-size: 50% !important;

        }

        #toppicks-slider .owl-controls .owl-buttons .owl-next {
            right: -20px;
            background-size: 50% !important;
        }

    #toppicks-slider {
        height: 190px;
    }

    .toppicks img {
        width: 100%;
        padding: 0 20px;
    }

    .toppicks p {
        width: 100%;
    }

    .toppicks-product {
        flex-wrap: wrap;
    }

        .toppicks-product img {
            width: 200px;
            padding: 0 20px;
        }

        .toppicks-product p {
            color: #000;
            font-size: 11px;
        }


    .section_HomepageBottom h1 {
        font-size: 12px;
        padding: 20px 0 5px 0;
    }


    .footer_top_part h1 {
        font-size: 16px;
        padding-top: 10px;
    }

    .WhatsApp {
        width: 90%;
    }

    .WhatsApptel {
        font-size: 12px;
        padding-top: 10px;
    }

    .footer-link li {
        padding-bottom: 0px;
    }
        .footer-link li a {
            padding-bottom: 0px;
            font-size: 9px;
        }

    .footer_top_part {
        font-size: 9px;
    }

        .footer_top_part .footerlogo {
            background: url(../images/HomePage2024/maelogo-white.png) no-repeat;
            background-position: 90% 10px;
            background-size: 90px;
            height: 60px;
        }

        .footer_top_part i {
            font-size: 21px !important;
        }

    .copyright {
        font-size: 7px;
        padding-top: 10px;
    }
}



@media only screen and (max-width: 330px) {
    .section_HomepageTop {
        height: 240px;
    }

    .HomepageTop-textbox {
        height: 300px;
    }

        .HomepageTop-textbox div {
            font-size: 21px;
        }

    .section {
        margin: 0px 0
    }

    .payment-icon {
        justify-content: center;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

        .payment-icon div {
            width: 60px;
        }

        .payment-icon img {
            width:60PX;
        }

}