#home {
  background: url("../images/background-image-home-8oh1ysn.webp") #ffffff 50% / cover no-repeat;
  &.container {
    max-width: 100%;
  }
  @media (min-width: 768px) {
    > div {
      max-width: 750px;
    }
  }
  @media (min-width: 992px) {
    .> div {
      max-width: 970px;
    }
  }
  @media (min-width: 1200px) {
    > div {
      max-width: 1170px;
    }
  }
  .ip-notice {
    margin-bottom: 0;
    top: 10px;
    @media (min-width: 768px) {
      top: 18px;
    }
  }
  > div {
    margin-right: auto;
    margin-left: auto;
    z-index: 1;
    position: relative;
    display: flex;
    padding: 20px 20px 40px 20px;
    @media screen and (min-width: 992px) {
      padding: 40px 20px 80px 20px;
      gap: 60px;
    }
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .first-part {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    @media screen and (min-width: 768px) {
      gap: 10px;
    }
    align-self: stretch;
    flex-direction: column;
    @media screen and (min-width: 992px) {
      flex-direction: row;
    }
    h1 {
      color: #4D5356;
      font-family: myriad-pro, Arial, sans-serif;
      font-size: 23px;
      font-style: normal;
      line-height: 125%; /* 62.5px */
      letter-spacing: 3px;
      display: flex;
      flex-basis: 33%;
      margin-bottom: 0;
      text-align: center;
      @media screen and (min-width: 992px) {
        font-size: 33px;
        text-align: left;
      }
    }
    > div {
      display: flex;
      flex-direction: row;
      align-items: center;
      align-self: stretch;
      flex: 1 0 0;
      flex-wrap: wrap;
      div {
        display: flex;
        padding: 0 0 20px 0;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        flex-basis: 50%;
        @media screen and (min-width: 768px) {
          padding: 0 24px 40px 24px;
        }
        text-align: center;
        p {
          color: #4D5356;
          text-align: center;
          font-family: myriad-pro, Arial, sans-serif;
          font-size: 16px;
          font-style: normal;
          line-height: 160%; /* 25.6px */
          @media screen and (min-width: 768px) {
            letter-spacing: 1.92px;
          }
          margin-bottom: 0;
        }
      }
    }
  }
  .first-part-bis {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    @media screen and (min-width: 768px) {
      gap: 10px;
    }
    align-self: stretch;
    flex-direction: column;
    @media screen and (min-width: 1200px) {
      flex-direction: row;
    }
    h1 {
      color: #4D5356;
      font-family: myriad-pro, Arial, sans-serif;
      font-size: 25px;
      font-style: normal;
      line-height: 125%; /* 62.5px */
      letter-spacing: 3px;
      display: flex;
      text-align: center;
      width: 100%;
      @media screen and (min-width: 992px) {
        font-size: 33px;
      }
      @media screen and (min-width: 1200px) {
        text-align: left;
      }
      margin-bottom: 0;
      + p {
        color: #4D5356;
        font-family: myriad-pro, Arial, sans-serif;
        font-size: 20px;
        font-style: normal;
        text-align: center;
        margin: 5px 0 0 0 ;
        width: 100%;
        @media screen and (min-width: 992px) {
          font-size: 26px;
          margin-bottom: 35px;
        }
        @media screen and (min-width: 1200px) {
          text-align: left;
        }
      }
    }
    > div {
      display: flex;
      flex-direction: row;
      align-items: center;
      align-self: center;
      //flex: 1 0 0;
      flex-wrap: wrap;
      div {
        display: flex;
        flex-direction: column;
        padding: 0 0 20px 0;
        align-items: center;
        align-self: stretch;
        flex-basis: 50%;
        @media screen and (min-width: 768px) {
          flex-direction: row;
          padding: 0 24px 40px 24px;
        }
        text-align: center;
        p {
          color: #4D5356;
          text-align: center;
          font-size: 16px;
          line-height: 160%;
          font-family: myriad-pro, Arial, sans-serif;
          font-style: normal;
          @media screen and (min-width: 768px) {
            letter-spacing: 1.92px;
            text-align: left;
            font-size: 14px;
            line-height: 18px;
          }
          margin-bottom: 0;
        }
      }
    }
  }
  .avantages {
    @media screen and (min-width: 992px) {
      padding: 0 100px;
    }
    > div {
      padding: 30px;
      @media screen and (min-width: 768px) {
        padding: 40px 60px;
      }
      border-radius: 40px;
      background: #FFF;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 28px;
      align-self: stretch;
      img {
        display: none;
        @media screen and (min-width: 992px) {
          display: block;
        }
      }
      > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        flex: 1 0 0;
        p {
          color: #4D5356;
          font-family: myriad-pro, Arial, sans-serif;
          font-size: 22px;
          font-style: normal;
          letter-spacing: 1.5px;
          margin-bottom: 0;
          line-height: 28px;
          @media screen and (min-width: 768px) {
            line-height: 37.5px;
          }
        }
        ul {
          @media screen and (min-width: 768px) {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: space-between;
          }
          padding: 0;
          margin: 0;
          li {
            color: var(--GREY, #4D5356);
            font-family: myriad-pro, Arial, sans-serif;
            font-size: 16px;
            font-style: normal;
            line-height: 24px;
            letter-spacing: 0.96px;
            display: flex;
            @media screen and (min-width: 768px) {
              flex-basis: 48%;
            }
            gap: 8px;
            align-items: flex-start;
            i {
              color: #ec1625;
              top: 4px;
              position: relative;
            }
          }
        }
      }
    }
  }
  .domains {
    > div {
      @media screen and (min-width: 992px) {
        padding: 0 100px;
      }
      ul {
        @media screen and (min-width: 768px) and (min-width: 991px) {
          column-width: 13.7rem;
        }
        @media screen and (min-width: 992px) {
          column-width: 12rem;
          max-height: 339px;
        }
        @media screen and (min-width: 1200px) {
          column-width: 16.4rem;
          max-height: 339px;
        }
        li {
          @media screen and (min-width: 768px) {
            height: 67px;
          }
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .website-description {
    width: 100%;
    > div {
      /*display: flex;*/
      /*justify-content: center;
      align-items: flex-start;*/
      /*align-self: stretch;*/
      padding: 20px 30px;
      gap: 60px;
      border-radius: 40px;
      background: #FFF;
      @media screen and (min-width: 768px) {
        margin: 0 40px;
        padding: 40px 60px;
        columns: 2;
        column-width: 17.2rem;
      }
      .title {
        margin-bottom: 20px;
        color: #EC1625;
        font-size: 25px;
        letter-spacing: 1px;
      }
      p {
        color: #4D5356;
        font-family: myriad-pro, Arial, sans-serif;
        font-size: 14px;
        font-style: normal;
        line-height: 150%; /* 21px */
        letter-spacing: 0.84px;
      }
    }
  }
  .best-offers {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    @media screen and (min-width: 768px) {
      align-items: center;
    }
    > p {
      padding: 0 15px;
      color: #4D5356;
      font-family: myriad-pro, Arial, sans-serif;
      font-size: 28px;
      text-align: center;
      @media screen and (min-width: 768px) {
        font-size: 50px;
      }
      font-style: normal;
      line-height: 150%; /* 75px */
      letter-spacing: 3px;
      margin-bottom: 0;
    }
  }
}

#slider-best-offers {
  display: none;
  width:100%;
  position: relative;
  .slides-best-offers {
    margin: 0;
    @media screen and (min-width: 768px) {
      margin: 0 30px;
    }
    .best-offer {
      padding-bottom: 10px;
      > div {
        margin: 0 10px;
        @media screen and (min-width: 768px) {
          margin: 0 16px;
        }
        border-radius: 40px;
        background: #FFF;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 40px;
        gap: 20px;
        height: 100%;
        img {
          width: 100%;
          border-top-left-radius: 40px;
          border-top-right-radius: 40px;
        }
        .title {
          color: #555555;
          font-family: myriad-pro, Arial, sans-serif;
          font-size: 24px;
          font-style: normal;
          line-height: 100%;
          letter-spacing: 3px;
          padding: 0 20px;
          height: 76px;
          margin-bottom: 0;
        }
        .catchphrase {
          color: #555;
          font-family: myriad-pro, Arial, sans-serif;
          font-size: 16px;
          font-style: normal;
          line-height: 160%;
          padding: 0 30px;
          height: 132px;
        }
        a {
          text-decoration: none;
          display: flex;
          height: 48px;
          padding: 0 32px;
          justify-content: center;
          align-items: center;
          gap: 10px;
          border-radius: 1000px;
          border: 1px solid #74B504;
          background: #ffffff;
          span {
            color: #74B504;
            text-align: center;
            font-family: myriad-pro-bold, Arial, sans-serif;
            font-size: 14px;
            font-style: normal;
            line-height: 125%;
            letter-spacing: 1.68px;
          }
          &:hover {
            background: #74B504;
            span {
              color: #FFF;
            }
          }
        }
      }
    }
  }
  .slick-prev,
  .slick-next {
    position: absolute;
    height: 100%;
    top: 0;
    background: none;
    border: none;
  }
  .slick-prev {
    font-size: 0;
    left: -40px;
    &:before {
      content: url("../images/chevron-left-solid-xrfreL8.svg");
      width: 20px;
      display: block;
    }
  }
  .slick-next {
    font-size: 0;
    right: -40px;
    &:before {
      content: url("../images/chevron-right-solid-_rhwoII.svg");
      width: 20px;
      display: block;
    }
  }
}