/* ==========================================================
   MI DARURRAHMAN WEBSITE
   STYLE.CSS
   Base Style / Reset / Typography / Utilities
========================================================== */

/* ===============================
   GOOGLE FONT
================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Fraunces:wght@600;700&display=swap');

/* ===============================
   CSS VARIABLES
================================= */
:root{

    --primary:#166534;
    --primary-dark:#14532d;
    --secondary:#F59E0B;
    --secondary-light:#FBBF24;

    --success:#22C55E;
    --danger:#EF4444;
    --info:#0EA5E9;

    --white:#ffffff;
    --black:#111827;

    --gray-50:#F9FAFB;
    --gray-100:#F3F4F6;
    --gray-200:#E5E7EB;
    --gray-300:#D1D5DB;
    --gray-500:#6B7280;
    --gray-700:#374151;
    --gray-900:#111827;

    --section:#FFF8ED;

    --radius:18px;
    --radius-lg:28px;

    --shadow-sm:0 5px 15px rgba(0,0,0,.05);
    --shadow:0 15px 40px rgba(0,0,0,.08);
    --shadow-lg:0 30px 60px rgba(0,0,0,.15);

    --transition:.35s ease;

    --container:1280px;

}

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

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'DM Sans',sans-serif;
    font-size:16px;
    line-height:1.7;
    color:var(--gray-700);
    background:#fff;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    color:inherit;
    text-decoration:none;
    transition:var(--transition);

}

button{

    cursor:pointer;
    border:none;
    outline:none;
    font-family:inherit;

}

ul{

    list-style:none;

}

section{

    position:relative;
    overflow:hidden;

}

/* ===============================
   TYPOGRAPHY
================================= */

h1,
h2,
h3,
h4,
h5{

    font-family:'Fraunces',serif;
    color:var(--primary-dark);
    line-height:1.2;

}

h1{

    font-size:clamp(2.6rem,6vw,4.8rem);

}

h2{

    font-size:clamp(2rem,5vw,3.5rem);

}

h3{

    font-size:1.6rem;

}

p{

    color:var(--gray-500);

}

/* ===============================
   CONTAINER
================================= */

.container{

    width:min(100% - 40px,var(--container));
    margin-inline:auto;

}

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

.section{

    padding:100px 0;

}

.section-sm{

    padding:70px 0;

}

.bg-light{

    background:var(--section);

}

/* ===============================
   BADGE
================================= */

.badge{

    display:inline-flex;
    align-items:center;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(245,158,11,.12);

    color:var(--secondary);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.75rem;

}

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

.btn{

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

    gap:10px;

    padding:15px 34px;

    border-radius:60px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--secondary);
    color:var(--black);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

.btn-outline{

    border:2px solid #fff;

    color:#fff;

}

.btn-outline:hover{

    background:#fff;

    color:var(--primary);

}

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

.card{

    background:#fff;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

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

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

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

.text-center{

    text-align:center;

}

.text-white{

    color:#fff !important;

}

/* ===============================
   SHADOW
================================= */

.shadow{

    box-shadow:var(--shadow);

}

/* ===============================
   RADIUS
================================= */

.rounded{

    border-radius:var(--radius);

}

.rounded-lg{

    border-radius:var(--radius-lg);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ECECEC;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

/* ===============================
   SELECTION
================================= */

::selection{

    background:var(--secondary);

    color:#fff;

}

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

.fade-up{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

    .section{

        padding:80px 0;

    }

}

@media(max-width:768px){

    body{

        font-size:15px;

    }

    .container{

        width:min(100% - 30px,var(--container));

    }

}

@media(max-width:576px){

    .section{

        padding:60px 0;

    }

    h1{

        line-height:1.25;

    }

}
/* ==========================================================
   HEADER & NAVBAR
========================================================== */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:.35s ease;
    border-bottom:1px solid rgba(0,0,0,.05);
}

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

header nav a{
    position:relative;
    font-weight:600;
    color:var(--gray-700);
    transition:.3s;
}

header nav a:hover{
    color:var(--primary);
}

header nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:3px;

    background:var(--secondary);

    border-radius:100px;

    transition:.35s;

}

header nav a:hover::after{

    width:100%;

}


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

header img{

    transition:.35s;

}

header.scrolled img{

    transform:scale(.9);

}


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

#beranda{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}

#beranda img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.05);

}

#beranda::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(9,36,18,.82),
        rgba(16,72,38,.55),
        rgba(0,0,0,.30)
    );

    z-index:1;

}

#beranda .relative{

    position:relative;

    z-index:3;

}


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

#beranda h1{

    color:#fff;

    font-weight:700;

    max-width:900px;

    margin-top:25px;

}

#beranda p{

    color:rgba(255,255,255,.92);

    max-width:760px;

    margin-top:30px;

    font-size:1.15rem;

    line-height:2;

}

#beranda span{

    letter-spacing:3px;

}


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

#beranda .btn-primary{

    background:var(--secondary);

    color:#111;

    box-shadow:0 15px 35px rgba(245,158,11,.25);

}

#beranda .btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(245,158,11,.35);

}

#beranda .btn-outline{

    background:transparent;

    border:2px solid rgba(255,255,255,.6);

}

#beranda .btn-outline:hover{

    background:#fff;

    color:var(--primary);

}


/* ==========================================================
   HERO IMAGE ANIMATION
========================================================== */

#beranda img{

    animation:zoomHero 18s linear infinite alternate;

}

@keyframes zoomHero{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.12);

    }

}


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

#beranda h1{

    animation:fadeHero .8s ease forwards;

}

#beranda p{

    animation:fadeHero 1.2s ease forwards;

}

#beranda .btn{

    animation:fadeHero 1.5s ease forwards;

}

@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-indicator{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    z-index:5;

}

.scroll-indicator span{

    display:block;

    width:28px;

    height:48px;

    border:2px solid rgba(255,255,255,.7);

    border-radius:50px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    width:6px;

    height:6px;

    border-radius:50%;

    background:#fff;

    animation:scrollDown 1.8s infinite;

}

@keyframes scrollDown{

    0%{

        opacity:1;
        top:8px;

    }

    100%{

        opacity:0;
        top:28px;

    }

}


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

.mobile-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:320px;

    height:100vh;

    background:#fff;

    z-index:9999;

    transition:.4s;

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

    padding:100px 35px;

}

.mobile-menu.active{

    right:0;

}

.mobile-menu a{

    display:block;

    padding:16px 0;

    border-bottom:1px solid #eee;

    font-weight:600;

}


/* ==========================================================
   HAMBURGER
========================================================== */

.menu-toggle{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:28px;

}


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

@media(max-width:992px){

    header nav{

        display:none;

    }

    #beranda{

        text-align:center;

    }

    #beranda h1{

        font-size:2.8rem;

        margin-inline:auto;

    }

    #beranda p{

        margin-inline:auto;

    }

}

@media(max-width:768px){

    #beranda{

        min-height:90vh;

    }

    #beranda h1{

        font-size:2.2rem;

        line-height:1.3;

    }

    #beranda p{

        font-size:1rem;

        line-height:1.8;

    }

}

@media(max-width:576px){

    #beranda{

        padding-top:90px;

    }

    #beranda h1{

        font-size:1.9rem;

    }

}
/* ==========================================================
   TENTANG KAMI
========================================================== */

#tentang{
    background:#FFF9F1;
}

#tentang .grid{
    align-items:center;
    gap:5rem;
}

#tentang img{
    width:100%;
    border-radius:32px;
    object-fit:cover;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
    transition:.5s ease;
}

#tentang img:hover{
    transform:scale(1.03);
}

#tentang h2{
    margin-top:15px;
    margin-bottom:25px;
}

#tentang p{
    font-size:1.05rem;
    line-height:2;
    margin-bottom:20px;
}

#tentang .bg-green-50{
    border-left:5px solid var(--secondary);
    transition:.35s;
}

#tentang .bg-green-50:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
}

#tentang .grid.grid-cols-3{
    margin-top:45px;
}

#tentang .grid.grid-cols-3 h3{
    font-size:2.5rem;
    color:var(--primary);
}

#tentang .grid.grid-cols-3 p{
    margin-top:10px;
    font-size:.9rem;
}


/* ==========================================================
   VISI
========================================================== */

#visi-misi{
    position:relative;
    overflow:hidden;
}

#visi-misi::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

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

    border-radius:50%;

    top:-220px;
    right:-180px;

}

#visi-misi img{

    width:100%;

    border-radius:30px;

    box-shadow:var(--shadow-lg);

}

#visi-misi blockquote{

    font-size:1.35rem;

    line-height:2;

    color:#fff;

    border-left:5px solid var(--secondary);

}

#visi-misi .grid.grid-cols-2{

    margin-top:45px;

    gap:18px;

}

#visi-misi .grid.grid-cols-2 div{

    border-radius:18px;

    transition:.35s;

}

#visi-misi .grid.grid-cols-2 div:hover{

    transform:translateY(-6px);

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

}


/* ==========================================================
   MISI
========================================================== */

#visi-misi + section{

    background:#FFF8ED;

}

#visi-misi + section article{

    border-radius:28px;

    transition:.35s;

    box-shadow:var(--shadow-sm);

}

#visi-misi + section article:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

#visi-misi + section article div:first-child{

    transition:.35s;

}

#visi-misi + section article:hover div:first-child{

    transform:rotate(8deg) scale(1.08);

}

#visi-misi + section h3{

    margin-top:15px;
}

#visi-misi + section p{

    line-height:2;

}


/* ==========================================================
   TUJUAN
========================================================== */

#tujuan{

    background:#fff;

}

#tujuan article{

    background:#fff;

    border-radius:30px;

    transition:.4s;

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

}

#tujuan article:hover{

    transform:translateY(-10px);

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

}

#tujuan article .w-16{

    transition:.35s;

}

#tujuan article:hover .w-16{

    transform:rotate(10deg) scale(1.15);

}

#tujuan article h3{

    margin-top:22px;

    margin-bottom:15px;

}

#tujuan article p{

    line-height:2;

}

#tujuan .bg-gradient-to-r{

    overflow:hidden;

    position:relative;

}

#tujuan .bg-gradient-to-r::before{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

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

    top:-100px;
    right:-100px;

}

#tujuan .grid.grid-cols-2{

    gap:18px;

}

#tujuan .grid.grid-cols-2>div{

    border-radius:20px;

    transition:.35s;

}

#tujuan .grid.grid-cols-2>div:hover{

    transform:translateY(-6px);

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

}

/* ==========================================================
   STRUKTUR ORGANISASI LEMBAGA
   MI DARURRAHMAN
========================================================== */

.organization-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbf8 52%,
            #fffaf1 100%
        );
}


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

.organization-section::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    top: -200px;
    left: -180px;

    border-radius: 50%;

    background: rgba(22, 101, 52, 0.045);

    pointer-events: none;
}

.organization-section::after {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    right: -150px;
    bottom: -170px;

    border-radius: 50%;

    background: rgba(245, 158, 11, 0.055);

    pointer-events: none;
}


/* ==========================================================
   HEADING
========================================================== */

.organization-heading {
    position: relative;
    z-index: 2;

    max-width: 780px;

    margin: 0 auto 70px;

    text-align: center;
}

.organization-heading .section-label {
    display: inline-block;

    padding: 8px 18px;

    margin-bottom: 16px;

    border-radius: 50px;

    background: rgba(22, 101, 52, 0.08);

    color: var(--primary);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.organization-heading h2 {
    margin-bottom: 18px;
}

.organization-heading p {
    max-width: 680px;

    margin: auto;

    line-height: 1.8;
}


/* ==========================================================
   CHART
========================================================== */

.organization-chart {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1180px;

    margin: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ==========================================================
   NODE
========================================================== */

.organization-node {
    position: relative;

    width: 100%;

    display: flex;
    justify-content: center;
}


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

.organization-card {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 24px;

    background: #ffffff;

    border: 1px solid rgba(22, 101, 52, 0.10);

    border-radius: 24px;

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

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.organization-card:hover {
    transform: translateY(-7px);

    border-color: rgba(245, 158, 11, 0.40);

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.11);
}


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

.organization-info {
    min-width: 0;
}

.organization-role {
    display: block;

    margin-bottom: 7px;

    color: var(--secondary);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}

.organization-info h3 {
    margin: 0;

    color: var(--primary-dark);

    font-size: 1.12rem;

    line-height: 1.4;
}

.organization-info p {
    margin: 6px 0 0;

    font-size: 0.88rem;
}


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

.organization-icon {
    flex: 0 0 62px;

    width: 62px;
    height: 62px;

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

    border-radius: 18px;

    background: rgba(22, 101, 52, 0.08);

    font-size: 26px;

    transition: 0.35s ease;
}

.organization-card:hover .organization-icon {
    transform: scale(1.08) rotate(5deg);

    background: rgba(245, 158, 11, 0.14);
}


/* ==========================================================
   KETUA YAYASAN
========================================================== */

.organization-foundation {
    width: min(100%, 470px);

    justify-content: center;

    text-align: center;

    border-top: 4px solid var(--secondary);

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fffdf7
        );
}

.organization-foundation .organization-icon {
    background: rgba(245, 158, 11, 0.13);
}


/* ==========================================================
   KEPALA SEKOLAH
========================================================== */

.organization-principal {
    width: min(100%, 620px);
}

.organization-card-principal {
    padding: 28px;

    border: 2px solid rgba(22, 101, 52, 0.13);

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f7fcf8
        );
}


/* ==========================================================
   FOTO KEPSEK
========================================================== */

.principal-photo {
    flex: 0 0 125px;

    width: 125px;
    height: 125px;

    padding: 4px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--secondary),
            var(--primary)
        );

    box-shadow:
        0 12px 30px rgba(22, 101, 52, 0.16);

    overflow: hidden;
}

.principal-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    border: 4px solid #ffffff;

    opacity: 1 !important;

    visibility: visible !important;
}


/* ==========================================================
   CONNECTOR
========================================================== */

.organization-line {
    position: relative;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            var(--primary),
            var(--secondary)
        );
}

.organization-line-down {
    height: 55px;
}

.organization-line-down::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 9px;
    height: 9px;

    transform:
        translate(-50%, 50%);

    border-radius: 50%;

    background: var(--secondary);

    box-shadow:
        0 0 0 5px rgba(245, 158, 11, 0.10);
}


/* ==========================================================
   WAKIL
========================================================== */

.organization-branch-wakil {
    position: relative;

    width: min(100%, 850px);

    display: grid;

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

    gap: 28px;
}

.organization-branch-wakil::before {
    content: "";

    position: absolute;

    top: -28px;

    left: 25%;
    right: 25%;

    height: 3px;

    background: var(--primary);
}

.organization-branch-wakil
.organization-node::before {
    content: "";

    position: absolute;

    top: -28px;
    left: 50%;

    width: 3px;
    height: 28px;

    transform: translateX(-50%);

    background: var(--primary);
}


/* ==========================================================
   BIDANG
========================================================== */

.organization-branch-fields {
    position: relative;

    width: 100%;

    display: grid;

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

    gap: 20px;
}

.organization-branch-fields::before {
    content: "";

    position: absolute;

    top: -28px;

    left: 12.5%;
    right: 12.5%;

    height: 3px;

    background: var(--primary);
}

.organization-branch-fields
.organization-node::before {
    content: "";

    position: absolute;

    top: -28px;
    left: 50%;

    width: 3px;
    height: 28px;

    transform: translateX(-50%);

    background: var(--primary);
}


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

.organization-card-field {
    height: 100%;

    align-items: flex-start;

    flex-direction: column;

    padding: 26px;
}

.organization-card-field .organization-info {
    width: 100%;
}


/* ==========================================================
   MEMBERS
========================================================== */

.organization-members {
    width: 100%;

    margin: 15px 0 0;
    padding: 0;

    list-style: none;
}

.organization-members li {
    position: relative;

    padding: 9px 0 9px 19px;

    color: var(--gray-500);

    font-size: 0.84rem;

    line-height: 1.55;

    border-bottom:
        1px solid rgba(22, 101, 52, 0.08);
}

.organization-members li:last-child {
    border-bottom: 0;
}

.organization-members li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 16px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--secondary);
}


/* ==========================================================
   ANIMATION
   TIDAK MENGGUNAKAN .reveal
========================================================== */

.org-animate {
    opacity: 1;

    animation:
        organizationFadeUp 0.75s ease both;
}

.org-animate:nth-child(1) {
    animation-delay: 0.05s;
}

.org-animate:nth-child(2) {
    animation-delay: 0.15s;
}

.organization-principal {
    animation-delay: 0.15s;
}

@keyframes organizationFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 992px) {

    .organization-section {
        padding: 90px 0;
    }

    .organization-branch-fields {
        grid-template-columns: repeat(2, 1fr);
    }

    .organization-branch-fields::before {
        left: 25%;
        right: 25%;
    }

}


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

@media (max-width: 768px) {

    .organization-section {
        padding: 75px 0;
    }

    .organization-heading {
        margin-bottom: 50px;
    }

    .organization-branch-wakil {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .organization-branch-wakil::before {
        display: none;
    }

    .organization-branch-wakil
    .organization-node::before {
        display: none;
    }

    .organization-branch-fields {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .organization-branch-fields::before {
        display: none;
    }

    .organization-branch-fields
    .organization-node::before {
        display: none;
    }

    .organization-line-down {
        height: 35px;
    }

}


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

@media (max-width: 576px) {

    .organization-heading h2 {
        font-size: 1.7rem;
    }

    .organization-heading p {
        font-size: 0.9rem;
    }

    .organization-card {
        padding: 19px;

        gap: 15px;

        border-radius: 20px;
    }

    .organization-icon {
        flex-basis: 52px;

        width: 52px;
        height: 52px;

        border-radius: 15px;

        font-size: 21px;
    }

    .organization-card-principal {
        padding: 20px;
    }

    .principal-photo {
        flex-basis: 90px;

        width: 90px;
        height: 90px;
    }

    .organization-info h3 {
        font-size: 1rem;
    }

    .organization-role {
        font-size: 0.61rem;

        letter-spacing: 1.2px;
    }

}

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

section span.uppercase{

    display:inline-block;

    letter-spacing:4px;

    font-size:.85rem;

    font-weight:700;

}

section h2{

    margin-top:15px;

}

section p{

    line-height:1.9;

}


/* ==========================================================
   DECORATION
========================================================== */

.corner-decoration{

    position:absolute;

    width:70px;

    height:70px;

    border-top:5px solid var(--secondary);

    border-left:5px solid var(--secondary);

    border-radius:12px;

}


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

@media(max-width:992px){

    #tentang .grid,
    #visi-misi .grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    #tentang{

        text-align:center;

    }

    #tentang .grid.grid-cols-3{

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

    }

}

@media(max-width:768px){

    #tentang .grid.grid-cols-3{

        grid-template-columns:1fr;

        gap:30px;

    }

    #visi-misi blockquote{

        font-size:1.1rem;

    }

    #tujuan .grid.grid-cols-2{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    #tentang img,
    #visi-misi img{

        border-radius:20px;

    }

    #tujuan article{

        padding:28px;

    }

}
/* ==========================================================
   NILAI IKHLAS
========================================================== */

#nilai{
    position:relative;
    background:#F8F4EA;
    overflow:hidden;
}

#nilai::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(22,101,52,.05);
    top:-180px;
    left:-150px;
}

#nilai::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(245,158,11,.08);
    bottom:-150px;
    right:-120px;
}

#nilai .text-6xl,
#nilai .text-8xl{
    user-select:none;
}

#nilai article{

    position:relative;

    background:#fff;

    border-radius:30px;

    padding:35px;

    overflow:hidden;

    transition:.4s;

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

}

#nilai article::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        var(--primary)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

#nilai article:hover::before{

    transform:scaleX(1);

}

#nilai article:hover{

    transform:translateY(-12px);

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

}

#nilai article .w-14{

    transition:.35s;

}

#nilai article:hover .w-14{

    transform:rotate(15deg) scale(1.15);

}

#nilai article h3{

    transition:.35s;

}

#nilai article:hover h3{

    color:var(--secondary);

}

#nilai article p{

    margin-top:18px;

    line-height:1.9;

}

#nilai .bg-green-900{

    position:relative;

    overflow:hidden;

}

#nilai .bg-green-900::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

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

    top:-120px;
    right:-120px;

}


/* ==========================================================
   PROGRAM UNGGULAN
========================================================== */

#program{

    position:relative;

    overflow:hidden;

}

#program::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

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

    top:-200px;
    left:-180px;

}

#program article{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    transition:.4s;

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

}

#program article::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        transparent
    );

    opacity:0;

    transition:.35s;

}

#program article:hover::before{

    opacity:1;

}

#program article:hover{

    transform:translateY(-10px);

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

}

#program article .text-5xl{

    transition:.35s;

}

#program article:hover .text-5xl{

    transform:scale(1.2) rotate(10deg);

}

#program article h3{

    margin-top:20px;

}

#program article p{

    margin-top:15px;

    line-height:1.9;

}


/* ==========================================================
   PROGRAM TAG
========================================================== */

#program span{

    transition:.3s;

}

#program .flex span{

    cursor:pointer;

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

    border:1px solid rgba(255,255,255,.10);

}

#program .flex span:hover{

    background:var(--secondary);

    color:#111;

    transform:translateY(-4px);

}


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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

#program article .text-5xl{

    animation:floating 3s ease-in-out infinite;

}


/* ==========================================================
   GLASS EFFECT
========================================================== */

.glass{

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

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

}


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

@media(max-width:992px){

    #nilai .grid,
    #program .grid{

        gap:25px;

    }

}

@media(max-width:768px){

    #nilai article,
    #program article{

        padding:28px;

    }

    #program .flex{

        justify-content:center;

    }

}

@media(max-width:576px){

    #nilai .text-6xl,
    #nilai .text-8xl{

        font-size:3.5rem !important;

        letter-spacing:8px;

    }

    #program article{

        text-align:center;

    }

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

#galeri{
    background:#ffffff;
    position:relative;
}

#galeri::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(22,101,52,.05);
    top:-180px;
    right:-180px;
}

#galeri figure{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    transition:.4s ease;
}

#galeri figure img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:transform .6s ease;
}

#galeri figure:hover img{
    transform:scale(1.12);
}

#galeri figure::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.80),
        rgba(0,0,0,.15),
        transparent
    );
    opacity:.9;
}

#galeri figcaption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:5;
    padding:28px;
    color:#fff;
}

#galeri figcaption h3{
    color:#fff;
    margin-bottom:10px;
}

#galeri figcaption p{
    color:rgba(255,255,255,.85);
}

#galeri figure:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.15);
}

/* Card terakhir */
#galeri .border-dashed{
    transition:.35s;
}

#galeri .border-dashed:hover{
    transform:translateY(-8px);
    border-color:var(--secondary);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

/* ==========================================================
   TESTIMONI
========================================================== */

#testimoni{
    background:#F8F4EA;
    position:relative;
}

#testimoni article{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    transition:.4s ease;
}

#testimoni article::before{
    content:"❝";
    position:absolute;
    top:20px;
    right:25px;
    font-size:5rem;
    color:rgba(22,101,52,.08);
    font-family:serif;
}

#testimoni article:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(0,0,0,.10);
}

#testimoni article img{
    border:4px solid #fff;
    box-shadow:0 8px 20px rgba(0,0,0,.10);
}

#testimoni article p{
    line-height:2;
}

#testimoni article:hover img{
    transform:scale(1.08);
    transition:.35s;
}

/* ==========================================================
   CTA
========================================================== */

.cta-section{
    position:relative;
    overflow:hidden;
}

.cta-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
    top:-180px;
    left:-150px;
}

.cta-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(245,158,11,.10);
    border-radius:50%;
    bottom:-150px;
    right:-120px;
}

.cta-section h2{
    color:#fff;
}

.cta-section p{
    color:rgba(255,255,255,.88);
}

.cta-section .btn-primary{

    background:var(--secondary);

    color:#111;

    transition:.35s;

}

.cta-section .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(245,158,11,.35);

}

.cta-section .btn-outline{

    border:2px solid rgba(255,255,255,.65);

}

.cta-section .btn-outline:hover{

    background:#fff;

    color:var(--primary);

}

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

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;

    height:100%;

    transform:skewX(-30deg);

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

    transition:.6s;

}

.btn:hover::before{

    left:140%;

}

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

.zoom-hover{

    overflow:hidden;

}

.zoom-hover img{

    transition:.6s ease;

}

.zoom-hover:hover img{

    transform:scale(1.12);

}

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

.fade-in{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade-in.show{

    opacity:1;

    transform:translateY(0);

}

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

@media(max-width:992px){

    #galeri .grid,
    #testimoni .grid{

        gap:25px;

    }

}

@media(max-width:768px){

    #galeri figure img{

        height:260px;

    }

    #galeri figcaption{

        padding:20px;

    }

    #testimoni article{

        padding:28px;

    }

}

@media(max-width:576px){

    #galeri figure{

        border-radius:22px;

    }

    #galeri figure img{

        height:220px;

    }

    #testimoni article::before{

        font-size:4rem;

    }

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

footer{
    position:relative;
    overflow:hidden;
    background:#052E16;
    color:#fff;
}

footer::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(255,255,255,.03);
    top:-180px;
    right:-180px;
}

footer h3,
footer h4{
    color:#fff;
}

footer p,
footer li,
footer a{
    color:rgba(255,255,255,.80);
}

footer a{
    transition:.3s;
}

footer a:hover{
    color:var(--secondary);
    padding-left:6px;
}

footer ul li{
    margin-bottom:12px;
}

footer img{
    transition:.4s;
}

footer img:hover{
    transform:rotate(-8deg) scale(1.08);
}

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

.map-container{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.18);
}

.map-container iframe{
    display:block;
    width:100%;
    height:280px;
    border:0;
}

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

.social-icons{
    display:flex;
    gap:15px;
}

.social-icons a{

    width:46px;
    height:46px;

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

    border-radius:50%;

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

    transition:.35s;

}

.social-icons a:hover{

    background:var(--secondary);

    color:#111;

    transform:translateY(-6px);

}

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

#backToTop{

    position:fixed;

    right:25px;
    bottom:25px;

    width:55px;
    height:55px;

    border-radius:50%;

    border:none;

    background:var(--secondary);

    color:#111;

    font-size:20px;

    cursor:pointer;

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

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

    opacity:0;
    visibility:hidden;

    transform:translateY(30px);

    transition:.35s;

    z-index:999;

}

#backToTop.show{

    opacity:1;
    visibility:visible;
    transform:translateY(0);

}

#backToTop:hover{

    transform:translateY(-6px);

}

/* ==========================================================
   SCROLL PROGRESS
========================================================== */

#progressBar{

    position:fixed;

    top:0;
    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        var(--primary)
    );

    z-index:99999;

}

/* ==========================================================
   LOADER
========================================================== */

#loader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:999999;

    transition:.5s;

}

#loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader-circle{

    width:70px;
    height:70px;

    border:6px solid #eee;

    border-top:6px solid var(--secondary);

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   SCROLL REVEAL
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   FLOATING ELEMENT
========================================================== */

.float{

    animation:floatingY 4s ease-in-out infinite;

}

@keyframes floatingY{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

/* ==========================================================
   HOVER UTILITIES
========================================================== */

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.hover-scale{

    transition:.35s;

}

.hover-scale:hover{

    transform:scale(1.04);

}

/* ==========================================================
   FOCUS
========================================================== */

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--secondary);

    box-shadow:0 0 0 4px rgba(245,158,11,.15);

}

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

@media(max-width:992px){

    footer .grid{

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

        gap:40px;

    }

}

@media(max-width:768px){

    footer{

        text-align:center;

    }

    footer .grid{

        grid-template-columns:1fr;

    }

    .social-icons{

        justify-content:center;

    }

    .map-container iframe{

        height:240px;

    }

}

@media(max-width:576px){

    footer{

        padding-bottom:30px;

    }

    #backToTop{

        width:48px;
        height:48px;

        right:18px;
        bottom:18px;

    }

    .map-container iframe{

        height:220px;

    }

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

    header,
    footer,
    #backToTop,
    #loader,
    #progressBar{

        display:none !important;

    }

    body{

        color:#000;

        background:#fff;

    }

    section{

        page-break-inside:avoid;

    }

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}