/* Template settings */

body {
    background: #F0F0F0;
}

h2 {
    margin: 0;
    font: 800 40px/0.8 var(--font-secondary);
}

.btn {
    font-size: 14px !important;
}

@media only screen and (min-width: 991px) {
    h2 {
        font-size: 64px;
    }

    .btn {
        font-size: 16px !important;
    }
}

/* Hero section */
.hero {
    min-height: 80vh;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.hero__background {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.hero__eyebrow-holder {
    margin-bottom: 12px;
}

.hero__eyebrow {
    font: 600 18px/0.9 var(--font-secondary);
    color: var(--color-black);
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 12px;
}

.hero__eyebrow::after {
    content: '';
    display: inline-block;
    width: 90px;
    height: 1px;
    background-color: var(--color-black);
}

.hero__content-holder {
    margin-bottom: 12px;
    max-width: 928px;
}

.hero__content-holder h1 {
    font: 700 40px/0.8 var(--font-secondary);
    color: var(--color-black);
    margin-bottom: 12px;
}

.hero__content-holder p {
    font: 400 16px/1.2 var(--font-primary);
    color: var(--color-grey);
}

.hero__buttons {
    display: flex;
    flex-flow: row;
    gap: 12px;
}

@media only screen and (min-width: 991px) {
    .hero__background {
        position: absolute;
        top: 0;
        bottom: unset;
        right: 0;
        z-index: -1;
    }

    .hero__eyebrow-holder {
        margin-bottom: 24px;
    }

    .hero__eyebrow {
        font-size: 20px;
        gap: 24px;
    }

    .hero__content-holder {
        margin-bottom: 24px;
    }

    .hero__content-holder h1 {
        font-size: 64px;
        margin-bottom: 24px;
    }

    .hero__content-holder p {
        font-size: 20px;
    }

    .hero__buttons {
        gap: 24px;
    }
}

/* What section */

.what {
    position: relative;
    background: var(--color-primary);
    z-index: 1;
    padding-top: 60px;
    padding-bottom: 70px;
    clip-path: polygon(
            0 10%, /* gore levo */ 100% 0, /* gore desno */ 100% 100%,
            0% 100%
    );
}

.what__background {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.what__inner {
    max-width: 928px
}

.what__title {
    margin-bottom: 16px;
}

.what__title h2 {
    color: var(--color-white);
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 16px;
}

.what__title h2::after {
    content: '';
    display: inline-block;
    height: 1px;
    width: 100%;
    max-width: 100%;
    flex: 1;
    background-color: var(--color-white);
}

.what__content p {
    font: 400 16px/1.2 var(--font-primary);
    color: var(--color-white);
}

@media only screen and (min-width: 991px) {
    .what {
        padding-top: 120px;
        padding-bottom: 140px;
        clip-path: polygon(
                0 15%, /* gore levo */ 100% 0, /* gore desno */ 100% 100%,
                0% 100%
        );
    }

    .what__title {
        margin-bottom: 32px;
    }

    .what__content p {
        font-size: 20px;
    }
}

/* Who section */

.who {
    padding: 50px 0
}

.who__title {
    margin-bottom: 16px;
}

.who__title h2 {
    color: var(--color-primary);
    margin-bottom: 16px;
}

.who__paragraph {
    margin-bottom: 16px;
}

.who__paragraph p {
    font: 600 16px/1.2 var(--font-primary);
    color: var(--color-black);
}

.who__boxes {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.who__single-box {
    background: var(--color-grey-light);
    border-radius: 40px;
    padding: 46px 80px 46px 48px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.who__single-box img,
.who__single-box svg {
    position: absolute;
    z-index: -1;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.who__single-box span {
    font: 400 16px/1.2 var(--font-primary);
    color: var(--color-grey);
}

.who__content {
    margin-bottom: 16px;
}

.who__content p {
    font: 600 16px/1.2 var(--font-primary);
    color: var(--color-grey);
}

.who__buttons {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

@media only screen and (min-width: 991px) {
    .who {
        padding: 100px 0;
    }

    .who__paragraph,
    .who__title {
        margin-bottom: 32px;
    }

    .who__paragraph p {
        display: flex;
        flex-flow: row;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 16px;
    }

    .who__paragraph p::after {
        content: '';
        display: inline-block;
        width: 100%;
        max-width: 100%;
        flex: 1;
        height: 1px;
        background-color: var(--color-black);
    }

    .who__paragraph p {
        font-size: 20px;
    }

    .who__boxes {
        gap: 32px;
        flex-flow: row wrap;
        align-items: stretch;
        justify-content: space-between;
        margin-bottom: 32px;
    }

    .who__single-box {
        flex: 0 0 calc(33.33% - 32px);
    }

    .who__single-box span {
        font-size: 20px;
    }

    .who__content {
        margin-bottom: 32px;
    }

    .who__content p {
        font-size: 20px;
    }

    .who__buttons {
        gap: 24px;
    }
}

/* Conditions section */
.conditions {
    padding: 0 0 55px;
}

.conditions__title {
    margin-bottom: 24px;
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px;
}

.conditions__title-line {
    flex: 1;
    height: 1px;
    width: 100%;
    background: var(--color-black);
}

.conditions__conditions {
    display: flex;
    flex-flow: column;
    gap: 16px;
    justify-content: flex-start;
    align-items: center;
}

.conditions__single {
    max-width: 544px;
    background: var(--color-primary);
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}

.conditions__single span {
    font: 600 18px/1.2 var(--font-primary);
    color: var(--color-white);
    text-align: center;
}

@media only screen and (min-width: 991px) {
    .conditions {
        padding: 0 0 110px;
    }

    .conditions__title {
        gap: 16px;
        margin-bottom: 48px;
    }

    .conditions__conditions {
        flex-flow: row wrap;
        justify-content: center;
        gap: 32px;
    }

    .conditions__single {
        padding: 10px 20px;
        border-radius: 14px;
    }

    .conditions__single span {
        font-size: 20px;
    }
}

/* Red CTA section */

.red-cta {
    z-index: 2;
    position: relative;
    margin-bottom: -120px;
}

.red-cta__inner {
    border-radius: 20px;
    background-color: var(--color-primary);
    padding: 24px 30px 24px 30px;
}

.red-cta__inner h2 {
    color: var(--color-white);
    margin-bottom: 16px;
}

.red-cta__inner p {
    font: 400 16px/1.2 var(--font-primary);
    color: var(--color-white);
}

@media only screen and (min-width: 991px) {
    .red-cta__inner {
        border-radius: 40px;
        padding: 57px 80px 70px 80px;
    }

    .red-cta__inner h2 {
        margin-bottom: 32px;
    }

    .red-cta__inner p {
        font-size: 20px;
    }
}

/* Black section */
.black-section {
    background-color: var(--color-black);
    position: relative;

    padding-top: 180px;
    padding-bottom: 70px;
    z-index: 1;

    clip-path: polygon(
            0 0, /* gore levo */ 100% 0, /* gore desno */ 100% 100%, /* dole desno */ 0 97% /* dole levo niže */
    );
}

.black-section__background {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

@media only screen and (min-width: 991px) {
    .black-section {
        padding-bottom: 150px;
        clip-path: polygon(
                0 0, /* gore levo */ 100% 0, /* gore desno */ 100% 100%, /* dole desno */ 0 90% /* dole levo niže */
        );
    }
}

/* How it works section */

.how-it-works__inner {
    border-bottom: 1px solid var(--color-white);
    padding-bottom: 32px;
}

.how-it-works__title {
    margin-bottom: 16px;
}

.how-it-works__title h2 {
    color: var(--color-primary);
    margin-bottom: 16px;
}

.how-it-works__paragraph {
    margin-bottom: 16px;
}

.how-it-works__paragraph p {
    font: 600 16px/1.2 var(--font-primary);
    color: var(--color-white);
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 16px;
}

.how-it-works__paragraph p::after {
    content: '';
    display: inline-block;
    height: 1px;
    width: 100%;
    max-width: 100%;
    flex: 1;
    background-color: var(--color-white);
}

.how-it-works__content {
    max-width: 986px;
    margin-bottom: 16px;
}

.how-it-works__content li,
.how-it-works__content p {
    font: 400 16px/1.2 var(--font-primary);
    color: var(--color-white);
}

.how-it-works__buttons {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

@media only screen and (min-width: 991px) {
    .how-it-works__inner {
        padding-bottom: 48px;
    }

    .how-it-works__paragraph,
    .how-it-works__title h2 {
        margin-bottom: 32px;
    }

    .how-it-works__content {
        margin-bottom: 32px;
    }

    .how-it-works__content li,
    .how-it-works__content p,
    .how-it-works__paragraph p {
        font-size: 20px;
    }

    .how-it-works__buttons {
        gap: 32px;
    }
}

/* Achievements section */

.achievements {
    padding-bottom: 32px;
}

.achievements__inner {
    padding-top: 32px;
}

.achievements__title {
    margin-bottom: 16px;
}

.achievements__title h2 {
    color: var(--color-primary);
    margin-bottom: 16px;
}

.achievements__paragraph {
    margin-bottom: 16px;
}

.achievements__paragraph p {
    font: 600 16px/1.2 var(--font-primary);
    color: var(--color-white);
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 16px;
}

.achievements__paragraph p::after {
    content: '';
    display: inline-block;
    height: 1px;
    width: 100%;
    max-width: 25%;
    flex: 1;
    background-color: var(--color-white);
}

.achievements__content {
    max-width: 986px;
}

.achievements__content li,
.achievements__content p {
    font: 400 16px/1.2 var(--font-primary);
    color: var(--color-white);
}

.achievements__content li strong,
.achievements__content p strong {
    color: var(--color-primary);
}

.achievements__buttons {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

@media only screen and (min-width: 991px) {
    .achievements {
        padding-bottom: 48px;
    }

    .achievements__inner {
        padding-top: 48px;
    }

    .achievements__title,
    .achievements__title h2 {
        margin-bottom: 32px;
    }

    .achievements__paragraph {
        margin-bottom: 32px;
    }

    .achievements__content li,
    .achievements__content p,
    .achievements__title p {
        font-size: 20px;
    }

    .achievements__buttons {
        gap: 32px;
    }
}

/* Benefits section - extends Achievements section */

#benefits .achievements__inner {
    border-top: 1px solid var(--color-white);
}

/* Criteria Section */

.criteria {
    padding-top: 32px;
    padding-bottom: 40px;
}

.criteria__inner h2 {
    color: var(--color-primary);
    margin-bottom: 16px;
}

.criteria__inner p {
    font: 600 16px/1.2 var(--font-primary);
    color: var(--color-grey);
    margin-bottom: 16px;
}

.criteria__inner li {
    font: 400 16px/1.2 var(--font-primary);
    color: var(--color-grey);
}

@media only screen and (min-width: 991px) {
    .criteria {
        padding-top: 42px;
        padding-bottom: 80px;
    }

    .criteria h2 {
        margin-bottom: 32px;
    }

    .criteria__inner p {
        font-size: 20px;
        margin-bottom: 32px;
    }

    .criteria__inner li {
        font-size: 20px;
    }
}

/* Dates section */

.dates {
    position: relative;
    z-index: 2;
    margin-bottom: -120px;
}

.dates__inner {
    background-color: var(--color-primary);
    border-radius: 20px;
    padding: 30px;
}

.dates__title h2 {
    color: var(--color-white);
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 16px;
}

.dates__title h2::after {
    content: '';
    height: 1px;
    width: 100%;
    max-width: 100%;
    flex: 1;
    background-color: var(--color-white);
}

.dates__title {
    margin-bottom: 24px;
}

.dates__dates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.dates__single-date {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
}

.dates__single-date-info p {
    font: 400 16px/1.2 var(--font-primary);
    color: var(--color-white);
}

.dates__single-date-info p strong {
    font-weight: 700;
    color: var(--color-white);
}

.dates__single-date-icon {
    flex: 0 0 40px;
}

.dates__single-date-icon svg,
.dates__single-date-icon img {
    max-width: 100%;
}

.dates__single-date-info {
    flex: 1;
}

@media only screen and (min-width: 991px) {
    .dates__inner {
        padding: 70px 72px 72px 80px;
        border-radius: 40px;
    }

    .dates__title {
        margin-bottom: 48px;
    }

    .dates__single-date {
        gap: 28px;
    }

    .dates__single-date-info p {
        font-size: 18px;
    }
}

@media only screen and (min-width: 1199px) {
    .dates__dates {
        grid-template-columns: repeat(4, 1fr);
        gap: 66px;
    }
}

/* FAQ section */

.faq {
    background-color: #D9D9D9;
    position: relative;
    z-index: 1;
    padding: 170px 0 50px;
}

.faq__background {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    display: none;
}

.faq__title {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-black);
}

.faq__title h2 {
    color: var(--color-primary);
}

.faq__accordion {
    width: 100%;
    margin-top: 12px;
}

.faq__trigger {
    width: 100%;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    font: 700 16px/1.2 var(--font-primary);
    color: var(--color-grey);
    transition: all 500ms ease;

    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.faq__trigger svg {
    flex: 0 0 19px;
    transition: all 300ms ease;
}

.faq__item {
    border-bottom: 1px solid var(--color-black);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.faq__content p {
    font: 400 16px/1.2 var(--font-primary);
    color: #323232;
}

.faq__item.is-open .faq__trigger {
    color: var(--color-primary);
}

.faq__item.is-open .faq__trigger svg {
    transform: rotate(180deg);
}

.faq__item.is-open .faq__trigger svg path {
    fill: var(--color-primary);
}

.faq__item.is-open .faq__content {
    padding-top: 12px;
}

@media only screen and (min-width: 991px) {
    .faq {
        padding: 205px 0 100px;
    }

    .faq__background {
        display: inline-block;
    }

    .faq__title {
        padding-bottom: 32px;
    }

    .faq__accordion {
        margin-top: 24px;
    }

    .faq__item {
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    .faq__trigger {
        font-size: 20px;
    }

    .faq__content p {
        font-size: 20px;
    }

    .faq__item.is-open .faq__content {
        padding-top: 24px;
    }
}

/* White CTA section */

.white-cta {
    padding-top: 55px;
    padding-bottom: 40px;
}

.white-cta__content {
    margin-bottom: 16px;
}

.white-cta__buttons {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

@media only screen and (min-width: 991px) {
    .white-cta {
        padding-top: 110px;
        padding-bottom: 80px;
    }

    .white-cta__content {
        margin-bottom: 32px;
    }

    .white-cta__buttons {
        gap: 24px;
    }
}