*{
  font-family: 'Poppins', sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-size: 100%;
}
.responsive-img img{
  display: none;
}

.mb-2 a{
  font-size: .8vw;
}

.skill .row{
  margin-top: 7vw;
  /* margin-bottom: 3vw; */
  min-height: 90vh !important;
}

 
.footer-logo{

  transform: translateX(-10px);
  -webkit-transform: translateX(-10px);
  -moz-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  -o-transform: translateX(-10px);
}

.text-address{
  transform: translateY(20px) !important;
  -webkit-transform: translateY(20px) !important;
  -moz-transform: translateY(20px) !important;
  -ms-transform: translateY(20px) !important;
  -o-transform: translateY(20px) !important;
  font-weight: 400 !important;
}



.skill .row .col-lg-5 .skill-details{
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
}

.hero-content{
/* background-image: url(../images/vector-svg/ngs-background.svg); */
/* background-color: #0084FF; */
background:  url('../images/ngs/frame.png');
background-repeat: no-repeat;
background-size: cover;
background-position: 80%;
background-attachment: fixed;
  min-width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-toggler{
border: none !important;
}
.nav-colored .navbar-toggler{
  border: none !important;
}
.nav-colored .navbar-toggler-icon{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
.nav-link {
  display: inline-block;
  position: relative;
color: #000;
  font-size: 1vw;
}


.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(132.14deg, #0085FF 0%, #18D0FA 88.51%);
  transform-origin: bottom right;
  transition: transform 1.80s ease-out;
}
.nav-link:hover{
  background: linear-gradient(132.14deg, #F8953A 0%, #EF3C69 88.51%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.navbar{
  background-color: #fff !important;
  z-index: 1000;
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.navbar .active{
  color: #007bff;
  
}

.nav-link {
  color: #000;
  font-weight: 500;
  padding: 12px 52px;
  margin-right: 2em;
  font-family: 'Poppins', sans-serif;
  z-index: 100;

}
.nav-active {
  background-color:#fff;
  box-shadow: 5px -1px 12px -5px grey;
}
.nav-colored { background:#fff;
position: fixed !important;
width: 100%;
background-color: #fff;
z-index: 100 !important;
animation:navbar-up .7s alternate ease-in-out forwards;
transition: all .6s;}
@keyframes navbar-up {
  from{
    transform: translateY(-90px);
  }
  to{
    transform: translateY(0px);
  }
}
.nav-colored .nav-link { color: #fff !important;}
.nav-colored #active { color: #0084FF !important;}
.nav-transparent { background-color:#fff;}

.hero-content h2{
  position: absolute;
  color: #fff;
  font-size: 4vw;
  font-weight: 700;
  /* top: 290px; */
  bottom: 290px;
  left: 70px;
  animation: 3s anim-lineUp ease-out forwards;
}
@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
#gif{
  position: absolute;
  width: 800px;
}

@keyframes floating {
  0% { transform: translate(0,  0px);
   }
  50%  { transform: translate(0, 15px); }
  100%   { transform: translate(0, -0px); }   
}

body{
    background-color: #FBFBFA;
}

.first-content{
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-end;
align-items:flex-end;
}

#first-content{
 text-align:center;
    font-size: 2vw;
    font-weight: 800;
    margin-top: 4em;
 
}

#gif{
  margin-top: 5vw;
  width: 90%;
}
.fade {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
  opacity: 1;
}
/* next gen */
.next-container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
}

.next-gen-content{
  display: flex;
  align-items: flex-start;
  justify-content:flex-start ;
  flex-direction: column;
  flex-wrap: wrap;
 
  position: relative;
}
.next-col{
  transform: translateX(80px);
}

.next-gen-content h2{
  font-size: 3vw;
  font-weight: 700;
  min-height: 10vh;
  /* text-align: ; */
  float: left;

}

.next-gen-content p{
  font-size: 1vw;
  font-weight: 500;
  color: #6c6c6c;
  line-height: 1.8em;
  width: 95%;
  text-align: justify;
}
/* border */



/* model */
.model h4{
    text-align: center;
    font-weight: 900;
    line-height: 1.5em;
    font-size: 2vw;

}

.model-flex p{
    text-align: justify;
    margin-top: 3em;
    font-size: 1vw;
    color: #6c6c6c;
    font-weight: 100;
    text-align-last:left;
    line-height: 1.5em;
}
/* cards */
.tanlent-container{
  min-height: 100vh;
 
}
.tanlent-flex{
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 40vh;

}
.tanlent-container h2{
  text-align: center;
  font-size:3vw;
  font-weight: 700;
  min-height: 20vh;
}

.tanlent-card p {
  font-size: 1vw;
}
.tanlent-card p span{
  font-size: 1vw;
}


.tanlent-card .img{
  width: 200px;
  border: 2px solid #6c6c6c;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
  background: rgba( 255, 255, 255, 0.05 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
text-align: center;
color: #000;

}


.tanlent-card:hover .img{
  left: 150%;
  transform: translateY(-25%);
  background-position: 0 0, 0 0;
  
  -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.tanlent-card .img svg{
  width: 60px ;
  height: 60px;
}

.tanlent-container .img svg path{
  fill:#0ba6fd;
}


.tanlent-card .img img{
  width: 100px;
  height: 100px;
}


.card {
  border: 4px solid transparent;
  transform: skewX(-10deg);
  height: 300px;
  width: 350px;
 }
 
 .img-wrapper {
  position: relative;
 }
 

 .overlay-txt{
  min-height: 10vh;
font-size: 30px;
margin-bottom: 3em;
 }
 

#Contact{
    padding: 12px 62px;
    background: linear-gradient(90deg, rgba(11,166,253,1) 48%, rgba(24,206,249,1) 99%);
    border: 1px;
    color: #fff;
    border-radius: 0.3em;
    text-decoration: none;
    margin-top: 2em;


}
  /* footer */
 
/*staff model */
.staff-model{
    min-height: 80vh;
}
.staff-img{
    position: relative;
    top:7%;
    left: 10%;
}
h2#staff-title{
    /* width: 634px; */
margin-top: 60px;
/* transform: translateX(600px); */

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 3vw;
    line-height: 72px;
   
    text-align: right;
    transform: translateX(-55px);
    color: #333535;
}

.list{
    position: relative;
    top:10%;
text-align: right;
right: 8%;
  
}
.list ul li{
    list-style-type: none;
}

.list ul li p{
font-size: 1vw;
 text-align: right;
}
.empty-space{
    min-height: 10vh;
}
.first-content{
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.left-gen-skil{
display:flex ;

flex-direction: column;
}
.gen-img{
  display: block !important;
  width: 60% !important;
  /* padding: 60px !important; */
  margin-right: 2em !important;
}

.gen-img img{
  width: 110%;
}


.left-gen h2{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 3vw;
    line-height: 72px;
    /* identical to box height */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: justify;
    color: #000;
    min-height: 10vh;
    /* min-height: 15vh; */
}
.left-gen-para p{
    /* body text */

font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 1vw;
line-height: 24px;
display: flex;
align-items: center;
text-align: justify;
/* min-height: 10vh; */

/* body text */

color: #6C6C6C;
}
.button {
  position: relative;
  padding: 12px 82px;

  margin: 5px;
  border: 2px solid transparent;
  display: inline-block;
  font-size: 20px;
  border-radius: 10px;
  background: linear-gradient(to left, #fff 50%, #0085FF 25%,#18D0FA 25%) right;
  /* background: linear-gradient(132.14deg, #F8953A 0%, #EF3C69 88.51%); */
  background-size: 200%;
  transition: .5s ease-out;
  border: 0px;
  color: #000;
  font-weight: 500;
}

.button::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 2px; /* control the border thickness */
  background:linear-gradient(132.14deg, #0085FF 0%, #18D0FA 88.51%);
  /* background: linear-gradient(132.14deg, #F8953A 0%, #EF3C69 88.51%); */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.button:hover {
  text-decoration: none;
  background-position: left;
  color: #fff;
  border: none;
  text-decoration: none !important;
}

.skill{
    background-color: #f3f3f3;
    min-height: 100vh;
    margin-top:10%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.skill-details{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.skil-title h2{
    text-align: center;
    padding-top: 30px;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 3vw;
   
   
    
    color: #333535;
}
.skill-details p{

    margin-top:10%;
    /* body text */

font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 1vw;

display: flex;
align-items: center;
text-align: justify;

color: #000000;
   
}

.skill-details p#digi-school{
  margin-top: 0%;
}

.skill-details p#digi-schoo a{

}

.work-model{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.work-title{
    font-size: 48px;
    font-weight: 700;
    min-height: 10vh;
}
.work-title h2{
    margin-top: 2em;
    font-size: 3vw;
    font-weight: 700;
}

.work-model .row svg{
  width: 1000px;
}

  
.scrolled .top-bottom{
    animation: top-to-bottom 4.12s ease-in forwards;
  }

.scrolled path#one{
 animation: top-to-bottom 4.12s ease-in forwards;

transition: .8s all ease-in;
}


.scrolled path#two{
    animation: top-to-bottom 3.12s ease-in forwards;
   
   transition: .8s all ease-in;
   }


   .scrolled  path#three{
    animation: top-to-bottom 2.12s ease-in forwards;
   
   transition: .8s all ease-in;
   }


   .scrolled   path#four{
    animation: top-to-bottom 1.12s ease-in forwards;
   
   transition: .8s all ease-in;
   }

@keyframes top-to-bottom {
from{
    transform: translateY(-900px);
  }
  to{
    transform: translateY(0px);
  }
}


.js-scroll {
    opacity: 0;
    transition: opacity 500ms;
  }
  
  .js-scroll.scrolled {
    opacity: 1;
  }
  

  .scrolled .up-down{
    animation: up-dowm 16s ease-in-out both;
    transition: .6s ease-in-out;
  }

  @keyframes up-down {
    from{
        transform: translateY(-900px);
    }
    to{
        transform: translateY(0px);
    }
  }

  
.scrolled.slide-left {
    animation: slide-in-left 1s ease-in-out both;
  }
  .scrolled.slide-right {
    animation: slide-in-right 1s ease-in-out both;
  }
  .scrolled.fade-up {
    animation-delay:8s;
    animation: fade-in-up 1s ease-in-out both;
  }
  .scrolled.fade-up1 {
   
    animation: fade-in-up1 3s ease-in-out both;
  }
  @keyframes fade-in-up{
    0%{
      -webkit-transform: translateY(100px);
      transform: translateY(100px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes fade-in-up1{
    0%{
      animation-delay: 1.5s;
      -webkit-transform: translateY(100px);
      transform: translateY(100px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left{
    0%{
      -webkit-transform: translateX(100px);
      transform: translateX(100px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(-100px);
      transform: translateX(-100px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  #particles-js {
    position: absolute;
    width: 100%;
    height: 100vh;
  }
  
  
  /* .js-scroll {
    opacity: 0;
    transition: opacity 500ms;
  }
  
  .js-scroll.scrolled {
    opacity: 1;
  } */
  
  
  .scrolled path#parttern0{
    animation-delay:8s;
    animation: fade-in-up 1s ease-in-out both;
  }

  .image-wrapper {
    /* width: 600px; */
    /* height: 400px; */
    position: relative;
   
  }
  .responsive-img{
    display: none;
  }
  .image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left;
    width: 750px;
  height: 450px;
  }
  .image-1 {
    clip-path: polygon(0 0, 0 32%, 28% 0);
    transform: translate(-10px, -10px);
    transition: transform 300ms ease;
    transform-origin: top;
  }
  .image-wrapper:hover .image-1 {
    transform: translate(0, 0);
  }
  .image-2 {
    clip-path: polygon(28% 0, 0 32%, 0 100%, 17% 100%, 90% 0);
    transform: translate(-30px, 5px);
    transition: transform 300ms ease;
  }
  .image-wrapper:hover .image-2 {
    transform: translate(0, 0);
  }
  .image-3 {
    clip-path: polygon(100% 0, 100% 65%, 74% 100%, 17% 100%, 90% 0);
    transform: translate(-15px, -10px);
    transition: transform 300ms ease;
  }
  .image-wrapper:hover .image-3 {
    transform: translate(0, 0);
  }
  .image-4 {
    clip-path: polygon(100% 65%, 74% 100%, 100% 100%);
    transform: translate(-32px, 5px);
    transition: transform 300ms ease;
    transform-origin: top;
  }
  .image-wrapper:hover .image-4 {
    transform: translate(0, 0);
  }
  


  /* footer */
  footer{
    background-color: #333535;
  }
  .company{
    color: white;
    margin-top: 1em;
    font-size: 1.2vw;
  }
  .active{
    color:#0084FF;
  }
  .fa{
    padding: 10px;

    width: 40px;
    height:40px;
    font-size: 20px !important;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    background-color: #0085FF;
    color: #fff;
  }
  
  .fa:hover{
  background: linear-gradient(132.14deg, #F8953A 0%, #EF3C69 88.51%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  animation:footerIcon .6s ease-in-out alternate forwards;
  }
  @keyframes footerIcon {
  from{
    transform: rotate(180deg);
  }
  to{
    transform: rotate(0deg);
  }
  }
  .fa-facebook {
    background: #0085FF;
    color: white;
  }
  
  .fa-twitter {
    background: #fff;
    color: #0085FF;
    font-size: 20px;
  }
  
  .fa-linkedin {
    background: #0085FF;
    color: white;
  }
  
  .fa-instagram {
    background-color:#0085FF;
    color: white;
    
  
  }
  .py-2 .row .white{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .py-2 .row .white2{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  .py-2 .row .col-sm-12 a{
    font-size: .8vw;
    text-align: center;
    color: #fff !important;
    opacity: .7;
  }
  .py-2 .row .col-sm-12 a:hover{
    text-decoration: none;
    }
  
  .py-2{
    background-color: #282828;
  }
  
  .center{
    margin-bottom: 5em;
  }
  h3{
  color: black;
  }
  
  .cardName{
  line-height: 2.5em;
  }
  .mb-4{
  color: #fff;
  font-size: .8vw;
  /* font-weight: 200 !important; */
  }
  
  /* upper footer */
  
  .sub-footer{
  background: url('../images/footer/footer-3.png');
  /* background-color: #0084FF; */

  background-repeat: no-repeat;
  min-height: 20vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  }
  
  .sub-left h2{
  color: #fff !important;
  font-size: 2vw;
  font-weight: 500;
  }
  
  .cen{
  color: #D3EAFF;
  }
  
  .talk a {
  position: relative;
  padding: 12px 82px;
  
  margin: 5px;
  border: 2px solid #fff !important;
  display: inline-block;
  font-size: 20px;
  border-radius: 30px;
  transition: .5s ease-out;
  border: 30px;
  color: #fff;
  font-weight: 500;
  }
  
  .talk a::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 2px; /* control the border thickness */
  /* background:linear-gradient(132.14deg, #0085FF 0%, #18D0FA 88.51%); */
  background-color: inherit;
  /* background: linear-gradient(132.14deg, #F8953A 0%, #EF3C69 88.51%); */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  }
  .talk a:hover{
  text-decoration: none;
  background-position: left;
  color: #007bff;
  border: none;
  text-decoration: none !important;
  background-color: white;
  }
  .mb-2 a{
    color:#D3D3D3;
  text-decoration: none;
  }
  
  #star{
  color: orange;
  }
  
  .footer-logo p{
  font-size:1.5em;
  color: #fff !important;
  font-weight: 200;
  align-items: flex-start;
  transform: translateX(-5px) ;
  transform: translateY(7px);
  
  
  }
  .mb-2 .active{
    color: #007bff;
  }
  .mb-4{
    color:#D3D3D3;
    font-weight: 500;
    text-decoration: none;
  }
  
  /* .top-button{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  } */



.progressbar{
  margin: 2em;
  background: #2d3239;
  border-radius: 50%;
  position: relative;
  width: 14.2em;
  height: 14.2em;
  color: #fff;
  box-shadow: 0 0 1.5em rgba(0,0,0,0.6);
  
}
.circle {
  background: #282c30;
  border-radius: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 10.5em;
  height: 10.5em;
  box-shadow: 0 0 1.5em rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.circle canvas {
  vertical-align: top;
  width: 200px !important;
  margin-left:0%;
  margin-top: 38%;
  /* position: absolute; */
}
.three-circle canvas{
  vertical-align: top;
  width: 200px !important;
  margin-left:0%;
  margin-top: 37% !important;
}
.four-circle canvas{
  vertical-align: top;
  width: 200px !important;
  margin-left:0%;
  margin-top: 50% !important;
}


.circle strong {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%,-50%);
  text-align: center;
  line-height: 40px;
  font-size: 30px;
  color: #fff;
}

.circle strong i {
  font-style: normal;
  font-size: 2.6em;
  font-weight: normal;
}

.circle span {
  display: block;
  color: #0085FF;
  margin-top: 12px;
  /* font-size: 18px; */
  text-align: center;
}
.circular-progress{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  /* padding: 20px; */
  width: 100%;
}
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

/* responsive */
@media only screen and (min-width:300px) and (max-width: 600px) {
 html,body{
  overflow-x: hidden !important;
 }
 .nav-link{
  font-size: 3vw;
}
a{
  font-size:14px !important;
}
.py-2 .row .col-sm-12{
  display: flex;
  align-items: center;
  justify-content: center;
}

 p{
  font-size: 18px !important;
}
.mb-2 a{
  font-size: 12px !important;
}


.hero-content{
width: 100% !important;
  background-position: 90% !important;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
#sub-title{
  font-size: 30px !important;
  line-height: 1.5em !important;
}
#text{
  font-size: 40px;
    width: 350px;
    text-align: center;
    transform:translateX(-50px) !important;
}
.next-container{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.next-container .row{
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-right{
  display: flex;
  align-items: center;
  justify-content: center; 
  min-height: 40vh;
}
.slide-right img{
  width: 100%;
  max-width: 400px;
}
.next-col{
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  transform: translateX(0px) !important;
}
#svg-txt{
  display:flex;
  align-items:center !important;
  justify:center !important;
  margin-bottom: 5em !important;
}

.next-gen-content{
  display: flex;
  align-items: center;
  justify-content: center;
}
.next-gen-content h2{
  font-size: 24px;
  text-align: center;
}
.next-gen-content p{
 text-align: justify;
padding: 20px;
  font-size: 14px !important;
}
#svg-animation{
  display: flex;
  align-items: center;
  justify-content: center;
}

#svg-animation .row{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height:50vh;
}

.staff-img svg{
  width: 100%;
  max-width: 350px;
  transform: translateX(-30px) !important;
  min-height: 30vh;
}

.slide-left{
  width: 400px;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column;
}

.slide-left #staff-title{
  font-size: 26px !important;
  width: 300px;
  line-height: 1.5em;
  min-height:10vh !important;
}
.slide-left .list ul li p{
line-height:1em !important;
transform: translateX(30px);
font-size: 14px !important;
text-align:left !important;
}
img{
  /* width: 100%; */
  max-width: 350px;
}
.img-container{
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
}
.img-container .row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
}
.left-gen-skil{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
}
.left-gen h2{
  text-align: center;
  /* width: 300px; */
}
.left-gen-para{
  flex-direction: column;
  width: 300px;
}
.left-gen-para p{
  text-align: justify;
}

.gen-img{
  min-height: 60vh;
  width: 100%;
  max-width: 400px;
}
.image-wrapper{
  width: 100%;
  width: 350px;
  transform: translateX(-60px) !important;
}
.skill{
  margin: 0 !important;
}
.skill .row{
display: flex;
align-items: center;
justify-content: center;
min-height: 220vh;
}
.skill .row .col-sm-12{
  width: 100%;
  max-width: 400px;
}
.skil-title h2{
  width: 100%;
  max-width: 400px;
}
.skill-details p{
  text-align: justify !important;

}
span{
  text-align: center;
  font-size:18px !important;
}
span a{
  text-align: center;
}

svg{
  width: 100%;
  max-width: 400px;
}
.work-title h2{
  text-align: center;
  font-size: 24px;
}
.work-model{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.work-model>.row>.col-sm-12>svg{
  height: 60vh;
  width:370px;
}
.tanlent-container h2{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

}

.tanlent-container .row{
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}
.tanlent-flex{
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}
.tanlent-card {
  min-height: 35vh;
}
.tanlent-flex .col-sm-12{
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}
.sub-footer{
  background: url('../images/footer/footer-3.png');
  /* background-color: #0084FF; */
  background-repeat: no-repeat;
  min-height: 25vh;
  display: flex;
  background-size: cover;
align-items: center !important;
justify-content: center !important;
  }
  .sub-left h2{
    font-size: 20px !important;
    text-align: center;
    width: 300px;
    margin-top: 1em;
  }
  .talk a{
   font-size: 14px;
    pad: 12px 42px !important;
    margin-bottom: 1em;
  }
  .py-5 .row .col-sm-12{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .py-2 .container-fluid .row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .footer p{
    text-align: center;
  }
  .white p{
    font-size: 10px;
    text-align: center;
  }
  .white2 p{
    font-size: 10px !important;
    text-align: center;
  }
  .navbar-toggler{
    border: 2px solid #000 !important;
    /* background-color: #000 !important; */
    border-radius: 50% !important;
  }
  .company{
    font-size: 14px !important;
  }
  .list-unstyled{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .list-unstyled li a{
    text-align: center;
  }
  .gen-img {
    display: none !important;
  }
.gen-img .image-wrapper{
  display: none;
}
  
.py-2 .row .col-sm-12 p{
  font-size: 10px;
  text-align: center;
  color: #fff !important;
}
.responsive-img{
  display: block;
  width: 100%;
  max-width: 400px;
  height: 25vh;
}
}

.skill .row{
  margin-bottom: 5em;
}

@media screen and (min-width:600px) and (max-width:900px) {
  html,body{
    overflow-x: hidden;
  }
  p{
    font-size: 18px !important;
  }
  .mb-2 a{
    font-size: 16px
  }

  .company{
    font-size: 18px;
  }
  .hero-content{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-content h2{
    text-align: center;
    font-size: 70px;
    font-weight: 500;
  }

  .next-container .row{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    flex-direction: column-reverse;
  }
  .next-container .row .col-lg-6{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
  }
  .next-gen-content{
    margin-top: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10em;
  }
  #svg-animation .row{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .staff-img svg{
    width: 600px;
  }
 
  h2#staff-title{
    text-align: center;
    transform: translateX(70px) !important;
  }
  .list{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
  }
  .left-gen-skil{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
  }
  .left-gen h2{
    text-align: center;
  }
 .responsive-img{
  display: none;
 }
 .responsive-img img{
  display: none;
 }
 .left-gen{
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .gen-img{
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(20px);
 }
.skill .row{
  display: flex;
  align-items: center;
  justify-content: center;
}
.skill-details{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; 
}
.work-model .row .col-md-12 svg{
  width: 750px;
}
.tanlent-card{
  margin: 1em;
}
.sub-footer{
  background-size: cover;
}
.sub-left h2{text-align: center;}
.py-3 .col-md-12{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
}

@media screen and (min-width:900px) and (max-width:1200px) {
  html,body{
    overflow-x: hidden;
  }
  p{
    font-size: 18px !important;
  }
  .mb-2 a{
    font-size: 16px
  }

  .company{
    font-size: 18px;
  }
  .hero-content{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-content #text{
    text-align: center;
    font-size: 90px;
  }
  .next-container{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .next-container .row{
    display: flex;
    align-items: center;
    justify-content: center;
 
    flex-direction: column;
  }
  .next-container .row .col-md-12{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
  }
  .next-gen-content{
    width: 100%;
    display: flex;
  align-items: center;
justify-content: center;
}

.next-gen-content h2{
  margin-right: 5em !important;
}
.next-gen-content p{
  text-align: center;
  width: 80% !important;
  margin-right: 13em !important;
}

.slide-left{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  top: 0px;
  right: 0px;
  left: 0;
}

.slide-left #staff-title{
  text-align: center;
}

.list{
  display: flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  right: 0;
}
.list ul{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  top: 0;
  right: 0;
}
.list ul li{
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  top: 0;
  right: 0;
}
.list ul li p{
  text-align: center;
}

.img-container{
  display: flex;
  align-items: center;
  justify-content: center;
}
.left-gen-skil{
  display: flex;
  align-items: center;
  justify-content: center;
}
.left-gen{
  display: flex;
  align-items: center;
  justify-content: center;
}
.left-gen h2{
  text-align: center;
}
.left-gen-para p{
  text-align: center;
}
.left-gen-btn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.left-gen-btn a{ 
text-align: center;
}

.gen-img .image-wrapper{
 display: none;
}
.gen-img .image-wrapper img{
display: none;
}
.staff-img{
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}
#svg-animation .staff-model .col-md-12{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;  
}
#svg-animation .staff-model
{
  display: flex;
  align-items: center;
  justify-content: center;
}
.responsive-img{
  display: block;
  align-items: center;
  justify-content: center;
  min-height: 30vh;
}

.responsive-img img{
  display: block;
  width: 100%;
  width: 800px;
}

.skill-details{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.skill-details .skil-title{
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-details p{
  text-align: center;
}

.skill-details a{
  text-align: center;
}
.tanlent-flex{
  display: flex;
  align-items: center;
  justify-content: space-around !important;
}
.tanlent-card{
  margin: 1.5em;
}
svg{
  width: 100%;
  max-width: 1000px;
}

.sub-footer{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25vh;
  background-size: cover;
}

.sub-footer .sub-left {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-footer .sub-left h2{
  text-align: center;
}
.py-3 .col-md-12{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
}