* {
  z-index: 1;
}

body {
  font-family: "Cairo" !important;
  color: #fff;
}

.sticky-background {
  position: fixed;
  z-index: 0;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  padding: 0px;
  margin: 0px;

  background: -moz-linear-gradient(163deg,
      rgba(77, 80, 87, 1) 0%,
      rgba(31, 57, 60, 1) 100%) !important;
  background: -webkit-linear-gradient(163deg,
      rgba(77, 80, 87, 1) 0%,
      rgba(31, 57, 60, 1) 100%) !important;
  background: linear-gradient(163deg,
      rgba(77, 80, 87, 1) 0%,
      rgba(31, 57, 60, 1) 100%) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d5057", endColorstr="#1f393c", GradientType=1) !important;
  /* background-color: #1f393c !important;
  background: #212529; */

  opacity: 1;
}

#animation3d {
  z-index: 0;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
}

a {
    text-decoration: none;
}

hr {
  color: #00e9ff !important;
}

.text-medium {
  font-size: 16px !important;
}

.text-subheading {
  font-size: 1.6em !important;
  color: #ffffff !important;
  font-style: italic;
  font-weight: 100;
  text-shadow: 0px 0px 6px #ffffff;
}

.text-iamdark {
  color: #060606;
  text-shadow: 0px 0px 4px #808080;
}

.text-iamblue {
  color: #00e9ff;
}

.avatar {
  max-width: 110px;
  margin-right: 20px;
  border-radius: 0px 25px 25px;
  border: 1px solid #22393c;
  box-shadow: 0px 0px 12px #1d1d1d77;
}

.images {
  border: 1px solid #22393c;
  box-shadow: 0px 0px 12px #1d1d1d77;
  margin-bottom: 8px;
  width: 100vw;
  height: auto;
}

.d-flex {
  display: flex;
}

.flex-item {
  flex: 1;
  /* Allows images to grow and shrink as needed */
  max-width: 30%;
  /* Sets a max-width to prevent overflow */
  margin: 0 10px;
  /* Adds some space between images */
  object-fit: cover;
  /* Ensures images are properly covered */
}

/* Additional styles for smaller screens */
@media (max-width: 768px) {
  .flex-item {
    max-width: 45%;
    /* Adjust max-width for smaller screens */
  }
}

.imageModal {
  background: #566769 !important;
}

.modal-content {
  box-shadow: 0px 0px 31px #000000 !important;
  border: 1px solid #728587 !important;
}

.modal-header {
  border-bottom: 1px solid #455759;
}

.big-text {
  font-family: Cairo;
  font-size: 46px;
  color: #fff;
}

.big-text2 {
  font-family: Cairo;
  font-size: 34px;
  color: #fff;
}

.justified {
  text-align: justify;
  text-justify: inter-word;
}

.secondary-text {
  font-size: 22px;
  color: #ddd;
  font-family: "Roboto Slab";
}

.terciary-text {
  font-size: 14px;
  color: #ccc;
  font-weight: 100;
  font-family: "Cairo";
}

.dropdown-menu {
  background-color: #212529 !important;
  border-radius: 0px !important;
}

.dropdown-menu li a.dropdown-item {
  color: #fff !important;
}

.dropdown-menu li a.dropdown-item:focus,
.dropdown-menu li a.dropdown-item:active,
.dropdown-item.active {
  color: #fff !important;
  background-color: #1f4145 !important;
}

.dropdown-item:hover,
a.dropdown-item:hover {
  color: #000000 !important;
  background-color: #338e97 !important;
}

@media (min-width: 992px) {
  #navbarSupportedContent>ul>li.nav-item.dropdown>ul>li.dropdown-submenu.dropend>ul {
    left: 99% !important;
    margin-top: -39.6px;
  }
}

ul,
ul li,
.list-group,
.list-group-item {
  font-size: 14px !important;
  color: #ddd;
  background-color: #00000000 !important;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 2px;
}

.list-group-item-title {
  color: #00e9ff;
  padding-top: 1em !important;
}

.social-icons {
  max-width: 20px;
  display: inline-block;
  margin: 0px;
  padding: 0px;
  box-shadow: 0 0 11px #00000054;
  border: 1px solid #00e9ff52;
}

.social-icons-sm {
  max-width: 10px;
  margin: 0px;
  padding: 0px;
}

.footer {
  color: #adadad;
  margin: 0px;
  font-family: Cairo, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px;
  font-weight: 100;
  height: 30px;
  line-height: 30px;
  height: 100%;
}

div.toast>div.toast.body {
  background-color: #4b815c !important;
}

.flag-icon {
  max-width: 20px;
  max-height: 14px;
  margin-left: 1px;
  padding: 0px;
  border: 1px solid #3b3b3b;
  box-shadow: 0px 0px 4px #1a1a1aad;
}

.text-lang {
  font-size: 14px;
  font-family: Cairo;
  text-decoration: none !important;
  color: #ffffff8c;
  transition: 300ms;
}

.text-lang:hover {
  color: #ffffffbf;
  transition: 300ms;
}