.banner {
    width : 100%;
    background-image : url("../imgs/profile.jpg");
    background-size : cover;
    height : 200px;
}
.container {
    display : flex;
}
.profile {
    display : flex;
    margin : 40px 20%;
    margin-top : 20px;
    box-shadow : 0 10px 10px;
    border : none;
    border-radius : 10px;
    text-transform : capitalize;
    font-family : font2;
    font-weight : 200;
}
.profileW {
    padding : 40px 30px;
    width : 100%;
    background-color:white;
}
.profileW > span {
    text-align : center;
    display  : block;
    width  : 40%;
    margin-left : 30%;
    font-size : 40px;
    font-family  : font3;
    margin-bottom : 30px;
    border-bottom-right-radius : 20px; 
    border-bottom-left-radius : 20px; 
    border-bottom : #4B6F68 solid 2px;
}
.img-info {
    display : flex ;
    width  : 100%;
    align-items :center;
    justify-content :center;
    margin-bottom : 40px;
}
.img {
    width  : 30%;
    border-radius : 10px;
    height :auto;
}
.info
{
    display : block;
    margin-left : 30px;
    margin-top : 29px;
    text-transform :none;
}
tr {
    margin-bottom : 20px;
    display : block;
    font-size : 20px;
    font-family : font2;
}
td  {
    min-width : 200px;
}
.an-input{
    background-color : rgb(225, 225, 225);
    padding : 10px;
}
.help {
    text-align  :center;
    font-size  : 20px;
}
.help a {
    font-family : 'Times New Roman';
    text-transform : uppercase;
    letter-spacing : 1px;
    margin-left :5px;
    transition : 0.3s;
    color : rgb(204, 166, 91);
}
.help a:hover {
    text-decoration : underline;
}
.signout-cont {
    padding : 0 7%;
    display : flex ;
    justify-content : space-between;
}
.signout-btn {
    padding : 10px 20px;;
    border : none ;
    background-color : #4B6F68;
    color  : white;
    border-radius : 10px;
    transition : 0.3s
}
.signout-btn:hover{
    background-color : #162421;
}
@media screen and (max-width : 1100px){
    .profileW > span {
        font-size: 25px;
    }
    td  {
        font-size : 15px;
        min-width : 130px;
    }
    
}
@media screen and (max-width : 772px){
    .profileW > span {
        text-align : center;
        display  : block;
        width  : 50%;
        margin-left : 25%;
        font-size : 20px;
        font-family  : font3;
        margin-bottom : 30px;
        border-bottom-right-radius : 20px; 
        border-bottom-left-radius : 20px; 
        border-bottom : #4B6F68 solid 2px;
    }
    .img-info {
        display : block;
    }
    .img {
        width : 40%;
        margin-left : 30%;
        margin-bottom : 30px;
    }
    .info {
        display : flex;
        justify-content : center;
        margin-left : 0;
    }
}
@media screen and (max-width : 576px){
    .profileW > span {
        text-align : center;
        display  : block;
        width  : 60%;
        margin-left : 20%;
        font-size : 20px;
        font-family  : font3;
        margin-bottom : 30px;
        border-bottom-right-radius : 20px; 
        border-bottom-left-radius : 20px; 
        border-bottom : #4B6F68 solid 2px;
    }
    .profileW{
        padding : 30px 5px;
    }
    .img-info {
        display : block;
    }
    .profile {
        margin: 40px 7%;
    }
    .help {
        font-size: 15px;
    }
}
@media screen and (max-width : 370px){
    td  {
        font-size : 13px;
        min-width : 120px;
    }
}
@media screen and (min-width : 350px) and (max-width : 860px){
    .signout-cont {
        padding : 0;
        flex-direction :column;
    }
    .signout-cont button{
        width : 30%;
        margin-left : 35%;
        margin-top : 10px;
    }
    
    
}
@media screen and (min-width : 320px) and (max-width : 350px){
    .signout-cont {
        padding : 0;
        flex-direction :column;
    }
    .signout-cont button{
        width : 40%;
        margin-left : 30%;
        margin-top : 10px;
    }

}