test.css

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap');
body{
    margin:0;
}
.arrow{
    display:none;
}
nav{
    width:100% 100%;
    background:rgb(27, 27, 27);
    padding:10px 0;
}
nav ul{
    display:flex;
    justify-content:space-around;
    align-items:center;
    list-style:none;
    margin:0;
}
nav a{
    text-decoration:none;
    color:white;
}
#nav-links{
    font-size:18px;
    font-family: 'Lato', sans-serif;
}
#nav-heading{
    font-size:32px;
}
.csi{
    background:url(images/team_bg.png) no-repeat;
    background-size:100%;
    height:100vh;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left:20px;
    align-items:center;
}
.csi h1{
    margin:0;
    color: aliceblue;
    font-family: 'Rubik', sans-serif;
    font-size: 4rem;
    text-align: center;
}
.about-team{
    width:35%;
}
.about-team h2{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 38px;
    text-align: center;
}
.about-team p{
    font-family: 'Lato', sans-serif;
    font-size:18px
}
.principal,.president{
    display: flex;
    justify-content:center;
    height: auto;
}
.faculty_profile{
    display:flex;
    flex-direction: column;
    align-items:center;
    padding:10px;
    color: black;
    text-align: center;
    border-radius: 12px;
    align-items:center;
}
.profile_info{
    width: 100%;
    text-align: center;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 8px 8px;
}
.profile_info h3{
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 0 5px 0;
    font-family: 'Otomanopee One', sans-serif;
}
.profile_info span{
    display: block;
    font-size: 18px;
    color: #0facf3;
}
.faculty_profile img{
    transition: all 0.5s ease-in-out 0s;
    width: 250px;
    height: 250px;
    margin-top: 10px;
    object-fit: cover;
}
.faculty_profile:hover img{ transform: scale(1.05); }
.HOD_faculty{
    display:flex;
    justify-content:space-around;
}
.HOD{
    display:flex;
    flex-direction: column;
    align-items:center;
}
.associate_faculty{
    display:flex;
    justify-content:space-around;
    margin:30px 0;
}
#mentor{
    background:#1b43bd;
    margin:0;
    text-align:center;
    padding:20px 0;
    font-size:40px;
    color:white;
}
.faculty_incharge{
    background-size:100% 100%;
    padding:20px 10px;
}
.vice-president,.secretary,.joint-secretary{
    display:flex;
    justify-content:space-around;
    
}
video{
    position:absolute;
    width: 100%;
    z-index: -10;
}
.student_incharge h2{
    text-align:center;
    font-size:40px;
    color: white;
    background:#1b43bd;
}
.design_team{
}
#website{
    padding: 10px;
    border-radius: 10px;
}
.social_media_team{
}
footer{
    background: #e5e5e5;
    font-family: 'Poppins', sans-serif;
}
.footer_heading{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
}
.footer_heading h1{
    text-align: center;
}
#line1,#line2{
    background:grey;
    width: 100%;
    height:2px;
}
.social_media{
    display:flex;
    justify-content:center;
    gap:138px;
}
.social_media i{
    color:black;
}
#line3{
    display: flex;
    justify-content:center;
    align-items:center !important;
    width:100%;
    margin-top:20px;
}
#Line3{
    height:80px;
    background:grey;
    width: 2px;
}
.contact h1{
    text-align:center;
    font-family: 'Baloo Tammudu 2', cursive;
    color: #129DB0;
    font-size:44px;
    margin-bottom:0;
}
.contact span{
    border-bottom:4px solid grey;
}
.hamburger{
    display:none;
    position:absolute;
    width: 100%;
    height:100vh;
    background:rgba(20, 20, 20, 0.9);
    z-index: 20;
    justify-content:center;
    
}
.hamburger a{
    color: white !important;
}
#close{
    display:none;
}
.loader{
    height:100vh;
    display: none;
    flex-direction: column;
    justify-content:center;
}
.form_location{
    display:flex;
    flex-direction: column;
    align-items:center;
    width: 100%;
    overflow: hidden;
}

.address-div,.mail-div{
    display: flex;
    gap: 30px;
    margin: 10px;
    align-items:center;
}
.address-div{
    padding-left:10px;
}
.contactus{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:center;
}
.contact-form{
    margin-top:30px;
    width:100%;
}
.contact-form form{
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    height:100%;
    gap: 30px;
    width:100%;
}
.contact-form input,.contact-form textarea{
    
    margin-right:40px;
    font-size:18px;
    border-radius:10px;
    background:none;
    border: 1px solid black;
    padding:5px 8px;
    outline:none;
}
#query-submit{
    background:#4a4a4a;
    outline:none;
    border:none;
    font-size:18px;
    padding:5px 16px;
    border-radius:10px;
    color: white;
}
#emailto{
    text-decoration: none;
    color: black;
}
.copyright{
    bottom:0;
    background:black;
    color: white;
    margin:0;
    padding: 3px;
    text-align: center;
}
#team_img{
    display:none;
}
#button{
    display:flex;
    justify-content:center;
    margin-bottom:10px;
}
h2{
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 5px;
    padding:10px;
}
@media screen and (max-width:870px){
    #team_img{
        display:initial;
        width: 100%;
    }
    .arrow{
        display:initial;
    }
    .hamburger{
        list-style: none;
        position:fixed !important;
        height:100vh !important;
    }
    nav{
        display:none;
    }
    .hamburger li{
        list-style: none;
    }
    .hamburger a{
        text-decoration:none;
        color:black;
    }
    .menu p{
        width:20px;
        height:2px;
        background:black;
        margin:8px;
    }
    .menu{
        position:fixed;
        width: 100%;
        z-index: 30;
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
    }
    #hamburger_menu{
        background:rgb(199, 199, 199,0.6);
        padding:5px;
        border-radius: 10px;
        margin:4px;
    }
    .csi{
        display:flex;
        flex-direction:column;
        background:none;
        gap: 0;
        padding: 0;
        height:100vh;
    }
    .csi h1{
        color:#129DB0;
        font-size:42px;
        margin-top:20px;
    }
    .about-team h2{
        margin:0;
        color:#fff;
    }
    .about-team{
        width:100%;
        margin: 20px 0;
        display:flex;
        flex-direction: column;
        justify-content:center;
    }
    .about-team p{
        margin: 10px;
        padding: 3px;
        color:white;
        text-shadow: none;
    }
    .faculty_profile{
        display:flex;
        gap: 10px;
        
        
    }
    .faculty_profile img{
        width:150px;
        height:150px;  
    }
    .faculty_incharge{
        background: rgb(41, 41, 41);
    }
    .social_media{
        display:flex;
    }
    .hamburger ul{
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin:0;
        text-align: center;
        padding:none !important;
    }
    .hamburger li{
        font-size:3rem;
    }
    #nav-heading{
        list-style: none;
        text-align: center;
        position:relative;
        margin:20px
    }
    #nav-heading a{
        text-decoration:none;
        color: black;
        font-weight: bold;
    }
    .design_team{
        background:url(https://dbdzm869oupei.cloudfront.net/img/sticker/preview/36973.png) no-repeat;
        background-size:120% 100%;
    }
    .HOD_faculty,.associate_faculty{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .vice-president,.joint-secretary{
        display:flex;
        gap: 20px;
        margin: 20px 10px;
        justify-content:space-around;
    }
    .secretary{
        display:flex;
        justify-content:center;
    }
    .social_media{
        display:flex;
        width: 100%;
        justify-content:space-between;
        gap: 0;
    }
    .contactus{
        display:flex;
        flex-direction:column;
    }
    .contact-form input,.contact-form textarea{
        margin: 10px !important;
    }
    #button{
        display:flex;
        justify-content:center;
        margin-bottom:10px;
    }
}