:root {
    --brand-primary: #0062E6;
    --brand-blue: #0062E6;
    --accent: #ff7a00;
    --gradient: linear-gradient(89.88deg, #db05e7 .11%, #3545d9 45%, #0e8bd9 99.89%);
    --gradient-2: linear-gradient(80deg, #db05e7 .11%, #3545d9 80%, #0e8bd9 99.89%);
    --bg-dark: #0a0a0a;
    --bg-darker: #000000;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
}

body.user-logged-in{
    padding: 0 !important;
}
body.user-logged-in #toolbar-administration{
    display: none !important;
}


/* Platform Section Classes - Unified styling for all platform pages */
/* Uses gradients and brand colors, works on both light-theme and bg-dark */

/* Section borders - gradient based */
.section-border {
    border-color: #ccc;
    border-radius: 0;

}
.bg-dark .section-border {
    border-color: rgba(0, 98, 230, 0.5);
}

/* Section background - elegant design with light background and gradient border */
.section-bg {
    background: linear-gradient(135deg, rgba(0, 98, 230, 0.04) 0%, rgba(219, 5, 231, 0.04) 100%);
    border-radius: 0;
    border:none;
    color: var(--brand-blue);
    position: relative;
    overflow: hidden;
}
.card-header.section-bg {
    border: none;
    padding: 15px;
}
.section-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient);
    z-index: 1;
}
/* Main card sections - use brand blue text */
.card.section-bg:not(.rounded-circle),
.card-header.section-bg,
.card-header.section-bg.text-white,
.card.section-bg h4,
.card.section-bg h5,
.card.section-bg .display-4,
.card.section-bg .display-3,
.card.section-bg p {
    color: var(--brand-blue) !important;
    position: relative;
    z-index: 2;
}
/* Circular icons keep white text for contrast */
.rounded-circle.section-bg.text-white {
    background: var(--gradient-2);
    color: #ffffff !important;
    border: none;
}
.rounded-circle.section-bg.text-white::before {
    display: none;
}
.bg-dark .section-bg {
    background: linear-gradient(135deg, rgba(0, 98, 230, 0.1) 0%, rgba(219, 5, 231, 0.1) 100%);
    border-color: rgba(0, 98, 230, 0.4);
    color: rgba(255, 255, 255, 0.95);
}
.bg-dark .section-bg.text-white,
.bg-dark .section-bg .text-white,
.bg-dark .section-bg h4,
.bg-dark .section-bg h5,
.bg-dark .section-bg .display-4,
.bg-dark .section-bg .display-3,
.bg-dark .section-bg p {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Section text/icon - gradient text for visibility */
.section-text,
.section-icon {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--brand-blue);
}
.bg-dark .section-text,
.bg-dark .section-icon {
    color: rgba(255, 255, 255, 0.9);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
}

/* Section opacity background */
.section-opacity-bg {
    background-color: rgba(0, 98, 230, 0.1);
}
.bg-dark .section-opacity-bg {
    background-color: rgba(0, 98, 230, 0.15);
}

/* Section table header */
.section-table-header {
    background: var(--gradient);
    color: #ffffff;
}
.section-table-header thead {
    background: var(--gradient);
    color: #ffffff;
}

/* Semantic colors for functional purposes only (checkmarks, status badges) */
.text-brand-success {
    color: var(--accent) !important;
}
.bg-dark .text-brand-success {
    color: #ffffff !important;
}

.text-brand-danger {
    color: #F36C24 !important;
}
.bg-dark .text-brand-danger {
    color: #ffb899 !important;
}

.badge-brand-success-bg,
.brand-success-bg {
    background-color: #0099CB;
    color: #ffffff;
}

.badge-brand-danger-bg,
.brand-danger-bg {
    background-color: #F36C24;
    color: #ffffff;
}

.badge-brand-warning {
    background-color: #FDD154;
    color: #263992;
}

/* Alert variants for semantic purposes */
.alert-brand-primary {
    background-color: rgba(0, 98, 230, 0.1);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}
.bg-dark .alert-brand-primary {
    background-color: rgba(0, 98, 230, 0.15);
    border-color: rgba(0, 98, 230, 0.5);
    color: rgba(255, 255, 255, 0.9);
}

.alert-brand-success {
    background-color: rgba(0, 153, 203, 0.1);
    border-color: #0099CB;
    color: #0099CB;
}
.bg-dark .alert-brand-success {
    background-color: rgba(13, 204, 249, 0.1);
    border-color: #0dccf9;
    color: #0dccf9;
}

.alert-brand-info {
    background-color: rgba(0, 150, 255, 0.1);
    border-color: #0096FF;
    color: #0096FF;
}
.bg-dark .alert-brand-info {
    background-color: rgba(127, 191, 253, 0.1);
    border-color: #7FBFFD;
    color: #7FBFFD;
}

.alert-brand-danger {
    background-color: rgba(243, 108, 36, 0.1);
    border-color: #F36C24;
    color: #F36C24;
}
.bg-dark .alert-brand-danger {
    background-color: rgba(255, 184, 153, 0.1);
    border-color: #ffb899;
    color: #ffb899;
}

/* Customer Success Section - Light Gray Background */
section#proof {
    background-color: #f8f9fa !important;
}
section#proof.bg-dark {
    background-color: #1a1a1a !important;
}
.light-theme section#proof {
    background-color: #f8f9fa !important;
}

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

html {
    overflow-x: hidden;
}
/* Light Theme Overrides */

body {
    /* font-family: 'Inter', sans-serif; */
    font-family: 'Jost', sans-serif;
    background: var(--bg-darker);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
}

.bg-dark {
    background: var(--bg-dark) !important;
}

/* Section styling */
.main-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding: 100px 0;
}

.small, small {
    font-size: 1em;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.8rem 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* background: rgba(0, 0, 0, 0.5); */
    backdrop-filter: blur(20px);
}

.navbar.scrolled {
    padding: 1rem 0;
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 4px 30px rgba(0, 98, 230, 0.15);
}

.logo {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-link {
    color: var(--text-secondary) !important;
    font-weight: 400;
    font-size: 1.2rem;
    transition: color 0.3s ease;
    position: relative;
    padding: 0.5rem 1.2rem !important;
}

@media (min-width: 960px) and (max-width: 1500px) {
    .nav-link {
        font-size: 16px;
        padding: 0.5rem 10px !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .navbar .container{
        max-width: 98%;
    }
    .nav-item .btn {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 12px;
    }

}


.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--gradient);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--text-primary) !important;
}

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

.btn-primary-gradient {
    background: var(--gradient);
    color: white;
    padding: 0.7rem 1.8rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn-primary-gradient::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-primary-gradient:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(219, 5, 231, 0.4);
}

/* Offcanvas Menu Styles */
.offcanvas {
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(0, 98, 230, 0.2);
}

.offcanvas-title {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.btn-close {
    filter: invert(1);
    opacity: 0.7;
}

.offcanvas-body .nav-link {
    padding: 1rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.05rem;
}

.offcanvas-body .nav-link::after {
    display: none;
}

.btn-menu-icon {
    background: transparent;
    border: 2px solid var(--brand-blue);
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-menu-icon:hover {
    background: var(--brand-blue);
    transform: translateY(-2px);
}

/* Hero Section - Enhanced */
.hero-section {
    background: var(--bg-darker);
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* Animated gradient orbs */
.hero-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 30% 50%, rgba(219, 5, 231, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 70% 50%, rgba(53, 69, 217, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, rgba(14, 139, 217, 0.2) 0%, transparent 40%);
    animation: rotateGradient 25s linear infinite;
}

/* Pulse effect overlay */
.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(0, 98, 230, 0.05) 50%, transparent 100%),
        linear-gradient(0deg, transparent 0%, rgba(219, 5, 231, 0.05) 50%, transparent 100%);
    background-size: 200% 200%, 200% 200%;
    animation: pulseLines 6s ease-in-out infinite;
}

@keyframes rotateGradient {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.15); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes pulseLines {
    0%, 100% { 
        opacity: 0.4;
        background-position: 0% 0%, 0% 0%;
    }
    50% { 
        opacity: 0.7;
        background-position: 100% 100%, 100% 100%;
    }
}

/* Enhanced particles with glow */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Ensure animated elements start hidden */
.showcase-stat-item,
.stat-showcase-card,
.service-card,
.platform-card-wrapper,
.hyperscaler-logo,
.news-card,
.career-highlight,
.footer-link {
    opacity: 0;
}

.particle {
    position: absolute;
    background: radial-gradient(circle, var(--brand-blue) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.7;
    animation: float 15s infinite ease-in-out;
    filter: blur(1px);
}

.particle:nth-child(1) { width: 8px; height: 8px; left: 10%; top: 20%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { width: 6px; height: 6px; left: 80%; top: 30%; animation-delay: 2s; animation-duration: 15s; }
.particle:nth-child(3) { width: 10px; height: 10px; left: 30%; top: 60%; animation-delay: 4s; animation-duration: 18s; }
.particle:nth-child(4) { width: 5px; height: 5px; left: 70%; top: 70%; animation-delay: 1s; animation-duration: 14s; }
.particle:nth-child(5) { width: 7px; height: 7px; left: 50%; top: 40%; animation-delay: 3s; animation-duration: 16s; }
.particle:nth-child(6) { width: 9px; height: 9px; left: 20%; top: 80%; animation-delay: 5s; animation-duration: 13s; }
.particle:nth-child(7) { width: 6px; height: 6px; left: 90%; top: 60%; animation-delay: 2.5s; animation-duration: 17s; }
.particle:nth-child(8) { width: 8px; height: 8px; left: 40%; top: 25%; animation-delay: 4.5s; animation-duration: 15.5s; }

@keyframes float {
    0%, 100% { 
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.7;
    }
    25% { 
        transform: translateY(-40px) translateX(30px) scale(1.3);
        opacity: 0.9;
    }
    50% { 
        transform: translateY(-80px) translateX(-30px) scale(0.9);
        opacity: 0.5;
    }
    75% { 
        transform: translateY(-40px) translateX(40px) scale(1.2);
        opacity: 0.8;
    }
}

/* Animated grid */
.hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 98, 230, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 98, 230, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: gridMove 30s linear infinite;
    z-index: 0;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.1) 100%);
}

@keyframes gridMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(80px); }
}

/* Text reveal animation */
.text-reveal {
    overflow: hidden;
}

.text-reveal span {
    display: inline-block;
    opacity: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -2px;
}

.hero-title small{
    font-weight: 600;
}

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

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.btn-outline-gradient {
    background: transparent;
    color: var(--text-primary);
    padding: 0.7rem 1.8rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid transparent;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
}

.btn-outline-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient);
    border-radius: 50px;
    padding: 2px;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    z-index: 0;
}

/* Light theme - ensure border is visible */
.light-theme .btn-outline-gradient {
    color: var(--brand-blue);
}

/* Dark theme */
.bg-dark .btn-outline-gradient {
    color: rgba(255, 255, 255, 0.9);
}

.btn-outline-gradient:hover {
    background: var(--brand-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 98, 230, 0.4);
}

.light-theme .btn-outline-gradient:hover {
    color: #ffffff;
}

.bg-dark .btn-outline-gradient:hover {
    color: #ffffff;
}

/* Enhanced button animations */
.btn-primary-gradient,
.btn-outline-gradient {
    position: relative;
    overflow: hidden;
}

.btn-primary-gradient::after,
.btn-outline-gradient::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-primary-gradient:hover::after,
.btn-outline-gradient:hover::after {
    width: 300px;
    height: 300px;
}

/* Stats Showcase Section */
.stats-showcase-section {
    background: var(--bg-dark);
    padding: 5% 0;
    position: relative;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
}

.stats-showcase-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 80% 50%, rgba(219, 5, 231, 0.08) 0%, transparent 50%);
    z-index: 0;
}

.stats-showcase-content,.stats-showcase-section .container {
    position: relative;
    z-index: 1;
}

.showcase-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.showcase-stat-item {
    text-align: center;
    padding: 2rem 1.5rem;
    background: rgba(0, 98, 230, 0.05);
    border: 1px solid rgba(0, 98, 230, 0.2);
    border-radius: 16px;
    transition: all 0.4s ease;
}

.showcase-stat-item:hover {
    background: rgba(0, 98, 230, 0.1);
    border-color: var(--brand-blue);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 98, 230, 0.3);
}

.showcase-stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.showcase-stat-label {
    font-size: 0.85rem;
    /* color: var(--text-muted); */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-showcase-left {
    padding-right: 3rem;
}

.stats-showcase-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 2rem;
    letter-spacing: -1px;
}

.stats-showcase-description {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.stats-showcase-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stat-showcase-card {
    /* background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1); */
    border-radius: 24px;
    padding: 2.5rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
.bg-dark .stat-showcase-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-showcase-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient);
    opacity: 0;
    transition: all 0.4s ease;
}

.stat-showcase-card:hover::before {
    left: 0;
    opacity: 0.05;
}

.stat-showcase-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--brand-blue);
    transform: translateX(10px);
    box-shadow: 0 20px 40px rgba(0, 98, 230, 0.2);
}

.stat-showcase-number {
    font-size: 2rem;
    font-weight: 900;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.stat-showcase-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

.stat-showcase-client {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.stat-showcase-card:hover .stat-showcase-client {
    color: var(--brand-blue);
}

/* Services Section */
.services-section {
    background: var(--bg-dark);
    overflow: hidden;
    padding: 120px 0;
}

.services-header {
    margin-bottom: 3rem;
    text-align: center;
}

.section-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -2px;
}

.section-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
}

.services-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    user-select: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.services-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.services-scroll-wrapper:active {
    cursor: grabbing;
}

.services-scroll-container {
    display: flex;
    gap: 2rem;
    padding: 2rem 4rem 3rem 4rem;
    width: max-content;
}

.service-card {
    min-width: 380px;
    max-width: 380px;
    background: rgba(0, 98, 230, 0.03);
    border: 1px solid rgba(0, 98, 230, 0.2);
    border-radius: 24px;
    padding: 2rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Ensure service-card-body content is above hover effects */
.service-card-body {
    position: relative;
    z-index: 5;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient);
    opacity: 0;
    transition: all 0.4s ease;
}

.service-card:hover::before {
    left: 0;
    opacity: 0.05;
}

.service-card:hover {
    background: rgba(0, 98, 230, 0.08);
    border-color: var(--brand-blue);
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 98, 230, 0.2);
}

/* Don't apply card hover when hovering over badges */
.service-card:hover:has(.service-key-services .badge:hover) {
    transform: translateY(0);
    background: rgba(0, 98, 230, 0.03);
    border-color: rgba(0, 98, 230, 0.2);
    box-shadow: none;
}

.service-cta {
    display: inline-block;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.service-cta:hover {
    color: var(--brand-blue);
}

.service-cta:hover::after {
    transform: translateX(5px);
}

.service-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    background: var(--gradient);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.8rem;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.service-icon i {
    color: #ffffff;
    font-size: 1.8rem;
}

.service-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.service-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
}

.service-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

/* Platform Cards Section - Enhanced */
.platforms-section {
    background: var(--bg-darker);
    padding: 120px 0;
    min-height: auto;
}

.platforms-cards-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
}

.platform-card-wrapper {
    position: relative;
    opacity: 0;
    transform: translateY(50px);
}

.platform-card {
    background: rgba(250, 252, 255, 0.05);
    border: 2px solid rgba(0, 98, 230, 0.2);
    border-radius: 30px;
    padding: 3.5rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
    transition: all 0.4s ease;
    text-decoration: none;
    color: inherit;
}

.platform-card:hover {
    border-color: var(--brand-blue);
    background: rgba(250, 252, 255, 0.08);
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 98, 230, 0.3);
    color: inherit;
}

.platform-card-left {
    position: relative;
    z-index: 1;
}

.platform-icon-container {
    width: 70px;
    height: 70px;
    background: var(--gradient);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.platform-icon-container svg {
    width: 36px;
    height: 36px;
    fill: white;
}

.platform-card-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -1px;
    line-height: 1.2;
}

.platform-card-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.4;
}

.platform-card-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.platform-card-list li {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
    padding-left: 2rem;
    position: relative;
    line-height: 1.6;
}

.platform-card-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.platform-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.platform-feature-badge {
    background: rgba(0, 98, 230, 0.15);
    border: 1px solid rgba(0, 98, 230, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.platform-card:hover .platform-feature-badge {
    background: rgba(0, 98, 230, 0.25);
    border-color: var(--brand-blue);
}

.platform-card-right {
    position: relative;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
}

.platform-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.6s ease;
}

.platform-card:hover .platform-card-image {
    transform: scale(1.05);
}

/* Hyperscalers Section */
.hyperscalers-section {
    background: var(--bg-dark);
    padding: 120px 0;
}

.hyperscalers-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
}

.hyperscalers-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    margin-top: 4rem;
}

.hyperscaler-logo {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    min-height: 140px;
}

.hyperscaler-logo:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--brand-blue);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 98, 230, 0.2);
}

.hyperscaler-logo img {
    max-width: 100%;
    max-height: 50px;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.hyperscaler-logo svg {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.hyperscaler-logo:hover img,
.hyperscaler-logo:hover svg {
    opacity: 1;
}

.view-partners-btn {
    display: inline-block;
    margin-top: 3rem;
    padding: 1rem 2.5rem;
    background: transparent;
    border: 2px solid var(--brand-blue);
    color: var(--text-primary);
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.view-partners-btn:hover {
    background: var(--brand-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 98, 230, 0.4);
}

/* News Section */
.news-section {
    background: var(--bg-darker);
    padding: 120px 0;
}


.news-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin-top: 3rem;
}

.news-left {
    background: #091019;
    border-radius: 24px;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-left h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
}

.news-list {
    list-style: none;
    padding: 0;
}

.news-list-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.news-list-item:hover {
    text-decoration: underline;
    color: inherit;
}

.news-list-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.news-list-item .date {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.news-highlight-card {
    background: linear-gradient(135deg, #b8741a 0%, #8b5a13 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-top: 2rem;
}

.news-highlight-card h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.news-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.news-card {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.news-card:hover {
    transform: translateY(-10px);
    color: inherit;
}

.insights-news-card::before,
.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
}

.news-card-content {
    position: relative;
    z-index: 1;
    padding: 2rem;
    width: 100%;
}

.news-card h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.news-card .date {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
}

/* Contact Section */
.contact-section {
    background: var(--bg-dark);
    position: relative;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    padding: 120px 0;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient);
    opacity: 0.03;
    z-index: -1;
}

.contact-form {
    background: rgba(0, 98, 230, 0.05);
    border: 1px solid rgba(0, 98, 230, 0.2);
    border-radius: 24px;
    padding: 3rem;
    position: relative;
    z-index: 1;
}

.form-label {
    font-weight: 600;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: var(--text-primary);
    padding: 0.9rem 1.2rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 98, 230, 0.1);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Footer */
.footer {
    background: #000;
    padding: 4rem 0 2rem;
    border-top: 1px solid rgba(0, 98, 230, 0.2);
}

.footer-brand {
    font-size: 1.8rem;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}
.footer-brand img{
    max-width: 80%;
}

.footer-description {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}

.footer-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.footer-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    display: block;
    margin-bottom: 0.8rem;
}

.footer-link:hover {
    color: var(--brand-blue);
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    margin-top: 3rem;
}

.footer-bottom p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

@media (min-width: 1400px) and (max-width: 1600px) {
  .nav-link {
        font-size: 16px !important;
  }
	
}

@media (min-width: 990px) and (max-width: 1600px) {

.hero-content-left .hero-subtitle {
    font-size: 16px  !important;
    margin-bottom: 10px !important;
}
.hero-content-left .hero-title {
    font-size: 32px !important;
}
.hero-content-left h6{
    font-size: 14px !important;
	margin-bottom: 5px !important; 
}
.stat-showcase-number {
    font-size: 1.6rem !important;
}
.section-title {
    font-size: 26px !important;
}
.section-subtitle {
    font-size: 16px  !important;
}
.platform-card-title {
    font-size: 1.8rem !important;
}
.sticky-nav-text {
    font-size: 0.75rem !important;
}
.sticky-nav-item.active::before {
    width: 65px !important;
}
.display-4 {
    font-size: 2rem !important;
}
.lead {
    font-size: 1rem !important;
}
.practice-header h3{
    font-size: 1.2rem !important;
}
.practice-header p{
    font-size: 1rem !important;
}
.btn-outline-gradient,
.btn-primary-gradient{
    padding: 0.5rem 1.2rem !important;
    font-size: 0.8rem !important;
}
/*.hero-content-left {
    margin: 24% 0 2% 0 !important;
}*/
.navbar-brand.logo img{
   max-height: 45px;
}

}

/* Responsive */
@media (max-width: 1200px) {
/*    .hero-title {
        font-size: 3.5rem;
        letter-spacing: -2.5px;
    }
    
    .hero-content-left .hero-title {
        font-size: 3.5rem !important;
        letter-spacing: -2.5px;
    }
    
    .hero-banner-section .hero-title {
        font-size: 3.5rem;
        letter-spacing: -2.5px;
    }
    */
    .platform-card {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }

    .hyperscalers-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .stats-showcase-left {
        padding-right: 1rem;
        margin-bottom: 3rem;
    }

    .showcase-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 992px) {
    .hero-title {
        font-size: 2.8rem;
        letter-spacing: -2px;
    }
    
    .hero-content-left .hero-title {
        font-size: 2.8rem !important;
        letter-spacing: -2px;
    }
    
    .hero-banner-section .hero-title {
        font-size: 2.8rem;
        letter-spacing: -2px;
    }
    
    .hero-subtitle {
        font-size: 1.2rem !important;
    }
    
    .hero-content-left .hero-subtitle {
        font-size: 1.2rem !important;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    .service-card {
        min-width: 320px;
    }
    
    .news-right {
        grid-template-columns: 1fr;
    }

    .hyperscalers-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-showcase-title {
        font-size: 2rem;
    }

    .stat-showcase-number {
        font-size: 3rem;
    }

    .showcase-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .showcase-stat-value {
        font-size: 2rem;
    }

}

@media (max-width: 768px) {
    .main-section {
        padding: 80px 0 40px;
    }
    
    .hero-title {
        font-size: 2rem;
        letter-spacing: -1px;
        line-height: 1.2;
    }
    
    .hero-content-left .hero-title {
        font-size: 2rem !important;
        letter-spacing: -1px;
        line-height: 1.2;
    }
    
    .hero-banner-section .hero-title {
        font-size: 2rem;
        letter-spacing: -1px;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
        line-height: 1.5;
    }
    
    .hero-content-left .hero-subtitle {
        font-size: 1.1rem !important;
        line-height: 1.5;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .service-card {
        min-width: 280px;
    }
    
    .contact-form {
        padding: 2rem;
    }

    .hyperscalers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-showcase-section {
        padding: 80px 0;
    }

    .stats-showcase-title {
        font-size: 1.8rem;
    }

    .stat-showcase-number {
        font-size: 2.5rem;
    }

    .stats-showcase-left {
        padding-right: 0;
    }

    .showcase-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 3rem;
    }

    .showcase-stat-item {
        padding: 1.5rem 1rem;
    }

    .showcase-stat-value {
        font-size: 2rem;
    }

    .particle {
        display: none;
    }
    
    /* Mobile video optimizations */
    .hero-video {
        opacity: 0.2;
        filter: brightness(0.3) contrast(1.1);
    }
    
    /* Disable video on very small screens for performance */
    @media (max-width: 480px) {
        .hero-video {
            display: none;
        }
        
        .hero-fallback-bg {
            display: block !important;
        }
    }

    .platform-card {
        padding: 2rem;
    }

    .platform-card-title {
        font-size: 1.8rem;
    }

    .platform-card-right {
        height: 250px;
    }
    .navbar>.container,
    .offcanvas .container{
        max-width: 100% !important;
    }
    .navbar-right, .offcanvas-right {
        display: block !important;
        flex: none !important;
    }
    .navbar-right .nav-item .btn{
        padding: 10px;
    }
    .search-container {
        width: 100% !important;
    }
    .hero-banner-section .container,
    .hero-slider-section .ms-layer .container {
        max-width: 100% !important;
    }
    .hero-slider-section .ms-layer .container .row {
        margin: 0 !important;
    }
    .hero-slider-section .ms-layer .small{
        font-size: 4em !important;
    }

}

/* ### */

.gated-page .container{
	max-width: 90%;
}
.gated-banner.hero-banner-section {
    min-height: 50vh;
}
.gated-banner.hero-banner-section,
.gated-banner .hero-content-overlay {
    min-height: 50vh;
}

.gated-form{
    top: -45%;
    position: absolute;
    z-index: 9;
}
.gated-form .card{
    border-radius: 0;
}

@media (max-width: 768px) {
.gated-form{
    top: 0;
	position: relative;
}	
.gated-form .container{
	max-width: 100%;
}	
	
}

 
.top-right-bg,.bottom-right-bg,.top-left-bg,.bottom-left-bg,.top-right-bg-2,.top-left-bg-2,.bottom-left-bg-2,.top-right-bg-2{
    position: relative;
}
.bottom-left-bg-2 .container,
.bottom-right-bg .container,
.top-left-bg .container,
.top-right-bg .container,
.top-left-bg-2 .container,
.bottom-left-bg-2 .container,
.top-right-bg-2 .container,
.bottom-right-bg-2 .container{
    position: relative;
    z-index: 1;
}
.bottom-right-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30vw;
    height: 50%;
    background: url(../images/static/bgs/bg-4.png) no-repeat;
    background-size: contain;
    z-index: 0;
    display: block;
    background-position: right bottom;
}

.top-left-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20vw;
    height: 30%;
    background: url(../images/static/bgs/bg-5.png) no-repeat;
    background-size: contain;
    z-index: 0;
    display: block;
    background-position: top left;
}
.bottom-left-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 22vw;
    height: 30%;
    background: url(../images/static/bgs/bg-8.png) no-repeat;
    background-size: contain;
    z-index: 0;
    display: block;
    background-position: bottom left;
}
.bottom-left-bg-2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 22vw;
    height: 30%;
    background: url(../images/static/bgs/bg-9.png) no-repeat;
    background-size: contain;
    z-index: 0;
    display: block;
    background-position: bottom left;
    z-index: 0;
}
.top-right-bg-2::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 22vw;
    height: 30%;
    background: url(../images/static/bgs/top-right-2.png) no-repeat;
    background-size: contain;
    z-index: 0;
    display: block;
    background-position: top right;
}
.top-right-bg::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 22vw;
    height: 30%;
    background: url(../images/static/bgs/top-right-3.png) no-repeat;
    background-size: contain;
    z-index: 0;
    display: block;
    background-position: top right;
}
.top-left-bg-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 21vw;
    height: 50%;
    background: url(../images/static/bgs/bg-2.png) no-repeat;
    background-size: contain;
    z-index: 0;
    display: block;
}


.platform-card-icon {
    max-height: 40px;
}


.hero-fallback-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 98, 230, 0.2) 50%,
        rgba(219, 5, 231, 0.2) 100%
    );
    position: absolute;
    top: 0;
    left: 0;
}
.navbar-brand.logo img{
    height: 70px;
}

.navbar.scrolled {
    padding: 0.2rem 0;
    transition: all 0.3s ease;
}
.navbar.scrolled .navbar-brand.logo img{
    height: 60px;
    transition: all 0.3s ease;
}
.navbar.scrolled .nav-link{
    font-size: 1rem;
    transition: all 0.3s ease;
}





.hero-section .container,
.navbar .container,
.offcanvas .container,
.footer .container {
    max-width: 90%;
    margin: 0 auto;
}

/* Inner Page Styles - Scoped to .inner-page class */
.inner-page {
    --brand-primary: #0062E6;
    --brand-blue: #0062E6;
    --accent: #ff7a00;
    --gradient: linear-gradient(89.88deg, #db05e7 .11%, #3545d9 45.01%, #0e8bd9 99.89%);
    --bg-dark: #0a0a0a;
    --bg-darker: #000000;
    --bg-light: #ffffff;
    --bg-lighter: #f8f9fa;
    --text-primary-dark: #ffffff;
    --text-primary-light: #1a1a1a;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
}


/* Inner Page Hero Section - Dark */
.inner-page .inner-hero-section {
    background: linear-gradient(135deg, var(--bg-darker) 0%, #1a1a2e 100%);
    padding: 4% 0 2%;
    position: relative;
    overflow: hidden;
}

.inner-hero-content .hero-particles{
    z-index: 0;
}
.inner-hero-content .section-container{
    z-index: 1;
    position: relative;
}
.inner-hero-content .breadcrumb-item::before {
    color: #fff;
}

/* Inner Hero Two Column Layout */
.inner-page .inner-hero-section .row {
    min-height: 60vh;
}

.inner-page .inner-hero-image {
    text-align: center;
    position: relative;
}

.inner-page .inner-hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); */
    transition: transform 0.3s ease;
    max-height: 50vh;
}

.inner-page .inner-hero-image img:hover {
    transform: translateY(-5px);
}

.inner-page .section-subtitle {
    color: #000000;
}

.inner-page .content-section.dark .section-subtitle,
.inner-page .contact-section .section-subtitle {
    color: #ffffff;
} 

/* Responsive adjustments for inner hero */
@media (max-width: 991px) {
    .inner-page .inner-hero-section .row {
        min-height: auto;
    }
    
    .inner-page .inner-hero-image {
        margin-top: 3rem;
    }
}

.inner-page .inner-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 50%, rgba(219, 5, 231, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 50%, rgba(53, 69, 217, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.inner-page .inner-hero-section .hero-content {
    position: relative;
    z-index: 1;
}

.inner-page .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 2rem;
}

.inner-page .breadcrumb-item {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.inner-page .breadcrumb-item.active {
    color: var(--text-primary-dark);
}

.inner-page .breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
}

.inner-page .breadcrumb-item a:hover {
    color: var(--text-primary-dark);
}

.inner-page .inner-hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.inner-page .inner-hero-subtitle {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 700px;
}

/* Secondary Navigation - Dark */
.inner-page .secondary-nav {
    background: var(--bg-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 999;
}


.inner-page .secondary-nav .container {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 15px;
}

.inner-page .secondary-nav-list {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.inner-page .secondary-nav-list::-webkit-scrollbar {
    height: 3px;
}

.inner-page .secondary-nav-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.inner-page .secondary-nav-list::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
}

.inner-page .secondary-nav-item {
    white-space: nowrap;
}

.inner-page .secondary-nav-link {
    display: block;
    padding: 1.2rem 0;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.inner-page .secondary-nav-link:hover,
.inner-page .secondary-nav-link.active {
    color: var(--text-primary-dark);
    border-bottom-color: var(--brand-primary);
}

/* Content Sections - Alternating Light/Dark */
.inner-page .content-section {
    padding: 80px 0;
}

.inner-page .content-section.light {
    background: var(--bg-light);
    color: var(--text-primary-light);
}

.inner-page .content-section.dark {
    background: var(--bg-darker);
    color: var(--text-primary-dark);
}

.inner-page .section-container {
    max-width: 90%;
    margin: 0 auto;
}

.inner-page .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.inner-page .light .section-title {
    color: var(--text-primary-light);
}

.inner-page .dark .section-title {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.inner-page .section-subtitle {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    opacity: 0.8;
}

/* Feature Cards */
.inner-page .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.inner-page .feature-card {
    padding: 2.5rem;
    border-radius: 16px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.inner-page .light .feature-card {
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.inner-page .light .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.inner-page .dark .feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.inner-page .dark .feature-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--brand-primary);
}

.inner-page .feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    background: var(--gradient);
}

.inner-page .feature-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.inner-page .feature-description {
    opacity: 0.8;
    line-height: 1.7;
}

/* Stats Section */
.inner-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.inner-page .stat-item {
    text-align: center;
}

.inner-page .stat-number {
    font-size: 3rem;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.inner-page .stat-label {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Timeline Number Styling */
.inner-page .timeline-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Enhanced Timeline Styling */
.inner-page .row .col:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 25px;
    right: -1rem;
    width: 2rem;
    height: 2px;
    background: var(--gradient);
    z-index: 1;
}

.inner-page .row .col {
    position: relative;
}

.inner-page .row .col h3 {
    color: var(--text-primary-dark);
    font-weight: 600;
    margin-bottom: 1rem;
}

.inner-page .row .col p {
    opacity: 0.8;
    line-height: 1.6;
}

/* Responsive timeline enhancements */
@media (max-width: 767px) {
    .inner-page .row .col:not(:last-child)::after {
        display: none;
    }
}

/* CTA Section */
.inner-page .cta-section {
    background: linear-gradient(135deg, var(--bg-darker) 0%, #1a1a2e 100%);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.inner-page .cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(219, 5, 231, 0.15) 0%, transparent 70%);
}

.inner-page .cta-content {
    position: relative;
    z-index: 1;
}

.inner-page .cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary-dark);
    margin-bottom: 1rem;
}

.inner-page .cta-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* Footer - Dark */

/* Responsive */
@media (max-width: 768px) {
    .inner-page .inner-hero-title {
        font-size: 2.5rem;
    }
    
    .inner-page .section-title {
        font-size: 2rem;
    }
    
    .inner-page .secondary-nav-list {
        gap: 1rem;
    }
    
    .inner-page .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* Hero Slider Styles - Owl Carousel */
.hero-slider-section {
    position: relative;
    /* min-height: 100vh; */
    height: 100%;
    overflow: hidden;
}

/* Hero Particles Background */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-particles .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: floatUp 6s infinite linear;
}

.hero-particles .particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    animation-duration: 6s;
}

.hero-particles .particle:nth-child(2) {
    left: 20%;
    animation-delay: 1s;
    animation-duration: 8s;
}

.hero-particles .particle:nth-child(3) {
    left: 30%;
    animation-delay: 2s;
    animation-duration: 7s;
}

.hero-particles .particle:nth-child(4) {
    left: 40%;
    animation-delay: 3s;
    animation-duration: 9s;
}

.hero-particles .particle:nth-child(5) {
    left: 50%;
    animation-delay: 4s;
    animation-duration: 6s;
}

.hero-particles .particle:nth-child(6) {
    left: 60%;
    animation-delay: 5s;
    animation-duration: 8s;
}

.hero-particles .particle:nth-child(7) {
    left: 70%;
    animation-delay: 6s;
    animation-duration: 7s;
}

.hero-particles .particle:nth-child(8) {
    left: 80%;
    animation-delay: 7s;
    animation-duration: 9s;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(50px);
        opacity: 0;
    }
}

/* Hero Background Overlay */
.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 98, 230, 0.1) 0%, rgba(219, 5, 231, 0.1) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-slide {
    position: relative;
    /* min-height: 100vh; */
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-slide .container{
    max-width: 90%;
}
.hero-slide .hero-title{
    max-width: 90%;
    font-size: 4rem;
}

.hero-slide-with-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

.hero-content-left {
    position: relative;
    z-index: 10;
    text-align: left;
    margin: 10% 0 2% 0;
    animation: slideInLeft 1s ease-out;
}

.hero-content-left .hero-title {
    text-align: left;
    color: white;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    animation: fadeInUp 1.2s ease-out 0.3s both;
}

.hero-slider-section .hero-content-left .hero-title .gradient-text,
.hero-banner-section .hero-content-left .hero-title .gradient-text{
    background: linear-gradient(55deg, #fff 0%, #722DDE 51%, #0E8BD9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content-left .hero-subtitle {
    text-align: left;
    color: white;
    font-size: 1.4rem;
    margin-bottom: 2rem;
    animation: fadeInUp 1.2s ease-out 0.6s both;
}

.hero-content-left .d-flex {
    justify-content: flex-start;
    animation: fadeInUp 1.2s ease-out 0.9s both;
}

/* Light Theme Sections */
.light-theme {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

.light-theme .section-title {
    color: #1a1a1a !important;
}

.light-theme .section-subtitle {
    color: #4a4a4a !important;
}

.light-theme .service-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.light-theme .service-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-5px) !important;
}

/* Form controls in light theme sections */
.light-theme .form-control {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    transition: all 0.3s ease;
}

.light-theme .form-control:focus {
    background: #ffffff !important;
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 98, 230, 0.1) !important;
    color: #1f2937 !important;
    outline: none;
}

.light-theme .form-control::placeholder {
    color: #6b7280 !important;
}

.light-theme select.form-control {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
}

.light-theme select.form-control:focus {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: var(--brand-blue) !important;
}

.light-theme select.form-control option {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}


.light-theme .hyperscalers-subtitle {
    color: #4a4a4a !important;
}

/* Keep hyperscaler logos dark even in light theme */
.light-theme .hyperscaler-logo {
    filter: brightness(0) invert(0) !important;
    opacity: 0.8 !important;
}

.light-theme .hyperscaler-logo:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}
.light-theme .btn-outline-gradient{
    color: #000000;
}


/* Platform Cards GSAP Animation */
.platform-card-wrapper {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
    margin-bottom: 2rem;
}


/* Simple Master Slider */
.master-slider {
    /* height: 100vh; */
    height: 100%;
    width: 100%;
    position: relative;
    visibility: visible;
    opacity: 1;
    /* Ensure slider is visible immediately */
    display: block !important;
}

.master-slider .ms-slide {
    /* height: 100vh; */
    height: 100%;
    /* Show first slide immediately */
    visibility: visible;
    opacity: 1;
}

.master-slider .ms-slide img {
    width: 100%;
    /* height: 100vh; */
    height: 100%;
    object-fit: cover;
    /* Prevent layout shift while images load */
    background-color: #000;
}
@media (max-width: 1920px) {
    .master-slider,
    .master-slider .ms-slide {
        min-height: 100vh;
    }
}
.master-slider .section-bg{
    opacity: 1 !important;
}	

/* Master Slider Layers */
.ms-layer {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.ms-layer .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    max-width: 90%;
}

.ms-layer .row {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}


/* CSS Keyframe Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Master Slider Controls - Enhanced Visibility */
.ms-skin-default .ms-nav-next,
.ms-skin-default .ms-nav-prev {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    color: white;
    font-size: 20px;
    transition: all 0.3s ease;
    z-index: 1000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ms-skin-default .ms-nav-prev {
    left: 30px;
}

.ms-skin-default .ms-nav-next {
    right: 30px;
}

.ms-skin-default .ms-nav-next:hover,
.ms-skin-default .ms-nav-prev:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: white;
    transform: translateY(-50%) scale(1.1);
}

.ms-skin-default .ms-bullets {
    display: flex;
    gap: 10px;
    opacity: 1;
    visibility: visible;
}

.ms-skin-default .ms-bullet {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    margin: 0;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    display: block;
}

.ms-skin-default .ms-bullet-selected {
    background: linear-gradient(135deg, #0062E6, #DB05E7);
    border: 2px solid white;
    transform: scale(1.3);
}

.ms-skin-default .ms-bullet:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

/* MasterSlider Mobile Height Fix */
.ms-inner-controls-cont {
    max-height: 100vh;
}

@media (min-width: 1800px) {
.ms-slide-layers {
    max-width: 100% !important;
    left: 0 !important;
}
}

/* Ensure MasterSlider takes full viewport height on mobile */
@media (max-width: 768px) {
    .master-slider {
        height: 100vh !important;
        min-height: 100vh;
    }
    
    .ms-view {
        height: 100vh !important;
        min-height: 100vh;
    }
    
    .ms-slide {
        height: 100vh !important;
        min-height: 100vh;
        background: linear-gradient(132deg, #0a0a0a 10%, #6e2fde 100%, #3844d9 50%);
    }
    
    .master-slider .ms-slide img {
        display: none;
    }
    
    .ms-inner-controls-cont {
        height: 100vh !important;
        min-height: 100vh;
    }
}

@media (max-width: 480px) {
    .master-slider {
        height: 100vh !important;
        min-height: 100vh;
    }
    
    .ms-view {
        height: 100vh !important;
        min-height: 100vh;
    }
    
    .ms-slide {
        height: 100vh !important;
        min-height: 100vh;
        background-image: url('../images/static/home-bg-mobile.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .master-slider .ms-slide img {
        display: none;
    }
    
    .ms-inner-controls-cont {
        height: 100vh !important;
        min-height: 100vh;
    }
}

/* Responsive bullet styling only */
@media (max-width: 768px) {
    .ms-skin-default .ms-bullet {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 480px) {
    .ms-skin-default .ms-bullets {
        gap: 8px;
    }
    
    .ms-skin-default .ms-bullet {
        width: 10px;
        height: 10px;
    }
}

/* Ensure controls are visible */
.master-slider {
    position: relative;
}

.master-slider .ms-view {
    position: relative;
}

/* Navigation arrows visibility */
.ms-skin-default .ms-nav-next:before,
.ms-skin-default .ms-nav-prev:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
}

.ms-skin-default .ms-nav-prev:before {
    border-width: 8px 12px 8px 0;
    border-color: transparent white transparent transparent;
    margin-left: -3px;
}

.ms-skin-default .ms-nav-next:before {
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent white;
    margin-right: -3px;
}




/* Content Animations */
.hero-content {
    animation: slideInUp 1s ease-out;
}

/* Inline Styles Moved to CSS */

.btn-outline-gradient.mt-4 {
    display: inline-block;
}

.platform-card {
    text-decoration: none;
}

.partner-ecosystem-label {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.partner-logo {
    max-width: 100%;
    max-height: 40px;
    opacity: 0.8;
}

.news-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.news-card.span-full {
    grid-column: 1 / -1;
}

.contact-description {
    margin-bottom: 3rem;
}

.footer-description {
    margin-bottom: 2rem;
}

.social-media-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    color: var(--text-muted);
    font-size: 1.5rem;
    transition: color 0.3s;
}

.footer-spacer {
    opacity: 0;
}

.footer-bottom-links {
    margin-top: 0.5rem;
}

.footer-bottom-link {
    color: var(--text-muted);
    text-decoration: none;
    margin: 0 0.5rem;
}


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

/* Responsive */
@media (max-width: 768px) {
    .hero-carousel .owl-prev,
    .hero-carousel .owl-next {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .hero-carousel .owl-prev {
        left: 1rem;
    }
    
    .hero-carousel .owl-next {
        right: 1rem;
    }
}

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

.navbar-left {
    display: flex;
    align-items: center;
}

.navbar-right {
    display: flex;
    align-items: center;
}

.btn-menu-icon {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
}

.btn-menu-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: scale(1.05);
}

.btn-menu-icon:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* Mobile responsive */
@media (max-width: 991px) {
    .navbar-left {
        flex: 1;
    }
    
    .navbar-right {
        flex: 1;
        justify-content: flex-end;
    }
    
    .btn-menu-icon {
        margin-right: 0;
    }
}


/* Override Bootstrap collapse behavior for mobile */
@media (max-width: 991px) {
    .navbar-collapse {
        display: block !important;
    }
    
    .navbar-nav .nav-item:not(:last-child) {
        display: none;
    }
    
    .navbar-toggler {
        display: none !important;
    }
    
    .btn-menu-icon {
        display: block !important;
    }
    
    .navbar-nav .nav-item:last-child {
        display: block;
    }
}

@media (min-width: 992px) { 
    .navbar-toggler {
        display: none;
    }
    
    .navbar-nav .nav-item {
        display: block;
    }
}

/* ================================
   OFFCANVAS MENU - TRIANZ STYLE
================================ */

:root {
    --gradient-primary: linear-gradient(135deg, #0062E6 0%, #DB05E7 100%);
    --gradient-text: linear-gradient(135deg, #0062E6, #DB05E7);
}

.offcanvas-trianz {
    width: 100vw !important;
    max-width: 100vw !important;
    background: #ffffff;
    border: none;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.offcanvas-trianz.show {
    transform: translateX(0);
}

.offcanvas-trianz .offcanvas-header {
    padding: 0.8rem 0;
    background: white;
    /* border-bottom: 1px solid #e0e0e0; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.offcanvas-trianz .offcanvas-body {
    border-top: 1px solid #e0e0e0;
}
.offcanvas-logo {
    height: 75px;
}

.btn-close-custom {
    background: transparent;
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    min-width: 44px;
    height: 44px;
}

.btn-close-custom:hover {
    background: var(--brand-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 98, 230, 0.3);
}

.offcanvas-menu-container {
    display: flex;
    min-height: calc(100vh - 100px);
}

/* Left Panel - Main Menu */
.offcanvas-left {
    flex: 0 0 35%;
    padding: 3rem 2rem 3rem 3rem;
    background: #f8f9fa;
    border-right: 1px solid #e0e0e0;
}

.offcanvas-nav {
    max-width: 800px;
}

.menu-item {
    padding: 0.8rem 0;
    border-bottom: 0.5px solid #e0e0e0;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    background: transparent;
    border: none;
    text-align: left;
    transition: all 0.3s ease;
    cursor: pointer;
}

.menu-link:hover {
    color: #0062E6;
    padding-left: 0.5rem;
}

.menu-toggle i {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

.menu-item.has-submenu .menu-toggle i {
    transform: rotate(90deg);
}

.menu-item.active .menu-toggle i {
    transform: rotate(90deg);
}

.submenu-content {
    max-height: 500px;
    overflow: visible;
    transition: max-height 0.3s ease;
    padding-left: 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.menu-item.active .submenu-content {
    max-height: 500px;
    margin-bottom: 1rem;
}

.submenu-link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    border-radius: 4px;
    background: rgba(248, 249, 250, 0.5);
}

.submenu-link:hover {
    color: #0062E6;
    border-left-color: #0062E6;
    background: rgba(0, 98, 230, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 98, 230, 0.15);
}

/* Right Panel - Mega Menu */
.offcanvas-right {
    flex: 0 0 65%;
    padding: 2rem;
    background: #ffffff;
    position: relative;
    overflow-y: auto;
}

.offcanvas-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(219, 5, 231, 0.08) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0.6;
}

.right-content {
    position: relative;
    z-index: 1;
}

.right-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.right-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.right-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
    border-left: 3px solid transparent;
    padding-left: 1rem;
}

.right-link:hover {
    color: #0062E6;
    transform: translateX(5px);
    border-left-color: #0062E6;
    background: rgba(0, 98, 230, 0.05);
    border-radius: 0 4px 4px 0;
}

.right-secondary-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.secondary-link {
    color: #666;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.secondary-link:hover {
    color: #0062E6;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 98, 230, 0.1);
}

.social-link:hover {
    background: linear-gradient(135deg, #0062E6, #DB05E7);
    color: white;
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 98, 230, 0.4);
    border-color: transparent;
}

/* Responsive Design */
/* ================================
   MOBILE RESPONSIVE OPTIMIZATION
================================ */

/* Tablet and below */
@media (max-width: 991px) {
    .offcanvas-menu-container {
        flex-direction: column;
    }

    .offcanvas-left {
        flex: 0 0 auto;
        padding: 2rem 1.5rem;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .offcanvas-right {
        flex: 1;
        padding: 2rem 1.5rem;
    }


    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Mobile phones */
@media (max-width: 768px) {
    .offcanvas-trianz .offcanvas-header {
        padding: 1rem 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    .offcanvas-header-left {
        width: 100%;
        justify-content: space-between;
    }

    .offcanvas-header-right {
        width: 100%;
        justify-content: center;
    }

    .search-container {
        width: 100%;
        max-width: none;
    }

    .offcanvas-left {
        padding: 1.5rem 1rem;
    }

    .offcanvas-right {
        padding: 1.5rem 1rem;
    }

    .menu-link {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }


    .mega-menu-item {
        padding: 1rem;
    }

    .mega-icon {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .mega-content h4 {
        font-size: 0.9rem;
    }

    .mega-content p {
        font-size: 0.8rem;
    }

    .insights-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .trending-news {
        padding: 1rem;
    }

    .news-item {
        padding: 0.5rem;
    }

    .news-content h5 {
        font-size: 0.85rem;
    }

    .news-date {
        font-size: 0.7rem;
    }
}

/* Small mobile phones */
@media (max-width: 480px) {
    .offcanvas-trianz .offcanvas-header {
        padding: 0.75rem;
    }

    .offcanvas-left {
        padding: 1rem 0.75rem;
    }

    .offcanvas-right {
        padding: 1rem 0.75rem;
    }

    .menu-link {
        font-size: 0.9rem;
        padding: 0.6rem 0.75rem;
        min-height: 44px; /* Touch-friendly */
    }

    .mega-menu-item {
        padding: 0.75rem;
        min-height: 60px; /* Touch-friendly */
    }

    .mega-icon {
        width: 25px;
        height: 25px;
        font-size: 0.9rem;
    }

    .mega-content h4 {
        font-size: 0.85rem;
    }

    .mega-content p {
        font-size: 0.75rem;
    }

    .trending-news {
        padding: 0.75rem;
    }

    .news-item {
        padding: 0.4rem;
        min-height: 44px; /* Touch-friendly */
    }

    .news-content h5 {
        font-size: 0.8rem;
    }

    .news-date {
        font-size: 0.65rem;
    }
}

/* Touch-friendly optimizations */
@media (max-width: 768px) {
    .btn-close-custom {
        min-width: 44px;
        min-height: 44px;
    }

    .search-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .mega-menu-item {
        min-height: 60px;
        display: flex;
        align-items: center;
    }

    .news-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ================================
   TRIANZ MEGA MENU STYLES
================================ */

/* Modern Mega Menu Cards - Brand Styling */
.mega-menu-content .card {
    background: rgba(0, 98, 230, 0.03);
    border: 1px solid rgba(0, 98, 230, 0.2);
    border-radius: 20px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.mega-menu-content .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 0;
}

.mega-menu-content .card:hover::before {
    left: 0;
    opacity: 0.05;
}

.mega-menu-content .card:hover {
    background: rgba(0, 98, 230, 0.08);
    border-color: var(--brand-blue);
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 98, 230, 0.2);
}

.mega-menu-content .card-body {
    position: relative;
    z-index: 1;
}

.mega-menu-content .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.mega-menu-content .card-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Mega Menu Contact Form */
.mega-contact-form {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.mega-contact-form .form-label {
    color: #1f2937;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.mega-contact-form .form-control {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #1f2937;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.mega-contact-form .form-control:focus {
    background: #ffffff;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 98, 230, 0.25);
    color: #1f2937;
}

.mega-contact-form .form-control::placeholder {
    color: #6b7280;
}

.mega-contact-form textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.mega-contact-form .btn-primary-gradient {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.mega-contact-form .btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 98, 230, 0.4);
}

/* Responsive adjustments for mega contact form */
@media (max-width: 768px) {
    .mega-contact-form {
        padding: 1rem;
    }
    
    .mega-contact-form .form-control {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }
    
    .mega-contact-form .btn-primary-gradient {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

.mega-menu-content .text-primary {
    color: var(--brand-blue) !important;
}

.mega-menu-content .fs-2 {
    font-size: 2rem !important;
    transition: all 0.3s ease;
}

.mega-menu-content .card:hover .fs-2 {
    transform: scale(1.1);
    color: var(--accent) !important;
}

/* Modern List Group Styling */
.mega-menu-content .list-group-item {
    background: rgba(0, 98, 230, 0.02);
    border: 1px solid rgba(0, 98, 230, 0.1);
    border-radius: 12px !important;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mega-menu-content .list-group-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 0;
}

.mega-menu-content .list-group-item:hover::before {
    left: 0;
    opacity: 0.03;
}

.mega-menu-content .list-group-item:hover {
    background: rgba(0, 98, 230, 0.05);
    border-color: var(--brand-blue);
    transform: translateX(5px);
    box-shadow: 0 4px 20px rgba(0, 98, 230, 0.1);
}

.mega-menu-content .list-group-item h6 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
    position: relative;
    z-index: 1;
}

.mega-menu-content .list-group-item .text-muted {
    color: var(--text-secondary) !important;
    font-size: 0.8rem;
    position: relative;
    z-index: 1;
}

.mega-menu-content .list-group-item i {
    color: var(--brand-blue);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.mega-menu-content .list-group-item:hover i {
    color: var(--accent);
    transform: translateX(3px);
}

/* Modern Mega Menu Titles */
.mega-menu-title {
    font-size: 1.8rem;
    font-weight: 800;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}

.mega-menu-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 2rem;
    font-weight: 500;
}

/* Enhanced Card Hover Effects */
.mega-menu-content .card:hover .card-title {
    color: var(--brand-blue);
}

.mega-menu-content .card:hover .card-text {
    color: var(--text-primary);
}

/* Modern Grid Spacing */
.mega-menu-content .row.g-3 > * {
    padding: 0.75rem;
}

.mega-menu-content .row.g-4 > * {
    padding: 1rem;
}

/* Insights Grid Layout - Similar to news-grid */
.insights-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin-top: 1rem;
}

.insights-left {
    background: rgba(0, 98, 230, 0.03);
    border: 1px solid rgba(0, 98, 230, 0.2);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.insights-news-card {
    height: 100%;
}

.insights-news-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.insights-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insights-news-list li {
    margin-bottom: 1rem;
}

.insights-news-item {
    display: block;
    padding: 1rem;
    background: rgba(0, 98, 230, 0.02);
    border: 1px solid rgba(0, 98, 230, 0.1);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.insights-news-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 0;
}

.insights-news-item:hover::before {
    left: 0;
    opacity: 0.03;
}

.insights-news-item:hover {
    background: rgba(0, 98, 230, 0.05);
    border-color: var(--brand-blue);
    transform: translateX(5px);
    box-shadow: 0 4px 20px rgba(0, 98, 230, 0.1);
}

.insights-news-item h5 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

.insights-date {
    color: var(--text-secondary);
    font-size: 0.8rem;
    position: relative;
    z-index: 1;
}

.insights-right {
    display: flex;
    flex-direction: column;
}

.insights-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    height: 100%;
}

.insights-category-card {
    background: rgba(0, 98, 230, 0.03);
    border: 1px solid rgba(0, 98, 230, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    text-decoration: none;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.insights-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 0;
}

.insights-category-card:hover::before {
    left: 0;
    opacity: 0.05;
}

.insights-category-card:hover {
    background: rgba(0, 98, 230, 0.08);
    border-color: var(--brand-blue);
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 98, 230, 0.2);
}

.insights-category-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 98, 230, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.insights-category-icon i {
    font-size: 1.5rem;
    color: var(--brand-blue);
    transition: all 0.3s ease;
}

.insights-category-card:hover .insights-category-icon i {
    color: var(--accent);
    transform: scale(1.1);
}

.insights-category-card h5 {
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.insights-category-card p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Mega Menu Grid with Gaps */
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* Insights Links Grid */
.insights-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    height: 100%;
}

.insights-link-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 98, 230, 0.03);
    border: 1px solid rgba(0, 98, 230, 0.2);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.insights-link-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 0;
}

.insights-link-item:hover::before {
    left: 0;
    opacity: 0.05;
}

.insights-link-item:hover {
    background: rgba(0, 98, 230, 0.08);
    border-color: var(--brand-blue);
    transform: translateX(5px);
    box-shadow: 0 4px 20px rgba(0, 98, 230, 0.1);
}

.insights-link-item i {
    color: var(--brand-blue);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.insights-link-item span {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

.insights-link-item:hover i {
    color: var(--accent);
    transform: scale(1.1);
}

.insights-link-item:hover span {
    color: var(--brand-blue);
}

/* Insights News Grid - Similar to news-grid */
.insights-news-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(0, 98, 230, 0.2);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 98, 230, 0.1);
}

.insights-news-left {
    background: #091019;
    border: 1px solid rgba(0, 98, 230, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.insights-news-left h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.insights-trending-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.insights-trending-list li {
    margin-bottom: 0.75rem;
}

.insights-trending-item {
    display: block;
    padding: 0.75rem;
    background: rgba(0, 98, 230, 0.02);
    border: 1px solid rgba(0, 98, 230, 0.1);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.insights-trending-item:hover {
    background: rgba(0, 98, 230, 0.05);
    border-color: var(--brand-blue);
    transform: translateX(3px);
}

.insights-trending-item h5 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.insights-trending-date {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.insights-highlight-card {
    background: var(--gradient-primary);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
}

.insights-highlight-card h5 {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
}

.insights-news-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    grid-template-rows: auto auto;
}

.insights-news-card {
    background: linear-gradient(135deg, rgba(0, 98, 230, 0.1), rgba(0, 98, 230, 0.05));
    border: 1px solid rgba(0, 98, 230, 0.2);
    border-radius: 12px;
    padding: 0;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.insights-news-card:hover::before {
    opacity: 0.6;
}

.insights-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 98, 230, 0.3);
    border-color: var(--brand-blue);
}

.insights-news-card-wide {
    grid-column: 1 / -1;
}

.insights-news-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    z-index: 2;
}

.insights-news-card-content h5 {
    color: white;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.insights-news-date {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Responsive Insights Grid */
@media (max-width: 768px) {
    .insights-news-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .insights-news-right {
        grid-template-columns: 1fr;
    }
    
    .insights-links-grid {
        grid-template-columns: 1fr;
    }
}

/* Sticky Navigation - Horizontal Line Style */
.sticky-nav {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
}

.sticky-nav-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sticky-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    background: transparent;
    border: none;
    min-height: 20px;
    overflow: visible;
    text-align: right;
    align-items: end;
}

/* Horizontal line indicator - default state */
.sticky-nav-item::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light theme visibility - section-based selectors */
.light-theme .sticky-nav-item::before,
.light-theme .sticky-nav .sticky-nav-item::before,
section.light-theme ~ .sticky-nav .sticky-nav-item::before,
.light-theme ~ .sticky-nav .sticky-nav-item::before {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* Hover effect - expand line to the left */
/* .sticky-nav-item:hover {
    width: auto;
    min-width: 120px;
} */

.sticky-nav-item:hover::before {
    right: 0;
    width: 80px;
    background: var(--gradient);
    height: 3px;
}

/* Light theme hover */
.light-theme .sticky-nav-item:hover::before,
body.light-theme .sticky-nav-item:hover::before,
.light-theme .sticky-nav .sticky-nav-item:hover::before {
    background: var(--gradient);
}

/* Active state - gradient horizontal line with increased width */
.sticky-nav-item.active::before {
    right: 0;
    background: var(--gradient);
    width: 80px;
    height: 3px;
    border-radius: 1px;
    box-shadow: 0 0 10px rgba(219, 5, 231, 0.5);
}

.sticky-nav-item.active:hover::before {
    right: 0;
    width: 120%;
    height: 4px;
    box-shadow: 0 0 15px rgba(219, 5, 231, 0.6);
}

/* Text styling - shown by default for active, hidden for others */
.sticky-nav-text {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(-5px); /* Animate from above */
    white-space: nowrap;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
    order: -1; /* Place text above the indicator bar */
}

/* Indicator inside text */
.sticky-nav-text .sticky-nav-indicator {
    display: none;
    width: 12px;
    height: 12px;
    background-image: url('../images/static/logos/triangle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    filter: brightness(0) invert(1) opacity(0);
    transform: scale(0.8);
    flex-shrink: 0;
    order: -1; /* Place indicator before text */
}

/* Light theme text - section-based selectors */
.light-theme .sticky-nav-text,
.light-theme .sticky-nav .sticky-nav-text,
section.light-theme ~ .sticky-nav .sticky-nav-text,
.light-theme ~ .sticky-nav .sticky-nav-text {
    color: #333 !important;
}

/* Show text for active items by default */
.sticky-nav-item.active .sticky-nav-text {
    opacity: 1;
    transform: translateY(0);
}

/* Home icon styling */
.sticky-nav-item[data-section="hero"] .sticky-nav-text i {
    font-size: 1rem;
}

/* Show text on hover for non-active items */
.sticky-nav-item:hover .sticky-nav-text {
    opacity: 1;
    transform: translateY(0);
}

.sticky-nav-item:hover .sticky-nav-text {
    color: var(--brand-blue);
}

.sticky-nav-item.active:hover .sticky-nav-text {
    color: white;
}

/* Light theme hover text */
.light-theme .sticky-nav-item:hover .sticky-nav-text,
.light-theme .sticky-nav .sticky-nav-item:hover .sticky-nav-text {
    color: var(--brand-blue);
}

.light-theme .sticky-nav-item.active:hover .sticky-nav-text,
.light-theme .sticky-nav .sticky-nav-item.active:hover .sticky-nav-text {
    color: #333;
}

/* Old indicator styles removed - now handled inside text */

/* Show indicator with text on hover and active */
.sticky-nav-item:hover .sticky-nav-text .sticky-nav-indicator,
.sticky-nav-item.active .sticky-nav-text .sticky-nav-indicator {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0) invert(1);
}

.sticky-nav-item.active:hover .sticky-nav-text .sticky-nav-indicator {
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
    transform: scale(1.2);
}

/* Light theme indicator */
.light-theme .sticky-nav-text .sticky-nav-indicator,
.light-theme .sticky-nav .sticky-nav-text .sticky-nav-indicator {
    filter: brightness(0) invert(0) opacity(0);
}

.light-theme .sticky-nav-item:hover .sticky-nav-text .sticky-nav-indicator,
.light-theme .sticky-nav .sticky-nav-item:hover .sticky-nav-text .sticky-nav-indicator,
.light-theme .sticky-nav-item.active .sticky-nav-text .sticky-nav-indicator,
.light-theme .sticky-nav .sticky-nav-item.active .sticky-nav-text .sticky-nav-indicator {
    filter: brightness(0) invert(0);
}

.light-theme .sticky-nav-item.active:hover .sticky-nav-text .sticky-nav-indicator,
.light-theme .sticky-nav .sticky-nav-item.active:hover .sticky-nav-text .sticky-nav-indicator {
    filter: brightness(0) invert(0) drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
}

/* White background specific styling */
.sticky-nav-white-bg .sticky-nav-item::before {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.sticky-nav-white-bg .sticky-nav-text {
    color: #333 !important;
}

.sticky-nav-white-bg .sticky-nav-item:hover::before {
    background: var(--gradient) !important;
}

.sticky-nav-white-bg .sticky-nav-item.active::before {
    background: var(--gradient) !important;
}

/* JavaScript-based light background detection */
.sticky-nav-light-bg .sticky-nav-item::before {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.sticky-nav-light-bg .sticky-nav-text {
    color: #333 !important;
}
.sticky-nav-light-bg .sticky-nav-indicator{
    filter: none !important;
}

.sticky-nav-light-bg .sticky-nav-item:hover::before {
    background: var(--gradient) !important;
}

.sticky-nav-light-bg .sticky-nav-item.active::before {
    background: var(--gradient) !important;
}

/* Sticky nav over sliders - enhanced visibility without background patch */
.sticky-nav-over-slider .sticky-nav-item::before {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.sticky-nav-over-slider .sticky-nav-text {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

.sticky-nav-over-slider .sticky-nav-item:hover::before {
    background: var(--gradient) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.sticky-nav-over-slider .sticky-nav-item.active::before {
    background: var(--gradient) !important;
    box-shadow: 0 0 15px rgba(219, 5, 231, 0.8) !important;
}

/* Responsive Sticky Nav */
@media (max-width: 768px) {
    .sticky-nav {
        display: none;
    }
}

/* Fix text visibility in light-theme sections with bg-dark cards */
.light-theme .bg-dark,
section.light-theme .bg-dark {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

.light-theme .bg-dark .text-white,
section.light-theme .bg-dark .text-white {
    color: #1f2937 !important;
}

.light-theme .bg-dark .text-white-50,
section.light-theme .bg-dark .text-white-50 {
    color: #6b7280 !important;
}

.light-theme .bg-dark h1,
.light-theme .bg-dark h2,
.light-theme .bg-dark h3,
.light-theme .bg-dark h4,
.light-theme .bg-dark h5,
.light-theme .bg-dark h6,
section.light-theme .bg-dark h1,
section.light-theme .bg-dark h2,
section.light-theme .bg-dark h3,
section.light-theme .bg-dark h4,
section.light-theme .bg-dark h5,
section.light-theme .bg-dark h6 {
    color: #1f2937;
}

.light-theme .bg-dark p,
section.light-theme .bg-dark p {
    color: #374151 !important;
}

.light-theme .bg-dark small,
section.light-theme .bg-dark small {
    color: #6b7280 !important;
}

/* Fix text visibility in bg-dark sections with bg-light cards */
.bg-dark .bg-light,
section.bg-dark .bg-light {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.bg-dark .bg-light .text-dark,
section.bg-dark .bg-light .text-dark {
    color: #ffffff !important;
}

.bg-dark .bg-light .text-muted,
section.bg-dark .bg-light .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.bg-dark .bg-light h1,
.bg-dark .bg-light h2,
.bg-dark .bg-light h3,
.bg-dark .bg-light h4,
.bg-dark .bg-light h5,
.bg-dark .bg-light h6,
section.bg-dark .bg-light h1,
section.bg-dark .bg-light h2,
section.bg-dark .bg-light h3,
section.bg-dark .bg-light h4,
section.bg-dark .bg-light h5,
section.bg-dark .bg-light h6 {
    color: #ffffff !important;
}

.bg-dark .bg-light p,
section.bg-dark .bg-light p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bg-dark .bg-light small,
section.bg-dark .bg-light small {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Mobile styles removed - sticky nav hidden on mobile */

.offcanvas-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.offcanvas-header-right {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.search-container {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    width: 80%;
}

.search-container:focus-within {
    border-color: #0062E6;
    box-shadow: 0 0 0 3px rgba(0, 98, 230, 0.1);
}

.search-input {
    border: none;
    background: transparent;
    outline: none;
    padding: 0.5rem;
    font-size: 0.9rem;
    color: #333;
    width: 100%;
    flex: 1;
}

.search-input::placeholder {
    color: #999;
}

.search-btn {
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.3s ease;
}

.search-btn:hover {
    color: #0062E6;
}


.menu-item {
    position: relative;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    background: transparent;
    border: none;
    text-align: left;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.menu-link:hover {
    background: rgba(0, 98, 230, 0.05);
    color: #0062E6;
    padding-left: 2rem;
    transform: translateX(4px);
}

.menu-item:hover .menu-link,
.menu-item.active .menu-link {
    background: var(--gradient-primary);
    color: white;
    padding-left: 2rem;
    box-shadow: 0 4px 20px rgba(0, 98, 230, 0.3);
    transform: translateX(4px);
    transition: color 0s;
}

.menu-link i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.menu-item:hover .menu-link i {
    transform: translateX(5px);
}

/* Right Panel - Mega Menu */
.offcanvas-right {
    flex: 0 0 65%;
    padding: 2rem;
    background: #ffffff;
    position: relative;
    overflow-y: auto;
}

.offcanvas-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(219, 5, 231, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.mega-menu-content {
    display: none;
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
}

.mega-menu-content.active {
    display: block;
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 1;
    transform: translateY(0);
}


.mega-menu-content.active .mega-menu-item:nth-child(1) { animation-delay: 0.1s; }
.mega-menu-content.active .mega-menu-item:nth-child(2) { animation-delay: 0.15s; }
.mega-menu-content.active .mega-menu-item:nth-child(3) { animation-delay: 0.2s; }
.mega-menu-content.active .mega-menu-item:nth-child(4) { animation-delay: 0.25s; }
.mega-menu-content.active .mega-menu-item:nth-child(5) { animation-delay: 0.3s; }
.mega-menu-content.active .mega-menu-item:nth-child(6) { animation-delay: 0.35s; }

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mega-menu-title {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

.mega-menu-subtitle {
    color: #000000;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}


.mega-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.mega-menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 98, 230, 0.1), transparent);
    transition: left 0.5s ease;
}

.mega-menu-item:hover::before {
    left: 100%;
}

.mega-menu-item:hover {
    background: #ffffff;
    border-color: #0062E6;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 98, 230, 0.15);
}

.mega-icon {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 6px;
    font-size: 1.1rem;
    color: white;
    padding: 6px;
}

.mega-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.mega-content h4 {
    color: #333;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.mega-content p {
    color: #666;
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.4;
}

/* Default Content */
.default-content {
    text-align: center;
    max-width: 500px;
    margin: 2rem auto;
}

.default-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.default-content .lead {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
}


.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.3rem;
}

.stat-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.social-links {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 1rem;
}

.social-link:hover {
    background: var(--gradient-primary);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(219, 5, 231, 0.4);
}

/* Insights Layout */

.trending-news {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
}

.trending-title {
    color: #333;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.news-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-item:hover {
    background: #f8f9fa;
    border-color: #0062E6;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 98, 230, 0.1);
}

.news-content h5 {
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.news-date {
    color: #666;
    font-size: 0.75rem;
}

.news-item i {
    color: #999;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.news-item:hover i {
    color: #0062E6;
    transform: translateX(2px);
}

.insights-categories {
    display: flex;
    flex-direction: column;
}

.insights-categories .mega-menu-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.insights-categories .mega-menu-item {
    padding: 0.75rem;
}

.insights-categories .mega-icon {
    width: 30px;
    height: 30px;
    font-size: 1rem;
}

.insights-categories .mega-content h4 {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.insights-categories .mega-content p {
    font-size: 0.75rem;
}

/* ========================================
   HERO BREADCRUMB STYLES
   ======================================== */

/* Hero Breadcrumb - Fixed above all slides like Infosys */
.hero-breadcrumb {
    position: absolute;
    top: 15vh;
    left: 0;
    width: 100%;
    z-index: 10;
    /* backdrop-filter: blur(10px); */
    padding: 1rem 0;
}

.hero-breadcrumb .container{
    max-width: 90%;
}

.hero-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.hero-breadcrumb .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
}

.hero-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.hero-breadcrumb .breadcrumb-item a:hover {
    color: #ffffff;
}

.hero-breadcrumb .breadcrumb-item.active {
    color: #ffffff;
    font-weight: 500;
}

.hero-breadcrumb .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive breadcrumb */
@media (max-width: 768px) {
    .hero-breadcrumb {
        position: relative;
        margin: 2% 0;
        padding: 0 !important;
    }
    
    .hero-breadcrumb .breadcrumb {
        font-size: 0.8rem;
    }
}

/* ========================================
   REVOLUTION PAGE SPECIFIC STYLES
   ======================================== */

/* Revolution page specific styles only - no duplicates */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}


.object-fit-cover {
    object-fit: cover;
}

/* ========================================
   DARK SECTION TEXT FIXES
   ======================================== */

/* Fix text colors on dark backgrounds */
.bg-dark .alert-primary {
    background-color: rgba(0, 98, 230, 0.1) !important;
    border-color: #0062E6 !important;
    color: #ffffff !important;
}

.bg-dark .alert-info {
    background-color: rgba(13, 202, 240, 0.1) !important;
    border-color: #0dcaf0 !important;
    color: #ffffff !important;
}

.bg-dark .alert-success {
    background-color: rgba(25, 135, 84, 0.1) !important;
    border-color: #198754 !important;
    color: #ffffff !important;
}

.bg-dark .alert-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.bg-dark .alert-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: #ffc107 !important;
    color: #ffffff !important;
}

/* Fix text colors in dark sections */
.bg-dark .text-primary {
    color: #ff9900  !important
}

.bg-dark .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

.bg-dark .text-white-50 {
    color: #fff !important;
}

.bg-dark .text-dark {
    color: #ffffff !important;
}

/* Fix card text in dark sections */
.bg-dark .card {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.bg-dark .card-body {
    color: #ffffff !important;
}

.bg-dark .card-title {
    color: #ffffff !important;
}

.bg-dark .card-text {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Fix table card background in dark sections */
/* .bg-dark .card.section-border {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.bg-dark .card.section-border .card-body {
    background-color: transparent !important;
} */

.bg-dark .card.section-border .table {
    background-color: transparent !important;
}

.bg-dark .card.section-border .table th,
.bg-dark .card.section-border .table td {
    background-color: transparent !important;
}

/* Fix form elements in dark sections */
.bg-dark .form-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.bg-dark .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.bg-dark .form-label {
    color: #ffffff !important;
}

/* Fix list items in dark sections */
.bg-dark .list-unstyled li {
    color: #ffffff !important;
}

.bg-dark .list-unstyled li strong {
    color: #ffffff !important;
}

.pillar-number {
    font-size: 3rem;
}
.lead {
    font-weight: 400;
}

/* Platform Page Styles */

.scroll-indicator {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.timeline-card {
    transition: all 0.3s ease;
}

.timeline-card:hover {
    transform: translateY(-4px);
}

/* Solution Page Styles */
.solution-hero {
    position: relative;
    overflow: hidden;
}

.solution-stats {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
}

.approach-card {
    transition: all 0.3s ease;
}

.approach-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.capability-card {
    transition: all 0.3s ease;
}

.capability-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.benefit-card {
    transition: all 0.3s ease;
}

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

.differentiator-card {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.differentiator-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.success-card {
    transition: all 0.3s ease;
}

.success-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.solution-card {
    transition: all 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.integration-icon {
    transition: all 0.3s ease;
    color: #000000;
}

.integration-icon:hover {
    transform: scale(1.1);
}

/* Backdrop blur support */
.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Enhanced text visibility */
.text-dark {
    color: #1f2937 !important;
}

.text-muted {
    color: #6b7280 !important;
}

/* Light theme text colors */
.light-theme .text-dark,
section.light-theme .text-dark {
    color: #1f2937 !important;
}

.light-theme .text-muted,
section.light-theme .text-muted {
    color: #6b7280 !important;
}

.light-theme h1,
.light-theme h2,
.light-theme h3,
.light-theme h4,
.light-theme h5,
.light-theme h6,
section.light-theme h1,
section.light-theme h2,
section.light-theme h3,
section.light-theme h4,
section.light-theme h5,
section.light-theme h6 {
    color: #1f2937 !important;
}

.light-theme p,
.light-theme .lead,
section.light-theme p,
section.light-theme .lead {
    color: #374151 !important;
}

.light-theme .text-white,
section.light-theme .text-white {
    color: #ffffff !important;
}

/* Dark theme text colors */
.bg-dark .text-dark,
.bg-darker .text-dark {
    color: #ffffff !important;
}

.bg-dark .text-muted,
.bg-darker .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Enhanced hover effects */
.shadow-hover {
    transition: all 0.3s ease;
}

.shadow-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.2) !important;
}

/* Table styling */
.table-bordered {
    border: 1px solid #e5e7eb;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #e5e7eb;
    padding: 1rem;
}

/* Badge styling */
.badge {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Clickable badge styling for service cards */
.service-key-services .badge {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.service-key-services .badge:hover {
    background: var(--brand-blue) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 98, 230, 0.3);
}

/* Prevent service-card hover when hovering over badges */
.service-key-services {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Animation delays */
[data-gsap-delay="0.1"] { animation-delay: 0.1s; }
[data-gsap-delay="0.2"] { animation-delay: 0.2s; }
[data-gsap-delay="0.3"] { animation-delay: 0.3s; }
[data-gsap-delay="0.4"] { animation-delay: 0.4s; }
[data-gsap-delay="0.5"] { animation-delay: 0.5s; }
[data-gsap-delay="0.6"] { animation-delay: 0.6s; }


/* Service Image Styling */
.service-image {
    object-fit: cover;
}

/* Brand Color Text Classes */
.text-brand-blue {
    color: var(--brand-blue) !important;
}

.text-brand-accent {
    color: var(--accent) !important;
}

/* Metric Card Styling */
.metric-card {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid;
}

.metric-card-primary {
    background: rgba(0, 98, 230, 0.1);
    border-color: rgba(0, 98, 230, 0.2);
}

.metric-card-accent {
    background: rgba(255, 122, 0, 0.1);
    border-color: rgba(255, 122, 0, 0.2);
}

.metric-value {
    font-weight: 700;
    /* font-size: 1.1rem; */
}

.metric-card-primary .metric-value {
    color: var(--brand-blue);
}

.metric-card-accent .metric-value {
    color: var(--accent);
}

.metric-label {
    color: #000000;
    font-size: 0.875rem;
}
section.bg-dark .metric-label {
    color: #ffffff;
}

/* Differentiator Icon Styling */
.differentiator-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

.differentiator-icon-gradient {
    background: var(--gradient);
}

.differentiator-icon-accent {
    background: var(--accent);
}

/* Approach Step Icon Styling */
.approach-step-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin-bottom: 1.5rem;
    background: var(--gradient-2);
    color: white;
    font-size: 2rem;
    position: relative;
    box-shadow: 0 8px 24px rgba(243, 108, 36, 0.3);
}

/* Capability Card Border Styling */
.border-brand-blue {
    border-color: var(--brand-blue) !important;
}

.border-brand-accent {
    border-color: var(--accent) !important;
}

.success-story-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px;
}

/* Success Story Icon Styling */
.success-story-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 0.75rem;
    color: white;
}

.success-story-icon-primary {
    background: var(--brand-blue);
}

.success-story-icon-accent {
    background: var(--accent);
}

/* Hero Banner Section (Level 3 Pages) */
.hero-banner-section {
    position: relative;
    min-height: 60vh;
    overflow: hidden;
}

.hero-banner-section .container{
    max-width: 90%;
    margin: 0 auto;
}

.hero-banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content-overlay {
    position: relative;
    z-index: 3;
    padding: 8rem 0 6rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.press-subscribe-form {
    max-width: 600px;
}

/* Responsive adjustments for hero banner */
@media (max-width: 768px) {
    .hero-banner-section {
        min-height: 50vh;
    }
    
    .hero-content-overlay {
        padding: 6rem 0 4rem;
        min-height: 50vh;
    }
    
    .hero-breadcrumb {
        padding: 1rem 0 0;
    }
    
    .hero-content-overlay .hero-content {
        padding: 0;
    }
    
    .hero-content-overlay .hero-title {
        margin-bottom: 1rem;
    }
    
    .hero-content-overlay .hero-subtitle {
        margin-bottom: 1rem;
    }
    
    .hero-content-overlay .d-flex {
        flex-direction: column;
        gap: 0.75rem !important;
    }
    
    .hero-content-overlay .btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .hero-banner-section {
        min-height: 45vh;
    }
    
    .hero-content-overlay {
        padding: 5rem 0 3rem;
        min-height: 45vh;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
        letter-spacing: -0.5px;
        line-height: 1.3;
    }
    
    .hero-content-left .hero-title {
        font-size: 1.75rem !important;
        letter-spacing: -0.5px;
        line-height: 1.3;
    }
    
    .hero-banner-section .hero-title {
        font-size: 1.75rem !important;
        letter-spacing: -0.5px;
        line-height: 1.3;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.4;
    }
    
    .hero-content-left .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.4;
    }
}

/* Services Page Specific Styles */
/* Hero Stats Inline */
.hero-stats-inline {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
}

/* Practice Preview Grid */
.practice-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.practice-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.practice-preview-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.practice-preview-item i {
    font-size: 1.5rem;
}

.practice-preview-item span {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Why Choose Highlights */
.why-choose-highlights {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.highlight-item i {
    color: #22c55e;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Practice Cards Enhancement */
.practice-badge {
    z-index: 1;
}

.practice-icon i {
    color: #000;
}

div.practice-header h3, div.practice-header p {
    color: #fff !important;
}

.practice-header p {
    width: 70%;
}

.practice-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
/* Integration Callout */
.integration-callout {
    background: var(--gradient);
    position: relative;
    overflow: hidden;
}

.integration-callout::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: pulse 15s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Why Cards Enhancement */
.why-card {
    transition: all 0.3s ease;
    border: 1px solid transparent;
    background: #f3f4ff !important;
}

.why-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-blue);
    box-shadow: 0 10px 30px rgba(0, 98, 230, 0.2);
}

/* Practice Header Images */
.practice-header-overlay {
    pointer-events: none;
    z-index: 1;
}

.practice-header .text-white {
    z-index: 2;
}


/* Integration Callout Enhancements */
.integration-pattern {
    pointer-events: none;
}

.integration-benefit {
    transition: all 0.3s ease;
    color: #000000;
}

.integration-benefit:hover {
    transform: translateY(-3px);
}

.integration-benefit i {
    transition: transform 0.3s ease;
}

.integration-benefit:hover i {
    transform: scale(1.1);
}

/* Responsive Adjustments for Services */
@media (max-width: 768px) {
    .hero-stats-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .stat-divider {
        display: none;
    }

    .practice-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .practice-preview-grid {
        grid-template-columns: 1fr;
    }
}

/* Services grid overrides: allow service-card to fill column width */
.services-section .service-card {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.services-section .service-image-wrap{
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.services-section .service-card .service-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0;
}

.services-section .service-card .service-icon{
    position: absolute;
    left: 12px;
    bottom: 0px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.services-section .service-card .service-icon img{
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.services-section .service-description {
    font-size: 1.2rem;
    margin-bottom: 2%;
}
.services-section .service-title {
    margin-bottom: 2%;
}


.service-card-body .service-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    margin-top: 0;
}

.service-card-body .service-description {
    color: #6c757d;
    margin-bottom: 20px;
}

/* Cloud Certification Badges in Hero - Used in index.php */
.cloud-certification-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cloud-badge-pill {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.875rem;
    background: white;
    display: inline-block;
}

.cloud-badge-pill.aws {
    color: #FF9900;
}

.cloud-badge-pill.azure {
    color: #0078D4;
}

.cloud-badge-pill.gcp {
    color: #4285F4;
}




/* Callout Boxes */
.callout-box {
    background: rgba(0, 98, 230, 0.1);
    padding: 30px;
    border-radius: 0;
    margin: 30px 0;
    border: 1px solid #ccc;
    position: relative;
}
.callout-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-2);
}

.callout-box h4 {
    color: var(--brand-blue);
    font-weight: 700;
    margin-bottom: 15px;
}


.callout-box-large {
    background: rgba(0, 98, 230, 0.1);
    border: 2px solid rgba(0, 98, 230, 0.3);
    padding: 50px;
    border-radius: 24px;
    text-align: center;
}
.callout-box-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-2);
}

.callout-box-large h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--brand-blue);
}


/* Diff Item (used in platform integration callout) */
.diff-item {
    background: rgba(0, 98, 230, 0.1);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgb(19 118 201 / 74%);
}

.diff-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 98, 230, 0.15);
}

.diff-item strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 8px;
}

.diff-item span {
    display: block;
    font-size: 1rem;
    color: #6c757d;
}


/* Platform Integration Value */
.platform-integration-value {
    margin-top: 60px;
    position: relative;
}

/* Similar styling to platform-card-wrapper */
.platform-integration-value .callout-box-large {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.platform-integration-value .callout-box-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.platform-integration-value .callout-box-large:hover::before {
    opacity: 0.03;
}

.platform-integration-value .callout-box-large h3{
    color: #ffffff;
}

.platform-integration-value .callout-box-large > * {
    position: relative;
    z-index: 1;
}

/* Global Reach Section */
.global-reach-section {
    padding:  0;
}

.global-reach-section.bg-dark {
    background: var(--bg-dark) !important;
}

.global-reach-section.bg-dark .distribution-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.global-reach-section.bg-dark .distribution-card h3 {
    color: white;
}


.global-reach-section.bg-dark .stat-showcase-card.bg-dark {
    background: rgba(255, 255, 255, 0.05) !important;
}

.global-reach-section.bg-dark .stat-showcase-card .stat-showcase-number {
    color: white !important;
}

.global-reach-section.bg-dark .stat-showcase-card .stat-showcase-text {
    color: rgba(255, 255, 255, 0.7) !important;
}

.distribution-card {
    background: #f8f9fa;
    border-radius: 20px;
    padding: 40px;
    height: 100%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.global-reach-section.bg-dark .distribution-card {
    border-radius: 20px;
    padding: 40px;
    height: 100%;
}


/* Platform Card Animation - GSAP handles animations */
/* CSS removed to allow GSAP animations to work properly */


/* Partners Section */
.partners-section {
    padding: 100px 0;
    background: #f8f9fa;
}

.partner-stat-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.partner-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 98, 230, 0.15);
}

.partner-stat-number {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.partner-stat-label {
    font-size: 1rem;
    color: #6c757d;
}

/* Enhanced Form Dropdowns */
.contact-form select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
    background-color: white;
    color: #333;
}

.contact-form select.form-control option {
    background-color: white !important;
    color: #333 !important;
    padding: 10px;
}

.contact-form select.form-control:focus {
    background-color: white;
    color: #333;
    border-color: var(--brand-blue);
}

/* Ensure dropdown is visible on dark backgrounds */
.contact-section select.form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
    /* z-index: 10; */
}

.contact-section select.form-control option {
    background-color: white !important;
    color: #333 !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    
    .cloud-certification-inline {
        justify-content: center;
    }
    
    .callout-box-large {
        padding: 30px 20px;
    }
}

@media (max-width: 576px) {
    .distribution-card {
        padding: 25px;
    }
    
    .partner-stat-card {
        padding: 30px 20px;
    }
    
    .partner-stat-number {
        font-size: 2.5rem;
    }
}

/* Revolution Page Enhancements - Icon Styles with Gradient Backgrounds */

/* Challenge Icon - Gradient Circle Background */
.challenge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-bottom: 1.5rem;
    background: #fff;
    color: #000;
    font-size: 1.5rem;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 98, 230, 0.3);
}

.challenge-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--gradient);
    opacity: 0.2;
    z-index: -1;
}

/* Challenge Card - Enhanced with Gradient Accent */
.challenge-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.challenge-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient);
    z-index: 1;
}

.challenge-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 98, 230, 0.2);
}
.challenge-card .card-body {
    padding: 10%;
}
/* Challenge Number Badge */
.challenge-number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0, 98, 230, 0.3);
}

/* Blocker Card - Enhanced */
.blocker-card {
    background: rgba(255, 255, 255, 0.05);
    /* border: 2px solid rgba(0, 98, 230, 0.3); */
    border-radius: 12px;
    padding: 10%;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.blocker-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-2);
}

.blocker-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 98, 230, 0.6);
    transform: translateY(-3px);
}

.blocker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    width: 60px;
    height: 60px;
    background: var(--gradient-2);
    color: white;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

/* Failure Icon - Danger Gradient */
.failure-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin-bottom: 1.5rem;
    background: var(--gradient-2);
    color: white;
    font-size: 2rem;
    position: relative;
    box-shadow: 0 8px 24px rgba(243, 108, 36, 0.3);
}

.failure-card {
    position: relative;
    transition: all 0.3s ease;
}

.failure-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-2);
    z-index: 1;
}

.failure-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(243, 108, 36, 0.2);
}

.failure-card .card-title {
    margin-bottom: 1rem;
}

.failure-card .card-text {
    margin-bottom: 1rem;
}

/* Revolution Icon - Large Gradient Circle */
.revolution-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-bottom: 1.5rem;
    background: var(--gradient);
    color: white;
    font-size: 3rem;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 98, 230, 0.3);
}

.revolution-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: var(--gradient);
    opacity: 0.15;
    z-index: -1;
}

.principle-card .row {
    overflow: visible;
}

.revolution-step {
    text-align: center;
}

/* Principle Card - Enhanced */
.principle-card {
    position: relative;
    overflow: visible !important;
    transition: all 0.3s ease;
}

.principle-card .card {
    overflow: visible !important;
}

.col-md-6:has(.principle-card) {
    overflow: visible;
}

.principle-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient);
    z-index: 1;
}

.principle-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 98, 230, 0.2);
}

.principle-number {
    position: absolute;
    top: -25px;
    left: 1rem;
    width: 42px;
    height: 42px;
    background: var(--gradient-2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 98, 230, 0.3);
    z-index: 15;
    border: 3px solid #0a0a0a;
}

/* Value Icon - Success Gradient */
.value-card {
    position: relative;
    transition: all 0.3s ease;
    border-radius: 0;
}

.value-card .card-body {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: var(--gradient-2);
    color: white;
    font-size: 1.75rem;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 153, 203, 0.3);
}

.value-card .card-title {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.value-card ul {
    margin-top: 0.75rem;
}

.value-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 153, 203, 0.15);
}

.value-metric {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #252525;
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

/* Comparison Callout - Enhanced */
.comparison-callout {
    position: relative;
    background: rgba(0, 98, 230, 0.1);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.comparison-callout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient);
}

.comparison-callout:hover {
    background: rgba(0, 98, 230, 0.15);
    border-color: rgba(0, 98, 230, 0.5);
    transform: translateY(-3px);
}

.comparison-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient);
    color: white;
    font-size: 1rem;
    margin-right: 0.75rem;
}

/* Join the Revolution CTA Icons */
.join-revolution-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin-bottom: 1.5rem;
    background: var(--gradient);
    color: white;
    font-size: 2.5rem;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 98, 230, 0.3);
    transition: all 0.3s ease;
}

.join-revolution-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--gradient);
    opacity: 0.2;
    z-index: -1;
}

.join-revolution-icon:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 12px 30px rgba(0, 98, 230, 0.4);
}

/* Platform Pages Enhancements - Apply Revolution Page Styling */

/* Platform Outcome Cards - Gradient Accent and Enhanced Icons */
.bg-dark .card.section-border {
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
}

.bg-dark .card.section-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient);
    z-index: 1;
}

.bg-dark .card.section-border:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 98, 230, 0.2);
}

/* Platform Section Icons - Gradient Circle Backgrounds */
.bg-dark .section-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    background: var(--gradient) !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: white !important;
    background-clip: unset !important;
    color: white !important;
    font-size: 2rem;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 98, 230, 0.3);
    flex-shrink: 0;
    padding: 0 !important;
}

/* .bg-dark .section-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--gradient);
    opacity: 0.2;
    z-index: -1;
} */

/* Light Theme Section Icons */
.light-theme .section-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    background: var(--gradient) !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: white !important;
    background-clip: unset !important;
    color: white !important;
    font-size: 2rem;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 98, 230, 0.3);
    flex-shrink: 0;
    padding: 0 !important;
}

.light-theme .section-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--gradient);
    opacity: 0.2;
    z-index: -1;
}

/* Capability Cards with Rounded Circle Icons - Enhanced */
.light-theme .rounded-circle.section-bg {
    background: var(--gradient) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(0, 98, 230, 0.3);
    transition: all 0.3s ease;
}

.light-theme .rounded-circle.section-bg:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 98, 230, 0.4);
}

/* Platform Cards with Section Border - Hover Effects */
.light-theme .card.section-border {
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
}

.light-theme .card.section-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient);
    z-index: 1;
}

.light-theme .card.section-border:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 98, 230, 0.2);
}

.brand-card{
    position: relative;
    transition: all 0.3s ease;  
}
.brand-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient);
    z-index: 1;
}
.alert-brand{
    border: 1px solid;
}
.brand-box-shadow{
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
.service-line-card {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease;
    border: 0.5px solid;
}
.service-line-card .service-visual img{
    border-radius: 0;
}

.gradient-icon{
    background: var(--gradient-2);
    padding: 14px;
    border-radius: 14px;
}
.bg-brand{
    background: rgb(255 255 255 / 32%);
}
.why-card-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin-bottom: 1.5rem;
    background: var(--gradient-2);
    color: white;
    font-size: 2rem;
    position: relative;
    box-shadow: 0 8px 24px rgba(243, 108, 36, 0.3);
}

/* Positions Tabs Styling */
#positionsTab .nav-link {
    color: #6c757d !important;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}

#positionsTab .nav-link:hover {
    color: var(--brand-blue) !important;
    border-bottom-color: rgba(0, 98, 230, 0.3);
    background-color: rgba(0, 98, 230, 0.05);
}

#positionsTab .nav-link.active {
    color: var(--brand-blue) !important;
    background-color: transparent;
    border-bottom: 3px solid var(--brand-blue);
    font-weight: 700;
}

/* Campus Careers Icon Circles */
.campus-icon-circle {
    width: 80px;
    height: 80px;
    background: var(--gradient);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.campus-icon-circle-small {
    width: 70px;
    height: 70px;
    background: var(--gradient);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.campus-phase-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Careers Stats Grid */
.careers-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.career-stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.career-stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.career-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient);
    color: white;
    font-size: 1.5rem;
    margin: 0 auto;
}

.career-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.career-stat-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Light theme adjustments for careers stats */
.light-theme .career-stat-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.light-theme .career-stat-card:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--brand-blue);
    box-shadow: 0 10px 30px rgba(0, 98, 230, 0.15);
}

.light-theme .career-stat-label {
    color: #6b7280;
}

/* Responsive adjustments for careers stats */
@media (max-width: 991.98px) {
    .careers-stats-grid {
        margin-top: 3rem;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .career-stat-card {
        padding: 1.5rem;
    }
    
    .career-stat-number {
        font-size: 2rem;
    }
}

@media (max-width: 575.98px) {
    .careers-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Value Section Equal Heights */
.value-cards-container {
    gap: 1rem;
}

.value-cards-container .card {
    min-height: 0;
    margin-bottom: 0 !important;
}

.value-cards-container .callout-box {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0 !important;
}

.value-cards-container .callout-box h4 {
    flex-shrink: 0;
}

.value-cards-container .callout-box ul {
    flex-grow: 1;
}

.value-cards-container .comparison-callout {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0 !important;
}

.value-cards-container .comparison-callout h4 {
    flex-shrink: 0;
}

.value-cards-container .comparison-callout ul {
    flex-grow: 1;
}

.value-cards-container .value-card {
    margin-bottom: 0 !important;
}

.value-cards-container .value-card .card-header {
    display: flex;
    align-items: center;
    padding: 1.5rem 1rem;
    border-bottom: none;
    background: transparent;
    gap: 1rem;
}

.value-cards-container .value-card .card-header .value-icon {
    flex-shrink: 0;
}

.value-cards-container .value-card .card-header .card-title {
    flex-grow: 1;
}

@media (max-width: 991.98px) {
    .row.align-items-stretch .col-lg-6 {
        margin-bottom: 2rem;
    }
}

/* Case Studies Carousel */
.case-study-card {
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

.case-study-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 98, 230, 0.3);
    border-color: var(--brand-blue) !important;
}

.case-study-card .card-img-top {
    height: 180px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.case-study-card:hover .card-img-top {
    transform: scale(1.05);
}

/* Resource Card - Common Styling for Listing Pages */
.resource-card {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    overflow: hidden !important;
}

.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 98, 230, 0.2);
    border-color: var(--brand-blue) !important;
    text-decoration: none;
    color: inherit;
}

.resource-card .card-img-top {
    height: 220px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

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

.resource-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.resource-card .card-body h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 3.2em;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.resource-card .card-body p {
    flex-grow: 1;
    margin-bottom: 1rem;
}

.resource-card .card-body > span:last-child {
    margin-top: auto;
}

/* Dark Theme Resource Cards */
.bg-dark .resource-card .card-body h5 {
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 3.2em;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.bg-dark .resource-card .card-body p {
    color: rgba(255, 255, 255, 0.7);
    flex-grow: 1;
    margin-bottom: 1rem;
}

.bg-dark .resource-card .card-body small {
    color: rgba(255, 255, 255, 0.7);
}

.bg-dark .resource-card:hover {
    border-color: var(--brand-blue) !important;
}

/* Ensure card images maintain aspect ratio */
.card .card-img-top {
    height: 220px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hero Content Subscribe Form - Fix Input Height */
.hero-content .form-control-lg {
    height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

/* .hero-content .btn-lg {
    height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1rem;
} */

.case-study-card .card-body {
    padding: 1rem;
}

.case-study-card .card-title {
    font-size: 0.95rem;
    line-height: 1.3;
}

.case-study-card .card-body p {
    font-size: 0.85rem;
    line-height: 1.5;
}

.case-study-card .card-body p.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#caseStudiesCarousel {
    position: relative;
    padding: 0 4rem;
}

#caseStudiesCarousel .carousel-control-prev,
#caseStudiesCarousel .carousel-control-next {
    width: 40px;
    height: 40px;
    background: rgba(0, 98, 230, 0.8);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    transition: background 0.3s ease;
}

#caseStudiesCarousel .carousel-control-prev {
    left: 0;
}

#caseStudiesCarousel .carousel-control-next {
    right: 0;
}

#caseStudiesCarousel .carousel-control-prev:hover,
#caseStudiesCarousel .carousel-control-next:hover {
    background: var(--brand-blue);
}

#caseStudiesCarousel .carousel-indicators {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

#caseStudiesCarousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

#caseStudiesCarousel .carousel-indicators button.active {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

@media (max-width: 991.98px) {
    #caseStudiesCarousel {
        padding: 0 2rem;
    }
}

@media (max-width: 767.98px) {
    #caseStudiesCarousel {
        padding: 0 1rem;
    }
    
    #caseStudiesCarousel .carousel-control-prev,
    #caseStudiesCarousel .carousel-control-next {
        display: none;
    }
}

/* Client Logos Carousel */
#clientLogosCarousel {
    margin-top: 0;
    width: 100%;
}

.client-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    height: 120px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.client-logo-item:hover {
    border-color: var(--brand-blue);
    box-shadow: 0 4px 12px rgba(0, 98, 230, 0.1);
    transform: translateY(-3px);
}

.client-logo-item img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.client-logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

#clientLogosCarousel .owl-item {
    padding: 0 0.5rem;
    overflow: visible;
    will-change: transform;
}

#clientLogosCarousel .owl-stage-outer {
    overflow: hidden;
    padding: 10px 0;
    position: relative;
    width: 100%;
}

#clientLogosCarousel .owl-stage {
    display: flex;
    align-items: stretch;
    transition-timing-function: linear !important;
    will-change: transform;
}

#clientLogosCarousel .owl-item {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    transform: translateZ(0);
}

@media (max-width: 768px) {
    .client-logo-item {
        height: 100px;
        padding: 1rem;
    }
    
    .client-logo-item img {
        max-height: 60px;
    }
    
    #clientLogosCarousel .owl-nav {
        margin-top: 1.5rem;
    }
    
    #clientLogosCarousel .owl-nav button {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}