*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1a2e5a;--blue:#2563eb;--sky:#3b82f6;--green:#16a34a;
  --orange:#d97706;--gold:#f59e0b;--light:#f0f4ff;--white:#fff;
  --gray:#64748b;--text:#1e293b;--border:rgba(255,255,255,.6);
  --accent:#2563eb;
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--text);background:#f8faff;overflow-x:hidden}


/* ── HERO ── */
/* .hero{position:relative;overflow:hidden;min-height:36rem;background:linear-gradient(105deg,#dbeafe 0%,#e0f2fe 45%,#c7d2fe 100%);display:flex;align-items:center}
.hero-content{position:relative;z-index:2;padding:52px 5%;max-width:560px}
.hero-content h1{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3.5vw,2.4rem);color:var(--navy);line-height:1.2;margin-bottom:10px}
.hero-content h1 span{color:var(--navy);font-weight:800}
.hero-sub-title{font-size:.9rem;color:var(--gray);margin-bottom:16px;font-style:italic}
.hero-desc{font-size:.86rem;color:#374151;line-height:1.65;margin-bottom:26px;max-width:460px}
.btn{display:inline-block;padding:11px 22px;border-radius:6px;font-size:.88rem;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s;border:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15)}
.btn-navy{background:var(--navy);color:#fff}
.btn-outline{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn-green{background:var(--green);color:#fff}
.btn-blue{background:var(--blue);color:#fff} */

/* Hero illustration */
/* 
.hero-img{position:absolute;right:0;top:0;bottom:0;width:56%;background:linear-gradient(120deg,#93c5fd 0%,#bfdbfe 100%);clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block} */
/* --- Global Variables --- */
:root {
    --navy-deep: #1a2b52;
    --navy-hover: #121e3a;
    --soft-blue-bg: #f4f7fa;
    --text-main: #333d4b;
    --text-muted: #6b7280;
    --badge-bg: #e5eaf5;
    --badge-text: #4a5d8a;
    --white: #ffffff;
    --radius-lg: 8px;
    --radius-round: 50px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Hero Section Layout --- */
.hero {
    display: flex;
    align-items: center;
    min-height: 80vh;
    background: var(--soft-blue-bg);
    overflow: hidden;
    position: relative;
}

/* Desktop Split Layout */
.hero-content {
    flex: 1;
    /* padding: 60px 5% 60px 8%; */
    padding:60px 5%;
    z-index: 2;
    margin-top:-6rem;
}

.hero-img {
    flex: 1;
    height: auto;
    align-self: stretch;
    clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%); /* The angled cut from your image */
}

.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Typography & Elements --- */
.hero-content h1 {
    font-family: 'Georgia', serif; /* Or a similar professional Serif */
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    color: var(--navy-deep);
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-content h1 span {
    display: block;
    font-size: 0.9em;
}

.hero-sub-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy-deep);
    margin-bottom: 15px;
}

.hero-desc {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 35px;
}

/* --- Badges (Mirroring the image tags) --- */
/* If you want to add the pill badges seen in the image, add <span> tags to your HTML */
.badge-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

/* --- Buttons --- */
.btn-navy {
    display: inline-block;
    background-color: var(--navy-deep);
    color: var(--white) !important;
    padding: 16px 32px;
    border-radius: var(--radius-lg);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 4px 14px rgba(26, 43, 82, 0.2);
    text-align: center;
}

.btn-navy:hover {
    background-color: var(--navy-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 43, 82, 0.3);
}

/* --- Animations --- */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.7s ease-out forwards;
}

.d1 { animation-delay: 0.2s; }
.d2 { animation-delay: 0.4s; }
.d3 { animation-delay: 0.6s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Responsive Design (Mobile & Tablet) --- */

/* Tablet Device (1024px and below) */
/* @media (max-width: 1024px) {
    .hero {
        min-height: auto;
    }
    
    .hero-content {
        padding: 60px 5%;
    }
    
    .hero-img {
        clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%);
    }
} */

/* Mobile Device (768px and below) */
@media (max-width: 1024px) {
    .hero {
        flex-direction: column; /* Stacked layout */
        text-align: center;
    }

    .hero-img {
        width: 100%;
        height: 350px;
        clip-path: none; /* Remove angle on mobile for better visibility */
        order: -1; /* Image appears first on mobile */
    }

    .hero-content {
        padding: 40px 20px;
        margin-top: 0;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .btn-navy {
        width: 100%; /* Easy to tap on mobile */
        max-width: 320px;
    }
    .assistant-text li {
      justify-content: start;
      text-align: start;
      font-size: 1rem !important;
    }
    .assistant-img img{
      width:298px !important;
    }
}
/* --- Global Section Refinement --- */
:root {
  --navy: #0f172a;
  --blue-accent: #2563eb;
  --bg-gray: #f1f5f9;
  --white: #ffffff;
  --text-main: #334155;
  --playfair: 'Playfair Display', serif;
  --inter: 'Inter', sans-serif;
}

.section {
    padding: 20px 10%; /* More breathing room */

  overflow: hidden;
}

.section-light { background: var(--white); padding:40px 10%; }
.section-gray { background: var(--bg-gray); }

/* --- 1. Pathway Intro Section --- */
.pathway-intro {
  display: flex;
  grid-template-columns: 1.5fr 1fr; /* Text gets more space than the map */
  gap: 60px;
  justify-content: space-between;
  /* margin-bottom: 50px; */
  align-items: center;
}

.pathway-intro h2 {
  font-family: var(--playfair);
  font-size: 2.5rem;
  color: var(--navy);
  margin-bottom: 20px;
}

.pathway-intro p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-main);
  max-width: 600px;
}

/* Germany Map SVG Styling */
.germany-map {
  width: 16rem;
}
.germany-map svg {
  max-width: 280px;
  filter: drop-shadow(0 15px 30px rgba(37, 99, 235, 0.15));
  transition: transform 0.4s ease;
}

.germany-map svg:hover {
  transform: scale(1.05);
}

/* --- 2. Steps Box (The Timeline Container) --- */
.steps-box {
  background: var(--white);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.03);
  border: 1px solid #eef2f6;
  max-width: 850px;
  margin: 0 auto;
}

.steps-box h3 {
  font-family: var(--playfair);
  text-align: left;
  font-size: 1.2rem;
  color: var(--navy);
  margin-bottom: 8px;
}

.click-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--blue-accent);
  font-weight: 600;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}

/* --- 3. Assistant Nurse Section --- */
.assistant-section {
  display: flex;
  align-items: center;
  gap: 80px;
}

.assistant-text {
  flex: 1;
}

.assistant-text h2 {
  font-family: var(--playfair);
  font-size: 2.5rem;
  color: var(--navy);
  margin-bottom: 20px;
}

.assistant-text ul {
  list-style: none;
  padding: 0;
  margin-top: 25px;
}

.assistant-text li {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  padding: 12px 0;
  /* border-bottom: 1px solid #cbd5e1; */
  display: flex;
  align-items: center;
}

.assistant-text li::before {
  content: "→";
  color: var(--blue-accent);
  margin-right: 15px;
  font-weight: bold;
}

/* .assistant-img {
  flex: 1;
} */

.assistant-img img {
  width: 400px;
  border-radius: 24px;
  /* box-shadow: 0 20px 40px rgba(0,0,0,0.1); */
  transition: 0.3s;
  margin:30px 0;
}

/* --- 5. RESPONSIVE DESIGN (Mobile & Tablet) --- */

@media (max-width: 1024px) {
  .section { padding: 60px 5%; }
  .pathway-intro, .assistant-section {
    grid-template-columns: 1fr;
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  .pathway-intro p, .assistant-text p { margin: 0 auto; }
}

@media (max-width: 768px) {
  .pathway-intro h2, .assistant-text h2, .cta-band h2 {
    font-size: 2rem;
  }
  
  .germany-map svg { max-width: 200px; }
  
  .steps-box { padding: 20px; }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-buttons .btn { width: 100%; max-width: 300px; }

  /* Hide the vertical connector line on very small screens to save space */
  .timeline-container::before {
    left: 20px;
  }
}


.section-title{
  margin-bottom: 40px;
}