/* mobile_overrides.css */

@media screen and (max-width: 768px) {

    .packages-title{
        font-size: 2.2rem;
        margin: 3rem 0 1rem;
        line-height: 2rem;
    }

    .package-subheading {
        font-size: 1.4rem;
        margin: 0.8rem 0  3rem;
    }

    .package-name {
        font-size: 2.3rem;
    }

    .package-description {
        font-size: 1.2rem;
    }

    /* Make #explore-more positioned in the center instead of the right */
    #explore-more {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 90%; /* Adjust width for better mobile fit */
        max-width: 340px; /* Keep a max-width to prevent it from being too wide on tablets */
    }

    /* Create a more mobile friendly design for the FAQ section */
    .faq-section {
        /* Ensure the section itself is centered and takes appropriate width */
        width: calc(100% - 30px); /* 15px padding on each side of the viewport */
        margin-left: auto;
        margin-right: auto;
        padding: 0; /* Remove padding from the section itself */
    }

    .faq-item {
        width: 100%; /* Ensure FAQ items take full width of their parent */
        margin-left: auto; /* Center the FAQ items if they somehow aren't */
        margin-right: auto;
        margin-bottom: 15px; /* Slightly reduced margin between items */
    }

    .faq-question {
        font-size: 18px; /* Smaller font size for questions */
        padding: 15px; /* Reduced padding */
        text-align: left; /* Ensure text is left-aligned within the button */
    }

    .faq-answer {
        /* No padding here when hidden, padding only applied when active */
        font-size: 16px; /* Smaller font size for answers */
    }

    .faq-item.active .faq-answer {
        padding: 15px; /* Reduced padding for active state */
    }

    .packages-section {
        padding: 1.5rem;
    }

    /* Make the packages in package-container a little bit wider on mobile */
    .package-container {
        flex-direction: column; /* Ensure column layout for packages */
        align-items: center; /* Center packages horizontally */
        gap: 1.5rem;
        padding: 0rem; /* Reduced padding to make packages wider */
    }
    .package {
        width: calc(100% - 1rem); /* Now calculates based on 0.5rem padding on each side */
        max-width: none; /* Remove max-width constraint to allow it to expand */
    }

    /* Add padding to the client-bar-title for better wrapping */
    .client-bar-title {
        padding: 0 20px; /* Add 20px padding on left and right */
        box-sizing: border-box; /* Include padding in the element's total width */
    }
}

@media screen and (max-width: 480px) {
    /* Further adjustments for smaller mobile screens */

    .packages-title{
        font-size: 2.2rem;
        margin: 2.7rem 0 1rem;
        line-height: 2.7rem;
    }

    .package-subheading {
        font-size: 1.2rem;
        margin: 1.4rem 0 2.5rem;
    }

    .package-name {
        font-size: 2.2rem;
    }

    .package-description {
        font-size: 1.1rem;
        height: 4.5rem;
        margin-top: 1rem;
    }

    #explore-more {
        width: 95%; /* Even wider for very small screens */
    }

    .faq-section {
        width: calc(100% - 20px); /* 10px padding on each side of the viewport */
    }

    .faq-item {
        margin-bottom: 10px; /* Further reduced margin between items */
    }

    .faq-question {
        font-size: 16px;
        padding: 12px;
    }

    .faq-item.active .faq-answer {
        padding: 12px;
        font-size: 14px;
    }

    .packages-section {
        padding: 1rem;
    }

    .package-container {
        padding: 0; /* Further reduced padding for very small screens */
    }
    .package {
        width: calc(100%); /* Now calculates based on 0.25rem padding on each side */
        max-width: none; /* Remove max-width constraint */
    }

    /* Adjust padding for client-bar-title on very small screens */
    .client-bar-title {
        padding: 0 15px; /* Slightly less padding for very small screens */
    }
}