html {
        font-size: 16px; 
    }
    body {
        font-family: 'Roboto', 'Arial', sans-serif; /* Using Roboto as primary, Arial as fallback */
        line-height: 1.6; 
        color: #333; 
        -webkit-font-smoothing: antialiased; /* Smoother fonts on WebKit browsers */
        -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
    }

    /* New H1 styling for the main page title */
    .main-page-title {
        text-align: center;
        font-size: 1.6rem; /* Slightly adjusted from 2rem */
        color: #2c3e50; 
        margin-top: 15px; 
        margin-bottom: 15px; 
        font-weight: 700; /* Bolder for H1 */
        line-height: 1.3;
        font-family: 'Open Sans', 'Arial', sans-serif; /* Different font for H1 if desired */
    }

    /* Styles for player and gallery remain unchanged as per request */
    .video-container {
        position: relative;
        width: 100%;
        max-width: 800px; 
        margin: 0 auto; 
        overflow: hidden;
        border-top-left-radius: 10px; /* Slightly smaller radius */
        border-top-right-radius: 10px;
    }
    .video-container::after {
        content: "";
        display: block;
        padding-top: 56.25%;
    }
    #main-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    .gap {
        background-color: #202020; 
        height: 8px; 
        width: 100%;
        max-width: 800px; 
        margin: 0 auto;  
    }
    .gallery {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden; 
        padding: 10px 0; 
        gap: 8px; 
        scrollbar-width: thin;
        scrollbar-color: #ffcc00 #333;
        direction: rtl; 
        max-width: 800px; 
        margin: 0 auto; 
        white-space: nowrap; 
        scroll-snap-type: x mandatory;
        background-color: #202020; 
        position: relative;
        border-bottom-left-radius: 10px; /* Slightly smaller radius */
        border-bottom-right-radius: 10px;
    }
    .gallery::-webkit-scrollbar { height: 8px; }
    .gallery::-webkit-scrollbar-thumb { background: #ffcc00; border-radius: 10px; }
    .gallery img {
        flex: 0 0 auto; 
        width: 120px; 
        height: 70px;  
        object-fit: cover;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; 
        scroll-snap-align: start;
    }
    .gallery img:hover {
        transform: scale(1.08); 
        box-shadow: 0 0 10px rgba(255, 204, 0, 0.7); 
    }
    .responsive-img { width: 100%; height: auto; display: block; }

    /* FAQ Section Styling */
    .faq-section {
        background-color: #f8f9fa; /* Lighter grey */
        padding: 25px 20px; /* More padding */
        border-radius: 8px;
        margin-top: 30px; 
    }
    .faq-section h2 {
        text-align: center;
        color: #2c3e50;
        margin-bottom: 30px; /* More space */
        font-size: 1.7rem; 
        font-weight: 600;
    }
    .faq-item { 
        margin-bottom: 20px; /* More space between items */
    }
    .faq-question {
        font-size: 1.15rem; 
        font-weight: 600; /* Semi-bold for questions */
        color: #0056b3; 
        margin-bottom: 10px; /* More space before answer */
        display: block; 
        text-decoration: none;
        font-family: 'Open Sans', 'Arial', sans-serif;
    }
    .faq-question:hover {
        color: #003d80;
        text-decoration: underline;
    }
    .faq-answer {
        font-size: 0.95rem; 
        color: #1b1b1b; 
        padding: 15px; /* More padding */
        background-color: #ffffff; /* White background for answers */
        border-left: 4px solid #007bff; /* Brighter blue border */
        border-radius: 0 6px 6px 0;
        line-height: 1.7;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .faq-view-all { 
        display: block;
        text-align: center;
        margin-top: 25px;
        font-weight: bold;
    }

    /* Updated Promo Bar Styling */
    .player-promo-bar {
        background-color: #ff8c00; 
        color: #ffffff; 
        font-weight: 700; 
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
        font-size: 14px; /* גודל פונט כפי שביקשת */
        text-align: center; 
        padding: 10px; /* רווח פנימי כפי שביקשת */
        border-bottom: 3px solid #cc7000; 
        margin-left: auto;  /* שומר על מרכוז אם יש max-width */
        margin-right: auto; /* שומר על מרכוז אם יש max-width */
        margin-top: 0; /* אפס מרווח עליון, אם רוצים לשלוט בו ממקום אחר */
        margin-bottom: 10px; /* <<< הרווח הרצוי מתחת לבאנר, ומעל הנגן >>> */
        max-width: 800px; 
        width: 100%; 
        box-sizing: border-box;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 
    }
    .player-promo-bar a {
        color: #ffffff; 
        text-decoration: none;
        transition: color 0.2s ease, text-shadow 0.2s ease;
        display: block; 
    }
    .player-promo-bar a:hover {
        color: #fff5e6; 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
        /* אין צורך ב-margin-bottom כאן */
    }
    
    /* Styling for the main content introduction (now at the bottom) */
    .content-section {
        padding: 30px 20px; /* More padding */
        margin-top: 30px; 
        margin-bottom: 30px;
        background-color: #ffffff; 
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    }
    .homepage-intro { 
        text-align: center;
    }
    .homepage-intro h2 { 
        font-size: 1.9rem;  
        color: #2c3e50; 
        margin-bottom: 25px; 
        font-weight: 700;
        font-family: 'Open Sans', 'Arial', sans-serif;
    }
    .homepage-intro p {
        font-size: 1.05rem; 
        color: #34495e;  
        line-height: 1.75; 
        max-width: 750px; 
        margin: 0 auto 20px auto;
    }

    /* Styling for Genre Section */
    .genre-section {
        padding-top: 15px; 
    }
    .genre-section-title { 
        text-align: center;
        font-size: 1.8rem; 
        color: #2c3e50;
        margin-bottom: 30px; 
        font-weight: 600;
        font-family: 'Open Sans', 'Arial', sans-serif;
    }
    .genre-card .thumbnail { 
        border: 1px solid #e0e0e0; /* Lighter border */
        border-radius: 10px; /* More rounded */
        overflow: hidden; 
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        background-color: #FF8C00; /* Assuming a nice shade of Orange for example */
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    }
    .genre-card .thumbnail:hover {
        transform: translateY(-6px) scale(1.02); /* Slightly more pronounced hover */
        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    }
    .genre-card .caption { 
        padding: 15px 10px; 
        text-align: center;
        min-height: 115px; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Background color is inherited from .thumbnail or set explicitly if different */
    }
    .genre-card .title2 { 
        font-size: 1.15rem; 
        font-weight: 700; /* Bolder title */
        color: #FFFFFF; 
        margin-bottom: 8px; 
        text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Stronger shadow for white on orange */
        font-family: 'Open Sans', 'Arial', sans-serif;
    }
    .genre-card .caption p:not(.title2) {
        font-size: 0.9rem; 
        color: #f0f0f0; /* Slightly off-white for better blend */
        line-height: 1.5;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 
    }
    .img-fluid { 
        max-width: 100%;
        height: auto;
        display: block; /* Remove any extra space below image */
    }

    /* Sidebar elements styling */
    .sidebar-item {
        margin-bottom: 25px; /* More space */
    }
    .sidebar-item .thumbnail {
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff; 
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    }
    .sidebar-item .caption {
        padding: 12px; /* More padding */
        font-size: 0.9rem; 
        text-align: center;
        background-color: #f8f9fa;
    }
    .sidebar-item .caption a {
        color: #0056b3;
        font-weight: 600; /* Semi-bold link */
    }

    /* Responsive Adjustments */
    @media (max-width: 1199px) { /* Adjust for slightly larger than tablets */
      .main-page-title { font-size: 1.8rem; }
      .genre-section-title { font-size: 1.7rem; }
      .homepage-intro h2 { font-size: 1.8rem; }
    }

    @media (max-width: 991px) { 
        html { font-size: 15.5px; } 
        .main-page-title { font-size: 1.7rem; }
        .homepage-intro h2 { font-size: 1.7rem; }
        .homepage-intro p { font-size: 0.98rem; }
        .genre-section-title { font-size: 1.6rem; }
        .faq-section h2 { font-size: 1.5rem; }
        .player-promo-bar { font-size: 1.1rem; }
    }

    @media (max-width: 767px) { 
        html { font-size: 15px; } 
        .main-page-title { font-size: 1.5rem; margin-bottom: 12px;}
        .homepage-intro h2 { font-size: 1.5rem; } 
        .homepage-intro p { font-size: 0.95rem; } 
        .genre-section-title { font-size: 1.4rem; } 
        .faq-section h2 { font-size: 1.3rem; } 
        .genre-card .title2 { font-size: 1.05rem; } 
        .genre-card .caption p:not(.title2) { font-size: 0.88rem; } 
        .faq-question { font-size: 1.05rem; } 
        .faq-answer { font-size: 0.9rem; } 
        .player-promo-bar { font-size: 1rem; padding: 10px 5px;}
        .col-lg-4.col-md-12.col-sm-12 { 
            margin-top: 25px; /* Less margin on mobile */
        }
        .gallery {
             max-width: 100%; 
             padding: 8px 5px; 
        }
        .video-container, .gap, .player-promo-bar {
            max-width: 100%; 
        }
        .genre-card .caption {
            min-height: 100px; 
        }
        .content-section { padding: 20px 10px; margin-top:20px; margin-bottom:20px;}
        .faq-section { padding: 20px 10px; margin-top:20px;}
    }
    @media (max-width: 480px) { /* Extra small devices */
        html { font-size: 14.5px; }
        .main-page-title { font-size: 1.4rem; }
        .player-promo-bar { font-size: 0.95rem; }
        .genre-card .title2 { font-size: 1rem; }
        .genre-card .caption p:not(.title2) { font-size: 0.82rem; }
        .genre-card .caption { min-height: 90px; }
    }