{% extends 'base.html.twig' %}

{% block title %}Accueil{% endblock %}

{% block body %}
 
  <main class="main">

    <!-- Hero Section -->
    <section light-background">

      <style>
        .carousel-item img {
            width: 100%;
            height: auto;
            max-height: 100vh; /* Ensures the image slider doesn't overflow */
            object-fit: cover; /* Ensures images fit nicely */
        }
.slider-container {
  position: relative;
}

.content2 {
  position: absolute;
  top: 50%; /* Adjust to overlap with the slider */
  left: 50%;
  transform: translate(-50%, -50%); /* Center horizontally and slightly overlap */
  z-index: 10; /* Place content above the slider */
  background: rgba(255, 255, 255, 0.8); /* Light transparent background */
  padding: 20px; /* Add padding around the text */
  border-radius: 10px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  max-width: 90%; /* Ensure it doesn't exceed the screen size */
}
    </style>
<div class="slider-container">
  <!-- Slider -->
  <div id="imageSlider" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="assets/img/hero-bg.jpg" class="d-block w-100" alt="Image 1">
      </div>
      <div class="carousel-item">
        <img src="assets/img/hero-bg1.jpg" class="d-block w-100" alt="Image 2">
      </div>
      <div class="carousel-item">
        <img src="assets/img/hero-bg2.jpg" class="d-block w-100" alt="Image 3">
      </div>
     <div class="carousel-item active">
        <img src="assets/img/hero-bg3.jpg" class="d-block w-100" alt="Image 1">
      </div>
      <div class="carousel-item">
        <img src="assets/img/hero-bg4.jpg" class="d-block w-100" alt="Image 2">
      </div>
      <div class="carousel-item">
        <img src="assets/img/hero-bg5.jpg" class="d-block w-100" alt="Image 3">
      </div>
<div class="carousel-item">
        <img src="assets/img/hero-bg6.jpg" class="d-block w-100" alt="Image 2">
      </div>
      <div class="carousel-item">
        <img src="assets/img/hero-bg7.jpg" class="d-block w-100" alt="Image 3">
      </div>
	
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#imageSlider" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#imageSlider" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
<!-- Content -->
<div class="content row gy-4 posh-content">
  <div class="row gy-4">
    <div class="col-xl-4 d-flex align-items-stretch">
      <a href="{{ path('app_actes') }}" class="icon-link">
        <div class="icon-box" data-aos="zoom-out" data-aos-delay="300">
          <i class="bi bi-clipboard-data"></i>
          <h4>Chirurgie Orale</h4>
          <p>La chirurgie orale est une spécialité médico-chirurgicale dont le centre d'intérêt est la pathologie chirurgicale de la cavité buccale...</p>
        </div>
      </a>
    </div>
    <div class="col-xl-4 d-flex align-items-stretch">
      <a href="{{ path('app_actes') }}" class="icon-link">
        <div class="icon-box" data-aos="zoom-out" data-aos-delay="400">
          <i class="bi bi-gem"></i>
          <h4>Parodontologie</h4>
          <p>La parodontologie est la discipline qui se consacre à la prévention, au diagnostic et au traitement des maladies de la gencive et de l’os sous-jacent...</p>
        </div>
      </a>
    </div>
    <div class="col-xl-4 d-flex align-items-stretch">
      <a href="{{ path('app_actes') }}" class="icon-link">
        <div class="icon-box" data-aos="zoom-out" data-aos-delay="500">
          <i class="bi bi-inboxes"></i>
          <h4>Implantologie</h4>
          <p>L'implant dentaire est une racine artificielle qui se présente sous la forme de petite vis, fait en titane, matériau totalement biocompatible...</p>
        </div>
      </a>
    </div>
  </div>
</div>
<style>

.posh-content {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
  /*background: rgba(255, 255, 255, 0.9); *//* Slightly more opaque for better readability */
  border-radius: 15px; /* Smooth, rounded corners for modern aesthetics */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Elegant shadow */
  width: 80%; /* Controls the width to avoid stretching too far */
  text-align: center; /* Center-align the text */
  z-index: 10; /* Ensures the content is above the slider */
}

.icon-box {
  padding: 20px;
  background: linear-gradient(145deg, #f7f7f7, #ffffff); /* Subtle gradient background for a premium look */
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover animation */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.icon-box:hover {
  transform: translateY(-10px); /* Slight upward motion for interactivity */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

.icon-box h4 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333; /* Refined dark gray for titles */
  margin-top: 15px;
}

.icon-box p {
  font-size: 1rem;
  color: #555; /* Subtle gray for the paragraph */
  line-height: 1.6; /* Improves readability */
}

.icon-box i {
  font-size: 2.5rem;
  color: #007bff; /* Elegant blue for icons */
  margin-bottom: 10px;
}

.icon-link {
  text-decoration: none; /* Removes underlines */
}

.icon-link:hover {
  text-decoration: none; /* Ensures hover state is clean */
}


   

.position-relative {
  overflow: hidden; /* Ensures content stays within the div */
  border-radius: 15px; /* Smooth rounded corners for a modern look */
  position: relative; /* Keeps child elements positioned correctly */
}
.piu {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
}

.position-relative img {
  width: 100%; /* Makes the image responsive */
  height: auto; /* Maintains aspect ratio */
  border-radius: 15px; /* Matches the parent div's rounded corners */
  transition: transform 0.3s ease, filter 0.3s ease; /* Adds smooth hover effect */
}

.position-relative img:hover {
  transform: scale(1.05); /* Slight zoom effect on hover */
  filter: brightness(90%); /* Darkens image slightly for contrast */
}

.pulsating-play-btn {
  position: absolute; /* Places the button over the image */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the button */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent white circle */
  border-radius: 50%; /* Makes the button circular */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Adds shadow for a premium look */
  transition: transform 0.3s ease; /* Animates button on hover */
}

.pulsating-play-btn::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  border: 2px solid rgba(255, 255, 255, 0.6); /* Transparent white border */
  border-radius: 50%;
  animati


</style>
    </section><!-- /Hero Section -->
<!-- About Section -->
    <section id="about" class="about section">

      <div class="container">

        <div class="row gy-4 gx-5">

          <div class="col-lg-12 position-relative piu align-self-start" data-aos="fade-up" data-aos-delay="200">
            <img src="assets/img/about.jpg" class="img-fluid" alt="" >
            <a href="https://www.youtube.com/watch?v=KsPF2yqsFk4" class="glightbox pulsating-play-btn"></a>
          </div>

          <div class="col-lg-12 col-12 content" data-aos="fade-up" data-aos-delay="100">
            <h4>A propos de Nader Meziou</h4>
            <p>
              Les informations.
            </p>
            <ul class="row">
		<li class="col-md-15 col-12" style="text-align:center;">
                <i class="fa-solid fa-pump-medical"></i>
                <div>
                  <h5>Les spécialités dentaires</h5>
                  <p style="text-align:justify;"></p>
                </div>
              </li>
		 {% for categactesmedical  in categactesmedicaux %}
              <li class="col-md-6 col-12">
                <i class="fa-solid fa-pump-medical"></i>
                <div>
                  <h5>{{ categactesmedical.categorie }}</h5>
                  <p style="text-align:justify;">{{ categactesmedical .description }}</p>
                </div>
              </li>
		{% endfor %}
              
            </ul>
          </div>

        </div>

      </div>

    </section><!-- /About Section -->

    

   
    <!-- Faq Section -->
    
   

    

  </main>

  

{% endblock %}