@import url('../fonts.css');

@import url('../utility.css');

@import url('../components/navbar.css');

@import url('../components/navbar_menu.css');

@import url('../components/tile_background.css');

@import url('../components/signature.css');

@import url('../components/return_link.css');

@import url('../components/login_status_bar.css');

@import url('../components/contact_bottom.css');

@import url('../components/electronic_symbols.css');

@import url('../components/socialmedia_bottom.css');

@import url('../components/copyright_bottom.css');

@import url('../components/generic_button.css');


/* Home css ---------------------------------------------------------------- */

#extra-page-container {
  width: 100%;
  /* height is set dynamically via js */
  max-width: var(--system-max-width);
  
  margin: auto;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  position: relative;

  background-color: var(--system-white);

  overflow-x: hidden;
}


.extra-page-primary-title {
  padding-left: 2rem;
  padding-right: 2rem;

  margin: auto;

  direction: rtl;

  text-align: center;

  color: var(--system-blue);
  font-family: 'Custom-1-Bold';
  font-size: 2rem;

  position: relative;

  z-index: 300;
}

@media only screen and (orientation: landscape) {
  .extra-page-primary-title {
    width: 61.8%;
  }
}



.extra-page-secondary-title {
  padding-left: 2rem;
  padding-right: 2rem;

  margin: auto;

  direction: rtl;

  text-align: center;

  color: var(--system-blue);
  font-family: 'Custom-1-Bold';
  font-size: 1.5rem;

  position: relative;

  z-index: 300;
}

@media only screen and (orientation: landscape) {
  .extra-page-secondary-title {
    width: 61.8%;
  }
}

.extra-page-paragraph {
  width: 100%;
  
  margin: auto;

  padding-left: 2rem;
  padding-right: 2rem;

  direction: rtl;

  text-align: justify;

  color: var(--system-blue);
  font-family: 'Custom-1-SemiBold';
  font-size: 1.25rem;

  position: relative;

  z-index: 300;
}

@media only screen and (orientation: landscape) {
  .extra-page-paragraph {
    width: 61.8%;
  }
}

.extra-page-ul {
  width: 100%;

  margin: auto;

  padding-left: 2rem;
  padding-right: 2rem;

  direction: rtl;

  /* text-align: justify; */
  text-align: right;

  color: var(--system-blue);
  font-family: 'Custom-1-SemiBold';
  font-size: 1.25rem;

  /* bring bullet points in */
  list-style-position: inside;

  position: relative;

  z-index: 300;

  /* border: orangered solid 1px; */
}

@media only screen and (orientation: landscape) {
  .extra-page-ul {
    width: 61.8%;
  }
}

.extra-page-single-image {
  width: 100%;

  margin: auto;

  padding-left: 2rem;
  padding-right: 2rem;
}

@media only screen and (orientation: landscape) {
  .extra-page-single-image {
    width: 61.8%;
  }
}

.extra-page-single-image img {
  border-top-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.single-image {
  transition: opacity;
  transition-duration: var(--system-initial-opacity-transition-duration);
  transition-timing-function: ease-out;

  border-top-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;

  position: relative;
  z-index: 300;
}


/* Extra page text and image section --------------------------------------- */

.extra-page-text-image-section {
  width: 100%;

  margin: auto;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 2rem;
  row-gap: 2rem;

}

@media only screen and (orientation: landscape) {
  .extra-page-text-image-section {
    width: 61.8%;
  }
}

@media only screen and (orientation: landscape) {
  .extra-page-text-image-section .extra-page-paragraph {
    width: 40%;
  }

  .extra-page-text-image-section .extra-page-ul {
    width: 40%;
  }

  .extra-page-text-image-section .extra-page-single-image {
    width: 40%;
  }
}

/* extra page image gallery -------------------------------------------------- */

.extra-page-image-gallery {
  width: 100%;

  margin: auto;

  padding-left: 2rem;
  padding-right: 2rem;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 2rem;
  column-gap: 2rem;
}

@media only screen and (orientation: landscape) {
  .extra-page-image-gallery  {
    width: 61.8%;
  }
}

.gallery-image-container {
  width: 100%;
}

@media only screen and (orientation: landscape) {
  .gallery-image-container {
    width: 40%;
  }
}

.extra-page-gallery-image {
  transition: opacity;
  transition-duration: var(--system-initial-opacity-transition-duration);
  transition-timing-function: ease-out;

  border-top-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}