.section-theme {
    margin: 70px 0;
}

.section-banners .item-banner img {
    width: 100%;
    height: 100%;
    transition: 0.3s;
}

.section-banners .item-banner:hover img {
    transform: scale(1.02);
    width: 100%;
}


/************************
        Hero
 *********************/
.section-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    /*margin:10px 0 40px;*/
}

.slider-content-bg {
    background: #fff;
    width: calc(100% - 24px);
    left: 12px;
    padding: 24px 18px;
    position: relative;
    margin-top: -110px;
    border-radius: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.swiper-pagination.slider-pagination {
    bottom: unset;
}

.slider-content-bg::before {
    content: "";
    position: absolute;
    top: 71px;
    left: -40px;
    height: 40px;
    width: 40px;
    border-bottom-right-radius: 50%;
    box-shadow: 0 21px 0 0 #fff;
    z-index: 1;
}

.slider-content-bg::after {
    content: "";
    position: absolute;
    top: 65px;
    right: -39px;
    height: 40px;
    width: 40px;
    border-bottom-left-radius: 50%;
    box-shadow: 0 20px 0 0 #fff;
    z-index: 1;
}

.section-hero.product-hero {
    margin: 24px 0 32px;
}

.section-hero .scroll-down {
    display: none;
}

.slide-item {
    position: relative;
    height: 100%;
}

.swiper.swiper-hero {
    height: 100%;
    width: 100%;
}

.slide-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


.slide-content.right {
    right: 5%;
}

.slide-content.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.slide-content .title {
    color: var(--black);
    font-size: 23px;
    line-height: normal;
    opacity: 0;
}

.slide-content .subtitle {
    color: var(--black);
    font-size: 18px;
    line-height: 28px;
    opacity: 0;
    font-family: var(--bold_font);
    margin-bottom: 8px;
}

.slide-content .subtitle img {
    max-width: 35px;
    margin-left: 8px;
}

.subtitle i {
    font-size: 19px;
    margin-left: 8px;
    vertical-align: -5px;
}

.slide-content .content {
    color: var(--black);
    font-size: 14px;
    line-height: 28px;
    margin-top: 8px;
    opacity: 0;
    font-variation-settings: "wght" 600, "wdth" 100;
}

.slide-content .link {
    margin-top: 20px;
    opacity: 0;
    visibility: hidden;
}

.buttons-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.buttons-wrap .button {
    min-width: unset;
    font-size: 14px;
    padding: 5px 10px;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .title {
    animation: fadeInLeft 1.5s ease-out 0.2s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .subtitle {
    animation: fadeInLeft 1.5s ease-out 0.4s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .content {
    animation: fadeInLeft 1.5s ease-out 0.5s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .link {
    animation: fadeInLeft 1.5s ease-out 0.7s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .slider-video {
    animation: fadeInLeft 1.5s ease-out 1.3s forwards, getFull 1.5s ease-out 2s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .title {
    animation: fadeInRight 1.5s ease-out 0.5s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .subtitle {
    animation: fadeInRight 1.5s ease-out 0.7s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .content {
    animation: fadeInRight 1.5s ease-out 0.9s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .link {
    animation: fadeInRight 1.5s ease-out 1.1s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .slider-video {
    animation: fadeInRight 1.5s ease-out 1.3s forwards, getFull 1.5s ease-out 2s forwards;
}

@keyframes getFull {
    from {
        width: 46px;
    }

    to {
        width: 168px;
    }
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }

    to {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }

    to {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(400px, 0, 0);
        transform: translate3d(400px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(400px, 0, 0);
        transform: translate3d(400px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slider-navigation {
    position: absolute;
    bottom: 20px;
    left: calc(60% + 30px);
    transform: unset;
    right: unset;
}

.slider-inner {
    position: relative;
}

.swiper.swiper-hero .swiper-slide {
    opacity: 0;
    visibility: hidden;
    transition: 0.6s ease;
}

.swiper.swiper-hero .swiper-slide.swiper-slide-fully-visible {
    opacity: 1;
    visibility: visible;
}

/************************
        responsibility
 *********************/

.res-item {
    position: relative;
    display: block;
}

.res-img {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 24px;
}

.swiper-res-wrap {
    padding: 0 15px;
}

.res-body {
    padding: 16px 8px;
}

.res-body .title {
    font-size: 16px;
    line-height: 32px;
    color: #212121;
    margin-bottom: 8px;
}

.res-body .desc {
    color: #212121;
    line-height: 20px;
    margin-bottom: 8px;
    font-size: 14px;
}

.res-body .link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #a3a3a3;
    text-transform: capitalize;
    font-size: 14px;
    transition: 0.4s ease;
}

.res-body .link:hover {
    color: var(--color2);
}

.res-img::before {
    content: '';
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 100%);
    position: absolute;
    inset: 0;
}

.res-item img {
    width: 100%;
    transition: 0.7s ease;
    filter: brightness(0.7);
}

.res-item:hover img {
    filter: brightness(1);
}

.swiper-res .swiper-navigation {
    margin-top: 0;
}

/************************
        job
 *********************/
.job-grids {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.grid-item {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    box-shadow: 0px 0px 48px 0px #2121210F;
    border-radius: 32px;
    transition: 0.5s ease;
}

.grid-item:hover {
    /*box-shadow: rgba(1, 105, 253, 0.45) 5px 5px, rgba(46, 85, 240, 0.3) 10px 10px, rgba(0, 64, 255, 0.2) 15px 15px, rgba(0, 76, 255, 0.1) 20px 20px, rgba(0, 52, 255, 0.05) 25px 25px;*/
    filter: brightness(1.15);
}

.grid-item.grid-item-1 {
    grid-area: 1 / 1 / 5 / 2;
    display: flex;
    padding-bottom: 44px;
    align-items: center;
    flex-direction: column;
}

.grid-body {
    color: #fff;
    padding: 10px;
    max-width: 90%;
}

.grid-body .title {
    font-variation-settings: "wght" 600, "wdth" 100;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -4%;
    margin-bottom: 8px;
}

.grid-body .desc {
    font-size: 14px;
    line-height: 24px;
}

.grid-item.grid-item-2 {
    grid-area: 1 / 2 / 4 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 29px;
    line-height: 29px;
    text-align: center;
    font-variation-settings: "wght" 600, "wdth" 100;
    padding: 10px;
    border-radius: 24px;
    letter-spacing: -4%;
    min-height: 162px;
    background-position: bottom;
}

.wrap-link {
    position: absolute;
    inset: 0;
}

.grid-item.grid-item-3 {
    grid-area: 4 / 2 / 5 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    font-variation-settings: "wght" 600, "wdth" 100;
    padding: 10px;
    border-radius: 24px;
    letter-spacing: -4%;
    min-height: 88px;
}

.grid-item.grid-item-4 {
    grid-area: 1 / 3 / 5 / 4;
    padding-bottom: 40px;
    text-align: center;
}

.grid-item.grid-item-4 .title {
    backdrop-filter: blur(48px);
    background: #FFFFFFB2;
    width: 100%;
    padding: 20px 18px;
    height: 64px;
    font-size: 18px;
    display: flex;
    color: var(--color1);
    font-variation-settings: "wght" 600, "wdth" 100;
    text-align: center;
    justify-content: center;
    align-items: center;
    line-height: 24px;
    letter-spacing: -4%;
    position: absolute;
    bottom: 0;
}

.grid-item.grid-item-4 .img-wrap img {
    height: 100%;
    object-fit: cover;
}

.grid-item .img-wrap {
    display: inline-flex;
}

.grid-item.grid-item-4 .img-wrap {
    height: 100%;
}

.grid-item-link {
    position: absolute;
    bottom: 0;
    backdrop-filter: blur(48px);
    background: #FFFFFFB2;
    width: 100%;
    padding: 10px;
    height: 64px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color1);
    font-variation-settings: "wght" 600, "wdth" 100;
}

.grid-item-link i {
    font-size: 32px;
    display: none;
}

/************************
        content
 *********************/

.section-content-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 23px;
    background: linear-gradient(0deg, rgba(0, 15, 94, 0.82), rgba(0, 15, 94, 0.82)), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    border-radius: 20px;
    padding: 42px 10px;
}

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

.content-text .btns-wrap {
    justify-content: center;
    margin-top: 32px;
}

.content-media {
    flex: 0 0 43%;
    position: relative;
}

.content-media.mobile-mode {
    margin: 26px 0 20px;
}

.content-media::after {
    content: '\e917';
    font-family: icomoon;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 22px;
    line-height: 1;
    color: #fff;
}

.video-container {
    position: relative;
    display: flex;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
    border-radius: 12px;
}

.video-poster {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: 0.4s ease;
}

.video-btn:not(.learn-more-video-btn) {
    width: 96px;
    height: 96px;
    color: #fff;
    background: #FFFFFF14;
    backdrop-filter: blur(60.9523811340332px);
    border: 0.93px solid rgba(255, 255, 255, 0.4);
    position: absolute;
    right: 50%;
    top: 50%;
    margin: auto;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    border-radius: 100%;
    cursor: pointer;
    transition: 0.4s ease;
    transform: translate(50%, -50%);
}

.circle-text-svg {
    position: absolute;
    width: 90px;
    height: 90px;
    fill: transparent;
    font-size: 15px;
    letter-spacing: 2px;
}

.circle-text-svg text {
    fill: #fff;
}

@keyframes rotateText {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.circle-text-svg {
    animation: rotateText 8s linear infinite;
}

.video-btn:hover {
    background: var(--color2);
}

.video-btn:not(.learn-more-video-btn)::after {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.17);
    position: absolute;
    margin: auto;
    inset: -4px;
    border-radius: 100%;
    animation: pulse-on 1s ease-in-out infinite;
    z-index: -1;
}

@keyframes pulse-on {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.video-element {
    height: 100%;
    border-radius: 12px;
}

/*---------------
 section brands
--------------*/

.item-brand {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding-top: 30px;
    min-height: 232px;
    border-radius: 12px;
    transition: 0.5s ease;
    margin: 30px 0;
    box-shadow: 0px 0px 48px 0px #2121210F;
    position: relative;
    overflow: hidden;
}

.item-brand::after {
    content: '';
    background: url("../img/brand.png");
    background-repeat: repeat;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: 0;
    transition: 0.6s ease;
}

.item-brand:hover:after {
    background-position: 50%;
}

.swiper-slide-active .item-brand {
    background-position: 8%;
}

.img-brand {
    width: 128px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;

    box-shadow: 0px 0px 48px 0px #2121210F;

}

.item-brand .title {
    color: #fff;
    font-size: 16px;
    margin-bottom: 10px;
}

.item-brand i {
    font-size: 24px;
    color: #fff;
}

.item-brand.text-dark .title {
    color: var(--color1);
}

.item-brand.text-dark i {
    color: var(--color1);
}

/*****************
   product
****************/
.product-inner {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-direction: column;
}

.swiper-products-wrap {
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
}

.swiper-products-wrap::before {
    content: '';
    background: linear-gradient(to right, #fff, #fff0);
    position: absolute;
    width: 8%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
}

.swiper-products-wrap::after {
    content: '';
    background: linear-gradient(to left, #fff, #fff0);
    position: absolute;
    width: 5%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 2;
}

.swiper.swiper-products .swiper-slide {
    transition: 2s ease;
}

.swiper.swiper-products .swiper-slide:not(.swiper-slide-active) {
    transform: scale(0.5);
    filter: blur(12px);
}

.product-item {
    border-radius: 36px;
    overflow: hidden;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.swiper-products-wrap .swiper-wrapper {
    align-items: center;
}

.swiper-products-wrap .swiper-slide-active .product-item img {
    max-width: 55%;
}

.product-body {
    z-index: 1;
    width: 100%;
    text-align: center;
    padding: 10px 15px 37px;
}

.product-content {
    margin-top: 16px;
    text-align: center;
}

.product-content .btns-wrap {
    justify-content: center;
}

.product-body .title {
    font-size: 24px;
    line-height: 50px;
    font-variation-settings: "wght" 600, "wdth" 100;
}

.product-body .count {
    font-size: 18px;
}

/*****************
value
*************/
.section-values {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 0;
    padding-top: 30px;
    padding-bottom: 65px;
    background-attachment: fixed;
}

.section-values.after-in::after {
    content: '';
    width: 200%;
    height: 100%;
    background: #fff;
    filter: blur(30px) drop-shadow(0 15px 70px #fff);
    position: absolute;
    top: 93%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: -1;
}

.swiper.swiper-values-content .swiper-slide {
    display: flex;
    align-items: center;
    opacity: 0;
}

.swiper.swiper-values-content .swiper-slide.swiper-slide-visible {
    opacity: 1;
}

.slide-value-content {
    transition: opacity 0.3s ease;
}

#progress-path {
    transition: d 0.3s ease;
}

.value-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.swiper-values-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 450px;
}

.swiper-values-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.icons-circle-svg {
    z-index: 2;
}

.box-bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.swiper-values-icons .swiper-slide {
    width: auto;
    height: auto;
    cursor: pointer;
}

.swiper-values-content {
    position: relative;
    width: 70%;
    height: 70%;
    margin: 15% auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-value-content {
    color: white;
    text-align: center;
    padding: 20px;
}

.slide-value-content .desc {
    font-size: 14px;
    line-height: 20px;
    overflow: auto;
    max-height: 140px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
}

.desc.expand {
    webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.slide-value-content .desc::-webkit-scrollbar {
    display: none;
}

.icon-back {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FFFFFF33;
    backdrop-filter: blur(48px);
    transition: all 0.4s ease;
}

.slide-value-icon .icon-back:not(.active):hover {
    background: #ffffff6e;
}

.icon-back.active {
    background: #FFFFFF;
    color: var(--color1);
}

.icon-back.active svg {
    fill: #2563EB;
}

.swiper-slide-active .slide-value-content {
    opacity: 1;
}

.swiper-navigation.swiper-vertical {
    position: absolute;
    width: 44px;
    display: flex;
    justify-content: space-between;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    flex-direction: column;
    height: 106px;
    margin: 0;
    left: 110%;
}

.swiper-navigation.swiper-vertical .swiper-nav {
    transform: rotate(90deg);
}

/************
features
**********/
.section-features {
    position: relative;
}

.features-info {
    text-align: center;
}

.features-inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
}

.features-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.features-img-mobile {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.features-img-mobile img {
    max-width: 80px;
    max-height: 220px;
    width: auto;
    height: auto;
}

.features-content .button.button2::after {
    background: #f1f1ed;
}

.features-content .button.button2:hover::after {
    background: var(--color1);
}

.feature-card {
    display: grid;
    grid-template-columns: 32px auto;
    grid-template-rows: 32px auto;
    grid-column-gap: 8px;
    grid-row-gap: 14px;
    align-items: center;
    position: relative;
    padding: 24px 24px 50px;
    border-radius: 12px;
    background: #0169FD;
    overflow: hidden;
    z-index: 0;
    background-size: cover;
}

.features-items2 .feature-card {
    display: block;
    padding-top: 40px;
}

.features-items .feature-card:before {
    /*content: '';*/
    background: url("../img/items1.png");
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    height: 172px;
    background-position: -332px -260px;
    z-index: -1;
    transition: 0.8s ease-out;
}

.features-items .swiper-slide-active .feature-card:before {
    background-position: -308px -308px;
}

.features-items2 .feature-card:before {
    /*content: '';*/
    background: url("../img/items2.png");
    position: absolute;
    left: 0;
    top: 0;
    width: 151px;
    height: 172px;
    background-position: -121px -41px;
    z-index: -1;
    transition: 0.8s ease-out;
    background-repeat: no-repeat;
}

.features-boldText {
    width: 100%;
    white-space: nowrap;
    position: relative;
    display: flex;
    height: 260px;
    align-items: center;
    overflow: hidden;
}

.main-text {
    font-size: 48px;
    color: var(--color1);
    white-space: nowrap;
    padding-right: 2rem;

}

.marquee-wrap {
    display: flex;
    /*min-width: 200%;*/
    width: max-content;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.icon-wrap {
    grid-area: 1 / 1 / 2 / 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    color: #fff;
    font-size: 32px;
    position: relative;
}

.feature-card .toptext {
    color: #fff;
    font-size: 40px;
    line-height: 48px;
    font-weight: 800;
}

.feature-card .title {
    font-size: 20px;
    color: #fff;
    font-variation-settings: "wght" 600, "wdth" 100;
    line-height: 24px;
    grid-area: 1 / 2 / 2 / 3;
}

.features-items2 .feature-card .title {
    margin-bottom: 8px;
}

.features-items2 .feature-card .toptext {
    margin-bottom: 8px;
    font-variation-settings: "wght" 700, "wdth" 100;
}

.feature-card .desc {
    font-size: 14px;
    color: #fff;
    grid-area: 2 / 1 / 3 / 3;
    line-height: 26px;

}

.features-items .feature-card .desc {
    font-variation-settings: "wght" 400, "wdth" 100;
}

/* about intro */

.slider-box {
    position: relative;
    margin: 24px auto;
}

.swiper.swiper-slider {
    clip-path: polygon(83.844% 0.305%, 83.844% 0.305%, 84.217% 0.326%, 84.586% 0.389%, 84.951% 0.493%, 85.31% 0.637%, 85.662% 0.82%, 86.006% 1.043%, 86.341% 1.304%, 86.666% 1.603%, 86.979% 1.939%, 87.28% 2.311%, 97.83% 16.298%, 97.83% 16.298%, 98.217% 16.86%, 98.568% 17.474%, 98.883% 18.136%, 99.161% 18.84%, 99.4% 19.582%, 99.598% 20.358%, 99.754% 21.161%, 99.868% 21.989%, 99.937% 22.835%, 99.96% 23.696%, 99.96% 76.492%, 99.96% 90.595%, 99.96% 90.595%, 99.887% 92.121%, 99.677% 93.568%, 99.339% 94.917%, 98.886% 96.149%, 98.33% 97.245%, 97.682% 98.185%, 96.952% 98.95%, 96.154% 99.52%, 95.297% 99.877%, 94.394% 100%, 18.704% 100%, 10.053% 100%, 10.053% 100%, 9.599% 99.968%, 9.151% 99.876%, 8.711% 99.723%, 8.282% 99.511%, 7.864% 99.242%, 7.461% 98.918%, 7.073% 98.539%, 6.704% 98.107%, 6.355% 97.625%, 6.028% 97.092%, 1.687% 89.414%, 1.687% 89.414%, 1.404% 88.873%, 1.147% 88.299%, 0.918% 87.697%, 0.717% 87.069%, 0.546% 86.418%, 0.403% 85.746%, 0.292% 85.058%, 0.211% 84.355%, 0.162% 83.641%, 0.146% 82.918%, 0.146% 9.709%, 0.146% 9.709%, 0.219% 8.184%, 0.43% 6.737%, 0.767% 5.387%, 1.22% 4.155%, 1.776% 3.059%, 2.425% 2.119%, 3.154% 1.355%, 3.952% 0.784%, 4.809% 0.428%, 5.712% 0.305%);
}

.slider-box::after {
    content: '\e917';
    font-family: icomoon;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--color1);
}

.slider-box::before {
    content: '';
    width: 88%;
    height: 100%;
    background: var(--color1);
    clip-path: polygon(91.473% 0%, 8.482% 0%, 8.482% 0%, 6.876% 0.22%, 5.381% 0.85%, 4.021% 1.847%, 2.82% 3.166%, 1.801% 4.764%, 0.988% 6.597%, 0.404% 8.62%, 0.072% 10.789%, 0.017% 13.061%, 0.261% 15.391%, 13.104% 90.353%, 13.104% 90.353%, 13.698% 92.761%, 14.574% 94.853%, 15.687% 96.604%, 16.991% 97.992%, 18.443% 98.991%, 19.996% 99.579%, 21.606% 99.732%, 23.228% 99.426%, 24.817% 98.637%, 26.327% 97.342%, 96.475% 22.38%, 96.475% 22.38%, 98.164% 20.035%, 99.282% 17.338%, 99.861% 14.428%, 99.933% 11.448%, 99.528% 8.539%, 98.68% 5.842%, 97.418% 3.498%, 95.775% 1.649%, 93.783% 0.436%);
    position: absolute;
    left: 10px;
    top: -8px;
}

.slider-item {
    display: block;
}

.slider-item img {
    width: 100%;
}

.slider-navigation.v2 {
    bottom: 16px;
    background: #FFFFFF80;
    backdrop-filter: blur(52px);
}

.section-about_intro {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

.section-about_intro.items-in {
    padding-bottom: 90px;
}

.items-box {
    margin-top: -56px;
}

.icon-item .icon-back {
    grid-area: 1 / 1 / 3 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 24px;
    z-index: 0;
    transition: 0.4s ease;
}

.icon-item .icon-back:before {
    content: "\e931";
    font-family: 'icomoon';
    color: var(--color3);
    font-size: 40px;
    position: absolute;
    z-index: -1;
    transition: 0.4s ease;
}

.icon-item:hover .icon-back:before {
    color: #fff;
}

.icon-item:hover .icon-back {
    color: var(--color3);
}

.icon-back img {
    max-width: 24px;
    filter: brightness(0) invert(1);
    transition: 0.4s ease;
}

.icon-item:hover img {
    filter: unset;
}

.slide-value-content .title {
    font-size: 16px;
}

.icon-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    background: #FFFFFF;
    border: 1px solid #D1DFE5;
    border-radius: 22px;
    padding: 16px 10px;
    position: relative;
    transition: 0.4s ease;
}

.icon-item .title {
    font-family: var(--bold_font);
    font-size: 16px;
    line-height: 25px;
    color: #262B4E;
    transition: 0.4s ease;
}

.icon-item .desc {
    color: #333;
    font-size: 13px;
    text-align: right;
    transition: 0.4s ease;
}

.icon-item:hover {
    background: var(--color3);
}

.icon-item:hover .title,
.icon-item:hover .desc {
    color: #fff;
}

.access-item {
    padding-left: 50px;
}

.access-item>i {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--color3);
    transition: 0.4s ease;
}

.access-item:hover>i {
    color: #fff;
}

/**************************/
/* res
*/
/**************************/
@media (min-width: 380px) {

    .img-block::after,
    .content-media::after,
    .slider-box::after {
        font-size: 33px;
    }
}

/**************************/
/* ABOVE 768px */
/**************************/
@media (min-width: 48em) {
    .buttons-wrap {
        gap: 16px;
    }

    .buttons-wrap .button {
        min-width: 155px;
        font-size: 16px;
        padding: 5px 18px;
    }

    .title-inner {
        font-size: 24px;
    }

    .stretch-blogcard .post-item {
        display: flex;
        flex-direction: row;
    }

    .sectiob-blogtab .stretch-blogcard .post-card__date {
        left: auto;
        right: 0;
        transform-origin: 75% -18%;
    }

    .stretch-blogcard .post-item-image img {
        width: 100%;
        aspect-ratio: 5 / 3;
        -o-object-fit: cover;
        object-fit: cover;
        height: 100%;
        transition: 0.3s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .stretch-blogcard .blog-date {
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    .stretch-blogcard .post-item-image {
        margin: 0;
        width: 34%;
        flex: 0 0 34%;
        display: flex;
    }

    .stretch-blogcard .post-item h2 {
        margin-bottom: 14px;
        text-align: right;
        justify-content: flex-start;
        min-height: unset;
        margin-top: 0;
        font-size: 18px;
        font-family: var(--bold_font);
    }

    .stretch-blogcard {
        margin-bottom: 1.4rem;
    }

}

/**************************/
/* ABOVE 992px */
/**************************/
@media (min-width: 62em) {
    .tabs-blogitems {
        gap: 1.5rem;
        margin-bottom: 3.4rem;
        padding-bottom: 6px;
        transition: 0.3s;
    }

    .btn--blogtab {
        font-size: 16px;
    }

}

@media screen and (min-width: 576px) {
    .features-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 10px;
    }

    .btn--blogtab {
        padding: 6px 20px;
        min-width: 112px;
    }

    .swiper-values-wrap {
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 768px) {
    .slider-box {
        flex: 0 0 80%;
        max-width: 80%;
        margin-top: 20px;
    }

    .slider-navigation {
        bottom: 41px;
    }

    .icon-item {
        padding: 25px 24px;
    }

    .testimonial-card {
        padding: 21px 20px;
        border-radius: 38px;
    }

    .sliderGallery-item {
        display: grid;
        grid-template-columns: repeat(2, 2fr) 6fr;
        grid-template-rows: repeat(2, 1fr);
        gap: 24px;
    }

    .main-item {
        grid-area: 1 / 3 / 3 / 4;
    }

    .banner-content {
        max-width: 90%;
    }

    .slider-content-bg {
        position: absolute;
        width: 60%;
        left: 0;
        bottom: 0;
        height: 128px;
        border-radius: 0;
        border-top-right-radius: 24px;
        z-index: 2;
        padding: 20px 64px 0;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        text-align: left;
    }

    .slider-content-bg::before {
        top: -40px;
        left: 0;
        height: 40px;
        width: 40px;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 0;
    }

    .slider-content-bg::after {
        top: unset;
        bottom: 0;
        right: -40px;
        height: 40px;
        width: 40px;
        border-bottom-left-radius: 50%;
    }

    .features-inner {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .features-info {
        flex: 0 0 45%;
        max-width: 45%;
        text-align: left
    }

    .features-items {
        flex: 0 0 45%;
        max-width: 45%
    }

    .features-boldText {
        flex: 0 0 100%;
    }

    .features-items2 {
        flex: 0 0 45%;
        max-width: 45%
    }

    .features-video {
        flex: 0 0 45%;
        max-width: 45%
    }

    .features-boldText {
        height: 400px;
    }

    .main-text {
        font-size: 112px;
    }

    .feature-card .desc {
        font-size: 16px;
    }

    .swiper-res-wrap {
        padding: 0;
    }

    .job-grids {
        display: grid;
        grid-template-columns: 3fr repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 24px;
        grid-row-gap: 24px;
        height: 360px;

        margin: auto;
    }

    .res-body {
        position: absolute;
        bottom: 0;
        padding: 32px;
        max-width: 90%;
        z-index: 1;
    }

    .res-body .title {
        color: #fff;
        font-size: 24px;
    }

    .res-body .desc {
        color: #fff;
        font-size: 16px;
        margin-bottom: 16px;
    }

    .res-body .link {
        color: #fff;
        font-size: 16px;
    }

    .footer-row {
        gap: 30px;
    }

    .slide-content {
        flex-direction: row;
        align-items: flex-end;
        align-self: flex-end;
        justify-content: space-between;
    }

    .slider-content-bg {
        width: 90%;
        padding: 20px 30px 0;
    }

    .slider-navigation {
        left: calc(90% + 30px)
    }

    .icon-back {
        font-size: 32px;
        color: #fff;
        width: 56px;
        height: 56px;
    }
}

@media screen and (min-width: 992px) {
    .slide-value-content .title {
        font-size: 24px;
    }

    .product-body .title {
        font-size: 32px;
    }

    .value-inner {
        flex-direction: row;
    }

    .value-content {
        max-width: 40%;
    }

    .value-content .editor-content.white-content p {
        font-size: 1.125rem;
        line-height: 26px;
    }

    .section-hero.product-hero {
        margin: 93px 0 85px;
    }

    .section-theme {
        margin: 140px 0;
    }

    .section-hero {
        height: calc(calc(var(--vh, 1vh) * 100) - 123px);
        margin: 0 0 80px;
        padding-bottom: 30px;
    }

    .section-hero .scroll-down {
        display: inline-flex;
    }

    .slide-content .title {
        font-size: 56px;
        line-height: 72px;
        opacity: 0;
    }

    .slide-content .content {
        font-size: 18px;
        line-height: 26px;
    }

    .section-content-inner {
        flex-direction: row;
        gap: 124px;
        padding: 60px 84px;
    }

    .about-inner:not(.mobile) {
        display: flex;
        gap: 20px;
        align-items: center;
        flex-direction: row;
    }

    .slider-box {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .swiper-testimonial-wrap .swiper-navigation {
        position: absolute;
        left: 0;
        right: unset;
        top: 50%;

        margin: 0;
    }

    .swiper-testimonial-wrap {
        padding-left: 80px;
        margin-top: 0;
    }

    .content-media::after {
        font-size: 44px;
    }

    .content-text {
        text-align: right;
    }

    .content-text .btns-wrap {
        justify-content: flex-start;
        margin-top: 40px;
    }


    .product-inner {
        flex-direction: row;
        justify-content: space-between;
        gap: 35px;
    }

    .product-content {
        margin-top: 0;
        text-align: left;
        max-width: 40%;
    }

    .product-content .btns-wrap {
        justify-content: flex-start;
    }

    .swiper-products-wrap {
        flex: 0 0 70%;
        max-width: 70%;
    }

    .swiper.swiper-products {
        padding-left: 8%;
    }

    .product-content .swiper-navigation {
        left: 0;
        transform: unset;
    }

    .img-block::after {
        font-size: 44px;
    }

    .content-box {
        padding-right: 60px;
        margin-top: 0;
    }

    .section-block {
        padding: 82px 0;
    }

    .left-side,
    .right-side {
        opacity: 1;
    }

    .slider-box::after {
        font-size: 44px;
    }

    .section-editor-inner {
        max-width: 80%;
        margin: auto;
    }

    .section-desc-inner {
        padding: 48px;
    }

    .section-desc-inner::before {
        font-size: 174px;
        top: 50%;
    }

    .section-about_intro.items-in {
        padding-bottom: 162px;
    }

    .team-access {
        gap: 10px 16px;
        margin-bottom: 14px;
    }

    .testimonial-head {
        gap: 0 32px;
        margin-bottom: 22px;
    }

    .testimonial-head .img-wrap {
        max-width: 120px;
        max-height: 120px;
    }

    .testimonial-info .title {
        font-size: 17px;
    }

    .testimonial-info .position {
        font-size: 16px;
    }

    .testimonial-card .desc {
        font-size: 18px;
    }

    .testimonial-desc {
        min-height: 90px;
    }

    .swiper.swiper-testimonial {
        height: 390px;
    }

    .testimonial-content {
        text-align: right;
    }

    .testimonial-content .editor-content p {
        text-align: right;
    }

    .section-targets {
        padding: 64px 0 79px;
        position: relative;
        overflow: hidden;
    }

    .target-item {
        border-radius: 30px 30px 12px 12px;
        border-top: 5px solid #12BCFF;
        padding: 20px 24px 32px;
    }

    .target-icon {
        width: 70px;
        height: 70px;
        border-radius: 16px;
        font-size: 32px;
        margin-bottom: 20px;
    }

    .target-item .title {
        font-size: 20px;
        line-height: 32px;
        margin-bottom: 14px;
    }

    .icon-divider {
        width: 24px;
        margin-bottom: 15px;
    }

    .target-item .desc {
        font-size: 16px;
    }

    .honor-item>a {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 398px;
    }

    .honor-item img {
        max-height: 290px;
        width: auto;
    }

    .section-block-pr .image-block {
        margin-bottom: 0;
    }

    .banner-content {
        max-width: 80%;
    }

    .group-body .desc {
        padding: 0 40px;
    }

    .service-card {
        padding: 24px;
        border-radius: 40px;
        gap: 13px;
    }

    .service-img {
        flex: 0 0 35%;
    }

    .service-img img {
        border-radius: 24px;
    }

    .service-info .title {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .service-info .desc {
        font-size: 16px;
        margin-bottom: 28px;
    }

    .service-link {
        width: 32px;
        height: 31px;
    }

    .order-lg-2 .image-block {
        text-align: left !important;
    }

    .order-lg-1 .image-block {
        text-align: right !important;
    }

    .grid-item.grid-item-1 {
        padding-bottom: 88px;
        flex-direction: row;
    }

    .grid-item.grid-item-1 .img-wrap {
        position: relative;
        bottom: -35px;
    }

    .grid-body {
        color: #fff;
        padding: 0 0 0 32px;
        max-width: 72%;
    }

    .grid-body .title {
        font-size: 48px;
        line-height: 58px;
    }

    .grid-body .desc {
        font-size: 18px;
        line-height: 24px;
    }

    .swiper-res .swiper-navigation {
        margin-top: 24px;
    }

    .grid-item-link {
        padding: 10px 32px;
        height: 88px;
        font-size: 20px;
        justify-content: space-between;
    }

    .grid-item-link i {
        font-size: 32px;
        display: inline-block;
    }

    .grid-item.grid-item-4 {
        grid-area: 1 / 3 / 5 / 4;
        padding-bottom: 88px;
    }

    .grid-item.grid-item-4 .title {
        padding: 20px 18px;
        height: 88px;
        font-size: 20px;
        line-height: 24px;
    }

    .section-values {
        height: 800px;
        padding-top: 30px;
        padding-bottom: 65px;
    }

    .slide-value-content .desc {
        font-size: 16px;
        line-height: 26px;
        overflow: auto;
        max-height: 285px;
        padding: 11px 16px 30px;
    }

    .slide-value-content {
        padding: 20px 30px;
    }
}

@media screen and (min-width: 1200px) {
    .value-inner {
        max-width: 85%;
        margin: auto;
    }

    .slider-content-bg {
        width: 62%;
        padding: 20px 45px 0;
    }

    .slider-navigation {
        left: calc(60% + 30px)
    }

    .features-info {
        flex: 0 0 35%;
        max-width: 35%;
        text-align: left
    }

    .features-items {
        flex: 0 0 35%;
        max-width: 35%
    }

    .features-boldText {
        flex: 0 0 100%;
    }

    .features-items2 {
        flex: 0 0 35%;
        max-width: 35%
    }

    .features-video {
        flex: 0 0 28%;
        max-width: 28%
    }

    .swiper-values-wrap {
        margin-right: 110px;
        max-width: 572px;
    }

    .value-content {
        max-width: 28%;
    }

    .job-grids {
        max-width: 75%;
    }

    .section-about_intro {
        padding: 120px 0;
    }

    .features-box {
        flex: 0 0 45%;
        margin-top: 0;
        gap: 25px 29px;
    }

    .slider-box::after {
        font-size: 44px;
    }

    .slider-box {
        flex: 0 0 42%;
        max-width: 42%;
        margin-right: 80px;
    }

    .banner-content {
        max-width: 50%;
    }

    .product-content {
        max-width: 30%;
    }
}


@media screen and (min-width: 1400px) {
    .product-content {
        max-width: 20%;
    }

    .value-content {
        max-width: 32%;
    }

    .value-inner {
        max-width: 75%;
    }
}

@media screen and (max-width: 576px) {
    .swiper-values-content {
        width: 70%;
        height: 55%;
        margin: 24% auto 22%;
    }
}

@media screen and (max-width: 768px) {
    .swiper-products-wrap .swiper-slide-active .product-item img {
        max-width: 70%;
    }
}