/** Small devices (landscape phones, 576px and up)**/
@media (min-width: 300px) and (max-width: 575px) { 
    body {
        background-size: cover;
        background-position: right;
        background-attachment: fixed;
    }
    h1.header-title {
        font-size: 14px;
    }
    .header-logo {
        width: 80px;
    }
    .taskbox .mr-50 {
        margin-right: 60px;
    }
    .Academic-title {
        margin-top: 20px;
    }
    .acadmics-for-mobiel{
        display:block;
        margin-top: 25px;
    }
    .acadmics-for-desk{
        display: none;
    }
    .taskbox {
        margin-bottom: 20px;
    }
    .boxheight {
        min-height: auto;
    }
    .taskbox {
        min-height: auto;
    }
    .collapsePart.show {
        display: none;
    }
    span.collapseQue{
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 1;
        padding-bottom: 18px;
    }
    .collapseQue .txt {
        visibility: hidden;
    }
    /* .collapseQue.show{
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    } */
    .collapseQue.show .txt {
        visibility: visible   ;
    }
    img.arr {
        width: 20px;
        margin-left: auto;
    }  
    .collapseQue.show  img.arr {
        transform: rotate(180deg);
    } 
    .loginBg {
        background-size: cover;
        background-position: center;
    }
    .loginBox {
        margin-right: 0px;
    }
    .loginBg .modal-content .modal-body {
        justify-content: center; 
    }
    .grayBox .form-group.inp-rw {
        margin-bottom: 15px;
        margin-top: 15px;
    }
    .grayBox {
        position: relative;
        padding-bottom: 0px;
        margin-bottom: 22px;
    }
    .timewordinfo {
        margin-bottom: 20px;
    }
    .section-one{
        margin-bottom: 20px;
    }
    .row.collapsePart {
        position: relative;
        top: -25px;
    }
    .styleChangeButton{
        display: none !important;
    }
    .selectbox p{
        font-size: 12px;
    }
    .selectPlanBox {
        margin-bottom: 15px;
    }
}

/** Small devices (landscape phones, 576px and up)**/
@media (min-width: 576px) and (max-width: 767px) { 
    .styleChangeButton{
        display: none !important;
    }
}



/** Medium devices (tablets, 768px and up)**/
@media (min-width: 768px) and (max-width: 991px) {
  
}

/** Large devices (desktops, 992px and up)**/
@media (min-width: 992px) and (max-width: 1250px) { 
    .section-one {
        padding-top: 10px;
        min-height: 300px;
    }
    .taskbox {
        padding: 15px 30px;
        min-height: 310px;
    }
    .grayBox {
        padding: 10px 30px;
        margin-bottom: 15px;
    }
    .header-h2 {
        margin-bottom: 20px !important;
    }
    .timewordinfo {
        padding: 8px 30px;
        margin-bottom: 15px;
    }
    body {
        font-size: 14px;
    }
    .boxheight {
        min-height: 216px;
    }  
    .radio .cr {
        width: 24px;
        height: 24px;
    }  
}
/** Extra large devices (large desktops, 1400px and up)**/
@media (min-width: 1400px) and (max-width: 1799px) { 


}


/** Extra large devices (large desktops, 1800px and up)**/
@media (min-width: 1920px) { 

}

/* ============================================
   COMPREHENSIVE RESPONSIVE DESIGN
   For all pages: home, profile, landing, modals
   ============================================ */

/* Extra Small devices (phones, 320px and up) */
@media (min-width: 320px) and (max-width: 575px) {
    /* Subscription Modal */
    #subscriptioPlanDialog .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    #subscriptioPlanDialog .plan-card-content {
        padding: 1rem;
        min-height: auto;
    }
    
    #subscriptioPlanDialog .plan-features-list {
        font-size: 0.875rem;
        padding: 0.75rem 0;
    }
    
    #subscriptioPlanDialog .plan-price {
        font-size: 1.5rem;
    }
    
    /* Profile Modal */
    #profileDetaiDialog .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    #profileDetaiDialog .modal-header {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    #profileDetaiDialog .modal-body {
        padding: 1rem;
    }
    
    #profileDetaiDialog .info-card,
    #profileDetaiDialog .stat-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    /* Pricing Cards (Landing & Profile) */
    .pricing-card,
    .plan-card {
        margin-bottom: 1.5rem;
        padding: 1.5rem 1rem;
    }
    
    .pricing-card h3,
    .plan-card h3 {
        font-size: 1.25rem;
    }
    
    .pricing-features,
    .plan-features {
        font-size: 0.875rem;
        padding: 0.75rem 0;
    }
    
    /* Choose Your Plan Section */
    .pricing-section {
        padding: 2rem 1rem;
    }
    
    .pricing-section h2 {
        font-size: 1.75rem;
    }
    
    /* How It Works Section */
    .how-it-works {
        padding: 2rem 1rem;
    }
    
    .how-it-works h2 {
        font-size: 1.75rem;
    }
    
    .step-card {
        padding: 1.5rem 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* Header */
    .header-logo {
        width: 80px;
        height: auto;
    }
    
    h1.header-title {
        font-size: 1.25rem;
    }
    
    /* Buttons */
    .btn {
        width: 100%;
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* Forms */
    .form-control,
    .form-select,
    textarea {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    /* Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
        font-size: 0.875rem;
    }
    
    /* Navigation */
    .navbar {
        padding: 0.75rem 1rem;
    }
    
    .navbar-nav {
        flex-direction: column;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 0;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
    /* Subscription Modal */
    #subscriptioPlanDialog .modal-dialog {
        margin: 1rem auto;
        max-width: 540px;
    }
    
    #subscriptioPlanDialog .plan-card-content {
        padding: 1.25rem;
    }
    
    /* Pricing Cards */
    .pricing-card,
    .plan-card {
        padding: 1.75rem 1.25rem;
    }
    
    /* Sections */
    .pricing-section,
    .how-it-works {
        padding: 3rem 1.5rem;
    }
    
    .pricing-section h2,
    .how-it-works h2 {
        font-size: 2rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.875rem 1.75rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
    /* Subscription Modal */
    #subscriptioPlanDialog .modal-dialog {
        max-width: 720px;
    }
    
    /* Pricing Cards - 2 columns */
    .pricing-grid,
    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Sections */
    .pricing-section,
    .how-it-works {
        padding: 4rem 2rem;
    }
    
    .pricing-section h2,
    .how-it-works h2 {
        font-size: 2.25rem;
    }
    
    /* Step Cards - 2 columns */
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
    /* Pricing Cards - 3 columns */
    .pricing-grid,
    .plans-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Sections */
    .pricing-section,
    .how-it-works {
        padding: 5rem 3rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* Container max-width */
    .container {
        max-width: 1140px;
    }
    
    /* Sections */
    .pricing-section,
    .how-it-works {
        padding: 6rem 4rem;
    }
}

/* Modal Responsiveness - All Modals */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-content {
        border-radius: 12px;
    }
    
    .modal-header {
        padding: 1rem;
        flex-wrap: wrap;
    }
    
    .modal-header h5 {
        font-size: 1.125rem;
    }
    
    .modal-body {
        padding: 1rem;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modal-footer .btn {
        width: 100%;
        margin: 0;
    }
    
    /* Login/Signup Modals */
    .loginBg,
    .signupBg {
        background-size: cover;
        background-position: center;
    }
    
    .loginBox,
    .signupBox {
        margin: 1rem;
        padding: 1.5rem;
    }
}

/* Tablet Modal Adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .modal-dialog {
        max-width: 600px;
    }
}

/* Touch-friendly elements on mobile */
@media (max-width: 767px) {
    /* Increase tap target sizes */
    a,
    button,
    .btn,
    .nav-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        min-height: 44px;
    }
    
    /* Checkboxes and radios */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }
}

/* Landscape phone adjustments */
@media (max-width: 767px) and (orientation: landscape) {
    .modal-dialog {
        max-height: calc(100vh - 2rem);
    }
    
    .modal-body {
        max-height: calc(100vh - 150px);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp rendering on retina displays */
    img,
    .logo,
    .icon {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    .navbar,
    .sidebar,
    .btn,
    .modal,
    footer {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .content-card,
    .pricing-card,
    .plan-card {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }
}