.pre-loader {
  position: fixed;
  z-index: 100; /** make sure this is the highest value compared to all other divs **/
  top: 0;
  left: 0;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.header{
    width : 100% ;  
}

.main{
  width: 100%;
}

#hidepage { z-index: 10000 }

html, body { height: 100%; width: 100%; }

body{
  font-family: 'Roboto', sans-serif;
}

.loading-gif {
  max-width: 500px;
}



.pre-loader.hidden {
  animation: fadeOut 10s; /** change to 1s */
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  100% {
      opacity: 0;
      visibility: hidden;
  }
}


.portal{

  position: relative;

  top: -45px;

  left : 50px;

  color : white;

 }


  #portal_image{

    height:70px;

  }



  .portal-student{

    position: relative;
    left : 174px;

  }



  .mission_text{

    position: relative;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    
  }

  .our_text{
    color: #047872;
    
  }

  .top{

    background-color: #F2F2F2;

  }



  .center{

    background-color: #F2F2F2;

  }

  .site{

    background-color: #F2F2F2;

  }

  

  .mission_vision{
    color: #4E4E4E;

    text-align: center;


  }


  .vision_text{
    position: relative;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
  }


  #portal{
    height: 70px;
  }





  .middle{

    position: relative;
    width :100%
  }



  .profile{

    position: relative;

    left:45px

  }



  .question{

    position:absolute;

    top:65px;

    right : 360px;

    text-align : center;

    font-size : 30px;

    color: white;

  }



  .welcome{
  color: #037979;

  }



  .school{
   position: relative;
   left: -75px;
  }



  .navbar a {
  color: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 5px 10px 20px;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}


  #head_badge{
    height: 60px;
  }



/* 
  #footer_image{
      position: absolute;
      top : 1970px;
      width: 100%;
  } */


  /* #foot{
    position: absolute  ;
    bottom : -2450px;
    top : 2680px;
    width:100% ;
  } */

.navbar {

  padding: 0;

  }

  

  .navbar ul {

  margin: 0;

  padding: 0;

  display: flex;

  list-style: none;

  align-items: center;

  }

  

  .navbar li {

  position: relative;

  }

  

  .navbar a {

    color: #05968f;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 5px 10px 20px;

  font-size: 15px;

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

  white-space: nowrap;

  transition: 0.3s;

  -webkit-transition: 0.3s;

  -moz-transition: 0.3s;

  -ms-transition: 0.3s;

  -o-transition: 0.3s;

}

  

  .navbar a i {

  font-size: 12px;

  line-height: 0;

  margin-left: 0px;

  

  }

  


  

  .navbar .getstarted { color: #5cb874; 

    padding: 18px 25px; margin-left: 

    30px; border-radius: 4px; border: 2px solid #5cb874; 

    transition: 0.3s; font-size: 14px; 

    -webkit-border-radius: 4px; -moz-border-radius: 4px;

     -ms-border-radius: 4px; -o-border-radius: 4px;

  }

  

  .navbar .getstarted:hover {

  background: #5cb874;

  color: #fff;

  }

  



 .nav-link{
    text-transform: uppercase;
    font-size: 14px;
    padding: 40px 18px;
    border: none;
    background: none !important;
    border: none !important;
    /* font-family: "Trebuchet MS", Helvetica, sans-serif; */

  }



  /* .nav-link::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 0.1em;

  background-color: #06958f;

  opacity: 0;

  transition: opacity 300ms, transform 300ms;

} */



.nav-link:hover::after,

.nav-link:focus::after {

  opacity: 1;

  transform: translate3d(0, 0.2em, 0);

}

  .info{
    position: relative;
    top:-250px;
    height: 0px;
    left:-20px
  }

  
  .team .member img {
    max-width: 70%;
    border-radius: 50%;
    margin: 0 0 30px 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;

}

  

  .team .member h4 {
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 18px;
  }

  

  .team .member span {

    font-style: italic;
    display: block;
    font-size: 13px;
  }

  

  .team .member p {

    padding-top: 10px;
    font-size: 14px;
    font-style: italic;
    color: #aaaaaa;
  }

  

  .team .member .social {
    margin-top: 15px;
  }

  

  .team .member .social a {
    color: #919191;
    transition: 0.3s;
  }

  

  .team .member .social a:hover {

    color: #5cb874;

  }

  

  .team .member .social i {
    font-size: 18px;
    margin: 0 2px;
  }


  section {
    padding: 40px 0;
  }

  

  .section-bg {
    background-color: #f8fcf9;
  }

  

  .section-title {
    text-align: center;
    padding-bottom: 0px;
  }

   

  .section-title h2 {
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 0px;
    position: relative;
    color: #037979;
  }

  

  .section-title h2::before {
    content: '';
    position: absolute;
    display: block;
    width: 120px;
    height: 1px;
    background: #ddd;
    bottom: 1px;
    left: calc(50% - 60px);
  }

  

  .section-title h2::after {
    content: '';
    position: absolute;
    display: block;
    width: 40px;
    height: 3px;
    background: #ddd;
    bottom: 0;
    left: calc(50% - 20px);
  }

  

  .section-title p {
    margin-bottom: 0;
    font-size: 14px;
    color: #797A7B;
  }

#topbar {
  background-image:url("img/header-img.jpg");
  font-size: 15px;
  height: 40px;
  padding: 0;
}



#topbar .contact-info a {

  line-height: 0;
  color: #F2F2F2;
  transition: 0.3s;
}



#topbar .contact-info a:hover {

  color: #5cb874;

}



#topbar .contact-info i {

  color: #f8fcf9;

  line-height: 0;

  margin-right: 5px;

}



#topbar .contact-info .phone-icon {

  margin-left: 15px;

}



#topbar .social-links a {

  color: #F2F2F2;

  padding: 4px 12px;

  display: inline-block;

  line-height: 1px;

  transition: 0.3s;

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

}





.fafa {

  color: #F2F2F2;

  padding: 4px 12px;

  display: inline-block;

  line-height: 1px;

  transition: 0.3s;

}


#topbar .social-links a:hover {

  color: #5cb874;

}



/*--------------------------------------------------------------

# Header

--------------------------------------------------------------*/

#header {
  background: #fff;
  transition: all 0.5s;
  z-index: 997;
  height: 80px;
}



#header.header-scrolled {

  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);

}



#header .logo {

  font-size: 40px;

  margin: 0;

  padding: 0;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 1px;

  text-transform: uppercase;

}


#img{

  height: 70px;
}



#header .logo a {

  color: #5cb874;

}



.name{

  color: #5cb874;

  padding-left: 20px;

}



#header .logo img {

  max-height: 40px;

}



.scrolled-offset {

  margin-top: 70px;

}

 #number{

    font-size: 16px;

  }

  .links{
    background-color: #F1F3F5;
  }



  .social_media{
    position: relative;
    top:30px;
    left:20px;
  }



  .fa-2x {

    position: relative;

   }

  .fa:hover {

    opacity: 0.7;

    position: relative;

  }


  .fa-facebook-square {
    color: white;
    padding-right: 18px;
  }

  .fa-twitter-square {
    color:white;
    padding-right: 18px;

  }

  .fa-youtube-play{
    color: white;
    padding-right: 18px;
  }


  #address:hover

  {
      -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}


  #phone_number:hover

  {
      -webkit-transform: rotateZ(-30deg);
      -ms-transform: rotateZ(-30deg);
      transform: rotateZ(-30deg);
  }


  #e-mail:hover

  {
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
    -moz-transform: rotateZ(-30deg);
    -o-transform: rotateZ(-30deg);

}



  #first_seperate{

    position: absolute;
    height: 16%;
    bottom : -2450px;
    top : 2810px;
    left : 600px;

  }



  #underline{

    position: absolute;
    bottom : -2450px;
    top : 2990px;
    left : 400px;
    width : 40%;
    height: 0.2%;
  }



  #underline_two{

    position: absolute;
    bottom : -2450px;
    top : 3060px;
    width: 1518px;
    height: -2px;
    left: 20px;
  }



.connect{

    position: absolute;
    top : 1195px;
    left : 590px;
    font-size : 20px;
  }

  .connect a{
  color: white;
}
  #badge_underline{
    height: 20px;
 }

 .our_staff{
  color: #037979;
}

.down{
  top:300px;
  position: relative;
  right:190px;
  top:300px;
}

 .qr{
   position: relative;
   right: 200px;
   top:-10px;
 }

.phone_number, .e-mail{
 height: 70px;
 position: relative;
 top:-30px;
}

.phone_number{
 position: relative;
 right:70px;
}

.e-mail{
 position: relative;
 right: 70px;
}



.seperate{
 position: relative;
 right:50px;
 top:-10px;
 height: 130px;
}

.post{
 position: relative;
 top:50px;
 color: aliceblue;
 right: -350px;
}

#school-image:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
  }



  #library-image:hover
  {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  }

  #right-side{
  position: absolute;
  right: 0px;
  height: 148%;
  width: 41.9%;
  }


  #courses-image:hover
  {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  }



#teachers-image:hover

{
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
}

#certificate-image:hover

{
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
}

  #library-image{
    height: 150px;
  }

  #courses-image{
    height: 150px;
  }

  #teachers-image{
    height: 150px;
  }

  #certificate-image{
    height: 150px;
  }

  .address{
    height: 110px;
  }

p {

  font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 28px;
}




  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    color: grey;
   
  }

  .card h4{
    font-style: italic;
  }
  
  .title {
    color: #05968F;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
   
  }
    
  
  button:hover, a:hover {
    opacity: 0.7;
  }




    .dk-footer {
      padding: 75px 0 0;
      background-image:url("img/footer_badge.png");
      position: relative;
      z-index: 2; }
      .dk-footer .contact-us {
        margin-top: 0;
        margin-bottom: 30px;
        padding-left: 80px; }
        .dk-footer .contact-us .contact-info {
          margin-left: 50px; }
        .dk-footer .contact-us.contact-us-last {
          margin-top: 0;
          margin-bottom: 30px;
          padding-left: 80px; }
      .dk-footer .contact-icon i {
        font-size: 24px;
        top: -15px;
        position: relative;
        color:white; }
    .dk-footer-box-info {
      position: absolute;
      top: -122px;
      background: #06958f;
      padding: 45px;
      z-index: 2; }
      .dk-footer-box-info .footer-social-link h3 {
        color: #fff;
        font-size: 20px;
        margin-bottom: 25px; }
      .dk-footer-box-info .footer-social-link ul {
        list-style-type: none;
        padding: 0;
        margin: 0; }
      .dk-footer-box-info .footer-social-link li {
        display: inline-block; }
      .dk-footer-box-info .footer-social-link a i {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        background: #000;
        margin-right: 5px;
        color: #fff; }
        .dk-footer-box-info .footer-social-link a i.fa-facebook {
          background-color: #3B5998; }
        .dk-footer-box-info .footer-social-link a i.fa-twitter {
          background-color: #55ACEE; }
        .dk-footer-box-info .footer-social-link a i.fa-instagram {
          background-color: #B7242A; }


      .footer-info-text {
        margin: 26px 0 32px; }
      .footer-left-widget {
        padding-left: 80px; }    

      .footer-widget .section-heading {
        margin-bottom: 35px; }    

      .footer-widget h3 {
        font-size: 24px;
        color: #fff;
        position: relative;
        margin-bottom: 15px;
        max-width: -webkit-fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content; }

      .footer-widget ul {
        width: 50%;
        float: left;
        list-style: none;
        margin: 0;
        padding: 0; }
    
      .footer-widget li {
        margin-bottom: 18px; }
  
      .footer-widget p {
        margin-bottom: 27px; }

      .footer-widget a {
        color: white;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s; }
        .footer-widget a:hover {
          color:#000; }

      .footer-widget:after {
        content: "";
        display: block;
        clear: both; }

      .dk-footer-form {
        position: relative; }
        .dk-footer-form input[type=email] {
          padding: 14px 28px;
          border-radius: 50px;
          background: #2E2E2E;
          border: 1px solid #2E2E2E; }

        .dk-footer-form input::-webkit-input-placeholder, .dk-footer-form input::-moz-placeholder, .dk-footer-form input:-ms-input-placeholder, .dk-footer-form input::-ms-input-placeholder, .dk-footer-form input::-webkit-input-placeholder {

          color: #878787;

          font-size: 14px; }

        .dk-footer-form input::-webkit-input-placeholder, .dk-footer-form input::-moz-placeholder, .dk-footer-form input:-ms-input-placeholder, .dk-footer-form input::-ms-input-placeholder, .dk-footer-form input::placeholder {

          color: #878787;

          font-size: 14px; }

        .dk-footer-form button[type=submit] {
          position: absolute;
          top: 0;
          right: 0;
          padding: 12px 24px 12px 17px;
          border-top-right-radius: 25px;
          border-bottom-right-radius: 25px;
          border: 1px solid #007bff;
          background: #007bff;
          color: #fff; }

        .dk-footer-form button:hover {

          cursor: pointer; }


          
      .contact-us {
        position: relative;
        z-index: 2;
        margin-top: 65px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center; }

      .contact-icon {
        position: absolute; }
        .contact-icon i {
          font-size: 36px;
          top: -5px;
          position: relative;
          color: #007bff; }

      .contact-info {
        margin-left: 75px;
        color: #fff; }
        .contact-info h3 {
          font-size: 20px;
          color: #fff;
          margin-bottom: 0; }
  

      .copyright {
        padding: 6px 0;
        margin-top: 55px;
        background-color: #fff; }
        .copyright span,
        .copyright a {
          color: #000000;
          -webkit-transition: all 0.3s linear;
          -o-transition: all 0.3s linear;
          transition: all 0.3s linear; }
        .copyright a:hover {
          color:#007bff; }
    
      .copyright-menu ul {
        text-align: right;
        margin: 0; }
    
      .copyright-menu li {
        display: inline-block;
        padding-left: 20px; }

      .back-to-top {
        position: relative;
        z-index: 2; }

        .back-to-top .btn-dark {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          padding: 0;
          position: fixed;
          bottom: 20px;
          right: 20px;
          background: #2e2e2e;
          border-color: #2e2e2e;
          display: none;
          z-index: 999;
          -webkit-transition: all 0.3s linear;
          -o-transition: all 0.3s linear;
          transition: all 0.3s linear; }

          .back-to-top .btn-dark:hover {
            cursor: pointer;
            background: #06958f;
            border-color: #06958f; 
          } 

          @media (max-width: 1024px){
            .applynow{
              width : 10px;
              }
          }
      
          @media (max-width: 991px) {
            
            .img-fluid{
              height: 150px;
            
             
            }
            .connect-info{
              margin-top:180px;
            
          }


          @media only screen and (max-width: 768px) {
           .navbar{
              position: relative;        
            }
            .navbar a{

              font-size: 11px;
            }

               #img{
                 height: 50px;
                }              
                .loading-gif {
                  max-width: 300px;
                }
                
    
               
          }         

   @media only screen and (max-width: 600px){

    .loading-gif {
      max-width: 300px;
    }
  
    
  
  .img-fluid{
    height: 100px;
  }
    .nav-link{
      color:#06978f;
    }

    .nav-link:hover{
      color:#06978f;
    }
      .navbar {
        display: none;
        }       

      #img{
            height: 45px;
        }

        #head_badge{
          position: relative;
          top :7px;
          height: 30px;
        }


        #menu{
          font-size: 12px;
          height: 15px;
          position: relative;
          top: -28px;     
        }

        .profile{
          position: relative;
          left : -10px;
        }

          .apply_now {
            position: absolute;
            left: 130px;
          }

            .student_portal{
              position: absolute;
              left: 130px;
            }

            .staff_badge{
              position: relative; 
              top: -620px;
            }

            #badge_underline{
              position: relative; 
              top: -9px;
            } 

            .below1{ 
              height: 150px;
              position: relative;
              left: 0px;
            }

            .below2{ 
              height: 150px;
              position: relative;
              left: 180px;
            }

            .welcome{
              position: relative;
              text-align: center;
              left: 0px;
              font-size:17px;
            }      

            .staff  {
              position: relative;
    
            }
    
            #badge_underline{
              left:  120px;
            }

          
      .images-sm{
        margin-bottom: 30px;
      }

    .section-title h2 {
        font-size: 20px;
    }
    
    p{
      font-size: 15px;
    }


    .images-sm{
      margin-bottom: 2-px;
    }
            
      .footer-awarad {
        margin-top: 185px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center; }

        .dk-footer .contact-us {
          margin-top: 0;
          margin-bottom: 20px;
          padding-left: 5px; }
          .dk-footer .contact-us .contact-info {
            margin-left: 50px; }
          .dk-footer .contact-us.contact-us-last {
            margin-top: 0;
            margin-bottom: 20px;
            padding-left: 5px; }

        .dk-footer .contact-icon i {
          font-size: 15px;
          top: -15px;
          position: relative;
          color:white; }

      .copyright{
        font-size:10px;
      }

        .copyright a {

          font: optional;
          color: #000000;
          -webkit-transition: all 0.3s linear;
          -o-transition: all 0.3s linear;
          transition: all 0.3s linear; }

        .copyright a:hover {
          color:#007bff; }
          h4{
            font-size: 5px;
          }
        }
      }