*,
html,
body {
       margin: 0;
       padding: 0;
       scroll-behavior: smooth;
}

a {
       text-decoration: none;
}

ul li {
       list-style-type: none;
}

:root {
       --animate-duration: 1s;
       --animate-delay: 1s;
       --animate-repeat: infinite;

       --pallete1: #5271ff;
       --pallete2: #38b6ff;
       --pallete3: #5e17eb;
       --pallete4: #004aad;
       --pallete5: #F5F7F8;
       --pallete6: #F6F5F5;
       --pallete7: #d9d9d9;
       --pallete8: #a6a6a6;
       --pallete9: #737373;
       --pallete10: #100C08;
       --pallete11: #3049A5;
       --pallete12: #F5F5F5;
       --pallete13: #60A3D9;
       --pallete14: #FD49A0;
       --pallete15: #070F2B;
       --pallete16: #222831;
       --pallete17: #31363F;
       --pallete18: #ff3131;
       --pallete19: #B4B4B8;
       --pallete20: #C7C8CC;
       --pallete21: #EF7C8E;
       --pallete22: rgb(245, 245, 245, 0.9);
       --pallete23: rgb(16, 12, 8, 0.8);
       --pallete24: #d8eefe;
       --pallete25: #e3f6f5;
       --pallete26: #ff5470;
       --pallete27: #094067;
       --pallete28: #232946;
       --pallete29: #25d366;
       --pallete30: #ff8906;
       --pallete31: rgb(255, 180, 0);
       --pallete32: rgb(9, 64, 103, 0.9);
       --pallete33: rgb(255, 244, 0);
       --pallete34: rgb(244, 205, 42);
       --pallete35: rgb(253, 246, 140);

       --pallete1op: rgba(82, 113, 255, 0.2);
       --pallete2op: rgba(56, 182, 255, 0.2);
       --pallete11op: rgba(48, 73, 165, 0.5);
       --pallete27op: rgba(9, 64, 103, 0.5);
       --pallete24op: rgba(216, 238, 254, 0.2);
       --pallete25op: rgba(227, 246, 245, 0.3);
       --pallete13op: rgba(96, 163, 217, 0.3);
}


/* make placeholder italic */
::-webkit-input-placeholder {
       font-style: italic;
}

:-moz-placeholder {
       font-style: italic;
}

::-moz-placeholder {
       font-style: italic;
}

:-ms-input-placeholder {
       font-style: italic;
}

/* Hide Arrows From Input Number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
       -webkit-appearance: none;
       margin: 0;
}

/* Firefox
input[type=number] {
       -moz-appearance: none;
} */


/* ===== START FLOATING BUTTON ========== */
#float {
       width: max-content;
       display: flex;
       justify-content: flex-end;
       align-items: center;
       position: fixed;
       right: 10px;
       bottom: 60px;
       z-index: 6;
}

#float .item {
       display: flex;
       justify-content: flex-start;
       flex-wrap: wrap;
       max-width: 15rem;
       height: 100%;
       padding: 0.5rem;
       padding-right: 1rem;
       border-radius: 10px;
       background-color: var(--pallete25)
}

#float .item span {
       color: var(--pallete15);
       font-size: 12px;
       margin: auto 0.2rem;
}

#float .float {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 60px;
       height: 60px;
       background-color: var(--pallete29);
       color: var(--pallete12);
       border-radius: 50px;
       text-align: center;
       font-size: 2rem;
       box-shadow: 1px 2px 3px var(--pallete7);
}

#float .item.hovered {
       cursor: pointer;
       box-shadow: 1px 2px 7px var(--pallete16);
       transition: 0.2s ease-in-out;
}

#float .float.hovered {
       transition: 0.2s ease-in-out;
       font-size: 2.3rem;
       background-color: var(--pallete12);
       color: var(--pallete29);
       border: 2px solid var(--pallete29);
}


/* ===== END FLOATING BUTTON ========== */


/* ===== START MAIN ========== */

main {
       width: 80%;
       display: flex;
       margin: 1rem auto;
}

main aside {
       font-family: Arial, Helvetica, sans-serif;
}

main article {
       margin: auto 1rem;
       width: 80%;
}

/* ===== END MAIN ========== */


/* ===CONTAINER-NAVBAR=== */
.container-navbar {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 7;
       display: flex;
       height: 80px;
       width: 100%;
       align-items: center;
       justify-content: space-between;
       background: transparent;
       transition: background-color 600ms;
       padding: 1.5rem 2%;
}

/* .sticking get  from Javascript */
.container-navbar.sticking {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       width: 100%;
       height: 80px;
       z-index: 7;
       display: flex;
       align-items: center;
       color: white;
       background-color: var(--pallete11);
       padding: 1.5rem 2%;
}

.container-navbar .navbar-logo img {
       height: 5rem;
       width: 5rem;
}

.container-navbar .navbar-link {
       display: flex;
}

.container-navbar .navbar-link .nav-item {
       padding: 0.3rem 0.7rem;
       font-size: 1rem;
       margin: auto 0.5rem;
       text-align: center;
}

.container-navbar .navbar-link .nav-item .nav-link a {
       color: var(--pallete12);
}

.container-navbar .navbar-link .nav-item .nav-link::after {
       content: '';
       display: block;
       padding-bottom: 0.2rem;
       border-bottom: 0.15rem solid var(--pallete12);
       transform: scaleX(0);
}

.container-navbar .navbar-link .nav-item .nav-link:hover::after {
       transform: scaleX(0.9);
       transition: 0.2s linear;
}

.container-navbar .navbar-link .nav-item span {
       position: fixed;
       display: flex;
       flex-direction: column;
       text-align: start;
       margin: 0.5rem;
       color: var(--pallete10);
       background-color: var(--pallete12);
       border-radius: 5px;
}

.container-navbar .navbar-link .nav-item span a {
       color: var(--pallete10);
       padding: 0.3rem 1rem;
       width: 100%;
       transition: 0.1s ease-out;
       font-size: 1rem;
}

.container-navbar .navbar-link .nav-item span a:hover {
       color: var(--pallete12);
       background-color: var(--pallete4);
       border-radius: 0.2rem;
       transition: 0.1s ease-in-out;
}

/* CSS untuk jquery class active */
/* .container-navbar .navbar-link .nav-item .active {
        border-radius: 5px;
        text-align: center;
} */

/* CSS untuk jquery class active pada navbar sticking */
/* .container-navbar.sticking .navbar-link .nav-item .active {
        background-color: var(--pallete12);
        color: var(--pallete10);
} */


.container-navbar .navbar-extra a {
       margin: 0 0.5rem;
       color: var(--pallete12);
       font-size: 1rem;
}

.container-navbar .navbar-extra a:hover {
       color: var(--pallete8);
}

#hamburgerMenu {
       display: none;
}

.navbar-footer {
       display: none;
}

/* ===END CONTAINER-NAVBAR=== */


/* ===CONTAINER-JUMBOTRON=== */

.section-jumbotron {
       position: relative;
       height: 100%;
       width: 100%;
}

.section-jumbotron .banner-jumbotron {
       height: 100%;
       width: 100%;
       /* background-image: url("../assets/img/jumbotron7.png"); */
       /* background-position: left 40%; */
       /* background-size: cover; */
       background-repeat: no-repeat;
       filter: brightness(0.7);
}

.section-jumbotron .banner-jumbotron img {
       width: 100%;
       background-size: contain;
       object-fit: cover;
       height: 32rem;
}

.section-jumbotron .container-jumbotron {
       position: absolute;
       bottom: 1rem;
       right: 0;
       display: flex;
       flex-direction: column;
       justify-content: center;
       height: max-content;
       margin: 0.5rem auto;
       width: 80%;
}

.section-jumbotron .container-jumbotron .container-jumbotron-item {
       display: flex;
       flex-direction: column;
       height: 100%;
       margin: 0 auto;
       min-width: 23rem;
       text-align: center;
       color: var(--pallete12);
       letter-spacing: 2px;
}

.section-jumbotron .container-jumbotron .container-jumbotron-item p {
       padding-bottom: 1rem;
       border-bottom: 1px solid var(--pallete12);
}

.container-jumbotron .container-jumbotron-item .item-link a {
       font-size: 1rem;
       margin: 0.5rem auto;
       background-color: transparent;
       color: var(--pallete12);
       border: 0.1rem solid var(--pallete12);
}

.container-jumbotron .container-jumbotron-item .item-link a:hover {
       margin: 0.5rem auto;
       background-color: var(--pallete2);
       color: var(--pallete12);
       font-weight: 700;
       border: 0.1rem solid var(--pallete12);
}

/* .section-jumbotron .container-jumbotron .container-jumbotron-item .jumbotron-item-services a .icon {
        background-color: tan;
        width: 3rem;
        font-size: 1.2rem;
} */

/* .section-jumbotron .container-jumbotron .container-jumbotron-item .jumbotron-item-services a {
        background-color: red;
        display: flex;
        margin: 0.3rem auto;
} */

/* ===END-JUMBOTRON=== */

/* === CONTAINER - INDEX === */
.wrapper-1,
.wrapper-2,
.wrapper-3 {
       display: flex;
       flex-direction: column;
       justify-content: center;
       margin: auto;
       width: 100%;
}

.wrapper-2 {
       background-color: var(--pallete28);
       color: var(--pallete12);
}

.wrapper-2 .container-index-header,
.wrapper-1 .container-index-header,
.wrapper-3 .container-index-header {
       font-family: 'Open Sans', sans-serif;
       border-bottom: 0.1rem solid var(--pallete8);
       width: 75%;
       margin: auto;
       text-align: center;
}

.wrapper-2 .container-index-header h1 {
       color: var(--pallete12);
       font-weight: bolder;
       margin: 1rem auto;
}

.wrapper-2 span {
       color: var(--pallete12);
}

.wrapper-1 .container-index-header h1,
.wrapper-3 .container-index-header h1 {
       font-weight: bolder;
       color: var(--pallete27);
       margin: 1rem auto;
}

.container-index {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       font-family: 'Open Sans', sans-serif;
       height: 100%;
       width: 80%;
       margin: 0.5rem auto;
}

.container-index .home-card {
       margin: 1.5rem;
       font-size: 1rem;
       width: 18rem;
       position: relative;
}

.container-index .home-card img {
       margin-bottom: 1rem;
       max-width: 260px;
}

.container-index .home-card h5 {
       font-size: 1.3rem;
       font-weight: 600;
       margin: 0.5rem auto;
}

.container-index .home-card p {
       text-align: left;
       margin-bottom: 2rem;
}

.container-index .home-card a {
       display: flex;
       position: absolute;
       bottom: 0;
       color: var(--pallete11);
       width: 100%;
       gap: 0.3rem;
       font-weight: 900;
}

.container-index .home-card a span:hover {
       gap: 2rem;
       transition: 0.2s ease-in-out;
       margin-right: 1rem;
}

/* === END - CONTAINER-INDEX === */


/* === START - ASIDE === */
main aside {
       width: 23rem;
}

main aside .aside-header {
       font-family: Arial, Helvetica, sans-serif;
       margin-bottom: 0.5rem;
       padding-bottom: 0.5rem;
       border-bottom: 1px solid var(--pallete7);
       font-size: 1rem;
}

main aside .aside-content .list-group .active {
       background-color: var(--pallete11);
}

main aside .aside-content .list-group .active .animate__animated {
       animation: flash;
       animation-iteration-count: var(--animate-repeat);
       animation-duration: 3s;
}

main aside .aside-content .list-group-item {
       display: flex;
       justify-content: start;
       align-items: center;
       gap: 0.5rem;
       text-wrap: nowrap;
}

main aside .aside-content .list-group-item li {
       width: 100%;
}

/* main aside .aside-content ul a:hover .animate__animated {
       animation: flash;
       animation-iteration-count: var(--animate-repeat);
       animation-duration: 3s;
} */

/* main aside .aside-content ul a:hover {
       color: var(--pallete1);
} */
/* === END - ASIDE === */

/* === START - MAIN - CONTAINER - CONTENT === */


main article .content-header-information {
       background-color: var(--pallete26);
       color: var(--pallete6);
       border-radius: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       text-wrap: wrap;
       padding: 1rem;
       font-size: 1.2rem;
       margin: 0.5rem 1rem;
}

main article .content-header-information .animate__animated {
       animation: flash;
       animation-iteration-count: var(--animate-repeat);
       animation-duration: 3s;
}

main article .content-header {
       font-size: 1.5rem;
       font-family: monospace;
       border-bottom: 1px solid var(--pallete7);
       margin: auto;
       margin: auto 1rem;
}

main article .container-content-input {
       display: flex;
       justify-content: center;
       width: auto;
       margin: 1rem;
}

main article .container-content-input .content-input {
       display: flex;
       flex-direction: column;
       width: 100%;
}

main article .container-content-input .content-input .loader-upload-front {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width: auto;
       gap: 1rem;
       margin: auto;
}

main article .container-content-input .content-input .uploading-text {
       animation: flash 2s infinite;
       color: var(--pallete11);
}

/* From Uiverse.io */
main article .container-content-input .content-input svg {
       width: 2rem;
       transform-origin: center;
       animation: rotate4 2s linear infinite;
}

main article .container-content-input .content-input circle {
       fill: none;
       stroke: hsl(214, 82%, 50%);
       stroke-width: 4;
       stroke-dasharray: 1, 200;
       stroke-dashoffset: 0;
       stroke-linecap: round;
       animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
       100% {
              transform: rotate(360deg);
       }
}

@keyframes dash4 {
       0% {
              stroke-dasharray: 1, 200;
              stroke-dashoffset: 0;
       }

       50% {
              stroke-dasharray: 90, 200;
              stroke-dashoffset: -35px;
       }

       100% {
              stroke-dashoffset: -125px;
       }
}


main article .container-content-input .content-input .input {
       display: flex;
       min-width: 23rem;
       margin: 0.3rem;
}

main article .container-content-input .content-input .input input {
       margin-right: 0.5rem;
}


main article .container-content-input .content-input .sub-input {
       max-width: 9rem;
}

main article .container-content-input .content-input .input label {
       min-width: 10rem;
       text-wrap: nowrap;
}

main article .container-content-input .content-input .input .img-preview2,
main article .container-content-input .content-input .input .img-preview1,
main article .container-content-input .content-input .input .img-preview {
       width: 100%;
       display: flex;
       justify-content: center;
}

main article .container-content-input .content-input .input #image_preview2,
main article .container-content-input .content-input .input #image_preview1,
main article .container-content-input .content-input .input #image_preview {
       display: none;
       max-width: 200px;
       max-height: 200px;
       margin: 1rem auto;
}

main article .container-content-input .content-input .input .img-preview1 {
       width: 100%;
       display: flex;
       justify-content: center;
}

main article .container-content-input .content-input .form-check {
       width: 100%;
       display: flex;
       justify-content: center;
       margin: 1rem auto;
}

main article .container-content-input .content-input .form-check input {
       height: 1.2rem;
       width: 1.2rem;
       box-shadow: 0 0 9px var(--pallete19);
}


main article .container-content-input .content-input .form-check label {
       text-wrap: wrap;
       margin: auto 1rem;
}

main article .container-content-input .submit-button {
       display: flex;
       justify-content: center;
       text-wrap: nowrap;
       width: 17rem;
       margin: auto;
}

main article .container-content-input .submit-button button {
       background-color: var(--pallete8);
       color: var(--pallete12);
       border: none;
       padding: 0.7rem;
       border-radius: 0.7rem;
       margin: auto;
       width: 100%;
}

main article .container-content-input .submit-button button:hover {
       background-color: var(--pallete1);
       transition: 0.1s ease-in-out;
}

main article .content-term {
       display: flex;
       flex-direction: column;
       margin: auto;
       justify-content: center;
       width: 50%;
       background-color: var(--pallete26);
       border-radius: 0.3rem;
}

main article .content-term p {
       color: var(--pallete12);
       margin: auto 0.5rem;
       font-size: 12px;
       font-style: italic;
}

main article .container-content-input .input-group label {
       min-width: 10rem;
}

main article .container-content-input .content-input .error-text {
       max-width: 90%;
       margin: auto;
       text-align: end;
}

/* === END - MAIN - CONTAINER - CONTENT === */


/* === CONTAINER - CONTENT - TABLE - TARIF === */

main article .container-content-tableTarif {
       overflow: auto;
       margin: 1rem auto;
       border-radius: 0.5rem;
       max-width: 95%;
       height: auto;
       box-shadow: 0 1px 10px 0 var(--pallete7);
       border: 1px solid var(--pallete7);
}

main article .container-content-tableTarif table th {
       text-wrap: nowrap;
       min-width: 1rem;
       text-align: center;
}

main article .container-content-tableTarif table tbody tr {
       text-align: center;
}

/* === END - CONTAINER - CONTENT - TABLE  === */

main article .container-content-table {
       overflow: auto;
       margin: 1rem auto;
       border-radius: 0.5rem;
       width: auto;
       max-height: 50vh;
       overflow: auto;
       box-shadow: 0 1px 10px 0 var(--pallete7);
       border: 1px solid var(--pallete7);
}

main article .container-content-table table th {
       text-wrap: nowrap;
       min-width: 1rem;
       text-align: center;
}

main article .container-content-table table tbody tr {
       text-align: center;
       text-wrap: nowrap;
}

/* === END - CONTAINER - CONTENT - TABLE === */

/* === CONTAINER-INDEX-CARD-TARIF === */

main article .container-content-subTarif {
       margin: 1rem auto;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       overflow: auto;
}

main article .container-content-subTarif .card .card-header-tarif {
       position: sticky;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1;
       padding: 0.5rem;
       font-size: 1.5rem;
       background-color: var(--pallete11);
       color: var(--pallete24);
}

main article .container-content-subTarif .card {
       box-shadow: 0 1px 10px 0 var(--pallete7);
       flex: 1;
       flex-basis: 23rem;
       height: 60vh;
       overflow-y: auto;
       margin: 0.5rem;
}

/* main article .container-content-subTarif .card .card-header { */
/* background-color: var(--pallete1); */
/* font-weight: 600; */
/* } */

main article .container-content-subTarif .card .card-body table {
       justify-content: flex-start;
       font-size: 1rem;
       width: 100%;
       table-layout: auto;
       margin-bottom: 0.5rem;
}

main article .container-content-subTarif .card .card-body table tr {
       display: flex;
}


main article .container-content-subTarif .card .card-body table td {
       text-align: left;
       padding: 0.3rem;
       min-width: 1.5rem;
       border-bottom: 1px solid var(--pallete7);
}

main article .container-content-subTarif .card .card-body table tr:nth-child(even) {
       background-color: var(--pallete12);
}

/* === END-CONTAINER-INDEX-CARD-TARIF === */

/* === START - CONTAINER-INDEX-SKP === */

.container-index-SKP {
       width: 100%;
       height: 100%;
}

.container-index-SKP form {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
}

.container-index-SKP form .card {
       max-width: 23rem;
       max-height: 28rem;
       color: var(--pallete12);
       border-radius: 0.5rem;
       margin: 0.5rem auto;
}

.container-index-SKP form .card .card-header {
       color: var(--pallete28);
}

.container-index-SKP form .card .card-body {
       color: var(--pallete12);
       background-color: var(--pallete11);
}

.container-index-SKP form .card .input-group {
       display: flex;
       flex-direction: column;
       width: 100%;
       margin: 0.5rem auto;
}

.container-index-SKP form .card .input-group label {
       font-size: 1rem;
       font-weight: 700;
}

.container-index-SKP form .card .input-group input {
       width: 100%;
       z-index: 0;
}

.container-index-SKP form .card .input-group .error-text {
       text-align: start;
       width: max-content;
       font-size: 1rem;
       font-style: italic;
       font-weight: 700;
       color: var(--pallete12);
       background-color: var(--pallete18);
       padding: 0 0.5rem;
       border-top-left-radius: 0.5rem;
}

.container-index-SKP form .table-input {
       width: auto;
       table-layout: auto;
       overflow-x: auto;
       max-height: 60vh;
       margin: 0.5rem auto;
       border-top-right-radius: 1rem;
       border-top-left-radius: 1rem;

}

.container-index-SKP form table thead {
       position: sticky;
       top: 0;
       z-index: 1;
}

.container-index-SKP form .table-input table thead tr th {
       background-color: var(--pallete11);
       color: var(--pallete12);
       text-align: center;
       font-size: 1rem;
       border-bottom: 0.2rem solid var(--pallete24);
}

.container-index-SKP form .table-input table tbody tr td {
       background-color: var(--pallete9);
       color: var(--pallete25);
       text-align: start;
       font-weight: 600;
       font-size: 1rem;
       border-bottom: 0.1rem solid var(--pallete12);
}

.container-index-SKP form .table-input table tbody tr td .form-check-input {
       width: 3rem;
       height: 3rem;
}

.container-index-SKP form .table-input table .fill-col {
       min-width: 2rem;
       max-width: 5rem;
       background-color: var(--pallete9);
}

.container-index-SKP form .input-submit {
       display: flex;
}

.container-index-SKP form .input-submit button {
       margin: auto;
       background-color: var(--pallete11);
       color: var(--pallete12);
       font-weight: 700;
       max-width: 100%;
       min-width: 10rem;
}

.container-index-SKP form .input-submit button:hover {
       background-color: var(--pallete2);
}

/* === END - CONTAINER-INDEX-SKP  === */




/* ===CONTAINER-INDEX--BANNER===  */
.container-index-banner {
       display: flex;
       justify-content: center;
       font-family: 'Open Sans', sans-serif;
       height: 12rem;
       overflow: hidden;
       position: relative;
}

.container-index-banner h1 {
       position: absolute;
       align-self: center;
       display: flex;
       flex-direction: column;
       text-align: center;
       font-size: 3rem;
       color: var(--pallete12);
}

.container-index-banner .banner-img {
       display: flex;
       height: 12rem;
}

/* ===END-CONTAINER-INDEX-BANNER===  */


/* CONTAINER-INDEX-INFO-OFFICE */

.container-index .card .card-header .nav {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       width: 100%;
       font-size: 1rem;
       font-weight: 200;
}

.container-index .card .card-header .nav .nav-item .nav-link {
       width: 13rem;
       text-align: center;
}

.container-index .card .card-header .nav .active a {
       /* animation: flash; */
       /* animation-iteration-count: var(--animate-repeat); */
       /* animation-duration: 1s; */
       color: var(--pallete11);
       font-weight: 600;
       font-size: 1.1rem;
}

.container-index .card .card-header .nav-item a:hover {
       color: var(--pallete2);
}

.container-index .card .card-header .nav-item .nav-link::after {
       content: '';
       display: block;
       padding-bottom: 0.2rem;
       border-bottom: 0.05rem solid var(--pallete10);
       transform: scaleX(0);
}

.container-index .card .card-header .nav-item .nav-link:hover::after {
       transform: scaleX(0.9);
       transition: 0.3s linear;
}

.container-index .card .card-body .card img {
       height: auto;
       width: 720px;
}

.container-index .card .card-body .card .card-item a {
       display: flex;
       font-size: 1rem;
       color: var(--pallete12);
       max-width: 80%;
       margin: 0.2rem;
}

.container-index .card .card-body .card .card-item a span {
       margin: 0.5rem;
}

.container-index .card .card-body .card .card-item iframe {
       position: absolute;
       bottom: 0;
       right: 0;
       border-top-left-radius: 0.7rem;
       max-width: 360px;
}

/* END-CONTAINER-INDEX-INFO-OFFICE */

/* CONTAINER-INDEX-VISI-MISI */

.container-index .card .card-header {
       display: flex;
       font-weight: 900;
       font-size: 1rem;
       justify-content: center;
}

.container-index .card .card-header .nav-item .nav-link {
       color: var(--pallete10);
}

.container-index .card .card-body p {
       text-align: justify;
       text-indent: 40px;
       line-height: 40px;
}

.container-index .card {
       display: flex;
       flex-wrap: wrap;
}

.container-index .card .card-body .card-item {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(min(27rem, 100%), 1fr));
       grid-gap: 1rem;
}

.container-index .card .card-body .card-item .card-body p {
       text-align: justify;
       text-indent: 40px;
       line-height: 40px;
}

.container-index .card .card-body .card-item .card-body .list-group-item {
       text-align: justify;
       line-height: 2rem;
       margin: 0.3rem 0;
}

/* END-CONTAINER-INDEX-VISI-MISI */

/* === START SECTION WRAPPER - 4 === */
.wrapper-4 {
       height: 10rem;
       border-top: 1px solid var(--pallete7);
       background-color: var(--pallete5);
}

.wrapper-4 .container-logo-header {
       display: flex;
       align-items: center;
       justify-content: center;
       height: 3rem;
       width: 100%;
       margin: auto;
}

.wrapper-4 .container-logo-header h5 {
       color: var(--pallete9);
       text-shadow: 1px 1px 1px var(--pallete6);
       text-wrap: wrap;
       text-align: center;
       letter-spacing: 1px;
}

.wrapper-4 .container-logo {
       position: relative;
       overflow: hidden;
       min-width: 23rem;
       max-width: 75rem;
       height: auto;
       margin: auto;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       background-color: var(--pallete5);
}

.wrapper-4 .container-logo .logo {
       display: flex;
       gap: 3rem;
       padding: 1rem;
       animation: infinite-scroll 100s linear infinite;
}

.wrapper-4 .container-logo .logo img {
       height: 5rem;
       width: max-content;
       box-shadow: 0 1px 3px 0 var(--pallete8);
       filter: grayscale(100%);
}

.wrapper-4 .container-logo::before,
.wrapper-4 .container-logo::after {
       content: "";
       position: absolute;
       top: 0;
       width: 15%;
       height: 100%;
       z-index: 2;
}

.wrapper-4 .container-logo::before {
       left: 0;
       background: linear-gradient(to right, var(--pallete6), transparent);
}

.wrapper-4 .container-logo::after {
       right: 0;
       background: linear-gradient(to left, var(--pallete6), transparent);
}

@keyframes infinite-scroll {
       0% {
              transform: translateX(0);
       }

       100% {
              transform: translateX(-100%);
       }
}


/* === START SECTION WRAPPER - 4 === */



/* START-ERROR-NOTIF */

.error-text {
       text-align: end;
       width: max-content;
       font-size: 0.9rem;
       font-style: italic;
       color: var(--pallete18);
       width: 100%;
}

.error-text .animate__animated {
       animation: flash;
       animation-iteration-count: var(--animate-repeat);
       animation-duration: 2s;
}

/* END-ERROR-NOTIF */



/* === CONTAINER-INDEX-FOOTER === */

.section-footer {
       display: flex;
       flex-wrap: wrap;
       align-items: first baseline;
       height: max-content;
       flex-wrap: wrap;
       font-family: 'Open Sans', sans-serif;
       font-size: 1rem;
       width: 100%;
       background-color: var(--pallete28);
       margin: 1rem auto;
}

.footer-item {
       width: 23rem;
       margin: 2rem auto;
}

.footer-item .footer-item-header {
       display: flex;
       flex-direction: column;
       justify-content: center;
       text-align: center;
       align-items: center;
       color: var(--pallete12);
       line-height: 0.5rem;
}

.footer-item .footer-item-body {
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       width: 20rem;
       margin: auto;
}

.footer-item .footer-item-body a {
       display: flex;
       align-items: center;
       color: var(--pallete12);
}

.footer-item .footer-item-body a .icon {
       font-size: 1.5rem;
       width: 2rem;
       text-align: center;
}

.footer-item .footer-item-body a span {
       margin: 0.3rem;
}

.footer-item span::after {
       content: '';
       display: block;
       border-bottom: 0.1rem solid var(--pallete12);
       transform: scaleX(0);
}

.footer-item span:hover::after {
       transform: scaleX(1);
       transition: 0.2s linear;
}

.footer-item .footer-item-social {
       display: flex;
       flex-wrap: wrap;
       width: 100%;
       justify-content: center;
       font-size: 3rem;
       gap: 1rem;
}

.footer-item .footer-item-social .icon {
       color: var(--pallete12);
       display: flex;
       justify-content: center;
       width: 5rem;
       padding: 0.5rem;
       border-radius: 0.7rem;
}

.footer-item .footer-item-social .icon:hover {
       border-radius: 0.7rem;
       background-color: var(--pallete12);
       color: var(--pallete27);
       transition: 0.2s linear;
}

.footer-item .footer-item-body iframe {
       width: 100%;
       height: auto;
       margin: auto;
       overflow: hidden;
       border-radius: 0.7rem;
}

/* === END-CONTAINER-INDEX-FOOTER === */


footer {
       font-family: 'Roboto', sans-serif;
       /* background-color: var(--pallete); */
       color: var(--pallete10);
       font-size: 0.7rem;
}