/* Codors Brand Color Override */
:root {
  --theme-color1: #fff200;
  --theme-color1-rgb: 255, 242, 0;
  --bg-theme-color1: #fff200;
  --link-color: #fff200;
}

/* Floating action buttons (WhatsApp + Phone) */
.floating-actions {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9998;
}
.floating-actions a {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.floating-actions a:hover {
  color: #fff;
  transform: scale(1.12);
  text-decoration: none;
}
.whatsapp-float {
  background-color: #25D366;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
}
.whatsapp-float:hover {
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.65);
}
.phone-float {
  background-color: #fff200;
}
.phone-float i { color: #000; }
.phone-float:hover {
  box-shadow: 0 6px 24px rgba(255, 242, 0, 0.55);
}
.phone-float:hover i { color: #000; }

/* Form inputs: white typed text + yellow border on focus */
.form-control,
.input-text { color: #fff !important; }

.form-control:focus,
.input-text:focus {
  border: 1px solid #fff200 !important;
  box-shadow: 0 0 0 3px rgba(255, 242, 0, 0.15) !important;
  color: #fff !important;
  outline: none !important;
}

/* Black text on yellow-background elements (blog tags, sidebar tags, active category) */
.blog-details__tags a,
.sidebar__tags-list a,
.sidebar__category-list li.active a { color: #000 !important; }

/* Override all orange (#FF6B1E) instances to Codors Yellow (#fff200) */
.btn-style-one,
.btn-style-one .btn-arrow-left img,
.btn-style-one .btn-arrow-right img { filter: none; }

.btn-style-one,
.btn-style-one .btn-title,
.btn-style-one span {
  background-color: #fff200;
  color: #000 !important;
  border-color: #fff200;
}
.btn-style-one:hover,
.btn-style-one:hover .btn-title,
.btn-style-one:hover span {
  background-color: #e6d900;
  border-color: #e6d900;
  color: #000 !important;
}

/* Arrow links */
.arrow-link svg path { stroke: #fff200 !important; }
.arrow-link:hover { color: #fff200; }

/* Service blocks */
.service-block-one .inner-block .dot { background-color: #fff200; }
.service-block-one .inner-block:hover { border-color: #fff200; }
.service-block-one .inner-block .number { color: #fff200; }

/* Section title accent */
.sec-title .sub-title { color: #fff200; }
.sec-title h2 span { color: #fff200; }
.title span { color: #fff200; }

/* Feature blocks */
.feature-block .inner-block .border-line { background-color: #fff200; }
.feature-block .inner-block:hover { border-color: #fff200; }
.feature-block .inner-block:hover .title { color: #fff200; }

/* Hero underline SVG color */
.hero-section .line-ani svg path { fill: #fff200; }

/* Preloader */
.preloader-ball { background-color: #fff200; }

/* Back to top */
#back-top { background-color: #fff200; color: #000; }
#back-top:hover { background-color: #e6d900; }

/* Work process steps */
.working-block-one .inner-block .step { color: #fff200; }
.working-block-one .inner-block.active { border-color: #fff200; }
.working-block-one .inner-block.active .step { color: #fff200; }

/* Testimonial stars */
.testimonial-block-one .inner-box .star i { color: #fff200; }

/* Count boxes */
.count-box { color: #fff200; }

/* Footer links hover */
.footer-widget-items .user-links li a:hover { color: #fff200; }
.footer-content .title span { color: #fff200; }

/* Contact btn color */
a.contact-btn,
a.contact-btn:visited {
  background-color: #fff200;
  color: #000 !important;
  border-color: #fff200;
  font-weight: 700;
}
a.contact-btn:hover { background-color: #e6d900; color: #000 !important; }

/* Any element with yellow bg must have black text */
[style*="background:#fff200"],
[style*="background-color:#fff200"],
[style*="background: #fff200"],
[style*="background-color: #fff200"] {
  color: #000 !important;
}

/* Explicitly black text for all button variants */
.btn-style-one *,
.contact-btn * {
  color: #000 !important;
}

/* FAQ icon */
.faq-block-one .title-box .icon { color: #fff200; }
.faq-block-one.active .title-box .icon { background-color: #fff200; color: #000; }

/* Team social hover */
.team-block .inner-block .social-icon a:hover { background-color: #fff200; color: #000; }

/* Gradient backgrounds using theme color */
.bg-theme-color { background-color: #fff200 !important; color: #000; }
.bg-theme-color .title,
.bg-theme-color .text,
.bg-theme-color h4,
.bg-theme-color p,
.bg-theme-color span { color: #000 !important; }

/* Marquee — yellow strip: black text + black stars for contrast */
.marquee-area2 .marquee-section.style-2 .text { color: #000 !important; }
.marquee-area2 .marquee-section.style-2 .text img { filter: none !important; }

/* Marquee — dark strip: yellow text */
.marquee-area2 .marquee-section.style-3 .text { color: #fff200; }

/* Mobile menu social */
.mobile-menu .social-links a:hover { background-color: #fff200; color: #000; }

/* Brand logo section hover */
.brand-box-1:hover img { filter: brightness(0) invert(0); }

/* Choose client info */
.choose-client-info .info-content p { color: #fff200; }

/* Counter section */
.choose-counter h3, .about-thumb-items .content h3 { color: #fff200; }

/* Logo adjustments for white SVG */
.logo img, .footer-logo img, .nav-logo img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

/* Codors logo specific - it's SVG, make sure it shows */
.logo img[src*="codors-logo"] {
  max-height: 45px;
  filter: none;
}

/* Smooth scroll wrapper */
#smooth-wrapper { overflow: hidden; }

/* Custom cursor color */
.mouseCursor.cursor-inner { background-color: #fff200; }
.mouseCursor.cursor-outer { border-color: #fff200; }

/* =====================================================
   Convert orange icon PNGs to Codors yellow (#fff200)
   using CSS filter chain: black → white → sepia → yellow
   ===================================================== */
.feature-block .inner-block .icon img,
.service-block-one .inner-block .content-box .icon img,
.feature-box .inner-box .icon img,
.testimonial-wrapper .circle-box .icon img,
img[src*="icon-1-"],
img[src*="service-icon-1-"],
img[src*="choose-us-icon"],
img[src*="quote-icon-1-"],
img[src*="right-arrow-1-1.png"],
img[src*="ball.png"] {
  filter: brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(900%) hue-rotate(358deg) brightness(108%) !important;
}

/* Star/sparkle icons inside all subtitle labels — structural selector
   is more reliable than src-matching for these */
img[src*="star.png"],
.sub-title img,
.tx-subTitle img,
span.sub-title img {
  filter: brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(900%) hue-rotate(358deg) brightness(108%) !important;
  color: #fff200 !important;
}

/* Hero 3D ribbon objects — hue-rotate shifts orange→yellow
   while keeping the white/gray stripes intact */
img[src*="hero-object-1-"] {
  filter: hue-rotate(38deg) saturate(1.2) !important;
}

/* Page title hero gradient */
.page-title::before {
  background: linear-gradient(179deg, rgba(41, 41, 41, 0.6) 19.26%, rgba(255, 242, 0, 0.45) 97.47%) !important;
}

/* Override all hardcoded orange gradients to Codors yellow */
.choose-us-image-1::before {
  background: linear-gradient(180deg, rgba(13, 13, 13, 0) 46.43%, #fff200 100%) !important;
}
.team-block .inner-block:hover .image-block::before {
  background: linear-gradient(360deg, #fff200 11.41%, rgba(0, 0, 0, 0) 100%) !important;
}
.video-image::before {
  background: linear-gradient(180deg, rgba(0, 0, 71, 0) 19.26%, #fff200 97.47%) !important;
}
.hero-2 .hero-content .hero-title span {
  background: linear-gradient(180deg, #ffffff 0%, #fff200 100%) !important;
}

/* Text contrast fix: yellow backgrounds need black text */
.team-block .inner-block:hover .image-block::before,
.feature-box-style2.bg-theme-color .content .title,
.feature-box-style2.bg-theme-color .content .text {
  color: #000 !important;
}

/* Form focus */
.form-clt input:focus,
.form-clt textarea:focus {
  border-color: #fff200;
  outline: none;
}

/* =====================================================
   Replace all orange light-shape PNG images with
   CSS yellow radial gradient glows
   ===================================================== */

/* Hide the orange PNG inside every light-shape container */
.light-shape-1 img,
.light-shape-2 img,
.testi-light-shape-1 img,
.faq-light-shape img,
.faq-shape img,
.feature-section .light-shape-1 img { display: none; }

/* CSS glow replacement — each container gets a yellow blob via ::after */
.light-shape-1::after,
.light-shape-2::after,
.testi-light-shape-1::after,
.faq-light-shape::after,
.feature-section .light-shape-1::after {
  content: '';
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 242, 0, 0.22) 0%, rgba(255, 242, 0, 0) 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* Per-element size tuning to match original PNG dimensions */
.about-section .light-shape-1::after {
  width: 750px;
  height: 750px;
}
.about-section .light-shape-2::after {
  width: 700px;
  height: 700px;
}
.testi-light-shape-1::after {
  width: 650px;
  height: 650px;
}
.faq-section .faq-light-shape::after {
  width: 600px;
  height: 600px;
}
.feature-section .light-shape-1::after {
  width: 650px;
  height: 650px;
}

/* Work process accordion active card: yellow bg → black text */
.hzAccordion-section .options .option.active .label .info .cont .count,
.hzAccordion-section .options .option.active .label .info .cont .count span,
.hzAccordion-section .options .option.active .label .info .cont .sub-title,
.hzAccordion-section .options .option.active .label .info .cont .text { color: #000 !important; }

/* lg-count large number: replace orange with Codors yellow */
.hzAccordion-section .options .option .label .info .lg-count {
  color: rgba(133, 127, 7, 0.9) !important;
}

/* Work process section 3 light shape */
.work-process-section-3 .light-shape img { display: none; }
.work-process-section-3 .light-shape::after {
  content: '';
  display: block;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 242, 0, 0.18) 0%, rgba(255, 242, 0, 0) 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* Testimonial section 3 light shapes */
.testimonial-light1 img,
.testimonial-light2 img { display: none; }

.testimonial-light1::after,
.testimonial-light2::after {
  content: '';
  display: block;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 242, 0, 0.18) 0%, rgba(255, 242, 0, 0) 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* Newsletter subscribe button */
.footer-content .form-group .circle-btn {
  background-color: #fff200;
  color: #000;
}

/* Service details help box — black text on yellow background */
.service-details-help .help-title,
.service-details-help .help-contact p,
.service-details-help .help-contact a {
  color: #000 !important;
}

/* "What We Offer" checklist items on service detail pages */
.services-details__content .about-list-items ul {
  padding-left: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.services-details__content .about-list-items ul li {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid #fff200;
  border-radius: 4px;
}

.services-details__content .about-list-items ul li i {
  color: #fff200;
  font-size: 18px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .services-details__content .about-list-items ul {
    grid-template-columns: 1fr;
  }
}