/* ============================================
   Rev Dr Karla J Cooper Foundation
   Custom Overrides — v2 (logo-matched palette)
   Colors: Maroon #6B2A2A | Slate Blue #7A9BAE | Deep Maroon #3D1010
   Fonts:  Raleway (headings) | Lato (body)
   ============================================ */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&family=Lato:wght@300;400;700&display=swap');

/* ---- Global Font Override ---- */
body,
p,
li,
a,
span,
div,
label,
input,
textarea,
select {
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif !important;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.cam-style,
.hs-2, .hs-3, .hs-4, .hs-5,
.split,
.fw-600 {
    font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif !important;
    letter-spacing: 0.01em;
}

/* ---- Seal Logo Image ---- */
#logo a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img-seal {
    height: 58px;
    width: auto;
    border-radius: 50%;
    display: block;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.35));
    transition: transform 0.3s ease;
}

.logo-img-seal:hover {
    transform: scale(1.05);
}

/* Keep text logo styles for footer usage */
.foundation-logo {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    max-width: 230px;
}

.foundation-logo .logo-line1 {
    font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    opacity: 0.8;
}

.foundation-logo .logo-line2 {
    font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Logo color on light / scrolled header */
.header-light .foundation-logo .logo-line1,
.header-light .foundation-logo .logo-line2,
header.smaller .foundation-logo .logo-line1,
header.smaller .foundation-logo .logo-line2 {
    color: #3D1010;
}

/* Logo color on transparent / dark header */
header.transparent .foundation-logo .logo-line1,
header.transparent .foundation-logo .logo-line2,
header.header-scroll .foundation-logo .logo-line1,
header.header-scroll .foundation-logo .logo-line2 {
    color: #ffffff;
}

/* Mobile hamburger — FA4 fails to load; use FA6 Free instead */
/* NOTE: keep display properties inside media query only — base rule must NOT set display
   because style.css sets #menu-btn { display: none } on desktop which !important would override */
#menu-btn:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    content: "\f0c9" !important; /* fa-bars */
    font-size: 20px !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

#menu-btn.menu-open:before {
    content: "\f00d" !important; /* fa-xmark */
}

/* Dark header (scrolled / light) */
header.smaller #menu-btn,
header.smaller #menu-btn:before,
header.header-light #menu-btn,
header.header-light #menu-btn:before,
header.header-mobile.header-light #menu-btn,
header.header-mobile.header-light #menu-btn:before {
    color: #3D1010 !important;
}

/* Mobile only — show hamburger as flex so icon centers */
@media (max-width: 992px) {
    #menu-btn {
        color: #ffffff !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }
}

/* ---- Topbar ---- */
#topbar {
    background-color: #3D1010;
}

#topbar a,
#topbar .topbar-widget a {
    color: rgba(255, 255, 255, 0.88) !important;
}

#topbar .social-icons a i {
    color: rgba(255, 255, 255, 0.75) !important;
}

#topbar .social-icons a:hover i {
    color: #7A9BAE !important;
}

/* ---- Buttons ---- */
.btn-main,
a.btn-main {
    background: #6B2A2A !important;
    border-color: #6B2A2A !important;
    color: #ffffff !important;
    font-family: 'Raleway', Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: 1px;
}

.btn-main:hover,
a.btn-main:hover {
    background: #3D1010 !important;
    border-color: #3D1010 !important;
}

.btn-line {
    border-color: #6B2A2A !important;
    color: #6B2A2A !important;
}

.btn-line:hover,
.btn-main.btn-line:hover {
    background: #6B2A2A !important;
    color: #ffffff !important;
}

.btn-main.btn-line.dark {
    border-color: #3D1010 !important;
    color: #3D1010 !important;
    background: transparent !important;
}

.btn-main.btn-line.dark:hover {
    background: #3D1010 !important;
    color: #ffffff !important;
}

/* ---- Section subtitles ---- */
.subtitle {
    color: #6B2A2A;
    letter-spacing: 3px;
    font-weight: 700;
    font-family: 'Raleway', Arial, sans-serif !important;
    text-transform: uppercase;
    font-size: 12px;
}

.subtitle.s2 {
    color: #7A9BAE;
}

/* ---- Dark blocks ---- */
.bg-dark-1 {
    background-color: #3D1010 !important;
}

/* ---- Light tinted bg sections ---- */
section[data-bgcolor="#EAF5F9"],
.bg-color-op-1 {
    background-color: #F5EFE6 !important;
}

/* ---- Stats counter ---- */
.de_count h3,
.de_count .hs-2 {
    color: #6B2A2A;
}

/* ---- Footer ---- */
footer {
    background-color: #3D1010 !important;
}

footer p,
footer .widget ul li a,
footer .widget a,
footer address {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Lato', Arial, sans-serif !important;
}

footer .widget ul li a:hover {
    color: #7A9BAE !important;
}

footer h2.hs-5 {
    color: #ffffff;
    font-family: 'Raleway', Arial, sans-serif !important;
}

footer .subfooter {
    background-color: #1E0808 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer .subfooter,
footer .subfooter a {
    color: rgba(255, 255, 255, 0.5);
}

/* ---- Accordion (FAQ) ---- */
.accordion-section-title.active,
.accordion.secondary .accordion-section-title.active {
    background: #6B2A2A !important;
    color: #ffffff !important;
}

/* ---- Back to top ---- */
#back-to-top {
    background: #7A9BAE !important;
}

/* ---- Breadcrumb active ---- */
.crumb li.active,
.crumb li.active a {
    color: #7A9BAE !important;
}

/* ---- Tab navigation ---- */
.d-tab-nav li.active-tab {
    border-bottom-color: #6B2A2A !important;
    color: #6B2A2A !important;
}

/* ---- Timeline icons ---- */
.de-timeline-s2 .d-icon {
    background: #6B2A2A !important;
    color: #ffffff !important;
}

/* ---- Step icons ---- */
.step-icon i {
    color: #6B2A2A !important;
}

/* ---- Contact info blocks ---- */
.bg-color.text-light {
    background: #6B2A2A !important;
}

/* ---- Impact / overlay ---- */
.abs.bg-color {
    background: rgba(107, 42, 42, 0.92) !important;
}

/* ---- Swiper / Owl carousel dots ---- */
.swiper-pagination-bullet-active {
    background: #7A9BAE !important;
}

.owl-dot.active {
    background: #7A9BAE !important;
}

/* ---- Gold/secondary accent icons ---- */
.id-color-2,
.icofont-location-pin.id-color-2,
.icofont-envelope.id-color-2 {
    color: #7A9BAE !important;
}

/* ---- id-color (primary) ---- */
.id-color {
    color: #6B2A2A !important;
}

/* ---- HIDE all decorative leaf / flower shapes ---- */
img[src*="d2.webp"],
img[src*="d3.webp"],
img[src*="misc/d"],
.de-gradient-edge-top + img[src*="misc"],
img[class*="abs"][src*="d2"],
img[class*="abs"][src*="d3"] {
    display: none !important;
}

/* ---- Blog date badge ---- */
.date-box,
.style-2 .date-box,
.abs.z-2.bg-dark-1.rounded-2 {
    background: #6B2A2A !important;
    color: #ffffff !important;
}

/* ---- Blog date box override (index-3 style) ---- */
.abs.z-2.bg-dark-1.rounded-2 {
    background: #6B2A2A !important;
}

/* ---- Text links ---- */
a.btn-text {
    color: #6B2A2A !important;
}

a.btn-text:after {
    color: #6B2A2A !important;
    background: #6B2A2A !important;
}

/* ---- Nav hover ---- */
#mainmenu li li a.menu-item:hover,
#mainmenu ul li:hover > a.menu-item {
    color: #7A9BAE !important;
    background: transparent !important;
}

/* Active nav item: only darken on scrolled/light header; stay white on transparent hero header */
header.smaller #mainmenu a.menu-item.active,
header.header-light #mainmenu a.menu-item.active {
    color: #6B2A2A !important;
}

/* ---- Carousel nav arrows ---- */
.swiper-button-next,
.swiper-button-prev,
.d-next,
.d-prev {
    background: #6B2A2A !important;
    color: #ffffff !important;
}

/* ---- Form ---- */
.form-control:focus {
    border-color: #6B2A2A !important;
    box-shadow: 0 0 0 3px rgba(107, 42, 42, 0.15) !important;
}

input[type="submit"].btn-main,
input[type="submit"] {
    background: #6B2A2A !important;
    border-color: #6B2A2A !important;
    color: #ffffff !important;
    cursor: pointer;
    font-family: 'Raleway', Arial, sans-serif !important;
    font-weight: 700;
}

input[type="submit"]:hover {
    background: #3D1010 !important;
}

/* ---- Preloader ---- */
#de-loader,
#preloader {
    background: linear-gradient(to bottom right, #3D1010, #6B2A2A) !important;
}

/* ---- Contact strip bar (index-3) ---- */
section.bg-color.text-light,
section.bg-color {
    background: #6B2A2A !important;
}

/* ---- Dropcap initial letter ---- */
p.dropcap span.id-color {
    color: #6B2A2A !important;
}

/* ---- Progress / skill bars ---- */
.de-progress .progress-bar {
    background: #6B2A2A !important;
}

/* ---- Social icons general ---- */
.social-icons a i {
    transition: color 0.2s;
}

/* ================================================
   MOBILE RESPONSIVE FIXES
   ================================================ */

/* Tablet + mobile fixes */
@media (max-width: 991px) {

    /* Founder overlay image — hide to prevent heading overlap */
    .founder-img-overlay {
        display: none !important;
    }

    .founder-img-main {
        width: 100% !important;
        max-height: 320px;
        object-fit: cover;
        object-position: center top;
        margin-bottom: 24px !important;
    }

    /* Testimonials half-fluid: hide the stacked image col on mobile
       It has min-height:400px and creates a large blank dark block */
    .half-fluid .col-lg-6.position-lg-absolute {
        display: none !important;
    }

    .half-fluid .col-lg-5 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 20px !important;
    }

    /* Reduce the massive py-5 my-5 padding inside testimonial text wrapper on mobile */
    .half-fluid .py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .half-fluid .my-5 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Testimonial quote font size */
    .half-fluid h3.fs-32 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
}

@media (max-width: 767px) {

    /* ---- Logo: tighten on mobile ---- */
    .foundation-logo {
        max-width: 180px;
    }

    .foundation-logo .logo-line1 {
        font-size: 6.5px !important;
        letter-spacing: 1.8px !important;
    }

    .foundation-logo .logo-line2 {
        font-size: 13px !important;
    }

    /* ---- Hero slider: shrink h1, stack buttons ---- */
    .sw-caption h1,
    .mh-800 h1 {
        font-size: 24px !important;
        line-height: 1.25 !important;
        margin-bottom: 16px !important;
    }

    .sw-caption .subtitle {
        font-size: 9px !important;
        letter-spacing: 2px !important;
    }

    /* Stack the two hero CTA buttons vertically */
    .sw-caption .wow.anim-order-2 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .sw-caption .btn-main.ms-3 {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    /* ---- Section heading sizes ---- */
    h2, h2.split, h2.mb-0, h2.mb-3,
    .cam-style {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 18px !important;
    }

    /* ---- Subheader page hero ---- */
    #subheader h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    /* ---- Feature 3-col grid: stack text panels ---- */
    .container-fluid .row.g-0 .col-md-4 .p-40 {
        padding: 28px 20px !important;
    }

    /* ---- About text section: remove dropcap large letter ---- */
    p.dropcap span.id-color {
        font-size: inherit !important;
        float: none !important;
    }

    /* ---- Testimonial dark half-fluid section ---- */
    .half-fluid .triangle-bottomright-dark {
        display: none !important;
    }

    /* ---- Contact bar strip ---- */
    .slider-extra.sm-hide {
        display: block !important;
    }

    .slider-extra .col-lg-4 {
        margin-bottom: 16px;
    }

    /* ---- FAQ accordion ---- */
    .accordion-section-title {
        font-size: 14px !important;
        padding: 14px 16px !important;
    }

    /* ---- Blog news date badge: smaller ---- */
    .abs.z-2.rounded-2 {
        padding: 8px 10px !important;
    }

    .abs.z-2.rounded-2 .fs-36 {
        font-size: 24px !important;
    }

    /* ---- Footer logo ---- */
    footer .foundation-logo .logo-line2 {
        font-size: 16px !important;
    }

    /* ---- Swiper nav arrows: tuck inward ---- */
    .swiper-button-prev,
    .d-prev {
        left: 4px !important;
    }

    .swiper-button-next,
    .d-next {
        right: 4px !important;
    }
}

/* ================================================
   WOW.JS FIX — make carousel items always visible
   WOW.js sets visibility:hidden then animates in.
   Inside Owl Carousel the scroll trigger never fires
   reliably, leaving items invisible. Force visible.
   ================================================ */
.owl-carousel .wow,
.owl-carousel .wow.animated {
    visibility: visible !important;
    animation-name: none !important;
}

/* Also ensure the owl-single-dots testimonial carousel shows */
.owl-single-dots .wow,
.owl-single-dots .item {
    visibility: visible !important;
}

/* ---- Impact stories carousel: show full portrait images ---- */
#sc-carousel .item .hover img {
    object-fit: contain !important;
    object-position: center !important;
    height: auto !important;
    max-height: 480px;
    background: #1a1a1a;
}

/* ---- Feature grid icons: apply foundation tint ---- */
.bg-dark-1 .w-70px,
.bg-color-op-2 .w-70px,
section .col-md-4 .p-40 .w-70px {
    opacity: 0.75;
    filter: sepia(1) hue-rotate(310deg) saturate(2);
}