/* ============================================================
   HARBOR DARK THEME
   Accent: #018BFF  |  Background: #0c0c0c  |  Text: #d8d8d8
   ============================================================ */

/* --- Base -------------------------------------------------- */
body {
    background-color: #0c0c0c;
    color: #d8d8d8;
}


a { color: #d8d8d8; }
a:hover { color: var(--base-color); }

h1, h2, h3, h4, h5, h6 { color: #ffffff; }

::selection        { color: #ffffff; background: var(--base-color); }
::-moz-selection   { color: #ffffff; background: var(--base-color); }

/* --- Light surface → dark ---------------------------------- */
.bg-white,
.background-white {
    background-color: #181818 !important;
}
.bg-light-gray  { background-color: #141414 !important; }
.bg-very-light-gray     { background-color: #111111 !important; }
.bg-medium-light-gray   { background-color: #181818 !important; }
.bg-extra-light-gray    { background-color: #1e1e1e !important; }
.bg-medium-gray         { background-color: #252525 !important; }

/* bg-extra-dark-gray stays at #1c1c1c — provides contrast against #0c0c0c body */

/* --- Text -------------------------------------------------- */
.text-extra-dark-gray,
.btn.text-extra-dark-gray   { color: #f0f0f0 !important; }
.text-dark-gray,
.btn.text-dark-gray         { color: #c0c0c0 !important; }
.text-extra-medium-gray     { color: #aaaaaa !important; }
.text-medium-gray,
.btn.text-medium-gray       { color: #999999 !important; }
.text-extra-light-gray      { color: #888888 !important; }
.text-light-gray            { color: #777777 !important; }
.text-very-light-gray       { color: #666666 !important; }

/* Darker text on dark bg cards (panels, figcaptions) */
.bg-white p,
.bg-white span,
.bg-white li,
.bg-white div,
.bg-light-gray p,
.bg-light-gray span,
.bg-light-gray li {
    color: #d8d8d8;
}

/* --- Borders ----------------------------------------------- */
.border-color-medium-gray  { border-color: #2a2a2a !important; }
.border-color-light-gray   { border-color: #242424 !important; }
.border-color-extra-light-gray { border-color: #1e1e1e !important; }
.border-top                { border-top-color: #2a2a2a !important; }
.border-bottom             { border-bottom-color: #2a2a2a !important; }
.separator-line-horrizontal-full,
.separator-line-horrizontal-medium-light3 { background-color: #2a2a2a !important; }

/* feature-box-14 vertical dividers */
.feature-box-14 .col {
    border-right-color: #2a2a2a;
    border-bottom-color: #2a2a2a;
}

/* --- Forms ------------------------------------------------- */
input,
textarea,
select {
    background-color: #1a1a1a;
    border-color: #2e2e2e;
    color: #d8d8d8;
}
input:focus,
textarea:focus { border-color: var(--base-color) !important; }

::-webkit-input-placeholder { color: #666666; }
::-moz-placeholder          { color: #666666; }
:-ms-input-placeholder      { color: #666666; }
.select-style               { background-color: #1a1a1a; border-color: #2e2e2e; }

/* dark contact form inputs */
.border-color-medium-dark-gray { border-color: #2e2e2e !important; }
input.bg-transparent,
textarea.bg-transparent { background-color: rgba(255,255,255,0.04) !important; color: #d8d8d8; }

/* --- Navigation -------------------------------------------- */
nav.bootsnav,
nav.bootsnav.no-full { background-color: #0c0c0c; border-bottom: 1px solid #1a1a1a; }
nav.bootsnav ul.nav > li > a { color: #d8d8d8; }
nav.bootsnav ul.nav > li > a:hover { color: var(--base-color); }
nav.bootsnav .dropdown-menu { background-color: #141414; border-color: #2a2a2a; }
nav.bootsnav .dropdown-menu li a { color: #c0c0c0; }
nav.bootsnav .dropdown-menu li a:hover { color: var(--base-color); background: transparent; }
nav.bootsnav .dropdown-menu .dropdown-header { color: #666666; }
nav.bootsnav.white-header { background-color: #0c0c0c !important; }

/* --- Buttons ----------------------------------------------- */
.btn-transparent-dark-gray {
    border-color: #444 !important;
    color: #d8d8d8 !important;
}
.btn-transparent-dark-gray:hover {
    background-color: #444 !important;
    color: #ffffff !important;
}
.btn-dark-gray {
    background-color: #2a2a2a !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}
.btn-dark-gray:hover {
    background-color: var(--base-color) !important;
    border-color: var(--base-color) !important;
}
.btn-black { background-color: #000 !important; }

/* transparent-white stays for dark section CTAs */

/* --- Cards / boxes ----------------------------------------- */
.box-shadow-light {
    box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
}

/* coach cards and tool cards */
.bg-white.overflow-hidden,
.bg-white.h-100 { background-color: #181818 !important; }

/* --- Accordion (panel) ------------------------------------- */
/* .panel { border-color: #2a2a2a; } */
.panel-heading { background-color: transparent; border-bottom-color: #2a2a2a; }
.panel .panel-body { color: #b0b0b0; }

/* Dark accordion (bg-extra-dark-gray panels) keep their styles */
/* .bg-extra-dark-gray .panel { border-color: #2e2e2e; } */
.bg-extra-dark-gray input,
.bg-extra-dark-gray textarea,
.bg-extra-dark-gray select {
    background-color: rgba(255,255,255,0.04);
    border-color: #2e2e2e;
    color: #d8d8d8;
}

/* --- Portfolio / gallery ----------------------------------- */
.portfolio-img { background-color: #1a1a1a; }
.hover-option6 .portfolio-img { background-color: #1a1a1a; }
.hover-option6 figcaption.bg-white { background-color: #181818 !important; }
.hover-option6 figcaption.bg-white span { color: #f0f0f0; }
.hover-option6 figcaption.bg-white p { color: #999; }

/* --- Page title -------------------------------------------- */
.page-title-medium { background-color: #0c0c0c; }

/* --- Progress bars ----------------------------------------- */
.bg-gradient-light-red-light-white {
    background-image: linear-gradient(50deg, var(--base-color) 0%, #0056cc 100%);
}
.bg-transparent-black-very-light { background-color: rgba(255,255,255,0.06); }
.progress-title { color: #aaaaaa; }
.progress-bar-percent { color: #d8d8d8; }

/* --- Blog nav (prev/next) ---------------------------------- */
.blog-nav-link a { color: #d8d8d8; }
.blog-nav-link a:hover { color: var(--base-color); }
.blog-nav-link .blog-nav-home { color: #d8d8d8; }

/* --- List styles ------------------------------------------- */
.list-style-6 li { border-bottom-color: #2a2a2a; color: #d8d8d8; }
.list-style-6 li:first-child { color: var(--base-color); }
.list-style-3 li { border-bottom-color: #2a2a2a; color: #d8d8d8; }

/* --- Team cards -------------------------------------------- */
.team-member-position .text-small { color: #f0f0f0; }
.team-member-position .text-extra-small { color: var(--base-color); }

/* --- Focus tags / chips ------------------------------------ */
.bg-light-gray.text-extra-dark-gray.padding-10px-tb {
    background-color: #1f1f1f !important;
    color: #d8d8d8 !important;
}

/* --- Swiper pagination ------------------------------------- */
.swiper-pagination-bullet { background: #555; }
.swiper-pagination-bullet-active { background: var(--base-color); }

/* --- Scroll-to-top ----------------------------------------- */
.scroll-top-arrow { background-color: var(--base-color); border-color: var(--base-color); }

/* --- Section default page-bg ------------------------------- */
section:not([class*="bg-"]):not([class*="background-"]):not([class*="parallax"]):not(.p-0) {
    background-color: #0c0c0c;
}

/* --- filter nav tabs (portfolio) --------------------------- */
.portfolio-filter-tab-1 li a { color: #888888 !important; }
.portfolio-filter-tab-1 li.active a,
.portfolio-filter-tab-1 li a:hover { color: var(--base-color) !important; }
.portfolio-filter-tab-1 { border-color: #2a2a2a !important; }

/* --- Banner-style2 (coach photo strip) --------------------- */
.banner-style2 figcaption.bg-white { background-color: #181818 !important; }
.banner-style2 figcaption p { color: #999; }

/* --- Light-gray text in dark sections ---------------------- */
.text-outside-line { border-color: #d8d8d8; }

/* --- Social icons ------------------------------------------ */
.social-style-1 ul li a { color: #888888; }
.social-style-1 ul li a:hover { color: var(--base-color); }