/* ==========================================
   1. BASE & RESET
   ========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

body {
  padding-top: 80px;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
}

h3, h4, .nav-links a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

button, .btn {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* ==========================================
   2. NAVBAR
   ========================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #f5f5f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-right {
  display: flex;
  align-items: center;
}

.logo {
  color: white;
  font-size: 22px;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  color: #141414;
  text-decoration: none;
  padding: 10px 18px;
  display: block;
}

.nav-links a:hover {
  color: #0036c2;
  border-radius: 6px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #f5f5f0;
  min-width: 180px;
  border-radius: 6px;
  overflow: hidden;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li a {
  padding: 12px;
}

.btn {
  background: #0036c2;
  color: white;
  padding: 8px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.btn:hover {
  background: #05226f;
  color : white;
}

.menu-toggle {
  display: none;
  width: 30px;
  height: 25px;
  position: relative;
  cursor: pointer;
  margin-right: 20px;
}

.menu-toggle span {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #141414;
  left: 0;
  transition: 0.3s;
}

.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 10px; }
.menu-toggle span:nth-child(3) { top: 20px; }

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
  background: #141414;
}

.menu-toggle.active span:nth-child(2) { opacity: 0; }

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px;
  background: #141414;
}

/* ==========================================
   3. HERO SECTION
   ========================================== */
.section-hero {
  position:relative;
  height:80vh;
  background-image: url('../img/background-1.jpg');
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  color:white;
}

.section-hero::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5); 
}

.section-hero h1 {
  font-size: 40px;
  position:relative;
  z-index:2;
  text-align: center;
}

.section-hero h2 {
  font-size: 25px;
  position:relative;
  z-index:2;
  text-align: center;
}

.section-hero p {
  font-size: 16px;
  position:relative;
  z-index:2;
  padding: 30px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
}

.section-hero ul {
  font-size: 16px;
  position:relative;
  z-index:2;
  text-align: left;
}

.btn-verification {
  background: #d656d6;
  color: #141414;
  padding: 20px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.btn-verification:hover {
  background: #f492f7;
  color: #fff;
  text-decoration: none;
}

/* ==========================================
   4. SECTIONS MEDIA / TEXT
   ========================================== */
.section-not-hero {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  padding: 30px;
  background-color: #0036c2;
}

.section-not-hero-1 {
  display:flex;
  flex-direction:row;
  justify-content:center;
  padding: 30px;
  background-color: #0036c2;
}

.section-not-hero-2 {
  display:flex;
  flex-direction:row;
  justify-content:center;
  padding: 30px;
  background-color: #05226f;
}

.section-not-hero-3 {
  display:flex;
  flex-direction:row;
  align-items: center;
  padding: 30px;
  background-color: #0036c2;
}

.media-image-1 img {
  width: 570px;
  height: auto;
}

.media-image-3 img {
  width: 570px;
  height: auto;
}

.text-media-1 {
  margin-left: 30px;
  color: #fff;
}

.text-media-1 h2 {
  font-size: 40px;
  font-weight: bold;
}

.section-not-hero-1 .text-media-1 {
  background-color: #05226f;
  border: 1px solid #f5f5f0;
  border-radius: 6px;
  padding: 20px;
}

.section-not-hero-1 .text-media-1 li {
  margin-left: 30px;
  font-size: 14px;
}

.text-media-2 {
  background-color: #0036c2;
  text-align: center;
  color: #fff;
  padding: 30px;
}

.text-media-2 h2 {
  font-size: 32px;
  font-weight: bold;
}

.text-media-2 p {
  font-size: 16px;
  margin-top: 15px;
}

.text-media-3 {
  background-color: #05226f;
  text-align: center;
  color: #fff;
  padding: 30px;
}

.text-media-3 h2 {
  font-size: 32px;
  font-weight: bold;
}

.text-media-4 {
  text-align: center;
  color: #fff;
  padding: 30px;
  margin-right: 30px;
}

.text-media-4 h2 {
  font-size: 32px;
  font-weight: bold;
  text-align: left;
}

.text-media-4 p {
  font-size: 14px;
  text-align: left;
}

.custom-list {
  list-style:none;
  counter-reset:item;
  padding-left:0;
}

.custom-list li {
  counter-increment:item;
  display:flex;
  align-items:center;
  margin-bottom:12px;
}

.custom-list li::before {
  font-size: 40px;
  color: #f492f7;
  content: counter(item) ".";
  margin-right:10px;
}

/* ==========================================
   5. CAROUSEL
   ========================================== */
.carousel-wrapper {
  background-color: #f5f5f9;
  padding: 30px;
}

.carousel-track {
  display:flex;
  width:max-content;
  animation: scroll-left 120s linear infinite;
  margin: 15px;
}

.carousel.reverse .carousel-track {
  animation: scroll-right 120s linear infinite;
}

.carousel:hover .carousel-track {
  animation-play-state: paused;
}

.carousel-track .slide {
  background-color: #fff;
  margin: 0 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel img {
  height:50px;
  width: 120px;
  margin: 15px;
  transition: transform 0.3s;
}

.carousel img:hover {
  transform: scale(1.05);
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.carousel-button {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.carousel-button .btn-carousel {
  background: #0036c2;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
  font-size: 14px;
}

.carousel-button .btn-carousel:hover {
  background: #002a9c;
  transform: translateY(-2px);
}

/* ==========================================
   6. FAQ
   ========================================== */
.faq {
  padding: 40px;
}

.faq h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.faq-cadre {
  padding: 40px;
  border: 1px solid #6c757d;
  background-color: #f8f9fa;
  border-radius: 10px;
  margin-bottom: 10px;
}

.faq-user {
  border-bottom: 1px solid #eeeeee;
  text-decoration: none;
  align-items: center;
  padding: 20px;
}

.faq-user img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--color-border);
}

.faq-comment {
  font-size: 14px;
}

/* ==========================================
   7. FOOTER
   ========================================== */
.footer {
  background: linear-gradient(180deg, #05226f 0, #141414 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.footer h3 {
  font-size: 15px;
  font-weight: bold;
}

.footer a {
  font-size: 13px;
}

.footer ul {
  list-style: none;
  padding: 0;
}

.containerx1 {
  display: flex;
  flex-direction: row;
  padding: 20px;
}

.containerx1-footer-1 {
  display: flex;
  flex-direction: column;
}

.containerx1-footer-2 {
  display: flex;
  flex-direction: row;
  margin-left: 15px;
}

.containerx1-footer-2 a {
  color: #fff;
  padding: 5px;
  text-decoration: none;
}

.footer .footer_social ul {
  display: flex;
  flex-direction: row;
  list-style: none;
}

.footer .footer_social li {
  padding: 10px;
}

.footer .footer_social .footer_social-facebook::after {
  --icon: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3e%3cg id='FB icon'%3e%3cpath id='Subtract' fill-rule='evenodd' clip-rule='evenodd' d='M26.3221 0.736816H8.56518L0.955078 8.34692V26.1038L8.56518 33.7139H14.3933V19.766H11.7363V15.8282H14.3933V14.1314C14.3933 9.74571 16.3782 7.71289 20.684 7.71289C21.5005 7.71289 22.9091 7.87267 23.4854 8.03297V11.6023C23.1813 11.5703 22.6529 11.5543 21.9968 11.5543C19.8841 11.5543 19.0677 12.3548 19.0677 14.4355V15.8282H23.2766L22.5535 19.766H19.0672V33.7139H26.3221L33.9322 26.1038V8.34692L26.3221 0.736816Z' fill='%23AEEBF2'/%3e%3c/g%3e%3c/svg%3e");
  --icon-color: #F492F7;
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-color: var(--icon-color);
  -webkit-mask: var(--icon) no-repeat center center/contain;
  mask: var(--icon) no-repeat center center/contain;
  transition: background-color calc(var(--prefersMotion) * .2s);
}

.footer .footer_social .footer_social-twitter::after {
  --icon: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='33' height='34' viewBox='0 0 33 34' fill='none'%3e%3cg id='X icon'%3e%3cpath id='Subtract' fill-rule='evenodd' clip-rule='evenodd' d='M25.367 0.736816H7.6101L0 8.34692V26.1038L7.6101 33.7139H25.367L32.9771 26.1038V8.34692L25.367 0.736816ZM25.4341 7.98145H22.3222L17.1945 13.8429L12.761 7.98145H6.33984L14.0121 18.014L6.74058 26.325H9.85428L15.4665 19.9123L20.3712 26.325H26.6334L18.6357 15.7516L25.4341 7.98145ZM22.9544 24.4624H21.2301L9.97375 9.74619H11.8241L22.9544 24.4624Z' fill='%23AEEBF2'/%3e%3c/g%3e%3c/svg%3e");
  --icon-color: #F492F7;
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-color: var(--icon-color);
  -webkit-mask: var(--icon) no-repeat center center/contain;
  mask: var(--icon) no-repeat center center/contain;
  transition: background-color calc(var(--prefersMotion) * .2s);
}

.footer .footer_social .footer_social-instagram::after {
  --icon: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3e%3cg id='Insta icon'%3e%3cpath id='Subtract' fill-rule='evenodd' clip-rule='evenodd' d='M8.54174 0.736816H26.2986L33.9087 8.34692V26.1038L26.2986 33.7139H8.54174L0.931641 26.1038V8.34692L8.54174 0.736816ZM17.4172 7.85135C20.4714 7.85135 20.833 7.86474 22.0342 7.91833C23.1504 7.96744 23.7532 8.15498 24.1551 8.31126C24.6865 8.51665 25.0705 8.7667 25.4679 9.1641C25.8697 9.56596 26.1153 9.9455 26.3207 10.4769C26.477 10.8787 26.6645 11.486 26.7136 12.5978C26.7672 13.8034 26.7806 14.1651 26.7806 17.2148C26.7806 20.2689 26.7672 20.6306 26.7136 21.8317C26.6645 22.948 26.477 23.5508 26.3207 23.9527C26.1153 24.484 25.8652 24.868 25.4679 25.2654C25.066 25.6673 24.6865 25.9129 24.1551 26.1182C23.7532 26.2745 23.146 26.4621 22.0342 26.5112C20.8286 26.5648 20.4669 26.5782 17.4172 26.5782C14.363 26.5782 14.0014 26.5648 12.8002 26.5112C11.684 26.4621 11.0812 26.2745 10.6793 26.1182C10.1479 25.9129 9.76395 25.6628 9.36655 25.2654C8.96469 24.8635 8.7191 24.484 8.51371 23.9527C8.35743 23.5508 8.16989 22.9435 8.12077 21.8317C8.06719 20.6261 8.0538 20.2644 8.0538 17.2148C8.0538 14.1606 8.06719 13.7989 8.12077 12.5978C8.16989 11.4815 8.35743 10.8787 8.51371 10.4769C8.7191 9.9455 8.96915 9.5615 9.36655 9.1641C9.76841 8.76224 10.1479 8.51665 10.6793 8.31126C11.0812 8.15498 11.6884 7.96744 12.8002 7.91833C14.0014 7.86474 14.363 7.85135 17.4172 7.85135ZM17.4172 5.79292C14.3139 5.79292 13.9255 5.80631 12.7065 5.85989C11.492 5.91348 10.657 6.10994 9.93362 6.39125C9.17901 6.68595 8.5405 7.07441 7.90645 7.71293C7.26793 8.34698 6.87946 8.98549 6.58476 9.73564C6.30346 10.4635 6.10699 11.294 6.05341 12.5085C5.99983 13.7319 5.98644 14.1204 5.98644 17.2237C5.98644 20.327 5.99983 20.7154 6.05341 21.9344C6.10699 23.1489 6.30346 23.9839 6.58476 24.7073C6.87946 25.4619 7.26793 26.1004 7.90645 26.7344C8.5405 27.3685 9.17901 27.7614 9.92916 28.0517C10.657 28.333 11.4875 28.5294 12.702 28.583C13.921 28.6366 14.3095 28.65 17.4127 28.65C20.516 28.65 20.9045 28.6366 22.1235 28.583C23.338 28.5294 24.173 28.333 24.8963 28.0517C25.6465 27.7614 26.285 27.3685 26.919 26.7344C27.5531 26.1004 27.946 25.4619 28.2362 24.7117C28.5175 23.9839 28.714 23.1534 28.7676 21.9389C28.8212 20.7199 28.8346 20.3314 28.8346 17.2281C28.8346 14.1249 28.8212 13.7364 28.7676 12.5174C28.714 11.3029 28.5175 10.4679 28.2362 9.74457C27.9549 8.98549 27.5665 8.34698 26.928 7.71293C26.2939 7.07888 25.6554 6.68595 24.9052 6.39571C24.1774 6.11441 23.3469 5.91794 22.1324 5.86436C20.9089 5.80631 20.5205 5.79292 17.4172 5.79292ZM11.545 17.2237C11.545 13.982 14.175 11.352 17.4167 11.352C20.6584 11.352 23.2884 13.982 23.2884 17.2237C23.2884 20.4654 20.6584 23.0953 17.4167 23.0953C14.175 23.0953 11.545 20.4654 11.545 17.2237ZM13.6079 17.2237C13.6079 19.3267 15.3136 21.0324 17.4167 21.0324C19.5198 21.0324 21.2255 19.3267 21.2255 17.2237C21.2255 15.1206 19.5198 13.4149 17.4167 13.4149C15.3136 13.4149 13.6079 15.1206 13.6079 17.2237Z' fill='%23AEEBF2'/%3e%3c/g%3e%3c/svg%3e");
  --icon-color: #F492F7;
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-color: var(--icon-color);
  -webkit-mask: var(--icon) no-repeat center center/contain;
  mask: var(--icon) no-repeat center center/contain;
  transition: background-color calc(var(--prefersMotion) * .2s);
}

.containerx2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 50px;
}

.containerx2 .copyright {
  font-size: 9px;
}

.containerx2 .footer_logo {
  margin-left: 5px;
}

.footer_logo img {
  width: 150px;
  height: auto;
}

/* ==========================================
   8. RESPONSIVE (MEDIA QUERIES)
   ========================================== */
@media(max-width:1300px) {
  .img-fluid {
    width: 142px;
    height: 20px;
  }
  .section-hero h1 { font-size: 32px; }
  .section-hero h2 { font-size: 18px; }
  .section-hero h3 { font-size: 15px; text-align: center; }
  .section-hero p { font-size: 14px; text-align: center; }
  .section-hero ul {
    font-size: 14px;
    text-align: left;
    padding: 0 20px;
  }
  .btn-verification { font-size: 16px; }
  .nav-links {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 250px;
    height: 100%;
    background: #f5f5f0;
    flex-direction: column;
    transition: 0.4s;
    padding-top: 20px;
  }
  .nav-links.active { left: 0; }
  .dropdown-menu { position: static; }
  .dropdown:hover .dropdown-menu { display: none; }
  .dropdown.active .dropdown-menu { display: block; }
  .menu-toggle { display: block; }
  .btn {
    margin-right : -20px;
    padding: 8px 12px;
    font-size: 14px;
  }
  .media-image-1 img { width: 410px; height: auto; }
  .media-image-3 img { width: 410px; height: auto; }
  .text-media-1 h2 { font-size: 28px; }
  .text-media-1 p { font-size: 14px; }
}

@media(max-width: 768px) {
  .section-hero { height:70vh; }
  .img-fluid { width: 120px; height: 20px; }
  .section-not-hero { flex-direction: column; }
  .section-not-hero-1 { flex-direction: column; }
  .section-not-hero-2 { flex-direction: column; }
  .section-not-hero-3 { flex-direction: column; }
  .text-media-1 h2 { text-align: center; }
  .media-image-1 img { width: 350px; height: auto; }
  .media-image-3 img { width: 350px; height: auto; }
  .text-media-1 { margin-left: 0px; margin-top: 20px; }
  .carousel-button { flex-direction: column; text-align: center; }
  .text-media-2 h2 { font-size: 28px; font-weight: bold; }
  .text-media-2 p { font-size: 14px; margin-top: 15px; }
  .text-media-3 h2 { font-size: 28px; font-weight: bold; }
  .text-media-4 h2 { font-size: 28px; }
  .text-media-4 p { font-size: 14px; }
  .containerx1 { flex-direction: column; }
  .containerx2 { flex-direction: column; padding: 0; }
  .faq h2 { font-size: 26px; }
}