/*
Theme Name: YSIS Advisory
Description: Custom theme for YSIS Advisory consulting firm
Version: 1.0
*/




/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


:root {
    --primary-navy: #1e293b;
    --dark-navy: #0f172a;
    --light-navy: #334155;
    --white: #ffffff;
    --off-white: #f8fafc;
    --light-gray: #e2e8f0;
    --medium-gray: #64748b;
    --dark-gray: #475569;
    --accent: #1e293b;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--dark-navy);
    background: var(--white);
    font-size: 16px;
    letter-spacing: -0.01em;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header Styles */
.site-header {
    background: var(--white);
    color: var(--dark-navy);
    padding: 24px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--light-gray);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}
.site-logo {
    height: 60px; /* Adjust this value to make it bigger or smaller */
    width: auto; /* Maintains aspect ratio */
    max-width: 200px; /* Prevents it from getting too wide */
}


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

.logo h1 a {
    color: var(--dark-navy);
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Navigation */
.main-nav .nav-menu {
    display: flex;
    list-style: none;
    gap: 48px;
}

.main-nav .nav-menu li a {
    color: var(--medium-gray);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s ease;
}

.main-nav .nav-menu li a:hover {
    color: var(--dark-navy);
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 83vh; /* Reduced from 100vh */
    min-height: 450px; /* Reduced from 600px */
    overflow: hidden;
}

.hero-image {
    position: relative;
    width: 100%;
    height: 100%;
}

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

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30, 41, 59, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: var(--white);
}

.hero-content h1 {
    font-size: 72px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}

.hero-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 48px;
    line-height: 1.5;
    font-weight: 400;
}

/* Buttons */
.btn-minimal {
    display: inline-block;
    padding: 16px 32px;
    background: var(--dark-navy);
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}
.btn-minimal-front {
    display: inline-block;
    padding: 16px 32px;
    background: var(--dark-navy);
    color: var(--white);
 
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}


.btn-minimal-front:hover {
     background: var(--light-navy);
    transform: translateY(-1px);
}

.btn-minimal:hover {
    background: var(--light-navy);
    transform: translateY(-1px);
}

/* About Section */
.about-section {
    padding: 120px 0;
    background: var(--off-white);
}

.two-column {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: start;
}

.column-left h2 {
    font-size: 48px;
    color: var(--dark-navy);
    font-weight: 600;
    margin-bottom: 40px;
}

.founder-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.founder-profile img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 4px solid var(--white);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.profile-info h4 {
    font-size: 18px;
    color: var(--dark-navy);
    margin-bottom: 4px;
    font-weight: 600;
}

.profile-info p {
    font-size: 14px;
    color: var(--medium-gray);
}

.column-right .lead-text {
    font-size: 20px;
    color: var(--dark-navy);
    margin-bottom: 24px;
    font-weight: 500;
    line-height: 1.5;
}

.column-right p {
    font-size: 16px;
    color: var(--medium-gray);
    margin-bottom: 20px;
    line-height: 1.6;
}

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

.services-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.services-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.services-content h2 {
    font-size: 48px;
    color: var(--dark-navy);
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 18px;
    color: var(--medium-gray);
    margin-bottom: 40px;
}

.services-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.service-column h3 {
    font-size: 20px;
    color: var(--dark-navy);
    margin-bottom: 20px;
    font-weight: 600;
}

.service-column ul {
    list-style: none;
}

.service-column ul li {
    padding: 8px 0;
    color: var(--medium-gray);
    font-size: 15px;
    position: relative;
    padding-left: 20px;
}


/* Focus Section */
.focus-section {
    padding: 120px 0;
    background: var(--off-white);
}

.focus-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    align-items: center;
}

.focus-content h2 {
    font-size: 48px;
    color: var(--dark-navy);
    margin-bottom: 32px;
    line-height: 1.1;
}

.focus-content p {
    font-size: 18px;
    color: var(--medium-gray);
    line-height: 1.6;
    margin-bottom: 20px;
}

.focus-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Global Section */
.global-section {
    padding: 120px 0;
    background: var(--white);
}

.global-content {
    text-align: center;
}

.global-content h2 {
    font-size: 48px;
    color: var(--dark-navy);
    margin-bottom: 20px;
}

.global-content p {
    font-size: 18px;
    color: var(--medium-gray);
    margin-bottom: 40px;
}

.global-image img {
    width: 100%;
    max-width: 800px;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Subsidiaries Section */
.subsidiaries-section {
    padding: 120px 0;
    background: var(--off-white);
}

.subsidiaries-section h2 {
    font-size: 48px;
    color: var(--dark-navy);
    text-align: center;
    margin-bottom: 60px;
}

.subsidiaries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.subsidiary-card {
    background: var(--white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.subsidiary-card:hover {
    transform: translateY(-5px);
}

.subsidiary-card h3 {
    font-size: 24px;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-weight: 600;
}

.subsidiary-card p {
    color: var(--medium-gray);
    font-size: 16px;
    line-height: 1.5;
}

/* Contact Section */


/* Contact Section - Replace your existing contact section styles */
.contact-section {
    padding: 120px 0;
    background: var(--white);
}

.contact-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-content h2 {
    font-size: 48px;
    color: var(--dark-navy);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

.contact-content p {
    font-size: 18px;
    color: var(--medium-gray);
    margin-bottom: 40px;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .contact-content h2 {
        font-size: 36px;
        margin-bottom: 20px;
    }
    
    .contact-content p {
        font-size: 16px;
        margin-bottom: 32px;
    }
    
    .contact-section {
        padding: 80px 0;
    }
}


/* Professional Footer Styles */
.site-footer {
    background: var(--dark-navy);
    color: var(--white);
    margin-top: auto;
}

.footer-main {
    padding: 60px 0 40px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 2fr;
    gap: 50px;
    align-items: start;
}

.footer-section h3 {
    font-size: 18px;
    color: var(--white);
    margin-bottom: 24px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

/* Company Info */
.footer-logo-img {
    height: 70px; /* Slightly larger than header */
    width: auto;
    max-width: 220px;
    margin-bottom: 20px;
}

.company-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Contact Info */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-item i {
    color: var(--white);
    font-size: 16px;
    margin-top: 2px;
    width: 18px;
    flex-shrink: 0;
}

.contact-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-text strong {
    font-size: 14px;
    color: var(--white);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.contact-text span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
}

/* Map Section */
.map-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.map-container iframe {
    width: 100%;
    height: 200px;
    border: none;
    display: block;
}


.address-text {
    margin-top: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--white);
}

.address-text p {
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    margin: 0;
    line-height: 1.5;
}

.address-text p:first-child {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
}

.address-text p:last-child {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}


/* Footer Bottom */
.footer-bottom {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.footer-bottom p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.footer-links a:hover {
    color: var(--white);
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    .contact-item {
        justify-content: flex-start;
    }
    
    .map-container iframe {
        height: 250px;
    }
}
/* Utility Classes */
.text-center {
    text-align: center;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Tesla-Style About Us Page */
/* Blended Hero Section */





.tesla-hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6; /* Make images blend better */
}

/* Individual image positioning */
.hero-background img:nth-child(1) {
    /* Top left image */
    filter: brightness(0.4);
}

.hero-background img:nth-child(2) {
    /* Top right image */
    filter: brightness(0.5);
}

.hero-background img:nth-child(3) {
    /* Bottom left image */
    filter: brightness(0.3);
}

.hero-background img:nth-child(4) {
    /* Bottom right image */
    filter: brightness(0.4);
}/* Contact Info - Fixed Colors */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-item i {
    color: var(--white);
    font-size: 16px;
    margin-top: 2px;
    width: 18px;
    flex-shrink: 0;
}

.contact-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-text strong {
    font-size: 14px;
    color: var(--white) !important; /* Force white color */
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.contact-text span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9) !important; /* Force light color */
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
}

/* Additional override for any inherited styles */
.footer-section.contact-info * {
    color: inherit;
    color: black;
}


.footer-section.contact-info .contact-text strong,
.footer-section.contact-info .contact-text span {
    color: var(--white) !important;
}

.footer-section.contact-info .contact-text span {
    color: rgba(0, 0, 0, 0.8) !important;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg, 
        rgba(30, 41, 59, 0.8) 0%, 
        rgba(15, 23, 42, 0.6) 50%,
        rgba(30, 41, 59, 0.7) 100%
    );
    z-index: 1;
}

.tesla-hero-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
}

.tesla-hero-content h1 {
    font-size: 80px;
    font-weight: 300;
    line-height: 0.9;
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.04em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.tesla-hero-content p {
    font-size: 24px;
    font-weight: 300;
    color: rgba(255,255,255,0.9);
    font-family: 'Poppins', sans-serif;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-background {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }
    
    .tesla-hero-content h1 {
        font-size: 48px;
    }
    
    .tesla-hero-content p {
        font-size: 18px;
    }
}

/* Stats Section */
.stats-section {
    padding: 80px 0;
    background: #000;
    color: white;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
    text-align: center;
}

.stat-item h3 {
    font-size: 56px;
    font-weight: 600;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
}

.stat-item p {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

/* Counter Animation Styles */
.counter {
    transition: all 0.3s ease;
}

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

/* Add slight pulse effect during counting */
.counter.animated {
    animation: pulse 0.1s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Responsive adjustments for stats */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .stat-item h3 {
        font-size: 40px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}
/* Tesla Mission */
.tesla-mission {
    padding: 120px 0;
    background: #fff;
    text-align: center;
}

.mission-content h2 {
    font-size: 56px;
    font-weight: 300;
    line-height: 1.1;
    color: #000;
    margin-bottom: 32px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
}

.mission-content p {
    font-size: 20px;
    color: #666;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

/* Tesla Team */
.tesla-team {
    padding: 120px 0;
    background: #f8f8f8;
}

.tesla-team .section-title {
    font-size: 48px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 80px;
    color: #000;
    font-family: 'Poppins', sans-serif;
}
/* Team Showcase - Fixed Alignment */
.team-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-bottom: 120px;
    align-items: center;
}

.team-showcase.reverse {
    grid-template-columns: 1fr 1fr;
}

.team-showcase.reverse .team-content {
    order: 1;
}

.team-showcase.reverse .team-image-large {
    order: 2;
}

/* Team Content Container - Ensures proper vertical alignment */
.team-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Team Image Styling */
.team-image-large img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.placeholder-team {
    width: 100%;
    height: 500px;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    font-weight: 300;
    color: #999;
    font-family: 'Poppins', sans-serif;
}

/* Team Header */
.team-header {
    margin-bottom: 32px;
}

.team-header h3 {
    font-size: 40px;
    font-weight: 300;
    color: #000;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

.team-header .title {
    font-size: 18px;
    color: #666;
    margin-bottom: 0;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

/* Team Bio */
.team-bio p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

/* Team Achievements */
.team-achievements {
    display: flex;
    gap: 40px;
    margin-top: 32px;
}

.achievement {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.achievement .number {
    font-size: 32px;
    font-weight: 600;
    color: #000;
    font-family: 'Poppins', sans-serif;
}

.achievement .label {
    font-size: 14px;
    color: #666;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

/* Team Specialties */
.team-specialties {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.specialty {
    padding: 8px 16px;
    background: #000;
    color: white;
    font-size: 14px;
    font-weight: 400;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .team-showcase,
    .team-showcase.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .team-showcase.reverse .team-content,
    .team-showcase.reverse .team-image-large {
        order: unset;
    }
    
    .team-content {
        height: auto;
    }
    
    .team-image-large img,
    .placeholder-team {
        height: 300px;
    }
    
    .team-header h3 {
        font-size: 28px;
    }
    
    .team-achievements {
        justify-content: center;
        gap: 24px;
        flex-direction: column;
    }
    
    .team-specialties {
        justify-content: center;
    }
}
/* Professional Tesla Values */
.tesla-values {
    padding: 60px 0;
    background: #000;
    color: white;
    position: relative;
    overflow: hidden;
}

.tesla-values::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.1) 0%, rgba(15, 23, 42, 0.1) 100%);
    z-index: 1;
}

.tesla-values .container {
    position: relative;
    z-index: 2;
}

.tesla-values h2 {
    font-size: 48px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 80px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
}

.values-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.value-card {
    padding: 50px 40px;
    text-align: center;
  
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.6s ease;
}

.value-card:hover::before {
    left: 100%;
}

.value-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Professional Icon Styling */
.card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 32px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s ease;
}

.value-card:hover .card-icon {
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* Icon Designs */
.icon-precision::before {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid white;
    border-radius: 50%;
    position: relative;
}

.icon-precision::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-bridge::before {
    content: '';
    width: 40px;
    height: 3px;
    background: white;
    position: relative;
    border-radius: 2px;
}

.icon-bridge::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid white;
    border-radius: 50%;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    background: transparent;
}

.icon-velocity::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    position: relative;
}

.icon-velocity::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 3px;
    background: white;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    border-radius: 2px;
}

.icon-innovation::before {
    content: '';
    width: 28px;
    height: 28px;
    border: 3px solid white;
    transform: rotate(45deg);
    position: relative;
    border-radius: 4px;
}

.icon-innovation::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    border-radius: 2px;
}

.value-card h3 {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.01em;
}

.value-card p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

/* Responsive Design */
@media (max-width: 768px) {
    .values-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .value-card {
        padding: 40px 30px;
    }
    
    .tesla-values h2 {
        font-size: 36px;
    }
}
/* Global Presence */
.global-presence {
    padding: 120px 0;
    background: #fff;
}

.global-presence h2 {
    font-size: 48px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 80px;
    color: #000;
    font-family: 'Poppins', sans-serif;
}

.presence-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    align-items: center;
}

.presence-image img {
    width: 100%;
    height: 400px;
    object-fit: contain; /* Change from cover to contain */
    object-position: center;
}
.location-group {
    margin-bottom: 40px;
}

.location-group h4 {
    font-size: 24px;
    font-weight: 400;
    color: #000;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.location-group ul {
    list-style: none;
}

.location-group li {
    font-size: 18px;
    color: #666;
    padding: 8px 0;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

.coming-soon {
    font-size: 12px;
    color: #999;
    font-style: italic;
}

/* Tesla CTA */
.tesla-cta {
    padding: 120px 0;
    background: #000;
    color: white;
    text-align: center;
}

.tesla-cta h2 {
    font-size: 56px;
    font-weight: 300;
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

.tesla-cta p {
    font-size: 20px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 48px;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

.tesla-btn {
    display: inline-block;
    padding: 16px 40px;
    background: white;
    color: black;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    border-radius: 0;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    border: 2px solid white;
}

.tesla-btn:hover {
    background: transparent;
    color: white;
    border-color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tesla-hero-content h1 {
        font-size: 48px;
    }
    
    .tesla-hero-content p {
        font-size: 18px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .stat-item h3 {
        font-size: 40px;
    }
    
    .mission-content h2 {
        font-size: 36px;
    }
    
    .team-showcase,
    .team-showcase.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .team-showcase.reverse .team-content,
    .team-showcase.reverse .team-image-large {
        order: unset;
    }
    
    .team-image-large img,
    .placeholder-team {
        height: 300px;
    }
    
    .team-header h3 {
        font-size: 28px;
    }
    
    .values-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .presence-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .tesla-cta h2 {
        font-size: 36px;
    }
    
    .tesla-hero,
    .tesla-team,
    .tesla-mission,
    .tesla-values,
    .global-presence,
    .tesla-cta {
        padding: 80px 0;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .team-achievements {
        flex-direction: column;
        gap: 20px;
    }
    
    .team-specialties {
        justify-content: center;
    }
}



/* Compact Services Page Styles */

/* Services Hero */
.services-hero {
    padding: 50px 0 30px;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--dark-navy) 100%);
    color: var(--white);
    text-align: center;
}

.services-hero h1 {
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

.hero-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
}

/* Services Overview */
.services-overview {
    padding: 40px 0;
    background: var(--white);
    text-align: center;
}

.overview-content h2 {
    font-size: 28px;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.overview-content p {
    font-size: 15px;
    color: var(--medium-gray);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
}

/* Main Services */
.main-services {
    padding: 40px 0;
    background: var(--off-white);
}

.service-region {
    margin-bottom: 50px;
}

.service-region:last-child {
    margin-bottom: 0;
}

.region-header {
    text-align: center;
    margin-bottom: 30px;
}

.region-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 8px;
}

.region-flag {
    width: 32px;
    height: 22px;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.region-header h2 {
    font-size: 24px;
    color: var(--dark-navy);
    font-weight: 600;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.region-header p {
    font-size: 14px;
    color: var(--medium-gray);
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Service Content Grid */
.service-content {
    width: 100%;
}

.service-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 800px;
    margin: 0 auto;
}

.service-column h3 {
    font-size: 14px;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--accent-orange, #f59e0b);
    padding-bottom: 6px;
    display: block;
    width: 100%;
    font-family: 'Poppins', sans-serif;
}

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

.service-list li {
    padding: 6px 0;
    padding-left: 0;
    position: relative;
    font-size: 13px;
    color: var(--medium-gray);
    transition: color 0.3s ease;
    font-family: 'Poppins', sans-serif;
    text-indent: 16px;
}

.service-list li:hover {
    color: var(--dark-navy);
}

.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: var(--primary-navy);
    border-radius: 50%;
}

/* Remove image styles since no longer needed */

/* Distribution Services */
.distribution-services {
    padding: 40px 0;
    background: var(--white);
}

.distribution-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    align-items: center;
}

.distribution-info h2 {
    font-size: 24px;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.distribution-info .lead {
    font-size: 16px;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}

.distribution-info p {
    font-size: 14px;
    color: var(--medium-gray);
    line-height: 1.6;
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

.distribution-features {
    display: grid;
    gap: 16px;
}

.feature h4 {
    font-size: 14px;
    color: var(--dark-navy);
    margin-bottom: 4px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.feature p {
    font-size: 12px;
    color: var(--medium-gray);
    margin: 0;
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
}

.distribution-image img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* Process Section */
.process-section {
    padding: 40px 0;
    background: var(--off-white);
}

.process-section h2 {
    font-size: 24px;
    color: var(--dark-navy);
    text-align: center;
    margin-bottom: 30px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.step {
    text-align: center;
    padding: 20px 16px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.step-number {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 12px;
    border: 2px solid var(--primary-navy);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-family: 'Poppins', sans-serif;
}

.step h3 {
    font-size: 14px;
    color: var(--dark-navy);
    margin-bottom: 8px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.step p {
    font-size: 12px;
    color: var(--medium-gray);
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

/* Services CTA */
.services-cta {
    padding: 40px 0;
    background: var(--dark-navy);
    color: var(--white);
    text-align: center;
}

.services-cta h2 {
    font-size: 24px;
    color: var(--white);
    margin-bottom: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.services-cta p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

.btn-minimal {
    display: inline-block;
    padding: 12px 24px;
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.btn-minimal-frontpage {
    margin-top: 20px;
        display: inline-block;
    padding: 12px 24px;
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.btn-minimal:hover {
    background: var(--white);
    color: var(--dark-navy);
}

.btn-minimal-frontpage:hover {
      background: var(--white);
    color: var(--dark-navy);
}

/* Responsive Design */
@media (max-width: 768px) {
    .services-hero h1 {
        font-size: 28px;
    }
    
    .hero-subtitle {
        font-size: 14px;
    }
    
    .region-title {
        flex-direction: column;
        gap: 8px;
    }
    
    .service-content,
    .distribution-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .service-lists {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .process-steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .main-services,
    .distribution-services,
    .process-section,
    .services-cta {
        padding: 30px 0;
    }
    
    .service-region {
        margin-bottom: 30px;
    }
    
    .services-overview {
        padding: 30px 0;
    }
}

@media (max-width: 480px) {
    .service-lists {
        gap: 20px;
    }
    
    .service-content,
    .distribution-content {
        gap: 20px;
    }
}


/* Contact Page Styles */

/* Contact Hero */
.contact-hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--dark-navy) 100%);
    color: var(--white);
    text-align: center;
}

.contact-hero-content h1 {
    font-size: 64px;
    font-weight: 600;
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

.contact-hero .hero-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

/* Contact Main */
.contact-main {
    padding: 100px 0;
    background: var(--white);
}

.contact-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
}

/* Contact Form Section */
.contact-form-section h2 {
    font-size: 40px;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.contact-form-section p {
    font-size: 18px;
    color: var(--medium-gray);
    margin-bottom: 40px;
    font-family: 'Poppins', sans-serif;
}

.contact-form {
    max-width: 600px;
    background: var(--white);
    padding: 48px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    border: 1px solid var(--light-gray);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 28px;
}

.form-group label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 18px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    background: #fafafa;
    color: var(--dark-navy);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-navy);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
    font-style: italic;
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.btn-submit {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--dark-navy) 100%);
    color: var(--white);
    padding: 20px 40px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 41, 59, 0.3);
}

.btn-submit:active {
    transform: translateY(0);
}

/* Contact Information */
.contact-info {
    background: var(--off-white);
    padding: 40px;
    border-radius: 16px;
    height: fit-content;
}

.info-section {
    margin-bottom: 40px;
}

.info-section:last-child {
    margin-bottom: 0;
}

.info-section h3 {
    font-size: 24px;
    color: var(--dark-navy);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.contact-icon {
    font-size: 24px;
    width: 40px;
    text-align: center;
}

.contact-details {
    display: flex;
    flex-direction: column;
}

.contact-details .label {
    font-size: 12px;
    color: var(--medium-gray);
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.contact-details .value {
    font-size: 16px;
    color: var(--dark-navy);
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}

/* Location Groups */
.location-group {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--white);
    border-radius: 8px;
    border-left: 4px solid var(--primary-navy);
}

.location-group.upcoming {
    border-left-color: var(--medium-gray);
    opacity: 0.7;
}

.location-group h4 {
    font-size: 16px;
    color: var(--dark-navy);
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.location-group p {
    font-size: 14px;
    color: var(--medium-gray);
    margin: 0;
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
}

/* Response Info */
.response-info {
    background: var(--white);
    padding: 24px;
    border-radius: 8px;
}

.response-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--light-gray);
}

.response-item:last-child {
    border-bottom: none;
}

.response-item .time {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-navy);
    font-family: 'Poppins', sans-serif;
}

.response-item .description {
    font-size: 14px;
    color: var(--medium-gray);
    font-family: 'Poppins', sans-serif;
    text-align: right;
}

/* Office Section */
.office-section {
    padding: 100px 0;
    background: var(--off-white);
}

.office-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.office-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.office-info h2 {
    font-size: 40px;
    color: var(--dark-navy);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

.office-info p {
    font-size: 16px;
    color: var(--medium-gray);
    line-height: 1.6;
    margin-bottom: 32px;
    font-family: 'Poppins', sans-serif;
}

.office-features {
    margin-bottom: 32px;
}

.feature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.feature-icon {
    font-size: 20px;
}

.office-note {
    font-size: 14px;
    color: var(--medium-gray);
    font-style: italic;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* FAQ Section */
.faq-section {
    padding: 100px 0;
    background: var(--white);
}

.faq-section h2 {
    font-size: 48px;
    color: var(--dark-navy);
    text-align: center;
    margin-bottom: 80px;
    font-family: 'Poppins', sans-serif;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.faq-item {
    background: var(--off-white);
    padding: 32px;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-4px);
}

.faq-item h3 {
    font-size: 20px;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.faq-item p {
    font-size: 16px;
    color: var(--medium-gray);
    line-height: 1.6;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Contact CTA */
.contact-cta {
    padding: 100px 0;
    background: var(--dark-navy);
    color: var(--white);
    text-align: center;
}

.contact-cta h2 {
    font-size: 48px;
    color: var(--white);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

.contact-cta p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
    font-family: 'Poppins', sans-serif;
}

.contact-cta .btn-minimal {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

.contact-cta .btn-minimal:hover {
    background: var(--white);
    color: var(--dark-navy);
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-hero-content h1 {
        font-size: 48px;
    }
    
    .contact-hero .hero-subtitle {
        font-size: 18px;
    }
    
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .contact-info {
        padding: 30px;
    }
    
    .office-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .office-image img {
        height: 300px;
    }
    
    .contact-form-section h2,
    .office-info h2,
    .faq-section h2,
    .contact-cta h2 {
        font-size: 36px;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .response-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .response-item .description {
        text-align: left;
    }
    
    .contact-main,
    .office-section,
    .faq-section,
    .contact-cta {
        padding: 80px 0;
    }
}

@media (max-width: 480px) {
    .contact-info {
        padding: 20px;
    }
    
    .location-group {
        padding: 16px;
    }
    
    .faq-item {
        padding: 24px;
    }
}




/* Complete Subsidiaries Page Styles */

/* Subsidiaries Hero */
.subsidiaries-hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--dark-navy) 100%);
    color: var(--white);
    text-align: center;
}

.subsidiaries-hero-content h1 {
    font-size: 64px;
    font-weight: 600;
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

.subsidiaries-hero .hero-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

/* Group Overview */
.group-overview {
    padding: 100px 0;
    background: var(--white);
    text-align: center;
}

.overview-content h2 {
    font-size: 48px;
    color: var(--dark-navy);
    margin-bottom: 32px;
    font-family: 'Poppins', sans-serif;
}

.overview-content .lead-text {
    font-size: 22px;
    color: var(--dark-navy);
    margin-bottom: 24px;
    font-weight: 500;
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.overview-content p {
    font-size: 18px;
    color: var(--medium-gray);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
}

/* Subsidiary Details */
.subsidiary-detail {
    padding: 100px 0;
}

.subsidiary-detail.advisory {
    background: var(--off-white);
}

.subsidiary-detail.asia-group {
    background: var(--white);
}

.subsidiary-detail.entertainment {
    background: var(--off-white);
}

.subsidiary-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    align-items: start;
}

.subsidiary-layout.reverse {
    grid-template-columns: 2fr 1fr;
}

.subsidiary-layout.reverse .subsidiary-content {
    order: 2;
}

.subsidiary-layout.reverse .subsidiary-visual {
    order: 1;
}

/* Subsidiary Headers */
.subsidiary-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
}

.logo-container {
    flex-shrink: 0;
}

.subsidiary-logo {
    width: 100%;
    max-width: 200px;
    height: 150px; /* Fixed height for consistent alignment */
    display: flex;
    align-items: center;
    justify-content: center;
   margin: 0 auto 28px auto;
   
    border-radius: 8px;
    padding: 16px;
}

.subsidiary-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Maintain aspect ratio */
    object-position: center;
    
}

.subsidiary-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.subsidiary-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.header-text h2 {
    font-size: 40px;
    color: var(--dark-navy);
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.tagline {
    font-size: 18px;
    color: var(--medium-gray);
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

/* Asia Group Stats */
.asia-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 40px;
    padding: 40px 0;
}

.stat-card {
    background: var(--white);
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid var(--light-gray);
    transition: transform 0.3s ease;
}

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

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
}

.stat-icon.pink { background: #fce7f3; }
.stat-icon.green { background: #dcfce7; }
.stat-icon.blue { background: #dbeafe; }
.stat-icon.yellow { background: #fef3c7; }
.stat-icon.light-green { background: #d1fae5; }

.stat-card h4 {
    font-size: 18px;
    color: var(--dark-navy);
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.stat-card p {
    font-size: 14px;
    color: var(--medium-gray);
    line-height: 1.4;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Subsidiary Content */
.subsidiary-description .lead {
    font-size: 20px;
    color: var(--dark-navy);
    margin-bottom: 40px;
    font-weight: 500;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

.subsidiary-description h3 {
    font-size: 28px;
    color: var(--dark-navy);
    margin: 40px 0 24px;
    font-family: 'Poppins', sans-serif;
}

.subsidiary-description h4 {
    font-size: 20px;
    color: var(--dark-navy);
    margin: 24px 0 16px;
    font-family: 'Poppins', sans-serif;
}

.subsidiary-description p {
    font-size: 16px;
    color: var(--medium-gray);
    line-height: 1.6;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--light-gray);
    font-family: 'Poppins', sans-serif;
}

.service-item .icon {
    font-size: 20px;
}

/* Achievements */
.achievements {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.achievement {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.achievement .number {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-navy);
    font-family: 'Poppins', sans-serif;
}

.achievement .label {
    font-size: 14px;
    color: var(--medium-gray);
    font-family: 'Poppins', sans-serif;
}

/* Expertise Grid */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 40px;
}

.expertise-category {
    background: var(--white);
    padding: 32px;
    border-radius: 12px;
    border: 1px solid var(--light-gray);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expertise-category:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

.expertise-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
}

.blue-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; }
.teal-icon { background: linear-gradient(135deg, #14b8a6, #0d9488); color: white; }
.orange-icon { background: linear-gradient(135deg, #f97316, #ea580c); color: white; }
.pink-icon { background: linear-gradient(135deg, #ec4899, #be185d); color: white; }
.cyan-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); color: white; }
.purple-icon { background: linear-gradient(135deg, #00792c, #3aed7c); color: white; }

.expertise-category h4 {
    font-size: 20px;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.expertise-category ul {
    list-style: none;
    padding: 0;
}

.expertise-category li {
    font-size: 14px;
    color: var(--medium-gray);
    padding: 6px 0;
    position: relative;
    padding-left: 20px;
    font-family: 'Poppins', sans-serif;
}

.expertise-category li::before {
    content: "✓";
    color: var(--primary-navy);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Entertainment Services Detailed */
.entertainment-services-detailed {
    margin-bottom: 40px;
}

.service-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.service-detail {
    background: var(--white);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--light-gray);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.service-detail h4 {
    font-size: 16px;
    color: var(--primary-navy);
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-detail p {
    font-size: 14px;
    color: var(--medium-gray);
    line-height: 1.5;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Consulting Section */
.consulting-section {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    padding: 32px;
    border-radius: 16px;
    text-align: center;
    margin: 40px 0;
    color: var(--white);
}

.consulting-title {
    font-size: 24px;
    color: var(--white);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.consulting-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

/* Testimonial Section */
.testimonial-section {
    background: var(--off-white);
    padding: 40px;
    border-radius: 16px;
    margin-top: 40px;
}

.testimonial-content {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.testimonial-image {
    flex-shrink: 0;
}

.testimonial-image img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--white);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.testimonial-text h5 {
    font-size: 12px;
    color: var(--primary-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.testimonial-text blockquote {
    font-size: 16px;
    color: var(--dark-navy);
    line-height: 1.6;
    margin: 0 0 16px 0;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    position: relative;
    padding-left: 24px;
}

.testimonial-text blockquote::before {
    content: '"';
    font-size: 48px;
    color: var(--primary-navy);
    position: absolute;
    left: -8px;
    top: -8px;
    font-family: 'Poppins', sans-serif;
}

.testimonial-text cite {
    font-size: 14px;
    color: var(--medium-gray);
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
}

/* Visual Cards */
.visual-card {
    background: var(--white);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    border: 1px solid var(--light-gray);
    position: sticky;
    top: 120px;
}

.visual-card h3 {
    font-size: 24px;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.visual-card p {
    font-size: 16px;
    color: var(--medium-gray);
    line-height: 1.6;
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

/* Visual Stats */
.visual-stats,
.entertainment-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat,
.ent-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: var(--dark-navy);
}

/* Asia Highlights */
.asia-highlights,
.entertainment-highlights {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

.highlight {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.highlight-icon {
    font-size: 24px;
    margin-top: 4px;
}

.highlight strong {
    font-size: 16px;
    color: var(--dark-navy);
    font-family: 'Poppins', sans-serif;
    margin-bottom: 4px;
    display: block;
}

.highlight p {
    font-size: 14px;
    color: var(--medium-gray);
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Brand Showcase */
.brand-showcase {
    padding: 100px 0;
    background: var(--white);
}

.brand-showcase h2 {
    font-size: 48px;
    color: var(--dark-navy);
    text-align: center;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.showcase-subtitle {
    font-size: 18px;
    color: var(--medium-gray);
    text-align: center;
    margin-bottom: 60px;
    font-family: 'Poppins', sans-serif;
}

.brand-slider {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.brand-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    width: 100%;
    text-align: center;
}

.brand-slide.active {
    display: block;
    opacity: 1;
}

.brand-slide img {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.brand-slide img:hover {
    transform: scale(1.02);
}

/* Navigation Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    border: 2px solid var(--primary-navy);
    color: var(--primary-navy);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.slider-arrow:hover {
    background: var(--primary-navy);
    color: var(--white);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 25px rgba(30, 41, 59, 0.3);
}

.prev-arrow {
    left: -30px;
}

.next-arrow {
    right: -30px;
}

/* Slider Navigation */
.slider-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 50px;
}

.nav-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--primary-navy);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-dot.active {
    background: var(--primary-navy);
    transform: scale(1.3);
}

.nav-dot:hover {
    background: var(--medium-gray);
    border-color: var(--medium-gray);
}

/* Synergy Section */
.synergy-section {
    padding: 100px 0;
    background: var(--white);
}

.synergy-content {
    text-align: center;
}

.synergy-content h2 {
    font-size: 48px;
    color: var(--dark-navy);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

.synergy-lead {
    font-size: 20px;
    color: var(--medium-gray);
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

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

.synergy-item {
    text-align: center;
    padding: 32px;
}

.synergy-icon {
    font-size: 48px;
    margin-bottom: 24px;
}

.synergy-item h3 {
    font-size: 22px;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.synergy-item p {
    font-size: 16px;
    color: var(--medium-gray);
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
}

/* Subsidiaries CTA */
.subsidiaries-cta {
    padding: 100px 0;
    background: var(--dark-navy);
    color: var(--white);
    text-align: center;
}

.subsidiaries-cta h2 {
    font-size: 48px;
    color: var(--white);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
}

.subsidiaries-cta p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
    font-family: 'Poppins', sans-serif;
}

.subsidiaries-cta .btn-minimal {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

.subsidiaries-cta .btn-minimal:hover {
    background: var(--white);
    color: var(--dark-navy);
}

/* Responsive Design */
@media (max-width: 768px) {
    .subsidiaries-hero-content h1 {
        font-size: 48px;
    }
    
    .subsidiaries-hero .hero-subtitle {
        font-size: 18px;
    }
    
    .subsidiary-layout,
    .subsidiary-layout.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .subsidiary-layout.reverse .subsidiary-content,
    .subsidiary-layout.reverse .subsidiary-visual {
        order: unset;
    }
    
    .subsidiary-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .subsidiary-logo {
        width: 100px;
        max-height: 60px;
    }
    
    .asia-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .expertise-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .service-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .testimonial-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .testimonial-image img {
        width: 100px;
        height: 100px;
    }
    
    .achievements {
        justify-content: center;
        gap: 24px;
    }
    
    .visual-card {
        position: static;
        padding: 32px;
    }
    
    .asia-highlights,
    .entertainment-highlights {
        gap: 16px;
    }
    
    .brand-slider {
        padding: 40px 20px;
    }
    
    .brand-logos {
        gap: 20px;
        justify-content: center;
    }
    
    .brand-logo {
        min-width: 120px;
        height: 70px;
        padding: 16px;
    }
    
    .synergy-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .overview-content h2,
    .brand-showcase h2,
    .synergy-content h2,
    .subsidiaries-cta h2 {
        font-size: 36px;
    }
    
    .header-text h2 {
        font-size: 32px;
    }
    
    .subsidiary-detail,
    .group-overview,
    .brand-showcase,
    .synergy-section,
    .subsidiaries-cta {
        padding: 80px 0;
    }
}

@media (max-width: 480px) {
    .asia-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .stat-card {
        padding: 20px;
    }
    
    .expertise-category {
        padding: 24px;
    }
    
    .service-detail {
        padding: 20px;
    }
    
    .consulting-section {
        padding: 24px;
    }
    
    .testimonial-section {
        padding: 24px;
    }
    
    .brand-slider {
        padding: 30px 15px;
    }
    
    .brand-logos {
        gap: 15px;
    }
    
    .brand-logo {
        min-width: 100px;
        height: 60px;
        padding: 12px;
    }
    
    .visual-card {
        padding: 24px;
    }
    
    .synergy-item {
        padding: 24px;
    }
    
    .testimonial-text blockquote {
        font-size: 15px;
        padding-left: 20px;
    }
}

/* Enhanced Preloader Styles - Replace your existing preloader CSS with this */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use both vh and fallback for better mobile support */
    min-height: 100vh;
    min-height: -webkit-fill-available; /* Safari mobile fix */
    background: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
    /* Prevent scrolling */
    overflow: hidden;
    /* Ensure it covers everything */
    -webkit-overflow-scrolling: touch;
}

/* Fix for mobile browsers with dynamic viewport */
@supports (-webkit-touch-callout: none) {
    #preloader {
        min-height: -webkit-fill-available;
        height: -webkit-fill-available;
    }
}

.loader {
    text-align: center;
    max-width: 300px;
    width: 90%;
    padding: 20px;
    /* Add positioning context */
    position: relative;
    /* Ensure it's centered even if flex fails */
    margin: auto;
    /* Vertical centering backup */
    top: 50%;
    transform: translateY(-50%);
}

.ysis-logo {
    margin-bottom: 30px;
    /* Prevent image overflow */
    width: 100%;
    display: flex;
    justify-content: center;
}

.ysis-logo img {
    width: 120px;
    height: auto;
    max-width: 100%;
    /* Prevent image from being too large on small screens */
    max-height: 80px;
    animation: pulse 2s infinite;
    /* Ensure image loads properly */
    object-fit: contain;
}

.loading-bar {
    width: 200px;
    max-width: 80vw; /* Responsive width */
    height: 4px;
    background: var(--light-gray);
    border-radius: 2px;
    overflow: hidden;
    margin: 20px auto;
    /* Add subtle shadow for better visibility */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.loading-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-navy), var(--dark-navy));
    width: 0%;
    animation: loading 3s ease-in-out infinite;
    border-radius: 2px;
    /* Smooth animation */
    transition: width 0.3s ease;
}

.loader p {
    color: var(--medium-gray);
    font-size: 14px;
    margin-top: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    /* Ensure text is readable */
    line-height: 1.4;
}

/* Animations */
@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1); 
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.05); 
    }
}

@keyframes loading {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
    #preloader {
        /* Force full height on mobile */
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100); /* Use CSS custom property for accurate vh */
        min-height: 500px; /* Minimum height fallback */
    }
    
    .loader {
        max-width: 280px;
        width: 85%;
        padding: 15px;
        /* Adjust positioning for smaller screens */
        top: 45%;
    }
    
    .ysis-logo img {
        width: 100px;
        max-height: 70px;
    }
    
    .loading-bar {
        width: 180px;
        max-width: 75vw;
        height: 3px;
    }
    
    .loader p {
        font-size: 13px;
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    .loader {
        max-width: 250px;
        width: 80%;
        top: 40%;
    }
    
    .ysis-logo img {
        width: 80px;
        max-height: 60px;
    }
    
    .loading-bar {
        width: 150px;
        max-width: 70vw;
    }
    
    .loader p {
        font-size: 12px;
    }
}

/* Landscape orientation fix */
@media (max-width: 768px) and (orientation: landscape) {
    .loader {
        top: 35%;
        max-width: 200px;
    }
    
    .ysis-logo {
        margin-bottom: 20px;
    }
    
    .ysis-logo img {
        width: 70px;
        max-height: 50px;
    }
    
    .loading-bar {
        margin: 15px auto;
    }
    
    .loader p {
        margin-top: 10px;
    }
}

/* Hide preloader when loaded */
.loaded #preloader {
    opacity: 0;
    pointer-events: none;
    /* Smooth fade out */
    transition: opacity 0.5s ease;
}

/* Initially hide main content */
body:not(.loaded) .site-header,
body:not(.loaded) main,
body:not(.loaded) .site-footer {
    opacity: 0;
}

.loaded .site-header,
.loaded main,
.loaded .site-footer {
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Prevent scrolling while preloader is active */
body:not(.loaded) {
    overflow: hidden;
    height: 100vh;
}

/* Fix for iOS Safari address bar */
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
    #preloader {
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
    }
}

/* Add these styles to your existing styles.css file */

/* Mobile Navigation Styles - Add after your existing header styles */

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    position: relative;
}

.hamburger {
    display: block;
    width: 24px;
    height: 18px;
    position: relative;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--dark-navy);
    margin: 4px 0;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* Enhanced Responsive Styles */
@media (max-width: 768px) {
    /* Show mobile menu button */
    .mobile-menu-btn {
        display: block;
    }
    
    /* Hide/Transform main navigation */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--white);
        z-index: 1000;
        transition: right 0.3s ease;
        padding: 100px 0 0;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        overflow-y: auto;
    }
    
    .main-nav.active {
        right: 0;
    }
    
    /* Mobile menu styling */
    .nav-menu {
        flex-direction: column;
        gap: 0;
        padding: 0 24px;
    }
    
    .nav-menu li {
        border-bottom: 1px solid var(--light-gray);
    }
    
    .nav-menu li:last-child {
        border-bottom: none;
    }
    
    .nav-menu li a {
        display: block;
        padding: 16px 0;
        font-size: 16px;
        color: var(--dark-navy);
        font-weight: 500;
    }
    
    .nav-menu li a:hover {
        color: var(--primary-navy);
        background: var(--off-white);
        margin: 0 -24px;
        padding-left: 24px;
        padding-right: 24px;
    }
    
    /* Hamburger animation */
    .mobile-menu-btn.active .hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .mobile-menu-btn.active .hamburger span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-btn.active .hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
        height: 100vh;
    }
    
    /* Header adjustments */
    .site-header .container {
        position: relative;
    }
    
    /* Logo adjustments */
    .site-logo {
        height: 45px;
        max-width: 150px;
    }
    
    /* Hero section mobile fixes */
    .hero-content h1 {
        font-size: 48px;
    }
    
    .hero-subtitle {
        font-size: 18px;
        padding: 0 20px;
    }
    
    /* Container padding adjustments */
    .container {
        padding: 0 16px;
    }
    
    /* Grid layouts to single column */
    .two-column,
    .services-intro,
    .focus-layout,
    .presence-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Font size adjustments */
    .column-left h2,
    .services-content h2,
    .focus-content h2,
    .global-content h2 {
        font-size: 36px;
        text-align: center;
    }
    
    /* Stats grid responsive */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    /* Services columns */
    .services-columns {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Subsidiary cards */
    .subsidiaries-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Team showcase */
    .team-showcase,
    .team-showcase.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .team-showcase.reverse .team-content,
    .team-showcase.reverse .team-image-large {
        order: unset;
    }
    
    /* Values cards */
    .values-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Founder profile adjustments */
    .founder-profile img {
        width: 150px;
        height: 150px;
    }
    
    /* Image height adjustments */
    .services-image img,
    .focus-image img,
    .global-image img {
        height: 250px;
    }
    
    /* Padding adjustments for sections */
    .about-section,
    .services-section,
    .focus-section,
    .global-section,
    .subsidiaries-section,
    .contact-section,
    .tesla-hero,
    .tesla-team,
    .tesla-mission,
    .tesla-values,
    .global-presence,
    .tesla-cta {
        padding: 60px 0;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    /* Even smaller adjustments */
    .container {
        padding: 0 12px;
    }
    
    .hero-content h1 {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    /* Single column stats */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Font size reductions */
    .column-left h2,
    .services-content h2,
    .focus-content h2,
    .global-content h2 {
        font-size: 28px;
    }
    
    /* Mobile menu adjustments */
    .main-nav {
        width: 100%;
        right: -100%;
    }
    
    .main-nav.active {
        right: 0;
    }
    
    /* Smaller padding for mobile */
    .about-section,
    .services-section,
    .focus-section,
    .global-section,
    .subsidiaries-section,
    .contact-section {
        padding: 40px 0;
    }
    
    /* Team achievements stack */
    .team-achievements {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    /* Team specialties center */
    .team-specialties {
        justify-content: center;
    }
    
    /* Process steps single column */
    .process-steps {
        grid-template-columns: 1fr;
    }
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        min-height: 500px;
    }
    
    .hero-content h1 {
        font-size: 42px;
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-menu li a {
        padding: 20px 0;
        font-size: 18px;
    }
    
    .mobile-menu-btn {
        padding: 12px;
    }
    
    .hamburger {
        width: 28px;
        height: 21px;
    }
    
    /* Remove hover effects on touch devices */
    .subsidiary-card:hover,
    .value-card:hover,
    .expertise-category:hover {
        transform: none;
    }
    
    /* Improve button sizing */
    .btn-minimal {
        padding: 18px 36px;
        font-size: 16px;
        min-height: 44px;
    }
}

/* Fix for very large text settings */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }
    
    .main-nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    
    .nav-menu {
        flex-direction: row !important;
        gap: 48px !important;
        padding: 0 !important;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .site-logo,
    .footer-logo-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .mobile-nav,
    .mobile-overlay,
    .hamburger span,
    .mobile-menu-btn.active .hamburger span {
        transition: none;
    }
    
    .hero-content h1,
    .counter,
    .loading-progress {
        animation: none;
    }
}

/* Focus styles for better accessibility */
.mobile-menu-btn:focus {
    outline: 2px solid var(--primary-navy);
    outline-offset: 2px;
}

.nav-menu a:focus {
    outline: 2px solid var(--primary-navy);
    outline-offset: 2px;
    background: var(--off-white);
}

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}



/* Base animation classes */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation variations */
.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered animations for grid items */
.stagger-animation .fade-in:nth-child(1) { transition-delay: 0.1s; }
.stagger-animation .fade-in:nth-child(2) { transition-delay: 0.2s; }
.stagger-animation .fade-in:nth-child(3) { transition-delay: 0.3s; }
.stagger-animation .fade-in:nth-child(4) { transition-delay: 0.4s; }
.stagger-animation .fade-in:nth-child(5) { transition-delay: 0.5s; }
.stagger-animation .fade-in:nth-child(6) { transition-delay: 0.6s; }

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .fade-in-left,
    .fade-in-right,
    .fade-in-up,
    .fade-in-scale {
        transition: none;
        opacity: 1;
        transform: none;
    }
}








/* Professional Footer with Dark Background */
.site-footer {
    background: var(--dark-navy);
    color: var(--white);
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-main {
    padding: 80px 0 60px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

/* Company Info Styling */
.footer-logo-img {
    height: 60px;
    width: auto;
    margin-bottom: 24px;
}

.company-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 40px;
    font-family: 'Poppins', sans-serif;
}

.contact-info-grid {
    display: grid;
    gap: 32px;
}

.contact-block h4 {
    font-size: 14px;
    color: var(--white);
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Poppins', sans-serif;
}

.contact-block a {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 15px;
    margin-bottom: 4px;
    transition: color 0.2s ease;
    font-family: 'Poppins', sans-serif;
}

.contact-block a:hover {
    color: var(--white);
    text-decoration: underline;
}

.contact-block p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    margin: 0;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

.address-block p:first-of-type {
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

/* Professional Form Styling */
.form-header {
    margin-bottom: 32px;
}

.form-header h3 {
    font-size: 28px;
    color: var(--white);
    font-weight: 600;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.form-header p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.professional-contact-form {
    background: #ffffff;
    padding: 40px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

.form-field label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.form-field input,
.form-field select,
.form-field textarea {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
    color: #1f2937;
    transition: all 0.2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #1e293b;
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
}

.form-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}

.form-field textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-professional-submit {
    background: #1e293b;
    color: #ffffff;
    padding: 16px 32px;
    border: none;
    margin-top: 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
    width: 100%;
}

.btn-professional-submit:hover {
    background: #0f172a;
    transform: translateY(-1px);
}

/* Footer Bottom */
.footer-bottom {
    background: rgba(0, 0, 0, 0.3);
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.footer-bottom p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.footer-links {
    display: flex;
    gap: 32px;
}

.footer-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
    font-family: 'Poppins', sans-serif;
}

.footer-links a:hover {
    color: var(--white);
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .professional-contact-form {
        padding: 32px 24px;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
}







/* Professional Hero Slideshow - REPLACE existing .tesla-hero styles */
.tesla-hero {
    height: 80vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 600px;
}

/* DELETE the old .hero-background styles and replace with these: */
.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide.active {
    opacity: 1;
}

/* Update hero overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg, 
        rgba(30, 41, 59, 0.85) 0%, 
        rgba(15, 23, 42, 0.75) 30%,
        rgba(30, 41, 59, 0.80) 70%,
        rgba(15, 23, 42, 0.85) 100%
    );
    z-index: 2;
}

/* Slideshow Navigation */
.slideshow-nav {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 4;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.nav-dot.active {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.nav-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

/* Progress Bar */
.slideshow-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 4;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    width: 0%;
    transition: width 6s linear;
}

.progress-bar.animate {
    width: 100%;
}

/* Slide Counter */
.slide-counter {
    position: absolute;
    top: 40px;
    right: 40px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    z-index: 4;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    font-family: 'Poppins', sans-serif;
}

/* Content stays above slideshow */
.tesla-hero .container {
    position: relative;
    z-index: 3;
}

/* Responsive */
@media (max-width: 768px) {
    .slideshow-nav {
        bottom: 30px;
        gap: 8px;
    }
    
    .nav-dot {
        width: 10px;
        height: 10px;
    }
    
    .slide-counter {
        top: 20px;
        right: 20px;
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .slideshow-progress {
        height: 2px;
    }
}



/* Balanced Subsidiary Logo Styles */
.subsidiary-logo {
    width: auto;
    max-width: 120px; /* Smaller for desktop */
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
}

.subsidiary-logo img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Desktop adjustments */
@media (min-width: 769px) {
    .subsidiary-header {
        align-items: center; /* Better alignment on desktop */
    }
    
    .subsidiary-logo {
        max-width: 100px; /* Even smaller on large screens */
        margin: 0 0 0 0; /* Remove bottom margin on desktop */
    }
    
    .logo-container {
        flex-shrink: 0;
        margin-right: 24px;
    }
}

/* Tablet adjustments */
@media (max-width: 768px) and (min-width: 481px) {
    .subsidiary-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .subsidiary-logo {
        max-width: 140px; /* Medium size for tablets */
        margin: 0 auto 16px auto;
    }
    
    .logo-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .subsidiary-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .subsidiary-logo {
        max-width: 160px; /* Larger for mobile visibility */
        margin: 0 auto 20px auto;
    }
    
    .logo-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .header-text h2 {
        font-size: 28px; /* Adjust heading size for mobile */
    }
    
    .tagline {
        font-size: 16px;
    }
}









/* Fixed Subsidiary Cards Alignment */
.subsidiaries-grid {
    align-items: stretch;
    max-width: 900px;
    margin: 0 auto;
}



.subsidiary-card-link {
    display: block;
    height: 100%;
    text-decoration: none;
}

.subsidiary-card-aligned {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.subsidiary-card-aligned:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Individual Logo Sizing */
.logo-asia-group {
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px auto;
}

.logo-asia-group img {
    width: 100px;
    height: auto;
    max-height: 70px;
    object-fit: contain;
}

.logo-entertainment {
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px auto;
}

.logo-entertainment img {
    width: 140px;
    height: auto;
    max-height: 70px;
    object-fit: contain;
}





/* Fix for unwanted list dots */
.service-list {
    list-style: none !important;
    padding-left: 0 !important;
}

.service-list li {
    list-style: none !important;
}

/* Override any default list styling */
.service-content ul,
.service-content li {
    list-style: none !important;
}




/* Distribution Features - Better Alignment Fix */
.distribution-features {
    display: grid;
    gap: 20px;
}

.feature {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--light-gray);
    align-items: start;
}

.feature:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.feature h4 {
    font-size: 14px;
    color: var(--dark-navy);
    margin: 0;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    line-height: 1.3;
}

.feature p {
    font-size: 12px;
    color: var(--medium-gray);
    margin: 0;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .feature {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .feature {
        padding: 16px 0;
    }
    
    .feature h4 {
        font-size: 13px;
    }
    
    .feature p {
        font-size: 11px;
    }
}









/* Services Preview Section */
.services-preview {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

.services-preview .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.services-preview-header {
    text-align: center;
    margin-bottom: 60px;
}

.services-preview-header h2 {
    font-size: 2.5rem;
    font-weight: 300;
    color: #2c3e50;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    position: relative;
}

.services-preview-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #414141ff, #000000ff);
    border-radius: 1px;
}

.services-preview-header p {
    font-size: 1.1rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.service-preview-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 40px 30px;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.service-preview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #414141ff, #000000ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.service-preview-card:hover::before {
    transform: scaleX(1);
}

.service-preview-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.15);
}

.service-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid #2c3e50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2c3e50;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.service-preview-card:hover .service-number {
    background: #2c3e50;
    color: white;
}

.service-preview-card h3 {
    font-size: 1.3rem;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 15px;
    letter-spacing: -0.01em;
}

.service-preview-card p {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 0;
    font-size: 0.95rem;
}

.services-cta-container {
    text-align: center;
}

.services-cta-link {
    display: inline-block;
    padding: 12px 30px;
    background: transparent;
    color: #2c3e50;
    text-decoration: none;
    border: 2px solid #2c3e50;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}

.services-cta-link:hover {
    background: #2c3e50;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.2);
}

@media (max-width: 768px) {
    .services-preview {
        padding: 60px 0;
    }
    
    .services-preview-header h2 {
        font-size: 2rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .service-preview-card {
        padding: 30px 25px;
    }
}












/* ========================================
   MODERN SUBSIDIARIES PAGE STYLES
   Add this to the END of your styles.css
   ======================================== */

/* Modern Subsidiaries Hero */
.modern-subsidiaries-hero {
     height: 80vh;
    min-height: 600px;
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-navy) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.modern-subsidiaries-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="modern-grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23modern-grid)"/></svg>');
    opacity: 0.3;
}

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

.modern-subsidiaries-hero .hero-content h1 {
    font-size: 4.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--white);
}

.modern-subsidiaries-hero .hero-subtitle {
    font-size: 1.25rem;
    font-weight: 300;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 3rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.modern-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: modern-bounce 2s infinite;
}

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

/* Mission Statement */
.modern-subsidiaries-mission {
    padding: 8rem 0;
    background: var(--white);
    text-align: center;
}

.modern-mission-content h2 {
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 2rem;
    line-height: 1.2;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Poppins', sans-serif;
}

.modern-mission-content p {
    font-size: 1.25rem;
    color: var(--medium-gray);
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
}

/* Stats Section */
.modern-subsidiaries-stats {
    padding: 6rem 0;
    background: var(--dark-navy);
    color: var(--white);
}

.modern-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
    text-align: center;
}

.modern-stat-item h3 {
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
    color: var(--white);
    font-family: 'Poppins', sans-serif;
}

.modern-stat-item p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

/* Modern Subsidiaries Grid */
.modern-subsidiaries-showcase {
    padding: 8rem 0;
    background: var(--off-white);
}

.modern-subsidiaries-showcase-grid {
    display: grid;
    gap: 8rem;
}

.modern-subsidiary-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.modern-subsidiary-showcase.modern-reverse {
    direction: rtl;
}

.modern-subsidiary-showcase.modern-reverse > * {
    direction: ltr;
}

.modern-subsidiary-visual {
    position: relative;
}

.modern-subsidiary-image {
    width: 100%;
    height: 400px;
    background: var(--white);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    font-weight: 100;
    color: var(--medium-gray);
    border: 1px solid var(--light-gray);
    font-family: 'Poppins', sans-serif;
}

.modern-subsidiary-content h2 {
    font-size: 3rem;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
}

.modern-subsidiary-tagline {
    font-size: 1.1rem;
    color: var(--medium-gray);
    margin-bottom: 2rem;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

/* Justify text alignment for modern subsidiary descriptions */
.modern-subsidiary-description {
    font-size: 1.1rem;
    color: var(--dark-gray);
    line-height: 1.7;
    margin-bottom: 3rem;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    text-align: justify;
}

.modern-subsidiary-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.modern-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.modern-highlight-icon {
    width: 3rem;
    height: 3rem;
    background: var(--dark-navy);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.modern-highlight-text h4 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dark-navy);
    margin-bottom: 0.5rem;
    font-family: 'Poppins', sans-serif;
}

.modern-highlight-text p {
    font-size: 0.9rem;
    color: var(--medium-gray);
    font-weight: 300;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Synergy Section */
.modern-subsidiaries-synergy {
    padding: 8rem 0;
    background: var(--white);
    text-align: center;
}

.modern-synergy-content h2 {
    font-size: 3rem;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 2rem;
    font-family: 'Poppins', sans-serif;
}

.modern-synergy-description {
    font-size: 1.25rem;
    color: var(--medium-gray);
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto 4rem;
    font-family: 'Poppins', sans-serif;
}

.modern-synergy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.modern-synergy-item {
    text-align: center;
    padding: 2rem;
}

.modern-synergy-icon {
    width: 4rem;
    height: 4rem;
    background: var(--off-white);
    border: 2px solid var(--light-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--dark-navy);
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.modern-synergy-item:hover .modern-synergy-icon {
    background: var(--dark-navy);
    color: var(--white);
    border-color: var(--dark-navy);
}

.modern-synergy-item h3 {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
}

.modern-synergy-item p {
    font-size: 1rem;
    color: var(--medium-gray);
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* CTA Section */
.modern-subsidiaries-cta {
    padding: 8rem 0;
    background: var(--dark-navy);
    color: var(--white);
    text-align: center;
}

.modern-cta-content h2 {
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    color: var(--white);
    font-family: 'Poppins', sans-serif;
}

.modern-cta-content p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3rem;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

.modern-cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: transparent;
    color: var(--white);
    text-decoration: none;
    border: 2px solid var(--white);
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    border-radius: 0;
}

.modern-cta-button:hover {
    background: var(--white);
    color: var(--dark-navy);
    text-decoration: none;
}

/* Responsive Design for Modern Subsidiaries */
@media (max-width: 768px) {
    .modern-subsidiaries-hero .hero-content h1 {
        font-size: 3rem;
    }

    .modern-subsidiaries-hero .hero-subtitle {
        font-size: 1.1rem;
    }

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

    .modern-subsidiary-showcase,
    .modern-subsidiary-showcase.modern-reverse {
        grid-template-columns: 1fr;
        gap: 3rem;
        direction: initial;
    }

    .modern-subsidiary-content h2 {
        font-size: 2.5rem;
    }

    .modern-subsidiary-highlights {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .modern-synergy-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .modern-mission-content h2,
    .modern-synergy-content h2,
    .modern-cta-content h2 {
        font-size: 2.5rem;
    }

    .modern-subsidiaries-hero,
    .modern-subsidiaries-mission,
    .modern-subsidiaries-showcase,
    .modern-subsidiaries-synergy,
    .modern-subsidiaries-cta {
        padding: 4rem 0;
    }

    .modern-subsidiaries-stats {
        padding: 3rem 0;
    }

    .modern-subsidiary-image {
        height: 300px;
        font-size: 4rem;
    }
}

@media (max-width: 480px) {
    .modern-stats-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .modern-subsidiaries-hero .hero-content h1 {
        font-size: 2.5rem;
    }

    .modern-subsidiary-content h2 {
        font-size: 2rem;
    }

    .modern-mission-content h2,
    .modern-synergy-content h2,
    .modern-cta-content h2 {
        font-size: 2rem;
    }

    .modern-subsidiary-image {
        height: 250px;
        font-size: 3rem;
    }

    .modern-subsidiaries-hero,
    .modern-subsidiaries-mission,
    .modern-subsidiaries-showcase,
    .modern-subsidiaries-synergy,
    .modern-subsidiaries-cta {
        padding: 3rem 0;
    }
}

/* Accessibility improvements for modern subsidiaries */
@media (prefers-reduced-motion: reduce) {
    .modern-scroll-indicator {
        animation: none;
    }
    
    .modern-synergy-icon,
    .modern-cta-button {
        transition: none;
    }
}

/* Focus styles for modern subsidiaries */
.modern-cta-button:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .modern-subsidiary-image {
        border: 2px solid var(--dark-navy);
    }
    
    .modern-synergy-icon {
        border-width: 3px;
    }
}






/* Slideshow Styles */
.modern-subsidiary-slideshow {
    width: 100%;
    height: 400px;
    position: relative;
}

.slideshow-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--light-gray);
    border-radius: 0;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slideshow-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .modern-subsidiary-slideshow {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .modern-subsidiary-slideshow {
        height: 250px;
    }
}



/* Fix slideshow images to prevent cropping */
.slideshow-container {
    background: #f8f9fa;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .slide img {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .slide img {
        padding: 10px;
    }
}




/* Fix Entertainment section layout */
.modern-subsidiary-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.modern-subsidiary-showcase.modern-reverse {
    direction: rtl;
}

.modern-subsidiary-showcase.modern-reverse > * {
    direction: ltr;
}

/* Ensure proper responsive behavior */
@media (max-width: 768px) {
    .modern-subsidiary-showcase,
    .modern-subsidiary-showcase.modern-reverse {
        grid-template-columns: 1fr;
        gap: 3rem;
        direction: initial;
    }
}





/* Fix uneven spacing between sections */
.modern-subsidiaries-showcase-grid {
    display: grid;
    gap: 0; /* Remove the automatic gap */
}

/* Add consistent manual spacing */
.modern-subsidiary-showcase {
    padding: 4rem 0; /* Add equal padding to all sections */
    margin: 0;
}

/* Remove extra spacing from the slideshow container */
.modern-subsidiary-slideshow {
    margin: 0;
    padding: 0;
}

/* Ensure no extra spacing from the brands section */
.slideshow-container {
    margin: 0;
}

/* Force equal visual spacing regardless of content */
.modern-subsidiary-showcase:not(:last-child) {
    border-bottom: 1px solid transparent; /* Invisible separator for consistent spacing */
    margin-bottom: 4rem;
}

/* FINAL FOOTER BOTTOM FIX - Add to end of CSS */

/* Make footer-bottom span full width properly */
.footer-bottom {
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 20px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure container inside footer-bottom works properly */
.footer-bottom .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

/* Fix content alignment */
.footer-bottom-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
}

/* Ensure text is fully visible */
.footer-bottom p {
    margin: 0 !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Poppins', sans-serif !important;
    white-space: nowrap !important;
}

/* Fix links */
.footer-links {
    display: flex !important;
    gap: 24px !important;
}

.footer-links a {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-family: 'Poppins', sans-serif !important;
    white-space: nowrap !important;
}

.footer-links a:hover {
    color: var(--white) !important;
}

/* Remove any overflow constraints */
.site-footer {
    overflow: visible !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .footer-bottom-content {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }
    
    .footer-links {
        justify-content: center !important;
    }
    
    .footer-bottom p,
    .footer-links a {
        white-space: normal !important;
    }
}




/* Entertainment Expert Testimonial Section */
.entertainment-expert-section {
    padding: 6rem 0;
    background: var(--white);
}

.expert-testimonial-card {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

.expert-consulting-header {
    text-align: center;
    background: var(--dark-navy);
    color: var(--white);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 3rem;
}

.expert-consulting-header h3 {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--white);
    font-family: 'Poppins', sans-serif;
}

.expert-consulting-header p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
}

.expert-testimonial-content {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    align-items: flex-start;
}

.expert-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.expert-profile img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--white);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    margin-bottom: 1rem;
}

.expert-placeholder {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--medium-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 300;
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    border: 4px solid var(--white);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.expert-quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.expert-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--medium-gray);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
}

.expert-quote blockquote {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--dark-navy);
    margin: 0 0 1.5rem 0;
    font-style: italic;
    position: relative;
    padding-left: 2rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    text-align: justify;
}

.expert-quote blockquote::before {
    content: '"';
    font-size: 4rem;
    color: var(--primary-navy);
    position: absolute;
    left: -0.5rem;
    top: -0.5rem;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
}

.expert-quote cite {
    font-size: 0.9rem;
    color: var(--medium-gray);
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .expert-testimonial-card {
        padding: 0 1rem;
    }
    
    .expert-consulting-header {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .expert-consulting-header h3 {
        font-size: 1.5rem;
    }
    
    .expert-testimonial-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .expert-profile img,
    .expert-placeholder {
        width: 120px;
        height: 120px;
    }
    
    .expert-placeholder {
        font-size: 3rem;
    }
    
    .expert-quote blockquote {
        font-size: 1rem;
        padding-left: 1.5rem;
        text-align: left;
    }
    
    .expert-quote blockquote::before {
        font-size: 3rem;
        left: -0.3rem;
        top: -0.3rem;
    }
}

@media (max-width: 480px) {
    .entertainment-expert-section {
        padding: 4rem 0;
    }
    
    .expert-testimonial-card {
        padding: 0 0.5rem;
    }
    
    .expert-consulting-header {
        padding: 1.25rem;
    }
    
    .expert-consulting-header h3 {
        font-size: 1.25rem;
    }
    
    .expert-profile img,
    .expert-placeholder {
        width: 100px;
        height: 100px;
    }
    
    .expert-placeholder {
        font-size: 2.5rem;
    }
    
    .expert-quote blockquote {
        font-size: 0.95rem;
        padding-left: 1.25rem;
    }
    
    .expert-quote blockquote::before {
        font-size: 2.5rem;
    }
}



/* ========================================
  TEXT JUSTIFICATION FIX
  Add this to the END of your styles.css
  ======================================== */

/* Justify text alignment for even left-right edges */
.about-section .column-right p,
.focus-content p,
.subsidiary-description p,
.modern-subsidiary-description,
.tesla-mission .mission-content p,
.services-overview .overview-content p,
.group-overview .overview-content p {
   text-align: justify !important;
}

/* Mobile: keep left alignment for readability */
@media (max-width: 768px) {
   .about-section .column-right p,
   .focus-content p,
   .subsidiary-description p,
   .modern-subsidiary-description,
   .tesla-mission .mission-content p,
   .services-overview .overview-content p,
   .group-overview .overview-content p {
       text-align: left !important;
   }
}



/* ========================================
   TIMELINE SUBSIDIARIES SECTION
   Add this to the END of your styles.css
   ======================================== */
/* Hide the old subsidiaries section */
.subsidiaries-section {
    display: none;
}

/* Timeline Subsidiaries Section */
.timeline-subsidiaries-section {
    padding: 120px 0;
    background: var(--off-white);
    overflow: hidden;
}

.timeline-subsidiaries-section h2 {
    font-size: 48px;
    color: var(--dark-navy);
    text-align: center;
    margin-bottom: 80px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* Timeline Container */
.timeline-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Timeline Line */
.timeline-line {
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-navy) 0%, var(--dark-navy) 100%);
    z-index: 1;
}

/* Timeline Items Container */
.timeline-items {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    min-height: 500px;
}

/* Individual Timeline Item */
.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 240px;
    position: relative;
}

/* Timeline Years */
.timeline-year {
    background: var(--dark-navy);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(30, 41, 59, 0.3);
    font-family: 'Poppins', sans-serif;
    position: relative;
    z-index: 3;
}

/* Timeline Dots - positioned on the line */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 190px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: var(--white);
    border: 4px solid var(--primary-navy);
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 0 4px var(--white);
}

/* Logo Container */
.timeline-logo {
    width: 50px;
    height: 50px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--light-gray);
    transition: all 0.3s ease;
    position: relative;
    z-index: 3;
     transform: scale(1.1);
}

.timeline-logo:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-navy);
}

.timeline-logo img {
    max-width: 180px;
    max-height: 180px;
    object-fit: contain;
}

/* Timeline Content */
.timeline-content {
    margin-bottom: 30px;
}

.timeline-content h3 {
    font-size: 18px;
    color: var(--dark-navy);
    margin-bottom: 8px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.timeline-content p {
    font-size: 14px;
    color: var(--medium-gray);
    line-height: 1.4;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Alternating Layout - items above and below line */
.timeline-item:nth-child(odd) {
    flex-direction: column;
}

.timeline-item:nth-child(even) {
    flex-direction: column-reverse;
}

.timeline-item:nth-child(even) .timeline-year {
    margin-bottom: 0;
    margin-top: 40px;
}

.timeline-item:nth-child(even) .timeline-logo {
    margin-bottom: 0;
    margin-top: 30px;
}

.timeline-item:nth-child(even) .timeline-content {
    margin-bottom: 0;
    margin-top: 30px;
}

/* Special styling for milestone items */
.timeline-item.milestone .timeline-content h3 {
    color: var(--primary-navy);
    font-weight: 700;
}

.timeline-item.milestone::before {
    background: var(--primary-navy);
    border-color: var(--dark-navy);
}

/* Specific styling for YSIS Advisory to ensure white background */
.timeline-item:last-child .timeline-logo {
    background: var(--white) !important;
    border-color: var(--primary-navy) !important;
}

.timeline-item:last-child .timeline-logo img {
    filter: none !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .timeline-items {
        gap: 20px;
    }
    
    .timeline-item {
        max-width: 200px;
    }
    
    .timeline-logo {
        width: 80px;
        height: 80px;
    }
    
    .timeline-logo img {
        max-width: 55px;
        max-height: 55px;
    }
}

@media (max-width: 768px) {
    .timeline-subsidiaries-section {
        padding: 80px 0;
    }
    
    .timeline-subsidiaries-section h2 {
        font-size: 36px;
        margin-bottom: 60px;
    }
    
    /* Vertical timeline line for mobile */
    .timeline-line {
        top: 0;
        bottom: 0;
        left: 50px;
        right: auto;
        width: 4px;
        height: 100%;
        transform: none;
    }
    
    .timeline-items {
        flex-direction: column;
        gap: 80px;
        align-items: flex-start;
        min-height: auto;
        padding-left: 80px;
    }
    
    /* Mobile timeline items - stacked vertically */
    .timeline-item {
        max-width: 100%;
        width: 100%;
        flex-direction: column !important;
        align-items: flex-start;
        text-align: left;
        position: relative;
        padding-left: 0;
    }
    
    .timeline-item:nth-child(even) {
        flex-direction: column !important;
        text-align: left;
    }
    
    /* Reset all desktop margins and apply mobile structure */
    .timeline-year {
        margin-bottom: 15px;
        margin-top: 0;
        align-self: flex-start;
        font-size: 14px;
        padding: 8px 16px;
    }
    
    .timeline-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
        margin-top: 0;
        align-self: flex-start;
    }
    
    .timeline-logo img {
        max-width: 55px;
        max-height: 55px;
    }
    
    .timeline-content {
        margin-bottom: 0;
        margin-top: 0;
        width: 100%;
    }
    
    .timeline-content h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .timeline-content p {
        font-size: 15px;
        line-height: 1.6;
    }
    
    /* Mobile timeline dots - positioned on vertical line */
    .timeline-item::before {
        left: -65px;
        top: 60px;
        transform: none;
        width: 16px;
        height: 16px;
        border-width: 3px;
    }
    
    .timeline-item:nth-child(even)::before {
        left: -65px;
        right: auto;
    }
    
    /* Milestone items on mobile */
    .timeline-item.milestone::before {
        display: block;
        background: var(--primary-navy);
        border-color: var(--dark-navy);
    }
    
    /* Remove logo for milestone items on mobile too */
    .timeline-item.milestone .timeline-logo {
        display: none;
    }
    
    /* Ensure YSIS Advisory logo shows on mobile */
    .timeline-item:last-child .timeline-logo {
        display: flex !important;
    }
}

@media (max-width: 480px) {
    .timeline-item {
        max-width: 280px;
        gap: 15px;
    }
    
    .timeline-logo {
        width: 70px;
        height: 70px;
    }
    
    .timeline-logo img {
        max-width: 45px;
        max-height: 45px;
    }
    
    .timeline-year {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .timeline-content h3 {
        font-size: 16px;
    }
    
    .timeline-content p {
        font-size: 13px;
    }
}








/* ========================================
   WHAT WE DO SECTION
   Add this to the END of your styles.css
   ======================================== */

/* What We Do Section */
.what-we-do-section {
    padding: 120px 0;
    background: var(black);
    position: relative;
}

.what-we-do-header {
    text-align: center;
    margin-bottom: 80px;
}

.what-we-do-header h2 {
    font-size: 48px;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
}

.what-we-do-header .section-subtitle {
    font-size: 20px;
    color: var(--medium-gray);
    font-weight: 300;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
}

/* Primary Focus Section */
.primary-focus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
}


.focus-text h3 {
    font-size: 36px;
    font-weight: 500;
    color: var(--dark-navy);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

.focus-text p {
    font-size: 18px;
    color: var(--medium-gray);
    line-height: 1.7;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    text-align: justify;
}

/* Expansion Diagram */
.expansion-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    background: var(--off-white);
    border-radius: 16px;
    border: 2px solid var(--light-gray);
    position: relative;
}

.region {
    text-align: center;
    padding: 24px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    min-width: 140px;
}

.region h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.countries {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.countries span {
    font-size: 14px;
    color: var(--medium-gray);
    padding: 6px 12px;
    background: var(--off-white);
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.connection-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: 0 20px;
}

.bridge-line {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-navy), var(--dark-navy));
    border-radius: 2px;
    position: relative;
}

.bridge-line::before,
.bridge-line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
}

.bridge-line::before {
    left: -8px;
    border-right: 8px solid var(--primary-navy);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.bridge-line::after {
    right: -8px;
    border-left: 8px solid var(--dark-navy);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.ysis-connector {
    background: var(--dark-navy);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    margin-top: 12px;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3);
}

/* Service Pillars */
.service-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 100px;
}

.pillar-item {
    text-align: center;
    padding: 40px 20px;
    background: var(--white);
    border-radius: 0;
    transition: all 0.3s ease;
    border: 1px solid var(--light-gray);
    position: relative;
}

.pillar-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--dark-navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.pillar-item:hover::before {
    transform: scaleX(1);
}

.pillar-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Professional Pillar Icons */
.pillar-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 24px;
    border: 2px solid var(--dark-navy);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    background: transparent;
}

.pillar-item:hover .pillar-icon {
    background: var(--dark-navy);
}

/* Clean, Professional Icon Designs */
.pillar-icon::before {
    content: '';
    position: absolute;
    transition: all 0.3s ease;
}

.pillar-icon::after {
    content: '';
    position: absolute;
    transition: all 0.3s ease;
}

/* Strategy Icon - Target/Crosshair */
.pillar-icon.strategy::before {
    width: 24px;
    height: 24px;
    border: 3px solid var(--dark-navy);
    border-radius: 50%;
}

.pillar-icon.strategy::after {
    width: 8px;
    height: 8px;
    background: var(--dark-navy);
    border-radius: 50%;
}

.pillar-item:hover .pillar-icon.strategy::before {
    border-color: white;
}

.pillar-item:hover .pillar-icon.strategy::after {
    background: white;
}

/* Operations Icon - Gear */
.pillar-icon.operations::before {
    width: 26px;
    height: 26px;
    border: 3px solid var(--dark-navy);
    border-radius: 4px;
    transform: rotate(45deg);
}

.pillar-icon.operations::after {
    width: 12px;
    height: 12px;
    background: var(--dark-navy);
    border-radius: 2px;
}

.pillar-item:hover .pillar-icon.operations::before {
    border-color: white;
}

.pillar-item:hover .pillar-icon.operations::after {
    background: white;
}

/* Partnerships Icon - Connected Nodes */
.pillar-icon.partnerships::before {
    width: 8px;
    height: 8px;
    background: var(--dark-navy);
    border-radius: 50%;
    left: 16px;
    box-shadow: 20px 0 0 var(--dark-navy), 10px 15px 0 var(--dark-navy);
}

.pillar-icon.partnerships::after {
    width: 20px;
    height: 2px;
    background: var(--dark-navy);
    left: 20px;
    top: 29px;
    transform: rotate(35deg);
    border-radius: 1px;
    box-shadow: 0 -18px 0 -1px var(--dark-navy);
}

.pillar-item:hover .pillar-icon.partnerships::before {
    background: white;
    box-shadow: 20px 0 0 white, 10px 15px 0 white;
}

.pillar-item:hover .pillar-icon.partnerships::after {
    background: white;
    box-shadow: 0 -18px 0 -1px white;
}

/* Growth Icon - Arrow Up Chart */
.pillar-icon.growth::before {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid var(--dark-navy);
    top: 14px;
}

.pillar-icon.growth::after {
    width: 24px;
    height: 3px;
    background: var(--dark-navy);
    bottom: 12px;
    border-radius: 2px;
    box-shadow: -8px 6px 0 -1px var(--dark-navy), 8px -6px 0 -1px var(--dark-navy);
}

.pillar-item:hover .pillar-icon.growth::before {
    border-bottom-color: white;
}

.pillar-item:hover .pillar-icon.growth::after {
    background: white;
    box-shadow: -8px 6px 0 -1px white, 8px -6px 0 -1px white;
}

.pillar-item h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.pillar-item p {
    font-size: 15px;
    color: var(--medium-gray);
    line-height: 1.6;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

/* Methodology Section */
.methodology-section {
    text-align: center;
}

.methodology-section h3 {
    font-size: 32px;
    font-weight: 500;
    color: var(--dark-navy);
    margin-bottom: 48px;
    font-family: 'Poppins', sans-serif;
}

.methodology-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.step {
    text-align: center;
    max-width: 200px;
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--dark-navy);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    margin: 0 auto 20px;
    font-family: 'Poppins', sans-serif;
    position: relative;
}

.step h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--corporate-light-gray);
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.step p {
    font-size: 14px;
    color: var(--medium-gray);
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

.step-arrow {
    font-size: 24px;
    color: var(--medium-gray);
    font-weight: 300;
    margin: 0 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .service-pillars {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .methodology-steps {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .what-we-do-section {
        padding: 80px 0;
    }
    
    .what-we-do-header h2 {
        font-size: 36px;
    }
    
    .what-we-do-header .section-subtitle {
        font-size: 18px;
    }
    
    .primary-focus {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 80px;
    }
    
    .focus-text h3 {
        font-size: 28px;
    }
    
    .focus-text p {
        font-size: 16px;
        text-align: left;
    }
    
    .expansion-diagram {
        flex-direction: column;
        gap: 20px;
        padding: 30px 20px;
    }
    
    .connection-bridge {
        transform: rotate(90deg);
        margin: 20px 0;
    }
    
    .service-pillars {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 80px;
    }
    
    .pillar-item {
        padding: 30px 20px;
    }
    
    .methodology-section h3 {
        font-size: 28px;
        margin-bottom: 40px;
    }
    
    .methodology-steps {
        flex-direction: column;
        gap: 30px;
    }
    
    .step-arrow {
        transform: rotate(90deg);
        margin: 15px 0;
    }
}

@media (max-width: 480px) {
    .what-we-do-header {
        margin-bottom: 60px;
    }
    
    .what-we-do-header h2 {
        font-size: 28px;
    }
    
    .expansion-diagram {
        padding: 20px 15px;
    }
    
    .region {
        min-width: 120px;
        padding: 20px;
    }
    
    .pillar-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 20px;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 16px;
        margin-bottom: 16px;
    }
    
    .step h5 {
        font-size: 15px;
    }
    
    .step p {
        font-size: 13px;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .pillar-item,
    .pillar-icon,
    .step-number {
        transition: none;
    }
    
    .pillar-item:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .expansion-diagram {
        border-width: 3px;
    }
    
    .pillar-item {
        border-width: 2px;
    }


    
}







/* Timeline content text justification fix */
.timeline-content p {
   text-align: justify !important;
   text-justify: inter-word;
   hyphens: auto;
   -webkit-hyphens: auto;
   line-height: 1.5;
}

/* Mobile: revert to left alignment */
@media (max-width: 768px) {
   .timeline-content p {
       text-align: left !important;
       hyphens: none;
       -webkit-hyphens: none;
   }
}




@media (max-width: 768px) {
    .hero-section {
        height: 50vh; /* Shorter on mobile */
        min-height: 350px;
    }
    
    .hero-content h1 {
        font-size: 48px;
    }
}

@media (max-width: 480px) {
    .hero-section {
        height: 45vh; /* Even shorter on small mobile */
        min-height: 300px;
    }
}





/* Section Title Header */
.section-title-header {
    text-align: center;
    margin-bottom: 80px;
}

.main-section-title {
    font-size: 56px;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 0;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
    position: relative;
}

.main-section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-navy), var(--dark-navy));
    border-radius: 2px;
}

/* Update the existing Who We Are heading */
.column-left h3 {
    font-size: 36px;
    color: var(--dark-navy);
    font-weight: 600;
    margin-bottom: 40px;
    font-family: 'Poppins', sans-serif;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-title-header {
        margin-bottom: 60px;
    }
    
    .main-section-title {
        font-size: 42px;
    }
    
    .column-left h3 {
        font-size: 28px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .main-section-title {
        font-size: 32px;
    }
    
    .column-left h3 {
        font-size: 24px;
    }
}



.about-section .section-title {
    text-align: center;
    font-size: 48px;
    color: var(--dark-navy);
    font-weight: 600;
    margin-bottom: 60px;
    grid-column: 1 / -1; /* Spans across both columns */
    font-family: 'Poppins', sans-serif;
}




/* Timeline Logo Container - Consistent sizing */
.timeline-logo {
    width: 100px;
    height: 100px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--light-gray);
    transition: all 0.3s ease;
    position: relative;
    z-index: 3;
    /* Force consistent background and border */
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

.timeline-logo:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-navy);
}

/* Timeline Logo Images - Uniform sizing */
.timeline-logo img {
    max-width: 70px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    /* Remove any filters or effects */
    filter: none !important;
    /* Ensure proper display */
    display: block;
}

/* Specific fixes for each logo to ensure consistency */
.timeline-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.timeline-logo a img {
    max-width: 70px;
    max-height: 70px;
    object-fit: contain;
}

/* Force white background for all timeline logos */
.timeline-item .timeline-logo {
    background: #ffffff !important;
    border: 3px solid #e2e8f0 !important;
}

/* Hover state consistency */
.timeline-item .timeline-logo:hover {
    border-color: var(--primary-navy) !important;
    background: #ffffff !important;
}

/* Mobile responsive adjustments */
@media (max-width: 1200px) {
    .timeline-logo {
        width: 80px;
        height: 80px;
    }
    
    .timeline-logo img {
        max-width: 55px;
        max-height: 55px;
    }
}

@media (max-width: 768px) {
    .timeline-logo {
        width: 80px;
        height: 80px;
    }
    
    .timeline-logo img {
        max-width: 55px;
        max-height: 55px;
    }
}

@media (max-width: 480px) {
    .timeline-logo {
        width: 70px;
        height: 70px;
    }
    
    .timeline-logo img {
        max-width: 30px;
        max-height: 30px;
    }
}
















.timeline-logo {
    width: 100px;
    height: 100px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--light-gray);
    transition: all 0.3s ease;
    position: relative;
    z-index: 3;
}



.timeline-logo img,
.timeline-logo a img {
    max-width: 98px;
    max-height: 98px;
    object-fit: contain;
}





/* Professional Contact Form Section */
.professional-contact-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

.professional-contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="contact-grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(30,41,59,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23contact-grid)"/></svg>');
    opacity: 0.5;
}

.contact-form-wrapper {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

/* Form Header */
.form-header-section {
    text-align: center;
    margin-bottom: 60px;
}

.form-header-section h2 {
    font-size: 3rem;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    position: relative;
    font-family: 'Poppins', sans-serif;
}

.form-header-section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-navy), var(--dark-navy));
    border-radius: 1px;
}

.form-header-section p {
    font-size: 1.1rem;
    color: var(--medium-gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

/* Professional Form Container */
.professional-form-container {
    background: var(--white);
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(30, 41, 59, 0.1);
    position: relative;
}

.professional-form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-navy), var(--dark-navy));
    border-radius: 16px 16px 0 0;
}

/* Form Grid Layout */
.form-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 40px;
    margin-bottom: 30px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.full-width-group {
    grid-column: 1 / -1;
    margin-bottom: 40px;
}

/* Form Labels */
.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.3px;
}

/* Form Inputs */
.form-group input,
.form-group select,
.form-group textarea {
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
    color: var(--dark-navy);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 400;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-navy);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(30, 41, 59, 0.1);
    transform: translateY(-1px);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
    font-style: italic;
    font-weight: 300;
}

/* Select Dropdown */
.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 50px;
}

/* Textarea */
.form-group textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Submit Section */
.form-submit-section {
    text-align: center;
    margin-top: 20px;
}

.btn-main-submit {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--dark-navy) 100%);
    color: var(--white);
    padding: 18px 40px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Poppins', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    min-width: 200px;
    justify-content: center;
}

.btn-main-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.btn-main-submit:hover::before {
    left: 100%;
}

.btn-main-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 41, 59, 0.3);
}

.btn-main-submit:active {
    transform: translateY(0);
}

.btn-main-submit svg {
    transition: transform 0.3s ease;
}

.btn-main-submit:hover svg {
    transform: translateX(3px);
}

/* Form Note */
.form-note {
    font-size: 13px;
    color: var(--medium-gray);
    margin-top: 15px;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .professional-contact-section {
        padding: 80px 0;
    }
    
    .form-header-section h2 {
        font-size: 2.5rem;
    }
    
    .form-header-section p {
        font-size: 1rem;
    }
    
    .professional-form-container {
        padding: 35px 25px;
    }
    
    .form-row-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px 18px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .btn-main-submit {
        padding: 16px 35px;
        font-size: 15px;
        min-width: 180px;
    }
}

@media (max-width: 480px) {
    .form-header-section h2 {
        font-size: 2rem;
    }
    
    .professional-form-container {
        padding: 25px 20px;
    }
    
    .form-row-grid {
        gap: 20px;
    }
    
    .btn-main-submit {
        width: 100%;
        padding: 15px 30px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-group input,
    .form-group select,
    .form-group textarea {
        border-width: 3px;
    }
    
    .professional-form-container {
        border-width: 2px;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .form-group input,
    .form-group select,
    .form-group textarea,
    .btn-main-submit {
        transition: none;
    }
    
    .btn-main-submit:hover {
        transform: none;
    }
    
    .btn-main-submit::before {
        display: none;
    }
}

/* Focus visible for keyboard navigation */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.btn-main-submit:focus-visible {
    outline: 3px solid rgba(30, 41, 59, 0.5);
    outline-offset: 2px;
}




/* Form Size Fix - More Compact Layout */
.professional-contact-section {
    padding: 80px 0; /* Reduced from 120px */
}

.form-header-section {
    margin-bottom: 40px; /* Reduced from 60px */
}

.form-header-section h2 {
    font-size: 2.5rem; /* Reduced from 3rem */
    margin-bottom: 1rem; /* Reduced from 1.5rem */
}

.professional-form-container {
    padding: 35px 40px; /* Reduced from 50px */
    max-width: 800px; /* Constrain width */
    margin: 0 auto;
}

.form-row-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns instead of 2 */
    gap: 20px 25px; /* Reduced gaps */
    margin-bottom: 25px; /* Reduced from 30px */
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px; /* Reduced from 16px 20px */
    font-size: 14px; /* Reduced from 15px */
}

.form-group label {
    margin-bottom: 6px; /* Reduced from 10px */
    font-size: 13px; /* Reduced from 14px */
}

.full-width-group {
    grid-column: 1 / -1;
    margin-bottom: 25px; /* Reduced from 40px */
}

.form-group textarea {
    min-height: 80px; /* Reduced from 120px */
    resize: none; /* Prevent manual resize */
}

.form-submit-section {
    margin-top: 15px; /* Reduced from 20px */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .professional-contact-section {
        padding: 60px 0; /* Reduced */
    }
    
    .form-row-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
        gap: 15px;
    }
    
    .professional-form-container {
        padding: 25px 20px;
    }
}

@media (max-width: 480px) {
    .form-row-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 15px;
    }
    
    .form-header-section h2 {
        font-size: 2rem;
    }
}



/* Corporate Form Style */
.professional-contact-section {
    padding: 80px 0;
    background: #f5f7fa;
    position: relative;
}

.professional-contact-section::before {
    display: none; /* Remove pattern background */
}

.contact-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* Corporate Header */
.form-header-section {
    text-align: center;
    margin-bottom: 50px;
    background: var(--white);
    padding: 40px;
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid var(--primary-navy);
}

.form-header-section h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 1.8rem;
}

.form-header-section h2::after {
    display: none; /* Remove decorative line */
}

.form-header-section p {
    font-size: 1rem;
    color: var(--medium-gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* Corporate Form Container */
.professional-form-container {
    background: var(--white);
    padding: 50px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e5e9;
    border-top: none;
    position: relative;
}

.professional-form-container::before {
    display: none; /* Remove gradient top */
}

/* Corporate Grid Layout */
.form-row-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.form-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

.full-width-group {
    grid-column: 1 / -1;
    margin-bottom: 40px;
}

/* Corporate Labels */
.form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark-navy);
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Corporate Inputs */
.form-group input,
.form-group select,
.form-group textarea {
    padding: 15px 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px; /* Sharp corners */
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    background: var(--white);
    color: var(--dark-navy);
    transition: all 0.2s ease;
    font-weight: 400;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-navy);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
    transform: none; /* Remove transform */
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
    font-style: normal; /* Remove italic */
    font-weight: 400;
}

/* Corporate Select */
.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 45px;
}

/* Corporate Textarea */
.form-group textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

/* Corporate Submit Section */
.form-submit-section {
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #f3f4f6;
}

.btn-main-submit {
    background: var(--primary-navy);
    color: var(--white);
    padding: 16px 50px;
    border: none;
    border-radius: 4px; /* Sharp corners */
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 220px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.2);
}

.btn-main-submit::before {
    display: none; /* Remove shimmer effect */
}

.btn-main-submit:hover {
    background: var(--dark-navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3);
}

.btn-main-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.2);
}

.btn-main-submit svg {
    transition: transform 0.2s ease;
}

.btn-main-submit:hover svg {
    transform: translateX(2px);
}

/* Corporate Form Note */
.form-note {
    font-size: 12px;
    color: var(--medium-gray);
    margin-top: 15px;
    font-family: 'Poppins', sans-serif;
    font-style: normal; /* Remove italic */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Required Field Indicator */
.form-group label::after {
    content: ' *';
    color: #dc2626;
    font-weight: 700;
}

/* Remove asterisk for optional fields */
.form-group:has(input[name="phone"]) label::after,
.form-group:has(input[name="company_name"]) label::after,
.form-group:has(input[name="location"]) label::after,
.form-group:has(select[name="service"]) label::after {
    display: none;
}

/* Corporate Responsive Design */
@media (max-width: 768px) {
    .professional-contact-section {
        padding: 60px 0;
    }
    
    .form-header-section {
        padding: 30px 25px;
        margin-bottom: 0;
    }
    
    .form-header-section h2 {
        font-size: 1.6rem;
    }
    
    .professional-form-container {
        padding: 35px 25px;
    }
    
    .form-row-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .btn-main-submit {
        width: 100%;
        padding: 15px 30px;
    }
}

@media (max-width: 480px) {
    .form-header-section h2 {
        font-size: 1.4rem;
    }
    
    .professional-form-container {
        padding: 25px 20px;
    }
    
    .form-row-grid {
        gap: 20px;
    }
}

/* Corporate Focus States */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.btn-main-submit:focus-visible {
    outline: 2px solid var(--primary-navy);
    outline-offset: 2px;
}

/* Corporate Form Validation Styles */
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: #dc2626;
    background-color: #fef2f2;
}

.form-group.success input,
.form-group.success select,
.form-group.success textarea {
    border-color: #059669;
    background-color: #f0fdf4;
}


/* Compact Form - No Scroll Fix */
.professional-contact-section {
    padding: 60px 0; /* Reduced from 80px */
}

.contact-form-wrapper {
    max-width: 1100px; /* Wider to accommodate 3 columns */
    margin: 0 auto;
}

/* Much Smaller Header */
.form-header-section {
    text-align: center;
    margin-bottom: 25px; /* Reduced from 50px */
    background: var(--white);
    padding: 25px 30px; /* Reduced from 40px */
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid var(--primary-navy);
}

.form-header-section h2 {
    font-size: 1.5rem; /* Reduced from 1.8rem */
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 0.5rem; /* Reduced from 1rem */
    letter-spacing: -0.01em;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}

.form-header-section p {
    font-size: 0.9rem; /* Reduced from 1rem */
    color: var(--medium-gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.4; /* Reduced from 1.5 */
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* Compact Form Container */
.professional-form-container {
    background: var(--white);
    padding: 30px 40px; /* Reduced from 50px */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e5e9;
    border-top: none;
}

/* 3-Column Grid for Better Space Usage */
.form-row-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns instead of 2 */
    gap: 20px 25px; /* Reduced gaps */
    margin-bottom: 20px; /* Reduced from 30px */
}

.form-group {
    display: flex;
    flex-direction: column;
}

.full-width-group {
    grid-column: 1 / -1;
    margin-bottom: 20px; /* Reduced from 40px */
}

/* Compact Labels */
.form-group label {
    font-size: 11px; /* Reduced from 13px */
    font-weight: 700;
    color: var(--dark-navy);
    margin-bottom: 4px; /* Reduced from 8px */
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Compact Inputs */
.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 14px; /* Reduced from 15px 18px */
    border: 2px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px; /* Reduced from 15px */
    font-family: 'Poppins', sans-serif;
    background: var(--white);
    color: var(--dark-navy);
    transition: all 0.2s ease;
    font-weight: 400;
}

/* Compact Textarea */
.form-group textarea {
    resize: none;
    min-height: 60px; /* Much smaller from 100px */
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
}

/* Compact Submit Section */
.form-submit-section {
    text-align: center;
    margin-top: 20px; /* Reduced from 40px */
    padding-top: 20px; /* Reduced from 30px */
    border-top: 2px solid #f3f4f6;
}

.btn-main-submit {
    background: var(--primary-navy);
    color: var(--white);
    padding: 12px 40px; /* Reduced from 16px 50px */
    border: none;
    border-radius: 4px;
    font-size: 13px; /* Reduced from 14px */
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 180px; /* Reduced from 220px */
    justify-content: center;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.2);
}

.form-note {
    font-size: 11px; /* Reduced from 12px */
    color: var(--medium-gray);
    margin-top: 10px; /* Reduced from 15px */
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Mobile Responsive - More Compact */
@media (max-width: 1024px) {
    .form-row-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
        gap: 15px 20px;
    }
}

@media (max-width: 768px) {
    .professional-contact-section {
        padding: 40px 0; /* Even smaller on mobile */
    }
    
    .form-header-section {
        padding: 20px 20px;
        margin-bottom: 15px;
    }
    
    .form-header-section h2 {
        font-size: 1.3rem;
    }
    
    .form-header-section p {
        font-size: 0.85rem;
    }
    
    .professional-form-container {
        padding: 25px 20px;
    }
    
    .form-row-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 15px;
    }
    
    .btn-main-submit {
        width: 100%;
        padding: 12px 30px;
    }
}

@media (max-width: 480px) {
    .form-header-section h2 {
        font-size: 1.2rem;
    }
    
    .professional-form-container {
        padding: 20px 15px;
    }
}

/* Ensure no overflow */
.contact-form-wrapper {
    overflow: hidden;
}

.professional-form-container {
    max-height: 70vh; /* Constrain height */
    overflow-y: auto; /* Add internal scroll if needed */
}


/* Fancy Scrollbar - Add to end of CSS */
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #1e293b, #334155); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #0f172a, #1e293b); }




.site-logo, .footer-logo-img { height: 80px !important; }



/* CORPORATE FOOTER STYLES - Replace existing footer CSS */

:root {
    --corporate-navy: #1e293b;
    --corporate-dark: #0f172a;
    --corporate-gray: #475569;
    --corporate-light-gray: #64748b;
    --corporate-border: #334155;
}

/* Corporate Footer */
.site-footer {
    background: var(--corporate-navy);
    color: var(--white);
    border-top: 1px solid var(--corporate-border);
    margin-top: auto;
}

.footer-main {
    padding: 60px 0 40px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1px 1fr; /* Left | Divider | Right */
    gap: 60px;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
}

/* Vertical Divider */
.footer-divider {
    width: 1px;
    height: 100%;
    background: var(--corporate-border);
    min-height: 200px;
    justify-self: center;
}

/* Company Info Section - Left */
.footer-section.company-info {
    padding-right: 20px;
}

.footer-logo-img {
    height: 50px;
    width: auto;
    margin-bottom: 24px;
    display: block;
}

.company-description {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 32px;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

/* Contact Information Grid */
.contact-info-grid {
    display: grid;
    gap: 24px;
}

.contact-block {
    border-bottom: 1px solid var(--corporate-border);
    padding-bottom: 16px;
}

.contact-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.contact-block h4 {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
}

.contact-block a {
    display: block;
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 2px;
    transition: color 0.2s ease;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.contact-block a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.contact-block p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

/* Address Section - Right */
.footer-section.address-section {
    padding-left: 20px;
}

.address-section h4 {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
}

.address-content {
    border-bottom: 1px solid var(--corporate-border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.company-name {
    font-size: 15px;
    color: var(--white);
    font-weight: 500;
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
}

.address-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

/* Corporate Map Link */
.map-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.map-link:hover {
    border-bottom-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

.map-icon {
    font-size: 14px;
}

/* Corporate Footer Bottom */
.footer-bottom {
    background: var(--corporate-dark) !important;
    padding: 20px 0 !important;
    border-top: 1px solid var(--corporate-border) !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.footer-bottom-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

.footer-bottom p {
    margin: 0 !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
}

.footer-links {
    display: flex !important;
    gap: 32px !important;
}

.footer-links a {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
}

.footer-links a:hover {
    color: var(--white) !important;
}

/* Professional hover states */
.contact-block a:focus,
.map-link:focus,
.footer-links a:focus {
    outline: 1px solid rgba(255, 255, 255, 0.3);
    outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-divider {
        display: none;
    }
    
    .footer-section.company-info,
    .footer-section.address-section {
        padding: 0;
    }
    
    .footer-bottom-content {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }
    
    .footer-links {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .footer-main {
        padding: 40px 0 30px;
    }
    
    .footer-content {
        gap: 30px;
    }
    
    .footer-links {
        gap: 24px !important;
    }
}



/* ========================================
   PROFESSIONAL CONTACT FORM FIX
   Add this CSS to the END of your styles.css
   ======================================== */

/* Professional Contact Form Container */
.professional-contact-section {
    padding: 80px 0;
    background: #f5f7fa;
    position: relative;
}

.contact-form-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Professional Form Header */
.form-header-section {
    text-align: center;
    margin-bottom: 40px;
    background: var(--white);
    padding: 40px 30px;
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid var(--primary-navy);
}

.form-header-section h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}

.form-header-section p {
    font-size: 1rem;
    color: var(--medium-gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* Professional Form Container */
.professional-form-container {
    background: var(--white);
    padding: 40px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e5e9;
    border-top: none;
}

/* Clean Grid Layout - 3 Columns */
.form-row-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 30px;
    margin-bottom: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

/* Full Width Fields */
.full-width-group {
    grid-column: 1 / -1;
    margin-bottom: 25px;
}

/* Professional Labels */
.form-group label {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark-navy);
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
}

/* Clean Input Styling */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    background: var(--white);
    color: var(--dark-navy);
    transition: all 0.2s ease;
    font-weight: 400;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-navy);
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
    font-weight: 400;
    font-style: normal;
}

/* Professional Select Dropdown */
.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 45px;
}

/* Professional Textarea */
.form-group textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

/* Professional Submit Section */
.form-submit-section {
    text-align: center;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 2px solid #f3f4f6;
}

.btn-main-submit {
    background: var(--primary-navy);
    color: var(--white);
    padding: 16px 40px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.2);
    display: inline-block;
}

.btn-main-submit:hover {
    background: var(--dark-navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3);
}

.btn-main-submit:active {
    transform: translateY(0);
}

/* Form Note */
.form-note {
    font-size: 12px;
    color: var(--medium-gray);
    margin-top: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Required Field Indicators */
.form-group label::after {
    content: ' *';
    color: #dc2626;
    font-weight: 700;
}

/* Remove asterisk for optional fields */
.form-group:has(input[name="phone"]) label::after,
.form-group:has(input[name="company_name"]) label::after,
.form-group:has(input[name="location"]) label::after {
    display: none;
}

/* Field-specific widths for better alignment */
.form-group:has(input[name="full_name"]),
.form-group:has(input[name="email"]) {
    grid-column: span 1;
}

.form-group:has(input[name="company_name"]) {
    grid-column: span 1;
}

.form-group:has(input[name="phone"]),
.form-group:has(select[name="budget"]) {
    grid-column: span 1;
}

.form-group:has(select[name="area_of_interest"]) {
    grid-column: span 1;
}

.form-group:has(select[name="services"]) {
    grid-column: 1 / -1;
}

.form-group:has(input[name="location"]) {
    grid-column: 1 / -1;
}

.form-group:has(textarea[name="message"]) {
    grid-column: 1 / -1;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .form-row-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 25px;
    }
    
    .form-group:has(input[name="full_name"]),
    .form-group:has(input[name="email"]),
    .form-group:has(input[name="company_name"]),
    .form-group:has(input[name="phone"]),
    .form-group:has(select[name="budget"]),
    .form-group:has(select[name="area_of_interest"]) {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .professional-contact-section {
        padding: 60px 0;
    }
    
    .form-header-section {
        padding: 30px 25px;
        margin-bottom: 0;
    }
    
    .form-header-section h2 {
        font-size: 1.6rem;
    }
    
    .professional-form-container {
        padding: 30px 25px;
    }
    
    .form-row-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .form-group:has(input[name="full_name"]),
    .form-group:has(input[name="email"]),
    .form-group:has(input[name="company_name"]),
    .form-group:has(input[name="phone"]),
    .form-group:has(select[name="budget"]),
    .form-group:has(select[name="area_of_interest"]),
    .form-group:has(select[name="services"]),
    .form-group:has(input[name="location"]),
    .form-group:has(textarea[name="message"]) {
        grid-column: 1 / -1;
    }
    
    .btn-main-submit {
        width: 100%;
        padding: 15px 30px;
    }
}

@media (max-width: 480px) {
    .form-header-section h2 {
        font-size: 1.4rem;
    }
    
    .professional-form-container {
        padding: 25px 20px;
    }
    
    .form-row-grid {
        gap: 18px;
    }
}

/* Focus States for Accessibility */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.btn-main-submit:focus-visible {
    outline: 2px solid var(--primary-navy);
    outline-offset: 2px;
}

/* Form Validation States */
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: #dc2626;
    background-color: #fef2f2;
}

.form-group.success input,
.form-group.success select,
.form-group.success textarea {
    border-color: #059669;
    background-color: #f0fdf4;
}




/* ========================================
   CLEAN CONTACT FORM STYLES
   Replace your existing form CSS with this
   ======================================== */

/* Professional Contact Form Section */
.professional-contact-section {
    padding: 80px 0;
    background: #f5f7fa;
    position: relative;
}

.contact-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Form Header */
.form-header-section {
    text-align: center;
    margin-bottom: 40px;
    background: var(--white);
    padding: 35px 30px;
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid var(--primary-navy);
}

.form-header-section h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}

.form-header-section p {
    font-size: 1rem;
    color: var(--medium-gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* Form Container */
.professional-form-container {
    background: var(--white);
    padding: 40px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e5e9;
    border-top: none;
}

/* Form Rows - Clean 2-Column Layout */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

/* Form Groups */
.form-group {
    display: flex;
    flex-direction: column;
}

/* Full Width Fields */
.form-group.full-width {
    grid-column: 1 / -1;
}

/* Labels */
.form-group label {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark-navy);
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Input Styling */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    background: var(--white);
    color: var(--dark-navy);
    transition: all 0.2s ease;
    font-weight: 400;
    box-sizing: border-box;
    height: 48px; /* Consistent height for inputs and selects */
}

/* Textarea specific height */
.form-group textarea {
    height: auto;
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

/* Focus States */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-navy);
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
}

/* Placeholders */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
    font-weight: 400;
    font-style: normal;
}

/* Select Dropdown Styling */
.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 45px;
}

/* Submit Section */
.form-submit-section {
    text-align: center;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 2px solid #f3f4f6;
}

.btn-main-submit {
    background: var(--primary-navy);
    color: var(--white);
    padding: 16px 40px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.btn-main-submit:hover {
    background: var(--dark-navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3);
}

.btn-main-submit:active {
    transform: translateY(0);
}

.btn-main-submit svg {
    transition: transform 0.2s ease;
}

.btn-main-submit:hover svg {
    transform: translateX(2px);
}

/* Form Note */
.form-note {
    font-size: 12px;
    color: var(--medium-gray);
    margin-top: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Required Field Indicators */
.form-group label::after {
    content: ' *';
    color: #dc2626;
    font-weight: 700;
}

/* Remove asterisk for optional fields */
.form-group:has(input[name="phone"]) label::after,
.form-group:has(input[name="company_name"]) label::after,
.form-group:has(input[name="location"]) label::after {
    display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .professional-contact-section {
        padding: 60px 0;
    }
    
    .form-header-section {
        padding: 30px 25px;
        margin-bottom: 0;
    }
    
    .form-header-section h2 {
        font-size: 1.5rem;
    }
    
    .professional-form-container {
        padding: 30px 25px;
    }
    
    /* Single column on mobile */
    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .btn-main-submit {
        width: 100%;
        padding: 15px 30px;
    }
}

@media (max-width: 480px) {
    .form-header-section h2 {
        font-size: 1.3rem;
    }
    
    .professional-form-container {
        padding: 25px 20px;
    }
    
    .form-row {
        gap: 18px;
        margin-bottom: 20px;
    }
}

/* Focus States for Accessibility */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.btn-main-submit:focus-visible {
    outline: 2px solid var(--primary-navy);
    outline-offset: 2px;
}

/* Form Validation States */
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: #dc2626;
    background-color: #fef2f2;
}

.form-group.success input,
.form-group.success select,
.form-group.success textarea {
    border-color: #059669;
    background-color: #f0fdf4;
}



/* ========================================
   CONTACT PAGE ALIGNMENT FIXES
   Add this to the END of your styles.css
   ======================================== */

/* Fix Contact Form Section */
.professional-contact-section {
    padding: 80px 0 !important;
    background: #f5f7fa !important;
    position: relative;
}

.contact-form-wrapper {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Fix Form Header */
.form-header-section {
    text-align: center !important;
    margin-bottom: 40px !important;
    background: var(--white) !important;
    padding: 35px 30px !important;
    border-radius: 8px 8px 0 0 !important;
    border-bottom: 3px solid var(--primary-navy) !important;
}

.form-header-section h2 {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    color: var(--dark-navy) !important;
    margin-bottom: 1rem !important;
    letter-spacing: -0.01em !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: uppercase !important;
}

.form-header-section p {
    font-size: 1rem !important;
    color: var(--medium-gray) !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    line-height: 1.5 !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
}

/* Fix Form Container */
.professional-form-container {
    background: var(--white) !important;
    padding: 40px !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e1e5e9 !important;
    border-top: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix Form Rows - Perfect Alignment */
.form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
    align-items: end !important;
    width: 100% !important;
}

.form-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    position: relative !important;
}

.form-group.full-width {
    grid-column: 1 / -1 !important;
}

/* Fix Labels - Consistent Height */
.form-group label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--dark-navy) !important;
    margin-bottom: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    display: block !important;
    min-height: 15px !important;
}

/* Fix Input Heights - Perfect Consistency */
.form-group input,
.form-group select {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: 'Poppins', sans-serif !important;
    background: var(--white) !important;
    color: var(--dark-navy) !important;
    transition: all 0.2s ease !important;
    font-weight: 400 !important;
    box-sizing: border-box !important;
    height: 50px !important;
    line-height: 1.4 !important;
}

/* Textarea Different Height */
.form-group textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: 'Poppins', sans-serif !important;
    background: var(--white) !important;
    color: var(--dark-navy) !important;
    transition: all 0.2s ease !important;
    font-weight: 400 !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 100px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
}

/* Fix Focus States */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none !important;
    border-color: var(--primary-navy) !important;
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1) !important;
}

/* Fix Placeholders */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* Fix Select Dropdown */
.form-group select {
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 15px center !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important;
    padding-right: 45px !important;
}

/* Fix Submit Section */
.form-submit-section {
    text-align: center !important;
    margin-top: 30px !important;
    padding-top: 25px !important;
    border-top: 2px solid #f3f4f6 !important;
}

.btn-main-submit {
    background: var(--primary-navy) !important;
    color: var(--white) !important;
    padding: 16px 40px !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-width: 200px !important;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: center !important;
}

.btn-main-submit:hover {
    background: var(--dark-navy) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3) !important;
}

.btn-main-submit:active {
    transform: translateY(0) !important;
}

.btn-main-submit svg {
    transition: transform 0.2s ease !important;
}

.btn-main-submit:hover svg {
    transform: translateX(2px) !important;
}

/* Fix Form Note */
.form-note {
    font-size: 12px !important;
    color: var(--medium-gray) !important;
    margin-top: 15px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Fix Required Field Indicators */
.form-group label::after {
    content: ' *' !important;
    color: #dc2626 !important;
    font-weight: 700 !important;
}

/* Remove asterisk for optional fields */
.form-group:has(input[name="phone"]) label::after,
.form-group:has(input[name="company_name"]) label::after,
.form-group:has(input[name="location"]) label::after {
    display: none !important;
}

/* Fix Contact Info Section */
.contact-info-section {
    padding: 80px 0 !important;
    background: var(--white) !important;
}

.contact-info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: start !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.info-section {
    background: var(--off-white) !important;
    padding: 40px !important;
    border-radius: 12px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.info-section h3 {
    font-size: 24px !important;
    color: var(--dark-navy) !important;
    margin-bottom: 24px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}

/* Fix Contact Items */
.contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.contact-icon {
    font-size: 24px !important;
    width: 40px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.contact-details {
    display: flex !important;
    flex-direction: column !important;
}

.contact-details .label {
    font-size: 12px !important;
    color: var(--medium-gray) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    margin-bottom: 2px !important;
}

.contact-details .value {
    font-size: 16px !important;
    color: var(--dark-navy) !important;
    font-weight: 500 !important;
    font-family: 'Poppins', sans-serif !important;
    margin: 0 !important;
}

/* Fix Location Groups */
.location-group {
    margin-bottom: 20px !important;
    padding: 16px 20px !important;
    background: var(--white) !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--primary-navy) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.location-group:last-child {
    margin-bottom: 0 !important;
}

.location-group.upcoming {
    border-left-color: var(--medium-gray) !important;
    opacity: 0.7 !important;
}

.location-group h4 {
    font-size: 15px !important;
    color: var(--dark-navy) !important;
    margin-bottom: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.location-group p {
    font-size: 13px !important;
    color: var(--medium-gray) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Fix Responsive Design */
@media (max-width: 768px) {
    .professional-contact-section {
        padding: 60px 0 !important;
    }
    
    .form-header-section {
        padding: 30px 25px !important;
        margin-bottom: 0 !important;
    }
    
    .form-header-section h2 {
        font-size: 1.5rem !important;
    }
    
    .professional-form-container {
        padding: 30px 25px !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .contact-info-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    
    .btn-main-submit {
        width: 100% !important;
        padding: 15px 30px !important;
    }
}

@media (max-width: 480px) {
    .form-header-section h2 {
        font-size: 1.3rem !important;
    }
    
    .professional-form-container {
        padding: 25px 20px !important;
    }
    
    .form-row {
        gap: 18px !important;
        margin-bottom: 20px !important;
    }
    
    .info-section {
        padding: 30px 25px !important;
    }
}

/* Fix Focus States for Accessibility */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.btn-main-submit:focus-visible {
    outline: 2px solid var(--primary-navy) !important;
    outline-offset: 2px !important;
}

/* Fix Form Validation States */
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

.form-group.success input,
.form-group.success select,
.form-group.success textarea {
    border-color: #059669 !important;
    background-color: #f0fdf4 !important;
}


.info-section { min-height: 400px; }




/* ========================================
  SUBSIDIARY LAYOUT BALANCE FIX
  Add this to the END of your styles.css
  ======================================== */

/* Adjust YSIS Asia Group section - add contact button */
.modern-subsidiary-showcase:first-child .modern-subsidiary-content {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 400px;
}

.modern-subsidiary-showcase:first-child .modern-subsidiary-highlights {
   margin-bottom: 2rem;
}

/* Add contact button container for YSIS Asia */
.asia-contact-section {
   margin-top: auto;
   padding-top: 2rem;
   text-align: center;
}

.asia-contact-button {
   display: inline-block;
   padding: 14px 32px;
   background: var(--dark-navy);
   color: var(--white);
   text-decoration: none;
   font-weight: 600;
   font-size: 15px;
   border-radius: 6px;
   transition: all 0.3s ease;
   font-family: 'Poppins', sans-serif;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.asia-contact-button:hover {
   background: var(--primary-navy);
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(30, 41, 59, 0.3);
   text-decoration: none;
   color: var(--white);
}

/* Ensure Entertainment section visual maintains proper height */
.modern-subsidiary-showcase:nth-child(2) .modern-subsidiary-slideshow {
   height: 400px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
   .modern-subsidiary-showcase:first-child .modern-subsidiary-content {
       min-height: auto;
   }
   
   .asia-contact-section {
       padding-top: 1.5rem;
   }
   
   .asia-contact-button {
       padding: 12px 28px;
       font-size: 14px;
   }
   
   .modern-subsidiary-showcase:nth-child(2) .modern-subsidiary-slideshow {
       height: 300px;
   }
}

@media (max-width: 480px) {
   .modern-subsidiary-showcase:nth-child(2) .modern-subsidiary-slideshow {
       height: 250px;
   }
   
   .asia-contact-button {
       width: 100%;
       max-width: 280px;
   }
}



/* ========================================
   SUBSIDIARY LAYOUT BALANCE & CONTACT BUTTON
   Add this to the END of your styles.css
   ======================================== */

/* Balance YSIS Asia Group section - add contact button and proper spacing */
.modern-subsidiary-showcase:first-child .modern-subsidiary-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 500px; /* Match entertainment section height */
    padding: 1rem 0;
}

.modern-subsidiary-showcase:first-child .modern-subsidiary-highlights {
    margin-bottom: 2.5rem;
    flex-grow: 1;
}

/* Contact Button Section for YSIS Asia */
.asia-contact-section {
    margin-top: auto;
    padding-top: 2rem;
    text-align: left; /* Align with content */
    border-top: 1px solid var(--light-gray);
}

.asia-contact-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-navy) 100%);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(30, 41, 59, 0.2);
    position: relative;
    overflow: hidden;
}

.asia-contact-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.asia-contact-button:hover::before {
    left: 100%;
}

.asia-contact-button:hover {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--dark-navy) 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 41, 59, 0.4);
    text-decoration: none;
    color: var(--white);
}

.asia-contact-button:active {
    transform: translateY(-1px);
}

/* Add arrow icon to contact button */
.asia-contact-button::after {
    content: '→';
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.asia-contact-button:hover::after {
    transform: translateX(3px);
}

/* Ensure Entertainment section slideshow maintains proper height and balance */
.modern-subsidiary-showcase:nth-child(2) .modern-subsidiary-slideshow {
    height: 500px; /* Match Asia section height */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.modern-subsidiary-showcase:nth-child(2) .modern-subsidiary-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 500px;
}

/* Ensure both sections have equal visual weight */
.modern-subsidiary-showcase .modern-subsidiary-description {
    margin-bottom: 2rem;
    flex-grow: 1;
}

/* Fine-tune the highlight items spacing */
.modern-subsidiary-showcase:first-child .modern-highlight-item {
    margin-bottom: 1.5rem;
}

.modern-subsidiary-showcase:first-child .modern-highlight-item:last-child {
    margin-bottom: 0;
}

/* Responsive Design - Mobile Adjustments */
@media (max-width: 768px) {
    .modern-subsidiary-showcase:first-child .modern-subsidiary-content,
    .modern-subsidiary-showcase:nth-child(2) .modern-subsidiary-content {
        min-height: auto;
        padding: 0;
    }
    
    .asia-contact-section {
        padding-top: 1.5rem;
        text-align: center;
        margin-top: 1.5rem;
    }
    
    .asia-contact-button {
        padding: 14px 28px;
        font-size: 14px;
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .modern-subsidiary-showcase:nth-child(2) .modern-subsidiary-slideshow {
        height: 350px;
    }
    
    .modern-subsidiary-showcase:first-child .modern-subsidiary-highlights {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .modern-subsidiary-showcase:nth-child(2) .modern-subsidiary-slideshow {
        height: 280px;
    }
    
    .asia-contact-button {
        padding: 12px 24px;
        font-size: 13px;
        max-width: 100%;
    }
    
    .asia-contact-section {
        padding-top: 1rem;
    }
    
    .modern-subsidiary-showcase:first-child .modern-highlight-item {
        margin-bottom: 1rem;
    }
}

/* Accessibility improvements */
.asia-contact-button:focus {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .asia-contact-button {
        border: 2px solid var(--white);
    }
    
    .asia-contact-section {
        border-top-width: 2px;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .asia-contact-button,
    .asia-contact-button::before,
    .asia-contact-button::after {
        transition: none;
    }
    
    .asia-contact-button:hover {
        transform: none;
    }
}



/* ========================================
   CENTER YSIS ASIA SECTION
   Add this to the END of your styles.css
   ======================================== */

/* Center YSIS Asia Group section on the page */
.modern-subsidiary-showcase:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 4rem 0;
}

.modern-subsidiary-showcase:first-child .modern-subsidiary-content {
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
}

.modern-subsidiary-showcase:first-child .modern-subsidiary-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

/* Center the highlight items */
.modern-subsidiary-showcase:first-child .modern-highlight-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modern-subsidiary-showcase:first-child .modern-highlight-text {
    text-align: center;
}

/* Center the contact button section */
.modern-subsidiary-showcase:first-child .asia-contact-section {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(30, 41, 59, 0.1);
}

.modern-subsidiary-showcase:first-child .asia-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modern-subsidiary-showcase:first-child {
        min-height: auto;
        padding: 3rem 0;
    }
    
    .modern-subsidiary-showcase:first-child .modern-subsidiary-highlights {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 0;
    }
}




/* ========================================
   ENTERTAINMENT CONTACT BUTTON
   Add this to the END of your styles.css
   ======================================== */

/* Entertainment Contact Button Section - EXACTLY LIKE ASIA */
.entertainment-contact-section {
    margin-top: auto;
    padding-top: 2rem;
    text-align: left;
    border-top: 1px solid rgba(30, 41, 59, 0.1);
}

.entertainment-contact-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-navy) 100%);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(30, 41, 59, 0.2);
    position: relative;
    overflow: hidden;
}

.entertainment-contact-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.entertainment-contact-button:hover::before {
    left: 100%;
}

.entertainment-contact-button:hover {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--dark-navy) 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 41, 59, 0.4);
    text-decoration: none;
    color: var(--white);
}

.entertainment-contact-button:active {
    transform: translateY(-1px);
}

/* Add arrow icon to entertainment button - EXACTLY LIKE ASIA */
.entertainment-contact-button::after {
    content: '→';
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.entertainment-contact-button:hover::after {
    transform: translateX(3px);
}

/* Contact subtitle styling */
.contact-subtitle {
    font-size: 13px;
    color: var(--medium-gray);
    margin-top: 12px;
    margin-bottom: 0;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-weight: 400;
}

/* Balance both sections */
.modern-subsidiary-showcase .modern-subsidiary-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 500px;
    padding: 1rem 0;
}

.modern-subsidiary-showcase .modern-subsidiary-highlights {
    margin-bottom: 2rem;
    flex-grow: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .entertainment-contact-section {
        padding-top: 1.5rem;
        text-align: center;
        margin-top: 1.5rem;
    }
    
    .entertainment-contact-button {
        padding: 14px 28px;
        font-size: 14px;
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .modern-subsidiary-showcase .modern-subsidiary-content {
        min-height: auto;
        padding: 0;
    }
    
    .modern-subsidiary-showcase .modern-subsidiary-highlights {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .entertainment-contact-button {
        padding: 12px 24px;
        font-size: 13px;
        max-width: 100%;
    }
    
    .entertainment-contact-section {
        padding-top: 1rem;
    }
}

/* Accessibility improvements */
.entertainment-contact-button:focus {
    outline: 3px solid rgba(139, 92, 246, 0.5);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .entertainment-contact-button {
        border: 2px solid var(--white);
    }
    
    .entertainment-contact-section {
        border-top-width: 2px;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .entertainment-contact-button,
    .entertainment-contact-button::before,
    .entertainment-contact-button i {
        transition: none;
    }
    
    .entertainment-contact-button:hover {
        transform: none;
    }
    
    .entertainment-contact-button:hover i {
        transform: none;
    }
}



/* ========================================
   TEAM BIO TEXT JUSTIFICATION
   Add this to your styles.css
   ======================================== */

/* Justify text alignment for team bios - both Natt and Melanie */
.team-bio p {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Ensure consistent spacing and readability */
.team-bio {
    text-align: justify;
}

/* Optional: Add slight letter spacing for better justified text appearance */
.team-bio p {
    letter-spacing: 0.01em;
    word-spacing: 0.02em;
}

/* Mobile: Keep left alignment for better readability on small screens */
@media (max-width: 768px) {
    .team-bio p {
        text-align: left !important;
        hyphens: none;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        letter-spacing: normal;
        word-spacing: normal;
    }
}



/* ========================================
   CORPORATE PROFESSIONAL WHAT WE DO SECTION
   Add this to the END of your styles.css
   ======================================== */

/* Main What We Do Section - Clean Corporate Background */
.what-we-do-section {
    padding: 100px 0;
    background: #f8f9fb;
    position: relative;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

/* Subtle corporate grid pattern */
.what-we-do-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(30, 41, 59, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 41, 59, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
}

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

/* Corporate Header Styling */
.what-we-do-header {
    text-align: center;
    margin-bottom: 80px;
    padding-bottom: 40px;
    border-bottom: 2px solid #e5e7eb;
    position: relative;
}

.what-we-do-header h2 {
    font-size: 48px;
    font-weight: 400;
    color: var(--dark-navy);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-size: 36px;
}


.what-we-do-header .section-subtitle {
    font-size: 18px;
    color: var(--medium-gray);
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
}

/* Primary Focus Section - Corporate Card Style */
.primary-focus {
    background: var(--white);
    border: 1px solid #d1d5db;
    padding: 50px;
    margin-bottom: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}

.primary-focus::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--dark-navy);
}

.focus-text h3 {
    font-size: 32px;
    font-weight: 500;
    color: var(--dark-navy);
    margin-bottom: 24px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
    text-transform: uppercase;
    font-size: 28px;
}

.focus-text p {
    font-size: 16px;
    color: var(--dark-gray);
    line-height: 1.7;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    text-align: justify;
}

/* Corporate Expansion Diagram */
.expansion-diagram {
    background: #f3f4f6;
    border: 2px solid #d1d5db;
    padding: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.expansion-diagram::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--medium-gray);
}

/* Corporate Region Styling */
.region {
    text-align: center;
    padding: 24px 20px;
    background: var(--white);
    border: 1px solid #d1d5db;
    min-width: 140px;
    transition: all 0.2s ease;
}

.region:hover {
    border-color: var(--dark-navy);
    background: #f9fafb;
}

.region h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.countries span {
    font-size: 12px;
    color: var(--medium-gray);
    padding: 4px 8px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3px;
}

/* Corporate Connection Bridge */
.bridge-line {
    width: 100px;
    height: 2px;
    background: var(--dark-navy);
    position: relative;
}

.bridge-line::before,
.bridge-line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
}

.bridge-line::before {
    left: -6px;
    border-right: 6px solid var(--dark-navy);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.bridge-line::after {
    right: -6px;
    border-left: 6px solid var(--dark-navy);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.ysis-connector {
    background: var(--dark-navy);
    color: var(--white);
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin-top: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Service Pillars Section - Corporate Grid */
.service-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-bottom: 80px;
    background: #d1d5db;
    border: 1px solid #d1d5db;
}

.pillar-item {
    background: var(--white);
    padding: 40px 25px;
    text-align: center;
    transition: all 0.2s ease;
    border: none;
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pillar-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--dark-navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.pillar-item:hover::before {
    transform: scaleX(1);
}

.pillar-item:hover {
    background: #f9fafb;
}

/* Corporate Pillar Icons - Minimalist */
.pillar-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 24px;
    border: 2px solid var(--dark-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: transparent;
}

.pillar-item:hover .pillar-icon {
    background: var(--dark-navy);
}

/* Corporate Icon Designs - Clean and Minimal */
.pillar-icon.strategy::before {
    width: 20px;
    height: 20px;
    border: 2px solid var(--dark-navy);
    border-radius: 50%;
}

.pillar-icon.strategy::after {
    width: 6px;
    height: 6px;
    background: var(--dark-navy);
    border-radius: 50%;
}

.pillar-item:hover .pillar-icon.strategy::before {
    border-color: white;
}

.pillar-item:hover .pillar-icon.strategy::after {
    background: white;
}

.pillar-icon.operations::before {
    width: 22px;
    height: 22px;
    border: 2px solid var(--dark-navy);
    transform: rotate(45deg);
}

.pillar-icon.operations::after {
    width: 10px;
    height: 10px;
    background: var(--dark-navy);
}

.pillar-item:hover .pillar-icon.operations::before {
    border-color: white;
}

.pillar-item:hover .pillar-icon.operations::after {
    background: white;
}

.pillar-icon.partnerships::before {
    width: 6px;
    height: 6px;
    background: var(--dark-navy);
    border-radius: 50%;
    left: 14px;
    box-shadow: 16px 0 0 var(--dark-navy), 8px 12px 0 var(--dark-navy);
}

.pillar-icon.partnerships::after {
    width: 16px;
    height: 1px;
    background: var(--dark-navy);
    left: 18px;
    top: 28px;
    transform: rotate(30deg);
    box-shadow: 0 -14px 0 0 var(--dark-navy);
}

.pillar-item:hover .pillar-icon.partnerships::before {
    background: white;
    box-shadow: 16px 0 0 white, 8px 12px 0 white;
}

.pillar-item:hover .pillar-icon.partnerships::after {
    background: white;
    box-shadow: 0 -14px 0 0 white;
}

.pillar-icon.growth::before {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid var(--dark-navy);
    top: 16px;
}

.pillar-icon.growth::after {
    width: 20px;
    height: 2px;
    background: var(--dark-navy);
    bottom: 14px;
    box-shadow: -6px 4px 0 -1px var(--dark-navy), 6px -4px 0 -1px var(--dark-navy);
}

.pillar-item:hover .pillar-icon.growth::before {
    border-bottom-color: white;
}

.pillar-item:hover .pillar-icon.growth::after {
    background: white;
    box-shadow: -6px 4px 0 -1px white, 6px -4px 0 -1px white;
}

.pillar-item h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.pillar-item p {
    font-size: 14px;
    color: var(--medium-gray);
    line-height: 1.6;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    margin-top: auto;
}

/* Methodology Section - Corporate Dark Style */
.methodology-section {
    background: var(--dark-navy);
    color: var(--white);
    padding: 60px 50px;
    text-align: center;
    position: relative;
    border-top: 3px solid #000;
}

.methodology-section h3 {
    font-size: 32px;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 50px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 28px;
    letter-spacing: 0.5px;
}

/* Corporate Step Design */
.methodology-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    max-width: 900px;
    
    margin: 0 auto;
}

.step {
    text-align: center;
    max-width: 200px;
    position: relative;
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--white);
    color: var(--dark-navy);
    border: 2px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0 auto 20px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.2s ease;
}

.step-number:hover {
    background: transparent;
    color: var(--white);
}

.step h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.step p {
    font-size: 14px;
    color: black(255, 255, 255, 0.8);
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* Corporate Step Arrows */
.step-arrow {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    margin: 0 15px;
}

/* Corporate Responsive Design */
@media (max-width: 1024px) {
    .service-pillars {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .methodology-steps {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .what-we-do-section {
        padding: 60px 0;
    }
    
    .what-we-do-header h2 {
        font-size: 28px;
    }
    
    .what-we-do-header .section-subtitle {
        font-size: 16px;
    }
    
    .primary-focus {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 60px;
        padding: 40px 30px;
    }
    
    .focus-text h3 {
        font-size: 24px;
        text-align: center;
    }
    
    .focus-text p {
        text-align: left;
    }
    
    .expansion-diagram {
        flex-direction: column;
        gap: 20px;
        padding: 30px 25px;
    }
    
    .connection-bridge {
        transform: rotate(90deg);
        margin: 20px 0;
    }
    
    .service-pillars {
        grid-template-columns: 1fr;
        gap: 1px;
        margin-bottom: 60px;
    }
    
    .pillar-item {
        padding: 30px 20px;
        min-height: 250px;
    }
    
    .methodology-section {
        padding: 50px 25px;
    }
    
    .methodology-section h3 {
        font-size: 24px;
        margin-bottom: 40px;
    }
    
    .methodology-steps {
        flex-direction: column;
        gap: 30px;
    }
    
    .step-arrow {
        transform: rotate(90deg);
        margin: 15px 0;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 16px;
        margin-bottom: 16px;
    }
}

@media (max-width: 480px) {
    .what-we-do-header {
        margin-bottom: 50px;
        padding-bottom: 30px;
    }
    
    .what-we-do-header h2 {
        font-size: 24px;
    }
    
    .primary-focus {
        padding: 25px 20px;
    }
    
    .expansion-diagram {
        padding: 25px 20px;
    }
    
    .region {
        min-width: 120px;
        padding: 20px 15px;
    }
    
    .pillar-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 20px;
    }
    
    .methodology-section {
        padding: 40px 20px;
    }
    
    .step-number {
        width: 45px;
        height: 45px;
        font-size: 14px;
        margin-bottom: 14px;
    }
    
    .step h5 {
        font-size: 13px;
    }
    
    .step p {
        font-size: 12px;
    }
}

/* Corporate Accessibility */
@media (prefers-reduced-motion: reduce) {
    .pillar-item,
    .pillar-icon,
    .step-number,
    .region {
        transition: none;
    }
    
    .pillar-item:hover,
    .region:hover {
        transform: none;
    }
}

/* Corporate High Contrast */
@media (prefers-contrast: high) {
    .primary-focus {
        border-width: 2px;
        border-color: #000;
    }
    
    .pillar-item {
        border: 1px solid #000;
    }
    
    .methodology-section {
        border-top-width: 4px;
    }
    
    .region {
        border-width: 2px;
    }
}



.primary-focus {
    background: var(--corporate-dark) !important;
    border: 1px solid #e5e7eb !important;
    padding: 50px !important;
    margin-bottom: 80px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
    position: relative !important;
}

.primary-focus h3{
    color: white;
}


/* Keep the top accent line */
.primary-focus::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: var(--dark-navy) !important;
}

/* Responsive background adjustments */
@media (max-width: 768px) {
    .primary-focus {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 40px 30px !important;
    }
}

@media (max-width: 480px) {
    .primary-focus {
        padding: 25px 20px !important;
    }
}






/* ========================================
   PROCESS SECTION CARD LAYOUT ALIGNMENT
   Add this to the END of your styles.css
   ======================================== */

/* Override methodology section to match the card design */
.methodology-section {
    background: var(--dark-navy) !important;
    color: var(--white) !important;
    padding: 80px 50px !important;
    text-align: center !important;
    position: relative !important;
    border-top: 3px solid #000 !important;
}

.methodology-section h3 {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: var(--white) !important;
    margin-bottom: 60px !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Card-based step layout */
.methodology-steps {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Individual step cards */
.step {
    background: var(--white) !important;
    color: var(--dark-navy) !important;
    padding: 40px 30px !important;
    border-radius: 12px !important;
    text-align: justify !important;
    max-width: 700px !important;
    min-height: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

/* Step numbers - positioned in top left */
.step-number {
 
}

/* Step titles */
.step h5 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--dark-navy) !important;
    margin-bottom: 20px !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    
}

/* Step descriptions */
.step p {
    font-size: 14px !important;
    color: var(--medium-gray) !important;
    line-height: 1.6 !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    text-align: justify !important;
    text-align-last: left !important; /* optional */
    display: none;
}


/* Arrow styling between cards */
.step-arrow {
    font-size: 28px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 300 !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    align-self: center !important;
    margin-top: 40px !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .methodology-steps {
        gap: 20px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .step {
        max-width: 240px !important;
        min-height: 300px !important;
        padding: 30px 25px !important;
    }
    
    .step-arrow {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .methodology-section {
        padding: 60px 30px !important;
    }
    
    .methodology-section h3 {
        font-size: 28px !important;
        margin-bottom: 50px !important;
    }
    
    .methodology-steps {
        flex-direction: column !important;
        gap: 30px !important;
        align-items: center !important;
    }
    
    .step {
        max-width: 100% !important;
        width: 100% !important;
        max-width: 400px !important;
        min-height: auto !important;
        padding: 35px 30px !important;
        text-align: center !important;
    }
    
    .step-number {
        text-align: center !important;
        margin-bottom: 15px !important;
        font-size: 28px !important;
    }
    
    .step h5 {
        text-align: center !important;
        margin-bottom: 15px !important;
        font-size: 16px !important;
    }
    
    .step p {
        text-align: center !important;
        font-size: 14px !important;
    }
    
    .step-arrow {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .methodology-section {
        padding: 50px 20px !important;
    }
    
    .methodology-section h3 {
        font-size: 24px !important;
        margin-bottom: 40px !important;
    }
    
    .step {
        padding: 30px 25px !important;
        max-width: 100% !important;
    }
    
    .step-number {
        font-size: 24px !important;
    }
    
    .step h5 {
        font-size: 15px !important;
    }
    
    .step p {
        font-size: 13px !important;
    }
}

/* Accessibility and Polish */
@media (prefers-reduced-motion: reduce) {
    .step {
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .step {
        border: 2px solid var(--dark-navy) !important;
    }
    
    .methodology-section {
        border-top-width: 4px !important;
    }
}





/* ========================================
   PROFESSIONAL CORPORATE SERVICES PAGE
   Add this to the END of your styles.css
   ======================================== */

/* Corporate Services Hero */
.corporate-services-hero {
    height: 70vh;
    min-height: 500px;
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-navy) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.corporate-services-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="services-grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23services-grid)"/></svg>');
    opacity: 0.3;
}

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

.services-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}

.services-hero-content .hero-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Poppins', sans-serif;
}

/* Services Mission */
.services-mission {
    padding: 100px 0;
    background: var(--white);
    text-align: center;
}

.services-mission .mission-content h2 {
    font-size: 3rem;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 2rem;
    line-height: 1.2;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
}

.services-mission .mission-content p {
    font-size: 1.2rem;
    color: var(--medium-gray);
    font-weight: 300;
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    text-align: justify;
}

/* Market Selection Section */
.market-selection-section {
    padding: 100px 0;
    background: #f8f9fb;
    position: relative;
}

.market-selection-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(30, 41, 59, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 41, 59, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
}

.market-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.market-header h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.market-header .section-subtitle {
    font-size: 1.1rem;
    color: var(--medium-gray);
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
}

/* Market Tabs */
.market-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
    background: var(--white);
    border: 2px solid #d1d5db;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

.market-tab {
    flex: 1;
    padding: 20px 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    font-family: 'Poppins', sans-serif;
    justify-content: center;
}

.market-tab:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: #d1d5db;
}

.market-tab.active {
    background: var(--dark-navy);
    color: var(--white);
}

.market-tab:hover:not(.active) {
    background: #f3f4f6;
}

.tab-label {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Market Content Container */
.market-content-container {
    position: relative;
    z-index: 2;
}

.market-content {
    display: none;
    background: var(--white);
    border: 1px solid #d1d5db;
    padding: 50px;
    position: relative;
}

.market-content.active {
    display: block;
}

.market-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--dark-navy);
}

/* Market Overview */
.market-overview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 2px solid #f3f4f6;
}

.market-info h3 {
    font-size: 2rem;
    font-weight: 500;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.market-info p {
    font-size: 1.1rem;
    color: var(--medium-gray);
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.market-stats {
    display: flex;
    gap: 40px;
    justify-content: flex-end;
}

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

.stat-item h4 {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.stat-item p {
    font-size: 0.9rem;
    color: var(--medium-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Poppins', sans-serif;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #d1d5db;
    border: 1px solid #d1d5db;
}

.service-category {
    background: var(--white);
    padding: 40px;
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.service-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--dark-navy);
}

.category-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.category-header h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-navy);
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* BULLET POINT FIXES - Override all conflicting styles */
.service-list,
.service-list li,
.step-details,
.step-details li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: outside !important;
}

.service-list {
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: 1;
}

.service-list li {
    padding: 12px 0 12px 20px !important;
    color: var(--medium-gray) !important;
    font-size: 0.95rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    position: relative !important;
    border-bottom: 1px solid #f3f4f6 !important;
    transition: all 0.2s ease !important;
    list-style: none !important;
    display: block !important;
}

.service-list li:last-child {
    border-bottom: none !important;
}

.service-list li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    color: var(--dark-navy) !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

.service-list li:hover {
    color: var(--dark-navy) !important;
    padding-left: 25px !important;
}

/* Step details bullet fix */
.step-details {
    padding: 0 !important;
    margin: 0 !important;
}

.step-details li {
    padding: 8px 0 8px 20px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.9rem !important;
    font-family: 'Poppins', sans-serif !important;
    position: relative !important;
    list-style: none !important;
    display: block !important;
}

.step-details li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Distribution Excellence */
.distribution-excellence {
    padding: 100px 0;
    background: var(--white);
}

.distribution-header {
    text-align: center;
    margin-bottom: 80px;
}

.distribution-header h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--dark-navy);
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.distribution-header .lead {
    font-size: 1.3rem;
    color: var(--dark-navy);
    font-weight: 500;
    max-width: 800px;
    margin: 0 auto 2rem;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

.distribution-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    align-items: center;
}

.distribution-features {
    display: grid;
    gap: 30px;
}

.feature-card {
    background: #f8f9fb;
    border: 1px solid #e5e7eb;
    padding: 30px;
    position: relative;
    transition: all 0.3s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--dark-navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card:hover {
    background: var(--white);
    border-color: var(--dark-navy);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.feature-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--medium-gray);
    line-height: 1.6;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* Network Diagram */
.distribution-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.network-diagram {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-hub {
    width: 100px;
    height: 100px;
    background: var(--dark-navy);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    position: relative;
    z-index: 3;
    box-shadow: 0 8px 25px rgba(30, 41, 59, 0.3);
}

.network-nodes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.node {
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--white);
    border: 3px solid var(--primary-navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: var(--dark-navy);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.node:hover {
    transform: scale(1.1);
    border-color: var(--dark-navy);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.node.asia {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.node.europe {
    bottom: 20px;
    left: 20px;
}

.node.mena {
    bottom: 20px;
    right: 20px;
}

/* Connection lines */
.network-diagram::before,
.network-diagram::after {
    content: '';
    position: absolute;
    width: 2px;
    background: #d1d5db;
    z-index: 1;
}

.network-diagram::before {
    height: 120px;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
}

.network-diagram::after {
    width: 180px;
    height: 2px;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
}

/* Services Process */
.services-process {
    padding: 100px 0;
    background: var(--dark-navy);
    color: var(--white);
}

.process-header {
    text-align: center;
    margin-bottom: 80px;
}

.process-header h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.process-header p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.process-timeline {
    display: grid;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.process-step {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 40px;
    align-items: start;
    position: relative;
}

.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 49px;
    top: 80px;
    bottom: -60px;
    width: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.step-number {
    width: 80px;
    height: 80px;
    background: var(--white);
    color: var(--dark-navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.step-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.step-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.step-details {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.step-details li {
    padding: 8px 0 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.9rem !important;
    font-family: 'Poppins', sans-serif !important;
    position: relative !important;
    padding-left: 20px !important;
    list-style: none !important;
}

.step-details li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: bold !important;
    font-size: 1rem !important;
}

/* Success Metrics */
.success-metrics {
    padding: 100px 0;
    background: #f8f9fb;
}

.success-header {
    text-align: center;
    margin-bottom: 80px;
}

.success-header h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.success-header p {
    font-size: 1.1rem;
    color: var(--medium-gray);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #d1d5db;
    border: 1px solid #d1d5db;
    max-width: 1000px;
    margin: 0 auto;
}

.metric-card {
    background: var(--white);
    padding: 50px 30px;
    text-align: center;
    position: relative;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--dark-navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.metric-card:hover::before {
    transform: scaleX(1);
}

.metric-card:hover {
    background: #f9fafb;
}

.metric-number {
    font-size: 3rem;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

.metric-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.metric-card p {
    font-size: 0.9rem;
    color: var(--medium-gray);
    line-height: 1.5;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* Services CTA */
.services-cta {
    padding: 100px 0;
    background: var(--dark-navy);
    color: var(--white);
    text-align: center;
}

.services-cta .cta-content h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.services-cta .cta-content p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: var(--white);
    color: var(--dark-navy);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(30, 41, 59, 0.1), transparent);
    transition: left 0.6s ease;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.cta-button::after {
    content: '→';
    font-size: 1.2rem;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.cta-button:hover::after {
    transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .market-overview {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .market-stats {
        justify-content: center;
        gap: 30px;
    }
    
    .distribution-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .corporate-services-hero {
        height: 60vh;
        min-height: 400px;
    }
    
    .services-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .services-hero-content .hero-subtitle {
        font-size: 1rem;
    }
    
    .services-mission {
        padding: 80px 0;
    }
    
    .services-mission .mission-content h2 {
        font-size: 2rem;
    }
    
    .services-mission .mission-content p {
        font-size: 1rem;
        text-align: left;
    }
    
    .market-selection-section {
        padding: 80px 0;
    }
    
    .market-header h2 {
        font-size: 2rem;
    }
    
    .market-tabs {
        flex-direction: column;
        max-width: 400px;
    }
    
    .market-tab:not(:last-child)::after {
        display: none;
    }
    
    .market-content {
        padding: 40px 30px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .market-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .distribution-excellence,
    .services-process,
    .success-metrics,
    .services-cta {
        padding: 80px 0;
    }
    
    .distribution-header h2,
    .process-header h2,
    .success-header h2,
    .services-cta .cta-content h2 {
        font-size: 2rem;
    }
    
    .process-step {
        grid-template-columns: 80px 1fr;
        gap: 30px;
    }
    
    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 1px;
    }
    
    .metric-number {
        font-size: 2.5rem;
    }
    
    .network-diagram {
        width: 250px;
        height: 250px;
    }
    
    .center-hub {
        width: 80px;
        height: 80px;
        font-size: 1rem;
    }
    
    .node {
        width: 60px;
        height: 60px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .services-hero-content h1 {
        font-size: 2rem;
    }
    
    .services-hero-content .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .market-header h2 {
        font-size: 1.8rem;
    }
    
    .market-content {
        padding: 30px 20px;
    }
    
    .market-info h3 {
        font-size: 1.5rem;
    }
    
    .service-category {
        padding: 30px 20px;
        min-height: 300px;
    }
    
    .feature-card {
        padding: 25px 20px;
    }
    
    .process-step {
        grid-template-columns: 60px 1fr;
        gap: 20px;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
    
    .step-content h3 {
        font-size: 1.2rem;
    }
    
    .metric-card {
        padding: 40px 25px;
        min-height: 200px;
    }
    
    .metric-number {
        font-size: 2rem;
    }
    
    .cta-button {
        padding: 16px 32px;
        font-size: 0.9rem;
    }
    
    .network-diagram {
        width: 200px;
        height: 200px;
    }
    
    .center-hub {
        width: 60px;
        height: 60px;
        font-size: 0.9rem;
    }
    
    .node {
        width: 50px;
        height: 50px;
        font-size: 0.7rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .market-tab,
    .feature-card,
    .metric-card,
    .cta-button,
    .node {
        transition: none;
    }
    
    .feature-card:hover,
    .metric-card:hover,
    .cta-button:hover {
        transform: none;
    }
    
    .cta-button::before {
        display: none;
    }
}

/* Focus states for accessibility */
.market-tab:focus,
.cta-button:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.market-tab:focus {
    outline-color: var(--primary-navy);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .market-content,
    .feature-card,
    .service-category,
    .metric-card {
        border-width: 2px;
    }
    
    .market-tabs {
        border-width: 3px;
    }
    
    .services-grid,
    .metrics-grid {
        gap: 2px;
        background: #000;
    }
}

/* NUCLEAR BULLET POINT FIX - Add this at the very end */
/* Remove any default list styling from theme or browser */
.market-content ul,
.market-content ul li,
.market-content .service-list,
.market-content .service-list li,
.services-grid ul,
.services-grid ul li,
.services-grid .service-list,
.services-grid .service-list li,
.service-category ul,
.service-category ul li,
.service-category .service-list,
.service-category .service-list li,
.process-timeline ul,
.process-timeline ul li,
.process-timeline .step-details,
.process-timeline .step-details li,
ul.service-list,
ul.service-list li,
ul.step-details,
ul.step-details li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: outside !important;
    margin: 0 !important;
    padding-left: 0 !important;
    background-image: none !important;
}

/* Remove all possible pseudo-elements that could create bullets */
.market-content ul li::before,
.market-content .service-list li::before,
.services-grid ul li::before,
.services-grid .service-list li::before,
.service-category ul li::before,
.service-category .service-list li::before {
    display: none !important;
    content: none !important;
}

.market-content ul li::after,
.market-content .service-list li::after,
.services-grid ul li::after,
.services-grid .service-list li::after,
.service-category ul li::after,
.service-category .service-list li::after {
    display: none !important;
    content: none !important;
}

/* Now add back ONLY our custom bullet */
.service-category .service-list li::before {
    display: block !important;
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    color: var(--dark-navy) !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    width: 15px !important;
    height: 15px !important;
}

.process-timeline .step-details li::before {
    display: block !important;
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    width: 15px !important;
    height: 15px !important;
}

/* Ensure proper positioning */
.service-category .service-list li {
    position: relative !important;
    padding-left: 20px !important;
    display: block !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-right: 0 !important;
}

.process-timeline .step-details li {
    position: relative !important;
    padding-left: 20px !important;
    display: block !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-right: 0 !important;
}


/* ========================================
   PROFESSIONAL CORPORATE SERVICES PAGE
   Add this to the END of your styles.css
   ======================================== */

/* Corporate Services Hero */
.corporate-services-hero {
    height: 70vh;
    min-height: 500px;
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-navy) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.corporate-services-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="services-grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23services-grid)"/></svg>');
    opacity: 0.3;
}

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

.services-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}

.services-hero-content .hero-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Poppins', sans-serif;
}

/* Services Mission */
.services-mission {
    padding: 100px 0;
    background: var(--white);
    text-align: center;
}

.services-mission .mission-content h2 {
    font-size: 3rem;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 2rem;
    line-height: 1.2;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
}

.services-mission .mission-content p {
    font-size: 1.2rem;
    color: var(--medium-gray);
    font-weight: 300;
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    text-align: justify;
}

/* Market Selection Section */
.market-selection-section {
    padding: 100px 0;
    background: #f8f9fb;
    position: relative;
}

.market-selection-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(30, 41, 59, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 41, 59, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
}

.market-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.market-header h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.market-header .section-subtitle {
    font-size: 1.1rem;
    color: var(--medium-gray);
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
}

/* Market Tabs */
.market-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
    background: var(--white);
    border: 2px solid #d1d5db;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

.market-tab {
    flex: 1;
    padding: 20px 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    font-family: 'Poppins', sans-serif;
    justify-content: center;
}

.market-tab:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: #d1d5db;
}

.market-tab.active {
    background: var(--dark-navy);
    color: var(--white);
}

.market-tab:hover:not(.active) {
    background: #f3f4f6;
}

.tab-label {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Market Content Container */
.market-content-container {
    position: relative;
    z-index: 2;
}

.market-content {
    display: none;
    background: var(--white);
    border: 1px solid #d1d5db;
    padding: 50px;
    position: relative;
}

.market-content.active {
    display: block;
}

.market-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--dark-navy);
}

/* Market Overview */
.market-overview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 2px solid #f3f4f6;
}

.market-info h3 {
    font-size: 2rem;
    font-weight: 500;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.market-info p {
    font-size: 1.1rem;
    color: var(--medium-gray);
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.market-stats {
    display: flex;
    gap: 40px;
    justify-content: flex-end;
}

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

.stat-item h4 {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.stat-item p {
    font-size: 0.9rem;
    color: var(--medium-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Poppins', sans-serif;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #d1d5db;
    border: 1px solid #d1d5db;
}

.service-category {
    background: var(--white);
    padding: 40px;
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.service-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--dark-navy);
}

.category-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.category-header h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-navy);
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* BULLET POINT FIXES - Override all conflicting styles */
.service-list,
.service-list li,
.step-details,
.step-details li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: outside !important;
}

.service-list {
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: 1;
}

.service-list li {
    padding: 12px 0 12px 20px !important;
    color: var(--medium-gray) !important;
    font-size: 0.95rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    position: relative !important;
    border-bottom: 1px solid #f3f4f6 !important;
    transition: all 0.2s ease !important;
    list-style: none !important;
    display: block !important;
}

.service-list li:last-child {
    border-bottom: none !important;
}

.service-list li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    color: var(--dark-navy) !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

.service-list li:hover {
    color: var(--dark-navy) !important;
    padding-left: 25px !important;
}

/* Step details bullet fix */
.step-details {
    padding: 0 !important;
    margin: 0 !important;
}

.step-details li {
    padding: 8px 0 8px 20px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.9rem !important;
    font-family: 'Poppins', sans-serif !important;
    position: relative !important;
    list-style: none !important;
    display: block !important;
}

.step-details li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Distribution Excellence */
.distribution-excellence {
    padding: 100px 0;
    background: var(--white);
}

.distribution-header {
    text-align: center;
    margin-bottom: 80px;
}

.distribution-header h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--dark-navy);
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.distribution-header .lead {
    font-size: 1.3rem;
    color: var(--dark-navy);
    font-weight: 500;
    max-width: 800px;
    margin: 0 auto 2rem;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

.distribution-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    align-items: center;
}

.distribution-features {
    display: grid;
    gap: 30px;
}

.feature-card {
    background: #f8f9fb;
    border: 1px solid #e5e7eb;
    padding: 30px;
    position: relative;
    transition: all 0.3s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--dark-navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card:hover {
    background: var(--white);
    border-color: var(--dark-navy);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.feature-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--medium-gray);
    line-height: 1.6;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* Network Diagram */
.distribution-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.network-diagram {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-hub {
    width: 100px;
    height: 100px;
    background: var(--dark-navy);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    position: relative;
    z-index: 3;
    box-shadow: 0 8px 25px rgba(30, 41, 59, 0.3);
}

.network-nodes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.node {
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--white);
    border: 3px solid var(--primary-navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: var(--dark-navy);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.node:hover {
    transform: scale(1.1);
    border-color: var(--dark-navy);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.node.asia {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.node.europe {
    bottom: 20px;
    left: 20px;
}

.node.mena {
    bottom: 20px;
    right: 20px;
}

/* Connection lines */
.network-diagram::before,
.network-diagram::after {
    content: '';
    position: absolute;
    width: 2px;
    background: #d1d5db;
    z-index: 1;
}

.network-diagram::before {
    height: 120px;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
}

.network-diagram::after {
    width: 180px;
    height: 2px;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
}

/* Services Process */
.services-process {
    padding: 100px 0;
    background: var(--dark-navy);
    color: var(--white);
}

.process-header {
    text-align: center;
    margin-bottom: 80px;
}

.process-header h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.process-header p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.process-timeline {
    display: grid;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.process-step {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 40px;
    align-items: start;
    position: relative;
}

.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 49px;
    top: 80px;
    bottom: -60px;
    width: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.step-number {
    width: 80px;
    height: 80px;
    background: var(--white);
    color: var(--dark-navy);
  
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    position: relative;
    z-index: 2;
}

.step-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.step-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.step-details {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.step-details li {
    padding: 8px 0 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.9rem !important;
    font-family: 'Poppins', sans-serif !important;
    position: relative !important;
    padding-left: 20px !important;
    list-style: none !important;
}

.step-details li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: bold !important;
    font-size: 1rem !important;
}

/* Success Metrics */
.success-metrics {
    padding: 100px 0;
    background: #f8f9fb;
}

.success-header {
    text-align: center;
    margin-bottom: 80px;
}

.success-header h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--dark-navy);
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.success-header p {
    font-size: 1.1rem;
    color: var(--medium-gray);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #d1d5db;
    border: 1px solid #d1d5db;
    max-width: 1000px;
    margin: 0 auto;
}

.metric-card {
    background: var(--white);
    padding: 50px 30px;
    text-align: center;
    position: relative;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--dark-navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.metric-card:hover::before {
    transform: scaleX(1);
}

.metric-card:hover {
    background: #f9fafb;
}

.metric-number {
    font-size: 3rem;
    font-weight: 300;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

.metric-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.metric-card p {
    font-size: 0.9rem;
    color: var(--medium-gray);
    line-height: 1.5;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* Services CTA */
.services-cta {
    padding: 100px 0;
    background: var(--dark-navy);
    color: var(--white);
    text-align: center;
}

.services-cta .cta-content h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.services-cta .cta-content p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: var(--white);
    color: var(--dark-navy);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(30, 41, 59, 0.1), transparent);
    transition: left 0.6s ease;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.cta-button::after {
    content: '→';
    font-size: 1.2rem;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.cta-button:hover::after {
    transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .market-overview {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .market-stats {
        justify-content: center;
        gap: 30px;
    }
    
    .distribution-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .corporate-services-hero {
        height: 60vh;
        min-height: 400px;
    }
    
    .services-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .services-hero-content .hero-subtitle {
        font-size: 1rem;
    }
    
    .services-mission {
        padding: 80px 0;
    }
    
    .services-mission .mission-content h2 {
        font-size: 2rem;
    }
    
    .services-mission .mission-content p {
        font-size: 1rem;
        text-align: left;
    }
    
    .market-selection-section {
        padding: 80px 0;
    }
    
    .market-header h2 {
        font-size: 2rem;
    }
    
    .market-tabs {
        flex-direction: column;
        max-width: 400px;
    }
    
    .market-tab:not(:last-child)::after {
        display: none;
    }
    
    .market-content {
        padding: 40px 30px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .market-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .distribution-excellence,
    .services-process,
    .success-metrics,
    .services-cta {
        padding: 80px 0;
    }
    
    .distribution-header h2,
    .process-header h2,
    .success-header h2,
    .services-cta .cta-content h2 {
        font-size: 2rem;
    }
    
    .process-step {
        grid-template-columns: 80px 1fr;
        gap: 30px;
    }
    
    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 1px;
    }
    
    .metric-number {
        font-size: 2.5rem;
    }
    
    .network-diagram {
        width: 250px;
        height: 250px;
    }
    
    .center-hub {
        width: 80px;
        height: 80px;
        font-size: 1rem;
    }
    
    .node {
        width: 60px;
        height: 60px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .services-hero-content h1 {
        font-size: 2rem;
    }
    
    .services-hero-content .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .market-header h2 {
        font-size: 1.8rem;
    }
    
    .market-content {
        padding: 30px 20px;
    }
    
    .market-info h3 {
        font-size: 1.5rem;
    }
    
    .service-category {
        padding: 30px 20px;
        min-height: 300px;
    }
    
    .feature-card {
        padding: 25px 20px;
    }
    
    .process-step {
        grid-template-columns: 60px 1fr;
        gap: 20px;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
    
    .step-content h3 {
        font-size: 1.2rem;
    }
    
    .metric-card {
        padding: 40px 25px;
        min-height: 200px;
    }
    
    .metric-number {
        font-size: 2rem;
    }
    
    .cta-button {
        padding: 16px 32px;
        font-size: 0.9rem;
    }
    
    .network-diagram {
        width: 200px;
        height: 200px;
    }
    
    .center-hub {
        width: 60px;
        height: 60px;
        font-size: 0.9rem;
    }
    
    .node {
        width: 50px;
        height: 50px;
        font-size: 0.7rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .market-tab,
    .feature-card,
    .metric-card,
    .cta-button,
    .node {
        transition: none;
    }
    
    .feature-card:hover,
    .metric-card:hover,
    .cta-button:hover {
        transform: none;
    }
    
    .cta-button::before {
        display: none;
    }
}

/* Focus states for accessibility */
.market-tab:focus,
.cta-button:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.market-tab:focus {
    outline-color: var(--primary-navy);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .market-content,
    .feature-card,
    .service-category,
    .metric-card {
        border-width: 2px;
    }
    
    .market-tabs {
        border-width: 3px;
    }
    
    .services-grid,
    .metrics-grid {
        gap: 2px;
        background: #000;
    }
}

/* NUCLEAR BULLET POINT FIX - Add this at the very end */
/* Remove any default list styling from theme or browser */
.market-content ul,
.market-content ul li,
.market-content .service-list,
.market-content .service-list li,
.services-grid ul,
.services-grid ul li,
.services-grid .service-list,
.services-grid .service-list li,
.service-category ul,
.service-category ul li,
.service-category .service-list,
.service-category .service-list li,
.process-timeline ul,
.process-timeline ul li,
.process-timeline .step-details,
.process-timeline .step-details li,
ul.service-list,
ul.service-list li,
ul.step-details,
ul.step-details li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: outside !important;
    margin: 0 !important;
    padding-left: 0 !important;
    background-image: none !important;
}

/* Remove all possible pseudo-elements that could create bullets */
.market-content ul li::before,
.market-content .service-list li::before,
.services-grid ul li::before,
.services-grid .service-list li::before,
.service-category ul li::before,
.service-category .service-list li::before {
    display: none !important;
    content: none !important;
}

.market-content ul li::after,
.market-content .service-list li::after,
.services-grid ul li::after,
.services-grid .service-list li::after,
.service-category ul li::after,
.service-category .service-list li::after {
    display: none !important;
    content: none !important;
}

/* Now add back ONLY our custom bullet - REMOVED FOR NO BULLETS */
.service-category .service-list li::before {
    display: none !important;
    content: none !important;
}

.process-timeline .step-details li::before {
    display: none !important;
    content: none !important;
}

/* Ensure proper positioning - NO BULLETS */
.service-category .service-list li {
    position: relative !important;
    padding-left: 0 !important;
    display: block !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-right: 0 !important;
}

.process-timeline .step-details li {
    position: relative !important;
    padding-left: 0 !important;
    display: block !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-right: 0 !important;
}



/* ========================================
   YSIS INTERACTIVE DIAGRAM SECTION
   Add this to the END of your styles.css
   ======================================== */

/* Main Interactive Section */
.ysis-interactive-section {
    padding: 100px 0;
    background: var(--white);
    position: relative;
}

.interactive-diagram-wrapper {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0 auto 80px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Central YSIS Logo */
/* Central YSIS Logo */
.central-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(30, 41, 59, 0.2);
    z-index: 10;
    transition: all 0.3s ease;
    overflow: hidden;
}
.central-logo:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 12px 40px rgba(30, 41, 59, 0.3);
}

.ysis-center-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.center-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--dark-navy);
    text-align: center;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Interactive Branches */
.branch {
    position: absolute;
    width: 140px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5;
}

.branch:hover {
    transform: scale(1.05);
}

.branch.active {
    transform: scale(1.1);
}

.branch.active .branch-circle {
    background: var(--dark-navy);
    border-color: var(--dark-navy);
    color: var(--white);
    box-shadow: 0 8px 25px rgba(30, 41, 59, 0.4);
}

.branch.active .branch-label {
    color: var(--dark-navy);
    font-weight: 700;
}

/* Branch Circle */
.branch-circle {
    width: 60px;
    height: 60px;
    background: var(--white);
    border: 3px solid var(--primary-navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.branch-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-navy);
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s ease;
}

.branch.active .branch-number {
    color: var(--white);
}

/* Branch Label */
.branch-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--medium-gray);
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
    transition: all 0.3s ease;
}

/* Branch Positioning */
/* Branch Positioning - Evenly Distributed */
.branch-1 {
    top: 0px;
    left: 50%;
 
}

.branch-2 {
    top: 116px;
    right: 0px;
}

.branch-3 {
    bottom: 116px;
    right: 0px;
}

.branch-4 {
    bottom: 0px;
    left: 50%;
   
}

.branch-5 {
    top: 116px;
    left: 0px;
}
/* Connection Lines */
.connection-line {
    position: absolute;
    background: var(--light-gray);
    z-index: 1;
    transition: all 0.3s ease;
}

.line-1 {
    width: 2px;
    height: 120px;
    top: 80px;
    left: 50%;
   
}

.line-2 {
    width: 140px;
    height: 2px;
    top: 50%;
    right: 100px;
  
}

.line-3 {
    width: 140px;
    height: 2px;
    bottom: 50%;
    right: 100px;
   
}

.line-4 {
    width: 2px;
    height: 120px;
    bottom: 80px;
    left: 50%;
   
}

.line-5 {
    width: 140px;
    height: 2px;
    top: 50%;
    left: 100px;
   
}

/* Content Display Area */
.content-display-area {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    min-height: 200px;
}

.content-card {
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    padding: 40px 50px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

.content-card.active {
    opacity: 1;
    transform: translateY(0);
}

.content-card h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.content-card p {
    font-size: 16px;
    color: var(--medium-gray);
    line-height: 1.7;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    text-align: justify;
}

/* Hover Effects for Connection Lines */
.branch.active ~ .connection-line,
.branch:hover ~ .connection-line {
    background: var(--dark-navy);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .interactive-diagram-wrapper {
        width: 500px;
        height: 500px;
    }
    
    .central-logo {
        width: 120px;
        height: 120px;
    }
    
    .ysis-center-logo {
        max-width: 60px;
        max-height: 45px;
    }
    
    .center-title {
        display: none;
    }
    
    .branch {
        width: 120px;
    }
    
    .branch-circle {
        width: 50px;
        height: 50px;
    }
    
    .branch-number {
        font-size: 16px;
    }
    
    .branch-label {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .ysis-interactive-section {
        padding: 80px 0;
    }
    
    .interactive-diagram-wrapper {
        width: 400px;
        height: 400px;
        margin-bottom: 60px;
    }
    
    .central-logo {
        width: 100px;
        height: 100px;
    }
    
    .ysis-center-logo {
        max-width: 50px;
        max-height: 35px;
    }
    
    .center-title {
        font-size: 9px;
    }
    
    .branch {
        width: 100px;
    }
    
    .branch-circle {
        width: 45px;
        height: 45px;
    }
    
    .branch-number {
        font-size: 14px;
    }
    
    .branch-label {
        font-size: 11px;
    }
    
    .content-card {
        padding: 30px 25px;
    }
    
    .content-card h3 {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    .content-card p {
        font-size: 15px;
        text-align: left;
    }
    
    /* Adjust branch positioning for mobile */
    .branch-2, .branch-3 {
        right: 20px;
    }
    
    .branch-5 {
        left: 20px;
    }
    
    /* Adjust connection lines for mobile */
    .line-2, .line-3, .line-5 {
        width: 100px;
    }
}

@media (max-width: 480px) {
    .interactive-diagram-wrapper {
        width: 320px;
        height: 320px;
    }
    
    .central-logo {
        width: 80px;
        height: 80px;
    }
    
    .ysis-center-logo {
        max-width: 40px;
        max-height: 28px;
    }
    
    .center-title {
        font-size: 8px;
    }
    
    .branch {
        width: 80px;
    }
    
    .branch-circle {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }
    
    .branch-number {
        font-size: 12px;
    }
    
    .branch-label {
        font-size: 10px;
        line-height: 1.2;
    }
    
    .content-card {
        padding: 25px 20px;
    }
    
    .content-card h3 {
        font-size: 18px;
    }
    
    .content-card p {
        font-size: 14px;
    }
    
    /* Mobile branch positioning */
    .branch-1 {
        top: 15px;
    }
    
    .branch-4 {
        bottom: 15px;
    }
    
    .branch-2, .branch-3 {
        right: 15px;
    }
    
    .branch-5 {
        left: 15px;
    }
    
    /* Mobile connection lines */
    .line-1, .line-4 {
        height: 80px;
    }
    
    .line-2, .line-3, .line-5 {
        width: 80px;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .branch,
    .central-logo,
    .content-card,
    .connection-line {
        transition: none;
    }
    
    .branch:hover,
    .central-logo:hover {
        transform: none;
    }
    
    .branch.active {
        transform: none;
    }
}

/* Focus states for accessibility */
.branch:focus {
    outline: 2px solid var(--primary-navy);
    outline-offset: 4px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .central-logo,
    .branch-circle {
        border-width: 4px;
    }
    
    .content-card {
        border-width: 2px;
        border-color: var(--dark-navy);
    }
    
    .connection-line {
        background: var(--dark-navy);
        height: 3px;
        width: 3px;
    }
    
    .line-2, .line-3, .line-5 {
        height: 3px;
    }
    
    .line-1, .line-4 {
        width: 3px;
    }
}

/* ========================================
   YSIS INTERACTIVE DIAGRAM ALIGNMENT FIX
   Add this to the END of your styles.css
   ======================================== */

/* Fix Connection Lines Alignment */
.connection-line {
    position: absolute;
    background: var(--light-gray);
    z-index: 1;
    transition: all 0.3s ease;
}

/* Line 1: Top branch to center */
.line-1 {
    width: 2px;
    height: 90px;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
}

/* Line 2: Top-right branch to center */
.line-2 {
    width: 110px;
    height: 2px;
    top: 186px; /* Align with branch-2 position */
    right: 120px;
    transform: rotate(30deg);
    transform-origin: left center;
}

/* Line 3: Bottom-right branch to center */
.line-3 {
    width: 110px;
    height: 2px;
    bottom: 186px; /* Align with branch-3 position */
    right: 120px;
    transform: rotate(-30deg);
    transform-origin: left center;
}

/* Line 4: Bottom branch to center */
.line-4 {
    width: 2px;
    height: 90px;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
}

/* Line 5: Top-left branch to center */
.line-5 {
    width: 110px;
    height: 2px;
    top: 186px; /* Align with branch-5 position */
    left: 120px;
    transform: rotate(-30deg);
    transform-origin: right center;
}

/* Improved Branch Positioning - More Precise */
.branch-1 {
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.branch-2 {
    top: 140px;
    right: 30px;
}

.branch-3 {
    bottom: 140px;
    right: 30px;
}

.branch-4 {
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.branch-5 {
    top: 140px;
    left: 30px;
}

/* Active line highlighting */
.branch-1.active ~ .line-1,
.branch-1:hover ~ .line-1 {
    background: var(--dark-navy);
}

.branch-2.active ~ .line-2,
.branch-2:hover ~ .line-2 {
    background: var(--dark-navy);
}

.branch-3.active ~ .line-3,
.branch-3:hover ~ .line-3 {
    background: var(--dark-navy);
}

.branch-4.active ~ .line-4,
.branch-4:hover ~ .line-4 {
    background: var(--dark-navy);
}

.branch-5.active ~ .line-5,
.branch-5:hover ~ .line-5 {
    background: var(--dark-navy);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .line-1, .line-4 {
        height: 80px;
    }
    
    .line-2, .line-3, .line-5 {
        width: 90px;
    }
    
    .line-1 {
        top: 85px;
    }
    
    .line-4 {
        bottom: 85px;
    }
    
    .line-2, .line-3 {
        right: 110px;
    }
    
    .line-5 {
        left: 110px;
    }
    
    .branch-1 {
        top: 25px;
    }
    
    .branch-4 {
        bottom: 25px;
    }
    
    .branch-2, .branch-3 {
        right: 25px;
    }
    
    .branch-5 {
        left: 25px;
    }
    
    .branch-2 {
        top: 120px;
    }
    
    .branch-3 {
        bottom: 120px;
    }
    
    .branch-5 {
        top: 120px;
    }
}

@media (max-width: 768px) {
    .line-1, .line-4 {
        height: 70px;
    }
    
    .line-2, .line-3, .line-5 {
        width: 75px;
    }
    
    .line-1 {
        top: 75px;
    }
    
    .line-4 {
        bottom: 75px;
    }
    
    .line-2, .line-3 {
        right: 90px;
    }
    
    .line-5 {
        left: 90px;
    }
    
    .branch-1 {
        top: 20px;
    }
    
    .branch-4 {
        bottom: 20px;
    }
    
    .branch-2, .branch-3 {
        right: 20px;
    }
    
    .branch-5 {
        left: 20px;
    }
    
    .branch-2 {
        top: 100px;
    }
    
    .branch-3 {
        bottom: 100px;
    }
    
    .branch-5 {
        top: 100px;
    }
}

@media (max-width: 480px) {
    .line-1, .line-4 {
        height: 55px;
    }
    
    .line-2, .line-3, .line-5 {
        width: 60px;
    }
    
    .line-1 {
        top: 60px;
    }
    
    .line-4 {
        bottom: 60px;
    }
    
    .line-2, .line-3 {
        right: 70px;
    }
    
    .line-5 {
        left: 70px;
    }
    
    .branch-1 {
        top: 15px;
    }
    
    .branch-4 {
        bottom: 15px;
    }
    
    .branch-2, .branch-3 {
        right: 15px;
    }
    
    .branch-5 {
        left: 15px;
    }
    
    .branch-2 {
        top: 80px;
    }
    
    .branch-3 {
        bottom: 80px;
    }
    
    .branch-5 {
        top: 80px;
    }
}


/* ========================================
   REMOVE INTERACTIVE DIAGRAM CONNECTION LINES
   Add this to the VERY END of your styles.css
   ======================================== */

/* Hide all connection lines */
.connection-line,
.line-1,
.line-2,
.line-3,
.line-4,
.line-5 {
    display: none !important;
}

/* Remove any pseudo-elements that might be creating lines */
.interactive-diagram-wrapper::before,
.interactive-diagram-wrapper::after,
.branch::before,
.branch::after,
.central-logo::before,
.central-logo::after {
    display: none !important;
    content: none !important;
}

/* Clean up any hover effects for lines */
.branch.active ~ .connection-line,
.branch:hover ~ .connection-line,
.branch-1.active ~ .line-1,
.branch-1:hover ~ .line-1,
.branch-2.active ~ .line-2,
.branch-2:hover ~ .line-2,
.branch-3.active ~ .line-3,
.branch-3:hover ~ .line-3,
.branch-4.active ~ .line-4,
.branch-4:hover ~ .line-4,
.branch-5.active ~ .line-5,
.branch-5:hover ~ .line-5 {
    display: none !important;
}

/* Optional: Add subtle glow effect to active branches instead */
.branch.active .branch-circle {
    box-shadow: 0 0 20px rgba(30, 41, 59, 0.4) !important;
}

/* ========================================
   FIX BRANCH HOVER MOVEMENT
   Add this to the END of your styles.css
   ======================================== */

/* Stop branches 1 and 4 from moving on hover */
.branch-1,
.branch-4 {
    transform: translateX(-50%) !important;
}

.branch-1:hover,
.branch-4:hover {
    transform: translateX(-50%) !important;
}

.branch-1.active,
.branch-4.active {
    transform: translateX(-50%) !important;
}

/* Optional: If you want to disable hover movement for ALL branches */
.branch:hover {
    transform: none !important;
}

.branch.active {
    transform: none !important;
}

/* Keep the original positioning for branches 1 and 4 */
.branch-1 {
    top: 30px;
    left: 50%;
}

.branch-4 {
    bottom: 30px;
    left: 50%;
}


/* ========================================
   MOBILE INTERACTIVE DIAGRAM FIX
   Add this to the END of your styles.css
   ======================================== */

/* Mobile-specific positioning fixes */
@media (max-width: 768px) {
    /* Branch 1 - Top center */
    .branch-1 {
        top: 15px;
        left: 50%;
        transform: translateX(-50%) !important;
    }
    
    /* Branch 2 - Top right */
    .branch-2 {
        top: 80px;
        right: 15px;
        transform: none !important;
    }
    
    /* Branch 3 - Bottom right */
    .branch-3 {
        bottom: 80px;
        right: 15px;
        transform: none !important;
    }
    
    /* Branch 4 - Bottom center */
    .branch-4 {
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%) !important;
    }
    
    /* Branch 5 - Top left */
    .branch-5 {
        top: 80px;
        left: 15px;
        transform: none !important;
    }
    
    /* Ensure hover states don't break positioning */
    .branch-1:hover,
    .branch-4:hover {
        transform: translateX(-50%) !important;
    }
    
    .branch-2:hover,
    .branch-3:hover,
    .branch-5:hover {
        transform: none !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    /* Adjust for smaller screens */
    .branch-1 {
        top: 10px;
    }
    
    .branch-4 {
        bottom: 10px;
    }
    
    .branch-2,
    .branch-3 {
        right: 10px;
    }
    
    .branch-5 {
        left: 10px;
    }
    
    .branch-2 {
        top: 70px;
    }
    
    .branch-3 {
        bottom: 70px;
    }
    
    .branch-5 {
        top: 70px;
    }
}



.ysis-interactive-section .container {
    display: flex;
    align-items: center;  /* vertically center */
    justify-content: space-between; /* space between diagram and cards */
    gap: 50px; /* spacing between left and right */
}

.interactive-diagram-wrapper {
    flex: 1; /* left side takes half space */
}

.content-display-area {
    flex: 1; /* right side takes half space */
}


/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .ysis-interactive-section .container {
        flex-direction: column;
        align-items: center;
    }

    .interactive-diagram-wrapper,
    .content-display-area {
        flex: unset;
        width: 100%;
        text-align: center; /* optional, makes text/cards look centered */
    }

    .content-display-area {
        margin-top: 30px; /* spacing between diagram and cards */
    }
}

.content-card{
    background-color: var(--dark-navy);
    color: white;
}

.content-card h3{
    color: white;
}

.content-card p{
    color: white;
}

/* Core Dropdown Styles */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: white;
}

.main-nav ul li {
  position: relative;
  display: inline-block;
}


.main-nav ul li a {
  text-decoration: none;
  padding: 15px 25px;
  display: block;
  color: #fff; /* Main link color */
  font-size: 1rem;
  transition: all 0.3s ease;
}

/* Dropdown Menu Container */
.main-nav ul li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: rgba(2, 23, 40, 0.98); /* A very dark, almost black navy blue */
  min-width: 240px;
  border-radius: 8px; /* Slightly rounded corners for a modern look */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Softer, deeper shadow */
  z-index: 1000;
  /* Animation properties */
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Show Dropdown on Hover */
.main-nav ul li:hover > ul {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Individual Dropdown Menu Items */
.main-nav ul li ul li {
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* A very subtle separator */
}

/* Remove border on the last item for a cleaner look */
.main-nav ul li ul li:last-child {
  border-bottom: none;
}

/* Hover effect for dropdown links */
.main-nav ul li ul li a {
  padding: 12px 25px; /* Adjust padding for inner links */
  color: rgba(255, 255, 255, 0.85); /* Lighter text color */
}

/* The "good" hover effect */
.main-nav ul li ul li a:hover {
  background-color: rgba(255, 255, 255, 0.08); /* A subtle, light gray background */
  color: #fff; /* Solid white text on hover */
}

/* Individual Dropdown Menu Items */
.main-nav ul li ul li {
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* A very subtle separator */
}

/* Remove border on the last item for a cleaner look */
.main-nav ul li ul li:last-child {
  border-bottom: none;
}

/* Hover effect for dropdown links */
.main-nav ul li ul li a {
  padding: 12px 25px; /* Adjust padding for inner links */
  color: #fff; /* Make the text solid white */
  font-weight: 500; /* Add some weight for better readability */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* The "good" hover effect */
.main-nav ul li ul li a:hover {
  background-color: rgba(255, 255, 255, 0.1); /* A subtle, slightly darker transparent white */
  color: orange;/* Keep the text solid white on hover */
}

.main-nav ul li ul li a {
  color: #fff !important; 
}







/* Blog Contact Form Section */
.blog-contact-section {
    padding-top: 25px;
    border-top: 1px solid #e2e8f0;
    margin-top: 30px;
}

.form-header-section {
    text-align: center;
    margin-bottom: 15px;
}

.form-header-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.form-header-section p {
    font-size: 14px;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.4;
}

.blog-contact-form-container {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.blog-contact-form {
    max-width: none;
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1e293b;
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-submit-section {
    text-align: center;
    margin-top: 15px;
}

.btn-blog-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1e293b;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-blog-submit:hover {
    background: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 41, 59, 0.3);
}

.btn-blog-submit svg {
    transition: transform 0.3s ease;
}

.btn-blog-submit:hover svg {
    transform: translateX(3px);
}

.form-note {
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
    font-family: 'Poppins', sans-serif;
}

.back-to-blog-link {
    text-align: center;
    padding-top: 10px;
}

.back-to-blog-link a {
    color: #64748b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s ease;
}

.back-to-blog-link a:hover {
    color: #1e293b;
}



/* Hide the arrow navigation buttons */
.nav-btn {
    display: none !important;
}

/* Adjust navigation controls layout without arrows */
.nav-controls {
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    margin-top: 0 !important;
 
    backdrop-filter: blur(10px) !important;
    border-radius: 25px !important;
    padding: 12px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
}

/* Adjust slideshow container to be relative for absolute positioning */
.slideshow-container {
    position: relative !important;
}

/* Style adjustments for indicators only */
.slide-indicators {
    display: flex !important;
    gap: 12px !important;
    margin: 0 !important;
}

.indicator {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
}

.indicator.active {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3) !important;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    transform: scale(1.1) !important;
}






/* Contact Form Dropdown Styling */
.main-contact-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 45px 12px 15px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: #2c3e50;
    width: 100%;
    height: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
}

.main-contact-form select:focus {
    outline: none;
    border-color: #2c3e50;
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232c3e50' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

.main-contact-form select:hover {
    border-color: #495057;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

/* Placeholder option styling */
.main-contact-form select option:first-child {
    color: #6c757d;
    font-style: italic;
}

.main-contact-form select option {
    color: #2c3e50;
    background: white;
    padding: 10px;
    font-size: 16px;
    font-weight: 400;
}

/* Enhanced focus states for better accessibility */
.main-contact-form select:focus-visible {
    outline: 2px solid #2c3e50;
    outline-offset: 2px;
}

/* Input field consistency */
.main-contact-form input[type="text"],
.main-contact-form input[type="email"],
.main-contact-form textarea {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: #2c3e50;
    background: white;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.main-contact-form input[type="text"]:focus,
.main-contact-form input[type="email"]:focus,
.main-contact-form textarea:focus {
    outline: none;
    border-color: #2c3e50;
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

.main-contact-form input[type="text"]:hover,
.main-contact-form input[type="email"]:hover,
.main-contact-form textarea:hover {
    border-color: #495057;
}

/* Label styling for consistency */
.main-contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
}

/* Form group spacing */
.main-contact-form .form-group {
    margin-bottom: 20px;
}

/* Button styling to match theme */
.btn-main-submit {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: none;
    border-radius: 8px;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 12px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-main-submit:hover:not(.loading):not(.success) {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);
}

.btn-main-submit:active:not(.loading):not(.success) {
    transform: translateY(0);
}

/* Dark theme compatibility */
@media (prefers-color-scheme: dark) {
    .main-contact-form select,
    .main-contact-form input[type="text"],
    .main-contact-form input[type="email"],
    .main-contact-form textarea {
        background: #2c3e50;
        border-color: #495057;
        color: white;
    }
    
    .main-contact-form select option {
        background: #2c3e50;
        color: white;
    }
    
    .main-contact-form label {
        color: #ecf0f1;
    }
    
    .main-contact-form select:focus,
    .main-contact-form input[type="text"]:focus,
    .main-contact-form input[type="email"]:focus,
    .main-contact-form textarea:focus {
        border-color: #3498db;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .main-contact-form select,
    .main-contact-form input[type="text"],
    .main-contact-form input[type="email"],
    .main-contact-form textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .main-contact-form .form-row {
        flex-direction: column;
    }
    
    .main-contact-form .form-group {
        width: 100%;
        margin-bottom: 15px;
    }
}

/* Professional form container styling */
.professional-form-container {
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
}

/* Form row layout */
.main-contact-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.main-contact-form .form-group.full-width {
    width: 100%;
}

.main-contact-form .form-group:not(.full-width) {
    flex: 1;
}

/* Textarea specific styling */
.main-contact-form textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
}

/* Form validation states */
.main-contact-form input.error,
.main-contact-form select.error,
.main-contact-form textarea.error {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.main-contact-form input.valid,
.main-contact-form select.valid,
.main-contact-form textarea.valid {
    border-color: #27ae60;
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}

/* Required field indicator */
.main-contact-form label:after {
    content: " *";
    color: #e74c3c;
    font-weight: bold;
}

.main-contact-form label:not([for$="_phone"]):not([for$="_company"]):not([for$="_location"]):not([for$="_message"]):after {
    content: " *";
    color: #e74c3c;
}

/* Remove asterisk from optional fields */
.form-group label[for="contact_phone"]:after,
.form-group label[for="contact_company"]:after,
.form-group label[for="contact_location"]:after,
.form-group label[for="contact_message"]:after {
    content: "";
}








/* ========================================
   CLEAN PROFESSIONAL SERVICES - NO LINES
   Add this to the END of your styles.css
   ======================================== */

/* Remove all borders and lines from services grid */
.services-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 50px !important;
    background: transparent !important;
    border: none !important;
    padding: 40px 0 !important;
}

.service-category {
    background: #fafbfc !important;
    padding: 50px 40px !important;
    position: relative !important;
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
}

/* Remove all lines and borders */
.service-category::before {
    display: none !important;
}

/* Professional hover effect */
.service-category:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.12) !important;
    background: var(--white) !important;
}

/* Clean category header - no lines */
.category-header {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-bottom: 40px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.category-header h4 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--dark-navy) !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 !important;
}

/* Clean service list - no bullets, no lines */
.service-list {
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

.service-list li {
    padding: 14px 0 !important;
    color: var(--medium-gray) !important;
    font-size: 1rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    position: relative !important;
    border-bottom: none !important;
    transition: all 0.2s ease !important;
    list-style: none !important;
    display: block !important;
    padding-left: 0 !important;
    line-height: 1.6 !important;
}

/* Remove all bullets and markers */
.service-list li::before {
    display: none !important;
}

.service-list li::after {
    display: none !important;
}

/* Subtle hover effect without lines */
.service-list li:hover {
    color: var(--dark-navy) !important;
    font-weight: 500 !important;
    padding-left: 12px !important;
}

/* Market content container - no lines */
.market-content {
    display: none;
    background: var(--white) !important;
    border: none !important;
    padding: 60px 50px !important;
    position: relative !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08) !important;
}

.market-content.active {
    display: block;
}

/* Remove top accent line */
.market-content::before {
    display: none !important;
}

/* Clean market overview - no lines */
.market-overview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 60px;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 30px 0 !important;
    }
    
    .service-category {
        padding: 40px 30px !important;
        min-height: 300px !important;
    }
    
    .market-content {
        padding: 40px 30px !important;
    }
    
    .market-overview {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .service-category {
        padding: 30px 25px !important;
    }
    
    .services-grid {
        gap: 30px !important;
    }
    
    .market-content {
        padding: 30px 20px !important;
    }
}


/* ========================================
   CLEAN OPTIMIZED CONTACT SECTION
   Add this to the END of your styles.css
   ======================================== */

/* Clean Contact Hero - Remove excessive padding */
.contact-hero {
    padding: 60px 0 40px !important;
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-navy) 100%) !important;
    color: var(--white) !important;
    text-align: center !important;
}

.contact-hero-content h1 {
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    color: var(--white) !important;
    font-family: 'Poppins', sans-serif !important;
}

.contact-hero-content .hero-subtitle {
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    line-height: 1.5 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Compact Contact Form Section */
.professional-contact-section {
    padding: 50px 0 !important;
    background: #f8f9fb !important;
}

.contact-form-wrapper {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.professional-form-container {
    background: var(--white) !important;
    padding: 35px 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
}

/* Compact Form Rows */
.form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 25px !important;
    margin-bottom: 20px !important;
}

.form-group {
    margin-bottom: 0 !important;
}

.form-group.full-width {
    grid-column: 1 / -1 !important;
    margin-bottom: 20px !important;
}

/* Compact Form Elements */
.form-group label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--dark-navy) !important;
    margin-bottom: 6px !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: 'Poppins', sans-serif !important;
    background: var(--white) !important;
    color: var(--dark-navy) !important;
    transition: all 0.2s ease !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

.form-group textarea {
    height: 80px !important;
    resize: none !important;
    line-height: 1.4 !important;
}

/* Compact Submit Section */
.form-submit-section {
    text-align: center !important;
    margin-top: 25px !important;
    padding-top: 0 !important;
    border-top: none !important;
}

.btn-main-submit {
    padding: 14px 35px !important;
    font-size: 14px !important;
    min-width: 180px !important;
    height: 48px !important;
}

.form-note {
    margin-top: 10px !important;
    font-size: 11px !important;
}

/* Optimized Contact Info Section */
.contact-info-section {
    padding: 50px 0 !important;
    background: var(--white) !important;
}

.contact-info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 50px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* Clean Info Sections - Remove all borders */
.info-section {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.info-section h3 {
    font-size: 22px !important;
    color: var(--dark-navy) !important;
    margin-bottom: 30px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid var(--dark-navy) !important;
    padding-bottom: 10px !important;
}

/* Clean Contact Person Cards */
.contact-person {
    background: #f8f9fb !important;
    padding: 25px !important;
    margin-bottom: 25px !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.contact-person:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    background: var(--white) !important;
}

.contact-person:last-child {
    margin-bottom: 0 !important;
}

.contact-person h4 {
    color: var(--dark-navy) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Compact Contact Items */
.contact-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.contact-item:last-child {
    border-bottom: none !important;
    margin-bottom: 15px !important;
}

.contact-item .label {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: var(--medium-gray) !important;
    letter-spacing: 0.5px !important;
    min-width: 80px !important;
}

.contact-item .value {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--dark-navy) !important;
    text-align: right !important;
}

/* Compact QR Codes */
.qr-code-container {
    text-align: center !important;
    margin-top: 15px !important;
}

.qr-code {
    width: 100px !important;
    height: 100px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 4px !important;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Clean Location Groups */
.location-group {
    background: #f8f9fb !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.location-group:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    background: var(--white) !important;
}

.location-group:last-child {
    margin-bottom: 0 !important;
}

.location-group h4 {
    font-size: 15px !important;
    color: var(--dark-navy) !important;
    margin-bottom: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}

.location-group p {
    font-size: 13px !important;
    color: var(--medium-gray) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .contact-hero {
        padding: 40px 0 30px !important;
    }
    
    .contact-hero-content h1 {
        font-size: 2rem !important;
    }
    
    .professional-contact-section,
    .contact-info-section {
        padding: 40px 0 !important;
    }
    
    .professional-form-container {
        padding: 30px 25px !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .contact-info-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    
    .contact-person,
    .location-group {
        padding: 20px !important;
    }
    
    .contact-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }
    
    .contact-item .value {
        text-align: left !important;
    }
}

@media (max-width: 480px) {
    .professional-form-container {
        padding: 25px 20px !important;
    }
    
    .contact-person,
    .location-group {
        padding: 18px !important;
    }
    
    .qr-code {
        width: 80px !important;
        height: 80px !important;
    }
}

/* ========================================
   REMOVE ALL LINES FROM CONTACT SECTION
   Add this to the END of your styles.css
   ======================================== */

/* Remove all borders, lines, and dividers */
.contact-hero,
.professional-contact-section,
.contact-info-section,
.professional-form-container,
.form-row,
.form-group,
.form-submit-section,
.info-section,
.contact-person,
.contact-item,
.location-group,
.qr-code-container,
.qr-code {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* Remove all pseudo-element lines */
.contact-hero::before,
.contact-hero::after,
.professional-contact-section::before,
.professional-contact-section::after,
.contact-info-section::before,
.contact-info-section::after,
.professional-form-container::before,
.professional-form-container::after,
.form-submit-section::before,
.form-submit-section::after,
.info-section::before,
.info-section::after,
.contact-person::before,
.contact-person::after,
.contact-item::before,
.contact-item::after,
.location-group::before,
.location-group::after,
.info-section h3::before,
.info-section h3::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Remove specific styling that creates lines */
.form-submit-section {
    border-top: none !important;
    padding-top: 25px !important;
}

.info-section h3 {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.contact-person h4 {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.contact-item {
    border-bottom: none !important;
}

.contact-person {
    border-bottom: none !important;
    padding-bottom: 25px !important;
}

.location-group {
    border-left: none !important;
}

/* Clean spacing without lines */
.contact-person {
    margin-bottom: 30px !important;
}

.contact-item {
    margin-bottom: 12px !important;
    padding: 8px 0 !important;
}

.info-section h3 {
    margin-bottom: 25px !important;
}

.contact-person h4 {
    margin-bottom: 15px !important;
}


/* Map Container Styling */
.map-container {
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: white;
}

.map-container iframe {
    width: 100%;
    height: 300px;
    border: none;
    display: block;
}

@media (max-width: 768px) {
    .map-container iframe {
        height: 250px;
    }
}



/* ========================================
   MAKE ALL CONTENT CARDS CONSISTENT STYLING
   Add this to the END of your styles.css
   ======================================== */

/* Override the dark styling for content card 5 to match others */
#ensure-integrity {
    background: var(--white) !important;
    color: var(--dark-navy) !important;
    border: none !important;
}

#ensure-integrity h3 {
    color: var(--dark-navy) !important;
}

#ensure-integrity p {
    color: var(--medium-gray) !important;
}

/* Ensure all content cards have consistent styling */
.content-card {
    background: var(--white) !important;
    color: var(--dark-navy) !important;
    border: none !important;
}

.content-card h3 {
    color: var(--dark-navy) !important;
}

.content-card p {
    color: var(--medium-gray) !important;
}



/* Corporate Services Hero */
.corporate-services-hero {
    height: 80vh;
    min-height: 600px;
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--primary-navy) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.corporate-services-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="services-grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23services-grid)"/></svg>');
    opacity: 0.3;
}

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

.corporate-services-hero .services-hero-content h1 {
    font-size: 4.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--white);
}

.corporate-services-hero .hero-subtitle {
    font-size: 1.25rem;
    font-weight: 300;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 3rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Add scroll indicator for services if needed */
.services-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: services-bounce 2s infinite;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .corporate-services-hero .services-hero-content h1 {
        font-size: 3rem;
    }
    
    .corporate-services-hero .hero-subtitle {
        font-size: 1.1rem;
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .corporate-services-hero {
        min-height: 500px;
    }
    
    .corporate-services-hero .services-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .corporate-services-hero .hero-subtitle {
        font-size: 1rem;
    }
}


/* Force override with !important */
.tesla-hero {
    height: 80vh !important;
    min-height: 500px !important;
    max-height: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Alternative selector in case the above doesn't work */
section.tesla-hero {
    height: 80vh !important;
    min-height: 500px !important;
}

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

.hero-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slideshow .slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay for better text readability */
    z-index: 2;
}

.slideshow-progress {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 400px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    z-index: 3;
}

.progress-bar {
    height: 100%;
    background: #fff;
    border-radius: 2px;
    width: 0%;
    transition: width linear;
}

/* Content positioning */
.tesla-hero .hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    padding: 0 20px;
}

/* Responsive adjustments */
@media (max-height: 600px) {
    .tesla-hero {
        height: 600px; /* Fixed height for very short screens */
    }
}

@media (max-width: 768px) {
    .tesla-hero {
        min-height: 500px; /* Smaller minimum height on mobile */
    }
    
    .slideshow-progress {
        width: 90%;
        bottom: 15px;
    }
}





.what-we-do-section {
    padding: 120px 0 !important;
    background: var(--black) !important;
    position: relative !important;
}

.what-we-do-section {
    padding: 120px 0;
    background: var(--black);
    position: relative;
    border: none;
}

.what-we-do-header {
    text-align: center;
    margin-bottom: 80px;
    border: none;
}



/* Service Pillars */
.service-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 100px;
}

.pillar-item {
    text-align: center;
    padding: 40px 20px;
    background: var(--white);
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
}

.pillar-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--dark-navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.pillar-item:hover::before {
    transform: scaleX(1);
}

.pillar-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Professional Pillar Icons */
.pillar-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 24px;
    border: 2px solid var(--dark-navy);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    background: transparent;
}

.pillar-item:hover .pillar-icon {
    background: var(--dark-navy);
}

/* Clean, Professional Icon Designs */
.pillar-icon::before {
    content: '';
    position: absolute;
    transition: all 0.3s ease;
}

.pillar-icon::after {
    content: '';
    position: absolute;
    transition: all 0.3s ease;
}

/* Strategy Icon - Target/Crosshair */
.pillar-icon.strategy::before {
    width: 24px;
    height: 24px;
    border: 3px solid var(--dark-navy);
    border-radius: 50%;
}

.pillar-icon.strategy::after {
    width: 8px;
    height: 8px;
    background: var(--dark-navy);
    border-radius: 50%;
}

.pillar-item:hover .pillar-icon.strategy::before {
    border-color: white;
}

.pillar-item:hover .pillar-icon.strategy::after {
    background: white;
}

/* Operations Icon - Gear */
.pillar-icon.operations::before {
    width: 26px;
    height: 26px;
    border: 3px solid var(--dark-navy);
    border-radius: 4px;
    transform: rotate(45deg);
}

.pillar-icon.operations::after {
    width: 12px;
    height: 12px;
    background: var(--dark-navy);
    border-radius: 2px;
}

.pillar-item:hover .pillar-icon.operations::before {
    border-color: white;
}

.pillar-item:hover .pillar-icon.operations::after {
    background: white;
}

/* Partnerships Icon - Connected Nodes */
.pillar-icon.partnerships::before {
    width: 8px;
    height: 8px;
    background: var(--dark-navy);
    border-radius: 50%;
    left: 16px;
    box-shadow: 20px 0 0 var(--dark-navy), 10px 15px 0 var(--dark-navy);
}

.pillar-icon.partnerships::after {
    width: 20px;
    height: 2px;
    background: var(--dark-navy);
    left: 20px;
    top: 29px;
    transform: rotate(35deg);
    border-radius: 1px;
    box-shadow: 0 -18px 0 -1px var(--dark-navy);
}

.pillar-item:hover .pillar-icon.partnerships::before {
    background: white;
    box-shadow: 20px 0 0 white, 10px 15px 0 white;
}

.pillar-item:hover .pillar-icon.partnerships::after {
    background: white;
    box-shadow: 0 -18px 0 -1px white;
}

/* Growth Icon - Arrow Up Chart */
.pillar-icon.growth::before {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid var(--dark-navy);
    top: 14px;
}

.pillar-icon.growth::after {
    width: 24px;
    height: 3px;
    background: var(--dark-navy);
    bottom: 12px;
    border-radius: 2px;
    box-shadow: -8px 6px 0 -1px var(--dark-navy), 8px -6px 0 -1px var(--dark-navy);
}

.pillar-item:hover .pillar-icon.growth::before {
    border-bottom-color: white;
}

.pillar-item:hover .pillar-icon.growth::after {
    background: white;
    box-shadow: -8px 6px 0 -1px white, 8px -6px 0 -1px white;
}

.pillar-item h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.pillar-item p {
    font-size: 15px;
    color: var(--medium-gray);
    line-height: 1.6;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

.pillar-item {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.pillar-icon {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.pillar-item {
    text-align: center;
    padding: 40px 20px;
    background: var(--white);
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
    border: none;
    box-shadow: none;
    outline: none;
}

.pillar-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 24px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.pillar-item {
    background: white !important;
}

.service-pillars {
    background: white !important;
}

.service-pillars .pillar-item {
    background: white !important;
}




/* Tesla Team */
.tesla-team {
    padding: 60px 0;
    background: #f8f8f8;
}

.tesla-team .section-title {
    font-size: 48px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px;
    color: #000;
    font-family: 'Poppins', sans-serif;
}

/* Team Showcase - Fixed Alignment */
.team-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
    align-items: center;
    min-height: 60vh;
    max-height: 70vh;
}

.team-showcase.reverse {
    grid-template-columns: 1fr 1fr;
}

.team-showcase.reverse .team-content {
    order: 1;
}

.team-showcase.reverse .team-image-large {
    order: 2;
}

/* Team Content Container - Ensures proper vertical alignment */
.team-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 20px 0;
}

/* Team Image Styling - Reduced height */
.team-image-large {
    height: 100%;
    display: flex;
    align-items: center;
}

.team-image-large img {
    width: 100%;
    height: 350px;
    object-fit: contain;
    border-radius: 0;
    display: block;
}

.placeholder-team {
    width: 100%;
    height: 350px;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    font-weight: 300;
    color: #999;
    font-family: 'Poppins', sans-serif;
}

/* Team Header */
.team-header {
    margin-bottom: 24px;
}

.team-header h3 {
    font-size: 36px;
    font-weight: 300;
    color: #000;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

.team-header .title {
    font-size: 16px;
    color: #666;
    margin-bottom: 0;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

/* Team Bio */
.team-bio p {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 16px;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .team-showcase {
        grid-template-columns: 1fr;
        gap: 40px;
        min-height: auto;
        max-height: none;
    }
    
    .team-showcase.reverse .team-content {
        order: 0;
    }
    
    .team-showcase.reverse .team-image-large {
        order: 0;
    }
    
    .team-image-large img,
    .placeholder-team {
        height: 300px;
    }
}


/* Global Presence */
.global-presence {
    padding: 120px 0;
    background: #fff;
}

.global-presence .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.global-presence h2 {
    font-size: 48px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 80px;
    color: #000;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.5px;
}

.presence-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 100px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.presence-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.presence-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.presence-locations {
    padding-left: 40px;
}

.location-group {
    margin-bottom: 50px;
}

.location-group:last-child {
    margin-bottom: 0;
}

.location-group h4 {
    font-size: 26px;
    font-weight: 500;
    color: #000;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.3px;
    position: relative;
}

.location-group h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 2px;
    background: #007acc;
}

.location-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-group li {
    font-size: 18px;
    color: #555;
    padding: 12px 0;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    position: relative;
    padding-left: 20px;
    transition: color 0.3s ease;
}

.location-group li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #007acc;
    font-weight: 500;
}

.location-group li:hover {
    color: #007acc;
}

.coming-soon {
    font-size: 12px;
    color: #999;
    font-style: italic;
    margin-left: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .global-presence {
        padding: 80px 0;
    }
    
    .global-presence h2 {
        font-size: 36px;
        margin-bottom: 60px;
    }
    
    .presence-content {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    
    .presence-locations {
        padding-left: 0;
    }
    
    .location-group h4 {
        font-size: 24px;
    }
    
    .location-group h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) {
    .global-presence h2 {
        font-size: 28px;
        margin-bottom: 40px;
    }
    
    .global-presence {
        padding: 60px 0;
    }
    
    .presence-content {
        gap: 40px;
    }
}


/* Global Presence */
.global-presence {
    padding: 120px 0;
    background: #fff;
    text-align: center;
}

.global-presence .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.global-presence h2 {
    font-size: 48px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 80px;
    color: #000;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.5px;
}

.presence-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.presence-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -50px;
}

.presence-image img {
    width: 100%;
    max-width: 700px;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .global-presence {
        padding: 80px 0;
    }
    
    .global-presence h2 {
        font-size: 36px;
        margin-bottom: 60px;
    }
    
    .presence-image img {
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .global-presence h2 {
        font-size: 28px;
        margin-bottom: 40px;
    }
    
    .global-presence {
        padding: 60px 0;
    }
    
    .presence-image img {
        max-width: 300px;
    }
}


/* Global Presence */
.global-presence {
    padding: 120px 0;
    background: #fff;
    text-align: center;
}

.global-presence .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.global-presence h2 {
    font-size: 48px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px; /* Reduced from 80px */
    color: #000;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.5px;
}

.presence-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.presence-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.presence-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .global-presence {
        padding: 80px 0;
    }
    
    .global-presence h2 {
        font-size: 36px;
        margin-bottom: 30px; /* Reduced for mobile */
    }
    
    .presence-image img {
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .global-presence h2 {
        font-size: 28px;
        margin-bottom: 20px; /* Reduced for small screens */
    }
    
    .global-presence {
        padding: 60px 0;
    }
    
    .presence-image img {
        max-width: 300px;
    }
}



/* ========================================
   MOBILE ABOUT US PAGE COMPREHENSIVE FIXES
   Add this to the END of your styles.css
   ======================================== */

/* Fix hero height on mobile */
@media (max-width: 768px) {
    .tesla-hero {
        height: 100vh !important;
        min-height: 500px !important;
        max-height: 100vh !important;
    }
    
    .tesla-hero-content h1 {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }
    
    .tesla-hero-content p {
        font-size: 1rem !important;
        padding: 0 1rem !important;
        line-height: 1.4 !important;
    }
    
    .slideshow-nav {
        bottom: 20px !important;
        gap: 8px !important;
    }
    
    .nav-dot {
        width: 8px !important;
        height: 8px !important;
    }
}

/* Fix stats section mobile spacing */
@media (max-width: 768px) {
    .stats-section {
        padding: 60px 0 !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
        padding: 0 20px !important;
    }
    
    .stat-item h3 {
        font-size: 2.5rem !important;
        margin-bottom: 8px !important;
    }
    
    .stat-item p {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .stat-item h3 {
        font-size: 2rem !important;
    }
}

/* Fix mission section mobile */
@media (max-width: 768px) {
    .tesla-mission {
        padding: 60px 0 !important;
    }
    
    .mission-content h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1.5rem !important;
        padding: 0 20px !important;
    }
    
    .mission-content p {
        font-size: 1rem !important;
        padding: 0 20px !important;
        text-align: center !important;
    }
}

/* Fix what we do section mobile */
@media (max-width: 768px) {
    .what-we-do-section {
        padding: 60px 0 !important;
    }
    
    .what-we-do-header h2 {
        font-size: 2rem !important;
        margin-bottom: 16px !important;
    }
    
    .what-we-do-header .section-subtitle {
        font-size: 16px !important;
        padding: 0 20px !important;
    }
    
    /* Fix primary focus mobile layout */
    .primary-focus {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 40px 20px !important;
        margin-bottom: 60px !important;
    }
    
    .focus-text h3 {
        font-size: 1.8rem !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    
    .focus-text p {
        font-size: 16px !important;
        text-align: left !important;
        line-height: 1.6 !important;
    }
    
    /* Fix expansion diagram mobile */
    .expansion-diagram {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 30px 20px !important;
    }
    
    .region {
        min-width: auto !important;
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 auto !important;
    }
    
    .connection-bridge {
        transform: rotate(90deg) !important;
        margin: 20px 0 !important;
    }
    
    /* Fix service pillars mobile */
    .service-pillars {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        margin-bottom: 60px !important;
        padding: 0 20px !important;
    }
    
    .pillar-item {
        padding: 30px 20px !important;
        margin-bottom: 0 !important;
    }
    
    .pillar-item h4 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    .pillar-item p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Fix methodology section mobile */
    .methodology-section {
        padding: 60px 20px !important;
    }
    
    .methodology-section h3 {
        font-size: 1.8rem !important;
        margin-bottom: 40px !important;
    }
    
    .methodology-steps {
        flex-direction: column !important;
        gap: 30px !important;
        align-items: center !important;
    }
    
    .step {
        max-width: 300px !important;
        width: 100% !important;
        text-align: center !important;
        padding: 30px 20px !important;
    }
    
    .step-number {
        font-size: 24px !important;
        width: 50px !important;
        height: 50px !important;
        margin: 0 auto 15px !important;
    }
    
    .step h5 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }
    
    .step p {
        font-size: 14px !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }
    
    .step-arrow {
        display: none !important;
    }
}

/* Fix team section mobile */
@media (max-width: 768px) {
    .tesla-team {
        padding: 60px 0 !important;
    }
    
    .tesla-team .section-title {
        font-size: 2rem !important;
        margin-bottom: 40px !important;
        padding: 0 20px !important;
    }
    
    .team-showcase,
    .team-showcase.reverse {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        margin-bottom: 50px !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 0 20px !important;
    }
    
    .team-showcase.reverse .team-content,
    .team-showcase.reverse .team-image-large {
        order: unset !important;
    }
    
    .team-content {
        padding: 0 !important;
        text-align: center !important;
    }
    
    .team-image-large {
        display: flex !important;
        justify-content: center !important;
        order: -1 !important;
    }
    
    .team-image-large img,
    .placeholder-team {
        height: 250px !important;
        max-width: 250px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }
    
    .team-header h3 {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }
    
    .team-header .title {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    
    .team-bio p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
        text-align: left !important;
    }
    
    .team-specialties {
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        margin-top: 20px !important;
    }
    
    .specialty {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

/* Fix values section mobile */
@media (max-width: 768px) {
    .tesla-values {
        padding: 60px 0 !important;
    }
    
    .tesla-values h2 {
        font-size: 2rem !important;
        margin-bottom: 40px !important;
        padding: 0 20px !important;
    }
    
    .values-cards {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 20px !important;
    }
    
    .value-card {
        padding: 30px 20px !important;
        text-align: center !important;
    }
    
    .card-icon {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 20px !important;
    }
    
    .value-card h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
    }
    
    .value-card p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* Fix global presence mobile */
@media (max-width: 768px) {
    .global-presence {
        padding: 60px 0 !important;
    }
    
    .global-presence h2 {
        font-size: 2rem !important;
        margin-bottom: 30px !important;
        padding: 0 20px !important;
    }
    
    .presence-image img {
        max-width: 300px !important;
        height: auto !important;
    }
}

/* Fix CTA section mobile */
@media (max-width: 768px) {
    .tesla-cta {
        padding: 60px 0 !important;
    }
    
    .tesla-cta h2 {
        font-size: 2rem !important;
        margin-bottom: 16px !important;
        padding: 0 20px !important;
    }
    
    .tesla-cta p {
        font-size: 16px !important;
        margin-bottom: 30px !important;
        padding: 0 20px !important;
    }
    
    .tesla-btn {
        padding: 14px 30px !important;
        font-size: 14px !important;
        margin: 0 20px !important;
        display: inline-block !important;
        text-align: center !important;
    }
}

/* Fix container overflow issues */
@media (max-width: 768px) {
    .container {
        padding: 0 15px !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }
    
    body {
        overflow-x: hidden !important;
    }
    
    .tesla-hero,
    .stats-section,
    .tesla-mission,
    .what-we-do-section,
    .tesla-team,
    .tesla-values,
    .global-presence,
    .tesla-cta {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* Extra small mobile fixes */
@media (max-width: 480px) {
    .tesla-hero-content h1 {
        font-size: 2rem !important;
        padding: 0 15px !important;
    }
    
    .tesla-hero-content p {
        font-size: 0.9rem !important;
        padding: 0 15px !important;
    }
    
    .mission-content h2 {
        font-size: 1.6rem !important;
        padding: 0 15px !important;
    }
    
    .what-we-do-header h2 {
        font-size: 1.6rem !important;
        padding: 0 15px !important;
    }
    
    .focus-text h3 {
        font-size: 1.5rem !important;
    }
    
    .team-header h3 {
        font-size: 1.5rem !important;
    }
    
    .tesla-values h2,
    .global-presence h2,
    .tesla-cta h2 {
        font-size: 1.6rem !important;
        padding: 0 15px !important;
    }
    
    .container {
        padding: 0 10px !important;
    }
    
    .primary-focus,
    .service-pillars,
    .methodology-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Fix any remaining overflow issues */
@media (max-width: 768px) {
    * {
        box-sizing: border-box !important;
    }
    
    .expansion-diagram {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    
    .region {
        flex-shrink: 0 !important;
    }
    
    .countries {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .countries span {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
}

/* Landscape mobile orientation fixes */
@media (max-width: 768px) and (orientation: landscape) {
    .tesla-hero {
        height: 100vh !important;
        min-height: 400px !important;
    }
    
    .tesla-hero-content h1 {
        font-size: 2.2rem !important;
    }
    
    .tesla-hero-content p {
        font-size: 1rem !important;
    }
    
    .slideshow-nav {
        bottom: 15px !important;
    }
}



/* Mobile highlights - single column with proper text alignment */
    .modern-subsidiary-highlights {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin: 25px 0 !important;
    }
    
    .modern-highlight-item {
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 16px !important;
        align-items: center !important;
    } /* ========================================
   CLEAN SUBSIDIARIES PAGE - REMOVE LINES & FIX FORMATTING
   Add this to the END of your styles.css
   ======================================== */

/* Remove excessive spacing and clean up sections */
.modern-subsidiaries-mission {
    padding: 60px 0 !important;
}

.modern-subsidiaries-showcase {
    padding: 40px 0 !important;
}

.modern-subsidiaries-cta {
    padding: 60px 0 !important;
}

/* Remove all borders and lines from showcase sections */
.modern-subsidiary-showcase,
.modern-subsidiary-content,
.modern-subsidiary-visual,
.modern-subsidiary-highlights,
.modern-highlight-item,
.asia-contact-section,
.entertainment-contact-section {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* Remove pseudo-element lines */
.modern-subsidiary-showcase::before,
.modern-subsidiary-showcase::after,
.modern-subsidiary-content::before,
.modern-subsidiary-content::after,
.asia-contact-section::before,
.asia-contact-section::after,
.entertainment-contact-section::before,
.entertainment-contact-section::after {
    display: none !important;
    content: none !important;
}

/* Make YSIS Asia Group match Entertainment format */
.modern-subsidiary-showcase:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
    padding: 40px 0 !important;
    min-height: auto !important;
}

.modern-subsidiary-showcase:first-child .modern-subsidiary-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    padding: 0 !important;
    text-align: left !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Add visual placeholder for YSIS Asia to match Entertainment layout */
.modern-subsidiary-showcase:first-child .modern-subsidiary-visual {
    width: 100% !important;
    height: 400px !important;
    background: #f8f9fb !important;
    border: 1px solid var(--light-gray) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: 4rem !important;
    font-weight: 100 !important;
    color: var(--medium-gray) !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Fix highlights grid for consistency */
.modern-subsidiary-highlights {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
    margin-top: 30px !important;
}

.modern-highlight-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
}

.modern-highlight-icon {
    width: 40px !important;
    height: 40px !important;
    background: var(--dark-navy) !important;
    color: var(--white) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.modern-highlight-text h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--dark-navy) !important;
    margin-bottom: 4px !important;
    font-family: 'Poppins', sans-serif !important;
}

.modern-highlight-text p {
    font-size: 12px !important;
    color: var(--medium-gray) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Clean contact buttons - remove lines */
.asia-contact-section,
.entertainment-contact-section {
    margin-top: 30px !important;
    padding-top: 0 !important;
    border-top: none !important;
    text-align: left !important;
}

.asia-contact-button,
.entertainment-contact-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 24px !important;
    background: var(--dark-navy) !important;
    color: var(--white) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: none !important;
}

.asia-contact-button:hover,
.entertainment-contact-button:hover {
    background: var(--primary-navy) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(30, 41, 59, 0.3) !important;
    color: var(--white) !important;
    text-decoration: none !important;
}

/* Remove arrow effects */
.asia-contact-button::after,
.entertainment-contact-button::after {
    display: none !important;
}

/* External link for YSIS Asia Group */
.asia-external-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 15px !important;
    color: var(--medium-gray) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-family: 'Poppins', sans-serif !important;
    transition: color 0.3s ease !important;
}

.asia-external-link:hover {
    color: var(--dark-navy) !important;
}

.asia-external-link i {
    font-size: 12px !important;
}

/* Slideshow clean styling */

.modern-subsidiary-slideshow {
    width: 100% !important;
    height: 400px !important;
    position: relative !important;
}

.slideshow-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--light-gray) !important;
    border-radius: 12px !important;
    background: #f8f9fb !important;
}
.modern-subsidiary-slideshow .slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: opacity 1s ease-in-out !important;
}

.modern-subsidiary-slideshow .slide.active {
    opacity: 1 !important;
}

.slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.slideshow-indicators {
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 10 !important;
}

.indicator {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.indicator.active {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.3) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-subsidiaries-mission {
        padding: 40px 0 !important;
    }
    
    .modern-subsidiaries-showcase {
        padding: 30px 0 !important;
    }
    
    .modern-subsidiaries-cta {
        padding: 40px 0 !important;
    }
    
    /* Stack layout on mobile - BOTH subsidiaries same format */
    .modern-subsidiary-showcase,
    .modern-subsidiary-showcase:first-child {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 30px 0 !important;
        text-align: left !important;
    }
    
    /* Mobile content alignment - match Entertainment exactly */
    .modern-subsidiary-content {
        order: 2 !important;
        text-align: left !important;
        padding: 0 20px !important;
    }
    
    .modern-subsidiary-visual,
    .modern-subsidiary-slideshow {
        order: 1 !important;
        height: 250px !important;
        margin: 0 20px !important;
    }
    
    .modern-subsidiary-showcase:first-child .modern-subsidiary-visual {
        height: 250px !important;
        font-size: 3rem !important;
        border-radius: 8px !important;
        margin: 0 20px !important;
    }
    
    /* Mobile highlights - single column like Entertainment */
    .modern-subsidiary-highlights {
        flex-direction: column !important;
        gap: 20px !important;
        margin: 25px 0 !important;
    }
    
    .modern-highlight-item {
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 16px !important;
    }
    
    .modern-highlight-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 16px !important;
    }
    
    .modern-highlight-text h4 {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }
    
    .modern-highlight-text p {
        font-size: 13px !important;
    }
    
    /* Mobile contact sections - left aligned like Entertainment */
    .asia-contact-section,
    .entertainment-contact-section {
        text-align: left !important;
        margin-top: 25px !important;
    }
    
    .asia-contact-button,
    .entertainment-contact-button {
        width: auto !important;
        max-width: none !important;
        justify-content: flex-start !important;
        display: inline-flex !important;
    }
    
    .asia-external-link {
        display: inline-flex !important;
        margin: 10px 0 0 15px !important;
        text-align: left !important;
        width: auto !important;
    }
    
    .slide img {
        padding: 15px !important;
    }
}

@media (max-width: 480px) {
    .modern-subsidiaries-mission,
    .modern-subsidiaries-showcase,
    .modern-subsidiaries-cta {
        padding: 25px 0 !important;
    }
    
    .modern-subsidiary-content {
        padding: 0 15px !important;
    }
    
    .modern-subsidiary-visual,
    .modern-subsidiary-slideshow {
        height: 200px !important;
        margin: 0 15px !important;
    }
    
    .modern-subsidiary-showcase:first-child .modern-subsidiary-visual {
        height: 200px !important;
        font-size: 2.5rem !important;
        margin: 0 15px !important;
    }
    
    .modern-highlight-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
    
    .modern-highlight-text h4 {
        font-size: 14px !important;
    }
    
    .modern-highlight-text p {
        font-size: 12px !important;
    }
    
    .asia-contact-button,
    .entertainment-contact-button {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
    
    .slide img {
        padding: 10px !important;
    }
    
    .slideshow-indicators {
        bottom: 10px !important;
        gap: 6px !important;
    }
    
    .indicator {
        width: 6px !important;
        height: 6px !important;
    }
}

/* Remove any remaining border or line elements */
.modern-subsidiaries-showcase-grid > *,
.modern-subsidiary-showcase > *,
.modern-subsidiary-content > *,
.modern-subsidiary-highlights > *,
.modern-highlight-item > * {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* Clean spacing between sections */
.modern-subsidiary-showcase {
    margin-bottom: 0 !important;
}

.modern-subsidiary-showcase:not(:last-child) {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Ensure consistent section backgrounds */
.modern-subsidiaries-showcase {
    background: var(--off-white) !important;
}

.modern-subsidiary-showcase:nth-child(odd) {
    background: transparent !important;
}

.modern-subsidiary-showcase:nth-child(even) {
    background: transparent !important;
}


/* ========================================
   SUBSIDIARIES LAYOUT FIX - ADD VISUAL ELEMENT TO ASIA
   Add this CSS to fix the missing visual element issue
   ======================================== */

/* Force YSIS Asia section to have proper 2-column layout */
#ysis-asia.modern-subsidiary-showcase {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
}

/* Add the missing visual element to Asia section */
#ysis-asia .modern-subsidiary-content::after {
    content: '';
    display: block !important;
    width: 100% !important;
    height: 400px !important;
    background: #f8f9fb !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    grid-column: 2 !important;
    position: relative !important;
}

/* Add placeholder text to the visual area */
#ysis-asia .modern-subsidiary-content::before {
    content: 'YSIS Asia Group';
    position: absolute !important;
    right: -60px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 400px !important;
    height: 400px !important;
    background: #f8f9fb !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    font-weight: 100 !important;
    color: #64748b !important;
    font-family: 'Poppins', sans-serif !important;
    z-index: 1 !important;
}

/* Ensure content stays in left column */
#ysis-asia .modern-subsidiary-content {
    position: relative !important;
    z-index: 2 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #ysis-asia.modern-subsidiary-showcase {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    #ysis-asia .modern-subsidiary-content::before {
        position: static !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        height: 250px !important;
        margin: 0 0 30px 0 !important;
        font-size: 1.5rem !important;
    }
    
    #ysis-asia .modern-subsidiary-content::after {
        display: none !important;
    }
}



/* ========================================
   FIX HIGHLIGHT ITEMS ALIGNMENT
   Add this to the END of your CSS file
   ======================================== */

/* Force consistent alignment for ALL highlight items */
.modern-subsidiary-highlights {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin: 30px 0 !important;
}

.modern-highlight-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
}

.modern-highlight-icon {
    width: 45px !important;
    height: 45px !important;
    background: var(--dark-navy) !important;
    color: var(--white) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.modern-highlight-text {
    flex: 1 !important;
    text-align: left !important;
}

.modern-highlight-text h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--dark-navy) !important;
    margin: 0 0 5px 0 !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.3 !important;
}

.modern-highlight-text p {
    font-size: 13px !important;
    color: var(--medium-gray) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Mobile - single column layout */
@media (max-width: 768px) {
    .modern-subsidiary-highlights {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .modern-highlight-item {
        gap: 18px !important;
    }
    
    .modern-highlight-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
    
    .modern-highlight-text h4 {
        font-size: 17px !important;
        margin-bottom: 6px !important;
    }
    
    .modern-highlight-text p {
        font-size: 14px !important;
    }
}


/* Learn More Links */
.learn-more-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 20px !important;
    color: var(--medium-gray) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.learn-more-link:hover {
    color: var(--dark-navy) !important;
    text-decoration: none !important;
}

.learn-more-link i {
    font-size: 11px !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .learn-more-link {
        margin: 15px 0 0 0 !important;
        display: block !important;
    }
}


/* Reduce gap between subsidiaries and CTA section */
.modern-subsidiaries-showcase {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

.modern-subsidiary-showcase:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

.modern-subsidiaries-cta {
    margin-top: 0 !important;
    padding-top: 40px !important;
}




.contact-personfk{
    margin-bottom: 20px;
}