/* General Styles */
body {
    margin: 0;
    background: #4b4a3c; /* Site background */
    font-family: Arial, sans-serif;
    color: #ffffff; /* Default text color for contrast */
}

/* Header */
header {
    text-align: center;
    padding: 20px 0;
    background: #5a594a; /* Your chosen color where logo stands out */
    border-bottom: 2px solid #4a4938; /* Slightly darker for subtle separation */
}

.logo {
    max-width: 250px;
    filter: none; /* Ensure logo shows in original colors */
}

/* Content wrapper */
.content {
    width: 90%;
    max-width: 1100px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

/* Video card */
.video-block {
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: 0.2s ease;
}

.video-block:hover {
    transform: scale(1.02);
}

/* Video styling */
video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .content {
        grid-template-columns: 1fr; /* Single column on small screens */
        margin: 20px auto;
        gap: 20px;
    }

    header {
        padding: 15px 10px;
    }

    .logo {
        max-width: 180px; /* Smaller logo on mobile */
    }
}