/* ════════════════════════════════════════════════
   TRANSCON IMPEX — general.css
   Brand Colors: #066c5f (Teal) · #fbe00b (Yellow) · #464646 (Charcoal)
   ════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@300;400;500;600&family=Oswald:wght@400;500;600;700&display=swap');

:root {
  --teal:      #066c5f;
  --teal-dk:   #054d43;
  --teal-lt:   #08806f;
  --teal-pale: #e8f4f2;
  --yellow:    #fbe00b;
  --yellow-dk: #d9c40a;
  --charcoal:  #464646;
  --charcoal-dk:#2a2a2a;
  --charcoal-lt:#6a6a6a;
  --white:     #ffffff;
  --bg:        #f5f8f7;
  --border:    #d8e0de;
  --shadow-s:  0 2px 10px rgba(6,108,95,.08);
  --shadow-m:  0 6px 24px rgba(6,108,95,.14);
  --shadow-l:  0 16px 50px rgba(6,108,95,.18);
  --fh: 'Montserrat', sans-serif;
  --fd: 'Oswald', sans-serif;
  --fb: 'Open Sans', sans-serif;
  --r:  6px;
  --rl: 12px;
  --tr: all .27s ease;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* 1. Clip horizontal overflow at the root */
html, body { overflow-x: hidden; max-width: 100%; }
/* or, better on modern browsers: */
html, body { overflow-x: clip; }
body { font-family: var(--fb); color: var(--charcoal); background: var(--white); line-height: 1.65; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6 { font-family: var(--fh); line-height: 1.2; color: var(--charcoal-dk); }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
img { max-width: 100%; display: block; }
::selection { background: var(--yellow); color: var(--charcoal-dk); }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 3px; }
ul li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.nav-item.has-submenu .sub-menu li > .navlink {
    padding: .55rem 1.1rem !important;
}
li.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-ancestor.menu-item-has-children.nav-item.has-submenu.active a {
    padding: 0px 1px 0px 7px !important;
}

/* ─── Preloader ─── */
#preloader {
  position: fixed; inset: 0; background: var(--charcoal-dk); z-index: 9999;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem;
  transition: opacity .5s ease, visibility .5s ease;
}
#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.pre-logo { height: 52px; }
.pre-bar { width: 180px; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.pre-progress { height: 100%; background: linear-gradient(90deg, var(--teal), var(--yellow)); animation: barload 1.8s ease forwards; }
@keyframes barload { from{width:0} to{width:100%} }

/* ─── Top Bar ─── */
.topbar { background: var(--charcoal-dk); font-family: var(--fb); font-size: .76rem; border-bottom: 2px solid var(--teal); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: .45rem 0; gap: 1rem; flex-wrap: wrap; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.topbar a, .topbar span { color: rgba(255,255,255,.55); transition: color .2s; font-size: .74rem; }
.topbar a:hover { color: var(--yellow); }
.topbar i { color: var(--teal); margin-right: 4px; }

/* ─── Navbar ─── */
#mainNav {
  position: fixed; top: 30px; left: 0; right: 0; z-index: 1050;
  background: transparent; padding: 0;
  transition: background .3s ease, box-shadow .3s ease, top .3s ease;
}
#mainNav .nav-item.ms-lg-2 img {
  width: 146px;
}
/* When topbar visible on desktop, shift nav down */
body.has-topbar #mainNav { top: 32px; }
body.has-topbar #mainNav.scrolled { top: 0; }

#mainNav .container { padding-top: .85rem; padding-bottom: .85rem; }
#mainNav.scrolled {
  background: var(--charcoal-dk);
  box-shadow: 0 2px 20px rgba(0,0,0,.4);
  border-bottom: 2px solid var(--teal);
}
#mainNav.scrolled .container { padding-top: .55rem; padding-bottom: .55rem; }

.navbar-brand img { height: 48px; }
.brand-text-fallback { font-family: var(--fd); font-size: 1.3rem; font-weight: 600; letter-spacing: .05em; color: #fff; }

.navbar-toggler {
  border: 1.5px solid rgba(255,255,255,.4);
  padding: .32rem .6rem; border-radius: var(--r);
  background: rgba(255,255,255,.07);
}
.navbar-toggler i { color: #fff; font-size: 1rem; }

.navlink {
  display: block;
  font-family: var(--fh); font-weight: 600; font-size: .79rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.85) !important;
  padding: .5rem .8rem !important;
  position: relative; transition: color .2s;
}
.navlink::after {
  content: ''; position: absolute; bottom: 0; left: .8rem; right: .8rem;
  height: 2px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.navlink:hover, .navlink.active { color: var(--yellow) !important; }
.navlink:hover::after, .navlink.active::after { transform: scaleX(1); }

.nav-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--fh); font-weight: 700; font-size: .77rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--yellow); color: var(--charcoal-dk) !important;
  padding: .5rem 0.9rem; border-radius: var(--r);
  border: 2px solid var(--yellow); transition: var(--tr);
}
.cta-strip .btn-teal {
  background: #fbe00b;
  color: #000;
}
.nav-cta:hover { background: var(--yellow-dk); border-color: var(--yellow-dk); color: var(--charcoal-dk); transform: translateY(-1px); }

@media (max-width: 991.98px) {
  #navbarMenu { background: var(--charcoal-dk); padding: 1rem; margin-top: .5rem; border-radius: var(--r); border: 1px solid rgba(255,255,255,.07); }
  .navlink { padding: .6rem .4rem !important; border-bottom: 1px solid rgba(255,255,255,.06); }
  .navlink::after { display: none; }
  .nav-cta { margin: .75rem 0 0; display: block; text-align: center; }
  .mobile-rotexlogo{
    display: block !important;
  }
  .navbar-brand {
  margin-right: 0;
}

  .hero {
    padding-top: 86px !important;
  }
  .navbar-brand img { height: 35px; }
}
.ind-hero > .container {
  padding-top: 104px !important;
}
.abt-hero > .container {
  padding-top: 90px !important;
}
.page-hero > .container ,.ct-hero > .container{
  padding-top: 111px !important;
}
 .mobile-rotexlogo{
    display: none;
    height: 35px;
  }
/* ─── Buttons ─── */
.btn-teal {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fh); font-weight: 700; font-size: .83rem; letter-spacing: .05em; text-transform: uppercase;
  background: var(--teal); color: #fff;
  padding: .75rem 1.8rem; border-radius: var(--r);
  border: 2px solid var(--teal); transition: var(--tr); text-decoration: none; white-space: nowrap;
}
.btn-teal:hover { background: var(--teal-dk); border-color: var(--teal-dk); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(6,108,95,.35); }

.btn-yellow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fh); font-weight: 700; font-size: .83rem; letter-spacing: .05em; text-transform: uppercase;
  background: var(--yellow); color: var(--charcoal-dk);
  padding: .75rem 1.8rem; border-radius: var(--r);
  border: 2px solid var(--yellow); transition: var(--tr); text-decoration: none; white-space: nowrap;
}
.btn-yellow:hover { background: var(--yellow-dk); border-color: var(--yellow-dk); color: var(--charcoal-dk); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(251,224,11,.4); }

.btn-outline-white {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fh); font-weight: 600; font-size: .83rem; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(255,255,255,.1); color: #fff;
  padding: .75rem 1.8rem; border-radius: var(--r);
  border: 2px solid rgba(255,255,255,.5); transition: var(--tr); text-decoration: none; white-space: nowrap;
  backdrop-filter: blur(4px);
}
.btn-outline-white:hover { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; }

.btn-outline-teal {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fh); font-weight: 700; font-size: .83rem; letter-spacing: .05em; text-transform: uppercase;
  background: transparent; color: var(--teal);
  padding: .75rem 1.8rem; border-radius: var(--r);
  border: 2px solid var(--teal); transition: var(--tr); text-decoration: none; white-space: nowrap;
}
.btn-outline-teal:hover { background: var(--teal); color: #fff; }

/* ─── Section atoms ─── */
.sec { padding: 5.5rem 0; }
.sec-alt { background: var(--bg); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--fh); font-weight: 700; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .65rem;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--teal); border-radius: 2px; }
.eyebrow-yellow { color: var(--yellow); }
.eyebrow-yellow::before { background: var(--yellow); }

.sec-title { font-family: var(--fh); font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 800; color: var(--charcoal-dk); line-height: 1.22; margin-bottom: .7rem; }
.sec-title-white { color: #fff; }

.ruled { width: 44px; height: 3px; background: var(--teal); border-radius: 2px; margin-bottom: 1.4rem; }
.ruled-yellow { background: var(--yellow); }

.body-lg { font-size: .97rem; color: var(--charcoal); line-height: 1.78; }
.body-md { font-size: .9rem; color: var(--charcoal-lt); line-height: 1.8; }

/* ════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 100px; padding-bottom: 4rem;
}
@media (min-width: 992px) { .hero { padding-top: 140px; } }

.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

/* Teal-tinted overlay — corporate feel */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(108deg, rgba(3,45,38,.93) 0%, rgba(4,60,52,.82) 45%, rgba(6,80,68,.45) 75%, rgba(6,80,68,.15) 100%),
    linear-gradient(0deg, rgba(2,30,26,.6) 0%, transparent 55%);
}

.hero > .container { position: relative; z-index: 2; width: 100%; }

.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
@media (max-width: 991.98px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Hero tag */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--fh); font-weight: 600; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-bottom: 1.3rem;
}
.eyebrow-line { display: inline-block; width: 22px; height: 2px; background: var(--yellow); border-radius: 2px; flex-shrink: 0; }

.hero-title {
  font-family: var(--fd); font-size: clamp(2.3rem, 4.5vw, 3.9rem);
  font-weight: 600; color: #fff; line-height: 1.1; letter-spacing: .01em; margin-bottom: 1.25rem;
}
.hero-title-accent { color: var(--yellow); }

.hero-sub { font-size: .96rem; font-weight: 300; color: rgba(255,255,255,.72); max-width: 480px; line-height: 1.8; margin-bottom: 2rem; }

.hero-btns { display: flex; gap: .85rem; flex-wrap: wrap; margin-bottom: 2.8rem; }

/* Stats bar */
.hero-stats {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r); overflow: hidden; backdrop-filter: blur(10px); max-width: 500px;
}
.hs-item { flex: 1; padding: .85rem .8rem; text-align: center; }
.hs-item strong { display: block; font-family: var(--fd); font-weight: 600; font-size: 1.2rem; color: var(--yellow); line-height: 1.1; }
.hs-item sup { font-size: .6em; }
.hs-item span { display: block; font-size: .6rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .1em; margin-top: .2rem; }
.hs-div { width: 1px; background: rgba(255,255,255,.1); align-self: stretch; }
@media (max-width: 575.98px) {
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .hs-div { display: none; }
  .hs-item { border-bottom: 1px solid rgba(255,255,255,.08); }
  .hs-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08); }
}

/* Hero card */
.hero-card {
  background: rgba(3,30,26,.82); border: 1px solid rgba(6,108,95,.35);
  border-radius: var(--rl); overflow: hidden; backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.hcard-inner .swiper-slide img { width: 100%; height: auto; object-fit: cover; display: block; }
.hcard-caption { padding: 1.1rem 1.3rem 0; background: rgba(3,30,26,.88); }
.hcard-caption span { display: block; font-family: var(--fh); font-weight: 700; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); margin-bottom: .3rem; }
.hcard-caption strong { display: block; color: #fff; font-family: var(--fh); font-size: .96rem; font-weight: 700; margin-bottom: .2rem; }
.hcard-caption p { color: rgba(255,255,255,.48); font-size: .76rem; margin: 0; }
.hcard-dots { position: static !important; padding: .55rem 1.3rem .15rem; text-align: left; background: rgba(3,30,26,.88); }
.hcard-dots .swiper-pagination-bullet { background: rgba(255,255,255,.28); opacity: 1; width: 6px; height: 6px; }
.hcard-dots .swiper-pagination-bullet-active { background: var(--yellow); width: 18px; border-radius: 3px; }
.hcard-nav { display: flex; gap: .5rem; padding: .6rem 1.3rem 1.1rem; background: rgba(3,30,26,.88); border-top: 1px solid rgba(6,108,95,.2); }
.hcard-nav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(6,108,95,.5); background: rgba(6,108,95,.15); color: rgba(255,255,255,.7); cursor: pointer; font-size: .72rem; transition: var(--tr); display: flex; align-items: center; justify-content: center; }
.hcard-nav button:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ════════════════════════════════════════════════
   MARQUEE  — FIXED: width:max-content is the key
   ════════════════════════════════════════════════ */
.marquee-wrap {
  background: var(--teal);
  overflow: hidden;
  padding: .65rem 0;
  border-top: 2px solid var(--yellow);
  border-bottom: 2px solid rgba(255,255,255,.1);
}
.marquee-content {
  /* CRITICAL: must be exactly 2× the single-set width */
  display: flex;           /* flex so items lay out in a row */
  width: max-content;      /* shrink-wrap to actual content */
  gap: 3rem;
  animation: mq-scroll 32s linear infinite;
  will-change: transform;
}
.marquee-wrap:hover .marquee-content { animation-play-state: paused; }
.marquee-content span {
  display: inline-flex; align-items: center; gap: .55rem; flex-shrink: 0;
  font-family: var(--fh); font-weight: 700;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.marquee-content span i { font-size: .32rem; color: var(--yellow); }
/* Animate exactly -50% so set-B seamlessly replaces set-A */
@keyframes mq-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ════════════════════════════════════════════════
   ABOUT
   ════════════════════════════════════════════════ */
.img-group { position: relative; padding-bottom: 2rem; padding-right: 2rem; }
.img-main { width: 100%; height: auto; object-fit: cover; border-radius: var(--rl); box-shadow: var(--shadow-l); }
.img-inset { position: absolute; bottom: 0; right: 0; width: 200px; height: 155px; object-fit: cover; border-radius: var(--r); border: 4px solid var(--white); box-shadow: var(--shadow-m); }
.img-badge {
  position: absolute; top: 2rem; left: -1rem;
  background: var(--teal); color: #fff;
  padding: 1.1rem 1.25rem; border-radius: var(--r);
  box-shadow: 0 6px 22px rgba(6,108,95,.45); text-align: center; line-height: 1.1;
}
.badge-num { font-family: var(--fd); font-size: 2.6rem; font-weight: 600; color: var(--yellow); display: inline; }
.badge-plus { font-family: var(--fd); font-size: 1.5rem; color: var(--yellow); }
.badge-label { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: .4rem; }

@media (max-width: 767.98px) { .img-inset { display: none; } .img-group { padding: 0; } .img-badge { left: .5rem; top: 1rem; } }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; align-items: flex-start; gap: .65rem; padding: .42rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; color: var(--charcoal); }
.check-list li:last-child { border: none; }
.check-list li i { color: var(--teal); flex-shrink: 0; margin-top: .22rem; }

.rotex-badge { display: flex; align-items: center; gap: .75rem; background: var(--teal-pale); border-radius: var(--r); border-left: 3px solid var(--teal); padding: .9rem 1.1rem; font-size: .83rem; color: var(--charcoal); }

/* ════════════════════════════════════════════════
   PRODUCTS
   ════════════════════════════════════════════════ */
.pcard { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; box-shadow: var(--shadow-s); transition: var(--tr); height: 100%; display: flex; flex-direction: column; }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); border-color: var(--teal); }
.pcard:hover .pcard-link { color: var(--teal-dk); gap: .55rem; }

.pcard-img { position: relative; height: auto; overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pcard:hover .pcard-img img { transform: scale(1.06); }
.pcard-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(3,30,26,.45)); }

.pcard-badge {
  position: absolute; bottom: .75rem; left: .75rem; z-index: 1;
  background: var(--teal); color: #fff;
  font-family: var(--fh); font-weight: 700; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .22rem .65rem; border-radius: 3px;
}

.pcard-body { padding: 1.3rem; flex: 1; display: flex; flex-direction: column; }
.pcard-body h3 { font-family: var(--fh); font-weight: 700; font-size: .96rem; color: var(--charcoal-dk); margin-bottom: .5rem; }
.pcard-body p { font-size: .83rem; color: var(--charcoal-lt); line-height: 1.68; flex: 1; }

.spec-list { list-style: none; padding: 0; margin: .85rem 0 .8rem; display: flex; flex-direction: column; gap: .22rem; }
.spec-list li { font-size: .75rem; color: var(--charcoal-lt); display: flex; align-items: center; gap: .4rem; }
.spec-list li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }

.pcard-link { font-family: var(--fh); font-weight: 700; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); display: inline-flex; align-items: center; gap: .35rem; transition: gap .2s, color .2s; }

.more-note { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--yellow); border-radius: var(--r); padding: .95rem 1.3rem; font-size: .86rem; color: var(--charcoal-lt); line-height: 1.72; }
.more-note i { color: var(--yellow); margin-right: .4rem; }
.more-note a { color: var(--teal); font-weight: 600; }
.more-note a:hover { color: var(--teal-dk); }

/* ════════════════════════════════════════════════
   WHY US
   ════════════════════════════════════════════════ */
.sec-dark { padding: 5.5rem 0; position: relative; overflow: hidden; }
.sec-dark-bg { position: absolute; inset: 0; z-index: 0; }
.sec-dark-bg img { width: 100%; height: 100%; object-fit: cover; }
.sec-dark-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(30,42,40,.92); }
.sec-dark-content { position: relative; z-index: 2; }

.wcard { background: rgba(255,255,255,.04); border: 1px solid rgba(6,108,95,.3); border-radius: var(--rl); padding: 1.8rem; height: 100%; transition: var(--tr); }
.wcard:hover { background: rgba(6,108,95,.12); border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(6,108,95,.25); }
.wcard-icon { width: 52px; height: 52px; background: var(--teal); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; margin-bottom: 1.1rem; }
.wcard h4 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.wcard p { color: rgba(255,255,255,.58); font-size: .85rem; line-height: 1.72; margin: 0; }

.wstats {
  display: flex; align-items: center; flex-wrap: wrap;
  background: rgba(6,108,95,.15); border: 1px solid rgba(6,108,95,.35);
  border-radius: var(--rl); padding: 1.8rem 1rem; gap: 0;
}
.wstat { flex: 1; min-width: 120px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; }
.wstat-row { display: flex; align-items: baseline; justify-content: center; gap: .1rem; }
.wstat-num { font-family: var(--fd); font-size: 2.4rem; font-weight: 600; color: var(--yellow); line-height: 1; }
.wstat-plus { font-family: var(--fd); font-size: 1.5rem; color: var(--yellow); line-height: 1; }
.wstat small { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-top: .35rem; font-family: var(--fb); }
.wstat-div { width: 1px; height: 55px; background: rgba(6,108,95,.4); }
@media (max-width: 767.98px) { .wstat-div { display: none; } .wstats { gap: 1.2rem; } }

/* ════════════════════════════════════════════════
   INDUSTRIES
   ════════════════════════════════════════════════ */
.ind-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.6rem 1rem; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--white); text-align: center; transition: var(--tr); cursor: default; height: 100%;
}
.ind-card:hover { border-color: var(--teal); background: var(--teal-pale); box-shadow: var(--shadow-s); transform: translateY(-2px); }
.ind-card i { font-size: 1.75rem; color: var(--teal); }
.ind-card span { font-family: var(--fh); font-weight: 600; font-size: .78rem; color: var(--charcoal-dk); line-height: 1.3; }

/* ════════════════════════════════════════════════
   CTA STRIP
   ════════════════════════════════════════════════ */
.cta-strip { background: var(--teal); padding: 3rem 0; border-top: 3px solid var(--yellow); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.cta-text h3 { color: #fff; font-size: 1.4rem; font-weight: 700; margin-bottom: .3rem; }
.cta-text p { color: rgba(255,255,255,.65); font-size: .9rem; margin: 0; }
.cta-btns { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ════════════════════════════════════════════════
   CONTACT
   ════════════════════════════════════════════════ */
.ct-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.9rem; height: 100%; box-shadow: var(--shadow-s); }
.ct-dark { background: var(--charcoal-dk); border-color: transparent; }

.ct-h { font-family: var(--fh); font-weight: 700; font-size: .95rem; color: var(--charcoal-dk); margin-bottom: 1.1rem; display: flex; align-items: center; gap: .5rem; padding-bottom: .85rem; border-bottom: 2px solid var(--teal-pale); }
.ct-h i { color: var(--teal); }

.ct-address { font-size: .87rem; color: var(--charcoal-lt); line-height: 1.85; margin-bottom: 1.1rem; }

.ct-info { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ct-info li { display: flex; align-items: flex-start; gap: .65rem; font-size: .85rem; color: var(--charcoal-lt); }
.ct-info li i { color: var(--teal); margin-top: .2rem; width: 14px; flex-shrink: 0; }
.ct-info a { color: var(--charcoal-lt); transition: color .2s; }
.ct-info a:hover { color: var(--teal); }

.ct-note { font-size: .84rem; color: var(--charcoal-lt); margin-bottom: 1.1rem; line-height: 1.7; }

.ct-person { display: flex; align-items: center; gap: .9rem; padding: .85rem; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: .65rem; transition: var(--tr); background: var(--bg); }
.ct-person:hover { border-color: var(--teal); background: var(--teal-pale); }
.ct-av { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-weight: 600; font-size: .9rem; flex-shrink: 0; }
.ct-person small { display: block; font-size: .68rem; color: var(--charcoal-lt); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .15rem; }
.ct-person strong { display: block; font-size: .9rem; color: var(--charcoal-dk); font-weight: 700; margin-bottom: .15rem; }
.ct-person a { font-size: .82rem; color: var(--teal); display: flex; align-items: center; gap: .3rem; }
.ct-person a:hover { color: var(--teal-dk); }

.ct-hours { margin-top: 1.3rem; font-size: .78rem; color: rgba(255,255,255,.42); display: flex; align-items: center; gap: .5rem; }
.ct-hours i { color: var(--yellow); }
.ct-map { border-radius: var(--rl); overflow: hidden; box-shadow: var(--shadow-s); border: 1px solid var(--border); }

/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
#footer { background: var(--charcoal-dk); padding: 4rem 0 0; border-top: 3px solid var(--teal); }
.ft-about { color: rgba(255,255,255,.42); font-size: .84rem; line-height: 1.78; margin-bottom: .9rem; }
.ft-cert { font-size: .76rem; color: rgba(255,255,255,.35); display: flex; align-items: center; gap: .5rem; }
.ft-cert i { color: var(--yellow); }
.ft-h { font-family: var(--fh); font-weight: 700; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: .9rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.ft-links { list-style: none; padding: 0; }
.ft-links li { margin-bottom: .38rem; }
.ft-links a { font-size: .82rem; color: rgba(255,255,255,.4); transition: color .2s; }
.ft-links a:hover { color: var(--yellow); }
.ft-address { font-size: .82rem; color: rgba(255,255,255,.38); line-height: 1.85; margin-bottom: .75rem; font-style: normal; }
.ft-contact-item { font-size: .82rem; color: rgba(255,255,255,.38); display: flex; align-items: center; gap: .5rem; margin-bottom: .42rem; }
.ft-contact-item i { color: var(--teal); width: 14px; }
.ft-contact-item a { color: rgba(255,255,255,.38); transition: color .2s; }
.ft-contact-item a:hover { color: rgba(255,255,255,.75); }
.ft-bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 1.1rem 0; margin-top: 2.8rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .76rem; color: rgba(255,255,255,.3); }
.ft-bottom strong { color: rgba(255,255,255,.5); }

/* ════════════════════════════════════════════════
   FAB + BACK TO TOP
   ════════════════════════════════════════════════ */
.fab-enq {
  position: fixed; bottom: 1.8rem; right: 1.8rem; z-index: 999;
  display: flex; align-items: center; gap: .5rem;
  background: var(--yellow); color: var(--charcoal-dk);
  font-family: var(--fh); font-weight: 700; font-size: .77rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .75rem 1.3rem; border-radius: 50px;
  box-shadow: 0 4px 18px rgba(251,224,11,.5); transition: var(--tr); text-decoration: none;
}
.fab-enq:hover { background: var(--yellow-dk); color: var(--charcoal-dk); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(251,224,11,.6); }
@media (max-width: 575.98px) { .fab-enq span { display: none; } .fab-enq { border-radius: 50%; padding: .82rem; } }

#btt {
  position: fixed; bottom: 1.8rem; left: 1.8rem; z-index: 999;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
  box-shadow: 0 4px 14px rgba(6,108,95,.45); transition: var(--tr);
  text-decoration: none; opacity: 0; transform: translateY(8px); pointer-events: none;
}
#btt.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#btt:hover { background: var(--teal-dk); color: #fff; }

/* ════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════ */
.anim-up    { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.anim-left  { opacity: 0; transform: translateX(-26px); transition: opacity .6s ease, transform .6s ease; }
.anim-right { opacity: 0; transform: translateX(26px);  transition: opacity .6s ease, transform .6s ease; }
.anim-up.in,.anim-left.in,.anim-right.in { opacity: 1; transform: none; }
.delay-1 { transition-delay: .12s !important; }
.delay-2 { transition-delay: .22s !important; }
.delay-3 { transition-delay: .32s !important; }
.delay-4 { transition-delay: .42s !important; }

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .sec, .sec-dark { padding: 3.5rem 0; }
  .img-main { height: 300px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn-teal, .hero-btns .btn-outline-white { text-align: center; justify-content: center; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .ft-bottom { flex-direction: column; gap: .3rem; }
  .wcard { padding: 1.35rem; }
}
@media (max-width: 575.98px) {
  .hero-title { font-size: 2rem; }
  .hero-sub { font-size: .88rem; }
  .sec-title { font-size: 1.4rem; }
  .ct-card { padding: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .marquee-content { animation: none; }
}



/* ════════════════════════════════════════════════
   NAV — SUBMENU SUPPORT (v2: separate caret button)
   Append to general.css — REPLACES previous version
   ════════════════════════════════════════════════ */

.navbar-nav .has-submenu {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.navbar-nav .has-submenu > .navlink {
  flex: 1 1 auto;
}

/* Caret toggle button */
.submenu-toggle-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.85);
  padding: .5rem .6rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.submenu-toggle-btn:hover,
.submenu-toggle-btn:focus-visible {
  color: var(--yellow, #fbe00b);
  outline: none;
}
.submenu-caret {
  font-size: .62rem;
  transition: transform .25s ease;
}
.has-submenu.show > .submenu-toggle-btn .submenu-caret {
  transform: rotate(180deg);
}

/* ── Desktop (≥992px): hover flyout, caret click also toggles ── */
@media (min-width: 992px) {
  .navbar-nav .has-submenu { position: relative; }

  .navbar-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    margin: 0;
    padding: .5rem 0;
    list-style: none;
    background: var(--charcoal-dk, #2a2a2a);
    border: 1px solid rgba(255,255,255,.08);
    border-top: 2px solid var(--yellow, #fbe00b);
    border-radius: var(--r, 6px);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 1100;
  }

  /* nested (3rd level) submenu opens to the right */
  .navbar-nav .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    transform: translateX(8px);
  }
  .navbar-nav .sub-menu .has-submenu:hover > .sub-menu,
  .navbar-nav .sub-menu .has-submenu.show > .sub-menu {
    transform: translateX(0);
  }

  .navbar-nav .has-submenu:hover > .sub-menu,
  .navbar-nav .has-submenu.show > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .navbar-nav .sub-menu li { width: 100%; }

  .navbar-nav .sub-menu .navlink {
    display: block;
    padding: .55rem 1.1rem !important;
    font-size: .74rem;
    letter-spacing: .04em;
    color: rgba(255,255,255,.75) !important;
    white-space: nowrap;
  }
  .navbar-nav .sub-menu .navlink::after { display: none; }
  .navbar-nav .sub-menu .navlink:hover,
  .navbar-nav .sub-menu li.active > .navlink {
    background: rgba(6,108,95,.25);
    color: var(--yellow, #fbe00b) !important;
  }

  .navbar-nav .sub-menu .submenu-caret { transform: rotate(-90deg); }
  .navbar-nav .sub-menu .has-submenu.show > .submenu-toggle-btn .submenu-caret,
  .navbar-nav .sub-menu .has-submenu:hover > .submenu-toggle-btn .submenu-caret {
    transform: rotate(0deg);
  }
}

/* ── Mobile (<992px): accordion-style expand ── */
@media (max-width: 991.98px) {
  .navbar-nav .has-submenu {
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .navbar-nav .sub-menu {
    flex-basis: 100%;
    list-style: none;
    margin: 0 0 0 .5rem;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .3s ease;
    border-left: 2px solid rgba(6,108,95,.5);
  }

  .navbar-nav .has-submenu.show > .sub-menu {
    max-height: 600px;
    opacity: 1;
  }

  .navbar-nav .sub-menu .navlink {
    padding: .55rem .8rem !important;
    font-size: .74rem;
    color: rgba(255,255,255,.65) !important;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .navbar-nav .sub-menu .navlink::after { display: none; }
  .navbar-nav .sub-menu .navlink:hover,
  .navbar-nav .sub-menu li.active > .navlink {
    color: var(--yellow, #fbe00b) !important;
  }

  .navbar-nav .sub-menu .sub-menu { margin-left: 1rem; }

  .transcon-nav-extras { margin-top: .5rem; }
}

/* 2. Reduce the big gutter on mobile */
@media (max-width: 767.98px) {
  .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* 3. On mobile, fade in instead of sliding sideways */
@media (max-width: 991.98px) {
  .anim-left, .anim-right { transform: translateY(26px); }
	li.nav-item.ms-lg-2.rotex-head-logo {
    margin-top: 16px;
}
}