@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Inter:400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Public Sans:400,500,600,700,800,900');

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1200px !important;
    }
}

.navbar {
    height: 64px !important;
}

.nav-item:hover .nav-link,
.nav-item.active .nav-link {
    color: #3EA940;
  }
  
  .btn-login {
    border: 1px solid #3EA940;
    background: #3EA940;
    color: #fff;
    font-family: Public Sans;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0px;
    text-transform: capitalize;
    box-shadow: 0px 2px 6px 0px rgba(32, 106, 93, 0.3);
}

  .button-login:hover .btn-login:hover {
    border: 1px solid #3a9f3c;
    background: #3a9f3c;
    color: #fff;
  }

  .button-login .btn-login:hover {
    background: #3a9f3c;
    color: #fff
  }
  
  .contact-btn {
    background-color: #fff7f5;
    border: none;
    color: #f05a28;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
  }

  .contact-btn:hover {
    background-color: #f05a28;
    color: #fff;
  }

  .contact-btn i {
    margin-right: 8px;
  }

  .navbar-collapse {
    background-color: transparent;
    transition: background-color 0.3s ease;
  }

  /* Optional: Customize the button (if needed) */
  .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1);
    /* Customize border color */
  }

  @media screen and (min-width: 1200px) {
      .navbar-nav {
        gap: 20px; 
      }
  }
  @media screen and (max-width: 768px) {
    .navbar {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }

.mxs{
  margin-top: 40px;
  margin-bottom: 70px;
}
.hero {
  background-image: url("https://res.cloudinary.com/daraki09f/image/upload/v1735541365/kazee-ai/bg-img-hero-new.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero.custom-container {
  height: 700px;
}
.btn-custom {
  min-width: 38px;
  min-height: 38px;
  padding: 12px 32px;
  border: 1px solid var(--Brand-Seashell-Peach-400, #3EA940);
  background: var(--White, #FFF);
}
.btn-custom span {
  color: #3EA940;
}
.btn-custom:hover {
  background: #3EA940;
}
.btn-custom:hover span {
  color: #fff;
}

@media screen and (max-width: 992px) {
  .hero .wrapper_content {
    padding-top: 100px;
  }
}


.txt-new-2{
  font-family: Inter;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #292929;
}

.btn-request-demo{
  color: #fff;
  background-color: #EB5D24;
  border: 1px solid #EB5D24;
  padding: 10px 18px;
  border-radius: 6px;
  font-family: Inter;
  font-size: 18px;
  font-weight: 500;
}

.btn-try{
  color: #EB5D24;
  background-color: transparent;
  border: 1px solid #EB5D24;
  padding: 10px 18px;
  border-radius: 6px;
  font-family: Inter;
  font-size: 18px;
  font-weight: 500;
}

.section-1 {
    /* background: url(https://res.cloudinary.com/daraki09f/image/upload/v1736598694/kazee-ai/section_16.png);
    background-repeat: no-repeat;
    background-size: cover; */
    background-color: #FDFDFD;
}


.text-section4{
  color: #464646;
  font-family: Inter;
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;

}
.card-section1{
  padding: 20px 60px 20px 20px;
  /* background-color: #FDFDFD; */
}
.card-section2 {
    margin-bottom: 20px;
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #F5F5F5;
    background-color: #fff;
}

.img-hero-x2 {
    width: 60%;
    position: absolute;
    left: 0;
}
.txt-vitural-1, .txt-insights-1, .txt-title{
  font-family: Inter;
  font-size: 35px;
  font-weight: 600;
  line-height: 150%;
  color: #000000;
}
.txt-vitural-2, .txt-insights-2, .txt-subtitle{
  color: var(--Mute-Grey-dark-25, #595959);
  font-family: Inter;
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

@media screen and (max-width: 768px) {
  .txt-vitural-1, .txt-insights-1, .txt-title{
    font-size: 24px !important;
  }
  .txt-vitural-2, .txt-insights-2, .txt-subtitle{
    font-size: 15px !important;
  }
}

.margin-2{
  margin-top: 20px;
  margin-bottom: 40px;
}
.button-read {
    display: inline-block;
    padding: 10px 20px;
    background-color: #EB5D24;
    border: unset;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
}

.txt_1{
    font-family: Inter;
    font-size: 35px;
    font-weight: 600;
    line-height: 52.5px;
    color: #000000;
  }
  .txt_2{
    color: #595959;
    font-family: Roboto;
    font-size: 21px;
    font-weight: 400;
    line-height: 31.5px;
  }
  .bg-sc3{
    background:url(https://res.cloudinary.com/daraki09f/image/upload/v1735771106/kazee-ai/fitur-unggulan-1.png); 
    background-repeat: no-repeat; 
    background-size: cover;
    /* margin-bottom: 60px; */
  }
  .padding-1{
    padding: 110px 40px;
  }
  .padding-2{
    padding-top: 25px;
    padding-bottom: 10px;
  }
  .txt_3{
    color: #464646;
    font-family: Inter;
    font-size: 18px;
    font-weight: 400;
    line-height: 23.4px;
    text-align: left;
  }
  .mt-40{
    margin-top: 40px;
  }

  .bg-sc5{
    background:url(https://res.cloudinary.com/daraki09f/image/upload/v1736233478/kazee-ai/fiturunggulan-waktoo2.png); 
    background-repeat: no-repeat; 
    background-size: cover;

  }

/* ============= content card color (GLOBAL - jangan di ubah) ================= */
  .bglks{
    width: 100%;
    padding: 40px;
    border-radius: 20px;
    background-color:#FFF6F0;
  }
  @media screen and (max-width: 1400px) {
    .bglks{
      padding: 30px;
    }
  }
  @media screen and (max-width: 768px) {
    .bglks{
      width: 100%;
      padding: 20px;
    }
  }
/* ============= END content card color (GLOBAL - jangan di ubah) ================= */

  .padding-100{
    padding:100px 0px;
  }

  .col-plus-3{
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

.dxz-5{
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dxz-1{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dxz-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out;transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out,-o-transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-inner>.item.active.right,.carousel-inner>.item.next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);left:0}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);left:0}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);left:0}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);background-color:rgba(0,0,0,0);filter:alpha(opacity=50);opacity:.5}.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;outline:0;filter:alpha(opacity=90);opacity:.9}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block;margin-top:-10px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:"\2039"}.carousel-control .icon-next:before{content:"\203a"}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000\9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-10px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-10px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}

.img-sbi{
  width: 52px;
  height: 52px;
  margin-top: 30px;
}

.txt-sbi1{
  color: #282D43;
  font-family: Inter;
  font-size: 23px;
  font-weight: 500;
  line-height: 29.9px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.txt-sbi2{
  color: #464646;
  font-family: Inter;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}

.toc1{
  color: #000;
  font-family: Inter;
  font-size: 35px;
  font-style: normal;
  font-weight: 600;
  margin-bottom: 20px;
}

.toc2{
  color: #595959;
  font-family: Roboto;
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: 31.5px;
}

.card-testimonial{
  width: 708px;
  height: 286px;
  padding: 40px;
  border-radius: 20px;
  border: 1px solid #F5F5F5;
  background-color: #fff;
}

.img-bullets{
  width: 206;
  height: 206;
  border-radius: 999px;
}

.square-card{
  margin-left: 55px;
}

.text-beaf{
  color: #283252;
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}

.text-beaf-content{
  color: #3D3D3D;
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.image-container img {
  display: block;
  width: 100%; /* Atur sesuai kebutuhan */
}

.text-overlay {
    position: absolute;
    bottom: 15px;
    background-color: #fff;
    font-family: Inter;
    font-weight: 600;
    vertical-align: middle;
    color: #D52976;
    border-radius: 99px;
}

.bgsection1{
  background: linear-gradient(105.22deg, #F1F9EB 0%, #FFFBE5 100.77%); 
  padding-bottom: 100px; 
}

@media screen and (min-width: 1030px) {
  .video-dekstop{
    position: absolute;
    width: 80%;
    z-index: 0;
    right: 0;
    overflow: hidden;
    clip-path: inset(120px 0 140px 0px);
    margin-right: 23px;
  }

  .mt88{
    margin-top: 88px;
  }
  .pt60{
    padding-top: 60px;
  }
  .pdbtn{
    padding-bottom:0px !important;
  }
  .pdtop{
    padding-top:0px !important;
  }
  .pbx0{
    padding-bottom: 0px !important;
  }
  .img-fluidxxs {
    width: 370px;
      height: auto;
  }
  .bglpss{
    background: url(../images/bg-features.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 1100px;
  }
  .image-wrapperxxx {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  .footer.custom-container {
      border-radius: 60px;
  }
  .mdcards{
    height: 190px;
  }
  .txt-esgtrack1{
    font-size: 24px;
    line-height: 38px;
  }
  .txt-esgtrack2 {
    font-size: 18px;
    line-height: 28px;
  }
  .card-offers {
    padding: 24px;
    height: 390px;
  }
  .pggt56{
    padding-right: 56px;
  }
  .txbgr1{
    font-size: 28px;
  }
  .txbig {
      font-size: 46px;
      line-height: 68px;
  }
  .txt-pricing1 {
      font-size: 38px;
      line-height: 56px;
  }
  .rotate1{
    rotate: -2deg;
  }
  .rotate2{
    rotate: 2deg
  }
  .mick{
    margin-top: -475px;
  }
  .linehr {
      position: absolute;
      width: 100%;
      left: 0;
      margin-top: -120px;
  }
  .grenn-egs{
    font-size: 15px;
    line-height: 22px;
  }
  .img-shape2{
    position:absolute;
    z-index: -1;
    margin-left: -30px;
  }
  .card-egst{
    position: absolute;
    margin-top: -130px;
    margin-left: 20px;
  }
  .card-egst2{
    margin-top: -115px !important;
  }
  .text-overlay.left {
    left: 30px;
  }

  .text-overlay.right {
    right: 30px;
  }
  .text-overlay {
      font-size: 20px;
      padding: 12px 20px;
  }
  .img-most {
      position: absolute;
      margin-top: -35px;
      margin-left: 220px;
  }
  .mgh1{
    height: 600px;
  }

  .mgh2{
    height: 600px;
  }
  .containersdd {
    width: 90%;
    margin-bottom: 80px;
  }
  .h400{
    height: 440px;
  }
  .bpss{
    background-color: #FAFAFA; 
    padding: 60px 60px 50px 60px;
  }
  .plsd{
    padding-left: 120px;
    padding-right: 120px;
  }
  .txtsTitle{
    font-size: 23px;
  }

  .txtsContent{
    font-size: 18px;
  }
  .img-arss{
    height: 600px; 
    width: auto;
  }
  .txt-medium-active {
      color: #3EA940 !important;
  }
  .txt-medium-active2 {
    color: #3EA940 !important;
    background-color: var(--Color-Palette-primary-opacity-light, rgba(62, 169, 64, 0.16));
    border-radius: 4px;
  }
  .custom-container-plus {
      padding: 40px 120px !important;
  }
  .img-be{
    width: 32px;
    height: 32px;
    margin-right: 8px;
  }
  .text-beaf{
    font-size: 23px;
  }
  .text-beaf-content{
    font-size: 18px;
  }
  #mobile-sidebar-icons{
    display: none;
  }
  .hero-sec2 {
    background-image: url("https://res.cloudinary.com/daraki09f/image/upload/v1736599672/kazee-ai/fitur-section-2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .bg-sc4{
    background:url(https://res.cloudinary.com/daraki09f/image/upload/v1736232496/kazee-ai/fiturunggulan-waktoo.jpg); 
    background-repeat: no-repeat; 
    background-size: cover;
  }
  .padding-1{
    padding: 110px 40px;
  }
  .padding-3{
    padding: 110px 0px 110px 90px;
  }
  
  .bg-sc3{
    background:url(https://res.cloudinary.com/daraki09f/image/upload/v1735771106/kazee-ai/fitur-unggulan-1.png); 
    background-repeat: no-repeat; 
    background-size: cover;
    /* margin-bottom: 60px; */
  }
  .mtmb{
    margin-top:100px; 
    margin-bottom: 100px;
  }
  .txt-new-1{
    font-family: Inter;
    font-size: 52px;
    font-weight: 700;
    line-height: 53.56px;
    color: #292929;
  }
  .img-hero-x{
    position: absolute;
    right: 0;
    width: 741px;
  }

  #mobile-image{
    display: none;
  }
  .section-1 {
      padding: 60px 120px;
  }
  .text-section1{
    font-family: Inter;
    font-size: 35px;
    font-weight: 600;
    line-height: 52.5px;
    color: #000000;
    padding-bottom: 20px;
  }
  .text-section2{
    font-family: Roboto;
    font-size: 21px;
    font-weight: 400;
    line-height: 31.5px;
    color: #595959;
  }
  
  .text-section3{
    color: #282D43;
    font-family: Inter;
    font-size: 23px;
    font-weight: 500;
    line-height: 29.9px;
    padding: 10px 0px;
  }
  .img-slider-two{
    width:100%;
  }
  .custom-container2 {
      padding: 52px 120px;
  }
  .error-message {
    position: absolute;
  }
  .fm40{
    margin-top: 40px;
  }
  .mdlls{
    padding: 30px 54px !important;
    box-shadow: unset !important;
  }
  .pdlsd{
    padding-left:0px !important;
    padding-right: 0px !important;
  }
  .bgsection1{
    border-radius: 0px 0px 50px 50px;
  }
}

@media screen and (max-width: 1030px) {
  .video-dekstop {
    width: 100% !important;
    overflow: hidden;
    margin-bottom: -200px;
    clip-path: inset(20px 0 100px 0px);
  }

  .video-dekstop video {
      width: 180% !important;
      height: auto !important;
      object-fit: cover;
      margin-left: -73%;
      margin-top: 50px;
  }


  .plan-card {
    margin-bottom: 20px;
  }
  .pmb20{
    margin: 20px 0px;
  }
  .img-logos{
    height: 40px;
  }
  .bglpss{
    background: url(../images/bg-features.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 350px;
  }
  .image-wrapperxxx {
    display: none !important;
  }
  .mb60{
    padding-left: 60px;
  }
  .txt-esgtrack1{
    font-size: 20px;
    line-height: 38px;
  }
  .txt-esgtrack2 {
    font-size: 16px;
    line-height: 20px;
  }
  .card-offers {
    padding: 16px;
  }
  .txbgr1{
    font-size: 23px;
  }
  .txbig {
    font-size: 32px;
    line-height: 68px;
  }
  .txt-pricing1 {
      font-size: 28px;
      line-height: 36px;
  }
  .grenn-egs{
    font-size: 12px;
    line-height: 14px;
  }
  .pd20{
    padding:0px 20px;
  }
  .linehr {
      display: none;
  }
  .img-lkep{
    width: 50px;
    height: auto;
  }
  .img-shape2{
    display: none;
  }
  .card-egst{
    padding-left: 20px;
    background-color: #d9efce;
    margin-top: -14px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 1px solid rgba(62, 169, 64, 1);
  }
  .text-overlay.left {
    left: 10px;
  }

  .text-overlay.right {
    right: 10px;
  }
  .text-overlay {
      font-size: 12px;
      padding: 5px 10px;
  }
  .img-most {
    display: inline-block;
    float: right;
    margin-top: -38px;
  }
  .mgh1{
    height: 250px;
  }

  .mgh2{
    height: 250px;
  }
  .containersdd {
    width: 100%;
  }
  .fm40{
    margin-top: 80px;
  }
  .bpss{
    background-color: #FAFAFA; 
  }
  .txtsTitle{
    font-size: 18px;
  }

  .txtsContent{
    font-size: 14px;
  }
  .img-arss{ 
    width: 100%;
  }
  .txt-medium-active {
      color: #3EA940 !important;
  }
  .txt-medium-active2 {
    color: #3EA940 !important;
    background-color: var(--Color-Palette-primary-opacity-light, rgba(62, 169, 64, 0.16));
    border-radius: 4px;
  }
  .img-be{
    width: 21px;
    height: 21px;
    margin-right: 4px;
  }
  .text-beaf{
    font-size: 18px;
  }

  .text-beaf-content{
    font-size: 14px;
  }
  .hero .wrapper_button .custom-cta-btn {
      width: 100%;
  }
  .custom-mb-40, .custom-y-40 {
      margin-top: 60px !important;
  }
  .txt-new-1{
    font-family: Inter;
    font-size: 32px;
    font-weight: 700;
    line-height: 32.96px;
    text-align: left;
  }
  .img-slider-two{
    width:100%; height: 490px;
  }
  .padding-1{
    padding: 40px 24px;
    text-align: center;
  }
  .padding-3 {
      padding: 40px 24px;
      text-align: center;
  }
  .bg-sc3{
    background-color: #FFF6F0;
  }
  .img-hero-x{
    display: none;
  }
  .hero.custom-container {
      height: auto !important;
  }
  #mobile-image{
    margin-top: 30px;
  }
  .section-1 {
      padding: 60px 24px;
  }
  .text-section1 {
      font-family: Inter;
      font-size: 24px;
      font-weight: 600;
      line-height: 36px;
      color: #000000;
      padding-bottom: 20px;
  }
  .text-section2{
    font-family: Roboto;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: #595959;
  }

  .text-section3{
    color: #282D43;
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    padding: 10px 0px;
  }
  .txt-vitural-1, .txt-vitural-2 {
    text-align: center;
    padding: 0px 20px;
  }
  .mtmb{
    margin-left:20px; 
    margin-right:20px;
    margin-bottom: 20px; 
  }
  .center-mobile{
    text-align: center;
  }
  .title-insights-1, .title-insights-2{
    padding: 0px 20px;
  }
  .custom-container2 {
      padding: 60px 10px;
  }
}

@media screen and (min-width: 768px) {
    .ci-2 {
        bottom: 50px !important;
    }
}

.btn-request-demo{
  margin-bottom: 20px;
}

.txt-power1{
  font-family: Inter;
  font-size: 35px;
  font-weight: 600;
  line-height: 52.5px;
  text-align: center;
  color: #000;
  padding: 12px;
}

.txt-power2{
  color: #595959;
  font-family: Roboto;
  font-size: 21px;
  font-weight: 400;
  line-height: 31.5px;
  text-align: center;
  padding: 12px;
}

.mdsh {
    position: absolute;
    margin-top: 100px;
    padding: 0px 120px;
}

.txtsquare1{
  color: #000000;
  font-family: Inter;
  font-size: 23px;
  font-weight: 500;
  line-height: 29.9px;
  margin-bottom: 10px;
}

.txtsquare2{
  color: #464646;
  font-family: Inter;
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  text-align: left;
}

.txtsquare3{
  color: #3EA940;
  font-family: Inter;
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
}

.mt-100{
  margin-top: 100px;
}

.pt-100{
  padding-top: 100px;
}

.box-content__list .text-description {
  color: var(----Base-800, #464646);
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
.box-content__list .icon{
  width: 32px;
  height: 32px;
}

/* =================== for component: card solutions ================ */
.card-solutions{
  width: 100%;
  padding: 20px;
  border-radius: 20px;
  background-color: #fff;
  height: 100%;

  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card-solutions .icon{
  width: 52px;
  height: 52px;
}

.txts1{
  color: #282D43;
  font-family: Inter;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
}
.txts2{
  color: #464646;
  font-family: Inter;
  font-size: 18px;
  font-weight: 400;
  line-height: 130%;
}
@media screen and (min-width: 1400px) {
  .card-solutions{
    height: 286px;
  }
}
@media screen and (max-width: 768px) {
  .card-solutions{
    border: 1px solid var(----Base-100, #F5F5F5);
    /* height: 175px; */
  }
  .card-solutions .icon{
    width: 32px;
    height: 32px;
  }
  .txts1{
    font-size: 18px;
  }
  .txts2{
    font-size: 14px;
  }
}
   /* =================== END for component: card solutions ================ */


   .dropdown,.dropup{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:20px;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:20px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:10px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#525252;white-space:nowrap}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#525252;text-decoration:none;background-color:#FFF6F0;outline:0;border-radius: 8px;}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{color:#777}.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{right:0;left:auto}.dropdown-menu-left{right:auto;left:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px dashed;border-bottom:4px solid\9}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{right:0;left:auto}.navbar-right .dropdown-menu-left{right:auto;left:0}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;float:left}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{display:table-cell;float:none;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}

   .img-language{
    margin-right: 8px;
   }

   .navbar-toggler {
    border: unset;
  }

  .overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
    position: relative;
    width: 100%;
    text-align: left;
    color: var(----Grey-500, #3EA940);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    margin-left: 30px;
    margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  color: var(----Grey-500, #2F2B3DE5);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #F4AB7D;
}

.overlay .closebtn {
    font-size: 30px;
    margin-left: 20px;
}

.p-20{
  padding:20px;
}

.r-0{
  right: 0px;
}

.txt-hkgh{
  text-decoration:none; 
  font-size: 14px;
}

.p-20b{
  padding:0px 20px;
}

.hr-o{
  height: 1px; 
  width: 100%; 
  background-color: #F4AB7D;
}

.nav-link:focus {
  color: #3EA940;
}

.overlay a:focus{
  color: #3EA940;
}

.subf-2:hover{
  color: #283252 !important;
}

.txt-subf-2:hover{
  color: #3EA940;
  cursor: pointer;
}

.chat-tooltip {
    position: fixed;
    border: 1px solid #464646;
    padding: 8px 12px;
    background-color: #464646;
    bottom: 0;
    right: 0;
    margin-bottom: 34px;
    margin-right: 95px;
    border-radius: 4px;
    color: #fff;
    z-index: 100;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.16);
    animation: fadeIn 0.5s ease-in-out forwards;
    text-transform: capitalize;
}

.chat-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #464646;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.rows-up {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    margin-right: 34px;
    margin-bottom: 34px;
    cursor: pointer;
}

.img-rowsup{
  width: 38px;
  height: auto;
  cursor: pointer;
}

.img-rowsup2{
  cursor: pointer;
  color: #fff;
}

.scrll-up{
  padding: 6px 14px;
  border-radius: 12px;
  background-color: #3EA940;
  cursor: pointer;
}

.heroxxs {
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    text-align: center;
}

.heroxxs2 {
    border-radius: 12px;
    text-align: center;
    background: linear-gradient(180deg, #F1F9EB 0%, #FFFBE5 100%);
    padding-top: 100px;
    padding-bottom: 160px;
}

.heroxxs3 {
  position: relative;
  overflow: hidden;
  border-radius: 60px 60px 0px 0px;
  text-align: center;
  padding-top: 100px;
  padding-bottom: 100px;
  z-index: 1;
  background-color: var(--Misc-body-bg, #F8F7FA);
}

.heroxxs3::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(../images/cta-landing.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain; /* atau cover */
  opacity: 0.2; /* hanya gambar yang transparan */
  z-index: 0;
  pointer-events: none;
}

.heroxxs3 > * {
  position: relative;
  z-index: 1; /* agar konten berada di atas background */
}


.heroxxs3 > * {
  position: relative;
  z-index: 2;
}


.herox-flats {
  background-image: url(../images/banner-flats.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 124px 20px;
  color: #fff;
}

.bg-custome-hero {
    background-image: url(../images/bg-built.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 124px 20px;
}


.textpers {
    text-align: center;
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    background: var(--gradient, linear-gradient(180deg, #D52976 0%, #3EA940 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pd-100{
  padding: 0px 100px;
}

.heroxxsdss {
  background-image: url(../images/background-rectangle-mobile.webp) !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  border-radius: 0px !important;
}

.heroxxsdss2 {
  background-image: url(../images/bg2-heros.webp) !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  border-radius: 0px !important;
}

@media screen and (min-width: 1200px) {
  .heroxxs22 {
      background: linear-gradient(180deg, #F1F9EB 0%, #FFFBE5 100%);
  }
  .bg-light2 {
    background: #fafeee;
    width: 80%;
    margin-left: 10%;
    margin-top: 16px;
    border: 2px solid #fdfff9;
    border-radius: 4px;
  }
  .mdimg{
    margin-top: -450px;
  }
  .mdimg2{
    margin-top: -490px;
  }
  .m32{
    margin-bottom: 32px;
  }
  .mbs-40{
    margin-bottom: 40px;
  }
  .heroxxsdss {
    height: 500px !important;
  }
  .heroxxsdss2 {
    height: 840px !important;
  }
  .textpers{
    font-size: 41px;
  }
  .heroxxs {
      background-image: url(../images/hero-background.webp);
      height: 830px;
      border-radius: 0px 0px 50px 50px;
  }
  .heroxxs-princing {
      background-image: url(../images/bg-image-princing.webp);
      height: 750px;
      border-radius: 0px 0px 32px 32px;
  }
  .custom-containerxx {
      padding: 100px 20px;
  }
  .btn-rocket{
    font-size: 18px;
  }
  .title-head-frase{
    font-size: 42px;
    line-height: 48px;
  }
  .title-head-frase-2{
    font-size: 15px;
  }
  .dekstop-none{
    display: none;
  }
  .dekstop-none2{
    display: none !important;
  }
  #dekstop-none{
    display: none;
  }
  .img-frasa{
    width: 92;
    height: auto;
    padding: 20px;
  }
  .text-card-title-base{
    font-size: 20px;
  }
  .text-card-desc-base{
    font-size: 18px;
  }
  .vector-1 {
      filter: brightness(0) saturate(100%) invert(93%) sepia(99%) saturate(237%) hue-rotate(292deg) brightness(98%) contrast(109%);
      position: absolute;
      margin-left: -470px;
      margin-top: -17px;
      z-index: -1;
  }

  .vector-2 {
      filter: brightness(0) saturate(100%) invert(93%) sepia(99%) saturate(237%) hue-rotate(292deg) brightness(98%) contrast(109%);
      position: absolute;
      margin-left: 370px;
      margin-top: -17px;
      z-index: -1;
  }

  .vector-1b {
    position: absolute;
    margin-left: -250px;
    filter: brightness(0) saturate(100%) invert(95%) sepia(55%) saturate(3388%) hue-rotate(292deg) brightness(120%) contrast(107%);
    margin-top: -20px;
    width: 51px;
    height: 51px;
    margin-top:-30px;
    z-index: -1;
  }
  .vector-2b {
    position: absolute;
    margin-left: 200px;
    filter: brightness(0) saturate(100%) invert(95%) sepia(55%) saturate(3388%) hue-rotate(292deg) brightness(120%) contrast(107%);
    margin-top: 15px;
    width: 51px;
    height: 51px;
    z-index: -1;
  }
  .text-boxt-1{
    font-size: 26px;
  }
  .text-boxt-2{
    font-size: 20px;
  }
  .txtfor {
    font-size: 18px;
  }
  .box-cards{
    margin-right: 0px;
  }
  .box-cards2{
    margin-left: 0px;
  }
  .wd60{
    width: 60px;
  }
  .wd45{
    width: 45px;
  }
  .txt-lps-1{
    font-size: 32px;
  }
  .txt-lps-2{
    font-size: 20px;
  }
  .txt-lps-3{
    font-size: 20px;
    margin-right: 40px;
  }
  .icon-encjh{
    margin-right: 7px;
    width: 40px;
    height: auto;
  }
  .herox-flats {
    background-image: url(../images/bg-sec-finish.webp);
    padding: 159px 40px 230px 40px;
  }
  .txt-pp1{
    font-size: 38px;
    line-height: 56px;
  }
  .txt-pp2{
    font-size: 18px;
    line-height: 28px;
  }
  .txt-joins-waitlist{
    font-size: 41px;
  }
  .txt-joins-waitlist2{
    font-size: 20px;
  }
  .t-join-1{
    font-size: 32px;
  }
  .t-join-2{
    font-size: 20px;
  }
  .v-1 {
    width: 75px;
    height: 75px;
  }
  .v-2 {
    width: 75px;
    height: 75px;
  }
  .mgleft{
    margin-left: 100px;
  }
  .video-container video {
    /* Potong kiri-kanan 50px */
    clip-path: inset(0 118px 0 118px);
  }
}
@media screen and (max-width: 1200px) {
    .bg-light2 {
      background: #fafeee;
  }
  .video-container video {
    /* Potong kiri-kanan 50px */
    clip-path: inset(0 50px 0 50px);
  }
  .mb20{
    margin-bottom: 20px;
  }
  .heroxxsdss {
    height: 400px !important;
  }
  .heroxxsdss2 {
    height: auto !important;
    background-image: url(../images/background-rectangle-mobile.webp) !important;
    margin-top: 50px;
  }
  .textpers{
    font-size: 23px;
  }
  .heroxxs {
    background-image: url(../images/hero-background.webp);
  }
  .heroxxs-princing {
    background-image: url(../images/bg-image-princing.webp);
  }
  .custom-containerxx {
      padding: 52px 15px;
  }
  .btn-rocket{
    font-size: 16px;
  }
  .title-head-frase{
    font-size: 23px;
    line-height: 28px;
  }
  .title-head-frase-2{
    font-size: 12px;
  }
  .mobile-none{
    display: none;
  }
  .mt-20{
    margin-top: 20px;
  }
  .img-frasa{
    width: 76;
    height: auto;
    padding: 20px;
  }
  .text-card-title-base{
    font-size: 16px;
  }
  .text-card-desc-base{
    font-size: 16px;
    padding: 5px 8px;
  }
  .vector-2{
    width: 51px;
    filter: brightness(0) saturate(100%) invert(93%) sepia(99%) saturate(237%) hue-rotate(292deg) brightness(98%) contrast(109%);
    z-index: -100;
    position: absolute;
    display: block;
    right: 0;
  }
  .vector-1 {
    width: 51px;
    filter: brightness(0) saturate(100%) invert(93%) sepia(99%) saturate(237%) hue-rotate(292deg) brightness(98%) contrast(109%);
    z-index: -100;
    position: absolute;
    display: block;
  }

  .vector-2b{
    width: 51px;
    filter: brightness(0) saturate(100%) invert(93%) sepia(99%) saturate(237%) hue-rotate(292deg) brightness(98%) contrast(109%);
    z-index: -100;
    position: absolute;
    display: block;
    right: 0;
  }
  .vector-1b {
    width: 51px;
    filter: brightness(0) saturate(100%) invert(93%) sepia(99%) saturate(237%) hue-rotate(292deg) brightness(98%) contrast(109%);
    z-index: -100;
    position: absolute;
    display: block;
  }
  .text-boxt-1{
    font-size: 20px;
  }
  .text-boxt-2{
    font-size: 16px;
  }
  .txtfor {
    font-size: 16px;
  }
  .box-cards, .box-cards2{
    margin-right: 0px;
  }
  .wd60{
    width: 52px;
  }
  .wd45{
    width: 37px;
  }
  .txt-lps-1{
    font-size: 23px;
  }
  .txt-lps-2{
    font-size: 16px;
  }
  .txt-lps-3{
    font-size: 14px;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .icon-encjh{
    margin-right: 7px;
    width: 28px;
    height: auto;
  }
  .herox-flats {
    background-image: url(../images/bg-sec-finish.webp);
    padding: 136px 16px;
  }
  .txt-pp1{
    font-size: 23px;
    line-height: 26px;
  }
  .txt-pp2{
    font-size: 16px;
    line-height: 22px;
  }
  .txt-joins-waitlist{
    font-size: 26px;
  }
  .txt-joins-waitlist2{
    font-size: 18px;
  }
  .t-join-1{
    font-size: 23px;
  }
  .t-join-2{
    font-size: 16px;
  }
  .v-1 {
    width: 40px;
    height: 40px;
  }
  .v-2 {
    width: 40px;
    height: 40px;
    margin-left: 20px !important;
    margin-top: 90px !important;
  }
  .wm-100{
    width:100%;
  }
  .btn-ms {
      position: absolute;
      margin-top: 35px;
      left: 50%;
      margin-left: -50px;
  }
  .img-logo-footer-2 {
      margin-bottom: 20px;
  }

  .left-ftr{
    text-align: left !important;
    margin-top: 20px;
  }
}

.btn-rocket{
  border-radius: 99px;
  border-width: 1px;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
  border: 1px solid #D52976;
  font-family: Inter;
  font-weight: 500;
  text-align: center;
  background: var(--gradient, linear-gradient(180deg, #D52976 0%, #3EA940 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-head-frase{
  font-family: Public Sans;
  font-weight: 800;
  letter-spacing: 0px;
  text-align: center;
  margin: 16px 24px;
  background: linear-gradient(143.19deg, #3EA940 0%, #36963A 58.83%, #384C35 122.78%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-head-frase-span{
  color:#283252;
  background: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

.text-grads{
  background: var(--gradient, linear-gradient(180deg, #D52976 0%, #3EA940 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-head-frase-2{
  color: #2F2B3DE5;
  margin-bottom: 32px;
  font-family: Public Sans;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: center;
}

.btn-join {
    border-radius: 8px;
    padding-top: 9px;
    padding-right: 28px;
    padding-bottom: 9px;
    padding-left: 28px;
    background-color: #3EA940;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    border: 1px solid #3EA940;
    font-family: Public Sans;
    font-weight: 500;
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 0px;
    text-transform: capitalize;
}

.btn-join2 {
    border-radius: 8px;
    padding-top: 9px;
    padding-right: 28px;
    padding-bottom: 9px;
    padding-left: 28px;
    background-color: #3EA940;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    border: 1px solid #3EA940;
    font-family: Public Sans;
    font-weight: 500;
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 0px;
    text-transform: capitalize;
    width: 100%;
}

.btn-join-two {
    border-radius: 8px;
    padding-top: 9px;
    padding-right: 28px;
    padding-bottom: 9px;
    padding-left: 28px;
    background-color: transparent;
    text-align: center;
    vertical-align: middle;
    color: #3EA940;
    border: 1px solid #3EA940;
    font-family: Public Sans;
    font-weight: 500;
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 0px;
    text-transform: capitalize;
}

.mt-35{
  margin-top: 35px;
}

.text-title-sections {
    color: rgba(47, 43, 61, 0.9);
    padding-left: 10px;
    padding-right: 10px;
    font-family: Public Sans;
    font-weight: 800;
    letter-spacing: 0px;
    text-align: center;
    font-size: 24px;
    line-height: 36px;
}

.text-subtitle-sections {
    color: rgba(47, 43, 61, 0.7);
    margin-top: 4px;
    margin-bottom: 28px;
    font-family: Public Sans;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0px;
    text-align: center;
    background: var(--Theme-text-secondary);
}

.card-frasa{
  margin-bottom: 20px;
  text-align: center;
}

.text-card-title-base{
  font-family: Inter;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #283252;
}

.text-card-desc-base{
  font-family: Inter;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #595959;
}

.text-boxt-1{
  font-family: Inter;
  font-weight: 600;
  line-height: 130%;
  color: #292929;
  margin-bottom: 12px;
}

.text-boxt-2{
  font-family: Inter;
  font-weight: 400;
  line-height: 150%;
  color: #83838E;
  margin-bottom: 24px;
}

.icons-for{
  width: 40;
  height: auto;
}

.mb-20{
  margin-bottom: 20px;
}

.txtfor {
  font-family: Inter;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0%;
  color: #283252;
}

.txt-lps-1{
  font-family: Inter;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #292929;
}

.txt-lps-2{
  font-family: Inter;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #656565;
  padding:16px 20px 32px 20px;
}

.txt-lps-3 {
  font-family: Inter;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #283252;
  display: inline-block;
}

.txt-pp1 {
    color: #fff;
    font-family: Public Sans;
    font-weight: 500;
    letter-spacing: 0px;
    text-align: center;
}

.txt-pp2 {
    color: #fff;
    margin-bottom: 16px;
    margin-top: 4px;
    font-family: Public Sans;
    font-weight: 500;
    letter-spacing: 0px;
    text-align: center;
}

.txt-pp3{
  font-family: Inter;
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  line-height: 145%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  margin-top: 26px;
}

.btn-join-waitlist{
  border-radius: 5px;
  padding-top: 9px;
  padding-right: 16.63px;
  padding-bottom: 9px;
  padding-left: 16.63px;
  background-color: #fff;
  border: 1px solid #EB5D24;
  color: #EB5D24;
  font-family: Roboto;
  font-weight: 400;
  font-size: 13.3px;
  line-height: 150%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
}

.txt-footer-3 {
    color: #7C7C7C !important;
}

.img-close {
    float: right;
    margin-right: -12px;
    margin-top: -12px;
}
.modal-body2{
  text-align: center;
}
.t-join-1{
  font-family: Inter;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #292929;
  margin-top: 48px;
  margin-bottom: 16px;
}
.t-join-2{
  font-family: Inter;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #656565;
  margin-bottom: 16px;
}
.v-1 {
  position: absolute;
  filter: brightness(0) saturate(100%) invert(93%) sepia(99%) saturate(237%) hue-rotate(292deg) brightness(98%) contrast(109%);
  right: 0;
  margin-top: -51px;
  margin-right: 55px;
}
.v-2{
  position: absolute;
  filter: brightness(0) saturate(100%) invert(93%) sepia(99%) saturate(237%) hue-rotate(292deg) brightness(98%) contrast(109%);
  left: 0;
  margin-left: 55px;
  margin-top: -60px;
}

.logo-img{
  width: 160px;
  height: auto;
}

.img-logo-footer-2{
  width: 149px;
  height: auto;
}

.f-1 {
    margin-top: 12px;
    margin-bottom: 24px;
    font-family: Public Sans;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0px;
    color: #2F2B3DE5;
}

.f-2{
  font-family: Inter;
  font-weight: 400;
  font-size: 14px;
  line-height: 145%;
  letter-spacing: 0%;
  color: #00000080;
}

.icon-social{
  text-decoration: unset;
}

.fllw{
  font-family: Inter;
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #00000099;
  margin-bottom: 16px;
  margin-right: 35px;
}

.txt-content-request2{
  font-family: Inter;
  font-weight: 400;
  font-size: 20px;
  line-height: 130%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #464646;
}

.font-weight-700{
  font-weight: 700;
}

.error-message {
    color: red;
    font-size: 10px;
    margin-top: 2px;
    text-align: left;
}

@keyframes slideInTop {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100px);
    opacity: 0;
  }
}



.btn-join:hover{
  background-color: #3a9f3c;
}

.btn-join2:hover{
  background-color: #3a9f3c;
}

.btn-join-two:hover{
  background-color: transparent;
}

.txt-medium {
    color: #2F2B3DE5;
    font-family: Public Sans;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0px;
    vertical-align: middle;
}

.txt-medium:hover{
  color: #3EA940 !important;
}

.card-fastaai{
  border-radius: 12px;
  border: 1px solid #DBDBDB;
  width: 100%;
  padding: 40px 32px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.pd12{
  padding-top: 12px;
  padding-bottom: 12px;
}

.btnsee{
  padding: 9px 24px;
  justify-content: center;
  align-items: center;
  border-radius: 99px;
  background: #3EA940;
  color: #fff;
  text-align: center;
  font-family: Roboto;
  font-size: 13.3px;
  font-style: normal;
  font-weight: 500;
  border: unset;
}

.btnsee:hover{
  background: #d63f45;
}

.card-report {
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid #f2f2f2;
    background: radial-gradient(80.23% 68.33% at 50% 50%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.30) 100%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    cursor: pointer;
    height: 325px;
}


.txt-report{
  color: #283252;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 145%; /* 29px */
  margin-top: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 40px;
  padding: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: fit-content;
  height: 50px;
}

.search-input {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.search-input i.icon {
  color: #ccc;
  margin-right: 8px;
}

.search-input input {
    border: none;
    outline: none;
    color: #333 !important;
    background: transparent;
    color: var(--Mute-Grey-Mute-grey, #999);
    text-overflow: ellipsis;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.browse-button {
    background-color: #fff;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 24px;
    text-align: center;
    font-family: Roboto;
    font-size: 13.3px;
    font-style: normal;
    font-weight: 400;
}

.browse-button:hover {
  background-color: #e14d4d;
}

.tab-container {
  display: flex;
  border-radius: 999px;
  padding: 2px;
  width: fit-content;
  font-family: sans-serif;
}

.tab {
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    color: #9a9a9a;
    transition: all 0.3s ease;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.tab.active {
  background-color: #f26122; /* orange */
  color: white;
}


.plan-card {
    background-color: #fff;
    color: #fff;
    padding: 20px;
    border-radius: 16px;
    width: 100%;
    box-shadow: 6px 6px 32px 0px rgba(0, 0, 0, 0.06);
}

.plan-title {
    font-family: Public Sans;
    font-weight: 500;
    font-size: 24px;
    line-height: 38px;
    letter-spacing: 0px;
    color: var(--Theme-text-primary, rgba(47, 43, 61, 0.9));
    line-height: 150%;
}

.plan-subtitle {
    margin-bottom: 16px;
    color: rgba(47, 43, 61, 0.9);
    font-style: normal;
    line-height: 150%;
    font-family: Public Sans;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0px;
}

.active-button {
    width: 100%;
    padding: 10px 0;
    background-color: #fff;
    border: 1px solid rgba(62, 169, 64, 1);
    border-radius: 6px;
    margin-bottom: 16px;
    color: rgba(62, 169, 64, 1);
    text-align: center;
    line-height: 150%;
    font-family: Public Sans;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0px;
    text-transform: capitalize;

}

.divider {
    background-color: rgba(128, 131, 144, 0.16);
    width: 100%;
    height: 1px;
    margin: 20px 0px;
}

.divider2 {
    background-color: rgba(128, 131, 144, 0.16);
    width: 100%;
    height: 1px;
    margin-bottom: 16px;
}

.benefits-title {
    margin-bottom: 8px;
    color: rgba(47, 43, 61, 0.7);
    font-style: normal;
    line-height: 150%;
    font-family: Public Sans;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0px;
}

.benefits-list {
  list-style: none;
  padding-left: 0;
  line-height: 1.6;
}

.benefits-list li {
    padding-left: 0;
    color: var(--Mute-Grey-dark-25, #595959);
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 10px;
}

.img-cheks{
  margin-top: -2px;
  margin-right: 5px;
}

.active-button2 {
    color: #fff;
    border: 1px solid var(--Color-Palette-primary-main, rgba(62, 169, 64, 1));
    background-color: #fff;
    box-shadow: 0px 2px 6px 0px rgba(32, 106, 93, 0.3);
    background: var(--Color-Palette-primary-main, rgba(62, 169, 64, 1));
}

.bgss {
    border-radius: 10px;
    border: 1px solid rgba(62, 169, 64, 1);
    background: linear-gradient(360deg, #FFFFFF 0%, #F1F9EB 100%);
    box-shadow: 6px 6px 32px 0px rgba(0, 0, 0, 0.06);
}

.txbig {
    color: var(--Color-Palette-primary-main, rgba(62, 169, 64, 1));
    font-family: Public Sans;
    font-weight: 500;
    letter-spacing: 0px;
    text-align: center;
    margin-left: 10px;
}

.active-button3 {
    color: #fff;
    border-radius: 5px;
    background: var(--gradasi-button-generate, linear-gradient(219deg, #EF7E48 34.43%, #CA3DB0 137.58%));
    cursor: pointer;
}

.img-most {
    background-color: #FFF6F0;
    border: 1px solid #EF7E48;
    border-radius: 100000000376832px;
    border-width: 1px;
    padding: 4px 16px;
    font-family: Roboto;
    font-weight: 500;
    font-size: 11.2px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #EF7E48;
    box-shadow: -1px 3px 10px 0px #0000001F;
}

.card-lobrs{
  background: var(--Body-color, rgba(249, 249, 249, 1));
  width: 100%;
  border-radius: 12px;
  padding-top: 40px;
  padding-right: 32px;
  padding-bottom: 40px;
  padding-left: 32px;
  margin-bottom: 20px;
}

.txtsTitle{
  font-family: Inter;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: var(--Dark-Text-dark-text, rgba(40, 50, 82, 1));
}

.txtsContent{
  font-family: Inter;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: var(----Base-500, rgba(124, 124, 124, 1));
  margin-top: 10px;
}

.card-labs{
  width: 100%;
  border-radius: 12px;
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

.txtlabs1{
  font-family: Inter;
  font-weight: 600;
  font-size: 20px;
  line-height: 130%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: var(--Dark-Text-dark-text, rgba(40, 50, 82, 1));
}

.txtlabs2{
  font-family: Inter;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: var(--Mute-Grey-dark-25, rgba(89, 89, 89, 1));
  margin-top: 8px;
}

.card-labs:hover{
  border: 1px solid #D52976;
}

.llss{
  background-color:#F7F7F7; 
  border-radius: 12px;
}

.card-labs-active{
  border: 1px solid #D52976;
}

.slider-container {
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;
  gap: 16px;
  cursor: grab;
  user-select: none;
  scrollbar-width: none; /* Firefox */
}

.slider-container::-webkit-scrollbar {
  display: none; /* Chrome & Safari */
}

.slider-container img {
  flex: 0 0 auto;
  width: 300px; /* kamu bisa ubah sesuai kebutuhan */
  user-drag: none;
  pointer-events: none; /* biar gambar gak bisa didrag native */
}
.video-custom {
    background-color: #fafafa;
    outline: none !important;
    border-radius: 12px;
    height: 500px;
    width: 100%;
    object-fit: contain;
}

.img-template {
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
}

.txxc{
  color: #292929 !important;
  font-weight: 600;
}

.titlesx{
  font-family: Inter;
  font-weight: 600;
  font-size: 41px;
  line-height: 120%;
  letter-spacing: 0%;
  text-align: center;
  color:#EB5D24;
  margin-bottom: 10px;
}

.titlesx2{
  font-family: Roboto;
  font-weight: 400;
  font-size: 16.8px;
  line-height: 150%;
  letter-spacing: 0%;
  text-align: center;
  color: #283252;
  margin-bottom: 10px;
}

.titlesx3{
  font-family: Roboto;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0%;
  color: #283252;
}

.titlex4{
  font-family: Roboto;
  font-weight: 500;
  font-size: 16.8px;
  line-height: 150%;
  letter-spacing: 0%;
  color: #283252;
}

.img-filters{
  filter: brightness(0) saturate(100%) invert(57%) sepia(9%) saturate(290%) hue-rotate(143deg) brightness(88%) contrast(83%);
}

.beforeAfter { height: auto; }

.left-move{
    position: absolute;
    z-index: 2;
    border-radius: 99px;
    background-color: var(--White, #FFF);
    box-shadow: 0px -2px 2px 0px rgba(204, 204, 204, 0.25), 0px 2px 25px 1px rgba(247, 143, 109, 0.15);
    display: flex;
    width: auto;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: -66px;
    margin-left: 7.5%;
}

.txtmove{
  background: var(--gradient, linear-gradient(180deg, #D52976 0%, #3EA940 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 30px */
}

.move {
    border-radius: 99px;
    background-color: var(--White, #FFF);
    box-shadow: 0px -2px 2px 0px rgba(204, 204, 204, 0.25), 0px 2px 25px 1px rgba(247, 143, 109, 0.15);
    width: auto;
    padding: 12px 20px;
    text-align: center;
    display: inline-block;
    margin-top: -300px;
}

.mgh1{
  border-radius: 32px; 
  background: var(--Brand-Persian-Red-50, #FEF2F2);
  /*object-fit: contain;*/
}

.mgh2{
  border-radius: 32px; 
  background: var(--Green-green, #94E189);
  /*object-fit: contain;*/
}

.highlight {
    color: #3EA940 !important;
    font-weight: bold;
}


.icon-social:hover{
  filter: invert(40%) sepia(0%) saturate(1330%) hue-rotate(193deg) brightness(95%) contrast(87%);
}
.img-logo-footer{
  width: 136px;
  height: 44px;
}
.logo-footer{
  padding: 60px 0px;
}
.txt-footer-1{
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 20.3px;
  text-align: center;
  color: #283252;
  /* padding-left: 40px; */
}
.txt-footer-2{
  color: #3EA940;
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  text-align: center;
  text-decoration-line: underline;
  text-decoration-style: solid;
}
.txt-footer-3{
  color: #292929;
  font-family: Inter;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  text-align: left;
}
.txt-subf-1 {
    color: #464646;
    font-family: Inter;
    font-weight: 600;
    font-size: 16px;
    line-height: 145%;
    letter-spacing: 0%;
    margin-bottom: 5px;
}
.txt-subf-2 {
    color: #515658;
    font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    line-height: 145%;
    letter-spacing: 0%;
}
.txt-subf-2:hover {
    color: #515658;
}
.no-hover{
  cursor: unset !important;
}
.no-hover:hover{
  color: #515658 !important;
}
.bgf:hover{
  text-decoration: underline;
}
.bgpl{
  background: url(https://res.cloudinary.com/daraki09f/image/upload/v1735785659/kazee-ai/group-188716.svg);
  background-repeat: no-repeat;
  background-color: #FAFAFA;
}
.flex-display{
  display: flex;
  flex-direction: row-reverse;
}
@media screen and (min-width: 992px) {
  .txt-footer-1{
    padding-left: 40px;
  }
}
@media screen and (max-width: 1030px) {
  .no-hover{
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1030px) {
  .bpss {
      background-color: #fff !important;
      padding: 60px 60px 80px 60px;
  }
  .mp40{
    margin-left: 40px;
  }
  .rrgg{
    text-align:right;
  }
}

@media screen and (min-width: 768px) {
  .rrgg2{
    text-align:right;
  }
  .footer.custom-container {
      padding: 60px 24px !important;
  }
}

.icon-logo-mobile{
  margin-left: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.txt-lmp1{
  font-family: Public Sans;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  color: #2F2B3DE5;
  margin-bottom: 4px;
}

.txt-lmp2{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  color: #2F2B3DE5;
  padding-right: 20px;
}

.txt-lmp3{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  color: #2F2B3DE5;
  text-decoration: none;
}

.txt-lmp3:hover{
  color: #3EA940;
}

.mg16{
  margin-bottom: 16px;
}

.bg-footer-two{
  background: #282C3E;
  font-family: Public Sans;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  color: #fff;
  padding: 19px 0px;
}

.herox-flats{
    margin-bottom: -60px;
}


.btn-explore{
  font-family: Public Sans;
  font-weight: 500;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 0px;
  text-transform: capitalize;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  padding: 11px 26px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.btn-talk {
    color: rgba(47, 43, 61, 0.9);
    background: #fff;
    padding: 11px 26px;
    border: 1px solid #fff;
    border-radius: 8px;
    font-family: Public Sans;
    font-weight: 500;
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 0px;
    text-transform: capitalize;
}

.img-shape{
  position:absolute;
  margin-top: 20px;
  margin-left: -40px;
}
.card-flexibel{
  background: linear-gradient(102.3deg, #DAF0C8 -0.02%, rgba(255, 255, 255, 0) 49.98%, #BEEA9B 99.98%);
  width: 100%;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(190, 234, 155, 1);
  margin-bottom: 20px;
}

.card-flexibel2{
  background: rgba(62, 169, 64, 1);
  width: 100%;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(190, 234, 155, 1);
  margin-bottom: 20px;
}

.txt-flex-1{
  color: rgba(47, 43, 61, 0.9);
  font-family: Public Sans;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
  text-align: center;
  margin-top: 12px;
  margin-bottom: 4px;
}

.txt-flex-2{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: center;
  color: rgba(47, 43, 61, 0.7);
}

.txt-white{
  color: #fff;
}

.txt-view{
  color: rgba(62, 169, 64, 1);
  font-family: Public Sans;
  font-weight: 500;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 0px;
  text-transform: capitalize;
  margin-top: 35px;
  text-decoration: none;
}

.card-frammes {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(62, 169, 64, 1);
    background: linear-gradient(to bottom, #cde9ca 0%, #d9efce 100%);
    padding: 20px;
    margin-bottom: 20px;
}

.card-frammes2 {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(62, 169, 64, 1);
    background: linear-gradient(156.97deg, #DAF0C8 -1.33%, rgba(243, 255, 240, 0.6) 44.95%, #DAF0C8 82.39%);
    padding: 20px;
    margin-bottom: 20px;
}

.txtleft{
  text-align: left;
}

.margnleft {
    margin-left: 0px;
}

.txt-learn{
  font-family: Public Sans;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  text-transform: capitalize;
  color: #3EA940;
  text-decoration: none;
}

.paddleft{
  padding-left: 0px;
}

.grenn-egs{
  color: #1D511F;
  font-family: Public Sans;
  font-weight: 500;
  letter-spacing: 0px;
  text-align: center;
  margin-top: 8px;
}

.garis-hr{
  position:absolute;
  width: 100%;
  right: 0;
  height: 1px;
  border-top: 3px dashed #e9f3e0;
}

.p100{
  padding: 100px 0px;
}

.card-section-management{
  width: 90%;
  padding: 24px;
  background-color: #fff;
  text-align: left;
  width: 324;
  height: 400;
  border-radius: 6px;
  box-shadow: 0px 4px 18px 0px #2F2B3D29;
  margin-bottom: 20px;
  margin-left: 5%;
}

.teks-smng-1{
  font-family: Public Sans;
  font-weight: 700;
  font-size: 24px;
  line-height: 38px;
  letter-spacing: 0px;
  color: rgba(47, 43, 61, 0.9);
}

.teks-smng-2{
  font-family: Public Sans;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
  color: rgba(47, 43, 61, 0.7);
}

.teks-smng-3{
  font-family: Public Sans;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  text-transform: capitalize;
  color: #3EA940;
}

.pd8{
  padding: 8px 0px;
}

.pb18{
  padding-bottom: 18px;
}

.wdgt{
  margin: -24px;
  width: 117%;
}

.txt-word {
    font-family: Public Sans;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: rgba(47, 43, 61, 0.9);
    display: inline-block;
    margin-left: 8px;
}

.txt-word2{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: rgba(47, 43, 61, 0.7);
  margin-top: 4px;
}

.bglks{
  background: url(../images/arm-2.webp);
  padding-bottom: 180px;
  background-color: #fff;
  background-position: bottom;
  background-size: 100%;
  background-repeat: no-repeat;
}

.card-design{
  width: 100%;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0px 3px 12px 0px rgba(47, 43, 61, 0.14);
  padding: 24px;
  margin-bottom: 20px;
}

.txtxa1{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  color: rgba(47, 43, 61, 0.7);
}

.txtxa2{
  font-family: Public Sans;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: rgba(47, 43, 61, 0.9);
}
.txtxa3{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: rgba(47, 43, 61, 0.4);
}

.pad16{
  padding-bottom: 16px;
}


.linehs{
  width: 100%;
  height: 1px;
  background-color: rgba(47, 43, 61, 0.12);
  margin-top: 100px;
}

.video-container {
  width: 100%;
  overflow: hidden;
}

.video-container video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (min-width: 576px) {
    .px-sm-3 {
        padding-right: 17px !important;
        padding-left: 17px !important;
    }
}

.txt-pricing1{
  font-family: Public Sans;
  font-weight: 500;
  letter-spacing: 0px;
  text-align: center;
  color: #2F2B3DE5;
}

.txt-pricing2{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: center;
  color: #2F2B3DB2;
}

.save-up-to{
  font-family: Public Sans;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: #3EA940;
  background: var(--Color-Palette-primary-opacity-light, rgba(62, 169, 64, 0.16));
  padding: 2px 10px;
  display: inline-block;
  border-radius: 4px;
}

.img-icon-bottom {
    margin-right: 4px;
    margin-top: 10px;
    display: inline-block;
}

.switch-mini {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 18px;
}

.switch-mini input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-mini {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 18px;
}

.slider-mini::before {
  content: "";
  position: absolute;
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.switch-mini input:checked + .slider-mini {
  background-color: #3EA940;
}

.switch-mini input:checked + .slider-mini::before {
  transform: translateX(12px);
}

.txt-smalls{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: center;
  color: rgba(47, 43, 61, 0.7);
  margin: -3px 8px 0px 8px;
}

.dollrs{
  position: absolute;
}

.txt-see-report{
  color: var(--Color-Palette-primary-main, rgba(62, 169, 64, 1));
  font-family: Public Sans;
  font-weight: 500;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 0px;
  text-transform: capitalize;
  text-decoration: none;
}

.txt-see-report:hover{
  color: var(--Color-Palette-primary-main, rgba(62, 169, 64, 1));
}

.pricing-table {
  overflow-x: auto;
  max-width: 100%;
  font-family: 'Segoe UI', sans-serif;
  margin: 20px auto;
}


.highlight {
  position: relative;
}

.check {
  color: #28a745;
  font-size: 18px;
}

.cross {
  color: #bbb;
  font-size: 18px;
}


.txtalleft{
  text-align: left;
}

.btn-chose1{
  color: var(--Color-Palette-primary-main, rgba(62, 169, 64, 1));
  font-family: Public Sans;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  text-transform: capitalize;
  background: var(--Color-Palette-primary-opacity-light, rgba(62, 169, 64, 0.16));
  border-radius: 4px;
  border: unset;
  padding: 8px 20px;
}

.btn-chose2{
  color: #fff;
  font-family: Public Sans;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  text-transform: capitalize;
  background: var(--Color-Palette-primary-main, rgba(62, 169, 64, 1));
  border-radius: 4px;
  border: unset;
  padding: 8px 20px;
}

.txbgr1{
  font-family: Public Sans;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 0px;
  text-align: center;
  color: var(--Theme-text-primary, rgba(47, 43, 61, 0.9));
  margin-bottom: 8px;
}

.txbgr2{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: center;
  color: var(--Theme-text-secondary, rgba(47, 43, 61, 0.7));
  margin-bottom: 24px;
}


.accordion {
  text-align: left;
}

.accordion-item {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
  border: 1px solid #eee;
}

.accordion-header {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    padding: 12px 24px;
    position: relative;
    color: rgba(47, 43, 61, 0.9);
    font-family: Public Sans;
    font-weight: 500;
    font-size: 15px;
    vertical-align: middle;
}

.accordion-header::after {
    content: '›';
    position: absolute;
    right: 20px;
    transform: rotate(0deg);
    transition: transform 0.3s;
    font-size: 30px;
    color: rgba(47, 43, 61, 0.7);
    margin-top: -14px;
}

.accordion-item.active .accordion-header::after {
  transform: rotate(90deg);
  color: #444;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    background: #fff;
    padding-top: 0px !important;
    font-family: Public Sans;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0px;
    color: var(--Theme-text-secondary, rgba(47, 43, 61, 0.7));
    margin-left: 5px;
}

.accordion-item.active .accordion-content {
  max-height: 200px;
  padding: 16px 20px;
}

.tablexx {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ddd;
  min-width: 800px;
}

.table-cell {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(47, 43, 61, 0.12);
  font-family: 'Public Sans', sans-serif;
  font-weight: 500 !important;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: rgba(47, 43, 61, 0.9);
}

.borderd{
  background: var(--Theme-action-hover, rgba(47, 43, 61, 0.06));
  border-bottom: 1px solid var(--Theme-divider, rgba(47, 43, 61, 0.12));
}

.table-header {
  background-color: #f9f9f9;
  font-weight: 600;
}

.table-price {
  color: #888;
  font-size: 13px;
}

.table-subtext {
  font-family: 'Public Sans', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  color: var(--Theme-text-secondary, rgba(47, 43, 61, 0.7));
}

.table-no-border {
  border: none;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .table-cell {
    padding: 10px;
    font-size: 12px;
  }
}

.lsdrs{
  padding-top:100px;
  padding-bottom: 100px;
  margin-top: 50px;
}

.sub{
  color: var(--Theme-text-secondary, rgba(47, 43, 61, 0.7));
  font-family: Public Sans;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;

}

.card-offers {
  position: relative;
  background: #fff;
  border-radius: 24px;
  margin: 40px 0px;
  z-index: 1;
  padding: 30px; /* atau sesuai kebutuhan */
  overflow: hidden;
}

.card-offers::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 24px;
  padding: 1px; /* ketebalan border */
  background: linear-gradient(180deg, #EDEDED, rgba(237,237,237,0));
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.txt-esgtrack1{
  font-family: Public Sans;
  font-weight: 700;
  letter-spacing: 0px;
  color: var(--Theme-text-primary, rgba(47, 43, 61, 0.9));
  margin-bottom: 4px;
}

.txt-esgtrack2{
  font-family: Public Sans;
  font-weight: 500;
  letter-spacing: 0px;
  color: var(--Theme-text-secondary, rgba(47, 43, 61, 0.7));
}

.rts1 {
    background-image: url(../images/rts1.webp);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 40%;
    padding-top: 78px;
    padding-bottom: 78px;
}

.img-teks-small{
  font-family: Public Sans;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: center;
  color: var(--Primary-900, rgba(29, 81, 31, 1));
  margin-top: 8px;
  margin-bottom: 30px;
}

.mdcards{
  width: 100%;
  border-radius: 5px;
  border: 1px solid var(--Primary-300, rgba(190, 234, 155, 1));
  background: linear-gradient(102.3deg, #DAF0C8 -0.02%, rgba(255, 255, 255, 0) 49.98%, #BEEA9B 99.98%);
  padding: 26px 20px;
  margin-bottom: 20px;
}

.txt-flls-1{
  font-family: Public Sans;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
  text-align: center;
  color: var(--Theme-text-primary, rgba(47, 43, 61, 0.9));
  margin-top: 12px;
  margin-bottom: 4px;
}

.txt-flls-2{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: center;
  color: var(--Theme-text-secondary, rgba(47, 43, 61, 0.7));
}

.card-reqts{
  width: 100%;
  border-radius: 4px;
  padding: 24px;
  background: var(--color-neutral-Neutral-10, rgba(255, 255, 255, 1));
  box-shadow: 0px -2px 1px 0px rgba(0, 0, 0, 0.04) inset;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.txt-request-1{
  font-family: Public Sans;
  font-weight: 500;
  font-size: 24px;
  line-height: 38px;
  letter-spacing: 0px;
  color: var(--Theme-text-primary, rgba(47, 43, 61, 0.9));
}

.txt-request-2{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0px;
  color: var(--Theme-text-secondary, rgba(47, 43, 61, 0.7));
  margin-bottom: 24px;
  margin-top: 4px;
}

.txt-input-fields{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 0px;
  color: var(--Theme-text-primary, rgba(47, 43, 61, 0.9));
  margin-bottom: 4px;
}

.mb24{
  margin-bottom: 24px;
}

.recs {
    color: #FF4C51;
}

.txt-joins-waitlist {
    color: #3EA940 !important;
    font-family: Inter !important;
    font-weight: 600 !important;
    line-height: 120% !important;
    letter-spacing: 0% !important;
    text-align: center !important;
}

.card-faq-page {
  width: 100%;
  border-radius: 16px;
  padding: 24px;
  background: var(--Neutral-10, rgba(255, 255, 255, 1));
  border: 1px solid var(--Neutral-30, rgba(237, 237, 237, 1));
  box-shadow: 0px 3px 12px 0px rgba(47, 43, 61, 0.14);
  margin-bottom: 40px;
}

.title-text-page{
  font-family: Public Sans;
  font-weight: 800;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 0px;
  color: var(--Theme-text-primary, rgba(47, 43, 61, 0.9));
  margin-bottom: 24px;
}

.accordion-item:first-of-type {
    box-shadow: 0px 1px 6px 0px #2F2B3D1A !important;
}

.subnavbar{
  width:100%;
  box-shadow: none !important;
  border: none !important;
  margin-bottom: 0px;
}

.subnavbar2{
  padding: 8px;
  text-decoration: none;
  color: var(----Grey-500, #2F2B3DE5);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.2) !important; /* abu muda transparan */
}

.txtcenter{
  text-align: center;
}

.dropdown-plussx {
    width: 245px;
    height: auto;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0px 4px 18px 0px rgba(47, 43, 61, 0.16);
    border: none;
}

.txadds{
  font-family: Public Sans;
  font-weight: 400;
  font-size: 24px;
  line-height: 38px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  text-decoration: line-through;
  color: var(--Theme-text-subtitle, rgba(47, 43, 61, 0.55));
}

.bg-imagexxx {
  width: 100%;
  height: auto;
  display: block;
  background: #FFFBE5;
}

.text-boxxxx {
    position: absolute;
    width: 19%;
    aspect-ratio: 7 / 9;
    display: flex;
    justify-content: center;
    text-align: left;
    font-size: 1.2vw;
    font-weight: 600;
    color: #2e2e2e;
    padding: 1vw;
    top: 8%;
}

/* Posisi horizontal dalam persen agar responsif */
.text-boxxxx.leftxxx {
  left: 13%;
}

.text-boxxxx.centerxxx {
  left: 40.5%;
}

.text-boxxxx.rightxxx {
  right: 13%;
}

.mt25 {
    margin-top: 25px;
    margin-left: 30px;
    margin-right: 30px;
}

.esgcards{
  background: var(--Color-Palette-primary-opacity-light, rgba(62, 169, 64, 0.16));
  padding-top: 2px;
  padding-right: 10px;
  padding-bottom: 2px;
  padding-left: 10px;
  font-family: Public Sans;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: var(--Color-Palette-primary-main, rgba(62, 169, 64, 1));
  display: inline-block;
  border-radius: 8px;
}

.btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.presen-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.presen-item-center {
  align-items: center;          /* Vertikal sejajar */
  justify-content: center;      /* Horizontal rata tengah */
}

.txtpresen2 {
  font-family: Public Sans;
  font-weight: 500;
  font-size: 24px;
  color: var(--Theme-text-primary, rgba(47, 43, 61, 0.9));
  width: 30px; /* <- tambahkan width tetap */
  flex-shrink: 0;
}

.txtpresen1 {
  font-family: Public Sans;
  font-weight: 500;
  font-size: 18px;
  color: var(--Theme-text-secondary, rgba(47, 43, 61, 0.7));
  margin-top: 6px;
}


/*.cardpresent {
    margin-top: -700px;
    position: absolute;
    margin-left: 30%;
}*/

.timeline-wrapper {
  background-image: url('../images/img-location.png'), linear-gradient(180deg, #F1F9EB 0%, #FFFBE5 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  height: 1000px;
  position: relative;
  border-top: 3px dashed #ddd;
}


.milestone {
  position: absolute;
  width: 350px;
}

/* Milestone Positioning (disesuaikan dengan layout background path.png) */
.milestone-q1 { top: 65px; left: 25%; }
.milestone-q2 { top: 130px; right: -25px; }
.milestone-q3 { top: 530px; left: 22%; }
.milestone-q4 { top: 530px; right: 240px; }


.bg-successxx {
  border-radius: 4px;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  padding-left: 12px;
  background: var(--Opacity-Color-Primary-primary-8, rgba(62, 169, 64, 0.08));
  font-family: Public Sans;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: var(--Primary-500, rgba(62, 169, 64, 1));
  display: inline-block;
  margin-top: 4px;
}

.bgplus-1{
  color: var(--Color-Warning-warning-500, rgba(255, 159, 67, 1));
  background: var(--Color-Warning-warning-100, rgba(255, 236, 217, 1));
}

.bgplus-2{
  color: var(--Color-Gray-gray-500, rgba(151, 147, 158, 1));
  background: var(--Color-Gray-gray-100, rgba(234, 234, 236, 1));
}

.bgplus-3{
  color: var(--Color-Error-error-500, rgba(255, 76, 81, 1));
  background: var(--Color-Error-error-100, rgba(255, 219, 220, 1));
}

.poill{
  padding-top: 100px !important; 
  z-index: 3 !important;
}

.plus-txt{
  text-align: left !important; 
  margin-left: 0px !important; 
  line-height: 42px !important; 
  font-size: 36px !important;
}