.pattern-img {
  border: 2px solid transparent;
  padding: 5px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.pattern-img:hover {
  transform: scale(1.1);
  opacity: 0.85;
}

/* Selected Styles */
.pattern-img.selected.male {
  border-color: #007bff;
  box-shadow: 0 0 12px rgba(0, 123, 255, 0.7);
  animation: bounce 0.3s ease;
}
.pattern-img.selected.female {
  border-color: #e83e8c;
  box-shadow: 0 0 12px rgba(232, 62, 140, 0.7);
  animation: bounce 0.3s ease;
}

/* Bounce Animation */
@keyframes bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

    
  body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
  }

  h1, h2, h3, h4, .btn, .navbar-brand {
    font-family: 'Poppins', sans-serif;
  }
 

  .juxtapose {
    touch-action: pan-y; /* Allow vertical scroll on touch devices */
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    border-radius: 10px;
  }

  /* Ensure inner images don’t overflow */
  .juxtapose img {
    width: 100%;
    object-fit: cover;
  }

  /* Responsive fix for mobile view */
  @media (max-width: 767px) {
    .juxtapose {
      height: 250px !important;
      aspect-ratio: auto !important;
    }
  }

    
    .hero {
      background: url('https://drrevanthhairclinic.com/assets/images/banner.jpg') no-repeat center center/cover;
      color: white;
      min-height: 100vh;
      position: relative;
    }
    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
    }

    .juxtapose img {
  object-fit: cover;
  height: 100%;
}
    .hero h1 {
      font-size: 2.8rem;
      font-weight: bold;
    }
    .cta-btn {
      background-color: #28a745;
      color: white;
      font-weight: 600;
    }
    .section-title {
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }
    .treatment-box {
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 8px;
      transition: 0.3s ease;
    }
    .treatment-box:hover {
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      transform: translateY(-5px);
    }
    .testimonial {
      background-color: #f8f9fa;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .doctor-section {
      background: #f0f0f5;
      padding: 60px 0;
    }
    .doctor-card {
      background: white;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
      height: 100%;
    }
    .doctor-card:hover {
      transform: translateY(-5px);
    }

 
  .juxtapose {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin: auto;
  }

  .juxtapose img {
    object-fit: cover;
    height: 100%;
  }

  @media (max-width: 767px) {
    section.d-flex.align-items-center {
      padding-top: 125px !important; /* adjust based on actual header height */
    }
  }

    @media (max-width: 576px) {
    .cta-section {
      padding: 2rem 1rem !important;
    }
    .cta-section h3 {
      font-size: 1.25rem;
    }
    .cta-section p {
      font-size: 0.95rem;
    }
    .cta-section .btn {
      font-size: 1rem;
      padding: 0.75rem 1.5rem;
    }
  }

  .bg-gradient-1 {
    background: linear-gradient(135deg, #4e54c8, #8f94fb);
  }

  .bg-gradient-2 {
    background: linear-gradient(135deg, #43cea2, #185a9d);
  }

  .bg-gradient-3 {
    background: linear-gradient(135deg, #f7971e, #ffd200);
  }

  .choose-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .choose-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }

  .choose-card .icon {
    font-size: 2rem;
  }

    .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    font-size: 28px;
    padding: 14px 16px;
    z-index: 1000;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: background 0.3s;
  }
  .whatsapp-float:hover {
    background-color: #1ebc5b;
    color: white;
    text-decoration: none;
  }