/*
 * Custom Logo Valley — brand palette only:
 *   #A6263E  accent
 *   #0C0D0D  dark
 *   #F2F2F2  light
 * Loads after legacy CSS; uses variables + targeted overrides.
 */

:root {
  --white: #f2f2f2;
  --black: #0c0d0d;
  --primary: #a6263e;
  --secondary: #a6263e;
  /* Legacy typo in custom.min6354 (form focus) */
  --secondar: #a6263e;
  --clv-accent: #a6263e;
  --clv-dark: #0c0d0d;
  --clv-light: #f2f2f2;
  --bs-primary: #a6263e;
  --bs-primary-rgb: 166, 38, 62;
  --bs-body-bg: #0c0d0d;
  --bs-body-color: #f2f2f2;
  --bs-link-color: #a6263e;
  --bs-link-hover-color: #f2f2f2;
}

body {
  color: #f2f2f2;
  background-color: #0c0d0d !important;
  background: #0c0d0d !important;
}

.preLoader {
  background-color: #0c0d0d !important;
  background: #0c0d0d !important;
}

/* Scrollbar (legacy used teal) */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(12, 13, 13, 0.85);
  background: #0c0d0d;
}
::-webkit-scrollbar {
  background: #0c0d0d;
}
::-webkit-scrollbar-thumb {
  background-color: #a6263e;
  background-image: linear-gradient(
    90deg,
    transparent,
    #a6263e,
    #0c0d0d,
    transparent
  );
}

/* Legacy sets p { color: #fff }; map to light brand tint */
p {
  color: #f2f2f2;
}

.talkBtn span,
#add-to-top:hover::after {
  color: #f2f2f2 !important;
}

#add-to-top::after {
  color: #0c0d0d !important;
}
#add-to-top:hover {
  background-color: #a6263e !important;
}
#add-to-top:hover::after {
  color: #f2f2f2 !important;
}
#add-to-top:active {
  background-color: #a6263e !important;
}

.menubtn {
  background-color: rgba(12, 13, 13, 0.55) !important;
}

.hero-shade {
  background-image: linear-gradient(transparent, #0c0d0d 90%) !important;
}

.heroTxt h1 span::before {
  background: #f2f2f2 !important;
}

.serviceTop {
  border-top-color: rgba(242, 242, 242, 0.18) !important;
  border-bottom-color: rgba(242, 242, 242, 0.18) !important;
  background-color: #0c0d0d !important;
}

.serviceTop .imgBox {
  outline-color: rgba(242, 242, 242, 0.18) !important;
  background-color: #0c0d0d !important;
}

.packagesCard::before {
  background: radial-gradient(
    150% 150% at 3% -25%,
    rgba(166, 38, 62, 0.55) 0%,
    rgba(12, 13, 13, 0) 100%
  ) !important;
}

.packagesCard:hover::before {
  background-color: #f2f2f2 !important;
}

.packagesCard:hover ul li::before {
  color: #a6263e !important;
}

.swiper-button-next::before,
.swiper-button-prev::before {
  background-color: #0c0d0d !important;
}

.faqSection::before,
.portfolioSection::before,
.testimonialSection::before {
  background-color: #f2f2f2 !important;
}

.brandingSection::before {
  background-color: #f2f2f2 !important;
}

.brandingSection p {
  color: #0c0d0d !important;
}

.contactSection::before {
  background-color: rgba(166, 38, 62, 0.08) !important;
}

.blurTop {
  background-image: linear-gradient(
    #f2f2f2 10%,
    transparent 30%,
    transparent 70%,
    #f2f2f2 90%
  ) !important;
}

.testimonialItem p {
  color: #0c0d0d !important;
}

.contactForm .form-control {
  background-color: #0c0d0d !important;
  color: #f2f2f2 !important;
  border: 1px solid rgba(242, 242, 242, 0.12) !important;
}

.copyRight p,
.copyRight p a {
  color: rgba(242, 242, 242, 0.68) !important;
}

.copyRight {
  border-top-color: rgba(242, 242, 242, 0.2) !important;
}

.footer-form input {
  background-color: rgba(242, 242, 242, 0.12) !important;
  color: #f2f2f2 !important;
}

.footer-form input.form-control:focus {
  background: #0c0d0d !important;
}

.footer-form .green-btn {
  background-color: #0c0d0d !important;
  color: #f2f2f2 !important;
  border: 1px solid rgba(242, 242, 242, 0.2) !important;
}

.footer-form .green-btn:hover {
  background: #a6263e !important;
}

.clientLogoSlider::before {
  background: linear-gradient(
    90deg,
    #0c0d0d 30%,
    rgba(12, 13, 13, 0) 100%
  ) !important;
}

.clientLogoSlider::after {
  background: linear-gradient(
    -90deg,
    #0c0d0d 30%,
    rgba(12, 13, 13, 0) 100%
  ) !important;
}

.serviceCard {
  background: #0c0d0d !important;
}

.serviceCard::before {
  background: linear-gradient(0deg, #0c0d0d 0%, #0c0d0d 100%) !important;
}

.inner .serviceCard {
  border-color: rgba(242, 242, 242, 0.15) !important;
}

.serviceCard:hover::before {
  background: linear-gradient(
    0deg,
    #a6263e 0%,
    #0c0d0d 100%
  ) !important;
}

.serviceCard:hover {
  background-color: #0c0d0d !important;
}

.accordion .btn.collapsed {
  background-color: rgba(242, 242, 242, 0.92) !important;
  color: #0c0d0d !important;
}

.aboutPage::after {
  background-color: rgba(166, 38, 62, 0.12) !important;
}

.aboutPage .showcase h2 {
  background: linear-gradient(0deg, #0c0d0d, #a6263e) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.industryCard .iconBox {
  background-color: #0c0d0d !important;
  border: 1px solid rgba(242, 242, 242, 0.15);
}

.industryCard h2 {
  color: #f2f2f2 !important;
}

.industryCard p {
  color: rgba(242, 242, 242, 0.72) !important;
}

.difference .cardheader {
  background-color: #0c0d0d !important;
}

.difference li i {
  color: #a6263e !important;
}

.industrySection::before {
  background-color: rgba(166, 38, 62, 0.12) !important;
}

.graphBox {
  background: linear-gradient(#0c0d0d, #0c0d0d),
    linear-gradient(0deg, #a6263e 0%, #0c0d0d 100%) !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
}

.floatingform-sec .outer-show span.icoo {
  color: #a6263e !important;
  background: #f2f2f2 !important;
  border-right-color: rgba(12, 13, 13, 0.12) !important;
}

.floatingform-sec .banner-form {
  background: #0c0d0d !important;
  border-color: rgba(242, 242, 242, 0.35) !important;
}

.ban-form input,
.ban-form textarea {
  border-color: rgba(242, 242, 242, 0.25) !important;
  color: #f2f2f2 !important;
}

.floatbutton .buttonclick {
  background: #f2f2f2 !important;
}

.floatbutton .buttonclick .crossplus p,
.floating_wrap .btns_wrap .chat_wrap span.icoo {
  background: linear-gradient(
    120deg,
    rgba(166, 38, 62, 0) 0%,
    #0c0d0d 100%
  ) !important;
  background-color: #a6263e !important;
  color: #f2f2f2 !important;
}

.floating_wrap .btns_wrap .call_wrap span.icoo {
  background: linear-gradient(
    120deg,
    rgba(166, 38, 62, 0) 0%,
    #0c0d0d 100%
  ) !important;
  background-color: #a6263e !important;
  color: #f2f2f2 !important;
}

.floating_wrap .btns_wrap .call_wrap span,
.floating_wrap .btns_wrap .chat_wrap span {
  color: #a6263e !important;
}

.crossplus p a:hover {
  color: #f2f2f2 !important;
}

.dropdown-content {
  background-color: #f2f2f2 !important;
}

.dropdown-content .nav__list-item a:hover {
  background-color: rgba(166, 38, 62, 0.12) !important;
}

div#GetAQuote .modal-content {
  background: #0c0d0d !important;
  border: 1px solid rgba(242, 242, 242, 0.12);
}

/* Modal popup form (form2) — white fields, black text */
div#GetAQuote input,
div#GetAQuote textarea {
  background-color: #ffffff !important;
  color: #0c0d0d !important;
  border: 1px solid rgba(12, 13, 13, 0.18) !important;
  border-radius: 6px !important;
}

div#GetAQuote input::placeholder,
div#GetAQuote textarea::placeholder {
  color: rgba(12, 13, 13, 0.45) !important;
  opacity: 1 !important;
}

div#GetAQuote input:focus,
div#GetAQuote textarea:focus {
  background-color: #ffffff !important;
  color: #0c0d0d !important;
  border-color: rgba(12, 13, 13, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(12, 13, 13, 0.1) !important;
  outline: none !important;
}

/* Phone field (intl-tel-input) ─────────────────────────────────────────────
   Structure: <div class="r3 form-control">  ← outer div (must be invisible)
                <div class="iti">            ← injected by intl-tel-input
                  <input class="phone iti__tel-input">
                </div>
              </div>
   The outer div has Bootstrap .form-control styles (border, bg, padding).
   We strip those and let the .iti wrapper be the visible field instead.
   -------------------------------------------------------------------------- */

/* 1. Strip all visual styling from the outer wrapper div */
div#GetAQuote .r3.form-control,
.inquiry-form .r3.form-control {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* 2. Make the .iti container the visible white field */
div#GetAQuote .iti,
.inquiry-form .iti {
  display: block !important;
  width: 100% !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(12, 13, 13, 0.18) !important;
  border-radius: 6px !important;
  overflow: hidden;
}

/* 3. Focus ring on the wrapper when the inner input is focused */
div#GetAQuote .iti:focus-within,
.inquiry-form .iti:focus-within {
  border-color: rgba(12, 13, 13, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(12, 13, 13, 0.1) !important;
}

/* 4. The actual tel input — transparent bg, fills the .iti box */
div#GetAQuote input.phone.iti__tel-input,
.inquiry-form input.phone.iti__tel-input {
  background: transparent !important;
  color: #0c0d0d !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  height: 2.75rem !important;
  border-radius: 0 !important;
}

div#GetAQuote input.phone.iti__tel-input::placeholder,
.inquiry-form input.phone.iti__tel-input::placeholder {
  color: rgba(12, 13, 13, 0.45) !important;
  opacity: 1 !important;
}

form.myform button#submit:hover {
  color: #0c0d0d !important;
  background: #f2f2f2 !important;
}

.logo-marquee-slider .marquee span {
  color: #0c0d0d !important;
}

.logo-marquee-slider .slider-left-right:hover .marquee span,
.logo-marquee-slider .slider-right-left .marquee span,
.logo-marquee-slider .slider-right-left:hover .marquee span {
  color: #f2f2f2 !important;
}

.inquiry-form {
  background-color: #a6263e !important;
  box-shadow: 0 0 30px 0 rgba(12, 13, 13, 0.35) !important;
}

/* Fields — white background, black text */
.inquiry-form .form-control,
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  background-color: #ffffff !important;
  color: #0c0d0d !important;
  border: 1px solid rgba(12, 13, 13, 0.15) !important;
  border-radius: 6px !important;
}

/* Placeholder text — softer black so it reads as a hint */
.inquiry-form .form-control::placeholder,
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder {
  color: rgba(12, 13, 13, 0.45) !important;
  opacity: 1 !important;
}

/* Select option text (browser-rendered) */
.inquiry-form select option {
  background-color: #ffffff !important;
  color: #0c0d0d !important;
}

/* Focus ring — subtle dark outline instead of the default blue */
.inquiry-form .form-control:focus,
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  background-color: #ffffff !important;
  color: #0c0d0d !important;
  border-color: rgba(12, 13, 13, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(12, 13, 13, 0.12) !important;
  outline: none !important;
}

/* Phone field wrapper (.input-group containing the iti widget) — handled above */

/* Button — keep black */
.inquiry-form button {
  background: #0c0d0d !important;
  color: #f2f2f2 !important;
}

.inquiry-form button:hover {
  background: #0c0d0d !important;
  filter: brightness(1.18);
}

.portfolio {
  background-color: #0c0d0d !important;
}

.portfolio-box::before {
  background-color: rgba(12, 13, 13, 0.72) !important;
}

.portfolio-box::after {
  background-color: rgba(166, 38, 62, 0.45) !important;
}

.christmas-heading P span {
  color: #a6263e !important;
}

footer::before {
  background-color: rgba(166, 38, 62, 0.1) !important;
}

.themeBtn:hover {
  background: #0c0d0d !important;
  color: #f2f2f2 !important;
}

.talkBtn:hover {
  color: #0c0d0d !important;
}

.nav:after {
  background-color: #0c0d0d !important;
  background-image: linear-gradient(
    180deg,
    #0c0d0d 0%,
    #0c0d0d 55%,
    rgba(166, 38, 62, 0.2) 100%
  ) !important;
}

body.nav-active .nav:after {
  background-image: linear-gradient(
    180deg,
    #0c0d0d 0%,
    #0c0d0d 60%,
    rgba(166, 38, 62, 0.15) 100%
  ) !important;
  background-color: #0c0d0d !important;
}

.nav__list-item {
  border-bottom-color: rgba(242, 242, 242, 0.35) !important;
}

/* Legal / policy pages */
.policy-inner h3,
.terms-inner h1,
.terms-inner h3 {
  color: #f2f2f2 !important;
}

ul.list-unstyled li,
.term-text ul li,
.policy-inner ol li,
.term-text ol li {
  color: #f2f2f2 !important;
}

/*
 * Process section: graph.png is legacy teal/green artwork behind the SVG.
 * Hide it and paint a soft glow using only the brand palette.
 */
.processSection .graph .overlay {
  position: relative;
}

.processSection .graph .overlay > .inner > img.img-fluid[src*="graph.png"] {
  opacity: 0 !important;
}

.processSection .graph .overlay::before {
  content: "";
  position: absolute;
  inset: -6% -10% -10% -10%;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 92% 80% at 74% 86%,
      rgba(166, 38, 62, 0.48) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 74% 58% at 26% 78%,
      rgba(166, 38, 62, 0.24) 0%,
      transparent 52%
    ),
    radial-gradient(
      ellipse 118% 92% at 48% 100%,
      rgba(12, 13, 13, 0.94) 0%,
      transparent 64%
    );
}

.processSection .graph .overlay svg {
  position: relative;
  z-index: 1;
}

/* Nodes + connectors */
.processSection .cls-3 {
  fill: #a6263e !important;
}

.processSection svg .cls-2 {
  stroke: #f2f2f2 !important;
  fill: #f2f2f2 !important;
}

/* Main curve: solid brand red (overrides SVG gradient / old green stroke) */
.processSection path.myline,
.processSection .myline {
  stroke: #a6263e !important;
}

.processSection svg .cls-1 {
  stroke: #a6263e !important;
}

.processSection .g-heading {
  color: #f2f2f2 !important;
}

/* Mobile: active service card gradient */
@media (max-width: 575.98px) {
  .servicesSlider .swiper-slide-active .serviceCard::before {
    background: linear-gradient(
      0deg,
      #a6263e 0%,
      #0c0d0d 100%
    ) !important;
  }
}

.portfolio-wrapper-grid-outer ul li a.active,
.portfolio-wrapper-grid-outer ul li a:hover {
  color: #0c0d0d !important;
}

footer .copyRight a[href="/"],
footer .copyRight a[href="/"]:visited {
  color: rgba(242, 242, 242, 0.72) !important;
}

footer .copyRight a[href="/"]:hover {
  color: #a6263e !important;
}