/*
Site : G6_CFA_1A
Author: Karti kamal
agence : HAY2 agency
Version: 1
*/

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

@font-face {
  font-family: "HalisGR-Bold";
  src: url("./fonts/HalisGR-Bold.eot");
  src: url("./fonts/HalisGR-Bold.eot?#iefix") format("embedded-opentype"),
    url("./fonts/HalisGR-Bold.woff2") format("woff2"),
    url("./fonts/HalisGR-Bold.woff") format("woff"),
    url("./fonts/HalisGR-Bold.ttf") format("truetype"),
    url("./fonts/HalisGR-Bold.svg#HalisGR-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Colors: */
  --color-primary: #d39e36;
  --color-text: #fff;
  --HalisGRBold: "HalisGR-Bold";
  --Roboto-font: "Roboto", sans-serif;
  --Roboto-Regular: "Roboto", sans-serif;
  --Roboto-Bold: "Roboto-Bold";
  --Roboto-Light: "Roboto", sans-serif;
  --Roboto-Black: "Roboto-Black";
  --JosefinSans-Bold: "JosefinSans-Bold";
  --orange: #d39e36;
}

.color-primary {
  color: var(--color-primary);
}
/*font-size*/
.fs12 {
  font-size: 12px;
}
.fs13 {
  font-size: 13px;
}
.fs14 {
  font-size: 14px;
}
.fs15 {
  font-size: 15px;
}
.fs16 {
  font-size: 16px;
}
.fs17 {
  font-size: 17px;
}
.fs18 {
  font-size: 18px;
}
.fs20 {
  font-size: 20px;
}
.fs22 {
  font-size: 22px;
}
.fs24 {
  font-size: 24px;
}
.fs25 {
  font-size: 25px;
}
.fs26 {
  font-size: 26px;
}
.fs28 {
  font-size: 28px;
}
.fs30 {
  font-size: 30px;
}
.fs32 {
  font-size: 32px;
}
.fs35 {
  font-size: 35px;
}
.fs40 {
  font-size: 40px;
}
.fs45 {
  font-size: 45px;
}
.fs50 {
  font-size: 50px;
}
.fs55 {
  font-size: 55px;
}

.text-center {
  text-align: center !important;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  background-color: #eaeaea;
  scroll-behavior: smooth;
  font-family: "Roboto", sans-serif;
}

body * {
  box-sizing: border-box;
}
body p {
  font-family: var(--Roboto-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: normal;
}
body h2 {
  font-family: var(--HalisGRBold);
  font-weight: bold;
  font-size: 50px;
  font-style: normal;
  font-weight: bold;
}

body h3 {
  font-family: var(--HalisGRBold);
  font-weight: bold;
  font-size: 50px;
  font-style: normal;
  font-weight: bold;
}

body img {
  max-width: 100%;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}
.text-dark {
  color: #000 !important;
}

.text-white {
  color: #fff !important;
}
.clr1 {
  color: var(--color-primary);
}
.clr2 {
  color: var(--color-seconder);
}
.clr3 {
  color: var(--color-text);
}
.fw-bold {
  font-weight: 700 !important;
}
.d-none {
  display: none !important;
}
.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}
body .rows,
.div-title {
  max-width: 100%;
  margin: 0 auto;
}
.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

body br.brmobile {
  display: none;
}
/**********************************************/

.btn-don {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  position: relative;
  font-family: var(--font-Poppins);
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-primary);
  padding: 8px 25px;
  text-decoration: unset;
  border-radius: 50px;
  overflow: hidden;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
  span {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
  }
  img.heart {
    margin-right: 2px;
  }
}

.btn-don:hover,
.btn-don:focus,
.btn-don:active {
  color: var(--color-text);
}

.btn-don:hover img.heart,
.btn-don:focus img.heart,
.btn-don:active img.heart {
  -webkit-animation-name: hvr-icon-up;
  animation-name: hvr-icon-up;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.btn-transparnt {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-family: var(--font-Poppins);
  font-size: 16px;
  color: #fff;
  text-decoration: unset;
  font-weight: bold;
  text-transform: uppercase;
  img {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
  }
  &:hover {
    color: #fff;
    img {
      transform: scale(1.1);
    }
  }
}

/*****************************************/
.parent_container {
  width: 1600px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 40px;
}
section {
  .rows {
    width: 1600px;
    max-width: 100%;
    position: relative;
    margin: 0 auto;
  }
}

.section-Banner {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  .div-banner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 9;
    .div-slider-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      max-width: 100%;
      z-index: 1;
      height: 100%;
      .slick-slider,
      .slick-list,
      .slick-track {
        height: 100%;
      }
      .div-slide {
        /* background-image: url(../img/visual.png); */
        object-fit: cover;
        object-position: center;
        height: 100%;
        width: 100%;
        max-width: 100%;
        .dis-mobile {
          display: none;
        }
        img {
          height: 100%;
          object-fit: cover;
          width: 100%;
          max-width: 100%;
        }
      }
      .div-slide.item1 {
        /* background-image: url(../img/visual-slide2.png); */
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
        height: 100%;
      }
    }
    .div-head {
      padding: 25px 15px;
      width: 1600px;
      max-width: 100%;
      position: relative;
      margin: 0 auto;
      z-index: 99;
      .div-log {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .img-logo {
          width: 300px;
          max-width: 100%;
        }
      }
      .div-macaron {
        width: 180px;
        max-width: 100%;
      }
    }
    .rows {
      width: 1400px;
      position: relative;
      padding: 0px 15px;
      margin-bottom: 4%;
      z-index: 99;
      .div-caption {
        width: 1000px;
        max-width: 100%;
        color: #fff;
        font-family: var(--Roboto-font);
        margin: 0 auto;
        text-align: center;
        span {
          font-size: 17px;
        }
        h1.titel-caption {
          font-size: 55px;
          color: #fff;
          font-family: var(--HalisGRBold);
          font-weight: bold;
          margin: 10px 0px;
          text-align: center;
          text-transform: uppercase;
        }
        p {
          color: #fff;
          font-family: var(--Roboto-font);
          font-weight: bold;
          font-size: 20px;
        }
        .bold {
          color: #fff;
          font-family: var(--Roboto-font);
          font-size: 17px;
          font-weight: bold;
        }
      }
      .btn-don {
        width: fit-content;
        margin: 0 auto;
        padding: 15px 35px 15px 20px;
        font-size: 18px;
      }
    }
  }
  /* .div-slider-header > * {
    height: 100%;
    position: relative;
  } */

  .sections-header {
    background: #4e648b;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    transition: width 0.3s;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 25px;
    position: relative;
    gap: 30px;
    &.fixed {
      position: fixed !important;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
      width: 100% !important;
      padding-top: 15px;
      .col-left {
        margin-top: unset;
      }
    }
    .col-left {
      width: 15%;
      max-width: 100%;
      display: flex;
      align-items: center;
      p {
        color: #fff;
        text-transform: uppercase;
        font-size: 20px;
        font-weight: bold;
      }
    }

    .navbar {
      width: 80%;
      max-width: 100%;
      .div-wrap {
        width: 100%;
      }
      .form-check {
        padding-left: unset;
      }
      p {
        color: #fff;
        text-align: left;
      }
    }
    .fixed {
      position: fixed !important;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
      width: 100% !important;
    }
    .fixed .navbar .container-fluid {
      display: flex;
      align-items: center;
      width: 1200px;
      max-width: 100%;
      margin: 0 auto;
      justify-content: center;
    }
    .sections-header .form-check {
      position: relative;
    }
    .form-check-input {
      visibility: hidden;
      position: absolute;
      cursor: pointer;
    }
    .fixed .navbar-collapse {
      padding: 12px 30px;
    }
    .fixed label.form-check-label,
    .fixed .li-input input,
    .fixed .li-input .form-text {
      font-size: 22px;
    }
    .fixed label.form-check-label,
    .fixed .li-input .form-text {
      padding: 8px 15px;
    }
    .s-description {
      color: #fff;
      font-style: italic;
    }
    label.form-check-label {
      font-family: var(--Roboto-font);
      font-weight: bold;
      color: #ffff;
      border: 2px solid rgb(255 255 255 / 50%);
      background-color: #4e648b;
      width: 130px;
      display: block;
      text-align: center;
      padding: 10px 15px;
      font-size: 25px;
      cursor: pointer;
      border-radius: 10px;
    }
    .form-check-input:checked ~ label.form-check-label {
      border-color: var(--color-primary);
      background-color: var(--color-primary);
    }
    .navbar-collapse {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 5px 15px 5px 0px;
    }
    ul.navbar-nav {
      list-style: none;
      display: flex;
      align-items: end;
      justify-content: space-between;
      flex-direction: row;
      gap: 30px;
      padding-left: unset;
      margin: unset;
    }
    .li-input .form-text {
      font-family: "Montserrat", sans-serif;
      color: #fff;
      border: 2px solid rgb(255 255 255 / 50%);
      width: 190px;
      display: block;
      text-align: center;
      padding: 6px 15px;
      font-size: 30px;
      position: relative;
      border-radius: 10px;
    }
    .li-input input {
      font-family: "Montserrat", sans-serif;
      width: 80%;
      max-width: 100%;
      font-size: 22px;
      background: transparent;
      border: unset;
      color: #fff;
      z-index: 9;
      position: relative;
      outline: unset;
      text-transform: uppercase;
      font-weight: bold;
    }
    .li-input .form-text .span-placeholder {
      position: absolute;
      font-family: var(--Roboto-font);
      font-size: 18px;
      text-transform: uppercase;
      font-weight: bold;
      color: #fff;
      top: 50%;
      left: 50%;
      z-index: 0;
      display: block;
      width: 100%;
      transform: translate(-50%, -50%);
    }

    .li-input:focus + .span-placeholder,
    .li-input:not(:focus):not(:placeholder-shown) + .span-placeholder {
      opacity: 0;
    }
    .div-btn-mobile {
      display: none;
    }
  }
}

/****************************************/

.section-1 {
  padding: 6% 15px;
  background-image: url(../img/visuel-s1.png);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  .rows {
    width: 1600px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .col-txt {
      width: 51%;
      max-width: 100%;
      p {
        font-size: 20px;
      }
    }
    .col-video {
      width: 48%;
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .d-mobile {
        display: none;
      }
    }
    .btn-don {
      width: 350px;
      max-width: 100%;
      justify-content: flex-start;
      gap: 15%;
      padding: 8px 25px 8px 8px;
    }
    .btn-don:hover img,
    .btn-don:focus img,
    .btn-don:active img {
      -webkit-animation-name: hvr-icon-up;
      animation-name: hvr-icon-up;
      -webkit-animation-duration: 0.75s;
      animation-duration: 0.75s;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
  }
}
/***********************************************************************/

.section-2 {
  background-image: url(../img/visuel-s2.png);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  position: relative;
  padding: 5% 15px;
  .rows {
    width: 1600px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .col-mobile {
      display: none;
    }
    .col-left {
      border-radius: 15px;
      background-color: #fff;
      width: 655px;
      max-width: 100%;

      .div-title {
        padding: 35px 25px;
        position: relative;
        h2 {
          font-size: 30px;
          color: #b4943f;
          text-transform: uppercase;
          font-weight: 400;
          font-family: var(--Roboto-font);
          margin-bottom: 30px;
          span:first-child {
            font-size: 35px;
            font-family: var(--HalisGRBold);
            font-weight: bold;
          }
        }
        > p {
          color: #34211e;
          font-size: 18px;
        }
        .div-btn-mobile {
          display: none;
          color: #34211e;
        }
        .openbtn {
          color: #fff;
          background-color: unset;
          border: unset;
          text-decoration: underline;
        }
      }
      .div-txt {
        background-color: #4e648b;
        padding: 35px 25px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        .div-icon {
          display: flex;
          align-items: flex-start;
          gap: 20px;
          width: 465px;
          max-width: 100%;
          margin: 0 auto 15px auto;
          align-items: center;
        }
        p {
          font-size: 20px;
          color: #fff;
        }
      }
    }
  }
  .div-pastille {
    position: relative;
    position: absolute;
    top: 10%;
    right: 25px;
    width: 310px;
    z-index: 9;
    .div-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
    p {
      color: var(--color-text);
      margin-bottom: unset;
    }
    &.div-p-mobile {
      display: none;
    }
    .openbtn {
      color: #fff;
      background-color: unset;
      border: unset;
      text-decoration: underline;
    }
  }
  .btn-don {
    /* background-color: #fff;
    color: var(--color-primary); */
    width: 370px;
    max-width: 100%;
    justify-content: flex-start;
    gap: 10%;
    padding: 10px 25px 10px 20px;
    margin: 0 auto;
  }

  .rows-hide {
    background-image: url(../img/visual-s2-hide.png);
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5% 15px;
    /*******************************/
    -webkit-transform: translate3d(-50vw, 0, 0);
    -ms-transform: translate3d(-100vw, 0, 0);
    transform: translate3d(-100vw, 0, 0);
    width: 100vw;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.5s;
    min-height: 100%;
    transition: -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform 0.5s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    &.show-menu {
      -webkit-transform: translate3d(0vw, 0, 0);
      -ms-transform: translate3d(0vw, 0, 0);
      transform: translate3d(0vw, 0, 0);
    }
    /*******************************/
    .div-content {
      position: relative;
      background-image: url(../img/Group\ 3.png);
      background-size: cover;
      background-position: left center;
      background-repeat: no-repeat;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      width: 730px;
      max-width: 100%;
      border-radius: 20px;
      padding: 55px 40px 35px 20px;
      gap: 20px;
      .div-left {
        width: 100%;
        max-width: 100%;
        h3 {
          font-size: 30px;
          color: var(--color-primary);
          text-transform: uppercase;
          font-weight: bold;
        }
        p {
          font-size: 20px;
        }
        .div-close {
          position: absolute;
          top: 20px;
          left: 20px;
          a {
            color: var(--color-primary);
            font-size: 14px;
            text-transform: uppercase;
            text-decoration: unset;
            font-weight: bold;
            span {
              display: inline-block;
              padding-left: 10px;
            }
          }
        }
      }

      p {
        color: #fff;
      }
    }
  }

  &.section-reverce {
    background-image: url(../img/visuel-s2-reverce.png);
    .rows {
      flex-direction: row-reverse;
      .col-left {
        .div-title {
          h2 {
            /*width: 455px;*/
            max-width: 100%;
            margin: 0 auto 30px 0;
          }
          > p {
            margin: 0 auto 0 0;
          }
        }
      }
    }
    .div-pastille {
      left: 25px;
      right: unset;
    }

    .rows-hide {
      background-image: url(../img/bg-hides3.png);
    }
  }
}
/**************************section-3*****************************/

/**************************section-4*****************************/
.section-3 {
  padding: 6% 15px;
  background-image: url(../img/visuel-s4.png);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  .rows {
    width: 1600px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    .col-mobile {
      display: none;
    }
    .col-left {
      width: 655px;
      max-width: 100%;
      h2 {
        color: #fff;
        font-size: 35px;
        font-weight: bold;
        text-transform: uppercase;
      }
      p {
        font-size: 18px;
        color: #ffff;
        margin: 35px 0px;
      }
    }
    .col-right {
      width: 655px;
      max-width: 100%;
      background-color: rgb(43 28 2 / 95%);
      border-radius: 15px;
      padding: 3% 20px;
      .div-ul {
        display: flex;
        flex-direction: column;
        .div-li {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          &.div-li1 {
            .div-txt {
              span {
                br {
                  display: none;
                }
              }
            }
          }
        }
        .div-icon {
          width: 60px;
          max-width: 100%;
          img {
            width: 100%;
            object-fit: contain;
            object-position: center;
          }
        }
      }
      .div-txt {
        span {
          color: var(--color-primary);
          display: block;
          font-size: 25px;
          text-transform: uppercase;
          font-weight: bold;
          margin-bottom: 25px;
        }
        p {
          color: #fff;
        }
        hr {
          width: 100%;
          color: var(--color-primary);
        }
      }
    }
    .btn-don {
      width: 350px;
      max-width: 100%;
      justify-content: flex-start;
      gap: 10%;
      padding: 10px 25px 10px 20px;
    }
  }
}

body section:not(.section-Banner) {
  padding-left: 40px;
  padding-right: 40px;
}
/************************section-5*****************************/
/* section-6 */
.section.section-6 .col1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 50px 0;
}

.section.section-6 .col1 .texte {
  text-align: center;
}

.section.section-6 .col1 .texte p {
  font-size: 37px;
  font-family: var(--HalisGRBold);
  font-weight: bold;
  color: var(--orange);
  text-transform: uppercase;
  margin: unset;
}
/************************section-6*************************/
/******section7*****/

.section.section-7 {
  background-color: #4e648b;
  padding: 60px 0 140px 0;
}

.section.section-7 .content {
  display: flex;
  justify-content: space-between;
}

.section.section-7 .content .left-col {
  width: 45%;
  max-width: 100%;
}
.section.section-7 .content .right-col {
  width: 50%;
  max-width: 100%;
}
.section.section-7 .left-col .titre-col {
  margin-bottom: 35px;
}

.section.section-7 .left-col .titre-col h3 {
  font-size: 41px;
  color: #fff;
  text-transform: uppercase;
  font-family: var(--HalisGRBold);
  font-weight: bold;
  margin-bottom: 25px;
}

.section.section-7 .left-col .titre-col span {
  font-size: 22px;
  color: #fff;
  font-family: var(--Roboto-Regular);
}

.section.section-7 .left-col .descr {
  width: 90%;
  max-width: 100%;
  margin-bottom: 25px;
}

.section.section-7 .left-col .descr p {
  font-size: 18px;
  color: #fff;
  font-family: var(--Roboto-Regular);
}

.section.section-7 .left-col .white-div {
  padding: 30px 15px;
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.section.section-7 .white-div p {
  font-size: 20px;
  color: #3572c5;
  font-family: var(--Roboto-font);
  text-align: center;
}

.section.section-7 .white-div p b {
  font-family: var(--Roboto-font);
  font-weight: bold;
}

.section.section-7 .white-div .number {
  font-size: 30px;
  color: #de9d21;
  font-family: var(--Roboto-font);
  font-weight: bolder;
}

.section.section-7 .right-col {
  position: relative;
}

.section.section-7 .right-col .titre-col {
  margin-bottom: 20px;
}

.section.section-7 .right-col .titre-col h4 {
  font-size: 20px;
  color: #fff;
  font-family: var(--HalisGRBold);
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.section.section-7 .deduction .img-txt {
  position: absolute;
}

.section.section-7 .deduction .img-txt img {
  position: relative;
}

.section.section-7 .right-col .img-txt.one {
  top: 40px;
  left: 0;
  z-index: 11;
  width: 500px;
  max-width: 100%;
}

.section.section-7 .right-col .img-txt.two {
  width: 300px;
  max-width: 100%;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 11;
}

.section.section-7 .right-col .img-txt.three {
  width: 300px;
  max-width: 100%;
  z-index: 11;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
}

.section.section-7 .right-col .img-txt .img {
  position: relative;
}

.section.section-7 .right-col .img-txt .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.section.section-7 .right-col .img-txt.one .txt {
  top: 39%;
  text-align: center;
}

.section.section-7 .right-col .img-txt.one .txt p {
  font-size: 15px;
  color: #fff;
  font-family: var(--HalisGRBold);
  font-weight: bold;
  text-transform: uppercase;
}

.section.section-7 .right-col .img-txt.one .txt span {
  font-size: 60px;
  color: #fff;
  font-family: var(--HalisGRBold);
  font-weight: bold;
  line-height: 40px;
}

.section.section-7 .right-col .img-txt.one .txt span sup {
  font-size: 36px;
}

.section.section-7 .right-col .img-txt.two .txt p,
.section.section-7 .right-col .img-txt.three .txt p {
  font-size: 15px;
  color: #de9d21;
  font-family: var(--HalisGRBold);
  font-weight: bold;
  text-transform: uppercase;
}

.section.section-7 .right-col .img-txt.two .txt span,
.section.section-7 .right-col .img-txt.three .txt span {
  font-size: 45px;
  color: #de9d21;
  font-family: var(--HalisGRBold);
  font-weight: bold;
  line-height: 10px;
  text-transform: uppercase;
}

.section.section-7 .right-col .img-txt.two .txt span sup,
.section.section-7 .right-col .img-txt.three .txt span sup {
  font-size: 27px;
}
/******************section-footer**********************/
/****section-footer****/

.section.section-footer {
  padding: 50px 0;
  background-color: #3e4e68;
}

.section.section-footer .cols {
  display: flex;
  flex-direction: column;
  gap: 60px;
  justify-content: center;
  align-content: center;
}

.section.section-footer .col1 {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.section.section-footer .col1 .texte p {
  font-size: 15px;
  color: #fff;
  font-family: var(--Roboto-Light);
  text-align: center;
}

.section.section-footer .col1 .texte p a {
  color: #fff;
  text-decoration: none;
}

.section.section-footer .col1 .social-media {
  display: flex;
  justify-content: center;
  gap: 30px;
  align-items: end;
}

.section.section-footer .col1 .media-icons {
  display: flex;
  align-items: center;
  gap: 30px;
}

.section.section-footer .col1 .social-media .text span {
  font-size: 16px;
  color: #fff;
  font-family: var(--Roboto-font);
}

.section.section-footer .col1 .icone a img {
  width: 40px;
}

.section.section-footer .col1 .icone a:hover img {
  filter: brightness(0) saturate(100%) invert(66%) sepia(61%) saturate(451%)
    hue-rotate(1deg) brightness(85%) contrast(95%);
}

.section.section-footer .col2 .separateur {
  width: 700px;
  max-width: 100%;
  height: 1px;
  background-color: #fff;
  margin: 0 auto;
}

.section.section-footer .col3 .logos {
  display: flex;
  justify-content: center;
  gap: 70px;
}

.section.section-footer .col3 .image img {
  width: 280px;
  max-width: 100%;
}

.section.section-footer .col3 .mindme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 40px 0;
}

.section.section-footer .col3 .mindme .text p {
  font-size: 14px;
  margin: unset;
  color: #fff;
  font-family: var(--Roboto-Light);
}

.section.section-footer .col3 .mindme .logo-mindme img {
  width: 80px;
  max-width: 100%;
}

.section.section-footer .col3 .mentions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section.section-footer .col3 .mentions a,
.section.section-footer .col3 .mentions span {
  font-size: 14px;
  color: #fff;
  font-family: var(--Roboto-Light);
}

.section.section-footer .col3 .mentions span {
  margin: 0 5px;
}

.section.section-footer .col3 .mentions a:hover {
  color: #d39e36;
}
/*****************************************************************************/

@media (max-width: 1400px) {
  /* section {
    .rows{
      padding: 0px 30px;
    }
  } */
  .section-Banner {
    .div-banner {
      .div-head {
        padding: 15px;
      }
      .div-macaron {
        img {
          width: 195px;
        }
      }
      .rows {
        margin-bottom: 20px;
        .div-caption {
          h1.titel-caption {
            font-size: 40px;
          }
        }
      }
    }
    .sections-header {
      .navbar {
        padding-top: unset;
        padding-bottom: unset;
      }
      ul.navbar-nav {
        gap: 15px;
      }
      label.form-check-label {
        width: 100px;
      }
      .col-left {
        width: 210px;
        .col-img {
          width: 290px;
          img {
            left: -20px;
            width: 230px;
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .btn-don {
    gap: 8px;
    padding: 8px 12px;
  }
  .section-Banner {
    .sections-header {
      ul.navbar-nav {
        gap: 10px;
      }
      label.form-check-label,
      .li-input .form-text {
        font-size: 20px;
      }
      .li-input .form-text {
        width: 165px;
      }
      .col-left {
        width: fit-content;
        p {
          font-size: 18px;
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .section-Banner {
    .sections-header {
      .navbar-collapse {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
      }
      .navbar {
        p {
          text-align: center;
        }
        .div-wrap {
          .d-none {
            display: block !important;
          }
        }
        .w-300 {
          display: none;
        }
      }
      .col-left {
        width: 200px;
      }
    }
  }
}

@media (max-width: 800px) {
  .section-Banner {
    height: 100%;
    .div-head {
      .div-log {
        .div-macaron {
          img {
            width: 145px;
          }
        }
      }
    }
    .rows {
      .div-caption {
        h1.titel-caption {
          font-size: 35px;
        }
        p {
          font-size: 18px;
        }
      }
    }

    .sections-header {
      display: none;
    }
  }
  .section-1 {
    background-position: left center;
    .rows {
      flex-direction: column-reverse;
      .col-video {
        width: 100%;
        min-height: 300px;
      }

      .col-txt {
        width: 100%;
      }
    }
  }

  .section-2 {
    background-position: center center;
    .div-pastille {
      display: none;
    }
    .rows {
      .col-left {
        background-color: unset;
        width: 100%;
        .div-title {
          background-color: #fff;
          border-top-left-radius: 15px;
          border-top-right-radius: 15px;
          > p {
            width: 100%;
            margin: 0 0 15px auto !important;
          }
          .div-btn-mobile {
            display: block;
            padding: unset;
          }
        }
      }
    }

    .rows-hide {
      .div-content {
        flex-direction: column;
        .div-left,
        .div-right {
          width: 100%;
        }
      }
    }

    &.section-reverce {
      .rows {
        .col-left {
          .div-title {
            h2 {
              width: 100%;
            }
          }

          .div-pastille {
            &.div-p-mobile {
              left: unset;
            }
          }
        }
      }
    }
  }

  .section-3 {
    .rows {
      flex-direction: column;
      .col-left,
      .col-right {
        width: 100%;
      }
    }
  }
}

@media (max-width: 498px) {
  body section:not(.section-Banner) {
    padding-left: 0px;
    padding-right: 0px;
  }

  .section-Banner {
    .div-banner {
      min-height: 850px;

      .rows {
        padding: 0px 5px;
        .div-caption {
          h1.titel-caption {
            font-size: 30px;
            br {
              display: none;
            }
          }
          p {
            font-size: 18px;
            margin-bottom: 20px;
            br {
              display: none;
            }
          }
        }
      }
      .div-slider-header {
        height: 100%;
        .div-slide {
          height: 900px !important;
          img {
            display: none;
          }
          .dis-mobile {
            display: block !important;
            width: 100%;
            object-position: top center;
          }
        }
      }

      .div-head {
        .div-log {
          img.img-logo {
            width: 175px;
          }
          .div-macaron {
            img {
              width: 175px;
            }
          }
        }
      }
    }
  }

  .section-1 {
    background-image: unset;
    padding: unset;
    .rows {
      flex-direction: column-reverse;
      .col-video {
        min-height: unset;
        position: relative;
        .d-mobile {
          display: block;
          width: 100%;
        }
        .div-video {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .col-txt {
        padding: 25px 15px;
        p {
          font-size: 16px;
          color: #433c32;
        }
      }
    }
  }

  .section-2 {
    background-image: unset;
    padding: unset;
    padding-bottom: 25px;
    &.section-reverce {
      background-image: unset;
    }
    .rows {
      flex-direction: column !important;
      .col-mobile {
        display: block;
        width: 100%;
        min-height: 500px;
        img {
          width: 100%;
        }
      }
      .col-left {
        .div-title {
          padding: 35px 15px;
          margin-top: -25px;
          h2 {
            font-size: 24px;
            span:first-child {
              display: inline-block;
              margin-bottom: 15px;
            }
            br {
              display: none;
            }
          }
        }
      }
    }
    .btn-don {
      gap: 10px;
      padding-right: 10px;
    }
  }

  .section-3 {
    background-image: unset;
    padding: unset;
    padding-bottom: 25px;
    .rows {
      .col-mobile {
        display: block;
        width: 100%;
        img {
          width: 100%;
        }
      }

      .col-right {
        padding: 20px 15px;
        .div-li3 {
          .div-txt {
            span {
              br {
                display: none;
              }
            }
          }
        }
        .div-li1 {
          .div-txt {
            span {
              br {
                display: block !important;
              }
            }
          }
        }
      }
      .col-left {
        padding: 0px 15px;
        h2 {
          font-size: 30px;
          br {
            display: none;
          }
        }
        h2,
        p {
          color: #433c32;
          br {
            display: none;
          }
        }
      }

      .btn-don {
        gap: 15px;
      }
    }
  }

  body br.brmobile {
    display: block !important;
  }
}

/****************************************************/
@media screen and (max-width: 1440px) {
  /* .parent_container{
    padding: 45px;
  } */
  .section.section-7 .right-col .img-txt.two {
    right: 0%;
    top: 55%;
  }

  .section.section-7 .right-col .img-txt.three {
    bottom: -18%;
    left: 50%;
  }
}
@media screen and (max-width: 1300px) {
  .section.section-6 .col1 .texte p {
    font-size: 35px;
  }

  .section.section-7 .left-col .titre-col h3 {
    font-size: 35px;
  }

  .section.section-7 .left-col .white-div {
    gap: 20px;
  }

  .section.section-7 .right-col .img-txt.one {
    width: 490px;
    left: -8%;
  }

  .section.section-7 .right-col .img-txt.two,
  .section.section-7 .right-col .img-txt.three {
    width: 285px;
  }

  .section.section-7 .right-col .img-txt.two .txt p,
  .section.section-7 .right-col .img-txt.three .txt p {
    font-size: 13px;
  }

  .section.section-7 .right-col .img-txt.two .txt span,
  .section.section-7 .right-col .img-txt.three .txt span {
    font-size: 40px;
  }

  .section.section-7 .right-col .img-txt.one .txt span {
    font-size: 50px;
    color: #fff;
    font-family: var(--HalisGRBold);
    line-height: 20px;
  }

  .section.section-7 .right-col .img-txt.one .txt span sup {
    font-size: 31px;
  }
}

@media screen and (max-width: 1200px) {
  .section.section-7 .right-col .img-txt.one {
    width: 460px;
    left: -8%;
  }

  .section.section-7 .right-col .img-txt.two,
  .section.section-7 .right-col .img-txt.three {
    width: 245px;
  }
}
@media screen and (max-width: 1100px) {
  .section.section-6 .col1 .texte p {
    font-size: 30px;
  }

  .section.section-7 .left-col .titre-col h3 {
    font-size: 30px;
  }

  .section.section-7 .left-col .titre-col span {
    font-size: 20px;
  }

  .section.section-7 .left-col .descr p {
    font-size: 17px;
  }

  .section.section-7 .left-col .white-div {
    padding: 20px 30px;
    gap: 10px;
  }

  .section.section-7 .white-div .number {
    font-size: 27px;
  }

  .section.section-7 .white-div p {
    font-size: 17px;
  }

  .section.section-7 .right-col .img-txt.one {
    width: 370px;
  }

  .section.section-7 .right-col .img-txt.two,
  .section.section-7 .right-col .img-txt.three {
    width: 210px;
  }

  .section.section-7 .right-col .img-txt.three {
    bottom: -10px;
  }

  .section.section-7 .right-col .img-txt.two .txt span sup,
  .section.section-7 .right-col .img-txt.three .txt span sup {
    font-size: 24px;
  }

  .section.section-footer .col3 .image img {
    width: 250px;
    max-width: 100%;
  }
}

@media screen and (max-width: 930px) {
  .section.section-6 .col1 {
    padding: 40px 0;
  }

  .section.section-6 .col1 .texte p {
    font-size: 27px;
  }

  .section.section-7 .content {
    flex-direction: column;
    gap: 30px;
  }

  .section.section-7 .content .left-col,
  .section.section-7 .content .right-col {
    width: 100%;
  }

  .section.section-7 .content .right-col {
    height: 410px;
  }

  .section.section-7 .right-col .img-txt.one {
    left: 37%;
    transform: translateX(-50%);
  }

  .section.section-7 .right-col .img-txt.two {
    left: 65%;
    top: 56%;
    right: unset;
    transform: translate(-50%, -50%);
  }

  .section.section-7 .right-col .img-txt.three {
    left: 46%;
    top: 76%;
    right: unset;
    transform: translate(-50%, -50%);
  }

  /* .section.section-7 .right-col .img-txt.three .txt {
    top: 100%;
  } */

  .section.section-7 .left-col .white-div {
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .parent_container {
    padding: 0 15px;
  }
  .section.section-6 .col1 {
    padding: 20px 0;
  }
  .section.section-6 .col1 .texte p {
    font-size: 25px;
    br {
      display: none;
    }
  }

  .section.section-7 {
    padding: 60px 0 90px 0;
  }

  .section.section-7 .left-col .titre-col h3 {
    font-size: 25px;
  }

  .section.section-7 .left-col .titre-col span {
    font-size: 19px;
  }

  .section.section-7 .left-col .descr p {
    font-size: 15px;
  }

  .section.section-7 .white-div p {
    font-size: 19px;
    br {
      display: none;
    }
  }

  .section.section-7 .right-col .titre-col h4 {
    font-size: 15px;
  }

  .section.section-7 .right-col .img-txt.one {
    width: 355px;
  }

  .section.section-7 .right-col .img-txt.one {
    left: 100px;
    transform: translateX(-50%);
  }

  .section.section-7 .right-col .img-txt.two,
  .section.section-7 .right-col .img-txt.three {
    width: 200px;
  }

  .section.section-7 .right-col .img-txt.two {
    left: 73%;
  }

  .section.section-7 .right-col .img-txt.three {
    left: 42%;
    top: 74%;
  }

  .section.section-7 .right-col .img-txt.two .txt p,
  .section.section-7 .right-col .img-txt.three .txt p {
    font-size: 10px;
  }

  .section.section-7 .right-col .img-txt.two .txt span,
  .section.section-7 .right-col .img-txt.three .txt span {
    font-size: 32px;
  }

  .section.section-7 .right-col .img-txt.two .txt span sup,
  .section.section-7 .right-col .img-txt.three .txt span sup {
    font-size: 20px;
  }

  .section.section-7 .right-col .img-txt.one .txt span {
    font-size: 38px;
    line-height: 12px;
  }

  .section.section-7 .right-col .img-txt.one .txt p {
    font-size: 13px;
  }

  .section.section-7 .right-col .img-txt.one .txt span sup {
    font-size: 25px;
  }
  .section.section-7 .left-col .white-div {
    padding: 20px;
  }
  /* 
  .section.section-7 .right-col .img-txt.three .txt {
    top: 84%;
  } */

  /**footer***/
  .section.section-footer .col1 .social-media,
  .section.section-footer .col3 .mindme {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .section.section-footer .col1 .icone a img {
    width: 32px;
  }
}
/********** responsive *************/

/* Video Modal
-----------------------------------------*/
.video-modal,
.video-modal .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
}

.video-modal {
  overflow: hidden;
  position: fixed;
  opacity: 0;
  -webkit-transform: translate(500%, 0%);
  transform: translate(500%, 0%);
  -webkit-transition: -webkit-transform 0s linear 0s;
  transition: -webkit-transform 0s linear 0s;
  transition: transform 0s linear 0s;
  transition: transform 0s linear 0s, -webkit-transform 0s linear 0s;
  /* using flexbox for vertical centering */
  /* Flexbox display */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Vertical alignment */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.video-modal .overlay {
  z-index: 0;
  background: rgba(13, 1, 61, 0.82);
  /* overlay color */
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-out 0.05s;
  transition: opacity 0.2s ease-out 0.05s;
}

.video-modal-content {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  margin: 0 auto;
  overflow-y: visible;
  background: #000;
  width: calc(100% - 12em);
  height: 0;
  padding-top: calc((100% - 12em) * 0.5625);
  /* 16:9 calc */
}

/* Scaling to fit within the current Viewport size:
   When viewport aspect ratio is greater than 16:9
   work off the height instead of the width for calc */
@media (min-aspect-ratio: 16 / 9) {
  .video-modal-content {
    width: 0;
    height: calc(100vh - 10em);
    padding-top: 0;
    padding-left: calc((100vh - 10em) * 1.7778);
    /* 16:9 calc */
  }
}

/* Mobile Layout Tweaks - side margins reduced */
@media (max-width: 640px) {
  .video-modal-content {
    width: calc(100% - 1em);
    padding-top: calc((100% - 1em) * 0.5625);
    /* 16:9 calc */
  }
}

/* modal close button */
.close-video-modal {
  display: block;
  position: absolute;
  left: 0;
  top: -40px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

/* set the iframe element to stretch to fit its parent element */
iframe#youtube {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: #000;
  -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
}

iframe#youtube-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: #000;
  -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
}

/* show the modal: 
   add class to the body to reveal */
.show-video-modal .video-modal {
  opacity: 1;
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
}

.show-video-modal .video-modal .overlay {
  opacity: 1;
}

.show-video-modal .video-modal-content {
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}

/* Icon Up */
@-webkit-keyframes hvr-icon-up {
  0%,
  50%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25%,
  75% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
@keyframes hvr-icon-up {
  0%,
  50%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25%,
  75% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}