@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


:root {
    --phoenix-body-font-family: 'Inter';
}

/* Transparent navbar on home, before scroll */
.navbar-transparent .nav-link {
    color: #fff !important;
}

.navbar-transparent .logo-default { display: none; }
.navbar-transparent .logo-white   { display: inline-block; }

.navbar-transparent .btn-navbar-cta {
    color: #fff;
    border: 1px solid #fff;
    background: transparent;
}
.navbar-transparent .btn-navbar-cta:hover {
    background: #fff;
    color: #000;
}

/* Scrolled state: back to default */
.navbar-transparent.scrolled {
    background: #fff !important;
}

.navbar-transparent.scrolled .nav-link {
    color: initial !important;
}

.navbar-transparent.scrolled .logo-default { display: inline-block; }
.navbar-transparent.scrolled .logo-white   { display: none; }

.navbar-transparent.scrolled .btn-navbar-cta {
    color: #fff;
    border-color: #000;
    background: #000;
}
.navbar-transparent.scrolled .btn-navbar-cta:hover {
    background: #333;
}

.navbar-transparent .navbar-toggler {
    border-color: rgba(255,255,255,.6);
}

.navbar-transparent .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

.navbar-transparent.scrolled .navbar-toggler {
    border-color: rgba(0,0,0,.15);
}

.navbar-transparent.scrolled .navbar-toggler-icon {
    filter: none;
}

@media (max-width: 991.98px) {
    .navbar-transparent .navbar:has(.navbar-collapse.show) {
        background: #fff;
    }
    
    .navbar-transparent .navbar-collapse.show .nav-link {
        color: initial !important;
    }

    .navbar-transparent .navbar-collapse.show .btn-navbar-cta {
        color: #fff;
        border-color: #000;
        background: #000;
    }

    .navbar-transparent:has(.navbar-collapse.show) .logo-default { display: inline-block; }
    .navbar-transparent:has(.navbar-collapse.show) .logo-white   { display: none; }

    .navbar-transparent:has(.navbar-collapse.show) .navbar-toggler-icon {
        filter: none;
    }
    .navbar-transparent:has(.navbar-collapse.show) .navbar-toggler {
        border-color: rgba(0,0,0,.15);
    }
}


.hero-video-section {
    position: relative;
    overflow: hidden;
    margin-top: -115px;
    padding-top: 115px !important;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.hero-video-section .container {
    z-index: 2;
}

.bg-video-section {
    position: relative;
    overflow: hidden;
    background-color: #000000;
}

.bg-video-section .container {
    z-index: 2;
}

.bg-support-system {
  background-image: url("../img/home/berandaunlock.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-product-genomeal {
  background-image: url("../img/home/genomeal.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.carousel-wrap{
    margin: 0 auto;
    padding: 0 60px;
    position: relative;
  }

  /* Card grid inside each carousel item */
  .testimonial-row{
    display:flex;
    gap: 24px;
  }

  .testimonial-col{
    flex: 1 1 0;
    min-width: 0;
    margin-right: 10px;
  }

  /* Speech bubble */
  .bubble{
    background: #e7e3dc;
    border-radius: 18px;
    padding: 28px 26px;
    position: relative;
    min-height: 210px;
    display:flex;
    align-items:center;
  }

  /* Tail pointing down-left, like the screenshot */
  .bubble::after{
    content:"";
    position:absolute;
    left: 34px;
    bottom: -14px;
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid #e7e3dc;
  }

  .bubble p{
    font-size: 0.95rem;
    line-height: 1.55;
    color: #000;
    margin: 0;
  }

  .bubble p strong{
    font-weight: 700;
  }

  /* Author block */
  .author{
    margin-top: 34px;
    padding-left: 4px;
  }

  .author .name{
    font-weight: 700;
    font-size: 1.05rem;
    color: #000;
    margin-bottom: 2px;
  }

  .author .role,
  .author .location{
    font-size: 0.85rem;
    color: #5c5c5c;
    line-height: 1.4;
  }

  /* Carousel controls: outlined circular chevrons, positioned outside the cards */
  .carousel-control-prev,
  .carousel-control-next{
    position:absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #cfcac0;
    background: #fff;
    opacity: 1;
    z-index: 5;
  }

  .carousel-control-prev{ left: -50px; }
  .carousel-control-next{ right: -50px; }

  .carousel-control-prev:hover,
  .carousel-control-next:hover{
    background:#f5f3ef;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon{
    width: 16px;
    height: 16px;
    filter: none;
    background-image: none;
    position: relative;
  }

  .carousel-control-prev-icon::before,
  .carousel-control-next-icon::before{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #2b2b2b;
    border-left: 2px solid #2b2b2b;
  }

  .carousel-control-prev-icon::before{
    transform: translate(-30%,-50%) rotate(-45deg);
  }
  .carousel-control-next-icon::before{
    transform: translate(-70%,-50%) rotate(135deg);
  }

  /* Responsive: stack columns on small screens */
  @media (max-width: 767px){
    .testimonial-row{ flex-direction: column; }
    .carousel-wrap{ padding: 0 44px; }
    .carousel-control-prev{ left: -50px; }
    .carousel-control-next{ right: -50px; }
  }

.bg-tentang-kami-hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/about/tentangkami.webp");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.bg-tentang-kami {
    background-image: url("../img/about/bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
    .bg-tentang-kami {
        background-image: none;
        background-color: #efece7;
    }
}

.bg-product {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/produk/bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-teamwork {
  background-image: linear-gradient(to right, #fff, transparent), url("../img/home/teamwork-background.webp");
  background-size: 45% 100%, cover;
  background-position: left, center;
  background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
    .bg-teamwork-mobile {
        background-image: linear-gradient(to bottom, #fff, rgba(255,255,255,0.7)), url("../img/home/teamwork-background.webp");
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
        position: relative;
    }
}

.bg-visi {
    background-image: linear-gradient(to bottom, #efece7, transparent), url("../img/about/visi-background.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

@media (max-width: 991.98px) {
    .bg-visi {
        background-image: linear-gradient(to bottom, #efece7, rgba(239,236,231,0.7)), url("../img/about/visi-background.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }
}

.bg-office {
    background-image: linear-gradient(to left, #efece7, transparent), url("../img/about/office.webp");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    position: relative;
}

.bg-support-system-bottom {
    background-image: url("../img/support/long-exposure-deserted-road-night.webp");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: relative;
}

.bg-peluang {
    background-image: linear-gradient(to right, #fff, transparent), url("../img/peluang/hero.webp");
    background-size: 45% 100%, cover;
    background-position: left, bottom center;
    background-repeat: no-repeat;
    position: relative;
}

@media (max-width: 991.98px) {
    .bg-peluang-mobile {
        background-image: linear-gradient(to bottom, #fff, rgba(255,255,255,0.7)), url("../img/peluang/hero.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }
}

.bg-peluang-bottom {
    background-image: linear-gradient(to bottom, #000, transparent), url("../img/peluang/bottom.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.bg-founder {
    background-image: url("../img/founder/bg.webp");
    background-size: auto 100%;
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
}

@media (max-width: 991.98px) {
    .bg-founder-mobile {
        background-image: linear-gradient(to bottom, #1e1a14, rgba(30,26,20,0.7)), url("../img/founder/bg.webp");
        background-size: contain;
        background-position: center 70%;
        background-repeat: no-repeat;
        position: relative;
    }
}

.bg-genomeal {
    background-image: url("../img/produk/genomeal.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.bg-nobelly {
    background-image: url("../img/produk/nobelly.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.bg-fit-cicle {
  background-image: linear-gradient(to right, #fff, transparent), url("../img/produk/people-training.webp");
  background-size: 45% 100%, cover;
  background-position: left, center;
  background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
    .bg-fit-cicle-mobile {
        background-image: linear-gradient(to bottom, #fff, rgba(255,255,255,0.7)), url("../img/produk/people-training.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }
}


.bg-products-2 {
  background-image: linear-gradient(to right, #efece7, transparent), url("../img/produk/products-2.webp");
  background-size: 45% 100%, cover;
  background-position: left, right center;
  background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
    .bg-products-2-mobile {
        background-image: linear-gradient(to bottom, #efece7, rgba(239,236,231,0.7)), url("../img/produk/products-2.webp");
        background-size: cover;
        background-position: 85% center;
        background-repeat: no-repeat;
        position: relative;
    }
}

.bg-genomeal-detail {
    background-image: linear-gradient(to right, #fff, transparent), url("../img/genomeal/bg.webp");
    background-size: 45% 100%, cover;
    background-position: left, right center;
    background-repeat: no-repeat;
    position: relative;
}

@media (max-width: 991.98px) {
    .bg-genomeal-detail-mobile {
        background-image: linear-gradient(to bottom, #fff, rgba(255,255,255,0.7)), url("../img/genomeal/bg.webp");
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
        position: relative;
    }
}

.bg-nobelly-detail {
    background-image: linear-gradient(to right, #fff, transparent), url("../img/nobelly/bg.webp");
    background-size: 45% 100%, cover;
    background-position: left, right center;
    background-repeat: no-repeat;
    position: relative;
}

@media (max-width: 991.98px) {
    .bg-nobelly-detail-mobile {
        background-image: linear-gradient(to bottom, #fff, rgba(255,255,255,0.7)), url("../img/nobelly/bg.webp");
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
        position: relative;
    }
}

.testi-section {
    overflow: hidden;
}
 
.testi-marquee-wrapper {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
}
 
.testi-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: testi-left 35s linear infinite;
}
 
.testi-track-reverse {
    animation: testi-right 40s linear infinite;
}
 
.testi-track:hover,
.testi-track-reverse:hover {
    animation-play-state: paused;
}
  
@keyframes testi-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* -50% karena card diduplikasi */
}
 
@keyframes testi-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
 
.testi-card {
    width: 320px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid #000000 !important;
    padding: 1.5rem;
    cursor: default;
}