:root {
  --staport-navy: #062849;
  --staport-navy-deep: #031b32;
  --staport-blue: #00a9e0;
  --staport-sky: #eaf5fa;
}

body {
  --token-151b6ede-2fcd-46d0-a91d-6becbd0b97ff: var(--staport-navy-deep) !important;
  --token-3c660929-1400-41ef-a20f-b6ff9add4979: var(--staport-sky) !important;
  --token-48c9896c-8a9a-4683-9b67-2df562014458: #52667a !important;
  --token-5ac924c4-6ad2-4c5c-bef6-35e779f2327b: #eef6f9 !important;
  --token-4e85eba0-784b-48ce-a777-09c47f84a549: #04172b !important;
  color: var(--staport-navy-deep);
}

/* The static Framer export keeps entrance targets transparent until its
   runtime hydrates. Keep the server-rendered content available even when
   that runtime is delayed or unavailable. */
#main [style*="will-change"][style*="opacity:0"]:not(.staport-motion-item),
#main [style*="will-change"][style*="opacity: 0"]:not(.staport-motion-item) {
  opacity: 1 !important;
  transform: none !important;
}

::selection {
  color: #fff;
  background: var(--staport-blue);
}

#__framer-badge-container {
  display: none !important;
}

/* Keep the original Framer hero structure and replace only its media layer. */
.framer-qpMMy .framer-1fplnsm-container {
  background: linear-gradient(90deg, rgba(3, 20, 39, .25), rgba(3, 20, 39, .02)), url("../images/staport-hero.webp") center / cover no-repeat !important;
}

.framer-qpMMy .framer-1fplnsm-container video {
  opacity: 0 !important;
}

.framer-qpMMy .framer-i2sbxn {
  background: linear-gradient(90deg, rgba(3, 20, 39, .88) 0%, rgba(3, 20, 39, .58) 43%, rgba(3, 20, 39, .12) 100%) !important;
}

header[data-framer-name^="Navbar"] {
  background: linear-gradient(180deg, rgba(3, 20, 39, .86), rgba(3, 20, 39, 0)) !important;
}

header img[alt="White Main Logo"],
footer img[alt="Footer Logo"] {
  object-fit: contain !important;
}

header img[data-staport-original-alt="White Main Logo"],
footer img[data-staport-original-alt="Footer Logo"] {
  filter: brightness(0) invert(1) !important;
}

header img[data-staport-original-alt$="Main Logo"],
footer img[data-staport-original-alt="Footer Logo"] {
  object-fit: contain !important;
}

header .framer-rf1mmk {
  width: 132px !important;
  height: 60px !important;
}

footer .framer-50ffp0 {
  width: 164px !important;
  height: 75px !important;
}

footer .framer-1836ug4 {
  width: 190px !important;
  height: 190px !important;
  padding: 20px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

footer img[data-staport-original-alt="City Svgrepo"] {
  object-fit: contain !important;
  transform: scale(1.12) !important;
}

img[alt^="Brand Logo"] {
  object-fit: contain !important;
  filter: none !important;
}

img[data-staport-original-alt^="Brand Logo"] {
  object-fit: contain !important;
  transform: scale(1.18) !important;
  transition: transform .35s ease, filter .35s ease !important;
}

/* The original partner artwork includes generous white margins. Give each
   mark a larger, consistent stage without changing the carousel structure. */
.framer-1egyo6x [data-framer-name="Cover Image"] {
  height: 88px !important;
  min-height: 88px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

.framer-1egyo6x [data-framer-name="Icons"]:hover img[data-staport-original-alt^="Brand Logo"] {
  transform: scale(1.28) !important;
  filter: saturate(1.08) contrast(1.04);
}

/* Framer's runtime may not hydrate a static export immediately. These
   classes provide the same directional scroll reveals independently. */
#main [style].staport-motion-item {
  opacity: 0 !important;
  transform: translate3d(0, 44px, 0) !important;
  transition: opacity .72s cubic-bezier(.22, 1, .36, 1) var(--staport-delay, 0ms),
              transform .82s cubic-bezier(.22, 1, .36, 1) var(--staport-delay, 0ms) !important;
}

#main [style].staport-motion-item.staport-from-left {
  transform: translate3d(-44px, 0, 0) !important;
}

#main [style].staport-motion-item.staport-from-right {
  transform: translate3d(44px, 0, 0) !important;
}

#main [style].staport-motion-item.staport-from-top {
  transform: translate3d(0, -36px, 0) !important;
}

#main [style].staport-motion-item.staport-in-view {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

header[data-framer-name^="Navbar"].staport-header-motion {
  animation: staport-header-in .72s cubic-bezier(.22, 1, .36, 1) both;
}

.framer-1egyo6x.staport-partners-motion [data-framer-name="Icons"] {
  animation: staport-logo-float 5s ease-in-out infinite;
  animation-delay: calc(var(--staport-logo-index, 0) * -700ms);
}

@keyframes staport-header-in {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes staport-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

[data-framer-name="Commitment Thumb"] img,
img[alt^="Project Thumb"],
img[alt^="Testimonials Image"],
img[alt^="Blog Thumb"],
img[alt="Cta Image"] {
  object-fit: cover !important;
}

[data-framer-name="Testimonials"],
[data-framer-name="Our Service"] {
  --staport-accent: var(--staport-blue);
}

a[href="./404"],
a[href$="/404"] {
  display: none !important;
}

.staport-credit {
  color: #96a4b1 !important;
}

@media (max-width: 809.98px) {
  .framer-qpMMy .framer-i2sbxn {
    background: linear-gradient(180deg, rgba(3, 20, 39, .82), rgba(3, 20, 39, .48)) !important;
  }

  .framer-qpMMy .framer-1fplnsm-container {
    background-position: 62% center !important;
  }

  .framer-1egyo6x [data-framer-name="Cover Image"] {
    height: 68px !important;
    min-height: 68px !important;
  }

  footer .framer-1836ug4 {
    width: 150px !important;
    height: 150px !important;
    padding: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main .staport-motion-item,
  header[data-framer-name^="Navbar"].staport-header-motion,
  .framer-1egyo6x.staport-partners-motion [data-framer-name="Icons"] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}