*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}  
.info>h2{
  color: #23c1ff   ;
}
.cha>p{
font-size: 100%;
text-align: center;
}
.jaanu>h2{
color: #23c1ff;
}

#nav{
background-color:black ; 
color: white;
height: 40px;
font-size: 18px;

overflow: hidden;
}
#nav1>a{
  color: white;
}
.z>h1{
  color: white;
}

.col-1{
  margin-left: 25px;
}
#nav1>a:hover{
border: 2px solid #23c1ff;
color: white;
height: 50px;
width: 40px;
border-style: groove;
box-shadow: 0 0 10px #23c1ff,0 0 0px #23c1ff;
border-width: 2px;
border-radius: 10px;
font-size: 20px;
width: 8vw;
transform: scale(1.1);
}
#nav1>a{
    color: white;
    text-decoration: none;
}
#nav2>a{
color: #23c1ff;
padding-top: 20px;
padding-top: 20px;
font-size: 25px;
padding-left: 10px;
}
#nav{
  padding-top: 10px;
}
.img{
    display: flex;
    justify-content: space-between;
    background-color: black;
    color: white;
    overflow: hidden;
}
.info{
padding-top: 160px;
padding-left: 50px;
}
.my>img{
  margin-top: 60px;
  margin-right:55px ;
  overflow: hidden ;
  width: 40vw; 
  height: 70vh;
}
 @keyframes left {
  from{
    transform:translateX(-300px);
  }
to{
transform:translateX(0);    
} 
}  
.info{
 animation-name: left; 
 animation-duration:1s ; 
 animation-timing-function:ease-in; 
 animation-delay: 0s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-fill-mode: none;
}
@keyframes slide-up{
  from{
    transform:translatey(-300px);
  }
to{
transform:translatey(0);    
} 
}
.info>h4{
color: #23c1ff;
}

.my>img{
  animation-name: slide-up; 
 animation-duration:1s ; 
 animation-timing-function:ease-in; 
 animation-delay: 0s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-fill-mode: none; 
}
.my>img:hover{
  transform: scale(1.1);
}
.career{
margin-top: 200px;
text-align: center;
display: flex;
justify-content: space-between;
margin-top: 50px;
overflow: hidden; 
}
.career>h1{
 padding-top: 20px; 
}
.career>p{
 padding-bottom: 30px;
}
.us{
background-color:black;
color: white;
border-radius: 10px;
width: 49vw;
margin-top: 50px;
}
.poor{
  color: white;
}
.us>h2{
 color:  #23c1ff ; 
 padding-top: 20px;
}
.us>h5{
  color:  #23c1ff;
}
.uss>p{
margin-top: 5px;
color: white;
}
.us>p{
  margin-top: 5px;
  color: #23c1ff;
  }
.uss{
  background-color: black;
  color: white;
  border-radius: 10px;
  width: 49vw;
  margin-top: 50px;
}
.body{
  background-color: black;
}
.uss>h2{
  margin-top: 30px;
}
 .bha1{
  border-radius: 10px;
  font-size: 14px;
  width: 8vw;
  height: 5vh;
  margin-top: 30px;
  background-color: white;
  color: #23c1ff;
 }
 .bha1:hover{
   border-radius: 10px;
   font-size: 14px;
   width: 8vw;
   height: 5vh;
   background-color:#23c1ff;
   color: white;
   transform: scale(1.1);
  }
  .bha6{
    border-radius: 10px;
    font-size: 15px;
    width:12vw;
    height: 5vh;
    margin-top: 30px;
    background-color: white;
    color: #23c1ff;
    text-decoration: none;
   }
   .bha6:hover{
     border-radius: 10px;
     font-size: 15px;
     width: 12vw;
     height: 5vh;
     background-color:#23c1ff;
     color: white;
     transform: scale(1.1);
     text-decoration: none;
    }
    .bha6>a{
      color: #23c1ff;
      text-decoration: none;
    }
    .bha6>a:hover{
      color: white;
      text-decoration: none;
    }
  .para{
    color: white;
    text-align: center;
    margin-top: 200px;
  }
  .our{
  display: flex;  
  justify-content: space-evenly;
  margin-top: 90px;
  overflow: hidden; 
  }
  .web{
    background-color: black;
    width: 32vw;
    border-radius: 10px;
    text-align: center;
    border: 1px solid white;
border-radius: 5px; 
  }
  .web>h1{
    color: white;
  }
  .web>h3{
    color:   #23c1ff;
  }
   .web>h3:hover{
    color: white;
    border-radius: 100px;
    background-color: black
  }
  .web>p{
color: white;
  }
.ma{
  margin-top: 10px;
  border-radius: 10px;
  width: 10vw;
}
.icon{
 color:  #23c1ff;
}
.icon:hover{
  color: white;
 }
.ma:hover{
  margin-top: 10px;
  border-radius: 10px;
  background-color:  #23c1ff;
  color: white;
}
.box>input{
  width: 45vw;
  height: 10vh;
  text-align: left;
  padding-bottom: 40px;
}
.box2>input{
  padding-bottom: 90px;
  width: 45vw;
  height: 20vh;
} 
.chai{
  margin-top: 70px;
  text-align: center;
  margin-top: 5%;
  color: white;
} 
.work{
  color: white;
  margin-top: 5%;
}
.design{
  display: flex;
  justify-content: space-evenly;
  overflow: hidden; 
}
.flow{
  width: 13%;
  height: 100;
}
.flow:hover{
transform: scale(1.9);
}
.design1{
  display: flex;
  justify-content: space-evenly;
  margin-top: 10%;
  overflow: hidden; 
}
.flow1{
  width: 13%;
  height: 100;
}
.flow1:hover{
transform: scale(1.8);
}
.usha>h2{
  color: white;
  margin-top: 10%;
}
.aboutpage>h1{
color: white;
text-align: center;
padding-top: 10%;
}
.sum{
  color: white;
  display: flex;
  justify-content: space-around;
  margin-top: 3%;
  overflow: hidden; 
}
.details{
  color: #23c1ff;
  margin-top: 5%;
} 
.details>i{
  color:white;
}  
.port{
  text-align: center;
  margin-top: 20%;
  color: white;
} 
.tech{
  display: flex;
  justify-content:space-around;
  margin-top: 5%;
  overflow: hidden; 
}
.mahi>img{
  width: 100px;
  height: 100%;
}
.mahi2>img{
width: 100px;
height: 100%;
}
.mahi3>img{
  width: 100px;
  height: 100%;
}
.mahi4>img{
  width: 100px;
  height: 100%;
}
.mahi>a{
  text-align: center;
  color: white;
}
.mahi2{
  text-align: center;
  color: white;
}
.mahi3{
  text-align: center;
  color: white;
}
.mahi4{
  text-align: center;
  color: white;
}
.links{
  display: flex;
  justify-content: space-around;
  overflow: hidden;
}
.CodingWorks{
color: #23c1ff;
margin-top: 3%;
text-align: center;
}
.CodingWorks1{
  color: #23c1ff;
  margin-top: 10%;
  text-align: center;
  }
  .image2{
display: flex;
justify-content: space-around;
margin-top: 10%;
overflow: hidden; 
 }
 .image3>h1{
color: white;
padding-right: 100%;
 }
 .image4>img{
  width: 100%;
  height: 100%;
 }
 .image5{
color: white;
 }
 .image5>h1{
  color: #23c1ff;
  padding-top: 20%;
   }
   .image5>h6{
    padding-top: 5%;
   }
.dad{
color: white;
  text-align: center;
  margin-top: 5%;
}
.santhi{
  display: flex;
  justify-content: space-evenly;
  overflow: hidden; 
}
.prudhvi2{
  display: flex;
  justify-content: space-evenly;
  margin-top: 5%;
  overflow: hidden; 
}
.figma9{
  width: 12%;
  height: 24vh;

}
.figma1{
  width: 10%;
  height: 10%;
}
.figma2{
  width: 10%;
  height: 20%;
}
.figma3{
  width: 10%;
  height: 100px;
}
.figma4{
  width: 10%;
  height: 100px;
}
.prudhvi3{
  display: flex;
  justify-content: space-evenly;
  margin-top: 5%;
  overflow: hidden; 
}
.figma5{
  width: 10%;
  height: 110px;
}
.figma6{
  width: 10%;
  height: 120px;
}

 .con{
color: #23c1ff;
text-align: center;
 padding-top: 10%;
 }
.pri1{
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  margin-top: 5%;
  overflow: hidden;
color: white;
}
.abc{
margin-top: 5%;
background-color:white;
}
.gayi{
  width: 20vw;
  height: 40vh;
}
.gayi2{
  width: 15vw;
  height: 40vh;
}
.gayi3{
  width: 20vw;
  height: 40vh;
  background-color: white;
}
.gayi4{
  width: 20vw;
  height: 40vh;
  background-color: white;
}
.gayi6{
width: 15vw; 
height: 40vh;
}
.name1{
display: flex;
justify-content: space-evenly;
overflow: hidden;
text-align: center;
}
.name2{
  display: flex;
  justify-content: space-evenly;
  overflow: hidden;
  text-align: center;
}
.cha>h3{
  color: #23c1ff;
}
.grid{
  display: flex;
  justify-content: space-around;
  margin-top: 10%;
}
.hara{
  margin-top: 5%;
  color: white;
  text-align: center;
  color: #23c1ff;
}
.para{
  display: flex;
  justify-content:space-around;
}
.para>img{
  width: 25%;
  height: 30%;
}
.ma2{
  display: flex;
  justify-content: space-around;
}