/* Variables CSS pour faciliter la gestion des couleurs et des thèmes */
:root {
/* Couleurs du thème clair */
--bg-color: #fff;
--text-color: #333;
--text-light: #666;
--header-bg: rgba(255, 255, 255, 0.95);
--nav-bg: #2c3e50;
--nav-hover: #16a085;
--main-gradient-start: #9ab0a6; /* Restauré à la couleur originale */
--main-gradient-end: #385833; /* Restauré à la couleur originale */
--accent-color: #bd1550;
--accent-color-hover: #a01343;
--footer-bg: #2c3e50;
--footer-text: #ecf0f1;
--container-bg: #fff;
--container-border: #ddd;
--ribbon-bg: #bc0808;
--quote-bg: rgba(255, 255, 255, 0.85);
--quote-border: #16a085;
--card-bg: #fff;
--card-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
--card-hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
--section-bg-alt: #f5f5f5;
--hero-overlay: rgba(255, 255, 255, 0.8); /* Fond plus clair pour que le texte soit lisible */
--scroll-indicator: rgba(0, 0, 0, 0.6); /* Changé pour être visible sur fond clair */
--button-primary-bg: #bd1550;
--button-primary-text: #fff;
--button-primary-hover: #a01343;
--button-secondary-bg: #fff;
--button-secondary-text: #bd1550;
--button-secondary-border: #bd1550;
--button-secondary-hover-bg: #f8f8f8;
--hero-text-color: #333; /* Texte foncé pour la section hero en mode light */
--news-date-color: #bd1550; /* Couleur pour la date des actualités */
}

/* Thème sombre */
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #f0f0f0;
--text-light: #bbb;
--header-bg: rgba(26, 26, 26, 0.95);
--nav-bg: #000;
--nav-hover: #10ce29;
--main-gradient-start: #384d63;
--main-gradient-end: #1a242f;
--accent-color: #e74c3c;
--accent-color-hover: #c0392b;
--footer-bg: #000;
--footer-text: #f0f0f0;
--container-bg: #1a1a1a;
--container-border: #333;
--ribbon-bg: #e74c3c;
--quote-bg: rgba(26, 26, 26, 0.85);
--quote-border: #e74c3c;
--card-bg: #1e1e1e;
--card-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
--card-hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--section-bg-alt: #1a1a1a;
--hero-overlay: rgba(0, 0, 0, 0.6);
--scroll-indicator: rgba(255, 255, 255, 0.6);
--button-primary-bg: #e74c3c;
--button-primary-text: #fff;
--button-primary-hover: #c0392b;
--button-secondary-bg: transparent;
--button-secondary-text: #e74c3c;
--button-secondary-border: #e74c3c;
--button-secondary-hover-bg: rgba(231, 76, 60, 0.1);
--hero-text-color: #f0f0f0; /* Texte clair pour la section hero en mode dark */
}

/* Thème alternatif (bleu) */
[data-theme="blue"] {
--bg-color: #f0f7ff;
--text-color: #2c3e50;
--text-light: #4a6885;
--header-bg: rgba(227, 242, 253, 0.95);
--nav-bg: #1565c0;
--nav-hover: #64b5f6;
--main-gradient-start: #2196f3;
--main-gradient-end: #0d47a1;
--accent-color: #ff5722;
--accent-color-hover: #e64a19;
--footer-bg: #1565c0;
--footer-text: #e3f2fd;
--container-bg: #fff;
--container-border: #bbdefb;
--ribbon-bg: #ff5722;
--quote-bg: rgba(227, 242, 253, 0.85);
--quote-border: #1565c0;
--card-bg: #fff;
--card-shadow: 0 5px 20px rgba(21, 101, 192, 0.1);
--card-hover-shadow: 0 10px 30px rgba(21, 101, 192, 0.2);
--section-bg-alt: #e3f2fd;
--hero-overlay: rgba(255, 255, 255, 0.8); /* Fond plus clair pour que le texte soit lisible */
--scroll-indicator: rgba(0, 0, 0, 0.6);
--button-primary-bg: #ff5722;
--button-primary-text: #fff;
--button-primary-hover: #e64a19;
--button-secondary-bg: #fff;
--button-secondary-text: #1565c0;
--button-secondary-border: #1565c0;
--button-secondary-hover-bg: #f0f7ff;
--hero-text-color: #2c3e50; /* Texte foncé pour la section hero en mode blue */
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

html {
scroll-behavior: smooth;
scroll-padding-top: 80px; /* Pour tenir compte de la navbar fixe */
}

body {
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
overflow-x: hidden;
}

/* Gestion de l'en-tête */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--header-bg);
padding: 15px 20px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: padding 0.3s ease;
}

/* Animation du header au scroll */
header.scrolled {
padding: 8px 20px;
}

header.scrolled .logo h1 {
font-size: 1.8rem;
}

header.scrolled .logo h2,
header.scrolled .logo h3 {
display: none;
}

.logo {
position: relative;
transition: all 0.3s ease;
}

.logo h1 {
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 2.2rem;
margin: 0;
padding: 0;
letter-spacing: 1px;
transition: font-size 0.3s ease;
}

.logo span {
color: var(--accent-color);
}

.logo h2 {
font-size: 0.9rem;
margin: 0;
font-weight: 400;
margin-top: -5px;
}

.logo h2 span {
font-weight: 700;
color: var(--accent-color);
}

.logo h3 {
font-size: 0.65rem;
font-weight: 400;
margin: 0;
margin-top: -3px;
letter-spacing: 5px;
color: var(--text-light);
}

/* Navigation */
nav {
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-links {
display: flex;
align-items: center;
margin-left: auto;
}

nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

nav li {
margin-left: 10px;
}

nav ul li a {
color: var(--text-color);
font-weight: 600;
font-size: 15px;
text-decoration: none;
padding: 8px 15px;
border-radius: 4px;
transition: all 0.3s ease;
}

nav ul li a:hover {
color: var(--accent-color);
}

nav ul li a.btn-nav {
background-color: var(--accent-color);
color: white;
}

nav ul li a.btn-nav:hover {
background-color: var(--accent-color-hover);
transform: translateY(-2px);
}

/* Menu Burger pour mobile */
.burger-menu {
display: none;
cursor: pointer;
position: relative;
z-index: 1001;
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
}

.burger-icon {
position: relative;
width: 25px;
height: 3px;
background-color: var(--text-color);
transition: all 0.3s ease-in-out;
}

.burger-icon::before,
.burger-icon::after {
content: '';
position: absolute;
width: 25px;
height: 3px;
background-color: var(--text-color);
transition: all 0.3s ease-in-out;
}

.burger-icon::before {
transform: translateY(-8px);
}

.burger-icon::after {
transform: translateY(8px);
}

/* Animation du menu burger */
.burger-menu.active .burger-icon {
background-color: transparent;
}

.burger-menu.active .burger-icon::before {
transform: rotate(45deg);
}

.burger-menu.active .burger-icon::after {
transform: rotate(-45deg);
}

/* Hero Section */
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
background-image: url('mariane.jpg');
background-size: cover;
background-position: center;
color: var(--text-color); /* Changé de white à var(--text-color) */
overflow: hidden;
padding-top: 200px; /* Ajout de padding-top pour éviter que le contenu soit sous le header */
}

.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--hero-overlay);
z-index: 1;
}

.hero-content {
position: relative;
z-index: 2;
max-width: 900px;
color: var(--hero-text-color); /* Utilisation de la nouvelle variable pour le texte du hero */
margin-top: 5rem;
}

.hero-title {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
font-weight: 900;
margin-bottom: 20px;
margin-top: 2rem;
line-height: 1.2;
}

.hero-subtitle {
font-size: 1.4rem;
font-weight: 300;
margin-bottom: 40px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.hero-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;

}

/* Citation principale */
.main-quote {
position: relative;
margin: 60px auto;
max-width: 800px;
padding: 40px;
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1.8rem;
line-height: 1.5;
background-color: var(--quote-bg);
border-left: 5px solid var(--accent-color);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: var(--text-color); /* Assurer que le texte de la citation a la bonne couleur */
}

.main-quote::before {
content: "\201C";
font-size: 6rem;
position: absolute;
left: 10px;
top: -20px;
color: var(--accent-color);
opacity: 0.3;
}

.main-quote cite {
display: block;
text-align: right;
font-weight: bold;
margin-top: 20px;
font-style: normal;
font-size: 1.2rem;
}

/* Indicateur de défilement */
.scroll-indicator {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
animation: bounce 2s infinite;
}

.scroll-indicator i {
color: var(--scroll-indicator);
font-size: 2rem;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) translateX(-50%);
}
40% {
    transform: translateY(-20px) translateX(-50%);
}
60% {
    transform: translateY(-10px) translateX(-50%);
}
}

/* Sections générales */
section {
padding: 100px 20px;
}

section:nth-child(even) {
background-color: var(--section-bg-alt);
}

.section-container {
max-width: 1200px;
margin: 0 auto;
}

.section-title {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
text-align: center;
margin-bottom: 20px;
}

.section-subtitle {
font-size: 1.2rem;
text-align: center;
margin-bottom: 60px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
color: var(--text-light);
}

/* Section Ce que nous apportons */
.what-we-bring {
position: relative;
}

.cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}

.card {
background-color: var(--card-bg);
border-radius: 8px;
padding: 30px;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}

.card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}

.card-icon {
font-size: 3rem;
color: var(--accent-color);
margin-bottom: 20px;
text-align: center;
}

.card-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 15px;
text-align: center;
}

.card-text {
font-size: 1rem;
line-height: 1.6;
flex-grow: 1;
}

.card-link {
display: inline-block;
margin-top: 20px;
color: var(--accent-color);
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}

.card-link:hover {
transform: translateX(5px);
}

/* Section Rôle des citoyens et des élus */
.role-section {
position: relative;
overflow: hidden;
}

.role-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
margin-top: 50px;
}

.role-box {
padding: 40px;
border-radius: 8px;
background-color: var(--card-bg);
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
}

.role-box:hover {
transform: translateY(-5px);
box-shadow: var(--card-hover-shadow);
}

.role-box h3 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--accent-color);
display: flex;
align-items: center;
gap: 15px;
}

.role-box ul {
margin-left: 20px;
margin-top: 20px;
}

.role-box li {
margin-bottom: 10px;
position: relative;
padding-left: 25px;
}

.role-box li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
color: var(--accent-color);
}


/* Section Comment nous soutenir */
.support-section {
text-align: center;
}

.support-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 50px;
}

.support-option {
padding: 30px;
background-color: var(--card-bg);
border-radius: 8px;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}

.support-option:hover {
transform: translateY(-5px);
box-shadow: var(--card-hover-shadow);
}

.support-icon {
font-size: 2.5rem;
color: var(--accent-color);
margin-bottom: 20px;
}

.support-title {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 15px;
}

.support-text {
font-size: 1rem;
margin-bottom: 20px;
flex-grow: 1;
}

/* Section CTA */
.cta-section {
text-align: center;
padding: 80px 20px;
background-image: linear-gradient(135deg, var(--main-gradient-start), var(--main-gradient-end));
color: white;
}

.cta-container {
max-width: 800px;
margin: 0 auto;
}

.cta-title {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
margin-bottom: 20px;
}

.cta-text {
font-size: 1.2rem;
margin-bottom: 40px;
}

.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
}

/* Boutons */
.btn {
display: inline-block;
padding: 12px 30px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
text-align: center;
}

.btn-primary {
background-color: var(--button-primary-bg);
color: var(--button-primary-text);
}

.btn-primary:hover {
background-color: var(--button-primary-hover);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
background-color: var(--button-secondary-bg);
color: var(--button-secondary-text);
border: 2px solid var(--button-secondary-border);
}

.btn-secondary:hover {
background-color: var(--button-secondary-hover-bg);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-large {
padding: 15px 40px;
font-size: 1.1rem;
}

/* Footer */
footer {
background-color: var(--footer-bg);
color: var(--footer-text);
padding: 50px 20px 20px;
}

.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}

.footer-section {
flex: 1;
min-width: 250px;
margin-bottom: 30px;
padding: 0 15px;
}

.footer-section h3 {
margin-bottom: 20px;
font-size: 1.2rem;
position: relative;
padding-bottom: 10px;
}

.footer-section h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 3px;
background-color: var(--accent-color);
}

.footer-contact-info {
margin-top: 15px;
}

.footer-contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}

.footer-contact-icon {
margin-right: 15px;
font-size: 1.2rem;
color: var(--accent-color);
}

.footer-links {
list-style: none;
}

.footer-links li {
margin-bottom: 10px;
}

.footer-links a {
color: var(--footer-text);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
padding-left: 15px;
}

.footer-links a::before {
content: "\f105";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
transition: transform 0.3s ease;
}

.footer-links a:hover {
color: var(--accent-color);
}

.footer-links a:hover::before {
transform: translateX(3px);
}

.social-icons {
display: flex;
gap: 15px;
margin-top: 20px;
}

.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
color: var(--footer-text);
font-size: 1.2rem;
transition: all 0.3s ease;
}

.social-icons a:hover {
background-color: var(--accent-color);
transform: translateY(-3px);
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 20px;
margin-top: 20px;
text-align: center;
font-size: 0.9rem;
}

.footer-bottom-links {
margin: 15px 0;
}

.footer-bottom-links a {
color: var(--footer-text);
text-decoration: none;
margin: 0 10px;
transition: color 0.3s;
}

.footer-bottom-links a:hover {
color: var(--accent-color);
}

/* Switch thème clair/sombre et boutons de thème */
.theme-switch-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 25px;
}

.theme-toggle {
display: flex;
align-items: center;
}

.theme-switch {
display: inline-block;
height: 28px;
position: relative;
width: 50px;
margin: 0 5px;
}

.theme-switch input {
display: none;
}

.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
border-radius: 34px;
}

.slider:before {
background-color: white;
bottom: 4px;
content: "";
height: 20px;
left: 4px;
position: absolute;
transition: .4s;
width: 20px;
border-radius: 50%;
}

input:checked + .slider {
background-color: var(--accent-color);
}

input:checked + .slider:before {
transform: translateX(22px);
}

.fa-moon, .fa-sun {
color: var(--text-color);
font-size: 14px;
}

/* Boutons de thème */
.theme-buttons {
display: flex;
justify-content: center;
margin-top: 5px;
gap: 5px;
}

.theme-button {
padding: 3px 8px;
border: none;
border-radius: 3px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
font-size: 0.7rem;
}

.theme-button.light {
background-color: #f0f0f0;
color: #333;
border: 1px solid #ccc;
}

.theme-button.dark {
background-color: #333;
color: #f0f0f0;
border: 1px solid #555;
}

.theme-button.blue {
background-color: #1565c0;
color: #e3f2fd;
border: 1px solid #0d47a1;
}

.theme-button:hover {
transform: scale(1.05);
}

/* Ruban */
.ribbon-1 {
position: fixed;
background: var(--ribbon-bg);
box-shadow: 0 0 0 999px var(--ribbon-bg);
clip-path: inset(0 -100%);
color: #fff;
line-height: 1.3em;
font-family: 'Raleway', sans-serif;
font-size: 16px;
z-index: 1000;
}

.left {
inset: 0 auto auto 0;
transform-origin: 100% 0;
transform: translate(-29.3%) rotate(-45deg);
}

/* Media Queries pour Responsive */
@media (max-width: 1200px) {
.role-grid {
    grid-template-columns: 1fr;
    gap: 30px;
}

.hero-title {
    font-size: 3rem;
    margin-top: 10rem;
}
}

@media (max-width: 992px) {
.cards-container {
    grid-template-columns: repeat(2, 1fr);
}

.support-options {
    grid-template-columns: repeat(2, 1fr);
}


.hero-content {    
    margin-top: 10rem;
}

.hero-title {
    font-size: 2.5rem;
    margin-top: 10rem;
}

.main-quote {
    font-size: 1.5rem;
    padding: 30px;
}

.section-title {
    font-size: 2rem;
}
}

@media (max-width: 768px) {
.logo h1 {
    font-size: 1.8rem;
}

.logo h2, .logo h3 {
    display: none;
}

.hero-title {
    font-size: 2rem;
    margin-top: 10rem;
}

.hero-subtitle {
    font-size: 1.1rem;
}

.main-quote {
    font-size: 1.3rem;
    padding: 25px;
    margin: 30px auto;
}

.section-title {
    font-size: 1.8rem;
}

.hero-buttons, .cta-buttons {
    flex-direction: column;
    gap: 15px;
}

.cards-container, .support-options {
    grid-template-columns: 1fr;
}

section {
    padding: 60px 20px;
}

/* Ajustements du menu pour mobile */
.burger-menu {
    display: flex;
}

.nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background-color: var(--bg-color);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: right 0.3s ease-in-out;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.nav-links.active {
    right: 0;
}

nav ul {
    flex-direction: column;
    margin-bottom: 30px;
}

nav li {
    margin: 10px 0;
    width: 100%;
    text-align: center;
}

nav ul li a {
    display: block;
    width: 100%;
    padding: 15px;
}

.theme-switch-wrapper {
    position: static;
    margin: 20px 0;
    transform: none;
}

/* Overlay pour fermer le menu en cliquant à l'extérieur */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.overlay.active {
    display: block;
}
}

@media (max-width: 480px) {
.hero-title {
    font-size: 1.7rem;
}

.hero-subtitle {
    font-size: 1rem;
}

.main-quote {
    font-size: 1.1rem;
}

.main-quote cite {
    font-size: 1rem;
}

.section-title {
    font-size: 1.5rem;
}

.card, .role-box, .support-option {
    padding: 20px;
}

.ribbon-1 {
    display: none;
}

.footer-section {
    flex: 100%;
}

.footer-bottom-links a {
    display: block;
    margin: 10px 0;
}
}

/* Section Actualités */
.news-section {
padding: 80px 20px;
background-color: var(--section-bg-alt);
position: relative;
overflow: hidden;
}

.news-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/api/placeholder/1920/1080');
background-size: cover;
background-position: center;
opacity: 0.05;
z-index: 0;
}

.news-container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
}

.news-header {
text-align: center;
margin-bottom: 50px;
}

.news-title-section {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 900;
margin-bottom: 15px;
color: var(--accent-color);
position: relative;
display: inline-block;
padding-bottom: 15px;
}

.news-title-section::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background-color: var(--accent-color);
}

.news-subtitle {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto;
color: var(--text-light);
}

.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 50px;
}

.news-card {
background-color: var(--card-bg);
border-radius: 8px;
box-shadow: var(--card-shadow);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}

.news-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}

.news-card-image {
height: 200px;
overflow: hidden;
}

.news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.news-card:hover .news-card-image img {
transform: scale(1.1);
}

.news-card-content {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}

.news-card-date {
display: inline-block;
font-weight: 600;
color: var(--news-date-color);
margin-bottom: 10px;
font-size: 0.9rem;
}

.news-card-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.4;
}

.news-card-excerpt {
margin-bottom: 20px;
color: var(--text-light);
flex-grow: 1;
}

.news-card-link {
display: inline-flex;
align-items: center;
color: var(--accent-color);
font-weight: 600;
text-decoration: none;
margin-top: auto;
transition: all 0.3s ease;
}

.news-card-link i {
margin-left: 8px;
transition: transform 0.3s ease;
}

.news-card-link:hover i {
transform: translateX(5px);
}

.news-all-link {
text-align: center;
margin-top: 20px;
}