@media (min-width: 1801px) {
    .container{max-width: 1366px; }
    .lg-container{max-width: 1400px;}
    .technology-meets{padding: 310px 0px;}

    .for-desktop{display: none;}
    .line-sl-one{bottom:  -120px;}
    .line-sl-two{bottom: -110px;}

    .pract-img{width: 46%;}
    .footer-inner-wrap{justify-content: space-between;}

}

@media (max-width: 1800px) {
    .for-large-screen{
        display: none;
    }

}

@media (max-width: 1340px) {
    /************* Day Free Trial ************/
        .yogain-profile img {
            max-width: calc(22% + 7px);
        }
}


@media (max-width: 1120px) {
    /******* Banner *******/
        .banner-section{
            padding: 50px;
        }
    /*************** Why yogin **************/
        .yogain-exists-card{
            padding: 40px;
            gap: 25px;   
        }
        .yogain-dark-text{
            font-size: 21px;
        }
        .yogain-simply{
            font-size: 20px;
        }
        .yogain-grow{
            font-size: 17px;
        }

    /************* Day Free Trial ************/
        .yogain-profile img {
            max-width: calc(22% + 7px);
        }

}

@media screen and (min-width: 1024px) and (max-width: 1030px) {
    .banner-section{
        background-position: 90%;
    }
}


@media (max-width: 992px) {
    /******* Banner *******/
        .banner-section{
            padding: 20px;   
            background-position: right;
        }
        .banner-shade{
            left: -40px;
        }
    /*************** Why yogin **************/
        .yogain-exists-col{
            position: relative;   
        }
        .yogain-exists-card{
            max-width: 100%;   
        }
    /*********** Modern practitioner ************/  
        .practitioner-features{
            grid-template-columns: repeat(2, 1fr);    
        }
        .practition-card{
            margin-bottom: 60px;
            gap: 45px;
        }
        .pract-img{
            width: 50%;
        }
        
        .pract-content{
            gap: 20px;
        }
    
    /************ Technology Meets Ancient Yoga *************/
        .technology-col h4{
            font-size: 20px;   
        }
        
    /************* Day Free Trial ************/
        .yogain-profile {
            padding: 0px 15px;
            gap: 16px;
            justify-content: center;
        }
        .yogain-profile img {
            max-width: 175px;
        }

   

    /***************** About page ***********/
       
        .story-left-block,  .quote-box, .content-box{
            padding: 25px;   
        }
        .story-left-block h1 {
            font-size: 28px;
        }
        .story-left-block h2 {
            font-size: 24px;
        }
        .quote-lb{
            max-width: 250px;
        }
        .quote-text {
            font-size: 18px;
        }
        .content-box p{
            font-size: 18px;
            margin-bottom: 15px;
        }
        .section.our-story{
            padding-bottom: 30px;
        }
        .right-img-card-block{
            gap: 25px;
        }
        .profile-chapter .rt-content-block h5{
            font-size: 20px;
            margin-block: 20px;
        }
        .rt-content-block ul{
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }
        .our-mission-col h3{
            font-size: 42px;
        }
        .our-mission-col h6{
            font-size: 18px;
        }
        .why-yogain-exists p{
            font-size: 20px;
        }
        .mission-tags-col{
            gap: 10px;
        }
        .why-yogain-exists h3{
            font-size: 20px;
        }
        .unit-card{
            padding: 30px;
        }
        .unit-card h3{
            font-size: 20px;
        }
        .card-taglines p{
            font-size: 26px;
        }
        .journey-ahead .rt-content-block ul{
            flex-direction: row;
        }
        .journey-ahead .future-tags span{
            padding: 10px 10px;
        }
        .promise-row h2{
            font-size: 42px;
        }
        .promise-row p{
            font-size: 20px;
            max-width: 580px;
        }


}

@media screen and (min-width: 820px) and (max-width: 830px) {
    .banner-section{
        background-position: 88%;
    }
}

@media (max-width: 767px) {  
    /******* Banner *******/
        .banner-section{
            padding: 15px;   
            background-position: right;
        }
        .banner-title{
            font-size: 56px;
        }
        .banner-wrap-inner{
            gap: 35px;
        }
        .banner-text-wrap{
            font-size: 20px;
        }
        .banner-wrap{
            gap: 70px;
        }
    /*************** Why yogin **************/
        .yogain-exists-col{
            /* padding: 0px 20px;   */
        }
        .yogain-exists-card{
            padding: 38px 26px;
            margin-top: -90px;
            border: 1px solid #eee;
        }

        .yogain-dark-text{
            font-size: 19px;
        }
        .yogain-simply{
            font-size: 17px;
        }
        .yogain-grow{
            font-size: 16px;
        }
        
    /************ The solution **********/
        .harmony-card{
            padding: 25px 15px;   
        }
        .harmony-row{
            gap: 25px;
        }
        .harmony-long-arrow{
            right: -25px;
            z-index: -1;
        }

    /************** Transformation Path ***********/
        .features-grid {
            grid-template-columns: 1fr;
        }

    /*********** Modern practitioner ************/  
        .practitioner-features{
            grid-template-columns: repeat(2, 1fr);   
        }
        .practition-card{
            margin-bottom: 70px;
            gap: 25px;
        }
        .pract-img {
            width: 100%;
            max-width: 300px;
        }
       
        .pract-content{
            gap: 15px;
        }

    /************ Technology Meets Ancient Yoga *************/
        .technology-meets{
            padding: 170px 0px;   
        }
        .meets-row{
            flex-direction: column; 
            gap: 10vw;  
        }
        .technology-col {
            width: 100%;
        }
        .special-tags-col {
            width: 100%;
        }
        .technology-col h4 {
            font-size: 16px;
        }
        .sm-intersect{left: 50px;}
        .sm-intersect img {max-width: 130px;}
        .lg-intersect{top: 280px;}
        .lg-intersect img {width: 180px;}

    /************* Day Free Trial ************/
        /* .yogain-profile{
            flex-wrap: wrap;
            padding: 0px 20px 20px;  
            align-items: center; 
            gap: 20px;
            justify-content: center;
        }
        .yogain-profile img {
            border-radius: 45px;
            max-width: 300px;
        } */
        .free-trial {
            padding-top: 70px;
        }


    /************* Blog detail *******************/
        .blog-details {
         flex-direction: column;
        }
        .blog-sidebar {
         max-width: 100%;
         width: 100%;
        }

       .modern-practitioner-mobieloadmore{
        display: flex;
         max-width: 100%;
         width: 100%;
       }
       .modern-practitioner-mobieloadmore .loadmore-action{
        color: var(--primary-color);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.2px;
        text-decoration: none;
       }

    /*************** Contact page ************/
        .contact-section .main-container {
            flex-direction: column;
            gap: 30px;
        }
        .main-container div.middle_section {
            width: 100%;
            display: flex;
            margin-top: 0px;
        }
        .main-container div.right_section{
        width: 100%;
        }
        .main-container div.right_section .main-heading {
        margin-left: 0px;
        margin-bottom: 20px;
        }
        .right_section .container {
        padding: 0;
        }
        .contact-section .middle_section .main-heading {
        display: none;
        }

    /***************** About page ***********/
        .story-section {
            grid-template-columns: 1fr;
        }
        .right-img-card-block {
            flex-direction: column-reverse;
            gap: 30px;
        }
        .right-img-rel{
            max-width: 100% !important;
        }
        .section.our-story{
            padding-block: 0px;
        }
        .story-left-block {
            padding: 25px 25px 155px;
            background-position: center;
        }
        .the-second-chapter p{
            margin-bottom: 10px !important;
        }
        .mission-row {
            flex-direction: column;
            gap: 10vw;
        }
        .our-mission-col {
            width: 100%;
        }
        .why-yogain-exists {
            width: 100%;
        }      
        .our-mission-col h3{
            font-size: 32px;
        }
        .why-yogain-exists p{
            font-size: 20px;
        }
        .why-yogain-exists h3{
            font-size: 22px;
        }
        .shared-wrold {
            flex-direction: column;
        }
        .unit-card h3{
            font-size: 24px;
        }
        .card-taglines p{
            font-size: 26px;
        }

    /***************** Contact Us ********************/
        .contact-row {
            flex-direction: column-reverse;
            margin-top: 60px;
        }
        .contact-left-block {
            width: 100%;
        }
        .contact-right-block {
            width: 100%;
        }
        .contact-header-info h3{
            font-size: 28px;
        }
        .contact-header-info p{
            font-size: 18px;
        }
        .address-link a{
            font-size: 18px;
        }
    
    /******** blog detail *******/
        .blog-detail-page {
            padding: 20px 0px;
        }


}


@media screen and (max-width: 640px) {
    /******* Banner *******/
        .banner-section{
            background-position: 95%;   
        }
        .banner-title{
            font-size: 50px;
        }
        .banner-text-wrap{
            font-size: 20px;
        }
        .banner-wrap{
            gap: 50px;
        }
        .banner-wrap-inner{
            gap: 40px;
        }
        .banner-shade{
            left: -30px;
        }

    /************ The solution **********/
        .harmony-card{
            padding: 20px;   
        }
        .harmony-row{
            gap: 18px;
        }
        .ht-card-icon{
            width: 45px;
            height: 45px;
        }
        .harmony-card p{
            font-size: 15px;
        }
        .harmony-long-arrow{
            right: -18px;
            z-index: -1;
        }

    /*********** Modern practitioner ************/  
        
        .practition-card{
            flex-direction: column !important;
            gap: 20px;
            margin-bottom: 60px;
        }
        .pract-img {
            width: 100%;
            max-width: 100%;
        }
        .pract-content{
            width: 100%;
            gap: 15px;
        }
        .pract-content p{
            max-width: 100%;
        }

        .cards-shadow {
            display: none;
        }

    /************ Technology Meets Ancient Yoga *************/
        .technology-meets{
            padding: 130px 0px;   
        }
    /************* Day Free Trial ************/
        .yogain-profile{
            justify-content: flex-start;
            overflow-x: scroll;   
        }
        .yogain-profile img {
            /* border-radius: 45px; */
            max-width: 240px;
        }

    /******** blog detail *******/
        .explore-blogs-card{
            flex-direction: column;   
        }

    
}

@media screen and (max-width: 560px) {
    .section{
        padding: 70px 0px;   
    }
    .cm-button{
        padding: 14px 18px;
    }
    /******* Banner *******/
        .banner-section{
            padding: 0px;
            background-position: 88%;
            position: relative;
        }
        .banner-section::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.5;
        }
        .banner-shade{
            left: 0px;
            top: -40px;
        }
        .banner-wrap{
            gap: 40px;
        }
        .banner-wrap-inner{
            gap: 30px;
        }
        .banner-title{
            font-size: 40px;
        }
        .banner-text-wrap{
            font-size: 16px;
        }
        .banner-action button {
            width: 100%;
            text-align: center;
            justify-content: center;
        }

    /****** Trusted by *********/   
       
        .trusted-col{
            max-width: 100%;   
        }

    /************ The solution **********/
        .harmony-row{
            gap: 20px;
            flex-wrap: wrap;   
        }
        .harmony-card{
            padding: 48px;   
            flex: auto;
        }
        .harmony-long-arrow{
            display: none;
        }
    
    /*********** Modern practitioner ************/  
        .practitioner-features{
            grid-template-columns: repeat(1, 1fr);   
        }
       
    /************* Day Free Trial ************/
        /* .yogain-profile{
            flex-wrap: wrap;
            padding: 0px 20px 20px;  
            align-items: center; 
            gap: 20px;
            justify-content: center;
        }
        .yogain-profile img {
            border-radius: 20px;
            max-width: 170px;
        } */
        
        

}


@media screen and (max-width: 420px) {
    /******* Banner *******/
        .banner-section{
            padding: 0px;
            background-position: 83%;
        }

    /************* Day Free Trial ************/
        .yogain-profile img{
            max-width: 150px;
        }

}


@media screen and (min-width: 767px) and (max-height: 630px) {
    .banner-wrap{
        gap: 50px;
        top: 20px;
    }
    .banner-wrap-inner{
        gap: 35px;
    }

}