/***************************
Add your custom styles below
****************************/


@font-face {
  font-family: "iconsmind";
  src: url("../fonts/iconsmind.woff") format("woff"),
       url("../fonts/iconsmind.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


[class^="icon-"],
[class*=" icon-"] {
  font-family: "iconsmind";
  speak: none;
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




/*Mobile */
@media (max-width: 767px){
.cover-8 form input {
    margin-bottom: 16px;
}}

@media (max-width: 767px){
.imagebg:not(.image--light) h1, .imagebg:not(.image--light) h2, .imagebg:not(.image--light) h3, .imagebg:not(.image--light) h4, .imagebg:not(.image--light) h5, .imagebg:not(.image--light) h6, .imagebg:not(.image--light) p, .imagebg:not(.image--light) ul, .imagebg:not(.image--light) blockquote {
    color: #343434;
}

}

@media (max-width: 767px){
h3 > span {
    color: #343434 !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;

}}
@media (max-width: 767px){
.nav-bar.nav--fixed {
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 999;
  top: 0;
}
}

/* @media (max-width: 767px){
#img-mobile{
background-color: #fff !important;
background-image: none !important;
display: none !important;

}} */

@media (max-width: 767px){
.btn__text {
    font-size: 0.8em !important;
    font-weight: 600 !important;
}}

@media (min-width: 1024px) {
.btn__text{
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
}}


h3 span {
font-weight: 600;
letter-spacing: 2px;
}


.icons-description {
	margin-bottom:1em;
	width: 35%;
}

.h6 {
	font-size: 12px !important;
	font-weight: 600 !important;
	/*text-transform: none;*/
}


h5 {
	margin-bottom: 1em;
/*	text-transform: uppercase;*/
}

h5 span {
	font-weight: 600;
	color: #343434 !important;
	text-transform: none;
  font-size: 20px;
	/*text-transform: uppercase;*/
}

.custom-section {
	padding-bottom: 0em;
}

.custom-card {
	border-radius: 0 0 8px 8px !important;
}

.custom-card-img {
	border-radius: 8px 8px 0 0 !important;
}


@media (max-width: 990px) {

.custom-card-body {
	border-radius: 0 0 8px 8px !important;
	height:360px;
	margin-bottom: 64px !important;
}
}

@media (max-width: 767px){

.custom-card-body {
    border-radius: 0 0 8px 8px !important;
    height:unset;
    margin-bottom: 64px !important;
}
}

.custom-card-body hr {
  margin-top: 30px;
}

@media (max-width: 767px){
.cover-8 form input {
    margin-bottom: 16px;
}}


.testimonial-img {
	border-radius: 50%;
}

.testimonial {
	border-radius: 16px;
}

 #page-wrap { 

}

.menu > li {
    position: relative;
    float: left;
    font-size: inherit !important;
    font-weight: 400;
    letter-spacing: 0px;
    font-family: 'Montserrat', 'Helvetica', 'Arial', sans-serif;
}

.menu > li a {
    color: #343434;
    text-transform: none;
    letter-spacing: 1px;
    font-weight: 500;
    transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
}

.menu > li > a {
	font-size: 0.9em;
    padding: 0.1em 1.4em;
    height: 100%;
    display: inline-block;
}

.menu > li > a:hover {
	font-weight: 500;
	color: #000000 !important;

}

/* move the first menu item slightly left so it lines up
   with the H1 inside the hero container */
.menu > li:first-child a {
    /* remove most of the default padding on the left */
    padding-left: 0;
    /* nudge the link farther left past the menu-module padding
       because the logo takes up space before the heading */
    margin-left: -1em;
    position: relative;
    /* tweak this value as needed if the heading alignment isn't
       perfect; negative/positive adjustments move the link
       horizontally. */
}

.nav-bar {
	   box-shadow: 0 4px 20px 0 rgb(0 0 0 / 10%) !important;
} 

/* user wants logo max-height 34% */
.nav-bar .logo {
    max-height: 34% !important;
    margin: 0 !important;
}

/* reduce nav-module horizontal padding */
.nav-bar .nav-module {
    display: inline-block;
    height: 65px;
    padding: 0 1em !important;
}



.pricing-4  {
  border-radius: 16px !important;
}

.pricing-price  {
  border-radius: 16px !important;
}

 .space-bottom {
    margin-bottom: 2.2608695652174em;
}

 .space-top {
    margin-top: 1.2608695652174em;
}

 .bigspace-botom {
    margin-bottom: 4.2608695652174em;
}

 .bigspace-top {
    margin-top: 4.2608695652174em;
     
}




figure.image-with-caption {
    margin-bottom:64px;
    margin-top:64px;
}

section[aria-labelledby] {

    padding-bottom: 0px !important;
    padding-top: 16px !important;
}

/* CTA */
.btn-primary {
  display: inline-flex;
  align-items: center;
}

/* Reassurance wrapper */
.reassurance {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 62px;
}

/* Icon containers (this bypasses SVG internal width/height) */
.reassurance-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Force SVG/img to fill container */
.reassurance-icon img,
.reassurance-icon svg {
  height: 40px !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}

/* Divider */
.reassurance .divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.35);
}



/* === HERO IMAGE === */
.background-image-holder {
  position: absolute;
  inset: 0;
  background: url("img/egypte/re-sized/bg-home.png") center center no-repeat;
  background-size: 90% auto; /* réduction homogène par les côtés */
  z-index: 0;
}

.background-image-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    /* Dégradé vertical bas (inchangé / très léger) */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 53%,
      rgba(0, 0, 0, 0.42) 79%, /* très léger ajustement */
      rgba(0, 0, 0, 0) 100%
    ),

    /* Dégradé horizontal soft (beaucoup plus light) */
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.16) 0%,   /* était ~0.24 */
      rgba(0, 0, 0, 0) 65%
    ),

    /* Dégradé horizontal fort (fortement détendu) */
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.28) 0%,   /* était ~0.43 */
      rgba(0, 0, 0, 0) 45%
    );
}
/* ===== MOBILE HERO + RÉASSURANCE ===== */
@media (max-width: 767px){


  /* HERO */
  /* #hero{
    min-height: 100vh;
  } */

  .background-image-holder{
    background-size: cover;
    background-position: center top;
  }

  /* TYPO */
  #hero h1{
    font-size: 30px;
    line-height: 42px;
    color: #fff;
  }

  #hero p{
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    width: 100%;
  }

  /* RÉASSURANCE */
  .reassurance{
    gap: 16px;
    margin-top: 48px;
  }

  .reassurance img{
    width: 128px;
    transform: none;
  }

  .reassurance img:nth-of-type(3),
  .reassurance .divider:nth-of-type(2){
    display: none;
  }

  .reassurance .divider{
    height: 28px;
    margin: 0 8px;
  }
}

/* ===== HERO DESKTOP (typo) ===== */
#hero p{
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  max-width: 461px;
}

/* ===== HERO MOBILE : CONTRASTE TEXTE ===== */
@media (max-width: 767px){

  /* Overlay sombre (remplace l'ancien overlay blanc/0) */
  #hero[data-overlay]::before{
    background: #000 !important;
    opacity: .55 !important;
  }

  /* Dégradé plus sombre derrière le texte */
  #hero .background-image-holder::after{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,.60) 100%
      ) !important;
  }

  /* Forcer le blanc sur le hero (neutralise .imagebg -> #343434) */
  #hero.imagebg h1,
  #hero.imagebg p{
    color: #fff !important;
  }
}



/* Section 1 */

/* SECTION 1 */
.s1{
  background:#F6F7F7;
  padding:100px 0 !important;
}

.s1-title{
  margin:0 0 18px;
  font-size:44px;
  line-height:52px;
  font-weight:700;
  color:#111;
}

.s1-text{
  margin:0 0 38px;
  font-size:16px;
  line-height:26px;
  color:#3D4A5C;
  max-width:520px;
}

.s1-polaroid{
  padding:18px;
  width:100%;
  max-width:520px;
  margin-left:auto;
}

.s1-polaroid img{
  display:block;
  width:100%;
  height:auto;
}

.s1-fact{
  margin-bottom:26px;
}

.s1-fact-inner{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.s1-ico{
  width:28px;
  height: 28px;
  flex:0 0 22px;
}

.s1-fact-title{
  font-weight:700;
  color:#111;
  line-height:20px;
}

.s1-fact-sub{
  margin-top:6px;
  color:#3D4A5C;
  line-height:20px;
}

/* Mobile */
@media (max-width:767px){
  .s1{ padding:72px 0; }
  .s1-polaroid{ margin:0 auto 0px; transform:rotate(-2.5deg); }
  .s1-title{ font-size:36px; line-height:44px; }
  .s1-text{ font-size:18px; line-height:30px; }
}


/* ===== SECTION 1 · ESPACEMENTS ===== */

/* Desktop */
.s1-title{
  margin-bottom: 32px; /* Titre → paragraphe */
}

.s1-text{
  margin-bottom: 64px; /* Paragraphe → blocs infos */
}

.s1-fact{
  margin-bottom: 64px; /* Espace vertical entre lignes d’infos */
}

/* Supprime le margin du dernier item */
.s1-fact:last-child{
  margin-bottom: 0;
}

/* Mobile */
@media (max-width: 767px){
  .s1-title{
    margin-bottom: 24px;
  }

  .s1-text{
    margin-bottom: 48px;
  }

  .s1-fact{
    margin-bottom: 48px;
  }
}



/* SECTION 1 · ORDER (desktop texte/photo, mobile photo/texte) */
.s1-row{
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 768px){
  .s1-textcol{ order: 1; }
  .s1-imgcol{ order: 2; }
}

@media (max-width: 767px){
  .s1-imgcol{ order: 1; }
  .s1-textcol{ order: 2; }
}
/* ==================
   SECTION 2 · DESTINATIONS
================== */

:root{
  --s2-bg: #F6F7F7;
  --s2-title: #111;
  --s2-text: #3D4A5C;
  --s2-gap: 26px;
  --s2-card-w: 360px;
  --s2-card-ratio: 129.02%; /* 449/348 */
  --s2-radius: 14px;
  --s2-shadow: 0 18px 48px rgba(0,0,0,.14);
  --s2-overlay: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
}

.s2{
  background: var(--s2-bg);
  padding: 100px 0 !important;
}

.s2-head{ margin-bottom: 56px; }

.s2-title{
  margin: 0;
  font-size: 44px;
  line-height: 52px;
  font-weight: 700;
  color: var(--s2-title);
}

.s2-lead{
  margin: 10px 0 0 0;
  max-width: 418px;
  font-size: 16px;
  line-height: 26px;
  color: var(--s2-text);
}

/* --- Cards layout (Bootstrap float override only inside s2) --- */
.s2-cards{ margin-top: 0; }

@media (min-width: 768px){
  .s2-cards{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--s2-gap);
    margin-left: 0;
    margin-right: 0;
    
  }

  .s2-cards > [class*="col-"]{
    float: none;
    width: auto;
    flex: 0 0 var(--s2-card-w);
    max-width: var(--s2-card-w);
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 767px){
  .s2{ padding: 72px 0; }
  .s2-head{ margin-bottom: 28px; }
  .s2-title{ font-size: 36px; line-height: 44px; }
  .s2-lead{ margin-top: 18px; font-size: 20px; line-height: 30px; }
  .s2-cards > [class*="col-"]{
    float: none;
    width: 100%;
    
  }
.s2-card{
      height: 300px;
}
}

/* --- Card component (size via ratio, not fixed height) --- */
.s2-card{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--s2-radius);
  box-shadow: var(--s2-shadow);
  margin-bottom: 32px;
}

.s2-card::before{
  content: "";
  display: block;
  padding-top: var(--s2-card-ratio);
}

.s2-card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25); /* léger zoom “Figma”, ajuste si besoin */
}

.s2-card__overlay{
  position: absolute;
  inset: 0;
  background: var(--s2-overlay);
}

.s2-card__content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 22px 20px 22px;
  color: #fff;
}

.s2-card__place{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}

.s2-card__desc{
  margin-top: 6px;
  font-size: 16px;
  line-height: 22px;
  opacity: .92;
}

/* Pin icon (base64) */
.s2-pin{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAsCAYAAAANUxr1AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALGSURBVHgBxViNdaMwDBaZgBG8wbHBscFlg7JBcxM0GzQb0Jsg3YB2gnITmA1yG+jsYl4V2ZbNT9LvPT0IlsQnyTZyCpgJRKzN5aeRyokiw4OT3si7kbeiKP7B1jAkSiNPRi44H60RBVvBOHtcSGQRsUIgosylNVIHhm0Z3oz8hbFEE0oYy2hLqgJ2Vve3KeMrzIEhUxnRgSg7HOdQro+XSLaeIBc2M4ES6VwiEX8vi0g5Y80MrbMSVsL4OARIPaSMPpjBETaEKyPNvr1XMeVHRuYEN4Dx27D3dCElXiq9RZkEUidGquYKB1Eh7LQ2ciYlsNfOZUAlbEuWgI4rxAd9Z8q9WIL1t0/4CSfBRUqxT5DRmI8HkLNEJ/hpGjiShxeQo+Kr8OLsGxdxFxhXgj+6P+npIXXyKhjz1RHcn9AvRTvDZ8mjPgrGZxoNCqsQr1fRJaaL4xSgqHYwfgwnDBBHTe7/JPocuodZMiqix32oHeSDRjlIioYsH68iepxQOYcQNRY3zcBEHiAPww78fiaGntz/Ahk1f1FIyc4Z/owT+gFxvNMXYqR9cNmhY32ghBMU+917KyJiGNrIPpf0FCXG++5G8NnSlTs95Dt1LTjguimIHQNe7/ptLPKUkwbzmv6Un/gnCzM3MqIfa0stOszrFlpio1Nsj5ABl11ru3eS1UOhv0O3IaVuTpbWgGXHQoWUeJae4QZwmZSzQ5Q7plzDhkC/U9QodZfon8n0lqWzWWcBNzlGh1uUDv3eR88x7pjxAVYA/dZX7CRjDviBroIFCMybZQGiv+r0rKi+/JyZn+UHULw+AMwmhePHluID1gL9T4TtwZMrL0BGI270Txr6k1wkdVMy7gUl+meyIKkAmcULIkWKL92JlLo7mQQp7Z4/35UMI8XLh99ChpAqBVL6rmQYsZM0p5aggJVwBGxGBnPc6WEl/gNKQtEv21O8BgAAAABJRU5ErkJggg==") no-repeat center;
  background-size: contain;
}

.s2-cta{ margin-top: 44px; }

@media (max-width: 767px){
  .s2-cta{ margin-top: 28px; }
}


/* ==================
   SECTION 3
================== */
 

.s3{
  padding:100px 0 !important; 
}

.s3-head{
  margin-bottom:48px;
}

.s3-title{
  margin:0;
  font-size:44px;
  line-height:52px;
  font-weight:700;
  color:#111;
}

.s3-text{
  margin:6px 0 0 0;
  max-width:520px;
  font-size:16px;
  line-height:26px;
  color:#3D4A5C;
}

/* MEDIA */
.s3-media {
  display:block;
  height:auto;
  border-radius:16px;
}

/* ==================
   MOBILE
================== */
@media (max-width:767px){
  .s3{
    padding:72px 0;
  }

  .s3-head{
    margin-bottom:32px;
  }

  .s3-title{
    font-size:32px;
    line-height:40px;
  }

  .s3-text{
    margin-top:16px;
    font-size:18px;
    line-height:28px;
  }

  .s3-media img{
    border-radius:14px;
  }
}


/* ==================
   SECTION 3 – ALIGN FIX
================== */

.s3-media{
    margin-left: -20px;
    margin-right: -20px;
}

.s3-media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Mobile : padding Bootstrap différent */
@media (max-width: 767px){
  .s3-media{
    height: 300px;
  }
}

@media (max-width: 767px){
.hide-mobile{
  display: none !important;
  
}
.img-mobile {
  padding-left: 18px;
  width: 94% !important;
}
}

@media (min-width: 767px){
.hide-desktop{
  display: none !important;

}

}

/* =========================
   SECTION AVIS
========================= */

.s4 {
  padding: 100px 0 !important; 
}

.s4-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 56px;
}

.s4-title {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #111;
  max-width: 520px;
}

.s4-more {
  font-size: 14px;
  color: #111;
  text-decoration: underline;
}

/* =========================
   GRID
========================= */

.s4-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* =========================
   CARD
========================= */

.s4-card {
  background: #fff;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  height: 430px;
  display: flex;
  flex-direction: column;
}

/* =========================
   HEADER USER
========================= */

.s4-user {
  display: flex;
  align-items: center;
  gap: 12px; 

}

.s4-user img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.s4-user-name {
  font-weight: 600;
  font-size: 16px;
  color: #111;
    margin-top: -24px;
    margin-bottom:-6px;
}

.s4-user-meta {
  font-size: 14px;
  color: #777;
}

/* =========================
   STARS (GRISES)
========================= */

.s4-stars {
  margin: 12px 0 16px;
  font-size: 14px;
  letter-spacing: 2px;
  color: #888;
}

/* =========================
   TEXTE
========================= */

.s4-text {
  font-size: 16px;
  line-height: 26px;
  color: #1f2937;
  margin-bottom: 32px;
}

/* =========================
   FOOTER
========================= */

.s4-footer {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #eee;
  font-size: 14px;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* =========================
   CTA
========================= */

.s4-cta {
  text-align: center;
  margin-top: 48px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {
  .s4 {
    padding: 72px 0;
  }

  .s4-head {
    flex-direction: column;
    gap: 12px;
    
    margin-bottom: 0 !important;

  }

  .s4-grid {
    grid-template-columns: 1fr;
  }

  .s4-title {
    font-size: 32px;
    line-height: 40px;
  }
}


/* ===== RATING (cercles) ===== */

.star-rating{
  display:flex;
  align-items:center;
  gap:4px; /* espace horizontal entre cercles */
  margin:14px 0 21px; /* espace avec le texte au-dessus / dessous */
}

.star{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#00A63E;
  position:relative;
  flex-shrink:0;
}

.star::after{
  content:"";
  position:absolute;
  inset:6px; /* centre le cercle blanc */
  background:#fff;
  border-radius:50%;
}


.s4-user{
  display:flex;
  align-items:center;
  gap:12px;
}

.s4-user img{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
}

.s4-user-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.s4-user-name{
  font-size:16px;
  font-weight:600;
  color:#111;
}

.s4-user-location{
  font-size:14px;
  color:#6B7280;
}

/* ===== SECTION AVIS · CTA GOOGLE ===== */

.s4-cta{
  display:flex;
  justify-content:center;
  margin-top:56px;
}

.s4-cta .btn{
  display:inline-flex;
  align-items:center;
  gap:12px;

  padding:14px 24px;
  border-radius:999px;

  background:#fff;
  border:1px solid #E5E7EB;

  font-size:16px;
  font-weight:500;
  color:#111;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.06);

  transition:
    box-shadow .2s ease,
    transform .2s ease;
}

.s4-cta .btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.10);
}

/* Mobile */
@media (max-width:767px){
  .s4-cta{
    margin-top:40px;
    
    
  }
.s4-card{
     margin-bottom: 32px;
             height: 400px;
    
  margin-bottom: 32px;
  }
  
}


/* =========================
   PRICING
========================= */

.pricing {
  padding: 100px 0 160px 0 !important;
  background: #fafafa;
}

.pricing-head {
  margin-bottom: 80px;
}
@media (max-width:767px){
.pricing-head {
  margin-bottom: 32px;
}}


.pricing-title {
  margin: 0;
  font-size: 42px;
  line-height: 52px;
  font-weight: 700;
  color: #111;
}

/* Grid */
.pricing-grid {
  display: flex;
  align-items: stretch;
}

/* Card */
.pricing-card {
  height: 100%;
  background: #fff;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
}

/* Featured */
.pricing-card--featured {
  border: 2px solid #2f5bff;
    box-shadow: 0 30px 70px rgb(47 91 255 / 10%);
}

.pricing-badge {
  align-self: flex-start;
  background: #7d9cff;
  color: #fff;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

/* Text */
.pricing-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
}

.pricing-price {
  margin-bottom: 24px;
}

.pricing-price strong {
  font-size: 42px;
  font-weight: 700;
}

.pricing-price span {
  font-size: 18px;
  color: #7a7a7a;
  margin-left: 4px;
}

/* List */
.pricing-list {
  list-style: none;
  padding: 0;
  margin: 0 0 64px;
  flex-grow: 1;
}

.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
      height: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: #1d1d1d;
}

.pricing-list li + li {
  margin-top: 12px;
}

.pricing-list img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}

.btn-outline {
  border: 1px solid #e2e5ec;
  color: #111;
  background: #fff;
}

.btn-outline:hover {
  background: #f4f6fb;
}

.btn-primary {
  background: #2f5bff;
  color: #fff;
  /* box-shadow: 0 12px 30px rgba(47,91,255,.35); */
}

.btn-primary:hover {
  background: #2449d8;
}

.special-card {
  height:420px;
  margin-top:25px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {
  .pricing {
    padding: 72px 0;
  }

  .pricing-title {
    font-size: 32px;
    line-height: 40px;
  }

  .pricing-grid {
    display: block;
  }

  .pricing-card {
    margin-bottom: 24px;
    padding: 24px;
  }
  .special-card {
     margin: 0 0 32px;
  margin-top:0px;
  
      height: 400px;
}
}


 /* =========================
   CONTACT CARD
========================= */

.contact-card {
  min-height: 776px;
  padding: 128px 0;
  background-image: url("../img/egypte/re-sized/background-contact.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Carte blanche */
.contact-card__inner {
  width: 100%;
  max-width: 1100px;
  background: #fff;
  border-radius: 24px;
  padding: 64px;
    margin-top: 135px;
  display: flex;
  justify-content: space-between;
  gap: 64px;

  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}

/* =========================
   LEFT
========================= */

.contact-card__left {
  flex: 1;
}

/* Header (avatar + nom) */
.contact-user {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}

.contact-avatar {
  width: 122px;
  height: 122px;
  border-radius: 50%;
  object-fit: cover;
      margin-top: 20px;
}

/* Nom + badge */
.contact-name {
  font-size: 48px;
  line-height: 48px;
  font-weight: 600;
  color: #111827;

  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-badge {
  width: 22px;
  height: 22px;
  background: #22c55e;
  border-radius: 50%;
  position: relative;
}

.contact-badge::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: #fff;
  clip-path: polygon(
    14% 44%, 0 59%, 42% 100%,
    100% 16%, 84% 0, 42% 62%
  );
}

/* Sous-titre */
.contact-delay {
  font-size: 18px;
  line-height: 26px;
  color: #6b7280;
  margin-top: 6px;
}

/* =========================
   INFOS
========================= */

/* Aligne WhatsApp + Email sur une seule ligne */
.contact-infos {
  display: flex;
  flex-direction: row;
  gap: 48px;          /* espace entre les deux blocs */
  align-items: center;
}

/* Chaque bloc garde son layout interne */
.contact-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Icône */
.contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;

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

  position: relative;
}

.contact-icon--whatsapp {
  background: #dcfce7;
}

.contact-icon--mail {
  background: #e0edff;
}

.contact-icon--whatsapp::after,
.contact-icon--mail::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

.contact-icon--whatsapp::after {
  background-image: url("../img/egypte/re-sized/icon-whatsapp.png");
}

.contact-icon--mail::after {
  background-image: url("../img/egypte/re-sized/icon-mail.png");
}

/* Texte empilé */
.contact-info > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-label {
  font-size: 14px;
  color: #6b7280;
}

.contact-value {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

/* =========================
   RIGHT
========================= */

.contact-card__right {
  display: flex;
  align-items: center;
}

.contact-qr {
  background: #f9fafb;
  padding: 32px;
  border-radius: 14px;
}

.contact-qr img {
  width: 220px;
  height: auto;
  display: block;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
  .contact-card {
    padding: 96px 16px;
  }

  .contact-card__inner {
    flex-direction: column;
    gap: 40px;
    padding: 32px;
  }

  .contact-name {
    font-size: 32px;
    line-height: 36px;
  }

  .contact-card__right {
    justify-content: center;
  }

  .contact-qr img {
    width: 240px;
  }
}



/* =========================
   CONTACT CARD — MOBILE FIX
========================= */

@media (max-width: 768px) {

  /* Carte blanche bien centrée et respirante */
  .contact-card {
    padding: 64px 16px;
  }

  .contact-card__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 32px;
    transform: none;
    margin-top: 0;
  }

  /* ===== HEADER ===== */

  .contact-user {
    gap: 16px;
    margin-bottom: 24px;
  }

  .contact-avatar {
    width: 64px;      /* ⬅ avatar corrigé */
    height: 64px;
  }

  .contact-name {
    font-size: 20px;  /* ⬅ Maher Farouk */
    line-height: 20px;
    font-weight: 600;
  }

  .contact-delay {
    font-size: 10px;  /* ⬅ sous-titre */
    line-height: 14px;
    margin-top: 4px;
  }

  /* ===== INFOS ===== */

  .contact-infos {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .contact-info {
    gap: 12px;
  }

  .contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .contact-icon--whatsapp::after,
  .contact-icon--mail::after {
    background-size: 18px 18px;
  }

  .contact-label {
    font-size: 12px;  /* ⬅ labels */
    line-height: 16px;
  }

  .contact-value {
    font-size: 14px;  /* ⬅ valeurs */
    line-height: 18px;
  }

  /* ===== QR ===== */

  .contact-card__right {
    justify-content: center;
  }

  .contact-qr {
    padding: 24px;
  }

  .contact-qr img {
    width: 200px;
  }
}
/* =========================
   CONTACT CARD — MOBILE FIX
========================= */

@media (max-width: 768px) {

  /* Carte blanche bien centrée et respirante */
  .contact-card {
    padding: 64px 16px;
  }

  .contact-card__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 32px;
    transform: none;
    margin-top: 0;
  }

  /* ===== HEADER ===== */

  .contact-user {
    gap: 16px;
    margin-bottom: 24px;
  }

  .contact-avatar {
    width: 64px;      /* ⬅ avatar corrigé */
    height: 64px;
  }

  .contact-name {
    font-size: 20px;  /* ⬅ Maher Farouk */
    line-height: 20px;
    font-weight: 600;
  }

  .contact-delay {
    font-size: 10px;  /* ⬅ sous-titre */
    line-height: 14px;
    margin-top: 4px;
  }

  /* ===== INFOS ===== */

  .contact-infos {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .contact-info {
    gap: 12px;
  }

  .contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .contact-icon--whatsapp::after,
  .contact-icon--mail::after {
    background-size: 18px 18px;
  }

  .contact-label {
    font-size: 12px;  /* ⬅ labels */
    line-height: 16px;
  }

  .contact-value {
    font-size: 14px;  /* ⬅ valeurs */
    line-height: 18px;
  }

  /* ===== QR ===== */

  .contact-card__right {
    justify-content: center;
  }

  .contact-qr {
    padding: 24px;
  }

  .contact-qr img {
    width: 100%;
  }
}





@media (max-width: 768px) {

  .contact-infos {
    align-items: flex-start;
  }

  .contact-info {
    align-items: flex-start; /* ⬅ icône + texte alignés */
  }

  .contact-info > div {
    align-items: flex-start;
    text-align: left;
  }
}


@media (max-width: 768px) {

  .contact-card__inner {
    padding: 32px; /* ⬅ comme demandé */
  }
}



.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 56px;
  padding: 16px 32px;

  background: #2f5bff;
  color: #fff;

  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;

  border: none;
  text-decoration: none;
  cursor: pointer;
}

/* ARROW */
.btn-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("img/egypte/re-sized/arrow-right-white.svg") no-repeat center;
  background-size: contain;
  
}

/* hover */
.btn-primary:hover {
  background: #2449d8;
}


.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-primary .btn-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("../img/egypte/re-sized/arrow-right-white.svg") no-repeat center;
  background-size: contain;
}


@media (max-width: 768px) {

            /* SECTION 1 */
.s1{
  background:#F6F7F7;
  padding:64px 0 0 0 !important;
}



.s2{
  background: var(--s2-bg);
  padding: 64px 0 !important;
}


.s3{
  padding:64px 0 !important; 
}


.s4 {
  padding: 64px 0 !important; 
}

.pricing {
  padding: 64px 0 64px 0 !important;
  background: #fafafa;
}

}