:root{
  --PLblue: rgb(3, 142, 241);
}

body:not(.detective),
html:not(.detective) {
  display: flex;
  justify-content: center;
  background: url("/assets/img/bg.png");
}

main {
  background: url("../assets/img/bg.png") ;
}

iframe:not(.game) {
  width: 85vw;
  height: 80vh;
  border: none; /* Optional: remove border around iframe */
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional subtle shadow for better visibility */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition effects */
  overflow: hidden;
  margin: 16px;
}


section{
  margin-bottom: 8rem;
}
.tools_container {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 85%;
}

.Cyberlogo{
  max-width: 700px;
  min-width: 500px;
}

video {
  border-radius: 15px;
  width: 100%;
  height: auto;

}



@media (max-width: 768px) {
  .video {
      padding: 10px; /* Réduit le padding sur les petits écrans */
  }
  video {
      margin-bottom: 15px; /* Réduit la marge sous la vidéo */
  }
}

@media (max-width: 480px) {
  video {
      margin-bottom: 10px; /* Réduit la marge pour les très petits écrans */
  }
}

/* Carrousel */
.carousel {
  overflow-x: hidden; /* Empêche le débordement horizontal */
  width: 100%; /* S'assure que le carrousel prend toute la largeur */
}

.swiper {
  overflow: visible;
  width: 100vw; /* S'assure que le swiper prend toute la largeur de la fenêtre */
  margin-left: 0; /* Aucun margin gauche non désiré */
}

.swiper .swiper-slide {
  flex-shrink: 0; /* Empêche le slide de rétrécir */
  max-width: 100%; /* Empêche que le slide dépasse la largeur disponible */
}

.single {
  position: relative;
  pointer-events: none;
  user-select: none;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
    rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  overflow: hidden; /* S'assurer qu'aucun contenu ne déborde du cadre */
}

.single img {
  width: 100%; /* S'assure que l'image prend toute la largeur du conteneur */
  height: auto; /* Maintient la proportion de l'image */
  vertical-align: top;
  border-radius: 8px;
  pointer-events: none;
}

/* Responsivité pour les petits écrans (Tablettes, Smartphones) */
@media (max-width: 1024px) {
  .swiper {
    width: 100%; /* Réduit la largeur à 100% sur les écrans plus petits */
  }

  .single {
    max-width: 100%; /* Réduit la largeur des éléments à 100% sur les petits écrans */
  }

  .single img {
    height: auto; /* Garde l'aspect ratio de l'image pour les petits écrans */
  }
}

@media (max-width: 768px) {
  /* Pour les tablettes et petits écrans */
  .swiper {
    width: 100vw; /* Utilise toute la largeur de la fenêtre pour les petits écrans */
  }

  .swiper .swiper-slide {
    max-width: 100%; /* Les slides prennent 100% de la largeur du conteneur */
  }

  .single {
    margin: 0 10px; /* Ajoute un peu d'espace entre les images */
    box-shadow: none; /* On peut réduire ou enlever le box-shadow pour un meilleur rendu mobile */
  }

  .single img {
    height: auto; /* Garantit que l'image conserve ses proportions */
  }
}

@media (max-width: 480px) {
  /* Pour les très petits écrans (smartphones) */
  .swiper {
    width: 100vw; /* Utilise toute la largeur de l'écran */
  }

  .single img {
    height: 100%; /* L'image occupe toute la hauteur de son conteneur (si besoin) */
    object-fit: cover; /* L'image remplit le conteneur sans déformation */
  }
}

.game-container {
  margin: 30px;
  display: flex;
  width: 80%;
  max-width: 900px;
  min-width: 800px;
  align-items: center;
  justify-content: center;
}

.align-competences{
  display: flex;
  flex-direction: row;
}
.card#project{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  max-width: 65vw;
 
}

.description-container{
  display: flex;
  flex-direction: column;
}

section.softwares{
  display:flex;
  justify-content: center;
}

section.project-logo{
  display: flex;
  justify-content: center;
}

.project-description{
  width: 50vw;
  text-align: left;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}
.align-competences {
  text-align: center;
}

.video{
  display: flex;
  flex-direction: column;
  align-items: center;
}


.video-container {
  max-width: 800px;
  margin: 0 auto;
}

.competence-img {
  margin-top: 10px;
  padding: 10px;
  height: 90px;
}


footer{
  margin-top: 100px;
    margin-bottom: 70px;
    text-align: center;
  color: var(--PLblue);
}

/* Image Grid Styles */
.image-grid {
  margin-top: 20px;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  grid-template-rows: repeat(2, 1fr); /* 2 rows */
  column-gap:  20px; /* Space between images */
  margin-top: 20px;
}

.image-item:nth-child(7){
  grid-column: span 3;
}

.image-item img {
  width: 100%; /* Make   images responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 8px; /* Optional: add rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: add a shadow for effect */
}

/* Optional: You can add hover effects for images */
.image-item img:hover {
  transform: scale(1.05); /* Slight zoom effect on hover */
  transition: transform 0.3s ease;
  cursor: pointer;
}


/* Modal Styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 20px;
}

.modal img {
  max-width: 90%;
  max-height: 90%;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
}


.download-container{
  display:flex;
  flex-direction: column;
  align-items: center;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  color: white;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 10000; /* Make sure the close button is always on top */
}
@media (max-width: 768px) {
  .carousel {
    margin-left: 0;
    margin-right: 0;
  }

  .swiper .swiper-slide {
    width: 100%;
  }
  .image-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
    grid-template-rows: repeat(3, 1fr); /* 3 rows */
  }

.title{
   
    display: flex;
    justify-content: center;

  }
}
/* Media Query for Mobile (up to 480px wide) */
@media (max-width: 480px) {
  .image-grid {
    grid-template-columns: 1fr; /* 1 column for mobile */
    grid-template-rows: repeat(6, 1fr); /* 6 rows */
  }
}

.logo-tim h1 {
  font-size: 3rem; /* Adjust size as needed */
  text-align: center;
  animation: logoAnimation 3s ease-out forwards;
  opacity: 0; /* Start with invisible */
}

@keyframes logoAnimation {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

section img {
  display: block;
  margin: 0 auto;
  opacity: 0;
  animation: fadeInLogo 2s ease-in-out 1s forwards; /* Delay animation to wait for title animation */
}

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

.page-title {
  animation: fadeInText 1.5s ease-out 1s forwards;
  opacity: 0; /* Start hidden */
}

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

/* Title styling */
.title {
  font-size: 2.5rem;
  text-align: center;
  color: #4a90e2;
  margin-top: 20px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

/* General paragraph styling */
.intro, .description {
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 20px;
  padding: 0 15px;
  color: #ffffff;
}

/* Highlight styling */
.highlight {
  color: #e94e77;  /* A vibrant pinkish red for emphasis */
  font-weight: bold;
}

/* Mission section styling */
.mission {
  display: flex;          /* Flexbox layout */
  flex-direction: column; /* Stack elements vertically */
  align-items: flex-start; /* Align items at the start (top) */
  justify-content: flex-start; /* Ensure content stays at the top */
  background-color: #6b747a;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-top: 30px;
  max-width: 700px;
  min-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Mission title styling */
.mission-title {
  font-size: 1.8rem;
  color: #2d3e50;
  font-weight: 500;
  margin-bottom: 15px;
}

/* Mission description styling */
.mission-description {
  font-size: 1.2rem;
  color: #ffffff;
  text-align: center;
}

/* Responsive Design for Mobile */
@media (max-width: 600px) {
  .title {
    font-size: 2rem;
  }
  .intro, .description {
    font-size: 1rem;
  }
  .mission {
    padding: 15px;
  }
}

.metroman{
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

@media (max-width: 768px) {
  .title img {
    max-width: 90%; /* Allow image to be slightly smaller on smaller devices */
  }
}

@media (max-width: 480px) {
  .title img {
    max-width: 80%; /* Further reduce size on very small screens */
  }
}