/*!

/* Ensure language toggling via [hidden] always wins (prevents mixed EN/HY labels) */
[hidden]{ display:none !important; }
    Universal - Smart multi-purpose html5 template
    To use this template you must have a license purchased at Themeforest (themeforest.com)
    Copyright 1995-2016 ForBetterWeb.com
 */
/*------------------------------------------------------------------

Table of contents

* Fonts
* Plugins
* Base structure
  * Preloader
  * Buttons
  * NavBar
  * Backgrounds and font color
  * Intro
    * Intro solid color
    * Video background
  * Forms
    * Subscribe form
  * Countdown
  * News - Blog grid
  * Team
  * Contact
  * Quote
  * Facts
  * Map
  * Carousel
    * Shop thumbnails carousel
  * Animated mouse
  * Text rotator
  * Number scroller
  * Testimonials
  *  Portfolio
  * Pricing
  * Miscellaneous
  * Pager
  * Bars and charts
  * Shop
  * Media Queries
  * Magic background
  * Footer
* Stop animation on mobile devices
* Demo page

-------------------------------------------------------------------*/
/* Fonts */
@import "https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900|Roboto+Mono:100,400|Caveat";
/* Plugins */
@import url(../js/vegas/vegas.min.css);
@import url(ionicons.min.css);
@import url(font-awesome.min.css);
@import url(animate.min.css);
@import url(swipebox.css);
/* Base structure */
html {
  width: 100% !important;
  height: 100% !important; }

body {
  width: 100% !important;
  height: 100% !important;
  font: normal 15px/1.8 Raleway, sans-serif;
  letter-spacing: 0.03em;
  color: #444;
  background-color: #fff;
  -webkit-font-smoothing: antialiased; }

/* Preloader */
#preloader {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-color: #fff;
  z-index: 99999;
  height: 100%;
  width: 100%;
  overflow: hidden; }

#status {
  position: absolute;
  left: 47%;
  top: 50%;
  margin: auto;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  background: #999;
  animation: 1.15s infinite ease-in-out;
  -webkit-animation: 1.15s infinite ease-in-out;
  -moz-animation: 1.15s infinite ease-in-out;
  animation-name: loader;
  -webkit-animation-name: loader;
  -moz-animation-name: loader; }
  #status:before, #status:after {
    animation: 1.15s infinite ease-in-out;
    -webkit-animation: 1.15s infinite ease-in-out;
    -moz-animation: 1.15s infinite ease-in-out; }
  #status:before, #status:after {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0; }

@keyframes loader {
  from {
    transform: scale(0);
    opacity: 1; }
  to {
    transform: scale(1);
    opacity: 0.5; } }
@-ms-keyframes loader {
  from {
    -ms-transform: scale(0);
    opacity: 1; }
  to {
    -ms-transform: scale(1);
    opacity: 0.5; } }
@-webkit-keyframes loader {
  from {
    -webkit-transform: scale(0);
    opacity: 1; }
  to {
    -webkit-transform: scale(1);
    opacity: 0.5; } }
@-moz-keyframes loader {
  from {
    -moz-transform: scale(0);
    opacity: 1; }
  to {
    -moz-transform: scale(1);
    opacity: 0.5; } }
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 35px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.7;
  font-weight: 800; }

h4, h5, h6 {
  font-weight: 700; }

.no-transform {
  text-transform: none; }

p {
  margin: 0 0 35px; }

a {
  text-decoration: none;
  color: #000;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease; }
  a img {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease; }

img {
  -webkit-filter: blur(0);
  filter: blur(0); }

a, img, :focus, input {
  outline: none !important; }

a:hover, a:focus {
  color: #666;
  text-decoration: none; }
a img:hover {
  opacity: .85; }

.no-pad {
  padding: 0 !important;
  margin: 0 !important; }

.no-pad-btm {
  padding-bottom: 0 !important; }

.no-pad-top {
  padding-top: 0 !important; }

.overlay {
  background: rgba(7, 9, 21, 0.7); }

.overlay-gray {
  background: rgba(0, 0, 0, 0.7); }

.overlay-white {
  background: rgba(255, 255, 255, 0.8); }

.overlay, .overlay-gray, .overlay-white {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0; }

.image-overlay {
  padding: 0;
  margin-top: -200px;
  position: relative; }

@media (max-height: 770px) {
  .image-overlay {
    margin-top: -120px; } }
.big {
  font-size: 300px;
  line-height: 1;
  text-shadow: none; }

.breadcrumb {
  background-color: transparent;
  padding: 15px 15px; }

section, .section {
  position: relative;
  z-index: 992;
  padding-top: 140px;
  padding-bottom: 140px;
  background-color: #fff; }

.section-small {
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px; }

.list-inline > li {
  padding-bottom: 10px;
  vertical-align: bottom; }

.label, input, .btn, textarea, .dropdown-menu, .panel, .progress, .list-group-item, select {
  border-radius: 0 !important; }

.label {
  padding: 0.2em 0.7em 0.3em 0.7em; }

.nav .label {
  padding: 0.4em 0.7em 0.3em 0.7em; }

.label-danger {
  background-color: #c00; }

.badge {
  line-height: inherit;
  border-radius: 2px !important; }

/* Buttons */
.btn {
  font-size: 12px !important;
  letter-spacing: 2px;
  outline: 0;
  text-transform: uppercase;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  text-shadow: none;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px 6px 15px; }

.btn-lg {
  font-size: 13px !important;
  padding: 10px 35px; }

.btn-sm {
  font-size: 11px !important; }

.btn-xs {
  font-size: 10px !important;
  padding: 4px 10px; }

.btn-border {
  border: 2px solid #fff;
  color: #fff !important;
  background-color: transparent; }

.btn-dark-border {
  border: 1px solid #000;
  color: #000;
  background-color: transparent; }

.btn-white {
  border: 2px solid #fff;
  color: #000 !important;
  background-color: #fff; }

.btn-gray {
  border: 2px solid #ddd;
  background-color: #ddd;
  color: #000 !important; }

.btn-dark {
  border: 2px solid #18191B;
  background-color: #18191B;
  color: #fff !important; }

.btn-universal {
  border: 2px solid #789;
  background-color: #789;
  color: #fff !important; }

.btn-violet {
  border: 2px solid #ff4081;
  background-color: #ff4081;
  color: #fff !important; }

.btn:hover {
  opacity: 0.65; }

.btn-border:focus, .btn-dark-border:focus, .btn-gray:focus, .btn-border:focus, .btn-white:focus, .btn-universal:focus, .btn-violet:focus {
  opacity: 1; }

a .fa, a .icon {
  text-decoration: none;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; }

.iconsmall {
  font-size: 46px;
  float: left;
  line-height: 54px;
  padding-right: 10px; }

.icon-big {
  font-size: 80px;
  line-height: 120px;
  display: block; }

#services-construction .icon-big {
  color: #5B6DF6; }

#time .icon-big {
  color: #ff4081; }

header .icon-big {
  line-height: 140px; }

.classic,
.classic2 {
  font-family: 'Caveat';
  font-weight: normal !important;
  text-transform: capitalize;
  letter-spacing: 0;
  margin: 0 0 15px;
  transform: rotate(-3deg) !important;
  -moz-transform: rotate(-3deg) !important;
  -webkit-transform: rotate(-3deg) !important;
  opacity: .8; }

.classic2 {
  font-family: 'Great Vibes'; }

.thin {
  font-weight: 100 !important; }

::-moz-selection, ::selection {
  color: #fff;
  background: #000; }

ul, ol {
  margin-bottom: 1.5em; }

a .fa {
  opacity: 0.6 !important; }
  a .fa:hover {
    opacity: .9; }

.float-left {
  float: left; }

.float-right {
  float: right; }

/* NavBar */
.navbar-custom {
  margin-bottom: 0;
  border-bottom: transparent;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.9);
  -webkit-transition: all .8s ease;
  -moz-transition: all .8s ease;
  transition: all .8s ease; }
  .navbar-custom .navbar-brand {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: none;
    padding: 17px 5px 12px 15px; }
  .navbar-custom img {
    display: inline-block; }
  .navbar-custom.top-nav-collapse {
    background-color: #fff;
    border-bottom: 1px solid #eee; }
  .navbar-custom.top-nav-collapse a {
    color: #000; }
  .navbar-custom.top-nav-collapse .navbar-brand {
    font-size: 22px;
    padding-top: 16px; }

.navbar-fixed-top .container {
  width: auto; }

@media (min-width: 1200px) {
  .top-nav-collapse .container {
    width: 1170px !important; } }
.navbar-custom .navbar-brand .logo {
  max-height: 28px;
  display: inline-block; }

.logoborder {
  border: 1px solid #fff;
  padding: 10px;
  max-height: 42px !important; }

.navbar-custom.top-nav-collapse .navbar-brand .logo {
  max-height: 24px; }

.navbar-custom .navbar-brand .logodark {
  display: block; }

.navbar-custom.top-nav-collapse .navbar-brand .logodark {
  display: inline-block; }

.navbar-custom .navbar-brand .logo {
  display: inline-block; }

.navbar-custom.top-nav-collapse .navbar-brand .logo {
  display: block; }

.navbar-custom.top-nav-collapse .navbar-brand .logodark {
  max-width: 160px;
  max-height: 20px; }
.navbar-custom .navbar-brand i {
  vertical-align: middle; }
.navbar-custom .navbar-brand:focus {
  outline: 0; }
.navbar-custom .navbar-brand .navbar-toggle {
  padding: 4px 6px;
  font-size: 16px;
  color: #fff; }
  .navbar-custom .navbar-brand .navbar-toggle:focus, .navbar-custom .navbar-brand .navbar-toggle:active {
    outline: 0; }

.nav > li > a {
  padding: 21px 13px 15px; }

.navbar-custom a {
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px; }
.navbar-custom .nav li a {
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }
  .navbar-custom .nav li a:hover {
    outline: 0;
    background-color: transparent; }
.navbar-custom .nav li a:focus, .navbar-custom .nav li a:active {
  outline: 0;
  background-color: transparent; }
.navbar-custom .nav li.active {
  outline: 0;
  background-color: transparent !important; }
  .navbar-custom .nav li.active a {
    color: #789 !important; }
    .navbar-custom .nav li.active a:hover {
      color: #789; }

.dropdown-menu {
  background-color: rgba(255, 255, 255, 0.97);
  color: #fff;
  min-width: 230px !important;
  right: 0;
  left: auto;
  border: 0; }
  .dropdown-menu > li > a {
    font-size: 12px;
    font-weight: 600;
    padding: 12px 18px;
    white-space: nowrap; }
  .dropdown-menu > .active > a {
    color: #333 !important;
    background-color: transparent; }
    .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
      background-color: transparent; }

.nav .open > a {
  background-color: transparent;
  border-color: transparent; }
  .nav .open > a:focus, .nav .open > a:hover {
    background-color: transparent;
    border-color: transparent; }

.search-form {
  margin: 5px 10px;
  width: 250px;
  font-size: 14px; }
  .search-form .form-control {
    color: #ccc !important; }

.search-button {
  width: 42px;
  height: 40px;
  line-height: 38px;
  margin-top: -22px;
  position: absolute;
  top: 50%;
  right: 12px;
  overflow: hidden;
  background: transparent;
  color: #888;
  border: none;
  outline: none; }

.search-form {
  padding: 10px;
  width: 100%;
  border-bottom: #555;
  margin: 0; }

.nav .badge {
  background-color: #789;
  color: #fff;
  padding: 4px 5px 5px 6px;
  font-size: 11px;
  position: absolute;
  margin: -10px -5px;
  line-height: 1;
  border-radius: 50% !important; }

.navbar-toggle {
  padding: 10px 0; }
  .navbar-toggle .icon-bar {
    width: 30px;
    border-radius: 0;
    background: #fff; }

.top-nav-collapse .icon-bar {
  background: #333; }

.vmenu {
  display: inline-block;
  margin: 0;
  padding: 0; }

a.btn-nav .btn {
  margin-bottom: 0; }

.navbar-custom .nav .dropdown-menu li a.btn-nav:hover {
  background-color: transparent; }

.menu-divider {
  width: 1px;
  border-right: 1px solid #b3b3b3;
  line-height: 18px;
  margin: 23px 15px 0; }

.dropdown-menu strong {
  padding: 20px 0 16px 18px;
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1px;
  color: #555 !important; }

.nav .active {
  height: auto !important; }

.dropdown-menu {
  padding: 10px 0; }

.navbar-nav:not(.sm-collapsible) ul .caret {
  position: absolute;
  right: 0;
  margin-top: 6px;
  margin-right: 15px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px dashed; }
.navbar-nav:not(.sm-collapsible) ul a.has-submenu {
  padding-right: 30px; }
.navbar-nav.sm-collapsible .caret, .navbar-nav.sm-collapsible ul .caret {
  position: absolute;
  right: 0;
  margin: -25px 14px 0 0;
  padding: 0;
  width: 32px;
  height: 26px;
  line-height: 24px;
  text-align: center;
  border-width: 1px;
  border-style: solid; }
.navbar-nav.sm-collapsible .caret:before {
  content: '+';
  font-family: monospace;
  font-size: 20px; }
.navbar-nav.sm-collapsible .open > a > .caret:before {
  content: '-'; }
.navbar-nav.sm-collapsible a.has-submenu {
  padding-right: 50px; }
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] .caret, .navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] ul .caret {
  position: static;
  margin: 0 0 0 2px;
  padding: 0;
  width: 0;
  height: 0;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-bottom: 0;
  border-left: 4px solid transparent; }
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] .caret:before {
  content: '' !important; }
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] a.has-submenu {
  padding-right: 15px; }
.navbar-nav span.scroll-up, .navbar-nav span.scroll-down {
  position: absolute;
  display: block;
  visibility: hidden;
  height: 20px;
  overflow: hidden;
  text-align: center; }
.navbar-nav span.scroll-up-arrow {
  position: absolute;
  top: -2px;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  overflow: hidden;
  border-top: 7px dashed transparent;
  border-right: 7px dashed transparent;
  border-bottom: 7px solid;
  border-left: 7px dashed transparent; }
.navbar-nav span.scroll-down-arrow {
  position: absolute;
  top: -2px;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  overflow: hidden;
  border-top: 7px dashed transparent;
  border-right: 7px dashed transparent;
  border-bottom: 7px solid;
  border-left: 7px dashed transparent;
  top: 6px;
  border-top: 7px solid;
  border-right: 7px dashed transparent;
  border-bottom: 7px dashed transparent;
  border-left: 7px dashed transparent; }
.navbar-nav.sm-collapsible ul .dropdown-menu > li > a, .navbar-nav.sm-collapsible ul .dropdown-menu .dropdown-header {
  padding-left: 35px; }
.navbar-nav.sm-collapsible ul ul .dropdown-menu > li > a, .navbar-nav.sm-collapsible ul ul .dropdown-menu .dropdown-header {
  padding-left: 45px; }
.navbar-nav.sm-collapsible ul ul ul .dropdown-menu > li > a, .navbar-nav.sm-collapsible ul ul ul .dropdown-menu .dropdown-header {
  padding-left: 55px; }
.navbar-nav.sm-collapsible ul ul ul ul .dropdown-menu > li > a, .navbar-nav.sm-collapsible ul ul ul ul .dropdown-menu .dropdown-header {
  padding-left: 65px; }
.navbar-nav .dropdown-menu > li > a {
  white-space: normal; }
.navbar-nav ul.sm-nowrap > li > a {
  white-space: nowrap; }
.navbar-nav.sm-collapsible ul.sm-nowrap > li > a {
  white-space: normal; }

.navbar-right ul.dropdown-menu {
  left: auto;
  right: 0; }

.dropdown-menu .fa {
  opacity: 0.5 !important;
  line-height: 13px !important; }

.nav .fa {
  font-size: 16px;
  line-height: 1px; }
.nav .fa-angle-down {
  font-size: 13px; }
.nav .fa, .nav a .fa {
  opacity: 1 !important; }
.nav .fa-plus {
  font-size: 12px; }

@media (min-width: 991px) {
  .search-form input {
    background: transparent;
    border: 0;
    width: 200px; }

  .navbar-custom {
    padding: 30px;
    border-bottom: 0;
    letter-spacing: 1px;
    background: 0 0;
    background: transparent; }
    .navbar-custom.top-nav-collapse {
      padding: 0 30px;
      background-color: #fff; }

  .navbar-custom .nav .dropdown-menu li a:hover {
    background-color: #eee; }

  @-webkit-keyframes fadeInUniversal {
    0% {
      opacity: 0;
      transform: translate(0, -40px); }
    100% {
      opacity: 1;
      transform: translate(0, 0); } }
  @keyframes fadeInUniversal {
    0% {
      opacity: 0;
      transform: translate(0, -40px); }
    100% {
      opacity: 1;
      transform: translate(0, 0); } }
  li:hover ul.dropdown-menu {
    opacity: 1;
    -webkit-animation: fadeInUniversal 0.7s;
    animation: fadeInUniversal 0.7s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block; }

  .navbar-left {
    float: right !important; }

  ul.dropdown-menu.columns-2 {
    left: 0 !important;
    padding: 20px 22px 25px; }
  ul.dropdown-menu.columns-3 {
    left: 0 !important;
    padding: 20px 22px 25px;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    min-width: 760px !important; }
  ul.dropdown-menu.columns-2 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    min-width: 380px !important; }

  .columns2 .btn-white, .columns3 .btn-white {
    margin-top: 12px;
    display: inline-block; }

  .navbar-fixed-top .caret, .navbar-fixed-top .open > .dropdown-menu {
    display: block; }

  .angle-right:after {
    float: right;
    font-family: 'fontawesome';
    content: "\f105";
    color: inherit;
    position: absolute;
    right: 20px; } }
@media (max-width: 991px) {
  .dropdown-menu {
    padding: 0; } }
@media (max-width: 990px) {
  p.empty {
    display: block; }

  .search-button {
    margin-top: 0; }

  .nav .badge {
    margin: 2px 4px; }
  .nav a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    color: #000 !important; }
    .nav a:focus {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; }

  .navbar-header {
    float: none; }

  .navbar-left, .navbar-right {
    float: none !important; }

  .navbar-toggle {
    display: block; }

  .navbar-collapse {
    background-color: #eee !important;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
    .navbar-collapse.collapse {
      display: none !important; }

  .navbar-nav {
    float: none !important;
    margin-top: 7px; }
    .navbar-nav > li {
      float: none; }
      .navbar-nav > li > a {
        padding-top: 14px;
        padding-bottom: 14px; }

  .collapse.in {
    display: block !important; }

  .navbar-collapse.in {
    overflow-y: auto !important; }

  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none; }
    .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
      padding: 10px 15px 10px 25px; }

  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #999; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
      color: #fff;
      background-color: transparent;
      /*background-image*/: none; } }
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
  max-height: 400px; }

/* Backgrounds and font color */
.bg-white {
  background-color: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee; }

.bg-gray {
  background-color: #f7f7f7; }

.bg-gray2 {
  background-color: #E8E8E8; }

.bg-transparent {
  background-color: transparent; }

.bg-dark {
  background-color: #18191B; }

.bg-dark2 {
  background-color: rgba(12, 13, 15, 0.97); }

.small-header {
  position: relative;
  z-index: 1;
  padding-top: 142px;
  padding-bottom: 55px; }

.small-header.bg-dark:before, .small-header.bg-transparent:before, .small-header.bg-img:before, .small-header.bg-img2:before, .small-header.bg-img3:before, .small-header.bg-img4:before, .small-header.bg-img5:before {
  background: rgba(7, 9, 21, 0.5);
  content: " ";
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -9; }

@media (max-width: 992px) {
  .small-header {
    text-align: center !important; }
    .small-header .text-right {
      text-align: center !important; } }
.small-header .bg-white h2, .small-header .bg-white h3 {
  color: #789; }

.bg-dark, .bg-dark2, .bg-transparent, .bg-img, .bg-img2, .bg-img3, .bg-img4, .bg-img5 {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }

.bg-img {
  background: url(../img/header/19.jpg); }

.bg-img2 {
  background: url(../img/header/17.jpg); }

.bg-img3 {
  background: url(../img/header/13.jpg); }

.bg-img4 {
  background: url(../img/header/10.jpg); }

.bg-img5 {
  background: url(../img/header/18.jpg); }

.bg-img, .bg-img2, .bg-img3, .bg-img4, .bg-img5 {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover; }

.bg-dark a, .bg-dark2 a, .bg-transparent a, .bg-img a, .bg-img2 a, .bg-img3 a, .bg-img4 a, .bg-img5 a, .bg-primary a {
  color: #fff; }

.bg-dark a:hover, .bg-dark2 a:hover, .bg-transparent a:hover, .bg-img a:hover, .bg-img2 a:hover, .bg-img3 a:hover, .bg-img4 a:hover, .bg-img5 a:hover {
  color: rgba(255, 255, 255, 0.8); }

/* Intro */
.intro {
  display: table;
  text-align: center;
  width: 100%;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100% !important;
  z-index: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover; }
  .intro a {
    color: #fff; }
    .intro a:hover {
      color: #ccc;
      text-decoration: none; }

.introhalf {
  height: auto !important; }

.intro .intro-body {
  display: table-cell;
  vertical-align: middle;
  padding: 150px 0 50px;
  width: 100%;
  position: relative;
  z-index: 1; }
  .intro .intro-body .badge {
    background-color: rgba(0, 0, 0, 0.4);
    color: #eee;
    font-size: 8px;
    position: absolute;
    margin: -9px -14px;
    line-height: 1;
    text-shadow: none;
    letter-spacing: 1px;
    border-radius: 50% !important;
    width: 45px;
    height: 45px;
    text-align: center;
    padding: 19px 0 0 2px;
    font-weight: 800; }

.introhalf .intro-body {
  padding: 180px 0 110px; }

.landing .intro-body:before {
  position: absolute;
  background: transparent; }

.intro-body:before {
  background: rgba(7, 9, 21, 0.5);
  content: "";
  left: 0;
  top: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -9; }

.intro .intro-body .brand-heading {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -2px;
  margin: 0 0 5px; }
.intro h1 {
  font-size: 60px;
  font-weight: 900;
  line-height: 80px; }
  .intro h1.classic {
    font-size: 100px;
    line-height: 100px;
    font-weight: normal; }
  .intro h1.classic2 {
    font-size: 110px;
    line-height: 110px; }
.intro .lead {
  margin: 40px 0 0; }

.intro-fullscreen {
  opacity: 1 !important; }
  .intro-fullscreen .intro-body {
    padding: 90px 0 20px; }

@media (max-height: 600px) {
  .intro-fullscreen {
    position: inherit; } }
@keyframes kenburns {
  0% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }
@media (min-width: 768px) {
  .intro {
    padding: 0; }
    .intro .intro-body .brand-heading {
      font-size: 46px; } }
/* Intro solid color */
.solid-color .intro-body:before, .solid-color2 .intro-body:before, .solid-color3 .intro-body:before {
  background: transparent !important; }
.solid-color.intro, .solid-color2.intro, .solid-color3.intro {
  text-shadow: none !important; }

.solid-color {
  background-color: #00bcd4; }

.solid-color2 {
  background-color: #ff4081; }

.solid-color3 {
  background-color: #607d8B; }

/* Video background */
.video-controls {
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 1;
  opacity: .4;
  display: block; }

.video-controls-visible {
  display: inline; }

.video-controls .fa {
  color: #fff;
  padding: 5px;
  width: 25px; }
.video-controls a.fa {
  text-decoration: none; }

.mbYTP_wrapper {
  z-index: 0 !important; }

.section-video .mbYTP_wrapper {
  z-index: -1 !important; }

.section-video:before {
  background: rgba(7, 9, 21, 0.5);
  content: "";
  left: 0;
  top: 0;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -9; }

.section-video {
  padding-top: 60px;
  padding-bottom: 60px;
  top: 0 !important;
  opacity: 1 !important; }

.bg-video-small {
  text-align: left !important;
  opacity: 1 !important;
  top: 0 !important; }

/* Forms */
.small-form {
  margin: 0 auto 40px !important;
  max-width: 480px; }

.help-block li {
  list-style: none;
  color: #990000; }
.help-block ul {
  padding: 0;
  margin: 0; }

.form-control {
  border: 1px solid #ddd;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: border-color ease-in-out .3s,-webkit-box-shadow ease-in-out .3s;
  transition: border-color ease-in-out .3s,box-shadow ease-in-out .3s; }
  .form-control:focus {
    border-color: #888;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none; }

.subscribe-form {
  padding-bottom: 10px; }

.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
  margin-left: 0; }

input[type=checkbox], input[type=radio] {
  margin: 7px 0 0; }

.checkbox label, .radio label {
  font-weight: 300; }

.form-signin .form-control {
  position: relative; }
  .form-signin .form-control:focus {
    z-index: 2; }
.form-signin input {
  margin-bottom: -1px; }

.dark-form input, .dark-form textarea {
  color: #ccc;
  background-color: #18191b;
  border: 0; }

/* Subscribe form */
#subscribe {
  color: #333 !important;
  text-shadow: none; }
  #subscribe a {
    color: #333 !important; }

/* Countdown */
[id*="clock"] {
  padding: 40px 0; }
  [id*="clock"] div {
    font-weight: 500;
    display: inline-block;
    font-size: 12px;
    margin: 0 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 60px; }
  [id*="clock"] span {
    font-family: "Roboto Mono", monospace;
    font-weight: 100;
    display: block;
    font-size: 64px;
    padding: 30px 0;
    border-bottom: 1px solid #ccc; }

@media (max-width: 1170px) {
  [id*="clock"] div {
    margin: 0 15px; }
  [id*="clock"] span {
    font-size: 48px;
    padding: 18px 0; } }
@media (max-width: 768px) {
  [id*="clock"] div {
    margin: 0 15px; }
  [id*="clock"] span {
    font-size: 42px;
    padding: 15px 0; } }
@media (max-width: 468px) {
  [id*="clock"] div {
    margin: 0 7px; }
  [id*="clock"] span {
    font-size: 32px;
    padding: 5px 0; } }
/* News - Blog etc grid */
#news div[class*="col-"] {
  margin-bottom: 60px; }
#news h5 {
  padding-top: 10px;
  margin-bottom: 25px; }

.grid-pad img {
  margin-bottom: 20px; }
.grid-pad div[class*="col-"] {
  margin-bottom: 40px; }

#news-single .carousel {
  padding-bottom: 20px; }

.row:not(:first-child) {
  padding-top: 40px; }

/* Team */
#team h2 {
  margin-top: -40px !important;
  padding-bottom: 0 !important; }
#team p {
  margin-bottom: 10px; }
#team .list-inline {
  margin: 0; }
#team img {
  border-radius: 50%; }

/* Contact */
#contact2 a {
  text-decoration: none;
  color: #555; }
#contact2 hr {
  margin-top: 40px;
  margin-bottom: 40px;
  border-top: 1px solid #ccc; }
#contact2 .list-inline {
  padding-top: 10px; }

@media (max-width: 991px) {
  #contact {
    text-align: center; } }
/* Quote */
blockquote {
  padding: 18px;
  margin: 0 0 20px;
  border-left: none; }
  blockquote:before, blockquote:after {
    color: #ccc;
    font-size: 18px;
    font-family: fontawesome; }
  blockquote:before {
    content: "\f10d";
    padding-right: 15px; }
  blockquote:after {
    content: "\f10e";
    padding-left: 10px; }

.quote {
  font-size: 18px; }

/* Facts */
@media (max-width: 768px) {
  .facts .col-sm-3 {
    margin-top: 25px;
    margin-bottom: 25px; } }
.action-box li {
  float: left;
  margin: 20px 0 0 15px; }
.action-box span {
  display: block; }

#tweecool span {
  font-size: 18px; }

/* Map */
#map, #mapdark {
  width: 100%;
  height: 430px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee; }

#mapdark {
  border: 0 !important; }

.mapsmall {
  margin-bottom: 30px;
  border: 0 !important; }

/* Carousel */
.carousel-control {
  width: 8%;
  color: #000;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9); }
  .carousel-control:focus, .carousel-control:hover {
    color: #000;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
    opacity: 0.5; }
  .carousel-control.left, .carousel-control.right {
    /*background-image*/: none;
    filter: none; }

#Carousel-intro .carousel-control {
  color: #fff;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9); }
  #Carousel-intro .carousel-control:focus, #Carousel-intro .carousel-control:hover {
    color: #fff;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
    opacity: 0.5; }

@media (max-width: 991px) {
  .carousel-big .carousel-control {
    display: block; } }
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity; }
.carousel-fade .carousel-inner .active {
  opacity: 1; }
  .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1; }
.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {
  opacity: 1; }
.carousel-fade .carousel-control {
  z-index: 9; }

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right, .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
.carousel-indicators {
  bottom: -60px; }

.indicators-inside {
  bottom: 7px; }

#Carousel-intro .carousel-indicators {
  bottom: 30px; }

.carousel-indicators .active {
  width: 16px;
  height: 16px;
  margin: 0 5px 0; }
.carousel-indicators li {
  width: 16px;
  height: 16px;
  margin: 0 5px 0;
  background-color: #666;
  border: 0; }
.carousel-indicators .active {
  background-color: #999; }

.carousel-control .icon-next, .carousel-control .icon-prev {
  font-family: sans-serif;
  font-size: 50px; }

#carousel-light2 {
  margin-top: -115px; }

.carousel, .item, .active, .carousel-inner {
  height: 100%; }

.fill {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover; }

.carousel-control .icon-next:before {
  font-family: "ionicons";
  content: "\f3d3"; }
.carousel-control .icon-prev:before {
  font-family: "ionicons";
  content: "\f3d2"; }

#carousel-news img {
  width: 100%; }

/* Shop thumbnails carousel */
#carousel-example-generic {
  margin: 20px auto;
  width: 400px; }

#carousel-shop .carousel-indicators {
  margin: 10px 0 0;
  text-align: left;
  width: 100%;
  position: static; }
  #carousel-shop .carousel-indicators img {
    max-width: 104px; }
  #carousel-shop .carousel-indicators li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 0 !important;
    width: auto; }
    #carousel-shop .carousel-indicators li img {
      display: block;
      opacity: 0.3;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out; }
    #carousel-shop .carousel-indicators li.active img {
      opacity: 1; }
    #carousel-shop .carousel-indicators li:hover img {
      opacity: 0.75; }
#carousel-shop .carousel-outer {
  position: relative;
  padding-bottom: 40px; }

#carousel-dark {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.27); }

.nav-pills.nav > li > a:focus, .nav-pills.nav > li > a:hover {
  background-color: transparent; }
.nav-pills.nav > li > a {
  padding: 0; }

/* Animated mouse */
.scroll-btn {
  width: 57px;
  display: block;
  text-align: center;
  margin: 60px auto -60px; }
  .scroll-btn .weel {
    position: relative;
    display: inline-block;
    height: 22px;
    margin: 10px auto 5px; }
  .scroll-btn .mouse {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 50px;
    border: 2px solid #eee;
    border-radius: 24px;
    opacity: .5; }
  .scroll-btn .weel span {
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -14px 0 0 -4px;
    background: #fff;
    border-radius: 20px;
    -webkit-animation: scroll 3s linear infinite;
    -moz-animation: scroll 3s linear infinite;
    animation: scroll 3s linear infinite; }

@-webkit-keyframes scroll {
  1% {
    opacity: 1;
    top: 30%; }
  20% {
    opacity: 1;
    top: 80%; }
  60% {
    opacity: 0;
    top: 80%; }
  100% {
    opacity: 0;
    top: 30%; } }
@-moz-keyframes scroll {
  1% {
    opacity: 1;
    top: 30%; }
  20% {
    opacity: 1;
    top: 80%; }
  60% {
    opacity: 0;
    top: 80%; }
  100% {
    opacity: 0;
    top: 30%; } }
@keyframes scroll {
  1% {
    opacity: 1;
    top: 30%; }
  20% {
    opacity: 1;
    top: 80%; }
  60% {
    opacity: 0;
    top: 80%; }
  100% {
    opacity: 0;
    top: 30%; } }
@media (max-height: 690px) {
  .scroll-btn {
    display: block; } }
/* Text rotator */
.rotating {
  display: inline-block; }

/* Number scroller */
.numscroller {
  font-family: "Roboto Mono", monospace;
  font-weight: 100;
  font-size: 50px;
  line-height: 90px;
  letter-spacing: 10px; }

/* Testimonials */
#testimonials .carousel-inner img {
  width: 160px;
  height: 160px;
  border-radius: 50%; }
#testimonials .carousel-caption {
  position: static;
  text-shadow: none;
  color: #444; }
#testimonials.bg-dark .carousel-caption {
  color: #fff; }

/*  Portfolio  */
.portfolio-sorting {
  text-transform: uppercase;
  margin-bottom: 48px; }
  .portfolio-sorting li a {
    color: #888;
    text-decoration: none;
    margin: 10px;
    letter-spacing: 2px;
    font-weight: 600; }
  .portfolio-sorting a:hover, .portfolio-sorting a.active {
    color: #555; }

.portfolio-item {
  font-size: 14px;
  position: relative;
  overflow: hidden;
  display: block;
  -webkit-transition: all .9s ease;
  -moz-transition: all .9s ease;
  transition: all .9s ease; }

.portfolio-items {
  margin-bottom: 0; }

.portfolio-item a {
  display: inline-block;
  color: #fff !important; }
  .portfolio-item a:hover .portfolio-overlay {
    opacity: 1;
    visibility: visible; }
.portfolio-item img {
  max-width: none;
  position: relative;
  left: 0;
  width: 100%; }
.portfolio-item:hover img {
  transform: scale(1.2, 1.2) translate(15px, 15px);
  -ms-transform: scale(1.2, 1.2) translate(15px, 15px);
  -webkit-transform: scale(1.2, 1.2) translate(15px, 15px); }

.portfolio-overlay {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75);
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  opacity: 0;
  visibility: hidden;
  overflow: hidden; }
  .portfolio-overlay .caption {
    position: absolute;
    bottom: 100px;
    left: 0;
    padding: 0 30px;
    text-align: left;
    transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    opacity: 0; }

.portfolio-item a:hover .portfolio-overlay .caption {
  bottom: 10%;
  opacity: 1; }

.portfolio-item a h5 {
  margin-bottom: 0;
  font-weight: 800;
  color: #fff; }

.portfolio-wide div {
  margin-bottom: 10px; }

/* Pricing */
.panel {
  transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease; }

.pricing .number {
  font-size: 60px; }
.pricing .panel-heading {
  border: 0;
  background-color: #eee; }
  .pricing .panel-heading h4 {
    margin-bottom: 0; }

.panel-default {
  border-color: transparent; }

.pricing sup, .pricing sub {
  font-weight: 600;
  color: #999; }
.pricing sup {
  font-size: 16px;
  top: -33px; }
.pricing sub {
  font-size: 10px;
  top: 0; }

.bg-dark .panel, .bg-dark .panel-body, .bg-dark .list-group-item {
  background-color: rgba(0, 0, 0, 0.1); }
.bg-dark .pricing .panel-heading {
  border: 0;
  background-color: #000;
  color: #ccc; }

section.bg-dark .fa, section.bg-dark2 .fa {
  color: #ccc; }

.bg-dark .list-group-item, .bg-dark2 .list-group-item {
  border: 1px solid #222; }

.pricing .panel-heading {
  border: 0; }
.pricing .btn {
  display: block; }
.pricing .list-group-item, .pricing .panel-heading {
  padding: 17px 10px; }

/* Miscellaneous */
.nav-tabs {
  margin-bottom: 30px; }

/* Pager */
.pager li > a, .pager li > span {
  padding: 30px 0;
  border: 0; }
.pager li > a:focus, .pager li > a:hover {
  text-decoration: none;
  background-color: transparent; }

.pagination > li > a, .pagination > li > span {
  padding: 8px;
  margin-left: 8px;
  border-radius: 50%;
  color: #000;
  width: 40px;
  height: 40px;
  background: #eee;
  border-color: #fff; }
.pagination > .active > a {
  background-color: #333;
  border-color: #333; }
  .pagination > .active > a:focus, .pagination > .active > a:hover {
    background-color: #333;
    border-color: #333; }
.pagination > .active > span {
  background-color: #333;
  border-color: #333; }
  .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: #333;
    border-color: #333; }
.pagination > li:first-child > a, .pagination > li:first-child > span {
  border-radius: 50% !important; }
.pagination > li:last-child > a, .pagination > li:last-child > span {
  border-radius: 50% !important; }

/* Bars and charts */
#animate img {
  padding-bottom: 180px; }

.progress-default .progress {
  background-color: #ddd;
  margin-bottom: 15px;
  height: 25px; }
.progress-default .progress-bar {
  background-color: #333;
  padding: 3px 0; }

.progress-bar {
  text-align: left;
  text-indent: 20px; }

.progress-thin .progress {
  height: 2px;
  overflow: visible;
  margin-bottom: 35px; }
.progress-thin .progress-bar {
  color: #333;
  text-indent: 0;
  padding: 0; }

.bg-dark .progress-default .progress {
  background-color: #888; }
.bg-dark .progress-default .progress-bar {
  background-color: #555; }
.bg-dark .progress-thin .progress-bar {
  color: #ccc; }

.circle {
  position: relative;
  display: inline-block;
  margin: 0 20px;
  vertical-align: top;
  text-align: center;
  width: 100px;
  padding-top: 38px; }
  .circle span {
    font-family: "Roboto Mono", sans-serif;
    letter-spacing: -1px; }
  .circle canvas {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 6px; }
  .circle span:after {
    content: '%';
    margin-left: 0.1em; }

.agenda {
  padding-top: 45px; }

.progress-bar {
  -webkit-transition: width 2.50s ease !important;
  -moz-transition: width 2.50s ease !important;
  transition: width 2.50s ease !important; }

/* Shop */
.shop-nav {
  width: 250px;
  overflow: hidden;
  padding: 10px 18px 0;
  display: block; }

.shop-item {
  position: relative; }

.shop-item img {
  border: 1px solid #eee; }

nav .shop-cart {
  width: 100%;
  font-size: 11px;
  line-height: 14px;
  overflow: hidden; }

li .shop-cart {
  border-bottom: 1px solid #ccc;
  margin-bottom: 15px;
  padding-bottom: 15px; }
  li .shop-cart a:hover {
    background-color: transparent !important; }

.shop-cart img {
  width: 70px;
  padding-right: 10px;
  float: left; }

.shop-nav {
  color: #333; }
  .shop-nav a {
    color: #333; }
  .shop-nav .btn-dark-border {
    margin-bottom: 8px; }
  .shop-nav .fa {
    margin: 0 0 15px 5px; }

.add-cart {
  position: absolute;
  bottom: 8px;
  left: 20px;
  z-index: 1;
  font-weight: 800; }

.add-cart:before {
  font-family: 'fontawesome';
  content: "\f290";
  padding-right: 10px;
  font-size: 20px;
  opacity: 0.5; }

.badge.price {
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  position: absolute;
  top: -20px;
  right: -10px;
  width: 70px;
  height: 70px;
  text-align: center;
  z-index: 1;
  padding-top: 25px;
  border-radius: 50% !important;
  opacity: 0.7; }
  .badge.price.sale {
    top: 30px;
    background-color: #789;
    color: #fff;
    text-transform: uppercase; }
  .badge.price.trend {
    top: 30px;
    background-color: #c00;
    color: #fff;
    text-transform: uppercase; }
  .badge.price.new {
    top: 30px;
    background-color: #ff4081;
    color: #fff;
    text-transform: uppercase; }

.sorting {
  border: 0;
  margin: -9px 0px;
  background: transparent; }
  .sorting > option {
    font-size: 14px; }

.table.shop-cart {
  margin-bottom: 60px; }
  .table.shop-cart > tbody > tr > td, .table.shop-cart > tbody > tr > th {
    padding: 11px;
    vertical-align: middle;
    border-top: 1px solid #ddd; }
  .table.shop-cart > tfoot > tr > td, .table.shop-cart > tfoot > tr > th {
    padding: 11px;
    vertical-align: middle;
    border-top: 1px solid #ddd; }
  .table.shop-cart > thead > tr > td, .table.shop-cart > thead > tr > th {
    padding: 11px;
    vertical-align: middle;
    border-top: 1px solid #ddd; }
  .table.shop-cart h3, .table.shop-cart h4, .table.shop-cart h5 {
    padding: 0;
    margin: 0; }

@media (max-width: 768px) {
  .table.shop-cart > tbody > tr > td, .table.shop-cart > tbody > tr > th {
    padding: 5px; }
  .table.shop-cart > tfoot > tr > td, .table.shop-cart > tfoot > tr > th {
    padding: 5px; }
  .table.shop-cart > thead > tr > td, .table.shop-cart > thead > tr > th {
    padding: 5px; } }
/* Media Queries */
@media (max-width: 768px) {
  body {
    letter-spacing: 0; }

  .h4, h4 {
    font-size: 16px; }

  .h2, h2 {
    font-size: 24px; }

  .h3, h3 {
    font-size: 20px; }

  .intro h1 {
    font-size: 48px;
    line-height: 48px; }
    .intro h1.classic {
      font-size: 60px;
      line-height: 60px;
      margin: 50px 0 50px; }
    .intro h1.classic2 {
      font-size: 65px;
      line-height: 65px;
      margin: 50px 0 50px; }

  section, .section {
    padding-top: 80px;
    padding-bottom: 80px; }

  .section-small {
    padding-top: 60px;
    padding-bottom: 60px; }

  .portfolio-sorting li a {
    margin: 0;
    letter-spacing: 0; }

  .shop-item img {
    width: 100%; } }
@media (max-width: 991px) {
  .action {
    text-align: center; }
    .action .btn {
      float: none;
      margin-top: 30px;
      text-align: center; }
    .action .text-right {
      text-align: center; }

  .footer .text-right {
    text-align: left; }
  .footer .footer-menu {
    padding-bottom: 20px; }

  section {
    background-attachment: fixed !important;
    background-position: 50% 50% !important; }

  .search-button {
    margin-top: 5px; }

  .dropdown-menu .search-button .fa {
    opacity: 1 !important; }

  .nav li a {
    -webkit-transition: all .0s ease-in-out !important;
    -moz-transition: all .0s ease-in-out !important;
    transition: all .0s ease-in-out !important; } }
@media (max-width: 1200px) {
  #about, #about2, #about-slider, #action-slider, #action-slider2, #action-slider3 {
    text-align: center; }

  #carousel-light, #carousel-light2, #carousel-light3, #carousel-light4, #carousel-dark, #carousel-transparent {
    margin: 45px 0; } }
@media (max-width: 480px) {
  .intro h1 {
    font-size: 30px;
    line-height: 40px; } }
/* Magic background */
.magic, .magic2 {
  position: absolute;
  width: 100%;
  z-index: 0;
  top: 0;
  left: 0; }

/* Footer */
.footer {
  color: #444;
  font-size: 14px; }
  .footer .footer-menu a {
    line-height: 24px; }
  .footer .counter {
    line-height: 44px; }
  .footer h4, .footer h5, .footer h6 {
    font-weight: 800;
    opacity: 0.7; }
  .footer a {
    text-decoration: none;
    opacity: 1; }
    .footer a:hover {
      text-decoration: none; }

.footer-small {
  padding-top: 50px;
  padding-bottom: 50px;
  position: relative;
  z-index: 999; }

@media (max-width: 767px) {
  .footer {
    text-align: center; }
    .footer .text-right {
      text-align: center !important; } }
/* Stop animation on mobile devices */
@media (max-width: 800px) {
  .wow {
    animation-name: none !important;
    visibility: visible !important; } }
/* Demo page */
.intro.demo-header h1 {
  font-size: 90px; }
.intro.demo-header h2 {
  font-size: 24px; }

@media (max-width: 768px) {
  .intro.demo-header h1 {
    font-size: 42px; } }
.demo .container-fluid {
  padding-right: 40px;
  padding-left: 40px; }
.demo img {
  margin: 15px 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
.demo h6 {
  font-weight: 500px !important; }
.demo .badge.new {
  background-color: #ff4081;
  color: #fff;
  font-size: 9px;
  position: absolute;
  top: 26px;
  right: 20px;
  margin: -24px -14px;
  line-height: 1;
  letter-spacing: 1px;
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  text-align: center;
  padding-top: 17px;
  z-index: 1; }

.intro.demo-header .intro-body:before {
  background: rgba(25, 25, 35, 0.7); }

.scroll-background {
  -webkit-animation: scroll-background 2000s linear infinite;
  animation: scroll-background 2000s linear infinite;
  background-repeat: repeat-x !important;
  margin-top: 58px;
  top: 0 !important; }

@-webkit-keyframes scroll-background {
  from {
    background-position: 0 0; }
  to {
    background-position: -40000px 0; } }
@keyframes scroll-background {
  from {
    background-position: 0 0; }
  to {
    background-position: -40000px 0; } }

/*# sourceMappingURL=universal.css.map */


/* === SupplyConsulting header tweaks === */
.navbar-brand .brand-logo {
  /* Make logo clearly visible (2x vs default max-height: 28px) */
  /* Requested: increase the top-left logo by ~20–30% */
  height: 72px;
  max-height: 72px !important;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

/* Shrink behavior in collapsed (scrolled) navbar (desktop) */
.navbar-custom.top-nav-collapse .navbar-brand{
  /* reduce vertical footprint when scrolling so sections fit */
  padding: 8px 5px 7px 15px;
}
.navbar-custom.top-nav-collapse .navbar-brand .brand-logo{
  height: 44px;
  max-height: 44px !important;
  margin-right: 8px;
}

@media (min-width: 768px){
  .navbar-custom.top-nav-collapse .navbar-nav > li > a{
    padding-top: 14px;
    padding-bottom: 10px;
  }
}

.navbar-brand .brand-name {
  display: inline-block;
  vertical-align: middle;
  /* Match the nav/header items style */
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  margin-left: 6px;
  color: inherit;
  opacity: 0.95;
}
@media (max-width: 767px){
  /* keep header uncluttered on mobile */
  .navbar-brand .brand-name{ display:none; }
}
.navbar-onepage .nav-lang {
  padding-left: 12px;
}
.navbar-onepage .lang-switch {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar-onepage .lang-btn {
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.25);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.navbar-onepage .lang-btn.is-active {
  background: rgba(0,0,0,0.38);
  border-color: rgba(255,255,255,0.85);
}
@media (max-width: 991px) {
  .navbar-onepage .nav-lang { padding-left: 0; }
  .navbar-onepage .lang-switch { padding-left: 15px; }
}

/* =====================================================
   Supply Consulting: header language switch alignment
   (keep ENG/ARM vertically aligned with nav labels)
   ===================================================== */

@media (min-width: 768px){
  .navbar.navbar-onepage .navbar-nav > li.nav-lang{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
  }
  .navbar.navbar-onepage .navbar-nav > li.nav-lang .lang-switch{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
  }
  .navbar.navbar-onepage .navbar-nav > li.nav-lang .lang-btn{
    line-height: 1 !important;
  }
}


/* Hero logo (replaces flower icon) */
/* Requested: make the first-page hero logo 20% smaller */
.hero .hero-logo{height:110px;width:auto;max-width:70vw;display:block;margin:0 auto;}
@media (max-width: 480px){.hero .hero-logo{height:110px;}}

/* ======================================================
   SUPPLYCONSULTING.AM minimalistic template overrides
   (logo sizing, language toggle visibility, hero background)
   ====================================================== */

/* Top-left brand: larger logo + single brand text */
.navbar-custom .navbar-brand .logo,
.navbar-custom .navbar-brand .logodark {
  max-height: 73px; /* 2x from the template default */
}
.navbar-custom.top-nav-collapse .navbar-brand .logodark {
  max-height: 57px;
}
.navbar-custom .navbar-brand .brand-text {
  display: inline-block;
  margin-left: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1;
}

/* EN/ARM toggle: always readable on both transparent and white nav states */
.nav-lang{ padding: 10px 10px; }
.lang-switch { display: inline-flex; gap: 8px; align-items: center; }
.lang-btn {
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.65);
  padding: 7px 10px;
  border-radius: 999px;
  line-height: 1;
}
.lang-btn.is-active {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.9);
}
.navbar-custom.top-nav-collapse .lang-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.25);
}
.navbar-custom.top-nav-collapse .lang-btn.is-active {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.45);
}

/* ======================================================
   SUPPLYCONSULTING.AM PRO redesign
   - Executive white canvas
   - Collage limited to HERO only
   - Always-white navigation
   ====================================================== */

/* Base canvas: keep everything calm + readable */
body{
  /* Pure white canvas (matches logo strip) */
  background: linear-gradient(180deg, #f5f8fb 0%, #eef2f6 50%, #f7f9fb 100%);
    background-image: linear-gradient(180deg, rgba(245,248,251,0) 0%, rgba(247,249,251,0) 100%), repeating-linear-gradient(0deg, rgba(0,0,0,0.015) 0px, rgba(0,0,0,0.015) 1px, transparent 1px, transparent 60px);
  /*background-image*/: none !important;
}

/* NAV: always white (no "template" dark-on-image gamble) */
.navbar-custom{
  background: linear-gradient(180deg, #f5f8fb 0%, #eef2f6 50%, #f7f9fb 100%);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.navbar-custom a,
.navbar-custom .navbar-brand,
.navbar-custom .navbar-brand .brand-text{
  color: rgba(0,0,0,0.88) !important;
}

/* Brand (logo + text): keep perfectly centered on one line */
.navbar-custom .navbar-brand{
  display: flex;
  align-items: center;
  gap: 10px;
}
.navbar-custom .navbar-brand .brand-logo{ display:block; }
.navbar-custom .navbar-brand .brand-name{
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Mobile hamburger */
.navbar-custom .navbar-brand .navbar-toggle{ color: rgba(0,0,0,0.78) !important; }
.navbar-custom .icon-bar{ background-color: rgba(0,0,0,0.55) !important; }

/* Mobile dropdown background */
@media (max-width: 991px){
  .navbar-custom .navbar-collapse{
    background: linear-gradient(180deg, #f5f8fb 0%, #eef2f6 50%, #f7f9fb 100%);
    border-top: 1px solid rgba(0,0,0,0.08);
  }
}

/* Logo: tiny shadow so gold stays crisp on white */
.navbar-custom .navbar-brand .brand-logo{
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.12));
}

/* Link behavior: subtle underline instead of loud colors */
.navbar-custom .nav li a{ position: relative; }
.navbar-custom .nav li a:hover{ color: rgba(0,0,0,0.98) !important; }
.navbar-custom .nav li.active a{ color: rgba(0,0,0,0.98) !important; }
.navbar-custom .nav li.active a:after{
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 10px;
  height: 2px;
  background: var(--sc-accent);
  border-radius: 2px;
}

/* Language toggle: designed for white nav */
.lang-btn{
  color: rgba(0,0,0,0.84) !important;
  background: rgba(0,0,0,0.03) !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
}
.lang-btn.is-active{
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.32) !important;
}

/* HERO: collage lives ONLY here */
header.solid-color.intro{
  position: relative;
  /*background-image*/:
    linear-gradient(rgba(20,20,20,0.72), rgba(20,20,20,0.72)),
    url("../img/bg/cage_collage.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* Disable the old overlay that assumed the collage was on <body> */
header.solid-color.intro:before{ background: transparent !important; }

/* Sections: clean white, quiet dividers */
#industry.bg-white,
section.bg-white{
  background: #ffffff !important;
  color: rgba(0,0,0,0.90);
}

/* SERVICES + SIGNATURE cards: executive "panel" look */
.siglike-grid{ gap: 22px; }

.siglike-card{
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  transition: transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s cubic-bezier(.22,.61,.36,1);
  transform-origin: center center;
}
.siglike-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
}

/* Hover zoom (smooth + premium) — ONLY for Supply Chain + Industrial Assets blocks */
#services .siglike-grid,
#industrial .siglike-grid{
  overflow: visible;
}
#services .siglike-card,
#industrial .siglike-card{
  will-change: transform;
}

/* Subtle tint overlay to help hovered card stand out (presentation pointer highlight) */
#services .siglike-card::after,
#industrial .siglike-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(198,153,76,0.12); /* ~20% stronger highlight */
  opacity: 0;
  transition: opacity .26s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
#services .siglike-card:hover,
#industrial .siglike-card:hover{
  /* Hover: gentle zoom (matches previous approved feel) */
  transform: scale(1.15);
  border-color: rgba(198,153,76,0.65);
  box-shadow: 0 22px 60px rgba(0,0,0,0.16), 0 0 0 3px rgba(198,153,76,0.18);
  z-index: 8;
}
#services .siglike-card:hover::after,
#industrial .siglike-card:hover::after{
  opacity: 1;
}

.siglike-media{
  width: 100%;
  overflow: hidden;
  background: transparent;
}
.siglike-media img{
  display: block;
  width: 100%;
  height: 165px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  filter: saturate(0.95) contrast(1.02);
}

.siglike-title{
  padding: 14px 16px 0;
  margin: 0;
  color: rgba(0,0,0,0.92);
}

.siglike-desc{
  padding: 0 16px 10px;
  color: rgba(0,0,0,0.70);
  opacity: 1;
}

/* Headings: give section titles a "white capsule" for clarity */
.siglike-head .section-title{
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  background: linear-gradient(180deg, #f5f8fb 0%, #eef2f6 50%, #f7f9fb 100%);
}

/* Read more link: now dark-on-white */
.siglike-readmore{
  display: inline-block;
  margin-top: 4px;

  color: rgba(0,0,0,0.72) !important;
  text-decoration: underline;
}
.siglike-readmore:hover,
.siglike-readmore:focus{
  color: rgba(0,0,0,0.92) !important;
}


/* Hero center logo: reduce size by ~30% and keep responsive */
header.solid-color.intro .hero-logo {
  /* Zoom-out request: make hero content ~20% smaller */
  height: 184px;
  width: auto;
  max-width: 60vw;
  display: inline-block;
}
@media (max-width: 480px){
  header.solid-color.intro .hero-logo { height: 144px; }
}

/* Rotating hero text: ~40% smaller + better width/spacing */
header.solid-color.intro h1 {
  font-size: clamp(21px, 2.3vw, 29px);
  line-height: 1.25;
  letter-spacing: 0.06em;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px;
}
@media (max-width: 480px){
  header.solid-color.intro h1 { font-size: 20px; line-height: 1.22; letter-spacing: 0.05em; }
}

/* Keep the hero logo fully inside the rounded rectangle */
header.solid-color.intro .hero-logo-link{display:inline-block; margin-top:0;}

/* HERO (index): keep the logo fully inside the rounded rectangle */
header.solid-color.intro .hero-logo-link{ margin-top: 0; }
header.solid-color.intro .hero-logo,
header.solid-color.intro .hero-tagline{ top: 0; }
header.solid-color.intro .hero-tagline{
  max-width: 980px;
  margin: 10px auto 18px;
  padding: 0 16px;
  /* Slightly smaller + cleaner (no "carved" script/rotation) */
  /* -3pt (approx) per request */
  font-size: clamp(12px, 1.25vw, 18px);
  line-height: 1.28;
  color: rgba(28,28,28,0.92);
}
@media (max-width: 480px){
  header.solid-color.intro .hero-tagline{ font-size: 14px; line-height: 1.2; margin: 8px auto 14px; }
}

/* Hero: slightly tighter vertical rhythm to match the smaller content */
header.solid-color.intro .intro-body{
  padding: 120px 0 40px;
}

/* Make the hero tagline straight (no Caveat script + no rotation) and italic */
header.solid-color.intro .hero-tagline.classic,
header.solid-color.intro .hero-tagline.classic2{
  font-family: inherit !important;
  transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  text-transform: none !important;
  opacity: 0.95 !important;
  font-style: italic;
}

/* Quote section: use the same fixed collage background (carried by body) */
.sc-collage-bg{
  background: transparent;
  position: relative;
}
.sc-collage-bg .overlay{
  z-index: 0;
  background: rgba(60, 60, 60, 0.69);
}
.sc-collage-bg .container{ position: relative; z-index: 1; }



/* === SupplyConsulting navbar alignment overrides === */
@media (min-width: 768px) {
  .navbar.navbar-onepage { min-height: 72px; }
  .navbar.navbar-onepage .container {
    display: flex;
    align-items: center;
  }
  .navbar.navbar-onepage .navbar-header {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .navbar.navbar-onepage .navbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 0;
    height: 72px;
    line-height: 1;
  }
  .navbar.navbar-onepage .navbar-brand .brand-logo {
    height: 56px;
    width: auto;
    display: block;
  }
  .navbar.navbar-onepage .navbar-brand .brand-text {
    display: inline-block;
    margin-left: 12px;
    line-height: 1;
  }

  .navbar.navbar-onepage .navbar-collapse {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
  }
  .navbar.navbar-onepage .navbar-nav {
    display: flex;
    align-items: center;
    margin: 0;
  }
  .navbar.navbar-onepage .navbar-nav > li > a {
    display: flex;
    align-items: center;
    height: 72px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
  }
  .navbar.navbar-onepage .navbar-nav > li.nav-lang {
    display: flex;
    align-items: center;
  }
  .navbar.navbar-onepage .navbar-nav > li.nav-lang > .lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
  }
  .navbar.navbar-onepage .navbar-nav > li.nav-lang .lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
  }
}

/* === SupplyConsulting logo: remove any shadows/filters === */
.navbar-brand .brand-logo,
header.solid-color.intro .hero-logo {
  -webkit-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}


/* === Supply Consulting: About (WHO WE ARE) team photo rotator === */
#carousel-light2.about-carousel{ 
  margin-top: 64px !important; /* align with paragraph start */
}
#carousel-light2.about-carousel .carousel-inner{
  height: 320px;
}
#carousel-light2.about-carousel .item{
  height: 320px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#carousel-light2.about-carousel .item img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transform: scale(1.0); /* +25% vs previous */
  transform-origin: center center;
  object-fit: contain;
}

/* Keep sizing consistent on smaller screens */
@media (max-width: 991px){
  #carousel-light2.about-carousel{ margin-top: 28px !important; }
  #carousel-light2.about-carousel .carousel-inner{ height: 260px; }
  #carousel-light2.about-carousel .item{ height: 260px; }
}


/* === SupplyConsulting: keep navbar layout consistent on scroll (prevent deformation) === */
.navbar-custom.top-nav-collapse .navbar-brand{
  font-size: 32px !important;
  padding: 0 !important;
  height: 72px !important;
  line-height: 1 !important;
}
.navbar-custom.top-nav-collapse .navbar-brand .logo,
.navbar-custom.top-nav-collapse .navbar-brand .brand-logo{
  max-height: 56px !important;
  height: 56px !important;
}
@media (min-width: 1200px){
  .navbar-custom.top-nav-collapse .container{
    width: auto !important;
    max-width: 1170px !important;
  }
}

/* Make language buttons readable on white navbar */
.navbar-custom.top-nav-collapse .lang-btn{
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.28) !important;
  color: #000 !important;
}
.navbar-custom.top-nav-collapse .lang-btn.is-active{
  background: rgba(0,0,0,0.10) !important;
  border-color: rgba(0,0,0,0.55) !important;
  color: #000 !important;
}


/* --- Supply Consulting fixes: navbar ABOUT US + team rotator --- */
@media (min-width: 768px){
  .navbar .navbar-nav > li > a{ white-space: nowrap; }
}

/* Team rotator: show exactly one image at a time, no blank, uniform sizing */
.sc-team-rotator{
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-top: 0;
  /* align with paragraph start: handled by layout below, but keep stable */
}
.sc-team-photo{
  opacity: 0;
  transition: opacity 200ms ease;
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  /* Make images bigger by ~15% vs current: */
  transform: scale(1.25);
  transform-origin: center;
}
.sc-team-photo.is-active{
  opacity: 1;
}
.sc-team-photo:not(.is-active){
  pointer-events: none;
}
/* keep container height to avoid jump */
.sc-team-rotator::before{
  content: "";
  display: block;
  padding-top: 70%;
}


/* --- Supply Consulting: WHO WE ARE layout fix (text left, photos right) --- */
#about .row{ align-items: flex-start; }
#about .sc-team-rotator-wrap, #about .sc-team-rotator{ margin-top: 0; }
#about .sc-team-rotator{ max-width: 560px; }


/* --- Supply Consulting: underline header/nav text --- */
.navbar .navbar-nav > li > a,
.navbar .navbar-brand{
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}


/* --- Supply Consulting: align WHO WE ARE images with first text line --- */
@media (min-width: 992px){
  #about .sc-team-rotator-wrap,
  #about .sc-team-rotator{
    margin-top: 42px;
  }
}


/* --- Supply Consulting: hero ticker marquee + underline --- */
.sc-rotator{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  font-weight: 400; /* keep it normal, not bold */
}

/* Rotator (non-marquee): show one point for 2.5s, hide for 1s */
.sc-rotator .sc-rotator-item{
  display: inline-block;
  transition: opacity 300ms ease;
  opacity: 1;
}
.sc-rotator.is-fading .sc-rotator-item{ opacity: 0; }


/* Hero quote rotator fade */
.intro .hero-quote{ transition: opacity 300ms ease; opacity: 1; }
.intro .hero-quote.is-fading{ opacity: 0; }

/* --- Supply Consulting: hero quote (moved into the first slide) --- */
.intro .hero-quote{
  margin-top: 18px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: rgba(28,28,28,0.92);
}
.intro .hero-quote-icon{ margin: 0 0 10px; opacity: 0.95;  color: rgba(28,28,28,0.92); }
.intro .hero-quote-text{
  margin: 0;
  /* Match the hero tagline size after the -3pt adjustment */
  font-size: clamp(12px, 1.25vw, 18px);
  line-height: 1.6;
  color: rgba(28,28,28,0.90);
}
.intro .hero-quote-author{
  margin-top: 14px;
  font-size: 22px;
  color: rgba(28,28,28,0.95);
}

@media (max-width: 768px){
  .intro .hero-quote{ max-width: 92%; }
  .intro .hero-quote-text{ font-size: 14px; }
  .intro .hero-quote-author{ font-size: 18px; }
}



/* === Custom: SERVICES section uses the same site-wide collage background (no separate header image) === */
#services.bg-img4{
  /*background-image*/: none !important;
  background: transparent !important;
}
/* Match the hero's grey overlay tone inside Services */
#services .overlay{
  background: rgba(60,60,60,0.69) !important;
}
/* === Custom: Services section fit-to-viewport (1 screen) === */
#services{
  position: relative;
  min-height: 100vh;
  height: auto !important;
  padding-top: 70px !important;
  padding-bottom: 70px !important;
  overflow: visible !important;
}
#services .container{
  height: auto !important;
  display: block !important;
}

/* Intro block: use horizontal space so full copy fits without clipping */
#services .services-intro{ margin-bottom: 12px; }
#services .services-intro .col-lg-8{
  width: 100% !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1280px;
}
#services .services-intro h3{
  margin-top: 0;
  margin-bottom: 10px;
}
#services .services-intro .services-intro-text{
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 0;
  /* show full text (no clamp), but keep it compact via columns on desktop */
  overflow: visible;
}
#services .services-intro .services-intro-par{
  display: block;
  margin: 0 0 10px;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}
#services .services-intro .services-intro-par:last-child{ margin-bottom: 0; }

@media (min-width: 992px){
  #services .services-intro .services-intro-text{
    column-count: 2;
    column-gap: 44px;
  }
}

/* Grid: true centered 2x3 with bigger readable type */
#services .services-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin-left: -12px;
  margin-right: -12px;
}
#services .services-grid .service-card{
  float: none !important;
  flex: 0 0 calc(33.333% - 24px);
  max-width: calc(33.333% - 24px);
  margin: 0 12px 18px;
}
#services .services-grid .service-card .icon-big{
  font-size: 52px;
  line-height: 52px;
}
#services .services-grid .service-card h4{
  font-size: 14px;
  line-height: 1.35;
  margin-top: 10px;
  margin-bottom: 8px;
}
#services .services-grid .service-card p{
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive fallbacks */
@media (max-width: 992px){
  #services{ height: auto; min-height: 100vh; overflow: visible; }
  #services .container{ height: auto; }
  #services .services-grid .service-card{
    flex: 0 0 calc(50% - 24px);
    max-width: calc(50% - 24px);
  }
  #services .services-intro .col-lg-8{ max-width: 100%; }
  #services .services-intro .services-intro-text{ column-count: 1; }
}
@media (max-width: 600px){
  #services .services-grid .service-card{
    flex: 0 0 calc(100% - 24px);
    max-width: calc(100% - 24px);
  }
  #services .services-intro .services-intro-text{ column-count: 1; }
}

#services .services-grid .clearfix{ display: none !important; }



/* === Supply Consulting: Industry Experience logo row === */
.industry-logos-row{ margin-top: 18px; }
.industry-logos{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.7cm;
}

/* Make the logos row background match the logos' white boxes (prevents "dirty edge" look) */
#industry .industry-logos{
  background: linear-gradient(180deg, #f5f8fb 0%, #eef2f6 50%, #f7f9fb 100%);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.05);
}

.industry-logo-item{
  flex: 0 0 auto;
  height: 2cm;
  display: flex;
  align-items: center;
  justify-content: center;
}

.industry-logo-item img{
  height: 2cm;
  max-height: 2.3cm;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 992px){
  .industry-logos{ flex-wrap: wrap; gap: 0.5cm; }
}

/* About: single-strip experience logos (keeps exact relative sizing) */
#about .industry-logos.sc-about-exp-logos{
  flex-wrap: nowrap;
  gap: 0;
}
#about .industry-logos.sc-about-exp-logos .experience-strip-img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 2.3cm;
  object-fit: contain;
}
@media (max-width: 768px){
  #about .industry-logos.sc-about-exp-logos .experience-strip-img{ max-height: 1.73cm; }
}
/* ===========================
   One-screen "slide" sections
   SERVICES (new) + SIGNATURE
   =========================== */
#services, #news{
  scroll-margin-top: 90px; /* accounts for fixed navbar */
}

dpx 0 44px;
}

.siglike-section .container{
  width: 100%;
  max-width: 1360px;
}

/* === Wider layout for long-copy paired slides (Supply Chain + Industrial Assets Parts 1/2)
   Keep images un-stretched: images already use object-fit; we only widen text container.
=== */
@media (min-width: 1200px){
  #services.siglike-section .container,
  #industrial-part1.siglike-section .container,
  #industrial-part2.siglike-section .container{
    max-width: 1630px; /* +20% vs 1360px */
  }
}



.siglike-head{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  margin-bottom: 14px;
}

.siglike-head .section-title{
  margin: 0 0 8px;
  letter-spacing: 2px;
}

.siglike-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.siglike-card{
  text-align: center;
}

.siglike-media img{
  width: 100%;
  height: 196px; /* +20% zoom */
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.siglike-title{
  margin: 10px 0 6px;
  font-size: 17px; /* +20% */
  line-height: 1.25;
  letter-spacing: 1px;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.siglike-desc{
  margin: 0;
  font-size: 17px; /* +20% */
  line-height: 1.32;
  opacity: 0.95;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.siglike-card--compact .siglike-media img{ height: 196px; /* match SERVICES so sections feel same size */ }
.siglike-card--compact .siglike-desc{ display:none; }

@media (max-width: 991px){
  .siglike-section{
    min-height: auto; /* allow natural flow on small screens */
    padding: 60px 0;
  }
  .siglike-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px){
  .siglike-grid{ grid-template-columns: 1fr; }
  .siglike-media img{ height: 250px; /* keep the +20% zoom feel on mobile */ }
}

/* Override old news grid spacing so it fits one viewport cleanly */
#news div[class*="col-"], .grid-pad div[class*="col-"]{
  margin-bottom: 0 !important;
}

/* Hero: move logo + tagline up to create more space before ticker */
header.solid-color .hero-logo,
header.solid-color .hero-tagline{
  position: relative;
  top: -20px; /* ~2cm */
}
header.solid-color .hero-tagline{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 14px;
}

/* Industry: tighten spacing now that the icon row is removed */
#industry .industry-logos-row{ margin-top: 26px; }



/* === SupplyConsulting v25 tweaks === */
/* Quote author: straight + italic (no Caveat rotation) */
.hero-quote-author{
  font-family: "Raleway", sans-serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
  transform: none !important;
  opacity: 0.95;
  margin: 10px 0 0;
  line-height: 1.25;
}

/* Contact: keep casing as typed (no ALL CAPS) */
.sc-contact-address,
.sc-contact-email,
.sc-contact-linkedin,
.sc-contact-phone{
  text-transform: none !important;
}


/* Contact slide: reduce bottom padding to remove excess empty space */
#contact.sc-page{
  padding-bottom: 28px !important;
}
/* Contact: tighten vertical spacing between rows */
.sc-contact-address,
.sc-contact-email,
.sc-contact-linkedin,
.sc-contact-phone{
  /* a bit of breathing room, but still compact */
  margin: 18px 0 0;
  line-height: 1.3;
  /* keep icon + text perfectly aligned across all rows */
  display: flex;
  align-items: center;
  gap: 12px;
}
.sc-contact-address{ margin-top: 0; }

/* Contact: make icon column perfectly consistent (LinkedIn was visually larger) */
.sc-contact-address > i,
.sc-contact-email > i,
.sc-contact-linkedin > i,
.sc-contact-phone > i{
  flex: 0 0 26px;
  width: 26px;
  text-align: center;
  /* Override FontAwesome size helpers (fa-lg) to keep all icons uniform */
  font-size: 18px !important;
  line-height: 1;
}

/* Fix numeric baseline ("9" sitting low) in address: force lining numerals when supported */
.sc-contact-address{
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Contact phone: +1 size step */
.sc-contact-phone{
  /* keep same text size as other rows */
  font-size: 1em;
}
.sc-contact-phone .sc-phone-text{ display: inline-flex; align-items: center; position: relative; top: -1px; }
.sc-contact-phone .sc-phone-plus{ display: inline-block; position: relative; top: -1px; margin-right: 2px; }
.sc-contact-phone .sc-phone-rest{ font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* Contact: LinkedIn link should match surrounding typography */
.sc-contact-linkedin a{
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  text-decoration: none;
}
.sc-contact-linkedin a:hover{
  text-decoration: underline;
}

/* Team title: keep consistent in Armenian (avoid mixed fallback fonts) */
body.lang-hy .sc-team-title{
  font-family: "Raleway", sans-serif !important;
  font-style: italic;
  transform: none !important;
  opacity: 0.95;
  letter-spacing: 0.06em;
  text-transform: none !important;
}


/* ======================================================
   EXECUTE updates (v33) — 2026-02-02
   ====================================================== */

/* 1) HERO (index slide): use the same fixed collage background + content card */
header.solid-color.intro{
  position: relative;
  /*background-image*/:
    linear-gradient(rgba(60,60,60,0.83), rgba(60,60,60,0.83)),
    url("../img/bg/cage_collage.jpg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
header.solid-color.intro:before{ background: transparent !important; }

/* HERO card (logo + text + quotes) */
header.solid-color.intro .sc-hero-card{
  background: linear-gradient(180deg, #f5f8fb 0%, #eef2f6 50%, #f7f9fb 100%);
  border-radius: 16px;
  /* Make the card taller so the logo stays fully inside */
  padding: 104px 26px 50px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
  max-width: 1360px;
}
@media (max-width: 768px){
  header.solid-color.intro .sc-hero-card{
    padding: 64px 18px 40px;
    border-radius: 14px;
  }
}

/* Remove the earlier negative vertical shift so the logo doesn't pop out of the card */
header.solid-color.intro .hero-logo,
header.solid-color.intro .hero-tagline{
  top: 0 !important;
}

/* 2) Collage + tint ONLY on: About, Industry Experience, Contacts */
.sc-collage-section{
  position: relative;
  /*background-image*/:
    linear-gradient(rgba(60,60,60,0.83), rgba(60,60,60,0.83)),
    url("../img/bg/cage_collage.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.sc-collage-section > .container{
  background: linear-gradient(180deg, #f5f8fb 0%, #eef2f6 50%, #f7f9fb 100%);
  border-radius: 16px;
  padding: 34px 26px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
}

/* SERVICES: visually center the cards inside the foreground rectangle */
/* (slightly more top padding + less bottom-heavy feel) */
#services.sc-collage-section > .container{
  padding-top: 52px;
  padding-bottom: 52px;
}
@media (max-width: 768px){
  .sc-collage-section > .container{
    padding: 26px 18px;
    border-radius: 14px;
  }



/* === Apple-like staged reveal (Supply Chain Advisory only) === */
#services.sc-seq-init > .container{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms cubic-bezier(0.22,1,0.36,1),
              transform 520ms cubic-bezier(0.22,1,0.36,1);
}
#services.sc-seq-init .sc-slide-title{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 360ms cubic-bezier(0.22,1,0.36,1),
              transform 460ms cubic-bezier(0.22,1,0.36,1);
}
#services.sc-seq-init .sc-optA-card{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms cubic-bezier(0.22,1,0.36,1),
              transform 520ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform, opacity;
}
#services.sc-seq-rect > .container{
  opacity: 1;
  transform: none;
}
#services.sc-seq-title .sc-slide-title{
  opacity: 1;
  transform: none;
}
#services.sc-seq-blocks .sc-optA-card{
  opacity: 1;
  transform: none;
}


}

/* 3) Language switch: ENG / ARM (plain text, no pills/boxes) */
.navbar-onepage .lang-switch,
.lang-switch{ gap: 10px; }

.navbar-onepage .lang-btn,
.lang-btn{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 6px !important;
  color: inherit !important;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.82;
}
.navbar-onepage .lang-btn.is-active,
.lang-btn.is-active{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
/* Flags: render as emoji (no extra image assets needed) */
.lang-flag{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 1.15em;
  height: 1em;
  margin-right: 6px;
  line-height: 1;
  font-size: 0.95em;
}
.lang-flag-en::before{ content: "🇬🇧"; }
.lang-flag-hy::before{ content: "🇦🇲"; }

/* ======================================================
   vFINAL-2 — Centering + stable background
   - Center slide content (2–5)
   - Replace per-section fixed backgrounds with a single
     stable fixed layer (no scroll jitter)
   - Lighten background by +15%
   ====================================================== */

/* 1) Stable fixed collage background layer */
.sc-fixed-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /*background-image*/:
    linear-gradient(rgba(60,60,60,0.70), rgba(60,60,60,0.70)),
    url("../img/bg/cage_collage.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

/* Ensure the fixed background layer is actually visible */
html, body{ background: transparent !important; }

/* Disable any per-section background images so nothing shifts on scroll */
header.solid-color.intro,
.sc-collage-section{
  background: transparent !important;
  /*background-image*/: none !important;
  background-attachment: scroll !important;
}

/* 2) Center slide content inside the foreground card */
#about.sc-collage-section,
#industry.sc-collage-section{
  min-height: 100vh;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* SERVICES + SIGNATURE are already flex; ensure centered */
#services.siglike-section,
#news.siglike-section{
  min-height: 100vh;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Keep comfortable breathing room on small screens */
@media (max-width: 991px){
  #about.sc-collage-section,
  #industry.sc-collage-section,
  #services.siglike-section,
  #news.siglike-section{
    min-height: auto;
    display: block;
  }
}

/* 4) Remove circles/rectangles/pills around section titles */
.siglike-head .section-title{
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* 5) SERVICES + WHAT YOU WILL GET: no truncation, equal bigger cards, and zoom-out by 15% */
#services.siglike-section,
#news.siglike-section{
  padding: 38px 0 32px; /* slightly tighter to fit one viewport */
}

#services .siglike-grid,
#news .siglike-grid{
  gap: 22px;
}

/* Scale media/text down ~15% */
#services .siglike-media img,
#news .siglike-media img{
  height: 154px !important;
}

#services .siglike-title,
#news .siglike-title{
  font-size: 14.5px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.25 !important;
}

#services .siglike-desc{
  font-size: 14.5px !important;
  line-height: 1.38 !important;
  opacity: 0.92 !important;
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* Make all 6 service cards the same size, but not overly tall */
/* (fixes the "zoomed" look + ensures the 2nd row can be reached) */
#services.siglike-section{ align-items: center; }
#services .siglike-card{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 270px;
}

/* Center card text vertically within each panel (below the image) */
.siglike-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding-bottom: 12px;
}

/* Re-apply comfortable padding inside cards */
#services .siglike-title{
  padding: 10px 16px 0 !important;
  margin: 0 !important;
  text-align: center !important;
}
#services .siglike-desc{
  padding: 6px 16px 8px !important;
  margin: 0 !important;
  text-align: center !important;
}

/* (Removed) SERVICES should grow naturally; no internal scroll clamp */
/* Keep the compact cards in the 30–45 days section consistent with the zoom-out */
#news .siglike-card--compact .siglike-media img{ height: 133px !important; }
#news .siglike-title{ padding: 10px 14px 12px !important; }

/* 6) Contact: add logo under phone number with consistent spacing */

.sc-contact-heading{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px; /* spacing before paragraph */
}
.sc-contact-logo--heading{
  margin: 0;
}
.sc-contact-logo-wrap{
  margin-top: 12px; /* similar spacing as between contact lines */
}
.sc-contact-logo{
  display: block;
  /* Requested: 40% smaller, then another 20% smaller (0.6 * 0.8 = 0.48) */
  max-width: 74px;
  height: auto;
}


/* 7) Index slide: pull quotes up slightly (after removing the banner line) */
.intro .hero-quote{ margin-top: 6px !important; }


/* 8) About: add logo under Read more (same sizing as contact logo) */
.sc-about-logo-wrap{ margin-top: 12px; }


/* Hero logo spacing + responsive sizing */
.sc-hero-card > p:first-child{margin:0 0 18px;text-align:center;}
@media (max-width: 768px){
  .hero-logo{height:90px;}
}

/* Final: make the 30–45 days cards ~20% smaller (tighter grid + smaller type) */
#news .siglike-grid{ gap: 18px !important; }
#news .siglike-title{ font-size: 12px !important; letter-spacing: 0.07em !important; }

/* ======================================================
   vFINAL — Centering + stable collage background
   ====================================================== */

/* ======================================================
   vFINAL_v3 — Contact section alignment + form sizing
   ====================================================== */

/* Contact: combined heading (CONTACT US AND REQUEST FOR A QUOTE.) */
#contact .sc-contact-heading--full{
  margin-bottom: 4px;
}
#contact .sc-contact-heading--full h3{
  margin: 0 !important;
}

#contact .sc-contact-main{ margin-top: -4px; }
/* Ensure both columns start aligned under the combined heading */
#contact .sc-contact-main .sc-quickfill{ margin-top: 2px; }
#contact .sc-contact-main .sc-quickfill--right{ margin-top: 2px; }

/* 2) Make the form controls slightly smaller (~20%) so the heading sits comfortably above */
#contact #contactForm .form-control.input-lg{
  height: 38px;
  padding: 8px 14px;
  font-size: 15px;
}
#contact #contactForm textarea.form-control.input-lg{
  height: auto;
  min-height: 92px;
  padding: 10px 14px;
}
#contact #contactForm .control-group{
  margin-bottom: 10px;
}

/* 1) A single stable fixed background layer (no parallax / no jitter)
   - Lighten by additional ~15%: overlay alpha 0.56 (was 0.66)
*/
.sc-fixed-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /*background-image*/:
    linear-gradient(rgba(60,60,60,0.70), rgba(60,60,60,0.70)),
    url("../img/bg/cage_collage.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Ensure the browser keeps this layer stable during scroll */
  transform: translateZ(0);
  will-change: transform;
}

/* Remove per-section background painting to avoid scroll repaint artifacts */
header.solid-color.intro,
.sc-collage-section{
  background: transparent !important;
  /*background-image*/: none !important;
  background-attachment: scroll !important;
}

/* 2) Center the foreground card on slides 2–5 (About, Services, Industry, Signature) */
#about.sc-collage-section,
#industry.sc-collage-section{
  min-height: 100vh;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Services + Signature already use .siglike-section flex; ensure true centering */
#services.siglike-section,
#news.siglike-section{
  align-items: center !important;
}

/* Keep enough top/bottom breathing room so content reads centered, not cramped */
#about.sc-collage-section,
#industry.sc-collage-section,
#services.siglike-section,
#news.siglike-section{
  padding-top: 54px;
  padding-bottom: 54px;
}

/* Center containers horizontally (belt & suspenders for custom widths) */
#about.sc-collage-section > .container,
#industry.sc-collage-section > .container,
#services.sc-collage-section > .container,
#news.sc-collage-section > .container{
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: allow natural flow (fixed backgrounds are poor on some mobiles) */
@media (max-width: 991px){
  .sc-fixed-bg{ background-attachment: scroll; }
  #about.sc-collage-section,
  #industry.sc-collage-section{ min-height: auto; display: block; }
}



/* =========================================================
   Mobile & iPhone polish (iPhone 16/17 class devices)
   Goal: same "executive" look, responsive layout, no jitter
   ========================================================= */

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

/* Make images behave on small screens */
img{
  max-width: 100%;
  height: auto;
}

/* Touch devices: disable hover lift to avoid accidental jank */
@media (hover: none){
  .siglike-card:hover{
    transform: none !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.06) !important;
  }
}

/* Responsive grids: 3 → 2 → 1 columns */
@media (max-width: 991px){
  .siglike-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  .siglike-media img{
    height: 170px !important;
  }
}

@media (max-width: 640px){
  .siglike-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .siglike-media img{
    height: 160px !important;
  }
  .siglike-title{
    font-size: 16px !important;
    letter-spacing: 0.08em !important;
  }
  .siglike-desc{
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

/* Foreground (big rounded rectangle) spacing on phones */
@media (max-width: 640px){
  .siglike-section .container{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .siglike-head .section-title{
    font-size: 18px !important;
    padding: 9px 14px !important;
  }
}

/* iOS/Safari scroll stability:
   Keep the collage background visually stable; avoid repaint blur. */
.sc-fixed-bg{
  will-change: transform;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* On small screens, reduce visual noise for readability */
@media (max-width: 640px){
  .sc-fixed-bg{
    background-position: center top !important;
  }
}

/* Prevent any accidental horizontal scrolling caused by wide cards */
.siglike-card, .siglike-media, .siglike-body{
  min-width: 0;
}



/* =========================================================
   Header/Nav height fix + shrink-on-scroll polish
   - Reduce the tall white bar
   - Make the sticky header compact on scroll (top-nav-collapse)
   ========================================================= */

/* Base (top of page): slightly slimmer than template default */
.navbar-custom{
  min-height: 66px;
}

.navbar-custom .navbar-brand{
  font-size: 26px;
  padding: 12px 5px 10px 15px;
  line-height: 1;
}

.navbar-custom .navbar-brand .logo{
  max-height: 26px;
}

.nav > li > a{
  padding: 16px 12px 12px;
}

/* Smooth transition so it feels premium */
.navbar-custom,
.navbar-custom .navbar-brand,
.navbar-custom .navbar-brand .logo,
.navbar-custom .nav li a{
  transition: all .28s ease;
}

/* Collapsed (scrolled): compact header */
.navbar-custom.top-nav-collapse{
  min-height: 54px;
}

.navbar-custom.top-nav-collapse .navbar-brand{
  font-size: 20px;
  padding: 8px 5px 8px 15px;
}

.navbar-custom.top-nav-collapse .navbar-brand .logo{
  max-height: 22px;
}

.navbar-custom.top-nav-collapse .nav > li > a{
  padding-top: 12px;
  padding-bottom: 10px;
}

/* Language switch: keep aligned when header shrinks */
.navbar-onepage .nav-lang{
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Mobile tweaks: keep hamburger + brand tidy */
@media (max-width: 767px){
  .navbar-custom{
    min-height: 62px;
  }
  .navbar-custom .navbar-brand{
    font-size: 20px;
    padding: 10px 5px 10px 12px;
  }
  .nav > li > a{
    padding: 12px 14px;
  }
  .navbar-custom.top-nav-collapse{
    min-height: 54px;
  }
}

/* =========================================================
   SupplyConsulting "navbar-onepage" overrides
   The build has a flex-aligned header block that hard-sets heights (72px).
   Those rules have higher specificity than .navbar-custom, so the header
   wasn't shrinking even when the JS added .top-nav-collapse.
   These rules override that height system (base + collapsed).
   ========================================================= */

@media (min-width: 768px) {
  /* Base (top of page): slimmer */
  .navbar.navbar-onepage {
    min-height: 64px !important;
  }
  .navbar.navbar-onepage .navbar-brand {
    height: 64px !important;
  }
  .navbar.navbar-onepage .navbar-brand .brand-logo {
    height: 46px !important;
  }
  .navbar.navbar-onepage .navbar-nav > li > a {
    height: 64px !important;
  }

  /* Collapsed (scrolled): compact */
  .navbar.navbar-onepage.top-nav-collapse {
    min-height: 52px !important;
  }
  .navbar.navbar-onepage.top-nav-collapse .navbar-brand {
    height: 52px !important;
  }
  .navbar.navbar-onepage.top-nav-collapse .navbar-brand .brand-logo {
    height: 38px !important;
  }
  .navbar.navbar-onepage.top-nav-collapse .navbar-nav > li > a {
    height: 52px !important;
  }

  /* Smooth transition */
  .navbar.navbar-onepage,
  .navbar.navbar-onepage .navbar-brand,
  .navbar.navbar-onepage .navbar-brand .brand-logo,
  .navbar.navbar-onepage .navbar-nav > li > a {
    transition: height .25s ease, min-height .25s ease;
  }
}

/* Mobile: keep the white bar compact too */
@media (max-width: 767px) {
  .navbar.navbar-onepage {
    min-height: 60px !important;
  }
  .navbar.navbar-onepage .navbar-brand {
    height: 60px !important;
  }
  .navbar.navbar-onepage .navbar-brand .brand-logo {
    height: 42px !important;
  }
  .navbar.navbar-onepage.top-nav-collapse {
    min-height: 52px !important;
  }
  .navbar.navbar-onepage.top-nav-collapse .navbar-brand {
    height: 52px !important;
  }
  .navbar.navbar-onepage.top-nav-collapse .navbar-brand .brand-logo {
    height: 36px !important;
  }
}


/* ================================
   SUPPLY: Header white panel height fix (v2)
   - Reduce the white header bar height (less empty space)
   - Make header logo 2x bigger
   - Keep logo/menu/lang vertically centered
   - Preserve Bootstrap 3 collapse behavior on mobile
   ================================ */

.navbar.navbar-custom.navbar-fixed-top,
.navbar.navbar-custom {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important; /* override Bootstrap default min-height */
}

/* Base (all viewports): reduce vertical padding so the white bar is slimmer */
.navbar-custom .navbar-brand {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 20px !important; /* left aligned but not hugging the edge */
  height: auto !important;
}

/* Header logo: 2x bigger */
.navbar-custom .navbar-brand .logo,
.navbar-custom .navbar-brand .brand-logo {
  max-height: 44px !important;
  width: auto !important;
}

/* Nav links: reduce vertical padding (Bootstrap default is 15px) */
.navbar-custom .nav > li > a,
.navbar-custom .navbar-nav > li > a {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: 18px !important;
}

/* Tighten collapse (after scroll) as well */
.navbar-custom.top-nav-collapse .navbar-brand {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.navbar-custom.top-nav-collapse .navbar-brand .logo,
.navbar-custom.top-nav-collapse .navbar-brand .brand-logo {
  max-height: 40px !important;
}

.navbar-custom.top-nav-collapse .nav > li > a,
.navbar-custom.top-nav-collapse .navbar-nav > li > a {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Desktop/tablet: true vertical centering without breaking mobile collapse */
@media (min-width: 768px) {
  .navbar-custom .container {
    display: flex !important;
    align-items: center !important;
  }

  .navbar-custom .navbar-header {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  .navbar-custom .navbar-collapse {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;
  }

  .navbar-custom .navbar-nav {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
}



/* Desktop header height tune (make white bar ~15% slimmer) */
@media (min-width: 768px){
  .navbar-custom .navbar-brand{
    padding: 14px 5px 10px 15px !important;
  }
  .navbar-custom .nav > li > a{
    padding-top: 18px !important;
    padding-bottom: 13px !important;
  }
  /* Align language toggle with nav items */
  .navbar-custom .navbar-nav > li.nav-lang{
    padding-top: 18px !important;
    padding-bottom: 13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    display: flex !important;
    align-items: center !important;
  }
}


/* =========================================================
   EXECUTE 2026-02-09 — Consistent foreground spacing + title number alignment
   - Match internal padding to the WHO WE ARE slide
   - Remove Services bottom-heavy feel
   - Fix 30-45 baseline alignment in section title
   ========================================================= */

#about.sc-collage-section > .container,
#services.sc-collage-section > .container,
#industry.sc-collage-section > .container,
#news.sc-collage-section > .container,
#contact.sc-collage-section > .container{
  padding: 34px 26px !important;
}

@media (max-width: 768px){
  #about.sc-collage-section > .container,
  #services.sc-collage-section > .container,
  #industry.sc-collage-section > .container,
  #news.sc-collage-section > .container,
  #contact.sc-collage-section > .container{
    padding: 26px 18px !important;
  }
}

/* Titles: keep top spacing consistent across slides */
#about.sc-collage-section h3,
#industry.sc-collage-section h3,
#contact.sc-collage-section h3,
#services.sc-collage-section .section-title,
#news.sc-collage-section .section-title{
  margin-top: 0 !important;
}

/* Remove any extra bottom margins that create "dead space" inside the card */
#services.sc-collage-section .siglike-grid,
#news.sc-collage-section .siglike-grid{
  margin-bottom: 0 !important;
}

/* Fix: numerals in the section title sit slightly low in this font */
.section-title:not(.sc-slide-title) .sc-num{
  display: inline-block;
  position: relative;
  top: -0.06em;
  letter-spacing: inherit;
}

/* =========================================================
   FIX — Stabilize Services foreground card when browser zoom changes
   Problem: legacy "fit-to-viewport" rules forced #services + its .container
   to be 100vh/100% height, which makes the rounded rectangle stretch and
   creates huge blank space when users zoom out.
   Solution: override legacy fixed heights for the new siglike layout.
   ========================================================= */

#services.siglike-section{
  height: auto !important;
  min-height: 100vh;          /* still fills a viewport when content is short */
  overflow: visible !important;
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}

/* The foreground card (rounded rectangle) must size to content */
#services.siglike-section > .container,
#services.siglike-section .container{
  height: auto !important;
  display: block !important;
}

/* --- Industrial expansion blocks (Option A) --- */
.sc-small-note{ margin: 8px 0 0; font-size: 13px; opacity: .85; }
.sc-small-link{ margin: 8px 0 0; font-size: 13px; }
.sc-small-link a{ text-decoration: underline; }
.sc-do-not{ margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.12); }
.sc-do-not-title{ margin: 0 0 6px; font-size: 14px; letter-spacing: .02em; }
.sc-do-not-text{ margin: 0; font-size: 13px; opacity: .9; }

/* =========================================================
   2026-02-12 — Center all foreground rectangles (slides)
   - Ensure the white rounded "card" sits centered vertically + horizontally
   - Keep a bit of collage background visible on all 4 sides
   ========================================================= */

/* Services/Signature layout had a missing base rule in some builds.
   Force siglike sections to behave as true centered slides. */
.siglike-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Important: do NOT constrain the section width.
     Supply Chain + Industrial slides use a wider inner .container; if the
     section itself has a smaller max-width, the inner content can overflow
     and look "off-center". Let the container control the readable width. */
  width: 100%;
  max-width: none;
  margin: 0;
}

/* All "slide" sections: keep breathing room so background is visible */
.sc-page.sc-collage-section{
  /* Scroll mode: center content within the usable viewport area
     (viewport height minus the fixed navbar). */
  min-height: calc(100vh - var(--sc-nav-h, 96px));
  padding-top: 70px !important;
  padding-bottom: 70px !important;
  /* Ensure anchor jumps land below the fixed navbar */
  scroll-margin-top: calc(var(--sc-nav-h, 96px) + 18px);
}

.sc-page.sc-collage-section > .container{
  width: 92vw;
  max-width: 1240px;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 768px){
  .sc-page.sc-collage-section{
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .sc-page.sc-collage-section > .container{
    width: 96vw;
  }
}



/* === Industrial sections: match typography with main SERVICES and SIGNATURE === */
#industrial .siglike-media img{
  height: 154px !important;
}
#industrial .siglike-title{
  font-size: 14.5px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.25 !important;
}
#industrial .siglike-desc{
  font-size: 14.5px !important;
  line-height: 1.38 !important;
  opacity: 0.92 !important;
}

/* Clamp only the text span so the Read more link is never hidden by the clamp */
#industrial .siglike-desc-text{
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Expandable descriptions */
#industrial .siglike-card.is-expanded .siglike-desc-text{
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}
#industrial .siglike-readmore{margin:0 !important;display:inline !important;padding:0 !important;}

/* Industrial diagnostic: align with main "WHAT YOU WILL GET" (Signature) sizing */
#industrial-diagnostic .siglike-card--compact .siglike-media img{ height: 133px !important; }
#industrial-diagnostic .siglike-title{ padding: 10px 14px 12px !important; font-size: 12px !important; letter-spacing: 0.07em !important; }
#industrial-diagnostic .siglike-grid{ gap: 18px !important; }

/* Standalone "What we do not do" slide spacing */
.sc-do-not--standalone{
  max-width: 980px;
  margin: 24px auto 0;
  background: linear-gradient(180deg, #f5f8fb 0%, #eef2f6 50%, #f7f9fb 100%);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 22px 22px 18px;
}
.sc-do-not--standalone .sc-do-not-title{ margin-top: 0; }


/* === v4 tweaks: hero "what we do not do" inline + prevent image stretching under zoom === */
header.solid-color .hero-tagline.sc-hero-secondary{
  margin-top: 14px; /* ~one row gap after main tagline */
}

/* Ensure industrial images never stretch (object-fit can be lost under some zoom/layout edge cases) */
#industrial .siglike-media img,
#industrial-diagnostic .siglike-media img{
  width: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}


/* --- Fix: keep industrial images proportional (no stretching) --- */
#industrial .siglike-media img,
#industrial-diagnostic .siglike-media img{
  width: 100% !important;
  height: 196px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}


.siglike-card--compact .siglike-body{
  justify-content: center;
  padding-bottom: 16px;
}

.siglike-title, .siglike-desc{ text-align: center; }

.sc-do-label{ font-weight: 700; color: #0a7a2a; }
.sc-dont-label{ font-weight: 700; color: #b00020; }


/* Shared heading row (logo + title) */
.sc-section-heading{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.sc-section-heading h3{margin:0;}

/* === Slide titles: logo + 20% smaller === */
.sc-slide-title{
  /* IMPORTANT: inline-flex lets the whole "logo + title" behave like one centered group */
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  /* consistent vertical footprint so columns (Contact vs Quote) align */
  min-height: var(--sc-title-logo-size);
  margin: 0 !important;
  gap: 0 !important; /* spacing controlled by the logo margin */
  /* ~20% smaller vs default h3 (24px) on desktop */
  font-size: 21px;
  line-height: 1.15;
}
@media (max-width: 768px){
  .sc-slide-title{ font-size: 18px; } /* ~20% smaller vs mobile h3 (20px) */
}

/* Slide title logo sizing: match the "GOOD ONE" reference */
:root{
  --sc-title-logo-size: 40px; /* default */
}
@media (min-width: 768px){
  :root{ --sc-title-logo-size: 38px; } /* desktop */
}
@media (max-width: 767px){
  :root{ --sc-title-logo-size: 36px; } /* mobile */
}

.sc-title-logo-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
}
.sc-title-logo-link:focus,
.sc-title-logo-link:hover{
  text-decoration: none !important;
}

.sc-title-logo{
  height: var(--sc-title-logo-size) !important;
  max-height: var(--sc-title-logo-size) !important;
  width: auto;
  flex: 0 0 auto;
  display: block; /* kills baseline weirdness */
  margin: 0 calc(var(--sc-title-logo-size) / 2) 0 0 !important; /* half-logo-size spacing */
}

/* Gold underline bar under full visible title text */
:root{ --sc-accent: #5B6DF6; }

.sc-slide-title,
.sc-request-title{
  position: relative;
  padding-bottom: 8px; /* space for bar (reduced 50%) */
}

/*
  FIX: On the siglike (Supply Chain / Industrial Assets) slides the gold bar
  looked visually stuck to the title because .sc-slide-title is inline-flex with
  a fixed min-height (logo size) and centered alignment.

  So instead of adding padding (which doesn’t create visible separation),
  we move the underline itself slightly LOWER for these specific sections.
*/
#services .sc-slide-title::after,
#industrial-part1 .sc-slide-title::after,
#industrial-part2 .sc-slide-title::after{
  bottom: -8px;
}

.sc-slide-title::after,
.sc-request-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: var(--sc-accent);
  border-radius: 3px;
}



/* Brand: keep logo vertically centered with the text (header) */
.navbar-custom .navbar-brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.navbar-custom .navbar-brand .brand-name{
  line-height: 1;
  display: inline-block;
}

/* Titles: keep numeric ranges aligned with the surrounding text */
.section-title{
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-feature-settings: "lnum" 1, "tnum" 1;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

#industrial.sc-collage-section > .container,
#industrial-diagnostic.sc-collage-section > .container{max-width:1120px;}



/* --- QC update: make #news panel match "good size" panels --- */
#news.sc-collage-section > .container{ max-width:1120px; }

/* --- QC update: hero rotating quote readability --- */
.hero-quote-text{
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hero-quote-author{
  color: rgba(191,160,74,0.95); /* subtle bronze */
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* --- FIX: center title text inside compact tiles (Supply Chain + Industrial) --- */
#news .siglike-card--compact .siglike-body,
#industrial-diagnostic .siglike-card--compact .siglike-body{
  display: flex;
  align-items: center !important;     /* vertical center */
  justify-content: center !important; /* horizontal center */
  padding: 16px 16px !important;
  min-height: 88px;
  box-sizing: border-box;
}

#news .siglike-card--compact .siglike-title,
#industrial-diagnostic .siglike-card--compact .siglike-title{
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1.25;
}


/* --- WHO WE ARE: logo next to title (restore layout) --- */
#about .sc-about-heading{
  display:flex;
  align-items:center;
  gap:14px;
}
#about .sc-about-logo{
  max-width:96px;
  height:auto;
  flex:0 0 auto;
  display:block;
}
@media (max-width: 768px){
  #about .sc-about-logo{ max-width:72px; }
}



/* =========================
   STAGE 1 REMOVAL (per user)
   Remove title logos + title underlines on slides
   ========================= */
.sc-slide-title,
.sc-request-title{
  /* Titles should occupy the full row so the gold bar aligns consistently (match Contact) */
  display: block !important;
  width: 100% !important;
  align-items: initial !important;
  justify-content: initial !important;
  min-height: 0 !important;
}

.sc-slide-title [data-lang],
.sc-request-title [data-lang]{
  text-decoration: none !important;
}



/* =========================================================
   Slide-style navigation (no scrolling between sections)
   ========================================================= */
html.sc-slide-mode,
body.sc-slide-mode{
  height: 100%;
  overflow: hidden;
}

body.sc-slide-mode{
  position: relative;
}

body.sc-slide-mode .sc-page{
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  /* Make each section feel like a centered "page" under the fixed navbar */
  box-sizing: border-box;
  padding-top: 96px;   /* navbar clearance */
  padding-bottom: 96px;
}

body.sc-slide-mode .sc-page.sc-active{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* On shorter screens, prefer top-aligned content (prevents cropping) */
@media (max-height: 820px){
  body.sc-slide-mode .sc-page.sc-active{
    justify-content: center;
  }
}

/* Center the foreground card/containers horizontally */
body.sc-slide-mode .sc-page.sc-active > .container{
  margin-left: auto;
  margin-right: auto;
  width: min(1360px, calc(100% - 140px));
  transform: scale(0.85);
  transform-origin: center center;
}


/* Home slide: still a "page" — centered and clear of the fixed navbar */
body.sc-slide-mode #home.sc-page{
  padding-top: 96px;
  padding-bottom: 96px;
}
body.sc-slide-mode #home.sc-page.sc-active{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
/* Override legacy intro table-cell layout so the hero card truly centers */
body.sc-slide-mode #home .intro-body{
  display: flex !important;
  flex: 1 1 auto;
  width: 100%;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
}
body.sc-slide-mode #home .sc-hero-card{
  width: min(1360px, calc(100% - 140px));
  transform: scale(0.85);
  transform-origin: center center;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
@media (max-width: 768px){
  body.sc-slide-mode #home .sc-hero-card{
    width: calc(100% - 32px);
  }
}

/* =========================================================
   EXECUTE 2026-02-12 — Center the foreground "rectangle" on ALL slides
   Goal: background visible on all 4 sides + consistent centering.
   ========================================================= */

/* Ensure the Services/Signature layout is actually flex-centered.
   (Some legacy rules set padding but didn't set display:flex.) */
.siglike-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Give every slide a consistent outer margin so background shows around the card */
body.sc-slide-mode .sc-page.sc-active > .container,
body.sc-slide-mode #home .sc-hero-card{
  width: min(1360px, calc(100% - 120px));
}

@media (max-width: 768px){
  body.sc-slide-mode .sc-page.sc-active > .container,
  body.sc-slide-mode #home .sc-hero-card{
    width: calc(100% - 32px);
  }
}

/* =========================================================
   EXECUTE: Make header background match the site background
   (same as the slide background used from slide 2 onward)
   ========================================================= */
.navbar-custom,
.navbar-custom.top-nav-collapse{
  background-color:#F5F5F3 !important;
  /*background-image*/: radial-gradient(circle, var(--sc-dot-color) var(--sc-dot-radius), transparent var(--sc-dot-radius)) !important;
  background-size: var(--sc-dot-size) var(--sc-dot-size) !important;
  background-position: 0 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.10) !important;
}
.navbar-custom a{
  color: #4a4a4a !important;
}


/* Contact: full-width divider between services and details/form */
.sc-contact-divider{
  border: 0;
  border-top: 1px solid var(--sc-accent);
  margin: 18px 0 16px;
}
@media (max-width: 991px){
  .sc-contact-divider{ margin: 14px 0 14px; }
}

/* Contact: quick-fill service links */
.sc-quickfill{ margin: 10px 0 14px; }
.sc-quickfill-lead{
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.95;
}
.sc-quickfill-groups{ display: grid; gap: 14px; }
.sc-quickfill-group-title{
  font-size: 12px;
  letter-spacing: 1.4px;
  font-weight: 800;
  opacity: 0.85;
  margin: 0 0 6px;
}
.sc-quickfill-list{ list-style: none; padding: 0; margin: 0; }
.sc-quickfill-list li{ margin: 0; padding: 0; }

.sc-quickfill-link{
  display: block;
  padding: 7px 0;
  color: var(--sc-accent);
  font-style: italic;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.25;
}
.sc-quickfill-link:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sc-quickfill-link:focus{ outline: none; text-decoration: underline; }

.sc-quickfill--right{ margin-top: 12px; }
.sc-quote-form{ margin-top: 18px; }

/* Contact slide: align left contact details with the first input on the right
   (optical alignment requested: contact details start at same level as "Your Name") */
@media (min-width: 992px){
  #contact .sc-contact-address{ margin-top: 58px; }
}


#contact hr{ margin: 14px 0 12px; }

/* ======================================================
   OPTION E — Steel Blue Solid Background (site-wide)
   Replaces picturesque collage background with a clean, professional color.
   ====================================================== */
:root{
  --sc-bg-steel: #3A5672;
}

/* Global page background */
html, body{
  background: var(--sc-bg-steel) !important;
}

/* HERO background (remove collage) */
header.solid-color.intro{
  /*background-image*/: none !important;
  background-color: var(--sc-bg-steel) !important;
}

/* Any collage sections (About/Services/Industry/Contacts) -> solid steel blue */
.sc-collage-section{
  /*background-image*/: none !important;
  background-color: var(--sc-bg-steel) !important;
}


/* ===============================
   SUPPLY_OPTION_A_option11_dotgrid_v2 BACKGROUND THEME
   =============================== */

/* Page background: warm off-white + subtle dot grid */
body{
  background-color:#fcfbf8 !important;
  /*background-image*/: radial-gradient(circle, #e6e8ed 1.5px, transparent 1.5px) !important;
  background-size: 30px 30px !important;
  background-position: 0 0 !important;
  background-attachment: fixed !important;
}

/* Remove collage backgrounds so the page texture is consistent */
.sc-collage-section,
.sc-collage-bg{
  /*background-image*/: none !important;
  background: transparent !important;
  background-attachment: scroll !important;
}
.sc-collage-bg .overlay{ display:none !important; }



/* === OPTION11_TRIAL_1 (revised)
   Page background = LIGHT steel navy (matches earlier options),
   Panels + service cards = dot grid
   === */
:root{ --sc-bg-navy: #586F87; } /* 15% lighter vs #3A5672 */
html, body{ background: var(--sc-bg-navy) !important; }
body{ background: var(--sc-bg-navy) !important; /*background-image*/: none !important; }
header.solid-color.intro{ /*background-image*/:none !important; background-color: var(--sc-bg-navy) !important; }
.sc-collage-section{ /*background-image*/:none !important; background-color: var(--sc-bg-navy) !important; }

/* Foreground panels (rectangles) get the dot grid texture */
body.sc-slide-mode .sc-page.sc-active > .container,
.sc-collage-section > .container{
  background-color:#D6D5D3 !important;
  /*background-image*/: radial-gradient(circle, #C4C5C9 1.5px, transparent 1.5px) !important;
  background-size: 30px 30px !important;
  background-position: 0 0 !important;
  background-attachment: local !important;
}

/* Apply the same dot grid texture INSIDE the Supply Chain + Industrial service cards
   (user request: the boxes themselves should match the panel texture) */
#services .sc-optA-card,
#industrial-part1 .sc-optA-card,
#industrial-part2 .sc-optA-card,
#industrial-part3 .sc-optA-card{
  /* Light bluish–purplish tint + quieter dot grid (better readability for small text) */
  background-color: rgba(205, 212, 235, 0.55) !important;
  /*background-image*/:
    linear-gradient(135deg,
      rgba(170, 205, 255, 0.34),
      rgba(200, 175, 255, 0.30)
    ),
    radial-gradient(circle, rgba(54, 120, 255, 0.14) 1.2px, transparent 1.2px) !important;
  background-size: 100% 100%, 36px 36px !important; /* fewer dots */
  background-position: 0 0, 0 0 !important;
  background-attachment: local !important;
}

/* Make sure any inner “white” surfaces don’t fight the texture */
#services .sc-optA-media,
#industrial-part1 .sc-optA-media,
#industrial-part2 .sc-optA-media,
#industrial-part3 .sc-optA-media{
  /* Softer inner surface so text reads cleanly without looking like a white patch */
  background: rgba(255,255,255,0.52) !important;
}

/* === END OPTION11_TRIAL_1 */

/* === OPTION11_TRIAL_1_RECTANGLES_RESTORE
   User request: background blue stays, but the foreground 'rectangles' must visually return.
   We keep the dot-grid theme, but we restore the rectangle feel via radius + shadow + padding
   on the slide containers used in slide mode.
   === */
body.sc-slide-mode .sc-page.sc-active > .container{
  border-radius: 16px !important;
  padding: 34px 26px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.12) !important;
  overflow: hidden !important;
}

/* Slightly boost separation on white strips inside the main rectangle */
.sc-collage-section > .container,
body.sc-slide-mode .sc-page.sc-active > .container{
  outline: 1px solid rgba(255,255,255,0.20) !important;
}

/* === END OPTION11_TRIAL_1_RECTANGLES_RESTORE */ 




/* === OPTION11 RECTANGLES = HERO WHITE + DOTS (user request 2026-02-17)
   - Keep all rectangles/panels the same base color as the HERO card (#ffffff)
   - Apply the Option 11 subtle dot grid texture to ALL rectangles:
     slide containers + service/what-you-get cards + siglike cards
   ============================================================ */

:root{
  /* User request: bring back dot quantity and increase by ~10% (denser grid) */
  --sc-dot-size: 26px;
  --sc-dot-radius: 1.5px;
  --sc-dot-color: rgba(145, 167, 195, 0.36); /* pale stone-blue dot */
}

/* Main slide rectangles (About/Services/Industry/News/Contact containers) */
.sc-collage-section > .container{
  background-color:#ffffff !important;
  /*background-image*/: radial-gradient(circle, var(--sc-dot-color) var(--sc-dot-radius), transparent var(--sc-dot-radius)) !important;
  background-size: var(--sc-dot-size) var(--sc-dot-size) !important;
  background-position: 0 0 !important;
  background-attachment: local !important;
}


/* Hero slide rectangle (user request: match slide rectangles from slide 2) */
header.solid-color.intro .sc-hero-card{
  background-color:#ffffff !important;
  /*background-image*/: radial-gradient(circle, var(--sc-dot-color) var(--sc-dot-radius), transparent var(--sc-dot-radius)) !important;
  background-size: var(--sc-dot-size) var(--sc-dot-size) !important;
  background-position: 0 0 !important;
  background-attachment: local !important;
}


/* Services + Signature cards (siglike cards) */
.siglike-card{
  background-color:#ffffff !important;
  /*background-image*/: radial-gradient(circle, var(--sc-dot-color) var(--sc-dot-radius), transparent var(--sc-dot-radius)) !important;
  background-size: var(--sc-dot-size) var(--sc-dot-size) !important;
  background-position: 0 0 !important;
}

/* Supply Chain + Industrial Assets paired cards: apply dots to the whole card */
#services .sc-optA-card,
#industrial-part1 .sc-optA-card,
#industrial-part2 .sc-optA-card,
#industrial-part3 .sc-optA-card{
  background-color:#ffffff !important;
  /*background-image*/: radial-gradient(circle, var(--sc-dot-color) var(--sc-dot-radius), transparent var(--sc-dot-radius)) !important;
  background-size: var(--sc-dot-size) var(--sc-dot-size) !important;
  background-position: 0 0 !important;
  background-attachment: local !important;
}

/* Ensure inner surfaces do not "overwrite" the dot background */
#services .sc-optA-left,
#services .sc-optA-right,
#services .sc-optA-main,
#services .sc-optA-bullets,
#industrial-part1 .sc-optA-left,
#industrial-part1 .sc-optA-right,
#industrial-part1 .sc-optA-main,
#industrial-part1 .sc-optA-bullets,
#industrial-part2 .sc-optA-left,
#industrial-part2 .sc-optA-right,
#industrial-part2 .sc-optA-main,
#industrial-part2 .sc-optA-bullets,
#industrial-part3 .sc-optA-left,
#industrial-part3 .sc-optA-right,
#industrial-part3 .sc-optA-main,
#industrial-part3 .sc-optA-bullets{
  background: transparent !important;
}

/* Media area: keep image readable without adding a solid block */
#services .sc-optA-media,
#industrial-part1 .sc-optA-media,
#industrial-part2 .sc-optA-media,
#industrial-part3 .sc-optA-media{
  background: rgba(255,255,255,0.18) !important;
}


/* =========================================================
   EXECUTE 2026-02-17 — Contact slide: remove dead space
   - tighten gap under title line
   - tighten gap around divider
   - align contact info + form higher
   ========================================================= */

#contact .sc-contact-top{ margin-top: -10px; }

/* Tighten service lists block */
#contact .sc-quickfill{ margin: 2px 0 8px; }
#contact .sc-quickfill--right{ margin-top: 2px; }
#contact .sc-quickfill-link{ padding: 5px 0; line-height: 1.2; }

/* Font bump requested: Contact service list text +2 */
#contact .sc-quickfill-group-title{ font-size: 14px !important; }
#contact .sc-quickfill-link{ font-size: 15px !important; }
#contact .sc-quickfill-lead{ font-size: 17px !important; }

/* Divider: keep it as a clean separator, not a spacer */
#contact hr.sc-contact-divider{
  margin: 10px 0 10px !important;
  border-top-color: var(--sc-accent);
}

/* Pull the bottom row up slightly */
#contact .sc-contact-bottom{ margin-top: -6px; }

/* Remove the big desktop offset that created a large empty band */
@media (min-width: 992px){
  #contact .sc-contact-address{ margin-top: 8px !important; }
  #contact .sc-quote-form{ margin-top: 8px !important; }
}

/* =========================================================
   EXECUTE 2026-02-17 — Zoom out all slides by 15% (non slide-mode)
   Applies when the page is used in normal one-page scroll mode.
   ========================================================= */
@media (min-width: 992px){
  body:not(.sc-slide-mode) .sc-collage-section.sc-page > .container,
  body:not(.sc-slide-mode) #home .sc-hero-card{
    transform: scale(0.85) !important;
    transform-origin: center top !important;
  }
}


/* =========================================================
   EXECUTE 2026-02-17 — Hero quotes cloud (balanced, random 2–3)
   - Logo stays centered
   - Quotes are evenly distributed around it
   - Quotes fade using existing .hero-quote transitions
   ========================================================= */

#home .sc-hero-card{ position: relative; }

#home .sc-hero-cloud{
  position: relative;
  min-height: 720px;
}

#home .sc-hero-logo-center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-block;
}

#home .sc-hero-logo-center .hero-logo{
  display: block;
  height: 330px;
  width: auto;
}

@media (max-width: 768px){
  #home .sc-hero-cloud{ min-height: 680px; }
  #home .sc-hero-logo-center .hero-logo{ height: 210px; }
}

/* Quote slots: same typography, but positioned around the logo */
#home .hero-quote-slot{
  position: absolute;
  width: 360px;
  max-width: 36%;
  margin: 0 !important;
  text-align: center;
}

@media (max-width: 992px){
  #home .hero-quote-slot{
    width: 320px;
    max-width: 44%;
  }
}

@media (max-width: 768px){
  #home .hero-quote-slot{
    width: 270px;
    max-width: 46%;
  }
}

/* Hide/show control (fade uses existing transition) */
#home .hero-quote-slot.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* Even, symmetric placement */
#home .hero-quote-slot.pos-tl{ left: 4%; top: 10%; }
#home .hero-quote-slot.pos-t { left: 50%; top: 6%; transform: translateX(-50%); }
#home .hero-quote-slot.pos-tr{ right: 4%; top: 10%; }
#home .hero-quote-slot.pos-r { right: 3%; top: 50%; transform: translateY(-50%); }
#home .hero-quote-slot.pos-br{ right: 4%; bottom: 10%; }
#home .hero-quote-slot.pos-b { left: 50%; bottom: 6%; transform: translateX(-50%); }
#home .hero-quote-slot.pos-bl{ left: 4%; bottom: 10%; }
#home .hero-quote-slot.pos-l { left: 3%; top: 50%; transform: translateY(-50%); }

/* Mobile: keep quotes away from the center logo */
@media (max-width: 768px){
  #home .hero-quote-slot.pos-tl{ left: 2%; top: 10%; }
  #home .hero-quote-slot.pos-tr{ right: 2%; top: 10%; }
  #home .hero-quote-slot.pos-bl{ left: 2%; bottom: 10%; }
  #home .hero-quote-slot.pos-br{ right: 2%; bottom: 10%; }
  #home .hero-quote-slot.pos-l { left: 2%; top: 50%; }
  #home .hero-quote-slot.pos-r { right: 2%; top: 50%; }
  #home .hero-quote-slot.pos-t { top: 6%; }
  #home .hero-quote-slot.pos-b { bottom: 6%; }
}

/* =========================================================
   EXECUTE 2026-02-17 — About: spacing for new sub-sections
   ========================================================= */
#about .sc-about-extra{ margin-top: 18px; }
#about .sc-about-subhead{ margin-top: 18px; }

/* About: experience logo strip (quiet, executive) */
#about .sc-about-exp-strip{ margin-top: 16px; }
#about .sc-about-exp-label{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(40,40,40,0.62);
  margin-bottom: 10px;
}
#about .sc-about-exp-logos{
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
#about .sc-about-exp-logo{
  height: 26px;
  width: auto;
  opacity: 0.85;
  filter: brightness(0) invert(1);
}
#about .sc-about-exp-logo[alt="Besra"]{ height: 20px; } /* slightly smaller */
@media (max-width: 768px){
  #about .sc-about-exp-logo{ height: 22px; }
  #about .sc-about-exp-logo[alt="Besra"]{ height: 18px; }
}

/* =========================================================
   EXECUTE 2026-02-23 — About: match reference layout (Experience centered + clean logo strip)
   ========================================================= */
#about .sc-about-exp-row{ margin-top: 12px; }
#about .sc-about-logos-row{ margin-top: 12px; }

/* Move portrait slightly down to align with the left text stack */
#about .sc-profile-photo-wrap{ margin-top: 12px; }
#about .sc-about-expbox{
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Experience title: align LEFT like Contact (title starts at left edge of the gold line) */
#about .sc-about-exp-title{
  text-align: left;
  margin: 0 0 10px !important;
}
#about .sc-about-exp-title::after{ height: 3px; }

/* Centered paragraph (deck style), but with comfortable line length */
#about .sc-about-exp-text{
  text-align: center;
  margin: 0 auto 18px;
  max-width: 980px;
  color: rgba(40,40,40,0.78);
  font-size: 16px;
  line-height: 1.65;
}

/* Logo strip (the only white "card" element, like the reference) */
#about .industry-logos.sc-about-exp-logos{
  background: rgba(255,255,255,0.96);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  gap: 0.60cm;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
#about .sc-about-exp-logos .industry-logo-item{ height: 1.78cm; }
#about .sc-about-exp-logos .industry-logo-item img{ height: 1.78cm; max-height: 1.78cm; }

@media (max-width: 992px){
  #about .industry-logos.sc-about-exp-logos{
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45cm;
  }
}
@media (max-width: 768px){
  #about .sc-about-exp-text{ font-size: 14px; }
  #about .industry-logos.sc-about-exp-logos{ padding: 12px 14px; }
  #about .sc-about-exp-logos .industry-logo-item{ height: 1.44cm; }
  #about .sc-about-exp-logos .industry-logo-item img{ height: 1.44cm; max-height: 1.44cm; }
}


/* =========================================================
   EXECUTE 2026-02-17 — Contact: tighten remaining dead space further
   ========================================================= */
#contact .sc-contact-heading--full{ margin-bottom: 0px !important; }
#contact .sc-contact-top{ margin-top: -18px; }

#contact hr.sc-contact-divider{ margin: 6px 0 8px !important; }

#contact .sc-contact-bottom{ margin-top: -12px; }

/* Reduce top/bottom padding of the Contact rectangle only */
#contact.sc-collage-section > .container{
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}


/* =========================================================
   EXECUTE 2026-02-17 — HERO bottom-quote lane + thinner hero card
   - Make hero rectangle ~25% thinner
   - Quotes only below logo in 3 slots
   ========================================================= */

header.solid-color.intro .sc-hero-card{
  /* reduce height / padding ~25% */
  padding: 78px 26px 38px !important;
}

#home .sc-hero-cloud{
  min-height: 540px !important; /* ~25% thinner from 720 */
}

/* lift logo so it is clearly ABOVE the gold divider line */
#home .sc-hero-logo-center{
  top: 16% !important;
}

/* Make logo ~30% smaller than the previous (large) size */
#home .sc-hero-logo-center .hero-logo{
  height: 231px !important;
  width: auto !important;
}

#home .sc-hero-quote-zone{
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: calc(100% - 56px);
  max-width: 1180px;
  z-index: 2;
}

#home hr.sc-hero-quote-divider{
  border: 0;
  border-top: 3px solid rgba(202,160,90,0.95);
  margin: 0 0 18px 0;
}

#home .sc-hero-quote-boxes{
  display: flex;
  gap: 28px;
  justify-content: center;
}

/* 2026-03-31 — hero quotes simplified to one real rotating box */
#home .sc-hero-quote-box{
  flex: 0 1 31.5%;
  max-width: 360px;
  flex: 1 1 0;
  min-height: 210px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  position: relative;
  overflow: visible; /* never clip quotes */
  padding: 22px 22px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* quote slot inside each box */
#home .sc-hero-quote-box .hero-quote-slot{
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center;
  margin: 0 !important;
}

#home .sc-hero-quote-box .hero-quote-icon{
  margin: 0 0 8px 0;
}

#home .sc-hero-quote-box .hero-quote-text{
  color: rgba(50,50,50,0.92) !important;
  text-shadow: none !important;
  /* Match body text size used across Supply Chain / Industrial slides */
  font-size: 16px !important;
  line-height: 1.6 !important;
}

#home .sc-hero-quote-box .hero-quote-author{
  color: rgba(202,160,90,0.95) !important;
  text-shadow: none !important;
  margin-top: 10px;
  line-height: 1.2;
  /* Match section subheading size (e.g., "What We Do") */
  font-size: 20px !important;
  white-space: normal;
}

/* Slightly bump the quote mark icon as well (keep relative scale from fa-lg) */
#home .sc-hero-quote-box .hero-quote-icon{ font-size: 16px !important; }

/* Hide/show control (fade uses existing transition) */
#home .sc-hero-quote-box .hero-quote-slot.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* Responsive tweaks */
@media (max-width: 992px){
  header.solid-color.intro .sc-hero-card{ padding: 62px 18px 34px !important; }
  #home .sc-hero-cloud{ min-height: 520px !important; }
  #home .sc-hero-quote-zone{ width: calc(100% - 34px); bottom: 18px; }
  #home .sc-hero-quote-box{ min-height: 200px; }
}

@media (max-width: 768px){
  #home .sc-hero-cloud{ min-height: 560px !important; }
  #home .sc-hero-logo-center{ top: 24% !important; }
  #home .sc-hero-logo-center .hero-logo{ height: 147px !important; }
  #home .sc-hero-quote-boxes{ flex-direction: column; gap: 14px; }
  #home .sc-hero-quote-box{ min-height: 190px; }
}

/* =========================================================
   EXECUTE 2026-02-17 — ABOUT: remove extra blank band between paragraphs
   ========================================================= */
#about .sc-about-copy p{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}
#about .sc-about-copy p:last-child{ margin-bottom: 0 !important; }

/* =========================================================
   EXECUTE 2026-02-19 — LOCK HEADER SIZE (always compact)
   Keep the navbar fixed and ALWAYS the same compact height
   (match the "after scroll" header height from the reference).
   We intentionally make the base and .top-nav-collapse states
   identical so there is no size-jump on any slide.
   ========================================================= */

/* Desktop/tablet */
@media (min-width: 768px){
  .navbar.navbar-onepage,
  .navbar.navbar-onepage.top-nav-collapse{
    min-height: 52px !important;
  }
  .navbar.navbar-onepage .navbar-brand,
  .navbar.navbar-onepage.top-nav-collapse .navbar-brand{
    height: 52px !important;
    padding: 8px 5px 8px 15px !important;
  }
  .navbar.navbar-onepage .navbar-brand .brand-logo,
  .navbar.navbar-onepage.top-nav-collapse .navbar-brand .brand-logo{
    height: 38px !important;
  }
  .navbar.navbar-onepage .navbar-nav > li > a,
  .navbar.navbar-onepage.top-nav-collapse .navbar-nav > li > a{
    height: 52px !important;
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }
}

/* Mobile */
@media (max-width: 767px){
  .navbar-custom,
  .navbar-custom.top-nav-collapse{
    min-height: 54px !important;
  }
  .navbar-custom .navbar-brand,
  .navbar-custom.top-nav-collapse .navbar-brand{
    padding: 10px 5px 10px 12px !important;
  }
}



/* === Header lock + brand left pin (added) === */
.navbar-custom,
.navbar-custom.top-nav-collapse{
  -webkit-transition:none !important;
  -moz-transition:none !important;
  transition:none !important;
}

/* Keep navbar container full-width so brand does not shift on scroll */
.navbar-fixed-top .container,
.navbar-custom .container,
.navbar-custom.top-nav-collapse .container{
  width: 100% !important;
  max-width: none !important;
}

/* Preserve compact sizing and prevent brand padding changes between states */
.navbar-custom .navbar-brand,
.navbar-custom.top-nav-collapse .navbar-brand{
  padding: 12px 8px 10px 15px !important;
  font-size: 22px !important;
}

/* Pin brand to the left and nav to the right (no drifting) */
.navbar-custom .navbar-header{
  float: left !important;
}
.navbar-custom .navbar-collapse{
  float: right !important;
}
.navbar-custom .navbar-nav{
  margin-right: 0 !important;
}

/* Keep left offset consistent */
.navbar-custom .container{
  padding-left: 18px !important;
  padding-right: 18px !important;
}




/* === Apple-like same-document view transitions (added) === */
@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: sc-vt-old 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  ::view-transition-new(root) {
    animation: sc-vt-new 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@keyframes sc-vt-old {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}
@keyframes sc-vt-new {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}




/* =========================================================
   MOBILE RESPONSIVE PATCH (iPhone/phones) — 2026-02-19
   Goal: fix mixed layout on small screens by stacking columns,
   removing forced widths/min-widths, and making hero quotes usable.
   ========================================================= */
@media (max-width: 768px){

  /* Give content breathing room under fixed header */
  body{ padding-top: 74px !important; }

  /* Containers: full-width with safe side padding */
  .container{
    width: 100% !important;
    max-width: none !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Foreground rectangles/panels */
  .sc-collage-section > .container{
    border-radius: 16px !important;
    padding: 18px 14px !important;
  }

  /* --- Services / Industrial cards: stack left/right --- */
  .sc-optA-card{
    flex-direction: column !important;
    gap: 14px !important;
    padding: 14px 14px !important;
  }
  .sc-optA-left{
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .sc-optA-media{
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 190px !important;
  }
  .sc-optA-media img{
    width: 100% !important;
    height: 190px !important;
    object-fit: cover !important;
  }

  /* Right column becomes a section under the left */
  .sc-optA-right{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border-left: 0 !important;
    padding-left: 0 !important;
    border-top: 1.25px solid rgba(191,160,74,0.95) !important;
    padding-top: 12px !important;
  }

  /* Titles scale down slightly */
  .sc-slide-title{ font-size: 22px !important; line-height: 1.18 !important; }
  .sc-optA-title{ font-size: 16px !important; }

  /* --- Hero quotes: stack vertically and avoid absolute positioning --- */
  #home .sc-hero-quote-zone{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 14px !important;
  }
  #home .sc-hero-quote-boxes{
    flex-direction: column !important;
    gap: 14px !important;
  }
  #home .sc-hero-quote-box{
    min-height: 0 !important;
    padding: 16px 14px 14px !important;
  }
  #home .hero-quote-text{
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  #home .hero-quote-author{
    font-size: 12px !important;
  }

  /* Navbar: keep compact and readable on phones */
  .navbar-custom .navbar-brand,
  .navbar-custom.top-nav-collapse .navbar-brand{
    font-size: 18px !important;
    padding: 10px 8px 10px 12px !important;
  }
  .navbar-custom .navbar-brand .logo,
  .navbar-custom.top-nav-collapse .navbar-brand .logo{
    max-height: 22px !important;
  }
}




/* =========================================================
   EXECUTE 2026-02-20 — Global background switch
   User request: remove the blue background completely and use the same
   white + subtle blue dot grid as the rectangles, across the whole site.
   ========================================================= */
.sc-fixed-bg{ display:none !important; }

html, body{
  background-color:#F5F5F3 !important;
  /*background-image*/: radial-gradient(circle, var(--sc-dot-color) var(--sc-dot-radius), transparent var(--sc-dot-radius)) !important;
  background-size: var(--sc-dot-size) var(--sc-dot-size) !important;
  background-position: 0 0 !important;
  background-attachment: fixed !important;
}

header.solid-color.intro,
.sc-collage-section{
  background-color:#F5F5F3 !important;
  /*background-image*/: radial-gradient(circle, var(--sc-dot-color) var(--sc-dot-radius), transparent var(--sc-dot-radius)) !important;
  background-size: var(--sc-dot-size) var(--sc-dot-size) !important;
  background-position: 0 0 !important;
  background-attachment: fixed !important;
}



/* =========================================================
   EXECUTE 2026-02-20 — ABOUT US experiment (bottom → up, not fast)
   Sequence (photo first):
   1) photo, 2) WHO WE ARE title+line, 3) 3 paragraphs, 4) WHAT WE DO title+line, 5) final sentence
   ========================================================= */
#about.sc-about-seq-init [data-about-seq]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 520ms cubic-bezier(0.22,1,0.36,1),
              transform 720ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform, opacity;
}

#about.sc-about-seq-init [data-about-seq="photo"]{
  transform: translateY(16px);
}

#about.sc-about-seq-run [data-about-seq]{
  opacity: 1;
  transform: none;
}


/* =========================================================
   EXECUTE 2026-02-20 — SUPPLY CHAIN sequence (screenshots 1→5)
   1) title + line, 2..5) cards top-to-bottom
   Calm slide-up + fade-in, not fast
   ========================================================= */
#services.sc-seq-init > .container{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(0.22,1,0.36,1),
              transform 760ms cubic-bezier(0.22,1,0.36,1);
}
#services.sc-seq-init .sc-slide-title{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms cubic-bezier(0.22,1,0.36,1),
              transform 660ms cubic-bezier(0.22,1,0.36,1);
}
#services.sc-seq-init .sc-optA-card{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 520ms cubic-bezier(0.22,1,0.36,1),
              transform 760ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform, opacity;
}

/* Stage 1: container visible */
#services.sc-seq-rect > .container{
  opacity: 1;
  transform: none;
}
/* Stage 2: title visible */
#services.sc-seq-title .sc-slide-title{
  opacity: 1;
  transform: none;
}
/* Stage 3: cards visible */
#services.sc-seq-blocks .sc-optA-card{
  opacity: 1;
  transform: none;
}


/* =========================================================
   EXECUTE 2026-02-20 — Remove foreground rectangles
   User request: remove the rectangle backgrounds so each slide content
   sits directly on the single page background.
   ========================================================= */

/* Main slide foreground containers */
body.sc-slide-mode .sc-page.sc-active > .container,
.sc-collage-section > .container,
header.solid-color.intro .sc-hero-card{
  background: transparent !important;
  /*background-image*/: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  overflow: visible !important;
}

/* Remove the extra “card-like” padding that was used to fake rectangles.
   Keep normal bootstrap side padding so content doesn’t stick to the edge. */
body.sc-slide-mode .sc-page.sc-active > .container{
  padding: 0 15px !important;
}
@media (min-width: 992px){
  body.sc-slide-mode .sc-page.sc-active > .container{
    padding: 0 24px !important;
  }
}

/* =========================================================
   EXECUTE 2026-02-20 — Make Supply Chain + Industrial cards fully transparent
   (match About Us / Contact feel)
   + Add premium micro-interactions for Supply Chain only:
     - subtle lift + shadow
     - gold border highlight
     - title underline reveal
   ========================================================= */

/* Keep cards transparent and static (no reveal/sequence animations) */
#services .sc-optA-card,
#industrial-part1 .sc-optA-card,
#industrial-part2 .sc-optA-card{
  background: transparent !important;
  background-color: transparent !important;
  /*background-image*/: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* If any legacy "sequence" classes are applied, neutralize them */
#services.sc-seq-init .sc-optA-card,
#services.sc-seq-blocks .sc-optA-card{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

#services .sc-optA-media,
#industrial-part1 .sc-optA-media,
#industrial-part2 .sc-optA-media{
  background: transparent !important;
}

/* =========================================================
   Enhanced micro-interaction (desktop hover) — Supply Chain + Industrial:
   - scale 1.15 + gentle lift
   - premium easing
   - soft shadow + gold border cue
   - underline "draw" animation on BOTH the block title + "WHAT YOU WILL GET"
   - subtle de-emphasis of non-hover cards
   ========================================================= */

/* Apply to all three slides */
#services .sc-optA-card,
#industrial-part1 .sc-optA-card,
#industrial-part2 .sc-optA-card{
  transform: translateZ(0);
  transform-origin: center;
  transition: transform 95ms cubic-bezier(0.2,0.8,0.2,1),
              filter 95ms cubic-bezier(0.2,0.8,0.2,1),
              outline-color 95ms cubic-bezier(0.2,0.8,0.2,1),
              opacity 85ms cubic-bezier(0.2,0.8,0.2,1);
  will-change: transform, filter;
}

/* De-emphasize siblings on hover (desktop) */
#services .sc-optA-list:hover .sc-optA-card,
#industrial-part1 .sc-optA-list:hover .sc-optA-card,
#industrial-part2 .sc-optA-list:hover .sc-optA-card{
  opacity: 0.92;
}
#services .sc-optA-list:hover .sc-optA-card:hover,
#industrial-part1 .sc-optA-list:hover .sc-optA-card:hover,
#industrial-part2 .sc-optA-list:hover .sc-optA-card:hover{
  opacity: 1;
}

/* Hover state */
#services .sc-optA-card:hover,
#industrial-part1 .sc-optA-card:hover,
#industrial-part2 .sc-optA-card:hover{
  transform: scale(1.06) translateY(-4px) !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
  outline: 1px solid rgba(191,160,74,0.38);
  outline-offset: 7px;
}

/* Mobile tap feedback (keep subtle) */
#services .sc-optA-card:active,
#industrial-part1 .sc-optA-card:active,
#industrial-part2 .sc-optA-card:active{
  transform: scale(1.01) !important;
}

/* Underline "draw" animation: block title */
#services .sc-optA-title span,
#industrial-part1 .sc-optA-title span,
#industrial-part2 .sc-optA-title span{
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

#services .sc-optA-title span::after,
#industrial-part1 .sc-optA-title span::after,
#industrial-part2 .sc-optA-title span::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: rgba(191,160,74,0.70);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 150ms cubic-bezier(0.2,0.8,0.2,1);
}

/* Underline "draw" animation: "WHAT YOU WILL GET" (right side title) */
#services .sc-optA-right-title span,
#industrial-part1 .sc-optA-right-title span,
#industrial-part2 .sc-optA-right-title span{
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

#services .sc-optA-right-title span::after,
#industrial-part1 .sc-optA-right-title span::after,
#industrial-part2 .sc-optA-right-title span::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: rgba(191,160,74,0.70);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 150ms cubic-bezier(0.2,0.8,0.2,1);
}

/* Reveal both underlines on hover */
#services .sc-optA-card:hover .sc-optA-title span::after,
#industrial-part1 .sc-optA-card:hover .sc-optA-title span::after,
#industrial-part2 .sc-optA-card:hover .sc-optA-title span::after,
#services .sc-optA-card:hover .sc-optA-right-title span::after,
#industrial-part1 .sc-optA-card:hover .sc-optA-right-title span::after,
#industrial-part2 .sc-optA-card:hover .sc-optA-right-title span::after{
  transform: scaleX(1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #services .sc-optA-card,
  #industrial-part1 .sc-optA-card,
  #industrial-part2 .sc-optA-card{
    transition: none !important;
  }
  #services .sc-optA-title span::after,
  #industrial-part1 .sc-optA-title span::after,
  #industrial-part2 .sc-optA-title span::after,
  #services .sc-optA-right-title span::after,
  #industrial-part1 .sc-optA-right-title span::after,
  #industrial-part2 .sc-optA-right-title span::after{
    transition: none !important;
  }
}


/* =========================================================
   2026-02-23 — FIX: true horizontal + vertical centering
   - Supply Chain + Industrial Assets slides were leaning right due to
     conflicting container width rules.
   - Also ensure these 3 slides sit vertically centered in the viewport.
   ========================================================= */

/* Make the slide sections themselves the centering frame */
#services.sc-page.sc-collage-section,
#industrial-part1.sc-page.sc-collage-section,
#industrial-part2.sc-page.sc-collage-section{
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  /* viewport center (minus fixed navbar) */
  min-height: calc(100vh - var(--sc-nav-h, 96px)) !important;
}

/* Center the white foreground card and give it the intended wider width */
#services.sc-collage-section > .container,
#industrial-part1.sc-collage-section > .container,
#industrial-part2.sc-collage-section > .container{
  width: 92vw !important;
  max-width: 1630px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 768px){
  #services.sc-collage-section > .container,
  #industrial-part1.sc-collage-section > .container,
  #industrial-part2.sc-collage-section > .container{
    width: 96vw !important;
  }
}


/* === QA patch: main slide titles reduced by 20% (desktop/tablet/mobile) === */
.sc-slide-title{ font-size: 26px !important; line-height: 1.15 !important; }
@media (max-width: 991px){
  .sc-slide-title{ font-size: 21px !important; line-height: 1.16 !important; }
}
@media (max-width: 768px){
  .sc-slide-title{ font-size: 16px !important; line-height: 1.18 !important; }
}


/* === Hover zoom fast + force for Supply Chain / Industrial Assets (user requested) === */
#services .sc-optA-list, #industrial-part1 .sc-optA-list, #industrial-part2 .sc-optA-list{ overflow: visible !important; }
#services .sc-optA-card, #industrial-part1 .sc-optA-card, #industrial-part2 .sc-optA-card{
  transition: transform 95ms cubic-bezier(0.2,0.8,0.2,1), filter 95ms cubic-bezier(0.2,0.8,0.2,1), outline-color 95ms ease, opacity 85ms ease !important;
  will-change: transform, filter;
}
#services .sc-optA-card:hover, #industrial-part1 .sc-optA-card:hover, #industrial-part2 .sc-optA-card:hover{
  transform: translateY(-4px) scale(1.06) !important;
}
/* HWW blocks: faster zoom in/out */
.hww-row{ transition: transform 100ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 100ms cubic-bezier(0.2,0.8,0.2,1), border-color 90ms ease !important; }

/* === DOTS + BLOCK READABILITY UPDATE (2026-03-05)
   User request:
   1) Bring back the original dot quantity and increase density by ~10% (handled via --sc-dot-size: 26px)
   2) Remove/blur any dots behind Supply Chain + Industrial Assets blocks while scrolling.
      Approach:
      - Keep dot grid on the main slide rectangles.
      - Remove dot texture from the moving blocks (sc-optA-card) and give them a tinted glass surface
        with a backdrop blur so the background texture never interferes with text.
   ============================================================ */

/* Supply Chain + Industrial Assets paired blocks: NO dots in/behind the blocks */
#services .sc-optA-card,
#industrial-part1 .sc-optA-card,
#industrial-part2 .sc-optA-card,
#industrial-part3 .sc-optA-card{
  /* remove dot texture */
  /*background-image*/: none !important;
  /* keep the light bluish–purplish tint, but make it more opaque so background dots don't show through */
  background: linear-gradient(135deg,
    rgba(240, 249, 255, 0.94) 0%,
    rgba(252, 244, 255, 0.94) 100%) !important;

  /* blur whatever is behind the card (supported browsers) */
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;

  /* ensure readable separation */
  box-shadow: 0 16px 40px rgba(0,0,0,0.10) !important;
}

/* Also ensure inner surfaces don't re-introduce textures */
#services .sc-optA-media,
#industrial-part1 .sc-optA-media,
#industrial-part2 .sc-optA-media,
#industrial-part3 .sc-optA-media{
  /*background-image*/: none !important;
}

/* === END DOTS + BLOCK READABILITY UPDATE */


/* === HWW tint alignment (2026-03-05)
   Make HWW pair blocks use the same single tint surface as Supply/Industrial blocks,
   so left/right columns do not look differently colored. */
#how-we-work .sc-hww-pair-group{
  /*background-image*/: none !important;
  background: rgba(246, 246, 255, 0.94) !important; /* single uniform bluish–purplish tint */
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10) !important;
}
#how-we-work .sc-hww-left,
#how-we-work .sc-hww-right{
  background: transparent !important;
}



/* === Imported About Us + HWW styles from reference file === */
#about .sc-about-op-heading{ text-align:center; margin-bottom:12px !important; }
#about .sc-about-op-copy{ max-width:1040px; margin:0 auto 24px; }
#about .sc-about-op-copy-block{ background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.04); border-radius:24px; box-shadow:0 12px 30px rgba(0,0,0,0.05); padding:20px 28px; }
#about .sc-about-op-lead{ color:rgba(36,36,36,0.86); font-size:19px; line-height:1.75; margin:0; }
#about .sc-about-op-lead strong{ font-weight:700; }
#about .sc-about-op-pillars-row{ margin-top:8px; margin-bottom:22px; }
#about .sc-about-op-pillars-row > [class*="col-"]{ display:flex; }
#about .sc-about-op-pillar{ width:100%; min-height:96px; padding:12px 26px; border-radius:20px; background:rgba(255,255,255,0.92); box-shadow:0 14px 28px rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.04); display:flex; align-items:center; justify-content:center; text-align:center; }
#about .sc-about-op-pillar h4{ color:#2f2f2f; font-size:17px; line-height:1.35; letter-spacing:0.06em; font-weight:700; margin:0; }
#about .sc-about-op-logos-row{ margin-top:12px; }
#about .sc-about-op-logos-frame{ background:transparent; border-radius:0; padding:0; box-shadow:none; }
#about .sc-about-op-logos-grid{ display:block; background:transparent; box-shadow:none; padding:0; }
#about .sc-about-op-logo-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:16px; margin:0; }
#about .sc-about-op-logo-row + .sc-about-op-logo-row{ margin-top:16px; }
#about .sc-about-op-logo-card{ --logoScale:0.75; min-height:188px; padding:14px 12px 14px; border-radius:18px; background:rgba(255,255,255,0.92); border:1px solid rgba(201,163,90,0.32); box-shadow:0 8px 22px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8); display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:10px; }
#about .sc-about-op-logo-wrap{ height:104px; display:flex; align-items:center; justify-content:center; width:100%; overflow:hidden; }
#about .sc-about-op-logo-card img{ max-width:none; max-height:none; width:auto; height:auto; object-fit:contain; display:block; transform:scale(var(--logoScale)); transform-origin:center center; }
#about .sc-about-op-logo-card.is-olympus{ --logoScale:0.621; }
#about .sc-about-op-logo-card.is-teghout{ --logoScale:0.69; }
#about .sc-about-op-logo-card.is-zeytun{ --logoScale:0.6975; }
#about .sc-about-op-meta{ display:flex; flex-direction:column; gap:4px; justify-content:center; align-items:center; min-height:50px; text-align:center; }
#about .sc-about-op-industry{ font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(58,58,58,0.78); font-weight:700; line-height:1.2; }
#about .sc-about-op-country{ font-size:16px; font-weight:700; color:rgba(36,36,36,0.92); line-height:1.2; }
#about .sc-about-op-copy-block:hover, #about .sc-about-op-pillar:hover, #about .sc-about-op-logo-card:hover{ background:rgba(255,255,255,0.96); }
#how-we-work .sc-hww-title,
#how-we-work .sc-hww-title.sc-slide-title{ font-size:26px !important; line-height:1.15 !important; letter-spacing:inherit !important; }
@media (max-width: 991px){
  #how-we-work .sc-hww-title,
  #how-we-work .sc-hww-title.sc-slide-title{ font-size:21px !important; line-height:1.16 !important; }
}
@media (max-width: 768px){
  #how-we-work .sc-hww-title,
  #how-we-work .sc-hww-title.sc-slide-title{ font-size:16px !important; line-height:1.18 !important; }
}
#how-we-work .sc-hww-grid{ grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr) !important; column-gap:10px !important; row-gap:18px !important; align-items:center; }
#how-we-work .sc-hww-head-negative-left, #how-we-work .sc-hww-head-negative-arrow, #how-we-work .sc-hww-head-negative-right{ margin-top:8px; }
#how-we-work .sc-hww-pair-group-negative{ grid-column:1 / -1; width:min(100%,980px) !important; justify-self:center; }
#how-we-work .sc-hww-pair-group-negative .sc-hww-pair{ grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); }
#how-we-work .sc-hww-pair-group, #how-we-work .sc-hww-pair-group:hover, #how-we-work.sc-anim.anim-ready.is-active .sc-hww-pair-group.sc-reveal-item:hover{ transform:translateY(0) scale(1) !important; }
#how-we-work .sc-hww-pair-group{ transition:box-shadow 120ms cubic-bezier(0.2,0.8,0.2,1), border-color 120ms cubic-bezier(0.2,0.8,0.2,1), background-color 120ms cubic-bezier(0.2,0.8,0.2,1) !important; }
#how-we-work .sc-hww-head, #how-we-work .sc-hww-head span, #how-we-work .sc-hww-head .sc-hww-mid-arrow, #how-we-work .sc-hww-head-left, #how-we-work .sc-hww-head-right, #how-we-work .sc-hww-head-arrow, #how-we-work .sc-hww-head-negative-left, #how-we-work .sc-hww-head-negative-arrow, #how-we-work .sc-hww-head-negative-right{ color:#111111 !important; }
@media (max-width:991px){ #about .sc-about-op-pillars-row > [class*="col-"]{ margin-bottom:16px; } #about .sc-about-op-logo-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){ #about .sc-about-op-lead{ font-size:16px; } #about .sc-about-op-pillar{ min-height:108px; } #about .sc-about-op-pillar h4{ font-size:16px; } #about .sc-about-op-logo-row{ grid-template-columns:1fr; } #about .sc-about-op-logo-card{ min-height:142px; } }


/* === Header → Hero premium separator (matched to footer family, calmer) === */
.navbar-custom{
  position: relative;
  z-index: 1040;
}
.navbar-custom::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-1px;
  width:min(1180px, calc(100% - 40px));
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(181,147,90,.10) 0%,
    rgba(181,147,90,.88) 18%,
    rgba(181,147,90,.88) 82%,
    rgba(181,147,90,.10) 100%
  );
  pointer-events:none;
}
header.solid-color.intro{
  position: relative;
}
header.solid-color.intro::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
@media (max-width: 991px){
  .navbar-custom::after{
    width:calc(100% - 28px);
  }
}


/* === Header lock restore (keep header frozen on scroll) === */
html body nav.navbar.navbar-universal.navbar-custom.navbar-fixed-top.navbar-onepage{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1100 !important;
}
html body .navbar-fixed-top{
  position: fixed !important;
}
html body{
  padding-top: 0 !important;
}


/* === Mobile header alignment fix === */
@media (max-width: 991px){
  .navbar-custom .container,
  .navbar-custom .navbar-header{
    min-height: 86px;
  }
  .navbar-custom .navbar-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100%;
  }
  .navbar-custom .navbar-brand{
    display:flex !important;
    align-items:center !important;
    height:86px !important;
    margin:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .navbar-custom .navbar-brand .brand-logo{
    display:block;
    height:46px !important;
    width:auto !important;
    max-width:none !important;
    position:relative;
    top:0 !important;
    transform:none !important;
    margin:0 !important;
  }
  .navbar-custom .navbar-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:56px !important;
    width:56px !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    position:relative;
    top:0 !important;
  }
}



/* === Mobile HWW centering + no zoom === */
@media (max-width: 991px){
  #how-we-work .sc-hww-grid,
  #how-we-work .sc-hww-pair,
  #how-we-work .sc-hww-bottom{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #how-we-work .sc-hww-pair-group{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }
  #how-we-work .sc-hww-grid{
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
    justify-items:stretch !important;
  }
  #how-we-work .sc-hww-pair{
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
    column-gap: 0 !important;
    justify-items:stretch !important;
    align-items:stretch !important;
  }
  #how-we-work .sc-hww-left,
  #how-we-work .sc-hww-right,
  #how-we-work .sc-hww-arrow,
  #how-we-work .sc-hww-sep{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:left !important;
  }
  #how-we-work .sc-hww-pair-group,
  #how-we-work .sc-hww-pair-group:hover,
  #how-we-work .sc-hww-pair-group.sc-force-hover,
  #how-we-work .sc-hww-left,
  #how-we-work .sc-hww-right,
  #how-we-work .sc-hww-left:hover,
  #how-we-work .sc-hww-right:hover{
    transform:none !important;
    scale:none !important;
    box-shadow:none !important;
    filter:none !important;
  }
}


/* =========================================================
   2026-04-02 — Point 1
   Make header the same flat color as the surrounding page background
   ========================================================= */
html body nav.navbar.navbar-universal.navbar-custom.navbar-fixed-top.navbar-onepage,
html body .navbar-custom,
html body .navbar-custom.top-nav-collapse,
html body .navbar-custom .navbar-collapse,
html body .navbar-custom.top-nav-collapse .navbar-collapse{
  background: #F5F5F3 !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .navbar-custom::after{
  display: none !important;
}
html body .navbar-custom,
html body .navbar-custom.top-nav-collapse{
  border-top: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}


/* === About Us photo enlargement pass: fill the intended right-side area cleanly === */
@media (min-width: 992px){
  #about > .container > .row:first-child > .col-lg-4{
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }
  #about .sc-profile-photo-wrap{
    margin-top: 6px !important;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: 0;
  }
  #about .sc-profile-photo{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
  }
}


/* === About Us: pull Experience block upward as one unit to reduce dead gap === */
@media (min-width: 992px){
  #about .sc-about-exp-row{
    margin-top: -42px !important;
  }
}

/* === 2026-04-02: align About Us slide start with Supply Chain / Industrial === */
@media (min-width: 992px){
  body.sc-slide-mode #about.sc-page.sc-active > .container{
    padding-top: 34px !important;
  }
}