/* ===============================
   TAKBEER PROPERTIES - THEME OVERRIDES
   Fully dynamic colors using CSS variables
================================= */

/* Root variables (can be overridden in PHP inline style or :root) */
:root {
    --primary: #78d5ef;
    --secondary: #ff6f61;
    --bg: #ffffff;
    --text-primary: #333333;
    --text-muted: #777777;
    --on-primary: #ffffff;
    --border: #e0e0e0;
}

/* -----------------------------
   General Body & Text
----------------------------- */
body {
    background-color: var(--bg) !important;
    color: var(--text-primary) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary) !important;
}

p, span, small {
    /* color: var(--text-muted) !important; */
}

/* -----------------------------
   Links
----------------------------- */
a, a.nav-link {
    /* color: var(--on-primary) !important; */
    transition: all 0.3s ease;
}

a:hover, a.nav-link:hover {
    /* color: var(--secondary) !important; */
    /* text-decoration: none; */
}

/* -----------------------------
   Buttons
----------------------------- */
.btn-custom {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
    border: none;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

/* -----------------------------
   Sections & Overlays
----------------------------- */
.ftco-section {
    /* background-color: var(--bg) !important; */
    color: var(--text-primary);
    position: relative;
}

.slider-item .overlay {
    background-color: var(--text-muted) !important;
    /* opacity: 0.9 !important; */
}

#section-counter::after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: '';
    z-index: -1;
    opacity: 0.9;
    background: var(--primary);
}

/* -----------------------------
   Cards / Property / Service Blocks
----------------------------- */
.media.block-6.services,
.property-card {
    background-color: var(--bg) !important;
    border: 1px solid var(--border) !important;
}

.media.block-6.services .heading,
.property-card h3 {
    color: var(--primary) !important;
}

.media.block-6.services p,
.property-card p {
    color: var(--text-muted) !important;
}

/* -----------------------------
   Navbar
----------------------------- */
.navbar, .ftco-navbar-light {
    /* background-color: var(--primary) !important; */
}

.navbar .nav-link {
    color: var(--on-primary) !important;
}

.navbar .nav-link:hover, .navbar .dropdown-item:hover {
    color: var(--on-primary) !important;
}

/* Dropdown menu override */
.navbar .dropdown-menu {
    background-color: var(--bg) !important;
    border: 1px solid var(--border);
}

.navbar .dropdown-item {
    color: var(--text-primary) !important;
}

.navbar .dropdown-item:hover {
    color: var(--on-primary) !important;
    background-color: var(--primary) !important;
}

/* -----------------------------
   Owl Carousel Arrows / Dots
----------------------------- */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    background-color: var(--on-primary) !important;
    color: var(--primary) !important;
}

.owl-carousel .owl-nav button:hover {
    background-color: var(--on-primary) !important;
}

/* -----------------------------
   Misc / Fun Facts / Clients
----------------------------- */
.fun-facts, .clients {
    background-color: var(--bg) !important;
    color: var(--text-primary);
}

.fun-facts h3, .clients h3 {
    color: var(--primary) !important;
}


.ftco-navbar-light .navbar-nav>.nav-item.cta.cta-colored>a {
  background: var(--on-primary) !important;
  color: var(--text-primary) !important;
}

/* .ftco-navbar-light .navbar-nav>.nav-item.active>a {
  color: var(--primary) !important;
} */

/* -----------------------------
   Responsive / Utility Overrides
----------------------------- */
@media (max-width: 768px) {
    .navbar-nav .nav-item {
        text-align: center;
    }
    .btn-custom {
        width: 100%;
        margin-bottom: 10px;
    }
}

.navbar-toggler:focus {
    box-shadow: none;
}