/*============================================
  SoftWar — For Technology Solutions
  Brand color system & template customizations
  ============================================*/

/* =====================================================
   1. SoftWar brand color system (overrides template blue)
   Loaded AFTER style.css so these :root values take effect
   across the whole template.
   Brand greens derived from the official SoftWar logo:
   - Signature bright green : #05EF6E / #0DE871
   - Solid brand green      : #0DA670 / #02D05B
   - Wordmark navy          : #2A446B (kept for dark sections)
   ===================================================== */
:root {
  /* Primary accent — replaces template blue #1053f3 */
  --theme-color: #0fa968;

  /* Bright SoftWar green used for highlights, preloader,
     avatars & decorative accents (kept vivid) */
  --sw-green-bright: #0de871;
  --sw-green: #0fa968;
  --sw-green-dark: #0a9454;

  /* Navy blues -> proper dark/black tones */
  --theme-color3: #0a0f1e;
  --dark-color: #0a0f1e;
  --dark-color2: #0a0f1e;
  --dark-color3: #0a0f1e;
  --dark-color4: #06134c;

  /* Tinted green surfaces that reference the old blue alpha:
     rgba(16,83,243, …) -> rgba(15,169,104, …) */
  --bs-bg-color3: rgba(15, 169, 104, 0.20);
  --bs-bg-color4: #d9f5e9;
  --bs-bg-color7: rgba(10, 148, 84, 0.14);
  --bs-bg-color9: rgba(10, 148, 84, 0.20);
  --bs-border-color10: rgba(15, 169, 104, 0.20);

  /* Dark theme base is kept (template's near-black navy)
     so dark/light section balance is preserved. */
}

/* The template dark surfaces reference the old #1053f3 via a few
   inline styles / special classes; normalise the most common ones. */
.text-theme, .text-theme { color: var(--theme-color) !important; }

/* =====================================================
   2. Logo sizing (SoftWar stacked logo 329×203 ≈ 1.62:1)
   Height-first sizing keeps the wordmark + tagline legible
   without overpowering the nav. Template hides img:last-child
   on desktop — re-show our single header <img> explicitly.
   ===================================================== */
.menu-area .header-logo a img:only-child,
.mobile-logo img,
.sidebar-logo img {
  display: block !important;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Main header — brand-forward, tagline still readable */
.header-logo img {
  height: 78px;
  max-height: 78px;
  max-width: 135px;
}

/* Sticky bar — slightly smaller so the bar stays compact */
.sticky-header .header-logo img {
  height: 58px;
  max-height: 58px;
  max-width: 105px;
}

.mobile-menu-wrapper .mobile-logo img {
  height: 56px;
  max-height: 56px;
  max-width: 100px;
}

.sidebar-content .sidebar-logo img {
  height: 64px;
  max-height: 64px;
  max-width: 120px;
}

@media (max-width: 991px) {
  .header-logo img {
    height: 64px;
    max-height: 64px;
    max-width: 115px;
  }
  header.tv-header.header-style6 .menu-area {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

@media (max-width: 575px) {
  .header-logo img {
    height: 60px;
    max-height: 60px;
    max-width: 108px;
  }
  .sticky-header .header-logo img {
    height: 50px;
    max-height: 50px;
    max-width: 95px;
  }
}

/* Match header chrome to logo height */
header.tv-header.header-style6 .menu-area {
  padding-top: 10px;
  padding-bottom: 10px;
}
header.tv-header.header-style6 .main-wrapper .main-menu > ul > li > a {
  padding-top: 22px;
  padding-bottom: 22px;
}
.sticky-header .menu-area {
  padding-top: 8px;
  padding-bottom: 8px;
}
.sticky-header .main-menu > ul > li > a {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* --- Hero section refinements --- */
.tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-area .hero-content .hero-title {
  font-size: 72px;
  line-height: 1.1;
}
@media (max-width: 1299px) {
  .tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-area .hero-content .hero-title {
    font-size: 60px;
  }
}
@media (max-width: 991px) {
  .tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-area .hero-content .hero-title {
    font-size: 42px;
    line-height: 1.15;
  }
}
@media (max-width: 575px) {
  .tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-area .hero-content .hero-title {
    font-size: 32px;
    line-height: 1.15;
  }
}
@media (max-width: 400px) {
  .tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-area .hero-content .hero-title {
    font-size: 28px;
  }
}

/* Hero grid: text left, decorative logo right */
.tv-hero-section.style-6 .hero-area .container .row {
  align-items: center;
}
.tv-hero-section.style-6 .hero-area .hero-grid {
  width: 100%;
  position: relative;
}

/* Position the slider arrows at bottom-right so they don't overlap the
   left-side CTA buttons (logo was removed from right side). */
.tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-btn-wrapper {
  right: 60px;
  left: auto !important;
}
@media (max-width: 1299px) {
  .tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-btn-wrapper {
    right: 30px;
  }
}
@media (max-width: 767px) {
  .tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-btn-wrapper {
    right: 20px;
  }
}

/* --- Service card icons (Font Awesome instead of webp) --- */
.service-box-six .icon i {
  font-size: 36px;
  color: var(--theme-color);
}

/* --- Service slider images uniform sizing --- */
.service-box-six .image-box .thumb {
  height: 280px;
  overflow: hidden;
}
.service-box-six .image-box .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Service grid cards with images --- */
.tv-service-single-box .inner-box {
  text-align: center;
}
.tv-service-single-box .inner-box .service-thumb {
  height: 180px;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 20px;
}
.tv-service-single-box .inner-box .service-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Text-based client logos (recreated from softwar-eg.com) --- */
.brand-item .image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-text-logo {
  font-family: var(--title-font);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--title-color);
  opacity: 0.7;
  line-height: 1;
  display: inline-block;
  transition: all 0.3s ease;
  text-align: center;
}
.brand-item .image:hover .sw-text-logo {
  opacity: 1;
}
.sw-text-logo small {
  display: block;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.22em;
  margin-top: 3px;
}
.sw-text-logo.tl-2l   { font-size: 21px; }
.sw-text-logo.tl-box  {
  font-size: 12px;
  font-weight: 700;
  border: 2px solid currentColor;
  padding: 7px 8px;
  text-align: left;
  line-height: 1.25;
}
.sw-text-logo.tl-dot  { font-size: 20px; font-weight: 700; }
.sw-text-logo.tl-dot i {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 3.5px solid currentColor;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: baseline;
}
.sw-text-logo.tl-light { font-size: 21px; font-weight: 300; }
.sw-text-logo.tl-mtn  { font-size: 13px; font-weight: 700; }
.sw-text-logo.tl-mtn b {
  background: var(--title-color);
  color: var(--white-color);
  padding: 1px 5px;
  margin-right: 6px;
}

/* --- Initial avatars (no fake stock photos) --- */
.sw-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0de871 0%, #0a9f4e 100%);
  color: #0a0f1e;
  font-family: var(--title-font);
  font-weight: 800;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.35);
  flex: 0 0 auto;
}
.sw-avatar.sm {
  width: 40px;
  height: 40px;
  font-size: 13px;
}
.sw-avatar + .sw-avatar {
  margin-left: -14px;
}
.hero-social-proof .social,
.client-social-proof .social {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Footer contact list --- */
.footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}
.footer-contact li i {
  color: var(--theme-color);
}
.footer-contact li a {
  color: rgba(255, 255, 255, 0.7);
}
.footer-contact li a:hover {
  color: var(--theme-color);
}

/* --- Native select options readable on dark form --- */
.contact-form select option,
.custom-select option {
  color: #10171d;
  background: #ffffff;
}

/* --- CTA section green override (template has blue bg) --- */
.tv-cta-section.style-4 {
  background: linear-gradient(135deg, #0a9454 0%, #0fa968 50%, #02d05b 100%) !important;
}
.tv-cta-section.style-4 .bg.image,
.tv-cta-section.style-4 .bg.image img {
  display: none !important;
}
.tv-cta-section.style-4 .overlay {
  display: none !important;
}

/* --- Newsletter section green override --- */
.newsletter-section,
.tv-newsletter-section {
  background: linear-gradient(135deg, #0a9454 0%, #0fa968 50%, #02d05b 100%) !important;
}
.newsletter-section .bg,
.tv-newsletter-section .bg {
  display: none !important;
}
.newsletter-section .overlay,
.tv-newsletter-section .overlay {
  display: none !important;
}

/* --- Footer copyright bar --- */
.footer-bottom {
  background-color: #06134c !important;
}
.footer-bottom .copyright {
  color: rgba(255, 255, 255, 0.6);
}

/* --- Footer services list --- */
.footer-widget .widget-title,
.footer-widget h4 {
  color: var(--white-color);
}
.footer-links li a {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}
.footer-links li a:hover {
  color: var(--theme-color);
}

/* --- Footer blog entries --- */
.footer-widget .post-item .post-title a {
  color: var(--white-color);
}
.footer-widget .post-item .post-meta {
  color: rgba(255, 255, 255, 0.5);
}

/* =====================================================
   3. Inner page header — reduce height & remove blue
   ===================================================== */
.tv-breadcrumb-section .tv-breadcrumb-inner {
  padding: 80px 0 !important;
}
.tv-breadcrumb-section .bg.image,
.tv-breadcrumb-section .bg.image img {
  display: none !important;
}
.tv-breadcrumb-section {
  background-color: #0a0f1e !important;
}
@media (max-width: 991px) {
  .tv-breadcrumb-section .tv-breadcrumb-inner {
    padding: 60px 0 !important;
  }
}
@media (max-width: 575px) {
  .tv-breadcrumb-section .tv-breadcrumb-inner {
    padding: 50px 0 !important;
  }
}

/* =====================================================
   5. Disable all scroll-triggered text animations
   so headings are always fully visible
   ===================================================== */
.title-wrap .sec-title,
.title-wrap .title,
h2.sec-title,
h3.sec-title {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  visibility: visible !important;
}
.about-title-area {
  flex-direction: column !important;
  gap: 10px;
}
.about-title-area .title-wrap.three {
  width: 100% !important;
  max-width: 100% !important;
}

/* =====================================================
   4. Kill ALL blue — replace with green & black
   ===================================================== */

/* Top bar background: blue -> dark */
header .header-top,
.tv-header .header-top,
.header-top {
  background-color: #0a0f1e !important;
}
header .header-top::before,
.tv-header .header-top::before,
.header-top::before {
  background-color: var(--theme-color) !important;
}

/* Active nav link color */
.menu > li > a.active,
.menu > li > a.current,
.nav-menu .navigation > li > a:hover,
.nav-menu .navigation > li.current > a,
.nav-menu .navigation > li.active > a {
  color: var(--theme-color) !important;
}

/* Sub-menu active item */
.sub-menu > li > a:hover,
.sub-menu > li.current > a {
  color: var(--theme-color) !important;
}

/* Get Free Quote / theme buttons that are blue */
.theme-btn,
.btn-cta,
.cta-btn,
.tv-btn {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}
.theme-btn:hover,
.btn-cta:hover,
.cta-btn:hover,
.tv-btn:hover {
  background-color: var(--sw-green-dark) !important;
  border-color: var(--sw-green-dark) !important;
}

/* Restore secondary outline CTA (was flattened by solid-green rule) */
.theme-btn.style2 {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  color: #fff !important;
}
.theme-btn.style2:hover {
  background-color: rgba(15, 169, 104, 0.18) !important;
  border-color: var(--theme-color) !important;
}

/* Preloader */
.preloader {
  background-color: #0a0f1e !important;
}
.preloader .preloader-inner .circle {
  border-color: var(--theme-color) !important;
  border-top-color: var(--sw-green-bright) !important;
}

/* All blue gradients -> green */
.bg-gradient-blue,
.bg-blue {
  background: linear-gradient(135deg, #0a9454 0%, #0fa968 50%, #02d05b 100%) !important;
}

/* Back-to-top button */
.back-to-top {
  background-color: var(--theme-color) !important;
}
.back-to-top:hover {
  background-color: var(--sw-green-dark) !important;
}

/* Social icons */
.social-icons a:hover,
.footer-social a:hover {
  background-color: var(--theme-color) !important;
  color: #fff !important;
}

/* Inner page "Get Free Quote" floating button */
.free-quote-btn,
.get-free-quote,
.floating-quote {
  background-color: var(--theme-color) !important;
}

/* Any remaining blue accent via inline or utility classes */
.text-blue,
.text-primary,
.bg-primary {
  color: var(--theme-color) !important;
  background-color: var(--theme-color) !important;
}

/* Swiper pagination active dot */
.swiper-pagination-bullet-active {
  background-color: var(--theme-color) !important;
}

/* Active dot for carousel */
.array-next.active,
.array-prev.active {
  background-color: var(--theme-color) !important;
}

/* Tag / badge accents that are blue */
.badge,
.tag,
.category-tag {
  color: var(--theme-color) !important;
}

/* Service card hover blue -> green */
.service-box-six:hover,
.service-box:hover,
.service-card:hover {
  border-color: var(--theme-color) !important;
}

/* Blog section styling */
.blog-single-box .category-tag {
  background-color: #0fa968 !important;
  color: #fff !important;
}

/* Footer blog thumbnails */

/* ============================================================
   SOCIAL PROOF AVATARS — replace tiny placeholder images
   ============================================================ */
/* Hide original social images EXCEPT hero avatars */
.social img:not(.sw-avatar-img),
.client-social-proof .social img {
  display: none !important;
}
.client-social-proof .social {
  display: flex !important;
  align-items: center;
  gap: 0;
}
.client-social-proof .social::before {
  content: "AZ";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0fa968;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid #0a0f1e;
  margin-left: 12px;
  position: relative;
  z-index: 2;
}
.client-social-proof .social::after {
  content: "AA";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid #0a0f1e;
  margin-left: -14px;
  position: relative;
  z-index: 1;
}
.client-social-proof .social h4 {
  margin-left: 6px;
  z-index: 3;
}

/* Plus sign handled by template's h2 > span::before */

/* About section tags — glow hover instead of solid fill */
.about-right .tag-list .tag:hover,
.about-right .tag-list .tag.active {
  background: transparent !important;
  color: #0fa968 !important;
  border-color: #0fa968 !important;
  box-shadow: 0 0 12px rgba(15, 169, 104, 0.4), 0 0 24px rgba(15, 169, 104, 0.2) !important;
}

/* About section image */

/* ============================================================
   HERO SECTION — fix blue overlay & background image
   ============================================================ */
.tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-area::before {
  background-image: linear-gradient(90deg, rgba(10, 15, 30, 0.95) 0%, rgba(10, 15, 30, 0.95) 40%, rgba(10, 15, 30, 0) 55%, rgba(10, 15, 30, 0) 100%) !important;
}
@media (max-width: 767px) {
  .tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-area::before {
    background-image: linear-gradient(100deg, rgba(10, 15, 30, 0.95) 0%, rgba(10, 15, 30, 0.95) 38%, rgba(10, 15, 30, 0) 85%, rgba(10, 15, 30, 0) 100%) !important;
  }
}
/* Hero background image */
.tv-hero-section .bg.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.tv-hero-section .bg.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Contact section background image */
.tv-contact-section.style-5 .bg.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.tv-contact-section.style-5 .bg.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tv-contact-section.style-5 .container {
  position: relative;
  z-index: 1;
}

/* Stop hero slider — show only first slide */
.hero-slider-2 .swiper-wrapper {
  transition: none !important;
  transform: translate3d(0, 0, 0) !important;
}
.hero-slider-2 .swiper-slide {
  display: none !important;
}
.hero-slider-2 .swiper-slide-active,
.hero-slider-2 .swiper-slide:first-child {
  display: block !important;
}
.hero-btn-wrapper {
  display: none !important;
}

.sw-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0fa968;
  margin-left: -12px;
  position: relative;
  z-index: 2;
}
.sw-avatar-img:first-child {
  margin-left: 0;
}

/* ============================================================
   CONTACT SECTION (style-5) — remove blue backgrounds
   ============================================================ */
.tv-contact-section.style-5 {
  background-color: #0a0f1e !important;
}
.tv-contact-section.style-5 .bg.image {
  display: block !important;
}
.tv-contact-section.style-5 .bg.image img {
  display: block !important;
}
.tv-contact-section.style-5 .p-top-left {
  display: none !important;
}

/* ============================================================
   TESTIMONIAL STAT CARD — green accent, remove blue gradient
   ============================================================ */
.testi-single-card .bg.image {
  display: none !important;
}
.testi-single-card {
  background: linear-gradient(135deg, #0fa968 0%, #10b981 100%) !important;
}
.testi-single-card .count {
  color: #fff !important;
}
.testi-single-card .title {
  color: #fff !important;
}

/* ============================================================
   FOOTER BOTTOM — green accent bar
   ============================================================ */
.footer-bottom {
  background-color: #0fa968 !important;
}
.footer-bottom .copyright p,
.footer-bottom .copyright p a {
  color: #fff !important;
}
.footer-bottom .footer-policy a {
  color: #fff !important;
}

/* =====================================================
   6. Kill ALL remaining blue — comprehensive overrides
   ===================================================== */

/* CTA sections: ALL style variants get green/dark backgrounds */
.tv-cta-section,
.tv-cta-section.style-2,
.tv-cta-section.style-3,
.tv-cta-section.style-4,
.tv-cta-section.style-5,
.tv-cta-section.inner {
  background: linear-gradient(135deg, #0a0f1e 0%, #0d1a2d 50%, #0a0f1e 100%) !important;
}
.tv-cta-section .bg.image,
.tv-cta-section .bg.image img {
  display: none !important;
}
.tv-cta-section .overlay {
  background-color: #0a0f1e !important;
  opacity: 0.85 !important;
}
.tv-cta-section .overlay.bg-theme,
.tv-cta-section .overlay.mbm-overlay {
  background-color: #0a0f1e !important;
}

/* CTA inner variant - green accent */
.tv-cta-section.inner {
  background: #f8f9fa !important;
}
.tv-cta-section.inner .overlay {
  display: none !important;
}

/* bg-theme / bg-theme3 / bg-theme4 overlays — force dark, never blue */
.bg-theme,
.bg-theme3,
.bg-theme4 {
  background-color: #0a0f1e !important;
}

/* Any section with bg-theme class as direct background */
section.bg-theme,
div.bg-theme,
.tv-process-section .bg-theme3,
.tv-feature-box.bg-theme3 {
  background-color: #0a0f1e !important;
}

/* Progress bar backgrounds — green fill, dark track */
.skill-bar .bar-inner {
  background-color: #1a1f2e !important;
}
.skill-bar .bar.progress-line {
  background: linear-gradient(90deg, #0fa968, #0de871) !important;
}

/* Marquee section — ensure no blue */
.tv-marquee-section {
  background-color: #f8f9fa !important;
}
.tv-marquee-section .bg.image,
.tv-marquee-section .bg.image img {
  display: none !important;
}

/* Process section dark inner */
.tv-process-section .process-inner.bg-theme3 {
  background-color: #0a0f1e !important;
}

/* All remaining inline blue color references via SVG */
svg path[fill="#1053f3"],
svg path[fill="#061153"],
svg path[stroke="#1053f3"],
svg path[stroke="#061153"] {
  fill: #0fa968 !important;
  stroke: #0fa968 !important;
}

/* Skill section */
.tv-skill-section .tv-skill-inner.bg-light2 {
  background-color: #f0f2f5 !important;
}

/* Broken image fallback — hide missing images gracefully */
img[src*="hm3-img02.webp"] {
  display: none !important;
}

/* Profile card on about page — AZ initials replacement */
.profile-card .image {
  display: none !important;
}
.profile-card::before {
  content: "AZ";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #0fa968;
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  font-family: var(--title-font);
}

/* Achievement section — hide broken achievement images */
.achivement-image-wrapper .thumb img,
.achivement-right-wrapper .icon img {
  display: none !important;
}
.achivement-image-wrapper .thumb-bg {
  display: none !important;
}

/* Hide broken CTA arrow image */
.cta-right .arrow img {
  display: none !important;
}

/* Team section background image fallback */
.tv-team-section.style-2 .bg.image,
.tv-team-section.style-2 .bg.image img {
  display: none !important;
}
.tv-team-section.style-2 .team-inner {
  background: linear-gradient(135deg, #0a0f1e 0%, #0d1a2d 100%) !important;
}

/* ===== Redesigned Footer ===== */
.footer-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 12px;
}
.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: #0fa968;
  border-radius: 2px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 10px;
}
.footer-links li a {
  color: #b0b8c4;
  font-size: 15px;
  transition: all 0.3s ease;
  display: inline-block;
}
.footer-links li a:hover {
  color: #0fa968;
  padding-left: 5px;
}
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  color: #b0b8c4;
  font-size: 15px;
}
.footer-contact li i {
  color: #0fa968;
  font-size: 16px;
  margin-top: 4px;
  min-width: 18px;
}
.footer-contact li a {
  color: #b0b8c4;
  transition: color 0.3s ease;
}
.footer-contact li a:hover {
  color: #0fa968;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #b0b8c4;
  font-size: 15px;
  transition: all 0.3s ease;
}
.footer-social .social-icon:hover {
  background: #0fa968;
  color: #fff;
  transform: translateY(-3px);
}
.footer-policy a {
  color: #b0b8c4;
  font-size: 14px;
  margin-left: 20px;
  transition: color 0.3s ease;
}
.footer-policy a:hover {
  color: #0fa968;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
}

/* =====================================================
   MOBILE EXPERIENCE
   Breakpoints: 991 / 767 / 575 / 400
   ===================================================== */

/* --- Light hamburger on dark absolute header --- */
header.tv-header.header-style6 .sidebar-btn {
  border-color: rgba(255, 255, 255, 0.85) !important;
}
header.tv-header.header-style6 .sidebar-btn .line {
  background: #fff !important;
}

/* Sticky bar keeps dark hamburger for light chrome */
.sticky-header .sidebar-btn {
  border-color: var(--dark-color) !important;
}
.sticky-header .sidebar-btn .line {
  background: var(--dark-color) !important;
}

/* Hide header hamburger while mobile drawer is open */
body:has(.mobile-menu-wrapper.body-visible) header.tv-header .sidebar-btn,
body:has(.mobile-menu-wrapper.body-visible) .sticky-header .sidebar-btn {
  opacity: 0;
  pointer-events: none;
}

/* --- Mobile-only hero background (logo.png) --- */
.tv-hero-section.style-6 .bg.image {
  background: #000;
}
.tv-hero-section.style-6 .sw-hero-bg-desktop {
  display: block;
}
.tv-hero-section.style-6 .sw-hero-bg-mobile {
  display: none;
}

@media (max-width: 767px) {
  .tv-hero-section.style-6 .sw-hero-bg-desktop {
    display: none !important;
  }
  .tv-hero-section.style-6 .bg.image {
    background: #000;
  }
  .tv-hero-section.style-6 .sw-hero-bg-mobile {
    display: block !important;
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 6%;
    transform: translateX(-50%);
    width: min(62vw, 260px);
    height: auto;
    max-height: 28vh;
    object-fit: contain;
    object-position: center;
    opacity: 0.28;
    pointer-events: none;
  }
  .tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-area::before {
    background-image: linear-gradient(
      180deg,
      rgba(10, 15, 30, 0.92) 0%,
      rgba(10, 15, 30, 0.88) 40%,
      rgba(10, 15, 30, 0.82) 70%,
      rgba(10, 15, 30, 0.94) 100%
    ) !important;
  }
  .tv-hero-section.style-6 .hero-inner .hero-slider-2 .hero-area {
    padding-top: 100px !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 575px) {
  /* Soften hard line breaks in hero copy */
  .tv-hero-section.style-6 .hero-title br,
  .tv-hero-section.style-6 .hero-content .text br {
    display: none;
  }

  .tv-hero-section.style-6 .hero-content .my-50 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  .tv-hero-section.style-6 .hero-user {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  .tv-hero-section.style-6 .hero-user .theme-btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Years / odometer counter --- */
@media (max-width: 767px) {
  .tv-about-section.style-5 .about-left-box .box-top h2,
  .tv-about-section.style-6 .about-left-box .box-top h2 {
    font-size: 42px;
    white-space: nowrap;
    min-width: 4.5ch;
  }
  .tv-about-section.style-5 .about-left-box .box-top h2 > span,
  .tv-about-section.style-6 .about-left-box .box-top h2 > span {
    display: inline-block;
    white-space: nowrap;
  }
  .tv-about-section.style-5 .about-left-box .box-top h2 > span::before,
  .tv-about-section.style-6 .about-left-box .box-top h2 > span::before {
    font-size: 28px;
    right: -20px;
  }
  .tv-about-section .about-left-box .box-top .odometer,
  .tv-about-section .about-left-box .box-top .count-number {
    white-space: nowrap !important;
    display: inline-block;
  }
}

/* --- Mobile menu touch targets --- */
.mobile-menu-wrapper .menu-toggle {
  width: 44px !important;
  height: 44px !important;
  line-height: 40px !important;
  font-size: 16px;
  min-width: 44px;
  min-height: 44px;
}
.mobile-menu-wrapper .mobile-menu .navigation > li > a {
  min-height: 44px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  display: flex !important;
  align-items: center;
}

/* --- Newsletter / sidebar never wider than viewport --- */
.sidebar-wrapper {
  width: min(400px, 100vw) !important;
  max-width: 100vw;
  padding-left: 24px;
  padding-right: 24px;
}

/* --- Footer contrast on dark navy --- */
.footer-widget p,
.footer-widget .text,
.footer-about p,
.tv-footer-section p,
.footer-contact li,
.footer-contact li a,
.footer-links li a,
.footer-policy a,
.footer-bottom .copyright p,
.footer-bottom .copyright p a {
  color: rgba(255, 255, 255, 0.82) !important;
}
.footer-links li a:hover,
.footer-contact li a:hover,
.footer-policy a:hover {
  color: var(--theme-color) !important;
}