@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf") format("ttf"),
       url("assets/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf") format("ttf");
  font-style: normal;
  font-display: swap;
}

:root {
    --primary: #4640de;
    --primary-hover: #332de4;
    --primary-light: #4640DE1A;
    --primary-active: #E9EBFD;

    --danger-color: #dc3545;
    
    --success: #56CDAD;
    --warning: #ffb836;                  
    
    --white: #ffffff;
    --black: #000000;

    --darker: #202430;
    --darker-text: #D6DDEB;
    
    --headings: #202430;
    --body: #626262;
    
    --sidebar-bg-color: #f8f8fd;
    --sidebar-bg-active: #E9EBFD;

    /* BREAKPOINT */
    --xs: 0;
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
    --xxl: 1400px;

}

* {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    box-sizing: border-box;
    color: var(--body);
}

body {
    color: var(--body);
}

.bg-primary-light {
    background-color: var(--primary-light) !important;
}
.bg-sidebar {
    background-color: var(--sidebar-bg-color) !important;
}

/* MODIFIKASI UNTUK WARNA ================================ */

.primary,
.text-primary
{
    color: var(--primary) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
}
.border-primary {
    border-color: var(--primary) !important;
}

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}
.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}
.btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--white) !important;
}

.alert-primary {
    background-color: var(--primary-active) !important;
    border-color: var(--sidebar-bg-active) !important;
}

.bg-darker {
    background-color: var(--darker) !important;
}

/* MODIFIKASI UNTUK WARNA ================================ */

/* NAVBAR ==================================================== */
.navbar .navbar-collapse a.btn-primary {
    color: var(--white) !important;
}
ul.navbar-nav li.nav-item a {
    color: var(--body) !important;
}
ul.navbar-nav li.nav-item a.nav-link.active {
    position: relative;
    color: var(--primary) !important;
}
ul.navbar-nav li.nav-item a.nav-link.active::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary);
}
ul.navbar-nav li.nav-item a:hover {
    color: var(--primary-hover) !important;
}

ul.navbar-nav li a.nav-link.active:hover {
    /*  */
}

/* NAV UNDERLINE */
.nav-link.nav-underline {
    color: var(--darker) !important;
    border-radius: 0px !important;
    margin-bottom: 8px;
}
.nav-link.nav-underline.active {
    background-color: unset !important;
    color: var(--primary) !important;
    font-weight: 600;
    border-bottom: 3px solid var(--primary);
}
.nav-link.nav-underline:hover {
    background-color: var(--primary-active) !important;
}
/* END NAVBAR ==================================================== */


/* SPACING ==================================================== */
.py-50 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}
.py-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}
.py-150 {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
}
.py-200 {
    padding-top: 200px !important;
    padding-bottom: 200px !important;
}
/* END SPACING ==================================================== */


/* MODIFIKASI PADA TYPOGRAPHY ================================ */
i {
    color: inherit;
}

a {
    color: var(--primary) !important;
}
a:not(.link-underline){
    text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--headings);
    font-weight: bold;
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span
 {
    font-size: unset !important;
}

.darker-text {
    color: var(--darker-text);
}

.social-footer {
    display: inline-flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    width: 28px;
    height: 28px;
}
.social-footer i {
    color: var(--darker-text) !important;
    margin: 0 auto;
}
.social-footer:hover {
    background-color: var(--primary);
}

#footer-sci {
    position: relative;
}

.footer-sci-list {
    position: relative;
    display: block;
    padding: 0px;
}
.footer-sci-list li {
    list-style-type: none;
}
.footer-sci-list li a {
    display: flex !important;
    gap: 15px;
    margin-bottom: 12px;
}
.footer-sci-list li a:nth-last-child {
    margin-bottom: 0px;
}
.footer-sci-list li a:hover * {
    color: var(--primary);
}
.nav-pills .nav-link {
    color: var(--primary);
}
.nav-pills .nav-link.active {
    background-color: var(--primary);
    color: var(--white);
}

/* MODIFIKASI PADA TYPOGRAPHY ================================ */

/* MODIFIKASI PADA FORM ================================ */
#signup-form1,
#signup-form2,
#signup-form3,
#signup-form1.d-none,
#signup-form2.d-none,
#signup-form3.d-none {
    transition: 0.5s;
}

label {
    font-weight: 500 !important;
}

input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    outline-color: var(--primary);
}

select.select-aja {
    border: none !important;
    padding: 5px 3px !important;
    border-bottom: 1px solid var(--primary) !important;
    border-radius: 0 !important;
}
select.select-aja:focus {
    outline: none !important;
    box-shadow: none !important;
}
label.required::after {
    content: '*)';
    position: relative;
    color: var(--danger) !important;
    margin-left: 0.5em;
}
/* CUSTOM UPLOAD */
.form-upload {
    position: relative;
}
.form-upload input[type="file"]::file-selector-button {
    display: none;
}
.form-upload i,
.form-upload span {
    position: absolute;
    right: 10px;
    top: 50%;
    font-size: 1.3rem;
    transform: translateY(-50%);
}

.input-with-icon {
    position: relative;
}
.input-with-icon i,
.input-with-icon span,
.input-with-icon .bi,
.input-with-icon .fa {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%) !important;
}
/* MODIFIKASI PADA FORM ================================ */


/* CONTENT ================================================== */

.pagination {
    position: relative;
}
.pagination .pagination-item {
    display: inline-block;
    padding: 2px 10px;
    margin: 0 3px;
    border-radius: 5px;
    color: var(--primary);
    cursor: pointer;
}
.pagination .pagination-item.active {
    background-color: var(--primary);
    color: var(--white) !important;
}
.pagination .pagination-item:not(.active):hover {
    background-color: var(--primary-active);
}
.pagination .pagination-item.previous,
.pagination .pagination-item.next {
   font-weight: 600;
}


.card-primary-hover{
    transition: 0.5s;
    min-height: 160px !important;
}
.card-primary-hover:hover {
    background-color: var(--primary);
    color: var(--white);
}
.card-primary-hover:hover p,
.card-primary-hover:hover h5 {
    color: var(--white);
}

/* END CONTENT ================================================== */


/* SLIDER ======================================================= */
#slider {
    height: 650px; 
    position: relative; 
    overflow: hidden;
    margin-top: calc(50px + 4rem);
}
.slider {
    width: 100%;
    height: 100%;
}
.slider .swiper-wrapper .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10% 10% 10% 5%;  

        background-image: var(--bg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center center;
        min-height: 650px;
}

.swiper-button-prev,
.swiper-button-next  {
    color: var(--white);
    opacity: 0.23;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
    opacity: 1;
}
.swiper-pagination-bullet-active {
    background-color: var(--white) !important;
}
.swiper-slide, 
.swiper-slide * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
.swiper-slide .card {
    max-width: 650px;
    user-select: text !important;
}
.swiper-slide .card,
.swiper-slide .card * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* END SLIDER ======================================================= */


/* BREAKPOINT ================================================== */

/* // Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) { 
    .navbar.navbar-expand-lg {
        margin-top: calc(33px + 1.5rem);
    }
    .swiper-slide .card {
        max-width: 100%;
    }
    .slider .swiper-wrapper .swiper-slide {
        padding: 12px;
    }
}

@media (min-width: 576px) { 
    .rounded-md-pill {
        border-radius: 0px !important;
    }
    .rounded-lg-pill {
        border-radius: 0px !important;
    }
    .navbar.navbar-expand-lg {
        margin-top: calc(33px + 1.5rem);
    }
 }

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .rounded-md-pill {
        border-radius: 0px !important;
    }
    .rounded-lg-pill {
        border-radius: 0px !important;
    }
    .navbar.navbar-expand-lg {
        margin-top: calc(33px + 1.5rem);
    }
    #slider {
        height: 650px;
    }
 }

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .rounded-md-pill {
        border-radius: 50rem !important;
    }
    .rounded-lg-pill {
        border-radius: 50rem !important;
    }

    .navbar.navbar-expand-lg {
        margin-top: 32px;
    }
     #slider {
        height: 650px;
    }
 }

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .rounded-md-pill {
        border-radius: 50rem !important;
    }
    .rounded-lg-pill {
        border-radius: 50rem !important;
    }
     #slider {
        height: 650px;
    }
 }

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .rounded-md-pill {
        border-radius: 50rem !important;
    }
    .rounded-lg-pill {
        border-radius: 50rem !important;
    }
    #slider {
        height: 800px;
    }
 }
/* END BREAKPOINT ================================================== */