/* -------------------------------------------------
   VARIABLES
   ------------------------------------------------- */
:root {
    --clr-primary: #0a3d2c;
    --clr-primary-light: #198754;
    --clr-accent: #3a8b68;
    --clr-line: #d0d7de;
    --clr-bg: #f8f9fa;
    --clr-text: #2d2d2d;
    --radius: .5rem;
    --gap: 2rem;
}

/* -------------------------------------------------
   RESET & TYPOGRAPHY
   ------------------------------------------------- */

.container-custom { max-width: 1100px; margin-inline: auto; padding-inline: 1.25rem; }

/* -------------------------------------------------
   HERO
   ------------------------------------------------- */


/* -------------------------------------------------
   MAIN
   ------------------------------------------------- */
.main { padding: 4rem 0; }
.main__title {
    font-size: 2.125rem;
    font-weight: 800;
    color:#000 !important;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}
.main__title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: #ffcc33;
    border-radius: 2px;
}

/* -------------------------------------------------
   TIMELINE LAYOUT
   ------------------------------------------------- */
.timeline {
    position: relative;
    padding-left: 2.5rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 1.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--clr-line);
    z-index: 1;
}

.timeline__item {
    position: relative;
    margin-bottom: 3rem;
}
.timeline__item:last-child { margin-bottom: 0; }

.timeline__marker {
    position: absolute;
    left: -2.5rem;
    top: .75rem;
    width: 44px;
    height: 44px;
    background: #ffd700 !important;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    z-index: 2;
    box-shadow: 0 0 0 6px rgba(10,61,44,.15);
}

.timeline__content {
    padding-left: 1.5rem;
    border-left: 3px solid var(--clr-line);
    margin-left: 1rem;
}

.timeline__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000 !important;
    margin-bottom: 1rem;
    position: relative;
}
.timeline__title::before {
    content: '';
    position: absolute;
    left: -1.75rem;
    top: .5rem;
    width: 12px;
    height: 12px;
    background: var(--clr-accent);
    border-radius: 50%;
}

/* -------------------------------------------------
   CONTENT STYLES
   ------------------------------------------------- */
.timeline__body {
    font-size: 1rem;
    line-height: 1.8;
}
.timeline__body p {
    margin-bottom: 1rem;
}
.list-clean {
    padding-left: 1.5rem;
    margin: 1rem 0;
}
.list-clean li {
    margin-bottom: .4rem;
    position: relative;
}
.list-clean li::marker { color: var(--clr-accent); }

/* -------------------------------------------------
   EXPAND BUTTON
   ------------------------------------------------- */
.expand-btn {
    background: transparent;
    border: 1.5px solid var(--clr-primary-light);
    color: var(--clr-primary-light);
    padding: .6rem 1.2rem;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: .25s ease;
    font-size: .95rem;
}
.expand-btn:hover {
    background: var(--clr-primary-light);
    color: white;
}
.expand-btn i {
    transition: transform .2s;
}
.expand-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.expandable-list {
    margin-top: 1rem;
    animation: slideDown .3s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 1000px; }
}

/* -------------------------------------------------
   POLICY GRID (2-column on larger screens)
   ------------------------------------------------- */
.policy-grid {
    display: grid;
    gap: 2rem;
    margin-top: 1rem;
}
@media (min-width: 640px) {
    .policy-grid { grid-template-columns: 1fr 1fr; }
}
.policy-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: #000 !important;
    margin-bottom: .75rem;
    border-bottom: 2px solid var(--clr-accent);
    padding-bottom: .25rem;
    display: inline-block;
}

/* -------------------------------------------------
   RESPONSIVE
   ------------------------------------------------- */
@media (max-width: 768px) {
    .timeline { padding-left: 1.5rem; }
    .timeline::before { left: 1rem; }
    .timeline__marker { left: -1.5rem; width: 36px; height: 36px; font-size: 1rem; }
    .timeline__content { padding-left: 1rem; border-left: none; }
    .timeline__title::before { left: -1.25rem; }
    .main { padding: 3rem 0; }
}

/* Card style */
    .info-card {
      background: #f8f9fa;
      border: none;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }

    .info-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .info-icon {
      font-size: 40px;
      color: var(--secondary);
    }

    
    /* List checkmarks */
    .service-list li::before {
      content: "✔";
      color: var(--secondary);
      font-weight: bold;
      margin-right: 8px;
    }

    /* Image Mosaic Layout */
.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

.img-box {
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.img-box:hover img {
  transform: scale(1.05);
}

/* Make one image taller for visual interest */
.image-grid .tall {
  grid-row: span 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: 1fr;
  }
  .image-grid .tall {
    grid-row: auto;
  }
}