/* =========================================================
   DATA MANTHAN HEADER
========================================================= */

.main-header {
    width: 100%;
    background: #ffffff;
    position: relative;
    z-index: 999;
}


/* =========================================================
   TOP CERTIFICATION BAR
========================================================= */

.top-bar {
    background: linear-gradient(90deg,
            #083fc5,
            #1559df,
            #083fc5);

    color: #ffffff;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.top-bar-content {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.5px;
}

.cert-star {
    font-size: 13px;
    opacity: 0.9;
}


/* =========================================================
   MAIN HEADER
========================================================= */

.header-main {
    padding: 25px 0 20px;
}

.header-wrapper {
    min-height: 85px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;
}


/* =========================================================
   CONTACT
========================================================= */

.header-contact {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef4ff;
    color: #0d4fd7;

    border-radius: 50%;

    font-size: 14px;

    transition: all 0.3s ease;
}

.header-contact:hover .contact-icon {
    background: #0d4fd7;
    color: #ffffff;
}

.contact-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.contact-content span {
    color: #777;
    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-content a {
    color: #174fc4;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;
}

.contact-content a:hover {
    color: #092f91;
}


/* =========================================================
   LOGO
========================================================= */

.site-logo {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;

    line-height: 1;
}

.logo-name {
    font-size: 27px;
    font-weight: 500;

    letter-spacing: -0.5px;
}

.logo-data {
    color: #ed4444;
}

.logo-manthan {
    color: #393ca4;
}

.logo-tagline {
    margin-top: 7px;

    color: #333;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 0.2px;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.header-action {
    display: flex;
    justify-content: flex-end;
}

.login-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 14px;

    color: #114fc9;
    text-decoration: none;

    border: 1px solid #e5ebf8;
    border-radius: 30px;

    transition: all 0.3s ease;
}

.login-icon {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf3ff;
    border-radius: 50%;

    font-size: 13px;
}

.login-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.login-btn:hover {
    color: #ffffff;
    background: #0d4fd7;
    border-color: #0d4fd7;

    transform: translateY(-2px);
}

.login-btn:hover .login-icon {
    background: rgba(255, 255, 255, 0.2);
}


/* =========================================================
   NAVIGATION AREA
========================================================= */

.navigation-wrapper {
    padding-bottom: 18px;
}

.custom-navbar {
    min-height: 52px;

    padding: 0 20px;

    background: #ffffff;

    border: 1px solid #edf0f6;

    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(20, 57, 120, 0.07);
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.custom-navbar .navbar-nav {
    align-items: center;
    gap: 3px;
}

.custom-navbar .nav-link {
    position: relative;

    padding: 17px 15px !important;

    color: #222;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1px;

    white-space: nowrap;

    transition: all 0.3s ease;
}


/* Hover */

.custom-navbar .nav-link:hover {
    color: #1454d3;
}


/* Active */

.custom-navbar .nav-link.active {
    color: #1454d3;
}


/* Active line */

.custom-navbar .nav-link::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 8px;

    height: 2px;

    background: #1454d3;

    border-radius: 10px;

    transform: scaleX(0);

    transition: transform 0.3s ease;
}

.custom-navbar .nav-link:hover::after,
.custom-navbar .nav-link.active::after {
    transform: scaleX(1);
}


/* =========================================================
   MOBILE LOGO
========================================================= */

.mobile-logo {
    display: none;

    text-decoration: none;

    font-size: 20px;
    font-weight: 500;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .custom-navbar .nav-link {
        padding-left: 10px !important;
        padding-right: 10px !important;

        font-size: 9px;
    }

}


/* Tablet */

@media (max-width: 991px) {

    .header-main {
        padding: 18px 0;
    }

    .header-wrapper {
        min-height: 70px;
    }

    .custom-navbar {
        padding: 5px 15px;

        border-radius: 10px;
    }

    .mobile-logo {
        display: block;
    }

    .custom-navbar .navbar-nav {
        align-items: flex-start;

        padding: 15px 0;
    }

    .custom-navbar .nav-link {
        width: 100%;

        padding: 12px 10px !important;
    }

    .custom-navbar .nav-link::after {
        display: none;
    }

    .custom-navbar .nav-link.active {
        background: #eef4ff;

        border-radius: 6px;
    }

}


/* Mobile */

@media (max-width: 575px) {

    .top-bar {
        height: 28px;
    }

    .top-bar-content {
        font-size: 8px;
        letter-spacing: 1px;
        gap: 10px;
    }

    .header-main {
        padding: 15px 0;
    }

    .header-wrapper {
        display: flex;

        justify-content: space-between;
    }

    .header-contact {
        gap: 7px;
    }

    .contact-icon {
        width: 32px;
        height: 32px;

        font-size: 11px;
    }

    .contact-content span {
        display: none;
    }

    .contact-content a {
        font-size: 10px;
    }

    .site-logo {
        display: none;
    }

    .login-text {
        display: none;
    }

    .login-btn {
        padding: 5px;
        border: 0;
    }

    .login-icon {
        width: 32px;
        height: 32px;
    }

    .mobile-logo {
        font-size: 18px;
    }

    .navigation-wrapper {
        padding-bottom: 12px;
    }

}


/* ..............................................................//index//........................................................... */

/* =========================================================
   DATA MANTHAN HERO BANNER
========================================================= */

/* =========================================================
   DATA MANTHAN HERO
========================================================= */

.dm-hero {
    position: relative;
    overflow: hidden;

    padding: 75px 0 45px;

    background:
        radial-gradient(circle at 82% 25%,
            rgba(55, 105, 220, 0.10),
            transparent 30%),
        linear-gradient(135deg,
            #f8fbff 0%,
            #ffffff 52%,
            #f3f7ff 100%);
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.hero-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.hero-circle-1 {
    width: 520px;
    height: 520px;

    right: -230px;
    top: -230px;

    background: rgba(41, 91, 207, 0.055);
}

.hero-circle-2 {
    width: 350px;
    height: 350px;

    left: -220px;
    bottom: -220px;

    background: rgba(76, 61, 165, 0.035);
}

.hero-dots {
    position: absolute;

    right: 25px;
    top: 15px;

    width: 150px;
    height: 150px;

    opacity: 0.45;

    background-image: radial-gradient(#7da1e8 1.3px,
            transparent 1.3px);

    background-size: 12px 12px;

    mask-image: linear-gradient(135deg,
            black,
            transparent);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.hero-content {
    position: relative;
    z-index: 5;

    padding-right: 25px;
}


/* Badge */

.hero-badge {
    display: inline-flex;

    align-items: center;
    gap: 9px;

    padding: 8px 14px;

    margin-bottom: 20px;

    border: 1px solid #d5e2ff;

    border-radius: 50px;

    background: #eef4ff;

    color: #1554c9;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;

    display: block;

    border-radius: 50%;

    background: #1554c9;

    box-shadow:
        0 0 0 4px rgba(21, 84, 201, 0.10);
}


/* =========================================================
   TITLE
========================================================= */

.hero-title {
    max-width: 650px;

    margin: 0 0 22px;

    color: #101d3c;

    font-size: clamp(44px, 5vw, 68px);

    font-weight: 700;

    line-height: 1.06;

    letter-spacing: -2.5px;
}

.hero-title span {
    display: block;

    background: linear-gradient(90deg,
            #1455ce 0%,
            #4b3da5 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {
    max-width: 570px;

    margin-bottom: 30px;

    color: #64718a;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 38px;
}

.hero-btn {
    min-height: 50px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    padding: 0 23px;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition: all 0.3s ease;
}

.hero-btn-primary {
    color: #ffffff;

    background: #1555cf;

    box-shadow:
        0 12px 28px rgba(21, 85, 207, 0.22);
}

.hero-btn-primary:hover {
    color: #ffffff;

    background: #0c43ad;

    transform: translateY(-3px);

    box-shadow:
        0 16px 32px rgba(21, 85, 207, 0.28);
}

.hero-btn-outline {
    color: #1555cf;

    background: #ffffff;

    border: 1px solid #d5dfef;
}

.hero-btn-outline:hover {
    color: #1555cf;

    border-color: #1555cf;

    transform: translateY(-3px);
}


/* =========================================================
   TRUST POINTS
========================================================= */

.hero-trust-points {
    display: flex;

    align-items: center;

    gap: 22px;
}

.trust-point {
    display: flex;

    align-items: center;

    gap: 10px;
}

.trust-point-icon {
    width: 39px;
    height: 39px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #edf4ff;

    color: #1555cf;

    font-size: 16px;
}

.trust-point-content strong {
    display: block;

    color: #1c2943;

    font-size: 11px;
}

.trust-point-content span {
    display: block;

    margin-top: 3px;

    color: #8993a7;

    font-size: 9px;
}

.trust-divider {
    width: 1px;
    height: 35px;

    background: #dfe4ed;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.hero-visual {
    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* Blue Background Shape */

.visual-blue-shape {
    position: absolute;

    width: 83%;
    height: 78%;

    right: 2%;
    top: 11%;

    border-radius: 70px 25px 70px 25px;

    background:
        linear-gradient(135deg,
            rgba(74, 132, 242, 0.95),
            rgba(90, 105, 213, 0.50));

    transform: rotate(-5deg);

    opacity: 0.9;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.hero-image-box {
    position: relative;
    z-index: 2;

    width: 84%;

    overflow: hidden;

    border-radius: 28px;

    box-shadow:
        0 30px 70px rgba(26, 54, 112, 0.20);
}

.hero-main-image {
    display: block;

    width: 100%;

    height: 430px;

    object-fit: cover;

    transition: transform 0.6s ease;
}

.hero-image-box:hover .hero-main-image {
    transform: scale(1.04);
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.hero-floating-card {
    position: absolute;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px 16px;

    background: rgba(255, 255, 255, 0.97);

    border: 1px solid rgba(224, 230, 242, 0.9);

    border-radius: 13px;

    box-shadow:
        0 18px 40px rgba(26, 53, 108, 0.14);

    backdrop-filter: blur(10px);
}


/* ISO */

.iso-card {
    right: -5px;
    top: 45px;
}


/* Data */

.data-card {
    left: -15px;
    bottom: 55px;
}


/* Icons */

.floating-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 17px;
}

.blue-icon {
    background: #edf4ff;
    color: #1555cf;
}

.purple-icon {
    background: #f1edff;
    color: #6545b4;
}


/* Floating text */

.floating-content span {
    display: block;

    color: #8b95a9;

    font-size: 8px;

    letter-spacing: 1px;
}

.floating-content strong {
    display: block;

    margin: 2px 0;

    color: #182540;

    font-size: 12px;
}

.floating-content small {
    display: block;

    color: #8993a7;

    font-size: 8px;
}


/* =========================================================
   AI CIRCLE
========================================================= */

.ai-circle {
    position: absolute;

    z-index: 12;

    right: 25px;
    bottom: 25px;

    width: 62px;
    height: 62px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: #ffffff;

    color: #1555cf;

    border-radius: 50%;

    box-shadow:
        0 15px 35px rgba(22, 53, 110, 0.17);

    animation: aiFloat 3s ease-in-out infinite;
}

.ai-circle i {
    font-size: 16px;
}

.ai-circle span {
    margin-top: 2px;

    font-size: 9px;
    font-weight: 800;
}

@keyframes aiFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* =========================================================
   ORBIT
========================================================= */

.hero-orbit {
    position: absolute;

    z-index: 3;

    width: 92%;
    height: 75%;

    border: 1px solid rgba(53, 106, 220, 0.25);

    border-radius: 50%;

    transform: rotate(-20deg);
}

.orbit-dot {
    position: absolute;

    z-index: 8;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #3d79e5;

    border: 2px solid #ffffff;

    box-shadow:
        0 0 0 3px rgba(61, 121, 229, 0.15);
}

.orbit-dot-1 {
    top: 26%;
    left: 8%;
}

.orbit-dot-2 {
    right: 2%;
    top: 58%;
}

.orbit-dot-3 {
    bottom: 6%;
    right: 25%;
}


/* =========================================================
   BOTTOM INFORMATION BAR
========================================================= */

.hero-bottom-bar {
    position: relative;
    z-index: 20;

    display: grid;

    grid-template-columns: 1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 30px;

    margin-top: 50px;

    padding: 20px 30px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid #e3e9f3;

    border-radius: 16px;

    box-shadow:
        0 15px 40px rgba(25, 57, 110, 0.07);
}

.hero-bottom-item {
    display: flex;

    align-items: center;

    gap: 12px;
}

.bottom-item-icon {
    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    background: #edf4ff;

    color: #1555cf;

    font-size: 18px;
}

.hero-bottom-item strong {
    display: block;

    color: #1c2943;

    font-size: 11px;
}

.hero-bottom-item span {
    display: block;

    margin-top: 3px;

    color: #8792a7;

    font-size: 9px;
}

.hero-bottom-item em {
    display: block;

    width: 28px;
    height: 2px;

    margin-top: 8px;

    background: #1555cf;

    border-radius: 10px;
}

.bottom-divider {
    width: 1px;
    height: 45px;

    background: #e1e5ed;
}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media (max-width: 1199px) {

    .hero-title {
        font-size: 54px;
    }

    .hero-visual {
        min-height: 450px;
    }

    .hero-main-image {
        height: 390px;
    }

    .iso-card {
        right: -5px;
    }

    .data-card {
        left: -5px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .dm-hero {
        padding: 60px 0 40px;
    }

    .hero-content {
        padding-right: 0;

        text-align: center;
    }

    .hero-title {
        margin-left: auto;
        margin-right: auto;

        font-size: 50px;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-trust-points {
        justify-content: center;
    }

    .hero-visual {
        margin-top: 35px;

        min-height: 450px;
    }

    .hero-bottom-bar {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .bottom-divider {
        display: none;
    }

    .hero-bottom-item {
        justify-content: center;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .dm-hero {
        padding: 45px 0 30px;
    }

    .hero-badge {
        font-size: 8px;
    }

    .hero-title {
        font-size: 38px;

        letter-spacing: -1.5px;
    }

    .hero-description {
        font-size: 13px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-btn {
        width: 100%;
    }

    .hero-trust-points {
        gap: 12px;
    }

    .trust-point-icon {
        width: 34px;
        height: 34px;
    }

    .trust-point-content strong {
        font-size: 9px;
    }

    .trust-point-content span {
        font-size: 8px;
    }

    .hero-visual {
        min-height: 350px;

        margin-top: 20px;
    }

    .hero-image-box {
        width: 100%;

        border-radius: 18px;
    }

    .hero-main-image {
        height: 320px;
    }

    .visual-blue-shape {
        width: 95%;
        height: 78%;
    }

    .hero-floating-card {
        padding: 9px 10px;

        gap: 7px;
    }

    .floating-icon {
        width: 32px;
        height: 32px;

        font-size: 13px;
    }

    .floating-content strong {
        font-size: 9px;
    }

    .floating-content small {
        font-size: 7px;
    }

    .iso-card {
        top: 12px;
        right: -5px;
    }

    .data-card {
        left: -5px;
        bottom: 25px;
    }

    .ai-circle {
        width: 45px;
        height: 45px;

        right: 8px;
        bottom: 10px;
    }

    .ai-circle i {
        font-size: 12px;
    }

    .ai-circle span {
        font-size: 7px;
    }

    .hero-orbit {
        width: 105%;
        height: 75%;
    }

    .hero-bottom-bar {
        margin-top: 30px;

        padding: 18px;
    }

}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    position: relative;

    z-index: 2;

    padding-right: 30px;
}


.hero-badge {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 14px;

    margin-bottom: 20px;

    background: #eef4ff;

    border: 1px solid #dce7ff;

    border-radius: 50px;

    color: #1552c7;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.badge-dot {
    width: 7px;
    height: 7px;

    background: #1552c7;

    border-radius: 50%;

    box-shadow: 0 0 0 4px rgba(21, 82, 199, 0.1);
}


/* =========================================================
   HERO HEADING
========================================================= */

.hero-content h1 {
    max-width: 620px;

    margin: 0 0 22px;

    color: #101d3d;

    font-size: clamp(42px, 5vw, 67px);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -2px;
}


.hero-content h1 span {
    display: block;

    background: linear-gradient(90deg,
            #1552c7,
            #493da5);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.hero-content>p {
    max-width: 550px;

    margin-bottom: 30px;

    color: #65708a;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 38px;
}


.hero-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 7px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.5px;

    text-decoration: none;

    transition: all 0.3s ease;
}


.hero-btn-primary {
    color: #ffffff;

    background: #1552c7;

    box-shadow: 0 10px 25px rgba(21, 82, 199, 0.2);
}


.hero-btn-primary:hover {
    color: #ffffff;

    background: #0c3fa7;

    transform: translateY(-3px);

    box-shadow: 0 14px 30px rgba(21, 82, 199, 0.25);
}


.hero-btn-outline {
    color: #1552c7;

    border: 1px solid #d5def0;

    background: #ffffff;
}


.hero-btn-outline:hover {
    color: #1552c7;

    border-color: #1552c7;

    transform: translateY(-3px);
}


/* =========================================================
   HERO TRUST
========================================================= */

.hero-trust {
    display: flex;

    align-items: center;

    gap: 22px;
}


.trust-item {
    display: flex;

    align-items: center;

    gap: 10px;
}


.trust-icon {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #eef4ff;

    color: #1552c7;

    border-radius: 8px;

    font-size: 16px;
}


.trust-item strong {
    display: block;

    color: #202b43;

    font-size: 11px;

    font-weight: 700;
}


.trust-item span {
    display: block;

    margin-top: 3px;

    color: #8992a5;

    font-size: 9px;
}


.trust-divider {
    width: 1px;

    height: 35px;

    background: #e1e5ed;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Main Image */

.hero-image-container {
    position: relative;

    width: 90%;

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 25px 60px rgba(25, 52, 105, 0.16);
}


.hero-main-image {
    display: block;

    width: 100%;

    min-height: 430px;

    object-fit: cover;

    transition: transform 0.6s ease;
}


.hero-image-container:hover .hero-main-image {
    transform: scale(1.04);
}


.hero-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(8, 50, 130, 0.18),
            transparent 55%);

    pointer-events: none;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px 17px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(220, 226, 240, 0.8);

    border-radius: 12px;

    box-shadow:
        0 15px 40px rgba(22, 48, 100, 0.13);

    backdrop-filter: blur(10px);

    z-index: 4;
}


.iso-floating {
    top: 45px;

    right: -10px;
}


.data-floating {
    bottom: 50px;

    left: -25px;
}


.floating-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    font-size: 17px;
}


.floating-icon.blue {
    color: #1552c7;

    background: #edf3ff;
}


.floating-icon.purple {
    color: #5941a8;

    background: #f1edff;
}


.floating-card span,
.floating-card small {
    display: block;
}


.floating-card span {
    color: #8b93a5;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.floating-card strong {
    display: block;

    margin: 2px 0;

    color: #1d2943;

    font-size: 12px;
}


.floating-card small {
    color: #8b93a5;

    font-size: 8px;
}


/* =========================================================
   AI FLOATING CIRCLE
========================================================= */

.ai-floating {
    position: absolute;

    right: 35px;
    bottom: 30px;

    width: 60px;
    height: 60px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: #ffffff;

    color: #1552c7;

    border: 1px solid #e2e8f5;

    border-radius: 50%;

    box-shadow: 0 12px 30px rgba(20, 50, 100, 0.15);

    z-index: 5;

    animation: floatingAI 3s ease-in-out infinite;
}


.ai-floating i {
    font-size: 15px;
}


.ai-floating span {
    margin-top: 1px;

    font-size: 9px;

    font-weight: 800;
}


@keyframes floatingAI {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================================
   HERO STATS
========================================================= */

.hero-stats {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns: 1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 25px;

    margin-top: 65px;

    padding: 22px 30px;

    background: #ffffff;

    border: 1px solid #e8ecf4;

    border-radius: 14px;

    box-shadow: 0 12px 35px rgba(25, 55, 110, 0.06);
}


.hero-stat {
    display: flex;

    align-items: center;

    gap: 12px;
}


.stat-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #eef4ff;

    color: #1552c7;

    border-radius: 9px;

    font-size: 16px;
}


.hero-stat strong {
    display: block;

    color: #1e2a43;

    font-size: 11px;
}


.hero-stat span {
    display: block;

    margin-top: 3px;

    color: #929aab;

    font-size: 9px;
}


.stat-line {
    width: 1px;

    height: 35px;

    background: #e5e8ef;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .hero-content h1 {
        font-size: 50px;
    }

    .hero-visual {
        min-height: 450px;
    }

    .hero-image-container {
        width: 88%;
    }

    .iso-floating {
        right: -5px;
    }

    .data-floating {
        left: -5px;
    }

}


@media (max-width: 991px) {

    .dm-hero {
        padding: 60px 0 40px;
    }

    .hero-content {
        padding-right: 0;

        text-align: center;
    }

    .hero-content h1 {
        font-size: 48px;

        margin-left: auto;
        margin-right: auto;
    }

    .hero-content>p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-trust {
        justify-content: center;
    }

    .hero-visual {
        margin-top: 50px;

        min-height: 450px;
    }

    .hero-stats {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .stat-line {
        display: none;
    }

    .hero-stat {
        justify-content: center;
    }

}


@media (max-width: 575px) {

    .dm-hero {
        padding: 45px 0 30px;
    }

    .hero-badge {
        font-size: 8px;
    }

    .hero-content h1 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .hero-content>p {
        font-size: 13px;
    }

    .hero-buttons {
        flex-direction: column;

        width: 100%;
    }

    .hero-btn {
        width: 100%;
    }

    .hero-trust {
        gap: 12px;
    }

    .trust-divider {
        height: 30px;
    }

    .trust-item strong {
        font-size: 9px;
    }

    .trust-item span {
        font-size: 8px;
    }

    .hero-visual {
        min-height: 350px;

        margin-top: 25px;
    }

    .hero-image-container {
        width: 100%;

        border-radius: 16px;
    }

    .hero-main-image {
        min-height: 330px;
    }

    .floating-card {
        padding: 9px 10px;

        gap: 7px;
    }

    .floating-icon {
        width: 32px;
        height: 32px;

        font-size: 13px;
    }

    .floating-card strong {
        font-size: 9px;
    }

    .floating-card small {
        font-size: 7px;
    }

    .iso-floating {
        top: 15px;
        right: -5px;
    }

    .data-floating {
        bottom: 20px;
        left: -5px;
    }

    .ai-floating {
        width: 45px;
        height: 45px;

        right: 10px;
        bottom: 15px;
    }

    .hero-stats {
        margin-top: 35px;

        padding: 18px;
    }

}




/* ............................................................//footer//............................................................ */


/* =========================================================
   DATA MANTHAN FOOTER
========================================================= */

.site-footer {
    margin-top: 80px;
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.footer-main {
    background: #e4eafb !important;
    padding: 65px 0 55px;

    color: black;

    position: relative;
}


/* subtle top line */

.footer-main::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    /* background: linear-gradient(90deg,
            #0d4fd7,
            #5c8df5,
            #0d4fd7); */
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand {
    max-width: 350px;
}

.footer-logo {
    display: inline-flex;

    text-decoration: none;

    font-size: 30px;
    font-weight: 600;

    line-height: 1;
}

.footer-logo .logo-data {
    color: #ff6b6b;
}

.footer-logo .logo-manthan {
    color: #ffffff;
}


.footer-brand p {
    margin: 22px 0;

    color: #898989;

    font-size: 13px;
    line-height: 1.8;
}


/* Certification */

.footer-certified {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 13px;

    border: 1px solid rgb(114 114 114 / 15%);

    border-radius: 6px;

    color: #898989;

    font-size: 10px;

    letter-spacing: 0.5px;
}

.footer-certified i {
    color: #898989;
    font-size: 15px;
}


/* =========================================================
   FOOTER HEADINGS
========================================================= */

.footer-widget h5 {
    position: relative;

    margin: 0 0 22px;

    color: #898989;

    font-size: 15px;
    font-weight: 600;
}


/* small blue line */

.footer-widget h5::after {
    content: "";

    display: block;

    width: 28px;
    height: 2px;

    margin-top: 9px;

    background: #4e8cff;

    border-radius: 10px;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-links {
    padding: 0;
    margin: 0;

    list-style: none;
}

.footer-links li {
    margin-bottom: 11px;
}

.footer-links a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #898989;

    font-size: 12px;

    text-decoration: none;

    transition: all 0.3s ease;
}

.footer-links a i {
    font-size: 8px;

    color: #5d91f5;

    transition: transform 0.3s ease;
}

.footer-links a:hover {
    color: #ffffff;

    transform: translateX(3px);
}

.footer-links a:hover i {
    transform: translateX(3px);
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact {
    display: flex;

    flex-direction: column;

    gap: 15px;
}

.footer-contact>a,
.footer-address {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #858585;

    text-decoration: none;

    font-size: 12px;
}


.footer-contact-icon {
    flex-shrink: 0;

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    color: #858585;

    font-size: 13px;
}


.footer-contact small {
    display: block;

    margin-bottom: 3px;

    color: #8196c0;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.footer-social {
    display: flex;

    gap: 8px;

    margin-top: 22px;
}

.footer-social a {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #898a8c;

    border: 1px solid rgba(255, 255, 255, 0.13);

    border-radius: 50%;

    text-decoration: none;

    font-size: 13px;

    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: #0d4fd7;

    color: #ffffff;

    border-color: #0d4fd7;

    transform: translateY(-3px);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    background: #063fc7;

    color: #ffffff;

    padding: 15px 0;
}

.footer-bottom-wrapper {
    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 20px;
}


.copyright {
    font-size: 10px;

    color: rgba(255, 255, 255, 0.85);

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


.footer-powered {
    font-size: 10px;

    color: rgba(255, 255, 255, 0.8);

    text-align: center;
}

.footer-powered strong {
    margin-left: 3px;

    color: #ffffff;

    font-weight: 600;
}


.privacy-link {
    justify-self: end;

    color: #ffffff;

    font-size: 10px;

    text-decoration: none;

    opacity: 0.9;
}

.privacy-link:hover {
    text-decoration: underline;
}


/* =========================================================
   FOOTER RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .footer-main {
        padding: 50px 0 40px;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-bottom-wrapper {
        grid-template-columns: 1fr;

        text-align: center;

        gap: 8px;
    }

    .privacy-link {
        justify-self: center;
    }

}


@media (max-width: 575px) {

    .site-footer {
        margin-top: 50px;
    }

    .footer-main {
        padding: 40px 0 30px;
    }

    .footer-logo {
        font-size: 26px;
    }

    .footer-brand p {
        font-size: 12px;
    }

    .footer-widget h5 {
        margin-top: 10px;
    }

    .footer-bottom {
        padding: 18px 0;
    }

    .copyright,
    .footer-powered,
    .privacy-link {
        font-size: 9px;
    }

}