:root {
    --bs-primary: #3b76e1 !important;
    --bs-primary-rgb: 59, 118, 225 !important;
}

@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,600);

* {
    padding: 0;
    margin: 0;
}

.header {
    background: url("images/landing/header-pattern.png"), linear-gradient(150deg, var(--bs-dark) 0%, var(--bs-primary) 90%);
    background-repeat: no-repeat;
    padding: 70px 0 130px 0;
}

.bg-pattern {
    background: url("images/landing/pattern-2.png"), #fff;
    background-repeat: no-repeat;
}

.wave{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url('images/landing/wave.png');
    background-size: 1000px 100px;
}

.wave.wave1{
    animation: animate 30s linear infinite;
    z-index: 10;
    opacity: 1;
    animation-delay: 0s;
    bottom: 0;
}

.wave.wave2{
    animation: animate2 15s linear infinite;
    z-index: 9;
    opacity: 0.5;
    animation-delay: -5s;
    bottom: 10px;
}

.wave.wave3{
    animation: animate 30s linear infinite;
    z-index: 8;
    opacity: 0.2;
    animation-delay: -2s;
    bottom: 10px;
}

.wave.wave4{
    animation: animate2 5s linear infinite;
    z-index: 7;
    opacity: 0.7;
    animation-delay: -5s;
    bottom: 20px;
}

@keyframes animate {
    0%
    {
        background-position:0 ;
    }
    100%
    {
        background-position:1000px;
    }
}

@keyframes animate2 {
    0%
    {
        background-position:0 ;
    }
    100%
    {
        background-position:-1000px;
    }
}

.img-head {
    background:url('images/landing/bg-header.png');
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px 0;
}

.img-head img{
    transform: translatey(0px);
	animation: float 5s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(20px);
	}
	100% {
		transform: translatey(0px);
	}
}

.card-1{
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('images/landing/pattern-card-1.png');
    /* background-position: top; */
    
}

.card-2{
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('images/landing/pattern-card-2.png');
    /* background-position: center; */
}

.card-3{
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('images/landing/pattern-card-3.png');
    /* background-position: center; */
}

/* Glossy / Glassmorphism Card */
.glossy-card{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.25);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

/* konten tetap di atas layer efek */
.glossy-card > *{
  position: relative;
  z-index: 2;
}

/* glare lembut (spot highlight) */
.glossy-card::before{
  content:"";
  position:absolute;
  z-index:1;
  top:-35%;
  left:-20%;
  width:150%;
  height:150%;
  background:
    radial-gradient( circle at 25% 10%,
      rgba(255,255,255,0.35) 0%,
      rgba(255,255,255,0.10) 25%,
      rgba(255,255,255,0.00) 60%);
  pointer-events:none;
}

/* sheen garis diagonal yang bergerak */
.glossy-card::after{
  content:"";
  position:absolute;
  z-index:1;
  top:-80px;
  left:-60%;
  width:50%;
  height:220%;
  background:
    linear-gradient( to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.45) 45%,
      rgba(255,255,255,0) 100%);
  transform: rotate(18deg);
  animation: sheen-sweep 4.5s ease-in-out infinite;
  pointer-events:none;
}

@keyframes sheen-sweep{
  0%   { left:-60%; }
  60%  { left:120%; }
  100% { left:120%; }
}

/* interaksi */
.glossy-card:hover{
  transform: translateY(-2px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.35);
  border-color: rgba(var(--bs-primary-rgb), .45);
}

/* fallback bila browser belum dukung backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glossy-card{
    background: rgba(255,255,255,0.9);
  }
}

/* preferensi aksesibilitas: matikan animasi bila user mengurangi motion */
@media (prefers-reduced-motion: reduce){
  .glossy-card::after{ animation: none; }
  .glossy-card:hover{ transform:none; }
}



  .carousel-cell {
    width: 100%;
    max-width: 600px;
    margin-right: 30px;
  }

  /* cell number */
  .carousel-cell:before {
    display: block;
  }