* {
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f7;
    /* Light gray background */
}

.header {
    background-color: #009EDB;
    /* Facebook blue */
    color: #e4ebf6;
    /* White text */
    text-align: center;
    display: flex;
    /* Use flexbox for alignment */
    flex-direction: column;
    /* Stack items vertically */
    align-items: center;
    /* Center items horizontally */
    /* Center horizontally */
    padding: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo {
    width: 50px;
    /* Adjust logo size */
    height: auto;
    /* Maintain aspect ratio */
}

.header h2 {
    margin-top: 5px;
    /* Space between logo and title */
}

.video-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.video-item {
    display: flex;
    /* Flexbox for side-by-side layout */
    background-color: #ffffff;
    /* White background for cards */
    border-radius: 12px;
    /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    /* Soft shadow */
    margin: 15px 0;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    /* Increased max-width for better layout */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transition for scaling and shadow */
}

.video-item:hover {
    transform: scale(1.05);
    /* Slightly enlarge on hover */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    /* Enhanced shadow on hover */
}

.video-embed {
    flex-shrink: 0;
    /* Prevent iframe from shrinking */
}

.video-embed iframe {
    width: 100%;
    /* Set iframe to cover half of the item */
    height: auto;
    /* Maintain aspect ratio */
}

.video-details {
    margin-left: 15px;
    /* Space between video and details */
    flex-grow: 1;
    /* Allow details to take remaining space */
}

.video-details a {
    text-decoration: none;
    color: #007aff;
    /* Blue for links */
    font-size: 14px;
}

.video-details a:hover {
    text-decoration: underline;
    /* Underline effect on link hover */
}

.video-details p {
    color: #666666;
    font-size: 12px;
    /* Medium gray for details */
}


/* Responsive styles */

@media (max-width: 600px) {
    .header h1 {
        font-size: 24px;
    }
    .video-item {
        flex-direction: column;
        /* Stack items vertically on small screens */
        align-items: center;
        /* Center align items */
        padding: 15px;
        font-size: 16px;
    }
    .video-embed iframe {
        width: 100%;
        /* Full width on small screens */
        height: auto;
        /* Auto height to maintain aspect ratio */
        max-width: none;
        /* Remove max-width constraint for small screens */
        max-height: auto;
        /* Max height constraint for small screens */
    }
}

.circular-image {
    width: 150px;
    /* Set the desired width */
    height: 150px;
    /* Set the desired height */
    border: 1px solid rgba(64, 113, 238, 0.275);
    /* Dark blue border */
    border-radius: 50%;
    /* Make it circular */
    overflow: hidden;
    /* Ensure no overflow */
    display: flex;
    /* Center the image */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
}

.circular-image img {
    width: 100%;
    /* Ensure image covers the div */
    height: auto;
    /* Maintain aspect ratio */
}

.image-caption {
    margin-top: 0px;
    /* Add space between image and text */
    text-align: center;
    /* Center align the text */
}