/* Fold */

.fold {
    width: 100%;

    align-items: center;
    justify-content: space-between;
    gap: 160px;
}

.fold-textual {
    width: calc(50% - 80px);

    display: flex;
    flex-direction: column;
    gap: 40px;
}

.fold-heading {
    color: var(--secondary-color);
}

.fold-textual-bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fold-textual-btns {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fold-stars-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fold-stars-wrapper {
    color: var(--secondary-color);

    display: flex;
    gap: 5px;
}

.fold-visuals {
    width: calc(50% - 80px);

    display: flex;
}

.fold-visuals > img {
    width: 100%;
}

/* Advantages */

.advantages {
    width: 100%;

    background-color: rgba(247, 216, 197, 0.1);

    flex-direction: column;
    gap: 20px;
}

.advantages-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

.advantage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.advantage-icon-container {
    width: 100px;
    height: 100px;

    border-radius: var(--border-radius);

    background-color: var(--secondary-color);

    display: flex;
    align-items: center;
    justify-content: center;
}

.advantage-icon-container > img {
    width: 60px;
}

.advantage-description {
    text-align: center;
}

/* About */

.about {
    width: 100%;

    align-items: center;
    justify-content: space-between;
    gap: 160px;
}

.about-visuals {
    width: calc(50% - 80px);

    display: flex;
}

.about-visuals > img {
    width: 100%;
}

.about-textual {
    width: calc(50% - 80px);

    display: flex;
    flex-direction: column;
    gap: 40px;
}

.about-heading {
    color: var(--primary-color);

    font-weight: 600;
}

.about-textual-bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Pricing */

.pricing {
    background-color: rgba(219, 224, 238, 0.1);

    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.pricing-header {
    width: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.pricing-header > .c-heading {
    color: var(--primary-color);

    text-align: center;
}

.pricing-packages-wrapper {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.pricing-package {
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);

    background-color: #FFFFFF;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    padding: 40px 80px;
}

.pricing-package._small {
    border-right: none;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.pricing-package._medium {
    background-color: var(--primary-color);

    padding: 80px;

    position: relative;
}

.pricing-package-tag {
    border-radius: var(--border-radius);

    color: #FFFFFF;
    background-color: var(--secondary-color);

    padding: 0 10px;

    transform: rotate(15deg);

    position: absolute;

    top: -10px;
    right: -10px;
}

.pricing-package._large {
    border-left: none;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.pricing-package-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pricing-package._medium .pricing-package-name,
.pricing-package._medium .pricing-package-cost,
.pricing-package._medium .pricing-package-cost-container > span {
    color: #FFFFFF;
}

.pricing-package-cost-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pricing-package-cost-container > span {
    line-height: 1;
}

.pricing-package-old-cost {
    text-decoration: line-through;
}

.pricing-package-cost {
    text-align: center;
}

.pricing-package > ul {
    width: 100%;

    display: flex;
    flex-direction: column;
}

.pricing-package > ul > li {
	background-image: url("../media/components/checkmark-secondary.png");
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: left center;

	padding-left: 22px;

	margin: 0;
}

.pricing-package._medium > ul > li {
    color: #FFFFFF;

	background-image: url("../media/components/checkmark-white.png");
}

.pricing > .c-primary-btn {
    border-color: var(--secondary-color);

    background-color: var(--secondary-color);
}

/* FAQ */

.faq {
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.faq-header {
    width: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    text-align: center;
}

.faq-blocks-wrapper {
    width: 50%;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-block {
    display: flex;
    flex-direction: column;
}

.faq-question-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.faq-block-toggle-btn {
    width: 14px;

    cursor: pointer;
}

.faq-answer {
    display: none;

    margin-top: 20px;
}

@media only screen and (max-width: 1000px) {
    .fold {
        gap: 40px;
    }

    .fold-textual {
        width: calc(50% - 20px);
    }

    .fold-visuals {
        width: calc(50% - 20px);
    }

    .about {
        flex-direction: column-reverse;
        gap: 40px;
    }

    .about-visuals {
        width: 100%;

        display: none;
    }

    .about-textual {
        width: 100%;
    }

    .pricing-header {
        width: 100%;
    }

    .pricing-packages-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .pricing-package._small,
    .pricing-package._large {
        border: 1px solid var(--primary-color);
        border-radius: var(--border-radius);

        padding: 80px;
    }

    .faq-header {
        width: 100%;
    }

    .faq-blocks-wrapper {
        width: 100%;
    }
}

@media only screen and (max-width: 800px) {
    .fold {
        flex-direction: column;
    }

    .fold-textual {
        width: 100%;
    }

    .fold-visuals {
        width: 100%;

        display: none;
    }

    .advantages-wrapper {
        flex-direction: column;
    }
}

@media only screen and (max-width: 600px) {
    .fold-visuals {
        display: flex;
    }

    .about-visuals {
        display: flex;
    }

    .pricing-package {
        width: 100%;
    }

    .pricing-package._small,
    .pricing-package._medium,
    .pricing-package._large {
        padding: 80px 40px;
    }
}