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

    :root {
      --dark: #05040f;
      --white: #fff;
      --violet: #5440e4;
      --blue: #00a3ff;
      --font-head: 'Poppins', sans-serif;
      --font-body: 'Poppins', sans-serif;
    }

    body {
      font-family: var(--font-body);
      overflow-x: hidden;
    }

    /* ===================== NAV ===================== */
    .site-header {
      border-top: 1px solid white;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      height: 75px;
      padding: 0 6% 0 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: transparent;
    }

     .internal-header {
          /* background: linear-gradient(135deg, #f3eeff 0%, #ede5ff 50%, #f8f5ff 100%)!important; */
          background: linear-gradient(135deg, #f3eeff 0%, #f0e9ff 50%, #efe9ff 100%) !important;
}
 .internal-header {
    position: relative!important;
}
.internal-header .btn-style {
    border: 2px solid #000000;
    border-radius: 50px;
    color: #000000;
}
.internal-header .btn-style:hover {
      border: 2px solid #372a99;
    border-radius: 50px;
    color: #ffffff;
}
.internal-header .btn-arrow{
background: #4e40b9;
    color: #ffffff;
}
.internal-header .nav-links a {
color: black!important;
}
    .logo img {
    max-height: 325px;
    margin-top: 256px;
    }

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

    .carte-maps {
      margin-top: 50px;
    }

    .nav-links a {
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      font-weight: 700;
    }

    /* ============================================================
         BTN STYLE — style visuel original + effet hover fill

         ASTUCE : on ne met PAS overflow:hidden sur le bouton lui-même
         car la flèche (.btn-arrow) dépasse à droite (right:-5px).
         À la place, le ::before est clippé via border-radius + le fait
         qu'il reste à l'intérieur du bouton naturellement.
         On utilise clip-path sur ::before pour limiter la zone de fill
         sans toucher au overflow du parent.
      ============================================================ */
    .btn-style {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 46px;
      padding: 0 55px 0 20px;
      border: 2px solid #fff;
      border-radius: 50px;
      color: #fff;
      text-decoration: none;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      background: transparent;
      isolation: isolate;
      transform: translateZ(0);
    }

    /* Le fond qui remplit de gauche à droite */
    .btn-style::before {
      content: "";
      position: absolute;
      inset: 0;
      /* couvre tout le bouton */
      border-radius: 50px;
      background: linear-gradient(90deg,
          #8c02b9 0%,
          #4e40b9 45%,
          #09699f 100%);
      z-index: -1;
      /* On simule le fill gauche→droite avec clip-path */
      clip-path: inset(0 100% 0 0 round 50px);
      transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Au hover : clip-path s'ouvre → le fond remplit de gauche à droite */
    .btn-style:hover::before {
      clip-path: inset(0 0% 0 0 round 50px);
    }

    .btn-arrow {
      position: absolute;
      right: -5px;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #fff;
      color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 16px;
      z-index: 2;
      transition:
        background 0.35s ease,
        color 0.35s ease;
    }

    .btn-style:hover .btn-arrow {
      background: white;
      color: #000000;
    }

    .nav-cta {
      height: 38px;
      padding-right: 48px;
      font-size: 13px;
    }

    .nav-cta .btn-arrow {
      width: 43px;
      height: 43px;
      font-size: 16px;
    }

    /* ===================== BTN HERO — même technique ===================== */
    .btn-style-hero {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 46px;
      padding: 0 55px 0 20px;
      border: 2px solid #fff;
      border-radius: 50px;
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      background: transparent;
      margin-top: 38px;
      isolation: isolate;
      transform: translateZ(0);
    }

    .btn-style-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50px;
      background: linear-gradient(90deg,
          #8c02b9 0%,
          #4e40b9 45%,
          #09699f 100%);
      z-index: -1;
      clip-path: inset(0 100% 0 0 round 50px);
      transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .btn-style-hero:hover::before {
      clip-path: inset(0 0% 0 0 round 50px);
    }

    .btn-style-hero:hover .btn-arrow {
      background: white;
      color: #000000;
    }

    .nav-cta-hero {
      height: 38px;
      padding-right: 48px;
      font-size: 14px;
    }

    /* ===================== HERO ===================== */
.hero {
  height: 85vh;
  min-height: 264px;
  background-color: #020107;
  background-image:
    linear-gradient(90deg,
      rgba(2, 1, 7, 1) 0%,
      rgba(2, 1, 7, 0.90) 26%,
      rgba(2, 1, 7, 0.45) 43%,
      rgba(2, 1, 7, 0) 65%
    ),
    url("ChatGPT Image 12 juin 2026, 11_53_50.png");
  background-position: center, center right;
  background-repeat: no-repeat;
  padding: 90px 6% 1px;
  position: relative;
  overflow: hidden;
}

    .hero::before {
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      left: -180px;
      top: 160px;
      background: radial-gradient(circle,
          rgba(84, 64, 228, 0.45),
          transparent 65%);
      filter: blur(20px);
      animation: glowMove 6s ease-in-out infinite alternate;
      z-index: 1;
    }

    @keyframes glowMove {
      from {
        transform: translate(0, 0) scale(1);
      }

      to {
        transform: translate(50px, 25px) scale(1.15);
      }
    }

    .hero-marquee {
      position: absolute;
      top: 150px;
      left: 0;
      width: 100%;
      overflow: hidden;
      z-index: 6;
      pointer-events: none;
    }

    .hero-marquee-text {
      display: inline-block;
      white-space: nowrap;
      font-size: clamp(26px, 4vw, 24px);
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgb(255 255 255);
      animation: marqueeTitle 20s linear infinite;
    }

    .hero-marquee-text span {
      color: rgb(255, 255, 255);
    }

    @keyframes marqueeTitle {
      0% {
        transform: translateX(100vw);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    .hero-content {
      width: 100%;
      margin: auto;
      display: flex;
      align-items: center;
      height: 100%;
      padding-top: 30px;
      position: relative;
      z-index: 5;
    }

    .hero-text {
   width: 42%;
  max-width: 720px;
      position: relative;
      z-index: 10;
    }

    .hero-kicker {
      color: #5b8cff;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 28px;
      opacity: 0;
      animation: fadeUp 0.8s ease forwards;
    }

    .hero-kicker::before {
      content: " -";
      color: var(--violet);
      margin-right: 12px;
    }

    .hero-text h1 {
      color: #fff;
      font-size: clamp(42px, 4.7vw, 58px);
      line-height: 1.19;
      font-weight: 700;
      letter-spacing: -2px;
      margin-bottom: 15px;
      overflow: hidden;
    }

    .title-line {
      display: block;
      opacity: 0;
      transform: translateY(45px);
      animation: titleReveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    .title-line:nth-child(1) {
      animation-delay: 0.25s;
    }

    .title-line:nth-child(2) {
      animation-delay: 0.48s;
    }

    .title-line:nth-child(3) {
      animation-delay: 0.72s;
    }

    .digital-word {
      display: inline-block;
      position: relative;
      background: linear-gradient(90deg,
          #6b4cff 0%,
          #5440e4 35%,
          #00a3ff 70%,
          #ffffff 100%);
      background-size: 220% auto;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      font-style: italic;
      padding-right: 8px;
      animation:
        gradientText 3s ease-in-out infinite,
        wordFloat 2.8s ease-in-out infinite;
    }

    @keyframes titleReveal {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes gradientText {
      0% {
        background-position: 0% center;
      }

      50% {
        background-position: 100% center;
      }

      100% {
        background-position: 0% center;
      }
    }

    @keyframes wordFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-5px);
      }
    }

    .wave-line {
      width: 100%;
      max-width: 620px;
      height: 45px;
      margin: 0 0 26px;
      opacity: 0;
      animation: fadeUp 0.8s ease forwards 1s;
    }

    .wave-line svg {
      width: 100%;
      height: 100%;
    }

    .wave-line path {
      stroke-dasharray: 700;
      stroke-dashoffset: 700;
      animation: drawWave 1.5s ease forwards 1.1s;
    }

    @keyframes drawWave {
      to {
        stroke-dashoffset: 0;
      }
    }

    .hero-text p {
      color: rgb(255 255 255 / 90%);
      font-size: 19px;
      line-height: 1.7;
      max-width: 650px;
      opacity: 0;
      animation: fadeUp 0.8s ease forwards 1.25s;
    }

    /* ===================== PARTNERS ===================== */
 /* ===================== PARTNERS ===================== */
.partners {
  background: #fff;
  padding: 18px 0;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}

.logo-slider {
  width: 100%;
  overflow: hidden;
}

.logo-track {
  display: flex;
  gap: 90px;
  align-items: center;
  width: max-content;
  animation: logoMove 90s linear infinite;
}

.partner-logo {
  flex: 0 0 auto;
}

@keyframes logoMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

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

    /* ===================== SERVICES ===================== */
    .services-realisation {
      padding: 80px 6%;
      background: #f8f7ff;
      overflow: hidden;
    }

    .services-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 45px;
    }

    .mini-title {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
    }

    .mini-logo {
      width: 33px;
      height: 33px;
      object-fit: contain;
    }

    .mini-logo-services {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 700;
      color: var(--violet);
    }

    .services-head h2 {
      font-family: var(--font-head);
      font-size: clamp(36px, 5vw, 53px);
      line-height: 1.05;
      margin-top: 18px;
      color: #05040f;
    }

    .services-head h2 span {
      color: var(--violet);
    }

    /* ===================== GREEN BTN ===================== */
    .green-btn {
    position: relative;
    height: 48px;
    padding: 12px 59px 12px 25px;
    border: 2px solid rgba(84, 64, 228, 0.35);
    border-radius: 50px;
    color: var(--violet);
    text-decoration: none;
    font-weight: 700;
    /* display: flex; */
    align-items: center;
    white-space: nowrap;
    isolation: isolate;
    transition: color 0.35s ease;
    }

    .green-btn::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50px;
      background: linear-gradient(90deg, var(--violet) 0%, #00a3ff 100%);
      z-index: -1;
      clip-path: inset(0 100% 0 0 round 50px);
      transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .green-btn:hover {
      color: #fff;
      border-color: var(--violet);
    }

    .green-btn:hover::before {
      clip-path: inset(0 0% 0 0 round 50px);
    }

    .green-btn span {
      position: absolute;
      right: -21px;
      top: 50%;
      transform: translateY(-50%);
     width: 51px;
    height: 51px;
      border-radius: 50%;
      background: #5440e4;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 16px;
      z-index: 2;
      transition: background 0.35s ease, color 0.35s ease;
    }


    /* ===================== SLIDER ===================== */
    .services-slider {
      position: relative;
      overflow: hidden;
    }

    .services-track {
      display: flex;
      gap: 24px;
      width: max-content;
      animation: servicesMove 28s linear infinite;
    }

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

    @keyframes servicesMove {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    /* ===================== CARTES ===================== */
    .real-card {
      width: 385px;
      height: 270px;
      flex-shrink: 0;
      border-radius: 16px;
      padding: 42px 34px;
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    }

    .real-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 28px 55px rgba(0, 0, 0, 0.2);
    }

    .real-card::after {
      content: "";
      position: absolute;
      right: -40px;
      top: 0;
      width: 190px;
      height: 100%;
      background: linear-gradient(135deg,
          transparent,
          rgba(255, 255, 255, 0.16));
      transform: skewX(-18deg);
    }

    .real-card h3 {
      font-family: var(--font-head);
      font-size: 28px;
      line-height: 1.05;
      max-width: 250px;
      margin-bottom: 18px;
      position: relative;
      z-index: 2;
    }

    .real-card p {
      font-size: 16px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.72);
      max-width: 250px;
      position: relative;
      z-index: 2;
    }

    .real-card a {
      position: absolute;
      left: 34px;
      bottom: 30px;
      background: var(--violet);
      color: #fff;
      padding: 10px 20px;
      border-radius: 50px;
      text-decoration: none;
      font-size: 12px;
      font-weight: 700;
      z-index: 3;
      isolation: isolate;
      transition: color 0.3s ease;
    }

    .real-card a::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50px;
      background: #ffffff;
      z-index: -1;
      clip-path: inset(0 100% 0 0 round 50px);
      transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .real-card a:hover {
      color: black;
    }

    .real-card a:hover::before {
      clip-path: inset(0 0% 0 0 round 50px);
    }

    .card-1 {
      background: linear-gradient(135deg, #08101d, #15115a), url('');
    }

    .card-2 {
      background: linear-gradient(135deg, #09071d, #5440e4);
    }

    .card-3 {
      background: linear-gradient(135deg, #10131e, #26364a);
    }

    .card-4 {
      background: linear-gradient(135deg, #050505, #1a1a1a);
    }

    /* ===================== FLÈCHES SLIDER ===================== */
    .slider-arrows {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 20px;
    }

    .slide-arrow {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 2px solid rgba(84, 64, 228, 0.35);
      background: #fff;
      color: #5440e4;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      isolation: isolate;
      position: relative;
      transition:
        color 0.35s ease,
        border-color 0.35s ease;
    }

    .slide-arrow::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: linear-gradient(90deg, #5440e4 0%, #00a3ff 100%);
      z-index: -1;
      clip-path: inset(0 100% 0 0 round 50%);
      transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .slide-arrow:hover {
      color: #fff;
      border-color: #5440e4;
    }

    .slide-arrow:hover::before {
      clip-path: inset(0 0% 0 0 round 50%);
    }

    .slide-arrow:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .slide-arrow:disabled::before {
      display: none;
    }

    /* ===================== À PROPOS ===================== */
    .about-preview {
      padding: 90px 6% 0;
      background: #06122a;
      color: #fff;
      position: relative;
      overflow: visible;
    }

    .about-preview::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 15%, rgb(5 4 4), #060030 34%),
        radial-gradient(circle at 88% 20%,
          rgba(0, 163, 255, 0.18),
          transparent 30%),
        linear-gradient(180deg, #020817 0%, #06122a 100%);
      z-index: 0;
    }

    .about-preview>* {
      position: relative;
      z-index: 1;
    }

    .about-top {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 45px;
      align-items: center;
      margin-bottom: 42px;
    }

    .about-symbol-box {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .about-symbol-box img {
      width: 89%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 18px 35px rgba(0, 0, 0, 0.35));
    }

    .about-title h2 {
      font-family: var(--font-head);
      font-size: clamp(38px, 5vw, 54px);
      line-height: 1.02;
      margin-top: 18px;
      margin-bottom: 18px;
    }

    .about-title h2 span {
      color: #6d5cff;
    }

    .about-title p {
      color: rgba(255, 255, 255, 0.78);
      font-size: 18px;
      line-height: 1.75;
      max-width: 720px;
    }

    .about-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      padding-top: 42px;
      padding-bottom: 44px;
    }

    .about-card {
      box-shadow: 0 20px 55px rgb(255 255 255 / 17%);
      min-height: 190px;
      border-radius: 22px;
      padding: 55px 24px 24px;
      text-align: center;

      text-decoration: none;
      color: #fff;
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.06);
      transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
    }

    .about-card:hover {
      transform: translateY(-7px);
      border-color: rgba(0, 163, 255, 0.75);
      background: white;
      color: rgba(0, 0, 0, 0.932);
    }
  .about-card:hover p{
    color: rgb(0 0 0 / 88%);
  }
    .about-card img {
      width: 95px;
      height: 95px;
      border-radius: 22px;
      padding: 14px;
      object-fit: contain;
      position: absolute;
      top: -63px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #ffffff, #eceaff);
      box-shadow: 0 18px 35px rgba(0, 0, 0, .25);
      border: 1px solid rgba(255, 255, 255, .45);
    }

    .about-card h3 {
      font-family: var(--font-head);
      font-size: 25px;
      margin-bottom: 10px;
    }

    .about-card p {
      color: rgba(255, 255, 255, 0.72);
      font-size: 14px;
      line-height: 1.55;
      margin-bottom: 10px;
    }

    .about-card .card-arrow {
      text-align: -webkit-right;
      color: white;
    }

    .about-stats {
      width: 92%;
      margin: 0 auto;
      transform: translateY(50%);
      background: #fff;
      color: #05040f;
      border-radius: 16px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      overflow: hidden;
    }

    .stat-item {
      padding: 28px 24px;
      display: flex;
      align-items: center;
      gap: 18px;
      border-right: 1px solid #e8e8ef;
    }

    .stat-item .counter {
      color: black !important;
      font-size: 35px !important;
    }

    .stat-item:last-child {
      border-right: none;
    }

    .stat-item i {
      color: var(--violet);
      font-size: 30px;
    }

    .stat-item strong {
      display: flex;
      font-size: 30px;
      line-height: 1;
    }

    .stat-item span {
      display: block;
      color: #555;
      font-size: 13px;
      margin-top: 6px;
    }

    .about-detail {
      padding: 125px 6% 80px;
      background: #f8f7ff;
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .detail-box {
      background: #fff;
      padding: 30px;
      border-radius: 18px;
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
      border: 1px solid rgba(84, 64, 228, 0.09);
    }

    .detail-box h3 {
      font-family: var(--font-head);
      font-size: 27px;
      color: #05040f;
      margin-bottom: 14px;
    }

    .detail-box p {
      color: #555;
      line-height: 1.65;
    }

    .contact-band {
      padding: 60px 5%;
      background: #fff;
    }

    .contact-card {
      border-radius: 28px;
      padding: 50px;
      background-image: url("https://mediazain-new.servermdz.com/wp-content/themes/thememediazain/ChatGPT Image 5 juin 2026, 12_03_59.png");
      object-fit: cover;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      overflow: hidden;
      position: relative;
    }

    /* .contact-card::after {
        content: "";
        position: absolute;
        right: -90px;
        top: -90px;
        width: 260px;
        height: 260px;
        background: radial-gradient(
          circle,
          rgba(0, 163, 255, 0.42),
          transparent 65%
        );
      } */

    .contact-card h2 {
      font-family: var(--font-head);
      font-size: clamp(34px, 4vw, 49px);
      line-height: 1.05;
      margin-bottom: 12px;
      margin-top: 8px;
    }

    .contact-card p {
      color: rgba(255, 255, 255, 0.75);
      font-size: 17px;
    }

    /* ===================== FAQ ===================== */
    .faq-section {
      padding: 95px 6% 70px;
      background: rgb(84 64 228 / 10%);
      position: relative;
      overflow: hidden;
    }

    .faq-bg-symbol {
      position: relative;
      right: -11px;
      top: 28px;
      width: 168px;
      /* opacity: 0.95; */
      /* filter: drop-shadow(0 24px 34px rgba(84, 64, 228, 0.18)); */
      pointer-events: none;
    }

    .faq-head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 45px;
    }

    .faq-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 16px;
      border-radius: 999px;
      color: var(--violet);
      font-size: 17px;
      font-weight: 900;
      margin-bottom: 16px;
    }

    .faq-head h2 {
      font-family: var(--font-head);
      font-size: clamp(38px, 5vw, 56px);
      line-height: 1.05;
      color: #05040f;
      margin-bottom: 16px;
    }

    .faq-head h2 span {
      color: var(--violet);
    }

    .faq-head p {
      color: #5d6478;
      font-size: 17px;
      line-height: 1.7;
    }

    .faq-layout {
      max-width: 1780px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.9fr 2.6fr;
      gap: 28px;
      align-items: stretch;
    }

    .faq-contact-box {
      background: rgba(255, 255, 255, 0.84);
      border: 1px solid rgba(84, 64, 228, 0.12);
      border-radius: 18px;
      box-shadow: 0 20px 55px rgba(5, 4, 15, 0.08);
      padding: 34px 30px 41px;
      overflow: hidden;
    }

    .faq-contact-icon,
    .faq-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: rgba(84, 64, 228, 0.08);
      color: var(--violet);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: inset 0 0 0 1px rgba(84, 64, 228, 0.08);
    }

    .faq-contact-box h3 {
      font-family: var(--font-head);
      color: #05040f;
      font-size: 28px;
      line-height: 1.2;
      margin: 26px 0 14px;
    }

    .faq-contact-box h3 span {
      color: var(--violet);
    }

    .faq-contact-box p {
      color: #5d6478;
      font-size: 15px;
      line-height: 1.65;
      margin-bottom: 22px;
    }

    .faq-contact-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 44px;
      width: 100%;
      border-radius: 10px;
      background: linear-gradient(90deg, #5440e4, #b21cff);
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 12px 24px rgba(84, 64, 228, 0.24);
    }

    .faq-contact-visual {
      height: 205px;
      margin-top: 28px;
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
    .faq-laptop {
      width: 230px;
      height: 120px;
      border-radius: 12px 12px 7px 7px;
      position: relative;
    }

 .faq-laptop-img  img{
      max-width: 350px;
    height: auto;
 }
    .faq-laptop img {
      position: absolute;
      width: 42px;
      top: 40px;
      left: 50%;
      transform: translateX(-50%);
    }


    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .faq-item {
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(84, 64, 228, 0.11);
      border-radius: 14px;
      box-shadow: 0 14px 36px rgba(5, 4, 15, 0.06);
      overflow: hidden;
      transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
    }

    .faq-item.active {
      border-color: rgba(84, 64, 228, 0.28);
      box-shadow: 0 18px 42px rgba(84, 64, 228, 0.12);
    }

    .faq-question {
      width: 100%;
      min-height: 68px;
      padding: 18px 22px;
      border: 0;
      background: transparent;
      display: grid;
      grid-template-columns: 54px 1fr 40px;
      gap: 16px;
      align-items: center;
      text-align: left;
      cursor: pointer;
      font-family: var(--font-body);
      color: #05040fe8;
      font-size: 17px;
      font-weight: 700;
    }

    .faq-toggle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(84, 64, 228, 0.08);
      color: var(--violet);
      display: flex;
      align-items: center;
      justify-content: center;
      transition:
        transform 0.25s ease,
        background 0.25s ease;
    }

    .faq-item.active .faq-toggle {
      transform: rotate(45deg);
      background: linear-gradient(135deg, #5440e4, #9b28ff);
      color: #fff;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .faq-answer p {
      padding: 0 78px 24px 92px;
      color: #5d6478;
      line-height: 1.7;
      font-size: 15px;
    }

    .faq-benefits {
      max-width: 1780px;
      margin: 32px auto 0;
      background-image: url("https://mediazain-new.servermdz.com/wp-content/themes/thememediazain/ChatGPT Image 5 juin 2026, 12_03_59.png");
      border: 1px solid rgba(84, 64, 228, 0.1);
      border-radius: 18px;
      box-shadow: 0 20px 55px rgba(5, 4, 15, 0.07);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      overflow: hidden;
    }

    .faq-benefit {
      padding: 22px 24px;
      display: flex;
      gap: 16px;
      align-items: center;
      border-right: 1px solid rgba(84, 64, 228, 0.12);
    }

    .faq-benefit:last-child {
      border-right: 0;
    }

    .faq-benefit i {
      width: 46px;
      height: 46px;
      flex: 0 0 46px;
      border-radius: 50%;
      background: rgb(255 255 255);
      color: var(--violet);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .faq-benefit strong {
      display: block;
      color: white;
      font-size: 14px;
      margin-bottom: 5px;
    }

    .faq-benefit span {
      display: block;
      color: white;
      font-size: 12px;
      line-height: 1.45;
    }



    /* ===================== CONTACT PAGE SECTION ===================== */
    .contact-page-section {
      padding: 95px 6% 85px;
      /* background:
          radial-gradient(circle at 12% 12%, rgba(84, 64, 228, 0.20), transparent 32%),
          radial-gradient(circle at 86% 18%, rgba(0, 163, 255, 0.16), transparent 30%),
          linear-gradient(135deg, #05040f 0%, #0b0828 45%, #f8f7ff 45.2%, #ffffff 100%); */
      position: relative;
      overflow: hidden;
    }

    .contact-page-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(120deg, transparent 0%, rgba(84, 64, 228, 0.10) 55%, transparent 100%);
      background-size: 26px 26px, 100% 100%;
      opacity: 0.35;
      pointer-events: none;
    }

    .contact-page-wrap {
      max-width: 1380px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .contact-page-head {
      text-align: center;
      margin-bottom: 38px;
      display: none;
    }

    .contact-page-head .mini-logo-services {
      justify-content: center;
    }

    .contact-page-head h2 {
      font-family: var(--font-head);
      font-size: clamp(38px, 5vw, 58px);
      line-height: 1.05;
      color: #05040f;
      margin-top: 16px;
      margin-bottom: 14px;
    }

    .contact-page-head h2 span {
      color: #8e59ff;
    }

    .contact-page-head p {
      max-width: 680px;
      margin: 0 auto;
      color: #5d6478;
      font-size: 17px;
      line-height: 1.7;
    }

    .contact-page-grid {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 28px;
      align-items: stretch;
    }

    .contact-info-panel,
    .contact-form-panel,
    .contact-map-panel {
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 28px;
      box-shadow: 0 30px 80px rgba(5, 4, 15, 0.16);
      overflow: hidden;
    }

    .contact-info-panel {
      padding: 42px 34px;
      border: 1px solid #00000096;
      color: #fff;
      background-image: linear-gradient(90deg,
          rgba(2, 1, 7, 0.97) 0%,
          rgba(2, 1, 7, 0.78) 28%,
          rgba(2, 1, 7, 0.32) 55%,
          rgba(2, 1, 7, 0) 100%),
        url("https://mediazain-new.servermdz.com/wp-content/themes/thememediazain/Calque 7x S1.png");
      background-size: cover;
      position: relative;
    }

    /* .contact-info-panel::after {
        content: "";
        position: absolute;
        right: -80px;
        bottom: -80px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0, 163, 255, 0.38), transparent 68%);
      } */

    .contact-info-panel h3 {
      font-family: var(--font-head);
      font-size: 34px;
      line-height: 1.1;
      margin: 18px 0 14px;
      position: relative;
      z-index: 1;
    }

    .contact-info-panel p {
      color: white;
      line-height: 1.7;
      margin-bottom: 26px;
      position: relative;
      z-index: 1;
      max-width: 395px;
    }

    .contact-info-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      z-index: 1;
    }

    .contact-info-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 16px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.10);
    }

    .contact-info-item i {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      border-radius: 50%;
      background: #41258a;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
    }

    .contact-info-item strong {
      display: block;
      font-size: 15px;
      margin-bottom: 5px;
    }

    .contact-info-item span,
    .contact-info-item a {
      color: white;
      text-decoration: none;
      font-size: 14px;
      line-height: 1.45;
    }

    .contact-socials {
      display: flex;
      gap: 12px;
      margin-top: 26px;
      position: relative;
      z-index: 1;
    }

    .contact-socials a {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.08);
      transition: transform 0.3s ease, background 0.3s ease;
    }

    .contact-socials a:hover {
      transform: translateY(-4px);
      background: linear-gradient(135deg, #5440e4, #b21cff);
    }

    .contact-form-panel {
      padding: 42px;
      background: rgba(255, 255, 255, 0.94);
      border-color: rgba(84, 64, 228, 0.12);
    }

    .contact-form-panel h3 {
      font-family: var(--font-head);
      color: #05040f;
      font-size: clamp(38px, 5vw, 50px);
      line-height: 1.1;
      margin-bottom: 12px;
    }

    .contact-form-panel h3 span {
      color: var(--violet);
    }

    .contact-form-panel p {
      color: #5d6478;
      line-height: 1.65;
      margin-bottom: 26px;
    }

    .contact-form {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .form-group {
      position: relative;
    }

    .form-group.full {
      grid-column: 1 / -1;
    }

    .form-group label {
      display: block;
      color: #252338;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      border: 1px solid rgba(84, 64, 228, 0.16);
      border-radius: 14px;
      background: #fff;
      color: #05040f;
      font-family: var(--font-body);
      font-size: 14px;
      padding: 15px 16px;
      outline: none;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 135px;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      border-color: var(--violet);
      box-shadow: 0 0 0 4px rgba(84, 64, 228, 0.10);
    }

    .contact-submit {
      grid-column: 1 / -1;
      border: none;
      cursor: pointer;
      height: 54px;
      border-radius: 14px;
      background: linear-gradient(90deg, #5440e4, #b21cff);
      color: #fff;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 900;
      box-shadow: 0 16px 30px rgba(84, 64, 228, 0.25);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .contact-submit:hover {
      transform: translateY(-3px);
      box-shadow: 0 22px 40px rgba(84, 64, 228, 0.32);
    }

    .contact-map-panel {
      margin-top: 28px;
      height: 360px;
      background: #fff;
      border-color: rgba(84, 64, 228, 0.12);
    }

    .contact-map-panel iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    @media (max-width: 1000px) {
      .contact-page-section {
        background:
          radial-gradient(circle at 12% 12%, rgba(84, 64, 228, 0.20), transparent 32%),
          linear-gradient(180deg, #05040f 0%, #0b0828 44%, #f8f7ff 44.2%, #ffffff 100%);
      }

      .contact-page-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 650px) {
      .contact-page-section {
        padding: 70px 5%;
      }

      .contact-form-panel,
      .contact-info-panel {
        padding: 30px 22px;
      }

      .contact-form {
        grid-template-columns: 1fr;
      }

      .contact-map-panel {
        height: 300px;
      }
    }

    /* ===================== RESPONSIVE ===================== */
    @media (max-width: 900px) {
      .nav-links {
        display: none;
      }

      .hero {
        background-size:
          100% 100%,
          cover;
        background-position:
          center,
          right center;
      }

      .hero-marquee {
        top: 85px;
      }

      .hero-content {
        align-items: flex-start;
        padding-top: 140px;
      }

      .hero-text {
        width: 100%;
      }

      .hero-text h1 {
        font-size: 44px;
      }

      .hero-text p {
        font-size: 17px;
      }

      .services-head {
        flex-direction: column;
        align-items: flex-start;
      }

      .green-btn {
        height: 48px;
        padding: 0 55px 0 22px;
      }

      .real-card {
        width: 310px;
        height: 240px;
      }
    }

    @media (max-width: 1000px) {

      .about-top,
      .detail-grid,
      .faq-layout {
        grid-template-columns: 1fr;
      }

      .about-cards,
      .about-stats,
      .faq-benefits {
        grid-template-columns: repeat(2, 1fr);
      }

      .contact-card {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (max-width: 650px) {

      .about-cards,
      .about-stats,
      .faq-benefits {
        grid-template-columns: 1fr;
      }

      .stat-item {
        border-right: none;
        border-bottom: 1px solid #e8e8ef;
      }

      .contact-card {
        padding: 34px 24px;
      }

      .about-symbol-box {
        min-height: 240px;
      }

      .faq-question {
        grid-template-columns: 44px 1fr 34px;
        gap: 10px;
        font-size: 15px;
        padding: 15px;
      }

      .faq-answer p {
        padding: 0 18px 22px 70px;
      }

      .faq-benefit {
        border-right: 0;
        border-bottom: 1px solid rgba(84, 64, 228, 0.12);
      }

      .faq-bg-symbol {
        width: 145px;
        left: -40px;
      }
    }


    /* ================= MEGA MENU SERVICES ================= */

    .has-mega {
      position: static !important;
    }


    .mega-menu {

      position: absolute;

      top: 75px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);

      width: 85vw;
      max-width: 1400px;

      background:
        white;

      border-radius: 28px;

      padding: 35px;

      border: 1px solid rgba(255, 255, 255, .12);

      box-shadow:
        0 40px 100px rgba(0, 0, 0, .45);

      backdrop-filter: blur(25px);


      opacity: 0;
      visibility: hidden;

      transition: .35s ease;

      z-index: 100;

    }



    .has-mega:hover .mega-menu {

      opacity: 1;

      visibility: visible;

      transform: translateX(-50%) translateY(0);

    }



    /* HEADER */

    .mega-header {

      text-align: center;

      margin-bottom: 30px;

    }


    .mega-header span {

      font-size: 13px;

      font-weight: 900;

      letter-spacing: 2px;

      color: #8f7cff;

    }


    .mega-header h3 {

      font-size: 30px;

      margin-top: 8px;

      color: #000000;

      font-family: var(--font-head);

    }



    /* GRID */


    .mega-content {

      display: grid;

      grid-template-columns: repeat(6, 1fr);

      gap: 25px;

    }



    /* COL */


    .mega-col {

      padding-right: 20px;

      border-right: 1px solid rgb(0 0 0 / 12%);

    }


    .mega-col:last-child {

      border: none;

    }



    .mega-col h4 {

      height: 55px;

      color: #8f7cff;

      font-size: 18px;

      display: flex;

      align-items: center;

      gap: 10px;

      justify-content: center;

    }


    .mega-col h4 i {

      width: 38px;
      height: 38px;

      border-radius: 12px;

      background:
        linear-gradient(135deg, #5440e4, #00a3ff);

      display: none;
      align-items: center;
      justify-content: center;

    }



    /* LINKS */

    .mega-col a {

      display: block;

      padding: 12px;

      border-radius: 14px;

      color: rgb(0, 0, 0);

      font-weight: 700;

      font-size: 14px;

      text-decoration: none;

      transition: .3s;

    }


    .mega-col a small {

      display: none;

      margin-top: 5px;

      font-size: 12px;

      font-weight: 400;

      color: rgb(0, 0, 0);

      line-height: 1.4;

    }



    .mega-col a:hover {

      background: rgba(255, 255, 255, .10);

      transform: translateX(6px);

    }


    /* RESPONSIVE */

    @media(max-width:1100px) {

      .mega-content {

        grid-template-columns: repeat(3, 1fr);

      }


    }


    @media(max-width:700px) {

      .mega-menu {

        display: none;

      }

    }

    /* ===================== FOOTER MODERNE ===================== */
    .site-footer {
      position: relative;
      overflow: hidden;
      padding: 78px 6% 28px;
      color: #fff;
      background:
        white;
    }

    .site-footer::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: .18;
    }

    .footer-wrap {
      position: relative;
      z-index: 1;
      max-width: 1480px;
      margin: 0 auto;
    }

    .footer-newsletter {
display: grid;
    grid-template-columns: 2.1fr 0.9fr;
    gap: 28px;
    align-items: center;
    margin: 0 16px 0;
    border-radius: 97px 0 97px 0;
    border: 1px solid rgba(255, 255, 255, .14);
      backdrop-filter: blur(18px);
    /* margin-bottom: 48px; */
    padding: 50px 88px;
            background-image: url("https://mediazain-new.servermdz.com/wp-content/themes/thememediazain/ChatGPT Image 5 juin 2026, 12_03_59.png");

    }

    .footer-newsletter h2 {
      font-family: var(--font-head);
      font-size: clamp(34px, 4vw, 52px);
      line-height: 1.05;
      margin: 10px 0 8px;
          color: white;
    }

    .footer-newsletter h2 span {
      color: #8f7cff;
    }

    .footer-newsletter p {
      max-width: 660px;
      color: rgb(255 255 255 / 94%);
      line-height: 1.7;
    }

    .newsletter-form {
      display: flex;
      gap: 10px;
      padding: 0;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    }

    .newsletter-form input {
      flex: 1;
      border: 0;
      outline: 0;
      min-width: 0;
      padding: 0 18px;
      font-family: var(--font-body);
      font-weight: 700;
      color: #05040f;
      border-radius: 50px;
    }

    .newsletter-form button {
      border: 0;
      cursor: pointer;
      padding: 15px 22px;
      border-radius: 999px;
      background: linear-gradient(90deg, #5440e4, #b21cff);
      color: #fff;
      font-weight: 900;
      font-family: var(--font-body);
      white-space: nowrap;
      justify-content: space-around;
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr .8fr .8fr 1fr;
      gap: 34px;
      padding-bottom: 35px;
    }

    .footer-brand img {
      /* width: 170px; */
      max-width: 100%;
      margin-bottom: 18px;
    }

    .footer-brand p,
    .footer-contact li,
    .footer-links a {
      color: rgb(0 0 0 / 72%);
      line-height: 1.7;
    }

    .footer-col h3 {
      font-family: var(--font-head);
      font-size: 24px;
          color: rgb(0 0 0 / 72%);
      margin-bottom: 18px;
    }

    .footer-links,
    .footer-contact {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-links a {
      text-decoration: none;
      transition: color .25s ease, transform .25s ease;
    }

    .footer-links a:hover {
      color: rgb(108 23 209);
      transform: translateX(4px);
    }

    .footer-contact li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .footer-contact i {
      color: rgb(108 23 209);
      margin-top: 6px;
    }

    .footer-socials {
      display: flex;
      gap: 12px;
      margin-top: 22px;
    }

    .footer-socials a {
      width: 43px;
      height: 43px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .13);
      transition: transform .25s ease, background .25s ease;
    }

    .footer-socials a:hover {
      transform: translateY(-4px);
      background: linear-gradient(135deg, #5440e4, #b21cff);
    }

    .footer-bottom {
      display: flex;
      justify-content: center;
      gap: 18px;
      align-items: center;
      padding-top: 22px;
      border-top: 1px solid rgb(0 0 0 / 12%);
      color: rgb(0 0 0 / 72%);
      font-size: 14px;
    }

    .footer-bottom a {
      color: rgba(255, 255, 255, .72);
      text-decoration: none;
      margin-left: 18px;
    }

    @media (max-width: 1100px) {

      .footer-newsletter,
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 900px) {
      .submenu {
        display: none;
      }
    }

    @media (max-width: 700px) {

      .footer-newsletter,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .newsletter-form {
        border-radius: 20px;
        flex-direction: column;
      }

      .newsletter-form input {
        min-height: 48px;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .footer-bottom a {
        margin: 0 14px 0 0;
      }
    }