@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@500&family=Martel+Sans:wght@600&family=Poppins:wght@400;600;700&display=swap');

* {
    margin: 0;
    padding: 0;

}

.container {
    transition: width 2s ease-in;
    background-color: rgb(255, 255, 255);
    display: flex;

    justify-content: center;

    margin: 70px auto;

    max-width: 1000px;
    width: 70%;

    border: 2px groove rgba(255, 221, 0, 0);
    border-radius: 15px;

    /* box-shadow: inset -1px -1px 17px 2px #0800ff37; */
    box-shadow: rgba(0, 0, 0, 0.906) 0px 4px 14px 7px;


}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img {
    background-image: url(sarabjitImg21.jpeg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    width: 180px;
    height: 180px;
    /* overflow: hidden; */
    margin: 40px 0 28px 0;
    display: flex;
    flex-flow: wrap;
    flex-direction: column;
    transition: all 2s ease-in;
    border: 9px solid #0046ae;
    box-shadow: -4px -4px 17px 9px #ff8d8db0;


    /* border: 2px solid black; */

}

.bio {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 5px;
    margin-bottom: 20px;
}

h3 {

    font-family: 'Poppins', sans-serif;

}

p {

    font-family: 'Martel Sans', sans-serif;
    font-size: 15px;
    width: 70%;
    margin: 9px auto;
}

button {
    padding: 12px;
    width: 120px;
    font-family: 'Poppins', sans-serif;
    border-radius: 5px;
    border: 3px solid #000;
background-color: white;
    color: #000000;
    font-size: 15px;
    margin-bottom: 15px;

    /* box-shadow: inset 2px 2px 18px 19px rgb(230 7 32); */
    transition: box-shadow 1s, color 1s;


}

button:hover {
    background-color: #000000;
    color: rgb(255, 255, 255);
    font-weight: 600;

}

.buttons {
    display: flex;
    flex-direction: row;
    gap: 70px;
    margin: 60px 0px;
    transition: flex-direction .5s ease-in;


}
.buttons a {
    transition: all 1s ease-in-out;
    display: flex;
    border-bottom: 5px solid ;
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
}

.buttons .insta{
    border-bottom: 5px solid  red;
}
.buttons .whatsapp{
    border-bottom: 5px solid  rgb(0, 228, 0);
}
.buttons .linked{
    border-bottom: 5px solid  rgb(25, 0, 255);
}





a .logo {
   text-align: center;


}





@media screen and (max-width:570px){
    .img{

        height: 150px;
        width: 150px;
        border: 5px solid #ffffff;
        box-shadow: -4px -4px 17px 9px #0800ff37;
        /* border: 8px solid #000; */
    }
    .buttons{
        flex-direction: column;
        gap: 40px;
        margin: 30px 0 50px 0;
    }
    .buttons a{
        transition: all 1s ease-in-out;
        display: flex;
        
        border: 3px solid #000;
        border-radius: 50%;
        height: 50px;
        width: 50px;
        justify-content: center;
        align-items: center;
        /* padding: 10px; */
    }
    a img{
        display: flex;
        height: 20px;
        width: 20px;
        align-items: center;

    }
    .buttons .insta{
        border: 3px solid rgb(254, 0, 42);
    }
    .buttons .whatsapp{
        border: 3px solid rgb(0, 254, 13);
    }
    .buttons .linked{
        border: 3px solid rgb(14, 50, 249);
    }
    
    
}
@media screen and (min-width: 820px) {
    .img{
        transition: all 1s ease-in-out;
        height: 220px;
        width: 220px;
        border: 9px solid #eb0066;
        box-shadow: -4px -4px 17px 9px #d0ff0037;
    }
    .p{
        font-size: 20px;
        width: 50%;
        background-color: aqua;
    }
    .buttons a{
        transition: all 1s ease-in-out;
        display: flex;
        border: 4px solid;
        width: 100px;
        justify-content: center;
        align-items: center;
        padding: 8px;
        border-radius: 15px;
       
    }
   
    .buttons .insta{
        border: 4px solid rgb(254, 0, 42);
    }
    .buttons .insta:hover{
        background-color:  rgba(255, 195, 205, 0.865);
    }
    .buttons .whatsapp{
        border: 4px solid rgb(0, 254, 13);
    }
    .buttons .whatsapp:hover{
        background-color: rgba(166, 250, 149, 0.683);
    }
    .buttons .linked{
        border: 4px solid rgb(14, 50, 249);
    }
    .buttons .linked:hover{
        background-color:  rgba(172, 184, 249, 0.4);
    }
    
}