/* =========================
   PAGE
========================= */

.welcome-page{
    position:relative;

    width:100%;
    max-width:var(--container-width);
    min-height:100dvh;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:#f1582c;
}


/* =========================
   BACKGROUND SHAPE
========================= */

.welcome-page::before{
    content:"";

    position:absolute;
    top:-120px;
    left:-60px;

    width:260px;
    height:260px;

    background:#ffc423;

    border-radius:80px;

    transform:rotate(-35deg);
}

.welcome-page::after{
    content:"";

    position:absolute;
    right:-80px;
    bottom:-90px;

    width:280px;
    height:280px;

    background:#ffc423;

    border-radius:90px;

    transform:rotate(35deg);
}


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

.welcome-logo-area{
    position:relative;
    z-index:2;

    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:50px 30px 30px;
}


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

.welcome-title{
    margin:0 0 40px;

    color:#fff;

    font-size:28px;
    font-weight:700;
    line-height:1.3;

    text-transform:uppercase;
}


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

.welcome-logo-box{
    width:120px;
    height:120px;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:20px;
}

.welcome-logo-box img{
    width:100%;
    height:100%;

    object-fit:contain;
}



/* =========================
   BRAND
========================= */

.welcome-brand{
    color:#fff;

    font-size:38px;
    font-weight:300;
}


/* =========================
   ACTION
========================= */

.welcome-actions{
    position:relative;
    z-index:2;

    margin-top:80px;      /* jarak dari logo */
    padding:0 24px 40px;
}


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

.welcome-btn{
    width:100%;
    height:64px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 24px;

    background:#fff;

    color:#ee4d2d;

    border-radius:18px;

    text-decoration:none;

    font-size:20px;
    font-weight:700;

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.15);

    transition:.2s;
}

.welcome-btn:hover{
    transform:translateY(-2px);
}

.welcome-btn i{
    font-size:24px;
}


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

@media(max-width:500px){

    .welcome-title{
        font-size:23px;
    }

    .welcome-brand{
        font-size:32px;
    }

    .welcome-logo-box{
        width:100px;
        height:100px;
    }

    .welcome-btn{
        height:58px;
        font-size:18px;
    }

}