*{
margin: 0;
padding: 0;
box-sizing: border-box
}

html{
font-size: 62.5%;
scroll-behavior: smooth;
scroll-padding-top: 7rem;
}



.sixstep{

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#sixstep{

  width: 883px;
  height: 459px;

}

.accurate{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;
  margin-bottom: 2rem;
  
  }
  
  #accurate{
  
    width: 72px;
    height: 72px;
    margin-right: 3rem;
    margin-left: 3rem;
  }


#bottomUp{

  width: 880px;
  height: 971px;
}

.BBMV{

margin-right: 2rem;

}


.beware{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;

}

#beware{
width: 72px;
height: 84px;
margin-right: 3rem;
margin-left: 3rem;


}

.btn-blue{

background-color: #99ccff;
color: white;
font-family: "robotocondensed";
font-style: normal;
font-weight: 200;
font-size: 2.8rem;
text-decoration: none;
text-align: center;

}

.btn-grey{

  background-color: lightgrey;
  color: white;
  font-family: "robotocondensed";
  font-style: normal;
  font-weight: 200;
  font-size: 2.8rem;
  text-decoration: none;
  text-align: center;

}

.burger{

display: none;


}

.container{

max-width: 120rem;
margin: auto;

}



.footerContent{

 
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 2rem 2rem 2rem 0;
  justify-content: space-between;
  padding: 0 4rem 0 8rem;

}

.copyright{
  font-family: "robotocondensed";
  font-size: 1.5rem;
  font-weight: 200;

}

#costBenefit{
width: 641px;
height: 553px;
justify-content: center;
align-items: center;


}

.database{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;

}

#database{
width: 72px;
height: 74px;
margin-right: 3rem;
margin-left: 3rem;


}

.document{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;

}

#document{
width: 72px;
height: 84px;
margin-right: 3rem;
margin-left: 3rem;


}

.document2{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;

}

#document2{
width: 72px;
height: 84px;
margin-right: 3rem;
margin-left: 3rem;


}


.home{
display: flex;
flex-direction: column;

}

#home{

    display: flex;
    align-items: center;
    padding: 2rem 0 2rem 0;
    justify-content: center;
    width: 90%;
    margin: auto;
    margin-top: 10rem;
}    

.ELLogo{

margin-right: 2rem;

}

.head{
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 2rem;
margin-bottom: 2rem;

}

#head{

  width: 72px;
  height: 96px;
  margin-right: 3rem;
  margin-left: 3rem;
}

.head2{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;
  margin-bottom: 2rem;
  
  }
  
  #head2{
  
    width: 72px;
    height: 96px;
    margin-right: 3rem;
    margin-left: 3rem;
  }

  .head3{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 2rem;
    margin-bottom: 2rem;
    
    }
    
    #head3{
    
      width: 72px;
      height: 96px;
      margin-right: 3rem;
      margin-left: 3rem;
    }


.imagetrain{

flex: 1 1 20rem;


}

.ISO{

float: left;


}

#isoCert{
  width: 495px;
  height: 700px;
  

}

.jar{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;

}

#jar{
width: 72px;
height: 63px;
margin-right: 3rem;
margin-left: 3rem;


}

#logo{

    
    margin: 1rem 1rem 1rem 1rem;
    align-items: center;
    width: 130px;
    height: 60px;
}


.logo2{

    display: flex;
    justify-content: center;
    align-items: center;
}

.main-header{

    display: flex;
    flex-direction: column;
    position: fixed;
    width: auto;
    align-items: center;


}
   
.mission{

   text-align: center; 
   font-size: 5rem;
   text-decoration-line: none;
   width: 90%;
   margin: 2rem auto;
   padding: 0rem 0rem 0rem 2rem;
   font-family: "robotocondensed", sans-serif;
   font-weight:900;
     
 
}

nav{

    position: fixed;
    top: 0;
    display: flex;
    overflow: hidden;
    max-width: 120rem;
    width: 100%;
    text-decoration: none;
    background-color: white;
    
    
    
    }
    
    .navBurger{
display: none;

    }

 
    
    .nav-ul{
    
        
        display: flex;
        flex: 1 1 80rem;
        list-style: none;
        justify-content: space-around;
        align-items: center;
        font-family: "robotocondensed", sans-serif;
        font-size: 3rem;
        max-width: 120rem;
        width: 100%;
        text-decoration: none;
        margin: auto;
        padding-top: 2rem;
       
          
    }
    
    .nav-ul li{
    
    justify-content: space-around;
    
    
    }

    .nav-titles{

      width:90%;
      align-items: center;
      
    }

.navigation{

font-family: "robotocondensed" sans-serif;
font-style: normal;
font-weight: 200;
font-size: 2.8rem;
text-decoration: none;
color: #99ccff;

}

.navigation-grey{

  font-family: "robotocondensed" sans-serif;
  font-style: normal;
  font-weight: 200;
  font-size: 2.8rem;
  text-decoration: none;
  color: darkgrey;


}

.noCalc{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;
  margin-top: 2rem;

}

#noCalc{
width: 72px;
height: 74px;
margin-right: 3rem;
margin-left: 3rem;


}

.notaLot{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  margin-top: 2rem;

}

#notaLot{
width: 587px;
height: 342px;
margin-right: 5rem;
margin-left: 5rem;


}



#process{

    float: left;
    margin-right: 3rem;

}

#profile{

    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    background-image: url(images/train.png);
    background-size: cover;
    background-position: center;

    

    }
    
  #projects{

   
    width: 90%;
    margin: auto;
    
    display: flex;
    flex-direction: column;
    

    }

    #quality{


      width: 90%;
      margin: auto;
      margin-top: 5rem;
     
      
      }

      #racom{

        width: 90%;
        margin: auto;
        margin-top: 5rem;
       

      }
 

.QRLogo{

margin-right: 2rem;

}


.racom{
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 2rem;
  font-size: 3rem;
  font-family: "robotocondensed";
  margin: auto;
 
}

.racomaccordion{
display: flex;
flex-direction: column;
width: 90%;
margin: 1rem auto 0 auto;
}

#racomlogo{

  width: 626px;
  height: 204px;
  margin: auto;
 
  }

  .racomlogo{
    margin-top: 1rem;
    display: flex;
    justify-content: center;


  }

  .video{

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1rem 1rem 1rem 1rem;
  }

  #RCMvideo{

    width: 821px;
    height: 416px; 
    outline: none;
    border: none;
    justify-content: center;
  
  }

  #RDTvideo{

    width: 821px;
    height: 416px; 
    outline: none;
    border: none;
    justify-content: center;
  
  }



  .RDTprocess{
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;

  }

.reviewGroup{

  display: flex;
  justify-content: center;

}

  #reviewGroup{

width: 576px;
height: 348px;

  }

  .reviewGroup2{

    display: flex;
    justify-content: center;
  }

  #reviewGroup2{

    width: 576px;
    height: 565px;
    
      }

.sectionHead{


font-family: "monterat", sans-serif;
font-size: 8rem;
font-style: normal;
font-weight: bold;
text-align: center;
align-items: center;
padding: 2rem;
color: #74a5f5;


}

 
    .sectionText{

        font-family: "robotocondensed", sans-serif;
        font-size: 4rem;
        font-weight: bold;
        margin-top: 1rem;
        margin-left: 2rem;
       
    }

#services{

    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    background-image: url(images/industry.png);
    background-position: center center;
    background-size: cover;
    margin-top: 5rem;


}

.strapline{

  font-family: "robotocondensed", sans-serif;
  font-size: 4rem;
  font-weight: bold;
  margin-top: 1rem;
  margin-left: 2rem;
  text-align: center;


}

#technologies{


width: 90%;
display: flex;
flex-direction: column;
margin: auto;
background-image: url(images/RAMSTech.png);
background-position: center center;
background-size: cover;
margin-top: 5rem;

}


.text{

font-family: "robotocondensed", sans-serif;
font-size: 2.5rem;
margin-left: 2rem;
padding-right: 2rem;
text-align: justify;


}

    .textBullets{

        margin: 0rem 0rem 0rem 6rem;
        font-family: "robotocondensed", sans-serif;
        font-size: 2.8rem;
        margin-bottom: 2rem;  
     }

     .textBullets2{

        margin: 0rem 0rem 0rem 4rem;
        font-family: "robotocondensed", sans-serif;
        font-size: 2.5rem;
        margin-bottom: 0.5rem;  

     }

     .textBullets3{

        margin: 0rem 0rem 0rem 6rem;
        font-family: "robotocondensed", sans-serif;
        font-size: 2.5rem;
       
     }

     .textBullets4{

        margin: 0rem 0rem 0rem 8rem;
        font-family: "robotocondensed", sans-serif;
        font-size: 1.5rem;
       
     }

.textIndent1{

  margin: 0rem 0rem 0rem 6rem;
  font-family: "robotocondensed", sans-serif;
  font-size: 3rem;
  margin-top: 2rem; 


}

.textIndent2{

  margin: 0rem 0rem 0rem 10rem;
  font-family: "robotocondensed", sans-serif;
  font-size: 3rem;
  margin-top: 0.5rem; 


}

.textIndent3{

  margin: 0rem 0rem 0rem 14rem;
  font-family: "robotocondensed", sans-serif;
  font-size: 3rem;
  margin-top: 0.5rem; 
 


}

.textIndent4{

  margin: 0rem 0rem 0rem 14rem;
  font-family: "robotocondensed", sans-serif;
  font-size: 4rem;
  font-weight: bold;
  margin-top: 0.5rem; 


}


     .textBulletsQMS{

       margin-left: 52rem;
        font-family: "robotocondensed", sans-serif;
        font-size: 2.8rem;
        margin-bottom: 2rem;  
     }


#train{

float: right;


}

#training{


    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    background-image: url(images/Training.png);
    background-position: center;
    background-size: cover;
    margin-top: 5rem;
      



}

.valueAdd{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  margin-top: 2rem;

}

#valueAdd{
width: 587px;
height: 342px;
margin-right: 5rem;
margin-left: 5rem;


}

.verified{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;
  margin-bottom: 2rem;
  
  }
  
  #verified{
  
    width: 72px;
    height: 77px;
    margin-right: 3rem;
    margin-left: 3rem;
  }


/* Below are the accordian styles  */



.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 1rem;
    border: none;
    text-align: left;
    outline: none;
    font-family: "robotocondensed";
    font-size: 2rem;
    transition: 0.4s;
   
}
 
.accordianImage{
  display: flex;
  justify-content: center;
}

  
  .active, .accordion:hover {
    background-color: #ccc; 
  }
  
  .accordion:after {
    content: '\002B';
    font-size: 2rem;
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 2.5rem;

  }
  
  .active:after {
    content: "\2212";
  }
  
.accordianHeader{

font-family: "robotocondensed";
font-size: 2rem;
font-weight: bold;

}

.accordianText{

    font-family: "robotocondensed";
    font-size: 1.5rem;

}

.accordianText2{

    font-family: "robotocondensed";
    font-size: 2rem;
    font-weight: 200;
    width: auto;
    margin-left: 3rem;


}



.accordianUL{

    font-family: "robotocondensed";
    font-size: 1.5rem;
    margin-left: 5rem;

}


  .panel {
    padding: 0 5px;
    display: none;
    background-color: white;
    overflow: hidden;
   
    
  }

  .accordianText3{

    font-family: "robotocondensed";
    font-size: 2rem;
    font-weight: 200;
    text-align: justify;

}

.accordianText4{

  font-family: "robotocondensed";
  font-size: 2rem;
  font-weight: bold;
  color: skyblue;

}

.accordianText5{

  font-family: "robotocondensed";
  font-size: 2.5rem;
  font-weight: bold;
  color: black;
  margin-left: 1.5rem;

}

.accordianText6{

  font-family: "robotocondensed";
  font-size: 3rem;
  font-weight: bold;
  color: black;

}

.accordianBullets1{

  font-family: "robotocondensed";
  font-size: 2rem;
  font-weight: 200;
  margin-left: 5rem;

}

.accordianBullets2{

  font-family: "robotocondensed";
  font-size: 1.8rem;
  font-weight: 200;
  margin-left: 2rem;

}

.accordianBullets3{

  font-family: "robotocondensed";
  font-size: 1.6rem;
  font-weight: 200;
  margin-left: 2rem;

}

.accordianBullets4{

  font-family: "robotocondensed";
  font-size: 2rem;
  font-weight: bold;
  color: skyblue;
  margin-left: 3rem;

}

.accordianBullets5{

  font-family: "robotocondensed";
  font-size: 1.8rem;
  font-weight: bold;
  color: skyblue;
  margin-left: 2rem;

}



/* Nested accordion CSS */

.nestedaccordion{
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: column;

  
 }

.accordion2{
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 1rem;
  border: none;
  text-align: left;
  outline: none;
  font-family: "robotocondensed";
  font-size: 1.8rem;
  transition: 0.4s;
  width: 100%
 
}

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

.accordion2:after {
  content: '\002B';
  font-size: 2rem;
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 2.5rem;

}

.active:after {
  content: "\2212";
}




.panel2 {
  padding: 0 5px;
  display: none;
  background-color: white;
  overflow: hidden;
 
  
}

/* Contact form CSS*/

.form{

display: flex;

align-items: center;
justify-content: center;


}


  .contact-form {
    display: flex;
    flex-direction: column;
    width: 80%;
    max-width: 70rem;
    height: auto;
    margin: auto;
    background-color: #99ccff;
}
.form_input {
   
    width: 90%;
    margin: 1rem auto 0 auto;
}
.form_text {
  width: 90%;
  margin: 1rem auto 0 auto;
  height: 30rem;
}
.submit_button {
  width: 20%;
  margin: 1rem auto 1rem auto;
    font-family: "robotocondensed";
    font-style: bold;
    font-weight: 200;
    font-size: 2rem;
    height: 3rem;
}




  /* Below are the fonts used  */

  @font-face{
font-family: "montserat";
src:url(fonts/montserrat-v25-latin-500.woff) format('woff');
src: url(fonts/montserrat-v25-latin-500.woff2) format('woff');
src: url(fonts/montserrat-v25-latin-600.woff) format('woff');
src: url(fonts/montserrat-v25-latin-600.woff2) format('woff');
src: url(fonts/montserrat-v25-latin-700.woff) format('woff');
src: url(fonts/montserrat-v25-latin-700.woff2) format('woff');
src: url(fonts/montserrat-v25-latin-800.woff) format('woff');
src: url(fonts/montserrat-v25-latin-800.woff2) format('woff');
src: url(fonts/montserrat-v25-latin-900.woff) format('woff');
src: url(fonts/montserrat-v25-latin-900.woff2) format('woff');
src: url(fonts/montserrat-v25-latin-regular.woff) format('woff');
src: url(fonts/montserrat-v25-latin-regular.woff2) format('woff');
  }

  @font-face{
font-family: "robotocondensed";
src: url(fonts/RobotoCondensed-Bold.ttf) format('truetype');
src: url(fonts/RobotoCondensed-BoldItalic.ttf) format('truetype');
src: url(fonts/RobotoCondensed-Italic.ttf) format('truetype');
src: url(fonts/RobotoCondensed-Light.ttf) format('truetype');
src: url(fonts/RobotoCondensed-LightItalic.ttf) format('truetype');
src: url(fonts/RobotoCondensed-Regular.ttf) format('truetype');
  }

  @font-face {
    font-family: "roboto";
    src: url(fonts/Roboto-Black.ttf) format('truetype');
    src: url(fonts/Roboto-BlackItalic.ttf)format('truetype');
    src: url(fonts/Roboto-Bold.ttf)format('truetype');
    src: url(fonts/Roboto-BoldItalic.ttf)format('truetype');
    src: url(fonts/Roboto-Italic.ttf)format('truetype');
    src: url(fonts/Roboto-Light.ttf)format('truetype');
    src: url(fonts/Roboto-LightItalic.ttf)format('truetype');
    src: url(fonts/Roboto-Medium.ttf)format('truetype');
    src: url(fonts/Roboto-MediumItalic.ttf)format('truetype');
    src: url(fonts/Roboto-Regular.ttf)format('truetype');
    src: url(fonts/Roboto-Thin.ttf)format('truetype');
    src: url(fonts/Roboto-ThinItalic.ttf)format('truetype');
  }