/* --- IMPORTANT: Isolated and corrected styles for .hero-slider-boutique --- */

  /* Add these styles to disable animations and make it static */
  /* These are now prefixed to ensure isolation */
  .hero-slider-boutique .hero-text {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero-slider-boutique .hero-image {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    display: block !important; /* Force display */
    visibility: visible !important; /* Double ensure visibility */
  }

  .hero-slider-boutique .hero-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  /* Main container styles, prefixed */
  .hero-slider-boutique {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
  }

  /* Slide styles, prefixed */
  .hero-slider-boutique .hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Default hidden state for other slides */
    transition: opacity 1s ease;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* This is crucial for showing the slide, now applied via HTML class */
  .hero-slider-boutique .hero-slide.show {
    opacity: 1;
    z-index: 1;
  }

  /* Inner content styles, prefixed */
  .hero-slider-boutique .hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 90%;
    gap: 40px;
    color: #fff;
    z-index: 2;
  }

  /* Text section styles, prefixed */
  .hero-slider-boutique .hero-text {
    flex: 1;
    background: rgba(240, 0, 0, 0.6); /* New color: red with 60% opacity */
    padding: 30px 40px;
    border-radius: 10px;
    /* animation: fadeInLeft 1s ease; (removed/overridden by static styles) */
  }

  .hero-slider-boutique .hero-text h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-align:left;
    color: #FFD200;
  }

  .hero-slider-boutique .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 25px;
    text-align:left;
    color: #fff;
  }

  /* Button styles, prefixed */
  .hero-slider-boutique .btn-hero {
    padding: 12px 30px;
    background: linear-gradient(135deg, #FFD200, #FFA500);
    color: #f00000;
    font-weight: bold;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block; /* Ensure it respects padding/margin better */
  }

  .hero-slider-boutique .btn-hero:hover {
    background: linear-gradient(135deg, #FFA500, #FFD200);
    color: #fff;
  }

  /* Image section styles, prefixed */
  .hero-slider-boutique .hero-image {
    flex: 1;
    /* animation: fadeInUp 1s ease; (removed/overridden by static styles) */
  }

  .hero-slider-boutique .hero-image img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 5px solid #FFD200;
  }

  /* Arrows styles (hidden for static display), prefixed */
  .hero-slider-boutique .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    color: #003DA5;
    border: none;
    font-size: 2rem;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    z-index: 10;
    /* display: none; is also set inline, which is fine for static */
  }

  .hero-slider-boutique .arrow:hover {
    background: #FFD200;
  }

  .hero-slider-boutique .arrow.prev { left: 25px; }
  .hero-slider-boutique .arrow.next { right: 25px; }

  /* Dots styles (hidden for static display), prefixed */
  .hero-slider-boutique .hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
    /* display: none; might be added here if no dots are needed */
  }

  .hero-slider-boutique .hero-dots .dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
  }

  .hero-slider-boutique .hero-dots .dot.active {
    background: #FFD200;
  }

  /* Animations (definitions are global but their application is overridden) */
  @keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(40px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes zoomIn {
    0% {
      opacity: 0;
      transform: scale(0.92);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Optional: Delay inside text elements (not active due to animation: none !important) */
  .hero-slider-boutique .hero-text h1 {
    animation-delay: 0.2s;
  }

  .hero-slider-boutique .hero-text p {
    animation-delay: 0.4s;
  }

  .hero-slider-boutique .hero-text .btn-hero {
    animation-delay: 0.6s;
  }

  /* REMOVED: This rule was causing issues by setting initial opacity to 0,
     overriding the explicit static display rules above. */
  /* .hero-text, .hero-image { opacity: 0; } */

  /* Responsive styles, prefixed */
  @media (max-width: 768px) {
    .hero-slider-boutique .hero-inner {
      flex-direction: column-reverse;
      text-align: center;
    }

    .hero-slider-boutique .hero-text {
      padding: 20px;
    }

    .hero-slider-boutique .hero-text h1 {
      font-size: 2rem;
    }

    .hero-slider-boutique .hero-image img {
      width: 80%;
      margin-bottom: 20px;
    }
  }