/* Mobile-friendly stacked layout with expand/collapse */
@media (max-width: 768px) {

    /* Stack the table rows like cards */
    .table-packages {
        display: block;
        width: 100%;
    }

    .table-packages th {
        display: block; /* Display headers above data */
        font-size: 1rem; /* Set a proper font size */
        font-weight: bold;
        background-color: #db9f5b; /* Mustard background for headers */
        color: #fff;
        padding: 10px;
        margin-bottom: 10px;
        text-align: center;
        cursor: pointer; /* Add a pointer to indicate clickable */
    }

    .table-packages td {
        display: none; /* Initially hide content */
        background-color: #f6efe5; /* Light background for data cells */
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        text-align: left;
        font-size: 0.9rem; /* Adjust font size for mobile readability */
        border: 1px solid #ccc;
        transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; /* Smooth transition */
    }

    .table-packages td.open {
        display: block; /* Show the content when clicked */
        max-height: 1000px; /* Allow expansion */
        padding: 15px;
    }

    /* Heading adjustments for mobile */
    h1, h2, h3 {
        font-size: 1.4rem; /* Adjust heading sizes for mobile */
    }
}

/* Pixel 7 specific styles */
@media only screen 
and (min-device-width: 393px) 
and (max-device-width: 393px) 
and (min-device-height: 851px) 
and (max-device-height: 851px) 
and (-webkit-device-pixel-ratio: 2.75) {
    .text-box {
        margin: 15px; /* Adding 5px of extra space */
    }
}