@font-face {
  font-family: 'Humnst521';
  src: url(fonts/Hum521Lt.ttf);
}


@font-face {
  font-family: 'Humnst777';
  src: url(fonts/Hum777Rm.ttf);
}


@font-face {
  font-family: 'bahnschrift';
  src: url(fonts/BAHNSCHRIFT.TTF);
}

* {
    margin: 0px;
    padding: 0px;
    font-family: 'Humnst521';
    color:#333333 ;
}

.typewritterlayout{
 
  text-align: left;
}


.copyright{
  font-size: 20px;
}


.blinker:after {
  content: '_';
  display: inline-block;
  animation: blink 0.4s linear infinite;
  font-weight: bold;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.blink_me {
    animation: blinker 0.4s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.g-map{
  width: 400px;
  height: 400px;
}


.video-img{
  padding-top: 45px;
}


/*@supports ((background-clip: text) or (-webkit-background-clip: text)) and
  ((text-fill-color: transparent) or (-webkit-text-fill-color: transparent)) {
  .text-gradient {
    background-image: linear-gradient(90deg, #f79533 0%, #f37055 15%, #ef4e7b 30%, #a166ab 44%, #5073b8 58%, #1098ad 72%, #07b39b 86%, #6dba82 100%);
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
  }
}*/

.typewrittercolor{
    padding: 12px;
    font-size: 26px;
    border: none;

    background-image: linear-gradient(to right, #131d91 70% ,#00ff9c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
      -webkit-box-decoration-break: clone; 

      }

 

.read{
  color: #0e5da0;
  border: none;
  background-color: transparent;
  outline:none;  
  cursor: pointer;
  outline-style: none;
}


html{
  scroll-behavior: smooth;
}

.contact-img{
  height: 400px;
  width:400px ;
  
}


.stage {
  animation: animateBg 5s infinite linear;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(90deg, #131d91, #00ff9c,#131d91, #00ff9c);
  background-size: 300% 100%;  
  border-radius: 50%;
  height: 290px;
  width: 290px;
}


.custom-avatar{
  border-radius: 50%;
  width: 283px;
  height: auto;
  background-color: #e4fcff;
  padding: 7px;
  }

.container-1{
margin: 0;
padding-left: 200px;
padding-right: 200px;
}


@keyframes animateBg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}
.right-padding{
padding-right: 75px;
}

.grid-padding{
  padding-right: 10px;
}


.second-grid-padding{
  padding-right: 20px;
}

 .avatar-border {
  align-items: center;
  border-style: solid;
  border-width: 10px;
  padding: 10px;
  border-radius: 50px;
  border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
}


.circle-border{ 
width: 284px;
  height: 284px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: linear-gradient(to top, red 0%, blue 100%);
/*  animation: rotate-gradient linear 1s infinite;
*/} 

.circle-border:after{
    animation: rotate-gradient linear 1s infinite;

}

.gradient-button {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.gradient-button:after {
  content: '';
  display: block;
  z-index: -1;
  position: absolute;
  top: -2rem; right: 0; bottom: -2rem; left: 0;
  background-image: linear-gradient(red, yellow, green);
  animation: rotate-gradient linear 1s infinite;
}

@keyframes rotate-gradient {
  to { transform: rotate(360deg) }
}

.content {
    height: 100%;
    padding: 20px;
    color: #fff;
  }
 
 
/*  body{
  background: url("assets/webiste_background.svg")  no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
 }*/

 @supports (-webkit-touch-callout: none) {
   /* CSS specific to iOS devices */ 

body:after{
  content: "";
  position: fixed;
  top:0;
  height: 100%;
  left: 0;
  right: 0;
  z-index: -1;
    background: url("assets/webiste_background_2-01_final50op.svg") no-repeat center center scroll;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  
}

}

@supports not (-webkit-touch-callout: none) {
   /* CSS for other than iOS devices */ 
     body{
  background: url("assets/webiste_background_2-01_final50op.svg")  no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
 }
}

/*body:after{
  content: "";
  position: fixed;
  top:0;
  height: 100vh;
  left: 0;
  right: 0;
  z-index: -1;
    background: url("assets/webiste_background.svg") no-repeat center center scroll;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  
 }
*/

 .custom-logo{
  position: absolute; 
  top: 28px;
  height: 100px;
  padding-left: 100px;
  width: auto;
}

.margin-l{
  margin-left: 200px;
}
 .custom-text-logo{
  position: absolute; 
  top: 50px;
  height: 20px;
  padding-left: 210px;
  width: auto;
}


.para-content{
  font-size: 24px;
  /* font-family: 'bahnSchrift'; */
  font-weight: 100;
  border-left: 1px solid #666666;
 padding: 10px;
}

  .carousel-content{
    padding: 50px;
     height: 450px; 
    border: 1px solid transparent;
    border-image: linear-gradient(to right,  #131d91,#0e5da0,#00ff9c);
    border-image-slice: 1;
    background-color: white;
    
  }

  .team{
 font-size: 20px;
    /* font-family: 'bahnSchrift'; */
    font-weight: 100;
    border-left: 1px solid black;
   padding: 10px;
  }

.team_heading{
  padding: 0px;
  font-size:  36px;
  font-size: 'Humnst777';
  
}


#more {display: inline;}

#dots {display: none}

#myBtn {display: none}

.navbar-bottom-margin {
    margin-bottom: 0 !important;
}
.form-control{
    border-radius: 2rem !important;
}

.bg-custom-2 {
    /* background-image: linear-gradient(to right, #30d038 , #ce1cc5,indigo,violet); */
    background-image: linear-gradient(to right,  #131d91,#131d91, #0e5da0,#00ff9c);
    color: white;
    font-weight: 200;
    font-size: 16px;
}

.first-letter-nav-item{
  font-size: 20px;
  color:white;
}

.bg-custom-2 :hover{
  color: white;
}

.button {
    border-radius: 20px;
    margin: 6px 4px;
}

.nav-link:hover{
  color: rgba(255, 255, 255, 0.8);

}


.navbar-toggler{
  width: 47px;
height: 34px;
background-color: white;
}

.navbar-toggler .line{
  width: 100%;
  float: left;
  height: 2px;
  background-color: #fff;
  margin-bottom: 5px;
  }

.nav-link {
  color: white;
  font-size: 'bahnschrift';
}

.navbar-nav > .active > a {
    text-transform: uppercase;
    font-weight: 800;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 5%;
   color: white;
}

.gradient-color {
 border: none;
     background-image: linear-gradient(to right, #131d91 80% ,#00ff9c 100%);

/* background-image: linear-gradient( 90deg,#000079, #00ff9c );
*/ -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
       -webkit-box-decoration-break: clone; 
    font-size: 20px; 
}


.custom-container-contact{
  

    padding: 0px 20px;
}


.custom2-container {
    margin: 16px 0px !important;
    padding: 6px 4px;
    opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
}

.custom2-container:hover {
    opacity: .3;
}

.socialMedia-profile{
  font-size: 36px;

}

.team_name{
       background-image: linear-gradient(to right, #131d91 80% ,#00ff9c 100%);
/*  background-image: linear-gradient(to right, #131d91 0%, #00ff9c 25%);
*/	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; 
	font-size: 26px;
  font-weight: bold;
}

.custom-button{
  background: linear-gradient(to right, #1ecfa3 0%,rgb(121, 5, 115), #2b055a 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 26px !important;
  
}
.custom-carousel {
    background-color: blue !important;
    border: 6px solid orange !important;
}
.stack-img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
  }

#container-img {
    margin-top: 20px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(image/container_img.jpeg);
    padding: 50px 50px;
}




 .column-2{
 padding-left: 20px !important;
  padding-right: 50px !important;
} 






  .avatar{
    width: 300px;
    height: 300px;
  }
  .grid_reverse_row{
    display: grid;
    grid-template-columns: 300px auto ;
    grid-gap: 10px;
    align-items: center;
    justify-content: : center;
    /* padding-right: 20px; */

  }

  .grid{
    display: grid;
    grid-template-columns: 300px auto;
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
    direction: rtl;
    /* padding-right: 40px; */
  }

.custom-new-carousel{
  display: grid;
  grid-template-columns: auto 400px;
  grid-gap: 20px;
  padding: 20px !important;

}
.carousel-img{
  width: 350px;
  height: auto;
}
.carousel-portrait{
  width: 200px;
  height: auto;
}

  .carousel-indicators li {
    border-radius: 50% !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #404040;
}


.current-roles-heading{
  font-size: 50px;
  font-weight: 500;
}

.sub-heading-roles{
  font-size: 30px;
  font-weight: 500;
  color: #666666;
}

.paragraph-heading{
  padding: 8px;
  font-size: 30px;
  font-weight: 500;
  border-left: 1px solid black;
}

.current-role-grid{
  display: grid;
  grid-template-columns: auto 300px ;
  grid-gap: 90px;
}
.join-us-img{
  width:300px; 
  height:300px;
}

.product-img{
  width: 500px; 
  height: auto;
  text-align: center;
}

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

  .product-img{
  width: 400px; 
  height: auto;
  text-align: center;
}

  .video-img{
  padding-top: 30px;
}

}

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

  .video-img{
  padding-top: 30px;
}

.product-img{
  width: 400px; 
  height: auto;
  text-align: center;
}


  .custom-logo{
    position: absolute; 
    top: 45px;
    left: 10px;
    height: 65px;
    width: auto;
    padding-left: 0px;
  }
  .custom-text-logo{
    position: absolute; 
    top: 60px;
    left: 15px;
    height: 15px;
    padding-left:70px;
    width: auto;
  }

  .contact-img{
    height: 280px;
    width:280px ;
    
  }

}

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

.container-1{
margin: 0;
padding-left: 50px;
padding-right: 50px;
}


      .g-map{
    width: 240px;
    height: 240px;
    
  }

}


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

  
  .stage {
    animation: animateBg 5s infinite linear;
    display: flex;
    justify-content: center;
    align-items: center;
  /*  background-color: #fff;*/
    background-image: linear-gradient(90deg, #131d91, #00ff9c,#131d91, #00ff9c);
    background-size: 300% 100%;
  
  /*  box-shadow: 0 3px 14px #000;
  */  
  border-radius: 50%;
    height: 200px;
    width: 200px;
  }

  .custom-avatar{
    border-radius: 50%;
    width: 190px;
    height: auto;
    background-color: #e4fcff;
    padding: 6px;
    }

  .grid_reverse_row{
    display: grid;
    grid-template-columns: 150px auto ;
    grid-gap: 10px;
    /* flex-direction: row-reverse; */
    direction: rtl;
    align-items: center;
    justify-items: center;
    /* padding-right: 80px; */
  }

  .grid{
    display: grid;
    grid-template-columns: auto 150px;
    grid-gap: 10px;
    align-items: center;
    justify-items: center;
    /* padding-right: 80px; */
  }
  
  .current-role-grid{
    display: grid;
    grid-template-columns: 300px auto ;
    grid-gap: 10px;
    
  }
  .custom-carousel{
    display: grid;
    grid-template-columns: auto 300px ;
    grid-gap: 10px;
  
  }
/* .carousel-padding{
  padding-top: 50px !important;
  padding-bottom: 50px !important;
} */

  .avatar{
    width: 200px;
    height: 200px;
  }
  .carusel-container{
    width: 300px;
    height: 425px;
  }
  .carousel-img{
    width: 350px;
    height: auto;
    
  }

  .carousel-portrait{
    width: 200px;
    height: auto;
  }

  .custom-logo{
    position: absolute; 
    top: 45px;
    left: 10px;
    height: 65px;
    width: auto;
    padding-left: 0px;
  }
  .custom-text-logo{
    position: absolute; 
    top: 60px;
    left: 15px;
    height: 15px;
    padding-left:70px;
    width: auto;
  }
  
  .contact-img{
    height: 300px;
    width:300px ;
    
  }

}


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

        .g-map{
    width: 200px;
    height: 200px;
    
  }

.copyright{
  font-size: 18px;
}

  .video-img{
  padding-top: 25px;
}


  .socialMedia-profile{
    font-size: 28px;
  
  }

  .stage {
    animation: animateBg 5s infinite linear;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(90deg, #131d91, #00ff9c,#131d91, #00ff9c);
    background-size: 300% 100%;  
    border-radius: 50%;
    height: 150px;
    width: 150px;
  
  }

  .custom-avatar{
    border-radius: 50%;
    width: 145px;
    height: auto;
    background-color: #e4fcff;
    padding: 4px;
    
    }

    .grid_reverse_row{
      display: grid;
      grid-template-columns: 150px auto ;
      grid-gap: 10px;
      /* flex-direction: row-reverse; */
      direction: rtl;
      align-items: center;
      justify-items: center;
      /* padding-right: 80px; */
    }
  
    .grid{
      display: grid;
      grid-template-columns: 150px auto;
      grid-gap: 10px;
      align-items: center;
      justify-items: center;
      direction: rtl
      /* padding-right: 80px; */
    }  

    .right-padding{
      padding-right: 35px;
      }

  .para-content{
    font-size: 22px;
    /* font-family: 'bahnSchrift'; */
    font-weight: 100;
    border-left: 1px solid #666666;
   padding: 15px;
  }
  
.container-1{
margin: 0;
padding-left: 20px;
padding-right: 20px;
}


  .fluid-container{
    margin-top: 0px;
    
  }
  /* .column-1{
    padding-left: 10px !important;
     padding-top: 30px !important;
  } */

    .column-2{
    padding-left: 0px !important;
     padding-right: 0px !important;
   }  

   

  .custom-logo{
    position: absolute; 
    top: 20px;
    height: 65px;
    width: auto;
    padding-left: 0px;
  }

  .custom-text-logo{
  position: absolute; 
  top: 25px;
  height: 15px;
  padding-left:70px;
  width: auto;
}


   .team{
    border-left: 2px solid black;
    /* padding-right: 40px; */
    font-size: 18px;
   
  }
  .team_name{
     font-size: 22px;
    
  }

  .carusel-container{
    width: 300px;
    height: 425px;
  }

.carousel-content{
  padding: 20px;
  height: 250px;
}

  .carousel-img{
    width: 220px;
    height: auto;
    
  }

  .carousel-portrait{
    width: 100px;
    height: auto;
  }

  .custom-new-carousel{
    display: grid;
    grid-template-columns: auto ;
    grid-gap: 10px;
    padding: 10px !important;
  
  }
  .product-img{
    width: 300px;
    height:auto;
    text-align: center;
  }

  .contact-img{
    height: 200px;
    width:200px ;
    
  }
  .margin-logo-text{
    /* top: 28px;
    height: 100px;
    padding-left: 100px; */
    position: absolute; 
    left: 100px;
    height:50px; 
    width:auto; 
  }

  .typewrittercolor{
    padding: 12px;
    font-size: 24px;    
 margin-left: -10px;
}

.team_heading{
  padding: 0px;
  font-size:  36px;
}
.join-us-img{
  width:180px; 
  height:180px;
}


}

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


  .join-us-img{
  width:150px; 
  height:150px;
}

  .container-1{
margin-right: 0;
padding-left: 15px;
padding-right: 15px;
}


    .typewrittercolor{
    font-size: 24px;    
}

    .g-map{
    width: 300px;
    height: 300px;
    
  }

.copyright{
  font-size: 16px;
}

#more {display: none;}

#dots {display: inline;}

#myBtn {display: inline;}

   .carousel-content{
    height: 250px;
    padding: 10px;
   } 
  .carousel-img{
    display: none;
  }

  .video-img{
  padding-top: 15px;
}


  .carousel-portrait{
    display: none;
  }

  .carusel-container{
    display: none;
  }
  .socialMedia-profile{
    font-size: 24px;
  
  }
  .team{
   
    font-size: 18px;
   
  }

  .product-img{
    width: 240px;
    height:auto;
    text-align: center;
/*    margin-left: 20px;
    margin-right: -20px;*/
  }

}

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

          .g-map{
    width: 250px;
    height: 250px;
    
  }

  .stage {
    animation: animateBg 5s infinite linear;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(90deg, #131d91, #00ff9c,#131d91, #00ff9c);
    background-size: 300% 100%;  
    border-radius: 50%;
    height: 100px;
    width: 100px;
  
  }

  .custom-avatar{
    border-radius: 50%;
    width: 95px;
    height: auto;
    background-color: #e4fcff;
    padding: 5px;
    
    }


    .team{
      border-left: 2px solid black;
      padding-right: 40px;
      font-size: 16px;
     
    }


    .grid_reverse_row{
      display: grid;
      grid-template-columns: 100px auto ;
      grid-gap: 10px;
      /* flex-direction: row-reverse; */
      direction: rtl;
      align-items: center;
      justify-items: center;
      /* padding-right: 80px; */
    }
  
    .grid{
      display: grid;
      grid-template-columns: auto 100px;
      grid-gap: 10px;
      align-items: center;
      justify-items: center;
      /* padding-right: 80px; */
    }  

    .product-img{
      width: 200px; 
      height:auto;
      text-align: center;
    }

    .right-padding{
      padding-right: 0px;
      }
}