:root {
    --primary-red: #e80a0a;
    --primary-red-hover: #bd0303;
    --primary-black: #000;
    --secondary-gray: #f9fafb;
    --text-dark: #111827;
    --text-gray: #6b7280;
    --border-gray: #e5e7eb;
    --bg-light-rgb: #f3f4f6;
    --bs-surface-bg: #f8f9fa; /* light background */
    --bs-body-color: #212529; /* dark text */
    --service-card-bg: #efefef;
    --area-badge-bg: #f3f4f6;
    --breadcrumb-text: #d2dcdc;
}
[data-bs-theme="dark"] {
    --body-bg: #000;
    --body-color: #fff;
    --bg-light-rgb: #151515;
    --bs-surface-bg: #101010; /* dark background */
    --bs-body-color: #f8f9fa; /* light text */
    --service-card-bg: #111827;
    --area-badge-bg: #1f2937;
    --breadcrumb-text: #d2dcdc;
}

/* base */
html {
    scroll-behavior: smooth
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.bg-surface {
    background-color: var(--bs-surface-bg) !important;
}
.bg-cta {
    background: linear-gradient(135deg, var(--bs-surface-bg) 0%, var(--service-card-bg) 100%) !important;
}

.text-body {
    color: var(--bs-body-color) !important;
}
.t4u-btn-text {
    color: var(--primary-red) !important;
}
.t4u-breadcrumb-a {
    color: var(--breadcrumb-text) !important;
}

/* header */
.header-top-bar {
    background: var(--primary-red);
    color: #fff;
    padding: .5rem 0
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .95);
    transition: .3s
}

.main-header.scrolled {
    background: #000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
}

.logo-circle {
    width: 48px;
    height: 48px;
    background: var(--primary-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600
}

.nav-link-custom {
    color: #fff;
    text-decoration: none;
    transition: .2s
}

/* ---------- Header Nav polish ---------- */
.navbar .nav-link-custom {
  color: #fff;
  border-radius: .5rem;
  padding: .5rem .75rem;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}


.navbar .nav-link-custom,
.mobile-menu .nav-link {
  position: relative;
  overflow: hidden;          /* hides the bar edges on small paddings */
}

/* underline bar */
.navbar .nav-link-custom::after,
.mobile-menu .nav-link::after {
  content: "";
  position: absolute;
  left: .6rem;
  right: .6rem;
  bottom: .35rem;            /* adjust for your line-height/padding */
  height: 2px;
    margin-left:0!important;
    margin-right:0!important;
    border-top: 0!important;
  background: #dc2626;       /* brand red */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  opacity: .95;
}

/* reveal on hover/focus/active */
.navbar .nav-link-custom:hover::after,
.navbar .nav-link-custom:focus-visible::after,
.navbar .nav-link-custom.active::after,
.mobile-menu .nav-link:hover::after,
.mobile-menu .nav-link:focus-visible::after,
.mobile-menu .nav-link.active::after {
  transform: scaleX(1);
}

/* optional: subtler hover bg so underline stands out */
.navbar .nav-link-custom:hover,
.navbar .nav-link-custom:focus-visible,
.mobile-menu .nav-link:hover,
.mobile-menu .nav-link:focus-visible {
  background: transparent;   /* or keep your existing bg—your call */
  text-decoration: none;
  outline: 0;
}

/* keep dropdown container anchored under the tab */
.navbar .nav-item.dropdown-custom { position: relative; }
.navbar .dropdown-menu-custom {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + .5rem);
  display: none;
  z-index: 1050;
}
.navbar .nav-item.dropdown-custom.show > .dropdown-menu-custom { display: block; }

/* Dropdown container anchors the menu */
.navbar .nav-item.dropdown-custom { position: relative; }

/* Dropdown panel */
.dropdown-menu-custom {
  position: absolute;
  inset-inline-start: 0;   /* LTR: left:0; RTL safe */
  top: calc(100% + .5rem); /* a little offset below the tab */
  min-width: 320px;
  max-width: 560px;
  padding: .5rem;
  display: none;
  z-index: 1050;
  background: #0f0f10; /* dark panel to match header */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.dropdown-menu-custom .dropdown-item-custom {
  display: block;
  padding: .6rem .75rem;
  border-radius: .5rem;
  color: #e6e6e6;
  text-decoration: none;
}

.dropdown-menu-custom .dropdown-item-custom.active {
    color: var(--primary-red);
    border: 1px solid var(--primary-red);
}

.dropdown-menu-custom .dropdown-item-custom:hover,
.dropdown-menu-custom .dropdown-item-custom:focus-visible {
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: 0;
}

/* Show on .show from JS */
.nav-item.dropdown-custom.show > .dropdown-menu-custom { display: block; }

.area-cta-bg {
    background: linear-gradient(135deg, var(--service-card-bg) 0%, var(--body-bg) 100%);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center
}

/* hero */
.hero-section {
    position: relative;
    padding-top: 8rem;
    padding-bottom: 4rem;
    background: linear-gradient(135deg, #1f2937 0%, #000 50%, #1f2937 100%);
    overflow: hidden
}

.hero-bg-image {
    position: absolute;
    inset: 0;
    opacity: .2;
    object-fit: cover;
    object-position: center 30%;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.hero-content {
    position: relative;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(220, 38, 38, .1), transparent)
}

.pulse-animation {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}

@keyframes pulse {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: .8
    }
}

.trust-badge {
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 1rem;
    padding: 1.5rem
}

/* buttons */
.btn-primary-red {
    background: var(--primary-red);
    border: none;
    color: #fff;
    padding: .75rem 2rem;
    border-radius: .5rem;
    font-weight: 500;
    box-shadow: 0 4px 6px rgba(220, 38, 38, .3)
}

.btn-primary-red:hover {
    background: var(--primary-red-hover);
    transform: scale(1.05);
    color: #fff
}

.btn-white {
    background: #fff;
    border: none;
    color: var(--text-dark);
    padding: .75rem 2rem;
    border-radius: .5rem;
    font-weight: 500
}
.btn-white:hover {
    background: #f3f4f6;
    transform: scale(1.05);
    color: var(--text-dark)
}

.btn-dark-outline {
    background: #1f2937;
    border: 2px solid #4b5563;
    color: #fff;
    padding: .75rem 2rem;
    border-radius: .5rem
}
.btn-dark-outline:hover {
    background: #1f2937;
    border-color: var(--primary-red);
    color: var(--primary-red)
}

/* reviews-swiper */
.reviews-swiper .swiper-button-prev,
.reviews-swiper .swiper-button-next {
    color: var(--primary-red);
}

.reviews-swiper .swiper-pagination-bullet-active {
    background: var(--primary-red);
}

.review-text.clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--lines, 4);
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-text.expanded {
    -webkit-line-clamp: initial;
    max-height: none;
}

/* 3 way theme switch */
.theme-switcher {
    display: flex;
    position: relative;
    width: 108px;
    height: 28px;
    background: #1F2937FF;
    border-radius: 999px;
    overflow: hidden;
    font-size: 0;
}

.theme-switcher input[type="radio"] {
    display: none;
}

.theme-switcher label {
    flex: 1;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    color: #000;
    transition: color 0.3s ease;
}

.theme-switcher .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 33.333%;
    height: 100%;
    background: var(--service-card-bg);
    border-radius: 999px;
    transition: left 0.3s ease;
    z-index: 1;
}

input#theme-light:checked ~ .slider { left: 0%; }
input#theme-dark:checked ~ .slider { left: 33.333%; }
input#theme-auto:checked ~ .slider { left: 66.666%; }

input#theme-light:checked ~ label[for="theme-light"],
input#theme-dark:checked ~ label[for="theme-dark"],
input#theme-auto:checked ~ label[for="theme-auto"] {
    color: #fff;
}

    /* services grid (hover) */
.service-card {
    border: 2px solid var(--service-card-bg);
    border-radius: 1rem;
    padding: 2rem;
    transition: 1.4s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: var(--service-card-bg);
    height: 100%;
    min-height: 300px
}

.service-card:hover {
    border-color: var(--primary-red);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1);
    transform: translateY(-.5rem)
}

.service-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: 1.2s
}

.service-card:hover .service-icon {
    background: var(--primary-red);
    color: #fff
}

.service-card .service-icon i {
    color: var(--primary-red);
    transition: .8s
}

.service-card:hover .service-icon i {
    color: #fff
}

.service-short-desc {
    opacity: 1;
    max-height: 100px;
    transition: .6s
}

.service-card:hover .service-short-desc {
    opacity: 0;
    max-height: 0
}

.service-full-desc, .service-features, .service-button {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: 1.4s
}

.service-card:hover .service-full-desc, .service-card:hover .service-features, .service-card:hover .service-button {
    opacity: 1;
    max-height: 240px
}

.service-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: var(--primary-red);
    border-bottom-left-radius: 100%;
    opacity: 0;
    transition: .3s
}

.service-card:hover .service-accent {
    opacity: .1
}



/* about/why choose */
.about-image-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1)
}

.about-badge {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    background: #0f0f10;
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1)
}

.about-decorative {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
    background: var(--primary-red);
    border-radius: 1rem;
    z-index: -1
}

.feature-box {
    display: flex;
    align-items: start;
    gap: .75rem;
    padding: 1rem;
    border-radius: .5rem
}

.feature-box:hover {
    background: var(--service-card-bg);
}

.feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: #fee2e2;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

/* areas grid */
.area-card {
    border: 2px solid var(--border-gray);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: .3s;
    background: var(--service-card-bg);
}

.area-card:hover {
    border-color: var(--primary-red);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1)
}

.area-icon {
    width: 3rem;
    height: 3rem;
    background: var(--primary-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s
}

.area-card:hover .area-icon {
    transform: scale(1.1)
}

.response-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--area-badge-bg);
    padding: .5rem .75rem;
    border-radius: 9999px
}

.pulse-dot {
    width: .5rem;
    height: .5rem;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}

/* how it works */
.how-it-works-section {
    background: linear-gradient(135deg, #1f2937 0%, #000 100%);
    color: #fff;
    position: relative;
    overflow: hidden
}

.how-it-works-pattern {
    position: absolute;
    inset: 0;
    opacity: .05;
    background-image: radial-gradient(circle at 2px 2px, #fff 1px, transparent 0);
    background-size: 40px 40px
}

.step-circle {
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-hover) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(220, 38, 38, .5);
    position: relative;
    margin: 0 auto 1.5rem
}

.step-number {
    position: absolute;
    top: -.5rem;
    right: -.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-red);
    font-weight: 700
}

/* brand slider */
.brand-wall .brand-logo {
  height: 40px;
  max-width: 140px;
  object-fit: contain;
  opacity: .85;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.brand-wall .brand-logo:hover { filter: none; opacity: 1; transform: scale(1.02); }

.brand-slide {
  display:flex; align-items:center; justify-content:center;
  padding: 16px; height: 84px; /* keeps slides even */
}

.brand-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;              /* overall tile height */
  padding: 12px 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
}

/* All brand images scale inside the box */
.brand-cell .brand-logo {
  max-height: 44px;          /* controls visual size of logos */
  max-width: 100%;
  width: auto !important;    /* override any intrinsic width */
  height: auto !important;   /* override any intrinsic height */
  object-fit: contain;       /* for raster images; safe with SVG too */
  image-rendering: -webkit-optimize-contrast;
  opacity: .9;
  transition: filter .2s, opacity .2s, transform .2s;
}
.brand-cell .brand-logo:hover { filter: none; opacity: 1; transform: scale(1.02); }

/* Tidy spacing in sliders */
.brands-swiper .swiper-slide { display:flex; }
.brands-swiper .brand-cell { width: 100%; }

/* reviews */
.review-card {
    border: 2px solid var(--border-gray);
    border-radius: 1rem;
    padding: 1.5rem;
    background: var(--service-card-bg);
    transition: .3s;
    height: 100%
}

.review-card:hover {
    border-color: var(--primary-red)
}

.star-rating {
    color: #fbbf24
}

.service-badge {
    display: inline-block;
    background: #fee2e2;
    color: var(--primary-red);
    padding: .5rem .75rem;
    border-radius: 9999px;
    font-size: .875rem
}

/* footer */
.footer {
    background: #111827;
    color: #fff;
    padding: 3rem 0 1.5rem
}

.footer a {
    color: #9ca3af;
    text-decoration: none
}
.footer-text {
    color: #9ca3af;
}

.footer a:hover {
    color: var(--primary-red)
}

/* mobile offcanvas */
.mobile-menu {
    background: linear-gradient(180deg, #1f2937 0%, #000 100%);
    color: #fff;
    width: 85vw;
    max-width: 400px
}

.social-icons a {
  text-decoration: none;
  line-height: 1;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  background: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.social-icon i {
  font-size: var(--icon);
  line-height: 1;
}

.social-icons a:hover .social-icon,
.social-icons a:focus-visible .social-icon {
  background: var(--bs-danger); /* your red */
  border-color: var(--bs-danger);
  color: #fff;
  transform: translateY(-2px);
  outline: none;
}

/* Keyboard focus ring for accessibility */
.social-icons a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 999px;
}
.social-icons { --size: 32px; --icon: 16px; }


.cc-banner { z-index: 1080; }

.bg-alternative {
    background: var(--service-card-bg);
}

@media (min-width: 768px) {
    .hero-section {
        padding-top: 10rem;
        padding-bottom: 5rem
    }
    .brand-cell { height: 92px; }
    .brand-cell .brand-logo { max-height: 48px; }
    .social-icons { --size: 36px; --icon: 18px; }
}

@media (min-width: 992px) {
    .hero-section {
        padding-top: 10rem;
        padding-bottom: 4rem
    }
    .brand-cell { height: 100px; }
    .brand-cell .brand-logo { max-height: 52px; }
}