/* General Body Styles */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #a8b9db; /* Light blue background */
    color: #1c1e21; /* Dark text color */
    margin: 0;
    padding: 0;
}

/* Header Styles */
.header {
    background-color: #4267B2; /* Header background color */
    color: #ffffff; /* Header text color */
    padding: 15px 0;
    display: flex;
    gap: 40px;
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    position: fixed; /* Fixed header */
    width: 100%;
    z-index: 1000; /* Ensure it stays above other elements */
    top: 0;
    border-bottom: 1px solid #ffffff; /* Bottom border */
}

.header a {
    color: white; /* Link color */
    text-decoration: none; /* Remove underline */
}

.header a:hover {
    color: red; /* Change color on hover */
}

.header a h1 {
    margin: 0; /* Remove margin */
    font-size: 24px; /* Font size for header titles */
}

/* Footer Styles */
.footer {
    background-color: #4267B2; /* Footer background color */
    color: #ffffff; /* Footer text color */
    text-align: center; /* Centered text */
    width: 100%;
    z-index: 1000; /* Above other elements */
    bottom: 0;
    padding: 1px;
    border-top: 1px solid #ffffff; /* Top border */
}

.footer h5, .footer h6 {
    margin: 0; /* Remove margin */
    padding: 0; /* Remove padding */
}

/* Main Container Styles */
.container {
    width: 90%; /* Container width */
    max-width: 1200px; /* Maximum width */
    margin: 61px auto; /* Centering with top margin */
    padding: 20px; /* Padding inside container */
    background-color: #ffffff; /* White background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Search Bar Styles */
.search-bar {
    display: flex; /* Flexbox for alignment */
    justify-content: center; /* Center content */
    margin-bottom: 20px; /* Space below */
}

.search-bar input[type="text"] {
    width: 100%; /* Full width */
    max-width: 600px; /* Maximum width */
    padding: 12px; /* Padding inside the input */
    font-size: 16px; /* Font size */
    border: 2px solid #4267b2; /* Border color */
    border-radius: 24px; /* Rounded input */
    background-color: #ffffff; /* White background */
    color: blue; /* Text color */
    outline: none; /* Remove outline */
    text-align: center; /* Center text */
}

/* Event Section Styles */
.event-date {
    font-size: 24px; /* Font size for event date */
    color: white; /* Text color */
    background-color: #4267b2; /* Background color */
    padding: 10px; /* Padding inside */
    border-radius: 8px; /* Rounded corners */
    margin-bottom: 20px; /* Space below */
    text-align: center; /* Center text */
    width: auto; /* Full width */
    font-weight: bold; /* Bold text */
}

.event-time {
    font-size: 16px; /* Font size for event time */
    color: red; /* Color for event time */
    margin-right: 10px; /* Space to the right */
    white-space: nowrap; /* Prevent line break */
}

.event {
    background-color: #ffffff; /* White background */
    border: 1px solid #ddd; /* Light border */
    border-radius: 8px; /* Rounded corners */
    margin-bottom: 15px; /* Space below */
    padding: 15px; /* Padding inside */
    cursor: pointer; /* Pointer on hover */
    position: relative; /* Position relative for children */
    transition: box-shadow 0.2s, border-color 0.2s; /* Transition effects */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.event:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow on hover */
    border-color: #4267B2; /* Change border color on hover */
}

/* Event Content Styles */
.event-content {
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center items vertically */
    text-align: left; /* Left align text */
}

.event-description {
    font-size: 18px; /* Font size for description */
    font-weight: bold; /* Bold text */
    color: blue; /* Text color */
}

/* Category Section Styles */
.category-section {
    margin-bottom: 30px; /* Space below */
}

.category-section h2 {
    font-size: 24px; /* Font size for category titles */
    color: #4267B2; /* Text color */
    border-bottom: 1px solid #ddd; /* Bottom border */
    padding-bottom: 10px; /* Padding below title */
    margin-bottom: 20px; /* Space below */
    border-radius: 8px; /* Rounded corners */
    padding: 10px; /* Padding inside */
    background-color: #f0f2f5; /* Light background */
}

/* Channel List Styles */
.channel-list {
    display: flex; /* Flexbox for layout */
    flex-wrap: wrap; /* Wrap items */
    margin-top: 10px; /* Space above */
    padding-left: 0; /* No padding on the left */
    text-align: left; /* Left align text */
}

.channel-item {
    margin-right: 10px; /* Space to the right */
    margin-bottom: 10px; /* Space below */
    gap: 10px; /* Gap between items */
    display: inline-flex; /* Inline flex for layout */
}

.channel-item a {
    display: inline-block; /* Block display for links */
    padding: 2px 5px; /* Padding inside links */
    color: white; /* Text color */
    text-decoration: none; /* Remove underline */
    font-size: 13px; /* Font size */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s; /* Transition for background */
    background-color: #365899; /* Background color */
}

.channel-item a:hover {
    background-color: red; /* Change background color on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .event-time, .event-description {
        font-size: 14px; /* Smaller font size */
    }

    .search-bar input[type="text"] {
        font-size: 14px; /* Smaller input font size */
    }

    .header, .footer {
        padding: 8px 0; /* Reduced padding */
    }

    h1 {
        font-size: 28px; /* Smaller h1 font size */
    }
}