/* ==========================================================
   PORTAL GTK KABUPATEN KONAWE
   HERO SYSTEM
   File    : 05-hero.css
   Version : 2.0
   Developer : Haldi Ali Syukur
==========================================================*/


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

.hero{

    width:95%;

     max-width:var(--container);

    margin:30px auto 40px;

    padding:60px 30px;

    background:var(--white);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

    text-align:center;

    overflow:hidden;

    position:relative;

}


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

.hero-content{

   max-width:var(--container);

    margin:0 auto;

}


/* ==========================================================
   LOGO
==========================================================*/

.hero-logo-image{

    width:900px;

     max-width:var(--container);

    height:auto;

    display:block;

    margin:0 auto 35px;

    transition:.35s ease;

}

.hero-logo-image:hover{

    transform:scale(1.03);

}


/* ==========================================================
   TITLE
==========================================================*/

.hero-title{

    font-size:42px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:18px;

}


/* ==========================================================
   DESCRIPTION
==========================================================*/

.hero-description{

     max-width:var(--container);

    margin:0 auto 28px;

    font-size:21px;

    line-height:1.8;

    color:var(--text);

}


/* ==========================================================
   HIGHLIGHT
==========================================================*/

.hero-highlight{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px 40px;

    background:linear-gradient(

        135deg,

        var(--primary),

        #0D47A1

    );

    color:#fff;

    font-size:22px;

    font-weight:700;

    border-radius:999px;

    box-shadow:0 10px 25px rgba(21,101,192,.25);

}


/* ==========================================================
   DECORATION
==========================================================*/

.hero::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    background:rgba(21,101,192,.05);

    border-radius:50%;

    top:-120px;

    left:-120px;

}

.hero::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:rgba(21,101,192,.04);

    border-radius:50%;

    right:-90px;

    bottom:-90px;

}


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

@media(max-width:992px){

.hero{

    padding:50px 25px;

}

.hero-logo-image{

    width:210px;

}

.hero-title{

    font-size:36px;

}

.hero-description{

    font-size:19px;

}

.hero-highlight{

    font-size:20px;

}

}


/* ==========================================================
   TABLET
==========================================================*/

@media(max-width:992px){

.hero{

    padding:40px 20px;

}

.hero-logo-image{

    width:320px;

}

.hero-title{

    font-size:30px;

}

.hero-description{

    font-size:17px;

    line-height:1.7;

}

.hero-highlight{

    width:100%;

    font-size:18px;

    padding:16px;

}

}


/* ==========================================================
   MOBILE
==========================================================*/

@media(max-width:992px){

.hero{

    width:94%;

    margin:20px auto 30px;

    padding:30px 16px;

}

.hero-logo-image{

    width:320px;

}

.hero-title{

    font-size:26px;

}

.hero-description{

    font-size:15px;

}

.hero-highlight{

    font-size:16px;

    line-height:1.5;

    border-radius:22px;

}

}