/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    padding-bottom: 5px;
    width: 100%;
    //z-index: 1030; /* Ensure it stays above other content */
}



.navbar-brand{
    font-family:Viga;
    font-size:32px;


}

.nav-link{
    font-family: Viga;
    font-size: 16px;
}

/* Utility */
.tombol{
    font-family:Viga;
    font-size:16px;
    Border-radius:40px;
    padding-bottom: 5px;
    font-color:#fff;
    text-transform:uppercase; 
}

/* Info Panel */
.info-panel{
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0, 0.6);
    margin-top:-100px;
    padding:20px;
}

.info-panel h3{
    text-transform: uppercase;
    text-align: center;
    font-size:20px;
    color: #404041;
    font-weight:bold;
}
.info-panel img{
    width:80px;
    height:80px;
    margin-right:10px;
    margin-bottom:10px;

}

.info-panel h4{
    font-size:14px;
    text-transform: uppercase;
    font-weight:bold;
    margin-top:5px;
}

.info-panel p{
    font-size:13px;
    color: #404041;
    margin-top:5px;
}

/* Akhir Panel */

/* About */
.about{
    margin-top:50px;
    text-align: center;
    margin-bottom: 30px;
}

.about img{
    border-radius: 12px;
}

.about h3{
    margin-top:10px;
    font-size: 32px;
    font-weight:200;
    text-transform: uppercase;
}

.about p{
    font-size:13px;
    color: #404041;
    margin-top:5px;

}

.about h3 span{
    font-weight:500;
}
/* Akhir About */

/* belajar */
.belajar{
 margin: auto;
   margin-top:20px;
   margin-bottom: 20px;
}

.belajar .box{
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0px 0px 1px rgba(0,0,0, 0.7);
    padding:10px;
    text-align: center;
}

.belajar img{
    border-radius: 0px;
}

.belajar h3{
    text-transform: uppercase;
    font-size:30px;
    color: #404041;
    text-align: left;
    font-weight:bold;
    
}

.belajar h3:after{
    content:'';
    display:block;
    width:10%;
    padding-bottom:5px;
    margin-bottom:-5px;
    border-bottom: 2px solid #2aaaef;

}

.belajar h4{
    text-align: center;
    font-size:25px;
    color: #404041;

}


.belajar p{
    text-align: justify;
    font-size:13px;
    color: #404041;
    margin-top:5px;

}

.belajar h3 span{
    font-weight:500;
}
/* Akhir belajar */


/* JumboTron */
.jumbotron{
margin-top : -90px;
    background-image: url(img/jumbotron-bg2.jpg);
    background-size:cover;
    height:700px;
    text-align: center;
   }

.jumbotron .display-4{
    font-size: 250%;
     Color:white;
     margin-top:150px;
     font-weight:100;
}

.jumbotron h4{
    color: #fff;
    font-weight:100;
}

/* Desktop Version */

.navbar {
    position: fixed;
    top: 0;
    padding-bottom: 2px;
    width: 100%;
    z-index: 1030; /* Ensure it stays above other content */
    background-color: #0f75bc; 
}



@media (min-width: 992px) { 
    .nav-link{
        color:white !important;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.6);
        font-family: Viga;
        font-size: 16px;
        text-transform: uppercase;
        margin-right:15px;
    
    }
    .jumbotron{
    margin-top:80px;
    }   
    .nav-link:hover:after{
        content: '';
        color:white !important;
        text-shadow: 1px 1px 1px rgba(0,0,0, 0.6);
        display:block;
        width:50%;
        margin: auto;
        padding-bottom:5px;
        margin-bottom:-8px;
        border-bottom: 2px solid #F8D00D;
    }

    .jumbotron .display-4{
    font-size: 400%;
    Color:white;
    margin-top:120px;
    font-weight:200;
    }

    .jumbotron h4{
    Color:white;
   font-weight:200;
    }

.about{
        margin-top:80px;
        text-align: justify;
}

.about h3{
    margin-top:-10px;
    font-size: 52px;
    font-weight:200;
    text-transform: uppercase;
}


.about p{
    font-size:14px;
    color: #404041;
    margin-top:5px;
    text-align: justify;
}


}