:root{
      --blue:#0d6efd;
      --muted:#7b8a99;
      --card-radius:20px;
    }
    body { font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

    /* Section layout */
    #testimonials {
      min-height: 100vh;            /* IMPORTANT: cover full viewport height */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      padding: 60px 18px;
      overflow: hidden;
    }

    /* Title and subtitle */
    #testimonials .title {
      text-align: center;
      margin-bottom: 36px;
    }
    #testimonials h2 {
      font-size: 48px;             /* matches sample heading size */
      line-height: 1;
      margin: 0 0 12px;
      font-weight: 700;
      color: #2b3640;
    }
    #testimonials .subtitle {
      max-width: 920px;
      color: var(--muted);
      font-size: 16px;
      margin: 0 auto;
      font-weight: 300;
    }

    /* Cards row - horizontal on all sizes; mobile swipeable */
    .cards-wrap {
      width: 100%;
      max-width: 1200px;
      display: flex;
      gap: 28px;
      padding: 24px 10px;
      /* allow horizontal scrolling on small screens while keeping items horizontal */
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .cards-wrap::-webkit-scrollbar { height: 8px; }
    .cards-wrap::-webkit-scrollbar-thumb { background: rgba(13,110,253,0.15); border-radius: 10px; }

    /* single card */
    .testimonial-card {
      flex: 0 0 calc((100% - 56px) / 3); /* three cards visible in wide view, with gap accounted */
      background: #fff;
      border-radius: var(--card-radius);
      position: relative;
      padding: 34px 28px 60px;
      box-shadow: 0 30px 60px rgba(17,24,39,0.06), 0 6px 18px rgba(13,110,253,0.04);
      scroll-snap-align: center;
      min-width: 300px;
      transition: transform .3s ease;
    }

    /* top blue accent bar (rounded) */
    .testimonial-card::before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 8px;
      border-top-left-radius: var(--card-radius);
      border-top-right-radius: var(--card-radius);
      background: linear-gradient(90deg, rgba(13,110,253,1), rgba(0,135,255,0.85));
    }

    /* star, paragraph, avatar, name, role */
    .stars { color: #ffbf00; font-size: 14px; margin-bottom: 18px; }
    .testimonial-text { color: #6b7280; font-size: 15px; line-height: 1.6; margin-bottom: 18px; min-height: 84px; }
    .avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      object-fit: cover;
      margin: 0 auto 14px;
      display: block;
      box-shadow: 0 6px 18px rgba(16,24,40,0.08);
    }
    .person-name { font-size: 18px; font-weight: 700; color:#2b3640; margin-bottom: 4px; }
    .person-role { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }

    /* large quotation mark at bottom center */
    .quote-mark {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -28px;
      font-size: 76px;
      color: rgba(125,135,150,0.18);
      line-height: 0.9;
      pointer-events: none;
    }

    /* float-in animation (initial hidden state) */
    .testimonial-card { opacity: 0; transform: translateY(30px) scale(.99); }
    .testimonial-card.animate {
      animation: floatIn 700ms cubic-bezier(.22,.9,.32,1) forwards;
    }
    /* use nth-child to create stagger if needed */
    .testimonial-card.animate:nth-child(1) { animation-delay: 0ms; }
    .testimonial-card.animate:nth-child(2) { animation-delay: 140ms; }
    .testimonial-card.animate:nth-child(3) { animation-delay: 280ms; }

    @keyframes floatIn {
      from { opacity: 0; transform: translateY(30px) scale(.99); filter: blur(4px); }
      to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    /* On very wide screens make each card same height */
    @media (min-width: 992px) {
      .testimonial-card { min-height: 380px; }
    }

    /* On narrow screens keep horizontal layout but make cards narrower */
    @media (max-width: 767px) {
      .testimonial-card { flex: 0 0 84%; padding: 26px; }
      #testimonials h2 { font-size: 36px; }
      .quote-mark { font-size: 64px; bottom: -24px; }
    }
  
.hero-section {
      height: 100vh; /* Full screen */
      background: #eaf6ff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .hero-section h4 {
      font-size: 14px;
      font-weight: 600;
      color: #5f7adb;
      margin-bottom: 10px;
      opacity: 0;
      transform: translateY(20px);
      transition: all 1s ease;
    }

    .hero-section h1 {
      font-size: 42px;
      font-weight: 700;
      color: #2c2c2c;
      margin-bottom: 20px;
      opacity: 0;
      transform: translateY(20px);
      transition: all 1s ease 0.2s;
    }

    .hero-section .download-btn {
      background: #000;
      color: #fff;
      font-size: 14px;
      padding: 12px 30px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-bottom: 20px;
      transition: background 0.3s;
      opacity: 0;
      transform: translateY(20px);
      transition: all 1s ease 0.4s;
    }

    .hero-section .download-btn:hover {
      background: #333;
    }

    .hero-section p {
      font-size: 14px;
      color: #666;
      margin-bottom: 20px;
      opacity: 0;
      transform: translateY(20px);
      transition: all 1s ease 0.6s;
    }

    .social-icons {
      display: flex;
      gap: 20px;
      opacity: 0;
      transform: translateY(20px);
      transition: all 1s ease 0.8s;
    }

    .social-icons a {
      width: 50px;
      height: 50px;
      background: #5f7adb;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #fff;
      font-size: 20px;
      text-decoration: none;
      transition: transform 0.3s;
    }

    .social-icons a:hover {
      transform: scale(1.1);
    }

    /* Animate on scroll */
    .visible {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }


    
    /* Footer */
    footer {
      background: #0d6efd;
      color: white;
      padding: 40px 0;
    }
    footer a {
      color: #dbeafe;
      text-decoration: none;
    }
    footer a:hover {
      text-decoration: underline;
    }