.header{
    background-image: url('logo/our_team_back.svg');
    background-repeat: no-repeat;
    background-size: cover;
}
.name-header{
    padding-top: 70px;
}
.main-title{
    padding-bottom: 20px;
}

.right-image{
    padding-left: 20px;
    background-image: none;
    margin-top: -90px;
    margin-left: -20vw;
}

.body-div, .body-div-leader{
    display: grid;
    align-items: center;
    background-color: #c6d4ff;
}

.profile{
    display: grid;
    grid-template-columns: 1fr 2fr;
    background-color: white;
    transition: box-shadow 0.4s;
    overflow: hidden;
    
}

.profile-pic-div{
    overflow: hidden;

}

.profile-pic{
    object-fit:cover;
    transition: transform .4s;
}

.profile:hover .profile-pic{
    transform: scale(1.2);
}

.profile:hover{
    box-shadow: 5px 5px 10px rgba(158, 158, 158, 0.575);
    
}

.name{
    font-family: oswald;
    font-weight: bold;
    color: #554994;
}
/* .interest{
    margin-top: 10px;
} */

.join{
    padding: 0px 10px;
    margin-left: 66px;
    font-size: clamp(12px,1.4vw, 30px);
    color: whitesmoke;
    text-decoration: none;
    border-color: whitesmoke;
    border-width: 1px;
    border-style: solid;
    border-radius: 25px;
    transition: border 0.3s, color 0.3s;
}
.join:hover{
    color: #d33f49;
    border-color: #d33f49;
}
.role{
    text-decoration: underline;
    background-color: #c6d4ff;
    margin: 0px;
    font-family: oswald;
    font-weight: bold;
    color: #1a1241
}

@media (min-width: 740.10px) and (max-width: 1950px){

    .role{
        font-size: clamp(25px,3.2vw,50px);
        padding: 2vw;
        padding-bottom: 0px;
    }
    .body-div, .body-div-leader{
        grid-template-columns: 1fr 1fr;
        padding: 2vw ;
        justify-content: center;
        align-items: center;
        column-gap: 2vw;
        row-gap: 2vw;
        /* background-image: url(logo/background_arrow.svg); */
    }
    
    .profile{
        grid-template-columns: 0.8fr 1fr;
        /* margin: 20px; */
        padding: 1vw;
        height: 24vw;
        max-height: 400px;
        min-height: 170px;
    }
    
    .profile-pic-div{
        margin-right: .4vw;
        
    }
    
    .profile-pic{
        width: 100%;
        height: 100%;
    }

    .info{
        padding-left: 1vw;
        border-left: 3px solid #261640b7;

    }
    
    .name{
        font-size: clamp(25px,3vw,50px);
    }
    .joined{
        font-size: clamp(15px,2vw,40px);
    }
    .interest{
        font-size: clamp(10px, 1.3vw, 30px);
        color: #62587a;
    }   

}

@media (min-width: 1950.1px){
    
    .header-container {
        width: 1950px;
        padding-left: calc((100vw - 1950px)/2);
        padding-right: calc((100vw - 1950px)/2);
    }
    .right-image{
        margin-left: -600px;
    }
    .body-div, .body-div-leader{
        grid-template-columns: 906px 906px;
        padding-top: 25px ;
        padding-left: calc((1vw - 1950px)/2);
        padding-right: calc((1vw - 1950px)/2);
        justify-content: center;
        align-items: center;
        column-gap: 25px;
        row-gap: 25px;
        /* background-image: url(logo/background_arrow.svg); */
    }
    .role{
        padding-left: calc((50vw - 906px));
        font-size: 50px;
    }
    
    .profile{
        grid-template-columns: 0.8fr 1fr;
        /* margin: 20px; */
        padding: 19px;
        height: 400px;
    }
    
    .profile-pic-div{
        margin-right: 8px;
        
    }
    
    .profile-pic{
        width: 100%;
        height: 100%;
    }

    .info{
        padding-left: 19px;
        border-left: 3px solid #261640b7;

    }
    .name{
        font-size: 50px;
    }
    .joined{
        font-size: 40px;
    }
    .interest{
        font-size: 30px;
    }

}

@media (max-width: 740.00px) and (min-width: 450.10px) {

    .header-container {
        padding-top: 33px;
        margin-top: 0px;
    }
    .right-image {
        display: block;
        justify-content: center;
        align-items: center;
        padding-top: 0px;
        margin-top: -20px;
        margin-left: -90px;
        margin-right: auto;
        padding-bottom: 0px;
        
    }
    .body-div, .body-div-leader{
        /* display: flex;
        flex-direction: column; */
        row-gap: 20px;
        padding: 2vw ;
        
        /* background-image: url(logo/background_arrow.svg); */
    }
    .role{
        padding-left: 3vw;
        font-size: clamp(30px, 6.5vw, 6.5vw);
    }

    .profile{
        grid-template-columns: 0.45fr 1fr;
        /* margin: 20px; */
        padding: 1vw;
        /* height: clamp(180px,25vw,25vw); */
    }
    
    .profile-pic-div{
        margin-right: 5px;
        
    }
    
    .profile-pic{
        width: 100%;
        height: 100%;
    }

    .info{
        padding-left: 9px;
        border-left: 3px solid #261640b7;

    }
    .name{
        font-size: clamp(30px, 6.5vw, 6.5vw);
    }
    .joined{
        font-size: clamp(23px,2vw, 2vw);
    }
    .interest{
        font-size: clamp(12px,1.6vw, 1.4vw);
        color: #62587a;
    }
    .join{
        margin-left: calc(50vw - 38px);
    }
}
@media(max-width:450.00px){
    .header-container {
        padding-top: 33px;
        margin-top: 0px;
    }
    .right-image {
        display: block;
        justify-content: center;
        align-items: center;
        padding-top: 0px;
        margin-top: 0px;
        margin-left: -60px;
        margin-right: auto;
        padding-bottom: 20px;
        
    }
    .body-div, .body-div-leader{
        display: block;
        padding: 10px ;
    }

    .role{
        padding-left: 25px;
        font-size: 40px;
    }

    .profile{
        display: block;
        /* margin: 20px; */
        padding: 10px 25px;
        margin-bottom: 20px;
    }
    
    .profile-pic-div{
        display: block;
        justify-content: center;
        height: 250px;
        width: 70%;
        min-width: 185px;
        margin: 0px auto 5px auto;    
    }
    
    .profile-pic{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .info{
        padding-top: 6px;
        border-top: 3px solid;

    }
    .name{
        font-size: 40px;
        text-align: center;
    }
    .joined{
        font-size: 25px;
        text-align: center;
    }
    .interest{
        font-size: 20px;
        text-align: center;
        color: #62587a;
    }
    .join{
        margin-left: calc(50vw - 38px);
    }
}