:root {
    --wdtPrimaryColor: #bb9d7b;
}

.breadcrumb-banner {
    position: relative;
    background: url('/assets/images/banner.jpg') no-repeat center center/cover; /* Replace with actual image path */
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.breadcrumb-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
}

.breadcrumb-content {
    position: relative;
    color: #fff;
    z-index: 1;
}

.breadcrumb-content h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fad565;
}

.breadcrumb-links {
    font-size: 14px;
}

.breadcrumb-links a {
    color: #fff;
    text-decoration: none;
    margin: 0 5px;
}

.breadcrumb-links a:hover {
    text-decoration: underline;
}

.breadcrumb-links span {
    color: #ccc;
    margin: 0 5px;
}

.breadcrumb-links .current {
    color:#ccc;           /* Gold or highlight color */
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 1.05em;
    text-transform: uppercase;
    padding-left: 6px;
}
.shipment-section {
  padding: 80px 20px 40px;
}
.shipment-subtitle {
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  color: #aaa;
  margin-bottom: 10px;
  text-align: center;

}
.shipment-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
}

/* Track Area Container */
.track-area {
  position: relative;
  max-width: 600px;
  margin: 0 auto 80px;
  padding: 0 20px;
  text-align: center;
}

/* Description text */
.track-description {
  font-size: 1rem;
  line-height: 1.5;
  color: #ccc;
  margin-bottom: 40px;
}

/* Form */
.track-form {
  position: relative;
  z-index: 1;

}

/* Each field group */
.field-group {
  margin-bottom: 40px;
}
.field-group label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.field-group input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid #444;
  padding: 10px 0;
  color: #fff;
  font-size: 1rem;
  outline: none;
  margin: 0 auto; /* center input if it's block/inline-block */
  display: block; /* make sure it behaves like a block element */
}
/* Horizontal line under input */
.field-group hr {
  border: none;
  height: 1px;
  background: #444;
  margin-top: 20px;
}

/* Vertical center line (full height of .track-area) */

/* TRACK Button */
 .track-button {
  /* margin-top: 20px; */
  width: 130px !important;
  height: 130px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: block !important;
  margin: 60px auto 0 auto !important;
  background: #fad565 !important ;
  color: black  !important;
  font-size: 1.1em;
  font-weight: var(--wdtFontWeight_Ext) !important;
  letter-spacing: 1px !important;
  border: 1px solid var(--wdtPrimaryColor) !important;
  box-shadow: 0 2px 12px #fad565;
  transition: background 0.3s, transform 0.2s;
  text-transform: uppercase;
 }
.track-button:hover {
    background: transparent !important;      /* Make background transparent */
    color: var(--wdtPrimaryColor) !important; /* Change text color to match border */
    border: 1px solid var(--wdtPrimaryColor) !important;
    box-shadow: 0 2px 12px #fad565 !important;
    transition: background 0.3s, color 0.3s, transform 0.2s;
}

/* Responsive */
@media (max-width: 480px) {
  .center-line { display: none; }
}
.navbars {
    width: 100%; /* Ensure the navbar spans the full width */
    overflow: hidden;
    padding: 15px;
    color: white;
    margin-top: 50px;
    position: relative;
    background-color: black;
}

.navbars::before,
.navbars::after {
    content: '';
    display: block;
    height: 2px; /* Thickness of the line */
    background-color:#fad565; /* Color of the line */
    width: 100%;
    position: absolute;
    left: 0;
}

.navbars::before {
    top: 0; /* Line above the navbar */
}

.navbars::after {
    bottom: 0; /* Line below the navbar */
}

.horizontal-scroll {
    display: inline-block;
    white-space: nowrap;
    animation: scroll 15s linear infinite;
    animation: scroll 15s linear infinite;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    white-space: nowrap;
}
li {
    display: inline-block;
    margin-right: 10px;
    font-size: 22px;
}

a {
    text-decoration: none;
    color: white;
}

.divider {
    color: white;
    font-size: 24px;
    margin-right: 10px;
}
@keyframes scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}