html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    margin-top: 0;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a{
    text-decoration: none;
}
h1{
    line-height: 1.3;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
 -moz-appearance: textfield;
}
/*styles*/
@font-face {
    font-family: "Poppins Regular";
    src: url("../assets/fonts/Poppins-Regular.ttf");
}
@font-face {
    font-family: "Poppins Semibold";
    src: url("../assets/fonts/Poppins-SemiBold.ttf");
}
@font-face {
    font-family: "Poppins Bold";
    src: url("../assets/fonts/Poppins-Bold.ttf");
}
@font-face {
    font-family: "Cocogoose";
    src: url("../assets/fonts/Cocogoose.ttf");
}

/*Variables*/
:root{
    --dark-blue : #1D2B53;
    --blue : #3753A4;
    --white: #ffffff;
    --light-gray: #EAEAEA;
    --gray: #828282;
;
    --black: #2B2B2B;

    --br: 20px;
    --br-sm: 10px;
}
/*Layout*/
.container {
    max-width: 1200px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin: 0 auto;
}
.container-fluid{
    position: relative;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.row{
    width: calc(100% + 3rem);
    display: flex;
    flex-wrap: wrap ;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}
.col{
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
.row-sm{
    width: calc(100% + 1.5rem);
    display: flex;
    flex-wrap: wrap ;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}
.col-sm{
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
section{
    margin-bottom: 5rem;
}
input{
    border: none;
    background: none;
    outline: none;
    font-family: "Poppins Regular";
}
div{
    font-family: "Poppins Regular";
}

/*Prequisite Style*/
body.lock{
    overflow: hidden;
}
h1{
    font-size: 3rem;
    font-family: "Cocogoose";
}
h2{
    font-size: 2.4rem;
    font-family: "Cocogoose";
}
h1,h2{
    color: var(--blue);
    margin-bottom: 1.5rem;
    line-height: 1.3;
}
h1.white,h2.white{
    color: var(--white);
}
h3{
    font-size: 1.5rem;
    font-family: "Poppins Semibold";
    margin-bottom: 1rem;
}
h4{
    font-size: 1rem;
    font-family: "Poppins Semibold";
    margin-bottom: .5rem;
}
div{
    line-height: 1.5;
    color: inherit;
}
p{
    font-family: "Poppins Regular";
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
input, textarea{
    font-family: "Poppins Regular";
    font-size: 1rem;
}
a, button{
    font-family: "Poppins Semibold";
    color: var(--black);
    font-size: 1rem;
    transition: ease 1s color;
    cursor: pointer;
}
button{
    border: 0;
    outline: 0;
}
a:hover{
    color: var(--blue);
    transition: ease-out .2s color;
}
img,svg,video{
    max-width: 100%;
    max-height: 100%;
}
.text-center{
    text-align: center;
}
.rounded{
    border-radius: var(--br-sm);
}

/*Components*/
/*Button*/
.btn{
    display: inline-block;
    color: var(--white);
    padding: 8px 32px;
    border-radius: 100px;
    background-color: var(--blue);
    cursor: pointer;
}
.btn-pr{
    color: var(--white);
    background-color: var(--blue);
    border: 1px solid rgba(255,255,255,0.2);
}
.btn-icon{
    flex: none;
    padding: 8px;
    border-radius: 50%;
    height: 36px;
    width: 36px;
}
.btn-icon img{
    max-width: 100%;
    max-height: 100%;
}
.btn-icon:hover{

}
.btn-sc{
    color: var(--blue);
    background-color: var(--white);
    border: 1px solid var(--blue);
}
.btn-pr:hover{
    color: var(--white);
    background-color: var(--dark-blue);
    transition: ease .3s all;
}
.btn-sc:hover{
    background-color: var(--blue);
    color: var(--white);
    transition: ease 0.2s all;
}
/*Search Bar*/
.search-bar{
    width: 100%;
}
.search-bar .search{
    width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid var(--light-gray);
    border-radius: 100px;
    padding: 10px 24px;
    padding-right: 10px;
    background-color: var(--white);
}
.search-bar .search-input{
    width: 100%;
    margin-right: 1rem;
}

/*Loader*/
.loader-wrapper{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--white);
    z-index: 120;
    opacity: 1;
    transition: ease 0.5s all;
}
.loader-wrapper.hide{
    opacity: 0;
}
.loader {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 10rem;
    border: 3px solid white;
    background: linear-gradient(var(--blue), var(--dark-blue));
    box-shadow: 0px 0px 100px -50px rgba(0,0,0,0.1);
    animation: animate 1s linear infinite;
}

.loader::before {
    position: absolute;
    content: "";
    background: var(--white);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    border-radius: 10rem;
    border: 3px solid white;
    box-shadow: inset 0px 0px 100px -70px rgba(0,0,0,0.1);
}

/*AOS Fix*/
[data-aos] {
    pointer-events: none;
  }
  .aos-animate {
    pointer-events: auto;
  }
  .aos-init[data-aos][data-aos].aos-animate {
    transform: unset;
  }

@keyframes animate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/*Header*/
header{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--white);
    z-index: 100;
    border-bottom: 1px solid var(--light-gray);
}
header .container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}
header .logo{
    height: 50px;
    z-index: 103;
}
header nav,
header .menu,
header .user{
    display: flex;
    align-items: center;
}
header .user{
    margin-left: 2rem;
}
header .menu li,
header .user li {
    margin-left: 1rem;
}
header .menu li.li-icon{
    display: flex;
    align-items: center;
}
header .menu li.li-icon img{
    display: none;
    margin-right: 1rem;
    height: 24px;
}
header .menu-btn{
    display: none;
}
header .menu-btn svg{
    fill: var(--blue);
}
header .menu-btn{
    margin-left: auto;
    cursor: pointer;
    height: 36px;
}
header .menu-btn rect{
    transition: ease 0.3s all;
}
header nav.active{
    position: fixed;
    z-index: 102;
    
}
header nav.active ~ .menu-btn rect:nth-child(2){
    opacity: 0;
}

header nav.active ~ .menu-btn rect:nth-child(1){
    transform: rotateZ(45deg) translate(7px, -9px);
}

header nav.active ~ .menu-btn rect:nth-child(3){
    transform: rotateZ(-45deg) translate(-18px, -1px);
}
/*Hero Section*/
.hero{
    padding-top: 6rem;
}
.hero .row{
    align-items: center;
}
.hr-col{
    width: 50%;
}

/*Jadwal Section*/
.jadwal-filter{
    max-width: 800px;
    margin: 0 auto;
    display: block;
    margin-bottom: 2rem;
}
.jadwal-filter h2{
    text-align: center;
}
.jadwal .search-bar{
    margin-bottom: 1rem;
}
.jadwal .filter-container{
    display: flex;
    align-items: center ;
    justify-content: space-around;
}
.filter select{
    width: 100%;
    font-family: "Poppins Regular";
    color: var(--gray);
    font-size: 16px;
    padding: 8px 24px;
    outline: none;
    border: 1px solid var(--light-gray);
    border-radius: var(--br);
    cursor: pointer;
}
.jad-col{
    width: 50%;
    margin-bottom: 1.5rem;
}
.doc-card{
    padding: 1rem 1.5rem;
    background-color: var(--white);
    border: solid 1px var(--light-gray);
    border-radius: var(--br);
    transition: ease 0.3s all;
}
.doc-card:hover{
    transform: translateY(-5px);
    box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
}
.doc-card .doc-wrapper{
    display: flex;
}
.doc-card .doc-name{
    font-family: "Poppins Semibold";
    /* margin-bottom: 1rem; */
}
.doc-card .detail-wrapper{
    margin-top: 1rem;
    display: flex;
    /* margin-bottom: 1rem; */
}
.doc-card .detail-1{
    margin-right: 1rem;
}
.doc-card .dtl{
    display: flex;
    margin-bottom: .5rem;
}
.doc-card .icon{
    width: 18px;
    height: 18px;
}
.doc-card .dtl p{
    color: var(--gray);
    margin-bottom: 0;
    margin-left: .5rem;
}
.doc-pic{
    margin-right: 1.5rem;
}
.pic-wrap{
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 50%;
}
.pic-wrap img{
    height: 100%;
}

/*Fasilitas Section*/
.fasilitas .f-row{
    align-items: center;
}
.f-col{
    width: 50%;
}
.f-row{
    margin-bottom: 2rem;
}
.fc-col{
    width: 33.333%;
    margin-bottom: 1.5rem;
}
.f-card .f-img{
    width: 100%;
    height: 56.25%;
    border-radius: var(--br);
    overflow: hidden;
    margin-bottom: -2.5rem;
}
.f-card .f-img img{
    height: 100%;
    object-fit: cover;
}
.f-card .f-name{
    font-family: "Poppins Semibold";
    margin-bottom: 0;
}
.f-card .f-desc{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    padding-left: 1.5rem;
    border-radius: 100px;
    background-color: var(--white);
    border: solid 1px var(--light-gray);
    transition: ease 0.3s all;
}
.f-card:hover .f-desc{
    transform: translateY(-10px);
    box-shadow: 10px 0px 30px rgba(0,0,0,0.2);
}
.detail-card{
    display: none;
    position: fixed;
    top: 150%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 3rem);
    max-width: 900px;
    max-height: 90vh;
    background: var(--white);
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 0px 20px 25px rgba(0,0,0,0.1);
    overflow-y: scroll;
    transition: ease 0.5s all;
    z-index: 101;
}
.detail-card.active{
    display: initial;
    top: 2rem;
}
.detail-head{
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}
.detail-head h3{
    color: var(--gray);
    margin-bottom: 0;
}
.detail-head .close{
    display: block;
    height: 32px;
    margin-left: auto;
    cursor: pointer;
    transition: ease 0.2s all;
}
.detail-head .close:hover{
    filter: brightness(0.8);
    transform: rotateZ(180deg)
}
.detail-slider-wrap{
    position: relative;
    margin-bottom: 2rem;
}
.detail-slider{
    border-radius: 15px;
    overflow: hidden;
}
.detail-slider img{
    margin: 0 10px;
    height: 250px;
    border-radius: 15px;
}
.detail-slider-btn-wrap{
    display: flex;
    justify-content: center;
}
.detail-slider-btn-wrap .arrow{
    cursor: pointer;
    transition: ease 0.3s all;
}
.detail-slider-btn-wrap .arrow:hover{
    transform: translateY(-5px);
    filter : drop-shadow(0px 5px 20px rgba(0,0,0,0.2));
}
.detail-slider-btn-wrap .arrow:active{
    transform: translateY(5px);
}
.detail-slider-btn-wrap > img:nth-child(1){
    margin-right: 1rem;
}
.detail-slider-btn-wrap > img:nth-child(2){
    margin-left: 1rem;
}
.detail-desc{
    position: relative;
}
.detail-desc h2{
    margin-bottom: 1rem;
}
.detail-desc .desc-col{
    max-width: 60%;
}
.detail-desc .other-col{
    flex: 1 0 auto;
    width: 40%;
}
.detail-desc p{
    margin-bottom: 1rem;
}


/*Galeri Section*/
.g-col{
    width: 33.333%;
    margin-bottom: 1.5rem;
}
.galeri .title{
    text-align: center;
    margin-bottom: 2rem;
}
.galeri .title h2{
    margin-bottom: 0.5rem;
}
.g-card{
    overflow: hidden;
    border-radius: var(--br);
    border: 1px solid var(--light-gray);
    transition: ease 0.3s all;
}
.g-card:hover{
    transform: translateY(-10px);
    box-shadow: 2px 0px 30px var(--light-gray);
}
.g-img{
    width: 100%;
    height: 56.25%;
    position: relative;
}
.galeri .g-desc{
    background: var(--white);
    padding: 1rem 1.5rem;
}
.galeri .g-desc .desc{
    color: var(--gray);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.galeri .g-title{
    font-family: "Poppins Semibold";
    margin-bottom: 1rem;
}
.galeri .g-img::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: -1px;
    right: -1px;
    height: 100%;
    background: linear-gradient(0deg, var(--white), rgba(255,255,255,0));
}
.galeri .g-desc .detail{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.g-desc .date{
    color: var(--gray);
    font-size: 14px;
}

/*Footer*/
footer{
    padding: 3rem;
    background-color: var(--dark-blue);
}
footer *{
    color: var(--white);
}
footer .col{
    width: 25%;
}

footer .logo-col{
    width: 50%;
}
footer .logo{
    height: 64px;
    margin-bottom: 2rem;
}
footer .logo-col p{
    font-size: 14px;
    color: var(--light-gray);
}
footer .nav-col li{
    font-family: "Poppins Regular";
    margin-bottom: 1rem;
}

footer .nav-col li a{
    font-family: "Poppins Regular";
}
footer .btn-wrap{
    display: flex;
    flex-direction: column;
    text-align: center;
}
footer .col .btn{
    max-width: 200px;
}
footer .col .btn:first-child{
    margin-bottom: 1rem;
}

#jadwal, #fasilitas, #galeri{
    padding-top: 7rem;
    margin-top: -7rem;
}
.show-more-wrap,
.load-more__btn-wrap{
    width: 100%;
    text-align: center;
}
.show-more-btn{
    display: inline-block;
    position: relative;
    margin: 0 auto;
}
/*Overlay*/
.overlay{
    display: none;
    background: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    opacity: 0;
    transition: ease 0.2s all;
}
.overlay.active{
    display: initial;
    opacity: 1;
}

@media(max-width: 1000px){
    h1{
        font-size: 2rem;
    }
    h2{
        font-size: 1.5rem;
    }
    .doc-card .doc-wrapper{
        flex-direction: column;
    }
    .doc-card .doc-pic{
        margin-bottom: 1rem;
    }
    .fasilitas .fc-col{
        width: 50%;
    }
    .galeri .g-col{
        width: 50%;
    }
}
@media(max-width: 900px){
    header .menu-btn{
        display: block;
        z-index: 103;
    }
    header nav{
        position: fixed;
        z-index: 102;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 0 2rem;
        background: rgba(255,255,255,0.8);
        border-left: .3rem solid var(--blue);
        backdrop-filter: blur(8px);
        transform: translateX(101%);
        transition: ease 1s all;
        pointer-events: none;
    }
    header nav{
        padding-top: 6rem;
        flex-direction: column;
        justify-content: flex-start;
    }
    header .menu{
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 2rem;
    }
    .menu li a{
        font-family: "Poppins Regular";
        /* color: var(--white); */
        color: var(--black);
    }
    header .menu li, header .user li:first-child{
        margin-left: 0;
    }
    header .menu li{
        margin-bottom: 1.5rem;
    }
    header .menu li.li-icon img{
        display: block;
    }
    header .menu a{
        font-size: 1rem;
    }
    header .menu li, header .user li{
        margin-left: 0;
        margin-bottom: 1rem;
    }
    header .user{
        margin-left: 0;
        flex-direction: column;
    }
    header nav.active{
        transform: translateX(0);
        pointer-events: all;
    }
    /* header .menu-btn.active svg{
        fill:  var(--white);
    } */
}
@media(max-width: 768px){
    .hero{
        min-height: 100vh;
        padding-top: calc(68px + 2rem);
    }
    .hero .container{
        height: 100%;
    }
    .hero .row{
        height: 100%;
        flex-direction: column-reverse;
        justify-content: center;
    }
    .hero .hr-col:nth-child(2){
        margin-bottom: 2rem;
    }
    .hr-col{
        width: 100%;
    }
    
    
    .doc-card .doc-wrapper{
        flex-direction: row;
    }
    .doc-card .doc-pic{
        margin-bottom: 0;
    }
    .jad-col{
        width: 100%;
    }
    .filter-container{
        flex-wrap: wrap;
    }
    .filter-container .filter{
        width: calc(50% - 1rem);
        margin-bottom: 1rem;
    }
    .filter-container .filter:nth-child(1),
    .filter-container .filter:nth-child(3){
        margin-right: 1rem;
    }
    .fasilitas .f-col{
        width: 100%;
    }
    .fasilitas .f-col:first-child{
        margin-bottom: 2rem;
    }
    .detail-desc .row{
        flex-direction: column-reverse;
    }
    .detail-desc .desc-col,
    .detail-desc .other-col{
        max-width: 100%;
        width: 100%;
    }
    .detail-slider-btn-wrap{
        margin: 0 auto;
        margin-bottom: 2rem;
    }
    footer .col{
        width: 50%;
        margin-bottom: 1rem;
    }
    footer .logo{
        height: 48px;
    }
    footer .logo-col{
        width: 100%;
    }
}
@media(max-width: 600px){
    .btn{
        font-size: 14px;
    }
    .search-bar .search{
        padding: 8px 18px;
    }
    .search-bar .search-input::placeholder{
        font-size: 14px;
    }
    header .logo{
        height: 32px;
    }
    header .menu a{
        font-size: 1rem;
    }
    .doc-card .doc-wrapper{
        flex-direction: column;
    }
    .doc-card .doc-pic{
        margin-bottom: 1rem;
    }
    .fasilitas .fc-col{
        width: 100%;
    }
    .galeri .g-col{
        width: 100%;
    }
    
    footer .col{
        width: 100%;
    }
}