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

body{
    background:#f5f7fb;
}

/* =========================================
   Cards
========================================= */

.profile-card{
    border:none;
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
    overflow:hidden;
}

.profile-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.profile-card .card-header{
    background:#0d6efd;
    color:#fff;
    border:none;
    padding:18px 25px;
}

.profile-card .card-header h4{
    margin:0;
    font-size:20px;
    font-weight:600;
}

/* =========================================
   Profile Image
========================================= */

.profile-image{

    width:170px;
    height:170px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid #0d6efd;

    padding:5px;

    background:#fff;

    box-shadow:0 10px 25px rgba(13,110,253,.25);

    transition:.4s;

}

.profile-image:hover{

    transform:scale(1.05);

}

/* =========================================
   Profile Name
========================================= */

.profile-name{

    font-size:28px;

    font-weight:700;

    margin-top:-3px;

    color:#f3eeee;

}

.profile-role{

    margin-top:10px;

}

.profile-role .badge{

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

}

/* =========================================
   Information
========================================= */

.profile-info{

    margin-top:25px;

}

.profile-info p{

    margin-bottom:18px;

    color:#555;

    font-size:15px;

    line-height:1.7;

}

.profile-info strong{

    color:#111;

    font-weight:600;

}

/* =========================================
   Forms
========================================= */

.form-label{

    font-weight:600;

    color:#444;

}

.form-control{

    min-height:48px;

    border-radius:10px;

    border:1px solid #d9d9d9;

    transition:.3s;

}

.form-control:focus{

    border-color:#0d6efd;

    box-shadow:0 0 0 .20rem rgba(13,110,253,.18);

}

textarea.form-control{

    min-height:120px;

    resize:none;

}

/* =========================================
   File Upload
========================================= */

input[type="file"]{

    padding:10px;

}

/* =========================================
   Buttons
========================================= */

.profile-btn{

    min-width:180px;

    height:48px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.profile-btn:hover{

    transform:translateY(-2px);

}

/* =========================================
   Horizontal Line
========================================= */

hr{

    margin:25px 0;

    opacity:.15;

}

/* =========================================
   Responsive
========================================= */

@media(max-width:992px){

    .profile-image{

        width:140px;
        height:140px;

    }

    .profile-name{

        font-size:24px;

    }

}

@media(max-width:768px){

    .profile-card{

        margin-bottom:20px;

    }

    .profile-btn{

        width:100%;

    }

    .profile-name{

        font-size:22px;

    }

}