/* --- Styles Généraux et Réinitialisations --- */
body {
    /* Fond principal de l'application, un noir très profond */
    background-color: #0A0A0A;
    color: #E0E0E0; /* Couleur de texte par défaut, un blanc cassé pour la lisibilité sur fond sombre */
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Une police plus moderne et lisible */
    margin: 0;
    padding: 0; /* Gérer le padding via les sections spécifiques */
    line-height: 1.6; /* Améliore la lisibilité du texte */
    -webkit-font-smoothing: antialiased; /* Rend le texte plus lisse sur les navigateurs WebKit */
    -moz-osx-font-smoothing: grayscale; /* Idem pour Firefox */
}

/* Réinitialisation de base pour les éléments HTML5 */
*, *::before, *::after {
    box-sizing: border-box;
}

a {
    text-decoration: none; /* Supprime le soulignement des liens */
    color: inherit; /* Les liens héritent de la couleur du texte parent par défaut */
}

/* --- Animations Globales (peuvent être déplacées dans un fichier séparé si elles sont globales) --- */
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes shine {
    0% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); } /* Légère lueur dorée */
    50% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.8); }
    100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
}

/* --- Header et Navigation Principale --- */
header {
    background-color: #0A0A0A; /* Assurez-vous que le header reste sur le même fond que le body */
    padding: 1rem 20px; /* Un peu plus de padding pour l'esthétique */
    text-align: left;
    position: relative; /* Pour positionner le titre */
    border-bottom: 1px solid #1E1E1E; /* Une ligne fine pour délimiter le header */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Ombre subtile pour l'élévation */
    z-index: 100; /* Assure que le header est au-dessus des autres éléments */
}

header h1 {
    font-size: 28px; /* Un peu plus grand pour l'impact */
    font-weight: 700; /* Plus gras */
    color: #FFFFFF; /* Blanc pur pour le titre principal */
    margin: 0;
    position: absolute;
    top: 15px; /* Ajustez la position */
    left: 20px; /* Ajustez la position */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Petite ombre textuelle */
}

/* Navigation principale (haut de page si utilisée) */
nav {
    padding: 15px 20px; /* Padding ajusté */
    text-align: right; /* Alignez les liens à droite si h1 est à gauche */
    /* Vous pourriez vouloir utiliser flexbox pour aligner le titre et la nav si ils sont dans le même élément */
}

nav a {
    color: #B0B0B0; /* Un gris plus doux pour les liens non actifs */
    margin: 0 18px; /* Espacement ajusté */
    font-size: 18px; /* Taille légèrement réduite pour les liens de navigation */
    font-weight: 500; /* Poids de police moyen */
    transition: all 0.2s ease-in-out; /* Transition plus globale */
    position: relative; /* Pour l'effet de soulignement */
}

nav a:hover {
    color: #FFFFFF; /* Blanc éclatant au survol */
    transform: translateY(-2px); /* Léger mouvement vers le haut */
}

/* Effet de soulignement moderne au survol */
nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px; /* Position sous le texte */
    width: 0%;
    height: 2px;
    background-color: #2E8B57; /* Couleur d'accentuation */
    transition: width 0.3s ease-out;
}

nav a:hover::after {
    width: 100%;
}

nav a:active {
    color: #A0A0A0; /* Une couleur un peu plus sombre au clic */
    transform: translateY(0); /* Retour à la position normale */
}

nav i {
    pointer-events: none; /* Assurez-vous que l'icône ne bloque pas le clic sur le lien */
}

/* --- Boutons en Haut à Droite (Profil, Partage, Notification) --- */
.top-right-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px; /* Espacement ajusté */
    padding-top: 15px; /* Assure un bon espacement avec le haut */
    padding-right: 20px;
    position: absolute; /* Positionne par rapport au header */
    top: 0;
    right: 0;
    z-index: 101; /* Au-dessus du titre si nécessaire */
}

.icon-btn {
    /* Dégradé plus doux pour un look premium */
    background: linear-gradient(135deg, #222222 0%, #111111 100%);
    border: 1px solid #333333; /* Bordure subtile */
    padding: 10px;
    border-radius: 50%;
    width: 48px; /* Taille légèrement plus grande */
    height: 48px; /* Taille légèrement plus grande */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ombre plus prononcée pour l'élévation */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Ombre extérieure et intérieure */
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Transition pour hover/active */
}

.icon-btn:hover {
    background: linear-gradient(135deg, #333333 0%, #1E1E1E 100%); /* Dégradé au survol */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px); /* Léger effet de soulèvement */
}

.icon-btn:active {
    background: #0A0A0A; /* Plus sombre au clic */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6) inset; /* Ombre intérieure pour le clic */
    transform: translateY(0); /* Retour à la position normale */
}

.icon-btn img {
    width: 24px; /* Icônes légèrement plus grandes */
    height: 24px;
    filter: invert(100%) opacity(0.9); /* Rend l'icône blanche et légèrement transparente */
    transition: filter 0.2s ease-in-out;
}

.icon-btn:hover img {
    filter: invert(100%) opacity(1); /* Plus opaque au survol */
}

/* --- Section Annonce (Announcement) --- */
.announcement {
    background: linear-gradient(135deg, #1A1A1A 0%, #0A0A0A 100%); /* Dégradé subtil */
    margin: 30px auto; /* Espacement ajusté */
    padding: 25px; /* Padding ajusté */
    border: 1px solid #282828; /* Bordure plus douce */
    border-radius: 12px; /* Rayon de bordure légèrement plus grand */
    max-width: 800px; /* Largeur maximale pour éviter qu'il ne soit trop large */
    text-align: center;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); /* Ombre pour l'élévation */
    overflow: hidden; /* Pour contenir les effets de lumière si ajoutés */
}

.announcement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top left, rgba(46, 139, 87, 0.15) 0%, transparent 50%); /* Lumière subtile */
    z-index: 0;
    pointer-events: none;
}

.announcement * {
    position: relative; /* Assure que le contenu est au-dessus de l'effet de lumière */
    z-index: 1;
}

.announcement-icon {
    font-size: 60px; /* Icône plus grande */
    color: #2E8B57; /* Couleur d'accentuation (vert foncé, comme WhatsApp) */
    animation: bounce 2s infinite ease-in-out; /* Animation plus douce */
    margin-bottom: 15px; /* Espacement avec le texte */
    text-shadow: 0 0 15px rgba(46, 139, 87, 0.6); /* Effet lumineux autour de l'icône */
}

/* Style pour le texte de l'annonce */
.announcement p {
    font-size: 1.1em;
    color: #C0C0C0;
    margin-bottom: 0;
}

/* --- Conteneur de Vidéos --- */
.video-container {
    margin-top: 40px; /* Plus d'espace */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px; /* Espacement ajusté */
    padding: 0 20px; /* Padding horizontal */
}

.video-frame {
    width: 100%;
    max-width: 720px; /* Taille standard pour une vidéo intégrée */
    height: 405px; /* Ratio 16:9 pour la hauteur */
    border-radius: 12px; /* Rayon de bordure plus prononcé */
    border: 1px solid #282828; /* Bordure subtile */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* Ombre pour l'élévation */
    background-color: #000; /* Fond noir pour les zones vides */
    overflow: hidden; /* S'assure que le contenu respecte la bordure */
}

/* --- Footer --- */
footer {
    background-color: #0A0A0A; /* Même fond que le body */
    color: #888888; /* Texte gris plus clair */
    padding: 25px 20px; /* Padding ajusté */
    text-align: center;
    font-size: 13px; /* Taille légèrement plus petite */
    border-top: 1px solid #1E1E1E; /* Bordure fine */
    margin-top: 50px; /* Espacement avec le contenu précédent */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); /* Ombre vers le haut */
}

/* --- Conteneur de Catégories (Horizontal Scroll) --- */
.categories-container {
    display: flex;
    gap: 15px; /* Espacement ajusté */
    overflow-x: auto; /* Permet le défilement horizontal */
    padding: 15px 20px; /* Padding pour les côtés et le bas */
    -webkit-overflow-scrolling: touch; /* Améliore le défilement sur iOS */
    scrollbar-width: none; /* Cache la barre de défilement pour Firefox */
    -ms-overflow-style: none; /* Cache la barre de défilement pour IE/Edge */
}

/* Cache la barre de défilement pour Chrome/Safari */
.categories-container::-webkit-scrollbar {
    display: none;
}

.category-button {
    background: linear-gradient(135deg, #1C1C1E 0%, #111111 100%); /* Dégradé pour les boutons de catégorie */
    border-radius: 15px; /* Rayon de bordure plus rond */
    padding: 15px 20px; /* Padding ajusté */
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #E0E0E0;
    font-size: 14px;
    font-weight: 600; /* Texte plus gras */
    min-width: 100px; /* Largeur minimale légèrement augmentée */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour l'élévation */
    flex-shrink: 0; /* Empêche les boutons de rétrécir */
}

.category-button i {
    font-size: 24px; /* Icônes plus grandes */
    margin-bottom: 8px; /* Espacement ajusté */
    color: #2E8B57; /* Couleur d'accentuation */
    transition: color 0.2s ease-in-out;
}

.category-button:hover {
    background: linear-gradient(135deg, #2E2E2E 0%, #1A1A1A 100%); /* Dégradé au survol */
    transform: translateY(-3px); /* Léger effet de soulèvement */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.category-button.selected {
    border: 2px solid #2E8B57; /* Bordure d'accentuation pour l'état sélectionné */
    box-shadow: 0 0 15px rgba(46, 139, 87, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3); /* Lueur et ombre */
    background: linear-gradient(135deg, #2E8B57 0%, #1F6A44 100%); /* Fond vert pour le bouton sélectionné */
    color: #FFFFFF;
}

.category-button.selected i {
    color: #FFFFFF; /* Icône blanche pour le bouton sélectionné */
}

/* --- Styles spécifiques aux Cinéastes (main content) --- */
main {
    max-width: 1200px;
    margin: 40px auto; /* Marge supérieure ajustée */
    padding: 30px; /* Padding ajusté */
    background-color: #0A0A0A; /* Utilise le même fond que le body */
    border-radius: 12px; /* Bordures plus rondes */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); /* Ombre plus profonde */
}

.cineaste-category {
    margin-bottom: 50px; /* Espacement ajusté */
}

.cineaste-category h2 {
    color: #F8F8F8; /* Un blanc très clair */
    text-align: center;
    margin-bottom: 35px; /* Espacement ajusté */
    font-size: 2.5em; /* Plus grand */
    font-weight: 700; /* Plus gras */
    /* Bordure subtile et élégante */
    border-bottom: 2px solid rgba(46, 139, 87, 0.7); /* Ligne d'accentuation verte */
    padding-bottom: 12px;
    position: relative;
    letter-spacing: 0.05em; /* Légèrement espacé pour la lisibilité */
}

.cineaste-category h2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2px;
    width: 60px; /* Petite ligne verte au centre */
    height: 4px;
    background-color: #2E8B57;
    border-radius: 2px;
}


.cineaste-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px; /* Espacement ajusté */
    justify-content: center;
}

.cineaste-card {
    background: linear-gradient(135deg, #1C1C1E 0%, #111111 100%); /* Dégradé pour les cartes */
    border: 1px solid #282828; /* Bordure plus douce */
    border-radius: 10px; /* Rayon de bordure ajusté */
    padding: 25px; /* Padding ajusté */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Ombre et lueur intérieure */
    transition: all 0.3s ease-in-out; /* Transition globale */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligner le contenu à gauche */
    overflow: hidden; /* Pour les effets internes */
    position: relative;
}

.cineaste-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 10% 10%, rgba(46, 139, 87, 0.1) 0%, transparent 60%); /* Effet de lumière très subtil */
    transition: transform 0.3s ease-out;
    opacity: 0;
}

.cineaste-card:hover::before {
    transform: scale(1.1);
    opacity: 1;
}

.cineaste-card:hover {
    transform: translateY(-8px); /* Mouvement plus prononcé */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cineaste-card h3 {
    color: #FFFFFF; /* Titre blanc pur */
    margin-top: 0;
    margin-bottom: 12px; /* Espacement ajusté */
    font-size: 1.8em; /* Plus grand */
    font-weight: 600; /* Plus gras */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Ombre de texte subtile */
}

.cineaste-card p {
    margin-bottom: 10px; /* Espacement ajusté */
    font-size: 1em; /* Taille standard pour la lisibilité */
    color: #C0C0C0; /* Gris clair pour le texte */
}

.cineaste-card p strong {
    color: #E0E0E0; /* Rend les labels plus visibles */
    font-weight: 500;
}

.cineaste-card .roles {
    margin-top: 15px; /* Espacement ajusté */
    font-size: 0.9em; /* Taille légèrement plus petite */
    color: #2E8B57; /* Couleur d'accentuation pour les rôles */
    font-style: italic;
    font-weight: 600; /* Gras pour les rôles */
    text-shadow: 0 0 5px rgba(46, 139, 87, 0.3); /* Petite lueur */
}

.no-cineaste-message {
    text-align: center;
    color: #A0A0A0; /* Gris plus visible */
    font-style: italic;
    padding: 30px; /* Padding ajusté */
    grid-column: 1 / -1;
    font-size: 1.1em;
}

/* --- Navigation Inférieure Flottante (Bottom Navigation) --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Dégradé doux pour la barre de navigation */
    background: linear-gradient(to top, #1A1A1A 0%, #111111 100%);
    display: flex;
    justify-content: space-around;
    padding: 12px 0; /* Padding ajusté */
    z-index: 999;
    /* Ombre subtile vers le haut */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
    border-top-left-radius: 20px; /* Rayon plus prononcé */
    border-top-right-radius: 20px; /* Rayon plus prononcé */
    overflow: hidden; /* Pour contenir les effets internes */
}

.bottom-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #2E8B57, transparent); /* Fine ligne lumineuse en haut */
    opacity: 0.3;
}

.bottom-nav .nav-item {
    color: #A0A0A0; /* Couleur par défaut des icônes/texte inactifs */
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    padding: 8px 0; /* Padding ajusté */
    border-radius: 10px; /* Rayon de bordure plus rond */
    transition: all 0.3s ease-in-out; /* Transition globale */
    flex-grow: 1;
    max-width: 90px; /* Pour éviter que les éléments soient trop larges sur grand écran */
    position: relative;
}

.bottom-nav .nav-item img {
    filter: invert(70%); /* Icônes grisées par défaut */
    width: 26px; /* Icônes légèrement plus grandes */
    height: 26px;
    margin-bottom: 4px; /* Espacement ajusté */
    transition: filter 0.3s ease-in-out;
}

.bottom-nav .nav-item span {
    font-size: 0.8em; /* Texte légèrement plus petit */
    font-weight: 600; /* Plus gras */
    text-transform: uppercase; /* Texte en majuscules pour un look moderne */
    letter-spacing: 0.5px; /* Espacement des lettres */
}

.bottom-nav .nav-item:hover {
    background-color: #222222; /* Fond plus sombre au survol */
    color: #FFFFFF; /* Texte blanc au survol */
}

.bottom-nav .nav-item:hover img {
    filter: invert(100%); /* Icônes blanches au survol */
}

.bottom-nav .nav-item.active {
    background: linear-gradient(135deg, #2E8B57 0%, #1F6A44 100%); /* Dégradé vert pour l'actif */
    color: #FFFFFF; /* Texte blanc pour l'actif */
    box-shadow: 0 0 15px rgba(46, 139, 87, 0.6); /* Lueur autour de l'élément actif */
    transform: translateY(-2px); /* Léger soulèvement */
}

.bottom-nav .nav-item.active img {
    filter: invert(100%); /* Icônes blanches pour l'actif */
}


/* --- Ajustements Responsifs --- */
@media (max-width: 768px) {
    header h1 {
        font-size: 24px;
        top: 10px;
        left: 15px;
    }
    .top-right-buttons {
        gap: 10px;
        padding-right: 15px;
    }
    .icon-btn {
        width: 40px;
        height: 40px;
    }
    .icon-btn img {
        width: 20px;
        height: 20px;
    }
    .announcement {
        margin: 20px auto;
        padding: 20px;
        max-width: 95%;
    }
    .announcement-icon {
        font-size: 50px;
    }
    .announcement p {
        font-size: 1em;
    }
    .video-container {
        gap: 20px;
        padding: 0 15px;
    }
    .video-frame {
        height: 280px; /* Ajustement pour les petits écrans */
    }
    main {
        margin: 30px 15px;
        padding: 20px;
    }
    .cineaste-category h2 {
        font-size: 2em;
        margin-bottom: 25px;
    }
    .cineaste-list {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Ajustement pour plus de cartes par ligne */
        gap: 20px;
    }
    .cineaste-card {
        padding: 20px;
    }
    .cineaste-card h3 {
        font-size: 1.6em;
    }
    .cineaste-card p {
        font-size: 0.9em;
    }
    .bottom-nav {
        padding: 8px 0;
    }
    .bottom-nav .nav-item {
        font-size: 10px;
        padding: 6px 0;
    }
    .bottom-nav .nav-item img {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 480px) {
    header {
        padding: 1rem 15px;
    }
    header h1 {
        font-size: 20px;
        top: 12px;
        left: 10px;
    }
    .top-right-buttons {
        gap: 8px;
        padding-right: 10px;
    }
    .icon-btn {
        width: 38px;
        height: 38px;
        padding: 8px;
    }
    .icon-btn img {
        width: 18px;
        height: 18px;
    }
    .announcement {
        padding: 15px;
        margin: 15px auto;
    }
    .announcement-icon {
        font-size: 40px;
    }
    .announcement p {
        font-size: 0.9em;
    }
    .video-frame {
        height: 200px; /* Très petits écrans */
    }
    main {
        margin: 20px 10px;
        padding: 15px;
    }
    .cineaste-category h2 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    .cineaste-list {
        grid-template-columns: 1fr; /* Une seule colonne sur très petits écrans */
        gap: 15px;
    }
    .cineaste-card {
        padding: 15px;
    }
    .cineaste-card h3 {
        font-size: 1.4em;
    }
    .cineaste-card p {
        font-size: 0.85em;
    }
    .categories-container {
        padding: 10px 15px;
        gap: 10px;
    }
    .category-button {
        padding: 12px 16px;
        min-width: 80px;
        font-size: 13px;
    }
    .category-button i {
        font-size: 20px;
    }
    .bottom-nav {
        padding: 6px 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .bottom-nav .nav-item {
        font-size: 9px;
        padding: 4px 0;
    }
    .bottom-nav .nav-item img {
        width: 18px;
        height: 18px;
    }
}

/* Partners Section in Footer */
.partners-section {
    background-color: #0d0d0d; /* Slightly lighter black than body for contrast */
    padding: 30px 0;
    text-align: center;
    border-top: 1px solid #1a1a1a;
    margin-top: auto; /* Pushes footer to the bottom */
}

.partners-section h3 {
    color: #2E8B57; /* Kinema+ Green for the heading */
    font-size: 1.8em;
    margin-bottom: 25px;
    font-weight: 700;
}

.partner-logos-container {
    width: 100%;
    overflow: hidden; /* Hides parts of the logos outside the container */
    white-space: nowrap; /* Ensures images stay on one line */
    position: relative;
    padding: 15px 0; /* Vertical padding for logos */
}

.partner-logos-slide {
    display: inline-block; /* Allows content to be on one line and animate */
    animation: slide-logos 25s linear infinite; /* Animation definition */
}

.partner-logos-slide img {
    height: 80px; /* Adjust logo height as needed */
    margin: 0 30px; /* Space between logos */
    filter: grayscale(100%) brightness(150%); /* Subtle grayscale for consistent look */
    opacity: 0.7; /* Slightly transparent */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

.partner-logos-slide img:hover {
    filter: grayscale(0%) brightness(100%); /* Full color on hover */
    opacity: 1; /* Fully opaque on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Keyframe animation for the sliding effect */
@keyframes slide-logos {
    0% {
        transform: translateX(0%); /* Start at original position */
    }
    100% {
        transform: translateX(-50%); /* Move half the width to create infinite loop */
    }
}

/* Optional: Pause animation on hover */
.partner-logos-container:hover .partner-logos-slide {
    animation-play-state: paused;
}

.footer-bottom {
    background-color: #000000; /* Pure black for the very bottom */
    color: #909090;
    padding: 15px 20px;
    text-align: center;
    font-size: 0.9em;
    border-top: 1px solid #0a0a0a;
}

/* Ensure body uses flex to push footer down 
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}*/
/* Ensure main content takes available space */
main {
    flex: 1; /* This will make your main content grow and push the footer down */
}

/* Responsive adjustments for logos */
@media (max-width: 768px) {
    .partners-section h3 {
        font-size: 1.5em;
    }
    .partner-logos-slide img {
        height: 60px; /* Smaller logos on smaller screens */
        margin: 0 20px;
    }
    @keyframes slide-logos {
        100% {
            transform: translateX(-50%); /* Keep the same percentage, adjusts to new size */
        }
    }
}

@media (max-width: 480px) {
    .partners-section {
        padding: 20px 0;
    }
    .partners-section h3 {
        font-size: 1.3em;
        margin-bottom: 20px;
    }
    .partner-logos-slide img {
        height: 50px; /* Even smaller logos on very small screens */
        margin: 0 15px;
    }
}