/* =========================================================
GLOBAL
========================================================= */

.img-responsive{
  max-width:100%;
  height:auto;
  display:block;
}

img{
  max-width:100%;
}

html{
  scroll-behavior:smooth;
}

@media (prefers-reduced-motion: reduce){
  .image-box,
  .experience-box,
  .trusted-track{
    animation:none;
  }
  html{
    scroll-behavior:auto;
  }
}

/* =========================================================
HEADER
========================================================= */

.main-header{
  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:9999;

  background:rgba(255,255,255,.96);

  backdrop-filter:blur(12px);

  border-bottom:1px solid rgba(0,0,0,.05);
}

/* =========================================================
CONTAINER
========================================================= */

.navbar-container{
  max-width:1280px;

  margin:auto;

  padding:18px 40px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* =========================================================
LOGO
========================================================= */

.logo-area{
  display:flex;
  align-items:center;

  gap:10px;

  text-decoration:none;
}

.logo-area img{
  width:46px;
  height:46px;

  object-fit:contain;
}

.logo-text{
  display:flex;
  flex-direction:column;

  line-height:1.15;
}

.logo-title{
  font-size:21px;
  font-weight:800;

  color:#111;
}

.logo-sub{
  font-size:11px;
  font-weight:600;

  color:#8a8a8a;

  letter-spacing:.06em;

  text-transform:uppercase;
}
.logo-text span{
  color:#f9961e;
}

/* =========================================================
MENU
========================================================= */

.menu-list{
  display:flex;
  align-items:center;

  gap:24px;

  list-style:none;
}

.menu-list li a{
  text-decoration:none;

  color:#222;

  font-size:15px;
  font-weight:600;

  transition:.3s;
}

.menu-list li a:hover{
  color:#f9961e;
}

/* HOVER INDICATOR MENU */

.menu-list li a{
  position:relative;
}

.menu-list li a::after{
  content:"";

  position:absolute;

  left:0;
  right:100%;

  bottom:-6px;

  height:3px;

  border-radius:100px;

  background:linear-gradient(90deg,#e53935,#f9961e);

  transition:right .35s cubic-bezier(.22,.61,.36,1);

  opacity:0;
}

.menu-list li a:hover{
  color:#e53935;

  transform:translateY(-1px);
}

.menu-list li a:hover::after{
  right:0;

  opacity:1;
}

.menu-list li a.btn-tpdoc::after{
  display:none;
}

.menu-list li a.btn-tpdoc:hover{
  transform:none;
}

/* TP DOC BUTTON */

.menu-list li a.btn-tpdoc{
  color:#e53935;

  border:2px solid #e53935;

  border-radius:50px;

  padding:7px 16px;

  transition:.3s;
}

.menu-list li a.btn-tpdoc:hover{
  background:#e53935;

  color:#fff;
}

/* =========================================================
LANGUAGE SWITCHER
========================================================= */

.lang-switcher{
  display:flex;
  align-items:center;

  gap:6px;

  margin-left:6px;
}

.lang-btn{
  border:1px solid rgba(0,0,0,.18);

  background:transparent;

  color:#555;

  font-size:13px;
  font-weight:700;

  padding:6px 12px;

  border-radius:50px;

  cursor:pointer;

  transition:.3s;
}

.lang-btn.active{
  background:#f9961e;

  border-color:#f9961e;

  color:#fff;
}

.lang-btn:hover:not(.active){
  border-color:#f9961e;

  color:#f9961e;
}

@media(max-width:480px){

  .lang-switcher{
    margin-left:6px;
  }

  .lang-btn{
    font-size:12px;

    padding:5px 10px;
  }

}

/* =========================================================
MOBILE TOGGLE
========================================================= */

.menu-toggle{
  display:none;

  width:32px;

  cursor:pointer;
}

.menu-toggle span{
  display:block;

  width:100%;
  height:3px;

  background:#111;

  margin:6px 0;

  border-radius:10px;

  transition:.3s;
}

/* =========================================================
COMPACT DESKTOP
========================================================= */

@media(max-width:1199px){

  .navbar-container{
    padding:14px 28px;
  }

  .menu-list{
    gap:12px;
  }

  .menu-list li a{
    font-size:14px;
  }

  .menu-list li a.btn-tpdoc{
    padding:6px 12px;
  }

  .logo-area img{
    width:40px;
    height:40px;
  }

  .logo-text{
    font-size:17px;
  }

  .lang-btn{
    font-size:12px;

    padding:5px 10px;
  }

}

/* =========================================================
TABLET & MOBILE (HAMBURGER MENU)
========================================================= */

@media(max-width:1024px){

  .navbar-container{
    padding:15px 20px;
  }

  .logo-area img{
    width:44px;
    height:44px;
  }

  .logo-text{
    font-size:19px;
  }

  /* MOBILE MENU */

  .main-navbar{
    position:fixed;

    top:74px;
    left:-100%;

    width:100%;
    height:auto;

    background:#fff;

    transition:.4s ease;

    box-shadow:0 20px 40px rgba(0,0,0,.08);
  }

  .main-navbar.active{
    left:0;
  }

  .menu-list{
    flex-direction:column;

    align-items:flex-start;

    gap:0;

    padding:20px;
  }

  .menu-list li{
    width:100%;
  }

  .menu-list li a{
    display:block;

    width:100%;

    padding:16px 0;

    border-bottom:1px solid rgba(0,0,0,.06);

    font-size:16px;
  }

  .menu-toggle{
    display:block;
  }

  .lang-switcher{
    margin-left:auto;

    margin-right:10px;
  }

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .logo-text{
    font-size:18px;
  }

}





/* =========================================================
PREMIUM HERO FIX REAL RESPONSIVE
========================================================= */

.hero-section{
  position:relative;

  width:100%;
  min-height:100vh;

  display:flex;
  align-items:center;

  overflow:hidden;

  background-image:url('../malioboro-kota-jogja.webp');

  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
}

/* ================= OVERLAY ================= */

.hero-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
  90deg,
  rgba(0,0,0,.82) 0%,
  rgba(0,0,0,.65) 40%,
  rgba(0,0,0,.25) 100%
  );
}

/* ================= WRAPPER ================= */

.hero-wrapper{
  position:relative;
  z-index:2;

  width:100%;
  max-width:1280px;

  margin:auto;

  padding:140px 40px 100px;
}

/* ================= CONTENT ================= */

.hero-content{
  width:100%;
  max-width:760px;
}

/* ================= BADGE ================= */

.hero-badge{
  display:inline-flex;
  align-items:center;

  padding:10px 18px;

  border-radius:100px;

  background:rgba(255,255,255,.10);

  border:1px solid rgba(255,255,255,.15);

  color:#fff;

  font-size:13px;
  font-weight:700;

  letter-spacing:1px;

  margin-bottom:24px;
}

/* ================= TITLE ================= */

.hero-title{
  font-size:clamp(46px, 7vw, 90px);

  line-height:1.05;

  font-weight:900;

  color:#fff;

  margin-bottom:24px;
}

.hero-title span{
  color:#f9961e;
}

/* ================= SUBTITLE ================= */

.hero-subtitle{
  font-size:clamp(16px, 2vw, 20px);

  line-height:1.9;

  color:rgba(255,255,255,.90);

  max-width:650px;

  margin-bottom:34px;
}

/* ================= BUTTON ================= */

.btn-hero{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:15px 24px;

  background:#f9961e;

  color:#fff;

  text-decoration:none;

  border-radius:12px;

  font-size:15px;
  font-weight:700;

  transition:.4s;

  box-shadow:0 15px 40px rgba(249,150,30,.25);
}

.btn-hero:hover{
  background:#ff8f1f;
  transform:translateY(-4px);
  color:#fff;
}

/* =========================================================
TABLET
========================================================= */

@media(max-width:991px){

  .hero-section{
    background-position:65% center;
  }

  .hero-wrapper{
    padding:120px 30px 80px;
  }

  .hero-content{
    max-width:620px;
  }

}

/* =========================================================
MOBILE RESPONSIVE FIX FINAL
========================================================= */

@media(max-width:767px){

  .hero-section{

    min-height:auto;

    align-items:flex-end;

    background-size:cover;
    background-position:center;
    justify-content:flex-start;

  }

  .hero-overlay{

    background:
    linear-gradient(
    180deg,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.84) 100%
    );

  }

  .hero-wrapper{

    width:100%;

    padding-top:110px;
    padding-bottom:70px;

    padding-left:22px;
    padding-right:22px;
  }

  .hero-content{

    width:100%;
    max-width:100%;

    text-align:left;
  }

  .hero-badge{

    font-size:11px;

    padding:8px 14px;

    margin-bottom:18px;
  }

  .hero-title{

  font-size:53px;

    line-height:1.2;

    margin-bottom:18px;

    overflow-wrap:break-word;
  }

  .hero-subtitle{

    font-size:15px;

    line-height:1.8;

    margin-bottom:26px;

    width:100%;

    max-width:100%;
  }

  .btn-hero{

    padding:13px 20px;

    font-size:14px;

    border-radius:10px;
  }

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .hero-section{

    background-size:cover;

    background-position:68% center;
  }

  .hero-wrapper{

    padding-top:100px;
    padding-bottom:60px;

    padding-left:18px;
    padding-right:18px;
  }

  .hero-title{

    font-size:33px;

    line-height:1.25;
  }

  .hero-subtitle{

    font-size:14px;
  }

  .btn-hero{

    font-size:13px;

    padding:12px 18px;
  }

}





.about-section{
  position:relative;

  padding:120px 0;

  background:#fff;

  overflow:hidden;
}

.about-container{
  max-width:1280px;

  margin:auto;

  padding:0 40px;
}


.about-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:80px;

  align-items:center;
}

/* =========================================================
IMAGE AREA
========================================================= */

.about-image-area{
  position:relative;

  min-height:650px;
}

/* IMAGE BOX */

.image-box{
  position:absolute;

  overflow:hidden;

  border-radius:28px;

  box-shadow:0 25px 60px rgba(0,0,0,.12);

  animation:floatImage 4s ease-in-out infinite;
}

.image-box img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:1s;
}

.image-box:hover img{
  transform:scale(1.08);
}

/* IMAGE POSITION */

.image-one{
  width:72%;
  height:500px;

  top:0;
  left:0;

  z-index:2;
}

.image-two{
  width:58%;
  height:320px;

  bottom:0;
  right:0;

  border:8px solid #fff;

  z-index:3;

  animation-delay:1s;
}

/* FLOATING EXPERIENCE BOX */

.experience-box{
  position:absolute;

  top:55%;
  left:45%;

  transform:translate(-50%, -50%);

  background:#f9961e;

  color:#fff;

  padding:18px 22px;

  border-radius:18px;

  z-index:5;

  box-shadow:0 15px 35px rgba(249,150,30,.28);

  animation:floatCard 3s ease-in-out infinite;

  max-width:220px;
}

/* NUMBER */

.experience-box h4{
  font-size:31px;
  font-weight:800;

  line-height:1;

  margin-bottom:6px;
}

/* TEXT */

.experience-box p{
  font-size:13px;

  line-height:1.5;

  margin:0;
}

/* =========================================================
CONTENT
========================================================= */

.section-badge{
  display:inline-flex;

  align-items:center;

  padding:10px 18px;

  border-radius:100px;

  background:rgba(249,150,30,.12);

  color:#c62828;

  font-size:14px;
  font-weight:700;

  margin-bottom:24px;
}

.about-title{
  font-size:57px;

  line-height:1.15;

  font-weight:900;

  color:#111;

  margin-bottom:28px;
}

.about-title span{
  color:#f9961e;
}

.about-text{
  font-size:18px;

  line-height:1.9;

  color:#555;

  margin-bottom:22px;
}

/* =========================================================
LIST
========================================================= */

.about-list{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:18px;

  margin-top:34px;
}

.about-item{
  position:relative;

  display:flex;
  align-items:center;

  gap:14px;

  padding:18px 20px;

  border:2px solid transparent;

  border-radius:14px;

  background:rgba(255,255,255,.75);

  box-shadow:0 6px 18px rgba(17,17,17,.06);

  font-size:16px;
  font-weight:600;

  color:#222;

  transition:.35s ease;
}

.about-item::before{
  content:"\2713";

  flex:none;

  width:28px;
  height:28px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#f9961e;

  color:#fff;

  font-size:14px;
  font-weight:800;
}

.about-item:hover{
  transform:translateY(-4px);

  box-shadow:0 16px 32px rgba(17,17,17,.14);
}

.about-item:hover::before{
  animation:checkPulse .8s ease infinite;
}

/* COLOR PER ITEM (THEME PALETTE) */

.about-item:nth-child(1){
  border-color:#f9961e;

  background:rgba(249,150,30,.06);
}

.about-item:nth-child(1)::before{
  background:#f9961e;
}

.about-item:nth-child(2){
  border-color:#e53935;

  background:rgba(229,57,53,.05);
}

.about-item:nth-child(2)::before{
  background:#e53935;
}

.about-item:nth-child(3){
  border-color:#111;

  background:rgba(17,17,17,.04);
}

.about-item:nth-child(3)::before{
  background:#111;
}

.about-item:nth-child(4){
  border-color:#ff8f1f;

  background:rgba(255,143,31,.07);
}

.about-item:nth-child(4)::before{
  background:#ff8f1f;
}

/* =========================================================
ANIMATION
========================================================= */

@keyframes floatImage{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0px);
  }

}

@keyframes floatCard{

  0%{
    transform:translate(-50%, -50%) translateY(0px);
  }

  50%{
    transform:translate(-50%, -50%) translateY(-10px);
  }

  100%{
    transform:translate(-50%, -50%) translateY(0px);
  }

}

@keyframes checkPulse{

  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.18);
  }

}

@keyframes fadeInUp{

  from{
    opacity:0;

    transform:translateY(24px);
  }

  to{
    opacity:1;

    transform:translateY(0);
  }

}

/* =========================================================
TABLET
========================================================= */

@media(max-width:991px){

  .about-grid{
    grid-template-columns:1fr;

    gap:60px;
  }

  .about-image-area{
    min-height:580px;
  }

  .about-title{
    font-size:46px;
  }

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:767px){

  .about-section{
    padding:90px 0;
  }

  .about-container{
    padding:0 22px;
  }

  .about-image-area{
    min-height:480px;
  }

  .image-one{
    width:78%;
    height:340px;
  }

  .image-two{
    width:58%;
    height:220px;
  }

  .experience-box{

    padding:20px 24px;

    border-radius:18px;
  }

  .experience-box h4{
    font-size:33px;
  }

  .experience-box p{
    font-size:13px;
  }

  .about-title{
    font-size:37px;

    line-height:1.2;
  }

  .about-text{
    font-size:15px;

    line-height:1.8;
  }

  .about-list{
    grid-template-columns:1fr;
  }

}
/* MOBILE */

@media(max-width:767px){

  .experience-box{

    padding:14px 18px;

    max-width:180px;

    border-radius:14px;
  }

  .experience-box h4{
    font-size:24px;
  }

  .experience-box p{
    font-size:12px;
  }

}
/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .about-container{
    padding:0 18px;
  }

  .about-image-area{
    min-height:420px;
  }

  .image-one{
    height:300px;
  }

  .image-two{
    height:190px;
  }

  .about-title{
    font-size:33px;
  }

}





/* =========================================================
WHY SECTION
========================================================= */

.why-section{
  position:relative;

  padding:120px 0;

  background:#fafafa;

  overflow:hidden;
}

/* =========================================================
CONTAINER
========================================================= */

.why-container{
  max-width:1280px;

  margin:auto;

  padding:0 40px;
}

/* =========================================================
HEADING
========================================================= */

.section-heading{
  text-align:center;

  max-width:760px;

  margin:auto auto 70px;
}

/* =========================================================
TITLE
========================================================= */

.section-title{
  font-size:57px;

  line-height:1.15;

  font-weight:900;

  color:#111;

  margin-bottom:22px;
}

.section-title span{
  color:#f9961e;
}

/* =========================================================
SUBTITLE
========================================================= */

.section-subtitle{
  font-size:19px;

  line-height:1.9;

  color:#666;
}

/* =========================================================
GRID
========================================================= */
/* =========================================================
GRID PERFECT 3 ATAS 2 BAWAH CENTER
========================================================= */

.why-grid{
  display:grid;

  grid-template-columns:repeat(6, 1fr);

  gap:30px;
}

/* =========================================================
CARD UMUM
========================================================= */

.why-card{
  position:relative;

  background:#fff;

  border-radius:28px;

  padding:42px 34px;

  box-shadow:0 15px 50px rgba(0,0,0,.06);

  transition:.45s ease;

  overflow:hidden;
}

/* =========================================================
BARIS ATAS
========================================================= */

.why-card:nth-child(1){
  grid-column:1 / 3;
}

.why-card:nth-child(2){
  grid-column:3 / 5;
}

.why-card:nth-child(3){
  grid-column:5 / 7;
}

/* =========================================================
BARIS BAWAH CENTER
========================================================= */

.why-card:nth-child(4){
  grid-column:2 / 4;
}

.why-card:nth-child(5){
  grid-column:4 / 6;
}

/* =========================================================
ICON
========================================================= */

.why-icon{
  width:74px;
  height:74px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:22px;

  background:rgba(249,150,30,.10);

  color:#f9961e;

  font-size:37px;

  margin-bottom:26px;

  transition:.4s;
}

.why-card:hover .why-icon{
  transform:rotate(-6deg) scale(1.08);
}

/* =========================================================
TEXT
========================================================= */

.why-card h3{
  font-size:26px;

  font-weight:800;

  color:#111;

  margin-bottom:18px;

  line-height:1.3;
}

.why-card p{
  font-size:16px;

  line-height:1.9;

  color:#666;
}

/* =========================================================
KENAPA KAMI : PREMIUM SHADOW & ANIMATION
========================================================= */

.why-card{
  box-shadow:0 15px 50px rgba(0,0,0,.06), 0 4px 14px rgba(249,150,30,.05);
}

.why-card::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:6px;

  background:linear-gradient(90deg,#e53935,#f9961e,#e53935);

  background-size:200% 100%;

  border-radius:28px 28px 0 0;

  opacity:0;

  transition:.5s ease;

  animation:gradientMove 3s linear infinite;
}

.why-card:hover::before{
  opacity:1;
}

.why-card::after{
  content:"";

  position:absolute;

  inset:0;

  border-radius:28px;

  background:linear-gradient(135deg,rgba(249,150,30,.14),rgba(229,57,53,.10),transparent 60%);

  opacity:0;

  transition:.5s ease;

  pointer-events:none;

  z-index:0;
}

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

.why-card:hover{
  transform:translateY(-14px) scale(1.02);

  box-shadow:0 30px 80px rgba(249,150,30,.22), 0 18px 40px rgba(229,57,53,.16), 0 8px 24px rgba(0,0,0,.08);
}

.why-card .why-icon{
  position:relative;

  z-index:1;
}

.why-card:hover .why-icon{
  transform:rotate(-8deg) scale(1.12);

  background:linear-gradient(135deg,#e53935,#f9961e);

  color:#fff;

  box-shadow:0 14px 34px rgba(249,150,30,.45);

  animation:iconPop .6s ease;
}

.why-card h3,
.why-card p{
  position:relative;

  z-index:1;

  transition:.4s ease;
}

.why-card:hover h3{
  color:#e53935;

  transform:translateX(6px);
}

.why-card:hover p{
  color:#444;
}

/* =========================================================
SHINE SWEEP
========================================================= */

.why-card .shine{
  position:absolute;

  top:0;
  left:-80%;

  width:50%;
  height:100%;

  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);

  transform:skewX(-25deg);

  transition:left .8s ease;

  pointer-events:none;

  z-index:2;
}

.why-card:hover .shine{
  left:130%;
}

/* =========================================================
FLOAT AMBIENT (kartu 1 & 5)
========================================================= */

.why-card:nth-child(1),
.why-card:nth-child(5){
  animation:cardFloat 6s ease-in-out infinite;
}

.why-card:nth-child(2),
.why-card:nth-child(4){
  animation:cardFloat 7s ease-in-out 1.2s infinite;
}

.why-card:nth-child(3){
  animation:cardFloat 8s ease-in-out .6s infinite;
}

/* =========================================================
KEYFRAMES
========================================================= */

@keyframes cardFloat{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-8px);
  }

}

@keyframes iconPop{

  0%{
    transform:rotate(0) scale(1);
  }

  50%{
    transform:rotate(8deg) scale(1.3);
  }

  100%{
    transform:rotate(-8deg) scale(1.12);
  }

}

@keyframes gradientMove{

  0%{
    background-position:0% 0%;
  }

  100%{
    background-position:200% 0%;
  }

}

@media(prefers-reduced-motion:reduce){

  .why-card,
  .why-card:nth-child(1),
  .why-card:nth-child(2),
  .why-card:nth-child(3),
  .why-card:nth-child(4),
  .why-card:nth-child(5){
    animation:none;
  }

}

/* =========================================================
TABLET
========================================================= */

@media(max-width:991px){

  .why-grid{

    grid-template-columns:1fr 1fr;
  }

  .why-card:nth-child(1),
  .why-card:nth-child(2),
  .why-card:nth-child(3),
  .why-card:nth-child(4),
  .why-card:nth-child(5){

    grid-column:auto;
  }

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:767px){

  .why-grid{

    grid-template-columns:1fr;
  }

}
/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .why-container{
    padding:0 18px;
  }

  .section-title{
    font-size:33px;
  }

}





/* =========================================================
SERVICES SECTION
========================================================= */

.services-section{
  position:relative;

  padding:120px 0;

  background:#fff;

  overflow:hidden;
}

/* =========================================================
CONTAINER
========================================================= */

.services-container{
  max-width:1280px;

  margin:auto;

  padding:0 40px;
}

/* =========================================================
HEADING
========================================================= */

.services-heading{
  text-align:center;

  max-width:760px;

  margin:auto auto 70px;
}

/* =========================================================
TITLE
========================================================= */

.services-title{
  font-size:57px;

  line-height:1.15;

  font-weight:900;

  color:#111;

  margin-bottom:22px;
}

.services-title span{
  color:#f9961e;
}

/* =========================================================
SUBTITLE
========================================================= */

.services-subtitle{
  font-size:19px;

  line-height:1.9;

  color:#666;
}

/* =========================================================
GRID
========================================================= */

.services-grid{
  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:30px;
}

/* =========================================================
CARD
========================================================= */

.service-card{
  position:relative;

  background:#fff;

  border-radius:30px;

  padding:42px 34px;

  box-shadow:0 18px 50px rgba(0,0,0,.06);

  transition:.45s ease;

  overflow:hidden;

  border:1px solid rgba(0,0,0,.04);
}

/* TOP BORDER EFFECT */

.service-card::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:5px;

  background:#f9961e;

  transform:scaleX(0);

  transform-origin:left;

  transition:.4s;
}

.service-card:hover::before{
  transform:scaleX(1);
}

/* HOVER */

.service-card:hover{
  transform:translateY(-12px);

  box-shadow:0 30px 70px rgba(249,150,30,.14);
}

/* =========================================================
ICON
========================================================= */

.service-icon{
  width:78px;
  height:78px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:24px;

  background:rgba(249,150,30,.10);

  color:#f9961e;

  font-size:40px;

  margin-bottom:28px;

  transition:.4s;
}

.service-card:hover .service-icon{
  transform:rotate(-6deg) scale(1.08);

  background:#f9961e;

  color:#fff;
}

/* =========================================================
TEXT
========================================================= */

.service-card h3{
  font-size:28px;

  line-height:1.3;

  font-weight:800;

  color:#111;

  margin-bottom:18px;
}

.service-card p{
  font-size:16px;

  line-height:1.9;

  color:#666;
}

/* =========================================================
TABLET
========================================================= */

@media(max-width:991px){

  .services-grid{
    grid-template-columns:1fr 1fr;
  }

  .services-title{
    font-size:46px;
  }

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:767px){

  .services-section{
    padding:90px 0;
  }

  .services-container{
    padding:0 22px;
  }

  .services-grid{
    grid-template-columns:1fr;

    gap:24px;
  }

  .services-title{
    font-size:37px;

    line-height:1.2;
  }

  .services-subtitle{
    font-size:15px;

    line-height:1.8;
  }

  .service-card{
    padding:34px 28px;
  }

  .service-card h3{
    font-size:24px;
  }

  .service-card p{
    font-size:15px;
  }

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .services-container{
    padding:0 18px;
  }

  .services-title{
    font-size:33px;
  }

  .service-icon{
    width:68px;
    height:68px;

    font-size:33px;
  }

}





/* =========================================================
TEAM SECTION
========================================================= */

.team-section{
  position:relative;

  padding:120px 0;

  background:#fafafa;

  overflow:hidden;
}

/* =========================================================
CONTAINER
========================================================= */

.team-container{
  max-width:1280px;

  margin:auto;

  padding:0 40px;
}

/* =========================================================
HEADING
========================================================= */

.team-heading{
  text-align:center;

  max-width:760px;

  margin:auto auto 70px;
}

/* =========================================================
TITLE
========================================================= */

.team-title{
  font-size:57px;

  line-height:1.15;

  font-weight:900;

  color:#111;

  margin-bottom:22px;
}

.team-title span{
  color:#f9961e;
}

/* =========================================================
SUBTITLE
========================================================= */

.team-subtitle{
  font-size:19px;

  line-height:1.9;

  color:#666;
}

/* =========================================================
GRID
========================================================= */

.team-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:34px;
}

/* =========================================================
CARD
========================================================= */

.team-card{
  position:relative;

  background:#fff;

  border-radius:30px;

  padding:38px 26px 34px;

  text-align:center;

  box-shadow:0 18px 50px rgba(0,0,0,.06);

  transition:.45s ease;

  overflow:hidden;
}

.team-card:hover{
  transform:translateY(-8px);

  box-shadow:0 25px 60px rgba(249,150,30,.14);
}

/* =========================================================
FOTO : LINGKARAN POTONGAN KEPALA + BORDER TIPIS
========================================================= */

.team-image{
  position:relative;

  width:172px;
  height:172px;

  margin:0 auto 26px;

  border-radius:50%;

  padding:7px;

  border:2px solid #f9961e;

  background:#fff;

  box-shadow:0 10px 30px rgba(249,150,30,.15);

  transition:.45s ease;
}

.team-card:hover .team-image{
  transform:translateY(-4px);

  box-shadow:0 16px 38px rgba(249,150,30,.26);
}

.team-image img{
  width:100%;
  height:100%;

  border-radius:50%;

  object-fit:cover;

  object-position:center top;

  display:block;

  transition:1s;
}

.team-card:hover .team-image img{
  transform:scale(1.06);
}

/* =========================================================
TEXT
========================================================= */

.team-card h3{
  font-size:20px;

  font-weight:800;

  color:#111;

  margin-bottom:12px;

  line-height:1.4;
}

.team-card span{
  display:inline-block;

  font-size:13px;

  font-weight:700;

  color:#b3670a;

  background:#fff5e8;

  border:1px solid rgba(249,150,30,.35);

  letter-spacing:.5px;

  padding:7px 18px;

  border-radius:999px;

  margin-bottom:8px;
}

.team-card .team-value{
  font-size:14.5px;

  line-height:1.75;

  color:#888;

  margin:0;

  padding-top:16px;

  border-top:1px dashed #e8e8e8;
}

/* =========================================================
TABLET
========================================================= */

@media(max-width:991px){

  .team-grid{
    grid-template-columns:1fr 1fr;
  }

  .team-title{
    font-size:46px;
  }

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:767px){

  .team-section{
    padding:90px 0;
  }

  .team-container{
    padding:0 22px;
  }

  .team-grid{
    grid-template-columns:1fr;

    gap:26px;
  }

  .team-title{
    font-size:37px;

    line-height:1.2;
  }

  .team-subtitle{
    font-size:15px;

    line-height:1.8;
  }

  .team-card{
    padding:32px 20px 28px;
  }

}
/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .team-container{
    padding:0 18px;
  }

  .team-title{
    font-size:33px;
  }

  .team-image{
    width:150px;
    height:150px;
  }

}





/* =========================================================
CTA SECTION
========================================================= */

.cta-section{
  position:relative;

  padding:120px 0;

  overflow:hidden;

  background-image:url('../footer-bg.png');

  background-size:cover;
  background-position:center;

  background-attachment:fixed;
}

/* =========================================================
OVERLAY
========================================================= */

.cta-overlay{
  position:absolute;

  inset:0;

  background:
  linear-gradient(
  135deg,
  rgba(229,57,53,.55) 0%,
  rgba(249,150,30,.55) 55%,
  rgba(198,40,40,.55) 100%
  );
}

/* =========================================================
CONTAINER
========================================================= */

.cta-container{
  position:relative;

  z-index:2;

  max-width:1000px;

  margin:auto;

  padding:0 40px;
}

/* =========================================================
CONTENT
========================================================= */

.cta-content{
  text-align:center;

  color:#fff;
}

/* =========================================================
BADGE
========================================================= */

.cta-badge{
  display:inline-flex;

  align-items:center;

  padding:10px 18px;

  border-radius:100px;

  background:rgba(255,255,255,.14);

  border:1px solid rgba(255,255,255,.18);

  font-size:14px;
  font-weight:700;

  letter-spacing:1px;

  margin-bottom:26px;
}

/* =========================================================
TITLE
========================================================= */

.cta-title{
  font-size:64px;

  line-height:1.15;

  font-weight:900;

  margin-bottom:28px;
}

/* =========================================================
TEXT
========================================================= */

.cta-text{
  font-size:20px;

  line-height:1.9;

  color:rgba(255,255,255,.92);

  margin-bottom:18px;
}

/* =========================================================
BUTTON
========================================================= */

.cta-button-wrap{
  margin-top:42px;
}

.cta-button{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:17px 34px;

  background:#fff;

  color:#f9961e;

  text-decoration:none;

  border-radius:14px;

  font-size:16px;
  font-weight:800;

  transition:.4s ease;

  box-shadow:0 18px 40px rgba(0,0,0,.16);
}

.cta-button:hover{
  transform:translateY(-6px);

  background:#111;

  color:#fff;
}

/* =========================================================
TABLET
========================================================= */

@media(max-width:991px){

  .cta-title{
    font-size:51px;
  }

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:767px){

  .cta-section{
    padding:90px 0;

    background-attachment:scroll;
  }

  .cta-container{
    padding:0 22px;
  }

  .cta-title{
    font-size:37px;

    line-height:1.2;
  }

  .cta-text{
    font-size:15px;

    line-height:1.8;
  }

 .cta-button{
  width:auto;

  min-width:220px;

    padding:15px 24px;

    font-size:15px;
  }

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .cta-container{
    padding:0 18px;
  }

  .cta-title{
    font-size:33px;
  }

}





/* =========================================================
TRUSTED SECTION
========================================================= */

.trusted-section{
  position:relative;

  padding:110px 0;

  background:#fff;

  overflow:hidden;
}

/* =========================================================
CONTAINER
========================================================= */

.trusted-container{
  max-width:1280px;

  margin:auto;

  padding:0 40px;
}

/* =========================================================
HEADING
========================================================= */

.trusted-heading{
  text-align:center;

  max-width:760px;

  margin:auto auto 70px;
}

/* =========================================================
TITLE
========================================================= */

.trusted-title{
  font-size:57px;

  line-height:1.15;

  font-weight:900;

  color:#111;

  margin-bottom:22px;
}

.trusted-title span{
  color:#f9961e;
}

/* =========================================================
SUBTITLE
========================================================= */

.trusted-subtitle{
  font-size:19px;

  line-height:1.9;

  color:#666;
}

/* =========================================================
CAROUSEL
========================================================= */

.trusted-carousel{
  position:relative;

  width:100%;

  overflow:hidden;
}

/* TRACK */

.trusted-track{
  display:flex;

  align-items:center;

  gap:30px;

  width:max-content;

  animation:trustedScroll 28s linear infinite;
}

.trusted-carousel:hover .trusted-track{
  animation-play-state:paused;
}

/* =========================================================
ITEM
========================================================= */

.trusted-item{
  width:220px;
  height:120px;

  background:#fff;

  border-radius:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:28px;

  border:1px solid rgba(0,0,0,.06);

  box-shadow:0 10px 35px rgba(0,0,0,.05);

  flex-shrink:0;

  transition:.4s;
}

.trusted-item:hover{
  transform:translateY(-8px);

  box-shadow:0 18px 45px rgba(249,150,30,.14);
}

/* LOGO */

.trusted-item img{
  max-width:100%;
  max-height:70px;

  object-fit:contain;

  opacity:.9;

  transition:.4s;
}

.trusted-item:hover img{
  transform:scale(1.05);
  opacity:1;
}
/* =========================================================
ANIMATION
========================================================= */

@keyframes trustedScroll{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }

}

/* =========================================================
TABLET
========================================================= */

@media(max-width:991px){

  .trusted-title{
    font-size:46px;
  }

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:767px){

  .trusted-section{
    padding:90px 0;
  }

  .trusted-container{
    padding:0 22px;
  }

  .trusted-title{
    font-size:37px;

    line-height:1.2;
  }

  .trusted-subtitle{
    font-size:15px;

    line-height:1.8;
  }

  .trusted-item{
    width:180px;
    height:100px;

    padding:22px;
  }

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .trusted-container{
    padding:0 18px;
  }

  .trusted-title{
    font-size:33px;
  }

}





/* =========================================================
FOOTER
========================================================= */

.footer-section{
  position:relative;

  overflow:hidden;

  background-image:url('../malioboro.jpg');

  background-size:cover;
  background-position:center;

  padding:110px 0 30px;
}


.footer-overlay{
  position:absolute;

  inset:0;

  background:
  linear-gradient(
  135deg,
  rgba(15,15,15,.94) 0%,
  rgba(15,15,15,.90) 45%,
  rgba(249,150,30,.78) 100%
  );
}


.footer-container{
  position:relative;

  z-index:2;

  max-width:1280px;

  margin:auto;

  padding:0 40px;
}


.footer-grid{
  display:grid;

  grid-template-columns:1.5fr 1fr 1fr 1fr;

  gap:60px;

  margin-bottom:70px;
}


.footer-logo-wrap{
  display:flex;

  align-items:center;

  gap:14px;

  margin-bottom:26px;
}

.footer-logo-wrap img{
  width:58px;
  height:58px;

  object-fit:contain;
}

.footer-logo-wrap h3{
  font-size:29px;

  font-weight:800;

  color:#fff;
}


.footer-about{
  font-size:16px;

  line-height:2;

  color:rgba(255,255,255,.82);
}


.footer-title{
  font-size:22px;

  font-weight:800;

  color:#fff;

  margin-bottom:24px;
}


.footer-links{
  list-style:none;
}

.footer-links li{
  margin-bottom:16px;
}

.footer-links li a{
  text-decoration:none;

  color:rgba(255,255,255,.82);

  font-size:16px;

  transition:.3s;
}

.footer-links li a:hover{
  color:#f9961e;

  padding-left:6px;
}


.footer-contact p{
  font-size:16px;

  line-height:1.9;

  color:rgba(255,255,255,.82);

  margin-bottom:14px;
}


.footer-bottom{
  padding-top:30px;

  border-top:1px solid rgba(255,255,255,.10);

  text-align:center;
}

.footer-bottom p{
  font-size:15px;

  color:rgba(255,255,255,.72);
}


@media(max-width:991px){

  .footer-grid{
    grid-template-columns:1fr 1fr;

    gap:50px;
  }

}


@media(max-width:767px){

  .footer-section{
    padding:90px 0 30px;
  }

  .footer-container{
    padding:0 22px;
  }

  .footer-grid{
    grid-template-columns:1fr;

    gap:42px;

    margin-bottom:50px;
  }

  .footer-logo-wrap h3{
    font-size:24px;
  }

  .footer-title{
    font-size:20px;
  }

  .footer-about,
  .footer-links li a,
  .footer-contact p{
    font-size:15px;
  }

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .footer-container{
    padding:0 18px;
  }

}

/* =========================================================
FLOATING WHATSAPP BUTTON
========================================================= */

.wa-float{
  position:fixed;
  right:24px;
  bottom:24px;

  width:62px;
  height:62px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);

  color:#fff;

  box-shadow:0 10px 30px rgba(18,140,126,.45);

  z-index:999;

  text-decoration:none;

  animation:waFloatIn .6s cubic-bezier(.175,.885,.32,1.275) 1s backwards;

  transition:transform .35s ease,box-shadow .35s ease;
}

.wa-float:hover{
  transform:scale(1.1) rotate(6deg);

  box-shadow:0 14px 34px rgba(18,140,126,.6);
}

/* PULSE RING */

.wa-float::before,
.wa-float::after{
  content:"";

  position:absolute;
  inset:0;

  border-radius:50%;

  border:2px solid #25d366;

  animation:waPing 2.2s ease-out infinite;
}

.wa-float::after{
  animation-delay:1.1s;
}

/* ICON */

.wa-float-icon{
  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;

  z-index:1;
}

.wa-float-icon svg{
  width:100%;
  height:100%;
}

/* LABEL */

.wa-float-label{
  position:absolute;
  right:78px;
  top:50%;

  transform:translateY(-50%) translateX(10px);

  padding:10px 18px;

  border-radius:50px;

  background:#128c7e;

  color:#fff;

  font-size:14px;
  font-weight:700;

  white-space:nowrap;

  opacity:0;

  visibility:hidden;

  transition:.3s ease;

  box-shadow:0 6px 18px rgba(18,140,126,.35);
}

.wa-float-label::after{
  content:"";

  position:absolute;
  right:-7px;
  top:50%;

  transform:translateY(-50%);

  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:9px solid #128c7e;
}

.wa-float:hover .wa-float-label{
  opacity:1;

  visibility:visible;

  transform:translateY(-50%) translateX(0);
}

/* KEYFRAMES */

@keyframes waPing{

  0%{
    transform:scale(1);

    opacity:.7;
  }

  100%{
    transform:scale(1.8);

    opacity:0;
  }

}

@keyframes waFloatIn{

  0%{
    transform:scale(0) rotate(-45deg);

    opacity:0;
  }

  70%{
    transform:scale(1.15) rotate(4deg);

    opacity:1;
  }

  100%{
    transform:scale(1) rotate(0deg);

    opacity:1;
  }

}

/* RESPONSIVE */

@media(max-width:767px){

  .wa-float{
    right:16px;
    bottom:16px;

    width:54px;
    height:54px;
  }

  .wa-float-icon{
    width:30px;
    height:30px;
  }

  .wa-float-label{
    display:none;
  }

}

/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

  .wa-float,
  .wa-float::before,
  .wa-float::after{
    animation:none;
  }

}

/* =========================================================
FLOATING WHATSAPP : POPUP AJAKAN
========================================================= */

.wa-popup-wrap{
  position:fixed;

  right:24px;
  bottom:24px;

  z-index:1000;

  display:flex;
  flex-direction:column;
  align-items:flex-end;

  gap:18px;
}

.wa-popup-anchor .wa-float{
  position:relative;
  right:auto;
  bottom:auto;
}

.wa-popup{
  position:relative;

  width:min(340px,calc(100vw - 32px));

  background:#fff;

  border-radius:22px;

  overflow:hidden;

  box-shadow:0 30px 80px rgba(0,0,0,.30),0 8px 24px rgba(18,140,126,.18);

  opacity:0;

  visibility:hidden;

  transform:translateY(30px) scale(.82);

  transform-origin:bottom right;

  pointer-events:none;

  transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1),visibility .45s;
}

.wa-popup-wrap.open .wa-popup{
  opacity:1;

  visibility:visible;

  transform:none;

  pointer-events:auto;
}

/* ---------- HEADER WHATSAPP ---------- */

.wa-popup-header{
  position:relative;

  display:flex;

  align-items:center;

  gap:12px;

  padding:14px 44px 14px 16px;

  background-color:#075e54;

  background-image:radial-gradient(rgba(255,255,255,.07) 10%,transparent 11%),radial-gradient(rgba(255,255,255,.06) 10%,transparent 11%),linear-gradient(135deg,#075e54 0%,#128c7e 100%);

  background-size:34px 34px,34px 34px,100% 100%;

  background-position:0 0,17px 17px,0 0;

  color:#fff;
}

.wa-popup-avatar{
  width:46px;

  height:46px;

  flex:0 0 auto;

  border-radius:50%;

  border:2px solid rgba(255,255,255,.35);

  background:#fff;

  overflow:hidden;

  display:flex;

  align-items:center;

  justify-content:center;

  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

.wa-popup-avatar img{
  width:100%;

  height:100%;

  object-fit:cover;
}

.wa-popup-htext{
  display:flex;

  flex-direction:column;

  gap:2px;

  min-width:0;
}

.wa-popup-htext strong{
  font-size:15px;

  font-weight:800;

  line-height:1.25;
}

.wa-popup-htext strong span{
  color:#ffd27d;
}

.wa-popup-status{
  display:flex;

  align-items:center;

  gap:6px;

  font-size:11.5px;

  font-weight:600;

  color:rgba(255,255,255,.88);
}

.wa-popup-status i{
  width:8px;

  height:8px;

  border-radius:50%;

  background:#25d366;

  flex:0 0 auto;

  animation:waOnline 1.8s ease-out infinite;
}

@keyframes waOnline{

  0%{
    box-shadow:0 0 0 0 rgba(37,211,102,.70);
  }

  70%{
    box-shadow:0 0 0 8px rgba(37,211,102,0);
  }

  100%{
    box-shadow:0 0 0 0 rgba(37,211,102,0);
  }

}

/* ---------- TOMBOL TUTUP ---------- */

.wa-popup-close{
  position:absolute;

  top:12px;
  right:12px;

  width:28px;
  height:28px;

  border:none;

  border-radius:50%;

  background:rgba(0,0,0,.20);

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  transition:background .25s ease,transform .25s ease;

  z-index:2;
}

.wa-popup-close:hover{
  background:rgba(0,0,0,.35);

  transform:rotate(90deg);
}

/* ---------- AREA CHAT ---------- */

.wa-popup-body{
  padding:16px 13px 12px;

  background-color:#ece5dd;

  background-image:radial-gradient(rgba(117,74,25,.06) 10%,transparent 11%),radial-gradient(rgba(117,74,25,.05) 10%,transparent 11%);

  background-size:30px 30px,30px 30px;

  background-position:0 0,15px 15px;

  max-height:280px;

  overflow-y:auto;
}

/* ---------- GELEMBUNG CHAT ---------- */

.wa-bubble{
  position:relative;

  max-width:94%;

  background:#fff;

  border-radius:14px;

  padding:10px 14px 8px;

  font-size:13.5px;

  line-height:1.55;

  color:#333;

  box-shadow:0 2px 6px rgba(0,0,0,.08);

  margin-bottom:10px;
}

.wa-bubble-in::before{
  content:"";

  position:absolute;

  left:-8px;
  top:-1px;

  width:14px;
  height:18px;

  background:#fff;

  border-radius:0 0 12px 0;

  transform:skewX(-14deg);
}

.wa-bubble-time{
  display:block;

  margin-top:4px;

  text-align:right;

  font-size:10.5px;

  color:#9aa5ae;
}

/* ---------- TYPING INDICATOR ---------- */

.wa-typing{
  padding:13px 16px;
}

.wa-dots{
  display:inline-flex;

  gap:5px;
}

.wa-dots i{
  width:7px;

  height:7px;

  border-radius:50%;

  background:#b8bdc2;

  animation:waDots 1.2s ease-in-out infinite;
}

.wa-dots i:nth-child(2){
  animation-delay:.15s;
}

.wa-dots i:nth-child(3){
  animation-delay:.3s;
}

@keyframes waDots{

  0%,60%,100%{
    transform:translateY(0);

    opacity:.5;
  }

  30%{
    transform:translateY(-5px);

    opacity:1;
  }

}

/* ---------- PESAN KEDUA ---------- */

.wa-msg2{
  display:none;
}

/* ---------- QUICK CHIPS ---------- */

.wa-quick{
  display:flex;

  flex-direction:column;

  gap:8px;

  margin-top:2px;
}

.wa-quick button{
  width:100%;

  border:1.5px solid rgba(18,140,126,.30);

  background:rgba(255,255,255,.92);

  color:#075e54;

  font-size:13px;

  font-weight:700;

  padding:9px 14px;

  border-radius:12px;

  cursor:pointer;

  text-align:left;

  transition:.25s ease;
}

.wa-quick button::before{
  content:"";

  display:inline-block;

  width:8px;
  height:8px;

  margin-right:10px;

  border-radius:50%;

  background:#25d366;

  vertical-align:middle;
}

.wa-quick button:hover{
  background:#25d366;

  border-color:#25d366;

  color:#fff;

  transform:translateX(4px);
}

.wa-quick button:hover::before{
  background:#fff;
}

/* ---------- CTA ---------- */

.wa-popup-cta{
  padding:12px 13px 14px;

  background:#fff;
}

.wa-chat-btn{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  padding:13px;

  border-radius:14px;

  background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);

  color:#fff;

  font-size:15px;

  font-weight:800;

  text-decoration:none;

  letter-spacing:.2px;

  box-shadow:0 10px 26px rgba(37,211,102,.38);

  transition:.3s ease;
}

.wa-chat-btn:hover{
  transform:translateY(-2px);

  box-shadow:0 14px 32px rgba(37,211,102,.5);
}

/* ---------- RESPONSIVE POPUP ---------- */

@media(max-width:767px){

  .wa-popup-wrap{
    right:16px;
    bottom:16px;

    gap:14px;
  }

  .wa-popup{
    width:calc(100vw - 32px);
  }

}

@media(prefers-reduced-motion:reduce){

  .wa-popup,
  .wa-popup-status i,
  .wa-dots i{
    animation:none;
  }

  .wa-popup{
    transition:none;
  }

}



/* =========================================================
SCROLL REVEAL ANIMATIONS (PREMIUM)
========================================================= */

[data-reveal]{
  opacity:0;

  transform:translateY(46px);

  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);

  will-change:opacity,transform;
}

[data-reveal="left"]{
  transform:translateX(-64px);
}

[data-reveal="right"]{
  transform:translateX(64px);
}

[data-reveal="zoom"]{
  transform:scale(.88);
}

[data-reveal="up"]{
  transform:translateY(46px);
}

[data-reveal="down"]{
  transform:translateY(-36px);
}

[data-reveal].in-view{
  opacity:1;

  transform:none;
}

/* SNAPPY HOVER FOR REVEALED INTERACTIVE ELEMENTS */

.about-item[data-reveal].in-view,
.why-card[data-reveal].in-view,
.service-card[data-reveal].in-view,
.team-card[data-reveal].in-view,
.btn-hero[data-reveal].in-view,
.cta-button[data-reveal].in-view{
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,background .35s ease;
}

/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

  [data-reveal]{
    opacity:1;

    transform:none;

    transition:none;
  }

}

/* =========================================================
FAQ SECTION
========================================================= */

.faq-section{
  padding:100px 0;

  background:linear-gradient(180deg,#fff 0%,#fff7ef 100%);
}

.faq-inner{
  max-width:840px;

  margin:48px auto 0;

  padding:0 24px;
}

.faq-item{
  background:#fff;

  border:1px solid rgba(0,0,0,.06);

  border-radius:16px;

  margin-bottom:16px;

  overflow:hidden;

  box-shadow:0 8px 24px rgba(0,0,0,.04),0 3px 10px rgba(249,150,30,.05);

  transition:border-color .3s ease,box-shadow .35s ease,transform .35s ease;
}

.faq-item:hover{
  transform:translateY(-4px);

  border-color:rgba(249,150,30,.45);

  box-shadow:0 18px 44px rgba(249,150,30,.16),0 8px 22px rgba(0,0,0,.08);
}

.faq-item.open{
  border-color:#f9961e;

  box-shadow:0 18px 44px rgba(249,150,30,.20),0 8px 22px rgba(0,0,0,.06);
}

.faq-item:hover .faq-question{
  color:#e53935;
}

.faq-item:hover .faq-plus{
  background:#f9961e;

  transform:rotate(90deg);
}

.faq-item:hover .faq-plus::before,
.faq-item:hover .faq-plus::after{
  background:#fff;
}

.faq-item.open:hover .faq-plus{
  transform:rotate(180deg);
}

.faq-question{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  padding:20px 24px;

  background:transparent;

  border:none;

  cursor:pointer;

  text-align:left;

  color:#111;

  font-size:17px;
  font-weight:700;

  font-family:inherit;
}

.faq-plus{
  flex:none;

  position:relative;

  width:36px;
  height:36px;

  border-radius:50%;

  background:rgba(249,150,30,.12);

  transition:.3s ease;
}

.faq-plus::before,
.faq-plus::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  background:#f9961e;

  border-radius:2px;

  transition:transform .35s ease;
}

.faq-plus::before{
  width:2px;
  height:16px;

  transform:translate(-50%,-50%);
}

.faq-plus::after{
  width:16px;
  height:2px;

  transform:translate(-50%,-50%);
}

.faq-item.open .faq-plus{
  background:#f9961e;
}

.faq-item.open .faq-plus::before,
.faq-item.open .faq-plus::after{
  background:#fff;
}

.faq-item.open .faq-plus::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

.faq-answer{
  max-height:0;

  overflow:hidden;

  transition:max-height .45s ease;
}

.faq-item.open .faq-answer{
  max-height:500px;
}

.faq-answer p{
  padding:0 24px 22px;

  color:#555;

  font-size:15.5px;

  line-height:1.8;
}

@media(max-width:640px){

  .faq-section{
    padding:80px 0;
  }

  .faq-question{
    font-size:15px;

    padding:16px 16px;
  }

  .faq-answer p{
    padding:0 16px 16px;

    font-size:14.5px;
  }

}

/* =========================================================
ANIMASI WARNA BERJALAN : TITLE SPAN (MERAH -> JINGGA)
========================================================= */

.hero-title span,
.about-title span,
.section-title span,
.services-title span,
.team-title span,
.trusted-title span,
.lead-name span,
.lead-role,
.cta-title span{
  color:transparent !important;

  -webkit-background-clip:text;
  background-clip:text;

  background-image:linear-gradient(90deg,#e53935,#f9961e,#e53935,#f9961e);

  background-size:300% 100%;

  animation:titleGradient 3s linear infinite;
}

@keyframes titleGradient{

  0%{
    background-position:0% 50%;
  }

  100%{
    background-position:300% 50%;
  }

}

@media(prefers-reduced-motion:reduce){

  .hero-title span,
  .about-title span,
  .section-title span,
  .services-title span,
  .team-title span,
  .trusted-title span,
  .lead-name span,
  .lead-role,
  .cta-title span{
    animation:none;

    color:#f9961e !important;

    -webkit-background-clip:initial;
    background-clip:initial;

    background-image:none;
  }

}

/* =========================================================
PREMIUM GLOBAL : ANIMASI KEREN SEMUA SECTION
========================================================= */

/* ---------- SECTION BADGE : GRADASI BERJALAN ---------- */

.section-badge{
  background:linear-gradient(120deg,rgba(229,57,53,.14),rgba(249,150,30,.22),rgba(229,57,53,.14)) !important;

  background-size:300% 100% !important;

  animation:premBadge 5s linear infinite;

  transition:.35s ease;
}

.section-badge:hover{
  background:linear-gradient(120deg,#e53935,#f9961e,#e53935) !important;

  background-size:300% 100% !important;

  color:#fff !important;

  transform:translateY(-3px) scale(1.06);

  box-shadow:0 12px 30px rgba(249,150,30,.4);
}

@keyframes premBadge{

  0%{
    background-position:0% 50%;
  }

  100%{
    background-position:300% 50%;
  }

}

/* ---------- SEMUA KARTU : HOVER PREMIUM ---------- */

.service-card,
.step-card,
.value-card,
.stat-card,
.team-card,
.about-item,
.faq-item{
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease,border-color .3s ease,background .3s ease !important;
}

.service-card:hover,
.step-card:hover,
.value-card:hover,
.stat-card:hover,
.team-card:hover{
  transform:translateY(-12px) scale(1.02) !important;

  border-color:rgba(249,150,30,.35) !important;

  box-shadow:0 28px 70px rgba(249,150,30,.18),0 12px 30px rgba(229,57,53,.10),0 6px 18px rgba(0,0,0,.06) !important;
}

.about-item:hover{
  transform:translateY(-4px) scale(1.03) !important;

  border-color:rgba(249,150,30,.45) !important;

  box-shadow:0 12px 30px rgba(249,150,30,.18) !important;
}

/* ---------- LINE GRADIEN ATAS KARTU ---------- */

.service-card::before,
.step-card::before,
.value-card::before,
.stat-card::before,
.team-card::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:5px;

  background:linear-gradient(90deg,#e53935,#f9961e,#e53935);

  background-size:200% 100%;

  border-radius:22px 22px 0 0;

  opacity:0;

  transition:opacity .4s ease;

  animation:premTopLine 3s linear infinite;

  pointer-events:none;
}

.service-card:hover::before,
.step-card:hover::before,
.value-card:hover::before,
.stat-card:hover::before,
.team-card:hover::before{
  opacity:1;
}

@keyframes premTopLine{

  0%{
    background-position:0% 0%;
  }

  100%{
    background-position:200% 0%;
  }

}

/* ---------- SHINE SWEEP KARTU ---------- */

.service-card::after,
.step-card::after,
.value-card::after,
.stat-card::after,
.team-card::after{
  content:"";

  position:absolute;

  top:0;
  left:-80%;

  width:45%;
  height:100%;

  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);

  transform:skewX(-25deg);

  transition:left .9s ease;

  pointer-events:none;

  z-index:1;
}

.service-card:hover::after,
.step-card:hover::after,
.value-card:hover::after,
.stat-card:hover::after,
.team-card:hover::after{
  left:135%;
}

/* ---------- ICON KARTU : GAYUNG ---------- */

.service-card:hover .service-icon,
.step-card:hover .step-num,
.value-card:hover .value-icon,
.stat-card:hover .stat-num{
  transform:rotate(-8deg) scale(1.12);

  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}

/* ---------- GAMBAR : FLOAT HALUS ---------- */

.ph-img,
.gov-image img,
.lead-media img{
  animation:premFloat 7s ease-in-out infinite;
}

@keyframes premFloat{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-10px);
  }

}

/* ---------- SECTION HEADING : NADIN MASUK ---------- */

.section-heading .section-badge,
.cs-heading .section-badge{
  animation:premBadge 5s linear infinite,premPulse 2.5s ease-in-out infinite;
}

@keyframes premPulse{

  0%,100%{
    box-shadow:0 0 0 0 rgba(249,150,30,.0);
  }

  50%{
    box-shadow:0 0 22px 4px rgba(249,150,30,.25);
  }

}

/* ---------- REDUCED MOTION ---------- */

@media(prefers-reduced-motion:reduce){

  .section-badge,
  .service-card,
  .step-card,
  .value-card,
  .stat-card,
  .team-card,
  .about-item,
  .ph-img,
  .gov-image img,
  .lead-media img{
    animation:none !important;
  }

  .service-card:hover,
  .step-card:hover,
  .value-card:hover,
  .stat-card:hover,
  .team-card:hover,
  .about-item:hover{
    transform:none !important;
  }

}



/* =========================================================
GLOBAL : PERBESAR FONT PARAGRAF
========================================================= */

p{
  font-size:17.5px;
}

.hero-subtitle,
.section-subtitle,
.services-subtitle,
.team-subtitle,
.trusted-subtitle,
.page-intro,
.about-text{
  font-size:19px;
}

.cta-text{
  font-size:21px;
}