/* ==========================================================================
   Triple Link Global Shipping LLC — brand theme + fixes
   Loaded after onpoint.css / onpoint-responsive.css
   Brand colours (from the company logo):
     navy #0C2340 | cobalt #1E6FB5 | teal #16A6BC
   Core palette is set on :root in onpoint.css.
   ========================================================================== */

/* guard against horizontal overflow site-wide */
html, body { overflow-x: hidden; }
img { max-width: 100%; }

/* ------------------------------------------------------------------ *
 * 0. Loading screen — logo spinning in 3D instead of the flat 2D flip
 * ------------------------------------------------------------------ */
.preloader {
  background-color: #fff;
}

.preloader__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 900px;
}

.preloader__image {
  width: 96px;
  height: 96px;
  background-image: url(../images/loader.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transform-style: preserve-3d;
  filter: drop-shadow(0 14px 20px rgba(12, 35, 64, 0.28));
  animation-name: tlg-preloader-spin;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
  animation-iteration-count: infinite;
}

.preloader__shadow {
  width: 74px;
  height: 14px;
  margin-top: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(12, 35, 64, 0.32) 0%, rgba(12, 35, 64, 0) 72%);
  animation-name: tlg-preloader-shadow;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
  animation-iteration-count: infinite;
}

@keyframes tlg-preloader-spin {
  0%   { transform: rotateY(0deg) rotateX(6deg) scale(1); }
  50%  { transform: rotateY(180deg) rotateX(6deg) scale(1.12); }
  100% { transform: rotateY(360deg) rotateX(6deg) scale(1); }
}

@keyframes tlg-preloader-shadow {
  0%, 100% { transform: scaleX(1); opacity: 0.55; }
  50%      { transform: scaleX(0.5); opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__image,
  .preloader__shadow {
    animation: none;
  }
}

/* ------------------------------------------------------------------ *
 * 1. Header logo
 * ------------------------------------------------------------------ */
.main-menu__logo { padding: 14px 0; }

.tlg-brand { display: inline-block; line-height: 0; }

.tlg-brand img {
  width: auto;
  height: 66px;
}

.stricky-header .tlg-brand img { height: 52px; }

/* footer / side-panel / mobile logo (emblem only) */
.footer-widget__logo img,
.sidebar-info-contents .logo img,
.mobile-nav__content .logo-box img {
  width: auto;
  max-width: 150px;
  height: auto;
}

/* search icon removed from the navbar — close the gap it left */
.main-menu__nav-sidebar-icon {
  margin-left: 0;
  margin-right: 26px;
}

/* ------------------------------------------------------------------ *
 * 2. Typography / section titles
 *    (template ships titles at 48/48 — no leading — and force-capitalised)
 * ------------------------------------------------------------------ */
.section-title__title {
  font-size: 38px;
  line-height: 1.22;
  text-transform: none;
}

.section-title__tagline {
  letter-spacing: 1.4px;
}

/* trim the template's very large top paddings on inner-page hero + services */
.services-page { padding-top: 110px; }
.page-header { padding: 104px 0 110px; }
.contact-one { padding: 90px 0 90px; }

/* preloader shows the emblem — give it a visible size */
.preloader__image { background-size: 110px auto; }

/* ------------------------------------------------------------------ *
 * 3. Navigation
 * ------------------------------------------------------------------ */
.main-menu__list > li.current > a,
.main-menu__list > li.current-menu-item > a {
  color: var(--onpoint-base);
}

/* ------------------------------------------------------------------ *
 * 4. Services page — card text + per-service WhatsApp link
 * ------------------------------------------------------------------ */
.services-one__single p {
  font-family: var(--onpoint-font);
  font-size: 16px;
  line-height: 26px;
  color: var(--onpoint-gray);
}

.services-one__btn-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.services-one__wa,
.wa-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--onpoint-font-two);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #128c4b;
}

.wa-inline { margin-top: 18px; }

.services-one__wa i,
.wa-inline i {
  font-size: 19px;
  color: #25d366;
}

.services-one__wa:hover,
.services-one__wa:focus,
.services-one__wa:visited,
.wa-inline:hover,
.wa-inline:focus,
.wa-inline:visited {
  color: #0d6b39;
}

/* ------------------------------------------------------------------ *
 * 5. About page — "Company details" cards
 * ------------------------------------------------------------------ */
.tlg-facts {
  position: relative;
  padding: 30px 0 100px;
}

.tlg-facts .section-title {
  margin-bottom: 46px;
}

.tlg-fact {
  height: 100%;
  background: var(--onpoint-extra);
  border-radius: 16px;
  padding: 30px 26px 26px;
}

.tlg-fact__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--onpoint-base);
  margin-bottom: 18px;
}

.tlg-fact__icon span {
  font-size: 24px;
  color: #fff;
}

.tlg-fact h3 {
  font-family: var(--onpoint-font-two);
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 10px;
  color: var(--onpoint-black);
}

.tlg-fact p {
  font-family: var(--onpoint-font);
  font-size: 15px;
  line-height: 24px;
  color: var(--onpoint-gray);
}

/* ------------------------------------------------------------------ *
 * 6. Counter section — tone down the giant coloured panel
 * ------------------------------------------------------------------ */
.counter-one {
  padding: 20px 0 90px;
}

.counter-one__right {
  background-color: var(--onpoint-black);
  border-radius: 24px;
  padding: 60px 40px;
}

.counter-one__right .section-title__title,
.counter-one__right .section-title__tagline,
.counter-one__right-text,
.counter-one__count > h3,
.counter-one__count > span,
.counter-one__count-plus,
.counter-one__count-text {
  color: #fff;
}

.counter-one__right .section-title__tagline { color: var(--onpoint-primary); }
.counter-one__right-text { color: rgba(255, 255, 255, 0.82); }
.counter-one__count-text { color: rgba(255, 255, 255, 0.82); }

/* ------------------------------------------------------------------ *
 * 7. "Why are we different" (homepage) — align + clean list
 * ------------------------------------------------------------------ */
.why-are-we .row {
  align-items: center;
}

.why-are-we__img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 20px;
}

.why-are-we__list { display: block; }

.why-are-we__list li,
.why-are-we__list li + li {
  display: flex;
  align-items: flex-start;
  margin: 0 0 22px;
}

.why-are-we__list li .icon { flex: 0 0 50px; }
.why-are-we__list li .content { margin-left: 16px; }
.why-are-we__list li .content h3 { font-size: 18px; line-height: 22px; }
.why-are-we__list li .content p { font-size: 15px; line-height: 23px; }

.why-are-we__note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 4px;
  padding: 20px 24px;
  background: var(--onpoint-extra);
  border-radius: 14px;
}

.why-are-we__note span {
  font-size: 24px;
  color: var(--onpoint-base);
  line-height: 1.2;
}

.why-are-we__note p {
  font-size: 15px;
  line-height: 23px;
  color: var(--onpoint-black);
}

/* ------------------------------------------------------------------ *
 * 8. Hero — shorter, and a stronger navy wash for legible white text
 * ------------------------------------------------------------------ */
.main-slider .container {
  padding-top: 170px;
  padding-bottom: 150px;
}

.main-slider__title {
  font-size: 52px;
  line-height: 1.12;
}

.main-slider__bg:before {
  background: linear-gradient(
    90deg,
    rgba(12, 35, 64, 0.88) 0%,
    rgba(12, 35, 64, 0.62) 42%,
    rgba(12, 35, 64, 0.2) 100%
  );
}

/* ------------------------------------------------------------------ *
 * 9. CTA band
 * ------------------------------------------------------------------ */
.cta-one__bg-img:before {
  background-color: rgba(12, 35, 64, 0.55);
}

/* Homepage: FAQ now sits directly above the CTA band (testimonial/blog
   sections were removed), so neutralise the CTA's -153px overlap pull. */
.faq-one { padding-bottom: 90px; }
.faq-one__bg-color { bottom: 0; }
.faq-one + .cta-one { margin-top: 60px; }

/* ------------------------------------------------------------------ *
 * 10. Floating WhatsApp button
 * ------------------------------------------------------------------ */
.wa-float {
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(12, 35, 64, 0.28);
  animation: wa-pulse 2.4s infinite;
  transition: transform 0.3s ease, background 0.3s ease;
}

.wa-float:hover,
.wa-float:focus,
.wa-float:visited { color: #fff; }

.wa-float:hover {
  background: #1ebe5b;
  transform: translateY(-3px);
  animation: none;
}

@keyframes wa-pulse {
  0%   { box-shadow: 0 8px 24px rgba(12,35,64,.28), 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow: 0 8px 24px rgba(12,35,64,.28), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 8px 24px rgba(12,35,64,.28), 0 0 0 0 rgba(37,211,102,0); }
}

.scroll-to-top {
  bottom: 112px;
  right: 40px;
}

/* ------------------------------------------------------------------ *
 * 11. Footer bottom bar — copyright only, centred
 * ------------------------------------------------------------------ */
.site-footer__bottom-inner {
  justify-content: center;
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * 12. "Need any help?" CTA title — calmer sizing
 * ------------------------------------------------------------------ */
.cta-one__title {
  font-size: 34px;
  line-height: 1.2;
}

/* ------------------------------------------------------------------ *
 * 13. "Fast delivery" badge on the why-choose image
 *     (template ships this as an ugly grey→white gradient with an inset
 *      ::before and white text that ends up unreadable — replace outright)
 * ------------------------------------------------------------------ */
.why-choose-one__delivery-box {
  max-width: 236px;
  gap: 14px;
  padding: 18px 22px;
  background: var(--onpoint-base);
  border-radius: 16px;
}

.why-choose-one__delivery-box::before {
  display: none;
}

/* the template gives .why-choose-one no bottom spacing, so the next
   section (About Us) butts straight against it */
.why-choose-one {
  padding-bottom: 50px;
}

.why-choose-one__delivery-box .icon > span {
  font-size: 44px;
  color: #fff;
}

.why-choose-one__delivery-box > p {
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
}

/* ------------------------------------------------------------------ *
 * 14. Contact page — info list (Let's talk / Address / Send us email)
 * ------------------------------------------------------------------ */
.contact-one__contact-list li {
  align-items: flex-start;
}

.contact-one__contact-list li .icon {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
}

.contact-one__contact-list li .content h3 {
  font-size: 20px;
  line-height: 1.3;
}

.contact-one__contact-list li .content p {
  font-size: 16px;
  line-height: 24px;
  word-break: break-word;
}

/* ------------------------------------------------------------------ *
 * 15. Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 1199px) {
  /* neutralise the template's asymmetric negative margins once columns stack */
  .why-are-we__right,
  .why-are-we__left { margin-left: 0; margin-right: 0; }
  .why-choose-one { margin-right: 0; }
  .about-one__right { margin-left: 0; }
  .section-title__title { font-size: 34px; }
  .main-slider__title { font-size: 44px; }
  .cta-one__title { font-size: 30px; }
}

@media (max-width: 991px) {
  .tlg-brand img { height: 56px; }
  .counter-one__right { padding: 48px 26px; }
  .counter-one__left { margin-bottom: 40px; }
  .main-slider .container { padding-top: 150px; padding-bottom: 120px; }

  /* full-bleed hero + page banners on tablet/mobile (no rounded "border") */
  .main-slider { margin: 0; border-radius: 0; }
  .page-header { margin: 0; }
  .page-header__bg,
  .page-header__bg::before { border-radius: 0; }

  /* contact info list: stack instead of a 3-across flex row */
  .contact-one__contact-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .contact-one__contact-list li { margin-bottom: 24px; }
  .contact-one__contact-list li .icon { flex: 0 0 52px; width: 52px; height: 52px; }
  .contact-one__contact-list li .icon span { font-size: 20px; }
  .contact-one__contact-list li .content { margin-left: 16px; }
  .contact-one__contact-list li .content h3 { font-size: 18px; }
  .contact-one__contact-list li .content p { font-size: 15px; line-height: 22px; }
}

/* services grid: 2-up on tablets */
@media (min-width: 576px) and (max-width: 991px) {
  .services-page .row > [class*="col-xl-4"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 767px) {
  .section-title__title { font-size: 26px; line-height: 1.3; }
  .section-title__title br { display: none; }
  .main-slider__title { font-size: 32px; }
  .main-slider .container { padding-top: 130px; padding-bottom: 110px; }

  /* inner-page banners: shorter, full-bleed */
  .page-header { padding: 58px 0 62px; }
  .page-header__inner h2 { font-size: 28px; line-height: 1.2; }

  /* contact page: tighten the huge gaps around the info card */
  .contact-one { padding: 40px 0 46px; }
  .contact-one .section-title { margin-bottom: 26px; }
  .contact-one__inner { padding: 30px 20px 8px; }
  .contact-two { padding: 10px 0 60px; }
  .google-map__one { height: 320px; }

  .tlg-facts { padding: 16px 0 60px; }
  .why-are-we__img img { height: 260px; margin-bottom: 40px; }
  .why-choose-one__left { margin-bottom: 34px; }

  /* clear gap between the "FAST DELIVERY" badge and the About Us section */
  .why-choose-one { padding-bottom: 56px; }
  .why-choose-one__delivery-box { margin-top: 20px; }

  /* CTA band: drop the side photo, go solid blue, smaller heading */
  .cta-one__bg-img { display: none; }
  .cta-one__inner::before { background: var(--onpoint-base); opacity: 1; }
  .cta-one__inner { padding: 36px 22px; }
  .cta-one__title { font-size: 22px; line-height: 1.28; margin-bottom: 22px; }
  .cta-one__icon { display: none; }
  .cta-one__contact-box h3 { font-size: 20px; }

  /* About-One highlight list: tidy horizontal rows instead of tall stacks */
  .about-one__list li {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
  }
  .about-one__list li h3 { margin-top: 0; font-size: 16px; line-height: 1.35; }
  .about-one__list li h3 br { display: none; }
  .about-one__icon { flex: 0 0 auto; }

  /* "Fast delivery" badge: sit under the image, no overlap */
  .why-choose-one__delivery-box {
    position: static;
    max-width: 100%;
    width: 100%;
    margin-top: 16px;
    justify-content: flex-start;
    padding: 16px 18px;
  }
  .why-choose-one__delivery-box::before { top: 3px; left: 3px; right: 3px; bottom: 3px; }
  .why-choose-one__delivery-box .icon > span { font-size: 38px; }
  .why-choose-one__delivery-box > p { font-size: 15px; }

  .counter-one__right { border-radius: 18px; }
}

@media (max-width: 575px) {
  .tlg-brand img { height: 46px; }

  .wa-float {
    right: 16px; bottom: 16px;
    width: 50px; height: 50px;
    font-size: 26px;
  }
  .scroll-to-top {
    right: 16px; bottom: 74px;
    width: 44px; height: 44px;
  }
  .scroll-to-top i { line-height: 44px; }

  .services-one__btn-box { gap: 12px 16px; }
}

@media (max-width: 380px) {
  .tlg-brand img { height: 40px; }
}