@charset "UTF-8";
:root {
  --custom-black: #272727;
  --custom-black-200: #2e3a40;
  --custom-blue: #00a3e9;
  --custom-blue-700: #335ca7;
  --custom-blue-tosca: #85cede;
  --custom-gray: #68748b;
  --custom-white: #fff;
  --bs-font-jakarta: 'Plus Jakarta Sans', sans-serif;
  --bs-font-geologica: "Geologica", sans-serif;
  --bs-font-poppins: "Poppins", sans-serif;
  --custom-bg-primary: #f3f6fa;
  --custom-orange: #FF6800;
  --custom-secondary: #F5F4F3;
  --custom-purple: #AB4459;
  --custom-green:#048853;
  --custom-green-2:#00492C;

}

body {
  font-family: var(--bs-font-jakarta);
  background-color: var(--custom-white);
}

.font-custom{
  font-family: 'Leckerli One', cursive !important;
}

.bg-error{
  background-image: url('../media/bg1.jpg');
  background-size: cover;
}

.bg-error-2{
  background-image: url('../media/bg4.jpg');
  background-size: cover;
}

.bg-login{
  background-color: #A5DD9B;
}

/* Card */
.card-custom {
  box-shadow: 2px 1px 48px 0px rgba(0, 163, 233, 0.16);
  border-radius: 16px;
}

.bg-custom-secondary{
  background-color: var(--custom-secondary);
}




.text-custom-warning{
  color: var(--custom-orange)!important;
}

.text-custom-primary{
  color: #FFDD1A !important;
}


.bg-document-public{
  background-color: var(--custom-secondary)!important;
}
.bg-about{
  background-color: var(--custom-green-2)!important;
}
.bg-home2{
  background-color: var(--custom-green)!important;
}

.bg-home {
  background-image: url('/assets_global/img/BANNER BAPPEDA 5.webp');
  background-size: cover; /* atau contain, tergantung kebutuhan */
  background-position: center;
  background-repeat: no-repeat;
}
.bg-orange{
  background-color: var(--custom-orange)!important;
}
.text-orange{
  color: var(--custom-orange)!important;
}
.bg-purple{
  background-color: var(--custom-purple)!important;
}

.bg-footer{
  background-color: #F8F8F8 !important;
}

.bg-backdrop {
  -webkit-backdrop-filter: saturate(180%) blur(32px);
  backdrop-filter: saturate(180%) blur(32px);
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
  transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
  -webkit-transition-property: background-color, -webkit-backdrop-filter;
  transition-property: background-color, -webkit-backdrop-filter;
  transition-property: background-color, backdrop-filter;
  transition-property: background-color, backdrop-filter,
    -webkit-backdrop-filter;
}

.rounded-custom{
  border-radius: 30px !important;
}

.rounded-custom2{
  border-radius: 16px !important;
}

.curve-bg{
  background-image: url("/assets/img/bg-sumbar.jpg"); 
  background-size: cover; 
  background-position: center; 
  width: 100vw; 
  height: 80vh; 
  border-bottom-left-radius: 48px; 
  border-bottom-right-radius: 48px; 
  overflow: hidden;
}

@media (max-width: 768px) {
  .curve-bg {
    height: 60vh; 
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;
  }
}

@media (max-width: 480px) {
  .curve-bg {
    height: 50vh;
    border-bottom-left-radius: 24px; 
    border-bottom-right-radius: 24px;
  }
}  

/* .curve-bg {
  position: relative;
  width: 100vw;
  height: 80vh;
  clip-path: polygon(0 0, 100% 0, 100% 1000%, 0 100%);
  overflow: hidden;
}


video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

/* tukar */


/* .curve-bg {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
}

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

.svg-curve {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 1;
} */


@media (max-width: 768px) {
  .curve-bg {
    height: 60vh; 
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;
  }
  .video-bg {
    height: 50vh;
    position: relative;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .curve-bg {
    height: 50vh;
    border-bottom-left-radius: 24px; 
    border-bottom-right-radius: 24px;
  }
  .video-bg {
    height: 50vh;
    position: relative;
    object-fit: cover;
  }
}

.img-hover-zoom {
  transition: transform 0.5s ease;
}

.img-hover-zoom:hover {
  transform: scale(1.05);
}

.page-content ul {
  list-style-type: none;
  padding-left: 0;
}

.page-content ul li::before {
  content: "✔️ ";
  color: #6f42c1;
  font-weight: bold;
  margin-right: 0.5rem;
}

.text-custom{
  line-height: 1.8; 
  font-size: 1.05rem;
}

.bg-content-page {
  background-image: url('../media/abstract-grainy-texture-background.webp');
  /* background-size: cover; */
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: white;
}

.bg-content-news {
  background-image: url('../media/BG-CUSTOM-NEWS.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: white;
}

.bg-content-page h1 {
  position: relative;
  z-index: 1;
}

.span-custom{
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  background: #00f2fe;
  bottom: 0;
  left: 0;
  border-radius: 8px;
  box-shadow: 0 0 8px #00f2fe;"
}

.rounded-custom{
  border-radius: 15px;
}

.content-description img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 10px auto;
}

.bg-backdrop2 {
    background-color: rgba(255, 255, 255, 0.4); /* awal: putih transparan */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.bg-backdrop2:hover {
    background-color: rgba(173, 216, 230, 0.6); /* biru pastel transparan */
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.bg-backdrop3 {
    background-color: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(40px);                
    -webkit-backdrop-filter: blur(4px);
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.bg-backdrop3:hover {
    background-color: rgba(173, 216, 230, 0.6); /* biru pastel transparan */
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.tombol_contact_us{
    position: fixed;
    right: 7px;
    bottom: 50%;
}