/* =========================================================
   THEME MODERN — visual refresh layer
   Loads AFTER libs.min.css + styles.min.css.
   Same layout / same Bootstrap 3 + jQuery stack.
   Only touches: colors, typography, spacing, radii, shadows,
   and the hero slider transition. No IDs/classes used by
   scripts.min.js or shop.js are removed or renamed.
   ========================================================= */

:root{
  /* Matched to the Nova Link logo: deep navy wordmark + lighter blue DNA icon */
  --c-primary:      #1F3B73;
  --c-primary-dark: #16305C;
  --c-primary-soft: #E8EDF8;
  --c-accent:       #3E7BC4;
  --c-navy-deep:    #0F1B33;
  --c-ink:          #1b2030;
  --c-text:         #4a4f5c;
  --c-muted:        #8890a0;
  --c-border:       #e6e9f0;
  --c-bg-soft:      #f6f8fb;
  --c-danger:       #f0473f;
  --r-lg: 12px;
  --r-md: 8px;
  --r-sm: 6px;
  --shadow-sm: 0 1px 3px rgba(20,24,40,.06);
  --shadow-md: 0 10px 24px rgba(20,24,40,.08);
  --ease: cubic-bezier(.22,.61,.36,1);
  --z-header: 1050;
  --z-slider: 1;
}

/* ---------- Typography ---------- */
html, body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
}
body{
  color: var(--c-text);
  background-color: #fff;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.title, .title-footer{
  color: var(--c-ink);
  font-weight: 600;
  letter-spacing: -.01em;
}
.title > span, .title-footer > span{ color: var(--c-ink); }
a{ color: var(--c-primary); }
a:hover, a:focus{ color: var(--c-primary-dark); }

/* ---------- Buttons ---------- */
.btn, .btn-theme, .bootstrap-select .dropdown-toggle, .form-control, .input-group-addon{
  border-radius: var(--r-sm) !important;
}
.btn{
  font-weight: 500;
  letter-spacing: .01em;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
}
.btn:active{ transform: translateY(1px); }

.blue .btn-theme,
.btn-theme{
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: var(--shadow-sm);
}
.blue .btn-theme:hover, .blue .btn-theme:focus,
.blue .btn-theme.active, .blue .btn-theme:active,
.btn-theme:hover, .btn-theme:focus{
  background-color: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
}
.btn-primary, .label-primary, .bg-primary{
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}
.text-primary, .blue a, .blue .footer a, a.text-primary, .text-blue{
  color: var(--c-primary) !important;
}
.blue .footer a:hover, .blue a:hover{ color: var(--c-primary-dark) !important; }

/* ---------- Header / nav ---------- */
.blue .top-header, .blue .top-header ul.list-inline>li .bootstrap-select.open>.dropdown-toggle,
.blue .top-header ul.list-inline>li .dropdown.open>.dropdown-toggle{
  background-color: var(--c-border);
}
.blue .top-header ul.list-inline>li .dropdown-toggle:active,
.blue .top-header ul.list-inline>li .dropdown-toggle:focus,
.blue .top-header ul.list-inline>li .dropdown-toggle:hover,
.blue .top-header ul.list-inline>li:hover,
.blue .top-header ul.list-inline>li:focus{
  background-color: var(--c-border);
}
.navbar{
  box-shadow: var(--shadow-sm);
  padding: 4px 0;
}

/* ---------- Header stacking fix ----------
   Neither the header nor the slider previously declared a
   z-index, so browsers were free to paint the slider's layer
   above the nav dropdowns. Give the whole header its own
   higher stacking layer so every dropdown inside it (top bar
   language/currency/member menu AND the Company/Products nav
   menu) always renders above the hero slider, no matter what
   transforms/opacity the slider uses internally. */
header{
  position: relative;
  z-index: var(--z-header);
}
.slider-container{
  position: relative;
  z-index: var(--z-slider);
}
/* Order the top bar above the nav bar within header's stacking context,
   so the top bar's dropdowns (language/currency/member) — which open
   downward and overlap the navbar below them — always paint on top of
   it instead of being covered by the navbar's solid background. */
.top-header{
  position: relative;
  z-index: 1100;
}
.navbar{
  position: relative;
  z-index: 10;
}
.navbar .navbar-nav>li>a{
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.blue .navbar .navbar-nav>.active>a,
.blue .navbar .navbar-nav>li>a:hover,
.blue .navbar .navbar-nav>li>a:focus,
.blue .navbar .navbar-nav>.open>a{
  background-color: var(--c-primary-soft) !important;
  color: var(--c-primary-dark) !important;
  border-radius: var(--r-sm);
}
.blue .main-header .btn-search,
.blue .main-header .cart-btn>button:hover,
.blue .main-header .cart-btn.open>button{
  background-color: var(--c-primary);
  border-color: var(--c-primary) !important;
}

/* ---------- Dropdowns / form controls ---------- */
.dropdown-menu{
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--c-border);
  padding: 6px;
  overflow: hidden;
}
.dropdown-menu>li>a{
  border-radius: var(--r-sm);
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{
  background-color: var(--c-bg-soft);
}
.form-control{
  border-color: var(--c-border);
  box-shadow: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-control:focus{
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}

/* ---------- Breadcrumb / page background ---------- */
.breadcrumb-container{ background-color: var(--c-bg-soft); }
.breadcrumb-container .breadcrumb>li>a{ color: var(--c-primary); }
.page-contents{ background-color: var(--c-bg-soft); padding: 32px 0; }

/* ---------- Product cards ---------- */
.product{
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: none;
  transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.product:hover{
  box-shadow: var(--shadow-md);
  border-color: transparent;
  transform: translateY(-3px);
}
.product .product-desc .product-name,
.stats-container .product_name a{
  color: var(--c-ink);
  font-weight: 600;
}
.stats-container .product_price,
.product .product-bottom .product-price{
  color: var(--c-accent) !important;
  font-weight: 700;
}
.featured-products .btn{
  border-radius: var(--r-sm);
  border-width: 2px;
}
.featured-products .image_overlay{ background: var(--c-ink) !important; }
.featured-products .product .btn:hover{ color: var(--c-ink) !important; }

/* ---------- Pagination / list groups ---------- */
.pagination>li>a, .pagination>li>span{
  border-radius: var(--r-sm) !important;
  margin: 0 3px;
  border-color: var(--c-border);
  color: var(--c-text);
}
.pagination>.active>a, .pagination>.active>a:hover, .pagination>.active>a:focus,
.pagination>.active>span{
  background-color: var(--c-primary);
  border-color: var(--c-primary);
}
.list-group-item{
  border-radius: var(--r-sm) !important;
  border-color: var(--c-border);
}
.panel{
  border-radius: var(--r-md);
  border-color: var(--c-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel-heading{
  background-color: var(--c-bg-soft) !important;
  border-color: var(--c-border) !important;
}

/* ---------- Footer ---------- */
.footer{
  background-color: var(--c-ink);
}
.back-to-top{ background-color: var(--c-navy-deep); border-radius: 50%; box-shadow: var(--shadow-md); }
.footer .follow-us li a{ transition: background-color .18s var(--ease), transform .18s var(--ease); }
.footer .follow-us li a:hover{ transform: translateY(-2px); }

/* ---------- Alerts / sweetalert / badges ---------- */
.swal2-modal{ border-radius: var(--r-lg) !important; }
.swal2-modal .swal2-styled{ border-radius: var(--r-sm) !important; }
.alert{ border-radius: var(--r-md); }
.label{ border-radius: var(--r-sm); }

/* =========================================================
   HERO SLIDER — smooth crossfade, autoplay, dots + arrows
   Apply by adding class="carousel-fade" to the hero
   .carousel element in index.php (already done there).
   ========================================================= */
.slider-container .carousel.carousel-fade .carousel-inner > .item{
  opacity: 0;
  transition: opacity 1.15s var(--ease);
  left: 0 !important;
}
.slider-container .carousel.carousel-fade .carousel-inner > .active{
  opacity: 1;
}
.slider-container .carousel.carousel-fade .carousel-inner > .active.left,
.slider-container .carousel.carousel-fade .carousel-inner > .active.right{
  left: 0;
  opacity: 0;
  z-index: 1;
}
.slider-container .carousel.carousel-fade .carousel-inner > .next.left,
.slider-container .carousel.carousel-fade .carousel-inner > .prev.right{
  opacity: 1;
}
.slider-container .carousel.carousel-fade .carousel-control{ z-index: 2; }

/* Slightly slower, gentler zoom-in on the active slide for polish */
.slider-container .item img{
  transition: transform 6s linear;
  transform: scale(1);
}
.slider-container .item.active img{
  transform: scale(1.05);
}

/* Modern dots */
.slider-container .carousel-indicators{
  bottom: 18px;
}
.slider-container .carousel-indicators li{
  width: 9px; height: 9px;
  margin: 0 5px;
  background-color: rgba(255,255,255,.55);
  border: none;
  transition: all .2s var(--ease);
}
.slider-container .carousel-indicators .active{
  width: 26px; height: 9px;
  border-radius: 6px;
  background-color: #fff;
}

/* Modern arrows */
.slider-container .carousel-control{
  width: 64px;
  background: none !important;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.slider-container .carousel:hover .carousel-control{ opacity: 1; }
.slider-container .carousel-control .fa{
  top: 50%;
  margin-top: -22px;
  width: 44px; height: 44px;
  line-height: 44px;
  border-radius: 50%;
  background-color: rgba(20,24,40,.35);
  backdrop-filter: blur(2px);
  text-align: center;
  font-size: 18px !important;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.slider-container .carousel-control:hover .fa{
  background-color: rgba(20,24,40,.55);
  transform: scale(1.06);
}

/* ---------- Responsive spacing polish ---------- */
@media (max-width: 767px){
  .page-contents{ padding: 20px 0; }
  .navbar .navbar-nav>li>a{ font-size: 13px; }
  .slider-container .carousel-control{ width: 44px; }
  .slider-container .carousel-control .fa{ width: 34px; height: 34px; line-height: 34px; margin-top: -17px; font-size: 15px !important; }
}

/* =========================================================
   MOBILE HEADER PARITY
   Makes the phone header match the desktop one: a real
   hamburger icon (not plain text) and a visible cart
   shortcut with the same brand color/rounding as the
   desktop cart button, instead of silently being hidden.
   ========================================================= */
.navbar-toggle{
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-color: #fff;
}
.navbar-toggle:hover, .navbar-toggle:focus{
  background-color: var(--c-primary-soft);
  border-color: var(--c-primary-soft);
}
.navbar-default .navbar-toggle .icon-bar{
  background-color: var(--c-primary);
}

.navbar .btn-cart-xs{
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff !important;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.navbar .btn-cart-xs:hover, .navbar .btn-cart-xs:focus{
  background-color: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
  color: #fff !important;
}

@media (max-width: 767px){
  .navbar-collapse{
    background-color: #fff;
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-md);
  }
  .navbar-nav>li>a{
    padding: 12px 20px;
    border-bottom: 1px solid var(--c-border);
  }
  .navbar-nav>li:last-child>a{ border-bottom: none; }
}

/* ---------- Slider caption safety on small screens ---------- */
@media (max-width: 767px){
  .slider-container .carousel-caption{
    left: 5%; right: 5%; bottom: 10px; padding: 8px 0;
  }
  .slider-container .carousel-caption h1,
  .slider-container .carousel-caption h2,
  .slider-container .carousel-caption h3{
    font-size: 18px;
  }
  .slider-container .carousel-caption p{ font-size: 13px; }
}

/* ---------- Footer breathing room on mobile ---------- */
@media (max-width: 767px){
  .footer .col-md-4{ margin-bottom: 24px; }
  .footer .title-footer{ margin-top: 4px; }
}

/* =========================================================
   NOVA STATIC "COMPANY" PAGE KIT
   Shared by About Us / Our Story / Executive Team /
   Leadership Team. Two hero variants:
     .nova-hero            — flat brand-gradient band
     .nova-hero.nova-hero-photo — dimmed full-bleed photo band
   (set the actual photo via an inline background-image in
   the view, same pattern the homepage slider uses — CSS
   files can't reference per-page PHP data.)
   ========================================================= */
.nova-hero{
  position: relative;
  padding: 70px 0;
  color: #fff;
  background: linear-gradient(120deg, var(--c-navy-deep), var(--c-primary));
  background-size: cover;
  background-position: center;
}
.nova-hero .container{ position: relative; z-index: 1; }
.nova-hero-icon{
  display: block;
  font-size: 30px;
  margin-bottom: 14px;
  opacity: .85;
}
.nova-hero h1{
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 10px;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.nova-hero p{
  max-width: 640px;
  font-size: 15px;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.nova-hero-photo{
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding-top: 40px;
  padding-bottom: 34px;
}

@media (max-width: 767px){
  .nova-hero{ padding: 44px 0; }
  .nova-hero-photo{ min-height: 170px; padding-bottom: 22px; }
  .nova-hero h1{ font-size: 24px; }
  .nova-hero p{ font-size: 13px; }
}

/* Optional centered intro block (not used on Executive Team,
   available for other Company pages) */
.nova-section-title{ text-align: center; max-width: 640px; margin: 0 auto 40px; }
.nova-section-title h2{ margin-bottom: 10px; }
.nova-section-title p{ color: var(--c-muted); }
.nova-underline{
  width: 56px; height: 3px;
  background: var(--c-primary);
  margin: 0 auto 16px;
  border-radius: 2px;
}

/* ---------- Team grid ---------- */
.nova-team-section{ padding-top: 56px; padding-bottom: 56px; }
.nova-team-card{
  margin-bottom: 56px;
  text-align: center;
}
.nova-team-photo{
  width: 100%;
  max-width: 230px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 18px;
  background-size: cover;
  background-position: center top;
  background-color: var(--c-border);
  filter: grayscale(100%);
  transition: filter .25s var(--ease);
}
.nova-team-card:hover .nova-team-photo{
  filter: grayscale(0%);
}
.nova-team-name{
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
}
.nova-team-role{
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.nova-team-bio{
  max-width: 260px;
  margin: 0 auto;
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-text);
}
.nova-team-social{ margin-top: 12px; }
.nova-team-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-bg-soft);
  color: var(--c-primary);
  margin: 0 4px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nova-team-social a:hover{ background: var(--c-primary); color: #fff; }

.nova-related-panel{
  margin-top: 20px;
  border-radius: var(--r-md);
  border-color: var(--c-border);
}
.nova-related-panel .panel-heading{
  background-color: var(--c-bg-soft);
  border-color: var(--c-border);
  border-radius: var(--r-md) var(--r-md) 0 0;
}