#hero-carousel {
    .container {
        padding: 162px 0 0;

        .carousel-item {
            display:                grid;
            grid-template-columns:  1fr 1fr;
            gap:                    40px;

           .carousel-content {
               display:         flex;
               flex-direction:  column;
               justify-content: center;

               .page-title {
                   text-align: left;

                   & h2 {
                       font-size:       40px;
                       font-style:      normal;
                       font-weight:     400;
                       line-height:     46px;
                       color:           #2F1D49;
                   }

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

                   .statistic-data {
                       display:         flex;
                       flex-wrap:       wrap;
                       align-items:     center;
                       gap:             10px;

                       & button {
                           background: #FFFFFF;

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

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

               .hero-actions {
                   display:    flex;
                   gap:        10px;
                   margin-top: 50px;

                   .btn_commerce {
                       background: #FF5607;
                   }

                   .btn_blog {
                       background: #1877F2;
                   }

                   .btn_photo {
                       background: #FF3D71;
                   }
               }
           }

            .carousel-img {
                & img {
                    width:          100%;
                    mix-blend-mode: multiply;
                    transform:      scale(1.3);
                    position:       relative;
                    z-index:        -1;
                }
            }

            &:nth-child(3) {
                .carousel-img {
                    margin-bottom: 25px; /* TODO sekilde problem var */
                }
            }
        }

        .control-buttons {
            display:            flex;
            justify-content:    center;
            align-items:        center;
            gap:                50px;
            margin-top:         80px;

            & div {
                font-size:          16px;
                font-style:         normal;
                font-weight:        400;
                line-height:        26px; /* 162.5% */
                text-transform:     uppercase;
                color:              #98A2B3;
                cursor:             pointer;

                &:first-child {
                    &.active, &:hover {
                        color: #FF5607;
                    }
                }

                &:nth-child(2) {
                    &.active, &:hover {
                        color: #1877F2;
                    }
                }

                &:last-child {
                    &.active, &:hover {
                        color: #FF3D71;
                    }
                }
            }

            .active {
                padding:        10px 20px;
                border-radius:  30px;
                background:     #EAECF0;
            }
        }
    }
}

#hero {
    padding: 150px 0 60px;

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

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

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

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

                & button {
                    background:  #FFFFFF;
                    font-weight: 400;

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

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

        .hero-actions {
            display: flex;
            gap:     10px;

            & button {
                &:last-child {
                    padding: 9px 14px;
                }
            }
        }

        .hero-img {
            padding: 0 50px;

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

#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;
            }
        }
    }
}

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

        .section-title {
            padding-bottom: 50px;

            & h2 {
                padding-top:        10px;
                background:         linear-gradient(to left bottom, #FFD89E, #7061EF, #FF4405, #18ACFE);
                background-clip:    text;
                color:              transparent;
            }
        }

        .contents {
            display:         flex;
            align-items:     center;
            justify-content: center;
            gap:             10px;

            .content {
                padding:        20px;
                border-radius:  20px;
                background:     #FFF;
                box-shadow:     0 14px 44px 0 rgba(0, 0, 0, 0.03);
                max-width:      max-content;

                & h5 {
                    font-size:      18px;
                    font-style:     normal;
                    font-weight:    400;
                    line-height:    24px; /* 133.333% */
                    color:          #2F1D49;
                    text-align:     center;
                }

                & p {
                    font-size:      14px;
                    font-style:     normal;
                    font-weight:    400;
                    line-height:    20px; /* 142.857% */
                    color:          #7D89B0;
                    text-align:     center;
                    padding:        10px 0 20px;
                }

                & img {
                    width: 100%;
                }
            }
        }
    }
}

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

        .section-title {
            .btn {
                display: inline-block;
                margin:  30px 0 50px;
            }
        }

        .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;

                    svg path {
                        stroke: #F63D68;
                    }

                    &.plurk {
                        svg path {
                            fill: #F63D68;
                        }
                    }

                    .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;
                        }
                    }
                }
            }
        }
    }
}

#features {
    padding: 100px 0 0;

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

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

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

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

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

                & span {
                    font-size:    14px;
                    font-style:   normal;
                    font-weight:  400;
                    line-height:  20px; /* 142.857% */
                    color:        #FF3D71;
                }

                .info {
                    padding-top:    37px;
                    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:   16px;
                        font-style:  normal;
                        font-weight: 400;
                        line-height: 24px;
                        color:       #7D89B0;
                    }
                }

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

            .feature-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%;
                        }
                    }
                }
            }
        }
    }
}

#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% */
                        text-transform: uppercase;
                        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;
    }
}

.watch-video-modal {
    position:           fixed;
    top:                0;
    left:               0;
    right:              0;
    bottom:             0;
    background:         rgba(52, 64, 84, 0.1);
    backdrop-filter:    blur(8px);
    overflow-x:         hidden;
    overflow-y:         auto;
    outline:            0;
    z-index:            9999;
    display:            none;

    .modal-overlay {
        position:           fixed;
        top:                0;
        left:               0;
        right:              0;
        bottom:             0;
        z-index:            100;
        background:         rgba(0,0,0,.6);
        display:            flex;
        justify-content:    center;
        align-items:        center;

        .modal-container {
            background-color:   transparent;
            padding:            0;
            width:              100%;
            max-width:          800px;
            max-height:         100vh;
            border-radius:      4px;
            overflow-y:         auto;
            box-sizing:         border-box;

            .modal-header {
                display:            flex;
                justify-content:    flex-end;
                padding-bottom:     20px;

                & button {
                    background: none;

                    svg path {
                        stroke: #FFF;
                    }
                }
            }

            .modal-content {
                position:       relative;
                height:         400px;
                pointer-events: auto;
                border-radius:  12px;
                overflow:       hidden;
                padding:        40px 0;


                .iframe-container {
                    background-color:   transparent;
                    padding:            0;
                    width:              100%;
                    max-width:          800px;
                    border-radius:      10px;

                    iframe {
                        position:   absolute;
                        width:      100%;
                        height:     100%;
                        top:        0;
                        left:       0;
                        border:     0;
                    }
                }
            }
        }
    }

    &.is-watch {
        display: block;
    }
}

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

@media screen and (max-width: 1280px) {
    #hero-carousel {
        .container {
            .carousel-item {
                gap: 20px;

                &:nth-child(3) {
                    .carousel-img {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

    #hero {
        padding: 120px 0 86px;

        .container {
            gap: 20px;

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

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

            .hero-img {
                padding: 0; /* todo bax */
            }
        }
    }

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

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

    #ai-contents {
        .container {
            .contents {
                .content {
                    padding: 15px;
                }
            }
        }
    }

    #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;
                }
            }
        }
    }

    #features {
        .container {
            .feature-content {
                .feature-item {
                    .title {
                        flex-direction: row;
                        align-items:    baseline;
                        gap:            4px;
                    }

                    .info {
                        padding-top: 20px;
                    }
                }
            }
        }
    }

    #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) {
    #hero-carousel {
        .container {
            .carousel-item {
                .carousel-content {
                    .page-title {
                        gap: 13px;

                        & h2 {
                            font-size:      32px;
                            line-height:    36px;
                        }
                    }

                    .hero-actions {
                        & a, button {
                            min-width: max-content;
                        }
                    }
                }

                .carousel-img {
                    & img {
                        transform: scale(1.1);
                    }
                }

                &:nth-child(3) {
                    .carousel-img {
                        margin-bottom: 25px;
                    }
                }
            }
        }
    }

    #industries {
        .container {
            .industries {
                gap: 40px 70px;
            }
        }
    }

    #ai-contents {
        .container {
            .contents {
                flex-direction: column;
            }
        }
    }

    #features {
        .container {
            .feature-content {
                .feature-item {
                    .order {
                        font-size:   26px;
                        line-height: 30px;
                    }

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

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

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

@media screen and (max-width: 768px) {
    #hero-carousel {
        .container {
            padding: 130px 0 0;

            .carousel-item {
                grid-template-columns:  1fr;
                gap:                    40px;

                .carousel-content {
                    align-items: center;

                    .page-title {
                        text-align: center;

                        .statistic-data {
                            justify-content: center;
                        }
                    }

                    .hero-actions {
                        margin-top: 30px;
                    }
                }

                .carousel-img {
                    width: calc(100% - 40px);

                    & img {
                        transform: scale(1.2);
                    }
                }

                &:nth-child(3) {
                    .carousel-img {
                        margin-bottom: 25px;
                    }
                }
            }

            .control-buttons {
                margin-top:   50px;
            }
        }
    }

    #hero {
        .container {
            .hero-actions {
                display: none;
            }
        }
    }

    #features {
        padding: 40px 0;

        .feature-container {
            gap: 30px;

            .feature-content {
                .feature-item {
                    .title {
                        flex-direction: row;
                        align-items:    baseline;
                        gap:            4px;
                    }

                    .order {
                        font-size:   24px;
                        line-height: 30px;
                    }

                    & span {
                        font-size:   12px;
                        line-height: 18px;
                    }

                    .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) {
    #hero-carousel {
        .container {
            padding: 121px 0 0;

            .carousel-item {
                .carousel-content {
                    .page-title {
                        max-width:  100%;
                        gap:        10px;

                        & h2 {
                            font-size:   18px;
                            line-height: 24px;
                        }

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

                        .statistic-data {
                            gap: 6px;

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

                    .hero-actions {
                        width:          100%;
                        flex-direction: column;
                        margin-top:     40px;

                        .btn {
                            text-align: center;
                        }
                    }
                }

                .carousel-img {
                    & img {
                        transform: scale(1.2);
                    }
                }
            }

            .control-buttons {
                gap: 30px;

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

    #ai-contents {
        .container {
            padding:  50px 0;

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

            .contents {
                .content {
                    padding:        12px;
                    border-radius:  12px;

                    & h5 {
                        font-size:      14px;
                        font-weight:    600;
                        line-height:    16px;
                    }

                    & p {
                        font-size:      12px;
                        line-height:    16px;
                        padding:        6px 0 12px;
                    }
                }
            }
        }
    }

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

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

                    .order {
                        font-size:   26px;
                        line-height: 30px;
                    }

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

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

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

                .feature-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 {
        padding: 93px 0 86px;

        .container {
            .hero {
                .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;
                }
            }
        }
    }

    #ai-contents {
        .container {
            .section-title {
                max-width:      300px;

                & h2 {
                    font-size:   18px;
                    line-height: 24px;
                }
            }
        }
    }

    #features {
        .container {
            .feature-content {
                .feature-item {
                    .order {
                        font-size:   24px;
                        line-height: 30px;
                    }

                    & span {
                        font-size:   12px;
                        line-height: 18px;
                    }

                    .info {
                        padding-top: 20px;
                        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;
                }
            }
        }
    }

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