/*==================================================
WEBSITE DESA BANGUN REJO
FINAL VERSION
Developer : ChatGPT & Tim KKN
===================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

:root{

--hijau:#198754;
--hijau2:#146c43;
--kuning:#ffc107;
--abu:#f8f9fa;
--putih:#ffffff;
--hitam:#222;

}

body{

background:#fff;
overflow-x:hidden;
color:#444;
line-height:1.8;

}

a{

text-decoration:none;

transition:.3s;

}

img{

max-width:100%;

}

/*=================================
NAVBAR
=================================*/

.navbar{

padding:15px 0;

background:rgba(25,135,84,.20);

backdrop-filter:blur(10px);

transition:.4s;

z-index:9999;

}

.navbar-scroll{

background:#198754!important;

padding:10px 0;

box-shadow:0 5px 20px rgba(0,0,0,.15);

}

.logo{

width:55px;

height:55px;

object-fit:cover;

border-radius:50%;

background:white;

padding:5px;

}

.navbar-brand h5{

font-weight:700;

margin-bottom:0;

font-size:18px;

color:white;

}

.navbar-brand small{

font-size:12px;

color:#eee;

}

.nav-link{

color:white!important;

margin-left:18px;

font-weight:500;

position:relative;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-5px;

width:0;

height:2px;

background:#ffc107;

transition:.4s;

}

.nav-link:hover::after{

width:100%;

}

.nav-link.active{

color:#FFD54F!important;

}

.navbar .btn{

border-radius:30px;

padding:10px 25px;

font-weight:600;

}

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

.running-text{

background:#ffc107;

padding:10px;

font-weight:600;

font-size:15px;

box-shadow:0 5px 15px rgba(0,0,0,.08);

color:#333;

}

/*=================================
HERO
=================================*/

.hero{

height:100vh;

display:flex;

align-items:center;

position:relative;

background:

linear-gradient(

rgba(0,0,0,.55),

rgba(0,0,0,.55)

),

url("../img/balai-desa.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

color:white;

}

.hero::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(

90deg,

rgba(25,135,84,.30),

transparent

);

}

.hero .container{

position:relative;

z-index:2;

}

.hero h1{

font-size:65px;

font-weight:800;

margin-bottom:25px;

line-height:1.2;

}

.hero p{

font-size:20px;

max-width:700px;

margin-bottom:35px;

}

.hero .btn{

padding:15px 35px;

border-radius:40px;

font-size:18px;

font-weight:600;

margin-right:10px;

}

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

section{

padding:90px 0;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h5{

color:#198754;

font-weight:700;

letter-spacing:2px;

}

.section-title h2{

font-size:40px;

font-weight:800;

margin-top:10px;

color:#222;

}

.section-title p{

max-width:700px;

margin:auto;

color:#777;

margin-top:15px;

}

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

.menu-card{

background:#fff;

border-radius:20px;

padding:40px 30px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.4s;

height:100%;

position:relative;

overflow:hidden;

}

.menu-card::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:5px;

background:#198754;

transition:.4s;

}

.menu-card:hover::before{

left:0;

}

.menu-card:hover{

transform:translateY(-12px);

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

}

.menu-card i{

font-size:60px;

color:#198754;

margin-bottom:25px;

transition:.4s;

}

.menu-card:hover i{

transform:scale(1.15);

color:#ffc107;

}

.menu-card h4{

font-weight:700;

margin-bottom:15px;

color:#198754;

}

.menu-card p{

color:#777;

font-size:15px;

line-height:28px;

}

/*=================================
SAMBUTAN
=================================*/

#profil{

background:#fff;

}

#profil img{

border-radius:25px;

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

transition:.5s;

}

#profil img:hover{

transform:scale(1.03);

}

#profil h2{

font-size:42px;

font-weight:800;

color:#198754;

margin-bottom:25px;

}

#profil h5{

letter-spacing:2px;

font-weight:700;

color:#198754;

}

#profil p{

font-size:17px;

line-height:34px;

color:#555;

text-align:justify;

}

/*=================================
STATISTIK
=================================*/

.statistik{

background:linear-gradient(

135deg,

#198754,

#146c43

);

color:#fff;

}

.stat-card{

background:#fff;

padding:35px;

border-radius:25px;

text-align:center;

transition:.4s;

height:100%;

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

}

.stat-card:hover{

transform:translateY(-12px);

}

.stat-card i{

font-size:60px;

color:#198754;

margin-bottom:20px;

}

.stat-card h2{

font-size:46px;

font-weight:800;

color:#198754;

margin-bottom:10px;

}

.stat-card p{

font-size:17px;

font-weight:600;

color:#555;

margin:0;

}

/*=================================
COUNTER
=================================*/

.counter{

font-size:48px;

font-weight:800;

color:#198754;

}

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

.btn-success{

background:#198754;

border:none;

padding:12px 28px;

border-radius:30px;

font-weight:600;

transition:.3s;

}

.btn-success:hover{

background:#146c43;

transform:translateY(-3px);

}

.btn-warning{

border-radius:30px;

font-weight:600;

padding:12px 28px;

}

.btn-outline-light{

border-radius:30px;

padding:12px 28px;

font-weight:600;

}

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

.card{

border:none;

border-radius:20px;

overflow:hidden;

transition:.4s;

}

.card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.card img{

transition:.5s;

}

.card:hover img{

transform:scale(1.05);

}

/*=================================
BERITA
=================================*/

#berita{

background:#f8f9fa;

}

.news-card{

background:#fff;

border-radius:22px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.4s;

height:100%;

}

.news-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.news-card img{

width:100%;

height:240px;

object-fit:cover;

transition:.5s;

}

.news-card:hover img{

transform:scale(1.08);

}

.news-card .card-body{

padding:25px;

}

.news-card h5{

font-weight:700;

color:#198754;

margin-bottom:15px;

line-height:30px;

}

.news-card p{

color:#666;

line-height:28px;

}

.news-card small{

display:block;

margin-bottom:15px;

color:#999;

}

/*=================================
POTENSI DESA
=================================*/

.potensi{

background:white;

}

.potensi-card{

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.4s;

height:100%;

}

.potensi-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.potensi-card img{

width:100%;

height:250px;

object-fit:cover;

transition:.5s;

}

.potensi-card:hover img{

transform:scale(1.08);

}

.potensi-card .p-4{

padding:30px!important;

}

.potensi-card h4{

font-weight:700;

color:#198754;

margin-bottom:18px;

}

.potensi-card p{

color:#666;

line-height:30px;

margin-bottom:20px;

}

/*=================================
GALERI
=================================*/

.gallery-card{

border-radius:22px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.4s;

background:#fff;

height:100%;

}

.gallery-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.gallery-card img{

width:100%;

height:260px;

object-fit:cover;

transition:.5s;

}

.gallery-card:hover img{

transform:scale(1.08);

}

.gallery-card .card-body{

padding:25px;

}

.gallery-card h5{

font-weight:700;

color:#198754;

margin-bottom:15px;

}

.gallery-card p{

color:#666;

line-height:28px;

}

/*=================================
DETAIL PAGE
=================================*/

.detail-page{

padding:100px 0;

background:#fff;

}

.detail-page img{

width:100%;

border-radius:20px;

margin-bottom:30px;

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

}

.detail-page h1{

font-size:40px;

font-weight:800;

color:#198754;

margin-bottom:20px;

}

.detail-page .tanggal{

color:#999;

margin-bottom:25px;

display:block;

}

.detail-page p{

font-size:17px;

line-height:34px;

text-align:justify;

color:#555;

}

/*=================================
AGENDA
=================================*/

.agenda{

background:#f8f9fa;

}

.agenda-card{

background:#fff;

border-radius:20px;

padding:30px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

margin-bottom:30px;

transition:.4s;

border-left:6px solid #198754;

}

.agenda-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.agenda-card .tanggal{

display:inline-block;

background:#198754;

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:14px;

font-weight:600;

margin-bottom:18px;

}

.agenda-card h4{

font-weight:700;

color:#198754;

margin-bottom:15px;

}

.agenda-card p{

color:#666;

line-height:30px;

}

/*=================================
PENGUMUMAN
=================================*/

.pengumuman{

background:#fff;

}

.pengumuman-card{

background:#fff;

padding:30px;

border-radius:20px;

margin-bottom:25px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.4s;

}

.pengumuman-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.pengumuman-card h4{

font-weight:700;

color:#198754;

margin-bottom:15px;

}

.pengumuman-card small{

display:block;

margin-bottom:20px;

color:#999;

}

.pengumuman-card p{

line-height:30px;

color:#666;

}

/*=================================
DOWNLOAD
=================================*/

.table{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.table thead{

background:#198754;

color:#fff;

}

.table th{

padding:18px;

font-weight:600;

}

.table td{

padding:16px;

vertical-align:middle;

}

.table tbody tr:hover{

background:#f8f9fa;

}

/*=================================
GOOGLE MAPS
=================================*/

.maps{

padding:0;

}

.maps iframe{

width:100%;

height:450px;

border:0;

display:block;

}

/*=================================
KONTAK
=================================*/

.contact-box{

background:#fff;

padding:35px;

border-radius:20px;

text-align:center;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.4s;

height:100%;

}

.contact-box:hover{

transform:translateY(-10px);

}

.contact-box i{

font-size:55px;

color:#198754;

margin-bottom:20px;

}

.contact-box h5{

font-weight:700;

margin-bottom:15px;

color:#198754;

}

.contact-box p{

margin:0;

color:#666;

line-height:28px;

}

/*=================================
HERO HALAMAN
=================================*/

.hero-page{

padding:140px 0 90px;

background:

linear-gradient(

rgba(25,135,84,.85),

rgba(20,108,67,.85)

),

url("../img/balai-desa.jpg");

background-size:cover;

background-position:center;

color:#fff;

text-align:center;

}

.hero-page h1{

font-size:52px;

font-weight:800;

margin-bottom:20px;

}

.hero-page p{

font-size:19px;

max-width:700px;

margin:auto;

line-height:32px;

}

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

.footer{

background:#146c43;

color:#fff;

padding:70px 0 25px;

margin-top:0;

}

.footer h4,
.footer h5{

font-weight:700;

margin-bottom:20px;

}

.footer p{

line-height:30px;

color:#eee;

}

.footer hr{

border-color:rgba(255,255,255,.2);

margin:35px 0 25px;

}

.footer-menu{

list-style:none;

padding:0;

margin:0;

}

.footer-menu li{

margin-bottom:12px;

}

.footer-menu a{

color:#fff;

transition:.3s;

}

.footer-menu a:hover{

color:#ffc107;

padding-left:8px;

}

.social{

display:flex;

gap:12px;

margin-top:20px;

}

.social a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

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

border-radius:50%;

color:#fff;

font-size:20px;

transition:.4s;

}

.social a:hover{

background:#ffc107;

color:#222;

transform:translateY(-5px);

}

/*=================================
BACK TO TOP
=================================*/

#topBtn{

position:fixed;

right:25px;

bottom:25px;

width:50px;

height:50px;

border:none;

background:#198754;

color:#fff;

font-size:22px;

border-radius:50%;

display:none;

align-items:center;

justify-content:center;

cursor:pointer;

box-shadow:0 10px 30px rgba(0,0,0,.2);

transition:.4s;

z-index:999;

}

#topBtn:hover{

background:#ffc107;

color:#222;

transform:translateY(-6px);

}

/*=================================
UTILITY
=================================*/

.shadow-soft{

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.rounded-xl{

border-radius:25px;

}

.bg-hijau{

background:#198754;

}

.text-hijau{

color:#198754;

}

.text-kuning{

color:#ffc107;

}

.border-none{

border:none;

}

.radius-20{

border-radius:20px;

}

.radius-30{

border-radius:30px;

}

/*=================================
LOADING EFFECT
=================================*/

.fade-up{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/*=================================
IMAGE HOVER
=================================*/

.zoom{

overflow:hidden;

border-radius:20px;

}

.zoom img{

transition:.5s;

}

.zoom:hover img{

transform:scale(1.1);

}

/*=================================
SCROLLBAR
=================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

background:#198754;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#146c43;

}

/*=================================
RESPONSIVE DESKTOP
=================================*/

@media(max-width:1400px){

.hero h1{

font-size:58px;

}

.section-title h2{

font-size:36px;

}

}

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

@media(max-width:992px){

.navbar{

background:#198754!important;

}

.hero{

height:auto;

padding:170px 0 120px;

background-attachment:scroll;

text-align:center;

}

.hero h1{

font-size:48px;

}

.hero p{

font-size:18px;

margin:auto;

margin-bottom:35px;

}

.hero .btn{

margin-bottom:15px;

}

.section-title h2{

font-size:34px;

}

#profil{

text-align:center;

}

#profil img{

margin-bottom:35px;

}

.stat-card{

margin-bottom:25px;

}

.menu-card{

margin-bottom:25px;

}

.potensi-card{

margin-bottom:25px;

}

.news-card{

margin-bottom:25px;

}

.gallery-card{

margin-bottom:25px;

}

.footer{

text-align:center;

}

.social{

justify-content:center;

}

.footer-menu{

margin-bottom:25px;

}

}

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

@media(max-width:768px){

section{

padding:70px 0;

}

.hero{

padding:150px 0 90px;

}

.hero h1{

font-size:38px;

line-height:52px;

}

.hero p{

font-size:17px;

line-height:30px;

}

.section-title h2{

font-size:30px;

}

.section-title p{

font-size:15px;

}

.menu-card{

padding:30px;

}

.menu-card i{

font-size:50px;

}

#profil h2{

font-size:32px;

}

#profil p{

font-size:16px;

line-height:30px;

}

.stat-card{

padding:30px;

}

.stat-card h2{

font-size:38px;

}

.news-card img{

height:220px;

}

.gallery-card img{

height:220px;

}

.potensi-card img{

height:220px;

}

.hero-page{

padding:130px 0 70px;

}

.hero-page h1{

font-size:36px;

}

.maps iframe{

height:320px;

}

.contact-box{

margin-bottom:25px;

}

}

/*=================================
RESPONSIVE EXTRA SMALL
=================================*/

@media(max-width:576px){

.logo{

width:45px;

height:45px;

}

.navbar-brand h5{

font-size:16px;

}

.navbar-brand small{

font-size:11px;

}

.hero{

padding:140px 0 80px;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:16px;

}

.hero .btn{

display:block;

width:100%;

margin-bottom:12px;

}

.section-title h2{

font-size:27px;

}

.stat-card h2{

font-size:34px;

}

.stat-card i{

font-size:48px;

}

.footer{

padding:55px 0 20px;

}

.footer h4{

font-size:24px;

}

.footer h5{

font-size:20px;

}

.footer p{

font-size:15px;

}

.social a{

width:42px;

height:42px;

}

#topBtn{

right:18px;

bottom:18px;

width:45px;

height:45px;

font-size:20px;

}

}

/*==================================
PERANGKAT DESA
==================================*/

.perangkat{
    padding:80px 0;
    background:#f8f9fa;
}

.perangkat .pengumuman-card{
    border-radius:18px;
    overflow:hidden;
    transition:.3s;
}

.perangkat .pengumuman-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 30px rgba(0,0,0,.15);
}

.perangkat img{
    border-bottom:4px solid #198754;
}

.perangkat h4{
    font-weight:700;
    margin-bottom:8px;
}

.perangkat p{
    margin-bottom:0;
    color:#198754;
}