.hero-bg-desktop {
    width: 100%;
    object-fit: cover;
}


.hero-bg-mobile {
    display: none;
}

.ypr-highlight h4 {
    font-weight: 600;
    color: var(--color-primary);
}


/* ==========================================
   What Our Devotees say Section
   =========================================== */

   /* heading */
    .review-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    .review-tabs {
      background-color: var(--bg-light-peach);
      border-radius: 6px;
      padding: 6px;
    }

    .review-tabs button {
      background: none;
      border: none;
      border-radius: 5px;
      padding: 8px 20px;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .review-tabs button.active,
    .review-tabs button:hover {
      background-color:  #fff;
      color: var(--color-primary) ;
      font-weight: 500;
      box-shadow:0 4px 10px rgba(99,34,64,0.08);
    }

    /* Review cards */
    .ypr-review-card {
      background:#fff; 
      border-radius:16px; 
      padding:20px;
      height:260px; 
      display:flex; 
      flex-direction:column;
      justify-content:space-between;
      /* box-shadow:0 4px 10px rgba(99,34,64,0.08); */
      transition:transform 0.2s ease-in-out;
      border: 1px solid var(--border);
    }

    .ypr-review-card:hover {
            border: 1px solid #E8BACB;
            transition: all 0.3s ease;
        }

    /* .review-card:hover { transform:translateY(-3px); } */
    .ypr-review-header { display:flex; align-items:flex-end; gap:10px; }
    .ypr-yp-avatar {
      width:45px; height:45px; border-radius:50%;
      background:#f8e9ef; display:flex; align-items:center;
      justify-content:center; color:#632240; font-size:22px;
    }
    .ypr-reviewer-name { margin:0; font-size:16px; color:#000; font-weight:600; }
    .ypr-review-date { font-size:13px; color:var(--color-text-muted); margin:0; }
    .ypr-review-text { font-size:16px; color: var(--color-text-light);  flex-grow:1; }

    .ypr-yp-avatar i {
    font-size: 28px;
}


/* ===========================================
   User Write Review Section
   =========================================== */

   .yp-review-card {
      margin: 0px auto;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    label {
      font-weight: 500;
      color: var(--color-text-medium);
      margin-bottom: 6px;
    }

    .form-control {
      border: 1px solid #e2e2e2;
      border-radius: 8px;
      box-shadow: none;
      height: 48px;
      resize: none;
    }

    .form-control:focus {
      border-color: #632240;
      box-shadow: 0 0 0 0.2rem rgba(99, 34, 64, 0.1);
    }

    .yp-stars {
      display: flex;
      gap: 16px;
      font-size: 32px;
      cursor: pointer;
    }

    .yp-stars i {
      color: #ccc;
      transition: color 0.25s ease;
    }

    .yp-stars i.hover,
    .yp-stars i.active {
      color: #f5b301;
    }

    .submit-btn {
      background: var(--gradient-button);
      color: white;
      border: none;
      padding: 12px 0;
      font-weight: 600;
      border-radius: 8px;
      width: 100%;
      transition: 0.3s;
    }

    .submit-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }

    .ypr-wreview-tabs {
      background-color: var(--bg-light-peach);
      border-radius: 6px;
      padding: 6px;
      width: fit-content;
    }

    .ypr-wreview-tabs button {
      background: none;
      border: none;
      border-radius: 5px;
      padding: 8px 28px;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .ypr-wreview-tabs button.active,
    .ypr-wreview-tabs button:hover {
      background-color:  #fff;
      color: var(--color-primary) ;
      font-weight: 500;
      box-shadow:0 4px 10px rgba(99,34,64,0.08);
    }

      .upload-box {
      border: 2px dashed #632240;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      color: #632240;
      background: #fdf5f7;
      cursor: pointer;
      transition: 0.3s;
    }

    .upload-box:hover {
      background: #f9ebf0;
    }


  @media (max-width: 576px) {
      .ypr-highlight h4 {
        font-size: 18px;
      }

      .hero-bg-desktop {
        display: none;
      }

      .hero-bg-mobile {
        display: block;
         width: -webkit-fill-available;
      }

  }

  @media (max-width: 376px) {
    .ypr-wreview-tabs button {
      padding: 8px 12px;
      font-size: 15px;
    }

    .review-tabs button {
      padding: 8px 12px;
      font-size: 15px;
    }
  }