@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
@font-face {
    font-family: 'GE SS';
    src: url('../fonts/arbfonts/arbFonts.com/GE_SS.otf');
    font-weight: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/arbfonts/arbFonts.com/Poppins-Medium.ttf');
    font-weight: bold;
}

/* .font-ar {
    font-family: 'Cairo', sans-serif !important;
}


.font-en {
    font-family: 'Poppins', sans-serif !important;
} */
b, strong {
    font-weight: bold !important;
    }
.font-ar{
    font-family: 'Cairo', sans-serif !important;
    font-weight: 300; 
}

/* for safari browser */
@media not all and (min-resolution: 0.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .font-ar {
            font-weight: 400;
        }
    }
}

#button-3 .knobs:before{content: '';position: absolute;top: 4px;left: 4px;width: 25px;height: 25px;color: #fff;font-size: 10px;font-weight: bold;text-align: center;line-height: 1;padding: 9px 4px;background-color: #fff;border-radius: 50%;transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);}
#button-3 .checkbox:active + .knobs:before{width: 46px;border-radius: 100px;}
#button-3 .checkbox:checked:active + .knobs:before{margin-left: -26px;}
#button-3 .checkbox:checked + .knobs:before{content: '';left: 32px;background-color: #fff;}
#button-3 .checkbox:checked ~ .layer{background-color: #3B88A8;}
.knobs, .layer{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.lang-button{position: relative;width: 65px;height: 33px;margin: -20px auto 0 auto;overflow: hidden;margin: 0;}
.lang-button.r, .lang-button.r .layer{border-radius: 100px;box-shadow: 5px 4px 6px 2px #00000040;}
.checkbox{position: relative;width: 100%;height: 100%;padding: 0;margin: 0;opacity: 0;cursor: pointer;z-index: 3;}
.knobs{z-index: 2;}
.layer{width: 100%;background-color: #d3d3d3;transition: 0.3s ease all;z-index: 1;}
.lang-en-span{
    position: relative;
    top: 3px;
    left: -20px;
    z-index: 1;
    font-size: 13px;
}
.lang-ar-span{
    position: relative;
    top: 3px;
    left: 22px;
    z-index: 4;
    font-size: 13px;
}
.mobile-app-head{
    max-width: 85%;
    margin: 25px auto !important;
}
.mobile-app-logo{
    width: 100px;
}
.mobile-app-main-text-wrapper{
    padding-bottom: 75px;
    padding-top: 25px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 5%, rgba(0,139,176,0.5) 100%);
}
.mobile-app-main-text-welcome{
    color: #3B88A8;
    font-size:26px;
    font-weight: 400;
    margin: 0;
}
.mobile-app-main-text-health{
    color: #3B88A8;
    font-size: 28px;
    font-weight: 600;
}
.mobile-app-main-content-wrapper{
    background-color: white;
    border-radius: 70px;
    position: relative;
    top: -70px;
    background-image: url(../media/Ellipse\ 1.svg);
    background-repeat: no-repeat;
    background-position: top right, bottom left;
    background-size: 175px;
}
.mobile-app-main-content-wrapper .mobile-app-main-content{
    max-width: 100%;
    margin: auto;
    padding-top: 50px;
}
.mobile-app-wellness{
    margin-top: 120px !important;
}
.mobile-app-wellness a{
    background: linear-gradient(180deg, #F3F3F3 0%, #FBFBFB 16.67%, #FFFFFF 52.08%, #FCFCFC 79.17%, #F3F3F3 100%);
    border-radius: 21px;
    padding: 5px 45px;
}
.mobile-app-wellness-personalized-health{
    margin-top: 50px !important;
    /* padding-bottom: 200px;
    background-image: url(../media/Ellipse\ 2.svg),linear-gradient(180deg, rgba(255,255,255,0) 28%, rgba(0,139,176,1) 115%); */
    background-repeat: no-repeat;
    background-position: bottom left, bottom center;
    background-size: 175px, 100%;
}
.mobile-app-wellness-personalized-health a{
    background: linear-gradient(180deg, #F3F3F3 0%, #FBFBFB 16.67%, #FFFFFF 52.08%, #FCFCFC 79.17%, #F3F3F3 100%);
    border-radius: 21px;
    padding: 5px 45px;
}


.back-button{
    margin: auto;
    padding: 35px 0;
    max-width: 80%;
}
.back-button a{
    color: #E98D34 !important;
    text-decoration: none;
    font-size: 18px;
}
.back-button a img{
    margin: 0 5px;
}

/* wellness-packages css */

.wellness-packages-background-images-wrapper{
    background-image: url(../media/wellness-packages\ Ellipse\ 1.svg), url(../media/wellness-packages\ Ellipse\ 2.svg);
    background-repeat: no-repeat;
    position: fixed;
    width: 100%;
    overflow-y: auto;
    height: 100%;
    background-position: top left, bottom right;
    /* background-attachment: fixed;  */
}
.wellness-packages-wrapper{
    max-width: 80%;
    margin: auto;
}
.wellness-packages-back-button{
    margin: auto;
    padding: 35px 0;
}
.wellness-packages-back-button a{
    color: #E98D34 !important;
    text-decoration: none;
    font-size: 18px;
}
.wellness-packages-back-button a img{
    margin: 0 5px;
}
.wellness-packages-content-header{
    background-color: #3B88A8;
    margin: auto;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    color: white;
    border-radius: 15px;
    font-size: 18px;
    margin-bottom: 15px;
}
.wellness-packages-content{
    list-style-type: none;
    margin: 15px auto 30px auto;
    padding: 0;
    line-height: 30px;
}
.wellness-packages-content li{
    color: #3B89A9;
    font-size: 16px;
}
.wellness-packages-price-before{
    color: #8D7C72;
    font-size: 16px;
}
.wellness-packages-price-after{
    color: #DF9134;
    font-size: 16px;
}
.wellness-packages-note{
    color: #3B89A9;
    font-size: 16px;
}

.wellness-packages-wellness-checkup-list{
    list-style-type: none;
    padding: 0;
    padding-bottom: 10px;
}
.wellness-packages-wellness-checkup-list li{
    color: #8C7E6F;
}
.wellness-packages-wellness-checkup-list p{
    color: #3B88A8;
    font-size: 18px;
    margin-bottom: 5px;
}
.wellness-packages-wellness-checkup-inner-list{
    list-style-type: none;
    padding: 0;
    margin-bottom: 25px;
}
.wellness-packages-wellness-checkup-inner-list li{
    color: #8C7E6F;
    font-size: 14px;
    line-height: 25px;
} 


.mobile-app-cards a{
    border-radius: 21px;
    margin-top: 35px;
}


.icon-wrapper-world-map{
    background-image: url(../media/World\ map.svg);
    max-width: 80%;
    margin: auto;
    padding-bottom: 200px;
    background-repeat: no-repeat;
    background-position: bottom;
}
.icon-wrapper-avocado{
    background-image: url(../media/avocado.svg);
    max-width: 80%;
    margin: auto;
    padding-bottom: 200px;
    background-repeat: no-repeat;
    background-position: 0 80%;
    background-size: contain;
}

.pure-text-content{
    margin: auto;
    margin-top: 35px;
}
.pure-text-content-no-icon-div{
    margin: auto;
    margin-top: 35px;
    max-width: 80%;
}
.pure-text-content-text{
    color: #3B88A8;
    margin: 0;
}
.sample-type{
    color: #3B89A9;
}
.sample-time{
    color: #3B89A9;
}
.price{
    color: #8D7C72;
}
.requirements{
    color: #E98D34;
}

.myfitness-list{
    list-style-type: none;
    padding: 0;
}
.myfitness-list li{
    color: #3B88A8;
}
.myfitness-icon{
    background-image: url(../media/myfitness-background-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 350px;
}

.myskin-icon{
    background-image: url(../media/myskindna-background-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 350px;
}
.myskin{
    color: #8C639F ;
}
.myskin li{
    color: #8C639F;
}
.janini{
    color: #438569;
}
.janini-icon{
    background-image: url(../media/janini-background-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 350px;
}



.my-personalized-health-wrapper{
    padding-bottom: 100px;
}

.my-personalized-health-wrapper:last-child img{
    width: 321px;
}

.home-page-wrapper{
    background-repeat: no-repeat !important;
    padding-bottom: 200px;
    background-position: bottom left !important;
}

.wellness-page-main-wrapper {
    position: relative;
    height: 100%;
}
.col-12.d-flex.justify-content-center.mobile-app-cards.aos-init.aos-animate img{
    width: 25% !important;
    height: 100% !important;
}


@media screen and (max-width:950px){
    .col-12.d-flex.justify-content-center.mobile-app-cards.aos-init.aos-animate img{
        width: 50% !important;
        height: 100% !important;
    }
}