#hero {
    padding-bottom: 60px;

    .container {
        display:        flex;
        flex-direction: column;
        align-items:    center;
        gap:            40px;

        .hero {
            padding: 162px 0 0;

            & span {
                font-size:   16px;
                font-style:  normal;
                font-weight: 400;
                line-height: 22px; /* 137.5% */
                color:       #FF3D71;
            }

            & p {
                max-width:  800px;
                margin:     0 auto;
            }

            .statistic-data {
                display:         flex;
                align-items:     center;
                justify-content: space-between;

                & button {
                    background: #FFFFFF;

                    &:after {
                        border-radius: 36px;
                        border:        2px solid rgba(180, 174, 247, 0.10);
                    }

                    & svg path {
                        stroke: #12B76A;
                    }
                }
            }
        }

        .hero-actions {
            & button {
                padding: 9px 14px;
            }
        }

        .hero-img {
            padding: 0 50px;

            & img {
                width:          100%;
                box-shadow:     0 42px 84px -16px rgba(16, 24, 40, 0.14);
                border-radius:  0 0 30px 30px;
            }
        }
    }
}

#industries {
    .container {
        padding-bottom: 100px;
        border-bottom:  1px solid #F1F0EF;

        .industries {
            display:         flex;
            justify-content: center;
            align-items:     center;
            flex-wrap:       wrap;
            gap:             50px 124px;

            & img {
                mix-blend-mode: multiply;
            }
        }
    }
}

#why-use {
    .container {
        display:                grid;
        grid-template-columns:  1fr 2fr;
        padding:                100px 0;
        border-bottom:          1px solid #F1F0EF;

        .title {
            display:        flex;
            flex-direction: column;
            gap:            10px;
            max-width:      360px;
            position:       relative;

            & img {
                position:   absolute;
                top:        0;
                left:       0;
                width:      100%;
                height:     100%;
                z-index:    -1;
                opacity:    0.5;
            }

            & h2 {
                font-size:      40px;
                font-style:     normal;
                font-weight:    600;
                line-height:    46px; /* 115% */
                color:          #2F1D49;
            }

            & p {
                font-size:      16px;
                font-style:     normal;
                font-weight:    400;
                line-height:    22px; /* 137.5% */
                color:          #7D89B0;
            }

            & span {
                font-size:      16px;
                font-style:     normal;
                font-weight:    400;
                line-height:    22px; /* 137.5% */
                color:          #FF3D71;
            }
        }

        .content {
            display:                grid;
            grid-template-columns:  1fr 1fr;
            gap:                    50px 44px;

            & div {
                display:        flex;
                flex-direction: column;
                gap:            10px;

                & h5 {
                    font-size:      20px;
                    font-style:     normal;
                    font-weight:    600;
                    line-height:    24px; /* 120% */
                    color:          #2F1D49;
                }

                & p {
                    font-size:      16px;
                    font-style:     normal;
                    font-weight:    400;
                    line-height:    22px; /* 137.5% */
                    color:          #7D89B0;
                }
            }
        }
    }
}

#fb-automate {
    padding: 100px 0 0;

    .section-title {
        max-width:  660px;
    }

    .automate-container {
        display:                grid;
        grid-template-columns:  5fr 7fr;
        gap:                    100px;
        border-bottom:          1px solid #F1F0EF;

        .automate-content {
            display:                grid;
            grid-template-columns:  1fr;
            row-gap:                70px;

            .automate-item {
                min-block-size: calc(100dvh - 90px);
                align-content:  center;
                position:       relative;

                .title {
                    display:        inline-flex;
                    flex-direction: column;

                    .order {
                        font-size:      40px;
                        font-style:     normal;
                        font-weight:    400;
                        line-height:    46px; /* 115% */
                        text-transform: uppercase;
                        color:          #2F1D49;
                        opacity:        0.1;
                    }

                    .order-under {
                        background: #FF3D71;
                        height:     4px;
                        margin-top: 20px;
                    }
                }

                .info {
                    padding-top:    20px;
                    display:        flex;
                    flex-direction: column;
                    gap:            20px;

                    & h3 {
                        font-size:      26px;
                        font-style:     normal;
                        font-weight:    600;
                        line-height:    30px; /* 115.385% */
                        color:          #2F1D49;
                    }

                    & p {
                        font-size:   18px;
                        font-style:  normal;
                        font-weight: 400;
                        line-height: 24px;
                        color:       #7D89B0;
                    }
                }

                &:last-child {
                    padding-bottom: 70px;
                }
            }

            .automate-item-small {
                display: none;
            }
        }

        .media-content {
            display: initial;

            .medias {
                position:           sticky;
                inset-block-start:  90px;

                .media-wrapper {
                    block-size: calc(100dvh - 90px);

                    .media {
                        position:                   absolute;
                        transition-property:        opacity;
                        transition-duration:        .2s;
                        transition-timing-function: ease-in-out;

                        block-size:                 100%;
                        display:                    flex;
                        align-items:                center;

                        & img, video {
                            border-radius:  17px;
                            width:          100%;
                        }
                    }
                }
            }
        }
    }
}

#socials {
    .container {
        padding:       100px 0;
        border-bottom: 1px solid #F1F0EF;

        .section-title {
            max-width:      660px;
            margin-bottom:  60px;
        }

        .social-items-cards {
            display:        flex;
            flex-direction: column;
            gap:            37px;

            .social-items {
                display:         flex;
                justify-content: space-between;
                gap:             38px;

                .social-item {
                    position:   relative;
                    display:    flex;
                    gap:        6px;

                    .social-desc {
                        max-width:      220px;
                        display:        flex;
                        flex-direction: column;
                        gap:            5px;

                        .name {
                            font-size:      14px;
                            font-style:     normal;
                            font-weight:    600;
                            line-height:    20px; /* 142.857% */
                            color:          #2F1D49;
                        }

                        .desc {
                            font-size:   14px;
                            font-style:  normal;
                            font-weight: 400;
                            line-height: 20px;
                            color:       #7D89B0;
                        }
                    }
                }
            }
        }
    }
}

#testimonials {
    .container {
        padding:       127px 0 100px;
        border-bottom: 1px solid #F1F0EF;

        .highlighted-heading {
            display:         flex;
            align-items:     center;
            justify-content: center;
            gap:             20px;
            padding-bottom:  20px;

            .highlighted-item {
                position: relative;
                display:  inline-block;

                &:nth-child(2) {
                    bottom: 27px;
                }

                .title {
                    display:         flex;
                    flex-direction:  column;
                    align-items:     center;
                    justify-content: center;
                    gap:             4px;

                    position:  absolute;
                    top:       50%;
                    left:      50%;
                    transform: translate(-50%, -50%);

                    & svg {
                        width: 30px;

                        & path {
                            fill: #8F8E8D;
                        }
                    }

                    & img {
                        filter: grayscale(100%);
                    }

                    & div {
                        font-size:   20px; /* todo 18px normaldi */
                        font-style:  normal;
                        font-weight: 600;
                        line-height: 26px; /* 130% */
                        color:       #344054;
                        text-align:  center;
                    }
                }

                &:last-child {
                    .title {
                        & div {
                            width:   110px;
                        }
                    }
                }
            }
        }

        .section-title {
            max-width:      560px;
            padding-bottom: 40px;
        }

        .testimonials-cards { /* todo zoom in on scroll */
            display:               grid;
            grid-template-columns: auto auto auto;
            gap:                   10px;

            .testimonial-card {
                background:     #FFFFFF;
                padding:        30px;
                display:        flex;
                flex-direction: column;
                align-items:    center;
                gap:            20px;
                box-shadow:     0 14px 44px 0 rgba(0, 0, 0, 0.03); /* todo border radius var */

                .rate {
                    display: flex;
                    gap:     12px;

                    & svg {
                        width: 18px;

                        & path {
                            fill: #FAC515;
                        }
                    }
                }

                .content {
                    text-align: center;

                    .name {
                        font-size:      18px;
                        font-style:     normal;
                        font-weight:    600;
                        line-height:    24px; /* 133.333% */
                        color:          #2F1D49;
                        padding-bottom: 4px;
                    }

                    .status {
                        font-size:      12px;
                        font-style:     normal;
                        font-weight:    400;
                        line-height:    18px; /* 150% */
                        color:          #2F1D49;
                        padding-bottom: 10px;
                    }

                    .feedback {
                        font-size:   14px;
                        font-style:  normal;
                        font-weight: 400;
                        line-height: 20px; /* 142.857% */
                        color:       #7D89B0;
                    }
                }
            }
        }

        .view-more {
            display:         flex;
            justify-content: center;
            padding-top:     40px;
        }
    }
}

#saleBanner {
    padding: 100px 0;

    .sale-banner {
        background: #FDE272;
        padding:    40px 60px;
    }
}

@media screen and (min-width: 1681px) {
    #hero {
        .container {
            .hero {
                .statistic-data {
                    justify-content: center;
                    gap:             10px;
                }
            }
        }
    }
}

@media screen and (max-width: 1280px) {
    #hero {
        padding-bottom: 86px;

        .container {
            gap: 20px;

            .hero {
                padding: 125px 0 0;

                .statistic-data {
                    flex-wrap:       wrap;
                    justify-content: center;
                    gap:             10px;

                    & button {
                        font-size:   10px;
                        line-height: 16px;
                        color:       #2F1D49;
                    }
                }
            }

            .hero-img {
                padding: 0;
            }
        }
    }

    #industries {
        .container {
            padding-bottom: 70px;

            .industries {
                flex-wrap: wrap;
                gap:       50px 100px;
            }
        }
    }

    #why-use {
        .container {
            gap: 30px;

            .title {
                & h2 {
                    font-size:    36px;
                    line-height:  40px;
                }
            }

            .content {
                gap:  44px;
            }
        }
    }

    #socials {
        .container {
            padding: 40px 0 40px 20px;
            max-width: 100vw;

            .section-title {
                & button {
                    margin: 20px 0 30px;
                }
            }

            .social-items-cards {
                flex-direction: row;
                overflow-y:     auto;
                gap:            60px;

                .social-items {
                    flex-direction: column;
                    gap:            20px;

                    .social-item {
                        .social-desc {
                            min-width: 235px;
                        }
                    }
                }

                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }

    #testimonials {
        .container {
            .testimonials-cards {
                grid-template-columns: auto auto;

                .testimonial-card {
                    padding: 30px 20px;
                }
            }
        }
    }

    #saleBanner {
        padding: 20px 0 50px;

        .sale-banner {
            padding: 20px 0;
        }
    }
}

@media screen and (max-width: 1024px) {
    #industries {
        .container {
            .industries {
                gap: 40px 70px;
            }
        }
    }

    #why-use {
        .container {
            .title {
                & h2 {
                    font-size:      34px;
                    line-height:    38px;
                }
            }

            .content {
                & div {
                    & h5 {
                        font-size:      18px;
                        line-height:    22px;
                    }

                    & p {
                        font-size:      14px;
                        line-height:    20px;
                    }
                }
            }
        }
    }

    #fb-automate {
        .container {
            .automate-container {
                gap: 60px;

                .automate-content {
                    .automate-item {
                        .title {
                            .order {
                                font-size: 36px;
                                line-height: 28px;
                            }
                        }

                        .info {
                            & h3 {
                                font-size: 18px;
                                line-height: 24px;
                            }

                            & p {
                                font-size: 16px;
                                line-height: 22px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    #hero {
        .container {
            .hero-actions {
                display: none;
            }
        }
    }

    #why-use {
        .container {
            grid-template-columns:  1fr;

            .title {
                align-items:    center;
                max-width:      calc(100% - 60px);
                margin:         0 auto;

                & img {
                    display: none;
                }

                & h2 {
                    text-align: center;
                    order:      2;
                }

                & p {
                    order: 3;
                }

                & span {
                    order: 1;
                }
            }
        }
    }

    #fb-automate {
        padding: 40px 0;

        .automate-container {
            gap: 30px;

            .automate-content {
                .automate-item {
                    .title {
                        .order {
                            font-size:   32px;
                            font-weight: 700;
                            line-height: 36px;
                        }
                    }

                    .info {
                        padding-top: 20px;
                        gap:         10px;

                        & h3 {
                            font-size:   16px;
                            line-height: 22px;
                        }

                        & p {
                            font-size:   14px;
                            line-height: 20px;
                        }
                    }

                    &:last-child {
                        padding-bottom: 180px;
                    }
                }
            }
        }
    }

    #testimonials {
        .container {
            padding: 40px 0;

            .highlighted-heading {
                gap:             10px;
                padding-bottom:  10px;

                .highlighted-item {
                    &:nth-child(2) {
                        bottom: 15px;
                    }

                    & img {
                        width:  150px;
                        height: 70px;
                    }

                    .title {
                        & svg {
                            width: 18px;
                        }

                        & img {
                            width:  18px;
                            height: 19px;
                        }

                        & div {
                            font-size:   13px;
                            line-height: 21px;
                            max-width:   75px;
                        }
                    }
                }
            }

            .section-title {
                padding-bottom: 32px;
            }

            .testimonials-cards {
                grid-template-columns: auto;

                .testimonial-card {
                    flex-direction: column-reverse;

                    &:first-child {
                        border-radius: 20px 20px 0 0;
                    }

                    &:nth-last-child(-n+2) {
                        display: none;
                    }
                }
            }

            .view-more {
                padding-top: 32px;
            }
        }
    }
}

@media screen and (max-width: 600px) {
    #why-use {
        .container {
            padding: 50px 0;
            gap:     40px;

            .title {
                & h2 {
                    font-size:      24px;
                    line-height:    30px;
                }

                & p {
                    font-size:      14px;
                    line-height:    20px;
                    text-align:     center;
                }
            }

            .content {
                grid-template-columns:  1fr;
                gap:                    50px;

                & div {
                    align-items: center;

                    & h5 {
                        font-size:      16px;
                        font-weight:    400;
                        line-height:    26px;
                    }

                    & p {
                        font-size:      14px;
                        line-height:    20px;
                        text-align:     center;
                    }
                }
            }
        }
    }

    #fb-automate {
        .container {
            .automate-container {
                padding:                50px 0;
                grid-template-columns:  1fr;

                .automate-content {
                    .automate-item {
                        min-block-size: initial;
                        padding-bottom: 20px;

                        .info {
                            & h3 {
                                font-size:   22px;
                                line-height: 28px;
                            }

                            & p {
                                font-size:   16px;
                                line-height: 22px;
                            }
                        }
                    }

                    .automate-item-small {
                        display:    block;
                        position:   relative;
                        overflow:   hidden;

                        & img, video {
                            max-inline-size:    100%;
                            block-size:         auto;
                            display:            block;
                            vertical-align:     middle;
                        }
                    }
                }

                .media-content {
                    display: none;
                }
            }
        }
    }
}

@media screen and (max-width: 480px) {
    #hero {
        .container {
            .hero {
                padding: 93px 0 0;

                .statistic-data {
                    & button:first-child {
                        order: 2;
                    }

                    & button:nth-child(2) {
                        order: 3;
                    }

                    & button:nth-child(3) {
                        order: 4;
                    }

                    & button:last-child {
                        order: 1;
                    }
                }
            }
        }
    }

    #industries {
        .container {
            padding: 0 0 45px 20px;
            max-width: 100vw;

            .industries {
                justify-content: flex-start;
                flex-wrap:       nowrap;
                overflow-x:      auto;
                gap:             30px;

                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }

    #fb-automate {
        .container {
            .automate-container {
                .automate-content {
                    .automate-item {
                        .info {
                            padding-top: 10px;
                            gap:         10px;
                        }
                    }
                }
            }
        }
    }

    #testimonials {
        .container {
            .highlighted-heading {
                .highlighted-item {
                    & img {
                        width:  102px;
                        height: 50px;
                    }

                    .title {
                        & svg {
                            width:  16px;
                            height: 16px;
                        }

                        & img {
                            width:  15px;
                            height: 16px;
                        }

                        & div {
                            font-size:   11px;
                            line-height: 14px;
                            max-width:   60px;
                        }
                    }
                }
            }

            .section-title {
                max-width:      330px;
            }

            .testimonials-cards {
                display:    flex;
                overflow-x: auto;

                .testimonial-card {
                    min-width:       calc(100vw - 80px);
                    justify-content: space-between;
                    padding:         30px 20px;
                    box-shadow:      0 14px 44px 0 rgba(0, 0, 0, 0.05);

                    &:last-child {
                        border-radius: 0 0 20px 20px;
                    }

                    .rate {
                        gap: 20px;
                    }
                }

                &::-webkit-scrollbar {
                    display: none;
                }
            }

            .view-more {
                display: none;
            }
        }
    }

    #saleBanner {
        .sale-banner {
            padding: 0 0 20px;
        }
    }
}