/* --- CSS VARIABLES (COLOR PALETTE) --- */
:root {
    /* Main Brand Colors */
    --primary-color: #4687ed;
    /* Blue */
    --secondary-color: #ffc107;
    /* Yellow - For Accents & Highlights */
    --accent-red: #dc3545;
    /* Red - Sparingly used */

    /* Text & Background Colors */
    --text-heading: #333333;
    --text-body: #555555;
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --shadow-color: rgba(0, 0, 0, 0.08);
}

/* --- Global Styles --- */
body {
    /* font-family: 'Poppins', sans-serif; */
    padding-top: 80px;
    /* Adjusted for mobile */
    background-color: var(--bg-light);
    color: var(--text-body);
    overflow-x: hidden;
}

/* --- Navbar Core --- */
.navbar {
    background-color: var(--bg-white);
    box-shadow: 0 4px 20px var(--shadow-color);
    padding: 10px 0;
    transition: all 0.3s ease;
}

/* --- LOGO IMAGE STYLING --- */
.navbar-brand {
    padding: 0;
    display: flex;
    align-items: center;
}

.navbar-logo-img {
    max-height: 50px;
    /* Adjusted size */
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.navbar-logo-img:hover {
    transform: scale(1.05);
}

/* --- Nav Link Styling --- */
.navbar-nav .nav-link {
    color: var(--text-body);
    font-weight: 500;
    font-size: 15px;
    padding: 10px 14px !important;
    transition: color 0.3s ease;
    white-space: nowrap;
    position: relative;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-color);
}

/* Underline Effect (YELLOW ACCENT) */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 5px;
    left: 50%;
    background-color: var(--secondary-color);
    /* Yellow Underline */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

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

/* --- Mega Menu (Services) --- */
.dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px var(--shadow-color);
    padding: 25px;
    background-color: var(--bg-white);
    transition: all 0.3s ease;
}

@media (min-width: 992px) {
    .has-megamenu {
        position: static;
    }

    .megamenu {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
        border-radius: 0 0 12px 12px;
        display: none;
        border-top: 3px solid var(--primary-color);
    }

    .dropdown:hover .megamenu {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mega Menu Titles */
.megamenu-title {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--secondary-color);
    /* Yellow Border */
    display: inline-block;
}

.megamenu-list {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
}

.megamenu-list li a {
    text-decoration: none;
    color: var(--text-body);
    font-size: 13.5px;
    display: block;
    padding: 4px 0;
    transition: all 0.2s;
}

.megamenu-list li a:hover {
    color: var(--secondary-color);
    transform: translateX(5px);
}

/* --- FEATURE CARD (New Section for Dropdown Image) --- */
.megamenu-feature-card {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
}

.megamenu-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--secondary-color);
    /* Yellow Border on Hover */
}

.feature-img-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    /* Fixed height for consistency */
    background: #f9f9f9;
    border-radius: 8px;
    padding: 10px;
}

.feature-img-box img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* --- Call Button Styling (SOLID BLUE) --- */
.btn-call {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 5px;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(70, 135, 237, 0.2);
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-call:hover {
    background-color: var(--secondary-color);
    /* Dark Blue */
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(70, 135, 237, 0.3);
}

/* --- Mobile Menu Adjustments --- */
@media (max-width: 991px) {
    .navbar-collapse {
        background: var(--bg-white);
        padding: 20px;
        margin-top: 15px;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        max-height: 70vh;
        overflow-y: auto;
    }

    /* Important: Hide items marked with d-lg-block in mobile menu */
    .d-lg-block {
        display: none !important;
    }

    .megamenu {
        box-shadow: none;
        padding: 10px;
        background: #f8f9fa;
        margin-top: 10px;
        border-top: none;
    }

    .navbar-toggler {
        border: none;
        padding: 0;
        color: var(--primary-color);
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }
}

/* --- MEGA MENU ICONS STYLING --- */
.megamenu-list li a {
    text-decoration: none;
    color: var(--text-body);
    font-size: 13.5px;
    display: flex;
    /* Flexbox for perfect alignment */
    align-items: center;
    /* Vertically center icon and text */
    padding: 6px 0;
    /* Increased padding slightly */
    transition: all 0.2s;
}

/* Icon Styles */
.megamenu-list li a i {
    color: var(--primary-color);
    /* Blue Icon by default */
    width: 25px;
    /* Fixed width for perfect alignment */
    text-align: center;
    margin-right: 8px;
    /* Space between icon and text */
    font-size: 14px;
    transition: transform 0.2s ease;
}

/* Hover Effects */
.megamenu-list li a:hover {
    color: var(--primary-color);
    transform: translateX(5px);
}

.megamenu-list li a:hover i {
    color: var(--secondary-color);
    /* Icon turns Yellow on hover */
    transform: scale(1.1);
    /* Icon slightly grows */
}

/* --- MOBILE RESPONSIVENESS CHECKS --- */
@media (max-width: 991px) {

    /* Ensure dropdown links don't break on small screens */
    .megamenu-list li a {
        padding: 10px 0;
        border-bottom: 1px solid #f8f9fa;
        /* Subtle separator for mobile */
    }

    /* Adjust Icon spacing for touch targets */
    .megamenu-list li a i {
        font-size: 16px;
        width: 30px;
    }
}

/* --- HERO SECTION STYLES --- */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding: 60px 0;
    z-index: 1;
    overflow: hidden;
}

#heroCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Badge */
.badge-custom {
    background-color: rgba(255, 193, 7, 0.1);
    /* Yellow Tint */
    color: var(--primary-color);
    padding: 6px 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    border: 1px solid rgba(70, 135, 237, 0.2);
}

/* Typography & Slider */
h1.display-4 {
    font-weight: 200;
    line-height: 1.2;
    color: var(--text-heading);
}

.text-slider {
    color: var(--secondary-color);
    font-size: 40px;
}

.cursor-blink {
    color: var(--accent-red);
    animation: blink 0.7s infinite;
    /* height: 20px; */
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Hero Buttons */
.hero-section .btn-lg {
    padding: 10px 25px;
    font-size: 15px;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 5px;
    font-weight: 600;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* --- IMAGE & SLIDER ANIMATIONS --- */
.hero-img-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    animation: float 4s ease-in-out infinite;
}

.hero-slider-img {
    width: 100%;
    height: 320px;
    /* height: auto; */
    max-height: 450px;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 991px) {
    .hero-section {
        min-height: auto;
        padding-top: 40px;
        padding-bottom: 60px;
        text-align: center;
    }

    h1.display-4 {
        font-size: 2.5rem;
    }

    .hero-text-content {
        margin-bottom: 50px;
    }

    .d-flex.gap-3 {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    h1.display-4 {
        font-size: 2rem;
    }

    .text-slider {
        font-size: 0.9em;
    }

    p.lead {
        font-size: 1rem;
        padding: 0 10px;
    }

    .hero-img-wrapper {
        max-width: 90%;
    }

    .hero-slider-img {
        max-height: 300px;
    }

    .hero-section .d-flex {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-section .btn {
        width: 100%;
        max-width: 250px;
        margin-bottom: 10px;
    }
}


/* clint logos css start  */
/* --- NAIN CLIENT SLIDER STYLES --- */
.nain-client-section {
    background-color: #ffffff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

.section-subtitle-text {
    letter-spacing: 2px;
    font-size: 12px;
    margin-bottom: 20px;
}

/* Slider Viewport (Renamed) */
.nain-slider-area {
    height: 100px;
    margin: auto;
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* White Gradient Overlay */
.nain-slider-area::before,
.nain-slider-area::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100%;
    position: absolute;
    width: 100px;
    z-index: 2;
}

.nain-slider-area::before {
    left: 0;
    top: 0;
}

.nain-slider-area::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

/* Track Animation (Renamed) */
.nain-slide-track {
    display: flex;
    /* 200px Logo Width * 14 Logos = 2800px */
    width: calc(200px * 14);
    animation: nainScrollAnim 30s linear infinite;
}

/* Individual Item (Renamed) */
.client-logo-box {
    height: 80px;
    width: 200px;
    /* Fixed width per item */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}

.client-logo-box img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    object-fit: contain;

    /* Grayscale to Color Effect */
    /* filter: grayscale(100%); */
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover Effect */
.client-logo-box img:hover {
    /* filter: grayscale(0%); */
    opacity: 1;
    transform: scale(1.1);
}

/* Pause on Hover */
.nain-slider-area:hover .nain-slide-track {
    animation-play-state: paused;
}

/* --- ANIMATION KEYFRAMES --- */
@keyframes nainScrollAnim {
    0% {
        transform: translateX(0);
    }

    100% {
        /* 200px * 7 logos (First Set) = -1400px */
        transform: translateX(calc(-200px * 7));
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .client-logo-box {
        width: 150px;
        /* Smaller width on mobile */
        padding: 0 20px;
    }

    .nain-slide-track {
        /* Mobile Width Calculation: 150px * 14 */
        width: calc(150px * 14);
    }

    @keyframes nainScrollAnim {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-150px * 7));
        }
    }

    .nain-slider-area::before,
    .nain-slider-area::after {
        width: 50px;
    }
}

/* clint logos end  */




/* --- PREMIUM SCROLLABLE ABOUT SECTION --- */
.about-scroll-section {
    padding: 100px 0;
    /* NEW: Premium Light Blue-Grey Gradient Background */
    background: linear-gradient(180deg, #f8fbff 0%, #eef2f6 100%);
    position: relative;
    z-index: 1;
}

/* Background Shapes */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: -1;
    opacity: 0.5;
}

.shape-1 {
    top: -50px;
    left: -50px;
    width: 300px;
    height: 300px;
    background: rgba(70, 135, 237, 0.15);
    /* Blue Tint */
}

.shape-2 {
    bottom: 50px;
    right: -50px;
    width: 400px;
    height: 400px;
    background: rgba(255, 193, 7, 0.1);
    /* Yellow Tint */
}

/* 1. TYPOGRAPHY & HEADER */
.badge-title {
    color: var(--primary-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
    display: block;
    margin-bottom: 10px;
    border-left: 3px solid var(--secondary-color);
    padding-left: 10px;
}

.main-heading {
    font-size: 38px;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.3;
}

.highlight-yellow {
    color: var(--secondary-color);
    position: relative;
    display: inline-block;
}

/* 2. CUSTOM SCROLL BOX (White Box on Gradient Bg) */
.custom-scroll-box {
    max-height: 400px;
    overflow-y: auto;
    background: #ffffff;
    /* White bg for contrast */
    border-radius: 10px;
    border: 1px solid #e1e5ea;
    /* Subtle border */
    margin-top: 25px;
}

/* Scrollbar Design */
.custom-scroll-box::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll-box::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scroll-box::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

.custom-scroll-box::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Content Styling */
.lead-intro {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
}

.service-list-styled {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.service-list-styled li {
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.service-list-styled li i {
    color: var(--secondary-color);
    margin-right: 10px;
    flex-shrink: 0;
}

.sub-heading-text {
    color: var(--primary-color);
    font-weight: 700;
    margin-top: 10px;
}

.divider-line {
    height: 1px;
    background: #eee;
    width: 100%;
}

    /* text-align: justify; */


/* 3. VISUALS */
.about-visuals {
    position: relative;
    padding: 20px;
}

.image-frame {
    position: relative;
    z-index: 2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border: 5px solid #fff;
}

.main-pic {
    width: 100%;
    transition: transform 0.5s;
}

.image-frame:hover .main-pic {
    transform: scale(1.05);
}

.floating-tech-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
    animation: floatIcon 3s ease-in-out infinite;
    z-index: 3;
}

@keyframes floatIcon {

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

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

.glass-badge-box {
    position: absolute;
    bottom: -30px;
    left: -30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 20px 40px;
    border-radius: 15px;
    border-left: 5px solid var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 4;
}

.counter {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
    line-height: 1;
}

.badge-inner span {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
}

.about-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid rgba(70, 135, 237, 0.3);
    border-radius: 20px;
    z-index: 1;
    animation: expandRing 4s infinite linear;
}

@keyframes expandRing {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

/* --- ANIMATION CLASSES (To be controlled by JS) --- */
.anim-item {
    opacity: 0;
    /* Hidden initially */
    transition: all 1s ease-out;
}

/* Types of Animations */
.fade-left {
    transform: translateX(-50px);
}

.fade-right {
    transform: translateX(50px);
}

.fade-up {
    transform: translateY(30px);
}

/* Active State (Triggered by JS) */
.anim-active {
    opacity: 1;
    transform: translate(0, 0);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .about-scroll-section {
        padding: 60px 0;
    }

    .custom-scroll-box {
        max-height: 300px;
    }

    .about-visuals {
        margin-top: 60px;
        text-align: center;
    }

    .glass-badge-box {
        left: 50%;
        transform: translateX(-50%);
        bottom: -20px;
        width: 80%;
    }
}



/* sevices section start  */


/* --- PREMIUM SERVICES SECTION --- */
.services-section {
    padding: 100px 0;
    /* Soft Light Background to contrast with About Section */
    background-color: #f9fbff;
    overflow: hidden;
}

/* Background Pattern (Subtle Dots) */
.service-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--primary-color) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    opacity: 0.5;
    z-index: 0;
}

/* SECTION HEADER STYLES */
.badge-custom {
    background: rgba(70, 135, 237, 0.1);
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
}

.highlight-text {
    color: var(--primary-color);
    position: relative;
    z-index: 1;
}

.highlight-text::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(255, 193, 7, 0.3);
    /* Yellow Highlight */
    z-index: -1;
}

/* --- SERVICE CARD STYLING --- */
.service-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    /* Soft Shadow */
    transition: all 0.4s ease;
    border: 1px solid #f0f0f0;
    z-index: 1;

    /* Flexbox for Equal Height Content Alignment */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service-card:hover {
    transform: translateY(-10px);
    /* Lift Up Effect */
    box-shadow: 0 20px 40px rgba(70, 135, 237, 0.15);
    /* Blue Glow Shadow */
    border-color: transparent;
}

/* ICON STYLING */
.icon-wrapper {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(70, 135, 237, 0.1), rgba(70, 135, 237, 0.2));
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 25px;
    transition: all 0.5s ease;
}

/* Yellow Variant Icon */
.icon-wrapper.icon-yellow {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.2));
    color: #dcb008;
}

/* Icon Hover Animation */
.service-card:hover .icon-wrapper {
    transform: rotateY(360deg);
    /* 3D Spin */
    background: var(--secondary-color);
    color: #fff;
    box-shadow: 0 10px 20px rgba(70, 135, 237, 0.3);
}

.service-card:hover .icon-wrapper.icon-yellow {
    background: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(255, 193, 7, 0.3);
}

/* TEXT CONTENT */
.service-title {
    font-weight: 700;
    font-size: 20px;
    color: var(--primary-color);
    margin-bottom: 15px;
    transition: color 0.3s;
}

.service-card:hover .service-title {
    color: var(--primary-color);
}

.service-desc {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
    flex-grow: 1;
    /* Pushes Read More to bottom */
}

/* READ MORE LINK */
.read-more-link {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: all 0.3s;
}

.read-more-link i {
    transition: transform 0.3s;
}

.service-card:hover .read-more-link {
    color: var(--primary-color);
}

.service-card:hover .read-more-link i {
    transform: translateX(5px);
    /* Arrow Move Animation */
}

/* BOTTOM BORDER ANIMATION */
.card-border-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transition: width 0.4s ease;
}

.service-card:hover .card-border-bottom {
    width: 100%;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .services-section {
        padding: 60px 0;
    }

    .display-5 {
        font-size: 2.5rem;
    }
}


/* services section end  */



/* what we do section start  */
/* --- PREMIUM WHAT WE DO SECTION --- */
.what-we-do-section {
    padding: 100px 0;
    /* Very Light Blue Gradient Background */
    background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
    position: relative;
}

/* Background Decoration */
.bg-circle-blur {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(70, 135, 237, 0.05) 0%, transparent 70%);
    z-index: 0;
}

/* --- CARD STYLING --- */
.wwd-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 0;
    /* Removing padding from container to manage inside */
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy transition */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #edf2f7;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.wwd-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(70, 135, 237, 0.15);
    border-color: transparent;
}

/* --- IMAGE CONTAINER WITH BLOB --- */
.card-img-container {
    position: relative;
    width: 100%;
    height: 180px;
    /* Fixed Height for Image Area */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfcfc;
    /* Subtle grey top part */
    padding-top: 20px;
    overflow: hidden;
}

/* The Color Blob Behind Image */
.blob-bg {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(70, 135, 237, 0.1);
    /* Light Blue */
    border-radius: 50%;
    z-index: 0;
    transition: all 0.5s ease;
}

.blob-bg.blob-yellow {
    background: rgba(255, 193, 7, 0.15);
    /* Light Yellow */
}

/* Hover Effect on Blob */
.wwd-card:hover .blob-bg {
    transform: scale(1.5);
    /* Expands to fill background */
    opacity: 0.2;
}

/* The Image Itself */
.custom-img {
    position: relative;
    z-index: 1;
    max-height: 130px;
    /* Limits image height */
    width: auto;
    object-fit: contain;
    transition: transform 0.5s ease;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));

    /* Floating Animation */
    animation: smoothFloat 4s ease-in-out infinite;
}

@keyframes smoothFloat {

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

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

/* Zoom Image on Hover */
.wwd-card:hover .custom-img {
    transform: scale(1.1) translateY(-5px);
    animation-play-state: paused;
}

/* --- TEXT CONTENT --- */
.card-body-content {
    padding: 30px;
    text-align: center;
    flex-grow: 1;
    background: #fff;
    z-index: 2;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
    transition: color 0.3s;
}

.wwd-card:hover .card-title {
    color: var(--primary-color);
}

.card-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 0;
    /* Justify looks cleaner for long text */
    text-align: center;
}

/* --- BOTTOM ANIMATED LINE --- */
.hover-line {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, transparent);
    /* Invisible initially */
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.4s ease;
}

.wwd-card:hover .hover-line {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .what-we-do-section {
        padding: 60px 0;
    }

    .card-img-container {
        height: 160px;
    }

    .custom-img {
        max-height: 110px;
    }

    .card-desc {
        font-size: 14px;
    }
}

/* --- WHAT WE DO SECTION --- */
.what-we-do-section {
    padding: 100px 0;

    background: #f8fbff;
    position: relative;
}


#wwdCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 1;
    pointer-events: none;
}


.what-we-do-section .container {
    position: relative;
    z-index: 2;
}


.wwd-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #edf2f7;
    z-index: 2;
    /* कार्ड्स भी ऊपर रहें */
    display: flex;
    flex-direction: column;
}

/* what we do section end  */


/* call to action css start  */
/* --- DARK PREMIUM CTA SECTION --- */
.cta-dark-section {
    padding: 100px 0;
    background-color: #0b1120;
    /* Deep Dark Blue */
    position: relative;
    /* Mesh Gradient Background */
    background-image:
        radial-gradient(at 0% 0%, rgba(70, 135, 237, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(255, 193, 7, 0.1) 0px, transparent 50%);
}

/* 1. BACKGROUND GLOW ORBS */
.glow-orb {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.6;
    animation: floatGlow 8s infinite alternate;
}

.glow-blue {
    background: rgba(70, 135, 237, 0.2);
    top: -50px;
    left: -100px;
}

.glow-yellow {
    background: rgba(255, 193, 7, 0.15);
    bottom: -50px;
    right: -100px;
    animation-delay: -4s;
}

@keyframes floatGlow {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 30px);
    }
}

/* 2. LEFT SIDE CONTENT */
.badge-pill-outline {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
}

.text-gradient-yellow {
    background: linear-gradient(90deg, #fff, var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 3. ROTATING CIRCULAR BUTTON */
.circular-btn-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.circle-btn {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    z-index: 2;
    transition: transform 0.3s;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(70, 135, 237, 0.5);
}

.circular-btn-wrapper:hover .circle-btn {
    transform: scale(1.1);
    background: #fff;
    color: var(--primary-color);
}

.rotating-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: rotateText 10s linear infinite;
    z-index: 1;
}

@keyframes rotateText {
    0% {
        transform: rotate(0deg);
    }

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

/* 4. RIGHT SIDE: GLASS SLIDER CARD */
.glass-slider-card {
    background: rgba(255, 255, 255, 0.05);
    /* Very Transparent */
    backdrop-filter: blur(15px);
    /* Strong Blur */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
}

.glass-slider-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Image Side */
.slider-img-box {
    height: 350px;
    position: relative;
    overflow: hidden;
}

.slider-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.carousel-item:hover .slider-img-box img {
    transform: scale(1.1);
}

/* Text Side */
.slider-text-box {
    padding: 40px;
}

/* Glow Button */
.btn-glow {
    background: linear-gradient(90deg, var(--primary-color), #2b5db8);
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 5px 20px rgba(70, 135, 237, 0.4);
    display: inline-block;
    transition: all 0.3s;
}

.btn-glow:hover {
    color: #fff;
    box-shadow: 0 10px 30px rgba(70, 135, 237, 0.6);
    transform: translateY(-2px);
}

/* Custom Dots */
.custom-dots {
    bottom: -40px;
}

.custom-dots button {
    width: 40px !important;
    height: 3px !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    border: none !important;
}

.custom-dots button.active {
    background-color: var(--secondary-color) !important;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .cta-dark-section {
        padding: 60px 0;
    }

    .slider-img-box {
        height: 200px;
    }

    .slider-text-box {
        padding: 30px;
        text-align: center;
    }

    .circular-btn-wrapper {
        margin: 0 auto;
    }

    /* Center button on mobile */
    .cta-static-content {
        text-align: center;
        margin-bottom: 50px;
    }

    .custom-dots {
        bottom: -30px;
    }
}


/* what we do section start  */
/* --- PREMIUM SERVICES TABS SECTION --- */
.premium-services-tabs {
    padding: 100px 0;
    background-color: #f0f7ff;
    position: relative;
    z-index: 1;
}

/* CANVAS (BUBBLES) */
#bubblesCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Ensure Content is above canvas */
.premium-services-tabs .container {
    position: relative;
    z-index: 2;
}

/* --- LEFT SIDE: TAB BUTTONS --- */
.custom-tab-nav {
    background: #ffffff;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid #edf2f7;
}

.custom-tab-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 18px 25px;
    margin-bottom: 8px;
    border-radius: 10px;
    color: #555;
    background: transparent;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    font-weight: 500;
    width: 100%;
    /* Full width on desktop */
}

/* Icons in Nav */
.tab-icon {
    width: 35px;
    height: 35px;
    background: #f1f5f9;
    color: #888;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    transition: all 0.3s;
}

/* Hover State */
.custom-tab-nav .nav-link:hover {
    background: #f8fbff;
    color: var(--primary-color);
}

.custom-tab-nav .nav-link:hover .tab-icon {
    color: var(--primary-color);
    background: rgba(70, 135, 237, 0.1);
}

/* Active State */
.custom-tab-nav .nav-link.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 5px 15px rgba(70, 135, 237, 0.3);
}

.custom-tab-nav .nav-link.active .tab-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* --- RIGHT SIDE: CONTENT BOX --- */
.content-box {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    height: 100%;
    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

/* === SLIDING ANIMATION LOGIC === */
/* Bootstrap adds '.active' and '.show' classes.
   We use Animation keyframes to slide it in.
*/
.tab-pane.active {
    animation: slideInRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(50px) scale(0.95);
        /* Start slightly right and smaller */
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        /* End at normal position */
    }
}

/* Content Styling */
.tab-heading {
    font-weight: 700;
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 10px;
}

.tab-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--secondary-color);
    /* Yellow Line */
    border-radius: 2px;
}

.tab-desc {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
}

/* List Styling */
.service-list-grid {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-list-grid li {
    margin-bottom: 12px;
    font-size: 15px;
    color: #555;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.service-list-grid li i {
    margin-right: 12px;
    font-size: 18px;
    color: var(--secondary-color);
    /* Yellow Check Icon */
}

/* Two Column List */
.two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Image Animation */
.tab-img {
    max-height: 280px;
    width: auto;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
    /* Float Animation */
    animation: floatImg 3s ease-in-out infinite;
}

@keyframes floatImg {

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

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

/* --- RESPONSIVE CSS (Mobile & Tablet) --- */
@media (max-width: 991px) {

    .premium-services-tabs {
        padding: 60px 0;
    }

    /* 1. HORIZONTAL SCROLL BUTTONS (Chips) */
    .custom-tab-nav {
        flex-direction: row !important;
        overflow-x: auto;
        white-space: nowrap;
        padding: 5px 0 15px 0;
        gap: 10px;
        background: transparent;
        box-shadow: none;
        border: none;

        /* Hide Scrollbars */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .custom-tab-nav::-webkit-scrollbar {
        display: none;
    }

    /* Button Style on Mobile */
    .custom-tab-nav .nav-link {
        margin: 0;
        padding: 10px 20px;
        border-radius: 50px;
        /* Pill Shape */
        background: #ffffff;
        border: 1px solid #e1e5ea;
        color: #555;
        font-size: 14px;
        min-width: auto;
        flex-shrink: 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    /* Active State Mobile */
    .custom-tab-nav .nav-link.active {
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
        box-shadow: 0 4px 10px rgba(70, 135, 237, 0.3);
        transform: translateY(-2px);
    }

    .tab-icon {
        width: 20px;
        height: 20px;
        font-size: 12px;
        margin-right: 8px;
        background: transparent;
        /* Cleaner look on mobile */
    }

    .custom-tab-nav .nav-link.active .tab-icon {
        background: transparent;
        color: #fff;
    }

    /* 2. CONTENT AREA FIXES */
    .content-box {
        padding: 25px;
        text-align: center;
    }

    /* Image on Top */
    .col-md-5 {
        margin-bottom: 25px;
    }

    .tab-heading::after {
        left: 50%;
        transform: translateX(-50%);
        /* Center underline */
    }

    /* List alignment */
    .service-list-grid {
        text-align: left;
        display: inline-block;
        width: 100%;
    }

    .two-cols {
        grid-template-columns: 1fr;
        /* Stack single column */
    }
}

/* what we do section end  */



/* work flow section start  */
/* --- PREMIUM WORKFLOW SECTION --- */
.workflow-section {
    padding: 100px 0;
    background-color: #ffffff;
    overflow: hidden;
}

/* Divider Styling */
.divider-center {
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    margin: 0 auto;
    border-radius: 5px;
    position: relative;
}

.divider-center::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    width: 5px;
    height: 3px;
    background: var(--secondary-color);
}

.divider-center::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    width: 5px;
    height: 3px;
    background: var(--secondary-color);
}

/* PROCESS WRAPPER */
.process-wrapper {
    position: relative;
    margin-top: 50px;
    /* Using Flexbox to center the 5 columns cleanly */
    display: flex;
    justify-content: center;
}

.process-wrapper .row {
    width: 100%;
    justify-content: center;
    /* Centers the 5 items */
}

/* Custom Column Width for 5 Items (Desktop) */
@media (min-width: 992px) {
    .process-col {
        width: 20%;
        /* Exactly 5 items = 100% */
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* THE CONNECTING LINE (Desktop) */
.process-line {
    position: absolute;
    top: 60px;
    /* Aligns with the dots */
    left: 10%;
    right: 10%;
    height: 2px;
    background-image: linear-gradient(to right, #e1e5ea 50%, transparent 50%);
    background-size: 20px 100%;
    /* Dashed effect */
    z-index: 0;
}

/* CARD STYLING */
.process-card {
    text-align: center;
    padding: 20px 10px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.process-card:hover {
    transform: translateY(-10px);
}

/* Step Number */
.step-number {
    font-size: 60px;
    font-weight: 900;
    color: #f3f6f9;
    /* Very light grey */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    line-height: 1;
    transition: color 0.3s;
}

.process-card:hover .step-number {
    color: rgba(70, 135, 237, 0.1);
    /* Primary color fade */
}

/* Icon Circle */
.icon-circle {
    width: 80px;
    height: 80px;
    background: #fff;
    border: 2px solid #eef2f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 25px auto;
    font-size: 28px;
    color: var(--primary-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    position: relative;
}

.icon-circle.icon-yellow {
    color: #dcb008;
}

/* Hover Effect on Icon */
.process-card:hover .icon-circle {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 10px 25px rgba(70, 135, 237, 0.3);
    transform: rotateY(180deg);
}

.process-card:hover .icon-circle.icon-yellow {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    box-shadow: 0 10px 25px rgba(255, 193, 7, 0.3);
}

/* The Dot on the Line */
.step-dot {
    width: 12px;
    height: 12px;
    background: #e1e5ea;
    border-radius: 50%;
    margin: -65px auto 40px auto;
    /* Positions it exactly on the line */
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #e1e5ea;
    transition: all 0.3s;
    position: relative;
    z-index: 2;
}

.process-card:hover .step-dot {
    background: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
}

/* Text */
.process-title {
    font-weight: 700;
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.process-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* --- RESPONSIVE CSS (MOBILE) --- */
@media (max-width: 991px) {
    .workflow-section {
        padding: 60px 0;
    }

    /* Remove Horizontal Line */
    .process-line {
        display: none;
    }

    .process-wrapper {
        display: block;
        /* Stack items */
    }

    .process-col {
        margin-bottom: 30px;
    }

    /* Create Vertical Line Effect */
    .process-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        background: #eef2f6;
        transform: translateX(-50%);
        z-index: 0;
    }

    .process-card {
        background: #fff;
        padding: 20px;
        border-radius: 15px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    }

    .step-dot {
        display: none;
        /* Hide dots on mobile */
    }

    .icon-circle {
        margin-top: 0;
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .step-number {
        font-size: 40px;
        top: 10px;
        right: 20px;
        left: auto;
        transform: none;
    }
}

/* work flow section end  */
/* We are getting extra css start  */
/* --- EXTRA FEATURES SECTION --- */
.extra-features-section {
    padding: 100px 0;
    background-color: #fcfcfc;
    /* Almost white */
    position: relative;
}

/* Background Patterns */
.bg-pattern-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#e0e0e0 1.5px, transparent 1.5px);
    background-size: 25px 25px;
    opacity: 0.4;
    z-index: 0;
}

.bg-gradient-orb {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(70, 135, 237, 0.08) 0%, transparent 70%);
    z-index: 0;
}

/* Card Styling */
.extra-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid #f0f0f0;
    height: 100%;
}

.extra-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(70, 135, 237, 0.1);
}

/* Icon Box Design */
.icon-circle-box {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: all 0.4s ease;
    position: relative;
}

/* Blue Theme Icon */
.icon-circle-box.blue-theme {
    background: rgba(70, 135, 237, 0.1);
    color: var(--primary-color);
}

/* Yellow Theme Icon */
.icon-circle-box.yellow-theme {
    background: rgba(255, 193, 7, 0.1);
    color: #d6a206;
}

/* Icon Animation on Hover */
.extra-card:hover .icon-circle-box {
    transform: scale(1.1) rotate(5deg);
}

.extra-card:hover .icon-circle-box.blue-theme {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 10px 20px rgba(70, 135, 237, 0.3);
}

.extra-card:hover .icon-circle-box.yellow-theme {
    background: var(--secondary-color);
    color: #fff;
    box-shadow: 0 10px 20px rgba(255, 193, 7, 0.3);
}

/* Typography */
.feature-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.feature-text {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Bottom Hover Line */
.card-hover-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transition: width 0.4s ease;
}

.extra-card:hover .card-hover-line {
    width: 100%;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .extra-features-section {
        padding: 60px 0;
    }

    .extra-card {
        padding: 30px 20px;
    }
}

/* we are getting extra css end  */




/* --- DIGITAL GROWTH & STATS SECTION --- */
.digital-growth-section {
    padding: 100px 0;
    /* Clean Light Background */
    background: linear-gradient(135deg, #f9fbfd 0%, #ffffff 100%);
    overflow: hidden;
}

/* Background Map Pattern */
/* --- DIGITAL GROWTH SECTION --- */
/* --- DIGITAL GROWTH SECTION --- */
.digital-growth-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f9fbfd 0%, #a5c8ef 100%);
    overflow: hidden;
}

.bg-map-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../Image/World_map.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.03;
    z-index: 0;
}

/* TYPEWRITER CURSOR */
.txt-type {
    color: var(--primary-color);
}

/* 
.cursor {
    display: inline-block;
    width: 3px;
    background-color: #333;
    animation: blink 1s infinite;
} */

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* VERTICAL TEXT SLIDER */
.text-carousel-wrapper {
    background: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--secondary-color);
    display: flex;
    align-items: center;
    max-width: 500px;
}

.carousel-icon {
    font-size: 20px;
    margin-right: 15px;
}

.vertical-slider {
    height: 24px;
    overflow: hidden;
    flex-grow: 1;
}

.slider-box {
    animation: slideVertical 10s infinite;
}

.slider-text {
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes slideVertical {

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

    25%,
    45% {
        transform: translateY(-24px);
    }

    50%,
    70% {
        transform: translateY(-48px);
    }

    75%,
    95% {
        transform: translateY(-72px);
    }

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

/* ECOSYSTEM & CARDS */
.ecosystem-wrapper {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-circle {
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(70, 135, 237, 0.2);
    position: relative;
    z-index: 2;
}

.core-img {
    width: 80px;
    height: auto;
}

.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    animation: pulseRing 3s infinite;
    z-index: -1;
}

@keyframes pulseRing {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    100% {
        width: 250%;
        height: 250%;
        opacity: 0;
    }
}

.float-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #fff;
    animation: floatMove 4s ease-in-out infinite;
    min-width: 200px;
}

.icon-box-sm {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}

.bg-blue {
    background: var(--primary-color);
}

.bg-yellow {
    background: var(--secondary-color);
}

.bg-purple {
    background: #9b59b6;
}

.card-seo {
    top: 10%;
    left: 0;
    animation-delay: 0s;
}

.card-ads {
    top: 40%;
    right: -20px;
    animation-delay: 1.5s;
}

.card-social {
    bottom: 10%;
    left: 20px;
    animation-delay: 3s;
}

@keyframes floatMove {

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

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

.feature-pill {
    background: #fff;
    padding: 8px 15px;
    border-radius: 50px;
    border: 1px solid #eee;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.counter-strip {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
}

.counter-num {
    font-size: 42px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.counter-label {
    font-size: 14px;
    color: #777;
    font-weight: 600;
    text-transform: uppercase;
}

.border-end-custom {
    border-right: 1px solid #eee;
}

/* RESPONSIVE CSS */
@media (max-width: 991px) {
    .digital-growth-section {
        padding: 60px 0;
    }

    /* Center text on mobile */
    .digital-growth-section .col-lg-6.order-2 {
        text-align: center;
    }

    .text-carousel-wrapper {
        margin: 0 auto 20px auto;
    }

    .d-flex.flex-wrap.gap-3 {
        justify-content: center;
    }

    /* Ecosystem Adjustments */
    .ecosystem-wrapper {
        height: 320px;
        margin-bottom: 30px;
    }

    .card-seo {
        left: 50%;
        transform: translateX(-50%);
        animation: none;
        top: 0;
    }

    .card-ads {
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        animation: none;
    }

    .card-social {
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        bottom: auto;
        animation: none;
    }

    .border-end-custom {
        border-right: none;
    }
}

/* --- RESPONSIVE CSS (MOBILE: KEEP DESKTOP LOOK BUT SMALLER) --- */
@media (max-width: 991px) {

    .digital-growth-section {
        padding: 50px 0;
    }

    /* 1. CONTAINER ADJUSTMENTS */
    .ecosystem-wrapper {
        height: 320px;
        /* मोबाइल के लिए हाइट कम की */
        margin-top: 20px;
        /* Flex नहीं, Block ही रखेंगे ताकि Absolute positioning काम करे */
        display: block;
    }

    /* 2. CENTER CORE (Logo Small) */
    .core-circle {
        width: 80px;
        height: 80px;
        /* छोटा लोगो */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .core-img {
        width: 45px;
    }

    /* Pulse Ring Small */
    .pulse-ring {
        border-width: 1px;
    }

    /* 3. FLOATING CARDS (Mini Version) */
    .float-card {
        padding: 8px 12px;
        /* पैडिंग कम की */
        border-radius: 8px;
        gap: 8px;
        min-width: auto;
        /* फिक्स चौड़ाई हटाई */
        width: 140px;
        /* मोबाइल के लिए फिक्स छोटी चौड़ाई */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    /* Card Icons Small */
    .icon-box-sm {
        width: 30px;
        height: 30px;
        font-size: 14px;
        border-radius: 6px;
    }

    /* Card Text Small */
    .float-card h6 {
        font-size: 11px;
        margin-bottom: 2px;
    }

    .float-card small {
        font-size: 9px;
        line-height: 1.2;
        display: block;
    }

    /* 4. POSITIONS FOR MOBILE (Pass-Pass laye) */

    /* SEO Card: Top Left */
    .card-seo {
        top: 10px;
        left: 0;
        right: auto;
        transform: none;
        /* Center alignment hataya */
        animation: floatMoveMobile 4s ease-in-out infinite;
    }

    /* Ads Card: Middle Right */
    .card-ads {
        top: 30%;
        right: 0;
        left: auto;
        animation: floatMoveMobile 4s ease-in-out infinite;
        animation-delay: 1.5s;
    }

    /* Social Card: Bottom Left */
    .card-social {
        bottom: 0;
        left: 10px;
        top: auto;
        animation: floatMoveMobile 4s ease-in-out infinite;
        animation-delay: 3s;
    }

    /* Animation thoda kam hilne wala */
    @keyframes floatMoveMobile {

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

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

    /* Other Mobile Fixes */
    .digital-growth-section .col-lg-6.order-2 {
        text-align: center;
    }

    .text-carousel-wrapper {
        margin: 0 auto 20px auto;
    }

    .d-flex.flex-wrap.gap-3 {
        justify-content: center;
    }

    .border-end-custom {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 20px;
    }
}


/* contact form css start  */
/* --- NAIN SOFTECH REPLICA STYLES (WITH MAP) --- */

.ns2-section-wrapper {
    position: relative;
    padding: 80px 20px;
    background: #fff;
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
}

/* --- BACKGROUND BLOBS --- */
.ns2-blob {
    position: absolute;
    z-index: 0;
    opacity: 1;
}

.blob-teal {
    top: 10%;
    left: -5%;
    width: 400px;
    height: 500px;
    background: var(--primary-color);
    border-radius: 40% 50% 50% 40%;
    transform: rotate(-10deg);
}

.blob-orange {
    bottom: -10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: var(--secondary-color);
    border-radius: 50%;
}

.blob-small {
    top: 15%;
    left: 18%;
    width: 60px;
    height: 60px;
    background: var(--accent-red);
    border-radius: 50%;
}

/* --- CONTAINER --- */
.ns2-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- MAIN CARD --- */
.ns2-card {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    margin-bottom: 40px;
    /* Gap between Form and Map */
}

/* LEFT PANEL */
.ns2-left-panel {
    flex: 0 0 40%;
    background: linear-gradient(135deg, var(--primary-color)0%, var(--accent-red) 40%, var(--secondary-color) 100%);
    padding: 50px 40px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ns2-heading {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    opacity: 0.9;
}

.ns2-main-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.ns2-desc {
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Contact Info */
.ns2-contact-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.ns2-icon {
    font-size: 20px;
    margin-right: 15px;
    margin-top: 2px;
}

.ns2-label-text {
    display: block;
    font-size: 12px;
    opacity: 0.7;
}

.ns2-value {
    font-size: 16px;
    font-weight: 700;
}

/* Socials */
.ns2-socials a {
    color: #fff;
    font-size: 18px;
    margin-right: 20px;
    transition: 0.3s;
}

.ns2-socials a:hover {
    opacity: 0.7;
}

/* RIGHT PANEL */
.ns2-right-panel {
    flex: 0 0 60%;
    background: #fff;
    padding: 50px;
}

.ns2-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ns2-col-half {
    width: calc(50% - 10px);
}

.ns2-col-full {
    width: 100%;
}

/* Inputs */
.ns2-label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
}

.ns2-input-group {
    position: relative;
}

.ns2-input,
.ns2-textarea {
    width: 100%;
    padding: 12px 15px 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    outline: none;
    transition: 0.3s;
}

.ns2-field-icon {
    position: absolute;
    right: 15px;
    top: 14px;
    color: var(--secondary-color);
    pointer-events: none;
}

.small-icon {
    font-size: 12px;
    top: 16px;
}

.ns2-input:focus,
.ns2-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(40, 101, 167, 0.1);
}

.ns2-textarea {
    min-height: 80px;
    resize: none;
}

select.ns2-input {
    appearance: none;
    cursor: pointer;
}

/* Submit Button */
.ns2-btn-submit {
    width: 100%;
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(37, 89, 211, 0.2);
}

.ns2-btn-submit:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}

/* --- MAP STYLING (NEW) --- */
.ns2-map-wrapper {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 5px solid #fff;
    /* White border frame */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.ns2-map-iframe {
    width: 100%;
    /* Responsive Width */
    height: 450px;
    /* Fixed Height */
    display: block;
}

/* RESPONSIVE */
@media (max-width: 991px) {

    .ns2-left-panel,
    .ns2-right-panel {
        flex: 0 0 100%;
        width: 100%;
    }

    .ns2-col-half {
        width: 100%;
    }

    .ns2-right-panel {
        padding: 30px 20px;
    }

    .blob-teal {
        width: 200px;
        height: 200px;
        left: -10%;
    }

    .blob-orange {
        width: 200px;
        height: 200px;
        right: -10%;
    }

    /* Map Responsive Height for Mobile */
    .ns2-map-iframe {
        height: 350px;
    }
}




/* --- PREMIUM ELASTIC SECTION --- */
.elastic-section {
    padding: 80px 0;
    background: #fff;
    overflow: hidden;
}

.elastic-header {
    margin-bottom: 40px;
}

/* CONTAINER (FLEXBOX) */
.elastic-container {
    display: flex;
    width: 90%;
    /* थोडा गैप साइड्स में */
    max-width: 1200px;
    height: 400px;
    /* फिक्स हाइट डेस्कटॉप पर */
    margin: 0 auto;
    gap: 15px;
    /* पैनल्स के बीच गैप */
}

/* INDIVIDUAL PANELS */
.elastic-panel {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    border-radius: 30px;
    /* गोल किनारे */
    color: #fff;
    cursor: pointer;
    flex: 0.5;
    /* डिफॉल्ट छोटी साइज */
    margin: 10px;
    position: relative;
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Smooth Animation */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* ACTIVE STATE (Expanded) */
.elastic-panel.active {
    flex: 5;
    /* बड़ी साइज */
    box-shadow: 0 20px 40px rgba(70, 135, 237, 0.3);
}

/* Dark Overlay on Images */
.panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.1) 100%);
    transition: background 0.4s;
}

.elastic-panel.active .panel-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

/* CONTENT INSIDE PANEL */
.panel-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    opacity: 0;
    /* शुरू में गायब */
    transition: opacity 0.4s ease-in 0.3s;
    /* थोड़ा डिले के साथ दिखेगा */
    z-index: 2;
}

/* Show Content ONLY when Active */
.elastic-panel.active .panel-content {
    opacity: 1;
}

/* Icon */
.icon-circle-glass {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Headings */
.elastic-panel h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
    transform: translateY(20px);
    transition: transform 0.4s;
}

.elastic-panel.active h3 {
    transform: translateY(0);
}

/* Hidden Description */
.panel-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 80%;
    /* टेक्स्ट को ज्यादा फैलने न दें */
    display: none;
    /* छोटी स्क्रीन या इनएक्टिव स्टेट में न दिखे */
}

.elastic-panel.active .panel-desc {
    display: block;
    /* सिर्फ एक्टिव होने पर दिखे */
    animation: fadeInText 0.5s ease-in;
}

@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- RESPONSIVE (Mobile) --- */
@media (max-width: 991px) {
    .elastic-container {
        flex-direction: column;
        /* एक के नीचे एक */
        height: 600px;
        /* मोबाइल पर टोटल हाइट */
        width: 95%;
    }

    .elastic-panel {
        width: 100%;
        margin: 5px 0;
        flex: 1;
        /* सब बराबर */
        border-radius: 20px;
    }

    /* मोबाइल पर क्लिक करने पर हाइट बढ़ेगी */
    .elastic-panel.active {
        flex: 5;
    }

    .elastic-panel h3 {
        font-size: 20px;
        margin-bottom: 5px;
    }

    .icon-circle-glass {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .panel-content {
        bottom: 20px;
        left: 20px;
    }

    .panel-desc {
        font-size: 13px;
        max-width: 100%;
    }
}


/* review section start  */
/* --- NAIN SOFTECH BRAND REVIEW SECTION (ns3) --- */

.ns3-review-section {
    padding: 100px 0;
    position: relative;
    background: #f8f9fa;
    /* Light Gray Clean BG */
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
}

/* Background Decoration (Subtle Brand Colors) */
.ns3-bg-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.1;
    z-index: 0;
}

.circle-1 {
    top: -10%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: #2563eb;
    /* Brand Blue */
}

.circle-2 {
    bottom: -10%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: #f59e0b;
    /* Brand Gold */
}

.ns3-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}

/* Header Styling */
.ns3-badge {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 15px;
}

.ns3-title {
    font-size: 42px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px;
}

.ns3-highlight {
    color: #2563eb;
}

/* Blue Highlight */

.ns3-underline {
    width: 60px;
    height: 4px;
    background: #f59e0b;
    /* Gold Line */
    margin: 0 auto 60px auto;
    border-radius: 2px;
}

/* --- 3D SLIDER STYLES --- */
.ns3-slider-wrapper {
    position: relative;
    width: 100%;
    height: 350px;
    /* Slider Height */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    /* 3D Depth */
}

/* The Track keeps cards centered */
.ns3-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CARD DESIGN */
.ns3-card {
    position: absolute;
    width: 500px;
    max-width: 90%;
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: scale(0.8);
    z-index: 0;
}

/* ACTIVE CARD (Middle) */
.ns3-card.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 10;
    border-top: 4px solid #2563eb;
    /* Blue Top Border */
    box-shadow: 0 25px 50px rgba(37, 99, 235, 0.15);
}

/* PREV CARD (Left) */
.ns3-card.prev {
    opacity: 0.5;
    transform: translateX(-350px) scale(0.85);
    z-index: 5;
    filter: blur(2px);
    cursor: pointer;
}

/* NEXT CARD (Right) */
.ns3-card.next {
    opacity: 0.5;
    transform: translateX(350px) scale(0.85);
    z-index: 5;
    filter: blur(2px);
    cursor: pointer;
}

/* Content Inside Card */
.ns3-quote {
    font-size: 40px;
    color: #f59e0b;
    /* Gold Quote */
    margin-bottom: 20px;
    opacity: 0.3;
}

.ns3-text {
    font-size: 16px;
    line-height: 1.7;
    color: #475569;
    font-style: italic;
    margin-bottom: 30px;
}

.ns3-user {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.ns3-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #2563eb;
    padding: 2px;
}

.ns3-name {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    text-align: left;
}

.ns3-role {
    font-size: 13px;
    color: #64748b;
    text-align: left;
    display: block;
}

.ns3-stars {
    color: #f59e0b;
    font-size: 14px;
    letter-spacing: 2px;
}

/* NAVIGATION BUTTONS */
.ns3-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #2563eb;
    font-size: 18px;
    cursor: pointer;
    z-index: 20;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

.ns3-nav-btn:hover {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
}


/* --- RESPONSIVE (MOBILE FIX) --- */
@media (max-width: 900px) {
    .ns3-title {
        font-size: 32px;
    }

    .ns3-slider-wrapper {
        height: 400px;
    }

    .ns3-card {
        width: 100%;
        padding: 30px;
    }

    /* Mobile par side wale cards hide kar denge taaki beech wala clear dikhe */
    .ns3-card.prev,
    .ns3-card.next {
        opacity: 0;
        pointer-events: none;
    }

    /* Buttons ko thoda adjust karein */
    .ns3-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .prev-btn {
        left: -10px;
    }

    .next-btn {
        right: -10px;
    }
}

/* footer section css start  */

/* --- NAIN SOFTECH FINAL PREMIUM FOOTER --- */

:root {
    /* Your Brand Colors */
    --primary-color: #4687ed;
    /* Blue */
    --secondary-color: #ffc107;
    /* Yellow */
    --text-heading: #333333;
    --text-body: #555555;
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
}

.nsp-footer-wrapper {
    position: relative;
    background-color: var(--bg-light);
    padding-top: 80px;
    font-family: 'Segoe UI', sans-serif;
    overflow: hidden;
    margin-top: 50px;
}

/* Background Pattern */
.nsp-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--primary-color) 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.nsp-container {
    position: relative;
    z-index: 2;
    padding-bottom: 60px;
}

/* --- COL 1: BRANDING --- */
.nsp-logo-link {
    display: inline-block;
    margin-bottom: 25px;
}

.nsp-main-logo {
    height: 55px;
    width: auto;
    transition: 0.3s;
}

.nsp-main-logo:hover {
    transform: scale(1.05);
}

.nsp-desc {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: 40px;
 

}

.nsp-sm-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.nsp-social-grid {
    display: flex;
    gap: 10px;
    /* justify-content: center; */
}

.nsp-social-grid a {
    width: 40px;
    height: 40px;
    background: var(--bg-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.nsp-social-grid a:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    transform: translateY(-3px);
    border-color: var(--primary-color);
}

/* --- COL 2 & 3: LINKS --- */
.nsp-heading {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
    display: inline-block;
}

.nsp-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--secondary-color);
    border-radius: 2px;
}

.nsp-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nsp-links li {
    margin-bottom: 12px;
}

.nsp-links a {
    color: var(--text-body);
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
}

.nsp-links a:hover {
    color: var(--primary-color);
    transform: translateX(5px);
    font-weight: 600;
}

.nsp-links a::before {
    content: '›';
    opacity: 0;
    margin-right: 5px;
    color: var(--secondary-color);
    font-weight: bold;
    transition: 0.3s;
}

.nsp-links a:hover::before {
    opacity: 1;
    margin-right: 8px;
}

.nsp-hiring-badge {
    background: var(--secondary-color);
    color: #000;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    font-weight: 800;
    vertical-align: middle;
}

/* --- COL 4: CONTACT CARD (FIXED ICONS & RESPONSIVE) --- */
.nsp-contact-card {
    background: var(--bg-white);
    padding: 35px;
    border-radius: 16px;
    border-top: 5px solid var(--primary-color);
    position: relative;
    overflow: hidden;
    transition: 0.4s;
}

.nsp-contact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(70, 135, 237, 0.15) !important;
}

.nsp-card-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 25px;
}

.nsp-contact-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nsp-contact-list li {
    display: flex;
    align-items: flex-start;
    /* Ensures icon stays at top if text wraps */
    gap: 15px;
}

/* --- THE FIX: ICON STYLES --- */
.nsp-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    /* Ensures icon never shrinks */
    flex-shrink: 0;
    /* Prevents flexbox squeezing */
    background: rgba(70, 135, 237, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: 0.3s;
    margin-top: 2px;
    /* Visual alignment with text */
}

.nsp-contact-list li:hover .nsp-icon {
    background: var(--secondary-color);
    color: #000;
}

.nsp-info {
    flex: 1;
    /* Takes remaining space */
}

.nsp-info span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 2px;
}

.nsp-info strong,
.nsp-info a {
    color: var(--text-heading);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: block;
    line-height: 1.4;
    /* Better spacing for multi-line text */
}

.nsp-info a:hover {
    color: var(--primary-color);
}


/* --- BOTTOM BAR --- */
.nsp-bottom-bar {
    background-color: var(--primary-color);
    color: var(--bg-white);
    padding: 20px 0;
    font-size: 14px;
}

.nsp-creator-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #000;
    background-color: var(--bg-white);
    /* background: rgba(255, 255, 255, 0.15); */
    padding: 6px 15px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: 0.3s;
}

.nsp-creator-badge:hover {
    background: var(--bg-white);
}

.muted-text {
    font-size: 12px;
    opacity: 0.8;
    text-transform: uppercase;
}

.nsp-creator-badge:hover .muted-text {
    color: var(--text-heading);
}

.nsp-dev-img {
    height: 25px;
    width: auto;

    transition: 0.4s;
}

.nsp-creator-badge:hover .nsp-dev-img {
    filter: none;
    transform: scale(1.1);
}

/* ANIMATION */
.nsp-anim-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.nsp-anim-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .nsp-bottom-bar {
        text-align: center;
    }

    .nsp-creator-badge {
        margin-top: 10px;
    }

    .nsp-contact-card {
        padding: 25px;
        margin-top: 20px;
    }

    .nsp-social-grid {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    .nsp-desc {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.7;
    margin : 20px;
 

}
}

/* footer section css end  */


/* team section css start  */
/* --- PREMIUM SPOTLIGHT TEAM SLIDER (NSP-TEAM) - MOBILE FIXED --- */



.nsp-team-section {
    padding: 80px 0;
    background-color: var(--bg-light);
    font-family: 'Segoe UI', sans-serif;
    overflow: hidden;
}

/* Header */
.nsp-badge {
    background: rgba(70, 135, 237, 0.1);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 15px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 15px;
}

.nsp-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.nsp-highlight {
    color: var(--primary-color);
}

.nsp-divider {
    width: 60px;
    height: 4px;
    background: var(--secondary-color);
    margin: 0 auto;
    border-radius: 2px;
}

/* --- SLIDER WRAPPER --- */
.nsp-slider-wrapper {
    position: relative;
    width: 100%;
    height: 520px;
    /* Space for cards */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    perspective: 1000px;
}

.nsp-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- CARD STYLING --- */
.nsp-card {
    position: absolute;
    width: 320px;
    /* Desktop Width */
    background: var(--bg-white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 0;
    z-index: 0;
    transform: scale(0.8);
    /* Initially hidden to prevent glitch */
    visibility: hidden;
}

/* ACTIVE STATE (Center & Big) */
.nsp-card.active {
    opacity: 1;
    z-index: 10;
    visibility: visible;
    transform: scale(1.1);
    /* Big zoom on Desktop */
    box-shadow: 0 25px 50px rgba(70, 135, 237, 0.25);
}

/* SIDE CARDS (Desktop Only) */
.nsp-card.next {
    opacity: 0.6;
    z-index: 5;
    visibility: visible;
    transform: translateX(380px) scale(0.9);
    filter: blur(3px);
    cursor: pointer;
}

.nsp-card.prev {
    opacity: 0.6;
    z-index: 5;
    visibility: visible;
    transform: translateX(-380px) scale(0.9);
    filter: blur(3px);
    cursor: pointer;
}

/* IMAGE AREA */
.nsp-img-holder {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.nsp-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.nsp-card:hover .nsp-img-holder img {
    transform: scale(1.1);
}

/* SOCIAL OVERLAY */
.nsp-social-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(70, 135, 237, 0.9);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 30px;
    opacity: 0;
    transition: 0.4s ease-in-out;
}

.nsp-card:hover .nsp-social-overlay {
    opacity: 1;
}

.nsp-social-icons {
    display: flex;
    gap: 15px;
    transform: translateY(30px);
    transition: 0.4s ease-in-out 0.1s;
}

.nsp-card:hover .nsp-social-icons {
    transform: translateY(0);
}

.nsp-social-icons a {
    width: 40px;
    height: 40px;
    background: var(--bg-white);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
}

.nsp-social-icons a:hover {
    background: var(--secondary-color);
    color: var(--text-heading);
    transform: translateY(-5px);
}

/* CONTENT INFO */
.nsp-card-content {
    padding: 25px;
    text-align: center;
    position: relative;
}

.nsp-card.active .nsp-card-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background: var(--secondary-color);
    border-radius: 10px 10px 0 0;
}

.nsp-card-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 5px;
}

.nsp-role {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* NAVIGATION BUTTONS */
.nsp-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--bg-white);
    color: var(--primary-color);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 20;
    transition: 0.3s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nsp-nav-btn:hover {
    background: var(--primary-color);
    color: var(--bg-white);
    box-shadow: 0 15px 40px rgba(70, 135, 237, 0.3);
}

.prev-btn {
    left: 5%;
}

.next-btn {
    right: 5%;
}


/* ==============================================
   MOBILE FIX (SAHI SETTING)
   ============================================== */
@media (max-width: 900px) {

    .nsp-slider-wrapper {
        height: 500px;
    }

    /* 1. Mobile par CARD ka size screen ke hisab se set karo */
    .nsp-card {
        width: 300px;
        /* Mobile safe width */
        max-width: 90%;
    }

    /* 2. Active Card - NO EXTRA ZOOM, Clean View */
    .nsp-card.active {
        transform: scale(1) translateX(0) !important;
        /* Original Size */
        opacity: 1;
        visibility: visible;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        /* Halka Shadow */
    }

    /* 3. Next/Prev Cards - PURI TARAH HIDE (No Blur Image) */
    .nsp-card.next,
    .nsp-card.prev {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: scale(0.5) !important;
        /* Chhota karke gayab */
        filter: none !important;
        /* Blur hata diya */
        pointer-events: none;
        /* Click disable */
    }

    /* 4. Buttons Adjustments for Mobile */
    .nsp-nav-btn {
        width: 45px;
        height: 45px;
        background: rgba(255, 255, 255, 0.9);
        /* Thoda transparent */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }
}




/* --- COMPACT & BRANDED BANNER SECTION --- */

.about-banner {
    position: relative;
    width: 100%;
    /* Height Reduced for Compact Look */
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 30px 0;
    /* Vertical Padding */

    /* Background Image Setup */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* Parallax Effect */
}

/* 1. Dark Blue Overlay (Using Brand Blue mixed with Black) */
.about-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradient: Dark Black to Transparent Blue */
    background: linear-gradient(90deg, #020617 0%, rgba(70, 135, 237, 0.8) 100%);
    z-index: 1;
    opacity: 0.9;
}

/* 2. Grid Texture */
.about-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    /* Smaller Grid */
    z-index: 1;
    pointer-events: none;
}

.about-banner .container {
    position: relative;
    z-index: 3;
}

/* --- TEXT CONTENT --- */
.text-content {
    flex: 1;
    padding-right: 20px;
}

/* Main Heading */
.about-banner h1 {
    color: var(--bg-white);
    font-size: 2.2rem;
    /* Compact Size */
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    /* Reveal Animation */
    opacity: 0;
    animation: slideUpFade 0.8s ease forwards 0.2s;
}

/* Yellow Underline for Heading */
.about-banner h1::after {
    content: '.';
    color: var(--secondary-color);
    /* Yellow Dot */
    font-size: 2.5rem;
    line-height: 0;
}

/* Subtitle */
.subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin-bottom: 15px;
    font-weight: 400;
    max-width: 500px;

    border-left: 3px solid var(--secondary-color);
    /* Yellow Border */
    padding-left: 12px;

    opacity: 0;
    animation: slideUpFade 0.8s ease forwards 0.4s;
}

/* Breadcrumb (Glass Effect) */
.breadcrumb {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    padding: 5px 15px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    color: #fff;
    opacity: 0;
    animation: slideUpFade 0.8s ease forwards 0.6s;
}

.breadcrumb a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.breadcrumb a:hover {
    color: var(--secondary-color);
    /* Yellow on Hover */
}

.breadcrumb span {
    margin: 0 8px;
    color: var(--secondary-color);
    /* Yellow Separator */
    font-size: 14px;
}

/* --- COMPACT ANIMATED RING (VISUALS) --- */
.visual-content {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.tech-ring {
    position: relative;
    width: 200px;
    /* Much Smaller */
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Core Glow (Blue) */
.tech-ring::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.8;
    animation: pulse 3s infinite ease-in-out;
}

/* Ring 1 - Solid Blue */
.ring-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 2px solid var(--primary-color);
    /* Blue */
    border-bottom: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: rotate 12s linear infinite;
}

/* Ring 2 - Dashed Yellow */
.ring-2 {
    position: absolute;
    width: 70%;
    height: 70%;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-left: 2px solid var(--secondary-color);
    /* Yellow Accent */
    border-right: 2px solid var(--secondary-color);
    border-radius: 50%;
    animation: rotate-reverse 15s linear infinite;
}

/* Ring 3 - Dotted Red (Accent) */
.ring-3 {
    position: absolute;
    width: 45%;
    height: 45%;
    border: 2px dotted var(--accent-red);
    /* Red Accent */
    border-radius: 50%;
    animation: rotate 8s linear infinite;
}

/* Particles */
.particle {
    position: absolute;
    border-radius: 50%;
}

.p1 {
    width: 6px;
    height: 6px;
    background: var(--secondary-color);
    top: 0;
    left: 50%;
    animation: float 3s ease-in-out infinite;
}

.p2 {
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    bottom: 20%;
    right: 10%;
    animation: float 4s ease-in-out infinite 1s;
}

.p3 {
    width: 5px;
    height: 5px;
    background: #fff;
    top: 40%;
    left: 10%;
    animation: float 5s ease-in-out infinite 0.5s;
}

/* --- KEYFRAME ANIMATIONS --- */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes rotate-reverse {
    from {
        transform: rotate(360deg);
    }

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

@keyframes pulse {

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

    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
}

@keyframes float {

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

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

/* --- RESPONSIVE (MOBILE) --- */
@media (max-width: 991px) {
    .about-banner {
        min-height: auto;
        padding: 50px 15px;
        /* Even tighter on mobile */
    }

    .container {
        flex-direction: column-reverse;
        /* Text bottom, Ring top */
        text-align: center;
        justify-content: center;
    }

    .text-content {
        padding-right: 0;
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .subtitle {
        border-left: none;
        border-bottom: 2px solid var(--secondary-color);
        /* Bottom border on mobile */
        padding-left: 0;
        padding-bottom: 8px;
        font-size: 0.9rem;
    }

    .about-banner h1 {
        font-size: 1.8rem;
        /* Smaller Heading */
    }

    .visual-content {
        justify-content: center;
        margin-bottom: 10px;
    }

    .tech-ring {
        width: 140px;
        /* Small Ring for Mobile */
        height: 140px;
    }
}


/* --- CAREER PAGE STYLES --- */

/* --- ROOT COLORS --- */


/* --- 1. COMPACT BANNER --- */
.about-banner {
    position: relative;
    width: 100%;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 30px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.about-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #020617 0%, rgba(70, 135, 237, 0.8) 100%);
    z-index: 1;
    opacity: 0.9;
}

.about-banner h1 {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 5px;
    opacity: 0;
    animation: slideUpFade 0.8s ease forwards 0.2s;
}

.subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin-bottom: 15px;
    border-left: 3px solid var(--secondary-color);
    padding-left: 12px;
    opacity: 0;
    animation: slideUpFade 0.8s ease forwards 0.4s;
}

.breadcrumb {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    padding: 5px 15px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.8rem;
    opacity: 0;
    animation: slideUpFade 0.8s ease forwards 0.6s;
}

.breadcrumb a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb span {
    margin: 0 8px;
    color: var(--secondary-color);
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 2. PERKS & JOBS --- */
.career-culture-section {
    padding: 60px 0;
    background: #fff;
}

.perk-card {
    border: 1px solid #eee;
    padding: 25px 15px;
    border-radius: 12px;
    text-align: center;
    height: 100%;
    transition: 0.3s;
}

.perk-card:hover {
    transform: translateY(-5px);
    border-color: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.perk-icon {
    width: 50px;
    height: 50px;
    background: rgba(70, 135, 237, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 15px;
}

.career-jobs-section {
    padding: 60px 0;
    background: #f8f9fa;
}

.job-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    border-left: 4px solid var(--primary-color);
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(70, 135, 237, 0.1);
}

.job-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.job-type {
    background: rgba(255, 193, 7, 0.15);
    color: #dcb008;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.job-icon {
    font-size: 24px;
    color: var(--primary-color);
}

.job-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}

.job-details {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    flex-grow: 1;
}

.job-details li {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.job-details li i {
    color: var(--primary-color);
    width: 20px;
}

.btn-job {
    width: 100%;
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.btn-job:hover {
    background: var(--primary-color);
    color: #fff;
}

/* --- 3. MAGIC BAG MODAL (ANIMATION CORE) --- */
.magic-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 20, 39, 0.92);
    /* Dark Backdrop */
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.magic-overlay.show {
    display: flex;
    opacity: 1;
}

.magic-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* THE GUDDA */
.gudda-wrapper {
    position: absolute;
    z-index: 5;
    transform: translate(0, 120vh);
    /* Start Hidden Bottom */
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gudda-img {
    width: 320px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

/* Animation Stages */
.gudda-wrapper.walk-in {
    transform: translate(0, 50px);
}

/* Stage 1: Center */
.gudda-wrapper.move-side {
    transform: translate(-220px, 50px);
}

/* Stage 2: Move Left */

/* THE FORM */
.magic-form-box {
    background: #ffffff;
    width: 420px;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(70, 135, 237, 0.4);
    border-top: 5px solid var(--secondary-color);
    position: absolute;
    z-index: 4;
    transform: translate(-200px, 100px) scale(0);
    /* Start Hidden in Bag */
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.magic-form-box.pop-out {
    transform: translate(150px, 0) scale(1);
    opacity: 1;
}

/* Stage 3: Pop Right */

/* Form Elements */
.highlight-job {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: var(--secondary-color);
}

.magic-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 14px;
    background: #f8f9fa;
}

.magic-input:focus {
    border-color: var(--primary-color);
    background: #fff;
    outline: none;
}

.magic-upload {
    border: 2px dashed var(--primary-color);
    padding: 12px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    background: rgba(70, 135, 237, 0.05);
}

.magic-upload label {
    cursor: pointer;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
}

.btn-magic-submit {
    width: 100%;
    background: var(--secondary-color);
    color: #000;
    font-weight: 800;
    border: none;
    padding: 14px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
}

.magic-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 10;
    transition: 0.3s;
}

.magic-close:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    transform: rotate(90deg);
}

/* --- MAGIC BAG MODAL (FULLY RESPONSIVE) --- */

/* 1. OVERLAY (Scrollable Wrapper) */
.magic-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 20, 0.95);
    /* Deep Dark Backdrop */
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: none;
    /* Hidden Default */
    opacity: 0;
    transition: opacity 0.4s ease;

    /* Enable Scroll for Mobile */
    overflow-y: auto;
    padding: 20px 0;
}

.magic-overlay.show {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center Vertically */
    opacity: 1;
}

/* 2. CONTAINER */
.magic-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    /* Wide for Desktop */
    min-height: 100%;
    /* Allows scrolling */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. THE GUDDA (Mascot) */
.gudda-wrapper {
    position: absolute;
    z-index: 5;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Start State: Hidden Bottom */
    transform: translate(0, 100vh);
}

.gudda-img {
    width: 300px;
    /* Desktop Size */
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5));
}

/* --- ANIMATION STAGES --- */

/* Stage 1: Walk In (Center) */
.gudda-wrapper.walk-in {
    transform: translate(0, 50px);
}

/* Stage 2: Move Side (Desktop) */
.gudda-wrapper.move-side {
    transform: translate(-220px, 50px);
    /* Move Left */
}

/* 4. THE FORM (Hidden in Bag) */
.magic-form-box {
    background: #ffffff;
    width: 420px;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(70, 135, 237, 0.4);
    border-top: 5px solid var(--secondary-color);

    position: absolute;
    z-index: 4;

    /* Start State: Tiny & Hidden behind Gudda */
    transform: translate(-200px, 100px) scale(0);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Stage 3: Pop Out (Right Side) */
.magic-form-box.pop-out {
    transform: translate(150px, 0) scale(1);
    opacity: 1;
}

/* 5. FORM ELEMENTS */
.form-header {
    text-align: center;
    margin-bottom: 20px;
}

.form-header h4 {
    font-weight: 800;
    color: #333;
    margin-bottom: 5px;
}

.form-header p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.magic-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #f0f0f0;
    border-radius: 10px;
    font-size: 14px;
    background: #f9f9f9;
    transition: 0.3s;
}

.magic-input:focus {
    border-color: var(--primary-color);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(70, 135, 237, 0.1);
}

/* Upload Button */
.magic-upload {
    border: 2px dashed var(--primary-color);
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    background: rgba(70, 135, 237, 0.05);
    transition: 0.3s;
    width: 100%;
    display: block;
}

.magic-upload:hover {
    background: rgba(70, 135, 237, 0.1);
}

.magic-upload label {
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-heading);
}

/* Submit Button */
.btn-magic-submit {
    width: 100%;
    background: var(--secondary-color);
    color: #000;
    font-weight: 800;
    border: none;
    padding: 14px;
    border-radius: 10px;
    transition: 0.3s;
    margin-top: 10px;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
}

.btn-magic-submit:hover {
    transform: translateY(-3px);
    background: #ffca2c;
}

/* Close Button */
.magic-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: 0.3s;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.magic-close:hover {
    background: #dc3545;
    border-color: #dc3545;
    transform: rotate(90deg);
}


/* =========================================
   MOBILE RESPONSIVE (THE REAL FIX)
   ========================================= */
@media (max-width: 991px) {

    .magic-overlay {
        align-items: flex-start;
        /* Start from top to allow scrolling */
        padding-top: 40px;
    }

    .magic-container {
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
        /* Allow auto height */
        padding-bottom: 50px;
    }

    /* 1. GUDDA ON MOBILE */
    .gudda-img {
        width: 180px;
        /* Smaller Gudda */
    }

    /* Walk In: Center Bottom */
    .gudda-wrapper.walk-in {
        transform: translate(0, 0);
        position: relative;
        margin-top: 20px;
    }

    /* Move Side: Fade Out instead of moving left */
    .gudda-wrapper.move-side {
        transform: translate(0, 0) scale(0.9);
        /* Stay Center */
        opacity: 0.2;
        /* Fade out so form is visible */
        filter: blur(2px);
    }

    /* 2. FORM ON MOBILE */
    .magic-form-box {
        width: 90%;
        /* Fit Screen */
        max-width: 400px;
        position: relative;
        /* Not Absolute */
        margin-top: -100px;
        /* Pull form UP over the Gudda */

        /* Start State */
        transform: scale(0.8) translateY(50px);
    }

    /* Pop Out: Center */
    .magic-form-box.pop-out {
        transform: scale(1) translateY(0);
        opacity: 1;
        margin-top: -120px;
        /* Adjust overlap */
    }

    /* Close Button Mobile */
    .magic-close {
        position: fixed;
        /* Always visible on screen */
        top: 15px;
        right: 15px;
        background: rgba(0, 0, 0, 0.5);
    }
}



/* portfolio css start  */
/* --- PREMIUM PORTFOLIO STYLES --- */

.premium-portfolio-section {
    padding: 80px 0;
    background-color: #fcfcfc;
}

/* Filter Buttons */
.portfolio-filters .filter-btn {
    background: transparent;
    border: 2px solid #e1e5ea;
    padding: 8px 25px;
    margin: 5px;
    border-radius: 50px;
    font-weight: 600;
    color: var(--text-body);
    transition: 0.3s;
    cursor: pointer;
}

.portfolio-filters .filter-btn:hover,
.portfolio-filters .filter-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(70, 135, 237, 0.3);
}

/* Browser Card Design */
.browser-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #eee;
    height: 100%;
}

.browser-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(70, 135, 237, 0.2);
}

/* Browser Header (Mac Style) */
.browser-header {
    background: #f1f3f5;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e1e1e1;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}

.dot-red {
    background: #ff5f56;
}

.dot-yellow {
    background: #ffbd2e;
}

.dot-green {
    background: #27c93f;
}

.browser-address-bar {
    background: #fff;
    color: #999;
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: 15px;
    flex-grow: 1;
    text-align: center;
    border: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Screen Image Area */
.browser-screen {
    position: relative;
    height: 220px;
    /* Fixed Height */
    overflow: hidden;
    background: #eef2f6;
    /* Placeholder color */
}

/* Image Scroll Effect on Hover */
.browser-screen img {
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top;
    /* Start from top */
    transition: transform 3s ease-in-out;
    /* Slow Scroll */
}

/* Hover par poori website scroll hogi */
.browser-card:hover .browser-screen img {
    transform: translateY(calc(-100% + 220px));
    /* Scroll to bottom */
}

/* Overlay with Button */
.browser-screen .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(70, 135, 237, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
}

.browser-card:hover .browser-screen .overlay {
    opacity: 1;
}

.btn-view {
    background: #fff;
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: 0.3s;
}

.browser-card:hover .btn-view {
    transform: translateY(0);
}

.btn-view:hover {
    background: var(--secondary-color);
    color: #000;
}

/* --- PREMIUM ANIMATED PORTFOLIO BACKGROUND --- */

.premium-portfolio-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    /* Animation bahar na jaye */

    /* 1. Animated Gradient Background (White to Soft Blue) */
    background: linear-gradient(-45deg, #f8f9fa, #eef2f6, #e3f2fd, #ffffff);
    background-size: 400% 400%;
    animation: portfolioBG 12s ease infinite;
}

/* 2. Tech Dots Overlay (Subtle Pattern) */
.premium-portfolio-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Chhoti Blue Dots */
    background-image: radial-gradient(#4687ed 0.8px, transparent 0.8px);
    background-size: 25px 25px;
    /* Dots ke beech ka gap */

    opacity: 0.15;
    /* Bahut halka dikhega */
    pointer-events: none;
    /* Click par koi asar nahi */
}

/* 3. Floating Glow Effect (Optional Decoration) */
.premium-portfolio-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: var(--secondary-color);
    /* Yellow Glow */
    filter: blur(100px);
    opacity: 0.1;
    border-radius: 50%;
    z-index: 0;
}

/* --- ANIMATION KEYFRAMES --- */
@keyframes portfolioBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Container ko upar layein taaki background ke upar dikhe */
.premium-portfolio-section .container {
    position: relative;
    z-index: 2;
}

/* Info Section */
.portfolio-info {
    padding: 20px;
    text-align: center;
    border-top: 1px solid #f0f0f0;
}

.portfolio-info h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-heading);
}

.portfolio-info p {
    font-size: 13px;
    color: var(--primary-color);
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px) {
    .browser-screen {
        height: 180px;
    }
}

/* --- PORTFOLIO LOAD MORE BUTTON --- */
.btn-show-more {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.btn-show-more:hover {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 10px 20px rgba(70, 135, 237, 0.3);
    transform: translateY(-3px);
}

/* Hidden Items Class (JS will toggle this) */
.portfolio-hidden {
    display: none;
}

/* Animation for revealing items */
.reveal-item {
    animation: fadeInPortfolio 0.6s ease forwards;
}

@keyframes fadeInPortfolio {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- ANIMATED CONTACT SECTION --- */

.contact-section-animated {
    position: relative;
    padding: 80px 0px;
    overflow: hidden;
    background: #f0f4f8;
    /* Light BG fallback */
}

/* Canvas Styling (The Background Animation) */
#contactCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Content ke peeche */
}

/* Glass Cards (Left Side) */
.contact-card-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.contact-card-glass:hover {
    transform: translateX(10px);
    background: #fff;
    border-color: var(--secondary-color);
    box-shadow: 0 10px 30px rgba(70, 135, 237, 0.15);
}

.contact-card-glass .icon-box {
    width: 50px;
    height: 50px;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
}

.contact-card-glass h5 {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
}

.contact-card-glass p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* Glass Form Wrapper (Right Side) */
.glass-form-wrapper {
    background: rgba(255, 255, 255, 0.65);
    /* Semi Transparent */
    backdrop-filter: blur(12px);
    /* Blur Effect */
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    position: relative;
}

/* Floating Mascot */
.contact-mascot {
    position: absolute;
    top: -60px;
    right: -20px;
    width: 130px;
    z-index: 5;
    pointer-events: none;
}

.mascot-float {
    width: 100%;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
    animation: floatUpDown 4s ease-in-out infinite;
}

@keyframes floatUpDown {

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

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

/* Glass Inputs */
.glass-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 14px;
    transition: 0.3s;
}

.glass-input:focus {
    background: #fff;
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 4px rgba(70, 135, 237, 0.1);
}

/* Map Section */
.map-section {
    margin: 20px;
}

.submit-button {
    color: #fff;
    background-color: var(--primary-color);
}

.submit-button:hover {
    color: #fff;
    background-color: var(--secondary-color);
}

/* Responsive */
@media (max-width: 991px) {
    .glass-form-wrapper {
        padding: 30px 20px;
        margin-top: 50px;
    }

    .contact-mascot {
        width: 100px;
        top: -50px;
        right: 0;
    }
}

/* =========================================
   1. CSS VARIABLES & GLOBAL RESET
   ========================================= */
:root {
    /* Main Brand Colors */
    --primary-color: #4687ed;   /* Blue */
    --secondary-color: #ffc107; /* Yellow */
    --accent-red: #dc3545;      /* Red */

    /* Text & Background Colors */
    --text-heading: #333333;
    --text-body: #555555;
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --shadow-color: rgba(0, 0, 0, 0.08);
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-body);
    overflow-x: hidden; /* Prevent horizontal scroll */
    padding-top: 80px;  /* Space for fixed navbar */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a { text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }

/* Global Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   2. NAVBAR & HEADER
   ========================================= */
.navbar {
    background-color: var(--bg-white);
    box-shadow: 0 4px 20px var(--shadow-color);
    padding: 10px 0;
    transition: all 0.3s ease;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.navbar-brand {
    padding: 0;
    display: flex;
    align-items: center;
}

.navbar-logo-img {
    max-height: 50px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.navbar-logo-img:hover { transform: scale(1.05); }

.navbar-nav .nav-link {
    color: var(--text-body);
    font-weight: 500;
    font-size: 15px;
    padding: 10px 14px !important;
    transition: color 0.3s ease;
    position: relative;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--primary-color); }

/* Underline Effect */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 5px;
    left: 50%;
    background-color: var(--secondary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

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

/* Mega Menu */
.dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px var(--shadow-color);
    padding: 25px;
    background-color: var(--bg-white);
    transition: all 0.3s ease;
}

.megamenu-title {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--secondary-color);
    display: inline-block;
}

.megamenu-list li a {
    color: var(--text-body);
    font-size: 13.5px;
    display: flex;
    align-items: center;
    padding: 6px 0;
    transition: all 0.2s;
}

.megamenu-list li a i {
    color: var(--primary-color);
    width: 25px;
    margin-right: 8px;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.megamenu-list li a:hover { color: var(--primary-color); transform: translateX(5px); }
.megamenu-list li a:hover i { color: var(--secondary-color); transform: scale(1.1); }

/* Call Button */
.btn-call {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(70, 135, 237, 0.2);
    transition: all 0.3s ease;
}
.btn-call:hover {
    background-color: var(--secondary-color);
    color: #fff;
    transform: translateY(-2px);
}

/* Navbar Responsive */
@media (min-width: 992px) {
    .has-megamenu { position: static; }
    .megamenu {
        position: absolute;
        left: 0; right: 0; width: 100%;
        margin-top: 0;
        border-radius: 0 0 12px 12px;
        display: none;
        border-top: 3px solid var(--primary-color);
    }
    .dropdown:hover .megamenu { display: block; animation: fadeIn 0.3s ease; }
    .dropdown:hover .dropdown-menu { display: block; margin-top: 0; }
}

@media (max-width: 991px) {
    .navbar-collapse {
        background: var(--bg-white);
        padding: 20px;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    .megamenu { box-shadow: none; padding: 10px; background: #f8f9fa; }
    .d-lg-block { display: none !important; }
}

/* =========================================
   3. HERO SECTION
   ========================================= */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding: 60px 0;
    z-index: 1;
    overflow: hidden;
}

#heroCanvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
}

.hero-img-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    animation: float 4s ease-in-out infinite;
}

.hero-slider-img {
    width: 100%;
    max-height: 450px;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
}

.text-slider { color: var(--secondary-color); font-weight: bold; }
.cursor-blink { color: var(--accent-red); animation: blink 0.7s infinite; }

@keyframes blink { 50% { opacity: 0; } }

/* Hero Responsive */
@media (max-width: 991px) {
    .hero-section { min-height: auto; padding-top: 40px; text-align: center; }
    h1.display-4 { font-size: 2.5rem; }
    .hero-text-content { margin-bottom: 50px; }
    .d-flex.gap-3 { justify-content: center; }
}

/* =========================================
   4. CLIENTS SLIDER (Nain Style)
   ========================================= */
.nain-client-section {
    background-color: #ffffff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    overflow: hidden;
}

.nain-slider-area {
    height: 100px;
    margin: auto;
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Gradient Edges */
.nain-slider-area::before, .nain-slider-area::after {
    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
    content: ""; height: 100%; position: absolute; width: 100px; z-index: 2;
}
.nain-slider-area::before { left: 0; top: 0; }
.nain-slider-area::after { right: 0; top: 0; transform: rotateZ(180deg); }

.nain-slide-track {
    display: flex;
    width: calc(200px * 14);
    animation: nainScrollAnim 30s linear infinite;
}

.client-logo-box {
    height: 80px; width: 200px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 30px;
}

.client-logo-box img {
    max-width: 100%; max-height: 60px;
    opacity: 0.6; transition: 0.3s;
}
.client-logo-box img:hover { opacity: 1; transform: scale(1.1); }

@keyframes nainScrollAnim {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-200px * 7)); }
}

/* Clients Responsive */
@media (max-width: 768px) {
    .client-logo-box { width: 150px; padding: 0 20px; }
    .nain-slide-track { width: calc(150px * 14); }
    @keyframes nainScrollAnim {
        100% { transform: translateX(calc(-150px * 7)); }
    }
}

/* =========================================
   5. ABOUT SECTION
   ========================================= */
.about-scroll-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #f8fbff 0%, #eef2f6 100%);
    position: relative;
    z-index: 1;
}

.custom-scroll-box {
    max-height: 400px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e1e5ea;
    padding: 20px;
    margin-top: 25px;
}
.custom-scroll-box::-webkit-scrollbar { width: 6px; }
.custom-scroll-box::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 10px; }

.image-frame {
    position: relative; z-index: 2;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border: 5px solid #fff;
}
.image-frame img { width: 100%; transition: 0.5s; }
.image-frame:hover img { transform: scale(1.05); }

.floating-tech-icon {
    position: absolute; top: 20px; right: 20px;
    width: 60px; height: 60px;
    background: var(--secondary-color); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    animation: float 3s ease-in-out infinite;
    z-index: 3;
}

/* About Responsive */
@media (max-width: 991px) {
    .about-scroll-section { padding: 60px 0; }
    .about-visuals { margin-top: 60px; text-align: center; }
    .glass-badge-box { width: 80%; left: 50%; transform: translateX(-50%); bottom: -20px; }
}

/* =========================================
   6. SERVICES SECTION
   ========================================= */
.services-section {
    padding: 100px 0;
    background-color: #f9fbff;
    position: relative;
}

.service-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid #f0f0f0;
    transition: all 0.4s ease;
    height: 100%; /* Equal Height */
    display: flex; flex-direction: column; align-items: flex-start;
}
.service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(70, 135, 237, 0.15); }

.icon-wrapper {
    width: 70px; height: 70px;
    background: rgba(70, 135, 237, 0.1); color: var(--primary-color);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 25px;
    transition: 0.5s;
}
.service-card:hover .icon-wrapper { transform: rotateY(360deg); background: var(--secondary-color); color: #fff; }

.service-desc { flex-grow: 1; margin-bottom: 25px; color: #666; line-height: 1.6; }

/* Service Tabs Section */
.premium-services-tabs { padding: 100px 0; background-color: #f0f7ff; }
.custom-tab-nav .nav-link {
    display: flex; align-items: center; padding: 18px 25px;
    margin-bottom: 8px; border-radius: 10px; color: #555;
    transition: 0.3s; width: 100%; border: 1px solid transparent;
}
.custom-tab-nav .nav-link.active { background: var(--primary-color); color: #fff; box-shadow: 0 5px 15px rgba(70, 135, 237, 0.3); }

/* Services Responsive */
@media (max-width: 991px) {
    .services-section, .premium-services-tabs { padding: 60px 0; }
    .custom-tab-nav { flex-direction: row !important; overflow-x: auto; white-space: nowrap; gap: 10px; padding-bottom: 10px; }
    .custom-tab-nav .nav-link { width: auto; padding: 10px 20px; border-radius: 50px; border: 1px solid #ddd; background: #fff; }
    .custom-tab-nav .nav-link.active { background: var(--primary-color); color: #fff; }
    .content-box { text-align: center; }
    .two-cols { grid-template-columns: 1fr; }
}

/* =========================================
   7. WHAT WE DO SECTION
   ========================================= */
.what-we-do-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
    position: relative;
}

.wwd-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #edf2f7;
    height: 100%;
}
.wwd-card:hover { transform: translateY(-15px); box-shadow: 0 30px 60px rgba(70, 135, 237, 0.15); }

.card-img-container {
    height: 180px; display: flex; align-items: center; justify-content: center;
    background: #fcfcfc; position: relative;
}
.custom-img { max-height: 130px; z-index: 1; animation: float 4s ease-in-out infinite; }
.blob-bg { position: absolute; width: 120px; height: 120px; background: rgba(70, 135, 237, 0.1); border-radius: 50%; z-index: 0; }
.wwd-card:hover .blob-bg { transform: scale(1.5); }

.card-body-content { padding: 30px; text-align: center; }

/* What We Do Responsive */
@media (max-width: 991px) {
    .what-we-do-section { padding: 60px 0; }
    .card-img-container { height: 160px; }
}

/* =========================================
   8. WORKFLOW SECTION
   ========================================= */
.workflow-section { padding: 100px 0; background: #fff; overflow: hidden; }

.process-wrapper {
    position: relative; margin-top: 50px; display: flex; justify-content: center;
}
.process-line {
    position: absolute; top: 60px; left: 10%; right: 10%; height: 2px;
    background-image: linear-gradient(to right, #e1e5ea 50%, transparent 50%);
    background-size: 20px 100%; z-index: 0;
}

.process-card { text-align: center; padding: 20px 10px; position: relative; z-index: 1; }
.step-number {
    font-size: 60px; font-weight: 900; color: #f3f6f9;
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;
}
.icon-circle {
    width: 80px; height: 80px; background: #fff; border: 2px solid #eef2f6;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 20px auto; font-size: 28px; color: var(--primary-color);
    transition: 0.4s; position: relative; z-index: 2;
}
.process-card:hover .icon-circle { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* Workflow Responsive */
@media (max-width: 991px) {
    .workflow-section { padding: 60px 0; }
    .process-line { display: none; }
    .process-wrapper { flex-direction: column; }
    .process-col { margin-bottom: 30px; }
    .step-number { font-size: 40px; top: 10px; right: 20px; left: auto; transform: none; }
}

/* =========================================
   9. DIGITAL GROWTH & STATS
   ========================================= */
.digital-growth-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f9fbfd 0%, #ffffff 100%);
    overflow: hidden;
}

/* Ecosystem (Desktop) */
.ecosystem-wrapper {
    position: relative; height: 400px;
    display: flex; align-items: center; justify-content: center;
}
.core-circle {
    width: 120px; height: 120px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 30px rgba(70, 135, 237, 0.2); position: relative; z-index: 2;
}
.pulse-ring {
    position: absolute; width: 100%; height: 100%; border-radius: 50%;
    border: 2px solid var(--primary-color); animation: pulseRing 3s infinite;
}
@keyframes pulseRing {
    100% { width: 250%; height: 250%; opacity: 0; }
}

.float-card {
    position: absolute; background: rgba(255,255,255,0.9); padding: 15px 20px;
    border-radius: 12px; display: flex; align-items: center; gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); animation: float 4s infinite;
}
.card-seo { top: 10%; left: 0; }
.card-ads { top: 40%; right: -20px; animation-delay: 1.5s; }
.card-social { bottom: 10%; left: 20px; animation-delay: 3s; }

/* Digital Growth Responsive */
@media (max-width: 991px) {
    .digital-growth-section { padding: 50px 0; text-align: center; }
    
    .ecosystem-wrapper { height: 320px; display: block; margin-top: 20px; }
    
    .core-circle {
        width: 80px; height: 80px;
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    }
    
    /* Mobile Float Cards */
    .float-card {
        width: 140px; min-width: auto; padding: 8px 10px;
        flex-direction: column; text-align: center; gap: 5px;
    }
    .card-seo { top: 0; left: 0; transform: none; animation: float 4s infinite; }
    .card-ads { top: 40%; right: 0; left: auto; animation: float 4s infinite 1.5s; }
    .card-social { bottom: 0; left: 0; top: auto; animation: float 4s infinite 3s; }
    
    .border-end-custom { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px; }
}

/* =========================================
   10. PORTFOLIO SECTION
   ========================================= */
.premium-portfolio-section {
    padding: 80px 0;
    background: linear-gradient(-45deg, #f8f9fa, #eef2f6, #e3f2fd, #ffffff);
    background-size: 400% 400%;
    animation: portfolioBG 12s ease infinite;
}
@keyframes portfolioBG { 0%,100% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} }

.filter-btn {
    background: transparent; border: 2px solid #e1e5ea; padding: 8px 25px;
    margin: 5px; border-radius: 50px; cursor: pointer; transition: 0.3s;
}
.filter-btn.active, .filter-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

.browser-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); transition: 0.4s; border: 1px solid #eee;
}
.browser-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(70,135,237,0.2); }

.browser-header { background: #f1f3f5; padding: 10px; display: flex; align-items: center; border-bottom: 1px solid #ddd; }
.dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }

.browser-screen { height: 220px; overflow: hidden; position: relative; }
.browser-screen img { width: 100%; transition: transform 3s ease-in-out; }
.browser-card:hover .browser-screen img { transform: translateY(calc(-100% + 220px)); }

/* =========================================
   11. TEAM SECTION (Spotlight)
   ========================================= */
.nsp-team-section { padding: 80px 0; background-color: var(--bg-light); overflow: hidden; }

.nsp-slider-wrapper {
    position: relative; width: 100%; height: 520px;
    display: flex; justify-content: center; align-items: center; margin-top: 30px;
}

.nsp-card {
    position: absolute; width: 320px;
    background: var(--bg-white); border-radius: 20px; overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.5s ease; opacity: 0; transform: scale(0.8);
}

.nsp-card.active {
    opacity: 1; z-index: 10; transform: scale(1.1);
    box-shadow: 0 25px 50px rgba(70, 135, 237, 0.25);
}

.nsp-card.next { opacity: 0.6; z-index: 5; transform: translateX(380px) scale(0.9); filter: blur(3px); }
.nsp-card.prev { opacity: 0.6; z-index: 5; transform: translateX(-380px) scale(0.9); filter: blur(3px); }

.nsp-img-holder { height: 320px; overflow: hidden; }
.nsp-img-holder img { width: 100%; height: 100%; object-fit: cover; }

/* Team Responsive */
@media (max-width: 900px) {
    .nsp-slider-wrapper { height: 500px; }
    .nsp-card { width: 300px; max-width: 90%; }
    /* Mobile: Show only center card */
    .nsp-card.active { transform: scale(1) translateX(0) !important; }
    .nsp-card.next, .nsp-card.prev {
        opacity: 0 !important; visibility: hidden !important; pointer-events: none;
    }
}

/* =========================================
   12. CONTACT SECTION
   ========================================= */
.ns2-section-wrapper { padding: 80px 20px; background: #fff; overflow: hidden; }

.ns2-card {
    display: flex; flex-wrap: wrap; background: #fff;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15); margin-bottom: 40px;
}

.ns2-left-panel {
    flex: 0 0 40%;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-red), var(--secondary-color));
    padding: 50px 40px; color: #fff;
}

.ns2-right-panel { flex: 0 0 60%; background: #fff; padding: 50px; }
.ns2-input, .ns2-textarea {
    width: 100%; padding: 12px 15px; border: 1px solid #ddd;
    border-radius: 8px; margin-bottom: 15px;
}
.ns2-btn-submit {
    width: 100%; background: var(--primary-color); color: #fff;
    padding: 15px; border: none; border-radius: 8px; cursor: pointer;
}

.ns2-map-wrapper { width: 100%; border-radius: 20px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.ns2-map-iframe { width: 100%; height: 450px; display: block; }

/* Contact Responsive */
@media (max-width: 991px) {
    .ns2-left-panel, .ns2-right-panel { flex: 0 0 100%; width: 100%; }
    .ns2-right-panel { padding: 30px 20px; }
    .ns2-map-iframe { height: 350px; }
}

/* =========================================
   13. FOOTER
   ========================================= */
.nsp-footer-wrapper { background-color: var(--bg-light); padding-top: 80px; margin-top: 50px; }

.nsp-contact-card {
    background: var(--bg-white); padding: 35px; border-radius: 16px;
    border-top: 5px solid var(--primary-color); transition: 0.4s;
}
.nsp-contact-card:hover { transform: translateY(-10px); }

.nsp-icon {
    width: 45px; height: 45px; min-width: 45px;
    background: rgba(70, 135, 237, 0.1); color: var(--primary-color);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.nsp-contact-list li { display: flex; gap: 15px; margin-bottom: 20px; }

.nsp-bottom-bar { background: var(--primary-color); color: #fff; padding: 20px 0; text-align: center; }

/* Footer Responsive */
@media (max-width: 991px) {
    .nsp-contact-card { padding: 25px; margin-top: 20px; }
    .nsp-social-grid { justify-content: center; }
    .col-lg-3, .col-lg-2, .col-lg-4 { text-align: center; margin-bottom: 30px; }
    .nsp-links a { justify-content: center; }
}

/* =========================================
   14. CAREER / MAGIC MODAL (Fixed)
   ========================================= */
.magic-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 10, 20, 0.95); z-index: 10000;
    display: none; opacity: 0; transition: opacity 0.4s;
    overflow-y: auto; padding: 20px 0;
}
.magic-overlay.show { display: flex; justify-content: center; align-items: center; opacity: 1; }

.magic-container {
    position: relative; width: 100%; max-width: 900px;
    min-height: 100%; display: flex; align-items: center; justify-content: center;
}

.gudda-wrapper {
    position: absolute; z-index: 5; transition: 0.8s;
    transform: translate(0, 100vh); /* Start Hidden */
}
.gudda-wrapper.walk-in { transform: translate(0, 50px); }
.gudda-wrapper.move-side { transform: translate(-220px, 50px); }

.magic-form-box {
    background: #fff; width: 420px; padding: 30px; border-radius: 20px;
    border-top: 5px solid var(--secondary-color);
    position: absolute; z-index: 4;
    transform: translate(-200px, 100px) scale(0); opacity: 0; transition: 0.6s;
}
.magic-form-box.pop-out { transform: translate(150px, 0) scale(1); opacity: 1; }

/* Magic Modal Responsive */
@media (max-width: 991px) {
    .magic-overlay { align-items: flex-start; padding-top: 40px; }
    .magic-container { flex-direction: column; justify-content: flex-start; height: auto; }
    
    .gudda-img { width: 180px; }
    .gudda-wrapper.walk-in { transform: translate(0, 0); margin-top: 20px; position: relative; }
    .gudda-wrapper.move-side { opacity: 0.2; filter: blur(2px); transform: scale(0.9); }
    
    .magic-form-box {
        width: 90%; max-width: 400px; position: relative;
        margin-top: -100px; /* Pull Up over Gudda */
        transform: scale(0.8) translateY(50px);
    }
    .magic-form-box.pop-out { transform: scale(1) translateY(0); margin-top: -120px; opacity: 1; }
    
    .magic-close { position: fixed; top: 15px; right: 15px; background: rgba(0,0,0,0.5); }
}