@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
    --brand-dark-green: #037a35;
    --brand-green: #009640;
    --brand-dark-blue: #1e6fb6;
    --brand-blue: #37aae1;
    --brand-light-blue: #5dc6f2;
    --text-main: #666666;
    --bg-gray: #f8f9fa;
    --bg-white: #ffffff;
}

/* =========================================================
   STANDARD LAYOUT, TYPOGRAPHY & PADDING
   ========================================================= */
body { font-family: 'Lato', sans-serif; color: var(--text-main); font-size: 15px; line-height: 1.6; background-color: var(--bg-white); }
h1, h2, h3, h4, h5 { font-family: 'Lato', sans-serif; font-weight: 700; color: var(--brand-dark-green); margin-top: 0 !important; margin-bottom: 0.5rem !important; }
p { margin-top: 0 !important; margin-bottom: 1rem !important; }

/* Force container constraints */
body #main-content .container.grid-lg { padding-left: 8vw !important; padding-right: 8vw !important; max-width: 1400px !important; }
body #main-content .bg-gray-section, body #main-content .bg-white-section { padding-top: 5rem !important; padding-bottom: 5rem !important; }

/* ---------------------------------------------------------
   UI FIX: Eliminate Grey Padding Strip on About Page
   --------------------------------------------------------- */
body:not(.header-transparent) #start,
body:not(.header-transparent) #body-wrapper,
body:not(.header-transparent) #body,
body:not(.header-transparent) .body-container-wrapper,
body:not(.header-transparent) .body-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: transparent !important;
}

body #main-content .hero-fullwidth { padding-top: 15rem !important; padding-bottom: 8rem !important; }
body #main-content .hero-fullwidth span, body #main-content .hero-fullwidth p { color: #ffffff !important; }

/* Fix HubSpot's Hardcoded White Text */
body #main-content span[style*="color: #ffffff"], body #main-content span[style*="color: #FFFFFF"],
body #main-content p[style*="color: #ffffff"], body #main-content p[style*="color: #FFFFFF"] { color: var(--text-main) !important; }

/* =========================================================
   CARDS & GRIDS (HUBSPOT MIGRATION FIXES)
   ========================================================= */
.akamai-card, .deliverable-card { background: var(--bg-white); border: 1px solid #eaeaea; border-radius: 12px; padding: 30px; height: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.service-card-blue { background: linear-gradient(to bottom,rgba(30,111,182,0.7),rgba(93,198,242,1)); color: #fff; border-radius: 12px; padding: 30px; text-align: center; border: 1px solid #dae5ec; height: 100%; box-shadow: 0 4px 15px rgba(30, 111, 182, 0.15);}
.service-card-blue h4 { color: #fff; font-size: 18px; margin-bottom: 0.5rem; }
.service-card-blue p, .service-card-blue span { font-size: 15px; color: #ffffff !important; margin-bottom: 0 !important; }

.heading-text { margin-top: 1rem !important; margin-bottom: 1.5rem !important; }
.icon-wrapper { margin-bottom: 1rem !important; }
.strict-flex-img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* 4-Column Grids */
#main-content .flex { display: flex !important; flex-wrap: wrap !important; gap: 2rem !important; justify-content: center !important; padding: 2rem 0; }
#main-content .flex .col { flex: 1 1 20% !important; min-width: 200px !important; max-width: 100% !important; }

/* Logistical Services Refactor */
#hs_cos_wrapper_module_1773290968915 .card { padding: 1.5rem !important; display: flex !important; align-items: flex-start !important; text-align: left !important; gap: 15px !important; }
#hs_cos_wrapper_module_1773290968915 .card-icon { margin-bottom: 0 !important; flex-shrink: 0 !important; }
#hs_cos_wrapper_module_1773290968915 .card-icon-wrapper { width: 45px !important; height: 45px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
#hs_cos_wrapper_module_1773290968915 .card-icon svg { width: 24px !important; height: 24px !important; }
#hs_cos_wrapper_module_1773290968915 .card > div:not(.card-icon) { flex: 1 !important; display: block !important; }
#hs_cos_wrapper_module_1773290968915 .card-title { margin-top: 0 !important; margin-bottom: 0.5rem !important; font-size: 1.25rem !important; }

/* =========================================================
   BUTTONS: HEADER & CTA
   ========================================================= */
/* Global Header Button */
#header .header-btn, .navbar .header-btn, a.header-btn, #header a[href*="schedule-now"] {
    background: var(--brand-light-blue) !important;
    color: #ffffff !important;
    border: 2px solid var(--brand-light-blue) !important;
    border-radius: 50px !important;
    padding: 0.4rem 1.5rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    opacity: 1 !important;
}
#header .header-btn:hover, .navbar .header-btn:hover, a.header-btn:hover, #header a[href*="schedule-now"]:hover {
    background: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #ffffff !important;
}

/* ---------------------------------------------------------
   UI FIX: Sleek CTA Bottom Button
   --------------------------------------------------------- */
.btn-sleek-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--brand-light-blue) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 16px 36px !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    border: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(93,198,242,0.3) !important;
}
.btn-sleek-cta:hover {
    background: var(--brand-blue) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(55,170,225,0.4) !important;
    color: #ffffff !important;
}

/* =========================================================
   HEADER & MOBILE MENU ARCHITECTURE
   ========================================================= */
#header { z-index: 999998 !important; }
html body .header-logo { filter: none !important; -webkit-filter: none !important; box-shadow: none !important; }

/* ---------------------------------------------------------
   UI FIX: Suppress Rogue Double Hamburger Menu
   --------------------------------------------------------- */
button#mobile-menu-toggle {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    z-index: -999 !important;
}

/* Clean Custom HTML Toggle */
.mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 22px;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 0;
    margin-left: auto !important; /* Force to far right */
    z-index: 999999 !important;
}
.mobile-toggle span { width: 100%; height: 3px; background: var(--brand-dark-green) !important; border-radius: 3px; transition: 0.3s; transform-origin: left center; }
body.header-transparent #header:not(.scrolled) .mobile-toggle span { background: #ffffff !important; }
body.menu-open .mobile-toggle span { background: var(--brand-dark-green) !important; }
body.menu-open .mobile-toggle span:nth-child(1) { transform: rotate(45deg); top: -2px; position: relative; }
body.menu-open .mobile-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .mobile-toggle span:nth-child(3) { transform: rotate(-45deg); top: 2px; position: relative; }

/* Mobile Overlay Container */
#mobile-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(255, 255, 255, 0.98) !important; z-index: 999990 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; opacity: 0; pointer-events: none; transition: 0.3s ease; backdrop-filter: blur(5px); }
body.menu-open #mobile-overlay { opacity: 1 !important; pointer-events: auto !important; }
body.menu-open { overflow: hidden !important; }
body.menu-open #header { background: rgba(255, 255, 255, 0.98) !important; box-shadow: none !important; }

/* =========================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================= */
@media (max-width: 1024px) {
    #main-content .flex .col { flex: 1 1 40% !important; }
}

@media (max-width: 960px) {
    .desktop-menu, .navbar-section.menu-links { display: none !important; }
    .mobile-toggle { display: flex !important; }
    
    html body #header, html body.header-transparent #header {
        background-color: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
    }
    
    html body .header-logo { height: 42px !important; filter: none !important; -webkit-filter: none !important; }
    html body .mobile-toggle span { background-color: var(--brand-dark-green) !important; }
    
    html body .hero-fullwidth { margin-top: 65px !important; padding-top: 8rem !important; }
    .bg-gray-section, .bg-white-section { padding: 4rem 5vw !important; }
    
    div[style*="display: flex"], div[style*="display:flex"] { flex-direction: column !important; align-items: center !important; }
    div[style*="flex: 1 1"], div[style*="flex:1 1"] { width: 100% !important; max-width: 100% !important; }
}

@media (max-width: 768px) {
    #main-content .flex .col { flex: 1 1 100% !important; }
}

@media (max-width: 600px) {
    .hero-fullwidth h1 { font-size: 34px !important; }
    h2 { font-size: 28px !important; }
    .hero-fullwidth { padding-top: 9rem !important; padding-bottom: 6rem !important; }
}

/* Force strict viewports */
html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; }
#main-content, .bg-white-section, .bg-gray-section, .hero-fullwidth, .container { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }