:root {
    --seasalt: #F9F9F9ff;
    --marian-blue: #354283ff;
    --french-gray: #B7BCD5ff;
    --lavender-web: #D6D7E2ff;
    --ultra-violet: #5E4F93ff;
    --jasmine: #F0D27Fff;
    --ultra-violet-2: #504A8Dff;
}

.brand-logo {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
    color: #ed5cac;
}

.text-grey {
    color: grey;
}

.text-magenta {
    color: #c31e69;
}

.courgette {
    font-family: "Courgette", cursive;
    font-weight: 400;
    font-style: normal;
}

.pacifico {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
}

.comfortaa {
    font-family: "Comfortaa", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.kanit-extralight {
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.kanit-light {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.kanit-regular {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.bg-white {
    background-color: #fff !important;
    box-shadow: -2px 10px 138px -42px rgba(0, 0, 0, 0.64);
    -webkit-box-shadow: -2px 10px 138px -42px rgba(0, 0, 0, 0.64);
    -moz-box-shadow: -2px 10px 138px -42px rgba(0, 0, 0, 0.64);
}

.navbar-item-kuinvite {
    padding-right: 10px;
    padding-left: 10px;
}

.navbar-item-kuinvite .active {
    border-bottom: solid 1px #ed5cac !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    /* color: var(--bs-navbar-active-color); */
    border-bottom: solid 3px var(--jasmine) !important;
}

.navbar-item-kuinvite-login {
    padding-right: 10px;
    padding-left: 10px;
    background: #ed5cac;
    background: linear-gradient(0deg, #ed5cac 0%, #c31e69 80%);
    background: -webkit-linear-gradient(0deg, #ed5cac 0%, #c31e69 80%);
    background: -moz-linear-gradient(0deg, #ed5cac 0%, #c31e69 80%);
    border-radius: 10px;

}

.navbar-item-kuinvite-login>a {
    color: #fff !important;
}


.btn-get-started {
    padding: 15px;
    color: #fff !important;
    background: #ed5cac;
    background: linear-gradient(0deg, #ed5cac 0%, #c31e69 80%);
    background: -webkit-linear-gradient(0deg, #ed5cac 0%, #c31e69 80%);
    background: -moz-linear-gradient(0deg, #ed5cac 0%, #c31e69 80%);
    box-shadow: 1px 20px 56px -20px rgba(0, 0, 0, 0.52);
    -webkit-box-shadow: 1px 20px 56px -20px rgba(0, 0, 0, 0.52);
    -moz-box-shadow: 1px 20px 56px -20px rgba(0, 0, 0, 0.52);
    border-radius: 15px;
    font-size: 25px;
}

.btn-get-started:hover {
    transform: translateY(-5px);
    box-shadow: 1px 20px 56px -8px rgba(0, 0, 0, 0.52);
    -webkit-box-shadow: 1px 20px 56px -8px rgba(0, 0, 0, 0.52);
    -moz-box-shadow: 1px 20px 56px -8px rgba(0, 0, 0, 0.52);
    transition: 0.5s;
}

.navbar-item-kuinvite-masuk>a {
    color: #fff;
    font-weight: bold;
}

.section-home {
    height: 100vh;
    width: 100%;
}

.section-feature {
    min-height: 100vh;
    width: 100%;
    padding-top: 100px;
    /* background-color: #c31e69; */
    background-color: var(--marian-blue);
    color: var(--lavender-web);
    padding-bottom: 100px;
}

.section-design {
    /* height: 100vh; */
    width: 100%;
    /* padding-top: 100px; */
    /* padding-bottom: 100px; */
    min-height: fit-content;
    margin-bottom: 100px;
}

.section-pricing {
    /* height: 100vh; */
    padding-bottom: 60px;
    min-height: fit-content;
    width: 100%;
    padding-top: 100px;
    color: var(--lavender-web);
    /* background-color: #c31e69; */
    background-image: url(/assets/images/front/prestasi-edit.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* filter: brightness(70%); */
}

.img-banner {
    width: 100%;
    box-shadow: 1px 20px 56px -20px rgba(0, 0, 0, 0.52);
    -webkit-box-shadow: 1px 20px 56px -20px rgba(0, 0, 0, 0.52);
    -moz-box-shadow: 1px 20px 56px -20px rgba(0, 0, 0, 0.52);
    border-radius: 10px;
}

.img-banner:hover {
    transform: rotateZ(5deg);
    transition: 0.5s;
}

.rotate-right:hover {
    transform: rotateZ(5deg);
    transition: 0.5s;
}

.rotate-left:hover {
    transform: rotateZ(-5deg);
    transition: 0.5s;
}

.design-panel {
    margin-top: 50px;
}

.design-card {
    width: 100%;
    height: 200px;
    background-color: var(--ultra-violet-2)
}

@media (max-width : 825px) {
    .section-home-img {
        display: none;
    }

    .section-home .container {
        padding-top: 150px;
    }

    .section-home .container {
        padding-top: 150px;
    }

    .btn-get-started {
        font-size: 16px;
        border-radius: 10px;
        float: right;
    }

    .box-feature>.box-feature-icon {
        height: fit-content;
        font-size: 2em;
    }

    .box-feature>.box-feature-text {
        margin-top: 20px;
        font-size: 1em;
        height: 100px;
    }

    .section-home,
    .section-feature,
    .section-design,
    .section-pricing {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .viewport-header {
        position: relative;
        /* height: 100vh; */
        text-align: center;
        /* display: flex; */
        align-items: center;
        justify-content: center;
        margin-top: -120%;
        color: var(--lavender-web);
    }

    .viewport-header h1 span {
        font-size: 40px;
        /* border-bottom: solid 2px var(--jasmine); */
    }

    .viewport-header span {
        font-size: 20px;
    }


    video {
        object-fit: cover;
        width: 100%;
        height: 100vh;
        /* position: fixed; */
        /* top: 0; */
        /* left: 0; */
        filter: brightness(60%);
        border-radius: 20px;
        /* margin-top: 50px; */
    }
    
    .box-feature {
        width: 100%;
        border-radius: 15px;
        box-shadow: 5px 3px 0px 0px var(--jasmine);
        background-color: #fff;
        padding: 30px;
        min-height: fit-content;
    }
}


@media (min-width : 825px) {
    .section-home-img {
        display: block;
    }

    .section-home .container {
        padding-top: 200px;
    }

    .section-home>.container>.row>.col-md-6:nth-child(2) {
        padding-top: 100px;
    }

    .navbar-item-kuinvite-login {
        margin-left: 30px;
    }

    .viewport-header {
        position: relative;
        /* height: 100vh; */
        text-align: center;
        /* display: flex; */
        align-items: center;
        justify-content: center;
        margin-top: -30%;
        color: var(--lavender-web);
    }

    .viewport-header h1 span {
        font-size: 60px;
        border-bottom: solid 2px var(--jasmine);
    }

    .viewport-header span {
        font-size: 30px;
    }


    video {
        object-fit: cover;
        width: 100%;
        height: 100vh;
        /* position: fixed; */
        /* top: 0; */
        /* left: 0; */
        filter: brightness(60%);
        border-radius: 20px;
        margin-top: 50px;
    }

    .box-feature {
        width: 100%;
        border-radius: 15px;
        box-shadow: 5px 3px 0px 0px var(--jasmine);
        background-color: #fff;
        padding: 30px;
    }
}

.box-feature>.box-feature-icon {
    width: 100px;
    height: 100px;
    text-align: center;
    color: var(--ultra-violet);
    font-size: 4em;
    margin: auto;
    margin-top: 30px;
}

.box-feature>.box-feature-text {
    width: 100%;
    height: 180px;
    margin-top: 50px;
    text-align: center;
    font-size: 15px;
    color: var(--marian-blue);
}

.section-feature h2:nth-child(2),
.section-pricing h2:nth-child(2) {
    font-size: 60px;
    color: var(--jasmine);
    text-shadow: 2px 2px var(--lavender-web);
}

.navbar-brand h1 {
    color: var(--marian-blue);
    display: inline-block;
}

.section-design h2 {
    color: var(--jasmine);
    margin-bottom: 30px;
}

.navbar-brand img {
    height: 40px;
    margin-top: -15px;
}

.gold-medal {
    background-color: rgb(206, 182, 47);
    box-shadow: 5px 5px rgb(155, 140, 65);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0px auto;
    color: rgb(173, 153, 40);
    font-size: 100px;
    padding-top: 20px;
    margin-top: 20px;
}

.silver-medal {
    background-color: rgb(218, 217, 215);
    box-shadow: 5px 5px rgb(184, 184, 184);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin: 0px auto;
    color: rgb(167, 167, 167);
    font-size: 80px;
    padding-top: 20px;
    margin-top: 40px;
}

.brown-medal {
    background-color: rgb(206, 158, 63);
    box-shadow: 5px 5px rgba(212, 143, 53, 0.829);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    color: rgb(172, 132, 53);
    font-size: 60px;
    padding-top: 30px;
    margin: 0px auto;
    margin-top: 70px;
}

.section-pricing .row .row {
    margin-top: 60px;
}

.text-medal span {
    font-size: 20px;
}

.text-medal .count {
    color: var(--seasalt);
    text-shadow: 3px 3px var(--french-gray);
    font-size: 50px;
}

.card {
    padding: 10px;
    color: var(--marian-blue);
    margin-bottom: 10px;
    text-align: left;
    font-weight: bolder;
}

.brown {
    background-image: linear-gradient(to right, var(--seasalt), rgb(206, 158, 63));
}

.silver {
    background-image: linear-gradient(to right, var(--seasalt), rgb(184, 184, 184));
}

.gold {
    background-image: linear-gradient(to right, var(--seasalt), var(--jasmine));
}

.section-contact {
    background-color: var(--ultra-violet);
    padding: 30px;
    color: var(--lavender-web);
}

.section-contact .row .sosmed {
    font-size: 30px;
}

.section-contact .information .row {
    margin-bottom: 10px;
}

.section-contact .qr img{
    width: 100%;
    box-shadow: 5px 5px var(--jasmine);
    margin-bottom: 10px;
}

.section-contact .qr p{
    text-align: center;
    font-weight: bold;
}

.section-footer {
    background-color: var(--marian-blue);
    padding-top: 20px;
    font-weight: bold;
    color: var(--lavender-web);
}

.section-fasilitas {
    background-color: var(--jasmine);
    color: #fff;
    padding: 30px;
}

.section-fasilitas .count {
    font-size: 80px;
    text-shadow: 3px 3px var(--marian-blue);
}

.section-fasilitas .row {
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    width: 50%;
    text-align: center;
}

.section-fasilitas .row span {
    font-size: 30px;
    color: var(--marian-blue);
}

.section-fasilitas-detail {
    padding: 30px;
    padding-bottom: 100px;
    background-color: #fff;
}

.section-fasilitas-detail h2 {
    text-align: center;
    color: var(--french-gray);
    margin-top: 30px;
    margin-bottom: 30px;
}

.section-fasilitas-detail .row-jurusan .bi {
    font-size: 30px;
    color: var(--jasmine);
}

.section-fasilitas-detail .row-fasilitas .bi {
    font-size: 20px;
    color: var(--ultra-violet-2);
}

.section-fasilitas-detail .row-fasilitas p {
    font-size: 20px;
    /* color: var(--ultra-violet-2); */
}

.section-fasilitas-detail .row-jurusan .row {
    margin-bottom: 20px;
}

.section-fasilitas-detail .row-fasilitas .row {
    margin-bottom: 20px;
    background-color: var(--jasmine);
    padding: 10px;
    border-radius: 10px;
    margin: 5px;
    vertical-align: middle;
}

.design-card-article {
    background-color: #fff;
    border-radius: 10px;
    min-height: 100px;
    margin-bottom: 10px;
}

.design-card-article h3 {
    font-size: 20px;
}

.design-card-article .article-content {
    padding: 20px;
    text-align: justify;
}

.design-card-article .article-content .link {
    width: 100%;
    text-align: right;
}

.design-card-article .article-content .link a {
    font-size: 20px;
    color: var(--ultra-violet-2);
}


.design-card-article .article-content h3 {
    color: var(--ultra-violet-2);
    font-weight: bold;
}

.design-card-article .img-news {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 10px 10px;
}