html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            overflow-x: hidden;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Page Hero Section */
.page-hero-section {
    background: var(--primary-blue);
    padding: 160px 0 100px;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.page-hero-section .hero-shape {
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: var(--theme-yellow);
    border-radius: 50%;
    opacity: 0.3;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(10deg); }
}

.page-hero-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
    margin-bottom: 25px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -1px;
}

.page-hero-text {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 30px;
    max-width: 90%;
}

.hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
}

.hero-breadcrumb a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.hero-breadcrumb a:hover {
    color: var(--theme-yellow);
}

.hero-breadcrumb i {
    font-size: 12px;
    color: #666;
}

.hero-breadcrumb span {
    color: #666;
}

.page-hero-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

.page-hero-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.page-hero-image:hover img {
    transform: scale(1.05);
}

.floating-card {
    position: absolute;
    background: #fff;
    padding: 20px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    animation: floatCard 4s ease-in-out infinite;
}

.floating-card.card-1 {
    top: 30px;
    left: -30px;
    animation-delay: 0s;
}

.floating-card.card-2 {
    bottom: 40px;
    right: -20px;
    animation-delay: 2s;
}

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

.floating-card i {
    width: 50px;
    height: 50px;
    background: var(--theme-yellow);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #000;
}

.floating-card h4 {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    color: #000;
}

.floating-card span {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

/* Overview Section */
.overview-section {
    padding: 100px 0;
    background: #fff;
}

.overview-image-grid {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    padding-right: 40px;
}

.overview-img {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

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

.overview-img:hover img {
    transform: scale(1.1);
}

.overview-img.main-img {
    height: 400px;
    grid-row: span 2;
}

.overview-img.secondary-img {
    height: 190px;
}

.experience-badge {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-yellow);
    padding: 25px 35px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(245, 213, 71, 0.4);
    animation: pulseBadge 2s ease-in-out infinite;
}

@keyframes pulseBadge {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
}

.experience-badge .years {
    display: block;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: #000;
}

.experience-badge .text {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lead-text {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
    font-weight: 500;
}

.overview-stats {
    margin-top: 30px;
}

.stat-item {
    background: var(--cream-bg);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.stat-item:hover {
    background: var(--primary-blue);
    transform: translateY(-5px);
    border-color: var(--theme-yellow);
}

.stat-item i {
    font-size: 32px;
    color: #000;
    margin-bottom: 15px;
    display: block;
}

.stat-item h4 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 5px;
    color: #000;
}

.stat-item span {
    font-size: 13px;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* VMV Section */
.vmv-section {
    padding: 100px 0;
    background: var(--cream-bg);
}

.vmv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.vmv-card {
    background: #fff;
    padding: 40px 35px;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
    height: 100%;
}

.vmv-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
}

.vmv-card.vision:hover {
    border-color: #3B82F6;
}

.vmv-card.mission:hover {
    border-color: var(--theme-yellow);
}

.vmv-card.values:hover {
    border-color: #10B981;
}

.vmv-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.vision .vmv-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.mission .vmv-icon {
    background: rgba(245, 213, 71, 0.2);
    color: #000;
}

.values .vmv-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

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

.vmv-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.vmv-card p {
    color: #666;
    line-height: 1.7;
    font-size: 15px;
}

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

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

.values-list li i {
    color: #10B981;
    font-size: 18px;
}

.vmv-decoration {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.1;
    transition: all 0.3s ease;
}

.vision .vmv-decoration {
    background: #3B82F6;
}

.mission .vmv-decoration {
    background: var(--theme-yellow);
}

.values .vmv-decoration {
    background: #10B981;
}

.vmv-card:hover .vmv-decoration {
    transform: scale(3);
    opacity: 0.05;
}

/* Leadership Section */
.leadership-section {
    padding: 100px 0;
    background: #fff;
}

.team-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    border-color: var(--theme-yellow);
}

.team-image {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-card:hover .team-image img {
    transform: scale(1.1);
}

.team-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
}

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

.team-overlay .social-links {
    display: flex;
    gap: 10px;
}

.team-overlay .social-links a {
    width: 40px;
    height: 40px;
    background: var(--theme-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    text-decoration: none;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
}

.team-card:hover .team-overlay .social-links a {
    transform: translateY(0);
    opacity: 1;
}

.team-overlay .social-links a:nth-child(2) {
    transition-delay: 0.1s;
}

.team-overlay .social-links a:hover {
    background: #fff;
    transform: translateY(-3px);
}

.team-info {
    padding: 25px;
    text-align: center;
}

.team-info h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #000;
}

.team-info span {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* Presence Section */
.presence-section {
    padding: 100px 0;
    background: var(--primary-blue);
}

.presence-features {
    margin-top: 30px;
}

.presence-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(255,255,255,0.5);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.presence-item:hover {
    background: #fff;
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.presence-icon {
    width: 50px;
    height: 50px;
    background: var(--theme-yellow);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #000;
    flex-shrink: 0;
}

.presence-content h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #000;
}

.presence-content p {
    font-size: 14px;
    color: #555;
    margin: 0;
}

.coverage-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.coverage-badge {
    background: #000;
    color: #fff;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.coverage-badge:hover {
    background: var(--theme-yellow);
    color: #000;
    transform: translateY(-2px);
}

/* Map Styles */
.map-container {
    background: #fff;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.gcc-map {
    position: relative;
}

.region-map {
    width: 100%;
    height: auto;
}

.country {
    fill: #e0e0e0;
    stroke: #fff;
    stroke-width: 2;
    cursor: pointer;
    transition: all 0.3s ease;
}

.country:hover {
    fill: var(--primary-blue);
}

.country.active {
    fill: var(--theme-yellow);
    animation: pulseCountry 2s ease-in-out infinite;
}

@keyframes pulseCountry {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.marker {
    animation: pulseMarker 2s ease-in-out infinite;
}

.marker.hq {
    animation: pulseHQ 2s ease-in-out infinite;
}

@keyframes pulseMarker {
    0%, 100% { r: 6; opacity: 1; }
    50% { r: 8; opacity: 0.7; }
}

@keyframes pulseHQ {
    0%, 100% { r: 12; }
    50% { r: 15; }
}

.connection-lines line {
    animation: dash 2s linear infinite;
}

@keyframes dash {
    to { stroke-dashoffset: -20; }
}

.map-legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.hq {
    background: var(--theme-yellow);
}

.legend-dot.coverage {
    background: #B8E0FF;
}

/* Why Zen Section */
.why-zen-section {
    padding: 100px 0;
    background: #fff;
}

.why-card {
    background: var(--cream-bg);
    padding: 40px 30px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    border: 2px solid transparent;
}

.why-card:hover {
    background: var(--primary-blue);
    transform: translateY(-10px);
    border-color: var(--theme-yellow);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.why-icon {
    width: 65px;
    height: 65px;
    background: var(--theme-yellow);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #000;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.why-card:hover .why-icon {
    transform: scale(1.1) rotate(5deg);
    background: #000;
    color: var(--theme-yellow);
}

.why-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.why-card p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
}

.why-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 72px;
    font-weight: 800;
    color: rgba(0,0,0,0.05);
    line-height: 1;
    transition: all 0.3s ease;
}

.why-card:hover .why-number {
    color: rgba(245, 213, 71, 0.3);
}

/* Certifications Section */
.certifications-section {
    padding: 100px 0;
    background: var(--cream-bg);
}

.cert-categories {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.category-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.category-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--theme-yellow);
    border-radius: 2px;
}

/* Nine vendors. A grid with auto-fit leaves an orphan row - six across, then
   three stretched to full width - because 1fr makes the remainder expand.
   Flex wrapping keeps every badge the same size and centres whatever is left
   on the last row, so the block stays balanced at any vendor count. */
.vendor-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.vendor-grid > .vendor-badge {
    /* grow must be 0. With grow:1 the final row stretches its items to fill the
       width, so six badges on row one and three on row two render at different
       sizes - the orphan-row problem this layout exists to avoid. Fixed basis
       plus justify-content:center keeps every badge identical and centres the
       remainder. */
    flex: 0 1 160px;
    width: 160px;
}

@media (max-width: 620px) {
    .vendor-grid { gap: 14px; }
    .vendor-grid > .vendor-badge { flex-basis: 144px; width: 144px; }
}

.vendor-badge {
    background: #fff;
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
    cursor: pointer;
}

.vendor-badge:hover {
    transform: translateY(-10px);
    border-color: var(--theme-yellow);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.vendor-logo {
    width: 70px;
    height: 70px;
    background: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 28px;
    color: #000;
    transition: all 0.3s ease;
}

.vendor-badge:hover .vendor-logo {
    background: var(--theme-yellow);
    transform: scale(1.1);
}

.vendor-badge span {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-bottom: 5px;
}

.vendor-badge small {
    font-size: 12px;
    color: #666;
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.cert-item {
    background: #fff;
    padding: 35px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.cert-item:hover {
    border-color: var(--theme-yellow);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.cert-icon {
    width: 80px;
    height: 80px;
    background: var(--theme-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: #000;
    transition: all 0.3s ease;
}

.cert-item:hover .cert-icon {
    transform: rotateY(360deg);
}

.cert-item h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #000;
}

.cert-item p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* CTA Section */
.cta-section {
    padding: 40px 0 80px;
    background: #fff;
}

.cta-box {
    background: linear-gradient(135deg, #000 0%, #1a1a2e 100%);
    padding: 60px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

/* Decorative circles only. Without this they sit above the static-positioned
   buttons in the same stacking context and block clicks on them. */
.cta-box::before,
.cta-box::after {
    pointer-events: none;
}

.cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: var(--theme-yellow);
    border-radius: 50%;
    opacity: 0.1;
}

.cta-box > * {
    position: relative;
    z-index: 1;
}

.cta-box h2 {
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.cta-box p {
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    margin: 0;
}

.cta-box .btn-theme-yellow {
    background: var(--theme-yellow);
    color: #000;
    padding: 18px 35px;
    font-size: 16px;
    font-weight: 600;
}

.cta-box .btn-theme-yellow:hover {
    background: #fff;
    color: #000;
}

/* Active Navigation State */
.navbar-nav .nav-link.active {
    color: #000 !important;
}

.navbar-nav .nav-link.active::after {
    width: 60%;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .page-hero-title {
        font-size: 42px;
    }
    
    .page-hero-section {
        padding: 140px 0 80px;
    }
    
    .vmv-grid {
        grid-template-columns: 1fr;
    }
    
    .overview-image-grid {
        grid-template-columns: 1fr;
        padding-right: 0;
        margin-bottom: 40px;
    }
    
    .overview-img.main-img {
        height: 300px;
        grid-row: span 1;
    }
    
    .overview-img.secondary-img {
        display: none;
    }
    
    .floating-card {
        display: none;
    }
    
    .cta-box {
        padding: 40px;
        text-align: center;
    }
    
    .cta-box h2 {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .page-hero-title {
        font-size: 32px;
    }
    
    .section-title {
        font-size: 32px;
    }
    
    .why-card {
        margin-bottom: 20px;
    }
    
    /* was grid-template-columns: repeat(2,1fr) - inert now the grid is flex.
       Same intent expressed as a basis that yields two per row. */
    .vendor-grid > .vendor-badge {
        flex-basis: calc(50% - 11px);
        width: calc(50% - 11px);
    }
    
    .cert-grid {
        grid-template-columns: 1fr;
    }
    
    .map-container {
        padding: 20px;
    }
    
    .presence-item {
        flex-direction: column;
        text-align: center;
    }
    
    .presence-icon {
        margin: 0 auto;
    }
}

/* Smooth Scroll Offset for Fixed Header */
#overview,
#vmv,
#leadership,
#presence,
#why-zen,
#certifications {
    scroll-margin-top: 100px;
}

/* "Projects Delivered" wraps onto a second line where "Channel Partners" and
   "Expert Team" do not, so its card grew to 192px against their 168px. The
   columns are Bootstrap and already stretch, so filling the column height is
   enough to level all three. */
.stat-item {
    height: 100%;
}