/*
 * Omovin Brand Colors
 * Primary:   #A42226 (brand red)
 * Secondary: #0797ff (brand blue)
 * Accent:    #9fddf9 (light blue)
 */

/* ── Navigation active/hover indicators ─────────────────────────── */
.main-menu ul li.active:before,
.main-menu ul li a.navlink:hover:before {
  background: #0797ff;
}

/* ── Social icon circles (off-canvas & side info) ───────────────── */
.social-area-wrap a {
  background: #0797ff;
}
.social-area-wrap a:hover {
  background: #0580d4;
  opacity: 1;
}

/* ── Contact icon badge ──────────────────────────────────────────── */
.contact-number .icon i {
  background: #e8f5ff;
  color: #0797ff;
}

/* ── Footer social links ─────────────────────────────────────────── */
.footer-area .social-area a i,
.footer-area .social-area a {
  color: #9fddf9;
}
.footer-area .social-area a:hover,
.footer-area .social-area a:hover i {
  color: #0797ff;
}

/* ── Header top bar social icon hover ────────────────────────────── */
.header-top-area .social-area a i:hover {
  color: #0797ff;
}

/* ── Preloader ring (secondary ring uses blue) ───────────────────── */
#loader:after {
  border-color: #0797ff;
}

/* ── Progress / back-to-top ring ─────────────────────────────────── */
.progress-wrap svg.progress-circle path {
  stroke: #A42226;
}

/* ── Active dropdown link ────────────────────────────────────────── */
.main-menu ul > li > ul li a.active {
  color: #9fddf9 !important;
}
.main-menu ul > li > ul li a.active:before {
  background: #9fddf9;
}

/* ── Header nav button hover ─────────────────────────────────────── */
.header-area .theme-btn:hover,
.header-area .dark-btn:hover,
.header-area .white-btn:hover,
.header-area .bordered-btn:hover,
.header-area .theme-btn:focus,
.header-area .dark-btn:focus,
.header-area .white-btn:focus,
.header-area .bordered-btn:focus {
  background: #9fddf9;
  border-color: #9fddf9;
  color: #0d2137;
}

/* focus ring for keyboard navigation (contrast ratio ~10:1) */
.header-area .theme-btn:focus-visible,
.header-area .dark-btn:focus-visible,
.header-area .white-btn:focus-visible,
.header-area .bordered-btn:focus-visible {
  outline: 3px solid #9fddf9;
  outline-offset: 3px;
}

/* ── Gray section gets a subtle cool tint ───────────────────────── */
.gray-bg {
  background: #f4f8fb;
}

/* ── Feature cards: equal height + icon centred ─────────────────── */
.feature-section .row {
  align-items: stretch;
}
.feature-section .single-feature-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.feature-section .single-feature-wrap .feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Service icons: Line Awesome <i> in .single-service-wrap (services page) ── */
.single-service-wrap .service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.single-service-wrap .service-icon i {
  font-size: 42px;
  color: #ffffff;
  line-height: 90px;   /* matches the 90px box height */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.single-service-wrap .service-icon i::before {
  font-size: 42px;
  color: #ffffff;
}
.single-service-wrap:hover .service-icon i::before {
  color: #ffffff;
}

/* ── Service icons: Line Awesome <i> in #service-3 (homepage) ── */
#service-3 .single-service-item .service-icon i {
  display: block;
  line-height: 1;
}
#service-3 .single-service-item .service-icon i::before {
  font-size: 60px;
  color: #A42226;
}
#service-3 .single-service-item:hover .service-icon i::before {
  color: #A42226;
}