/* Reset and base styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
}
h1 {
    font-size: 2.5em;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.3em;
}

.subtitle {
    font-size: 1.2em;
    font-weight: 400;
    color: #555;
    margin-top: -10px;
    margin-bottom: 0px;
}

/* Media query for mobile devices (screen width 768px or less) */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8em; /* Smaller font size for mobile */
    }

    .subtitle {
        font-size: 1em; /* Adjust subtitle font size for mobile */
    }
}
/* Main table styling for all devices */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius: 10px;
    overflow: hidden;
}

/* Table header styling */
.table thead th {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    padding: 12px;
    text-transform: uppercase;
}

/* Default table styling for PC screens */
.table th, .table td {
    padding: 15px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #dee2e6;
}

/* Alternate row colors */
.table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
.table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Hover effect for table rows */
.table tbody tr:hover {
    background-color: #f1f1f1;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    /* Mobile-specific table adjustments */
    .table th, .table td {
        font-size: 14px; /* Slightly larger font size */
        padding: 10px;   /* Adjusted padding */
        white-space: nowrap; /* Prevent text wrapping for now */
    }

    /* Slot column size adjustment */
    .table td:nth-child(1), .table th:nth-child(1) {
        min-width: 80px; /* Set reasonable width for Slot column */
    }

    /* Enable table scrolling for small screens */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto; /* Horizontal scroll on small screens */
        -webkit-overflow-scrolling: touch; /* Smooth mobile scrolling */
    }
}

/* PC-specific styles (larger screens) */
@media (min-width: 769px) {
    .table th, .table td {
        font-size: 16px;  /* Larger font for PC */
        padding: 15px;    /* More padding for spacious layout */
    }

    /* Ensure all columns, including 'Time Left', are visible */
    .table td:nth-child(5), .table th:nth-child(5) {
        display: table-cell; /* Show 'Time Left' column on PC */
    }
}



/* Footer styles */
footer {
    margin-top: 50px;
}

.text-center {
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn-study-materials {
    background-color: #007bff; /* Change the background color */
    border-color: #007bff;     /* Change the border color */
    color: #ffffff;            /* Text color */
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0 4px #999;
    padding: 12px 24px; /* Adjusted padding for size */
    font-size: 16px; /* Set a consistent font size */
}

.btn-study-materials:hover {
    background-color: #0056b3; /* Darker shade on hover */
    border-color: #004085;
}

.btn-study-materials:active {
    background-color: #004085;  /* Even darker when active */
    border-color: #003865;
    box-shadow: 0 2px #666;
    transform: translateY(2px);
}

/* Social section styles */
.social-section {
    background-color: #f0f4f8; /* Light background for contrast */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Padding around the content */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin-top: 10px; /* Space above the section */
    
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center align content horizontally */
    align-items: center; /* Center align content vertically */
    gap: 15px; /* Add space between text and icons */
}

/* Follow text styling */
.social-title {
    font-size: 1.2rem; /* Appropriate font size */
    margin: 0; /* Remove margins to keep it aligned with icons */
    font-weight: bold; /* Bold title for emphasis */
    color: #333; /* Dark color for better readability */
    white-space: nowrap; /* Prevent the text from wrapping */
}

/* Social icons */
.social-icons {
    display: flex; /* Use flexbox for icons */
    gap: 15px; /* Space between icons */
}

.social-icon img {
    width: 40px; /* Standard size for all icons */
    height: 40px; /* Standard size for all icons */
    transition: transform 0.2s; /* Smooth transition for hover effect */
}

.social-icon:hover img {
    transform: scale(1.1); /* Enlarge slightly on hover */
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .social-section {
        flex-wrap: nowrap; /* Prevent wrapping on smaller screens */
        justify-content: center; /* Keep everything centered */
    }

    .social-title {
        font-size: 1rem; /* Slightly smaller text for mobile */
    }

    .social-icon img {
        width: 35px; /* Slightly smaller icons for mobile */
        height: 35px; /* Adjust height to match width */
    }
}