@font-face {
    font-family: "Poppins";
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Thin.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 100;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Thin.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-ExtraLight.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 200;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-ExtraLightItalic.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Light.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-LightItalic.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Italic.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Medium.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 500;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-MediumItalic.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-SemiBold.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 600;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-SemiBoldItalic.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-Bold.ttf);
}
@font-face {
    font-family: "Poppins";
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/Poppins/Poppins-BoldItalic.ttf);
}
@font-face {
    font-family: "Salsa";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Salsa/Salsa-Regular.ttf);
}
:root {
    --bg-alice-blue: #f0f8ff;
    --light-yellow: #fbf4d8;
    --light-green: #e9f1e4;
    --bg-pink: #f6efff;
    --blue-btn: #018abe;
}
* {
    font-family: Poppins !important;
    color: #555555 !important;
    font-size: 16px !important;
    font-display: swap;
    font-weight: normal !important;
    line-height: 1.5 !important;
}
.row{
    --bs-gutter-x: 0 !important;
}
.section-home{
    background-color: #F7FAE2;
    background-image: url('../images/hero-line.png');
    background-size: 100% auto;
    background-position: bottom;
    background-repeat: repeat-x;
    position: relative;
}
a {
    text-decoration: none;
}
p, h1, h2{
    margin: 0 !important;
    padding: 0 !important;
}
header{
    background-image: url('../images/header.png');
    background-size: 100% auto;
    background-position: top;
    background-repeat: repeat-x;
    padding-top: 40px;
}
section{
    width: 100%;
    max-width: 1400px;
    margin: auto;
}
.contain{
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.text-orange{
    color: #1264D3 !important;
}
.logo{
    height: 50px;
    width: auto;
}
.btn-utama{
    background-color: #1264D3;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: white !important;
    padding: 10px 20px !important;
    font-weight: bold !important;
    /* letter-spacing: 2px; */
}
.btn-utama:hover, .btn-login:hover, .btn-submit:hover {
    background-color: #1264D3;
    color: white !important;
}
.btn-login{
    background-color: #1264D3;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: white !important;
    font-weight: bold !important;
    border-radius: 50px;
    padding: 10px 30px !important;
}
.btn-submit{
    background-color: #1264D3;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: white !important;
    font-weight: bold !important;
    border-radius: 50px;
    width: 100%;
    max-width: 900px;
    padding: 15px 0 !important;
}
.nav-link.active{
    color: #1264D3 !important;
    font-weight: bold !important;
}
.navbar-nav{
    --bs-nav-link-padding-y: 0 !important;
}
.welcome{
    background-image: url('../images/illus-header.png');
    background-size: auto;
    background-position: right top;
    background-repeat: no-repeat;
    padding: 150px 20px 0 !important;
}
.welcome h1{
    font-size: 50px !important;
    line-height: 1 !important;
}
.welcome h2{
    font-size: 85px !important;
    line-height: 1 !important;
    font-family: 'Salsa' !important;
}
.welcome h3{
    font-size: 50px !important;
    line-height: 1 !important;
    font-family: 'Salsa' !important;
}
.welcome p{
    padding-right: 100px !important;
}
/* .header-learning{
} */
.section-learning{
    background-color: white;
    padding-bottom: 100px;
}
.learning{
    padding: 50px 0 0 !important;
    position: relative;
}
.learning h3, .gallery h3, .testimonial h3, .teaching h3, .about h3, .admission h3{
    font-size: 40px !important;
    line-height: 1 !important;
    font-family: 'Salsa' !important;
    margin-bottom: 20px !important;
}
.line-orange{
    position: absolute;
    top: 125px;
    left: 250px;
}
.learning ul, footer ul, .teaching ul {
    list-style: none;
    padding-left: 0;
    margin-top: 30px;
}
.learning ul li, footer ul li, .teaching ul li {
    position: relative;
    padding-left: 25px;
    padding-bottom: 5px;
}
.learning ul li::before, footer ul li::before, .teaching ul li:before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    background-image: url('../images/point-blue.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.learning a{
    padding: 10px 30px !important;
    margin-top: 20px;
    display: inline-block;
    transition: transform 0.5s ease;
}
.learning a:hover{
    transform: scaleY(-1);
}
.why, .gallery{
    margin-top: 100px;
    position: relative;
}
.teaching{
    margin-top: 50px;
    position: relative;
}
.block-green{
    background-color: #8DBA12;
    font-weight: bold !important;
    padding: 10px 20px !important;
    width: 230px;
    color: white !important;
    border-radius: 155px;
    margin-bottom: 30px;
    text-align: center;
}
.line-why{
    position: absolute;
    top: 160px;
    left: 250px;
}
.pencil-boat{
    position: absolute;
    top: 10px;
    right: 0;
}
.trophy{
    position: absolute;
    bottom: -50px;
    left: 0;
}
.item-galeri{
    height: 190px;
    overflow: hidden;
    display: block;
}
.text-partner{
    width: 770px;
    margin: auto;
}
.teacher-name{
    font-family: 'Salsa' !important;
    font-weight: bold !important;
    font-size: 20px !important;
    text-align: center;
    margin-top: 20px !important;
}
.section-testimoni{
    background-image: url('../images/line-paper.png');
    background-size: 100% auto;
    background-position: top;
    background-repeat: repeat;
    background-color: white;
    padding-bottom: 100px;
}
.testimonial{
    padding-top: 100px;
}
.students{
    margin-top: 50px !important;
}
.owl-carousel{
    margin-top: 80px !important;
}
.owl-carousel .item{
    border: 2px solid #8ADCFF;
    padding: 20px !important;
    background-color: white;
    border-radius: 20px;
}
.parent-name{
    font-size: 15px !important;
}
.parent-kid{
    font-size: 13px !important;
}
.item-article{
    position: relative;
    height: 520px;
}
.thumb-article{
    width: 350px;
    height: 220px;
    overflow: hidden;
    border-radius: 10px;
}
.isi-article{
    width: 300px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    position: absolute;
    top: 160px;
    left: 25px;
    background-color: white;
    padding: 30px 30px;
    border-radius: 20px;
}
.tgl-article{
    font-size: 14px !important;
}
.title-article{
    font-size: 18px !important;
}
.article-thumbnail{
    max-width: 1290px;
    height: 500px;
    margin: auto;
    overflow: hidden;
}
footer{
    border-top: 1px solid #D9D9D9;
    margin-top: 50px;
}
.logo-footer{
    height: 50px;
    width: auto;
}
.footer-ico{
    margin-top: 40px;
}
footer .container{
    margin-top: 80px;
}
.text-footer{
    padding-right: 100px !important;
}
.title-footer{
    font-family: 'Salsa' !important;
    font-size: 22px !important;
    color: #1264D3 !important;
}
footer ul {
    margin-top: 10px !important;
}
.bg-footer{
    margin-top: 50px !important;
}
.page-title{
    font-family: 'Salsa' !important;
    font-size: 40px !important;
    text-align: center;
    padding: 80px 0 150px !important;
    position: relative;
    max-width: 1290px;
    margin: auto;
}
.artikel-lainnya{
    margin-top: 30px;
    border-top: 1px solid grey;
    padding-top: 20px;
}
.sun{
    position: absolute;
    top: 150px;
    left: 320px;
}
.line-orange-title-page{
    position: absolute;
    top: 140px;
    left: calc((100vw - 181px) / 2);
}
.tubelight{
    position: absolute;
    top: 150px;
    right: 320px;
}
.teaching-points{
    margin-top: 60px !important;
}
.teaching-point{
    font-family: 'Salsa' !important;
    font-size: 20px !important;
}
.teaching ul li {
    padding-left: 30px !important;
}
.teaching ul li:before {
    top: 12px !important;
}
.block-ungu{
    background-color: #6754E9;
    font-weight: bold !important;
    padding: 10px 20px !important;
    width: 200px;
    color: white !important;
    border-radius: 155px;
    margin-bottom: 30px;
    text-align: center;
}
.item-teacher{
    border-radius: 20px;
    border: 10px solid #BAE1D4;
    height: 270px !important;
    overflow: hidden;
    width: 270px !important;
    margin: auto !important;
}
.popup-img-teacher{
    border-start-start-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
.popup-name-teacher{
    font-family: 'Salsa' !important;
    font-size: 20px !important;
}
.about-hero{
    position: relative;
}
.about-hero-01 img{
    width: 70%;
    height: auto;
    border-radius: 30px;
}
.about-hero-02{
    position: absolute;
    top: 200px;
    left: 150px;
}
.about-hero-02 img{
    width: 80%;
    height: auto;
    border-top-left-radius: 150px;
    border: 10px solid white;
}
.about{
    margin-top: 50px;
    margin-bottom: 60px;
}
.about-top{
    padding-bottom: 80px;
}
.features-points{
    margin-top: 30px;
}
.bulat-pink{
    width: 50px;
    height: 50px;
    background-color: #ffbbbb;
    box-shadow: 0px 0px 4px 5px rgba(255, 187, 187, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bulat-blue{
    width: 50px;
    height: 50px;
    background-color: #c9e5ec;
    box-shadow: 0px 0px 4px 5px rgba(201, 229, 236, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bulat-yellow{
    width: 50px;
    height: 50px;
    background-color: #eee78d;
    box-shadow: 0px 0px 4px 5px rgba(238, 231, 141, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about h4{
    font-size: 30px !important;
    line-height: 1 !important;
    font-family: 'Salsa' !important;
    margin-bottom: 10px !important;
}
.about-hero-04{
    width: 90%;
    height: auto;
    border-radius: 300px 300px 50px 300px;
}
.page-title h3{
    font-size: 35px !important;
    line-height: 1 !important;
    font-family: 'Salsa' !important;
    margin-top: 10px !important;
}
.detail-article, .daftar-testimoni{
    width: 100%;
    max-width: 900px;
    margin: 30px auto;
    padding: 0 40px !important;
}
.detail-article p{
    margin-bottom: 10px !important;
}
.item-artikel{
    margin-bottom: 20px !important;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 20px !important;
}
.item-artikel p{
    margin-bottom: 0 !important;
}
.artikel-lainnya h3{
    font-family: 'Salsa' !important;
    font-size: 25px !important;
}
blockquote{
    padding-left: 45px;
    position: relative;
    margin: 25px 0;
    line-height: 1.454545;
}
blockquote::before{
    content: "‘‘";
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 100px !important;
    line-height: 1;
    color: #ff5f2e;
    position: absolute;
    top: -5px;
    left: -5px;
    letter-spacing: -5px !important;
}
.choose-point-01{
    height: 270px;
    border: 10px solid #FFEFF6;
    border-radius: 20px;
    position: relative;
    background-image: url('../images/bg-counter-box-01.png');
    background-size: auto;
    background-position: bottom;
    background-repeat: no-repeat;
}
.choose-point-02{
    height: 270px;
    border: 10px solid #EDD5CE;
    border-radius: 20px;
    position: relative;
    background-image: url('../images/bg-counter-box-02.png');
    background-size: auto;
    background-position: bottom;
    background-repeat: no-repeat;
}
.choose-point-03{
    height: 270px;
    border: 10px solid #EBF9EE;
    border-radius: 20px;
    position: relative;
    background-image: url('../images/bg-counter-box-03.png');
    background-size: auto;
    background-position: bottom;
    background-repeat: no-repeat;
}
.choose-point-avatar{
    position: absolute;
    bottom: -50px;
    right: 70px;
}
.admissions-title{
    background-color: #FFEFF6;
}
.apply-01{
    height: 220px;
    background-color: #F0F7FF;
    border-radius: 20px;
    position: relative;
    padding-top: 20px;
}
.apply-circle{
    position: absolute;
    top: 220px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.apply-02{
    height: 220px;
    background-color: #FFF1F4;
    border-radius: 20px;
    position: relative;
    padding-top: 20px;
}
.apply-03{
    height: 220px;
    background-color: #EDFFE5;
    border-radius: 20px;
    position: relative;
    padding-top: 20px;
}
.close{
    position: absolute;
    right: 20px;
    top: 20px;
}
.close img{
    width: 30px;
    height: 30px;
}
.admission{
    max-width: 100vw;
    width: 800px;
    margin: 80px auto;
    padding: 20px;
}
.admission h2 p{
    font-size: 20px !important;
    line-height: 1 !important;
    font-family: 'Salsa' !important;
    margin-bottom: 10px !important;
}
.w-200{
    width: 200px;
}
.w-150{
    width: 150px;
}
.avatar-testi img{
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
}
.item-testi{
    border: 2px solid #8ADCFF;
    border-radius: 20px;
    padding: 15px !important;
}
.active>.page-link, .page-link.active{
    color: white !important;
}
@media (max-width: 1199.98px) {
    .welcome{
        padding-top: 30px !important;
    }
    .item-article{
        text-align: center;
    }
    .isi-article{
        left: calc((100vw/2 - 350px)/2);
    }
    .tgl-article, .title-article, .desc-article, .more-article{
        text-align: left !important;
    }
    .footer-ico{
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    .sun{
        position: absolute;
        top: 150px;
        left: 120px;
    }
    .tubelight{
        position: absolute;
        top: 150px;
        right: 120px;
    }
    .about-hero-02{
        position: absolute;
        top: 120px;
        left: 150px;
    }
    .about-top{
        padding-bottom: 0 !important;
    }
    .choose-point-01, .choose-point-02, .choose-point-03{
        height: 350px;
    }
}
@media (max-width: 991.98px){
    .welcome{
        padding-top: 0 !important;
    }
    .section-home{
        padding-bottom: 50px !important;
    }
    .welcome h1{
        font-size: 30px !important;
        line-height: 1 !important;
    }
    .welcome h2{
        font-size: 65px !important;
        line-height: 1 !important;
        font-family: 'Salsa' !important;
    }
    .welcome h3{
        font-size: 40px !important;
        line-height: 1 !important;
        font-family: 'Salsa' !important;
    }
    .welcome p{
        padding-right: 0 !important;
    }
    .learning h3, .gallery h3, .testimonial h3{
        font-size: 30px !important;
    }
    /* .btn-login{
        padding: 10px 30px !important;
    } */
    header{
        padding-top: 20px !important;
    }
    .learning{
        padding: 50px 10px 0 !important;
        position: relative;
    }
    .header-learning{
        height: 23px;
    }
    .why{
        margin-top: 30px;
    }
    .pencil-boat{
        position: absolute;
        top: -110px;
        right: 0;
    }
    .testimonial{
        padding-top: 50px;
    }
    .text-partner{
        width: 100%;
    }
    .line-orange{
        position: absolute;
        top: 110px;
        left: 170px;
    }
    .line-why{
        position: absolute;
        top: 150px;
        left: 150px;
    }
    .section-testimoni{
        padding-bottom: 30px !important;
    }
    .gallery{
        margin-top: 50px !important;
    }
    .item-article{
        text-align: center;
    }
    .isi-article{
        left: calc((100vw - 370px)/2);
    }
    .text-footer{
        padding-right: 0 !important;
    }
    .sun{
        position: absolute;
        top: 150px;
        left: 50px;
    }
    .tubelight{
        position: absolute;
        top: 150px;
        right: 50px;
    }
    .about-top-desc{
        margin-top: 120px !important;
    }
    .page-title{
        padding: 80px 0 50px !important;
    }
    .choose-point-01, .choose-point-02, .choose-point-03{
        height: 300px;
        margin-bottom: 70px !important;
    }
    .apply-01, .apply-02, .apply-03{
        margin-bottom: 120px !important;
    }
}
@media (max-width: 767.98px) {
    .welcome{
        background-image: none !important;
    }
    .isi-article{
        left: calc((100vw - 325px)/2);
    }
    .page-title{
        padding: 40px 0 40px !important;
        font-size: 35px !important;
    }
    .line-orange-title-page{
        top: 100px !important;
    }
    .teaching{
        margin-top: 50px !important;
    }
    .teaching-points{
        margin-top: 30px !important;
    }
    .learning h3, .gallery h3, .testimonial h3, .teaching h3, .about h3{
        font-size: 30px !important;
    }
    .choose-point-01, .choose-point-02, .choose-point-03{
        height: 300px;
        margin-bottom: 70px !important;
    }
    .apply-01, .apply-02, .apply-03{
        margin-bottom: 120px !important;
    }
    .pencil-boat{
        display: none !important;
    }
    .about-hero-02 img{
        width: 100% !important;
    }
}