.html{
scroll-behavior: smooth;
    
  }
  
  
  * {
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
    
  }

  body{
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     scroll-behavior: smooth;
  }

 
.BodyIndex{
  background-color: black;
  color: white;
  scroll-behavior: smooth;
}
 
 .BodyIndex::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
  }
  .BodyIndex::-webkit-scrollbar-thumb {
    background-color: white;
    
  }
  .BodyIndex::selection {
    background: grey;
    color: gray;
  }
 
  .LandingLogoContainer{
text-align: center;
margin-top: 60vh;
  }
  
  
  
  
  
  .Homepage{
  background-color: black;
height: 100vh;
background-size: cover;
background-position: center;
position: static;
z-index: -1;
column-count: 1;
column-width: 100%;
}

.HomeText {
    font-size: 600%;
    position: absolute;
    left: 50%;
    top: 50%;
    color: white;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    font-weight: bold;
    animation: fadeAndScale 2s ease-in;
    z-index: 0;
}

  .loader-wrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
  }
  
  @keyframes fadeAndScale {
      from {
          opacity: 0;
      }
      to{
          opacity: 1;
      }
  }
  
  .closebtn{
    text-align: center;
  }
  
  .overlay {
      height: 0%;
      width: 100%;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #ffffff;
      background-color: #ffffff;
      overflow-y: hidden;
      transition: 2s;
      z-index: 4;
    }
    
    .overlay-content {
      position: relative;
     
      text-align: center;
      margin-top: 0px;
    }
    
    .overlay a {
      padding: 50px;
      text-decoration: underline;
      text-decoration-color: transparent ;
      text-decoration-style: solid 1px ;
      font-size: 40px;
      color: gray;
      display: block;
      transition: 0.3s;
      font-weight: lighter;
      
    }
    
    .overlay a:hover, .overlay a:focus {
     color: #00004d;
    }

    span{
        position: static !important;
        z-index: -9999999 !important;
    }
    
    .overlay .closebtn {
    
      top: 20px;
      right: 45px;
      font-size: 60px;
    }
    
    @media screen and (max-height: 450px) {
      .overlay {overflow-y: auto;}
      .overlay a {font-size: 20px}
      .overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
      }
    }
  
    body,#canvas{
      margin: 0;
      height:100vh;
     
    }

  

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    
   
    
    .container {
      position: fixed;
      z-index: 99999;
      height: 100%;
      width: 100%;
      background: black;
      justify-content: center;
      align-items: center;
      background-position: center;
      background-size: cover;
      display: flex;
    }
    .container p {
      font-size: 3rem;
      padding: 0.5rem;
      font-weight: bold;
      letter-spacing: 0.1rem;
      text-align: center;
      overflow: hidden;
    }
    .container p span.typed-text {
      font-weight: bold;
      color: white;
      position: static;
      z-index: 999999999;
    }
    .container p span.cursor {
      display: inline-block;
      background-color: #ccc;
      margin-left: 0.1rem;
      width: 3px;
      animation: blink 1s infinite;
    }
    .container p span.cursor.typing {
      animation: none;
    }
    @keyframes blink {
      0%  { background-color: #ccc; }
      49% { background-color: #ccc; }
      50% { background-color: transparent; }
      99% { background-color: transparent; }
       100%  { background-color: #ccc; }
    }

    .border{
        display: block;
        
        margin-top: 100px;
        margin-left: 250px;
        width: 120px;
        height: 2px;
        background: #00004d;
      
      }
      
      .about{
        height: 60vh;
      background-color: white;
      column-count: 1;
column-width: 100%;
    
      }
      
      .AUT{
      font-size: 550%;
        
        color: rgba(0,0,0,2);
        padding-left: 250px;
        margin-bottom: none;
        font-weight: 300;
        
        margin-top: 10px;

      }

      .MST{
        text-align: center;
        font-size: 500%;
        color: white;
        display: inline-block;
        animation: animate 60s infinite linear;
        overflow: hidden;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      
      *:focus {
        outline: 0;
      }
      
      
      
      
      *{
        margin: 0;
        padding: 0;
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
      .section{
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        overflow: hidden;
      }
      .section div{
        position: relative;
        width: 50%;
        height: 100vh;
        background: black;
        overflow: hidden;
      }
      .section div:nth-child(1){
        /* background: url('https://images.unsplash.com/photo-1502739391963-eda719c24cd4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80') center; */
        background-size: cover;
        background-color: black;
        height: 100vh;
      }
      .h2 {
        position: absolute;
        white-space: nowrap;
        font-size: 12em;
        line-height: 100vh;
        animation: animate 60s linear infinite;
        -webkit-text-stroke: 2px;
        -webkit-text-stroke-color: #fff;
        -webkit-text-fill-color: transparent;
      }

      
      .section div:nth-child(1) h2{
        -webkit-text-stroke: 2px;
        -webkit-text-stroke-color: #fff;
        -webkit-text-fill-color: transparent;
        left: 100%;
      }
      
      span:hover{
        -webkit-text-stroke: 2px;
        -webkit-text-stroke-color: #fff;
        -webkit-text-fill-color: white;
      }


.HomeSection1{
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  margin-top: 20vh;
  margin-bottom: 20vh;
}

      @keyframes animate{
        0% {
          transform: translateX(0);
        }
        100%{
          transform: translateX(-100%);
        }
      }
      
      
      
      @keyframes animLeft {
        0% {
          transform: translate(-20%, -50%)
        } 
        100% {
          transform: translate(-100%, -50%)
        }
      }
      
      .ServiceHome{
       background-position: center;
       background-size: cover;
          background-color: black;
          column-count: 1;
column-width: 100%;
          
      }
      .ServiceTXT{
          font-size: 600%;
          color: white;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
          text-align: left;
          font-weight: lighter;
      }

      .PhilTEXT{
          margin-left: 10vw;
          width: 50vw;
          height: 50vw;
          font-weight: 100;


      }

      .Philosophy{
          background: black;
          height: 70vh;
          color: white;
      }

      .OPT{
          font-weight: 100;
      }

      .OP{
          margin-bottom: 30px;
          color: gray;
          font-size: 85%;
      }

      .ReadMore{
          margin-top: 40px;
          color: grey;
          font-weight: lighter;
      }

      .entries .entry {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
        display: none;
        color: white;
      }

      .testemonails{
          background: black;
          height: 60vh;
          text-align: center;
      }

     .Customer{
         font-weight: lighter;
         margin-top: 40px;
     }

     .Quote{
         font-weight: 500;
         font-size: 300%;
     }

     .WOCS{
        color: grey;
        font-weight: lighter;
        text-align: center;
        margin-bottom: 30px;
     }

    .video{
      background-color: black;
      background-position: center;
      background-size: cover;
      text-align: center;
    }
    .videoTXT{
      color: grey;
      margin-bottom: 40px;
    }

    .OurStory{
      margin-bottom: 50px;
      
      border: solid white 3px;
    }

    .Newsletter{
     background-color: black;
      padding: 100px 40px;
      text-align: center;
      color: white;
    }
    .Newsletter p {
      max-width: 600px;
      margin: 40px auto;
      font-size: 15px;
      font-weight: 300;
    }
    .email-box{
      height: 80px;
      width: 70vw;
      justify-content: center;
      display: inline-flex; /*its better to use inline-flex*/
      background-color: black;
      text-align: center;
      margin-top: 50px;
    }
   
    .tbox,.btn{
      border: none;
      outline: none;
      
    }
    .tbox{
      width: 70vw;
      transition: 0.6s;

    }

.Newsletter input{
  font-size: 100%;
   padding-left: 30px;
}

 :placeholder-shown{
   font-size: 100%;
   padding-left: 30px;
 }


    
    .btn{
      background: #2f3542;
      color: white;
      padding: 0 10px;
      text-transform: uppercase;
      cursor: pointer;
      width: 10vw;
    }
    
.CallToAction{
  background-color: black;
  height: 60vh;
  text-align: center;
}

.CTAT{
  display: inline-block;
  margin-top: 150px;
  font-size: 500%;
  text-align: center;
  font-weight: 300;
  color: white;
}

.CTAT2{
  color: grey;
  text-decoration: none;
  text-align: center;
  font-weight: lighter;
  font-size: 150%;
}

.ServiceLanding{
  background: white;
  background-position: center;
  background-size: cover;
  height: 62vh;
}

.ServiceHeader{
  font-size: 500%;
  font-weight: 500;
  text-align: center;
  margin-top: 32vh;
}

.hr2{
  margin-top: 30px
  
}

.ServiceDescription{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  display: flex;
  
}

.ServiceContainer1{
  width: 30vw;
  margin-left: 8vw;
  margin-top: 10vh;
  
}





.Serviceh3{
  
  font-size: 90%;
}

.Serviceh4{
  margin-bottom:20px;
  color: gray;
  font-size: 85%;

}

ul{
  list-style-type: none;
  
}

.serviceLi{
  font-size: 300%;
  font-weight: 500;
  margin-bottom: 5vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  opacity: .65;
  transition: 1s;
}

.serviceLi:hover{
  opacity: 1;
}

.ServiceContainer2{
  float: right;
  margin-left: 10vw;
 margin-right: 10vw;
  
  margin-top: 10vh;
}

.Serviceh42{

 margin-bottom:20px;
  color: gray;
  font-size: 85%;
}

.a{
  text-decoration: none;
  -webkit-text-stroke: 2px;
        -webkit-text-stroke-color: #fff;
        -webkit-text-fill-color: transparent;
}

.a2{
  text-decoration: none;
  color: white;
}


footer{
background: black;
height: 60vh;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.FooterHeader{
text-align: center;
font-size: 500%;
font-weight: 400;
margin-top: 30px;
color: white;
}

.FootButt{
background: white;
height: 50px;
width: 80px;
color: black;
font-weight: lighter;
}

.IonIcon{
  color: white;
}

.FooterIcon{
  border-radius: 50%;
  border: 3px white;
  height: 30px;
  width: 30px;
}

.AboutLanding{
  background-color: black;
  background-size: cover;
  background-position: center;
  height: 100vh;
  text-align: center ;
}

.AboutH3{
  font-size: 150%;
  color: white;
  
  margin-left: 30px;
  margin-bottom: 30px;
  font-weight: 200;
  margin-top: 30vh;
}

.AboutHR{
  width: 30vw;
  margin-left: 35vw;
  text-align: center;
  
}

.AboutHeader{
  font-size: 300%;
  color: white;
  
  font-weight: 400;

}

.aboutContainer{
  animation: fadeAndScale 2s ease-in;
}
.AboutHeaderContainer{
  margin-top: 30px;
  text-align: center;
  width: 50vw;
  margin-left: 25vw;
}

.MeetTheTeam{
  color: black;
 
  height: 175vh;
  background-color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.cards{
  /* column-count: 3;
  margin-left: 10vw;
  margin-right: 10vw;
  column-width: 33.333%;
 column-gap: 3vw; */
 display: grid;
 grid-template-columns: auto auto auto;
 column-gap: 1vw;
 margin-left: 27vh;
 margin-right: 27vh;

}

.card1{
  margin-bottom: 40px;
}

.cardIMG{
height: 507.9375px;
width: 446.625px;

}

/* .CardContent{
  display: flex;
} */

.FullName{
  margin-top: 20px;
  font-size: 175%;
  font-weight: 400;
  color: black;
}

.JobClass{
  margin-top: 10px;
  font-size: 125%;
  font-weight: 200;
  color: black;
  margin-bottom: 20vh;
}
.CardIcons{
  margin-right: none;
}

.WWA{
  margin-left: 12.75vw;
  font-size: 300%;
  font-weight: 300;
margin-bottom: 5vh;
margin-top: 5vh;
}
.fa-facebook{
  font-size: 200% ;
  margin-bottom: 20vh;
  margin-top: 10px;
  
  color: black;
  opacity: 0.75;
  transition: 1s;
}
.fa-linkedin{
  font-size: 200% ;
  margin-bottom: 20vh;
  margin-top: 20px;
  color: black;
  opacity: 0.75;
  transition: 1s;

}

.fa-facebook:hover{
  opacity: 1;
}

.fa-linkedin:hover{
  opacity: 1;
}

.TheWayWeDoIt{
  /* grid-row: span 4;
  grid-column: span 12; */
  columns: 2;
  text-align: left;
  margin-left: 10vw ;
  margin-right: 20vw;
  column-gap: 10vh;
}

/* .inline-1{
  display: inline-block;
}
.inline-2{
  display: inline-block;
} */

.DivContainer1 {
  width: 25vw;
  height: 30vh;
  /* grid-column-start: span 3;
  grid-column-end: span 5;
  grid-row-start: span 1 ;
  grid-row-end: span 2; */
  

} 


.DivContainer2 {
  width: 25vw;
  height: 30vh;
  /* grid-column-start: span 3;
  grid-column-end: span 6;
  grid-row-start: span 3 ;
  grid-row-end: span 4; */

} 

.DivContainer3 {
  width: 25vw;
  height: 30vh;
  /* grid-column-start: span 8;
  grid-column-end: span 11;
  grid-row-start: span 1 ;
  grid-row-end: span 2; */

} 


.DivContainer4 {
  width: 25vw;
  height: 30vh;
  /* grid-column-start: span 8;
  grid-column-end: span 11;
  grid-row-start: span 3 ;
  grid-row-end: span 4; */

} 

.TWWDIText{
  margin-top: 10%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.TWWDIh2{
font-weight: 600;
margin-bottom: 20px;
font-size: 125%;
}
.TWWDIp{
font-size: 125%;
font-weight: 350;

}

.ItHR{
  height: 3px;
  background-color: black;
}

.Ith1{
  font-size: 500%;
  font-weight: 400;
  margin-left: 10vw;
  margin-bottom: 15vh;
  margin-top: 10vh;
}

.ContactUsLanding{
  background-image: url("ContactUs.png");
  background-position: center;
  background-size: cover;
  height: 95vh;
}







/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
  margin-bottom:85px; 
  margin-left: 50%;
}
input 				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:600px;
  
  border:none;
  border-bottom:1px solid rgba(0, 0, 0, 0.2);
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
  color:rgba(0, 0, 0, 0.2); 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#000000;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:600px; background: #999; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#000000; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}



.bar:after {
  right:35%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#000000; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#000000; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#000000; }
  to 	{ width:0; background:transparent; }
}

.GeneralContact{ 
  box-sizing:border-box; 
  margin-top: 20vh;
}


.GCh1{
  font-weight: 400;
  margin-left: 15%;
  margin-bottom: 100px;
  font-size: 400%;
}

.GCp1{
margin-bottom: 20px;
}



.GCpContainer{
  font-size: 110%;
  margin-left: 15%;
  width: 25vw;
  font-weight: 400;
}

.FormButton1{
  border: none;
  color: black;
  font-size: 150%;
background-color: transparent;
margin-left: 50%;
opacity: 0.6;
transition: 1s;

}

.FormButton1:hover{
  opacity: 1;
  cursor: pointer;
}

.ContactLandinghr{
  margin-left: 25vh;
  margin-right: 25vh;
}

.ContactLandingh3{
  font-size: 150%;
  
  
  margin-left: 81.5%;
  margin-bottom: 10px;
  font-weight: 200;
  padding-top: 25vh;
}

.ContactLandingContainer{
  width: 25vw;
  margin-left: 12vw;
  height: 50vh;
  margin-top: 3vh;
}

.ContactLandingHeader{
  font-weight: 400;
  font-size: 750%;

}

.Location{
  filter: grayscale(100%);
  margin-top: 20vh;
}

.AboutSection2{
  color: white;
  background-color: black;
}

.TextContainerS2-1{
color: white;
font-size: 300%;

width: 50vw;
padding-top: 5vh;
margin-left: 15%;
}

.TextContainerS2-2{
margin-left: 35%;
width: 50vw;
font-size: 20px;
font-weight: 200;
padding-top: 70px;
}

.AS2-h2{
  font-weight: 600;
  font-size: 200%;
  /* text-decoration: underline;
  text-decoration-style: 3px; */
}

.Hey{
  font-weight: 50;
  padding-bottom: 30px;
}

.AboutSection4{
  
  background-color: black;
  
}

.OY{
  background-color: white;
  color: black;
  transition: 1s ease;
  opacity: 0;
  position: static;
  z-index: 999;
}

.P4 img{
  height: 200px;
  width: 200px;
  border-radius: 50%;
  display: block;
  /* top: 50px;
  left: 200px; */
  /* position: static;
  z-index: 1; */
  filter: grayscale(100%);
}

.Overlay1{
  height: 200px;
  width: 200px;
  border-radius: 50%;
  /* margin-left: 200px; */
  position: absolute;
 
}


.OY:hover{
  opacity: 1;
}

.P41{
  margin-left: 15vw;
  display: flex;
  
}
.H41{
  position: absolute;
  top: 40%;
  left: 15%;
  font-size: 125%;
}

.RotateLogo{
  transform: rotate(-90deg);
  color: white;
  margin-top: 20px;
  margin-left: 7px;
  font-weight: 400;
  font-size: 150%;
  position: fixed;
  text-decoration: none;
}

.MainServices{
  height: 95vh;
}

.ITECHH1{
  font-size: 500%;
  font-weight: 100;
  
  width: 15vw;
}

.ITp{
  font-size: 100%;
  line-height: 30px;
  margin-top: 50px;
  color: gray;
  width: 30vw;
  
  font-weight: 100;
}

.ITH3{
  
  font-size: 100%;
  color: white;
  margin-bottom: 20px;
  margin-top: 20px;
  
  font-weight: 100;
}
.ServicesTextContainer3{
margin-top: 10vh;
width: 30vw;

}

.ITHR{
  background-color: gray;
  color: gray;
}

.ServiceOne{
  display: inline-flex;
  margin-top: 90vh;
}

.ServiceOneIMG{
  width: 30vw;
}

#ServiceIMG1{
  margin-left: 30vh;
}

.MainServiceContainer{
  margin-left: 13vw;
}

.NewsletterInput{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:1500px;
  height: 150px;
  margin-left: 9vw;
  border:none;
  border-bottom:1px solid white;
  background-color: transparent;
  color: white;
  font-size: 100px;
  text-align: center;
}

.Newsletter2{
  margin-bottom: 100px
  ;
  color: white;
  text-align: center;
  margin-top: 30vh;
}

.Newsletter2 ::placeholder{
  font-size: 100px;
  margin-bottom: none;
  opacity: .5;
  text-align: center;
}

.NewsletterIcon{
  padding-top: 7vh;
  font-size: 150%;
  color: white;
 font-weight: 300;
  transition: .5s;
  opacity: 0.75;
}

.NewsletterIcon:hover{
  opacity: 1;
}

.start {
  display: flex;
  
  align-items: center;
  justify-content: center;
  font-family: 'Lucida Sans Unicode';
  font-size: 40px;
  height: 100vh;
  overflow: hidden;
  color: gray;
  font-size: 400%;
}
*{ box-sizing: border-box; }
.container{
  display: inline-block;
}
.end1, .middle1, .middle2{
  display: inline-block;
  overflow:hidden;
  height: 1.5em;
}
.end2{
  position:absolute;
  color:#ff6a00
}
.middle1, .middle2{
  color: #cfcfcf
}
.middle1 {
  animation: ani1 5s infinite;
  animation-delay: -3s;
  max-width: 0;
margin-left: 30px;
}
.middle2 {
  animation: ani2 5s infinite;
  animation-delay: -3s;
  max-width: 0;
}

@keyframes ani1 {
  0% {
  max-width: 500px;
}

25% {
  max-width: 0;
}

75% {
  max-width: 0;
}

90% {
  max-width: 350px;
}

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

@keyframes ani2 {
  0% {
      max-width: 0;
  }

  25% {
      max-width: 0;
  }

  50% {
      max-width: 500px;
  }

  75% {
      max-width: 0;
  }

  100% {
      max-width: 0;
  }
}



.growSTART {
  height: 1000px;
}

.GrowH1 {
  text-align: center;
  font-size: 50px;
  position: sticky;
  top: 50%;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 2px;
  margin-top: -1px;
  margin-bottom: 30vh;
}

.endsection{
  background-color: white;
  color: black;
  height: 100vh;
  display: flex;
}

.endsectionheader{
margin-top: 30vh;
color: black;
font-size: 500%;
width: 53vw;
font-weight: 200;
padding-left: 10vw;
padding-top: 25vh;
}

.dark{
  font-weight: 500 !important;
}

.endsectionul{
padding-left: 10vw;
padding-top: 10vh;

}

.endsectionli{
font-size: 175%;
line-height: 50px;
opacity: .5;
text-decoration: none;
transition: 1s linear;
}

.endsectionli:hover{
  opacity: 1;
  text-decoration: underline;
}

.logoul button{
  height: 70px;
  width: 70px;
  border-radius: 50%;
  border: solid gray 1px;
background-color: transparent;

}

.logoli{
  margin-left: 10px;
  margin-right: 10px;
}

.logoul{
  display: flex;
  margin-top: 23vh;
margin-right: 7vh;
}

.MarqueeA{
  -webkit-text-stroke: 2px;
        -webkit-text-stroke-color: #fff;
        -webkit-text-fill-color: transparent;
        font-size: 10em;
        text-decoration: none;
       
}

.MarqueeA:hover{
  -webkit-text-stroke: 2px;
  -webkit-text-stroke-color: #fff;
  -webkit-text-fill-color: white;
}

.ServiceWheel{
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  margin-top: 20vh;
  margin-bottom: 20vh;
}



.OurTeamSection {
  background: black;
  background-size: cover;
  margin-top: 70vh;
}

.OurTeamSection:after {
  animation: grain 1s steps(10) infinite;
  background-image: url(grains.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.8;
  position: fixed;
  top: -110%;
  width: 300%;
  z-index: 0;
  align-items: center;
  text-align: center;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

.content {
  z-index: 1;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
}

.Content h1 {
  color: #e3e3e3 !important;
 
  margin:  0 32px 40px !important;
}

.row {
  z-index: 1;
  margin: 70px !important;
  padding: 0 !important;
}

.cardd {
  border: 1px solid rgba(255,255,255,0.1);
  height: 220px;
  transition: 1s !important;
}

.row h5 {
  color: #fff;

  margin: 48px 0 2px 4px;
  font-size: 16px;
}

.row h5:before {
  position: absolute;
  content: "";
  top: 50px;
  left: -2px;
  width: 2px;
  height: 22px;
  display: block;
  background: #fff;
}

.p {
  color: grey;
  margin-left: 4px;
  font-size: 14px;
  margin-bottom: 70px !important;
}

.a1 {
  margin-left: 4px;
  color: lightgrey !important;
 
  font-weight: 300;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
}

.a1:hover {
  text-decoration: none !important;
  color: grey !important;
}

.cardd:hover:before {
  transition: 1s !important;
  content: "";
  position: absolute;
  top: -100px;
  left: 100px;
  width: 280px;
  height: 280px;
  z-index: -1;
  animation: anim 3.2s ease-in-out;
}

.card2{
  margin-left: 13%;
}
.card6{
  margin-left: 26%;
}

/* .card1.cardd:hover::before {
  background: url(Virgilius.png);
  filter: grayscale(100%);
} */
.card2.cardd:hover::before {
  background: url(team1.jpg);
}
.card3.cardd:hover::before {
  background: url(team2.jpg);
}

.card4.cardd:hover::before {
  background: url(team3.jpg);
}
/* .card5.cardd:hover::before {
  background: url(team2.jpg);
} */
.card6.cardd:hover::before {
  background: url(team1.jpg);
}

.card7.cardd:hover::before {
  background: url(team2.jpg);
}
/* .card8.cardd:hover::before {
  background: url(team2.jpg);
} */

@keyframes anim {
  0% {
       opacity: 0;
       left: 70px;
  }

  20% {
       opacity: 1;
       left: 100px;
  }

  100% {
       opacity: 1;
       left: 100px;
  }
}

@media only screen and (max-width: 900px) {
  a {
       display: none !important;
  }

  .cardd {
       height: 100px;
  }

  .row h5 {
       margin: 28px 0 2px 4px;
  }

  .row p {
       margin-bottom: 10px !important;
  }

  .row h5::before {
       top: 26px;
  }

  .cardd:hover::before {
       display: none;
  }
}

.row2{
  margin-top: 100px;
}

.OTSH1{
  
  margin-bottom: 150px;
  font-size: 50px;
  text-align: center;
  font-weight: lighter;
  font-style: italic;
}

.aboutIMG{
  
  margin-top: 30vh;
  margin-bottom: 10vh;
  filter: grayscale(100%) blur(10px);

 height: 1000px;
 width: 100%;

}

.BOLDTEXT{
  margin-left: 20%;
  width: 60vw;
  text-align: center;
  font-size: 110px;
  font-weight: bold;
  margin-top: 20vh;
}

#codetext{
  font-weight: lighter;
  width: 50vw;
  text-align: center;
  font-size: 130%;
  line-height: 60px;
  margin-left: 25%;
margin-top: 20vh;
}

.CodeText{
  text-align: center;
}

.WorkIMG{
 height: auto;
 width: 55%;
 filter: grayscale(100%) saturate(100%);
 transition: .15s;
 -webkit-transition: 1s;
 margin-left: 20vw;
 opacity: 0;
 z-index: 1;
 position: static;

}

.row1{
  text-align: left;
  margin-top: 20vh;
 position: relative;

  margin-left: 20vw;
}

.row2{
  text-align: left;
  margin-top: 2vh;
 position: relative;

  margin-left: 20vw;
}
.row3{
  text-align: left;
  margin-top: 2vh;
 position: relative;

  margin-left: 20vw;
}
.row4{
  text-align: left;
  margin-top: 2vh;
 position: relative;

  margin-left: 20vw;
}

.WorkH2{
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: white;
  -webkit-text-fill-color: transparent;
  font-size: 80px; 
 
  transition: 300ms;
  -webkit-transition: 300ms;
  position: absolute;
  z-index: 2;
}



/* .WORKH2:hover{
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: #fff;
  -webkit-text-fill-color: white;
  margin-left: 10px;
} */


.row1:hover .WORKIMG{
  filter: none;
  opacity: 1;
margin-left: 25vw;
}

.row1:hover .WORKH2{
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: gray;
  -webkit-text-fill-color: grey;
  margin-left: 10px;
}

.row2:hover .WORKIMG{
  filter: none;
  opacity: 1;
margin-left: 25vw;
}

.row2:hover .WORKH2{
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: gray;
  -webkit-text-fill-color: grey;
  margin-left: 10px;
}
.row3:hover .WORKIMG{
  filter: none;
  opacity: 1;
margin-left: 25vw;
}

.row3:hover .WORKH2{
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: gray;
  -webkit-text-fill-color: grey;
  margin-left: 10px;
}
.row4:hover .WORKIMG{
  filter: none;
  opacity: 1;
margin-left: 25vw;
}

.row4:hover .WORKH2{
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: gray;
  -webkit-text-fill-color: grey;
  margin-left: 10px;
}

.WorkH1{
  transform: rotate(-90deg);
  position: fixed;
  margin-top: 40vh;
  margin-left: 76vw;
  font-size: 90px;
  color: gray;
  z-index: 3;
}

.ApproachService{
  background-image: url(ServiceBackground.png);
  background-size: cover;
  background-position: center;
  height: 95vh;
  display: flex;
}

.ASTH1{
  font-size: 90px;
  width: 50px;
  color: white;
  margin-left: 20vw;
  margin-top: 50vh;
}

.ASTp{
margin-bottom: 30px;
font-size: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 40px;
}

.ASTextContainer1{
  width: 40vw;
  margin-top: 10vh;
  margin-left: 10vw;
}

.WhatWeUseService{
  background-image: url(ServiceBackground2.PNG);
  background-size: cover;
  background-position: center;
  height: 95vh;
}