body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
}
.bg-blur-top {
    background-image: url("../img/bg-blur-header.png");
    background-repeat: no-repeat;
    background-size: contain;
}
.bg-blur-right {
    background-image: url("../img/bg-middle-right.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}
.bg-blur-left {
    background-image: url("../img/bg-middle-left.png");
    background-repeat: no-repeat;
    background-size: contain;
}
.bg-blur-bottom {
    background-image: url("../img/bg-bottom-right.png");
    background-repeat: no-repeat;
    background-size: contain;
}
.bg-blur-bottom-right {
    background-image: url("../img/bg-bottom-right.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}
.bg-navbar {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(2.5px);
}
.nav-item a {
    font-weight: 500;
    margin-left: 20px;
    border-radius: 7px;
    width: 90px;
    text-align: center;
}
.dropdown-menu a {
    font-weight: 500;
    width: auto;
    text-align: left !important;
    border-radius: 0px;
}
.nav-item a:hover {
    background-color: #ca2026;
    color: #fff;
    font-weight: 400;
}
.navbar-nav .nav-link.active:hover {
    color: #fff !important;
    font-weight: 400;
}
.navbar-nav .nav-link.active {
    color: #ca2026 !important;
    font-weight: 600;
}
.hover-service {
    transition: transform 0.3s ease-in-out;
}
.hover-service:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
        rgba(0, 0, 0, 0.01) 0px 10px 10px -5px;
    border-radius: 25px;
    transform: scale(1);
}
.hover-service:hover .img-service-training {
    transform: scale(1.1);
}
.hover-service:hover .img-service-api {
    transform: scale(1.1);
}
.hover-service:hover .img-service-service {
    transform: scale(1.1);
}
.hover-service:hover .img-icon-arrow {
    transform: scale(1.1);
}
.dropdown-item {
    margin: 0px !important;
    font-weight: 400 !important;
}
.dropdown-menu {
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #ca2026 !important;
}

/* For Desktop View 1024*/
@media screen and (min-width: 1024px) {
    .swiper.swiper-testimonial {
        width: 100%;
        height: 300px;
    }
    .swiper-button-next.swiper-button-next-testimonial {
        background-color: #ca2026 !important;
        padding: 30px;
        color: white !important;
        border-radius: 100%;
        vertical-align: middle;
    }
    .swiper-button-prev.swiper-button-prev-testimonial {
        background-color: white !important;
        padding: 30px;
        color: black !important;
        border-radius: 100%;
        vertical-align: middle;
    }
    .swiper-pagination-bullet-active {
        background: #ca2026 !important;
    }
    .swiper.swiper-testimonial {
        --swiper-navigation-size: 20px;
    }
    .swiper.swiper-client {
        width: 100%;
        height: 100%;
    }
    .box-img-client-landing-page {
        width: 200px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box-img-client-landing-page img {
        object-fit: contain;
    }
    .custom-hr {
        background: #f12711; /* fallback for old browsers */
        background: -webkit-linear-gradient(
            to right,
            #f5af19,
            #f12711
        ); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(
            to right,
            #f5af19,
            #f12711
        ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        border: 2px solid transparent;
        width: 30%;
        height: 5px;
    }
    /* Custom */
    .hero {
        padding: 100px 0px;
    }
    .img-hero {
        width: 90%;
    }
    .text-title-hero {
        font-size: 40px;
        font-weight: 500;
    }
    .text-desc-hero {
        font-size: 16px;
        text-align: justify;
        line-height: 30px;
    }
    .text-btn-hero {
        background-color: #ca2026 !important;
    }
    .text-btn-hero:hover {
        background-color: #ae1c21 !important;
    }
    /* Hero */
    .text-title-head-service {
        font-size: 40px;
        font-weight: 500;
    }
    .img-service-training {
        width: 50px;
        height: 50px;
    }
    .img-service-api {
        width: 50px;
        height: 50px;
    }
    .img-service-service {
        width: 50px;
        height: 50px;
    }
    .img-icon-arrow {
        width: 18%;
        height: auto;
    }

    .text-title-service {
        font-weight: 500;
        font-size: 22px;
        margin: 15px 0px;
    }

    .hover-service:hover .text-title-service {
        font-size: 24px;
    }

    .hover-service:hover .text-desc-service {
        font-size: 18px;
    }

    .text-desc-service {
        font-size: 16px;
        max-width: 300px;
        text-align: center;
    }
    /* Service */
    .next-level {
        padding: 100px 0px;
    }
    .img-nextlevel {
        width: 100%;
    }
    .position-nextlevel-img {
        text-align: end;
    }
    .text-title-nextlevel {
        font-size: 32px;
        text-align: left;
    }
    .text-desc-nextlevel {
        font-size: 16px;
        line-height: 30px;
        text-align: justify;
    }
    /* Next level */

    .trusted-partner {
        padding: 50px 0px;
    }
    .img-trusted {
        width: 90%;
    }
    .position-trusted-img {
        text-align: left;
    }
    .text-number-trusted {
        font-weight: 700;
        font-size: 22px;
        color: #ca2026;
        margin: 5px 0px;
    }
    /* Trusted */
    .testimonial {
        padding-top: 100px;
    }
    .text-title-testimonial {
        font-size: 22px;
        color: #e5a413;
        letter-spacing: 7px;
    }
    .text-subtitle-testimonial {
        font-size: 42px;
        font-weight: 500;
        color: #191825;
    }
    .text-name-testimonial {
        font-weight: 500;
        font-size: 24px;
    }

    .text-desc-testimonial {
        font-size: 16px;
        text-align: center;
    }

    .client-landingpage {
        padding: 40px 0px;
    }
    /* Testimonial */
    footer {
        padding-top: 60px;
        padding-bottom: 10px;
        background-color: #ffffff61;
        padding-left: 30px;
        padding-right: 30px;
    }
    .text-title-footer {
        font-size: 16px;
        font-weight: 500;
    }
    .img-logo-footer {
        width: 20%;
        height: auto;
    }
    .text-desc-footer {
        font-size: 14px;
        max-width: 80%;
        line-height: 25px;
        text-align: justify;
    }
    .text-address-footer {
        font-size: 14px;
    }
    .text-email-footer {
        font-size: 14px;
    }
    .text-phone-footer {
        font-size: 14px;
    }
    .img-email-footer {
        width: 20px;
        height: 20px;
    }
    .img-phone-footer {
        width: 20px;
        height: 20px;
    }
    .text-copy-right {
        color: #b5aeae;
        font-size: 14px;
    }

    .bg-container-footer {
        background-color: #f9f9f9;
        border-radius: 25px;
    }

    /* Footer */

    /* About */
    .about {
        padding-top: 150px;
        padding-bottom: 40px;
    }

    .text-title-about {
        font-size: 40px;
        font-weight: 500;
    }

    .text-title-us {
        font-size: 40px;
        font-weight: 500;
        color: #ca2026;
    }

    .card-about-bg {
        background: rgba(255, 255, 255, 0) !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0) !important;
        backdrop-filter: blur(0px) !important;
        -webkit-backdrop-filter: blur(0px) !important;
        border: 1px solid rgb(0, 0, 0, 0.2) !important;
    }

    .vision {
        padding: 40px 0px;
    }

    .text-title-vision {
        font-size: 40px;
        font-weight: 700;
        background: linear-gradient(
            146deg,
            rgba(218, 52, 0, 1) 0%,
            rgba(241, 135, 122, 1) 53%,
            rgba(247, 156, 153, 1) 100%
        );
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
    }

    .mission {
        padding: 20px 0px;
    }

    .text-about-mission {
        text-align: justify;
    }
    .value {
        padding: 40px 0px;
    }
    .text-title-value {
        font-size: 40px;
        font-weight: 500;
        text-align: center;
    }
    .client {
        padding: 40px 0px;
    }
    .text-title-clientpart {
        font-size: 40px;
        font-weight: 500;
        text-align: center;
    }
    .box-img-client3 {
        width: 120px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box-img-client3 img {
        object-fit: contain;
    }

    .box-img-client2 {
        width: 140px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box-img-client2 img {
        object-fit: contain;
    }
    .box-img-client {
        width: 220px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box-img-client img {
        object-fit: contain;
    }

    .professional {
        padding-top: 150px;
        padding-bottom: 40px;
    }
    .text-title-professional {
        font-size: 40px;
        font-weight: 500;
    }

    .outsourcing {
        padding: 40px 0px;
    }

    .text-title-outsourcing {
        font-size: 30px;
    }

    .adventages {
        padding: 40px 0px;
    }

    .text-title-adventages {
        font-size: 30px;
        font-weight: 600px;
        text-align: center;
    }

    .training {
        padding-top: 150px;
        padding-bottom: 80px;
    }

    .text-title-training {
        font-size: 40px;
        font-weight: 600;
    }

    .text-desc-training {
        font-size: 16px;
        line-height: 30px;
    }

    .exploring {
        padding: 40px 0px;
    }

    .text-title-exploring {
        font-size: 30px;
        font-size: 600;
        text-align: center;
    }

    .upgrade {
        padding: 60px 0px;
    }

    .text-title-upgrade {
        font-size: 30px;
        font-weight: 600;
        text-align: center;
    }

    .text-desc-upgrade {
        font-size: 16px;
        line-height: 30px;
        text-align: center;
    }
    .btn-custom-upgrade {
        font-size: 14px;
        margin-top: 30px;
        font-weight: 600;
        color: #ca2026;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 55px;
        background-color: #fff;
        border-radius: 25px;
        padding: 5px;
        background-clip: padding-box;
        border: 2px solid transparent;
        background-image: linear-gradient(#fff, #fff),
            linear-gradient(146deg, #ff9900, #ffffff, #ffffff, #dc0d0d80);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    /* Contact */
    .contact {
        padding: 150px 0px;
    }
    .text-title-contact {
        font-size: 38px;
        font-weight: 500;
    }
    .text-desc-contact {
        font-size: 16px;
    }
}