/* ---------------------- 
Reset CSS
---------------------- */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  * {
  -webkit-font-smoothing: antialiased;
  -webkit-transition: 0.4s all;
  -o-transition: 0.4s all;
  transition: 0.4s all;
  }
  img{
    max-width: 100%;
    max-height: 100%;
  }

/**********************
Font Family : Sofia Pro 
**********************/
  @font-face {
    font-family: Raleway;
    src: local("Raleway Regular"),
         local("Raleway-Regular"),
         url(assets/font/RalewayRegular.ttf);
    font-weight: 400;
  }
  @font-face {
    font-family: Raleway;
    src: local("Raleway Medium"),
         local("Raleway-Medium"),
         url(assets/font/RalewayMedium.ttf);
    font-weight: 500;
  }
  @font-face {
    font-family: Raleway;
    src: local("Raleway Semi Bold"),
         local("Raleway-SemiBold"),
         url(assets/font/RalewaySemiBold.ttf);
    font-weight: 600;
  }
  @font-face {
    font-family: Raleway;
    src: local("Raleway Bold"),
         local("Raleway-Bold"),
         url(assets/font/RalewayBold.ttf);
    font-weight: 700;
  }
  em{font-style: italic;}

/**********************
Typography
**********************/
  .display-one{font-family: "Raleway";font-size: 51px;line-height: 60px;}
  .display-two{font-family: "Raleway";font-size: 28px;line-height:38px;}
  .display-three{font-family: "Raleway";font-size: 25px;line-height:35px;}
  .display-four{font-family: "Raleway";font-size: 20px;line-height:24px;}

  .big-text{font-family: "Raleway";font-size: 37px;line-height: 44px;}

  .medium-text{font-family: "Raleway";font-size: 20px;line-height:24px;}

  .sub-text{font-family: "Raleway";font-size: 18px;line-height:24px;}

  .normal-text{font-family: "Raleway";font-size: 16px;line-height:22px;}

  .regular{font-weight: 400;}
  .medium{font-weight: 500;}
  .semi-bold{font-weight: 600;}
  .bold{font-weight: 700;}

  .text-left{text-align: left;}
  .text-center{text-align: center;}
  .text-right{text-align: right;}

  .m-auto{margin: 0 auto;}

/**********************
Colorization
**********************/
  
  /* Background color */
  .bg-black{background-color:#1B1D1E;}
  .bg-white{background-color: #FFFFFF;}
  .bg-green{background-color:#007C82;}
  .bg-grey{background-color: #E8EDF0;}
  .bg-blue{background-color: #A7BFCF;}
  .bg-red{background-color: #DE1515;}
  .bg-beige{background-color: #FFF4E8;}

  /* Color */
  .black{color:#1B1D1E;}
  .white{color: #FFFFFF;}
  .green{color:#007C82;}
  .grey{color: #E8EDF0;}
  .blue{color: #A7BFCF;}
  .red{color: #DE1515;}
  .beige{color: #FFF4E8;}

/**********************
Fix Position
**********************/
  .fix {
    position: sticky;
    top: 130px;
  }

/**********************
Section Navigation
**********************/
  nav{
    position: fixed;
    width: 100%;
    z-index: 999;
  }
  nav > .container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 40px;
  }
  nav > .container > .burger{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
  }
  nav > .container > .burger > div{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    margin-right: 10px;
  }
  nav > .container > .burger span{
    width: 15px;
    height: 2px;
  }
  nav > .container > .burger span:last-child {
    width: 20px;
    height: 2px;
  }
  nav > .container > .burger:hover span{
    width: 20px;
  }

/**********************
Navigation 
**********************/

  /* Navigation Content */
  .container-nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    max-width: 380px;
    right: 0;
    z-index: 999;
    -webkit-transform: translate(150%, 0%);
        -ms-transform: translate(150%, 0%);
            transform: translate(150%, 0%);
  }
  .container-nav > .wrapper{
    padding: 40px 40px;
    width: 100%;
  }

  /* Others */
  .circle-yellow{
    width: 10px;
    height: 10px;
    background: #ffe353;
    border-radius: 100%;
    margin-right: 10px;
    mix-blend-mode: exclusion;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  .icon-close{
    width: 11px;
    margin-right: 10px;
  }

  /* Button Navigation */
  #closeMenu, .title-nav{
    -webkit-transform: translate(100%,0);
        -ms-transform: translate(100%,0);
            transform: translate(100%,0);
    opacity: 0;
  }
  #closeMenu .icon-close {
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  #closeMenu:hover .icon-close {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }

  #openMenu, #return{
    cursor: pointer;
  }
  #openMenu .open-nav, #return .return-home {
    background: -o-linear-gradient(#FFE353, #FFE353) left no-repeat, #FFFFFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#FFE353), to(#FFE353)) left no-repeat, #FFFFFF;
    background: linear-gradient(#FFE353, #FFE353) left no-repeat, #FFFFFF;
    background-size: 0% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    cursor: pointer;
  }
  #openMenu:hover .open-nav {
    background-size: 100% 100%;
  }
  .link-nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .link-nav > div {
    width: 0px;
    height: 0px;
    border-radius:100%;
    margin-right: 0px;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  .link-nav:hover > div{
    margin-right: 10px;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }
  .close-nav, .link-nav > p {
    background: -o-linear-gradient(#007C82, #007C82) left no-repeat, #1B1D1E;
    background: -webkit-gradient(linear, left top, left bottom, from(#007C82), to(#007C82)) left no-repeat, #1B1D1E;
    background: linear-gradient(#007C82, #007C82) left no-repeat, #1B1D1E;
    background-size: 0% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    cursor: pointer;
  }
  .close-nav:hover, .link-nav > p:hover {
    background-size: 100% 100%;
  }

/**********************
Section Header
**********************/

  #header {
    position: relative;
    padding: 200px 0 0 0;

    background-image:-o-linear-gradient(left , rgb(232 237 240 / 100%), rgb(232 237 240 / 97%), rgb(232 237 240 / 40%), rgb(232 237 240 / 00%), rgb(232 237 240 / 0%)), url('assets/img/h-maryamgadery-maj.jpg');

    background-image:-webkit-gradient(linear , left top, right top , from(rgb(232 237 240 / 100%)), color-stop(rgb(232 237 240 / 97%)), color-stop(rgb(232 237 240 / 40%)), color-stop(rgb(232 237 240 / 00%)), to(rgb(232 237 240 / 0%))), url('assets/img/h-maryamgadery-maj.jpeg');

    background-image:linear-gradient(90deg , rgb(232 237 240 / 100%), rgb(232 237 240 / 97%), rgb(232 237 240 / 40%), rgb(232 237 240 / 00%), rgb(232 237 240 / 0%)), url('assets/img/h-maryamgadery-maj.jpg');
    background-color: #707070;
    background-position: center center;
    background-size: cover;
    
    opacity: 1;
  }
  #header > .container{
    max-width: 1100px;
    padding: 0 10px;
    margin: 0 auto;
  }
  #header > .container > .display-two {
    max-width: 485px;
  }
  #header > .container > a {
    text-decoration: none;
  }
  #header > .container > a > .h-button{
    width: 168px;
    border-radius: 5px;
  }
  #header > .container > a > .h-button > p{
    padding: 17px 40px;
  }
  #header > .container > .h-line{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #header > .container > .h-line > .line{
    width: 1px;
    height: 40px;
  }

/**********************
Separator
**********************/
  #separator.h-line{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #separator.h-line > .line{
    width: 1px;
    height: 40px;
  }

/**********************
Section guide
**********************/
  #guide > .container{
    max-width: 1100px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #guide > .container > .wrapper{padding:0 10px;}
  #guide > .container > .wrapper > .wrap > .wrap-content{display: -webkit-box;display: -ms-flexbox;display: flex;}
  #guide > div > div:nth-child(1) > div.wrap > div:nth-child(1){
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end; 
  }
  #guide > div > div:nth-child(1) > div.wrap > div:nth-child(3){
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  #guide > div > div:nth-child(1) > div.wrap > div:nth-child(5){
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #guide > div > div:nth-child(1) > div.wrap > div:nth-child(7){
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  #guide > div > div:nth-child(1) > div.wrap > div:nth-child(9){
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  #guide > .container > .wrapper > .fix > a > .wrap > .wrap-btn{
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 42px;
  }
  #guide > .container > .wrapper > .fix > a > .wrap > .wrap-btn > .h-button{
    width: 142px;
    border-radius: 5px;
    margin: auto;
    box-shadow: 0px 0px 15px rgba(0, 124, 130, 0.25);
  }
  #guide > .container > .wrapper > .fix > a > .wrap > .wrap-btn > .h-button > p{
    padding: 10px 27px;
  }

/**********************
Section édito
**********************/

  #edito > .container {
    padding: 240px 0 0 0;
    margin: 0 10px;
  }
  
/**********************
Section about
**********************/

  #about > .container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 0 auto;
    max-width: 1100px;
    padding: 10px;
  }
  #about > .container > .wrapper{
    padding: 0 10px;
    width: 100%;
    max-width: 490px;
  }
  #about > .container > .wrapper > .title-line{
    width: 50px;
    height: 1px;
  }
  #about > .container > .wrapper > a.btn-prog{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-decoration: none;
  }
  #about > .container > .wrapper > a.btn-prog > img{
    margin-right: 10px;
  }
  #about > .container > .wrapper > .card-reviews{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 5px;
    padding: 40px 30px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-shadow: 0px 0px 45px rgba(255, 244, 233, 0.65);
            box-shadow: 0px 0px 45px rgba(255, 244, 233, 0.65);
  }

/**********************
Section programme
**********************/

  #programme > .intro {
    max-width: 1100px;
    padding: 0 10px;
  }
  #programme > .intro > .container {
    max-width: 550px;
  }
  #programme > .intro > .container > .arrow-down {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

  #programme > .card-price {
    max-width: 710px;
    border-radius: 10px;
  }

  #programme > .card-price > .container{
    border: 2px solid #007c81;
    background: #fff4e8;
    border-radius: inherit;
    margin: 0 10px;
    -webkit-box-shadow: 0px 0px 35px rgb(166 191 205 / 25%);
            box-shadow: 0px 0px 35px rgb(166 191 205 / 25%); 
  }
  #programme > .card-price > .container > .title{
    padding: 22px;
    border-radius: 10px 10px 0 0;
  }
  #programme > .card-price > .container > .title > p{
    text-transform: uppercase;
    text-align: center;
  }
  #programme > .card-price > .container > .content-table{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 20px;
  }
  #programme > .card-price > .container > .content-table > img,
  #programme > .card-price > .container > .content-table > p {
    margin: 0 10px;
  }
  #programme > .card-price > .container > .line {
    width: 100%;
    height: 2px;
    background-color: #007C82;
    opacity: 0.1;
  }
  #programme > .card-price > .container > .bonus{
    padding: 40px 20px;
  }
  #programme > .card-price > .container > .bonus > .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 550px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: auto;
  }
  #programme > .card-price > .container > .bonus > .content > p {
    text-align: center;
  }
  #programme > .card-price > .container > .end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: auto;
    padding: 20px;
  }
  #programme > .card-price > .container > .end > img{
    width:100%;
  }
  #programme > .offer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 0 10px;
    margin: 0 auto;
  }
  #programme > .offer > p {
    text-align: center;
  }
  #programme > .offer > .offer-button{
    width: 168px;
    border-radius: 5px;
    text-decoration: none;
  }
  #programme > .offer > .offer-button > p{padding: 17px 40px;}

/**********************
Section result
**********************/

  #result > .title {
    padding: 0 10px;
    margin: auto;
  }
  #result > .card-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-width: 1100px;
    margin: auto;
  }
  #result > .card-container > .card-content{
    max-width: 320px;
    width: 100%;
    padding: 25px 20px;
  }
  #result > .button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0 10px;
    margin: auto;
  }

/**********************
Section faq
**********************/

  #faq > .title {
    padding: 0 10px;
    margin: auto;
  }
  #faq > .container {
    padding: 0 10px;
    margin: auto;
  }
  .accordion {
    cursor: pointer;
    padding: 35px 0 25px 0;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .accordion.active > img{
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .accordion > p {
    max-width: 590px;
    width: 100%;
    margin-right: 30px;
  }
  .panel{
    padding: 0 0 30px 0;
    background-color: white;
    display: none;
    overflow: hidden;
  }

/**********************
Footer
**********************/

  footer{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 30px 0;
  }
  footer > p{
    padding: 0 10px;
  }

/**********************
IsOnScreen | Class
**********************/

  .translate-start {
      opacity: 0;
      -webkit-transform: translate3d(0, 50px, 0);
      transform: translate3d(0, 50px, 0);
      -webkit-transition: .8s;
      -o-transition: .8s;
      transition: .8s;
  }
  .translate-end {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
  }

  .scale-start {
      opacity: 0;
      -webkit-transform: scale(0);
          -ms-transform: scale(0);
              transform: scale(0);
      -webkit-transition: .8s;
      -o-transition: .8s;
      transition: .8s;
  }
  .scale-end {
      opacity: 1;
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
      -webkit-transition: .8s;
      -o-transition: .8s;
      transition: .8s;
  }

/**********************
Media Query
**********************/

  @media screen and (max-width: 931px){

    /* Section guide */
    #guide > .container {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
    #guide > div > div:nth-child(1) > h2 {
      text-align: center;
    }
    /* Section edito */
    #edito > .container {
      padding: 120px 0 0 0;
    }
  }

  @media screen and (max-width: 767px){

    /* Section navigation */
    nav {
      background-color: white;
      -webkit-box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
              box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
    }
    nav > .container {padding: 20px;}

    /* Section edito */
    #about > .container{
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    /* Section programme */
    #programme > .intro > .container {
      text-align: center;
      margin: auto;
    }
    #programme > .intro > .container > .arrow-down {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
  }

  @media screen and (max-width: 695px){

    /* Section programme */
    #programme > .card-price {max-width: 540px;}
    #programme > .card-price > .container > .content-table {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
    #programme > .card-price > .container > .content-table > p {text-align: center;margin: 10px;}
      /***** Programme Price *****/
    #programme > div.card-price.m-auto > div > div:nth-child(3) > img:nth-child(5),
    #programme > div.card-price.m-auto > div > div:nth-child(7) > img:nth-child(5),
    #programme > div.card-price.m-auto > div > div:nth-child(9) > img:nth-child(5),
    #programme > div.card-price.m-auto > div > div:nth-child(11) > img:nth-child(5) {
      max-width: 120px;
      width: 100%;
    }
    #programme > div.card-price.m-auto > div > div:nth-child(5) > img:nth-child(5),
    #programme > div.card-price.m-auto > div > div:nth-child(13) > img:nth-child(5) {
      max-width: 150px;
      width: 100%;
    }
    /* Section result */
    #result > .card-container > .card-content {
      max-width: 360px;
      width: 100%;
      padding: 20px 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    #result > .card-container > .card-content > p {
      text-align: center;
    }    
  }

  @media screen and (max-width: 580px){
    /* Typography */
    .display-one {
      font-size: 36px;
      line-height: 45px;
    }
    .container-nav {
      max-width: none;
    }
    /* Section header */
    #header {
      padding: 160px 0 0 0;
      background-image: -o-linear-gradient(left , rgb(232 237 240 / 100%), rgb(232 237 240 / 100%), rgb(232 237 240 / 60%), rgb(232 237 240 / 30%), rgb(232 237 240 / 20%)), url(assets/img/h-maryamgadery-maj.jpg);
      background-image: -webkit-gradient(linear , left top, right top , from(rgb(232 237 240 / 100%)), color-stop(rgb(232 237 240 / 100%)), color-stop(rgb(232 237 240 / 60%)), color-stop(rgb(232 237 240 / 30%)), to(rgb(232 237 240 / 20%))), url(assets/img/h-maryamgadery-maj.jpg);
      background-image: linear-gradient(90deg , rgb(232 237 240 / 100%), rgb(232 237 240 / 100%), rgb(232 237 240 / 60%), rgb(232 237 240 / 30%), rgb(232 237 240 / 20%)), url(assets/img/h-maryamgadery-maj.jpg);
      background-position: 60%;
    }
    #header > .container > .display-two {
      font-size: 23px;
      line-height: 33px;
      max-width: 445px;
    }
    /* Section edito */
    #edito > .container {
      margin: 0 50px;
    }
    /* Section about */
    #about > .container > .wrapper {
      max-width: 300px;
    }
    #programme > .card-price > .container > .end > img{
      width:100%;
    }
  }
  
  @media screen and (max-width: 450px){
    /* Typography */
    .display-one {
      font-size: 31px;
      line-height: 40px;
      text-align: center;
    }
    /* Section header */
    #header {
      background-position: 65%;
      padding: 240px 0 0 0;
      background-image: -o-linear-gradient(left , rgb(232 237 240 / 100%), rgb(232 237 240 / 100%), rgb(232 237 240 / 80%), rgb(232 237 240 / 50%), rgb(232 237 240 / 20%)), url(assets/img/h-maryamgadery-maj.jpg);
      background-image: -webkit-gradient(linear , left top, right top , from(rgb(232 237 240 / 100%)), color-stop(rgb(232 237 240 / 100%)), color-stop(rgb(232 237 240 / 80%)), color-stop(rgb(232 237 240 / 50%)), to(rgb(232 237 240 / 20%))), url(assets/img/h-maryamgadery-maj.jpg);
      background-image: linear-gradient(90deg , rgb(232 237 240 / 100%), rgb(232 237 240 / 100%), rgb(232 237 240 / 80%), rgb(232 237 240 / 50%), rgb(232 237 240 / 20%)), url(assets/img/h-maryamgadery-maj.jpg);
    }
    #header > .container > .display-two {
      font-size: 18px;
      line-height: 28px;
      max-width: 335px;
      margin: auto;
      text-align: center;
    }
    #header > .container > a > .h-button {
      margin: auto;
    }
    #guide > .container > .wrapper > .wrap > .wrap-content {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    #faq > .container {
      padding: 0 40px;
    }

  }

  @media screen and (max-width: 410px){
    /* Typography */
    .display-three{
      font-size: 19px;
      line-height:29px;
    }
    .big-text {
      font-size: 24px;
      line-height: 31px;
    }
    .medium-text {
      font-size: 18px;
      line-height: 22px;
    }
    .sub-text {
      font-size: 15px;
      line-height: 21px;
    }
    /* Section programme */
    #programme > .card-price > .container > .content-table {
      padding: 20px 10px;
    }
    #programme > .card-price > .container > .title {
      padding: 15px;
      border-radius: 10px 10px 0 0;
    }
    /* Section result */
    #result > div.title > h2 {
      max-width: 370px !important;
    }
  }
  @media screen and (max-width: 330px){
    /* Section header */
    .display-one {
      font-size: 30px;
      line-height: 40px;
    }

  }