/* =====================================
   RESET
===================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:#f5f7fb;

color:#333;

line-height:1.8;

}

a{

text-decoration:none;

color:inherit;

}

img{

display:block;

max-width:100%;

}

.container{

width:92%;

max-width:1320px;

margin:auto;

}

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

#hero{

height:130vh;

position:relative;

background-size:cover;

background-position:center 75%;
background-repeat:no-repeat;
/* background-attachment:fixed; */
background-attachment:scroll;

display:flex;

align-items:flex-end;

}

#hero::before{

content:"";

position:absolute;

left:0;
top:0;

width:100%;
height:100%;

background:

linear-gradient(

180deg,

rgba(0,0,0,.15),

rgba(0,0,0,.75)

);

}

.hero-content{

position:relative;

z-index:2;

color:#fff;

padding:70px;

max-width:950px;

}

.hero-badge{

display:inline-block;

background:#ff9800;

padding:8px 20px;

border-radius:50px;

font-size:14px;

font-weight:600;

margin-bottom:20px;

}

.hero-content h1{

font-size:52px;

font-weight:700;

line-height:1.3;

margin-bottom:20px;

}

.hero-meta{

display:flex;

gap:20px;

flex-wrap:wrap;

font-size:15px;

opacity:.9;

}

/* =====================================
   MAIN
===================================== */

.main{

display:grid;

grid-template-columns:

3fr 1fr;

gap:45px;

margin-top:50px;

align-items:start;

}

/* =====================================
   ARTICLE
===================================== */

#article{

background:#fff;

border-radius:20px;

padding:45px;

box-shadow:

0 15px 45px

rgba(0,0,0,.08);

}

#article h2{

font-size:31px;

color:#0d47a1;

margin:

35px 0

18px;

}

#article h3{

font-size:24px;

color:#1565c0;

margin:

30px 0

15px;

}

#article p{

margin-bottom:18px;

text-align:justify;

font-size:16px;

color:#555;

}

#article a{
    color:#0d6efd;
    text-decoration:underline;
    font-weight:600;
    word-break:break-all;
    transition:.3s;
}

#article a:hover{
    color:#084298;
}

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

.article-image{

margin:35px 0;

height:460px;

overflow:hidden;

border-radius:18px;

box-shadow:

0 15px 35px

rgba(0,0,0,.15);

}

.article-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.45s;

}

.article-image:hover img{

transform:scale(1.05);

}

/* =====================================
   SIDEBAR
===================================== */

#sidebar{

position:sticky;

top:20px;

}

.sidebar-card{

background:#fff;

padding:25px;

border-radius:20px;

box-shadow:

0 12px 30px

rgba(0,0,0,.08);

}

.sidebar-card h3{

color:#0d47a1;

margin-bottom:20px;

font-size:24px;

}

.news-item{

display:flex;

gap:15px;

padding-bottom:18px;

margin-bottom:18px;

border-bottom:1px solid #eee;

transition:.3s;

cursor:pointer;

}

.news-item:last-child{

margin-bottom:0;

padding-bottom:0;

border:none;

}

.news-item:hover{

transform:translateX(5px);

}

.news-item img{

width:95px;

height:75px;

object-fit:cover;

border-radius:10px;

}

.news-info h4{

font-size:15px;

line-height:1.5;

margin-bottom:5px;

}

.news-info small{

color:#888;

font-size:13px;

}

/* =====================================
   EMPTY NEWS
===================================== */

.empty-news{

text-align:center;

padding:30px 15px;

}

.empty-news .icon{

font-size:70px;

margin-bottom:15px;

}

.empty-news h4{

color:#0d47a1;

margin-bottom:10px;

}

.empty-news p{

font-size:14px;

color:#777;

line-height:1.8;

}

/* =====================================
   GALLERY
===================================== */

#gallerySection{

width:92%;

max-width:1320px;

margin:70px auto 0;

}

.gallery-title{

font-size:34px;

font-weight:700;

color:#0d47a1;

margin-bottom:25px;

}

.gallery-grid{

display:grid;

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

gap:18px;

}

.gallery-grid img{

width:100%;

height:230px;

object-fit:cover;

border-radius:18px;

cursor:pointer;

transition:.35s;

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

}

.gallery-grid img:hover{

transform:translateY(-6px) scale(1.03);

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

}

/* =====================================
   VIDEO
===================================== */

#videoSection{

width:92%;

max-width:1320px;

margin:70px auto;

}

.video-title{

font-size:34px;

font-weight:700;

color:#0d47a1;

margin-bottom:25px;

}

.video-box{

overflow:hidden;

border-radius:20px;

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

background:#000;

}

.video-box video{

width:100%;

display:block;

}

/* =====================================
   LIGHTBOX
===================================== */

.lightbox{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

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

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9999;

}

.lightbox.show{

opacity:1;

visibility:visible;

}

.lightbox img{

max-width:92%;

max-height:90%;

border-radius:15px;

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

}

#closeLightbox{

position:absolute;

right:35px;

top:20px;

font-size:45px;

font-weight:bold;

color:#fff;

cursor:pointer;

user-select:none;

}

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

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

.footer{

    background:#1b5e20;

    color:#fff;

    padding:70px 0 25px;

}

.footer-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}

.footer-logo img{

    width:90px;

    height:90px;

    background:#fff;

    border-radius:50%;

    padding:10px;

    object-fit:contain;

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

}

.footer-logo h3{

    margin:0;

    font-size:30px;

    font-weight:700;

}

.footer-logo span{

    display:block;

    margin-top:5px;

    color:#d7ffd9;

    font-size:16px;

}

.footer-desc{

    margin:25px 0;

    line-height:1.8;

    color:#eaf8ea;

    max-width:520px;

}

.footer-info{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.info-item{

    display:flex;

    align-items:flex-start;

    gap:15px;

    font-size:16px;

}

.info-item i{

    width:22px;

    font-size:18px;

    color:#FFD54F;

    margin-top:3px;

}

.footer-right h4{

    margin-bottom:20px;

    font-size:24px;

    font-weight:600;

}

.footer-right iframe{

    width:100%;

    height:320px;

    border:0;

    border-radius:18px;

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

}

.footer-bottom{

    margin-top:60px;

    padding-top:25px;

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

    text-align:center;

    color:#cfe8cf;

    font-size:15px;

}

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

@media(max-width:992px){

.footer-content{

    gap:40px;

}

.footer-logo h3{

    font-size:26px;

}

}

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

@media(max-width:768px){

.footer{

    padding:50px 0 20px;

}

.footer-content{

    grid-template-columns:1fr;

    gap:45px;

}

.footer-logo{

    flex-direction:column;

    text-align:center;

}

.footer-desc{

    text-align:center;

    max-width:100%;

}

.footer-info{

    margin:auto;

}

.footer-right h4{

    text-align:center;

}

.footer-right iframe{

    height:260px;

}

.footer-bottom{

    margin-top:40px;

}

}

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

.fade{

opacity:0;

transform:translateY(45px);

transition:1s;

}

.fade.show{

opacity:1;

transform:translateY(0);

}

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

#backTop{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#1565c0;

color:#fff;

font-size:22px;

cursor:pointer;

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

opacity:0;

pointer-events:none;

transition:.3s;

z-index:999;

}

#backTop.show{

opacity:1;

pointer-events:auto;

}

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

@media (max-width:1200px){

.hero-content h1{

font-size:44px;

}

.main{

grid-template-columns:2fr 1fr;

}

.article-image{

height:400px;

}

.gallery-grid{

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

}

}

@media (max-width:992px){

#hero{

height:500px;

}

.hero-content{

padding:50px;

}

.hero-content h1{

font-size:36px;

}

.hero-meta{

font-size:14px;

gap:12px;

}

.main{

grid-template-columns:1fr;

gap:35px;

}

#sidebar{

position:relative;

top:auto;

}

.article-image{

height:380px;

}

.gallery-grid{

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

}

.news-item img{

width:110px;

height:80px;

}

}

@media (max-width:768px){

.container{

width:95%;

}

#hero{

height:420px;

}

.hero-content{

padding:35px 25px;

}

.hero-content h1{

font-size:30px;

line-height:1.4;

}

.hero-meta{

flex-direction:column;

gap:6px;

}

#article{

padding:25px;

}

#article h2{

font-size:26px;

}

#article p{

font-size:15px;

}

.article-image{

height:300px;

margin:25px 0;

}

.gallery-title,

.video-title{

font-size:28px;

}

.gallery-grid{

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

gap:12px;

}

.gallery-grid img{

height:180px;

}

.news-item{

gap:12px;

}

.news-item img{

width:95px;

height:70px;

}

footer h2{

font-size:26px;

}

}

@media (max-width:576px){

#hero{

height:340px;

}

.hero-content{

padding:25px 18px;

}

.hero-badge{

font-size:12px;

padding:6px 14px;

}

.hero-content h1{

font-size:24px;

}

.hero-meta{

font-size:12px;

}

#article{

padding:18px;

border-radius:15px;

}

#article h2{

font-size:22px;

margin:25px 0 12px;

}

#article h3{

font-size:19px;

}

#article p{

font-size:14px;

line-height:1.9;

}

.article-image{

height:230px;

border-radius:15px;

}

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-grid img{

height:220px;

}

.video-title,

.gallery-title{

font-size:24px;

}

.sidebar-card{

padding:18px;

}

.news-item{

flex-direction:column;

}

.news-item img{

width:100%;

height:180px;

}

#backTop{

width:48px;

height:48px;

font-size:18px;

right:15px;

bottom:15px;

}

#closeLightbox{

right:20px;

top:15px;

font-size:36px;

}

footer{

padding:35px 15px;

}

footer h2{

font-size:24px;

}

footer p{

font-size:14px;

}

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}

::-webkit-scrollbar-thumb{

background:#1565c0;

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#0d47a1;

}

/* Tablet */
@media (max-width: 992px){
    #hero{
        background-position: center bottom;
    }
}

/* HP */
@media (max-width: 576px){
    #hero{
        background-position: center bottom;
    }
}