/* 

TemplateMo 562 Space Dynamic

https://templatemo.com/tm-562-space-dynamic

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
  padding-top: 40px;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 700;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;
  line-height: 44px;
}

.section-heading h2 em {
  font-style: normal;
  color: #03a4ed;
}

.section-heading h2 span {
  color: #fe3f40;
}

.main-blue-button a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-red-button a {
  display: inline-block;
  background-color: #fe3f40;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #fe3f40;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

:root {
  --text-red: #cb0000;   /* definisi global */
  --text-blue: #007bff;  /* contoh tambahan */
}

.text-blue { color: var(--text-blue); }
.text-green { color: var(--text-green); }
.text-red { color: var(--text-red); }

/* 
---------------------------------------------
header
--------------------------------------------- 
*/
/* bagian warna bg dari header */
.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #fe3f40!important;
}

.background-header .nav li a.active {
  color: #fe3f40!important;
}
/* ==== NAVBAR FIXED-TOP CLEAN VERSION ==== */
.header-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 80px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 10px 0;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* Struktur utama navbar */
.header-area .main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Logo */
.header-area .main-nav .logo img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* Navigasi utama */
.header-area .main-nav .nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 25px;
}

/* Link menu */
.header-area .main-nav .nav li a {
  font-weight: 500;
  font-size: 15px;
  color: #333;
  text-transform: capitalize;
  text-decoration: none;
  transition: color 0.3s ease;
}

.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a.active {
  color: #fe3f40;
}

/* Mobile Menu Trigger */
.header-area .main-nav .menu-trigger {
  display: none;
  cursor: pointer;
  width: 30px;
  height: 25px;
  position: relative;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span::before,
.header-area .main-nav .menu-trigger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #333;
  transition: all 0.3s ease;
}

.header-area .main-nav .menu-trigger span {
  top: 50%;
  transform: translateY(-50%);
}

.header-area .main-nav .menu-trigger span::before {
  top: -8px;
}

.header-area .main-nav .menu-trigger span::after {
  top: 8px;
}

/* Saat menu aktif */
.header-area .main-nav .menu-trigger.active span {
  background: transparent;
}
.header-area .main-nav .menu-trigger.active span::before {
  transform: rotate(45deg);
  top: 0;
}
.header-area .main-nav .menu-trigger.active span::after {
  transform: rotate(-45deg);
  top: 0;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 992px) {
  .header-area .main-nav .nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    position: absolute;
    top: 80px;
    left: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }

  .header-area .main-nav .nav.active {
    display: flex;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    border-bottom: 1px solid #eee;
    text-align: center;
  }

  .header-area .main-nav .nav li a {
    display: block;
    padding: 15px 0;
    color: #333 !important;
  }

  .header-area .main-nav .menu-trigger {
    display: block;
  }
}

/* Tambahkan padding untuk isi halaman agar tidak tertutup navbar */


/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #fe3f40;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #fe3f40;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/
/* ganti bagian warna bg sambutan */
.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 226px 0px 120px 0px;
  position: relative;
  overflow: hidden;
    background-color: #e1b01e ;
}


.main-banner .left-content {
  margin-right: 45px;
}

.main-banner .left-content h6 {
  text-transform: uppercase;
  font-size: 25px;
  color: #cb0000;
  margin-bottom: 15px;
}

.main-banner .left-content h2 {
  font-size: 50px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 72px;
}

.main-banner .left-content h2 em {
  color: #03a4ed;
  font-style: normal;
}

.main-banner .left-content h2 span {
  color: #fe3f40;
}

.main-banner .left-content p {
  margin: 20px 0px;
}


.main-banner .right-image img{
  width: 460px;
  height: 460px;
}
/* 
---------------------------------------------
About Us Style
--------------------------------------------- 
*/

/* #about {
  margin-top: 10px;
} */

.about-us {
  background:#e4ea8c;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 140px 0px 120px 0px;
}

.about-us .left-image {
  margin-right: 45px;
}

.about-us .services .item {
  margin-bottom: 20px;
    background: rgb(255,77,30);
    background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);
      width: 350px;      
  height: 350px;     
    border: 2px solid #000;
  border-radius: 50%;  
  display: flex;       
  align-items: center;
  justify-content: center;
  text-align: center;
padding: 20px;
}

.about-us .services .item .icon {
  float: left;
  margin-right: 25px;
}

.about-us .services .item .icon img {
  max-width: 70px;
}

.about-us .services .item h4 {
  color: #000;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 12px;
}

.about-us .services .item p {
  color: #000;
}


/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.our-services {
  margin-top: 0px;
  padding-top: 40px;
  border-radius: 20px; /* Sudut melengkung */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Bayangan lembut agar terlihat "terangkat" */
    max-width: 900px; /* Batasi lebar agar tidak terlalu lebar di desktop */
    margin-left: auto;
    margin-right: auto;
}

.our-services .left-image {
  margin-right: 45px;
}

.our-services .section-heading h2 {
  margin-right: 100px;
}

.our-services .section-heading p {
  margin-top: 10px;
  margin-bottom: 10px;
}
.scrollable-text-wrapper {
    max-height: 400px; /* Nilai perkiraan tinggi gambar */
    overflow-y: scroll; /* Aktifkan scroll vertikal jika konten melebihi max-height */
    padding-right: 15px; /* Tambahkan padding agar teks tidak menempel ke scrollbar */
}

.scrollable-text-wrapper p {
    margin-bottom: 0; /* Hapus margin bawah default dari paragraf */
}

/* Styling yang sudah ada dari sebelumnya */
.batas-wilayah {
    max-height: 400px;
    overflow-y: scroll;
    padding-right: 15px; 
    column-count: 2;
    column-gap: 30px;
}


/* ---------------------------------------------------------------- */
/* STYLE KUSTOM UNTUK KARTU INFORMASI BATAS & DATA */
/* ---------------------------------------------------------------- */

.info-card-container {
    /* Mirip dengan .visi-misi-container: kotak putih melengkung */
    background-color: #ffffff; 
    border-radius: 12px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    max-width: 600px; /* Batasi lebar agar kompak seperti gambar */
    margin-left: auto;
    margin-right: auto;
    padding: 20px !important; /* Tambahkan padding agar lebih lega */
}

/* Heading Utama (Batas Nagari) */
.info-heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #212529; /* Warna teks gelap */
}

/* Heading Sekunder (Luas, Jumlah Penduduk) */
.info-heading-secondary {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0;
    color: #212529; 
}

/* Garis Pemisah */
.info-separator {
    border-top: 1px solid #dee2e6; /* Garis tipis abu-abu */
    opacity: 0.5;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Styling Daftar Definisi (Batas) */
.info-dl {
    margin-bottom: 0; /* Hapus margin bawah DL */
}

/* Label (Utara, Selatan, dll.) - Bold */
.info-dl dt {
    font-weight: 700;
    margin-top: 10px;
}

/* Nilai (Nama Nagari, Kecamatan) - Normal */
.info-dl dd {
    margin-left: 0;
    margin-bottom: 10px;
    font-weight: 400;
}

/* Nilai (Data Luas dan Penduduk) */
.info-value {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0;
}

.our-services .progress-skill-bar span {
  position: absolute;
  top: 0;
  font-size: 18px;
  font-weight: 600;
  color: #03a4ed;
}

.our-services .first-bar span {
  left: 69%;
}

.our-services .second-bar span {
  left: 81%;
}

.our-services .third-bar span {
  left: 88%;
}

.our-services .progress-skill-bar h4 {
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 14px;
}

.our-services .progress-skill-bar .full-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: #f7eff1;
  position: relative;
  z-index: 1;
}

.our-services .progress-skill-bar .filled-bar {
  background: rgb(255,77,30);
  background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);
  height: 6px;
  border-radius: 3px;
  margin-bottom: -6px;
  position: relative;
  z-index: 2;
}

.our-services .first-bar .filled-bar {
  width: 71%;
}

.our-services .second-bar .filled-bar {
  width: 83%;
}

.our-services .third-bar .filled-bar {
  width: 90%;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 120px;
  margin-top: 0px;
}

.our-portfolio .section-heading h2 {
  text-align: center;
  margin: 0px 90px 0px 90px;
  margin-bottom: 120px;
  position: relative;
  z-index: 1;
}

.our-portfolio .item {
  position: relative;
}

.our-portfolio .item:hover .hidden-content {
  top: -100px;
  opacity: 1;
  visibility: visible;
}

.our-portfolio .item:hover .showed-content {
  top: 90px;
}

.our-portfolio .hidden-content {
  background: rgb(255,77,30);
  background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  opacity: 0;
  top: 0;
  visibility: hidden;
  position: absolute;
  z-index: 2;
  transition: all 0.5s;
}

.our-portfolio .hidden-content:after {
  width: 20px;
  height: 20px;
  position: absolute;
  background: rgb(255,77,30);
  content: '';
  left: 50%;
  bottom: -8px;
  margin-left: -5px;
  transform: rotate(45deg);
  background: linear-gradient(105deg, rgba(255,52,69,1) 0%, rgba(255,51,78,1) 100%);
  z-index: -1;
}

.our-portfolio .hidden-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

.our-portfolio .hidden-content p {
  color: #fff;
}

.our-portfolio .showed-content {
  top: 0px;
  position: relative;
  z-index: 3;
  background-color: #fff;
  text-align: center;
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  transition: all 0.5s;
}

.our-portfolio .showed-content img {
  max-width: 100px;
}


/* 
---------------------------------------------
Blog
--------------------------------------------- 
*/

.our-blog {
  position: relative;
  margin-top: 80px;
  padding-top: 120px;
}

.our-blog .section-heading h2 {
  margin-right: 180px;
}

.our-blog .top-dec {
  text-align: right;
  margin-top: -80px;
}

.our-blog .top-dec img {
  max-width: 270px;
}

.our-blog .left-image {
  position: relative;
}

.our-blog .left-image img {
  border-radius: 20px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.our-blog .left-image .info {
  position: relative;
}

.our-blog .left-image .info .inner-content {
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 20px;
  margin-right: 75px;
  position: absolute;
  margin-top: -100px;
  padding: 30px;
}

.our-blog .left-image ul li {
  display: inline-block;
  font-size: 15px;
  color: #afafaf;
  font-weight: 300;
  margin-right: 20px;
}

.our-blog .left-image ul li:last-child {
  margin-right: 0px;
}

.our-blog .left-image ul li i {
  color: #ff4d61;
  font-size: 16px;
  margin-right: 8px;
}

.our-blog .left-image h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 20px 0px 15px 0px;
}

.our-blog .left-image .info .main-blue-button {
  position: absolute;
  bottom: -80px;
  left: 0;
}

.our-blog .right-list {
  margin-left: 30px;
}

.our-blog .right-list ul li {
  display: inline-flex;
  width: 100%;
  margin-bottom: 30px;
}

.our-blog .right-list .left-content {
  margin-right: 45px;
}

.our-blog .right-list .left-content span {
  font-size: 15px;
  color: #afafaf;
  font-weight: 300;
}

.our-blog .right-list .left-content span i {
  color: #ff4d61;
  font-size: 16px;
  margin-right: 8px;
}

.our-blog .right-list .left-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 20px 0px 15px 0px;
}


.our-blog .right-list .right-image img {
  width: 250px;
  border-radius: 20px;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  padding: 160px 0px;
  background-image: url(../images/contact-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.contact-us .section-heading h2,
.contact-us .section-heading h2 em,
.contact-us .section-heading h2 span {
  color: #fff;
}

.contact-us .section-heading p {
  color: #fff;
  margin-top: 30px;
}

.phone-info {
  margin-top: 40px;
}

.phone-info h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.phone-info h4 span i {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  background-color: #fff;
  border-radius: 50%;
  color: #ff3b2c;
  font-size: 22px;
  margin-left: 30px;
  margin-right: 15px;
}

.phone-info h4 span a {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

form#contact .contact-dec {
  position: absolute;
  right: -166px;
  bottom: 0;
}

form#contact .contact-dec img {
  max-width: 178px;
}

form#contact {
  margin-left: 30px;
  position: relative;
  background-color: #fff;
  padding: 60px 30px;
  border-radius: 20px;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 33px;
  background-color: #d1f3ff;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  margin-bottom: 20px;
}

form#contact input::placeholder {
  color: #2a2a2a;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 180px;
  min-height: 140px;
  height: 140px;
  border-radius: 20px;
  background-color: #d1f3ff;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-bottom: 20px;
}

form#contact textarea::placeholder {
  color: #2a2a2a;
}

form#contact button {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  outline: none;
  transition: all .3s;
}

form#contact button:hover {
  background-color: #fe3f40;
}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #68bb7d;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cb0000;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer p {
  text-align: center;
  margin: 30px 0px 45px 0px;
}

footer p a {
  color: #fe3f40;
}

 .card {
      border: none;
      border-radius: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      background-color: #fff;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
       margin: 0 10px;  /* Jarak antar card */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);  /* Efek bayangan untuk card */
    }

    .card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 18px rgba(0,0,0,0.2);
    }

.card img {
  display: block;
  margin: 20px auto; /* auto membuat gambar rata tengah */
  border-radius: 50%;
  width: 130px;
  height: 130px;
  object-fit: cover;
  border: 4px solid #c8102e;
}


    .card-title {
      font-weight: 600;
      color: #222;
      margin-top: 15px;
    }

    .card-text {
      color: #777;
      margin-bottom: 40px;
    }

    .card-body {
      margin-bottom: 20px;
    }
     .carousel-inner .card {
            border: none;  /* Hilangkan border card jika tidak diinginkan */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);  /* Tambahkan bayangan untuk tampilan lebih bagus */
        }

       .carousel-control-prev,
.carousel-control-next {
  top: 50%;
  transform: translateY(-50%);
  width: auto; /* biar tombol tidak terlalu lebar */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  font-size: 3rem;
  color: white;
  background-color: #cb0000; /* opsional: sedikit bayangan agar terlihat */
  border-radius: 50%;
  padding: 10px; /* biar ikonnya lebih enak dilihat */
  transition: background-color 0.3s ease;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

        /* Responsif tambahan jika diperlukan */
        @media (max-width: 768px) {
            .carousel-item .row {
                justify-content: center;  /* Pusatkan card pada tablet */
            }
        }

        @media (max-width: 576px) {
            .carousel-item .row {
                justify-content: center;  /* Pusatkan card pada mobile */
            }
            
        }
        @media (max-width: 768px) {  /* Tablet and below */
            .carousel-inner .carousel-item-next,
            .carousel-inner .carousel-item-prev {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
            }}
.btn-red {
    background-color: #e74c3c; /* merah cerah */
    color: white;
    border: none;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  .btn-red:hover {
    background-color: #c0392b; /* merah lebih gelap saat hover */
    box-shadow: 0 6px 12px rgba(192, 57, 43, 0.6);
  }

  .btn-red:active {
    background-color: #a93226;
    box-shadow: 0 2px 6px rgba(169, 50, 38, 0.8);
    transform: translateY(2px);
  
  }

  .berita .container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-top: 25px;
  }

  /* ======================================================= */
/* STYLING TAMBAHAN UNTUK GAMBAR DI TENGAH KONTEN */
/* ======================================================= */

/* Figure untuk membungkus gambar dan caption */
.berita .detail-content .content-image {
    width: 100%;
    margin: 35px 0; /* Memberi jarak yang cukup dari paragraf di atas dan bawah */
    display: block;
    text-align: center; /* Memusatkan gambar dan caption */
}

/* Gambar itu sendiri */
.berita .detail-content .content-image img {
    /* Batasi lebar gambar agar tidak terlalu besar (opsional) */
    max-width: 100%; 
    height: auto;
    border-radius: 8px; /* Sudut melengkung pada gambar konten */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Bayangan lembut */
}

/* Caption Gambar */
.berita .detail-content .image-caption {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 10px;
    font-style: italic;
}

/* ======================================================= */
/* PERBAIKAN STYLING PARAGRAF (Wajib diaktifkan) */
/* ======================================================= */

/* Pastikan paragraf Anda di-justify dan memiliki line-height yang nyaman */
.berita .detail-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 25px;
    text-align: justify; /* Membuat tepi kiri-kanan teks rata */
}
  .detail-header {
    position: relative;
    overflow: hidden;
  }
  .detail-header img {
    width: 100%;
    height: 500px;
    display: block;
    object-fit: cover;
  }
  .detail-content {
    padding: 30px 40px;
  }
  .detail-content h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #2c3e50;
  }
  .meta-info {
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-bottom: 25px;
  }
  .meta-info i {
    margin-right: 6px;
    color: #3498db;
  }
  .meta-info span {
    margin-right: 20px;
  }
  .detail-content p {
    line-height: 1.7;
    font-size: 1.1rem;
    margin-bottom: 25px;
  }
  .btn-back {
    display: inline-block;
    background-color: #3498db;
    color: white;
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    transition: background-color 0.3s ease;
  }
  .btn-back:hover {
    background-color: #2980b9;
  }
  @media (max-width: 600px) {
    .detail-content {
      padding: 20px;
    }
    .detail-content h1 {
      font-size: 1.8rem;
    }
  }
/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1645px) {
  form#contact .contact-dec {
    display: none;
  }
}

@media (max-width: 992px) {
  .main-banner {
    padding-top: 196px;
  }
  .main-banner .left-content {
    margin-right: 0px;
    text-align: center;
    margin-bottom: 45px;
  }
  .main-banner:after {
    top: 76px;
    z-index: -1;
  }
  .main-banner .left-content form,
  .main-banner .left-content form input {
    width: 100%!important;
  }
  #about {
    margin-top: 0px;
  }
  .about-us {
    position: relative;
    background-image: none;
    padding: 0px;
  }
  .about-us .services {
    text-align: center;
  }
  .about-us .services .item  {
    background: rgb(255,77,30);
    background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);
    padding: 40px;
    border-radius: 50%;
    display: inline-block;
    max-width: fit-content;
    max-height: 200px;

  }
  .about-us .services .item .right-text {
    text-align: center;
  }
  .our-services {
    margin-top: 20px;
  }
  .our-services .left-image {
    margin-right: 0px;
    margin-bottom: 10px;
  }
  .our-services .section-heading h2,
  .our-services .section-heading p {
    margin-right: 0px;
    text-align: center;
  }
  .our-portfolio .section-heading h2 {
    margin: 0px 0px 80px 0px;
  }
  .our-portfolio .item {
    margin-bottom: 15px;
  }
  .our-blog {
    margin-top: 0px;
  }
  .our-blog .top-dec {
    display: none;
  }
  .our-blog .section-heading h2 {
    margin-right: 0px;
    text-align: center;
    margin-bottom: 45px;
  }
  .our-blog .left-image .info .inner-content {
    position: relative;
    margin-right: 0px;
  }
  .our-blog .left-image .info .main-blue-button {
    position: relative;
    bottom: 0px;
    margin-top: 30px;
  }
  .our-blog .left-image {
    margin-bottom: 45px;
  }
  .contact-us {
    margin-top: 60px;
    padding: 120px 0px;
  }
  .contact-us .section-heading {
    text-align: center;
  }
  form#contact {
    margin-left: 0px;
    margin-top: 30px;
  }
  form#contact .contact-dec {
    display: none;
  }
  footer p {
    margin: 15px 0px 30px 0px;
  }
}

@media (max-width: 767px) {
  .about-us .left-image {
    bottom: -280px;
  }
  .our-blog .right-list {
    margin-left: 0px;
  }
  .our-blog .right-list ul li {
    display: inline-block;
    margin-top: 0px;
    padding-top: 30px;
    border-top: 1px solid #eee;
  }
  .our-blog .right-list .left-content {
    margin-right: 0px;
    width: 100%;
    margin-bottom: 15px;
  }
  .our-blog .right-list .right-image,
  .our-blog .right-list .right-image img {
    width: 100%;
  }
  .phone-info h4 span {
    display: block;
    margin-top: 15px;
  }
  .phone-info h4 span i {
    margin-left: 0px;
  }
}

/* bagian slider */
.slider-container {
    width: 1197px; /* 1200px set as 1197px to prevent showing up some slicing lines */
    height: 700px;
    position: relative;
    perspective: 1500px;
    transform-style: preserve-3d;
    overflow: visible;
}

.slider-stage {
    width: 100%;
    height: 600px;
    position: relative;
    display: flex;
    transform-style: preserve-3d;
}

.slice-container {
    flex: 1;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    overflow: hidden;
}

.slice-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center center;
}

.slice-cube {
    transform: translateZ(-300px) rotateX(0deg);
}

.slice-cube.rotate-1 {
    transform: translateZ(-300px) rotateX(90deg);
}

.slice-cube.rotate-2 {
    transform: translateZ(-300px) rotateX(180deg);
}

.slice-cube.rotate-3 {
    transform: translateZ(-300px) rotateX(270deg);
}

.slice-face {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
}

.slice-face.face-1 {
    transform: rotateX(0deg) translateZ(300px);
}

.slice-face.face-2 {
    transform: rotateX(-90deg) translateZ(300px);
}

.slice-face.face-3 {
    transform: rotateX(-180deg) translateZ(300px);
}

.slice-face.face-4 {
    transform: rotateX(-270deg) translateZ(300px);
}

.slice-image {
    position: absolute;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.slice-container:nth-child(1) .slice-cube { transition-delay: 0s; }
.slice-container:nth-child(2) .slice-cube { transition-delay: 0.04s; }
.slice-container:nth-child(3) .slice-cube { transition-delay: 0.08s; }
.slice-container:nth-child(4) .slice-cube { transition-delay: 0.12s; }
.slice-container:nth-child(5) .slice-cube { transition-delay: 0.16s; }
.slice-container:nth-child(6) .slice-cube { transition-delay: 0.20s; }
.slice-container:nth-child(7) .slice-cube { transition-delay: 0.24s; }
.slice-container:nth-child(8) .slice-cube { transition-delay: 0.28s; }
.slice-container:nth-child(9) .slice-cube { transition-delay: 0.32s; }
.slice-container:nth-child(10) .slice-cube { transition-delay: 0.36s; }

.text-overlay {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    height: 120px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 40px;
    z-index: 102;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.text-overlay.hiding {
    opacity: 0;
    transform: translateY(10px);
}

.slide-title {
    color: white;
    font-size: 32px;
    font-weight: bold;
    margin: 0 0 8px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.slide-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 103;
}

.control-btn {
    width: 65px;
    height: 65px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
    font-size: 26px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    padding: 0;
    position: relative;
}

.control-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(255, 255, 255, 0.4);
    border-color: white;
}

.nav-arrow {
    position: absolute;
    top: 300px;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
    z-index: 102;
    opacity: 0.8;
    padding: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.nav-arrow:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    transition: transform 0.2s ease;
}

.nav-arrow.prev:before {
    border-width: 13px 15px 13px 0;
    border-color: transparent white transparent transparent;
    margin-right: 2px;
}

.nav-arrow.next:before {
    border-width: 13px 0 13px 15px;
    border-color: transparent transparent transparent white;
    margin-left: 2px;
}

.nav-arrow:hover:not(:disabled) {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 25px rgba(255, 255, 255, 0.4);
    border-color: white;
}

.nav-arrow.prev {
    left: 40px;
}

.nav-arrow.next {
    right: 40px;
}

.play-pause-btn {
    position: relative;
}

.play-pause-btn::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    opacity: 0;
    z-index: -1;
    animation: rotate 1.5s linear infinite;
}

.play-pause-btn:not(.paused)::before {
    opacity: 1;
}

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

.play-icon, .pause-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.play-icon:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent white;
    margin-left: 4px;
}

.pause-icon:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: linear-gradient(to right, white 35%, transparent 35%, transparent 65%, white 65%);
}

.play-icon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}

.pause-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.play-pause-btn.paused .play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.play-pause-btn.paused .pause-icon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}

.dots {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 103;
}

.thumbnails-container {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 104;
}

.thumbnail {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    background-size: cover;
    background-position: center;
    position: relative;
}

.thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.thumbnail:hover::after {
    background: rgba(0, 0, 0, 0.1);
}

.thumbnail.active {
    border-color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.thumbnail.active::after {
    background: rgba(0, 0, 0, 0);
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.3);
}

.dot.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.3);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.2);
    z-index: 101;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #FF6B6B, #FFAB91, #7FFFD4);
    width: 0;
    animation: none;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.progress-bar.active {
    animation: fillProgress 3.5s linear forwards;
}

@keyframes fillProgress {
    from { width: 0%; }
    to { width: 100%; }
}

.progress-bar.reset {
    animation: none;
    width: 0;
}

/* Section Styles */
.section {
    padding: 120px 20px;
    position: relative;
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 80px;
}

.section-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #FF6B6B, #FFAB91, #7FFFD4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: 20px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}
.hero-wrapper {
  position: relative;
  width: 100%;
  height: 85vh; /* Tetap, tapi bisa diubah ke 100vh jika mau full screen */
  background-size: cover; /* Ubah dari 100% 100% ke cover agar gambar tidak stretch berlebihan, lebih natural */
  background-repeat: no-repeat;
  background-position: center top;
  transition: background-image 0.6s ease-in-out;
  overflow: hidden;
  padding-top: 20px;

  /* Ubah dari center ke flex-start agar content lebih ke atas, tidak selalu tengah vertikal */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Content mulai dari atas, lebih fleksibel untuk "turun" */
}

.hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  /* Hapus height: 100% agar tidak paksa center vertikal penuh */
  display: flex;
  align-items: center; /* Tetap center horizontal */
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 40px 20px; /* Tambah padding atas agar teks "turun" lebih jauh dari atas */
  width: 100%;
}

.hero-content .content-box {
  max-width: 800px;
  margin: 0 auto;
  animation: fadeInUp 1s ease;
}

.hero-content .display-4 {
  font-size: 3.5rem;
  font-weight: 800;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
  margin-bottom: 15px;
}

.hero-content .lead {
  font-size: 1.25rem;
  line-height: 1.7;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* =====================================================
   3. HERO THUMBNAILS (Galeri Bawah)
===================================================== */
.hero-gallery-container {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  max-width: 1000px;
}

.hero-thumb {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid transparent;
  cursor: pointer;
  opacity: 0.85;
  transition: all 0.35s ease;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(0);
}

.hero-thumb:hover {
  opacity: 1;
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}

.hero-thumb.active {
  opacity: 1;
  transform: translateY(-10px) scale(1.05);
  border-color: #03a4ed;
  box-shadow: 0 12px 25px rgba(3, 164, 237, 0.6);
}

/* =====================================================
   4. RESPONSIVE DESIGN
===================================================== */
@media (max-width: 992px) {
  .hero-content .display-4 {
    font-size: 2.5rem;
  }
  .hero-content .lead {
    font-size: 1.1rem;
  }
  .hero-thumb {
    width: 120px;
    height: 80px;
  }
  .hero-content {
    padding: 20px 20px; /* Kurangi padding pada tablet untuk hindari stack */
  }
}

@media (max-width: 576px) {
  .hero-content .display-4 {
    font-size: 2rem;
  }
  .hero-content .lead {
    font-size: 1rem;
  }
  .hero-gallery-container {
    bottom: 20px;
    gap: 10px;
  }
  .hero-thumb {
    width: 100px;
    height: 70px;
  }
  .hero-content {
    padding: 10px 20px; /* Lebih kecil lagi untuk mobile */
  }
}

/* =====================================================
   5. ANIMATIONS
===================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* * 5. FLOATING WIDGETS */
/* Widget Kunjungan (Kiri Bawah) */
.floating-widgets {
    position: fixed;
    bottom: 50px; /* Posisi di atas thumbnail */
    left: 15px; 
    z-index: 1000;
}
.kunjungan-widget {
    padding: 8px 15px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    background-color: rgba(30, 58, 41, 0.8); 
    color: white;
    display: flex;
    align-items: center;
    line-height: 1.2;
    min-width: 150px;
}
.kunjungan-widget p {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0;
}

/* Widget Pengaduan (Kanan Bawah) */
.pengaduan-widget {
    position: fixed;
    bottom: 50px; /* Posisi di atas thumbnail */
    right: 15px; 
    padding: 8px 15px;
    border-radius: 25px;
    cursor: pointer;
    background-color: var(--color-accent); 
    color: white;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}


/* * 6. RESPONSIVITAS */
@media (max-width: 992px) {
    .hero-content .content-box {
        bottom: 180px; 
    }
    .hero-content .display-4 {
        font-size: 3rem;
    }
    .hero-gallery-container {
        bottom: -20px; 
    }
    .hero-thumb {
        width: 170px; 
        height: 100px;
    }
    .floating-widgets, .pengaduan-widget {
        bottom: 30px; 
    }
}
@media (max-width: 768px) {
    .hero-wrapper {
        height: 70vh; 
    }
    .hero-content .display-4 {
        font-size: 2rem;
    }
    .hero-content .content-box {
        bottom: 120px; 
    }
    .hero-gallery-container {
        bottom: 10px; 
        width: 95%;
        padding: 0 5px; 
    }
    .hero-thumb {
        width: 100%; 
        height: 70px;
        border-top: 3px solid white; 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    .hero-thumb.active {
        transform: translateY(-3px) scale(1.02);
    }
    .kunjungan-widget {
        display: none; 
    }
    .pengaduan-widget {
        bottom: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* CONTAINER UTAMA INFOGRAFIS */
.infografis-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #f8f9fa; /* Latar belakang abu-abu muda */
}

/* KOTAK ATAU CARD UTAMA INFOGRAFIS */
.infografis-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 30px;
    margin-bottom: 30px;
    height: 100%; /* Memastikan semua card memiliki tinggi yang sama di dalam row */
}

.infografis-card h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e8449; /* Warna hijau khas Nagari */
    margin-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 10px;
}

/* Styling untuk Chart Canvas (di mana chart akan dirender) */
.chart-container {
    position: relative;
    width: 100%;
    /* Atur rasio aspek untuk chart agar terlihat bagus */
    height: 350px; 
}

/* Teks dan Angka Kunci */
.data-key-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #343a40;
    text-align: center;
    margin-top: 15px;
}

/* ======================================================= */
/* 1. STYLING UMUM HALAMAN ADMIN */
/* ======================================================= */

.content {
    background-color: #f4f6f9; /* Latar belakang halaman yang lembut */
    min-height: 100vh;
}

/* Judul dan Kontrol Header */
.admin-header-title {
    font-weight: 700;
    color: #343a40; 
}

/* Tombol Tambah (Primary) */
.btn-tambah-custom {
    background-color: #4682b4; /* Warna Biru-Hijau modern (Cadet Blue yang diperindah) */
    border-color: #4682b4;
    font-weight: 500;
    transition: background-color 0.3s;
}
.btn-tambah-custom:hover {
    background-color: #3b6d94;
    border-color: #3b6d94;
}

/* Tombol Kembali (Secondary) */
.btn-back-custom {
    background-color: #adb5bd; 
    border-color: #adb5bd;
}

/* ======================================================= */
/* 2. STYLING TABEL DAN CARD */
/* ======================================================= */

.card.shadow {
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.05) !important;
}

/* Header Tabel */
.table-header-custom th {
    background-color: #5f9ea0; /* Warna Cadet Blue */
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle; 
}

/* Teks dan Konten di Sel Tabel */
.table td {
    vertical-align: middle; /* Memastikan semua konten sel rata tengah vertikal */
    padding: 0.75rem;
    font-size: 0.9rem;
}

/* Baris Ganjil-Genap */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fcfcfc;
}

.table-hover tbody tr:hover {
    background-color: #e9f0f5; /* Efek hover yang lembut */
}

/* Gambar Thumbnail */
.img-thumbnail {
    border: 1px solid #ddd;
    padding: 2px;
    border-radius: 4px;
    height: auto; 
}

<style>
table.table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  vertical-align: middle;
}

table.table th, 
table.table td {
  vertical-align: middle !important; /* agar sejajar tengah vertikal */
  text-align: center;
  padding: 8px;
}

table.table td:nth-child(4) { /* kolom isi */
  white-space: normal !important;
  word-break: break-word !important;
  max-width: 350px;
  text-align: left; /* isi berita rata kiri agar mudah dibaca */
}

table.table td img {
  border-radius: 8px;
}

table.table thead th {
  background-color: #f8f9fa;
  font-weight: 600;
}

table.table tbody tr:hover {
  background-color: #f5f5f5;
}
</style>


#blog {
  background: #f9fafb;
  padding: 60px 0;
}

.section-heading h2 {
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 30px;
  border-left: 5px solid #007bff;
  padding-left: 10px;
}

.left-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
  transition: 0.3s ease;
}
.left-image img:hover {
  transform: scale(1.02);
}

.info {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-top: -80px;
  margin-left: 30px;
  padding: 20px;
  position: relative;
  z-index: 2;
}

.info h4 {
  font-size: 22px;
  color: #333;
  font-weight: 600;
}

.info p {
  font-size: 15px;
  color: #666;
  margin-bottom: 10px;
}

.info ul {
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
}
.info ul li {
  display: inline-block;
  font-size: 13px;
  margin-right: 10px;
  color: #888;
}

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

.right-list li {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 10px;
  margin-bottom: 15px;
  transition: 0.3s;
}

.right-list li:hover {
  transform: translateY(-5px);
}

.right-list .left-content {
  flex: 1;
  padding: 10px 15px;
}

.right-list .left-content h4 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.right-list .left-content p {
  font-size: 14px;
  color: #777;
}

.right-list .right-image img {
  width: 100px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
}
.main-blue-button a {
  background-color: #007bff;
  color: #fff;
  padding: 8px 20px;
  border-radius: 25px;
  text-decoration: none;
  transition: 0.3s;
}
.main-blue-button a:hover {
  background-color: #0056b3;
}

/* Aturan Reset Dasar */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4; /* Warna latar belakang halaman */
    color: #333;
}

/* Container untuk membatasi lebar konten */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 15px 0;
}

/* Header */
.site-header {
    background-color: #007bff; /* Biru khas pemerintah/desa */
    color: white;
    padding: 20px 0;
    text-align: center;
}
.site-header h1 {
    font-size: 1.8em;
}

/* Area Berita Utama */
.news-container {
    background: #fff;
    padding: 30px;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Judul Berita */
.news-title {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Metadata (Tanggal, Penulis, Kategori) */
.news-meta {
    font-size: 0.9em;
    color: #6c757d;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.news-meta span {
    margin-right: 15px;
}
.news-meta i {
    color: #007bff;
    margin-right: 5px;
}

/* Gambar Utama */
.featured-image {
    margin: 20px 0;
    text-align: center;
}
.img-responsive {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Konten Artikel */
.news-content p {
    margin-bottom: 20px;
    text-align: justify;
}
.news-content h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #007bff;
    border-left: 4px solid #007bff;
    padding-left: 10px;
}

/* Footer */
.site-footer {
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 15px 0;
    margin-top: 30px;
}

/* MEDIA QUERIES untuk Responsif */
@media (max-width: 768px) {
    .news-title {
        font-size: 1.8em;
    }
    .news-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .news-meta span {
        margin-bottom: 5px;
    }
}


.news-section {
  max-width: 1200px;
  margin: auto;
}

.news-section h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  color: #2c3e50;
}

.news-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.news-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.news-image {
  position: relative;
}

.news-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.news-date {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #00bfa6;
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
}

.news-content {
  padding: 15px 18px 20px;
}

.news-content h3 {
  font-size: 18px;
  color: #222;
  margin: 0 0 10px;
  line-height: 1.4;
}

.news-content p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 12px;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #777;
}

/* @media (max-width: 992px) {
  .news-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .news-container {
    grid-template-columns: 1fr;
  }
} */

.news-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.news-detail h2 {
  text-align: center;
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.news-detail .views {
  text-align: center;
  color: #777;
  font-size: 14px;
  margin-bottom: 20px;
}

.news-detail .news-image {
  width: 100%;
  height: 400px;
  border-radius: 10px;
  margin: 20px 0;
  overflow: hidden;
  background: #f0f0f0;
}

.news-detail .news-image img {
  width: auto;
  height: auto;
  border-radius: 10px;
}


.news-detail h3 {
  text-align: center;
  color: #444;
  margin-bottom: 15px;
  font-weight: 600;
}

.news-detail .description {
  line-height: 2;
  color: #333;
  text-align: justify;
  word-wrap: break-word;       
  overflow-wrap: break-word;   
  white-space: normal;      

}

.btn-back {
  display: inline-block;
  margin-top: 25px;
  padding: 10px 25px;
  border: 1px solid #007bff;
  border-radius: 25px;
  color: #007bff;
  text-decoration: none;
  transition: all 0.3s ease;
  color: #000;
}

.btn-back:hover {
  background-color: #007bff;
  color: #fff;
}