@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Poppins:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
html{
    scroll-behavior: smooth;
    /* overflow-x: hidden; */
}
body{
    margin: 0px;
    /* background-color: rgb(244, 243, 243); */
    background-image: url('../Image/bodybgblured.png');
    background-attachment: fixed;
}

/* navbar */
.navigation-bar nav{
    width: 90%;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0% 5%;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    position: fixed;
    z-index: 1;
}
.navigation-bar nav ul li{
    display: inline-block;
    list-style: none;
    margin: 2px 20px;
}
.navigation-bar nav ul li a{
    text-decoration: none;
    color: aliceblue;
    font-size: 15px;
    position: relative;
}
.navigation-bar nav ul li a::after{
    content:'';
    background-color: #ffffff;
    width: 0;
    height:3px;
    position: absolute;
    left: 0px;
    bottom: -6px;
    transition: 0.4s ease-in-out;
}
.navigation-bar nav ul li a:hover::after{
    width:100%;
}
.navigation-bar i{
    display: none;
}
#logoup{
    height: 65px;
}

/*--------intro section------- */
#intro{
    font-size: 60px;
    padding-top: 100px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #ffffff;
    font-style: italic;
}

.mission{
    margin: 5% 8% 8%;
    border-radius: 20px;
    height: 300px;
    padding: 4%;    
    display: flex;   
    justify-content: space-between;
    gap: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.662) 0px 5px 15px 0px;
}
.leftmission{
    flex-basis: 50%;
    margin-right: 40px;
}
.leftmission #head{
    font-family: 'Lobster', cursive; 
    font-size: 60px; 
    text-shadow:slategray -2px 2px;
}
.leftmission #descrip{
    font-family: 'Righteous', cursive; 
    font-size: 18px; 
    color: rgb(39, 38, 38); 
}

.rightmission{
    margin-top: -50px;
    flex-basis: 50%;
}
.rightmission img{ 
    width: 100%;
}

/* maps */
.container1{
    background-color:rgb(16, 16, 16);
    width: 100%;
    height: 550px;
    color: #ffffff;
    padding-top: 2%;
}
.maps{
    border-radius: 20px;
    height: 400px;
    display: flex;   
    justify-content: space-between;
    gap: 10px;
    background-color: rgb(0, 0, 0);
    box-shadow: rgba(255, 255, 255, 0.15) 10px 5px 15px 0px;
    margin: 4% 8%;
}
.maps1{
    flex-basis: 60%;
    overflow: hidden;
}
.maps1 iframe{
    width: 100%;
    height: 100%;
    border-radius: 20px 0px 0px 20px;
}
.texts{
    flex-basis: 40%;
    /* padding: 20px 0px 0 30px; */
    padding: 4%;
}
.texts #head{
    font-family: 'Lobster', cursive; 
    font-size: 50px;
}
.texts #descrip{
    font-family: 'Righteous', cursive;
} 
/* feature cards */
.features{
    background-color: rgb(244, 243, 243);
    width: 100%;
    height: 520px;
    color: #000000;
    padding-top: 2%;
}
.row{
    height: 430px;
    display: flex;   
    justify-content: space-between;
    gap: 20px;
    margin: 2% 11%;
}
.col{
    flex-basis: 33%;
    background-color: #ffffff;
    margin: 2% 3%;
    font-family:'Righteous', cursive;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.662) 0px 5px 15px 0px;
    transition: ease-in-out 0.25s;
}
.col:hover{
    transform: translateY(-20px);
    background-color: rgb(23, 22, 21);
    color: white;
}
.col img{
    width: 100px;
    margin-top: 10%;
    -webkit-user-drag: none;
}
.col p{
    margin: 25px 28px;
}

/* team members */
.container2{
    background-color:rgb(16, 16, 16);
    width: 100%;
    height: 550px;
    color: #ffffff;
    padding-top: 2%;
}
.container2 h1{
    font-family: "Poppins", sans-serif;
    font-size: 40px;
    margin-left: 8%;
}
.team{
    border-radius: 20px;
    height: 320px;
    display: flex;   
    justify-content: space-between;
    gap: 40px;
    margin: 4% 8%;
}
.stud{
    flex-basis: 25%;
    overflow: hidden;
    background-color: rgb(0, 0, 0);
    box-shadow: rgba(159, 154, 154, 0.182) 0px 5px 15px 0px;
    border-radius: 20px;
    font-family: "Poppins", sans-serif;
    color: #ffffff;
    transition: ease-in-out 0.5s;
}
.stud img{
    width: 120px;
    background-color: white;
    border-radius: 50%;
    margin-top: 20px;
    transition: ease-in-out 0.5s;
}
.stud span{
    color: #ffffff6c;
}


/* Contact section */
.contact{
    background-color: rgb(244, 243, 243);
    width: 100%;
    height: 570px;
    padding-top: 2%;
    display: flex;
    gap: 20px;
    overflow: hidden;
    font-family: "Poppins", sans-serif;
}
.contact-left{
    flex-basis: 45%;
    margin-left: 8%;
    margin-right: 2%;
}
.contact-left p{
    font-size: 18px;
}
.contact-left i{
    font-size: 23px;
    margin-right: 7px;
    margin-top: 7px;
    font-weight: 400;
}
.contact-right{
    flex-basis: 55%;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    margin: 0px 8% 2% 2%;
    padding-left: 40px;
    padding-top: 20px;
    box-shadow: rgba(0, 0, 0, 0.662) 0px 5px 15px 0px;
}

/* contact form */
form input, form textarea{
    width: 90%;
    border: 0;
    outline: none;
    background-color: rgb(194, 192, 190);
    padding: 15px;
    margin: 15px 0;
    color: rgb(16, 16, 16);
    font-size: 18px;
    border-radius: 15px;
    font-family: "Poppins", sans-serif;
}
form .btn2{
    background-color: #080808;
    padding: 14px 60px;
    font-size: 18px;
    margin: 20px auto 50px auto;
    width: fit-content;
    border: 1px solid #6a6a6a;
    padding: 14px 50px;    
    border-radius: 10px;
    text-decoration: none;
    color: white;
    transition: background 0.4s;
}
form .btn2:disabled{
    cursor:not-allowed;
}
form .btn2:enabled:hover{
    cursor: pointer;
    background-color: #ffffff;
    color: black;
    border: 1px solid #151414;
}

/* -----footer------ */
footer {
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: #000000ea;
    padding: 5px 0;
    font-size: 14px;
    width: 100%;
    display: inline-block;
    position: relative;
    margin-bottom: -4px;
}
footer table:first-child{
    float: left;
}
footer ul{
    float: right;
    list-style: none;
    padding: 8px;
}
footer ul li{
    display: inline-block;
    margin: 0 8px;
}
footer a{
    color: white;
    text-decoration: none;
}
footer i{
    transition: ease-in-out 0.2s;
}
footer i:hover{
    color:rgb(255, 55, 5);
    transform: translateY(-3px);
}

/* navbar responsive */
@media only screen and (max-width: 800px){
    .navigation-bar #logoup{
        height: 53px;
    }
    .navigation-bar i{
        display: block;
        font-size: 25px;
    }
    .navigation-bar nav ul{
        background-color: #000000f0;
        position: fixed;
        top: 0;
        right: -200px;
        z-index: 5;
        width: 120px;
        height: 100vh;
        padding-top: 50px;
        transition: right 0.4s;
    }
    .navigation-bar nav ul li{
        display:block;
        margin: 23px;
        margin-left: -10px;
    }
    .navigation-bar nav ul .bx{
        position: absolute;
        top: 9px;
        left: 25px;
    }
}
@media only screen and (min-width: 1000px){
    .navigation-bar i{
        display: none;
    }
}

/* about page responsive */
@media only screen and (max-width: 800px){
    #intro{
        font-size: 30px;
        padding-top: 90px;
    }
    .mission{
        margin: 5% 6%;
        border-radius: 15px;
        height: 600px;
        margin-bottom: 10%;
        display: block;   
        padding-right: 0%;
    }
    .leftmission #head{
       font-size: 40px;
    }
    .leftmission #descrip{
        font-size: 17px;
    }
    .rightmission{
        margin-top: 0px;
    }

    /* maps */
    .container1{
        height: 800px;
        color: #ffffff;
        padding-bottom: -10%;
    }
    .maps{
        border-radius: 15px;
        height: 750px;
        display: block;  
    }
    .maps1{
        /* width: 9; */
        height: 300px;
    }
    .maps1 iframe{
        width: 100%;
        height: 100%;
        border-radius: 15px 15px 0px 0px;
    }
    .texts{
        margin-top: 3%;
    }
    .texts #head{
        font-size: 30px;
    }
    .texts #descrip{
        font-size: 17px;
    }

    /* features */
    .features{
        height: 1250px;
        color: #000000;
        padding-top: 3%;
    }
    .row{
        height: 430px;
        display: block; 
        /* margin: 2% 11%; */
    }
    .col{
        margin: 12% 0%;
        border-radius: 20px;
    }
    .col:hover{
        transform: translateY(-20px);
    }
    .col img{
        width: 100px;
        margin-top: 10%;
        -webkit-user-drag: none;
    }
    .col p{
        margin: 25px 28px;
    }

    /* teams */
    .container2{
        height: 1400px;
        padding-top: 2%;
    }
    .team{
        display: block;
        margin-bottom: 5%;  
    }
    .stud{
        margin: 5%;
        padding-bottom: 3%;
    }

    /* contact */
    .contact{
        height: 1150px;
        display: block;
    }
    .contact-left{
        margin-left: 0% 8%;
    }
    .contact-right{
        margin: 8%;
        padding: 5%;
    }
    form .btn2{
        width: 100%;
    }

    /* footer */
    footer {
        padding: 5px 0px;
        font-size: 14px;
        width: 100%;
        display: inline-block;
        /* position: relative;
        margin-bottom: -4px; */
    }
    footer table{
        margin-left: 12%;
    }
    td:first-child{
        display: none;
    }
    footer ul{
        margin-right: 26%;
        display: flex;
        flex-direction: row;
        gap: 20px;
    }
    footer ul li{
        margin: 0px 0px;
    }
}

/* Filter */
#container{
    height: 100%;
    width: 100%;
    margin: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 25;
}
#blurr{
    width: 100%;
    height: 100%;
    position: absolute;
    background: black;
    z-index: 0;
    opacity: 30%;
}
.fill_cont{
    z-index: 45;
    /* border-radius: 20px; */
    height: 80%;
    width: 71%;
    border: 1px solid;
    border-radius: 10px;
    padding: 10px 0px 15px 0px;
    background-color: rgb(255, 255, 255);
}
.fill_controls{
    height: 10%;
    background-color: rgb(255, 255, 255);
    /* border-bottom: 1px solid black; */
}
@media only screen and (max-width: 800px){
    #container{
        height: 100%;
        width: 100%;
        margin: auto;
        justify-content: center;
        display: block;
        align-items: center;
        position: fixed;
        z-index: 25;
    }
    #blurr{
        width: 100%;
        height: 100%;
        position: absolute;
        background: black;
        z-index: 0;
        opacity: 30%;
    }
    .fill_cont{
        z-index: 45;
        /* border-radius: 20px; */
        overflow: hidden;
        height: 80%;
        width: 90%;
        border: 1px solid;
        border-radius: 10px;
        padding: 10px 0px 15px 0px;
        background-color: rgb(255, 255, 255);
    }
    .fill_controls{
        margin-bottom: 15%;
        padding-bottom: 5px;
    }
    .fill_controls input{
        width: 78%;
    }
    .fill_controls select{
        margin-left: 9%;
        width: 80%;
    }
    div.rowd{
        /* height: 20%; */
        padding: 2%;
        display: block;
        grid-template-columns: none;
        }
    div.colsd{
        width: 100%;
        height: 10vh;
        border-radius: 10px;
        border: 1px solid;
        margin-top: 7px;
    }
    div.colsd img{
        display: none;
    }
}
.rowd{
    z-index: 45;
    height: 80%;
    padding: 3%;
    display: grid;
    grid-template-columns: auto auto auto auto;
    row-gap: 20px;
    column-gap: 30px;
    background-color: rgb(255, 255, 255);
    overflow: scroll;
    overflow-x: hidden;
    /* border-radius: 30px; */
    }
.colsd{
    border: 1px solid;
    width: 15vw;
    background-color: rgb(243, 244, 244);
    height: 32vh;
    box-shadow: rgba(0, 0, 0, 0.474) 0px 5px 15px 0px;
    border-radius: 20px;
    border: 1px solid;
    overflow: hidden;
}
.colsd:hover{
    transition: all 0.2s;
    box-shadow: rgba(255, 0, 0, 0.474) 0px 5px 15px 0px;   
}

.colsd img{ 
    width: 100%;
    height: 22vh;
    border-radius: 10px 10px 0px 0px;
}
.colsd font{
    font-size: 15px;
    font-family: 'Righteous',cursive;
    margin: 13px;
}

input{
    width: 70%;
    border: 0;
    outline: none;
    background-color: rgb(209, 209, 209);
    padding: 10px;
    margin: 10px 0px 0px 30px;
    color: rgb(16, 16, 16);
    font-size: 18px;
    border-radius: 15px;
    font-family: "Poppins", sans-serif;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}
select{
    width: 13vw;
    /* height: 4vh; */
    padding: 5px;
    margin: 6px 0px 0px 19px;
    /* border: 1px black; */
    border-radius: 11px;
    font-size: 20px;
    font-family: 'Righteous';
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}

select option{
    padding: 26px;
    margin: 10px;
    /* font-style: bold; */
    font-size: 18px;
    /* background-color: red; */
    font-family: 'Righteous';
    
}

#close{
    position: absolute;
    top: 25px;
    background-color: white;
    color: black;
    /* border: 1px solid black ; */
    padding: 2px 3px;
    font-size:25px;
    cursor: pointer;
    right: 45px;
    z-index: 15;
}

a{
    text-decoration: none;
    color: black;
}