@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --ungu-main: #fe02b9;
    --kuning-main: #fff000;
    --biru-main: #016aea;
    --white-main: #fefefe;
}


/* Ubah Bootstrap */

.bg-ungu {
    background-color: var(--ungu-main);
    text-decoration: none;
}
.bg-biru {
    background-color: var(--biru-main);
    text-decoration: none;
}

.text-biru {
    color: var(--biru-main);
}
.text-ungu {
    color: var(--ungu-main);
}

/* ------------------------------------------- */

/* Layouting & Fonts */
* {
    font-family: "Open Sans", sans-serif;
}

.main-content {
    background-image: url('../img/bg_main.jpg');
    background-size: cover;
    background-position: 60%;
    min-height: 100vh;
}
.jumbotron-regist {
    background-image: url('../img/BG2.jpg');
    background-size: cover;
    min-height: 95dvh;
}
#about-img {
    pointer-events: none;
}

/* Minor Changes */

.btn-fonts {
    font-size: 25px;
    text-decoration: none;
}
.btn-icons {
    font-size: 70px;
}
.btn-link-ungu:hover {
    background-color: #b80287;

}
.btn-link-biru:hover {
    background-color: #0258c2;

}

/* Liquid Glass */

.glassmorphic-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glassmorphic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.glassmorphic-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50px;
    padding: 12px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.glassmorphic-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}