/* Reset margin and padding for the body */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Ensure the video covers the entire viewport */
.video-header {
  position: relative;
  height: 100vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
  overflow: hidden;
}

.backVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the entire area */
  z-index: -1; /* Places the video behind the content */
}

.header-content {
  position: relative;
  z-index: 1; /* Places the text above the video */
  color: white; /* Makes the text visible over the video */
  text-align: center;
  padding: 20px;
}   

.header-content h1{
    font-family: "Corbel", sans-serif;
    font-size: calc(1.5vw + 1.2rem); /* adapte à la taille de fenètre*/
    font-weight: bold;
    color: black;
    position: relative;
    top: 90px;
    text-align: center;
}
.header-content h2 {
  
    font-family: "Corbel", sans-serif;
    font-size: calc(0.8vw + 0.8rem); /* adapte à la taille de fenètre*/
    font-weight: lighter;
    position: relative;
    top: 20px;
    color: black;
    margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {



}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

/* Navigation Panel Styling */
.navigation-panel {
  position: absolute;
  top: 20px; /* Position at the top-left */
  left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f3e8ff; /* Pastel light purple */
  border-radius: 50px; /* Full circles on left and right */
  padding: 10px 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  width: auto;
  max-width: 90%; /* Adapt to window size */
  font-size: calc(0.8vw + 0.5rem); /* Responsive size */
}

.navigation-panel ul {
  list-style: none;
  display: flex;
  gap: 15px; /* Space between items */
  padding: 0;
  margin: 0;
}

.navigation-panel li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
  border-radius: 50px; /* Rounded corners for each item */
  padding: 10px;
}

.navigation-panel li:hover {
  background-color: #d8b4ff; /* Darker pastel purple on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
}

.navigation-panel li.active {
  background-color: #d8b4ff; /* Darker pastel purple for active item */
}

.navigation-panel a {
  text-decoration: none;
  color: #4a4a4a; /* Light text color */
  font-family: "Corbel", sans-serif;
  font-size: 0.9rem;
  font-weight: lighter; /* Light font weight */
  text-align: center;
  transition: color 0.3s ease;
}

.navigation-panel a:hover {
  color: #000; /* Darker text on hover */
}

.navigation-panel .icon {
  width: 30px; /* Adjust icon size */
  height: 30px;
  margin-bottom: 5px;
}

.navigation-panel .text {
  font-size: 0.8rem; /* Text size */
}

/* Ensure responsiveness */
@media (max-width: 768px) {
  .navigation-panel {
    padding: 5px 10px;
    font-size: calc(0.6vw + 0.5rem);
  }

  .navigation-panel .icon {
    width: 25px;
    height: 25px;
  }

  .navigation-panel .text {
    font-size: 0.7rem;
  }
}