.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    transition: 0.5s;
    z-index: 99
}

:root {
    --default-color: #fffc;
    --heading-color: #e0e9f2;
    --accent-color: #e3a127;
    --surface-color: #1b262c;
    --contrast-color: #fff
}

body {
    font-family: "DM Sans", sans-serif;
    overflow-x: hidden
}

.btn {
    font-weight: 600;
    transition: 0.5s
}

.btn-square {
    width: 32px;
    height: 32px
}

.btn-sm-square {
    width: 34px;
    height: 34px
}

.btn-md-square {
    width: 44px;
    height: 44px
}

.btn-lg-square {
    width: 56px;
    height: 56px
}

.btn-xl-square {
    width: 66px;
    height: 66px
}

.btn-square, .btn-sm-square, .btn-md-square, .btn-lg-square, .btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400
}

.btn.btn-primary {
    color: var(--bs-white);
    border: none;
    border-radius: 19px !important;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 18px !important
}

.btn.btn-light {
    color: var(--bs-primary);
    border: none
}

.btn.btn-light:hover {
    color: var(--bs-black);
    background: var(--bs-primary)
}

.topbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
    color: var(--bs-primary)
}

.topbar .dropdown .dropdown-menu a:hover {
    color: var(--bs-primary)
}

.topbar .dropdown .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-light);
    padding-top: 11px;
    border: 0;
    transition: 0.5s;
    opacity: 1
}

.navbar-light .navbar-nav .nav-link {
    position: relative;
    margin-right: 24px;
    padding: 24px 0;
    color: var(--bs-white);
    font-size: 16px;
    font-weight: 400;
    outline: none
}

.sticky-top.navbar-light .navbar-nav .nav-link, .sticky-top.navbar-light .navbar-nav .nav-item .nav-link {
    padding: 20px 0;
    color: #fff
}

.navbar-light .navbar-nav .nav-item .nav-link {
    color: var(--bs-white)
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-item .nav-link:hover, .navbar-light .navbar-nav .nav-item .nav-link.active {
    color: #00bcd4;
    font-size: 16px;
    font-weight: 450
}

.navbar-light .navbar-brand img {
    max-height: 45px;
    transition: 0.5s
}

.sticky-top.navbar-light .navbar-brand img {
    max-height: 40px
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\F282";
    font-family: "bootstrap-icons";
    vertical-align: middle;
    margin-left: 7px;
    font-size: 11px;
    font-weight: 700
}

.dropdown .dropdown-menu a:hover {
    background: transparent;
    color: #fff
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: #fff;
    transition: 0.5s;
    opacity: 1;
    padding: 0 !important
}

@media (max-width: 991.98px) {
    .sticky-top.navbar-light {
        position: relative;
        background: var(--bs-white)
    }

    .navbar.navbar-expand-lg .navbar-toggler {
        padding: 10px 20px;
        border: 1px solid var(--bs-primary);
        color: var(--bs-primary)
    }

    .navbar-light .navbar-collapse {
        margin-top: 15px;
        border-top: 1px solid #ddd
    }

    .navbar-light .navbar-nav .nav-link, .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
        margin-left: 0;
        color: var(--bs-dark)
    }

    .navbar-light .navbar-nav .nav-item .nav-link {
        color: var(--bs-dark) !important
    }

    .navbar-light .navbar-brand img {
        max-height: 45px
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0 0;
        border: 0;
        border-radius: 0;
        transition: 0.5s;
        opacity: 0
    }

    .navbar-light {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        border-bottom: 1px solid #ffffff6e;
        z-index: 999
    }

    .sticky-top.navbar-light {
        position: fixed;
        background: #11192b
    }
}

.header-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 600px;
    height: 100vh;
    width: 100%
}

.header-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1
}

.carousel-caption {
    z-index: 2
}

@media (max-width: 991px) {
    .header-banner {
        background-position: center 30%;
        height: fit-content
    }
}

.bg-breadcrumb {
    position: relative;
    overflow: hidden;
    background: linear-gradient(#000000b3, #000000b3), url(/user/img/carousel-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 140px 0 60px;
    transition: 0.5s
}

@media (min-width: 992px) {
    .bg-breadcrumb {
        padding: 140px 0 60px
    }
}

@media (max-width: 991px) {
    .bg-breadcrumb {
        padding: 60px 0
    }
}

.bg-breadcrumb .breadcrumb {
    position: relative
}

.bg-breadcrumb .breadcrumb .breadcrumb-item a {
    color: var(--bs-white)
}

.nav-icon {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #fff;
    font-weight: 400
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    letter-spacing: 1.5px
}

.hero-title span {
    color: #a8aab8
}

.owl-carousel .owl-item img {
    display: block;
    width: auto
}

.hero-desc {
    color: #fff;
    font-size: 16px;
    opacity: 90%;
    line-height: 30px;
    text-align: left;
    letter-spacing: 0.1px
}

.btn-outline-light {
    border: 1px solid #fff6
}

.hero-img {
    max-width: 100%;
    animation: float 6s ease-in-out infinite
}

@keyframes float {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-12px)
    }
    100% {
        transform: translateY(0)
    }
}

.top-0 {
    top: -15px !important
}

.carousel-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 15%;
    padding-top: 3.25rem;
    padding-bottom: 0;
    color: #fff;
    text-align: center
}

.carousel-caption img {
    animation: none;
    height: 100% !important
}

.hero-btn {
    align-items: center;
    padding: 13px 27px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 450;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    box-sizing: border-box
}

.vietnamese {
    top: 79%;
    left: 66%;
    animation-delay: 0.9s;
}

.hero-btn-primary {
    background-color: #2f42a5;
    color: #fff;
    border: 2px solid #2f42a5
}

.hero-btn-primary:hover {
    background-color: #13abbb;
    border-color: #13abbb;
    color: #fff
}

.header-banner img {
    height: 100vh
}

.hero-btn-outline {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff
}

.hero-btn-outline:hover {
    background-color: #2f42a5;
    color: #fff;
    border-color: #2f42a5
}

.main-title {
    font-weight: 850;
    color: #2f42a5;
    font-size: 66px;
    letter-spacing: 2.2px
}

.sub-title {
    font-weight: 500;
    color: #2e345d;
    line-height: 1.3;
    font-size: 42px;
    font-weight: 750;
    letter-spacing: 0.3px;
    word-spacing: 1.2px
}

.highlight {
    color: #919191
}

.description {
    color: #040135;
    font-size: 17px;
    line-height: 1.9;
    text-align: left
}

.custom-btn {
    padding: 13px 22px;
    border-radius: 0;
    font-weight: 550;
    color: #2e345d;
    border: 2px solid #2e345da8;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease
}

.custom-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #3f51b5;
    z-index: -1;
    transition: width 0.4s ease
}

.custom-btn:hover::before {
    width: 100%
}

.custom-btn:hover {
    color: #fff
}

.image-wrapper img {
    max-width: 100%;
    height: auto
}

.heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.top-right-title {
    display: flex;
    justify-content: flex-end
}

.content {
    position: relative;
    z-index: 5;
    width: 120%
}

.title-line {
    display: flex;
    align-items: center
}

.title-line .line {
    width: 160px;
    height: 1.6px;
    background: #2e345d
}

.title-line .dot {
    width: 14px;
    height: 14px;
    border: 2px solid #2e345d;
    border-radius: 50%
}

.title-line .text {
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    color: #2e345d;
    margin: 0 6px
}

@media (max-width: 991px) {
    .content {
        width: 100%;
        transform: none
    }

    .ai-section .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .top-right-title {
        position: static;
        justify-content: center;
        margin-bottom: 15px
    }
}

.intl-section {
    background: #fff;
    overflow: hidden
}

.map-holder {
    position: relative
}

.map-img {
    width: 100%
}

.lang {
    position: absolute;
    background: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    box-shadow: 0 6px 25px #00000014;
    animation: float 4s ease-in-out infinite
}

.english {
    top: 20%;
    left: 15%
}

.spanish {
    top: 20%;
    left: 62%;
    animation-delay: 0.6s
}

.french {
    top: 49%;
    left: 76%;
    animation-delay: 0.9s
}

.indo {
    top: 50%;
    left: 6%;
    animation-delay: 1.2s
}

.content-col {
    padding-right: 80px
}

.sub-text {
    margin-top: 30px;
    font-size: 30px;
    font-weight: 700;
    color: #2c2c2c
}

.sub-text span {
    color: #8a8a8a
}

.know-btn {
    margin-top: 25px;
    border: 1.8px solid #9fa3c2;
    padding: 10px 26px;
    color: #4a4a4a;
    font-weight: 500;
    transition: 0.3s
}

.know-btn:hover {
    background: #2d3f91;
    color: #fff;
    border-color: #2d3f91
}

@keyframes float {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-12px)
    }
}

@media (max-width: 991px) {
    .intl-section {
        padding: 1px 0 !important;
        margin-bottom: 21px
    }

    .map-col {
        padding-left: 20px
    }

    .content-col {
        padding-right: 20px;
        text-align: center;
        margin-top: 40px
    }

    .global-text::after {
        display: none
    }
}

.lang {
    position: absolute;
    background: #fff;
    padding: 7px 23px 7px 13px;
    border-radius: 30px;
    font-size: 19px;
    box-shadow: 0 6px 25px #00000014;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    gap: 10px;
    color: #000000d9;
    font-weight: 600;
    animation: float 4s ease-in-out infinite
}

.lang img {
    width: 41px;
    height: 41px;
    border-radius: 50%;
    object-fit: cover
}

.global-wrap {
    display: flex;
    align-items: center
}

.global-text {
    font-size: 17px;
    letter-spacing: 1px;
    color: #2e345d;
    margin-right: 15px;
    white-space: nowrap;
    font-weight: 500
}

.global-line {
    width: 151px;
    height: 1.6px;
    background: #2e345d;
    margin-right: 0
}

.global-dot {
    width: 14px;
    height: 14px;
    border: 1.6px solid #2e345d;
    border-radius: 50%;
    background: #fff
}

.big-title {
    font-size: 62px;
    font-weight: 800;
    line-height: 1.1;
    color: #2f42a5;
    letter-spacing: 1px
}

@media (max-width: 991px) {
    .heading-row {
        text-align: center
    }

    .global-wrap {
        justify-content: center;
        margin-bottom: 20px
    }

    .big-title {
        text-align: left;
        font-size: 36px
    }
}

.solutions-section {
    background: #f0f2f5 0 0 no-repeat padding-box
}

.section-title {
    font-size: 62px;
    font-weight: 700;
    color: #2f42a5
}

.section-subtitle {
    font-size: 46px;
    margin: 15px 0;
    color: #2e345d;
    font-weight: 750;
    letter-spacing: 1.3px;
    word-spacing: 1.2px
}

.section-subtitle span {
    color: #919191
}

.desc {
    color: #2e345d;
    font-weight: 450;
    font-size: 18px;
    letter-spacing: normal
}

.solutions-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px
}

.solutions-indicator span {
    width: 140px;
    height: 2px;
    background: #9fa3c2;
    position: relative
}

.solutions-indicator span::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid #9fa3c2;
    border-radius: 50%
}

.solution-btn {
    border: 1.8px solid #2c47a3;
    color: #2c47a3;
    padding: 8px 20px;
    transition: 0.3s
}

.solution-btn:hover {
    background: #2c47a3;
    color: #fff
}

.solution-card img {
    border-radius: 15px;
    object-fit: cover
}

.solution-card h5 {
    margin-top: 15px;
    font-weight: 700
}

.solution-card p {
    font-size: 14px;
    color: #777
}

.solution-card .arrow {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #2c47a3;
    color: #fff;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700
}

.solution-card:hover {
    transform: translateY(-6px)
}

.owl-carousel .owl-stage {
    padding: 8px 0;
    padding-left: 3px !important
}

.owl-carousel .owl-stage-outer {
    position: relative
}

.regional-section .sub-title {
    font-weight: 500;
    color: #2e345d;
    line-height: 1.3;
    font-size: 42px;
    font-weight: 750;
    letter-spacing: 0.3px;
    word-spacing: 1.2px
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: visible;
    -webkit-transform: translate3d(0, 0, 0)
}

@media (max-width: 991px) {
    .section-subtitle {
        font-size: 22px
    }

    .hero-title {
        text-align: left;
        font-size: 30px !important;
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
        letter-spacing: normal
    }

    br {
        display: none
    }

    .carousel-caption .px-5 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .carousel-caption {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 15%;
        padding-top: 0;
        padding-bottom: 0;
        color: #fff;
        text-align: center
    }
}

.solutions-section .custom-btn {
    font-weight: 600;
    font-size: 16px
}

.ai-carousel .ai-box {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 20px #00000014;
    margin: 5px
}

.ai-carousel .ai-box img {
    height: 190px;
    width: 100%;
    object-fit: cover
}

.ai-carousel .ai-content {
    padding: 15px 16px 18px;
    position: relative
}

.ai-carousel h5 {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 5px
}

.ai-carousel p {
    font-size: 14px;
    color: #6c757d;
    line-height: 1.3;
    margin-bottom: 0;
    padding-right: 50px
}

.arrow-btn {
    width: 36px;
    height: 36px;
    background: #0d6efd;
    border-radius: 50%;
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px
}

.regional-section {
    background: url('/user/img/map-3.png');
}

.languages h2 {
    font-size: 137px;
    color: #2f42a5;
    font-weight: 800;
    line-height: 0.9
}

.languages h3 {
    font-size: 20px;
    font-weight: 700;
    color: #222e34
}

.small-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #6c757d;
    font-weight: 600;
    font-size: 13px
}

.small-title .line {
    flex: 1;
    height: 2px;
    background: #cfd4da
}

.main-title span {
    color: #1f3bb3
}

.main-title .light {
    color: #9aa0a6
}

.language-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.language-tags .tag {
    background: #fff;
    border-radius: 50px;
    padding: 7px 16px;
    font-size: 14px;
    box-shadow: 0 4px 10px #0000000d;
    cursor: pointer;
    transition: 0.3s
}

.language-tags .tag:hover {
    transform: translateY(-4px);
    background: #1f3bb3;
    color: #fff
}

.region-title {
    font-size: 44px;
    font-weight: 800;
    color: #1f3bb3;
    line-height: 1.1
}

.count-box span {
    font-size: 72px;
    font-weight: 900;
    color: #1f3bb3
}

.count-box p {
    font-size: 16px;
    color: #6c757d;
    margin-top: -10px
}

.animate__fadeInLeft {
    animation-delay: 0.3s
}

.animate__fadeInRight {
    animation-delay: 0.6s
}

@media (max-width: 768px) {
    .region-title {
        font-size: 32px;
        text-align: center
    }

    .count-box {
        text-align: center
    }
}

.lang-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid #091255;
    background: transparent;
    font-weight: 600;
    font-size: 17px;
    cursor: pointer;
    transition: 0.25s ease;
    height: 60px;
    border: 0.5px solid #9e9e9e;
    color: #222e34
}

.lang-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 10px
}

.lang-item {
    color: #222e34;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 15px;
    border: 1px solid #0912553d;
    background: transparent;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 calc(15% - -16px)
}

.lang-item:nth-child(n+6):nth-child(-n+10) {
    flex: 0 0 calc(18% - -4px)
}

@media (max-width: 992px) {
    .lang-item {
        flex: 0 0 calc(33.33% - 12px)
    }
}

@media (max-width: 576px) {
    .lang-item {
        flex: 0 0 calc(50% - 12px)
    }
}

@media (max-width: 992px) {
    .lang-item {
        flex: 0 0 calc(33.333% - 15px) !important
    }
}

@media (max-width: 576px) {
    .lang-item {
        flex: 0 0 calc(50% - 15px) !important
    }

    .hero-btn {
        width: 100%;
        padding: 8px 13px;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 450;
        text-decoration: none;
        letter-spacing: 0.3px;
        transition: all 0.3s ease;
        box-sizing: border-box
    }

    .hero-btn-primary {
        padding: 8px 20px !important;
        background-color: #2f42a5;
        color: #fff;
        border: 2px solid #2f42a5;
    }

    .carousel-caption img {
        display: none;
    }
}

.icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700
}

.text {
    line-height: 1
}

.bg1 {
    background: #d7ecef;
    color: #376970
}

.bg2 {
    background: #eee9ff;
    color: #6f42c1
}

.bg3 {
    background: #d7efdf;
    color: #447e58
}

.bg4 {
    background: #fff7e1;
    color: #73661e
}

.bg5 {
    background: #eee9ff;
    color: #6f42c1
}

.bg6 {
    background: #ffe8e2;
    color: #e8590c
}

.bg7 {
    background: #e6fcf5;
    color: #0ca678
}

.numbers-section {
    background: url('/user/img/hero_count_bg.png') center center/cover no-repeat;
    padding: 100px 0 0;
    position: relative
}

.numbers-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}

.numbers-section .container {
    z-index: 2
}

.stat-card {
    padding: 50px 33px;
    border-radius: 30px 30px 1px 0;
    text-align: left;
    height: 100%;
    transition: 0.3s ease;
    background: transparent linear-gradient(180deg, #2d40a0 0%, #071727 100%) 0 0 no-repeat padding-box
}

.stat-card span {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 26px;
    color: #fff;
    position: relative;
    display: inline-block
}

.stat-card h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: #fff;
    margin: 7px 0
}

.stat-card p {
    font-size: 21px;
    color: #fff;
    margin-bottom: 0
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px #0006
}

@media (max-width: 768px) {
    .numbers-section {
        padding: 60px 0
    }

    .stat-card {
        text-align: center;
        border-radius: 30px
    }
}

.numbers-section .section-subtitle span {
    color: #aab0b5
}

.numbers-section .custom-btn {
    padding: 8px 30px;
    border-radius: 0;
    font-weight: 600;
    border-color: #ffc107;
    color: #f8fdff;
    border: 2px solid #f8fdff
}

.insights-content .custom-btn {
    padding: 8px 30px;
    border-radius: 0;
    font-weight: 600;
    color: #f8fdff;
    border: 2px solid #f8fdff
}

.numbers-section .title-line .line {
    width: 160px;
    height: 1.6px;
    background: #fff
}

.numbers-section .title-line .dot {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%
}

.numbers-section .title-line .text {
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    color: #fff;
    margin: 0 6px
}

.numbers-section .section-title {
    font-size: 62px;
    font-weight: 700;
    color: #2f42a5
}

.section-label {
    font-size: 14px;
    letter-spacing: 2px;
    color: #6c757d;
    position: relative;
    margin-bottom: 20px
}

.section-main-heading {
    font-size: 48px;
    font-weight: 700;
    color: #2f3d8f
}

.section-main-heading span {
    color: #2f3d8f
}

.section-subtext {
    color: #555;
    font-weight: 400
}

.info-title {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 25px;
    letter-spacing: 0.2px;
    color: #2a292c
}

.info-desc {
    font-size: 16px;
    color: #4c4a4b;
    margin: 0;
    font-weight: 400;
    line-height: 32px
}

.info-icon {
    font-size: 26px;
    color: #2f3d8f
}

.divider-line {
    opacity: 0.2
}

.research-wrapper {
    position: relative
}

.research-image-box img {
    height: 100%;
    object-fit: cover
}

.research-content-area {
    position: relative;
    z-index: 2
}

@media (max-width: 991px) {
    .research-content-area {
        margin-left: 0;
        margin-top: 20px
    }
}

.cert-section {
    background-color: #f0f2f5
}

.cert-main-title {
    font-size: 48px;
    font-weight: 700;
    color: #2f3d8f;
    margin-bottom: 10px
}

.cert-sub-title {
    font-weight: 400;
    color: #6c757d
}

.cert-sub-title span {
    color: #2f3d8f;
    font-weight: 600
}

.cert-label {
    font-size: 14px;
    letter-spacing: 1px;
    color: #6c757d;
    display: flex;
    align-items: center
}

.cert-label span {
    display: inline-block;
    width: 80px;
    height: 2px;
    background: #6c757d;
    margin-right: 10px;
    position: relative
}

.cert-label span::before {
    content: "";
    width: 8px;
    height: 8px;
    border: 2px solid #6c757d;
    border-radius: 50%;
    position: absolute;
    left: -8px;
    top: -3px;
    background: #fff
}

.cert-divider {
    opacity: 0.2
}

.cert-item .h6 {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 22px
}

.cert-item p {
    font-size: 16px;
    color: #706b6c;
    margin: 0;
    font-weight: 500
}

.cert-icon {
    width: 132px;
    height: 128px
}

.clients-label {
    font-size: 14px;
    color: #6c757d;
    display: flex;
    align-items: center
}

.clients-label span {
    display: inline-block;
    width: 80px;
    height: 2px;
    background: #6c757d;
    margin-right: 10px;
    position: relative
}

.clients-label span::before {
    content: "";
    width: 8px;
    height: 8px;
    border: 2px solid #6c757d;
    border-radius: 50%;
    position: absolute;
    left: -8px;
    top: -3px;
    background: #fff
}

.clients-title {
    font-size: 48px;
    font-weight: 700;
    color: #2f3d8f
}

.clients-subtitle {
    font-size: 28px;
    color: #6c757d
}

.clients-subtitle span {
    color: #2f3d8f;
    font-weight: 600
}

.clients-subtitle strong {
    color: #2f3d8f
}

.demo-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #2f3d8f;
    color: #2f3d8f;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s
}

.demo-btn:hover {
    background-color: #2f3d8f;
    color: #fff
}

.client-card {
    background: #fff;
    padding: 18px;
    border-radius: 7px;
    text-align: center;
    border: 2px solid #eee;
    transition: 0.3s
}

.client-card img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: 0.3s;
    height: 51px;
    width: 128px;
    height: 66px;
    object-fit: contain
}

.clients-section .section-subtitle {
    font-size: 44px;
    margin: 15px 0;
    color: #2e345d;
    font-weight: 750;
    letter-spacing: 1.3px;
    word-spacing: 1.2px;
    line-height: 1.3
}

.client-card:hover img {
    filter: grayscale(0%);
    opacity: 1
}

@media (min-width: 992px) {
    .col-lg-custom {
        width: 30.285714%;
        flex: 0 0 14.285714%
    }
}

.main-footer {
    background-color: #f7f8f8
}

.main-footer .small {
    font-size: 14px;
    font-weight: 500;
    color: #202c32
}

.footer-links h6, .h6 {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 22px;
    color: #222e34
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer-links ul li {
    margin-bottom: 8px;
    font-size: 16px;
    color: #202c32
}

.footer-links ul li a {
    text-decoration: none;
    color: #202c32;
    transition: 0.3s;
    font-weight: 400
}

.footer-links ul li a:hover {
    color: #2f3d8f
}

.contact-info li {
    color: #6c757d
}

.footer-divider {
    opacity: 0.2
}

.footer-policies a {
    margin: 0 12px;
    text-decoration: none;
    color: #202c32;
    font-size: 15px;
    font-weight: 500
}

.footer-policies a:hover {
    color: #2f3d8f
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid #c0b7b7;
    border-radius: 50%;
    margin-left: 8px;
    color: #222e34;
    transition: 0.3s
}

.social-icons a:hover {
    background-color: #2f3d8f;
    color: #fff;
    border-color: #2f3d8f
}

.solution-card {
    background: #ffff;
    border-radius: 20px;
    overflow: hidden;
    position: relative
}

.card-img-wrapper {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    padding: 16px 16px 0
}

.card-img-wrapper img {
    width: 100%;
    object-fit: cover;
    display: block;
    width: 100% !important
}

.img-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%
}

.img-title {
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 56px;
    font-weight: 400;
    margin: 0;
    letter-spacing: 1.2px;
    text-align: center
}

.owl-stage {
    display: flex
}

.card-body-area {
    padding: 17px 20px
}

.card-body-area small {
    font-size: 16px;
    color: #919191
}

.card-body-area p {
    font-size: 26px;
    font-weight: 600;
    color: #2f3556;
    margin-top: 10px;
    max-width: 100%;
    line-height: 30px
}

.circle-arrow {
    position: absolute;
    right: 17px;
    bottom: 15px;
    width: 45px;
    height: 45px;
    background: #3949ab;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    cursor: pointer;
    transition: 0.3s
}

.circle-arrow:hover {
    background: #0ab5c7
}

.insights-section .global-text {
    font-size: 17px;
    letter-spacing: 1px;
    color: #fff;
    margin-right: 15px;
    white-space: nowrap;
    font-weight: 500
}

.insights-section .global-line {
    width: 151px;
    height: 1.6px;
    background: #fff;
    margin-right: 0
}

.insights-section .global-dot {
    width: 14px;
    height: 14px;
    border: 1.6px solid #fff;
    border-radius: 50%;
    background: transparent
}

.insights-hero {
    background: url('/user/img/bg-4.png') center center/cover no-repeat;
    padding: 100px 0 30px;
    align-items: center;
    position: relative;
    overflow: hidden
}

.insights-content h2 {
    word-spacing: 6px;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff !important;
    letter-spacing: 1px
}

.insights-content p {
    font-size: 18px;
    color: #fff;
    margin: 18px 0;
    line-height: 31px
}

.tag {
    letter-spacing: 3px;
    opacity: 0.7
}

.insights-slider-wrap {
    width: 100%;
    padding-left: 35%
}

.insights-hero .owl-stage-outer {
    overflow: hidden
}

.insights-hero .owl-carousel .item img {
    width: 100% !important;
    height: auto;
    object-fit: cover;
    border-radius: 0
}

.owl-nav {
    font-size: 52px !important;
    color: #fff !important;
    background: transparent !important;
    position: relative;
    top: 50px;
    left: 84%;
    display: flex;
    gap: 39px
}

.insights-video-item {
    position: relative
}

.insights-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: #0009;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s
}

.insights-play-btn:hover {
    background: #ff4b2b
}

.insights-hero .owl-stage {
    padding-left: 0 !important
}

@media (max-width: 991px) {
    .insights-hero {
        flex-direction: column;
        padding-top: 60px
    }

    .insights-content {
        position: relative;
        left: 0;
        max-width: 100%;
        padding: 0 20px
    }

    .insights-content h1 {
        font-size: 32px
    }

    .insights-slider-wrap {
        padding-left: 0;
        margin-top: 30px
    }

    .owl-carousel .item img {
        height: 340px
    }
}

@media (max-width: 575px) {
    .insights-content h1 {
        font-size: 26px
    }

    .owl-carousel .item img {
        height: 260px
    }

    .owl-nav button {
        left: 50%
    }
}

.insights-slider {
    position: relative;
    padding-bottom: 60px
}

.insights-slider .owl-dots {
    position: absolute;
    bottom: 40px;
    left: 0;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 10;
    gap: 17px;
    right: 0
}

.owl-dots {
    display: flex !important;
    justify-content: normal;
    margin-top: 0;
    position: relative;
    z-index: 999
}

.btn-close {
    z-index: 9999
}

.owl-dot span {
    width: 100px;
    height: 4px;
    background: #ccc;
    display: block;
    margin: 5px;
    border-radius: 0;
    transition: background 0.3s ease
}

.owl-dot.active span {
    background: #1a73e8
}

.owl-carousel .owl-dot {
    margin: 0 !important;
    user-select: none
}

.mega-menu {
    left: 0;
    right: 0;
    border-radius: 0
}

.mega-wrapper {
    background: #fff;
    border-radius: 0;
    overflow: hidden
}

.mega-left {
    background: #2f42a5;
    padding: 40px;
    color: #fff;
    height: 100%
}

.mega-left h5 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 34px;
    font-size: 18px;
    position: relative;
    padding-bottom: 10px
}

.mega-left h5::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 63px;
    height: 2px;
    background-color: #fff
}

.mega-left p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px
}

.mega-left .btn {
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    padding: 10px 22px;
    font-size: 13px;
    border-radius: 0
}

.mega-block {
    padding: 18px 14px;
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer
}

.mega-block.active, .mega-block:hover {
    background: #f1f3f6
}

.mega-block h6 {
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 18px
}

.mega-block p {
    font-size: 14px;
    margin: 0;
    color: #040135;
    font-weight: 400
}

.mega-media {
    border-radius: 17px;
    overflow: hidden;
    position: relative;
    background: #f6f6f6;
    padding: 14px
}

.mega-media img {
    width: 100%;
    height: auto;
    object-fit: cover
}

.mega-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00000040
}

.mega-play span {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #000
}

.mega-media-text {
    margin-top: 12px
}

.mega-media-text h6 {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 16px;
    color: #040135
}

.mega-left h6 {
    font-size: 16px;
    color: #fff
}

.mega-media-text p {
    font-size: 13px;
    color: #6c757d
}

@media (max-width: 991px) {
    .mega-left {
        border-radius: 12px
    }

    .mega-media {
        margin-top: 20px
    }

    .hero-desc {
        color: #fff;
        font-size: 15px
    }

    .px-5 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .ps-5 {
        padding-left: 0.5rem !important
    }

    .p-4 {
        padding: 0.5rem !important
    }

    .description {
        color: #040135;
        font-size: 15px;
        line-height: inherit;
        text-align: center
    }

    .ms-5 {
        margin-left: 0 !important
    }

    .sub-title {
        font-weight: 500;
        color: #2e345d;
        line-height: 1.3;
        font-size: 25px !important;
        font-weight: 750;
        letter-spacing: inherit;
        word-spacing: 1.2px
    }

    .ai-section .mt-5 {
        margin-top: 1rem !important
    }

    .main-title {
        font-weight: 850;
        color: #2f42a5;
        font-size: 34px;
        letter-spacing: 1.2px
    }

    .px-4 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important
    }
}

.icon-box {
    width: 15px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #000;
    flex-shrink: 0
}

.mega-block.active .icon-box {
    background: #00e5ff
}

.mega-block.active i {
    color: #000
}

.lets-talk-btn {
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.lets-talk-btn .arrow-icon {
    transition: all 0.3s ease
}

.lets-talk-btn:hover {
    background: linear-gradient(45deg, #0d6efd, #6610f2);
    border: none
}

.lets-talk-btn:hover .arrow-icon {
    transform: translateX(5px);
    color: #fff
}

@media (max-width: 991px) {
    .owl-carousel .owl-stage-outer {
        overflow: hidden
    }

    .card-body-area p {
        font-size: 22px
    }
}

.btn-primary:hover {
    color: #fff;
    background-color: #2196f3;
    border-color: #1ad590
}

.insights-content {
    position: absolute;
    left: 4%;
    top: 58%;
    transform: translateY(-50%);
    max-width: 650px;
    z-index: 2
}

.insights-slider-wrap {
    padding-left: 35%
}

.insights-slider .item img {
    border-radius: 12px
}

.insights-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fffc;
    color: #000;
    font-size: 26px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

@media (max-width: 991px) {
    .insights-content {
        position: relative;
        top: auto;
        transform: none;
        padding: 0 16px;
        max-width: 100%;
        text-align: left;
        left: 0
    }

    .stat-card span {
        font-size: 34px;
        font-weight: 700;
        margin-bottom: 12px;
        color: #fff;
        position: relative;
        display: inline-block
    }

    .languages h2 {
        font-size: 66px;
        color: #2f42a5;
        font-weight: 800;
        line-height: 0.9
    }

    .regional-section {
        background: url('/user/img/map-3.png') center/cover no-repeat;
        padding-top: 1rem !important;
        padding-bottom: 2rem !important
    }

    .regional-section .mt-5 {
        margin-top: 0 !important
    }

    .insights-slider-wrap {
        padding-left: 0;
        margin-top: 20px
    }

    .stat-card p {
        font-size: 16px;
        color: #fff;
        margin-bottom: 0
    }

    .global-line {
        width: 80px;
        height: 1.6px;
        background: #2e345d;
        margin-right: 0
    }

    .big-title {
        font-size: 34px !important;
        margin-bottom: 14px !important
    }

    .cert-section .text-center {
        text-align: left !important;
        margin-top: 2rem !important
    }

    .owl-dot span {
        width: 42px;
        height: 4px;
        background: #ccc;
        display: block;
        margin: 5px;
        border-radius: 0;
        transition: background 0.3s ease
    }

    .insights-slider .owl-dots {
        position: absolute;
        bottom: 30px;
        left: 0;
        transform: initial;
        width: 100%;
        text-align: center;
        z-index: 10;
        gap: 12px;
        right: 0
    }

    .owl-nav {
        font-size: 52px !important;
        color: #fff !important;
        background: transparent !important;
        position: relative;
        top: 67px;
        left: 12px;
        display: flex;
        gap: 20px
    }

    .insights-hero .mb-5 {
        margin-bottom: 1rem !important
    }

    .cert-icon {
        width: 100px;
        height: 100px
    }

    .cert-section .mb-5 {
        margin-bottom: 2rem !important
    }

    .cert-item h6 {
        font-weight: 700;
        margin-bottom: 5px;
        font-size: 18px
    }

    .cert-item p {
        font-size: 14px;
        color: #706b6c;
        margin: 0;
        font-weight: 500
    }

    .cert-section .me-4 {
        margin-right: 0.5rem !important
    }

    .clients-section .section-subtitle {
        font-size: 27px;
        margin: 15px 0;
        color: #2e345d;
        font-weight: 750;
        letter-spacing: 0.3px;
        word-spacing: normal
    }

    .cert-section .mt-3 {
        margin-top: 0 !important
    }

    .footer-policies a {
        margin: 0 13px;
        text-decoration: none;
        color: #202c32;
        font-size: 16px;
        font-weight: 500
    }

    .lang-item {
        color: #222e34;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 7px 12px;
        border-radius: 15px;
        border: 1px solid #0912553d;
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap
    }

    .research-wrapper .mt-4 {
        margin-top: -0.5rem !important
    }

    .research-wrapper .mb-4 {
        margin-bottom: 0.5rem !important
    }

    .english {
        top: 15%;
        left: -2%
    }

    .german {
        top: 30%;
        left: -5%;
        animation-delay: 0.3s
    }

    .spanish {
        top: 15%;
        left: 50%;
        animation-delay: 0.6s
    }

    .indo {
        top: 54%;
        left: -5%;
        animation-delay: 1.2s
    }

    .french {
        top: 55%;
        left: 52%;
        animation-delay: 0.9s
    }

    .lang-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 10px;
        margin-bottom: 35px
    }
}

@media (max-width: 576px) {
    .insights-content h1 {
        font-size: 22px
    }

    .insights-play-btn {
        width: 45px;
        height: 45px;
        font-size: 18px
    }

    .research-wrapper .p-4 {
        padding: 1.5rem !important
    }

    .section-title {
        font-size: 34px !important;
        font-weight: 700;
        color: #2f42a5;
        margin-bottom: 0 !important
    }

    .cert-section {
        background-color: #f0f2f5;
        padding-top: 0 !important;
        padding-bottom: 2rem !important
    }
}

.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 22vh;
    background: #2f42a5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transform: translateY(-100%);
    transition: 0.4s ease
}

.search-modal.active {
    transform: translateY(0)
}

.search-modal-content {
    position: relative;
    width: 60%;
    max-width: 900px
}

.search-input {
    width: 100%;
    padding: 7px 60px 11px 25px;
    border-radius: 50px;
    border: 2px solid #ffffff70;
    background: transparent;
    color: #fff;
    font-size: 18px;
    outline: none
}

.search-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff
}

a:hover {
    color: #03a9f4
}

.close-search {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 35px;
    color: #fff;
    cursor: pointer
}

#openSearch {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px
}

#openSearch:hover {
    background: transparent;
    color: #0d6efd
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none
}

@media (max-width: 991px) {
    .nav-icon, .nav-icon i, .nav-item .dropdown-toggle {
        color: #000 !important
    }

    .lets-talk-btn {
        color: #fff
    }
}

@media (max-width: 991px) {
    .nav-icon, .nav-icon i, .nav-item .dropdown-toggle {
        color: #000 !important
    }

    .btn.btn-primary {
        color: var(--bs-white);
        border: none;
        border-radius: 19px !important;
        font-size: 14px;
        font-weight: 500;
        padding: 10px 15px !important
    }

    .lets-talk-btn {
        color: #fff
    }

    #openSearch {
        background: transparent;
        border: none;
        color: #000;
        font-size: 18px
    }
}

@media screen and (max-width: 1199px) {
    .card-body-area p {
        font-size: 18px;
        font-weight: 600;
        color: #2f3556;
        margin-top: 10px;
        max-width: 100%;
        line-height: 23px
    }

    .circle-arrow {
        position: absolute;
        right: 10px;
        bottom: 8px;
        width: 40px;
        height: 40px;
        background: #3949ab;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        cursor: pointer;
        transition: 0.3s
    }

    .owl-carousel .owl-stage-outer {
        position: relative;
        overflow: hidden;
        -webkit-transform: translate3d(0, 0, 0)
    }
}

.client-scroll-section {
    overflow: hidden
}

.scroll-row {
    overflow: hidden
}

.scroll-track {
    display: flex;
    gap: 20px;
    width: max-content
}

.client-box {
    min-width: 176px;
    height: 90px;
    background: transparent;
    border: 2px solid #e6e6e6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    padding: 12px
}

.client-box img {
    max-height: 56px;
    transition: 0.3s;
    object-fit: contain
}

.client-box:hover {
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08)
}

.client-box:hover img {
    filter: grayscale(0%);
    opacity: 1
}

.scroll-right .scroll-track {
    animation: leftMove 45s linear infinite
}

.scroll-left .scroll-track {
    animation: rightMove 45s linear infinite
}

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

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

::placeholder {
    color: rgb(239, 229, 229);
    opacity: 1
}

::-ms-input-placeholder {
    color: rgb(237, 230, 230)
}

.login-btn {
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 6px
}

.login-btn i {
    font-size: 13px
}

.pulse-dot {
    width: 7px;
    height: 7px;
    background: #4f46e5;
    border-radius: 50%;
    animation: pulse 1.6s infinite
}

.motion-dropdown {
    border: none;
    border-radius: 11px !important;
    padding: 10px !important;
    width: 230px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    animation: dropIn 0.3s ease
}

.motion-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px 8px;
    border-radius: 2px;
    text-decoration: none;
    color: #000;
    transition: 0.3s;
    font-size: 14px;
    border-bottom: 1px solid #11111129
}

.motion-item:hover {
    background: #f6f8ff;
    transform: translateX(5px);
    color: #000 !important
}

.motion-login .icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px
}

.admin-bg {
    background: #eaedf7;
    color: #4f46e5
}

.user-bg {
    background: #dbede5e0;
    color: #059669
}

.motion-item small {
    display: block;
    font-size: 12px;
    color: #777
}

.lang-bg {
    background: #f1f5ff;
    color: #4f46e5;
    font-weight: 600;
    font-size: 15px !important
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.95)
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes pulse {
    0% {
        opacity: 0.5;
        transform: scale(1)
    }
    50% {
        opacity: 1;
        transform: scale(1.4)
    }
    100% {
        opacity: 0.5;
        transform: scale(1)
    }
}

.page-header {
    position: relative;
    margin-bottom: 0px;
    padding: 0px 0 73px 0;
    text-align: center;
    background: #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.page-header .container {
    display: none
}

.page-header h2 {
    position: relative;
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 5px;
    letter-spacing: 2px
}

.page-header a {
    position: relative;
    padding: 0 12px;
    font-size: 22px;
    color: #ffffff
}

.page-header a:hover {
    color: #fdbe33
}

.page-header a::after {
    position: absolute;
    content: "/";
    width: 8px;
    height: 8px;
    top: -2px;
    right: -7px;
    text-align: center;
    color: #ffffff
}

.page-header a:last-child::after {
    display: none
}

@media (max-width: 767.98px) {
    .page-header {
        padding: 45px 0
    }

    .page-header h2 {
        font-size: 35px
    }

    .page-header a {
        font-size: 18px
    }
}

.recent p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 18px;
    color: #040135
}

.modern-breadcrumb {
    background: #f0f3f6;
    padding: 14px 20px;
    border-radius: 1px;
    font-weight: 500;
    border-bottom: 0px solid #00000063
}

.modern-breadcrumb .breadcrumb {
    margin-bottom: 0
}

.modern-breadcrumb .breadcrumb-item a {
    color: #040135;
    font-weight: 550;
    text-decoration: none;
    transition: 0.3s;
    font-size: 15px;
    text-transform: uppercase !important;
    letter-spacing: 1px
}

.breadcrumb-item + .breadcrumb-item::before {
    font-family: "Bootstrap-icons";
    content: "\F285";
    color: #020203;
    font-size: 13px;
    padding: 2px 17px 0px 11px
}

.modern-breadcrumb .breadcrumb-item a:hover {
    color: #0d6efd
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
    margin-bottom: 1rem;
    list-style: none;
    justify-content: center
}

.modern-breadcrumb .breadcrumb-item.active {
    color: #040135;
    font-size: 15px;
    font-weight: 550;
    text-transform: uppercase !important;
    letter-spacing: 1px
}

h2, .h2 {
    font-size: 48px;
    color: #2e345d;
    font-weight: 900
}

.partners-section, .partners-section-bg p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 18px;
    color: #808592;
    line-height: 29px
}

.partner-slider {
    overflow: hidden;
    width: 100%;
    padding: 20px 0
}

.partner-track {
    display: flex;
    width: max-content;
    animation: scroll 20s linear infinite
}

.partner {
    flex: 0 0 auto;
    width: 183px;
    text-align: center;
    padding: 10px 20px
}

.partner img {
    max-width: 100%;
    height: auto;
    filter: initial;
    transition: 0.3s;
    width: 154px;
    height: 100%;
    object-fit: contain
}

.partner img:hover {
    filter: grayscale(0%)
}

.motion-login .dropdown-menu-end[data-bs-popper] {
    right: auto;
    left: auto
}

.partners-section-bg {
    background-color: #f0f3f6
}

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

@media (max-width: 991px) {
    .login-btn {
        font-weight: 500;
        color: #111;
        text-decoration: none;
        display: flex;
        align-items: baseline;
        gap: 2px
    }

    .partners-section, .partners-section-bg, .pe-5 {
        padding-right: 0rem !important
    }
}

.blog-card {
    overflow: hidden;
    height: 100%;
    cursor: pointer;
    transition: 0.3s;
    padding-bottom: 20px;
    padding-top: 0
}

.large-card {
    background: #f6f8fa;
    padding: 15px
}

.blog-img img {
    width: 100%;
    object-fit: cover
}

.large-card .blog-img img {
    height: auto;
    padding: 0 22px
}

.blog-card h6 {
    font-size: 21px;
    font-weight: 700;
    color: #2e345d;
    margin-bottom: 19px
}

.blog-card p {
    font-size: 16px;
    color: #808592;
    margin-bottom: 25px
}

.blog-card .badge {
    font-size: 16px;
    background: #e5e7eb;
    padding: 11px 16px;
    color: #2e345d;
    font-weight: 500;
    border-radius: 3px
}

.blog-card span {
    font-weight: 700;
    font-size: 16px;
    color: #2e345d
}

.nav-tabs .nav-link {
    border: none;
    color: #2e345d;
    font-weight: 500;
    padding: 7px 0px;
    font-size: 20px
}

.nav-tabs .nav-link.active {
    color: #3b5bcc;
    border-bottom: 3px solid #3b5bcc;
    background: transparent
}

.blog-card2 {
    background: #fff;
    padding: 0px;
    border-radius: 0px;
    transition: 0.3s;
    margin-bottom: 17px
}

.blog-card2 img {
    border-radius: 4px;
    margin-bottom: 10px
}

.blog-card2 h6 {
    font-size: 31px;
    font-weight: 700;
    color: #2e345d;
    margin-bottom: 26px;
    margin-top: 17px;
    line-height: 39px
}

.blog-card2 .small {
    font-size: 18px;
    color: #2e345d;
    font-weight: 500
}

.plus-btn {
    border: 2px solid #707070;
    background: #fff;
    width: 57px;
    height: 57px;
    border-radius: 6px;
    font-size: 18px;
    font-size: 43px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-weight: 300
}

.more-blogs .nav {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #cccdd5
}

.blog-card2 .badge {
    display: inline-block;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: 450;
    background: #f6f8fa !important;
    color: #2e345d;
    border-radius: 3px
}

.blog-card2 .small {
    font-size: 18px;
    color: #2e345d;
    font-weight: 600
}

.more-blogs h3 {
    font-size: 42px
}

.tabs-scroll {
    overflow-x: auto;
    overflow-y: hidden
}

.tabs-scroll::-webkit-scrollbar {
    display: none
}

.tabs-scroll .nav {
    flex-wrap: nowrap;
    white-space: nowrap
}

.tabs-scroll .nav-item {
    flex: 0 0 auto
}

.globe-wrapper {
    perspective: 1000px
}

#globe-container {
    width: 100%;
    height: 100vh
}

.map-holder {
    position: relative;
    text-align: center
}

.globe-rotate {
    display: inline-block;
    perspective: 1000px
}

.map-img {
    width: 100%;
    animation: globe3D 25s linear infinite;
    transform-style: preserve-3d
}

.depth-scroll-wrapper {
    background-image: url('/user/img/lng.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px 9px
}

@keyframes globe3D {
    0% {
        transform: rotateY(0deg)
    }
    100% {
        transform: rotateY(360deg)
    }
}

.globe {
    animation: spin 30s linear infinite
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

#largeTitle {
    font-size: 26px;
    font-weight: 700;
    color: #2e345d;
    margin-bottom: 19px
}

.more-blogs hr {
    margin: 2rem 0
}

@media (max-width: 991.98px) {
    .nav-tabs .nav-link {
        border: none;
        color: #2e345d;
        font-weight: 500;
        padding: 7px 12px;
        font-size: 20px
    }

    .blog-card h6 {
        font-size: 23px;
        font-weight: 800
    }

    .blog-card p {
        font-size: 14px;
        color: #808592
    }

    .indo {
        top: 75%;
        left: 0%
    }
}

.section-header p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 18px;
    color: #808592
}

.video-box {
    overflow: hidden
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    transition: 0.3s;
    border: 3px dotted
}

.play-btn:hover {
    background: #0d6efd;
    transform: translate(-50%, -50%) scale(1.1)
}

.trusted-title span {
    color: #b0b3b8
}

.trusted-card {
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    font-size: 15px;
    background: #e9f9ffb5 !important;
    padding: 48px !important
}

.card-one {
    background: #eaf3ff
}

.card-two {
    background: #e9f5ef
}

.logo {
    max-width: -webkit-fill-available
}

.know-btn {
    border-radius: 8px;
    font-weight: 500
}

.read-link {
    text-decoration: none;
    font-weight: 600;
    color: #2e345d;
    font-size: 18px
}

.trusted-card h5 {
    font-size: 25px
}

.card-one::after {
    content: "";
    position: absolute;
    width: 205px;
    height: 110px;
    bottom: 0;
    right: 0;
    background-image: url('/user/img/svg.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.card-two::after {
    content: "";
    position: absolute;
    width: 233px;
    height: 123px;
    bottom: 0;
    right: -8px;
    background-image: url('/user/img/svg1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.trusted-card p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 18px;
    color: #2e345d;
    opacity: 90%
}

.underline-heading {
    position: relative;
    padding-bottom: 10px
}

.underline-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: #0d6efd;
    border-radius: 3px
}

.about-title {
    font-size: 40px;
    color: #6c757d
}

.about-title span {
    color: #0d6efd
}

.arrow-shape {
    margin-top: 36px;
    text-align: center
}

.arrow-shape img {
    max-width: 120px
}

.custom-accordion .accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 15px;
    overflow: hidden;
    background: #f0f3f6;
    border: 0.5px solid #70707059;
    border-radius: 20px
}

.custom-accordion .accordion-button {
    background: #fff;
    font-weight: 600;
    color: #2e345d;
    border-radius: 0px;
    font-size: 20px
}

.custom-accordion .accordion-button:not(.collapsed) {
    background: #f1f3f6;
    box-shadow: none
}

.custom-accordion .accordion-body {
    background: #f1f3f6;
    font-size: 15px;
    color: #5e626e
}

.accordion-body {
    padding: 0rem 73px 1rem
}

.number {
    opacity: 58%;
    font-weight: 600;
    color: #919191;
    font-size: 28px
}

.img-left img, .img-right img {
    width: 100%;
    border-radius: 20px
}

.logo-circle {
    position: absolute;
    top: -40px;
    left: 30%;
    width: 41px;
    display: flex;
    align-items: center;
    justify-content: center
}

.logo-circle img {
    width: 161px
}

@media (max-width: 991px) {
    .logo-circle {
        left: 40%;
        transform: translateX(-50%)
    }

    .logo-circle {
        position: absolute;
        top: 56%;
        left: 30%
    }

    .about-title {
        font-size: 30px
    }
}

.about-section .description {
    color: #040135;
    font-size: 17px;
    line-height: 28px;
    text-align: left
}

.logo-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #6610f2);
    animation: float 4s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(13, 110, 253, 0.4)
}

@keyframes float {
    0% {
        transform: translateY(0px)
    }
    50% {
        transform: translateY(-12px)
    }
    100% {
        transform: translateY(0px)
    }
}

.logo-img {
    width: 65%
}

.logo-circle::before {
    content: "";
    position: absolute;
    width: 140%;
    height: 140%;
    border-radius: 50%;
    border: 2px solid rgba(13, 110, 253, 0.4);
    animation: pulse 2.5s infinite
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 1
    }
    100% {
        transform: scale(1.3);
        opacity: 0
    }
}

.our-story {
    background: #f0f3f6
}

.story-title {
    color: #3a4ea1;
    font-weight: 700;
    letter-spacing: 1px
}

.story-arrow img {
    width: 80px
}

.our-story p {
    color: #2e345d;
    font-size: 18px;
    line-height: 1.7;
    text-align: justify;
    font-weight: 450;
    margin-bottom: 18px
}

.story-quote {
    background: #2f42a5;
    color: #fff;
    padding: 65px 40px;
    font-size: 27px;
    font-weight: 500;
    line-height: 48px
}

.story-heading {
    color: #888;
    font-size: 28px;
    font-weight: 600
}

.story-heading span {
    color: #3a4ea1
}

.story-heading strong {
    color: #3a4ea1
}

.story-img img {
    border-radius: 8px
}

.story-right {
    margin-left: -75px;
    position: relative;
    left: 100px
}

.cta-top-text {
    font-weight: 700;
    color: #2e345d;
    line-height: 1.6;
    font-size: 26px
}

.cta-box::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 39%;
    height: 100%;
    background: url('/user/img/globe-3.webp') no-repeat center;
    background-size: cover;
    opacity: 1.15
}

.cta-box::after {
    z-index: 1
}

.cta-box .row {
    position: relative;
    z-index: 2
}

.cta-title {
    color: #fff !important;
    font-weight: 700;
    font-size: 36px
}

.cta-desc {
    color: #ffffffa3;
    font-size: 18px;
    margin-top: 10px
}

.cta-btn {
    background: #222e34;
    color: #fff;
    padding: 17px 20px !important;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
    font-size: 18px;
    position: relative;
    z-index: 999
}

.cta-btn:hover {
    background: #000;
    color: #fff
}

.main-heading {
    font-size: 48px;
    font-weight: 700;
    color: #2f3e8f
}

.quote {
    font-weight: 600;
    color: #5a5f73
}

.image-box {
    position: absolute;
    right: 0;
    top: 40px
}

.img-large {
    width: 260px;
    border-radius: 40px;
    position: relative;
    z-index: 2
}

.img-small {
    width: 200px;
    border-radius: 40px;
    position: absolute;
    bottom: -50px;
    left: -110px;
    z-index: 3
}

.bubble {
    position: absolute;
    border-radius: 50%;
    z-index: 1
}

.bubble-yellow {
    width: 55px;
    height: 55px;
    background: #f3c77a;
    top: 23px;
    left: 54px
}

.bubble-blue {
    width: 90px;
    height: 90px;
    background: #a4a9e6;
    top: 78px;
    left: 103px
}

.bubble {
    animation: float 5s infinite ease-in-out
}

@keyframes float {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(20px)
    }
}

.join-team .big-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    color: #2f42a5;
    letter-spacing: 1px
}

.join-team h6 {
    color: #2e345d;
    font-size: 20px;
    font-weight: 520
}

.join-team p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 18px;
    color: #2e345d;
    font-weight: 400
}

@media (max-width: 991px) {
    .image-box {
        position: relative;
        top: 0;
        margin-top: 40px;
        text-align: center
    }

    .img-small {
        left: 0;
        bottom: -30px
    }

    .bubble {
        display: none
    }
}

.why-work-section {
    padding-bottom: 80px
}

.why-top {
    background: #0c3b70;
    color: #fff;
    padding: 80px 20px 180px;
    position: relative;
    overflow: hidden
}

.why-top::before {
    content: "";
    position: absolute;
    left: -120px;
    top: 0;
    width: 40%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    transform: skewX(-25deg)
}

.why-top::after {
    content: "";
    position: absolute;
    right: -120px;
    top: 0;
    width: 30%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    transform: skewX(-25deg)
}

.why-top h2 {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 52px;
    color: #fff
}

.why-top p {
    opacity: 0.8;
    font-size: 18px
}

.work-cards {
    margin-top: -130px
}

.work-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer
}

.work-card img {
    width: 100%;
    border-radius: 16px;
    transition: 0.4s
}

.work-card:hover img {
    transform: scale(1.05)
}

.hover-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    transform: translateY(120%);
    transition: 0.4s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15)
}

.work-card:hover .hover-content {
    transform: translateY(0)
}

@media (

(
max-width:

1372
px

)
and

(
min-width:

1200
px

)
)
{
.hover-content {
    position: absolute;
    bottom: 8px;
    left: 20px;
    right: 20px;
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    transform: translateY(120%);
    transition: 0.4s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15)
}

}
.hover-content h5 {
    font-weight: 700;
    color: #2e345d;
    font-size: 20px;
    margin-bottom: 15px
}

.hover-content p {
    font-size: 15px;
    color: #2e345d;
    font-weight: 400;
    line-height: 26px
}

.why .px-5 {
    padding-right: 5rem !important;
    padding-left: 5rem !important
}

@media (max-width: 767.98px) {
    .why .px-5 {
        padding-right: 0rem !important;
        padding-left: 0rem !important
    }
}

.our-values-section {
    background: #f4f6fb
}

.main-heading {
    font-size: 42px;
    font-weight: 700;
    color: #2f3e8f
}

.top-text {
    color: #555
}

.values-content {
    background: #3949ab
}

.image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.value-box {
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 34px 20px;
    text-align: center
}

.value-inner {
    max-width: 322px;
    margin: auto
}

.icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 31px;
    font-size: 20px;
    background: #4b5ab0
}

.value-box h5 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff
}

.value-box p {
    font-size: 17px;
    color: #fff;
    font-weight: 400;
    line-height: 26px
}

@media (max-width: 991px) {
    .image-side {
        height: 350px
    }
}

.left-box {
    background: #f0f3fd;
    border-radius: 20px;
    padding: 50px;
    height: 100%
}

.left-box h2 {
    font-weight: 900;
    color: #2f3553;
    font-size: 43px;
    margin-bottom: 24px
}

.left-box p {
    font-size: 18px;
    color: #2e345d;
    line-height: 1.7;
    font-weight: 440;
    margin-bottom: 75px
}

.know-btn {
    border: 2px solid #2f3553;
    padding: 12px 30px;
    display: inline-flex;
    gap: 10px;
    margin-top: 20px;
    text-decoration: none;
    font-weight: 600;
    color: #2f3553;
    transition: 0.4s
}

.know-btn:hover {
    background: #2f3553;
    color: #fff
}

.offer-box {
    border-radius: 20px;
    padding: 35px 30px;
    transition: 0.4s;
    height: 100%
}

.offer-box:hover {
    transform: translateY(-8px)
}

.offer-box .icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    animation: float 3s infinite ease-in-out
}

.icon svg {
    width: 28px;
    height: 28px
}

@keyframes float {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-7px)
    }
    100% {
        transform: translateY(0)
    }
}

.icon1 {
    background: #e4ddf8;
    border: 0.5px dashed #725caf;
    color: #6c72ff
}

.icon2 {
    background: #fddbde;
    border: 0.5px dashed #c78289;
    color: #ff6c6c
}

.icon3 {
    background: #d9f1f9;
    border: 0.5px dashed #608592;
    color: #1da1f2
}

.icon4 {
    background: #dbf8eb;
    border: 0.5px dashed #63b18e;
    color: #28c76f
}

.offer-box h5 {
    font-size: 23px;
    color: #2e345d;
    font-weight: 800
}

.bg1 {
    background: #f8f6fe
}

.bg2 {
    background: #fceeef
}

.bg3 {
    background: #d3f2ff7d
}

.bg4 {
    background: #f4fdf9
}

.opportunity-section {
    padding: 70px 0;
    background-color: #f4f6f8
}

.job-card {
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 0.5px solid #7070703b;
    border-radius: 20px;
    padding: 30px;
    transition: 0.3s;
    height: 100%
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08)
}

.job-title {
    font-weight: 600;
    color: #2e345d;
    font-size: 26px;
    font-weight: 700
}

.opportunity-section .section-title {
    font-size: 52px;
    font-weight: 700;
    color: #2f42a5
}

.open-op p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 18px;
    color: #2e345d
}

.job-desc {
    color: #627792;
    font-size: 17px;
    margin-bottom: 35px
}

.job-info {
    font-size: 18px;
    color: #222e34;
    font-weight: 500
}

.view-job {
    color: #2f42a5;
    font-weight: 700;
    text-decoration: none;
    font-size: 18px
}

.carousel-control-prev, .carousel-control-next {
    width: 45px;
    height: 45px;
    background: #fff;
    border-radius: 50%;
    top: -70px;
    border: 1px solid #e5e8ef;
    opacity: 1
}

.carousel-control-prev {
    right: 60px;
    left: auto
}

.carousel-control-next {
    right: 0
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    filter: invert(3.4)
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%
}

.custom-arrow {
    width: 45px;
    height: 45px;
    top: -107px;
    opacity: 1
}

.arrow-bg {
    width: 45px;
    height: 45px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #e5e8ef;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s
}

.arrow-bg:hover {
    background: #2f4aa0
}

.arrow-bg:hover svg path {
    stroke: #fff
}

.carousel-control-prev {
    right: 60px;
    left: auto
}

.carousel-control-next {
    right: 0
}

@media (max-width: 991px) {
    .custom-arrow {
        width: 45px;
        height: 45px;
        opacity: 1;
        bottom: -55px;
        top: auto
    }
}

.timeline {
    white-space: nowrap;
    max-width: 100%;
    padding: 0 0px;
    overflow-x: auto;
    scrollbar-width: none
}

.timeline::-webkit-scrollbar {
    display: none
}

.timeline-title {
    color: #2f42a5;
    font-weight: 700;
    font-size: 52px
}

.time-line strong {
    font-size: 19px
}

.timeline-small {
    color: #2e345d;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 500
}

.timeline ol {
    font-size: 0;
    padding: 273px 0
}

.timeline ol li {
    position: relative;
    display: inline-block;
    list-style: none;
    width: 171px;
    height: 1px;
    background: #62779257
}

.timeline ol li:last-child {
    width: 340px
}

.timeline ol li:not(:first-child) {
    margin-left: 14px
}

.timeline ol li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(97% + 2px);
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
    border: 4px solid #2f42a5
}

.timeline ol li div {
    position: absolute;
    left: 17px;
    top: 40px;
    width: 347px;
    padding: 13px;
    font-size: 15px;
    white-space: normal;
    color: #323135;
    background: #f0f3f6;
    border-radius: 13px;
    transition: all 0.4s ease;
    min-height: 169px
}

.time-line p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
    font-size: 14px
}

.time-line:hover p {
    -webkit-line-clamp: unset
}

.timeline ol li div.time-line:hover {
    background: #2f42a5;
    color: #fff;
    z-index: 10
}

.timeline ol li div::before {
    content: "";
    position: absolute;
    left: 145px;
    border-style: solid
}

.timeline ol li:nth-child(odd) div {
    top: -41px;
    transform: translateY(-100%)
}

.timeline ol li:nth-child(odd) div.time-line:hover {
    top: -27px;
    transform: translateY(-100%)
}

.timeline ol li:nth-child(odd) div::before {
    top: 100%;
    border-width: 16px;
    border-color: #f0f3f6 transparent transparent transparent
}

.timeline ol li:nth-child(even) div {
    top: calc(100% + 41px)
}

.timeline ol li:nth-child(even) div::before {
    bottom: 100%;
    border-width: 13px;
    border-color: transparent transparent #f0f3f6 transparent
}

.timeline ol li:nth-child(odd) div.time-line:hover::before {
    border-color: #2f42a5 transparent transparent transparent
}

.timeline ol li:nth-child(even) div.time-line:hover::before {
    border-color: transparent transparent #2f42a5 transparent
}

.timeline time {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
    color: #2f42a5
}

.timeline ol li div.time-line:hover time {
    color: #cdd6ff
}

@media (max-width: 768px) {
    .timeline ol li div {
        width: 260px
    }
}

.accordion-button:not(.collapsed)::after {
    background-image: url('/user/img/iconmonstr-arrow-right-thin-1.svg') !important;
    transform: rotate(-90deg);
    background-color: #fff
}

.accordion-button::after {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    margin-left: auto;
    content: "";
    background-color: #f6f6f6;
    background-image: url('/user/img/iconmonstr-arrow-right-thin-1.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out
}

.success-section {
    background: transparent;
    padding: 10px 0px 60px;
    text-align: center
}

.success-section h2 {
    color: #2f42a5;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 42px
}

.success-section p {
    max-width: 1125px;
    margin: auto;
    color: #040135;
    font-size: 19px;
    font-weight: 500
}

.impact-section {
    background: #f6f6f7;
    padding: 15px 0
}

.impact-title {
    font-size: 48px;
    font-weight: 700;
    color: #2e345d
}

.impact-title span {
    color: #919191
}

.impact-text {
    color: #2e345d;
    margin-top: 20px;
    line-height: 1.8;
    font-size: 16px
}

.impact-img {
    background: #f4f6fb;
    border-radius: 20px;
    padding: 40px;
    text-align: center
}

.impact-img img {
    max-width: 100%
}

@media (max-width: 991px) {
    .impact-title {
        font-size: 32px
    }
}

.regional-depth-area {
    padding: 62px 0
}

.depth-grid-box {
    position: relative;
    padding: 30px
}

.depth-grid-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#dcdde3 1px, transparent 1px), linear-gradient(90deg, #dcdde3 1px, transparent 1px);
    background-size: 120px 80px;
    opacity: 0.5;
    z-index: 0
}

.depth-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 50px;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    transition: 0.3s ease;
    border: 1px solid #e9ebf6;
    color: #222e34;
    font-size: 18px
}

.depth-card:hover {
    transform: translateY(-5px)
}

.depth-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px
}

.badge-a {
    background: #e8f5f6;
    color: #2c8a92
}

.badge-b {
    background: #eef2ff;
    color: #3f51b5
}

.badge-c {
    background: #f2ebff;
    color: #7e57c2
}

.badge-d {
    background: #fdeee8;
    color: #d16b4d
}

.badge-e {
    background: #fff5d6;
    color: #c19700
}

.badge-f {
    background: #e8f7ee;
    color: #2e8b57
}

.depth-heading {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d
}

.depth-heading span {
    color: #919191
}

.depth-description {
    color: #666;
    margin-top: 18px;
    line-height: 1.9
}

@media (max-width: 991px) {
    .depth-heading {
        font-size: 30px;
        text-align: center
    }

    .depth-description {
        text-align: center
    }
}

.spotlight-title {
    font-size: 62px;
    font-weight: 800;
    color: #2f42a5
}

.spotlight-subtext {
    color: #2e345d;
    font-size: 18px;
    font-weight: 400
}

.spotlight-btn {
    border: 1px solid #3b4fa3;
    padding: 8px 18px;
    font-size: 14px;
    text-decoration: none;
    color: #3b4fa3
}

.spot-card {
    position: relative;
    overflow: hidden;
    border-radius: 6px
}

.spot-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease
}

.spot-card:hover img {
    transform: scale(1.12);
    filter: brightness(1.1)
}

.spot-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(59, 79, 163, 0.25), transparent);
    opacity: 0;
    transition: 0.5s
}

.spot-card:hover::after {
    opacity: 1
}

.spot-logo {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.spot-logo img {
    max-width: 180px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.spot-overlay {
    position: absolute;
    inset: 0;
    color: #fff;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.spot-overlay a {
    border-radius: 1px;
    color: #fff;
    border: 1px solid #fff;
    padding: 11px 18px;
    font-size: 15px;
    text-decoration: none;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 9
}

.spot-overlay a:hover {
    background: #fff;
    color: #000;
    border-color: #fff
}

.cta-box {
    position: relative;
    z-index: 1
}

.cta-btn, .contact-btn {
    position: relative;
    z-index: 5
}

.spot-overlay a:hover::after {
    transform: translateX(6px)
}

.spot-overlay p {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 16.5px
}

.depth-scroll-wrapper {
    overflow: hidden
}

.depth-row {
    width: 100%;
    overflow: hidden;
    margin-bottom: 13px
}

.depth-track {
    display: flex;
    width: max-content;
    gap: 20px
}

.depth-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: #fff;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: none;
    border: 1px solid #e9ebf6
}

.depth-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.scroll-left .depth-track {
    animation: scrollLeft 20s linear infinite
}

.scroll-right .depth-track {
    animation: scrollRight 20s linear infinite
}

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

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

.depth-row:hover .depth-track {
    animation-play-state: paused
}

.research-section {
    background: #e9f8f9
}

.research-title {
    font-size: 48px;
    font-weight: 700;
    color: #919191
}

.research-title span {
    color: #2e345d
}

.research-text {
    color: #2e345d;
    line-height: 1.7;
    font-size: 17px
}

.research-steps {
    max-width: 550px
}

.step-box {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 12px;
    border-radius: 4px;
    box-shadow: none;
    background: transparent linear-gradient(270deg, #e9f8f9 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    font-size: 16px;
    font-weight: 550;
    color: #2e345d
}

.step-num {
    font-size: 21px;
    font-weight: 600;
    color: #919191a1;
    margin-right: 15px
}

.step-box p {
    margin: 0;
    color: #3f4a58
}

.research-bottom {
    color: #2e345d;
    font-weight: 600;
    font-size: 18px
}

.research-img-wrapper {
    position: relative;
    display: inline-block
}

.research-img {
    border-radius: 30px;
    max-width: 100%;
    width: 100%
}

@media (max-width: 991px) {
    .research-title {
        font-size: 32px
    }
}

.drive-title {
    font-size: 48px;
    font-weight: 700;
    color: #919191
}

.drive-title span {
    color: #2e345d
}

.explore-btn {
    border: 2px solid #2f3565;
    color: #2f3565;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 500
}

.explore-btn:hover {
    background: #2f3565;
    color: #fff
}

.drive-text {
    color: #2e345d;
    line-height: 1.7;
    font-size: 16px;
    font-weight: 400
}

.drive-img-box img {
    border-radius: 20px
}

.drive-quote {
    background: #2e345d;
    color: #fff;
    padding: 46px 60px;
    border-radius: 30px;
    line-height: 1.8;
    font-size: 16px;
    display: flex;
    align-items: center
}

@media (max-width: 991px) {
    .drive-title {
        font-size: 32px
    }

    .drive-quote {
        padding: 25px
    }
}

.drive-quote p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 21px
}

.support-section {
    background-color: #f5eee9
}

.support-title {
    font-size: 48px;
    font-weight: 700;
    color: #2e345d;
    margin-bottom: 1.25rem
}

.support-subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #2e345d;
    margin-bottom: 1.5rem
}

.support-text {
    font-size: 17px;
    line-height: 1.7;
    color: #2e345d;
    margin-bottom: 2rem;
    font-weight: 400;
    padding-right: 12px
}

.btn-explore {
    padding: 0.75rem 1.75rem;
    font-size: 1.05rem;
    font-weight: 500
}

.support-image {
    border-radius: 12px;
    object-fit: cover;
    height: 100%;
    width: 100%
}

@media (max-width: 991px) {
    .support-section {
        padding: 4rem 0
    }

    .support-title {
        font-size: 2.1rem
    }
}

.DrillBit-hero-section {
    background-color: #ffffff;
    padding: 6rem 0
}

.DrillBit-main-heading {
    font-size: 2.8rem;
    font-weight: 700;
    color: #0d1b2a;
    text-align: center;
    margin-bottom: 3.5rem;
    line-height: 1.2
}

.DrillBit-highlight-text {
    color: #1e40af;
    font-weight: 800
}

.DrillBit-feature-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    background-color: #f8fafc
}

.DrillBit-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12)
}

.DrillBit-card-content {
    padding: 2.25rem 1.75rem
}

.DrillBit-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem
}

.DrillBit-card-description {
    font-size: 1.05rem;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 1.5rem
}

.DrillBit-arrow-link {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
    transition: all 0.25s
}

.DrillBit-arrow-link:hover {
    color: #1d4ed8;
    transform: translateX(6px)
}

.DrillBit-arrow-symbol {
    margin-left: 0.5rem;
    font-size: 1.3rem
}

@media (max-width: 991px) {
    .DrillBit-main-heading {
        font-size: 2.4rem
    }

    .DrillBit-hero-section {
        padding: 4rem 0
    }
}

.discover-title {
    font-size: 48px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 50px;
    color: #2e345d
}

.discover-card {
    border-radius: 16px;
    padding: 30px 30px;
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 0.5px solid #70707070;
    border-radius: 20px
}

.discover-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px)
}

.discover-card p {
    color: #627792;
    font-size: 17px;
    margin: 0
}

.arrow-btn {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #1c2340;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s
}

.discover-card:hover .arrow-btn {
    background: #0d6efd
}

@media (max-width: 768px) {
    .discover-title {
        font-size: 28px
    }
}

.sec-soc {
    padding: 59px 0;
    background-color: #f5eee9d9
}

.box-soc {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 25px;
    height: 100%;
    transition: 0.3s
}

.box-soc:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06)
}

.icon-soc {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background: #f0f3f6 0% 0% no-repeat padding-box;
    border: 0.5px dashed #8f969e
}

.icon-soc i {
    font-size: 31px;
    color: #495057
}

.title-soc {
    font-weight: 800;
    color: #343a40;
    margin: 0;
    font-size: 22px
}

.heading-soc {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d
}

.heading-soc span {
    color: #919191;
    font-weight: 800
}

.desc-soc {
    color: #2e345d;
    line-height: 1.7;
    margin-top: 18px;
    font-size: 18px;
    font-weight: 400
}

@media (max-width: 991px) {
    .heading-soc {
        font-size: 28px;
        margin-top: 30px
    }
}

.approach {
    font-weight: 800 !important;
    font-size: 18px
}

.sec-features {
    padding: 20px 0 55px
}

.feature-box {
    background: #f7f8f8;
    padding: 35px 25px;
    border-radius: 0px;
    height: 100%;
    transition: 0.3s;
    border-top: 0.5px solid #a8acbb
}

.feature-box:hover {
    background: #e2e2e6;
    transform: translateY(-5px)
}

.feature-icon {
    font-size: 38px;
    color: #2e345d;
    margin-bottom: 20px
}

.feature-text {
    color: #222e34;
    font-size: 20px;
    line-height: initial;
    font-weight: 400
}

@media (max-width: 768px) {
    .feature-box {
        padding: 25px 20px
    }
}

.sec-gdpr {
    padding: 70px 0 0;
    background: #f8f6fe
}

.gdpr-title {
    font-size: 48px;
    font-weight: 800;
    color: #1c2340
}

.gdpr-title span {
    color: #919191;
    font-weight: 800
}

.gdpr-desc {
    color: #2e345d;
    margin: 15px 0 30px;
    font-size: 18px
}

.gdpr-boxs {
    background: #fff;
    border-radius: 14px;
    padding: 25px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
    transition: 0.3s
}

.gdpr-boxs:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px)
}

.icon-gdpr {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px dashed #8f969e;
    display: flex;
    align-items: center;
    justify-content: center
}

.icon-gdpr i {
    font-size: 36px;
    color: #495057
}

.text-gdpr {
    color: #222e34;
    font-size: 20px;
    width: 440px;
    font-weight: 400
}

.sec-gdpr h6 {
    font-size: 23px;
    color: #2e345d
}

@media (max-width: 768px) {
    .gdpr-title {
        font-size: 26px
    }

    .icon-gdpr {
        width: 117px;
        height: 70px;
        border-radius: 50%;
        border: 1px dashed #8f969e;
        display: flex;
        align-items: center;
        justify-content: center
    }
}

.sec-certificates {
    background: #e9f8f9;
    padding: 42px 20px
}

.title-certificates {
    font-weight: 800;
    color: #2e345d;
    margin-bottom: 10px;
    font-size: 26px
}

.link-certificates {
    color: #0b7f86;
    text-decoration: none;
    font-size: 20px;
    word-break: break-all
}

.link-certificates:hover {
    text-decoration: underline
}

@media (max-width: 991px) {
    .icon-gdpr {
        width: 123px;
        height: 75px;
        border-radius: 50%;
        border: 1px dashed #8f969e;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .approach {
        font-weight: 800 !important;
        font-size: 18px;
        margin-bottom: 21px
    }

    .impact-img {
        background: #f4f6fb;
        border-radius: 0;
        padding: 0px;
        text-align: center
    }

    .timeline-title {
        color: #2f42a5;
        font-weight: 700;
        font-size: 34px
    }
}

.main-title span {
    color: #5a5df0
}

.subtitle {
    color: #666;
    font-size: 15px;
    line-height: 1.6
}

.Platform {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 1px
}

.Platform span {
    color: #919191
}

.hero-text {
    font-size: 18px;
    color: #2e345d;
    font-weight: 400
}

.ai-feature-section {
    padding: 45px 0;
    background: #f7f8f8
}

.ai-feature-title {
    font-size: 42px;
    font-weight: 700;
    color: #2e345d
}

.ai-feature-desc {
    color: #2e345d;
    max-width: 1092px;
    margin: auto;
    font-size: 17px
}

.ai-feature-overlay h5, .ai-feature-overlay p {
    transition: color 0.4s ease
}

.ai-feature-overlay:hover {
    background: #ffffff
}

.ai-feature-overlay:hover h5, .ai-feature-overlay:hover p {
    color: #111111
}

.ai-feature-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.4s ease
}

.ai-feature-img {
    width: 100%;
    height: 533px;
    object-fit: cover;
    transition: 0.6s ease
}

.ai-feature-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 28px;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    min-height: 219px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: all 0.4s ease
}

.ai-feature-overlay:hover {
    background: #ffffff;
    color: #1f2937;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2)
}

.ai-feature-overlay:hover .ai-feature-arrow {
    background: #111111;
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25)
}

.ai-feature-card:hover {
    transform: translateY(-10px)
}

.ai-feature-card:hover .ai-feature-img {
    transform: scale(1.1)
}

.ai-feature-overlay h5 {
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 21px;
    color: #fff
}

.ai-feature-overlay p {
    font-size: 16px;
    opacity: 1.9;
    color: #fff
}

.ai-feature-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: absolute;
    right: 20px;
    bottom: 10px;
    transition: 0.3s
}

.ai-feature-arrow:hover {
    background: #2f42a5;
    color: #fff
}

@media (max-width: 768px) {
    .ai-feature-img {
        height: 391px
    }
}

.workflow-section {
    padding: 90px 0
}

.workflow-title {
    font-size: 42px;
    font-weight: 700;
    color: #2f3c64;
    line-height: 1.3
}

.workflow-desc {
    color: #2e345d;
    font-size: 17px
}

.build h2 {
    font-size: 38px;
    color: #2e345d;
    font-weight: 800
}

.workflow-card {
    background: #e7f3ff 0% 0% no-repeat padding-box;
    border-radius: 20px;
    padding: 15px;
    position: relative;
    overflow: hidden;
    transition: 0.4s ease
}

.workflow-card::before {
    content: "";
    position: absolute;
    right: -4px;
    top: -6px;
    width: 83px;
    height: 108px;
    background-size: cover;
    border-radius: 30px;
    transform: rotate(20deg)
}

.workflow-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08)
}

.workflow-img {
    width: 100%;
    height: 237px;
    border-radius: 18px;
    object-fit: cover
}

.workflow-card h5 {
    font-weight: 800;
    color: #222e34;
    font-size: 18px
}

.workflow-card p {
    font-size: 17px;
    color: #2e345d
}

.workflow-btn {
    border: 2px solid #2f3c64;
    color: #2f3c64;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s
}

.workflow-btn:hover {
    background: #2f3c64;
    color: #fff
}

@media (max-width: 768px) {
    .workflow-title {
        font-size: 28px
    }

    .workflow-card {
        padding: 25px
    }
}

@media (max-width: 991px) {
    .build h2 {
        font-size: 38px;
        color: #2e345d;
        font-weight: 800;
        line-height: 41px
    }
}

.integrity-section {
    padding: 50px 0;
    overflow: hidden
}

.integrity-title {
    font-size: 48px;
    font-weight: 800;
    color: #2f3c64;
    line-height: 1.3;
    letter-spacing: 2px
}

.integrity-title span {
    color: #919191
}

.integrity-text {
    color: #2e345d;
    max-width: 549px;
    margin: 20px 0 30px;
    font-size: 18px
}

.integrity-btn {
    border: 2px solid #2f3c64;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    color: #2f3c64;
    transition: 0.3s
}

.integrity-btn:hover {
    background: #2f3c64;
    color: #fff;
    transform: translateY(-3px)
}

.integrity-image-wrap {
    position: relative;
    display: inline-block
}

.integrity-image {
    width: 420px;
    border-radius: 80px;
    animation: floatUp 5s ease-in-out infinite
}

.circle-one, .circle-two {
    position: absolute;
    border-radius: 50%;
    animation: float 6s infinite ease-in-out
}

.circle-one {
    width: 120px;
    height: 120px;
    background: #8fa2f5;
    left: -60px;
    top: 80px
}

.circle-two {
    width: 80px;
    height: 80px;
    background: #f5d28f;
    right: -40px;
    bottom: 40px
}

@keyframes float {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-15px)
    }
}

@keyframes floatUp {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-20px)
    }
}

@media (max-width: 991px) {
    .integrity-title {
        font-size: 34px
    }

    .integrity-image {
        width: 100%
    }

    .integrity-section {
        text-align: center
    }
}

.modern-integrity-sec {
    padding: 90px 0
}

.modern-title {
    text-align: center;
    font-weight: 700;
    font-size: 48px;
    color: #2d3553;
    margin-bottom: 60px
}

.modern-title span {
    color: #8d92a3
}

.modern-card {
    border-radius: 22px;
    padding: 33px 27px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: 0.35s
}

.modern-card:hover {
    transform: translateY(-8px)
}

.modern-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px
}

.modern-icon img {
    width: 26px
}

.modern-card h5 {
    font-weight: 700;
    font-size: 24px;
    color: #2e345d;
    margin-bottom: 12px
}

.modern-card p {
    color: #2e345ddb;
    font-size: 16px;
    line-height: 1.6
}

.bg-peach {
    background: transparent linear-gradient(180deg, #fff4e6 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border-radius: 20px
}

.bg-lightblue {
    background: transparent linear-gradient(180deg, #e7f3ff 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border-radius: 20px
}

.bg-lavender {
    background: transparent linear-gradient(180deg, #f7ebff 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border-radius: 20px
}

.bg-lightgreen {
    background: transparent linear-gradient(180deg, #f2fbed 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border-radius: 20px
}

.bg-lightgray {
    background: transparent linear-gradient(180deg, #f2f5f7 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border-radius: 20px
}

.bg-lightcyan {
    background: transparent linear-gradient(180deg, #e9f8f9 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border-radius: 20px
}

.icon-orange {
    background: #f59f25
}

.icon-blue {
    background: #4b90da
}

.icon-purple {
    background: #a76ad6
}

.icon-green {
    background: #69bd57
}

.icon-gray {
    background: #9da3ad
}

.icon-cyan {
    background: #4cb7bf
}

.eco-heading span {
    color: #919191
}

.eco-description {
    color: #2e345d;
    font-size: 18px;
    line-height: 31px
}

.eco-timeline {
    position: relative;
    padding-left: 95px
}

.eco-timeline::before {
    content: "";
    position: absolute;
    left: 50px;
    top: 0;
    width: 1px;
    height: 100%;
    background: #838eb554
}

.eco-block {
    position: relative;
    margin-bottom: 60px;
    padding-left: 69px
}

.eco-count {
    position: absolute;
    left: -104px;
    top: 0;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #ffffff;
    border: 12px solid #adb6f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #2e345d;
    font-size: 32px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029
}

@keyframes rotateRing {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4)
    }
    70% {
        box-shadow: 0 0 0 15px rgba(99, 102, 241, 0)
    }
    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0)
    }
}

.eco-count::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(#6366f1, #8b5cf6, #ec4899, #6366f1);
    animation: rotateRing 4s linear infinite;
    z-index: -2
}

.eco-count {
    animation: pulseGlow 2.5s infinite
}

.eco-image-box {
    border-radius: 18px;
    overflow: hidden
}

.eco-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s ease
}

.eco-image-box:hover img {
    transform: scale(1.08)
}

.eco-content h5 {
    color: #222e34;
    font-weight: 800;
    margin-bottom: 12px;
    font-size: 26px
}

.eco-content p {
    color: #2e345d;
    font-size: 18px;
    max-width: 710px
}

.eco-btn {
    border: 1px solid #d1d5db;
    padding: 8px 18px;
    background: #fff;
    font-size: 14px;
    border-radius: 6px;
    transition: 0.3s
}

.eco-btn:hover {
    background: #5c6ac4;
    color: #fff;
    border-color: #5c6ac4
}

.operational {
    background-color: #f7f8f8
}

.cta-section h5 {
    font-weight: 700;
    color: #2e345d;
    line-height: 1.4;
    font-size: 42px
}

@media (max-width: 991px) {
    h2, .h2 {
        font-size: 34px !important;
        color: #2e345d;
        font-weight: 900
    }

    .eco-timeline {
        position: relative;
        padding-left: 60px
    }

    .eco-block {
        position: relative;
        margin-bottom: 60px;
        padding-left: 21px
    }

    .eco-count {
        position: absolute;
        left: -68px;
        top: 0;
        width: 78px;
        height: 78px;
        border-radius: 50%;
        background: #ffffff;
        border: 12px solid #adb6f7;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900
    }

    .eco-timeline::before {
        content: "";
        position: absolute;
        left: 33px;
        top: 0;
        width: 1px;
        height: 100%;
        background: #838eb554
    }

    .eco-content p {
        color: #2e345d;
        font-size: 16px;
        max-width: 100%
    }

    .eco-content h5 {
        color: #222e34;
        font-weight: 800;
        margin-bottom: 12px;
        font-size: 26px;
        margin-top: 17px
    }

    .cta-section h5 {
        font-weight: 700;
        color: #2e345d;
        line-height: 1.4;
        font-size: 29px
    }

    .modern-title {
        text-align: center;
        font-weight: 700;
        font-size: 34px;
        color: #2d3553;
        margin-bottom: 34px
    }

    .job-card {
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 0.5px solid #7070703b;
        border-radius: 20px;
        padding: 12px;
        transition: 0.3s;
        height: 100%
    }

    .job-info {
        font-size: 15px;
        color: #222e34;
        font-weight: 500
    }

    .left-box {
        background: #f0f3fd;
        border-radius: 20px;
        padding: 19px;
        height: 100%
    }
}

.hero-academic h1 {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d;
    line-height: 1.3;
    letter-spacing: 1px
}

.hero-academic h1 span.light-text {
    color: #919191
}

.hero-academic p {
    color: #2e345d;
    font-size: 18px;
    margin-top: 26px;
    max-width: 718px;
    font-weight: 400;
    line-height: 30px
}

@media (max-width: 991px) {
    .hero-academic p {
        margin-left: auto;
        margin-right: auto
    }

    .hero-image-wrapper {
        margin-top: 50px
    }

    .hero-academic h1 {
        font-size: 34px
    }
}

.academic-challenge-area {
    background: transparent linear-gradient(180deg, #2f42a5 0%, #1b2b80 100%) 0% 0% no-repeat padding-box;
    color: #ffffff
}

.challenge-heading {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff
}

.challenge-description {
    color: rgba(255, 255, 255, 0.8);
    margin-top: 20px;
    font-size: 16px;
    max-width: 565px
}

.challenge-box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: 0.3s ease
}

.challenge-box:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-6px)
}

.challenge-box-text {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff
}

@media (max-width: 991px) {
    .academic-challenge-area {
        text-align: center
    }

    .challenge-box {
        justify-content: center;
        text-align: left
    }
}

.integrity-wrapper {
    padding: 80px 0
}

.integrity-title span {
    color: #8b8fa3;
    font-weight: 600
}

.integrity-description {
    color: #2e345d;
    font-size: 17px
}

.integrity-card {
    border-radius: 30px;
    padding: 30px;
    transition: 0.3s ease;
    height: 100%
}

.integrity-card:hover {
    transform: translateY(-8px)
}

.integrity-card img {
    width: 100%;
    height: 165px;
    object-fit: contain;
    border-radius: 16px;
    margin-bottom: 20px
}

.integrity-card h6 {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 20px;
    min-height: 90px
}

.integrity-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s ease
}

.integrity-wrapper {
    padding: 80px 0
}

.integrity-title span {
    color: #8b8fa3;
    font-weight: 600
}

.integrity-description {
    color: #2e345d;
    font-size: 17px
}

.integrity-card {
    border-radius: 30px;
    padding: 30px;
    transition: 0.3s ease;
    height: 100%
}

.integrity-card:hover {
    transform: translateY(-8px)
}

.integrity-card img {
    width: 100%;
    border-radius: 16px;
    margin-bottom: 20px
}

.integrity-card h6 {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 20px;
    min-height: 90px
}

.integrity-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s ease
}

.bg-purple {
    background: #f0ecfb99
}

.bg-beige {
    background: #fffbef
}

.bg-blue {
    background: #eefaff
}

.bg-pink {
    background: #fef5f0
}

@media (max-width: 991px) {
    .integrity-title {
        font-size: 30px
    }

    .integrity-description {
        text-align: center;
        margin-top: 20px
    }
}

.round-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: 0.3s ease
}

.btn-purple .round-icon {
    background: #6346aa;
    color: #fff
}

.btn-yellow .round-icon {
    background: #dba913;
    color: #fff
}

.btn-blue .round-icon {
    background: #4d96b5;
    color: #fff
}

.btn-orange .round-icon {
    background: #ff7a30;
    color: #fff
}

.integrity-btn:hover .round-icon {
    transform: translateX(4px)
}

.dept-flow-section {
    background: #3b4aa5;
    padding: 54px 0;
    color: #fff
}

.dept-flow-heading {
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    color: #ffffff
}

.dept-flow-text {
    text-align: center;
    margin-top: 17px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 869px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    margin-bottom: 25px
}

.dept-card {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 50px 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 34px;
    transition: 0.3s ease;
    background: #5968b7 0% 0% no-repeat padding-box
}

.dept-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-6px)
}

.dept-badge {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 33px;
    border: 10px solid #adb6f7;
    color: #2e345d
}

.dept-content {
    display: flex;
    align-items: center;
    gap: 20px
}

.dept-card-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    max-width: 395px
}

.dept-icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #2f42a5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    font-size: 22px;
    color: #fff
}

.dept-card:hover .dept-icon-circle {
    background: #fff;
    color: #3b4aa5
}

.dept-image-wrapper img {
    width: 100%;
    border-radius: 25px;
    object-fit: cover
}

@media (max-width: 991px) {
    .dept-card {
        flex-direction: column;
        gap: 15px;
        text-align: center
    }

    .dept-content {
        flex-direction: column
    }
}

.inst-wrapper {
    background-color: #022d62;
    padding: 60px 0;
    color: #ffffff
}

.inst-heading {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.5;
    color: #ffffff;
    letter-spacing: 2px
}

.inst-description {
    opacity: 88%;
    font-size: 18px;
    color: #ffffff;
    margin-top: 30px;
    margin-bottom: 40px;
    max-width: 622px
}

.inst-btn-outline {
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 12px 28px;
    font-size: 18px;
    border-radius: 4px;
    transition: 0.3s ease;
    text-decoration: none;
    display: inline-block
}

.inst-btn-outline:hover {
    background-color: #ffffff;
    color: #0d3b66
}

.inst-image {
    width: 100%;
    border-radius: 4px
}

.inst-wrapper .custom-btn {
    padding: 8px 30px;
    border-radius: 0;
    font-weight: 600;
    border-color: #ffc107;
    color: #f8fdff;
    border: 2px solid #f8fdff
}

@media (max-width: 991px) {
    .inst-wrapper {
        text-align: center
    }

    .inst-description {
        margin-left: auto;
        margin-right: auto
    }
}

.panel-heading {
    font-size: 48px;
    font-weight: 800;
    color: #2f365f
}

.content-panel {
    background: #f7f8f8;
    padding: 50px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px
}

.panel-heading span {
    color: #919191;
    font-weight: 800
}

.panel-description {
    margin-top: 20px;
    color: #2e345d;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400
}

.panel-subtitle {
    font-size: 20px;
    margin-top: 30px;
    font-weight: 700;
    color: #222e34
}

.panel-subtitle span {
    border-bottom: 2px solid
}

.feature-row {
    display: flex;
    align-items: center;
    margin-top: 34px
}

.feature-badge {
    width: 55px;
    height: 55px;
    min-width: 60px;
    min-height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    margin-right: 15px
}

.badge-orange {
    background: #ffa530
}

.badge-blue {
    background: #4fa1f3
}

.badge-green {
    background: #8bce65
}

.badge-teal {
    background: #63b9bf
}

.feature-label {
    font-size: 19px;
    font-weight: 700;
    color: #333
}

@media (max-width: 991px) {
    .content-panel {
        margin-top: 40px;
        padding: 30px
    }
}

.ai-block {
    background-color: #f5eee9d9;
    padding: 100px 0 0
}

.ai-title {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    color: #2f365f
}

.ai-title .ai-muted {
    color: #9a9a9a;
    font-weight: 600
}

.ai-text {
    margin-top: 30px;
    font-size: 20px;
    color: #2f365f;
    max-width: 600px;
    line-height: 1.7
}

.ai-image-box {
    position: relative;
    display: inline-block
}

.ai-image-box::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    background: #f2b680;
    border-radius: 50%;
    top: 50%;
    right: -1px;
    transform: translateY(-50%);
    z-index: 0
}

.ai-image {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 25px;
    z-index: 1
}

@media (max-width: 991px) {
    .ai-title {
        font-size: 40px
    }

    .ai-image-box::before {
        width: 300px;
        height: 300px;
        right: 0
    }

    .ai-text {
        font-size: 16px;
        margin-bottom: 47px
    }

    .ai-mobile-center {
        text-align: center
    }
}

.contact-btn {
    border: 2px solid #2f365f;
    color: #222e34;
    padding: 12px 15px;
    border-radius: 25px;
    text-decoration: none;
    display: inline-block;
    background: #fff;
    border-color: #fff;
    font-weight: 600;
    transition: 0.3s ease;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    z-index: 999
}

.contact-btn:hover {
    background-color: #2f365f;
    color: #fff
}

@media (max-width: 991px) {
    .panel-heading {
        font-size: 29px;
        font-weight: 800;
        color: #2f365f
    }

    .dept-card-title {
        margin-bottom: 25px
    }

    .Platform {
        font-size: 34px
    }

    .contact-btn {
        font-size: 16px;
        margin-top: 26px
    }

    .inst-heading {
        font-size: 32px;
        letter-spacing: 1px
    }
}

.dbx-section {
    background: #f7f8f8;
    overflow: hidden
}

.dbx-heading {
    font-size: 48px;
    font-weight: 800
}

.dbx-title-dark {
    color: #2e3354
}

.dbx-title-light {
    color: #919191;
    font-weight: 800
}

.dbx-text {
    font-size: 16px;
    color: #2e345d;
    line-height: 1.8;
    max-width: 670px
}

.dbx-btn {
    border: 1px solid #2e3354;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 500;
    color: #2e3354;
    transition: all 0.3s ease
}

.dbx-btn:hover {
    background: #2e3354;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1)
}

.dbx-image {
    max-width: 100%;
    transition: transform 0.5s ease
}

.dbx-image:hover {
    transform: scale(1.05)
}

.dbx-circle {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    animation: dbxFloat 4s ease-in-out infinite
}

.dbx-circle-top {
    width: 100px;
    height: 100px;
    background: #adb6f7;
    top: 0;
    left: 0;
    border: 11px solid #ffff
}

.dbx-circle-bottom {
    width: 80px;
    height: 80px;
    background: #fdda9a;
    bottom: -9px;
    right: 36px;
    animation-delay: 2s
}

@keyframes dbxFloat {
    0% {
        transform: translateY(0px)
    }
    50% {
        transform: translateY(-15px)
    }
    100% {
        transform: translateY(0px)
    }
}

@media (max-width: 768px) {
    .dbx-heading {
        font-size: 34px !important
    }

    .dbx-image {
        max-width: 100%
    }
}

.rn-title {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d;
    letter-spacing: 1px
}

.rn-dark {
    color: #2e3354
}

.rn-light {
    color: #9aa0a6
}

.rn-desc {
    color: #2e345d;
    max-width: 704px;
    line-height: 1.8;
    font-size: 16px
}

.rn-btn {
    display: inline-block;
    border: 1px solid #2e3354;
    padding: 12px 28px;
    color: #2e3354;
    text-decoration: none;
    transition: 0.3s ease
}

.rn-btn:hover {
    background: #2e3354;
    color: #fff
}

.rn-card {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease
}

.rn-bg-orange {
    background: transparent linear-gradient(180deg, #fff4e6 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.rn-bg-blue {
    background: transparent linear-gradient(180deg, #e8f3ff 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.rn-bg-green {
    background: transparent linear-gradient(180deg, #f2fbee 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.rn-bg-purple {
    background: transparent linear-gradient(180deg, #f7ebff 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.rn-card:hover {
    transform: translateY(-12px) scale(1.05);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.08)
}

.rn-card h5 {
    margin-top: 27px;
    font-weight: 600;
    color: #2e345d;
    line-height: 1.6;
    font-size: 19px;
    text-align: center
}

.rn-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1)
}

.rn-icon {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    color: #fff
}

.rn-orange {
    background: #f59e0b
}

.rn-blue {
    background: #3b82f6
}

.rn-green {
    background: #84cc16
}

.rn-purple {
    background: #a855f7
}

@media (max-width: 768px) {
    .rn-title {
        font-size: 32px
    }

    .rn-card {
        width: 220px;
        height: 220px
    }
}

h2, .h2 {
    letter-spacing: 1px;
    font-size: 48px;
    color: #2e345d;
    font-weight: 800;
    line-height: 61px
}

.nav-tabs .nav-link.active {
    color: #3b5bcc;
    border-bottom: 3px solid #ffffff;
    background: transparent
}

.hero-academic h1 {
    font-size: 56px;
    font-weight: 800;
    color: #2e345d;
    line-height: 1.3;
    letter-spacing: 2px
}

.challenge-description {
    color: rgba(255, 255, 255, 0.8);
    margin-top: 20px;
    font-size: 16px;
    max-width: 565px;
    line-height: 30px
}

.academic-challenge-area .challenge-box {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 21px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: 0.3s ease;
    height: 100%
}

.challenge-box-icon {
    width: 66px;
    height: 66px;
    min-width: 60px;
    min-height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 28px;
    line-height: 21px
}

.challenge-box-text {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    line-height: 25px;
    letter-spacing: 1px
}

.integrity-wrapper {
    padding: 80px 0
}

.integrity-title span {
    color: #919191;
    font-weight: 800
}

.integrity-description {
    color: #2e345d;
    font-size: 17px
}

.integrity-card {
    border-radius: 30px;
    padding: 30px;
    transition: 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start
}

.integrity-card:hover {
    transform: translateY(-8px)
}

.integrity-card img {
    width: 100%;
    border-radius: 16px;
    margin-bottom: 20px
}

.integrity-card h6 {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 20px;
    min-height: 90px
}

.integrity-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s ease
}

.bg-purple {
    background: #f0ecfb99
}

.bg-beige {
    background: #fffbef
}

.bg-blue {
    background: #eefaff
}

.bg-pink {
    background: #fef5f0
}

.btn-purple {
    border: 1px solid #6346aa;
    color: #6346aa
}

.btn-purple:hover {
    background: #7c5cff;
    color: #fff
}

.btn-yellow {
    border: 1px solid #e6a400;
    color: #e6a400
}

.btn-yellow:hover {
    background: #e6a400;
    color: #fff
}

.btn-blue {
    border: 1px solid #2a9bcf;
    color: #4d96b5
}

.btn-blue:hover {
    background: #2a9bcf;
    color: #fff
}

.btn-orange {
    border: 1px solid #ea7433;
    color: #ea7433
}

.btn-orange:hover {
    background: #ff7a30;
    color: #fff
}

.dept-card {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    padding: 50px 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 34px;
    transition: 0.3s ease;
    background: #5968b7 0% 0% no-repeat padding-box
}

.institution-block {
    background: transparent;
    padding: 80px 0
}

.institution-block .profile-visual {
    overflow: hidden;
    margin: 0 auto
}

.institution-block .profile-visual img {
    width: 100%;
    height: auto;
    display: block
}

.content-panel {
    background: #f7f8f8;
    padding: 61px 50px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px
}

.ai-block {
    background-color: #f5eee9d9;
    padding: 80px 0 0
}

.ai-text {
    margin-top: 30px;
    font-size: 20px;
    color: #2f365f;
    max-width: 651px;
    line-height: 1.7
}

.ai-image-box::before {
    content: "";
    position: absolute;
    width: 433px;
    height: 433px;
    background: #f2b680;
    border-radius: 50%;
    top: 50%;
    right: -1px;
    transform: translateY(-50%);
    z-index: 0
}

.dbx-section .dbx-heading {
    font-size: 51px;
    font-weight: 800;
    letter-spacing: 2px;
    word-spacing: 5px
}

.rn-section .rn-card h5 {
    margin-top: 27px;
    font-weight: 600;
    color: #2e345d;
    line-height: 1.6;
    font-size: 19px;
    text-align: center
}

.rn-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1)
}

.rn-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #fff
}

.rn-orange {
    background: #ffa530
}

.rn-blue {
    background: #3b82f6
}

.rn-green {
    background: #84cc16
}

.rn-purple {
    background: #a855f7
}

@media (max-width: 768px) {
    .rn-title {
        font-size: 32px
    }

    .rn-card {
        width: 220px;
        height: 220px;
        margin: 0 auto
    }
}

.ev-section {
    background: transparent linear-gradient(180deg, #2f42a5 0%, #11206c 100%) 0% 0% no-repeat padding-box;
    padding: 55px 0
}

.ev-tabs .nav-link {
    color: #ffffffbf;
    background: transparent;
    border: none;
    font-weight: 500;
    margin-right: 25px;
    position: relative;
    font-size: 22px;
    letter-spacing: 1px
}

.ev-tabs .nav-link.active {
    color: #ffffff
}

.ev-carousel .carousel-control-prev {
    left: -20px;
    top: 50%;
    width: 40px;
    height: 40px
}

.ev-carousel .carousel-control-next {
    right: -20px;
    top: 50%;
    width: 40px;
    height: 40px
}

.ev-carousel .carousel-control-prev, .carousel-control-next {
    background: #2f42a5;
    border-radius: 50%;
    border: 1px solid #e5e8ef;
    opacity: 1
}

.ev-carousel .carousel-control-prev i, .ev-carousel .carousel-control-next i {
    font-size: 20px;
    background: #2f42a5;
    color: #fff;
    padding: 7px 12px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    display: none
}

.ev-section .nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    gap: 20px;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.ev-section .nav::-webkit-scrollbar {
    display: none
}

.ev-section .nav::-webkit-scrollbar {
    height: 6px
}

.ev-section .nav::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px
}

@media (max-width: 991px) {
    .ev-carousel .carousel-control-prev {
        left: 10px
    }

    .ev-carousel .carousel-control-next {
        right: 10px
    }
}

.ev2-title {
    font-size: 48px;
    font-weight: 700;
    color: #fff
}

.ev2-text {
    color: #ffffff;
    line-height: 1.7;
    font-size: 17px
}

.ev2-btn {
    border: 1px solid #fff;
    padding: 12px 22px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    font-size: 18px;
    font-weight: 500
}

.ev2-btn:hover {
    background: #fff;
    color: #2f3e96
}

.follow-section {
    background: #f5eee9;
    padding: 48px 0
}

.follow-title {
    font-size: 48px;
    font-weight: 800;
    color: #2e345b
}

.follow-text {
    color: #2e345d;
    margin-top: 10px;
    font-size: 18px
}

.follow-btn {
    border: 2px solid #2e345d;
    padding: 13px 19px;
    color: #2e345b;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s
}

.follow-btn:hover {
    background: #2e345b;
    color: #fff
}

@media (max-width: 768px) {
    .follow-title {
        font-size: 32px
    }
}

.updates-wrapper {
    padding: 60px 0
}

.updates-heading {
    font-size: 48px;
    font-weight: 800;
    color: #1e2a5a
}

.updates-heading span {
    color: #919191;
    font-weight: 800
}

.updates-text {
    font-size: 17px;
    color: #2e345d;
    max-width: 692px;
    margin-top: 15px
}

.updates-btn {
    border: 1px solid #1e2a5a;
    padding: 12px 28px;
    background: transparent;
    color: #1e2a5a;
    font-weight: 500;
    transition: 0.3s;
    text-decoration: none
}

.updates-btn:hover {
    background: #1e2a5a;
    color: #fff
}

.info-card {
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 30px #014efe2e;
    border: 0.5px solid #014efe2e;
    border-radius: 20px;
    padding: 35px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: 0.3s
}

.info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1)
}

.inffo-icon {
    width: 55px;
    height: 55px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #2c3fa0
}

.inffo-title {
    font-weight: 800;
    color: #020b50;
    margin: 0;
    font-size: 22px
}

@media (max-width: 768px) {
    .updates-heading {
        font-size: 34px
    }
}

.ri-title {
    font-size: 48px;
    font-weight: 900;
    color: #2e345d
}

.ri-title span {
    color: #919191
}

.ri-subtitle {
    color: #2e345d;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: 500
}

.ri-list {
    display: flex;
    flex-direction: column;
    gap: 17px
}

.ri-item {
    display: flex;
    align-items: center;
    background: #f3e7dc;
    padding: 20px 18px;
    border-radius: 0px;
    background: transparent linear-gradient(90deg, #fff4e6 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.ri-num {
    font-weight: 600;
    margin-right: 19px;
    color: #9191919c;
    font-size: 21px
}

.ri-text {
    margin: 0;
    color: #2e345d;
    font-size: 18px;
    font-weight: 500
}

.ri-desc {
    color: #2e345d;
    max-width: 714px;
    margin-bottom: 15px;
    font-size: 16px;
    text-align: justify
}

.ri-btn {
    margin-bottom: 30px;
    padding: 10px 20px
}

.ri-images {
    position: relative;
    display: flex;
    justify-content: space-around
}

.ri-images img {
    width: 80%
}

.ri-img-main {
    border-radius: 30px;
    width: 85%
}

.ri-img-small {
    position: absolute;
    bottom: -40px;
    right: 0;
    width: 220px;
    border-radius: 22px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15)
}

.volume-wrapper {
    background: #f8fbfe 0% 0% no-repeat padding-box
}

.volume-image-box {
    position: relative
}

.volume-main-img {
    object-fit: cover;
    border: 8px solid #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1)
}

.shape-dot {
    position: absolute;
    border-radius: 50%
}

.shape-yellow {
    width: 70px;
    height: 70px;
    background: #fdda9a;
    top: 10px;
    right: 65px
}

.shape-purple {
    width: 92px;
    height: 92px;
    background: #adb6f7;
    bottom: 37px;
    left: 19px
}

.volume-heading {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d;
    letter-spacing: 1px;
    word-spacing: 4px
}

.highlight-word {
    color: #919191
}

.volume-subheading {
    margin-top: 24px;
    font-weight: 600;
    color: #2e345d;
    margin-bottom: 22px
}

.volume-text {
    margin-top: 10px;
    color: #2e345d;
    max-width: 699px;
    font-size: 18px
}

.volume-btn {
    margin-top: 20px;
    padding: 12px 24px;
    border: 1px solid #2f3a6f;
    background: #ffffff;
    color: #2f3a6f;
    font-weight: 600;
    transition: 0.3s
}

.volume-btn:hover {
    background: #2f3a6f;
    color: #ffffff
}

.trust-banner-area {
    background: #f5eee9;
    padding: 70px 0
}

.trust-main-title {
    font-size: 38px;
    font-weight: 800;
    color: #2e345d;
    margin-bottom: 30px
}

.trust-btn-box {
    display: flex;
    justify-content: center
}

.trust-demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 2px solid #2e345da1;
    color: #2e345d;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    transition: 0.3s
}

.trust-demo-btn:hover {
    background: #4a5b8c;
    color: #fff
}

.btn-arrow-icon {
    font-size: 18px
}

.auth-section {
    padding: 80px 0 0;
    color: #fff;
    position: relative;
    background: transparent linear-gradient(180deg, #2f42a5 0%, #11206c 100%) 0% 0% no-repeat padding-box
}

.auth-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff
}

.explore-btn {
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 15px 15px;
    text-decoration: none;
    color: #fff;
    border-radius: 0px;
    font-size: 18px;
    transition: 0.3s
}

.explore-btn:hover {
    background: #fff;
    color: #1d2e7a
}

.auth-image-box {
    border-radius: inherit;
    padding: 0;
    overflow: hidden;
    max-width: 100%;
    position: relative;
    top: 49px
}

.auth-image-box img {
    width: 100%;
    display: block
}

.verify-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff
}

.verify-text {
    font-size: 18px;
    color: #fff;
    line-height: 34px;
    margin-top: 30px
}

@media (max-width: 991px) {
    .auth-image-box {
        border-radius: inherit;
        padding: 0;
        overflow: hidden;
        max-width: 100%;
        position: relative;
        top: -20px
    }

    .auth-content {
        margin-top: 60px
    }

    .verify-title {
        font-size: 21px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #fff
    }

    .ri-section {
        padding-top: 0px !important
    }

    .ri-list {
        margin-bottom: 30px
    }

    .volume-main-img {
        margin-bottom: 42px
    }

    .rn-card br {
        display: block
    }

    .ev2-btn {
        margin-bottom: 26px
    }
}

.edu-heading {
    font-size: 48px;
    color: #2e345d;
    font-weight: 800;
    letter-spacing: 2px;
    word-spacing: 7px
}

.edu-heading span {
    color: #919191
}

.edu-desc {
    font-size: 18px;
    color: #2e345d;
    font-weight: 400
}

.copy-detect-area {
    background: transparent linear-gradient(180deg, #2f42a5 0%, #11206c 100%) 0% 0% no-repeat padding-box;
    padding: 60px 0;
    color: #fff
}

.copy-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #fff;
    letter-spacing: 2px
}

.copy-desc {
    color: #ffffff;
    max-width: 559px;
    margin-bottom: 32px;
    line-height: 32px
}

.explore-btns {
    border: 2px solid #fff;
    color: #fff;
    padding: 12px 16px;
    font-weight: 500;
    border-radius: 0px;
    transition: 0.3s
}

.explore-btns:hover {
    background: #fff;
    color: #2f3f93
}

.features-row {
    margin-top: 60px
}

.detect-feature {
    background: #fff;
    color: #222e34;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 21px;
    height: 100%
}

.features-icon {
    width: 58px;
    height: 58px;
    background: #2f3f93;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 26px;
    font-weight: 800;
    min-width: 60px;
    min-height: 60px
}

.features-icon i {
    font-size: 30px
}

.detect-feature p {
    margin-bottom: 0px;
    font-weight: 800;
    font-size: 18px
}

.offers {
    font-size: 22px;
    font-weight: 700
}

.ai-check-wrapper {
    background: #ffffff;
    padding: 80px 0
}

.ai-check-heading {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: 20px;
    letter-spacing: 2px
}

.heading-dark {
    color: #2e3557
}

.heading-light {
    color: #919191
}

.ai-check-text {
    font-size: 18px;
    color: #555;
    max-width: 520px;
    margin-bottom: 30px
}

.ai-check-button {
    border: 2px solid #2e345d;
    color: #2e3557;
    padding: 14px 17px;
    font-weight: 600;
    border-radius: 0px;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block
}

.ai-check-button:hover {
    background: #2e3557;
    color: #fff
}

.ai-check-image img {
    max-width: 100%
}

.assign-manage-area {
    padding: 80px 0;
    background: #e8f4ff
}

.assign-title {
    font-size: 48px;
    font-weight: 700;
    color: #2d3559;
    line-height: 1.3
}

.assign-text {
    font-size: 18px;
    color: #2e345d;
    max-width: initial
}

.assign-card-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden
}

.assign-img {
    border-radius: 20px
}

.assign-overlay {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #3343a6, #283593);
    color: #fff;
    padding: 32px;
    width: 352px;
    border-radius: 0px
}

.assign-overlay h5 {
    font-weight: 800;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 20px
}

.assign-overlay p {
    font-size: 14px;
    margin-bottom: 19px
}

.assign-btn {
    border: 1px solid #fff;
    padding: 9px 23px;
    color: #fff;
    text-decoration: none;
    border-radius: 0px;
    font-size: 14px;
    display: inline-block;
    font-weight: 500
}

.assign-btn:hover {
    background: #fff;
    color: #283593
}

.writing-insight-section {
    padding: 63px 0
}

.writing-left-img img {
    border-radius: 20px
}

.writing-main-title {
    font-size: 51px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 29px;
    letter-spacing: 2px;
    word-spacing: 4px
}

.title-dark {
    color: #2f3559
}

.title-light {
    color: #919191
}

.writing-desc {
    color: #2e345d;
    font-size: 18px;
    margin-bottom: 30px
}

.writing-points {
    display: flex;
    flex-direction: column;
    gap: 29px
}

.point-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 18px
}

.point-number {
    font-size: 28px;
    font-weight: 500;
    color: #21348f;
    min-width: 29px
}

.point-text {
    font-size: 21px;
    color: #2e345d;
    font-weight: 800
}

.video-preview-box {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    margin-bottom: 25px
}

.video-preview-box img {
    border-radius: 25px;
    width: 100%
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 38%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #2f3f93;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2)
}

.writing-btn {
    border: 1.6px solid #2e345d;
    padding: 12px 15px;
    color: #2f3559;
    font-weight: 600;
    text-decoration: none;
    border-radius: 1px;
    display: inline-block;
    transition: 0.3s;
    margin-top: 12px
}

.writing-btn:hover {
    background: #2f3559;
    color: #fff
}

@media (min-width: 834px) and (max-width: 1194px) {
    .navbar-light .navbar-nav .nav-link {
        position: relative;
        margin-right: 14px;
        padding: 24px 0;
        color: var(--bs-white);
        font-size: 14px;
        font-weight: 400;
        outline: none
    }

    .navbar .gap-4 {
        gap: 0.5rem !important
    }

    .navbar .ps-5 {
        padding-left: 0rem !important
    }

    .navbar .dropdown-toggle::after {
        border: none;
        content: "\F282";
        font-family: "bootstrap-icons";
        vertical-align: middle;
        margin-left: 0px;
        font-size: 11px;
        font-weight: 700
    }

    .navbar .ms-5 {
        margin-left: 1rem !important
    }

    .drive-quote p {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 17px
    }

    .drive-quote {
        background: #2e345d;
        color: #fff;
        padding: 46px 28px;
        border-radius: 30px;
        line-height: 1.8;
        font-size: 16px;
        display: flex;
        align-items: center
    }

    .arrow-btn {
        position: absolute;
        right: 15px;
        top: 84%;
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #1c2340;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s
    }

    .hero-academic h1 {
        font-size: 34px;
        font-weight: 800;
        color: #2e345d;
        line-height: 1.3;
        letter-spacing: 1px
    }

    .challenge-box-icon {
        width: 26px;
        height: 46px;
        min-width: 45px;
        min-height: 45px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 19px
    }

    .integrity-description {
        color: #2e345d;
        font-size: 14px
    }

    .integrity-title {
        font-size: 30px;
        font-weight: 800;
        color: #2f3c64;
        line-height: 1.3;
        letter-spacing: 2px
    }

    .integrity-card {
        border-radius: 30px;
        padding: 18px;
        transition: 0.3s ease;
        height: 100%
    }

    .dept-card {
        background: rgba(255, 255, 255, 0.12);
        border-radius: 22px;
        padding: 23px 12px;
        display: flex
    }

    .dept-badge {
        width: 105px;
        height: 73px
    }

    .Platform {
        font-size: 34px;
        font-weight: 800;
        letter-spacing: 1px
    }

    .inst-heading {
        font-size: 34px;
        font-weight: 700;
        line-height: 1.5;
        color: #ffffff;
        letter-spacing: 2px
    }

    .inst-description {
        opacity: 88%;
        font-size: 18px;
        color: #ffffff;
        margin-top: 19px;
        margin-bottom: 2px;
        max-width: 622px
    }

    .panel-heading {
        font-size: 34px;
        font-weight: 800;
        color: #2f365f
    }

    .panel-description {
        margin-top: 20px;
        color: #2e345d;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 400
    }

    .feature-label {
        font-size: 14px;
        font-weight: 700;
        color: #333
    }

    .ai-title {
        font-size: 34px;
        font-weight: 700;
        line-height: 1.2;
        color: #2f365f
    }

    .ai-text {
        margin-top: 30px;
        font-size: 14px;
        color: #2f365f;
        max-width: 463px;
        line-height: 1.7
    }

    .ai-image-box::before {
        content: "";
        position: absolute;
        width: 401px;
        height: 394px
    }

    h1, .h1 {
        font-size: 34px !important
    }

    h2, .h2 {
        font-size: 34px !important;
        color: #2e345d;
        font-weight: 900
    }

    .workflow-card {
        background: #e7f3ff 0% 0% no-repeat padding-box;
        border-radius: 20px;
        padding: 7px
    }

    .workflow-card p {
        font-size: 14px;
        color: #2e345d
    }

    .custom-btn {
        padding: 9px 22px;
        border-radius: 0;
        font-weight: 550;
        color: #2e345d;
        border: 2px solid #2e345da8;
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: color 0.4s ease
    }

    h3, .h3 {
        font-size: 30px !important
    }

    .spot-overlay p {
        margin-top: 0;
        margin-bottom: 0rem;
        font-size: 14px
    }

    .spot-logo img {
        height: 24px
    }

    .info-title {
        font-weight: 700;
        margin-bottom: 5px;
        font-size: 19px;
        letter-spacing: 0.2px;
        color: #2a292c
    }

    .cert-item .h6 {
        font-weight: 700;
        margin-bottom: 10px;
        font-size: 17px
    }

    .cert-item p {
        font-size: 14px;
        color: #706b6c;
        margin: 0;
        font-weight: 500
    }

    .header-banner {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 383px;
        height: 54vh;
        width: 100%
    }

    .btn.btn-primary {
        color: var(--bs-white);
        border: none;
        border-radius: 19px !important;
        font-size: 15px;
        font-weight: 500;
        padding: 7px 8px !important
    }

    .hero-btn {
        align-items: center;
        padding: 9px 22px;
        border-radius: 50px;
        font-size: 15px;
        font-weight: 450;
        text-decoration: none;
        letter-spacing: 0.3px;
        transition: all 0.3s ease;
        box-sizing: border-box
    }

    .description {
        color: #040135;
        font-size: 15px;
        line-height: 1.9;
        text-align: left
    }
}

.thinking-section {
    padding: 0px 0;
    background: #f6f6f7
}

.thinking-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px
}

.thinking-content {
    padding: 40px
}

.thinking-title {
    font-size: 48px;
    font-weight: 700;
    color: #2e345d;
    line-height: 1.3;
    margin-bottom: 20px;
    letter-spacing: 1px
}

.thinking-title span {
    color: #919191;
    font-weight: 800
}

.thinking-text {
    color: #2e345d;
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 666px
}

.thinking-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border: 2px solid #2e345d;
    background: transparent;
    font-weight: 600;
    color: #2e345d;
    font-size: 16px;
    text-decoration: none;
    transition: 0.3s
}

.thinking-btn:hover {
    background: #2c3553;
    color: #fff;
    border-color: #2c3553
}

.thinking-btn span {
    font-size: 18px
}

@media (max-width: 991px) {
    .thinking-title {
        font-size: 32px
    }

    .thinking-content {
        padding: 30px 15px
    }
}

.content-zone {
    padding: 55px 0 0
}

.zone-heading {
    font-size: 48px;
    font-weight: 800;
    color: #2c3553;
    line-height: 1.3
}

.zone-heading span {
    color: #919191
}

.zone-btn {
    border: 2px solid #9aa0a6;
    padding: 10px 20px;
    font-weight: 600;
    color: #2c3553;
    text-decoration: none
}

.zone-btn:hover {
    background: #2c3553;
    color: #fff
}

.zone-tabs {
    border-bottom: 0px solid #ddd;
    margin-top: 30px
}

.zone-tabs .nav-link {
    color: #2e345d;
    font-weight: 600;
    padding: 15px 65px;
    border: none;
    background: transparent;
    font-size: 24px
}

.zone-tabs .nav-link.active {
    border-radius: 0;
    background: #fff4e6 0% 0% no-repeat padding-box
}

.zone-box {
    background: transparent linear-gradient(180deg, #fff4e6 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    padding: 30px 38px
}

.zone-subtitle {
    font-size: 26px;
    font-weight: 800;
    color: #2e345d;
    margin-bottom: 20px;
    line-height: 40px
}

.zone-text {
    color: #2e345d;
    font-size: 18px;
    line-height: 1.7;
    max-width: 734px
}

.zone-image img {
    width: 100%
}

.pw-section {
    background: #2f42a5;
    padding: 60px 0
}

.pw-heading {
    color: #fff;
    text-align: center;
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 45px;
    letter-spacing: 1px
}

.pw-media-box {
    position: relative;
    border-radius: 18px;
    overflow: hidden
}

.pw-image {
    width: 100%;
    display: block
}

.pw-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #333;
    cursor: pointer
}

.offer-section {
    background: transparent;
    padding: 40px 0
}

.offer-heading {
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    color: #2e345d;
    letter-spacing: 1px
}

.offer-heading span {
    color: #919191
}

.offer-card {
    background: #f0f1f5;
    padding: 40px 35px 10px;
    border-radius: 20px;
    transition: 0.3s ease;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.offer-card h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    transition: 0.3s
}

.offer-card:hover {
    background: #3346a6;
    color: #fff
}

.offer-card:hover h4, .offer-card:hover p {
    color: #fff
}

.offer-card h4 {
    font-size: 26px;
    font-weight: 680;
    margin-bottom: 27px;
    color: #222e34
}

.offer-card p {
    font-size: 16px;
    color: #2e345d;
    line-height: 1.6;
    font-weight: 400
}

.offer-highlight p {
    color: #e0e0e0
}

.offer-tall {
    height: 100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.integration-area {
    padding: 90px 0;
    background: #f7f8fc;
    position: relative
}

.integration-heading {
    font-size: 38px;
    font-weight: 700;
    color: #2f3552;
    margin-bottom: 20px
}

.integration-heading span {
    color: #2f3552
}

.integration-text {
    color: #6c757d;
    max-width: 420px
}

.integration-area::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 420px;
    height: 420px;
    background: #e8edf7;
    border-radius: 50%;
    transform: translateY(-50%)
}

@media (max-width: 991px) {
    .zone-tabs .nav-link {
        color: #2e345d;
        font-weight: 600;
        padding: 15px 17px;
        border: none;
        background: transparent;
        font-size: 24px
    }
}

.detect-hero-section {
    padding: 22px 0
}

.detect-title {
    font-size: 48px;
    font-weight: 700;
    color: #2e345d;
    line-height: 1.3;
    letter-spacing: 1.6px;
    word-spacing: 6px;
    margin-bottom: 37px
}

.detect-title span {
    color: #8a8a8a
}

.detect-desc {
    margin-top: 20px;
    color: #2e345d;
    max-width: 542px;
    font-size: 16px
}

.detect-btn {
    display: inline-block;
    margin-top: 25px;
    border: 2px solid #2b2f55;
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    color: #2b2f55;
    font-weight: 500;
    transition: 0.3s
}

.detect-btn:hover {
    background: #2b2f55;
    color: white
}

.detect-visual {
    position: relative;
    height: 420px
}

.circle-big img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.curve-line {
    position: absolute;
    top: 40px;
    right: 30px;
    width: 220px;
    height: 260px
}

.badge-ai {
    position: absolute;
    top: 50px;
    left: 196px;
    padding: 8px 20px;
    font-size: 14px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 25px #00000029;
    border-radius: 23px
}

.dot-yellow {
    width: 14px;
    height: 14px;
    background: #f4c169;
    border-radius: 50%;
    position: absolute;
    bottom: 110px;
    right: 200px
}

.badge-ai, .badge-sim {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 7px 37px 7px 12px;
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    font-size: 15px;
    position: absolute;
    color: #202c32;
    font-weight: 500
}

.badge-icon {
    width: 34px;
    height: 34px;
    background: #4a63d8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px
}

.badge-ai {
    top: 62px;
    left: 225px
}

.badge-sim {
    bottom: 72px;
    left: -57px
}

.challenge-area {
    background: #edfdfa;
    padding: 60px 0
}

.challenge-title {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d;
    line-height: 1.2;
    letter-spacing: 1px
}

.challenge-title span {
    color: #919191;
    font-weight: 800
}

.challenge-desc {
    margin-top: 20px;
    color: #2e345d;
    line-height: 1.8;
    max-width: 637px;
    font-size: 16px
}

.challenge-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #2f3556;
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    color: #2f3556;
    font-weight: 600;
    margin-top: 25px;
    transition: 0.3s
}

.challenge-btn:hover {
    background: #2f3556;
    color: #fff
}

.arrow-icon {
    font-size: 18px
}

.signal-heading {
    font-size: 48px;
    font-weight: 700;
    color: #2e345d;
    margin-bottom: 30px
}

.signal-heading span {
    color: #2d3559
}

.signal-card {
    background: #f0f7ff;
    padding: 83px;
    border-radius: 0px;
    max-width: 917px
}

.signal-card p {
    color: #2e345d;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 17px;
    max-width: 739px
}

.signal-btn {
    font-weight: 600;
    color: #2f42a5;
    font-size: 18px
}

.btn-arrow {
    background: #4a63d8;
    color: white;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.signal-image-area {
    position: relative;
    height: 100%
}

.signal-image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.top-circle {
    width: 110px;
    height: 110px;
    background: #8e9bdc;
    border-radius: 50%;
    position: absolute;
    top: -30px;
    left: -40px;
    opacity: 0.8
}

.signal-heading span {
    color: #919191
}

.bottom-circle {
    width: 120px;
    height: 120px;
    background: #f9d798;
    border-radius: 50%;
    position: absolute;
    bottom: 0px;
    right: -52px
}

.ai-detect-block {
    padding: 0px 0 50px
}

.detect-img-wrap {
    position: relative;
    width: 100%;
    max-width: 420px
}

.detect-img-main {
    border-radius: 30px;
    overflow: hidden
}

.detect-img-main img {
    width: 100%;
    height: auto;
    display: block
}

.detect-img-small {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15)
}

.detect-img-small img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.detect-text {
    color: #5f6575;
    line-height: 1.6;
    margin-bottom: 15px
}

.detect-content-box .detect-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    background: white;
    border-radius: 30px;
    text-decoration: none;
    color: #2e3558;
    font-weight: 600;
    box-shadow: none;
    margin-top: 15px;
    border: none
}

.similarity-section {
    padding: 60px 0;
    background: #E8EAFC
}

.similarity-title {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d;
    line-height: 1.3;
    margin-bottom: 29px;
    letter-spacing: 2px
}

.similarity-text {
    color: #2e345d;
    line-height: 1.8;
    max-width: 615px;
    margin-bottom: 27px;
    font-size: 16px
}

.similarity-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #2d3559;
    padding: 12px 26px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    color: #2d3559;
    transition: 0.3s
}

.similarity-btn:hover {
    background: #2d3559;
    color: white
}

.similarity-arrow {
    font-size: 18px
}

.similarity-image-box {
    position: relative;
    padding: 21px
}

.similarity-circle {
    background: white;
    border: 2px dashed #b8c2f3;
    padding: 28px;
    border-radius: 50%
}

.similarity-circle img {
    width: 300px;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
}

.circle-purple {
    width: 91px;
    height: 91px;
    background: #9ea6e8;
    border-radius: 50%;
    position: absolute;
    top: 29px;
    left: 45px
}

.circle-yellow {
    width: 40px;
    height: 40px;
    background: #fdda9a;
    border-radius: 50%;
    position: absolute;
    bottom: 47px;
    right: 97px
}

.build h5 {
    font-size: 36px;
    color: #2e345d;
    font-weight: 800
}

.dot-pattern {
    position: absolute;
    left: 184px;
    bottom: 0px;
    width: 362px;
    height: 126px;
    background-image: radial-gradient(#cfd6e3 2px, transparent 2px);
    background-size: 14px 14px
}

.ms-section {
    background: #ffffff;
    padding: 0;
    position: relative;
    overflow: hidden
}

.ms-section {
    position: relative
}

.ms-section::before {
    content: "";
    position: absolute;
    left: -154px;
    top: 46%;
    transform: translateY(-50%);
    width: 223px;
    height: 204px;
    background-image: url('/user/img/Subtraction78.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.ms-heading {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d;
    line-height: 1.2;
    letter-spacing: 2px;
    word-spacing: 5px
}

.ms-dark {
    color: #919191;
    font-weight: 800
}

.ms-desc {
    margin-top: 20px;
    font-size: 17px;
    color: #2e345d;
    max-width: 520px;
    letter-spacing: 0px;
    line-height: 1.7
}

.ms-buttons {
    margin-top: 30px;
    display: flex;
    gap: 20px
}

.ms-btn-primary {
    background: #2f42a5;
    color: #fff;
    padding: 12px 26px;
    border-radius: 0px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease
}

.ms-btn-primary:hover {
    background: #1f2f85;
    color: #fff
}

.hero-text-1 {
    max-width: 713px;
    font-size: 18px;
    color: #2e345d;
    font-weight: 400;
    line-height: 1.7
}

.ms-btn-outline {
    border: 2px solid #2e345d;
    padding: 12px 26px;
    border-radius: 0px;
    color: #2e345d;
    font-size: 16px;
    font-weight: 800;
    transition: all 0.3s ease
}

.ms-btn-outline:hover {
    background: #2e345d;
    color: #fff
}

.ms-right {
    position: relative;
    text-align: right
}

.ms-img {
    max-width: 100%;
    border-radius: 0px
}

.ms-circle {
    width: 120px;
    height: 120px;
    background: #8f98d8;
    border-radius: 50%;
    position: absolute;
    left: -60px;
    bottom: 60px
}

.ms-section .ps-5 {
    padding-left: 5rem !important
}

.ms-ai-section {
    padding: 0px 0
}

.ms-ai-box {
    padding: 5px;
    background: transparent linear-gradient(90deg, #ffffff 0%, #e8f3ff 100%) 0% 0% no-repeat padding-box
}

.ms-ai-title {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d;
    margin-bottom: 20px;
    letter-spacing: 1px;
    word-spacing: 6px
}

.ms-ai-text {
    font-size: 17px;
    color: #2e345d;
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 737px
}

.ms-ai-btn {
    display: inline-block;
    border: 2px solid #2f3a5c;
    padding: 12px 28px;
    text-decoration: none;
    color: #2f3a5c;
    font-weight: 600;
    transition: 0.3s
}

.ms-ai-btn:hover {
    background: #2f3a5c;
    color: #fff
}

.ms-ai-image {
    overflow: hidden;
    margin: auto
}

.ms-ai-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.td-section {
    background: #ffffff;
    padding: 60px 0
}

.td-heading {
    letter-spacing: 1px;
    font-size: 48px;
    font-weight: 800;
    color: #919191;
    line-height: 1.5
}

.td-blue {
    color: #2e345d;
    font-weight: 800
}

.td-text {
    margin-top: 17px;
    color: #5f6b7a;
    font-size: 16px;
    max-width: 612px;
    line-height: 28px
}

.td-btn {
    margin-top: 25px;
    border: 1px solid #7d86a6;
    padding: 12px 24px;
    color: #2f3d75
}

.td-right {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.td-card {
    background: #fff;
    padding: 26px 22px;
    border-radius: 10px;
    font-weight: 700;
    position: relative;
    font-size: 20px;
    color: #222e34
}

.td-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 6px;
    border-radius: 8px
}

.td-orange::before {
    background: #ffa530
}

.td-bluebar::before {
    background: #4fa1f3
}

.td-purple::before {
    background: #b874e4
}

.td-green::before {
    background: #8bce65
}

.td-orange {
    background: transparent linear-gradient(270deg, #ffffff 0%, #fff5e8 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px
}

.td-bluebar {
    background: transparent linear-gradient(270deg, #ffffff 0%, #e8f4ff 100%) 0% 0% no-repeat padding-box;
    border-radius: 6px
}

.td-purple {
    background: transparent linear-gradient(270deg, #ffffff 0%, #f8ecff 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px
}

.td-green {
    background: transparent linear-gradient(270deg, #ffffff 0%, #f2fbed 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px
}

.api-section {
    background: #fff
}

.api-circle-area {
    height: 400px
}

.api-circle {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    font-weight: 600
}

.circle-orange {
    background: #fff7ec;
    border: 4px solid #ffa530;
    left: -45px;
    top: 13px;
    z-index: 2;
    width: 256px;
    height: 256px
}

.circle-blue {
    background: #eff8ff;
    border: 4px solid #5b9bd5;
    left: 108px;
    top: 20px;
    width: 360px;
    height: 360px
}

.circle-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #ffa530;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 21px;
    font-size: 35px
}

.circle-blue .circle-icon {
    background: #5b9bd5
}

.api-title span {
    color: #919191
}

.api-text {
    color: #2e345d;
    margin: 20px 0;
    line-height: 1.6;
    font-size: 17px
}

.ai-blocks {
    background: url('/user/img/g1.png') no-repeat
}

.api-btn {
    border: 1px solid #bfc7d1;
    padding: 10px 22px;
    border-radius: 4px;
    font-weight: 500;
    color: #2c3e50
}

.builds h2 {
    font-size: 33px;
    color: #2e345d;
    font-weight: 800
}

.api-btn i {
    margin-left: 8px
}

.api-circle p {
    font-size: 22px;
    font-weight: 800;
    color: #222e34
}

.timeline-section {
    padding: 80px 0
}

.timeline-title {
    font-size: 48px;
    font-weight: 800;
    color: #2d3553
}

.timeline-title span {
    color: #8b8f97
}

.timeline-desc {
    max-width: 420px;
    color: #2e345d;
    margin-top: 20px;
    font-size: 16px
}

.timeline-wrapper {
    position: relative;
    margin-top: -87px;
    height: 320px
}

.timeline-curve {
    position: absolute;
    top: -13px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999
}

.timeline-curve path {
    fill: none;
    stroke: #1d4ed8;
    stroke-width: 4
}

.timeline-step {
    position: absolute;
    text-align: center;
    z-index: 2
}

.timeline-dot {
    width: 40px;
    height: 40px;
    background: #dfe3ea;
    border: 13px solid #fff;
    border-radius: 50%;
    margin: auto;
    box-shadow: 0 0px 2px #0000003b
}

.timeline-step h3 {
    font-size: 36px;
    color: #c7ccd6;
    margin-top: 10px
}

.timeline-step p {
    font-weight: 600;
    color: #2d3553
}

.step1 {
    left: 70px;
    top: 210px
}

.step2 {
    left: 340px;
    top: 151px
}

.step3 {
    left: 640px;
    top: 138px
}

.step4 {
    right: 170px;
    top: 30px
}

.timeline-circle {
    position: absolute;
    right: 0;
    top: -107px;
    width: 317px;
    height: 317px;
    background: #eff7ff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1
}

.timeline-circle h2 {
    font-size: 60px;
    color: #c7ccd6
}

.timeline-circle p {
    font-weight: 600;
    color: #2d3553
}

.rn-dark {
    color: #2e345d
}

.rn-light {
    color: #919191
}

.rn-btn {
    display: inline-block;
    border: 1px solid #2e3354;
    padding: 12px 28px;
    color: #2e3354;
    text-decoration: none;
    transition: 0.3s ease
}

.verify-text {
    font-size: 18px;
    color: #fff;
    line-height: 34px;
    margin-top: 30px
}

.zone-tabs {
    border-bottom: 0px solid #ddd;
    margin-top: 30px
}

.zone-tabs .nav-link {
    color: #2e345d;
    font-weight: 600;
    padding: 15px 52px;
    border: none;
    background: transparent;
    font-size: 24px
}

.zone-tabs .nav-link.active {
    border-radius: 0;
    background: #2f42a5;
    color: #fff
}

.zone-box {
    background: #2f42a5;
    padding: 30px 38px
}

.zone-subtitle {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 40px
}

.zone-text {
    color: #fff;
    font-size: 28px;
    line-height: 1.7;
    max-width: 734px
}

.zone-image img {
    width: 100%
}

.pw-section {
    background: #2f42a5;
    padding: 60px 0
}

.pw-heading {
    color: #fff;
    text-align: center;
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 45px;
    letter-spacing: 1px
}

.pw-media-box {
    position: relative;
    border-radius: 18px;
    overflow: hidden
}

.pw-image {
    width: 100%;
    display: block
}

.pw-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #333;
    cursor: pointer
}

.offer-section {
    background: transparent;
    padding: 40px 0
}

.offer-heading {
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    color: #2e345d;
    letter-spacing: 1px
}

.offer-heading span {
    color: #919191
}

.offer-card {
    background: #f0f1f5;
    padding: 40px 35px 10px;
    border-radius: 20px;
    transition: 0.3s ease;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.offer-card h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    transition: 0.3s
}

.offer-card:hover {
    background: #3346a6;
    color: #fff
}

.offer-card:hover h4, .offer-card:hover p {
    color: #fff
}

.offer-card h4 {
    font-size: 26px;
    font-weight: 680;
    margin-bottom: 27px;
    color: #222e34
}

.offer-card p {
    font-size: 16px;
    color: #2e345d;
    line-height: 1.6;
    font-weight: 400
}

.offer-highlight p {
    color: #e0e0e0
}

.offer-tall {
    height: 100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.integration-area {
    padding: 90px 0;
    background: #f7f8fc;
    position: relative
}

.integration-heading {
    font-size: 38px;
    font-weight: 700;
    color: #2f3552;
    margin-bottom: 20px
}

.integration-heading span {
    color: #2f3552
}

.integration-text {
    color: #6c757d;
    max-width: 420px
}

.integration-area::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 420px;
    height: 420px;
    background: #e8edf7;
    border-radius: 50%;
    transform: translateY(-50%)
}

.detect-content-box .detect-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    background: white;
    border-radius: 30px;
    text-decoration: none;
    color: #2e3558;
    font-weight: 600;
    box-shadow: none;
    margin-top: 15px;
    border: none
}

.detect-arrow {
    width: 32px;
    height: 32px;
    background: #2f42a5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px
}

.workflow-title {
    font-size: 44px;
    font-weight: 700;
    color: #2d3555;
    line-height: 1.2
}

.workflow-sub {
    margin-top: 20px;
    color: #5c667a
}

.workflow-btn {
    margin-top: 25px;
    padding: 10px 25px;
    border: 1px solid #2d3555;
    background: white
}

.cards-background {
    padding: 16px 43px 64px;
    border-radius: 40px
}

.cards-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 31px;
    width: 100%
}

.card-box {
    background: white;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #dfe6f1
}

.card-blue {
    background: #3b47a8;
    color: white
}

.card-top {
    margin-top: -40px
}

.card-bottom {
    margin-top: 40px
}

.api-circle-area {
    height: 400px
}

.api-circle {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    font-weight: 600
}

.circle-orange {
    background: #fff7ec;
    border: 4px solid #ffa530;
    left: -45px;
    top: 13px;
    z-index: 2;
    width: 256px;
    height: 256px
}

.circle-blue {
    background: #eff8ff;
    border: 4px solid #5b9bd5;
    left: 108px;
    top: 20px;
    width: 360px;
    height: 360px
}

.circle-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #ffa530;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 21px;
    font-size: 35px
}

.circle-blue .circle-icon {
    background: #5b9bd5
}

.api-title span {
    color: #919191
}

.api-text {
    color: #2e345d;
    margin: 20px 0;
    line-height: 1.6;
    font-size: 17px
}

.ai-blocks {
    background: url('/user/img/g1.png') no-repeat
}

.api-btn {
    border: 1px solid #bfc7d1;
    padding: 10px 22px;
    border-radius: 4px;
    font-weight: 500;
    color: #2c3e50
}

.builds h2 {
    font-size: 33px;
    color: #2e345d;
    font-weight: 800
}

.api-btn i {
    margin-left: 8px
}

.api-circle p {
    font-size: 22px;
    font-weight: 800;
    color: #222e34
}

.timeline-section {
    padding: 80px 0
}

.timelines-wrapper {
    position: relative;
    height: 458px;
    margin-top: -68px
}

.timeline-curve-img {
    position: absolute;
    left: -46px;
    top: -112px;
    width: 100%;
    height: 481px;
    z-index: 1
}

.timelines-step {
    position: absolute;
    text-align: left;
    z-index: 2;
    margin: auto
}

.timelines-dot {
    width: 50px;
    height: 50px;
    background: #d3cccc;
    border: 19px solid #fff;
    border-radius: 50%;
    box-shadow: 0 3px 3px rgb(0 0 0/15%)
}

.timelines-step h3 {
    font-size: 48px;
    color: #bcc2d0d6;
    margin-top: 22px;
    margin-bottom: 20px
}

.timelines-step p {
    font-weight: 800;
    color: #2e345d;
    margin-top: 5px;
    font-size: 24px;
    text-align: left
}

.step1 {
    left: 9%;
    top: 267px
}

.step2 {
    left: 35%;
    top: 178px
}

.step3 {
    left: 62%;
    top: 124px
}

.step4 {
    left: 74%;
    top: -87px
}

.timelines-circle {
    position: absolute;
    right: -80px;
    top: -154px;
    width: 420px;
    height: 420px;
    background: #eef4fa;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: normal;
    text-align: left;
    padding: 87px 79px 0;
    z-index: 0
}

.timelines-circle h2 {
    font-size: 60px;
    color: #bcc2d0b5;
    font-weight: 500
}

.timelines-circle p {
    font-size: 24px;
    font-weight: 600;
    color: #2e345d;
    text-align: justify
}

.workflow-area {
    padding: 80px 0;
    position: relative;
    background: #fff
}

.workflow-title {
    font-size: 48px;
    font-weight: 700;
    color: #2d3555;
    line-height: 1.2
}

.workflow-sub {
    margin-top: 20px;
    font-size: 31px;
    color: #222e34;
    font-weight: 600
}

.workflow-btn {
    margin-top: 25px;
    padding: 12px 30px;
    border: 1px solid #2d3555;
    background: white;
    border-radius: 6px;
    font-weight: 500;
    transition: 0.3s
}

.workflow-btn:hover {
    background: #2d3555;
    color: white
}

.cards-background {
    padding: 40px;
    border-radius: 0px
}

.cards-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 18px;
    align-items: start
}

.card-box {
    background: white;
    padding: 38px;
    border-radius: 18px;
    border: 1px solid #e4e9f2;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
    height: 263px
}

.card-box:hover {
    transform: translateY(-5px)
}

.card-icon {
    width: 55px;
    height: 55px;
    background: #f4f9ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 24px;
    color: #2e41a3
}

.card-blue {
    background: #3b47a8;
    color: white;
    border: none
}

.card-blue .card-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white
}

.card-box h6 {
    font-size: 29px;
    font-weight: 600;
    margin-bottom: 10px
}

.card-box p {
    font-size: 15px;
    color: #6b7385
}

.card-blue p {
    color: #e4e6ff
}

.card-top {
    margin-top: -50px
}

.card-bottom {
    margin-top: -44px
}

.ai-blocks {
    background: url('/user/img/mk.png') no-repeat right center;
    background-size: cover
}

.process-flow {
    display: none
}

@media (max-width: 991px) {
    .timelines-wrapper {
        display: none
    }

    .process-flow {
        display: block;
        margin-top: 40px;
        position: relative;
        padding-left: 45px
    }

    .process-flow::before {
        content: "";
        position: absolute;
        left: 18px;
        top: 0;
        width: 2px;
        height: 100%;
        background: #d9dce8
    }

    .process-step {
        display: flex;
        align-items: flex-start;
        margin-bottom: 35px;
        position: relative
    }

    .process-step-number {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #4f5bd5;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        margin-right: 15px;
        flex-shrink: 0
    }

    .process-step-content h5 {
        font-size: 18px;
        font-weight: 600;
        color: #2d3553;
        margin-bottom: 4px
    }

    .process-step-content p {
        font-size: 14px;
        color: #6c757d;
        margin: 0
    }
}

.dbx-texts {
    font-size: 17px;
    color: #2e345d;
    line-height: 1.8;
    max-width: 670px
}

.mss-btn-primary {
    background: #2f42a5;
    color: #fff;
    padding: 13px 26px;
    border-radius: 0px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease
}

.tm-section {
    background: #f0f2f5;
    border-radius: 6px;
    padding: 50px 40px
}

.tm-hexagon {
    width: 320px;
    height: 300px;
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    overflow: hidden
}

.tm-hexagon img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.tm-circle {
    width: 100px;
    height: 100px;
    background: #9fbad0;
    border-radius: 50%;
    position: absolute;
    left: -30px;
    bottom: 40px;
    border: 8px solid #e9eaed
}

.tm-title {
    font-size: 48px;
    font-weight: 800;
    color: #2b3450;
    line-height: 1.3;
    letter-spacing: 1px
}

.tm-title span {
    color: #919191;
    font-weight: 800
}

.tm-title b {
    color: #2b3450
}

.tm-text {
    color: #040135;
    margin-top: 15px;
    font-size: 16px;
    max-width: 645px
}

.tm-btn {
    margin-top: 20px;
    padding: 10px 22px;
    border: 2px solid #9da5b4;
    background: transparent;
    font-weight: 600;
    color: #2b3450;
    transition: 0.3s
}

.tm-btn:hover {
    background: #2b3450;
    color: white
}

.dc-main-section {
    padding: 60px 0;
    color: #fff;
    background: transparent linear-gradient(180deg, #2f42a5 0%, #1b2b80 100%) 0% 0% no-repeat padding-box
}

.dc-main-title {
    font-size: 34px;
    font-weight: 700
}

.dc-feature-box {
    background: #ffffff;
    border-radius: 30px;
    padding: 25px;
    color: #333;
    min-height: 233px;
    position: relative;
    z-index: 2
}

.dc-icon {
    font-size: 37px;
    color: #6b7ab8;
    margin-bottom: 18px
}

.dc-feature-box h5 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #2e345d
}

.dc-feature-box p {
    font-size: 15px;
    color: #040135;
    margin: 0;
    line-height: 26px
}

.dc-image-wrapper {
    border-radius: 20px;
    overflow: hidden
}

.dc-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.dc-line-horizontal {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 6px;
    transform: translateY(-50%);
    z-index: 1
}

.dc-line-vertical {
    position: absolute;
    left: 50%;
    top: 0;
    width: 6px;
    height: 100%;
    transform: translateX(-50%);
    z-index: 1
}

.dc-middle-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 105px;
    height: 105px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    border: 29px solid #394aa2
}

.wf-section {
    position: relative;
    overflow: hidden;
    padding: 55px 0 14px !important
}

.wf-heading {
    font-size: 48px;
    font-weight: 800;
    color: #919191;
    margin-bottom: 78px
}

.wf-heading span, .wf-heading b {
    color: #2e345d
}

.wf-wave {
    position: absolute;
    top: 143px;
    left: 0;
    width: 100%;
    height: 562px;
    background: url('/user/img/161.png') center/cover no-repeat;
    z-index: 1
}

.wf-users {
    position: relative;
    z-index: 2;
    margin-top: 140px
}

.wf-card {
    text-align: center;
    max-width: 232px;
    margin: auto
}

.wf-img {
    width: 144px;
    height: 144px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px
}

.wf-card h6 {
    font-weight: 800;
    color: #40445a;
    margin-bottom: 5px;
    font-size: 24px
}

.wf-card p {
    font-size: 16px;
    color: #040135;
    line-height: 1.4
}

.wf-card-up {
    transform: translateY(-119px)
}

.wf-card-1 {
    transform: translateY(-68px)
}

.wf-card-down {
    transform: translateY(20px)
}

@media (max-width: 768px) {
    .wf-wave {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('/user/img/161.png') center/cover no-repeat;
        z-index: 1
    }

    .wf-card-up {
        transform: translateY(0px)
    }

    .wf-section {
        position: relative;
        overflow: hidden;
        padding: 55px 0 48px !important
    }

    .wf-card-1 {
        transform: translateY(32px)
    }

    .dc-image-wrapper img {
        object-fit: cover;
        margin-top: 21px
    }

    .wf-users {
        position: relative;
        z-index: 2;
        margin-top: 0
    }

    .cards-grid {
        display: grid;
        grid-template-columns:repeat(1, 1fr);
        gap: 66px;
        align-items: start
    }

    .bottom-circle {
        right: 0
    }

    .top-circle {
        width: 110px;
        height: 110px;
        background: #8e9bdc;
        border-radius: 50%;
        position: absolute;
        top: -1px;
        left: 0;
        opacity: 0.8
    }

    .ai-blocks {
        padding: 37px 0;
        background: aliceblue;
        background-size: cover
    }

    .badge-sim {
        bottom: 72px;
        left: 0
    }
}

.integrity-section {
    background: transparent linear-gradient(180deg, #2f42a5 0%, #1b2b80 100%) 0% 0% no-repeat padding-box
}

.integrity-text-1 {
    color: #040135;
    font-size: 16px;
    margin-bottom: 20px
}

.integrity-btn {
    border: 1px solid #bfc5d2;
    padding: 12px 20px;
    border-radius: 4px;
    color: #1f2b4d;
    font-weight: 500
}

.integrity-btn i {
    margin-left: 10px
}

.integrity-cards {
    border-radius: 25px;
    overflow: hidden
}

.integrity-cards img {
    width: 100%;
    height: auto;
    object-fit: cover
}

.integrity-section h5 {
    font-size: 28px;
    font-weight: 800;
    color: #2e345d
}

.insight-section {
    background: #f3f4f6
}

.insight-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 35px;
    letter-spacing: 2px
}

.insight-title .dark {
    color: #1e2a4a
}

.insight-title .light {
    color: #919191
}

.insight-text {
    font-size: 16px;
    color: #040135;
    max-width: 632px;
    font-weight: 400
}

.insight-img {
    max-width: 520px
}

.ms {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #040135;
    font-size: 16px
}

.academic-section {
    background: #f4f5f7
}

.network-banner {
    background: #2f3e9e;
    padding: 60px 0;
    color: #fff
}

.banner-title {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 15px
}

.banner-text {
    font-size: 18px;
    margin-bottom: 32px;
    opacity: 0.9;
    letter-spacing: 0.5px
}

.banner-btn {
    border: 1px solid #fff;
    padding: 13px 31px;
    color: #fff;
    text-decoration: none;
    border-radius: 0px;
    display: inline-block;
    font-size: 16px;
    font-weight: 500
}

.banner-img {
    border-radius: 30px;
    max-width: 420px
}

.story-card {
    position: relative;
    border-radius: 20px
}

.story-card img {
    border-radius: 20px
}

.story-badge {
    color: #2e345d;
    position: absolute;
    bottom: 2px;
    left: 188px;
    background: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    font-size: 18px;
    letter-spacing: 1px
}

.insight-heading {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d;
    margin-bottom: 15px
}

.insight-heading span {
    color: #9aa0a6
}

.insight-text-2 {
    color: #040135;
    font-size: 16px;
    line-height: 1.7;
    max-width: 769px
}

.msd-desc {
    margin-top: 20px;
    font-size: 17px;
    color: #2e345d;
    max-width: 580px;
    letter-spacing: 0px;
    line-height: 1.7
}

.ci-section {
    background: #f8f6fe
}

.ci-img-wrapper {
    width: 260px;
    height: 260px;
    margin: auto;
    background: #dcd8ef;
    border-radius: 30px;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center
}

.ci-img {
    width: 90%;
    height: 90%;
    object-fit: cover;
    border-radius: 25px;
    transform: rotate(-45deg)
}

.ci-title {
    font-size: 48px;
    font-weight: 700;
    color: #2d2d4d;
    line-height: 1.4
}

.ci-title span {
    color: #919191
}

.ci-subtitle {
    font-weight: 600;
    color: #2e345d;
    font-size: 22px
}

.ci-text {
    color: #040135;
    font-size: 16px;
    line-height: 1.7;
    max-width: 778px
}

@media (max-width: 768px) {
    .ci-title {
        font-size: 24px;
        text-align: center
    }

    .ci-subtitle, .ci-text {
        text-align: center
    }
}

.discover-card h5 {
    font-weight: 800;
    color: #2e345d;
    margin-bottom: 8px;
    font-size: 26px
}

.cta-box {
    background: #2f42a5;
    padding: 40px 42px;
    border-radius: 0px;
    position: relative;
    overflow: hidden
}

.discover-title span {
    color: #919191;
    font-weight: 800
}

.discover-card {
    border-radius: 16px;
    padding: 18px 30px;
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 0.5px solid #70707070;
    border-radius: 20px
}

.discover-card h5 {
    font-weight: 800;
    color: #2e345d;
    margin-bottom: 5px;
    font-size: 26px
}

.round-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
    transition: 0.3s ease
}

.integrity-btn {
    padding: 9px 20px;
    border-radius: 4px;
    color: #1f2b4d;
    font-weight: 500
}

.msd-desc-1 {
    margin-top: 20px;
    font-size: 17px;
    color: #2e345d;
    max-width: 689px;
    letter-spacing: 0px;
    line-height: 1.7
}

.ci-feature {
    border-radius: 16px;
    padding: 28px 38px;
    display: flex;
    justify-content: space-between;
    transition: 0.3s ease;
    background: #f7f8f8 0% 0% no-repeat padding-box;
    border: 0.5px solid #70707033;
    border-radius: 30px;
    height: 100%;
    align-items: flex-end
}

.ci-feature:hover {
    background: #e2e8f0
}

.ci-feature__title {
    font-size: 21px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 13px
}

.ci-feature__link {
    font-size: 16px;
    color: #2f42a5;
    margin: 0;
    font-weight: 600
}

.ci-feature__icon {
    width: 40px;
    height: 40px;
    background: #2f42a5;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    min-width: 40px;
    min-height: 40px
}

.training-section {
    background: #e9f8f9;
    padding: 45px 0
}

.training-visual {
    position: relative;
    max-width: 450px
}

.training-visual__main img {
    width: 100%;
    border-radius: 16px;
    display: block
}

.training-visual__hex {
    position: absolute;
    width: 120px;
    height: 120px;
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    overflow: hidden;
    border: 6px solid #c7f0f9
}

.training-visual__hex img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.training-visual__hex--top {
    top: -20px;
    left: -40px
}

.training-visual__hex--bottom {
    bottom: -30px;
    right: -40px
}

.training-content__title {
    font-size: 48px;
    line-height: 1.3;
    color: #2e345d;
    font-weight: 800
}

.training-content__bold {
    font-weight: 700;
    color: #1e3a8a
}

.training-content__light {
    font-weight: 800;
    color: #9c9c9c
}

.training-content__subtitle {
    margin-top: 20px;
    font-weight: 600;
    color: #1f2937
}

.training-content__text {
    margin-top: 18px;
    color: #040135;
    max-width: 649px;
    font-size: 16px
}

.itg-section {
    padding: 60px 0
}

.itg-top {
    margin-bottom: 50px
}

.itg-heading {
    font-size: 48px;
    font-weight: 800;
    color: #1f2c44;
    line-height: 1.4
}

.itg-heading span {
    color: #9c9c9c
}

.itg-text {
    font-size: 16px;
    color: #040135;
    margin-bottom: 20px
}

.itg-btn {
    border: 1px solid #ccd3dd;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    color: #1f2c44;
    background: #fff;
    text-decoration: none;
    display: inline-block
}

.itg-btn:hover {
    background: #1f2c44;
    color: #fff
}

.itg-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    border: 1px solid #e4e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    height: 100%
}

.itg-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 10px;
    font-weight: 800;
    margin-bottom: 31px;
    font-size: 22px;
    justify-content: space-between
}

.itg-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    min-width: 52px;
    min-height: 52px
}

.itg-orange {
    background: #fde9d9;
    color: #e67e22
}

.itg-orange-icon {
    background: #f39c12
}

.section-header h2 {
    letter-spacing: 1px;
    font-size: 44px;
    color: #2e345d;
    font-weight: 800;
    line-height: 50px
}

.itg-blue {
    background: #e3f0ff;
    color: #2d8cff
}

.itg-blue-icon {
    background: #2d8cff
}

.itg-purple {
    background: #efe5ff;
    color: #9b59b6
}

.itg-purple-icon {
    background: #9b59b6
}

.itg-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.itg-list li {
    position: relative;
    padding-left: 38px;
    margin-bottom: 17px;
    font-size: 18px;
    color: #040135
}

.itg-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 12px;
    padding: 3px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff
}

.itg-card.orange-card .itg-list li::before {
    background: #f39c12
}

.itg-card.blue-card .itg-list li::before {
    background: #2d8cff
}

.itg-card.purple-card .itg-list li::before {
    background: #9b59b6
}

.intg-section {
    background: #ebf5ff;
    padding: 60px 0
}

.intg-top {
    margin-bottom: 30px
}

.intg-title {
    font-size: 48px;
    font-weight: 800;
    color: #253858
}

.intg-subtitle {
    font-weight: 600;
    color: #2e345d;
    margin-bottom: 8px;
    font-size: 22px
}

.intg-desc {
    font-size: 16px;
    color: #040135;
    line-height: 1.6
}

.intg-img {
    width: 50%
}

.intg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.intg-content {
    padding: 40px 46px;
    width: 50%;
    background: white;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.intg-content h5 {
    font-weight: 700;
    margin-bottom: 10px;
    color: #222e34;
    font-size: 24px
}

.intg-content p {
    font-size: 16px;
    color: #040135;
    margin-bottom: 21px
}

.intg-btn {
    border: 1px solid #2e345d;
    padding: 10px 21px;
    border-radius: 0px;
    font-size: 14px;
    text-decoration: none;
    color: #253858;
    display: inline-block;
    font-weight: 600
}

.intg-btn:hover {
    background: #253858;
    color: #fff
}

@media (max-width: 768px) {
    .intg-card {
        flex-direction: column
    }

    .intg-img, .intg-content {
        width: 100%
    }
}

.role-section {
    padding: 60px 0
}

.role-top {
    margin-bottom: 30px
}

.role-title {
    font-size: 48px;
    font-weight: 800;
    color: #2c3553;
    line-height: 1.3
}

.role-title span {
    color: #8a94a6;
    font-weight: 800
}

.role-desc {
    font-size: 16px;
    color: #040135;
    line-height: 1.7
}

.role-box {
    padding: 50px 60px;
    position: relative;
    background: transparent linear-gradient(270deg, #ffffff 0%, #e9f8f9 100%) 0% 0% no-repeat padding-box;
    border-radius: 200px 0px 0px 200px
}

.role-img {
    max-width: 100%;
    height: auto
}

.role-heading {
    font-weight: 800;
    margin-bottom: 18px;
    color: #222e34;
    font-size: 30px
}

.role-text {
    font-size: 16px;
    color: #040135;
    margin-bottom: 27px
}

.role-btn {
    border: 1px solid #2c3553;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    color: #2c3553;
    display: inline-block
}

.role-box-1 {
    background: transparent linear-gradient(89deg, #ffffff 0%, #e9f8f9 100%) 0% 0% no-repeat padding-box;
    border-radius: 00px 200px 200px 00px
}

.role-btn:hover {
    background: #2c3553;
    color: #fff
}

@media (max-width: 768px) {
    .role-box {
        border-radius: 30px;
        padding: 30px
    }

    .role-title {
        font-size: 28px
    }
}

.integration-section {
    padding: 77px 0;
    background: transparent linear-gradient(180deg, #e7f3ff 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.integration-title {
    font-size: 48px;
    font-weight: 700
}

.integration-title .highlight {
    color: #1f2a60
}

.integration-title .muted-text {
    color: #9aa0a6
}

.integration-des {
    color: #040135;
    max-width: 591px;
    font-size: 16px
}

.integration-btn {
    border: 1px solid #1f2a60;
    padding: 10px 20px;
    border-radius: 6px;
    color: #1f2a60;
    transition: 0.3s
}

.integration-btn:hover {
    background: #1f2a60;
    color: #fff
}

.integration-diagram {
    position: relative;
    min-height: 342px
}

.integration-box {
    background: #fff;
    border-radius: 12px;
    padding: 22px 20px;
    text-align: center;
    box-shadow: -11px 11px 11px #e9f4ff;
    position: absolute;
    width: 260px;
    height: 170px
}

.integration-icon {
    width: 50px;
    height: 50px;
    background: #2d3ea8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -44px auto 26px;
    color: #fff;
    font-size: 20px
}

.integration-box h6 {
    font-size: 20px;
    font-weight: 800
}

.box-top {
    top: -26px;
    left: 14%
}

.box-right {
    top: 52%;
    right: 0
}

.box-bottom {
    bottom: 0;
    left: 2%;
    top: 66%
}

.workflow-section {
    background: #2F42A5;
    padding-top: 60px
}

.wf-title {
    font-size: 48px;
    font-weight: 800;
    color: #1f2a44;
    margin-bottom: 30px
}

.wf-title span {
    color: #9aa3af;
    font-weight: 800
}

.video-box {
    position: relative;
    max-width: 100%
}

.video-box img {
    width: 100%;
    display: block
}

.workflow-section .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(255 255 255);
    width: 92px;
    height: 92px;
    border-radius: 50%;
    font-size: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2f49b3;
    cursor: pointer
}

.wf-bottom {
    background: #3c4ea1;
    color: #fff;
    margin-top: -101px;
    padding: 138px 20px 50px
}

.wf-bottom p {
    max-width: 882px;
    margin: auto;
    font-size: 17px;
    opacity: 0.9
}

.btn-demo {
    border: 1px solid #fff;
    color: #fff;
    margin-right: 10px;
    padding: 12px 23px;
    border-radius: 1px
}

.btn-demo:hover {
    background: #fff;
    color: #3c4ea1
}

.btn-feature {
    background: #fff;
    color: #3c4ea1;
    padding: 12px 23px;
    border-radius: 1px
}

.btn-feature:hover {
    background: #e5e7eb
}

.detect-section {
    background: #f6f0ec;
    margin-bottom: 100px
}

.detect-heading {
    font-size: 48px;
    font-weight: 800;
    color: #1f2a44;
    line-height: 1.3
}

.detect-heading span {
    color: #9aa3af;
    font-weight: 800
}

.detect-text {
    color: #555;
    margin: 20px 0 25px;
    max-width: 520px;
    line-height: 1.6
}

.detect-btn-primary {
    border: 1px solid #1f2a44;
    padding: 10px 20px;
    color: #1f2a44;
    border-radius: 5px;
    transition: 0.3s
}

.detect-btn-primary:hover {
    background: #1f2a44;
    color: #fff
}

.detect-card {
    position: relative;
    overflow: hidden;
    border-radius: 0px
}

.detect-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s
}

.detect-card-small {
    height: 206px
}

.detect-card-video {
    height: 234px
}

.detect-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2f49b3;
    font-size: 20px;
    cursor: pointer
}

.detect-card:hover img {
    transform: scale(1.05)
}

@media (max-width: 991px) {
    .detect-card-small {
        height: 140px
    }

    .detect-card-video {
        height: 180px
    }
}

.access-section {
    background: #f7f8f8;
    padding: 50px 0
}

.access-heading {
    font-size: 48px;
    font-weight: 700;
    color: #2d3559
}

.access-description {
    color: #040135;
    max-width: 611px;
    font-size: 16px
}

.access-img {
    border-radius: 16px;
    width: 100%;
    object-fit: cover
}

.access-cards {
    display: flex;
    gap: 40px;
    margin-top: 30px
}

.access-item {
    flex: 1
}

.access-line {
    width: 1px;
    background: #ddd
}

.access-item-title {
    font-weight: 800;
    color: #222e34;
    font-size: 22px
}

.detect-grid {
    position: relative;
    top: 45px
}

.access-item-text {
    font-size: 16px;
    color: #040135
}

.access-btn {
    border: 1px solid #2e345d;
    padding: 11px 23px;
    border-radius: 0px;
    color: #2e345d;
    font-weight: 700;
    font-size: 16px;
    transition: 0.3s;
    background: transparent
}

.access-btn:hover {
    background: #2d3559;
    color: #fff
}

.intg-wrapper {
    padding: 60px 0
}

.intg-heading {
    font-size: 48px;
    font-weight: 800;
    color: #2d2f55;
    letter-spacing: 1px
}

.intg-heading span {
    color: #919191;
    font-weight: 800
}

.intg-subtext {
    color: #2e345d;
    margin-top: 10px;
    max-width: 500px;
    font-size: 17px
}

.intg-card {
    display: flex;
    height: 100%
}

.intg-icon-wrap {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 125px;
    width: 125px;
    margin: 30px auto 40px;
    position: relative;
    border-radius: 32px;
    transform: rotate(45deg);
    padding: 10px
}

.intg-icon-wrap i {
    width: 55px;
    transform: rotate(315deg);
    display: block;
    color: #eaf3fa;
    font-size: 25px;
    height: 55px;
    display: flex;
    padding-top: 0;
    padding-right: 0;
    border-radius: 50%;
    align-items: center;
    justify-content: space-around
}

.intg-bg-1 {
    background: #fff6ea
}

.intg-bg-2 {
    background: #f3fbee
}

.intg-bg-3 {
    background: #f9eeff
}

.intg-bg-4 {
    background: #e9f4ff
}

.intg-bg-5 {
    background: #f5f7f8
}

.intg-bg-6 {
    background: #ebf9f9
}

.intg-text {
    font-size: 20px;
    color: #222e34;
    font-weight: 500;
    line-height: 23px;
    text-align: center
}

.intg-text strong {
    display: block;
    margin-bottom: 5px
}

.intg-bg-1 i {
    background: #f59e0b
}

.intg-bg-2 i {
    background-color: #22c55e
}

.intg-bg-3 i {
    background: #b874e4
}

.intg-bg-4 i {
    background: #4fa1f3
}

.intg-bg-5 i {
    background: #a4aeb5
}

.intg-bg-6 i {
    background: #ebf9f9
}

.intg-bg-6 i {
    background: #68c4cb
}

.flexchk-hero {
    position: relative;
    background: url('/user/img/Group268.png') center/cover no-repeat;
    padding: 60px 0;
    color: #fff
}

.flexchk-content {
    position: relative;
    z-index: 2
}

.flexchk-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff
}

.flexchk-desc {
    margin-top: 30px;
    color: #ffffff;
    max-width: 581px;
    font-size: 16px;
    line-height: 28px
}

.flexchk-btn {
    margin-top: 30px;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 25px;
    border-radius: 0px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    font-size: 16px;
    font-weight: 600
}

.flexchk-btn:hover {
    background: #fff;
    color: #000
}

.flexchk-img {
    display: flex;
    justify-content: space-around
}

.flexchk-img img {
    width: 356px;
    height: 410px;
    border-radius: 8px
}

.msd-desc {
    margin-top: 20px;
    font-size: 17px;
    color: #2e345d;
    max-width: 673px;
    letter-spacing: 0px;
    line-height: 1.7
}

@media (max-width: 768px) {
    .flexchk-title {
        font-size: 30px
    }

    .flexchk-hero {
        text-align: center
    }
}

.res-section {
    background: #eef3f7
}

.res-title {
    font-size: 48px;
    font-weight: 700
}

.res-desc {
    color: #6c7a92
}

.res-card {
    background: #fff;
    border-radius: 0;
    padding: 30px;
    height: 245px;
    position: relative;
    overflow: hidden;
    transition: 0.4s;
    border: navajowhite
}

.res-icon {
    font-size: 36px;
    color: #ff7a45;
    transition: 0.3s;
    margin-bottom: 21px
}

.res-num {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #222e3429;
    font-weight: 600;
    transition: 0.3s;
    font-size: 38px
}

.res-card h5 {
    color: #222e34;
    font-size: 22px;
    font-weight: 600
}

.res-card p {
    font-size: 16px;
    color: #040135;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: 0.4s;
    font-weight: 400
}

.res-card:hover .res-icon, .res-card:hover .res-num {
    opacity: 0;
    transform: translateY(-10px)
}

.res-card:hover p {
    -webkit-line-clamp: unset
}

.res-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08)
}

.res-card:hover .res-icon {
    display: none
}

.card-1:hover {
    background: #e05f3b
}

.card-2:hover {
    background: #4697e9
}

.card-3:hover {
    background: #8bce65
}

.card-4:hover {
    background: #b874e4
}

.card-5:hover {
    background: #68c4cb
}

.cta-top-text-1 {
    font-size: 38px;
    font-weight: 800
}

.res-card {
    transition: all 0.3s ease
}

.res-card:hover h5, .res-card:hover p, .res-card:hover .res-num, .res-card:hover .res-icon i {
    color: #fff !important
}

.card-2 i {
    color: #4697e9
}

.card-3 i {
    color: #8bce65
}

.card-4 i {
    color: #b874e4
}

.card-5 i {
    color: #68c4cb
}

.res-card:hover .res-icon {
    color: #fff
}

.kb-faq-section {
    background: transparent linear-gradient(180deg, #e7f3ff 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.kb-faq-title {
    font-size: 48px;
    font-weight: 800;
    color: #2d3559
}

.kb-faq-image img {
    border-radius: 20px
}

.kb-faq-item {
    border: none;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden
}

.kb-faq-btn {
    background: #fff;
    border-radius: 12px !important;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    color: #222e34;
    font-size: 18px;
    line-height: 32px
}

.accordion-button:not(.collapsed) {
    color: #222e34;
    background-color: transparent;
    box-shadow: none
}

.kb-faq-btn::after {
    display: none
}

.kb-icon::before {
    content: "+";
    font-size: 22px;
    font-weight: 600;
    color: #333
}

.kb-faq-btn:not(.collapsed) .kb-icon::before {
    content: "-"
}

.kb-faq-body {
    font-size: 15px;
    color: #040135;
    line-height: 1.6;
    font-weight: 400
}

.kb-faq-section .accordion-body {
    padding: 0rem 23px 1rem
}

.papers h4 {
    font-size: 42px;
    font-weight: 800
}

.papers p {
    color: #040135;
    font-size: 20px;
    font-weight: 400
}

.kb-cap-section {
    background: #eef3fb
}

.kb-cap-title {
    font-size: 40px;
    font-weight: 700;
    color: #2d3559
}

.kb-cap-title span {
    color: #888
}

.kb-cap-sub {
    font-weight: 600;
    margin: 27px 0;
    font-size: 26px
}

.kb-cap-desc {
    max-width: 671px;
    color: #040135;
    font-size: 16px
}

.kb-cap-img img {
    border-radius: 15px
}

.kb-cap-wrap {
    position: relative;
    text-align: center;
    margin-top: 60px
}

.kb-cap-center {
    display: flex;
    justify-content: center
}

.kb-cap-circle {
    width: 220px;
    height: 220px;
    background: linear-gradient(135deg, #2d3fa3, #4a5bdc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1)
}

.kb-cap-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 15px 0
}

.kb-cap-item p {
    margin: 0;
    font-size: 14px
}

.kb-cap-left {
    position: absolute;
    left: 0;
    top: 20%
}

.kb-cap-right {
    position: absolute;
    right: 0;
    top: 20%
}

.kb-cap-bottom {
    margin-top: 30px
}

.kb-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%
}

.orange {
    background: #ff9f43
}

.blue {
    background: #54a0ff
}

.purple {
    background: #a55eea
}

.green {
    background: #2ecc71
}

.cyan {
    background: #48dbfb
}

.teal {
    background: #1dd1a1
}

.violet {
    background: #6c5ce7
}

.intg-section .intg-card {
    text-align: left;
    padding: 0;
    display: flex
}

@media (max-width: 991px) {
    .kb-cap-left, .kb-cap-right {
        position: static;
        margin-top: 20px
    }

    .kb-cap-wrap {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .badge-ai {
        top: 62px;
        left: 0
    }

    .card-box {
        padding: 38px;
        border-radius: 18px;
        border: 1px solid #e4e9f2;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        transition: 0.3s;
        height: 318px
    }
}

@media (max-width: 991px) {
    .cta-box {
        padding: 40px 5px;
        border-radius: 25px
    }

    .tm-section {
        padding: 50px 7px
    }

    .cta-title {
        font-size: 26px
    }

    .cta-desc {
        font-size: 16px
    }

    .our-story p {
        color: #2e345d;
        font-size: 15px;
        line-height: 1.7;
        text-align: left;
        font-weight: 450;
        margin-bottom: 15px
    }

    .our-story .pe-5 {
        padding: 0.5rem !important
    }

    .story-right {
        margin-left: 0;
        position: relative;
        left: 0
    }

    .about-section .global-wrap {
        justify-content: left;
        margin-bottom: 20px
    }

    .about-section .heading-row {
        text-align: left
    }

    .about-section .mt-5 {
        margin-top: 1rem !important;
        margin-bottom: 31px
    }

    .ms-heading {
        font-size: 32px !important;
        font-weight: 800;
        color: #2e345d;
        line-height: 1.2;
        letter-spacing: 1px;
        word-spacing: 0px;
        padding: 0px 10px;
    }

    .story-quote {
        background: #2f42a5;
        color: #fff;
        padding: 36px 21px;
        font-size: 21px;
        font-weight: 500;
        line-height: 48px
    }

    .access-cards {
        display: block;
        margin-top: 30px
    }

    .intg-wrapper {
        padding: 60px 26px
    }

    .access-item {
        flex: 1;
        margin-top: 48px
    }

    .role-box-1 {
        border-radius: 0;
        padding: 12px
    }

    .ms-buttons {
        margin-top: 30px;
        display: grid;
        gap: 8px;
        margin-bottom: 21px
    }

    .integration-title {
        font-size: 34px;
        font-weight: 700
    }
}

@media (max-width: 768px) {
    .integration-box {
        background: #fff;
        border-radius: 12px;
        padding: 22px 20px;
        text-align: center;
        box-shadow: -11px 11px 11px #e9f4ff;
        position: initial;
        width: 100%;
        height: 167px;
        margin-bottom: 50px
    }

    .integration-diagram {
        position: relative;
        min-height: 342px;
        margin-top: 51px
    }

    .btn-demo {
        border: 1px solid #fff;
        color: #fff;
        margin-right: 10px;
        padding: 12px 23px;
        border-radius: 1px;
        margin-bottom: 17px
    }

    .workflow-section {
        padding-top: 0
    }

    .wf-title {
        font-weight: 800;
        color: #1f2a44;
        margin-bottom: 30px;
        line-height: 44px
    }

    .integration-section {
        padding: 77px 0 0;
        background: transparent linear-gradient(180deg, #e7f3ff 0%, #ffffff 100%) 0% 0% no-repeat padding-box
    }

    .assign-overlay {
        position: absolute;
        right: 1px;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(135deg, #3343a6, #283593);
        color: #fff;
        padding: 32px;
        width: 100%;
        border-radius: 0px
    }

    .writing-points {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 21px
    }

    .point-text {
        font-size: 17px;
        color: #2e345d;
        font-weight: 800
    }

    .writing-main-title {
        font-size: 51px;
        font-weight: 800;
        line-height: 1.3;
        margin-bottom: 29px;
        letter-spacing: 0px;
        word-spacing: 0px
    }

    .insight-img {
        max-width: 100%
    }

    .network-banner h2, .h2 {
        letter-spacing: 1px;
        font-size: 28px;
        color: #2e345d;
        font-weight: 800;
        line-height: 41px
    }

    .banner-btn {
        margin-bottom: 21px
    }

    .story-badge {
        color: #2e345d;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #fff;
        padding: 12px 18px;
        border-radius: 0;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        font-size: 17px;
        letter-spacing: 0px
    }

    h2, .h2 {
        line-height: 40px
    }

    .training-content__title {
        font-size: 34px;
        line-height: 1.3;
        color: #2e345d;
        font-weight: 800
    }

    .intg-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin-bottom: 12px
    }

    .intg-content {
        padding: 78px 46px 27px
    }

    .ms-ai-image {
        width: 100%;
        height: 199%;
        border-radius: 50%;
        overflow: hidden;
        margin-top: 21px
    }

    .ms-section::before {
        display: none
    }

    .ms-section .ps-5 {
        padding-left: 1rem !important
    }

    .circle-blue {
        background: #eff8ff;
        border: 4px solid #5b9bd5;
        left: 20px;
        top: 0;
        width: 360px;
        height: 360px
    }

    .cta-btn {
        background: #222e34;
        color: #fff;
        padding: 10px 24px
    }

    h1 {
        font-size: 34px !important
    }

    .circle-orange {
        background: #fff7ec;
        border: 4px solid #ffa530;
        left: 20px;
        top: -85px;
        z-index: 2;
        width: 206px;
        height: 206px
    }

    .ms-ai-box {
        padding: 10px;
        border-radius: 0;
        background: transparent linear-gradient(90deg, #ffffff 0%, #e8f3ff 100%) 0% 0% no-repeat padding-box
    }
}

@media (max-width: 991.98px) {
    .page-header {
        padding: 0px 0;
        display: none
    }

    .page-header h2 {
        font-size: 45px
    }

    .page-header a {
        font-size: 20px
    }

    .role-img {
        max-width: 100%;
        height: auto;
        margin-bottom: 50px
    }

    .modern-breadcrumb {
        background: #f0f3f6;
        padding: 14px 20px;
        border-radius: 1px;
        font-weight: 500;
        border-bottom: 0px solid #00000063;
        margin-bottom: 21px
    }
}

.kb-cap-section {
    background: transparent linear-gradient(180deg, #e7f3ff 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.cap-wrapper {
    position: relative;
    margin-top: 0
}

.cap-circle {
    width: 435px;
    height: 435px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    text-align: center;
    position: relative;
    margin: auto;
    border: 30px solid #fff;
    background: transparent linear-gradient(180deg, #2f42a5 0%, #2f42a5 100%) 0% 0% no-repeat padding-box
}

.cap-circle::before {
    content: "";
    position: absolute;
    width: 435px;
    height: 435px;
    border: 2px dashed #9bb2ff;
    border-radius: 50%;
    animation: rotateRing 12s linear infinite
}

@keyframes rotateRing {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

.cap-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 70px
}

.cap-item p {
    margin: 0;
    font-size: 20px;
    color: #222e34;
    font-weight: 700;
    text-align: justify;
    line-height: 27px
}

.cap-left {
    position: absolute;
    left: 0;
    top: 10%
}

.cap-right {
    position: absolute;
    right: 43px;
    top: 10%
}

.cap-bottom {
    margin-top: 40px;
    display: flex;
    justify-content: center
}

.cap-icon {
    min-height: 66px;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 66px
}

.cap-icon i {
    color: #fff;
    font-size: 37px
}

.kb-cap-section .bg-orange {
    background: #ffa530
}

.kb-cap-section .bg-blue {
    background: #4fa1f3
}

.kb-cap-section .bg-purple {
    background: #b874e4
}

.kb-cap-section .bg-green {
    background: #8bce65
}

.kb-cap-section .bg-cyan {
    background: #63b9bf
}

.kb-cap-section .bg-teal {
    background: #37bc98
}

.kb-cap-section .bg-violet {
    background: #8391f5
}

.cap-circle h4 {
    font-size: 42px;
    color: #ffffff;
    font-weight: 800
}

@media (max-width: 991px) {
    .cap-left, .cap-right {
        position: static;
        text-align: center
    }

    .cap-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .cap-item {
        justify-content: center;
        text-align: center
    }
}

@media (max-width: 991px) {
    .cap-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px
    }

    .cap-left, .cap-right {
        position: static;
        width: 100%
    }

    .cap-item {
        justify-content: center;
        text-align: center
    }

    .cap-item p {
        text-align: left
    }

    .cap-circle {
        width: 300px;
        height: 300px
    }

    .cap-circle::after {
        width: 210px;
        height: 210px
    }

    .cap-circle h4 {
        font-size: 20px;
        color: #ffffff;
        font-weight: 800
    }

    .cap-circle::before {
        width: 294px;
        height: 294px
    }

    .cap-bottom {
        margin-top: 10px
    }

    .cap-item {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 29px
    }
}

.Insights-1 {
    background: transparent linear-gradient(180deg, #f6f0ec 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.Insights-2 {
    background: transparent linear-gradient(89deg, #e9f8f9 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.kb-read-btn {
    border: 1px solid #1f2d3d;
    color: #1f2d3d;
    border-radius: 30px;
    padding: 8px 22px;
    font-size: 14px;
    transition: 0.3s
}

.kb-read-btn:hover {
    background: #1f2d3d;
    color: #fff
}

.kb-terms {
    background: transparent linear-gradient(180deg, #e7f3ff 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.kb-title {
    font-size: 40px;
    font-weight: 700;
    color: #2b2e4a
}

.kb-subtitle {
    color: #040135;
    font-size: 20px
}

.kb-hero-img {
    max-width: 250px;
    animation: float 4s ease-in-out infinite
}

.kb-box {
    background: #fff;
    border-radius: 10px
}

.kb-box h4 {
    color: #2f42a5;
    font-weight: 800;
    margin-bottom: 37px;
    font-size: 32px
}

.kb-box p {
    color: #05132f;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 40px
}

.kb-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 35px
}

.kb-list li {
    position: relative;
    padding-left: 39px;
    margin-bottom: 20px;
    color: #05132f;
    font-size: 16px
}

.kb-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border: 2px solid #2f42a5;
    color: #fff;
    font-size: 11px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2f42a5;
    min-width: 20px;
    min-height: 20px
}

hr {
    margin: 20px 0;
    border-color: #eee
}

@keyframes float {
    0% {
        transform: translateY(0px)
    }
    50% {
        transform: translateY(-10px)
    }
    100% {
        transform: translateY(0px)
    }
}

@media (max-width: 991px) {
    .kb-title {
        font-size: 28px
    }

    .kb-hero-img {
        margin-top: 20px
    }

    .kb-box {
        padding: 20px
    }
}

.detect-desc-1 {
    margin-top: 20px;
    color: #05132f;
    max-width: 644px;
    font-size: 16px
}

.kb-core {
    background: #f7f8f8
}

.kb-core-title {
    font-size: 36px;
    font-weight: 700;
    color: #2d3559
}

.kb-core-sub {
    color: #05132f;
    font-size: 16px;
    margin-bottom: 25px;
    font-weight: 500
}

.kb-core-img img {
    border-radius: 20px;
    transition: 0.4s
}

.kb-core-img img:hover {
    transform: scale(1.03)
}

.kb-card {
    display: flex;
    gap: 24px;
    background: #fff;
    padding: 25px;
    border-radius: 0px;
    margin-bottom: 20px;
    align-items: center;
    transition: 0.3s
}

.kb-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08)
}

.kb-icons {
    width: 100px;
    height: 100px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    min-height: 100px
}

.kb-icons i {
    font-size: 53px
}

.kb-core .bg-green {
    background: #eefdf6;
    color: #28a745 !important
}

.kb-core .bg-orange {
    background: #fdebd0;
    color: #f39c12
}

.kb-core .bg-blue {
    background: #d6eaf8;
    color: #3498db
}

.kb-core .bg-pink {
    background: #f9ebea;
    color: #e74c3c
}

.kb-card h5 {
    font-size: 22px;
    font-weight: 600;
    color: #222e34;
    margin-bottom: 13px
}

.kb-card p {
    font-size: 17px;
    color: #05132f;
    margin: 5px 0 0
}

@media (max-width: 991px) {
    .kb-core-title {
        font-size: 26px
    }

    .kb-core-img {
        margin-bottom: 25px
    }
}

.kb-title {
    font-size: 36px;
    font-weight: 500;
    color: #2d3559
}

.kb-title strong {
    font-weight: 700
}

.kb-desc {
    color: #05132f;
    font-size: 16px;
    margin-top: 15px
}

.kb-simple .kb-box {
    border: 1px solid #2d335b4d;
    padding: 21px;
    border-radius: 10px;
    background: #fff;
    transition: 0.3s;
    height: 100%
}

.kb-simple .kb-box span {
    font-weight: 600;
    color: #222e34;
    display: block;
    margin-bottom: 5px;
    font-size: 20px
}

.kb-simple .kb-box p {
    margin: 0;
    font-size: 18px;
    color: #222e34;
    font-weight: 500
}

.kb-simple h2 span {
    color: #919191
}

.kb-box:hover {
    border-color: #4a5bdc;
    transform: translateY(-4px)
}

.kb-img-wrap {
}

.kb-bg-shape {
    position: absolute;
    width: 90%;
    height: 90%;
    background: #efe9e6;
    border-radius: 20px;
    top: 10%;
    left: 5%
}

.kb-main-img {
    position: relative;
    border-radius: 15px;
    z-index: 2
}

.kb-float-card {
    position: absolute;
    bottom: -20px;
    left: 20%;
    width: 70%;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    z-index: 3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: float 4s ease-in-out infinite
}

@media (max-width: 991px) {
    .kb-title {
        font-size: 26px
    }

    .kb-img-wrap {
        margin-top: 30px
    }

    .kb-float-card {
        position: static;
        margin-top: 15px;
        width: 100%
    }
}

.kb-start {
    background: #2f42a5 0% 0% no-repeat padding-box
}

.kb-start-title {
    font-size: 40px;
    font-weight: 700
}

.kb-start-sub {
    font-size: 24px;
    margin-top: 27px;
    color: #fff
}

.kb-start-desc {
    font-size: 17px;
    margin-top: 25px;
    color: #ffffff;
    max-width: 704px;
    line-height: 29px
}

.kb-btn-dark {
    background: #222e34;
    color: #fff;
    border-radius: 30px;
    padding: 14px 65px;
    font-size: 18px
}

.kb-btn-dark:hover {
    background: #000;
    color: #fff
}

.kb-btn-light {
    font-size: 18px;
    background: #fff;
    color: #222e34;
    border-radius: 30px;
    padding: 14px 31px
}

.kb-btn-light:hover {
    background: #eaeaea
}

.kb-person {
    z-index: 99999;
    margin-top: -54px
}

@media (max-width: 991px) {
    .kb-start-title {
        font-size: 28px
    }

    .kb-btn-dark {
        margin-bottom: 12px
    }

    .spot-logo img {
        width: 185px !important;
        min-height: 53px !important
    }

    .custom-btn {
        margin-bottom: 21px
    }

    .kb-person {
        z-index: 99999;
        margin-top: auto
    }

    .kb-img-wrap {
        margin-top: 30px
    }

    .detect-text-box {
        margin-bottom: 21px;
    }

    .kb-start {
        padding: 35px 0
    }

    .zone-box {
        background: #2f42a5;
        padding: 23px 11px
    }

    .zone-tabs .nav-link {
        color: #2e345d;
        font-weight: 600;
        padding: 8px 7px;
        border: none;
        background: transparent;
        font-size: 16px
    }
}

.faq-title {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d
}

.faq-subtitle {
    font-size: 16px;
    color: #05132f
}

.faq-tabs .nav-link {
    border: 1px solid #7070708c;
    border-radius: 25px;
    padding: 10px 42px;
    margin: 5px;
    color: #222e34;
    background: #fff;
    font-size: 18px;
    font-weight: 450;
    white-space: nowrap
}

.faq-tabs .nav-link.active {
    background: #2e41a3;
    color: #fff;
    border-color: #2e41a3
}

.faq-image {
    border-radius: 20px
}

.zx-faq-img {
    border-radius: 20px
}

.zx-item {
    margin-bottom: 12px;
    border-radius: 14px;
    overflow: hidden
}

.zx-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 21px;
    font-weight: 500;
    color: #222e34;
    font-size: 18px;
    line-height: 32px;
    background: #ffffff;
    border-radius: 10px !important;
    background: #ffffff 0% 0% no-repeat padding-box;
    border-radius: 10px
}

.zx-btn::after {
    display: none
}

.zx-body {
    padding: 13px 20px;
    background: #fff;
    font-size: 14px;
    color: #040135;
    line-height: 25px
}

.zx-btn:not(.collapsed) {
    background: #fff;
    color: #2d3559;
    padding: 24px 17px 4px
}

.zx-icon {
    font-size: 22px;
    font-weight: 600;
    transition: 0.3s ease
}

.zx-accordion .accordion-item:first-of-type {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0px 3px 25px #014efe2e;
    border: 0.5px solid #014efe1c;
    border-radius: 10px
}

.zx-accordion .accordion-item {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125) !important
}

.zx-icon::before {
    content: "+"
}

.zx-btn:not(.collapsed) .zx-icon::before {
    content: "-"
}

.lms-section {
    background: #f6f0ec
}

.lms-title {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d
}

.lms-subtitle {
    color: #05132f;
    max-width: 900px;
    margin: auto;
    font-size: 16px
}

.lms-card {
    background: #fff;
    border-radius: 20px;
    padding: 41px;
    height: 100%;
    transition: 0.3s ease;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start
}

.rn-card .rn-icon {
    font-size: 35px;
    flex-shrink: 0;
    margin-top: 1px
}

.lms-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08)
}

.lms-card.active {
    background: #2f2f5b;
    color: #fff
}

.lms-card.active .lms-text {
    color: #ddd
}

.lms-logo {
    height: 57px;
    margin-bottom: 20px
}

.lms-text {
    font-size: 16px;
    color: #05132f;
    margin-bottom: 31px
}

.lms-btn {
    display: inline-block;
    padding: 12px 27px;
    border-radius: 26px;
    border: 1px solid #2e345d;
    color: #2e345d;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s
}

.lms-btn:hover {
    background: #2e345d;
    color: #fff;
    border-color: #2e345d
}

.lms-btn.dark {
    background: #fff;
    color: #2f2f5b
}

.nx-heading {
    font-size: 34px;
    font-weight: 700;
    color: #2c2f48
}

.nx-heading span {
    color: #5a6bff
}

.nx-text {
    color: #05132f
}

.nx-list {
    list-style: none;
    padding: 0
}

.nx-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 18px;
    color: #2e345d
}

.nx-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background: #2f42a5;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center
}

.nx-orbit {
    position: relative;
    width: 536px;
    height: 536px;
    margin: auto;
    background: linear-gradient(137deg, #fff, #fff, #e9f3ff);
    border-radius: 50%
}

.nx-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 152px;
    height: 152px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1)
}

.nx-core img {
    width: 50px
}

.nx-ring {
    position: absolute;
    border: 2px dashed #d5d9ea;
    border-radius: 50%;
    animation: nx-spin linear infinite
}

.ring-sm {
    width: 290px;
    height: 290px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 18s
}

.ring-lg {
    width: 460px;
    height: 460px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 30s
}

@keyframes nx-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

.nx-node {
    position: absolute;
    animation: nx-counter-spin linear infinite
}

.ring-lg .nx-node {
    animation-duration: 30s
}

.ring-sm .nx-node {
    animation-duration: 18s
}

@keyframes nx-counter-spin {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(-360deg)
    }
}

.nx-node {
    position: absolute;
    width: 98px;
    height: 98px;
    background: #fff;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: 5px
}

.nx-node img {
    width: 28px;
    margin-bottom: -2px
}

.nx-node span {
    font-size: 11px;
    color: #555;
    font-weight: 500
}

.ring-sm .nx-node {
    top: -30px;
    left: 50%;
    transform: translateX(-50%)
}

.ring-lg .nx-node:nth-child(1) {
    top: -35px;
    left: 36%;
    transform: translateX(-50%)
}

.ring-lg .nx-node:nth-child(2) {
    right: -19px;
    top: 70%;
    transform: translateY(-50%)
}

.ring-lg .nx-node:nth-child(3) {
    bottom: -29px;
    left: 37%;
    transform: translateX(-50%)
}

.ring-lg .nx-node:nth-child(4) {
    left: -45px;
    top: 48%;
    transform: translateY(-50%)
}

.ring-lg .nx-node:nth-child(5) {
    top: 41px;
    right: -5px
}

.nx-wrap h2 span {
    color: #969696
}

.nx-node img {
    width: 54px
}

@keyframes nx-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

.ring-lg .nx-node:nth-child(1) {
    top: -30px;
    left: 26%;
    transform: translateX(-50%)
}

.ring-lg .nx-node:nth-child(2) {
    right: -22px;
    top: 68%;
    transform: translateY(-50%)
}

.ring-lg .nx-node:nth-child(3) {
    bottom: -53px;
    left: 34%;
    transform: translateX(-50%)
}

.ring-lg .nx-node:nth-child(4) {
    left: -50px;
    top: 44%;
    transform: translateY(-50%)
}

.ring-lg .nx-node:nth-child(5) {
    top: 41px;
    right: -5px
}

.nx-wrap h2 span {
    color: #969696
}

.scene {
    width: 980px;
    max-width: 100%;
    background: #ffffff;
    border-radius: 32px;
    border: 1px solid #e4e8f0;
    overflow: hidden;
    position: relative
}

.scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(80, 100, 180, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 100, 180, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
    z-index: 0
}

.inner {
    position: relative;
    z-index: 1;
    padding: 0
}

.header {
    text-align: center;
    margin-bottom: 52px
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #eef2ff;
    border: 1px solid #d4dcfa;
    border-radius: 40px;
    padding: 5px 14px 5px 10px;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4a60c0;
    margin-bottom: 18px
}

.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4a60c0;
    animation: blink 2s ease-in-out infinite
}

@keyframes blink {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: 0.2
    }
}

.heading {
    font-size: 30px;
    font-weight: 700;
    color: #0d1b4b;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 8px
}

.subhead {
    font-size: 14px;
    font-weight: 300;
    color: #8a93aa;
    line-height: 1.6
}

.hub-wrap {
    position: relative;
    width: 620px;
    height: 620px
}

.connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0
}

.hub-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center
}

.hub-card {
    width: 136px;
    height: 136px;
    background: #ffffff;
    border-radius: 28px;
    border: 2px solid #e4e8f0;
    box-shadow: 0 0 0 8px rgba(74, 96, 192, 0.06), 0 8px 40px rgba(13, 27, 75, 0.12), 0 2px 8px rgba(13, 27, 75, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    overflow: hidden
}

.hub-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, transparent 55%);
    pointer-events: none;
    border-radius: 28px
}

.hub-label {
    margin-top: 12px;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a93aa
}

.lms-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 5;
    cursor: pointer
}

.scene .lms-card {
    width: 108px;
    height: auto;
    padding: 24px;
    border-radius: 22px;
    border: 1.5px solid #e4e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease
}

.scene .lms-card:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06)
}

.scene .lms-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, transparent 55%);
    pointer-events: none;
    border-radius: 22px
}

.lms-name {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a93aa;
    text-align: center
}

.node-canvas {
    top: 20px;
    left: 50%;
    transform: translateX(-50%)
}

.node-blackboard {
    top: 118px;
    right: 50px
}

.node-brightspace {
    bottom: 60px;
    right: 50px
}

.node-schoology {
    bottom: 60px;
    left: 50px
}

.node-moodle {
    top: 118px;
    left: 14px
}

.features {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 44px
}

.feat {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f9fc;
    border: 1px solid #e4e8f0;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 500;
    color: #3a4460
}

.feat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0
}

.stats {
    display: grid;
    grid-template-columns:1fr 1px 1fr 1px 1fr 1px 1fr;
    background: #f8f9fc;
    border: 1px solid #e4e8f0;
    border-radius: 16px;
    overflow: hidden
}

.stat {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center
}

.stat-val {
    font-size: 20px;
    font-weight: 700;
    color: #0d1b4b;
    letter-spacing: -0.02em;
    line-height: 1
}

.stat-label {
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    color: #9aa3b5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4
}

.stat-divider {
    background: #e4e8f0
}

.footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e4e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.footer-note {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    color: #b0b8cc;
    letter-spacing: 0.04em
}

.tag {
    background: #f2f4f8;
    border: 1px solid #e4e8f0;
    border-radius: 20px;
    padding: 4px 14px;
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a93aa
}

@keyframes pulseRing {
    0% {
        r: 72;
        opacity: 0.5
    }
    100% {
        r: 90;
        opacity: 0
    }
}

.hub-icon {
    width: 70px;
    height: 70px
}

.workflow {
    background: #0b1f5b;
    padding: 80px 20px;
    color: #fff
}

.workflow__header {
    margin-bottom: 50px
}

.workflow__title {
    font-size: 48px;
    font-weight: 600;
    color: #fff
}

.workflow__subtitle {
    opacity: 0.7;
    font-size: 16px
}

.workflow__card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 59px;
    padding: 33px;
    margin-bottom: 38px;
    backdrop-filter: blur(10px);
    transition: 0.3s ease
}

.workflow__card:hover {
    transform: translateY(-5px)
}

.workflow__card--reverse .row {
    flex-direction: row-reverse
}

.workflow__image {
    border-radius: 20px;
    overflow: hidden
}

.workflow__card-title {
    font-size: 30px;
    font-weight: 800;
    color: #01e3fb;
    margin-bottom: 18px
}

.workflow__card-text {
    opacity: 0.9;
    font-size: 16px;
    margin-bottom: 27px
}

.workflow__tags {
    margin: 15px 0
}

.workflow__tag {
    display: inline-block;
    padding: 6px 22px;
    margin-right: 8px;
    font-size: 15px;
    border: 0.5px solid #ffffffbf;
    border-radius: 6px;
    margin-bottom: 16px
}

.workflow__list {
    list-style: none;
    padding: 0;
    margin: 15px 0
}

.workflow__list-item {
    margin-bottom: 13px;
    padding-left: 35px;
    position: relative;
    font-size: 16px
}

.workflow__list-item::before {
    content: "✔";
    position: absolute;
    left: 0px;
    color: #333337;
    background: #fdda9a;
    width: 23px;
    height: 23px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 50%;
    min-width: 23px;
    min-height: 23px
}

.workflow__button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 18px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    transition: 0.3s ease
}

.workflow__button:hover {
    background: #4a6cf7;
    border-color: #4a6cf7;
    color: #fff
}

.roles {
    font-size: 20px;
    color: #fdda9a;
    font-weight: 500;
    text-decoration: underline;
    line-height: 23px;
    margin-bottom: 23px
}

.reports {
    background: #f7f8f8;
    padding: 80px 20px
}

.reports__header {
    margin-bottom: 50px;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto
}

.reports__title {
    font-size: 48px;
    font-weight: 800;
    color: #1d2b4f;
    margin-bottom: 10px
}

.reports__subtitle {
    color: #05132f;
    font-size: 16px
}

.reports__cards {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 15px
}

@media (max-width: 768px) {
    .reports__cards {
        grid-template-columns:1fr
    }
}

.reports__card {
    padding: 35px 20px;
    height: 100%;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 0 solid transparent;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 0.5px solid #2d335b38;
    border-radius: 10px
}

.reports__card:hover {
    border-left-width: 4px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-6px)
}

.reports__card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px
}

.reports__icon {
    font-size: 28px;
    flex-shrink: 0
}

.reports__card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1d2b4f
}

.reports__card-text {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 14px
}

.reports__link {
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    font-size: 14px
}

.reports__link:hover {
    text-decoration: underline
}

.reports__card--blue:hover {
    border-left-color: #4a6cf7
}

.reports__card--green:hover {
    border-left-color: #28c76f
}

.reports__card--orange:hover {
    border-left-color: #ff9f43
}

.reports__card--purple:hover {
    border-left-color: #a66cff
}

@media (max-width: 768px) {
    .reports__title {
        font-size: 26px
    }

    .reports__card-text {
        font-size: 13px
    }
}

.reports__icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease
}

.reports__card--blue .reports__icon {
    background-color: #e8f3ff;
    color: #3d92e7
}

.reports__card--green .reports__icon {
    background-color: #f0fde9;
    color: #67bd37
}

.reports__card--orange .reports__icon {
    background-color: #f0fde9;
    color: #f09927
}

.reports__card--purple .reports__icon {
    background-color: #f8eeff;
    color: #9e4dd3
}

.reports__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border-left-width: 7px
}

.reports__card--blue:hover {
    border-left-color: #4fa1f3
}

.reports__card--green:hover {
    border-left-color: #28c76f
}

.reports__card--orange:hover {
    border-left-color: #ff9f43
}

.reports__card--purple:hover {
    border-left-color: #a66cff
}

.reports__card-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px
}

.reports__card-left {
    display: flex;
    align-items: flex-start;
    gap: 12px
}

.reports__card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px
}

.reports__card-intro {
    font-size: 15px;
    margin: 4px 0 8px 0;
    color: #05132f;
    font-weight: 500;
    min-height: 45px
}

.reports__card-text {
    font-size: 14px;
    color: #6c757d;
    margin: 0
}

.reports__link {
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    font-size: 14px;
    white-space: nowrap
}

@media (max-width: 768px) {
    .reports__cards {
        grid-template-columns:1fr
    }

    .reports__card-content {
        flex-direction: column;
        gap: 8px
    }

    .reports__link {
        align-self: flex-start
    }
}

.reports__link {
    display: inline-block;
    margin-top: 10px;
    font-weight: 500;
    text-decoration: none;
    font-size: 16px;
    transition: 0.3s ease
}

.reports__link:hover {
    text-decoration: underline
}

.reports__card--blue .reports__link {
    color: #4fa1f3
}

.reports__card--green .reports__link {
    color: #67bd37
}

.reports__card--orange .reports__link {
    color: #f09927
}

.reports__card--purple .reports__link {
    color: #9e4dd3
}

.guide-section {
    padding: 70px 0
}

.guide-title {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d;
    line-height: 1.2;
    animation: fadeUp 1s ease;
    letter-spacing: 2px;
    word-spacing: 5px
}

.guide-text {
    margin-top: 28px;
    color: #05132f;
    font-size: 16px;
    max-width: 420px;
    animation: fadeUp 1.3s ease;
    letter-spacing: 0px;
    line-height: 30px
}

.guide-card {
    padding: 0;
    overflow: hidden;
    animation: fadeUp 1.2s ease;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 30px #014efe2e;
    border: 0.5px solid #014efe2e;
    border-radius: 20px;
    opacity: 1
}

.guide-item {
    display: flex;
    align-items: center;
    gap: 0px;
    padding: 21px 23px;
    border-bottom: 1px solid #eee !important;
    transition: all 0.3s ease;
    cursor: pointer
}

.guide-item:last-child {
    border-bottom: none
}

.guide-item span {
    font-size: 22px;
    font-weight: 500;
    color: #222e34;
    min-width: 48px
}

.guide-item p {
    margin: 0;
    font-size: 20px;
    color: #222e34;
    font-weight: 500
}

.guide-item:hover {
    background: #f0f4ff;
    transform: translateX(1px)
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.mains-titles {
    text-align: center;
    color: #2a3c9b;
    font-weight: 800;
    margin-bottom: 25px;
    font-size: 42px
}

.info-box {
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 10px;
    padding: 24px 18px;
    font-size: 17px;
    color: #2e345d;
    line-height: 33px
}

.pricing-box {
    background: #f6f6f7;
    border-radius: 12px;
    padding: 10px 30px
}

.table-head {
    font-size: 18px;
    color: #222e34;
    padding: 12px 25px;
    font-weight: 600
}

.plan-row {
    margin-bottom: 13px;
    padding: 25px 25px;
    border-radius: 10px;
    font-size: 15px;
    transition: 0.2s;
    background: white;
    align-items: center
}

.plan-row:hover {
    background: #f7f9ff
}

.plan-row.active {
    background: #2f42a5;
    color: #fff;
    border-radius: 8px
}

.plan-row.active small {
    color: #dfe3ff
}

.price {
    text-align: justify;
    font-weight: 600;
    display: flex;
    justify-content: space-between
}

.badge-off {
    background: #e9edff;
    color: #2f49ff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 20px;
    margin-left: 6px
}

.plan-row.active .badge-off {
    background: #ffffff;
    color: #2f49ff
}

@media (max-width: 768px) {
    .table-head {
        display: none
    }

    .workflow {
        background: #0b1f5b;
        padding: 80px 0px;
        color: #fff
    }

    .plan-row {
        display: block
    }

    .plan-row > div {
        display: flex;
        justify-content: space-between;
        margin: 4px 0
    }

    .spot-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease, filter 0.6s ease;
        min-height: 536px
    }
}

.page-number {
    font-size: 30px;
    font-weight: 700;
    color: #2d2d2d
}

.page-text {
    font-size: 14px;
    color: #2e345d
}

.pricing-box small {
    color: #2e345d;
    font-size: 18px;
    font-weight: 600
}

.italic {
    text-align: left;
    letter-spacing: 0.16px;
    color: #2e345d;
    opacity: 1;
    font-style: italic;
    font-size: 16px;
    font-weight: 500
}

.zenyx-headline {
    text-align: center;
    font-weight: 800;
    margin-bottom: 35px;
    color: #2e345d;
    font-size: 48px
}

.zenyx-tile {
    background: #ffffff;
    border: 1px solid #c4cbdb63;
    border-radius: 20px;
    padding: 0px;
    height: 100%;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease
}

.zenyx-tile:hover {
    transform: translateY(-7px)
}

.zenyx-badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 15px
}

.zenyx-badge-aqua {
    background: #27a2ac;
    color: #fff
}

.zenyx-badge-sky {
    background: #489cf0;
    color: #fff
}

.zenyx-tile {
    background: #ffffff;
    border: 1px solid #c4cbdb63;
    border-radius: 20px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%
}

.zenyx-text {
    font-size: 16px;
    color: #040135
}

.zenyx-subhead {
    font-weight: 600;
    margin-top: 10px;
    color: #27a2ac;
    font-size: 22px;
    margin-bottom: 21px;
    text-decoration: underline
}

.zenyx-points {
    list-style: none;
    padding-left: 0;
    height: auto;
    min-height: 200px
}

.zenyx-points li {
    font-size: 16px;
    margin-bottom: 24px;
    color: #040135
}

.zenyx-points li {
    display: flex;
    align-items: baseline;
    gap: 10px
}

.zenyx-points li::before {
    content: "✔";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: #45abb3;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold
}

.zenyx-snippet {
    background: #f4f5f599;
    border-radius: 10px;
    padding: 26px;
    font-size: 17px;
    margin-top: 15px;
    min-height: 200px
}

.zenyx-action {
    margin-top: 1px;
    border-radius: 8px;
    padding: 11px 22px;
    font-size: 16px;
    background-color: #27a2ac;
    border-color: #27a2ac
}

.btn-zenyx {
    padding: 14px 33px;
    background: #489cf0;
    border-radius: 8px;
    font-size: 16px;
    margin-top: 15px;
    color: #fff;
    border: none
}

.zynx-wrapper {
    padding: 45px;
    background: transparent linear-gradient(180deg, #fff6ea 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border-radius: 37px
}

.zynx-title {
    font-size: 48px;
    font-weight: 800
}

.zynx-title span {
    color: #8a8a8a
}

.zynx-img {
    border-radius: 20px;
    width: 100%
}

.zynx-pill {
    padding: 16px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    font-size: 18px;
    background: transparent linear-gradient(89deg, #fff0dc 0%, #fffdfa 100%) 0% 0% no-repeat padding-box;
    border-radius: 33px;
    color: #222e34;
    font-weight: 500
}

.zynx-pill::before {
    content: "✔";
    background: #ff9f43;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 12px
}

.zynx-step {
    position: relative;
    padding-left: 60px;
    margin-bottom: 35px
}

.zynx-step-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center
}

.zynx-step:nth-child(1) .zynx-step-number {
    background: #ebf9f9;
    border: 2px solid #68c4cb
}

.zynx-step:nth-child(2) .zynx-step-number {
    background: #f3fbee;
    border: 2px solid #8bce65
}

.zynx-step:nth-child(3) .zynx-step-number {
    background: #e9f4ff;
    border: 2px solid #489cf0
}

.zynx-step:nth-child(4) .zynx-step-number {
    background: #f9eeff;
    border: 2px solid #b874e4
}

.zynx-step h6 {
    color: #222e34;
    font-weight: 700;
    font-size: 20px
}

.zynx-step p {
    font-size: 14px;
    color: #05132f;
    margin-bottom: 5px
}

.zynx-link {
    font-size: 16px;
    font-weight: 500
}

.zynx-link.blue {
    color: #51bcc4;
    background: transparent
}

.zynx-link.green {
    color: #2ecc71;
    background: transparent
}

.zynx-link.orange {
    color: #f39c12;
    background: transparent
}

.zynx-link.purple {
    color: #9b59b6;
    background: transparent
}

.zenyx-setup-wrap {
    background: #f8f9f9b0 0% 0% no-repeat padding-box;
    border-radius: 37px
}

.zynx-toptext {
    font-size: 16px;
    color: #040135
}

.zynx-step {
    position: relative;
    padding-left: 100px;
    margin-bottom: 60px
}

.setup-haed p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 16px;
    color: #040135
}

.zynx-step-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-weight: 600;
    background: #fff;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2
}

.zynx-step::after {
    content: "";
    position: absolute;
    left: 28px;
    top: 56px;
    width: 2px;
    height: calc(100% - -20px);
    background: #dcdcdc
}

.zynx-step:last-child::after {
    display: none
}

.nexon-sec {
    padding: 50px 0 50px;
    text-align: center
}

.nexon-title {
    font-size: 48px;
    font-weight: 800;
    color: #2f3a56;
    margin-bottom: 39px
}

.nexon-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px
}

.nexon-badge {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 14px 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 550;
    color: #4b5563;
    transition: all 0.3s ease
}

.nexon-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08)
}

.nexon-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    min-width: 40px;
    min-height: 40px
}

.bg-soft-purple {
    background: #efe9ff;
    color: #7c3aed
}

.bg-soft-orange {
    background: #fff3e6;
    color: #f97316
}

.bg-soft-green {
    background: #e8f8ef;
    color: #16a34a
}

.bg-soft-blue {
    background: #e6f0ff;
    color: #2563eb
}

.bg-soft-gray {
    background: #f1f5f9;
    color: #475569
}

.bg-soft-cyan {
    background: #e0f7fa;
    color: #0891b2
}

@media (max-width: 767px) {
    .table-head {
        display: none
    }

    .plan-row {
        display: block;
        padding: 15px;
        margin-bottom: 15px;
        border: 1px solid #eee;
        border-radius: 12px;
        background: #fff
    }

    .plan-row .col-3 {
        width: 100%;
        display: flex;
        justify-content: initial;
        padding: 6px 0
    }

    .plan-row .col-3::before {
        content: attr(data-label);
        font-weight: 600;
        color: #666
    }

    .pages-wrap {
        display: flex;
        align-items: center;
        gap: 6px
    }

    .page-number {
        font-size: 18px;
        font-weight: 700
    }

    .price {
        font-weight: bold;
        color: #000
    }

    .badge-off {
        margin-left: 8px;
        font-size: 10px
    }
}

.ai-access-wrapper {
    background-color: #f6f0ec;
    height: 510px
}

.ai-access-heading {
    font-size: 48px;
    font-weight: 700;
    color: #2d2f55;
    margin-bottom: 30px
}

.ai-access-heading span {
    color: #919191;
    font-weight: 800
}

.ai-access-description {
    color: #040135;
    margin: 20px 0 30px;
    line-height: 1.7;
    max-width: 570px;
    font-size: 16px
}

.ai-access-btn {
    border: 2px solid #2e345d;
    padding: 12px 24px;
    color: #040135;
    font-weight: 500;
    border-radius: 0px;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    font-size: 16px
}

.ai-access-btn:hover {
    background-color: #2d2f55;
    color: #fff
}

.ai-visual-block {
    position: relative
}

.ai-img {
    width: 100%;
    border-radius: 0px;
    object-fit: cover
}

.ai-img-top {
    margin-bottom: 7px
}

.ai-img-main {
    height: 260px
}

.ai-img-side {
    height: 260px
}

.role-access-section {
    background: #f5f6f8;
    padding: 70px 0
}

.role-access-title {
    font-size: 40px;
    font-weight: 700;
    color: #2d2f55;
    margin-bottom: 30px
}

.role-access-image img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover
}

.role-access-desc {
    color: #6c757d;
    font-size: 15px;
    margin-bottom: 30px;
    max-width: 588px
}

.access-feature-box {
    display: flex;
    gap: 15px;
    padding-top: 0;
    align-items: baseline;
    margin-bottom: 25px
}

.access-divider {
    border-left: 1px solid #ddd
}

.access-icon {
    font-size: 28px;
    color: #2d2f55
}

.access-feature-content h6 {
    font-weight: 700;
    color: #222e34;
    margin-bottom: 6px;
    font-size: 22px
}

.role-access-wrapper {
    background-color: #f7f8f8
}

.access-feature-content p {
    font-size: 16px;
    color: #040135;
    margin-bottom: 22px
}

.role-access-wrapper p {
    margin-bottom: 32px !important;
    font-size: 15px;
    color: #040135;
    line-height: 25px
}

.role-access-wrapper .access-btn {
    border: 1px solid #2e345d;
    padding: 13px 27px;
    border-radius: 6px;
    font-size: 16px;
    color: #2d2f55;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s
}

.access-btn:hover {
    background: #2d2f55;
    color: #fff
}

@media (max-width: 991px) {
    .ai-access-wrapper {
        background-color: #f6f0ec;
        height: auto;
        padding: 6px
    }
}

.ic-section-wrap {
    padding: 50px 0
}

.ic-main-title {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d
}

.ic-main-title span {
    color: #919191;
    font-weight: 800
}

.ic-sub-description {
    margin-top: 17px;
    color: #2e345d;
    max-width: 435px;
    font-size: 16px;
    margin-bottom: 58px
}

.ic-feature-item {
    text-align: center;
    margin-bottom: 40px
}

.ic-icon-box {
    width: 110px;
    height: 110px;
    margin: 0 auto 15px;
    transform: rotate(45deg);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center
}

.ic-icon-inner {
    transform: rotate(-45deg);
    font-size: 47px;
    color: #fff
}

.ic-bg-yellow {
    background: #fff6ea
}

.ic-bg-green {
    background: #f3fbee
}

.ic-bg-purple {
    background: #f9eeff
}

.ic-bg-blue {
    background: #e9f4ff
}

.ic-bg-gray {
    background: #f5f7f8
}

.ic-bg-teal {
    background: #ebf9f9
}

.ic-icon-box {
    width: 145px;
    height: 145px;
    margin: 0 auto 34px;
    transform: rotate(45deg);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

.ic-icon-inner {
    transform: rotate(-45deg);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 39px
}

.ic-icon-inner i {
    font-size: 32px;
    color: #fff
}

.ic-yellow {
    background: #f4b400
}

.ic-green {
    background: #34a853 !important
}

.ic-purple {
    background: #a142f4
}

.ic-blue {
    background: #4285f4
}

.ic-gray-in {
    background: #9aa0a6
}

.ic-teal {
    background: #20c997
}

.ic-feature-text {
    font-size: 20px;
    color: #222e34;
    max-width: 324px;
    margin: auto;
    font-weight: 600
}

@media (max-width: 991px) {
    .ic-icon-box {
        width: 134px;
        height: 134px;
        margin: 0 auto 34px;
        transform: rotate(45deg);
        border-radius: 40px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .access-feature-box {
        display: flex;
        gap: 15px;
        padding-top: 36px;
        align-items: baseline;
        margin-bottom: 25px
    }

    .ic-feature-text {
        font-size: 14px;
        color: #222e34;
        max-width: 367px;
        margin: auto;
        font-weight: 600
    }

    .ic-section-wrap {
        padding: 13px 0
    }
}

.bx-intro-wrap {
    position: relative;
    background: url('/user/img/brightspace.png') center/cover no-repeat;
    min-height: 580px;
    display: flex;
    align-items: center;
    color: #fff
}

.bx-intro-wrap::before {
    content: "";
    position: absolute;
    inset: 0
}

.bx-inner-content {
    position: relative;
    z-index: 2
}

.bx-mini-tag {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: 25px;
    font-size: 13px;
    display: inline-block
}

.bx-btn-main {
    background: #00bcd4;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    color: #fff !important
}

.pricing-card .btn-primary {
    color: var(--bs-white);
    border: none;
    border-radius: 6px !important;
    font-size: 15px;
    font-weight: 500;
    padding: 13px 18px !important
}

.custom-badge {
    background: transparent;
    color: #3d66fb !important;
    padding: 6px 16px;
    font-size: 14px;
    border-radius: 50px;
    font-weight: 500;
    letter-spacing: 0.5px;
    display: inline-block;
    border: 1px solid #3d66fb;
    font-weight: 600
}

.section-label .line {
    width: 40px;
    height: 2px;
    background: #0d6efd
}

.bx-btn-alt {
    border-radius: 30px;
    padding: 10px 20px
}

.bx-diagram-box {
    border-radius: 63px;
    padding: 30px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2)
}

.bx-diagram-title {
    font-weight: 600;
    margin-bottom: 15px
}

.bx-col-block p {
    margin-bottom: 5px;
    font-weight: 600
}

.bx-col-block small {
    display: block;
    line-height: 1.4
}

.bx-bottom-strip {
    background: #ffffff;
    padding: 25px 0;
    position: relative;
    margin-top: -50px
}

.bx-strip-item {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #040135
}

.bx-inner-content h1 {
    font-size: 48px;
    color: #fff
}

.bx-inner-content p {
    font-size: 16px;
    margin: 20px 0 30px;
    line-height: 1.7;
    max-width: 570px
}

.zenyx-1 {
    padding: 27px;
    background: #e9f8f9;
    border-radius: 20px 20px 0 0;
    min-height: 280px
}

.integration {
    padding: 27px
}

.proceers {
    margin-top: auto;
    background: #e9f8f9 0% 0% no-repeat padding-box;
    border-radius: 0px 0px 20px 20px;
    height: 70px
}

.zenyx-titles {
    font-weight: 800;
    color: #2c3553;
    font-size: 48px
}

.zenyx-titles span {
    color: #2bb3a3
}

.zenyx-guide-list {
    list-style: none;
    padding: 0
}

.zenyx-guide-list li {
    padding: 10px 15px;
    border-radius: 30px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent linear-gradient(84deg, #e9f8f9 0%, #fafbfb 100%) 0% 0% no-repeat padding-box;
    border-radius: 33px;
    opacity: 1
}

.zenyx-step-card {
    background: #fff;
    border-radius: 15px;
    padding: 48px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.zenyx-step-number {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 13px solid #27a2ac;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -80px auto 20px;
    font-weight: 600;
    color: #2c3553;
    min-width: 68px;
    min-height: 68px;
    font-size: 20px
}

.zenyx-step-card h6 {
    font-size: 20px;
    color: #2e345d;
    margin-bottom: 21px
}

.zenyx-btn-outline {
    border: 1px solid #27a2ac;
    color: #2bb3a3;
    border-radius: 20px;
    padding: 8px 18px;
    background: transparent;
    font-size: 13px
}

.bx-diagram-box {
    background-image: url('/user/img/Group493.png');
    background-size: cover;
    background-position: center;
    height: 383px
}

.zenyx-btn-outline:hover {
    background: #2bb3a3;
    color: #fff
}

.zenyx-step-card p {
    font-size: 14px;
    color: #040135;
    min-height: 110px
}

:root {
    --bg: #ffffff;
    --bg-subtle: #f8f9fb;
    --bg-muted: #f1f3f7;
    --bg-overlay: #e9ecf3;
    --orange: #e8590c;
    --orange-lt: #f97316;
    --orange-dim: #fff3ed;
    --orange-ring: rgba(232, 89, 12, 0.14);
    --orange-glow: rgba(232, 89, 12, 0.07);
    --blue: #1d6ae8;
    --blue-lt: #3b82f6;
    --blue-dim: #eff5ff;
    --blue-ring: rgba(29, 106, 232, 0.13);
    --green: #0d9668;
    --green-dim: #ecfdf5;
    --border: #e4e7ef;
    --border-md: #cdd2e0;
    --border-dk: #b0b8cc;
    --text: #0d1117;
    --text-mid: #3d4758;
    --text-soft: #6b7590;
    --text-xsoft: #9aa0b5;
    --mono: "Geist Mono", monospace;
    --r: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --shadow-xs: 0 1px 3px rgba(13, 17, 23, 0.06), 0 1px 2px rgba(13, 17, 23, 0.04);
    --shadow-sm: 0 2px 8px rgba(13, 17, 23, 0.06), 0 4px 20px rgba(13, 17, 23, 0.05);
    --shadow-md: 0 4px 16px rgba(13, 17, 23, 0.07), 0 12px 40px rgba(13, 17, 23, 0.07);
    --shadow-lg: 0 8px 30px rgba(13, 17, 23, 0.08), 0 24px 64px rgba(13, 17, 23, 0.08)
}

.breadcrumb-bar {
    padding: 10px 48px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-xsoft)
}

.breadcrumb-bar a {
    color: var(--text-soft);
    text-decoration: none;
    transition: color 0.15s
}

.breadcrumb-bar a:hover {
    color: var(--blue)
}

.bc-sep {
    color: var(--border-dk)
}

.bc-current {
    color: var(--text-mid);
    font-weight: 500
}

.bc-lms-tag {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--orange-dim);
    color: var(--orange);
    border: 1px solid var(--orange-ring);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    letter-spacing: 0.02em
}

.arch-panel {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
    top: -80px
}

.arch-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border)
}

.arch-dots {
    display: flex;
    gap: 6px
}

.arch-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.arch-dot.r {
    background: #ff5f57
}

.arch-dot.y {
    background: #febc2e
}

.arch-dot.g {
    background: #28c840
}

.arch-filename {
    font-family: "DM Sans", sans-serif;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 6px
}

.arch-body {
    padding: 24px;
    background: white
}

.arch-svg {
    width: 100%;
    display: block
}

.section-cards {
    padding: 0 48px 72px;
    background: var(--bg)
}

.cards-inner {
    max-width: 1200px;
    margin: 0 auto
}

.cards-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border)
}

.ch-left {
}

.ch-overline {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--orange);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px
}

.ch-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.7px
}

.ch-right {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-soft);
    font-family: "DM Sans", sans-serif
}

.ch-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green)
}

.int-cards {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 20px
}

.icard {
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: white;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s
}

.icard:hover {
    border-color: var(--border-md);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px)
}

.icard {
    position: relative
}

.icard::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    opacity: 0;
    transition: opacity 0.3s
}

.icard.o::after {
    background: linear-gradient(90deg, var(--orange), var(--orange-lt))
}

.icard.b::after {
    background: linear-gradient(90deg, var(--blue), var(--blue-lt))
}

.icard:hover::after {
    opacity: 1
}

.icard-vis {
    padding: 28px 28px 22px;
    position: relative;
    overflow: hidden
}

.icard-vis.o {
    background: linear-gradient(135deg, #fff8f5 0%, #fff3ed 100%)
}

.icard-vis.b {
    background: linear-gradient(135deg, #f5f8ff 0%, #eff5ff 100%)
}

.icard-icon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px
}

.icard-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px
}

.icard-icon.o {
    background: white;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--orange-ring)
}

.icard-icon.b {
    background: white;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--blue-ring)
}

.icard-badge {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 100px;
    letter-spacing: 0.04em
}

.icard-badge.o {
    background: white;
    color: var(--orange);
    border: 1px solid var(--orange-ring)
}

.icard-badge.b {
    background: white;
    color: var(--blue);
    border: 1px solid var(--blue-ring)
}

.icard-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.4px;
    margin-bottom: 5px
}

.icard-sub {
    font-family: "Lora", serif;
    font-style: italic;
    font-size: 13px;
    color: var(--text-soft);
    margin-bottom: 11px
}

.icard-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-mid);
    font-weight: 400
}

.icard-body {
    padding: 22px 28px;
    flex: 1
}

.feat-list-label {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-xsoft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 13px
}

.feat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px
}

.feat-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    color: var(--text-mid);
    line-height: 1.5
}

.feat-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px
}

.feat-icon.o {
    background: var(--orange-dim);
    color: var(--orange)
}

.feat-icon.b {
    background: var(--blue-dim);
    color: var(--blue)
}

.code-blk {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    margin-top: 18px
}

.code-blk-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.code-lang-tag {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 5px
}

.code-lang-tag span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    display: inline-block
}

.copy-btn {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    color: var(--text-xsoft);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s
}

.copy-btn:hover {
    color: var(--text-soft)
}

pre {
    font-family: "DM Sans", sans-serif;
    font-size: 11.5px;
    line-height: 1.75;
    color: var(--text-soft);
    overflow-x: auto
}

.t-k {
    color: #0550ae
}

.t-s {
    color: #116329
}

.t-o {
    color: var(--orange)
}

.t-c {
    color: var(--text-xsoft);
    font-style: italic
}

.icard-footer {
    padding: 18px 28px;
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.icard-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    padding: 13px 18px;
    border-radius: 8px;
    transition: all 0.2s
}

.icard-cta.o {
    background: var(--orange);
    border-color: var(--orange);
    color: white
}

.icard-cta.o:hover {
    background: var(--orange-lt);
    box-shadow: 0 4px 16px var(--orange-ring)
}

.icard-cta.b {
    background: var(--blue);
    color: white
}

.icard-cta.b:hover {
    background: var(--blue-lt);
    box-shadow: 0 4px 16px var(--blue-ring)
}

.icard-cta svg {
    transition: transform 0.2s
}

.icard-cta:hover svg {
    transform: translateX(3px)
}

.icard-cert {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    color: var(--text-soft)
}

.section-how {
    padding: 72px 48px;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border)
}

.how-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns:360px 1fr;
    gap: 80px;
    align-items: start
}

.how-overline {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--orange);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px
}

.how-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.8px;
    line-height: 1.1;
    margin-bottom: 14px
}

.how-sub {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-soft);
    font-weight: 300;
    margin-bottom: 28px
}

.how-quick-links {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.how-ql {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid);
    text-decoration: none;
    background: white;
    border: 1px solid var(--border);
    transition: all 0.2s
}

.how-ql:hover {
    border-color: var(--orange);
    color: var(--orange);
    background: var(--orange-dim)
}

.ql-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    color: var(--text-soft);
    flex-shrink: 0
}

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

.step {
    display: grid;
    grid-template-columns:44px 1fr;
    gap: 18px;
    position: relative
}

.step:not(:last-child) .step-connector {
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: -8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--border-md), var(--border))
}

.step-numwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2px
}

.step-num {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: white;
    border: 1.5px solid var(--border-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    position: relative;
    z-index: 1;
    transition: all 0.2s
}

.step:hover .step-num {
    background: var(--orange-dim);
    border-color: var(--orange-ring);
    color: var(--orange)
}

.step-body {
    padding: 2px 0 36px
}

.step-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -0.2px
}

.step-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-soft);
    font-weight: 300
}

.step-pill {
    display: inline-block;
    margin-top: 10px;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500
}

.step-pill.o {
    background: var(--orange-dim);
    color: var(--orange);
    border: 1px solid var(--orange-ring)
}

.step-pill.b {
    background: var(--blue-dim);
    color: var(--blue);
    border: 1px solid var(--blue-ring)
}

.step-pill.g {
    background: var(--green-dim);
    color: var(--green);
    border: 1px solid rgba(13, 150, 104, 0.15)
}

.standards-bar {
    padding: 28px 48px;
    background: white;
    border-bottom: 1px solid var(--border)
}

.std-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0
}

.std-label {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-xsoft);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-right: 36px;
    margin-right: 36px;
    border-right: 1px solid var(--border)
}

.std-list {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center
}

.std-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid)
}

.std-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px
}

.section-cta {
    padding: 72px 48px;
    background: var(--bg)
}

.cta-inner {
    max-width: 1200px;
    margin: 0 auto
}

.section-cta .cta-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none
}

.cta-text {
    position: relative;
    z-index: 1
}

.cta-overline {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px
}

.cta-title {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 900;
    color: white;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 10px
}

.cta-sub {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    max-width: 420px
}

.cta-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
    min-width: 190px
}

.btn-cta-a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--orange);
    color: white;
    padding: 13px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap
}

.btn-cta-a:hover {
    background: var(--orange-lt);
    box-shadow: 0 0 28px rgba(232, 89, 12, 0.35)
}

.btn-cta-b {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.13);
    transition: all 0.2s;
    white-space: nowrap
}

.btn-cta-b:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border-color: rgba(255, 255, 255, 0.25)
}

@keyframes up {
    from {
        opacity: 0;
        transform: translateY(18px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.u {
    animation: up 0.5s ease both
}

.d1 {
    animation-delay: 0.05s
}

.d2 {
    animation-delay: 0.12s
}

.d3 {
    animation-delay: 0.2s
}

.d4 {
    animation-delay: 0.28s
}

.zenyx-1 .btn-outline-primary {
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 0.5px solid #27a2ac;
    border-radius: 14px;
    color: #27a2ac;
    font-weight: 500;
    padding: 8px 20px
}

.integration pre {
    font-size: 15px
}

.lti-hero {
    position: relative;
    background: url('/user/img/Group491.png') center/cover no-repeat;
    min-height: 600px;
    display: flex;
    align-items: center;
    color: #fff
}

.lti-hero::before {
    content: "";
    position: absolute;
    inset: 0
}

.lti-content {
    position: relative;
    z-index: 2
}

.lti-tag {
    background: #fff6ea;
    padding: 6px 24px;
    border-radius: 20px;
    display: inline-block;
    font-size: 13px;
    color: #ff8330;
    border: 1px solid #ff8330;
    font-weight: 600
}

.lti-panel {
    background: #37241e47;
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(1px);
    border: 1px solid #ff8330
}

.lti-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 12px solid #ff7a2f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin: 0 auto 15px;
    font-size: 27px;
    position: relative;
    top: 45px;
    background: #fff;
    color: #ff8330
}

.lti-mini-box {
    background: #fff;
    color: #333;
    border-radius: 12px;
    padding: 15px;
    text-align: center
}

.lti-stats {
    margin-top: 30px
}

.lti-stats h4 {
    font-weight: 800;
    font-size: 32px;
    color: #fff
}

.lti-split-card h5 {
    font-weight: 800;
    font-size: 29px;
    color: #2e345d;
    margin-bottom: 17px;
    margin-top: 13px
}

.lti-split-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff
}

.lti-content small {
    font-size: 14px
}

.lti-panel .bg-warning {
    --bs-bg-opacity: 1;
    background-color: #ff8330;
    color: #fff !important;
    background: #ff8330 0% 0% no-repeat padding-box !important;
    border: 0.5px solid #05132f1c;
    border-radius: 14px;
    padding: 7px 15px
}

.lti-panel .bg-light {
    --bs-bg-opacity: 1;
    background-color: #ff8330;
    color: #040135 !important;
    background: #f7f8f8 0% 0% no-repeat padding-box;
    border: 0.5px solid #05132f1c;
    border-radius: 14px;
    opacity: 1;
    padding: 7px 15px
}

.lti-content h1 {
    font-size: 48px;
    font-weight: 800;
    color: #fff
}

.lti-card-header {
    background: #f5efe8;
    padding: 8px;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    color: #2e345d
}

.lti-card-body {
    padding: 15px
}

.lti-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    margin-top: 21px !important
}

.lti-bars span {
    flex: 1;
    border-radius: 3px
}

.lti-bars-orange span {
    background: #ff7a2f
}

.rti-bars-orange span {
    background: #489cf0
}

.lti-bars-orange span:nth-child(1) {
    height: 40%
}

.lti-bars-orange span:nth-child(2) {
    height: 60%
}

.lti-bars-orange span:nth-child(3) {
    height: 80%
}

.lti-bars-orange span:nth-child(4) {
    height: 65%
}

.lti-bars-orange span:nth-child(5) {
    height: 105%
}

.lti-bars-orange span:nth-child(6) {
    height: 115%
}

.lti-bars-green span {
    background: #28c76f
}

.lti-bars-green span:nth-child(1) {
    height: 120%
}

.lti-bars-green span:nth-child(2) {
    height: 100%
}

.lti-bars-green span:nth-child(3) {
    height: 90%
}

.lti-bars-green span:nth-child(4) {
    height: 80%
}

.lti-bars-green span:nth-child(5) {
    height: 60%
}

.lti-bars-green span:nth-child(6) {
    height: 40%
}

.lti-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.4)
}

.db-header-area {
    text-align: center;
    margin-bottom: 50px
}

.db-type-label {
    color: #f57c00;
    font-weight: 500;
    padding: 6px 24px;
    margin-bottom: 24px;
    border: 0.5px solid #ff8330;
    border-radius: 14px;
    opacity: 1;
    font-size: 14px
}

.db-main-heading {
    font-size: 2.6rem;
    font-weight: 700;
    color: #1a1a1a
}

.db-option-card {
    background: white;
    overflow: hidden;
    transition: transform 0.3s ease;
    height: 100%;
    border: 1px solid #c4cbdb87;
    border-radius: 20px
}

.db-option-card:hover {
    transform: translateY(-8px)
}

.db-card-inner {
    padding-left: 20px;
    padding-top: 24px
}

.db-icon-wrapper {
    width: 60px;
    height: 60px;
    background: #fff0e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #f57c00;
    margin-bottom: 20px
}

.db-step-counter {
    font-size: 42px;
    font-weight: 700;
    color: #dfdfdf;
    position: absolute;
    top: 30px;
    right: 30px
}

.db-tag-item {
    background: #f3f5f8;
    color: #495057;
    font-size: 14px;
    padding: 5px 18px;
    margin-right: 8px;
    margin-bottom: 8px;
    display: inline-block;
    border: 0.5px solid #dcdfe2;
    border-radius: 14px
}

.db-primary-btn {
    background: #ff7a00;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 600;
    transition: all 0.3s;
    margin-top: 11px
}

.dbs-primary-btn {
    background: #3b92e9;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 600;
    transition: all 0.3s;
    margin-top: 11px
}

.db-primary-btn:hover {
    background: #e66a00;
    transform: translateX(5px)
}

.db-card-inner h3 {
    font-size: 23px
}

.db-status-row {
    background: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 33px;
    position: relative;
    top: 189px !important
}

.db-plugin-badge {
    color: #2bbd6f;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 500;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 0.5px solid #2bbd6f;
    border-radius: 14px
}

.db-lti-badge {
    background: #cce5ff;
    color: #004085;
    padding: 7px 17px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500 !important;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 0.5px solid #489cf0;
    border-radius: 14px;
    opacity: 1
}

.db-card-image {
    width: 100%;
    height: 215px;
    object-fit: cover
}

.db-status-row span {
    font-size: 14px;
    font-weight: 500
}

.db-card-inner p {
    color: #040135;
    max-width: 581px;
    font-size: 15px;
    line-height: 26px
}

@media (max-width: 991px) {
    .bx-diagram-box {
        background-image: url('/user/img/Group493.png');
        background-size: cover;
        background-position: center;
        height: 255px
    }

    .bx-inner-content {
        position: relative;
        z-index: 2;
        margin-top: 40px
    }

    .bx-btn-alt {
        border-radius: 30px;
        padding: 10px 20px;
        margin-top: 22px;
        margin-bottom: 26px
    }

    .fs-3 {
        font-size: calc(2.3rem + 0.6vw) !important
    }
}

.doc-layout {
    display: flex
}

.doc-sidebar {
    width: 270px;
    background: #1f2235;
    color: #fff;
    padding: 20px 0;
    min-height: 100vh
}

.doc-logo {
    font-weight: 500;
    font-size: 22px
}

.doc-sub {
    font-size: 12px;
    color: #aaa
}

.doc-version {
    padding: 6px 25px;
    font-size: 14px;
    display: inline-block;
    margin: 15px 0;
    background: #01e3fb1c 0% 0% no-repeat padding-box;
    border: 0.5px solid #01e3fb;
    border-radius: 17px;
    color: #ffffff
}

.doc-side-card {
    border-radius: 10px;
    padding: 12px 11px;
    margin-bottom: 26px;
    background: #353552 0% 0% no-repeat padding-box;
    border: 0.5px solid #52526a
}

.doc-side-title {
    font-size: 13px;
    color: #01e3fb;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 450
}

.doc-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    margin-bottom: 16px;
    font-size: 13px;
    background: #353552 0% 0% no-repeat padding-box;
    border: 0.5px solid #67677a99;
    border-radius: 5px
}

.doc-link span {
    font-size: 11px;
    padding: 4px 3px;
    border-radius: 20px;
    color: #fff;
    width: 56px;
    text-align: center;
    min-width: 56px
}

.get {
    background: #01e3fb1c 0% 0% no-repeat padding-box;
    border: 0.5px solid #01e3fb;
    border-radius: 17px
}

.post {
    background: #fbb8010d 0% 0% no-repeat padding-box;
    border: 0.5px solid #fbb801;
    border-radius: 17px
}

.put {
    background: #d3ffd433 0% 0% no-repeat padding-box;
    border: 0.5px solid #26e67f;
    border-radius: 17px;
    opacity: 1
}

.delete {
    background: #ffb7f61a 0% 0% no-repeat padding-box;
    border: 0.5px solid #ffb7f6;
    border-radius: 17px
}

.gets {
    background: #d3ffd433 0% 0% no-repeat padding-box;
    border: 0.5px solid #26e67f;
    border-radius: 17px;
    opacity: 1
}

.doc-content {
    flex: 1;
    padding: 40px;
    max-width: 956px
}

.doc-pill {
    color: #6c63ff;
    padding: 5px 17px;
    font-size: 12px;
    display: inline-block;
    background: #eef2ff 0% 0% no-repeat padding-box;
    border: 0.5px solid #5d42e7;
    border-radius: 14px;
    margin-bottom: 17px
}

.doc-title {
    font-weight: 800;
    margin-top: 10px
}

.doc-title span {
    color: #5d42e7
}

.doc-url-box {
    padding: 17px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f3f5f8 0% 0% no-repeat padding-box;
    border: 1px solid #e8eaec;
    border-radius: 27px;
    gap: 2px
}

.doc-info {
    background: #eef2ff;
    border-radius: 12px;
    padding: 15px;
    margin-top: 20px
}

.doc-endpoint {
    background: #fff;
    border-radius: 30px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border: 1px solid #eee;
    font-size: 15px;
    color: #040135
}

.doc-method {
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 20px;
    color: #fff;
    margin-right: 10px;
    font-weight: 600;
    min-width: 65px;
    text-align: center
}

.doc-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #040135;
    font-size: 15px;
    min-width: 592px
}

.doc-content p {
    font-size: 15px;
    letter-spacing: 0px;
    color: #040135
}

.doc-url-box span strong {
    font-size: 14px;
    color: #040135;
    background: #ffffff 0% 0% no-repeat padding-box;
    border-radius: 14px;
    background-color: white;
    padding: 8px 16px
}

.doc-url-box span {
    font-size: 15px;
    color: #040135
}

.doc-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e9ecf1;
    display: flex;
    align-items: center;
    justify-content: center
}

.doc-info {
    background: #eef2ff;
    border-radius: 12px;
    padding: 15px
}

.doc-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #6c63ff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0
}

.delete-1 {
    background: #ffb7f61a 0% 0% no-repeat padding-box;
    border: 0.5px solid #ffb7f6;
    border-radius: 17px;
    color: #bc456b
}

.post-1 {
    background: #e8f2ef 0% 0% no-repeat padding-box;
    border-radius: 14px;
    color: #2b8f68
}

.put-1 {
    background: #fff6ea 0% 0% no-repeat padding-box;
    border-radius: 14px;
    color: #ff8330
}

.doc-infos {
    background: #f9e5ef85;
    border-radius: 12px;
    padding: 15px
}

.doc-info-icons {
    width: 49px;
    height: 49px;
    border-radius: 10px;
    background: #bc456b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0
}

.get-1 {
    background: #e3e5fa94 0% 0% no-repeat padding-box;
    border-radius: 14px;
    color: #5d42e7
}

.doc-side-card .doc-link {
    background: transparent;
    border-color: transparent;
    padding: 3px 0px;
    margin-bottom: 10px;
    font-size: 13px;
    align-items: center;
    gap: 15px;
    justify-content: start
}

.api-status-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04)
}

.api-status-table {
    border-collapse: collapse
}

.api-status-table thead {
    background: #eef0f7
}

.api-status-table th {
    text-align: left;
    padding: 16px;
    font-size: 14px;
    color: #6b6f82;
    font-weight: 600
}

.api-status-table td {
    padding: 16px;
    font-size: 14px;
    color: #040135;
    font-weight: 400
}

.api-status-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #f1f2f6
}

.st-success {
    color: #28c76f !important;
    font-weight: 600
}

.st-warning {
    color: #ff9f43 !important;
    font-weight: 600
}

.st-danger {
    color: #ea5455 !important;
    font-weight: 600
}

.doc-layout {
    display: flex
}

.api-status-note {
    background: #fff;
    border-radius: 20px;
    padding: 14px 20px;
    font-size: 13px;
    margin-top: 15px;
    color: #6b6f82;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #dcdfe2a6;
    border-radius: 27px
}

.rti-hero {
    position: relative;
    background: url('/user/img/Group490.png') center/cover no-repeat;
    min-height: 600px;
    display: flex;
    align-items: center;
    color: #fff
}

.rti-tag {
    background: #e9f4ff 0% 0% no-repeat padding-box;
    border: 0.5px solid #489cf0;
    border-radius: 14px;
    opacity: 1;
    padding: 6px 24px;
    display: inline-block;
    font-size: 13px;
    color: #2f87df;
    font-weight: 600
}

.rti-panel {
    background: #37241e47;
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(1px);
    border: 1px solid #ff8330;
    background: #0b437b66 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 25px #00000017;
    border: 1px solid #489cf0
}

.rti-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 12px solid #489cf0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin: 0 auto 15px;
    font-size: 27px;
    position: relative;
    top: 45px;
    background: #fff;
    color: #489cf0
}

.rti-bars span {
    flex: 1;
    border-radius: 3px
}

.rti-bars-orange span:nth-child(1) {
    height: 40%
}

.rti-card-body {
    padding: 15px
}

.rti-card-header {
    background: #f5efe8;
    padding: 8px;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    color: #2e345d
}

.rti-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    margin-top: 21px !important
}

.rti-bars-orange span:nth-child(2) {
    height: 60%
}

.rti-bars-orange span:nth-child(3) {
    height: 80%
}

.rti-bars-orange span:nth-child(4) {
    height: 65%
}

.rti-bars-orange span:nth-child(5) {
    height: 105%
}

.rti-bars-orange span:nth-child(6) {
    height: 115%
}

.rti-split-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff
}

.db-type-label-1 {
    color: #489cf0;
    font-weight: 500;
    padding: 6px 24px;
    margin-bottom: 24px;
    border: 0.5px solid #489cf0;
    border-radius: 14px;
    opacity: 1;
    font-size: 14px
}

.dbs-icon-wrapper {
    width: 60px;
    height: 60px;
    background: #e9f4ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #3b92e9;
    margin-bottom: 20px
}

.mti-hero {
    position: relative;
    background: url('/user/img/Group489.png') center/cover no-repeat;
    min-height: 541px;
    display: flex;
    align-items: center;
    color: #fff
}

.mti-tag {
    padding: 6px 24px;
    display: inline-block;
    font-size: 13px;
    color: #ffffff;
    font-weight: 600;
    background: #b273d53b;
    border: 0.5px solid #a85adb;
    border-radius: 14px;
    opacity: 1
}

.mti-bars-orange span {
    background: #a85adb
}

.mti-bars span {
    flex: 1;
    border-radius: 3px
}

.mti-panel {
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(1px);
    background: #3d11634a 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 25px #00000017;
    border: 0.5px solid #a85adb
}

.mti-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    margin-top: 21px !important
}

.mti-bars-orange span:nth-child(1) {
    height: 50%
}

.mti-bars-orange span:nth-child(2) {
    height: 60%
}

.mti-bars-orange span:nth-child(3) {
    height: 80%
}

.mti-bars-orange span:nth-child(4) {
    height: 65%
}

.mti-bars-orange span:nth-child(5) {
    height: 105%
}

.mti-bars-orange span:nth-child(6) {
    height: 115%
}

.mti-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 12px solid #a85adb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin: 0 auto 15px;
    font-size: 27px;
    position: relative;
    top: 45px;
    background: #fff;
    color: #a85adb
}

.dbs-type-label-1 {
    color: #a85adb;
    font-weight: 500;
    padding: 6px 24px;
    margin-bottom: 24px;
    border: 0.5px solid #a85adb;
    border-radius: 14px;
    opacity: 1;
    font-size: 14px
}

.dbs-icon-wrappers {
    width: 60px;
    height: 60px;
    background: #f9eeffbf;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #a85adb;
    margin-bottom: 20px
}

.dbsm-primary-btn {
    background: #a85adb;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 600;
    transition: all 0.3s;
    margin-top: 11px
}

.ati-hero {
    position: relative;
    background: url('/user/img/Group488.png') center/cover no-repeat;
    min-height: 541px;
    display: flex;
    align-items: center;
    color: #fff
}

.ati-tag {
    padding: 6px 24px;
    display: inline-block;
    font-size: 13px;
    color: #ffffff;
    font-weight: 600;
    background: #e02f2f1f;
    border: 0.5px solid #e02f2f;
    border-radius: 14px;
    opacity: 1
}

.ati-panel {
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(1px);
    background: #e02f2f3b;
    box-shadow: 0px 3px 25px #00000017;
    border: 0.5px solid #e02f2f
}

.ati-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 12px solid #e02f2f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin: 0 auto 15px;
    font-size: 27px;
    position: relative;
    top: 45px;
    background: #fff;
    color: #e02f2f
}

.ati-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    margin-top: 21px !important
}

.ati-bars-orange span:nth-child(1) {
    height: 50%
}

.ati-bars-orange span:nth-child(2) {
    height: 60%
}

.ati-bars-orange span:nth-child(3) {
    height: 80%
}

.ati-bars-orange span:nth-child(4) {
    height: 65%
}

.ati-bars-orange span:nth-child(5) {
    height: 105%
}

.ati-bars-orange span:nth-child(6) {
    height: 115%
}

.ati-bars span {
    flex: 1;
    border-radius: 3px
}

.ati-bars-orange span {
    background: #e02f2f
}

.abs-type-label-1 {
    color: #e02f2f;
    font-weight: 500;
    padding: 6px 24px;
    margin-bottom: 24px;
    border: 0.5px solid #e02f2f;
    border-radius: 14px;
    opacity: 1;
    font-size: 14px
}

.rti-integration {
    background: transparent linear-gradient(82deg, #f3f5f8 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.rti-card {
    background: #fff;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05)
}

.rti-icon {
    width: 67px;
    height: 67px;
    border-radius: 50%;
    background: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff5a3c;
    font-size: 36px;
    border: 1px solid #e02f2f
}

.rti-title {
    font-weight: 800;
    color: #2d3553;
    font-size: 30px;
    margin-bottom: 21px
}

.rti-desc {
    color: #040135;
    font-size: 15px
}

.rti-tags span {
    display: inline-block;
    padding: 6px 15px;
    margin: 2px;
    background: #f3f5f8 0% 0% no-repeat padding-box;
    border: 0.5px solid #dcdfe2;
    border-radius: 14px;
    font-size: 14px;
    color: #222e34;
    font-weight: 500
}

.rti-btn {
    background: #ff5a3c;
    color: #fff;
    border-radius: 25px;
    padding: 10px 20px
}

.rti-steps {
    background: #fff
}

.rti-subtitle {
    font-size: 12px;
    color: #ff5a3c;
    border: 1px solid #ffd5cd;
    padding: 5px 12px;
    border-radius: 20px
}

.rti-heading {
    font-weight: 600;
    color: #2d3553
}

.rti-step-box {
    text-align: center;
    padding: 20px
}

.rti-step-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #ffb3a7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    color: #ff5a3c;
    font-weight: 600;
    margin-bottom: 15px
}

.fc-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s
}

.fc-overlay {
    bottom: 148px;
    left: 0px;
    right: 20px;
    background: rgb(255 255 255);
    backdrop-filter: blur(14px);
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 4px 16px rgba(15, 23, 36, 0.06), 0 2px 4px rgba(15, 23, 36, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.8);
    margin-top: -155px
}

.fc-ov-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.fc-ov-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8896ab
}

.fc-ov-status {
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #059669
}

.fc-ov-status .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #059669
}

.fc-ov-bars {
    display: flex;
    gap: 3px;
    height: 28px;
    align-items: flex-end
}

.fc-ov-bars .bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: #0891b2;
    opacity: 0.2
}

.fc-ov-bars .bar.active {
    opacity: 1
}

.fc-ov-metric {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9
}

.fc-ov-metric span {
    font-size: 12px;
    color: #4a5568
}

.fc-ov-metric strong {
    font-size: 13px;
    font-weight: 700;
    color: #0f1724
}

.process-section {
    background: transparent
}

.process-badge {
    border: 1px solid #e02f2f;
    color: #e02f2f;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 14px;
    display: inline-block;
    font-weight: 500
}

.process-title {
    color: #2c2f4f;
    font-weight: 700
}

.process-wrapper {
    position: relative
}

.process-curve {
    position: absolute;
    top: 12px;
    left: 164px;
    width: 100%;
    height: 150px;
    z-index: 0
}

.process-path {
    fill: none;
    stroke: #d9d9d9;
    stroke-width: 2;
    stroke-dasharray: 6, 6
}

.process-item {
    position: relative;
    z-index: 1;
    max-width: 283px;
    margin: auto;
    text-align: center
}

.process-item--center {
    margin-top: 60px
}

.process-number {
    width: 97px;
    height: 97px;
    border: 2px solid #e02f2f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e02f2f;
    font-weight: 600;
    font-size: 33px;
    background: #ffffff;
    margin: auto;
    min-width: 97px;
    min-height: 97px
}

.process-heading {
    font-weight: 800;
    color: #2e345d;
    font-size: 22px;
    margin-top: 29px !important;
    margin-bottom: 18px
}

.process-text {
    font-size: 14px;
    color: #040135
}

@media (max-width: 768px) {
    .doc-layout {
        flex-direction: column
    }

    .process-curve {
        position: absolute;
        top: 12px;
        left: 164px;
        width: 100%;
        height: 150px;
        z-index: 0;
        display: none
    }

    .lti-stats h4 {
        font-weight: 800;
        font-size: 25px;
        color: #fff
    }

    .ati-tag {
        padding: 6px 24px;
        display: inline-block;
        font-size: 13px;
        color: #ffffff;
        font-weight: 600;
        background: #e02f2f1f;
        border: 0.5px solid #e02f2f;
        border-radius: 14px;
        opacity: 1;
        margin-top: 21px
    }
}

:root {
    --bg: #f8f9fc;
    --bg2: #ffffff;
    --bg3: #f1f3f9;
    --bg4: #e8ebf4;
    --border: #e2e5f0;
    --border2: #c9cfe0;
    --border3: #dde1ed;
    --text: #0f172a;
    --text2: #475569;
    --text3: #94a3b8;
    --text4: #64748b;
    --accent: #4f46e5;
    --accent2: #6366f1;
    --accent3: #818cf8;
    --accent-bg: #eef2ff;
    --accent-bg2: #e0e7ff;
    --accent-bd: #c7d2fe;
    --green: #059669;
    --green2: #10b981;
    --green-bg: #ecfdf5;
    --green-bg2: #d1fae5;
    --green-bd: #a7f3d0;
    --red: #dc2626;
    --red2: #ef4444;
    --red-bg: #fef2f2;
    --red-bg2: #fee2e2;
    --red-bd: #fecaca;
    --amber: #d97706;
    --amber2: #f59e0b;
    --amber-bg: #fffbeb;
    --amber-bg2: #fef3c7;
    --amber-bd: #fde68a;
    --purple: #7c3aed;
    --purple-bg: #f5f3ff;
    --purple-bd: #ddd6fe;
    --mono: "JetBrains Mono", monospace;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px
}

.layout {
    display: flex;
    min-height: 100vh
}

.sidebar {
    width: 272px;
    flex-shrink: 0;
    background: #2a2a40;
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 0 0 2rem;
    z-index: 10
}

.sidebar-logo {
    padding: 1.75rem 1.5rem 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
    background: #2a2a40
}

.logo-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px
}

.logo-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25)
}

.logo-icon svg {
    width: 20px;
    height: 20px
}

.logo-text h1 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0px;
    line-height: 1.2;
    margin-bottom: 0px
}

.logo-text p {
    font-size: 14px;
    color: #ffffff;
    font-family: "DM Sans", sans-serif;
    font-weight: 400
}

.version-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 8px;
    background: #01e3fb1c 0% 0% no-repeat padding-box;
    border: 0.5px solid #01e3fb;
    border-radius: 17px
}

.version-pill .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    position: relative
}

.version-pill .pulse::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    animation: ripple 2s infinite
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.6
    }
    100% {
        transform: scale(2.2);
        opacity: 0
    }
}

.version-pill span {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em
}

.sidebar-section {
    padding: 0.5rem 0.75rem;
    background: #35355266 0% 0% no-repeat padding-box;
    border: 0.5px solid #67677a99;
    border-radius: 5px;
    margin: 0 8px 0
}

.sidebar-section-label {
    font-size: 13px;
    font-weight: 500;
    font-family: "DM Sans", sans-serif;
    padding: 0.5rem 0.75rem 0.35rem;
    letter-spacing: 1.3px;
    color: #01e3fb;
    text-transform: uppercase
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent
}

.sidebar-link:hover {
    background: var(--bg3);
    color: var(--text);
    border-color: var(--border)
}

.sidebar-link.active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-bd)
}

.mbadge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 17px;
    padding: 3px 12px;
    min-width: 60px;
    text-align: center;
    flex-shrink: 0
}

.mbadge-get {
    color: #01e3fb;
    background: #01e3fb1c 0% 0% no-repeat padding-box;
    border: 0.5px solid #01e3fb;
    border-radius: 17px
}

.mbadge-post {
    color: #fbb801;
    background: #fbb8010d 0% 0% no-repeat padding-box;
    border: 0.5px solid #fbb801;
    border-radius: 17px
}

.mbadge-del {
    color: #ffb7f6;
    background: #ffb7f61a 0% 0% no-repeat padding-box;
    border: 0.5px solid #ffb7f6;
    border-radius: 17px
}

.mbadge-put {
    color: #26e67f;
    background: #d3ffd433 0% 0% no-repeat padding-box;
    border: 0.5px solid #26e67f;
    border-radius: 17px
}

.sidebar-divider {
    background: var(--border);
    margin: 0.5rem 1.25rem
}

.sidebar-auth-notice {
    margin: 0.75rem;
    padding: 22px 14px;
    background: #353552 0% 0% no-repeat padding-box;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: #fff;
    line-height: 1.5;
    border: 0.5px solid #52526a
}

.sidebar-auth-notice .notice-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: "DM Sans", sans-serif;
    margin-bottom: 6px
}

.main {
    flex: 1;
    padding: 2.5rem 3.5rem 6rem;
    max-width: 960px
}

.hero {
    margin-bottom: 1.5rem;
    padding-bottom: 0;
    border-bottom: transparent
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    background: var(--accent-bg);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--accent-bd)
}

.hero-eyebrow .circle-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: blink 2.5s infinite
}

@keyframes blink {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: 0.2
    }
}

.hero h2 {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 14px
}

.hero h2 .gradient-text {
    background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 50%, var(--accent2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.hero p {
    font-size: 15px;
    color: var(--text2);
    max-width: 540px;
    line-height: 1.75;
    margin-bottom: 22px;
    font-weight: 400
}

.base-url-box {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
    background: #f3f5f8 0% 0% no-repeat padding-box;
    border: 1px solid #e8eaec;
    border-radius: 27px
}

.base-url-box:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent-bd)
}

.bu-label {
    font-size: 14px;
    font-weight: 700;
    color: #0f141b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: #fff;
    padding: 3px 8px;
    border-radius: 4px
}

.bu-url {
    font-size: 15px;
    color: #040135;
    font-weight: 500
}

.bu-copy {
    background: none;
    border: none;
    color: var(--text3);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s;
    display: flex;
    align-items: center
}

.bu-copy:hover {
    color: var(--accent);
    background: var(--accent-bg)
}

.auth-banner {
    border: 1px solid #eef2ffb5;
=: var(--radius-md);
    padding: 26px 23px;
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    background: #eef2ffb5 0% 0% no-repeat padding-box;
    border-radius: 16px
}

.auth-banner-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: #5d42e7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25)
}

.auth-banner-content h4 {
    font-size: 16px;
    font-weight: 800;
    color: #202c32;
    margin-bottom: 9px
}

.auth-banner-content p {
    font-size: 14px;
    color: #040135 !important;
    line-height: 1.6
}

.auth-banner-content code {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    background: rgba(217, 119, 6, 0.1);
    border: 1px solid rgba(217, 119, 6, 0.2);
    padding: 2px 7px;
    border-radius: 4px;
    color: #92400e;
    font-weight: 600
}

.zenyx-1 .btn-outline-primary:hover {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 1.5rem 0 0
}

.hero-academics h1 {
    font-size: 48px;
    font-weight: 800;
    color: #2e345d;
    line-height: 1.3;
    letter-spacing: 1px
}

.sh-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    display: none
}

.sh-icon-auth {
    background: var(--accent-bg);
    border: 1px solid var(--accent-bd)
}

.sh-icon-folder {
    background: var(--amber-bg);
    border: 1px solid var(--amber-bd);
    display: none
}

.sh-icon-sub {
    background: var(--green-bg);
    border: 1px solid var(--green-bd);
    display: NONE
}

.sh-icon-report {
    background: var(--purple-bg);
    border: 1px solid var(--purple-bd)
}

.sh-icon-webhook {
    background: #fff0f6;
    border: 1px solid #fbb6ce
}

.sh-label {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #202c32;
    white-space: nowrap
}

.sh-line {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, var(--border2), transparent)
}

.endpoint-card {
    background: var(--bg2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    animation: slideUp 0.3s ease both
}

.endpoint-card:hover {
    border-color: var(--border2);
    box-shadow: var(--shadow-md)
}

.endpoint-card.open-card {
    border-color: var(--accent-bd);
    box-shadow: 0 0 0 3px var(--accent-bg), var(--shadow-md)
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(8px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.endpoint-card:nth-child(2) {
    animation-delay: 0.05s
}

.endpoint-card:nth-child(3) {
    animation-delay: 0.1s
}

.endpoint-card:nth-child(4) {
    animation-delay: 0.15s
}

.endpoint-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none
}

.endpoint-header:hover {
    background: var(--bg3)
}

.method-badge {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 5px 10px;
    min-width: 60px;
    text-align: center;
    flex-shrink: 0;
    border: 1px solid transparent
}

.mb-get {
    background: var(--green-bg);
    color: var(--green);
    border-color: var(--green-bd)
}

.mb-post {
    background: #e8f2ef 0% 0% no-repeat padding-box;
    border-radius: 14px;
    color: #2b8f68
}

.mb-delete {
    background: var(--red-bg);
    color: var(--red);
    border-color: var(--red-bd)
}

.mb-put {
    background: #fff0f6;
    color: #be185d;
    border-color: #fbb6ce
}

.ep-path {
    font-size: 14.5px;
    color: #040135;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400
}

.ep-label {
    font-size: 13px;
    color: #040135;
    flex-shrink: 0;
    font-weight: 500
}

.lock-icon {
    color: var(--amber);
    flex-shrink: 0;
    display: flex;
    align-items: center
}

.ep-chev {
    color: #434168;
    font-size: 11px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    background: #e9ecf1 0% 0% no-repeat padding-box
}

.endpoint-header:hover .ep-chev {
    background: var(--bg4)
}

.ep-chev.open {
    transform: rotate(90deg);
    color: var(--accent)
}

.endpoint-body {
    display: none;
    border-top: 1px solid var(--border);
    padding: 22px 24px 26px;
    background: linear-gradient(180deg, #fafbfe 0%, var(--bg2) 100%)
}

.endpoint-body.open {
    display: block
}

.ep-desc {
    font-size: 13.5px;
    color: var(--text2);
    line-height: 1.75;
    margin-bottom: 20px
}

.ep-desc strong {
    color: var(--text)
}

.toggle-row {
    display: flex;
    align-items: center;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    width: fit-content;
    margin-bottom: 20px
}

.tog-btn {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    transition: all 0.18s;
    background: transparent;
    color: var(--text3);
    letter-spacing: 0.01em
}

.tog-btn.active {
    background: var(--bg2);
    color: var(--accent);
    border: 1px solid var(--accent-bd);
    box-shadow: var(--shadow-sm)
}

.tab-panel {
    display: none
}

.tab-panel.active {
    display: block
}

.field-label {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
    margin: 18px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px
}

.field-label:first-child {
    margin-top: 0
}

.fl-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0
}

.fl-dot-green {
    background: var(--green)
}

pre.codeblock {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    color: var(--text2);
    overflow-x: auto;
    line-height: 1.8;
    white-space: pre;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.02);
    position: relative
}

pre.codeblock::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent3))
}

.ck-key {
    color: var(--accent);
    font-weight: 500
}

.ck-str {
    color: var(--green)
}

.ck-num {
    color: var(--amber);
    font-weight: 600
}

.ck-bool {
    color: #0ea5e9;
    font-weight: 600
}

.ck-null {
    color: var(--text3);
    font-style: italic
}

.ck-comment {
    color: var(--text3);
    font-style: italic
}

.param-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 4px
}

.param-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #040135;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg3)
}

.param-table tbody td {
    padding: 10px 10px;
    color: var(--text2);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.55
}

.param-table tbody tr:last-child td {
    border-bottom: none
}

.param-table tbody tr:hover td {
    background: var(--bg3)
}

.pn {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    color: var(--text);
    font-weight: 600
}

.pt {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    color: var(--purple);
    background: var(--purple-bg);
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid var(--purple-bd)
}

.pr {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--red);
    background: var(--red-bg);
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid var(--red-bd);
    letter-spacing: 0.02em
}

.po {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--green);
    background: var(--green-bg);
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid var(--green-bd);
    letter-spacing: 0.02em
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
    background: var(--green-bg);
    border: 1px solid var(--green-bd);
    padding: 5px 12px;
    border-radius: 6px;
    margin-bottom: 16px
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green)
}

.status-badge-err {
    color: var(--red);
    background: var(--red-bg);
    border-color: var(--red-bd)
}

.status-dot-err {
    background: var(--red)
}

.inline-code {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid;
    margin-top: 21px
}

.ic-accent {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-bd)
}

.ic-green {
    background: var(--green-bg);
    color: var(--green);
    border-color: var(--green-bd)
}

.ic-red {
    background: var(--red-bg);
    color: var(--red);
    border-color: var(--red-bd)
}

.ic-amber {
    background: var(--amber-bg);
    color: var(--amber);
    border-color: var(--amber-bd)
}

.response-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--accent-bg);
    border: 1px solid var(--accent-bd);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 12.5px;
    color: var(--text2);
    line-height: 1.65;
    margin-top: 14px !important
}

.rn-icon {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px
}

.pdf-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--red);
    background: var(--red-bg);
    border: 1px solid var(--red-bd);
    padding: 7px 14px;
    border-radius: 6px;
    margin-top: 4px
}

.error-table-wrap {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm)
}

.sidebar::-webkit-scrollbar {
    width: 4px
}

.sidebar::-webkit-scrollbar-track {
    background: transparent
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 4px
}

pre.codeblock::-webkit-scrollbar {
    height: 4px
}

pre.codeblock::-webkit-scrollbar-track {
    background: var(--bg3)
}

pre.codeblock::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 4px
}

.inline-codes {
    font-family: "DM Sans", sans-serif;
    font-size: 14px !important;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid;
    margin-top: 21px;
    background: transparent !important;
    border: none !important;
    color: #040135 !important
}

.section-heading {
    position: relative;
    display: inline-block
}

.section-heading .sub-title {
    display: block;
    font-size: 13px;
    color: #0d6efd;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px
}

.section-heading h2 {
    font-size: 32px;
    font-weight: 700;
    color: #111;
    margin: 0;
    position: relative;
    line-height: 39px
}

.heading-line {
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, #ff7a18, #ffb347);
    border-radius: 10px;
    margin-top: 8px;
    transition: 0.4s
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

.section-heading:hover .heading-line {
    width: 80px
}

@media (max-width: 768px) {
    .section-heading h2 {
        font-size: 26px
    }
}

.section-heading h2 {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(90deg, #014efe, #168490);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.pricing-top {
    background: radial-gradient(circle at top, #0d1b3d, #2f3fa3);
    color: #fff;
    padding: 80px 20px 239px
}

.badge-pill {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 16px
}

.pricing-wrapper .title {
    font-size: 48px;
    color: #fff;
    font-weight: 700
}

.pricing-tabs {
    display: inline-flex;
    width: auto;
    background: rgba(255, 255, 255, 0.1);
    padding: 7px 26px;
    border-radius: 30px
}

.pricing-wrapper .subtitle {
    color: #ffffff;
    font-size: 16px;
    opacity: 85%
}

.pricing-tabs .nav-link {
    color: #fff;
    border-radius: 20px;
    padding: 8px 24px;
    font-size: 16px
}

.pricing-tabs .nav-link.active {
    background: #3d66fb
}

.pricing-cards {
    margin-top: -227px
}

.pricing-card {
    background: #fff;
    border-radius: 14px;
    padding: 30px 0 0;
    text-align: center;
    transition: all 0.35s ease;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1)
}

.pricing-card:hover {
    transform: translateY(-10px) scale(1.12);
    z-index: 10;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2)
}

.pricing-cards:hover .pricing-card:not(:hover) {
    transform: scale(0.95)
}

.pricing-card h3 {
    font-size: 30px;
    font-weight: 700
}

.pricing-card ul {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    font-size: 15px
}

.popular-bar {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    background: #4c6fff;
    color: #fff;
    padding: 14px;
    border-radius: 12px 12px 0 0;
    font-size: 15px
}

.btn-primary {
    background: #4c6fff;
    border: none
}

@media (max-width: 991px) {
    .pricing-card:hover {
        transform: none
    }

    .pricing-cards {
        margin-top: 0
    }
}

.pricing-tabs .nav-link i {
    margin-right: 6px;
    font-size: 14px
}

.pricing-note {
    padding: 25px 20px;
    color: #fff;
    max-width: 850px;
    margin: 30px auto 45px;
    border: 0.5px solid #3d66fb;
    border-radius: 15px;
    font-size: 14px;
    opacity: 85%
}

.pricing-note p {
    margin-bottom: 0px
}

.pricing-card h5 {
    font-size: 35px;
    font-weight: 700;
    color: #2e345d
}

.pricing-card span {
    font-size: 21px;
    font-weight: 700;
    color: #2e345d
}

.pricing-card p {
    font-size: 17px;
    color: #8c90a6;
    line-height: 1.75;
    margin-bottom: 20px;
    font-weight: 400
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 20px auto;
    width: fit-content
}

.pricing-card ul li {
    text-align: left;
    margin-bottom: 3px
}

.pricing-card ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    color: #2e345d
}

.dbx-list-style {
    list-style: none;
    padding: 0;
    margin: 0
}

.dbx-list-style li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #374151;
    font-size: 15px
}

.dbx-tick {
    color: #22c55e;
    font-size: 19px;
    margin-right: 4px
}

.price-bg {
    background: #f5f5f5;
    padding: 19px 42px
}

.price-bg .btn.btn-light {
    color: var(--bs-primary);
    border: none;
    background: #e5e4f6 0% 0% no-repeat padding-box;
    border: 0.5px solid #3d66fb;
    border-radius: 6px;
    padding: 11px
}

.volume-row {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 14px;
    margin-top: 16px
}

.volume-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s
}

.volume-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent)
}

.vc-left {
    display: flex;
    flex-direction: column
}

.vc-pages {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #2e345d
}

.vc-words {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500
}

.vc-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.5px
}

.vc-save {
    font-size: 10px;
    font-weight: 700;
    color: var(--green);
    background: #ecfdf5;
    padding: 3px 8px;
    border-radius: 100px;
    margin-top: 4px
}

:root {
    --bg: #fafbfc;
    --surface: #fff;
    --surface-alt: #f3f5f8;
    --text-primary: #0f1724;
    --text-secondary: #4a5568;
    --text-tertiary: #8896ab;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-light: #eff6ff;
    --accent-glow: rgba(37, 99, 235, 0.1);
    --green: #10b981;
    --purple: #8b5cf6;
    --orange: #f59e0b;
    --rose: #f43f5e;
    --cyan: #06b6d4;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-md: 0 4px 16px rgba(15, 23, 36, 0.06), 0 2px 4px rgba(15, 23, 36, 0.03);
    --shadow-lg: 0 12px 40px rgba(15, 23, 36, 0.08), 0 4px 12px rgba(15, 23, 36, 0.04);
    --shadow-xl: 0 24px 60px rgba(15, 23, 36, 0.1), 0 8px 20px rgba(15, 23, 36, 0.05)
}

.flow-section {
    background: var(--surface)
}

.flow-header {
    text-align: center;
    margin-bottom: 64px
}

.section-label .line {
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px
}

.section-inner .section-label {
    background: #e9f4ff 0% 0% no-repeat padding-box !important;
    border: 0.5px solid #489cf0;
    border-radius: 14px;
    padding: 6px 12px
}

.guide-timeline {
    position: relative;
    max-width: 1164px;
    margin: 0 auto
}

.guide-timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
    transform: translateX(-50%);
    z-index: 0
}

.guide-step {
    display: grid;
    grid-template-columns:1fr 60px 1fr;
    align-items: center;
    margin-bottom: 64px;
    position: relative
}

.guide-step:last-child {
    margin-bottom: 0
}

.guide-step:nth-child(odd) .gs-screen-wrap {
    grid-column: 1
}

.guide-step:nth-child(odd) .gs-info {
    grid-column: 3
}

.guide-step:nth-child(even) .gs-screen-wrap {
    grid-column: 3;
    order: 3
}

.guide-step:nth-child(even) .gs-info {
    grid-column: 1;
    order: 1;
    text-align: right
}

.guide-step:nth-child(even) .gs-info .gs-tips {
    align-items: flex-end
}

.guide-step:nth-child(even) .gs-tip {
    justify-content: flex-end
}

.gs-node {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    justify-self: center
}

.gs-node-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px var(--accent-light), 0 4px 12px rgba(37, 99, 235, 0.2)
}

.guide-step.in-view .gs-node-num {
    animation: node-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1)
}

@keyframes node-pop {
    0% {
        transform: scale(0.5);
        opacity: 0
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}

.gs-screen-wrap {
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1)
}

.guide-step.in-view .gs-screen-wrap {
    opacity: 1;
    transform: translateY(0);
    display: flex;
    width: 100%
}

.gs-screen {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    width: 100%
}

.gs-titlebar {
    height: 32px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 5px
}

.gs-tdot {
    width: 7px;
    height: 7px;
    border-radius: 50%
}

.gs-body {
    padding: 20px
}

.gs-info {
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.15s
}

.guide-step.in-view .gs-info {
    opacity: 1;
    transform: translateY(0)
}

.gs-step-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    margin-bottom: 10px
}

.gs-info h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.6px;
    margin-bottom: 10px;
    line-height: 1.25
}

.gs-info p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 16px
}

.gs-tips {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.gs-tip {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-secondary)
}

.gs-tip svg {
    width: 15px;
    height: 15px;
    color: var(--green);
    flex-shrink: 0
}

.m-login {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.m-login-title {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.3px
}

.m-input {
    width: 100%;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-size: 11px;
    color: var(--text-tertiary)
}

.m-btn {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700
}

.m-forgot {
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
    text-align: right
}

.m-divider {
    font-size: 10px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 8px
}

.m-divider::before, .m-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border)
}

.m-social {
    display: flex;
    gap: 8px
}

.m-social-btn {
    flex: 1;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary)
}

.m-signup {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center
}

.m-signup a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none
}

.m-dash {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.m-dash-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.m-dash-logo {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px
}

.m-dash-logo .sq {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 4px
}

.m-pages-left {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 100px
}

.m-buy-btn {
    padding: 6px 16px;
    border-radius: 100px;
    background: var(--green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default;
    animation: buy-glow 2s infinite
}

@keyframes buy-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3)
    }
    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0)
    }
}

.m-buy-btn svg {
    width: 12px;
    height: 12px
}

.m-dash-files {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 6px
}

.m-file {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 8px
}

.m-file-thumb {
    height: 32px;
    background: var(--border-light);
    border-radius: 3px;
    margin-bottom: 4px
}

.m-file-name {
    font-size: 9px;
    font-weight: 600;
    margin-bottom: 3px
}

.m-file-scores {
    display: flex;
    gap: 3px
}

.m-file-scores span {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px
}

.m-plans {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.m-plans-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px
}

.m-plan-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-light)
}

.m-plan-row.sel {
    border: 2px solid var(--accent);
    background: var(--accent-light)
}

.m-plan-name {
    font-size: 12px;
    font-weight: 700
}

.m-plan-name span {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary)
}

.m-plan-price {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent)
}

.m-plan-btn {
    width: 100%;
    height: 34px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-top: 6px
}

.m-pay {
    display: flex;
    gap: 10px
}

.m-pay-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.m-pay-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px
}

.m-pay-brand .logo-sq {
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center
}

.m-pay-brand .logo-sq svg {
    width: 14px;
    height: 14px
}

.m-pay-brand-info {
    display: flex;
    flex-direction: column
}

.m-pay-brand-info strong {
    font-size: 11px;
    font-weight: 700
}

.m-pay-brand-info span {
    font-size: 9px;
    color: var(--green);
    font-weight: 600
}

.m-pay-amount-box {
    background: var(--bg);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid var(--border-light);
    margin-bottom: 4px
}

.m-pay-amount-label {
    font-size: 9px;
    color: var(--text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.m-pay-amount-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -1px
}

.m-pay-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.m-pay-options-title {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 2px
}

.m-pay-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-light)
}

.m-pay-option.active {
    border-color: var(--accent);
    background: var(--accent-light)
}

.m-pay-option-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border)
}

.m-pay-option.active .m-pay-option-radio {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 2px #fff
}

.m-pay-option-label {
    font-size: 11px;
    font-weight: 600;
    flex: 1
}

.m-pay-option-icons {
    display: flex;
    gap: 3px
}

.m-pay-option-icons span {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    background: var(--border)
}

.m-pay-paybtn {
    width: 100%;
    height: 34px;
    border-radius: 8px;
    background: #1a1a2e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    margin-top: 4px
}

.m-pay-secured {
    font-size: 9px;
    color: var(--text-tertiary);
    text-align: center;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.m-pay-secured svg {
    width: 10px;
    height: 10px
}

.pricing-tab-wrap {
    display: inline-flex;
    background: var(--surface-alt);
    border-radius: 100px;
    padding: 4px;
    border: 1px solid var(--border)
}

.pricing-tab {
    padding: 12px 32px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    gap: 8px
}

.pricing-tab:hover {
    color: var(--text-primary)
}

.pricing-tab.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25)
}

.pricing-tab svg {
    width: 16px;
    height: 16px
}

.tab-panel {
    display: none
}

.tab-panel.active {
    display: block
}

.ent-container {
    max-width: 1000px;
    margin: 0 auto
}

.ent-hero {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 56px
}

.ent-hero-content h2 {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 16px
}

.ent-hero-content h2 em {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-weight: 400;
    color: var(--accent)
}

.ent-hero-content > p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 28px
}

.ent-cta-row {
    display: flex;
    gap: 12px
}

.btn-ent-primary {
    padding: 14px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.btn-ent-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25)
}

.btn-ent-primary svg {
    width: 16px;
    height: 16px
}

.btn-ent-secondary {
    padding: 14px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none
}

.btn-ent-secondary:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.ent-hero-visual {
    position: relative
}

.ent-card-mock {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 36px;
    box-shadow: var(--shadow-xl)
}

.ent-card-mock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--accent-light);
    color: var(--accent);
    margin-bottom: 20px
}

.ent-card-mock-price {
    margin-bottom: 24px
}

.ent-card-mock-price .big {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1.5px
}

.ent-card-mock-price .sub {
    font-size: 14px;
    color: var(--text-tertiary);
    font-weight: 500
}

.ent-mock-includes {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.ent-mock-inc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary)
}

.ent-mock-inc svg {
    width: 16px;
    height: 16px;
    color: var(--green);
    flex-shrink: 0
}

.ent-card-float {
    position: absolute;
    top: -16px;
    right: -16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px
}

.ent-float-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.ent-float-icon svg {
    width: 18px;
    height: 18px
}

.ent-float-text strong {
    font-size: 13px;
    font-weight: 700;
    display: block
}

.ent-float-text span {
    font-size: 11px;
    color: var(--text-tertiary)
}

.ent-features-label {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.ent-features-label .line {
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px
}

.ent-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 16px
}

.ent-feat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 24px;
    transition: all 0.35s
}

.ent-feat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px)
}

.ent-feat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px
}

.ent-feat-icon svg {
    width: 20px;
    height: 20px
}

.ent-feat-card h4 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin-bottom: 6px
}

.ent-feat-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6
}

.faq-section {
    background: var(--surface);
    background: transparent linear-gradient(357deg, #e7f3ff 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.faq-grid {
    max-width: 800px;
    margin: 48px auto 0
}

.faq-item {
    border-bottom: 1px solid var(--border-light)
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px;
    cursor: pointer;
    gap: 16px;
    transition: color 0.2s
}

.faq-q:hover {
    color: var(--accent)
}

.faq-q h4 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.2px;
    flex: 1;
    margin-bottom: 0px
}

.faq-q .faq-icon {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s
}

.faq-q .faq-icon svg {
    width: 14px;
    height: 14px;
    color: #000;
    transition: transform 0.3s
}

.faq-item.open .faq-q .faq-icon {
    background: var(--accent-light)
}

.faq-item.open .faq-q .faq-icon svg {
    transform: rotate(180deg);
    color: var(--accent)
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1)
}

.faq-a-inner {
    padding: 0 12px 13px;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7
}

.cta-section::before {
    content: "";
    position: absolute;
    top: -400px;
    right: -200px;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 60%)
}

.cta-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative
}

.cta-inner h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -1.5px;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 20px
}

.cta-inner h2 em {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    color: #60a5fa
}

.cta-inner p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto
}

.cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center
}

.btn-cta-primary {
    background: #fff;
    color: var(--text-primary);
    padding: 14px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s
}

.btn-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15)
}

.btn-cta-secondary {
    background: transparent;
    color: #fff;
    padding: 14px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s
}

.btn-cta-secondary:hover {
    border-color: rgba(255, 255, 255, 0.5)
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1)
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
    background: transparent;
    margin-bottom: 15px
}

.stagger-1 {
    transition-delay: 0.05s;
    color: #2e345d !important
}

.stagger-2 {
    transition-delay: 0.1s;
    font-size: 16px;
    letter-spacing: 0px;
    font-weight: 400;
    text-align: center;
    max-width: 100%
}

.stagger-3 {
    transition-delay: 0.15s
}

@media (max-width: 1100px) {
    .pricing-grid, .volume-row {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 900px) {
    .guide-timeline::before {
        left: 24px
    }

    .guide-step {
        grid-template-columns:48px 1fr;
        gap: 0 16px
    }

    .guide-step .gs-screen-wrap {
        grid-column: 2 !important;
        order: 2 !important
    }

    .guide-step .gs-info {
        grid-column: 2 !important;
        order: 3 !important;
        text-align: left !important;
        margin-top: 16px
    }

    .guide-step:nth-child(even) .gs-info .gs-tips {
        align-items: flex-start
    }

    .guide-step:nth-child(even) .gs-tip {
        justify-content: flex-start
    }

    .gs-node {
        grid-column: 1 !important;
        grid-row: 1/span 3;
        align-self: start;
        margin-top: 8px
    }

    .nav-links {
        display: none
    }

    .hero {
        padding: 120px 20px 40px
    }

    .m-dash-files {
        grid-template-columns:repeat(2, 1fr)
    }

    .m-pay {
        flex-direction: column
    }

    .ent-hero {
        grid-template-columns:1fr
    }

    .ent-grid {
        grid-template-columns:1fr
    }

    .ent-card-float {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 12px
    }
}

.number-p {
    letter-spacing: -0.53px;
    color: #2e345d;
    font-size: 53px;
    opacity: 25%;
    font-weight: 700
}

@media (max-width: 640px) {
    .pricing-grid, .volume-row {
        grid-template-columns:1fr
    }

    .number-p {
        display: none
    }
}

.region-btn {
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    transition: all 0.3s ease
}

.region-btn.active {
    background-color: #2f87df;
    color: #fff;
    border-color: #2f87df
}

.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
    box-shadow: none
}

.region-btn:hover {
    background-color: #28a745;
    color: #fff
}

.region-btn .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block
}

.stat-number {
    font-size: 38px;
    font-weight: 800;
    color: #2e345d
}

.global-map {
    background: #0a1428;
    border-radius: 20px;
    padding: 10px 30px;
    color: white;
    position: relative;
    min-height: 340px
}

.location-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
    border: 2px solid white
}

.dot-africa {
    background: #f59e0b
}

.dot-southasia {
    background: #8b5cf6
}

.dot-seasia {
    background: #10b981
}

.dot-middleeast {
    background: #ef4444
}

.dot-russia {
    background: #22d3ee
}

.label {
    position: absolute;
    font-size: 0.85rem;
    font-weight: 500;
    color: #e2e8f0;
    white-space: nowrap
}

.partner-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    border-top: 4px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: 0.3s
}

.partner-card h5 {
    font-size: 24px;
    font-weight: 800
}

.partner-card:hover {
    transform: translateY(-5px)
}

.region-tag {
    display: inline-block;
    font-size: 14px;
    padding: 7px 20px;
    border-radius: 20px;
    margin-bottom: 5px;
    font-weight: 500;
    margin-top: 12px
}

.partner-card .btn {
    margin-bottom: 21px
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 15px 0
}

.info-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 10px;
    color: #555
}

.info-list li a {
    color: #555
}

.dbx-features-section .icon-box {
    width: 32px;
    height: 32px;
    background: #f1f3f5;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #6c757d
}

.partner-section .partner-card {
    background: var(--surface);
    border-top: 4px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
    transition: box-shadow 0.4s;
    display: flex;
    flex-direction: column
}

.border-orange {
    border-color: orange !important
}

.tag-orange {
    background: #fff4e6;
    color: orange
}

.btn-outline-orange {
    border: 1px solid orange;
    color: orange
}

.border-purple {
    border-color: #7b61ff !important
}

.tag-purple {
    background: #f3f0ff;
    color: #7b61ff
}

.btn-outline-purple {
    border: 1px solid #7b61ff;
    color: #7b61ff
}

.border-green {
    border-color: #28a745 !important
}

.tag-green {
    background: #e9f7ef;
    color: #28a745
}

.btn-outline-green {
    border: 1px solid #28a745;
    color: #28a745
}

.icard-cta.o {
    background: #e8590c;
    color: white
}

.icard-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 8px;
    transition: all 0.2s
}

.border-teal {
    border-color: teal !important
}

.tag-teal {
    background: #e6fffa;
    color: teal
}

.btn-outline-teal {
    border: 1px solid teal;
    color: teal
}

.border-blue {
    border-color: #1ecfeb !important
}

.tag-blue {
    background: #e7f1ff;
    color: #0d6efd
}

.btn-outline-blue {
    border: 1px solid #0d6efd;
    color: #0d6efd
}

.border-red {
    border-color: #f9637a !important
}

.tag-red {
    background: #fdeaea;
    color: #dc3545
}

.btn-outline-red {
    border: 1px solid #dc3545;
    color: #dc3545
}

.partner-section .badge {
    background: #c5d1dd 0% 0% no-repeat padding-box;
    border: 0.5px solid #489cf0;
    color: #2f87df !important;
    border-radius: 14px !important
}

.mega-block .icon-box {
    width: 38px;
    height: 37px;
    background: #f1f3f5;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #6c757d
}

.zoom-125 .your-class {
    font-size: 14px
}

.dbx-main-heading {
    font-size: 48px;
    font-weight: 800;
    color: #1d2b4f
}

.dbx-sub-text {
    color: #040135;
    font-size: 15px;
    opacity: 7;
    max-width: 510px
}

.dbx-btn-primary {
    background: #2e345d;
    color: #fff;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block
}

.dbx-btn-outline {
    border: 1px solid #cbd5e1;
    padding: 10px 22px;
    border-radius: 30px;
    text-decoration: none;
    color: #374151;
    font-weight: 550
}

.dbx-card-box {
    background: #ffffff;
    border-radius: 20px
}

.dbx-plan-tag {
    background: #eef2ff;
    color: #2196f3;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 22px
}

.dbx-card-title {
    font-weight: 700;
    margin-top: 31px;
    font-size: 40px
}

.dbx-card-sub {
    color: #6b7280;
    font-size: 14px
}

.dbx-feature-list {
    list-style: none;
    padding: 0
}

.dbx-feature-list li {
    margin-bottom: 10px;
    color: #374151;
    font-size: 15px;
    font-weight: 500
}

.dbx-floating-info {
    position: absolute;
    top: -20px;
    right: 20px;
    background: #fff;
    border-radius: 12px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px
}

.dbx-check {
    color: green;
    font-weight: bold
}

.dbx-features-section .dbx-pill-btn {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #7c8cff;
    border-radius: 30px;
    color: #5a67d8;
    font-size: 14px;
    font-weight: 600
}

.dbx-features-section .dbx-feature-card {
    border-radius: 16px;
    padding: 25px;
    height: 100%;
    transition: 0.3s
}

.dbx-features-section .dbx-feature-card h5 {
    font-weight: 600;
    margin-top: 19px
}

.dbx-features-section .dbx-feature-card p {
    font-size: 16px;
    color: #4b5563
}

.dbx-features-section .dbx-feature-card:hover {
    transform: translateY(-5px)
}

.dbx-features-section .dbx-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px
}

.dbx-features-section .bg-blue {
    background: transparent linear-gradient(180deg, #e8f3ff 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border: 0.5px solid #3d92e733;
    border-radius: 10px
}

.bg-purple {
    background: transparent linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border: 0.5px solid #b874e433;
    border-radius: 10px
}

.dbx-features-section .bg-green {
    background: transparent linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border: 0.5px solid #89cc6433;
    border-radius: 10px
}

.dbx-features-section .bg-orange {
    background: transparent linear-gradient(180deg, #fff7ed 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border: 0.5px solid #f68b0033;
    border-radius: 10px
}

.dbx-features-section .bg-teal {
    background: transparent linear-gradient(180deg, #ecfeff 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    border: 0.5px solid #26aeb933;
    border-radius: 10px
}

.dbx-features-section .bg-red {
    background: transparent linear-gradient(180deg, #fff1f2 0%, #fffffffc 100%) 0% 0% no-repeat padding-box;
    border: 0.5px solid #f7464633;
    border-radius: 10px
}

.bg-blue .dbx-icon {
    background: #3b82f6
}

.bg-purple .dbx-icon {
    background: #8b5cf6
}

.bg-green .dbx-icon {
    background: #22c55e
}

.bg-orange .dbx-icon {
    background: #f59e0b
}

.bg-teal .dbx-icon {
    background: #14b8a6
}

.bg-red .dbx-icon {
    background: #ef4444
}

.dbx-hero-section {
    background: radial-gradient(circle at left, #0d1b3d, #1e40af);
    padding: 80px 0
}

.dbx-tag {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 13px
}

.dbx-hero-title {
    font-size: 48px;
    font-weight: 800;
    color: #fff
}

.dbx-hero-text {
    color: #cbd5e1;
    margin-top: 15px
}

.dbxs-btn-primary {
    background: #4f6ef7;
    padding: 12px 35px;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none
}

.dbxs-btn-light {
    background: #fff;
    padding: 12px 25px;
    border-radius: 30px;
    color: #111;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none
}

.dbx-upload-card {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2)
}

.dbx-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px
}

.dbx-upload-box {
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    padding: 30px
}

.dbx-upload-box i {
    font-size: 40px;
    color: #4f6ef7
}

.dbx-stat {
    padding: 10px;
    border-radius: 10px;
    text-align: center
}

.stat-blue {
    background: #e8f0ff;
    color: #2563eb
}

.stat-orange {
    background: #fff3e6;
    color: #f97316
}

.stat-green {
    background: #e6f7ec;
    color: #16a34a
}

.dbx-upload-wrapper {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05)
}

.dbx-drop-box {
    border: 2px dashed #e5e7eb;
    border-radius: 14px;
    padding: 40px 20px
}

.dbx-drop-box i {
    font-size: 35px;
    color: #4f6ef7
}

.dbx-file-item {
    background: #f1f5f9;
    padding: 12px 15px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.dbx-file-icon {
    font-size: 22px;
    color: #ef4444
}

.dbx-badge {
    background: #d1fae5;
    color: #059669;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px
}

.dbxs-tag {
    border: 1px solid #3d66fb;
    color: #3d66fb;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500
}

.dbx-title {
    font-size: 36px;
    font-weight: 700;
    color: #1e293b
}

.dbx-desc {
    color: #6b7280;
    margin-top: 10px
}

.dbx-check-list {
    list-style: none;
    padding: 0
}

.dbx-check-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    color: #374151
}

.dbx-tick {
    color: #22c55e;
    margin-right: 10px;
    font-size: 18px
}

.cap-badge {
    background: #e9f0ff;
    color: #3b6cff;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 14px;
    display: inline-block
}

.cap-heading {
    font-size: 48px;
    font-weight: 800;
    color: #1f2a44;
    margin-top: 15px
}

.cap-desc {
    font-size: 16px;
    color: #000
}

.tool-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.tool-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: #fff;
    font-size: 20px
}

.caps-wrapper {
    background: transparent linear-gradient(350deg, #f2f5f8 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.tool-blue {
    background: #eaf4ff 0% 0% no-repeat padding-box;
    color: #3d92e7
}

.tool-orange {
    background: #fff7ee 0% 0% no-repeat padding-box;
    color: #f68b00
}

.tool-purple {
    background: #f6f4ff 0% 0% no-repeat padding-box;
    color: #ad60df
}

.tool-green {
    background: #eefdf6 0% 0% no-repeat padding-box;
    color: #79c94d
}

.tool-title {
    font-weight: 800;
    margin-bottom: 8px;
    font-size: 20px;
    color: #2e345d
}

.tool-text {
    font-size: 14px;
    color: #7a7f9a
}

.bg-bar {
    background: #f3f5f8 0% 0% no-repeat padding-box;
    border: 0.5px solid #e0e3ec;
    border-radius: 10px;
    padding: 15px
}

.metric-row {
    font-size: 13px;
    color: #2e345d;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-weight: 500
}

.metric-bar {
    height: 6px;
    background: #eee;
    border-radius: 10px;
    margin-top: 5px;
    overflow: hidden
}

.metric-fill {
    height: 100%;
    border-radius: 10px
}

.fill-blue {
    background: #4c6fff
}

.fill-green {
    background: #2ecc71
}

.fill-purple {
    background: #a55eea
}

.process-area {
    padding: 70px 0;
    text-align: center
}

.process-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    background: #eef2ff;
    color: #4c6fff;
    margin-bottom: 15px
}

.flow-box {
    border-radius: 18px;
    padding: 35px;
    text-align: left;
    position: relative;
    height: 100%
}

.flow-bg-1 {
    background: #f6f4ff
}

.flow-bg-2 {
    background: #fff8ef
}

.flow-bg-3 {
    background: #effdf7
}

.flow-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 15px
}

.icon-style-1 {
    background: #e0d4ff;
    color: #7a5cff
}

.icon-style-2 {
    background: #ffe2c2;
    color: #ff9f43
}

.icon-style-3 {
    background: #c9f2df;
    color: #2ecc71
}

.flow-count {
    position: absolute;
    top: 20px;
    right: 30px;
    font-weight: 600;
    color: #2e345d;
    font-size: 38px;
    opacity: 30%
}

.flow-title {
    font-weight: 800;
    margin-bottom: 8px;
    color: #1f2a44;
    font-size: 22px
}

.flow-desc {
    font-size: 14px;
    color: #7a7f9a
}

.ux-section {
    padding: 40px 0
}

.ux-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    background: #eef2ff;
    color: #4c6fff;
    font-size: 13px;
    margin-bottom: 15px
}

.ux-heading {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 15px;
    line-height: 58px
}

.bg-rp {
    background: transparent linear-gradient(350deg, #ebf5ff 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.ux-subtext {
    color: #7a7f9a;
    font-size: 14px;
    margin-bottom: 20px
}

.ux-list li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #2e345d;
    font-weight: 500
}

.ux-list i {
    color: #2ecc71;
    margin-right: 8px
}

.ux-btn {
    border: 1px solid #cfd4ff;
    padding: 10px 18px;
    border-radius: 10px;
    background: #fff;
    font-weight: 500
}

.plan-box {
    background: #eef1f7;
    border-radius: 16px;
    padding: 30px;
    text-align: center
}

.plan-count {
    font-size: 34px;
    font-weight: 700;
    color: #2e345d
}

.plan-desc {
    font-size: 13px;
    color: #8b90a8;
    margin-bottom: 10px
}

.plan-price {
    font-size: 26px;
    font-weight: 700;
    color: #4c6fff
}

.plan-note {
    font-size: 12px;
    color: #8b90a8
}

.report-card-ui {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05)
}

.report-header {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px
}

.badge-done {
    background: #d4f8e8;
    color: #1abc9c;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    float: right
}

.stat-grid {
    display: flex;
    gap: 10px;
    margin-bottom: 15px
}

.stat-box {
    flex: 1;
    background: #f4f6fb;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    font-size: 13px
}

.stat-box strong {
    display: block;
    font-size: 16px
}

.bar-line {
    height: 6px;
    border-radius: 10px;
    margin: 8px 0;
    background: #eee;
    position: relative
}

.bar-fill {
    height: 100%;
    border-radius: 10px
}

.fill-red {
    background: #ff6b6b;
    width: 18%
}

.fill-orange {
    background: #ffa94d;
    width: 6%
}

.fill-blue {
    background: #4c6fff;
    width: 4%
}

.insight-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 0px;
    box-shadow: 0px 3px 25px #00000012
}

.insight-head {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 15px
}

.status-badge {
    background: #d4f8e8;
    color: #1abc9c;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px
}

.insight-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 15px
}

.mini-stat {
    flex: 1;
    background: #f4f6fb;
    border-radius: 12px;
    text-align: center;
    padding: 12px
}

.mini-stat strong {
    display: block;
    font-size: 18px
}

.mini-stat small {
    font-size: 11px;
    color: #8b90a8
}

.source-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #f0f2f7;
    font-size: 14px
}

.source-left {
    display: flex;
    align-items: center;
    gap: 8px
}

.window-dots {
    display: flex;
    gap: 6px;
    margin-bottom: 10px
}

.dot-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.red-dot {
    background: #ff5f57
}

.yellow-dot {
    background: #febc2e
}

.green-dot {
    background: #28c840
}

.insight-card .dot {
    width: 4px;
    height: 18px;
    border-radius: 4px
}

.insight-card .red {
    background: #ff6b6b
}

.insight-card .orange {
    background: #ffa94d
}

.insight-card .blue {
    background: #4c6fff
}

.contact .badge-custom {
    background: #e6f0ff;
    color: #2b6cb0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px
}

.contact .main-title {
    font-size: 48px;
    font-weight: 700;
    color: #1a2b49
}

.contact .sub-text {
    color: #121314;
    font-size: 15px;
    max-width: 450px;
    font-weight: 400
}

.contact .info-card-11 {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    height: 100%;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 0.5px solid #ccccccd6;
    border-radius: 20px
}

.contact .info-title {
    font-weight: 600;
    color: #1a2b49;
    margin-bottom: 10px
}

.contact.icon-box {
    width: 36px;
    height: 36px;
    background: #eef2f7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 14px
}

.contact .info-card-11 {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05)
}

.contact .info-title {
    font-weight: 600;
    color: #1a2b49;
    margin-bottom: 15px
}

.contact .contact-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #2e345d;
    font-weight: 500
}

.contact .icon-box {
    width: 38px;
    height: 38px;
    background: #eef2f7;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px
}

.contact .icon-box i {
    color: #4a6cf7;
    font-size: 16px
}

.contact .flag {
    width: 40px;
    margin-right: 8px
}

.contact-1 {
    background: #fafbfc 0% 0% no-repeat padding-box
}

.contact-section {
    background: #eef3f9
}

.contact-section__title {
    font-weight: 600;
    color: #1a2b49
}

.contact-section__form-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06)
}

.contact-section__form-box::after {
    content: "";
    position: absolute;
    top: 0px;
    right: -80px;
    width: 80px;
    height: 80px;
    background: url('/user/img/cn.svg') no-repeat center;
    background-size: contain
}

.contact-section__form-box::before {
    content: "";
    position: absolute;
    right: -80px;
    top: 60px;
    width: 80px;
    height: 120px;
    background-image: radial-gradient(#cfd8e3 2px, transparent 2px);
    background-size: 10px 10px
}

.contact-section__input {
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    border: 1px solid #f7f8f8;
    background: #f7f8f8
}

.info-list .icon-box {
    width: 30px;
    height: 30px;
    background-color: #eef2f7;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #2b8cd6;
    flex-shrink: 0
}

.region-btn:hover {
    background-color: #28a745;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-color: #28a745
}

.contact-section__input:focus {
    box-shadow: none;
    border-color: #2b8cd6
}

.contact-section__captcha {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
    width: 100%
}

.contact-section__captcha img {
    height: 30px;
    margin-left: auto
}

.contact-row a {
    color: #000
}

.contact-section__btn {
    background: #2b8cd6;
    color: #fff;
    border-radius: 7px;
    padding: 9px 25px
}

.contact-section__btn:hover {
    background: #1f6fb2
}

.partners-badge {
    background: #e7f1ff;
    color: #2b8cd6;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    display: inline-block
}

.partners-title {
    font-size: 48px;
    font-weight: 800;
    color: #1a2b49;
    line-height: 1.3
}

.partners-text {
    color: #6c757d;
    font-size: 15px;
    max-width: 500px
}

.partners-img {
    border-radius: 20px;
    max-height: 280px;
    object-fit: cover
}

.partners-subtitle {
    color: #1a2b49;
    font-weight: 600
}

.partners-logos {
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden
}

.partner-box {
    flex: 1;
    min-width: 200px;
    padding: 20px;
    text-align: center;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    font-weight: 600;
    color: #4a5568
}

.partner-box:last-child {
    border-right: none
}

.partner-box:hover {
    background: #f1f5f9
}

.trust-strip {
    max-width: 100%;
    margin: 0px auto 0;
    padding: 65px 0px;
    background-color: #f6f0ec
}

.trust-row {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: var(--text-primary);
    margin-bottom: 4px
}

.trust-val span {
    color: #000
}

.trust-lbl {
    font-size: 16px;
    color: #05132f;
    font-weight: 500
}

.trust-val {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: var(--text-primary);
    margin-bottom: 4px
}

.section-inner {
    max-width: 1200px;
    margin: 0 auto
}

.center-header {
    text-align: center;
    margin-bottom: 64px
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    margin-bottom: 16px
}

.section-label .line {
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px
}

.partner-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 24px
}

.partner-card {
    background: var(--surface);
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow 0.4s;
    display: flex;
    flex-direction: column
}

.partner-card:hover {
    box-shadow: var(--shadow-lg)
}

.pc-top {
    padding: 48px 44px 0;
    flex: 1;
    display: flex;
    flex-direction: column
}

.pc-logo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px
}

.pc-logo {
    height: 36px;
    display: flex;
    align-items: center
}

.pc-logo svg {
    height: 32px;
    width: auto
}

.pc-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 5px 14px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 5px
}

.pc-badge .check {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.pc-badge .check svg {
    width: 8px;
    height: 8px
}

.badge-integration {
    background: #eff6ff;
    color: var(--accent)
}

.badge-integration .check {
    background: var(--accent)
}

.badge-standards {
    background: #f5f3ff;
    color: #7c3aed
}

.badge-standards .check {
    background: #7c3aed
}

.pc-top h3 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.7px;
    margin-bottom: 12px;
    line-height: 1.2
}

.pc-top p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px
}

.pc-caps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px
}

.pc-cap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    background: var(--surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border-light)
}

.pc-cap svg {
    width: 13px;
    height: 13px;
    color: var(--green);
    flex-shrink: 0
}

.pc-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 5px;
    border-top: 1px solid var(--border-light);
    margin-top: auto
}

.pc-link {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s;
    background: #1492e6;
    padding: 10px 30px;
    border-radius: 27px
}

.pc-link:hover {
    gap: 12px
}

.pc-link svg {
    width: 14px;
    height: 14px
}

.pc-backlink {
    font-size: 11px;
    color: var(--text-tertiary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s
}

.pc-backlink:hover {
    color: var(--accent)
}

.pc-backlink svg {
    width: 12px;
    height: 12px
}

.pc-image {
    height: 180px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0)
}

.pc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s
}

.partner-card:hover .pc-image img {
    transform: scale(1.05)
}

.pc-img-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 10px 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 10px
}

.pc-img-overlay .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%
}

.pc-img-overlay span {
    font-size: 11px;
    font-weight: 700
}

.edtech-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    margin-top: 24px;
    transition: box-shadow 0.4s;
    display: grid;
    grid-template-columns:1fr 1fr
}

.edtech-card:hover {
    box-shadow: var(--shadow-lg)
}

.ec-content {
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.ec-logo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px
}

.ec-logo svg {
    height: 34px;
    width: auto
}

.ec-content h3 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.8px;
    margin-bottom: 14px;
    line-height: 1.15
}

.ec-content > p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px
}

.ec-standards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px
}

.ec-std {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm)
}

.ec-std-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.ec-std-icon svg {
    width: 14px;
    height: 14px
}

.ec-std-text {
    display: flex;
    flex-direction: column
}

.ec-std-text strong {
    font-size: 13px;
    font-weight: 700
}

.ec-std-text span {
    font-size: 11px;
    color: var(--text-tertiary)
}

.ec-links {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: space-between
}

.partner-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center
}

.partner-box svg {
    max-width: 200px;
    height: auto
}

.ec-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s
}

.ec-link:hover {
    gap: 12px
}

.ec-link svg {
    width: 14px;
    height: 14px
}

.ec-link.ext {
    color: var(--text-tertiary)
}

.ec-link.ext:hover {
    color: var(--purple)
}

.ec-image {
    position: relative;
    min-height: 400px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0)
}

.ec-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s
}

.edtech-card:hover .ec-image img {
    transform: scale(1.04)
}

.ec-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 24px
}

.ec-dash {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.8);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px
}

.ec-dash-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f5f3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.ec-dash-icon svg {
    width: 22px;
    height: 22px;
    color: #7c3aed
}

.ec-dash-info {
    flex: 1
}

.ec-dash-info strong {
    font-size: 13px;
    font-weight: 700;
    display: block;
    margin-bottom: 2px
}

.ec-dash-info span {
    font-size: 11px;
    color: var(--text-tertiary)
}

.ec-dash-certified {
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    background: #ecfdf5;
    color: #059669;
    display: flex;
    align-items: center;
    gap: 4px
}

.ec-dash-certified .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #059669
}

.partner-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px
}

@media (max-width: 768px) {
    .partner-grid {
        display: grid;
        grid-template-columns:auto;
        gap: 24px
    }

    .section-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 12px
    }
}

.stats-section {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    margin-top: 60px
}

.stats-row {
    max-width: 1590px;
    margin: 0 auto;
    display: grid;
    grid-template-columns:repeat(4, 1fr)
}

.stat-item {
    padding: 48px 40px;
    text-align: center;
    border-right: 1px solid var(--border)
}

.stat-item:last-child {
    border-right: none
}

.stat-val {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -2px;
    color: var(--text-primary);
    margin-bottom: 6px
}

.stat-val span {
    color: #000
}

.stat-lbl {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500
}

.fc-drillbit .section-inner {
    margin: 0 auto;
    max-width: 100%
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    margin-bottom: 16px
}

.section-label .line {
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px
}

.center-header {
    text-align: center
}

.center-header .section-subtitle {
    margin: 0 auto
}

.flagship-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 64px
}

.flagship-card {
    display: grid;
    grid-template-columns:1fr 1fr;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow 0.4s
}

.flagship-card:hover {
    box-shadow: var(--shadow-lg)
}

.flagship-card:nth-child(even) {
    direction: rtl
}

.flagship-card:nth-child(even) > * {
    direction: ltr
}

.fc-content {
    padding: 60px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.fc-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 10px 20px 10px 10px;
    border-radius: 14px;
    width: fit-content;
    background: #fff5e8 0% 0% no-repeat padding-box;
    border: 0.5px solid #f68b00;
    border-radius: 20px
}

.fc-badge svg, .fc-badge img {
    height: 28px;
    width: auto;
    display: block
}

.fc-type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 3px 10px;
    border-radius: 100px
}

.fc-content h3 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 14px;
    line-height: 1.15
}

.fc-content > p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 28px
}

.fc-hl-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12px;
    margin-bottom: 32px
}

.fc-hl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light)
}

.fc-hl-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.fc-hl-icon svg {
    width: 14px;
    height: 14px
}

.fc-hl-text strong {
    font-size: 13px;
    font-weight: 700;
    display: block;
    margin-bottom: 2px
}

.fc-hl-text span {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.4
}

.btn-learn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2e345d;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s;
    border: 0.5px solid #2e345d;
    border-radius: 26px;
    padding: 10px 28px
}

.btn-learn:hover {
    gap: 14px
}

.btn-learn svg {
    width: 16px;
    height: 16px
}

.fc-image {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0)
}

.fc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s
}

.flagship-card:hover .fc-image img {
    transform: scale(1.04)
}

.flagship-card .fc-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    background: transparent;
    backdrop-filter: initial
}

.fc-dash {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.8);
    width: 100%
}

.fc-dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px
}

.fc-dash-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary)
}

.fc-dash-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 4px
}

.fc-dash-tag .d {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor
}

.fc-dash-tag.green {
    background: #ecfdf5;
    color: #059669
}

.fc-dash-tag.blue {
    background: #eff6ff;
    color: #2563eb
}

.fc-dash-tag.purple {
    background: #f5f3ff;
    color: #7c3aed
}

.fc-dash-row {
    display: flex;
    gap: 24px
}

.fc-dash-s {
    display: flex;
    flex-direction: column
}

.fc-dash-s .v {
    font-size: 20px;
    font-weight: 800
}

.fc-dash-s .l {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.fc-dash-div {
    width: 1px;
    background: var(--border-light)
}

.all-section {
    background: var(--surface)
}

.ap-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px
}

.ap-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.ap-f {
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    background: var(--bg);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.25s;
    user-select: none
}

.ap-f:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.ap-f.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

.ap-search {
    position: relative
}

.ap-search input {
    background: #f0f2f5b0 0% 0% no-repeat padding-box;
    border: 0.5px solid #e5e5e8;
    border-radius: 50px;
    padding: 10px 16px 10px 40px;
    border-radius: 100px;
    font-size: 13px;
    font-family: "DM Sans", sans-serif;
    width: 260px;
    outline: none;
    transition: border-color 0.2s
}

.ap-search input:focus {
    border-color: var(--accent)
}

.ap-search input::placeholder {
    color: var(--text-tertiary)
}

.ap-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-tertiary)
}

.ap-count {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-bottom: 24px
}

.ap-count strong {
    color: var(--text-primary);
    font-weight: 700
}

.ap-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 16px
}

.ap-card {
    background: #fafbfc 0% 0% no-repeat padding-box !important;
    border: 0.5px solid #e5e5e8;
    border-radius: 20px;
    padding: 28px 24px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative
}

.ap-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--accent);
    background: var(--surface)
}

.ap-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.ap-card-logo span {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px
}

.ap-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 100px;
    flex-shrink: 0
}

.t-content {
    background: #eff6ff;
    color: #2563eb;
    border: 0.5px solid #2f87df
}

.t-metadata {
    background: #ecfdf5;
    border: 0.5px solid #1ca177;
    color: #059669
}

.t-repository {
    background: #f5f3ff;
    border: 0.5px solid #db7d11;
    color: #7c3aed
}

.t-regional {
    background: #fff7ed 0% 0% no-repeat padding-box;
    border: 0.5px solid #db7d11;
    border-radius: 14px;
    color: #d97706
}

.t-openaccess {
    background: #ecfeff;
    color: #0891b2
}

.t-database {
    background: #fff1f2;
    color: #e11d48
}

.ap-card h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.3
}

.ap-card p {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0
}

.ap-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border-light)
}

.ap-card-foot span {
    font-size: 12px;
    color: var(--text-secondary)
}

.ap-card-foot strong {
    font-weight: 700;
    color: var(--text-primary)
}

.ap-card-foot a {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s
}

.ap-card-foot a:hover {
    gap: 8px
}

.ap-card-foot a svg {
    width: 12px;
    height: 12px
}

.ap-official {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center
}

.ap-official svg {
    width: 11px;
    height: 11px
}

.ap-load {
    text-align: center;
    margin-top: 40px
}

.btn-load {
    padding: 14px 36px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s
}

.btn-load:hover {
    border-color: var(--accent);
    color: var(--accent)
}

@media (max-width: 1100px) {
    .ap-grid {
        grid-template-columns:repeat(3, 1fr)
    }
}

@media (max-width: 900px) {
    .flagship-card {
        grid-template-columns:1fr
    }

    .flagship-card:nth-child(even) {
        direction: ltr
    }

    .stats-row {
        grid-template-columns:1fr 1fr
    }

    .stat-item:nth-child(2) {
        border-right: none
    }

    .stat-item:nth-child(1), .stat-item:nth-child(2) {
        border-bottom: 1px solid var(--border)
    }

    .fc-hl-grid {
        grid-template-columns:1fr
    }

    .ap-grid {
        grid-template-columns:1fr 1fr
    }

    .fc-content {
        padding: 32px 24px
    }

    .ap-search input {
        width: 100%
    }
}

.fc-drillbit {
    background-color: #f0f2f5
}

@media (max-width: 600px) {
    .ap-grid {
        grid-template-columns:1fr
    }
}

@media (max-width: 768px) {
    .stat-item {
        padding: 48px 0px;
        text-align: center;
        border-right: 1px solid var(--border)
    }
}

.demo-box {
    border-radius: 16px;
    overflow: hidden
}

.demo-left {
    padding: 30px;
    background: url('/user/img/pp.png') no-repeat center;
    background-size: cover;
    color: #1a2b49;
    height: 100%
}

.demo-left h2 {
    font-weight: 800;
    font-size: 38px;
    line-height: 1.2
}

.demo-right {
    padding: 25px
}

.demo-input {
    padding: 12px;
    background: #f0f2f5 0% 0% no-repeat padding-box;
    border: 0.5px solid #70707026;
    border-radius: 10px;
    font-size: 14px;
}

.demo-input:focus {
    box-shadow: none;
    border-color: #2b8cd6
}

.demo-captcha {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f1f5f9;
    padding: 10px;
    border-radius: 8px
}

.demo-captcha img {
    height: 28px;
    margin-left: auto
}

.modal-body .demo-btn {
    background: #1492e6 0% 0% no-repeat padding-box;
    border-radius: 10px;
    color: #fff;
    padding: 10px;
    border-color: #1492e6
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 914px
    }
}

.ev-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none
}

.ev-tabs::-webkit-scrollbar {
    display: none
}

.ev-tabs .nav-item {
    flex: 0 0 auto
}

.ev-tabs .nav-link {
    white-space: nowrap
}

.modern-icon i {
    font-size: 23px;
    color: #fff
}

.section-inner .partner-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #c4cbdb78;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: 0.3s
}

.fi {
    width: 44px !important;
    height: 26px !important;
    border-radius: 2px;
    font-size: 45px
}

.partner-logo {
    width: 65px;
    height: 65px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
    padding: 5px;
    background: #fff
}

.ai-section-title {
    font-weight: 700;
    font-size: 34px;
    color: #2b2f4a
}

.ai-section-desc {
    color: #0c0e10;
    font-size: 16px
}

.ai-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 25px;
    border: 1px solid #e4e6ef;
    height: 100%;
    transition: 0.3s ease
}

.ai-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    border: 2px solid #4c5cff
}

.ai-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eef1ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px
}

.ai-icon-wrap i {
    font-size: 22px;
    color: #4c5cff
}

.ai-card-title {
    font-weight: 600;
    font-size: 22px;
    color: #2b2f4a;
    margin-bottom: 8px
}

.ai-card-desc {
    font-size: 17px;
    color: #1f3c55;
    line-height: 1.6
}

.jd-header-wrap {
    padding: 37px;
    border-radius: 12px;
    background: transparent linear-gradient(93deg, #f0f8ff 0%, #ddf7ff 100%) 0% 0% no-repeat padding-box
}

.jd-card h5 {
    color: #222e34;
    font-weight: 800;
    font-size: 26px
}

.jd-logo-box {
    width: 64px;
    height: 64px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #0000000f;
    border: 0.5px solid #2e345d33;
    border-radius: 10px;
    display: flex;
    padding: 16px
}

.jd-title {
    font-size: 31px;
    font-weight: 800;
    color: #2e345d
}

.jd-status-badge {
    background: #d1fae5;
    color: #059669;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 20px
}

.jd-meta span {
    font-size: 15px;
    color: #202c32;
    margin-right: 15px
}

.jd-card {
    background: #fff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05)
}

.jd-card .btn.btn-light {
    background: #f8fafc 0% 0% no-repeat padding-box;
    border: 0.5px solid #70707061;
    border-radius: 8px;
    opacity: 1
}

.jd-sticky {
    position: sticky;
    top: 100px
}

.jd-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    color: #202c32;
    font-size: 15px;
    font-weight: 500
}

.jd-summary-row:last-child {
    border-bottom: none
}

.jd-btn-primary {
    background: #3b4cca;
    border: none;
    color: #fff;
    padding: 12px;
    border-radius: 8px
}

.jd-btn-primary:hover {
    background: #2f3db0;
    color: #fff
}

.jd-block {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px
}

.jd-block h5 {
    font-weight: 800;
    margin-bottom: 25px;
    font-size: 26px
}

.jd-list li {
    margin-bottom: 10px;
    color: #2e345d;
    font-size: 15px
}

.jd-summary-row i {
    font-size: 15px;
    color: #6c757d
}

.jd-list li i {
    color: #4f5dff;
    margin-right: 8px
}

.jd-skill {
    color: #2e345d;
    padding: 8px 38px;
    border-radius: 20px;
    font-size: 15px;
    display: inline-block;
    margin: 11px 5px 0 0;
    background: #eef2f7 0% 0% no-repeat padding-box;
    border: 0.5px solid #70707061;
    border-radius: 21px
}

.jd-benefit {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
    height: 100%
}

.jd-benefit i {
    font-size: 22px;
    color: #4f5dff
}

.jd-benefit h6 {
    margin-top: 10px;
    font-weight: 800;
    font-size: 18px
}

.jd-benefit p {
    font-size: 16px;
    color: #6c757d;
    font-weight: 500
}

.jd-header-wrap .btn.btn-light {
    color: var(--bs-primary);
    border: 0.5px solid #70707061;
    padding: 12px 23px
}

.jd-header-wrap .btn.btn-light:hover {
    color: var(--bs-white) !important;
    background: var(--bs-primary)
}

.section-nav {
    position: sticky;
    top: 65px;
    z-index: 50;
    background: #fff;
    backdrop-filter: blur(16px);
    padding: 10px 40px
}

.section-nav-inner {
    margin: 0 auto;
    display: flex;
    gap: 12px;
    justify-content: center
}

.section-nav a {
    padding: 9px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #2e345d;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    border: 0.5px solid #70707073;
    border-radius: 50px
}

.section-nav a:hover {
    color: var(--text-primary)
}

.section-nav a.active {
    color: var(--accent);
    border-bottom-color: var(--accent)
}

.section-inner {
    max-width: 1200px;
    margin: 0 auto
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    margin-bottom: 16px
}

.section-label .line {
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
    flex-wrap: wrap;
    gap: 16px
}

.media-events {
    background: transparent linear-gradient(360deg, #f2f5f8 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.upcoming-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 24px
}

.uc-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s;
    display: flex;
    flex-direction: column
}

.uc-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px)
}

.uc-card.featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns:1fr 1fr
}

.uc-img {
    position: relative;
    min-height: 240px;
    overflow: hidden;
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9)
}

.uc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s
}

.uc-card:hover .uc-img img {
    transform: scale(1.05)
}

.uc-date-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.8)
}

.uc-date-day {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px
}

.uc-date-month {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent)
}

.uc-status {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 4px
}

.uc-status .sdot {
    width: 5px;
    height: 5px;
    border-radius: 50%
}

.status-upcoming {
    background: rgba(37, 99, 235, 0.9);
    color: #fff;
    backdrop-filter: blur(8px)
}

.status-upcoming .sdot {
    background: #93c5fd
}

.status-live {
    background: rgba(16, 185, 129, 0.9);
    color: #fff
}

.status-live .sdot {
    background: #a7f3d0
}

.uc-body {
    padding: 28px;
    flex: 1;
    display: flex;
    flex-direction: column
}

.uc-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.uc-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 100px
}

.tag-conference {
    background: #eff6ff;
    color: var(--accent)
}

.tag-workshop {
    background: #f5f3ff;
    color: var(--purple)
}

.tag-panel {
    background: #fff7ed;
    color: #d97706
}

.tag-webinar {
    background: #ecfeff;
    color: #0891b2
}

.uc-body h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    line-height: 1.25
}

.uc-card.featured .uc-body h3 {
    font-size: 26px
}

.uc-body p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 16px;
    flex: 1
}

.uc-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px
}

.uc-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--text-tertiary)
}

.uc-meta-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0
}

.uc-actions {
    display: flex;
    gap: 8px;
    margin-top: auto
}

.btn-register {
    padding: 10px 22px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.btn-register:hover {
    background: var(--accent-hover);
    transform: translateY(-1px)
}

.btn-register svg {
    width: 14px;
    height: 14px
}

.btn-details {
    padding: 10px 22px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none
}

.btn-details:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.past-section {
    background: var(--bg)
}

.past-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px
}

.year-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.year-f {
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.25s
}

.year-f:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.year-f.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

.past-count {
    font-size: 13px;
    color: var(--text-tertiary)
}

.past-count strong {
    color: var(--text-primary);
    font-weight: 700
}

.past-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 16px
}

.past-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.35s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px
}

.past-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px)
}

.past-img {
    height: 160px;
    overflow: hidden;
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
    position: relative
}

.past-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s
}

.past-card:hover .past-img img {
    transform: scale(1.05)
}

.past-img-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 4px
}

.past-year-badge {
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    color: var(--text-primary)
}

.past-body {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column
}

.past-body h4 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
    line-height: 1.3
}

.past-body p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
    flex: 1
}

.past-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    padding-top: 12px;
    border-top: 1px solid var(--border-light)
}

.past-meta svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0
}

.past-meta-item {
    display: flex;
    align-items: center;
    gap: 4px
}

.past-load {
    text-align: center;
    margin-top: 32px
}

.btn-load {
    padding: 12px 32px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s
}

.btn-load:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.workshop-section {
    background: var(--surface)
}

.ws-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 16px
}

.ws-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.35s;
    display: flex;
    flex-direction: column
}

.ws-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px)
}

.ws-accent {
    height: 4px
}

.ws-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left
}

.ws-tag {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    width: fit-content
}

.ws-body h4 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
    line-height: 1.3
}

.ws-body p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 14px;
    flex: 1
}

.ws-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px
}

.ws-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--text-secondary)
}

.ws-meta-item svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0
}

.ws-footer {
    padding-top: 14px;
    border-top: 1px solid var(--border-light)
}

.ws-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s
}

.ws-link:hover {
    gap: 10px
}

.ws-link svg {
    width: 12px;
    height: 12px
}

.news-section {
    background: var(--bg)
}

.news-rail-wrap {
    position: relative
}

.news-rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 8px 40px 24px;
    -webkit-overflow-scrolling: touch
}

.news-rail::-webkit-scrollbar {
    height: 6px
}

.news-rail::-webkit-scrollbar-track {
    background: var(--border-light);
    border-radius: 100px;
    margin: 0 40px
}

.news-rail::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 100px
}

.news-rail::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary)
}

.news-card {
    flex: 0 0 460px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    scroll-snap-align: start;
    transition: all 0.35s;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit
}

.news-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--accent)
}

.news-img {
    height: 170px;
    overflow: hidden;
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
    position: relative
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s
}

.news-card:hover .news-img img {
    transform: scale(1.05)
}

.news-type {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    color: var(--text-primary)
}

.news-type.type-press {
    background: rgba(37, 99, 235, 0.95);
    color: #fff
}

.news-type.type-award {
    background: rgba(245, 158, 11, 0.95);
    color: #fff
}

.news-type.type-announcement {
    background: rgba(16, 185, 129, 0.95);
    color: #fff
}

.news-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column
}

.news-source {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 10px
}

.news-source-logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--accent);
    flex-shrink: 0
}

.news-body h4 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
    line-height: 1.35;
    color: var(--text-primary)
}

.news-body p {
    font-size: 15dpx;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-light)
}

.news-date {
    font-size: 14dpx;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px
}

.news-date svg {
    width: 11px;
    height: 11px
}

.news-link {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s
}

.news-link:hover {
    gap: 7px
}

.news-link svg {
    width: 11px;
    height: 11px
}

.rail-controls {
    position: absolute;
    top: -56px;
    right: 0;
    display: flex;
    gap: 8px
}

.rail-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s
}

.rail-btn:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

.rail-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed
}

.rail-btn svg {
    width: 16px;
    height: 16px
}

.releases-section {
    background: var(--surface)
}

.releases-wrap {
    display: grid;
    grid-template-columns:240px 1fr;
    gap: 48px;
    align-items: start
}

.releases-aside {
    position: sticky;
    top: 140px
}

.releases-aside h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-tertiary);
    margin-bottom: 12px
}

.release-jump {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.release-jump a {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 15px
}

.release-jump a:hover {
    background: var(--bg);
    color: var(--text-primary)
}

.release-jump a .v-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent)
}

.release-jump a.latest .v-dot {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    animation: pulse 2s infinite
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15)
    }
    50% {
        box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.05)
    }
}

.release-timeline {
    position: relative;
    padding-left: 32px
}

.release-timeline::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--border) 0%, var(--border-light) 100%)
}

.release-entry {
    position: relative;
    margin-bottom: 32px
}

.release-entry::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--accent);
    z-index: 1
}

.release-entry.latest::before {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15)
}

.release-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.release-version {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums
}

.release-version em {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-weight: 400;
    color: var(--accent)
}

.release-latest-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 100px;
    background: var(--accent);
    color: #fff
}

.release-date {
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto
}

.release-date svg {
    width: 12px;
    height: 12px
}

.release-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin-bottom: 10px;
    line-height: 1.3
}

.release-summary {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 18px
}

.release-changes {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.change {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border-light)
}

.change-tag {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 100px;
    min-width: 60px;
    text-align: center
}

.tag-new {
    background: #dcfce7;
    color: #166534
}

.tag-improved {
    background: #dbeafe;
    color: #1e40af
}

.tag-fixed {
    background: #fef3c7;
    color: #92400e
}

.tag-deprecated {
    background: #fee2e2;
    color: #991b1b
}

.change-text strong {
    color: var(--text-primary);
    font-weight: 600
}

.release-footer-note {
    margin-top: 48px;
    padding: 24px;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

.release-footer-note p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5
}

.release-footer-note p strong {
    color: var(--text-primary);
    font-weight: 600
}

.rss-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 100px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s;
    flex-shrink: 0
}

.rss-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

.rss-btn svg {
    width: 14px;
    height: 14px;
    color: #f59e0b
}

.rss-btn:hover svg {
    color: #fff
}

@media (max-width: 1100px) {
    .past-grid, .ws-grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .releases-wrap {
        grid-template-columns:1fr;
        gap: 32px
    }

    .releases-aside {
        position: static
    }
}

@media (max-width: 900px) {
    .upcoming-grid {
        grid-template-columns:1fr
    }

    .uc-card.featured {
        grid-column: span 1;
        grid-template-columns:1fr
    }

    .section-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .news-rail-wrap {
        margin: 0 -20px
    }

    .news-rail {
        padding: 8px 20px 24px
    }

    .news-card {
        flex: 0 0 300px
    }

    .rail-controls {
        display: none
    }

    .release-timeline {
        padding-left: 24px
    }

    .release-entry::before {
        left: -20px
    }
}

@media (max-width: 640px) {
    .past-grid, .ws-grid {
        grid-template-columns:1fr
    }
}

.custom-modal-box {
    border-radius: 16px;
    overflow: hidden
}

.custom-modal-header {
    background: #f4f6fb;
    border-bottom: none
}

.custom-modal-header h5 {
    font-weight: 800;
    font-size: 18px
}

.custom-modal-header small {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500
}

.modal-body .section-title {
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    color: #23284f;
    margin-bottom: 15px;
    letter-spacing: 0px
}

.custom-modal-body {
    padding: 25px
}

.custom-input {
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    background: #f8fafc 0% 0% no-repeat padding-box;
    border: 0.5px solid #70707026;
    border-radius: 10px
}

.custom-modal-body label {
    color: #23284f;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px
}

.custom-modal-body label {
    color: #23284f;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px
}

.upload-box {
    border: 2px dashed #d6d9e0;
    border-radius: 10px;
    text-align: center;
    padding: 25px;
    background: #fafbff;
    cursor: pointer
}

.upload-box p {
    margin: 5px 0;
    font-weight: 500
}

.upload-box small {
    color: #888
}

.upload-box {
    border: 2px dashed #d6d9e0;
    border-radius: 10px;
    text-align: center;
    padding: 25px;
    background: #fafbff;
    cursor: pointer;
    transition: 0.3s
}

.upload-box:hover {
    background: #f1f3ff
}

.custom-modal-header {
    background: #f4f6fb;
    border-bottom: none;
    padding: 16px 20px
}

.header-icon-box {
    width: 47px;
    height: 47px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.header-icon-box i {
    font-size: 18px;
    color: #4a5bdc
}

.modal-title {
    font-weight: 600
}

.upload-box.active {
    border-color: #4a5bdc;
    background: #eef1ff
}

.custom-modal-footer {
    border-top: none;
    padding: 15px 25px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between
}

.submit-btn {
    background: #4a5bdc;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    font-weight: 500
}

.submit-btn:hover {
    background: #3d4ed1
}

@media (min-width: 576px) {
    .modal-md {
        max-width: 600px !important;
        margin: 1.75rem auto
    }
}

.job-modal-box {
    border-radius: 16px;
    overflow: hidden
}

.job-modal-header {
    background: #f4f6fb;
    border-bottom: none;
    padding: 16px 20px
}

.job-icon-box {
    width: 40px;
    height: 40px;
    background: #eef1ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.job-icon-box i {
    font-size: 18px;
    color: #4a5bdc
}

.job-modal-body {
    padding: 25px
}

.job-input {
    border-radius: 8px;
    padding: 10px
}

.upload-box {
    border: 2px dashed #d6d9e0;
    border-radius: 10px;
    text-align: center;
    padding: 25px;
    background: #fafbff;
    cursor: pointer;
    transition: 0.3s
}

.upload-box.active {
    border-color: #4a5bdc;
    background: #eef1ff
}

.job-submit-btn {
    background: #4a5bdc;
    color: #fff;
    border-radius: 8px;
    padding: 10px
}

.job-submit-btn:hover {
    background: #3d4ed1;
    color: #fff
}

.marquee-wrap {
    margin: 0 auto 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    max-width: 900px;
    padding: 33px;
    background: transparent !important
}

.marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: marquee 50s linear infinite
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-50%)
    }
}

.marquee-item {
    padding: 9px 50px;
    border-radius: 100px;
    font-size: 17px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: transparent;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0
}

.marquee-item.hl {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

.stats-strip {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    border-right: 1px solid var(--border);
    border-radius: 0px;
    background: var(--surface);
    overflow: hidden;
    background: #f6f0ec !important
}

.ss-item {
    padding: 36px 24px;
    text-align: center;
    border-right: 1px solid var(--border)
}

.ss-item:last-child {
    border-right: none
}

.ss-val {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 2px;
    color: #2e345d
}

.ss-val span {
    color: #000
}

.ss-lbl {
    font-size: 15px;
    color: #000;
    font-weight: 500
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    margin-bottom: 16px
}

.section-label .line {
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px
}

.center .section-subtitle {
    margin: 0 auto
}

.why-section {
    background: var(--surface)
}

.why-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 48px
}

.why-content p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 20px
}

.why-visual {
    position: relative
}

.script-showcase {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.script-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.script-row:nth-child(even) {
    padding-left: 24px
}

.script-chip {
    padding: 11px 33px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px
}

.script-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md)
}

.script-chip .sc-native {
    font-size: 18px;
    opacity: 0.7
}

.script-chip .sc-name {
    font-size: 16px
}

.script-chip.sc-accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

.script-chip.sc-accent:hover {
    background: var(--accent-hover);
    transform: translateY(-2px)
}

.script-chip.sc-purple {
    background: var(--purple);
    color: #fff;
    border-color: var(--purple)
}

.script-chip.sc-green {
    background: var(--green);
    color: #fff;
    border-color: var(--green)
}

.script-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    background: var(--surface-alt);
    color: var(--text-tertiary);
    border: 1px dashed var(--border);
    margin-top: 4px
}

.script-count-badge svg {
    width: 16px;
    height: 16px
}

.tiers-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 20px;
    margin-top: 56px
}

.tier-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow 0.4s
}

.tier-card:hover {
    box-shadow: var(--shadow-lg)
}

.tier-accent {
    height: 4px
}

.tier-body {
    padding: 32px 28px
}

.tier-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    min-height: 50px;
    min-width: 50px
}

.tier-icon svg {
    width: 22px;
    height: 22px
}

.tier-body h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 6px
}

.tier-body > p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px
}

.tier-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.tier-d {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 13px
}

.tier-lang {
    padding: 7px 21px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    background: var(--surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    transition: all 0.2s;
    margin-bottom: 4px
}

.tier-lang:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light)
}

.tier-lang.supports-ai {
    position: relative
}

.tier-lang.supports-ai::after {
    content: "AI";
    position: absolute;
    top: -6px;
    right: -4px;
    font-size: 7px;
    font-weight: 800;
    background: var(--purple);
    color: #fff;
    padding: 1px 4px;
    border-radius: 4px;
    letter-spacing: 0.5px
}

.ai-section {
    background: var(--surface)
}

.ai-layout {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-top: 48px
}

.ai-cards-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px
}

.ai-section .ai-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    transition: all 0.3s
}

.ai-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--purple)
}

.ai-card-flag {
    font-size: 28px;
    margin-bottom: 8px
}

.ai-card h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px
}

.ai-card span {
    font-size: 10px;
    color: var(--text-tertiary)
}

.ai-card-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    background: #ecfdf5;
    color: #059669;
    margin-top: 10px
}

.ai-card-status .sdot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #059669
}

.ai-content p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 20px
}

.ai-note {
    padding: 16px 20px;
    background: var(--accent-light);
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.ai-note svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px
}

.commit-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 16px;
    margin-top: 48px
}

.commit-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    transition: all 0.35s
}

.commit-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px)
}

.commit-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px
}

.commit-icon svg {
    width: 20px;
    height: 20px
}

.commit-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.2px
}

.commit-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65
}

.ref-section {
    background: var(--surface-alt)
}

.ref-table {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 32px;
    background: var(--surface)
}

.rt-header {
    display: grid;
    grid-template-columns:2fr 1fr 1fr;
    background: #b31d1414;
    border-bottom: 1px solid var(--border)
}

.rt-hcell {
    padding: 14px 24px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #000
}

.rt-hcell:not(:first-child) {
    text-align: center;
    border-left: 1px solid var(--border)
}

.rt-group {
    padding: 8px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
    font-size: 15px;
    font-weight: 700;
    color: #255091;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px
}

.rt-group .gdot {
    width: 7px;
    height: 7px;
    border-radius: 50%
}

.rt-row {
    display: grid;
    grid-template-columns:2fr 1fr 1fr;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s
}

.rt-row:hover {
    background: var(--accent-light)
}

.rt-cell {
    padding: 11px 24px;
    font-size: 15px;
    display: flex;
    align-items: center
}

.rt-cell:not(:first-child) {
    justify-content: center;
    border-left: 1px solid var(--border-light)
}

.rt-lang {
    font-weight: 600
}

.rt-native {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-left: 6px;
    font-weight: 500
}

.rt-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.rt-check svg {
    width: 11px;
    height: 11px
}

.rt-yes {
    background: #ecfdf5;
    color: #059669
}

.rt-no {
    background: var(--surface-alt);
    color: var(--border)
}

@media (max-width: 1100px) {
    .tiers-grid, .commit-grid {
        grid-template-columns:1fr
    }
}

@media (max-width: 900px) {
    .why-grid, .ai-layout {
        grid-template-columns:1fr
    }

    .stats-strip {
        grid-template-columns:1fr 1fr
    }

    .ss-item:nth-child(2) {
        border-right: none
    }

    .ss-item:nth-child(1), .ss-item:nth-child(2) {
        border-bottom: 1px solid var(--border)
    }

    .rt-header, .rt-row {
        grid-template-columns:2fr 1fr 1fr
    }

    .marquee-wrap {
        margin-left: -20px;
        margin-right: -20px;
        max-width: none
    }
}

@media (max-width: 640px) {
    .ai-cards-grid {
        grid-template-columns:1fr 1fr
    }
}

.spec-nav {
    position: sticky;
    top: 65px;
    z-index: 50;
    background: #fff;
    padding: 15px 40px;
    margin-top: 0
}

.spec-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: center
}

.spec-nav a {
    margin-top: 5px;
    padding: 8px 30px;
    font-size: 14px;
    font-weight: 500;
    color: #2e345d;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    border: 0.5px solid #70707073;
    border-radius: 50px
}

.spec-nav a:hover {
    color: var(--text-primary)
}

.spec-nav a.active {
    color: var(--accent);
    border: 1px solid var(--accent)
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    margin-bottom: 16px
}

.section-label .line {
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px
}

.spec-table {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    margin-bottom: 32px
}

.st-header {
    display: grid;
    grid-template-columns:1fr 1fr;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border)
}

.st-header.three {
    grid-template-columns:1fr 1fr 1fr
}

.st-hcell {
    padding: 14px 24px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-tertiary)
}

.st-hcell:not(:first-child) {
    border-left: 1px solid var(--border)
}

.st-row {
    display: grid;
    grid-template-columns:1fr 1fr;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s
}

.st-row.three {
    grid-template-columns:1fr 1fr 1fr
}

.st-row:last-child {
    border-bottom: none
}

.st-row:hover {
    background: var(--accent-light)
}

.st-cell {
    padding: 14px 24px;
    font-size: 14px;
    display: flex;
    align-items: center
}

.st-cell:not(:first-child) {
    border-left: 1px solid var(--border-light)
}

.st-param {
    font-weight: 600;
    color: var(--text-primary)
}

.st-value {
    color: var(--text-secondary)
}

.format-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px
}

.fmt-pill {
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px
}

.fmt-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light)
}

.fmt-pill svg {
    width: 14px;
    height: 14px;
    opacity: 0.5
}

.fmt-group-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #232a35bf;
    margin-bottom: 16px;
    margin-top: 20px;
    background: #fafbfc 0% 0% no-repeat padding-box
}

.browser-card:nth-child(1) {
    background: #eef2ff
}

.browser-card:nth-child(2) {
    background: #ecfdf5
}

.browser-card:nth-child(3) {
    background: #fff7ed
}

.browser-card:nth-child(4) {
    background: #f5f3ff
}

.fmt-group-label:first-child {
    margin-top: 0
}

#hardware {
    background: transparent linear-gradient(360deg, #f2f5f8 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.browser-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px
}

.browser-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 34px;
    text-align: center;
    transition: all 0.3s
}

.browser-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--accent)
}

.browser-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 28px
}

.browser-card h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px
}

.browser-card span {
    font-size: 11px;
    color: var(--text-tertiary)
}

#file-specs {
    background: transparent linear-gradient(36deg, #f2f5f8 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
    opacity: 1
}

.info-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px
}

#platform .info-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition: all 0.35s;
    display: block;
    box-shadow: none
}

.info-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px)
}

#platform .info-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px
}

.info-icon svg {
    width: 20px;
    height: 20px
}

.info-card h4 {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.2px
}

#security {
    background: transparent linear-gradient(90deg, #f2f5f8 0%, #ffffff 100%) 0% 0% no-repeat padding-box
}

.info-card p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6
}

.security-row {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px
}

.sec-badge {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s
}

.sec-badge:hover {
    box-shadow: var(--shadow-md)
}

.sec-badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.sec-badge-icon svg {
    width: 18px;
    height: 18px
}

.sec-badge-text {
    display: flex;
    flex-direction: column
}

.sec-badge-text strong {
    font-size: 17px;
    font-weight: 700;
    color: #000
}

.sec-badge-text span {
    font-size: 14px;
    color: var(--text-tertiary)
}

@media (max-width: 1100px) {
    .info-grid {
        grid-template-columns:1fr 1fr
    }

    .security-row {
        grid-template-columns:1fr 1fr
    }
}

@media (max-width: 900px) {
    .browser-grid {
        grid-template-columns:1fr 1fr
    }

    .info-grid, .security-row {
        grid-template-columns:1fr
    }

    .st-header, .st-row, .st-header.three, .st-row.three {
        grid-template-columns:1fr
    }

    .st-cell:not(:first-child) {
        border-left: none;
        border-top: 1px solid var(--border-light)
    }
}

:root {
    --navy: #2e345d;
    --teal: #2f42a5;
    --teal-light: #e6f4fa;
    --teal-mid: #b8def0;
    --gold: #c8972a;
    --gold-light: #fdf6e7;
    --text: #1a1a2e;
    --muted: #5a6478;
    --border: rgba(10, 126, 164, 0.15);
    --bg: #fafbfc;
    --white: #ffffff
}

.top-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 251, 252, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0 40px
}

.top-nav-inner {
    max-width: 1060px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px
}

.brand-logo {
    font-size: 22px;
    color: var(--navy);
    text-decoration: none;
    letter-spacing: -0.01em
}

.brand-logo span {
    color: var(--teal)
}

.top-nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
    margin-bottom: 0px
}

.top-nav-links a {
    font-size: 16px;
    color: #2f345d;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s
}

.top-nav-links a:hover {
    color: var(--teal)
}

.top-nav-demo {
    background: var(--navy);
    color: white !important;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 500 !important
}

.top-nav-demo:hover {
    background: var(--teal) !important;
    color: white !important
}

.main-wrapper {
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 0px 90px
}

.intro-block {
    padding: 80px 0 64px;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns:1fr 300px;
    gap: 38px;
    align-items: start
}

.intro-eyebrow {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px
}

.intro-eyebrow::before {
    content: "";
    display: block;
    width: 28px;
    height: 1.5px;
    background: var(--teal)
}

.intro-block h1 {
    font-size: 48px;
    line-height: 1.1;
    color: #2e345d;
    margin-bottom: 24px;
    font-weight: 800
}

.intro-block h1 em {
    font-style: normal;
    color: #919191
}

.intro-desc {
    font-size: 18px;
    line-height: 1.75;
    color: var(--muted);
    margin-bottom: 18px
}

.intro-dl-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    background: var(--teal);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    border: 1px solid var(--teal);
    padding: 12px 18px;
    border-radius: 4px;
    transition: all 0.2s
}

.intro-dl-link:hover {
    background: var(--teal);
    color: white
}

.intro-metrics {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.metric-tile {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 22px;
    text-align: center
}

.metric-tile .metric-num {
    font-size: 40px;
    color: var(--navy);
    line-height: 1
}

.metric-tile .metric-lbl {
    font-size: 14px;
    color: var(--muted);
    margin-top: 4px;
    letter-spacing: 0.04em;
    line-height: 1.4
}

.metric-tile.highlighted {
    background: var(--teal);
    border-color: var(--teal)
}

.metric-tile.highlighted .metric-num {
    color: var(--white)
}

.metric-tile.highlighted .metric-lbl {
    color: rgba(255, 255, 255, 0.55)
}

.content-block {
    padding: 64px 0;
    border-bottom: 1px solid var(--border)
}

.content-block:last-of-type {
    border-bottom: none
}

.block-tag {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 10px
}

.block-heading {
    font-size: 36px;
    color: var(--navy);
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.15
}

.block-subtext {
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 20px
}

.flow-track {
    display: flex;
    align-items: flex-start
}

.flow-node {
    flex: 1;
    position: relative
}

.flow-node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 26px;
    right: -1px;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 15px solid var(--navy);
    z-index: 2
}

.flow-node-head {
    background: var(--navy);
    color: var(--white);
    padding: 11px 14px 11px 16px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 15px
}

.flow-node:last-child .flow-node-head {
    margin-right: 0
}

.flow-node-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--teal);
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.flow-node-body {
    padding: 14px 18px 0 16px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.65
}

.flow-node:last-child .flow-node-body {
    padding-right: 0
}

.signals-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 18px
}

.signal-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: border-color 0.2s, box-shadow 0.2s
}

.signal-item:hover {
    border-color: var(--teal-mid);
    box-shadow: 0 4px 20px rgba(10, 126, 164, 0.08)
}

.signal-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 28px;
    color: var(--teal)
}

.signal-item h4 {
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 6px
}

.signal-item p {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.6
}

.coverage-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden
}

.coverage-table {
    width: 100%;
    border-collapse: collapse
}

.coverage-table th {
    text-align: left;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--teal-light);
    border-bottom: 1px solid var(--teal-mid)
}

.coverage-table td {
    padding: 16px 18px;
    font-size: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: top
}

.coverage-table tr:last-child td {
    border-bottom: none
}

.coverage-table tbody tr:hover td {
    background: #f5fbff
}

.status-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 100px;
    background: #e6faf0;
    color: #0a7a45;
    border: 1px solid #a5dfc0
}

.status-pill.partial {
    background: var(--gold-light);
    color: #8a6200;
    border-color: #e8c97a
}

.tool-title {
    font-weight: 500;
    color: var(--navy)
}

.tool-caption {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px
}

.score-widget {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px 40px
}

.score-widget-top {
    margin-bottom: 30px
}

.score-widget-top h3 {
    font-size: 24px;
    color: var(--navy);
    font-weight: 400;
    margin-bottom: 6px
}

.score-widget-top p {
    font-size: 14px;
    color: var(--muted)
}

.range-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px
}

.range-row label {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap
}

#scoreSlider {
    flex: 1;
    height: 4px;
    cursor: pointer;
    accent-color: var(--teal)
}

.range-display {
    font-size: 24px;
    color: var(--navy);
    min-width: 56px;
    text-align: right
}

.gradient-track {
    height: 8px;
    border-radius: 100px;
    background: linear-gradient(to right, #22c55e 0%, #22c55e 20%, #eab308 20%, #eab308 60%, #ef4444 60%, #ef4444 100%);
    position: relative;
    margin-bottom: 6px
}

.track-marker {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: var(--navy);
    border-radius: 50%;
    border: 2.5px solid white;
    transform: translate(-50%, -50%);
    transition: left 0.15s;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25)
}

.zone-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 28px
}

.verdict-chips {
    display: flex;
    gap: 14px;
    margin-bottom: 20px
}

.verdict-chip {
    flex: 1;
    text-align: center;
    padding: 14px 10px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    transition: all 0.25s;
    min-width: 0
}

.verdict-chip .chip-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-bottom: 5px
}

.verdict-chip .chip-value {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3
}

.result-callout {
    border-left: 3px solid var(--teal);
    padding: 16px 20px;
    background: var(--teal-light);
    border-radius: 0 10px 10px 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text)
}

.result-callout strong {
    color: var(--navy);
    font-weight: 500
}

.accuracy-row {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 32px
}

.accuracy-tile {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    text-align: center
}

.accuracy-tile .acc-figure {
    font-size: 48px;
    color: var(--navy);
    line-height: 1
}

.accuracy-tile .acc-title {
    font-size: 15px;
    color: var(--muted);
    margin-top: 6px;
    font-weight: 600
}

.accuracy-tile .acc-note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.5;
    opacity: 0.8
}

.accuracy-footer {
    background: var(--teal-light);
    border-left: 3px solid var(--teal);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    font-size: 16px;
    color: var(--muted);
    line-height: 1.65
}

.faq-row {
    border-bottom: 1px solid var(--border);
    padding: 22px 0;
    cursor: pointer
}

.faq-row:first-child {
    border-top: 1px solid var(--border)
}

.faq-question {
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    user-select: none
}

.faq-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--teal);
    flex-shrink: 0;
    transition: transform 0.25s;
    font-weight: 300;
    line-height: 1
}

.faq-answer {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.75;
    padding-top: 14px;
    display: none;
    max-width: 780px
}

.faq-row.open .faq-icon {
    transform: rotate(45deg)
}

.faq-row.open .faq-answer {
    display: block
}

.bottom-cta {
    background: var(--navy);
    border-radius: 18px;
    padding: 48px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 64px
}

.bottom-cta h3 {
    font-size: 28px;
    color: var(--white);
    font-weight: 400;
    margin-bottom: 8px
}

.bottom-cta p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55)
}

.cta-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0
}

.cta-btn-main {
    background: var(--teal);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--sans);
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
    white-space: nowrap
}

.cta-btn-main:hover {
    background: #0a6a8a
}

.cta-btn-ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    font-family: var(--sans);
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    white-space: nowrap
}

.cta-btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.55);
    color: white
}

.site-footer {
    border-top: 1px solid var(--border);
    padding: 40px 32px;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px
}

.site-footer p {
    font-size: 13px;
    color: var(--muted)
}

.site-footer a {
    color: var(--teal);
    text-decoration: none
}

@media (max-width: 768px) {
    .top-nav {
        padding: 0 20px
    }

    .top-nav-links {
        display: none
    }

    .main-wrapper {
        padding: 0 20px 80px
    }

    .intro-block {
        grid-template-columns:1fr;
        gap: 32px;
        padding: 48px 0 40px
    }

    .intro-block h1 {
        font-size: 38px
    }

    .intro-metrics {
        flex-direction: row
    }

    .metric-tile {
        flex: 1
    }

    .flow-track {
        flex-direction: column;
        gap: 0
    }

    .flow-node:not(:last-child)::after {
        display: none
    }

    .flow-node-head {
        margin-right: 0
    }

    .flow-node-body {
        padding: 10px 16px 14px
    }

    .signals-grid {
        grid-template-columns:1fr
    }

    .accuracy-row {
        grid-template-columns:1fr
    }

    .verdict-chips {
        flex-direction: column
    }

    .bottom-cta {
        flex-direction: column;
        padding: 36px 28px
    }

    .cta-actions {
        flex-direction: column;
        width: 100%
    }

    .cta-btn-main, .cta-btn-ghost {
        text-align: center
    }
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(4 10 41/85%);
    z-index: 2
}

.ss-project-section {
    background: #fff
}

.ss-main-title {
    font-size: 46px;
    font-weight: 700;
    color: #2c3550;
    line-height: 1.3
}

.ss-sub-title {
    font-size: 15px;
    color: #040135;
    margin-top: 10px;
    margin-bottom: 15px;
    font-style: italic
}

.ss-description {
    font-size: 15px;
    color: #040135;
    line-height: 1.8;
    margin-bottom: 25px
}

.ss-image-box {
    position: relative;
    display: inline-block
}

.ss-image-style {
    position: relative;
    z-index: 2;
    border-radius: 20px
}

.ss-image-stats {
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 840px;
    background: #ffffff;
    border-radius: 5px;
    padding: 18px 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    z-index: 3
}

.ss-image-stat-card {
    flex: 1;
    min-width: 100px;
    padding: 0 12px;
    text-align: center;
    border-right: 1px solid #e6edf8
}

.ss-image-stat-card:last-child {
    border-right: none
}

.ss-image-stat-number {
    font-size: 20px;
    font-weight: 700;
    color: #1f2952;
    line-height: 1.1
}

.ss-image-stat-label {
    margin-top: 6px;
    font-size: 13px;
    color: #6b7280
}

.ss-cap-title {
    font-size: 20px;
    font-weight: 600;
    color: #2c3550;
    margin-bottom: 15px;
    letter-spacing: 0.5px
}

.ss-capabilities {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.ss-pill {
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500
}

.ss-pill-1 {
    background: #FFF5E8;
    color: #8a6d3b
}

.ss-pill-2 {
    background: #E9F8F9;
    color: #31708f
}

.ss-pill-3 {
    background: #F7ECFF;
    color: #6a5acd
}

.ss-image-style {
    border-radius: 20px;
    max-width: 100%
}

.ss-stats-wrapper {
    background: #EBF5FF;
    border-radius: 10px;
    padding: 40px 20px
}

.ss-stat-item {
    position: relative
}

.ss-stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 0;
    width: 1px;
    height: 80%;
    background: #cfd6e3
}

.ss-stat-item h3 {
    font-size: 38px;
    font-weight: 700;
    color: #2c3550
}

.ss-stat-item p {
    margin-top: 5px;
    font-size: 16px;
    color: #6b7280
}

@media (max-width: 768px) {
    .ss-main-title {
        font-size: 28px
    }

    .ss-stats-wrapper {
        padding: 20px
    }

    .ss-stat-item {
        margin-bottom: 20px
    }

    .ss-stat-item::after {
        display: none
    }

    .ss-image-stats {
        position: relative;
        width: calc(100% - 24px);
        bottom: 15px;
        padding: 16px 14px;
        flex-wrap: wrap;
        gap: 12px
    }

    .ss-image-stat-card {
        min-width: calc(50% - 12px);
        padding: 12px 10px;
        border-right: none;
        border-bottom: 1px solid #e6edf8
    }

    .ss-image-stat-card:nth-last-child(-n+2) {
        border-bottom: none
    }
}

.plus {
    font-weight: 700;
    margin-left: 2px
}

.main_highlight {
    font-style: italic;
    font-weight: 400;
    color: #2563eb
}

.access-results-section {
    background: #fff;
    padding: 10px 0 80px
}

.access-results-title {
    color: #2c3550;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px
}

.access-results-subtitle {
    color: #5e6783;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 28px
}

.access-results-tablist {
    border-bottom: 1px solid #d9dfef;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 0;
    scrollbar-width: none;
    justify-content: space-between
}

.access-results-tablist::-webkit-scrollbar {
    display: none
}

.access-results-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    color: #394566;
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    padding: 16px 14px 15px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease
}

.access-results-tab.active {
    background: #eef4ff;
    border-bottom-color: #4d72f7;
    color: #4d72f7
}

.access-results-tab:focus-visible {
    outline: 2px solid #4d72f7;
    outline-offset: 2px
}

.access-results-table-wrap {
    border: 1px solid #e2e7f2;
    border-radius: 18px;
    margin-top: 34px;
    overflow-x: auto;
    overflow-y: hidden
}

.access-results-pane {
    display: none
}

.access-results-pane.active, .access-results-pane.show {
    display: block
}

.access-results-table {
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 740px;
    width: 100%
}

.access-results-table th, .access-results-table td {
    padding: 20px 24px;
    text-align: center
}

.access-results-table thead th {
    background: #ededf0;
    color: #3b4564;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4
}

.access-results-table thead th:first-child {
    border-top-left-radius: 18px
}

.access-results-table thead th:last-child {
    border-top-right-radius: 18px
}

.access-results-table tbody td {
    border-top: 1px solid #e2e7f2;
    color: #4d5879;
    font-size: 15px;
    line-height: 1.35
}

.access-results-table th + th, .access-results-table td + td {
    border-left: 1px solid #dfe4ef
}

.access-results-link {
    background: transparent;
    border: 0;
    color: #6a7392;
    font-size: 13px;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px
}

@media (max-width: 991px) {
    .access-results-section {
        padding-bottom: 60px
    }

    .access-results-title {
        font-size: 34px
    }
}

@media (max-width: 767px) {
    .access-results-title {
        font-size: 28px
    }

    .access-results-subtitle {
        font-size: 13px
    }

    .access-results-tab {
        font-size: 14px;
        padding: 14px 12px 13px
    }

    .access-results-table th, .access-results-table td {
        padding: 18px
    }
}

.bg-gray {
    background: linear-gradient(180deg, #F7F8F8 0%, #ffffff 100%)
}

.arabic-spotlight-section {
    background-size: auto;
    min-height: 345px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 80px 20px;
    position: relative;
    overflow: hidden
}

.arabic-spotlight-container {
    position: relative;
    z-index: 2
}

.arabic-spotlight-content {
    max-width: 700px;
    margin: 0 auto
}

.arabic-spotlight-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: #fff
}

.arabic-spotlight-description {
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: 0.95;
    font-weight: 400
}

@media (max-width: 768px) {
    .arabic-spotlight-section {
        min-height: 280px;
        padding: 60px 15px;
        background-attachment: scroll
    }

    .arabic-spotlight-title {
        font-size: 1.8rem;
        margin-bottom: 15px
    }

    .arabic-spotlight-description {
        font-size: 1rem
    }
}

@media (max-width: 480px) {
    .arabic-spotlight-section {
        min-height: 240px;
        padding: 40px 15px;
        background-attachment: scroll
    }

    .arabic-spotlight-title {
        font-size: 1.4rem;
        margin-bottom: 12px
    }

    .arabic-spotlight-description {
        font-size: 0.95rem
    }
}

.why-arabic-section {
    padding: 80px 20px;
    background: #fff
}

.why-arabic-content {
    display: flex;
    align-items: center;
    gap: 40px
}

.why-arabic-text h2 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #1a1a2e
}

.why-arabic-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 15px
}

.why-arabic-image {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1)
}

.why-arabic-image img {
    width: 100%;
    height: auto;
    display: block
}

@media (max-width: 768px) {
    .why-arabic-section {
        padding: 60px 15px
    }

    .why-arabic-content {
        flex-direction: column;
        gap: 30px
    }

    .why-arabic-text h2 {
        font-size: 1.6rem;
        margin-bottom: 15px
    }

    .why-arabic-text p {
        font-size: 0.95rem
    }
}

@media (max-width: 480px) {
    .why-arabic-section {
        padding: 40px 15px
    }

    .why-arabic-content {
        gap: 20px
    }

    .why-arabic-text h2 {
        font-size: 1.3rem;
        margin-bottom: 12px
    }

    .why-arabic-text p {
        font-size: 0.9rem;
        line-height: 1.6
    }
}

.arabic-engine-features {
    background: #E8F7F8;
    padding: 80px 20px
}

.arabic-features-title {
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 50px;
    color: #1a1a2e
}

.arabic-features-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto
}

.arabic-feature-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05)
}

.arabic-feature-icon {
    width: 50px;
    height: 50px;
    background: #0fa3b1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0
}

.arabic-feature-card p {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    margin: 0
}

.arabic-feature-card-center {
    grid-column: 1/-1;
    max-width: 50%;
    margin: 0 auto
}

@media (max-width: 768px) {
    .arabic-engine-features {
        padding: 60px 15px
    }

    .arabic-features-title {
        font-size: 1.6rem;
        margin-bottom: 40px
    }

    .arabic-features-grid {
        grid-template-columns:1fr;
        gap: 20px
    }

    .arabic-feature-card-center {
        grid-column: auto;
        max-width: 100%
    }
}

@media (max-width: 480px) {
    .arabic-engine-features {
        padding: 40px 15px
    }

    .arabic-features-title {
        font-size: 1.3rem;
        margin-bottom: 30px
    }

    .arabic-feature-card {
        padding: 20px;
        gap: 15px
    }

    .arabic-feature-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem
    }

    .arabic-feature-card p {
        font-size: 0.9rem
    }
}

.arabic-check-section {
    padding: 80px 20px;
    background: white
}

.arabic-check-image {
    border-radius: 4px;
    overflow: hidden
}

.arabic-check-image img {
    width: 100%;
    height: auto;
    display: block
}

.arabic-check-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 35px;
    color: #1a1a3a
}

.arabic-check-list {
    display: grid;
    gap: 18px
}

.arabic-check-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 22px;
    border-radius: 24px;
    background: linear-gradient(270deg, #fff 0%, #f5fbfc 100%)
}

.arabic-check-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0fa3b1;
    color: white;
    font-size: 1rem
}

.arabic-check-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #23314f
}

@media (max-width: 768px) {
    .arabic-check-section {
        padding: 60px 15px
    }

    .arabic-check-text h2 {
        font-size: 2rem;
        margin-bottom: 30px
    }

    .arabic-check-item {
        padding: 16px 18px;
        gap: 15px
    }
}

@media (max-width: 480px) {
    .arabic-check-section {
        padding: 40px 15px
    }

    .arabic-check-text h2 {
        font-size: 1.6rem;
        margin-bottom: 24px
    }

    .arabic-check-item {
        flex-direction: row;
        align-items: flex-start;
        padding: 14px 16px
    }

    .arabic-check-icon {
        width: 38px;
        height: 38px;
        font-size: 0.95rem
    }

    .arabic-check-item p {
        font-size: 0.95rem
    }
}

.db-hero-section {
    position: relative;
    height: 405px;
    background: url('/user/img/spotlight4_bg.png') center center/cover no-repeat
}

.db-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 58px
}

.db-hero-title {
    color: #fff;
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 34px
}

.db-hero-text {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 2.1;
    max-width: 620px;
    margin-bottom: 0
}

.db-hero-image {
    width: 100%;
    border-radius: 70px;
    overflow: hidden;
    margin-left: auto;
    margin-top: 18px;
    position: relative;
    bottom: -50px;
    z-index: 3
}

.db-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.db-stats-box {
    background: #fff;
    max-width: 680px;
    margin-top: -60px;
    position: relative;
    z-index: 5;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05)
}

.db-stat-item {
    text-align: center;
    padding: 28px 18px 22px;
    border-right: 1px solid #e1e1e1
}

.db-stat-item:last-child {
    border-right: none
}

.db-stat-item h3 {
    font-size: 24px;
    font-weight: 800;
    color: #2f3368;
    margin-bottom: 12px
}

.db-stat-item p {
    margin: 0;
    font-size: 13px;
    color: #2f3368;
    font-weight: 500
}

.db-work-section {
    padding: 170px 0 90px;
    background: #fff
}

.db-work-title {
    font-size: 46px;
    color: #31345f;
    font-weight: 800;
    margin-bottom: 40px
}

.db-work-text {
    font-size: 16px;
    color: #666b8f;
    margin-bottom: 40px
}

.db-feature-list {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.db-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(270deg, #fff 0%, #F7ECFF 100%);
    border-radius: 40px;
    padding: 15px 20px
}

.db-feature-icon {
    width: 18px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #a258d4;
    display: flex;
    align-items: center;
    justify-content: center
}

.db-feature-icon i {
    color: #fff;
    font-size: 9px
}

.db-feature-item p {
    margin: 0;
    font-size: 14px;
    color: #30345c;
    font-weight: 500
}

@media (max-width: 991px) {
    .db-hero-section {
        height: auto;
        padding-bottom: 60px
    }

    .db-hero-title {
        font-size: 26px
    }

    .db-hero-image {
        margin: 40px auto 0;
        bottom: 0
    }

    .db-stats-box {
        margin-top: 40px;
        max-width: 100%
    }

    .db-stat-item {
        border-bottom: 1px solid #e1e1e1
    }

    .db-stat-item:nth-child(2) {
        border-right: none
    }

    .db-stat-item:last-child, .db-stat-item:nth-last-child(2) {
        border-bottom: none
    }

    .db-work-section {
        padding-top: 90px
    }

    .db-work-title {
        font-size: 44px
    }
}

@media (max-width: 767px) {
    .db-hero-title {
        font-size: 38px
    }

    .db-hero-text, .db-work-text {
        font-size: 15px
    }

    .db-hero-image {
        height: 290px;
        border-radius: 35px
    }

    .db-work-title {
        font-size: 36px
    }

    .db-feature-item {
        border-radius: 22px;
        align-items: flex-start
    }
}

.event-register-modal .modal-dialog {
    max-width: 500px !important;
    margin: 0.5rem auto
}

.event-register-modal .modal-content {
    border: none;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 36px 90px rgba(16, 32, 78, 0.16)
}

.event-register-modal .event-register-header {
    padding: 14px 14px 10px;
    border-bottom: none;
    background: #fff;
    border-bottom: 2px solid #fcfcfc
}

.event-register-modal .event-register-header-left {
    display: flex;
    align-items: center;
    gap: 16px
}

.event-register-modal .event-register-icon {
    width: 46px;
    height: 46px;
    border-radius: 18px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center
}

.event-register-modal .event-register-icon i {
    font-size: 20px;
    color: #ff5f3c
}

.event-register-modal .event-register-header h5 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 4px;
    color: #132345
}

.event-register-modal .event-register-subtitle {
    margin: 0;
    color: #6c7488;
    font-size: 14px
}

.event-register-modal .event-register-close {
    width: 40px;
    height: 40px
}

.event-register-modal .event-register-close::before {
    color: #6c7488
}

.event-register-modal .event-register-body {
    padding: 0 28px 28px
}

.event-register-modal .event-register-label {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: #ff5f3c
}

.event-register-modal .event-register-input {
    width: 100%;
    padding: 8px 18px;
    border-radius: 5px;
    border: 1px solid #d8dce7;
    background: #f3f6fb;
    color: #17243e;
    font-size: 15px
}

.event-register-modal .event-register-input:focus {
    border-color: #ff5f3c;
    box-shadow: 0 0 0 0.15rem rgba(255, 95, 60, 0.14);
    background: #ffffff
}

.event-register-modal .event-register-body label {
    color: #17243e;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px
}

.event-register-modal .event-required {
    color: #ff4d4f
}

.event-register-modal .event-register-submit {
    width: 100%;
    padding: 10px 18px;
    border-radius: 4px;
    background: #ff5f3c;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border: none;
    transition: background 0.2s ease
}

.event-register-modal .event-register-submit:hover {
    background: #e04d31
}

.event-register-modal .modal-backdrop.show {
    background-color: rgba(16, 32, 70, 0.65)
}

@media (max-width: 576px) {
    .event-register-modal .event-register-header, .event-register-modal .event-register-body {
        padding-left: 20px;
        padding-right: 20px
    }
}

.blog-card h6, .blog-card2 h6 {
    font-size: 24px;
    font-weight: 700;
    color: #2e345d;
    margin-bottom: 19px
}

.blog-card p, .blog-card2 p {
    color: #5d6485
}

.blog-card, .blog-card2 {
    height: 100%
}

.blog-card a, .blog-card2 a {
    text-decoration: none;
    color: inherit
}

.blog-img {
    overflow: hidden;
    border-radius: 12px
}

.blog-img img, .blog-card2 img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 12px;
    transition: 0.4s ease
}

.large-card .blog-img img {
    height: 345px
}

.blog-card:hover img, .blog-card2:hover img {
    transform: scale(1.05)
}

.badge {
    background: #edf2ff;
    color: #014efe;
    padding: 8px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600
}

.plus-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #014efe;
    color: #fff;
    font-size: 24px
}

.recent p {
    color: #5d6485;
    font-size: 18px
}

.big-title {
    font-size: 70px;
    font-weight: 800;
    color: #2e345d
}

@media (max-width: 768px) {
    .big-title {
        font-size: 42px;
        margin-bottom: 20px !important
    }

    .blog-card h6, .blog-card2 h6 {
        font-size: 20px
    }
}

.db-top-bar a {
    text-decoration: none
}

.db-main-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 40px 80px;
    display: grid;
    grid-template-columns:240px 1fr;
    gap: 64px
}

.db-side-panel {
    position: sticky;
    top: 100px;
    align-self: start
}

.db-side-panel h4 {
    margin: 0 0 14px;
    font-size: 16px;
    text-transform: uppercase;
    color: #6b73a3;
    font-weight: 600
}

.db-side-panel ul {
    list-style: none;
    margin: 0 0 36px;
    padding: 0
}

.db-side-panel li {
    margin-bottom: 10px
}

.db-side-panel a {
    color: #1a1f3a;
    font-size: 18px;
    display: flex;
    gap: 10px;
    align-items: baseline;
    text-decoration: none
}

.db-side-panel a:hover {
    color: #014efe
}

.db-count {
    color: #014efe;
    font-weight: 600;
    min-width: 20px
}

.db-stats-wrap {
    border-top: 1px solid #e3e6f1;
    padding-top: 18px
}

.db-single-stat {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 16px;
    color: #6b73a3
}

.db-single-stat strong {
    color: #1a1f3a;
    font-weight: 600
}

.db-blog-content {
    max-width: 720px
}

.db-series-label {
    font-size: 16px;
    text-transform: uppercase;
    color: #014efe;
    margin-bottom: 15px;
    font-weight: 600
}

.db-series-divider {
    color: #6b73a3;
    margin: 0 8px
}

.db-main-title {
    font-size: 50px;
    margin: 0 0 24px;
    color: #111;
    font-weight: 800
}

.db-sub-text {
    font-size: 22px;
    color: #6b73a3;
    margin-bottom: 36px
}

.db-author-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    font-size: 13px;
    color: #6b73a3;
    padding: 18px 0;
    border-top: 1px solid #e3e6f1;
    border-bottom: 1px solid #e3e6f1;
    margin-bottom: 48px
}

.db-author-name {
    color: #1a1f3a;
    font-weight: 600
}

.db-author-sep {
    color: #e3e6f1
}

.db-banner-img {
    margin-bottom: 56px
}

.db-banner-img img, .db-inner-figure img {
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block
}

.db-banner-img img {
    height: 380px
}

.db-inner-figure img {
    height: 320px
}

.db-banner-img figcaption, .db-inner-figure figcaption {
    font-size: 13px;
    color: #6b73a3;
    margin-top: 12px
}

.db-content-section {
    margin-bottom: 30px
}

.db-section-heading {
    font-size: 30px;
    margin-bottom: 18px;
    color: #020b50;
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-weight: 600
}

.db-section-index {
    font-size: 14px;
    font-weight: 700;
    color: #014efe;
    min-width: 36px
}

.db-blog-content p {
    margin-bottom: 22px;
    font-size: 18px;
    color: #1a1f3a
}

.db-first-letter {
    float: left;
    font-size: 76px;
    padding: 6px 10px 0 0;
    color: #020b50;
    font-weight: 500
}

.db-inner-figure {
    margin: 32px 0
}

.db-figure-label {
    font-weight: 700;
    color: #014efe;
    text-transform: uppercase;
    font-size: 11px;
    min-width: 44px
}

.db-writer-card {
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid #e3e6f1;
    display: flex;
    gap: 18px;
    align-items: flex-start
}

.db-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #020b50;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0
}

.db-writer-name {
    font-weight: 700;
    color: #1a1f3a;
    margin-bottom: 4px
}

.db-writer-desc {
    font-size: 14px;
    color: #6b73a3;
    margin: 0
}

.db-pagination-nav {
    max-width: 720px;
    margin: 56px auto 0;
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid #e3e6f1;
    font-size: 14px
}

.db-pagination-link {
    color: #014efe;
    font-weight: 600;
    text-decoration: none
}

.db-pagination-link.disabled {
    color: #6b73a3;
    pointer-events: none
}

.db-feature-pullquote {
    font-size: 24px;
    color: #020b50;
    border-left: 3px solid #014efe;
    padding: 8px 0 8px 24px;
    margin: 36px 0
}

.db-benefit-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 18px;
    margin: 32px 0
}

.db-benefit-card {
    background: #fbfaf6;
    border: 1px solid #e3e6f1;
    border-radius: 6px;
    padding: 22px
}

.db-benefit-number {
    font-size: 12px;
    font-weight: 700;
    color: #014efe;
    text-transform: uppercase;
    margin-bottom: 6px
}

.db-benefit-title {
    font-size: 18px;
    font-weight: 500;
    color: #020b50;
    margin-bottom: 8px
}

.db-blog-content .db-benefit-body {
    font-size: 14px;
    color: #6b73a3;
    margin: 0
}

.db-cta-card {
    background: #020b50;
    color: #fff;
    padding: 32px;
    border-radius: 6px;
    margin: 40px 0 0
}

.db-cta-card h3 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 500;
    color: #fff
}

.db-blog-content .db-cta-card p {
    margin: 0 0 16px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85)
}

.db-cta-link {
    display: inline-block;
    background: #01e3fb;
    color: #020b50;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none
}

.db-cta-link:hover {
    background: #fff;
    color: #020b50;
    text-decoration: none
}

@media (max-width: 960px) {
    .db-main-wrapper {
        grid-template-columns:1fr;
        padding: 32px 24px 64px;
        gap: 40px
    }

    .db-side-panel {
        position: static
    }

    .db-main-title {
        font-size: 40px
    }

    .db-banner-img img {
        height: 300px
    }

    .db-inner-figure img {
        height: 240px
    }

    .db-benefit-grid {
        grid-template-columns:1fr
    }
}

@media (max-width: 540px) {
    .db-main-title {
        font-size: 32px
    }

    .db-sub-text {
        font-size: 18px
    }

    .db-first-letter {
        font-size: 58px
    }

    .db-banner-img img {
        height: 220px
    }

    .db-inner-figure img {
        height: 200px
    }

    .db-feature-pullquote {
        font-size: 20px;
        padding-left: 18px
    }

    .db-cta-card {
        padding: 24px
    }
}

.bg-products {
    background: #F7F7FC
}

#shareJobModal .modal-content {
    border-radius: 20px;
    overflow: hidden
}

.share-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease
}

.share-icon:hover {
    transform: translateY(-5px);
    color: #fff
}

.facebook {
    background: #1877F2
}

.twitter {
    background: #000
}

.linkedin {
    background: #0A66C2
}

.whatsapp {
    background: #25D366
}

.telegram {
    background: #229ED9
}

.copy-link-box {
    position: relative
}

.copy-link-box input {
    height: 52px;
    border-radius: 14px;
    padding-right: 60px;
    border: 1px solid #dcdcdc;
    box-shadow: none
}

.copy-link-box input:focus {
    box-shadow: none;
    border-color: #198754
}

.copy-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    border: none;
    background: #198754;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    transition: 0.3s
}

.copy-btn:hover {
    background: #146c43
}

.dbri-ai-analysis-main-sec {
    background: #f5f6fa;
    padding: 90px 0;
    overflow: hidden
}

.dbri-ai-analysis-heading-wrap {
    max-width: 1020px;
    margin: 0 auto 55px
}

.dbri-ai-analysis-main-title {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 700;
    color: #2d3561;
    margin-bottom: 22px;
    letter-spacing: -1px;
    font-family: "Figtree", sans-serif
}

.dbri-ai-analysis-main-desc {
    font-size: 19px;
    line-height: 1.9;
    color: #666d88;
    font-weight: 400;
    margin: 0 auto;
    max-width: 1150px
}

.dbri-ai-analysis-card-box {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
    border: 1px solid #ececf3;
    transition: all 0.35s ease;
    position: relative
}

.dbri-ai-analysis-card-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(45, 53, 97, 0.08)
}

.dbri-ai-analysis-img-wrap {
    padding: 22px 22px 0
}

.dbri-ai-analysis-card-img {
    width: 100%;
    border-radius: 18px;
    display: block;
    object-fit: cover;
    object-fit: contain;
    height: 240px
}

.dbri-ai-analysis-content-box {
    background: #f8f8fb;
    margin: 18px;
    margin-top: 16px;
    border-radius: 20px;
    padding-top: 20px;
    padding-left: 22px;
    padding-right: 12px;
    position: relative;
    min-height: 285px
}

.dbri-ai-analysis-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #303863;
    margin-bottom: 10px
}

.dbri-ai-analysis-card-desc {
    font-size: 16px;
    color: #5f6681;
    margin-bottom: 0;
    font-weight: 400
}

.dbri-ai-analysis-arrow-btn {
    position: absolute;
    right: 28px;
    bottom: 28px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #1f2937;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease
}

.dbri-ai-analysis-arrow-btn:hover {
    background: #2f46d8;
    color: #ffffff;
    transform: scale(1.08)
}

@media (max-width: 1399px) {
    .dbri-ai-analysis-main-title {
        font-size: 46px
    }

    .dbri-ai-analysis-card-title {
        font-size: 30px
    }

    .dbri-ai-analysis-card-desc {
        font-size: 16px
    }
}

@media (max-width: 1199px) {
    .dbri-ai-analysis-main-title {
        font-size: 42px
    }

    .dbri-ai-analysis-main-desc {
        font-size: 17px;
        line-height: 1.8
    }

    .dbri-ai-analysis-content-box {
        min-height: 310px
    }

    .dbri-ai-analysis-card-title {
        font-size: 28px
    }
}

@media (max-width: 991px) {
    .dbri-ai-analysis-main-sec {
        padding: 70px 0
    }

    .dbri-ai-analysis-main-title {
        font-size: 36px
    }

    .dbri-ai-analysis-main-desc {
        font-size: 16px;
        line-height: 1.8
    }

    .dbri-ai-analysis-content-box {
        min-height: auto
    }
}

@media (max-width: 767px) {
    .dbri-ai-analysis-main-sec {
        padding: 60px 0
    }

    .dbri-ai-analysis-heading-wrap {
        margin-bottom: 40px
    }

    .dbri-ai-analysis-main-title {
        font-size: 30px;
        line-height: 1.3
    }

    .dbri-ai-analysis-main-desc {
        font-size: 15px;
        line-height: 1.8
    }

    .dbri-ai-analysis-content-box {
        padding: 28px 22px 30px
    }

    .dbri-ai-analysis-card-title {
        font-size: 25px;
        margin-bottom: 18px
    }

    .dbri-ai-analysis-card-desc {
        font-size: 15px;
        line-height: 1.8;
        padding-right: 0
    }

    .dbri-ai-analysis-arrow-btn {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 24px;
        width: 52px;
        height: 52px
    }
}

@media (max-width: 575px) {
    .dbri-ai-analysis-main-title {
        font-size: 26px
    }

    .dbri-ai-analysis-main-desc {
        font-size: 14px
    }

    .dbri-ai-analysis-img-wrap {
        padding: 16px 16px 0
    }

    .dbri-ai-analysis-content-box {
        margin: 16px;
        border-radius: 18px
    }

    .dbri-ai-analysis-card-title {
        font-size: 22px
    }
}


@media (max-width: 768px) {
    .dept-image-wrapper img {
        display: none;
    }

    .contact-section__form-box::before {
        display: none;
    }

    .contact-section__form-box::after {
        display: none;
    }

    .home-arrow {
        display: none;
    }

    /* .msd-desc{
        text-align: center;
       } */
    .tier-d {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 13px;
    }

    .tier-body h3 {
        text-align: left;
    }

    .lti-circle {
        width: 80px;
        height: 80px;
        font-size: 18px;
        top: 32px;

    }

    .mti-circle {
        width: 80px;
        height: 80px;
        font-size: 18px;
        top: 32px;

    }

    .ati-circle {
        width: 80px;
        height: 80px;
        font-size: 18px;
        top: 32px;

    }

    .rti-circle {
        width: 80px;
        height: 80px;
        font-size: 18px;
        top: 32px;
    }

    .lti-card-header {
        font-size: 11px;
    }

    .lti-panel {
        margin-bottom: 20px;
    }

    .bx-bottom-strip {
        margin-top: 0px;
    }

    .msd-desc-1 {
        padding: 0 10px !important;
    }

    .title-soc {
        font-size: 18px;
    }

    .box-soc {
        padding: 20px 15px;
    }
}

@media (max-width: 767px) {
    .center-mobile {
        display: block !important;
        margin: 0.75rem auto !important;

    }

    .careers-join-label,
    .careers-values-label {
        justify-content: flex-start;
    }
}

@media (max-width: 991px) {
    .nx-wrap .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .nx-wrap .scene {
        width: 100%;
        margin-top: 32px;
        border-radius: 24px;
        --lms-hub-scale: 0.72;
    }

    .nx-wrap .inner {
        display: flex;
        justify-content: center;
        height: calc(620px * var(--lms-hub-scale));
    }

    .nx-wrap .hub-wrap {
        flex: 0 0 620px;
        transform: scale(var(--lms-hub-scale));
        transform-origin: top center;
    }
}

@media (max-width: 575px) {
    .nx-wrap .scene {
        --lms-hub-scale: 0.44;
        border-radius: 18px;
    }
}

@media (max-width: 991.98px) {
    .main-footer .row.py-3 > .col-lg-3:first-child {
        text-align: center;
    }

    .main-footer .footer-policies {
        margin-bottom: 18px;
    }

    .main-footer .social-icons {
        margin-top: 14px;
    }
}


@media (max-width: 768px) {
    .edtech-card {
        grid-template-columns: 1fr !important;
    }

    .ec-image {
        min-height: 240px !important;
    }

    .ec-image img {
        position: relative;
        z-index: 1;
    }

    .ec-overlay {
        z-index: 2;
        align-items: flex-end;
        padding: 16px;
    }

    .ec-dash {
        width: 100%;
    }

    .modal-body .section-title {
        font-weight: 700;
        font-size: 18px !important;
        text-transform: uppercase;
        color: #23284f;
        margin-bottom: 15px;
        letter-spacing: 0px;
    }
}

@media (max-width: 767.98px) {
    .detect-hero-section .detect-text-box > .custom-btn,
    .detect-hero-section .detect-text-box > .ms-btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 52px;
    }

    .detect-hero-section .detect-text-box > .custom-btn {
        margin-right: 0 !important;
        width: 100%;
    }

    .offer-tall {
        min-height: fit-content !important;
    }

    @media (max-width: 991px) {
        .custom-btn {
            width: 100%;
        }

        .workflo-section .workflow-card .custom-btn {
            width: 100% !important;
        }

        .zone-btn {
            width: 100% !important;
            text-align: center;
        }

        .thinking-btn {
            width: 100% !important;
            text-align: center;
        }

        .spot-overlay a {
            width: 100% !important;
            text-align: center;
            display: block;

        }

        .mss-btn-primary {
            width: 100% !important;
            text-align: center;
        }

        .ms-btn-outline {
            width: 100% !important;
            text-align: center;
        }

        .ai-access-btn {
            width: 100% !important;
            text-align: center;
        }

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

        .explore-btns {
            width: 100% !important;
        }

        .ai-check-button {
            width: 100% !important;
            text-align: center;
        }

        .explore-btn {
            width: 100% !important;
            text-align: center;
            display: block;
        }

        .trust-demo-btn {
            width: 100% !important;
            text-align: center;
            display: block;


        }

        .banner-btn {
            width: 100% !important;
            text-align: center;
            display: block;
        }

        .ms-ai-btn {
            width: 100% !important;
            text-align: center;
            display: block;
        }

        .kb-btn-dark {
            width: 100% !important;
            text-align: center;
            display: block;
        }

        .kb-btn-light {
            width: 100% !important;
        }

        .lms-btn {
            width: 100%;
            text-align: center;
        }

        .dbsm-primary-btn {
            width: 100%;
            text-align: center;
            display: block !important;
        }

        .db-card-inner {
            padding-left: 10px;
            padding-top: 24px;
            padding-right: 10px;
        }

        .db-status-row {
            margin: 0 10px;
        }

        .cta-btn {
            width: 100%;
            text-align: center;
            display: block !important;
        }

        .contact-btn {
            width: 100%;
            text-align: center;
        }

        .kb-read-btn {
            width: 100%;
        }

        .owl-nav {
            display: none;
        }

        .past-card {
            height: auto;
        }

        .section-header h2 {
            line-height: 30px;
            margin-bottom: 16px !important;
        }

        .section-header p {
            text-align: left;
        }


    }
}


/* ===== GET STARTED BUTTON + DROPDOWN (navbar) ===== */
/* button reuses .btn.btn-primary + .lets-talk-btn styling; this only handles the chevron */
.gs-toggle .dropdown-arrow {
    font-size: 12px;
    transition: transform .3s ease
}

.gs-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg)
}

.get-started-dropdown {
    width: 300px;
    padding: 8px !important;
    border: none;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 24px 60px rgba(17, 25, 43, .18);
    animation: dropIn .3s ease
}

.get-started-dropdown .dropdown-head {
    padding: 10px 12px 8px
}

.get-started-dropdown .dropdown-head b {
    font-size: 15px;
    color: #11192b
}

.dropdown .dropdown-menu a.gs-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    color: #11192b;
    transition: all .25s ease;
    border: 1px solid transparent
}

.dropdown .dropdown-menu a.gs-item:hover {
    background: #f5f7ff !important;
    border-color: #e7ebff;
    color: #11192b !important
}

.gs-item .icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px
}

.gs-item .gs-text b {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #11192b
}

.dropdown .dropdown-menu a.gs-item:hover .gs-text b {
    color: #11192b !important
}

.gs-item .gs-arrow {
    margin-left: auto;
    font-size: 15px;
    color: #c2c7d6;
    transition: .25s ease
}

.dropdown .dropdown-menu a.gs-item:hover .gs-arrow {
    color: #4f46e5 !important;
    transform: translateX(3px)
}

@media (max-width: 991px) {
    .gs-toggle {
        justify-content: center;
        width: 100%
    }

    .get-started-dropdown {
        width: 100%
    }
}

.spotlight-area .spot-card {
    height: 100%;
}

.spotlight-area .col-lg-4>.spot-card {
    aspect-ratio: 772 / 1117;
}

.spotlight-area .col-lg-8>.row>.col-12>.spot-card {
    aspect-ratio: 1698 / 586;
}

.spotlight-area .col-lg-8>.row>.col-md-6>.spot-card {
    aspect-ratio: 828 / 586;
}

.spotlight-area .spot-card>img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}
.insights-hero .insights-slider .insights-video-item {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
}

.insights-hero .insights-slider .insights-video-item>img {
    display: block;
    width: 100% !important;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}