:root {
    --blue: #1c6fce;
    --blue-hover: #1a62b4;
    --gray: #d1d1d1;
    --gray-hover: #c4c3c3;
    --white: #f6f6f6;
    --orange: #f77621;
    --pink: #ad0079;
    --black: #242424;
}

.bg-blue {
    background-color: var(--blue);
}

.bg-orange {
    background-color: var(--orange);
}

.bg-pink {
    background-color: var(--pink);
}

.bg-black {
    background-color: var(--black);
}

.rounded-xl {
    border-radius: 20px;
}

.font-roboto {
    font-family: 'Roboto', sans-serif;
}

.font-nunito {
    font-family: 'Nunito', sans-serif;
}

body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

main {
    flex-grow: 1;
}

#navbar .navbar-brand .logo {
    width: 50px;
}

#navbar .navbar-brand .title {
    display: block;
}

#navbar .navbar-brand .tag {
    font-size: .67rem;
    display: block;
}

#navbar .navbar-nav .nav-item {
    padding: 3px 5px;
    text-align: center;
}

#navbar .navbar-nav .nav-item.login a {
    background-color: var(--gray);
    border-radius: 20px;
    padding: 8px 20px;
}

#navbar .navbar-nav .nav-item.login a:hover{
    background-color: var(--gray-hover);
}

#navbar .navbar-nav .nav-item.register a {
    background-color: var(--blue);
    color: var(--white);
    border-radius: 20px;
    padding: 8px 20px;
}

#navbar .navbar-nav .nav-item.register a:hover {
    background-color: var(--blue-hover);
}

#navbar .navbar-nav .nav-item .nav-link {
    font-weight: bold;
}

#navbar .navbar-nav .nav-item .nav-link.active {
    color: var(--blue);
}

#hero {
    padding-top: 230px;
    padding-bottom: 230px;
}

#hero h1 {
    font-weight: bold;
    font-size: 3rem;
    color: var(--white);
}

#hero p {
    color: var(--white);
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    #navbar .navbar-brand .logo {
        width: 40px;
    }

    #navbar .navbar-brand .title {
        font-size: 1rem;
    }

    #navbar .navbar-brand .tag {
        font-size: .5rem;
    }

    #hero {
        padding-top: 150px;
        padding-bottom: 150px;
    }

    #hero h1 {
        font-weight: bold;
        font-size: 2rem;
        color: var(--white);
    }

}

#program-slider swiper-slide .card-img-overlay .detail {
    transition: all;
    transition-duration: 1000ms;
    transform: translateY(100%);
}

#program-slider swiper-slide.swiper-slide-active .card-img-overlay .detail {
    transform: translateY(0);
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    /*  */
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    /*  */
}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    /*  */
}   

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
    /*  */
}