/* Footer text and bullets white */
#main-footer,
#footer-bottom {
  color: #ffffff !important;
}

/* Footer list bullets */
#main-footer ul li::marker,
#footer-bottom ul li::marker {
  color: #ffffff !important;
}

/* Footer links white by default */
#main-footer a,
#footer-bottom a {
  color: #ffffff !important;
  text-decoration: none;
}

/* Footer links stay white on hover */
#main-footer a:hover,
#footer-bottom a:hover {
  color: #ffffff !important;
  text-decoration: underline; /* optional, remove if not needed */
}


/* ===========================
   GLOBAL TYPOGRAPHY
   =========================== */
body, p, span, a, li {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333; /* default text color */
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.75rem;
  color: #002b49; /* brand dark blue */
}

button, .btn-hero, .btn-ghost-light {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}


.hero-intro, 
.features, 
.solutions, 
.logo-slider, 
.why-trimac {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif !important;
}


/* General WordPress / Divi submenu width */
#top-menu li ul {
  min-width: 250px; /* increase this as needed */
  width: auto;      /* lets width adjust based on content */
}

/* Ensure the submenu items wrap text instead of cutting off */
#top-menu li ul li a {
  white-space: normal; /* allow wrapping instead of one line only */
  padding: 10px 15px;  /* adjust padding for better spacing */
}


/* ===========================
   GLOBAL SECTIONS & CONTAINERS
   =========================== */
.bg-gradient-hero {
  background: linear-gradient(135deg, #002b49 0%, #005b8f 100%);
  color: #fff;
  width: 100%;
}
/* ===========================
   SECTION SPACING (Tighter)
   =========================== */
.section-padding {
  padding: 60px 20px; /* was 100px */
}

.hero-intro { margin-bottom: 2rem; }
.features { margin-top: 2rem; }
.why-trimac { margin: 3rem 0; }
.solutions { margin: 3rem 0; }
.logo-slider { margin: 2rem 0; }


.container-custom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

/* ===========================
   TYPOGRAPHY
   =========================== */
.text-display {
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 18px 0;
}
.text-body-large {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto 28px auto;
}
.text-white-90 { color: rgba(255,255,255,0.9) !important; }
.text-white-70 { color: rgba(255,255,255,0.7) !important; }
.hero-description {
  color: #222 !important;
  max-width: 900px;
  margin: 0 auto 30px auto;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Headings */
.section-headline {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff !important;
}
.sub-headline {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #002b49;
}
.text-headline {
  font-size: 2rem;
  font-weight: 700;
  color: #002b49;
  margin-bottom: 20px;
}

/* ===========================
   HERO BUTTONS
   =========================== */
.buttons-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 28px 0 44px 0;
  flex-wrap: nowrap;
}
.btn-hero,
.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  min-height: 42px;
  line-height: 1;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-hero { background: #00c4ff; color: #fff; border: 0; }
.btn-hero:hover { background: #009ecc; }
.btn-ghost-light { background: transparent; border: 2px solid #fff; color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); }
.btn-icon-arrow {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 2;
  flex: 0 0 auto;
}

/* ===========================
   FEATURES (ICONS + TITLES)
   =========================== */
.features { --gap: 28px; --col-width: 240px; }
.features {
  max-width: calc(var(--col-width) * 3 + var(--gap) * 2);
  margin: 0 auto;
}
.features-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  margin: 2px 0 !important;
}
.feature-col {
  width: var(--col-width);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Feature Icons */
.icon-ring {
  width: 50px; height: 50px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
}
.icon-svg {
  width: 24px; height: 24px;
  stroke: #00c4ff; fill: none; stroke-width: 2;
}

/* Feature Titles & Descriptions */
.feature-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 2px 0 0 0 !important;
  line-height: 1.2 !important;
}
.feature-desc {
  font-size: 0.95rem;
  margin: 2px 0 0 0 !important;
  line-height: 1.25 !important;
}
.bg-gradient-hero .feature-col > * {
  margin: 0 !important;
  padding: 0 !important;
}

/* ===========================
   CHECKLIST
   =========================== */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.check-item {
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.4;
  color: #444;
}
.check-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
}
.check-icon-svg svg {
  width: 18px;
  height: 18px;
  stroke: #00c4ff;
  vertical-align: middle;
}

/* Get in Touch button */
.et_pb_button_module_wrapper .et_pb_button {
  font-size: 14px;
  padding: 8px 18px;
  background-color: #002b49 !important;
  border-radius: 6px;
  border: none;
}
.et_pb_button_module_wrapper .et_pb_button:hover {
  background-color: #004470 !important;
}

/* ===========================
   OUR SOLUTIONS GRID
   =========================== */
.solutions-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.solutions-grid .solution-card {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.solutions-grid .solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.solutions-grid .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #002b49;
}
.solutions-grid .card-subtitle {
  font-size: 0.95rem;
  font-weight: 500;
  color: #005b8f;
  margin-bottom: 8px;
}
.solutions-grid .card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.solutions-grid .card-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #444;
}
.solutions-grid .card-link {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.9rem;
  color: #002b49;
  text-decoration: none;
  transition: color 0.25s ease;
}
.solutions-grid .card-link:hover { color: #005b8f; }




.logo-slider {
  width: 100%;
  overflow: hidden;
  background: transparent;
  padding: 20px 0;
}

.logo-slider-track {
  display: flex;
  flex-wrap: nowrap;
  animation: scroll-logos 40s linear infinite;
}

.logo-slider-track li {
  flex: 0 0 auto; /* keep fixed size */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;   /* fixed width per logo */
  height: 100px;
  margin: 0 20px;
}

.logo-slider-track img {
  max-width: 140px;
  max-height: 100px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.logo-slider-track img:hover {
  transform: scale(1.05);
}

/* Infinite scrolling animation */
@keyframes scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* slide exactly half the track */
}






/* ===========================
   ANIMATIONS
   =========================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.8s ease both; }

/* ===========================
   RESPONSIVE BREAKPOINTS
   =========================== */
@media (max-width: 980px) {
  .text-display { font-size: 2.1rem; }
  .solutions-grid { flex-wrap: wrap; }
  .solutions-grid .solution-card { flex: 1 1 calc(50% - 12px); }
}
@media (max-width: 768px) {
  .text-display { font-size: 1.85rem; }
  .text-body-large { font-size: 1rem; }
  .features { --col-width: 170px; --gap: 18px; }
  .icon-ring { width: 46px; height: 46px; }
  .solutions-grid .solution-card { flex: 1 1 100%; }
  .logo-slider-track li { min-width: 160px; margin: 0 12px; }
  .logo-slider-track img { max-width: 160px; max-height: 90px; }
}
@media (max-width: 480px) {
  .features { --col-width: 120px; --gap: 12px; }
  .icon-ring { width: 42px; height: 42px; }
  .icon-svg { width: 20px; height: 20px; }
  .logo-slider-track li { min-width: 120px; margin: 0 8px; }
  .logo-slider-track img { max-width: 120px; max-height: 70px; }
}

/* ===========================
   HERO MAIN HEADLINE
   =========================== */
.hero-intro .text-display {
  color: #fff !important;
}

/* ===========================
   WHY GLOBAL BRANDS SECTION
   =========================== */
.why-global-brands-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px;
}

.why-global-brands-row > .column,
.why-global-brands-row > .et_pb_column .et_pb_column_inner {
  flex: 1 1 50% !important;
  max-width: 50% !important;
  margin: 0 !important;
}

.why-global-brands-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* Mobile stacking */
@media (max-width: 980px) {
  .why-global-brands-row {
    flex-direction: column !important;
  }
  .why-global-brands-row > .et_pb_column,
  .why-global-brands-row > .et_pb_column .et_pb_column_inner {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
}


/* ===========================
   ABOUT PAGE (HERO + CONTENT + FEATURES)
   =========================== */

/* Hero Section for About Page */
.about-hero {
  background: #0f3b75; /* Solid deep blue (matches screenshot) */
  color: #fff;
  padding: 80px 20px;
  text-align: center;
}
.about-hero .about-title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.about-hero .about-subtitle {
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}

/* About Content (Text paragraphs) */
.about-content {
  max-width: 900px;
  margin: 0 auto 60px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #444;
  text-align: left;
}
.about-content p {
  margin-bottom: 22px;
}

/* Features Grid (About page version) */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature-icon {
  font-size: 28px;
  color: #0f3b75;
  margin-bottom: 15px;
}
.feature h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #002b49;
}
.feature p {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .about-hero .about-title { font-size: 2.2rem; }
  .about-hero .about-subtitle { font-size: 1.05rem; }
  .about-content { font-size: 1rem; padding: 0 10px; }
  .features-grid { gap: 24px; }
}
@media (max-width: 480px) {
  .about-hero .about-title { font-size: 1.8rem; }
  .about-hero .about-subtitle { font-size: 1rem; }
  .feature h3 { font-size: 1rem; }
  .feature p { font-size: 0.9rem; }
}


.about-hero {
  background-color: #002b49; /* matches your dark hero background */
  padding: 100px 20px;
}

.about-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff !important;
}

.about-subtitle {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 0;
}


.about-content {
  max-width: 1000px;  /* increase width */
  margin: 0 auto 40px auto;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
}


/* ===========================
   UTILITY CLASSES (Tailwind replacements)
   =========================== */
.text-white { color: #fff !important; }
.text-white-90 { color: rgba(255,255,255,0.9) !important; }
.text-muted-foreground { color: #555 !important; }

.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-16 { margin-bottom: 4rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

/* ===========================
   WIDTH CONSTRAINTS
   =========================== */
.max-w-3xl { max-width: 48rem; }   /* ~768px */
.max-w-4xl { max-width: 56rem; }   /* ~896px */

/* ===========================
   GRID SYSTEM (2 columns on desktop)
   =========================== */
.grid { display: grid !important; }
.gap-8 { gap: 2rem !important; }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ===========================
   SPECIALIZE BOX
   =========================== */
.bg-\[\#f8fafc\] { background-color: #f8fafc !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.p-8 { padding: 2rem !important; }

/* ===========================
   CTA BUTTON
   =========================== */
.bg-primary { background-color: #005b8f !important; }
.bg-primary:hover { background-color: #004470 !important; }
.text-primary { color: #005b8f !important; }
.rounded-md { border-radius: 0.375rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

/* ===========================
   TYPOGRAPHY FIXES
   =========================== */
.text-subhead {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  color: #002b49;
}
.font-semibold { font-weight: 600 !important; }

/* ===========================
   STRATEGIC SECTION (SAFE EXTENSION)
   =========================== */
.strategic-section {
  padding: 100px 20px;
  background: #fff;
  text-align: center;
}

/* Intro paragraph */
.strategic-section .intro-text {
  max-width: 800px;
  margin: 0 auto 50px auto;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #444;
}

/* Reuse existing .solutions-grid + .solution-card from your CSS 
   so the layout stays consistent across all pages */

/* Specialize Box (unique style) */
.strategic-section .specialize-box {
  background: #f8fafc;
  border-radius: 12px;
  padding: 40px;
  margin: 60px auto;
  max-width: 1000px;
  text-align: left;
}
.strategic-section .specialize-box h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #002b49;
}
.strategic-section .specialize-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.strategic-section .specialize-box li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
  color: #444;
  font-size: 1rem;
}
.strategic-section .specialize-box li::before {
  content: "•";
  color: #005b8f;
  font-size: 1.25rem;
  position: absolute;
  left: 0;
  top: 0;
}

/* CTA block */
.strategic-section .cta-block {
  margin-top: 60px;
  text-align: center;
}
.strategic-section .cta-block h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: #002b49;
}
.strategic-section .cta-block p {
  font-size: 1rem;
  margin-bottom: 28px;
  color: #555;
}
.strategic-section .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #005b8f;
  color: #fff !important;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease;
}
.strategic-section .btn-primary:hover {
  background: #004470;
}
.strategic-section .btn-primary .icon-sm {
  width: 18px;
  height: 18px;
}

/* Solution card icons - scale down */
.solution-card img,
.solution-card svg {
  width: 64px;   /* adjust size */
  height: 64px;  /* keep proportion */
  margin: 0 auto 20px auto; /* center + spacing below */
  display: block;
  color: #005b8f; /* optional if SVG */
}

/* If using  icons (font-based) */
.solution-card i {
  font-size: 3rem;   /* smaller */
  margin-bottom: 16px;
  color: #005b8f;
}

.bg-gradient-hero h1.text-display {
  color: #fff !important;
}

/* ===========================
   TRIMAC MEDIA SOLUTIONS PAGE
   =========================== */
.media-page h1,
.media-page h2,
.media-page h3 {
  color: #fff; /* ensure headings inside hero stay white */
}

/* Hero Section */
.media-page.bg-gradient-hero {
  background: linear-gradient(135deg, #002b49 0%, #005b8f 100%);
  padding: 100px 20px;
  text-align: center;
}

.media-page.bg-gradient-hero p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
  margin: 0 auto;
}

/* Section Wrapper */
.media-page.section-padding {
  padding: 80px 20px;
}

/* Service Cards */
.media-page .card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.media-page .card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0.1px 25px rgba(0, 0, 0, 0.1);
}

/* Icons inside cards */
.media-page .card-hover svg {
  width: 48px;
  height: 48px;
  color: #005b8f; /* brand accent color */
}

/* Mission Box */
.media-page .bg-gradient-subtle {
  background: linear-gradient(135deg, #f5f9fc 0%, #e9f2f9 100%);
  color: #333;
}

/* CTA Button */
.media-page .btn-primary {
  background: #005b8f;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.media-page .btn-primary:hover {
  background: #00406a;
  transform: translateY(-2px);
}


/* Service Cards Layout */
.media-page .card-hover {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.media-page .card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Icon container */
.media-page .card-hover .bg-gradient-subtle {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f3f6fa; /* subtle background */
  flex-shrink: 0;
}

/* SVG Icons */
.media-page .card-hover svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  color: #005b8f; /* brand accent */
}

/* Text container */
.media-page .card-hover h3 {
  font-size: 1.125rem;
  margin-bottom: 6px;
  color: #111;
}

.media-page .card-hover p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* Service Cards Container */
.services-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

/* Individual Service Card */
.service-card {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* Icon Box */
.service-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.service-icon svg {
  width: 22px;
  height: 22px;
  stroke: #0d47a1; /* your brand color */
}

/* Text Content */
.service-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #111827;
}

.service-content p {
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}

/* ===========================
   MEDIA PAGE STYLES
   =========================== */

/* Page wrapper */
.media-page {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #222;
}

/* ---------------------------
   HERO / INTRO SECTION
----------------------------*/
.media-page .hero-intro {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
.media-page .hero-intro h1 {
  font-size: 42px;
  line-height: 1.3;
  margin-bottom: 20px;
}
.media-page .hero-intro p {
  font-size: 18px;
  line-height: 1.7;
  color: #f1f1f1;
}

/* ---------------------------
   MISSION SECTION
----------------------------*/
.media-page .mission {
  max-width: 900px;
  margin: 50px auto;
  text-align: center;
}
.media-page .mission h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #000; /* Ensure black heading */
}
.media-page .mission p {
  font-size: 18px;
  line-height: 1.7;
  color: #333;
}

/* ---------------------------
   SERVICES GRID
----------------------------*/
.services-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 50px;
}

/* Row of 3 cards */
.services-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Row of 2 cards (centered under the 3) */
.services-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Individual cards */
.service-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: left;
  transition: transform 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
}
.service-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #000;
}
.service-card p {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
}
.service-card .service-icon {
  font-size: 30px;
  margin-bottom: 15px;
  color: #005b8f;
}

/* ---------------------------
   RESPONSIVE BEHAVIOR
----------------------------*/

/* Tablet */
@media (max-width: 991px) {
  .services-row-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-row-2 {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }
  .media-page .hero-intro h1 {
    font-size: 34px;
  }
  .media-page .mission h2 {
    font-size: 26px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .services-row-3,
  .services-row-2 {
    grid-template-columns: 1fr;
  }
  .media-page .hero-intro h1 {
    font-size: 28px;
  }
  .media-page .hero-intro p,
  .media-page .mission p {
    font-size: 16px;
  }
}


/* Our Mission Box (light blue background like "We Specialize In") */
.mission-box {
  background: #e6f3fb; /* same light blue as "We Specialize In" */
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  text-align: center;
}

.mission-box h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #002b49; /* dark blue heading for contrast */
}

.mission-box p {
  font-size: 1.125rem;
  color: #333;
  line-height: 1.6;
}


/* Align icon left, heading right, paragraph under heading */
.service-card {
  display: flex;
  align-items: flex-start;
  gap: 16px; /* space between icon and text */
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
}

/* Icon container */
.service-card .service-icon {
  flex-shrink: 0; /* prevents icon from shrinking */
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px; /* emoji/icon size */
  color: #005b8f;
}

/* Text block next to icon */
.service-card .service-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Heading above paragraph */
.service-card .service-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #111827;
}

.service-card .service-content p {
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}


/* ==============================
   CLIMTEK PAGE ONLY
   ============================== */
.climtek-page .hero-section {
  background: #002b49 !important; /* solid blue banner */
  color: #fff;
  padding: 80px 20px;
  text-align: center;
}

.climtek-page .hero-title {
  font-size: 42px;
  margin-bottom: 10px;
  color: #ffffff; /* force white heading */
}

.climtek-page .hero-subtitle {
  font-size: 18px;
  color: #d9e3ec; /* lighter shade for subtitle */
}

.climtek-page .hero-icon {
  background: #004c75; /* lighter blue circle so it stands out */
  padding: 16px;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 20px;
  color: #fff; /* icon white */
}

/* INTRO */
.climtek-page .intro-text {
  font-size: 18px;
  color: #444;
  max-width: 800px;
  margin: 0 auto 40px auto;
  line-height: 1.6;
}

/* INFO BOX */
.climtek-page .info-box {
  display: flex;
  align-items: center;   /* align items to center vertically */
  gap: 20px;
  background: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.climtek-page .info-icon {
  flex: 0 0 60px;              /* lock width */
  height: 60px;                /* lock height */
  border-radius: 50%;          /* make perfect circle */
  background: #e8f3fc;         /* light blue background */
  display: flex;
  align-items: center;         /* center vertically */
  justify-content: center;     /* center horizontally */
  font-size: 24px;             /* emoji or SVG size */
  line-height: 1;
  color: #005b8f;              /* icon color */
}

.climtek-page .info-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #002b49;
}

/* GRID */
.climtek-page .grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.climtek-page .card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.climtek-page .card-icon {
  font-size: 24px;
  color: #005b8f;
  margin-bottom: 10px;
}
.climtek-page .card h3 { font-size: 18px; margin-bottom: 8px; }
.climtek-page .card p { font-size: 15px; color: #555; line-height: 1.5; }

/* CHECKLIST */
.climtek-page .checklist-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 30px;
}
.climtek-page .checklist { list-style: none; padding: 0; margin: 0; }
.climtek-page .checklist li {
  margin-bottom: 10px;
  padding-left: 24px;
  position: relative;
  font-size: 16px;
  color: #444;
}
.climtek-page .checklist li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #005b8f;
}

/* CTA */
.climtek-page .cta-title { font-size: 24px; margin-bottom: 15px; }
.climtek-page .cta-text { font-size: 16px; color: #555; margin-bottom: 20px; }
.climtek-page .cta-highlight { font-weight: bold; color: #002b49; margin-bottom: 30px; }
.climtek-page .btn-primary {
  background: #002b49;
  color: #fff;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: background 0.3s;
}
.climtek-page .btn-primary:hover { background: #004c75; }

/* SECTIONS */
.climtek-page .section-padding { padding: 80px 20px; }
.climtek-page .container-custom { max-width: 1100px; margin: 0 auto; }
.climtek-page .section-title { font-size: 28px; margin-bottom: 20px; color: #002b49; }


.climtek-hero .hero-title {
  font-size: 2.4rem;
  font-weight: 700;   /* makes it bold */
  margin-bottom: 12px;
  color: #fff;
}




.climtek-page .info-box {
  display: flex;
  align-items: flex-start;
  gap: 20px; /* spacing between icon and text */
}

.climtek-page .info-icon {
  flex: 0 0 auto; /* icon stays fixed size */
}

.climtek-page .info-text {
  flex: 1 1 auto;   /* allow to grow and shrink */
  max-width: 100%;  /* remove restriction */
  text-align: left; /* align text naturally */
}


/* Ensure the info-box uses full available space */
.climtek-page .info-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* Icon fixed */
.climtek-page .info-icon {
  flex: 0 0 auto;
}

/* Text column takes everything else */
.climtek-page .info-text {
  flex: 1 1 auto;
  max-width: 100% !important;
  width: 100% !important;
  text-align: left;
}

/* Paragraphs inside the text span full width */
.climtek-page .info-text p {
  max-width: none !important;
  width: 100% !important;
}


/* ===========================
   CLIMTEK PAGE (Matches Media Page Look & Feel)
   =========================== */
.climtek-page {
  font-family: inherit;
  color: #111827;
}

/* Hero */
.climtek-page.bg-gradient-hero {
  background: linear-gradient(135deg, #002b49, #005b8f);
  text-align: center;
  padding: 100px 20px;
}
.climtek-page .text-display {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 1rem;
}
.climtek-page .text-body-large {
  font-size: 18px;
  line-height: 1.6;
}

/* Intro Section */
.climtek-page .max-w-4xl {
  max-width: 64rem;
  margin: 0 auto;
}
.climtek-page .text-muted-foreground {
  color: #4b5563;
}

/* Mission Box (like Media) */
.climtek-page .mission-box {
  background: #e0f2fe; /* SAME as Media page Our Mission */
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.climtek-page .mission-box h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111827;
}

/* Service Rows */
.climtek-page .services-row-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
.climtek-page .service-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;  
  width: 100%;
}
.climtek-page .service-card h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}
.climtek-page .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.climtek-page .service-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.climtek-page .service-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #111827;
}
.climtek-page .service-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
}

/* CTA Section */
.climtek-page .btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #005b8f;
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}
.climtek-page .btn-hero:hover {
  background: #003f66;
  transform: translateY(-2px);
}

/* Animation */
.animate-fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Checklist inside service card */
.climtek-page .checklist {
  list-style: none;
  padding-left: 0;
  margin-top: 12px;
}

.climtek-page .checklist li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #374151; /* gray-700 */
}

.climtek-page .checklist li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #059669; /* green-600 */
  font-weight: bold;
}

/* ===========================
   GLOBAL UNIFICATION FIXES
   =========================== */

/* 1. Force consistent font across all pages */
body, h1, h2, h3, h4, h5, h6, p, a, li {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  line-height: 1.5;
}

/* 2. Force consistent hero background across all pages */
.bg-gradient-hero,
.about-hero,
.media-hero,
.solutions-hero,
.climtek-hero {
  background: linear-gradient(135deg, #002b49 0%, #005b8f 100%) !important;
  color: #fff !important;
}



.icon-box svg {
  width: 28px;
  height: 28px;
  stroke: #fff;              /* white lines */
  stroke-width: 2;
  fill: none;                /* prevent any black fill */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===========================
   ICON FILL/STROKE FIX (SAFE + SCOPED)
   - Prevents black fills on inline SVGs
   - Uses currentColor strokes only
   - Does NOT touch unrelated SVGs/layout
   =========================== */
.solutions-grid .solution-card svg,
.media-page .card-hover svg,
.service-card .service-icon svg,
.features .icon-svg,
.check-icon-svg svg,
.climtek-page .info-icon svg,
.climtek-page .card-icon svg,
.climtek-page .hero-icon svg,
.icon-box svg {
  fill: none !important;               /* kill any inline fills */
  stroke: currentColor !important;     /* outline follows text/icon color */
  stroke-width: 2;                     /* balanced outline */
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Brand color per context (kept narrow to avoid text color changes) */
.solutions-grid .solution-card svg { color: #005b8f; }
.media-page .card-hover svg       { color: #005b8f; }
.service-card .service-icon svg   { color: #005b8f; }
.climtek-page .info-icon svg,
.climtek-page .card-icon svg      { color: #005b8f; }
.climtek-page .hero-icon svg      { color: #ffffff; }

/* Ensure child paths that declare fill are also nulled */
.solutions-grid .solution-card svg [fill],
.media-page .card-hover svg [fill],
.service-card .service-icon svg [fill],
.features .icon-svg [fill],
.check-icon-svg svg [fill],
.climtek-page .info-icon svg [fill],
.climtek-page .card-icon svg [fill],
.climtek-page .hero-icon svg [fill],
.icon-box svg [fill] {
  fill: none !important;
}


.check-icon-svg svg {
  stroke: #005b8f !important;
}


/* Force both hero buttons to use ghost style */
.buttons-wrapper .btn-hero {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

/* Hover state (optional) */
.buttons-wrapper .btn-hero:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}


/* Make both hero buttons ghost style */
.buttons-wrapper .btn-hero,
.buttons-wrapper .btn-ghost-light {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  padding: 0.6rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  text-transform: none !important;
}

/* Hover effect */
.buttons-wrapper .btn-hero:hover,
.buttons-wrapper .btn-ghost-light:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}



/* Base styles for both buttons */
.buttons-wrapper a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;   /* equal padding */
  line-height: 1.2;
  font-weight: 600;
  border-radius: 6px;
  font-size: 16px;
  height: 42px;         /* fixed height for both */
  box-sizing: border-box;
}

/* Filled button (Explore Solutions) */
.buttons-wrapper .btn-hero {
  background: transparent;   /* same as Contact Us */
  border: 1px solid #fff;
  color: #fff;
}

/* Outline button (Contact Us) */
.buttons-wrapper .btn-ghost-light {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

/* Remove arrow icon from Explore Solutions */
.buttons-wrapper .btn-hero .btn-icon-arrow {
  display: none !important;
}

/* Remove ALL extra space between first section and next content */
.et_pb_section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.et_pb_row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Extra fix for the very first section under header */
.et_pb_section_0 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}






/* Apply to all pages except homepage */
body:not(.home) .et_pb_section_1 {
  padding-top: 80px !important;  /* adjust 60–100px based on preference */
}

/* General tidy-up for inner pages */
body:not(.home) .et_pb_section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* Give breathing room between fullwidth sections */
.et_pb_section + .et_pb_section {
  margin-top: 60px;   /* adjust up/down to taste */
}


/* Add controlled breathing room after hero sections */
.bg-gradient-hero {
  margin-bottom: 40px !important; /* adjust 30–50px to taste */
}

/* Remove extra padding on white section if present */
.strategic-section {
  padding-top: 0 !important;
}


/* Force hero headings + paragraphs to be white */
.bg-gradient-hero h1,
.bg-gradient-hero h2,
.bg-gradient-hero h3,
.bg-gradient-hero p {
  color: #ffffff !important;
}

/* ===============================
   CONTACT PAGE STYLES (Trimac)
   =============================== */

/* Section backgrounds */
.bg-gradient-hero {
  background: linear-gradient(135deg, #002b49 0%, #005b8f 100%);
  color: #fff;
}
.bg-card {
  background: #ffffff;
}
.text-card-foreground {
  color: #1a1a1a;
}
.bg-gradient-subtle {
  background: #f5f9fc;
}

/* Container widths */
.container-custom {
  max-width: 1200px;
  margin: 0 auto;
}

/* Headings */
.text-display {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
}
.text-body-large {
  font-size: 18px;
  line-height: 1.6;
}
.text-muted-foreground {
  color: #6b7280; /* gray tone */
}
.text-secondary {
  color: #005b8f;
}

/* Cards */
.rounded-lg {
  border-radius: 12px;
}
.shadow-sm {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.border {
  border: 1px solid #e5e7eb;
}

/* Inputs */
.input-field {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 16px;
  transition: all 0.2s ease;
}
.input-field:focus {
  border-color: #005b8f;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,91,143,0.2);
}

/* Textarea */
textarea.input-field {
  min-height: 120px;
  resize: vertical;
}

/* Button */
.btn-hero {
  background: #005b8f;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.btn-hero:hover {
  background: #004066;
}

/* Spacing */
.section-padding {
  padding: 80px 20px;
}
.space-y-6 > * + * {
  margin-top: 1.5rem;
}
.space-y-8 > * + * {
  margin-top: 2rem;
}
.space-x-4 > * + * {
  margin-left: 1rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}

/* Utility */
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.tracking-tight {
  letter-spacing: -0.01em;
}



/* Force white text inside Contact Hero */
section.bg-gradient-hero,
section.bg-gradient-hero * {
  color: #ffffff !important;
  text-align: center !important;
}

/* Make sure background gradient is visible */
section.bg-gradient-hero {
  background: linear-gradient(135deg, #002b49 0%, #005b8f 100%) !important;
  padding: 100px 20px !important;
}

/* Heading styling */
section.bg-gradient-hero h1 {
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
}

/* Paragraph styling */
section.bg-gradient-hero p {
  font-size: 18px !important;
  line-height: 1.6 !important;
  opacity: 0.9 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}




/* Container styling */
.lets-connect {
    border: 1px solid #e2e8f0; /* light gray border */
    border-radius: 10px;
    padding: 20px;
    background-color: #ffffff;
    max-width: 600px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    color: #334155; /* dark text */
}

/* Heading */
.lets-connect h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #0f172a; /* dark blue */
}

/* Paragraph */
.lets-connect p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #475569; /* muted dark text */
}

/* Info rows */
.lets-connect .info-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Icons */
.lets-connect .info-row .icon {
    width: 40px;
    height: 40px;
    background-color: #f1f5f9; /* light gray bg for icon */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-right: 12px;
    font-size: 1.1rem;
    color: #0ea5e9; /* blue */
}

/* Labels */
.lets-connect .info-row .label {
    font-weight: 500;
    color: #0f172a;
}

/* Values */
.lets-connect .info-row .value {
    font-size: 0.95rem;
    color: #475569;
}

/* Response Time box */
.lets-connect .response-time {
    background-color: #f1f5f9;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.lets-connect .response-time h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #0f172a;
}

.lets-connect .response-time p {
    font-size: 0.9rem;
    color: #475569;
}


.lets-connect a {
    color: #526DB2;
}




.logo-slider {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.logo-slider-track {
  display: flex;
  gap: 2rem;
  animation: scroll-left 30s linear infinite;
}

.logo-slider-track:hover {
  animation-play-state: paused; /* pause on hover if desired */
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%); /* Adjust depending on track length */
  }
}

/* To avoid gaps, you might duplicate the list items inside CSS or JavaScript */
/* Or duplicate the contents inside the UL twice (once in HTML or dynamically) */



a.et_pb_button {
  color: #ffffff !important;         /* force white text */
  background-color: #002b49 !important; /* button background */
  padding: 12px 18px 12px 18px;      /* increased padding for top and bottom */
  border-radius: 6px;
  display: inline-block;
  text-decoration: none;             /* remove underline */
  font-weight: 600;
  font-size: 14px;
  margin-top: 12px;                  /* top margin for spacing above */
  transition: background-color 0.3s ease;
}

a.et_pb_button:hover {
  background-color: #004470 !important;
  color: #ffffff !important;         /* keep text white on hover */
}



*, *::before, *::after {
  box-sizing: border-box;
}

.bg-gradient-hero {
  overflow-x: hidden;
}

.container-custom {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
  box-sizing: border-box;
}

.buttons-wrapper {
  flex-wrap: wrap;
  justify-content: center;
}



.why-global-brands-row .et_pb_column_0 {
  text-align: left;
}



body, html, .navbar, section, div {
  overflow: visible !important;
}

.logo-slider {
  overflow: hidden !important;  /* force clipping */
}

.logo-slider-track {
  overflow: hidden !important;
}



.text-display {
  font-size: 2.4rem; /* desktop default */
  line-height: 1.2;
}

@media (max-width: 600px) {
  .text-display {
    font-size: 1.5rem; /* mobile smaller */
    line-height: 1.3;
  }
}