body {
    background: linear-gradient(
        138.18deg,
        #eae8fd 0%,
        #fce5e6 94.44%
    ) !important;
}

/* Nav */
.navbar-custom {
    background-color: white !important;
    margin: 1rem 60px;
    box-shadow: -1px 3px 19px 0px #0000004a !important;
}

.navbar-custom .nav-link {
    padding: 0px 10px !important;
}

/* Btn */

.btn-purple {
    background-color: #a79cf2;
    color: white;
}

.btn-purple:hover {
    background-color: #9989fc;
    color: white;
}

/* Custom hero */

.custom-hero {
    height: fit-content;
    padding-top: 300px;
    padding-bottom: 0 !important;
    position: relative;
    z-index: 4;
    border-radius: 3.5rem 3.5rem 0 0;
    transform: translateY(-200px);
    background: linear-gradient(138.18deg, #eae8fd 0%, #fce5e6 94.44%);
}

.school-img {
    width: 80% !important;
    height: auto !important;
    right: 25px;
    top: 55px;
}

/* Custom card */

.custom-card {
    width: 196px;
    height: 280px;
    margin: 20px;
    border-radius: 30px;
    background-color: white;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 10%);
}

.custom-card .icon {
    height: 126px;
    width: 126px;
    background: linear-gradient(138.18deg, #eae8fd 0%, #fce5e6 94.44%);
    overflow: hidden;
    border-radius: 100%;
    margin-bottom: 20px;
}

.custom-card .text {
    font-size: 20px;
    color: black;
    line-height: 23px;
    text-align: center;
    font-weight: 500;
}

/* Visi Card */

.visi-card {
    padding: 50px;
    border-radius: 80px;
    background-color: white;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 10%);
}

.visi-card .header {
    color: black;
    font-size: 32px;
    font-weight: 700;
}

.visi-card .sub-header {
    color: black;
    font-size: 24px;
    font-weight: 400;
}

.visi-card .bg {
    background: #f5f5f9;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    padding: 5px 10px;
    margin: 10px 0;
    width: 90%;
}

/* FAQ */

.faq .header {
    color: black;
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    margin: 0;
}

.faq .sub-header {
    color: #697a8d;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 40px;
}

.bg-gradient-custom {
    background: linear-gradient(138.18deg, #eae8fd 0%, #fce5e6 94.44%);
    height: 300px;
    width: 100%;
}

/* custom-card-gp */
.custom-card-gp {
    background-color: white;
    box-shadow: 2px 2px 4px 0px #0000001a;
    border-radius: 8px;
}

.custom-card-gp h4 {
    font-weight: 700;
    font-size: 32px;
    color: black;
    margin-bottom: 10px;
}

.custom-card-gp li,
.custom-card-gp .th {
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    color: black;
}
.custom-card-gp .tp {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: black;
}

.custom-card-gp .li-c li {
    font-size: 20px;
    font-weight: 700;
    color: black;
}

.custom-card-gp .li-c .li-ic li {
    font-size: 20px;
    font-weight: 400;
    color: black;
    list-style-type: none;
}

.custom-card-gp .li-c .li-ic-od li {
    font-size: 20px;
    font-weight: 400;
    color: black;
}

.component-container {
    background-color: #0607568a;
    width: 100%;
    height: 500px;
}

.component-container h1 {
    font-weight: 900;
    font-size: 40px;
    color: white;
}

.component-card {
    width: 422px;
    border-radius: 8px;
    background-color: white;
    padding: 10px;
    border: 0.5px solid #c7c7c7;
    box-shadow: 2px 2px 4px 0 #0000001a;
}

.component-card .header img {
    height: 195.95px;
    border-radius: 10px;
    object-fit: cover;
}

.dashboard .dashboard-custom-card {
    background: white;
    padding: 20px;
    height: fit-content;
    border-radius: 20px;
}

.sideCard {
    background-color: #696cff;
    padding-left: 5px;
    border-radius: 20px;
    box-shadow: 2px 2px 4px 0 #0000001a;
}

.dashboard .dashboard-custom-card .fa-user-group {
    font-size: 30px;
    color: #696cff;
    border-right: 1px solid #696cff;
}

.dashboard .dashboard-custom-card .p-header {
    font-size: 14px;
    color: #566a7f;
    font-weight: 500;
}

.dashboard .dashboard-custom-card .count {
    font-size: 20px;
    color: #000000;
    font-weight: 900;
}

.dashboard .dashboard-custom-card p {
    margin-bottom: 0;
}

/* Responsive */

@media screen and (max-width: 1199px) {
    .school-img {
        top: 85px;
    }

    .custom-hero {
        padding-top: 200px;
        transform: translateY(-100px);
    }

    .custom-card-gp li,
    .custom-card-gp .th,
    .custom-card-gp .tp {
        font-size: 18px;
    }

    .custom-card-gp .li-c li,
    .custom-card-gp .li-c .li-ic li,
    .custom-card-gp .li-c .li-ic-od li {
        font-size: 14px;
    }
}

@media screen and (max-width: 992px) {
    .school-img {
        top: 105px;
    }

    .navbar-brand {
        width: 100%;
        display: flex !important;
        justify-content: space-between;
    }

    .visi-card .bg {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .school-img {
        top: 75px;
    }

    .landing-hero {
        padding-bottom: 180px;
    }

    .custom-hero {
        padding-top: 130px;
        transform: translateY(-170px);
    }
}

@media screen and (max-width: 648px) {
    .school-img {
        top: 50px;
    }

    .custom-hero {
        transform: translateY(-45px);
    }

    .landing-hero-blank {
        padding-top: 110px;
    }

    .visi-card {
        border-radius: 25px;
        padding: 20px;
    }

    .visi-card .header {
        font-size: 22px;
    }

    .visi-card .sub-header {
        font-size: 14px;
    }

    .custom-card-gp li,
    .custom-card-gp .th,
    .custom-card-gp .tp {
        font-size: 14px;
    }

    .custom-card-gp .li-c li,
    .custom-card-gp .li-c .li-ic li,
    .custom-card-gp .li-c .li-ic-od li {
        font-size: 12px;
    }

    .custom-card-gp h4 {
        font-size: 20px;
        text-align: center;
    }
}

@media screen and (max-width: 575px) {
    .landing-hero {
        padding-bottom: 30px;
    }
}