.profileContainer{
    width: 85%;
    border-radius: 10px;
    margin: 5.7vw auto;
    display: flex;
    background-color: #0001;
}

.nameImg , .details{
    background-color: #daddcc;
}

.nameImg{
    margin: 2%;
    width: 30%;
    border-radius: 20px; 
    overflow: hidden;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.profileImage{
    margin: auto;
    width: 12vw;
    height: fit-content;
    border-radius: 20px;
}

.nameImg h6{
    margin:auto;
    font-size: 2em;
    font-weight: 600;
}

.details{
    margin: 2% 2% 2% 0;
    width: 70%;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
}

.details h1{
    margin: 3% 0;
}

.CName{
    margin-bottom:3%;
}

.profileDetails{
    margin: 0 auto;
    text-align: left;
    font-size: 1.3em;
}

.profileDetailsContainer{
    display: flex;
    margin: 20px auto;
    width: 60%;
    justify-content: space-between;
}

.profileDetailsContainer div{
    width:20vh;
}

.profileDetailsContainer span{
    width:40vh;
}

.redirectLink{
    width: fit-content;
    margin: 15px auto;
}

.editProfile{
    display: flex;
    width: fit-content;
    background: #fff3;
    padding: 7px 30px;
    border-radius: 20px;
    font-size: 0.8em;
    cursor: pointer;
    align-items: center;
}

.editProfile:hover{
    background: linear-gradient(to right,#010101, #424242, #0005);
    color: white;
}

.logoutImage{
    margin-left: 10px;
    height: 3vh;
    width: fit-content;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------------------------------     Responsive       -------------------------------------------------------------------------- */


@media(max-width:1260px){

    .profileContainer{
        width: 90%;
    }

    .profileDetailsContainer{
        width: 70%;
    }
    
    .profileDetailsContainer div{
        width:40vh;
    }

    .profileDetailsContainer span{
        width:60vh;
    }

}

@media(max-width:1024px){

    .profileDetailsContainer {
        display: grid;
        justify-content: center;
    }
    
    .profileDetailsContainer div , .profileDetailsContainer span{
        margin: 0 auto;
        width: fit-content;
    }

}

@media(max-width:768px){

    .userProfile{
        display: block;
        height: fit-content;
        width: 70%;
        padding: 30px;
    }

    .userPhoto{
        width: 40vw;
        margin: 0 auto;
    }
    
    .profileContainer{
        display: grid;
        width: 85%;
        padding-top: 2%;
        height: fit-content;
    }
    
    .profileDetailsContainer{
        width: 50%;
        justify-content: center;
    }
    
    .profileDetailsContainer div{
        margin-right: auto;
        text-align: center;
        justify-content: left;
        width: fit-content;
    }
    
    .profileDetailsContainer span{
        width: fit-content;
    }
        
    .nameImg{
        font-size: 0.9em;
        margin:0 auto;
        display: flex;
        width: 90%;
        padding-bottom:20px;
    }

    .nameImg h6{
        padding: 10px 0;
    }

    .details{
        width: 90%;
        height: fit-content;
        padding-bottom: 20px;
        margin: 5% auto;
    }

    .editProfile{
        margin-left: auto;
    }

}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------------------------------     Responsive       -------------------------------------------------------------------------- */

@media(max-width:447px){

    .nameImg{
        width: 85%;
    }

    .profileDetailsContainer{
        display: grid;
        width: 80%;
        margin: 30px auto;
    }

    .profileDetailsContainer div {
        margin: 5px auto;
    }

    .editProfile{
        margin-top:25px;
    }

}