/*.activities-banner{*/
/*    height:95vh;*/
/*    background: url('./images/activities/activity-banner.png'); */
/*    background-size:cover; */
/*    background-repeat: no-repeat;*/
/*    background-position:center;*/
/*    background-color:yellow;*/
/*}*/

.image-mobile{
    display:none;
}
.image-desktop{
    display:block;
}
.buttons{
    width:30%;
}
.buttons-a{
    width:10%;
}
.custom-tn-a{
    /* max-width:24rem ; */
    /* max-width:24rem ; */
    /* background-color: yellow; */
}
.hala-heading {
    font-size: 79px;
}


.tag{
    height:181px;
    background-color: #65C56E;
    right:20px;
    top:20px;
}
.image-section-left{
    height:100vh;
    /* height:auto; */
    position: relative;
    background-color: #65C56E;
}
.image-left{
    position: absolute;
    right:-45%;
    bottom:0;
}
.sports-nutrition-image{
    width:90%;
    right:-40%;
}
.image-left-skin{
    position: absolute;
    right: -90%;
    left: 50%;
    bottom: 0px;
    width:100% !important;
}
.image-left-brain{
    position: absolute;
    right: -90%;
    left: 50%;
    bottom: 0px;
    width:90% !important;
}
.image-section-right{
    position: relative;
    height: 100vh;
    /* height: auto; */
    background-color: #65C56E;
   
}
.image-right-immunity{
    position: absolute;
    right: 50%;
    left: -50%;
    bottom: 0px;
    width:100% !important;
}
.image-right-digestive{
    position: absolute;
    right: 45%;
    left: -50%;
    bottom: 0px;
    width:99% !important;
}
.image-right-bone{
    position: absolute;
    right: 50%;
    left: -40%;
    bottom: -2%;
    width:100% ;
}
.image-left-heart{
    position: absolute;
    right: -50%;
    left: 35%;
    bottom: 0px;
    width:90% !important;
}
.image-right-kids{
    position: absolute;
    right: 0 !important;
    left: -40%;
    bottom: 0px;
    width:140% !important;
}
.image-left-men{
    position: absolute;
    right: 0% !important;
    left: 50% !important;
    bottom: 0px;
    width:90% !important;
}
.right-text-icon{
    position: absolute;
    width:15%;
    right:300px;
    top:50px;
    height:auto;
    z-index:-1;
}
.left-text-icon{
    position: absolute;
    width: 10%;
    right: 300px;
    top: 10%;
    height: auto;
    z-index: -1;
}
.list-item-image{
    display:none;
}
.text-section-mobile{
 display:none;
 position: relative;
 margin-top: 40px;
 margin-bottom: 40px;
}
/* .text-section-mobile{
    position: absolute;
    background-color: red;
    display:none;
    width:15%;
    right:50%;
    top:0px;
    height:auto;
    z-index:-1;
} */

@media only screen and (min-width:992px) and (max-width:1800px)
{
    .image-section-left{
        /* height:100vh; */
        height:auto;
        /* position: relative; */
        /* background-color: red !important; */
        background-color: #65C56E;
    }
    .image-section-right{
        /* position: relative; */
        /* height: 100vh; */
        height: auto;
        background-color: #65C56E;
        /* background-color: orange; */
       
    }
}


@media only screen and (max-width:1600px) {
    .hala-heading {
        font-size: 60px;
    }
}


@media only screen and (max-width:1440px) {
    .hala-heading {
        /* Changes new */
        /* font-size: 69px; */
        font-size: 59px;
    }
    .image-desktop {
        width: 198px;
        height: 826px;
        /* background-color: orange; */
    }
}



.free-of-cost-content{
    font-size: 50px;
}
@media only screen and (max-width:1100px) and (max-width:1440px)  {
    .free-of-cost-content{
        font-size: 32px;
    }
}
@media only screen and (min-width:200px) and (max-width:1100px)  {
    .free-of-cost-content{
        font-size: 28px;
        /* background-color: yellow; */
    }
    .activiites-banner{
        position: relative;
    }
    .banner-content-container{
        position: absolute;
        top:30% ;
        /* background-color: green !important; */
    }
    .image-right-bone{
        position: absolute;
        right: 70%;
        left: -33% !important;
        bottom:-4% !important;
        /* background-color: yellow; */
        width:110% !important;
    }
    .image-left-brain {
        position: absolute;
        /* right: -80%; */
        left: 29% !important;
        bottom: 0px;
        width: 100% !important;
        /* background-color: red; */
    }
    .image-right-immunity {
        position: absolute;
        /* right: 40% !important; */
        left: -40% !important;
        bottom: 0%;
        width: 130% !important;
    }

}

@media only screen and (min-width:992px) and (max-width:1023px)
{
    /* .image-right-bone {
        position: absolute;
        right: 50%;
        left: -40%;
        bottom: -11%;
        width: 100%;
    } */
}


@media only screen and (min-width:769px) and (max-width:991px)
/* @media only screen and (min-width:769px) and (max-width:1024px) */
{
    .image-section-right{
        position: relative;
        height: 50vh !important;
        /* background-color:lightgray; */
        width:30%;
        background-color: #65C56E;
        float: right;
        margin-top:-10px !important;
    }
    .image-section-left{
        height:50vh !important;
        position: relative;
        background-color: #65C56E;
        /* background-color: skyblue; */
        width:30%;
    }

    /* Image size start */
    .image-left{
        width:110% !important;
        /* background-color: rebeccapurple; */
    }
    .image-right-kids{
        position: absolute;
        left:-50%;
        /* background-color: red; */
        width:100% !important;
    }
    .image-right-immunity{
        /* width:120% !important; */
        width:100% !important;
        left: -45% !important;
        /* background-color: red; */
    }
    .sports-nutrition-image{
        width:100% !important;
        right:-40%;
        /* background-color: lightblue !important; */
    }
    .image-right-bone{
        position: absolute;
        right: 50%;
        left: -45%;
        bottom: -15% !important;
        width:100% !important;
        /* background-color: red !important; */
    }
    .image-left-brain {
        position: absolute;
        /* right: -80%; */
        left: 29% !important;
        bottom: 0px;
        width: 70% !important;
        /* background-color: orange; */
    }

    /* Image size end */
}

@media only screen and (min-width:575px) and (max-width:767px)
{
    .image-section-right{
        order:1 !important;
    }
    .content-section-right{
        order:2 !important;
    }
}

@media only screen and (min-width:576px) and (max-width:768px)
/* @media only screen and (min-width:769px) and (max-width:1024px) */
{
    .image-section-right{
        position: relative;
        height: 60vh !important;
        /* background-color:lightgray; */
        width:50%;
        background-color: #65C56E;
        float: right;
        margin-top:30px !important;
    }
    .image-section-left{
        height:60vh !important;
        position: relative;
        background-color: #65C56E;
        /* background-color: skyblue; */
        width:50%;
        margin-top: 0px !important;
    }
    .image-left-brain{
        position: absolute;
        right: -40%;
        left: 50% !important;
        bottom: 0px;
        width:120% !important;
    }
}
@media only screen and (min-width:375px) and (max-width:576px)
/* @media only screen and (min-width:769px) and (max-width:1024px) */
{
    .image-section-right{
        position: relative;
        height: 40vh !important;
        /* background-color:lightgray; */
        width:50%;
        background-color: #65C56E;
        float: right;
        margin-top:20px !important;
    }
    .image-section-left{
        height:40vh !important;
        position: relative;
        background-color: #65C56E;
        /* background-color: skyblue; */
        width:50%;
        margin-top:20px !important;
    }
    .image-left-brain{
        position: absolute;
        right: -40%;
        left: 50% !important;
        bottom: 0px;
        width:120% !important;
    }
   
}

@media only screen and (min-width:1025px) and (max-width:1600px){

    .tag{
        height: auto;
        background-color: #65C56E;
        right: 0px;
        top:20px;
        width: 30%;
        padding: 10px 0px;
    }

}




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

    .hala-heading {
        font-size: 50px;
    }
    .tag{
        width:45%;
        height:140px;
        background-color: #65C56E;
        right:20px;
        top:20px;
    }
    .image-right{
        position: absolute;
        right: 90%;
        left: -90%;
        bottom: 0px;
        width:60% !important;
    }
    .image-right-immunity{
        position: absolute;
        right: 30%;
        left: -35%;
        bottom: 0%;
        width:120% ;
    }
    .image-right-kids{
        position: absolute;
        right: 5%;
        bottom: 0%;
        width:140% ;
    }
    .image-right-bone{
        position: absolute;
        right: 50%;
        left: -40%;
        bottom: -11%;
        width:100% ;
    }
    .image-left-heart{
        position: absolute;
        right: -90%;
        left: 5%;
        bottom: 0px;
        width:130% !important;
    }
    .image-left-men{
        position: absolute;
        right: -60%;
        left: 30% !important;
        bottom: 0px;
        width:110% !important;
    }
    .image-left{
        position: absolute;
        right:-60% !important;
        left:15%;
        bottom:0 !important;
        width:120%;
    }
    .list-right{
        font-size:13px !important;
        width:70%;
        margin-top:20px;
    }
    .text-section-mobile .left-text-icon-mobile{
        position: absolute;
        width: 4%;
        right: 170px;
        top: 2px;
        height: auto;
        z-index: 1;
    }
    .right-text-icon-mobile{
        position: absolute;
        width:4% !important;
        right:50% !important;
        left:40% !important;
        top:-60px !important;
        height:auto;
        z-index:-1;
    }
    .content-section{
        order: 3;
    }
    
    .list-item-image{
        display:block;
        width:44px;
        height:44px;
    }
    .list-heading{
        display: flex;
        align-items: center;
    }
    .image-left-skin{
        position: absolute;
        right: -90%;
        left: 20%;
        bottom: 0px;
        width:120% !important;
    }
    .image-right-digestive{
        position: absolute;
        right: 30%;
        left: -30%;
        bottom: 0px;
        width:100% !important;
    }
    .image-left-brain{
        position: absolute;
        right: -40%;
        left: 20%;
        bottom: 0px;
        width:120% !important;
    }
}

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

    .hala-heading {
        font-size: 50px;
    }
    .banner{
        width:100%;
    }
    .support-img{
        width:28.9% !important;
        height:100%;
        right:0px !important;
    }
    .tag{
        width:60%;
        height:140px;
        background-color: #65C56E;
        right:0px;
        top:20px;
    }
    .image-desktop
    {
       display: none;
    }
    /* .image-section-right{
        position: relative;
        height: 50vh !important;
        background-color: #65C56E;
        float: right;
        margin-top:-10px !important;
    } */
    .image-right{
        position: absolute;
        right: 90%;
        left: -90%;
        bottom: 0px;
        width:60% !important;
    }
    /* .image-section-left{
        height:50vh;
        position: relative;
        background-color: #65C56E;
        width:50%;
    } */
    .list-right{
        font-size:13px !important;
        width:100%;
        margin-top:20px;
    }
    .image-right-immunity{
        position: absolute;
        right: 50%;
        left: -50%;
        bottom: 0%;
        width:90% !important;
    }
    .image-right-kids{
        position: absolute;
        right: 70%;
        left: -60%;
        bottom: 0%;
        width:160% !important;
    }
    .image-right-bone{
        position: absolute;
        right: 50%;
        left: -40%;
        bottom: -12%;
        width:90% !important;
    }
    .image-left-heart{
        position: absolute;
        right: -90%;
        left: 40%;
        bottom: 0px;
        width:100% !important;
    }
    .image-right-digestive{
        position: absolute;
        right: 45%;
        left: -40%;
        bottom: 0px;
        width:80% !important;
    }
    .image-left-skin{
        position: absolute;
        right: -90%;
        left: 50%;
        bottom: 0px;
        width:90% !important;
    }
    .image-left-brain{
        position: absolute;
        right: -90%;
        left: 50%;
        bottom: 0px;
        width:90% !important;
    }
    .image-left-men{
        position: absolute;
        right: -80%;
        left: 60% !important;
        bottom: 0px;
        width:80% !important;
    }
    .image-left{
        position: absolute;
        right:-60% !important;
        left:50%;
        bottom:0 !important;
        width:100%;
    }

    #sports-nutrition .image-left img{
        width: 80% !important;
        /* background-color: yellow !important; */
    }



    .text-section-mobile .left-text-icon-mobile{
        position: absolute;
        width:20%;
        right:50%;
        left:40%;
        top:-10px;
        height:auto;
        z-index:-1;
    }
    .right-text-icon-mobile{
        position: absolute;
        width:30% !important;
        right:50% !important;
        left:40% !important;
        top:-60px !important;
        height:auto;
        z-index:-1;
    }
    .content-section{
        order: 3;
    }
    
    .list-item-image{
        display:block;
        width:44px;
        height:44px;
    }
    .list-heading{
        display: flex;
        align-items: center;
    }
}
@media only screen and (max-width:425px){
    .tag{
        width:80%;
        height:140px;
        background-color: #65C56E;
        right:0px;
        top:20px;
    }
}
@media only screen and (max-width:375px) {
    .banner{
        width:100%;
    }
    .support-img{
        width:28.9% !important;
        height:100%;
        right:0px !important;
    }
    .image-desktop
    {
       display: none;
    }
    .image-section-right{
        position: relative;
        height: 35vh !important;
        background-color: #65C56E;
        float: right;
        margin-top:-10px !important;
    }
    .image-right{
        position: absolute;
        right: 90%;
        left: -90%;
        bottom: 0px;
        width:60% !important;
    }
    .image-section-left{
        height:35vh;
        position: relative;
        background-color: #65C56E;
        width:50%;
    }
    .image-right-immunity{
        position: absolute;
        right: 40%;
        left: -50%;
        bottom: 0%;
        width:120% !important;
    }
    .tag{
        width:80%;
        height:140px;
        background-color: #65C56E;
        right:0px;
        top:20px;
    }
    .image-right-kids{
        position: absolute;
        right: 70%;
        left: -60%;
        bottom: 0%;
        width:160% !important;
    }
    .image-right-bone{
        position: absolute;
        right: 50%;
        left: -50%;
        bottom: -12%;
        width:120% !important;
    }
    .image-left-heart{
        position: absolute;
        right: -90%;
        left: 30%;
        bottom: 0px;
        width:130% !important;
    }
    .image-right-digestive{
        position: absolute;
        right: 45%;
        left: -30%;
        bottom: 0px;
        width:110% !important;
    }
    .image-left-skin{
        position: absolute;
        right: -90%;
        left: 40%;
        bottom: 0px;
        width:130% !important;
    }
    .image-left-brain{
        position: absolute;
        right: -90%;
        left: 40%;
        bottom: 0px;
        width:130% !important;
    }
    .image-left-men{
        position: absolute;
        right: -80%;
        left: 40% !important;
        bottom: 0px;
        width:120% !important;
    }
    .image-left{
        position: absolute;
        right:-60% !important;
        left:30%;
        bottom:0 !important;
        width:150%;
    }
    .text-section-mobile .left-text-icon-mobile{
        position: absolute;
        width:20%;
        right:50%;
        left:40%;
        top:-10px;
        height:auto;
        z-index:-1;
    }
    .right-text-icon-mobile{
        position: absolute;
        width:30% !important;
        right:50% !important;
        left:40% !important;
        top:-60px !important;
        height:auto;
        z-index:-1;
    }
    .content-section{
        order: 3;
    }
    
    .list-item-image{
        display:block;
        width:44px;
        height:44px;
    }
    .list-heading{
        display: flex;
        align-items: center;
    }

}