/* ============================================ 
   C&M PAESI BASSI - STYLES V2.0 
   Modern, Clean, Professional Design System 
   ============================================ */ 
 
/* ===== RESET & BASE ===== */ 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
 
:root { 
    /* Color Palette */ 
    --primary-blue: #1e3a5f; 
    --secondary-blue: #2c5282; 
    --accent-blue: #3498db; 
    --light-blue: #e8f4f8; 
    --gold: #ffd700; 
    --dark-gray: #2c3e50; 
    --medium-gray: #666; 
    --light-gray: #f8f9fa; 
    --white: #ffffff; 
    --black: #000000; 
    --yellow: #ffff00; 
     
    /* Spacing */ 
    --spacing-xs: 0.5rem; 
    --spacing-sm: 1rem; 
    --spacing-md: 1.5rem; 
    --spacing-lg: 2rem; 
    --spacing-xl: 3rem; 
    --spacing-2xl: 4rem; 
     
    /* Typography */ 
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    --font-size-base: 1rem; 
    --line-height-base: 1.6; 
     
    /* Shadows */ 
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); 
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); 
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15); 
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2); 
     
    /* Transitions */ 
    --transition-fast: 0.2s ease; 
    --transition-base: 0.3s ease; 
    --transition-slow: 0.5s ease; 
     
    /* Border Radius */ 
    --radius-sm: 5px; 
    --radius-md: 10px; 
    --radius-lg: 15px; 
    --radius-full: 50px; 
} 
 
body { 
    font-family: var(--font-primary); 
    line-height: var(--line-height-base); 
    color: #333; 
    background: var(--light-gray); 
} 
 
/* ===== HEADER & NAVIGATION ===== */ 
header { 
    background: rgba(30, 58, 95, 0.85); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); 
    color: var(--white); 
    padding: var(--spacing-sm) 0; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1000; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    transition: all var(--transition-base); 
} 
 
header.scrolled { 
    padding: var(--spacing-xs) 0; 
    background: rgba(30, 58, 95, 0.95); 
} 
 
.header-container { 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 0 var(--spacing-lg); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 
 
.logo { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
} 
 
.logo h1 { 
    font-size: 2.5rem; 
    font-weight: 700; 
    letter-spacing: 2px; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 
    color: var(--white); 
} 
 
.logo p { 
    font-size: 0.9rem; 
    opacity: 0.9; 
    letter-spacing: 1px; 
} 
 
nav ul { 
    display: flex; 
    list-style: none; 
    gap: var(--spacing-lg); 
} 
 
nav a { 
    color: var(--white); 
    text-decoration: none; 
    font-weight: 500; 
    font-size: 1.1rem; 
    position: relative; 
    padding: var(--spacing-xs) 0; 
    transition: color var(--transition-base); 
} 
 
nav a::after { 
    content: ''; 
    position: absolute; 
    bottom: -4px; 
    left: 0; 
    width: 0; 
    height: 2px; 
    background: var(--gold); 
    transition: width var(--transition-base); 
} 
 
nav a:hover { 
    color: var(--gold); 
} 
 
nav a:hover::after { 
    width: 100%; 
} 
 
.mobile-menu-btn { 
    display: none; 
    background: none; 
    border: none; 
    color: var(--white); 
    font-size: 1.8rem; 
    cursor: pointer; 
} 
 
/* ===== HERO SECTION ===== */ 
.hero { 
    position: relative; 
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.9), rgba(44, 82, 130, 0.85)), 
                url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?w=1600&h=900&fit=crop') center/cover; 
    color: var(--white); 
    text-align: center; 
    padding: 12rem var(--spacing-lg) 8rem; 
    margin-top: 80px; 
    overflow: hidden; 
} 
 
.hero::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.05), transparent 70%); 
    animation: pulseGlow 8s ease-in-out infinite; 
} 
 
@keyframes pulseGlow { 
    0%, 100% { opacity: 0.3; } 
    50% { opacity: 0.6; } 
} 
 
.hero-content { 
    position: relative; 
    z-index: 1; 
    max-width: 1000px; 
    margin: 0 auto; 
    animation: fadeInUp 1s ease-out; 
} 
 
@keyframes fadeInUp { 
    from { 
        opacity: 0; 
        transform: translateY(40px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
 
.hero h2 { 
    font-size: 4rem; 
    margin-bottom: var(--spacing-md); 
    text-transform: uppercase; 
    letter-spacing: 4px; 
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5); 
    font-weight: 700; 
    line-height: 1.2; 
} 
 
.hero p { 
    font-size: 1.6rem; 
    margin-bottom: var(--spacing-xl); 
    font-weight: 300; 
    opacity: 0.95; 
} 
 
/* ===== BUTTONS ===== */ 
.cta-button { 
    display: inline-block; 
    padding: var(--spacing-sm) var(--spacing-xl); 
    background: linear-gradient(135deg, #4A70A9, #8FABD4); 
    color: #0C2B4E; 
    text-decoration: none; 
    border-radius: var(--radius-full); 
    font-weight: 600; 
    font-size: 1.1rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    box-shadow: 0 6px 20px rgba(74, 112, 169, 0.3); 
    transition: all var(--transition-base); 
} 
 
.cta-button:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 30px rgba(74, 112, 169, 0.5); 
} 
 
/* ===== PAGE HEADER ===== */ 
.page-header { 
    background: linear-gradient(135deg, var(--dark-gray) 0%, var(--accent-blue) 100%); 
    color: var(--white); 
    padding: 8rem 5% var(--spacing-2xl); 
    text-align: center; 
    margin-top: 80px; 
} 
 
.page-header h1 { 
    font-size: 3.5rem; 
    margin-bottom: var(--spacing-md); 
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); 
    font-weight: 700; 
} 
 
.page-header p { 
    font-size: 1.3rem; 
    max-width: 900px; 
    margin: 0 auto; 
    opacity: 0.95; 
} 
 
/* ===== CONTAINER ===== */ 
.container { 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: var(--spacing-xl) var(--spacing-2xl); 
    background: var(--white); 
} 
 
/* ===== SERVICES SECTION ===== */ 
.services { 
    padding: var(--spacing-2xl) var(--spacing-lg); 
    background: var(--light-gray); 
} 
 
.section-title { 
    text-align: center; 
    font-size: 2.8rem; 
    margin-bottom: var(--spacing-xl); 
    color: var(--primary-blue); 
    font-weight: 700; 
    position: relative; 
    padding-bottom: var(--spacing-sm); 
} 
 
.section-title::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 80px; 
    height: 4px; 
    background: var(--accent-blue); 
    border-radius: 2px; 
} 
 
.services-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: var(--spacing-lg); 
    max-width: 1200px; 
    margin: 0 auto; 
} 
 
.service-card { 
    background: var(--white); 
    padding: var(--spacing-xl); 
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow-md); 
    transition: all var(--transition-base); 
    text-align: center; 
} 
 
.service-card:hover { 
    transform: translateY(-10px); 
    box-shadow: var(--shadow-xl); 
} 
 
.service-card h3 { 
    color: var(--primary-blue); 
    font-size: 1.5rem; 
    margin-bottom: var(--spacing-sm); 
    font-weight: 600; 
} 
 
.service-card p { 
    color: var(--medium-gray); 
    line-height: 1.8; 
} 
 
/* ===== DOCUMENT-STYLE SECTIONS (for services pages) ===== */ 
.page-title { 
    font-size: 2.5rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    margin-bottom: var(--spacing-xl); 
    text-decoration: underline; 
    text-decoration-thickness: 3px; 
    text-underline-offset: 8px; 
} 
 
.service-box { 
    border: 3px solid var(--black); 
    padding: var(--spacing-xl); 
    margin-bottom: var(--spacing-lg); 
    background: #f9f9f9; 
    border-radius: var(--radius-sm); 
} 
 
.service-box h3 { 
    font-size: 1.5rem; 
    font-weight: 700; 
    margin-bottom: var(--spacing-sm); 
    color: var(--black); 
} 
 
.service-box p { 
    margin-bottom: var(--spacing-sm); 
    line-height: 1.8; 
    text-align: justify; 
    color: #333; 
} 
 
.highlight-yellow { 
    background: var(--light-blue); 
    border: 3px solid var(--black); 
    padding: var(--spacing-md); 
    text-align: center; 
    font-weight: 700; 
    margin: var(--spacing-lg) 0; 
    font-size: 1.1rem; 
} 
 
.division-links { 
    text-align: center; 
    margin: var(--spacing-md) 0; 
} 
 
.division-links a { 
    display: block; 
    color: var(--black); 
    text-decoration: underline; 
    font-size: 1.3rem; 
    font-weight: 700; 
    margin: var(--spacing-sm) 0; 
    transition: color var(--transition-base); 
} 
 
.division-links a:hover { 
    color: var(--accent-blue); 
} 
 
.subsection-title { 
    font-weight: 700; 
    font-style: italic; 
    margin: var(--spacing-md) 0 var(--spacing-xs) 0; 
    font-size: 1.2rem; 
} 
 
.numbered-list { 
    margin-left: var(--spacing-lg); 
} 
 
.numbered-list p { 
    margin-bottom: var(--spacing-sm); 
} 
 
.cta-box { 
    background: var(--accent-blue); 
    border: 3px solid var(--black); 
    padding: var(--spacing-md) var(--spacing-lg); 
    text-align: center; 
    margin-top: var(--spacing-lg); 
    border-radius: var(--radius-sm); 
} 
 
.cta-box a { 
    color: var(--black); 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 1.1rem; 
    transition: all var(--transition-base); 
} 
 
.cta-box a:hover { 
    text-decoration: underline; 
    color: var(--accent-blue); 
} 
 
.artwork-placeholder { 
    text-align: center; 
    font-style: italic; 
    color: var(--medium-gray); 
    padding: var(--spacing-xl); 
    margin: var(--spacing-sm) 0; 
    background: #f5f5f5; 
    border-radius: var(--radius-sm); 
} 
 
/* ===== CONTENT SECTIONS ===== */ 
.section { 
    background: var(--white); 
    margin-bottom: var(--spacing-lg); 
    padding: var(--spacing-xl); 
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow-sm); 
} 
 
.section h2 { 
    font-size: 2.2rem; 
    color: var(--dark-gray); 
    margin-bottom: var(--spacing-md); 
    padding-bottom: var(--spacing-xs); 
    border-bottom: 3px solid var(--accent-blue); 
} 
 
.section h3 { 
    font-size: 1.6rem; 
    color: #34495e; 
    margin: var(--spacing-md) 0 var(--spacing-sm); 
} 
 
.section p { 
    color: #555; 
    margin-bottom: var(--spacing-sm); 
    line-height: 1.8; 
} 
 
/* ===== GRIDS ===== */ 
.parties-grid, 
.sectors-grid, 
.situations-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: var(--spacing-lg); 
    margin: var(--spacing-lg) 0; 
} 
 
.party-card { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: var(--white); 
    padding: var(--spacing-md); 
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow-md); 
    transition: transform var(--transition-base); 
} 
 
.party-card:nth-child(2) { 
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
} 
 
.party-card:nth-child(3) { 
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); 
} 
 
.party-card:nth-child(4) { 
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); 
} 
 
.party-card:hover { 
    transform: scale(1.03); 
} 
 
.party-card h4 { 
    font-size: 1.4rem; 
    margin-bottom: var(--spacing-xs); 
    font-weight: 600; 
} 
 
.sector-card { 
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%); 
    color: var(--white); 
    padding: var(--spacing-xl) var(--spacing-md); 
    border-radius: var(--radius-md); 
    text-align: center; 
    transition: transform var(--transition-base); 
} 
 
.sector-card:hover { 
    transform: scale(1.05); 
} 
 
.sector-icon { 
    font-size: 3.5rem; 
    margin-bottom: var(--spacing-sm); 
} 
 
.situation-card { 
    background: var(--white); 
    padding: var(--spacing-md); 
    border-radius: var(--radius-md); 
    border: 2px solid var(--accent-blue); 
    transition: all var(--transition-base); 
} 
 
.situation-card:hover { 
    transform: translateY(-5px); 
    box-shadow: var(--shadow-lg); 
} 
 
.situation-card h4 { 
    color: var(--dark-gray); 
    margin-bottom: var(--spacing-xs); 
    font-size: 1.3rem; 
    font-weight: 600; 
} 
 
/* ===== LISTS ===== */ 
.content-list { 
    list-style: none; 
    margin: var(--spacing-sm) 0; 
} 
 
.content-list li { 
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-lg); 
    position: relative; 
    border-left: 3px solid var(--accent-blue); 
    margin-bottom: var(--spacing-xs); 
    background: var(--light-gray); 
    border-radius: var(--radius-sm); 
} 
 
.content-list li::before { 
    content: '▶'; 
    position: absolute; 
    left: var(--spacing-xs); 
    color: var(--accent-blue); 
    font-weight: 700; 
} 
 
/* ===== TABLES ===== */ 
.contract-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: var(--spacing-lg) 0; 
    background: var(--white); 
    box-shadow: var(--shadow-md); 
    border-radius: var(--radius-md); 
    overflow: hidden; 
} 
 
.contract-table thead { 
    background: var(--dark-gray); 
    color: var(--white); 
} 
 
.contract-table th, 
.contract-table td { 
    padding: var(--spacing-sm) var(--spacing-md); 
    text-align: left; 
    border: 1px solid #ddd; 
} 
 
.contract-table tbody tr:nth-child(even) { 
    background: var(--light-gray); 
} 
 
.contract-table tbody tr:hover { 
    background: var(--light-blue); 
} 
 
/* ===== HIGHLIGHT BOX ===== */ 
.highlight-box { 
    background: var(--light-blue); 
    border-left: 4px solid var(--accent-blue); 
    padding: var(--spacing-md); 
    margin: var(--spacing-md) 0; 
    border-radius: var(--radius-sm); 
} 
 
.highlight-box h4 { 
    color: var(--dark-gray); 
    margin-bottom: var(--spacing-xs); 
    font-weight: 600; 
} 
 
/* ===== CTA SECTION ===== */ 
.cta-section { 
    background: linear-gradient(135deg, var(--dark-gray) 0%, var(--accent-blue) 100%); 
    color: var(--white); 
    padding: var(--spacing-2xl); 
    text-align: center; 
    border-radius: var(--radius-md); 
    margin: var(--spacing-xl) 0; 
} 
 
.cta-section h2 { 
    font-size: 2.5rem; 
    margin-bottom: var(--spacing-sm); 
} 
 
.cta-section .cta-button { 
    background: var(--white); 
    color: var(--dark-gray); 
    margin-top: var(--spacing-sm); 
} 
 
.cta-section .cta-button:hover { 
    background: var(--accent-blue); 
    color: var(--white); 
} 
 
/* ===== FOOTER ===== */ 
footer { 
    background: var(--primary-blue); 
    color: var(--white); 
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-sm); 
} 
 
.footer-container { 
    max-width: 1400px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: var(--spacing-xl); 
} 
 
.footer-section h3 { 
    font-size: 1.5rem; 
    margin-bottom: var(--spacing-sm); 
    color: var(--gold); 
} 
 
.footer-section ul { 
    list-style: none; 
} 
 
.footer-section ul li { 
    margin-bottom: var(--spacing-xs); 
} 
 
.footer-section a { 
    color: var(--white); 
    text-decoration: none; 
    transition: color var(--transition-base); 
} 
 
.footer-section a:hover { 
    color: var(--gold); 
} 
 
.social-links { 
    display: flex; 
    gap: var(--spacing-sm); 
    margin-top: var(--spacing-sm); 
} 
 
.social-links a { 
    display: inline-flex; 
    width: 45px; 
    height: 45px; 
    background: var(--secondary-blue); 
    border-radius: 50%; 
    align-items: center; 
    justify-content: center; 
    transition: all var(--transition-base); 
} 
 
.social-links a:hover { 
    background: var(--gold); 
    transform: translateY(-3px); 
} 
 
.footer-bottom { 
    text-align: center; 
    margin-top: var(--spacing-lg); 
    padding-top: var(--spacing-lg); 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
    font-size: 0.9rem; 
} 
 
/* ===== RESPONSIVE DESIGN ===== */ 
@media (max-width: 1024px) { 
    .hero h2 { 
        font-size: 3rem; 
    } 
     
    .page-header h1 { 
        font-size: 2.5rem; 
    } 
     
    .container { 
        padding: var(--spacing-lg); 
    } 
} 
 
@media (max-width: 768px) { 
    .mobile-menu-btn { 
        display: block; 
    } 
 
    nav { 
        position: absolute; 
        top: 100%; 
        left: 0; 
        right: 0; 
        background: rgba(30, 58, 95, 0.98); 
        backdrop-filter: blur(15px); 
        max-height: 0; 
        overflow: hidden; 
        transition: max-height var(--transition-base); 
    } 
 
    nav.active { 
        max-height: 500px; 
    } 
 
    nav ul { 
        flex-direction: column; 
        padding: var(--spacing-sm) var(--spacing-lg); 
        gap: 0; 
    } 
 
    nav li { 
        padding: var(--spacing-sm) 0; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    } 
 
    .logo h1 { 
        font-size: 2rem; 
    } 
 
    .hero { 
        padding: 8rem var(--spacing-sm) 4rem; 
    } 
 
    .hero h2 { 
        font-size: 2rem; 
        letter-spacing: 2px; 
    } 
 
    .hero p { 
        font-size: 1.2rem; 
    } 
 
    .page-header h1 { 
        font-size: 2rem; 
    } 
 
    .section-title { 
        font-size: 2rem; 
    } 
 
    .service-box { 
        padding: var(--spacing-md); 
    } 
 
    .services, 
    .sectors, 
    .about-section { 
        padding: var(--spacing-xl) var(--spacing-sm); 
    } 
} 
 
@media (max-width: 480px) { 
    .hero h2 { 
        font-size: 1.8rem; 
    } 
     
    .page-title { 
        font-size: 1.8rem; 
    } 
     
    .container { 
        padding: var(--spacing-md); 
    } 
} 
 
    .about-hero { 
            position: relative; 
            background: linear-gradient(135deg, rgba(30, 58, 95, 0.95), rgba(44, 82, 130, 0.9)), 
                        url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1600&h=600&fit=crop') center/cover; 
            color: white; 
            text-align: center; 
            padding: 10rem 2rem 6rem; 
            margin-top: 80px; 
        } 
 
        .about-hero h1 { 
            font-size: 4rem; 
            margin-bottom: 1rem; 
            font-weight: 700; 
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); 
            text-transform: uppercase; 
            letter-spacing: 2px; 
        } 
 
        .about-hero p { 
            font-size: 1.4rem; 
            max-width: 900px; 
            margin: 0 auto; 
            opacity: 0.95; 
            line-height: 1.8; 
        } 
 
        /* About Section */ 
        .about-section { 
            background: var(--light-gray); 
            padding: 5rem 2rem; 
        } 
 
        .about-container { 
            max-width: 1400px; 
            margin: 0 auto; 
        } 
 
        .section-header { 
            display: inline-block; 
            background: var(--accent-blue); 
            color: white; 
            padding: 0.5rem 1.5rem; 
            border-radius: 25px; 
            font-size: 0.9rem; 
            font-weight: 600; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            margin-bottom: 1rem; 
        } 
 
        .about-intro { 
            text-align: center; 
            max-width: 900px; 
            margin: 0 auto 4rem; 
        } 
 
        .section-title { 
            font-size: 3rem; 
            color: var(--primary-blue); 
            margin-bottom: 2rem; 
            font-weight: 700; 
        } 
 
        .company-name { 
            color: var(--primary-blue); 
            font-weight: 700; 
        } 
 
        .about-intro > p { 
            font-size: 1.2rem; 
            color: var(--medium-gray); 
            line-height: 1.8; 
            margin-bottom: 2rem; 
        } 
 
        /* Mission & Vision Cards */ 
        .mission-vision-section { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
            gap: 2rem; 
            margin: 3rem 0 4rem; 
        } 
 
        .info-card { 
            background: white; 
            padding: 3rem; 
            border-radius: var(--radius-lg); 
            box-shadow: var(--shadow-lg); 
            transition: transform var(--transition-base), box-shadow var(--transition-base); 
        } 
 
        .info-card:hover { 
            transform: translateY(-5px); 
            box-shadow: var(--shadow-xl); 
        } 
 
        .info-card h3 { 
            color: var(--primary-blue); 
            font-size: 2rem; 
            margin-bottom: 1.5rem; 
            padding-bottom: 0.5rem; 
            border-bottom: 3px solid var(--accent-blue); 
        } 
 
        .info-card p { 
            color: var(--medium-gray); 
            line-height: 1.8; 
            font-size: 1.1rem; 
        } 
 
        /* About Grid */ 
        .about-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
            gap: 2rem; 
            margin-top: 3rem; 
        } 
 
        .about-card { 
            background: white; 
            padding: 2.5rem; 
            border-radius: var(--radius-lg); 
            box-shadow: var(--shadow-md); 
            transition: transform var(--transition-base); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .about-card::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 4px; 
            height: 100%; 
            background: linear-gradient(to bottom, var(--accent-blue), var(--secondary-blue)); 
        } 
 
        .about-card:hover { 
            transform: translateY(-5px); 
            box-shadow: var(--shadow-lg); 
        } 
 
        .about-card h3 { 
            color: var(--primary-blue); 
            margin-bottom: 1.5rem; 
            font-size: 1.5rem; 
            font-weight: 600; 
        } 
 
        .about-card ul { 
            list-style: none; 
            color: var(--medium-gray); 
        } 
 
        .about-card li { 
            padding: 0.7rem 0; 
            padding-left: 1.8rem; 
            position: relative; 
            line-height: 1.6; 
            border-bottom: 1px solid #f0f0f0; 
        } 
 
        .about-card li:last-child { 
            border-bottom: none; 
        } 
 
        .about-card li::before { 
            content: "✓"; 
            position: absolute; 
            left: 0; 
            color: var(--accent-blue); 
            font-size: 1.3rem; 
            font-weight: bold; 
        } 
 
        .about-card li strong { 
            color: var(--primary-blue); 
            font-weight: 600; 
        } 
 
        /* CTA Section */ 
        .cta-section { 
            background: linear-gradient(135deg, var(--dark-gray) 0%, var(--accent-blue) 100%); 
            color: white; 
            padding: var(--spacing-2xl); 
            text-align: center; 
            border-radius: var(--radius-md); 
            margin: 4rem 0; 
        } 
 
        .cta-section h2 { 
            font-size: 2.5rem; 
            margin-bottom: var(--spacing-sm); 
        } 
 
        .cta-section p { 
            font-size: 1.2rem; 
            margin-bottom: var(--spacing-lg); 
        } 
 
        .cta-button { 
            display: inline-block; 
            padding: var(--spacing-sm) var(--spacing-xl); 
            background: white; 
            color: var(--dark-gray); 
            text-decoration: none; 
            border-radius: var(--radius-full); 
            font-weight: 600; 
            font-size: 1.1rem; 
            text-transform: uppercase; 
            transition: all var(--transition-base); 
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
        } 
 
        .cta-button:hover { 
            background: var(--accent-blue); 
            color: white; 
            transform: translateY(-3px); 
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3); 
        } 
 
 
 /* Hero Section */ 
        .hero-section { 
            position: relative; 
            background: linear-gradient(135deg, rgba(30, 58, 95, 0.97), rgba(52, 152, 219, 0.93)), 
                        url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1920&h=600&fit=crop') center/cover; 
            color: white; 
            padding: 8rem 2rem 6rem; 
            text-align: center; 
            overflow: hidden; 
        } 
 
        .hero-section::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0; 
            background:  
                radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.1) 0%, transparent 50%), 
                radial-gradient(circle at 80% 70%, rgba(52, 152, 219, 0.15) 0%, transparent 50%); 
            animation: pulse 8s ease-in-out infinite; 
        } 
 
        @keyframes pulse { 
            0%, 100% { opacity: 0.6; } 
            50% { opacity: 1; } 
        } 
 
        .hero-content { 
            position: relative; 
            z-index: 1; 
            max-width: 1000px; 
            margin: 0 auto; 
        } 
 
        .hero-badge { 
            display: inline-block; 
            background: rgba(255, 215, 0, 0.2); 
            color: #ffd700; 
            padding: 0.5rem 1.5rem; 
            border-radius: 50px; 
            font-size: 0.9rem; 
            font-weight: 600; 
            text-transform: uppercase; 
            letter-spacing: 2px; 
            margin-bottom: 1.5rem; 
            border: 2px solid rgba(255, 215, 0, 0.4); 
        } 
 
        .hero-section h1 { 
            font-size: 4.5rem; 
            margin-bottom: 1.5rem; 
            font-weight: 800; 
            text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.4); 
            letter-spacing: 2px; 
            line-height: 1.1; 
        } 
 
        .hero-section p { 
            font-size: 1.5rem; 
            opacity: 0.95; 
            margin-bottom: 2rem; 
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); 
            font-weight: 300; 
        } 
 
        .hero-stats { 
            display: flex; 
            justify-content: center; 
            gap: 4rem; 
            margin-top: 3rem; 
        } 
 
        .stat-item { 
            text-align: center; 
        } 
 
        .stat-number { 
            font-size: 2.5rem; 
            font-weight: 800; 
            color: #ffd700; 
            display: block; 
            margin-bottom: 0.5rem; 
        } 
 
        .stat-label { 
            font-size: 0.95rem; 
            opacity: 0.9; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
        } 
 
        /* Main Container */ 
        .main-container { 
            max-width: 1400px; 
            margin: -3rem auto 0; 
            padding: 0 2rem 4rem; 
            position: relative; 
            z-index: 10; 
        } 
 
        /* Services Grid */ 
        .services-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
            gap: 2rem; 
            margin-bottom: 3rem; 
        } 
 
        .service-card { 
            background: white; 
            padding: 2.5rem; 
            border-radius: 16px; 
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
            transition: all 0.3s; 
            border: 1px solid #e2e8f0; 
            position: relative; 
            overflow: hidden; 
        } 
 
        .service-card::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 4px; 
            background: linear-gradient(90deg, #3498db, #2c5282); 
        } 
 
        .service-card:hover { 
            transform: translateY(-8px); 
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); 
        } 
 
        .service-icon { 
            width: 60px; 
            height: 60px; 
            background: linear-gradient(135deg, #3498db, #2c5282); 
            border-radius: 12px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 1.8rem; 
            margin-bottom: 1.5rem; 
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3); 
        } 
 
        .service-card h3 { 
            font-size: 1.6rem; 
            font-weight: 700; 
            margin-bottom: 1rem; 
            color: #1e3a5f; 
        } 
 
        .service-card p { 
            line-height: 1.8; 
            color: #4a5568; 
            margin-bottom: 1rem; 
        } 
 
        .service-card ul { 
            margin-left: 1.5rem; 
            margin-top: 1rem; 
        } 
 
        .service-card li { 
            margin-bottom: 0.7rem; 
            line-height: 1.7; 
            color: #4a5568; 
        } 
 
        /* Feature Section */ 
        .feature-section { 
            background: white; 
            padding: 3rem; 
            border-radius: 16px; 
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); 
            margin-bottom: 3rem; 
        } 
 
        .feature-section h2 { 
            font-size: 2.2rem; 
            font-weight: 700; 
            color: #1e3a5f; 
            margin-bottom: 1.5rem; 
            position: relative; 
            padding-bottom: 1rem; 
        } 
 
        .feature-section h2::after { 
            content: ''; 
            position: absolute; 
            bottom: 0; 
            left: 0; 
            width: 80px; 
            height: 4px; 
            background: linear-gradient(90deg, #3498db, #2c5282); 
            border-radius: 2px; 
        } 
 
        .subsection { 
            margin-top: 2rem; 
        } 
 
        .subsection h4 { 
            font-size: 1.3rem; 
            font-weight: 700; 
            color: #2c5282; 
            margin-bottom: 1rem; 
            display: flex; 
            align-items: center; 
            gap: 0.8rem; 
        } 
 
        .subsection h4::before { 
            content: '▶'; 
            color: #3498db; 
            font-size: 0.9rem; 
        } 
 
        /* CTA Box */ 
        .cta-box { 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
            padding: 3rem; 
            border-radius: 16px; 
            text-align: center; 
            margin-top: 2.5rem; 
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .cta-box::before { 
            content: ''; 
            position: absolute; 
            top: -50%; 
            right: -50%; 
            width: 200%; 
            height: 200%; 
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); 
            animation: rotate 15s linear infinite; 
        } 
 
        @keyframes rotate { 
            from { transform: rotate(0deg); } 
            to { transform: rotate(360deg); } 
        } 
 
        .cta-box-content { 
            position: relative; 
            z-index: 1; 
        } 
 
        .cta-box p { 
            color: white; 
            margin-bottom: 1.5rem; 
            font-weight: 600; 
            font-size: 1.2rem; 
        } 
 
        .cta-box a { 
            display: inline-block; 
            background: white; 
            color: #667eea; 
            padding: 1.2rem 3rem; 
            text-decoration: none; 
            font-weight: 700; 
            font-size: 1rem; 
            border-radius: 50px; 
            transition: all 0.3s; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 
        } 
 
        .cta-box a:hover { 
            background: #ffd700; 
            color: #000; 
            transform: translateY(-3px); 
            box-shadow: 0 12px 30px rgba(255, 215, 0, 0.4); 
        } 
 
        /* Final CTA */ 
        .final-cta { 
            background: linear-gradient(135deg, #1e3a5f 0%, #3498db 100%); 
            color: white; 
            padding: 5rem 4rem; 
            text-align: center; 
            border-radius: 20px; 
            margin: 4rem 0; 
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .final-cta::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0; 
            background:  
                radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%), 
                radial-gradient(circle at 20% 80%, rgba(52, 152, 219, 0.1) 0%, transparent 50%); 
        } 
 
        .final-cta-content { 
            position: relative; 
            z-index: 1; 
        } 
 
        .final-cta h2 { 
            font-size: 3rem; 
            margin-bottom: 1.5rem; 
            font-weight: 800; 
        } 
 
        .final-cta p { 
            font-size: 1.4rem; 
            margin-bottom: 2.5rem; 
            opacity: 0.95; 
        } 
 
        .final-cta-button { 
            display: inline-block; 
            padding: 1.5rem 4rem; 
            background: white; 
            color: #1e3a5f; 
            text-decoration: none; 
            border-radius: 50px; 
            font-weight: 700; 
            font-size: 1.2rem; 
            text-transform: uppercase; 
            letter-spacing: 1.5px; 
            transition: all 0.4s; 
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 
        } 
 
        .final-cta-button:hover { 
            background: #ffd700; 
            color: #000; 
            transform: translateY(-5px) scale(1.05); 
            box-shadow: 0 15px 40px rgba(255, 215, 0, 0.5); 
        } 
 
         /* Header */ 
        header { 
            background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%); 
            color: white; 
            padding: 1.2rem 0; 
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); 
            position: sticky; 
            top: 0; 
            z-index: 1000; 
        } 
 
        .header-container { 
            max-width: 1400px; 
            margin: 0 auto; 
            padding: 0 3rem; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
        } 
 
        .logo h1 { 
            font-size: 2.8rem; 
            font-weight: 800; 
            letter-spacing: 3px; 
            margin-bottom: 0.2rem; 
            background: linear-gradient(to right, #fff, #ffd700); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            background-clip: text; 
        } 
 
        .logo p { 
            font-size: 0.9rem; 
            opacity: 0.95; 
            letter-spacing: 2px; 
            text-transform: uppercase; 
            font-weight: 500; 
        } 
 
        nav ul { 
            display: flex; 
            list-style: none; 
            gap: 2.5rem; 
        } 
 
        nav a { 
            color: white; 
            text-decoration: none; 
            font-weight: 600; 
            font-size: 1rem; 
            transition: all 0.3s; 
            position: relative; 
            padding: 0.5rem 0; 
        } 
 
        nav a::before { 
            content: ''; 
            position: absolute; 
            bottom: 0; 
            left: 50%; 
            transform: translateX(-50%); 
            width: 0; 
            height: 3px; 
            background: #ffd700; 
            transition: width 0.3s; 
            border-radius: 2px; 
        } 
 
        nav a:hover::before { 
            width: 100%; 
        } 
 
 
        /* Enhanced Projects Styles */ 
        body { 
            background: #f0f2f5; 
        } 
 
        /* Projects Hero */ 
        .projects-hero { 
            position: relative; 
            background: linear-gradient(135deg, #c5cbd3 0%, #dde1e7 100%); 
            padding: 12rem 2rem 8rem; 
            margin-top: 80px; 
            overflow: hidden; 
        } 
 
        .projects-hero::before { 
            content: ''; 
            position: absolute; 
            width: 100%; 
            height: 100%; 
            background-image: radial-gradient(circle, rgba(255,255,255,0.4) 1.5px, transparent 1.5px); 
            background-size: 25px 25px; 
            opacity: 0.6; 
            left: 0; 
            top: 0; 
        } 
 
        .projects-hero::after { 
            content: ''; 
            position: absolute; 
            right: 0; 
            top: 0; 
            bottom: 0; 
            width: 2px; 
            background: rgba(255, 255, 255, 0.5); 
        } 
 
        .hero-content { 
            max-width: 1400px; 
            margin: 0 auto; 
            position: relative; 
            z-index: 1; 
        } 
 
        .projects-hero h1 { 
            font-size: 8rem; 
            color: #00a8e8; 
            text-align: center; 
            font-weight: 100; 
            letter-spacing: 0.5rem; 
            text-transform: uppercase; 
            margin: 0; 
        } 
 
        .projects-hero p { 
            text-align: center; 
            color: #666; 
            font-size: 1.2rem; 
            margin-top: 1rem; 
        } 
 
        /* Filter Section */ 
        .filter-section { 
            background: white; 
            padding: 2rem; 
            margin: 2rem auto; 
            max-width: 1400px; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
        } 
 
        .filter-buttons { 
            display: flex; 
            justify-content: center; 
            gap: 1rem; 
            flex-wrap: wrap; 
        } 
 
        .filter-btn { 
            padding: 0.8rem 2rem; 
            background: white; 
            border: 2px solid #00a8e8; 
            color: #00a8e8; 
            cursor: pointer; 
            transition: all 0.3s ease; 
            font-weight: 600; 
            text-transform: uppercase; 
            letter-spacing: 0.05rem; 
        } 
 
        .filter-btn:hover, 
        .filter-btn.active { 
            background: #00a8e8; 
            color: white; 
        } 
 
        /* Projects Container */ 
        .projects-container { 
            max-width: 1400px; 
            margin: 0 auto; 
            padding: 3rem 2rem; 
        } 
 
        .projects-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(550px, 1fr)); 
            gap: 3rem; 
            margin-bottom: 3rem; 
        } 
 
        /* Project Card */ 
        .project-card { 
            background: white; 
            border-radius: 0; 
            overflow: hidden; 
            box-shadow: 0 5px 25px rgba(0,0,0,0.08); 
            transition: all 0.4s ease; 
            position: relative; 
            display: flex; 
            flex-direction: column; 
        } 
 
        .project-card:hover { 
            transform: translateY(-15px); 
            box-shadow: 0 15px 45px rgba(0,0,0,0.15); 
        } 
 
        /* Project Image Section */ 
        .project-image-wrapper { 
            position: relative; 
            overflow: hidden; 
            height: 450px; 
        } 
 
        .project-image { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: transform 0.6s ease; 
        } 
 
        .project-card:hover .project-image { 
            transform: scale(1.05); 
        } 
 
        .project-image::after { 
            content: ''; 
            position: absolute; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            height: 150px; 
            background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); 
        } 
 
        /* Project Label */ 
        .project-label { 
            position: absolute; 
            top: 25px; 
            right: 25px; 
            background: #00a8e8; 
            color: white; 
            padding: 0.6rem 1.2rem; 
            font-size: 0.85rem; 
            font-weight: 700; 
            letter-spacing: 0.1rem; 
            writing-mode: vertical-rl; 
            text-orientation: mixed; 
            text-transform: uppercase; 
            z-index: 10; 
            box-shadow: 0 4px 15px rgba(0,168,232,0.3); 
        } 
 
        /* Project Content */ 
        .project-content { 
            padding: 3rem; 
            background: white; 
            flex-grow: 1; 
            display: flex; 
            flex-direction: column; 
            position: relative; 
        } 
 
        .project-header { 
            margin-bottom: 2rem; 
        } 
 
        .project-title { 
            background: #00a8e8; 
            color: white; 
            padding: 1rem 2rem; 
            display: inline-block; 
            font-size: 2rem; 
            font-weight: 300; 
            letter-spacing: 0.15rem; 
            margin-bottom: 0.8rem; 
            text-transform: uppercase; 
            box-shadow: 0 4px 15px rgba(0,168,232,0.2); 
        } 
 
        .project-subtitle { 
            background: #00a8e8; 
            color: white; 
            padding: 0.7rem 2rem; 
            display: inline-block; 
            font-size: 1.3rem; 
            font-weight: 300; 
            letter-spacing: 0.1rem; 
            margin-bottom: 0.5rem; 
        } 
 
        /* Project Info Grid */ 
        .project-info-grid { 
            display: grid; 
            gap: 1.5rem; 
        } 
 
        .info-item { 
            border-left: 4px solid #00a8e8; 
            padding-left: 1.5rem; 
        } 
 
        .info-label { 
            background: #00a8e8; 
            color: white; 
            padding: 0.5rem 1.2rem; 
            display: inline-block; 
            font-size: 0.85rem; 
            font-weight: 700; 
            text-transform: uppercase; 
            margin-bottom: 0.8rem; 
            letter-spacing: 0.08rem; 
        } 
 
        .info-content { 
            color: #555; 
            font-size: 1.05rem; 
            line-height: 1.8; 
        } 
 
        .task-list { 
            list-style: none; 
            padding: 0; 
            margin: 0.5rem 0; 
        } 
 
        .task-list li { 
            padding: 0.6rem 0 0.6rem 2rem; 
            position: relative; 
            color: #555; 
            line-height: 1.6; 
            border-bottom: 1px solid #f0f0f0; 
        } 
 
        .task-list li:last-child { 
            border-bottom: none; 
        } 
 
        .task-list li::before { 
            content: '»'; 
            position: absolute; 
            left: 0; 
            color: #00a8e8; 
            font-weight: bold; 
            font-size: 1.5rem; 
            line-height: 1; 
        } 
 
        /* Company Logo Badge */ 
        .company-badge { 
            position: absolute; 
            bottom: 25px; 
            right: 25px; 
            width: 140px; 
            height: 140px; 
            background: #00a8e8; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            box-shadow: 0 8px 25px rgba(0,168,232,0.3); 
            z-index: 10; 
        } 
 
        .badge-content { 
            text-align: center; 
            color: white; 
        } 
 
        .badge-logo { 
            font-size: 2.5rem; 
            font-weight: bold; 
            margin-bottom: 0.3rem; 
        } 
 
        .badge-text { 
            font-size: 0.7rem; 
            letter-spacing: 0.05rem; 
        } 
 
        /* Statistics Section */ 
        .stats-section { 
            background: linear-gradient(135deg, #1e3a5f 0%, #00a8e8 100%); 
            padding: 4rem 2rem; 
            margin: 4rem 0; 
        } 
 
        .stats-container { 
            max-width: 1200px; 
            margin: 0 auto; 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
            gap: 3rem; 
            text-align: center; 
        } 
 
        .stat-item { 
            color: white; 
        } 
 
        .stat-number { 
            font-size: 4rem; 
            font-weight: 700; 
            margin-bottom: 0.5rem; 
            display: block; 
        } 
 
        .stat-label { 
            font-size: 1.1rem; 
            text-transform: uppercase; 
            letter-spacing: 0.1rem; 
            opacity: 0.9; 
        } 
 
        /* Alternating Layout */ 
        .project-card:nth-child(even) .project-content { 
            background: linear-gradient(to bottom, #f8f9fa 0%, white 30%); 
        } 
 
        /* Load More Button */ 
        .load-more { 
            text-align: center; 
            margin: 3rem 0; 
        } 
 
        .load-more-btn { 
            padding: 1.2rem 3rem; 
            background: white; 
            border: 3px solid #00a8e8; 
            color: #00a8e8; 
            font-size: 1.1rem; 
            font-weight: 700; 
            text-transform: uppercase; 
            letter-spacing: 0.1rem; 
            cursor: pointer; 
            transition: all 0.3s ease; 
        } 
 
        .load-more-btn:hover { 
            background: #00a8e8; 
            color: white; 
            transform: translateY(-3px); 
            box-shadow: 0 8px 25px rgba(0,168,232,0.3); 
        } 
 
        /* Responsive Design */ 
        @media (max-width: 1024px) { 
            .projects-grid { 
                grid-template-columns: 1fr; 
                gap: 2.5rem; 
            } 
        } 
 
        @media (max-width: 768px) { 
            .projects-hero h1 { 
                font-size: 4rem; 
            } 
 
            .project-card { 
                margin: 0; 
            } 
 
            .project-image-wrapper { 
                height: 350px; 
            } 
 
            .project-content { 
                padding: 2rem; 
            } 
 
            .project-title { 
                font-size: 1.5rem; 
                padding: 0.8rem 1.5rem; 
            } 
 
            .project-subtitle { 
                font-size: 1.1rem; 
            } 
 
            .company-badge { 
                width: 100px; 
                height: 100px; 
                bottom: 15px; 
                right: 15px; 
            } 
 
            .badge-logo { 
                font-size: 1.8rem; 
            } 
 
            .filter-section { 
                padding: 1.5rem; 
            } 
 
            .filter-btn { 
                padding: 0.6rem 1.2rem; 
                font-size: 0.85rem; 
            } 
 
            .stats-container { 
                grid-template-columns: repeat(2, 1fr); 
                gap: 2rem; 
            } 
 
            .stat-number { 
                font-size: 2.5rem; 
            } 
        } 
 
/* Logo Styles */ 
.logo { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
} 
 
.logo-link { 
    text-decoration: none; 
    color: inherit; 
    display: flex; 
    align-items: center; 
} 
 
.logo-img { 
    width: 80px; /* Adjusted size */ 
    height: auto; /* Maintain aspect ratio */ 
    object-fit: contain; 
    display: block; 
} 
 
 
        .container { 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 0 20px; 
        } 
 
        .hero-section { 
            text-align: center; 
            color: white; 
            padding: 40px 20px; 
            margin-bottom: 30px; 
        } 
 
        .hero-section h1 { 
            font-size: 48px; 
            font-weight: bold; 
            margin-bottom: 10px; 
            letter-spacing: 3px; 
        } 
 
        .hero-section p { 
            font-size: 18px; 
            opacity: 0.9; 
        } 
 
        .section { 
            background: white; 
            border-radius: 10px; 
            padding: 30px; 
            margin-bottom: 30px; 
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
        } 
 
        .section-header { 
            display: inline-block; 
            padding: 12px 30px; 
            border: 3px solid #2a5298; 
            border-radius: 5px; 
            font-weight: bold; 
            color: #2a5298; 
            font-size: 18px; 
            margin-bottom: 25px; 
            text-transform: uppercase; 
        } 
 
        .section-header.green { 
            border-color: #4a7c59; 
            color: #4a7c59; 
        } 
 
        .content-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 30px; 
            align-items: start; 
        } 
 
        .images-column { 
            display: grid; 
            gap: 20px; 
        } 
 
        .image-row { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 20px; 
        } 
 
        .image-container { 
            width: 100%; 
            overflow: hidden; 
            border-radius: 8px; 
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
        } 
 
        .image-container img { 
            width: 100%; 
            height: 250px; 
            object-fit: cover; 
            display: block; 
            transition: transform 0.3s ease; 
        } 
 
        .image-container:hover img { 
            transform: scale(1.05); 
        } 
 
        .text-column { 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
        } 
 
        .service-list { 
            list-style: none; 
        } 
 
        .service-list li { 
            padding: 12px 0; 
            padding-left: 20px; 
            font-size: 16px; 
            color: #333; 
            border-bottom: 1px solid #e0e0e0; 
            position: relative; 
        } 
 
        .service-list li:before { 
            content: ">"; 
            position: absolute; 
            left: 0; 
            color: #2a5298; 
            font-weight: bold; 
        } 
 
        .service-list li:last-child { 
            border-bottom: none; 
        } 
 
        /* Civil Division Layout */ 
        .civil-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr 1fr; 
            gap: 20px; 
        } 
 
        .civil-left { 
            display: flex; 
            flex-direction: column; 
            gap: 20px; 
        } 
 
        .civil-middle { 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
        } 
 
        .civil-right { 
            display: flex; 
            flex-direction: column; 
            gap: 20px; 
        } 
 
        .tall-image img { 
            height: 400px; 
        } 
 
        /* Electro Mechanical Layout */ 
        .electro-grid { 
            display: grid; 
            grid-template-columns: 2fr 1fr; 
            gap: 30px; 
            margin-top: 25px; 
        } 
 
        .electro-images { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 20px; 
        } 
 
        .electro-text ul { 
            list-style: none; 
        } 
 
        .electro-text ul li { 
            padding: 12px 0; 
            padding-left: 20px; 
            font-size: 15px; 
            color: #333; 
            position: relative; 
        } 
 
        .electro-text ul li:before { 
            content: ">"; 
            position: absolute; 
            left: 0; 
            color: #2a5298; 
            font-weight: bold; 
        } 
 
        /* Oil & Gas Layout */ 
        .oil-gas-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr 1fr; 
            gap: 20px; 
            margin-top: 25px; 
        } 
 
        @media (max-width: 968px) { 
            .content-grid, 
            .civil-grid, 
            .electro-grid, 
            .oil-gas-grid { 
                grid-template-columns: 1fr; 
            } 
 
            .hero-section h1 { 
                font-size: 36px; 
            } 
 
            .tall-image img { 
                height: 300px; 
            } 
        } 
 
        @media (max-width: 640px) { 
            .image-row { 
                grid-template-columns: 1fr; 
            } 
 
            .electro-images { 
                grid-template-columns: 1fr; 
            } 
 
            .hero-section h1 { 
                font-size: 28px; 
            } 
        } 
 
 
 
        
 
     
        /* ===== HERO SECTION ===== */ 
        .projects-hero { 
            position: relative; 
            background: linear-gradient(135deg, #c5cbd3 0%, #dde1e7 100%); 
            padding: 10rem 2rem 6rem; 
            margin-top: 80px; 
            overflow: hidden; 
        } 
 
        .projects-hero::before { 
            content: ''; 
            position: absolute; 
            width: 100%; 
            height: 100%; 
            background-image: radial-gradient(circle, rgba(255,255,255,0.4) 1.5px, transparent 1.5px); 
            background-size: 25px 25px; 
            opacity: 0.6; 
            left: 0; 
            top: 0; 
        } 
 
        .hero-content { 
            max-width: 1400px; 
            margin: 0 auto; 
            position: relative; 
            z-index: 1; 
        } 
 
        .projects-hero h1 { 
            font-size: clamp(3rem, 8vw, 8rem); 
            color: #00a8e8; 
            text-align: center; 
            font-weight: 100; 
            letter-spacing: 0.5rem; 
            text-transform: uppercase; 
            margin: 0; 
        } 
 
        .projects-hero p { 
            text-align: center; 
            color: #666; 
            font-size: clamp(1rem, 2vw, 1.2rem); 
            margin-top: 1rem; 
        } 
 
        /* ===== CONTAINER ===== */ 
        .container-custom { 
            max-width: 1400px; 
            margin: 0 auto; 
            padding: 0 2rem; 
        } 
 
        /* ===== SECTION STYLES ===== */ 
        .section { 
            background: white; 
            border-radius: 10px; 
            padding: 2rem; 
            margin-bottom: 2rem; 
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
            -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
            -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
        } 
 
        .section-header { 
            display: inline-block; 
            padding: 12px 30px; 
            border: 3px solid #2a5298; 
            border-radius: 5px; 
            -webkit-border-radius: 5px; 
            -moz-border-radius: 5px; 
            font-weight: bold; 
            color: #2a5298; 
            font-size: clamp(1rem, 2vw, 1.2rem); 
            margin-bottom: 1.5rem; 
            text-transform: uppercase; 
        } 
 
        .section-header.green { 
            border-color: #4a7c59; 
            color: #4a7c59; 
        } 
 
        /* ===== GRID LAYOUTS ===== */ 
        .content-grid { 
            display: -ms-grid; 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            -ms-grid-columns: 1fr 30px 1fr; 
            gap: 30px; 
            align-items: start; 
        } 
 
        .images-column { 
            display: -ms-grid; 
            display: grid; 
            gap: 20px; 
            grid-gap: 20px; 
        } 
 
        .image-row { 
            display: -ms-grid; 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            -ms-grid-columns: 1fr 20px 1fr; 
            gap: 20px; 
            grid-gap: 20px; 
        } 
 
        .image-container { 
            width: 100%; 
            overflow: hidden; 
            border-radius: 8px; 
            -webkit-border-radius: 8px; 
            -moz-border-radius: 8px; 
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
            -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
            -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
        } 
 
        .image-container img { 
            width: 100%; 
            height: 250px; 
            object-fit: cover; 
            transition: transform 0.3s ease; 
            -webkit-transition: -webkit-transform 0.3s ease; 
            -moz-transition: -moz-transform 0.3s ease; 
        } 
 
        .image-container:hover img { 
            transform: scale(1.05); 
            -webkit-transform: scale(1.05); 
            -moz-transform: scale(1.05); 
        } 
 
        .text-column { 
            display: -webkit-box; 
            display: -moz-box; 
            display: -ms-flexbox; 
            display: -webkit-flex; 
            display: flex; 
            -webkit-flex-direction: column; 
            -ms-flex-direction: column; 
            flex-direction: column; 
            -webkit-justify-content: center; 
            -ms-flex-pack: center; 
            justify-content: center; 
        } 
 
        .service-list { 
            list-style: none; 
            padding: 0; 
            margin: 0; 
        } 
 
        .service-list li { 
            padding: 12px 0 12px 20px; 
            font-size: clamp(0.9rem, 2vw, 1rem); 
            color: #333; 
            border-bottom: 1px solid #e0e0e0; 
            position: relative; 
        } 
 
        .service-list li:before { 
            content: ">"; 
            position: absolute; 
            left: 0; 
            color: #2a5298; 
            font-weight: bold; 
        } 
 
        .service-list li:last-child { 
            border-bottom: none; 
        } 
 
        /* Civil Division Layout */ 
        .civil-grid { 
            display: -ms-grid; 
            display: grid; 
            grid-template-columns: 1fr 1fr 1fr; 
            -ms-grid-columns: 1fr 20px 1fr 20px 1fr; 
            gap: 20px; 
            grid-gap: 20px; 
        } 
 
        .civil-left, 
        .civil-right { 
            display: -webkit-box; 
            display: -moz-box; 
            display: -ms-flexbox; 
            display: -webkit-flex; 
            display: flex; 
            -webkit-flex-direction: column; 
            -ms-flex-direction: column; 
            flex-direction: column; 
            gap: 20px; 
        } 
 
        .civil-middle { 
            display: -webkit-box; 
            display: -moz-box; 
            display: -ms-flexbox; 
            display: -webkit-flex; 
            display: flex; 
            -webkit-flex-direction: column; 
            -ms-flex-direction: column; 
            flex-direction: column; 
            -webkit-justify-content: center; 
            -ms-flex-pack: center; 
            justify-content: center; 
        } 
 
        .tall-image img { 
            height: 400px; 
        } 
 
        /* Electro Mechanical Layout */ 
        .electro-grid { 
            display: -ms-grid; 
            display: grid; 
            grid-template-columns: 2fr 1fr; 
            -ms-grid-columns: 2fr 30px 1fr; 
            gap: 30px; 
            grid-gap: 30px; 
            margin-top: 1.5rem; 
        } 
 
        .electro-images { 
            display: -ms-grid; 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            -ms-grid-columns: 1fr 20px 1fr; 
            gap: 20px; 
            grid-gap: 20px; 
        } 
 
        /* Oil & Gas Layout */ 
        .oil-gas-grid { 
            display: -ms-grid; 
            display: grid; 
            grid-template-columns: 1fr 1fr 1fr; 
            -ms-grid-columns: 1fr 20px 1fr 20px 1fr; 
            gap: 20px; 
            grid-gap: 20px; 
            margin-top: 1.5rem; 
        } 
   
 
        /* ===== RESPONSIVE BREAKPOINTS ===== */ 
         
        /* Tablets and below (991px and down) */ 
        @media (max-width: 991px) { 
            .header-container { 
                padding: 0 1.5rem; 
            } 
 
            .content-grid, 
            .civil-grid, 
            .electro-grid, 
            .oil-gas-grid { 
                grid-template-columns: 1fr; 
                -ms-grid-columns: 1fr; 
            } 
 
            .section { 
                padding: 1.5rem; 
            } 
 
            .tall-image img { 
                height: 300px; 
            } 
        } 
 
        /* Mobile devices (768px and down) */ 
        @media (max-width: 768px) { 
            .mobile-menu-btn { 
                display: block; 
            } 
 
            nav { 
                position: absolute; 
                top: 100%; 
                left: 0; 
                right: 0; 
                background: rgba(30, 58, 95, 0.98); 
                backdrop-filter: blur(15px); 
                -webkit-backdrop-filter: blur(15px); 
                max-height: 0; 
                overflow: hidden; 
                transition: max-height 0.3s ease; 
                -webkit-transition: max-height 0.3s ease; 
                -moz-transition: max-height 0.3s ease; 
            } 
 
            nav.active { 
                max-height: 500px; 
            } 
 
            nav ul { 
                -webkit-flex-direction: column; 
                -ms-flex-direction: column; 
                flex-direction: column; 
                padding: 1rem; 
                gap: 0; 
            } 
 
            nav li { 
                padding: 1rem 0; 
                border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
                width: 100%; 
            } 
 
            .logo-text h1 { 
                font-size: 1.5rem; 
            } 
 
            .logo-text p { 
                font-size: 0.65rem; 
            } 
 
            .logo-img { 
                width: 45px; 
                height: 45px; 
            } 
 
            .projects-hero { 
                padding: 7rem 1rem 4rem; 
            } 
 
            .container-custom { 
                padding: 0 1rem; 
            } 
 
            .section { 
                padding: 1.25rem; 
                margin-bottom: 1.5rem; 
            } 
 
            .image-row { 
                grid-template-columns: 1fr; 
                -ms-grid-columns: 1fr; 
            } 
 
            .electro-images { 
                grid-template-columns: 1fr; 
                -ms-grid-columns: 1fr; 
            } 
        } 
 
        /* Small mobile devices (480px and down) */ 
        @media (max-width: 480px) { 
            .header-container { 
                padding: 0 1rem; 
            } 
 
            .section-header { 
                padding: 8px 20px; 
                font-size: 0.9rem; 
            } 
 
            .image-container img { 
                height: 200px; 
            } 
 
            .tall-image img { 
                height: 250px; 
            } 
        } 
 
        /* Extra small devices (360px and down) */ 
        @media (max-width: 360px) { 
            .logo-text h1 { 
                font-size: 1.2rem; 
            } 
 
            .logo-img { 
                width: 35px; 
                height: 35px; 
            } 
        } 
 
        /* Internet Explorer 11 specific fixes */ 
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
            .content-grid, 
            .civil-grid, 
            .electro-grid, 
            .oil-gas-grid { 
                display: -ms-flexbox; 
                display: flex; 
                -ms-flex-wrap: wrap; 
                flex-wrap: wrap; 
            } 
        }

            /* Styles for screens smaller than 768px (e.g., mobile) */
    @media only screen and (max-width: 767px) {
        body {
            font-size: 14px;
        }
        .container {
            flex-direction: column;
        }
    }

    /* Styles for screens larger than 768px (e.g., desktop) */
    @media only screen and (min-width: 768px) {
        body {
            font-size: 16px;
        }
        .container {
            flex-direction: row;
        }
    }

     
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, #2c5282 0%, #3182ce 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
        }
        
        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .hero-badge {
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 20px;
            border-radius: 25px;
            display: inline-block;
            margin-bottom: 20px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .hero-section h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            letter-spacing: 3px;
            text-transform: uppercase;
        }
        
        .hero-section p {
            font-size: 1.3rem;
            opacity: 0.9;
            font-weight: 300;
        }
        
        /* Main Content */
        .content {
            padding: 80px 0;
        }
        
        /* Section with Image */
        .main-section {
            margin-bottom: 80px;
        }
        
        .main-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 12px;
            margin-bottom: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }
        
        .main-section h2 {
            font-size: 2.8rem;
            color: #2c5282;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 4px solid #2c5282;
        }
        
        .main-section p {
            font-size: 1.1rem;
            color: #444;
            line-height: 1.8;
            margin-bottom: 25px;
            text-align: justify;
        }
        
        /* Two Column Grid */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            margin-top: 60px;
        }
        
        .service-item {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .service-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
        }
        
        .service-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }
        
        .service-content {
            padding: 30px;
        }
        
        .service-item h3 {
            font-size: 1.8rem;
            color: #2c5282;
            margin-bottom: 20px;
        }
        
        .service-item p {
            font-size: 1rem;
            color: #555;
            line-height: 1.7;
            margin-bottom: 20px;
            text-align: justify;
        }
        
        .service-item ul {
            list-style: none;
            margin: 20px 0;
        }
        
        .service-item ul li {
            padding: 10px 0 10px 25px;
            position: relative;
            color: #555;
            font-size: 1rem;
        }
        
        .service-item ul li:before {
            content: "■";
            position: absolute;
            left: 0;
            color: #2c5282;
            font-size: 1.1rem;
        }
        
        /* Acting Responsibly Section */
        .acting-responsibly {
            background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
            padding: 80px 0;
            margin-top: 80px;
        }
        
        .acting-responsibly-content {
            max-width: 1100px;
            margin: 0 auto;
            text-align: center;
        }
        
        .acting-responsibly h2 {
            font-size: 2.5rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 20px;
            color: #2c5282;
        }
        
        .acting-responsibly h3 {
            font-size: 1.8rem;
            color: #2c5282;
            margin-bottom: 25px;
        }
        
        .acting-responsibly p {
            font-size: 1.15rem;
            line-height: 1.8;
            color: #444;
            max-width: 800px;
            margin: 0 auto;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-section {
                padding: 60px 0;
            }
            
            .hero-section h1 {
                font-size: 2.5rem;
            }
            
            .hero-section p {
                font-size: 1.1rem;
            }
            
            .content {
                padding: 40px 0;
            }
            
            .main-section h2 {
                font-size: 2.2rem;
            }
            
            .main-image {
                height: 250px;
            }
            
            .services-grid {
                grid-template-columns: 1fr;
                gap: 30px;
                margin-top: 40px;
            }
            
            .service-item img {
                height: 200px;
            }
            
            .acting-responsibly {
                padding: 60px 0;
            }
            
            .acting-responsibly h2 {
                font-size: 2rem;
            }
            
            .acting-responsibly h3 {
                font-size: 1.5rem;
            }
        }
        
        @media (max-width: 480px) {
            .container {
                padding: 0 15px;
            }
            
            .hero-section {
                padding: 40px 0;
            }
            
            .hero-section h1 {
                font-size: 2rem;
                letter-spacing: 2px;
            }
            
            .hero-section p {
                font-size: 1rem;
            }
            
            .main-section h2 {
                font-size: 1.8rem;
            }
            
            .main-section p {
                font-size: 1rem;
            }
            
            .service-content {
                padding: 20px;
            }
            
            .service-item h3 {
                font-size: 1.5rem;
            }
            
            .acting-responsibly h2 {
                font-size: 1.6rem;
                letter-spacing: 2px;
            }
        }