:root {
    --prim_yellow: #c69900;
    --white: #ffffff;
    --prim__black: #202020;
    --light_gray: #dddddd;
    --dark_gray: #7b7b7b;
    --ripple: #7b7b7b10;
    --sec__orange: #ff815a;
    --faded__yellow: #fdec9e80;
    --dark__2: #585858;
    --dark__3: #8f8f8f;
    --bg__white: #fafafc;
    --black__alt: #363848;
    --gray__alt: #a7a7a7;
    --santa__theresia: #fdc9e3;
    --santa__theresia_blue: #a0e1e9;
    --santa__maria: #d41b66;
    --santa__maria_blue: #2e91d4;
    --santo__yusup: #2a2583;
    --santo__yusup_purple: #cb2196;
    --santo__mikael: #49a4ff;
    --bg__black: #32322f;
    --text__white: #ffffff;
    --text__black_prim: #020203;
}

body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background-color: var(--bg__white);
}

.text__yellow {
    color: var(--prim_yellow) !important;
}

.text__black {
    color: var(--prim__black) !important;
}

.text__dark_gray {
    color: var(--dark_gray) !important;
}

.text__light_gray {
    color: var(--light_gray) !important;
}

.text__dark2 {
    color: var(--dark__2);
}

.text__justify {
    text-align: justify !important;
}

.text__dark_3 {
    color: var(--dark__3) !important;
}

.mt__35px {
    margin-top: 35px;
}

.text__sec_orange {
    color: var(--sec__orange) !important;
}

.text__black__alt {
    color: var(--black__alt) !important;
}

.op__60 {
    opacity: 0.6;
}

.space__60 {
    height: 60px;
}

.text__gray_alt {
    color: var(--gray__alt) !important;
}

.bg__white {
    background-color: white !important;
}

/* footer */

.bg__footer {
    background: var(--bg__black);
    padding-left: 100px;
    padding-top: 100px;
    padding-right: 100px;
    padding-bottom: 30px;
}

.bg__footer h1 {
    line-height: 1.4;
}

.bg__footer h1,
.bg__footer h4 {
    font-weight: 700;
    color: var(--text__white);
}

.bg__footer h6 {
    font-weight: 400;
    color: var(--text__white);
    opacity: 0.9;
}

.follow__us__img {
    height: 22px;
    width: 25px;
    object-fit: contain;
    padding-right: 10px;
}

.info__footer .img__info > svg {
    color: var(--text__white);
    margin-right: 16px;
    font-size: 24px;
    margin-top: 3px;
}

.info__footer .img__info_img {
    margin-right: 16px;
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin-top: 3px;
}
.info__footer h5,
.info__footer p {
    opacity: 0.9;
    color: var(--text__white);
    font-weight: 500;
}

.link__footer .info__footer:hover {
    opacity: 0.75;
    transform: translateY(-1px);
    transition: all 0.1s;
}

.link__footer .info__footer p {
    font-weight: 400;
    text-decoration: none !important;
    margin-top: 2px;
}
.link__footer .info__footer .img__info > svg {
    margin-top: 5px;
}
.link__footer .info__footer {
    margin-bottom: 8px !important;
}
a.link__footer {
    text-decoration: none !important;
}

.link__footer.bold .info__footer p {
    font-weight: 700;
}

.follow__us p {
    color: var(--text__white);
    opacity: 0.9;
}

.follow__us h6 {
    font-weight: 700;
}
.follow__us svg {
    font-size: 18px;
    color: black;
    margin-right: 12px;
}
@media screen and (max-width: 996px) {
    .bg__footer {
        padding-left: 75px;
        padding-top: 65px;
        padding-right: 75px;
        padding-bottom: 20px;
    }
}

@media screen and (max-width: 769px) {
    .bg__footer {
        padding-left: 50px;
        padding-top: 45px;
        padding-right: 50px;
        padding-bottom: 15px;
    }
}

@media screen and (max-width: 500px) {
    .bg__footer {
        padding-left: 25px;
        padding-top: 20px;
        padding-right: 25px;
        padding-bottom: 10px;
    }
}

/* HEADER */
.nav__custom .navbar-collapse {
    flex-grow: 0 !important;
    flex-basis: auto !important;
}

.nav__custom.navbar {
    padding-top: 20px;
    padding-bottom: 20px;
    background: var(--white) !important;
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 0;
    z-index: 1000;
    transform: all 0.5s;
}

.nav__custom h3 {
    color: var(--dark_gray);
    font-weight: 800;
}

.nav__custom .nav-link {
    color: var(--prim_yellow) !important;
    transition: all 0.4s;
}

.nav__custom .nav-link:hover {
    color: var(--dark_gray) !important;
    opacity: 0.85;
}

.nav__custom .nav-link.active {
    font-weight: bold;
    color: var(--dark_gray) !important;
}

.above__navbar {
    position: relative;
    background-color: var(--prim_yellow);
    padding: 15px 0;
    z-index: 1000;
}

.cu__box > img,
.above__navbar .socmed {
    height: 22px;
    width: 22px;

    object-fit: contain;
}

.cu__box > img {
    margin-top: 3px;
}

.cu__box > p > small {
    color: white;
}

.nav__custom .dropdown-menu {
    border: none !important;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.nav__custom .dropdown-item {
    color: var(--prim_yellow);
}

.nav__custom .dropdown-item.activated {
    color: var(--dark_gray);
    font-weight: bold;
}

.navvbar-band img {
    height: 40px;
    object-fit: contain;
}

.nav__custom .navbar-toggler {
    border: none;
    color: var(--dark_gray);
    transition: all 0.4s;
    box-shadow: none !important;
}

.nav__custom .navbar-toggler:focus {
    background-color: var(--ripple);
}

@media screen and (max-width: 996px) {
    .nav__custom .navbar-collapse {
        flex-basis: 100% !important;
    }

    .nav__custom .dropdown-menu {
        box-shadow: none;
        margin-left: 10px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .nav__custom .dropdown-item {
        font-size: 14px;
    }

    .cu__box > p > small {
        font-size: 12px;
    }

    .cu__box > img,
    .above__navbar .socmed {
        height: 18px;
        width: 18px;
    }
}

@media screen and (max-width: 768px) {
    .nav__custom.navbar {
        padding: 14px 0;
    }
    .mt__35px {
        margin-top: 0px;
    }
}

@media screen and (max-width: 500px) {
}

/* YAYASAN */
.section {
    padding-top: 60px;
    padding-bottom: 65px;
}

.iframe__map {
    border: 0;
    background: black;
    width: 100%;
    position: relative;
    height: 300px;
    border-radius: 16px;
}

.section__map .box__relative {
    position: relative;
    display: flex;
    justify-content: center;
}

.section__map .address__box {
    width: 85%;
    border-radius: 16px;
    box-shadow: 0px 19px 69px #00000011;
    padding: 30px;
    background-color: var(--white);
    margin-top: -60px;
}

.address__child img {
    height: 50px;
    width: 50px;
    object-fit: contain;
}

.card__testi img {
    width: 100%;
    aspect-ratio: 5/6;
    object-fit: cover;
    border-radius: 8px;
}

.card__testi.card {
    border-radius: 16px;
}
.card__testi .scrollable__div {
    height: 110px;
    padding-right: 10px;
    overflow-y: auto;
}
.card__testi.card .card-body {
    padding: 32px 26px;
}

.card__testi .title__name {
    color: var(--prim__black);
    font-weight: 700;
}

.card__testi .jabatan {
    color: var(--prim_yellow);
}

.card__testi .desc {
    color: #585858;
}

.section__testi {
    background-color: #fbf3cd;
}

.box__arrow {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box__arrow svg {
    font-size: 32px;
    color: var(--prim_yellow);
    transition: all 0.5s;
}

.box__arrow:hover svg {
    color: var(--prim__black);
    opacity: 0.6;
}

.teacher__box {
    background-color: var(--bg__white);
    border-radius: 16px;
    padding: 16px;
    transition: all 0.25s;
}

.teacher__box img {
    border-radius: 16px;
    aspect-ratio: 3/4;
    width: 100%;
    object-fit: cover;
}

.teacher__box:hover,
.teacher__box:focus {
    background-color: var(--ripple);
}

.teacher__box h4 {
    color: var(--dark_gray);
    font-weight: bold;
}

.section__paradigma {
    background-color: var(--faded__yellow);
}

.box__paradigma > img {
    width: 60px;
    height: 60px;
    aspect-ratio: 1;
    object-fit: contain;
}

.box__paradigma {
    transition: all 0.25s;
}

.box__paradigma:hover,
.box__paradigma:focus {
    transform: scale(1.065);
}

.section__misi h6 {
    font-weight: 400;
    color: var(--prim__black);
    font-size: 18px;
}

.mission__child .number__div {
    width: 84px;
    height: 84px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
}

.mission__child .number__div h3 {
    width: 84px;
    text-align: center;
}

.mission__child .number__div.gray {
    color: var(--dark_gray);
    border-color: var(--dark_gray);
}

.mission__child .number__div.green {
    color: #6ec368;
    border-color: #6ec368;
}

.mission__child .number__div.blue {
    color: #3a83fd;
    border-color: #3a83fd;
}

.mission__child .number__div.pink {
    color: #fdc9e3;
    border-color: #fdc9e3;
}

.section__misi .small__pic {
    width: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.section__misi .big__picture {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.section__head_nurse {
    position: relative;
}

.section__head_nurse > img.top__part {
    position: absolute;
    top: 0;
    left: 0;
}

.section__head_nurse > img.bottom__part {
    position: absolute;
    bottom: 0;
    right: 0;
}


a.btn {
    text-decoration: none !important;
}

.btn {
    transition: all 0.25s;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn__daftar {
    padding: 14px 18px;
    color: var(--white);
    background-color: #6ec368;
    border-radius: 60px;
}
.btn__daftar.sd-santa-maria {
    background-color: var(--santa__maria);
}
.btn__daftar.sd-santo-yusup {
    background-color: #3a83fd;
}
.btn__daftar.smp-santo-mikael {
    background-color: #fd4d28;
}
.btn__transparent.tk-santa-theresia {
    background-color: #f9f1d1;
}
.btn__transparent.smp-santo-mikael,
.btn__transparent.sd-santo-yusup {
    background-color: #97c0f440;
}
.btn__transparent {
    background-color: transparent;
    border-radius: 60px;
}

.img__school {
    width: 100%;
    object-fit: cover;
    transition: all 0.4s;
}

.img__school:hover,
.img__school:focus {
    transform: scale(1.05);
}

.ganjelan__img {
    height: 80px;
    display: block;
}

.rotated__div {
    transform: rotate(270deg);
    position: absolute;
    top: 40%;
    left: -10%;
    cursor: pointer;
}

.rotated__div p {
    font-size: 18px;
    color: var(--dark_gray);
}

.ball__acc {
    border-radius: 50%;
}

.ball__acc.blue {
    position: absolute;
    top: 17%;
    width: 28px;
    height: 28px;
    left: 15%;
    background-color: #3a83fd;
}

.ball__acc.green {
    position: absolute;
    top: 40%;
    left: 4%;
    width: 24px;
    height: 24px;
    background-color: #6ec368;
}

.ball__acc.gray {
    position: absolute;
    top: 15%;
    width: 30px;
    height: 30px;
    right: 13%;
    background-color: var(--dark_gray);
}

.ball__acc.red {
    position: absolute;
    top: 33%;
    width: 20px;
    height: 20px;
    right: 32%;
    background-color: #fd4d28;
}

.ball__acc.pink {
    position: absolute;
    bottom: 36%;
    width: 43px;
    height: 43px;
    right: 3%;
    background-color: #fdc9e3;
}
.button__bar {
    background: white;
    border-radius: 16px;
    padding: 24px 16px;
}
.button__bar .btn.btn__unit_bar {
    color: var(--prim_yellow);
    border-radius: 12px;
    width: 100%;
    padding: 16px;
    transition: all 0.35s;
}

.button__bar .btn__unit_bar h5 {
    margin-bottom: 0px;
    font-weight: 700;
}

.button__bar .btn.btn__unit_bar.activated {
    color: var(--white);
    background-color: var(--prim_yellow);
}

.box__advants {
    padding: 35px 50px;
    border-radius: 10px;
    background-color: white;
}

.line__limit {
    width: 100%;
    border-top: 1px dotted #fd4d28;
}

.box__advants h4,
.box__advants h1 {
    color: var(--dark_gray);
    font-weight: bold;
}

.box__advants p {
    color: var(--prim__black);
    font-size: 18px;
}

.btn.btn__rounded {
    padding: 15px 20px;
    border-radius: 30px;
    transition: all 0.25s;
}

.btn.btn__rounded > * {
    font-weight: bold;
    margin-bottom: 0px;
}

.btn.btn__rounded:hover {
    transform: translateY(-3px);
}

.btn.btn__rounded.yellow {
    color: var(--white);
    background-color: var(--prim_yellow);
}

.btn.btn__rounded.white {
    background-color: white;
    color: var(--dark_gray);
    border: 1px solid var(--dark_gray);
}

.div__img_unit img {
    aspect-ratio: 5/3.75;
    width: 100%;
    margin-bottom: 35px;
    border-radius: 10px;
    object-fit: cover;
}

.card__id {
    background-color: white;
    padding: 20px 32px;
    border-radius: 24px;
    margin-bottom: 16px;
}

.card__id img {
    height: 100px;
    width: 100px;
    object-fit: contain;
}

.teacher__unit_box img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 16px;
}

.ekskul__box {
    border-radius: 12px;
    background-color: var(--white);
    margin-bottom: 60px;
}
.teacher__unit_box h5{
    min-height: 2.5rem;
}
.ekskul__box img {
    aspect-ratio: 27/22;
    border-radius: 10px;
    width: 100%;
}

.fasilitas__box {
    margin-bottom: 57px;
}

.fasilitas__box img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 29/25;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
}

.fasilitas__box .box__name {
    width: 100%;
    padding: 16px;
    background-color: var(--prim_yellow);
    color: white;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}

.swiper-pagination.bullet__settings {
    bottom: 0px;
}

.section__ekskul .orange__div {
    top: 0;
    left: 0;
    width: 100%;
    height: 74%;
    position: absolute;
    background: var(--prim_yellow);
    border-bottom: 20px solid var(--dark_gray);
}

.teacher__unit_box .div__img .hover__div {
    transition: all 0.35s ease-in;
    opacity: 0;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #090909cc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: absolute;
    aspect-ratio: 1;
    border-radius: 16px;
}

.teacher__unit_box .div__img:focus .hover__div,
.teacher__unit_box .div__img:hover .hover__div {
    opacity: 1;
}

.section__quote {
    background-color: var(--light_gray);
}

.quote__mark svg {
    font-size: 80px;
    color: white;
}

.box__check svg {
    font-size: 20px;
    color: #cccccc;
    margin-top: 4px;
}

.section__banner_unit {
    position: relative;
}


.section__banner_unit .img__right {
    width: 100%;
    max-height: 450px;
    object-fit: contain;
}
.mb__75px {
    margin-bottom: 75px;
}

.bg__banner {
    width: 40%;
    top: -10%;
    position: absolute;
    right: 0;
}
@media (min-width: 1440px) {
    .bg__banner {
        width: 50%;
        top: -40%;
        position: absolute;
        right: 0;
    }
}
@media screen and (max-width: 996px) {
    .section__map .address__box {
        width: 90%;
        padding: 20px 25px;
        margin-top: -40px;
    }

    .iframe__map {
        height: 275px;
    }

    .mission__child .number__div {
        width: 75px;
        height: 75px;
    }

    .mission__child .number__div h3 {
        width: 75px;
    }

    .section__head_nurse > img.bottom__part,
    .section__head_nurse > img.top__part {
        width: 88%;
    }

    h1.title__hyperbig {
        font-size: 56px;
    }

    .rotated__div {
        display: none;
    }

    .box__advants p {
        font-size: 16px;
    }

    .section__banner_unit .bg__banner {
        width: 95%;
        top: -25%;
    }

    .address__child img {
        width: 45px;
        height: 45px;
    }
    .mb__75px {
        margin-bottom: 60px;
    }
    .section__banner_unit .kotak__isi {
        height: auto !important;
    }
    .section__quote .title__quote {
        font-size: 18px;
    }
    .ball__acc {
        opacity: 0.75;
    }
}

@media screen and (max-width: 767px) {
    .mission__child .number__div {
        width: 70px;
        height: 70px;
    }

    .mission__child .number__div h3 {
        width: 70px;
    }

    .ganjelan__img {
        display: none;
    }

    h1.title__hyperbig {
        font-size: 48px;
    }

    .ball__acc {
        opacity: 0.5;
    }

    .card__id {
        margin-bottom: 20px;
    }
    .address__child img {
        width: 40px;
        height: 40px;
    }
    .mb__75px {
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 500px) {
    .mission__child .number__div {
        width: 60px;
        height: 60px;
    }

    .mission__child .number__div h3 {
        width: 60px;
    }

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

    .box__advants p {
        font-size: 14px;
    }
    .address__child img {
        width: 35px;
        height: 35px;
    }
    .mb__75px {
        margin-bottom: 42px;
    }
}

/* PPDB */
.section__image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.section__image .container__new {
    width: 100%;
    max-width: 1500px;
}

.section__yukdaftar .card__school {
    padding: 16px 20px;
    background-color: var(--prim_yellow);
    border-radius: 16px;
    display: flex;
    align-items: center;
    transition: all 0.35s;
}

.section__yukdaftar .card__school img {
    width: 60px;
    aspect-ratio: 1;
}
.section__yukdaftar .card__school:focus,
.section__yukdaftar .card__school:hover {
    transform: scale(1.02);
}
.section__timeline__ppdb {
    position: relative;
}

.section__timeline__ppdb .card__timeline {
    padding: 16px 24px;
    background-color: white;
    border-radius: 16px;
    box-shadow: 4px 9px 36px #00000010;
    margin-bottom: 12px;
}

.section__timeline__ppdb > img {
    position: absolute;
    bottom: 5%;
    width: 55%;
}
.left__side_ppdb {
    height: 100%;
    left: -1%;
    top: 0;
}
.section__timeline__ppdb #bg__desktop {
    /* display: none; */
}
@media (min-width: 1440px) {
    .section__timeline__ppdb > img {
        bottom: 5%;
        width: 55%;
        object-fit: contain;
    }
}
@media (min-width: 1600px) {
    .section__timeline__ppdb > img {
        opacity: 0.85;
    }
}

@media (min-width: 1800px) {
    .section__timeline__ppdb > img {
        display: none !important;
    }
    .section__timeline__ppdb #bg__desktop {
        display: block;
        width: 100%;
    }
}
@media (max-width: 996px) {
    .section__timeline__ppdb > img {
        opacity: 0.9;
        width: 95%;
    }
}

@media (max-width: 500px) {
    .section__timeline__ppdb > img {
        top: 12%;
        opacity: 0.6;
        width: 99%;
    }
}

/* HOME */
.card__blog .pict__box {
    position: relative;
}
.card__blog {
    height: 100%;
    transition: all 0.35s;
}

.card__blog:hover,
.card__blog:focus {
    opacity: 0.95;
    transform: translateY(-2px);
}

.card__blog .pict__box .cat__name {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 10px 20px;
    border-radius: 10px;
    color: white;
    background-color: var(--prim_yellow);
}

.card__blog .pict__box .big__pict {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    width: 100%;
    aspect-ratio: 8/5;
    object-fit: cover;
}

.card__blog .data__box {
    background-color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 35px;
    padding-top: 15px;
}

.card__blog .data__box .date__box {
    justify-content: start;
    align-items: center;
    display: flex;
}

.card__blog .data__box .date__box > svg {
    height: 20px;
    color: var(--prim_yellow);
}

.card__blog .data__box .date__box > p {
    color: #a4a4a4;
    margin-bottom: 0px;
}

.card__blog .data__box .titlee {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--prim__black);
}
.card__blog .data__box .content__red {
    height: 50px;
}
.card__blog .data__box .infoo {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--text__black_prim) !important;
    font-size: 15px !important;
    height: 42px;
}

.btn.btn__primary {
    background-color: var(--prim_yellow);
    border-radius: 10px;
    color: white;
    padding: 15px 30px;
    transition: all 0.35s;
}

.btn.btn__primary svg {
    height: 22px;
    color: white;
}

.text_gray_8b {
    color: #8b8b8b;
}

.card__blog .btn.btn__primary:hover,
.card__blog .btn.btn__primary:focus {
    transform: translateY(-2px);
}

@media (max-width: 996px) {
    .card__blog .data__box {
        padding: 20px;
        padding-top: 10px;
    }

    .btn.btn__primary {
        padding: 10px 20px;
    }

    .btn.btn__primary svg {
        height: 18px;
        color: white;
        margin-left: 6px;
    }
}

.unit__home .symbol__sch {
    width: 100%;
    max-width: 130px;
    aspect-ratio: 1;
    object-fit: contain;
}

.unit__home .socmed__btn svg {
    width: 23px;
    height: 23px;
    color: var(--prim_yellow);
    margin-right: 16px;
}

.unit__home .link small {
    font-size: 13px;
    color: var(--prim_yellow);
    margin-right: 10px;
}

.unit__home .link svg {
    font-size: 12px;
}

a {
    text-decoration: none !important;
}

.picture__school {
    width: 75%;
    aspect-ratio: 2.3;
    object-fit: cover;
}

.section__headyayasan .big__intro {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 30px;
}

.mission__child__home > img {
    height: 36px;
    width: 36px;
    object-fit: contain;
}

.section__home_banner {
    position: relative;
    background-color: black;
}

.text__gray93 {
    color: #939393;
}

.section__home_banner h1 {
    font-size: 52px;
    font-weight: 800;
}

.section__home_banner .coretan__tulisan {
    width: 300px;
    max-width: 100%;
}

.br__30 {
    border-radius: 30px !important;
}

.section__home_banner .big__intro {
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
}

.section__home_banner {
    .ball__acc.blue {
        top: 10%;
        width: 28px;
        height: 28px;
        left: 17%;
        background-color: #3a83fd;
    }

    .ball__acc.green {
        position: absolute;
        top: 48%;
        left: 3%;
        width: 24px;
        height: 24px;
        background-color: #6ec368;
    }

    .ball__acc.gray {
        position: absolute;
        top: 10%;
        width: 30px;
        height: 30px;
        right: 13%;
        background-color: var(--dark_gray);
    }

    .ball__acc.red {
        position: absolute;
        top: 33%;
        width: 20px;
        height: 20px;
        right: 50%;
        background-color: #fd4d28;
    }

    .ball__acc.pink {
        position: absolute;
        bottom: 37%;
        width: 43px;
        height: 43px;
        right: 3%;
        background-color: #fdc9e3;
    }
}
.section__isi .wysiwyg * {
    font-size: 16px !important;
    color: var(--dark__2) !important;
}
@media (max-width: 996px) {
    .picture__school {
        width: 80%;
    }
    .section__headyayasan .big__intro {
        height: 330px;
    }
}

@media (max-width: 768px) {
    .picture__school {
        width: 90%;
    }
}

@media (max-width: 500px) {
    .picture__school {
        width: 95%;
    }
}
/* contact us */
.section__socmed .socmed__box {
    padding: 16px;
    background-color: white;
    border-radius: 16px;
    transition: all 0.35s;
}
.section__socmed .socmed__box > img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
}
.section__socmed .socmed__box > h5 {
    color: #151414;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0px;
}

.section__socmed .socmed__box:hover,
.section__socmed .socmed__box:focus {
    background-color: var(--ripple);
    transform: scale(1.015);
}

.card__blog .info__box {
    height: 55px;
    width: 100%;
    overflow-y: hidden;
}
.gallery .gallery__item {
    width: 100%;
    object-fit: 16px;
    object-fit: contain;
}
/* pagination */
.custom__pagination .page-item .page-link {
    border-radius: 5px;
    border: 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 10px;
    font-weight: 700;
    color: var(--dark__2);
}
.custom__pagination .page-item.active .page-link {
    background-color: var(--prim_yellow);
    font-weight: 800;
    color: white;
    font-size: 18px;
}
.custom__pagination .page-item.disabled .page-link {
    background-color: #f7f7f7d7;
    color: var(--prim__black);
}
.custom__pagination .page-item:first-child .page-link,
.custom__pagination .page-item:last-child .page-link {
    font-size: 20px;
}
/* Unit Change Color */
.section__quote .title__quote {
    line-height: 1.5;
}

/* -------------------TK SANTA THERESIA---------------------- */
.section__quote.tk-santa-theresia {
    background-color: var(--santa__theresia);
}
.section__quote.tk-santa-theresia .title__quote {
    color: var(--prim__black) !important;
}
.section__quote.tk-santa-theresia .name__quote {
    color: var(--dark_gray) !important;
}
.section__ekskul.tk-santa-theresia .orange__div {
    background: var(--santa__theresia);
    border-color: var(--dark_gray) !important;
}
.section__testi.tk-santa-theresia {
    background-color: var(--santa__theresia_blue);
}
.tk-santa-theresia .fasilitas__box .box__name {
    background-color: var(--santa__theresia_blue);
}
.tk-santa-theresia .fasilitas__box .box__name h6 {
    color: #0092a4 !important;
}
/* -------------------SD SANTA MARIA---------------------- */

.section__quote.sd-santa-maria {
    background-color: var(--santa__maria);
}

.section__quote.sd-santa-maria .title__quote {
    color: var(--white) !important;
}
.section__quote.sd-santa-maria .name__quote {
    color: #f1f1f1 !important;
}
.section__ekskul.sd-santa-maria .orange__div {
    background: var(--santa__maria_blue);
    border-color: var(--santa__maria) !important;
}
.sd-santa-maria .fasilitas__box .box__name {
    background-color: var(--santa__maria_blue);
}

/* -------------------SD SANTO YUSUP---------------------- */

.section__quote.sd-santo-yusup {
    background-color: var(--santo__yusup);
}
.section__quote.sd-santo-yusup .title__quote {
    color: var(--white) !important;
}
.section__quote.sd-santo-yusup .name__quote {
    color: #f1f1f1 !important;
}
.section__ekskul.sd-santo-yusup .orange__div {
    background: var(--santo__yusup_purple);
    border-color: var(--prim_yellow) !important;
}

/* -------------------SMP SANTO MIKAEL---------------------- */

.section__quote.smp-santo-mikael {
    background-color: var(--santo__mikael);
}
.section__quote.smp-santo-mikael .title__quote {
    color: var(--white) !important;
}
.section__quote.smp-santo-mikael .name__quote {
    color: #f1f1f1 !important;
}
.section__ekskul.smp-santo-mikael .orange__div {
    background: var(--santo__mikael);
    border-color: var(--prim_yellow) !important;
}

.section__misi .ball__acc.blue {
    left: 42%;
}
.section__misi .ball__acc.red {
    right: 49%;
    top: 65%;
}
.section__misi .ball__acc.gray {
    right: 24%;
    top: 7%;
}
.section__misi .ball__acc.pink {
    right: 11%;
    bottom: 20%;
}

.teacher__box .img__box:hover .quote__box,
.teacher__box .img__box:focus .quote__box {
    opacity: 1;
}

.teacher__box .img__box .quote__box {
    opacity: 0;
    transition: all 0.45s;
    height: 100%;
    width: 100%;
    background-color: #090909cc;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    text-align: center;
    padding: 10px;
    color: white;
    font-weight: 700;
    top: 0;
    left: 0;
}
.teacher__unit_box .div__img .hover__div > p,
.teacher__box .img__box .quote__box > p {
    font-size: 18px;
}
.bg__footer .box__infooo {
    transform: translateY(-21px);
}

.card__testi .infooo {
    font-size: 14px;
}
@media (max-width: 1200px) {
    .teacher__unit_box .div__img .hover__div > p,
    .teacher__box .img__box .quote__box > p {
        font-size: 16.5px;
    }
}

@media (max-width: 996px) {
    .bg__footer .box__infooo {
        transform: translateY(0px);
    }
    .card__testi .infooo {
        font-size: 13px;
    }
}

.iframe__unit {
    height: 80vh;
    aspect-ratio: 9/16;
    border-radius: 18px;
}
.iframe__modal {
    height: 80vh;
    aspect-ratio: 9/16;
}
.iframe__modal .btn-close {
    background: none !important;
    width: auto;
    height: auto;
    transform: translateX(3px);
    opacity: 0.85;
}
.iframe__modal .btn-close:hover,
.iframe__modal .btn-close:focus {
    opacity: 1;
}
.iframe__modal .btn-close > svg {
    font-size: 36px;
    color: red;
}
.banner__school {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.banner__school .socmed__box > a {
    margin-right: 20px;
}
.banner__school .socmed__box > a > svg {
    color: white;
    font-size: 22px;
}
.banner__school_img {
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    max-height: 525px;
}
.above__navbar {
    background-color: var(--bg__black) !important;
}