:root {
    /* Brand Colors extracted from Logo */
    --brand-red: #f92900;
    --brand-green: #359c55;
    --brand-blue: #1868bd;

    /* Theme Colors - Light Minimalist */
    --bg-color: #fcfcfc;
    /* Very light gray, almost white */
    --secondary-bg: #f4f4f4;
    /* Slightly darker for sections */
    --text-color: #2c3e50;
    /* Dark slate for readability, not harsh black */
    --text-muted: #7f8c8d;
    --border-color: #e5e5e5;

    /* Functional Colors */
    --accent-color: var(--brand-blue);
    /* Primary action color */
    --accent-hover: #145a9e;

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --max-width: 1200px;
    --header-height: 90px;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease, opacity 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 30px;
}

.btn {
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50px;
    /* Pill-shaped for minimalist feel */
    font-weight: 500;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(24, 104, 189, 0.2);
}

.btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(24, 104, 189, 0.3);
}

.btn-outline {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    box-shadow: none;
    padding: 14px 32px;
}

.btn-outline:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: transparent;
    transform: translateY(-2px);
}

.section {
    padding: 100px 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 300;
    /* Lighter weight for minimalism */
    margin-bottom: 2.5rem;
    color: var(--text-color);
    letter-spacing: -0.5px;
}

/* Header */
.header {
    background-color: rgba(252, 252, 252, 0.95);
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.3s ease;
    backdrop-filter: blur(10px);
}

.header.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    background-color: rgba(255, 255, 255, 0.98);
}

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

.logo img {
    height: 50px;
    width: auto;
}

.nav-menu {
    display: flex;
    gap: 40px;
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    position: relative;
    padding: 5px 0;
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-color);
}

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

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Hero Section (Common) */
.hero {
    padding: 160px 0 100px;
    background: linear-gradient(to bottom, rgba(252, 252, 252, 0.6), rgba(244, 244, 244, 0.8)), url('../img/hero_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    /* Minimalist tend to center hero text */
}

.hero h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -2px;
}

.hero p {
    font-size: 1.35rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 50px;
    font-weight: 300;
}

/* Cards & Grid */
.grid-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Force 3 columns for the row look */
    gap: 40px;
}

@media (max-width: 900px) {
    .grid-services {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

.projects-grid {
    display: grid;
    gap: 40px;
}

.service-card,
article {
    background: white;
    padding: 40px;
    border-radius: 20px;
    /* Softer rounded corners */
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    /* Very subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover,
article:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

.service-card h3,
article h3 {
    color: var(--text-color);
    font-weight: 600;
    margin-bottom: 10px;
}

.text-muted-light {
    color: var(--text-muted);
}

/* Footer */
.footer {
    background-color: white;
    padding: 80px 0 30px;
    border-top: 1px solid var(--border-color);
}

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

.footer-col h3 {
    color: var(--text-color);
    margin-bottom: 25px;
    font-size: 1.1rem;
    font-weight: 600;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: var(--text-muted);
    font-size: 0.95rem;
}

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

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.delay-3 {
    animation-delay: 0.3s;
}

/* =========================================
   Responsive Styles
   ========================================= */

/* Burger Menu Styles */
.header-burger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    z-index: 1001;
}

.header-burger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Mobile Utilities */
.show-mobile {
    display: none !important;
}

.hidden-mobile {
    display: block;
    /* or inline-block depending on element */
}

/* Responsive Layout Helpers */
.responsive-flex-row {
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
}

.responsive-expertise-row {
    display: flex;
    gap: 60px;
    align-items: center;
    margin-bottom: 120px;
}

.responsive-expertise-row.reverse {
    flex-direction: row-reverse;
}

/* Tablet & Mobile Breakpoint (max-width: 900px) */
@media (max-width: 900px) {
    :root {
        --header-height: 80px;
    }

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

    .section-title {
        font-size: 2rem;
    }

    .grid-services {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
    }
}

/* Mobile Breakpoint (max-width: 768px) */
@media (max-width: 768px) {

    /* Utilities */
    .show-mobile {
        display: block !important;
    }

    .hidden-mobile {
        display: none !important;
    }

    /* Header & Navigation */
    .header-burger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: white;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.3s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1000;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        padding-bottom: var(--header-height);
        /* Offset for potential bottom overlap if needed */
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu li {
        margin: 15px 0;
    }

    .nav-link {
        font-size: 1.5rem;
        color: var(--text-color);
    }

    /* Burger Animation when active */
    .header-burger.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .header-burger.active span:nth-child(2) {
        opacity: 0;
    }

    .header-burger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* JS adds 'active' class to nav-menu only, so we might need to toggle class on burger too or use sibling selector if burger is after nav in HTML.
       In header.php: nav is before burger. So sibling selector won't work easily to style burger based on nav active state unless we toggle a class on a common parent or the burger itself.
       Let's assume script.js toggles 'active' on nav-menu. We should probably update script.js to toggle burger active state too for animation.
       For now, let's keep it simple or rely on script update.
    */

    /* Layout & General */
    .container {
        padding: 0 20px;
    }

    .section {
        padding: 60px 0;
    }

    .hero {
        padding: 130px 0 60px;
    }

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

    .hero p {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }

    .btn {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }

    .btn-wrapper {
        display: flex;
        flex-direction: column;
    }

    .hero .btn-outline {
        margin-left: 0 !important;
    }

    /* Force stacking for the Vision section specifically if it has no class? 
       It is the .container inside the section with secondary-bg.
    */
    section[style*="secondary-bg"] .container {
        flex-direction: column !important;
        gap: 40px !important;
    }

    section[style*="secondary-bg"] .container>div {
        width: 100%;
        min-width: auto !important;
    }

    /* Cards */
    .grid-services {
        grid-template-columns: 1fr;
    }

    .projects-grid {
        grid-template-columns: 1fr !important;
        /* Force single column */
    }


    /* Responsive Helpers Mobile Overrides */
    .responsive-flex-row {
        flex-direction: column;
        gap: 40px;
    }

    .responsive-expertise-row {
        flex-direction: column !important;
        gap: 40px;
        margin-bottom: 60px;
    }

    /* Reset reverse direction on mobile so text/image stack consistently */
    .responsive-expertise-row.reverse {
        flex-direction: column !important;
    }

    /* Ensure images in expertise rows come first or second as desired. 
       Currently HTML order is Image then Text. 
       Standard column direction puts Image on top. 
       If we want consistent order, we are good.
    */

    /* Fix overflow for min-width items on small screens */
    .responsive-flex-row>div,
    .responsive-expertise-row>div {
        min-width: 100% !important;
    }

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

    .footer {
        padding: 50px 0 20px;
    }
}