/* Fold */

.fold {
    margin-top: 151px;
}

.fold > div {
    border-radius: var(--radius-l);

    background-image: url("../media/pages/home/fold-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);

    padding-bottom: var(--space-xxl);
}

.fold-top {
    display: flex;
    justify-content: space-between;
}

.fold-intro-wrapper {
    width: calc(50% - (var(--space-xxl) / 2));

    display: flex;
    align-items: center;

    padding: var(--space-xxl) 0 0 var(--space-xxl);
}

.fold-slider {
    width: 100%;
}

.fold-intro {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs);
}

.fold-heading,
.fold-heading-line {
    color: var(--color-03);
}

.fold-img-wrapper {
    width: calc(50% - (var(--space-xxl) / 2));
}

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

.fold-slider-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);

    padding: 0 var(--space-xxl);
}

.fold-slider-nav-btns-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fold-slider-nav-btn {
    width: 43px;
    height: 43px;

    border: 1px solid var(--color-03);
    border-radius: var(--radius-l);
    
    background-color: var(--color-03);

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

    position: relative;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.fold-slider-nav-btn:hover {
    border-color: var(--color-02);
    
    background-color: var(--color-02);
}

.fold-slider-nav-btn-icon {
    height: 18px;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);

    position: absolute;
}

.fold-slider-nav-btn:hover > .fold-slider-nav-btn-icon._primary {
    opacity: 0;
}

.fold-slider-nav-btn-icon._alt {
    opacity: 0;
}

.fold-slider-nav-btn:hover > .fold-slider-nav-btn-icon._alt {
    opacity: 1;
}

.fold-slider-progress-wrapper {
    border-radius: var(--radius-l);

    overflow-x: hidden;
}

.fold-slider-progress {
    width: 100%;
    height: 4px;

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

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

    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

/* About us */

.about-us {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xxl);

    padding: calc(2 * var(--space-xxl)) var(--space-xxl);
}

.about-us-img-wrapper {
    width: calc(50% - (var(--space-xxl) / 2));
}

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

.about-us-info {
    width: calc(50% - (var(--space-xxl) / 2));

    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

/* Deliveru options */

.delivery-options > div {
    border-radius: var(--radius-l);

    background-image: url("../media/pages/home/delivery-options-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);
    gap: calc(2 * var(--space-xxl));

    padding: var(--space-xxl);

    position: relative;

    overflow: hidden;
}

.delivery-options-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);

    position: relative;

    z-index: 1;

    pointer-events: none;
}

.delivery-options-header > .c-heading,
.delivery-options-header > .c-heading-line {
    color: var(--color-03);
    
    text-align: center;
}

.delivery-options-wrapper {
    display: flex;
    gap: var(--space-xxl);
}

.delivery-option {
    width: calc(25% - ((3 * var(--space-xxl)) / 4));

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);

    /* padding: 0 var(--space-xxl); */
}

.delivery-option-icon-container {
    width: 160px;
    height: 160px;

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

    position: relative;

    z-index: 1;
}

.delivery-option-icon {
    height: 50px;

    position: absolute;
}

.delivery-option-icon-frame {
    width: 100%;
    height: 100%;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.delivery-option:hover > .delivery-option-icon-container > .delivery-option-icon-frame {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

.delivery-option-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);

    position: relative;

    z-index: 1;
}

.delivery-option-bottom > h4,
.delivery-option-bottom > span {
    color: var(--color-03);

    text-align: center;
}

.delivery-option-bg {
    width: 25%;;
    height: 100%;

    background-color: var(--color-01);
    background: var(--gradient-01);

    position: absolute;

    top: 0;
    
    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.delivery-option:nth-child(1) > .delivery-option-bg {
    left: 0;
}

.delivery-option:nth-child(2) > .delivery-option-bg {
    left: 25%;
}

.delivery-option:nth-child(3) > .delivery-option-bg {
    left: 50%;
}

.delivery-option:nth-child(4) > .delivery-option-bg {
    left: 75%;
}

.delivery-option:hover > .delivery-option-bg {
    opacity: 0;
}

.delivery-options-slider-pagination {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.delivery-options-slider-pagination-bullet {
    width: 18px;
    height: 18px;

    border: 1px solid var(--color-03);
    border-radius: 50%;

    cursor: pointer;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.delivery-options-slider-pagination-bullet-active {
    background-color: var(--color-03);
}

/* CTA */

.cta {
    padding-top: 0;
}

.cta > div {
    border-radius: var(--radius-l);

    background-image: url("../media/pages/home/cta-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: var(--space-xxl);
}

.cta-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
}

.cta-info > .c-heading {
    color: var(--color-03);

    text-align: center;
}

.cta-info > .c-heading > i {
    font-weight: 400;
}

.cta-info > .c-link {
    color: var(--color-03);

    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.cta-info > .c-link > img {
    height: 12px;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.cta-info > .c-link:hover > img {
    margin-left: var(--space-xxs);
}

/* Stats */

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xxl);;

    padding: calc(2 * var(--space-xxl)) var(--space-xxl) var(--space-xxl) var(--space-xxl);
}

.stat {
    width: calc(25% - ((3 * var(--space-xxl)) / 4));

    border: 1px solid var(--color-05);
    border-radius: var(--radius-l);

    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    padding: var(--space-xxl);

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.stat:hover {
    box-shadow: var(--box-shadow-01);
}

.stat > .c-heading {
    color: var(--color-01);

    line-height: 1;
}

.stat > .c-subheading {
    line-height: 1.4;
}

.stat > .c-subheading > i {
    font-weight: 400;
}

/* Services */

.services {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);

    padding: var(--space-xxl);
}

.services-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    position: relative;

    z-index: 1;

    pointer-events: none;
}

.services-wrapper {
    display: flex;
    flex-direction: column;
}

.services-row {
    display: flex;
    flex-wrap: wrap;
}

.service {
    width: calc(25% - (3px / 4));

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);

    padding: var(--space-xxl);
}

.service-icon {
    height: 43px;
}

.service-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xxs);
}

.services-vertical-separator {
    width: 1px;

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

.services-horizontal-separator {
    width: 100%;
    height: 1px;

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

/* Calculator */

.calculator {
    display: flex;
    align-items: center;
    gap: var(--space-xxl);

    padding: var(--space-xxl);
}

.calculator-container {
    width: calc(50% - (var(--space-xxl) / 2));
    
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.calculator-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.calculator-form-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.calculator-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
}

.calculator-form-row > .c-field-container {
    width: calc(50% - (var(--space-m) / 2));
}

.calculator-form-row > .c-field-container > .c-field {
    width: 100%;
}

.calculator-form-btns-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.calculator-img-wrapper {
    width: calc(50% - (var(--space-xxl) / 2));
}

.calculator-img-wrapper > img {
    width: 100%;
}

/* Stores */

.stores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxl);;

    padding: calc(2 * var(--space-xxl)) var(--space-xxl);
}

.store {
    height: 43px;

    display: flex;
}

.store > img {
    height: 100%;

    filter: brightness(0%) invert(100%) grayscale(100%) contrast(20%);
    -webkit-filter: brightness(0%) invert(100%) grayscale(100%) contrast(20%);
}

/* Testimonial */

.testimonials > div {
    border: 1px solid var(--color-05);
    border-radius: var(--radius-l);

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

    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);

    padding: var(--space-xxl);
}

.testimonials-header {
    align-items: center;
}

.testimonials-header > .c-heading,
.testimonials-header > .c-heading-line {
    text-align: center;
}

.testimonials-slider {
    width: 100%;
}

.testimonials-slider-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.testimonials-slider-pagination.swiper-pagination-horizontal {
    width: auto;
}

.testimonials-slider-pagination-bullet {
    width: 18px;
    height: 18px;

    border: 1px solid var(--color-05);
    border-radius: 50%;

    cursor: pointer;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.testimonials-slider-pagination-bullet-active {
    border-color: var(--color-01);

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

.testimonial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
}

.testimonial-message {
    text-align: center;
}

.testimonial-stars-wrapper {
    display: flex;
    gap: var(--space-xs);
}

.testimonial-stars-wrapper > img {
    height: 18px;
}

.testimonials-slider-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.testimonials-slider-nav-btn {
    width: 43px;
    height: 43px;

    border: 1px solid var(--color-01);
    border-radius: var(--radius-l);
    
    background-color: var(--color-01);

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

    position: relative;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.testimonials-slider-nav-btn:hover {
    background-color: var(--color-02);
}

.testimonials-slider-nav-btn-icon {
    height: 18px;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);

    position: absolute;
}

/* Blog */

.blog {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);

    padding: calc(2 * var(--space-xxl)) var(--space-xxl);
}

.posts-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xxl);
}

.post {
    width: calc((100% / 3) - ((2 * var(--space-xxl)) / 3));

    border: 1px solid var(--color-05);
    border-radius: var(--radius-l);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.post:hover {
    box-shadow: var(--box-shadow-01);
}

.post._mobile-only {
    display: none;
}

.post-thumbnail-wrapper {
    height: 250px;

    display: flex;

    position: relative;
}

.post-thumbnail-wrapper::before {
    content: "";

    width: 100%;
    height: 100%;

    position: absolute;

    background-color: rgba(41, 135, 249, 0.2);

    top: 0;
    left: 0;

    z-index: 1;
}

.post-thumbnail-wrapper > img {
    width: 100%;
    height: 100%;

    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.post-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    padding: var(--space-xxl);
}

.post-main-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.post-main-top > .c-subheading {
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;

    white-space: nowrap;

    overflow-x: hidden;
}

.post-main-top > p {
    box-orient: vertical;
    -webkit-box-orient: vertical;
    
    line-clamp: 3;
    -webkit-line-clamp: 3;

    text-overflow: ellipsis;

    white-space: normal;

    display: -webkit-box;
    
    overflow: hidden;
}

.post-metadata {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.post-metadata > a {
    color: var(--color-01);

    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.post-metadata > a > img {
    height: 12px;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.post-metadata > a:hover > img {
    margin-left: var(--space-xxs);
}

/* Contact us */

.contact-us > div {
    border: 1px solid var(--color-05);
    border-radius: var(--radius-l);

    background-color: var(--color-01);
    background: var(--gradient-01);

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xxl);

    padding: var(--space-xxl);
}

.contact-us-heading,
.contact-us-heading-line {
    color: var(--color-03);
}

.contact-us-btn {
    border-color: var(--color-03);

    color: var(--color-01);

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

.contact-us-btn:hover {
    color: var(--color-03);
}

@media only screen and (max-width: 1000px) {
    /* Fold */

    .fold-top {
        flex-direction: column-reverse;
        align-items: center;
    }

    .fold-intro-wrapper {
        width: 100%;

        padding: var(--space-xxl) var(--space-xxl) 0 var(--space-xxl);
    }

    .fold-img-wrapper {
        width: 100%;

        padding: 0 var(--space-xxl);
    }
    
    /* About us */

    .about-us {
        flex-direction: column;
    }

    .about-us-img-wrapper,
    .about-us-info {
        width: 100%;
    }

    /* Delivery options */

    .delivery-options > div {
        background-image: none;
        background-color: var(--color-01);
        background: var(--gradient-01);
    }

    .delivery-options-header {
        pointer-events: all;
    }

    .delivery-option-bg {
        display: none;
    }

    .delivery-options-slider-pagination {
        display: flex;
    }

    /* Stats */

    .stat {
        width: calc(50% - (var(--space-xxl) / 2));
    }

    /* Services */

    .services-wrapper {
        gap: var(--space-xxl);
    }

    .services-row {
        flex-direction: column;
        gap: var(--space-xxl);
    }

    .service {
        width: 100%;

        padding: 0;
    }

    .services-vertical-separator,
    .services-horizontal-separator {
        display: none;
    }

    /* Calculator */

    .calculator {
        flex-direction: column-reverse;
    }

    .calculator-container {
        width: 100%;
    }

    .calculator-img-wrapper {
        width: 100%;
    }

    /* Stores */

    .stores {
        display: none;
    }

    /* Blog */

    .post {
        width: calc(50% - (var(--space-xxl) / 2));
    }

    .post._mobile-only {
        display: flex;
    }
}

@media only screen and (max-width: 800px) {
    /* Blog */

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

    .post {
        width: 100%;
    }

    .post._mobile-only {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    /* Stats */

    .stats {
        flex-direction: column;
    }

    .stat {
        width: 100%;
    }

    /* Contact us */

    .contact-us > div {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 400px) {
    /* Calculator */

    .calculator-form-row {
        flex-direction: column;
    }

    .calculator-form-row > .c-field-container {
        width: 100%;
    }

    .calculator-form-btns-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .calculator-btn {
        width: 100%;
    }
}