/* SAFETYTECH adaptations: retain the Securix typography, colors and components. */
/* Brand palette: the template's dark teal (#042327) becomes a deep navy in the brand-blue hue,
   and the logo orange colours the small section labels, the hero tagline and hovered buttons. */
:root { --ztc-text-text-3: #083149; --ztc-text-text-5: rgba(8, 49, 73, 0.1); --safetytech-orange: #DF7C32; }
.heading2 .section-label, .others-inner-section-area .other-content-area .section-label,
.hero1-section-area .hero-main-area .others-area p, .hero1-section-area .hero-main-area .others-area .img1 i { color: var(--safetytech-orange); }
/* Section labels (the small tag above a section heading) are text, not headings, so headings run in order (h1, h2, h3).
   They keep the template's h5 label styling. Footer column titles are h2s styled like the template's h4s. */
.heading1 .section-label, .heading2 .section-label { display: inline-block; position: relative; z-index: 1; margin-bottom: 16px; padding: 8px; border-radius: 4px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); transition: all 0.4s; }
.heading1 .section-label { color: var(--ztc-text-text-1); background: var(--ztc-bg-bg-4); }
.heading2 .section-label { background: var(--ztc-bg-bg-5); }
.others-inner-section-area .other-content-area .section-label { background: rgba(255, 255, 255, 0.1); }
.heading1 .section-label img, .heading2 .section-label img { margin: 0 6px 0 0; }
.footer1-section-area .footer-list h2, .footer1-section-area .head h2 { margin-bottom: 4px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); line-height: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); transition: all 0.4s; }
@media (max-width: 767px) { .footer1-section-area .head h2 { margin-top: 30px; } }
/* Hovered buttons fill with the orange; navy text stays readable on it (white would not be). */
.header-btn1:hover, .header-btn2:hover, .header-btn7:hover,
.header-btn1:focus-visible, .header-btn2:focus-visible, .header-btn7:focus-visible { background: var(--safetytech-orange); color: var(--ztc-text-text-3); }
.header-btn1:hover::after, .header-btn2:hover::after, .header-btn7:hover::after { border-color: var(--safetytech-orange); }
picture { display: block; }
picture img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--safetytech-orange) !important;
  outline-offset: 4px;
}
.skip-link { position: fixed; top: -100px; left: 12px; padding: 12px 20px; background: #fff; color: var(--ztc-text-text-3); z-index: 100001; }
.skip-link:focus { top: 12px; }
#main-content:focus { outline: none; }
#rfq { scroll-margin-top: 120px; }
.site-logo img, .mobile-logo img, .logos img { width: 178px; height: auto; padding: 5px; border-radius: 4px; background: #fff; }
.footer1-section-area .logo-content > img { width: 220px; height: auto; }
.homepage1-body .header-area.homepage1 .header-elements { gap: 16px; padding: 16px 24px; }
.homepage1-body .header-area.homepage1 .header-elements .main-menu > ul { display: flex; align-items: center; }
.homepage1-body .header-area.homepage1 .header-elements .main-menu > ul > li > a,
.homepage1-body .header-area.homepage1 .nav-toggle {
  padding: 12px 10px; font-family: var(--ztc-family-font1); font-weight: 500;
  font-size: 17px; line-height: 22px; color: #fff; background: transparent; white-space: nowrap;
}
.nav-toggle { border: 0; cursor: pointer; background: transparent; }
.nav-toggle i { font-size: 12px; margin-left: 3px; transition: transform .2s; }
.nav-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding {
  top: 100%; width: 300px; padding: 12px; transform: none;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li.is-open > ul.dropdown-padding {
  opacity: 1; visibility: visible; transform: none; top: 100%;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding a {
  white-space: normal; line-height: 1.25; padding: 12px; font-size: 17px;
}
.homepage1-body .header-area.homepage1 .header-elements .main-menu a[aria-current="page"],
.homepage1-body .header-area.homepage1 .header-elements .main-menu [data-current-section] > button {
  text-decoration: underline; text-underline-offset: 6px;
}
.homepage1-body .header-area.homepage1 .header-elements .btn-area { flex-shrink: 0; }
.homepage1-body .header-area.homepage1 .header-elements .btn-area .header-btn1 { padding: 15px 18px; font-size: 17px; white-space: nowrap; }
.mobile-nav-icon, .menu-close { background: transparent; min-width: 44px; min-height: 44px; }
.menu-close { border: 0; }
.mobile-sidebar { z-index: 10001; }
.mobile-sidebar, .mobile-sidebar.mobile-menu-active { transition-property: left, opacity; }
.mobile-sidebar .nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; color: #fff; font: 500 18px/24px var(--ztc-family-font1); text-align: left; }
.mobile-sidebar .sub-menu { padding-left: 18px; }
.mobile-sidebar .sub-menu:not([hidden]) { display: block; }
.mobile-sidebar a[aria-current="page"], .mobile-sidebar [data-current-section] > button { text-decoration: underline; text-underline-offset: 5px; }
.mobile-sidebar a[href^="mailto:"], .footer1-section-area a[href^="mailto:"], .contact-main-inner-area a[href^="mailto:"] { overflow-wrap: anywhere; }
body.mobile-menu-open { overflow: hidden !important; }
.ctn-preloader .animation-preloader .txt-loading { font-size: clamp(24px, 6vw, 70px); }
#loading-icon img { width: 55px; height: auto; }
.preloader { pointer-events: none; }

/* Fit the supplied combined photograph inside the template's exact silhouette. */
.hero1-section-area .header-images .image {
  position: relative;
  aspect-ratio: 550 / 572;
  overflow: hidden;
  background: #041831;
  -webkit-mask: url('../img/all-images/header-img1.png') center / 100% 100% no-repeat;
  mask: url('../img/all-images/header-img1.png') center / 100% 100% no-repeat;
}
.hero1-section-area .header-images .image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/safetytech/01-USE-THESE/hero-static.webp') right center / cover no-repeat;
  filter: blur(16px);
  opacity: .55;
  transform: scale(1.08);
}
.hero1-section-area .header-images .image img {
  position: absolute;
  top: 12%;
  right: 0;
  width: 145%;
  max-width: none;
  height: auto;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 5%, #000 92%, transparent);
  mask-image: linear-gradient(transparent, #000 5%, #000 92%, transparent);
}
/* The wave along the bottom of the hero is no longer a .reveal (it stayed hidden until the scripts ran); this keeps the
   sizing that class gave it, so it still narrows to fit phones. */
.hero1-section-area .bg img { display: inline-block; width: 100%; height: 100%; object-fit: cover; }

/* Hero entrance: the heading's letters fly in, the text and buttons rise, and the photo and wave wipe in from the left.
   It is plain CSS, so it starts with the first paint instead of waiting for every script and image as the old
   script-driven version did: the photo and wave are in place within 0.9 s (the owner asked for under a second) and the
   letters within about 1.5 s. Only opacity, transform, filter and clip-path change, so nothing reflows. The letters
   are wrapped by the small script after the h1 in index.html. */
@keyframes st-letter-in { from { opacity: 0; transform: translateX(50px); } }
@keyframes st-rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes st-rise-filter { from { filter: opacity(0); transform: translateY(40px); } }
@keyframes st-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes st-settle { from { transform: scale(1.2); } }
.hero1-section-area .hero-title .hero-word { display: inline-block; white-space: nowrap; }
.hero1-section-area .hero-title .hero-char { display: inline-block; animation: st-letter-in .8s cubic-bezier(.34, 1.56, .64, 1) calc(.1s + var(--i) * 20ms) both; }
/* .heading1 p is opacity: .9 !important, which an opacity animation cannot override, so this one fades with a filter. */
.hero1-section-area .hero-main-area > p { animation: st-rise-filter .8s ease-out .3s both; }
.hero1-section-area .hero-main-area .btn-area { animation: st-rise .8s ease-out .45s both; }
.hero1-section-area .header-images .image { animation: st-wipe .8s cubic-bezier(.65, 0, .35, 1) .1s both; }
.hero1-section-area .header-images .image img { animation: st-settle .8s cubic-bezier(.22, 1, .36, 1) .1s both; }
.hero1-section-area .bg { animation: st-wipe .8s cubic-bezier(.65, 0, .35, 1) .1s both; }
@media (prefers-reduced-motion: reduce) {
  .hero1-section-area .hero-title .hero-char,
  .hero1-section-area .hero-main-area > p,
  .hero1-section-area .hero-main-area .btn-area,
  .hero1-section-area .header-images .image,
  .hero1-section-area .header-images .image img,
  .hero1-section-area .bg { animation: none; }
}

/* Keep the template's icon-and-arrow service row, with four requested divisions. */
.service1-section-area .service-boxs-area { align-items: stretch; gap: 24px; }
.service1-section-area .service-boxs-area .service-boxarea { flex: 1; display: flex; flex-direction: column; align-items: center; }
.service1-section-area .service-boxs-area .service-boxarea .icons { flex-shrink: 0; }
.service1-section-area .service-boxs-area .service-boxarea .content { display: flex; flex-direction: column; flex: 1; }
.service1-section-area .service-boxs-area .service-boxarea .content > a:first-child { min-height: 48px; }
.service1-section-area .service-boxs-area .service-boxarea .content .readmore { margin-top: auto; padding-top: 24px; line-height: 24px; }
.service1-section-area .service-boxs-area > .elements19,
.service1-section-area .service-boxs-area > .elements20 { width: calc(25% - 76px); height: auto; }
.service1-section-area .service-boxs-area > .elements19:first-of-type { left: calc(12.5% + 38px); }
.service1-section-area .service-boxs-area > .elements20 { left: calc(37.5% + 38px); right: auto; }
.service1-section-area .service-boxs-area > .elements19:nth-of-type(3) { left: calc(62.5% + 38px); }
@media (min-width: 768px) and (max-width: 991px) {
  .service1-section-area .service-boxs-area { flex-wrap: wrap; }
  .service1-section-area .service-boxs-area .service-boxarea { flex: 0 0 calc(50% - 12px); max-width: none; }
}
@media (max-width: 767px) {
  .service1-section-area .service-boxs-area { width: 100%; }
  .service1-section-area .service-boxs-area .service-boxarea .content > a:first-child { min-height: 0; }
}

/* Expanded listing content stays readable on touch and keyboard devices. */
.service-inner-section-area .safetytech-service-grid { row-gap: 30px; }
.service-inner-section-area .safetytech-service-grid > [class*="col-"] { display: flex; }
.service-inner-section-area .safetytech-service-card { display: flex; flex-direction: column; width: 100%; margin-bottom: 0; border-radius: 4px; background: var(--ztc-bg-bg-6); }
.service-inner-section-area .safetytech-service-card .img1 img { aspect-ratio: 4 / 3; object-fit: cover; }
.service-inner-section-area .safetytech-service-card .content-area { position: relative; flex: 1; display: flex; margin: -24px 20px 20px; bottom: auto; padding: 52px 24px 24px; }
.service-inner-section-area .safetytech-service-card .content-area .icons { left: calc(50% - 30px); right: auto; color: #fff; font-size: 26px; }
.service-inner-section-area .safetytech-service-card:hover .content-area .icons { color: var(--ztc-text-text-2); }
.service-inner-section-area .safetytech-service-card .content-area .content-area-pera { display: flex; flex-direction: column; width: 100%; }
.service-inner-section-area .safetytech-service-card .content-area .content-area-pera h2,
.service-inner-section-area .safetytech-service-card .content-area .content-area-pera h3 { font-size: 26px; line-height: 1.25; min-height: 65px; }
.service-inner-section-area .safetytech-service-card .content-area .content-area-pera h2 a,
.service-inner-section-area .safetytech-service-card .content-area .content-area-pera h3 a { font-size: inherit; line-height: inherit; }
.service-inner-section-area .safetytech-service-card .content-area .content-area-pera p { visibility: visible; opacity: 1; height: auto; margin-top: 16px; }
.service-inner-section-area .safetytech-service-card:hover .content-area .content-area-pera p { height: auto; }
.service-inner-section-area .safetytech-service-card .content-area .content-area-pera .readmore { margin-top: auto; padding-top: 24px; line-height: 1.3; }
.safetytech-offerings { margin: 20px 0; padding-left: 22px; text-align: left; font-size: 18px; line-height: 1.5; }
.safetytech-offerings li { list-style: disc; }
.service-inner-section-area .safetytech-service-card:hover .safetytech-offerings { color: #fff; }
.safetytech-detail-images .img2 img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.service-single-inner-area .lista-area { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.service-single-inner-area .lista-area > .space16 { display: none; }
.service-single-inner-area .lista-area ul { flex: 1 1 280px; }
.service-single-inner-area .lista-area ul li { display: flex; align-items: baseline; line-height: 1.4; }
.service-single-inner-area .lista-area ul li img { flex-shrink: 0; }
.accordion-button { padding-right: 52px !important; line-height: 1.4 !important; }

/* Keep the original project imagery and overlay treatment; titles are always available. */
.project1-section-area .project-slider-area .safetytech-project-card .img1 img,
.project-main-inner-area .safetytech-project-card .img1 img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.project1-section-area .project-slider-area .safetytech-project-card .content-area,
.project-main-inner-area .safetytech-project-card .content-area { visibility: visible; opacity: 1; display: flex; align-items: flex-end; }
/* The gallery template parks this overlay 100px up and slides it down on hover; with the text always shown, that left
   a band of bare photo under it and a jump on hover, so it now stays at the bottom like the homepage cards. */
.project-main-inner-area .safetytech-project-card .content-area { transform: none; }
.project1-section-area .project-slider-area .safetytech-project-card .content-area::after,
.project-main-inner-area .safetytech-project-card .content-area::after { transform: none !important; opacity: 1; background: linear-gradient(transparent 15%, rgba(8,49,73,.95) 100%); }
.project1-section-area .project-slider-area .safetytech-project-card .content-area .all-content,
.project-main-inner-area .safetytech-project-card .content-area .all-content { top: auto; bottom: auto; padding: 24px; width: 100%; }
/* Each card ends in a "View …" link that says where it leads. It replaced a round arrow button, which beside the carousel's
   own arrows gave the row too many arrows. Orange on hover and focus, like the footer links on navy. */
.project1-section-area .project-slider-area .safetytech-project-card .content-area .all-content .card-link,
.project-main-inner-area .safetytech-project-card .content-area .all-content .card-link { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 17px; line-height: 24px; transition: color .3s; }
.project1-section-area .project-slider-area .safetytech-project-card .content-area .all-content .card-link i,
.project-main-inner-area .safetytech-project-card .content-area .all-content .card-link i { font-size: 14px; transform: rotate(-45deg); transition: transform .3s; }
.project1-section-area .project-slider-area .safetytech-project-card .content-area .all-content .card-link:hover,
.project1-section-area .project-slider-area .safetytech-project-card .content-area .all-content .card-link:focus-visible,
.project-main-inner-area .safetytech-project-card .content-area .all-content .card-link:hover,
.project-main-inner-area .safetytech-project-card .content-area .all-content .card-link:focus-visible { color: var(--safetytech-orange); }
.project1-section-area .project-slider-area .safetytech-project-card .content-area .all-content .card-link:hover i,
.project-main-inner-area .safetytech-project-card .content-area .all-content .card-link:hover i { transform: translate(2px, -2px) rotate(-45deg); }
.project1-section-area .project-slider-area .safetytech-project-card .content-area .all-content h3 a,
.project-main-inner-area .safetytech-project-card .content-area .all-content h3 a { font-size: 24px; line-height: 1.2; margin-bottom: 10px; }
.safetytech-project-card:focus-within { outline: 3px solid var(--safetytech-orange); outline-offset: 3px; }
.service3-inner-section-area .service-carousel-area .owl-stage { display: flex; }
.service3-inner-section-area .service-carousel-area .owl-item { display: flex; flex-shrink: 0; }
.service3-inner-section-area .service-carousel-area .service-boxarea { display: flex; flex-direction: column; width: 100%; }
.service3-inner-section-area .service-carousel-area .service-boxarea .img1 img { aspect-ratio: 1; height: auto; object-fit: cover; }
.service3-inner-section-area .service-carousel-area .service-boxarea .content-area { position: relative; display: flex; flex: 1; margin: -24px 16px 0; padding: 48px 20px 24px; }
.service3-inner-section-area .service-carousel-area .service-boxarea .content-area .icons { left: calc(50% - 30px); right: auto; color: #fff; font-size: 26px; }
.service3-inner-section-area .service-carousel-area .service-boxarea:hover .content-area .icons { color: var(--ztc-text-text-2); }
.service3-inner-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera { display: flex; flex-direction: column; }
.service3-inner-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera > a:first-child { min-height: 50px; line-height: 1.25; }
.service3-inner-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera p,
.service3-inner-section-area .service-carousel-area .service-boxarea:hover .content-area .content-area-pera p { height: auto; visibility: visible; opacity: 1; margin-top: 16px; }
.service3-inner-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera .readmore { margin-top: auto; padding-top: 24px; line-height: 1.25; }
.contact-main-inner-area .phone-number .img1, .location-boxes > .img1, .about-boxarea .icons { font-size: 24px; }
.project-slider-area .owl-stage { display: flex; }
.project-slider-area .owl-item { flex-shrink: 0; }
.safetytech-quality-overview .img1 img, .safetytech-procurement-resources .img1 img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* The quote box shows a product photograph inside the box instead of the template's overhanging illustration. */
/* The box is a fixed 312px tall on desktop, so the photo is capped to fit; smaller screens have no room for it. */
.cta1-section-area .cta-author-area .cta-images .img1 { top: 0; margin: 0 auto; max-width: 392px; border-radius: 8px; box-shadow: 0 16px 32px rgba(8, 49, 73, 0.35); }
.cta1-section-area .cta-author-area .cta-images .img1 img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.cta1-section-area .cta-author-area .cta-images .img2 { display: none; }
@media (max-width: 991px) { .cta1-section-area .cta-author-area .cta-images { display: none; } }
/* Phones: the email field takes the full width and the button stacks below it, on navy to stand out from the blue box. */
@media (max-width: 767px) {
  .cta1-section-area { margin-top: 40px; }
  .cta1-section-area .cta-author-area { padding-bottom: 24px; }
  .cta1-section-area .cta-author-area .heading2 form { height: auto; padding: 0; background: none; }
  .cta1-section-area .cta-author-area .heading2 form input { display: block; padding: 16px 18px; background: #fff; border-radius: 4px; line-height: 20px; }
  .cta1-section-area .cta-author-area .heading2 form button { position: static; display: block; width: 100%; margin-top: 10px; background: var(--ztc-text-text-3); }
  .cta1-section-area .cta-author-area .heading2 form button:hover,
  .cta1-section-area .cta-author-area .heading2 form button:focus-visible { background: var(--safetytech-orange); color: var(--ztc-text-text-3); }
}
@media (max-width: 400px) { .cta1-section-area .cta-author-area h2 { font-size: 26px; line-height: 34px; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .cta1-section-area .cta-author-area { padding: 48px 48px 0; }
  .cta1-section-area .cta-author-area h2 { font-size: 32px; line-height: 40px; }
}
/* Picture-and-text sections put the text first in the page, so phones and screen readers reach the heading before
   the pictures. On desktop the picture alternates sides from one section to the next (.order-lg-first keeps it left). */
@media (min-width: 992px) {
  .about3-inner-section-area .text-col-left .about-header-area { padding: 0 50px 0 0; }
  .others-inner-section-area .text-col-left .other-content-area { padding: 0 70px 0 0; }
}
/* Stacked: the template spaced the text below the pictures; the gap now sits above the pictures instead. */
@media (max-width: 991px) {
  .about1-section-area .about-content-area,
  .about3-inner-section-area .about-header-area,
  .others-inner-section-area .other-content-area { margin-top: 0; }
  .stack-visual { margin-top: 30px; }
  .about-inner-section-area .about-images .row > :last-child .img1 { margin-bottom: 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .about-inner-section-area .about-images .img1 { margin-bottom: 0; }
}

.footer1-section-area .copyright p { border-top-color: rgba(255, 255, 255, 0.15); }
.footer1-section-area .footer-list ul li a { line-height: 1.3; }
.footer1-section-area .location-area .img1 { color: var(--ztc-text-text-2); transition: color 0.4s; }
/* Footer links turn the logo orange on hover and keyboard focus (4.6:1 on the navy, so it stays readable). */
.footer1-section-area .footer-list ul li a:hover,
.footer1-section-area .footer-list ul li a:focus-visible,
.footer1-section-area .location-area:hover .text a,
.footer1-section-area .location-area .text a:focus-visible { color: var(--safetytech-orange); opacity: 1; }
.footer1-section-area .location-area:hover .img1,
.footer1-section-area .location-area:has(a:focus-visible) .img1 { color: var(--safetytech-orange); }
/* Each contact row is one link: the icon is clickable too, and the row is only as wide as its icon and text. */
.footer1-section-area .location-area { position: relative; width: fit-content; }
.footer1-section-area .location-area .text a::after { content: ""; position: absolute; inset: 0; }
.contact-main-inner-area .input-area label { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.contact-main-inner-area .input-area select { width: 100%; min-height: 52px; padding: 16px; background: #fff; color: var(--ztc-text-text-3); border: 1px solid #dfdcdc; border-radius: 4px; font: inherit; }
.rfq-fieldset { border: 0; padding: 0; min-width: 0; }
.rfq-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-end; align-items: center; }
.contact-main-inner-area .contact-form-area .btn-area button.rfq-whatsapp { display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; background: #fff; color: var(--ztc-text-text-3); border: 2px solid #25D366; border-radius: 4px; font: 700 18px/1.2 var(--ztc-family-font1); cursor: pointer; transition: background .2s, color .2s; }
.rfq-whatsapp i.fa-whatsapp { font-size: 22px; }
.contact-main-inner-area .contact-form-area .btn-area button.rfq-whatsapp:hover,
.contact-main-inner-area .contact-form-area .btn-area button.rfq-whatsapp:focus-visible { background: #25D366; color: var(--ztc-text-text-3); }
.rfq-whatsapp:hover i.fa-whatsapp, .rfq-whatsapp:focus-visible i.fa-whatsapp { color: var(--ztc-text-text-3); }
.rfq-note { padding: 16px; background: var(--ztc-bg-bg-6); border-radius: 4px; }
.rfq-status { margin-top: 16px; line-height: 1.5; }
.rfq-status a { color: var(--ztc-text-text-2); text-decoration: underline; text-underline-offset: 3px; }
/* Spam trap for Web3Forms: people never see it; bots that fill it in are ignored. */
.rfq-botcheck { display: none !important; }
#rfq-requirements-help { font-size: 16px; line-height: 1.4; }
/* The template tilts button icons so arrows point diagonally; keep the envelope upright. */
.rfq-actions .header-btn7 i.fa-envelope { transform: none; }
button:disabled { opacity: .55; cursor: not-allowed; }
/* WhatsApp: the official logo in WhatsApp green, plus a floating chat button (bottom-left; scroll-to-top sits bottom-right). */
i.fa-whatsapp { color: #25D366; }
.whatsapp-float { position: fixed; left: 20px; bottom: 20px; z-index: 9990; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #25D366; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); transition: transform .2s, box-shadow .2s; }
.whatsapp-float i.fa-whatsapp { color: #fff; font-size: 30px; line-height: 1; }
.whatsapp-float:hover, .whatsapp-float:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .3); }
@media (max-width: 767px) { .whatsapp-float { left: 14px; bottom: 14px; width: 50px; height: 50px; } .whatsapp-float i.fa-whatsapp { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-float { transition: none; } }

@media (max-width: 1199px) {
  .site-logo img { width: 150px; }
  .homepage1-body .header-area.homepage1 .header-elements { gap: 8px; padding: 16px; }
  .homepage1-body .header-area.homepage1 .header-elements .main-menu > ul > li > a,
  .homepage1-body .header-area.homepage1 .nav-toggle { font-size: 16px; padding: 12px 7px; }
  .homepage1-body .header-area.homepage1 .header-elements .btn-area .header-btn1 { padding: 14px 10px; font-size: 16px; }
}
@media (max-width: 767px) {
  .service-inner-section-area .safetytech-service-card .content-area { margin: -20px 12px 16px; padding: 48px 18px 24px; }
  .service-inner-section-area .safetytech-service-card .content-area .content-area-pera h2,
  .service-inner-section-area .safetytech-service-card .content-area .content-area-pera h3 { min-height: 0; }
  .project1-section-area .project-slider-area .safetytech-project-card .content-area .all-content,
  .project-main-inner-area .safetytech-project-card .content-area .all-content { padding: 20px; }
  .project1-section-area .project-slider-area .safetytech-project-card .content-area .all-content p,
  .project-main-inner-area .safetytech-project-card .content-area .all-content p { font-size: 16px; line-height: 1.3; }
  .rfq-actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Drone icon (Font Awesome Free has none): an inline SVG sized and colored like the icon font. */
.st-icon { display: inline-block; width: 1.25em; height: 1em; vertical-align: -0.125em; fill: currentColor; overflow: visible; }
.service1-section-area .service-boxs-area .service-boxarea .icons { color: #fff; font-size: 26px; }

/* Who We Are: the photo keeps its landscape shape and starts level with the text. On desktop it stays in view
   (sticky) while the three points scroll past, so no empty column opens up under it. */
@media (min-width: 992px) {
  .about1-section-area .stack-visual .about-images { position: sticky; top: 120px; }
}
/* The template hid sideways overflow on <body> with overflow-x: hidden, which turns <body> into a scroll box and
   stops sticky elements working; clip trims the overflow the same way without that side effect. */
.homepage1-body { overflow-x: clip !important; }

/* Quality cards: photos share one shape so the cards line up (a faint border keeps the light gears photo from
   blending into the page), and two-line text has room to breathe. */
.team1-section-area .team-boxarea .img1 { border: 1px solid rgba(4, 35, 39, 0.08); }
.team1-section-area .team-boxarea .img1 img { aspect-ratio: 4 / 3; object-fit: cover; }
.team1-section-area .team-boxarea .content p { line-height: 1.4; }

/* Order steps: numbered list with a title and one line of detail per step. */
.counter-section-area .safetytech-steps { list-style: none; padding-left: 0; margin-bottom: 0; }
.counter-section-area .safetytech-steps > li { display: flex; }
.counter-section-area .safetytech-steps .counter-boxarea { width: 100%; padding: 36px 28px; }
.counter-section-area .counter-step { display: block; margin-bottom: 14px; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); font-weight: var(--ztc-weight-semibold); line-height: 1; transition: color 0.4s; }
.counter-section-area .counter-boxarea h3 { margin-bottom: 10px; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: 22px; font-weight: var(--ztc-weight-semibold); line-height: 1.3; transition: color 0.4s; }
.counter-section-area .counter-boxarea p { margin-bottom: 0; font-size: 17px; line-height: 1.5; }
.counter-section-area .counter-boxarea:hover .counter-step,
.counter-section-area .counter-boxarea:hover h3 { color: var(--ztc-bg-bg-1); }

/* Buyer resources: an icon per card instead of repeated photos; cards in a row share one height. */
.safetytech-procurement-resources .row > [class*="col-"] { display: flex; }
.safetytech-procurement-resources .blog-author-boxraea { display: flex; flex-direction: column; width: 100%; padding: 32px 28px; }
.safetytech-procurement-resources .resource-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(24, 136, 205, 0.1); color: var(--ztc-text-text-2); font-size: 26px; }
.safetytech-procurement-resources .blog-author-boxraea .blog-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding-top: 8px; }
.safetytech-procurement-resources .blog-author-boxraea .blog-content .readmore { margin-top: auto; }

/* Phones: leave room under the copyright line so the floating WhatsApp button never covers it. */
@media (max-width: 767px) { .footer1-section-area .copyright { padding-bottom: 64px; } }

/* About and Quality intros: taller photos so the offset pair balances the text beside it. */
@media (min-width: 768px) {
  .about-inner-section-area .about-images .img1 img { aspect-ratio: 3 / 4; }
}

/* Breadcrumb: Home is the only link; the current page is plain text in the same white. */
.hero-inner-section-area .hero-main-area .breadcrumb-trail { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: 1.4; }
.hero-inner-section-area .hero-main-area .breadcrumb-trail i { margin: 0 6px; font-size: 16px; }
.hero-inner-section-area .hero-main-area .breadcrumb-trail span { font-weight: var(--ztc-weight-semibold); }
.hero-inner-section-area .hero-main-area .breadcrumb-trail a:hover,
.hero-inner-section-area .hero-main-area .breadcrumb-trail a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Contact: quotation cards use headings styled like the template's card titles, readable line spacing and one
   shared height per row. */
.location-area .location-boxes h3 { margin: 0; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); line-height: 26px; }
.location-area .location-boxes p { line-height: 1.5; }
.safetytech-quote-cards > [class*="col-"] { display: flex; }
.safetytech-quote-cards .location-boxes { width: 100%; }

/* Gallery: workshop photos in a simple captioned grid below the product cards. */
.project-main-inner-area + .safetytech-workshop-gallery { padding-top: 0; }
.safetytech-workshop-gallery figure { margin: 0 0 30px; }
.safetytech-workshop-gallery figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(4, 35, 39, 0.08); border-radius: 4px; }
.safetytech-workshop-gallery figcaption { margin-top: 14px; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: 18px; font-weight: var(--ztc-weight-semibold); line-height: 1.4; text-align: center; }

/* Header phone: white text like the menu, with a phone icon, just before Request a Quote. */
.homepage1-body .header-area.homepage1 .header-elements .btn-area { display: flex; align-items: center; gap: 20px; }
.header-phone { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: #fff; font-family: var(--ztc-family-font1); font-size: 17px; font-weight: 500; line-height: 22px; white-space: nowrap; }
.header-phone i { font-size: 15px; }
.header-phone:hover, .header-phone:focus-visible { color: #fff; }
.header-phone:hover .header-phone-number, .header-phone:focus-visible .header-phone-number { text-decoration: underline; text-underline-offset: 6px; }
/* Phones: a call button styled like the menu button beside it. */
.mobile-header-actions { display: flex; align-items: center; gap: 10px; }
.mobile-call { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid; border-radius: 4px; color: var(--ztc-text-text-1); font-size: 18px; }
.mobile-call:hover, .mobile-call:focus-visible { color: var(--ztc-text-text-1); }
/* The logo keeps its agreed size; at 1200–1399px the menu tightens slightly so the full number still fits,
   and below 1200px only the phone icon shows (the number stays available to screen readers). */
.homepage1-body .header-area.homepage1 .header-elements .site-logo { flex-shrink: 0; }
@media (min-width: 1200px) and (max-width: 1399px) {
  .homepage1-body .header-area.homepage1 .header-elements { padding: 16px 20px; }
  .homepage1-body .header-area.homepage1 .header-elements .main-menu > ul > li > a,
  .homepage1-body .header-area.homepage1 .nav-toggle { padding: 12px 8px; }
  .homepage1-body .header-area.homepage1 .header-elements .btn-area { gap: 16px; }
  .header-phone { font-size: 16px; }
}
@media (max-width: 1199px) {
  .header-phone { justify-content: center; min-width: 44px; }
  .header-phone i { font-size: 18px; }
  .header-phone-number { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* "Built for Defense, Security, Healthcare and Industry" wraps onto two even lines instead of leaving one word alone. */
.project1-section-area .project-header h2,
.project-main-inner-area .project-header h2 { text-wrap: balance; }

/* Homepage "Our Products" takes the light gray the hidden "Products and Services" section used. */
.project1-section-area { background: var(--ztc-bg-bg-6); }
/* On that gray, the template's pale inactive carousel dot all but disappeared; slate keeps it visible (3.1:1). */
.project1-section-area .project-slider-area .owl-dots button:not(.active) { background: #7A8C96; }

/* Homepage product carousel: small arrows on the left and right edges of the cards signal that there are more,
   centred on the card height (the dots row below is 32px + 40px tall). Arrows fill orange on hover like the
   site's buttons. */
.project1-section-area .project-slider-area .owl-dots { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 40px; }
.project1-section-area .project-slider-area .owl-dots button { margin: 0; }
.project1-section-area .project-slider-area { position: relative; }
.project1-section-area .project-slider-area .owl-nav { position: absolute; top: calc(50% - 36px); left: 16px; right: 16px; z-index: 2; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.project1-section-area .project-slider-area .owl-nav button.owl-prev,
.project1-section-area .project-slider-area .owl-nav button.owl-next { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(8, 49, 73, 0.2); border-radius: 50%; background: #fff; color: var(--ztc-text-text-3); font-size: 15px; pointer-events: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: background 0.3s, border-color 0.3s; }
.project1-section-area .project-slider-area .owl-nav button.owl-prev:hover,
.project1-section-area .project-slider-area .owl-nav button.owl-next:hover,
.project1-section-area .project-slider-area .owl-nav button.owl-prev:focus-visible,
.project1-section-area .project-slider-area .owl-nav button.owl-next:focus-visible { background: var(--safetytech-orange); border-color: var(--safetytech-orange); color: var(--ztc-text-text-3); }

/* Animated headings: the split-text script copies the page's alignment onto every line when the page loads, so a
   page loaded at phone width kept centred lines on desktop, and the reverse on phones. Lines now always follow the
   heading's own alignment at the current width (left on desktop, centred on phones). */
.text-anime-style-3 .split-line { text-align: inherit !important; }

/* Phones and tablets keep the desktop alignment. Below 992px the template centres these blocks; text that is
   left-aligned on desktop now stays left-aligned. Sections centred on desktop (section headers, cards, step boxes,
   page titles, the copyright line) are unchanged. */
@media (max-width: 991px) {
  .hero1-section-area .hero-main-area,
  .about1-section-area .about-content-area,
  .about-inner-section-area .about-content-area,
  .service3-inner-section-area .service-header { text-align: left; }
}
@media (max-width: 767px) {
  /* Full-width hero buttons keep their labels centred. */
  .hero1-section-area .hero-main-area .btn-area a { text-align: center; }
  /* The template marks the banner heading !important, so the override must too. */
  .cta1-section-area .cta-author-area .heading2 { text-align: left !important; }
  .cta1-section-area .cta-author-area .heading2 h2,
  .contact-main-inner-area .contact-header .number-address-area,
  .footer1-section-area .logo-content,
  .footer1-section-area .footer-list,
  .footer1-section-area .head h2 { text-align: left; }
  .footer1-section-area .location-area { justify-content: flex-start; text-align: left; }
  /* Who We Are points: the number sits beside the text, as on desktop, at a size that suits a phone. */
  .about1-section-area .about-content-area .counter-area { display: flex; align-items: flex-start; }
  .about1-section-area .about-content-area .counter-area .counter-box .counter-number { min-width: 0; margin: 0 18px 0 0; font-size: 44px; line-height: 1; }
}

/* Phones: a section heading lines up with the content under it. Where the cards or questions below are left-aligned
   and stack in one column (Buyer Resources, the Contact page's quotation cards, the FAQ lists), the heading is
   left-aligned too instead of centred above them. These headers carry Bootstrap's text-center, which is !important,
   so the override is as well. */
@media (max-width: 767px) {
  .safetytech-procurement-resources .blog-header,
  .location-area .location-header,
  .faq-inner-area .faq-header { text-align: left !important; }
}

/* FAQ questions: the open/close arrow sits 20px from the right edge. The template's padding rules outranked the
   general .accordion-button rule above, so long questions ran underneath the arrow on phones; these match the
   template's selectors and reserve room for it. */
.faq-inner-area .faq-accordian-area .accordion .accordion-item .accordion-header button,
.service-single-inner-area .service-right-single-area .service-accordian-area .accordion .accordion-item .accordion-header button { padding-right: 56px !important; }

/* Colour consistency (audit of every page, 2026-10-15). Some template pieces kept colours from outside the brand
   palette: Bootstrap's default black text (#212529) and link blue, the template's brown-black (#1C0F01), and Font
   Awesome icons placed in circles built for the template's blue SVG images, which left them black. */
/* Paragraphs are grey and headings and labels navy, as on the rest of the site. */
.counter-section-area .counter-boxarea p,
.service-inner-section-area .service-boxarea ul li,
.contact-form-area > p,
.contact-form-area .input-area p { color: var(--ztc-text-text-4); }
.service-right-single-area > h3,
.contact-form-area h3,
.contact-form-area label { color: var(--ztc-text-text-3); }
/* Links inside sentences: navy and underlined, brand blue on hover. */
.contact-header p a { color: var(--ztc-text-text-3); text-decoration: underline; text-underline-offset: 3px; }
.contact-header p a:hover { color: var(--ztc-text-text-2); }
/* "View …" links on light cards: navy, brand blue on hover, as in the homepage's Buyer Resources. */
.service-inner-section-area .service-boxarea .content-area .content-area-pera .readmore,
.service3-inner-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera .readmore { color: var(--ztc-text-text-3); transition: color .3s; }
.service-inner-section-area .service-boxarea .content-area .content-area-pera .readmore:hover,
.service3-inner-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera .readmore:hover { color: var(--ztc-text-text-2); }
/* Icons in the template's light-blue circles are brand blue, and turn white where the circle fills blue on hover.
   The WhatsApp logo keeps its own green. */
.about-inner-section-area .about-content-area .about-boxarea .icons i,
.service-single-inner-area .service-right-single-area .boxarea .icons i,
.contact-main-inner-area .contact-header .number-address-area .phone-number .img1 i:not(.fa-whatsapp),
.location-area .location-boxes .img1 i { color: var(--ztc-text-text-2); transition: color .4s; }
.about-inner-section-area .about-content-area .about-boxarea:hover .icons i,
.contact-main-inner-area .contact-header .number-address-area .phone-number:hover .img1 i { color: #fff; }
/* The quote banner's button fills orange on hover at every width, like the other buttons; on desktop it turned navy. */
.cta1-section-area .cta-author-area .heading2 form button:hover,
.cta1-section-area .cta-author-area .heading2 form button:focus-visible { background: var(--safetytech-orange); color: var(--ztc-text-text-3); }
/* The About page carousel's arrows match the homepage carousel: white circles, navy arrow, orange fill on hover. */
.service3-inner-section-area .service-carousel-area .owl-nav button.owl-prev,
.service3-inner-section-area .service-carousel-area .owl-nav button.owl-next { border: 1px solid rgba(8, 49, 73, 0.2); border-radius: 50%; background: #fff; color: var(--ztc-text-text-3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.service3-inner-section-area .service-carousel-area .owl-nav button.owl-prev:hover,
.service3-inner-section-area .service-carousel-area .owl-nav button.owl-next:hover,
.service3-inner-section-area .service-carousel-area .owl-nav button.owl-prev:focus-visible,
.service3-inner-section-area .service-carousel-area .owl-nav button.owl-next:focus-visible { background: var(--safetytech-orange); border-color: var(--safetytech-orange); color: var(--ztc-text-text-3); }

/* Native keyboard access, preserving the existing scroll-to-top dimensions and appearance. */
button.progress-wrap { border: 0; padding: 0; background: transparent; }