/* =========================================
   HAS FRAMEWORK 1.0
   File : 05-hero.css
   Website : haldi.my.id
   Author : Haldi Ali Syukur
========================================= */


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

.hero{

    max-width:1200px;

    margin:50px auto;

    background:var(--white);

    border-radius:var(--radius);

    padding:60px 40px;

    text-align:center;

    box-shadow:var(--shadow);

    opacity:0;

    transform:translateY(40px);

}


/* =========================================
   FOTO PROFIL
========================================= */

.foto{

    width:280px;

    margin:auto;

    border-radius:50%;

    border:8px solid var(--primary);

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

    transition:.4s;

}

.foto:hover{

    transform:scale(1.05);

}


/* =========================================
   NAMA
========================================= */

.hero h1{

    margin-top:30px;

    margin-bottom:12px;

    font-size:64px;

    color:var(--primary);

    font-weight:700;

}


/* =========================================
   JABATAN
========================================= */

.hero h3{

    font-size:30px;

    color:#666;

    font-weight:500;

    margin-bottom:25px;

}


/* =========================================
   MOTTO
========================================= */

.motto{

    max-width:850px;

    margin:auto;

    font-size:30px;

    line-height:1.7;

    color:#444;

}


/* =========================================
   KATA BERGANTI
========================================= */

.kata-bijak{

    margin-top:30px;

    color:var(--primary);

    font-size:22px;

    font-weight:600;

    min-height:40px;

    transition:opacity .8s ease;

}


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

.hero.show{

    opacity:1;

    transform:translateY(0);

    transition:1s;

}


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

@media(max-width:768px){

.hero{

    padding:35px 20px;

}

.foto{

    width:180px;

}

.hero h1{

    font-size:40px;

}

.hero h3{

    font-size:22px;

}

.motto{

    font-size:20px;

}

.kata-bijak{

    font-size:18px;

}

}