/* =====================================================
GLOBAL
===================================================== */
 
 :root {
     --primary: #020617;
     --secondary: #0ea5e9;
     --accent: #14b8a6;
     --light: #f8fafc;
     --text: #1e293b;
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 html {
     scroll-behavior: smooth;
 }
 
 body {
     font-family: 'Inter', sans-serif;
     background: #edf2f7;
     color: var(--text);
     overflow-x: hidden;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5 {
     font-family: 'Poppins', sans-serif;
 }
 
 a {
     text-decoration: none;
 }
 
 .section {
     padding: 60px 0;
 }
 /* =====================================================
ANIMATIONS
===================================================== */
 
 @keyframes floating {
     0% {
         transform: translateY(0px);
     }
     50% {
         transform: translateY(-12px);
     }
     100% {
         transform: translateY(0px);
     }
 }
 
 @keyframes glow {
     0% {
         box-shadow: 0 0 0 rgba(14, 165, 233, 0);
     }
     50% {
         box-shadow: 0 0 30px rgba(14, 165, 233, .25);
     }
     100% {
         box-shadow: 0 0 0 rgba(14, 165, 233, 0);
     }
 }
 
 @keyframes gradientMove {
     0% {
         background-position: 0% 50%;
     }
     50% {
         background-position: 100% 50%;
     }
     100% {
         background-position: 0% 50%;
     }
 }
 /* =====================================================
TOPBAR
===================================================== */
 
 .topbar {
     background: #000814;
     color: #fff;
     padding: 10px 0;
     font-size: 14px;
 }
 
 .topbar i {
     color: var(--secondary);
     margin-right: 6px;
 }
 /* =====================================================
NAVBAR
===================================================== */
 
 .vaspire-navbar {
     background: #0f172a;
     padding: 14px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 }
 /* BRAND */
 
 .vaspire-brand {
     font-size: 24px;
     font-weight: 800;
     letter-spacing: 1px;
     color: #fff;
 }
 
 .vaspire-brand span {
     color: #ffffff;
 }
 /* MENU ALIGNMENT FIX */
 
 .vaspire-menu {
     justify-content: flex-end;
     /* 🔥 pushes menu right */
 }
 /* NAV LIST */
 
 .vaspire-nav {
     display: flex;
     gap: 10px;
 }
 /* NAV LINKS */
 
 .vaspire-nav .nav-link {
     color: #cbd5e1 !important;
     font-size: 15px;
     font-weight: 500;
     padding: 8px 10px;
     position: relative;
     transition: .3s;
 }
 /* HOVER UNDERLINE */
 
 .vaspire-nav .nav-link::after {
     content: '';
     position: absolute;
     left: 10%;
     bottom: 0;
     width: 0%;
     height: 2px;
     background: #60a5fa;
     transition: .3s;
 }
 
 .vaspire-nav .nav-link:hover {
     color: #ffffff !important;
 }
 
 .vaspire-nav .nav-link:hover::after {
     width: 80%;
 }
 /* RESPONSIVE */
 
 @media(max-width:992px) {
     .vaspire-menu {
         justify-content: center;
         text-align: center;
         padding-top: 15px;
     }
     .vaspire-nav {
         flex-direction: column;
         gap: 12px;
     }
 }
 
 .vaspire-brand {
     display: flex;
     align-items: center;
     gap: 10px;
 }
 
 .vaspire-logo {
     width: 72px;
     height: 64px;
     object-fit: contain;
 }
 
 .vaspire-nav .nav-link {
     color: #cbd5e1 !important;
     font-size: 15px;
     font-weight: 500;
     padding: 8px 10px;
     position: relative;
     transition: .3s;
     display: inline-block;
 }
 /* DEFAULT UNDERLINE (SAFE VERSION) */
 
 .vaspire-nav .nav-link::after {
     content: '';
     position: absolute;
     left: 50%;
     bottom: 0;
     width: 0%;
     height: 2px;
     background: #60a5fa;
     transition: all 0.3s ease;
     transform: translateX(-50%);
 }
 /* HOVER EFFECT */
 
 .vaspire-nav .nav-link:hover::after {
     width: 100%;
 }
 /* MOBILE FIX 🔥 IMPORTANT */
 
 @media(max-width:992px) {
     .vaspire-nav .nav-link::after {
         display: none;
         /* disable underline animation on mobile */
     }
     .vaspire-nav .nav-link {
         padding: 10px 0;
     }
 }
 /* =====================================================
BUTTONS
===================================================== */
 
 .btn-main {
     background: linear-gradient(135deg, var(--secondary), var(--accent));
     border: none;
     color: #fff;
     padding: 14px 30px;
     border-radius: 50px;
     font-weight: 600;
     transition: .5s ease;
     position: relative;
     overflow: hidden;
 }
 
 .btn-main:hover {
     color: #fff;
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(14, 165, 233, .3);
 }
 /* =====================================================
HERO
===================================================== */
 
 .hero {
     min-height: 80vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     background: linear-gradient(-45deg, #020617, #0f172a, #1e3a8a, #0f766e);
     background-size: 400% 400%;
     animation: gradientMove 16s ease infinite;
 }
 
 .hero::before {
     content: '';
     position: absolute;
     width: 550px;
     height: 550px;
     background: rgba(14, 165, 233, .12);
     border-radius: 50%;
     top: -100px;
     right: -100px;
     filter: blur(90px);
     animation: floating 8s infinite ease-in-out;
 }
 
 .hero::after {
     content: '';
     position: absolute;
     width: 400px;
     height: 400px;
     background: rgba(20, 184, 166, .12);
     border-radius: 50%;
     left: -120px;
     bottom: -120px;
     filter: blur(90px);
     animation: floating 10s infinite ease-in-out;
 }
 
 .hero-badge {
     background: rgba(255, 255, 255, .1);
     border: 1px solid rgba(255, 255, 255, .1);
     backdrop-filter: blur(12px);
     padding: 12px 22px;
     border-radius: 50px;
     color: #fff;
     display: inline-block;
     margin-bottom: 25px;
 }
 
 .hero h1 {
     font-size: 68px;
     font-weight: 800;
     line-height: 1.1;
     color: #fff;
 }
 
 .hero p {
     color: #dbeafe;
     font-size: 18px;
     line-height: 1.9;
     margin: 25px 0;
 }
 
 .hero-image {
     position: relative;
     animation: floating 6s infinite ease-in-out;
 }
 
 .hero-image img {
     width: 100%;
     border-radius: 30px;
     box-shadow: 0 25px 60px rgba(0, 0, 0, .35), 0 0 60px rgba(14, 165, 233, .15);
 }
 
 .float-card {
     position: absolute;
     bottom: 20px;
     left: -40px;
     background: rgba(255, 255, 255, .12);
     backdrop-filter: blur(16px);
     border: 1px solid rgba(255, 255, 255, .1);
     padding: 25px;
     border-radius: 20px;
     color: #fff;
     animation: floating 5s infinite ease-in-out;
 }
 /* =====================================================
SECTION TITLES
===================================================== */
 
 .section-title {
     font-size: 46px;
     font-weight: 800;
     margin-bottom: 15px;
     position: relative;
     display: inline-block;
 }
 
 .section-title::after {
     content: '';
     width: 70px;
     height: 4px;
     border-radius: 20px;
     background: linear-gradient(to right, var(--secondary), var(--accent));
     position: absolute;
     bottom: -14px;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .section-subtitle {
     color: #64748b;
     max-width: 700px;
     margin: auto;
     line-height: 1.8;
 }
 /* SECTION */
 
 .vaspire-helpdesk-section {
     padding: 90px 8%;
     background: #f7f9fc;
 }
 /* CONTAINER */
 
 .vaspire-helpdesk-container {
     max-width: 1250px;
     margin: auto;
     display: grid;
     grid-template-columns: 1fr 1.3fr;
     /* 🔥 image bigger */
     gap: 50px;
     align-items: center;
     /* 🔥 perfect alignment */
 }
 /* LEFT CONTENT */
 
 .vaspire-helpdesk-content {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 /* BADGE */
 
 .vaspire-badge {
     display: inline-block;
     width: fit-content;
     background: #eff6ff;
     color: #2563eb;
     padding: 8px 18px;
     border-radius: 50px;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 18px;
 }
 /* TITLE */
 
 .vaspire-helpdesk-content h2 {
     font-size: 42px;
     line-height: 1.2;
     font-weight: 800;
     color: #111827;
     margin-bottom: 18px;
 }
 /* TEXT */
 
 .vaspire-helpdesk-content p {
     color: #6b7280;
     font-size: 16px;
     line-height: 1.8;
     margin-bottom: 25px;
 }
 /* CARD */
 
 .vaspire-helpdesk-card {
     background: #007366;
     color: #fff;
     padding: 18px 22px;
     border-radius: 18px;
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 20px;
     box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
 }
 /* NUMBER */
 
 .vaspire-helpdesk-number {
     display: inline-block;
     width: fit-content;
     text-decoration: none;
     font-size: 26px;
     font-weight: 700;
     color: #111827;
     transition: .3s;
 }
 
 .vaspire-helpdesk-number:hover {
     color: #2563eb;
 }
 /* IMAGE */
 
 .vaspire-helpdesk-image {
     display: flex;
     align-items: center;
     height: 100%;
 }
 
 .vaspire-helpdesk-image img {
     width: 100%;
     height: 404px;
     object-fit: cover;
     border-radius: 3px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
 }
 /* RESPONSIVE */
 
 @media(max-width:992px) {
     .vaspire-helpdesk-container {
         grid-template-columns: 1fr;
     }
     .vaspire-helpdesk-content {
         text-align: center;
         align-items: center;
     }
     .vaspire-helpdesk-image img {
         height: 400px;
     }
 }
 
 @media(max-width:576px) {
     .vaspire-helpdesk-section {
         padding: 70px 20px;
     }
     .vaspire-helpdesk-content h2 {
         font-size: 32px;
     }
     .vaspire-helpdesk-image img {
         height: 320px;
     }
     .vaspire-helpdesk-number {
         font-size: 22px;
     }
 }
 /* =====================================================
HELPDESK
===================================================== */
 
 .helpdesk-box {
     background: linear-gradient(135deg, #0f172a, #1e293b);
     color: #fff;
     padding: 45px;
     border-radius: 30px;
     position: relative;
     overflow: hidden;
     box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
 }
 
 .helpdesk-box::before {
     content: '';
     position: absolute;
     width: 250px;
     height: 250px;
     background: rgba(14, 165, 233, .12);
     border-radius: 50%;
     right: -100px;
     top: -80px;
     filter: blur(40px);
 }
 
 .helpdesk-card {
     background: rgba(255, 255, 255, .08);
     padding: 20px;
     border-radius: 18px;
     margin: 25px 0;
     backdrop-filter: blur(12px);
 }
 
 .helpdesk-number {
     font-size: 34px;
     font-weight: 700;
     color: #38bdf8;
 }
 /* =====================================================
SERVICE CARD
===================================================== */
 
 .service-card {
     background: #fff;
     border-radius: 30px;
     overflow: hidden;
     transition: .6s ease;
     box-shadow: 0 15px 40px rgba(0, 0, 0, .05);
     height: 100%;
 }
 
 .service-card:hover {
     transform: translateY(-14px);
     box-shadow: 0 25px 60px rgba(0, 0, 0, .08), 0 0 40px rgba(14, 165, 233, .08);
 }
 
 .service-card img {
     width: 100%;
     height: 260px;
     object-fit: cover;
     transition: 1.2s ease;
 }
 
 .service-card:hover img {
     transform: scale(1.08);
 }
 
 .service-content {
     padding: 30px;
 }
 
 .service-icon {
     width: 70px;
     height: 70px;
     border-radius: 20px;
     background: linear-gradient(135deg, var(--secondary), var(--accent));
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     margin-bottom: 20px;
     animation: glow 4s infinite ease;
 }
 
 .service-card h4 {
     font-weight: 700;
     margin-bottom: 15px;
 }
 /* =====================================================
ABOUT
===================================================== */
 
 .about-img img {
     width: 100%;
     border-radius: 30px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
 }
 
 .counter-box {
     background: #fff;
     border-radius: 24px;
     padding: 35px;
     text-align: center;
     transition: .5s;
     box-shadow: 0 15px 40px rgba(0, 0, 0, .05);
 }
 
 .counter-box:hover {
     transform: translateY(-10px);
 }
 
 .counter-box h2 {
     font-size: 46px;
     font-weight: 800;
     color: var(--secondary);
 }
 /* =====================================================
CLIENTS
===================================================== */
 
 .client-box {
     background: #fff;
     padding: 40px;
     border-radius: 24px;
     text-align: center;
     transition: .5s ease;
     box-shadow: 0 15px 40px rgba(0, 0, 0, .05);
 }
 
 .client-box:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
 }
 /* =====================================================
CONTACT
===================================================== */
 
 .contact-card {
     background: #fff;
     border-radius: 32px;
     padding: 50px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, .05);
 }
 
 .form-control {
     border: none;
     background: #f1f5f9;
     padding: 15px;
     border-radius: 14px;
 }
 
 .form-control:focus {
     background: #fff;
     border-color: #0ea5e9;
     box-shadow: 0 0 0 4px rgba(14, 165, 233, .08);
 }
 
 textarea.form-control {
     min-height: 140px;
 }
 /* =====================================================
FOOTER
===================================================== */
 /* FOOTER */
 
 .vaspire-footer {
     background: #0f172a;
     color: #fff;
     padding: 80px 8% 30px;
 }
 /* CONTAINER */
 
 .vaspire-container {
     max-width: 1200px;
     margin: auto;
 }
 /* GRID */
 
 .vaspire-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr;
     gap: 60px;
     align-items: start;
     /* 🔥 proper top alignment */
 }
 /* COLUMN */
 
 .vaspire-col h5 {
     font-size: 18px;
     margin-bottom: 18px;
     font-weight: 700;
     color: #ffffff;
 }
 
 .vaspire-col p {
     color: #cbd5e1;
     font-size: 14px;
     line-height: 1.8;
 }
 /* LINKS */
 
 .vaspire-col a {
     display: block;
     text-decoration: none;
     color: #cbd5e1;
     font-size: 14px;
     margin-bottom: 10px;
     transition: .3s;
 }
 
 .vaspire-col a:hover {
     color: #60a5fa;
     transform: translateX(5px);
 }
 /* BOTTOM */
 
 .vaspire-bottom {
     margin-top: 50px;
     padding-top: 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     text-align: center;
     font-size: 13px;
     color: #94a3b8;
 }
 /* RESPONSIVE */
 
 @media(max-width:992px) {
     .vaspire-grid {
         grid-template-columns: 1fr 1fr;
         gap: 40px;
     }
 }
 
 @media(max-width:576px) {
     .vaspire-grid {
         grid-template-columns: 1fr;
         text-align: center;
     }
     .vaspire-col a {
         text-align: center;
     }
 }
 /* =====================================================
RESPONSIVE
===================================================== */
 
 @media(max-width:991px) {
     .hero {
         text-align: center;
         padding: 120px 0 80px;
     }
     .hero h1 {
         font-size: 42px;
     }
     .section {
         padding: 70px 0;
     }
     .float-card {
         position: relative;
         left: 0;
         margin-top: 20px;
     }
     .section-title {
         font-size: 34px;
     }
 }
 /*******************************slider logo*************************************/
 /* SECTION */
 
 .vaspire-clients {
     padding: 80px 8%;
     background: #f7f9fc;
 }
 
 .vaspire-container {
     max-width: 1200px;
     margin: auto;
 }
 /* HEADER */
 
 .vaspire-head h2 {
     font-size: 42px;
     font-weight: 800;
     color: #111827;
 }
 
 .vaspire-head p {
     color: #6b7280;
     margin-top: 10px;
 }
 /* SLIDER */
 
 .vaspire-slider {
     margin-top: 50px;
     overflow: hidden;
     position: relative;
     white-space: nowrap;
 }
 /* TRACK */
 
 .vaspire-track {
     display: flex;
     gap: 60px;
     width: max-content;
     animation: scroll 40s linear infinite;
     /* 🔥 slowed */
 }
 /* Pause on hover (premium feel) */
 
 .vaspire-slider:hover .vaspire-track {
     animation-play-state: paused;
 }
 /* ITEM */
 
 .vaspire-item {
     font-size: 18px;
     font-size: 18px;
     font-weight: 600;
     color: #374151;
     /* background: #fff; */
     padding: 14px 28px;
     /* border-radius: 12px; */
     /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06); */
     white-space: nowrap;
     transition: .3s;
 }
 
 .vaspire-item:hover {
     background: #000000;
     color: #fff;
     transform: scale(1.05);
 }
 /* ANIMATION */
 
 @keyframes scroll {
     0% {
         transform: translateX(0);
     }
     100% {
         transform: translateX(-50%);
     }
 }
 /* RESPONSIVE */
 
 @media(max-width:768px) {
     .vaspire-head h2 {
         font-size: 30px;
     }
     .vaspire-track {
         gap: 30px;
         animation-duration: 20s;
         /* 🔥 smoother mobile */
     }
     .vaspire-item {
         font-size: 15px;
         padding: 10px 18px;
     }
 }
 /************************************************************************what we are******************************/
 /* Hero */
 /* HERO CHANGED NAME */
 
 padding: 110px 20px;
 text-align: center;
}
.v-hero h1 {
    font-size: 3rem;
    font-weight: 800;
}
.v-hero p {
    max-width: 750px;
    margin: auto;
    color: #e2e8f0;
}
.btn-primary {
    background: var(--accent);
    border: none;
    padding: 10px 22px;
    border-radius: 30px;
}

/* Section Title */
.section-title {
    font-weight: 800;
    text-align: center;
    margin-bottom: 40px;
}
.section-title span {
    color: var(--accent);
}

/* Cards */
.info-card {
    border: none;
    border-radius: 16px;
    transition: 0.3s;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    height: 100%;
}
.info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.icon-box {
    font-size: 28px;
    color: var(--accent);
    margin-bottom: 10px;
}

/* Vision */
.vision {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: white;
    border-radius: 18px;
}
.badge-custom {
    background: white;
    color: #0f172a;
    margin: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 500;
}

/* CTA */
.cta {
    background: var(--accent);
    color: white;
    border-radius: 16px;
    text-align: center;
    padding: 40px;
}
footer {
    text-align: center;
    padding: 25px;
    color: #64748b;
    font-size: 14px;
}

/*****************************************************************about us*************************************/

/********************************************************whychose*************************************/