@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600;6..12,700;6..12,800;6..12,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

body{
  font-family: 'Nunito Sans', sans-serif;
}

a {
    text-decoration: none;
}
.carousel-caption {
    transform: translateY(-50%);
    bottom: 0;
    top: 50%;
    z-index: 1;
}

/*
.carousel-item:before {
    content: '';
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 95%);
    z-index: 1;
}
*/

section, .section {
    padding: 50px 0;
}

.navbar .nav-item > .nav-link {
  color: var(--bs-white);
  transition: background-color 200ms linear;
  padding: 10px;
}

.blured-nav {
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  transition: background-color 200ms linear;
}

.blured-nav .nav-item > .nav-link {
  color: var(--bs-heading-color);
}

.text-orange {
  color: var(--bs-orange);
}

.border-top-orange {
  border-top: 4px solid var(--bs-orange);
}

.border-left-orange {
  border-left: 4px solid var(--bs-orange);
}

.banner-wwd {
  background: url("../image/close-up-multiethnic-team-solving-puzzle.jpg") no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 600px;
}

/*
.banner-wwd:before {
  content: '';
  position:absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 95%);
  z-index: 1;
  height: 600px;
}
*/

.banner-wwh {
  background: var(--bs-primary);
  background: -webkit-linear-gradient(330deg, rgba(242, 143, 10, 1) 0%, rgba(255, 255, 255, 1) 100%);
  background: -moz-linear-gradient(330deg, rgba(242, 143, 10, 1) 0%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(330deg, rgba(242, 143, 10, 1) 0%, rgba(255, 255, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F28F0A", endColorstr="#FFFFFF", GradientType=0);
}

/*
.banner-wwh:before {
  content: '';
  position:absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 95%);
  z-index: 1;
  height: 600px;
}
*/

.banner-oc {
  background: url("../image/abstract-app-social-web-service-object 2.png") no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 600px;
}

/*
.banner-oc:before {
  content: '';
  position:absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 95%);
  z-index: 1;
  height: 600px;
}
*/

.banner-cu {
  background: url("../image/abstract-app-social-web-service-object 3.png") no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 600px;
}

/*
.banner-cu:before {
  content: '';
  position:absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 95%);
  z-index: 1;
  height: 600px;
}
*/

.banner-rm {
  background: url("../image/abstract-app-social-web-service-object 4.png") no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 600px;
}

/*
.banner-rm:before {
  content: '';
  position:absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 95%);
  z-index: 1;
  height: 600px;
}
*/

.banner-im {
  background: url("../image/businessman-sitting-workplace-hand-holding-hourglass-as-time-is-money-concept 1.png") no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 600px;
}

/*
.banner-im:before {
  content: '';
  position:absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 95%);
  z-index: 1;
  height: 600px;
}
*/

.banner-or {
  background: url("../image/abstract-app-social-web-service-object 6.png") no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 600px;
}

/*
.banner-or:before {
  content: '';
  position:absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 95%);
  z-index: 1;
  height: 600px;
}
*/

.banner-er {
  background: url("../image/abstract-app-social-web-service-object 5.png") no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 600px;
}

/*
.banner-er:before {
  content: '';
  position:absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 95%);
  z-index: 1;
  height: 600px;
}
*/

.banner-ot {
  background: url("../image/image14.png") no-repeat center left fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 60%;
  height: auto;
}

.banner-es {
  background: url("../image/image15.png") no-repeat center right fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 60%;
  height: auto;
}

.bg-cu {
  background: rgba(0,0,0,0.7) url("../image/Rectangle 2674.png") no-repeat center right fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 50%;
  min-height: 608px;
  background-blend-mode: overlay;
}

.banner-op {
  background: url("../image/pexels-pavel-danilyuk-5520322.png") no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 600px;
}

@media only screen and (min-width: 600px) and (max-width: 800px) {
    .banner-wwd, .banner-wwh, .banner-oc, .banner-cu, .banner-rm, .banner-im, .banner-or, .banner-er, .banner-ot, .banner-op, .bg-cu {
        background-size: 350%;
		height: 462px;
    }
}

@media only screen and (min-width: 300px) and (max-width: 800px) {
    .banner-wwd, .banner-wwh, .banner-oc, .banner-cu, .banner-rm, .banner-im, .banner-or, .banner-er, .banner-ot, .banner-op, .bg-cu {
        background-size: 350%;
		height: 462px;
    }
}

/*
.banner-wwd::before, .banner-wwh::before, .banner-oc::before, .banner-cu::before, .banner-rm::before, .banner-im::before, .banner-or::before,
.banner-er::before, .banner-ot::before, .banner-op::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
    z-index: 1;
    height: 600px;
}

@media only screen and (min-width: 300px) and (max-width: 800px) {
    .banner-wwd::before, .banner-wwh::before, .banner-oc::before, .banner-cu::before, .banner-rm::before, .banner-im::before, .banner-or::before,
	.banner-er::before, .banner-ot::before, .banner-op::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
		z-index: 1;
		height: 462px;
	}
}*/


.top-30 {
  top: 30%!important;
}

.minh-1 {
  min-height: 160px;
}

.minh-2 {
  min-height: 260px;
}

.minh-3 {
  min-height: 360px;
}

.minh-4 {
  min-height: 460px;
}

.minh-5 {
  min-height: 560px;
}

.minh-6 {
  min-height: 660px;
}

.product-bg {
  background-color: #FCF3E9;
}

ul.list-check  {
  list-style: none;
  padding: 0;
}

ul.list-check li {
  position: relative;
  padding-left: 30px; 
  margin-bottom: 10px; 
}

ul.list-check  li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: url("../image/check.svg") no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

  /* Override BS*/

.form-control {
  border-radius: var(--bs-border-radius-sm);
}

.form-control:focus {
  outline: none !important;
  box-shadow: none !important; /* Optionally remove the box-shadow as well */
}
  
.gridlients .card {
    min-height: 107px;
}

.gridlients .card h5.card-title {
    font-size: 1.2rem;
}

.trustclients .card {
    min-height: 75px;
}


.trustclients .card h5.card-title {
    font-size: 1rem;
}

.divider {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 2rem 0;
}

.stat-divider {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.bg-linear {
    background: linear-gradient(238deg, #faf7ef, #f4f6fc 99.66%);
}

.f-box, .f-box h5, .f-box:hover > div {
    transition: all 0.2s linear;
}

.f-box {
  transition: all 0.35s ease;
}

.f-box:hover {
    transition: all 0.1s ease;
    transform: translateY(-6px);
            box-shadow: -2px 15px 11px 2px rgba(0,0,0,0.10);
    -webkit-box-shadow: -2px 15px 11px 2px rgba(0,0,0,0.10);
       -moz-box-shadow: -2px 15px 11px 2px rgba(0,0,0,0.10);
}

.f-box:hover h5 {
    transition: all 0.3s ease;
}

.f-box:hover > div {
    transition: all 0.3s ease;
}

.f-box:hover > div > .mdi {
    transition: all 0.3s ease;
}

.about-exchange-content .listing-exchange {
    display: flex;
    flex-wrap: wrap;
}

/* Hilangkan caret bawaan bootstrap */
.nav-link.dropdown-toggle::after {
  display: none !important;
}

/* Animasi rotasi */
.nav-link .mdi::before {
  transition: transform 0.3s ease;
}

/* saat parent .dropdown mendapat .show -> rotasi chevron */
.nav-link.show .mdi::before {
  transform: rotate(-180deg);
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

.bubbles {
    position: absolute;
    right: 20%;
    top: 0;
    width: 50%;
    max-width: unset;
    max-height: unset;
    -webkit-animation: rotate-center 100s linear infinite both;
    animation: rotate-center 100s linear infinite both;
}

.hidescroll {
    overflow: hidden;
    position: relative;
}

.form-control.small,
.form-select.small {
  font-size: 0.875em !important;
}

.smaller {
  font-size: 0.675em;
}

.logo-carousel {
  overflow: hidden;
  position: relative;
  padding: 20px 0;
}

.logo-track {
  display: flex;
  width: max-content;
  /*animation: scroll 20s linear infinite;*/
}

.scroll-track-left {
    display: flex;
    width: max-content;
    animation: scroll-left 65s linear infinite;
}

.scroll-track-right {
    display: flex;
    width: max-content;
    animation: scroll-right 65s linear infinite;
}

/*
.scroll-track-left .client-box,
.scroll-track-right .client-box {
    min-height: 100px;
    padding: 0 20px;
}*/

.client-box {
  min-height: 130px;
}

.client-box h5 {
  font-size: 0.85rem;
}


@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.ltsp-1 {
  letter-spacing: 1px;
}

.ltsp-2 {
  letter-spacing: 2px;
}

.ltsp-3 {
  letter-spacing: 3px;
}

.ltsp-4 {
  letter-spacing: 4px;
}

.ltsp-5 {
  letter-spacing: 5px;
}

.ft-mono {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-style: normal;
}

.bg-seashell {
  background-color: #faf4f0;
}

.grad-1 {
  background-image: radial-gradient(circle at 60% 30%, rgba(255, 171, 61, 0.4) 0%, transparent 30%),
                    radial-gradient(circle at 80% 50%, rgba(255, 111, 44, 0.3) 0%, transparent 20%);
}

.grad-2 {
  background: radial-gradient(ellipse 100% 50% at 50% 0%, rgba(120, 180, 255, 0.25), transparent 70%),
                #000000
}

.grad-3 {
  background: #ffdcab;
  background: linear-gradient(0deg,rgba(255, 220, 171, 1) 0%, rgba(250, 242, 242, 1) 53%, rgba(255, 255, 255, 1) 100%);
}

.grad-4 {
  background: var(--bs-primary);
  background: linear-gradient(0deg, rgba(242, 143, 10, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.grad-5 {
  background: radial-gradient(ellipse 100% 50% at 50% 100%, rgba(255, 185, 120, 0.75), transparent 70%),
                #000000
}


.grid-grad-1 {
  background-image: linear-gradient(to right, rgba(229, 231, 235, 0.8) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(229, 231, 235, 0.8) 1px, transparent 1px),
                    radial-gradient(circle 500px at 20% 70%, rgb(246 193 92 / 30%), transparent),
                    radial-gradient(circle 500px at 80% 20%, rgb(246 119 59 / 30%), transparent);
  /* background-size: 88px 88px, 88px 88px, 100% 100%, 100% 100%; /* Ukuran pola grid*/
}

.grid-grad-2 {
  background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px),
                    linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
                    background-size: 20px 30px; /* Ukuran pola grid: 20px horizontal, 30px vertikal */
                    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
                    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
                    
}

.grid-grad-3 {
  background-image: linear-gradient(to right, #d1d5db 1px, transparent 1px),
                    linear-gradient(to bottom, #d1d5db 1px, transparent 1px);
                    background-size: 32px 32px;
                    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%);
                    mask-image: radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%);
}

.shadow-hov-secondary {
  transition: box-shadow 0.3s ease;
  box-shadow: 0 0 0 0 #31343a;
}

.shadow-hov-secondary:hover { 
  transition: box-shadow 0.3s ease;
  box-shadow: 4px 4px 0 #31343a;
  -webkit-box-shadow: 4px px 0 #31343a;
  -moz-box-shadow: 4px 4px 0 #31343a;
}

.shadow-hov-primary {
  transition: box-shadow 0.3s ease;
  box-shadow: 0 0 0 0 var(--bs-primary);
}

.shadow-hov-primary:hover { 
  transition: box-shadow 0.3s ease;
  box-shadow: 4px 4px 0 var(--bs-primary);
  -webkit-box-shadow: 4px px 0 var(--bs-primary);
  -moz-box-shadow: 4px 4px 0 var(--bs-primary);
}

.bg-1 {
  background: rgba(0,0,0,0.7) url("../image/bg4.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 608px;
}

.bg-2 {
  background: url("../image/bg2.png") no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body:before {
   content: "";
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 182px;
  opacity: 0.12;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
}

.text-grad {
  background: #FF7606;
  background: linear-gradient(to right, #FF7606 0%, #F7BA64 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#cursor {
  content: "|";
  animation: blink 1s linear infinite;
  font-weight: 200;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.link-hov {
  position: relative;
  padding-bottom: 3px;
}

.link-hov::after {
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background: currentColor;
  transition: width .3s ease;
}

.link-hov:hover::after {
  width:100%;
}

.cursor-orb {
  position: fixed;
  width: 180px; height: 180px;
  background: radial-gradient(circle, #00eaff33, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.fw-black {
  font-weight: 900 !important;
}

.btn-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.25);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%23FFFFFF' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12 5v14m-7-7h14'/></svg>");
  transform: none !important;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%23FFFFFF' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M5 12h14'/></svg>");
}


/* Card */
.client-card {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.35s ease;
}

.client-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.15), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  border-radius: 7px;
}

.client-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
}

.client-card:hover::after {
  opacity: 1;
}

.client-detail {
  display: none;
}
.client-detail {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  font-size: 13px;
  color: #b5b9bf;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.35s ease;
}

.client-card:hover .client-detail {
  opacity: 1;
  transform: translateY(0);
}


.bw-filter {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  /* Smooth transition for the filter effect */
  transition: filter 0.5s ease-in-out;
}

.bw-filter:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}

.read-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 1.25rem; /* ruang geser arrow */
  text-decoration: none;
}

.read-more-text {
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-6px);
  white-space: nowrap;
  transition: opacity 0.1s ease, transform 0.6s ease;
}

.read-more-arrow {
  transition: transform 0.4s ease;
}

.f-box:hover .read-more-text {
  opacity: 1;
  transform: translateX(0);
}

.f-box:hover .read-more-arrow {
  transform: translateX(100px);
  transition: transform 0.4s ease;
}


.image-wrapper {
  overflow: hidden;
  transition: transform 0.5s ease
}

.image-wrapper:hover {
  transform: scale(1.05);
}