/* ==========================================================================
   Main Stylesheet
   - This file imports all the component-based stylesheets.
   - Order is important: base styles first, then layout, then components.
   ========================================================================== */

/* 1. Base & Global Styles */
@import url("components/base.css");

/* 2. Utilities & Effects */
@import url("components/utilities.css");

/* 3. Page Components */
@import url("components/header.css");
@import url("components/hero.css");
@import url("components/services.css");
@import url("components/cases.css");
@import url("components/about.css");
@import url("components/testimonials.css");
@import url("components/full-service.css");
@import url("components/pricing.css");
@import url("components/blog.css");
@import url("components/cta.css");
@import url("components/footer.css");

/* 4. Modals & Overlays */
@import url("components/modal.css");

/* Header buttons styled like screenshot */
.btn.btn-outline-header {
    background: transparent;
    color: var(--orange);
    border: 2px solid var(--orange);
    border-radius: 28px;
    padding: 10px 16px;
    font-weight: 700;
}
.btn.btn-outline-header:hover {
    background: rgba(251, 77, 23, 0.1);
}
.btn.btn-contact-header {
    background: var(--dark-teal);
    color: var(--white);
    border-radius: 28px;
    padding: 10px 16px;
    font-weight: 700;
    border: 2px solid var(--dark-teal);
}
.btn.btn-contact-header:hover { opacity: 0.9; }

/* Injected styles for case/blog pages to ensure consistency */
.main-header #menu {
    background: rgba(255,255,255,0.8) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 30px !important;
    padding: 4px 20px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important;
    height: auto !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%; /* Ensure it takes up available space */
}

/* Hamburger initially hidden on desktop */
.hamburger {
    display: none;
}