@import url("https://fonts.cdnfonts.com/css/poppins");
@import url("https://fonts.cdnfonts.com/css/syne");
@import url("https://fonts.cdnfonts.com/css/montserrat");

* {
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

a {
  text-decoration: none;
  color: #fff;
}

body {
  background-color: #000;
}

/* HERO BANNER PART */

.hero-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 50%;
  z-index: -1; /* Assurez-vous que la vidéo est en arrière-plan */
}

.hero-navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 60px 200px;
  display: flex;
  list-style: none;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.hero-navbar h1 {
  color: #fff;
  font-family: Syne;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.hero-navbar ul li {
  list-style: none;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #f5f5f5;
  margin: 20px;
  user-select: none;
}

.hero-navbar ul li a {
  text-decoration: none;
  color: #f5f5f5;
}

.hero-navbar .icon {
  position: relative;
  max-width: 100px;
}

.hero-textbox {
  width: 100%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f5f5f500;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-textbox h1 {
  -webkit-text-stroke: 0.5px white;
  font-size: 98px;
  text-align: center;
  font-size: 98px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
}

.hero-textbox .h1-full {
  font-size: 98px;
  color: #fff;
}

.hero-textbox p {
  color: #fff;
  text-align: center;
  font-family: Poppins;
  padding: 10px;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  max-width: 500px;
}

.hero-button {
  border-radius: 30px;
  border: 1.32px solid #fff;
  margin: 20px;
  padding: 0px 53px;
  background: rgba(217, 217, 217, 0.14);
  transition: background ease-in-out 0.3s;
}

.hero-button p {
  color: #fff;
  text-align: center;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 400;
}

.hero-button:hover {
  background: rgba(217, 217, 217, 0.468);
  transition: ease-in-out 0.3s;
}

.hero-scrollbtn {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  color: #fff;
  font-weight: 200;
  font-size: 12px;
  text-align: center;
  transition: transform 0.5s ease; /* Transition pour l'effet de grossissement */
}

.hero-scrollbtn:hover {
  transform: translateX(-50%) scale(1.1); /* Grossissement de 10% lors du survol */
}

.hero-gradient {
  position: absolute; /* Positionnement absolu par rapport au conteneur */
  bottom: 0; /* Fix it in the bottom */
  left: 0; /* Fix it in the left */
  width: 100%; /* Assurez-vous qu'il s'étend sur toute la largeur du conteneur */
  height: 292px;
  user-select: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0) 0.01%,
    #000 80.21%,
    #000 100%
  );
}

/* ABOUT ME PART */

.aboutme-container {
  padding-left: 17.5%;
  padding-right: 17.5%;
  padding-top: 10%;
  padding-bottom: 10%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aboutme-textbox {
  display: flex;
  flex-direction: column;
}

.aboutme-textbox h1 {
  text-transform: uppercase;
  color: #fff;
  font-family: Syne;
  font-size: 64px;
  font-style: normal;
  font-weight: 600;
  line-height: 2;
}

.aboutme-textbox p {
  max-width: 965px;
  color: #fff;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
}

.aboutme-grid {
  display: flex;
  flex-wrap: nowrap; /* Empêche le retour à la ligne automatique */
  flex-direction: row;
  padding: 50px 0px;
  align-items: center;
  justify-content: space-between;
  gap: 2.4%;
  max-width: 1500px;
}

.aboutme-grid img {
  border-radius: 20px;
  max-width: 450px;
  max-height: 450px;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 50%;
}

.gridpic1,
.gridpic2,
.gridpic3 {
  position: relative;
}

.pic-text {
  position: absolute;
  color: #fff;
  text-align: center;
  font-family: Syne;
  font-size: 38px;
  font-weight: 700;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* PRICE PART */

.price-container {
  width: 100%;
  padding-right: 17.5%;
  padding-left: 17.5%;
  padding-bottom: 10%;
}

.price-container h1 {
  color: #fff;
  font-family: Syne;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 2;
  text-align: center;
  padding: 50px 0px;
}

.price-card-container {
  display: flex;
  flex-wrap: wrap; /* Permet le retour à la ligne automatique */
  justify-content: center; /* Centrer horizontalement */
  gap: 68px; /* Espace entre les cartes */
  max-width: 961px;
  margin: 0 auto;
}

.price-card {
  position: relative;
  border-radius: 10px;
  background: rgba(217, 217, 217, 0.1);
  width: 275px; /* Conservez la taille de vos cartes */
  height: 397px;
}

.price-card-title {
  color: #fff;
  padding-top: 25px;
  text-align: center;
  font-family: Syne;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.price-card-price {
  color: #fff;
  padding-top: 10px;
  text-align: center;
  font-family: Montserrat;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.price-card-line {
  width: 275px;
  height: 2px;
  background: #000;
  margin: 15px auto;
}

.price-card-list {
  color: #fff;
  padding-left: 20px;
  padding-top: 20px;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex; /* Utilisez flex pour aligner l'image et le texte horizontalement */
  align-items: center; /* Centrez verticalement le contenu */
}

.price-card-list img {
  margin-right: 10px; /* Ajoute un espace entre l'image et le texte */
}

.price-card-button {
  width: 107px;
  height: 30px;
  border-radius: 30px;
  background: #fff;
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -53.5px; /* Décalage pour maintenir le bouton centré horizontalement */
  transition: transform 0.3s ease; /* Ajout d'une transition en douceur */
}

.price-card-button:hover {
  transform: scale(1.1); /* Grossissement du bouton au survol */
}

.price-card-button p {
  color: #000;
  text-align: center;
  font-family: Syne;
  font-size: 14px;
  font-weight: 700;
  padding: 6px;
}

/* REVIEWS PART */

.reviews-container {
  padding-left: 17.5%;
  padding-right: 17.5%;
  padding-bottom: 10%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reviews-container h1 {
  color: #fff;
  font-family: Syne;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 2;
  text-align: center;
  padding: 50px 0px;
}

.reviews-container img {
  max-width: 100%;
  height: auto;
}

.review-card {
  width: 580px;
  height: 240px;
  flex-shrink: 0;
  border-radius: 47.647px;
  background: rgba(217, 217, 217, 0.1);
  box-shadow: 0px 21px 46px 0px rgba(0, 0, 0, 0.1),
    0px 83px 83px 0px rgba(0, 0, 0, 0.09),
    0px 187px 112px 0px rgba(0, 0, 0, 0.05),
    0px 333px 133px 0px rgba(0, 0, 0, 0.01),
    0px 520px 146px 0px rgba(0, 0, 0, 0), 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(11px);
  position: relative;
  bottom: 320px;
  left: 415px;
}

.review-card-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Permet au contenu de passer à la ligne */
}

.review-card-details {
  display: flex;
  flex-direction: row;
  padding-left: 40px;
  padding-top: 40px;
}

.review-card-pfp img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 69px;
}

.review-card-name {
  color: #fff;
  font-family: Montserrat;
  font-size: 19.059px;
  font-style: normal;
  font-weight: 500;
  align-items: center;
  padding-left: 20px;
  justify-content: center;
  display: flex;
}

.review-card-stars {
  padding-top: 30px;
  padding-left: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.review-card-text {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-left: 40px;
  max-width: 500px;
}

.review-card-text p {
  color: #fff;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 200;
  line-height: 130%; /* 20.8px */
  flex-grow: 1; /* Permet au texte de prendre tout l'espace disponible en largeur */
  flex-basis: 0; /* Oblige le texte à prendre tout l'espace disponible */
}

.review-card-subdetails {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-left: 40px;
  max-width: 500px;
  gap: 8px;
  align-items: center;
}

.review-card-date {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 500px;
}

.review-card-date p {
  color: rgba(255, 255, 255, 0.196);
  font-family: Montserrat;
  font-size: 13.549px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}

.review-rectangle-full {
  width: 40px;
  height: 2px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.review-rectangle {
  width: 40px;
  height: 2px;
  background-color: #f5f5f51f;
  border-radius: 5px;
}

.review-card-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-left: 180px;
  max-width: 500px;
  gap: 8px;
  align-items: center;
}

/* FOOTER */

.footer-top {
  display: flex;
  justify-content: space-between;
  padding: 50px;
  max-width: 1435px;
  margin: 0 auto;
}

.footer-slogan h3 {
  color: #fff;
  font-family: Syne;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding-bottom: 20px;
}

.footer-slogan p {
  color: #fff;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  max-width: 250px;
}

.footer-about h3 {
  color: #fff;
  font-family: Syne;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding-bottom: 20px;
}

.footer-about ul li {
  color: #fff;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  list-style: none;
}

.footer-contact h3 {
  color: #fff;
  font-family: Syne;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding-bottom: 20px;
}

.footer-contact img {
  padding-right: 10px;
}

.footer-contact span {
  color: #fff;
  font-family: Montserrat;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer-socials {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.footer-socials svg {
  transition: transform 0.3s ease; /* Transition pour l'effet de grossissement */
}

.footer-socials svg:hover {
  transform: scale(1.25); /* Grossissement de 10% lors du survol */
}

.footer-credits {
  color: #fff;
  text-align: center;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  padding: 50px;
}

@media (min-width: 768px) and (max-width: 1223px) {
  .video-background {
    display: none; /* Cacher la vidéo sur les périphériques mobiles */
  }

  .hero-container {
    background-image: url("/assets/hero-background.png");
    background-size: cover;
    background-position: center;
  }

  .hero-navbar ul li a {
    display: none;
  }

  .hero-navbar ul li {
    display: none;
  }

  .hero-navbar {
    justify-content: center;
    padding-top: 200px;
  }

  .hero-navbar img {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .hero-textbox h1 {
    font-size: 56px;
  }

  .hero-textbox .h1-full {
    font-size: 56px;
  }

  .aboutme-textbox h1 {
    font-size: 42px;
  }

  .aboutme-textbox p {
    font-size: 16px;
  }

  .pic-text {
    font-size: 24px;
  }

  .price-container h1 {
    font-size: 42px;
  }

  .reviews-container h1 {
    font-size: 42px;
  }

  .review-card {
    bottom: 100px;
    left: 0px;
  }
}

@media (max-width: 768px) {
  .video-background {
    display: none; /* Cacher la vidéo sur les périphériques mobiles */
  }

  .hero-container {
    background-image: url("/assets/hero-background.png");
    background-size: cover;
    background-position: center;
  }
  .hero-navbar ul li a {
    display: none;
  }

  .hero-navbar ul li {
    display: none;
  }

  .hero-navbar {
    justify-content: center;
    padding-top: 120px;
  }

  .hero-navbar img {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .hero-textbox h1 {
    font-size: 48px;
    max-width: 300px;
  }

  .hero-textbox .h1-full {
    font-size: 48px;
    max-width: 400px;
  }

  .hero-textbox p {
    font-size: 14px;
  }

  .aboutme-textbox h1 {
    font-size: 25px;
  }

  .aboutme-textbox p {
    font-size: 12px;
  }

  .pic-text {
    font-size: 16px;
  }

  .price-container h1 {
    font-size: 25px;
  }

  .reviews-container h1 {
    font-size: 25px;
  }

  .reviews-imgroup {
    display: none;
  }

  .review-card {
    bottom: 20px;
    top: 20px;
    left: 0px;
    width: 300px;
  }

  .review-card-buttons {
    position: absolute;
    bottom: 25px;
    left: 25px;
  }

  .review-card-stars {
    display: none;
  }

  .review-card-subdetails {
    display: none;
  }

  .footer-top {
    padding: 30px;
  }

  .footer-slogan h3 {
    display: none;
  }

  .footer-slogan p {
    display: none;
  }

  .footer-about h3 {
    font-size: 20px;
  }

  .footer-about ul li {
    font-size: 12px;
  }

  .footer-contact span {
    font-size: 11px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.fade-out {
  animation: fadeOut 0.5s ease-in-out;
}