/* —————————————————————————————————————
   3) GALLERY CAROUSEL STYLES
   ————————————————————————————————————— */
   :root {
    --text: #333;
    --bg: #fdf2f4;
    --muted: #666;
  
    /* carousel settings */
    --card-width: 200px;
    --gap: 1.5rem;
    --count: 8;          /* number of unique cards */
    --duration: 50s;
  }
  
  .section-gallery {
    background: var(--bg);
    padding: 100px 0;
  }
  .section-gallery .section-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--text);
    text-align: right;
  }
  
  .carousel {
    overflow: hidden;
    margin: 0 calc(-1 * var(--gap));
    /* pause on hover */
  }
  .carousel:hover .carousel-track {
    animation-play-state: paused;
  }
  
  .carousel-track {
    display: flex;
    /* 2×unique = total cards */
    width: calc((var(--card-width) + var(--gap)) * (var(--count) * 2));
    animation: scroll-left var(--duration) linear infinite;
  }
  
  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-1 * (var(--card-width) + var(--gap)) * var(--count)));
    }
  }
  
  .gallery-card {
    flex: 0 0 auto;
    width: var(--card-width);
    margin-right: var(--gap);
  
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    transition: transform .3s, box-shadow .3s;
  }
  .gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  }
  .gallery-card img {
    width: 100%;
    height: auto;
    display: block;
  }
  .gallery-caption {
    padding: 1rem;
    text-align: center;
  }
  .gallery-caption h3 {
    font-size: 1.1rem;
    margin-bottom: .5rem;
    color: var(--primary);
  }
  .gallery-caption p {
    font-size: .9rem;
    color: var(--muted);
  }
  
  /* responsive tweaks */
  @media (max-width: 768px) {
    :root {
      --card-width: 150px;
      --duration: 15s;
    }
  }
  @media (max-width: 480px) {
    :root {
      --card-width: 120px;
      --duration: 12s;
    }
  }
  
  /* —————————————————————————————————————
     4) SERVICES
     ————————————————————————————————————— */
  .section-services {
    background: var(--gray-light);
    padding: 100px 0;
  }
  .section-services .section-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--text);
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
  }
  .service-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem 1rem;
    text-align: center;
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  }
  .service-card i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
  }
  .service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text);
  }
  .service-card p {
    font-size: 0.95rem;
    color: var(--muted);
  }