/* ============================================================
   ALDIER BRAND SYSTEM — aldier-colors.css
   Brand Document v1.0 — Institutional Modern
   Load order: LAST (overrides styles.css)
   ============================================================

   COLOR SYSTEM
   --aldier-dark:     #181B23  Primary / Dark Base (70%)
   --aldier-blue:     #4659C7  Secondary / Aldier Blue (20%)
   --aldier-yellow:   #F6EB14  Accent / Signal Yellow (5–10%)
   --aldier-white:    #FFFFFF  Neutral
   --aldier-light:    #F5F7FA  Light Grey
   --aldier-mid:      #DDE2EA  Medium Grey
   --aldier-text:     #222222  Dark Text

   TYPOGRAPHY
   Plus Jakarta Sans (loaded via Google Fonts in header)
   Headings: SemiBold (600)
   Body: Regular (400)
   ============================================================ */

/* ── 1. CSS CUSTOM PROPERTIES ─────────────────────────────── */
:root {
  /* Override template variables */
  --primary-color:          #4659C7;
  --primary-lighten-color:  #6B7FD4;
  --secondary-color:        #181B23;

  /* Aldier brand tokens */
  --aldier-dark:            #181B23;
  --aldier-blue:            #4659C7;
  --aldier-yellow:          #F6EB14;
  --aldier-white:           #FFFFFF;
  --aldier-light:           #F5F7FA;
  --aldier-mid:             #DDE2EA;
  --aldier-text:            #222222;
}

/* ── 2. TYPOGRAPHY — PLUS JAKARTA SANS ───────────────────── */
body,
.alt-font,
.main-font {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4,
.display-20, .display-25, .display-27, .display-28,
.title-font {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
  font-weight: 600 !important;
}

i, .fa, .fas, .far, .fab, .fal, .fad,
[class*="fa-"] {
  font-family: 'Font Awesome 7 Free' !important;
  font-weight: 900 !important;
}

.far, [class*="fa-regular"] {
  font-weight: 400 !important;
}

.fab, [class*="fa-brands"] {
  font-family: 'Font Awesome 7 Free' !important;
  font-weight: 400 !important;
}

/* ── 3. BODY & BACKGROUND ────────────────────────────────── */
body {
  background-color: var(--aldier-white);
  color: var(--aldier-text);
}

/* Sections that should use dark base */
.bg-secondary,
section.bg-secondary {
  background-color: var(--aldier-dark) !important;
}

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

/* Light sections */
.bg-light {
  background-color: var(--aldier-light) !important;
}

/* ── 4. TEXT COLORS ──────────────────────────────────────── */
.text-primary,
.text-primary-hover:hover {
  color: var(--aldier-blue) !important;
}

.text-secondary,
.text-secondary-hover:hover {
  color: var(--aldier-dark) !important;
}

.text-lighten,
.text-lighten-hover:hover {
  color: var(--aldier-yellow) !important;
}

/* Sub-text accent indicator (the dot + text) */
.title-style03 .sub-text {
  color: var(--aldier-blue);
}

.title-style03 .sub-text::before {
  border: 3px solid var(--aldier-blue);
}

.title-style03 .sub-text.text-lighten {
  color: var(--aldier-yellow);
}

.title-style03 .sub-text.text-lighten::before {
  border: 3px solid var(--aldier-yellow);
}

/* Italic style spans */
.title-style03 .text-style {
  font-style: italic;
  color: var(--aldier-blue);
}

/* ── 5. BUTTONS ──────────────────────────────────────────── */
.butn-style01 {
  background: var(--aldier-blue);
  color: #fff;
  font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: background 0.25s ease, transform 0.2s ease;
}

.butn-style01:hover,
.butn-style01:active,
.butn-style01:focus {
  background: var(--aldier-dark);
  color: #fff;
  transform: translateY(-1px);
}

.butn-style01.white {
  background: #fff;
  color: var(--aldier-blue) !important;
}

.butn-style01.white:hover {
  background: var(--aldier-blue);
  color: #fff !important;
}

.butn-style01.secondary {
  background: var(--aldier-dark);
  color: #fff !important;
}

.butn-style01.secondary:hover {
  background: var(--aldier-blue);
  color: #fff !important;
}

/* ── 6. NAVIGATION ───────────────────────────────────────── */

/* Active nav item colour */
.navbar-nav li.current > a,
.navbar-nav li.active > a,
.menu_area-light .navbar-nav li.current > a,
.menu_area-light .navbar-nav li.active > a {
  color: var(--aldier-yellow) !important;
}

.navbar > ul > li.current > a::after,
.menu_area-light .navbar > ul > li.current > a::after {
  border-color: transparent var(--aldier-yellow) var(--aldier-yellow) transparent !important;
}

/* Hamburger toggler */
.header-style1 .navbar-toggler,
.header-style3 .navbar-toggler {
  background: var(--aldier-blue);
}

/* Scroll header CTA */
@media screen and (min-width: 992px) {
  .header-style1.scrollHeader .attr-nav > ul > li > a.butn-style01:hover {
    color: var(--aldier-blue) !important;
    border: 1px solid var(--aldier-blue);
  }
}

/* ── 7. PAGE TITLE / BREADCRUMB ──────────────────────────── */
.page-title-section .breadcrumb ul li {
  color: var(--aldier-yellow);
}

.page-title-section .breadcrumb ul li::after {
  border: 3px solid var(--aldier-yellow);
}

.page-title-section .breadcrumb ul li:last-child a {
  color: var(--aldier-yellow);
}

/* Page title shape accent */
.page-title-shape2 {
  background: var(--aldier-blue);
}

/* ── 8. SERVICE CARDS ────────────────────────────────────── */
.card-style02 .card-content .service-icon::before {
  background: var(--aldier-blue);
}

.card-style02:hover .card-content a i,
.card-style02.active .card-content a i {
  border-color: var(--aldier-blue);
  background-color: var(--aldier-blue);
}

.card-style02:hover p,
.card-style02.active p {
  border-color: var(--aldier-blue);
}

.card-style02 .card-body::before {
  background-color: var(--aldier-dark);
  opacity: 0.75;
}

/* ── 9. PROCESS / APPROACH ───────────────────────────────── */
.process-style02 .process-content .process-num {
  background-color: var(--aldier-blue);
  color: #fff;
}

.process-style02 .process-line::before {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Process circle SVG fill */
.process-circle path {
  fill: var(--aldier-blue);
}

/* ── 10. HERO / BANNER ───────────────────────────────────── */
/* Marquee asterisk */
.scroll-style01 .scroll-item .text-primary {
  color: var(--aldier-yellow) !important;
}

/* Rotating circle text */
.banner-style01 .banner-text .coloring {
  fill: rgba(255, 255, 255, 0.8);
}

/* Gradient banner overlay */
.gradient-banner,
.gradient-overlay[data-overlay-dark]::before {
  background: linear-gradient(-45deg, var(--aldier-blue), var(--aldier-dark) 55%);
}

/* Hero overlay */
.secondary-overlay[data-overlay-dark]::before {
  background: var(--aldier-dark);
}

/* ── 11. ABOUT SECTION ───────────────────────────────────── */
.about-style01 .about-avatar li .about-icon {
  background-color: var(--aldier-blue);
}

.about-style01 .about-content .about-text .about-box::before {
  border: 3px solid var(--aldier-blue);
}

/* ── 12. OASYN / WHY-CHOOSE SECTION ─────────────────────── */
.why-choose-style01 {
  background-color: var(--aldier-light) !important;
}

.why-choose-style01 .why-number {
  color: var(--aldier-blue);
}

.why-choose-style01 .why-choose-content {
  color: var(--aldier-text);
}

/* ── 13. SIDEBAR (SERVICE DETAIL PAGES) ──────────────────── */
.sidebar .widget .category-list li a::before {
  background: var(--aldier-blue);
}

.sidebar .widget .category-list li.active a {
  background: var(--aldier-blue);
}

.sidebar .widget .category-list li.active a::before {
  background: var(--aldier-dark);
}

/* ── 14. CONTACT ─────────────────────────────────────────── */
.contact-style01 .contact-bg:hover {
  border: 1px solid var(--aldier-blue);
}

.contact-style01 .contact-bg .icon {
  border: 1px solid var(--aldier-blue);
}

.contact-style01 .contact-bg .icon i {
  color: var(--aldier-blue);
}

.contact-style01 .contact-bg:hover .icon {
  background-color: var(--aldier-dark);
  border: 0;
}

.quform.dark .form-control:focus,
.quform.dark .form-control:active,
.quform.dark .form-control:hover,
.contact-style02 .quform-input .form-control:focus {
  border-color: var(--aldier-blue);
}

/* ── 15. FOOTER ──────────────────────────────────────────── */
.footer-style01 {
  background-color: var(--aldier-dark) !important;
}

footer .email a:hover,
footer .phone a:hover {
  color: var(--aldier-yellow) !important;
}

footer li a:hover {
  color: var(--aldier-yellow) !important;
}

footer .email a::after {
  border-bottom: 1px solid var(--aldier-yellow);
}

/* Footer gradient text */
.footer-style01 .footer-text {
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 16. CAROUSEL DOTS & NAV ─────────────────────────────── */
.owl-carousel .owl-dots .owl-dot:hover span,
.owl-carousel .owl-dots .owl-dot.active span {
  background: var(--aldier-blue);
}

.service-carousel-one.owl-theme .owl-nav [class*='owl-']:hover {
  background: var(--aldier-blue);
  color: #fff;
}

/* ── 17. SCROLL TO TOP ───────────────────────────────────── */
.scroll-top-percentage {
  background-color: var(--aldier-blue);
}

/* ── 18. SOCIAL ICONS ────────────────────────────────────── */
.social-icon li a {
  background: var(--aldier-blue);
}

.social-icon li a:hover {
  background-color: var(--aldier-dark);
}

.social-icon-style2 li a:hover,
.social-icon-style2 li a:active,
.social-icon-style2 li a:focus {
  background: var(--aldier-blue);
}

/* ── 19. PRELOADER ───────────────────────────────────────── */
#preloader::before,
#preloader::after {
  border: 3px solid var(--aldier-blue);
}

/* ── 20. SCROLL SECTION (MARQUEE) ───────────────────────── */
.scroll-section.scroll-style02 .scroll-item {
  color: rgba(70, 89, 199, 0.08);
}

.scroll-section.scroll-style02 .scroll-item:hover {
  color: var(--aldier-blue);
}

/* ── 21. ARROW / LINK ELEMENTS ──────────────────────────── */
.arrow-circle {
  border: 2px solid var(--aldier-blue);
}

.list-style01 li::after {
  color: var(--aldier-blue);
}

/* ── 22. FORM VALIDATION ─────────────────────────────────── */
.form-control:focus {
  border-color: var(--aldier-blue);
  box-shadow: 0 0 0 0.2rem rgba(70, 89, 199, 0.15);
}

/* ── 23. PAGINATION ──────────────────────────────────────── */
.pagination a:hover {
  background-color: var(--aldier-dark);
  color: #fff;
}

.pagination-style01 ul li.active a {
  background: var(--aldier-dark);
  color: #fff;
}

/* ── 24. SIGNAL YELLOW — ACCENT APPLICATIONS ────────────── */
/* Key metrics, important words, direction indicators */
.text-accent,
.accent {
  color: var(--aldier-yellow) !important;
}

.bg-accent {
  background-color: var(--aldier-yellow) !important;
}

/* Rotating asterisk on dark backgrounds */
.bg-secondary .fa-asterisk,
section.bg-secondary .fa-asterisk {
  color: var(--aldier-yellow) !important;
}

/* ── 25. WHATSAPP FLOAT ──────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 80px;
  right: 30px;
  background: #25D366;
  color: #fff;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}

.whatsapp-float:hover {
  background: #1DA851;
  color: #fff;
  transform: scale(1.05);
}

/* ── 26. ENTERPRISE POLISH — MICRO INTERACTIONS ─────────── */

/* Subtle page transitions */
.main-wrapper {
  animation: aldierFadeIn 0.35s ease forwards;
}

@keyframes aldierFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card hover lift */
.card-style02:hover {
  box-shadow: 0 20px 60px rgba(24, 27, 35, 0.18);
  transform: translateY(-3px);
  transition: all 0.3s ease;
}

/* Section dividers — subtle line between light sections */
section + section.bg-light,
section.bg-light + section {
  border-top: 1px solid var(--aldier-mid);
}

/* Smooth focus rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--aldier-blue);
  outline-offset: 3px;
}

/* ── 27. FIX: SEARCH FORM (hidden but clean) ─────────────── */
.top-search {
  display: none !important;
}

/* ── 28. DARK SECTION TEXT LEGIBILITY ───────────────────── */
.bg-secondary h1,
.bg-secondary h2,
.bg-secondary h3,
.bg-secondary h4,
.bg-secondary h5,
.bg-secondary h6 {
  color: #ffffff;
}

.bg-secondary p {
  color: rgba(255, 255, 255, 0.75);
}

/* ── 29. CTA SECTION ─────────────────────────────────────── */
section .title-style03 h2.title-font {
  color: var(--aldier-dark);
}

/* Ensure CTA section on light bg reads correctly */
section:not(.bg-secondary):not(.bg-primary) .title-style03 .sub-text {
  color: var(--aldier-blue);
}


/* ── 30. SUPPRESS TEMPLATE DEMO ELEMENTS ────────────────── */
.wlt-sidebar-main,
.wlt-overlay-bg,
.pxl-buy-now,
.buy-theme,
.popular-theme,
.top-search {
  display: none !important;
}
.card-style02 .card-body {
  opacity: 1 !important;
  transform: scale(1) !important;
}

header.header-style1 {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.main-wrapper {
  padding-top: 80px;
}
.secondary-overlay[data-overlay-dark]::before {
    background: #000000;
}
[data-overlay-dark="8"]:before, [data-overlay-light="8"]:before {
    opacity: 0.7;
}