/* ==========================================
       1. GLOBAL & SECTION HEADERS (DARK THEME)
       ========================================== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    .sd-proof-section {
      padding: 40px 0;
      background-color: #000000; /* Black Background */
    }

    .sd-section-header {
      text-align: center;
      margin-bottom: 24px;
      padding: 0 16px;
    }

    .sd-section-subtitle {
      font-size: 14px;
      letter-spacing: 2px;
      color: #ffcb33; /* Brightened Blue */
      font-weight: 700;
      display: block;
      margin-bottom: 6px;
    }

    .sd-section-title {
      font-size: 28px;
      color: #ffffff; /* White text */
      font-weight: 800;
    }

    /* ==========================================
       2. SCROLL CONTAINER & SNAP LAYOUT
       ========================================== */
    .sd-scroll-wrapper {
      width: 100%;
      overflow: hidden;
    }

    .sd-cards-scroll-container {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      padding: 20px 30px;
      
      /* Scroll Snap setup */
      scroll-snap-type: x mandatory;
      
      /* Hide Scrollbars */
      scrollbar-width: none; /* Firefox */
    }

    .sd-cards-scroll-container::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Edge */
    }

    /* ==========================================
       3. CARD STYLING (DARK CARDS)
       ========================================== */
    .sd-card {
      flex: 0 0 auto;
      width: 320px; /* Desktop width */
      background: #121212; /* Dark Gray Card Body */
      border: 1px solid #262626; /* Subtle border */
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
      scroll-snap-align: center;
      transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .sd-card:hover {
      transform: translateY(-4px);
      border-color: #3b82f6;
    }

    /* Media Area */
    .sd-card-media {
      position: relative;
      width: 100%;
      background: #000;
    }

    .sd-before-after-img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      display: block;
    }

    /* Video Container & Play Button */
    .sd-video-container {
      position: relative;
      width: 100%;
      height: 160px;
      background: #000;
    }

    .sd-video-thumb-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.85;
    }

    .sd-play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      background: rgba(255, 0, 0, 0.9);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
      transition: background 0.2s, transform 0.2s;
    }

    .sd-play-btn:hover {
      background: #e60000;
      transform: translate(-50%, -50%) scale(1.1);
    }

    .sd-play-icon {
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 14px solid #ffffff;
      margin-left: 3px;
    }

    /* Content Area */
    .sd-card-content {
      padding: 16px;
    }

    .sd-patient-name {
      font-size: 18px;
      color: #ffffff; /* White text */
      font-weight: 700;
      margin-bottom: 6px;
    }

    .sd-treatment-tag {
      display: inline-block;
      font-size: 12px;
      background: #1e293b; /* Dark badge background */
      color: #ffcb33; /* Light blue text */
      padding: 3px 8px;
      border-radius: 4px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .sd-patient-quote {
      font-size: 14px;
      color: #94a3b8; /* Muted gray text */
    }

    /* ==========================================
       4. MOBILE RESPONSIVE FIX (Under 767px)
       ========================================== */
    @media (max-width: 767px) {
      .sd-cards-scroll-container {
        padding: 16px;
        gap: 12px;
      }

      .sd-card {
        /* Shows 1 card centered with a peek of the next card */
        width: 85vw;
        max-width: 320px;
        scroll-snap-align: center;
        scroll-snap-stop: always; /* Forces 1-by-1 card scroll */
      }

      .sd-section-title {
        font-size: 22px;
      }
    }