contactus.css

* {
    font-family: sans-serif;
}


/* bootstrap icon tag */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");


/* css for navbar */




/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    transition: all 0.4s ease;
    ;
}


/* ===== Colours ===== */
:root {
    --body-color: #E4E9F7;
    --nav-color: #1f2833;
    --side-nav: #1f2833;
    --text-color: #FFF;
    --search-bar: #F2F2F2;
    --search-text: #010718;
}

body {
    height: 100vh;
    background-color: var(--body-color);
}


nav {
    position: relative;
    top: 0;
    left: 0;
    height: 70px;
    width: 100%;
    background-color: var(--nav-color);
    z-index: 100;
}

nav .nav-bar {
    position: relative;
    height: 100%;
    max-width: 1000px;
    width: 100%;
    background-color: #1f2833;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav .nav-bar .sidebarOpen {
    color: var(--text-color);
    font-size: 25px;
    padding: 5px;
    cursor: pointer;
    display: none;
}

nav .nav-bar .logo a {
    font-size: 25px;
    font-weight: 500;
    color:#66fcf1;
    text-decoration: none;
}

.menu .logo-toggle {
    display: none;
}

.nav-bar .nav-links {
    display: flex;
    align-items: center;
}

.nav-bar .nav-links li {
    margin: 0 5px;
    list-style: none;
}

.nav-links li .nava {
    position: relative;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-color);
    text-decoration: none;
    padding: 10px;
}

.nav-links li .nava::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: var(--text-color);
    opacity: 0;
    transition: all 0.3s ease;
}


.responsivenav {
    margin-top: 0px;
}
.sticky {
    position: fixed;
    top: 0;
  }

@media (max-width: 790px) {
    nav .nav-bar .sidebarOpen {
        display: block;
    }

    .menu {
        position: fixed;
        height: 100%;
        width: 320px;
        left: -100%;
        top: 0;
        padding: 20px;
        background-color: #1f2833;
        z-index: 100;
        transition: all 0.4s ease;
        
    }

    nav.active .menu {
        left: -0%;
    }

    nav.active .nav-bar .navLogo .nava {
        opacity: 0;
        transition: all 0.3s ease;
    }

    .menu .logo-toggle {
        display: block;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo-toggle .siderbarClose {
        color: var(--text-color);
        font-size: 24px;
        cursor: pointer;
    }

    .nav-bar .nav-links {
        flex-direction: column;
        padding-top: 30px;
        
    }

    .nav-links li .nava {
        display: block;
        margin-top: 20px;
        
    }
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.nav-links li a:hover{
    color: #45a29e;
    background-color: #fff;
    border-radius: 50%;
padding: 10px;
}
.dropdown-item{
    padding: 10px;
}







/* campuses css */

.campuses{
    padding: 70px;
}

.box{
    width: 290px;
    color: #0b0c10;
    border-bottom: #45a29e solid 8px;

}

/* form css */

.contactus {
    height: 500px;
}


.contactus {
    position: relative;
    /* margin-top: 50px; */
}
.sidenavigations{
    background-color: #0b0c10;
    color: #c5c6c7;
    padding: 50px;
    padding-top: 80px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
.form-control:hover{
    background-color: #c5c6c7;
    color: #1f2833;
}

@media (max-width: 990px) {
    .sidenavigations {
        position: relative;
        font-size: xx-small;
        padding: 10px;
        padding-top: 90px;

    }
   
    .sidenavigationh1{
        font-size:xx-large;
        padding-top: 50px;
    }
    
}



@media (max-width: 1300px) {
.sidenavigationh1{
    font-size: xx-large;
}    
}


@media (max-width: 760px) {
    .sidenavigations{
        border-top-right-radius: 0px;
        border-bottom-left-radius: 40px;
        padding: 50px;
    }
}


/* footer css */

.sign-in{
    padding: 2px; 
    border-radius:10%;
    background: none;
     margin: 1%;
     font-size: 20px;
     width: 7%;
     border: 2px solid #45a29e ;
     font-family: "montserrat";
     transition: 0.8s;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     height: 1%;
     color: #fff;
}

.sign-in::before{
content:"";
position: absolute;
left: 0;
width: 100%;
height: 1%;
background:#45a29e ;
z-index: 1;
transition: 0.5s;
}
.sign-in::before{
    top: 0;
    border-radius: 0 0 50% 50%;
}
  .sign-in:hover::before{
      height: 180%;
      content: "Sign In";
      padding-top: 6%;
      color: #FFF;
  }

  .footerimg {
    /* //background linear-gradient will form a layer over the image (0.9) is the opacity that you can increase or decrease. url is for the image that you want to put in the div  */
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('img/footer.jpg'  );

    background-repeat: no-repeat;
background-size: cover;
}

.footerimg h3 {
    padding-top: 15%;
    color: rgb(231, 225, 225);
}

.foricon a {
    border: 13px solid transparent;
    transition: all 0.3s ease;
}

.bi-facebook{
color: #3b5998;
font-size: x-large;

}
.bi-facebook:hover{
    color: #fff;
    background-color: #3b5998;
}
.bi-twitter{
    color: #00acee ;
    font-size: x-large;
}
.bi-twitter:hover{
    background-color: #00acee;
    color: #FFF;
}
.bi-instagram{
    background:-moz-linear-gradient(top, #405DE6 0%, #5851DB 100%); 
    background: -webkit-linear-gradient(top, #833AB4 0%,#C13584 100%); 
    background: linear-gradient(to bottom, #E1306C 0%,#FD1D1D 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
   -webkit-text-fill-color:transparent;
   font-size: x-large;

    }
    .bi-instagram:hover{
        color: #fff;
       background-color: #010718;
    }

.bi-youtube{color: #FF0000;
    font-size: x-large;
        }
.bi-youtube:hover{
    color: #fff;
    background-color: #FF0000;
}
.footercontactus{
   color: #c6c7c8;
}
.footercontactus:hover{
    color: #45a29e;
}
.footerlinks{
    justify-content: center;
    text-align: center;
    color: #c6c7c8;
}
.footerlinks:hover{
    color: #45a29e;
}
@media (max-width: 790px) {
    .welcomeimg {
  
        width: 100%;

        
    }}
    @media (max-width:990px) {
        .footercontactus{
            font-size: small;
        }
    }
    @media (max-width:764px) {
        .footerlinks{
            font-size: small;
        }
    }