@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
  /* Colors: */
  --unnamed-color-ed96b0: #ed96b0;
  --unnamed-color-f8dbdc: #f8dbdc;
  --unnamed-color-b1d581: #b1d581;
  --unnamed-color-e8eca8: #e8eca8;
  --unnamed-color-efd590: #efd590;
  --unnamed-color-f4e6c0: #f4e6c0;
  --unnamed-color-72cbb7: #72cbb7;
  --unnamed-color-d5eae0: #d5eae0;
  --unnamed-color-d0e2fd: #d0e2fd;
  --unnamed-color-ffffff: #ffffff;
  --unnamed-color-98b0f5: #98b0f5;
  --unnamed-color-000000: #000000;
  --unnamed-color-c5a8fa: #c5a8fa;
  --unnamed-color-ece7f7: #ece7f7;
  --text-font-poppins: "Poppins", sans-serif;
}

.font-1 {
  font-family: "Poppins" !important ;
}
.font-2 {
  font-family: "Poppins", cursive !important;
}

html {
  box-sizing: border-box;
  margin: unset;
  overflow-x: hidden;
}
body {
  box-sizing: border-box;
  margin: unset;
  overflow-x: hidden;
  font-family: var(--text-font-poppins) !important;
}
img {
  max-width: 100%;
}

body h1 {
  font-size: 50px;
  font-family: var(--text-font-poppins);
  position: relative;
  color: #000;
}

body h2 {
  font-size: 35px;
  font-family: var(--text-font-poppins);
  font-weight: 600;
  position: relative;
  color: #000;
}

body h3 {
  font-size: 30px;
  font-family: var(--text-font-poppins);
  font-weight: 600;
  position: relative;
  color: #000;
}
body p {
  font-family: var(--text-font-poppins);
  color: #000;
  font-size: 16px;
  margin-bottom: 0px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
body .row {
  margin: 0 auto;
}

/*************************************section Home**************************************/
.header {
  max-width: 100%;
  width: 1644px;
  margin: 0 auto;
  position: relative;
  padding: 15px 15px 0px 15px;
  z-index: 9;
  &.head-relative {
    position: absolute;
    img {
      width: 150px;
    }
  }
  .rows-head {
    display: flex;
    align-items: center;
    gap: 10%;
    img {
      width: 190px;
    }
    .div-steps {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 55px;
      div {
        position: relative;
        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #000;
          font-family: var(--text-font-poppins);
          font-weight: 600;
          font-size: 30px;
        }
      }
      img {
        width: 90px;
        max-width: 100%;
      }
    }
  }
}
section.section-relative {
  height: 100%;
}
section.header-relative {
  height: 100%;
}
section {
  height: 100%;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 100%;
  position: relative;
  flex-direction: column;
  gap: 35px;
  .row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0px 15px;
    width: 1700px;
    max-width: 100%;
    padding-bottom: 30px;
    &.row-q {
      width: 1675px;
      justify-content: space-between;
    }
    ul {
      list-style: none;
      padding-left: unset;
      display: flex;
      flex-direction: column;
      gap: 20px;
      li {
        position: relative;
        input[type="radio"] {
          visibility: hidden;
          position: absolute;
        }
        label {
          display: flex;
          align-items: center;
          gap: 15px;
          padding: 25px 30px;
          border: 3px solid var(--unnamed-color-ffffff);
          border: 3px solid #ffffff;
          border-radius: 61px;
          height: 85px;
          cursor: pointer;
          span {
            font-family: var(--text-font-poppins);
            font-weight: 600;
            font-size: 20px;
            color: #000;
          }
        }
      }
    }
    .div-right {
      width: 47%;
      max-width: 100%;
      .div-txt {
        background-color: #fff;
        padding: 30px 30px 69px 30px;
        border-radius: 30px;
        position: relative;
        padding-top: 60px;
        width: 480px;
        float: right;
        p {
          color: #000;
        }
        img {
          position: absolute;
          top: -21%;
          left: 57%;
          transform: translateX(-50%);
          width: 400px;
          max-width: 100%;
        }
      }
    }
  }
  .div-btn {
    text-align: center;
    padding: 20px 15px;
    margin-bottom: 10px;
    .btn-continue {
      color: #000;
      font-family: var(--text-font-poppins);
      background: #c5a8fa 0% 0% no-repeat padding-box;
      border-radius: 30px;
      padding: 15px 20px;
      text-decoration: unset;
      display: inline-block;
      margin: 0 auto;
      font-size: 18px;
      font-weight: 600;
      width: 200px;
      max-width: 100%;
      border: unset;
    }
  }
  .d-desk {
    display: block;
  }
  .div-bottom {
    display: flex;
    background-color: #fff;
    border-radius: 30px;
    position: relative;
    gap: 3%;
    .div-rest-q {
      width: 25%;
      max-width: 100%;
      color: #000;
      background: #c5a8fa 0% 0% no-repeat padding-box;
      border: 3px solid #ffffff;
      border-radius: 30px 0px 0px 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 20px 0px;
      font-size: 16px;
      font-family: var(--text-font-poppins);
      font-weight: bold;
      span {
        font-size: 25px;
      }
    }
    p {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 35%;
      max-width: 100%;
      color: #000;
      text-align: left;
      font-family: var(--text-font-poppins);
      font-weight: 300;
      margin-bottom: unset;
    }
    img {
      position: absolute;
      right: 8%;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .d-mobile {
    display: none;
  }
  .div-bg-Q1 {
    text-align: right;
  }
}
.section-home {
  height: 100%;
  width: 100%;
  max-width: 100%;
  background: transparent linear-gradient(300deg, #dbbad7 0%, #a3c2e1 100%) 0%
    0% no-repeat padding-box;
  display: flex;
  align-items: center;
  .header {
    .div-steps {
      display: none;
    }
  }
  .row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
    width: 1700px;
    max-width: 100%;
    margin-top: -12%;
    z-index: 99;
    .div-left {
      margin-top: -30px;
      width: 68%;
      max-width: 100%;
      position: relative;
      .div-txt {
        position: absolute;
        bottom: 30%;
        width: 36%;
        max-width: 100%;
        left: 0;
        text-align: right;
        span {
          font-size: 22px;
          font-weight: bold;
          color: #000;
        }
      }
    }
    .div-form {
      width: 538px;
      max-width: 100%;
      padding: 0px;
      .div-head {
        span {
          font-size: 25px;
          font-weight: bold;
          text-align: center;
          display: block;
          margin-bottom: 20px;
        }
        span.span-q {
          font-size: 16px;
          text-align: left;
          margin: 10px 0px;
        }
      }
      form {
        .form-group {
          padding-bottom: 15px;
          .form-control {
            padding: 12px 20px;
            color: #000;
            border-radius: unset;
            border: unset;
            font-size: 16px;
          }
          .form-group::placeholder {
            color: #000 !important;
            font-family: var(--text-font-poppins);
            opacity: 1 !important;
          }
        }
        .div-btn {
          padding: 20px 0px;
        }
        button {
          width: 100%;
          height: 70px;
          background: var(--unnamed-color-000000) 0% 0% no-repeat padding-box;
          border-radius: 35px;
          color: #fff;
          border: unset;
          font-size: 20px;
          font-weight: 600;
          &:hover {
            background: var(--unnamed-color-b1d581);
            color: #000;
          }
        }
      }

      .div-txt {
        background-color: #fff;
        padding: 30px 15px 20px 15px;
        border-radius: 30px;
        position: relative;
        padding-top: 40px;
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        span {
          position: absolute;
          top: -23px;
          left: 50%;
          font-size: 22px;
          background-color: #c5a8fa;
          color: #000;
          text-align: center;
          transform: translateX(-50%) rotate(-4deg);
          display: inline;
          font-weight: bold;
          width: 420px;
          max-width: 100%;
          padding: 5px;
        }
        .div-content {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 30px;
          position: relative;

          img {
            width: 145px;
            max-width: 100%;
          }
        }
      }

      .div-obl span {
        font-size: 12px;
        color: #000;
      }
    }
  }
}

/*********************************************sections Questions*****************************/

.section-Q1 {
  background: #ece7f7 0% 0% no-repeat padding-box;
  .step1 {
    filter: brightness(0) saturate(100%) invert(63%) sepia(7%) saturate(2375%)
      hue-rotate(217deg) brightness(112%) contrast(96%);
  }
  .row {
    position: relative;
    z-index: 2;
  }
  .div-left {
    width: 53%;
    max-width: 100%;
    .div-head {
      text-align: center;
      margin-bottom: 30px;
    }
    ul {
      li {
        input[type="radio"]:checked + label,
        input[type="radio"]:hover + label {
          background-color: #c5a8fa;
          border-color: #c5a8fa;
        }
      }
    }
  }

  .div-bg-Q1 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 46%;
  }
  .div-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
  }

  .div-btn {
    .btn-continue {
      &:hover {
        background-color: rgb(197 168 250 / 50%);
      }
    }
  }
}

.section-Q2 {
  background: #d0e2fd;
  .step2 {
    filter: brightness(0) saturate(100%) invert(71%) sepia(6%) saturate(3560%)
      hue-rotate(191deg) brightness(100%) contrast(93%);
  }
  .row {
    position: relative;
    z-index: 1;
  }
  .div-left {
    width: 53%;
    max-width: 100%;
    .div-head {
      text-align: center;
      margin-bottom: 30px;
    }
    ul {
      li {
        input[type="radio"]:checked + label,
        input[type="radio"]:hover + label {
          background-color: #98b0f5;
          border-color: #98b0f5;
        }
      }
    }
  }
  .div-bg-Q1 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 46%;
  }
  .div-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
  }

  .div-btn {
    .btn-continue {
      background: #98b0f5;
      &:hover {
        background-color: rgb(152 176 245 / 50%);
      }
    }
  }

  .div-bottom {
    .div-rest-q {
      background: #98b0f5;
    }
  }
}

.section-Q3 {
  background: #d5eae0;
  .step3 {
    filter: brightness(0) saturate(100%) invert(75%) sepia(18%) saturate(695%)
      hue-rotate(116deg) brightness(92%) contrast(99%);
  }
  .row {
    position: relative;
    z-index: 1;
  }
  .div-left {
    width: 53%;
    max-width: 100%;
    .div-head {
      text-align: center;
      margin-bottom: 30px;
    }
    ul {
      li {
        input[type="radio"]:checked + label,
        input[type="radio"]:hover + label {
          background-color: #72cbb7;
          border-color: #72cbb7;
        }
      }
    }
  }
  .div-bg-Q1 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 46%;
  }
  .div-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
  }

  .div-btn {
    .btn-continue {
      background: #72cbb7;
      &:hover {
        background-color: rgb(114 203 183 / 50%);
      }
    }
  }

  .div-bottom {
    .div-rest-q {
      background: #72cbb7;
    }
  }
}

.section-Q4 {
  background: #f4e6c0;
  .step4 {
    filter: brightness(0) saturate(100%) invert(80%) sepia(39%) saturate(442%)
      hue-rotate(0deg) brightness(96%) contrast(95%);
  }
  .row {
    position: relative;
    z-index: 2;
  }
  .div-left {
    width: 53%;
    max-width: 100%;
    .div-head {
      text-align: center;
      margin-bottom: 30px;
    }
    ul {
      li {
        input[type="radio"]:checked + label,
        input[type="radio"]:hover + label {
          background-color: #efcd76;
          border-color: #efcd76;
        }
      }
    }
  }
  .div-bg-Q1 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 15%;
  }
  .div-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
  }

  .div-btn {
    .btn-continue {
      background: rgb(239, 205, 118);

      &:hover {
        background-color: rgb(239 205 118 / 50%);
      }
    }
  }

  .div-bottom {
    .div-rest-q {
      background: #efcd76;
    }
  }
}

.section-Q5 {
  background: #e8eca8;
  .step5 {
    filter: brightness(0) saturate(100%) invert(97%) sepia(77%) saturate(629%)
      hue-rotate(25deg) brightness(90%) contrast(85%);
  }
  .row {
    position: relative;
    z-index: 1;
  }
  .div-left {
    width: 53%;
    max-width: 100%;
    .div-head {
      text-align: center;
      margin-bottom: 30px;
    }
    ul {
      li {
        input[type="radio"]:checked + label,
        input[type="radio"]:hover + label {
          background-color: #b1d581;
          border-color: #b1d581;
        }
      }
    }
  }
  .div-bg-Q1 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 46%;
  }
  .div-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
  }

  .div-btn {
    .btn-continue {
      background: rgb(177, 213, 129);

      &:hover {
        background-color: rgb(177 213 129 / 50%);
      }
    }
  }

  .div-bottom {
    .div-rest-q {
      background: #b1d581;
    }
  }
}

.section-Q6 {
  background: #f8dbdc;
  .step6 {
    filter: brightness(0) saturate(100%) invert(92%) sepia(23%) saturate(7341%)
      hue-rotate(297deg) brightness(119%) contrast(101%);
  }
  .row {
    position: relative;
    z-index: 1;
    .div-right {
      .div-txt {
        img {
          top: -28%;
        }
      }
    }
  }
  .div-left {
    width: 53%;
    max-width: 100%;
    .div-head {
      text-align: center;
      margin-bottom: 30px;
    }
    ul {
      li {
        input[type="radio"]:checked + label,
        input[type="radio"]:hover + label {
          background-color: #f8a7c0;
          border-color: #f8a7c0;
        }
      }
    }
  }

  .div-bg-Q1 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 46%;
  }
  .div-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
  }

  .div-btn {
    .btn-continue {
      background: rgb(248, 167, 192);
      width: fit-content;
      &:hover {
        background: rgb(248 167 192 / 50%);
      }
    }
  }

  .div-bottom {
    .div-rest-q {
      background: #f8a7c0;
    }
  }
}

section.reponse {
  background: transparent linear-gradient(300deg, #dbbad7 0%, #a3c2e1 100%) 0%
    0% no-repeat padding-box;
  align-items: center;
  .rows-head {
    .div-steps {
      display: none;
    }
  }
  .rows {
    &.rows-r {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 20px;
      max-width: 100%;
      margin-top: -10%;
    }
    .div-left {
      width: 40%;
      margin-right: -10%;
      h1 {
        text-align: right;
        font-weight: bolder;
        span:first-child {
          color: #fff;
          display: block;
        }
      }
      .div-img-m {
        display: none;
      }
    }
    .div-center {
      width: 50%;
      text-align: center;
      img {
        /* width: 655px; */
      }
    }
    .div-right {
      width: 30%;
      .div-caption {
        background-color: #fff;
        padding: 30px 20px 30px 20px;
        border-radius: 30px;
        position: relative;
        padding-top: 60px;
        width: 538px;
        max-width: 100%;
        float: right;
        margin-bottom: 10%;
        span.span-title {
          font-size: 20px;
          font-family: var(--text-font-poppins);
          font-weight: bold;
          text-align: left;
          margin-bottom: 20px;
          display: block;
        }
        p {
          color: #000;
          font-family: var(--text-font-poppins);
          margin-bottom: 20px;
          font-size: 16px;
        }
        h3 {
          position: absolute;
          top: -60px;
          left: 50%;
          transform: translateX(-50%) rotate(-6deg);
          text-align: center;
          width: 320px;
          max-width: 100%;
          span {
            background-color: #c5a8fa;
            color: #000;
            font-weight: bold;
            padding: 0px 5px;
            text-align: center;
          }
          span:last-child {
            display: block;
            padding: 5px 5px 5px 5px;
          }
        }
      }
      .div-caption2 {
        background-color: #fff;
        padding: 30px 10px 30px 10px;
        border-radius: 30px;
        position: relative;
        padding-top: 60px;
        width: 538px;
        max-width: 100%;
        float: right;
        span {
          position: absolute;
          top: -23px;
          left: 50%;
          font-size: 22px;
          background-color: #c5a8fa;
          color: #000;
          text-align: center;
          transform: translateX(-50%) rotate(-4deg);
          display: inline;
          font-weight: bold;
          width: 355px;
          max-width: 100%;
          padding: 5px;
        }
        .div-ex {
          .ex-txt {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
          }
          p {
            font-weight: bold;
            width: 310px;
            max-width: 100%;
          }
          img {
            margin-bottom: -10%;
          }
        }
        img.img-bulle {
          position: absolute;
          left: -30%;
          top: -40%;
          width: 40%;
        }
      }
    }
  }
  a.btn-ex {
    background-color: #000;
    border-radius: 35px;
    color: #fff;
    font-size: 18px;
    font-family: var(--text-font-poppins);
    padding: 10px 15px;
    display: block;
    text-decoration: unset;
    text-align: center;
    width: 276px;
    max-width: 100%;
    float: right;
    &:hover {
      background-color: #ffff;
      color: #000;
    }
  }
}

section.section-fin {
  background: transparent linear-gradient(300deg, #dbbad7 0%, #a3c2e1 100%) 0%
    0% no-repeat padding-box;
  align-items: center;
  .rows-head {
    .div-steps {
      display: none;
    }
  }
  .rows {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    width: 1680px;
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 30px;
    .div-left {
      width: 50%;
      .div-content {
        width: 600px;
        max-width: 100%;
        h1 {
          font-weight: bolder;
        }
        p {
          margin-bottom: 20px;
        }
      }
      &.div-center {
        .div-content {
          text-align: center;
          h1 {
            font-size: 40px;
          }
        }
      }
    }
    .div-right {
      width: 50%;
      .btn-soutenir {
        display: none;
      }
      &.div-white {
        .div-img {
          background-color: #fff;
          padding: 30px 30px 69px 30px;
          border-radius: 30px;
          position: relative;
          width: 650px;
          max-width: 100%;
          margin: 0 auto;
          .div-progress {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            gap: 10px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            span {
              font-size: 25px;
              font-weight: bolder;
            }
          }
        }
      }
    }
  }
  .btn-soutenir {
    width: 364px;
    background: #ed96b0;
    border: 4px solid #fff;
    border-radius: 30px;
    color: #fff;
    text-decoration: unset;
    padding: 10px 15px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    &:hover {
      background: #fff;
      border-color: #ed96b0;
      color: #ed96b0;
    }
  }
  &.section-uploadimg {
    height: 100%;
    flex-direction: column;
    .rows {
      margin-top: -60px;
      .div-left {
        width: 30%;
        max-width: 100%;
        h2 {
          font-weight: bolder;
          font-size: 50px;
        }
      }
      .div-right {
        width: 70%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 30px;
        .div-img {
          width: 40%;
        }
        .div-form {
          width: 60%;
          .div-txt {
            background-color: #fff;
            padding: 30px 30px 30px 30px;
            border-radius: 30px;
            position: relative;
            padding-top: 60px;
            width: 670px;
            max-width: 100%;
            float: right;
            h3 {
              position: absolute;
              top: -21px;
              left: 50%;
              transform: translateX(-50%) rotate(-3deg);
              width: 400px;
              max-width: 100%;
              background-color: #c5a8fa;
              color: #000;
              font-weight: bold;
              text-align: center;
              padding: 5px;
            }
            p {
              text-align: center;
              font-size: 18px;
              margin-bottom: 15px;
            }
            span.span-depose {
              font-size: 25px;
              text-align: center;
              display: block;
              color: #000000;
              font-weight: bold;
            }
            span.span-forma {
              color: #c5a8fa;
              font-size: 16px;
              font-weight: 500;
              text-align: center;
              display: block;
              margin: 15px 0px 20px 0px;
            }

            label.form-check-label {
              display: block;
            }
          }
        }
      }
    }

    .rows-footer {
      background-color: #fff;
      width: 100%;
      max-width: 100%;
      .rows {
        gap: 30px;
        margin-top: 5%;
        align-items: flex-start;
        .col-left {
          width: 50%;
          h3 {
            font-weight: bolder;
            margin-bottom: 30px;
          }
          p {
            margin-bottom: 20px;
          }
          .div-btn {
            margin-bottom: unset;
            margin-top: 35px;
            display: block;
            text-align: left;
            .btn-continue {
              font-size: 20px;
              text-align: center;
              width: fit-content;
              &:hover {
                background-color: rgb(197 168 250 / 50%);
              }
            }
          }
        }
        .col-right {
          width: 50%;
          .div-items {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 842px;
            max-width: 100%;
            gap: 10px;
            margin-bottom: 20px;
            .item {
              position: relative;
              width: 234px;
              max-width: 100%;
              height: 270px;
              background: red;
              display: flex;
              align-items: center;
              flex-direction: column;
              justify-content: center;
              gap: 10px;
              border-radius: 20px;
              padding: 15px;

              span {
                color: var(--unnamed-color-000000);
                text-align: center;
                font-size: 55px;
                font-weight: 600;
              }
              p {
                text-align: center;
              }
              a.don-link {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .item1 {
              background: var(--unnamed-color-ece7f7) 0% 0% no-repeat
                padding-box;
            }
            .item2 {
              background: #d0e1fc 0% 0% no-repeat padding-box;
            }
            .item3 {
              background: #d6eadf 0% 0% no-repeat padding-box;
            }
          }

          .div-btn {
            display: none;
            margin-bottom: unset;
            margin-top: 35px;
            text-align: left;
            .btn-continue {
              font-size: 20px;
              text-align: center;
              &:hover {
                background-color: rgb(197 168 250 / 50%);
              }
            }
          }
        }
      }
    }
    .image-input {
      text-align: center;
      padding: 8% 0px;
    }
    .image-input input {
      display: none;
    }
    .image-input label {
      color: #fff;
      background: #000;
      padding: 5px 20px;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      width: 370px;
      max-width: 100%;
      border-radius: 58px;
      justify-content: space-between;
      margin: 0 auto;
      gap: 10px;
    }
    .image-input label i {
      font-size: 125%;
      margin-right: 0.3rem;
    }

    .image-input img:not(.icon-img) {
      max-width: 175px;
      display: none;
      margin: 0 auto;
    }

    .image-input span {
      display: none;
      text-align: center;
      cursor: pointer;
    }
    .image-input small {
      display: none;
    }
    .div-btn {
      display: none;
    }

    div.text-center {
      span {
        font-size: 14px;
      }
    }
  }

  button.btn-ex {
    background-color: #000;
    border-radius: 35px;
    color: #fff;
    font-size: 18px;
    font-family: var(--text-font-poppins);
    padding: 15px 20px;
    display: block;
    text-decoration: unset;
    text-align: center;
    width: 360px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    font-weight: 600;
    border: unset;
  }
  .div-btn {
    small {
      display: none;
    }
  }
}
/***************************Media query**************************/
.fade-in-bottom {
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1)
    both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@media (max-width: 1440px) {
  body h1 {
    font-size: 45px;
  }
  body h2 {
    font-size: 30px;
  }

  body p {
    font-size: 16px;
  }

  section {
    height: 100%;
    flex-direction: column;
    .header {
      position: relative;
      padding: 15px 15px 0px 15px;
      & .rows-head {
        img {
          width: 120px;
        }
      }
    }
    .row {
      .div-right {
        .div-txt {
          padding: 60px 30px 35px 30px;
        }
      }
      ul {
        li {
          label {
            height: 85px;
            span {
              font-size: 18px;
            }
          }
        }
      }
    }
    .div-bottom {
      .div-rest-q {
        font-size: 14px;
        span {
          font-size: 20px;
        }
      }
      img {
        right: 3%;
      }
    }
  }

  .section-home {
    .row {
      margin-top: -8%;
      .div-left {
        width: 65%;
        .div-txt {
          bottom: 25%;
        }
      }
      .div-form {
        form {
          button {
            font-size: 16px;
          }
        }
        .div-txt {
          span {
            font-size: 18px;
            width: 80%;
          }
        }
      }
    }
  }

  .section-Q1,
  .section-Q2,
  .section-Q3,
  .section-Q4,
  .section-Q5,
  .section-Q6 {
    .header {
      padding-bottom: 30px;
      .rows-head {
        .div-steps {
          img {
            width: 70px;
          }
        }
      }
    }

    .row {
      &.row-q {
        .div-right {
          padding-top: 5%;
        }
      }
    }
    .div-bg {
      width: 60%;
    }
  }

  .section-Q4 {
    .div-bg-Q1 {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 2;
      width: 18%;
    }
  }
  section.reponse {
    .rows {
      &.rows-r {
        padding: 0px 20px 20px 20px;
        margin-top: -60px;
      }
      .div-left {
        width: 31%;
        margin-right: -10%;
      }

      .div-right {
        width: 35%;

        .div-caption {
          h3 {
            font-size: 30px;
            width: 290px;
          }
          p {
            margin-bottom: 10px;
          }
        }
        .div-caption2 {
          padding: 40px 10px 20px 10px;
          .div-ex {
            img {
              width: 110px;
            }
          }
          span {
            font-size: 20px;
            width: 340px;
          }
        }
      }
    }
    a.btn-ex {
      font-size: 16px;
    }
  }

  section.section-fin {
    &.section-uploadimg {
      .rows {
        .div-right {
          .div-txt {
            padding: 30px 30px 30px 30px;
            padding-top: 60px;
            width: 560px;
          }
        }
      }

      .rows-footer {
        .rows {
          .col-right {
            .div-items {
              flex-wrap: wrap;
              justify-content: center;
              .item {
                width: 45%;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  body h1 {
    font-size: 38px;
  }
  body h2 {
    font-size: 30px;
  }
  section {
    .row {
      ul {
        li {
          label {
            padding: 10px 20px;
            span {
              font-size: 16px;
            }
          }
        }
      }
    }
    .div-bottom {
      .div-rest-q {
        width: 30%;
      }
      p {
        width: 38%;
        font-size: 14px;
      }
      img {
        width: 120px;
      }
    }
  }

  .section-home {
    .row {
      .div-left {
        width: 50%;
        display: flex;
        flex-direction: column-reverse;
        .div-txt {
          position: relative;
          left: unset;
          text-align: left;
          width: 100%;
        }
      }
      .div-form {
        form {
          button {
            font-size: 16px;
          }
        }
        .div-txt {
          span {
            font-size: 18px;
            width: 80%;
          }
        }
      }
    }
  }

  section.reponse {
    .rows {
      .div-right {
        .div-caption {
          padding: 40px 20px 30px 20px;
          h3 {
            font-size: 25px;
            width: 245px;
          }
          span.span-title {
            font-size: 18px;
          }
          p {
            font-size: 14px;
          }
        }
        .div-caption2 {
          .div-ex {
            p {
              font-size: 14px;
              width: unset;
            }
            img {
              margin-bottom: unset;
            }
          }
          span {
            font-size: 18px;
            width: 300px;
          }
        }
      }
    }
    a.btn-ex {
      width: 100%;
      max-width: 100%;
    }
  }
}
@media (max-width: 1070px) {
  body h3 {
    font-size: 25px;
  }
  .section-site {
    section {
      flex-direction: column;
      .header {
        position: relative;
        margin-bottom: 30px;
      }

      &.section-uploadimg {
        /* .header {
          position: fixed;
          margin-bottom: unset;
        } */
        .rows {
          margin-top: 10%;
          .div-right {
            .div-form {
              .div-txt {
                h3 {
                  width: 325px;
                }
              }
            }
          }
        }
        .rows-footer {
          .rows {
            .col-right {
              .div-items {
                .item {
                  span {
                    font-size: 40px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  /* .section-site {
    section.reponse {
      flex-direction: unset;
    }
  } */
  section {
    .row {
      .div-left {
        width: 58%;
      }
      .div-right {
        width: 40%;
        .div-txt {
          width: 100%;
          img {
            top: -30px;
          }
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .section-site {
    section.reponse {
      flex-direction: column;
      .header {
        position: relative;
      }
    }
  }

  section.reponse {
    .rows {
      .div-center {
        display: none;
      }
      gap: 4%;
      .div-left {
        width: 48%;
        .div-img-m {
          display: block;
        }
      }
      .div-right {
        width: 48%;
      }
    }
  }
}

@media (max-width: 980px) {
  .header {
    padding-bottom: 30px;
    .rows-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 30px;
      .div-steps {
        margin: 0 auto;
      }
    }
  }
}
@media (max-width: 800px) {
  body h1 {
    font-size: 35px;
  }

  .header {
    position: relative !important;
    margin-bottom: unset !important;
    img.logo {
      width: 130px;
    }
    .rows-head {
      .div-steps {
        img {
          width: 68px;
          max-width: 68px;
        }
      }
    }
  }

  section {
    height: 100%;
    .row {
      &.row-q {
        flex-direction: column;
        .div-left,
        .div-right {
          width: 100%;
          .div-txt {
            float: unset;
            margin-bottom: 30px;
            img {
              top: -60px;
            }
          }
        }
      }
      .div-bottom {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 30px;
        overflow: hidden;
        .div-rest-q {
          width: 100%;
          border-radius: 30px 30px 0px 0px;
        }
        p {
          width: 60%;
          order: 3;
        }
        img {
          width: 120px;
          position: relative;
          transform: unset;
          right: unset;
          top: unset;
        }
      }
    }

    .div-btn {
      margin-bottom: 12%;
    }

    .d-desk {
      display: none;
    }
    .d-mobile {
      display: flex;
    }
  }

  .section-home {
    .row {
      flex-direction: column;
      padding-top: unset;
      margin-top: unset;
      .div-left {
        width: 85%;
      }
      .div-form {
        width: 85%;
      }
    }
  }

  .section-Q1,
  .section-Q2,
  .section-Q3,
  .section-Q4,
  .section-Q5,
  .section-Q6 {
    .row {
      z-index: 2;
    }
  }

  section.reponse {
    .rows {
      flex-direction: column;
      &.rows-r {
        margin-top: unset;
      }
      .div-left {
        width: 100%;
        margin-right: unset;
        h1 {
          text-align: center;
          span {
            display: block;
          }
        }
      }
      .div-right {
        width: 100%;
        .div-caption {
          width: 100%;
        }
        .div-caption2 {
          width: 100%;
          padding-top: 80px;
          .ex-head {
            position: absolute;
            top: -90px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: row-reverse;
            span {
              position: relative;
              top: unset;
              left: unset;
              right: 0;
              transform: rotate(-4deg);
              width: unset;
              padding: 5px;
            }
            img {
              position: relative;
              left: unset;
              top: unset;
              width: 190px;
              max-width: 100%;
            }
          }
          .div-ex {
            .ex-txt {
              width: 80%;
              margin: 0 auto;
            }
          }
        }
      }
    }

    a.btn-ex {
      width: 60%;
      max-width: 100%;
      float: unset;
      margin: 0 auto;
    }
  }

  section.section-fin {
    .rows {
      flex-direction: column;
      padding-bottom: 30px;
      .div-left {
        width: 100%;
        .div-content {
          width: 100%;
          text-align: center;
          padding: 0px 15px;
        }
        .btn-soutenir {
          display: none;
        }
      }
      .div-right {
        width: 100%;
        .btn-soutenir {
          display: block;
          margin: 0 auto;
        }
      }
    }

    &.section-uploadimg {
      .rows {
        margin-top: unset;
        gap: 30px;
        .div-left {
          width: 100%;
          margin-bottom: 35px;
        }
        .div-right {
          width: 100%;
          flex-direction: column;
          .div-img {
            width: 100%;
            text-align: center;
          }
          .div-form {
            width: 100%;
            .div-txt {
              margin: 0 auto;
              float: unset;
            }
          }
        }
      }

      .rows-footer {
        .rows {
          .col-left {
            width: 100%;
          }
          .col-right {
            width: 100%;
          }
        }
      }
    }
  }
}
@media (max-width: 490px) {
  body h2 {
    font-size: 20px;
  }

  section {
    .row {
      &.row-q {
        .div-left,
        .div-right {
          padding: unset;
        }
      }
      ul {
        li {
          label {
            span:first-child {
              font-size: 20px;
            }
          }
        }
      }
    }

    .div-bottom {
      padding-bottom: 20px;
      .div-rest-q {
        font-size: 18px;
        padding: 10px 0px;
        span {
          font-size: 30px;
        }
      }
    }

    &.section-fin {
      .div-btn {
        .btn-continue {
          width: fit-content;
        }
      }
    }
  }

  .section-home {
    .row {
      .div-left {
        width: 100%;
        padding: unset;
        margin-bottom: 30px;
      }
      .div-form {
        width: 100%;
      }
    }
  }

  .section-Q1,
  .section-Q2,
  .section-Q3,
  .section-Q4,
  .section-Q5,
  .section-Q6 {
    .row {
      &.row-q {
        padding-bottom: 45%;
      }
    }
    .div-bg-Q1,
    .div-bg {
      width: 100%;
    }
  }

  /* .section-Q4 {
    .header {
      .rows-head {
        .div-steps {
          margin-left: -68%;
        }
      }
    }
  } */

  .section-Q4 {
    .header {
      .rows-head {
        .div-steps {
          flex-direction: row;
          margin: 0 auto;
          > div:not(.div-step-3, .div-step-4, .div-step-5) {
            display: none;
          }
        }
      }
    }
  }
  .section-Q5,
  .section-Q6 {
    .header {
      .rows-head {
        .div-steps {
          flex-direction: row;
        }
      }
    }
  }
  .section-Q5 {
    .header {
      .rows-head {
        .div-steps {
          flex-direction: row;
          margin: 0 auto;
          > div:not(.div-step-6, .div-step-5, .div-step-4) {
            display: none;
          }
        }
      }
    }
  }
  .section-Q6 {
    .header {
      .rows-head {
        .div-steps {
          flex-direction: row;
          margin: 0;
          > div:not(.div-step-6, .div-step-5) {
            display: none;
          }
        }
      }
    }
  }

  section.reponse {
    .rows {
      .div-left {
        width: 100%;
        margin-right: unset;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20%;
        h1 {
          font-size: 25px;
          text-align: right;
        }
      }

      .div-right {
        .div-caption {
          margin-bottom: 28%;
        }
        .div-caption2 {
          width: 100%;
          .ex-head {
            width: 100%;
            img {
              width: 150px;
            }
          }
          .div-ex {
            .ex-txt {
              width: 100%;
            }
          }
        }
      }
    }
    a.btn-ex {
      width: 100%;
    }
  }

  section.section-fin {
    .rows {
      .div-left {
        width: 100%;
      }
      .div-right {
        width: 100%;
      }
    }

    &.section-uploadimg {
      .rows {
        .div-left {
          h2 {
            font-weight: bolder;
            font-size: 35px;
          }
        }
      }

      .rows-footer {
        .rows {
          .col-left {
            width: 100%;
            .div-btn {
              display: none;
            }
          }
          .col-right {
            width: 100%;
            .div-items {
              flex-direction: column;
              .item {
                width: 100%;
              }
            }
            .div-btn {
              display: block;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 375px) {
  section {
    .row {
      ul {
        li {
          label {
            padding: 10px 20px 10px 10px;
            span {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  section.reponse {
    .rows {
      .div-left {
        h1 {
          font-size: 20px;
          text-align: right;
        }
      }
    }
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2025-5-28 16:54:54
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}