body {
    font-family: "Open Sans", sans-serif;
    color: #444444;
    /* background-color: #f0f8ff; */
    /* background-color: #ddf1f9; */

  }

  a {
    text-decoration: none;
    color: #d9232d;
  }

  a:hover {
    color: #e24d55;
    text-decoration: none;
  }




.navbar{
    padding: 23px 0px 23px 0px;
}

.text-xs{
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
}

.text-sm{
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
}

.text-base{
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
}

.text-lg{
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
}

.text-xl{
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
}

.text-2xl{
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
}

.text-3xl{
    font-size: 1.875rem; /* 30px */
    line-height: 2.25rem; /* 36px */
}

.text-4xl{
    font-size: 2.25rem; /* 36px */
    line-height: 2.5rem; /* 40px */
}

.text-5xl{
    font-size: 3rem; /* 48px */
    line-height: 1;
}

.text-6xl{
    font-size: 3.75rem; /* 60px */
    line-height: 1;
}

.text-7xl{
    font-size: 4.5rem; /* 72px */
    line-height: 1;
}

.text-8xl{
    font-size: 6rem; /* 96px */
    line-height: 1;
}

.text-9xl{
    font-size: 8rem; /* 128px */
    line-height: 1;
}

.fw-700{
    font-weight: 700;
}

.navbar-collapse li.nav-item{
    padding : 3px;
}

@media (max-width: 777px){
    .navbar-collapse li.nav-item{
        padding : 5px 30px 0px 30px;
    }
}

.hero-image{
    height: 450px;
    background-image: url("../images/front_bg.png");
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: cover;
}

.hero-overlay{
    height: 450px;
    background: rgba(0, 0, 0, 0.288);
}



.text-justify{
    text-align: justify;
}

.footer{
    /* background-color: #818b70; */
    background-color: #232931;
    color: white;
}

.text-link-primary{
    text-decoration: underline;
    color: blue;
}


.is-invalid {
    border-color: red;
    border-width: medium;
}


.heading-title{
    font-size: 35px;
    font-weight: 600;
    color: black;
}


/* -------------------------------------------------------------- */
.profil-pengguna{
    display: inline-block;
}

.profil-pengguna li{
    list-style: none;
    margin-bottom: 10px;
}

ul.profil-pengguna li span:first-child {
    font-weight: 600;
    color: #000000;
    width: 160px;
}

ul.profil-pengguna li span {
    width: calc(100% - 130px);
    font-weight: 600;
    color: #b1b493;
}

.profil-pengguna ol, ul {
    padding-left: 0rem;
}

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


.profil-projek{
    display: inline-block;
}

.profil-projek li{
    list-style: none;
    margin-bottom: 10px;
}

ul.profil-projek li span:first-child {
    font-weight: 600;
    color: #fcfcfc;
    width: 180px;
}

ul.profil-projek li span {
    width: calc(100% - 130px);
    font-weight: 400;
    color: #ffffff;
}

.profil-projek ol, ul {
    padding-left: 0rem;
}

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


.nav.nav-tabs .nav-item .nav-link{
    color: black;
}

.nav.nav-tabs .nav-item .nav-link.active{
    background: #dc3545;
    color: white;
}

.carousel-caption{
    padding: 8px;
    background: #00000070;
}

.carousel-item img{
    width: 348px;
    height: 280px;
}


.pointer{
    cursor: pointer;
}


.gray-projek{
    background-color: #677787;
    color: white;
}

@media (max-width: 768px) {

    body{
        font-size: 12px;

    }

    /* .navbar-brand img{
        width: 50px;
        height: 30px;
    } */

    .navbar-brand{
        font-size: 0.8rem;
    }

    .semakan {
        font-size: 12px;
    }

    .hero-title {
        font-size: 37px;
    }

    .hero-image{
        height: 230px;
        background-repeat: no-repeat, repeat;
        background-position: center;
        background-size: cover;
    }

    .hero-overlay{
        height: 230px;
        background: rgba(0, 0, 0, 0.288);
    }

    .text-xl {
        font-size: 1rem;
    }

    .text-3xl {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    .text-lg {
        font-size: 1rem;
        line-height: 1.5rem;
    }
  }