/**
 * Hero 3 Section - Dioqa UI Kit
 *
 * @package Dioqa_UI_Kit
 */

/* Section Container */
.hero-3-section {
  background-color: #ffffff;
}

/* Wrapper pour contenir les éléments décoratifs */
.hero-3-wrapper {
  position: relative;
  overflow: visible;
}

/* Container principal */
.hero-3-container {
  max-width: 100%;
  min-height: var(--section-height, 95vh);
  padding: 75px;
  border-radius: var(--radius-xxl, 20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Image de fond */
.hero-3-bg-image {
  z-index: 0;
}

.hero-3-bg-image img {
  border-radius: var(--radius-xxl, 20px);
}

/* Overlay sombre sur l'image */
.hero-3-overlay {
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-xxl, 20px);
  z-index: 1;
}

/* Contenu texte */
.hero-3-content {
  z-index: 2;
  max-width: 485px;
}

/* Titre */
.hero-3-title h1,
.hero-3-title h2,
.hero-3-title h3,
.hero-3-title h4,
.hero-3-title h5,
.hero-3-title h6,
.hero-3-title p {
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--display-lg, 48px);
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

/* Texte en couleur primaire dans le titre */
.hero-3-title .text-primary,
.hero-3-title span.highlight {
  color: var(--bs-primary);
}

/* Texte descriptif */
.hero-3-text p {
  color: #ffffff;
  font-family: var(--font-body);
  font-size: var(--text-md, 16px);
  font-weight: 400;
  line-height: normal;
  max-width: 369px;
  margin: 0;
}

/* Éléments décoratifs */
.hero-3-deco {
  position: absolute;
  display: none; /* Masqué sur mobile par défaut */
}

.hero-3-deco svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Deco 1 - Bloc du milieu à droite */
.hero-3-deco-1 {
  right: 25%;
  bottom: -10%;
}

/* Deco 2 - Bloc en haut à droite */
.hero-3-deco-2 {
  right: 2%;
  top: -5%;
}

/* Responsive */
@media (min-width: 992px) {
  /* Afficher les éléments décoratifs sur desktop */
  .hero-3-deco {
    display: block;
  }
}

@media (max-width: 991.98px) {
  .hero-3-container {
    padding: 50px 40px;
  }

  .hero-3-content {
    max-width: 100%;
  }

  .hero-3-title h1,
  .hero-3-title h2,
  .hero-3-title h3,
  .hero-3-title h4,
  .hero-3-title h5,
  .hero-3-title h6,
  .hero-3-title p {
    font-size: 36px;
  }
}

@media (max-width: 767.98px) {
  .hero-3-container {
    padding: 40px 25px;
  }

  .hero-3-title h1,
  .hero-3-title h2,
  .hero-3-title h3,
  .hero-3-title h4,
  .hero-3-title h5,
  .hero-3-title h6,
  .hero-3-title p {
    font-size: 32px;
  }

  .hero-3-text p {
    max-width: 100%;
  }
}