@font-face {
    font-family: GadugiNormal;
    src: url("/static/fonts/gadugi-normal.ttf") /* EOT file for IE */
}
#hero {
    height: 70vh;
}

.card img {
    height: 300px   ;
}

.card {
    background-color: #575757;
    
}
.card-text {
    color: white;
}

#contact {
    margin-top: 100px;
}

body, html {
    width: 100vw;
    overflow-x: hidden !important;
    font-family: 'GadugiNormal';
}

.hero-overlay-1 {
    background-color: rgb(221, 233, 241);
    height: 20vh;
    width: 40vw;
    left: 0px;
    top: 0vh;
    z-index: -1;
    border-bottom-right-radius: 50%;
    animation: moveFromLeft 2s forwards;
}

.hero-overlay-2 {
    background-color: rgb(212, 233, 247);
    height: 35vh;
    width: 40vw;
    right: 0px;
    top: 40vh;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 20px;
    z-index: -1;
    animation: moveFromBottomRight 2s forwards;
}

@media only screen and (max-width: 600px) {
  .hero-overlay-1 {
    height: 15vh;
  }
  .hero-overlay-2 {
    height: 10vh;
    width: 60vw
  }
  #hero {
    height:40vh
  }
  #hero .container {
    margin-top: 100px;
  }
  .py-5 {
    padding-top: 20px !important;
    padding-bottom: 20px !important
  }
}


@keyframes moveFromLeft {
    0% {
      transform: translate(-100%, -50%);
    }
  
    100% {
      transform: translate(0%, 20%);
    }
  }
  
  @keyframes moveFromBottomRight {
    0% {
      transform: translate(100%, 100%);
    }
  
    100% {
      transform: translate(-0%, -0%);
    }
  }

.navbar, footer, .bg-main{
    background-color: rgb(1, 76, 82);
    color: white;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(94, 133, 94);;
    border-radius: 3px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  .text-justify {
    text-align: justify;
  }

  .about-us-point {
    transform: translate(0%, 100%);
    transition: transform 2s;
  }
  .about-us-point.animate {
    animation: moveUp 1s forwards;
  }

  .about-us-1 {
    background-color: rgb(231, 235, 245);
  }
  .about-us-2 {
    background-color: rgb(241, 241, 241);
  }
 
  @keyframes moveUp {
    0% {
        opacity: 0.5;
        transform: translate(0%, 100%);
    }
  
    100% {
      opacity: 1;
      transform: translate(-0%, -0%);
    }
  }
  

  .sector-card {
    border-radius: 10px;
    box-shadow: 0px 3px 20px 2px lightgrey;
    padding: 0px;
    height: 100%;
    min-height: 200px;
    font-size: 20px;
  }

  .sector-card img {
    max-width: 20%;
    height: 25px;
    object-fit: cover;
    opacity: 0.7;
    transition: all 1s;
    background-color: white;
  }
  
  .sector-card img.animate {
    animation: ease-out 1s forwards;
    height: 250px;
    max-width: 100%;
    opacity: 0.8;
  }
  
  .sector-card:hover {
    transition: all .3s;
    box-shadow: 0px 3px 50px 2px lightgrey;
    font-size: 26px;
    background-color: rgb(231, 235, 245);
    
  }

  .team-card {
    padding: 25px;
    border-radius: 5px;
    text-align: justify;
    height: 0px;
    animation: ease-in;
    transition: all .3s;
    background-color: rgb(246, 248, 255);
    overflow: hidden;
    border-radius: 10%;
    opacity: 0.3;
  }

  .team-card.animate {
    height: 100%;
    opacity: 1;
    border-radius: 0px;
    animation: ease-in;
  }
  

  .profile-picture {
    margin-right: 20px;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    box-shadow: 0px 3px 20px 2px rgb(180, 180, 180);
    overflow: hidden;

  }

  .navbar {
    z-index: 5;
    position: fixed;
  }