/* ==========================================================
   BMI ICLOUD
   Register Page
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap');

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

body{

    font-family:'Be Vietnam Pro',sans-serif;

    background:linear-gradient(135deg,#0f5ef7,#2ca9ff);

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    //padding:0px;
}


/*========================*/

.register-page{

    width:100%;
}


/*========================*/

.register-card{

    max-width:1400px;

    margin:auto;

    border-radius:25px;

    overflow:hidden;

    background:#fff;

    box-shadow:
    0 25px 70px rgba(0,0,0,.18);
}



/*==========================
LEFT
==========================*/

.left-panel{

    background:

    linear-gradient(

    160deg,

    #0052d4,

    #1d76ff,

    #41b6ff);

    color:#fff;

    position:relative;

}


.left-panel::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    top:-120px;

    right:-150px;
}


.left-panel::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    bottom:-80px;

    left:-80px;

}


.left-content{

    padding:60px 40px;

    position:relative;

    z-index:2;
}


.logo{

    width:100px;

    //background:#fff;

    //padding:10px;

    //border-radius:18px;

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

}


.left-content h2{

    font-size:30px;

    font-weight:700;

    margin-top:20px;

}


.left-content p{

    margin-top:15px;

    line-height:30px;

    opacity:.9;
}


/*========================*/

.feature{

    margin-top:22px;

    font-size:14px;

    display:flex;

    align-items:center;

    gap:15px;

    transition:.3s;
}


.feature i{

    width:45px;

    height:45px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;
}


.feature:hover{

    transform:translateX(8px);

}


/*==========================
RIGHT
==========================*/

.bg-white{

    background:#fff!important;

}


h2{

    font-weight:700;

    color:#0f172a;

}


.text-muted{

    color:#64748b!important;

}


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

.card{

    border:none;

    border-radius:18px;

    margin-bottom:25px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.06);

}


.card-header{

    border:none;

    padding:18px 25px;

    font-size:14px;

    font-weight:600;

}


.card-body{

    padding:28px;

}


/*==========================
LABEL
==========================*/

label{

    font-weight:600;

    color:#334155;

    margin-bottom:8px;

}


/*==========================
INPUT
==========================*/

.form-control{

    height:50px;

    border-radius:12px;

    border:1px solid #dbe4ee;

    transition:.3s;

    padding-left:18px;

}


.form-control:focus{

    border-color:#0d6efd;

    box-shadow:

    0 0 0 .2rem rgba(13,110,253,.15);

}


/*==========================
CHECKBOX
==========================*/

.form-check{

    padding:18px;

    border-radius:15px;

    border:1px solid #e5e7eb;

    margin-bottom:15px;

    transition:.3s;

    cursor:pointer;

}


.form-check:hover{

    border-color:#0d6efd;

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}


.form-check-input{

    width:20px;

    height:20px;

}


.form-check-label{

    margin-left:10px;

    font-weight:600;

}


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

.btn-primary{

    height:58px;

    border:none;

    border-radius:15px;

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

    background:

    linear-gradient(135deg,#0061ff,#00b2ff);

    transition:.35s;

}


.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:

    0 18px 35px rgba(0,98,255,.35);

}


/*==========================
LINK
==========================*/

a{

    text-decoration:none;

    color:#0d6efd;

    font-weight:600;

}


a:hover{

    color:#004ec7;

}


/*==========================
ALERT
==========================*/

.alert{

    border:none;

    border-radius:15px;

    padding:18px;

    font-size:15px;

}


.alert-danger{

    background:#ffe5e5;

    color:#b00020;

}


.alert-success{

    background:#d9ffe9;

    color:#087f45;

}


/*==========================
ANIMATION
==========================*/

.register-card{

    animation:show .7s ease;
}


@keyframes show{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:992px){

.left-panel{

display:none;

}

body{

padding:15px;

}

.register-card{

border-radius:18px;

}

.card-body{

padding:20px;

}

}


@media(max-width:576px){

h2{

font-size:24px;

}

.btn-primary{

height:52px;

font-size:16px;

}

.form-control{

height:46px;

}

.card-header{

font-size:16px;

}

}