:root {
    /* Neumorphic Light Theme */
    --bg-light: #e0e5ec;
    --bg-white: #ffffff;

    --shadow-light: #ffffff;
    --shadow-dark: #a3b1c6;

    --primary: #4466ff;
    /* Soft Royal Blue */
    --secondary: #ff3366;
    /* Vibrant Pink/Red */

    --text-main: #2d3436;
    --text-muted: #636e72;

    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.5);

    --font-main: 'Outfit', sans-serif;

    --gradient-main: linear-gradient(135deg, #4466ff 0%, #ff3366 100%);
    --neumorphic-shadow: 9px 9px 16px var(--shadow-dark), -9px -9px 16px var(--shadow-light);
    --neumorphic-inset: inset 6px 6px 10px var(--shadow-dark), inset -6px -6px 10px var(--shadow-light);
}

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

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    font-family: var(--font-main);
    overflow-x: hidden;
    cursor: none;
}

/* Custom Cursor */
.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}

.cursor-dot {
    width: 45px;
    height: 45px;
    background-color: transparent;
    background-image: url('robot_cursor_v2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Reverted to V2 (White/Red/Blue) as requested */
    mix-blend-mode: screen;
    /* Handles black background */
    filter: drop-shadow(0 0 10px rgba(68, 102, 255, 0.5));
    /* Glow enhancement */
}


.cursor-outline {
    display: none;
}

body:hover .cursor-outline {
    transform: translate(-50%, -50%) scale(1.2);
}

/* Layout */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header - Neumorphic Glass */
.glass-header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1rem 0;
    background: rgba(224, 229, 236, 0.85);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 10px rgba(163, 177, 198, 0.3);
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 50px;
}

.circular-logo {
    border-radius: 50%;
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    border: 3px solid #e0e5ec;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.nav-links a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: 0.3s;
}

.nav-links a:hover {
    color: var(--primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Neumorphic Button */
.btn-primary-nav {
    padding: 0.7rem 2rem;
    background: var(--bg-light);
    border-radius: 30px;
    color: var(--primary) !important;
    font-weight: 700;
    box-shadow: var(--neumorphic-shadow);
    transition: 0.3s ease;
}

.btn-primary-nav:hover {
    box-shadow: var(--neumorphic-inset);
    transform: translateY(1px);
}

/* Hero */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Clean backdrop for bubbles */
    background: var(--bg-light);
}

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

.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(224, 229, 236, 0.6) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.hero-text-content {
    max-width: 600px;
    padding-left: 1rem;
    border-left: 4px solid var(--primary);
}

.hero-img-main {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: cover;
    /* Use the modern shape class already defined, but ensure it works here */
    border-radius: 41% 59% 41% 59% / 55% 29% 71% 45%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    animation: floatImage 6s ease-in-out infinite;
}

@keyframes floatImage {
    0% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(-20px) rotate(-1deg);
    }

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

.badge {
    background: var(--bg-light);
    color: var(--secondary);
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 2rem;
    margin-top: 3rem;
    /* Moved down as requested */
    display: inline-block;
    box-shadow: var(--neumorphic-shadow);
}

.hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    padding-top: 1rem;
    /* Reset padding to fit better */
    font-weight: 900;
    color: var(--text-main);
    text-shadow: 3px 3px 6px rgba(163, 177, 198, 0.4), -3px -3px 6px rgba(255, 255, 255, 0.8);
}

.gradient-text {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 600px;
    margin-bottom: 1.5rem;
    font-weight: 400;
    line-height: 1.7;
    position: relative;
    z-index: 5;
    margin-top: 0;
}

.hero-btns {
    display: flex;
    gap: 1.5rem;
    position: relative;
    z-index: 5;
    margin-top: 1.5rem;
    /* Adjusted for better spacing */
}

.btn {
    padding: 1rem 2.5rem;
    /* Standard size for clarity */
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s;
    letter-spacing: 1px;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

.btn-primary {
    background: var(--bg-light);
    color: var(--primary);
    box-shadow: var(--neumorphic-shadow);
}

.btn-primary:hover {
    box-shadow: var(--neumorphic-inset);
    color: var(--secondary);
}

/* --- Scrolling Services Marquee --- */
.ecosystem-section {
    padding: 3rem 0 4rem;
    text-align: center;
    background: transparent;
    overflow: hidden;
    width: 100%;
    position: relative;
    z-index: 10;
}

.ecosystem-title {
    font-size: 2.5rem;
    /* Larger for impact */
    text-transform: uppercase;
    letter-spacing: 5px;
    /* Remove single color, let spans handle it */
    color: var(--text-main);
    margin-bottom: 3rem;
    font-weight: 900;
    text-align: center;
    position: relative;
    display: inline-block;
}

/* Individual Letter Animation */
/* Individual Letter Animation */
.ecosystem-title span {
    display: inline-block;
    transition: transform 0.3s ease;
    /* Default color */
    color: var(--text-main);
    cursor: default;
}

/* Spring & Color Animation on Hover (Camera Shake Style) */
/* Spring & Color Animation (Class triggered by JS for persistence) */
/* Spring & Color Animation (Class triggered by JS for persistence) */
/* --- Service Text Interactions --- */

/* 1. Parent Row Animation (Zoom + Shadow) */
/* "Zooming a little bit... maintain the same distance" -> Zoom the whole row */
/* 1. Parent Row Animation (Zoom + Shadow) for Service Cards ONLY */
.service-scroll-card h4.row-zoom,
.service-scroll-card li.row-zoom {
    /* "Not gradually zoom in and out" -> Static Zoom State */
    transform: scale(1.15);
    transition: transform 0.3s ease;
    /* smooth entry */

    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -1px -1px 3px rgba(255, 255, 255, 0.3);
    display: inline-block;
    /* "Zooming from left right side not the point dot" -> Anchor Left */
    transform-origin: center left;
}

/* 2. Child Letter Animation (Color Flow) for Service Cards */
.service-scroll-card span.letter-color {
    animation: rgbFlow 2s linear infinite;
}

/* 3. RESTORED: Specific 'Camera Shake' for Our Services Title */
.ecosystem-title span.title-shake {
    /* Shake Spring + Color Flow */
    animation: shakeSpring 2s ease-in-out infinite,
        rgbFlow 2s linear infinite;
    display: inline-block;
}

@keyframes smoothZoom {

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

    50% {
        transform: scale(1.15);
    }
}

@keyframes shakeSpring {

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

    10%,
    90% {
        transform: translate3d(-3px, 0, 0) scale(1.3);
    }

    /* Zoom + Shake */
    30%,
    70% {
        transform: translate3d(3px, 0, 0) scale(1.3);
    }

    50% {
        transform: translate3d(-3px, 0, 0) scale(1.3);
    }
}

@keyframes rgbFlow {
    0% {
        color: #ff3366;
    }

    25% {
        color: #0066cc;
    }

    50% {
        color: #00cc66;
    }

    75% {
        color: #ffcc00;
    }

    100% {
        color: #ff3366;
    }
}

.marquee-wrapper {
    position: relative;
    width: 100%;
    /* Remove max-width to let it flow full width if needed, or keep it wide */
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    /* Soft fade masks on edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    padding: 20px 0;
    /* Space for shadows */
}

.marquee-track {
    display: flex;
    gap: 3rem;
    /* Space between cards */
    width: max-content;
    animation: scroll 80s linear infinite;
    /* Very slow scroll for reading */
    padding-left: 3rem;
}

/* Pause animation on hover for user interaction */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

/* Service Scroll Card Style */
/* Service Scroll Card Style - Redesigned: Futuristic Glass Note */
/* Service Scroll Card Style - Redesigns: Neumorphic + Bit of RGB */
.service-scroll-card {
    min-width: 350px;
    max-width: 350px;
    /* Neumorphic Background */
    background: #e0e5ec;
    border-radius: 30px;
    padding: 2.5rem 2rem;
    text-align: left;

    /* Neumorphic Shadows */
    box-shadow:
        12px 12px 24px #a3b1c6,
        -12px -12px 24px #ffffff;

    /* Subtle Border */
    border: 1px solid rgba(255, 255, 255, 0.4);

    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* "Just a little bit RGB" - Left Side Only */
.service-scroll-card::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    /* Only left strip */
    border-radius: 30px 0 0 30px;
    /* Matches left corners */
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.4), rgba(0, 0, 255, 0.4), rgba(0, 255, 0, 0.4));
    opacity: 0.6;
    transition: opacity 0.4s ease, width 0.4s ease;
}

.service-scroll-card:hover {
    transform: translateY(-8px);
    /* Float */
    box-shadow:
        15px 15px 30px #a3b1c6,
        -15px -15px 30px #ffffff,
        -10px 0 20px rgba(68, 102, 255, 0.15);
    /* Glow mainly leftwards */
}

.service-scroll-card:hover::after {
    opacity: 1;
    width: 4px;
    /* Slightly thicker on hover */
    background: linear-gradient(180deg, #ff3366, #4466ff, #00ebc7);
}

.card-icon {
    margin-bottom: 1.5rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    /* Enable 3D space */
}

/* New 3D Icon Styling */
.service-icon-3d {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Removed drop-shadow to let the image blend perfectly with its own natural shadow/highlight */
    animation: iconAlive 6s ease-in-out infinite;
    transform-style: preserve-3d;
    transition: filter 0.3s ease;
}

/* Custom Colored Neumorphic Shadows for Each Icon */
/* Creative: Pink/Blue */
.icon-creative {
    filter: drop-shadow(0 15px 25px rgba(255, 51, 102, 0.4));
}

/* Web: Blue/Purple */
.icon-web {
    filter: drop-shadow(0 15px 25px rgba(68, 102, 255, 0.4));
}

/* Marketing: Red/Orange */
.icon-marketing {
    filter: drop-shadow(0 15px 25px rgba(255, 80, 50, 0.4));
}

/* Content: Yellow/Green */
.icon-content {
    filter: drop-shadow(0 15px 25px rgba(200, 220, 50, 0.4));
}

/* Admin: Purple/Orange */
.icon-admin {
    filter: drop-shadow(0 15px 25px rgba(153, 51, 255, 0.4));
}

/* AI: Cyan/Magenta */
.icon-ai {
    filter: drop-shadow(0 15px 25px rgba(0, 200, 255, 0.4));
}

/* Video: Red/Violet */
.icon-video {
    filter: drop-shadow(0 15px 25px rgba(255, 0, 100, 0.4));
}

/* "Video" Animation: Floating + Subtle Rotation + Pulse */
@keyframes iconAlive {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    25% {
        transform: translateY(-8px) rotate(3deg) scale(1.02);
    }

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

    75% {
        transform: translateY(-5px) rotate(-3deg) scale(1.02);
    }

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

/* Hover Interaction - Unforgettable UX */
.service-scroll-card:hover .service-icon-3d {
    animation: iconSpin 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    /* Brighten and intensify shadow on hover */
    filter: brightness(1.1) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
}

@keyframes iconSpin {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.2) rotate(15deg) translateY(-10px);
    }

    100% {
        transform: scale(1.3) rotate(0deg) translateY(-15px);
    }
}

.service-scroll-card h4 {
    font-size: 1.2rem;
    color: var(--text-main);
    margin-bottom: 1rem;
    font-weight: 700;
}

.service-scroll-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-scroll-card li {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.2rem;
    line-height: 1.4;
}

.service-scroll-card li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

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

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

/* AI Robot Companion */
.ai-robot-container {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 250px;
    z-index: 20;
    /* Above bubbles */
    animation: floatRobot 6s ease-in-out infinite;
    transition: top 0.1s ease-out, left 0.1s ease-out;
    pointer-events: none;
    /* Allow clicking through if needed */
}

.ai-robot {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 15px 30px rgba(163, 177, 198, 0.4));
    /* Soft shadow */
    transition: transform 0.1s ease-out;
    /* Smooth mouse follow */
}

@keyframes floatRobot {

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

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

/* Responsive adjustment */
@media (max-width: 768px) {
    .ai-robot-container {
        width: 150px;
        top: 10%;
        right: 5%;
    }
}

.btn-glass {
    background: rgba(255, 255, 255, 0.4);
    color: var(--text-main);
    border: 1px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.btn-glass:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Sections */
.section {
    padding: 9rem 0;
}

.section-header {
    margin-bottom: 5rem;
    text-align: center;
}

.section-title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-weight: 800;
    color: var(--text-main);
    text-shadow: 2px 2px 4px rgba(163, 177, 198, 0.4), -2px -2px 4px #fff;
}

.underline {
    width: 60px;
    height: 6px;
    background: var(--gradient-main);
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Neumorphic Cards */
.card,
.glass-card {
    background: var(--bg-light);
    border-radius: 30px;
    overflow: hidden;
    transition: 0.4s;
    position: relative;
    box-shadow: var(--neumorphic-shadow);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Team */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3.5rem;
}

.card-inner {
    position: relative;
}

.card-front {
    padding: 3rem;
    text-align: center;
}

.img-container {
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    padding: 8px;
    background: var(--bg-light);
    box-shadow: var(--neumorphic-inset);
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--bg-light);
    transition: 0.5s;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card:hover .img-container img {
    transform: scale(1.05);
}

.card-content h3 {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
    color: var(--text-main);
}

.role {
    display: block;
    color: var(--primary);
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(224, 229, 236, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.4s;
    padding: 2rem;
    text-align: center;
}

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

.card-overlay p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    color: var(--text-main);
}

.btn-outline {
    background: var(--bg-light);
    border-radius: 20px;
    padding: 0.6rem 1.6rem;
    box-shadow: var(--neumorphic-shadow);
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.btn-outline:hover {
    box-shadow: var(--neumorphic-inset);
    color: var(--secondary);
}

/* Services */
.services-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.service-item {
    position: relative;
    height: 420px;
    background: var(--bg-light) !important;
    border-radius: 20px;
    /* Square with slight roundness */
    box-shadow:
        10px 10px 20px var(--shadow-dark),
        -10px -10px 20px var(--shadow-light) !important;
    /* Outer Neumorphism */
    padding: 10px;
    /* Frame effect */
    border: none !important;
}

.service-img-bg {
    width: 100%;
    height: 60%;
    /* Occupy top part */
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    z-index: 0;
    overflow: hidden;
    border-radius: 15px;
    /* Matching inner radius */
    box-shadow: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
    /* Inner depth */
}

.service-img-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: 0.6s;
}

.small-scale {
    transform: scale(0.85);
    /* Make it a bit smaller */
}

.service-item:hover .service-img-bg img {
    transform: scale(1.1);
}

.service-item:hover .service-img-bg .small-scale {
    transform: scale(0.95);
}

/* Maintain smaller relative scale on hover */

/* Remove Modern Shape class completely if still present in HTML logic, but here just ensure no conflict */
.modern-shape {
    border-radius: 15px !important;
    transform: none !important;
}

.service-content {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    top: auto;
    height: 35%;
    /* Fixed height for info area */
    padding: 1.5rem;
    background: var(--bg-light);
    /* Solid Neumorphic bg */
    border-radius: 15px;
    box-shadow:
        5px 5px 10px var(--shadow-dark),
        -5px -5px 10px var(--shadow-light);
    /* Raised look */
    border: none;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-content h3 {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
    color: var(--text-main);
}

.service-content p {
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.arrow-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.arrow-link:hover .arrow {
    transform: translateX(5px);
}

/* Contact */
.glass-panel {
    background: var(--bg-light);
    padding: 4rem;
    border-radius: 40px;
    box-shadow: var(--neumorphic-shadow);
    text-align: center;
}

.contact-actions {
    margin-top: 2rem;
}

/* Premium Glass Footer */
.neumorphic-footer {
    position: relative;
    padding: 5rem 0 2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05);
    /* Soft ambient glow */
    color: var(--text-main);
    overflow: hidden;
    /* For any decorative elements */
}

/* Decorative glass blob behind footer? Optional but cool */
.neumorphic-footer::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 20%;
    width: 300px;
    height: 300px;
    background: var(--primary);
    opacity: 0.05;
    filter: blur(80px);
    border-radius: 50%;
    z-index: -1;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.brand-name {
    font-size: 1.6rem;
    font-weight: 800;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Gradient Text */
    letter-spacing: -0.5px;
}

.footer-logo {
    height: 36px;
    /* Optimized size */
    width: auto;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.8);
    /* Glassy border */
    transition: transform 0.3s;
}

.footer-brand:hover .footer-logo {
    transform: rotate(10deg);
}

.footer-desc {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
    max-width: 300px;
}

.footer-heading {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    padding-bottom: 10px;
}

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

.footer-links li,
.footer-contact li {
    margin-bottom: 0.8rem;
}

.footer-contact a {
    color: #4466ff;
    /* Blue color */
}

.footer-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links a::before {
    content: '›';
    color: var(--primary);
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--primary);
    transform: translateX(5px);
}

.footer-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.footer-contact li {
    font-size: 0.95rem;
    color: var(--text-muted);
    display: flex;
    gap: 10px;
}

.footer-contact strong {
    font-weight: 600;
}

/* Payment and Contact column layout */
.payment-col {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-col {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .payment-col,
    .contact-col {
        grid-column: span 1;
    }
}

.payment-subhead {
    /* Restored Left-Border Style */
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
    font-weight: 600;
    padding-left: 8px;
    border-left: 2px solid var(--primary);
    background: none;
    -webkit-text-fill-color: initial;
    border-bottom: none;
}

.payment-subhead::after {
    display: none;
}

.payment-logos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 column grid */
    gap: 8px;
}

.payment-icon {
    width: 100%;
    /* Fit grid cell */
    height: auto;
    border-radius: 4px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.1);
}

.payment-icon:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
    z-index: 2;
    position: relative;
}

.payment-icon {
    width: 100%;
    height: auto;
    border-radius: 4px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.1);
    /* light glass bg for icon container if transparent */
}

.payment-icon:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
    z-index: 2;
    position: relative;
    animation: none;
    /* User Request: Leave mouse over response */
}

/* Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.copyright {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Glass Social Icons */
.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.6rem 1.2rem;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    /* Subtle lift */
    transition: all 0.3s ease;
    text-indent: 0;
    /* Reset indent */
    width: auto;
    height: auto;
}

.social-icon:hover {
    background: #fff;
    color: var(--secondary);
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(68, 102, 255, 0.2);
    /* Colored glow */
    border-color: #fff;
}


/* Mobile Responsive Footer */
@media (max-width: 768px) {
    .neumorphic-footer {
        padding: 3rem 0 2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .footer-col {
        align-items: center;
    }

    .payment-col {
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer-brand {
        justify-content: center;
    }

    .footer-desc {
        margin: 0 auto;
    }

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

    .footer-links a {
        justify-content: center;
        /* Center links */
    }

    .footer-contact li {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

.burger {
    display: none;
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .burger {
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
    }

    .line {
        width: 30px;
        height: 3px;
        background: var(--text-main);
        border-radius: 2px;
    }

    .hero-container-flex {
        flex-direction: column-reverse;
        text-align: center;
        padding-top: 6rem;
    }

    .hero-text-content {
        border-left: none;
        padding-left: 0;
        margin-top: 2rem;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .hero-btns {
        flex-direction: column;
        width: 100%;
    }

    .hero-img-main {
        max-width: 300px;
    }
}

/* --- Marquee Control Buttons (Global) --- */
.marquee-wrapper {
    position: relative;
    /* Ensure buttons align to this container */
}

.marquee-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    /* Slightly larger for easier clicking */
    height: 45px;
    border-radius: 50%;

    /* Stronger Glass/Neumorphic Style */
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    /* Glass */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    color: var(--text-main);
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 100;
    /* High z-index to ensure visibility */

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Distinct Neumorphic Shadow */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2), -5px -5px 15px rgba(255, 255, 255, 0.1);
}

.marquee-control:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 0 20px rgba(255, 30, 0, 0.6), 0 0 10px rgba(255, 30, 0, 0.4);
    /* Glow effect for visibility per 'controlling' feel */
    border-color: #fff;
}

.marquee-control:active {
    transform: translateY(-50%) scale(0.95);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Final Decision: Flush with 10px padding from screen edge */
.left-btn {
    left: 10px;
}

.right-btn {
    right: 10px;
}

/* =========================================
   Viral 3D Map Styling (Preserved)
   ========================================= */
.map-container-3d {
    margin-top: 1.5rem;
    position: relative;
    perspective: 1000px;
    width: 100%;
    height: 220px;
    cursor: pointer;
}

.map-frame {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    /* Neumorphic Frame */
    border: 5px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-light);
    box-shadow:
        10px 10px 20px var(--shadow-dark),
        -10px -10px 20px var(--shadow-light);

    /* Initial 'Resting' State - Tilted & Muted */
    transform: rotateX(10deg) scale(0.95);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: grayscale(40%) contrast(0.9);
}

.map-frame iframe {
    width: 100%;
    height: 100%;
    pointer-events: none;
    pointer-events: auto;
}

/* Shine Effect */
.map-overlay-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Hover Interaction */
.map-container-3d:hover .map-frame {
    transform: rotateX(0deg) scale(1.05) translateY(-5px);
    filter: grayscale(0%) contrast(1.1);
    box-shadow:
        0 20px 40px rgba(68, 102, 255, 0.3),
        0 10px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.map-container-3d:hover .map-overlay-shine {
    left: 150%;
    transition: 0.7s;
}

/* =========================================
   NEW FOOTER REDESIGN: Neumorphic RGB Glass
   ========================================= */

@keyframes rgb-breathing {
    0% {
        border-top-color: #ff0000;
        box-shadow: 0 -5px 15px rgba(255, 0, 0, 0.3);
    }

    33% {
        border-top-color: #00ff00;
        box-shadow: 0 -5px 15px rgba(0, 255, 0, 0.3);
    }

    66% {
        border-top-color: #0000ff;
        box-shadow: 0 -5px 15px rgba(0, 0, 255, 0.3);
    }

    100% {
        border-top-color: #ff0000;
        box-shadow: 0 -5px 15px rgba(255, 0, 0, 0.3);
    }
}

@keyframes rgb-border-flow {
    0% {
        background-position: 0% 50%;
    }

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

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

.neumorphic-footer {
    position: relative;
    padding: 4rem 0 2rem;
    background: var(--bg-light);
    /* RGB Top Border Effect */
    border-top: 3px solid transparent;
    animation: rgb-breathing 6s infinite alternate;
    overflow: hidden;
}

/* RGB Fog Overlay for Atmosphere */
.neumorphic-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: radial-gradient(circle at 50% -20%, rgba(68, 102, 255, 0.15), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.footer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

/* GLASS TILES: Each Column is a Card */
.footer-col {
    position: relative;
    padding: 2rem;
    border-radius: 20px;
    background: rgba(224, 229, 236, 0.5);
    /* Semi-transparent base */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        10px 10px 20px rgba(163, 177, 198, 0.4),
        -10px -10px 20px rgba(255, 255, 255, 0.8);
    transition: all 0.4s ease;
    overflow: hidden;
}

/* Mirror/Sheen Effect on Tiles */
.footer-col::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
    pointer-events: none;
    z-index: -1;
}

.footer-col:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        15px 15px 30px rgba(163, 177, 198, 0.5),
        -15px -15px 30px rgba(255, 255, 255, 0.9),
        inset 0 0 20px rgba(68, 102, 255, 0.05);
    /* Internal RGB Tint */
}

/* RGB Border on Tile Hover */
.footer-col:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff3366, #4466ff, #00ebc7);
    animation: rgb-border-flow 3s ease infinite;
    background-size: 200% 200%;
}

/* Refined Typography for Glass */
.footer-desc {
    color: var(--text-main);
    font-weight: 400;
    opacity: 0.8;
}

.footer-heading {
    position: relative;
    padding-bottom: 0.8rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-heading::after {
    /* RGB Underline */
    background: linear-gradient(90deg, #4466ff, #ff3366);
    width: 40px;
    height: 3px;
}

/* PAYMENT ICON SEQUENTIAL ANIMATION (User Request) */
@keyframes iconActiveSequence {

    0%,
    8.33% {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 10px rgba(68, 102, 255, 0.4);
        /* RGB Glow */
        background: #fff;
        z-index: 2;
        border-color: rgba(68, 102, 255, 0.3);
    }

    16.66%,
    100% {
        filter: grayscale(100%);
        opacity: 0.6;
        transform: scale(1);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        background: rgba(255, 255, 255, 0.1);
        z-index: 1;
        border-color: transparent;
    }
}

.payment-icon {
    animation: iconActiveSequence 12s linear infinite;
}

/* Group 1: Mobile Pay (0s to 5s) */
.payment-group:nth-of-type(1) .payment-icon:nth-child(1) {
    animation-delay: 0s;
}

.payment-group:nth-of-type(1) .payment-icon:nth-child(2) {
    animation-delay: 1s;
}

.payment-group:nth-of-type(1) .payment-icon:nth-child(3) {
    animation-delay: 2s;
}

.payment-group:nth-of-type(1) .payment-icon:nth-child(4) {
    animation-delay: 3s;
}

.payment-group:nth-of-type(1) .payment-icon:nth-child(5) {
    animation-delay: 4s;
}

.payment-group:nth-of-type(1) .payment-icon:nth-child(6) {
    animation-delay: 5s;
}

/* Group 2: Bank / Cards (6s to 11s) */
.payment-group:nth-of-type(2) .payment-icon:nth-child(1) {
    animation-delay: 6s;
}

.payment-group:nth-of-type(2) .payment-icon:nth-child(2) {
    animation-delay: 7s;
}

.payment-group:nth-of-type(2) .payment-icon:nth-child(3) {
    animation-delay: 8s;
}

.payment-group:nth-of-type(2) .payment-icon:nth-child(4) {
    animation-delay: 9s;
}

.payment-group:nth-of-type(2) .payment-icon:nth-child(5) {
    animation-delay: 10s;
}

.payment-group:nth-of-type(2) .payment-icon:nth-child(6) {
    animation-delay: 11s;
}

/* ==========================================================================
   WEB DESIGN SHOWCASE SECTION - Premium Glass Grid
   ========================================================================== */

.web-design-showcase {
    padding-bottom: 5rem;
    /* Space before Ecosystem */
    position: relative;
    z-index: 10;
}

.web-design-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding-top: 2rem;
    justify-content: center;
}

/* Specific Layout Tweaks: 3 Top, 2 Bottom if 5 items */
.web-design-grid {
    /* Auto layout handles responsiveness best, but centering is key */
    justify-content: center;
}

/* THE PREMIUM GLASS CARD */
.web-card {
    background: rgba(224, 229, 236, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;

    /* Soft Neumorphism */
    box-shadow:
        10px 10px 20px rgba(163, 177, 198, 0.25),
        -10px -10px 20px rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.5);

    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* RGB Gradient Border Reveal */
.web-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    /* Border width */
    background: linear-gradient(135deg, #ff3366, #4466ff, #00ebc7);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.4s ease;
}

.web-card:hover {
    transform: translateY(-8px) scale(1.02);
    /* Deeper Shadow on hover */
    box-shadow:
        15px 15px 40px rgba(68, 102, 255, 0.2),
        -15px -15px 40px rgba(255, 255, 255, 0.8);
}

.web-card:hover::before {
    opacity: 1;
    /* Show RGB Border */
}

/* Internal Glow */
.web-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.5s, transform 0.5s;
    pointer-events: none;
}

.web-card:hover .web-shine {
    opacity: 1;
    transform: scale(1);
}

/* Content Styling */
.web-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: inline-block;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
    transition: transform 0.4s ease;
}

.web-card:hover .web-icon {
    transform: scale(1.2) rotate(5deg);
}

.web-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--text-main);
    letter-spacing: 0.5px;
}

.web-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Specific Hues based on Type "Just a little bit RGB" */
/* Portfolio: Purple/Blue */
.web-portfolio:hover h3 {
    color: #4466ff;
}

.web-portfolio:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(68, 102, 255, 0.4));
}

/* Business: Blue/Navy */
.web-business:hover h3 {
    color: #005b9f;
}

.web-business:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(0, 91, 159, 0.4));
}

/* Fashion: Pink/Red */
.web-fashion:hover h3 {
    color: #ff3366;
}

.web-fashion:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(255, 51, 102, 0.4));
}

/* Gaming: Green/Neon */
.web-gaming:hover h3 {
    color: #00ebc7;
}

.web-gaming:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(0, 235, 199, 0.4));
}

/* Health: Cyan/Teal */
.web-health:hover h3 {
    color: #20c997;
}

.web-health:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(32, 201, 151, 0.4));
}


/* Grocery: Fresh Orange/Green */
.web-grocery:hover h3 {
    color: #ff9f43;
}

.web-grocery:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(255, 159, 67, 0.4));
}

/* ==========================================================================
   PRESENTATION & COURSE DESIGN STYLES (Restored)
   ========================================================================== */

/* 1. Modern Company: Corporate Blue */
.pres-company:hover h3 {
    color: #4466ff;
}

.pres-company:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(68, 102, 255, 0.4));
}

/* 2. Business Deal: Golden Success */
.pres-deal:hover h3 {
    color: #f1c40f;
}

.pres-deal:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(241, 196, 15, 0.4));
}

/* 3. Fashion Shop: Vibrant Magenta */
.pres-fashion:hover h3 {
    color: #e056fd;
}

.pres-fashion:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(224, 86, 253, 0.4));
}

/* 4. Gaming Project: Neon Violet */
.pres-gaming:hover h3 {
    color: #be2edd;
}

.pres-gaming:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(190, 46, 221, 0.4));
}

/* 5. Health Document: Clean Teal/Cyan */
.pres-health:hover h3 {
    color: #22a6b3;
}

.pres-health:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(34, 166, 179, 0.4));
}

/* 6. Gym Centre: Energetic Red */
.pres-gym:hover h3 {
    color: #eb4d4b;
}

.pres-gym:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(235, 77, 75, 0.4));
}

/* 7. Course Design: Intellectual Orange */
.pres-course:hover h3 {
    color: #e67e22;
}

.pres-course:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(230, 126, 34, 0.4));
}


/* ==========================================================================
   DIGITAL MARKETING SHOWCASE - "A Little Bit Different" (Holographic Tech)
   ========================================================================== */

/* Marketing Card Base - More "Tech" Feel */
.marketing-card {
    background: rgba(255, 255, 255, 0.7);
    /* Slightly more opaque/crystalline */
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 25px;
    /* Squircle */
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Float Up higher */
.marketing-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow:
        20px 20px 50px rgba(163, 177, 198, 0.3),
        -20px -20px 50px rgba(255, 255, 255, 0.9);
}

/* Holographic Border Effect (Different from the Gradient Border) */
.holo-border {
    position: absolute;
    inset: 0;
    border-radius: 25px;
    padding: 2px;
    background: linear-gradient(0deg, transparent, rgba(68, 102, 255, 0.8), transparent);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
}

/* On hover, the border spins/moves */
.marketing-card:hover .holo-border {
    opacity: 1;
    animation: holoSpin 2s linear infinite;
}

@keyframes holoSpin {
    0% {
        background: linear-gradient(0deg, transparent, rgba(68, 102, 255, 0.8), transparent);
    }

    50% {
        background: linear-gradient(180deg, transparent, rgba(255, 51, 102, 0.8), transparent);
    }

    100% {
        background: linear-gradient(360deg, transparent, rgba(68, 102, 255, 0.8), transparent);
    }
}

/* Specific Service Colors */
/* FB: Blue */
.mkt-fb:hover h3 {
    color: #1877F2;
}

.mkt-fb:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(24, 119, 242, 0.5));
}

/* Google: Multi-color -> Green/Blue dominant */
.mkt-google:hover h3 {
    color: #ea4335;
}

.mkt-google:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(234, 67, 53, 0.5));
}

/* YT: Red */
.mkt-yt:hover h3 {
    color: #FF0000;
}

.mkt-yt:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.5));
}

/* SMM: Pink/Purple */
.mkt-smm:hover h3 {
    color: #833AB4;
}

.mkt-smm:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(131, 58, 180, 0.5));
}

/* Content: Dark Blue */
.mkt-content:hover h3 {
    color: #2c3e50;
}

.mkt-content:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(44, 62, 80, 0.5));
}

/* Leads: Gold/Orange */
.mkt-leads:hover h3 {
    color: #f39c12;
}

.mkt-leads:hover .web-icon {
    filter: drop-shadow(0 0 15px rgba(243, 156, 18, 0.5));
}
:root {
    --bg-color: #e0e5ec; 
    --neu-dark-shadow: rgba(163, 177, 198, 0.5); 
}

body {
    background-color: var(--bg-color) !important;
}

.card, 
.btn, 
.category-box, 
.product-card, 
.search-card, 
.dropdown-menu,
.sidebar-menu,
.category-menu-item {
    background-color: var(--bg-color) !important;
    border: none !important;
    border-radius: 15px !important;
    box-shadow: 5px 5px 10px var(--neu-dark-shadow) !important;
    transition: all 0.3s ease;
}

.card:hover, 
.btn:hover,
.category-box:hover,
.product-card:hover {
    box-shadow: inset 4px 4px 8px var(--neu-dark-shadow) !important;
}

@keyframes rgbOutlineGlow {
    0% { box-shadow: 0 0 12px #ff0000, 5px 5px 10px rgba(163, 177, 198, 0.5); }
    25% { box-shadow: 0 0 12px #00ff00, 5px 5px 10px rgba(163, 177, 198, 0.5); }
    50% { box-shadow: 0 0 12px #0000ff, 5px 5px 10px rgba(163, 177, 198, 0.5); }
    75% { box-shadow: 0 0 12px #00ffff, 5px 5px 10px rgba(163, 177, 198, 0.5); }
    100% { box-shadow: 0 0 12px #ff00ff, 5px 5px 10px rgba(163, 177, 198, 0.5); }
}

.rounded-circle, 
.profile-icon, 
.cart-icon, 
.btn-circle {
    background-color: var(--bg-color) !important;
    border: none !important;
    border-radius: 50% !important;
    animation: rgbOutlineGlow 4s linear infinite !important;
}

.rgb-square {
    background-color: var(--bg-color) !important;
    border: none !important;
    border-radius: 10px !important;
    animation: rgbOutlineGlow 4s linear infinite !important;
}
header, 
.header, 
.navbar, 
.topbar {
    background-color: var(--bg-color) !important;
    border: none !important;
    box-shadow: 0 8px 15px rgba(163, 177, 198, 0.4) !important;
    border-radius: 0 0 20px 20px !important;
    margin-bottom: 15px !important;
}

.header .nav-item, 
.header .search-card,
.header .input-group,
.topbar .dropdown {
    background-color: var(--bg-color) !important;
    border-radius: 10px !important;
    box-shadow: inset 4px 4px 8px var(--neu-dark-shadow), 
                inset -4px -4px 8px rgba(255, 255, 255, 0.7) !important;
    padding: 5px 15px !important;
    margin: 5px !important;
}

.header *, 
.navbar *, 
.topbar * {
    color: #2c3e50 !important; 
}

footer, 
.footer, 
.page-footer,
.footer-area {
    background-color: #1e1f22 !important;
    border: none !important;
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5) !important;
    border-radius: 40px 40px 0 0 !important;
    margin-top: 50px !important;
    padding-top: 40px !important;
}

.footer .widget, 
.footer .footer-column, 
.footer .newsletter,
.footer .card {
    background-color: #1e1f22 !important;
    border-radius: 20px !important;
    box-shadow: 8px 8px 16px #0d0d0f, 
               -8px -8px 16px #2f3135 !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.footer *, 
.footer h1, 
.footer h2, 
.footer h3, 
.footer p, 
.footer span,
.footer a {
    color: #e0e5ec !important;
}

.footer a:hover {
    color: #00ffff !important;
    text-shadow: 0 0 10px #00ffff !important;
    transition: 0.3s;
}

.header .rounded-circle,
.footer .rounded-circle,
.footer .social-icon {
    animation: rgbOutlineGlow 4s linear infinite !important;
}@keyframes pureRgbGlow {
    0% { box-shadow: 0 0 12px #ff0000 !important; }
    25% { box-shadow: 0 0 12px #00ff00 !important; }
    50% { box-shadow: 0 0 12px #0000ff !important; }
    75% { box-shadow: 0 0 12px #00ffff !important; }
    100% { box-shadow: 0 0 12px #ff00ff !important; }
}

header .rounded-circle,
.navbar .rounded-circle,
.topbar .rounded-circle,
.navbar-tool-icon-box,
header [class*="icon-box"],
header [class*="cart-icon"],
header [class*="profile-icon"],
header [class*="search-icon"],
.navbar-tool .navbar-tool-icon-box {
    animation: pureRgbGlow 3s linear infinite alternate !important;
    border-radius: 50% !important;
}footer, 
.footer, 
.page-footer {
    background-color: #1a1d24 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 40px 40px 0 0 !important;
    padding: 60px 0 30px 0 !important;
    margin-top: 50px !important;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.5) !important;
    border: none !important;
}

.footer .widget, 
.footer .footer-column, 
.footer .newsletter-card, 
.footer .footer-item {
    background-color: #222630 !important;
    border-radius: 20px !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
    box-shadow: 8px 8px 16px #13151a, 
               -8px -8px 16px #313b46 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
}

.footer .widget:hover {
    transform: translateY(-8px) !important;
    box-shadow: 10px 10px 20px #13151a, 
               -10px -10px 20px rgba(0, 255, 255, 0.15) !important;
}

.footer h1, .footer h2, .footer h3, .footer h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.footer p, .footer span, .footer li, .footer a {
    color: #e2e8f0 !important;
    line-height: 1.6 !important;
    font-size: 15px !important;
    text-decoration: none !important;
}

.footer a:hover {
    color: #00ffff !important;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.8) !important;
    font-weight: bold !important;
}

.footer .rounded-circle, 
.footer .social-icon, 
.footer [class*="icon"] {
    background-color: #222630 !important;
    box-shadow: 5px 5px 10px #13151a, 
               -5px -5px 10px #313b46 !important;
    transition: 0.3s !important;
    color: #00ffff !important;
}

.footer .rounded-circle:hover, 
.footer .social-icon:hover {
    animation: rgbOutlineGlow 3s linear infinite !important;
    transform: scale(1.15) rotate(10deg) !important;
}footer, 
.footer, 
.page-footer {
    background-color: #1a1d24 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 40px 40px 0 0 !important;
    padding: 60px 0 30px 0 !important;
    margin-top: 50px !important;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.5) !important;
    border: none !important;
}

.footer .widget, 
.footer .footer-column, 
.footer .newsletter-card, 
.footer .footer-item {
    background-color: #222630 !important;
    border-radius: 20px !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
    box-shadow: 8px 8px 16px #13151a, 
               -8px -8px 16px #313b46 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
}

.footer .widget:hover {
    transform: translateY(-8px) !important;
    box-shadow: 10px 10px 20px #13151a, 
               -10px -10px 20px rgba(0, 255, 255, 0.15) !important;
}

.footer h1, .footer h2, .footer h3, .footer h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.footer p, .footer span, .footer li, .footer a {
    color: #e2e8f0 !important;
    line-height: 1.6 !important;
    font-size: 15px !important;
    text-decoration: none !important;
}

.footer a:hover {
    color: #00ffff !important;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.8) !important;
    font-weight: bold !important;
}

.footer .rounded-circle, 
.footer .social-icon, 
.footer [class*="icon"] {
    background-color: #222630 !important;
    box-shadow: 5px 5px 10px #13151a, 
               -5px -5px 10px #313b46 !important;
    transition: 0.3s !important;
    color: #00ffff !important;
}

.footer .rounded-circle:hover, 
.footer .social-icon:hover {
    animation: rgbOutlineGlow 3s linear infinite !important;
    transform: scale(1.15) rotate(10deg) !important;
}.header h1, .header h2, .header h3, .header h4, .header h5, .header h6,
.header p, .header span, .header a, .header li, .header div,
.navbar h1, .navbar h2, .navbar h3, .navbar h4, .navbar h5, .navbar h6,
.navbar p, .navbar span, .navbar a, .navbar li, .navbar div,
.topbar p, .topbar span, .topbar a, .topbar li {
    color: #ff0000 !important;
}

.header i, .header svg path,
.navbar i, .navbar svg path,
.topbar i, .topbar svg path {
    color: #ff0000 !important;
    fill: #ff0000 !important;
}

.header input, 
.navbar input {
    color: #ff0000 !important;
}

.header input::placeholder, 
.navbar input::placeholder {
    color: rgba(255, 0, 0, 0.6) !important;
}div[class*="quantity"], 
div[class*="qty"], 
section[class*="quantity"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 10px 0 !important;
}

.quantity, .qty, .product-quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ff0000 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: transparent !important;
    animation: qtyRgbBorder 4s linear infinite !important;
    width: fit-content !important;
}

@keyframes qtyRgbBorder {
    0% { border-color: #ff0000; box-shadow: 0 0 5px #ff0000; }
    33% { border-color: #00ff00; box-shadow: 0 0 5px #00ff00; }
    66% { border-color: #0000ff; box-shadow: 0 0 5px #0000ff; }
    100% { border-color: #ff00ff; box-shadow: 0 0 5px #ff00ff; }
}

.quantity .btn, .qty .btn, .btn-number {
    box-shadow: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 8px 15px !important;
    margin: 0 !important;
    height: 100% !important;
    font-weight: bold !important;
    transform: none !important;
    animation: none !important;
}

/* Plus sign color set to Green */
.quantity .btn:last-child, 
.qty .btn:last-child, 
.btn-number[data-type="plus"] {
    color: #28a745 !important;
}

/* Minus sign color set to Red */
.quantity .btn:first-child, 
.qty .btn:first-child, 
.btn-number[data-type="minus"] {
    color: #ff0000 !important;
}

.quantity input, .qty input, .input-number {
    box-shadow: none !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 !important;
    color: #333 !important;
    padding: 5px !important;
    text-align: center !important;
    width: 50px !important;
    height: 100% !important;
    margin: 0 !important;
}/* Wishlist heart icon color when active or hovered */
[class*="wishlist"] i, 
[class*="heart"] i, 
.fa-heart, 
.fa-heart-o:hover {
    color: #ff0000 !important;
}

/* Specifically for the heart icon when selected/filled */
.active [class*="wishlist"] i, 
.active [class*="heart"] i,
.wishlist-active i {
    color: #ff0000 !important;
}

/* Wishlist count number color set to Green */
[class*="wishlist-count"], 
[class*="heart-count"], 
.wishlist-quantity,
[id*="wishlist-count"] {
    color: #28a745 !important;
    font-weight: bold !important;
}
div[class*="quantity"], 
div[class*="qty"], 
section[class*="quantity"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 10px 0 !important;
    white-space: nowrap !important;
}

div[class*="quantity"] label,
div[class*="qty"] label,
section[class*="quantity"] label,
div[class*="quantity"] span,
div[class*="qty"] span {
    white-space: nowrap !important;
    display: inline-block !important;
}

.quantity, .qty, .product-quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ff0000 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: transparent !important;
    animation: qtyRgbBorder 4s linear infinite !important;
    width: fit-content !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@keyframes qtyRgbBorder {
    0% { border-color: #ff0000; box-shadow: 0 0 5px #ff0000; }
    33% { border-color: #00ff00; box-shadow: 0 0 5px #00ff00; }
    66% { border-color: #0000ff; box-shadow: 0 0 5px #0000ff; }
    100% { border-color: #ff00ff; box-shadow: 0 0 5px #ff00ff; }
}

.quantity .btn, .qty .btn, .btn-number {
    box-shadow: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 8px 15px !important;
    margin: 0 !important;
    height: 100% !important;
    font-weight: bold !important;
    transform: none !important;
    animation: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.quantity .btn:focus, .qty .btn:focus, .btn-number:focus,
.quantity .btn:active, .qty .btn:active, .btn-number:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.quantity .btn:last-child, 
.qty .btn:last-child, 
.btn-number[data-type="plus"] {
    color: #28a745 !important;
}

.quantity .btn:first-child, 
.qty .btn:first-child, 
.btn-number[data-type="minus"] {
    color: #ff0000 !important;
}

.quantity input, .qty input, .input-number {
    box-shadow: none !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 !important;
    color: #333 !important;
    padding: 5px !important;
    text-align: center !important;
    width: 50px !important;
    height: 100% !important;
    margin: 0 !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.quantity input:focus, .qty input:focus, .input-number:focus,
.quantity input:active, .qty input:active, .input-number:active {
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 991px) {
    .quantity, .qty, .product-quantity {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        flex: 0 0 120px !important;
        height: 38px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    .quantity .btn, .qty .btn, .btn-number,
    .quantity button, .qty button {
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;
        flex: 0 0 35px !important;
        height: 38px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    .quantity input, .qty input, .input-number {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        flex: 0 0 46px !important;
        height: 38px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        background-color: transparent !important;
    }
}