/*==================================================
  BIRO ADMINISTRASI AKADEMIK
  UNIVERSITAS MUHAMMADIYAH BENGKULU
==================================================*/

/*=============================
    GOOGLE FONT
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*=============================
    ROOT
==============================*/
:root{

    --primary:#0d3b73;
    --secondary:#f0ad1f;
    --dark:#052544;
    --light:#f8f9fa;
    --white:#ffffff;
    --text:#555;
    --shadow:0 10px 25px rgba(0,0,0,.10);
    --radius:15px;

}

/*=============================
    RESET
==============================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:#fafafa;
    line-height:1.7;

}

a{

    text-decoration:none;

}

/*=============================
    TOPBAR
==============================*/

.topbar{

    background:var(--dark);
    color:#FFF;
    font-size:14px;
    padding:8px 0;

}

/*=============================
    NAVBAR
==============================*/

.navbar{

    padding:12px 0;
    transition:.3s;
    background:#FFF;

}

.navbar-brand img{

    height:60px;

}

.navbar-nav .nav-link{

    color:#222;
    font-weight:600;
    margin-left:18px;
    transition:.3s;

}

.navbar-nav .nav-link:hover{

    color:var(--secondary);

}

.navbar-nav .active{

    color:var(--primary)!important;

}

.dropdown-menu{

    border:none;
    box-shadow:var(--shadow);
    border-radius:10px;

}

.dropdown-item{

    padding:10px 20px;

}

.dropdown-item:hover{

    background:var(--primary);
    color:#FFF;

}

/*=============================
        HERO
==============================*/

.hero{

    min-height:620px;

    background:url(images/hero.jpg);

    background-size:cover;
    background-position:center;

    position:relative;

}

.overlay{

    width:100%;
    height:100%;

    background:rgba(5,37,68,.70);

    display:flex;

    align-items:center;

    padding:120px 0;

}

.hero h5{

    color:var(--secondary);

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}

.hero h1{

    color:#FFF;

    font-size:58px;

    font-weight:700;

    margin:20px 0;

    line-height:1.2;

}

.hero p{

    color:#EEE;

    font-size:18px;

    margin-bottom:35px;

    max-width:600px;

}

.hero .btn{

    border-radius:50px;

    padding:14px 35px;

    font-weight:600;

}

/*=============================
      MENU CEPAT
==============================*/

#layanan{

    margin-top:-70px;

    position:relative;

    z-index:5;

}

.menu-box{

    background:#FFF;

    border-radius:20px;

    padding:40px 25px;

    box-shadow:var(--shadow);

    transition:.4s;

    height:100%;

}

.menu-box:hover{

    transform:translateY(-12px);

}

.menu-box .icon{

    font-size:55px;

    margin-bottom:20px;

}

.menu-box h4{

    color:var(--primary);

    margin-bottom:15px;

    font-weight:600;

}

.menu-box p{

    color:#777;

    font-size:15px;

}

/*=============================
        SECTION
==============================*/

section{

    padding:80px 0;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    color:var(--primary);

    font-weight:700;

}

.section-title p{

    color:#888;

}

/*=============================
        BUTTON
==============================*/

.btn-warning{

    background:var(--secondary);

    border:none;

}

.btn-warning:hover{

    background:#d89a15;

}

/*=============================
        CARD
==============================*/

.card{

    border:none;

    border-radius:20px;

    box-shadow:var(--shadow);

}

/*=============================
        FOOTER
==============================*/

footer{

    background:var(--dark);

    color:#FFF;

    padding:60px 0;

    margin-top:70px;

}

footer h4{

    color:#FFF;

    margin-bottom:15px;

}

footer p{

    color:#CCC;

}

/*=============================
    SCROLLBAR
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EEE;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

}

::-webkit-scrollbar-thumb:hover{

    background:#001f3f;

}

/*=============================
      RESPONSIVE
==============================*/

@media(max-width:992px){

.hero{

    min-height:520px;

}

.hero h1{

    font-size:42px;

}

.hero p{

    font-size:17px;

}

.navbar-nav{

    margin-top:20px;

}

}

@media(max-width:768px){

.hero{

    min-height:480px;

}

.overlay{

    padding:80px 0;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:16px;

}

.menu-box{

    margin-bottom:30px;

}

.topbar{

    display:none;

}

}

@media(max-width:576px){

.hero h1{

    font-size:28px;

}

.hero h5{

    font-size:15px;

}

.hero p{

    font-size:15px;

}

}