.crane-image {
 position: absolute;
 top: -20px;
 height: 450px;
 width: auto;
 z-index: 1;
}

.crane-left {
 left: 1vw;
}

.crane-right {
 right: 1vw;
}

.search-form input::placeholder {
 color: #9ca3af;
}

.search-form input:focus {
 border-color: var(--brand-blue);
 box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

.search-form button:hover {
 background-color: var(--brand-blue-dark);
}

.feature-item:hover {
 transform: translateY(-3px);
 box-shadow: 0 4px 10px 0 var(--shadow-color-light);
}

@media (max-width: 1200px) {
 .crane-image {
  display: none;
 }
}

.inline-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background-color: var(--text-light);
 color: var(--bg-dark);
 padding: 4px 14px 4px 10px;
 border-radius: 999px;
 font-weight: 500;
 font-size: 16px;
 position: relative;
 top: -2px;
}

.inline-badge svg {
 width: 14px;
 height: 14px;
}

.card-description li::before {
 content: "•";
 position: absolute;
 left: 0;
 color: var(--accent-purple);
 font-size: 24px;
 line-height: 1;
}

@media (max-width: 992px) {
 .card-visual-cost {
  order: 1;
 }
 .card-description[data-feature="cost-tracking"] {
  /* Use data-attributes for more robust selection */
  order: 2;
 }
 .card-visual-alerts {
  order: 3;
 }
 .card-description[data-feature="alerts"] {
  order: 4;
 }
}

@media (max-width: 480px) {

 .inline-badge {
  padding: 4px 10px 4px 8px;
  font-size: 14px;
 }
}

:before,
:after {
 --tw-content: "";
}

:disabled {
 cursor: default;
}

.section-header .animated-containers {
 display: none;
}

@media (min-width: 1200px) {
 .section-header .animated-containers {
  display: block;
 }
}

.section-header .animated-containers > .animated-container-left,
.section-header .animated-containers > .animated-container-right {
 position: absolute;
 -webkit-user-select: none;
 -moz-user-select: none;
 user-select: none;
 animation: up-and-down 6s ease infinite;
}

.section-header .animated-containers > .animated-container-left:before,
.section-header .animated-containers > .animated-container-right:before {
 content: "";
 display: block;
 height: 450px;
 width: 8px;
}

@media (min-width: 1400px) {
 .section-header .animated-containers > .animated-container-left:before,
 .section-header .animated-containers > .animated-container-right:before {
  width: 10px;
 }
}

.section-header .animated-containers > .animated-container-left:before,
.section-header .animated-containers > .animated-container-right:before {
 position: absolute;
 border-left-width: 1px;
 border-right-width: 1px;
 border-color: rgb(97 114 243 / var(--tw-border-opacity, 1));
 --tw-border-opacity: 0.3;
}

.section-header
 .animated-containers
 > .animated-container-left.animated-container-left {
 top: 200px;
 left: -1rem;
 height: 203px;
}

.section-header
 .animated-containers
 > .animated-container-left.animated-container-left
 img {
 z-index: -1;
 width: 175px;
}

@media (min-width: 1400px) {
 .section-header
  .animated-containers
  > .animated-container-left.animated-container-left
  img {
  width: 200px;
 }
}

.section-header
 .animated-containers
 > .animated-container-left.animated-container-left:before {
 bottom: 200px;
 left: 50%;
}

.section-header
 .animated-containers
 > .animated-container-right.animated-container-right {
 top: 200px;
 right: 0.5rem;
 height: 164px;
 animation-delay: 0.6s;
}

.section-header
 .animated-containers
 > .animated-container-right.animated-container-right
 img {
 z-index: -1;
 width: 155px;
}

@media (min-width: 1400px) {
 .section-header
  .animated-containers
  > .animated-container-right.animated-container-right
  img {
  width: 180px;
 }
}

.section-header
 .animated-containers
 > .animated-container-right.animated-container-right:before {
 bottom: 160px;
 left: calc(50% + 2.75px);
}

.ctt-cta-button:hover {
 background-color: #3a5ae0;
}

.carriers-section {
 font-family: "Inter", sans-serif;
 background-color: #ffffff;
 padding: 80px 20px; /* Provides vertical and horizontal spacing */
 display: flex;
 justify-content: center;
 width: 100%;
}

.carriers-section__container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 max-width: 1280px;
 width: 100%;
 gap: 60px;
}

.carriers-section__text-content {
 max-width: 440px;
 flex-shrink: 0;
}

.carriers-section__sub-heading {
 color: #437ef7;
 font-size: 16px;
 font-weight: 600;
 margin-bottom: 12px;
}

.carriers-section__main-heading {
 font-size: 42px;
 font-weight: 700;
 color: #18191f;
 line-height: 1.25;
 margin-bottom: 20px;
}

.carriers-section__highlight {
 color: #437ef7;
}

.carriers-section__description {
 font-size: 18px;
 color: #5f6d7e;
 line-height: 1.6;
 margin-bottom: 32px;
}

.carriers-section__cta-button {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background-color: #ffffff;
 border: 1px solid #eaebf0;
 border-radius: 8px;
 padding: 14px 22px;
 font-size: 16px;
 font-weight: 500;
 color: #364253;
 cursor: pointer;
 box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
 transition: all 0.2s ease;
}

.carriers-section__cta-button:hover {
 box-shadow: 0 4px 8px rgba(16, 24, 40, 0.08);
 transform: translateY(-1px);
}

.carriers-section__cta-arrow {
 font-size: 20px;
 line-height: 1;
}

.carriers-section__logo-marquee {
 flex-grow: 1;
 max-width: 680px;
 display: flex;
 flex-direction: column;
 gap: 24px;
 position: relative;
 overflow: hidden; /* This hides the non-animated parts */
 -webkit-mask-image: linear-gradient(
  to right,
  transparent,
  black 10%,
  black 90%,
  transparent
 );
 mask-image: linear-gradient(
  to right,
  transparent,
  black 10%,
  black 90%,
  transparent
 );
}

.carriers-section__marquee-track {
 display: flex;
 flex-shrink: 0;
 gap: 24px;
 will-change: transform;
}

.carriers-section__logo-card {
 width: 200px;
 height: 80px;
 flex-shrink: 0;
 background-color: #ffffff;
 border-radius: 12px;
 box-shadow: 0 8px 25px rgba(24, 25, 31, 0.06);
 display: flex;
 align-items: center;
 justify-content: flex-start;
 padding: 0 24px;
 gap: 16px;
}

.carriers-section__logo-image {
 max-height: 36px;
 max-width: 50px;
 object-fit: contain;
}

.carriers-section__logo-name {
 font-size: 14px;
 font-weight: 600;
 color: #18191f;
 white-space: nowrap;
}

.carriers-section__marquee-track--scroll-right {
 animation: carriers-scroll-right 45s linear infinite;
}

.carriers-section__marquee-track--scroll-left {
 animation: carriers-scroll-left 50s linear infinite;
}

.carriers-section__marquee-track--scroll-right-fast {
 animation: carriers-scroll-right 40s linear infinite;
}

@media (max-width: 1024px) {
 .carriers-section__container {
  flex-direction: column;
  text-align: center;
  gap: 56px;
 }

 .carriers-section__text-content {
  max-width: 600px;
 }

 .carriers-section__logo-marquee {
  width: 100%;
  max-width: none;
 }
}

@media (max-width: 767px) {
 .carriers-section {
  padding: 60px 15px;
 }

 .carriers-section__main-heading {
  font-size: 36px;
 }

 .carriers-section__description {
  font-size: 16px;
 }
 .carriers-section__logo-card {
  width: 180px;
  height: 70px;
  padding: 0 16px;
 }

 .carriers-section__marquee-track {
  gap: 16px;
 }

 .carriers-section__logo-marquee {
  gap: 16px;
 }
}

.marquee-wrapper:hover .marquee-track,
.marquee-wrapper:focus-within .marquee-track {
 animation-play-state: paused;
}

.marquee-item:hover {
 transform: scale(1.05);
}

.sgo-th-carrier,
.sgo-th-shipsgo {
 text-align: center;
}

.sgo-logo-ships {
 color: #4285f4;
}

.sgo-logo-g {
 color: #ea4335;
}

.sgo-logo-o {
 color: #fbbc05;
}

.sgo-new-badge {
 display: inline-block;
 background-color: #e3f2e1;
 color: #4caf50;
 padding: 3px 6px;
 border-radius: 4px;
 font-size: 10px;
 font-weight: 700;
 vertical-align: middle;
 margin-left: 8px;
 line-height: 1;
}

.sgo-icon-question {
 background-color: #fef3d7;
 color: #f3a800;
 font-size: 15px;
 font-weight: 700;
}

.sgo-icon-dot {
 width: 8px;
 height: 8px;
 background-color: #ced4da;
}

.sgo-icon-available::before {
 content: "✅ Available";
 color: #2e7d32;
}

.sgo-icon-limited::before {
 content: "⚠️ Limited";
 color: #f9a825;
}

.sgo-icon-unavailable::before {
 content: "❌ Not Available";
 color: #c62828;
}

.faq-item:hover {
 transform: translateY(-4px);
 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
 border-color: rgba(79, 70, 229, 0.2);
}

.faq-item.active {
 border-color: #4f46e5;
 box-shadow: 0 8px 30px rgba(79, 70, 229, 0.15);
}

.faq-question:hover {
 background: rgba(79, 70, 229, 0.02);
}

.faq-item.active .faq-toggle {
 background: #4f46e5;
 color: white;
 transform: rotate(180deg);
}

.faq-item.active .faq-answer {
 max-height: 500px;
}

.faq-cta::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: url("https://cdn.prod.website-files.com/6511240890b712e01083f24b/6511240890b712e01083f366_dots-4-hero-v3-startech-x-template.svg")
  no-repeat;
 background-size: 200px;
 background-position: top right;
 opacity: 0.1;
 z-index: 1;
}

.faq-btn.primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
}

.faq-btn.secondary {
 background: rgba(255, 255, 255, 0.1);
 color: white;
 border: 1px solid rgba(255, 255, 255, 0.2);
}

.faq-btn.secondary:hover {
 background: rgba(255, 255, 255, 0.2);
 transform: translateY(-2px);
}

@media (max-width: 768px) {

 .sgo-features-table * {
  font-size: 16px !important;
}

}