/* Header */
@media (max-width: 521px) {
    header {
        height: 69px;
        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: 79px !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;
    }

    .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{
        margin-top: -30px;
        display: block !important;
    }
}

/* hero section */
@media (max-width: 768px) { 
    .hero-content h1{
        font-size: 27px; 
    }
        .hero-content p{
        font-size: 17px; 
    }
    .hero-section{
        margin-top: 80px !important;
        padding: 0 !important;
    }
    .stats-box{
        border-radius: 0;
    }
    .dashboard-card{
        border-radius: 0;
        padding-left: 0;
        padding-right: 0;
    }
       .hero-section {
        flex-direction: column; /* Side-by-side ki jagah upar-neeche */
        margin-top: 20px;
        gap: 20px;
        padding: 0 15px; /* Mobile par side se thoda gap */
    }

    .hero-content, 
    .dashboard-card {
        width: 100% !important; /* Forcefully full width karega */
    }

    .stats-box {
        flex-wrap: wrap; /* Stats agar zyada hain toh line change kar lenge */
        gap: 20px;
        justify-content: center;
        padding: 20px;
    }

.stat-item h4 {
    font-size: 22px; 
}

.stat-item p {
    font-size: 12px; 
}
    .chapter-item {
        flex-direction: column; /* Mobile par icon/text upar aur button neeche */
        align-items: flex-start;
        gap: 15px;
    }

    .btn-practice {
        width: 100%; 
    font-size: 14px; 
    }
    
.chapter-title h4 {
    font-size: 16px; 
}

.chapter-title p {
    font-size: 14px; 
}

}
@media (min-width:400px) {
    .hero-section{
        margin-top: 85px !important;
    }
}
@media (min-width:769px) {
    .hero-section{
        padding-top: 10px !important;
    }
    .hero-content{
        width: 50%;
    }
    .badge { 
    font-size: 16px;  
}
    .dashboard-card {
        border-radius: 0;
        width: 50%;
        padding-left: 0;
        padding-right: 0;
    }
    .stats-box{
        width: 100%;
        padding-left: 0;
        gap:28px;
        border-radius: 0;
    }
    .chapter-item{
                border-radius: 0 !important;

    }
}
@media (min-width: 1068px) {
    .hero-section{
        padding: 10px;
    }
    .stats-box { 
    padding: 25px 35px;
    border-radius: 12px; 
}
 .dashboard-card{
    padding-left: 5px;
    padding-right: 5px;
 }
 .card-header h2{
    font-size: 30px;
 }
  .card-header a{
    font-size: 21px !important;
 }
   
.chapter-title h4 {
    font-size: 18px; 
}

.chapter-title p {
    font-size: 16px; 
}

    .btn-practice {
    font-size: 15px; 
    }
    
}

/* features */
@media (max-width:500px) {
    .mini-badge, .header-right{
        display: none;
        text-align: center !important;
    } 
}
@media (max-width:1000px) {
     .header-right{
        display: none;
        text-align: center !important;
    } 
}
/* Master Python: From Beginner to Pro */

@media (min-width: 300px) {
    .roadmap-flow {
        flex-wrap: nowrap !important;  
        justify-content: flex-start !important;
        overflow-x: auto;  
        padding: 20px 10px;
        gap: 10px;
        scrollbar-width: none;  
    }

    .roadmap-flow::-webkit-scrollbar {
        display: none; 
    }

    .roadmap-box {
        flex-shrink: 0;  
    }
}


/* user dashboard */ 
@media (max-width:900px) {
    .dash-content-box { 
    border-radius: 0; 
}
.dash-stats-grid {
    display: grid;
    grid-auto-flow: column; /* Sabhi items ko ek hi row mein rakhta hai */
    grid-auto-columns: minmax(250px, 1fr); /* Har item ki minimum width set karta hai */
    gap: 20px;
    margin-bottom: 30px;
    overflow-x: auto; /* Horizontal scrollbar enable karta hai */
    white-space: nowrap; /* Content ko wrap hone se rokta hai */
}

    .dash-main-content{
        padding: 0 !important;
    }
    .dash-login-alert-banner{
        border-radius: 0;
    }
}
@media (max-width: 1024px) {
    .dash-dashboard-container {
        flex-direction: column; /* Sidebar top par chala jayega aur content neeche */
    }

    .dash-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding: 20px;
    }

    .dash-nav-links {
        flex-direction: row; /* Links side-by-side ho jayenge */
        flex-wrap: wrap;
        gap: 10px;
    }

    .dash-nav-links a {
        margin-bottom: 0;
        flex: 1;
        min-width: 130px;
        justify-content: center;
    }

    .dash-stats-grid {
        grid-template-columns: repeat(2, 1fr); /* 3 ki jagah 2 columns */
    }

    .dash-bottom-split {
        grid-template-columns: 1fr; /* Side-by-side ki jagah stack */
    }
}

/* --- Mobile View (Max 768px) --- */
@media (max-width: 768px) {
    .dash-main-content {
        padding: 20px 15px; /* Mobile par padding kam karein taaki content clean dikhe */
    }

    .dash-login-alert-banner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .dash-auth-buttons {
        width: 100%;
        justify-content: center;
    }

    .dash-stats-grid {
        grid-template-columns: 1fr; /* Mobile par 1 column */
    }

    .dash-sidebar {
        padding: 15px;
    }

    .dash-user-profile {
        margin-bottom: 20px;
    }

    .dash-nav-links a {
        font-size: 0.85rem;
        padding: 10px;
    }
}


/* security */
 @media (max-width:600px) {
    .privacy-cta{
        border-radius: 0;
    }
 }
@media (max-width: 1024px) {
    .security-wrapper {
        flex-direction: column; /* Side-by-side se upar-neeche layout */
        gap: 50px;
        padding: 0 25px;
    }

    .security-left h2 {
        font-size: 36px; /* Font size ko tablet ke liye chota kiya */
    }

    .security-left, .security-right {
        width: 100%;
        flex: none; /* Full width support */
    }
} 
@media (max-width: 768px) {
    .security-split-section {
        padding: 40px 0;
    }

    .security-wrapper {
        padding: 0 15px;
        gap: 40px;
    }

    .security-left h2 {
        font-size: 28px; /* Mobile par headings ko crisp aur clear rakha */
        margin-bottom: 15px;
    }

    .security-left p {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .security-right {
        gap: 20px;
    }

    .security-feature-item {
        padding: 15px;
        gap: 15px;
    }

    .feature-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .feature-text h4 {
        font-size: 16px;
    }

    .feature-text p {
        font-size: 13px;
    }

    /* Privacy CTA Box Mobile Adjustments */
    .privacy-cta {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
    }
    
    .privacy-cta p {
        font-size: 13px;
        line-height: 1.4;
    }
}

/* python projects */
 
@media (max-width: 991px) {
    /* 1. Header Bar ko stack karein */
    .workspace-header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
        margin-top: 15px !important;
    }

    .header-left, .header-right {
        width: 100%;
        justify-content: space-between;
    }

    /* 2. Main Box ko horizontal se vertical (ek ke neeche ek) karein */
    .project-glass-card {
        grid-template-columns: 1fr !important; /* 2 column layout khatam */
    }

    /* 3. Sidebar (Meta info) ab upar dikhega aur code area neeche */
    .project-meta {
        border-right: none;
        border-bottom: 1px solid var(--border);
        width: 100%;
    }

    /* 4. Code Editor ke tabs aur buttons ko adjust karein */
    .editor-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 15px;
    }

    /* Tabs ko mobile par side-scrollable banayein */
    .tab-group {
        display: flex;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 5px;
        white-space: nowrap;
    }

    /* 5. Code Area ko responsive banayein taaki code screen se bahar na jaye */
    .code-area {
        padding: 15px;
        overflow-x: auto; /* Lamba code hone par side scroll aayega */
    }

    code {
        font-size: 13px;
        white-space: pre; /* Code ka alignment kharab nahi hoga */
    }

    /* 6. Footer ko ek line se vertical karein */
    .project-stats-footer {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }
    .editor-top-bar{
        display: none;    
    }
}

@media (max-width: 576px) {
    /* Bahut choti mobile screens par space bachane ke liye */
    .window-controls {
        display: none; /* Mac style red, yellow, green buttons hide */
    }
    .editor-top-bar{
        display: none;    
    }
    .divider {
        display: none;
    }
}




/* game */
@media (max-width:500px) {
    .gl-top-row{
        flex-direction: column;
        padding: 0;
        margin: 0;
    }  
    .gl-content p { 
    margin-bottom: 10px; 
}
    .gl-login-btn { 
    padding: 10px 25px; 
    font-size: 15px; 
} 
.game-path-container { 
    padding: 0; 
}

}
@media (max-width:1000px) {
        .gl-content p { 
    margin-bottom: 10px; 
}
       .gl-login-btn { 
    padding: 15px 30px; 
    font-size: 15px; 
} 
.gl-badge { 
    border-radius: 5px; 
}
}

/* recent added features */
@media (max-width:521px) {
    .header-badge, .header-content p{
        display: none;
    }
}
@media (max-width:1000px) {
    .header-content p{
        display: none;
    }
}


/* python syllabus */

@media (max-width:800px) {
 
     .step-badge {
    padding-top: 20px;
    }
        .syllabus-content {
        display: flex;
        flex-direction: column; 
        padding: 0px;  
    }    .syllabus-text-area h2 {
        font-size: 26px; 
    } 
    .syllabus-text-area p{
        text-align: justify;
    }
       .view-syllabus-btn { 
        padding: 13px 20px; 
        border-radius: 5px;
        font-size: 15px; 
    }
}

/* users feedbacks */
@media (max-width:800px) {
    .badge-teal{
        display: none;
    }
    .divider-vertical{
        display: none;
    }
    .testimonial-grid {
    display: grid;
    /* Isse grid container se bahar nahi jayega */
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 30px;
    width: 100%;
}
}


/* Keep Growing Every Day */

/* --- Tablet (2 Boxes per row) --- */
@media (max-width: 992px) {
    .grow-card {
        flex: 1 1 calc(50% - 20px); /* Ek row mein do box */
    }
}

/* --- Mobile (1 Box per row) --- */
@media (max-width: 600px) {
    .grow-card {
        flex: 1 1 100%; /* Ek row mein ek box full width */
    }
    
    .grow-main-title {
        font-size: 24px; /* Chhoti screen par font thoda chota */
    }
}


/* footer */

        @media (max-width: 900px) {
            .footer-container {
                grid-template-columns: 1fr 1fr;
            }
        }