/*PUBLIKASI*/

/* =========================
   BANNER
========================= */
.inner-banner{
    position: relative;
    padding: 140px 0 90px;
    overflow: hidden;
}

.inner-banner .image-layer{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
}

.inner-banner::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,.35));
}

.inner-banner .content-box{
    position:relative;
    z-index:2;
}

.inner-banner h2{
    color:#fff;
    font-size:48px;
    font-weight:700;
    margin-bottom:15px;
}

.bread-crumb ul{
    padding:0;
    margin:0;
}

.bread-crumb li{
    position:relative;
    display:inline-block;
    color:#fff;
    font-size:15px;
    margin-right:15px;
}

.bread-crumb li a{
    color:#fff;
    transition:.3s;
}

.bread-crumb li a:hover{
    color:#00b4ff;
}

/* =========================
   SECTION
========================= */
.gallery-section{
    position:relative;
    padding:90px 0;
    background:#fff;
    overflow:hidden;
}

/* Ornamen Background */
.gallery-section::before{
    content:'';
    position:absolute;
    width:320px;
    height:320px;
    top:-140px;
    right:-120px;
    border-radius:50%;
    background:rgba(32,196,216,.08);
}

.gallery-section::after{
    content:'';
    position:absolute;
    width:260px;
    height:260px;
    bottom:-120px;
    left:-100px;
    border-radius:50%;
    background:rgba(21,150,232,.06);
}

.title-box{
    margin-bottom:55px;
}

.title-box h2{
    font-size:38px;
    font-weight:700;
    color:#111827;
}

.title-box h2 span{
    position:relative;
    display:inline-block;
    padding-bottom:14px;
}

.title-box h2 span::after{
    content:'';
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:0;
    width:70px;
    height:4px;
    border-radius:10px;
    background:linear-gradient(90deg,#20C4D8,#1596E8);
}

/* =========================
   CARD
========================= */
.publik-item{
    margin-bottom:30px;
}

.publik-box{
    position:relative;
    background:#fff;
    border-radius:24px;
    padding:35px 30px;
    height:100%;
    overflow:hidden;
    transition:.35s ease;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
    border:1px solid #eef2f7;
}

.publik-box:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.publik-box::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:linear-gradient(90deg,#20C4D8,#1596E8);
}

/* ICON */
.publik-box .icon{
    width:75px;
    height:75px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    background:linear-gradient(135deg,#ecfeff,#d8fbff);
}

.publik-box .icon i{
    font-size:34px;
    color:#20C4D8;
}

/* TITLE */
.publik-box h4{
    font-size:22px;
    line-height:1.5;
    font-weight:700;
    color:#111827;
    margin-bottom:15px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:68px;
}

/* DATE */
.publik-box .date{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:#6b7280;
    margin-bottom:25px;
}

.publik-box .date::before{
    content:'\f073';
    font-family:'FontAwesome';
    color:#2563eb;
}

/* BUTTONS */
.btn-group-custom{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.btn-modern{
    flex:1;
    border:none;
    cursor:pointer;
    text-align:center;
    padding:13px 18px;
    border-radius:14px;
    font-size:15px;
    font-weight:600;
    transition:.3s ease;
    text-decoration:none !important;
}

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

.btn-download{
    background:linear-gradient(135deg,#20C4D8 0%, #18BFD4 40%, #1596E8 100%);
    color:#fff !important;
    border:none;
    box-shadow:0 8px 20px rgba(32,196,216,.25);
}

.btn-download:hover{
    background:linear-gradient(135deg,#18BFD4 0%, #1596E8 100%);
    color:#fff !important;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(32,196,216,.35);
}

.btn-download:active{
    transform:translateY(-1px);
    box-shadow:0 6px 15px rgba(32,196,216,.25);
}

/* LOAD MORE */
.load-more{
    margin-top:30px;
}

#loadMorePublik{
    border:none;
    background:linear-gradient(135deg,#20C4D8,#1596E8);
    color:#fff;
    padding:15px 34px;
    border-radius:50px;
    font-size:16px;
    font-weight:600;
    transition:.3s ease;
    box-shadow:0 10px 25px rgba(32,196,216,.25);
}

#loadMorePublik:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(32,196,216,.35);
}

#loadMorePublik:disabled{
    opacity:.7;
    cursor:not-allowed;
}

/* EMPTY */
.empty-state{
    text-align:center;
    padding:80px 20px;
    background:#fff;
    border-radius:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.empty-state i{
    font-size:60px;
    color:#cbd5e1;
    margin-bottom:20px;
}

.empty-state h4{
    font-size:24px;
    margin-bottom:10px;
    color:#111827;
}

.empty-state p{
    color:#6b7280;
    margin:0;
}

/* RESPONSIVE */
@media (max-width:991px){

    .inner-banner{
        padding:110px 0 70px;
    }

    .inner-banner h2{
        font-size:38px;
    }

    .title-box h2{
        font-size:30px;
    }

    .publik-box{
        padding:28px 24px;
    }
}

@media (max-width:767px){

    .gallery-section{
        padding:70px 0;
    }

    .inner-banner h2{
        font-size:32px;
    }

    .btn-group-custom{
        flex-direction:column;
    }

    .btn-modern{
        width:100%;
    }

    .pdf-preview iframe{
        height:400px;
    }
}

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

.gallery-section{
    position:relative;
    padding:90px 0;
    background:#fff;
    overflow:hidden;
    z-index:1;
}

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

/* =========================
   BACKGROUND
========================= */

.gallery-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:

    radial-gradient(circle at 8% 10%,rgba(32,196,216,.08) 0,transparent 170px),

    radial-gradient(circle at 88% 12%,rgba(32,196,216,.06) 0,transparent 150px),

    radial-gradient(circle at 50% 45%,rgba(32,196,216,.04) 0,transparent 220px),

    radial-gradient(circle at 15% 85%,rgba(32,196,216,.05) 0,transparent 180px),

    radial-gradient(circle at 90% 90%,rgba(32,196,216,.05) 0,transparent 180px);
}

.gallery-section::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.18;

    background-image:
    radial-gradient(rgba(32,196,216,.45) 1px,transparent 1px);

    background-size:36px 36px;
}

/* Ring */

.gallery-section .bg-ring,
.gallery-section .bg-ring2,
.gallery-section .bg-ring3{
    position:absolute;
    border-radius:50%;
    border:2px dashed rgba(32,196,216,.25);
    z-index:1;
}

.bg-ring{
    width:160px;
    height:160px;
    top:90px;
    left:6%;
}

.bg-ring2{
    width:120px;
    height:120px;
    right:8%;
    top:42%;
}

.bg-ring3{
    width:140px;
    height:140px;
    left:22%;
    bottom:60px;
}

/* Dots */

.gallery-section .bg-dots,
.gallery-section .bg-dots2,
.gallery-section .bg-dots3,
.gallery-section .bg-dots4{
    position:absolute;
    width:90px;
    height:90px;
    background-image:
    radial-gradient(rgba(32,196,216,.55) 1.5px,transparent 1.5px);
    background-size:12px 12px;
    opacity:.45;
}

.bg-dots{
    top:80px;
    right:80px;
}

.bg-dots2{
    left:10%;
    top:55%;
}

.bg-dots3{
    right:12%;
    bottom:90px;
}

.bg-dots4{
    left:45%;
    bottom:120px;
}

/* Diamond */

.gallery-section .bg-diamond,
.gallery-section .bg-diamond2,
.gallery-section .bg-diamond3{
    position:absolute;
    transform:rotate(45deg);
    border:2px solid rgba(32,196,216,.35);
}

.bg-diamond{
    width:28px;
    height:28px;
    left:18%;
    top:260px;
}

.bg-diamond2{
    width:22px;
    height:22px;
    right:18%;
    bottom:220px;
}

.bg-diamond3{
    width:18px;
    height:18px;
    left:55%;
    bottom:70px;
}

/* Plus */

.gallery-section .bg-plus,
.gallery-section .bg-plus2{
    position:absolute;
    width:24px;
    height:24px;
}

.gallery-section .bg-plus::before,
.gallery-section .bg-plus::after,
.gallery-section .bg-plus2::before,
.gallery-section .bg-plus2::after{
    content:"";
    position:absolute;
    background:rgba(32,196,216,.35);
}

.gallery-section .bg-plus::before,
.gallery-section .bg-plus2::before{
    width:3px;
    height:24px;
    left:50%;
    transform:translateX(-50%);
}

.gallery-section .bg-plus::after,
.gallery-section .bg-plus2::after{
    width:24px;
    height:3px;
    top:50%;
    transform:translateY(-50%);
}

.bg-plus{
    top:38%;
    right:6%;
}

.bg-plus2{
    left:38%;
    bottom:50px;
}

/* Triangle */

.gallery-section .bg-triangle{
    position:absolute;
    width:55px;
    height:55px;
    border:2px solid rgba(32,196,216,.30);
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
    top:180px;
    right:28%;
}

/* Wave */

.gallery-section .bg-wave{
    position:absolute;
    left:55%;
    bottom:130px;
    width:150px;
    height:60px;
    opacity:.25;
    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(32,196,216,.45) 0,
    rgba(32,196,216,.45) 2px,
    transparent 3px,
    transparent 12px);
}







/* INSTAGRAM FEED */
    .instagram-section{
    position:relative;
    padding:110px 0;
    background:linear-gradient(180deg,#f8fbff,#ffffff);
    overflow:hidden;
}

.shape-one{
    position:absolute;
    width:300px;
    height:300px;
    background:#0d6efd15;
    border-radius:50%;
    top:-120px;
    left:-100px;
}

.shape-two{
    position:absolute;
    width:260px;
    height:260px;
    background:#ff006615;
    border-radius:50%;
    bottom:-100px;
    right:-80px;
}

.sec-title{
    margin-bottom:60px;
}

.sub-title{
    display:inline-block;
    background:#E1306C;
    color:#fff;
    padding:8px 20px;
    border-radius:30px;
    font-size:14px;
    margin-bottom:15px;
}

.sec-title h2{
    font-size:42px;
    font-weight:700;
    margin-bottom:15px;
}

.sec-title .text{
    color:#666;
    max-width:650px;
    margin:auto;
}

.instagram-card{
    background:#fff;
    border-radius:20px;
    padding:15px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
    overflow:hidden;

    height:760px;          /* semua card sama tinggi */
    display:flex;
    flex-direction:column;
}

.instagram-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.instagram-embed{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;

    scrollbar-width:thin;
}

.instagram-embed::-webkit-scrollbar{
    width:6px;
}

.instagram-embed::-webkit-scrollbar-thumb{
    background:#d7d7d7;
    border-radius:10px;
}

.instagram-media{
    width:100%!important;
    max-width:100%!important;
    min-width:100%!important;
    margin:0 auto!important;
}

.instagram-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(45deg,#833ab4,#fd1d1d,#fcb045);
    color:#fff;
    padding:15px 35px;
    border-radius:50px;
    font-size:17px;
    font-weight:600;
    transition:.3s;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(225,48,108,.35);
}

.instagram-btn:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(225,48,108,.45);
}

.empty-instagram{
    text-align:center;
    padding:60px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.empty-instagram i{
    font-size:70px;
    color:#E1306C;
    margin-bottom:20px;
}

.instagram-carousel .owl-nav{
    margin-top:30px;
}

.instagram-carousel .owl-nav button{
    width:48px;
    height:48px;
    border-radius:50%!important;
    background:#fff!important;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
    transition:.3s;
}

.instagram-carousel .owl-nav button:hover{
    background:#E1306C!important;
    color:#fff!important;
}

.instagram-carousel .owl-dots{
    margin-top:25px;
}

.instagram-carousel .owl-dot span{
    width:12px;
    height:12px;
}

.instagram-carousel .owl-dot.active span{
    background:#E1306C!important;
}

@media (max-width:1200px){
    .instagram-card{
        height:700px;
    }
}

@media (max-width:992px){
    .instagram-card{
        height:650px;
    }
}

@media (max-width:768px){
    .instagram-card{
        height:auto;
    }
    .instagram-embed{
        overflow:visible;
    }
}







/* BERITA */
/* ================================
   GEOPARK IJEN PAGINATION
================================ */

.geopark-pagination{
    display:flex;
    justify-content:center;
    margin:50px 0;
}

.geopark-pagination .pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    list-style:none;
    margin:0;
    padding:0;
}

.geopark-pagination .pagination li{
    margin:0;
    padding:0;
    list-style:none;
}

/* Hilangkan style bawaan */
.geopark-pagination .pagination li::before,
.geopark-pagination .pagination li::after{
    display:none !important;
    content:none !important;
}

/* Semua tombol */
.geopark-pagination .page-link,
.geopark-pagination .pagination li a,
.geopark-pagination .pagination li span{

    display:flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    border:2px solid #20C4D8;
    border-radius:8px;

    background:#fff;
    color:#20C4D8;

    font-size:15px;
    font-weight:600;
    text-decoration:none;

    transition:.3s ease;
    box-sizing:border-box;
}

/* Hover */
.geopark-pagination .page-link:hover{
    background:#20C4D8;
    color:#fff;
    border-color:#20C4D8;
}

/* Prev & Next sedikit lebih lebar */
.geopark-pagination .page-item:nth-child(2) .page-link,
.geopark-pagination .page-item:nth-last-child(2) .page-link{
    width:72px;
}

/* First & Last tetap kotak */
.geopark-pagination .page-item:first-child .page-link,
.geopark-pagination .page-item:last-child .page-link{
    width:46px;
}

/* Halaman aktif */
.geopark-pagination .page-item.active .page-link{
    background:#20C4D8;
    color:#fff;
    border-color:#20C4D8;
    box-shadow:0 6px 15px rgba(32,196,216,.25);
}

/* Hilangkan indikator bulat */
.geopark-pagination .page-item.active .page-link::after{
    display:none !important;
    content:none !important;
}

/*=========================================
BACKGROUND
=========================================*/

.sidebar-page-container{
    position:relative;
    padding:100px 0;
    background:#ffffff;
    overflow:hidden;
    z-index:1;
}

.sidebar-page-container>*{
    position:relative;
    z-index:2;
}

.sidebar-page-container::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:

    radial-gradient(circle at 8% 12%,
    rgba(32,196,216,.08) 0,
    transparent 180px),

    radial-gradient(circle at 92% 14%,
    rgba(13,110,253,.07) 0,
    transparent 180px),

    radial-gradient(circle at 14% 88%,
    rgba(32,196,216,.05) 0,
    transparent 180px),

    radial-gradient(circle at 88% 84%,
    rgba(13,110,253,.05) 0,
    transparent 180px),

    radial-gradient(circle at 50% 50%,
    rgba(32,196,216,.03) 0,
    transparent 260px);
}

.sidebar-page-container::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.12;

    background-image:
    radial-gradient(rgba(32,196,216,.35) 1px,transparent 1px);

    background-size:36px 36px;
}


/*=========================================
PATTERN
=========================================*/

.bg-ring{
    position:absolute;
    top:80px;
    left:6%;
    width:150px;
    height:150px;
    border:2px dashed rgba(32,196,216,.15);
    border-radius:50%;
}

.bg-ring::after{
    content:"";
    position:absolute;
    inset:18px;
    border:2px solid rgba(32,196,216,.12);
    border-radius:50%;
}

/* Ring */

.bg-ring2{
    position:absolute;
    right:8%;
    top:45%;
    width:100px;
    height:100px;
    border-radius:50%;
    border:2px solid rgba(13,110,253,.12);
}

/* Dot */

.bg-dots{
    position:absolute;
    top:130px;
    right:10%;
    width:100px;
    height:100px;

    background-image:
    radial-gradient(rgba(32,196,216,.45) 1.5px,transparent 1.5px);

    background-size:12px 12px;

    opacity:.40;
}

/* Dot */

.bg-dots2{
    position:absolute;
    left:10%;
    bottom:120px;
    width:90px;
    height:90px;

    background-image:
    radial-gradient(rgba(13,110,253,.35) 1.5px,transparent 1.5px);

    background-size:12px 12px;
}

/* Diamond */

.bg-diamond{
    position:absolute;
    left:22%;
    top:42%;
    width:22px;
    height:22px;
    border:2px solid rgba(32,196,216,.25);
    transform:rotate(45deg);
}

/* Diamond */

.bg-diamond2{
    position:absolute;
    right:18%;
    bottom:100px;
    width:18px;
    height:18px;
    border:2px solid rgba(13,110,253,.22);
    transform:rotate(45deg);
}

/* Plus */

.bg-plus{
    position:absolute;
    right:28%;
    top:30%;
    width:22px;
    height:22px;
}

.bg-plus::before,
.bg-plus::after{
    content:"";
    position:absolute;
    background:rgba(32,196,216,.28);
}

.bg-plus::before{
    width:2px;
    height:22px;
    left:10px;
}

.bg-plus::after{
    width:22px;
    height:2px;
    top:10px;
}

/* Circle */

.bg-circle{
    position:absolute;
    left:45%;
    top:90px;
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px solid rgba(13,110,253,.12);
}

.bg-circle::after{
    content:"";
    position:absolute;
    inset:14px;
    border-radius:50%;
    border:2px dashed rgba(13,110,253,.12);
}

/* Contour */

.bg-contour{
    position:absolute;
    right:26%;
    bottom:80px;
    width:180px;
    height:180px;
    opacity:.16;

    background:
    repeating-radial-gradient(circle,
    rgba(32,196,216,.18) 0,
    transparent 6px,
    transparent 14px);
}

/* Wave */

.bg-wave{
    position:absolute;
    left:40%;
    bottom:70px;
    width:180px;
    height:60px;
    opacity:.20;

    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(13,110,253,.45) 0,
    rgba(13,110,253,.45) 2px,
    transparent 3px,
    transparent 12px);
}

/* Triangle */

.bg-triangle{
    position:absolute;
    right:10%;
    bottom:220px;
    width:36px;
    height:36px;
    border:2px solid rgba(32,196,216,.20);
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
}

/* Cross */

.bg-cross{
    position:absolute;
    left:35%;
    top:25%;
    width:20px;
    height:20px;
    border:2px solid rgba(13,110,253,.18);
    transform:rotate(45deg);
}







/* BERITA DETAIL */
/* =========================
   DETAIL NEWS SECTION
========================= */

.detail-news-section{
    position:relative;
    padding:90px 0;
    background:#fff;
    overflow:hidden;
}

/* Ornamen kanan atas */
.detail-news-section::before{
    content:'';
    position:absolute;
    top:-120px;
    right:-120px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(32,196,216,.10) 0%,
        rgba(32,196,216,.05) 55%,
        transparent 75%);
    pointer-events:none;
}

/* Ornamen kiri bawah */
.detail-news-section::after{
    content:'';
    position:absolute;
    bottom:-140px;
    left:-140px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(21,150,232,.08) 0%,
        rgba(21,150,232,.04) 55%,
        transparent 75%);
    pointer-events:none;
}

/* Ornamen berada di belakang konten */
.detail-news-section > .auto-container{
    position:relative;
    z-index:2;
}

.news-detail-box{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,0.08);
}

.news-image{
    position:relative;
}

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

.news-overlay{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:35px;
    background:linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}

.news-overlay h2{
    color:#fff;
    font-size:38px;
    font-weight:700;
    line-height:1.4em;
}

.news-content{
    padding:40px;
}

.news-meta{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:30px;
    font-size:15px;
    color:#777;
}

.news-meta span{
    background:#eef4ff;
    padding:8px 16px;
    border-radius:30px;
}

.news-description{
    font-size:17px;
    line-height:2em;
    color:#444;
}

.sidebar-widget{
    background:#fff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,0.07);
    margin-bottom:30px;
}

.sidebar-title{
    margin-bottom:25px;
}

.sidebar-title h4{
    font-size:24px;
    font-weight:700;
}

.recent-post{
    display:flex;
    gap:15px;
    margin-bottom:20px;
    align-items:center;
}

.recent-post img{
    width:90px;
    height:80px;
    object-fit:cover;
    border-radius:12px;
}

.recent-post h6{
    font-size:16px;
    line-height:1.5em;
    margin-bottom:5px;
}

.recent-post a{
    color:#222;
    text-decoration:none;
    transition:0.3s;
}

.recent-post a:hover{
    color:#0d6efd;
}

.recent-post .date{
    font-size:13px;
    color:#888;
}

@media(max-width:768px){

    .news-image img{
        height:280px;
    }

    .news-overlay h2{
        font-size:26px;
    }

    .news-content{
        padding:25px;
    }
}

.news-detail-box{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    border:1px solid #eef3f7;
    box-shadow:0 12px 35px rgba(15,23,42,.06);
}

.sidebar-widget{
    background:#fff;
    border:1px solid #eef3f7;
    border-radius:20px;
    padding:30px;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
}
/*==================================================
EXTRA BACKGROUND PATTERN
==================================================*/

/* Ring Besar */
.bg-ring{
    position:absolute;
    top:90px;
    left:5%;
    width:160px;
    height:160px;
    border:2px dashed rgba(32,196,216,.15);
    border-radius:50%;
    z-index:1;
}

.bg-ring::after{
    content:"";
    position:absolute;
    inset:18px;
    border:2px solid rgba(32,196,216,.10);
    border-radius:50%;
}

/* Ring Kecil */
.bg-ring2{
    position:absolute;
    right:8%;
    top:42%;
    width:90px;
    height:90px;
    border:2px solid rgba(21,150,232,.12);
    border-radius:50%;
    z-index:1;
}

/* Ring Bawah */
.bg-ring3{
    position:absolute;
    left:28%;
    bottom:70px;
    width:60px;
    height:60px;
    border:2px dashed rgba(32,196,216,.15);
    border-radius:50%;
}

/*======================================
DOTS
======================================*/

.bg-dots{
    position:absolute;
    top:110px;
    right:10%;
    width:100px;
    height:100px;
    background-image:
        radial-gradient(rgba(32,196,216,.45) 1.5px,transparent 1.5px);
    background-size:13px 13px;
    opacity:.40;
}

.bg-dots2{
    position:absolute;
    left:9%;
    top:48%;
    width:90px;
    height:90px;
    background-image:
        radial-gradient(rgba(21,150,232,.35) 1.5px,transparent 1.5px);
    background-size:12px 12px;
    opacity:.35;
}

.bg-dots3{
    position:absolute;
    right:18%;
    bottom:100px;
    width:75px;
    height:75px;
    background-image:
        radial-gradient(rgba(32,196,216,.35) 1.5px,transparent 1.5px);
    background-size:11px 11px;
    opacity:.35;
}

/*======================================
DIAMOND
======================================*/

.bg-diamond{
    position:absolute;
    left:18%;
    top:28%;
    width:20px;
    height:20px;
    border:2px solid rgba(32,196,216,.25);
    transform:rotate(45deg);
}

.bg-diamond2{
    position:absolute;
    right:22%;
    top:22%;
    width:16px;
    height:16px;
    border:2px solid rgba(21,150,232,.22);
    transform:rotate(45deg);
}

.bg-diamond3{
    position:absolute;
    left:46%;
    bottom:100px;
    width:14px;
    height:14px;
    border:2px solid rgba(32,196,216,.22);
    transform:rotate(45deg);
}

/*======================================
PLUS
======================================*/

.bg-plus{
    position:absolute;
    right:32%;
    top:28%;
    width:20px;
    height:20px;
}

.bg-plus::before,
.bg-plus::after{
    content:"";
    position:absolute;
    background:rgba(21,150,232,.28);
}

.bg-plus::before{
    width:2px;
    height:20px;
    left:9px;
}

.bg-plus::after{
    width:20px;
    height:2px;
    top:9px;
}

.bg-plus2{
    position:absolute;
    left:36%;
    bottom:140px;
    width:18px;
    height:18px;
}

.bg-plus2::before,
.bg-plus2::after{
    content:"";
    position:absolute;
    background:rgba(32,196,216,.28);
}

.bg-plus2::before{
    width:2px;
    height:18px;
    left:8px;
}

.bg-plus2::after{
    width:18px;
    height:2px;
    top:8px;
}

/*======================================
CONTOUR
======================================*/

.bg-contour{
    position:absolute;
    right:28%;
    bottom:70px;
    width:170px;
    height:170px;
    opacity:.14;
    background:
    repeating-radial-gradient(circle,
    rgba(32,196,216,.18) 0,
    transparent 6px,
    transparent 14px);
}

/*======================================
WAVE
======================================*/

.bg-wave{
    position:absolute;
    left:42%;
    top:110px;
    width:170px;
    height:55px;
    opacity:.18;
    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(32,196,216,.45) 0,
    rgba(32,196,216,.45) 2px,
    transparent 3px,
    transparent 12px);
}

.bg-wave2{
    position:absolute;
    right:38%;
    bottom:70px;
    width:150px;
    height:45px;
    opacity:.15;
    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(21,150,232,.40) 0,
    rgba(21,150,232,.40) 2px,
    transparent 3px,
    transparent 10px);
}

/*======================================
CIRCLE
======================================*/

.bg-circle{
    position:absolute;
    left:60%;
    top:42%;
    width:55px;
    height:55px;
    border-radius:50%;
    border:2px solid rgba(32,196,216,.12);
}

.bg-circle2{
    position:absolute;
    left:14%;
    bottom:180px;
    width:45px;
    height:45px;
    border-radius:50%;
    border:2px dashed rgba(21,150,232,.12);
}

/*======================================
TRIANGLE
======================================*/

.bg-triangle{
    position:absolute;
    right:12%;
    bottom:200px;
    width:34px;
    height:34px;
    border:2px solid rgba(32,196,216,.18);
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
}

/*======================================
CROSS
======================================*/

.bg-cross{
    position:absolute;
    left:30%;
    top:18%;
    width:18px;
    height:18px;
    border:2px solid rgba(21,150,232,.18);
    transform:rotate(45deg);
}







/* BIOSITE DETAIL */
/* =========================
   SECTION
========================= */

.biosite-detail-section{
    position:relative;
    overflow:hidden;
    padding:100px 0;

    background:
        radial-gradient(circle at 15% 18%, rgba(34,197,94,.06) 0%, transparent 24%),
        radial-gradient(circle at 88% 82%, rgba(132,204,22,.05) 0%, transparent 25%),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfefc 60%,
            #ffffff 100%);
}

.biosite-detail-section::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        radial-gradient(rgba(34,197,94,.08) 1px,transparent 1px);

    background-size:32px 32px;
    opacity:.35;
}

.biosite-detail-section .bg-shape-one{
    position:absolute;
    top:-120px;
    left:-120px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(34,197,94,.05);
}

.biosite-detail-section .bg-shape-two{
    position:absolute;
    right:-180px;
    bottom:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(132,204,22,.05);
}

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

.bio-detail-card{
    position:relative;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(34,197,94,.08);
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    transition:all .4s ease;
}

.bio-detail-card:hover{
    transform:translateY(-6px);
    box-shadow:0 25px 55px rgba(22,163,74,.12);
}

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

.bio-detail-image{
    position:relative;
    height:520px;
    overflow:hidden;
}

.bio-detail-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:all .6s ease;
}

.bio-detail-card:hover .bio-detail-image img{
    transform:scale(1.05);
}

.bio-image-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.25) 45%,
        rgba(0,0,0,.05) 100%);
}
/* BADGE */

.bio-floating-badge{
    position:absolute;
    top:25px;
    left:25px;
    z-index:2;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(22,163,74,.22);
    color:#fff;
    font-size:14px;
    font-weight:600;
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(12px);
}

.bio-floating-badge i{
    margin-right:6px;
}
/* TITLE */

.bio-title-overlay{
    position:absolute;
    left:40px;
    right:40px;
    bottom:40px;
    z-index:2;
}

.bio-mini-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:13px;
    font-weight:600;
    backdrop-filter:blur(8px);
    margin-bottom:18px;
}

.bio-title-overlay h2{
    color:#fff;
    font-size:40px;
    font-weight:800;
    line-height:1.3;
    margin-bottom:18px;
}

.bio-location-text{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 20px;
    border-radius:50px;
    background:rgba(255,255,255,.15);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
}

/* =========================
   CONTENT
========================= */

.bio-detail-content{
    padding:45px;
}

.bio-section-header{
    margin-bottom:30px;
}

.bio-section-subtitle{
    display:inline-block;
    padding:8px 18px;
    margin-bottom:15px;
    border-radius:50px;
    color:#fff;
    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;
    background:linear-gradient(135deg,#16a34a,#84cc16);
}

.bio-section-header h3{
    font-size:32px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:15px;
}

.bio-title-line{
    width:80px;
    height:4px;
    border-radius:20px;
    background:linear-gradient(90deg,#16a34a,#84cc16);
}

.bio-description{
    color:#4b5563;
    font-size:16px;
    line-height:2em;
}

.bio-description p{
    margin-bottom:20px;
}

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

.bio-sidebar-widget{
    position:relative;
    padding:35px;
    border-radius:24px;
    background:linear-gradient(180deg,#fff 0%,#fbfffb 100%);
    border:1px solid rgba(34,197,94,.08);
    box-shadow:0 12px 35px rgba(15,23,42,.07);
}

/* INFO */

.bio-widget-title{
    margin-bottom:25px;
}

.bio-widget-title h4{
    position:relative;
    font-size:24px;
    font-weight:800;
    color:#111827;
    padding-bottom:15px;
}

.bio-widget-title h4::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:70px;
    height:4px;
    border-radius:10px;
    background:linear-gradient(90deg,#16a34a,#84cc16);
}

.bio-info-item{
    display:flex;
    gap:18px;
    align-items:flex-start;
    padding:22px;
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:20px;
    margin-bottom:18px;
    transition:.35s;
}

.bio-info-item:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(22,163,74,.12);
}

.bio-icon-box{
    width:58px;
    height:58px;
    min-width:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    color:#fff;
    font-size:22px;
    background:linear-gradient(135deg,#16a34a,#84cc16);
    box-shadow:0 10px 25px rgba(22,163,74,.18);
}

.bio-info-content span{
    display:block;
    color:#6b7280;
    font-size:13px;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.bio-info-content h6{
    margin:0;
    font-size:17px;
    font-weight:700;
    color:#111827;
    line-height:1.7;
}

/* =========================
   EXPLORE WIDGET
========================= */

.bio-explore-widget{
    position:relative;
    overflow:hidden;
    text-align:center;
    color:#fff;
    padding:40px 35px;
    border-radius:24px;
    background:linear-gradient(135deg,#16a34a,#65a30d);
    box-shadow:0 18px 45px rgba(22,163,74,.22);
    transition:.4s;
}

.bio-explore-widget:hover{
    transform:translateY(-6px);
    box-shadow:0 25px 55px rgba(22,163,74,.30);
}

.bio-explore-widget::before{
    content:'';
    position:absolute;
    top:-60px;
    right:-60px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.10);
}

.bio-explore-widget::after{
    content:'';
    position:absolute;
    left:-40px;
    bottom:-40px;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
}

.bio-explore-icon{
    width:90px;
    height:90px;
    margin:0 auto 28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:38px;
    transition:.35s;
}

.bio-explore-widget:hover .bio-explore-icon{
    transform:rotate(-8deg) scale(1.08);
}

.bio-explore-widget h4{
    font-size:30px;
    font-weight:800;
    margin-bottom:18px;
}

.bio-explore-widget p{
    color:rgba(255,255,255,.92);
    line-height:1.9;
    margin:0;
}

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

@media only screen and (max-width:991px){

    .sidebar{
        margin-top:40px;
    }

    .detail-image{
        height:420px;
    }

    .title-overlay h2{
        font-size:32px;
    }

}

@media only screen and (max-width:767px){

    .biosite-detail-section{
        padding:70px 0;
    }

    .detail-image{
        height:320px;
    }

    .title-overlay{
        left:25px;
        right:25px;
        bottom:25px;
    }

    .title-overlay h2{
        font-size:24px;
    }

    .location-text{
        font-size:13px;
        padding:10px 16px;
    }

    .detail-content{
        padding:30px 25px;
    }

    .sidebar-widget{
        padding:25px;
    }

}

/*=========================
RING
=========================*/

.bg-ring{
    position:absolute;
    top:80px;
    left:6%;
    width:160px;
    height:160px;
    border:2px dashed rgba(34,197,94,.30);
    border-radius:50%;
}

.bg-ring::after{
    content:'';
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:2px solid rgba(34,197,94,.18);
}

.bg-ring2{
    position:absolute;
    right:8%;
    top:42%;
    width:90px;
    height:90px;
    border:2px solid rgba(16,185,129,.28);
    border-radius:50%;
}

/*=========================
DOTS
=========================*/

.bg-dots{
    position:absolute;
    top:110px;
    right:8%;
    width:95px;
    height:95px;
    background-image:
    radial-gradient(rgba(34,197,94,.75) 1.7px,transparent 1.7px);
    background-size:12px 12px;
    opacity:.55;
}

.bg-dots2{
    position:absolute;
    left:7%;
    bottom:120px;
    width:80px;
    height:80px;
    background-image:
    radial-gradient(rgba(16,185,129,.65) 1.5px,transparent 1.5px);
    background-size:11px 11px;
}

/*=========================
DIAMOND
=========================*/

.bg-diamond{
    position:absolute;
    top:28%;
    left:18%;
    width:20px;
    height:20px;
    transform:rotate(45deg);
    border:2px solid rgba(34,197,94,.40);
}

.bg-diamond2{
    position:absolute;
    right:20%;
    bottom:100px;
    width:16px;
    height:16px;
    transform:rotate(45deg);
    border:2px solid rgba(16,185,129,.40);
}

/*=========================
PLUS
=========================*/

.bg-plus{
    position:absolute;
    right:30%;
    top:25%;
    width:20px;
    height:20px;
}

.bg-plus::before,
.bg-plus::after{
    content:'';
    position:absolute;
    background:#22c55e;
}

.bg-plus::before{
    width:2px;
    height:20px;
    left:9px;
}

.bg-plus::after{
    width:20px;
    height:2px;
    top:9px;
}

/*=========================
CONTOUR
=========================*/

.bg-contour{
    position:absolute;
    right:28%;
    bottom:80px;
    width:180px;
    height:180px;
    opacity:.22;

    background:
    repeating-radial-gradient(circle,
    rgba(34,197,94,.35) 0,
    transparent 6px,
    transparent 14px);
}

/*=========================
WAVE
=========================*/

.bg-wave{
    position:absolute;
    left:42%;
    top:120px;
    width:180px;
    height:60px;
    opacity:.35;

    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(34,197,94,.55) 0,
    rgba(34,197,94,.55) 2px,
    transparent 3px,
    transparent 11px);
}










/* CULTURESITE DETAIL */
/* =========================
   SECTION
========================= */

.culturesite-detail-section{
    position:relative;
    padding:100px 0;
    background:#ffffff;
    overflow:hidden;
    z-index:1;
}

/* Ornamen Background */

/* Blur Circle Kiri Atas */
.culturesite-detail-section::before{
    content:'';
    position:absolute;
    top:-180px;
    left:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(249,115,22,.08) 0%,
        rgba(249,115,22,.03) 45%,
        transparent 75%);
    z-index:0;
}

/* Blur Circle Kanan Bawah */
.culturesite-detail-section::after{
    content:'';
    position:absolute;
    right:-180px;
    bottom:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(234,88,12,.08) 0%,
        rgba(234,88,12,.03) 45%,
        transparent 75%);
    z-index:0;
}

/* Dot Pattern */
.bg-pattern{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.35;
    z-index:0;
    background-image:
        radial-gradient(rgba(249,115,22,.08) 1.2px, transparent 1.2px);
    background-size:32px 32px;
    mask-image:linear-gradient(to bottom,
        rgba(0,0,0,.85),
        rgba(0,0,0,.25));
}

/* Shape Blur */

.bg-shape-one{
    position:absolute;
    top:15%;
    left:6%;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(249,115,22,.05);
    filter:blur(40px);
    z-index:0;
}

.bg-shape-two{
    position:absolute;
    bottom:10%;
    right:5%;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(234,88,12,.05);
    filter:blur(55px);
    z-index:0;
}

/* Semua isi berada di atas ornamen */

.culturesite-detail-section .auto-container{
    position:relative;
    z-index:2;
}

/* SHAPES */

.bg-shape-one{
    position:absolute;
    top:-120px;
    left:-120px;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(249,115,22,0.08);
}

.bg-shape-two{
    position:absolute;
    right:-120px;
    bottom:-120px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(234,88,12,0.08);
}

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

.culture-detail-card{
    position:relative;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(249,115,22,.08);
    box-shadow:0 18px 50px rgba(0,0,0,.08);
    transition:.4s;
}

.culture-detail-card:hover{
    transform:translateY(-5px);
    box-shadow:0 25px 60px rgba(249,115,22,.15);
}

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

.culture-detail-image{
    position:relative;
    height:520px;
    overflow:hidden;
}

.culture-detail-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.culture-detail-card:hover .culture-detail-image img{
    transform:scale(1.05);
}

.culture-image-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.78),
        rgba(0,0,0,.25) 45%,
        rgba(0,0,0,.05));
}

/* BADGE */

.culture-floating-badge{
    position:absolute;
    top:25px;
    left:25px;
    z-index:2;
    padding:10px 18px;
    border-radius:50px;
    color:#fff;
    font-size:14px;
    font-weight:600;
    background:rgba(249,115,22,.25);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.25);
}

/* TITLE */

.culture-title-overlay{
    position:absolute;
    left:40px;
    right:40px;
    bottom:40px;
    z-index:2;
}

.culture-mini-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:13px;
    font-weight:600;
    margin-bottom:18px;
}

.culture-location-text{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 20px;
    border-radius:50px;
    color:#fff;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.15);
}

/* =========================
   CONTENT
========================= */

.culture-detail-content{
    padding:45px;
}

.culture-section-header{
    margin-bottom:30px;
}

.culture-section-subtitle{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    color:#fff;
    background:linear-gradient(135deg,#f97316,#ea580c);
}

.culture-title-line{
    width:80px;
    height:4px;
    border-radius:20px;
    background:linear-gradient(90deg,#f97316,#ea580c);
}

.culture-description{
    color:#4b5563;
    line-height:2em;
}

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

.culture-sidebar-widget{
    position:relative;
    padding:35px;
    border-radius:24px;
    background:#fff;
    border:1px solid rgba(249,115,22,.08);
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

/* INFO */

.culture-widget-title h4::after{
    background:linear-gradient(90deg,#f97316,#ea580c);
}

.culture-info-item{
    display:flex;
    gap:18px;
    padding:22px;
    border-radius:20px;
    border:1px solid #eef2f7;
    transition:.35s;
}

.culture-info-item:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(249,115,22,.15);
}

.culture-icon-box{
    width:58px;
    height:58px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:18px;
    color:#fff;
    background:linear-gradient(135deg,#f97316,#ea580c);
}


/* =========================
   EXPLORE CARD
========================= */

.culture-explore-widget{
    position:relative;
    overflow:hidden;
    padding:40px;
    border-radius:24px;
    text-align:center;
    color:#fff;
    background:linear-gradient(135deg,#f97316,#ea580c);
    box-shadow:0 18px 45px rgba(249,115,22,.22);
    transition:.4s;
}

.culture-explore-widget:hover{
    transform:translateY(-6px);
    box-shadow:0 25px 55px rgba(249,115,22,.30);
}

.culture-explore-icon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:38px;
    color:#fff;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.25);
}

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

@media only screen and (max-width:991px){

    .sidebar{
        margin-top:40px;
    }

    .detail-image{
        height:420px;
    }

    .title-overlay h2{
        font-size:32px;
    }

}

@media only screen and (max-width:767px){

    .culturesite-detail-section{
        padding:70px 0;
    }

    .detail-image{
        height:320px;
    }

    .title-overlay{
        left:25px;
        right:25px;
        bottom:25px;
    }

    .title-overlay h2{
        font-size:24px;
    }

    .location-text{
        font-size:13px;
        padding:10px 16px;
    }

    .detail-content{
        padding:30px 25px;
    }

    .sidebar-widget{
        padding:25px;
    }

}
/*==========================================
EXTRA PATTERN
==========================================*/

/* Ring */

.bg-ring{
    position:absolute;
    top:90px;
    left:5%;
    width:150px;
    height:150px;
    border:2px dashed rgba(244,114,22,.35);
    border-radius:50%;
    z-index:0;
}

.bg-ring::after{
    content:'';
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:2px solid rgba(244,114,22,.25);
}

.bg-ring2{
    position:absolute;
    right:7%;
    top:42%;
    width:95px;
    height:95px;
    border-radius:50%;
    border:2px solid rgba(20,184,166,.28);
}

.bg-ring3{
    position:absolute;
    left:22%;
    bottom:80px;
    width:65px;
    height:65px;
    border-radius:50%;
    border:2px dashed rgba(234,179,8,.35);
}

/* Dots */

.bg-dots,
.bg-dots2,
.bg-dots3{
    position:absolute;
    opacity:.65;
}

.bg-dots{
    right:10%;
    top:120px;
    width:100px;
    height:100px;
    background-image:
        radial-gradient(rgba(244,114,22,.8) 1.8px,transparent 1.8px);
    background-size:13px 13px;
}

.bg-dots2{
    left:8%;
    top:52%;
    width:90px;
    height:90px;
    background-image:
        radial-gradient(rgba(20,184,166,.75) 1.7px,transparent 1.7px);
    background-size:12px 12px;
}

.bg-dots3{
    right:18%;
    bottom:90px;
    width:75px;
    height:75px;
    background-image:
        radial-gradient(rgba(234,179,8,.75) 1.7px,transparent 1.7px);
    background-size:11px 11px;
}

/* Diamond */

.bg-diamond,
.bg-diamond2,
.bg-diamond3{
    position:absolute;
    transform:rotate(45deg);
}

.bg-diamond{
    left:18%;
    top:28%;
    width:22px;
    height:22px;
    border:2px solid rgba(244,114,22,.55);
}

.bg-diamond2{
    right:22%;
    top:24%;
    width:18px;
    height:18px;
    border:2px solid rgba(20,184,166,.45);
}

.bg-diamond3{
    left:45%;
    bottom:110px;
    width:15px;
    height:15px;
    border:2px solid rgba(234,179,8,.45);
}

/* Plus */

.bg-plus,
.bg-plus2{
    position:absolute;
    width:20px;
    height:20px;
}

.bg-plus{
    right:30%;
    top:28%;
}

.bg-plus2{
    left:35%;
    bottom:140px;
}

.bg-plus::before,
.bg-plus::after,
.bg-plus2::before,
.bg-plus2::after{
    content:'';
    position:absolute;
    background:#14b8a6;
}

.bg-plus::before,
.bg-plus2::before{
    width:2px;
    height:20px;
    left:9px;
}

.bg-plus::after,
.bg-plus2::after{
    width:20px;
    height:2px;
    top:9px;
}

/* Circle */

.bg-circle{
    position:absolute;
    left:58%;
    top:90px;
    width:60px;
    height:60px;
    border-radius:50%;
    border:2px solid rgba(244,114,22,.30);
}

.bg-circle2{
    position:absolute;
    left:12%;
    bottom:180px;
    width:45px;
    height:45px;
    border-radius:50%;
    border:2px dashed rgba(20,184,166,.30);
}

/* Wave */

.bg-wave{
    position:absolute;
    left:42%;
    top:110px;
    width:180px;
    height:60px;
    opacity:.35;
    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(244,114,22,.6) 0,
    rgba(244,114,22,.6) 2px,
    transparent 3px,
    transparent 12px);
}

.bg-wave2{
    position:absolute;
    right:34%;
    bottom:70px;
    width:150px;
    height:45px;
    opacity:.35;
    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(20,184,166,.6) 0,
    rgba(20,184,166,.6) 2px,
    transparent 3px,
    transparent 10px);
}

/* Contour */

.bg-contour{
    position:absolute;
    right:26%;
    bottom:90px;
    width:170px;
    height:170px;
    opacity:.28;
    background:
    repeating-radial-gradient(circle,
    rgba(244,114,22,.35) 0,
    transparent 6px,
    transparent 14px);
}

/* Triangle */

.bg-triangle{
    position:absolute;
    right:10%;
    bottom:220px;
    width:34px;
    height:34px;
    border:2px solid rgba(244,114,22,.45);
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
}

/* Cross */

.bg-cross{
    position:absolute;
    left:28%;
    top:18%;
    width:18px;
    height:18px;
    border:2px solid rgba(20,184,166,.45);
    transform:rotate(45deg);
}







/*=================================================================== GALERI ==============================================================================*/
/* ===============================
   GALERI PREMIUM STYLE
================================ */

/* GALERI */
/* ===============================
   GALERI PREMIUM STYLE
================================ */

/* ===============================
   GALERI PREMIUM STYLE
================================ */

.gallery-section{
    position:relative;
    background:#ffffff;
    padding-bottom:60px;
    overflow:hidden;
}

/* Ornamen kanan atas */
.gallery-section::before{
    content:'';
    position:absolute;
    top:-120px;
    right:-120px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(32,196,216,.08) 0%,
        rgba(32,196,216,.03) 60%,
        transparent 75%);
    pointer-events:none;
}

/* Ornamen kiri bawah */
.gallery-section::after{
    content:'';
    position:absolute;
    bottom:-140px;
    left:-140px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(21,150,232,.06) 0%,
        rgba(21,150,232,.025) 60%,
        transparent 75%);
    pointer-events:none;
}

/* Konten tetap di atas ornamen */
.gallery-section .auto-container{
    position:relative;
    z-index:2;
}

/* FILTER BUTTON */
.gallery-filters .filter-tabs li {
    background: #fff;
    padding: 10px 22px;
    border-radius: 30px;
    margin: 0 6px 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #e1eaea;
    transition: all .35s ease;
}
.gallery-filters .filter-tabs li.active,
.gallery-filters .filter-tabs li:hover {
    background: linear-gradient(120deg,#1aa6a6,#0d5c5c);
    color: #fff;
    box-shadow: 0 10px 25px rgba(0,90,90,.25);
}

/* CARD */
.gallery-block {
    margin-bottom: 30px;
}
.gallery-block .inner-box {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,.08);
    transition: all .4s ease;
}
.gallery-block:hover .inner-box {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(0,0,0,.15);
}

/* IMAGE BOX */
.gallery-block .image-box {
    position: relative;
    height: 330px;
    overflow: hidden;
}
.gallery-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.gallery-block:hover img {
    transform: scale(1.12);
}

/* OVERLAY */
.gallery-block .image-box::before {
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.2),
        transparent
    );
    opacity: .9;
    z-index:1;
}

/* TITLE */
.gallery-title {
    position:absolute;
    left: 20px;
    bottom: 22px;
    right: 20px;
    z-index:2;
    color:#fff;
    font-size:18px;
    font-weight:700;
    line-height:1.3;
    text-shadow: 0 3px 8px rgba(0,0,0,.5);
}

/* CATEGORY BADGE */
.gallery-badge {
    position:absolute;
    top:18px;
    left:18px;
    z-index:2;
    padding:6px 14px;
    font-size:12px;
    font-weight:600;
    border-radius:20px;
    background: rgba(255,255,255,.9);
    color:#006b6b;
}

/*=========================================
ZOOM BUTTON TOSCA
=========================================*/

.zoom-btn{
    background:linear-gradient(135deg,#24c7b7,#0f9d94) !important;
    color:#fff !important;
}

.zoom-btn:hover{
    background:linear-gradient(135deg,#33d6c6,#0c7f79) !important;
}

/* Font Awesome */
.zoom-btn i,
.zoom-btn::before{
    color:#fff !important;
    font-size:20px;
}









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

.actvity-section{
    position:relative;
    padding:90px 0;
    background:#fff;
    overflow:hidden;
    z-index:1;
}

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

/*====================================
BACKGROUND
====================================*/

.actvity-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:

    radial-gradient(circle at 10% 15%,
    rgba(62,184,120,.08) 0,
    transparent 180px),

    radial-gradient(circle at 88% 18%,
    rgba(62,184,120,.06) 0,
    transparent 160px),

    radial-gradient(circle at 18% 82%,
    rgba(62,184,120,.05) 0,
    transparent 180px),

    radial-gradient(circle at 82% 85%,
    rgba(62,184,120,.05) 0,
    transparent 180px),

    radial-gradient(circle at 50% 50%,
    rgba(62,184,120,.03) 0,
    transparent 260px);
}

.actvity-section::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.08;
    pointer-events:none;

    background-image:

    radial-gradient(circle,
    rgba(62,184,120,.35) 1px,
    transparent 1px);

    background-size:34px 34px;
}

/*====================================
LEAF
====================================*/

.bg-leaf{
    position:absolute;
    left:5%;
    top:120px;
    width:90px;
    height:140px;
    border:2px solid rgba(62,184,120,.30);
    border-radius:100% 0;
    transform:rotate(-35deg);
}

.bg-leaf:before{
    content:"";
    position:absolute;
    left:50%;
    top:8px;
    width:2px;
    height:120px;
    background:rgba(62,184,120,.30);
}

.bg-leaf2{
    position:absolute;
    right:6%;
    bottom:120px;
    width:70px;
    height:110px;
    border:2px solid rgba(62,184,120,.25);
    border-radius:100% 0;
    transform:rotate(25deg);
}

.bg-organic{
    position:absolute;
    right:-70px;
    top:80px;
    width:260px;
    height:260px;
    border-radius:48% 52% 60% 40%;
    background:
    rgba(62,184,120,.05);
}

.bg-organic2{
    position:absolute;
    left:-60px;
    bottom:40px;
    width:220px;
    height:220px;
    border-radius:60% 40% 45% 55%;
    background:
    rgba(62,184,120,.04);
}

.bg-flower{
    position:absolute;
    left:42%;
    top:140px;
    width:70px;
    height:70px;
}

.bg-flower span{
    position:absolute;
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(62,184,120,.15);
}

.bg-flower span:nth-child(1){
    top:0;
    left:23px;
}

.bg-flower span:nth-child(2){
    left:0;
    top:23px;
}

.bg-flower span:nth-child(3){
    right:0;
    top:23px;
}

.bg-flower span:nth-child(4){
    bottom:0;
    left:23px;
}

.bg-flower:after{
    content:"";
    position:absolute;
    left:28px;
    top:28px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#3eb878;
}

.bg-wave{
    position:absolute;
    right:24%;
    top:52%;
    width:180px;
    height:70px;
    opacity:.22;

    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(62,184,120,.45) 0,
    rgba(62,184,120,.45) 2px,
    transparent 3px,
    transparent 12px);
}

.bg-bubble{
    position:absolute;
    left:18%;
    bottom:140px;
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px dashed rgba(62,184,120,.25);
}

.bg-bubble2{
    position:absolute;
    right:18%;
    top:38%;
    width:55px;
    height:55px;
    border-radius:50%;
    border:2px dashed rgba(62,184,120,.25);
}



/*=================================== PROFIL ===================================== */
/*==================================
PROFILE SECTION
==================================*/

.team-single{
    position:relative;
    padding:100px 0;
    background:#ffffff;
    overflow:hidden;
    z-index:1;
}

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

/*==================================
BACKGROUND
==================================*/

.team-single::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:

    radial-gradient(circle at 12% 18%,
    rgba(32,196,216,.08) 0,
    transparent 170px),

    radial-gradient(circle at 88% 16%,
    rgba(32,196,216,.06) 0,
    transparent 180px),

    radial-gradient(circle at 14% 88%,
    rgba(32,196,216,.05) 0,
    transparent 170px),

    radial-gradient(circle at 86% 86%,
    rgba(32,196,216,.05) 0,
    transparent 180px),

    linear-gradient(
    180deg,
    rgba(32,196,216,.02),
    transparent 40%);
}

/*==================================
TOPOGRAPHIC LINE
==================================*/

.team-single::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.10;

    background-image:

    repeating-radial-gradient(circle at 18% 20%,
    rgba(32,196,216,.5) 0,
    rgba(32,196,216,.5) 1px,
    transparent 2px,
    transparent 18px),

    repeating-radial-gradient(circle at 82% 78%,
    rgba(32,196,216,.4) 0,
    rgba(32,196,216,.4) 1px,
    transparent 2px,
    transparent 18px);

    background-size:
    300px 300px,
    260px 260px;

    background-repeat:no-repeat;
}

/*==================================
ORBIT
==================================*/

.bg-orbit{
    position:absolute;
    top:60px;
    left:-80px;
    width:260px;
    height:260px;
    border:2px dashed rgba(32,196,216,.18);
    border-radius:50%;
}

.bg-orbit:before{
    content:"";
    position:absolute;
    inset:28px;
    border:2px dashed rgba(32,196,216,.15);
    border-radius:50%;
}

.bg-orbit:after{
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    background:#20c4d8;
    border-radius:50%;
    right:40px;
    top:25px;
}

/*==================================
COMPASS
==================================*/

.bg-compass{
    position:absolute;
    right:5%;
    top:120px;
    width:120px;
    height:120px;
    border:2px solid rgba(32,196,216,.22);
    border-radius:50%;
}

.bg-compass:before,
.bg-compass:after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    background:rgba(32,196,216,.25);
}

.bg-compass:before{
    width:2px;
    height:100%;
    transform:translate(-50%,-50%);
}

.bg-compass:after{
    width:100%;
    height:2px;
    transform:translate(-50%,-50%);
}

/*==================================
DOT GRID
==================================*/

.bg-dotgrid{
    position:absolute;
    right:10%;
    bottom:80px;
    width:110px;
    height:110px;

    background-image:
    radial-gradient(rgba(32,196,216,.55) 1.5px,transparent 1.5px);

    background-size:12px 12px;

    opacity:.40;
}

/*==================================
DIAMOND
==================================*/

.bg-diamond{
    position:absolute;
    left:18%;
    bottom:120px;
    width:28px;
    height:28px;
    border:2px solid rgba(32,196,216,.35);
    transform:rotate(45deg);
}

/*==================================
DIAGONAL LINE
==================================*/

.bg-lines{
    position:absolute;
    left:45%;
    bottom:70px;
    width:220px;
    height:120px;
    opacity:.15;

    background:
    repeating-linear-gradient(
        -45deg,
        rgba(32,196,216,.5) 0,
        rgba(32,196,216,.5) 2px,
        transparent 2px,
        transparent 12px
    );
}







/* ========================================== KARAKTERISTIK ========================================= */
    /*==============================================
BACKGROUND MODERN
==============================================*/

.bg-geopark{
    position:relative;
    overflow:hidden;
    background:#fff;
}

/* Layer 1 */
.bg-geopark::before{
    content:"";
    position:absolute;
    inset:0;
    background:

    radial-gradient(circle at 8% 12%,
    rgba(0,154,255,.08) 0,
    rgba(0,154,255,.03) 140px,
    transparent 260px),

    radial-gradient(circle at 90% 18%,
    rgba(40,167,69,.05) 0,
    transparent 230px),

    radial-gradient(circle at 80% 85%,
    rgba(0,123,255,.06) 0,
    transparent 250px),

    linear-gradient(180deg,
    #ffffff 0%,
    #fbfdff 55%,
    #ffffff 100%);
    z-index:0;
}

/* Layer 2 Dot Pattern */
.bg-geopark::after{
    content:"";
    position:absolute;
    inset:0;

    background-image:

    radial-gradient(rgba(0,80,160,.08) 1px, transparent 1px),
    radial-gradient(rgba(0,80,160,.05) 1px, transparent 1px);

    background-size:40px 40px;
    background-position:0 0,20px 20px;

    opacity:.45;
    z-index:0;
}

/* Semua isi berada di atas background */
.bg-geopark>.auto-container{
    position:relative;
    z-index:2;
}

/*==============================================
ORNAMENT
==============================================*/

.bg-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    z-index:1;
    opacity:.45;
}

.shape1{
    width:300px;
    height:300px;
    background:#4dc9ff;
    top:-120px;
    left:-120px;
}

.shape2{
    width:250px;
    height:250px;
    background:#00c3ff;
    bottom:10%;
    right:-100px;
}

.shape3{
    width:180px;
    height:180px;
    background:#8ed6ff;
    top:45%;
    left:55%;
}

.bg-line{
    position:absolute;
    inset:0;
    opacity:.08;
    z-index:1;

    background-image:
        linear-gradient(90deg,#0d6efd 1px,transparent 1px),
        linear-gradient(#0d6efd 1px,transparent 1px);

    background-size:70px 70px;
}

.bg-geopark .topography{
    position:absolute;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cg fill='none' stroke='%230099cc' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M0 200 C100 150 200 250 300 180 S500 220 600 170'/%3E%3Cpath d='M0 260 C120 220 220 310 340 250 S500 290 620 240'/%3E%3Cpath d='M0 320 C100 280 220 360 330 310 S500 340 620 300'/%3E%3C/g%3E%3C/svg%3E");
    background-size:700px;
    pointer-events:none;
    z-index:1;
}

.content-column{

    background:#fff;

    border-radius:25px;

    padding:45px;

    box-shadow:
        0 10px 45px rgba(20,40,80,.05);

    border:1px solid rgba(0,0,0,.05);
}

.sidebar-widget{

    border-radius:25px;

    overflow:hidden;

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

/*==============================================
MOUNTAIN SILHOUETTE
==============================================*/

.bg-mountain{
    position:absolute;
    left:-120px;
    bottom:-30px;
    width:520px;
    height:220px;
    opacity:.06;
    z-index:1;

    background:
    linear-gradient(135deg,
    transparent 48%,
    #0aa7d8 49%,
    #0aa7d8 51%,
    transparent 52%),

    linear-gradient(45deg,
    transparent 48%,
    #0aa7d8 49%,
    #0aa7d8 51%,
    transparent 52%);

    background-size:260px 220px;
}

/*==============================================
ARC
==============================================*/

.bg-arc{
    position:absolute;
    right:-80px;
    top:60px;
    width:260px;
    height:260px;
    border:2px solid rgba(32,196,216,.12);
    border-bottom:none;
    border-left:none;
    border-radius:50%;
    z-index:1;
}

.bg-arc::before{
    content:"";
    position:absolute;
    inset:28px;
    border:2px solid rgba(32,196,216,.10);
    border-bottom:none;
    border-left:none;
    border-radius:50%;
}

/*==============================================
CONTOUR LINE
==============================================*/

.bg-contour{
    position:absolute;
    left:48%;
    top:120px;
    width:220px;
    height:180px;
    opacity:.18;

    background:
    repeating-radial-gradient(circle,
    transparent 0,
    transparent 10px,
    rgba(32,196,216,.18) 11px,
    transparent 12px);
}

/*==============================================
SPARK
==============================================*/

.bg-spark{
    position:absolute;
    left:18%;
    top:100px;
    width:18px;
    height:18px;
    transform:rotate(45deg);
}

.bg-spark::before,
.bg-spark::after{
    content:"";
    position:absolute;
    background:#20c4d8;
}

.bg-spark::before{
    width:2px;
    height:18px;
    left:8px;
}

.bg-spark::after{
    width:18px;
    height:2px;
    top:8px;
}

/*==============================================
SMALL CIRCLE
==============================================*/

.bg-circle{
    position:absolute;
    right:12%;
    bottom:120px;
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px solid rgba(32,196,216,.14);
}

.bg-circle::after{
    content:"";
    position:absolute;
    inset:14px;
    border-radius:50%;
    border:2px dashed rgba(32,196,216,.12);
}

/*==============================================
OUTLINE BOX
==============================================*/

.bg-box{
    position:absolute;
    left:12%;
    bottom:120px;
    width:34px;
    height:34px;
    border:2px solid rgba(32,196,216,.22);
}

.bg-box::after{
    content:"";
    position:absolute;
    inset:6px;
    border:2px solid rgba(32,196,216,.18);
}

/*==============================================
FLOATING STARS
==============================================*/

.bg-stars{
    position:absolute;
    right:18%;
    top:45%;
    width:180px;
    height:120px;
}

.bg-stars span{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#20c4d8;
    opacity:.45;
}

.bg-stars span:nth-child(1){top:0;left:0;}
.bg-stars span:nth-child(2){top:25px;left:55px;}
.bg-stars span:nth-child(3){top:60px;left:20px;}
.bg-stars span:nth-child(4){top:80px;left:110px;}
.bg-stars span:nth-child(5){top:40px;left:150px;}










/* ===================================================== LOGO =================================================*/
    /*==================================================
    LOGO STORY
==================================================*/

.logo-story{
    position: relative;
    padding:90px 0;
    background:#fff;
    overflow:hidden;
}

/* Background Ornament */
.logo-story::before{
    content:"";
    position:absolute;
    top:-120px;
    left:-120px;
    width:420px;
    height:420px;
    background:radial-gradient(circle,
        rgba(16,120,194,.08) 0%,
        rgba(16,120,194,0) 70%);
    border-radius:50%;
}

.logo-story::after{
    content:"";
    position:absolute;
    right:-160px;
    bottom:-180px;
    width:500px;
    height:500px;
    background:radial-gradient(circle,
        rgba(42,162,111,.08) 0%,
        rgba(42,162,111,0) 70%);
    border-radius:50%;
}

/*==================================================
LOGO PATTERN
==================================================*/

/* Concentric Circle */
.bg-circle-pattern{
    position:absolute;
    top:90px;
    left:6%;
    width:180px;
    height:180px;
    border-radius:50%;
    border:2px solid rgba(15,127,193,.10);
    z-index:1;
}

.bg-circle-pattern::before{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:2px solid rgba(15,127,193,.08);
}

.bg-circle-pattern::after{
    content:"";
    position:absolute;
    inset:36px;
    border-radius:50%;
    border:2px dashed rgba(15,127,193,.12);
}

/* Sun Rays */
.bg-rays{
    position:absolute;
    right:-40px;
    top:60px;
    width:260px;
    height:260px;
    opacity:.12;
    z-index:1;
    background:
    repeating-conic-gradient(
        from 0deg,
        rgba(39,174,96,.35) 0deg,
        rgba(39,174,96,.35) 2deg,
        transparent 2deg,
        transparent 18deg
    );
    border-radius:50%;
}

/* Dot Cluster */
.bg-dot-cluster{
    position:absolute;
    left:12%;
    bottom:100px;
    width:120px;
    height:120px;
    background-image:
        radial-gradient(rgba(15,127,193,.45) 1.5px,transparent 1.5px);
    background-size:14px 14px;
    opacity:.35;
    z-index:1;
}

/* Curved Lines */
.bg-curves{
    position:absolute;
    right:18%;
    bottom:80px;
    width:220px;
    height:140px;
    opacity:.16;
    z-index:1;
    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(39,174,96,.45) 0,
    rgba(39,174,96,.45) 2px,
    transparent 3px,
    transparent 14px);
}

/* Diamond */
.bg-diamond{
    position:absolute;
    top:45%;
    left:46%;
    width:24px;
    height:24px;
    border:2px solid rgba(255,152,0,.35);
    transform:rotate(45deg);
    z-index:1;
}

/* Small Rings */
.bg-ring-small{
    position:absolute;
    right:10%;
    top:45%;
    width:70px;
    height:70px;
    border:2px solid rgba(24,169,153,.18);
    border-radius:50%;
}

.bg-ring-small::after{
    content:"";
    position:absolute;
    inset:12px;
    border:2px dashed rgba(24,169,153,.18);
    border-radius:50%;
}

/* Pattern */
.logo-story .auto-container{
    position:relative;
    z-index:2;
}

.logo-story .auto-container:before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle at 20px 20px,
        rgba(0,0,0,.035) 1px,
        transparent 1px);
    background-size:38px 38px;
    pointer-events:none;
}

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

.image-column .image{
    position:relative;
    display:inline-block;
    padding:35px;
}

.image-column .image:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#0f7fc1,#27ae60);
    opacity:.08;
    border-radius:40px;
    transform:rotate(-6deg);
}

.image-column img{
    position:relative;
    max-width:100%;
    width:340px;
    transition:.4s;
    z-index:2;
}

.image-column:hover img{
    transform:translateY(-8px) scale(1.03);
}

/*==================================================
    TITLE
==================================================*/

.sec-title{
    margin-bottom:25px;
}

.sec-title h2{
    position:relative;
    display:inline-block;
    font-size:38px;
    font-weight:700;
    color:#0d3559;
    padding-bottom:15px;
}

.sec-title h2:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:80px;
    height:4px;
    border-radius:30px;
    background:linear-gradient(90deg,#0f7fc1,#27ae60);
}

.content-column p{
    color:#666;
    line-height:2;
    text-align:justify;
    margin-bottom:18px;
    font-size:16px;
}

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

.logo-elements{
    margin-top:70px;
}

.logo-card{
    position:relative;
    height:100%;
    padding:35px 30px;
    border-radius:20px;
    background:#fff;
    border:1px solid #edf1f6;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    overflow:hidden;
    transition:.35s;
}

.logo-card:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
}

.logo-card.green:before{
    background:#2e8b57;
}

.logo-card.blue:before{
    background:#1579c5;
}

.logo-card.orange:before{
    background:#ff9800;
}

.logo-card.teal:before{
    background:#18a999;
}

.logo-card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 50px rgba(0,0,0,.10);
}

/*==================================================
    ICON
==================================================*/

.logo-card .icon{
    width:72px;
    height:72px;
    margin-bottom:22px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
}

.logo-card.green .icon{
    background:linear-gradient(135deg,#2e8b57,#46b96e);
}

.logo-card.blue .icon{
    background:linear-gradient(135deg,#0b71d9,#2bb7ff);
}

.logo-card.orange .icon{
    background:linear-gradient(135deg,#ff9800,#ffbe4d);
}

.logo-card.teal .icon{
    background:linear-gradient(135deg,#1ab39c,#36d6bf);
}

.logo-card h4{
    font-size:22px;
    font-weight:700;
    color:#123456;
    margin-bottom:15px;
}

.logo-card p{
    color:#666;
    line-height:1.9;
    margin:0;
    text-align:justify;
}

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

@media(max-width:991px){

    .logo-story{
        padding:70px 0;
    }

    .image-column{
        margin-bottom:40px;
    }

    .image-column img{
        width:270px;
    }

    .sec-title h2{
        font-size:30px;
    }

}












/* ========================================= AKSESIBILITAS ================================================= */
/*=========================================
BACKGROUND PATTERN
=========================================*/

/* Dot Pattern */
.facts-section .bg-dots{
    position:absolute;
    top:80px;
    left:8%;
    width:110px;
    height:110px;
    background-image:
        radial-gradient(rgba(32,196,216,.45) 1.5px,transparent 1.5px);
    background-size:13px 13px;
    opacity:.45;
}

/* Ring */
.facts-section .bg-ring{
    position:absolute;
    top:140px;
    right:10%;
    width:140px;
    height:140px;
    border:2px dashed rgba(32,196,216,.20);
    border-radius:50%;
}

.facts-section .bg-ring::after{
    content:'';
    position:absolute;
    inset:18px;
    border:2px solid rgba(32,196,216,.15);
    border-radius:50%;
}

/* Diamond */
.facts-section .bg-diamond{
    position:absolute;
    left:22%;
    bottom:70px;
    width:28px;
    height:28px;
    border:2px solid rgba(32,196,216,.30);
    transform:rotate(45deg);
}

/* Plus */
.facts-section .bg-plus{
    position:absolute;
    right:28%;
    bottom:110px;
    width:24px;
    height:24px;
}

.facts-section .bg-plus::before,
.facts-section .bg-plus::after{
    content:'';
    position:absolute;
    background:rgba(32,196,216,.35);
}

.facts-section .bg-plus::before{
    width:3px;
    height:24px;
    left:50%;
    transform:translateX(-50%);
}

.facts-section .bg-plus::after{
    width:24px;
    height:3px;
    top:50%;
    transform:translateY(-50%);
}

/* Wave */
.facts-section .bg-wave{
    position:absolute;
    left:45%;
    bottom:50px;
    width:180px;
    height:60px;
    opacity:.18;
    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(32,196,216,.45) 0,
    rgba(32,196,216,.45) 2px,
    transparent 3px,
    transparent 12px);
}

/* Circle */
.facts-section .bg-circle{
    position:absolute;
    top:45%;
    left:6%;
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px solid rgba(32,196,216,.18);
}

.facts-section .bg-circle::after{
    content:'';
    position:absolute;
    inset:14px;
    border-radius:50%;
    border:2px dashed rgba(32,196,216,.18);
}
















/* ============================================== MITRA ================================================== */

/*====================================================
    WHITE MODERN BACKGROUND
====================================================*/
/*=====================================
    BACKGROUND MODERN - WHITE THEME
======================================*/
.team-section{
    position:relative;
    overflow:hidden;
    background:#fff;
    padding:100px 0;
    z-index:1;
}

/* Blob kiri atas */
.team-section::before{
    content:'';
    position:absolute;
    top:-180px;
    left:-180px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(15,109,128,.08) 0%,
        rgba(15,109,128,0) 70%);
    z-index:-2;
}

/* Blob kanan bawah */
.team-section::after{
    content:'';
    position:absolute;
    right:-180px;
    bottom:-180px;
    width:500px;
    height:500px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(70,170,120,.08) 0%,
        rgba(70,170,120,0) 70%);
    z-index:-2;
}

/*=====================================
    PATTERN TITIK
======================================*/
.team-section .auto-container{
    position:relative;
}

.team-section .auto-container:before{
    content:'';
    position:absolute;
    top:-50px;
    right:-70px;
    width:240px;
    height:240px;
    background-image:radial-gradient(#d7e4ea 1.4px, transparent 1.4px);
    background-size:18px 18px;
    opacity:.55;
    pointer-events:none;
}

.team-section .auto-container:after{
    content:'';
    position:absolute;
    bottom:-60px;
    left:-60px;
    width:220px;
    height:220px;
    background-image:radial-gradient(#d7e4ea 1.4px, transparent 1.4px);
    background-size:18px 18px;
    opacity:.35;
    pointer-events:none;
}


/*=====================================
    WAVE PUTIH ABU
======================================*/
.bg-wave{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:-1;
}

.bg-wave span{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(15,109,128,.05);
}

.bg-wave span:nth-child(1){
    width:900px;
    height:900px;
    top:-600px;
    right:-250px;
}

.bg-wave span:nth-child(2){
    width:700px;
    height:700px;
    bottom:-450px;
    left:-180px;
}

.bg-wave span:nth-child(3){
    width:450px;
    height:450px;
    top:35%;
    right:-180px;
}


/*=====================================
    LIGHT GRID
======================================*/
.bg-grid{
    position:absolute;
    inset:0;
    z-index:-3;
    opacity:.25;
    background-image:
        linear-gradient(rgba(15,109,128,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,109,128,.03) 1px, transparent 1px);
    background-size:60px 60px;
}


/*=====================================
    BLUR ORNAMENT
======================================*/
.blur-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.25;
    z-index:-2;
}

.blur-circle.one{
    width:180px;
    height:180px;
    background:#8ed3df;
    top:180px;
    left:-60px;
}

.blur-circle.two{
    width:220px;
    height:220px;
    background:#a7dfb8;
    right:-80px;
    bottom:120px;
}

/*====================================================
    SECTION TITLE
====================================================*/
.sec-title .sub-title{
    display:inline-block;
    padding:7px 18px;
    background:#eef7f8;
    color:#0f6d80;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:15px;
}

.sec-title h2{
    font-size:38px;
    font-weight:700;
    color:#14313f;
}

.sec-title h2:after{
    content:"";
    display:block;
    width:80px;
    height:4px;
    margin:18px auto 0;
    border-radius:20px;
    background:linear-gradient(90deg,#0f6d80,#56b88b);
}


/*====================================================
    FILTER
====================================================*/
.filter-wrapper{
    margin:45px auto 60px;
    background:#fff;
    border-radius:20px;
    padding:28px;
    border:1px solid #edf2f6;
    box-shadow:0 18px 40px rgba(0,0,0,.05);
}

.filter-header h5{
    font-weight:700;
    color:#234;
    margin-bottom:18px;
}

.filter-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.filter-btn{
    border:none;
    background:#f5f8fa;
    color:#48606c;
    padding:12px 22px;
    border-radius:40px;
    transition:.35s;
    font-weight:600;
}

.filter-btn:hover{
    transform:translateY(-3px);
    background:#0f6d80;
    color:#fff;
    box-shadow:0 12px 25px rgba(15,109,128,.25);
}

.filter-btn.active{
    color:#fff;
    background:linear-gradient(135deg,#0f6d80,#2f9c95);
    box-shadow:0 12px 25px rgba(15,109,128,.25);
}


/*====================================================
    CARD
====================================================*/
/*==============================
    CARD SAMA TINGGI
==============================*/

.team-row{
    display:flex;
    flex-wrap:wrap;
}

.team-row > [class*="col-"]{
    display:flex;
    margin-bottom:30px;
}

.team-block-one{
    width:100%;
}

.team-block-one .inner-box{
    width:100%;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    border:1px solid #edf2f7;
    box-shadow:0 12px 30px rgba(0,0,0,.05);
    transition:.35s;
    height:100%;
}

.team-block-one .inner-box:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(0,0,0,.10);
}


/* Area Logo */
.team-block-one .image-box{
    height:220px;               /* Tinggi sama */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px;
    background:#fbfcfd;
    border-bottom:1px solid #eef2f5;
}

.team-block-one .image-box img{
    max-width:100%;
    max-height:140px;
    width:auto;
    height:auto;
    object-fit:contain;
    transition:.3s;
}

.team-block-one:hover .image-box img{
    transform:scale(1.05);
}


/* Area Isi */
.team-block-one .lower-box{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:24px;
    text-align:center;
}


/* Judul dibuat sama tinggi */
.team-block-one h4{
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    font-size:18px;
    font-weight:600;
    line-height:1.5;
}

.team-block-one h4 a{
    color:#163341;
}


/* Tombol selalu di bawah */
.team-block-one .link-btn{
    margin-top:auto;
}

.team-block-one .theme-btn{
    width:100%;
    border-radius:40px;
}


/*====================================================
    BUTTON
====================================================*/
.theme-btn.btn-style-one{
    width:100%;
    border-radius:50px;
    background:linear-gradient(135deg,#0f6d80,#37a59b);
    border:none;
    color:#fff;
    transition:.35s;
}

.theme-btn.btn-style-one:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(15,109,128,.30);
}


/*====================================================
    FLOATING ICON
====================================================*/
.floated-icon{
    opacity:.07;
    animation:float 7s ease-in-out infinite;
}

.floated-icon.left{
    left:40px;
}

.floated-icon.right{
    right:40px;
}

@keyframes float{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-18px);
    }
    100%{
        transform:translateY(0px);
    }
}


/*====================================================
    RESPONSIVE
====================================================*/
@media(max-width:768px){

.sec-title h2{
    font-size:30px;
}

.filter-wrapper{
    padding:20px;
}

.filter-btn{
    width:100%;
}

.image-box img{
    height:130px;
}

}

/*=====================================
NETWORK PATTERN
======================================*/

/* Node Connection */
.bg-network{
    position:absolute;
    top:90px;
    right:8%;
    width:220px;
    height:160px;
    z-index:-1;
    opacity:.35;
}

.bg-network span{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#0f6d80;
}

.bg-network span::after{
    content:"";
    position:absolute;
    height:2px;
    background:rgba(15,109,128,.18);
    transform-origin:left center;
}

.bg-network span:nth-child(1){
    left:0;
    top:25px;
}
.bg-network span:nth-child(1)::after{
    width:60px;
    transform:rotate(20deg);
}

.bg-network span:nth-child(2){
    left:58px;
    top:48px;
}
.bg-network span:nth-child(2)::after{
    width:65px;
    transform:rotate(-18deg);
}

.bg-network span:nth-child(3){
    left:120px;
    top:30px;
}
.bg-network span:nth-child(3)::after{
    width:55px;
    transform:rotate(28deg);
}

.bg-network span:nth-child(4){
    left:170px;
    top:58px;
}

/* Ring Decoration */

.bg-ring{
    position:absolute;
    left:8%;
    top:140px;
    width:130px;
    height:130px;
    border-radius:50%;
    border:2px dashed rgba(15,109,128,.15);
    z-index:-1;
}

.bg-ring::after{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:2px solid rgba(15,109,128,.12);
}

/* Dot Cluster */

.bg-dot-cluster{
    position:absolute;
    right:12%;
    bottom:80px;
    width:120px;
    height:120px;
    background-image:
        radial-gradient(rgba(15,109,128,.35) 1.5px,transparent 1.5px);
    background-size:14px 14px;
    opacity:.45;
    z-index:-1;
}

/* Diamond */

.bg-diamond{
    position:absolute;
    left:20%;
    bottom:90px;
    width:24px;
    height:24px;
    border:2px solid rgba(86,184,139,.30);
    transform:rotate(45deg);
    z-index:-1;
}

/* Small Squares */

.bg-squares{
    position:absolute;
    top:48%;
    left:48%;
    width:120px;
    height:120px;
    z-index:-1;
}

.bg-squares span{
    position:absolute;
    width:14px;
    height:14px;
    border:2px solid rgba(15,109,128,.18);
}

.bg-squares span:nth-child(1){
    left:0;
    top:0;
}

.bg-squares span:nth-child(2){
    right:0;
    top:22px;
}

.bg-squares span:nth-child(3){
    left:28px;
    bottom:0;
}

.bg-squares span:nth-child(4){
    right:22px;
    bottom:28px;
}

/* Arc */

.bg-arc{
    position:absolute;
    bottom:140px;
    right:26%;
    width:160px;
    height:160px;
    border:2px solid rgba(86,184,139,.12);
    border-left:none;
    border-bottom:none;
    border-radius:50%;
    transform:rotate(18deg);
    z-index:-1;
}

/*=====================================
CONSTELLATION
======================================*/

.bg-constellation{
    position:absolute;
    left:8%;
    top:45%;
    width:220px;
    height:140px;
    opacity:.45;
    z-index:-1;
}

.bg-constellation span{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#0f6d80;
}

.bg-constellation span::after{
    content:"";
    position:absolute;
    height:1.5px;
    background:rgba(15,109,128,.18);
    transform-origin:left center;
}

.bg-constellation span:nth-child(1){
    left:0;
    top:40px;
}
.bg-constellation span:nth-child(1)::after{
    width:55px;
    transform:rotate(18deg);
}

.bg-constellation span:nth-child(2){
    left:55px;
    top:56px;
}
.bg-constellation span:nth-child(2)::after{
    width:50px;
    transform:rotate(-22deg);
}

.bg-constellation span:nth-child(3){
    left:102px;
    top:34px;
}
.bg-constellation span:nth-child(3)::after{
    width:48px;
    transform:rotate(25deg);
}

.bg-constellation span:nth-child(4){
    left:145px;
    top:58px;
}

/*=====================================
PLUS
======================================*/

.bg-plus{
    position:absolute;
    right:18%;
    top:38%;
    width:24px;
    height:24px;
    opacity:.4;
    z-index:-1;
}

.bg-plus::before,
.bg-plus::after{
    content:"";
    position:absolute;
    background:#0f6d80;
}

.bg-plus::before{
    width:3px;
    height:24px;
    left:50%;
    transform:translateX(-50%);
}

.bg-plus::after{
    width:24px;
    height:3px;
    top:50%;
    transform:translateY(-50%);
}

/*=====================================
CONTOUR
======================================*/

.bg-contour{
    position:absolute;
    right:12%;
    top:220px;
    width:180px;
    height:180px;
    opacity:.18;
    z-index:-1;

    background:
    repeating-radial-gradient(circle,
    rgba(15,109,128,.18) 0,
    transparent 6px,
    transparent 14px);
}

/*=====================================
FLOATING CIRCLE
======================================*/

.bg-circle-outline{
    position:absolute;
    left:30%;
    bottom:90px;
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px solid rgba(15,109,128,.14);
    z-index:-1;
}

.bg-circle-outline::after{
    content:"";
    position:absolute;
    inset:15px;
    border-radius:50%;
    border:2px dashed rgba(15,109,128,.14);
}

/*=====================================
TRIANGLE
======================================*/

.bg-triangle{
    position:absolute;
    right:8%;
    bottom:160px;
    width:46px;
    height:46px;
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
    border:2px solid rgba(86,184,139,.25);
    opacity:.4;
    z-index:-1;
}

/*=====================================
CROSS
======================================*/

.bg-cross{
    position:absolute;
    left:22%;
    top:180px;
    width:22px;
    height:22px;
    transform:rotate(45deg);
    border:2px solid rgba(86,184,139,.25);
    z-index:-1;
}












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

.actvity-section{
    position:relative;
    padding:90px 0;
    background:#ffffff;
    overflow:hidden;
    z-index:1;
}

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

/*====================================
BACKGROUND
====================================*/

.actvity-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:

    radial-gradient(circle at 8% 12%,
    rgba(240,124,0,.15) 0,
    transparent 180px),

    radial-gradient(circle at 92% 12%,
    rgba(32,196,216,.12) 0,
    transparent 180px),

    radial-gradient(circle at 15% 88%,
    rgba(255,170,0,.12) 0,
    transparent 180px),

    radial-gradient(circle at 85% 86%,
    rgba(32,196,216,.10) 0,
    transparent 180px);
}

.actvity-section::after{
    content:"";
    position:absolute;
    inset:0;

    opacity:.12;

    background-image:
    radial-gradient(rgba(240,124,0,.40) 1px,transparent 1px);

    background-size:36px 36px;
}

/*====================================
RING
====================================*/

.bg-ring{
    position:absolute;
    top:90px;
    left:5%;
    width:150px;
    height:150px;
    border:2px dashed rgba(240,124,0,.30);
    border-radius:50%;
}

.bg-ring::after{
    content:"";
    position:absolute;
    inset:18px;
    border:2px solid rgba(240,124,0,.22);
    border-radius:50%;
}

.bg-ring2{
    position:absolute;
    right:8%;
    top:42%;
    width:100px;
    height:100px;
    border:2px solid rgba(32,196,216,.28);
    border-radius:50%;
}

.bg-ring3{
    position:absolute;
    left:26%;
    bottom:70px;
    width:60px;
    height:60px;
    border:2px dashed rgba(255,170,0,.28);
    border-radius:50%;
}

/*====================================
DOTS
====================================*/

.bg-dots,
.bg-dots2,
.bg-dots3{
    position:absolute;
    opacity:.55;
}

.bg-dots{
    top:120px;
    right:8%;
    width:100px;
    height:100px;
    background-image:
    radial-gradient(rgba(240,124,0,.80) 1.6px,transparent 1.6px);
    background-size:13px 13px;
}

.bg-dots2{
    left:8%;
    top:48%;
    width:90px;
    height:90px;
    background-image:
    radial-gradient(rgba(32,196,216,.75) 1.5px,transparent 1.5px);
    background-size:12px 12px;
}

.bg-dots3{
    right:18%;
    bottom:90px;
    width:75px;
    height:75px;
    background-image:
    radial-gradient(rgba(255,170,0,.75) 1.5px,transparent 1.5px);
    background-size:11px 11px;
}

/*====================================
DIAMOND
====================================*/

.bg-diamond,
.bg-diamond2,
.bg-diamond3{
    position:absolute;
    transform:rotate(45deg);
}

.bg-diamond{
    left:18%;
    top:28%;
    width:20px;
    height:20px;
    border:2px solid rgba(240,124,0,.55);
}

.bg-diamond2{
    right:22%;
    top:22%;
    width:16px;
    height:16px;
    border:2px solid rgba(32,196,216,.45);
}

.bg-diamond3{
    left:46%;
    bottom:100px;
    width:14px;
    height:14px;
    border:2px solid rgba(255,170,0,.45);
}

/*====================================
PLUS
====================================*/

.bg-plus,
.bg-plus2{
    position:absolute;
    width:20px;
    height:20px;
}

.bg-plus{
    right:32%;
    top:28%;
}

.bg-plus2{
    left:36%;
    bottom:140px;
}

.bg-plus::before,
.bg-plus::after,
.bg-plus2::before,
.bg-plus2::after{
    content:"";
    position:absolute;
    background:#20c4d8;
}

.bg-plus::before,
.bg-plus2::before{
    width:2px;
    height:20px;
    left:9px;
}

.bg-plus::after,
.bg-plus2::after{
    width:20px;
    height:2px;
    top:9px;
}

/*====================================
CIRCLE
====================================*/

.bg-circle,
.bg-circle2{
    position:absolute;
    border-radius:50%;
}

.bg-circle{
    left:58%;
    top:90px;
    width:60px;
    height:60px;
    border:2px solid rgba(240,124,0,.30);
}

.bg-circle2{
    left:14%;
    bottom:170px;
    width:45px;
    height:45px;
    border:2px dashed rgba(32,196,216,.30);
}

/*====================================
WAVE
====================================*/

.bg-wave,
.bg-wave2{
    position:absolute;
    opacity:.35;
}

.bg-wave{
    left:42%;
    top:100px;
    width:170px;
    height:60px;

    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(240,124,0,.55) 0,
    rgba(240,124,0,.55) 2px,
    transparent 3px,
    transparent 12px);
}

.bg-wave2{
    right:35%;
    bottom:70px;
    width:150px;
    height:45px;

    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(32,196,216,.55) 0,
    rgba(32,196,216,.55) 2px,
    transparent 3px,
    transparent 10px);
}

/*====================================
CONTOUR
====================================*/

.bg-contour{
    position:absolute;
    right:28%;
    bottom:80px;
    width:170px;
    height:170px;

    opacity:.25;

    background:
    repeating-radial-gradient(circle,
    rgba(240,124,0,.35) 0,
    transparent 6px,
    transparent 14px);
}

/*====================================
TRIANGLE
====================================*/

.bg-triangle{
    position:absolute;
    right:10%;
    bottom:210px;
    width:34px;
    height:34px;
    border:2px solid rgba(240,124,0,.40);
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
}

/*====================================
CROSS
====================================*/

.bg-cross{
    position:absolute;
    left:30%;
    top:18%;
    width:18px;
    height:18px;
    border:2px solid rgba(32,196,216,.40);
    transform:rotate(45deg);
}















/* ============================================================== GEOPRODUK ======================================================================= */
/* =====================================================
GEO PRODUK PREMIUM STYLE - GEOPARK IJEN
===================================================== */

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

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

.trekking-section{
    position:relative;
    padding:100px 0;
    background:#ffffff;
    overflow:hidden;
    z-index:1;
}

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

/*==================================
BACKGROUND
==================================*/

.trekking-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:

    radial-gradient(circle at 8% 12%,
    rgba(13,110,253,.08) 0,
    transparent 180px),

    radial-gradient(circle at 92% 16%,
    rgba(0,188,212,.07) 0,
    transparent 180px),

    radial-gradient(circle at 15% 88%,
    rgba(13,110,253,.05) 0,
    transparent 180px),

    radial-gradient(circle at 85% 85%,
    rgba(0,188,212,.05) 0,
    transparent 180px),

    radial-gradient(circle at 50% 50%,
    rgba(13,110,253,.03) 0,
    transparent 260px);
}

.trekking-section::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.14;

    background-image:
    radial-gradient(rgba(13,110,253,.35) 1px,transparent 1px);

    background-size:34px 34px;
}

/*==================================
HEADER
==================================*/

.section-header{

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:70px;

}

.section-subtitle{

    display:inline-block;

    background:#dff5ff;

    color:#0d6efd;

    padding:8px 22px;

    border-radius:40px;

    font-weight:600;

    margin-bottom:20px;

}

.section-header h2{

    font-size:44px;

    font-weight:700;

    color:#153b68;

    margin-bottom:20px;

}

.section-header p{

    color:#666;

    line-height:1.8;

    font-size:17px;

}

/*==================================
FILTER
==================================*/

.filter-tabs{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:60px;

}

.filter-tabs li{

    list-style:none;

    padding:13px 26px;

    border-radius:40px;

    background:#fff;

    cursor:pointer;

    transition:.35s;

    box-shadow:

    0 8px 20px rgba(0,0,0,.08);

}

.filter-tabs li.active,

.filter-tabs li:hover{

    background:

    linear-gradient(135deg,#0d6efd,#00bcd4);

    color:#fff;

}

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

.produk-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    height:100%;

    transition:.35s;

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

}

.produk-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 30px 55px rgba(0,0,0,.15);

}

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

.produk-image{

    height:250px;

    overflow:hidden;

    position:relative;

}

.produk-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.produk-card:hover img{

    transform:scale(1.12);

}

/*==================================
CATEGORY
==================================*/

.produk-overlay{

    position:absolute;

    top:18px;

    left:18px;

}

.produk-category{

    background:#0d6efd;

    color:#fff;

    padding:7px 16px;

    border-radius:30px;

    font-size:13px;

}

/*==================================
CONTENT
==================================*/

.produk-content{

    padding:25px;

}

.produk-content h4{

    font-size:23px;

    color:#153b68;

    font-weight:700;

    margin-bottom:15px;

}

.produk-desc{

    color:#666;

    line-height:1.8;

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

    min-height:84px;

}

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

.btn-detail{

    margin-top:25px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 26px;

    border-radius:40px;

    background:

    linear-gradient(
    135deg,
    #0d6efd,
    #00bcd4
    );

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.btn-detail:hover{

    color:#fff;

    transform:translateX(5px);

}

/*==================================
PATTERN
==================================*/

/* Ring */

.bg-ring{
    position:absolute;
    top:90px;
    left:6%;
    width:150px;
    height:150px;
    border-radius:50%;
    border:2px dashed rgba(13,110,253,.15);
    z-index:1;
}

.bg-ring::after{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:2px solid rgba(13,110,253,.12);
}

/* Dot */

.bg-dots{
    position:absolute;
    right:10%;
    top:120px;
    width:110px;
    height:110px;

    background-image:
    radial-gradient(rgba(13,110,253,.45) 1.5px,transparent 1.5px);

    background-size:13px 13px;
    opacity:.45;
}

/* Diamond */

.bg-diamond{
    position:absolute;
    left:18%;
    bottom:90px;
    width:24px;
    height:24px;
    border:2px solid rgba(0,188,212,.30);
    transform:rotate(45deg);
}

/* Plus */

.bg-plus{
    position:absolute;
    right:24%;
    bottom:110px;
    width:22px;
    height:22px;
}

.bg-plus::before,
.bg-plus::after{
    content:"";
    position:absolute;
    background:rgba(13,110,253,.28);
}

.bg-plus::before{
    width:2px;
    height:22px;
    left:10px;
}

.bg-plus::after{
    width:22px;
    height:2px;
    top:10px;
}

/* Circle */

.bg-circle{
    position:absolute;
    left:48%;
    top:90px;
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px solid rgba(13,110,253,.15);
}

.bg-circle::after{
    content:"";
    position:absolute;
    inset:14px;
    border-radius:50%;
    border:2px dashed rgba(13,110,253,.15);
}

/* Contour */

.bg-contour{
    position:absolute;
    right:28%;
    top:45%;
    width:180px;
    height:180px;
    opacity:.16;

    background:
    repeating-radial-gradient(circle,
    rgba(13,110,253,.18) 0,
    transparent 6px,
    transparent 14px);
}

/* Wave */

.bg-wave{
    position:absolute;
    left:40%;
    bottom:60px;
    width:180px;
    height:60px;
    opacity:.20;

    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(0,188,212,.45) 0,
    rgba(0,188,212,.45) 2px,
    transparent 3px,
    transparent 12px);
}

/*==================================================
EXTRA PATTERN
==================================================*/

/* Ring 2 */
.bg-ring2{
    position:absolute;
    right:8%;
    top:38%;
    width:110px;
    height:110px;
    border:2px dashed rgba(13,110,253,.14);
    border-radius:50%;
    z-index:1;
}

.bg-ring2::after{
    content:"";
    position:absolute;
    inset:14px;
    border:2px solid rgba(13,110,253,.10);
    border-radius:50%;
}

/* Ring 3 */
.bg-ring3{
    position:absolute;
    left:28%;
    bottom:80px;
    width:70px;
    height:70px;
    border:2px solid rgba(0,188,212,.14);
    border-radius:50%;
}

/* Dots kiri */
.bg-dots2{
    position:absolute;
    left:8%;
    top:45%;
    width:90px;
    height:90px;
    background-image:
    radial-gradient(rgba(13,110,253,.45) 1.5px,transparent 1.5px);
    background-size:12px 12px;
    opacity:.35;
}

/* Dots tengah */
.bg-dots3{
    position:absolute;
    left:55%;
    bottom:120px;
    width:80px;
    height:80px;
    background-image:
    radial-gradient(rgba(0,188,212,.40) 1.5px,transparent 1.5px);
    background-size:11px 11px;
    opacity:.30;
}

/* Diamond 2 */
.bg-diamond2{
    position:absolute;
    right:20%;
    top:22%;
    width:18px;
    height:18px;
    border:2px solid rgba(13,110,253,.25);
    transform:rotate(45deg);
}

/* Diamond 3 */
.bg-diamond3{
    position:absolute;
    left:42%;
    top:32%;
    width:14px;
    height:14px;
    border:2px solid rgba(0,188,212,.25);
    transform:rotate(45deg);
}

/* Plus 2 */
.bg-plus2{
    position:absolute;
    left:18%;
    top:22%;
    width:20px;
    height:20px;
}

.bg-plus2::before,
.bg-plus2::after{
    content:"";
    position:absolute;
    background:rgba(13,110,253,.25);
}

.bg-plus2::before{
    width:2px;
    height:20px;
    left:9px;
}

.bg-plus2::after{
    width:20px;
    height:2px;
    top:9px;
}

/* Plus 3 */
.bg-plus3{
    position:absolute;
    right:32%;
    bottom:60px;
    width:18px;
    height:18px;
}

.bg-plus3::before,
.bg-plus3::after{
    content:"";
    position:absolute;
    background:rgba(0,188,212,.25);
}

.bg-plus3::before{
    width:2px;
    height:18px;
    left:8px;
}

.bg-plus3::after{
    width:18px;
    height:2px;
    top:8px;
}

/* Circle */
.bg-circle2{
    position:absolute;
    left:72%;
    top:52%;
    width:55px;
    height:55px;
    border-radius:50%;
    border:2px solid rgba(13,110,253,.12);
}

/* Circle */
.bg-circle3{
    position:absolute;
    left:12%;
    bottom:120px;
    width:45px;
    height:45px;
    border-radius:50%;
    border:2px dashed rgba(0,188,212,.15);
}

/* Triangle */
.bg-triangle{
    position:absolute;
    right:12%;
    bottom:190px;
    width:34px;
    height:34px;
    border:2px solid rgba(13,110,253,.18);
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
}

/* Contour 2 */
.bg-contour2{
    position:absolute;
    left:30%;
    top:180px;
    width:140px;
    height:140px;
    opacity:.12;
    background:
    repeating-radial-gradient(circle,
    rgba(13,110,253,.18) 0,
    transparent 5px,
    transparent 12px);
}

/* Wave 2 */
.bg-wave2{
    position:absolute;
    right:34%;
    top:58%;
    width:150px;
    height:50px;
    opacity:.15;
    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(13,110,253,.45) 0,
    rgba(13,110,253,.45) 2px,
    transparent 3px,
    transparent 10px);
}













/* ============================================================================ GEOPRODUK DETAIL ============================================================== */
/* ===================================
   DETAIL GEOPRODUK MODERN
=================================== */

/* ===================================
   DETAIL GEOPRODUK MODERN
=================================== */

.detail-section{
    position:relative;
    padding:100px 0;
    background:#ffffff;
    overflow:hidden;
    z-index:1;
}

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

/* Background Blob */

.detail-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:

    radial-gradient(circle at 8% 12%,
    rgba(14,165,233,.08) 0,
    transparent 180px),

    radial-gradient(circle at 90% 16%,
    rgba(99,102,241,.07) 0,
    transparent 180px),

    radial-gradient(circle at 15% 88%,
    rgba(14,165,233,.05) 0,
    transparent 180px),

    radial-gradient(circle at 86% 86%,
    rgba(99,102,241,.05) 0,
    transparent 180px),

    radial-gradient(circle at 50% 50%,
    rgba(14,165,233,.03) 0,
    transparent 260px);
}

/* Dot Grid */

.detail-section::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.12;

    background-image:
    radial-gradient(rgba(14,165,233,.35) 1px,transparent 1px);

    background-size:34px 34px;
}

.detail-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.detail-image{
    position:relative;
}

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

.detail-content{
    padding:50px;
}

.badge-kategori{
    display:inline-block;
    padding:8px 20px;
    border-radius:50px;
    background:linear-gradient(90deg,#0ea5e9,#6366f1);
    color:#fff;
    font-size:13px;
    font-weight:600;
    margin-bottom:20px;
}

.detail-content h2{
    font-size:42px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:25px;
}

.detail-content .desc{
    font-size:16px;
    line-height:2em;
    color:#475569;
}

.info-box{
    margin-top:35px;
    padding:25px;
    background:#f8fafc;
    border-radius:15px;
}

.info-box ul{
    list-style:none;
    padding:0;
    margin:0;
}

.info-box ul li{
    padding:10px 0;
    border-bottom:1px solid #e2e8f0;
}

.info-box ul li:last-child{
    border-bottom:none;
}

.info-box strong{
    color:#0f172a;
}

.back-btn{
    display:inline-block;
    margin-top:30px;
    padding:12px 30px;
    border-radius:50px;
    text-decoration:none;
    background:linear-gradient(90deg,#0ea5e9,#6366f1);
    color:#fff;
    font-weight:600;
    transition:.3s;
}

.back-btn:hover{
    transform:translateY(-3px);
    color:#fff;
}

/* ==========================
   PRODUK LAINNYA
========================== */

.related-section{
    margin-top:80px;
}

.related-title{
    margin-bottom:40px;
}

.related-title h3{
    font-size:32px;
    font-weight:800;
    color:#0f172a;
}

.related-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
}

.related-card:hover{
    transform:translateY(-10px);
}

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

.related-content{
    padding:20px;
}

.related-content h5{
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
}

.related-content a{
    text-decoration:none;
}

.related-content .btn-detail{
    color:#4f46e5;
    font-weight:600;
}

@media(max-width:768px){

    .detail-image img{
        height:300px;
    }

    .detail-content{
        padding:30px;
    }

    .detail-content h2{
        font-size:28px;
    }
}

/*====================================
PATTERN
====================================*/

/* Ring */

.bg-ring{
    position:absolute;
    left:6%;
    top:80px;
    width:160px;
    height:160px;
    border-radius:50%;
    border:2px dashed rgba(14,165,233,.14);
    z-index:1;
}

.bg-ring::after{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:2px solid rgba(14,165,233,.10);
}

/* Ring */

.bg-ring2{
    position:absolute;
    right:8%;
    top:42%;
    width:110px;
    height:110px;
    border-radius:50%;
    border:2px solid rgba(99,102,241,.14);
}

/* Dot */

.bg-dots{
    position:absolute;
    right:10%;
    top:120px;
    width:110px;
    height:110px;

    background-image:
    radial-gradient(rgba(14,165,233,.45) 1.5px,transparent 1.5px);

    background-size:13px 13px;
    opacity:.40;
}

/* Dot */

.bg-dots2{
    position:absolute;
    left:10%;
    bottom:100px;
    width:90px;
    height:90px;

    background-image:
    radial-gradient(rgba(99,102,241,.35) 1.5px,transparent 1.5px);

    background-size:12px 12px;
}

/* Diamond */

.bg-diamond{
    position:absolute;
    left:20%;
    top:42%;
    width:24px;
    height:24px;
    border:2px solid rgba(14,165,233,.25);
    transform:rotate(45deg);
}

/* Diamond */

.bg-diamond2{
    position:absolute;
    right:18%;
    bottom:120px;
    width:18px;
    height:18px;
    border:2px solid rgba(99,102,241,.22);
    transform:rotate(45deg);
}

/* Plus */

.bg-plus{
    position:absolute;
    right:28%;
    top:28%;
    width:22px;
    height:22px;
}

.bg-plus::before,
.bg-plus::after{
    content:"";
    position:absolute;
    background:rgba(14,165,233,.25);
}

.bg-plus::before{
    width:2px;
    height:22px;
    left:10px;
}

.bg-plus::after{
    width:22px;
    height:2px;
    top:10px;
}

/* Circle */

.bg-circle{
    position:absolute;
    left:45%;
    top:90px;
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px solid rgba(14,165,233,.12);
}

.bg-circle::after{
    content:"";
    position:absolute;
    inset:14px;
    border-radius:50%;
    border:2px dashed rgba(14,165,233,.12);
}

/* Contour */

.bg-contour{
    position:absolute;
    right:26%;
    bottom:80px;
    width:180px;
    height:180px;
    opacity:.16;

    background:
    repeating-radial-gradient(circle,
    rgba(99,102,241,.18) 0,
    transparent 6px,
    transparent 14px);
}

/* Wave */

.bg-wave{
    position:absolute;
    left:38%;
    bottom:60px;
    width:180px;
    height:60px;
    opacity:.20;

    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(14,165,233,.45) 0,
    rgba(14,165,233,.45) 2px,
    transparent 3px,
    transparent 12px);
}

/* Triangle */

.bg-triangle{
    position:absolute;
    right:10%;
    bottom:220px;
    width:40px;
    height:40px;
    border:2px solid rgba(99,102,241,.20);
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
}

/* Cross */

.bg-cross{
    position:absolute;
    left:32%;
    top:22%;
    width:22px;
    height:22px;
    border:2px solid rgba(14,165,233,.18);
    transform:rotate(45deg);
}












/* ============================================================ GEOWISATA =========================================================== */
/*==========================
 GEO WISATA
===========================*/

.trekking-section{
    padding:90px 0;
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fcfdff 50%,
        #ffffff 100%
    );
}

.title-box{
    max-width:750px;
    margin:auto;
    text-align:center;
    margin-bottom:60px;
}

.title-box h2{
    font-size:42px;
    font-weight:700;
    color:#163b68;
}

.title-box span{
    color:#0099d8;
}

.title-box .text{
    margin-top:18px;
    font-size:17px;
    color:#666;
    line-height:1.8;
}

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

.wisata-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:
    0 12px 35px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
}

.wisata-card:hover{
    transform:translateY(-10px);
    box-shadow:
    0 25px 45px rgba(0,0,0,.18);
}

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

.wisata-image{
    position:relative;
    height:270px;
    overflow:hidden;
    cursor:pointer;
}

.wisata-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.wisata-card:hover img{
    transform:scale(1.15);
}

/*==========================
OVERLAY
===========================*/

.wisata-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
    linear-gradient(
    rgba(0,0,0,.1),
    rgba(0,0,0,.7));
    opacity:0;
    transition:.35s;
}

.wisata-card:hover .wisata-overlay{
    opacity:1;
}

.zoom-btn{
    background:#fff;
    color:#0d6efd;
    padding:12px 24px;
    border-radius:40px;
    font-weight:600;
    transition:.3s;
}

.zoom-btn:hover{
    background:#0d6efd;
    color:#fff;
}

/*==========================
CONTENT
===========================*/

.wisata-content{
    padding:25px;
}

.wisata-content h4{
    font-size:22px;
    font-weight:700;
    color:#163b68;
    margin-bottom:15px;
}

.wisata-line{
    width:55px;
    height:4px;
    border-radius:20px;
    background:#00bcd4;
    margin-bottom:18px;
}

.wisata-content small{
    color:#666;
    font-size:15px;
}

.wisata-content i{
    color:#00bcd4;
    margin-right:6px;
}

/*==========================
MODAL
===========================*/

.image-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.image-modal img{
    max-width:90%;
    max-height:90%;
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.close-btn{
    position:absolute;
    top:30px;
    right:45px;
    font-size:45px;
    color:#fff;
    cursor:pointer;
}

/*========================================
BACKGROUND PATTERN
========================================*/

.trekking-section{
    position:relative;
    overflow:hidden;
    z-index:1;
}

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

/* Blob Background */

.trekking-section::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;

    background:

    radial-gradient(circle at 8% 10%,
    rgba(32,196,216,.16) 0,
    transparent 220px),

    radial-gradient(circle at 92% 12%,
    rgba(13,110,253,.12) 0,
    transparent 200px),

    radial-gradient(circle at 15% 90%,
    rgba(0,188,212,.12) 0,
    transparent 220px),

    radial-gradient(circle at 88% 88%,
    rgba(32,196,216,.10) 0,
    transparent 220px);

    z-index:0;
}

/* Dot Grid */

.trekking-section::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;

    opacity:.18;

    background-image:
        radial-gradient(rgba(32,196,216,.50) 1px,transparent 1px);

    background-size:38px 38px;
}

/*========================================
RING
========================================*/

.bg-ring{
    position:absolute;
    top:80px;
    left:5%;
    width:160px;
    height:160px;
    border:2px dashed rgba(32,196,216,.35);
    border-radius:50%;
}

.bg-ring::after{
    content:'';
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:2px solid rgba(32,196,216,.20);
}

.bg-ring2{
    position:absolute;
    top:42%;
    right:8%;
    width:95px;
    height:95px;
    border:2px solid rgba(13,110,253,.25);
    border-radius:50%;
}

.bg-ring3{
    position:absolute;
    bottom:80px;
    left:28%;
    width:60px;
    height:60px;
    border:2px dashed rgba(0,188,212,.35);
    border-radius:50%;
}

/*========================================
DOT PATTERN
========================================*/

.bg-dots,
.bg-dots2,
.bg-dots3{
    position:absolute;
    opacity:.60;
}

.bg-dots{
    top:120px;
    right:10%;
    width:100px;
    height:100px;
    background-image:
        radial-gradient(rgba(32,196,216,.85) 1.6px,transparent 1.6px);
    background-size:13px 13px;
}

.bg-dots2{
    left:8%;
    top:50%;
    width:90px;
    height:90px;
    background-image:
        radial-gradient(rgba(13,110,253,.70) 1.5px,transparent 1.5px);
    background-size:12px 12px;
}

.bg-dots3{
    right:18%;
    bottom:90px;
    width:75px;
    height:75px;
    background-image:
        radial-gradient(rgba(0,188,212,.70) 1.5px,transparent 1.5px);
    background-size:11px 11px;
}

/*========================================
DIAMOND
========================================*/

.bg-diamond,
.bg-diamond2,
.bg-diamond3{
    position:absolute;
    transform:rotate(45deg);
}

.bg-diamond{
    top:28%;
    left:18%;
    width:20px;
    height:20px;
    border:2px solid rgba(32,196,216,.45);
}

.bg-diamond2{
    top:22%;
    right:22%;
    width:16px;
    height:16px;
    border:2px solid rgba(13,110,253,.40);
}

.bg-diamond3{
    left:45%;
    bottom:110px;
    width:14px;
    height:14px;
    border:2px solid rgba(0,188,212,.45);
}

/*========================================
PLUS
========================================*/

.bg-plus,
.bg-plus2{
    position:absolute;
    width:20px;
    height:20px;
}

.bg-plus{
    top:30%;
    right:32%;
}

.bg-plus2{
    left:36%;
    bottom:140px;
}

.bg-plus::before,
.bg-plus::after,
.bg-plus2::before,
.bg-plus2::after{
    content:'';
    position:absolute;
    background:#20c4d8;
}

.bg-plus::before,
.bg-plus2::before{
    width:2px;
    height:20px;
    left:9px;
}

.bg-plus::after,
.bg-plus2::after{
    width:20px;
    height:2px;
    top:9px;
}

/*========================================
CIRCLE
========================================*/

.bg-circle{
    position:absolute;
    left:58%;
    top:90px;
    width:55px;
    height:55px;
    border-radius:50%;
    border:2px solid rgba(32,196,216,.28);
}

.bg-circle2{
    position:absolute;
    left:12%;
    bottom:180px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:2px dashed rgba(13,110,253,.25);
}

/*========================================
WAVE
========================================*/

.bg-wave{
    position:absolute;
    left:42%;
    top:110px;
    width:170px;
    height:55px;
    opacity:.35;

    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(32,196,216,.55) 0,
    rgba(32,196,216,.55) 2px,
    transparent 3px,
    transparent 12px);
}

.bg-wave2{
    position:absolute;
    right:34%;
    bottom:80px;
    width:150px;
    height:45px;
    opacity:.35;

    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(13,110,253,.50) 0,
    rgba(13,110,253,.50) 2px,
    transparent 3px,
    transparent 10px);
}

/*========================================
CONTOUR
========================================*/

.bg-contour{
    position:absolute;
    right:26%;
    bottom:90px;
    width:180px;
    height:180px;
    opacity:.28;

    background:
    repeating-radial-gradient(circle,
    rgba(32,196,216,.35) 0,
    transparent 6px,
    transparent 14px);
}

/*========================================
TRIANGLE
========================================*/

.bg-triangle{
    position:absolute;
    right:10%;
    bottom:220px;
    width:34px;
    height:34px;
    border:2px solid rgba(32,196,216,.45);
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
}

/*========================================
CROSS
========================================*/

.bg-cross{
    position:absolute;
    left:28%;
    top:18%;
    width:18px;
    height:18px;
    border:2px solid rgba(13,110,253,.40);
    transform:rotate(45deg);
}













/* ====================================================================== BERITA ========================================================= */
/* ================================
   GEOPARK IJEN PAGINATION
================================ */

.geopark-pagination{
    display:flex;
    justify-content:center;
    margin:50px 0;
}

.geopark-pagination .pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    list-style:none;
    margin:0;
    padding:0;
}

.geopark-pagination .pagination li{
    margin:0;
    padding:0;
    list-style:none;
}

/* Hilangkan style bawaan */
.geopark-pagination .pagination li::before,
.geopark-pagination .pagination li::after{
    display:none !important;
    content:none !important;
}

/* Semua tombol */
.geopark-pagination .page-link,
.geopark-pagination .pagination li a,
.geopark-pagination .pagination li span{

    display:flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    border:2px solid #20C4D8;
    border-radius:8px;

    background:#fff;
    color:#20C4D8;

    font-size:15px;
    font-weight:600;
    text-decoration:none;

    transition:.3s ease;
    box-sizing:border-box;
}

/* Hover */
.geopark-pagination .page-link:hover{
    background:#20C4D8;
    color:#fff;
    border-color:#20C4D8;
}

/* Prev & Next sedikit lebih lebar */
.geopark-pagination .page-item:nth-child(2) .page-link,
.geopark-pagination .page-item:nth-last-child(2) .page-link{
    width:72px;
}

/* First & Last tetap kotak */
.geopark-pagination .page-item:first-child .page-link,
.geopark-pagination .page-item:last-child .page-link{
    width:46px;
}

/* Halaman aktif */
.geopark-pagination .page-item.active .page-link{
    background:#20C4D8;
    color:#fff;
    border-color:#20C4D8;
    box-shadow:0 6px 15px rgba(32,196,216,.25);
}

/* Hilangkan indikator bulat */
.geopark-pagination .page-item.active .page-link::after{
    display:none !important;
    content:none !important;
}

/*=========================================
BACKGROUND
=========================================*/

.sidebar-page-container{
    position:relative;
    padding:100px 0;
    background:#ffffff;
    overflow:hidden;
    z-index:1;
}

.sidebar-page-container>*{
    position:relative;
    z-index:2;
}

.sidebar-page-container::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:

    radial-gradient(circle at 8% 12%,
    rgba(32,196,216,.08) 0,
    transparent 180px),

    radial-gradient(circle at 92% 14%,
    rgba(13,110,253,.07) 0,
    transparent 180px),

    radial-gradient(circle at 14% 88%,
    rgba(32,196,216,.05) 0,
    transparent 180px),

    radial-gradient(circle at 88% 84%,
    rgba(13,110,253,.05) 0,
    transparent 180px),

    radial-gradient(circle at 50% 50%,
    rgba(32,196,216,.03) 0,
    transparent 260px);
}

.sidebar-page-container::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.12;

    background-image:
    radial-gradient(rgba(32,196,216,.35) 1px,transparent 1px);

    background-size:36px 36px;
}


/*=========================================
PATTERN
=========================================*/

.bg-ring{
    position:absolute;
    top:80px;
    left:6%;
    width:150px;
    height:150px;
    border:2px dashed rgba(32,196,216,.15);
    border-radius:50%;
}

.bg-ring::after{
    content:"";
    position:absolute;
    inset:18px;
    border:2px solid rgba(32,196,216,.12);
    border-radius:50%;
}

/* Ring */

.bg-ring2{
    position:absolute;
    right:8%;
    top:45%;
    width:100px;
    height:100px;
    border-radius:50%;
    border:2px solid rgba(13,110,253,.12);
}

/* Dot */

.bg-dots{
    position:absolute;
    top:130px;
    right:10%;
    width:100px;
    height:100px;

    background-image:
    radial-gradient(rgba(32,196,216,.45) 1.5px,transparent 1.5px);

    background-size:12px 12px;

    opacity:.40;
}

/* Dot */

.bg-dots2{
    position:absolute;
    left:10%;
    bottom:120px;
    width:90px;
    height:90px;

    background-image:
    radial-gradient(rgba(13,110,253,.35) 1.5px,transparent 1.5px);

    background-size:12px 12px;
}

/* Diamond */

.bg-diamond{
    position:absolute;
    left:22%;
    top:42%;
    width:22px;
    height:22px;
    border:2px solid rgba(32,196,216,.25);
    transform:rotate(45deg);
}

/* Diamond */

.bg-diamond2{
    position:absolute;
    right:18%;
    bottom:100px;
    width:18px;
    height:18px;
    border:2px solid rgba(13,110,253,.22);
    transform:rotate(45deg);
}

/* Plus */

.bg-plus{
    position:absolute;
    right:28%;
    top:30%;
    width:22px;
    height:22px;
}

.bg-plus::before,
.bg-plus::after{
    content:"";
    position:absolute;
    background:rgba(32,196,216,.28);
}

.bg-plus::before{
    width:2px;
    height:22px;
    left:10px;
}

.bg-plus::after{
    width:22px;
    height:2px;
    top:10px;
}

/* Circle */

.bg-circle{
    position:absolute;
    left:45%;
    top:90px;
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px solid rgba(13,110,253,.12);
}

.bg-circle::after{
    content:"";
    position:absolute;
    inset:14px;
    border-radius:50%;
    border:2px dashed rgba(13,110,253,.12);
}

/* Contour */

.bg-contour{
    position:absolute;
    right:26%;
    bottom:80px;
    width:180px;
    height:180px;
    opacity:.16;

    background:
    repeating-radial-gradient(circle,
    rgba(32,196,216,.18) 0,
    transparent 6px,
    transparent 14px);
}

/* Wave */

.bg-wave{
    position:absolute;
    left:40%;
    bottom:70px;
    width:180px;
    height:60px;
    opacity:.20;

    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(13,110,253,.45) 0,
    rgba(13,110,253,.45) 2px,
    transparent 3px,
    transparent 12px);
}

/* Triangle */

.bg-triangle{
    position:absolute;
    right:10%;
    bottom:220px;
    width:36px;
    height:36px;
    border:2px solid rgba(32,196,216,.20);
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
}

/* Cross */

.bg-cross{
    position:absolute;
    left:35%;
    top:25%;
    width:20px;
    height:20px;
    border:2px solid rgba(13,110,253,.18);
    transform:rotate(45deg);
}










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

.actvity-section{
    position:relative;
    padding:90px 0;
    background:#fff;
    overflow:hidden;
    z-index:1;
}

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

/*====================================
BACKGROUND
====================================*/

.actvity-section::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:

    radial-gradient(circle at 8% 15%,
    rgba(32,196,216,.08) 0,
    transparent 170px),

    radial-gradient(circle at 90% 18%,
    rgba(32,196,216,.06) 0,
    transparent 180px),

    radial-gradient(circle at 18% 88%,
    rgba(32,196,216,.06) 0,
    transparent 170px),

    radial-gradient(circle at 82% 82%,
    rgba(32,196,216,.05) 0,
    transparent 180px),

    linear-gradient(
    135deg,
    rgba(32,196,216,.025),
    transparent 40%);
}

/* contour */

.actvity-section::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.12;

    background-image:

    repeating-radial-gradient(circle at 20% 20%,
    rgba(32,196,216,.45) 0,
    rgba(32,196,216,.45) 1px,
    transparent 2px,
    transparent 18px),

    repeating-radial-gradient(circle at 82% 78%,
    rgba(32,196,216,.35) 0,
    rgba(32,196,216,.35) 1px,
    transparent 2px,
    transparent 16px);

    background-size:
    320px 320px,
    260px 260px;

    background-repeat:no-repeat;
}

/*====================================
HEXAGON
====================================*/

.bg-hex{
    position:absolute;
    width:90px;
    height:52px;
    border:2px solid rgba(32,196,216,.35);
    left:6%;
    top:120px;
}

.bg-hex:before,
.bg-hex:after{
    content:'';
    position:absolute;
    width:63px;
    height:63px;
    border-left:2px solid rgba(32,196,216,.35);
    border-top:2px solid rgba(32,196,216,.35);
    transform:rotate(45deg);
    left:11px;
}

.bg-hex:before{
    top:-33px;
}

.bg-hex:after{
    bottom:-33px;
    transform:rotate(225deg);
}

/*====================================
CONTOUR
====================================*/

.bg-contour{
    position:absolute;
    right:-120px;
    top:120px;
    width:360px;
    height:360px;
    border-radius:50%;
    opacity:.18;
    background:
    repeating-radial-gradient(circle,
    rgba(32,196,216,.5) 0,
    transparent 6px,
    transparent 13px);
}

/*====================================
DIAGONAL LINES
====================================*/

.bg-lines{
    position:absolute;
    left:35%;
    bottom:90px;
    width:220px;
    height:120px;
    opacity:.18;
    background:
    repeating-linear-gradient(
    -45deg,
    rgba(32,196,216,.7) 0,
    rgba(32,196,216,.7) 2px,
    transparent 2px,
    transparent 12px);
}

/*====================================
DOT GRID
====================================*/

.bg-dots{
    position:absolute;
    right:8%;
    bottom:90px;
    width:110px;
    height:110px;

    background-image:
    radial-gradient(rgba(32,196,216,.55) 1.5px,transparent 1.5px);

    background-size:12px 12px;
    opacity:.45;
}

/*====================================
DIAMOND
====================================*/

.bg-diamond{
    position:absolute;
    left:22%;
    bottom:180px;
    width:28px;
    height:28px;
    border:2px solid rgba(32,196,216,.45);
    transform:rotate(45deg);
}

/*====================================
WAVE
====================================*/

.bg-wave{
    position:absolute;
    right:25%;
    top:52%;
    width:180px;
    height:45px;
    opacity:.25;

    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(32,196,216,.45) 0,
    rgba(32,196,216,.45) 2px,
    transparent 3px,
    transparent 11px);
}



















/* ============================================================== GEOSITE DETAIL ======================================================== */
/*====================================================
BACKGROUND ONLY
====================================================*/

.geosite-detail-section{
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(0,123,255,.05) 0%, transparent 22%),
        radial-gradient(circle at 85% 80%, rgba(0,180,255,.05) 0%, transparent 25%),
        linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
}

/* Motif titik halus */
.geosite-detail-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(rgba(0,94,184,.08) 1px, transparent 1px);
    background-size:32px 32px;
    opacity:.35;
    pointer-events:none;
}

/* Ornamen lingkaran transparan kiri atas */
.geosite-detail-section .bg-shape-one{
    position:absolute;
    width:320px;
    height:320px;
    top:-120px;
    left:-120px;
    border-radius:50%;
    background:rgba(0,123,255,.04);
    filter:blur(5px);
    pointer-events:none;
}

/* Ornamen lingkaran transparan kanan bawah */
.geosite-detail-section .bg-shape-two{
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    bottom:-180px;
    border-radius:50%;
    background:rgba(0,174,239,.04);
    filter:blur(5px);
    pointer-events:none;
}

/* CARD */
.detail-card{
    position:relative;
    background:#ffffff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 15px 50px rgba(0,0,0,0.08);
    transition:all 0.4s ease;
    border:1px solid rgba(255,255,255,0.7);
}

.detail-card:hover{
    transform:translateY(-5px);
    box-shadow:0 25px 60px rgba(0,0,0,0.12);
}

/* IMAGE */
.detail-image{
    position:relative;
    overflow:hidden;
    height:520px;
}

.detail-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:all 0.6s ease;
}

.detail-card:hover .detail-image img{
    transform:scale(1.06);
}

.image-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.15) 45%,
        rgba(0,0,0,0.05) 100%);
}

/* BADGE */
.floating-badge{
    position:absolute;
    top:25px;
    left:25px;
    background:rgba(255,255,255,0.18);
    backdrop-filter:blur(10px);
    color:#fff;
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    border:1px solid rgba(255,255,255,0.25);
}

.floating-badge i{
    margin-right:6px;
}

/* TITLE OVERLAY */
.title-overlay{
    position:absolute;
    left:40px;
    bottom:35px;
    right:40px;
    z-index:2;
}

.title-overlay h2{
    color:#fff;
    font-size:38px;
    font-weight:800;
    line-height:1.3em;
    margin-bottom:15px;
}

.location-text{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(8px);
    color:#fff;
    padding:12px 20px;
    border-radius:50px;
    font-size:15px;
    border:1px solid rgba(255,255,255,0.2);
}

/* CONTENT */
.detail-content{
    padding:45px;
}

.section-tag{
    margin-bottom:15px;
}

.section-tag span{
    display:inline-block;
    background:linear-gradient(135deg,#0d6efd,#00b4d8);
    color:#fff;
    padding:8px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.5px;
}

.content-header h3{
    font-size:30px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:15px;
}

.title-line{
    width:80px;
    height:4px;
    border-radius:10px;
    background:linear-gradient(90deg,#0d6efd,#00b4d8);
    margin-bottom:30px;
}

/* DESCRIPTION */
.description{
    font-size:16px;
    line-height:2em;
    color:#4b5563;
}

.description p{
    margin-bottom:20px;
}

/* SIDEBAR */
.sidebar-widget{
    position:relative;
    background:#ffffff;
    border-radius:25px;
    padding:35px;
    margin-bottom:30px;
    box-shadow:0 12px 40px rgba(0,0,0,0.08);
    overflow:hidden;
}

/* INFO WIDGET */
.info-widget{
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.widget-header{
    margin-bottom:30px;
}

.widget-header h4{
    font-size:24px;
    font-weight:800;
    color:#0f172a;
    position:relative;
    padding-bottom:15px;
}

.widget-header h4:after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:70px;
    height:4px;
    border-radius:10px;
    background:linear-gradient(90deg,#0d6efd,#00b4d8);
}

.info-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:22px;
    border-radius:20px;
    background:#ffffff;
    margin-bottom:18px;
    transition:all 0.3s ease;
    border:1px solid #eef2f7;
}

.info-item:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.icon-box{
    width:58px;
    height:58px;
    min-width:58px;
    border-radius:18px;
    background:linear-gradient(135deg,#0d6efd,#00b4d8);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
}

.info-content .label{
    display:block;
    color:#6b7280;
    font-size:13px;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.info-content h6{
    font-size:17px;
    font-weight:700;
    color:#111827;
    line-height:1.7em;
    margin:0;
}

/* EXPLORE CARD */
.explore-widget{
    background:linear-gradient(135deg,#0d6efd 0%, #00b4d8 100%);
    color:#fff;
    text-align:center;
}

.explore-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    backdrop-filter:blur(10px);
}

.explore-content h4{
    color:#fff;
    font-size:28px;
    font-weight:800;
    margin-bottom:18px;
}

.explore-content p{
    color:rgba(255,255,255,0.92);
    line-height:1.9em;
    margin:0;
}

.floating-circle{
    position:absolute;
    border-radius:50%;
    background:rgba(0,123,255,.05);
    animation:float 8s ease-in-out infinite;
}

.circle-1{
    width:120px;
    height:120px;
    top:140px;
    right:8%;
}

.circle-2{
    width:70px;
    height:70px;
    left:8%;
    bottom:180px;
    animation-delay:2s;
}

.circle-3{
    width:45px;
    height:45px;
    top:55%;
    right:20%;
    animation-delay:4s;
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-18px);
    }
}

/* RESPONSIVE */
@media only screen and (max-width: 991px){

    .detail-image{
        height:420px;
    }

    .title-overlay h2{
        font-size:30px;
    }

    .sidebar{
        margin-top:40px;
    }

}

@media only screen and (max-width: 767px){

    .geosite-detail-section{
        padding:70px 0;
    }

    .detail-image{
        height:320px;
    }

    .title-overlay{
        left:25px;
        right:25px;
        bottom:25px;
    }

    .title-overlay h2{
        font-size:24px;
    }

    .location-text{
        font-size:13px;
        padding:10px 16px;
    }

    .detail-content{
        padding:30px 25px;
    }

    .sidebar-widget{
        padding:25px;
    }

}

/*==================================================
EXTRA BACKGROUND PATTERN
==================================================*/

/* Ring Besar */
.bg-ring{
    position:absolute;
    top:80px;
    left:5%;
    width:170px;
    height:170px;
    border:2px dashed rgba(13,110,253,.32);
    border-radius:50%;
    z-index:0;
}

.bg-ring::after{
    content:'';
    position:absolute;
    inset:18px;
    border:2px solid rgba(0,180,216,.22);
    border-radius:50%;
}

/* Ring Tengah */
.bg-ring2{
    position:absolute;
    top:42%;
    right:7%;
    width:95px;
    height:95px;
    border:2px solid rgba(0,180,216,.30);
    border-radius:50%;
}

/* Ring Bawah */
.bg-ring3{
    position:absolute;
    bottom:80px;
    left:25%;
    width:65px;
    height:65px;
    border:2px dashed rgba(13,110,253,.28);
    border-radius:50%;
}

/*==================================
DOT PATTERN
==================================*/

.bg-dots,
.bg-dots2,
.bg-dots3{
    position:absolute;
    opacity:.65;
    z-index:0;
}

.bg-dots{
    top:120px;
    right:9%;
    width:95px;
    height:95px;
    background-image:
    radial-gradient(rgba(0,180,216,.80) 1.7px,transparent 1.7px);
    background-size:12px 12px;
}

.bg-dots2{
    left:7%;
    top:50%;
    width:85px;
    height:85px;
    background-image:
    radial-gradient(rgba(13,110,253,.75) 1.6px,transparent 1.6px);
    background-size:11px 11px;
}

.bg-dots3{
    right:18%;
    bottom:100px;
    width:70px;
    height:70px;
    background-image:
    radial-gradient(rgba(0,180,216,.70) 1.5px,transparent 1.5px);
    background-size:10px 10px;
}

/*==================================
DIAMOND
==================================*/

.bg-diamond,
.bg-diamond2,
.bg-diamond3{
    position:absolute;
    transform:rotate(45deg);
    z-index:0;
}

.bg-diamond{
    left:18%;
    top:26%;
    width:20px;
    height:20px;
    border:2px solid rgba(13,110,253,.45);
}

.bg-diamond2{
    right:22%;
    top:24%;
    width:16px;
    height:16px;
    border:2px solid rgba(0,180,216,.45);
}

.bg-diamond3{
    left:48%;
    bottom:110px;
    width:14px;
    height:14px;
    border:2px solid rgba(13,110,253,.40);
}

/*==================================
PLUS
==================================*/

.bg-plus,
.bg-plus2{
    position:absolute;
    width:20px;
    height:20px;
    z-index:0;
}

.bg-plus{
    top:30%;
    right:32%;
}

.bg-plus2{
    left:35%;
    bottom:150px;
}

.bg-plus::before,
.bg-plus::after,
.bg-plus2::before,
.bg-plus2::after{
    content:'';
    position:absolute;
    background:#00b4d8;
}

.bg-plus::before,
.bg-plus2::before{
    width:2px;
    height:20px;
    left:9px;
}

.bg-plus::after,
.bg-plus2::after{
    width:20px;
    height:2px;
    top:9px;
}

/*==================================
CIRCLE
==================================*/

.bg-circle{
    position:absolute;
    left:58%;
    top:100px;
    width:55px;
    height:55px;
    border-radius:50%;
    border:2px solid rgba(13,110,253,.25);
}

.bg-circle2{
    position:absolute;
    left:12%;
    bottom:180px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:2px dashed rgba(0,180,216,.30);
}

/*==================================
WAVE
==================================*/

.bg-wave{
    position:absolute;
    left:42%;
    top:110px;
    width:170px;
    height:55px;
    opacity:.35;
    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(0,180,216,.55) 0,
    rgba(0,180,216,.55) 2px,
    transparent 3px,
    transparent 12px);
}

.bg-wave2{
    position:absolute;
    right:34%;
    bottom:80px;
    width:150px;
    height:45px;
    opacity:.30;
    background:
    repeating-radial-gradient(circle at 0 100%,
    rgba(13,110,253,.50) 0,
    rgba(13,110,253,.50) 2px,
    transparent 3px,
    transparent 10px);
}

/*==================================
CONTOUR
==================================*/

.bg-contour{
    position:absolute;
    right:26%;
    bottom:90px;
    width:180px;
    height:180px;
    opacity:.28;
    background:
    repeating-radial-gradient(circle,
    rgba(0,180,216,.35) 0,
    transparent 6px,
    transparent 14px);
}

/*==================================
TRIANGLE
==================================*/

.bg-triangle{
    position:absolute;
    right:11%;
    bottom:220px;
    width:34px;
    height:34px;
    border:2px solid rgba(13,110,253,.40);
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
}

/*==================================
CROSS
==================================*/

.bg-cross{
    position:absolute;
    left:28%;
    top:18%;
    width:18px;
    height:18px;
    border:2px solid rgba(0,180,216,.40);
    transform:rotate(45deg);
}






















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

.inner-banner{
    position:relative;
    padding:160px 0 110px;
    overflow:hidden;
}

.inner-banner .image-layer{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
}

/* Overlay Tosca */
.inner-banner::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(9,72,72,.88),
            rgba(22,163,154,.65),
            rgba(7,105,105,.72)
        );
}

/* Grid Pattern */
.inner-banner::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.15;
    background-image:
        linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);

    background-size:60px 60px;
}

/* Floating Blur */

.banner-shape-one{
    position:absolute;
    top:40px;
    left:8%;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(34,199,184,.22);
    filter:blur(60px);
    z-index:1;
}

.banner-shape-two{
    position:absolute;
    right:5%;
    bottom:40px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(15,118,110,.18);
    filter:blur(70px);
    z-index:1;
}

/* Dot Pattern */

.banner-dots{
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(rgba(255,255,255,.28) 1.6px,transparent 1.6px);

    background-size:28px 28px;
    opacity:.18;
}
/* =========================
   VIDEO SECTION
========================= */

.video-gallery-section{
    position:relative;
    padding:100px 0;
    background:#ffffff;
    overflow:hidden;
    z-index:1;
}

/* Ornamen Lingkaran Kanan Atas */
.video-gallery-section::before{
    content:'';
    position:absolute;
    top:-180px;
    right:-180px;
    width:480px;
    height:480px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(255,177,0,.10) 0%,
        rgba(255,177,0,.05) 45%,
        rgba(255,177,0,0) 75%);
    z-index:-1;
}

/* Ornamen Lingkaran Kiri Bawah */
.video-gallery-section::after{
    content:'';
    position:absolute;
    left:-150px;
    bottom:-150px;
    width:380px;
    height:380px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(0,176,155,.08) 0%,
        rgba(0,176,155,.04) 50%,
        transparent 75%);
    z-index:-1;
}

/*=====================================================
BACKGROUND PATTERN
=====================================================*/

/* Grid */

.video-gallery-grid{
    position:absolute;
    inset:0;
    z-index:-3;
    pointer-events:none;
    opacity:.45;

    background-image:
        linear-gradient(rgba(34,199,184,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(34,199,184,.05) 1px,transparent 1px);

    background-size:70px 70px;
}

/* Dot Pattern */

.video-gallery-pattern{
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;

    background-image:
        radial-gradient(rgba(34,199,184,.28) 1.5px,transparent 1.5px);

    background-size:28px 28px;
    opacity:.45;
}

/* Ring */

.video-gallery-ring{
    position:absolute;
    top:100px;
    left:6%;
    width:170px;
    height:170px;
    border-radius:50%;
    border:2px dashed rgba(34,199,184,.20);
    z-index:-1;
}

.video-gallery-ring::after{
    content:'';
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:2px solid rgba(34,199,184,.15);
}

/* Ring 2 */

.video-gallery-ring2{
    position:absolute;
    right:8%;
    bottom:120px;
    width:110px;
    height:110px;
    border-radius:50%;
    border:2px dashed rgba(15,118,110,.22);
    z-index:-1;
}

/* Diamond */

.video-gallery-diamond{
    position:absolute;
    top:24%;
    left:18%;
    width:22px;
    height:22px;
    border:2px solid rgba(34,199,184,.35);
    transform:rotate(45deg);
    z-index:-1;
}

.video-gallery-diamond2{
    position:absolute;
    right:20%;
    top:20%;
    width:18px;
    height:18px;
    border:2px solid rgba(15,118,110,.35);
    transform:rotate(45deg);
    z-index:-1;
}

/* Plus */

.video-gallery-plus{
    position:absolute;
    top:18%;
    left:45%;
    width:22px;
    height:22px;
    z-index:-1;
}

.video-gallery-plus::before,
.video-gallery-plus::after{
    content:'';
    position:absolute;
    background:#22c7b8;
}

.video-gallery-plus::before{
    width:2px;
    height:22px;
    left:10px;
}

.video-gallery-plus::after{
    width:22px;
    height:2px;
    top:10px;
}

/* Circle */

.video-gallery-circle{
    position:absolute;
    right:28%;
    top:100px;
    width:60px;
    height:60px;
    border-radius:50%;
    border:2px solid rgba(34,199,184,.18);
    z-index:-1;
}

.video-gallery-circle2{
    position:absolute;
    left:10%;
    bottom:180px;
    width:45px;
    height:45px;
    border-radius:50%;
    border:2px dashed rgba(15,118,110,.20);
    z-index:-1;
}

/* Blur */

.bg-shape-one{
    position:absolute;
    top:120px;
    left:6%;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(34,199,184,.08);
    filter:blur(50px);
    z-index:-1;
}

.bg-shape-two{
    position:absolute;
    right:8%;
    top:40%;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(22,163,154,.08);
    filter:blur(60px);
    z-index:-1;
}

.bg-shape-three{
    position:absolute;
    bottom:60px;
    left:40%;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(15,118,110,.06);
    filter:blur(50px);
    z-index:-1;
}

/* Pattern Dot */
.video-gallery-pattern{
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:
        radial-gradient(rgba(255,177,0,.10) 1px, transparent 1px),
        radial-gradient(rgba(0,176,155,.08) 1px, transparent 1px);
    background-size:34px 34px,52px 52px;
    background-position:0 0,26px 26px;
    opacity:.9;
}

/* Pattern Grid Tipis */
.video-gallery-grid{
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px);
    background-size:80px 80px;
    opacity:.7;
}

/* Shape Blur Atas */
.bg-shape-one{
    position:absolute;
    top:120px;
    left:8%;
    width:170px;
    height:170px;
    border-radius:50%;
    background:rgba(255,177,0,.08);
    filter:blur(45px);
    z-index:-1;
}

/* Shape Blur Tengah */
.bg-shape-two{
    position:absolute;
    right:10%;
    top:45%;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(0,176,155,.08);
    filter:blur(60px);
    z-index:-1;
}

/* Shape Blur Bawah */
.bg-shape-three{
    position:absolute;
    bottom:70px;
    left:40%;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,145,0,.06);
    filter:blur(50px);
    z-index:-1;
}

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

.section-header .subtitle{
    display:inline-block;
    padding:8px 18px;
    background:rgba(255, 174, 0, 0.12);
    color:#d88b00;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
}

.section-header h2{
    font-size:42px;
    font-weight:800;
    color:#111827;
    margin-bottom:15px;
}

.section-header p{
    max-width:700px;
    margin:auto;
    color:#6b7280;
    line-height:1.8;
    font-size:16px;
}

/* =========================
   VIDEO CARD
========================= */
.video-card{
    position:relative;
    border-radius:24px;
    overflow:hidden;
    background:#fff;
    margin-bottom:30px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:all .4s ease;
}

.video-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 45px rgba(0,0,0,0.14);
}

.video-thumb{
    position:relative;
    overflow:hidden;
}

.video-thumb img{
    width:100%;
    height:270px;
    object-fit:cover;
    transition:transform .6s ease;
}

.video-card:hover .video-thumb img{
    transform:scale(1.08);
}

.video-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.1)
    );
}

.play-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:78px;
    height:78px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(34,199,184,.20);
    backdrop-filter:blur(10px);
    border:2px solid rgba(255,255,255,.35);
    transition:.35s;
    z-index:3;
}

.play-btn i{
    color:#fff;
    font-size:26px;
}

/*=========================================
PLAY BUTTON TOSCA
=========================================*/

.play-btn{
    background:rgba(34,199,184,.20) !important;
    border:2px solid rgba(255,255,255,.35);
}

.play-btn i{
    color:#fff !important;
}

.video-card:hover .play-btn,
.play-btn:hover,
.play-btn:focus{
    background:linear-gradient(135deg,#22c7b8,#159b9b) !important;
    border-color:#22c7b8 !important;
    transform:translate(-50%,-50%) scale(1.08);
    box-shadow:0 15px 35px rgba(34,199,184,.40);
}

.video-card:hover .play-btn i,
.play-btn:hover i{
    color:#fff !important;
}

.video-card:hover .play-btn{
    background:linear-gradient(135deg,#22c7b8,#0f766e);
    transform:translate(-50%,-50%) scale(1.08);
    box-shadow:0 15px 35px rgba(34,199,184,.35);
}

.video-card:hover .play-btn{
    background:#ffb100;
    transform:translate(-50%, -50%) scale(1.08);
}

.video-content{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:25px;
    z-index:3;
}

.video-title{
    color:#fff;
    font-size:20px;
    font-weight:700;
    line-height:1.5;
    margin:0;
}

/* =========================
   LOAD MORE
========================= */
.load-more-wrap{
    margin-top:25px;
    text-align:center;
}

.btn-load{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 36px;
    border:none;
    border-radius:60px;
    background:linear-gradient(135deg,#22c7b8,#159b9b);
    color:#fff;
    font-size:15px;
    font-weight:700;
    transition:.35s;
    box-shadow:0 12px 30px rgba(34,199,184,.30);
}

.btn-load:hover{
    color:#fff;
    transform:translateY(-4px);
    background:linear-gradient(135deg,#2dd4bf,#0f766e);
    box-shadow:0 18px 40px rgba(34,199,184,.40);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:991px){

    .inner-banner{
        padding:130px 0 90px;
    }

    .inner-banner h2{
        font-size:42px;
    }

    .section-header h2{
        font-size:34px;
    }

    .video-thumb img{
        height:240px;
    }
}

@media (max-width:767px){

    .video-gallery-section{
        padding:80px 0;
    }

    .inner-banner h2{
        font-size:34px;
    }

    .section-header h2{
        font-size:28px;
    }

    .video-thumb img{
        height:220px;
    }

    .video-title{
        font-size:18px;
    }

    .play-btn{
        width:68px;
        height:68px;
    }
}







/*============================================================== PETA ==========================================================*/
/* ===========================
   MAP SECTION
=========================== */

.geopark-map-section{
    width:100%;
    padding:0;
    position:relative;
    z-index:1;
}

.map-layout{
    display:flex;
    width:100%;
    height:80vh;
    min-height:600px;
}

#map{
    flex:1;
    height:100%;
}

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

#map-sidebar{
    width:360px;
    background:#fff;
    border-left:1px solid #e5e5e5;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

/* Header tetap */
.sidebar-header h3{
    margin:0 0 18px;
    padding-bottom:10px;
    font-size:20px;
    font-weight:700;
    color:#222;
    border-bottom:2px solid #d93b3b;
}

.sidebar-header h3{
    margin:0 0 15px;
    font-size:20px;
    font-weight:700;
}

/* List yang discroll */
#geositeList{
    flex:1;
    overflow-y:auto;
    padding:18px;
}

/* Scrollbar */
#geositeList::-webkit-scrollbar{
    width:8px;
}

#geositeList::-webkit-scrollbar-thumb{
    background:#1aa6a0;
    border-radius:20px;
}

#geositeList::-webkit-scrollbar-track{
    background:#f4f4f4;
}

.geosite-item{
    padding:8px 6px;
    border-bottom:1px solid #eee;
    cursor:pointer;
    font-size:13px;
    transition:.3s;
}

.geosite-item:hover{
    background:#fbe9e7;
}

/* ===========================
   HEADER
=========================== */

.main-header,
.header-style-one,
.header-upper,
.sticky-header,
.sticky-header.fixed-header{
    position:relative;
    z-index:9999!important;
}

/* ===========================
   LEAFLET
=========================== */

.leaflet-top,
.leaflet-bottom,
.leaflet-control{
    z-index:500!important;
}

/*=========================================
  LEGENDA MODERN
=========================================*/

.leaflet-legend{

    width:240px;
    background:#ffffff;
    border-radius:18px;
    overflow:hidden;

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

    border:1px solid rgba(0,0,0,.06);

    font-family:inherit;

}

.legend-header{

    background:linear-gradient(135deg,#00b4d8,#0077b6);

    color:#fff;

    padding:14px 18px;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    font-weight:600;

}

.legend-header i{

    font-size:18px;

}

.legend-body{

    padding:14px;

}

.legend-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:12px;

    margin-bottom:10px;

    border-radius:12px;

    background:#f8fbfd;

    transition:.3s;

    cursor:pointer;

    border:1px solid #eef2f5;

}

.legend-card:last-child{

    margin-bottom:0;

}

.legend-card:hover{

    transform:translateX(5px);

    background:#ffffff;

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

}

.legend-info{

    flex:1;

    margin-left:12px;

}

.legend-info strong{

    display:block;

    font-size:14px;

    color:#222;

}

.legend-info small{

    color:#7b8794;

    font-size:12px;

}

.legend-dot{

    width:18px;

    height:18px;

    border-radius:50%;

    border:4px solid #fff;

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

}

.legend-dot.geo{

    background:#e53935;

}

.legend-dot.bio{

    background:#43a047;

}

.legend-dot.culture{

    background:#fb8c00;

}

.legend-item{
    display:flex;
    align-items:center;
    margin-bottom:5px;
}

.legend-color{
    width:14px;
    height:14px;
    border-radius:4px;
    margin-right:8px;
}

.geo{
    background:#e53935;
}

.bio{
    background:#43a047;
}

.culture{
    background:#fb8c00;
}

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

@media(max-width:992px){

    .map-layout{
        flex-direction:column;
        height:auto;
    }

    #map{
        height:60vh;
    }

    #map-sidebar{
        width:100%;
        border-left:none;
        border-top:1px solid #ddd;
    }

}

.legend-card{

    display:flex;
    align-items:center;
    gap:12px;

    padding:10px 12px;

    margin-bottom:10px;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

    border:1px solid #edf2f7;

    background:#fff;

}

.legend-card:hover{

    background:#f8fbfd;

}

.legend-card input{

    width:18px;
    height:18px;

    accent-color:#00a8cc;

    cursor:pointer;

}

.legend-info{

    flex:1;

}

.legend-dot{

    width:16px;
    height:16px;
    border-radius:50%;

}

.legend-dot.geo{

    background:#e53935;

}

.legend-dot.bio{

    background:#43a047;

}

.legend-dot.culture{

    background:#fb8c00;

}

.sidebar-search{
    position:relative;
    margin:15px 0 20px;
}

.sidebar-search i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#999;
    font-size:14px;
}

.sidebar-search input{
    width:100%;
    height:44px;
    border:1px solid #ddd;
    border-radius:30px;
    padding:0 18px 0 42px;
    font-size:14px;
    transition:.3s;
    background:#fff;
}

.sidebar-search input:focus{
    outline:none;
    border-color:#1aa6a0;
    box-shadow:0 0 0 3px rgba(26,166,160,.15);
}

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

.geosite-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 15px;
    margin-bottom:10px;
    border-radius:12px;
    background:#fff;
    border:1px solid #e8e8e8;
    cursor:pointer;
    transition:.3s;
}

.geosite-item:hover{
    transform:translateX(5px);
    border-color:#16a085;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.geosite-icon{
    width:14px;
    height:14px;
    border-radius:50%;
    flex-shrink:0;
    margin-top:3px;
}

.geosite-content{
    flex:1;
}

.geosite-content strong{
    display:block;
    font-size:14px;
    color:#222;
    margin-bottom:3px;
}

.geosite-content small{
    color:#777;
    text-transform:capitalize;
    font-size:12px;
}

.geosite-icon.geo{
    background:#e53935;
}

.geosite-icon.bio{
    background:#43a047;
}

.geosite-icon.culture{
    background:#fb8c00;
}


















/*================================================ KONTAK ================================================*/
.alert{
    padding:16px 20px;
    border-radius:12px;
    margin-bottom:25px;
    font-size:15px;
}

.alert-success{
    background:#e8f9ee;
    color:#157347;
    border:1px solid #b7ebc6;
}

.alert-danger{
    background:#fff1f0;
    color:#b42318;
    border:1px solid #f5c2c7;
}

.field-inner input,
.field-inner textarea{
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:14px 18px;
    transition:.3s;
    font-size:15px;
}

.field-inner input:focus,
.field-inner textarea:focus{
    border-color:#0d6efd;
    box-shadow:0 0 0 4px rgba(13,110,253,.12);
}

.btn-style-two{
    border:none;
    border-radius:14px;
    overflow:hidden;
}
/*=====================================
BACKGROUND PATTERN
=====================================*/

.contact-section,
.contact-page-section,
.contact-form-section,
.contact-info-section,
.auto-container{
    position:relative;
}

/* Grid Halus */

.contact-section::before,
.contact-page-section::before,
.contact-form-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.35;

    background-image:
        linear-gradient(rgba(34,199,184,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(34,199,184,.05) 1px,transparent 1px);

    background-size:60px 60px;
}

/* Dot Pattern */

.contact-section::after,
.contact-page-section::after,
.contact-form-section::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.40;

    background-image:
        radial-gradient(rgba(34,199,184,.22) 1.5px,transparent 1.5px);

    background-size:28px 28px;
}

/* Ornamen Ring */

.bg-ring{
    position:absolute;
    top:70px;
    left:5%;
    width:180px;
    height:180px;
    border-radius:50%;
    border:2px dashed rgba(34,199,184,.18);
    z-index:0;
}

.bg-ring::after{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:2px solid rgba(34,199,184,.12);
}

/* Ring Kanan */

.bg-ring2{
    position:absolute;
    right:8%;
    bottom:90px;
    width:120px;
    height:120px;
    border-radius:50%;
    border:2px dashed rgba(15,118,110,.20);
    z-index:0;
}

/* Diamond */

.bg-diamond{
    position:absolute;
    left:18%;
    top:28%;
    width:20px;
    height:20px;
    border:2px solid rgba(34,199,184,.30);
    transform:rotate(45deg);
    z-index:0;
}

.bg-diamond2{
    position:absolute;
    right:20%;
    top:18%;
    width:16px;
    height:16px;
    border:2px solid rgba(15,118,110,.30);
    transform:rotate(45deg);
    z-index:0;
}

/* Plus */

.bg-plus{
    position:absolute;
    left:40%;
    top:18%;
    width:20px;
    height:20px;
    z-index:0;
}

.bg-plus::before,
.bg-plus::after{
    content:"";
    position:absolute;
    background:#22c7b8;
}

.bg-plus::before{
    width:2px;
    height:20px;
    left:9px;
}

.bg-plus::after{
    width:20px;
    height:2px;
    top:9px;
}

/* Circle */

.bg-circle{
    position:absolute;
    right:28%;
    top:90px;
    width:60px;
    height:60px;
    border-radius:50%;
    border:2px solid rgba(34,199,184,.18);
    z-index:0;
}

.bg-circle2{
    position:absolute;
    left:12%;
    bottom:160px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:2px dashed rgba(15,118,110,.20);
    z-index:0;
}

/* Blur */

.bg-blob{
    position:absolute;
    left:-120px;
    top:35%;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(34,199,184,.08),
        transparent 70%);
    filter:blur(10px);
    z-index:0;
}

.bg-blob2{
    position:absolute;
    right:-120px;
    bottom:18%;
    width:280px;
    height:280px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(15,118,110,.08),
        transparent 70%);
    filter:blur(12px);
    z-index:0;
}

/* Konten tetap di atas pattern */

.contact-section .auto-container,
.contact-page-section .auto-container,
.contact-form-section .auto-container{
    position:relative;
    z-index:2;
}