/* 
   Sports Brat - Custom Theme Override
   Palette: Sky Blue & White
*/

:root {
    --primary-color: #00AEEF;
    /* Sky Blue */
    --secondary-color: #FFFFFF;
    /* White */
    --text-color: #333333;
    --light-bg: #F0F8FF;
    /* Alice Blue - very light sky blue */
}

/* Original brand color was #012e7e. Overriding with Sky Blue */

body {
    background-color: var(--secondary-color);
    color: var(--text-color);
}

.bg-theme {
    background-color: var(--primary-color) !important;
}

.text-theme {
    color: var(--primary-color) !important;
}

.bg-light {
    background-color: var(--light-bg) !important;
}

/* Buttons */
.ch-btn-style-1,
.ch-btn-style-2,
.ch-btn-style-3,
.ch-btn-style-4 {
    background: var(--primary-color) !important;
    color: var(--secondary-color) !important;
    border: none;
}

.ch-btn-style-1::before,
.ch-btn-style-2::before,
.ch-btn-style-3::before,
.ch-btn-style-4::before {
    background: #008ecc !important;
    /* Slightly darker sky blue for hover effect */
}

/* Header & Navigation */
.cp-header-area-right .call-btn strong {
    color: var(--primary-color) !important;
}

.main-menu ul li.active a,
.main-menu ul li:hover>a {
    color: var(--primary-color) !important;
}

.cp-header-style-2 .main-menu ul .sub-menu {
    border-top: 3px solid var(--primary-color) !important;
}

/* Fix gaps between nested flyout dropdowns */
.cp-header-area .main-menu ul>li>.sub-menu .sub-menu {
    left: 100% !important;
    top: 0 !important;
    margin-left: 0 !important;
}

/* Rotate caret to point right for horizontal flyout menus */
.cp-header-area .main-menu ul>li>.sub-menu .has-submenu>a::before,
.cp-header-area .main-menu ul>li>.sub-menu .menu-item-has-children>a::before {
    transform: translateY(-50%) rotate(-90deg) !important;
    -webkit-transform: translateY(-50%) rotate(-90deg) !important;
}

/* Footer */
.footer-section {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
}

.footer-section .widget-title .title {
    color: var(--secondary-color) !important;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.footer-section a:hover {
    color: var(--secondary-color) !important;
}

.lower-footer {
    background-color: #0099cc !important;
    /* Darker Sky Blue for footer bottom */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sections & Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.title {
    color: #1a1a1a;
}

.text-white {
    color: var(--secondary-color) !important;
}

/* Remove image containers or placeholders if necessary */
.slider-bg,
.feathimg,
.process img {
    display: none !important;
}

/* Surface Cards */
.surfaces .card {
    border: 1px solid var(--primary-color);
    background: var(--secondary-color);
    color: var(--primary-color);
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.surfaces .card.bg-theme {
    background: var(--primary-color) !important;
    color: var(--secondary-color) !important;
}

.surfaces .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 174, 239, 0.3);
}

/* Process Section stylized background */
.process {
    background: var(--light-bg);
    padding: 30px;
    border-radius: 10px;
    border: 1px dashed var(--primary-color);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.process h3 {
    margin-top: 0;
    color: var(--primary-color);
}