/* CSS Custom Properties - Root Variables */
:root {
    --primary-orange: #fda50f;
    --accent-orange: #ff4500;
    --neutral-gray: #727472;
    --text-dark: #222;
    --text-light: #444;
    --text-muted: #999;
    --bg-light: #F9F9F6;
    --bg-dark: #1a1a1a;
}

/* Base Body Styles */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: var(--text-dark);
    background: var(--bg-light);
    transition: all 0.3s ease;
}

/* Global Box Sizing & Overflow Prevention */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

/* Container Overflow Protection */
.navbar-container,
.hero-section,
.about-section,
.work-section,
.clients-section,
.services-section,
.contact-section,
.footer-content {
    max-width: 100vw !important;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Animation Keyframes */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes slideRight {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}