@import url('https://fonts.googleapis.com/css2?family=Gajraj+One&family=Tilt+Warp&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;800&display=swap');

.site-footer {
  background: #f5f5f5;
  color: #000000;
  padding: 18px 0; }
  .site-footer a {
    font-size: 16px;
    color: #000000;
    position: relative;
    display: inline-block;
     }
.social a{
  font-size: 20px;

}
 
  .site-footer .btn:before {
    display: none; }
  .site-footer .widget {
    margin-bottom: 40px;
    display: block; }
    .site-footer .widget h3, .site-footer .widget .h3 {
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 15px;
      color: #2a7dd5; }
    .site-footer .widget .links {
      width: 150px; }
      .site-footer .widget .links li {
        margin-bottom: 10px; }
  .site-footer .social li {
    display: inline-block; }

   


  .site-footer b{
    color: #207ce5;
    font-size: medium;
    font-family: Magneto;
  }      
  @font-face {
    font-family: Magneto;
    src: url(main/fonts/MAGNETOB.TTF);
  }  

  .kl{
    margin-top: 75px;
  }
  a{
    text-decoration: none;
  }
  a:hover{
    text-decoration: none;
  }

  .social{
    word-spacing: 20px;
    font-size: 25px; 
  }

  .fa-facebook{
    color: #1c56d3;
  }

  .fa-twitter{
    color: #00acee;
  }

  
  .fa-linkedin{
    color: #8a3ab9;
  }
  
  
  .fa-youtube{
    color: #ff0000;
  }

  .fa-skype{
    color: #00aff0;
  }

.mos{
display: grid;
}

.moss:first-of-type{
  grid-column: 2 / span 4;
  grid-row: 3 / span 7;

}
.moss:last-of-type{
  grid-column: 2 / span 4;
  grid-row: 3 / span 7;

}

.hero-container p{
  text-align: justify;
}
.jhg p{
  margin-top: 100px;
  font-size: 20px;
  text-align: justify;
}
button{
  background: white;
  color: rgb(7 2 18);
  transition: all 200ms ease;
  border-left: 0 solid transparent;
  border: 1px solid #207ce5;
  width: 50%;
  float: left;
  height: 2.8rem;
  padding: 0 calc(7rem * 0.5);
  border-radius: 1rem;
  box-shadow: 0 0 2rem rgb(0 0 0 / 20%);
}
.ser i{
  color:  #919090;
  margin-top: 30px;
  width: 100%;
}

div .ser{
  padding-left: 30px;
}
.ser h4{
padding-top: 14px;}


.bp{
  width: 35%;
  margin-left: 200px;
  margin-top: -60px;
border-radius: 2rem;
}



.fa-dna{
  font-size: 300px;
  color: #207ce5;
  animation-duration: 3s;
}


.feature-block .fa-solid{
line-height: 2;
}

input {
  background: white;
  color: rgb(7 2 18);
  transition: all 200ms ease;
  border-left: 0 solid transparent;
  border: 1px solid #207ce5;
  width: 100%;
  height: 2.8rem;
  padding: 0 calc(7rem * 0.5);
  border-radius: 1rem;
  box-shadow: 0 0 2rem rgb(0 0 0 / 20%);
}
textarea {
  background: white;
  color: rgb(7 2 18);
  transition: all 200ms ease;
  border-left: 0 solid transparent;
  border: 1px solid #207ce5;
  width: 100%;
  height: 2.8rem;
  padding: 0 calc(7rem * 0.5);
  border-radius: calc(5.8rem * 0.3);
  box-shadow: 0 0 2rem rgb(0 0 0 / 20%);
}


.single_choose p{
  text-align: start;
}
.choose_left img{
  width: 80%;
}
.chf{
  font-size: 25px;
  text-align: justify;
  line-height: 55px;
}
.chf i{
  color: #5b5e9c;
}
.chf ul li{
list-style-type: none;
}
.list-type-02 li {
  position: relative;
  padding: 8px 0 8px 25px;
}

@font-face {
  font-family: Mango;
  src: url(main/fonts/Mango.otf);
}  




.contai {
  position: relative;
  width: 50%;
}

.imag {
  display: block;
  width: 100%;
  height: auto;
}

.overl {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  overflow: hidden;
  width: 0;
  height: 77%;
  transition: .5s ease;
  margin-bottom: 45px;
  border-radius: 10px 10px 0 0;

}

.contai:hover .overl {
  width: 100%;
}

.txt {
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  text-transform: uppercase;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: #2a7dd5;
    font-family: Mango;
    text-transform: capitalize;
}
.txt1 {
  color: #000000;
  font-size: 20px;
  position: absolute;
  top: 40%;
  left: 50%;
  text-transform: uppercase;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.txt2 {
  color: #000000;
  font-size: 20px;
  position: absolute;
  top: 70%;
  left: 50%;
  text-transform: uppercase;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.txt3 {
  color: #000000;
  font-size: 20px;
  position: absolute;
  top: 80%;
  left: 50%;
  text-transform: uppercase;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}




.flip {
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  max-width: 300px !important;
}

.flip-s {
  animation-name: flip-s;
}

@keyframes flip-s {
  0% { transform: perspective(400px) scaleX(1); }
  100% { transform: perspective(400px) scaleX(-1); }
}


.serv h1{
  text-align: center;
  color: #2a7dd5;
  letter-spacing: 20px;
  padding-top: 80px;
  padding-bottom: 50px;
  font-size: 50px;
font-family: 'Tilt Warp', cursive;
}

.serv h2{
  color:#8a3ab9;
  font-weight: bold;
  font-family: 'Source Code Pro', monospace;
}
.serv img{
  border-radius: 20px;
width: 100%;
}

.serv p{
text-align: justify;
}