/* ========= CSS Variables (Brand palette) ========= */
:root{
  --gr-900:#132a13;
  --gr-800:#31572c;
  --gr-700:#4f772d;
  --gr-500:#90a955;
  --gr-200:#ecf39e;
  --bg:#fffef9;            /* soft neutral background */
  --ink:#0f172a;           /* dark readable text */
  --white:#ffffff;
  --black:#000000;

  --radius-xl:1.25rem;
  --radius-lg:0.875rem;
  --radius-md:0.625rem;

  --shadow-sm:0 4px 16px rgba(0,0,0,.08);
  --shadow-md:0 10px 30px rgba(0,0,0,.12);

  --container:1180px;
}

/* ========= Reset & Base ========= */
*{box-sizing:border-box}
html,body{height:100%;
  scroll-padding-top: 100px; /* adapte la hauteur à celle de ta navbar */}
body{
  margin:0;
  margin-top: 100px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container); margin-inline:auto; padding-inline:1.25rem}

/* Visually hidden (for screen readers) */
.sr-only{
  position:absolute !important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ========= Buttons ========= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1.25rem;
  border-radius:999px;
  font-weight:600;
  border:2px solid transparent;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  will-change:transform;
}

.btn:focus-visible{outline:3px solid var(--gr-200); outline-offset:2px}

.btn--primary{
  background:var(--gr-700);
  color:var(--white);
  box-shadow:var(--shadow-sm);
}
.btn--primary:hover{transform:translateY(-1px); background:var(--gr-800)}
.btn--primary:active{transform:translateY(0)}

.btn--ghost{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,.8);
}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--ghost:focus-visible{outline-color:var(--white)}

.btn--outline{
  border-color:var(--gr-700);
  color:var(--gr-800);
  padding:.6rem 1rem;
}
.btn--outline:hover{background:var(--gr-200); border-color:var(--gr-800)}

/* ========= Header ========= */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(130%) blur(6px);
  background:rgba(255,255,255,.86);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.header-top{
  display:flex; align-items:center; justify-content:center;
  padding:.75rem 1.25rem .5rem;
  position:relative;
}

.nav-toggle{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:10px;
  background:transparent; border:1.5px solid rgba(0,0,0,.1);
  display:none; align-items:center; justify-content:center; gap:4px;
}
.nav-toggle:focus-visible{outline:3px solid var(--gr-500); outline-offset:2px}
.nav-toggle-bar{width:18px; height:2px; background:var(--gr-900); display:block}
.nav-toggle-bar + .nav-toggle-bar{margin-top:4px}

/* Nav row */
.primary-nav{
  transition:height .3s ease;
}
.nav-list{
  display:flex; gap:1.25rem; justify-content:center; align-items:center;
  padding:.35rem 1.25rem 1rem;
  list-style:none; margin:0;
}
.nav-list a{
  display:inline-block; padding:.5rem .75rem;
  border-radius:999px;
  font-weight:600;
}
.nav-list a:hover{background:rgba(0,0,0,.04)}
.nav-list .btn--outline{margin-left:.25rem}

/* ========= Hero ========= */
.hero{
  position:relative; overflow:hidden;
  min-height:76vh;
  display:grid; grid-template-rows:1fr auto auto; /* slider, controls, dots */
}

/* Slider frame */
.slider{
  position:relative; inset:0; height:100%;
}
.slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .8s ease;
}
.slide.is-active{opacity:1}
.slide img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); /* subtle zoom for depth */
}
.slide-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(19,42,19,.65) 0%, rgba(19,42,19,.25) 40%, rgba(0,0,0,0) 80%);
}

/* Hero content */
.hero-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  z-index:2; color:#fff;
}
.hero h1{
  font-family:Poppins, Inter, system-ui, sans-serif;
  font-weight:700; letter-spacing:.2px;
  font-size:clamp(1.9rem, 3.5vw + 1rem, 3.4rem);
  line-height:1.15; margin:0 0 .75rem 0;
}
.hero-sub{
  max-width:48ch; font-size:clamp(1rem, .6vw + .9rem, 1.2rem);
  margin:0 0 1.25rem 0; color:rgba(255,255,255,.95)
}
.hero-ctas{display:flex; gap:.75rem; flex-wrap:wrap}

/* Controls */
.slider-controls{
  position:absolute; inset-block:0; display:flex; align-items:center; justify-content:space-between;
  z-index:2; pointer-events:none;
}
.control{
  pointer-events:auto;
  width:44px; height:44px; border-radius:999px; border:none;
  display:grid; place-items:center;
  background:rgba(255,255,255,.85);
  box-shadow:var(--shadow-sm);
}
.control:hover{background:#fff}
.control:focus-visible{outline:3px solid var(--gr-200); outline-offset:2px}

/* Dots */
.slider-dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:18px; z-index:2; display:flex; gap:.5rem;
}
.dot{
  width:10px; height:10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.75); background:transparent;
}
.dot.is-active{background:var(--gr-200); border-color:var(--gr-200)}
.dot:focus-visible{outline:3px solid var(--gr-200); outline-offset:2px}

/* Anchor placeholders (so nav links work now) */
.anchor-placeholder{height:120px}

/* ========= Responsive ========= */
@media (max-width: 900px){
  .nav-toggle{display:flex}
  .primary-nav{
    position:fixed; inset:0 0 0 30%; /* slide-in panel */
    background:rgba(255,255,255,.98);
    transform:translateX(100%);
    transition:transform .3s ease;
    box-shadow:var(--shadow-md);
  }
  .primary-nav.open{transform:translateX(0)}
  .nav-list{flex-direction:column; align-items:flex-start; padding:1rem 1.25rem}
  .nav-list li{width:100%}
  .nav-list a{display:block; width:100%; padding:.85rem 1rem}
  .nav-list .btn--outline{width:100%; text-align:center}
  .slider-controls .control{width:40px; height:40px}
  .hero-sub{max-width:32ch}
}

@media (max-width: 520px){
  .primary-nav{inset:0 0 0 20%}
  .hero-ctas .btn{width:100%; justify-content:center}
}

/* ========= Sticky header scrolled state ========= */
.scrolled .site-header{
  background:rgba(255,255,255,.96);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}

/* a touch more breathing room around the larger logo */
.header-top{ 
  padding:1rem 1.25rem .75rem; /* was .75 . .5rem */
}

/* more breathing room for the larger logo */
.header-top{
  padding:1.15rem 1.25rem .9rem;  /* slightly taller */
}

/* tighten nav padding so the header doesn't feel too tall overall */
.nav-list{
  padding:.2rem 1.25rem .7rem;    /* was .35rem ... 1rem */
}
/* Sticky header polish + hide/reveal */
.site-header{
  position: sticky;             /* keeps it attached to the top */
  top: 0;
  z-index: 1000;
  transition: transform .25s ease, background .2s ease, box-shadow .2s ease;
}

.site-header.header--hidden{
  transform: translateY(-100%); /* slide header out when scrolling down */
}
/* ========== MASTHEAD-LEVEL LOGO (big at top, compact when scrolled) ========== */
/* Tweak these two to taste (set --logo-xl: 240px for exact 2×) */



/* 3) Also animate header/nav paddings so the whole header eases together */
.header-top{ transition: padding .45s cubic-bezier(.2,.7,.2,1); }
.nav-list{  transition: padding .45s cubic-bezier(.2,.7,.2,1); }

/* Optional: match the header’s transform/bg transitions to the same timing */
.site-header{
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background .2s ease, box-shadow .2s ease;
}

/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce){
  .header-top, .nav-list, .site-header{ transition: none !important; }
}
/* ========= Intro / Mission ========= */
.section-intro{
  background: var(--bg);
  padding-block: clamp(3rem, 6vw, 6rem);
}

.intro-wrap{
  max-width: 920px;
  text-align: center;
}

.eyebrow{
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gr-700);
  margin: 0 0 .75rem 0;
}

.intro-title{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 700;
  color: var(--gr-800);
  font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

.intro-lead{
  margin: 0 auto;
  max-width: 70ch;
  font-size: clamp(1rem, .2rem + .9vw, 1.15rem);
  color: rgba(15,23,42,.85);
}

/* Offer sub-block (like in the reference) */
.intro-offer{
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: left;
}

.kicker{
  display: inline-block;
  font-weight: 700;
  font-size: .95rem;
  color: var(--gr-800);
  margin-bottom: .5rem;
}

.display-claim{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 700;
  color: var(--gr-900);
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.6rem);
  line-height: 1.15;
  margin: 0;
}

/* Keep left alignment inside the container while the overall section remains centered */
.section-intro .intro-offer{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Mobile refinement */
@media (max-width: 640px){
  .intro-offer{ text-align: left; }
}
/* ========= Intro / Mission (standalone card section) ========= */
.section-intro{
  background: var(--bg);
  padding-block: clamp(3rem, 6vw, 6rem);
  position: relative;
  z-index: 1; /* keeps it above page bg, but not on top of hero */
}

.intro-card{
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(2rem, 4vw, 3rem);
  /* max-width: 980px; */
  margin: 0 auto;
  text-align: center;
}

.eyebrow{
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gr-700);
  margin: 0 0 .75rem 0;
}

.intro-title{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 700;
  color: var(--gr-800);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

.intro-lead{
  margin: 0 auto;
  max-width: 70ch;
  font-size: clamp(1rem, .2rem + .9vw, 1.15rem);
  color: rgba(15,23,42,.85);
}

.intro-offer{
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  text-align: left;
}

.kicker{
  display: inline-block;
  font-weight: 700;
  font-size: .95rem;
  color: var(--gr-800);
  margin-bottom: .5rem;
}

.display-claim{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 700;
  color: var(--gr-900);
  font-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.7rem);
  line-height: 1.15;
  margin: 0;
}

/* Keep the inner "offer" aligned with the page container edges */
.section-intro .intro-offer{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (max-width: 640px){
  .intro-offer{ text-align: left; }
}
/* ========= Angebote / Offers ========= */
.section-offers{
  background: var(--bg);
  padding-block: clamp(3rem, 6vw, 6rem);
}

.offers-header{
  text-align:center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.offers-header h2{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 700;
  color: var(--gr-800);
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem);
  letter-spacing:.02em;
  margin:0 0 .35rem 0;
}
.offers-sub{
  margin:0;
  color: rgba(15,23,42,.8);
  font-size: clamp(.98rem, .3vw + .9rem, 1.05rem);
}

/* Grid */
.offers-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}
@media (max-width: 860px){
  .offers-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.offer-card{
  background:#fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, 2.8vw, 2rem);
  text-align:center;
  position:relative;
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.offer-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(0,0,0,.12);
}

/* Illustration area */
.offer-illu{
  position:relative;
  width:min(460px, 90%);
  margin: .25rem auto 1rem;
  aspect-ratio: 4 / 3;
  display:grid;
  place-items:center;
}
.offer-illu .blob{
  position:absolute; inset:8% 10% 10% 10%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(236,243,158,.9), rgba(236,243,158,.3) 70%, transparent 71%),
    radial-gradient(40% 40% at 70% 60%, rgba(144,169,85,.35), transparent 70%);
  border-radius: 44% 56% 58% 42% / 42% 48% 52% 58%;
  filter: blur(0.5px);
}
.offer-illu .main-icon{
  font-size: clamp(3.2rem, 6vw, 5rem);
  color: var(--gr-700);
}
.offer-illu .sub-icon{
  position:absolute; right:14%; bottom:14%;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: var(--gr-800);
  opacity:.9;
}

/* Titles & copy */
.offer-title{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight:700;
  font-size: clamp(1.2rem, .9rem + .9vw, 1.6rem);
  color: var(--gr-900);
  margin:.25rem 0 .35rem 0;
}
.offer-text{
  margin: 0 auto 1rem;
  max-width: 52ch;
  color: rgba(15,23,42,.8);
  font-size: 1rem;
}

/* "Mehr" button – pill style */
.btn--pill{
  background: var(--gr-700);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-sm);
  padding: .7rem 1.05rem;
  border-radius: 999px;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn--pill:hover{ background: var(--gr-800); transform: translateY(-1px); }
.btn--pill i{ font-size: .9em; }
/* === Offer images support (Schulbegleitung) === */
.offer-illu.has-img{
  position: relative;
  aspect-ratio: 5 / 3;          /* fits the wide illustration */
}

.offer-illu.has-img .offer-img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* preserves proportions */
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.08));
}

/* Hide the fallback icons when an image is used */
.offer-illu.has-img .main-icon,
.offer-illu.has-img .sub-icon{
  display: none;
}
.offer-illu.has-img{ position: relative; aspect-ratio: 5 / 3; }
.offer-illu.has-img .offer-img{
  position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0,0,0,.08));
}
.offer-illu.has-img .main-icon,
.offer-illu.has-img .sub-icon{ display: none; }
/* ==== FIX: Harmonize illustration sizes + equalize card heights ==== */

/* 1) Same visual frame for ALL offer illustrations */
.section-offers .offer-illu{ 
  aspect-ratio: 4 / 3;           /* was mixed; now consistent */
}

/* If you previously set .offer-illu.has-img to 5/3, override it: */
.section-offers .offer-illu.has-img{ 
  aspect-ratio: 4 / 3 !important;
}

/* 2) Normalize how the actual image sits inside the frame */
.section-offers .offer-illu.has-img .offer-img{
  width: 92%;
  height: 92%;
  object-fit: contain;            /* preserve proportions */
  margin: auto;                   /* perfectly centered */
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.08));
}

/* 3) Equal-height cards with aligned buttons */
.section-offers .offers-grid{ 
  align-items: stretch;           /* stretch grid children to same height */
}
.section-offers .offer-card{
  display: flex;
  flex-direction: column;         /* stack: illu -> title -> text -> button */
  height: 100%;
}
.section-offers .offer-title{ margin-top: .25rem; }
.section-offers .offer-text{ 
  flex: 1;                        /* absorb extra space so buttons align */
  margin-bottom: 1rem;
}
.section-offers .btn--pill{
  align-self: center;             /* neat alignment on all widths */
}

/* Optional: slightly taller frame on small screens for readability */
@media (max-width: 640px){
  .section-offers .offer-illu{ aspect-ratio: 3.8 / 3; }
}
/* ===== ALIGNMENT FIX FOR "LEISTUNGEN" CARDS ===== */

/* 1) Give BOTH illustrations the EXACT same visual frame */
.section-offers .offer-card{
  display: grid;
  grid-template-rows: var(--illu-h) auto 1fr auto; /* illu | title | text grows | button */
  --illu-h: clamp(220px, 26vw, 300px);            /* same height on both cards */
  height: 100%;
}

.section-offers .offer-illu{
  height: var(--illu-h);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: .5rem;
}

/* Decorative blob stays very soft so it doesn't fight alignment */
.section-offers .offer-illu .blob{
  position: absolute; inset: 6% 8%;
  filter: blur(0.3px);
  opacity: .55;
}

/* Optional white "frame" behind the image for a consistent look */
.section-offers .offer-illu.has-img::before{
  content:"";
  position:absolute; z-index:0;
  width: 86%; height: 86%;
  background:#fff;
  border-radius: 16px;
  box-shadow: 0 18px 38px rgba(0,0,0,.10);
}

/* Image normalisation inside the frame */
.section-offers .offer-illu.has-img .offer-img{
  position: relative; z-index: 1;
  max-width: 86%; max-height: 86%;
  width: auto; height: auto;
  object-fit: contain;             /* no cropping, consistent scale */
  transform-origin: center;
}

/* 2) Text + button alignment */
.section-offers .offer-title{ margin: .25rem 0 .35rem; text-align: center; }
.section-offers .offer-text{
  margin: 0 auto 1rem;
  max-width: 52ch;
  color: rgba(15,23,42,.8);
}
.section-offers .btn--pill{
  align-self: center;              /* same position across both cards */
  margin-top: .25rem;
}

/* 3) Equal column heights on the grid row */
.section-offers .offers-grid{
  align-items: stretch;
}

/* --- FINE-TUNE (only if one image still feels smaller due to internal whitespace) --- */
/* Slightly scale a specific image without affecting the frame. 
   Uncomment and tweak the scale if needed. */

/* Schulbegleitung (first card) */
.section-offers .offer-card:nth-child(1) .offer-illu.has-img .offer-img{ transform: scale(1.06); }

/* Familienhilfe (second card) */
.section-offers .offer-card:nth-child(2) .offer-illu.has-img .offer-img{ transform: scale(1.04); }

@media (max-width: 860px){
  .section-offers .offer-card{ --illu-h: clamp(200px, 40vw, 260px); }
}
/* Micro-tuning (optional) — nudge scale per image if needed */
.section-offers .offer-card:nth-child(1) .offer-illu.has-img .offer-img { transform: scale(1.04); }
.section-offers .offer-card:nth-child(2) .offer-illu.has-img .offer-img { transform: scale(1.02); }


/* ===== MERGED FROM STYLE2.CSS ===== */


/* ========= Contact Section ========= */
.contact-section {
  background: var(--gr-800);
  padding-block: clamp(3rem, 6vw, 6rem);
}

.contact-section .contact-header{
  text-align:center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}


.contact-section .contact-header h2{
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 700;
  color: var(--bg);
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem);
  letter-spacing:.02em;
  margin:0 0 .35rem 0;
}
.contact-section .contact-header .contact-sub{
  margin:0;
  color:var(--bg);
  font-size: clamp(.98rem, .3vw + .9rem, 1.05rem);
}


.contact-grid {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  gap: 2rem;
}
.contact-info, .contact-form {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 2rem;
}
.contact-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.profile-pic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}
.contact-info h3 {
  color: var(--gr-800);
  margin-bottom: 0.25rem;
}
.contact-info .profession {
  color: rgba(15,23,42,.75);
  margin-bottom: 0.75rem;
}
.contact-info .email a {
  color: var(--gr-700);
  font-weight: 600;
}
.contact-form label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink);
  font-weight: 500;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: var(--radius-md);
  font-size: 1rem;
  margin-bottom: 1rem;
  font-family: inherit;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--gr-700);
  outline: none;
  box-shadow: 0 0 0 2px rgba(79,119,45,.15);
}
.contact-form button {
  align-self: start;
}
@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ========= FAQ Section ========= */
.faq-section {
  background: var(--bg);
  padding-block: clamp(3rem, 6vw, 6rem);
}
.faq-section h2 {
  text-align: center;
  color: var(--gr-800);
  font-family: Poppins, Inter, sans-serif;
  font-weight: 700;
  margin-bottom: 2rem;
}
.faq-item {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.faq-item:hover {
  box-shadow: var(--shadow-md);
}
.question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gr-800);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .3s, color .3s;
}

.green {
  background: var(--gr-700);
  color: var(--white);
}

.question:hover {
  background: var(--gr-700);
  color: var(--white);
}
.answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .3s ease;
  opacity: 0;
  padding: 0 1.25rem;
}

/* Lorsque la réponse est ouverte, on ajuste max-height et opacity */
.answer.open {
  max-height: 500px; /* Ajuste selon la longueur du texte */
  opacity: 1;
  padding-block: 0.75rem 1.25rem;
}


/* Style de la section News */
.news {
  padding: 40px 0;
  background-color: var(--bg);
}

.news .container {
  /* max-width: 1200px; */
  margin: 0 auto;
  padding: 0 20px;
}

.news h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}

/* Grille d'articles */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.news-item {
  background-color: var(--white);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform .2s ease, box-shadow .2s ease;
  height:500px;
  position: relative; /* Assurez-vous que le parent a une position relative */
}
.news-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(0,0,0,.12);
}

.news-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.news-title {
  font-size: 1.5rem;
  margin: 0 16px 16px;
  display: -webkit-box;            /* For older browsers like Safari */
  -webkit-line-clamp: 2;           /* Limit to 2 lines in WebKit-based browsers */
  -webkit-box-orient: vertical;    /* For older browsers like Safari */
  overflow: hidden;                /* Hide overflow text */
  text-overflow: ellipsis;         /* Add "..." when text overflows */
  
  display: box;                    /* Standard for modern browsers */
  line-clamp: 2;                   /* Limit to 2 lines in modern browsers */
  box-orient: vertical;            /* Standard for modern browsers */
}

.news-summary {
  font-size: 1rem;
  color: rgba(15,23,42,.8);
  margin: 0 16px 16px;
  display: -webkit-box;            /* For older browsers like Safari */
  -webkit-line-clamp: 5;           /* Limit to 5 lines in WebKit-based browsers */
  -webkit-box-orient: vertical;    /* For older browsers like Safari */
  overflow: hidden;                /* Hide overflow text */
  text-overflow: ellipsis;         /* Add "..." when text overflows */
  
  display: box;                    /* Standard for modern browsers */
  line-clamp: 5;                   /* Limit to 5 lines in modern browsers */
  box-orient: vertical;            /* Standard for modern browsers */
}

.news-item .btn {
  display: block;
  margin: auto 16px 0 16px; /* Enlève la marge inférieure pour laisser de la place en bas */
  padding: 10px 20px;
  background-color: var(--gr-700);
  color: var(--white);
  text-align: center;
  border-radius: 4px;
  text-decoration: none;
  position: absolute;
  bottom: 23px; /* Fixe le bouton à 23px du bas */
  left: 0;
  right: 0;
}

.news-item .btn:hover {
  background-color: var(--gr-800);
}

/* Responsive */
@media (max-width: 1200px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 600px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}
/* Style de base pour les boutons */
.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Style spécifique pour le bouton primaire */
.btn--primary {
  background-color: var(--gr-700);
  color: var(--white);
  border: 2px solid var(--gr-700);
}

.btn--primary:hover {
  background-color: var(--gr-800);
  border-color: var(--gr-800);
}

/* Style spécifique pour le bouton secondaire */
.btn--secondary {
  background-color: var(--gr-500);
  color: var(--white);
  border: 2px solid var(--gr-500);
}

.btn--secondary:hover {
  background-color: var(--gr-700);
  border-color: var(--gr-700);
}

/* Style pour le conteneur du bouton "Voir tous les articles" */
.see-all-articles {
  text-align: center;
  margin-top: 20px;
}

.see-all-articles .btn--secondary {
  background-color: var(--gr-700);
  color: var(--white);
  border: 2px solid var(--gr-700);
  font-size: 18px;
}

.see-all-articles .btn--secondary:hover {
  background-color: var(--gr-800);
  border-color: var(--gr-800);
}
/* ======= Sticky Nav Styles ======= */
.sticky-header {
  position: fixed;
  top: 0;
  width: 100%;
  height:100px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.sticky-header .container {
  display: flex;
  height:100px;
  align-items: center;
  justify-content: space-between;
  padding: 0rem 1rem;
}

.sticky-header .brand img {
  width: 90px;        /* largeur fixe */
  height: auto;       /* garder le ratio original */
  max-height: 90px;   /* limite la hauteur pour qu'elle ne dépasse pas le header */
  display: block;     /* supprime le petit espace bas lié aux images inline */
}


.sticky-header .nav-list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.sticky-header .nav-list li a {
  text-decoration: none;
  font-weight: 500;
  color: var(--gr-900);
  transition: color 0.2s ease;
}

.sticky-header .nav-list li a.active {
  color: var(--white);
  background-color: var(--gr-700);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.sticky-header .nav-list li a.active:hover {
  color: var(--gr-200);
}

.sticky-header .nav-list li a:hover {
  color: var(--gr-800);
}

.sticky-header .btn--outline {
  padding: 0.5rem 1rem;
  border: 2px solid var(--gr-800);
  border-radius: 25px;
  color: var(--gr-800);
  transition: all 0.3s ease;
}

.sticky-header .btn--outline:hover {
  /* background-color: var(--gr-800); */
  color: var(--white);
}

/* Mobile Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle-bar {
  width: 25px;
  height: 3px;
  background-color: var(--gr-900);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Responsive */
@media(max-width: 768px) {
  .sticky-header .nav-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    flex-direction: column;
    gap: 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .sticky-header .nav-list.active {
    max-height: 500px;
    display: block;  /* Assure que l'élément est affiché */
    padding: .15rem 1.25rem .55rem;
  }

  .nav-toggle {
    display: flex;
  }
}

/* ===== UNIFORMED THEMEN UND NEWS SECTION ===== */
.section-news {
  background: var(--bg);
}
.section-news .offer-card {
  min-height: 100%;
}
.section-news .offer-illu.has-img .offer-img {
  height: 200px; /* keep same article image height */
  object-fit: cover;
}
.section-news .offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}
.section-news .offer-text {
  font-size: 1rem;
}

/* ========= team Section ========= */
.team-section {
  background: var(--gr-800);
  padding-block: clamp(3rem, 6vw, 6rem);
}

.team-section .team-header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.team-section .team-header h2 {
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 700;
  color: var(--bg);
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem);
  letter-spacing: .02em;
  margin: 0 0 .35rem 0;
}

.team-section .team-header .team-sub {
  margin: 0;
  color: var(--bg);
  font-size: clamp(.98rem, .3vw + .9rem, 1.05rem);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur grand écran */
  gap: 20px;
  max-width: var(--container);
  margin: auto;
}

.team-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 2rem;
  background-color: var(--white);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  height: 500px;
  position: relative; /* Assurez-vous que le parent a une position relative */
}

.profile-pic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

.team-info h3 {
  color: var(--gr-800);
  margin-bottom: 0.25rem;
}

.team-info .profession {
  color: rgba(15, 23, 42, .75);
  margin-bottom: 0.75rem;
}

.team-info .email a {
  color: var(--gr-700);
  font-weight: 600;
}

/* Media Query pour les petits écrans */
@media (max-width: 860px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur les écrans moyens */
  }
}

/* Media Query pour les très petits écrans */
@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: 1fr; /* 1 colonne sur les petits écrans */
  }
}

/* ========= Section des Valeurs ========= */
.section-values {
  background-color: #f5f7fa;
  padding: 60px 0;
}

/* .section-values .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
} */

.section-values h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #333;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 50px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.value-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.value-icon {
  font-size: 40px;
  color: #4caf50;
  margin-bottom: 20px;
}

.value-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 15px;
}

.value-card p {
  font-size: 1rem;
  color: #777;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .value-card {
    padding: 25px;
  }
}

@media (max-width: 480px) {
  .values-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .value-card {
    padding: 20px;
  }

  .value-card h3 {
    font-size: 1.3rem;
  }

  .value-card p {
    font-size: 0.95rem;
  }
}


/* ========= Section CTA ========= */
.cta-section {
  background-color: var(--bg); /* Vert vif pour attirer l'attention */
  color: var(--gr-800);
  padding: 60px 0;
  text-align: center;
}

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

.cta-section h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  margin-bottom: 20px;
  color: var(--gr-800);
}

.cta-section p {
  font-size: 1.125rem;
  color: var(--gr-900);
  margin-bottom: 30px;
}

.cta-section .btn {
  background-color: #fff;
  color: var(--gr-900);
  font-weight: 600;
  padding: 15px 30px;
  font-size: 1.125rem;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.cta-section .btn:hover {
  background-color: var(--gr-900); /* Change de couleur au survol */
  color: var(--bg);
  transform: translateY(-5px);
}

@media (max-width: 768px) {
  .cta-section h2 {
    font-size: 2rem; /* Taille réduite sur les écrans plus petits */
  }

  .cta-section p {
    font-size: 1rem; /* Ajuste la taille de la description */
  }

  .cta-section .btn {
    font-size: 1rem; /* Réduit légèrement la taille du bouton */
    padding: 12px 25px; /* Réduit le padding du bouton */
  }
}

.detail-card img {
    max-height: 180px;
    object-fit: cover;
}
.service-header {
    background-color: #f8f9fa;
    padding: 40px;
    border-radius: 10px;
    margin-bottom: 30px;
}
.autres-services {
    margin: 60px auto;
    text-align: center;
    max-width: 1200px;
}
.services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.service-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 30%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 20px;
    transition: transform 0.2s ease;
}
.service-card:hover {
    transform: translateY(-5px);
}
.service-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px;
}
.service-card h3 {
    margin-top: 15px;
    color: #333;
}
.service-card p {
    color: #555;
    font-size: 0.95em;
}
.btn-small {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
}
.btn-small:hover {
    background-color: #0056b3;
}
.center {
    margin-top: 25px;
}
.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #28a745;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
}
.btn:hover {
    background-color: #1f7e34;
}
@media (max-width: 768px) {
    .service-card {
        width: 45%;
    }
}
@media (max-width: 480px) {
    .service-card {
        width: 100%;
    }
}
.problems {
    padding: 60px 20px;
    max-width: 1200px;
    margin: auto;
    text-align: center;
}
.problems-header {
    margin-bottom: 40px;
}
.problems-header h2 {
    font-size: 2em;
    color: #222;
    margin-bottom: 10px;
}
.problems-header h3 {
    font-size: 1.3em;
    color: #555;
    margin-bottom: 15px;
}
.problems-header p {
    color: #666;
    font-size: 1em;
    max-width: 700px;
    margin: auto;
}

.problems-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}
.problem-item {
    width: 30%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.problem-item:hover {
    transform: translateY(-5px);
}
.problem-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 15px;
}
.problem-item h4 {
    font-size: 1.1em;
    color: #333;
}
@media (max-width: 900px) {
    .problem-item {
        width: 45%;
    }
}
@media (max-width: 600px) {
    .problem-item {
        width: 100%;
    }
}
.goals {
    padding: 60px 20px;
    max-width: 1200px;
    margin: auto;
    text-align: center;
}
.goals-header {
    margin-bottom: 40px;
}
.goals-header h2 {
    font-size: 2em;
    color: #222;
    margin-bottom: 10px;
}
.goals-header h3 {
    font-size: 1.3em;
    color: #555;
    margin-bottom: 15px;
}
.goals-header p {
    color: #666;
    font-size: 1em;
    /* max-width: 700px; */
    margin: auto;
}

.goals-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}
.goal-item {
    width: 30%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.goal-item:hover {
    transform: translateY(-5px);
}
.goal-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 15px;
}
.goal-item h4 {
    font-size: 1.1em;
    color: #333;
}
@media (max-width: 900px) {
    .goal-item {
        width: 45%;
    }
}
@media (max-width: 600px) {
    .goal-item {
        width: 100%;
    }
}
.solutions {
    padding: 60px 20px;
    max-width: 1200px;
    margin: auto;
    text-align: center;
}
.solutions-header {
    margin-bottom: 40px;
}
.solutions-header h2 {
    font-size: 2em;
    color: #222;
    margin-bottom: 10px;
}
.solutions-header h3 {
    font-size: 1.3em;
    color: #555;
    margin-bottom: 15px;
}
.solutions-header p {
    color: #666;
    font-size: 1em;
    max-width: 700px;
    margin: auto;
}

.solutions-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}
.solution-item {
    width: 30%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.solution-item:hover {
    transform: translateY(-5px);
}
.solution-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 15px;
}
.solution-item h4 {
    font-size: 1.1em;
    color: #333;
}
@media (max-width: 900px) {
    .solution-item {
        width: 45%;
    }
}
@media (max-width: 600px) {
    .solution-item {
        width: 100%;
    }
}
.description {
    padding: 60px 20px;
    max-width: 900px;
    margin: auto;
    text-align: center;
}
.description-content h2 {
    font-size: 2em;
    color: #222;
    margin-bottom: 10px;
}
.description-content h3 {
    font-size: 1.3em;
    color: #555;
    margin-bottom: 20px;
}
.description-content p {
    font-size: 1em;
    color: #666;
    line-height: 1.6;
}

/* Ville principale */
.city-header {
    text-align: center;
    margin-bottom: 40px;
}
.city-header h1 {
    font-size: 2.5em;
    color: #333;
}
.city-header img {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 20px;
}

/* Services */
.services {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 60px;
}
.service-card {
    background: #fff;
    flex: 1 1 calc(33.333% - 20px);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
}
.service-card img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}
.service-card h3 {
    color: #007BFF;
    margin-bottom: 10px;
}
.service-card p {
    color: #555;
    font-size: 0.95em;
}

/* Autres villes */
.other-cities {
    margin-top: 60px;
    margin-bottom: 30px;
}
.other-cities h2 {
    text-align: center;
    margin-bottom: 30px;
}
.other-cities-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.other-city-card {
    background: #fff;
    flex: 1 1 calc(33.333% - 20px);
    max-width: 300px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
}
.other-city-card img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}
.other-city-card h4 {
    color: #333;
}
.other-city-card a {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #fff;
    background: #007BFF;
    padding: 5px 10px;
    border-radius: 5px;
}
.other-city-card a:hover {
    background: #0056b3;
}

/* Responsive */
@media(max-width:900px){
    .services .service-card, .other-cities-grid .other-city-card {
        flex: 1 1 45%;
    }
}
@media(max-width:600px){
    .services .service-card, .other-cities-grid .other-city-card {
        flex: 1 1 100%;
    }
}
.btn-service {
    display: inline-block;
    padding: 8px 15px;
    margin-top: 10px;
    background-color: #31572c;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.btn-service:hover {
    background-color: #2a461f;
}

.article-container {
        width: 80%;
        margin: 100px auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .article-title {
        font-size: 2.5em;
        margin-bottom: 20px;
        color: #333;
    }

    .article-description {
        font-size: 1.2em;
        line-height: 1.8;
        color: #555;
    }

    .article-image {
        max-width: 100%;
        height: auto;
        margin: 20px 0;
        border-radius: 8px;
    }

    .article-description a {
        color: #007BFF;
        text-decoration: none;
    }

    .article-description a:hover {
        text-decoration: underline;
    }

    .news {
        margin-top: 60px;
        background: #fff;
        padding: 40px 0;
    }

    .news-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .news-item {
        width: 300px;
        background: #fafafa;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 15px;
        text-align: center;
        transition: transform 0.2s ease;
    }

    .news-item:hover {
        transform: translateY(-5px);
    }

    .news-image {
        width: 100%;
        border-radius: 6px;
        height: 180px;
        object-fit: cover;
    }

    .news-title {
        font-size: 1.2em;
        margin: 10px 0;
        color: #333;
    }

    .news-summary {
        font-size: 0.95em;
        color: #555;
        margin-bottom: 10px;
    }

    .btn--pill {
        background: #007BFF;
        color: #fff;
        padding: 8px 16px;
        border-radius: 50px;
        text-decoration: none;
    }

    .btn--pill:hover {
        background: #0056b3;
    }

.cities-section {
    background-color: #f8f9fa;
    padding: 60px 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.cities-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.city-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 300px;
    padding: 15px;
    text-align: center;
    transition: transform 0.2s ease;
}

.city-card:hover {
    transform: translateY(-5px);
}

.city-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

.city-name {
    font-size: 1.3em;
    margin: 15px 0 10px;
    color: #333;
}

.city-description {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 15px;
}

.btn--pill {
    display: inline-block;
    background: #007BFF;
    color: #fff;
    padding: 8px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.3s;
}

.btn--pill:hover {
    background: #0056b3;
}