/*
Theme Name: New Arrowhead Theme 2026
Author: Madison Peterson
Description: A custom WordPress theme for Arrowhead based on 2026 brand guidelines
Version: 1.1 - Optimized for 100% Zoom
License: GNU General Public License v2 or later
Text Domain: new-arrowhead-theme

*/
/* Prevent white flash */
html {
    background-color: #ffffff;
}

body {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

/* Show content immediately */
.site-header,
.site-main,
.site-footer {
    animation: none !important;
}

/* ========== CSS VARIABLES ========== */
:root {
    /* Brand Colors */
    --color-primary-blue: #1D95D1;
    --color-primary-green: #6EB510;
    --color-blue-gray: #2B4150;
    --color-bright-teal: #5CC2CF;
    --color-dark-teal: #207C7E;
    --color-orange: #FF6600;
    --color-light-gray: #E6E7E8;
    --color-black: #000000;
    --color-white: #FFFFFF;
    
    /* Typography - UPDATED FOR 100% ZOOM */
    --font-primary: 'Urbanist', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    
    /* Spacing - IMPROVED */
    --container-max: 1200px;
    --container-padding: 40px;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 80px;
    --spacing-xxl: 100px;
}

/* ========== RESET & BASE ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-blue-gray);
    background: var(--color-white);
    padding-top: 0;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
    box-sizing: border-box;
}

/* Typography - UPDATED SCALE */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

h1 { font-size: 52px; font-weight: 900; }
h2 { font-size: 36px; font-weight: 900; }
h3 { font-size: 24px; font-weight: 600; }
h4 { font-size: 20px; font-weight: 600; }
h5 { font-size: 18px; font-weight: 500; }

p {
    margin-bottom: var(--spacing-sm);
    font-size: 16px;
}

a {
    color: var(--color-primary-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary-green);
}

/* ========== UNIFIED BUTTON STYLES ========== */
.btn-primary,
.btn-content-read-more,
.btn-carousel-learn-more,
input[type="submit"],
button[type="submit"],
.newsletter-right input[type="submit"],
.header-cta .btn-primary,
a.btn-primary,
.button,
.wp-block-button__link {
    display: inline-block !important;
    background: #2B4150 !important;
    color: #FFFFFF !important;
    padding: 14px 28px !important;
    border: 2px solid #2B4150 !important;
    border-radius: 4px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
}

.btn-primary:hover,
.btn-content-read-more:hover,
.btn-carousel-learn-more:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.newsletter-right input[type="submit"]:hover,
.header-cta .btn-primary:hover,
a.btn-primary:hover,
.button:hover,
.wp-block-button__link:hover {
    background: #FFFFFF !important;
    color: #2B4150 !important;
    border-color: #2B4150 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Max Mega Menu Contact Us Button */
#mega-menu-primary li#mega-menu-item-2011 > a,
#mega-menu-primary li.mega-nav-button > a,
#mega-menu-primary li.mega-menu-item-2011 > a,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-nav-button > a.mega-menu-link,
li.mega-nav-button a,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-nav-button > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #2B4150 !important;
    color: #FFFFFF !important;
    padding: 14px 28px !important;
    border: 2px solid #2B4150 !important;
    border-radius: 4px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin-left: 20px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

#mega-menu-primary li#mega-menu-item-2011 > a:hover,
#mega-menu-primary li.mega-nav-button > a:hover,
#mega-menu-primary li.mega-menu-item-2011 > a:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-nav-button > a.mega-menu-link:hover,
li.mega-nav-button a:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-nav-button > a:hover {
    background: #FFFFFF !important;
    color: #2B4150 !important;
    border-color: #2B4150 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Remove pseudo-elements on buttons */
.btn-primary::before,
.btn-content-read-more::before,
input[type="submit"]::before,
button[type="submit"]::before,
.btn-primary::after,
.btn-content-read-more::after,
input[type="submit"]::after,
button[type="submit"]::after {
    display: none !important;
}

/* ========== HEADER ========== */
.site-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-light-gray);
    padding: 10px 0 12px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    min-height: auto;
}

main,
#primary,
.site-content,
section {
    scroll-margin-top: 100px;
}

.site-header .container,
.site-header > .container,
header.site-header .container,
header > .container {
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

.header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--spacing-md);
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 80px;
}

.site-branding,
.site-header .site-branding,
header .site-branding,
.header-inner .site-branding,
a.custom-logo-link,
.custom-logo-link {
    display: flex !important;
    align-items: center !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
}

.site-branding img,
.site-branding .custom-logo {
    height: 32px;
    width: auto;
    display: block;
}

.site-branding {
    display: flex;
    align-items: center;
    margin-right: auto;
    padding: 0;
}

.site-logo-text {
    font-family: var(--font-primary);
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary-blue);
}

/* Navigation - Desktop Only */
.main-navigation {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-menu li a {
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 15px;
    color: var(--color-blue-gray);
    padding: var(--spacing-xs) 0;
    display: block;
    text-decoration: none;
}

.nav-menu li a:hover,
.nav-menu li.current-menu-item a {
    color: var(--color-primary-blue);
}

/* Mobile Menu Toggle - Hidden by default */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 9999;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: #2B4150;
    display: block;
    transition: all 0.3s ease;
}

/* Hamburger X animation */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* ========== FOOTER - COMPLETE WITH MOBILE FIX ========== */
.site-footer {
    background: var(--color-blue-gray);
    color: var(--color-white);
    padding: var(--spacing-xl) 0 var(--spacing-md);
    margin-top: 0 !important;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
    max-width: 300px;
}

.footer-logo-text {
    font-family: var(--font-primary);
    font-size: 22px;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
}

.footer-tagline {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-light-gray);
    margin-top: var(--spacing-sm);
}

.footer-column h3 {
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: var(--spacing-xs);
}

.footer-column ul li a {
    color: var(--color-light-gray);
    font-size: 14px;
    transition: color 0.3s ease;
    text-decoration: none;
}

.footer-column ul li a:hover {
    color: var(--color-white);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--color-light-gray);
}

.footer-legal {
    display: flex;
    gap: var(--spacing-md);
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-legal a {
    color: var(--color-light-gray);
    font-size: 14px;
    text-decoration: none;
}

.footer-legal a:hover {
    color: var(--color-white);
}

/* ========== TABLET BREAKPOINT ========== */
@media screen and (max-width: 1024px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    
    .footer-brand {
        max-width: 100%;
    }
}

/* ========== MOBILE FOOTER - CENTERED ========== */
@media screen and (max-width: 768px) {
    .site-footer {
        padding: 60px 0 40px;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Footer Brand - Center everything */
    .footer-brand {
        max-width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
    }
    
    /* Logo centering */
    .footer-brand .custom-logo-link {
        display: inline-block;
        margin: 0 auto 16px auto;
    }
    
    .footer-brand .custom-logo-link img {
        display: block;
        margin: 0 auto;
        max-width: 200px;
        height: auto;
    }
    
    .footer-brand .footer-logo-text {
        text-align: center;
        margin: 0 auto 16px auto;
    }
    
    /* Tagline centering */
    .footer-tagline {
        text-align: center;
        margin: 0 auto;
        max-width: 300px;
    }
    
    /* Footer Columns - Center all content */
    .footer-column {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-column h3 {
        text-align: center;
        margin-bottom: 16px;
        width: 100%;
    }
    
    .footer-column ul {
        text-align: center;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-column ul li {
        list-style: none;
        text-align: center;
        margin-bottom: 12px;
        width: 100%;
    }
    
    .footer-column ul li a {
        display: inline-block;
        text-align: center;
    }
    
    /* Social links */
    .footer-column ul.social-links {
        justify-content: center;
    }
    
    /* Footer Bottom - Stack and center */
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding-top: 30px;
        margin-top: 30px;
    }
    
    .footer-bottom p {
        text-align: center;
        margin: 0;
        width: 100%;
    }
    
    .footer-legal {
        justify-content: center;
        text-align: center;
        padding: 0;
        margin: 0;
        width: 100%;
    }
}

/* ========== SMALL MOBILE ========== */
@media screen and (max-width: 480px) {
    .site-footer {
        padding: 50px 0 30px;
    }
    
    .footer-top {
        gap: 35px;
    }
    
    .footer-brand .custom-logo-link img {
        max-width: 180px;
    }
    
    .footer-tagline {
        font-size: 13px;
        max-width: 280px;
    }
    
    .footer-column h3 {
        font-size: 15px;
    }
    
    .footer-column ul li a {
        font-size: 13px;
    }
}

/* ========== MAX MEGA MENU OVERRIDES ========== */
#mega-menu-wrap-primary #mega-menu-primary {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    display: inline-block !important;
    float: none !important;
    margin: 0 20px !important;
    position: relative !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a {
    font-family: var(--font-secondary) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    color: var(--color-blue-gray) !important;
    padding: 8px 0 !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a:hover {
    color: var(--color-primary-blue) !important;
}

/* Mega menu dropdown panel styles */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border-top: 3px solid var(--color-primary-blue) !important;
    padding: 20px !important;
    min-width: 200px !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item:hover > ul.mega-sub-menu,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu:hover > ul.mega-sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li a {
    display: block !important;
    padding: 10px 15px !important;
    color: var(--color-blue-gray) !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li a:hover {
    background: var(--color-light-gray) !important;
    color: var(--color-primary-blue) !important;
    padding-left: 20px !important;
}

#mega-menu-wrap-primary {
    display: flex !important;
    justify-content: flex-end !important;
    margin-right: 20px;
}

.main-navigation {
    margin-left: auto;
    margin-right: 0;
}

#mega-menu-wrap-primary {
    margin-left: auto;
}

#mega-menu-primary > li.mega-menu-item {
    margin-right: 20px;
}

#mega-menu-primary > li.mega-menu-item:nth-last-child(2) {
    margin-right: 15px;
}

/* Hide search buttons and toggles */
.search-button,
.header-search,
#mega-menu-primary .mega-search,
#mega-menu-primary li.mega-menu-item.mega-search-toggle,
#mega-menu-primary li[class*="search"],
li.mega-search-toggle,
button.mega-search-toggle,
.mega-menu-toggle,
#mega-menu-wrap-primary .mega-toggle-blocks-right,
#mega-menu-wrap-primary .mega-toggle-block,
li.mega-menu-item.mega-toggle-on,
.mega-toggle-block-1,
.mega-search-toggle-block {
    display: none !important;
}

#wpadminbar #wp-admin-bar-search,
#wp-admin-bar-search {
    display: none !important;
}

.admin-bar-message,
#wp-admin-bar-my-account,
.logged-in-as {
    display: none !important;
}

#mega-menu-primary li.mega-nav-button {
    display: inline-block !important;
}

.site-header .header-inner {
    align-items: center;
}

#mega-menu-wrap-primary {
    display: flex !important;
    align-items: center !important;
}

/* ========== HERO SECTION ========== */
.hero-section {
    position: relative;
    min-height: 400px !important;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 80px 0;
    background: radial-gradient(ellipse at 20% 30%, #2B4150 0%, #2B4150 25%, #207C7E 55%, #1D95D1 100%) !important;
}

.hero-section .container,
.hero-section > .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.6;
}

.hero-pattern {
    position: absolute;
    top: -3%;
    left: 40%;
    right: -10%;
    bottom: -3%;
    overflow: hidden;
    background-image: url('https://arrowheadprstg.wpengine.com/wp-content/uploads/2026/01/lines2.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 750px;
    opacity: 1;
    z-index: 2;
}

.hero-pattern::before,
.hero-pattern::after,
.hero-background::before,
.hero-background::after,
.hero-segmented-lines,
.hero-segmented-lines::before,
.hero-segmented-lines::after {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-text {
    color: var(--color-white);
    max-width: 65%;
    text-align: left;
}

.hero-title {
    font-family: var(--font-primary);
    font-size: 52px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    text-align: left;
    animation: fadeInTyping 1.5s ease-out;
}

@keyframes fadeInTyping {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

.hero-subtitle {
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-light-gray);
    margin-bottom: var(--spacing-lg);
    text-align: left;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-cta {
    text-align: left;
    margin-top: var(--spacing-md);
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.btn-hero-primary,
.hero-cta .btn-primary {
    display: inline-block !important;
    background: #2b4150 !important;
    color: #FFFFFF !important;
    padding: 14px 28px !important;
    border-radius: 4px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    border: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(92, 194, 207, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
}

.btn-hero-primary::before,
.hero-cta .btn-primary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
    display: block !important;
}

.btn-hero-primary:hover,
.hero-cta .btn-primary:hover {
    background: #2b4150 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 30px rgba(92, 194, 207, 0.4) !important;
}

.btn-hero-primary:hover::before,
.hero-cta .btn-primary:hover::before {
    left: 100% !important;
}

/* ========== WHO WE ARE SECTION ========== */
.who-we-are-section {
    padding: var(--spacing-xxl) 0;
    background: #F5F5F5;
    position: relative;
    overflow: hidden;
}

.who-we-are-section::before {
    display: none;
}

.who-we-are-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.who-we-are-image {
    position: relative;
}

.who-we-are-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(43, 65, 80, 0.15);
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.who-we-are-image:hover img {
    transform: rotate(-2deg);
}

.who-we-are-image::after {
    display: none;
}

.who-we-are-content {
    max-width: 600px;
}

.who-we-are-content .section-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #6eb510;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
    display: inline-block;
    padding-left: 0;
    text-align: left;
}

.who-we-are-content .section-label::before {
    display: none;
}

.who-we-are-content .section-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: #2B4150;
    margin-bottom: 20px;
    line-height: 1.2;
    text-align: left;
}

.who-we-are-content .section-description {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #2B4150;
    text-align: left;
}

.who-we-are-content .section-description p {
    margin-bottom: 18px;
    text-align: left;
}

.who-we-are-content .section-description p:last-child {
    margin-bottom: 0;
}

.who-we-are-content .section-description strong {
    color: #1D95D1;
    font-weight: 700;
}

/* ========== LATEST CONTENT SECTION ========== */
.latest-content-section {
    padding: var(--spacing-xxl) 0;
    background: #FFFFFF;
    position: relative;
}

.latest-content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.latest-content-card {
    display: flex;
    flex-direction: column;
}

.content-card-label-wrapper {
    margin-bottom: 20px;
}

.content-card-label-wrapper .section-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #6eb510;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    padding-left: 0;
    text-align: left;
}

.content-card-label-wrapper .section-label::before {
    display: none;
}

.content-card-inner {
    background: #F5F5F5;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(43, 65, 80, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-card-inner:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(43, 65, 80, 0.12);
}

.content-card-inner::after {
    display: none;
}

.content-card-image {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.content-card-image a {
    display: block;
    overflow: hidden;
}

.content-card-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.content-card-image a:hover img {
    transform: scale(1.05);
}

.content-card-content {
    padding: 28px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;
    text-align: left;
}

.content-card-content .content-card-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 14px;
    text-align: left;
}

.content-card-content .content-card-title a {
    color: #2B4150;
    text-decoration: none;
    transition: color 0.3s ease;
}

.content-card-inner:hover .content-card-title a {
    color: #1D95D1;
}

.content-card-content .content-card-excerpt {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #2B4150;
    margin-bottom: auto;
    flex-grow: 1;
    text-align: left;
}

.content-card-content .btn-content-read-more {
    align-self: flex-start;
    margin-top: 20px;
}

/* ========== SERVICES SECTION ========== */
.services-section {
    padding: var(--spacing-xxl) 0;
    background: linear-gradient(135deg, #2B4150 0%, #207C7E 100%);
    position: relative;
    overflow: hidden;
}

.services-background-element {
    display: none;
}

.services-section .container {
    position: relative;
    z-index: 2;
}

.services-header {
    text-align: left;
    max-width: 900px;
    margin: 0 0 50px 0;
}

.services-header .section-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #6eb510;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 14px;
    display: inline-block;
    padding-left: 0;
}

.services-header .section-label::before {
    display: none;
}

.services-header .section-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 18px;
    line-height: 1.2;
    text-align: left;
}

.services-header .section-description {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.service-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.service-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    width: 100%;
}

.service-card-inner {
    position: relative;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px;
    background: rgba(43, 65, 80, 0.6);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(92, 194, 207, 0.3);
    transition: background 0.25s ease-out;
}

.service-card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    z-index: 1;
}

.service-card:hover .service-card-bg-image {
    opacity: 1;
}

.service-card-bg-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(43, 65, 80, 0.4) 0%, rgba(43, 65, 80, 0.85) 100%);
}

.service-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.service-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity 0.25s ease-out;
}

.service-card:hover .service-icon img {
    opacity: 1;
}

.service-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

.service-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    line-height: 1.2;
    text-align: center;
    transition: color 0.25s ease-out;
}

.service-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    transition: color 0.25s ease-out;
}

.service-card:hover .service-description {
    color: rgba(255, 255, 255, 1);
}

.service-card::before {
    display: none;
}

/* ========== SERVICES CAROUSEL SECTION ========== */
.services-carousel-section {
    padding: var(--spacing-xxl) 0;
    background: #F8F9FA;
    overflow: hidden;
}

.services-carousel-header {
    text-align: left;
    max-width: 800px;
    margin: 0 0 50px 0;
}

.services-carousel-header .section-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #6eb510;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 14px;
    display: inline-block;
}

.services-carousel-header .section-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: #2B4150;
    margin-bottom: 18px;
    line-height: 1.2;
    text-align: left;
}

.services-carousel-header .section-description {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #666;
    text-align: left;
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
    padding: 20px 0;
}

.carousel-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    width: 100%;
}

.carousel-card {
    width: 100%;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid #2B4150;
}

.carousel-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.carousel-card-inner {
    padding: 32px 26px 26px 26px;
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

.carousel-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 3px solid #5CC2CF;
    border-radius: 50%;
    padding: 16px;
    flex-shrink: 0;
}

.carousel-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(0) saturate(100%) invert(77%) sepia(13%) saturate(1844%) hue-rotate(134deg) brightness(95%) contrast(88%);
}

.carousel-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #2B4150;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    line-height: 1.2;
    text-align: center;
}

.carousel-description {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
    text-align: center;
}

.carousel-features {
    list-style: none;
    padding: 0;
    margin: 0 0 auto 0;
    flex-grow: 1;
}

.carousel-features li {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #666;
    padding: 7px 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}

.carousel-features li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.btn-carousel-learn-more {
    margin-top: 26px;
    align-self: center;
}

/* ========== NEWSLETTER SECTION ========== */
.newsletter-split-section {
    background: #F8F9FA;
    padding: var(--spacing-xxl) 0 var(--spacing-xxl) 0;
    border-top: 1px solid rgba(43, 65, 80, 0.1);
    position: relative;
    overflow: hidden;
}

.newsletter-split-section::before,
.newsletter-split-section::after {
    display: none;
}

.newsletter-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 2;
}

.newsletter-left h2 {
    font-family: 'Urbanist', sans-serif !important;
    font-size: 36px !important;
    font-weight: 900 !important;
    color: #2B4150 !important;
    margin-bottom: 18px !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

.newsletter-left p {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #2B4150 !important;
    margin: 0 !important;
    max-width: 500px;
    text-align: left !important;
}

.newsletter-right {
    padding-left: 40px;
    border-left: 2px solid rgba(92, 194, 207, 0.2);
}

.newsletter-right .mc4wp-form {
    max-width: 100%;
}

.newsletter-right .mc4wp-form-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.newsletter-right label {
    display: none !important;
}

.newsletter-right input[type="text"],
.newsletter-right input[type="email"] {
    font-family: 'Inter', sans-serif !important;
    padding: 16px 20px !important;
    border: 2px solid rgba(43, 65, 80, 0.15) !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    color: #2B4150 !important;
    width: 100% !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.newsletter-right input[type="text"]:focus,
.newsletter-right input[type="email"]:focus {
    border-color: #5CC2CF !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(92, 194, 207, 0.1) !important;
}

.newsletter-right input::placeholder {
    color: #9CA3AF !important;
    opacity: 1 !important;
}

.newsletter-right .mc4wp-success {
    background: rgba(110, 181, 16, 0.1) !important;
    color: #6EB510 !important;
    border: 2px solid #6EB510 !important;
    padding: 14px 20px !important;
    border-radius: 4px !important;
    margin-top: 18px !important;
}

.newsletter-right .mc4wp-error {
    background: rgba(220, 53, 69, 0.1) !important;
    color: #dc3545 !important;
    border: 2px solid #dc3545 !important;
    padding: 14px 20px !important;
    border-radius: 4px !important;
    margin-top: 18px !important;
}

.newsletter-right p {
    margin: 0 !important;
}

/* ========== BACK TO TOP BUTTON ========== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #5CC2CF;
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: #6EB510;
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.back-to-top:focus {
    outline: 3px solid #6EB510;
    outline-offset: 2px;
}

.back-to-top svg {
    width: 24px;
    height: 24px;
}

/* ========== RESPONSIVE STYLES ========== */
@media (min-width: 1000px) and (max-width: 1400px) {
    .hero-pattern {
        left: 45% !important;
        right: -12% !important;
        background-position: 100% center !important;
    }
}

@media (max-width: 999px) {
    .hero-pattern {
        display: none !important;
    }
    
    .hero-pattern::before,
    .hero-pattern::after,
    .hero-background::before,
    .hero-background::after,
    .hero-segmented-lines,
    .hero-segmented-lines::before,
    .hero-segmented-lines::after {
        display: none !important;
    }
}

@media (max-width: 968px) {
    .who-we-are-inner {
        gap: 50px;
    }
    
    .latest-content-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 1024px) {
    .newsletter-split-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .newsletter-right {
        padding-left: 0;
        border-left: none;
        border-top: 2px solid rgba(92, 194, 207, 0.2);
        padding-top: 40px;
    }
}

@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .latest-content-grid {
        gap: 30px;
    }
    
    .content-card-content {
        padding: 24px;
    }
}

/* ========== MOBILE STYLES (768px and below) ========== */
@media (max-width: 768px) {
    :root {
        --container-padding: 20px;
    }
    
    .header-cta {
        display: none;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    h1 { font-size: 40px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    
    .hero-section {
        min-height: 450px;
        padding: var(--spacing-xl) 0;
    }
    
    .hero-text {
        max-width: 100%;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .who-we-are-section {
        padding: var(--spacing-xl) 0;
    }
    
    .who-we-are-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .who-we-are-content .section-title {
        font-size: 28px;
    }
    
    .who-we-are-content .section-description {
        font-size: 16px;
    }
    
    .latest-content-section {
        padding: var(--spacing-xl) 0;
    }
    
    .content-card-label-wrapper {
        margin-bottom: 16px;
    }
    
    .content-card-image img {
        height: 220px;
    }
    
    .content-card-content {
        padding: 20px;
    }
    
    .content-card-content .content-card-title {
        font-size: 20px;
    }
    
    .content-card-content .content-card-excerpt {
        font-size: 16px;
    }
    
    .services-section {
        padding: var(--spacing-xl) 0;
    }
    
    .services-header {
        margin-bottom: 40px;
    }
    
    .services-header .section-title {
        font-size: 28px;
    }
    
    .services-header .section-description {
        font-size: 16px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .service-card-inner {
        min-height: 220px;
    }
    
    .services-carousel-section {
        padding: var(--spacing-xl) 0;
    }
    
    .services-carousel-header {
        margin-bottom: 40px;
    }
    
    .services-carousel-header .section-title {
        font-size: 28px;
    }
    
    .carousel-track {
        grid-template-columns: 1fr;
    }
    
    .carousel-card-inner {
        padding: 26px 20px;
        min-height: 430px;
    }
    
    .newsletter-split-section {
        padding: var(--spacing-xl) 0 var(--spacing-xl) 0;
    }
    
    .newsletter-left h2 {
        font-size: 28px !important;
    }
    
    .newsletter-left p {
        font-size: 16px !important;
    }
    
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
    
    .back-to-top svg {
        width: 20px;
        height: 20px;
    }
    
    /* Mobile Menu Styles - INSIDE mobile media query */
    .mobile-menu-toggle {
        display: flex !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .main-navigation {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        background: white;
        z-index: 9998;
        padding: 80px 20px 20px;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .main-navigation.mobile-active {
        display: block !important;
        transform: translateX(0) !important;
    }
    
    .main-navigation > ul,
    .main-navigation > .nav-menu {
        display: block !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .main-navigation > ul > li,
    .main-navigation > .nav-menu > li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #eee !important;
    }
    
    .main-navigation > ul > li > a,
    .main-navigation > .nav-menu > li > a {
        display: block !important;
        padding: 15px 0 !important;
        color: #2B4150 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        position: relative !important;
    }
    
    .main-navigation li.menu-item-has-children > a::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #2B4150;
        border-bottom: 2px solid #2B4150;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.3s ease;
    }
    
    .main-navigation li.menu-item-has-children.open > a::after {
        transform: translateY(-50%) rotate(-135deg);
    }
    
    /* Nested dropdown arrows (sub-menu items with children) */
    .main-navigation .sub-menu li.menu-item-has-children > a {
        position: relative;
        padding-right: 25px !important;
    }
    
    .main-navigation .sub-menu li.menu-item-has-children > a::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #666;
        border-bottom: 2px solid #666;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.3s ease;
    }
    
    .main-navigation .sub-menu li.menu-item-has-children.open > a::after {
        transform: translateY(-50%) rotate(-135deg);
    }
    
    .main-navigation .sub-menu {
        display: none !important;
        list-style: none !important;
        padding: 0 0 0 20px !important;
        margin: 0 !important;
    }
    
    .main-navigation li.menu-item-has-children.open > .sub-menu {
        display: block !important;
    }
    
    .main-navigation .sub-menu li {
        border-bottom: 1px solid #f5f5f5 !important;
    }
    
    .main-navigation .sub-menu li a {
        display: block !important;
        padding: 12px 0 !important;
        color: #666 !important;
        font-size: 14px !important;
        pointer-events: auto !important;
    }
    
    body.mobile-menu-open {
        overflow: hidden;
    }
} /* Close mobile media query */

/* ========== DESKTOP NAVIGATION ========== */
@media (min-width: 769px) {
    .main-navigation {
        display: flex !important;
        justify-content: flex-end !important;
        margin-right: 20px !important;
    }

    .main-navigation ul,
    .main-navigation .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 60px !important;
    }

    .main-navigation ul > li,
    .main-navigation .nav-menu > li {
        position: relative !important;
        margin: 0 !important;
        display: inline-block !important;
    }

    .main-navigation ul > li > a,
    .main-navigation .nav-menu > li > a {
        font-family: 'Inter', sans-serif !important;
        font-weight: 500 !important;
        font-size: 15px !important;
        color: #2B4150 !important;
        padding: 14px 0 !important;
        display: block !important;
    }

    .main-navigation ul > li > a:hover,
    .main-navigation .nav-menu > li > a:hover {
        color: #1D95D1 !important;
    }

    /* Contact Us Button */
    .main-navigation > ul > li:last-child > a,
    .main-navigation > .nav-menu > li:last-child > a {
        background: #2B4150 !important;
        color: #FFFFFF !important;
        padding: 14px 28px !important;
        border-radius: 4px !important;
        font-weight: 700 !important;
    }

    .main-navigation > ul > li:last-child > a:hover,
    .main-navigation > .nav-menu > li:last-child > a:hover {
        background: #FFFFFF !important;
        color: #2B4150 !important;
        border: 2px solid #2B4150 !important;
    }

    /* Dropdown Arrows */
    .main-navigation > ul > li.menu-item-has-children > a::after,
    .main-navigation > .nav-menu > li.menu-item-has-children > a::after {
        content: '' !important;
        display: inline-block !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #2B4150 !important;
        border-bottom: 2px solid #2B4150 !important;
        transform: rotate(45deg) !important;
        margin-left: 8px !important;
        margin-bottom: 2px !important;
    }
    
    .main-navigation > ul > li.menu-item-has-children > a:hover::after,
    .main-navigation > .nav-menu > li.menu-item-has-children > a:hover::after {
        border-right-color: #1D95D1 !important;
        border-bottom-color: #1D95D1 !important;
    }

    /* HIDE dropdowns */
    .main-navigation .sub-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background: white !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
        border-top: 3px solid #1D95D1 !important;
        padding: 20px !important;
        min-width: 220px !important;
        z-index: 9999 !important;
    }

    /* SHOW on hover */
    .main-navigation li:hover > .sub-menu {
        display: block !important;
    }

    /* Dropdown items */
    .main-navigation .sub-menu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-navigation .sub-menu li a {
        display: block !important;
        padding: 10px 15px !important;
        color: #2B4150 !important;
        font-size: 14px !important;
        background: transparent !important;
        border: none !important;
        font-weight: 500 !important;
    }

    .main-navigation .sub-menu li a:hover {
        background: #E6E7E8 !important;
        color: #1D95D1 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Fix button active/tap states on mobile */
.btn-primary:active,
.btn-content-read-more:active,
.btn-carousel-learn-more:active,
input[type="submit"]:active,
button[type="submit"]:active,
.newsletter-right input[type="submit"]:active,
.header-cta .btn-primary:active,
a.btn-primary:active,
.button:active,
.wp-block-button__link:active,
#mega-menu-primary li#mega-menu-item-2011 > a:active,
#mega-menu-primary li.mega-nav-button > a:active,
.btn-hero-primary:active,
.hero-cta .btn-primary:active {
    background: #FFFFFF !important;
    color: #2B4150 !important;
    border-color: #2B4150 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Remove tap highlight color on mobile */
.btn-primary,
.btn-content-read-more,
.btn-carousel-learn-more,
input[type="submit"],
button[type="submit"],
a.btn-primary,
.button,
.wp-block-button__link {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
}

@media (max-width: 768px) {
    :root {
        --container-padding: 20px;
    }
}  /* <-- Close the first media query */

/* ==========================================
   404 PAGE NOT FOUND STYLES
   ========================================== */

.page-not-found-wrapper {
    background: radial-gradient(ellipse at 20% 30%, #2B4150 0%, #2B4150 25%, #207C7E 55%, #1D95D1 100%);
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* SVG Pattern Background - LARGER SIZE */
.page-not-found-wrapper::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 35%;
    right: -15%;
    bottom: -10%;
    background-image: url('https://arrowheadprstg.wpengine.com/wp-content/uploads/2026/01/subelement.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 900px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
}

.page-not-found-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* 404 Number Display */
.error-number {
    font-family: 'Urbanist', sans-serif;
    font-size: 180px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: 20px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    letter-spacing: -5px;
}

/* Error Title */
.error-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 52px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 24px;
}

/* Error Description */
.error-description {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: #F5F5F5;
    margin-bottom: 40px;
    opacity: 0.95;
}

/* Action Buttons Container */
.error-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* Primary Button - Home */
.btn-404-home {
    display: inline-block;
    background: #2B4150;
    color: #FFFFFF !important;
    padding: 16px 40px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.btn-404-home:hover {
    background: #FFFFFF;
    color: #2B4150 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(255, 255, 255, 0.3);
}

/* Secondary Button - Contact */
.btn-404-contact {
    display: inline-block;
    background: transparent;
    color: #FFFFFF !important;
    padding: 16px 40px;
    border: 2px solid #FFFFFF;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-404-contact:hover {
    background: #FFFFFF;
    color: #2B4150 !important;
    transform: translateY(-2px);
}

/* Helpful Links Section */
.error-links {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.error-links-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
}

.error-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-links-list li a {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #F5F5F5;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.error-links-list li a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #6EB510;
    transition: width 0.3s ease;
}

.error-links-list li a:hover {
    color: #6EB510;
}

.error-links-list li a:hover::after {
    width: 100%;
}

/* ========== TABLET BREAKPOINT ========== */
@media (max-width: 1024px) {
    .error-number {
        font-size: 140px;
    }
    
    .error-title {
        font-size: 42px;
    }
}

/* ========== 404 MOBILE BREAKPOINT ========== */
@media (max-width: 768px) {
    .page-not-found-wrapper {
        min-height: calc(100vh - 80px);
        padding: 60px 0;
    }
    
    .page-not-found-wrapper::before {
        display: none;
    }
    
    .page-not-found-content {
        padding: 0 20px;
    }
    
    .error-number {
        font-size: 100px;
        letter-spacing: -3px;
        margin-bottom: 16px;
    }
    
    .error-title {
        font-size: 32px;
        margin-bottom: 20px;
    }
    
    .error-description {
        font-size: 16px;
        margin-bottom: 32px;
    }
    
    .error-actions {
        flex-direction: column;
        gap: 16px;
    }
    
    .btn-404-home,
    .btn-404-contact {
        width: 100%;
        text-align: center;
    }
    
    .error-links {
        margin-top: 50px;
        padding-top: 30px;
    }
    
    .error-links-list {
        flex-direction: column;
        gap: 16px;
    }
}

/* ========== 404 SMALL MOBILE ========== */
@media (max-width: 480px) {
    .error-number {
        font-size: 80px;
        letter-spacing: -2px;
    }
    
    .error-title {
        font-size: 28px;
    }
    
    .error-description {
        font-size: 15px;
    }
    
    .btn-404-home,
    .btn-404-contact {
        padding: 14px 32px;
        font-size: 15px;
    }
}

/* ==========================================
   SIMPLE TEXT PAGE STYLES
   (Privacy Policy, Cookie Policy, Terms, etc.)
   ========================================== */

.simple-text-page {
    background: #FFFFFF;
    padding: 80px 0 100px;
}

.simple-text-page .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Page Header */
.simple-text-page-header {
    text-align: center;
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 3px solid #5CC2CF;
}

.simple-text-page-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #6EB510;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    display: inline-block;
}

.simple-text-page-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: #2B4150;
    line-height: 1.2;
    margin-bottom: 16px;
}

.simple-text-page-date {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #666;
    font-style: italic;
}

/* Page Content */
.simple-text-page-content {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #2B4150;
}

.simple-text-page-content h2 {
    font-family: 'Urbanist', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #2B4150;
    margin-top: 50px;
    margin-bottom: 24px;
    line-height: 1.3;
}

.simple-text-page-content h3 {
    font-family: 'Urbanist', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2B4150;
    margin-top: 40px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.simple-text-page-content h4 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #2B4150;
    margin-top: 30px;
    margin-bottom: 16px;
}

.simple-text-page-content p {
    margin-bottom: 20px;
}

.simple-text-page-content ul,
.simple-text-page-content ol {
    margin: 20px 0 20px 40px;
    padding: 0;
}

.simple-text-page-content li {
    margin-bottom: 12px;
    line-height: 1.8;
}

.simple-text-page-content strong {
    font-weight: 700;
    color: #2B4150;
}

.simple-text-page-content a {
    color: #1D95D1;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.3s ease;
}

.simple-text-page-content a:hover {
    color: #6EB510;
}

.simple-text-page-content em {
    font-style: italic;
}

/* Table of Contents (optional) */
.simple-text-page-toc {
    background: #F5F5F5;
    border-left: 4px solid #5CC2CF;
    padding: 30px;
    margin-bottom: 50px;
    border-radius: 4px;
}

.simple-text-page-toc h3 {
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #2B4150;
    margin-top: 0;
    margin-bottom: 20px;
}

.simple-text-page-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.simple-text-page-toc li {
    margin-bottom: 12px;
}

.simple-text-page-toc a {
    color: #2B4150;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.simple-text-page-toc a:hover {
    color: #1D95D1;
}

/* Contact CTA at bottom (optional) */
.simple-text-page-cta {
    background: #F5F5F5;
    padding: 40px;
    margin-top: 60px;
    border-radius: 8px;
    text-align: center;
}

.simple-text-page-cta h3 {
    font-family: 'Urbanist', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: #2B4150;
    margin-bottom: 16px;
}

.simple-text-page-cta p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #2B4150;
    margin-bottom: 24px;
}

.simple-text-page-cta .btn-primary {
    display: inline-block;
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
    .simple-text-page {
        padding: 60px 0 80px;
    }
    
    .simple-text-page .container {
        padding: 0 20px;
    }
    
    .simple-text-page-header {
        margin-bottom: 40px;
        padding-bottom: 30px;
    }
    
    .simple-text-page-title {
        font-size: 32px;
    }
    
    .simple-text-page-content h2 {
        font-size: 26px;
        margin-top: 40px;
    }
    
    .simple-text-page-content h3 {
        font-size: 22px;
        margin-top: 30px;
    }
    
    .simple-text-page-content ul,
    .simple-text-page-content ol {
        margin-left: 25px;
    }
    
    .simple-text-page-toc {
        padding: 20px;
        margin-bottom: 40px;
    }
    
    .simple-text-page-cta {
        padding: 30px 20px;
        margin-top: 50px;
    }
    
    .simple-text-page-cta h3 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .simple-text-page-title {
        font-size: 28px;
    }
    
    .simple-text-page-content h2 {
        font-size: 24px;
    }
    
    .simple-text-page-content h3 {
        font-size: 20px;
    }
}

/* ========== GLOBAL MOBILE PADDING - FINAL OVERRIDE ========== */
@media (max-width: 768px) {
    /* Apply consistent 20px left/right padding to ALL page containers */
    .container,
    .hero-section .container,
    .hero-section > .container,
    .knowledge-hub-collection-hero .container,
    .knowledge-hub-filter-bar .container,
    .knowledge-hub-collection-grid-section .container,
    .knowledge-hub-collection-cta .container,
    .rebate-hero .container,
    .rebate-content .container,
    .privacy-policy-page .container,
    .who-we-are-section .container,
    .latest-content-section .container,
    .services-section .container,
    .services-carousel-section .container,
    .newsletter-split-section .container,
    .newsletter-split-layout,
    .site-footer .container,
    .header-inner,
    .collection-hero-wrapper,
    .about-text-image-section .container,
    .about-ceo-section .container,
    .about-values-section .container,
    .about-gallery-section .container,
    .about-careers-section .container,
    .about-news-section .container,
    .about-social-section .container,
	.case-studies-archive-hero .container,
    .case-studies-filter-bar .container,
    .case-studies-grid-section .container,
    .case-studies-cta-section .container,
    .case-studies-archive-cta .container,
	.careers-hero-section .container,
.careers-text-image-section .container,
.careers-benefits-section .container,
.careers-award-section .container,
.careers-listings-section .container,
	.case-study-wrapper .container,
.case-study-wrapper .case-study-hero .container,
.case-study-hero .container,
	.collection-hero-wrapper,
.collection-cards-section .container,
.collection-cta-section .container,
.contact-hero .container,
.contact-split .container,
	.faq-page-wrapper .container,
.faq-hero .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
	
/* ==========================================
   DISABLE ALL ANIMATIONS ON MOBILE
   ========================================== */
@media (max-width: 768px) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
    
    /* Allow basic transitions for interactive elements */
    a,
    button,
    input,
    select,
    textarea {
        transition: opacity 0.2s ease, background-color 0.2s ease !important;
    }
}