/* Project overrides — loaded after the Webflow theme so these win.
   Each rule documents the live-parity bug it fixes. */

/* Bug 1: the responsive-image JS (toggleLayananKamiResponsiveImg) hides the
   mobile image wrapper on load, but runs after first paint, so the mobile
   image flashes briefly. Hide it by default at desktop widths to match the
   JS end state and kill the flash. */
@media (min-width: 769px) {
  .section-layanan-kami-img-mobile-wrapper,
  .section-model-kerjasama-img-mobile-wrapper {
    display: none !important;
  }
}

/* Bug: Model Kerjasama duplicate image at mobile. Webflow's theme hides the
   desktop image wrapper at mobile for the Layanan section
   (@media max-width:767px { .section-layanan-kami-img-desktop-wrapper{display:none} })
   but the equivalent rule for the Model Kerjasama section was never exported,
   so at mobile BOTH its desktop wrapper and mobile wrapper render — the image
   shows twice and pushes the layout. Mirror the Layanan behaviour: hide the
   desktop wrapper below the breakpoint so only the mobile image shows. Desktop
   (>=769px) is unaffected. Breakpoint is 768px (not 767) to exactly meet the
   mobile-wrapper hide at min-width:769px — otherwise both wrappers show at 768. */
@media (max-width: 768px) {
  .section-model-kerjasama-img-desktop-wrapper {
    display: none !important;
  }

  /* The section is a centered flex column at mobile (align-items:center) and
     neither the tab-content-container nor the tab-content carries width:100%,
     so the image wrapper shrink-wraps instead of filling the column. On the
     live site Webflow's runtime sets these full-width; that JS wasn't ported,
     so force it in CSS. Also drop the fixed 200px crop for the natural image
     aspect, matching the reference (full-width, uncropped). */
  .section-model-kerjasama--tab-content-container,
  .section-model-kerjasama--tab-content,
  .section-model-kerjasama--tab-content--active {
    width: 100% !important;
  }
  /* The pane is display:grid with grid-template-columns:.8fr 1fr, so the
     details column only fills the .8fr track (~44%, the "half-width" look) —
     even with the desktop image hidden the empty 1fr track is still reserved.
     Force a single-column flex stack so details fills the full width. Scope
     to the ACTIVE pane only — the base .section-model-kerjasama--tab-content
     class is on every pane and inactive ones rely on an inline display:none;
     an !important display here would override that inline rule and show them all. */
  .section-model-kerjasama--tab-content--active {
    display: flex !important;
    flex-direction: column !important;
  }
  .section-model-kerjasama-img-mobile-wrapper {
    width: 100% !important;
    height: auto !important;
  }
  .section-model-kerjasama-img-mobile {
    height: auto !important;
  }
}

/* Breathing room above + below the reCAPTCHA checkbox on the lead forms
   (contact-us + secure-your-slot) so it isn't cramped against the terms row
   and the submit button. */
.secure-slot-recaptcha,
.contact-us-recaptcha-wrap {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* Bug 4: footer social icons. The theme sets justify-content:space-around on
   .div-block-338 but never sets display:flex, so the icons render as wrapping
   inline-blocks. Make it a flex row so they stay on one line. */
.div-block-338 {
  display: flex;
  align-items: center;
}

/* Scroll-down arrow. Live IX2 loop: the arrow drops down fast, then drifts
   back to the top slowly. Encode the speed split in the keyframe percentages
   (down occupies 0–22% of the cycle, the slow rise the remaining 78%). */
.scroll-icon {
  animation: scrollIconDownUp 2s ease-in-out infinite;
}
@keyframes scrollIconDownUp {
  0% {
    transform: translateY(0);
  }
  22% {
    transform: translateY(9px); /* down — fast */
  }
  100% {
    transform: translateY(0); /* back to top — slow */
  }
}

/* Model Kerjasama tab switch. Live fades each pane in/out on switch via a
   Webflow IX2 interaction. With native React the active pane flips from
   display:none, which restarts this fade so the new pane eases in. */
.section-model-kerjasama--tab-content--active {
  animation: modelTabFade 0.45s ease;
}
@keyframes modelTabFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* "Trusted by Industry Leaders" last row. The grid is 8 columns; the rebuild
   flattened all logos into direct grid items, so the 5-logo orphan row hugs
   the left. Wrap them in a full-width row that centers the group while keeping
   the 1/8 per-item column width, matching the rhythm of the rows above. */
.section-trusted-by-industry-leaders--grid-lastrow {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
/* Each item keeps a full 1/8 column box (override the 78px cap) so the logos
   sit on the same column rhythm as the rows above and keep their gaps; the
   logo itself stays centered within the box. */
.section-trusted-by-industry-leaders--grid-lastrow
  .section-trusted-by-industry-leaders--grid-item {
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

/* Portfolio hero (/our-works) entrance. Live runs a Webflow IX2 "page load"
   fade on the first section; replicate it so the hero eases in when the page
   is opened from elsewhere. */
.portfolio-hero {
  animation: portfolioHeroFadeIn 0.8s ease both;
}
@keyframes portfolioHeroFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Portfolio card hover overlay (/our-works). Live reveals the teal detail
   overlay via a Webflow IX2 hover interaction that doesn't fire on a
   late-loaded runtime. Drive it with CSS instead. The overlay is kept in the
   layout (position:absolute over the image) and hidden via opacity/visibility
   — NOT display:none, which would make the fade pop instantly — so it can
   actually fade in on hover. The logo block additionally slides up from a 25px
   offset (a separate, slower entrance). */
.portfolio-item-hover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.portfolio-item-hover .div-block-100 {
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.45s ease;
}
.portfolio-block-link:hover .portfolio-item-hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.portfolio-block-link:hover .portfolio-item-hover .div-block-100 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* The overlay logo must read as solid white on the teal background. Source
   logos are a mix of full-colour and white PNGs (the live "white" variants
   aren't all available), so force every one to a clean white silhouette. */
.portfolio-item-hover .image-57-copy {
  filter: brightness(0) invert(1);
}

/* Model Kerja Sama sliding tabs (/services). Live widens the tab strip to
   `calc(100% + 160px)` (= 1300px inside the 1140 container) so the content
   reads 1300×695. In the rebuild the page stylesheet's media rule loses the
   cascade to webflow's base `.rv-sliding-tabs{width:100%}`, leaving it at 1140;
   re-assert it with a higher-specificity selector so order no longer matters. */
@media (min-width: 479px) {
  .rv-services-engagement .rv-sliding-tabs {
    width: calc(100% + 160px);
  }
}

/* Services hero image (/services). Rises in from below on page load/reload
   (driven by this keyframe, not the scroll Reveal — the hero is above the
   fold, so an on-load entrance reads better). */
.rv-hero.services .services-hero-right.services-main {
  animation: servicesHeroRise 0.9s ease both;
}
@keyframes servicesHeroRise {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Portfolio pagination arrows. The chevron inherits webflow's #333 via
   currentColor and renders thin/grey; live draws them teal and bolder.
   webflow.css also styles .w-pagination-previous/next as boxy buttons
   (border-radius:2px, 1px #ccc border, #fafafa bg, 9px 20px padding);
   override to the live round buttons (.previous-2/.next-2) so the arrows
   match the circular numbered .custom-pagination-link buttons. */
.portfolio-custom-pagination-wrapper .w-pagination-next,
.portfolio-custom-pagination-wrapper .w-pagination-previous {
  color: #05afaa;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 10px;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 6px 6px 16px 6px #deeeee;
}
.portfolio-custom-pagination-wrapper .w-pagination-next-icon,
.portfolio-custom-pagination-wrapper .w-pagination-previous-icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.5px;
  margin: 0;
}
/* Match the numbered circles' 33px size on non-XL viewports. */
@media (max-width: 1919px) {
  .portfolio-custom-pagination-wrapper .w-pagination-next,
  .portfolio-custom-pagination-wrapper .w-pagination-previous {
    width: 33px;
    height: 33px;
  }
}