/* ==========================================================================
   Site refinements

   Loaded after the purchased theme on every page. This file only tidies what
   the theme already does — spacing, alignment, type scale and states. It
   introduces no new colours: everything below uses the brand orange
   (#FD5C02), near-black (#222222), the theme's off-white (#f8f8f8) and white.

   Nothing here is page-specific; the tracking page keeps its own track.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Google Translate widget
   It used to sit as a bare <li> in the middle of the main menu, printing
   "Select Language / Powered by Google" across the nav. It now lives in the
   dark top bar; these rules strip the Google chrome and leave a plain select.
   -------------------------------------------------------------------------- */

/* the widget injects a banner iframe that shoves the whole page down */
body { top: 0 !important; }
iframe.skiptranslate { display: none !important; }

#google_translate_element { line-height: 1; }

.goog-te-gadget {
  font-size: 0 !important;          /* hides the "Powered by" text node */
  color: transparent !important;
}

.goog-te-gadget > span { display: none !important; }
#google_translate_element a { display: none; }

.goog-te-gadget .goog-te-combo {
  font-family: inherit;
  font-size: 13px;
  color: #ffffff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 4px;
  padding: 5px 9px;
  margin: 0;
  outline: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.goog-te-gadget .goog-te-combo:hover {
  background: rgba(255, 255, 255, .17);
  border-color: rgba(255, 255, 255, .38);
}

.goog-te-gadget .goog-te-combo option { color: #222222; background: #ffffff; }


/* --------------------------------------------------------------------------
   2. Header — top bar
   The theme spaced these with margin-left:60px, which left the email, phone
   and language control drifting. Flex keeps them on one baseline.
   -------------------------------------------------------------------------- */

.header-style-two .header-top { padding-right: 34px; }

.header-style-two .header-top .top-right .right-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}

.header-style-two .header-top .top-right .right-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 0;
  font-size: 14px;
  line-height: 1;
}

.header-style-two .header-top .top-right .right-list li .icon {
  position: relative;
  top: 1px;
  font-size: 15px;
}

.header-style-two .header-top .top-right .right-list .lang-item {
  padding-left: 30px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}


/* --------------------------------------------------------------------------
   3. Header — logo notch and menu
   The white logo panel deliberately rises over the dark bar. Keeping its
   padding symmetrical and capping the logo height stops the stepped look.
   -------------------------------------------------------------------------- */

.header-style-two .header-inner {
  box-shadow: 0 12px 34px rgba(0, 0, 0, .10);
}

.main-header.header-style-two .header-upper .logo-box {
  padding-left: 42px;
  padding-right: 42px;
}

.main-header.header-style-two .header-upper .logo-box .logo img {
  max-height: 54px;
  width: auto;
}

.header-style-two .main-menu .navigation > li { margin-left: 32px; }

.header-style-two .main-menu .navigation > li > a {
  position: relative;
  font-size: 16px;
  letter-spacing: .005em;
}

/* underline indicator for hover / current page */
.header-style-two .main-menu .navigation > li > a:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 2px;
  background: #FD5C02;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}

.header-style-two .main-menu .navigation > li:hover > a:after,
.header-style-two .main-menu .navigation > li.current > a:after {
  transform: scaleX(1);
}

.main-header.header-style-two .header-lower .search-box-btn {
  font-size: 20px;
  transition: color .2s ease;
}

.main-header.header-style-two .header-lower .search-box-btn:hover { color: #FD5C02; }


/* --------------------------------------------------------------------------
   4. Hero
   The tracking panel was a flat translucent grey rectangle with the input and
   button at different heights. This gives it a defined panel and matches them.
   -------------------------------------------------------------------------- */

.banner-section-two .content-column h1 {
  font-size: 62px;
  line-height: 1.1;
  letter-spacing: -.005em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .38);
}

.banner-section-two .content-column .text {
  font-size: 18px;
  line-height: 1.7;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .38);
}

.banner-form-two {
  max-width: 880px;
  padding: 22px 24px;
  border-radius: 8px;
  background-color: rgba(17, 17, 17, .55);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
}

.banner-form-two input[type="text"] {
  height: 56px;
  padding: 10px 20px;
  font-size: 15px;
  border: 0;
  border-radius: 6px;
}

.banner-form-two input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(253, 92, 2, .35);
}

.banner-form-two .form-group .theme-btn {
  height: 56px;
  padding: 0 32px;
  font-size: 16px;
  letter-spacing: .02em;
  border-radius: 6px;
}

/* on small screens the button sits under the input */
@media only screen and (max-width: 991px) {
  .banner-form-two .form-group:first-child { margin-bottom: 12px; }
  .banner-section-two .content-column h1 { font-size: 40px; }
}


/* --------------------------------------------------------------------------
   5. Freight strip
   The icon square was absolutely positioned with a 175px text indent, which
   pushed longer labels onto three ragged lines. Flex centres them instead.
   -------------------------------------------------------------------------- */

.feature-block .inner-box {
  display: flex;
  align-items: center;
  padding: 0 24px 0 0;
  min-height: 150px;
  transition: background-color .25s ease;
}

.feature-block .inner-box .icon-box {
  position: static;
  flex: 0 0 132px;
  width: 132px;
  height: 150px;
  font-size: 56px;
  line-height: 150px;
}

.feature-block .inner-box h3 {
  margin: 0;
  padding-left: 24px;
  font-size: 19px;
  line-height: 1.35;
}

.feature-block .inner-box:hover { background-color: #ffffff; }


/* --------------------------------------------------------------------------
   6. Section headings
   Tightens the display type so headings like "Welcome To DepRoute" stop
   breaking awkwardly across lines.
   -------------------------------------------------------------------------- */

.sec-title h2,
.sec-title-two h2 {
  letter-spacing: -.01em;
  line-height: 1.2;
}

@media only screen and (min-width: 992px) {
  .sec-title h2,
  .sec-title-two h2 { font-size: 38px; }
}


/* --------------------------------------------------------------------------
   7. DepRoute brand colours
   The logo is navy (#00275F) with an orange (#FD5C02) accent. The theme's
   accent has been swapped to the orange throughout; these rules put the navy
   back into the dark chrome so the palette matches the mark.
   -------------------------------------------------------------------------- */

.header-style-two .header-top { background: #00275F; }

.main-footer,
.main-footer.style-two { background-color: #00275F; }

.main-footer .footer-bottom { background: rgba(0, 0, 0, .22); }

/* headings and body copy pick up the navy rather than a flat near-black */
.sec-title h2,
.sec-title-two h2,
.feature-block .inner-box h3 a { color: #00275F; }

.header-style-two .main-menu .navigation > li > a { color: #00275F; }

/* keep the orange for the active/hover state */
.header-style-two .main-menu .navigation > li:hover > a,
.header-style-two .main-menu .navigation > li.current > a,
.header-style-two .sticky-header .main-menu .navigation > li.current > a { color: #FD5C02; }

/* the "Track Your Order" panel and other solid brand blocks */
.banner-form-two .form-group .theme-btn:hover { background: #D94E00; border-color: #D94E00; }