/* ================================================================
   EverExpanse Design System v2
   Global design enhancements — load after custome.min.css
   Do not edit custome.css/custome.min.css directly; override here.
   ================================================================ */


/* ── 1. Design Tokens ─────────────────────────────────────────── */
:root {
    --ee-shadow-sm:    0 2px 8px  rgba(0, 0, 0, .06);
    --ee-shadow-md:    0 4px 20px rgba(0, 0, 0, .09);
    --ee-shadow-lg:    0 8px 32px rgba(5, 80, 159, .13);
    --ee-shadow-xl:    0 16px 48px rgba(5, 80, 159, .18);
    --ee-radius-sm:    8px;
    --ee-radius-md:    12px;
    --ee-radius-lg:    16px;
    --ee-transition:   .25s ease;
    --ee-gradient:     linear-gradient(135deg, var(--theme-color) 0%, var(--light-theme-color) 100%);
}


/* ── 2. Accessibility ─────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--theme-color);
    color: #fff;
    padding: 10px 20px;
    z-index: 9999;
    border-radius: 0 0 var(--ee-radius-sm) 0;
    font-size: 14px;
    font-family: var(--medium-font);
    text-decoration: none;
    transition: top .2s ease;
}
.skip-link:focus {
    top: 0;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* Branded focus rings — replaces the removed outline:none in custome.css */
:focus-visible {
    outline: 2px solid var(--theme-color) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}
/* Keep form control focus clean via its own style */
.form-control:focus {
    outline: none !important;
}


/* ── 3. Eyebrow / Section Labels ──────────────────────────────── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--theme-color);
    font-family: var(--medium-font);
    margin-bottom: 10px;
    line-height: 1;
}
.eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: var(--light-theme-color);
    flex-shrink: 0;
    border-radius: 2px;
}
.eyebrow.light           { color: var(--light-theme-color); }
.eyebrow.light::before   { background: rgba(255, 255, 255, .55); }
.eyebrow.center          { justify-content: center; }
.eyebrow.center::before  { display: none; }
.eyebrow.white           { color: #fff; }
.eyebrow.white::before   { background: rgba(255, 255, 255, .6); }


/* ── 4. Hero Sections ─────────────────────────────────────────── */
/* Inner hero: taller, richer gradient */
.hero-sec.inner-hero-sec {
    min-height: 380px;
}
.hero-sec.inner-hero-sec::before {
    background: linear-gradient(270deg,
        transparent 18%,
        rgba(0, 0, 0, .58) 50%,
        rgba(0, 0, 0, .88) 78%);
}

/* Hero eyebrow (white variant for use inside hero sections) */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--light-theme-color);
    font-family: var(--medium-font);
    margin-bottom: 14px;
    line-height: 1;
}
.hero-eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: var(--light-theme-color);
    flex-shrink: 0;
    border-radius: 2px;
}


/* ── 5. Cards & Boxes ─────────────────────────────────────────── */

/* White rounded box — lift on hover */
.white-rounded-box {
    border-radius: var(--ee-radius-md) !important;
    box-shadow: var(--ee-shadow-sm) !important;
    transition: background-color var(--ee-transition),
                color var(--ee-transition),
                box-shadow var(--ee-transition),
                transform var(--ee-transition) !important;
}
.white-rounded-box:hover {
    box-shadow: var(--ee-shadow-lg) !important;
    transform: translateY(-3px);
}
/* No-hover variant stays flat */
.no-hover-white-box:hover {
    transform: none !important;
    box-shadow: var(--ee-shadow-sm) !important;
}

/* Image card boxes */
.img-card-box {
    border-radius: var(--ee-radius-md) !important;
    box-shadow: var(--ee-shadow-sm);
    transition: box-shadow var(--ee-transition);
    overflow: hidden;
}
.img-card-box:hover { box-shadow: var(--ee-shadow-md); }

/* Blog cards */
.blog-card-box {
    border-radius: var(--ee-radius-md) !important;
    transition: box-shadow var(--ee-transition), transform var(--ee-transition) !important;
}
.blog-card-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .14) !important;
}

/* Job cards */
.job-box {
    border-radius: var(--ee-radius-md) !important;
    transition: box-shadow var(--ee-transition), transform var(--ee-transition);
}
.job-box:hover {
    box-shadow: 8px 8px 24px rgba(5, 80, 159, .14) !important;
    transform: translateY(-3px);
}

/* Shadow box (client band) */
.shodow-box-div {
    border-radius: var(--ee-radius-sm) !important;
}


/* ── 6. Buttons ───────────────────────────────────────────────── */
.theme-btn {
    letter-spacing: .02em;
    transition: background-color var(--ee-transition),
                color var(--ee-transition),
                box-shadow var(--ee-transition),
                transform var(--ee-transition) !important;
}
.theme-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(5, 80, 159, .28);
}
.white-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}


/* ── 7. Forms ─────────────────────────────────────────────────── */
.form-control {
    border-radius: var(--ee-radius-sm) !important;
    border: 1.5px solid #dce3ef !important;
    padding: 12px 16px !important;
    font-size: 15px;
    color: var(--black);
    transition: border-color var(--ee-transition), box-shadow var(--ee-transition) !important;
}
.form-control:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 3px rgba(5, 80, 159, .12) !important;
}
.form-control::placeholder { color: #aab2bf; }

.error-message {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 18px;
    color: #dc2626;
    min-height: 18px;
}

/* Submit button — loading state */
.btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ee-spin .7s linear infinite;
    flex-shrink: 0;
}
.is-loading .btn-text    { display: none; }
.is-loading .btn-spinner { display: inline-block; }
@keyframes ee-spin { to { transform: rotate(360deg); } }


/* ── 8. Accordion ─────────────────────────────────────────────── */
.accordion-item {
    border-radius: var(--ee-radius-sm) !important;
    transition: box-shadow var(--ee-transition);
}


/* ── 9. Service Icons ─────────────────────────────────────────── */
.service-icon-div {
    transition: background-color var(--ee-transition), transform var(--ee-transition);
}
.white-rounded-box:hover .service-icon-div.theme-bg { transform: scale(1.08); }


/* ── 10. Toast Notification ───────────────────────────────────── */
.ee-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    min-width: 280px;
    max-width: 380px;
    background: #fff;
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 14px;
    font-family: var(--medium-font);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transform: translateY(90px);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    pointer-events: none;
}
.ee-toast.show  { transform: translateY(0); opacity: 1; pointer-events: auto; }
.ee-toast.success { border-left: 4px solid #22c55e; }
.ee-toast.error   { border-left: 4px solid #ef4444; }
.ee-toast i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.ee-toast.success i { color: #16a34a; }
.ee-toast.error   i { color: #dc2626; }
.ee-toast span { line-height: 22px; color: #1f2937; }


/* ── 11. Footer ───────────────────────────────────────────────── */
.footer-line a:hover { color: var(--light-theme-color) !important; }


/* ================================================================
   Contact Page Components
   ================================================================ */

/* Hero override for contact page */
.contact-hero {
    width: 100%;
    min-height: 380px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    padding: 80px 0;
}
.contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg,
        transparent 15%,
        rgba(0, 0, 0, .65) 55%,
        rgba(0, 0, 0, .9) 85%);
}
.contact-hero .container { position: relative; z-index: 9; }

/* Grey background section */
.section-grey { background: #f5f7fb; }

/* Form card */
.form-card {
    background: #fff;
    border-radius: var(--ee-radius-lg) !important;
    padding: 40px;
    box-shadow: 0 4px 30px rgba(5, 80, 159, .08);
}
.form-card .form-control {
    border-radius: var(--ee-radius-sm) !important;
    border: 1.5px solid #dce3ef !important;
}
.form-card .form-control:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 3px rgba(5, 80, 159, .12) !important;
}
.form-card label {
    font-size: 13px;
    font-family: var(--medium-font);
    color: #374151;
    margin-bottom: 6px;
    display: block;
}

/* Info panel */
.info-panel-heading {
    font-size: 22px;
    font-family: var(--medium-font);
    color: var(--theme-dark-bg);
    margin-bottom: 6px;
}
.info-panel-sub {
    font-size: 14px;
    color: var(--light-color);
    margin-bottom: 28px;
    line-height: 22px;
}

/* Office cards */
.office-card {
    background: #fff;
    border-radius: var(--ee-radius-md) !important;
    padding: 22px 24px;
    box-shadow: var(--ee-shadow-sm);
    border-left: 4px solid var(--theme-color);
    margin-bottom: 16px;
    transition: box-shadow var(--ee-transition), border-color var(--ee-transition);
}
.office-card:hover {
    box-shadow: var(--ee-shadow-lg);
    border-color: var(--light-theme-color);
}
.office-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.office-card-top img { width: 28px; height: 28px; object-fit: contain; }
.office-card-top h3 {
    font-size: 15px;
    font-family: var(--medium-font);
    color: var(--theme-color);
    margin-bottom: 0;
}
.office-card p {
    font-size: 14px;
    line-height: 22px;
    color: #555;
    margin-bottom: 0;
}
.phone-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--theme-color);
    font-family: var(--medium-font);
    text-decoration: none;
}
.phone-link:hover { color: var(--light-theme-color); }

/* Support management cards */
.support-card {
    background: #f5f7fb;
    border-radius: var(--ee-radius-md) !important;
    padding: 32px 22px;
    height: 100%;
    text-align: center;
    border: 1.5px solid transparent;
    transition: all var(--ee-transition);
}
.support-card:hover {
    background: #fff;
    border-color: var(--light-theme-color);
    box-shadow: var(--ee-shadow-lg);
    transform: translateY(-4px);
}
.support-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ee-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    flex-shrink: 0;
}
.support-icon img { width: 28px; height: 28px; filter: brightness(0) invert(1); }
.support-card h3 {
    font-size: 16px;
    font-family: var(--medium-font);
    color: var(--theme-dark-bg);
    margin-bottom: 8px;
}
.support-card a {
    font-size: 14px;
    color: var(--theme-color);
    font-family: var(--medium-font);
    word-break: break-all;
    text-decoration: none;
}
.support-card a:hover { color: var(--light-theme-color); }

/* Submit button */
#submitBtn {
    min-width: 148px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}


/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .hero-sec.inner-hero-sec { min-height: 300px; }
    .contact-hero { min-height: 300px; padding: 60px 0; }
    .form-card { padding: 28px 22px; }
}
@media (max-width: 575px) {
    .ee-toast { bottom: 16px; right: 16px; left: 16px; min-width: unset; }
}