.mm_logo_animate{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 50px;

    width: 60%;
    max-width: 900px;
    justify-content: space-between;
    padding: 0 100px;
}
.text-group {
    display: flex;
    align-items: center;
    position: relative;
    /* transition: width 0.8s ease; */
    gap: 20px;
    width:250px;
}

.character {
    font-size: 48px;
    font-weight: bold;
    color: white;
    margin: 0 2px;
    display: inline-block;
    text-transform: uppercase;
}

.circle-char {
    background: white;
    color: #333;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    position: relative;
    z-index: 10;
}

.connecting-line {
    position: absolute;
    top: 50%;
    left: 60px;
    right: 60px;
    height: 2px;
    background: white;
    opacity: 0;
    z-index: 1;
}

.arrow {
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%) rotate(-45deg);
    width: 12px;
    height: 12px;
    border-right: 3px solid white;
    border-bottom: 3px solid white;
    background: transparent;
    opacity: 0;
}
.circle-char{
    min-width: 60px !important;
}

#movia .character:not(.circle-char) {
    overflow: hidden;
}

#moba .character:not(.circle-char) {
    overflow: hidden;
}


.banner_text a { 
    pointer-events: auto; 
    margin: 0 auto;
}

.div_banner_home { position: relative; width: 100%; height: 100%; }

.resource-wrapper { position: relative; overflow: hidden; }

.scaling-element-header {
  display: flex; flex-flow: column; justify-content: center; align-items: center;
  min-height: 100vh; 
  position: relative;
}

.scaling-element-video {
  display: flex; flex-flow: column; justify-content: center; align-items: center;
  padding: 6vh 1vw; position: relative;
}

.scaling-element__big-box,
.scaling-element__small-box {
  border-radius: 1em; width: 100%; position: relative;
}
.scaling-element__small-box { max-width: 1760px; }

.scaling-hero__wrapper {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}

.scaling-hero {
  will-change: transform;
  border-radius: 1em;
  position: absolute; inset: 0;
  overflow: hidden; isolation: isolate;
  transform: translateZ(0) rotate(0.001deg);
  background: #000; /* hide edges during scaling */
}

.banner_img_desktop,
.banner_img_mob {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; 
  border-radius: inherit;
}
.banner_img_mob { 
    display: none; 
}

.testimonial_grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    padding: 1rem;

    max-width: 80%;
}

.sec_temoig_home {
    margin-top:30px;
}

.testimonials_row {
    display: flex;
    gap: 1.5rem;
    flex: 1;
}

.nos_serv_box {
  flex: 1 1 0;         
  display: flex;
  flex-direction: column;
  align-items: center;
    padding: 10px;
}

.nos_serv_box p{
    font-size: 22px;
    margin: 20px auto 0;
    max-width: 200px;
}

.nos_serv_box svg,
.nos_serv_box img {
  display: block;
  width: 100%;           /* fill the parent column */
  height: auto;          /* keep aspect ratio */
  max-width: 260px;      /* optional: cap so it doesn’t get too huge */
}

.layout_1 .testimonials_row:nth-child(1) .testimonial_card:nth-child(1) {
    flex: 0.9;
}
.layout_1 .testimonials_row:nth-child(1) .testimonial_card:nth-child(2) {
    flex: 1.1;
}
.layout_1 .testimonials_row:nth-child(2) .testimonial_card:nth-child(1) {
    flex: 1.1;
}
.layout_1 .testimonials_row:nth-child(2) .testimonial_card:nth-child(2) {
    flex: 0.9;
}

/* Layout 2 - First row: left 1.1, right 0.9 | Second row: left 0.9, right 1.1 */
.layout_2 .testimonials_row:nth-child(1) .testimonial_card:nth-child(1) {
    flex: 1.1;
}
.layout_2 .testimonials_row:nth-child(1) .testimonial_card:nth-child(2) {
    flex: 0.9;
}
.layout_2 .testimonials_row:nth-child(2) .testimonial_card:nth-child(1) {
    flex: 0.9;
}
.layout_2 .testimonials_row:nth-child(2) .testimonial_card:nth-child(2) {
    flex: 1.1;
}

/* Testimonial Cards */
.testimonial_card {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
}

.testimonial_card:hover {
    transform: translateY(-5px);
}

.testimonial_card p{
    color: #000;
    font-size: 16px;
    margin-bottom: 5px;
    
    flex-grow: 1;
}
.testimonial_card > p{
    margin-bottom: 20px;
}
.testimonial_card .testimo_card_title{
    font-weight: 600;
}

.div_event_home .content{
    gap: 40px;
}
.div_event_right {
    flex: 1;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;
}
.div_event_right > .carousel_item{
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.div_event_right.grey_pill_bg > .carousel_item{
    background-color: var(--moba_grey);
}

.div_event_right .carousel_item a:not(.event_title_home){
    display: flex;
    height: 100%;
}

.div_event_right .carousel_item img.thumb_event {
    display: flex;
}

.div_event_right img{
    width: 100%;
    height: auto;
    /* Match the actualités tiles on the news/outils page (16/9) so the
       homepage thumbnails share the same proportions. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 30px;
}

.div_event_right .carousel_item img.thumb_event {
    object-fit: contain;
    height: unset;
    aspect-ratio: unset;
    height: 60%;
    margin: auto;
}

.div_event_right .event_title_home{
    position: absolute;
    left: 0;
    bottom: 0;
    background: white;
    opacity: 0.9;
    padding: 20px;
    width: calc(100% - 40px);
    transform: translateY(100%);
    transition: all 0.3s;
    height: 30%;
    max-height: 30%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 10px;
}

.div_event_right .event_date_home {
font-size:12px;
color: black;
}

.div_event_right .carousel_item:hover .event_title_home{
    transform: translateY(0);
}
.div_event_right .event_title_home h3{
    color: black;
    font-size: 24px;
    font-weight: normal;
}

.div_event_right img,
.div_actual_right img {
  opacity: 1 !important;
  visibility: visible !important;
}

.nos_serv_boxes {
  display: flex;
  justify-content: space-between;
  gap: 10px;           
}

.banner_img_mob{
    display: none;
}
.banner_title_mob{
    display: none;
}

.banner_text{
    color: #fff;
    position: absolute;
    right: 50px;
    bottom: 50px;
    width: 50%;
}
.banner_text h2{
    font-size: 44px;
    font-weight: 500;
    max-width: 700px;
    margin: 0 0 30px;
}

.div_banner_home{
    position: relative;
}

.hero_max_container{
    width: 100%;
    height: 100%;
}

.div_banner_home img{
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.scaling-element__big-box .scaling-hero {
  width: 101vw;
  height: 101vh;
  left:0;
  top: 0%;
  transform: translateY(-50%);
  border-radius: 1em; /* keep your radius; it’s just hidden offscreen */
}

.scaling-element__small-box {
  width: 100%;
  max-width: 1700px;   /* ← your cap */
  margin: 0 auto;      /* center it */
}

.div_event_right img,
.div_actual_right img {
  opacity: 1 !important;
  visibility: visible !important;
}

.div_event_right.is-carousel {
  display: flex;
  gap: 20px;
  overflow: hidden;               /* keep 3 visible */
  scroll-behavior: auto;          /* we control easing ourselves */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* keep page from stealing scroll */
  touch-action: pan-x;            
}
.div_event_right.is-carousel.is-dragging { cursor: grabbing; }

.div_event_right.is-carousel img,
.div_event_right.is-carousel a {
  -webkit-user-drag: none;
  user-drag: none;
}

.div_event_right.is-carousel > .carousel_item {
  flex: 0 0 calc((100% - 2 * 20px) / 3);
  min-width: 240px;
}

.div_temoig_home{
    padding: 40px;
    border-radius: var(--radius-md);
    position: relative;
}
.div_temoig_home > span{
    color: #fff;
    font-size: 22px;
}

.bot_notre_home{
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
.bot_notre_home h3{
    flex: 1;
    color: #fff;
    font-size: 55px;
    font-weight: 600;
    background:  var(--moba_orange);
    border-radius: 20px;
    padding: 15px 20px;

    display: flex;
    justify-content: center;
    align-items: center;
}
.bot_notre_home p{
    flex: 2;
    font-size: 32px;
    background: #fff;
    border-radius: 20px;
    text-align: center;
    padding: 15px 20px;

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

.div_date_votre{
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin: 30px 0;
}
.div_date_home{
    flex: 1.2;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #fff;
}
.div_date_home .p_mnth_yr{
    color: #fff;
    font-size: 44px;
    font-weight: 500;
    background:  var(--moba_orange);
    padding: 18px;
    text-align: center;
}
.div_date_home .p_date{
    font-size: 88px;
    padding: 30px 20px 20px;
    text-align: center;
}
.div_votre_home{
    flex: 1.8;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #fff;
}
.div_votre_home > div{
    background: var(--moba_green);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}
.div_votre_home .num_timer{
    color: #fff;
    font-size: 24px;
    background: #050505;
    border-radius: 20px;
    padding: 15px 20px;
    min-width: 100px;
    display: flex;
}
.div_votre_home .txt_timer{
    font-size: 24px;
    width: 100%;
    text-align: center;
}
.div_votre_home > p{
    font-size: 36px;
    font-weight: 500;
    text-align: center;
    padding: 40px 20px;
}
.div_votre_home span{
    font-size: 24px;
    text-align: center;
    display: block;
    border-top: 2px solid #000;
    padding: 15px 20px;
}
.div_temoig_home .slider_container{
    position: relative;
    margin: 50px 0;
    min-height: 600px;
}
.div_temoig_home .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;

    display: flex;
    justify-content: center;
}

.div_temoig_home .slide.active {
    opacity: 1;
    visibility: visible;
}

.top_notre_home{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 30px;
    background: var(--moba_blue);
    border-radius: var(--radius-md);
    padding: 40px 20px;
    font-size: 1.2em;
}
.top_notre_home p{
    font-size: 88px;
    background: var(--moba_green);
    border-radius: 50%;
    padding: 10px;
    width: 156px;
    height: 156px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.top_notre_home p:before{
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    line-height: 0;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    
}
.top_notre_home h4{
    font-size: 88px;
}

.first_section {
    margin-top:-80px;
}

.div_banner_home .banner_img_desktop,
.div_banner_home .banner_img_mob {
  filter: brightness(0.8);
}

@media (max-width: 1280px){
    .banner_text{
        right: 30px;
        bottom: 30px;
    }
    .banner_text h2{
        font-size: 32px;
        margin-bottom: 20px;
    }
    .div_temoig_home > span{
        font-size: 20px;
    }

    .div_event_right, .div_actual_right{
        column-gap: 20px;
    }
    .div_event_right p, .div_actual_right p {
        font-size: 22px;
        left: 20px;
        bottom: 20px;
    }
    .top_notre_home p:before{
        width: 60px;
        height: 60px;
    }
    .top_notre_home h2, .div_date_home .p_date{
        font-size: 60px;
    }
    .div_date_votre, .bot_notre_home{
        gap: 20px;
    }
    .div_date_home .p_mnth_yr{
        font-size: 36px;
    }
    .div_votre_home > div{
        gap: 20px;
        padding: 13px 20px;
    }
    .div_votre_home .num_timer {
        font-size: 20px;
        border-radius: var(--radius-sm);
        padding: 15px 15px;
    }
    .div_votre_home .txt_timer, .div_votre_home span{
        font-size: 20px;
    }
    .div_date_votre{
        margin: 20px 0;
    }
    .div_votre_home > p {
        font-size: 30px;
        padding: 30px 20px;
    }
    .bot_notre_home h3{
        font-size: 42px;
    }
    .bot_notre_home p{
        font-size: 24px;
        max-width: none;
    }

    .testimonial_card .card_large_txt {
        font-size: 24px;
    }
    .nos_serv_box p{
        font-size: 20px;
    }
    .top_notre_home p {
        font-size: 60px;
        width: 120px;
        height: 120px;
    }

    .nos_serv_boxes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        row-gap: 30px;
    }

    .div_event_right.is-carousel {
        justify-content: flex-end;
    }

    .div_event_right.is-carousel > .carousel_item {
        min-width: 0;
    }
}

@media (max-width: 960px){ 

    .testimonial_card > p {
        font-size: 20px;
    }

    .nos_serv_boxes {
        margin-bottom: 30px;
    }

    .nos_serv_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

        .div_temoig_home > span {
        font-size: 18px;
    }

    .nos_serv_box img {
      max-width: 200px;
    }

    .div_event_right, .div_actual_right {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }
    .div_event_right p, .div_actual_right p{
        font-size: 20px;
        left: 15px;
        bottom: 15px;
    }

    .top_notre_home{
        gap: 20px;
        padding: 20px;
    }

    .top_notre_home p::before {
        width: 32px;
        height: 32px;
        top: -10px;
        right: -10px;
    }
    .top_notre_home h2, .div_date_home .p_date {
        font-size: 38px;
    }

    .top_notre_home, .div_date_home, 
    .div_votre_home, .bot_notre_home h3, .bot_notre_home p, .div_temoig_home{
        border-radius: var(--radius-sm);
    }
    .div_date_home .p_mnth_yr{
        font-size: 24px;
        padding: 10px;
    }
    .div_votre_home > div {
        gap: 10px;
        padding: 10px 10px;
    }
    .div_votre_home .num_timer {
        font-size: 14px;
        border-radius: 8px;
        padding: 10px 8px;
    }
    .div_votre_home .txt_timer, .div_votre_home span {
        font-size: 16px;
    }
    .div_votre_home > p {
        font-size: 24px;
        padding: 15px 10px;
    }
    .div_date_votre, .bot_notre_home{
        gap: 10px;
        margin: 10px 0;
    }
    .bot_notre_home h3 {
        font-size: 28px;
        padding: 10px;
    }
    .bot_notre_home p {
        font-size: 18px;
    }

    .testimonials_row{
        flex-direction: column;
        gap: 20px;
    }
    .testimonials_row:last-child{
        display: none;
    }

    .top_notre_home p {
        font-size: 38px;
        width: 72px;
        height: 72px;
    }

    .top_notre_home h4 {
        font-size: 48px;
        font-weight: 200;
    }
}

@media (max-width: 767px) {
  .banner_img_desktop { display: none; }
  .banner_img_mob { display: block; }

  .nos_serv_box p {
    margin-top: 10px !important;
  }
    .nos_serv_box p {
        margin-top: 10px !important;
  }

  .scaling-element__big-box .scaling-hero {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .div_event_right a {
    display: block;
    overflow: hidden;
  }

  .div_event_right img {
    display: block;
    width: 100%;
    height: auto;
    /* Keep 16/9 on mobile too, matching the news/outils tiles. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .div_event_right p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.35;
  }

  /* (Optional) hide scrollbar on WebKit */
  .div_event_right::-webkit-scrollbar { display: none; }

   /* The scrolling track */
  .slider_container .testimonial_grid {
    display: flex !important;                 /* row, not column */
    flex-direction: row !important;
    gap: 0;                                    /* no peeking */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;             /* snap per card */
    scroll-padding-left: 0;                    /* start-snap */
    width: 100% !important;
    max-width: none !important;                /* undo the 80% cap */
    padding: 0 !important;                     /* keep it clean */
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .slider_container .testimonial_grid::-webkit-scrollbar { display: none; }

  .slider_container .testimonials_row {
    display: contents !important;              /* ignore row wrappers */
  }
  .slider_container .testimonials_row:last-child {
    display: contents !important;              /* undo "display: none" */
  }

  .slider_container .testimonial_card {
    flex: 0 0 100vw;                            /* exactly one visible */
    scroll-snap-align: start;                   /* start-snap (most reliable) */
  }

  .section_box_container .div_temoig_home { overflow: visible !important; }
 
  .testimonial_card {
     aspect-ratio: 0.9;
    height: 70vw;
  }

   /* Make the grid the horizontal scroller */
  .slider_container .testimonial_grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    scrollbar-width: none;
  }
  .slider_container .testimonial_grid::-webkit-scrollbar { display: none; }

  /* Let children flow in one row (kills the 2-row stacking) */
  .slider_container .testimonials_row { display: contents; }

  /* Each testimonial card is one "slide" */
  .slider_container .testimonials_row > * {
    flex: 0 0 var(--t-card-w);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .slider_container .testimonial_grid::before,
  .slider_container .testimonial_grid::after {
    content: "";
    flex: 0 0 calc((100vw - var(--t-card-w)) / 2);
  }

  .slider_container .testimonials_row > * > * {
    border-radius: 24px;.testimonial_card > p {
        font-size: 16px;
    }
  }
 /* Just in case an ancestor clips horizontally */
  .slider_container { overflow: visible; }

  .testimonial_card > p {
    overflow: visible;
  }

  .section_box_container .div_temoig_home .bg {
    border-radius: var(--radius-md);
  }

    .div_event_right.is-carousel { 
        scrollbar-width: none; 
        padding-left: 0;
    }
  .div_event_right.is-carousel::-webkit-scrollbar { display: none; }
  
}

@media (max-width: 640px) {

    .div_banner_home{
        padding: 50px 0;
        height: calc(100% - 100px);
        min-height: 400px;
    }
    .div_banner_home .banner_overlay{
        display: flex;
        flex-direction: column;
        /* Bottom-align the remaining banner content (lead text + CTA) against
           the image — the title/animated logo above are hidden on mobile. */
        justify-content: flex-end;
        gap: 50px;
        height: 100%;
    }
    .mm_logo_animate{
        display: none;
    }
    .banner_title_mob{
        /* Hidden on mobile per request — the "Movia — Moba / Mobilité durable"
           title no longer shows on the homepage banner on small screens. */
        display: none;
        position: relative;
    }
    .banner_title_mob p,
   .banner_title_mob .mb-text{
        color: #fff;
        font-size: 32px;
        text-align: center;
        padding: 0 24px;
    }
    .div_banner_home .banner_text{
        width: 80%;
        position: relative;
        left: auto;
        right: auto;
        bottom: 0;
        transform: none;
        margin: 0 auto;
        text-align: center;
    }
    .banner_text h2 {
        font-size: 30px;
    }

    .div_temoig_home > span {
        font-size: 16px;
    }

    .div_date_votre, .bot_notre_home{
        flex-direction: column;
    }
    .bot_notre_home{
        gap: 0;
    }
    .div_event_right, .div_actual_right{
        grid-template-columns: 1fr;
    }
    .div_event_right p, .div_actual_right p {
        font-size: 24px;
        left: 30px;
        bottom: 25px;
    }
  
    .top_notre_home p::before {
        width: 24px;
        height: 24px;
        top: -5px;
        right: -5px;
    }
    .top_notre_home h2{
        font-size: 24px;
    }
    .div_date_home .p_date{
        font-size: 88px;
        padding: 20px;
    }
    .div_votre_home > p{
        padding: 25px 10px;
    }
    .bot_notre_home h3{
        border-radius: var(--radius-sm) 15px 0 0;
    }
    .bot_notre_home p{
        border-radius: 0 0 15px 15px;
    }
    .bot_notre_home h3{
        padding: 15px 20px;
        padding-left: 0;
        padding-right: 0;
        min-width: 100%;
    }
    .bot_notre_home p {
        font-size: 24px;
    }

    .div_temoig_home{
        /* Drop the inner horizontal padding on mobile so the testimony
           block spans the same width as the other homepage sections. */
        padding: 30px 0;
    }
    /* Give the "Témoignages" title a left margin on mobile (the zeroed
       horizontal padding above left it flush against the edge). */
    .div_temoig_home > span{
        padding-left: 24px;
    }
    /* Swiper sizes its slides to the container width and ignores padding on
       the wrapper, so to give the testimony card side margins we constrain
       the CARD itself and centre it inside its (full-width) slide. height:100%
       makes every card fill the (now fixed-height) slide so shorter quotes
       don't leave the dark background showing below the card. */
    .div_temoig_home .slider-blk-new.mobile-show .testimonial_card{
        width: calc(100% - 48px);
        max-width: calc(100% - 48px);
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .div_temoig_home .slider-blk-new.mobile-show .swiper-slide{
        height: auto;
    }

    /* Tighten the bottom margin under sec_notre_home on phones — the
       laptop value (80px) leaves too much empty space here.
       Also zero out the desktop-only -80px margin-top so the homepage
       sections stop overlapping each other on mobile (the previous CTAs
       were sliding under the next section's coloured background). */
    .section_box_container {
        margin-top: 0;
        margin-bottom: 30px;
    }

    /* First section was pulled up 80px to overlap the hero on desktop —
       on mobile that just causes its content to overlap the section below. */
    .first_section {
        margin-top: 0;
    }

    /* Zero out the inner .section_box padding for the testimonial block on
       mobile so the testimonial card spans the full container width. */
    .sec_temoig_home .section_box {
        padding: 0;
    }

    
    .div_temoig_home .slider_container {
        height: auto;
        margin: 20px 0;
        min-height: 475px;
        /* Was 100px — pushed the cards far below the title so you had to scroll
           well past the section before they came into view. 30px brings them
           up so they appear sooner. */
        margin-top: 30px;
    }

    .testimonial_grid {
        max-width: 100%;
        padding: 0;
    }
    .testimonials_row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .layout_1 .testimonials_row .testimonial_card,
    .layout_2 .testimonials_row .testimonial_card {
        flex: 1 !important;
    }

    .section_box_container .div_temoig_home {
        /* Removed the -80px overlap on mobile — combined with .section_box's
           overflow:hidden it was clipping the "Témoignages" title. */
        margin-top: 0;
    }
    .testimonial_card > p {
        font-size: 16px;
    }

    .top_notre_home h4 {
        font-size: 24px;
        font-weight: 200;
    }
    .top_notre_home {
        margin-top: -20px;
    }
    .top_notre_home p {
        font-size: 24px;
        width: 36px;
        height: 36px;
    }

    .div_event_right.is-carousel .carousel_item:last-child {
        display: unset;
    }
}

@media (max-width: 767px) {
  .div_event_right.is-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    padding-inline: calc((100vw - var(--event-card-w)) / 2);
    margin-bottom: 40px;
    scrollbar-width: none;
  }
  .div_event_right.is-carousel::-webkit-scrollbar { display: none; }

  .div_event_right.is-carousel > .carousel_item {
    flex: 0 0 var(--event-card-w);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .div_event_right.is-carousel a {
    display: block;
    border-radius: 24px;
    overflow: hidden;
  }

  .div_event_right.is-carousel img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .div_banner_home img{
    border-radius: 0;
    }

    .div_event_right .event_title_home h3 {
        color: black;
        font-size: 20px;
        font-weight: 400;
    }
}

.div_event_right {
  display: flex;
  gap: 16px;
  transition: all 0.3s;
}

.carousel_item {
  flex: 0 0 32%;  
  min-width: 0;
  box-sizing: border-box;
  transition: all 0.3s;
}

.carousel_item > div {
    height:100%;
}

@media (max-width: 767px) {

    .div_event_home{
        padding-left: 0;
        padding-right: 0;
    }
    .div_event_home .content_inner:first-child{
        padding: 0 20px;
    }


  .div_event_right {
    overflow-x: auto;     
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;

    padding: 20px;
    margin-bottom: 20px;
  }
  .div_event_right::-webkit-scrollbar {
    display: none;
  }

  .carousel_item {
    flex: 0 0 85%;
    min-width: 85%;
  }

  .div_event_right .event_title_home {
    transform: translateY(100%); 
    transition: transform 0.3s ease;
    pointer-events: none; 
  }

  .div_event_right .event_date_home {
    font-size:12px;
    color: black;
  }

  .div_event_right .carousel_item.show-title .event_title_home {
    transform: translateY(0); 
    pointer-events: auto;
  }

    @media (max-width: 767px) {
    .sec_temoig_home .testimonial_carousel {
        display: flex;
        gap: 1.5rem;          
        overflow-x: auto;
        padding-inline: 1.5rem;      
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .sec_temoig_home .testimonial_slide {
        flex: 0 0 calc(100% - 3rem);
        scroll-snap-align: center;
    }
    }
}

.slider-blk-new{ display: block;    padding: 1rem; width: 100%; max-width: 80%; margin: 0 auto;}

.for-colum-main { display: flex; align-items: flex-start; width: 100%; gap: 0; row-gap: 1.5rem; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;}
.for-colum-main  .testimonial_card{ box-sizing: border-box; }
.for-colum-main  .testimonial_card:first-child{ width:44.5% ;}
.for-colum-main  .testimonial_card:nth-child(2){ width:53.5% ;}
.for-colum-main  .testimonial_card:nth-child(3){ width:53.5% ;}
.for-colum-main  .testimonial_card:nth-child(4){ width:44.5% ;}
.slider-blk-new .testimonial_card{ min-height: 224px; }

.slider-blk-new.for-colum .swiper-pagination{ display: none;}
.slider-blk-new.for-colum .swiper{ overflow: visible; }
.slider-blk-new .swiper-pagination{ position: relative; display: flex; align-items: center; justify-content: center; left: auto; top: auto; bottom: auto; right: auto; margin: 24px 0 0 0; gap: 5px;  }
.slider-blk-new .swiper-pagination .swiper-pagination-bullet{ margin: 0; width: 12px; opacity: 1; height: 12px; border: #fff solid 1px; border-radius: 100px; background: none; }
.slider-blk-new .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #fff; }
.slider-blk-new .testimonial_card{ height: auto; aspect-ratio: inherit; }
.div_temoig_home .slide.active.aligne-center{ align-items: center; }
.slider-blk-new.mobile-show{ display: none;}

.banner_overlay{ display: block; width: 100%; height: 100%; }
 
@media (max-width: 992px) {
.slider-blk-new{ max-width: 100%;}  
.slider-blk-new .testimonial_card{ width: 100%;} 
.testimonial_card  { box-sizing: border-box; } 
.testimonial_card:hover{ transform: none; }

.slider-blk-new.desktop-show{ display: none !important;}

.slider-blk-new.mobile-show{ display: block; width: 100%;}

}
@media (max-width: 767px) {
    .div_banner_home .banner_text   a{ background: var(--moba_orange) !important; }
.div_banner_home .banner_text    a .btn-text-p{ color: #fff !important;} 

}