/* --- START COMMON */

section h2 {
    color: var(--section-title-color);
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-size-large);
    font-weight: var(--text-bold);
    margin: var(--vertical-content-spacing) var(--side-content-spacing);
    text-align: center;
    text-transform: uppercase;
}

section h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-size-normal);
    font-weight: var(--text-bold);
    margin: 40px var(--side-content-spacing);
    text-align: center;
}

section p {
    color: var(--text-color);
    font-size: var(--font-size-small);
    line-height: 22px;
    margin: 40px var(--side-content-spacing);
}

@media only screen and (min-width: 1024px) {
    section {
        align-items: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    section h2 {
        font-size: var(--font-size-xxlarge);
        grid-column: 1 / 3;
        grid-row: 1;
    }

    section p {
        font-size: var(--font-size-normal);
        line-height: 30px;
        margin-top: 0;
    }

    section p:last-child {
        margin-bottom: 0;
    }
}

/* --- END COMMON */

/* --- START INTRODUCTION */

#introduction {
    background-image: url('../images/sections/intro/background_sophie.png'), url('../images/sections/intro/background_room.png');
    background-repeat: no-repeat, no-repeat;
    background-position: right bottom, center center;
    background-size: auto, auto;
    display: flex;
    flex-direction: column-reverse;
    min-height: 526px;
}

.introduction__content {
    background-color: var(--block-transparent-background-color);
    box-sizing: border-box;
    padding: 33px 20px 22px 20px;
}

.introduction__content > div:first-child {
    color: var(--main-color);
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-size-normal);
    text-shadow: 0px 1.09466px 1.09466px rgba(132, 46, 46, 0.25);
}

.introduction__action {
    margin-top: 30px;
    text-align: center;
}

@media only screen and (min-width: 1024px) {
    #introduction {
        background-image: url('../images/sections/intro/background_desktop.png');
        background-size: auto 100%;
        background-position: center right;
        justify-content: center;
        min-height: 680px;
    }

    .introduction__content {
        background-color: transparent;
        margin-left: 35px;
        padding: 0;
    }

    .introduction__content > div:first-child {
        background-color: var(--block-transparent-background-color);
        border-radius: 40px;
        box-sizing: border-box;
        font-size: var(--font-size-xxxlarge);
        max-width: 70%;
        padding: 33px 20px 22px 20px;
    }

    .introduction__action {
        text-align: left;
    }
}

@media only screen and (min-width: 1224px) {
    #introduction {
        min-height: 809px;
    }

    .introduction__content > div:first-child {
        max-width: 50%;
    }
}

/* --- END INTRODUCTION */

/* --- START SERVICES */

#services {
    background-color: var(--services-background-color);
    display: block;
    padding: 27px 0 34px;
    text-align: center;
}

#services img {
    height: 35px;
    width: auto;
}

#services img + img {
    margin-left: 70px;
}

#services h2 {
    margin-top: 27px;
    margin-bottom: 27px;
}

#services ol {
    color: var(--main-color);
    display: flex;
    font-size: var(--font-size-xsmall);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

#services ol li {
    flex: 1;
}

#services ol li::before {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90% 90%;
    border: 1px solid var(--main-color);
    border-radius: 50%;
    box-sizing: border-box;
    content: '';
    display: block;
    height: 61px;
    margin: 0 auto 8px;
    width: 61px;
}

#services ol li:nth-child(1)::before {
    background-image: url('../images/sections/services/coach_perso.svg');
}

#services ol li:nth-child(2)::before {
    background-image: url('../images/sections/services/coach_pro.svg');
}

#services ol li:nth-child(3)::before {
    background-image: url('../images/sections/services/psychopraticienne.svg');
}

@media only screen and (min-width: 1024px) {
    #services img {
        height: 64px;
    }

    #services h2 {
        margin-top: var(--vertical-content-spacing);
        margin-bottom: var(--vertical-content-spacing);
    }

    #services ol li {
        font-size: var(--font-size-large);
    }

    #services ol li::before {
        border-width: 3px;
        height: 115px;
        width: 115px;
    }
}

@media only screen and (min-width: 1224px) {
    #services img {
        height: 94px;
    }
}

/* --- END SERVICES */

/* --- START SOCIAL PHOBIA */

#social-phobia div:nth-of-type(2) p:last-child {
    margin-bottom: 0;
}

#social-phobia div:nth-of-type(2) p:last-child::after {
    background-image: url('../images/sections/social-phobia/face_sad.svg');
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    display: block;
    height: 140px;
    margin: 20px auto 20px;
    width: 150px;
}

#social-phobia div:nth-of-type(3) {
    display: none;
}

#social-phobia div:last-child p:first-child {
    margin-top: 0;
}

@media only screen and (min-width: 1024px) {
    #social-phobia h3 {
        margin-top: 0;
        text-align: left;
    }

    #social-phobia > div:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 2;
        margin-bottom: 62px;
    }

    #social-phobia > div:nth-of-type(2) p:last-child::after {
        height: 207px;
        margin-bottom: 0;
        margin-right: 0;
        margin-top: -85px;
        width: 223px;
    }

    #social-phobia > div:nth-child(3) {
        grid-column: 1 / 2;
        grid-row: 2;
        margin-bottom: 62px;
    }

    #social-phobia div:nth-of-type(3) {
        display: block;
    }
}

/* --- END SOCIAL PHOBIA */

/* --- START THERAPY BENEFITS */

#therapy-benefits > div:last-child:after {
    background-image: url('../images/sections/therapy-benefits/brain_happy.svg');
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    display: block;
    height: 152px;
    margin: 20px auto 0;
    width: 138px;
}

#therapy-benefits .therapy-benefits__action {
    text-align: center;
}

@media only screen and (min-width: 1024px) {
    #therapy-benefits > div:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 2;
    }

    #therapy-benefits > div:nth-child(3) {
        grid-column: 1 / 2;
        grid-row: 2;
    }

    #therapy-benefits > div:last-child:after {
        height: 221px;
        margin-right: 0;
        margin-top: -160px;
        width: 216px;
    }

    #therapy-benefits .therapy-benefits__action {
        margin-left: var(--side-content-spacing);
        text-align: left;
    }
}

/* --- END THERAPY BENEFITS */

/* --- START COACHING BENEFITS */

#coaching-benefits > div:nth-of-type(1) .image-with-color-background:nth-child(2),
#coaching-benefits > div:nth-of-type(3) .image-with-color-background:nth-child(2) {
    display: none;
}

#coaching-benefits > div:nth-of-type(2) p::after {
    background-image: url('../images/sections/coaching-benefits/hands.svg');
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    display: block;
    height: 192px;
    margin: 20px auto 0;
    width: 192px;
}

.coaching-benefits__action {
    text-align: center;
}

@media only screen and (min-width: 1024px) {
    #coaching-benefits > div:nth-of-type(1) .image-with-color-background:first-child,
    #coaching-benefits > div:nth-of-type(3) .image-with-color-background:first-child {
        display: none;
    }

    #coaching-benefits > div:nth-of-type(1) .image-with-color-background:nth-child(2),
    #coaching-benefits > div:nth-of-type(3) .image-with-color-background:nth-child(2) {
        display: block;
    }

    #coaching-benefits > div:nth-of-type(2) p::after {
        height: 307px;
        margin-left: -50px;
        margin-top: -80px;
        width: 307px;
    }

    #coaching-benefits > div:nth-child(4) {
        grid-column: 2 / 3;
        grid-row: 3;
        margin-top: 116px;
    }

    #coaching-benefits > div:nth-child(5) {
        grid-column: 1 / 2;
        grid-row: 3;
        margin-top: 116px;
    }
}

/* --- END COACHING BENEFITS */

/* --- START SERVICES DETAILS */

.services-details__content {
    font-size: var(--font-size-small);
    line-height: 22px;
    margin: var(--vertical-content-spacing) var(--side-content-spacing);
}

@media only screen and (min-width: 1024px) {
    .services-details__content {
        font-size: var(--font-size-normal);
        line-height: 30px;
        margin-bottom: 0;
        margin-top: 0;
    }
}

/* --- END SERVICES DETAILS */

/* --- START HOW WORKS */

#how-works > div:nth-of-type(1) .image-with-color-background:nth-child(2) {
    display: none;
}

@media only screen and (min-width: 1024px) {
    #how-works > div:nth-of-type(1) .image-with-color-background:first-child {
        display: none;
    }

    #how-works > div:nth-of-type(1) .image-with-color-background:nth-child(2) {
        display: block;
    }

    #how-works > div:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 2;
        margin-bottom: var(--vertical-content-spacing);
    }

    #how-works > div:nth-child(3) {
        grid-column: 1 / 2;
        grid-row: 2;
        margin-bottom: var(--vertical-content-spacing);
    }
}

/* --- END HOW WORKS */

/* --- START OFFERS */

#offers {
    background-color: var(--main-color);
    background-image:
        url('../images/sections/offers/polygon_right.svg'),
        url('../images/sections/offers/polygon_left.svg'),
        url('../images/sections/offers/polygon_right.svg'),
        url('../images/sections/offers/polygon_left.svg')
    ;
    background-position:
        right -5px top,
        left -5px top 30%,
        right -5px top 70%,
        left -5px top 98%
    ;
    background-repeat: no-repeat;
    padding: var(--vertical-content-spacing) 0;
}

#offers h2 {
    color: var(--white-color);
    font-size: var(--font-size-normal);
    margin: 0 0 25px;
}

#offers > p {
    color: var(--white-color);
    font-size: var(--font-size-small);
    margin-bottom: 25px;
    margin-top: 0;
    text-align: center;
}

#offers .offer-summarize {
    margin: 0 var(--side-content-spacing);
}

#offers .offer-summarize + .offer-summarize {
    margin-top: var(--vertical-content-spacing);
}

@media only screen and (min-width: 1024px) {
    #offers {
        display: block;
    }

    #offers h2 {
        font-size: var(--font-size-xxlarge);
        margin: 0 0 35px;
    }

    #offers > p {
        font-size: var(--font-size-large);
        margin: 0 0 35px;
    }

    #offers .offers__content {
        align-items: center;
        display: flex;
        margin: 0 var(--side-content-spacing);
    }

    #offers .offer-summarize {
        height: fit-content;
        margin: 0;
    }

    #offers .offer-summarize:nth-child(1) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        margin-right: -10px;
    }

    #offers .offer-summarize:nth-child(2) {
        box-shadow: 0px 2px 15px 4px rgba(0, 0, 0, 0.25);
        z-index: 10;
    }

    #offers .offer-summarize:nth-child(3) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin-left: -10px;
    }
}

/* --- END OFFERS */

/* --- START FREE OFFER */

#free-offer {
    background-image: url('../images/sections/free-offer/illustration.png');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: flex;
    flex-direction: column-reverse;
    min-height: 419px;
}

#free-offer .free-offer__content {
    background-color: var(--block-transparent-background-color);
    box-sizing: border-box;
    color: var(--main-color);
    padding: 21px 46px;
    text-align: center;
}

#free-offer h2 {
    font-size: var(--font-size-normal);
    margin: 0 0 11px 0;
    text-align: left;
}

#free-offer p {
    font-size: var(--font-size-small);
    margin: 0 0 26px 0;
    text-align: left;
}

@media only screen and (min-width: 1024px) {
    #free-offer {
        align-items: flex-start;
        justify-content: center;
        min-height: 563px;
    }

    #free-offer h2 {
        font-size: var(--font-size-xxxlarge);
    }

    #free-offer p {
        font-size: var(--font-size-normal);
    }

    #free-offer .free-offer__content {
        border-radius: 40px;
        margin-left: 60px;
        padding: 70px 46px;
        text-align: left;
        width: 60%;
    }
}
/* --- END FREE OFFER */

/* --- START QUESTIONS */

#questions {
    background-color: var(--light-color);
    background-image: url('../images/questions.svg');
    background-position: right calc(var(--side-content-spacing) + 10px) top calc(var(--vertical-content-spacing) - 10px);
    background-repeat: no-repeat;
    background-size: 56px;
    padding: var(--vertical-content-spacing) 0;
}

#questions h2 {
    margin-top: 0;
    padding-right: 86px;
    text-align: left;
}

#questions .question {
    margin: 0 var(--side-content-spacing);
}

#questions .question + .question {
    margin-top: 30px;
}

@media only screen and (min-width: 1024px) {
    #questions {
        display: block;
        background-image: url('../images/questions.svg'), url('../images/people_asking.svg');
        background-position: right calc(var(--side-content-spacing) + 30px) top calc(var(--vertical-content-spacing) - 30px), bottom left 20px;
        background-size: 150px;
    }

    #questions h2 {
        margin-left: calc(var(--side-content-spacing) + 200px);
        margin-right: calc(var(--side-content-spacing) + 200px);
        padding-right: 0;
        text-align: center;
    }

    #questions .question {
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- END QUESTIONS */

/* --- START FEEDBACKS */

#feedbacks .feedback + .feedback {
    margin-top: var(--vertical-content-spacing);
}

#feedbacks .feedback .image-with-color-background {
    margin-bottom: 0;
}

#feedbacks .feedback .feedback__content {
    background-color: #faf7f3;
    background-image: url('../images/quote_open.svg'), url('../images/quote_close.svg');
    background-position: left 23px top 28px, right 23px bottom 70px;
    background-repeat: no-repeat;
    background-size: 50px;
    color: var(--main-color);
    font-size: var(--font-size-small);
    line-height: 22px;
    padding: 45px 34px;
}

#feedbacks .feedback:nth-child(2n+1) .feedback__content + .feedback__content {
    display: none;
}

#feedbacks .feedback .feedback__content > div:last-child {
    margin-top: 20px;
    text-align: right;
}

#feedbacks .feedback__content.feedback__content_bordered {
    border-color: rgba(137, 105, 101, 0.5);
    border-radius: 0 20px;
    border-style: solid;
    border-width: 21px 35px;
}

#feedbacks .feedback__content.feedback__content_bordered.feedback__content_bordered_light {
    border-color: var(--light-color);
}

@media only screen and (min-width: 1024px) {
    #feedbacks {
        display: block;
        margin-bottom: var(--vertical-content-spacing);
    }

    #feedbacks .feedback {
        align-items: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    #feedbacks .feedback:nth-child(2n+1) .feedback__content:first-child {
        display: none;
    }

    #feedbacks .feedback:nth-child(2n+1) .feedback__content + .feedback__content {
        display: block;
    }

    #feedbacks .feedback__content.feedback__content_bordered {
        border-width: 70px;
    }

    #feedbacks .feedback:nth-child(2n) > div:first-child {
        grid-column: 2 / 3;
        grid-row: 1;
    }

    #feedbacks .feedback:nth-child(2n) > div:last-child {
        grid-column: 1 / 2;
        grid-row: 1;
    }
}

/* --- END FEEDBACKS */