/*
Theme Name: Bison Systems
Theme URI: https://example.com/bison-systems
Author: Bison Systems
Description: WordPress theme using the original Bison Systems static CSS files.
Version: 1.0.0
Text Domain: bison-systems
*/

@import url("assets/css/style.css");
@import url("assets/css/responsive.css");
@import url("assets/css/home.css");
@import url("assets/css/tech-pages.css");

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef3f8;

}

::-webkit-scrollbar-thumb{

    background:var(--gradient);

    border-radius:20px;

}

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

::selection{

    background:var(--primary);

    color:#fff;

}

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

.btn{

    border-radius:50px;

    padding:15px 35px;

    font-weight:600;

    transition:.4s;

}

.btn-primary{

    background:var(--gradient);

    border:none;

    box-shadow:var(--shadow-md);

}

.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(11,94,215,.35);

}

.btn-outline-light{

    border:2px solid #fff;

}

.btn-outline-light:hover{

    color:#111;

    background:#fff;

}

.section-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(11,94,215,.1);

    color:var(--primary);

    font-weight:600;

    margin-bottom:20px;

}

.section-heading{

    font-size:48px;

    font-weight:800;

    margin-bottom:20px;

}

.section-description{

    color:#6b7280;

    max-width:720px;

    margin:auto;

}

/*==================================================
PRELOADER
===================================================*/

.loader{

    position:fixed;

    inset:0;

    background:#07111f;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader h3{

    color:#fff;

    letter-spacing:4px;

    margin-top:30px;

    font-size:20px;

    font-weight:700;

}

.loader-ring{

    width:90px;

    height:90px;

    border-radius:50%;

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

    border-top:6px solid var(--accent);

    animation:loaderSpin 1s linear infinite;

}

@keyframes loaderSpin{

    100%{

        transform:rotate(360deg);

    }

}

/*==================================================
PAGE BANNER
==================================================*/

.page-banner{

    position:relative;

    padding:170px 0 120px;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,#276dff 0%,transparent 45%),
    radial-gradient(circle at bottom right,#5b4dff 0%,transparent 40%),
    linear-gradient(135deg,#07111f,#0B5ED7,#08192f);

}

.page-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:60px 60px;

}

.page-banner::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:rgba(0,194,255,.18);

    filter:blur(120px);

    left:-180px;

    top:-180px;

}

.page-banner .container{

    position:relative;

    z-index:2;

}

.page-banner h1{

    color:#fff;

    font-size:68px;

    font-weight:800;

}

.page-banner p{

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

    font-size:20px;

}

/*==================================================
SCROLL PROGRESS BAR
===================================================*/

#progressBar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:var(--gradient);

    z-index:999999;

    transition:.15s;

}

/*==================================================
NAVBAR
===================================================*/

.custom-navbar{

    padding:18px 0;

    transition:.4s;

    background:rgba(6,15,35,.18);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

}

.custom-navbar.scrolled{

    padding:10px 0;

    background:rgba(7,16,34,.96);

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

}

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

.logo-img{

    width:100px;

    height:70px;

    object-fit:contain;

}

.brand-text h4{

    color:#fff;

    margin:0;

    font-size:22px;

    font-weight:700;

}

.brand-text span{

    color:#d4d4d4;

    font-size:12px;

    letter-spacing:1px;

}

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

.navbar-nav{

    gap:10px;

}

.nav-link{

    color:#fff;

    font-weight:500;

    padding:12px 18px !important;

    position:relative;

    transition:.35s;

}

.nav-link:hover{

    color:var(--accent);

}

.nav-link.active{

    color:var(--accent);

}

/* Animated Underline */

.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:6px;

    width:0;

    height:2px;

    background:var(--accent);

    transform:translateX(-50%);

    transition:.35s;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:70%;

}

/*==================================================
NAV CTA BUTTON
===================================================*/

.nav-btn{

    padding:13px 28px;

    border-radius:50px;

    font-weight:600;

    background:var(--gradient);

    border:none;

    box-shadow:0 12px 25px rgba(0,194,255,.25);

}

.nav-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(0,194,255,.40);

}

/*==================================================
NAVBAR TOGGLER
===================================================*/

.navbar-toggler{

    border:none;

    box-shadow:none !important;

}

.navbar-toggler i{

    color:#fff;

    font-size:28px;

}

/*==================================================
MEGA DROPDOWN
===================================================*/

.mega-dropdown{

    border:none;

    border-radius:20px;

    padding:15px;

    min-width:280px;

    background:#fff;

    box-shadow:0 30px 70px rgba(0,0,0,.15);

    animation:dropdownFade .35s ease;

}

.dropdown-item{

    padding:14px 18px;

    border-radius:12px;

    font-weight:500;

    transition:.3s;

}

.dropdown-item i{

    width:30px;

    color:var(--primary);

}

.dropdown-item:hover{

    background:#edf5ff;

    transform:translateX(8px);

    color:var(--primary);

}

/*==================================================
DROPDOWN ANIMATION
===================================================*/

@keyframes dropdownFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Desktop hover */

@media(min-width:992px){

.dropdown:hover .dropdown-menu{

    display:block;

    margin-top:0;

}

}

/*==================================================
PREMIUM HERO SECTION
===================================================*/

.hero-section{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,#0b5ed7 0%,#07111f 45%),
    linear-gradient(135deg,#08192f,#0f3057,#0b5ed7);

    color:#fff;

}

/*==================================================
ANIMATED GRADIENT
===================================================*/

.hero-gradient{

    position:absolute;

    inset:0;

    background:linear-gradient(
    120deg,
    rgba(0,194,255,.15),
    rgba(11,94,215,.05),
    rgba(255,255,255,.05));

    animation:gradientMove 10s ease infinite;

}

@keyframes gradientMove{

    0%{

        transform:translateX(-10%) translateY(0);

    }

    50%{

        transform:translateX(10%) translateY(-3%);

    }

    100%{

        transform:translateX(-10%) translateY(0);

    }

}

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

.grid-overlay{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:60px 60px;

    opacity:.45;

}

/*==================================================
FLOATING BLOBS
===================================================*/

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    opacity:.55;

    animation:blobFloat 10s ease-in-out infinite;

}

.blob1{

    width:350px;

    height:350px;

    background:#00c2ff;

    top:-80px;

    left:-120px;

}

.blob2{

    width:280px;

    height:280px;

    background:#2d7dff;

    right:-70px;

    top:20%;

    animation-delay:2s;

}

.blob3{

    width:320px;

    height:320px;

    background:#6e5bff;

    bottom:-120px;

    left:35%;

    animation-delay:4s;

}

@keyframes blobFloat{

    50%{

        transform:translateY(-35px) scale(1.08);

    }

}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

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

    backdrop-filter:blur(18px);

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

    font-weight:600;

    margin-bottom:30px;

}

.hero-badge i{

    color:#ffd43b;

}

.hero-title{

    font-size:64px;

    line-height:1.15;

    font-weight:800;

    color:#fff;

    margin-bottom:25px;

}

.gradient-text{

    background:linear-gradient(90deg,#00e5ff,#ffffff,#00c2ff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-description{

    font-size:18px;

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

    max-width:650px;

    margin-bottom:40px;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:60px;

}

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

.hero-stats{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

}

.stat-box{

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

    backdrop-filter:blur(18px);

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

    border-radius:18px;

    padding:20px 25px;

    min-width:150px;

}

.stat-box h2{

    color:#fff;

    font-size:38px;

    margin-bottom:6px;

}

.stat-box span{

    color:#d7d7d7;

    font-size:15px;

}

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

.hero-image-wrapper{

    position:relative;

    display:inline-block;

}

.hero-image{

    max-width:580px;

    animation:heroFloat 6s ease-in-out infinite;

    filter:drop-shadow(0 30px 70px rgba(0,0,0,.35));

}

@keyframes heroFloat{

    50%{

        transform:translateY(-18px);

    }

}

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

.floating-card{
    position: absolute;
    width: 300px;              /* Bigger card */
    min-height: 140px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 25px 28px;
    color: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,.20);
    animation: cardFloat 5s ease-in-out infinite;
}

.floating-card h6{
    color: #fff;
    margin: 12px 0 6px;
    font-size: 1.1rem;
}

.floating-card small{
    color: #d9d9d9;
    font-size: .95rem;
}

.floating-card i{
    color: #00e5ff;
    font-size: 36px;
}

/* Top Left */
.card-one{
    top: 0%;
    left: 60%;
}

/* Top Right */
.card-two{
    top: 0%;
    right: 50%;
    animation-delay: 1s;
}

/* Bottom Left */
.card-three{
    bottom: 500%;
    left: 60%;
    animation-delay: 2s;
}

/* Bottom Right */
.card-four{
    bottom: 500%;
    right: 50%;
    animation-delay: 3s;
}

@keyframes cardFloat{
    50%{
        transform: translateY(-15px);
    }
}

/*==================================================
SCROLL INDICATOR
===================================================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

}

.scroll-indicator span{

    display:block;

    width:30px;

    height:55px;

    border:2px solid rgba(255,255,255,.45);

    border-radius:30px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    left:50%;

    top:10px;

    width:7px;

    height:7px;

    background:#fff;

    border-radius:50%;

    transform:translateX(-50%);

    animation:scrollDown 1.8s infinite;

}

@keyframes scrollDown{

    0%{

        opacity:0;

        top:10px;

    }

    100%{

        opacity:1;

        top:30px;

    }

}

/*==================================================
TRUSTED SECTION
==================================================*/

.trusted-section{
    position:relative;
    padding:90px 0;
    overflow:hidden;
    background:
    linear-gradient(135deg,#f4f9ff,#eef7ff,#ffffff);
}

.trusted-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(0,194,255,.08);
    border-radius:50%;
    top:-180px;
    left:-180px;
    filter:blur(40px);
}

.trusted-section::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(11,94,215,.08);
    border-radius:50%;
    bottom:-180px;
    right:-180px;
    filter:blur(50px);
}

.trusted-title{

    text-align:center;

    color:#6b7280;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:40px;

}

.logo-slider{

    position:relative;

    overflow:hidden;

    white-space:nowrap;

}

.logo-track{

    display:flex;

    align-items:center;

    width:max-content;

    animation:logoScroll 28s linear infinite;

}

.logo-track img{

    width:150px;

    height:70px;

    object-fit:contain;

    margin:0 45px;

    filter:grayscale(100%);

    opacity:.65;

    transition:.4s;

}

.logo-track img:hover{

    filter:none;

    opacity:1;

    transform:scale(1.08);

}

@keyframes logoScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*==================================================
ABOUT SECTION
===================================================*/

.about-section{

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,
    rgba(11,94,215,.08),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(0,194,255,.08),
    transparent 30%),

    linear-gradient(
    180deg,
    #f8fbff,
    #eef6ff,
    #f8fbff);

}

.about-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(11,94,215,.05);

    top:-180px;

    right:-180px;

}

.about-image{

    position:relative;

}

.about-image img{

    border-radius:24px;

    box-shadow:0 35px 80px rgba(0,0,0,.15);

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.03);

}

/*==================================================
EXPERIENCE BADGE
===================================================*/

.experience-box{

    position:absolute;

    right:-20px;

    bottom:35px;

    background:#fff;

    border-radius:20px;

    padding:25px;

    min-width:190px;

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

    animation:experienceFloat 4s ease-in-out infinite;

}

.experience-box h2{

    color:var(--primary);

    font-size:46px;

    margin-bottom:5px;

}

.experience-box span{

    color:#6b7280;

    font-weight:500;

}

@keyframes experienceFloat{

    50%{

        transform:translateY(-12px);

    }

}

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

.about-content{

    padding-left:50px;

}

.about-content .section-heading{

    margin-bottom:25px;

}

.about-content p{

    color:#6b7280;

    margin-bottom:20px;

    font-size:17px;

}

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

.about-features{

    margin-top:35px;

}

.about-feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:28px;

}

.about-feature .icon{

    width:60px;

    height:60px;

    border-radius:18px;

    background:var(--gradient);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    flex-shrink:0;

    box-shadow:0 15px 35px rgba(11,94,215,.25);

}

.about-feature h5{

    margin-bottom:8px;

    font-size:20px;

}

.about-feature p{

    margin:0;

    color:#6b7280;

}

/*==================================================
ABOUT CTA
===================================================*/

.about-buttons{

    margin-top:45px;

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.about-buttons .btn{

    min-width:190px;

}

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

.about-decoration{

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

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

    top:-30px;

    left:-30px;

    filter:blur(15px);

}

/*==================================================
GLASS INFO CARD
===================================================*/

.about-glass{

    margin-top:35px;

    padding:28px;

    border-radius:24px;

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

    backdrop-filter:blur(20px);

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

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.about-glass h4{

    margin-bottom:15px;

}

.about-glass p{

    margin:0;

}

/*==================================================
PREMIUM SERVICES
===================================================*/

.services-section{
    position:relative;
    overflow:hidden;
    background:
    linear-gradient(180deg,#ffffff,#f7fbff,#eef6ff);
}

.services-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(0,194,255,.06);
    top:-180px;
    right:-180px;
    filter:blur(40px);
}

.services-section::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(11,94,215,.06);
    bottom:-180px;
    left:-180px;
    filter:blur(40px);
}

.services-section::before{

    content:"";

    position:absolute;

    top:-250px;

    right:-250px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:rgba(11,94,215,.05);

}

.services-section::after{

    content:"";

    position:absolute;

    bottom:-250px;

    left:-250px;

    width:500px;

    height:500px;

    border-radius:50%;

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

}

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

.service-card{

    position:relative;

    background:#fff;

    border-radius:26px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    transition:.5s;

    height:100%;

    z-index:1;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:26px;

    background:linear-gradient(135deg,#0B5ED7,#00C2FF,#5B6EFF);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.5s;

}

.service-card:hover::before{

    opacity:1;

}

.service-card:hover{

    transform:translateY(-18px);

    box-shadow:0 35px 80px rgba(0,0,0,.18);

}

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

.service-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.6s;

}

.service-card:hover img{

    transform:scale(1.12);

}

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

.service-content{

    padding:35px;

    position:relative;

}

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

.service-icon{

    width:80px;

    height:80px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient);

    color:#fff;

    font-size:32px;

    margin-top:-70px;

    margin-bottom:25px;

    position:relative;

    box-shadow:0 20px 45px rgba(11,94,215,.30);

    transition:.4s;

}

.service-card:hover .service-icon{

    transform:rotate(12deg) scale(1.08);

}

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

.service-content h4{

    font-size:26px;

    margin-bottom:18px;

    transition:.3s;

}

.service-card:hover h4{

    color:var(--primary);

}

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

.service-content p{

    color:#6b7280;

    margin-bottom:28px;

}

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

.service-list{

    list-style:none;

    padding:0;

    margin-bottom:30px;

}

.service-list li{

    margin-bottom:12px;

    color:#555;

    display:flex;

    align-items:center;

    gap:10px;

}

.service-list i{

    color:var(--primary-dark);

}

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

.service-btn{
    position: relative;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

.service-btn i{

    transition:.35s;

}

.service-card:hover .service-btn{

    color:var(--accent);

}

.service-card:hover .service-btn i{

    transform:translateX(8px);

}

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

.service-label{

    position:absolute;

    top:25px;

    left:25px;

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

    color:var(--primary);

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

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

}

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

.service-card .glow{

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(0,194,255,.18);

    filter:blur(70px);

    top:-80px;

    right:-80px;

    opacity:0;

    transition:.5s;

}

.service-card:hover .glow{

    opacity:1;

}

/*==================================================
HOVER SHINE EFFECT
===================================================*/

.service-card::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-120%;

    width:70%;

    height:250%;

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

    transform:rotate(25deg);

    transition:.8s;

}

.service-card:hover::after{

    left:150%;

}

/*==================================================
STATISTICS SECTION
==================================================*/

.stats-section{

    background:linear-gradient(135deg,#08192f);

    position:relative;

    overflow:hidden;

    color:#fff;

}

.stats-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("../images/pattern.png");

    opacity:.05;

}

.stats-card{

    position:relative;

    padding:40px 30px;

    border-radius:24px;

    text-align:center;

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

    backdrop-filter:blur(16px);

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

    transition:.45s;

    overflow:hidden;

}

.stats-card:hover{

    transform:translateY(-15px);

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

}

.stats-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

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

    border-radius:50%;

    right:-80px;

    top:-80px;

}

.stats-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    font-size:32px;

    color:#fff;

}

.stats-card h2{

    color:#fff;

    font-size:48px;

    font-weight:800;

    margin-bottom:10px;

}

.stats-card h5{

    color:#fff;

}

.stats-card p{

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

}

/*==================================================
INDUSTRIES
==================================================*/

.industries-section{

    background:

    radial-gradient(circle at top left,
    rgba(11,94,215,.08),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(0,194,255,.08),
    transparent 35%),

    linear-gradient(
    180deg,
    #f9fcff,
    #edf7ff,
    #f9fcff);

}

.industry-card{

    position:relative;

    overflow:hidden;

    border-radius:25px;

    height:350px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    transition:.45s;

}

.industry-card img{

    width:70%;

    height:70%;

    object-fit:cover;

    transition:.6s;

}

.industry-card:hover img{

    transform:scale(1.15);

}

.industry-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    background:linear-gradient(
    to top,
    rgba(5,15,35,.92),
    rgba(5,15,35,.15));

    transition:.45s;

}

.industry-card:hover{

    transform:translateY(-15px);

}

.industry-overlay h4{

    color:#fff;

    margin-bottom:12px;

    font-size:28px;

}

.industry-overlay p{

    color:#ddd;

    margin:0;

}

/*==================================================
CASE STUDIES
==================================================*/

.case-study-section{
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(180deg,#f8fbff,#ffffff);
}

.case-study-section::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background:rgba(0,194,255,.06);
    border-radius:50%;
    top:-250px;
    left:-250px;
    filter:blur(50px);
}

.case-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 20px 55px rgba(0,0,0,.10);

    transition:.45s;

}

.case-card img{

    height:420px;

    object-fit:cover;

    transition:.6s;

}

.case-card:hover img{

    transform:scale(1.12);

}

.case-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    background:linear-gradient(
    to top,
    rgba(8,25,47,.96),
    rgba(8,25,47,.20));

}

.case-overlay span{

    color:var(--accent);

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:10px;

}

.case-overlay h4{

    color:#fff;

    margin-bottom:15px;

}

.case-overlay p{

    color:#d6d6d6;

}

.case-overlay a{

    color:#fff;

    font-weight:600;

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:15px;

}

.case-overlay a i{

    transition:.3s;

}

.case-card:hover a i{

    transform:translateX(8px);

}

.case-card:hover{

    transform:translateY(-15px);

}

/*==================================================
COUNTER EFFECT
==================================================*/

.counter-number{

    background:linear-gradient(90deg,#00C2FF,#0B5ED7);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    font-weight:800;

}

/*==================================================
WHY CHOOSE US
==================================================*/

.why-section{

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(circle at left,
    rgba(0,194,255,.08),
    transparent 30%),

    radial-gradient(circle at right,
    rgba(11,94,215,.08),
    transparent 35%),

    linear-gradient(
    180deg,
    #f7fbff,
    #eef7ff,
    #f7fbff);

}

.why-section::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:rgba(11,94,215,.05);

    left:-250px;

    top:-250px;

}

.why-card{

    position:relative;

    background:#fff;

    border-radius:25px;

    padding:45px 35px;

    text-align:center;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    transition:.45s;

    height:100%;

}

.why-card:hover{

    transform:translateY(-15px);

    box-shadow:0 35px 70px rgba(0,0,0,.15);

}

.why-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient);

    color:#fff;

    font-size:34px;

    transition:.45s;

}

.why-card:hover .why-icon{

    transform:rotateY(180deg);

}

.why-card h4{

    margin-bottom:18px;

    font-size:24px;

}

.why-card p{

    color:#6b7280;

    margin:0;

}

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

.process-section{
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(135deg,#f7fbff,#ffffff,#eef6ff);
}

.process-section::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(11,94,215,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,94,215,.03) 1px,transparent 1px);

    background-size:60px 60px;
}

.process-line{

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:4px;

    background:linear-gradient(

        to bottom,

        #0B5ED7,

        #00C2FF

    );

    transform:translateX(-50%);

}

.process-item{

    position:relative;

    margin-bottom:70px;

}

.process-content{

    background:#084298;

    border-radius:22px;

    padding:35px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    transition:.4s;

}

.process-content:hover{

    transform:translateY(-10px);

}

.process-number{

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--gradient);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    font-weight:700;

    margin:auto;

    box-shadow:0 15px 35px rgba(11,94,215,.25);

}

.process-content h4{

    margin:25px 0 15px;

}

.process-content p{

    color:#6b7280;

}

/*==================================================
GLOBAL PRESENCE
==================================================*/

.global-section{

    position:relative;

    background:linear-gradient(

        135deg,

        #08192f,

        #0B5ED7

    );

    overflow:hidden;

    color:#fff;

}

.global-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("../images/world-map.png") center center no-repeat;

    background-size:contain;

    opacity:.08;

}

.global-title{

    color:#fff;

}

.global-description{

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

}

.office-card{

    position:relative;

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

    backdrop-filter:blur(18px);

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

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.45s;

    height:100%;

}

.office-card:hover{

    transform:translateY(-12px);

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

}

.office-card i{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    font-size:34px;

    color:#fff;

}

.office-card h4{

    color:#fff;

    margin-bottom:12px;

}

.office-card p{

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

    margin-bottom:0;

}

/*==================================================
FLOATING GLOW
==================================================*/

.glow-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.25;

}

.glow-one{

    width:260px;

    height:260px;

    background:#00C2FF;

    top:-80px;

    left:-80px;

}

.glow-two{

    width:300px;

    height:300px;

    background:#5B6EFF;

    bottom:-120px;

    right:-120px;

}

/*==================================================
TESTIMONIAL SECTION
==================================================*/

.testimonial-section{
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(180deg,#ffffff,#f7fbff);
}

.testimonial-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(11,94,215,.06);
    right:-180px;
    top:-180px;
    filter:blur(50px);
}

.testimonial-card{

    position:relative;

    background:#fff;

    border-radius:25px;

    padding:40px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    transition:.45s;

    height:100%;

    overflow:hidden;

}

.testimonial-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:var(--gradient);

}

.testimonial-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 70px rgba(0,0,0,.15);

}

.quote{

    font-size:55px;

    color:var(--primary);

    opacity:.15;

    margin-bottom:20px;

}

.testimonial-card p{

    color:#6b7280;

    font-style:italic;

    margin-bottom:30px;

}

.client-info{

    display:flex;

    align-items:center;

    gap:18px;

}

.client-info img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #edf5ff;

}

.client-info h5{

    margin-bottom:4px;

}

.client-info span{

    color:#777;

}

/*==================================================
AWARDS
==================================================*/

.awards-section{

    background:

    radial-gradient(circle at top right,
    rgba(11,94,215,.08),
    transparent 30%),

    linear-gradient(
    180deg,
    #f9fcff,
    #eef7ff,
    #f9fcff);

}

.award-card{

    text-align:center;

    background:#fff;

    padding:40px 25px;

    border-radius:24px;

    transition:.4s;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    height:100%;

}

.award-card:hover{

    transform:translateY(-12px);

}

.award-card i{

    font-size:52px;

    margin-bottom:25px;

    color:var(--primary);

}

.award-card h4{

    margin-bottom:0;

}

/*==================================================
PREMIUM CTA
==================================================*/

.premium-cta{

    position:relative;

    background:linear-gradient(135deg,#08192f);

    color:#fff;

    overflow:hidden;

}

.premium-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(circle,#00C2FF22,transparent 70%);

}

.premium-cta h2{

    color:#fff;

    font-size:52px;

    margin:25px 0;

}

.premium-cta p{

    max-width:720px;

    margin:auto;

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

    font-size:18px;

}

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

.footer{

    background:#06101d;

    color:#bfc7d4;

    padding:90px 0 30px;

}

.footer h4,

.footer h5{

    color:#fff;

}

.footer p{

    color:#bfc7d4;

    line-height:1.8;

}

.footer ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer ul li{

    margin-bottom:14px;

}

.footer ul li a{

    color:#bfc7d4;

    transition:.3s;

}

.footer ul li a:hover{

    color:#fff;

    padding-left:8px;

}

.footer hr{

    border-color:rgba(255,255,255,.12);

}

.footer-bottom{

    padding-top:30px;

    text-align:center;

    color:#95a2b5;

}

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

.social-links{

    display:flex;

    gap:14px;

    margin-top:30px;

}

.social-links a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    transition:.35s;

}

.social-links a:hover{

    background:var(--gradient);

    transform:translateY(-6px) rotate(360deg);

}

/*==================================================
SCROLL TO TOP
==================================================*/

#scrollTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--gradient);

    color:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

    box-shadow:0 20px 40px rgba(0,0,0,.25);

}

#scrollTop.active{

    opacity:1;

    visibility:visible;

}

#scrollTop:hover{

    transform:translateY(-8px);

}

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

@keyframes float{

    50%{

        transform:translateY(-15px);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

.float{

    animation:float 5s ease-in-out infinite;

}

.pulse{

    animation:pulse 2s infinite;

}

/*==================================================
GLASS EFFECT
==================================================*/

.glass{

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

    backdrop-filter:blur(20px);

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

}

/* Ripple Effect */

.btn{
    position:relative;
    overflow:hidden;
}

.ripple{
    position:absolute;
    border-radius:50%;
    transform:scale(0);
    background:rgba(255,255,255,.45);
    animation:rippleEffect .6s linear;
    pointer-events:none;
}

@keyframes rippleEffect{
    to{
        transform:scale(4);
        opacity:0;
    }
}

img.loaded{
    opacity:1;
    transition:.5s;
}

/*==============================
ABOUT OVERVIEW
==============================*/

.about-overview{
    background:#ffffff;
    position:relative;
}

.about-bg-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.18;
}

.about-bg-circle.one{
    width:320px;
    height:320px;
    background:#0d6efd;
    top:-100px;
    left:-100px;
}

.about-bg-circle.two{
    width:260px;
    height:260px;
    background:#6f42c1;
    right:-70px;
    bottom:-70px;
}

.about-image-wrapper{
    position:relative;
}

.about-image-wrapper img{
    border-radius:25px;
}

.experience-card{
    position:absolute;
    bottom:30px;
    right:-25px;
    background:linear-gradient(135deg,#0b5cff,#2fa8ff);
    color:#fff;
    padding:25px;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.experience-card h2{
    margin:0;
    font-size:42px;
    font-weight:700;
}

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

.feature-box:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(13,110,253,.18);
}

.feature-box i{
    width:55px;
    height:55px;
    border-radius:50%;
    background:linear-gradient(135deg,#0d6efd,#00b4ff);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.feature-box h6{
    margin-bottom:4px;
    font-weight:700;
}

.feature-box small{
    color:#6c757d;
}

/*====================================================
PREMIUM MISSION SECTION
====================================================*/

.about-values-section{

padding:120px 0;

background:
linear-gradient(rgba(6,15,40,.92),rgba(5,13,35,.95)),
url("../images/about-bg2.jpg");

background-size:cover;

background-position:center;

position:relative;

}

.about-values-section::before{

content:"";

position:absolute;

width:600px;

height:600px;

background:#1b7dff;

filter:blur(160px);

opacity:.18;

top:-250px;

left:-200px;

}

.about-values-section::after{

content:"";

position:absolute;

width:500px;

height:500px;

background:#6b5cff;

filter:blur(140px);

opacity:.18;

bottom:-200px;

right:-150px;

}

.glass-card{

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

backdrop-filter:blur(18px);

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

border-radius:28px;

padding:45px;

height:100%;

text-align:center;

transition:.45s;

position:relative;

overflow:hidden;

}

.glass-card:hover{

transform:translateY(-12px);

border-color:#25b7ff;

box-shadow:0 30px 60px rgba(0,0,0,.35);

}

.glass-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:36px;

background:linear-gradient(135deg,#24d2ff,#0062ff);

color:#fff;

box-shadow:0 15px 35px rgba(0,119,255,.45);

}

.glass-card h3{

color:#fff;

font-weight:700;

margin-bottom:18px;

}

.glass-card p{

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

line-height:1.8;

font-size:16px;

}

.section-title{

font-size:48px;

font-weight:800;

}

.section-subtitle{

max-width:700px;

margin:auto;

font-size:18px;

line-height:1.8;

}

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

.about-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,#1b6dff 0%,#08192f 40%),
    radial-gradient(circle at bottom right,#00c2ff22 0%,transparent 45%),
    linear-gradient(135deg,#07111f,#0b2447,#0B5ED7);

    color:#fff;

}

.about-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:60px 60px;

    opacity:.45;

}

.about-hero .container{

    position:relative;

    z-index:2;

}

/*==================================================
COMPANY SECTION
==================================================*/

.about-company{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:

    linear-gradient(135deg,#f8fbff,#edf6ff,#ffffff);

}

.about-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

}

.about-shape-1{

    width:420px;

    height:420px;

    background:#0b5ed720;

    top:-150px;

    left:-150px;

}

.about-shape-2{

    width:320px;

    height:320px;

    background:#00c2ff25;

    right:-120px;

    bottom:-120px;

}

.about-image{

    position:relative;

}

.about-image img{

    border-radius:25px;

    box-shadow:0 30px 70px rgba(0,0,0,.18);

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.03);

}

.mini-feature{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-weight:600;

}

.mini-feature i{

    color:#0B5ED7;

    font-size:18px;

}

/*==================================================
MISSION SECTION
==================================================*/

.mission-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:

    linear-gradient(135deg,#07111f,#08192f,#0B5ED7);

}

.mission-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:60px 60px;

}

.mission-blob1{

    width:350px;

    height:350px;

    background:#00c2ff;

    top:-120px;

    left:-100px;

}

.mission-blob2{

    width:300px;

    height:300px;

    background:#5B6EFF;

    right:-80px;

    bottom:-100px;

}

.glass-card:hover{

    transform:translateY(-15px);

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

}

.glass-card h3{

    color:#fff;

    margin-bottom:18px;

}

.glass-card p{

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

    margin:0;

}

/*==================================================
LEADERSHIP SECTION
==================================================*/

.leadership-section{

    padding:120px 0;

    background:linear-gradient(135deg,#f8fbff,#ffffff);

}

.team-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    transition:.45s;

    height:100%;

}

.team-card:hover{

    transform:translateY(-15px);

    box-shadow:0 35px 70px rgba(0,0,0,.16);

}

.team-card img{

    width:100%;

    height:360px;

    object-fit:cover;

    transition:.6s;

}

.team-card:hover img{

    transform:scale(1.08);

}

.team-content{

    padding:35px;

    text-align:center;

}

.team-content h4{

    margin-bottom:8px;

}

.team-content span{

    display:block;

    color:var(--primary);

    font-weight:600;

    margin-bottom:18px;

}

.team-content p{

    color:#6b7280;

    margin:0;

}

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

.process-item{

    margin-bottom:60px;

}

.process-content:hover{

    transform:translateY(-10px);

}

/*==================================================
CTA
==================================================*/

.premium-cta::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

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

    filter:blur(80px);

    top:-180px;

    left:-180px;

}

.premium-cta::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:#00c2ff22;

    filter:blur(80px);

    right:-180px;

    bottom:-180px;

}

.premium-cta .container{

    position:relative;

    z-index:2;

}

.premium-cta h2{

    color:#fff;

    font-size:52px;

    margin:20px 0;

}

.premium-cta p{

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

    max-width:720px;

    margin:auto;

    font-size:18px;

}

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

.btn-outline-primary{

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:50px;

    padding:14px 34px;

    font-weight:600;

}

.btn-outline-primary:hover{

    background:var(--gradient);

    color:#fff;

    border-color:transparent;

}

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

@media(max-width:991px){

.about-hero{

min-height:auto;

padding:150px 0 100px;

text-align:center;

}

.process-line{

display:none;

}

.team-card img{

height:300px;

}

}

@media(max-width:767px){

.about-image{

margin-bottom:40px;

}

.experience-box{

position:relative;

right:auto;

bottom:auto;

margin-top:20px;

display:inline-block;

}

.team-card img{

height:260px;

}

.glass-card{

padding:35px 25px;

}

.process-content{

padding:25px;

}

.stats-card{

padding:30px 20px;

}

}

/*==================================================
END OF STYLE.CSS
==================================================*/

/* =====================================================
   BANKING PAGE
===================================================== */

:root{
    --bank-blue:#0f6fff;
    --bank-dark:#06142f;
    --bank-light:#3cb6ff;
    --bank-cyan:#00d4ff;
}

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

.banking-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 20%,rgba(0,180,255,.25),transparent 35%),
        radial-gradient(circle at 80% 30%,rgba(60,120,255,.18),transparent 35%),
        linear-gradient(135deg,#020b23,#081d4b,#0d2d73,#07142d);
}

.banking-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.03) 1px,
        transparent 1px,
        transparent 80px);
    animation:gridMove 15s linear infinite;
}

@keyframes gridMove{
from{transform:translateX(0);}
to{transform:translateX(80px);}
}

/* ===========================
   GLOWING CIRCLES
===========================*/

.bank-circle{
    position:absolute;
    border-radius:50%;
    border:2px solid rgba(0,210,255,.25);
    animation:rotateCircle 18s linear infinite;
}

.bank-circle.one{
    width:420px;
    height:420px;
    top:-120px;
    right:-80px;
}

.bank-circle.two{
    width:300px;
    height:300px;
    bottom:-120px;
    left:-80px;
    animation-direction:reverse;
}

.bank-circle.three{
    width:180px;
    height:180px;
    top:40%;
    left:50%;
    animation-duration:10s;
}

@keyframes rotateCircle{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

/* ===========================
   FLOATING ICONS
===========================*/

.finance-icon{
position:absolute;
font-size:42px;
color:rgba(255,255,255,.18);
animation:floatFinance 7s ease-in-out infinite;
}

.finance-icon.card{
top:18%;
left:12%;
}

.finance-icon.coin{
right:15%;
top:30%;
animation-delay:2s;
}

.finance-icon.chart{
left:25%;
bottom:18%;
animation-delay:1s;
}

.finance-icon.lock{
right:28%;
bottom:12%;
animation-delay:3s;
}

@keyframes floatFinance{

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

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

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

}

/* ===========================
   FLOATING GLASS CARD
===========================*/

.bank-glass{
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.15);
border-radius:24px;
padding:40px;
box-shadow:0 25px 50px rgba(0,0,0,.35);
animation:glassFloat 6s ease-in-out infinite;
}

@keyframes glassFloat{

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

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

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

}

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

.banking-hero h1{
font-size:4rem;
font-weight:800;
color:#fff;
}

.banking-hero p{
color:#d7eaff;
font-size:1.15rem;
line-height:1.8;
}

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

.bank-btn{

background:linear-gradient(45deg,#0f6fff,#00d4ff);
border:none;
padding:14px 36px;
font-weight:700;
border-radius:50px;
color:#fff;
transition:.4s;
box-shadow:0 15px 30px rgba(0,140,255,.35);

}

.bank-btn:hover{

transform:translateY(-5px);
box-shadow:0 25px 45px rgba(0,160,255,.45);

}

/* ===========================
   SECTION TITLES
===========================*/

.bank-title{

font-size:2.7rem;
font-weight:800;
margin-bottom:15px;

}

.bank-subtitle{

color:#0f6fff;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;

}

/* ===========================
   SERVICE CARDS
===========================*/

.bank-card{

background:#fff;
border-radius:20px;
padding:35px;
transition:.45s;
border:1px solid #edf2ff;
overflow:hidden;
position:relative;
height:100%;

}

.bank-card::before{

content:"";
position:absolute;
top:0;
left:0;
height:5px;
width:100%;
background:linear-gradient(90deg,#0f6fff,#00d4ff);
transform:scaleX(0);
transition:.45s;

}

.bank-card:hover::before{

transform:scaleX(1);

}

.bank-card:hover{

transform:translateY(-12px);
box-shadow:0 25px 45px rgba(0,0,0,.12);

}

.bank-card i{

font-size:52px;
margin-bottom:25px;
color:#0f6fff;
transition:.4s;

}

.bank-card:hover i{

transform:scale(1.2) rotate(8deg);

}

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

.bank-img{

border-radius:22px;
overflow:hidden;
box-shadow:0 25px 45px rgba(0,0,0,.18);

}

.bank-img img{

transition:.7s;

}

.bank-img:hover img{

transform:scale(1.08);

}

/* ===========================
   BENEFIT BOX
===========================*/

.benefit-box{

background:#fff;
border-radius:20px;
padding:35px;
text-align:center;
transition:.4s;
height:100%;

}

.benefit-box:hover{

transform:translateY(-10px);
background:#0f6fff;
color:#fff;

}

.benefit-box:hover i{

color:#fff;

}

.benefit-box i{

font-size:55px;
margin-bottom:20px;
color:#0f6fff;
transition:.4s;

}

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

.bank-check li{

margin-bottom:18px;
font-size:17px;

}

.bank-check i{

color:#0f6fff;
margin-right:12px;

}

/* ===========================
   CTA
===========================*/

.bank-cta{

background:linear-gradient(135deg,#041532,#0b2d74,#1188ff);
color:#fff;
border-radius:25px;
overflow:hidden;
position:relative;

}

.bank-cta::before{

content:"";
position:absolute;
width:500px;
height:500px;
background:rgba(255,255,255,.06);
border-radius:50%;
top:-250px;
right:-180px;

}

.bank-cta .btn{

border-radius:50px;
padding:14px 34px;

}

/* ===========================
   FLOATING DOTS
===========================*/

.bank-dot{

position:absolute;
border-radius:50%;
background:#00d4ff;
opacity:.35;
animation:dotFloat 10s linear infinite;

}

.bank-dot:nth-child(1){

width:10px;
height:10px;
top:18%;
left:15%;

}

.bank-dot:nth-child(2){

width:16px;
height:16px;
right:12%;
top:40%;

}

.bank-dot:nth-child(3){

width:12px;
height:12px;
left:40%;
bottom:18%;

}

@keyframes dotFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-35px);

}

100%{

transform:translateY(0);

}

}

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

@media(max-width:992px){

.banking-hero{

padding:120px 0 80px;

}

.banking-hero h1{

font-size:3rem;

}

.bank-glass{

margin-top:40px;

}

}

@media(max-width:768px){

.banking-hero h1{

font-size:2.3rem;

}

.bank-title{

font-size:2rem;

}

.finance-icon{

display:none;

}

.bank-circle{

display:none;

}

}

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

.education-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
    radial-gradient(circle at top,#5b8cff 0%,transparent 40%),
    radial-gradient(circle at bottom right,#8d5cff 0%,transparent 45%),
    linear-gradient(135deg,#08182f,#0e2d54,#08182f);
}

/* Overlay */

.education-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:60px 60px;
    animation:gridMoveEdu 20s linear infinite;
    opacity:.45;
}

/*==================================
Floating Books
==================================*/

.book{
    position:absolute;
    color:rgba(255,255,255,.12);
    animation:bookFloat linear infinite;
    transform-style:preserve-3d;
}

.book i{
    font-size:65px;
}

.book1{
    top:10%;
    left:8%;
    animation-duration:18s;
}

.book2{
    top:25%;
    right:12%;
    animation-duration:15s;
}

.book3{
    bottom:18%;
    left:18%;
    animation-duration:20s;
}

.book4{
    bottom:12%;
    right:18%;
    animation-duration:16s;
}

/*==================================
Graduation Caps
==================================*/

.cap{
    position:absolute;
    color:rgba(255,255,255,.08);
    animation:capRotate 14s linear infinite;
}

.cap i{
    font-size:55px;
}

.cap1{
    top:18%;
    left:40%;
}

.cap2{
    bottom:15%;
    right:35%;
}

/*==================================
AI Nodes
==================================*/

.edu-node{
    position:absolute;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#6fd8ff;
    box-shadow:0 0 20px #6fd8ff;
    animation:pulseEdu 3s infinite;
}

.node1{
    top:20%;
    left:60%;
}

.node2{
    top:40%;
    right:22%;
}

.node3{
    bottom:28%;
    left:48%;
}

.node4{
    bottom:16%;
    right:12%;
}

.node5{
    top:55%;
    left:20%;
}

/*==================================
Connection Lines
==================================*/

.edu-line{
    position:absolute;
    height:2px;
    background:linear-gradient(90deg,
    transparent,
    rgba(111,216,255,.9),
    transparent);
    animation:lineFlow 4s infinite;
}

.line1{
    width:240px;
    top:24%;
    left:35%;
    transform:rotate(18deg);
}

.line2{
    width:180px;
    top:52%;
    left:16%;
    transform:rotate(-20deg);
}

.line3{
    width:220px;
    bottom:25%;
    right:20%;
    transform:rotate(25deg);
}

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

.education-glass{
    position:relative;
    z-index:10;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:28px;
    padding:70px;
    color:#fff;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.education-glass h1{
    font-size:4rem;
    font-weight:800;
}

.education-glass p{
    font-size:1.25rem;
    color:rgba(255,255,255,.88);
}

/*==================================
Floating Circles
==================================*/

.edu-circle{
    position:absolute;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.08);
    animation:circleMove 18s linear infinite;
}

.circle1{
    width:260px;
    height:260px;
    top:-90px;
    right:-70px;
}

.circle2{
    width:180px;
    height:180px;
    bottom:40px;
    left:-60px;
}

.circle3{
    width:120px;
    height:120px;
    top:60%;
    right:15%;
}

/*==================================
Animations
==================================*/

@keyframes gridMoveEdu{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(60px);
    }

}

@keyframes bookFloat{

    0%{
        transform:translateY(0) rotateY(0deg);
    }

    50%{
        transform:translateY(-40px) rotateY(180deg);
    }

    100%{
        transform:translateY(0) rotateY(360deg);
    }

}

@keyframes capRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes pulseEdu{

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

    50%{
        transform:scale(1.8);
        opacity:.35;
    }

}

@keyframes lineFlow{

    from{
        opacity:.2;
    }

    50%{
        opacity:1;
    }

    to{
        opacity:.2;
    }

}

@keyframes circleMove{

    from{
        transform:rotate(0deg) translateY(0);
    }

    to{
        transform:rotate(360deg) translateY(-20px);
    }

}

/*==================================
Responsive
==================================*/

@media(max-width:991px){

.education-glass{

padding:40px 25px;

}

.education-glass h1{

font-size:2.7rem;

}

.book,
.cap,
.edu-line{

display:none;

}

}

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

.healthcare-hero{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    display:flex;
    align-items:center;
    color:#fff;
    background:
    radial-gradient(circle at top left,#1ecbe1 0%,transparent 35%),
    radial-gradient(circle at bottom right,#36f2b5 0%,transparent 30%),
    linear-gradient(135deg,#05152f,#0d2d54,#07182f);
}

.medical-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
}

/* Grid */

.medical-grid{
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:70px 70px;
    animation:gridMove 16s linear infinite;
}

/* DNA */

.dna{
    position:absolute;
    width:6px;
    height:420px;
    border-radius:20px;
    background:linear-gradient(#00d4ff,#4effc1);
    box-shadow:0 0 20px rgba(0,212,255,.5);
}

.dna::before,
.dna::after{
    content:"";
    position:absolute;
    left:-12px;
    width:30px;
    height:6px;
    border-radius:20px;
    background:#6af6ff;
    animation:dnaRotate 3s linear infinite;
}

.dna::after{
    top:40px;
    animation-delay:1.5s;
}

.dna1{
    left:8%;
    top:15%;
    animation:floatDNA 8s ease-in-out infinite;
}

.dna2{
    right:10%;
    bottom:10%;
    animation:floatDNA 9s ease-in-out infinite reverse;
}

/* Pulse */

.pulse{
    position:absolute;
    border:2px solid rgba(0,255,255,.4);
    border-radius:50%;
    animation:pulseWave 5s infinite;
}

.pulse1{
    width:180px;
    height:180px;
    top:12%;
    right:18%;
}

.pulse2{
    width:260px;
    height:260px;
    bottom:10%;
    left:8%;
    animation-delay:1.5s;
}

.pulse3{
    width:130px;
    height:130px;
    top:55%;
    right:45%;
    animation-delay:3s;
}

/* Heartbeat */

.heartbeat{
    position:absolute;
    width:100%;
    height:3px;
    top:48%;
    background:linear-gradient(90deg,
    transparent,
    #27ffd3,
    transparent);
    animation:heartbeatMove 3s linear infinite;
    opacity:.4;
}

/* Floating Medical Icons */

.medical-icon{
    position:absolute;
    width:70px;
    height:70px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
    backdrop-filter:blur(20px);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    animation:medicalFloat 7s ease-in-out infinite;
}

.icon1{top:15%;left:28%;}
.icon2{top:68%;left:18%;animation-delay:1s;}
.icon3{top:18%;right:18%;animation-delay:2s;}
.icon4{bottom:12%;right:12%;animation-delay:3s;}
.icon5{top:48%;right:34%;animation-delay:4s;}

/* Hero */

.industry-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 22px;
    border-radius:50px;
    margin-bottom:25px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(20px);
}

.healthcare-hero h1{
    font-size:4rem;
    font-weight:800;
    line-height:1.15;
}

.healthcare-hero h1 span{
    display:block;
    color:#59ffe0;
}

.healthcare-hero p{
    font-size:1.15rem;
    color:rgba(255,255,255,.9);
    margin:30px 0;
    max-width:560px;
}

/* 3D Illustration */

.healthcare-3d{
    position:relative;
    width:520px;
    height:520px;
    margin:auto;
}

.medical-circle{
    position:absolute;
    inset:120px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:90px;
    color:#6ffff0;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(30px);
    box-shadow:0 0 60px rgba(0,255,255,.4);
    animation:medicalRotate 15s linear infinite;
}

.orbit{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px dashed rgba(255,255,255,.2);
}

.orbit1{
    animation:spin 15s linear infinite;
}

.orbit2{
    inset:40px;
    animation:spinReverse 12s linear infinite;
}

.orbit3{
    inset:80px;
    animation:spin 8s linear infinite;
}

.plus{
    position:absolute;
    width:26px;
    height:26px;
    background:#4efad3;
    transform:rotate(45deg);
    box-shadow:0 0 20px #49ffe4;
}

.plus::before{
    content:"";
    position:absolute;
    inset:0;
    transform:rotate(90deg);
    background:#4efad3;
}

.plus1{top:60px;left:50%;}
.plus2{bottom:80px;left:20%;}
.plus3{right:70px;top:45%;}

/* Animations */

@keyframes gridMove{
    from{transform:translateY(0);}
    to{transform:translateY(70px);}
}

@keyframes floatDNA{
    0%,100%{transform:translateY(0) rotate(0);}
    50%{transform:translateY(-25px) rotate(8deg);}
}

@keyframes dnaRotate{
    0%{transform:translateY(0);}
    50%{transform:translateY(30px);}
    100%{transform:translateY(60px);}
}

@keyframes pulseWave{
    0%{transform:scale(.5);opacity:1;}
    100%{transform:scale(1.8);opacity:0;}
}

@keyframes heartbeatMove{
    from{transform:translateX(-100%);}
    to{transform:translateX(100%);}
}

@keyframes medicalFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-18px);}
}

@keyframes medicalRotate{
    from{transform:rotateY(0deg);}
    to{transform:rotateY(360deg);}
}

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

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

/* Responsive */

@media(max-width:992px){

.healthcare-hero{
padding:140px 0 80px;
text-align:center;
}

.healthcare-hero h1{
font-size:2.8rem;
}

.healthcare-3d{
width:360px;
height:360px;
margin-top:50px;
}

.medical-circle{
inset:80px;
font-size:65px;
}

.medical-icon{
display:none;
}

.dna{
display:none;
}

}

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

.logistics-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
    radial-gradient(circle at top,#163e68 0%,#081827 55%,#02070d 100%);
}

/* Animated Grid */

.logistics-grid{
    position:absolute;
    inset:0;
    background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:70px 70px;
    transform:perspective(900px) rotateX(72deg);
    transform-origin:top;
    animation:gridMove 12s linear infinite;
    opacity:.4;
}

/* Floating Glow */

.logistics-glow{
    position:absolute;
    width:750px;
    height:750px;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(0,255,255,.28),
    transparent 70%);
    top:-260px;
    right:-180px;
    animation:glowPulse 7s ease-in-out infinite;
}

/* Road */

.logistics-road{
    position:absolute;
    bottom:0;
    left:-20%;
    width:140%;
    height:190px;
    background:
    linear-gradient(#1d1d1d,#0c0c0c);
    transform:perspective(900px) rotateX(78deg);
}

.logistics-road::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:6px;
    background:repeating-linear-gradient(
    to right,
    #fff 0 45px,
    transparent 45px 90px);
    animation:roadMove 1.2s linear infinite;
}

/* Globe */

.logistics-globe{
    position:absolute;
    right:9%;
    top:18%;
    width:190px;
    height:190px;
    border-radius:50%;
    border:2px solid rgba(0,255,255,.45);
    box-shadow:0 0 45px rgba(0,255,255,.45);
    animation:rotateGlobe 16s linear infinite;
}

.logistics-globe::before,
.logistics-globe::after{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
}

.logistics-globe::after{
    inset:42px;
}

/* Truck */

.truck{
    position:absolute;
    bottom:150px;
    left:-220px;
    font-size:74px;
    color:#00d9ff;
    animation:truckDrive 13s linear infinite;
    filter:drop-shadow(0 0 18px cyan);
}

/* Plane */

.plane{
    position:absolute;
    top:110px;
    left:-120px;
    font-size:46px;
    color:#fff;
    animation:planeFly 18s linear infinite;
}

/* Ship */

.ship{
    position:absolute;
    bottom:65px;
    left:12%;
    font-size:55px;
    color:#59d7ff;
    animation:shipFloat 4s ease-in-out infinite;
}

/* Containers */

.container-box{
    position:absolute;
    width:70px;
    height:55px;
    background:#ff9800;
    border-radius:8px;
    box-shadow:0 15px 35px rgba(0,0,0,.3);
}

.c1{
    top:23%;
    left:10%;
    animation:floatContainer 6s ease-in-out infinite;
}

.c2{
    top:34%;
    right:20%;
    animation:floatContainer 8s ease-in-out infinite;
}

.c3{
    bottom:28%;
    right:32%;
    animation:floatContainer 7s ease-in-out infinite;
}

/* GPS Pins */

.pin{
    position:absolute;
    color:#ff5252;
    font-size:34px;
    animation:pinPulse 2s infinite;
}

.pin1{
    top:22%;
    left:22%;
}

.pin2{
    top:44%;
    right:28%;
}

.pin3{
    bottom:24%;
    left:62%;
}

/*=========================================
SATELLITE
=========================================*/

.satellite{
    position:absolute;
    top:14%;
    left:10%;
    font-size:42px;
    color:#9be8ff;
    animation:satelliteOrbit 18s linear infinite;
    filter:drop-shadow(0 0 15px #8aefff);
}

/*=========================================
CONNECTION LINES
=========================================*/

.route-line{
    position:absolute;
    height:2px;
    background:linear-gradient(90deg,
    transparent,
    #00e5ff,
    transparent);
    opacity:.7;
    animation:flowLine 3s linear infinite;
}

.line1{
    width:280px;
    top:32%;
    left:15%;
    transform:rotate(15deg);
}

.line2{
    width:220px;
    top:54%;
    right:18%;
    transform:rotate(-18deg);
}

.line3{
    width:250px;
    bottom:28%;
    left:38%;
    transform:rotate(10deg);
}

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

.logistics-particles span{
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#6ef7ff;
    box-shadow:0 0 12px cyan;
    animation:particleFloat linear infinite;
}

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

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

.logistics-particles span:nth-child(3){
    left:38%;
    animation-duration:15s;
}

.logistics-particles span:nth-child(4){
    left:56%;
    animation-duration:11s;
}

.logistics-particles span:nth-child(5){
    left:72%;
    animation-duration:13s;
}

.logistics-particles span:nth-child(6){
    left:90%;
    animation-duration:16s;
}

/*=========================================
GLASS INFO CARDS
=========================================*/

.logistics-card{
    position:absolute;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    color:#fff;
    padding:18px 24px;
    box-shadow:0 20px 45px rgba(0,0,0,.25);
    animation:cardFloat 5s ease-in-out infinite;
}

.logistics-card h5{
    margin-bottom:6px;
    font-weight:700;
}

.logistics-card p{
    margin:0;
    font-size:14px;
    opacity:.85;
}

.card-route{
    top:22%;
    right:8%;
}

.card-delivery{
    bottom:22%;
    left:8%;
}

.card-warehouse{
    bottom:28%;
    right:12%;
}

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

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

.logistics-hero h1{
    font-size:3.8rem;
    color:#fff;
    font-weight:800;
}

.logistics-hero p{
    color:#dbeeff;
    font-size:1.15rem;
    max-width:620px;
}

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

@keyframes gridMove{
    from{
        background-position:0 0,0 0;
    }
    to{
        background-position:0 70px,70px 0;
    }
}

@keyframes glowPulse{
    0%,100%{
        transform:scale(1);
        opacity:.45;
    }
    50%{
        transform:scale(1.15);
        opacity:.8;
    }
}

@keyframes roadMove{
    from{
        background-position:0;
    }
    to{
        background-position:90px;
    }
}

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

@keyframes truckDrive{
    0%{
        left:-220px;
    }
    100%{
        left:110%;
    }
}

@keyframes planeFly{
    0%{
        left:-120px;
        top:120px;
        transform:rotate(-8deg);
    }
    50%{
        top:70px;
    }
    100%{
        left:110%;
        top:140px;
        transform:rotate(8deg);
    }
}

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

@keyframes floatContainer{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(-18px) rotate(5deg);
    }
}

@keyframes pinPulse{
    0%,100%{
        transform:scale(1);
        opacity:1;
    }
    50%{
        transform:scale(1.35);
        opacity:.6;
    }
}

@keyframes satelliteOrbit{
    0%{
        transform:translateX(0) rotate(0deg);
    }
    50%{
        transform:translateX(60px) translateY(-25px) rotate(12deg);
    }
    100%{
        transform:translateX(0) rotate(0deg);
    }
}

@keyframes flowLine{
    from{
        background-position:-300px;
    }
    to{
        background-position:300px;
    }
}

@keyframes particleFloat{
    0%{
        transform:translateY(100vh) scale(.4);
        opacity:0;
    }
    20%{
        opacity:1;
    }
    100%{
        transform:translateY(-120px) scale(1);
        opacity:0;
    }
}

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

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

@media(max-width:991px){

    .logistics-hero{
        min-height:900px;
        text-align:center;
    }

    .logistics-hero h1{
        font-size:2.8rem;
    }

    .truck{
        font-size:56px;
    }

    .plane{
        font-size:36px;
    }

    .ship{
        font-size:42px;
    }

    .logistics-card{
        position:relative;
        margin:18px auto;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        max-width:320px;
    }

    .logistics-globe{
        width:140px;
        height:140px;
    }
}

@media(max-width:768px){

    .logistics-grid,
    .route-line,
    .satellite,
    .plane,
    .pin,
    .container-box{
        display:none;
    }

    .truck{
        font-size:46px;
        bottom:90px;
    }

    .ship{
        bottom:30px;
        left:50%;
        transform:translateX(-50%);
    }

    .logistics-globe{
        width:110px;
        height:110px;
        right:50%;
        transform:translateX(50%);
    }

    .logistics-hero h1{
        font-size:2.2rem;
    }

    .logistics-hero p{
        font-size:1rem;
    }
}

/*===================================================
MANUFACTURING PAGE
===================================================*/

:root{
    --mf-blue:#0f4c81;
    --mf-orange:#ff9800;
    --mf-dark:#101820;
    --mf-light:#f5f9fc;
}

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

.manufacturing-hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:
    linear-gradient(135deg,#091b2d,#0f4c81,#183f63);
}

.manufacturing-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.05) 0,
    rgba(255,255,255,.05) 1px,
    transparent 1px,
    transparent 70px);
    animation:gridMove 18s linear infinite;
}

.manufacturing-hero::after{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    background:radial-gradient(circle,rgba(255,152,0,.18),transparent 70%);
    top:-220px;
    right:-220px;
}

@keyframes gridMove{

from{transform:translateX(0);}

to{transform:translateX(70px);}

}

.hero-content{

position:relative;

z-index:5;

color:#fff;

}

.hero-content h1{

font-size:4rem;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.hero-content p{

font-size:1.15rem;

opacity:.92;

max-width:620px;

margin-bottom:35px;

}

.hero-btn{

padding:15px 36px;

border-radius:40px;

font-weight:700;

transition:.4s;

}

.hero-btn:hover{

transform:translateY(-6px);

}

/*===================================================
FLOATING GEARS
===================================================*/

.gear{

position:absolute;

border-radius:50%;

border:12px dashed rgba(255,255,255,.08);

animation:gearRotate linear infinite;

}

.gear1{

width:170px;

height:170px;

top:12%;

right:8%;

animation-duration:18s;

}

.gear2{

width:120px;

height:120px;

bottom:12%;

left:8%;

animation-duration:10s;

animation-direction:reverse;

}

.gear3{

width:75px;

height:75px;

top:65%;

right:28%;

animation-duration:8s;

}

@keyframes gearRotate{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}

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

.section-title span{

display:inline-block;

padding:7px 18px;

background:#e9f4ff;

color:var(--mf-blue);

border-radius:30px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

margin-bottom:15px;

}

.section-title h2{

font-size:2.5rem;

font-weight:800;

margin-bottom:20px;

color:var(--mf-dark);

}

.section-title p{

max-width:760px;

margin:auto;

color:#666;

}

/*===================================================
OVERVIEW
===================================================*/

.overview-section{

background:#fff;

}

.overview-image{

border-radius:25px;

overflow:hidden;

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.overview-image img{

transition:.6s;

}

.overview-image:hover img{

transform:scale(1.08);

}

.overview-content h6{

color:var(--mf-orange);

font-weight:700;

letter-spacing:1px;

}

.overview-content h2{

font-size:2.6rem;

font-weight:800;

margin:20px 0;

}

.overview-content p{

color:#666;

line-height:1.9;

}

/*===================================================
CHALLENGE CARDS
===================================================*/

.challenge-card{

background:#fff;

padding:40px 30px;

border-radius:22px;

text-align:center;

box-shadow:0 20px 45px rgba(0,0,0,.08);

transition:.4s;

height:100%;

}

.challenge-card:hover{

transform:translateY(-12px);

}

.challenge-card i{

font-size:55px;

color:var(--mf-orange);

margin-bottom:20px;

}

.challenge-card h4{

font-weight:700;

margin-bottom:15px;

}

/*===================================================
SOLUTION CARDS
===================================================*/

.solution-card{

background:linear-gradient(145deg,#fff,#eef7ff);

padding:35px;

border-radius:22px;

height:100%;

transition:.45s;

position:relative;

overflow:hidden;

}

.solution-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);

transition:.8s;

}

.solution-card:hover::before{

left:100%;

}

.solution-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.solution-card i{

font-size:55px;

color:var(--mf-blue);

margin-bottom:20px;

}

.solution-card h4{

font-weight:700;

margin-bottom:15px;

}

/*===================================================
SMART FACTORY
===================================================*/

.smart-factory{

background:linear-gradient(135deg,#081624,#163f67);

color:#fff;

padding:100px 0;

position:relative;

overflow:hidden;

}

.smart-factory::before{

content:"";

position:absolute;

inset:0;

background:url("../images/patterns/dots.png");

opacity:.08;

}

.smart-factory img{

border-radius:20px;

box-shadow:0 25px 60px rgba(0,0,0,.4);

}

.smart-factory ul li{

margin-bottom:18px;

font-size:17px;

}

/*===================================================
BENEFITS
===================================================*/

.benefit-card{

background:#fff;

padding:35px 25px;

border-radius:20px;

text-align:center;

position:relative;

overflow:hidden;

height:100%;

transition:.45s;

box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.benefit-card:hover{

transform:translateY(-10px);

}

.benefit-number{

position:absolute;

top:18px;

right:18px;

font-size:40px;

font-weight:800;

color:rgba(15,76,129,.08);

}

.benefit-card i{

font-size:52px;

color:var(--mf-orange);

margin-bottom:20px;

}

.benefit-card h4{

font-weight:700;

margin-bottom:15px;

}

/*===================================================
CTA
===================================================*/

.manufacturing-cta{

padding:110px 0;

background:linear-gradient(135deg,#ff9800,#ff6b00);

color:#fff;

}

.manufacturing-cta h2{

font-size:2.7rem;

font-weight:800;

margin-bottom:25px;

}

.manufacturing-cta p{

font-size:1.1rem;

max-width:760px;

margin:auto auto 35px;

}

.manufacturing-cta .btn{

padding:14px 36px;

border-radius:40px;

font-weight:700;

transition:.35s;

}

.manufacturing-cta .btn:hover{

transform:translateY(-6px);

}

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

@media(max-width:991px){

.hero-content h1{

font-size:3rem;

}

.section-title h2{

font-size:2rem;

}

.overview-content{

margin-top:40px;

}

}

@media(max-width:768px){

.hero-content h1{

font-size:2.4rem;

}

.manufacturing-cta h2{

font-size:2rem;

}

.gear{

display:none;

}

}

/*==================================================
RETAIL PAGE CSS
==================================================*/

/*------------------------------
NAVBAR
------------------------------*/

.retail-navbar{
background:rgba(12,20,45,.92);
backdrop-filter:blur(15px);
transition:.4s;
padding:14px 0;
}

.retail-navbar .navbar-brand,
.retail-navbar .nav-link{
color:#fff!important;
font-weight:500;
}

.retail-navbar .nav-link{
margin-left:18px;
position:relative;
transition:.3s;
}

.retail-navbar .nav-link:hover,
.retail-navbar .nav-link.active{
color:#ffc107!important;
}

.retail-navbar .nav-link::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#ffc107;
transition:.4s;
}

.retail-navbar .nav-link:hover::after{
width:100%;
}

/*------------------------------
HERO
------------------------------*/

.retail-hero{
position:relative;
overflow:hidden;
background:linear-gradient(135deg,#07142f,#173d7a,#0c7bb3);
color:#fff;
padding:140px 0 80px;
}

.hero-badge{
display:inline-flex;
align-items:center;
gap:8px;
background:rgba(255,255,255,.15);
padding:10px 22px;
border-radius:50px;
margin-bottom:25px;
font-weight:600;
}

.hero-content h1{
font-size:62px;
font-weight:800;
line-height:1.15;
margin-bottom:25px;
}

.hero-content h1 span{
color:#ffc107;
}

.hero-content p{
font-size:18px;
line-height:1.9;
margin-bottom:35px;
max-width:560px;
color:#e8ecf8;
}

.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.hero-btn{
padding:14px 34px;
border-radius:50px;
font-weight:700;
transition:.35s;
}

.hero-btn:hover{
transform:translateY(-5px);
}

.shopping-display{
position:relative;
height:520px;
display:flex;
align-items:center;
justify-content:center;
}

.display-card{
background:#084298;
color:#00C2FF;
border-radius:25px;
box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.main-card{
width:270px;
height:270px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
animation:floatCard 4s ease-in-out infinite;
}

.main-card i{
font-size:70px;
color:#00C2FF;
margin-bottom:20px;
}

.main-card h4{
font-weight:700;
}

.main-card p{
margin:0;
color:#777;
}

.mini-card{
position:absolute;
width:90px;
height:90px;
display:flex;
justify-content:center;
align-items:center;
font-size:34px;
animation:floatSmall 5s infinite ease-in-out;
}

.one{
top:20px;
left:35px;
}

.two{
right:30px;
top:130px;
animation-delay:1s;
}

.three{
bottom:35px;
left:90px;
animation-delay:2s;
}

.floating-cart,
.floating-sale,
.floating-bag{
position:absolute;
border-radius:50%;
opacity:.12;
animation:floatCircle 12s linear infinite;
}

.floating-cart{
width:180px;
height:180px;
background:#fff;
left:-50px;
top:90px;
}

.floating-sale{
width:280px;
height:280px;
background:#ffc107;
right:-120px;
bottom:-80px;
}

.floating-bag{
width:130px;
height:130px;
background:#ffffff;
right:18%;
top:60px;
}

.glow-circle{
position:absolute;
border-radius:50%;
filter:blur(90px);
}

.glow-circle.one{
width:250px;
height:250px;
background:#ff9800;
top:-80px;
right:0;
opacity:.35;
}

.glow-circle.two{
width:220px;
height:220px;
background:#00bcd4;
left:-80px;
bottom:-80px;
opacity:.3;
}

/*------------------------------
BREADCRUMB
------------------------------*/

.retail-breadcrumb{
background:#f8f9fb;
padding:18px 0;
}

.retail-breadcrumb .breadcrumb{
margin:0;
}

/*------------------------------
COMMON
------------------------------*/

.section-tag,
.section-heading span{
display:inline-block;
padding:8px 18px;
background:#fff3cd;
color:#ff9800;
border-radius:30px;
font-weight:700;
margin-bottom:18px;
letter-spacing:.5px;
}

.section-heading h2,
.overview-section h2,
.why-retail h2{
font-size:42px;
font-weight:800;
margin-bottom:18px;
color:#0d2b55;
}

.section-heading p,
.overview-section p{
font-size:17px;
color:#666;
line-height:1.8;
}

.overview-image img,
.why-image img{
border-radius:22px;
box-shadow:0 20px 50px rgba(0,0,0,.15);
}

/*------------------------------
CHALLENGES
------------------------------*/

.retail-challenges{
background:#f7faff;
}

.challenge-box{
position:relative;
background:#fff;
padding:45px 30px;
border-radius:22px;
text-align:center;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
height:100%;
}

.challenge-box:hover{
transform:translateY(-10px);
}

.challenge-icon{
width:90px;
height:90px;
margin:auto;
border-radius:50%;
background:#fff4d8;
display:flex;
align-items:center;
justify-content:center;
font-size:36px;
color:#ff9800;
margin-bottom:25px;
}

.challenge-number{
position:absolute;
right:20px;
top:15px;
font-size:60px;
font-weight:800;
color:#f2f2f2;
}

/*------------------------------
SOLUTIONS
------------------------------*/

.solution-card{
background:#fff;
padding:40px 30px;
border-radius:20px;
text-align:center;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
height:100%;
}

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

.solution-icon{
width:90px;
height:90px;
margin:auto;
background:linear-gradient(135deg,#ff9800,#ffc107);
border-radius:20px;
display:flex;
justify-content:center;
align-items:center;
font-size:36px;
color:#fff;
margin-bottom:25px;
}

/*------------------------------
WHY US
------------------------------*/

.why-retail{
background:#f9fbfd;
}

.why-image{
position:relative;
}

.floating-badge{
position:absolute;
right:25px;
bottom:25px;
background:#ff9800;
color:#fff;
padding:14px 22px;
border-radius:40px;
font-weight:700;
box-shadow:0 12px 30px rgba(0,0,0,.2);
}

.feature-item{
display:flex;
gap:18px;
margin-bottom:24px;
align-items:flex-start;
}

.feature-icon{
width:65px;
height:65px;
background:#fff3cd;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
color:#ff9800;
font-size:28px;
flex-shrink:0;
}

/*------------------------------
BENEFITS
------------------------------*/

.benefit-card{
background:#fff;
padding:40px 25px;
border-radius:20px;
text-align:center;
height:100%;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
}

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

.benefit-card i{
font-size:46px;
color:#ff9800;
margin-bottom:22px;
}

/*------------------------------
CTA
------------------------------*/

.retail-cta{
background:linear-gradient(135deg,#0c2d5f,#1456a0);
padding:90px 0;
text-align:center;
color:#fff;
}

.retail-cta h2{
font-size:46px;
font-weight:800;
margin-bottom:20px;
}

.retail-cta p{
font-size:18px;
max-width:780px;
margin:auto auto 35px;
line-height:1.8;
}

/*------------------------------
ANIMATIONS
------------------------------*/

@keyframes floatCard{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-18px);}
}

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

@keyframes floatCircle{
0%{transform:translateY(0) rotate(0deg);}
50%{transform:translateY(-25px) rotate(180deg);}
100%{transform:translateY(0) rotate(360deg);}
}

/*------------------------------
RESPONSIVE
------------------------------*/

@media(max-width:991px){

.hero-content{
text-align:center;
}

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

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

.shopping-display{
margin-top:50px;
height:420px;
}

.section-heading h2,
.overview-section h2,
.why-retail h2{
font-size:34px;
}

.floating-badge{
position:relative;
display:inline-block;
margin-top:20px;
right:auto;
bottom:auto;
}

}

@media(max-width:767px){

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

.section-heading h2,
.overview-section h2,
.why-retail h2{
font-size:28px;
}

.main-card{
width:220px;
height:220px;
}

.mini-card{
width:70px;
height:70px;
font-size:26px;
}

.hero-btn{
width:100%;
text-align:center;
}

.feature-item{
flex-direction:column;
}

}

.service-card{
    cursor:pointer;
}

.manufacturing-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
    linear-gradient(135deg,#050816 0%,#0b1b3c 45%,#142c4d 100%);
}

.manufacturing-hero::before{
    content:"";
    position:absolute;
    width:170%;
    height:170%;
    left:-35%;
    top:-35%;
    background:
        radial-gradient(circle,#f59e0b22 0%,transparent 35%),
        radial-gradient(circle,#3b82f622 0%,transparent 30%),
        radial-gradient(circle,#22c55e22 0%,transparent 28%);
    animation:heroGradient 18s linear infinite;
}

.hero-left{
    position:relative;
    z-index:5;
}

.factory-card{

    position:relative;
    z-index:5;

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

    backdrop-filter:blur(20px);

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

    border-radius:30px;

    padding:60px 40px;

    color:#fff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    transition:.4s;

}

.factory-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 40px 90px rgba(245,158,11,.25);

}

.factory-card i{

    font-size:85px;

    color:#fbbf24;

    text-shadow:
        0 0 30px rgba(251,191,36,.6);

}

.hero-tag{

    display:inline-block;

    padding:12px 28px;

    border-radius:40px;

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

    backdrop-filter:blur(20px);

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

    color:#fbbf24;

    font-weight:700;

    letter-spacing:1px;

}

.gear{

    color:#fbbf24;

    filter:drop-shadow(0 0 15px rgba(251,191,36,.5));

}

.spark{

    background:#fbbf24;

    box-shadow:
        0 0 20px #fbbf24,
        0 0 45px #f59e0b;

}

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

.healthcare-hero{

position:relative;
min-height:100vh;
display:flex;
align-items:center;
overflow:hidden;

background:
linear-gradient(135deg,#050816 0%,#081b35 35%,#0a274a 70%,#06152a 100%);

}

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

.healthcare-hero::before{

content:"";
position:absolute;
width:170%;
height:170%;
top:-35%;
left:-35%;

background:

radial-gradient(circle,#00d9ff20 0%,transparent 30%),

radial-gradient(circle,#4fd8ff15 0%,transparent 28%),

radial-gradient(circle,#008cff18 0%,transparent 32%);

animation:medicalGradient 22s linear infinite;

}

@keyframes medicalGradient{

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

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

}

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

.medical-grid{

position:absolute;
width:100%;
height:100%;

background-image:

linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

background-size:55px 55px;

animation:gridMove 16s linear infinite;

opacity:.45;

}

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

.pulse-circle{

position:absolute;
border-radius:50%;
border:1px solid rgba(0,220,255,.25);

animation:medicalPulse 7s infinite;

}

.pulse1{

width:420px;
height:420px;

top:-120px;
left:-120px;

}

.pulse2{

width:320px;
height:320px;

right:-80px;
top:20%;

animation-delay:2s;

}

.pulse3{

width:260px;
height:260px;

bottom:-80px;
left:40%;

animation-delay:4s;

}

@keyframes medicalPulse{

0%{

transform:scale(.8);
opacity:.15;

}

50%{

opacity:.35;

}

100%{

transform:scale(1.25);
opacity:0;

}

}

/*===================================================
DNA ANIMATION
===================================================*/

.dna{

position:absolute;
display:flex;
flex-direction:column;
justify-content:space-between;
height:220px;
width:24px;
opacity:.22;
z-index:2;

}

.dna span{

width:10px;
height:10px;
border-radius:50%;
background:#48d9ff;
box-shadow:
0 0 12px #48d9ff,
0 0 25px rgba(72,217,255,.5);

animation:dnaMove 2s ease-in-out infinite alternate;

}

.dna span:nth-child(even){

animation-delay:.4s;

}

.dna1{

left:6%;
top:18%;
transform:rotate(-12deg);

}

.dna2{

right:8%;
bottom:15%;
transform:rotate(12deg);

}

@keyframes dnaMove{

0%{

transform:translateX(-10px);

}

100%{

transform:translateX(10px);

}

}

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

.medical-icon{

position:absolute;
width:78px;
height:78px;

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

border-radius:24px;

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

backdrop-filter:blur(18px);

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

box-shadow:
0 18px 40px rgba(0,0,0,.30);

color:#43d5ff;

font-size:32px;

animation:medicalFloat 6s ease-in-out infinite;

z-index:5;

}

.icon1{

top:18%;
left:7%;

}

.icon2{

top:65%;
left:10%;

animation-delay:1s;

}

.icon3{

top:16%;
right:11%;

animation-delay:2s;

}

.icon4{

bottom:12%;
right:14%;

animation-delay:3s;

}

.icon5{

top:50%;
right:3%;

animation-delay:4s;

}

@keyframes medicalFloat{

0%,100%{

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

}

50%{

transform:translateY(-18px) rotate(8deg);

}

}

/*===================================================
MEDICAL PLUS
===================================================*/

.medical-plus{

position:absolute;

width:28px;
height:28px;

opacity:.25;

animation:plusFloat 10s linear infinite;

}

.medical-plus::before,
.medical-plus::after{

content:"";

position:absolute;

background:#41d6ff;

border-radius:2px;

}

.medical-plus::before{

width:28px;
height:4px;
top:12px;

}

.medical-plus::after{

height:28px;
width:4px;
left:12px;

}

.plus1{

left:22%;
top:24%;

}

.plus2{

right:25%;
top:65%;

animation-delay:2s;

}

.plus3{

left:58%;
bottom:18%;

animation-delay:4s;

}

@keyframes plusFloat{

0%{

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

}

50%{

transform:translateY(-20px) rotate(180deg);

}

100%{

transform:translateY(0) rotate(360deg);

}

}

/*===================================================
ECG LINE
===================================================*/

.ecg-line{

position:absolute;
left:0;
bottom:12%;
width:100%;
height:180px;
z-index:1;
opacity:.45;

}

.ecg-line path{

fill:none;
stroke:#3fdcff;
stroke-width:3;

filter:
drop-shadow(0 0 8px #3fdcff)
drop-shadow(0 0 18px rgba(63,220,255,.8));

stroke-dasharray:1600;
stroke-dashoffset:1600;

animation:ecgMove 6s linear infinite;

}

@keyframes ecgMove{

0%{

stroke-dashoffset:1600;

}

100%{

stroke-dashoffset:0;

}

}

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

.hero-left{

position:relative;
z-index:10;

}

.hero-tag{

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

padding:12px 24px;

border-radius:40px;

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

backdrop-filter:blur(20px);

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

color:#46d7ff;

font-weight:700;

letter-spacing:1px;

margin-bottom:24px;

}

.hero-left h1{

font-size:66px;
font-weight:800;

line-height:1.1;

color:#fff;

margin-bottom:22px;

}

.hero-left h1 br{

display:block;

}

.hero-left p{

font-size:18px;

line-height:1.9;

max-width:600px;

color:#d5e7f7;

margin-bottom:35px;

}

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

.hero-buttons{

display:flex;
flex-wrap:wrap;
gap:18px;

}

.hero-buttons .btn{

padding:15px 34px;

border-radius:50px;

font-weight:700;

transition:.35s;

}

.hero-buttons .btn-primary{

background:#18c8ff;
border-color:#18c8ff;

}

.hero-buttons .btn-primary:hover{

background:#00b2f2;
border-color:#00b2f2;

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(24,200,255,.35);

}

.hero-buttons .btn-outline-light:hover{

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(255,255,255,.12);

}

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

.hero-right{

position:relative;
z-index:5;

text-align:center;

}

.hero-image{

max-width:92%;

animation:medicalImage 6s ease-in-out infinite;

filter:

drop-shadow(0 30px 60px rgba(0,0,0,.45))

drop-shadow(0 0 40px rgba(63,220,255,.18));

}

@keyframes medicalImage{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

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

@media(max-width:992px){

.healthcare-hero{

padding:120px 0 80px;

text-align:center;

}

.hero-left{

margin-bottom:60px;

}

.hero-left h1{

font-size:48px;

}

.hero-left p{

margin:auto auto 30px;

}

.hero-buttons{

justify-content:center;

}

.medical-icon,
.dna{

display:none;

}

}

@media(max-width:768px){

.hero-left h1{

font-size:40px;

}

.hero-left p{

font-size:16px;

}

.hero-image{

max-width:85%;

}

}

@media(max-width:576px){

.hero-left h1{

font-size:34px;

}

.hero-tag{

font-size:14px;

padding:10px 18px;

}

.hero-buttons .btn{

width:100%;

}

}

/*===================================================
HEALTHCARE OVERVIEW
===================================================*/

.industry-overview{

background:#07111f;

}

.overview-image{

position:relative;
overflow:hidden;

border-radius:28px;

box-shadow:
0 30px 70px rgba(0,0,0,.35);

}

.overview-image img{

width:100%;

transition:.6s;

border-radius:28px;

}

.overview-image:hover img{

transform:scale(1.06);

}

.section-tag{

display:inline-block;

padding:8px 22px;

border-radius:30px;

background:#1bc8ff;

color:#06111d;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}

.industry-overview h2{

font-size:42px;

font-weight:700;

color:#fff;

margin-bottom:22px;

}

.industry-overview p{

color:#cdd9e9;

font-size:17px;

line-height:1.9;

}

.overview-buttons .btn{

padding:14px 32px;

border-radius:50px;

font-weight:700;

transition:.35s;

}

.overview-buttons .btn:hover{

transform:translateY(-4px);

}

.floating-stat{

position:absolute;

padding:16px 22px;

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

backdrop-filter:blur(18px);

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

border-radius:18px;

text-align:center;

box-shadow:
0 18px 40px rgba(0,0,0,.25);

animation:floatStat 5s ease-in-out infinite;

}

.stat-one{

top:25px;

left:25px;

}

.stat-two{

bottom:25px;

right:25px;

animation-delay:2s;

}

.floating-stat h3{

margin:0;

font-size:26px;

font-weight:700;

color:#1fd8ff;

}

.floating-stat span{

font-size:14px;

color:#fff;

}

@keyframes floatStat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/*===================================================
HEALTHCARE CHALLENGES
===================================================*/

.healthcare-challenges{

background:#091322;

}

.section-heading span{

display:inline-block;

color:#27d3ff;

font-weight:700;

letter-spacing:2px;

margin-bottom:12px;

}

.section-heading h2{

color:#fff;

font-size:42px;

font-weight:700;

margin-bottom:18px;

}

.section-heading p{

max-width:760px;

margin:auto;

color:#cfd9ea;

line-height:1.9;

}

.challenge-card{

position:relative;

height:100%;

padding:42px 34px;

border-radius:24px;

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

backdrop-filter:blur(20px);

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

overflow:hidden;

transition:.4s;

}

.challenge-card:hover{

transform:translateY(-12px);

border-color:#20d4ff;

box-shadow:

0 30px 70px rgba(32,212,255,.18);

}

.challenge-number{

position:absolute;

top:18px;

right:22px;

font-size:56px;

font-weight:800;

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

}

.challenge-icon{

width:82px;

height:82px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:

linear-gradient(135deg,#20d4ff,#0a7dff);

font-size:32px;

color:#fff;

margin-bottom:25px;

transition:.35s;

}

.challenge-card:hover .challenge-icon{

transform:rotate(10deg) scale(1.08);

}

.challenge-card h4{

color:#fff;

font-weight:700;

margin-bottom:16px;

}

.challenge-card p{

color:#cfd9ea;

line-height:1.9;

margin:0;

}

/*===================================================
HEALTHCARE SOLUTIONS
===================================================*/

.health-solutions{

    position:relative;
    padding:110px 0;
    background:
    linear-gradient(180deg,#061120 0%,#08192d 50%,#061120 100%);
    overflow:hidden;

}

.health-solutions::before{

    content:"";
    position:absolute;
    width:700px;
    height:700px;
    top:-250px;
    right:-250px;
    border-radius:50%;
    background:#00d4ff;
    filter:blur(170px);
    opacity:.08;

}

.health-solutions::after{

    content:"";
    position:absolute;
    width:500px;
    height:500px;
    left:-180px;
    bottom:-180px;
    border-radius:50%;
    background:#2563eb;
    filter:blur(160px);
    opacity:.08;

}

.health-solutions .section-heading{

    position:relative;
    z-index:2;

}

.health-solutions .section-heading span{

    color:#37d6ff;
    letter-spacing:2px;
    font-weight:700;

}

.health-solutions .section-heading h2{

    color:#fff;
    font-size:44px;
    font-weight:800;
    margin:18px 0;

}

.health-solutions .section-heading p{

    color:#c7d8ef;
    max-width:760px;
    margin:auto;
    line-height:1.9;

}

.health-solutions .solution-card{

    position:relative;
    height:100%;
    padding:40px 30px;
    border-radius:24px;

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

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

    backdrop-filter:blur(18px);

    transition:.45s;

    overflow:hidden;

}

.health-solutions .solution-card::before{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(130deg,
    rgba(0,212,255,.08),
    transparent 60%);
    opacity:0;
    transition:.4s;

}

.health-solutions .solution-card:hover{

    transform:translateY(-12px);

    border-color:#28d7ff;

    box-shadow:
    0 25px 60px rgba(0,212,255,.18);

}

.health-solutions .solution-card:hover::before{

    opacity:1;

}

.health-solutions .solution-icon{

    width:78px;
    height:78px;

    border-radius:22px;

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

    font-size:30px;

    color:#fff;

    margin-bottom:25px;

    background:
    linear-gradient(135deg,#00d4ff,#2b6cff);

    box-shadow:
    0 15px 35px rgba(0,212,255,.25);

}

.health-solutions .solution-card h4{

    color:#fff;
    font-size:24px;
    font-weight:700;
    margin-bottom:18px;

}

.health-solutions .solution-card p{

    color:#d2deef;
    line-height:1.8;
    margin:0;

}

/*===================================================
HEALTHCARE BENEFITS
===================================================*/

.industry-benefits{

    position:relative;
    padding:110px 0;
    overflow:hidden;

    background:
    linear-gradient(180deg,#071322 0%,#0a1d35 55%,#06111f 100%);

}

.industry-benefits::before{

    content:"";
    position:absolute;

    width:650px;
    height:650px;

    left:-220px;
    top:-220px;

    border-radius:50%;

    background:#00d4ff;

    filter:blur(170px);

    opacity:.08;

}

.industry-benefits::after{

    content:"";
    position:absolute;

    width:500px;
    height:500px;

    right:-180px;
    bottom:-180px;

    border-radius:50%;

    background:#2563eb;

    filter:blur(160px);

    opacity:.08;

}

/*=============================
Heading
=============================*/

.industry-benefits .section-heading{

    position:relative;
    z-index:2;

}

.industry-benefits .section-heading span{

    color:#39d9ff;
    font-weight:700;
    letter-spacing:2px;

}

.industry-benefits .section-heading h2{

    color:#fff;
    font-size:44px;
    font-weight:800;
    margin:18px 0;

}

.industry-benefits .section-heading h2 span{

    background:linear-gradient(90deg,#00d4ff,#5ee7ff);

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

}

.industry-benefits .section-heading p{

    color:#c8d8ea;
    max-width:760px;
    margin:auto;
    line-height:1.9;

}

/*=============================
Benefit Cards
=============================*/

.industry-benefits .benefit-card{

    position:relative;

    height:100%;

    padding:40px 30px;

    border-radius:24px;

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

    backdrop-filter:blur(20px);

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

    transition:.45s;

    overflow:hidden;

}

.industry-benefits .benefit-card::before{

    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(135deg,
    rgba(0,212,255,.12),
    transparent 65%);

    opacity:0;

    transition:.4s;

}

.industry-benefits .benefit-card:hover{

    transform:translateY(-12px);

    border-color:#27d7ff;

    box-shadow:
    0 25px 60px rgba(0,212,255,.18);

}

.industry-benefits .benefit-card:hover::before{

    opacity:1;

}

.industry-benefits .benefit-icon{

    width:80px;
    height:80px;

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

    border-radius:22px;

    margin-bottom:25px;

    color:#fff;

    font-size:32px;

    background:
    linear-gradient(135deg,#00d4ff,#2563eb);

    box-shadow:
    0 15px 35px rgba(0,212,255,.25);

    transition:.35s;

}

.industry-benefits .benefit-card:hover .benefit-icon{

    transform:rotate(10deg) scale(1.08);

}

.industry-benefits .benefit-card h4{

    color:#fff;

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

}

.industry-benefits .benefit-card p{

    color:#d3deef;

    line-height:1.8;

    margin:0;

}

/*=============================
Responsive
=============================*/

@media(max-width:768px){

.industry-benefits{

    padding:80px 0;

}

.industry-benefits .section-heading h2{

    font-size:32px;

}

.industry-benefits .benefit-card{

    padding:30px 24px;

}

.industry-benefits .benefit-icon{

    width:70px;
    height:70px;
    font-size:28px;

}

}

.services-section{
    position:relative;
    padding:110px 0;
    background:
        radial-gradient(circle at top left,#1b4fd320,transparent 45%),
        radial-gradient(circle at bottom right,#0ea5e920,transparent 40%),
        linear-gradient(180deg,#071327,#081b33);
    overflow:hidden;
}

.services-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:70px 70px;
    opacity:.3;
}

.services-section .section-heading{
    color:#fff;
}

.services-section .section-description,
.services-section p{
    color:#c7d6ef;
}

.services-section .service-card{

    position:relative;
    background:rgba(255,255,255,.06);

    backdrop-filter:blur(22px);

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

    border-radius:22px;

    overflow:hidden;

    transition:.45s;

    box-shadow:0 18px 45px rgba(0,0,0,.35);

}

.services-section .service-card:hover{

    transform:translateY(-10px);

    border-color:#1e90ff;

    box-shadow:
    0 25px 60px rgba(30,144,255,.28),
    0 0 40px rgba(30,144,255,.18);

}

.services-section .service-card h4{

    color:#fff;

}

.services-section .service-card p,

.services-section .service-card li{

    color:#c7d6ef;

}

.services-section .service-glow{

    position:absolute;
    width:220px;
    height:220px;

    background:radial-gradient(circle,#1e90ff55,transparent 70%);

    top:-100px;
    right:-100px;

    opacity:0;

    transition:.5s;

}

.services-section .service-card:hover .service-glow{

    opacity:1;

    transform:scale(1.2);

}

/*==================================================
TRUSTED SECTION - DARK
==================================================*/

.trusted-section{
    position:relative;
    padding:110px 0;
    background:
    radial-gradient(circle at left top,rgba(30,144,255,.14),transparent 38%),
    radial-gradient(circle at right bottom,rgba(0,255,255,.08),transparent 40%),
    linear-gradient(180deg,#071327,#081b33);
    overflow:hidden;
}

.trusted-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:70px 70px;
    opacity:.35;
}

.trusted-section .section-heading{
    color:#fff;
}

.trusted-section .section-description{
    color:#c9d8ef;
}

.logo-card{

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

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

    backdrop-filter:blur(16px);

    border-radius:18px;

    transition:.4s;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.logo-card:hover{

    transform:translateY(-8px);

    border-color:#1e90ff;

    box-shadow:
    0 20px 45px rgba(30,144,255,.25);

}

/*==================================================
ABOUT SECTION - PREMIUM DARK
==================================================*/

.about-home-section{

    position:relative;

    padding:120px 0;

    background:
    radial-gradient(circle at right top,rgba(0,180,255,.14),transparent 35%),
    radial-gradient(circle at left bottom,rgba(30,144,255,.08),transparent 40%),
    linear-gradient(180deg,#081b33,#071327);

    overflow:hidden;

}

.about-home-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);

    background-size:75px 75px;

}

.about-home-section .section-heading{

    color:#fff;

}

.about-home-section p{

    color:#c7d6ef;

}

.about-image-wrapper{

    position:relative;

}

.main-about-image{

    border-radius:24px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.45);

    transition:.5s;

}

.main-about-image:hover{

    transform:scale(1.02);

}

.main-about-image::after{

    content:"";

    position:absolute;

    inset:0;

}

.experience-card{

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

    backdrop-filter:blur(20px);

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

    color:#fff;

    box-shadow:
    0 15px 40px rgba(30,144,255,.22);

}

.feature-item{

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

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

    color:#fff;

    border-radius:14px;

    padding:14px 18px;

    margin-bottom:14px;

    transition:.35s;

}

.feature-item:hover{

    transform:translateX(10px);

    border-color:#1e90ff;

    background:rgba(30,144,255,.12);

}

.feature-item i{

    color:#43b8ff;

}

/*==================================================
HOME HERO - PREMIUM DARK VERSION
==================================================*/

.hero-section{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    display:flex;
    align-items:center;
    background:
        radial-gradient(circle at top left,#1b4cff 0%,transparent 35%),
        radial-gradient(circle at bottom right,#00b8ff 0%,transparent 30%),
        linear-gradient(135deg,#030712,#071327,#081b36,#020817);
    color:#fff;
}

/* animated grid */

.hero-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:70px 70px;
    animation:gridMove 30s linear infinite;
    opacity:.5;
}

/* vignette */

.hero-section::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle,transparent 40%,rgba(0,0,0,.55)100%);
    pointer-events:none;
}

/*=================================
Animated Gradient
=================================*/

.hero-gradient{
    position:absolute;
    inset:0;
    background:
    linear-gradient(135deg,
    rgba(13,110,253,.15),
    rgba(0,194,255,.12),
    rgba(0,0,0,0));
    animation:gradientMove 12s ease-in-out infinite;
}

/*=================================
Glowing Blobs
=================================*/

.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.35;
    animation:floatBlob 12s ease-in-out infinite;
}

.blob1{
    width:420px;
    height:420px;
    background:#0d6efd;
    top:-120px;
    left:-100px;
}

.blob2{
    width:360px;
    height:360px;
    background:#00b8ff;
    right:-80px;
    top:20%;
    animation-delay:3s;
}

.blob3{
    width:300px;
    height:300px;
    background:#5d4dff;
    bottom:-80px;
    left:40%;
    animation-delay:6s;
}

/*=================================
Grid Overlay
=================================*/

.grid-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:90px 90px;
    animation:gridMove 18s linear infinite;
    pointer-events:none;
}

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

.hero-section .container{
    position:relative;
    z-index:10;
}

.hero-title{
    color:#fff;
}

.hero-description{
    color:rgba(255,255,255,.82);
}

.hero-badge{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
}

.gradient-text{
    background:linear-gradient(90deg,#41d8ff,#0d6efd,#84f5ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

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

.hero-image{
    animation:heroFloat 6s ease-in-out infinite;
    filter:drop-shadow(0 40px 80px rgba(0,140,255,.35));
}

/*=================================
Floating Cards
=================================*/

.floating-card{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    transition:.4s;
}

.floating-card:hover{
    transform:translateY(-10px) scale(1.04);
    box-shadow:0 25px 70px rgba(0,174,255,.35);
}

.floating-card i{
    color:#45d7ff;
}

/*=================================
Statistics
=================================*/

.stat-box{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(20px);
}

.stat-box h2{
    color:#44d7ff;
}

.stat-box span{
    color:rgba(255,255,255,.75);
}

/*=================================
Buttons
=================================*/

.hero-buttons .btn-primary{
    background:linear-gradient(135deg,#0d6efd,#00b8ff);
    border:none;
    box-shadow:0 12px 35px rgba(13,110,253,.35);
}

.hero-buttons .btn-primary:hover{
    transform:translateY(-4px);
}

.hero-buttons .btn-outline-light{
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(12px);
}

/*=================================
Animations
=================================*/

@keyframes heroFloat{

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

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

}

@keyframes floatBlob{

0%,100%{
transform:translate(0,0) scale(1);
}

50%{
transform:translate(40px,-30px) scale(1.15);
}

}

@keyframes gradientMove{

0%,100%{
transform:rotate(0deg) scale(1);
}

50%{
transform:rotate(8deg) scale(1.1);
}

}

@keyframes gridMove{

from{
transform:translateY(0);
}

to{
transform:translateY(70px);
}

}

/*==================================================
TRUSTED SECTION - PREMIUM DARK
==================================================*/

.trusted-section{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:
    radial-gradient(circle at top right,
    rgba(13,110,253,.18),
    transparent 35%),
    linear-gradient(180deg,#071327,#081a30,#07101f);
}

/* Background Glow */

.trusted-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:#0d6efd;
    filter:blur(120px);
    opacity:.18;
    top:-160px;
    left:-120px;
}

.trusted-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:#00c6ff;
    filter:blur(100px);
    opacity:.15;
    bottom:-120px;
    right:-80px;
}

.trusted-section .container{
    position:relative;
    z-index:5;
}

/*==================================
Heading
==================================*/

.trusted-section .section-tag{

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

    color:#54d8ff;

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

    backdrop-filter:blur(18px);

    padding:8px 18px;

    border-radius:40px;

    display:inline-block;

    margin-bottom:18px;

}

.trusted-section .section-heading{

    color:#fff;

}

.trusted-section .section-description{

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

}

/*==================================
Marquee
==================================*/

.logo-marquee{

    position:relative;

    overflow:hidden;

    margin-top:60px;

}

.logo-track{

    display:flex;

    gap:28px;

    animation:logoScroll 28s linear infinite;

}

/*==================================
Logo Cards
==================================*/

.logo-card{

    flex:0 0 auto;

    width:180px;

    height:100px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(20px);

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

    border-radius:18px;

    transition:.4s;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.logo-card:hover{

    transform:translateY(-8px);

    background:rgba(13,110,253,.18);

    box-shadow:0 20px 45px rgba(0,180,255,.30);

}

.logo-card img{

    max-width:120px;

    max-height:55px;

    object-fit:contain;

    filter:grayscale(100%) brightness(2);

    opacity:.8;

    transition:.4s;

}

.logo-card:hover img{

    filter:none;

    opacity:1;

    transform:scale(1.08);

}

/*==================================
Fade Effect
==================================*/

.marquee-fade{

    position:absolute;

    top:0;

    width:160px;

    height:100%;

    z-index:3;

}

.marquee-fade.left{

    left:0;

    background:linear-gradient(to right,#071327 0%,transparent);

}

.marquee-fade.right{

    right:0;

    background:linear-gradient(to left,#071327 0%,transparent);

}

/*==================================
Animation
==================================*/

@keyframes logoScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*==================================================
ABOUT HOME - PREMIUM DARK
==================================================*/

.about-home-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(circle at left center,
        rgba(13,110,253,.18),
        transparent 35%),
        radial-gradient(circle at right bottom,
        rgba(0,198,255,.10),
        transparent 35%),
        linear-gradient(180deg,#07101f,#091a31,#06101e);
}

.about-home-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:#0d6efd;
    filter:blur(130px);
    opacity:.15;
    top:-160px;
    right:-120px;
}

.about-home-section::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:70px 70px;
    animation:gridMove 24s linear infinite;
    opacity:.45;
}

.about-home-section .container{
    position:relative;
    z-index:5;
}

/*==============================
Section Heading
==============================*/

.about-home-section .section-tag{

    display:inline-block;
    padding:8px 18px;
    border-radius:40px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#53d7ff;
    backdrop-filter:blur(15px);
    margin-bottom:18px;

}

.about-home-section .section-heading{

    color:#fff;
    margin-bottom:25px;

}

.about-home-section p{

    color:rgba(255,255,255,.75);
    line-height:1.9;

}

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

.about-image-wrapper{

    position:relative;

}

.main-about-image{

    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 35px 80px rgba(0,0,0,.40);
    transition:.5s;

}

.main-about-image:hover{

    transform:translateY(-10px);

}

/*==============================
Experience Card
==============================*/

.experience-card{

    position:absolute;
    bottom:35px;
    right:-20px;

    padding:22px 30px;

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

    backdrop-filter:blur(22px);

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

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.experience-card h2{

    color:#44d8ff;
    font-size:42px;
    margin-bottom:5px;

}

.experience-card span{

    color:#fff;
    font-size:15px;

}

/*==============================
Features
==============================*/

.about-features{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:35px;

}

.feature-item{

    display:flex;
    align-items:center;

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

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

    backdrop-filter:blur(18px);

    padding:15px 18px;

    border-radius:14px;

    color:#fff;

    transition:.35s;

}

.feature-item:hover{

    transform:translateX(8px);
    background:rgba(13,110,253,.18);
    box-shadow:0 15px 35px rgba(0,170,255,.25);

}

.feature-item i{

    color:#44d8ff;
    margin-right:12px;
    font-size:18px;

}

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

.about-home-section .btn-primary{

    margin-top:35px;
    background:linear-gradient(135deg,#0d6efd,#00bfff);
    border:none;
    box-shadow:0 12px 30px rgba(13,110,253,.35);

}

.about-home-section .btn-primary:hover{

    transform:translateY(-4px);

}

/*==================================================
SERVICES SECTION - PREMIUM DARK
==================================================*/

.services-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(circle at top left,
        rgba(13,110,253,.16),
        transparent 35%),
        radial-gradient(circle at bottom right,
        rgba(0,198,255,.12),
        transparent 35%),
        linear-gradient(180deg,#06101d,#081a30,#06101d);
}

.services-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:#0d6efd;
    border-radius:50%;
    filter:blur(140px);
    opacity:.12;
    top:-180px;
    left:-150px;
}

.services-section::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:80px 80px;
    animation:gridMove 24s linear infinite;
    opacity:.35;
}

.services-section .container{
    position:relative;
    z-index:5;
}

/*==================================
Heading
==================================*/

.services-section .section-tag{

    display:inline-block;
    padding:8px 20px;
    border-radius:50px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(15px);
    color:#4fd7ff;
    margin-bottom:18px;

}

.services-section .section-heading{

    color:#fff;

}

.services-section .section-description{

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

}

/*==================================
Service Card
==================================*/

.services-section .service-card{

    position:relative;
    overflow:hidden;
    height:100%;

    padding:40px 30px;

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

    backdrop-filter:blur(18px);

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

    border-radius:24px;

    transition:.45s;

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.services-section .service-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,183,255,.35);

    box-shadow:
        0 25px 60px rgba(0,170,255,.18),
        0 0 40px rgba(13,110,253,.15);

}

/* top glow */

.services-section .service-glow{

    position:absolute;
    width:180px;
    height:180px;

    top:-90px;
    right:-90px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(13,110,253,.55),
    transparent 70%);

    opacity:0;

    transition:.5s;

}

.services-section .service-card:hover .service-glow{

    opacity:1;

}

/*==================================
Icon
==================================*/

.services-section .service-icon{

    width:75px;
    height:75px;

    border-radius:20px;

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

    margin-bottom:25px;

    background:linear-gradient(135deg,#0d6efd,#00c8ff);

    color:#fff;

    font-size:28px;

    box-shadow:0 10px 30px rgba(13,110,253,.35);

}

.services-section .service-card:hover .service-icon{

    transform:rotateY(180deg);

    transition:.6s;

}

/*==================================
Typography
==================================*/

.services-section .service-card h4{

    color:#fff;
    margin-bottom:18px;

}

.services-section .service-card p{

    color:rgba(255,255,255,.72);
    line-height:1.8;

}

.services-section .service-card ul{

    margin:25px 0;
    padding-left:18px;

}

.services-section .service-card li{

    color:rgba(255,255,255,.75);
    margin-bottom:10px;

}

.services-section .service-card li::marker{

    color:#42d7ff;

}

/*==================================
Learn More
==================================*/

.services-section .service-card a{

    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#47d8ff;
    text-decoration:none;
    font-weight:600;

    transition:.3s;

}

.services-section .service-card a:hover{

    gap:18px;
    color:#fff;

}

/*==================================================
TECHNOLOGY SECTION - PREMIUM DARK
==================================================*/

.technology-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(circle at top right,
        rgba(13,110,253,.16),
        transparent 35%),
        radial-gradient(circle at bottom left,
        rgba(0,198,255,.12),
        transparent 35%),
        linear-gradient(180deg,#071426,#081b32,#06101e);
}

.technology-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:#0d6efd;
    filter:blur(140px);
    opacity:.12;
    top:-180px;
    right:-150px;
}

.technology-section::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:80px 80px;
    animation:gridMove 22s linear infinite;
    opacity:.35;
}

.technology-section .container{
    position:relative;
    z-index:5;
}

/*==================================
Heading
==================================*/

.technology-section .section-tag{

    display:inline-block;
    padding:8px 18px;
    border-radius:40px;

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

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

    backdrop-filter:blur(15px);

    color:#4fd8ff;

    margin-bottom:18px;

}

.technology-section .section-heading{

    color:#fff;

}

.technology-section .section-description{

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

}

/*==================================
Technology Cards
==================================*/

.tech-card{

    position:relative;

    overflow:hidden;

    height:100%;

    padding:40px 28px;

    border-radius:24px;

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

    backdrop-filter:blur(18px);

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

    transition:.45s;

    box-shadow:0 18px 45px rgba(0,0,0,.28);

}

.tech-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,183,255,.35);

    box-shadow:
        0 25px 60px rgba(0,180,255,.20),
        0 0 35px rgba(13,110,253,.18);

}

/* Animated Glow */

.tech-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:radial-gradient(circle,
    rgba(13,110,253,.45),
    transparent 70%);

    top:-90px;

    right:-90px;

    opacity:0;

    transition:.5s;

}

.tech-card:hover::before{

    opacity:1;

}

/*==================================
Icon
==================================*/

.tech-icon{

    width:80px;

    height:80px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    background:linear-gradient(135deg,#0d6efd,#00c8ff);

    color:#fff;

    font-size:30px;

    transition:.5s;

    box-shadow:0 12px 30px rgba(13,110,253,.35);

}

.tech-card:hover .tech-icon{

    transform:rotateY(180deg) scale(1.08);

}

/*==================================
Text
==================================*/

.tech-card h4{

    color:#fff;

    margin-bottom:18px;

}

.tech-card p{

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

    line-height:1.8;

}

/*==================================================
INDUSTRIES SECTION - PREMIUM DARK
==================================================*/

.industries-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(circle at left top,
        rgba(13,110,253,.16),
        transparent 35%),
        radial-gradient(circle at right bottom,
        rgba(0,198,255,.10),
        transparent 35%),
        linear-gradient(180deg,#06101d,#081a30,#07101f);
}

.industries-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:#0d6efd;
    filter:blur(150px);
    opacity:.12;
    left:-180px;
    top:-180px;
}

.industries-section::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:80px 80px;
    animation:gridMove 25s linear infinite;
    opacity:.35;
}

.industries-section .container{
    position:relative;
    z-index:5;
}

/*=================================
Heading
=================================*/

.industries-section .section-tag{

    display:inline-block;
    padding:8px 18px;
    border-radius:40px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(15px);
    color:#53d8ff;
    margin-bottom:18px;

}

.industries-section .section-heading{

    color:#fff;

}

.industries-section p{

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

}

/*=================================
Industry Card
=================================*/

.industry-card{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:24px;

    height:340px;

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

    background:#08121f;

    transition:.45s;

    box-shadow:0 18px 45px rgba(0,0,0,.30);

}

.industry-card:hover{

    transform:translateY(-12px);

    box-shadow:
        0 28px 70px rgba(0,174,255,.20),
        0 0 35px rgba(13,110,253,.18);

}

.industry-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.industry-card:hover img{

    transform:scale(1.12);

}

/* Dark Overlay */

.industry-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(to top,
    rgba(3,10,25,.95),
    rgba(5,18,40,.45),
    rgba(0,0,0,.15));

    z-index:1;

}

/* Blue Glow */

.industry-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(13,110,253,.45),
    transparent 70%);

    top:-110px;

    right:-110px;

    opacity:0;

    transition:.45s;

    z-index:2;

}

.industry-card:hover::after{

    opacity:1;

}

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

.industry-content{

    position:absolute;

    left:30px;

    right:30px;

    bottom:30px;

    z-index:3;

}

.industry-content i{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    margin-bottom:20px;

    font-size:28px;

    background:linear-gradient(135deg,#0d6efd,#00c8ff);

    color:#fff;

    transition:.45s;

    box-shadow:0 12px 30px rgba(13,110,253,.35);

}

.industry-card:hover .industry-content i{

    transform:rotateY(180deg);

}

.industry-content h4{

    color:#fff;

    margin-bottom:12px;

}

.industry-content p{

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

    margin-bottom:0;

    line-height:1.7;

}

/*==================================================
WHY CHOOSE US - PREMIUM DARK
==================================================*/

.why-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(circle at top right,
        rgba(13,110,253,.18),
        transparent 35%),
        radial-gradient(circle at bottom left,
        rgba(0,198,255,.10),
        transparent 35%),
        linear-gradient(180deg,#071326,#081c34,#06101d);
}

.why-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:#0d6efd;
    filter:blur(150px);
    opacity:.12;
    top:-180px;
    right:-180px;
}

.why-section::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:80px 80px;
    animation:gridMove 22s linear infinite;
    opacity:.35;
}

.why-section .container{
    position:relative;
    z-index:5;
}

/*==========================
Heading
==========================*/

.why-section .section-tag{

    display:inline-block;
    padding:8px 20px;
    border-radius:40px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(15px);
    color:#52d8ff;
    margin-bottom:18px;

}

.why-section .section-heading{

    color:#fff;

}

.why-section .section-description{

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

}

/*==========================
Cards
==========================*/

.why-card{

    position:relative;
    overflow:hidden;

    height:100%;

    padding:40px 30px;

    border-radius:24px;

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

    backdrop-filter:blur(20px);

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

    transition:.45s;

    box-shadow:0 18px 45px rgba(0,0,0,.25);

}

.why-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,183,255,.35);

    box-shadow:
        0 25px 60px rgba(0,174,255,.22),
        0 0 35px rgba(13,110,253,.18);

}

/* glow */

.why-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(13,110,253,.5),
    transparent 70%);

    top:-90px;

    right:-90px;

    opacity:0;

    transition:.45s;

}

.why-card:hover::before{

    opacity:1;

}

/*==========================
Icon
==========================*/

.why-icon{

    width:78px;
    height:78px;

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

    border-radius:22px;

    margin-bottom:25px;

    background:linear-gradient(135deg,#0d6efd,#00c8ff);

    color:#fff;

    font-size:30px;

    box-shadow:0 12px 30px rgba(13,110,253,.35);

    transition:.45s;

}

.why-card:hover .why-icon{

    transform:rotateY(180deg) scale(1.08);

}

/*==========================
Text
==========================*/

.why-card h4{

    color:#fff;
    margin-bottom:18px;

}

.why-card p{

    color:rgba(255,255,255,.72);
    line-height:1.8;

}

/*==================================================
PROCESS SECTION - PREMIUM DARK
==================================================*/

.process-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:
        radial-gradient(circle at left center,
        rgba(13,110,253,.16),
        transparent 35%),
        radial-gradient(circle at right bottom,
        rgba(0,198,255,.10),
        transparent 35%),
        linear-gradient(180deg,#06101d,#081b33,#06101d);
}

.process-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:#0d6efd;
    filter:blur(150px);
    opacity:.12;
    left:-180px;
    top:-180px;
}

.process-section::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:80px 80px;
    animation:gridMove 24s linear infinite;
    opacity:.35;
}

.process-section .container{
    position:relative;
    z-index:5;
}

/*==================================
Heading
==================================*/

.process-section .section-tag{

    display:inline-block;
    padding:8px 18px;
    border-radius:40px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(15px);
    color:#52d8ff;
    margin-bottom:18px;

}

.process-section .section-heading{

    color:#fff;

}

.process-section p{

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

}

/*==================================
Timeline
==================================*/

.process-timeline{

    display:grid;

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

    gap:30px;

    margin-top:70px;

    position:relative;

}

.process-timeline::before{

    content:"";

    position:absolute;

    left:8%;

    right:8%;

    top:55px;

    height:3px;

    background:linear-gradient(to right,
    #0d6efd,
    #00c8ff);

    opacity:.35;

}

/*==================================
Step Card
==================================*/

.process-step{

    position:relative;

    padding:35px 25px;

    text-align:center;

    border-radius:24px;

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

    backdrop-filter:blur(18px);

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

    transition:.45s;

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.process-step:hover{

    transform:translateY(-12px);

    border-color:rgba(0,183,255,.35);

    box-shadow:
    0 25px 60px rgba(0,170,255,.20),
    0 0 35px rgba(13,110,253,.18);

}

/*==================================
Number
==================================*/

.step-number{

    width:82px;

    height:82px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0d6efd,#00c8ff);

    color:#fff;

    font-size:28px;

    font-weight:700;

    box-shadow:0 12px 35px rgba(13,110,253,.35);

    transition:.45s;

    position:relative;

    z-index:3;

}

.process-step:hover .step-number{

    transform:scale(1.12) rotate(10deg);

}

/*==================================
Text
==================================*/

.process-step h4{

    color:#fff;

    margin-bottom:18px;

}

.process-step p{

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

    line-height:1.8;

}

/*==================================
Responsive
==================================*/

@media(max-width:992px){

.process-timeline{

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

}

.process-timeline::before{

display:none;

}

}

@media(max-width:576px){

.process-timeline{

grid-template-columns:1fr;

}

}

/*==================================================
OUR PROCESS - PREMIUM DARK
==================================================*/

.process-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(circle at top right,#0b5ed7 0%,transparent 35%),
        radial-gradient(circle at bottom left,#123a86 0%,transparent 35%),
        linear-gradient(135deg,#061221,#08172d,#0a1d37);
}

.process-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:70px 70px;
    animation:gridMove 20s linear infinite;
    opacity:.22;
}

.process-section .section-tag{
    color:#79d4ff;
    background:rgba(11,94,215,.15);
    border:1px solid rgba(121,212,255,.35);
}

.process-section .section-heading{
    color:#fff;
}

.process-section p{
    color:#c6d6eb;
}

/* Timeline */

.process-timeline{
    margin-top:70px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
    position:relative;
}

.process-timeline::before{
    content:"";
    position:absolute;
    left:6%;
    right:6%;
    top:52px;
    height:3px;
    background:linear-gradient(90deg,#0b5ed7,#42c5ff,#0b5ed7);
    box-shadow:0 0 25px rgba(11,94,215,.5);
    z-index:0;
}

/* Cards */

.process-step{
    position:relative;
    z-index:2;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;
    padding:70px 25px 35px;
    text-align:center;
    transition:.45s;
}

.process-step::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:radial-gradient(circle,#0b5ed7 0%,transparent 70%);
    right:-120px;
    top:-120px;
    opacity:.15;
    transition:.5s;
}

.process-step:hover{
    transform:translateY(-12px);
    border-color:#0b5ed7;
    box-shadow:0 20px 45px rgba(11,94,215,.30);
}

.process-step:hover::before{
    transform:scale(1.4);
    opacity:.35;
}

/* Step Number */

.step-number{
    position:absolute;
    top:-22px;
    left:50%;
    transform:translateX(-50%);
    width:72px;
    height:72px;
    border-radius:50%;
    background:linear-gradient(135deg,#0b5ed7,#3cb8ff);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    font-weight:700;
    box-shadow:0 0 28px rgba(11,94,215,.45);
    border:4px solid #08172d;
}

.process-step h4{
    color:#fff;
    margin-bottom:15px;
    font-size:22px;
}

.process-step p{
    color:#c6d6eb;
    margin:0;
    line-height:1.8;
}

/* Responsive */

@media(max-width:991px){

.process-timeline{
    grid-template-columns:repeat(2,1fr);
}

.process-timeline::before{
    display:none;
}

}

@media(max-width:767px){

.process-timeline{
    grid-template-columns:1fr;
}

}

/*==================================================
FEATURED CASE STUDIES - PREMIUM DARK
==================================================*/

.case-study-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(circle at top left,#0b5ed7 0%,transparent 35%),
        radial-gradient(circle at bottom right,#143b86 0%,transparent 35%),
        linear-gradient(135deg,#071327,#08182d,#0b1831);
}

.case-study-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:70px 70px;
    animation:gridMove 20s linear infinite;
    opacity:.22;
}

.case-study-section .section-tag{
    color:#7fd6ff;
    background:rgba(11,94,215,.15);
    border:1px solid rgba(127,214,255,.35);
}

.case-study-section .section-heading{
    color:#fff;
}

.case-study-section .section-description{
    color:#bfd0e5;
}

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

.case-card{
    position:relative;
    overflow:hidden;
    border-radius:26px;
    background:#0d203b;
    border:1px solid rgba(255,255,255,.08);
    transition:.45s;
    height:100%;
    box-shadow:0 18px 40px rgba(0,0,0,.30);
}

.case-card img{
    width:100%;
    height:360px;
    object-fit:cover;
    transition:.8s;
    display:block;
}

.case-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(to top,
        rgba(4,12,25,.98),
        rgba(4,12,25,.65),
        rgba(4,12,25,.15));
}

.case-card:hover{
    transform:translateY(-12px);
    border-color:#0b5ed7;
    box-shadow:0 25px 60px rgba(11,94,215,.28);
}

.case-card:hover img{
    transform:scale(1.12);
}

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

.case-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:35px;
    z-index:5;
}

.case-overlay span{
    display:inline-block;
    padding:7px 16px;
    margin-bottom:18px;
    border-radius:40px;
    background:rgba(11,94,215,.22);
    border:1px solid rgba(81,183,255,.4);
    color:#84d6ff;
    font-size:13px;
    letter-spacing:.5px;
}

.case-overlay h4{
    color:#fff;
    font-size:25px;
    margin-bottom:16px;
    line-height:1.35;
}

.case-overlay p{
    color:#c5d4e8;
    line-height:1.8;
    margin-bottom:25px;
}

.case-overlay a{
    color:#57b7ff;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.case-overlay a i{
    margin-left:8px;
    transition:.35s;
}

.case-overlay a:hover{
    color:#fff;
}

.case-overlay a:hover i{
    transform:translateX(6px);
}

/*==========================
GLOW
==========================*/

.case-card::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle,#0b5ed7 0%,transparent 70%);
    right:-120px;
    top:-120px;
    opacity:.14;
    z-index:2;
    transition:.5s;
}

.case-card:hover::before{
    transform:scale(1.4);
    opacity:.30;
}

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

@media(max-width:991px){

.case-card img{
    height:300px;
}

}

@media(max-width:767px){

.case-card img{
    height:250px;
}

.case-overlay{
    padding:25px;
}

.case-overlay h4{
    font-size:22px;
}

}

/*==================================================
GLOBAL PRESENCE - PREMIUM DARK
==================================================*/

.global-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(circle at top right,#0b5ed7 0%,transparent 35%),
        radial-gradient(circle at bottom left,#123b87 0%,transparent 35%),
        linear-gradient(135deg,#061221,#08182e,#0a1d37);
}

.global-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:70px 70px;
    animation:gridMove 20s linear infinite;
    opacity:.22;
}

.global-section .section-tag{
    color:#80d7ff;
    background:rgba(11,94,215,.15);
    border:1px solid rgba(128,215,255,.35);
}

.global-section .section-heading{
    color:#fff;
}

.global-section p{
    color:#c5d6eb;
}

/*==========================
COUNTERS
==========================*/

.global-counter{
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;
    padding:30px;
    text-align:center;
    transition:.45s;
    height:100%;
}

.global-counter::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-110px;
    top:-110px;
    border-radius:50%;
    background:radial-gradient(circle,#0b5ed7 0%,transparent 70%);
    opacity:.15;
    transition:.5s;
}

.global-counter:hover{
    transform:translateY(-10px);
    border-color:#0b5ed7;
    box-shadow:0 20px 45px rgba(11,94,215,.28);
}

.global-counter:hover::before{
    transform:scale(1.4);
    opacity:.32;
}

.global-counter h2{
    color:#fff;
    font-size:42px;
    font-weight:700;
    margin-bottom:10px;
}

.global-counter p{
    margin:0;
    color:#a9bfd8;
    font-size:15px;
}

/*==========================
WORLD MAP
==========================*/

.world-map{
    max-width:100%;
    animation:floatMap 7s ease-in-out infinite;
    filter:
        drop-shadow(0 0 18px rgba(11,94,215,.35))
        drop-shadow(0 0 40px rgba(11,94,215,.25));
}

@keyframes floatMap{

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

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

}

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

.global-section .col-lg-6:last-child{
    position:relative;
}

.global-section .col-lg-6:last-child::before{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:1px dashed rgba(74,177,255,.22);
    animation:rotateOrbit 30s linear infinite;
}

.global-section .col-lg-6:last-child::after{
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(11,94,215,.18),transparent 70%);
    z-index:-1;
}

@keyframes rotateOrbit{

from{
    transform:translate(-50%,-50%) rotate(0deg);
}

to{
    transform:translate(-50%,-50%) rotate(360deg);
}

}

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

@media(max-width:991px){

.global-counter{
    margin-bottom:20px;
}

.world-map{
    margin-top:50px;
}

.global-section .col-lg-6:last-child::before{
    width:360px;
    height:360px;
}

}

/*==================================================
CLIENT TESTIMONIALS - PREMIUM DARK
==================================================*/

.testimonial-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(circle at top left,#0b5ed7 0%,transparent 35%),
        radial-gradient(circle at bottom right,#123c88 0%,transparent 35%),
        linear-gradient(135deg,#071327,#08182d,#0b1932);
}

.testimonial-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:70px 70px;
    animation:gridMove 20s linear infinite;
    opacity:.22;
}

.testimonial-section .section-tag{
    color:#7fd7ff;
    background:rgba(11,94,215,.15);
    border:1px solid rgba(127,215,255,.35);
}

.testimonial-section .section-heading{
    color:#fff;
}

.testimonial-section p{
    color:#c6d6eb;
}

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

.testimonial-card{
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.10);
    border-radius:26px;
    padding:40px 35px;
    height:100%;
    transition:.45s;
}

.testimonial-card::before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    right:-120px;
    top:-120px;
    border-radius:50%;
    background:radial-gradient(circle,#0b5ed7 0%,transparent 70%);
    opacity:.14;
    transition:.5s;
}

.testimonial-card:hover{
    transform:translateY(-12px);
    border-color:#0b5ed7;
    box-shadow:0 22px 50px rgba(11,94,215,.28);
}

.testimonial-card:hover::before{
    transform:scale(1.45);
    opacity:.32;
}

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

.quote{
    width:72px;
    height:72px;
    border-radius:50%;
    background:linear-gradient(135deg,#0b5ed7,#39b8ff);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
    margin-bottom:25px;
    box-shadow:0 0 28px rgba(11,94,215,.45);
}

.testimonial-card p{
    color:#d0ddee;
    line-height:1.9;
    margin-bottom:35px;
}

/*==========================
CLIENT
==========================*/

.client-info{
    display:flex;
    align-items:center;
    gap:18px;
    border-top:1px solid rgba(255,255,255,.10);
    padding-top:22px;
}

.client-info img{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid rgba(11,94,215,.5);
    box-shadow:0 0 18px rgba(11,94,215,.35);
}

.client-info h5{
    color:#fff;
    margin-bottom:4px;
    font-size:18px;
}

.client-info span{
    color:#87cfff;
    font-size:14px;
}

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

@media(max-width:991px){

.testimonial-card{
    margin-bottom:25px;
}

}

@media(max-width:767px){

.testimonial-card{
    padding:30px 25px;
}

.quote{
    width:60px;
    height:60px;
    font-size:24px;
}

.client-info img{
    width:60px;
    height:60px;
}

}

/*==================================================
AWARDS - PREMIUM DARK
==================================================*/

.awards-section{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:
        radial-gradient(circle at top center,#0b5ed7 0%,transparent 35%),
        linear-gradient(135deg,#061221,#08182d,#0b1a33);
}

.awards-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:70px 70px;
    animation:gridMove 20s linear infinite;
    opacity:.22;
}

.awards-section .section-tag{
    color:#80d7ff;
    background:rgba(11,94,215,.15);
    border:1px solid rgba(128,215,255,.35);
}

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

.award-card{
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;
    padding:45px 25px;
    text-align:center;
    transition:.45s;
    height:100%;
}

.award-card::before{
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    right:-120px;
    top:-120px;
    border-radius:50%;
    background:radial-gradient(circle,#0b5ed7 0%,transparent 70%);
    opacity:.14;
    transition:.45s;
}

.award-card:hover{
    transform:translateY(-12px);
    border-color:#0b5ed7;
    box-shadow:0 22px 55px rgba(11,94,215,.30);
}

.award-card:hover::before{
    transform:scale(1.4);
    opacity:.30;
}

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

.award-card i{
    width:90px;
    height:90px;
    margin:auto auto 25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0b5ed7,#3ab9ff);
    color:#fff;
    font-size:34px;
    box-shadow:0 0 30px rgba(11,94,215,.45);
    transition:.45s;
}

.award-card:hover i{
    transform:rotateY(180deg) scale(1.08);
}

.award-card h4{
    color:#fff;
    font-size:22px;
    margin:0;
    font-weight:600;
}

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

@media(max-width:991px){

.award-card{
    margin-bottom:25px;
}

}

@media(max-width:767px){

.award-card{
    padding:35px 20px;
}

.award-card i{
    width:75px;
    height:75px;
    font-size:28px;
}

.award-card h4{
    font-size:20px;
}

}



.about-home-section{
    position:relative;
}

.about-home-section::before,
.about-home-section::after{
    pointer-events:none;
}

.about-home-section::before{
    z-index:0;
}

.about-home-section > *{
    position:relative;
    z-index:2;
}


/*==================================================
SERVICES ABOUT SECTION
==================================================*/

.about-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(circle at top left,
        rgba(0,123,255,.16) 0%,
        transparent 35%),
        radial-gradient(circle at bottom right,
        rgba(0,195,255,.12) 0%,
        transparent 40%),
        linear-gradient(135deg,#071327 0%,#0b1832 45%,#08111f 100%);
}

/* animated grid */

.about-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:60px 60px;
    opacity:.35;
    pointer-events:none;
}

/* glow */

.about-section::after{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    top:-220px;
    right:-220px;
    background:radial-gradient(circle,
    rgba(0,140,255,.18),
    transparent 70%);
    filter:blur(40px);
    animation:aboutGlow 12s ease-in-out infinite alternate;
}

@keyframes aboutGlow{

    from{
        transform:translateY(0) scale(1);
    }

    to{
        transform:translateY(40px) scale(1.15);
    }

}

/* floating blobs */

.about-section .blob{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    z-index:0;
}

.about-section .blob1{
    width:300px;
    height:300px;
    left:-100px;
    top:80px;
    background:rgba(0,123,255,.22);
    animation:floatBlob 10s infinite alternate ease-in-out;
}

.about-section .blob2{
    width:260px;
    height:260px;
    right:-80px;
    bottom:40px;
    background:rgba(0,200,255,.18);
    animation:floatBlob 9s infinite alternate ease-in-out;
}

@keyframes floatBlob{

    from{
        transform:translateY(0) scale(1);
    }

    to{
        transform:translateY(-35px) scale(1.15);
    }

}

.about-section .container{
    position:relative;
    z-index:2;
}

/* headings */

.about-section .section-tag{
    background:linear-gradient(90deg,#1e88ff,#21d4fd);
    color:#fff;
    padding:12px 28px;
    border-radius:40px;
    display:inline-block;
    font-weight:600;
    letter-spacing:1px;
    box-shadow:0 0 30px rgba(33,212,253,.30);
}

.about-section .section-heading{
    color:#fff;
    font-size:3rem;
    margin:30px 0;
}

.about-section .section-description{
    color:rgba(255,255,255,.78);
    line-height:2;
    font-size:1.08rem;
}

/* feature cards */

.about-feature{
    display:flex;
    gap:22px;
    align-items:flex-start;
    margin-bottom:35px;
    padding:25px;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    transition:.45s;
}

.about-feature:hover{
    transform:translateY(-10px);
    border-color:#1e88ff;
    box-shadow:0 25px 60px rgba(0,140,255,.22);
}

.about-feature .icon{
    width:72px;
    height:72px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#1e88ff,#21d4fd);
    color:#fff;
    font-size:28px;
    flex-shrink:0;
}

.about-feature h5{
    color:#fff;
    margin-bottom:10px;
}

.about-feature p{
    color:rgba(255,255,255,.72);
    margin:0;
}

/*==================================================
BANKING PAGE DARK THEME
==================================================*/

body{
    background:#061326;
    color:#fff;
}

/* Sections */

.about-home-section,
.industries-section,
.services-section,
.why-banking,
.benefits-section{
    position:relative;
    background:linear-gradient(180deg,#071528 0%,#091c34 100%);
    overflow:hidden;
    padding:110px 0;
}

.industries-section.bg-light,
.why-banking.bg-light{
    background:linear-gradient(180deg,#08192d,#0b203d)!important;
}

/* Grid */

.about-home-section::before,
.industries-section::before,
.services-section::before,
.why-banking::before,
.benefits-section::before{

    content:"";
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:60px 60px;
    pointer-events:none;
}

/* Glow */

.about-home-section::after,
.industries-section::after,
.services-section::after,
.why-banking::after,
.benefits-section::after{

    content:"";
    position:absolute;
    width:550px;
    height:550px;

    background:radial-gradient(circle,
    rgba(0,170,255,.20),
    transparent 70%);

    border-radius:50%;

    top:-180px;
    right:-150px;

    animation:floatGlow 12s ease-in-out infinite;
    pointer-events:none;
}

@keyframes floatGlow{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(40px);

}

}

.section-heading{
    color:#fff;
}

.section-description,
.about-home-section p,
.industries-section p,
.services-section p,
.why-banking p,
.benefits-section p{
    color:#b9c8dc;
}

.section-tag{

display:inline-block;

padding:10px 24px;

background:rgba(0,170,255,.18);

border:1px solid rgba(0,170,255,.35);

color:#62d4ff;

border-radius:40px;

font-weight:600;

margin-bottom:25px;

backdrop-filter:blur(12px);

}

.challenge-card,
.banking-card,
.benefit-card,
.feature-box{

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

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

border-radius:24px;

backdrop-filter:blur(18px);

transition:.4s;

color:#fff;

box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.challenge-card:hover,
.banking-card:hover,
.benefit-card:hover,
.feature-box:hover{

transform:translateY(-10px);

border-color:#16b7ff;

box-shadow:0 25px 60px rgba(0,170,255,.28);

}

.industry-icon,
.service-icon,
.benefit-icon{

width:72px;
height:72px;

border-radius:18px;

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

background:linear-gradient(135deg,#1a8cff,#00d4ff);

color:#fff;

font-size:28px;

margin-bottom:20px;

box-shadow:0 15px 35px rgba(0,170,255,.35);

}

.feature-box i{

font-size:28px;

color:#19c2ff;

margin-right:18px;

}

.about-home-section img,
.why-banking img{

border-radius:24px;

box-shadow:0 25px 70px rgba(0,0,0,.35);

}

.floating-info-card,
.glass-floating-card{

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

backdrop-filter:blur(18px);

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

color:#fff;

box-shadow:0 20px 50px rgba(0,0,0,.30);

}

.mini-feature{

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

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

border-radius:16px;

padding:18px;

transition:.35s;

}

.mini-feature:hover{

background:rgba(0,170,255,.12);

transform:translateY(-6px);

}

.mini-feature i{

color:#1bc5ff;

font-size:22px;

margin-right:12px;

}

.mini-feature span{

color:#fff;

font-weight:600;

}

.cta-section{

background:linear-gradient(135deg,#071528,#0b2f57);

position:relative;

overflow:hidden;

padding:90px 0;

}

.cta-section::before{

content:"";

position:absolute;

width:500px;
height:500px;

background:radial-gradient(circle,
rgba(0,170,255,.18),
transparent 70%);

right:-180px;
top:-180px;

border-radius:50%;

}

.cta-section h2,
.cta-section p{

color:#fff;

}

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

.ai-hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
overflow:hidden;
background:
linear-gradient(135deg,#050816 0%,#0b1b3c 40%,#001a3d 100%);
}

.ai-hero::before{
content:"";
position:absolute;
width:160%;
height:160%;
top:-30%;
left:-30%;
background:
radial-gradient(circle,#3ea6ff22 0%,transparent 35%),
radial-gradient(circle,#00ffd522 0%,transparent 28%),
radial-gradient(circle,#7c5cff22 0%,transparent 30%);
animation:heroGradient 18s linear infinite;
}

@keyframes heroGradient{

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

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

}

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

.ai-grid{
position:absolute;
width:100%;
height:100%;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:60px 60px;
animation:gridMove 18s linear infinite;
opacity:.4;
}

@keyframes gridMove{

0%{
transform:translateY(0);
}

100%{
transform:translateY(60px);
}

}

/*===================================================
GLOW ORBS
===================================================*/

.glow-orb{
position:absolute;
border-radius:50%;
filter:blur(90px);
animation:floatOrb 10s ease-in-out infinite;
}

.orb-one{
width:350px;
height:350px;
background:#00bfff;
top:5%;
left:-120px;
opacity:.25;
}

.orb-two{
width:300px;
height:300px;
background:#00ffd5;
right:-80px;
top:25%;
opacity:.20;
animation-delay:2s;
}

.orb-three{
width:280px;
height:280px;
background:#7a5cff;
bottom:-80px;
left:45%;
opacity:.20;
animation-delay:4s;
}

@keyframes floatOrb{

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

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

}

/*===================================================
FLOATING AI ICONS
===================================================*/

.floating-ai{
position:absolute;
width:80px;
height:80px;
display:flex;
justify-content:center;
align-items:center;
border-radius:24px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 20px 50px rgba(0,0,0,.30);
color:#00e1ff;
font-size:34px;
animation:floatIcon 6s ease-in-out infinite;
z-index:3;
}

.floating-ai.one{
top:18%;
left:8%;
}

.floating-ai.two{
top:70%;
left:12%;
animation-delay:1.5s;
}

.floating-ai.three{
top:18%;
right:12%;
animation-delay:3s;
}

.floating-ai.four{
bottom:10%;
right:15%;
animation-delay:4s;
}

@keyframes floatIcon{

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

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

}

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

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

.hero-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 26px;
border-radius:40px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.12);
color:#00f2ff;
font-weight:600;
margin-bottom:25px;
}

.hero-content h1{
font-size:68px;
font-weight:800;
color:#fff;
line-height:1.1;
margin-bottom:20px;
}

.hero-content h1 span{
background:linear-gradient(90deg,#00d2ff,#00ffcc);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-content p{
font-size:18px;
line-height:1.9;
color:#d4dff6;
max-width:620px;
margin-bottom:35px;
}

/*===================================================
AI DISPLAY
===================================================*/

.ai-display{
position:relative;
width:520px;
height:520px;
margin:auto;
display:flex;
justify-content:center;
align-items:center;
}

.ai-core{
position:absolute;
width:220px;
height:220px;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:rgba(255,255,255,.10);
backdrop-filter:blur(22px);
border:2px solid rgba(255,255,255,.10);
box-shadow:
0 0 60px rgba(0,255,255,.35),
0 0 120px rgba(0,180,255,.20);
animation:pulseCore 4s ease infinite;
z-index:5;
}

.ai-core i{
font-size:70px;
color:#00e5ff;
margin-bottom:15px;
}

.ai-core h4{
color:#fff;
font-weight:700;
margin-bottom:6px;
}

.ai-core p{
color:#cfe9ff;
margin:0;
}

@keyframes pulseCore{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

}

/*===================================================
ORBITS
===================================================*/

.orbit{
position:absolute;
width:80px;
height:80px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background:rgba(255,255,255,.12);
backdrop-filter:blur(20px);
color:#00e5ff;
font-size:30px;
box-shadow:0 15px 40px rgba(0,0,0,.25);
}

.orbit-one{
animation:orbitOne 12s linear infinite;
}

.orbit-two{
animation:orbitTwo 14s linear infinite;
}

.orbit-three{
animation:orbitThree 16s linear infinite;
}

.orbit-four{
animation:orbitFour 18s linear infinite;
}

@keyframes orbitOne{

0%{
transform:rotate(0deg) translateX(180px) rotate(0deg);
}

100%{
transform:rotate(360deg) translateX(180px) rotate(-360deg);
}

}

@keyframes orbitTwo{

0%{
transform:rotate(90deg) translateX(220px) rotate(-90deg);
}

100%{
transform:rotate(450deg) translateX(220px) rotate(-450deg);
}

}

/*===================================================
ORBIT ANIMATIONS (CONTINUED)
===================================================*/

@keyframes orbitThree{

0%{
transform:rotate(180deg) translateX(200px) rotate(-180deg);
}

100%{
transform:rotate(540deg) translateX(200px) rotate(-540deg);
}

}

@keyframes orbitFour{

0%{
transform:rotate(270deg) translateX(250px) rotate(-270deg);
}

100%{
transform:rotate(630deg) translateX(250px) rotate(-630deg);
}

}

/*===================================================
BREADCRUMB
===================================================*/

.ai-breadcrumb{
background:#071327;
padding:18px 0;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
}

.ai-breadcrumb .breadcrumb{
margin:0;
background:none;
}

.ai-breadcrumb .breadcrumb-item a{
color:#00d4ff;
text-decoration:none;
}

.ai-breadcrumb .breadcrumb-item.active{
color:#fff;
}

/*===================================================
OVERVIEW
===================================================*/

.overview-section{
background:#091528;
}

.overview-image{
overflow:hidden;
border-radius:28px;
box-shadow:0 30px 70px rgba(0,0,0,.35);
}

.overview-image img{
width:100%;
transition:.6s;
}

.overview-image:hover img{
transform:scale(1.08);
}

.section-tag{
display:inline-block;
padding:8px 20px;
background:#00d2ff;
color:#04111f;
font-weight:700;
border-radius:30px;
margin-bottom:20px;
letter-spacing:1px;
}

.overview-section h2{
font-size:42px;
font-weight:700;
color:#fff;
margin-bottom:20px;
}

.overview-section p{
color:#c9d8ef;
line-height:1.9;
font-size:17px;
}

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

.section-heading span{
color:#00d2ff;
font-weight:700;
letter-spacing:2px;
}

.section-heading h2{
color:#fff;
font-size:42px;
margin:20px 0;
font-weight:700;
}

.section-heading p{
max-width:720px;
margin:auto;
color:#cfd8eb;
line-height:1.9;
}

/*===================================================
CHALLENGES
===================================================*/

.ai-challenges{
background:#081321;
}

.challenge-box{
position:relative;
padding:45px 35px;
border-radius:25px;
background:rgba(255,255,255,.05);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
overflow:hidden;
transition:.45s;
height:100%;
}

.challenge-box:hover{
transform:translateY(-12px);
box-shadow:0 30px 70px rgba(0,212,255,.18);
border-color:#00d2ff;
}

.challenge-icon{
width:80px;
height:80px;
border-radius:20px;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#00d2ff,#006eff);
font-size:34px;
color:#fff;
margin-bottom:25px;
}

.challenge-box h4{
color:#fff;
margin-bottom:15px;
font-weight:700;
}

.challenge-box p{
color:#c8d6e8;
line-height:1.8;
}

.challenge-number{
position:absolute;
top:20px;
right:25px;
font-size:54px;
font-weight:800;
color:rgba(255,255,255,.05);
}

/*===================================================
SOLUTIONS
===================================================*/

.ai-solutions{
background:#0b172c;
}

.solution-card{
height:100%;
padding:40px 30px;
border-radius:24px;
background:rgba(255,255,255,.06);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
transition:.45s;
}

.solution-card:hover{
transform:translateY(-12px);
box-shadow:0 25px 60px rgba(0,210,255,.22);
}

.solution-icon{
width:78px;
height:78px;
display:flex;
justify-content:center;
align-items:center;
border-radius:20px;
margin-bottom:25px;
background:linear-gradient(135deg,#00d2ff,#6b4cff);
color:#fff;
font-size:30px;
}

.solution-card h4{
color:#fff;
margin-bottom:15px;
font-weight:700;
}

.solution-card p{
color:#cfd8eb;
line-height:1.8;
}

/*===================================================
WHY AI
===================================================*/

.why-ai{
background:#081423;
}

.why-image{
position:relative;
}

.why-image img{
border-radius:28px;
box-shadow:0 30px 70px rgba(0,0,0,.35);
}

.floating-badge{
position:absolute;
bottom:30px;
left:30px;
padding:15px 28px;
border-radius:40px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(18px);
color:#fff;
font-weight:600;
box-shadow:0 20px 50px rgba(0,0,0,.30);
}

.feature-item{
display:flex;
gap:20px;
margin-bottom:28px;
}

.feature-icon{
width:65px;
height:65px;
display:flex;
justify-content:center;
align-items:center;
border-radius:18px;
background:linear-gradient(135deg,#00d2ff,#007bff);
color:#fff;
font-size:24px;
flex-shrink:0;
}

.feature-item h5{
color:#fff;
font-weight:700;
margin-bottom:8px;
}

.feature-item p{
color:#d3dff0;
margin:0;
}

/*===================================================
BENEFITS
===================================================*/

.ai-benefits{
background:#0a1628;
}

.benefit-card{
height:100%;
padding:40px 28px;
text-align:center;
border-radius:24px;
background:rgba(255,255,255,.06);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
transition:.4s;
}

.benefit-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,212,255,.20);
}

.benefit-card i{
font-size:42px;
color:#00d4ff;
margin-bottom:20px;
}

.benefit-card h4{
color:#fff;
font-size:22px;
margin-bottom:15px;
font-weight:700;
}

.benefit-card p{
color:#d3deef;
line-height:1.8;
}

/*===================================================
CTA
===================================================*/

.ai-cta{
padding:100px 0;
background:linear-gradient(135deg,#071224,#0d2b56);
position:relative;
overflow:hidden;
}

.ai-cta::before{
content:"";
position:absolute;
width:420px;
height:420px;
background:#00d2ff;
filter:blur(140px);
opacity:.15;
top:-120px;
right:-100px;
}

.ai-cta h2{
color:#fff;
font-size:46px;
font-weight:700;
margin-bottom:20px;
}

.ai-cta p{
color:#d5dff0;
max-width:760px;
margin:auto;
line-height:1.9;
margin-bottom:35px;
}

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

.hero-btn{
padding:15px 34px;
border-radius:50px;
font-weight:700;
transition:.35s;
}

.hero-btn:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(0,0,0,.25);
}

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

@media (max-width:1200px){

.ai-display{
width:440px;
height:440px;
}

.ai-core{
width:190px;
height:190px;
}

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

.overview-section h2,
.section-heading h2,
.ai-cta h2{
font-size:38px;
}

.orbit-one{
animation:orbitOneTablet 12s linear infinite;
}

.orbit-two{
animation:orbitTwoTablet 14s linear infinite;
}

.orbit-three{
animation:orbitThreeTablet 16s linear infinite;
}

.orbit-four{
animation:orbitFourTablet 18s linear infinite;
}

}

@media (max-width:992px){

.ai-hero{
padding:120px 0 80px;
text-align:center;
}

.hero-content{
margin-bottom:70px;
}

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

.hero-buttons{
justify-content:center;
display:flex;
flex-wrap:wrap;
gap:15px;
}

.ai-display{
width:360px;
height:360px;
}

.ai-core{
width:170px;
height:170px;
}

.ai-core i{
font-size:56px;
}

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

.overview-section h2,
.section-heading h2,
.ai-cta h2{
font-size:34px;
}

.feature-item{
align-items:flex-start;
}

.floating-ai{
display:none;
}

.glow-orb{
opacity:.12;
}

}

@media (max-width:768px){

.ai-hero{
padding-top:110px;
}

.hero-content h1{
font-size:40px;
line-height:1.2;
}

.hero-content p{
font-size:16px;
line-height:1.8;
}

.ai-display{
width:300px;
height:300px;
}

.ai-core{
width:150px;
height:150px;
}

.ai-core i{
font-size:48px;
}

.ai-core h4{
font-size:20px;
}

.ai-core p{
font-size:14px;
}

.orbit{
width:60px;
height:60px;
font-size:22px;
}

.section-heading h2,
.overview-section h2,
.ai-cta h2{
font-size:30px;
}

.challenge-box,
.solution-card,
.benefit-card{
padding:30px 25px;
}

.challenge-icon,
.solution-icon{
width:70px;
height:70px;
font-size:28px;
}

.feature-item{
gap:15px;
}

.feature-icon{
width:58px;
height:58px;
font-size:20px;
}

.floating-badge{
position:relative;
left:0;
bottom:0;
margin-top:20px;
display:inline-flex;
}

}

@media (max-width:576px){

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

.hero-badge{
font-size:14px;
padding:10px 18px;
}

.hero-btn{
width:100%;
margin:8px 0;
}

.ai-display{
width:260px;
height:260px;
}

.ai-core{
width:130px;
height:130px;
}

.ai-core i{
font-size:40px;
}

.ai-core h4{
font-size:18px;
}

.ai-core p{
font-size:13px;
}

.orbit{
width:52px;
height:52px;
font-size:18px;
}

.overview-section h2,
.section-heading h2,
.ai-cta h2{
font-size:26px;
}

.section-heading p,
.overview-section p,
.challenge-box p,
.solution-card p,
.benefit-card p,
.feature-item p,
.ai-cta p{
font-size:15px;
}

.challenge-number{
font-size:42px;
}

}

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

@keyframes orbitOneTablet{

0%{
transform:rotate(0deg) translateX(130px) rotate(0deg);
}

100%{
transform:rotate(360deg) translateX(130px) rotate(-360deg);
}

}

@keyframes orbitTwoTablet{

0%{
transform:rotate(90deg) translateX(150px) rotate(-90deg);
}

100%{
transform:rotate(450deg) translateX(150px) rotate(-450deg);
}

}

@keyframes orbitThreeTablet{

0%{
transform:rotate(180deg) translateX(140px) rotate(-180deg);
}

100%{
transform:rotate(540deg) translateX(140px) rotate(-540deg);
}

}

@keyframes orbitFourTablet{

0%{
transform:rotate(270deg) translateX(165px) rotate(-270deg);
}

100%{
transform:rotate(630deg) translateX(165px) rotate(-630deg);
}

}

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

.challenge-box,
.solution-card,
.benefit-card,
.feature-item,
.hero-btn,
.overview-image img,
.floating-badge{
transition:all .4s ease;
}

.challenge-box:hover .challenge-icon,
.solution-card:hover .solution-icon{
transform:rotate(10deg) scale(1.08);
}

.challenge-icon,
.solution-icon{
transition:all .35s ease;
}

/*===================================================
CUSTOM SCROLLBAR (OPTIONAL)
===================================================*/

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#07111f;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(#00d2ff,#007bff);
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:linear-gradient(#00f2ff,#009dff);
}

/*===================================================
END OF AI AUTOMATION CSS
===================================================*/


/*===================================================
CLOUD HERO OVERRIDES
===================================================*/

.ai-hero.cloud-hero{
    background:
    linear-gradient(135deg,#050816 0%,#0d2448 45%,#0a3d7a 100%);
}

.ai-hero.cloud-hero::before{
    background:
    radial-gradient(circle,#4db8ff22 0%,transparent 35%),
    radial-gradient(circle,#00d4ff22 0%,transparent 28%),
    radial-gradient(circle,#6aa8ff22 0%,transparent 30%);
}

.ai-core.cloud-core{
    box-shadow:
        0 0 60px rgba(0,191,255,.35),
        0 0 120px rgba(0,120,255,.20);
}

.ai-core.cloud-core i{
    color:#4fc3ff;
}


/*===================================================
IT CONSULTING OVERRIDES
===================================================*/

.consulting-hero{

background:
linear-gradient(135deg,#050816 0%,#13213f 45%,#1f3d73 100%);

}

.consulting-hero::before{

background:
radial-gradient(circle,#5daeff22 0%,transparent 35%),
radial-gradient(circle,#38bdf822 0%,transparent 28%),
radial-gradient(circle,#7c9cff22 0%,transparent 30%);

}

.consulting-core{

box-shadow:
0 0 60px rgba(93,174,255,.35),
0 0 120px rgba(56,189,248,.22);

}

.consulting-core i{

color:#5daeff;

}

.consulting-hero .hero-badge{

color:#5daeff;

}

.consulting-hero .hero-content h1 span{

background:linear-gradient(90deg,#5daeff,#38bdf8);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.consulting-hero .floating-ai{

color:#5daeff;

}

.consulting-hero .orbit{

color:#5daeff;

}


/*===================================================
IT STAFFING PAGE OVERRIDES
===================================================*/

.staffing-hero{

background:
linear-gradient(135deg,#06111f 0%,#0f2744 45%,#164f72 100%);

}

.staffing-hero::before{

background:
radial-gradient(circle,#34d39922 0%,transparent 35%),
radial-gradient(circle,#38bdf822 0%,transparent 28%),
radial-gradient(circle,#60a5fa22 0%,transparent 30%);

}

.staffing-core{

box-shadow:
0 0 60px rgba(52,211,153,.35),
0 0 120px rgba(56,189,248,.20);

}

.staffing-core i{

color:#34d399;

}

.staffing-hero .hero-badge{

color:#34d399;

}

.staffing-hero .hero-content h1 span{

background:linear-gradient(90deg,#34d399,#38bdf8);

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

}

.staffing-hero .floating-ai{

color:#34d399;

}

.staffing-hero .orbit{

color:#34d399;

}


/*===================================================
SAP CONSULTING PAGE OVERRIDES
===================================================*/

.sap-hero{

background:
linear-gradient(135deg,#08111f 0%,#0f2947 45%,#14532d 100%);

}

.sap-hero::before{

background:
radial-gradient(circle,#22c55e22 0%,transparent 35%),
radial-gradient(circle,#38bdf822 0%,transparent 28%),
radial-gradient(circle,#16a34a22 0%,transparent 30%);

}

.sap-core{

box-shadow:
0 0 60px rgba(34,197,94,.35),
0 0 120px rgba(56,189,248,.20);

}

.sap-core i{

color:#22c55e;

}

.sap-hero .hero-badge{

color:#22c55e;

}

.sap-hero .hero-content h1 span{

background:linear-gradient(90deg,#22c55e,#38bdf8);

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

}

.sap-hero .floating-ai{

color:#22c55e;

}

.sap-hero .orbit{

color:#0B5ED7;

}

.sap-hero .solution-icon,
.sap-hero .challenge-icon,
.sap-hero .feature-icon{

background:linear-gradient(135deg,#22c55e,#38bdf8);

}

.sap-hero .hero-btn.btn-info{

background:#22c55e;
border-color:#22c55e;
color:#fff;

}

.sap-hero .hero-btn.btn-info:hover{

background:#16a34a;
border-color:#16a34a;

}





























/*==================================================
EDUCATION PAGE DARK THEME
==================================================*/

.education-hero ~ section{
    background:#071327;
    color:#fff;
}

.education-hero ~ section:nth-child(even){
    background:#0b1831;
}

.education-hero ~ section p{
    color:#c6d2e3;
}

.education-hero ~ section .text-muted{
    color:#b8c7dd !important;
}

.education-hero ~ section h1,
.education-hero ~ section h2,
.education-hero ~ section h3,
.education-hero ~ section h4,
.education-hero ~ section h5,
.education-hero ~ section h6{
    color:#fff;
}

.education-hero ~ section.bg-light{
    background:#0b1831 !important;
}

.edu-card{

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

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

    backdrop-filter:blur(20px);

    border-radius:22px;

    transition:.4s;

    box-shadow:0 18px 45px rgba(0,0,0,.30);

}

.edu-card:hover{

    transform:translateY(-10px);

    border-color:#00d4ff;

    box-shadow:0 25px 60px rgba(0,212,255,.20);

}

.edu-icon-box{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#00d4ff,#2563eb);

    color:#fff;

    font-size:28px;

    margin-bottom:20px;

    box-shadow:0 10px 25px rgba(0,212,255,.25);

}

.edu-title{

    color:#fff;

}

.edu-subtitle{

    color:#00d4ff;

    letter-spacing:2px;

}

.edu-check li{

    color:#dbe7ff;

    margin-bottom:18px;

}

.edu-check i{

    color:#00d4ff;

    margin-right:12px;

}



/*==================================================
RETAIL PAGE DARK THEME
==================================================*/

.overview-section,
.about-home-section{
    background:#071327;
}

.retail-challenges,
.industries-section{
    background:#0b1831;
    position:relative;
    overflow:hidden;
}

.retail-solutions,
.services-section{
    background:#071327;
}

.why-retail,
.why-banking{
    background:#0b1831;
}

.retail-benefits,
.benefits-section{
    background:#071327;
}

.retail-cta{
    background:linear-gradient(135deg,#0b1831,#071327);
}

/* Section Headings */

.section-tag,
.section-heading span,
.retail-challenges span,
.retail-solutions span,
.retail-benefits span{

    color:#00d4ff;
    letter-spacing:2px;
    font-weight:700;

}

.overview-section h2,
.retail-challenges h2,
.retail-solutions h2,
.why-retail h2,
.retail-benefits h2{

    color:#fff;

}

.overview-section p,
.retail-challenges p,
.retail-solutions p,
.why-retail p,
.retail-benefits p{

    color:#c7d5e8;

}

.challenge-box,
.solution-card,
.benefit-card{

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

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

    backdrop-filter:blur(22px);

    border-radius:22px;

    transition:.4s;

    box-shadow:0 20px 45px rgba(0,0,0,.28);

    position:relative;

    overflow:hidden;

}

.challenge-box:hover,
.solution-card:hover,
.benefit-card:hover{

    transform:translateY(-10px);

    border-color:#00d4ff;

    box-shadow:0 30px 70px rgba(0,212,255,.22);

}

.challenge-icon,
.solution-icon,
.feature-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    background:linear-gradient(135deg,#00d4ff,#2563eb);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:30px;

    margin-bottom:20px;

    box-shadow:0 15px 30px rgba(0,212,255,.25);

}

.industries-section::before,
.services-section::before,
.why-banking::before,
.benefits-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:radial-gradient(circle,rgba(0,212,255,.10),transparent 70%);

    border-radius:50%;

    top:-180px;

    right:-120px;

    pointer-events:none;

}

.industries-section::after,
.services-section::after,
.why-banking::after,
.benefits-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    background:radial-gradient(circle,rgba(37,99,235,.08),transparent 70%);

    border-radius:50%;

    left:-120px;

    bottom:-120px;

    pointer-events:none;

}


/*==================================================
LOGISTICS PAGE DARK THEME
(Hero remains unchanged)
==================================================*/

body{
    background:#07111f;
    color:#e9f2ff;
}

/* Sections */

.overview-section,
section.py-5{
    position:relative;
    background:#07111f;
    overflow:hidden;
}

.bg-light{
    background:#0d1729 !important;
}

/* Alternate sections */

section:nth-of-type(even):not(.logistics-hero):not(.footer):not(.cta-section){
    background:#0c182d;
}

/* Animated Background */

section.py-5::before,
.bg-light::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 25%,rgba(0,170,255,.08),transparent 35%),
        radial-gradient(circle at 80% 70%,rgba(255,179,0,.08),transparent 35%),
        radial-gradient(circle at 60% 15%,rgba(0,255,200,.05),transparent 30%);
    animation:logisticsGlow 16s linear infinite alternate;
    pointer-events:none;
}

@keyframes logisticsGlow{

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

100%{
transform:translateY(-30px) scale(1.15);
}

}

/* Titles */

.edu-title,
h2,
h3{
    color:#fff;
    font-weight:700;
}

.text-muted,
p{
    color:#c5d3e5 !important;
}

.text-primary{
    color:#39b6ff !important;
}

/* Images */

img{
    border-radius:18px;
}

.shadow{
    box-shadow:0 25px 60px rgba(0,0,0,.45)!important;
}

/* Service Cards */

.service-card{
    position:relative;
    background:rgba(15,27,46,.85);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:35px;
    overflow:hidden;
    transition:.45s;
    backdrop-filter:blur(18px);
    box-shadow:0 18px 45px rgba(0,0,0,.28);
}

.service-card::before{

content:"";
position:absolute;
top:-120%;
left:-40%;
width:220%;
height:220%;
background:linear-gradient(135deg,
transparent,
rgba(255,255,255,.08),
transparent);
transform:rotate(25deg);
transition:.8s;

}

.service-card:hover::before{
top:100%;
}

.service-card:hover{

transform:translateY(-12px);
border-color:#29b6ff;
box-shadow:0 25px 70px rgba(41,182,255,.25);

}

.service-card h4,
.service-card h5{
color:#fff;
}

.service-card p{
color:#c6d5e6 !important;
}

/* Icons */

.service-card i{
color:#0B5ED7 !important;
transition:.35s;
}

.service-card:hover i{

transform:scale(1.18) rotate(8deg);
color:#29b6ff !important;

}

/* Buttons */

.btn-primary{

background:linear-gradient(135deg,#1fa2ff,#12d8fa);
border:none;
border-radius:50px;
padding:14px 34px;
font-weight:600;
box-shadow:0 15px 35px rgba(31,162,255,.35);

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-light,
.btn-outline-light{

border-radius:50px;
padding:14px 34px;

}

/* Checklist */

li{
color:#d9e6f5;
}

/* CTA */

.cta-section{

position:relative;
background:
linear-gradient(135deg,#0b2e4c,#0b6ba8);
overflow:hidden;

}

.cta-section::before{

content:"";
position:absolute;
width:650px;
height:650px;
border-radius:50%;
background:rgba(255,255,255,.05);
top:-260px;
right:-220px;

}

.cta-section::after{

content:"";
position:absolute;
width:450px;
height:450px;
border-radius:50%;
background:rgba(255,196,0,.08);
bottom:-180px;
left:-150px;

}

/* Floating Dots */

section.py-5::after,
.bg-light::after{

content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#2dbbff;
top:18%;
left:15%;
box-shadow:
180px 120px #ffc547,
420px 70px #2dbbff,
720px 180px #39d6ff,
980px 340px #ffc547,
350px 480px #39b6ff;
animation:floatingDots 18s linear infinite;

}

@keyframes floatingDots{

0%{
transform:translateY(0);
opacity:.25;
}

50%{
opacity:.8;
}

100%{
transform:translateY(-40px);
opacity:.25;
}

}

/* Hover Image */

img:hover{

transform:scale(1.02);
transition:.5s;

}