/* ===== Colours ===== */
:root{
    --body-color: #E4E9F7;
    --nav-color: #E4E9F7;
    --side-nav: #010718;
    --text-color-white: #FFF;
    --text-color-black: #010718;
    --text-color-second-black: #1f1f1f;
    --background-color-first: #f7f9fd;
    --background-color-second: #F2F2F2;
    --background-contact: #d4dfff;
}

section.profile{
    min-height: 70vh;
    padding: 0 3%;
    padding-top: 4rem;
}

/* Banner */
.main-image{
    position: relative;
    background: url(../image/background2.png) no-repeat center;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
    object-fit: cover;
}

.main-image .container{
    margin-top: 3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
    padding: 3rem 2rem;
    border-radius: .5rem;
    width: 91%;
}

.main-image .container h1{
    color: var(--text-color-second-black);
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.5;
    text-transform: uppercase;
    margin-bottom: 3rem;
}

.main-image .container span.cen{
    font-size: 2rem;
    color: var(--text-color-black);
    font-weight: 600;
    text-transform: uppercase;
}
/* End */


/* profile */
.profile  .box-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.profile .box-container .box{
    flex: 1 1 1rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background: var(--background-color-first);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.15);
    margin: 0 1rem;
    text-align: center;
    align-self: normal;
    position: relative;
    overflow: hidden;
}

.profile .box-container .box:hover{
    z-index: 1;
    box-shadow: 0 0 1rem .3rem rgba(0,0,0,0.3);
    transform: scale(1.05);
}

.profile .box-container .box i{
    font-size: 5rem;
    padding-top: 4rem;
    animation: bounce 2s linear infinite;
    color: var(--text-color-black);
}

@keyframes bounce
{
    0%{transform: scale(1,1) translateY(0);}
    10%{transform: scale(1.1,.9) translateY(0);}
    30%{transform: scale(.9,1.1) translateY(-40px);}
    50%{transform: scale(1.05,.95) translateY(0);}
    57%{transform: scale(1,1) translateY(-7px);}
    64%{transform: scale(1,1) translateY(0);}
    100%{transform: scale(1,1) translateY(0);}
}

.profile .box-container .box h3{
    padding: .5rem 2rem;
    font-size: 1.5rem;
    text-transform: capitalize;
    color: var(--text-color-black);
    margin-top: 2rem;
    z-index: 99;
}

.profile .box-container .box .button{
    padding: 1.5rem 2rem;
    margin-top: auto;
}

.profile .box-container .box .button a{
    text-decoration: none;
    color: #4070F4;
    text-transform: capitalize;
    font-weight: 500;
}


.profile .box-container .box .button:hover{
    text-decoration: underline;
}
/* end */




/* responsive breaks point */
@media(max-width: 576px){

    .main-image .container{
        width: 90%;
    }

    section.profile{
        min-height: 100vh;
    }

    .profile .box-container .box{
        flex: 1 1 20rem;
        margin: 1rem;
    }
}