/* ================================================================
   Synestia Logistics — Premium Dark Theme
   Palette:
   Background       #121214
   Surface          #1E1E24
   Primary text     #F5F5F7
   Secondary text   #9E9EAF
   Accent / CTA     #FF3344
   ================================================================ */

:root {
  --main-h: 354;
  --main-s: 100%;
  --main-l: 60%;
  --main-two-h: 240;
  --main-two-s: 9%;
  --main-two-l: 13%;
  --main-three-h: 354;
  --main-three-s: 100%;
  --main-three-l: 60%;
  --body: 240 10% 65%;
  --heading-color: 240 11% 96%;

  --syn-bg: #121214;
  --syn-surface: #1E1E24;
  --syn-surface-soft: #18181C;
  --syn-text: #F5F5F7;
  --syn-muted: #9E9EAF;
  --syn-red: #FF3344;
  --syn-red-dark: #E61F32;
  --syn-border: #303039;
  --syn-border-soft: rgba(245, 245, 247, 0.10);
  --syn-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

html {
  scroll-behavior: smooth;
  background: var(--syn-bg);
}

body {
  background: var(--syn-bg) !important;
  color: var(--syn-muted) !important;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 82% 6%, rgba(255, 51, 68, 0.09), transparent 24rem),
    radial-gradient(circle at 8% 45%, rgba(255, 51, 68, 0.035), transparent 28rem) !important;
}

::selection {
  color: #fff;
  background: var(--syn-red);
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--syn-bg); }
::-webkit-scrollbar-thumb {
  background: #3A3A43;
  border: 2px solid var(--syn-bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--syn-red); }

/* ---------- Core typography ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.text-main-two-600,
.text-neutral-950,
.text-neutral-1000,
.text-black {
  color: var(--syn-text) !important;
}

p, li, .accordion-body,
.text-neutral-500,
.text-neutral-600,
.text-neutral-700,
.text-neutral-800,
.text-neutral-900 {
  color: var(--syn-muted) !important;
}

.text-neutral-50,
.text-neutral-100,
.text-neutral-200,
.text-neutral-300,
.text-white,
.text--white {
  color: var(--syn-text) !important;
}

.text-main-600,
.text-main-700,
.text-main-800,
.hover-text-main-600:hover,
.hover-text-main-700:hover,
.hover-text-main-800:hover,
a:hover {
  color: var(--syn-red) !important;
}

/* ---------- Background utilities ---------- */
.bg-main-600,
.hover-bg-main-600:hover,
.group:hover .group-hover-bg-main-600 {
  background-color: var(--syn-red) !important;
}

.bg-main-two-600,
.bg-main-two-900,
.hover-bg-main-two-600:hover {
  background-color: var(--syn-surface) !important;
}

.bg-white,
.bg-neutral-50,
.bg-neutral-100,
.bg-neutral-200,
.bg-neutral,
.bg-white-01 {
  background-color: var(--syn-surface) !important;
}

.bg-main-100-gradient-one,
.bg-main-100-gradient-two,
.bg-main-100-gradient-three,
.bg-main-100-gradient-four {
  color: var(--syn-text) !important;
  background: linear-gradient(135deg, #27272E, var(--syn-surface)) !important;
  border: 1px solid var(--syn-border-soft);
}

.hover-bg-main-50:hover {
  background-color: rgba(255, 51, 68, 0.08) !important;
}

section:not(.banner-two),
.about-two,
.quote-two,
.features-two,
.counter-two,
.project-two,
.testimonials-two {
  background-color: transparent !important;
}

/* ---------- Borders and shadows ---------- */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
.border-neutral-100,
.border-neutral-200,
.border-neutral-300,
.border-neutral-1100 {
  border-color: var(--syn-border) !important;
}

.border-white { border-color: rgba(245, 245, 247, 0.28) !important; }
.border-main-600,
.hover-border-main-600:hover { border-color: var(--syn-red) !important; }

.common-shadow-two,
.common-shadow-four,
.service-two-item,
.project-two-item,
.testimonials-two-item,
.contact-box,
.accordion-item,
.bg-white-01 {
  box-shadow: var(--syn-shadow) !important;
}

/* ---------- Preloader, overlays and cursor ---------- */
.preloader.bg-white {
  background: var(--syn-bg) !important;
}

.overlay,
.side-overlay {
  background: rgba(6, 6, 8, 0.76) !important;
  backdrop-filter: blur(5px);
}

.cursor,
.dot { border-color: var(--syn-red) !important; }
.dot { background: var(--syn-red) !important; }

/* ---------- Logo placeholders ---------- */
.logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 154px;
  min-width: 132px;
  height: 54px;
  padding: 0 18px;
  color: var(--syn-muted);
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed #565661;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  transition: 0.25s ease;
}

.logo-placeholder:hover {
  color: var(--syn-text);
  border-color: var(--syn-red);
  background: rgba(255, 51, 68, 0.06);
}

.footer .logo-placeholder,
.mobile-menu .logo-placeholder {
  width: 138px;
  height: 50px;
}

.offcanvas-sidebar .logo-placeholder { width: 178px; }

/* ---------- Top contact bar ---------- */
.top-header-two .bg-main-600 {
  background: var(--syn-red) !important;
  color: #fff !important;
  box-shadow: 0 12px 34px rgba(255, 51, 68, 0.20);
}

.top-header-two .text-white,
.top-header-two .text-neutral-100,
.top-header-two a {
  color: #fff !important;
}

.top-header-two a:hover { color: #fff !important; opacity: 0.78; }

/* ---------- Header / navigation ---------- */
.bg-blur-three,
.bg-blur-four,
.bg-blur-five {
  background: rgba(30, 30, 36, 0.90) !important;
  border: 1px solid var(--syn-border-soft) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-middle > div > div {
  border-radius: 0 !important;
  border-bottom: 0 !important;
}

.header-two__nav {
  border-top: 1px solid rgba(245, 245, 247, 0.06) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

.header .nav-menu__link {
  position: relative;
  color: var(--syn-text) !important;
  letter-spacing: 0.01em;
}

.header .nav-menu__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 24px;
  height: 2px;
  background: var(--syn-red);
  transition: right 0.28s ease;
}

.header .nav-menu__link:hover { color: var(--syn-red) !important; }
.header .nav-menu__link:hover::after { right: 0; }

.header-two__nav .d-flex > .d-flex.justify-content-center.align-items-center {
  display: none !important;
}

.offcanvas-bar-icon img,
.header-middle img[src*="watch"],
.header-middle img[src*="envelop"],
.header-middle img[src*="phone"] {
  filter: brightness(0) invert(1);
}

.toggle-mobileMenu { color: var(--syn-text) !important; }

/* ---------- Mobile menu and off-canvas ---------- */
.mobile-menu.bg-white,
.offcanvas-sidebar.bg-white {
  background: #17171B !important;
  color: var(--syn-text) !important;
  border-color: var(--syn-border) !important;
  box-shadow: -28px 0 80px rgba(0, 0, 0, 0.48);
}

.mobile-menu .nav-menu__link {
  color: var(--syn-text) !important;
  border-bottom: 1px solid var(--syn-border-soft);
}

.mobile-menu .nav-menu__link:hover { color: var(--syn-red) !important; }

.mobile-menu .close-button,
.offcanvas-sidebar__close {
  color: var(--syn-text) !important;
  background: var(--syn-surface) !important;
  border-color: var(--syn-border) !important;
}

.mobile-menu .close-button:hover,
.offcanvas-sidebar__close:hover {
  color: #fff !important;
  background: var(--syn-red) !important;
  border-color: var(--syn-red) !important;
}

/* ---------- Hero ---------- */
.banner-two {
  background: var(--syn-bg) !important;
}

.banner-two .scale-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(18, 18, 20, 0.98) 0%, rgba(18, 18, 20, 0.83) 42%, rgba(18, 18, 20, 0.36) 100%),
    linear-gradient(180deg, rgba(18, 18, 20, 0.18) 35%, var(--syn-bg) 100%);
}

.banner-two .container {
  position: relative;
  z-index: 2;
}

.banner-two h2 span {
  text-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
}

.banner-two .text-stroke-white {
  color: transparent !important;
  -webkit-text-stroke-color: rgba(245, 245, 247, 0.72) !important;
}

.banner-two .bg-blur-five {
  border-left: 3px solid var(--syn-red) !important;
  border-radius: 0 14px 14px 0 !important;
}

.banner-two .swiper-pagination-bullet,
.banner-two .pagination-style-two .swiper-pagination-bullet {
  background: var(--syn-red) !important;
}

/* ---------- Brand slider ---------- */
.brand-two-slider-wrapper {
  background: #17171B;
  border-top: 1px solid var(--syn-border-soft);
  border-bottom: 1px solid var(--syn-border-soft);
}

.brand-two-slider .swiper-slide {
  border-color: var(--syn-border) !important;
  background: #17171B;
}

.brand-two-slider img {
  border-radius: 6px;
  opacity: 0.90;
  transition: 0.3s ease;
}

.brand-two-slider .swiper-slide:hover img {
  opacity: 1;
  transform: scale(1.035);
}

/* ---------- Cards, content blocks and images ---------- */
.service-two-item,
.project-two-item,
.testimonials-two-item,
.contact-box,
.accordion-item,
.form-control,
input,
textarea,
select,
.rounded-card {
  color: var(--syn-text) !important;
  background: var(--syn-surface) !important;
  border-color: var(--syn-border) !important;
}

.service-two-item,
.project-two-item,
.testimonials-two-item,
.contact-box,
.accordion-item,
.bg-white,
.bg-white-01,
.group.tw-py-7 {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-two-item:hover,
.project-two-item:hover,
.testimonials-two-item:hover,
.contact-box:hover,
.bg-white-01:hover,
.group.tw-py-7:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 51, 68, 0.55) !important;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.42) !important;
}

[class*="tw-rounded"],
.service-two-item,
.project-two-item,
.testimonials-two-item,
.accordion-item,
.contact-box {
  border-radius: 14px !important;
}

.about-two-thumbs .bg-white,
.testimonials-two .bg-white,
section.bg-neutral-50 .bg-white {
  border: 1px solid var(--syn-border-soft);
}

.about-two-thumbs img,
.project-two-item img,
.testimonials-two img,
.contact-box img {
  filter: saturate(0.90) contrast(1.04);
}

/* Icon circles */
.transport-way-item__icon,
.contact-box .bg-main-600,
.quote-two .bg-main-600 {
  box-shadow: 0 14px 30px rgba(255, 51, 68, 0.22);
}

.transport-way-item__icon.bg-main-two-600 {
  background: var(--syn-red) !important;
}

.transport-way-item__icon img,
.bg-main-600 > img {
  filter: brightness(0) invert(1);
}

/* ---------- Quote / dark feature sections ---------- */
.quote-two,
.order,
.faq {
  position: relative;
}

.quote-two::before,
.order::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 51, 68, 0.05), transparent 42%);
}

/* ---------- Buttons and links ---------- */
.btn-main,
.btn-main-two,
button[type="submit"] {
  min-height: 52px;
  color: #fff !important;
  background: var(--syn-red) !important;
  border: 1px solid var(--syn-red) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 34px rgba(255, 51, 68, 0.24) !important;
  transition: 0.25s ease !important;
}

.btn-main .button__label,
.btn-main-two .button__label,
button[type="submit"] .button__label {
  color: #fff !important;
}

.btn-main:hover,
.btn-main-two:hover,
button[type="submit"]:hover {
  color: #fff !important;
  background: var(--syn-red-dark) !important;
  border-color: var(--syn-red-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(255, 51, 68, 0.34) !important;
}

.button__flair { background: rgba(255, 255, 255, 0.13) !important; }

/* ---------- Forms ---------- */
.form-control,
input,
textarea,
select {
  min-height: 52px;
  border-radius: 8px !important;
  box-shadow: none !important;
}

textarea { min-height: 140px; }

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  background: #222228 !important;
  border-color: var(--syn-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 51, 68, 0.12) !important;
}

input::placeholder,
textarea::placeholder {
  color: #7D7D8B !important;
}

/* ---------- Accordion ---------- */
.accordion-button {
  color: var(--syn-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) { color: var(--syn-red) !important; }
.accordion-button::after { filter: brightness(0) invert(1); opacity: 0.75; }

/* ---------- Footer ---------- */
.footer,
.footer.bg-main-two-900 {
  background: #0C0C0F !important;
  border-top: 1px solid var(--syn-border-soft);
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 { color: var(--syn-text) !important; }

.footer p,
.footer li { color: var(--syn-muted) !important; }
.footer a { color: #D6D6DD !important; }
.footer a:hover { color: var(--syn-red) !important; }

.marquee h1 {
  color: rgba(245, 245, 247, 0.07) !important;
  -webkit-text-stroke-color: rgba(245, 245, 247, 0.20) !important;
}

/* ---------- Map and scroll-to-top ---------- */
iframe {
  overflow: hidden !important;
  border: 1px solid var(--syn-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--syn-shadow);
  filter: grayscale(0.20) contrast(1.02);
}

.progress-wrap {
  color: var(--syn-red) !important;
  background: var(--syn-surface) !important;
  border: 1px solid var(--syn-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);
}

.progress-wrap path { stroke: var(--syn-red) !important; }

/* ---------- Responsive refinements ---------- */
@media (max-width: 1199px) {
  .header-middle > div > div { padding-left: 28px !important; padding-right: 28px !important; }
}

@media (max-width: 991px) {
  .top-header-two { display: none; }
  .header-middle > div > div {
    padding: 14px 18px !important;
    border-radius: 0 !important;
  }
  .logo-placeholder { width: 126px; height: 46px; }
  .banner-two h2 { font-size: clamp(52px, 14vw, 92px) !important; }
  .banner-two .tw-pt-332-px { padding-top: 178px !important; }
  .banner-two .tw-pb-132-px { padding-bottom: 80px !important; }
}

@media (max-width: 575px) {
  .header-middle span[style*="font-size: 32px"] { font-size: 20px !important; }
  .banner-two h2 span { padding-left: 0 !important; }
  .banner-two .bg-blur-five { margin-top: 28px !important; }
  .btn-main,
  .btn-main-two,
  button[type="submit"] { min-height: 48px; }
}

/* ================================================================
   Synestia Logistics — contrast and hero refinements
   ================================================================ */

/* Remove the old dark rectangle from the hero while preserving animation/content. */
.banner-two .hero-copy-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.banner-two .hero-copy-wrapper::before,
.banner-two .hero-copy-wrapper::after {
  display: none !important;
}

.banner-two .hero-copy-wrapper h2 {
  max-width: 1120px;
  margin: 0;
  font-size: clamp(72px, 9vw, 150px) !important;
  line-height: .88;
  letter-spacing: -0.055em;
}

.banner-two .hero-description {
  position: relative;
  color: var(--syn-text) !important;
  background: rgba(18, 18, 20, 0.34) !important;
  border: 0 !important;
  border-left: 3px solid var(--syn-red) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.banner-two .hero-description p {
  margin: 0;
  color: #ECECF1 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

/* Make the quote section consistently dark instead of white-on-white. */
.quote-two {
  isolation: isolate;
  background: #151519 !important;
  border-top: 1px solid var(--syn-border-soft);
  border-bottom: 1px solid var(--syn-border-soft);
}

.quote-two .quote-two__intro {
  background:
    radial-gradient(circle at 15% 30%, rgba(255, 51, 68, 0.10), transparent 28rem),
    linear-gradient(145deg, #151519 0%, #19191E 100%) !important;
}

.quote-two .quote-two__intro > img[src*="quote-two-bg"] {
  display: none !important;
}

.quote-two .quote-two__intro > img[src*="plan-location"],
.quote-two .quote-two__intro > img[src*="curve-arrow"] {
  opacity: .20;
  filter: grayscale(1) brightness(1.8);
}

.quote-two .quote-two__intro h2,
.quote-two .quote-two__intro h3,
.quote-two .quote-two__intro h4,
.quote-two .quote-two__intro h5,
.quote-two .quote-two__intro h6 {
  color: var(--syn-text) !important;
}

.quote-two .quote-two__intro p {
  color: var(--syn-muted) !important;
}

.quote-form-shell {
  overflow: hidden;
  padding: 10px !important;
  background: #0F0F12 !important;
  border: 1px solid #34343D !important;
  box-shadow: 0 28px 75px rgba(0,0,0,.42) !important;
}

.quote-form-panel {
  color: var(--syn-text) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 55%),
    #1E1E24 !important;
  border: 1px solid rgba(245,245,247,.08) !important;
  border-radius: 12px !important;
}

.quote-form-panel h4,
.quote-form-panel label,
.quote-form-panel .form-check-label,
.quote-form-panel p,
.quote-form-panel strong {
  color: var(--syn-text) !important;
}

.quote-form-panel p {
  color: #B8B8C4 !important;
}

.quote-form-panel a {
  color: var(--syn-red) !important;
}

.quote-form-panel input:not([type="checkbox"]),
.quote-form-panel select,
.quote-form-panel textarea {
  color: var(--syn-text) !important;
  background: #121216 !important;
  border: 1px solid #3A3A44 !important;
}

.quote-form-panel input:not([type="checkbox"]):focus,
.quote-form-panel select:focus,
.quote-form-panel textarea:focus {
  background: #17171C !important;
  border-color: var(--syn-red) !important;
}

.quote-form-panel input::placeholder,
.quote-form-panel textarea::placeholder,
.quote-form-panel select {
  color: #858593 !important;
}

.quote-form-panel select option {
  color: var(--syn-text);
  background: #17171C;
}

.quote-form-panel .form-check-input {
  min-height: 18px !important;
  width: 18px;
  height: 18px;
  background-color: #121216 !important;
  border: 1px solid #555561 !important;
}

.quote-form-panel .form-check-input:checked {
  background-color: var(--syn-red) !important;
  border-color: var(--syn-red) !important;
}

.quote-form-panel button[type="submit"] {
  color: #fff !important;
  background: var(--syn-red) !important;
  border-color: var(--syn-red) !important;
  box-shadow: 0 14px 34px rgba(255, 51, 68, .25) !important;
}

.quote-form-panel button[type="submit"]:hover {
  background: var(--syn-red-dark) !important;
  border-color: var(--syn-red-dark) !important;
}

@media (max-width: 991px) {
  .banner-two .hero-copy-wrapper h2 {
    font-size: clamp(58px, 13vw, 92px) !important;
  }

  .banner-two .hero-description {
    margin-left: 0 !important;
    max-width: 620px;
  }

  .quote-two .quote-two__intro {
    padding-bottom: 80px;
  }
}

@media (max-width: 575px) {
  .banner-two .hero-description {
    padding: 18px 20px !important;
    background: rgba(18, 18, 20, .56) !important;
  }

  .quote-form-panel {
    padding: 34px 22px !important;
  }
}

/* Keep the hero copy directly on the image with no dark text box. */
.banner-two .hero-description {
  margin-left: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}