:root {
  --lime-grad: linear-gradient(135deg, #c2ed08 0%, #c2ed08 100%);
  --ztc-bg-bg-3: #c2ed08;      /* solid lime where a plain colour is needed (cursor dot) */
  --ztc-text-text-4: #5c7a00;  /* darker lime for accent text on white (menu/link hovers); lime itself is unreadable there */
}
/* lime fills */
.vl-btn1, .vl-btn2, .vl-btn3, .about1 .about-exp-box, .vl-services2-box:hover, .hero2-box,
.vl-faq-inner .vl-accordion-item, .process2-info-logo, .vl-offcanvas,
.vl-work3-items-box:hover, .vl-work3-items-box-icons .work3-minitop h5, .social_link li a:hover {
  background: var(--lime-grad);
}
/* brand strip under the hero: its navy comes from an inline background image */
.tp-text-slider.tp-text-bg-2 { background-image: var(--lime-grad) !important; }
.tp-text-slide-title { color: var(--ztc-text-text-5); }
.hero2-box { border: 2px solid var(--ztc-text-text-5); box-shadow: 0 18px 45px rgba(0, 51, 78, 0.35); } /* outline + shadow separate the lime help box from the lime strip it overlaps */
/* contact section on lime: navy text, divider and clock icons; icon circles turn navy on hover */
.vl-contact3-area .vl-service3-heading h2, .vl-contact3-area .vl-service3-heading h4,
.contact3-work_hour h3, .contact3-work_hour ul li a, .contact3-info-text h3, .contact3-info-text a {
  color: var(--ztc-text-text-5);
}
.vl-contact3-area .vl-service3-heading h4 { background: rgba(0, 51, 78, 0.08); }
.vl-contact3-area { background: linear-gradient(rgba(194, 237, 8, 0.15), rgba(194, 237, 8, 0.15)), #fff; } /* soft lime tint (lime at 15%) */
.contact3-info-logo span { box-shadow: 0 0 0 1px rgba(0, 51, 78, 0.12); } /* keeps the white icon circles visible on the pale tint */
.contact3-work_hour { border-bottom-color: var(--ztc-text-text-5); }
.contact3-info:hover span { background: var(--ztc-text-text-5); }
.contact3-info:hover span img { filter: brightness(0) invert(1); }
/* mobile menu on lime: navy text, outlines and close button */
.vl-offcanvas-info span a, .vl-offcanvas-sm-title, .vl-offcanvas-social a, .vl-offcanvas .vl-offcanvas-close button,
.vl-offcanvas-menu ul li a, .vl-offcanvas-menu ul li.active > a { color: var(--ztc-text-text-5); }
.vl-offcanvas-social a { border-color: var(--ztc-text-text-5); }
.vl-offcanvas-logo a { display: inline-block; background: var(--ztc-text-text-5); padding: 8px 14px; border-radius: 8px; } /* lime logo would blend into the lime menu */
/* navy text on lime: the template's white text would be unreadable */
.vl-btn1, .vl-btn2, .vl-btn3,
.about1 .about-exp-box h2, .about1 .about-exp-box p, .about1 .about-exp-box h3,
.vl-services2-box:hover h3, .vl-services2-box:hover .vl-services2-box-top-text h3 a, .vl-services2-box:hover p,
.hero2-box-content h3, .hero2-box-content p, .hero2-box-phn-num h4, .hero2-box-phn-num a,
.vl-faq-inner .vl-accordion-item, .vl-faq-inner .vl-accordion-item .accordion-button:not(.collapsed),
.vl-faq-inner .vl-accordion-item .accordion-button:not(.collapsed) span.vl-faqarrow-3,
.vl-faq-inner .vl-accordion-item .accordion-body .para:not(.collapsed),
.process2-info-logo .process2-info-logo-num,
.vl-work3-items-box:hover .vl-work3-items-box-content h4 a, .vl-work3-items-box:hover .vl-work3-items-box-content p,
.vl-work3-items-box-icons .work3-minitop h5, .vl-work3-items-box:hover .work3-minitop h5 {
  color: var(--ztc-text-text-5);
}
/* icons that the template turned white on blue stay dark on lime */
.vl-work3-items-box:hover .work3-icons img { filter: brightness(0) invert(0); }
.vl-btn3 img { filter: brightness(0); }        /* white phone icon -> dark on lime */
.vl-btn3:hover img { filter: none; }           /* back to white on the dark hover fill */
/* Landing page: the same space above and below every section (60px, 40px on tablets and phones).
   Products, Services and FAQs subtract the bottom margin their last row of cards/questions already adds. */
#about, #why-us, #products, #process, #services, #reviews, #faq, #contact { padding: 60px 0; }
#products, #services { padding-bottom: 30px; }
#faq { padding-bottom: 40px; }
@media (max-width: 991px) {
  #about, #why-us, #products, #process, #services, #reviews, #faq, #contact { padding: 40px 0; }
  #products, #services { padding-bottom: 10px; }
  #faq { padding-bottom: 20px; }
}
/* Landing page: hero image is a <picture> with srcset (WebP sizes + JPEG fallback) behind the hero content.
   Cropped like the old background: left side on phones/tablets, centred from 992px up. */
.vl-hero2-area { isolation: isolate; }
.landing-hero-media { position: absolute; inset: 0; z-index: -1; }
.landing-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
/* Parallax in pure CSS (scroll-driven animation): the image drifts down at 0.55x the scroll distance, matching the
   old parallaxie plugin. Desktop only, as before; browsers without scroll-driven animations show a still hero. */
@keyframes landing-hero-parallax { to { transform: translateY(110vh); } }
@media (min-width: 992px) {
  .landing-hero-media img { object-position: center; }
  @supports (animation-timeline: scroll()) {
    .landing-hero-media img {
      will-change: transform;
      animation: landing-hero-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 200vh;
    }
  }
}
/* Landing page: inline SVG icons, sized and aligned like the Font Awesome font icons they replace */
.icon { display: inline-block; height: 1em; width: auto; overflow: visible; vertical-align: -0.125em; fill: currentColor; }
/* the template styled these icons through `i` selectors */
.vl-btn1 .icon, .vl-btn2 .icon { margin-left: 4px; transform: rotate(-45deg); transition: all 0.4s; }
.vl-btn1:hover .icon, .vl-btn2:hover .icon { transform: rotate(0); }
.star_icon ul li .icon { color: var(--ztc-text-text-8); }
.vl-offcanvas-info span a .icon { margin: 0 4px 0 0; }
.social_link li a .icon { color: var(--ztc-text-text-5); transition: all 0.4s; }
.social_link li a:hover .icon { color: var(--ztc-text-text-5); } /* navy icon on the lime hover circle */
/* Yellow Pages logo fills its round social button (footer and mobile menu) */
.social_link li a.social-yp, .vl-offcanvas-social a.social-yp { overflow: hidden; background: #f7f01e !important; display: inline-flex; align-items: center; justify-content: center; } /* the logo's own yellow, kept on hover */
.social_link li a, .vl-offcanvas-social a { vertical-align: top; } /* keeps the image badge level with the icon buttons */
/* footer bottom line: copyright on the left, "Powered by" on the right; stacked and centred on phones */
.footer1-copyright-area { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
@media (max-width: 767px) {
  .footer1-copyright-area { flex-direction: column; text-align: center; }
}
/* copyright paragraph styled like the template's copyright link */
.footer1-copyright-area p { color: var(--ztc-text-text-6); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium); line-height: 18px; margin: 0; }
@media (max-width: 575px) {
  .footer1-copyright-area p { font-size: 16px; }
}
.social_link li a.social-yp img, .vl-offcanvas-social a.social-yp img { display: block; width: 68%; height: 68%; object-fit: contain; }
/* back-to-top arrow: main.css drew it with the icon font; same arrow-up shape as an SVG mask */
.progress-wrap::before, .progress-wrap::after {
  content: "";
  background-color: var(--ztc-text-text-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E") center / 13.5px 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E") center / 13.5px 18px no-repeat;
}
/* Landing page: seven anchor links need slightly tighter spacing on mid-size desktops */
@media (min-width: 1200px) and (max-width: 1399px) {
  .homepage1-body .vl-main-menu ul > li > a { padding: 0 12px; }
}
/* Landing page: service names at 17px; four across, each name reserves two lines so the icons stay level if one wraps */
#services .vl-service1-box-info-content h2 a { font-size: 17px; line-height: 24px; }
@media (min-width: 1200px) {
  #services .vl-service1-box-info-content h2 { min-height: 48px; }
}
/* Landing page: shorter service cards (template default is 450px) */
#services .vl-blog2-box-thumb-img img { height: 380px; }
/* Landing page: About image column matches the text column's height when they sit side by side;
   the experience box and small photo keep their size and the large photo fills the rest */
@media (min-width: 1200px) {
  .landing-about-row { align-items: stretch !important; }
  .landing-about-media { display: flex; flex-direction: column; }
  .landing-about-media-inner { flex: 1; display: flex; flex-direction: column; }
  .landing-about-lrg { flex: 1 1 0; min-height: 250px; display: flex; }
  .landing-about-lrg .about1-lrg-banner { flex: 1; }
  .landing-about-lrg .about1-lrg-banner img { height: 100%; }
}
/* Landing page: Arkemi logo (logo.png, 249x62). Header at 150px matches the template logo height */
.homepage1-body .vl-transparent-header .vl-logo img { width: 150px; height: auto; }
.vl-offcanvas-logo img, .footer-area-logo img { width: 160px; height: auto; }
/* Landing page: round icon badge on each service card */
.landing-service-icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lime-grad); color: var(--ztc-text-text-5); font-size: 26px;
}
/* Landing page: product cards in a row share one height, with images lined up along the bottom */
#products .vl-services2-box { display: flex; flex-direction: column; height: calc(100% - 30px); }
#products .vl-services2-box p { flex-grow: 1; }
/* Landing page: testimonial cards share one height; the divider and reviewer line up along the bottom */
.testimonials3 .swiper-slide { height: auto; }
/* Landing page: the two sliders run without Swiper (its stylesheet and script are no longer loaded) */
.swiper { position: relative; overflow: hidden; }
.swiper-wrapper { display: flex; }
.swiper-slide { flex-shrink: 0; }
.testimonials3 { touch-action: pan-y; } /* vertical page scrolling still works over the slider; sideways swipes go to main.js */
/* brand strip: Swiper moved one name every 4s non-stop, so the 6 names (shown twice) take 24s per lap */
.tpcauses-text-slider-active .swiper-wrapper { width: max-content; animation: landing-marquee 24s linear infinite; }
.tpcauses-text-slider-active .swiper-slide { margin-right: 40px; }
@keyframes landing-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tpcauses-text-slider-active .swiper-wrapper { animation: none; }
}
.testimonials3 .vl-testimonials3-box { height: 100%; display: flex; flex-direction: column; }
.testimonials3 .vl-testimonials3-box .testimonial3-text { flex-grow: 1; }
/* Landing page: keep longer FAQ questions clear of the arrow icon */
.vl-faq-inner .vl-accordion-item .accordion-button { padding-right: 85px; line-height: 28px; }
@media (min-width: 992px) and (max-width: 1199px) {
  .vl-faq-inner .vl-accordion-item .accordion-button { padding-right: 55px; }
}
@media (max-width: 575px) {
  .vl-faq-inner .vl-accordion-item .accordion-button { padding-right: 50px; }
}
/* Landing page: plain-text <a> tags (no link) keep the template colour; Bootstrap would make them inherit a dark one */
.contact3-work_hour ul li a:not([href]),
.contact3-info-text a:not([href]),
.vl-offcanvas-info span a:not([href]) { color: var(--ztc-text-text-5); }
.footer-widget-contact ul li a:not([href]) { color: var(--ztc-text-text-6); }
.vl-work3-items-box-content h4 a:not([href]),
.process2-box-content .process2_boxtitle a:not([href]),
.vl-services2-box-top-text h3 a:not([href]) { color: var(--ztc-text-text-5); }
/* Landing page: footer contact rows keep wrapped text indented past the icon */
.footer-widget-contact ul li.landing-contact-row { display: flex; align-items: flex-start; }
.footer-widget-contact ul li.landing-contact-row svg { flex-shrink: 0; margin-right: 8px; }
.footer-widget-contact ul li.landing-contact-row span { min-width: 0; }
.footer-widget-contact ul li.landing-contact-row a { line-height: 24px; overflow-wrap: anywhere; }
/* Landing page: line up the opening times under each other */
.contact3-work_hour ul li:first-child { min-width: 175px; }
/* Landing page: map takes the contact form's place */
.contact3-map { border-radius: 8px; overflow: hidden; }
.contact3-map iframe { display: block; width: 100%; height: 600px; border: 0; }
@media (max-width: 991px) {
  .contact3-map { margin-top: 40px; }
  .contact3-map iframe { height: 420px; }
}

.vl-services2-icon-shape .wht-shape, .vl-services2-icon-shape .blue-shape { height: auto; } /* still 70px wide */
.project2-icon-shape img { width: auto; } /* still 130px tall */