/* ======================================================
   GENDATA KOTA SAMARINDA
   Style.css
====================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#f5f7fb;

    color:#333;

}

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

.navbar{

    transition:.4s;

    background:rgba(37,41,88,.65);

    backdrop-filter:blur(10px);

}

.navbar-brand{

    font-weight:700;

    font-size:24px;

}

.logo{

    width:45px;

    margin-right:10px;

}

.nav-link{

    color:#fff !important;

    margin-left:20px;

    transition:.3s;

}

.nav-link:hover{

    color:#ffd54f !important;

}

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

.hero{

    position:relative;

    min-height:100vh;

    background-image:url("images/hero.png"); /* atau samarinda.jpg */

    background-position:center center;

    background-size:cover;

    background-repeat:no-repeat;

    background-attachment:fixed;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.overlay{

    position:absolute;

    width:100%;

    height:100%;

    background:linear-gradient(

        rgba(35,42,94,.88),

        rgba(103,58,183,.80)

    );

}

.hero-content{

    position:relative;

    z-index:10;

    color:white;

}

.hero h1{

    font-size:60px;

    font-weight:700;

}

.hero p{

    font-size:22px;

    margin-top:20px;

    margin-bottom:35px;

    max-width:850px;

    margin-left:auto;

    margin-right:auto;

}

.btn-jelajah{

    display:inline-block;

    padding:16px 45px;

    background:#ffffff;

    color:#2b3475;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.btn-jelajah:hover{

    background:#ffd54f;

    transform:translateY(-5px);

    color:#222;

}

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

.menu-section{

    padding:90px 0;

}

.judul-section{

    text-align:center;

    margin-bottom:60px;

    font-weight:700;

    color:#283593;

}

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

.card-link{

    text-decoration:none;

}

.menu-card{

    background:white;

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.4s;

    margin-bottom:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    height:100%;

}

.menu-card:hover{

    transform:translateY(-12px);

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.menu-card i{

    font-size:65px;

    color:#3949ab;

    margin-bottom:25px;

    transition:.3s;

}

.menu-card:hover i{

    transform:scale(1.15);

    color:#5c6bc0;

}

.menu-card h3{

    color:#283593;

    font-weight:700;

    margin-bottom:15px;

}

.menu-card p{

    color:#666;

    line-height:1.7;

    font-size:15px;

}

/* ===========================
   TENTANG
=========================== */

.tentang{

    padding:80px 0;

    background:white;

}

.tentang h2{

    text-align:center;

    margin-bottom:25px;

    color:#283593;

    font-weight:700;

}

.tentang p{

    max-width:900px;

    margin:auto;

    text-align:center;

    line-height:1.9;

}

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

footer{

    background:#283593;

    color:white;

    text-align:center;

    padding:25px;

}

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

@media(max-width:992px){

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

}

@media(max-width:768px){

.hero{

height:85vh;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.logo{

width:38px;

}

}