* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif;
    background: #030816;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 0 20px;
}

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

:root {

    --primary: #020B53;
    --secondary: #9F053A;
    --sky: #4FC3F7;
    --white: #ffffff;
}

/* ====================================
        HEADER
==================================== */
.header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    padding: 20px 0 5px;
    background: #f9f9f9;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo img {
    height: 80px;
    width: 100%;
}
.logo h2 {

    color: var(--white);
    font-size: 34px;
    font-weight: 700;
}

/* ====================================
        MENU
==================================== */

.nav-menu ul {

    display: flex;
    align-items: center;
    gap: 38px;

    list-style: none;
}

.nav-menu ul li a {
    position: relative;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    transition: .4s ease;
    cursor: pointer;
}
.nav-menu ul li a:hover, .nav-menu ul li a.active {
    color: var(--primary);
    font-size: 16px;
}
.nav-menu ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--secondary);
    transition: .4s ease;
}

.nav-menu ul li a:hover::after,
.nav-menu ul li a.active::after {

    width: 100%;
}

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

.nav-buttons {

    display: flex;
    align-items: center;
    gap: 15px;
}

.btn {

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

    padding: 15px 32px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    transition: .4s ease;

    cursor: pointer;
}

/* SEARCH */

.search-btn {

    width: 52px;
    height: 52px;

    border-radius: 50%;

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

    color: var(--white);

    border:
        1px solid rgba(255, 255, 255, .18);

    text-decoration: none;

    transition: .4s ease;
}

.search-btn:hover {

    background: var(--white);
    color: var(--primary);

    transform:
        translateY(-4px);
}

/* PRIMARY */

.btn-primary {

    background:
        linear-gradient(135deg,
            var(--sky),
            var(--secondary));

    color: var(--white);

    box-shadow:
        0 10px 35px rgba(79, 195, 247, .25);
}

.btn-primary:hover {

    transform:
        translateY(-6px) scale(1.04);

    box-shadow:
        0 20px 40px rgba(159, 5, 58, .35);
}

/* OUTLINE */

.btn-outline {
    background: var(--secondary) !important;
    color: #fff !important;
    transition: all 300ms ease-in;
}

.btn-outline:hover {

    background: var(--white) !important;
    color: var(--secondary) !important;
    transform: translateY(-5px);
}

/* CONTACT */

.btn-outline-white {

    border:
        1px solid rgba(255, 255, 255, .25);

    color: var(--white);
}

.btn-outline-white:hover {

    background: var(--white);

    color: var(--primary);

    transform:
        translateY(-5px);
}

/* WHITE */

.btn-white {

    background: var(--white);

    color: var(--primary);
}

.btn-white:hover {

    transform:
        translateY(-5px) scale(1.03);

    background:
        linear-gradient(135deg,
            var(--sky),
            var(--secondary));

    color: var(--white);
}

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

.hero {

    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #020617 0%,
            var(--primary) 45%,
            #030816 100%);
}

.hero-content {

    position: relative;
    z-index: 10;

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

    gap: 60px;

    min-height: 100vh;

    padding-top: 120px;
}

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

.hero-left {

    flex: 1;
}

.hero-badge {

    display: inline-block;

    padding: 12px 22px;

    border-radius: 50px;

    background:
        rgba(79, 195, 247, .12);

    border:
        1px solid rgba(79, 195, 247, .22);

    color: var(--sky);

    margin-bottom: 28px;
}


.hero-left h1 {
    font-size: 88px;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 300;
}
.hero-left h1 span {
    background: linear-gradient(135deg, var(--sky), #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.hero-left p {
    max-width: 720px;
    font-size: 18px;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 45px;
}

.hero-buttons {

    display: flex;
    gap: 20px;
}

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

.hero-right {

    flex: 1;

    display: flex;
    justify-content: center;
}

.dashboard-card {

    width: 100%;
    max-width: 520px;

    padding: 18px;

    border-radius: 40px;

    background:
        rgba(255, 255, 255, .05);

    border:
        1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(20px);

    animation:
        floatCard 6s infinite ease-in-out;
}

.dashboard-card img {

    width: 100%;

    display: block;

    border-radius: 28px;
}

@keyframes floatCard {

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

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

/* ====================================
        ANIMATIONS
==================================== */

.fade-left {

    animation:
        fadeLeft 1.4s ease forwards;
}

.fade-right {

    animation:
        fadeRight 1.4s ease forwards;
}

@keyframes fadeLeft {

    from {

        opacity: 0;

        transform:
            translateX(-120px);
    }

    to {

        opacity: 1;

        transform:
            translateX(0px);
    }
}

@keyframes fadeRight {

    from {

        opacity: 0;

        transform:
            translateX(120px);
    }

    to {

        opacity: 1;

        transform:
            translateX(0px);
    }
}

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

.hero-bg {

    position: absolute;
    inset: 0;

    overflow: hidden;
}

.glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    opacity: .55;
}

.glow1 {
    width: 320px;
    height: 320px;
    background: #2563ff;
    top: -100px;
    left: -100px;

    animation:
        glowMove1 10s infinite alternate ease-in-out;
}

.glow2 {

    width: 260px;
    height: 260px;

    background: var(--secondary);

    bottom: -80px;
    right: -80px;

    animation:
        glowMove2 14s infinite alternate ease-in-out;
}

.glow3 {

    width: 180px;
    height: 180px;

    background: var(--sky);

    top: 45%;
    left: 45%;

    animation:
        glowMove3 8s infinite alternate ease-in-out;
}

@keyframes glowMove1 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(120px, -50px);
    }
}

@keyframes glowMove2 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-100px, 60px);
    }
}

@keyframes glowMove3 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-50px);
    }
}

/* ====================================
        MEDICAL ICONS
==================================== */

.dna,
.capsule,
.tablet,
.syringe,
.cross {
    position: absolute;
}

/* DNA */

.dna {

    width: 90px;
    height: 180px;

    border:
        2px solid rgba(79, 195, 247, .2);

    border-radius: 50%;

    animation:
        dnaRotate 12s linear infinite;
}

.dna::before,
.dna::after {

    content: '';

    position: absolute;

    width: 2px;
    height: 100%;

    background:
        rgba(79, 195, 247, .2);
}

.dna::before {
    left: 25%;
}

.dna::after {
    right: 25%;
}
.dna1 {
    top: 12%;
    right: 50%;
    opacity: 0.4;
}
.dna2 {
    bottom: 26%;
    left: 2%;
    opacity: 0.2;
}

@keyframes dnaRotate {

    from {
        transform: rotate(0deg);
    }

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

/* CAPSULE */

.capsule {

    width: 120px;
    height: 40px;

    border-radius: 50px;

    background:
        linear-gradient(90deg,
            var(--sky) 50%,
            #ffffff 50%);

    animation:
        floatCapsule 10s infinite ease-in-out;
}

.capsule::before {

    content: '';

    position: absolute;

    width: 2px;
    height: 100%;

    left: 50%;

    background:
        rgba(255, 255, 255, .5);
}

.capsule1 {
    top: 16%;
    left: 4%;
    opacity: 0.2;
    rotate: -45deg;
}

.capsule2 {
    top: 65%;
    right: 18%;
}
.capsule3 {
    top: 62%;
    right: 50%;
    opacity: 0.1;
    rotate: 5deg;
}

@keyframes floatCapsule {

    0%,
    100% {

        transform:
            translateY(0px) rotate(0deg);
    }

    50% {

        transform:
            translateY(-25px) rotate(8deg);
    }
}

/* TABLET */

.tablet {

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            #fff 0%,
            var(--sky) 100%);

    animation:
        tabletFloat 8s infinite ease-in-out;
}

.tablet::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    left: 50%;
    background:
        rgba(255, 255, 255, .5);
}
.tablet1 {
    bottom: 30%;
    right: 7%;
    opacity: 0.1;
}
.tablet2 {
    top: 49%;
    left: 31%;
    opacity: 0.2;
}
.tablet3 {
    top: 13%;
    right: 28%;
    opacity: 0.1;
}

@keyframes tabletFloat {

    0%,
    100% {

        transform:
            translateY(0px) scale(1);
    }

    50% {

        transform:
            translateY(-20px) scale(1.1);
    }
}

/* SYRINGE */

.syringe {

    width: 160px;
    height: 18px;

    border-radius: 10px;

    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, .2),
            var(--sky),
            rgba(255, 255, 255, .2));

    animation:
        syringeMove 12s infinite ease-in-out;
}

.syringe::before {

    content: '';

    position: absolute;

    width: 30px;
    height: 28px;

    right: -15px;
    top: -7px;

    background: #fff;

    border-radius: 6px;
}

.syringe::after {

    content: '';

    position: absolute;

    width: 50px;
    height: 2px;

    left: -45px;
    top: 7px;

    background: #fff;
}
.syringe1 {
    bottom: 3%;
    right: 28%;
    transform: rotate(-20deg);
    opacity: 0.1;
}


@keyframes syringeMove {

    0%,
    100% {

        transform:
            translateY(0px) rotate(-20deg);
    }

    50% {

        transform:
            translateY(-35px) rotate(-5deg);
    }
}

/* CROSS */

.cross {

    width: 90px;
    height: 90px;

    border-radius: 24px;

    background:
        rgba(79, 195, 247, .08);

    animation:
        crossRotate 15s linear infinite;
}

.cross::before,
.cross::after {

    content: '';

    position: absolute;

    background: var(--sky);
}

.cross::before {

    width: 18px;
    height: 60px;

    left: 36px;
    top: 15px;
}

.cross::after {

    width: 60px;
    height: 18px;

    left: 15px;
    top: 36px;
}
.cross1 {
    top: 14%;
    right: 8%;
    opacity: 0.1;
}
.cross2 {
    bottom: 2%;
    left: 36%;
    opacity: 0.2;
}

@keyframes crossRotate {

    from {
        transform: rotate(0deg);
    }

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

/* ====================================
        PARTICLES
==================================== */

.particles span {

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--sky);

    animation:
        particleMove linear infinite;
}

.particles span:nth-child(1) {
    left: 10%;
    animation-duration: 12s;
}

.particles span:nth-child(2) {
    left: 20%;
    animation-duration: 16s;
}

.particles span:nth-child(3) {
    left: 30%;
    animation-duration: 10s;
}

.particles span:nth-child(4) {
    left: 40%;
    animation-duration: 20s;
}

.particles span:nth-child(5) {
    left: 50%;
    animation-duration: 18s;
}

.particles span:nth-child(6) {
    left: 60%;
    animation-duration: 13s;
}

.particles span:nth-child(7) {
    left: 75%;
    animation-duration: 17s;
}

.particles span:nth-child(8) {
    left: 90%;
    animation-duration: 15s;
}

@keyframes particleMove {

    0% {

        transform:
            translateY(100vh) scale(0);

        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {

        transform:
            translateY(-100px) translateX(120px) scale(2);

        opacity: 0;
    }
}

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

.menu-toggle {

    display: none;
}







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

.main-footer {
    background: #eff0f9;
    padding: 32px 0 20px;
    position: relative;
    overflow: hidden;
}

/* TOP */

.footer-top {

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

    gap: 30px;

    padding-bottom: 50px;

    border-bottom:
        1px solid rgba(2, 11, 83, .08);
}

/* TITLE */

.footer-title h2 {
    font-size: 32px;
    color: #020B53;
    margin: 0;
}

/* RIGHT */

.footer-right {

    display: flex;
    align-items: center;

    gap: 30px;
}

/* BUTTON */

.footer-btn {

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

    padding: 15px 34px;

    border:
        2px solid #9F053A;

    color: #9F053A;

    border-radius: 60px;

    text-decoration: none;

    font-weight: 600;

    transition: .4s ease;

    cursor: pointer;
}

.footer-btn:hover {

    background:
        linear-gradient(135deg,
            #020B53,
            #9F053A);

    color: #ffffff;

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px rgba(159, 5, 58, .25);
}

/* SOCIAL */

.social-icons {

    display: flex;
    align-items: center;
    gap: 18px;
}

.social-icons a {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    font-size: 18px;
    background:linear-gradient(135deg,#020B53, #9F053A);
    transition: .4s ease;
    cursor: pointer;
}

.social-icons a:hover {
     transform: translateY(-5px) rotate(6deg);
}

/* MIDDLE */

.footer-middle {

    text-align: center;

    padding: 40px 0 30px;
}

.footer-middle p {

    color: #5f6782;

    font-size: 17px;

    margin-bottom: 14px;
}

.footer-middle a {

    color: #020B53;

    font-weight: 600;

    text-decoration: none;

    position: relative;

    transition: .4s ease;
}

.footer-middle a::after {

    content: '';

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 100%;
    height: 2px;

    background: #9F053A;

    transform: scaleX(0);

    transform-origin: left;

    transition: .4s ease;
}

.footer-middle a:hover {

    color: #9F053A;
}

.footer-middle a:hover::after {

    transform: scaleX(1);
}

/* LINKS */

.footer-links {

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

    flex-wrap: wrap;

    gap: 30px;

    padding-bottom: 35px;
}

.footer-links a {

    text-decoration: none;

    color: #020B53;

    font-weight: 500;

    position: relative;

    transition: .4s ease;
}

.footer-links a::after {

    content: '';

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0;
    height: 2px;

    background: #9F053A;

    transition: .4s ease;
}

.footer-links a:hover {

    color: #9F053A;
}

.footer-links a:hover::after {

    width: 100%;
}

/* BOTTOM */

.footer-bottom {

    text-align: center;

    padding-top: 30px;

    border-top:
        1px solid rgba(2, 11, 83, .08);
}

.footer-bottom p {

    margin: 0;

    color: #5f6782;

    font-size: 15px;
}

/* footer */

/* cards */
/* =========================================
        THERAPY SECTION
========================================= */
.therapy-section {
    padding: 20px 0 100px;
    background: #f5f7fb;
}

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

.therapy-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 0;
}

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

.therapy-card {

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border:
        1px solid #e4e7f0;

    text-decoration: none;

    overflow: hidden;

    transition: .5s ease;

    min-height: 100%;
}

/* IMAGE */

.therapy-image {

    width: 100%;

    height: 220px;

    overflow: hidden;
}

.therapy-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;
    filter: brightness(0.5)
}


/* CONTENT */
.therapy-content {
    padding: 18px 28px;
    flex: 1;
    text-align: center;
}
.therapy-content h3 {
    font-size: 26px;
    text-transform: uppercase;
    color: #020B53;
    transition: .4s ease;
}
.therapy-content p {
    font-size: 15px;
    color: #000;
}

/* LEARN MORE */
.therapy-content span {
    display: inline-block;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 16px;
    transition: .4s ease;
    background: var(--secondary);
    padding: 6px 14px;
    border-radius: 18px;
}
.therapy-content span:hover{
    background: var(--primary);
}
/* =========================================
        HOVER
========================================= */

/* .therapy-card:hover {
    transform:
        translateY(-10px);

    z-index: 2;

    box-shadow:
        0 25px 60px rgba(2, 11, 83, .14);
} */
.therapy-image{
    position: relative;
}

/* .therapy-image::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: var(--primary);
    z-index: 1;
    opacity: 0.4;
} */
.therapy-card:hover .therapy-image{
    position: relative;
    overflow: hidden;
    transition: all 1200ms ease;
}
.therapy-card:hover .therapy-image img {
    transform: scale(1.5);
    filter:brightness(0.9);
}

.therapy-card:hover .therapy-content h3 {

    color: #9F053A;
}

.therapy-card:hover span {

    transform: translateX(8px);
}

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

.active-card {

    background:
        linear-gradient(135deg,
            #020B53,
            #9F053A);
}

.active-card .therapy-content h3,
.active-card .therapy-content p,
.active-card .therapy-content span {

    color: #ffffff;
}

/* cards */


/* two sections */
/* =========================================
        MAIN SECTION
========================================= */

.split-ai-section {

    display: flex;

    flex-wrap: wrap;

    width: 100%;

    overflow: hidden;
}

/* =========================================
        SPLIT BOX
========================================= */

.split-box {

    position: relative;

    width: 50%;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 90px 60px;

    overflow: hidden;
}

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

.left-box {

    background: #000814;
}

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

.right-box {

    background:
        linear-gradient(135deg,
            #020B53,
            #26115f,
            #9F053A);
}

/* =========================================
        ANIMATION RING
========================================= */

.left-animation-circle {

    position: absolute;

    width: 480px;
    height: 480px;

    border-radius: 50%;

    border:
        2px solid rgba(0, 217, 255, .6);

    box-shadow:
        0 0 60px rgba(0, 217, 255, .4),
        inset 0 0 60px rgba(0, 217, 255, .2);

    animation:
        rotateCircle 25s linear infinite,
        pulseCircle 8s ease-in-out infinite;
}

/* =========================================
        NETWORK DOTS
========================================= */

.network-animation span {

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 20px rgba(255, 255, 255, .9);

    animation:
        floatDots 6s infinite ease-in-out;
}
.network-animation span:nth-child(1) {
    top: 8%;
    left: 20%;
}
.network-animation span:nth-child(2) {
    top: 19%;
    right: 20%;
}
.network-animation span:nth-child(3) {
    top: 46%;
    left: 42%;
}

.network-animation span:nth-child(4) {

    bottom: 20%;
    left: 25%;
}
.network-animation span:nth-child(5) {
    bottom: 7%;
    right: 20%;
}

.network-animation span:nth-child(6) {

    top: 70%;
    right: 45%;
}

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

.content-box {

    position: relative;

    z-index: 5;

    max-width: 560px;
}

.section-tag {

    display: inline-block;

    padding: 10px 18px;

    border-radius: 30px;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid rgba(255, 255, 255, .15);

    color: #7fd9ff;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 25px;
}

.content-box h2 {
    color: #ffffff;
    font-size: 62px;
    margin-bottom: 25px;
    font-weight: 400;
}
.content-box h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 25px;
}
.content-box p {
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    margin-bottom: 35px;
}

/* =========================================
        FEATURE LIST
========================================= */

.feature-list {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-bottom: 40px;
}

.feature-item {

    display: flex;

    align-items: center;

    gap: 14px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 500;
}

.feature-item i {

    width: 45px;
    height: 45px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .1);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #7fd9ff;
}

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

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;

    margin-bottom: 40px;
}

.stat-box {

    padding: 25px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid rgba(255, 255, 255, .12);

    backdrop-filter: blur(12px);

    transition: .4s ease;
}

.stat-box:hover {

    transform:
        translateY(-8px);

    background:
        rgba(255, 255, 255, .12);
}

.stat-box h4 {

    color: #ffffff;

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 10px;
}

.stat-box span {

    color: rgba(255, 255, 255, .75);

    font-size: 15px;
}

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

.button-group {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;
}

.main-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 34px;

    border-radius: 50px;

    background: #9F053A;

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    transition: .4s ease;
}

.main-btn:hover {

    background: #ffffff;

    color: #020B53;

    transform:
        translateY(-5px);
}

.outline-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 34px;

    border-radius: 50px;

    border:
        2px solid #ffffff;

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    transition: .4s ease;
}

.outline-btn:hover {

    background: #ffffff;

    color: #020B53;

    transform:
        translateY(-5px);
}

/* =========================================
        ANIMATIONS
========================================= */

@keyframes rotateCircle {

    from {

        transform: rotate(0deg);
    }

    to {

        transform: rotate(360deg);
    }
}

@keyframes pulseCircle {

    0% {

        transform: scale(1);
    }

    50% {

        transform: scale(1.05);
    }

    100% {

        transform: scale(1);
    }
}

@keyframes floatDots {

    0% {

        transform:
            translateY(0px) scale(1);

        opacity: .4;
    }

    50% {

        transform:
            translateY(-20px) scale(1.5);

        opacity: 1;
    }

    100% {

        transform:
            translateY(0px) scale(1);

        opacity: .4;
    }
}

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


/* two sections */
/* 3 cards sections */


/* 3 cards sections*/

/* heading  */

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

/* .section-heading {

    text-align: center;

    max-width: 900px;

    margin: 0 auto 70px auto;

    padding: 0 15px;
} */

.section-heading {
    /* text-align: center; */
    /* max-width: 900px; */
    /* margin: 0 auto 70px auto; */
    /* padding: 0 15px; */

    background-color: #fff;
}

/* =========================================
                MAIN TITLE
========================================= */
.main-title {
    font-size: 35px;
    font-weight: 500;
    line-height: 1.2;
    color: #020B53;
    margin-bottom: 0px;
    text-align: center;
    margin-top: 60px;
    text-transform: uppercase;
}

/* =========================================
                 SUB TITLE
========================================= */
.sub-title {
    display: block;
    font-size: 16px;
    color: #6b7280;
    max-width: 750px;
    margin: 0 auto 16px;
    text-align: center;
}

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






.pt-0 {
    padding-top: 0 !important;
}

.mt-20 {
    margin-top: 20px;
}

/* heading */

/* youtube */
/* =========================================
        CLIENT VIDEO SECTION
========================================= */

.client-video-section {

    background: #020B53;

    padding: 90px 0;

    position: relative;

    overflow: hidden;
}

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

.video-heading {

    margin-bottom: 60px;
}
.video-heading h2 {
    color: #ffffff;
    font-size: 44px;
    font-weight: 500;
}

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

.video-card {

    display: block;

    text-decoration: none;

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

    border-radius: 24px;

    overflow: hidden;

    transition: 0.4s ease;

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

    backdrop-filter: blur(10px);

    height: 100%;
}

.video-card:hover {

    transform: translateY(-10px);

    border-color: #9F053A;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

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

.video-image {

    position: relative;

    overflow: hidden;
}

.video-image img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    transition: 0.5s ease;
}

.video-card:hover .video-image img {

    transform: scale(1.08);
}

/* =========================================
        PLAY BUTTON
========================================= */

.play-btn {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 70px;

    height: 70px;

    background: rgba(159, 5, 58, 0.9);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 24px;

    transition: 0.4s ease;
}

.video-card:hover .play-btn {

    background: #ffffff;

    color: #020B53;

    transform: translate(-50%, -50%) scale(1.1);
}

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

.video-content {

    padding: 30px;
}

.video-content h3 {
    color: #ffffff;
    font-size: 25px;
}
.video-content p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    margin: 0;
}

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



/* youtube */


/* team */

/* .our-team-section {
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
}
.our-team-section:before {
    position: absolute;
    top: -0;
    left: 0;
    content: " ";
    background: url(img/service-section-bottom.png);
    background-size: 100% 100px;
    width: 100%;
    height: 100px;
    float: left;
    z-index: 99;
}
.our-team {
    padding: 30px 0 40px;
    background: #f9f9f9;
    text-align: center;
    overflow: hidden;
    position: relative;
    border-bottom: 5px solid #00325a;
}
.our-team:hover{
    border-bottom: 5px solid #2f2f2f;
}

.our-team .pic{
    display: inline-block;
    width: 130px;
    height: 130px;
    margin-bottom: 50px;
    z-index: 1;
    position: relative;
}
.our-team .pic:before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #00325a;
    position: absolute;
    bottom: 135%;
    right: 0;
    left: 0;
    opacity: 1;
    transform: scale(3);
    transition: all 0.3s linear 0s;
}
.our-team:hover .pic:before{
 height: 100%;
    background: #2f2f2f; 
 }
.our-team .pic:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff00;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all 0.3s linear 0s;
}
.our-team:hover .pic:after{
    background: #7ab92d;
}
.our-team .pic img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    transform: scale(1);
    transition: all 0.9s ease 0s;
    box-shadow: 0 0 0 14px #f7f5ec;
    transform: scale(0.7);
    position: relative;
    z-index: 2;
}
.our-team:hover .pic img{
    box-shadow: 0 0 0 14px #f7f5ec;
    transform: scale(0.7);
}
.our-team .team-content{ margin-bottom: 30px; }
.our-team .title{
    font-size: 22px;
    font-weight: 700;
    color: #4e5052;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin-bottom: 5px;
}
.our-team .post{
    display: block;
    font-size: 15px;
    color: #4e5052;
    text-transform:capitalize;
}
.our-team .social{
    width: 100%;
    padding: 0;
    margin: 0;
    background: #2f2f2f;
    position: absolute;
    bottom: -100px;
    left: 0;
    transition: all 0.5s ease 0s;
}
.our-team:hover .social{ bottom: 0; }
.our-team .social li{ display: inline-block; }
.our-team .social li a{
    display: block;
    padding: 10px;
    font-size: 17px;
    color: #fff;
    transition: all 0.3s ease 0s;
}
.our-team .social li a:hover{
    color: #2f2f2f;
    background: #f7f5ec;
}
@media only screen and (max-width: 990px){
    .our-team{ margin-bottom: 30px; }
} */

/* =========================================
        TEAM SECTION
========================================= */

.novira-team-section {

    padding: 100px 0;

    background: #f5f7fb;
}

/* =========================================
        HEADING
========================================= */
.team-heading {
    max-width: 850px;
    margin: 0 auto 40px;
}

.team-subtitle {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #9F053A;
}
.team-title {
    font-size: 40px;
    font-weight: 600;
    color: #020B53;
    margin-bottom: 0px;
}

.team-description {

    font-size: 18px;

    line-height: 1.9;

    color: #6b7280;
}

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

.team-card {

    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    transition: 0.4s ease;

    height: 100%;

    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.team-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 50px rgba(2,11,83,0.12);
}

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

.team-image {

    overflow: hidden;
}

.team-image img {

    width: 100%;

    height: 320px;

    object-fit: cover;

    transition: 0.5s ease;
}

.team-card:hover .team-image img {

    transform: scale(1.08);
}

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

.team-content {

    padding: 28px;

    text-align: center;
}

.team-content h3 {
    font-size: 30px;
    color: #020B53;
    margin-bottom: 5px;
}

.team-content span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #9F053A;
    margin-bottom: 8px;
}

.team-content p {

    font-size: 15px;

    line-height: 1.8;

    color: #6b7280;

    margin: 0;
}


/* team */


/* robo */

/* ===================================================
    ROBOT BUTTON
=================================================== */

.robot-chat-btn{

    position:fixed;

    right:25px;
    bottom:25px;

    width:75px;
    height:75px;

    border-radius:50%;

    border:none;

    z-index:9999;

    background:
    linear-gradient(
    135deg,
    #020B53,
    #9F053A
    );

    box-shadow:
    0 10px 35px rgba(2,11,83,.4);

    color:white;

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

    cursor:pointer;

    transition:.4s ease;

    animation:pulse 2s infinite;
}

.robot-chat-btn i{

    font-size:34px;

    line-height:1;
}

.robot-chat-btn:hover{

    transform:
    scale(1.08)
    rotate(5deg);
}

/* ===================================================
    PULSE
=================================================== */

@keyframes pulse{

    0%{

        box-shadow:
        0 0 0 0 rgba(79,195,247,.5);
    }

    70%{

        box-shadow:
        0 0 0 20px rgba(79,195,247,0);
    }

    100%{

        box-shadow:
        0 0 0 0 rgba(79,195,247,0);
    }
}

/* ===================================================
    OVERLAY
=================================================== */

.popup-overlay{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.45);

    z-index:9997;

    opacity:0;

    visibility:hidden;

    transition:.4s ease;
}

.popup-overlay.active{

    opacity:1;

    visibility:visible;
}

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

.appointment-popup{

    position:fixed;

    right:25px;
    bottom:115px;

    width:380px;

    border-radius:28px;

    overflow:hidden;

    z-index:9998;

    background:white;

    box-shadow:
    0 20px 60px rgba(0,0,0,.18);

    transform:
    translateY(40px)
    scale(.9);

    opacity:0;

    visibility:hidden;

    transition:.4s ease;
}

.appointment-popup.active{

    transform:
    translateY(0px)
    scale(1);

    opacity:1;

    visibility:visible;
}

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

.popup-header{

    position:relative;

    padding:25px;

    background:
    linear-gradient(
    135deg,
    #020B53,
    #1239a1
    );

    color:white;
}

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

.robot-icon{

    width:70px;
    height:70px;

    border-radius:50%;

    background:
    rgba(255,255,255,.15);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:15px;

    backdrop-filter:blur(10px);
}

.robot-icon i{

    font-size:34px;

    color:white;

    line-height:1;
}

/* ===================================================
    HEADER TEXT
=================================================== */
.app-heading h1{
    font-size: 24px;
    text-transform: uppercase;
    text-align: justify;
}
.popup-header h4{

    margin:0 0 5px;

    font-size:24px;

    font-weight:700;
}

.popup-header p{

    margin:0;

    opacity:.85;

    font-size:14px;
}

/* ===================================================
    CLOSE BUTTON
=================================================== */

.close-popup{

    position:absolute;

    top:15px;
    right:15px;

    width:40px;
    height:40px;

    border:none;

    border-radius:50%;

    background:
    rgba(255,255,255,.15);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s ease;
}

.close-popup:hover{

    background:
    rgba(255,255,255,.25);
}

/* ===================================================
    BODY
=================================================== */

.popup-body{

    padding:25px;
}

/* ===================================================
    FORM
=================================================== */

.form-control,
.form-select{

    border-radius:14px;

    min-height:52px;

    border:
    1px solid #dbe2ff;

    box-shadow:none;

    padding:12px 16px;
}

.form-control:focus,
.form-select:focus{

    border-color:#4FC3F7;

    box-shadow:
    0 0 0 .15rem rgba(79,195,247,.2);
}

textarea.form-control{

    min-height:110px;

    resize:none;
}

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

.send-btn{

    width:100%;

    border:none;

    padding:15px;

    border-radius:16px;

    color:white;

    font-weight:600;

    background:
    linear-gradient(
    135deg,
    #020B53,
    #9F053A
    );

    transition:.4s ease;
}

.send-btn:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 10px 30px rgba(79,195,247,.3);
}

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


/* robo */


/* Training and Certificate */
/* =========================================
   CERTIFICATE SECTION
========================================= */

.certificate-section{

    background:#f7f9fc;
}

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

.certificate-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:2px solid rgba(2,11,83,.08);

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.4s ease;
}

.certificate-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);
}

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

.certificate-header{

    padding:28px 20px;

    text-align:center;

    color:#fff;
}

.primary-bg{

    background:linear-gradient(
    135deg,
    #020B53,
    #1237b1
    );
}

.secondary-bg{

    background:linear-gradient(
    135deg,
    #9F053A,
    #d11462
    );
}

.certificate-header h2{

    font-size:30px;

    font-weight:800;

    margin-bottom:10px;
}

.certificate-header span{

    font-size:15px;

    font-weight:500;

    opacity:.9;

    letter-spacing:.5px;
}

/* =========================================
   BODY
========================================= */

.certificate-body{

    padding:35px 28px;
}

.icon-box{

    width:90px;
    height:90px;

    margin:0 auto 25px;

    border-radius:20px;

    background:rgba(2,11,83,.08);

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

    font-size:42px;

    color:#020B53;
}

.right-card .icon-box{

    background:rgba(159,5,58,.08);

    color:#9F053A;
}

/* =========================================
   LIST
========================================= */

.certificate-list{

    padding-left:20px;

    margin-bottom:25px;
}

.certificate-list li{

    margin-bottom:14px;

    color:#444;

    font-size:16px;

    line-height:1.7;
}

/* =========================================
   TAGS
========================================= */

.training-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:20px;
}

.training-tags span{

    background:#020B53;

    color:#fff;

    padding:10px 16px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    transition:.3s ease;
}

.training-tags span:hover{

    background:#9F053A;

    transform:translateY(-3px);
}

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

.internship-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:25px;
}

.internship-item{

    background:#fff6fa;

    border:1px solid rgba(159,5,58,.15);

    border-radius:18px;

    padding:20px;

    text-align:center;

    transition:.3s ease;
}

.internship-item:hover{

    background:#9F053A;

    color:#fff;

    transform:translateY(-4px);
}

.internship-item i{

    font-size:28px;

    margin-bottom:10px;

    display:block;
}

.internship-item span{

    font-size:15px;

    font-weight:600;
}

/* =========================================
   NOTE
========================================= */

.certificate-note{

    margin-top:28px;

    padding:18px;

    border-radius:16px;

    background:#f2f5ff;

    color:#020B53;

    text-align:center;

    font-weight:600;

    line-height:1.6;
}

.right-card .certificate-note{

    background:#fff0f5;

    color:#9F053A;
}

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



/* Training and Certificate */

/* header issue fixing */
.nav-menu ul li a {
    color: #020B53 !important;
}

.nav-menu ul li a:hover, .nav-menu ul li a.active {
   
    color: #000420 !important;
}
/* header issue fixing */