/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Allura&family=Alex+Brush&family=Dancing+Script:wght@700&family=Pacifico&family=Parisienne&family=Satisfy&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: 'Segoe UI',Geneva, Verdana, sans-serif, Tahoma,'Inter','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',;
    background: #fff;
    overflow-x: hidden;
}
.allura {
    font-family: 'Allura', cursive;
}

.alex-brush {
    font-family: 'Alex Brush', cursive;
}

.dancing-script {
    font-family: 'Dancing Script', cursive;
}

.pacifico {
    font-family: 'Pacifico', cursive;
}

.parisienne {
    font-family: 'Parisienne', cursive;
}

.satisfy {
    font-family: 'Satisfy', cursive;
}
.container,
.hero-container,
.main-container
{
    width: 100% !important;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.footer-container {
    width: 90% !important;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
/* ================= HERO SECTION ================= */


/* ================= HEADER ================= */
/* ===== HEADER DEFAULT ===== */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 60px;
    z-index: 100;
    transition: 0.4s ease;
}



    /* ===== STICKY ON SCROLL ===== */
    .header.sticky {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(255,255,255,0.85);
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        padding: 12px 60px;
    }

/* ===== LOGO DEFAULT ===== */
.logo {
    width: 150px;
    transition: 0.4s ease;
}

/* ===== LOGO SHRINK (70%) ===== */
.header.sticky .logo {
    width: 105px; /* 70% of 150px */
}

/* ===== MENU LINKS ===== */
.nav-links li a {
    transition: 0.3s ease;
}

/* optional: slightly compact menu on scroll */
.header.sticky .nav-links li a {
    padding: 10px 14px;
    font-size: 14px;
}

/* menu icon */
.menu-toggle i {
    transition: 0.3s ease;
}
/* ================= LOGO ================= */
.logo {
    width: 150px;
    /*    background: rgba(255,255,255,0.85);*/
    padding: 10px 16px;
    border-radius: 14px;
    /* box-shadow: 0 8px 20px rgba(0,0,0,0.06);*/
}
/* Logo color adjustment (if PNG/SVG supports filter) */


/* Menu icon color */
.nav-links li a i {
    color: #0b63ff; /* primary verification blue */
    transition: 0.3s;
}

/* Hover effect */
.nav-links li a:hover i {
    color: #ffffff;
}

/* Mobile menu icon (hamburger) */
.menu-toggle i {
    color: #0b63ff;
    font-size: 50px;
}

/* Hover */
.menu-toggle:hover i {
    color: #003cff;
}
/* ================= NAVBAR ================= */
.navbar {
    display: flex;
    align-items: center;
}

/* Desktop Menu */
.nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
}

    .nav-links li a {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        padding: 12px 18px;
        max-width: 220px;
        color: #0a2342;
        font-size: 15px;
        font-weight: 600;
        background: rgba(255,255,255,0.75);
        border-radius: 12px;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        transition: 0.3s ease;
    }

    /* Max 20 letters safe display */
    .nav-links li a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .nav-links li a:hover {
            background: #0b63ff;
            color: #fff;
            transform: translateY(-2px);
        }

        .nav-links li a i {
            font-size: 14px;
        }

        .nav-links li a.active {
            background: #0b63ff;
            color: #fff;
        }

            .nav-links li a.active i {
                color: #fff;
            }

/* ================= MOBILE TOGGLE ================= */
.menu-toggle {
    display: none;
    font-size: 50px;
    color: #0a2342;
    cursor: pointer;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}

    .nav-links li {
        position: relative;
    }

        .nav-links li a {
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: #222;
            font-weight: 600;
            padding: 12px 15px;
        }

/* Mega Menu */

.mega-menu {
    position: absolute;
    top: 100%;
    /*  right: -40%;  Right to Left */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: min(1200px, 95vw);
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,.12);
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 30px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all .4s ease;
    z-index: 999;
}


.mega-parent:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
/* Mega Menu Links Only */

.mega-menu a {
    color: #333 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    padding: 5px !important;
    border-radius: 5px !important;
    margin: 1px;
}

    .mega-menu a:hover {
        color: #ffffff !important;
        background-color: rgb(136 160 238 / 45%) !important;
    }

.mega-menu li {
    list-style: none;
}

.mega-menu ul {
    padding: 0;
    margin: 0;
}

.mega-column h4 {
    color: #4f7cff;
    margin-bottom: 15px;
    font-size: 15px;
    border-bottom: 2px solid #eef3ff;
    padding-bottom: 10px;
}

.mega-column a {
    display: block;
    padding: 8px 0;
    color: #555;
    transition: .3s;
}

    .mega-column a:hover {
        color: #4f7cff;
        padding-left: 10px;
    }
/* Parent */

.mega-parent {
    position: relative;
}

/* Small Mega Menu */

.single-mega-menu {
    position: absolute;
    top: 100%;
    right: 0; /* Open from right side */
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 10px 0;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all .3s ease;
}
.single-mega-menu-right {
    position: absolute;
    top: 100%;
    left: 0; /* Open from left side */
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 10px 0;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all .3s ease;
}
/* Show on Hover */

.mega-parent:hover .single-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Submenu Links */

.single-mega-menu a {
    display: block;
    padding: 12px 20px;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all .3s ease;
}

    .single-mega-menu a:hover {
        background: #f5f8ff;
        color: #4f7cff;
        padding-right: 30px; /* Right-to-left hover effect */
    }
.single-mega-menu-right {
    position: absolute;
    top: 100%;
    left: 0; /* Open from left side */
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 10px 0;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all .3s ease;
}
.mega-parent:hover .single-mega-menu-right {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Submenu Links */

.single-mega-menu-right a {
    display: block;
    padding: 12px 20px;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all .3s ease;
}

    .single-mega-menu-right a:hover {
        background: #f5f8ff;
        color: #4f7cff;
        padding-right: 30px; /* Right-to-left hover effect */
    }
/* Arrow */

.single-mega-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: #fff;
    transform: rotate(45deg);
}
.single-mega-menu-right::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: #fff;
    transform: rotate(45deg);
}

/*
    ++++++++++++++++++++++++++++++++++++++++++
    HERO
    +++++++++++++++++++++++++++++++++++++++
*/
.hero {
    padding: 90px 0;
    background: linear-gradient(180deg,#fff,#f6fbff);
    overflow: hidden;
    position: relative;
    margin-top:100px;
        
}

    .hero:before {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: #eaf4fc;
        right: -120px;
        top: -160px
    }

.container {
    width: 90%;    
    max-width:90%;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 50px;
    align-items: center;
    position: relative
}

.badge {
    display: inline-block;
    background: #EAF4FC;
    color: #2F7DBD;
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 700
}

.left h1 {
    font-size: 58px;
    color: #0A2342;
    margin: 20px 0
}

    .left h1 span {
        color: #2F7DBD
    }

.left p {
    line-height: 1.8;
    color: #666
}

.left ul {
    list-style: none;
    margin: 25px 0
}

.left li {
    margin: 12px 0
}

.left i {
    color: #2F7DBD;
    margin-right: 8px
}

.btn {
    display: inline-block;
    padding: 15px 28px;
    background: #2F7DBD;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    margin-right: 12px
}

.outline {
    background: #fff;
    color: #2F7DBD;
    border: 2px solid #2F7DBD
}

.video {
    padding: 10px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(0,0,0,.12);
    animation: float 4s ease-in-out infinite
}

iframe {
    width: 100%;
    height: 420px;
    border: 0;
    border-radius: 14px
}

@keyframes float {
    50% {
        transform: translateY(-10px)
    }
}


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

.footer-area {
    position: relative;
    background: linear-gradient( 135deg, #0b1f4d 0%, #162f6e 100% );
    color: #fff;
    overflow: hidden;
}

    /* Background Pattern */

    .footer-area::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at top right, rgba(79,124,255,.15), transparent 30% ), radial-gradient( circle at bottom left, rgba(0,198,255,.10), transparent 35% );
    }

/*===================================
 TOP
===================================*/

.footer-top {
    padding: 80px 0 50px;
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.3fr 1.5fr;
    gap: 40px;
}

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

.footer-logo {
    max-width: 180px;
    margin-bottom: 20px;
}

.footer-widget p {
    color: rgba(255,255,255,.75);
    line-height: 1.9;
}

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

.footer-widget h4 {
    color: #fff;
    margin-bottom: 25px;
    font-size: 22px;
    position: relative;
}

    .footer-widget h4:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 40px;
        height: 3px;
        background: #4f7cff;
        border-radius: 10px;
    }

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

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

    .footer-widget ul li {
        margin-bottom: 12px;
    }

        .footer-widget ul li a {
            color: rgba(255,255,255,.75);
            text-decoration: none;
            transition: .3s;
        }

            .footer-widget ul li a:hover {
                color: #4f7cff;
                padding-left: 8px;
            }

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

.footer-contact p {
    margin-bottom: 15px;
}

.footer-contact i {
    color: #4f7cff;
    width: 25px;
}

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

.social-links {
    margin-top: 25px;
    display: flex;
    gap: 12px;
}

    .social-links a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        .social-links a:hover {
            background: #4f7cff;
            transform: translateY(-5px);
        }

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

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0;
    position: relative;
    z-index: 2;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    margin: 0;
    color: rgba(255,255,255,.65);
}

.footer-links {
    display: flex;
    gap: 25px;
}

    .footer-links a {
        color: rgba(255,255,255,.65);
        text-decoration: none;
    }

        .footer-links a:hover {
            color: #4f7cff;
        }

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
    gap: 35px;
}

.company-info {
    padding-right: 20px;
}
/*===================================
 Training
===================================*/
.training-card {
    background: #ffffff;
    padding: 35px;
    border-radius: 20px;

}


.training-header .badge {
    display: inline-block;
    background: #eaf2ff;
    color: #0b63ff;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}


.training-header h2 {
    font-size: 32px;
    line-height: 1.3;
    font-weight: 800;
    color: #172033;
    margin-bottom: 15px;
}


    .training-header h2 span {
        color: #2f7dbd;
    }


.training-header p {
    color: #687385;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 650px;
}



.trust-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}


    .trust-list li {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 12px 0;
        font-size: 16px;
        color: #303846;
        border-bottom: 1px solid #eeeeee;
    }


        .trust-list li i {
            width: 38px;
            height: 38px;
            background: #f0f6ff;
            color: #0b63ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }



.btn-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}


.main-verify-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: #0b63ff;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
}


    .main-verify-btn:hover {
        background: #084dc4;
        color: #fff;
    }


.arrow {
    font-size: 20px;
}
/*+++++++++++++++++++++++++++++++
    Content

+++++++++++++++++++++++++++++++++*/

.div-section {
    display: flex;
    align-items: center;
    gap: 50px;
}
.div-section-margin-50tb {
    margin:50px 0px;
}
.div-section-container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 60px 15px;
}
.left-50,.right-50 {
    width:50%;
}


/* Video Box */
.content-video {
    position: relative;
    width: 100%;
    padding-top: 62%;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0,0,0,.15);
    animation: videoMove 4s ease-in-out infinite;
}


    /* Video Glow Border */
    .content-video::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: linear-gradient( 45deg, #0b63ff, #00c6ff, #0b63ff );
        border-radius: 22px;
        z-index: -1;
        animation: rotateBorder 5s linear infinite;
    }


    .content-video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 20px;
        transition: .5s ease;
    }


    /* Hover Zoom */
    .content-video:hover iframe {
        transform: scale(1.05);
    }



/* Floating Video Animation */
@keyframes videoMove {

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

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



/* Border Animation */
@keyframes rotateBorder {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



/* Content */
.sub-title {
    color: #0b63ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 15px 0px;
}


.right-50 h1 {
    font-size: 38px;
    line-height: 1.3;
    font-weight: 800;
    color: #172033;
    margin-bottom: 20px;
}


.right-50 p {
    font-size: 16px;
    line-height: 1.8;
    color: #5d6675;
}



/* Content Animation */
.right-50 {
    animation: slideContent 1s ease;
}


@keyframes slideContent {

    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/*===================================

    TAB

=====================================*/
.verification-section {
    text-align:center;
}
.service-tabs {
    display: flex;
    gap: 15px;
    margin: 40px auto;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 10px 5px;
    max-width: 1200px;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .service-tabs::-webkit-scrollbar {
        display: none;
    }


.tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 0;
    background: #f1f5f9;
    padding: 12px 22px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}


    .tab-btn img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }


    .tab-btn.active,
    .tab-btn:hover {
        background: #0b63ff;
        color: #fff;
    }

.service-content {
    display: none;
}

.active-content {
    display: block;
}

.service-header {
    text-align: center;
    margin-bottom: 35px;
}

    .service-header h2,
    .service-header h3 {
        font-size: 25px !important;
        font-weight: 800 !important;
        color: #172033 !important;
        margin-bottom: 25px;
       
    }

.service-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.service-card {
    background: #fff;
    padding: 10px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transition: .3s;
}
.service-content-2 {
    padding:0px 10px;
}
.service-card:hover {
    transform: translateY(-8px);
}

.service-link {
    text-decoration: none;
    color: #172033;
    text-align: left;
}
    .service-link h2 {
        font-size: 15px;
        line-height: 25px;
        font-family: Arial;
        height: 58px;
        align-content: center;
    }

    .service-image img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }
.service-image {
    width: 65px;
    height: 65px;
   /* background: #0b63ff3d;*/
    border: 1px solid rgba(11, 99, 255, 0.15);
    border-radius: 50%;
     display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(11, 99, 255, 0.08);
    transition: all 0.3s ease;
    margin-top:10px;
}
.sub-text {
    height: auto;

}
.explore-link {
    display: block;
    text-align: right;
    color: #0b63ff;
    font-size: 14px;
    font-weight: 600;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.service-link:hover .explore-link {
    color: #084fc7;
    transform: translateX(4px);
}

/* ==============================
   PROCESS SECTION
=================================*/
.process-section {
    padding: 90px 0;
    background: #f8fbff;
    position: relative;
    overflow: hidden;
}

.process-section::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(11,99,255,.04);
}

.process-section::after {
    content: "";
    position: absolute;
    left: -120px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(11,99,255,.03);
}

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

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

    .section-title span {
        display: inline-block;
        padding: 8px 20px;
        background: #eaf3ff;
        color: #0b63ff;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .section-title h2 {
        font-size: 42px;
        font-weight: 800;
        margin-top: 18px;
        color: #132238;
    }

/* ==============================
   GRID
=================================*/

.processSwiper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}

/* ==============================
   CARD
=================================*/

.inner-box {
    background: #fff;
    border-radius: 22px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid #edf2f8;
    transition: .35s;
    box-shadow: 0 15px 35px rgba(0,0,0,.05);
}

    .inner-box:hover {
        transform: translateY(-10px);
        border-color: #0b63ff;
        box-shadow: 0 25px 55px rgba(11,99,255,.15);
    }

    /* Top Border */

    .inner-box::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 5px;
        background: #0b63ff;
        transform: scaleX(0);
        transition: .35s;
    }

    .inner-box:hover::before {
        transform: scaleX(1);
    }

/* ==============================
   STEP NUMBER
=================================*/

.step-no {
    position: absolute;
    top: 22px;
    right: 22px;
    font-size: 44px;
    font-weight: 800;
    color: #edf3fb;
    line-height: 1;
}

/* ==============================
   ICON
=================================*/

.icon-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #eef6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 25px;
}

    .icon-box i {
        font-size: 32px;
        color: #0b63ff;
        position: relative;
        z-index: 5;
    }

    .icon-box:before {
        content: "" !important;
    }
/* Animated Rings */

.anim-icon {
    position: absolute;
    inset: 0;
}

    .anim-icon span {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid rgba(11,99,255,.18);
        animation: pulse 3s infinite;
    }

    .anim-icon .icon-2 {
        animation-delay: .7s;
    }

    .anim-icon .icon-3 {
        animation-delay: 1.4s;
    }

@keyframes pulse {

    0% {
        transform: scale(1);
        opacity: 1;
    }

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

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

.inner-box h3 {
    font-size: 22px;
    color: #132238;
    margin-bottom: 14px;
    font-weight: 700;
}

.inner-box p {
    color: #6b7280;
    font-size: 15px;
    line-height: 28px;
    margin: 0;
}

/* ==============================
   HOVER
=================================*/

.inner-box:hover .icon-box {
    background: #0b63ff;
}

    .inner-box:hover .icon-box i {
        color: #fff;
    }

.inner-box:hover h3 {
    color: #0b63ff;
}

/*==================================
   INDUSTRY SECTION
==================================*/

.industry-section {
    position: relative;
    padding: 90px 0;
    background: #f8fbff;
    overflow: hidden;
}

.bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(11,99,255,.08), transparent 35%), radial-gradient(circle at bottom left, rgba(11,99,255,.05), transparent 35%);
    z-index: 0;
}

.industry-section .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: none !important;
}

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

.industry-section .section-title {
    text-align: center;
    margin-bottom: 60px;
}

    .industry-section .section-title span {
        display: inline-block;
        padding: 8px 22px;
        background: #eaf3ff;
        color: #0b63ff;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .industry-section .section-title h2 {
        font-size: 42px;
        font-weight: 800;
        color: #132238;
        margin-top: 18px;
    }

/*==================================
   SWIPER
==================================*/

.industrySwiper {
    padding: 15px 5px 45px;
}

    .industrySwiper .swiper-slide {
        height: auto;
    }

/*==================================
   CARD
==================================*/

.industry-item {
    background: #fff;
    border: 1px solid #edf2f8;
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    transition: .35s ease;
    box-shadow: 0 12px 30px rgba(0,0,0,.05);
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .industry-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 4px;
        background: #0b63ff;
        transform: scaleX(0);
        transition: .35s;
    }

    .industry-item:hover::before {
        transform: scaleX(1);
    }

    .industry-item:hover {
        transform: translateY(-8px);
        border-color: #0b63ff;
        box-shadow: 0 20px 45px rgba(11,99,255,.15);
    }

/*==================================
   ICON
==================================*/

.industry-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #eef6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .35s;
    border: 1px solid #d9e9ff;
}

    .industry-icon i {
        font-size: 32px;
        color: #0b63ff;
        transition: .35s;
    }

.industry-item:hover .industry-icon {
    background: #0b63ff;
    transform: rotateY(180deg);
}

    .industry-item:hover .industry-icon i {
        color: #fff;
        transform: rotateY(-180deg);
    }

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

.industry-item h4 {
    font-size: 20px;
    font-weight: 700;
    color: #132238;
    margin: 0;
    line-height: 1.5;
    transition: .3s;
}

.industry-item:hover h4 {
    color: #0b63ff;
}

/*==================================
   SWIPER PAGINATION
==================================*/

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #cfd8e6;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 20px;
    background: #0b63ff;
}

/*==================================
   SWIPER NAVIGATION
==================================*/

.swiper-button-next,
.swiper-button-prev {
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    color: #0b63ff;
    transition: .3s;
}

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background: #0b63ff;
        color: #fff;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 18px;
        font-weight: 700;
    }

.industrySwiper {
    width: 100%;
    padding: 20px 0 50px;
}

    .industrySwiper .swiper-wrapper {
        align-items: stretch;
    }

    .industrySwiper .swiper-slide {
        height: auto;
    }

.industry-item {
    height: 100%;
}
/*++++++++++++++++++++++++++++++++++++
    BOOK
++++++++++++++++++++++++++++++++++++*/
.career-books {
    padding: 90px 0;
    background: #f8fbff;
    overflow: hidden;
}

    .career-books .career-container {
        width: 92%;
        max-width: 92%;
        margin: auto;
    }

.career-section-title {
    text-align: center;
    margin-bottom: 60px;
}

    .career-section-title span {
        color: #2F7DBD;
        font-weight: 700;
        letter-spacing: 1px;
       
    }

    .career-section-title h2 {
        font-size: 46px;
        color: #0A2342;
        margin: 15px 0;
    }
    .career-section-title-blue {
        font-size: 46px;
        color: #2F7DBD;
        margin: 15px 0;
    }
        .career-section-title h2 span {
            color: #2F7DBD;
        }

    .career-section-title p {
        max-width: 760px;
        margin: auto;
        color: #666;
        line-height: 1.8;
    }

.book-slider {
    overflow: hidden;
    position: relative;
}

.book-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scrollBook 35s linear infinite;
}

.book-slider:hover .book-track {
    animation-play-state: paused;
}

.book-card {
    width: 250px; 
    height:350px;
    background: #ffffff;
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
    transition: .4s;
    border-top: 5px solid #2F7DBD;
}

    .book-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 30px 60px rgba(47,125,189,.25);
    }
    .book-card h1 {
        font-size: 17px;
        font-weight: 700;
        padding-left: 20px;
    }
.book-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: #EAF4FC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 25px;
}

.book-card h3 {
    color: #0A2342;
    font-size: 24px;
    margin-bottom: 15px;
}

.book-card p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 18px;
}

.book-card ul {
    padding-left: 20px;
    margin-bottom: 25px;
}

    .book-card ul li {
        margin-bottom: 10px;
        color: #444;
    }

.book-card a {
    text-decoration: none;
    color: #2F7DBD;
    font-weight: 700;
}

@keyframes scrollBook {

    0% {
        transform: translateX(0);
    }

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

/*==========================
 BLOG SECTION
==========================*/

.blog-section {
    padding: 90px 0;
    background: #f8fbff;
    overflow: hidden;
}

    .blog-section .blog-container {
        max-width: 1320px;
        margin: auto;
        padding: 0 15px;
    }

/*==========================
 Section Title
==========================*/

.blog-section-title {
    text-align: center;
    margin-bottom: 60px;
}

.bolg-section-title span {
    color: #2F7DBD;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.blog-section-title h2 {
    font-size: 44px;
    font-weight: 700;
    color: #0A2342;
    margin-top: 10px;
}

/*==========================
 Slider
==========================*/

.blog-slider {
    overflow: hidden;
    position: relative;
}

.blog-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: blogScroll 35s linear infinite;
    margin-bottom: 20px;
}

.blog-slider:hover .blog-track {
    animation-play-state: paused;
}

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

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

/*==========================
 Blog Card
==========================*/

.blog-card {
    width: 80px;
    min-width: 250px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    transition: .4s;
}

    .blog-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(47,125,189,.18);
    }

/*==========================
 Image
==========================*/

.blog-image {
    height: 150px;
    overflow: hidden;
}

    .blog-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .5s;
    }

.blog-card:hover img {
    transform: scale(1.08);
}

/*==========================
 Content
==========================*/

.blog-content {
    padding: 10px 28px;
}

.blog-date {
    color: #2F7DBD;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.blog-content h3 {
    font-size: 15px;
    line-height: 1.3;
    color: #0A2342;
    margin-bottom: 15px;
    height: 40px;
    overflow: hidden;
}

.blog-content p {
    color: #666;
    line-height: 1.3;
    margin-bottom: 25px;
    max-height:100px;
    overflow: hidden;
    font-size:13px;
}

/*==========================
 Button
==========================*/

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #2F7DBD;
    font-weight: 700;
    transition: .3s;
}

    .read-more:hover {
        color: #0A2342;
    }

    .read-more i {
        transition: .3s;
    }

    .read-more:hover i {
        transform: translateX(6px);
    }

/*==========================
Service SECTION
==========================*/

.main-service-hero-section {
    width: 100%;
    padding: 100px 0;
    background: linear-gradient(135deg,#ffffff 0%,#f5faff 100%);
    overflow: hidden;
}

    .main-service-hero-section .container {
        max-width: 1320px;
        margin: auto;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 70px;
    }

/*==========================
 LEFT SIDE
==========================*/

.main-service-hero-left {
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #EAF4FC;
    color: #2F7DBD;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 25px;
}

    .badge i {
        font-size: 18px;
    }

.main-service-hero-left h1 {
    font-size: 58px;
    font-weight: 800;
    line-height: 1.2;
    color: #0A2342;
    margin-bottom: 25px;
}

    .main-service-hero-left h1 span {
        color: #2F7DBD;
    }

.hero-subtitle {
    font-size: 20px;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.8;
}

/*==========================
 FEATURES
==========================*/

.hero-features {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 18px 20px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.07);
    transition: .35s;
}

    .feature-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(47,125,189,.18);
    }

    .feature-item i {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        background: #EAF4FC;
        color: #2F7DBD;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        flex-shrink: 0;
    }

    .feature-item span {
        font-size: 16px;
        font-weight: 600;
        color: #0A2342;
        line-height: 1.5;
    }

/*==========================
 RIGHT SIDE
==========================*/

.main-service-hero-right {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.candidate-image {
    width: 100%;
    max-width: 520px;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 35px 70px rgba(0,0,0,.12);
}

    .candidate-image img {
        width: 100%;
        display: block;
        object-fit: cover;
        transition: .5s;
    }

    .candidate-image:hover img {
        transform: scale(1.04);
    }

/*=========================================
PROCESS SECTION
=========================================*/

.process-section {
    padding: 70px 0;
    background: #f7f9fc;
    overflow: hidden;
}

/*=========================================
CONTAINER
=========================================*/

.steps-container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
}

/*=========================================
STEP CARD
=========================================*/

.step-card {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    transition: .35s;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    cursor: pointer;
}

    .step-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 30px rgba(47,125,189,.15);
    }

.active-step {
    border: 2px solid #2F7DBD;
}

/*=========================================
STEP NUMBER
=========================================*/

.step-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

/*=========================================
STEP COLORS
=========================================*/

.blue .step-number {
    background: #2F7DBD;
}

.green .step-number {
    background: #27AE60;
}

.purple .step-number {
    background: #7B61FF;
}

.orange .step-number {
    background: #F39C12;
}

.cyan .step-number {
    background: #00BCD4;
}

.royal .step-number {
    background: #0A2342;
}

/*=========================================
TEXT
=========================================*/

.step-content {
    width: 100%;
}

    .step-content h4 {
        font-size: 15px;
        font-weight: 600;
        color: #0A2342;
        line-height: 1.35;
        margin: 0;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .step-content p {
        display: none;
    }

.step-line {
    display: none;
}

/*=========================================
ARROWS
=========================================*/

.step-arrow {
    font-size: 22px;
    color: #2F7DBD;
    animation: moveArrow 1.5s infinite;
}

@keyframes moveArrow {

    50% {
        transform: translateX(6px);
    }
}
/*==================================================
    VERIFICATION SECTION
==================================================*/

.step-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* Card */
.step-card {
    width: 100%;
}

.step-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.verification-wrapper {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 65px;
    box-sizing: border-box;
}


/*==================================================
    HORIZONTAL SCROLL
==================================================*/

.verification-grid {
    display: grid;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: repeat(5, 1fr);
    padding: 15px 0;
    scrollbar-width: none;
}

    .verification-grid::-webkit-scrollbar {
        display: none;
    }

/*==================================================
    LINK BUTTON
==================================================*/

.step-link {
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
}
/*==================================================
    CARD-small
==================================================*/

.card-medium {
    width: 250px;
    height: 150px;
    background: #ffffff;
    border: 1px solid #e5edf7;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    transition: .35s;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    transition: .35s;
    border: 2px solid #E5EAF5;
}
    .card-medium:hover {
        transform: translateY(-8px);
        border-color: #2F7DBD;
        box-shadow: 0 18px 40px rgba(47,125,189,.18);
    }

/*==================================================
    CARD-small
==================================================*/
.card-small {
    width: 150px;
    height: 150px;
    background: #ffffff;
    border: 1px solid #e5edf7;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    transition: .35s;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    transition: .35s;
    border: 2px solid #E5EAF5;
}

    .card-small:hover {
        transform: translateY(-8px);
        border-color: #2F7DBD;
        box-shadow: 0 18px 40px rgba(47,125,189,.18);
    }





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

.veri-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #EAF4FC;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
}

    .veri-img img {
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

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

.veri-desc {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
}

    .veri-desc span {
        font-size: 15px;
        font-weight: 600;
        color: #0A2342;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /*====================================================
       
    =========================================================*/

/*==================================================
    ROUND SCROLL BUTTON
==================================================*/
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #2F7DBD;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .35s;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    z-index: 100;
}

    .scroll-btn:hover {
        background: #2F7DBD;
        color: #ffffff;
        transform: translateY(-50%) scale(1.08);
    }

    .scroll-btn.left {
        left: 5px;
    }

    .scroll-btn.right {
        right: 5px;
    }

.role-section {
    opacity: .4;
    pointer-events: none;
    transition: .4s;
}

.no-underline {
    display: block;
    text-decoration: none !important;
    color: inherit;
}



/* Card */
.step-card {
    width: 100%;
}

.step-link {
    display: contents;
    text-decoration: none;
    color: inherit;
}
/*verification package*/
.veri-package-card {
    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    font-family: Arial,sans-serif;
    font-size: .7rem;
    font-weight: 600;
    margin-top:50px;
}

    .veri-package-card h3 {
        font-size: 1.0rem;
        font-weight: 600;
        text-align: center;
        color: #1d4ed8;
        padding: 10px;
    }

.veri-package-header {
    background: #003399;
    color: #fff;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .veri-package-header .title {
        text-align: center;
        font-size: 18px;
        font-weight: 500;
      
    }

    .veri-package-header .subtitle {
        text-align: justify;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .veri-package-header small {
        font-size: .6em;
        font-weight: 600;
    }
.no-transition {
    transition: none !important;
}
.veri-name {
    font-size: 1.2em;
    font-weight: 600;
}

.badge {
    /* background: #28a745;*/
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-left: 10px;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-bottom: 1px solid #eee;
}

.stat-box {
    padding: 18px 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    border-right: 1px solid #eee;
}

    .stat-box small {
        font-size: 1em;
        font-weight: 600;
    }

    .stat-box h3 {
        font-size: 1rem;
        font-weight: 600;
        color: black;
        text-align: left;
    }

    .stat-box span {
        color: black;
        font-size: 12px;
    }



.green {
    color: #1ba84a;
}

.content-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
}

.verification-box {
    border: 1px solid #e4e8ec;
    border-radius: 10px;
    padding: 15px;
}

    .verification-box h4 {
        font-size: 17px;
        font-weight: 700;
        color: #1d4ed8;
    }

.verification-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.check-item {
    border-bottom: 1px solid #eee;
    padding: 8px 0;
}

.extra-section {
    padding: 15px;
    border-top: 1px solid #eee;
}

.tag-row {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .tag-row span {
        border: 1px solid #cfd8e3;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
    }

.btn-add-css {
    padding: 4px 25px;
    font-size: 12px;
}
.card-medium {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 15px;
    position: relative;
    transition: .3s;
}

.card-medium-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 15px;
    position: relative;
    transition: .3s;
}

.card-medium:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

.veri-img {
    flex: 0 0 70px;
}

    .veri-img img {
        width: 70px;
        height: 70px;
        object-fit: contain;
    }

.veri-content {
    flex: 1;
}

.veri-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    margin-bottom: 8px;
}

.veri-info {
    display: flex;
    gap: 25px;
    font-size: 15px;
    color: #666;
}

.veri-action {
    margin-left: 15px;
}

.btn-select {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
}

    .btn-select:hover {
        color: #fff;
        background: #1d4ed8;
    }