/* ========================================= */
/* MODAL OVERLAY */
/* ========================================= */

.construction-modal{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.78);

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

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transition:all .35s ease;

    padding:40px 20px;

    overflow-y:auto;
}

/* ACTIVE */

.construction-modal.active{

    opacity:1;
    visibility:visible;
}

/* ========================================= */
/* MODAL BOX */
/* ========================================= */

.construction-modal-box{

    position:relative;

    width:100%;
    max-width:620px;

    background:#081120;

    border-radius:18px;

    padding:60px 50px;

    text-align:center;

    transform:translateY(40px);

    transition:all .4s ease;

    box-shadow:0 30px 80px rgba(0,0,0,0.45);
    max-height:calc(100vh - 80px);

    overflow-y:auto;
}

/* SHOW */

.construction-modal.active .construction-modal-box{

    transform:translateY(0);
}

/* ========================================= */
/* ICON */
/* ========================================= */

.construction-icon{

    width:110px;
    height:110px;

    margin:0 auto 35px;

    border-radius:50%;

    background:#f46d05;

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

.construction-icon i{

    color:#fff;
    font-size:46px;
}

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

.construction-modal-box h2{

    color:#fff;

    font-size:42px;

    font-weight:700;

    margin-bottom:25px;
}

/* ========================================= */
/* TEXT */
/* ========================================= */

.construction-modal-box p{

    color:rgba(255,255,255,0.78);

    font-size:20px;

    line-height:36px;

    margin-bottom:40px;
}

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

.construction-btn{

    background:#f46d05;

    border:none;

    color:#fff;

    padding:16px 34px;

    border-radius:6px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;
}

.construction-btn:hover{

    background:#ff7f1f;
}

/* ========================================= */
/* CLOSE */
/* ========================================= */

.construction-close{

    position:absolute;

    top:18px;
    right:22px;

    background:none;
    border:none;

    color:#fff;

    font-size:34px;

    cursor:pointer;
}

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

@media(max-width:767px){

    .construction-modal-box{

        padding:40px 25px;
    }

    .construction-modal-box h2{

        font-size:30px;
    }

    .construction-modal-box p{

        font-size:18px;
        line-height:30px;
    }

}