/* Header */
@media (max-width: 521px) {
    header {
        height: 70px;
        flex-wrap: wrap;
        padding: 0;
    }
    .logo-area { 
        order: 1; 
        flex: 1; 
        font-size: 23px;
        gap: 1px;
    }
    .logo-area img{
        width: 28px;
        height: 28px;
    }
    .header-actions { 
        order: 2; 
    }
    .search-container { 
        order: 3; 
        height: 35px;
        width: 100%;  
    }
    nav { display: none; }
       .btn {
           padding: 7px 15px;
           border-radius: 3px;
           font-size: 13px;
}
.search-container{
    border-radius: 0;
}
}
@media (min-width:400px) {
    header {
        height: 85px !important;
        flex-wrap: wrap;
        padding: 0;
    }

    .logo-area{
        padding-bottom: 2px;
        padding: 5px;
    }
    .header-actions{
        padding: 5px;
        padding-bottom: 2px;
    }
}
@media (min-width:761px) {
    header{
        height: 80px !important;
    }
    .logo-area{
        font-size: 25px !important;
    }
    .logo-area img{
        width: 27px !important;
        height: 27px !important;
    }
} 
@media (min-width: 522px) and (max-width: 768px) {
    header {
        padding: 0 !important; 
        flex-wrap: wrap;
        display: flex;
        align-items: center;
        height: 84px !important;
    } 
    .logo-area { 
        order: 1; 
        flex: 0 0 auto; 
        display: flex;
        align-items: center;
        gap: 1px;
        font-size: 24px;
    }
.logo-area img{
    width: 25px;
    height: 25px;
}

    nav { 
        order: 2; 
        display: flex; 
        gap: 12px;
         margin-left: auto;
        align-items: center;
    }

    nav a {
        font-size: 18px;
        white-space: nowrap;
    }
 
    .search-container { 
        border-radius: 0 6px 6px 0;
        order: 3; 
        flex: 1; 
        min-width: 250px; ;
    }

    .header-actions { 
        order: 4; 
        display: flex;
        align-items: center;
        gap: 12px; 
        margin-left: 15px; 
    }
}
@media (min-width: 769px) {
    header {
        flex-wrap: nowrap; 
        height: 55px !important; 
        padding: 5px;
        justify-content: space-between;
    } 
    .logo-area { order: 1; font-size: 22px !important; gap: 2px !important;} 
    nav { display: none; }
    .search-container { 
        order: 3; 
        border-radius: 5px;
        flex: 0.6;
        width: 100%;
    }
    .header-actions { order: 4; }
}
@media (min-width:1001px) {
    header {
        flex-wrap: nowrap; 
        height: 55px !important; 
        padding: 5px;
        align-items: center;
        justify-content: space-between;
    } 
    .logo-area { order: 1; font-size: 23px !important; gap: 2px !important;
    align-self: flex-start; padding: 0 !important;} 
    .logo-area img{
        width: 29px !important;
        height: 29px !important;
    }
    nav { display: block; order: 2; display: flex;
    align-items: end; }
    .search-container { 
        order: 3; 
        border-radius: 20px;
        flex: 0.6; 
        width: 100%;
    }
    .header-actions { order: 4; }
}

/* course */
@media (min-width:300px) {
    .courses{
display: none;
    } 
}
@media (min-width:769px) {
    .courses{ 
        display: block !important; 
        margin-top:-5px !important; 
    }
}






/* sidebar*/
@media (max-width: 940px) {
    #googleToggle {
        display: block; 
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
    }

    .sidebar {
        left: 0;
        transform: translateX(-100%); 
        margin-top:0px !important;
    }

    .sidebar.active {
        transform: translateX(0);
    }
}
/*  main */
@media (max-width:940px) {
    main { 
        padding:0 !important;
        width: 100%;
        margin-left: 0;
        margin-top: 70px;
    }

    .sidebar {
        margin-top: -21px;
    }
main h1 { 
    font-size: 25px;
}
    main p { 
    font-size: 17px; 
}
}

@media (min-width:400px) {
    main {
        margin-top: 85px;
    }
}
@media (min-width:522px) {
    main {
        margin-top: 84px;
    }
} 
@media (min-width:769px){ 

      main {
        margin-top: 85px;
    }
}   
/* chapter title */
@media (min-width:769px){ 
       .main-chapter-header { 
           margin: 0; 
    padding-left: 5px !important;
        padding-top:15px;
        padding-right:0px; 
}
 
}
@media (min-width: 450px) and (max-width:600px) { 
    .main-chapter-header {
        padding: 15px !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px; 
               margin: 0; 
        width: 100%;
        box-sizing: border-box;
    }

    .main-chapter-title {
        font-size: 1.4rem;
        word-wrap: break-word;
        max-width: 100%;
    }
    .main-btn { 
    padding: 9px 17px;
    border-radius: 4px; 
}
}

@media (min-width:601px) and (max-width:768px){
    .main-chapter-header { 
           margin: 0; 
    
    padding-left: 5px !important;
        padding-top:5px;
        padding-right:0px; 
}
    .main-btn { 
    padding: 9px 17px;
    border-radius: 4px; 
}
}
@media (max-width: 450px) {
    .main-chapter-header {
        padding: 2px !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        /* Negative margin hataya taaki 320px+ pe overflow na ho */
        margin: 0; 
        width: 100%;
        box-sizing: border-box;
    }

    .main-chapter-title {
        font-size: 1.4rem;
        word-wrap: break-word;
        max-width: 100%;
    }
    .main-btn { 
    padding: 9px 17px;
    border-radius: 4px; 
}
} 
@media (max-width: 320px) {
    .main-chapter-header {
        padding: 20px 15px;
        margin: 0; 
        width: 100%;
        box-sizing: border-box;
    }

    .main-chapter-title {
        font-size: 1.2rem;
    }

    .main-top-nav {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* web page end */
@media (max-width:940px){
    
/* Container Logic */
.top{
    padding: 5px;

} 
 
/* Individual Cards */
.main-option-card { 
    border-radius: 2px; 
}  
}

@media (max-width: 992px) {
    .main-help-strip {
        padding: 0 15px;
        min-height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    .main-strip-middle {
        flex-wrap: wrap; /* Points agar zyada hain toh niche shift ho jayenge */
        gap: 15px;
        justify-content: center;
    }

}
 
@media (max-width: 768px) {
    .main-help-strip {
        flex-direction: column; /* Vertical alignment */
        align-items: stretch;
        text-align: center;
        gap: 20px;
        padding: 20px;
    }

    .main-strip-left, .main-strip-right {
        border: none; /* Borders hata denge mobile par */
        height: auto;
        padding: 0;
        justify-content: center;
    }

    .main-strip-left {
        flex-direction: column; /* Icon aur Text upar niche */
        gap: 10px;
    }

    .main-strip-middle {
        padding: 15px 0;
        border-top: 1px solid #f1f5f9;
        border-bottom: 1px solid #f1f5f9;
        flex-direction: column; /* Points ek ke niche ek */
        gap: 10px;
        align-items: flex-start; /* Points ko left align karne ke liye */
        padding-left: 20%; /* Mobile par center feel dene ke liye */
    }

    .main-ask-btn {
        width: 100%; /* Button full width ho jayega */
        text-align: center;
    }

    .main-completion-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* all sections padding */
@media (min-width:941px){
main {
  padding: 0 20px; /* Left aur Right padding */
}
.main-chapter-header {
     margin-left: -20px;
     margin-right: -20px;
        padding-left:20px !important;
    padding-right:20px !important;
} 
main .page-intro p{
      margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left:20px !important;
    padding-right:20px !important;
}
}