@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;
        }
        
        .blog main.main-wraper,
        .wp-singular.single.single-post .content-area,
        .cls-sm-header .content-area,
        .author main.main-wraper,
        .wp-singular.page-template-template-disease .disease-main-wrapper
        {
            padding-top: 100px;
        }
        .author .content-display
        {
            width:60%;
        }
        
        .page-content-start{margin-top: 10px;}
        
        .pricing-wrapper {flex-direction: column;}

        .pricing-intro,
        .pricing-cards {width: 100%;}

        .pricing-cards {flex-direction: column;}

        .pricing-card {width: 100%;}
        
         .faq-question-heading {
            font-size: 16px;
            padding: 14px 40px 14px 12px;
        }

      .faq-answer-content::after
       {
        right: 12px;
        font-size: 20px;
      }
    
      .faq-answer-content {
        font-size: 14px;
        padding: 0 12px 14px;
      }
      
      .author-profile-box{
          flex-direction: column;
          align-items: center;
      }
      .author-details{
          align-items: center;
      }
      .float-social{z-index: 9;}
      .scanner-wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
         }
      
}


@media screen and (max-width: 640px) {
    /******* Banner *******/
        .banner-section{
            background-position: 95%;   
        }
        .banner-title{
            font-size: 44px;
        }
        .banner-text-wrap{
            font-size: 18px;
        }
        .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;
        }
        .practitioner-ls-heading svg.svgline{
            display: none;
        }

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

    /******** blog detail *******/
        .explore-blogs-card{
            flex-direction: column;   
        }
        
        .blog-card-grid.have-less .alm-listing, .author-main-wrapper .blog-card-grid.have-less {
           grid-template-columns: repeat(auto-fit, minmax(100%, 0fr));
         }
         
         .blog main.main-wraper,
          .wp-singular.single.single-post .content-area,
         .cls-sm-header .content-area,
         .cls-sm-header main.main-wraper,
         .author main.main-wraper,
         .page-template-template-contact .contact-page
         {
                padding-top: 100px;
         }
         
         .download-content-wrraper{
          flex-direction: column-reverse;
          gap: 30px;
         }
         .scanner-wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
         }

        .products-main-wrapper {
            gap: 50px;
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        .single-page-template .static-page-featured-img{
            flex-direction: column;
        }
        .download-right-wrapper{
            width:100%;
        }
        .download-left-wrapper{
            padding:10px;
            width: 100%;
        }
        
        .download-wrraper-inner
        {
          align-items: center;
          justify-content: center;
          margin: auto;
        }
        
          .scanner-wrapper img{
              width:60%;
         }
        
        
}

@media screen and (min-width: 360px) and (max-height: 420px){
    .banner-section {
        min-height: 420px;
    }
}

@media screen and (max-width: 560px) {
    .section{
        padding: 70px 0px;   
    }
    .cm-button{
        padding: 14px 18px;
        width: 100%;
        justify-content: center;
    }
    .yogain-exists-card .join-row{
        width:100%;
    }
    .banner-wrap-bottom-content{
     display: flex;
    flex-direction: column;
    gap: 7px;
    }
    .banner-wrap-bottom-content span{
        width: 100%;
    }
    /******* Banner *******/
    .home .header-backdrop{
        display: none;
    }
    .banner-section .container {
        height: 100%;
    }
    .banner-section .container .banner-wrap {
        height: 87%;
        padding-top: 210px;z-index: 0;
    }
        .banner-section{
            padding: 0px;
            background-position: 88%;
            position: relative;
            background-position-y: -90px;
            background-image: url('/wp-content/uploads/2025/12/home-banner-mob3.png') !important;
        }
        .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: 31px;
        }
        .banner-text-wrap{
            font-size: 16px;
        }
        .banner-action button {
            width: 100%;
            text-align: center;
            justify-content: center;
        }
        .home-banner-heading{
            font-size:35px;
        }

    /****** 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: 540px) {
    .body-sync-col {
      max-width: 100%;
      margin-bottom: 30px;
    }
}

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

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

}


@media screen and (min-width: 767px) and (max-height: 630px) {
    .banner-wrap{
        gap: 50px;
        top: 20px;
    }
    .banner-wrap-inner{
        gap: 35px;
    }
    .banner-title {
        font-size: 40px;
    }
    .banner-text-wrap {
        font-size: 16px;
        line-height: 140.273%;
    }

}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .scanner-wrapper {
    align-items: flex-start;
  }
  .scanner-wrapper img{
      width:60%;
  }
}

/****** Faq css******/
/* --------------------
   Tablet (≤ 1024px)
--------------------- */
@media (max-width: 1024px) {
  h3.faq-question-heading {
    font-size: 17px;
    padding: 15px 45px 15px 15px;
  }
  .faq-answer-content {
    font-size: 15px;
  }
}

/* --------------------
   Small Mobile (≤ 480px)
--------------------- */
@media (max-width: 480px) {
  .faq-question-heading {
    font-size: 15px;
  }

  .faq-answer-content {
    font-size: 14px;
  }
}

/****** end *****/