html{
  scroll-behavior: smooth;
}

body {
  margin: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(159 241 184);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  overflow: hidden;
  overflow-x: unset;
  overflow-y: auto ;
}


.container{
  max-width: 1400px;
}

.window{
  scroll-margin-top: 5rem;
  background-color: rgb(159 241 184 / 90%);  
  backdrop-filter: blur(5px);
  margin: 8px 16px 8px 16px;
  
  box-shadow: 0px 0px 10px #02500370;
  
  padding: 2.5rem;
  border-radius: 32px;

  max-width: 1280px;
}

#navbar {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  overflow: hidden;
  background-color: rgb(159 241 184);
  box-shadow: 0px 0px 10px #02500370;
  width: 100%;
}

#navbar #menuOpen{
  display: none;
}

#navbar #menuClose{
  display: none;
}

#navbar a {
  height: 40px;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  
  border-style: inset;
  border-width: 0 0 5px 0;
  border-color: rgb(159 241 184);
}

#navbar a:hover {
  border-style: inset;
  border-width: 0 0 5px 0;
  border-color: #4e944f;
}

#navbar a.active {
  border-style: inset;
  border-width: 0 0 5px 0;
  border-color: #4e944f;
}

.sticky{
  position: fixed;
  top: 0;
  z-index: 4;
}

.header-container {
  width: 100%;
  position: relative;
  text-align: center;
  color: #ffffff;
  margin-top: 0px;
  animation: header-animation 1s;
}

@keyframes header-animation {
  0%{
    transform: scale(1.2);
  }
  100%{
  }
}

.header-image {
  max-width: 100%;
  margin: 0px;
}

.header-image-font {
  width: 100%;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-style: italic;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header-image-font h1{
  margin: 0;
}

.header-image-font h2{
  margin: 0;
}

.header-image-font h3{
  margin: 0;
}

.logo{
  width: 400px;
  height: 400px;
}

.splash-screen{
  position: absolute;
  z-index: 1;
  top: -5%;
  left: -2%;
  transform: translate(0%, 0%);
  animation: splash-screen-anim 5s;
  

  line-height: 0.3;
}

@keyframes splash-screen-anim{
  0%{
    top: 20%;
    opacity: 25%;
  }

  75%{
    opacity: 80%;
  }

  100%{
    opacity: 100%;
    display: none;
  } 
}

.introduction-font-size{
  margin: 0;
}


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

.introduction-header {
  font-weight: bold;
}

.introduction-header{
  margin: 0px;
}

.introduction-body {
  display: flex;
  flex-direction: row;

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

  gap: 56px;

}

.introduction-article {
  text-align: justify;
}

.introduction-image{
  width: 300px;
  height: 400px;
  background-color: red;

  text-align: end;
}

.services-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 1rem;
}

.services-container-text{
  text-align: center;

  text-transform: capitalize;
  font-weight: bold;
}

.services-list-container {
  display: flex;
  flex-direction: row;

  justify-content: center;

  gap: 5px;
}

.services-list-header{
  text-align: center;
}

ul{
  list-style-type: none;
}

ul > li {
  text-indent: -5px;
}

ul > li::before{
  content: "-";
  text-indent: -5px;
}


.services-list {
  flex: 1;
}


.services-article {
  text-align: center;
}

.footer{
  background-color: rgb(159 241 184 / 90%);

  width: 100%;
  position: relative;
  bottom: 0px;
  
  display: flex;
  flex-direction: row;
  
  justify-content: space-around;
  
  gap: 80px;
  align-items: center;

  box-shadow: 0px 0px 10px #02500370;
}

.footer-text{
  word-break: break-all;
}

.logo-footer{
  width: 400px;
  height: 400px;
}

#pdfViewer{
  width: 100%;
  height: 750px;
}

.buttonContainer{
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.buttonContainer button{
  cursor: pointer;
  background-color: transparent;
  box-shadow: none;
  border: none;
  outline-style: solid;
  text-transform: uppercase;
  border-radius: 8px;
}

a{
  color: inherit;
  font-style: normal;
  text-decoration: none;
}



@media screen and (max-width: 1080px) {
  .header-image-font{
    top: 50%
  }
  .introduction-font-size{
    margin: 0;
  }
}

@media screen and (max-width: 1000px) {
  .introduction-body{
    flex-direction: column;
  }
}

  @media screen and (max-width: 840px) {
  #navbar{
    flex-direction: column;
    position: fixed;
    top: 0;
    z-index: 99;
  }

  #navbar a{
    display: none;
  }

  #navbar #menuOpen{
    display: flex;
    cursor: pointer;
  }

  #navbar #menuClose{
    display: none;
    cursor: pointer;
  }

  .footer{
    flex-direction: column-reverse;
    margin-bottom: 0;
  }

  }



.reveal{
  opacity: 0;
  transition: 0.8s all ease;
}

.reveal.active{
  opacity: 1;
}

#about{
  margin-top: 10px;
}
#services_for_comp{
  margin-top: 10px;
}
#services_for_per{
  margin-top: 10px;
}
#certificates{
  margin-top: 10px;
}
#contact{
  margin-top: 10px;
}