*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-family: 'Lato', sans-serif;
    
}


.hamburger div {
    background-color: darkgreen;
}

html  {
     scroll-behavior: smooth;
}

/* selection code whatever we select the select textcolor will be white and selection will be green */

::-moz-selection { /* Code for Firefox */
    color: white;
    background: green;
  }
  
  ::selection {
    color: white;
    background: green;
  }

body {

     /* background-color: #f9fcff; 
    background-image: linear-gradient(147deg, #f9fcff 0%, #dee4ea 74%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;  */
    overflow: hidden;
    scroll-behavior: smooth;
      
}




nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    color: white;
    z-index: 999;
    flex-wrap: nowrap;
    position: fixed;
    width: 100%;
    transition: all 0.5s ease-in-out ;
    background-color: white;
    box-shadow: 0 0 10px lightgrey;


    
}








.logo img {
    height: 50px;
    width: 250px;
    margin-left:50px;
  
}



nav  ul {
    
    display: flex;
    flex-wrap: nowrap;



}

ul {
    border: none;
}



nav li {
    list-style: none;
    margin-right: 40px;
    border: none;
    
}

a {
    text-decoration: none;
    padding: 10px;
    padding: 10px 0 0 0 ;
    color: green;
    font-size:14px;
    font-weight: lighter;
    outline: none;
   

}



/* Index.html css ======================================================================== */


.png {
      width: 100px;
      height: 100px;
      padding: 0 0 0 5px;
}

.image1 {
    position: relative;
    text-align: center;
    z-index: 9999;
  
}
.image2 {
    position: relative;
    text-align: center;
    z-index: 9999;
  
}
.image3 {
    position: relative;
    text-align: center;
    z-index: 9999;
  
}
.Archi  {
      font-size: 60px;
       width: auto;
                  position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
      background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);

-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.archi {
                      position: absolute;
                      top: 70%;
                      font-size: 30px;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
      color: white;
      

}

.expl {
  position: absolute;
      top: 85%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
      height: 30px;
      width: 60%;
      background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
      border: none;
      border-radius: 5px;
      color: white;
  font-size: 14px;

      cursor: pointer;
}
.conta{
  color: white;
  font-size: 14px;

  position: absolute;
      top: 85%;
      left: 58%;
      transform: translate(-50%, -50%);
      z-index: 999;
      height: 30px;
      width: 200px;
      background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
      border: none;
      border-radius: 5px;
      cursor: pointer;
}

img {
    max-width: 100%;
   width: 100%;
   height: 500px;
  
   
}



.carousel {
    width: 100%;
    height: 500px;
    overflow: hidden;
  }
  
.slide{
 
  width: 100%;
  height: 500px;
  filter: brightness(80%);
  overflow: hidden;

}

.box{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;             
}


.Gen {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
 flex-direction: column;
    

}
#gen {
     position: relative;
    
}


.gengenh1{
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);          
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
     /* filter: drop-shadow(0 10px 2px green); */
}


.Genh1 {
  font-size: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 80%;
  background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);          
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.Genh22{
  font-size: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 90%;
  background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.GenBtn {
  
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  border-radius: 5px;
  border: none;
  width: 80%;
  margin-top: 5%;
  background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);  
  color:white ;
  font-weight: bold   ;
}





.carrd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}


.cards {
display: grid;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
width: 100%;
/* margin: 2% 0 0 0;
padding: 0 0 0 1.5%; */
grid-row-gap:20px;
grid-template-columns: 1fr 1fr 1fr ;
overflow-x: hidden;

}

.card{
width: 400px;
height: 400px;
margin: 1% 0 1% 2%;

display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
box-shadow: 0 0 10px lightgray;
border-radius: 10px;
overflow: hidden;
}
/* animation */
/*.card:nth-child(even){
    opacity: 1;
transform: translateX(2000px);
transition:  1s all  ease-in-out;
overflow: hidden;
}

.card:nth-child(odd){
    opacity: 1;
transform: translateX(-2000px);
transition:  0.5s all  ease-in-out;
overflow: hidden;
}

.cardremove {
    transform: translateX(0);
}*/
/* animatiion */
.card h4 {
    margin: -20px 0 0 0 ;
}
.gb {
background-color: #166704;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border-radius: 10px;
width: 380px;
margin: 0 0 8% 0 ; 
}

.grid-container{
margin:20px 0 0 32px ; 
height: 100%;
width: 95%;
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 1fr 1fr ;

grid-row-gap: 20px;
border-radius: 10px;

}



.information {
padding: 70px;
font-size: 20px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items:center;
height: 500px;
margin:  0 0 4px 0 ;
color: green;
font-size: 20px;
box-shadow:  0 0 10px lightgray;
border-radius: 0 10px 10px 0 ;
}

.information i {
font-size: 50px;
padding-bottom: 10px;
background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.information h3 {
margin-bottom: 15px;
margin-bottom: 15px;
background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.imgBtn {
display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 300px;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  margin-top: 10%;
  background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);  
  color:white ;

}

.imgg img{
border-radius: 10px 0 0 10px ;
 
}

.infotwo{
border-radius: 10px 0 0 10px ;


}
.wired{
border-radius: 0 10px 10px 0 !important; 
}

.infoone {
    transform: translateY(500px);
   
    opacity: 0;
}

.infoto{
    transform: translateY(500px);
   
    opacity: 0;
}

.imgone{
    transform: translateY(800px);
    transition:  1s all  ease-in-out;
    opacity: 0;
}

.imgtwo{
    transform: translateY(800px);
    transition:  1s all  ease-in-out;
    opacity: 0;
}

.imgthree{
    transform: translateY(1000px);
    transition:  2s all  ease-in-out;
    opacity: 0;
}

.infothree{
    transform: translateY(800px);
    transition:  1s all  ease-in-out;
    opacity: 0;
}

.sdione , .sdimone , .waninfo , .wanimg , .redinfo , .redimg , .vminfo , .vmimg 
, .nfsinfo , .nfsimg{
    transform: translateY(300px);
    transition:  1s all  ease-in-out;
    opacity: 0;
}


.cone , .ctwo , .cthree{
    
    transition:  2s all  ease-in-out;
    opacity: 0;

}

.cfour , .cfive , .csix {

    transition:  1s all  ease-in-out;
    opacity: 0;

}


.weani , .ms {
    transform: rotate(360deg);
    transition:  1s all  ease-in-out;
    opacity: 0;
}

.acc1 , .acc2 , .acc3 , .accon{
    transform: translateX(-1500px);
    transition:  1s all  ease-in-out;
    opacity: 0;
}

.slidein{
    transform: translateX(0);
    transition:  1s all  ease-in-out;
    opacity: 1;

}


.slidein1{
    transform: translateX(0);
    transition:  1.2s all  ease-in-out;
    opacity: 1;

}


.slidein2{
    transform: translateX(0);
    transition:  1.4s all  ease-in-out;
    opacity: 1;

}

.slidein3{
    transform: translateX(0);
    transition:  1.6s all  ease-in-out;
    opacity: 1;

}

.three60{
    transform: rotate(0);
   
    transition:  1s all  ease-in-out;
    opacity: 1;
}


.flip{
    transform: translateY(0);
    transition:  1s all  ease-in-out;
    opacity: 1;     
}











.sdwancont {
display: grid;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
box-shadow: 0 0 10px lightgrey;
grid-template-columns: 1fr 1fr;
margin:20px 0 0 0; 


}

.sdwan {
margin: 0 0 50px 0 ;
font-size: 40px;
background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;


}
.sdinfo {

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
padding: 40px;
height: 500px;
color: #166704;
box-shadow: 0 0 10px lightgray;

}
.sdimg {
 width: 100%;
 /* grid-column: 2/4; */
   box-shadow: 0 0 10px lightgray;
}
 





    



/* Index.html css ======================================================================== */



/*-------------------------------------------- caruousel -----------------------------------------------------*/


/* 
.carousel {

   display: flex;
   width: 100%;
   height: 100%;
 
 

} */



/* 
 .carousel img  {
    display: flex;
    margin-top: 12vh; */
    /* height: 400px;
    width: 1404px; */
    /* height: 400px;
    width: 1400px;
    image-rendering: pixelated;
    filter: brightness(50%); */
    /*transform: transition 2s,  ease-in;
    transition: opacity 1s, ease-in ;*/
     

/* } */













/*----------------------------------------------------- font awesome ------------------------------------------*/


.font-awesome {
   
   font-size: 20px;
   position: relative;
   opacity: 0.5;
   cursor: pointer;
   




}

.fa-chevron-right{
    position: absolute;
    right: 0%;
    overflow-x: hidden;
    bottom: 210px;
    color: white;
    margin: 0 50px 0 0 ;

    
    


}

.fa-chevron-left {
    position: absolute;
    bottom:210px;
    color: white;
    padding: 0 0 0 50px ;

}

.fa-chevron-left:hover {
        transform: scale(1.50);
        transition: 0.4s ease-in; 

} 


.fa-chevron-right:hover {
    
      transform: scale(1.50);
      transition: 0.4s ease-in-out;
      overflow-x: hidden;
}




.circle1 {
    position: absolute;

    right: 48%;

    bottom: 25px;
    color: white;
    font-size: 12px;
    
    
}
.circle2 {

    position: absolute;
     font-size: 12px;
     color: white;
    right: 50%;
    bottom: 25px;
    
    
}


.circle3{
         position: absolute;
         bottom: 25px;
         right: 52%;
         font-size: 12px;
         color: white;
}

.dots i:hover {
    background: white;
    border-radius:50%;

}



/* Solution.html css =================================================================================== */




 .lgone , .lgtwo {
    transform: translateX(-20px);
    transition: 0.2s all ease-in-out;
     opacity: 0;
 }

 .aone  {
    transform: translateX(-20px);
    transition: 0.2s all ease-in-out;
     opacity: 0;
 }

 .atwo{
      transform: translateY(10px);
      opacity: 0;
      transition: 1s all ease-in-out;
 }
     /* Lines */
 .lone, .ltwo , .cloudline , .webline , .dataline , .vline , .nline{
    padding: 0 0 0 0 ;
    transition: 0.5s all ease-in-out;
    opacity: 0;
    
}

/* for cards */
.mainone , .cybercard1 , .cybercard2 , .cybercimg1 , .cybercimg2 , 
.remotecard1 , .remotecard2 , .remotecimg1 , .remotecimg2 
 , .cloudcimg1 , .cloudcimg2 , .cloudcard1 , .cloudcard2, .webcard1 , .webcard2 , .webcimg1 , .webcimg2 
 , .datacard1 , .datacard2 , .datacimg1 , .datacimg2 , .vcard1 , .vcard2 , .vl , .vcimg1 , .vcimg2
 , .ncard1 , .ncard2 , .ncimg1 , .ncimg2{
      opacity: 0;
       transform: translateY(20px);
       transition: 0.2s all ease-in-out;
}
.maintwo{
    
        opacity: 1;
         transform: translateY(0);
         transition: 1s all ease-in-out;

}

.fa-cloud {

    /* transform: translateX(-20px) !important;
    transition: 0.2s all ease-in-out !important;
     opacity: 0 !important; */

}

.lgani2{
    opacity: 1 !important;
    transition: 1s all ease-in-out !important;
    transform: translateX(0) !important;   
}
  /* for main sec  logo link  */
.cyberh1 , .cyberimg , .remoteimg1 , .remoteh1 , .cloudh1 , .cloudimg1 
 , .cloudlogo , .cloudl , .weblogo , .webl , .webh1 , .webimg1,
 .datalogo , .datal , .datah1, .dataimg1 , .vlogo , .vh1 , .vimg , .nlogo, .nl, .nh1 , .nimg {
    opacity: 0;
    transform: translateX(-20px);
    transition: 0.2s all ease-in-out;
}

.left{
    opacity: 1;
    transition: 1s all ease-in-out;
    transform: translateX(0);
}

.spread{
    padding: 0 0 650px 0 ;
    transition: 2s all ease-in-out;
    opacity: 1;
}



 .lgani {
    opacity: 1;
    transition: 1s all ease-in-out;
    transform: translateX(0);
 }



.Gen {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100%;
    width: 100%;
   flex-direction: column;
    
    
}
.gin{
    transform: translateY(100px);
    opacity: 0;    
}
.genremove {
    transform: translateX(0);
    transition:  1s all  ease-in-out;
    opacity: 1;
    
}




.Genh1 {
    font-size: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin-top: 15vh;
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);          
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.Genh2{
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.Genh3{
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.GenBtn {
    
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 5px;
    border: none;
    width: 80%;
    margin-top: 5%;
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);  
    color:white ;
    font-weight: bold   ;
}
.line{
display: flex;
justify-content: center;
align-items: center;
flex-direction:row;
margin: 5% 0 0 0 ;
position: relative;

}
.hl {
width: 5px;
height: 2px;
background-color: green;
margin: 2px 0 0 2px ;

}



.linev{

display: flex;
justify-content: center;
align-items: center;
flex-direction:row;
margin: 0 0 2% 0 ;
position: absolute;

}
.v {
width: 5px;
height: 2px;
background-color: green;
margin: 2px 0 0 2px ;
}
.linec{
display: flex;
justify-content: center;
align-items: center;
flex-direction:row;
margin: 6% 0 0 0 ;
position: absolute;
}

.c {
width: 5px;
height: 2px;
background-color: green;
margin: 2px 0 0 2px ;
}
.lined{
display: flex;
justify-content: center;
align-items: center;
flex-direction:row;
margin: 13% 0 0 0 ;
position: absolute;
}

.d{
width: 5px;
height: 2px;
background-color: green;
margin: 2px 0 0 2px ;
}

.vv {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 10% 0 0 8% ;
position: absolute;
}
.vvv {
width: 4px;
height: 5px;
background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);  
/* padding: 0 0 650px 0 ; */

}
.favicon {
width: 100%;
height: 100%;
background-color: coral;
display: grid;
justify-content: start;
align-items: start;
}


.companylogo{
width: 100px ;
height: 100px;
image-rendering: pixelated;

position: absolute;
margin: 7% 0 0 7.2%;

}
.Cs{
width: 50% ;
height: 100px;
color: #166704;
position: absolute;
margin: 7% 0 0 12%;
font-weight: 100;

}

.details {
 width: 80%;
 height: 100%;
 display: flex;
 justify-content: flex-start;
 align-items: center;
 margin: 12% 0 0 12% ;
 
}

.eh3 {
width: 100%;
height: 100%;
font-size: 35px;
background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    overflow-x:hidden;
    
    
}




.siem {
width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;

}
.siemimage {
 width: 85%;
 height: 400px;
 /* margin: 5% 0 0 15% ; */
 margin: 5% 0 0 9% ;
 image-rendering: pixelated;
 /* border-radius: 10px 10px 10px 10px; */

}
.ipsids{

margin:10% 0 0 2.5% ; 
height: 100%;
width: 95%;
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 1fr 1fr ;
grid-row-gap: 20px;
border-radius: 10px;
}

.ipdidsinformation {
padding: 70px;
font-size: 20px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items:center;
height: 310px;
margin:  0 0 4px 0 ;
color: green;
font-size: 20px;
box-shadow:  0 0 10px lightgray;
border-radius: 10px 0 0 10px ;
}
.ipsimgg {
border-radius: 0 10px 10px 0;
/* height:100%;
width: 100%; */

height: 310px;
width: 100%;

}


.fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }



@media screen and (max-width:2000px){
               
.cards {
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
    margin: 2% 1% 0 0;
    padding: 0  2% 0  10%;
    grid-row-gap:20px;
    grid-template-columns: 1fr 1fr 1fr ;
    overflow-x: hidden;
    
    }

}

 
@media screen and (max-width:1500px){
       body{
         
       }


       
.cards {
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
    margin: 2% 1% 0 0;
    padding: 0  2% 0  5%;
    grid-row-gap:20px;
    grid-template-columns: 1fr 1fr 1fr ;
    overflow-x: hidden;
    
    }

    .card {
           width:400px ;
           height: 400px;
    }
    .gb {
        background-color: #166704;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 320px;
        border-radius: 10px;
        width: 340px;
        margin: 0 0 8% 0 ; 
        }
    
}



@media screen and (max-width:1366px) {
    .cards {
        display: grid;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
        width: 100%;
        margin: 2% 1% 0 0;
        padding: 0  2% 0  4%;
        grid-row-gap:20px;
        grid-template-columns: 1fr 1fr 1fr ;
        overflow-x: hidden;
        
        }
}



@media screen and (min-width:1281px) {
        body{
            
        }
        .line {
            display: none;
        }
        .linev{
            display: none;   
        }
        .linec {
            display: none;
        }   
        .lined{
            display: none;
        }
}

@media screen and (max-width:1280px){
      .cards {
           padding: 0 0 0 1%;
      }
}


@media screen and (max-width:1240px){
    body {
       
    }
    .line {
        display: none;
    }
    .linev{
        display: none;   
    }
    .linec {
        display: none;
    }
    .lined{
        display: none;
    }

}










/* Solution.html css =================================================================================== */


/* Aboutus.html css ===================================================================================== */


.mission {
    display: flex;
    justify-content: center;
    align-items: center ;
    flex-direction: column;
    color: green;
    height: 100%;
    width: 90%;
    margin : 2% 0 0 5%;
    box-shadow: 0 0 10px lightgrey;
    height: 400px;
    border-radius: 10px;


}
.msms {
    font-size: 80px;
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);          
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

}

.we {
    
    font-size: 80px;
         width: auto;
                    position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
    
        background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);

-webkit-background-clip: text;
background-clip: text;
color: transparent;

}


.whoarewe  {

display: flex;
    justify-content: center;
    align-items: center ;
    flex-direction: column  ;
    width: 90%;
    margin: 1% 2% 2% 5%  ;
    height: 400px; 
    color: green;
   border-radius: 10px;
  box-shadow: 0 0 10px lightgrey;



}

.teamc {
font-size: 80px;
background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.teamcinfo {

font-size: 20px !important;
}



.accconatiner {
 display: flex;
 justify-content: center;
 align-items: center;  
 flex-direction: column;
 width: 80%;
 height: 100%;
 margin: 2% 0 2% 10%  ;
 background-color: white;
 box-shadow: 0 0 10px lightgray;
 
}

.accordian{
width: 100%;
height: 50px;
border: none;
background-color: white;
text-align: left;
margin: 0 0 0 0;
padding: 10px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 10px lightgrey;
color: green;

}

.font {
font-size: 12px;
}
.panel {
 padding: 10px;
 display: none;
 color: green;
}

.active, .accordion:hover {
 background-color: #ccc; 
}

.teamfixed {
background-image: url(./img/img/team-3738261_1280.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 600px;
}

textarea{
    resize: none;
}



/* Aboutus.html css ===================================================================================== */


/* Contact us html css = === = = = =  ================ = = =  =  ======================================== */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


.cntus {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
   box-shadow:  0 0 10px lightgray;
   
   
}
   
   .usus{
       font-size: 80px;
       background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent; 
       margin: 10% 0 0 10% ; 
   
}



.form-conatiner {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 190%;  



}

#gen{
     position: absolute;
     width: 100%;
     height: 100%;
    
}

#particle {
    
      position: absolute;
      width: 100%;
      height: 100%; 
}

.form-card {
width:  400px;
height: 550px;
box-shadow: 10px 10px 50px lightgray;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
margin: 20px 0 0 0 ;
background-color: white;
z-index: 1;




}





input {
/* margin: 0 0 20px 0 ;  */
width: 100%;
height: 30px;
padding: 4px;

}
label {
margin: 10px 0 0 0 ;
color: green;
}

.formbtn{
background-color: green;
outline: none;
width: 308px;
height: 30px;
border: none;
color: white;


}




label {
display: grid;
justify-content: flex-start;
margin: 0 0 0 0;

}


.emailh2{
margin: 0 0 35px 0 ;
display: flex;
justify-content: center;
align-items: center;
text-decoration: underline;
background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

small {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 0 0 20px 0 ;
visibility: hidden;

}

.form-control.error input {
border: 2px solid red;




}

.form-control.error small{
visibility: visible;
} 


.form-control.success input{
border: 2px solid green;

}

.textarea {
width: 100%;
height: 100px;
padding: 4px;
}

.iframe  {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0 0 0 ;
}

.icont {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.people {
background-image: url(./img/img/connect2.jpg.png);
width: 100%;
height: 500px;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;

}











/* Contact us html css = === = = = =  ================ = = =  =  ======================================== */











/* Footer Section ====================================================================================== */
footer{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr ;
    box-shadow:  0 0 10px lightgray;
    margin:2% 0 0 0 ; 
    
}


.footerdiv {
   
    grid-column: 1/3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    transition: 0.2s all ease-in;
    color: green ;

}
.footerdiv , i {
    display: flex;
     color: green;
     margin: 0 5px 0 5px;
     font-size: 24px ;
}
  .icon:hover {
     
    transform: scale(1.50);
    transition: 0.2s all ease-in;


}


.sec1{
  
    display: grid;
    justify-content: center;
    align-items: center;
    color: green;
    
}
.sec1 a  {
    
    font-weight: bold;
    
}
.sec2 {
  
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 30px 0 30px 0 ;
   
   
}

.sec2 a {
    font-weight: bold;
}


.servicer , li {
     margin: 0 0 14px 0 ;
     list-style-type:none ;
     color:green;
}
.servicer, a {
     text-decoration: none;
     font-size: bold;
     
}
.sec4{
  
   grid-column: 1/3;
   display: flex;
    justify-content: center;
    align-items: center;
    color:green;
    margin: 10px 0 0 0 ; 
    padding:10px 0 10px 0;
    background-color:lightgrey;
    font-weight: bold;
}

/* Footer Section================================================================================= */


/* Preloader Animation */


.precontainer{ 
     display:flex;
    justify-content: center;
    align-items:center ;
    height: 100vh;
    
     
}

.ring{
    width: 250px;
    height:250px;
    border-radius: 50%;
    border:0px solid black;
    position:absolute;
} 

.ring:nth-child(1){
     border-bottom-width: 8px;
     /* border-color: rgb(7, 48, 253); */
     border-color: green;
     animation:animate 2s linear infinite;
}
@keyframes animate{
       from{
            transform:rotateX(30deg) rotateY(-45deg) rotateZ(0deg);
           }
       to{
          transform:rotateX(30deg ) rotateY(-45deg) rotateZ(360deg); 
         }    
          }
 
.ring:nth-child(2){
     
        /* border-right: 8px solid rgba(9, 209, 244, 0.979); */
        border-right: 8px solid green;
        animation:animes 2s linear infinite;
   }
   @keyframes animes {
       from{transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg);
           }
       to{
           transform:rotateX(50deg ) rotateY(10deg) rotateZ(360deg); 
       }    
       }

       .ring:nth-child(3){
     
        /* border-left: 8px solid rgba(242, 127, 101, 0.979); */
         border-left: 8px solid green;
        animation:animess 2s linear infinite;
   }
   @keyframes animess {
       from{transform:rotateX(35deg) rotateY(55deg) rotate(0);
           }
       to{
           transform:rotateX(35deg ) rotateY(55deg) rotatez(360deg); 
       }    
       }
       /* .ring:nth-child(4){
       
            border: 2px solid green;
       }
       h1{
        color: rgba(15, 243, 117, 0.998);
       } */




/* Preloader Animation */







/* Media Queries */

/* @media (min-width:384px) and (max-width:1229px){
    body {
        background-color: red;
        overflow-x: hidden;
    }
    img {
         width: 100%;
         overflow-x: hidden;
         height: 500px;
    }
    .carousel {
         overflow-x: hidden;
    }
} */


@media screen and  (max-width:1246px){
    body{
       
    }
    .card{
       width: 350px;
       height: 400px;
       margin:  0 5% 0 0 ;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       box-shadow: 0 0 10px lightgray;
       border-radius: 10px;

   }

   

       .gb {
           background-color: #166704;
           display: flex;
           justify-content: center;
           align-items: center;
           height: 300px;
           border-radius: 10px;
           width: 320px;
           margin: 0 0 8% 0 ; 
           }


}

@media  screen and (max-width:1100px){
   body {
       
   }


   .card{
       width: 300px;
       height: 400px;
       margin: 1% auto;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       box-shadow: 0 0 10px lightgray;
       border-radius: 10px;

   }

   

       .gb {
           background-color: #166704;
           display: flex;
           justify-content: center;
           align-items: center;
           height: 300px;
           border-radius: 10px;
           width: 280px;
           margin: 0 0 8% 0 ; 
           }

           .grid-container{
               margin:20px 0 0 28px ; 
               height: 100%;
               width: 95%;
               display: grid;
               justify-content: center;
               align-items: center;
               grid-template-columns: 1fr 1fr ;
               
               grid-row-gap: 20px;
               border-radius: 10px;
        }

}




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


   .card{
       width: 300px;
       height: 400px;
       margin: 1% auto;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       box-shadow: 0 0 10px lightgray;
       border-radius: 10px;

   }

   .cards{
             grid-template-columns: 1fr 1fr ;
   }

   

       .gb {
           background-color: #166704;
           display: flex;
           justify-content: center;
           align-items: center;
           height: 300px;
           border-radius: 10px;
           width: 280px;
           margin: 0 0 8% 0 ; 
           }

           .grid-container{
               margin:20px 0 0 28px ; 
               height: 100%;
               width: 95%;
               display: grid;
               justify-content: center;
               align-items: center;
               grid-template-columns: 1fr 1fr ;
               
               grid-row-gap: 20px;
               border-radius: 10px;
        }


        /* Solution html css  */

        .gengenh1 {
            font-size: 60px;
            padding:  0 30px;
        }

        .gengenh2 {
            font-size: 40px;
    
        }

        .gengenh3 {
            font-size: 40px;
       
        }

        .companylogo{
            width: 100px ;
            height: 100px;
            image-rendering: pixelated;
            
            position: absolute;
            margin: 7% 0 0 7.2%;
            
            }






            .vv {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                margin: 12% 0 0 8.5% ;
                position: absolute;
                }

        .vvv {
            
                width: 4px;
                height: 5px;
                background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);  
                padding: 0 0 650px 0 ;
                
        }



} 




@media  screen and (max-width:950px){
   body {
        
   }


   .card{
       width: 400px;
       height: 400px;
       margin: 1% auto;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       box-shadow: 0 0 10px lightgray;
       border-radius: 10px;

   }

   .cards{
         grid-template-columns: 1fr 1fr ;
   }

   

       .gb {
           background-color: #166704;
           display: flex;
           justify-content: center;
           align-items: center;
           height: 300px;
           border-radius: 10px;
           width: 360px;
           margin: 0 0 8% 0 ; 
           }

           .grid-container{
               margin:20px 0 0 21px ; 
               height: 100%;
               width: 95%;
               display: grid;
               justify-content: center;
               align-items: center;
               grid-template-columns: 1fr 1fr ;
               
               grid-row-gap: 20px;
               border-radius: 10px;
        }

} 


@media  screen and (max-width:899px) {
   .grid-container{
       margin:20px 0 0 200px ; 
       height: 100%;
       width: 50%;
       display: grid;
       justify-content: center;
       align-items: center;
       grid-template-columns: 1fr 1fr ;
       
       grid-row-gap: 20px;
       border-radius: 10px;
   }














}



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




 


  
   .card{
       width: 380px;
       height: 400px;
       margin: 1% auto;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       box-shadow: 0 0 10px lightgray;
       border-radius: 10px;

   }

   .cards{
         grid-template-columns: 1fr 1fr ;
   }

   

       .gb {
           background-color: #166704;
           display: flex;
           justify-content: center;
           align-items: center;
           height: 300px;
           border-radius: 10px;
           width: 320px;
           margin: 0 0 8% 0 ; 
           }
  
  
  
   .grid-container{
       margin:20px 0 0 200px ; 
       height: 100%;
       width: 50%;
       display: grid;
       justify-content: center;
       align-items: center;
       grid-template-columns: 1fr 1fr ;
       
       grid-row-gap: 20px;
       border-radius: 10px;
   }

   .gengenh1 {
    font-size: 60px;
    padding:  0 30px;
}

.gengenh2 {
    font-size: 35px;

}

.gengenh3 {
    font-size: 35px;

}
}


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

   .card{
       width: 320px;
       height: 400px;
       margin: 1% auto;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       box-shadow: 0 0 10px lightgray;
       border-radius: 10px;

   }

   .cards{
         grid-template-columns: 1fr 1fr ;
   }

   

       .gb {
           background-color: #166704;
           display: flex;
           justify-content: center;
           align-items: center;
           height: 300px;
           border-radius: 10px;
           width: 260px;
           margin: 0 0 8% 0 ; 
           }
  
   


   .grid-container{
       margin:20px 0 0 200px ; 
       height: 100%;
       width: 50%;
       display: grid;
       justify-content: center;
       align-items: center;
       grid-template-columns: 1fr  ;
       
       grid-row-gap: 20px;
       border-radius: 10px;
   }

  .information {
      border-radius: 10px;
      width: 600px;
  }

  .imgg img{
   border-radius: 10px 10px 10px 10px;
}

  .wired {
      border-radius: 10px 10px 10px 10px !important;
  }

   .grid-container div:nth-child(3){
       
          order: 4;
   }
   .grid-container div:nth-child(4){
     
       order: 3;
 }
     
 

   .sdwancont {
       display: grid;
       justify-content: center;
       align-items: center;
       height: 100%;
       width: 100%;
       grid-template-columns: 1fr;
       box-shadow: 0 0 10px lightgrey;
       margin:20px 0 0 0; 
       
       }
   
       .sdwancont div:first-child {
           order: 2;
       }
       .sdwancont div:nth-child(2) {
        order: 1;
    }
    .sdwancont div:nth-child(3) {
        order: 4;
    }
    .sdwancont div:nth-child(4) {
        order: 3;
    }
    .sdwancont div:nth-child(6) {
        order: 5;
    }
    .sdwancont div:nth-child(5) {
        order: 6;
    }
    .sdwancont div:nth-child(8) {
        order: 7;
    }
    .sdwancont div:nth-child(7) {
        order: 8;
    }
       

       


     
    
       
   
       .sdimg {
           width: 100%;
   
          }



   .sec1 {
       padding: 0 0 0 100px;
   }
   

   .gengenh1 {
    font-size: 60px;
    padding:  0 30px;
}

.gengenh2 {
    font-size: 30px;

}

.gengenh3 {
    font-size: 30px;

}


       
       
}



   





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



    .logo {
        
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        
    }

    .logo img  {
        height: 50px;
        width: 250px;
        image-rendering: pixelated;
    }


  





    /* Hambuger Menu Media qureies */


    .burger1 {
        margin-bottom: 4px;
          
       
}

  .burger2 {
        margin-bottom: 2px;

}
.burger3 {
        margin-top: 4px;
        
}
  
    
    
    .hamburger div {
        width: 25px;
         height:2px;
         background-color: green;
    
         cursor: pointer;
         transition: all 0.3s ease;
         /* margin-left : 100px; */

        
    
          
        
    }
    
    .hamburger {
        margin: 0 20px 0 0;
    }
    
    nav li {
        list-style: none;
        margin: 0 0 0 0 ;
        border: none;
        
    }
    
    nav a {
        text-decoration: none;
        /* padding: 10px; 
        padding: 10px 0 0 0 ; */
        margin: 20px 0 0 0 !important;
        background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        /* color: green; */
        font-size:20px;
        outline: none;
        font-weight: bold;
       
    
    }


   

    .nav-links {
        position: absolute;
        /* changed 8vh to 9vh because of dislocation */
        top: 13vh;
        right: 0px;
        height: 50vh;
          display: flex;
        flex-direction: column;
         text-align: center;
        align-items: center;
        background-color: white;
        width: 100%;
        justify-content: space-evenly;
        /* padding-left: 50px; */
        padding: 0 0 0 0 ;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
        z-index: 9999;
        
     }

   



    .nav-links li {
       opacity: 0;
    }


    .nav-active {

        transform: translateX(0%);
       
       
   
     }
   
   
    @keyframes navLinkFade {
           from{
              
             transform: translateX(50px);
              opacity: 0;
   
           }
           to {
                    opacity: 1;
                    transform: translateX(0px);
   
           }
    }
   
   .toggle .burger1 {
   
            transform: rotate(-45deg) translate(-5px ,4px);
           
   }
   
   .toggle .burger2 {
   
        opacity: 0;
       
   
    
           
   }
   .toggle .burger3 {
   
           transform: rotate(45deg) translate(-5px ,-3px);
   }
         
   
   
     .toggle  .hamburger {
   
          transform: rotate(360deg);
     }













    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Hambuger Menu Media qureies */




   .card{
       width: 600px;
       height: 500px;
       margin: 1% auto;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       box-shadow: 0 0 10px lightgray;
       border-radius: 10px;

   }

   .cards{
         grid-template-columns: 1fr  ;
   }

   

       .gb {
           background-color: #166704;
           display: flex;
           justify-content: center;
           align-items: center;
           height: 400px;
           border-radius: 10px;
           width: 560px;
           margin: 0 0 8% 0 ; 
           }


           
   .grid-container{
       margin:3% auto ; 
       height: 100%;
       width: 50%;
       display: grid;
       justify-content: center;
       align-items: center;
       grid-template-columns: 1fr  ;
       
       grid-row-gap: 20px;
       border-radius: 10px;
   }


   /* solutions html media queires */

    .ipsids {
        

            margin:10% 0 0 2.5% ; 
            height: 100%;
            width: 95%;
            display: grid;
            justify-content: center;
            align-items: center;
            grid-template-columns: 1fr  ;
            grid-row-gap: 20px;
            border-radius: 10px;
            
    }
  
    .ipsids div:first-child {
          order: 2;
    }


    
    .vv {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 12% 0 0 8.5% ;
        position: absolute;
        }

.vvv {
    
        width: 4px;
        height: 5px;
        background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);  
        padding: 0 0 650px 0 ;
        
}

.details {
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 14% 0 0 14% ;
    
   }


   .eh3 {
    width: 100%;
    height: 100%;
    font-size: 30px;
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        overflow-x:hidden;
        
        
    }


   .Cs{
width: 50% ;
height: 100px;
color: #166704;
position: absolute;
margin: 7% 0 0 14%;
font-weight: 100;

} 



.link44 {
    /* padding: 10px; */
    padding: 10px 20px;
    background-color: green;
    color: white;
    border-radius: 20px ;

}




}


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

       body {
           
       }

   

   .Genh1 {
       font-size: 60px !important;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100%;
       width: 100%;
       margin-top: 15vh;
       background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);          
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
   }

   .Genh22 {
       font-size: 60px !important;
   }

    /* Contactus media queries */


    .usus{
        font-size: 80px;
        background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent; 
        margin: 15% 0 0 0 ; 
    
    }












}


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

    .ani{
        font-size: 50px !important;
    }



   .card{
       width: 500px;
       height: 500px;
       margin: 1% auto;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       box-shadow: 0 0 10px lightgray;
       border-radius: 10px;

   }

   .cards{
         grid-template-columns: 1fr  ;
   }

   

       .gb {
           background-color: #166704;
           display: flex;
           justify-content: center;
           align-items: center;
           height: 400px;
           border-radius: 10px;
           width: 460px;
           margin: 0 0 8% 0 ; 
           }


           
   .grid-container{
       margin:1% auto ; 
       height: 100%;
       width: 50%;
       display: grid;
       justify-content: center;
       align-items: center;
       grid-template-columns: 1fr  ;
       
       grid-row-gap: 20px;
       border-radius: 10px;
   }

   .information {
       border-radius: 10px;
       width: 500px;
   }


   footer {
       display: grid;
       justify-content: center;
       align-items: center;
       grid-template-columns: 1fr  ;
       box-shadow:  0 0 10px lightgray;
       margin:2% 0 0 0 ; 
   }


   footer div:nth-child(2){
       order: 1;
   }
   footer div:first-child{
       order: 2;
   }
   footer div:nth-child(3){
       order: 3;
   }
   footer div:nth-child(4){
       order: 4;
   }

   .sec1{

       display: grid;
       justify-content: center;
       align-items: center;
       grid-column: 1/3;
       padding: 20px;
       width: 100%;

   }

   .sec2{
       display: grid;
       justify-content: center;
       align-items: center;
       grid-column: 1/2;
       margin:  0 0 0 100px;
   }



   /* Solitions html media queries
    */
   .gengenh1 {
    font-size: 60px;
    padding:  0 30px;
}

.gengenh2 {
    font-size: 28px;

}

.gengenh3 {
    font-size: 28px;

}



.sec2 {
  
    display: grid;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 0 30px 0 ;
    margin: 0 0 0 130px;
   
   
}
















   

}

@media screen and (max-width:550px){
   .card{
       width: 400px;
       height:400px;
       margin: 1% auto;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       box-shadow: 0 0 10px lightgray;
       border-radius: 10px;

   }

   .cards{
         grid-template-columns: 1fr  ;
   }

   

       .gb {
           background-color: #166704;
           display: flex;
           justify-content: center;
           align-items: center;
           height: 300px;
           border-radius: 10px;
           width:360px;
           margin: 0 0 8% 0 ; 
           }


           
   .grid-container{
       margin:1% auto ; 
       height: 100%;
       width: 50%;
       display: grid;
       justify-content: center;
       align-items: center;
       grid-template-columns: 1fr  ;
       
       grid-row-gap: 20px;
       border-radius: 10px;
   }

   .information {
       border-radius: 10px;
       width: 400px;
   }


   footer {
       display: grid;
       justify-content: center;
       align-items: center;
       grid-template-columns: 1fr  ;
       box-shadow:  0 0 10px lightgray;
       margin:2% 0 0 0 ; 
   }


   footer div:nth-child(2){
       order: 1;
   }
   footer div:first-child{
       order: 2;
   }
   footer div:nth-child(3){
       order: 3;
   }
   footer div:nth-child(4){
       order: 4;
   }

   .sec1{

       display: grid;
       justify-content: center;
       align-items: center;
       grid-column: 1/3;
       padding: 20px;
       width: 100%;

   }

   .sec2{
       display: grid;
       justify-content: flex-start;
       align-items: center;
       grid-column: 1/2;
       margin:  0 0 0 80px;
   }

 /* Solutions html media queries */
   .gengenh1 {
    font-size: 40px;
    padding:  0 30px;
}

.gengenh2 {
    font-size: 20px;
   
}

.gengenh3 {
    font-size: 20px;

}




   .eh3 {
    width: 100%;
    height: 100%;
    font-size: 25px;
    margin: 10px 0 0 10px ;
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        overflow-x:hidden;
        
        
    }


   .Cs{
width: 50% ;
height: 100px;
color: #166704;
position: absolute;
margin: 7% 0 0 16%;
font-weight: 100;

} 

   

/* Aboutus page media queries  */


.teamc {
    font-size: 60px;
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
     margin : 0 10px 0 10px; 
    }
    .teamcinfo {
    
    font-size: 25px;
    padding: 20px 20px 0 20px;
    }
    


    .msms {
        font-size: 60px;
        background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);          
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    
    }
    










}


@media screen and (max-width:500px) {
    .imgg > img{
        width: 100%;
        height: 300px;
    }

    
   .Genh1 {
       font-size: 50px !important;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100%;
       width: 100%;
       margin-top: 15vh;
       background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);          
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
   }

   .Genh22 {
       font-size: 50px !important;
   }
    .ani{
          font-size: 40px !important;
    }

   .sec2{
       display: grid;
       justify-content: center;
       align-items: center;
       grid-column: 1/2;
       margin:  0 0 0 0;
   }

   .Archi  {
       font-size: 50px;
       width: auto;
       position: absolute;
       top: 40%;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 999;
       background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
 }
 .archi {
       position: absolute;
       top: 70%;
       font-size: 25px;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 999;
       color: white;
       
 
 }



    /* Solutions html media queries */

    .eh3 {
        width: 100%;
        height: 100%;
        font-size: 25px;
        margin: 10px 0 0 10px ;
        background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            overflow-x:hidden;
            
            
        }
    
    
       .Cs{
    width: 60% ;
    height: 100px;
    color: #166704;
    position: absolute;
    margin: 7% 0 0 16%;
    font-weight: 100;
    
    } 


    .vv {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 14% 0 0 9.7% ;
        position: absolute;
    }
        .vvv {
        width: 4px;
        height: 5px;
        background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);  
        padding: 0 0 650px 0 ;
    }

    .favicon {
        width: 100%;
        height: 100%;
        background-color: coral;
        display: grid;
        justify-content: start;
        align-items: start;
        margin: 10px 0 0 0 ;
        }


        .sec2 {
  
            display: grid;
            justify-content: flex-start;
            align-items: center;
            padding: 30px 0 30px 0 ;
            margin: 0 0 0 60px;
           
           
        }
        


        /* .Cs{
            width: 60% ;
            height: 100px;
            color: #166704;
            position: absolute;
            font-weight: 100;
           
           
            
        }  */



        /* contactus html media queries */



        .usus{
            font-size: 60px;
            background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent; 
            margin: 20% 0 0 0 ; 
        
        }
    

       
  
        

            

        
    

}


@media screen and (max-width:450px){
   
    .png {
        height: 80px;
        width: 80px;
        margin: 0 0 10px 0 ;
  }
    .gengenh1 {
        font-size: 30px;
        padding:  0 30px;
    }

    .gengenh2 {
        font-size: 18px;

    }

    .gengenh3 {
        font-size: 18px;
   
    }

    /*  Aboutus Page Media Queries */



    .teamc {
          font-size: 40px; 

    }

    .msms{
         font-size: 40px;
    }


     /* Contact us Page Media Queries  */


     .form-card {
        width:  350px;
        height: 550px;
        box-shadow: 10px 10px 50px lightgray;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        margin: 50px 0 0 0 ;
        background-color: white;
        
        
        
  }
        






}

@media screen and (max-width:430px) {
   .Genh1 {
       font-size: 40px !important;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100%;
       width: 100%;
       margin-top: 15vh;
       background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);          
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
   }

   .Genh22 {
       font-size: 40px !important;
   }

   .ani{
       font-size: 35px !important;
   }


   .sec2{
       display: grid;
       justify-content: center;
       align-items: center;
       grid-column: 1/2;
       margin:  0 0 0 0;
   }

   .Archi  {
       font-size: 30px;
       width: auto;
       position: absolute;
       top: 55%;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 999;
       background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
 }
 .archi {
       position: absolute;
       top: 70%;
       font-size: 20px;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 999;
       color: white;
       
 
 }

 .card{
   width: 350px;
   height:400px;
   margin: 1% auto;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   box-shadow: 0 0 10px lightgray;
   border-radius: 10px;


}

.cards{
     grid-template-columns: 1fr  ;
}



   .gb {
       background-color: #166704;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 300px;
       border-radius: 10px;
       width:300px;
       margin: 0 0 8% 0 ; 
       }


       
.grid-container{
   margin:1% auto ; 
   height: 100%;
   width: 50%;
   display: grid;
   justify-content: center;
   align-items: center;
   grid-template-columns: 1fr  ;
   
   grid-row-gap: 20px;
   border-radius: 10px;
}

.information {
   border-radius: 10px;
   width: 350px;
    padding: 40px ; 
}


footer {
   display: grid;
   justify-content: center;
   align-items: center;
   grid-template-columns: 1fr  ;
   box-shadow:  0 0 10px lightgray;
   margin:2% 0 0 0 ; 
}


footer div:nth-child(2){
   order: 1;
}
footer div:first-child{
   order: 2;
}
footer div:nth-child(3){
   order: 3;
}
footer div:nth-child(4){
   order: 4;
}

.sec1{

   display: grid;
   justify-content: center;
   align-items: center;
   grid-column: 1/3;
   padding: 20px;
   width: 100%;

}

.sec2{
   display: grid;
   justify-content: flex-start;
   align-items: center;
   grid-column: 1/2;
   margin:  0 0 0 20px;
}



/* solutions  */

.eh3 {
    width: 100%;
    height: 100%;
    font-size: 25px;
    margin: 15px 0 0 17px ;
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        overflow-x:hidden;
        
        
    }


   .Cs{
width: 60% ;
height: 100px;
color: #166704;
position: absolute;
margin: 7% 0 0 18%;
font-weight: 100;

} 


.vv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 16% 0 0 9.7% ;
    position: absolute;
}
    .vvv {
    width: 4px;
    height: 5px;
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);  
    padding: 0 0 650px 0 ;
}

.favicon {
    width: 100%;
    height: 100%;
    background-color: coral;
    display: grid;
    justify-content: start;
    align-items: start;
    margin: 30px 0 0 0 ;
    }


    .siemimage {
        width: 85%;
        height: 300px;
        /* margin: 5% 0 0 15% ; */
        margin: 5% 0 0 9% ;
        /* image-rendering: pixelated; */
        /* border-radius: 10px 10px 10px 10px; */
       
       }


       .logo {
        
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        margin: 0 0 0 0;
        padding:  0 70px 0 0;
    }

    .logo img  {
        height: 50px;
        width: 300px;
        image-rendering: pixelated;
    }

    .fa-chevron-right{
        position: absolute;
        right: 0%;
        overflow-x: hidden;
        bottom: 180px;
        color: white;
        margin: 0 20px 0 0 ;
    
    }
    
    .fa-chevron-left {
        position: absolute;
        bottom:180px;
        color: white;
        padding: 0 0 0 20px ;
    
    }


}

@media screen and (max-width:420px){
       .ani {
        font-size: 30px !important;
       }
}


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









    /* Solution.html media queries */
    .gengenh1 {
        font-size: 18px;
        padding:  0 30px;
    }

    .gengenh2 {
        font-size: 15px;

    }

    .gengenh3 {
        font-size: 15px;
   
    }


    .usus{
        font-size: 50px;
        background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent; 
        margin: 25% 0 0 0 ; 
    
    }





}


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

          .ani {
                font-size: 25px !important;
          }
    
        .Cs{
            width: 80% ;
            height: 100px;
            color: #166704;
            position: absolute;
            /* margin: 7% 0 0 12%; */
            font-weight: 100;
            
            }

            .ipdidsinformation {
                padding: 50px;
                font-size: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                align-items:center;
                height: 310px;
                margin:  0 0 4px 0 ;
                color: green;
                font-size: 20px;
                box-shadow:  0 0 10px lightgray;
                border-radius: 10px 0 0 10px ;
                }

                
        .gengenh1 {
            font-size: 35px !important;
            /* padding:  0 30px; */
        }

}

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

    
    .Archi  {
        font-size: 30px;
        width: auto;
        position: absolute;
        top: 51%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
  }

  .Genh1 {
    font-size: 30px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    width: 80%;
    margin: 6vh 0 0 0 ;
    background-image: linear-gradient(45deg, #166704 0%, #deff7d 100%);          
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .Genh22{
        font-size: 30px !important;
        margin: 0 0 3vh 0 ; 
  }

  .ani {
       font-size: 25px !important;
  }
  .png {
        height: 50px;
        width: 50px;
  }

  .card {
    width: 300px !important;
    height:400px;
    margin: 1% auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 10px lightgray;
    border-radius: 10px;

  }
  .imgg {

  }
  .information{
      width: 300px;
  }
   
    .gengenh1{
           margin: 100px 0 0  0 ;
           font-size: 25px !important;
    }
    .gengenh2{
         font-size: 20px !important;
         padding: 0 20px;
    }
    .gengenh3{
        font-size: 20px !important;
        padding: 0 20px;
   }

   .ipdidsinformation{
    padding: 10px;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items:center;
    height: 310px;
    margin:  0 0 4px 0 ;
    color: green;
    font-size: 20px;
    box-shadow:  0 0 10px lightgray;
    border-radius: 10px 0 0 10px ;
   }

}