@media (max-width: 767px) {
    
    /* Global fixes to prevent horizontal overflow */
    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    
    /* Container width constraints */
    .humble-section,
    .history-section,
    .chef-section,
    .rooted-section {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* about-head-section */
    .about-head {
        height: 60vh;
        padding: 0 20px; /* Add horizontal padding instead of none */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .about-head-grid {
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .learn-btn {
        margin: 20px auto 0 auto;
        margin-top: 0;
        width: 140px; /* Reduced width for mobile */
        font-size: 15px; /* Slightly smaller font */
    }

    /* humble-section */
    .humble-section {
        background-color: #111111;
        padding: 30px 20px; /* Reduced padding from 30px to 20px */
        max-width: 100vw;
        overflow-x: hidden;
    }

    .humble-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }

    .humble-grid-right {
        order: 1;
        width: 100%;
        max-width: 100%;
    }

    .humble-grid-left {
        order: 2;
        width: 100%;
        max-width: 100%;
        text-align: center;
        height: auto; /* Remove fixed height */
    }

    .right-img-wrapper {
        width: 100%;
        max-width: 320px; /* Constrain maximum width */
        margin: 0 auto; /* Center the image wrapper */
        height: 400px; /* Reduced height for mobile */
    }

    .right-second-img {
        display: none;
    }

    .humble-description {
        font-size: 18px; /* Slightly smaller for mobile */
        line-height: 22px;
        padding-bottom: 15px;
    }

    /* history-section */
    .history-section {
        padding: 30px 20px; /* Reduced padding */
        max-width: 100vw;
        overflow-x: hidden;
    }

    .history-grid-section {
        display: flex;
        flex-direction: column;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .history-grid-section-left {
        width: 100%;
        order: 2;
        max-width: 100%;
    }

    .history-grid-section-right {
        width: 100%;
        order: 1;
        max-width: 100%;
    }

    .history-head-grid {
        margin: 0 auto;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    .about-title {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap; /* Allow wrapping if needed */
        gap: 15px; /* Slightly smaller gap */
    }

    .about-title .line {
        width: 40px; /* Reduced from 50px */
        height: 2px;
    }

    .year {
        padding-top: 10px;
        font-size: 80px; /* Reduced from 100px for mobile */
    }

    .line {
        display: none;
    }

    .timeline {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 15px; /* Add gap between items */
    }

    .timeline-item {
        width: 100%;
        max-width: 100%;
    }

    .icon-timeline {
        width: 70px; /* Reduced from 90px */
        height: 70px;
    }

    .timeline-img {
        width: 30px; /* Reduced from 40px */
    }

    /* chef-section */
    .chef-section {
        display: block;
        padding: 30px 20px; /* Reduced padding */
        max-width: 100vw;
        overflow-x: hidden;
    }

    .chef-grid {
        display: block;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .chef-grid-box {
        width: 100%;
        max-width: 320px; /* Constrain maximum width */
        margin: 0 auto 30px auto; /* Center and add bottom margin */
        overflow: hidden;
    }

    .chef-section-para {
        font-size: 16px; /* Slightly smaller for mobile */
        line-height: 20px;
    }

    .view-btn {
        margin: 20px auto 0 auto;
        display: block;
        width: 120px; /* Slightly smaller for mobile */
        font-size: 15px;
    }

    /* rooted-section */
    .rooted-section {
        padding: 40px 20px; /* Reduced from 60px to 20px */
        max-width: 100vw;
        overflow-x: hidden;
    }

    .rooted-minihead {
        font-size: 18px; /* Much smaller than 42px - that was too large */
        line-height: 22px; /* Adjusted proportionally */
        padding: 0 10px; /* Add some padding */
    }

    .section-head {
        font-size: 28px; /* Ensure section headers are appropriately sized */
        line-height: 32px;
    }

    .rooted-grid-section {
        display: block;
        gap: 20px; /* Reduced gap */
        padding: 20px 0px;
        width: 100%;
        max-width: 100%;
    }

    .grid-box-lr {
        text-align: center;
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px; /* Add space between sections */
    }

    .grid-box-mid {
        width: 100%;
        max-width: 100%;
        height: 40vh; /* Reduced from 50vh */
        margin-bottom: 30px;
        overflow: hidden;
    }

    .rooted-box {
        padding: 15px 0px; /* Reduced padding */
        width: 100%;
        max-width: 100%;
    }

    .grid-box-para {
        font-size: 15px; /* Slightly smaller for mobile */
        line-height: 18px;
    }

    /* Additional mobile-specific fixes */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Ensure no elements extend beyond viewport */
    .about-title h2,
    .chef-grid-title,
    .section-head {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Fix any potential margin/padding issues */
    .food-title {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
    }

    .food-line {
        max-width: 40px; /* Ensure lines don't get too wide */
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* humble-section */
    .humble-section {
        background-color: #111111;
        padding: 30px 30px; /* Reduced padding from 30px to 20px */
        max-width: 100vw;
        overflow-x: hidden;
    }
     /* history-section */
    .history-section {
        padding: 30px 30px; /* Reduced padding */
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* rooted-section */
    .rooted-section {
        padding: 40px 30px; /* Reduced from 60px to 20px */
        max-width: 100vw;
        overflow-x: hidden;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .about-head {
        height: 60vh;
        padding: 0 20px; /* Add horizontal padding instead of none */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* humble-section */
    .humble-section {
        background-color: #111111;
        padding: 30px 30px; /* Reduced padding from 30px to 20px */
        max-width: 100vw;
        overflow-x: hidden;
    }
     /* history-section */
    .history-section {
        padding: 30px 30px; /* Reduced padding */
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* rooted-section */
    .rooted-section {
        padding: 40px 30px; /* Reduced from 60px to 20px */
        max-width: 100vw;
        overflow-x: hidden;
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {}