

/*-----------------------------------------------------------
    1. General Styles 
-------------------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
}
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
a {
  text-decoration: none;
  position: relative;
  color: #1f373d;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

.pdf-object {
  height: 100dvh !important;
}

/*-----------------------------------------------------------
    1. Header
-------------------------------------------------------------*/
.header {
  background-image: url(../images/waterwave_large.jpg);
  background-position: top;
  background-size: 150% 500px;
  background-repeat: no-repeat;
  justify-content: space-between;
}

.header-left {
  display: block;
  width: auto;
  max-width: 450px;
}

@media only screen and (max-width: 600px) {
  .header-right {
    display: none;
  }

  .header {
    display: flex !important;
    flex: 1 !important;
    justify-content: center !important;
  }

  .header-main-logo {
    margin-left: auto;
  }
  .sub {
    text-align: center !important;
  }
}

/*-----------------------------------------------------------
    1. Header
-------------------------------------------------------------*/


/*-----------------------------------------------------------
    2. ABOUT 
-------------------------------------------------------------*/

.image-about {
  border-radius: 10px;
}
.hr {
  height: 13px !important; 
  background-color: #6C757D !important;
}

/* .navbar-light .navbar-nav .nav-link > .active { 
  background-color: #007AE8 !important;
  color: white !important;

} */

.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
  background-color: #007AE8 !important;
  color: white;
}

@media screen and (min-width: 992px) {
  .display-in-mobile {
    display: none;
  }
}


.sign-img {
  border: 1px solid black;
}



.videoIframe {
  width: 100%;
  height: 450px;
}

.jcCenter {
  justify-content: center;
}

/* about us page */

.main-positions-image-container {
  width: 370px;
  height: 370px;
}

.main-positions-image {
  width: 370px;
  height: 370px;
  border: 3px solid rgb(251, 251, 251);
  filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 0px 1px);
  border-radius: 10px;
  object-fit: contain;
}

.main-positions-description {
  flex: 1;
  min-width: 370px;
}

.about-us-main {
  margin: auto;
  max-width: 1100px;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.sub-positions-image-container {
  width: 200px;
  height: 200px;
}

.sub-positions-image {
  width: 200px;
  height: 200px;
  border: 3px solid rgb(251, 251, 251);
  filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 0px 1px);
  border-radius: 10px;
  object-fit: contain;
}

.sub-positions-description {
  flex: 1;
}

.about-us-sub {
  max-width: 542.5px;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  justify-content: center;
}

.about-us-main-wrapper {
  gap: 15px;
  margin: auto;
  max-width: 1100px;
  justify-content: center;
  align-items: center;
}

p {
  margin: 0 !important;
}

@media only screen and (max-width: 992px) {

  .about-us-main-wrapper {
    flex-direction: column;
  }

  .main-positions-description {
    padding: 15px;
    text-align: center;
  }
}

@media only screen and (max-width: 600px) {

  .about-us-main {
    gap: 15px;
  }

  .about-us-sub {
    flex-direction: column;
    padding: 15px;
    text-align: center;
  }

  .main-positions-image-container {
    width: 200px;
    height: 200px;
  }
  
  .main-positions-image {
    width: 200px;
    height: 200px;
  }
}