:root {
  /* ---- Accent: orange -> yellow ------------------------------------- */
  --color-primary: #F2C747;
  --color-primary-2: #F2C747;
  --color-secondary: #F7D670;
  --color-secondary: rgba(242, 199, 71, 0.20);

  --primary-100: #FFF9E5;
  --primary-200: #FCEDBB;
  --primary-300: #F9E091;
  --primary-400: #F6D46C;
  --primary-500: #F2C747;
  --primary-600: #D9AF32;
  --primary-700: #F2C747;
  --primary-900: #F2C747;
  --secondary-100: #FFFBEE;
  --secondary-200: #FCF1CC;
  --secondary-300: #F9E7AA;
  --secondary-400: #F7DD87;
  --secondary-500: #F7D670;
  --secondary-600: #F2C747;
  --secondary-700: #F7D670;
  --secondary-900: #D9AF32;

  /* ---- Background: white -> black ------------------------------------ */
  --color-white: #ffffff;      /* unchanged — 200 of its 402 uses are text
                                   colour sitting on already-dark elements
                                   and are already correct as white */
  --color-black: #000000;

  /* ---- Text: dark -> light -------------------------------------------- */
  --color-heading-1: #FFFFFF;
  --color-body: #C9C9C9;
  --color-body-2: #B7B7B7;

  /* ---- Borders: needs lightening to stay visible on black ------------- */
  --color-border: rgba(255, 255, 255, 0.15);
}

/* ---- Page background -------------------------------------------------- */
body {
  background: #000000;
}

/* ============================================================================
   Component backgrounds that don't go through a CSS variable — cross-checked
   against classes actually rendered by Master.cshtml / Home.cshtml.
   ============================================================================ */

/* Hero trust-badge cards (pagination-area2 thumb swiper) */
.tmp-banner-slider-area .pagination-area2 .swiper-wrapper .banner-single-thumb {
  background: #141414;
}

/* Hero swiper pagination dots */
.tmp-banner-slider-area.banner-five .swiper-pagination .swiper-pagination-bullet,
.pagination-controler .swiper-pagination.dot-color-white .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.4);
}
.tmp-banner-slider-area.banner-five .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-primary);
}

/* About section — "12+ Years Experience" counter badge */
.about-image-area5 .counter-area {
  background: #141414;
}

/* About / Why Choose DKAN — the drone-video play button circle */
.rounded-player-2 {
  background: var(--color-primary);
}

/* Projects swiper card — image overlay arrow button background */
.tmp-icon-overlay-link-btn.btn-bg-dark::after {
  background-color: #141414;
}

/* Header "Services" dropdown submenu — nav markup was previously using
   invented class names that don't exist in this theme at all (.mainmenu,
   .nav-area as the styled wrapper, has-dropdown) so none of the theme's
   nav CSS was ever applying. Fixed in Master.cshtml to the theme's actual
   classes (.main-nav-desk, li.has-droupdown — yes, that's a typo in the
   theme itself, not ours — .nav-link/.nav-item, .submenu.inner-page).
   This background still needs the same white->dark treatment. */
.main-nav-desk nav ul li.has-droupdown .submenu {
  background-color: #141414;
}

/* Header logo backdrop shape — uses var(--color-heading-1) as a
   background, not text. That variable is now white (correct for the
   ~185 places it's used as text), which broke this one spot where it
   was doing background duty for the theme's original dark header. */
.header-main-2 .header-mid-one-wrapper .logo-area::before {
  background: #000000;
}

/* Primary button hover sweep — same var(--color-heading-1)-as-background
   issue. Given a different yellow shade rather than dark/black since the
   button and its hover text both stay in the yellow family. */
.tmp-btn.btn-primary::after {
  background: var(--primary-600);
}

/* Border button hover sweep (e.g. "Contact Us" secondary CTA) — same
   var(--color-heading-1) issue, but this one needs to STAY dark: its
   hover text goes white, so the sweep needs dark contrast behind it. */
.tmp-btn.btn-border::after {
  background: #000000;
}

/* Header nav link text */
.main-nav-desk nav ul li a {
  color: #FFFFFF;
}

/* Social icon hover circles (header top bar + footer) */
.social-wrapper-1.hover-bg-white li a::after {
  background: var(--color-primary);
}

/* News cards (only render once real posts exist) */
.blog-card-style-five {
  background: #141414;
}

/* Testimonials — active slide card + wash background on the section */
.swiper-slide-active .testimonial-wrapper2,
.testimonial-wrapper2 {
  background: #141414;
}
.tmp-testimonials-area2 {
  background: #000000;
}

/* Contact section — left image panel + form panel */
.tmp-contact-area .left-side-content,
.tmp-contact-area .contact-form-area {
  background: #141414;
}

/* Footer newsletter/CTA button underline sweep */
.main-footer-one-area.five form button::after {
  background: var(--color-primary);
}

/* Page loader */
.loader-wrapper .loader-section {
  background: #000000;
}

/* Services grid (was Projects) — subtle section wash, was light grey */
.project-bg {
  background: rgba(255, 255, 255, 0.03);
}

/* Projects (was Services) — hardcoded light grey (#F6F6F6) in the theme,
   not a variable, so the root override doesn't reach it */
.tmp-service-area.area-3 {
  background: #1A1A1A;
}

/* ============================================================================
   Hardcoded orange gradients (didn't use var(--color-primary), so the
   root override above doesn't reach these) — the 3 that are actually on
   components we use, out of 5 found in the whole theme.
   ============================================================================ */

/* Hero image overlay gradient */
.banner-five-main-wrapper::before {
  background: linear-gradient(180deg, rgba(242, 199, 71, 0) 0%, rgba(242, 199, 71, 0.15) 47.81%, rgba(242, 199, 71, 0.45) 58.9%, #F2C747 100%);
}

/* Projects swiper card — image hover gradient */
.tmpServiceSlider .service-wrapper-3 .image-area::after {
  background: linear-gradient(180.06deg, rgba(242, 199, 71, 0) 0.05%, rgba(242, 199, 71, 0.25) 48.5%, #F2C747 99.95%);
}

/* Why Choose DKAN accreditation cards — image hover gradient */
.working-process-wrapper5::after {
  background: linear-gradient(180deg, rgba(242, 199, 71, 0) 0%, rgba(242, 199, 71, 0.15) 47.81%, rgba(242, 199, 71, 0.45) 58.9%, #F2C747 100%);
}

header.header-four .header-top-wrapper .left .info span,
header.header-four .header-top-wrapper .left .icon,
header.header-four .header-top-wrapper .left .info span a,
.social-wrapper-1 li a{
    color: black;
}
header .main-nav > a {
    color: white !important;
}
.nav-area {
    padding-left: 2rem;
}
.tmp-btn.btn-primary {
    color: black;
}
.header--sticky.sticky.header-one {
    background: black;
}
.project-wrapper2 .image-area a img {
  height: 28rem;
  object-fit: cover;
  width: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .project-wrapper2 .content {
    max-width: 90%;
  }
}
.project-wrapper2 .content {
    bottom: 0;
}
.tmpServiceSlider .service-wrapper-3 .image-area a img {
    height: 28rem;
    object-fit: cover;
}
.working-process-wrapper5 img {
  height: 26rem;
  width: 100%;
  object-fit: cover;
}
.banner-five-main-wrapper::before,
.banner-five-main-wrapper::after {
    display: none;
}
.swiper-slide-active .testimonial-wrapper2.v2,
.tmpTestimonialSlider2 .swiper-navigation-area .swiper-btn,
.tmp-contact-area .left-side-content .social-bottom-area .social-icon-wrapper .social-share-wrapper-1 .social-stylle-one li a{
  background: #141414;
}
.main-footer-one-area.six .single-footer-inner.company,
.main-footer-one-area.six .single-footer-inner.service{
    width: 20%;
}
.main-footer-one-area.six .single-footer-inner.contact {
    width: 30%;
}
@media(max-width:767px){
    .main-footer-one-area.six .single-footer-inner.company,
.main-footer-one-area.six .single-footer-inner.service,
.main-footer-one-area.six .single-footer-inner.contact {
    width: 100%;
}
}
.tmp-project-area.three {
  background: #1A1A1A;

}
.working-process-wrapper5::after {
  background: linear-gradient(180deg, rgba(242, 199, 71, 0) 0%, rgba(0, 0, 0, 0.15) 47.81%, rgba(0, 0, 0, 0.45) 58.9%, #000 100%);
}
.working-process-wrapper5 .content {
  max-width: 90%;
  left: 5%;
  text-align: center;
}