@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;600;700&display=swap');
:root{
    --black: #575555;
    --ligt-black: #999;
    --topics: #868282;
    --nav-bg: #d0d0d0ec;
    --light-nav-bg: #f3f3f3;
    --main-bg:#ebebebfb;
    --color1: #0cc4f8;
    --color2: #05265f;
    --color3:#fbce05;
    --white: #fff;
    --empty:#5afd90;
    --green:#0d953b;
    --logout:#ec260c;
    --border:.2rem solid #ccc;
    --box-shadow:0 .5rem 1rem #4e4b4b1a;
    --topbar-border: 0 7px 25px #16161657;
}


.banner{
    height: 300px;
    background-image: linear-gradient(210deg, #0cc5f869 0%, #05265f6a 100%), url(../images/bg1.jpg);
    text-align: center;
    color: var(--white);
}

.banner1{
    height: 300px;
    background-image: linear-gradient(210deg, #0cc5f869 0%, #05265f6a 100%), url(../images/bg1.jpg);
    text-align: center;
    color: var(--white);
}

.banner2{
    height: 300px;
    background-image: linear-gradient(210deg, #0cc5f869 0%, #05265f6a 100%), url(../images/bg1.jpg);
    text-align: center;
    color: var(--white);
}

.banner h1, .banner1 h1, .banner2 h1 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 2px;
    position: relative;
    top: 140px;
}

.banner h2, .banner1 h2, .banner2 h2{
    font-size: 30px;
    /* font-weight: 700; */
    letter-spacing: 1px;
    position: relative;
    top: 170px;
}
.buttons{
    background: linear-gradient(to bottom, var(--color1) 0%, var(--color2) 100%);
}
.buttons a {
    position: relative;
    top: 10px;
    left: 3px;
    padding: 5px 10px;
    font-size: 17px;
    background: var(--color1);
    color: var(--color2);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-right: 2px;
    border: none;
    transition: .5s;

    &:hover {
        background: var(--color2);
        color: var(--white);
        border: 1px solid var(--color1);
        border-bottom-right-radius: 25px;
        transition: .5s;
    }
}
.image_contain{
    width: 99%;
    padding: 0px 1%;
    overflow: hidden;
    /* padding: 0px 0px 0px 10px; */

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.title{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;

    color: var(--black);
}
.image_contain .image{
    width: 100%;
    height: 250px;
    /* object-fit: cover; */
}
.image_contain .image img{
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

.mission{
    display: flex;
    justify-content: left;
    margin-top: 20px;
    height: 500px;
    padding: 15px;
}

.mission .mission-img{
    width: 500px;
    /* margin-right: 10px; */
}

.mission .mission-img img{
    height: 100%;
    border-top-left-radius: 100px;
    
}

.mission .mission-text{
    background: linear-gradient(250deg, #0cc5f869 0%, #05265f6a 100%);
    padding: 10px;
    border-bottom-right-radius: 100px;
}

.mission .mission-text h1{
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color2);
}

.mission .mission-text p{
    font-size: 18px;
    color: var(--white);
    letter-spacing: 1px;
    line-height: 1.3;
    text-align: left;
}

.vision{
    padding: 15px 10%;
    width: 80%;
}
.vision h1{
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color2);
}
.vision p{
    font-size: 18px;
    color: var(--black);
    letter-spacing: 1px;
    line-height: 1.3;
    text-align: left;
}

/* Board of directors styling */
.team h1{
    text-align: center;
    color: var(--black);
}
.team-members{
    width: 99%;
    padding: 0px 10%;
    /* overflow: hidden; */

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    /* align-items: center; */
    justify-content: center;

}
.team-members .member{
    width: 100%;
    height: 400px;
    position: relative;
    background: linear-gradient(to bottom, #0cc5f869 0%, #05265f6a 100%);
    overflow: hidden;
}

.team-members .member img{
    width: 100%;
    height: 100%;
}

.team-members .member .data{
    position: absolute;
    left: 0;
    
    height: 100px;
    top: 85%;
    padding: 10px 15px 15px 15px;
    background: #00060fc4;
    color: var(--white);
    text-align: left;
}

.team-members .member .data h2{
    font-size: 13px;
    font-weight: 500;
}

.team-members .member .data p{
    font-size: 18px;
}

.team-members .member span{
    /* top: 20px; */
    opacity: 0;
    padding: 5px;
    
}

.team-members .member:hover span{
    background: #000205bf;
    position: absolute;
    right: 0px;
    left: 0px;
    height: 100%;

    
    opacity: 1;
}

.team-members .member:hover .data{
    background: #00060f0f;
    position: absolute;
    top: 10px;
    right: 10px;
    left: 10px;
    /* bottom: 10px; */
    height: 93%;

    text-align: center;
    border: 3px solid red;
    
    /* opacity: 1; */
}

.team-members .member:hover .data h2{
    text-align: center;
    position: relative;
    top: 80px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-skip: 1;
    text-decoration-color: var(--color1);
}

.team-members .member:hover .data p{
    text-align: center;
    position: relative;
    top: 80px;
    text-decoration-thickness: 2px;
    text-decoration-skip: 1;
    text-decoration-color: var(--color1);
}

.map h1{
    padding: 20px 10px;
    color: var(--black);
    text-align: center;
}

.map iframe{
    width: 100%;
    height: 500px;
}

/*Media resizing Queries of 817px*/
@media (max-width: 661px){    
.mission{
    display: block;
    margin-top: 10px;
    height: 100%;
    padding: 5px;
}

.mission .mission-img{
    width: 100%;
}

.mission .mission-img img{
    height: 350px;
    width: 100%;
    border-top-left-radius: 0px;
    
}

.mission .mission-text{
    border-bottom-right-radius: 0px;
}

.mission .mission-text p{
    font-size: 18px;
    /* color: black; */
    letter-spacing: 1px;
    line-height: 1.1;
}

.vision{
    padding: 15px 2%;
    width: 100%;
}
.team-members{
    width: 100%;
    padding: 0px 1%;
}
}