/* ==========================================================================
   WiseTech Systems LLC — Custom Theme Prototype Stylesheet
   Built on top of Bootstrap 5.3.x. This file only contains overrides/custom
   rules — never re-declare what Bootstrap already provides.
   ========================================================================== */

:root {
  --wt-navy: #003481;
  --wt-navy-dark: #00224f;
  --wt-navy-rgb: 0, 52, 129;
  --wt-orange: #f7941d;
  --wt-orange-dark: #e07f0a;
  --wt-dark: #101010;
  --wt-dark-2: #2b212c;
  --wt-gray: #707070;
  --wt-gray-light: #e1e1e1;
  --wt-bg-alt: #f5f7fa;
  --wt-white: #ffffff;

  --font-heading: "Montserrat", sans-serif;
  --font-body: "Open Sans", sans-serif;

  --radius: 8px;
}

/* ---------- Header icon font (matches wisetech.ae's icon glyphs exactly) ---------- */
@font-face {
  font-family: "wt-icons";
  src: url("../fonts/stm.woff") format("woff"),
       url("../fonts/stm.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.wt-icon {
  font-family: "wt-icons" !important;
  font-style: normal;
  font-weight: normal;
  speak: never;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wt-icon-location:before { content: "\e9d0"; }
.wt-icon-email:before { content: "\e9dd"; }
.wt-icon-phone:before { content: "\e946"; }
.wt-icon-world-money:before { content: "\ea17"; }
.wt-icon-security-shield:before { content: "\e96f"; }
.wt-icon-rocket:before { content: "\e998"; }
.wt-icon-staff-group:before { content: "\e99f"; }

/* ---------- Base ----------
   Body copy and the heading scale below match wisetech.ae's own global
   typography (extracted from its theme_options.css) so that any heading or
   paragraph without a section-specific override - FAQ answers, WYSIWYG
   fields, etc. - still lands on the right size instead of the browser's
   unstyled defaults. Sections with their own display-heading treatment
   (.hero h1, .section-title, ...) continue to override these via their
   higher-specificity/later rules further down this file. */
body {
  font-family: var(--font-body);
  color: var(--wt-dark);
  font-size: 14px;
  line-height: 1.57;
}

/* Site-wide content width cap: Bootstrap's own .container already tops out
   at 1140px through the xl breakpoint (1200-1399px) - this only needs to
   override its xxl breakpoint (>=1400px), where Bootstrap would otherwise
   widen it to 1320px. Applies everywhere .container is used (header, footer,
   every section) - .container-fluid is untouched and stays full width. */
@media (min-width: 1400px) {
  .container { max-width: 1140px; }
}

h1, .h1 { font-size: 48px; line-height: 1.125; letter-spacing: -1.9px; }
h2, .h2 { font-size: 40px; line-height: 1.1; letter-spacing: -0.8px; }
h3, .h3 { font-size: 28px; line-height: 1.21; }
h4, .h4 { font-size: 24px; line-height: 1.25; font-weight: 600; }
h5, .h5 { font-size: 22px; line-height: 1.18; font-weight: 600; }
h6, .h6 { font-size: 15px; line-height: 2; font-weight: 600; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--wt-dark);
  letter-spacing: -0.02em;
}

a {
  color: var(--wt-navy);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
a:hover { color: var(--wt-navy-dark); }

.text-navy { color: var(--wt-navy) !important; }
.bg-navy { background-color: var(--wt-navy) !important; }
.section-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wt-navy);
}
.section-title { font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin-bottom: .75rem; }
.section-sub { color: var(--wt-gray); max-width: 640px; }
.section-py { padding-block: clamp(3rem, 6vw, 5.5rem); }
.bg-alt { background-color: var(--wt-bg-alt); }

/* ---------- Buttons ---------- */
.btn {
  transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.15); }
.btn:active { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}
.btn-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--wt-navy);
  --bs-btn-border-color: var(--wt-navy);
  --bs-btn-hover-bg: var(--wt-navy-dark);
  --bs-btn-hover-border-color: var(--wt-navy-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--wt-navy-dark);
  --bs-btn-active-border-color: var(--wt-navy-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  padding: .75rem 1.75rem;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .04em;
}
.btn-outline-light-navy {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,.5);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--wt-navy);
  font-family: var(--font-heading);
  font-weight: 600;
  padding: .75rem 1.75rem;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .04em;
}
.btn-orange {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--wt-orange);
  --bs-btn-border-color: var(--wt-orange);
  --bs-btn-hover-bg: var(--wt-orange-dark);
  --bs-btn-hover-border-color: var(--wt-orange-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--wt-orange-dark);
  --bs-btn-active-border-color: var(--wt-orange-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  padding: .8rem 2rem;
  border-radius: 4px;
  font-size: .95rem;
}

/* ---------- Header top bar (logo + contact info) ---------- */
.header-top {
  background: #fff;
  border-bottom: 1px solid var(--wt-gray-light);
}
.header-top .logo img { height: 56px; width: auto; }
.header-top .info-divider {
  width: 1px;
  align-self: stretch;
  background: var(--wt-gray-light);
  margin: .5rem 0;
}
.header-top .info-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  text-decoration: none;
}
.header-top .info-item i {
  color: var(--wt-navy);
  font-size: 1.3rem;
  margin-top: .15rem;
}
.header-top .info-item strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .92rem;
  color: var(--wt-dark);
}
.header-top .info-item span {
  display: block;
  font-size: .88rem;
  color: var(--wt-gray);
}

.navbar-toggler { border: none; padding: .25rem .5rem; }
.navbar-toggler i { font-size: 1.4rem; color: var(--wt-navy); }
.navbar-toggler:focus { box-shadow: none; }

/* ---------- Header nav bar ---------- */
.site-header { background: #fff; }
.header-nav { background: #fff; }
.header-nav .container { position: relative; }

/* Anything that sticks under the header (service sidebar, blog sidebar)
   must use this instead of Bootstrap's bare .sticky-top: .sticky-top is
   `top:0; z-index:1020`, the exact same z-index the header itself uses, so
   once both are pinned they tie on z-index and whichever sits later in the
   DOM (the sidebar) paints over the header instead of stopping below it.
   z-index here is deliberately far below the header's 1020 so the header
   (and its mega menu) always wins regardless of the top offset below. */
.sticky-below-header {
  position: sticky;
  top: 155px; /* approx. rendered height of .header-top + the nav row */
  z-index: 5;
}
@media (max-width: 991.98px) {
  .sticky-below-header { position: static; top: auto; }
}

.navbar-nav .nav-link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--wt-dark) !important;
  padding: 1.4rem 1rem !important;
  position: relative;
}
.navbar-nav .nav-link.active { color: var(--wt-gray) !important; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.show {
  color: var(--wt-navy) !important;
}
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 1rem; right: 1rem; bottom: .75rem;
  height: 2px;
  background: var(--wt-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.show::after {
  transform: scaleX(1);
}
.navbar-nav .dropdown-toggle::after {
  border-top-color: currentColor;
  vertical-align: .15em;
}
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:focus-visible { outline: none; box-shadow: none; }

.header-cta {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.header-cta i { color: var(--wt-navy); font-size: 1.4rem; }
.header-cta .phone-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--wt-dark);
  text-decoration: none;
}
.header-cta .callback-link {
  display: block;
  font-size: .82rem;
  color: var(--wt-navy);
}

/* ---------- Mega menu ---------- */
.mega-menu-wrap { position: static; }
.mega-menu {
  position: absolute;
  width: min(1200px, 92vw);
  background: #fff;
  border: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 24px 48px rgba(0,0,0,.18);
  padding: 2.5rem 3rem;
  margin: 0;
  display: none;
  z-index: 1050;
}
/* Bootstrap adds data-bs-popper="static" to every dropdown-menu it manages (even
   with data-bs-display="static") and its own `.dropdown-menu[data-bs-popper]` rule
   (specificity 0,2,0) sets left:0/top:100%, beating a plain `.mega-menu` class rule
   and throwing the centered menu off-screen. Match that selector's specificity so
   our centering wins regardless of stylesheet order. */
.dropdown-menu.mega-menu,
.dropdown-menu.mega-menu[data-bs-popper] {
  top: 100%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.mega-menu.show { display: block; }
.mega-menu h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--wt-dark);
  margin-bottom: 1.25rem;
}
/* Separator line starts at the links, not alongside the column heading -
   so it's on the list itself, not the whole column. */
.mega-menu .col-6.mega-col + .col-6.mega-col ul,
.mega-menu .col-lg-5.mega-col ul {
  border-left: 1px solid #dedede;
  padding-left: 2.5rem;
}
.mega-menu ul { list-style: none; padding: 0; margin: 0; }
.mega-menu ul li { margin-bottom: 1rem; }
.mega-menu ul li:last-child { margin-bottom: 0; }
.mega-menu ul li a {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--wt-gray);
}
.mega-menu ul li a:hover { color: var(--wt-navy); }
.mega-menu ul li a i.arrow {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wt-navy);
  border-radius: 50%;
  color: #fff;
  font-size: .6rem;
  transition: background-color .2s ease;
}
.mega-menu ul li a:hover i.arrow { background: var(--wt-orange); }

/* ---------- Hero / homepage banner ----------
   A full-width IMAGE (not a CSS background-cover crop) with the heading,
   intro text and CTA absolutely positioned on top of it, at the exact
   percentage offsets and breakpoints wisetech.ae's own banner uses - so the
   image always renders at its own aspect ratio (never stretched/cropped
   out of shape, never blurry) at any screen size. */
.hero { position: relative; width: 100%; line-height: 0; }
.hero-banner-img { width: 100%; height: auto; display: block; }

/* The content sits inside the same .container the header logo/nav use, so
   its left edge always lines up with them instead of drifting at a fixed
   percentage of the (full-bleed) hero image's width. Only the vertical
   (top) offset still varies per breakpoint below. */
.hero-banner-content-wrap {
  position: absolute; top: 18%; left: 0; right: 0;
  z-index: 2;
}
.hero-banner-content {
  max-width: 600px;
  display: flex; flex-direction: column;
}
.hero-banner-heading {
  color: #fff;
}
.hero-banner-heading h1 {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.hero-banner-text {
  color: #fff;
  margin-top: 1.25rem;
}
.hero-banner-text p {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1.6;
}
.hero-banner-cta { margin-top: 1.75rem; }

@media (min-width: 1441px) {
  .hero-banner-content-wrap { top: 16%; }
}
@media (max-width: 1044px) and (min-width: 1025px) {
  .hero-banner-content-wrap { top: 16%; }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .hero-banner-content-wrap { top: 12%; }
  .hero-banner-heading h1 { font-size: 36px; }
  .hero-banner-text p { line-height: 1.5rem; }
  .hero-banner-cta { margin-top: 1.25rem; }
}
@media (max-width: 768px) and (min-width: 481px) {
  .hero-banner-content-wrap { top: 18%; }
  .hero-banner-heading h1 { font-size: 20px; }
  .hero-banner-text { margin-top: .75rem; }
  .hero-banner-text p { line-height: 1.1rem; }
  .hero-banner-cta { margin-top: 1rem; }
}
@media (max-width: 480px) {
  .hero-banner-heading h1 { font-size: 20px; }
  .hero-banner-text { display: none; }
  .hero-banner-cta { margin-top: .75rem; }
}
@media (max-width: 320px) {
  .hero-banner-heading h1 { font-size: 18px; }
  .hero-banner-text { display: none; }
}

/* ---------- Value props (sit on navy hero-continuation band) ---------- */
.value-props { background: var(--wt-navy); padding-block: clamp(2rem, 4vw, 3rem); }
.value-card {
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.5rem 1rem 0;
}
.value-card .icon {
  flex: 0 0 auto;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}
.value-card h3 { font-size: 1.1rem; margin-bottom: .4rem; color: #fff; }
.value-card p { color: rgba(255,255,255,.75); font-size: .9rem; margin-bottom: 0; }

/* ---------- Services (tabs) ---------- */
.services-section { background: #202020; }
.services-section .section-title { color: #fff; }

.services-tabs .nav-link {
  font-family: var(--font-heading);
  font-weight: 600;
  color: rgba(255,255,255,.6);
  border: none;
  border-bottom: 3px solid transparent;
  padding: .6rem 1.5rem;
  background: transparent;
  transition: color .2s ease, border-color .2s ease;
}
.services-tabs .nav-link:hover:not(.active) {
  color: rgba(255,255,255,.9);
  border-bottom-color: rgba(255,255,255,.3);
}
.services-tabs .nav-link.active {
  color: #fff;
  border-bottom-color: var(--wt-orange);
  background: transparent;
}

.service-card { height: 100%; }
.service-card .thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.service-card .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.service-card:hover .thumb img { transform: scale(1.06); }
.service-card h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.service-card h3 a { color: #fff; text-decoration: none; transition: color .2s ease; }
.service-card h3 a:hover { color: var(--wt-orange); }
.service-card p { color: #9a9a9a; font-size: .92rem; margin-bottom: 1rem; }
.service-card .read-more {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.service-card .read-more i { color: var(--wt-orange); }
.service-card .read-more:hover { color: var(--wt-orange); }

/* ---------- Infrastructure banner ---------- */
.infra-banner { background: #fff; padding-block: 2.5rem; }
.infra-banner h2 {
  color: var(--wt-navy);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  margin-bottom: 0;
}
.infra-buttons { width: 100%; max-width: 340px; }
.infra-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: var(--wt-navy);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .95rem;
  padding: .85rem 1.5rem;
}
.infra-buttons a:first-child { border-radius: 4px 4px 0 0; }
.infra-buttons a:last-child {
  border-radius: 0 0 4px 4px;
  border-top: 1px solid rgba(255,255,255,.25);
}
.infra-buttons a:hover { background: var(--wt-navy-dark); color: #fff; }

/* ---------- Stats / years banner ---------- */
.stats-banner {
  position: relative;
  color: #fff;
  text-align: center;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--stats-bg, radial-gradient(ellipse at 30% 20%, #0d3a75 0%, #041c3f 55%, #020f24 100%)) center / cover no-repeat;
  overflow: hidden;
}
.stats-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .69;
}
.stats-banner .container { position: relative; z-index: 1; }
.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  margin-bottom: 2.5rem;
}
.stat-item { display: flex; align-items: center; gap: .85rem; }
.stat-item i { font-size: 2rem; color: #fff; }
.stat-item .stat-text {
  text-align: left;
  font-size: .95rem;
  line-height: 1.3;
}
.years-highlight {
  display: inline-block;
  background: var(--wt-navy);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  padding: .1em .35em;
  margin-bottom: .5rem;
}
.stats-banner h3 {
  color: #fff;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  margin-bottom: 2rem;
}
.stats-banner .btn-outline-light-navy { --bs-btn-color: #fff; }

/* ---------- CTA form section ---------- */
.cta-form-section { background: #3d5a8a; padding-block: clamp(3rem, 6vw, 4.5rem); }
.cta-form-section .kicker { color: rgba(255,255,255,.8); font-size: .95rem; margin-bottom: 1rem; }
.cta-form-section h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.cta-form-section .form-control {
  border: none;
  border-radius: 2px;
  padding: .85rem 1rem;
  font-size: .95rem;
}
.cta-form-section .form-select {
  border: none;
  border-radius: 2px;
  padding: .85rem 1rem;
  font-size: .95rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: #212832;
  color: rgba(255,255,255,.65);
}
.site-footer .footer-logo { height: 90px; width: auto; max-width: 100%; opacity: .8; }
.site-footer h6 {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.25);
  margin-bottom: 1.25rem;
}
.site-footer strong { color: #fff; font-size: 1.125rem; font-weight: 600; display: block; margin-bottom: .25rem; }
.site-footer a { color: #f0f0f0; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.site-footer ul li { margin-bottom: .75rem; font-size: .92rem; }
.site-footer .contact-block { margin-bottom: 1.25rem; }
.site-footer .contact-block span { color: #e6e6e6; display: block; max-width: 260px; }
.site-footer .footer-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--wt-navy);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .9rem;
  padding: .65rem 1.4rem;
  border-radius: 4px;
}
.site-footer .footer-cta:hover { background: #000; }
.site-footer .footer-play {
  position: relative;
  width: 45px; height: 45px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wt-navy);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1rem;
  box-shadow: 0 0 0 4px rgba(255,255,255,.15);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.site-footer .footer-play:hover { background: var(--wt-orange); transform: scale(1.05); }
.site-footer .footer-play i { position: relative; z-index: 1; }
/* Continuously-pulsing "sonar" rings drawing attention to the video button. */
.footer-play-ping {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  animation: footer-play-ping 2.4s cubic-bezier(0, .5, .5, 1) infinite;
  pointer-events: none;
}
.footer-play-ping.delay { animation-delay: 1.2s; }
@keyframes footer-play-ping {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-play-ping { animation: none; display: none; }
}
.footer-divider { border-color: rgba(255,255,255,.2); margin: 2rem 0; }
.footer-bottom {
  color: rgba(255,255,255,.8);
  font-size: .85rem;
}
.footer-bottom a { color: rgba(255,255,255,.85); }
.footer-bottom a:hover { color: #fff; }
.social-icons a {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: .6rem;
  color: rgba(255,255,255,.91);
  font-size: 1.1rem;
  transition: color .2s ease;
}
.social-icons a:hover { color: var(--wt-orange); }
.social-icons a svg { display: block; }

/* ---------- Service detail page ---------- */
.service-detail .hero-img {
  width: 100%;
  margin-bottom: 2rem;
}
.service-detail h1 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 1.25rem;
}
.service-detail h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: .85rem;
}
.service-detail p {
  color: var(--wt-gray);
  margin-bottom: 1.1rem;
}
.service-detail blockquote {
  border-left: 4px solid var(--wt-navy);
  background: var(--wt-bg-alt);
  padding: 1.4rem 1.75rem;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--wt-dark);
  margin: 2rem 0;
}

/* FAQ accordion */
.service-faq { margin-top: 2.5rem; }
.service-faq .accordion-item {
  background: #f5f5f5;
  border: none;
  border-radius: 3px;
  margin-bottom: .6rem;
  overflow: hidden;
}
.service-faq .accordion-button {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .95rem;
  color: var(--wt-dark);
  background: transparent;
  box-shadow: none !important;
  padding: 1rem 1.25rem;
}
.service-faq .accordion-button::after { display: none; }
.service-faq .accordion-button:not(.collapsed) {
  background: #fff;
  color: var(--wt-navy);
}
.service-faq .accordion-icon {
  margin-left: auto;
  color: var(--wt-gray);
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.service-faq .accordion-button:not(.collapsed) .accordion-icon {
  transform: rotate(180deg);
  color: var(--wt-navy);
}
.service-faq .accordion-body {
  background: #fff;
  color: var(--wt-gray);
  font-size: .92rem;
  padding: 0 1.25rem 1.25rem;
}

/* Sidebar */
.service-nav-list { margin-bottom: 0; }
.service-nav-list a {
  display: block;
  padding: 1rem 1.25rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
  background: #eeeeee;
  border-left: 4px solid transparent;
  margin-bottom: 3px;
}
.service-nav-list a:hover { color: var(--wt-navy); }
.service-nav-list a.active {
  color: var(--wt-navy);
  border-left-color: var(--wt-navy);
}
.service-nav-list a:last-child { margin-bottom: 0; }

.download-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: #1e1e1e;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .9rem;
  padding: 1rem;
}
.download-profile:hover { background: #000; color: #fff; }

.sidebar-widget-cta {
  background: var(--wt-navy);
  color: #fff;
  padding: 1.75rem;
}
.sidebar-widget-cta h6 {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .85rem;
}
.sidebar-widget-cta p {
  color: rgba(255,255,255,.85);
  font-size: .9rem;
  margin-bottom: 1.25rem;
}
.sidebar-widget-cta .btn-light {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--wt-navy);
}

/* Bottom "looking for a consultant" banner */
.cta-consultant-banner {
  background: #170b5e;
  color: #fff;
  padding-block: 2.25rem;
}
.cta-consultant-banner h2 {
  color: #fff;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  margin-bottom: 0;
}
.highlight-orange {
  display: inline-block;
  border-bottom: 4px solid var(--wt-orange);
  padding-bottom: 2px;
}

/* ---------- Services listing page ---------- */
.services-page-banner {
  background: #2d3142;
  padding-block: 2.5rem;
}
.services-page-banner h1 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin-bottom: 0;
}

.listing-card { background: #eef0f3; height: 100%; transition: box-shadow .25s ease, transform .25s ease; }
.listing-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.1); transform: translateY(-4px); }
.listing-card .thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.listing-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.listing-card:hover .thumb img { transform: scale(1.06); }
.listing-card .body { padding: 1.25rem 1.25rem 1.5rem; }
.listing-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.listing-card h3 a { color: var(--wt-navy); }
.listing-card h3 a:hover { color: var(--wt-navy-dark); }
.listing-card p {
  color: var(--wt-gray);
  font-size: .88rem;
  margin-bottom: .75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.listing-card .read-more-sm {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .85rem;
  color: var(--wt-navy);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.listing-card .read-more-sm i { font-size: .7rem; }
.listing-card .read-more-sm:hover { color: var(--wt-navy-dark); }

/* ---------- About us page ---------- */
.about-intro-section { background: var(--wt-bg-alt); padding-block: clamp(2.5rem, 5vw, 4rem); }
.about-intro-section p { color: #555; margin-bottom: 1.1rem; }
.about-intro-section blockquote {
  background: #fff;
  border-left: 4px solid var(--wt-navy);
  padding: 1.4rem 1.75rem;
  font-style: italic;
  color: #444;
  margin: 1.5rem 0 0;
}

.youtube-card {
  display: block;
  background: #111;
  border-radius: 4px;
  overflow: hidden;
  color: #fff;
}
.youtube-card:hover { color: #fff; }
.youtube-card .yt-top {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
}
.youtube-card .yt-avatar {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--wt-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
}
.youtube-card .yt-title { font-size: .85rem; font-weight: 700; line-height: 1.3; }
.youtube-card .yt-channel { font-size: .75rem; color: rgba(255,255,255,.6); }
.youtube-card .yt-thumb {
  position: relative; aspect-ratio: 16/10;
  display: block; width: 100%;
  border: none; padding: 0; margin: 0; background: none;
}
.youtube-card .yt-thumb.yt-play-trigger { cursor: pointer; }
.youtube-card .yt-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.youtube-card .yt-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 44px;
  background: #ff0000;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  transition: transform .2s ease, background-color .2s ease;
}
.youtube-card .yt-play-trigger:hover .yt-play { transform: translate(-50%, -50%) scale(1.08); background: #cc0000; }
.youtube-card .yt-thumb iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.youtube-card .yt-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  font-size: .85rem;
}
.youtube-card .yt-icons { display: flex; gap: 1rem; color: rgba(255,255,255,.7); }
.youtube-card .yt-watch { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.youtube-card .yt-watch i { color: #ff0000; font-size: 1.1rem; }

/* Team */
.team-heading { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.team-card {
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 2.25rem 1.5rem;
  text-align: center;
  height: 100%;
  transition: box-shadow .25s ease, transform .25s ease;
}
.team-card:hover { box-shadow: 0 14px 32px rgba(0,0,0,.12); transform: translateY(-4px); }
.team-card .avatar {
  width: 130px; height: 130px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1.25rem;
}
.team-card .avatar img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.team-card:hover .avatar img { transform: scale(1.08); }
.team-card h3 { font-size: 1.15rem; margin-bottom: .25rem; }
.team-card .role { color: var(--wt-gray); font-size: .9rem; }

/* ---------- Legal pages (Terms & Conditions, Privacy Policy, etc.) ---------- */
.legal-toc {
  background: var(--wt-bg-alt);
  border-radius: 8px;
  padding: 1.5rem;
}
.legal-toc h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wt-gray);
  margin-bottom: 1rem;
}
.legal-toc ul { list-style: none; margin: 0; padding: 0; }
.legal-toc li + li { margin-top: .65rem; }
.legal-toc a {
  display: block;
  font-size: .88rem;
  line-height: 1.35;
  color: var(--wt-dark);
  border-left: 2px solid var(--wt-gray-light);
  padding-left: .85rem;
  transition: color .2s ease, border-color .2s ease;
}
.legal-toc a:hover,
.legal-toc a.is-active {
  color: var(--wt-navy);
  border-left-color: var(--wt-orange);
}

.legal-toc-mobile {
  background: var(--wt-bg-alt);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 2.5rem;
}
.legal-toc-mobile summary {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  color: var(--wt-navy);
  cursor: pointer;
}
.legal-toc-mobile ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.legal-toc-mobile li + li { margin-top: .6rem; }
.legal-toc-mobile a { font-size: .9rem; color: var(--wt-dark); }
.legal-toc-mobile a:hover { color: var(--wt-navy); }

.legal-content { color: #3a3f4b; font-size: 1rem; line-height: 1.75; }
.legal-content > *:first-child { margin-top: 0; }
.legal-content h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--wt-navy);
  font-size: 1.4rem;
  margin: 2.75rem 0 1rem;
  scroll-margin-top: 175px;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--wt-dark);
  font-size: 1.1rem;
  margin: 1.75rem 0 .85rem;
  scroll-margin-top: 175px;
}
.legal-content p { margin: 0 0 1.1rem; }
.legal-content ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.legal-content ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .7rem;
}
.legal-content ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 2px;
  background: var(--wt-orange);
}
.legal-content a { color: var(--wt-navy); text-decoration: underline; }
.legal-content a:hover { color: var(--wt-navy-dark); }
.legal-content strong { color: var(--wt-dark); }
.legal-content .legal-updated {
  display: inline-block;
  background: var(--wt-bg-alt);
  color: var(--wt-gray);
  font-size: .82rem;
  font-weight: 600;
  padding: .4rem .9rem;
  border-radius: 30px;
  margin-bottom: 1.75rem;
}
.legal-content .legal-contact-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
.legal-content .legal-contact-list li {
  padding-left: 0;
  display: flex;
  gap: .5rem;
  margin-bottom: .5rem;
}
.legal-content .legal-contact-list li::before { content: none; }
.legal-content .legal-contact-list strong { flex: 0 0 auto; min-width: 70px; color: var(--wt-navy); }
@media (max-width: 991.98px) {
  .legal-content h2 { scroll-margin-top: 90px; }
  .legal-content h3 { scroll-margin-top: 90px; }
}

/* ---------- Contact us page ---------- */
.contact-form-section label {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--wt-dark);
  margin-bottom: .5rem;
  display: block;
}
.contact-form-section .required { color: #e0392b; margin-left: .1rem; }
.contact-form-section .form-control {
  border: 1px solid var(--wt-gray-light);
  border-radius: 2px;
  padding: .75rem .9rem;
}
.contact-form-section textarea.form-control { min-height: 160px; }

.contact-map { height: 100%; min-height: 420px; }
.contact-map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; }

#iframe-container { width: 100%; }
#iframe-outlook { width: 100%; height: 80vh; min-height: 650px; border: 0; display: block; }

.contact-details-bar { background: #171e2e; color: #fff; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.contact-details-bar h2 { color: #fff; font-size: 1.6rem; margin-bottom: 1.5rem; }
.contact-details-bar .detail-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.contact-details-bar .detail-row i { color: var(--wt-orange); font-size: 1.1rem; width: 20px; text-align: center; }
.contact-details-bar .social-icons.light a {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.contact-details-bar .social-icons.light a:hover { background: var(--wt-orange); border-color: var(--wt-orange); color: #fff; }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 56px; height: 56px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 1040;
}
.whatsapp-fab:hover { color: #fff; background: #1ebd58; }

/* ---------- Video modal (footer "play" button) ---------- */
.video-modal {
  position: fixed; inset: 0;
  z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.video-modal[hidden] { display: none; }
.video-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 14, 26, .85);
  animation: video-modal-fade .25s ease both;
}
.video-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 960px;
  animation: video-modal-in .3s cubic-bezier(.25, .46, .45, .94) both;
}
.video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.video-modal-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-modal-close {
  position: absolute;
  top: -2.75rem; right: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.video-modal-close:hover { background: var(--wt-orange); transform: rotate(90deg); }
@keyframes video-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes video-modal-in {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 575.98px) {
  .video-modal-close { top: -2.5rem; width: 36px; height: 36px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .video-modal-backdrop, .video-modal-dialog { animation: none; }
}

/* ---------- Blog listing ---------- */
.blog-card {
  height: 100%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 11px rgba(0,0,0,.12);
  transition: box-shadow .25s ease, transform .25s ease;
}
.blog-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.16); transform: translateY(-4px); }
.blog-card .thumb { padding: 1.25rem 1.25rem 0; }
.blog-card .thumb-frame { position: relative; width: 100%; padding-top: 66.6667%; /* 3:2 ratio - works in every browser, unlike relying on aspect-ratio alone */ border-radius: 10px; overflow: hidden; }
.blog-card .thumb-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .thumb-frame img { transform: scale(1.06); }
.blog-card .body { padding: 1rem 1.25rem 1.25rem; }
.blog-card h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.7rem;
  margin-bottom: .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card h2 a { color: var(--wt-dark); }
.blog-card h2 a:hover { color: var(--wt-navy); }
.blog-card .date {
  font-size: .875rem;
  font-weight: 500;
  color: var(--wt-navy);
  margin-bottom: .5rem;
}
.blog-card .excerpt {
  color: #555;
  font-size: .92rem;
  margin-bottom: .75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card .read-more-blog {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--wt-navy);
}
.blog-card .read-more-blog i { font-size: .7rem; margin-left: .3rem; display: none; }
.blog-card .read-more-blog:hover { color: var(--wt-navy-dark); }

.blog-pagination .page-link {
  border: none;
  background: #eef0f3;
  color: var(--wt-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 4px;
  border-radius: 4px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.blog-pagination .page-item.active .page-link { background: var(--wt-navy); color: #fff; }
.blog-pagination .page-link:hover { background: var(--wt-navy); color: #fff; }

/* ---------- Blog detail ---------- */
.blog-detail .hero-img { width: 100%; border-radius: 6px; margin-bottom: 2rem; }

/* Blog detail page's own title block - plain on white, not the shared
   .services-page-banner (used by other page types), since wisetech.ae's
   own blog post layout puts the title/meta directly on the page above the
   featured image instead of inside a colored hero band. */
.blog-detail-title { padding-block: clamp(3rem, 6vw, 5.5rem) 1.5rem; background: #fff; }

/* Same section, without the shared .section-py utility's top padding -
   the title block above already provides the vertical breathing room
   before the featured image, so the image itself shouldn't have another
   big gap on top of it. Bottom padding is kept for the space before the
   CTA banner that follows. */
.blog-detail-body { padding-block: 0 clamp(3rem, 6vw, 5.5rem); }
.blog-detail-title h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1.25rem; color: var(--wt-dark); }
.blog-detail-title .post-meta {
  display: flex;
  flex-wrap: wrap;
  color: var(--wt-gray);
  font-size: .9rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--wt-gray-light);
}
.blog-detail-title .post-meta span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-right: 1rem;
  margin-right: 1rem;
  border-right: 1px solid var(--wt-gray-light);
}
.blog-detail-title .post-meta span:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.blog-detail-title .post-meta i { color: var(--wt-navy); }
.blog-detail h3 { font-size: 1.2rem; margin-top: 2rem; margin-bottom: .85rem; }
.blog-detail p { color: var(--wt-gray); margin-bottom: 1.1rem; }
.blog-detail ul.styled-list { padding-left: 1.1rem; margin-bottom: 1.25rem; }
.blog-detail ul.styled-list li { color: var(--wt-gray); margin-bottom: .6rem; }
.blog-detail blockquote {
  border-left: 4px solid var(--wt-navy);
  background: var(--wt-bg-alt);
  padding: 1.4rem 1.75rem;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--wt-dark);
  margin: 2rem 0;
}
.blog-share {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 2rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wt-gray-light);
}
.blog-share span { font-family: var(--font-heading); font-weight: 700; font-size: .9rem; color: var(--wt-dark); }

.blog-sidebar-widget { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.06); padding: 1.5rem; margin-bottom: 1.5rem; }
.blog-sidebar-widget h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--wt-dark);
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--wt-orange);
  margin-bottom: 1.25rem;
  display: inline-block;
}
.blog-sidebar-widget .tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-sidebar-widget .tag-cloud a {
  display: inline-block;
  font-size: .8rem !important;
  font-weight: 600;
  color: var(--wt-gray);
  background: var(--wt-bg-alt);
  border-radius: 20px;
  padding: .4rem .9rem;
  transition: color .2s ease, background-color .2s ease;
}
.blog-sidebar-widget .tag-cloud a:hover { color: #fff; background: var(--wt-navy); }

/* Post's own tags, shown at the end of the blog content (left column) */
.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--wt-gray-light); }
.post-tags a {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--wt-gray);
  background: var(--wt-bg-alt);
  border-radius: 20px;
  padding: .4rem .9rem;
  transition: color .2s ease, background-color .2s ease;
}
.post-tags a:hover { color: #fff; background: var(--wt-navy); }
.recent-post-item { display: flex; gap: .85rem; margin-bottom: 1.1rem; }
.recent-post-item:last-child { margin-bottom: 0; }
.recent-post-item .thumb { flex: 0 0 auto; width: 70px; height: 60px; border-radius: 4px; overflow: hidden; }
.recent-post-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-post-item .info h6 {
  border: none; padding: 0; margin: 0 0 .3rem; display: block;
  font-size: .88rem; line-height: 1.3;
}
.recent-post-item .info h6 a { color: var(--wt-dark); }
.recent-post-item .info h6 a:hover { color: var(--wt-navy); }
.recent-post-item .info .date { font-size: .78rem; color: var(--wt-gray); }
.category-list { list-style: none; padding: 0; margin: 0; }
.category-list li { margin-bottom: .1rem; }
.category-list li a {
  display: flex;
  justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px solid var(--wt-gray-light);
  color: var(--wt-dark);
  font-size: .92rem;
  font-weight: 600;
}
.category-list li:last-child a { border-bottom: none; }
.category-list li a:hover { color: var(--wt-navy); }
.category-list li a span { color: var(--wt-gray); font-weight: 400; }

/* ---------- IT AMC Dubai (bespoke service page) ---------- */
.amc-hero .container,
.amc-intro-section .container,
.amc-card-section .container,
.amc-links-section .container {
  max-width: 1140px;
}
.amc-hero {
  background: linear-gradient(224deg, #00A7E0 0%, #003481 61%);
  padding-block: 2.5rem 3rem;
  color: #fff;
}
.amc-hero h1 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.1rem); line-height: 1.25; margin-bottom: 1.25rem; }
.amc-hero .lead { color: rgba(255,255,255,.92); font-size: 1rem; margin-bottom: 2rem; }
.amc-feature-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.amc-feature-row .item { flex: 1 1 140px; display: flex; align-items: center; gap: .75rem; text-align: left; }
.amc-feature-row .item i {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(46, 156, 226, .5);
  border-radius: 50%;
  font-size: 1.05rem;
  color: #2E9CE2;
}
.amc-feature-row .item span { display: block; color: #fff; font-size: .92rem; font-weight: 500; line-height: 1.3; }
.amc-hero-img { width: 100%; max-width: 380px; display: block; margin: 0 auto; }

.amc-quote-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
  padding: 1.75rem 1.75rem .5rem;
}
.amc-quote-card h3 { font-size: 1.5rem; color: var(--wt-navy); margin-bottom: .25rem; }
.amc-quote-card > p { font-size: .875rem; color: #2b212c; margin-bottom: 1.25rem; }
.amc-quote-card label { font-size: .8rem; font-weight: 600; color: #1b1f2a; margin-bottom: .35rem; display: block; }
.amc-quote-card .form-control {
  border: 1px solid #d7dbe7;
  border-radius: 10px;
  background: #f9fafc;
  font-size: .875rem;
  padding: .55rem .85rem;
  margin-bottom: 1rem;
}
.amc-quote-card .form-control:focus {
  border-color: #1a73e8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26,115,232,.12);
}
.amc-quote-card .note { font-size: .75rem; color: #7a8194; margin-bottom: 1.1rem; }
.amc-quote-card .btn-submit-navy {
  width: 100%;
  height: 52px;
  border-radius: 10px;
  background: #0b1f4b;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  margin-bottom: 1.25rem;
  transition: background-color .2s ease;
}
.amc-quote-card .btn-submit-navy:hover { background: #142f66; color: #fff; }
.amc-quote-sticky-wrap { position: relative; max-width: 300px; }
@media (min-width: 992px) {
  .amc-quote-sticky-wrap { margin-top: -170px; position: sticky; top: 6.5rem; z-index: 5; }
}

.amc-intro-section { background: #EEF2F6; padding-block: clamp(2.5rem, 5vw, 4rem); }
.amc-intro-section h3 { color: #2B212C; font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-bottom: 1.1rem; }
.amc-intro-section p { color: #2B212C; }
.amc-check-list { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.amc-check-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e2e6ec;
  font-size: .95rem;
  color: #2B212C;
  font-weight: 500;
}
.amc-check-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.amc-check-list li i {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(46, 156, 226, .5);
  border-radius: 50%;
  color: #2E9CE2;
  font-size: 1.05rem;
}

.amc-card-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.amc-card {
  max-width: 1170px;
  margin-inline: auto;
  border: 8px solid #EEF2F6;
  border-radius: 24px;
  padding: 2rem clamp(1.25rem, 4vw, 2.75rem);
}
.amc-card h3 { color: #2B212C; font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 1rem; }
.amc-card > p { color: #2B212C; margin-bottom: 1.25rem; }

/* wisetech.ae's own AMC FAQ section has no card border/box around it -
   just the heading and accordion directly on the page, unlike the
   "Our AMC Services Include" card above. */
.amc-faq-plain h3 { color: #2B212C; font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 1.25rem; }
.amc-dash-list { list-style: none; padding: 0; margin: 0; }
.amc-dash-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e2e6ec;
  font-size: .95rem;
  color: #2B212C;
}
.amc-dash-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.amc-dash-list li i { color: #2FB7E6; font-size: .6rem; margin-top: .45rem; }

.amc-cta-light {
  max-width: 1170px;
  margin-inline: auto;
  background: #F4F4F4;
  border-radius: 24px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.amc-cta-light h3 { color: #2B212C; font-size: 1.25rem; margin-bottom: .5rem; }
.amc-cta-light p { color: #000; font-size: .875rem; margin-bottom: 0; max-width: 560px; }
.amc-cta-light .btn-amc-navy {
  flex: 0 0 auto;
  background: #003481;
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  padding: 1rem 2rem;
  font-size: .95rem;
}
.amc-cta-light .btn-amc-navy:hover { background: #3F51B5; color: #fff; }

.amc-links-section { background: #003481; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.amc-links-section h6 { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: 1.5rem; }
.amc-links-section ul { list-style: none; padding: 0; margin: 0; }
.amc-links-section li { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; font-size: .92rem; }
.amc-links-section li i { color: #fff; font-size: .6rem; margin-top: .5rem; }
.amc-links-section li span, .amc-links-section li a { color: rgba(255,255,255,.85); }
.amc-links-section .link-list a { text-decoration: underline; }
.amc-links-section .link-list a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .navbar-nav .nav-link { padding: .75rem 1rem !important; }
  .header-cta { display: none; }
  .mega-menu { position: static; width: 100%; box-shadow: none; padding: 1.5rem; }
  .dropdown-menu.mega-menu,
  .dropdown-menu.mega-menu[data-bs-popper] { position: static; left: auto; top: auto; transform: none; }
  .mega-menu .col-6.mega-col + .col-6.mega-col ul,
  .mega-menu .col-lg-5.mega-col ul { border-left: none; padding-left: 0; }
  .mega-menu .col-6.mega-col + .col-6.mega-col,
  .mega-menu .col-lg-5.mega-col { margin-top: 1.5rem; }
}
@media (max-width: 767.98px) {
  .header-top .info-item { display: none; }
}

/* ---------- Scroll-reveal animations ----------
   .reveal elements only start hidden/offset once JS confirms it can run
   (documentElement gets .js-anim, see the inline snippet in header.php) and
   IntersectionObserver in main.js then adds .is-visible as each element
   scrolls into view. Without JS, or with prefers-reduced-motion, everything
   just renders normally - never permanently hidden. */
.reveal {
  transition: opacity .7s cubic-bezier(.25, .46, .45, .94), transform .7s cubic-bezier(.25, .46, .45, .94);
}
/* Quicker, simple fade variant (opacity + ease, no slide) for tighter
   groups of elements (e.g. a row of feature items) where the standard
   .7s slide-in reads as too slow. */
.reveal-fast { transition-duration: .2s; transition-timing-function: ease; }
.js-anim .reveal { opacity: 0; }
.js-anim .reveal-up { transform: translateY(28px); }
.js-anim .reveal-down { transform: translateY(-28px); }
.js-anim .reveal-left { transform: translateX(-32px); }
.js-anim .reveal-right { transform: translateX(32px); }
.js-anim .reveal-zoom { transform: scale(.96); }
.reveal.is-visible { opacity: 1 !important; transform: none !important; }

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* Auto-stagger for card grids: any Bootstrap .row whose direct column
   children are .reveal (service/blog/listing/team cards) cascades in one
   after another instead of all at once. */
.row > .reveal:nth-child(2) { transition-delay: .08s; }
.row > .reveal:nth-child(3) { transition-delay: .16s; }
.row > .reveal:nth-child(4) { transition-delay: .24s; }
.row > .reveal:nth-child(5) { transition-delay: .32s; }
.row > .reveal:nth-child(6) { transition-delay: .4s; }
.row > .reveal:nth-child(n+7) { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
}