@font-face {
    font-family: W2WFONT;
    font-weight: 400;
    src: url("./assets/font/W2WFONT-Regular.ttf");
}

@font-face {
    font-family: W2WFONTBRANDING;
    font-weight: 700;
    src: url("./assets/font/W2WFONTBRANDING-bold.ttf");
}

@font-face {
    font-family: W2WFONT;
    font-weight: 600;
    src: url("./assets/font/W2WFONT-Bold.ttf");
}

@font-face {
    font-family: W2WFONT;
    font-weight: 700;
    src: url("./assets/font/W2WFONT-Bold.ttf");
}


body {

    font-family: W2WFONT !important;
    background-color: #fdfaf7 !important;
    /*overflow-x: hidden;*/

    .branding-font {
        font-family: W2WFONTBRANDING !important;
    }


    .common-yellow-btn {
        min-width: 86px;
        height: 44px;
        color: #121110;
        font-size: 16px;
        font-weight: 400;
        border-radius: 16px;
        border: 2px solid var(--Neutral-900, #121110);
        background: var(--Primary-500, #ff8a00);
        box-shadow: 2px 2px 0px 0px #121110;
        transition: all 0.5s;
        padding: 8px 24px;

        &:hover {
            background: var(--Primary-500, #ff8a00) !important;
            box-shadow: 4px 4px 0px 0px #121110;
        }

        &:active {
            background: var(--Primary-400, #ffb03f) !important;
        }
    }

    .customer-item {
        width: 235px;
        padding: 24px 16px;
        border-radius: 12px;
        border: 1px solid #121110;
        box-shadow: 4px 4px 0px 0px #121110;
        margin-bottom: 20px;
        min-height: 184px;

        .header-item {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;

            img {
                width: 40px;
                height: 40px;
            }

            .customer-name {
                margin-bottom: 4px;
            }
        }

        .body-item {
            .review-content {
                color: #696561 !important;
            }
        }
    }

    .header-logo{
        max-width: 174px;
    }
    .channel-logo{
        width: 24px;
    }

    .item-title{
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    .slide-image-section {
        padding-top: 100px;
        padding-bottom: 61px;
        width: 100%;
        min-width: 1280px;
        height: 677px;

        .owl-carousel,
        .owl-carousel-custom,
        .owl-carousel-reverse,
        .owl-carousel-reverse-custom {
            height: 677px;

            .owl-stage-outer {
                height: 677px;
            }

            .owl-stage {
                height: 520px;
                display: flex;

                .owl-item {
                    width: fit-content !important;
                    margin-right: 20px;
                }
            }
        }

        .list-image {
            text-wrap: nowrap;
            overflow: hidden;
            height: 100%;
            width: 100%;

            .scroll {
                overflow: hidden;
                display: flex;
                height: 100%;

                .image-item {
                    &:first-child,
                    &:nth-child(2),
                    &:nth-child(3),
                    &:nth-child(6) {
                        img {
                            height: 245px;
                        }
                    }

                    &:first-child {
                        margin-top: 81px;
                    }

                    &:nth-child(2) {
                        margin-top: 34px;
                    }

                    &:nth-child(3) {
                        margin-top: 157px;
                    }

                    &:nth-child(4) {
                        margin-top: 238px;

                        img {
                            height: 175px;
                        }
                    }

                    &:nth-child(5) {
                        img {
                            height: 315px;
                        }
                    }

                    &:nth-child(6) {
                        margin-top: 115px;
                    }

                    img {
                        border-radius: 12px;
                        margin-right: 10px;
                    }
                }
            }
        }

        .slider {
            height: 677px;
            overflow: hidden;
            position: relative;
            width: 100%;

            .slide-track {
                animation: scroll 40s linear infinite;
                display: flex;
                width: fit-content;

                .image-1,
                .image-2,
                .image-3,
                .image-6 {
                    img {
                        height: 245px;
                        max-width: 100% !important;
                    }
                }

                .image-1 {
                    margin-top: 81px;
                    width: 392px;
                }

                .image-2 {
                    margin-top: 34px;
                    width: 392px;
                }

                .image-3 {
                    margin-top: 157px;
                    width: 392px;
                }

                .image-4 {
                    margin-top: 238px;
                    width: 133px;

                    img {
                        height: 175px;
                        width: 100%;
                    }
                }

                .image-5 {
                    width: 239px;

                    img {
                        height: 315px;
                        width: 239px;
                    }
                }

                .image-6 {
                    margin-top: 115px;
                    width: 392px;
                }

                img {
                    border-radius: 12px;
                }
            }

            .slide {
                margin-right: 20px;
            }
        }
    }

    .slide-text-section {
        height: 140px;
        width: 100%;
        font-family: W2WFONT;

        .m-scroll {
            display: flex;
            position: relative;
            width: 100%;
            height: 100%;
            margin: auto;
            overflow: hidden;
            z-index: 1;

            .title {
                display: flex;
                position: absolute;
                top: 0;
                left: 0;
                align-items: center;
                justify-content: flex-start;
                width: 100%;
                height: 100%;
                white-space: nowrap;
                transform: scale(1);
                transition: all 1s ease;

                & > div {
                    display: flex;
                    animation: scrollText 80s infinite linear;
                }

                h1 {
                    font-size: 100px;
                    font-weight: 700;
                    color: transparent;
                    -webkit-text-stroke: 3px black;
                    transition: all 2s ease;
                    text-transform: uppercase;

                    p {
                        margin-right: 80px;
                        display: inline-block;

                        &:last-child {
                            margin-right: unset;
                        }
                    }
                }
            }
        }
    }

    .container {
        p {
            margin-bottom: unset;
        }

        .regular {
            font-style: normal;
        }

        .bold {
            font-weight: 700;
        }

        .px-12 {
            font-size: 12px;
            color: #aba6a1;
            line-height: 16px;
        }

        .px-14 {
            font-size: 14px;
            color: #121110;
            line-height: 20px;
        }

        .px-16 {
            font-size: 16px;
            color: #696561;
            font-weight: 400;
            line-height: 24px;
        }

        .px-24 {
            font-size: 24px;
            color: #121110;
        }

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

        .px-36 {
            font-size: 36px;
            color: #121110;
            line-height: 54px;
        }

        .px-48 {
            font-size: 48px;
            color: #121110;
            line-height: 64px;
        }

        .px-64 {
            font-size: 64px;
            line-height: 73px;
        }

        .px-80 {
            font-size: 75px;
            color: #ff8a00;
        }

        .px-100 {
            font-size: 100px;
            color: #ff8a00;
        }

        .black {
            color: #121110 !important;
        }

        .orange {
            color: #ff8a00 !important;
        }

        .content-header {
            padding-top: 40px;
            padding-bottom: 8px;

            .header-menu-bar-container {
                width: 100%;
                display: flex;
                justify-content: center;

                .menu-bar {
                    width: 84.444444%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .menu-list {
                        display: flex;
                        align-items: center;

                        .menu-item {
                            margin-right: 48px;
                            position: relative;
                            display: inline-block;

                            &:last-child {
                                margin-right: unset;
                            }

                            a {
                                text-decoration: none !important;
                                display: flex;
                                align-items: center;
                                gap: 8px;
                            }

                            .menu-item-text {
                                font-size: 16px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: 24px;
                                color: #696561;

                                &:hover {
                                    color: #121110;
                                }
                            }
                        }
                    }
                }
            }
        }

        .content-body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .common-marquee {
                background-color: #00b3fa;
                box-shadow: 4px 4px 0px 0px #121110;
                border-radius: 8px;
                padding: 2px 12px 4px 12px;
                color: #fff;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                transform: rotate(8.633deg);

            }

            .banner-section {
                width: 84.444444%;
                min-width: 1280px;
                padding-bottom: 84px;

                .banner-content {
                    .content-text {
                        margin-top: 184px;
                        margin-bottom: 136px;

                        .support {
                            margin-bottom: 16px;
                        }

                        button {
                            margin-top: 32px;
                        }
                    }
                }

                .banner-image {
                    width: calc(100% + 21.5px);
                    position: relative;

                    img {
                        position: absolute;
                        right: 0;
                    }
                }

                .image-1,
                .image-2,
                .image-3,
                .welcome-text {
                    position: absolute;
                    transition: all 0.1s;
                }

                .welcome-text {
                    top: 267px;
                    left: 1045px;
                    width: 210px;
                }

                .image-1 {
                    left: 1021px;
                    top: 515px;
                }

                .image-2 {
                    top: 186px;
                    right: 174px;
                }

                .image-3 {
                    top: 635px;
                    right: 218px;
                }
            }

            .contact-section {
                padding-top: 143px;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                .arrow {
                    margin-top: 93px;
                }

                .welcome-text {
                    position: absolute;
                    top: 80px !important;
                    left: unset !important;
                    right: 280px !important;
                }

                .bottom-image {
                    position: absolute;
                    bottom: 110px;
                    left: 200px;
                }
            }

            .contact-info-section {
                width: 84.444444%;

                padding-top: 84px;
                padding-bottom: 84px;

                .info {
                    padding-right: 123px;

                    & > div {
                        &:first-child {
                            margin-bottom: 16px;
                        }

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

                    .info-contact {
                        .px-12 {
                            color: #696561 !important;
                        }

                        .px-16 {
                            color: #121110 !important;
                        }

                        & > div {
                            margin-bottom: 16px;

                            &:last-child {
                                margin-bottom: unset;
                            }
                        }
                    }
                }

                .form {
                    input,
                    textarea {
                        border-radius: 16px;
                        border: 1px solid var(--Neutral-900, #121110);
                        background: var(--Other-bg, #fdfaf7);
                        box-shadow: 2px 2px 0px 0px #121110;
                        width: 100%;
                        padding: 16px;

                        &:focus {
                            outline: unset !important;
                            border-width: 2px;
                        }
                    }

                    .row {
                        & > div {
                            margin-bottom: 20px;
                        }

                        &:last-child {
                            & > div {
                                margin-bottom: unset;
                            }
                        }
                    }

                    input {
                        height: 56px;
                    }

                    textarea {
                        resize: none;
                        height: 162px;
                    }
                }
            }

            .about-section {
                padding-top: 35px;
                padding-bottom: 35px;
                width: 84.444444%;
                min-width: 1280px;

                .about-image {
                    position: relative;
                    width: fit-content;

                    .top-image {
                        position: absolute;
                        top: 109px;
                        right: -60px;
                    }

                    .bottom-image {
                        position: absolute;
                        bottom: 67px;
                    }
                }

                .about-content {
                    margin-left: 67px;
                    margin-top: 279px;
                    position: relative;

                    .top-image {
                        position: absolute;
                        top: -63px;
                        right: -50.85px;
                    }

                    .bottom-image {
                        position: absolute;
                        left: 269px;
                        bottom: -90px;
                    }

                    .content-text {
                        .about {
                            width: 444px;
                            color: #121110 !important;
                        }

                        .number-one {
                            color: #ff8a00 !important;
                        }
                    }
                }
            }

            .channel-section {
                width: 84.444444%;
                min-width: 1280px;
                padding-top: 100px;
                padding-bottom: 100px;

                .chanel-item {
                    margin-right: 20px;
                    width: 392px;
                    border: 2px solid var(--Neutral-900, #121110);
                    box-shadow: 4px 4px 0px 0px #121110;
                    border-radius: 24px;
                    padding: 24px;
                    transition: all 0ms;

                    &:last-child {
                        margin-right: unset;
                    }

                    &:hover {
                        box-shadow: 8px 8px 0px 0px #121110;
                    }

                    .item-header {
                        .icon {
                            margin-bottom: 24px;
                            max-width: 84px;
                        }
                    }

                    .item-content {
                        margin-bottom: 24px;

                        p {
                            margin-top: 12px;
                            margin-bottom: 12px;

                            &:last-child {
                                margin-bottom: unset;
                            }
                        }
                    }

                    .item-footer {
                        a {
                            display: inline-block;
                            text-decoration: none !important;
                            color: #121110 !important;
                            width: fit-content;
                            padding-bottom: 8px;
                            transition: transform 0.3s;

                            svg {
                                margin-left: 12px;
                            }

                            &::after {
                                content: '';
                                display: block;
                                width: 0;
                                height: 1px;
                                background: #121110;
                                margin-top: 4px;
                                transition: width .3s;
                            }

                            &:hover {
                                cursor: pointer;

                                &::after {
                                    width: 100%;
                                }

                                svg {
                                    margin-left: 16px;
                                }
                            }
                        }


                    }
                }
            }

            .our-founders-section {
                width: 84.444444%;
                min-width: 1280px;
                padding-bottom: 125.45px;

                .our-founders-content {
                    margin-top: 100px;
                    position: relative;

                    .number-one {
                        font-size: 56px;
                        margin-bottom: 40px;
                    }

                    .content-text {
                        .description-text {
                            margin-top: 8px;
                            margin-bottom: 16px;
                        }
                    }

                    .bottom-image {
                        position: absolute;
                        bottom: -110px;
                        left: 268px;
                    }
                }

                .founders-image {
                    display: flex;
                    justify-content: center;

                    .image-container {
                        gap: 20px;
                        transform: rotate(9.91deg);

                        .slider {
                            height: 771px !important;
                            overflow: hidden;

                            .slide-track {
                                height: 771px !important;

                                animation: scrollVertically 40s linear infinite;

                                .slide {
                                    & > div {
                                        width: 392px;
                                        height: 248px;
                                        padding-bottom: 0px !important;
                                        margin-bottom: 24px !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .our-values-section {
                padding-top: 100px;
                width: 84.444444%;
                min-width: 1280px;

                .content-text {
                    margin-bottom: 60px;
                }

                .values-content {
                    padding-left: 103px;
                    padding-right: 103px;
                    padding-bottom: 100px;
                }

                .row {
                    &:first-child {
                        .values-item {
                            margin-bottom: 42px;
                        }
                    }

                    .values-item {
                        width: 392px;

                        .item-title {
                            margin-top: 16px;
                            margin-bottom: 8px;
                        }
                    }

                    .values-item:first-child {
                        margin-right: 226px;
                    }
                }
            }

            .display--inline-top {
                display: inline-block;
                vertical-align: top;
            }

            .fill-dimensions {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }

            .relative {
                position: relative;
            }

            .cover-img {
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
            }

            .gallery-image {
                padding-bottom: 0px;
                margin-bottom: 20px;
                animation: marqueeTop 8s linear infinite;
            }

            .gallery-h--tb {
                .gallery-image {
                    animation: marqueeBottom 8s linear infinite;
                }
            }

            .gallery-image__img {
                padding-top: 18vh;
                margin: 0 auto;

                .customer-item {
                    width: 235px;
                    padding: 24px 16px;
                    border-radius: 12px;
                    border: 1px solid #121110;
                    box-shadow: 4px 4px 0px 0px #121110;
                    margin-bottom: 20px;
                    min-height: 184px;

                    .header-item {
                        display: flex;
                        align-items: center;
                        gap: 16px;
                        margin-bottom: 16px;

                        img {
                            width: 40px;
                            height: 40px;
                        }

                        .customer-name {
                            margin-bottom: 4px;
                        }
                    }

                    .body-item {
                        .review-content {
                            color: #696561 !important;
                        }
                    }
                }
            }

            .gallery-h {
                height: 703px;
                overflow: hidden;
            }

            .customer-section {
                width: 84.444444%;
                /*min-width: 1280px;*/

                .customer-brand {
                    padding-top: 124px;
                    padding-bottom: 168px;

                    .brand-list {
                        padding-top: 42.5px;

                        display: flex;
                        flex-wrap: wrap;
                        gap: 54px;

                        img {
                            width: 125px;
                        }

                        div {
                            width: 212px;
                            display: flex;
                            justify-content: center;

                            &:nth-child(5) {
                                img {
                                    width: 82px;
                                }
                            }

                            &:nth-child(6) {
                                img {
                                    width: 87px;
                                }
                            }
                        }
                    }
                }

                .customer-review {
                    display: flex;
                    gap: 25px;
                    padding-left: 83px;
                    height: 706px;

                    .slide-customer-review {
                        .slider {
                            height: 706px;
                            overflow: hidden;

                            .slide-track {
                                animation: scrollVertically 75s linear infinite;
                            }
                        }
                    }

                    .slide-customer-review.reverse {
                        .slider {
                            .slide-track {
                                animation: scrollVerticallyReverse 75s linear infinite;
                            }
                        }
                    }

                    .gallery {
                        width: 100%;
                        height: 706px;
                    }

                    .block-33 {
                        width: 235px;
                        margin-right: 25px;

                        &:last-child {
                            margin-right: unset !important;
                        }
                    }

                    .gallery-image {
                        height: 184px;
                    }

                    .list-customer {
                        overflow: hidden;
                        width: 235px;
                        height: 100%;
                        overflow-y: hidden;
                    }
                }
            }

            .connect-us-section {
                width: 84.444444%;
                min-width: 1280px;
                padding-top: 20px;
                padding-bottom: 166px;

                .text-rotate {
                    display: none;
                }

                .contact-content {
                    width: 100%;
                    display: flex;
                    justify-content: center;

                    .contact-image-container {
                        position: relative;

                        .top-image {
                            position: absolute;
                            top: 8.5px;
                            right: -82.2px;
                        }

                        .round-text-image {
                            position: relative;
                            width: 883px;
                            height: 881px;
                            border-radius: 100vmax;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .image {
                                position: absolute;
                                border-radius: 100vmax;
                                z-index: 2;

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

                            .text {
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                top: 42px;
                                animation: textRotation 20s linear infinite;
                            }

                            .text span {
                                z-index: 1;
                                position: absolute;
                                left: 50%;
                                font-size: 100px;
                                line-height: 140px;
                                font-weight: 700;
                                color: #fff;
                                -webkit-text-stroke: 1px #121110;
                                transform-origin: 0 435px;
                            }
                        }

                        .bottom-image {
                            position: absolute;
                            bottom: -28px;
                            left: -121.35px;
                        }

                        .welcome-text {
                            width: 171px;
                            position: absolute;
                            top: 480px !important;
                            left: 520px !important;
                            z-index: 3;
                        }
                    }
                }

                .contact-btn {
                    background-color: #121110;
                    padding: 6px 12px 8px 12px;
                    border-radius: 12px;
                    width: 110px;
                    height: 38px;
                    border: none !important;
                    display: flex;
                    align-items: center;
                    gap: 12px;

                    color: #fff;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 24px;
                }

                #wrapper-cube {
                    top: 6380px;
                    position: absolute;
                    left: 650px;
                    width: 600px;
                    height: 620px;
                    z-index: 11;
                }

                #cube {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin: -40px 0 0 -50px;
                    background: blue;
                    border-radius: 80%;
                    backface-visibility: hidden;
                    visibility: hidden;
                    z-index: 10;
                }
            }

            .footer-section {
                width: 84.444444%;
                min-width: 1280px;
                padding-top: 56px;
                padding-bottom: 36px;

                .content {
                    .px-24 {
                        margin-bottom: 24px;
                    }
                }

                .logo-left {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: end;
                    align-items: center;

                    img {
                        height: 92px;
                    }
                }
            }
        }

        .content-footer {
            width: 84.444444%;
            min-width: 1280px;

            .footer {
                width: 100%;
                padding-top: 24px;
                padding-bottom: 63px;
                border-top: 1px solid #121110;
                display: flex;
                justify-content: space-between;
                padding-left: unset !important;
                padding-right: unset !important;

                .follow-info {
                    .follow-icon {
                        margin-top: 16px;
                        cursor: pointer;

                        px-12 {
                            color: #696561 !important;
                        }

                        img {
                            margin-right: 24px;

                            &:last-child {
                                margin-right: unset !important;
                            }
                        }
                    }
                }

                .source {
                    height: 100%;
                    display: flex;
                    align-items: end;
                    flex-direction: column;
                    justify-content: end;

                    .px-16:nth-child(1) {
                        color: #121110 !important;
                    }
                }
            }
        }
    }

    .menu-list-mobile {
        height: 0px;

        .menu-container {
            display: none !important;


        }
    }

    .dropdow-menu {
        width: 212px;
        display: none;
        position: absolute;
        z-index: 1;
        padding: 8px 12px;
        border-radius: 16px;
        background: #FFF;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;

        .item-menu {
            cursor: pointer;
            display: flex;
            gap: 12px;
            padding: 8px 12px;
            margin-bottom: 12px;
            color: var(--Neutral-900, #121110);
            font-size: 16px;
        }
    }

    .menu-item:hover {
        .dropdow-menu {
            display: block;
        }
    }

    .menu-list-mobile {
        .dropdow-menu {
            position: relative;
            background: transparent;
        }
    }
}

@keyframes scrollText {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}


@media (min-width: 1440px) {
    .btn-menu-mobile,
    .slide-customer,
    .slide-image-section:has(.founders-image-mini) {
        display: none;
    }

    .banner-section {
        .banner-image {
            height: 100%;
        }

        .welcome-text {
            top: 100px !important;
            left: -280px !important;
        }

        .image-1 {
            left: 17 !important;
            top: 432px !important;
        }

        .image-2 {
            top: 96px !important;
            right: 64px !important;
        }

        .image-3 {
            top: 555px !important;
            right: 122px !important;
        }
    }
}

@media (max-width: 1440px) {

    body {
        .slide-customer,
        .slide-image-section:has(.founders-image-mini) {
            display: none;
        }

        .btn-menu-mobile {
            display: none;
        }

        .container:not(.slide-container) {
            width: 1464px;
            max-width: unset;

            .banner-section {
                .welcome-text {
                    top: 140px !important;
                    left: -280px !important;
                }

                .image-1 {
                    left: 17 !important;
                    top: 432px !important;
                }

                .image-2 {
                    top: 96px !important;
                    right: 64px !important;
                }

                .image-3 {
                    top: 555px !important;
                    right: 122px !important;
                }
            }

            .customer-section {
                .customer-brand {
                    .brand-list {
                        div {
                            width: 160px;
                        }
                    }
                }
            }

            .connect-us-section {
                padding-top: 120px;

                #wrapper-cube {
                    left: 435px;
                }
            }

            .contact-section {
                .welcome-text {
                    position: absolute;
                    top: 120px !important;
                    left: unset !important;
                    right: 120px !important;
                }

                .bottom-image {
                    position: absolute;
                    bottom: 120px !important;
                    left: 40px !important;
                }
            }


        }
    }
}

@media (min-width: 1920px) {


    body {
        .container:not(.slide-container) {
            width: 100%;
            max-width: unset;
        }
    }

    .slide-container {
        .slide-image-section {
            padding-bottom: 164px !important;
        }
    }

    .container {
        .content-header {
            .header-menu-bar-container {
                .menu-bar {
                    width: 1660px !important;
                }
            }
        }

        .content-footer,
        .footer-section,
        .connect-us-section,
        .our-values-section,
        .our-founders-section,
        .channel-section,
        .about-section,
        .contact-info-section,
        .banner-section {
            width: 1660px !important;

            .welcome-text {
                top: 100px !important;
                left: -100px !important;
            }

            .image-1 {
                left: 140px !important;
                top: 420px !important;
            }

            .image-2 {
                top: 96px !important;
                right: 64px !important;
            }

            .image-3 {
                top: 555px !important;
                right: 122px !important;
            }
        }

        .channel-section {
            padding-bottom: 253px !important;

            .chanel-item {
                width: 538px !important;
            }
        }

        .our-founders-section {
            padding-bottom: 154px !important;
        }

        .our-values-section {
            .content-text {
                margin-bottom: 130px !important;
            }

            .values-content {
                padding-left: 137px !important;
                padding-right: 137px !important;
            }

            .row {
                .values-item {
                    width: 541px !important;
                }
            }
        }

        .content-body {

            .connect-us-section {
                padding-top: 180px !important;
            }
        }


    }
}

@media (max-width: 1024px) {
    body:has(.menu-list-mobile-active) {
        overflow: hidden !important;
    }

    body {
        width: 100% !important;

        .slide-customer,
        .slide-image-section:has(.founders-image-mini) {
            display: block;
        }

        .slide-container {
            overflow: hidden !important;
            width: 100%;

            .slide-text-section {
                height: 80px !important;

                h1 {
                    font-size: 60px !important;
                    font-weight: 600 !important;

                    p {
                        margin-bottom: unset !important;
                    }
                }
            }
        }

        .slide-image-section {
            padding-top: 10px !important;
            padding-bottom: 30px !important;
            overflow: hidden !important;
            min-width: unset;
            height: 400px !important;

            .slide-2 {
                .item {
                    margin-right: 11px;

                    img {
                        margin-right: unset !important;
                    }
                }
            }

            .founders-image-mini {
                width: calc(100% + 100px);
                margin-left: -50px;
                transform: rotate(-5deg);
                overflow: hidden;

                .slider {
                    height: 160px;
                    margin-top: 12px;
                    margin-bottom: 12px;

                    img {
                        height: 160px;
                    }

                    .slide {
                        margin-right: 16px;
                    }
                }
            }
        }

        .slide-image-section:has(.founders-image-mini) {
            height: 350px !important;
            width: calc(100% + 50px);
            display: flex !important;
            align-items: center;
            padding-bottom: 127px;
        }

        .slide-customer.reverse {
            .slider {
                .slide-track {
                    /*animation: scrollReverse 40s linear infinite;*/
                }
            }
        }

        .slide-customer {
            width: calc(100% + 100px) !important;
            height: 220px !important;
            margin-left: -40px;
            transform: rotate(-5deg);
            overflow: hidden;

            .slide-image-section {
                height: 220px;
                padding: unset !important;
            }

            .owl-carousel,
            .owl-carousel-custom {
                .customer-item {
                    direction: ltr;
                }
            }

            .slider {
                height: 220px;
                display: flex;
                align-items: center;

                .owl-stage-outer {
                    height: 220px;

                    .slide {
                        height: 220px;
                    }
                }
            }

            .customer-item {
                height: 184px;
                box-shadow: 4px 4px 0px 0px #121110;
                margin-right: 20px;
                margin-bottom: unset !important;

                .header-item {
                    img {
                        margin-right: unset !important;
                    }

                    div {
                        p {
                            margin-bottom: unset !important;

                            &:first-child {
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                width: 90%;
                                padding-bottom: 4px;
                                font-size: 14px !important;
                            }

                            &:nth-child(2) {
                                font-size: 12px !important;
                                color: #aba6a1 !important;
                            }
                        }
                    }
                }

                .body-item {
                    .review-content {
                        font-size: 12px !important;
                        color: #696561 !important;
                    }
                }
            }
        }

        .menu-list-mobile-active {
            height: calc(100% - 53px);

            background-color: #fdfaf7;

            .menu-container.show {
                display: flex !important;
            }

            .menu-container {
                height: 100%;
                flex-direction: column;
                justify-content: space-between;
                transition: all 0.5s ease;
            }
        }

        .menu-list-mobile {
            position: absolute;
            top: 53px;
            left: 0px;
            width: 100%;
            padding: 40px 25px 25px 25px;
            z-index: 8;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            transition: all 0.5s ease;

            .menu-list {
                .menu-item {
                    margin-right: 48px;
                    margin-bottom: 12px;
                    padding: 12px 0px 12px 0px;

                    &:last-child {
                        margin-right: unset;
                    }

                    a {
                        text-decoration: none !important;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                    }

                    .menu-item-text {
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 24px;
                        color: #696561;
                        margin-bottom: 0px;
                    }
                }
            }

            .common-yellow-btn {
                width: 100%;
            }
        }

        .container {
            width: 100% !important;
            padding-left: 25px !important;
            padding-right: 25px !important;
            max-width: unset !important;

            .content-header {
                padding: 20px 0px 0px 0px !important;

                .header-menu-bar-container {
                    .menu-bar {
                        width: 100% !important;

                        .menu-list {
                            display: none !important;
                        }

                        .common-yellow-btn {
                            display: none;
                        }

                        .navbar {
                            background-color: red !important;
                            padding-bottom: 0px !important;
                        }

                        .btn-menu-mobile {
                            border: none !important;
                            background-color: #fff;
                            border-radius: 4px;
                            width: 24px;
                            height: 24px;
                            padding: unset !important;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            &:active {
                                content: "sdf";
                            }
                        }

                        .icon {
                            img {
                                width: 131px;
                                height: 33px;
                            }
                        }
                    }
                }
            }

            .content-body {
                .px-16 {
                    font-size: 14px !important;
                }

                .px-36 {
                    font-size: 24px !important;
                    line-height: 36px !important;
                }

                .px-64 {
                    font-size: 36px !important;
                    line-height: 54px !important;
                }

                .px-32 {
                    font-size: 32px !important;
                    line-height: 36px !important;
                }

                .content-footer,
                .footer-section,
                .connect-us-section,
                .customer-section,
                .our-values-section,
                .our-founders-section,
                .channel-section,
                .about-section,
                .contact-info-section,
                .banner-section {
                    width: 100% !important;
                    min-width: unset !important;
                }

                .banner-section {
                    padding-bottom: 0px !important;

                    .banner-content {
                        .content-text {
                            margin-top: unset !important;
                            margin-bottom: unset !important;
                            padding-top: 62px;
                            padding-bottom: 62px;
                            display: flex;
                            align-items: center;
                            flex-direction: column;

                            .support {
                                width: 346px;
                                font-size: 24px !important;
                                line-height: 36px !important;
                            }

                            .des {
                                width: 380px;
                            }

                            .support,
                            .des {
                                text-align: center;
                            }
                        }
                    }

                    .welcome-text {
                        width: 111px;
                        height: 22px;
                        font-size: 12px;
                        padding: 2px 12px 4px 12px;
                        top: -300px !important;
                        left: unset !important;
                        right: 28px !important;
                        line-height: 20px;
                    }

                    .banner-image {
                        width: 100%;

                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding-bottom: 70px;
                        padding-top: 0px;

                        img {
                            max-width: 390px;
                            content: url("./images/Imgs&Illus.png");
                            position: unset !important;
                        }
                    }

                    .image-1,
                    .image-2,
                    .image-3 {
                        display: none !important;
                    }

                    .content-text {
                        button {
                            margin-top: 24px !important;
                        }
                    }
                }

                .about-section {
                    .col-md-12:has(.about-content) {
                        order: 1;
                    }

                    .col-md-12:has(.about-image) {
                        order: 2;
                    }

                    .about-content {
                        margin-top: 0px !important;
                        margin-left: unset !important;

                        .content-text {
                            .about {
                                width: 250px;
                                font-size: 24px !important;
                                line-height: 36px !important;
                            }

                            .number-one {
                                font-size: 46px !important;
                            }

                            .des {
                                font-size: 14px !important;
                                line-height: 20px !important;
                                width: 100%;
                            }

                            .top-image {
                                width: 83px !important;
                                top: 30px !important;
                                left: 250px !important;

                                img {
                                    width: 83px !important;
                                    height: 69px !important;
                                }
                            }

                            .bottom-image {
                                bottom: -58px !important;
                                left: 130px !important;
                                display: none;

                                img {
                                    width: 54px !important;
                                    height: 45px !important;
                                }
                            }
                        }
                    }

                    .about-image {
                        position: unset !important;
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        padding-top: 74px;
                        padding-bottom: 46px;

                        & > img {
                            content: url("./images/Group\ 34.png");
                        }

                        .top-image,
                        .bottom-image {
                            display: none;
                        }
                    }
                }

                .channel-section {
                    padding-top: 40px !important;
                    padding-bottom: 40px !important;

                    .chanel-item {
                        width: 100% !important;
                        margin-bottom: 36px;
                        padding: 24px !important;

                        .item-footer {
                            a {
                                font-size: 16px !important;
                            }
                        }
                    }
                }

                .our-founders-section {
                    margin-top: 60px !important;
                    padding-bottom: unset !important;

                    .bottom-image {
                        display: none;
                    }

                    .our-founders-content {
                        margin-top: unset !important;
                        margin-bottom: 30px;
                    }

                    .founders-image {
                        display: none !important;
                    }
                }

                .our-values-section {
                    padding-top: 80px !important;

                    .content-text {
                        padding-left: unset !important;
                        padding-right: unset !important;
                    }

                    .values-content {
                        padding-left: unset !important;
                        padding-right: unset !important;
                        padding-bottom: unset !important;

                        .values-item {
                            width: 100% !important;
                            margin-bottom: 60px !important;
                        }
                    }
                }

                .customer-section {
                    width: 100% !important;

                    .customer-brand {
                        padding-top: 50px !important;
                        padding-bottom: 60px !important;
                        padding-left: 0;
                        padding-right: 0;

                        .brand-list {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 40px;
                            align-items: center;
                            justify-content: center;

                            img {
                                width: 125px;
                            }

                            div {
                                width: 138px;
                                display: flex;
                                justify-content: center;

                                &:nth-child(5) {
                                    img {
                                        width: 82px;
                                    }
                                }

                                &:nth-child(6) {
                                    img {
                                        width: 87px;
                                    }
                                }
                            }
                        }
                    }

                    .col-md-12:has(.customer-review) {
                        padding-left: 0 !important;
                        padding-right: 0 !important;
                    }

                    .customer-review {
                        display: none !important;
                    }
                }

                .connect-us-section {
                    .col-md-12 {
                        padding-left: unset !important;
                        padding-right: unset !important;
                    }

                    width: calc(100% + 50px) !important;
                    margin-left: -25px;
                    margin-right: -25px;
                    padding-top: 60px !important;
                    padding-bottom: 70px !important;

                    .bottom-image {
                        img {
                            width: 50% !important;
                        }
                    }

                    .bottom-image {
                        left: 10px !important;
                        bottom: 4px !important;
                    }

                    .top-image {
                        width: 64px !important;
                        top: 4.5px !important;
                        right: -7.2px !important;

                        img {
                            width: 45px !important;
                            height: 64px !important;
                        }
                    }

                    #wrapper-cube {
                        display: none;
                    }

                    .welcome-text {
                        top: 261px !important;
                        left: 230px !important;
                        width: 92px !important;
                        height: 30px !important;
                    }

                    .contact-image-container {
                        overflow: hidden;

                        .round-text-image {
                            width: 390px !important;
                            height: 554px !important;
                            display: flex;
                            align-items: center;

                            .image {
                                img {
                                    width: 285px !important;
                                }
                            }
                        }

                        .text-rotate {
                            display: block;
                            width: 380px !important;
                            height: 380px !important;
                            top: 15px !important;
                            position: relative;
                            animation: textRotation 20s linear infinite;

                            img {
                                position: absolute;

                                &:first-child {
                                    top: 2px;
                                    left: 2px;
                                }

                                &:nth-child(2) {
                                    top: 2px;
                                    right: 2px;
                                }

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

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

                            /*animation: textRotation 20s linear infinite;*/
                        }

                        .text {
                            display: none;
                        }
                    }
                }

                .footer-section {
                    .content {
                        order: 2;
                    }

                    .logo {
                        order: 1;

                        .logo-left {
                            justify-content: start !important;
                            padding-bottom: 36px;

                            img {
                                height: 72px !important;
                            }
                        }
                    }
                }

                .content-footer {
                    .follow-icon {
                        img {
                            height: 32px !important;
                            width: 32px !important;
                            margin-right: 8px !important;
                            cursor: pointer;

                            &:last-child {
                                margin-right: unset !important;
                            }
                        }
                    }
                }

                .contact-section {
                    padding-top: 63px !important;
                    margin-bottom: 60px !important;

                    .px-100 {
                        font-size: 32px !important;
                        line-height: 54px !important;
                    }

                    .arrow {
                        display: none;
                    }

                    .welcome-text {
                        position: absolute;
                        top: 40px !important;
                        left: unset !important;
                        right: 0px !important;
                    }

                    .bottom-image {
                        position: absolute;
                        bottom: -55px !important;
                        left: -20px !important;

                        img {
                            content: url("./images/Bubble\ \(2\).png");
                        }
                    }
                }

                .contact-info-section {
                    padding-top: 36px !important;

                    .info {
                        order: 2;
                        padding-right: unset !important;
                    }

                    .form {
                        order: 1;
                        padding-bottom: 60px;
                    }
                }
            }
        }
    }
}

[class*="__animate__"] {
    opacity: 0;
}

.time_delay {
    animation-duration: 1s !important;
}

.about-section > div {
    animation-delay: 0s !important;
}


.gap-12 {
    gap: 12px !important;
}

.alert-success {
    text-align: left !important;

    .icon-success {
        padding-top: 5px;
    }

    .btn-close-alert {
        border: unset !important;
        padding: unset !important;
        background-color: #fff !important;
    }

    .px-16 {
        color: #0A0D14 !important;
    }

    .message {
        margin-top: 4px;

        .px-14 {
            color: #525866 !important;
            font-size: 14px;
        }
    }
}


.swal2-popup {
    padding-bottom: unset !important;
    width: 392px !important;
    border-radius: 12px !important;
    border: 1px solid var(--green-base, #38C793) !important;
    box-shadow: 4px 4px 0px 0px #38C793;

    .swal2-html-container {
        margin: 0 !important;
        padding: 14px 14px 16px 14px !important;
    }
}

@keyframes marqueeTop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes marqueeBottom {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes textRotation {
    to {
        transform: rotate(360deg);
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 7));
    }
}

@keyframes scrollReverse {
    0% {
        transform: translateX(calc(-250px * 7));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes scrollVertically {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(-150px * 7));
    }
}

@keyframes scrollVerticallyReverse {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(calc(150px * 7));
    }
}

@media (max-width: 1024px) {
    .mobile-hide {
        display: none;
    }

}

@media (max-width: 768px) {
    body {
        .container {
            .content-body {
                .about-section {
                    .about-content {
                        .content-text {
                            .about {
                                width: 337px !important;
                            }

                            .top-image {
                                width: 83px !important;
                                top: -25px !important;
                                right: -20px !important;
                                left: unset !important;
                            }
                        }
                    }
                }

                .banner-section {
                    .welcome-text {
                        top: -300px !important;
                    }

                    .welcome-text.in-contact {
                        top: 40px !important;
                    }
                }
            }
        }
    }


    #slide_2 {
        .slide-image-section {
            height: 300px !important;

            .image-1 > img {
                height: 122px;
            }

            .image-2 > img {
                height: 122px;
            }

            .image-3 > img {
                height: 122px;
            }

            .image-4 {
                margin-top: 157px;
            }

            .image-4 > img {
                width: 62px;
                height: auto;
            }

            .slide {
                width: 220px !important;
            }
        }
    }

    .brand-list {
        gap: 60px;
    }

    .our-values-section {
        .list-text {
            .col-md-12 {
                margin-bottom: 60px;
            }
        }
    }

    .our-founders-content {
        .number-one {
            font-size: 36px !important;
        }
    }


}

.mt-1 {
    margin-top: 1rem;
}

.owl-vertical {
    transform: rotate(90deg);
}

.owl-vertical .slide {
    transform: rotate(-90deg);
}

.owl-vertical .owl-nav {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: calc(50% - 33px);
}

.header-title1{
    font-size: 30px;
}