* { 
        margin: 0; 
        padding: 0; 
        box-sizing: border-box; 
        font-family: math; 
    }

    html { font-size: 10px; }
    
    body { 
        font-family: 'Roboto', sans-serif; 
        background: linear-gradient(to bottom right, #bdbfc2, #1d2729); 
        margin: 0; 
    }

    .dark-mode { 
        --primary-color: #242526; 
        --white-color: #18191a; 
        --black-color: #fff; 
    }

    .main-section { 
        display: flex; 
        justify-content: center; 
        flex-wrap: wrap; 
        gap: 2.3rem; 
        margin-top: 6rem; 
    }

    .container { 
        padding: 1rem; 
        text-align: center; 
        margin-top: 4rem;
    }

    .table-wrapper { 
        margin-top: 24px; 
        border: 1px solid #ccc; 
        border-radius: 0.64rem; 
        overflow-x: auto; /* Ensures table scrolls horizontally on smaller screens */
        background: #c9c9c9;
        color: #073101;
    }

    .table { 
        width: 100%; 
        border-collapse: collapse; 
    }

    .table th, 
    .table td { 
        padding: 32px; 
        font-size: 2.08rem; 
        border-bottom: 0.1rem solid #bababa; 
        background: #ffffff1a; 
    }

    .highlight{ 
        background-color: #bdbfc2;
        color: #155724;
        border-radius: 5px;
        padding: 24px;
        margin: 16px 0;
        box-shadow: 0 3.2px 8px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s;
        display: inline-block;
    }
    .highlight-week-day {
        background-color: #bdbfc2 !important;
        font-weight: bold;
        color: #155724;
    }
    .highlight-day {
        background-color: #ced2d8;
        box-shadow: 0 3.2px 8px rgba(0, 0, 0, 0.1);
    }
    .top-result {
        padding: 2rem 4rem;
        border-radius: 0.2rem;
        box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
        background: #ffffff1a;
        transition: transform 0.3sease, box-shadow 0.3sease;
        display: inline-block;
        font-size: 4rem;
        margin-top: 1rem;
        color: #070d47;
    }
    .currentDateTime {
        padding: 1rem 2rem;
        border-radius: 0.2rem;
        box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
        background: #ffffff1a;
        transition: transform 0.3sease, box-shadow 0.3sease;
        display: inline-block;
        font-size: 2rem;
        margin: 1rem;
        color: #070d47;
    }
    .timezone {
        padding: 1rem;
        font-size: 2rem;
    }
    .container h3{
        font-size: 2rem;
    }    

    .heading-primary { 
        font-size: 4rem; 
    }

    .heading-secondary { 
        font-size: 3.84rem; 
    }

    .paragraph { 
        font-size: 1.92rem; 
        color: #555; 
        padding: 2rem 0; 
    }

    /* Mobile Styling */
    @media (max-width: 600px) {
        .heading-primary { 
            font-size: 3.2rem; 
        }

        .heading-secondary { 
            font-size: 2.4rem; 
        }

        .paragraph { 
            font-size: 1.6rem; 
        }

        .table th, 
        .table td { 
            padding: 20px; 
            font-size: 1.8rem; 
        }

        /* Ensure table content is not too cramped on smaller devices */
        .table-wrapper { 
            margin-top: 16px; 
        }

        .table td .date-range { 
            display: flex; 
            flex-direction: column; 
        }

        /* Add horizontal scroll for large tables */
        .table-wrapper {
            overflow-x: auto; 
        }
        .highlight{
            padding: 1rem;
        }
    }
    .progress-bar-container {
        margin: 2rem;
    }

    .progress-bar {
        width: 100%;
        background-color: #f3f3f3;
        border: 1px solid #ccc;
        height: 30px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
    }
    
    #progress-bar-fill {
        height: 100%;
        background-color: #16b900;
        width: 0;
        transition: width 0.5s;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
    }
    
    #progress-text {
        position: absolute;
        width: 100%;
        text-align: center;
    }

    .faq-section {
        max-width: 110rem;
        margin: 4rem auto;
        text-align: left;
        padding: 2rem;
        background: #bdbfc2;
        border-radius: 1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    .faq-item {
        margin-bottom: 15px;
    }
    
    .faq-question {
        font-size: 2.2rem;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #031a65;
        padding: 10px 0;
    }
    
    .faq-answer {
        font-size: 1.8rem;
        display: none;
        padding-top: 5px;
    }
    
    .faq-item.active .faq-icon {
        transform: rotate(180deg);
    }
    
    
    .time-summary-cards {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin: 2rem 0;
        justify-content: space-around;
    }
    
    .summary-card {
        background: #f9f9f9;
        border-radius: 10px;
        padding: 1.5rem;
        flex: 1 1 250px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        transition: 0.3s;
    }
    
    .summary-card:hover {
        box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    }
    
    .summary-card h3 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .summary-card .highlight {
        font-size: 2rem;
        font-weight: bold;
        color: #242145;
    }