.wrapper{
  max-width:2000px;
  margin:0 auto;
}

.material-icons{
  user-select: none;
}

#footer1{
  background-color: white;
}

header
{
font-size:1em;
background-color:white;
color:grey;
text-align:left;
padding:1em 1em 0.8em 1em;
font-family: "Roboto", "Helvetica Neue", sans-serif;
}


footer
{
font-size:clamp(8px, 1vw, 0.83em);
background-color:white;
color:grey;
text-align:center;
padding:1em;
font-family: "Roboto", "Helvetica Neue", sans-serif;
}


html {
  scroll-behavior: smooth;
  height:100%;
 }


body
{
margin:0;
padding:0;
overflow-x: hidden;
height:100%;
box-sizing: border-box;
font-family: "Roboto", "Helvetica Neue", sans-serif;
}


nav
{
overflow:visible;
background-color:white;
display: flex;
list-style: none;
margin: 0;
padding: 0;
justify-content: center;
font-size: 14px;
} 


nav a {
  color:black;
  text-decoration: none;
  padding:36px 16px 0px 16px;
}


.icon
{
display:none;
}


.topnav a:hover
{
background-color:white;
color:#003087;
cursor:pointer;
}

.logo{
  cursor: pointer;
}

.topnav a.active {
  color: #003087;
  text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 8px;
cursor: pointer;
}



@keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
   }
  100% {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   }
  }
  
  @keyframes fadeInRight {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
   }
  100% {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
  }  

  .reveal-section1 {
    -webkit-animation: fadeInLeft 1s ease forwards;
    -moz-animation: fadeInLeft 1s ease forwards;
    animation: fadeInLeft 1s ease forwards;
  }

  .reveal-section2{
    -webkit-animation: fadeInRight 1s ease forwards;
    -moz-animation: fadeInRight 1s ease forwards;
    animation: fadeInRight 1s ease forwards;
  }
 
@media screen and (max-width: 1000px) {

.topnav 
{
padding-left: 20px;
overflow:hidden;
}

.topnav a
{
display:none;
}

.icon {
float:right;
display:block;
font-size:40px;
position: absolute;
top: 12px;
right: 15px;
text-decoration:none;
color:black;
}

.topnav.responsive 
{
position: relative;
display:block;
width:100%;
}


.topnav.responsive a 
{
float: none;
display: block;
text-align: left;
padding: 15px 15px 15px 1px;
}

.logo
{
 padding-bottom:1em; 
}

header,footer
{
text-align:center;
padding:1em;
}
/*
header{
  height:50px;
  background-color: white;
}*/
}

.heading
{
 text-transform:uppercase;
 color:#003087;
 position:relative;
 padding:0 0 0 8%;
}
   
.home{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0);
  background-blend-mode: overlay;
  -webkit-transition: background-image 1s ease-in-out;
  -moz-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
  background-position: 0 0;
}

.content {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 animation-name: fadeInHome;
 animation-duration: 1s;
 -webkit-animation-name: fadeInHome;
 -webkit-animation-duration: 1s;
 -moz-animation-name: fadeInHome;
 -moz-animation-duration: 1s;
 width: max-content;
 text-transform: capitalize;
 color:white;
 text-align: center;
 padding:0 20px 0 20px;
 background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);  
}

 .content h1{
  text-transform:uppercase;
  text-shadow: 0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  0 6px 1px rgba(0,0,0,.1),
  0 0 5px rgba(0,0,0,.1),
  0 1px 3px rgba(0,0,0,.3),
  0 3px 5px rgba(0,0,0,.2),
  0 5px 10px rgba(0,0,0,.25),
  0 10px 10px rgba(0,0,0,.2),
  0 20px 20px rgba(0,0,0,.15);
  }


@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min--moz-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (min-device-pixel-ratio: 2), 
       only screen and (min-resolution: 192dpi), 
       only screen and (min-resolution: 2dppx) {
        .content h1{
          text-shadow: 0 0 0 #ccc,
          0 1px 0 #c9c9c9,
          0 1px 0 #bbb,
          0 2px 0 #b9b9b9,
          0 3px 0 #aaa,
          0 4px 0 rgba(0,0,0,.1),
          0 0 2px rgba(0,0,0,.1),
          0 0 1px rgba(0,0,0,.3),
          0 1px 2px rgba(0,0,0,.2),
          0 1px 2px rgba(0,0,0,.25),
          0 2px 2px rgba(0,0,0,.2),
          0 5px 5px rgba(0,0,0,.15);
        }
       }

 .content h2{
  text-transform:uppercase;
 }


 @keyframes fadeInHome{
 0% {
  opacity: 0;
  -webkit-transform: translate3d(-50%, -100%, 0);
  -moz-transform: translate3d(-50%, -100%, 0);
  transform: translate3d(-50%, -100%, 0);
}
100% {
  opacity: 80%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
}

.section1-container, .section3-container{
display:flex;
background:#f5f5f5;
}


.section2-container{
display:flex;
background:#f5f5f5;
flex-direction: row-reverse;
}


.abt-section
{
position:relative;
text-align:justify;
padding:0 8%;
}

.img1
{
padding:3% 1% 2% 8%;
position:relative;
text-align: center;
}

.img1 h2, .img2 h2, .img3 h2
{
text-transform:uppercase;
color:#003087;
font-size:clamp(18px, 2vw, 1.5em);
}

.img1 h3, .img2 h3, .img3 h3{
font-size:clamp(14.04px, 2vw, 1.17em);
}

.image{
  height:auto;
  max-width: 350px;
  width:clamp(200px, 80vmin, 350px);
}

.section1-desc
{
position:relative;
text-align:justify;
padding: 3% 8%;
}

.img2
{
position:relative;
text-align: center;
margin: 3% 8% 3% 0;
}


.section2-desc
{
position:relative;
text-align:justify;
margin:8% 8%;
}

.img3
{
position:relative;
text-align: center;
margin:3% 0 3% 8%;
}

.section3-desc
{
position:relative;
text-align:justify;
margin:8% 8%;

}



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

.section1-container, .section2-container, .section3-container
{
display:flex;
flex-direction: column;
}

.heading {
  text-transform: uppercase;
  color: #003087;
  position: relative;
  left: 0;
  padding: 0 0 0 7%;
}
 
.abt-section
{
position:relative;
text-align:justify;
padding: 0 7%;
left: 0;
}

.img1
{
padding:6% 1% 0 1%;
position:relative;
}


.section1-desc
{
position:relative;
text-align:justify;
padding:3% 7%;
margin:0;
}

.img2
{
padding:6% 1% 0 1%;
left:0;
position:relative;
margin:0;
}


.section2-desc
{
position:relative;
text-align:justify;
padding:3% 7%;
right:0px;
margin:0;
}


.img3
{
padding:6% 1% 0 1%;
position:relative;
margin:0;
}


.section3-desc
{
position:relative;
text-align:justify;
padding: 3% 7%;
top:0;
margin:0;

}

}

@media screen and (min-width:200px) and (max-width:280px) {
  body{
    font-size:0.85em;
  }
  
}
     
  
.photoHeader{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  justify-content: center;
  transition: background-image 3s linear;
  -moz-transition: background-image 3s linear;
  -webkit-transition: background-image 3s linear;
 }


  .slideshow-container1 img, .slideshow-container2 img, .slideshow-container4 img, .slideshow-container5 img {   
   object-fit: cover;
   width:100%;
   height:100%;
   animation: slidingImage 25s infinite linear 1s;
   -webkit-animation: slidingImage 25s infinite linear 1s;
   -moz-animation: slidingImage 25s infinite linear 1s;
  }
  
  .slideshow-container6 {
    animation: slideImage 25s infinite linear 1s;
    -webkit-animation: slideImage 25s infinite linear 1s;
    -moz-animation: slideImage 25s infinite linear 1s;
    transition: background-image 0.5s linear;
    -webkit-transition: background-image 0.5s linear;
    -moz-transition: background-image 0.5s linear;
   }

   .slideshow-container3 {
    animation: slideImage 25s infinite linear 1s;
    -webkit-animation: slideImage 25s infinite linear 1s;
    -moz-animation: slideImage 25s infinite linear 1s;
   }

   @keyframes slideImage {
    0%, 100% {
      background-position: 0% 0%;
    }
       
    50% {
      background-position: 100% 0%;
    }

   }


  @keyframes slidingImage{
   0% , 100% {
     object-position: 0% 0%;
   }
      
   50% {
     object-position: 100% 0%;
   }
}

@-webkit-keyframes slidingImage{
  0% , 100% {
    object-position: 0% 0%;
  }

  50% {
    object-position: 100% 0%;
  }
}

@keyframes slidingImageMobile{
  0% , 100% {
    object-position: 35% 0%;
  }
     
  50% {
    object-position: 75% 0%;
  }
}


@media screen and (max-width:1000px) {
  
  .slideshow-container1 img, .slideshow-container2 img, .slideshow-container4 img {  

    animation: slidingImage 60s infinite linear 1s;
    -webkit-animation: slidingImage 60s infinite linear 1s;
    -moz-animation: slidingImage 60s infinite linear 1s;
   }

  .slideshow-container6 {
    animation: slideImage 60s infinite linear 1s;
    -webkit-animation: slideImage 60s infinite linear 1s;
    -moz-animation: slideImage 60s infinite linear 1s;
    transition: background-image 0.5s linear;
    -webkit-transition: background-image 0.5s linear;
    -moz-transition: background-image 0.5s linear;
   }

   .slideshow-container3 {
    animation: slideImage 60s infinite linear 1s;
    -webkit-animation: slideImage 60s infinite linear 1s;
    -moz-animation: slideImage 60s infinite linear 1s;
   }

   .slideshow-container5 img { 
    animation: slidingImageMobile 60s infinite linear 1s;
    -webkit-animation: slidingImageMobile 60s infinite linear 1s;
    -moz-animation: slidingImageMobile 60s infinite linear 1s;
  }

}


@media screen and (min-width:1700px) and (max-width:1849px) {
  
  .slideshow-container1 img, .slideshow-container2 img, .slideshow-container4 img, .slideshow-container5 img {   

    animation: slidingImage 15s infinite linear 1s;
    -webkit-animation: slidingImage 15s infinite linear 1s;
    -moz-animation: slidingImage 15s infinite linear 1s;
   }

   .slideshow-container6 {
    animation: slideImage 15s infinite linear 1s;
    -webkit-animation: slideImage 15s infinite linear 1s;
    -moz-animation: slideImage 15s infinite linear 1s;
    transition: background-image 0.5s linear;
    -webkit-transition: background-image 0.5s linear;
    -moz-transition: background-image 0.5s linear;
   }

   .slideshow-container3 {
    animation: slideImage 15s infinite linear 1s;
   -webkit-animation: slideImage 15s infinite linear 1s;
   -moz-animation: slideImage 15s infinite linear 1s;
   }

}

@media screen and (min-width:1850px) and (max-width:1930px) {
  
  .slideshow-container1 img, .slideshow-container2 img, .slideshow-container4 img, .slideshow-container5 img {   
    animation: slidingImage 8s infinite linear 1s;
    -webkit-animation: slidingImage 8s infinite linear 1s;
    -moz-animation: slidingImage 8s infinite linear 1s;
   }

   .slideshow-container6 {
    animation: slideImage 8s infinite linear 1s;
    -webkit-animation: slideImage 8s infinite linear 1s;
    -moz-animation: slideImage 8s infinite linear 1s;
    transition: background-image 0.5s linear;
    -webkit-transition: background-image 0.5s linear;
    -moz-transition: background-image 0.5s linear;
   }

   .slideshow-container3 {
    animation: slideImage 8s infinite linear 1s;
    -webkit-animation: slideImage 8s infinite linear 1s;
    -moz-animation: slideImage 8s infinite linear 1s;   
  }

}


@media screen and (min-width:1931px) and (max-width:2000px) {
  
  .slideshow-container1 img, .slideshow-container2 img, .slideshow-container4 img, .slideshow-container5 img {   

    animation: slidingImage 5s infinite linear 1s;
    -webkit-animation: slidingImage 5s infinite linear 1s;
    -moz-animation: slidingImage 5s infinite linear 1s;   
  }

   .slideshow-container6 {
    animation: slideImage 5s infinite linear 1s;
    -webkit-animation: slideImage 5s infinite linear 1s;
    -moz-animation: slideImage 5s infinite linear 1s;
    transition: background-image 0.5s linear;
    -webkit-transition: background-image 0.5s linear;
    -moz-transition: background-image 0.5s linear;
   }

   .slideshow-container3 {
    animation: slideImage 5s infinite linear 1s;
    -webkit-animation: slideImage 5s infinite linear 1s;
    -moz-animation: slideImage 5s infinite linear 1s;
   }

}

.fade 
{
  animation-name: fade;
  animation-duration: 1.5s;
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  -moz-animation-name: fade;
  -moz-animation-duration: 1.5s; 
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@-webkit-keyframes fade 
{
  from {opacity: .4} 
  to {opacity: 1}
}

@-moz-keyframes fade 
{
  from {opacity: .4} 
  to {opacity: 1}
}



.slideContainer1, .slideContainer3, .slideContainer5, .slideContainer7, .slideContainer9, .slideContainer11
{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    column-gap: 7%;
    background-color: #f5f5f5;
    padding: 2%;
    margin: 1% 8%;
}

.slideContainer2, .slideContainer4, .slideContainer6, .slideContainer8, .slideContainer10, .slideContainer12
{
  display: flex;
  justify-content: flex-end;
  column-gap: 7%;
  background-color: #f5f5f5;
  padding: 2%;
  margin: 1% 8%;
}

.projects1, .projects2, .projects3, .projects4, .projects5, .projects6, .projects7, .projects8, .projects9, .projects10, .projects11, .projects12, .proj1, .proj2
{
  line-height: 1.8;
}

.projects1 h2, .projects2 h2, .projects3 h2, .projects4 h2, .projects5 h2, .projects6 h2, .projects7 h2, .projects8 h2, .projects9 h2, .projects10 h2, .projects11 h2, .projects12 h2, .proj1 h2, .proj2 h2 {
  font-size: clamp(18px, 2vw, 1.5em);
  text-align: left;
}

.projects1 ul li, .projects2 ul li, .projects3 ul li, .projects4 ul li, .projects5 ul li, .projects6 ul li, .projects7 ul li, .projects8 ul li, .projects9 ul li, .projects10 ul li, .projects11 ul li, .projects12 ul li, .proj1 ul li, .proj2 ul li
{
  font-size: clamp(12px, 1vw, 1em);
}



li::marker{
  text-indent: 10px !important;
}

.projects9 {
  display:flex;
  flex-direction: column;
}

.proj-1{
  display: flex;
  flex-direction: column;
}

.slideContainer1 img, .slideContainer2 img, .slideContainer3 img, .slideContainer4 img, .slideContainer5 img, .slideContainer6 img, .slideContainer7 img, .slideContainer8 img, .slideContainer9 img, .slideContainer10 img, .slideContainer11 img, .slideContainer12 img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  max-width: 600px;
  max-height: 400px;
}

ul
{
  list-style-type:circle;
  list-style-position: inside;
}


@media screen and (max-width: 1200px) {
  .slideContainer1,.slideContainer2,.slideContainer3,.slideContainer4,.slideContainer5,.slideContainer6,.slideContainer7,.slideContainer8,.slideContainer9,.slideContainer10,.slideContainer11,.slideContainer12 {
    flex-direction: column-reverse;
    align-content: center;
    align-items: start;
    gap:0;
    margin:0;
    flex-wrap: wrap;
    background-color: #f5f5f5;
    padding: 5% 0;
    margin: 0 0 5% 0;
  }
  

.slideContainer1 img, .slideContainer2 img, .slideContainer3 img, .slideContainer4 img, .slideContainer5 img, .slideContainer6 img, .slideContainer7 img, .slideContainer8 img, .slideContainer9 img, .slideContainer10 img, .slideContainer11 img, .slideContainer12 img {
 max-width:90%;
 max-height:auto;
 margin:0 auto;
}

}

@media screen and (max-width: 500px) {
  .projects1, .projects2, .projects3, .projects4, .projects5, .projects6, .projects7, .projects8, .projects9, .projects10, .projects11, .projects12, .proj1, .proj2
  {
    max-width: 300px;
  }
}

.projects-description{
  padding:0 8%;
  text-align: justify;
  font-size:clamp(12px, 1vw, 1rem);
}


 .grid{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
    margin:0 7.5%;
    place-items: center;
    grid-gap:3em;
 }
 
 .hidden{
  opacity:0;
  transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
 }

 .revealed {
  opacity:1;
 }


.flip-card-left, .flip-card-left1, .flip-card-left2, .flip-card-left3, .flip-card-left4, .flip-card-left5  {
  margin: 0 auto;
  height:40em;
  width:32em;
  position: relative;
  border-radius:15px 80px;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transform-style: preserve-3d;
  box-shadow: 1px 3px 3px rgba(0,0,0,0.2);
  margin: 7.5%;
}

.flip1 {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  border-radius:80px 15px;
  background-color: transparent;
}

.flip-card-contents-left {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.flip-card-contents-left .caption, .flip-card-contents-left h3{
  color:white;
  font-weight:bold;
  text-transform: uppercase;
  margin:5%;
}
.flip-card-depth-left {
   transform: translateZ(100px) scale(0.98);
   -webkit-transform: translateZ(100px) scale(0.98);
   -moz-transform: translateZ(100px) scale(0.98);
   perspective: inherit;
   backface-visibility: hidden;
}

.flip-card-front-left {
  background: linear-gradient(rgba(0,48,135,1), rgba(0,48,135,0.5));        
  transform-style: preserve-3d;
  border-radius:15px 80px;
  color:white;
}

.flip-card-back-left {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  background: #003087;
  transform-style: preserve-3d;
  border-radius:15px 80px;
  color:white;
  background: linear-gradient(to top, rgba(0,48,135,1), rgba(0,48,135,0.5));    
}



.flip-card-right, .flip-card-right1, .flip-card-right2, .flip-card-right3, .flip-card-right4, .flip-card-right5 {
  margin: 0 auto;
  height:40em;
  width:32em;
  position: relative;
  border-radius:80px 15px;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transform-style: preserve-3d;
  box-shadow: 1px 3px 3px rgba(0,0,0,0.2);
  margin: 7.5%;
}

.flip2{
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  border-radius:15px 80px;
  background-color: transparent;
}

.flip-card-contents-right {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.flip-card-contents-right .caption, .flip-card-contents-right h3{
  color:white;
  font-weight:bold;
  text-transform: uppercase;
}

.flip-card-depth-right {
   transform: translateZ(100px) scale(0.98);
   -webkit-transform: translateZ(100px) scale(0.98);
   -moz-transform: translateZ(100px) scale(0.98);
   perspective: inherit;
   backface-visibility: hidden;
}

.flip-card-front-right {
  background: linear-gradient(rgba(0,48,135,1), rgba(0,48,135,0.5));        
  transform-style: preserve-3d;
  border-radius:80px 15px;
  color:white;
}

.flip-card-back-right {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  background: #003087;
  transform-style: preserve-3d;
  border-radius:80px 15px;
  color:white;
  background: linear-gradient(to top, rgba(0,48,135,1), rgba(0,48,135,0.5));    
}
 

@media screen and (max-width: 600px){
  .flip-card-left, .flip-card-left1, .flip-card-left2, .flip-card-left3, .flip-card-left4, .flip-card-left5  {
    margin: 0 auto;
    height:30em;
    width:100%;
    max-width: 100%;
  }

  .flip-card-right, .flip-card-right1, .flip-card-right2, .flip-card-right3, .flip-card-right4, .flip-card-right5 {
    margin: 0 auto;
    height:30em;
    width:100%;
    max-width: 100%;
  }

  .custom-image{
    width:95%;
  }
  
  .grid{
    display: grid; 
   grid-auto-flow: row;
   grid-template-columns: 1fr;
   justify-content: center;
   margin: 0 7.5%;
  }

  .flip-card-depth-left p, .flip-card-depth-right p{
    font-size:12px;
   }
   
   .flip-card-contents-left h3, .flip-card-contents-right h3{
     margin:5% 10%;
     font-size: 16px;
   }
}



#scroll-left, #scroll-left2 {
  z-index:10;
  cursor:pointer;
  position:relative;
  color:#003087;
  background-color:white;
  border-radius:50%;
  padding:0;
  font-size: 2em;
  right:-1%;
  font-weight:900;
  top:0;
}

#scroll-right, #scroll-right2 {
  z-index:10;
  cursor:pointer;
  position:relative;
  color:#003087;
  background-color:white;
  border-radius:50%;
  padding:0;
  font-size:2em;
  left:-1%;
  font-weight:900;
  top:0;
}

#scroll-left1 {
  font-size: 2em;
  right:-1%;
  z-index:10;
  cursor:pointer;
  position:relative;
  color:white;
  background-color:rgba(0,48,135,1);
  border-radius:50%;
  padding: 0;
  top:0;
}

#scroll-right1 {
  font-size:2em;
  left:-1%;
  z-index:10;
  cursor:pointer;
  position:relative;
  color:white;
  background-color:rgba(0,48,135,1);
  border-radius:50%;
  padding:0;
  top:0;
}


#title, #title2{
  color:#003087;
  text-align: center;
  width:100%; 
  scroll-margin-top:20px;
  font-size:clamp(18px, 2vw, 1.5em);

}

#title1{
  color:white;
  text-align: center;
  width: 100%;
  scroll-margin-top:20px;
  font-size:clamp(18px, 2vw, 1.5em);
}

.name{
  color:white;
}

.sliderContainer, .sliderContainer1,.sliderContainer2{
  height:100%;
  position: relative;
 
}

.productSlider1{
  margin:0;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index:5;
  position: relative;
}

.productSlider2{
  margin:0;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index:5;
  position: relative;
}

.productSlider3{
  margin:0;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index:5;
  position: relative;
}



.details, .details1,.details2{
  display:grid;
  align-items: center;
  grid-auto-flow: column;
  justify-items: center;
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    align-items: center;
    margin: 2% 7.5%;
    grid-gap:1em;
  }
  
  .description {
    padding:20px 40px;
    background: rgba(255, 255, 255, 0.5);
    color: #003087;
    height:fit-content ;
    font-size:clamp(12px, 1vw, 1rem)
  }


  .detail-view, .detail-view1, .detail-view2 {
    display:none;
  }



  
  
  @keyframes slideshow-fade {
    from {opacity: .5} 
    to {opacity: 1}
  }
 
  .cursor {
    cursor: pointer;
  }
  

  .thumbnail, .thumbnail1, .thumbnail2{
    opacity: 0.8;
  }

  .active-content, .thumbnail:hover, .thumbnail1:hover, .thumbnail2:hover {
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    opacity:1;
  }


  ul.ImagesScroll,ul.ImagesScroll1, ul.ImagesScroll2  {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    text-align: center;
    z-index: 5;
    
  }
  ul.ImagesScroll li, ul.ImagesScroll1 li, ul.ImagesScroll2 li{
    display: inline-grid;
     width: 150px;
    height: 150px;
    column-gap: 20px;
    column-gap:1em;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    cursor:pointer;
  
   
  }


 .ImagesScroll::-webkit-scrollbar,.ImagesScroll1::-webkit-scrollbar, .ImagesScroll2::-webkit-scrollbar {
  width: 10px; 
  height: 10px;
 
}

.ImagesScroll::-webkit-scrollbar-thumb, .ImagesScroll2::-webkit-scrollbar-thumb {
  background-color:#ddd;
  border-radius: 10px; 
}

.ImagesScroll1::-webkit-scrollbar-thumb{
  background-color:#003087;
  border-radius: 10px;
}

.ImagesScroll::-webkit-scrollbar-track-piece, .ImagesScroll2::-webkit-scrollbar-track-piece {
  background-color: darkblue;
   border-radius: 10px;
   margin:0 2%
}

.ImagesScroll1::-webkit-scrollbar-track-piece{
  background-color: #ddd;
  border-radius: 10px;
  margin:0 2%
}

.row1{
  display: flex;
    margin-top: 0px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}

.scroll {
  display: flex;
  margin-top: 0px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  overflow-x: auto;
  width: 1500px;
}

.panel img, .panel1 img, .panel2 img {
  max-width: 100%;
}

.panel, .panel2 {
  filter: drop-shadow(0px 15px 10px grey);
  grid-column: 1;
}


.panel1 {
  filter: drop-shadow(0px 15px 10px grey);
}

.panel, .panel1, .panel2{
  animation-name: slideshow-fade;
    animation-duration: 2s;
    transition:animation 5s ease;
}


.scroll::-webkit-scrollbar {
  -webkit-appearance: none;
}


.categoryName{
color:white;
background-color: #023799;
padding: 1% 1% 1% 8%;
text-transform:uppercase;
margin:0px;
font-size:clamp(24px, 2vw, 2em);
}


.thumbnail.active-name{
  color: #003087;
  text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 8px;
cursor: pointer;
}

.thumbnailTitle, .thumbnailTitle2{
  color: white;
  font-size:clamp(9.96px, 1vw, 0.83em);
}

.thumbnailTitle1{
  color:#003087;
  font-size:clamp(9.96px, 1vw, 0.83em);
}

.thumbnailTitle.active, .thumbnailTitle1.active,.thumbnailTitle2.active{
  color:rgb(0, 174, 255);
}

.canvasArea1{
  background:linear-gradient(transparent,rgba(0,48,135,1)); 
  background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
  width: 100%;
  height:100%;
  margin:0;
  padding:0;
  
 
}

.canvasArea2{
  background:linear-gradient(to top, rgba(0,48,135,0.1),rgba(0,48,135,1)); 
  background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
  width: 100%;
  height:100%;
  margin:0;
  padding:0;
  
 
}

.backgroundAnimation1{
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
  height: 100%;
  overflow: hidden;
  z-index: -2;
}

.backgroundAnimation1 li{
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.5);
  animation: animate1 25s linear infinite;
  -webkit-animation: animate1 25s linear infinite;
  -moz-animation: animate1 25s linear infinite;
  bottom: -150px;
  
}

.backgroundAnimation1 li:nth-child(1){
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
}


.backgroundAnimation1 li:nth-child(2){
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
  -webkit-animation-delay: 2s;
  -webkit-animation-duration: 12s;
  -moz-animation-delay: 2s;
  -moz-animation-duration: 12s;
  
}

.backgroundAnimation1 li:nth-child(3){
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
}

.backgroundAnimation1 li:nth-child(4){
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 18s;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 18s;
}

.backgroundAnimation1 li:nth-child(5){
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
}

.backgroundAnimation1 li:nth-child(6){
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
}

.backgroundAnimation1 li:nth-child(7){
  left: 35%;
  width: 150px;
  height: 150px;
}

.backgroundAnimation1 li:nth-child(8){
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
  -webkit-animation-delay: 15s;
  -webkit-animation-duration: 45s;
  -moz-animation-delay: 15s;
  -moz-animation-duration: 45s;
}

.backgroundAnimation1 li:nth-child(9){
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
  -webkit-animation-delay: 2s;
  -webkit-animation-duration: 35s;
  -moz-animation-delay: 2s;
  -moz-animation-duration: 35s;
}

.backgroundAnimation1 li:nth-child(10){
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 11s;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 11s;
}

.backgroundAnimation1 li:nth-child(11){
  right:95%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 11s;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 11s;
}


@keyframes animate1 {

  100%{
      transform: translateY(0) rotate(0deg);
      -webkit-transform: translateY(0) rotate(0deg);
      -moz-transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 0;
  }

  0%{
      transform: translateY(-1000px) rotate(500deg);
      -webkit-transform: translateY(-1000px) rotate(500deg);
      -moz-transform: translateY(-1000px) rotate(500deg);
      opacity: 0;
      border-radius: 50%;
  }

}

.canvasArea3{
  background:linear-gradient(rgba(0,48,135,0.1),rgba(0,48,135,1)); 
  background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
  width: 100%;
  height:100%;
  margin:0;
  padding:0;
  
 
}

.backgroundAnimation{
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
  height: 100%;
  overflow: hidden;
  z-index: -2;
}

.backgroundAnimation li{
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  animation: animate 25s linear infinite;
  -webkit-animation: animate 25s linear infinite;
  -moz-animation: animate 25s linear infinite;
  bottom: -150px;
  z-index:-2;
  
}

.backgroundAnimation li:nth-child(1){
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
}


.backgroundAnimation li:nth-child(2){
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
  -webkit-animation-delay: 2s;
  -webkit-animation-duration: 12s;
  -moz-animation-delay: 2s;
  -moz-animation-duration: 12s;
}

.backgroundAnimation li:nth-child(3){
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
}

.backgroundAnimation li:nth-child(4){
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 18s;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 18s;
}

.backgroundAnimation li:nth-child(5){
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
}

.backgroundAnimation li:nth-child(6){
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
}

.backgroundAnimation li:nth-child(7){
  left: 35%;
  width: 150px;
  height: 150px;
}

.backgroundAnimation li:nth-child(8){
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
  -webkit-animation-delay: 15s;
  -webkit-animation-duration: 45s;
  -moz-animation-delay: 15s;
  -moz-animation-duration: 45s;
}

.backgroundAnimation li:nth-child(9){
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
  -webkit-animation-delay: 2s;
  -webkit-animation-duration: 35s;
  -moz-animation-delay: 2s;
  -moz-animation-duration: 35s;
}

.backgroundAnimation li:nth-child(10){
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 11s;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 11s;
}

.backgroundAnimation li:nth-child(11){
  right:95%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 11s;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 11s;
}

@keyframes animate {

  0%{
      transform: translateY(0) rotate(0deg);
      -webkit-transform: translateY(0) rotate(0deg);
      -moz-transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 0;
  }

  100%{
      transform: translateY(-1000px) rotate(800deg);
      -webkit-transform: translateY(-1000px) rotate(800deg);
      -moz-transform: translateY(-1000px) rotate(800deg);
      opacity: 0;
      border-radius: 50%;
  }

}

@media screen and (max-width:1200px){
  .details, .details1, .details2 {
    grid-auto-flow: row;
    grid-template-columns:1fr;
  }

  #title, #title1, #title2{
    width:100%;
    padding:0;
    margin:0;
  }
}

@media screen and (max-width:600px){
  
  .details, .details1, .details2 {
    margin-top:7.5%;
  }
}

.description::-webkit-scrollbar {
  width: 5px; 
}


.description::-webkit-scrollbar-thumb {
  background-color:#003087; 
  border-radius: 6px; 
}


.description::-webkit-scrollbar-track-piece {
  background-color: #ddd;
   border-radius: 6px;
}
  

.cert {
  background-color:whitesmoke;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap:10px;
}

#left-arrow, #right-arrow{
  position:relative;
  border-radius:50%;
  cursor:pointer;
  color:white;
  background-color:#003087;
  padding:5px;
  font-size: 24px;
  font-weight:900;
  user-select: none;
  opacity: 1;
  transition: opacity 0.3s;
}

#left-arrow{
 right:-1%;
}

#right-arrow{
 left:-1%;
}

.faded {
  position: relative;
  display: inline-block;
  color: white;
}

.faded::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-collapse: separate;
}

.faded.faded-all {
  box-shadow: inset 20px 0 20px -10px;
}

.faded.faded-all:after {
  box-shadow: inset 20px 0 20px -10px;
}

#iecLogo, #iec-61000-logo, #iec-60529-logo, #evLogo, #asLogo, #ulLogo, #isoLogo, #bsLogo, #gmLogo{
  cursor: pointer;
  user-select: none;
}

.bizsafe-title{
  visibility: hidden !important;
}

.iec-logo-header, .iec-60529-logo-header, .iec-61000-logo-header, .tr-logo-header, .iso-logo-header{
  display:block;
  margin:0 auto;
  filter:drop-shadow(0px 0px 5px white);
  z-index: 3;
  position: relative;
}

.iec-logo-header, .iec-60529-logo-header, .iec-61000-logo-header,.tr-logo-header{
  margin-bottom: 2em;
  scroll-margin-top:2rem;
}

.iec-logo-header{
  margin-top: 2em;
}

.as-logo-header, .ul-logo-header{
  filter:drop-shadow(0px 0px 5px white);
}

.bizsafe-logo-header, .greenmark-logo-header{
  background-color:white;
  box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.5);
}

.iec-title, .iec-61000-title, .iec-60529-title, .tr-title, .as-title, .iso-title, .bizsafe-title, .gm-title {
  color:white;
  text-align: center;
  margin-top:0;
 }

 .gm-title{
  margin-top:20px;
 }

 .brand-title{
  color:white;
  text-align: center;
  z-index: 3;
  position: relative;
  font-size: clamp(18px, 2vw, 1.5em);
 }

 .labs-title{
  color:white;
  text-align:center;
  padding-top:5%;
  z-index: 3;
  position: relative;
  font-size: clamp(18px, 2vw, 1.5em);
 }

 
.iec {
  background-image:url(Images/IEC.jpg);
  width:100%;
  min-height:100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  background-color:rgba(0,0,0,0.75);
  background-blend-mode: overlay;
}


.iec-description,.iec-61000-description, .iec-60529-description, .tr-description, .as-description, .ul-description, .iso-description, .bizsafe-description, .gm-description {
  color:white;
  width:600px;
  text-align:justify;
  margin: 0 auto;
}


.labs {
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}

ul.lab-logos {
  margin: 0;
  white-space: nowrap;
  overflow-x: auto;
  text-align: center;
  gap:1.5em;
  align-items: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul.lab-logos li {
  display: inline-grid;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  cursor: pointer;
}

.lab-logos::-webkit-scrollbar {
  width: 10px; 
  height:10px;
}

.lab-logos::-webkit-scrollbar-thumb {
  background-color:#003087; 
  border-radius: 6px; 
}


.lab-logos::-webkit-scrollbar-track-piece {
  background-color: #ddd;
   border-radius: 6px;
}


ul.cert-logos {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-x: auto;
  text-align: center;
  gap: 2em;
  display: flex;
  background-color:whitesmoke;
  list-style: none;
  align-items: center;
  
}

ul.cert-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cert-logos::-webkit-scrollbar {
  width: 10px; 
  height:10px;
}


.cert-logos::-webkit-scrollbar-thumb {
  background-color:#003087; 
  border-radius: 6px; 
}

.cert-logos::-webkit-scrollbar-track-piece {
  background-color: #ddd;
   border-radius: 6px;
}




.brand {
  background-color:rgba(255,255,255,0.8);
}


ul.brand-logos {
  margin: 0;
  white-space: nowrap;
  overflow-x: auto;
  text-align: center;
  gap: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul.brand-logos li {
  display: inline-grid;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  cursor: pointer;
}

.brand-logos::-webkit-scrollbar {
  width: 10px;
  height:10px;
}


.brand-logos::-webkit-scrollbar-thumb {
  background-color:#003087; 
  border-radius: 6px;
}


.brand-logos::-webkit-scrollbar-track-piece {
  background-color: #ddd;
   border-radius: 6px;
}

.iec-61000 {
  background-image:url(Images/EMC.jpg);
  width:100%;
  min-height:100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin:0;
  background-color:rgba(0,0,0,0.75);
  background-blend-mode: overlay;
 
}

.iec-60529 {
  background-image:url(Images/IEC_60529_bg.jpg);
  width:100%;
  min-height:100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin:0;
  background-color:rgba(0,0,0,0.75);
  background-blend-mode: overlay;
  position:relative;
}

.tr {
  background-image:url(Images/TR25.jpg);
  width:100%;
  min-height:100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin:0;
  background-color:rgba(0,0,0,0.75);
  background-blend-mode: overlay;
}

.asul{
  background-image: url(Images/ASUL.jpg);
  width:100%;
  min-height:100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin:0;
  background-color:rgba(0,0,0,0.75);
  background-blend-mode: overlay;
}


.ul-title {
  color:white;
  text-align:center;
}

.iso{

  background-image: url(Images/ISO.jpg);
  width:100%;
  min-height:100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin:0;
  background-color:rgba(0,0,0,0.75);
  background-blend-mode: overlay;

}

.bizsafe{

  background-image: url(Images/Bizsafe.jpg);
  width:100%;
  min-height:100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin:0;
  background-color:rgba(0,0,0,0.75);
  background-blend-mode: overlay;

}

.gm{

  background-image: url(Images/greenMark.jpg);
  width:100%;
  min-height:100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin:0;
  background-color:rgba(0,0,0,0.75);
  background-blend-mode: overlay;

}


@media screen and (max-width:1200px) {
  .iec-description,.iec-61000-description, .iec-60529-description, .tr-description, .as-description, .ul-description, .iso-description, .bizsafe-description, .gm-description {
width:80%;
}

.iec, .iec-61000, .iec-60529, .tr, .asul, .iso, .gm, .bizsafe{
  background-color:rgba(0,0,0,0.65);
  background-attachment: scroll;
}

.section-title{
  position: absolute; 
}

  
.labs{
  width:100%;
  overflow-x:auto;
}


.brand{
 width:100%;
 overflow-x:auto;
}
}

@media screen and (max-width:500px){
  ul.lab-logos{
    padding-top:1%;
  }

  .iso{
    background-position:right;
  }

}

#job-heading{
  color:#003087;
  font-size:clamp(12px, 2vw, 1em);
}

#job-heading:hover{
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 1px;
  cursor: pointer;

}

.jd p, .jd li {
  text-align: justify;
  line-height:1.8;
  font-size:clamp(12px, 2vw, 1em);
}

.jd h2{
  font-size:clamp(18px, 2vw, 1.5em);
  text-align:center;
}

.jd h3{
  font-size:clamp(14.04px, 2vw, 1.17em);
}

.jd h4 {
  font-size:clamp(12px, 2vw, 1em);
}

.desc {
  background-color: #003087;
  padding: 5%;
  color:white;
  height:fit-content;
}

.desc h2{
  font-size:clamp(18px, 2vw, 1.5em);
  margin:0;
}

.desc p{
  font-size:clamp(12px, 2vw, 1em);
}

.jobPosting h2{
  font-size:clamp(18px, 2vw, 1.5em);
}

.career{
  background-color:#f5f5f5;
  display: grid; 
  grid-auto-flow: column;
  padding:8%;
  grid-gap:5%;
 }
 
.jobPosting{
  grid-row:2;
}

.job-title{
  color:white;
  font-size: 1em;
  margin:0;
  padding:0.5em;
}


.jobPosting-bg{
  width:100%;
  height:auto;

}
 
 #popupModal{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 900;
}

#popupContent{
  margin:5%;
  display: none;
  width:90%;
  max-width:1800px;
  background-color:white;
  height:80%;
  position: fixed;
  z-index: 1000;
  top: 0;
}


.popup-nav{
position: absolute;
left:auto;
right:45.5%;
bottom:auto;
}

#popupContent{  
  -webkit-animation-name: zoomInModal;
  -webkit-animation-duration: 0.6s;
  animation-name: zoomInModal;
  animation-duration: 0.6s;
  -moz-animation-name: zoomInModal;
  -moz-animation-duration: 0.6s;
}

@-webkit-keyframes zoomInModal {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoomInModal {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

@-moz-keyframes zoomInModal {
  from {-moz-transform:scale(0)} 
  to {-moz-transform:scale(1)}
}

.close {
  position: absolute;
  top: 2%;
  right: 2%;
  color: #003087;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.jd {
  width: 60%;
  padding:5%;
  overflow-y: scroll;
  overflow-x: hidden;
  line-height:1.6;
}

.jd::-webkit-scrollbar {
  width: 10px; 
}


.jd::-webkit-scrollbar-thumb {
  background-color:#003087; 
  border-radius: 6px; 
}


.jd::-webkit-scrollbar-track-piece {
  background-color: #ddd;
   border-radius: 6px;
}

#formContainer::-webkit-scrollbar{
  width: 10px;
}

#formContainer::-webkit-scrollbar-thumb{
  background-color:#003087; 
  border-radius: 6px; 
}

#formContainer::-webkit-scrollbar-track-piece{
  background-color: #ddd;
   border-radius: 6px;
}

#result1 {
  margin:2px 0;
  text-align:center;
  word-wrap: break-word;
}

#validationCodeImage1 {
 margin:2px 15px;
 
}

#attachmentError1{
  margin-left:15px;
}

table{
  width:100%;
}


input[type=text], input[type=date] { 
  width: 80%;
  padding:10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 5px 15px;
}

input[type=file] {
  width: 80%;
  border-radius: 4px;
  margin:15px;
}

label {
  padding: 10px 0;
  display: inline-block;
  width:max-content;
  font-size:clamp(12px, 2vw, 1em);
}

.tooltip i.material-icons {
  color:#003087;
  font-size: clamp(18px, 2vw, 1.5em);
}

#sendEmailButton1 {

  background-color: #003087;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top:2%;

}

#sendEmailButton1:hover {background-color:darkblue;}

#formContainer {
  border-radius: 5px;
  padding:0 5%;
  height:100%;
  width:40%;
  overflow-y:scroll;
  overflow-x:hidden;
}

.formTitle1{
  color:#003087;
  text-align: center;
  font-size:clamp(14.04px, 2vw, 1.17em);
}


#arrow-up{
  cursor:pointer;
  position: fixed;
  color: white;
  background-color:#003087;
  padding: 0;
  font-size: 24px;
  font-weight:900;
  height:fit-content;
  width:fit-content;
}

#arrow-down{
  cursor:pointer;
  position: fixed;
  color:white;
  background-color:#003087;
  padding: 0;
  font-size: 24px;
  font-weight:900;
  height:fit-content;
  width:fit-content;
}

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

  .popup-nav{
    position: absolute;
    left:auto;
    right:32px;
    bottom:auto;
  }

    td {
    display: block;
    }

    #validationCodeImage1 {
      margin:2% 0;
     }

    .jobPosting-bg{
      order: -1;
    }


    .career{
      grid-auto-flow: row;
    }

    .jobPosting{
      grid-row:3;
    }
  
    .job-title{
      font-size: 0.5em;
      margin:0;
      padding:0.1em 0;
    }
   
    #attachmentError1{
      margin:0;
    }
  
    #popupModal{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 900;
    }
      
    #popupContent{
      height:70vh;
      overflow:scroll;
      position: fixed;
      z-index: 1000;
      top: 0;
      left:0;
      display: flex;
      flex-direction: column;
      overflow-y: scroll;
      overflow-x: hidden;
      margin: 0;
      display: none;
      width: 80%;
      margin: 5vh 5vw;
      padding:5%;
    }
  
    ul{
      padding: 0;
    }
   
    #popupContent{  
      animation-name: zoomInModal;
      animation-duration: 0.6s;
      -webkit-animation-name: zoomInModal;
      -webkit-animation-duration: 0.6s;
      -moz-animation-name: zoomInModal;
      -moz-animation-duration: 0.6s;
    }
    
    @-webkit-keyframes zoomInModal {
      from {-webkit-transform:scale(0)} 
      to {-webkit-transform:scale(1)}
    }
    
    @keyframes zoomInModal {
      from {transform:scale(0)} 
      to {transform:scale(1)}
    }

    @-moz-keyframes zoomInModal {
      from {transform:scale(0)} 
      to {transform:scale(1)}
    }
      
    .close {
      position: absolute;
      top: 0.5%;
      right: 5%;
      color: #003087;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
    }
      
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }
      
    .jd {
      width: 95%;
      padding: 3%;
      overflow: visible;
    
      }
      
    #popupContent::-webkit-scrollbar {
      width: 10px; 
    }
      

    #popupContent::-webkit-scrollbar-thumb {
      background-color:#003087; 
      border-radius: 6px; 
    }
      
      
   #popupContent::-webkit-scrollbar-track-piece {
     background-color: #ddd;
      border-radius: 6px;
   }
    
   h1.heading{
    font-size:clamp(24px, 2vw, 2em);
   }

  .col-25, .col-75{
    width: 100%;
    margin-top: 0;
    margin-inline: auto;
  }

  input[type=text], input[type=date]{
    margin:0;
    width:88%;
  }

  input[type=file]{
    margin:3% 0 0 0;
  }

  input[type=submit]{
    margin-top:10%;
    width: 100%;
    margin-inline: auto;
  }

  #formContainer {
   height:fit-content;
    overflow:visible;
    margin: 0 auto;
    width: 80%;
  }

  label{
    padding: 5% 0 2% 0;
    display: inline-block;
    width: max-content;
  }
}


@media screen and (max-height:500px) {
  #popupContent{
  height:50vh;
  }
}

.tooltipInfo{
  font-size:clamp(12px, 2vw, 1em);
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltipInfo {
  visibility: hidden;
  width: 10em;
  background-color: midnightblue;
  color:white;
  text-align: center;
  border-radius: 0.5em;
  padding: 0.5em;
  position: absolute;
  z-index: 1;
  top: -4.5em;
  left: -4.9em;
}


.tooltip:hover .tooltipInfo {
  visibility: visible;
}

button#sendEmailButton1:disabled, button#sendEmailButton2:disabled, button#sendEmailButton3:disabled, button#sendEmailButton4:disabled, button#sendEmailButton5:disabled{
  background-color: rgba(0, 48, 135, 0.5);
}

.tooltip .tooltipInfo::after {
  content: " ";
  position: absolute;
  top: 100%; 
  left: 50%;
  margin-left: -0.2em;
  border-width: 0.4em;
  border-style: solid;
  border-color: #003087 transparent transparent transparent;
}

.attachmentContainer{
  display:flex;
  width: max-content;
  align-items: center;
  gap: 1em;
}

@media screen and (min-width:2000px){
  #popupContent{
    margin: 5em 6em;
    display: none;
    width:90%;
    max-width:1800px;
    background-color:white;
    height:80vh;
    position: fixed;
    z-index: 1000;
    top: 0;
  }
}

 
 .address
  {
   position:relative;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   display: flex;
   margin: 0 7.5%;

  }

  .div1{
    width: 100%;
    padding: 5%;
  }

  .div1 h4, .div1 p, .div1 b, .div2 p, .div2 b{
    font-size:clamp(12px, 2vw, 1em);
  }

  .div2{  
     width: 100%;
     padding: 5%;
  }

  #telephone, #companyMail {
    display:flex;
    gap:1em;
    align-items: center;
    text-decoration: none;
    color: black;
    margin:1em 0;
  }

  #phone, #mail{
    display:flex;
    gap:1em;
    align-items: center;
    text-decoration: none;
    color: black;
    justify-content: center;
    margin:1em 0;
  }

  #telephone i, #companyMail i, #phone i, #mail i {
    padding:0; 
    top:0;
    color:black;
  }

  #telephone h4, #phone p{
    margin:0;
  } 

  #companyMail h4, #mail p{
    margin:0;
    color:#0000ee;
    text-decoration:underline;
  }

.card-container
{
margin:0 7.5%;
display:flex;
gap:2em;
flex-wrap:wrap;
justify-content: space-between;
text-align: center;
}


.vl {
border-left:1px solid gainsboro;
padding:5% 0;

}

.card h3 {
  font-size:clamp(14.04px, 2vw, 1.17em);
}

.card p{
   font-size:clamp(12px, 2vw, 1em);
}


.circular-image{
position: relative;
overflow: hidden;
border-radius: 50%;
margin: 0 auto;
width:clamp(100px,35vmin,150px);
height:clamp(100px,35vmin,150px);
}

.circular-image img{
  width: 100%;
  height: auto;
  position: relative;
  margin: 0 auto;
}

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

  .address {
    flex-direction: column;
    margin: 0 7.5%;
    padding: 5%;
 
  }

  .vl {
    display:none
    }

  .div1, .div2{
    padding:1%;
  }
 

}

@media screen and (max-width:600px) {
  .card-container{
    justify-content: center;
  }
}



.iec-description, .iec-60529-description{
  opacity: 1; 
      position: relative;
      z-index: 2;
}


.slider.left-to-right {
  transform: scaleX(-1);
}
.slider.left-to-right .slick-slide {
  transform: scaleX(-1);
}

#iec-61439-logo, #iec-60529-logo, #iec-61000-logo, #tr-logo {
  width:40vw;
  height:auto;
  max-width:230px;
  min-width: 115px;
}

#as-logo, #ul-logo, #greenmark-logo{
  width:20vmin;
  height:auto;
  max-width:100px;
  min-width:50px;
} 

#iso-logo, #bizsafe-logo {
  width:40vw;
  height:auto;
  max-width:200px;
  min-width:100px;
}

.iec-logo-header, .iec-60529-logo-header, .iec-61000-logo-header, .tr-logo-header {
  height:auto;
  max-width:230px;
  width:40vw;
  min-width: 115px;
}

.as-logo-header, .ul-logo-header, .greenmark-logo-header{
  width:20vmin;
  height:auto;
  max-width:100px;
  min-width:50px;
}

.iso-logo-header{
  width:40vw;
  height:auto;
  max-width:200px;
  min-width:100px;
}

.bizsafe-logo-header{
  width:40vw;
  height:auto;
  max-width:150px;
  min-width:75px;
}

.as-title,.ul-title, .gm-title{
  font-size:clamp(18px, 1vw, 1.5em);
}


.iec-description, .iec-60529-description, .iec-61000-description, .tr-description, .iso-description, .as-description, .ul-description, .bizsafe-description, .gm-description{
  font-size:clamp(12px, 1vw, 1em);
}


.abt-section, .section1-desc, .section2-desc, .section3-desc{
  font-size:clamp(12px, 1vw, 1em);
}




@media only screen and (max-width: 768px) and (orientation: landscape) {
  
  .iec-logo-header, .iec-60529-logo-header, .iec-61000-logo-header, .tr-logo-header {
     height:auto;
     max-width:230px;
     width:40vh;
   }

   .iso-logo-header{
    width:40vh;
    height:auto;
    max-width:200px;
  }

  .bizsafe-logo-header{
    width:40vh;
    height:auto;
    max-width:150px;
  }

  .as-logo-header, .ul-logo-header, .greenmark-logo-header{
    width:20vh;
    height:auto;
    max-width:100px;
  }


  #iec-61439-logo, #iec-60529-logo, #iec-61000-logo, #tr-logo {
    width:40vh;
    height:auto;
    max-width:230px;
  }
  
  #as-logo, #ul-logo, #greenmark-logo{
    width:20vh;
    height:auto;
    max-width:100px;
  } 
  
  #iso-logo, #bizsafe-logo {
    width:40vh;
    height:auto;
    max-width:200px;
  }
}


.section-title{
  font-size:clamp(150px, 10vw, 200px);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial;
  font-weight: 900;
  color: rgba(0,0,0,0.5);
  color: #00BCD4;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  mix-blend-mode: soft-light;
}

.hamburger {
  width: 30px;
  height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1102;
  position: relative;
  float:right;
  padding:10px;
}

.hamburger div {
  height: 4px;
  background: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger.active div:nth-child(1) {
  transform: rotate(45deg) translate(7.5px, 7.5px);
}

.hamburger.active div:nth-child(2) {
  opacity: 0;
}

.hamburger.active div:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

@media (min-width: 1000px) {
  .hamburger {
    display: none;
  }
}


.scroll-to-top {
  position: fixed;
  bottom: 1%;
  right: 1%;
  width: 80px;
  height: 100px;
  text-align: center;
  z-index: 1000;
  cursor: pointer;
  user-select: none;
}

.circle-container {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}

.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.progress-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  z-index: 2;
  pointer-events: none;
  transform: rotate(-90deg);
}

circle.progress-ring {
  fill: none;
  stroke: url(#blueGradient);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 125; 
  stroke-dashoffset: 125;
  transition: stroke-dashoffset 0.3s;
}

.label {
  font-size: 13px;
  color:lightgray;
  margin-top: 8px;
  font-weight:bold;
}

.hiddenArrow {
  display: none;
}


.social-media{
  background-color: white;
  display: flex;
  align-items: center;
   justify-content: center; 
  align-content: center;
  flex-wrap: nowrap;
   padding: 0.5%; 
  color: white;
  gap: 20px;
}


.career p{
  font-size: clamp(12px, 2vw, 1em);
}

.facebook-logo, .instagram-logo, .linkedin-logo{
  width:30px;
  height:auto;
}

.facebook-logo{
  margin:7.5px 7.5px 7.5px 0;
}

.instagram-logo, .linkedin-logo{
  margin:7.5px;
}

.svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  opacity: 0.08;
  background-size: cover;
}

.svg-title {
  fill:gainsboro;
  font-size: 120px;
  font-family: sans-serif;
  font-weight: bold;
}

.title-center {
  font-weight: bold;
  font-size: 120px;
}


.button {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  z-index: 0;
  color:#003087;
  padding: 6px 11px;
  gap:10px;
  width:fit-content;
  border: 1px solid white;
  font-weight: bold;
  box-shadow: 2px 2px 10px grey;
}

.button .text{
  position: relative;
  z-index: 2;
  transition: color 0.3s;
  font-size: clamp(12px, 2vw, 20px);
}

.button .svg-icon{
  fill: #003087;
  z-index: 2;
  position: relative;
  transition: color 0.3s;
}

.button svg{
  position:relative;
  z-index:2;
  width: clamp(14px, 2vw, 22px);
  height:auto;
 }

 .button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #003087;
  z-index: 1;
  transition: width 0.6s ease;
  transform: skewX(45deg);
  transform-origin: bottom left;
}

@media (hover: hover) and (pointer: fine) {

.button:hover .svg-icon{
  fill: white;
  z-index: 2;
  position: relative;
  transition: color 0.5s;
}


.button:hover::before {
  width: 200%;
}

.button:hover .text{
  color: white;
}

.button:hover .button{
  border:1px solid white;
}

.button:active {
  transform:scale(0.9);
}
}

@media (hover: none) and (pointer: coarse){
  .button:active .svg-icon{
    fill: white;
    z-index: 2;
    position: relative;
    transition: color 0.5s;
  }
  
  
  .button:active::before {
    width: 200%;
  }
  
  .button:active .text{
    color: white;
  }
  
  .button:active .button{
    border:1px solid white;
  }
  
  .button:active {
    transform:scale(0.9);
  }
}