/* ============================================================
   SYSTEM FONT + UTILITIES
   ============================================================ */
:root {
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --heading-color: #0c223f;
}

/* Keep home icon boxes height */
.icon-boxes-home { height: 300px !important; }

/* ============================================================
   BODY & GLOBAL TEXT
   ============================================================ */
body {
  background: #f0f0f1;
  color: #3c434a;
  font-family: var(--font-system);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

#posts-content .blog-single-title {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  font-family: var(--font-system);
}

/* ============================================================
   HEADINGS
   ============================================================ */
h1, h2, h3, h4, h5,
.container h1, .container h2, .container h3, .container h4, .container h5 {
  line-height: 1.5;
  margin: 0 0 20px 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  
}

/* ============================================================
   BUTTONS
   ============================================================ */
.tt_button,
.wpcf7 .wpcf7-submit,
.content-area .vc_grid .vc_gitem-zone-c .vc_general,
.tt_button.modal-menu-item {
  padding-left: 32px;
  padding-right: 32px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  transition-duration: 0.4s;
  font-family: var(--font-system);
}

/* ============================================================
   WIDGET BLOG LINKS
   ============================================================ */
.widgetblog-link {
  color: #667c9c;
  font-size: 125%;
  font-family: var(--font-system);
  transition: color 0.3s ease;
}
.widgetblog-link:hover { color: #2c3e50; }

/* ============================================================
   MAIN MENU / MODAL MENU TYPOGRAPHY
   ============================================================ */
#main-menu.background-dropdown-effect .navbar-nav .menu-item-has-children .dropdown-menu a,
.background-dropdown-effect .navbar-nav .menu-item-has-children .dropdown-menu a,
body .navbar-default .nav li a,
body .modal-menu-item {
  font-weight: 500;
  font-family: var(--font-system);
  font-size: 13px;
  line-height: 34px;
  text-transform: uppercase;
}

/* ============================================================
   HERO / PAGE TITLE — GLOBAL
   (Removes hero images & overlays and sets consistent spacing)
   ============================================================ */
.entry-header,
.entry-header.blog-header,
.entry-header.blog-header.with-topbar,
.entry-header.with-topbar,
.page-header,
.single .entry-header {
  background: #0c223f !important;
  background-image: none !important;
  background-size: cover !important;
  background-position: center !important;
  padding-top: 250px !important;
  padding-bottom: 120px !important;
}

.entry-header::before,
.entry-header.blog-header::before,
.entry-header.with-topbar::before {
  content: none !important;
  background: none !important;
}

/* Title container (centering + width) */
.entry-header .section-heading {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  text-align: center !important;
}

/* Title text style */
.entry-header .section-heading h1,
.entry-header h1 {
  
  font-weight: 700 !important;
  font-size: clamp(28px, 3.6vw, 48px) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 15px 0 !important;
  color: #ffffff !important;
  text-wrap: balance;
  text-align: center !important;
}

/* ============================================================
   COMPANY NEWS — MATCH GLOBAL HERO STYLE
   ============================================================ */
.category-company-news .entry-header,
.category-company-news .entry-header.blog-header,
.category-company-news .entry-header.blog-header.with-topbar,
.category-company-news .entry-header.with-topbar {
  background: #0c223f !important;
  background-image: none !important;
  padding-top: 250px !important;
  padding-bottom: 120px !important;
}
.category-company-news .entry-header::before,
.category-company-news .entry-header.blog-header::before,
.category-company-news .entry-header.with-topbar::before {
  content: none !important;
  background: none !important;
}
.category-company-news .entry-header .section-heading {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  text-align: center !important;
}
.category-company-news .entry-header .section-heading h1,
.category-company-news .entry-header h1 {
  
  font-weight: 700 !important;
  font-size: clamp(28px, 3.6vw, 48px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 15px 0 !important;
  color: #ffffff !important;
  text-wrap: balance;
  text-align: center !important;
}

/* ============================================================
   PRODUCT / ARCHIVE / SEARCH HEADER TITLES
   ============================================================ */
.single-product .entry-header .section-heading,
.archive .entry-header .section-heading,
.search .entry-header .section-heading {
  color: #ffffff !important;

  font-weight: 700;
}

/* ============================================================
   NAV & DROPDOWN — Contrast, Hover, Readability, Z‑index
   (Global defaults; single-post has its own overrides)
   ============================================================ */

/* Keep navbar above hero */
.navbar, .header, #main-menu {
  position: relative;
  z-index: 10010;
}

/* Top-level nav items: white text for dark hero */
body .navbar-default .nav > li > a,
#main-menu .navbar-nav > li > a {
  color: #ffffff !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 1 !important;
}

/* Hover/active states */
body .navbar-default .nav > li > a:hover,
#main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav > li.current-menu-item > a,
#main-menu .navbar-nav > li.current_page_item > a {
  color: #eaf2ff !important;
}

/* Dropdown panel */
#main-menu .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(12,34,63,0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  padding: 12px 0;
  z-index: 10020;
}

/* Dropdown links */
#main-menu .dropdown-menu a {
  color: #2b3a4b !important;
  font-family: var(--font-system);
  font-size: 14px;
  line-height: 22px;
  padding: 10px 18px;
  text-transform: none;
  letter-spacing: 0.01em;
}
#main-menu .dropdown-menu a:hover,
#main-menu .dropdown-menu a:focus {
  background: #f3f6fb !important;
  color: #0b4ea2 !important;
}

/* Neutralize theme transparency if applied */
.navbar.transparent-navigation,
.navbar.navbar-default.navbar-shrink.with-topbar-sticky {
  background: rgba(10, 18, 42, 0.0) !important;
}

/* Prevent parent li from clipping dropdowns */
.navbar .navbar-nav > li { overflow: visible; }


/* FIX: reduce spacing between navbar and blog post title */
.single-post #posts-content,
.single-post .blog-single-title,
.single-post .entry-title {
    margin-top:  128px !important;
    padding-top: 0px !important;
}

/* ============================================================
   SINGLE POST — Remove hero + Transparent nav + Readable links
   ============================================================ */

/* Remove the hero/header on single posts */
.single-post .entry-header,
.single-post .entry-header.blog-header,
.single-post .entry-header.with-topbar,
.single-post .page-header,
.single-post .header-cover {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}
.single-post .entry-header::before { content: none !important; display: none !important; }

/* Add breathing room between nav and post content */
.single-post #content,
.single-post #primary,
.single-post .site-content,
.single-post #single-page {
  margin-top: 128px !important;  /* final single-post spacing */
  padding-top: 0 !important;
}

/* Navbar: transparent on single posts */
.single-post .navbar,
.single-post .navbar-default,
.single-post #main-menu {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 9999;
}

/* Menu text: dark blue on white (single post) */
.single-post .navbar-default .nav > li > a,
.single-post #main-menu .navbar-nav > li > a {
  color: #0c223f !important;
  opacity: 1 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Hover/active (single post) */
.single-post .navbar-default .nav > li > a:hover,
.single-post #main-menu .navbar-nav > li > a:hover,
.single-post #main-menu .navbar-nav > li.current-menu-item > a,
.single-post #main-menu .navbar-nav > li.current_page_item > a {
  color: #0a3a7a !important;
}

/* Dropdown (single post) */
.single-post #main-menu .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(12,34,63,.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 10020 !important;
}
.single-post #main-menu .dropdown-menu a { color: #0c223f !important; }
.single-post #main-menu .dropdown-menu a:hover {
  background: #f3f6fb !important;
  color: #0a3a7a !important;
}

/* Topbar links on single posts */
.single-post .topbar a,
.single-post .navbar-topbar li a { color: #0c223f !important; }

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 768px) {
  .entry-header,
  .entry-header.blog-header,
  .entry-header.with-topbar {
    padding-top: 160px !important;
    padding-bottom: 80px !important;
  }
  .entry-header .section-heading h1,
  .entry-header h1 {
    font-size: 32px !important;
    letter-spacing: 0em !important;
  }

  /* Optional custom utilities */
  .custom-text-class { font-size: 14px; }
  .custom-button-class { padding: 10px 20px; font-size: 16px; }
}

@media (max-width: 959px) {
  #posts-content .blog-single-title,
  .container h1 {
    font-size: 20px;
    line-height: 1.2;
    margin-right: -40px;
    
  }
}
/********************************************
  HERO SUBTITLE — FIXED, CLEAN, 2-LINE LIMIT
********************************************/

/* Hide breadcrumbs only */
.blog-title-center .bbp-breadcrumb,
.blog-title-center .breadcrumbs {
    display: none !important;
}

/* Force-show subtitle (remove all previous conflicts) */
.blog-title-center .section-subheading,
.entry-header .section-subheading,
.section-heading .section-subheading {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-align: center;
    color: #eaf2ff !important;  
    margin-top: 18px !important;      /* consistent, balanced spacing */
    margin-bottom: 0 !important;
    font-family: var(--font-system);
    font-weight: 400;
    font-size: clamp(16px, 1.5vw, 22px);
    line-height: 1.5;
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}

/* Limit subtitle to EXACTLY 2 balanced lines */
.blog-title-center .section-subheading,
.entry-header .section-subheading,
.section-heading .section-subheading {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/********************************************
   HERO SUBTITLE — DESKTOP
********************************************/
.blog-title-center .bbp-breadcrumb,
.blog-title-center .breadcrumbs {
    display: none !important;
}

.blog-title-center .section-subheading,
.entry-header .section-subheading,
.section-heading .section-subheading {
    display: -webkit-box !important;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    opacity: 1 !important;
    visibility: visible !important;

    text-align: center;
    color: #eaf2ff !important;

    max-width: 1020px;
    margin: 18px auto 0 auto !important;

    font-family: var(--font-system);
    font-weight: 400;
    font-size: clamp(16px, 1.5vw, 22px);
    line-height: 1.5;
}

/********************************************
   HERO SUBTITLE — MOBILE 
   (Better width, spacing, and readability)
********************************************/
@media (max-width: 767px) {
  .blog-title-center .section-subheading,
  .entry-header .section-subheading,
  .section-heading .section-subheading {
      max-width: 90%;                     /* fit mobile screens */
      font-size: 15px !important;         /* smaller clean size */
      -webkit-line-clamp: 2 !important;   /* ensure 2 lines on mobile */
      margin-top: 12px !important;        /* balanced spacing */
      line-height: 1.4;                   /* tighter for mobile */
      text-align: center !important;
  }
}
/* FIX THE MAIN PROBLEM: VIVA .container too narrow on mobile */
@media (max-width: 768px) {

  .container,
  .viva-container,
  .container-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

}
/* Fix hero title for pages using bare .section-heading */
h1.section-heading {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: inherit !important; /* restore Viva font */
}
/* Center the hero container for pages using VC rows */
.vc_row .wpb_column,
.vc_row .vc_column_container,
.vc_row .vc_column-inner,
.vc_row .wpb_wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}