/* KEPUS Health & Safety Consulting - Premium Color Scheme */

/* ========================================
   1. ROOT VARIABLES
   ======================================== */
:root {
    /* Brand Colors */
    --kepus-blue: #1E7FB7;
    --kepus-dark-blue: #0D4A6B;
    --kepus-darker-blue: #06314a;
    --kepus-light-blue: #4EB4E6;
    --kepus-navy: #0A2540;
    --kepus-grey: #f4f6f9;

    /* Functional Colors */
    --text-primary: #1f2a3d;
    --text-secondary: #58677c;
    --text-white: #ffffff;
    --text-white-dim: rgba(255, 255, 255, 0.9);
}

/* ========================================
   2. GLOBAL TYPOGRAPHY & OVERRIDES
   ======================================== */

/* Premium Fonts */
body {
    font-family: 'Inter', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.widget-title,
.featured-title {
    font-family: 'Outfit', sans-serif !important;
}

/* Force blue accents on headings ONLY when on light backgrounds */
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
    color: var(--kepus-blue) !important;
}

/* Base "Skin Color" Text - Use Kepus Blue */
.ttm-textcolor-skincolor,
.ttm-textcolor-skincolor a,
.skin-color {
    color: var(--kepus-blue) !important;
}

/* Hover effects */
a:hover,
.ttm-textcolor-skincolor a:hover {
    color: var(--kepus-dark-blue) !important;
}

/* ========================================
   3. BACKGROUNDS & GRADIENTS (PREMIUM)
   ======================================== */

/* Primary Brand Background */
/* Primary Brand Background */
.ttm-bgcolor-skincolor,
.ttm-col-bgcolor-yes.ttm-bgcolor-skincolor .ttm-col-wrapper-bg-layer,
.ttm-bg-layer.ttm-bgcolor-skincolor,
.ttm-col-bgcolor-yes.ttm-bgcolor-skincolor,
.ttm-icon_element-background-color-skincolor,
.ttm-btn-color-skincolor {
    background-color: var(--kepus-blue) !important;
    background: linear-gradient(135deg, var(--kepus-blue) 0%, var(--kepus-dark-blue) 100%) !important;
    border-color: transparent !important;
    color: var(--text-white) !important;
}

/* Darker Navy Backgrounds (Top bar, Footer) */
.ttm-bgcolor-darkgrey,
.ttm-topbar-wrapper,
.footer {
    background-color: var(--kepus-navy) !important;
}

/* Light Grey Backgrounds */
.ttm-bgcolor-grey {
    background-color: var(--kepus-grey) !important;
}

/* ========================================
   4. CONTEXT-AWARE VISIBILITY (Blue on Blue Fixes)
   ======================================== */

/* Text INSIDE Blue Background Sections */
.ttm-bgcolor-skincolor h1,
.ttm-bgcolor-skincolor h2,
.ttm-bgcolor-skincolor h3,
.ttm-bgcolor-skincolor h4,
.ttm-bgcolor-skincolor h5,
.ttm-bgcolor-skincolor h6,
.ttm-bgcolor-skincolor p,
.ttm-bgcolor-skincolor .section-title .title-header h2,
.ttm-bgcolor-skincolor .section-title .title-desc,
.ttm-bgcolor-skincolor .featured-title h5,
.ttm-bgcolor-skincolor .featured-desc p {
    color: var(--text-white) !important;
}

/* Ensure 'bold' text inside blue sections is white, not blue */
.ttm-bgcolor-skincolor strong,
.ttm-bgcolor-skincolor b {
    color: var(--text-white) !important;
}

/* Sub-headings inside blue sections */
.ttm-bgcolor-skincolor .section-title .title-header h5 {
    color: var(--kepus-light-blue) !important;
    font-weight: 600;
}

/* Icons inside Blue Sections */
.ttm-bgcolor-skincolor .ttm-icon_element-color-skincolor i,
.ttm-bgcolor-skincolor .ttm-icon i {
    color: var(--text-white) !important;
}

.ttm-bgcolor-skincolor .ttm-icon_element-border {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Separators inside Blue Sections */
.ttm-bgcolor-skincolor .sep-line {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* ========================================
   5. BUTTONS & UI ELEMENTS
   ======================================== */

/* Filled Buttons */
.ttm-btn-color-skincolor,
input[type="submit"].ttm-btn-color-skincolor {
    background: var(--kepus-blue) !important;
    /* Fallback */
    background: linear-gradient(to right, var(--kepus-blue), #298dc7) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(30, 127, 183, 0.3);
    border: none !important;
    transition: all 0.3s ease;
}

.ttm-btn-color-skincolor:hover,
input[type="submit"].ttm-btn-color-skincolor:hover {
    background: var(--kepus-dark-blue) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 74, 107, 0.4);
}

/* Border Only Buttons */
.ttm-btn-style-border.ttm-btn-color-skincolor {
    background: transparent !important;
    border: 2px solid var(--kepus-blue) !important;
    color: var(--kepus-blue) !important;
    box-shadow: none !important;
}

.ttm-btn-style-border.ttm-btn-color-skincolor:hover {
    background: var(--kepus-blue) !important;
    color: #fff !important;
}

/* Buttons inside Blue Sections */
.ttm-bgcolor-skincolor .ttm-btn-style-border {
    border-color: var(--text-white) !important;
    color: var(--text-white) !important;
}

.ttm-bgcolor-skincolor .ttm-btn-style-border:hover {
    background-color: var(--text-white) !important;
    color: var(--kepus-blue) !important;
}

/* ========================================
   6. PREMIUM CARDS & SHADOWS
   ======================================== */

/* Feature Boxes (Cards) */
.featured-icon-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-icon-box:hover {
    transform: translateY(-5px);
}

.box-shadow2,
.col-bg-img-one {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Icon colors in standard white cards */
.ttm-bgcolor-white .ttm-icon_element-color-skincolor i {
    color: var(--kepus-blue) !important;
}

/* Fill icons (square backgrounds) */
.ttm-icon_element-fill.ttm-icon_element-background-color-skincolor {
    background: linear-gradient(135deg, var(--kepus-blue), var(--kepus-dark-blue)) !important;
    box-shadow: 0 5px 15px rgba(30, 127, 183, 0.3);
}

/* ========================================
   7. FOOTER & WIDGETS
   ======================================== */

/* Footer Titles */
.footer .widget-title {
    color: var(--kepus-light-blue) !important;
    border-bottom-color: var(--kepus-blue) !important;
}

.footer .ttm-textcolor-skincolor {
    color: var(--kepus-light-blue) !important;
}

/* Footer Links */
.footer a:hover {
    color: var(--kepus-light-blue) !important;
}

/* Newsletter */
.newsletter-form input[type="email"] {
    background: #fff !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

.newsletter-form input[type="submit"] {
    background: var(--kepus-blue) !important;
}

/* COPYRIGHT */
.bottom-footer-text {
    background-color: #062135 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ========================================
   8. SPECIFIC SECTION FIXES
   ======================================== */

/* Header - Request Quote Button */
.header-btn a {
    background: var(--kepus-blue) !important;
    color: #fff !important;
}

/* Header - Top Bar Highlight */
.ttm-header-style-classic .ttm-topbar-content .top-contact.ttm-highlight-left,
.ttm-highlight-left,
.ttm-header-style-classic .ttm-topbar-content .top-contact.ttm-highlight-left::after,
.ttm-highlight-left::after,
.ttm-header-style-classic .ttm-topbar-content .top-contact.ttm-highlight-left::before,
.ttm-highlight-left::before {
    background-color: var(--kepus-blue) !important;
    background: linear-gradient(135deg, var(--kepus-blue), var(--kepus-dark-blue)) !important;
    border-color: transparent !important;
}

.top-contact strong,
.top-contact i {
    color: #fff !important;
}

/* Header - Menu Active State */
.menu ul li.active>a,
.menu ul li:hover>a,
nav .menu li.active a,
nav .menu li:hover a {
    color: var(--kepus-blue) !important;
}

/* Header - Cart Badge */
.ttm-header-icons .number-cart {
    background-color: var(--kepus-light-blue) !important;
    color: #fff !important;
}

/* Hero Section */
.hero-section strong {
    color: var(--kepus-light-blue) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* About Section Highlight */
.about-section .section-title h5 {
    color: var(--kepus-blue) !important;
}

/* Testimonials */
.testimonial-caption h6 {
    color: var(--kepus-blue) !important;
}

/* Progress Bar */
.ttm-progress-bar .progress-bar {
    background-color: var(--kepus-blue) !important;
}