@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-BlackItalic.woff2') format('woff2'),
        url('../fonts/Poppins-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBold.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Black.woff2') format('woff2'),
        url('../fonts/Poppins-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
        url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-BoldItalic.woff2') format('woff2'),
        url('../fonts/Poppins-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Light.woff2') format('woff2'),
        url('../fonts/Poppins-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('Poppins-LightItalic.woff2') format('woff2'),
        url('Poppins-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraLightItalic.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Italic.woff2') format('woff2'),
        url('../fonts/Poppins-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraLight.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2'),
        url('../fonts/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ThinItalic.woff2') format('woff2'),
        url('../fonts/Poppins-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Thin.woff2') format('woff2'),
        url('../fonts/Poppins-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-MediumItalic.woff2') format('woff2'),
        url('../fonts/Poppins-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root{
    --bs-body-font-family : 'Poppins', sans-serif;
    --bs-body-font-size : 16px;
    --bs-body-line-height : 28px;
    --bs-body-bg : #FFFFFF; 
    --white-web : #FFFFFF;
    --white-button : #F5F5F5;
    --black-text : #343434; 
    --grey-text : #5D6A83;
    --light-green : #FFD417;
    font-size: 16px;
}

* {margin:0px; padding: 0px; }
body{background-color: #F9F9F9;}
.h2{font-size: 3rem; font-weight: 700;line-height: 3rem;}
.h3{font-size: font-weight:600;}
.mw-600{max-width: 600px;}
.bg-white{background-color: var(--white-web);}
.bg-ellipse{background-image: url(../images/bg-ellipse.png); background-position: center center;}

.big-cta a{background-color: #00FFD0; padding: 15px 50px; border-radius: 40px; font-weight: 600; font-size: 16px; color: var(--black-text); text-decoration: none; box-shadow: 0px 0px 14px 2px rgba(0,0,0,0.1);}

.slick-prev::before, .slick-next::before{font-size: 40px; color: grey;}
.slick-arrow{width: 40px; height: 40px;}
.slick-prev{left:20px; z-index: 2;}
.slick-next{right:20px}

.navbar{background-color: var(--white-web);}
.navbar  *{background-color: var(--white-web);}
.navbar .nav-link{font-size: 15px;}
.navbar .menu-left li{padding: 0px 10px;}
.navbar .menu-left .dropdown-menu li a{font-size: 14px;}
.navbar .menu-right{list-style: none; align-items: center; margin-bottom: 0px;}
.navbar .menu-right li{padding-left: 10px;}

.banner{height: 70vh;  margin-top: 80px;}
.banner .banner-item{height: 100%; background-position: center -0%; background-size: cover;}
.banner .banner-item img{object-fit: cover; width: 100%; height: 100%;}
.banner .slick-list{height: 100%;}
.banner .slick-list .slick-track{height: 100%; width: 100%;}

.numbers{z-index:2;padding: 50px 15px;background-color: rgba(255, 255, 255, 0.75); background-image:url('../images/bg-numbers.png'); border-radius: 15px; display: flex;  transform: translateY(-50%); position: relative; text-align: center;box-shadow: 1px 0px 26px 5px rgba(255,255,255,0.75);}
.numbers .title{font-size: 12px; background: linear-gradient(137.35deg, #00FFD0 0%, #3FFF21 181.6%); border-radius: 20px; margin-bottom: 10px;}
.numbers .digit{font-size: 2rem; font-weight: 600; padding-top: 10px;}
 
.announcement{min-height: 650px; display: flex; align-items: center ;background-image: url(../images/bg-pengumuman.jpg); background-size: cover; padding: 40px 0px; position: relative; margin-top: 50px;}
.announcement .wrapper{position: relative;}
.announcement .wrapper .item{position: relative; padding: 20px; border-radius: 15px; overflow: hidden; margin: 20px 0px; }
.announcement .wrapper .item > div, .announcement .wrapper .item > h3{z-index: 2; position: relative;}
.announcement .wrapper .item .date{font-size: 12px;}
.announcement .wrapper .item h3{font-size: 20px; font-weight: 600; padding-bottom: 8px;}
.announcement .wrapper .item .excerpt{font-size: 14px;}
.announcement .wrapper .item .cta a{background-color: var(--white-button); padding: 10px 8px; font-size: 15px; text-decoration: none; color: var(--black-text); border-radius: 5px;}
.announcement .wrapper .item:after{content:"";position: absolute; top:0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.25); z-index: 0;}

.activity{}
.activity .item{margin-bottom: 20px;}
.activity .item .category{background-color: var(--light-green); margin-bottom: 10px; margin-top: 8px; font-size: 10px; text-align: center; font-weight: 600; border-radius: 5px;}
.activity .item .date{background-color: var(--light-green); padding: 10px; text-align: center; border-radius: 5px;}
.activity .item .date .date-number{font-size: 2.5rem; line-height: 3rem;}
.activity .item .date .date-month{font-weight: 700;}
.activity .item a{color: var(--black-text); text-decoration: none;}
.activity .item a h3{font-size: 20px; font-weight: 600; line-height: 2rem;}
.activity .item a .excerpt{font-size: 15px; line-height: 1.5rem; margin-bottom: 10px;}
.activity .item a .cta{font-size: 14px; text-decoration: underline; font-weight: 600;}

.news{}
.news a{text-decoration: none; color: var(--black-text);}
.news a .item{padding-left: 10px; padding-right: 10px;}
.news a .item .image{aspect-ratio: 16 / 9; background-size: cover; background-position: center; border-radius: 15px; margin-bottom: 15px;}
.news a .item .title{font-weight: 600; line-height: 25px; margin-bottom: 5px;}
.news a .item .date{font-size: 12px; margin-bottom: 5px;}
.news a .item .excerpt{font-size: 15px; line-height: 25px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;}
.news a .item .link{margin-top: 10px; font-size: 14px; font-weight: 700;}

.contact h3{font-weight: 700;}
.contact ul li{padding-left: 25px; position: relative;}
.contact ul li:nth-child(1):before{content: "\F3E7"; font-family: "bootstrap-icons"; position: absolute; left: 0px; color: #03D0AB;}
.contact ul li:nth-child(2):before{content: "\F4E7"; font-family: "bootstrap-icons"; position: absolute; left: 0px; color: #03D0AB;}
.contact ul li:nth-child(3):before{content: "\F84B"; font-family: "bootstrap-icons"; position: absolute; left: 0px; color: #03D0AB;}

footer { padding-top: 200px; background-image: url(../images/bg-footer.png);}
footer h4{padding-bottom: 15px; font-size: 18px; font-weight: 600;}
footer ul{list-style: none; padding: 0px;}
footer ul.links li{padding-bottom: 15px; line-height: 20px; }
footer ul.links li a{text-decoration: none; color: var(--grey-text); font-size: 14px; }
footer ul.links li a:hover{text-decoration: underline;}
footer ul.social{margin-top: 20px;}
footer ul.social li{display: inline; padding-right: 15px;}
footer ul.social li a{color: var(--grey-text); font-size: 1.75rem;}
footer .logos ul{display: flex;}
footer .logos ul li{padding-right: 20px;}
footer .copy{font-size: 14px; margin-top: 4%; padding-bottom: 40px; color: var(--grey-text);}

@media (max-width: 540px) {
    :root{
    --bs-body-font-size : 15px;
    }
    .h2{font-size: 2rem; line-height: 2.5rem;}

    .navbar .navbar-collapse{padding-top: 15px;}
    .navbar .navbar-brand img{max-height: 40px;}
    .navbar .navbar-toggler{border:0px}
    .navbar .navbar-toggler:focus{border: 0px; box-shadow: none;}
    .navbar .dropdown-menu{border:0px; margin-top: 0px;}
    .navbar .menu-left .dropdown-menu li{border-left: 3px solid var(--grey-text);}
    .navbar .menu-left .dropdown-menu li a{font-size: 14px; padding-left: 5px;}

    .banner{height: 50vh; margin-top: 65px;}

    .slick-prev{left:10px}
    .slick-next{right:10px}
    .slick-prev::before, .slick-next::before{font-size: 25px;}

    .numbers{transform: none; padding: 30px 0px 20px;}
    .numbers .title{font-size: 10px;}
    .numbers .digit{padding-top: 0px; padding-bottom: 15px;}

    .intro{flex-direction: column-reverse;}
    .intro .image img{opacity: 0;}
    .intro .image{border-radius:0px; background: linear-gradient(to bottom, rgba(255,255,255,0) 80%, rgba(255,255,255,1)), url(../images/arti-lamemba.jpg); height: 100%; background-size: cover; }
    .intro .text{background-color: rgba(255, 255, 255, 0.9); padding-top: 50px; margin-top: -100%; z-index: 2;}

    .announcement{padding: 30px 5px;}
    .announcement .wrapper .item{padding: 10px 15px 20px}
    .announcement .wrapper .item h3{font-size: 17px; line-height: 28px; padding-bottom: 0px;}
    .announcement .wrapper .item .excerpt{line-height: 25px;}
    .announcement .cta{margin-top: 10px; justify-content: end;}
    .announcement .wrapper .item .cta a{padding: 5px 8px;}
    
    .activity .item a h3{font-size: 16px; line-height: 25px;}
    .activity .item a .excerpt{font-size: 14px;}
    .activity .item a .cta{font-size: 12px;}
    .activity .meta{display: flex; padding-left: 12px !important; margin-bottom: 5px;}
    .activity .meta .category{font-size: 12px; font-weight: normal; margin: 0px; line-height: 1rem; background-color: transparent; padding-right: 5px;}
    .activity .meta .category:after{content: " / ";}
    .activity .meta .date{display: flex; padding: 0px; background-color: transparent; padding-right: 10px;}
    .activity .meta .date .date-number{padding-right: 5px;}
    .activity .meta .date > div{font-size: 12px !important; line-height: 1rem !important; font-weight: normal !important; background-color: transparent !important;}

    .news a .item:last-child{margin-bottom: 20px !important;}
    .news a .item .title{font-size: 16px;}
    .news a .item .date{margin-bottom: 0px;}
    .news a .item .excerpt{font-size: 14px;}
    .news a .item .link{margin-top: 5px; margin-bottom: 30px; font-size: 12px;}

    footer{padding-top: 50px; background-size: cover;}
    footer h4{padding-bottom: 5px;}
    footer ul.links li{padding-bottom: 5px;}
    footer ul.links li a{font-size: 13px;}
    footer ul.social{display: flex; justify-content: space-around; margin-bottom: 30px;}
    footer .logos ul li{padding-right: 0px;}
    footer .logos ul li img{max-height: 60%;}
    footer .copy{font-size: 12px;}

}