*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Familjen Grotesk', sans-serif;
  background: #E8C27D;
  color: #FEB95E;
}

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


ul {
  list-style: none;
}
/* Header/Navbar */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  display: flex;
  justify-content: center; /* Centre le contenu horizontalement */
  align-items: center; /* Centre verticalement */
  text-transform: uppercase;
  height: 100px;
  padding: 0 30px;
}

/* Logo */
.logo {
  width: 150px;
  height: auto;
  position: absolute; /* Permet � la logo de rester � gauche sans influencer le centrage du menu */
  left: 50px;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

.main-header a {
  color: #092438;

}

.main-header a:hover {
  color: white;
}



/* Desktop Menu */
.desktop-main-menu {
  margin-left: 10%; /* Supprime les marges inutiles */
}

.desktop-main-menu ul {
  display: flex;
  justify-content: center; /* Centre les �l�ments du menu */
  list-style: none;
  padding: 0;
}

.desktop-main-menu ul li {
  position: relative;
  margin: 0 15px; /* Espacement entre les liens */
}

/* Menu item bottom border */
.desktop-main-menu ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #EA4D3D;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: right center;
}

.desktop-main-menu ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
  transition-duration: 0.4s;
}

/* Sections */
section {
  position: relative;
  min-height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-transform: uppercase;


}

.section-inner {
  position: absolute;
  bottom: 80px;
  left: 40px;
  max-width: 560px;
  padding: 20px; /* Ajoutez un peu de padding pour ne pas que le texte soit coll� */
  border-radius: 0px; /* Facultatif : pour adoucir les bords */
}

.section-inner h4 {
  font-size: 22px;
  margin-bottom: 5px;
  font-weight: 500;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.9);
  -webkit-text-stroke: 0px black;
  animation: fadeInUp 0.5s ease-in-out;
  color: white;

}


.section-inner h2 {
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.9);
  -webkit-text-stroke: 0px black;
  animation: fadeInUp 0.5s ease-in-out 0.2s;
  animation-fill-mode: both; 
}

.section-inner a {
  animation: fadeInUp 0.5s ease-in-out 0.4s;
  animation-fill-mode: both;  
}

/* Background images */
.section-a {
  background-image: url('img/first.webp');
}
.section-c {
  background-image: url('img/scnd.webp');
}
.section-b {
  background-image: url('img/troisi.webp');
}
.section-d {
  background-image: url('https://cdn-hdjol.nitrocdn.com/SjWdAtoRrNzvfGhTmqRWCqOGKXDhjHYe/assets/images/optimized/rev-a646ca8/www.turismomarruecos.net/wp-content/uploads/2019/11/tajine-marroqui.jpg');
}
.section-e {
  background-image: url('img/akhir.webp');
}
.section-f {
  background-image: url('img/akhir.webp');
}

.section-g {
  background-image: url('img/6.webp');
}
.btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  min-width: 130px;
  padding: 15px 50px;
  margin-top: 10px;
  border: 2px solid white;
  text-transform: uppercase;
  font-weight: bold;
  overflow: hidden;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.1);
  color: white;
  transition: background-color 0.6s cubic-bezier(0.19, 1, 0.22, 1),  color 0.6s ease, 
   border-color 0.6s ease; /* Ajout� transition pour border */
}

.btn:hover {
  border-color: black; /* Bordure devient blanche au hover */
}

.btn:hover span {
  color: #EA4D3D;
}

.btn .hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-color: white;
  background-color: white;
  color: #092438;
  z-index: -1;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn:hover .hover {
  transform: translateY(0);
}

.scroll-arrow {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  animation: fadeBounce 5s infinite;
  z-index: 1;
}

/* Footer */
footer {
  position: relative;
  padding: 25px 0;
}

footer ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

footer ul li {
  margin-right: 30px;
  color: #aaa;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 2.5;
}

footer ul li a {
  color: white;
  transition: color 0.6s;
}

footer ul li a:hover {
  color: #aaa;
}

/* Hamburger Menu */
.hamburger {
  position: fixed; /* Position fixe pour rester toujours visible */
  top: 50px; /* Distance depuis le haut */
  right: 30px; /* Distance exacte de 45px depuis le bord droit */
  z-index: 10; /* Assure que le bouton est au-dessus des autres �l�ments */
  cursor: pointer;
  width: 20px;
  height: 20px;
  background: none; /* Supprime tout fond */
  border: none; /* Supprime toute bordure */
}

.menu-btn{
right: 40px;
}

.hamburger:hover .hamburger-top,
.hamburger:hover .hamburger-middle,
.hamburger:hover .hamburger-bottom {
  background: #EA4D3D; /* Couleur blanche */
  transition: background 0.3s ease;
}

.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
  position: absolute;
  width: 20px;
  height: 2px;
  top: 0;
  left: 0;
  background: white;
  transition: all 0.5s;
}

.hamburger-middle {
  transform: translateY(5px);
}

.hamburger-bottom {
  transform: translateY(10px);
}

/* Transition hamburger to X when open */
.open {
  transform: rotate(90deg);
}

.open .hamburger-top {
  transform: rotate(45deg) translateY(6px) translateX(6px);
}

.open .hamburger-middle {
  display: none;
}

.open .hamburger-bottom {
  transform: rotate(-45deg) translateY(6px) translateX(-6px);
}

/* Overlay */
.overlay-show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3;
}

/* Stop body scroll */
.stop-scrolling {
  overflow: hidden;
}

/* Hide mobile main menu items */
.mobile-only {
  display: none;
}

/* Mobile menu */
.mobile-main-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  height: 100%;
  background: #E8C27D;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Bring menu from right */
.show-menu {
  transform: translateX(0);
}

.mobile-main-menu ul {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  padding: 50px;
  width: 100%;
}

.mobile-main-menu ul li {
  margin-bottom: 20px;
  font-size: 18px;
  text-transform: uppercase;
  width: 100%;
  text-align: right;
  padding-bottom: 8px;
  border-bottom: 1px white dotted;
}

.mobile-main-menu ul li a {
  color: white;
  transition: color 0.6s;
}

.mobile-main-menu ul li a:hover {
  color: #EA4D3D;
}

/* Inner Pages */
.bg-falcon-9 {
  background-image: url('img/7.webp');
}

.bg-falcon-heavy {
  background-image: url('img/8.webp');
}

.bg-dragon {
  background-image: url('img/9.webp');
}


.section-animate {
  animation: fadeIn 2s ease-in-out;
}

.section-inner-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  text-align: center;
  width: 80%;
}
.stats div span,
.stats div h4 {
  color: white;
}

.section-inner-center h3 {
  font-size: 100px;
  margin-bottom: 15px;
  animation: fadeInUp 0.5s ease-in-out;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.9);

}

.section-inner-center p {
  font-size: 20px;
  animation: fadeInUp 0.5s ease-in-out 0.2s;
  animation-fill-mode: both;
}

.section-inner-center h4 {
  color: white;
}


/* Stats */
.stats {
  max-width: 960px;
  margin: 50px auto 0; /* Ajoute une marge de 50px en haut */
    display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 35px;
}

.stats p {
  font-size: 160px;
  font-weight: 350;
  color: #092438;
}

.stats div span {
  font-size: 160px;
  font-weight: 350;
  color: #092438;
}

.stats div h4 {
  font-size: 24px;
  font-weight: 300;
  color: #092438;
}

/* Animations */

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(140px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }

  40% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Media Queries */

@media (max-width: 960px) {
  /* Hide desktop menu */
  .desktop-main-menu {
    display: none;
  }

  /* Show main mobile items */
  .mobile-only {
    display: block;
  }

  .section-inner-center h3 {
    font-size: 75px;
  }
}

@media (max-width: 600px) {
  .section-inner {
    bottom: 75px;
    left: 20px;
  }

  .section-inner h2 {
    font-size: 40px;
  }

  footer ul li:first-child {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  footer ul li {
    margin-right: 15px;
  }


  .section-inner-center h3 {
    font-size: 50px;
  }

  /* Stats */
  .stats {
    flex-direction: column;
  }

  .stats div {
    margin-bottom: 20px;
  }
}

.main-header {
  transition: transform 0.9s ease, background-color 0.9s ease;
}

.main-header.visible {
  transform: translateY(0);
  background-color: #8C5A2B; /* Fond noir semi-transparent */
}

.main-header.hidden {
  transform: translateY(-100%); /* Cacher la barre */
}



/* Contact Section */
.section-contact {
  background-color: #E8C27D;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #092438;
  padding: 30px 20px; /* R�duire le padding pour diminuer la hauteur */
  text-align: center;
  position: relative;
  background-image: url('img/10.png');
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Section gauche avec texte */
.contact-info {
  width: 48%;
  float: left;
  text-align: left;
  margin-right: 4%; /* Ajout d'un espace entre le texte et le formulaire */
  margin-top: 21%;
}

.contact-info h2 {
  font-size: 40px;
  margin-bottom: 10px;
  animation: fadeInUp 0.6s ease-in-out;
  color: #FEB95E;
}

.contact-info h4 {
  font-size: 20px;
  margin-bottom: 40px;
  animation: fadeInUp 0.6s ease-in-out 0.2s;
}

.contact-info p {
  color: white;
}

/* Formulaire � droite */
.contact-form-container {
  width: 48%;
  float: left;
  text-align: left;
  margin-top: 30px;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form .form-group {
  margin-bottom: 8px;
  color: white;
}

.contact-form label {
  font-weight: bold;
  margin-bottom: 5px;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.9);

}

.contact-form input, 
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #EA4D3D;
  border-radius: 0px;
  background-color: #fff6ea;
  color: #000;
  font-size: 16px;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
  position: relative;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    min-width: 130px;
    padding: 15px 50px;
    margin-top: 10px;
    border: 2px solid white;
    text-transform: uppercase;
    font-weight: bold;
    overflow: hidden;
    z-index: 2;
    background-color: transparent; /* Couleur verte WhatsApp */
    color: white; /* Texte blanc */
   transition: background-color 0.6s cubic-bezier(0.19, 1, 0.22, 1), color 0.6s ease;
}

.contact-form button:hover {
  background-color: #fff;
  color: #000;
}

/* Clearfix */
.section-contact::after {
  content: "";
  display: block;
  clear: both;
}

/* Animations */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .section-contact {
    padding-top: 850px; /* Augmenter le padding-top pour compenser la hauteur de la navbar */
  }

  .contact-info, .contact-form-container {
    width: 98%;
    float: none;
    margin-right: 0;
    margin-bottom: 40px;
  }

  .contact-form-container {
    margin-top: 30px;
  }
}

/* Section Services */
.section-services {
  background-color: #222;
  color: #fff;
  padding: 50px 20px;
  text-align: center;
  position: relative;
  margin-top: 60px; /* Pour �viter que la navbar recouvre */

}

.section-services h2 {
  font-size: 50px;
  margin-bottom: 20px;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.9);
}

.section-services h4 {
  font-size: 22px;
  margin-bottom: 30px;
  font-weight: 300;
}

.services-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.service-item {
  background-color: #333;
  padding: 30px;
  margin: 20px;
  width: 250px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.service-item h3 {
  font-size: 24px;
  margin-bottom: 15px;
}

.service-item p {
  font-size: 16px;
  line-height: 1.5;
}




/* Media Queries */
@media (max-width: 768px) {
  .services-container {
    flex-direction: column;
    align-items: center;
  }

  .service-item {
    width: 80%;
    margin-bottom: 30px;
  }

}
.main-header.transparent {
  background-color: transparent;
    transition: background-color 0.5s ease; /* Transition fluide */
}


.desktop-main-menu ul li a {
  font-family: Verdana, sans-serif; /* Police Verdana avec une police de secours */
  font-size: 18px; /* Ajustez la taille de la police si n�cessaire */
  color: white; /* Conserve la couleur existante */
  text-transform: uppercase; /* Garde le texte en majuscules */
}

.desktop-main-menu ul li a:hover {
  color: #EA4D3D; /* Couleur au survol */
  transition: color 0.3s ease; /* Transition fluide pour le survol */
}





.whatsapp-contact {
  margin-top: 30px; /* Espace avec les autres �l�ments */
  text-align: center; /* Centrer le texte et le bouton */
}

.whatsapp-contact p {
  font-size: 18px; /* Taille de la police du paragraphe */
  margin-bottom: 15px; /* Espace entre le paragraphe et le bouton */
  color: #aaa; /* Couleur du texte */
}

.whatsapp-btn {
  display: inline-block;
  text-decoration: none; /* Supprime le soulignement */
  color: #fff; /* Couleur du texte */
  background-color: transparent; /* Couleur verte WhatsApp */
  border: 2px solid white; /* Bordure verte */
  padding: 12px 30px; /* Espace interne du bouton */
  font-size: 16px; /* Taille de la police */
  font-weight: bold;
  text-transform: uppercase; /* Majuscules */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; /* Transition fluide */
}

.whatsapp-btn:hover {
  background-color: #fff; /* Couleur de fond blanche au survol */
  color: #EA4D3D; /* Texte vert au survol */
}

.section-about {
  display: flex;
  justify-content: left; /* Centre la section horizontalement */
  align-items: center; /* Centre le contenu verticalement */
  text-align: left; /* Aligner le texte � gauche */
  padding: 50px 20px;
  background-image: url('imgD/Backgroundbt.jpeg');
}

.content-center {
  max-width: 720px; /* M�me largeur que section-inner */
  padding: 25px;
  color: #092438;
}

.content-center h2 {
  font-size: 32px;
  margin-bottom: 0px;
  color: #EA4D3D;
  text-align: left; /* Aligner uniquement les titres � gauche */
  width: 100%;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.9); /* Ajout du shadow ici */
}

.content-center h3 {
  font-size: 16px;
  margin-bottom: 12px;
  color: #EA4D3D;
  text-align: left; /* Aligner uniquement les titres � gauche */
  width: 100%;
  
}

.content-center p {
  font-size: 19px;
  line-height: 1.5;
  color: #000;
  text-align: left; /* Alignement du texte uniquement */
  font-family: 'Biryani';
  text-transform: lowercase;
  margin-bottom: 22px;


}

.content-center ul {
  text-align: left; /* Alignement des valeurs */
  color: white;
  font-family: 'Biryani';
  text-transform: lowercase;
  font-size: 14px; 
}



/* Section E */
.section-e {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 20px;
  background-image: url('imgD/PNG image 18.png');
  background-size: cover;
  background-position: center;
  text-transform: uppercase;
  position: relative;
  min-height: 100vh;
}

/* Conteneur principal (Texte + Map) */
.section-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}

/* Garde le style de section-inner */
.section-e .section-inner {
  position: relative;
  bottom: 0;
  left: 0;
  max-width: 560px;
  padding: 20px;
  animation: fadeInUp 0.5s ease-in-out;
  margin-right: auto; /* Pousse la div vers la gauche */
  margin-left: 0; /* Assure qu'il est bien coll� � gauche */
}

/* Map � droite */
.map-container {
  width: 50%;
  height: 350px;
  border-radius: 10px;
  overflow: hidden;
}

/* Ajustement pour iframe Google Maps */
.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.map-container h2 {
 color: #EA4D3D;
 text-shadow: rgba(0, 0, 0, 1);
 background-color: #fff;
padding-bottom: 5px;
padding-top:5px ; 
text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .section-content {
    flex-direction: column;
    text-align: center;
  }

  .section-e .section-inner {
    max-width: 100%;
    text-align: center;
  }

  .map-container {
    width: 100%;
    height: 300px;
    margin-top: 20px;
  }
}





/* Section V */
.section-v {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 20px;
  background-image: url('imgD/Backgroundbt.jpeg'); /* Ajoute une image de fond */
  background-size: cover;
  background-position: center;
  text-transform: uppercase;
  position: relative;
  min-height: 100vh;
}

/* Conteneur principal (Texte + Formulaire) */
.section-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1400px; /* Augment� pour laisser plus d'espace au formulaire */
}

/* Partie gauche - Texte */
.section-v .section-inner {
  position: relative;
  bottom: 0;
  left: 0;
  max-width: 500px;
  padding: 20px;
  text-shadow: none;
  animation: fadeInUp 0.5s ease-in-out;
  margin-right: auto;
  margin-left: 0;
}

/* Titre et sous-titre */
.section-v .section-inner h2 {
  font-size: 45px;
  margin-bottom: 10px;
  color: #EA4D3D;
}

.section-v .section-inner h4 {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 400;
  color: #092438;
}

.section-v .section-inner p {
  color: #092438;
}

/* Bouton */
.section-v .btn {
  padding: 15px 50px;
  border: 2px solid #092438;
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.6s ease, color 0.6s ease;
}

.section-v .btn:hover {
  background-color: #092438;
  color: white;
}

/* Partie droite - Formulaire */
.calendar-container {
  width: 65%; /* Rend le formulaire plus grand */
  height: 570px; /* Augmente la hauteur */
  border-radius: 0px;
  overflow: hidden;
}

/* Ajustement pour Calendly */
.calendar-container .calendly-inline-widget {
  width: 100%;
  height: 50%;
  border: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .section-content {
    flex-direction: column;
    text-align: center;
  }

  .section-v .section-inner {
    max-width: 100%;
    text-align: center;
  }

  .calendar-container {
    width: 100%;
    height: 600px;
    margin-top: 20px;
  }
}

@media (max-width: 600px) {
  .logo {
    left: 50%;
    transform: translateX(-50%);
  }
}



.experience-list {
  font-size: 18px;
  color: black;
  line-height: 2;
  margin-top: 30px;
  padding-left: 7px;
  list-style: none;
}
.experience-list li {
  background-color: #fff6ea;
  border-left: 5px solid #8C5A2B;
  margin-bottom: 10px;
  padding: 12px 18px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  font-weight: 500;
  color: #000;
  
}
@media (max-width: 768px) {
  footer ul {
    flex-direction: column;
    align-items: center;
  }

  footer ul li {
    margin: 10px 0;
    text-align: center;
  }

  footer ul li:first-child {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
}

.experience-list li {
  color: #000;
}

.experience-list a {
  color: #000;
}