/* ==================================================
   MINIMAL MODERN SCHOOL WEBSITE
   MI AL-IKHLAS JATIMAKMUR
================================================== */

/* ==================================================
   ROOT
================================================== */

:root{
    --primary:#2E7D32;
    --primary2:#388E3C;
    --accent:#FBC02D;

    --dark:#1f2937;
    --text:#6b7280;

    --white:#ffffff;
    --bg:#f7f9f4;

    --shadow:0 10px 30px rgba(0,0,0,.06);
    --shadow-hover:0 16px 36px rgba(0,0,0,.12);

    --radius:20px;
    --transition:.3s ease;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--bg);
    color:var(--dark);
    line-height:1.7;
    overflow-x:hidden;
}

section{
    position:relative;
}

img{
    max-width:100%;
    height:auto;
    backface-visibility:hidden;
}

a,
button,
img,
.card,
.nav-link{
    transition:var(--transition);
}

/* scrollbar */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(var(--primary),var(--primary2));
    border-radius:20px;
}

::selection{
    background:var(--accent);
    color:var(--dark);
}

/* ==================================================
   TOPBAR
================================================== */

.header-topbar{
    background:linear-gradient(135deg,var(--primary),var(--primary2))!important;
    padding:12px 0;
    font-size:14px;
    position:relative;
    z-index:9999;
}

.header-topbar a,
.header-topbar span,
.header-topbar div{
    color:#fff!important;
}

.header-top_list{
    display:inline-block;
    margin-right:18px;
}

.header-top_list span{
    margin-right:6px;
}

.header-top_login_text{
    text-align:right;
}

.header-top_login_text a{
    color:#fff;
    text-decoration:none;
    padding:8px 14px;
    border-radius:10px;
    font-weight:500;
}

.header-top_login_text a:hover{
    background:rgba(255,255,255,.12);
}

.header-top_login2{
    display:inline-block;
}

.header-top_login2 a{
    background:var(--accent);
    color:var(--dark)!important;
    padding:9px 18px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    display:inline-block;
    margin-top:8px;
}

.header-top_login2 a:hover{
    background:#fff;
    transform:translateY(-2px);
}

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

.nav-menu2{
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);

    border-radius:18px;

    margin-top:15px;
    padding:12px 24px;

    box-shadow:var(--shadow);

    position:relative;
    z-index:99999;

    transition:.3s ease;
}

.nav-menu2.scrolled{
    padding:8px 22px;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.navbar{
    padding:0;
}

.navbar-brand img{
    width:82px!important;
    border-radius:12px;
}

.navbar-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
}

.navbar-nav .nav-item{
    margin:0 4px;
    position:relative;
}

.navbar-nav .nav-link{
    min-height:62px;

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

    padding:0 16px!important;

    color:var(--dark)!important;
    font-size:15px;
    font-weight:500;

    border-radius:12px;

    position:relative;
}

.navbar-nav .nav-link::before{
    content:'';

    position:absolute;
    left:50%;
    bottom:10px;

    width:0;
    height:3px;

    background:var(--accent);

    border-radius:20px;

    transform:translateX(-50%);
    transition:.3s;
}

.navbar-nav .nav-link:hover::before{
    width:55%;
}

.navbar-nav .nav-link:hover{
    background:#fff9e6;
    color:var(--primary)!important;
}

.navbar-nav .nav-item.active .nav-link{
    background:#fff9e6;
    color:var(--primary)!important;
}

.navbar-toggler{
    border:none!important;
    outline:none!important;
    box-shadow:none!important;
}

/* ==================================================
   DROPDOWN
================================================== */

.nav-menu2,
.navbar,
.navbar-collapse,
.navbar-nav,
.dropdown{
    overflow:visible!important;
}

.dropdown-menu{
    border:none;
    border-radius:16px;

    padding:10px;

    margin-top:12px;

    background:#fff;

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

    animation:dropdownFade .3s ease;
}

.dropdown-item{
    padding:12px 16px;
    border-radius:12px;

    color:var(--dark)!important;
    font-weight:500;
}

.dropdown-item:hover{
    background:#fff9e6;
    color:var(--primary)!important;
}

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

.slider_img{
    margin-top:30px;
}

.slider_img .carousel-item{
    overflow:hidden;
    border-radius:28px;
}

.slider_img img{
    width:100%;
    height:88vh;

    object-fit:cover;

    border-radius:28px;

    transform:scale(1);
    transition:transform 8s ease;
}

.carousel-item.active img{
    transform:scale(1.05);
}

.carousel-item::before{
    content:'';

    position:absolute;
    inset:0;

    background:linear-gradient(
        to right,
        rgba(0,0,0,.65),
        rgba(0,0,0,.2)
    );

    z-index:1;

    border-radius:28px;
}

.carousel-caption{
    z-index:2;
    bottom:24%;
}

.slider_title{
    animation:fadeUp 1s ease;
}

.slider_title h1{
    font-size:64px;
    font-weight:700;
    color:#fff;

    margin-bottom:16px;

    text-shadow:0 8px 25px rgba(0,0,0,.35);
}

.slider_title h2{
    font-size:24px;
    color:var(--accent);
    font-weight:500;
}

.carousel-control-prev,
.carousel-control-next{
    width:56px;
    height:56px;

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

    border-radius:50%;

    top:50%;
    transform:translateY(-50%);
}

.carousel-control-prev:hover,
.carousel-control-next:hover{
    background:rgba(255,255,255,.28);
}

.fa-slider{
    color:#fff;
    font-size:22px;
}

.carousel-indicators li{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#fff;
    opacity:.5;
}

.carousel-indicators .active{
    background:var(--accent);
    opacity:1;
}

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

section h2{
    font-weight:700;
    color:var(--dark);

    position:relative;
    display:inline-block;
}

section h2::after{
    content:'';

    width:60%;
    height:4px;

    background:var(--accent);

    position:absolute;
    left:50%;
    bottom:-10px;

    transform:translateX(-50%);

    border-radius:20px;
}

/* ==================================================
   EVENT
================================================== */

.event{
    padding:90px 0;
}

.event-img2,
.date-description{
    background:#fff;

    padding:30px;

    border-radius:24px;

    margin-bottom:25px;

    box-shadow:var(--shadow);

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

    transition:var(--transition);

    will-change:transform;
}

.event-img2:hover,
.date-description:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
}

.event-img2 h3 a,
.date-description h3 a{
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
}

.event-img2 p,
.date-description p{
    color:var(--text);
}

.event_line{
    border-top:1px dashed #d1d5db;
    margin-top:18px;
}

/* ==================================================
   DATE BOX
================================================== */

.event_date{
    float:left;
    margin-right:20px;
}

.event-date-wrap{
    width:90px;
    height:90px;

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

    border-radius:22px;

    text-align:center;

    padding-top:14px;

    color:#fff;
}

.event-date-wrap p{
    font-size:30px;
    font-weight:700;

    margin:0;
    line-height:1;
}

.event-date-wrap span{
    font-size:13px;
}

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

/* ========================================
   OWL GALERI NAVIGATION FIX
======================================== */

.galeri-slider{
    position:relative;
}

.galeri-slider .owl-nav{
    margin-top:0 !important;
}

.galeri-slider .owl-prev,
.galeri-slider .owl-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:55px;
    height:55px;

    border-radius:50% !important;
    border:none !important;

    background:#2E7D32 !important;
    color:#fff !important;

    font-size:22px !important;

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

    transition:.3s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.galeri-slider .owl-prev{
    left:-25px;
}

.galeri-slider .owl-next{
    right:-25px;
}

.galeri-slider .owl-prev:hover,
.galeri-slider .owl-next:hover{
    background:#388E3C !important;
    transform:translateY(-50%) scale(1.08);
}

/* tombol lihat galeri hijau */

.btn-primary{
    background:#2E7D32 !important;
    border:none !important;
}

.btn-primary:hover{
    background:#388E3C !important;
}

/* responsive */

@media(max-width:768px){

    .galeri-slider .owl-prev,
    .galeri-slider .owl-next{
        width:45px;
        height:45px;
        font-size:18px !important;
    }

    .galeri-slider .owl-prev{
        left:-10px;
    }

    .galeri-slider .owl-next{
        right:-10px;
    }

}
/* tombol slider */

.galeri-slider .owl-nav{
    margin-top:35px;
    text-align:center;
}

.galeri-slider .owl-nav button{
    background:none!important;
    border:none!important;
    outline:none!important;
}

.galeri-prev,
.galeri-next{
    width:54px;
    height:54px;

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

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    font-size:18px;

    margin:0 8px;

    transition:.3s ease;
}

.galeri-prev:hover,
.galeri-next:hover{
    background:var(--primary2);
    transform:translateY(-3px);
}

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

.btn-primary{
    background:linear-gradient(135deg,var(--primary),var(--primary2));

    border:none;

    border-radius:50px;

    padding:14px 34px;

    font-weight:600;

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

    overflow:hidden;
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 30px rgba(46,125,50,.35);
}

.btn-primary:focus{
    outline:none!important;
    box-shadow:none!important;
}

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

footer{
    background:#1b4332!important;

    padding:80px 0 35px;

    margin-top:70px;

    overflow:hidden;
}

footer h3{
    color:var(--accent);

    margin-bottom:20px;

    font-size:20px;
    font-weight:600;
}

footer p,
footer a,
footer li{
    color:#d1d5db!important;
    text-decoration:none;
}

footer a:hover{
    color:var(--accent)!important;
}

.footer-social-icons{
    margin-top:15px;
}

.footer-social-icons li{
    display:inline-block;
    margin-right:10px;
}

.footer-social-icons a{
    width:44px;
    height:44px;

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

    border-radius:50%;

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

.footer-social-icons a:hover{
    background:var(--accent);
    transform:translateY(-3px);
}

.footer-social-icons i{
    color:#fff;
}

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

@keyframes fadeUp{

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

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

}

@keyframes dropdownFade{

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

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

}

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

@media(max-width:991px){

    .nav-menu2{
        border-radius:0;
        margin-top:0;
        padding:15px;
    }

    .slider_title h1{
        font-size:42px;
    }

    .slider_title h2{
        font-size:20px;
    }

    .slider_img img{
        height:72vh;
    }

    .header-top_list{
        display:block;
        margin-bottom:10px;
    }

    .navbar-nav .nav-item{
        margin:4px 0;
    }

    .navbar-nav .nav-link{
        min-height:auto;
        padding:14px!important;
        justify-content:flex-start;
    }

}

@media(max-width:768px){

    .slider_title h1{
        font-size:32px;
    }

    .slider_title h2{
        font-size:16px;
    }

    .carousel-caption{
        bottom:18%;
    }

    .slider_img img{
        height:65vh;
    }

    .event-date-wrap{
        width:78px;
        height:78px;
        padding-top:12px;
    }

    .event-date-wrap p{
        font-size:24px;
    }

    .header-topbar{
        text-align:center;
    }

    .header-top_login_text{
        text-align:center;
        margin-top:10px;
    }

    .galeri-item img{
        height:200px;
    }

    .galeri-prev,
    .galeri-next{
        width:46px;
        height:46px;
        font-size:16px;
    }

}

@media(max-width:576px){

    .slider_title h1{
        font-size:26px;
    }

    .slider_title h2{
        font-size:14px;
    }

    .slider_img img{
        height:58vh;
        border-radius:18px;
    }

    .carousel-item::before{
        border-radius:18px;
    }

    .event-img2,
    .date-description{
        padding:22px;
    }

    .btn-primary{
        width:100%;
    }

}