/* ===========================================
   MEDIA QUERIES FOR SECTIONS IN CODEZ.CSS
   =========================================== */

/* ========== 1200px BREAKPOINT ========== */
@media (max-width: 1200px) {
    /* Hero Section */
    .sect1 {
        height: 680px;
        padding: 32px 40px;
        background-size: cover !important;
    }
    
    .text {
        width: 85% !important;
        max-width: 900px;
        margin: 8% auto 0;
    }
    
    .text1 {
        font-size: 26px;
        line-height: 1.4;
    }
    
    .text1 h1 {
        font-size: 26px;
        line-height: 1.4;
    }
    
    .text2 {
        font-size: 16px;
        line-height: 1.5;
        position: relative;
        top: -35px !important;
        margin-top: 10px;
    }
    
    .order-btn {
        margin-top: 30px;
        position: relative;
        top: 25rem !important;
    }
    
    /* Section 2 */
    .sect2 {
        padding: 80px 60px;
    }
    
    .sect2 h1 {
        font-size: 36px;
        line-height: 1.2;
    }
    
    .boxgroup {
        justify-content: center;
        gap: 25px;
    }
    
    .sub {
        width: 280px;
        height: 340px;
    }
    
    .product-image {
        width: 100%;
        height: 220px;
    }
    
    /* Section 5 */
    .sect5 {
        padding: 80px 60px;
    }
    
    .sect5 h1 {
        font-size: 36px;
        line-height: 1.2;
    }
    
    .five-btn {
        width: 320px;
    }
    
    .Big-div {
        gap: 30px;
    }
    
    .lhdiv img {
        max-width: 100%;
        height: auto;
    }
    
    .rhdiv .imgup img {
        width: 240px;
        height: 200px;
    }
    
    .imgdown img {
        height: 220px;
    }
    
    /* Section 6 */
    .sect6 {
        flex-direction: column;
        align-items: center;
        padding: 0 60px;
        gap: 60px;
    }
    
    .lsubsect {
        margin-top: 60px;
        margin-bottom: 60px;
        width: 100%;
    }
    
    .box-grid {
        grid-template-columns: 1fr;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .box-card {
        max-width: 800px;
    }
}

/* ========== 768px BREAKPOINT ========== */
@media (max-width: 778px) {
    /* Hero Section */
    .sect1 {
        height: 500px;
        padding: 20px 30px;
    }
      .mobile-nav-links{
        margin-top: 93px;
        width: 88%;
    }
    .text {
        width: 95% !important;
        margin: 12% auto 0;
    }
    
    .text1 {
        font-size: 22px;
        line-height: 1.3;
    }
    
    .text1 h1 {
        font-size: 22px;
        line-height: 1.3;
    }
    
    .text1 h1 br {
        display: none;
    }
    
    .text2 {
        font-size: 15px;
        line-height: 1.4;
        top: -25px !important;
    }
    
    .text2 p {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .order-btn {
        width: 160px;
        font-size: 14px;
        margin-top: 10px;
        top: 210px !important;
    }
    
    /* Section 2 */
    .sect2 {
        padding: 60px 40px;
    }
    
    .sect2 h1 {
        font-size: 32px;
    }
    
    .boxgroup {
        flex-direction: column;
        align-items: center;
    }
    
    .sub {
        width: 90%;
        max-width: 400px;
        height: 320px;
        margin-bottom: 30px;
    }
    
    .product-image {
        height: 200px;
    }
    
    .pinfo {
        padding: 15px;
        top: -25px;
    }
    
    .ptitle {
        font-size: 16px;
        line-height: 1.3;
    }
    
    /* Section 4 */
    .sect4 {
        height: 350px;
        padding: 20px;
        background-size: cover;
    }
    
    /* Section 5 */
    .sect5 {
        padding: 60px 40px;
    }
    
    .sect5 h6 {
        font-size: 16px;
    }
    
    .sect5 h1 {
        font-size: 28px;
        line-height: 1.2;
    }
    
    .five-btn {
        width: 280px;
        font-size: 15px;
    }
    
    .Big-div {
        flex-direction: column;
        gap: 25px;
    }
    
    .lhdiv img {
        max-width: 100%;
        height: auto;
    }
    
    .imgup {
        flex-direction: column;
        gap: 20px;
        top: 0;
    }
    
    .rhdiv .imgup img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }
    
    .imgdown {
        margin-top: 20px;
        top: 0;
    }
    
    .imgdown img {
        height: 200px;
    }
    
    .imgpos img {
        max-width: 100%;
        height: auto;
    }
    
    /* Section 6 */
    .sect6 {
        padding: 0 40px;
        gap: 40px;
    }
    
    .lsubsect {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
    .section-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .section-header h2 {
        font-size: 28px;
    }
    
    .box-card {
        flex-direction: column;
    }
    
    .box-image {
        flex: 0 0 200px;
        width: 100%;
    }
    
    .box-info {
        padding: 25px;
    }
    
    .box-title {
        font-size: 20px;
    }
    
    .current-price {
        font-size: 24px;
    }
    
    .buy-btn {
        padding: 12px 24px;
        font-size: 15px;
    }
}

/* ========== 500px BREAKPOINT ========== */
@media (max-width: 500px) {
    /* Hero Section */
    .sect1 {
        height: 420px;
        padding: 15px 20px;
    }
    
    .text {
        width: 100% !important;
        margin: 15% auto 0;
    }
    
    .text1 {
        font-size: 18px;
        line-height: 1.2;
    }
    
    .text1 h1 {
        font-size: 18px;
        line-height: 1.2;
    }
    
    .text2 {
        font-size: 14px;
        line-height: 1.3;
        top: -15px !important;
        padding: 0 10px;
    }
    
    .order-btn {
        width: 140px;
        font-size: 13px;
        padding: 8px 12px;
        margin-top: 5px;
        top: 200px ;
    }
    
    /* Section 2 */
    .sect2 {
        padding: 40px 20px;
    }
    
    .sect2 h1 {
        font-size: 28px;
        line-height: 1.1;
    }
    
    .sub {
        width: 100%;
        height: 280px;
    }
    
    .product-image {
        height: 160px;
    }
    
    .pinfo {
        padding: 12px;
        top: -20px;
        height: 130px;
    }
    
    .ptitle {
        font-size: 15px;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    
    /* Section 4 */
    .sect4 {
        height: 250px;
        padding: 15px;
    }
    
    /* Section 5 */
    .sect5 {
        padding: 40px 20px;
    }
    
    .sect5 h6 {
        font-size: 14px;
        letter-spacing: 1px;
    }
    
    .sect5 h1 {
        font-size: 24px;
        line-height: 1.1;
    }
    
    .five-btn {
        width: 240px;
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .Big-div {
        gap: 15px;
    }
    
    .imgup {
        gap: 15px;
    }
    
    .rhdiv .imgup img {
        height: 150px;
    }
    
    .imgdown img {
        height: 160px;
    }
    
    .imgpos {
        margin-top: 20px;
    }
    
    .imgpos img {
        max-width: 90%;
    }
    
    /* Section 6 */
    .sect6 {
        padding: 0 20px;
        gap: 30px;
    }
    
    .lsubsect {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    
    .section-header h2 {
        font-size: 24px;
    }
    
    .box-info {
        padding: 20px;
    }
    
    .box-title {
        font-size: 18px;
    }
    
    .box-description {
        font-size: 13px;
    }
    
    .current-price {
        font-size: 22px;
    }
    
    .original-price {
        font-size: 14px;
    }
    
    .buy-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .price-wrapper {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }
    
    /* Additional mobile optimizations */
    body {
        font-size: 14px;
    }
}

/* ========== UTILITY CLASSES ========== */
@media (max-width: 768px) {
    .hide-on-tablet {
        display: none !important;
    }
    
    .text-center-mobile {
        text-align: center;
    }
    
    .stack-mobile {
        flex-direction: column;
    }
}

@media (max-width: 500px) {
    .hide-on-mobile {
        display: none !important;
    }

    .work-time {
        display: none;
    }
    
    .show-on-mobile {
        display: block !important;
    }
    
    .full-width-mobile {
        width: 100% !important;
    }
}

/* ========== FIX FOR SPECIFIC ELEMENTS ========== */
@media (max-width: 1200px) {
    /* Fix for text centering */
    .text1 h1 {
        text-align: center;
    }
    
    .text2 p {
        text-align: center;
    }
    
    /* Center order button */
    .orderbtn {
        display: flex;
        justify-content: center;
    }
}

/* ========== IMPORTANT OVERRIDES ========== */
@media (max-width: 500px) {
    
    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }
}