@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
@font-face {
  font-family: "Avenir";
  src: url(../fonts/Avenir_Light.ttf);
}
@font-face {
  font-family: "AvenirI";
  src: url(../fonts/Avenir_LightOblique.ttf);
}
@font-face {
  font-family: "Uthman";
  src: url(../fonts/Uthman_Taha_Naskh_Regular.ttf);
}
@keyframes intro {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: "Avenir", "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
}

.arabicText {
  font-family: "Uthman", sans-serif;
  font-weight: 300;
  font-size: 1.6rem;
}

html {
  font-size: 62.5%;
  text-align: right;
  height: -webkit-fill-available;
  background-color: #f1f1f1;
  scroll-behavior: smooth;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #777777;
  cursor: url("../mousePointers/pointerNormal.svg"), auto;
}

a:hover {
  cursor: url("../mousePointers/pointerHover.svg"), auto;
  color: #333333;
}

a:active {
  cursor: url("../mousePointers/pointerHover.svg"), auto;
}

.italic {
  font-style: italic;
  padding-right: 0.2rem;
}

.activePageNavItem a {
  display: flex;
  justify-content: flex-end;
}

body {
  background-color: #f1f1f1;
  font-size: 1.2rem;
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  cursor: url("../mousePointers/pointerNormal.svg"), auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}

#contact a {
  color: #333333;
}

.navItemActive a {
  color: #333333;
}

#navItems a {
  display: flex;
  justify-content: flex-end;
}

.smallText {
  font-size: 0.9rem;
}

.main {
  min-width: 100vw;
  min-height: 100vh;
}

main {
  max-width: 20vw;
  min-width: 20vw;
  min-height: 60vh;
  margin: auto;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  padding-top: 20vh;
  padding-bottom: 10vh;
}

.mainSection {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#content {
  min-width: 20vw;
  margin-right: 0;
  min-height: 60vh;
  z-index: 2;
}

main nav {
  min-width: 10vw;
  position: fixed;
  right: 27%;
}

.navItem {
  margin: 1rem 0rem 0.25rem 0rem;
  color: #777777;
}

.dropdownTransition div {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
}

.dropdownTransition:hover div {
  opacity: 1;
  transform: translateY(0);
}

.dropdownTransition:active div {
  opacity: 1;
  transform: translateY(0);
}

.dropdownContent a {
  margin-bottom: 0.1rem;
}

.navItemActive {
  color: #333333;
}

h1.logo {
  padding: 0rem;
  margin: 0rem;
  font-size: 4rem;
  line-height: 3.5rem;
  margin-bottom: 3rem;
}

.logo a {
  color: #333333;
}

p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.header {
  color: #777777;
}

.header p {
  color: #777777;
  margin-bottom: 0rem;
}

.icon {
  max-height: 1.5rem;
  margin-right: 0.5rem;
}

.iconText {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.contentImage {
  width: 20vw;
  height: auto;
  margin-bottom: 3rem;
}

.contentVideo {
  width: 20vw;
  height: 11.25vw;
  margin-bottom: 0rem;
}

.swiper {
  width: 20vw;
  height: auto;
}

.swiper img {
  width: 22vw;
  height: auto;
  margin-bottom: 0.5rem;
}

.contentImageTop {
  margin-top: 5rem;
}

.imageText p {
  margin-bottom: 0.5rem;
}

.noImageMargin {
  margin-bottom: 0.5rem;
}

.paraLessSpace {
  margin-bottom: 0.75rem;
}

.primaryColor {
  color: #333333;
}

.secondaryColor {
  color: #777777;
}

.paraMoreSpace {
  margin-bottom: 3rem;
}

.italics {
  font-family: "AvenirI", sans-serif;
  font-style: italic;
  font-weight: 300;
}

footer {
  min-height: 5vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  min-width: 20vw;
}

footer p {
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}

footer p a {
  color: #333333;
}

.disabledLink {
  pointer-events: none;
}

.disabledActiveLink {
  color: #757575;
}

.justifyText {
  text-align: justify !important;
}

.dropdown {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: relative;
}

.dropdown .dropdownContent {
  min-width: auto;
  right: 0;
  opacity: 0;
  transition: all 0.2s ease;
  transform: translateY(-5px);
  overflow: hidden;
  height: 0;
}

.dropdownButton {
  cursor: url("../mousePointers/pointerActive.svg"), auto !important;
}

.dropdownButton:hover + .dropdownContent {
  display: flex;
}

.dropdownButton:active + .dropdownContent {
  display: flex;
}

.dropdownContent a {
  display: flex;
  justify-content: flex-end;
}

.dropdown:hover .dropdownContent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  opacity: 1;
  height: auto;
  transform: translateY(0px);
}

.dropdown:active .dropdownContent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  opacity: 1;
  height: auto;
  transform: translateY(0px);
}

.dropdownWorks {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: relative;
}

.dropdownWorks .dropdownWorksContent {
  min-width: auto;
  right: 0;
  opacity: 0;
  transition: all 0.2s ease;
  transform: translateY(-5px);
  overflow: hidden;
  height: 0;
}

.dropdownWorksButton {
  cursor: url("../mousePointers/pointerActive.svg"), auto !important;
}

.dropdownWorksButton:hover + .dropdownWorksContent {
  display: flex;
}

.dropdownWorksButton:active + .dropdownWorksContent {
  display: flex;
}

.dropdownWorksContent a {
  display: flex;
  justify-content: flex-end;
}

.dropdownWorks:hover .dropdownWorksContent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  opacity: 1;
  height: auto;
  transform: translateY(0px);
}

.dropdownWorks:active .dropdownWorksContent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  opacity: 1;
  height: auto;
  transform: translateY(0px);
}

.dropdownWorks:active .dropdownWorksContent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  opacity: 1;
  height: auto;
  transform: translateY(0px);
}

/* onLoad animation */
.animate-on-load.start-animation {
  animation: fadeIn 2s ease-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@media only screen and (min-width: 1920px) {
  main {
    max-width: 20vw;
    min-width: 20vw;
  }
  #content {
    min-width: 20vw;
    max-width: 20vw;
  }
  main nav {
    right: 33%;
    z-index: 1;
  }
  .contentImage {
    width: 20vw;
    height: auto;
  }
  .contentVideo {
    width: 20vw;
    height: 11.25vw;
  }
  .swiper {
    width: 20vw;
  }
  .swiper img {
    width: 22vw;
  }
}
@media only screen and (max-width: 1080px) {
  .emptyTopSection {
    max-height: 5vh;
    min-height: 5vh;
  }
  .emptyBottomSection {
    max-height: 5vh;
    min-height: 5vh;
  }
  section.main {
    min-height: 100vh;
  }
  main {
    max-width: 90vw;
    min-width: 90vw;
    min-height: 90vh;
    padding-top: 2.5vh;
    padding-bottom: 2.5vh;
  }
  .mainSection {
    min-height: 90vh;
    justify-content: flex-start;
  }
  #content {
    margin-right: 17vw;
    min-height: 90vh;
    min-width: 75vw;
    max-width: 75vw;
  }
  main nav {
    right: 3%;
  }
  .contentImage {
    width: 75vw;
    height: auto;
  }
  .contentVideo {
    width: 75vw;
    height: 42.1875vw;
  }
  .swiper {
    width: 75vw;
  }
  .swiper img {
    width: 77vw;
  }
  h1.logo {
    line-height: 4rem;
  }
  footer {
    min-width: 60vw;
  }
  .disabledLink {
    pointer-events: auto;
  }
}/*# sourceMappingURL=styles.css.map */