@import url("../fonts/DINNextLTArabic-Bold.ttf");
@import url("../fonts/DINNextLTArabic-Medium.ttf");
@import url("../fonts/DINNextLTArabic-Regular.ttf");

@font-face {
    font-family: DINNextLTArabic-Bold;
    src: url("../fonts/DINNextLTArabic-Bold.ttf");
}

@font-face {
    font-family: DINNextLTArabic-Medium;
    src: url("../fonts/DINNextLTArabic-Medium.ttf");
}

@font-face {
    font-family: DINNextLTArabic-Regular;
    src: url("../fonts/DINNextLTArabic-Regular.ttf");
}

/* variables */
:root {
  --main-color: #365253;
  --sub-main-color: #3f6061;
  --padding-sections: 25px 0;
  --orange-color: #ff893f;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  padding: 0;
}

body {
  font-family: DINNextLTArabic-Regular, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  scroll-behavior: smooth;
  /* min-height: 100vh; */
  text-transform: capitalize;
  color: #fff;
}

ul {
  list-style: none;
}
.page_content ul {
  list-style: initial;
  font-size: 16px;
  font-family: DINNextLTArabic-Regular;
  color: #fff;
}

a {
  text-decoration: none;
  color: #fff;
  /* font-family: DINNextLTArabic-Bold; */
}

a:hover {
  color: #fff;
}

img {
  width: 100%;
}

p {
  line-height: 40px;
}
input::placeholder {
  text-transform: capitalize;
}

.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* general components */
.btn {
  color: #fff;
  /* font-weight: bold; */
  text-transform: capitalize;
}

.custom-btn {
  padding: 11px 32px;
  font-size: 16px;
  color: #fff;
  font-family: DINNextLTArabic-Regular;
  border-radius: 8px;
  border: 0;
  font-weight: normal;
}

.btn-orange {
  background-color: #ff893f;
}

.empty-org-btn {
  border: 2px solid #ff893f;
  height: 50px;
  line-height: 50px;
  padding: 0 60px;
  border-radius: 25px;
  width: fit-content;
  margin: auto;
}

.green-btn {
  padding: 12px 10px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: "DINNextLTArabic-Bold";
  font-size: 14px;
  background-color: #2f5252;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-readMore {
  width: auto;
  padding: 16px 30px;
  background-color: #dc8851;
  border: 1px solid #dc8851;
}

.white_box {
  width: 100%;
  height: auto;
  background-color: #fff;
  box-shadow: 0 21px 16px -16px rgba(0, 0, 0, 0.07);
  color: #6c6c6c;
  font-family: DINNextLTArabic-Regular;
  font-size: 15px;
  padding: 25px 15px;
  border-radius: 15px;
}

.orange-title {
  color: var(--orange-color);
}

.box-shadow {
  box-shadow: 1px 1px 2px 1px #969696;
}

.profile_imgDark svg,
.profile_imgLight svg {
  width: 25px;
  height: 25px;
}

.profile_imgDark svg {
  color: #000;
}

.profile_imgLight svg {
  color: #fff;
}

.disabled {
  cursor: not-allowed;
}

.permission_btn {
  font-family: DINNextLTArabic-Regular;
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 17px;
  text-align: center;
}

.permission_accepted {
  color: #28c76f;
  background-color: #e5f8ed;
}

.permission_waiting {
  color: #f68c3d;
  background-color: #fbf0e9;
}

.permission_refused {
  color: #ea5455;
  background-color: #fce9e9;
}

/* end general components */
.container {
  width: 100% !important;
}

.main-heading {
  font-size: clamp(1.6rem, 7vw, 2.3rem) !important;
  color: #fff;
  margin-bottom: 28px;
  font-family: DINNextLTArabic-Bold;
}

.main-paragraph {
  font-size: clamp(16px, 7vw, 18px);
  color: #fff;
  font-family: DINNextLTArabic-Regular;
}

/* general components */

/* custom select */
.custom-Select {
  position: relative;
  font-family: Arial;
}

.custom-Select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: #f7f7f7 !important;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 8px;
  height: 8px;
  background-color: transparent;
  border: 1px solid #b9b9b9;
  border-top: initial;
  border-left: initial;
  transform: rotate(45deg);
  /* border: 6px solid transparent;
  border-color: #ccc transparent transparent transparent; */
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  /* border-color: transparent transparent #ccc transparent;
  top: 7px; */
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
  font-family: "DINNextLTArabic-Regular";
  color: #423e1f;
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: #fff !important;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: #f7f7f7;
}

/* end custom select */

.index-video {
  position: relative;
  height: 100vh;
  max-width: 100%;
}

.scroll-div {
  cursor: pointer;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

header {
  padding: 24px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}

header .logo_ITBA {
  width: 250px;
  max-width: 250px;
  margin: 0 auto;
}

.header-menue {
  display: flex;
  justify-content: flex-end;
  gap: 39px;
}

.header-menue .burger-menue {
  cursor: pointer;
}

.header-menue .burger-menue div {
  border: none;
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  cursor: pointer;
  position: fixed;
}

.header-menue .burger-menue div span {
  width: 32px;
  height: 4px;
  background-color: #fff;
  border-radius: 5px;
}

.header-icons {
  display: flex;
  column-gap: 18px;
  align-items: center;
}

.header-icons span {
  color: #fff;
  margin-right: 10px;
  font-family: DINNextLTArabic-Regular;
  font-size: 14px;
}

.header-icon {
  display: none;
}

.header-icons a i {
  color: #fff;
  font-size: 16px;
}

.video {
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.intro-banner,
.wild_banner {
  width: 100%;
  height: 469px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 4;
}

.video video {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.about_banner img,
.wild_banner img {
  position: absolute;
  inset: 0px;
  box-sizing: border-box;
  padding: 0px;
  border: none;
  margin: auto;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about_banner .about_overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* background: linear-gradient(
    180deg,
    rgb(114 110 84 / 100%) 0%,
    rgb(94 101 87 / 100%) 25%,
    rgb(255 255 255 / 0.1) 50%,
    rgb(52 83 83 / 100%) 85%
  ); */
  background: linear-gradient(0deg, rgb(47 82 82 / 50%), rgba(63, 96, 97, 0));
  padding-bottom: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

.about_banner .about_overlay h1 {
  font-family: DINNextLTArabic-Bold;
  font-size: clamp(30px, 7vw, 75px);
  line-height: 120px;
  color: #fff;
}

.visions {
  row-gap: 10px;
}

.header-nav {
  width: 0%;
  height: 100vh;
  background-color: rgba(220, 136, 81, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.5s ease-in-out;
  -webkit-backdrop-filter: blur(19px);
  backdrop-filter: blur(19px);
  z-index: 99999;
  overflow: hidden;
}

.header-nav .container-header {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.header-nav .container-header .close-menue {
  position: absolute;
  top: 10px;
  left: 60px;
  color: #fff;
  /* font-weight: bold; */
  font-size: 50px;
  cursor: pointer;
}

.header-nav .header-news {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 17px;
  gap: 8px;
  /* text-align: center; */
  background: linear-gradient(1turn, #3f6061, rgba(63, 96, 97, 0));
  width: 230px;
}

.header-nav .header-news .round_img {
  text-align: center;
}

.header-nav .header-news .news-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header-nav .header-news p {
  font-size: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-nav .header-news .round_img img {
  width: 70%;
  max-width: 100%;
  border-radius: 50%;
}

.header-nav .header-news .date {
  color: #fff;
  font-size: 17px;
  /* margin-bottom: 10px; */
  text-align: left;
}

.header-nav .header-news button {
  margin: 0 30px;
}

.header-nav ul {
  text-align: center;
  align-self: center;
  margin: 0;
  padding: 0;
}

.header-nav ul li {
  margin-bottom: 16px;
}

.header-nav ul li a {
  color: #fff;
  font-family: DINNextLTArabic-Bold;
  font-size: clamp(24px, 5vw, 40px);
  line-height: clamp(24px, 5vw, 40px);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-nav ul li a.active {
  color: #413d23;
}

.header-nav ul li a::before,
.header-nav ul li a::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 8px;
  top: 50%;
}

.header-nav ul li a::before {
  left: -30px;
}

.header-nav ul li a::after {
  right: -30px;
}

.header-nav ul li a:hover::before,
.header-nav ul li a:hover::after {
  border-bottom: 2px solid white;
}

.nav-active {
  width: 100%;
  height: 100vh;
}

.login-responsive {
  display: none;
}

.header-nav .header-email {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  align-items: center;
  color: #fff;
  font-size: clamp(18px, 5vw, 25px);
  line-height: clamp(18px, 5vw, 25px);
  padding-bottom: 20px;
}

.header-nav .header-email p {
  text-wrap: nowrap;
}

.header-nav .header-email img {
  width: 24px;
  height: 24px;
}

.header-nav .header-email a {
  color: #fff;
}

.wheather {
  width: 100%;
  min-height: 150px;
  z-index: 9999;
  padding: 24px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(44px);
  backdrop-filter: blur(44px);
  display: none;
  align-items: center;
  justify-content: flex-end;
  column-gap: 40px;
}

.wheather .close-wheather {
  position: absolute;
  left: 15px;
  top: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: hsla(0, 0%, 100%, 0.2);
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
  color: #fff;
  cursor: pointer;
}

.wheather .temperature {
}

.wheather .temperature .temp-time {
  display: flex;
  column-gap: 110px;
}

.wheather .temperature .temp-time span {
  width: 70px;
  text-align: center;
  background-color: #242424;
  border-radius: 8px;
  color: #fff;
  font-size: clamp(10px, 2vw, 14px);
  padding: 3px 8px;
}

.wheather .temperature .temp-degree {
  display: flex;
  column-gap: 110px;
}

.wheather .temperature .temp-degree span {
  width: 70px;
  margin-top: 10px;
  text-align: center;
  color: #fff;
  font-size: clamp(10px, 3vw, 25px);
}

.wheather .sunIcon img {
  width: 100px;
  height: 50px;
}

.moveBetweenSections {
  font-size: 16px;
  font-family: DINNextLTArabic-Regular;
  color: #fff;
}

/* start Discover The Reserve section  */
.reserve-section {
  position: relative;
  background-color: var(--main-color);
  color: #fff;
  padding: 20px 0;
  overflow: hidden;
}

.reserve-section .reserve-bg-gradient {
  position: absolute;
  background: linear-gradient(0deg, #dc8851, rgba(246, 140, 61, 0));
  height: 25vh;
  top: auto;
  bottom: 0;
  z-index: 2;
  width: 100%;
}

.reserve-section .pattern_map_section,
.pattern_map_section {
  position: absolute;
  top: 0;
  right: 0;
}

.reserve-section .custom-pattern,
.custom-pattern {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  z-index: 1;
}

.reserve-section .custom-pattern .line-pattern,
.custom-pattern .line-pattern {
  border-left: 1px solid #3f6061;
  width: 20%;
  height: 100%;
}

.reserve-section .container {
  position: relative;
  z-index: 3;
}

.reserve-description {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.reserve-section .reserve-description {
}

.reserve-section h1 {
}

.reserve-section p {
  font-size: clamp(16px, 7vw, 18px);
  color: #fff;
  font-family: DINNextLTArabic-Regular;
}

.reserve-section span {
  color: #f8d086;
  cursor: pointer;
  font-family: DINNextLTArabic-Regular;
  font-size: 14px;
}

.reserve-section span i {
}

.reserve-section .map {
  position: relative;
  min-height: 100vh;
}

.reserve-section .map .svg_map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -60px;
}

.reserve-section .map .svg_map svg {
  width: 190%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.Home_specialArea {
  stroke-dasharray: 600;
  stroke-dashoffset: 1000;
  animation: Home_dash__SFMRx 4.5s linear infinite alternate;
  filter: drop-shadow(3px 5px 2px rgb(220, 136, 81));
  cursor: pointer;
}

.Home_refAreaOne:hover,
.Home_refAreaTwo:hover,
.Home_refAreaThree:hover,
.Home_refAreaFour:hover {
  cursor: pointer;
  fill: #dc8851;
}

.fill_orange {
  fill: #dc8851;
}

.static_map_area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
}

.static_map_area img {
  width: 100%;
  height: 100%;
}

.opacity_0 {
  opacity: 0;
}

.opacity_1 {
  opacity: 1;
}

.Home_makka__MBddk {
  transform: translate(-35px, 10px);
  animation: Home_makka__MBddk 1s ease infinite;
  opacity: 0.5;
}

@keyframes Home_dash__SFMRx {
  0% {
    stroke-dashoffset: 822;
  }

  100% {
    stroke-dashoffset: 0;
    filter: drop-shadow(3px 5px 2px rgb(220, 136, 81));
  }
}

@keyframes Home_makka__MBddk {
  0% {
    stroke: transparent;
  }

  100% {
    stroke: #fff;
    opacity: 0.5;
    filter: drop-shadow(3px 5px 2px rgb(220, 136, 81));
  }
}

/* start tourism section */
.tourism {
  position: relative;
  background: linear-gradient(180deg, #dc8851, #b89c6f);
  padding-block: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tourism-background-icon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
}

.tourism .row {
  position: relative;
  z-index: 1;
}

.tourism .tourism-details {
  margin-top: 80px;
}

.tourism .tourism-icons {
  gap: 44px;
  flex-direction: column;
  text-align: center;
}

.tourism .tourism-icons img {
  width: 45px;
  height: 45px;
  margin-bottom: 10px;
}

.tourism .tourism-icons p {
  font-size: 18px;
}

.tourism .tourism-imgs {
  justify-content: space-between;
}

.tourism .tourism-imgs .img-box {
  width: 18%;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  transition: all 0.5s ease-in-out;
  height: 400px;
}

.tourism .tourism-imgs .img-box img {
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  position: absolute;
  inset: 0px;
  box-sizing: border-box;
  padding: 0px;
  border: none;
  margin: auto;
  display: block;
  width: 0px;
  height: 0px;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.tourism .tourism-imgs .img-box .img-box-title {
  position: absolute;
  bottom: 30px;
  left: 0;
  top: auto;
  max-width: 100%;
  height: auto;
  text-align: center;
  width: 100%;
  padding: 0 10px;
}

.tourism .tourism-imgs .img-box:hover img {
  transform: scale(1.2);
}

.tourism .tourism-imgs .img-box a {
  color: #fff;
  font-family: DINNextLTArabic-Bold;
  font-size: 20px;
}

/* start Preserving The Wildlife */
.wild-life {
    padding-block: 100px;
    position: relative;
    background-image: url("../images/png/BG2.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* z-index: -1; */
}

.wild-life .Home_containerLayoutTop {
  top: 0;
  background: linear-gradient(
    178.79deg,
    #b89c6f 1.06%,
    rgba(54, 82, 83, 0) 99.03%
  );
}

.wild-life .Home_containerLayoutBottom {
  bottom: 0;
  background: linear-gradient(180deg, hsla(39, 89%, 75%, 0), #b89c6f);
}

.wild-life .Home_containerLayoutTop,
.wild-life .Home_containerLayoutBottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
}

.wild-life .wild-description {
  position: relative;
  z-index: 9999;
}

.wild-life .wild-description p {
  font-size: clamp(16px, 7vw, 18px);
  color: #fff;
  font-family: DINNextLTArabic-Regular;
}

.wild-life .wild-slider {
  margin-top: 20px;
}

.wild-life .wild-desc-slider {
  position: relative;
  z-index: 9999;
}

.wild-life .wild-desc-slider .wild-title {
  display: flex;
  column-gap: 10px;
  align-items: center;
  margin-bottom: 30px;
}

.wildContainerImg {
    position: relative;
    width: 100%;
    min-height: 350px;
}

.wildContainerImg span {
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    width: initial;
    height: initial;
    background: none;
    opacity: 1;
    border: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.wildLife-swiper .wildLife-swiper-img img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    padding: 0;
    border: none;
    margin: auto;
    display: block;
    width: 0;
    height: 0;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: contain;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    opacity: initial !important;
}

    .swiper-button-prev.swiper-button-disabled img,
    .swiper-button-next.swiper-button-disabled img {
        filter: brightness(60%) sepia(100%) hue-rotate(334deg) saturate(200%);
    }

.wild-life .wildLife-desc-paragraph {
  color: #fff;
  font-family: DINNextLTArabic-Regular;
  font-size: clamp(15px, 7vw, 18px);
}

.wild-life .wild-desc-slider .wild-title img {
  width: 38px;
  height: 38px;
}

.wild-life .wild-desc-slider .wild-title h3 {
  margin-bottom: 0;
}

.wild-life .wild-img {
}

.wild-life .wild-img img {
  width: 400px;
}

.wild-pagination {
  display: flex;
  justify-content: space-between;
  width: 250px;
  z-index: 999;
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translateX(-50%);
}

.wild-pagination img {
  width: 38px;
  height: 38px;
}

.wild-pagination .next {
  cursor: pointer;
}

.wild-pagination .prev {
  cursor: pointer;
  transform: rotate(180deg);
}

/* local community */
.local-community {
  background: linear-gradient(180deg, #b89c6f, #3f6061);
  position: relative;
  padding-block: 100px;
}

.local-community .local-intro {
  padding: 0 30px;
}

.local-community .local-slider,
.news .local-slider {
  margin-top: 20px;
}

element.style {
  width: 352px;
  margin-right: 30px;
  height: 500px;
}

/* start swiper styles */
.swiper {
  width: 100%;
  /* height: 430px; */
}
/* start wildLife swiper */
.wildLife-swiper {
  margin-top: 20px;
  display: flex;
  /* justify-content: space-between; */
  gap: 100px;
}

.wildLife-swiper .wildLife-swiper-desc {
}

.wildLife-swiper .wildLife-swiper-desc .wildLife-desc-title {
  display: flex;
  column-gap: 10px;
  align-items: center;
  margin-bottom: 30px;
}

.wildLife-swiper .wildLife-swiper-desc .wildLife-desc-title img {
  width: 38px;
  height: 38px;
}

.wildLife-swiper .wildLife-swiper-desc .wildLife-desc-title h3 {
  margin-bottom: 0;
}

.wildLife-swiper .wildLife-swiper-img {
  width: 350px;
}

.wildLife-swiper .wildLife-swiper-img img {
  width: 100%;
  max-width: 100%;
}

.news-Swiper,
.local-community-swiper {
  min-height: 590px;
}

/* start swiper pagination */
.swiper-controller {
}

.swiper-button-prev,
.swiper-button-next {
    /* background-image: url("../images/svg/ITBA_Back_Icon.svg"); */
    width: 41px;
    height: 41px;
    bottom: 10px;
    top: auto;
}

.swiper-button-next,
.swiper-right .swiper-button-prev {
  right: 40% !important;
  left: auto !important;
}

.swiper-button-prev,
.swiper-right .swiper-button-next {
  left: 40% !important;
  right: auto !important;
}

.swiper-button-prev {
  transform: rotate(180deg);
}

.swiper-button-next:after,
.swiper-button-prev:after,
.swiper-rtl {
  content: "" !important;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  /* opacity: 1; */
}

.swiper-button-prev.swiper-button-disabled svg path,
.swiper-button-next.swiper-button-disabled svg path {
  fill: #dc8851;
}

/* end swiper pagination */
.local-community .swiper-slide,
.news .swiper-slide {
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

.local-community .swipper-box,
.news .swipper-box {
  /* height: 500px; */
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.local-community .swipper-box .local-img,
.news .swipper-box .local-img {
  width: 100%;
  height: 100%;
}

.local-community .swipper-box .local-img img,
.news .swipper-box .local-img img {
  position: absolute;
  inset: 0px;
  box-sizing: border-box;
  padding: 0px;
  border: none;
  margin: auto;
  display: block;
  width: 0px;
  height: 0px;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.local-community .swipper-box .local-img .slider-overlay,
.news .swipper-box .local-img .slider-overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, rgba(54, 82, 83, 0), #dc8851);
  mix-blend-mode: multiply;
}

.local-community .swipper-box .local-img img,
.news .swipper-box .local-img img {
  max-width: 100%;
}

.local-community .swipper-box .local-description,
.news .swipper-box .local-description {
  position: absolute;
  z-index: 999;
  color: #fff;
  bottom: 34px;
  left: 10px;
  right: 10px;
}

.local-community .swipper-box .local-description span,
.news .swipper-box .local-description span {
  border-inline: 1px solid #dc8851;
  font-size: 12px;
  line-height: 32px;
  font-family: DINNextLTArabic-Regular;
  color: #fff;
  padding-inline: 5px;
}

.local-community .swipper-box .local-description span:after,
.news .swipper-box .local-description span:after {
  position: absolute;
  content: "";
}

.local-community .swipper-box .local-description p,
.news .swipper-box .local-description p {
  font-family: DINNextLTArabic-Bold;
  font-size: 18px;
  line-height: 32px;
  color: #fff;
  padding-bottom: 8px;
  width: 100%;
}

.local-community .swipper-box .local-description .Home_Header:after,
.news .swipper-box .local-description .Home_Header:after {
  margin-top: 10px;
  height: 1px;
  display: block;
  width: 20%;
  background: #dc8851;
  content: "";
}

/* .ITBA-button-next,
.ITBA-button-prev {
  top: var(--swiper-navigation-top-offset, 100%);
  width: 41px;
  height: 41px;
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  right: var(--swiper-navigation-sides-offset, 10px);
}
.switch-swiper {
  gap: 140px;
}

.ITBA-button-prev {
  background-image: url("/images/svg/ITBA_Back_Icon.svg");
}
.ITBA-button-next {
  background-image: url("/images/svg/ITBA_Back_Icon.svg");

  transform: rotate(180deg);
}
.swiper-button-next:after,
.swiper-button-prev:after {
  content: "";
}
.swiper-active {
  color: #dc8851;
} */

/* swipper */

/* swiper-container {
  width: 100%;
  height: 100%;
}

swiper-slide {
  text-align: left;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* news */
.news {
  width: 100%;
  background: linear-gradient(1turn, #b89c6f, #3f6061);
  position: relative;
  padding-block: 100px;
}

.news .Home_newsPattern {
  position: absolute;
  width: 25%;
  height: 35%;
}

.news .news-title {
  text-align: center;
}

/* subscribe */

.subscribe {
  background: linear-gradient(177.91deg, #b59b6f 5.6%, #3c5152 98.24%);
  /* display: inline-block; */
  width: 100%;
  padding: 40px 0;
}

.subscribe .container {
  position: relative;
}

.subscribe .container .home-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 237px;
  height: 113px;
}

.subscribe .subscribe-box {
  padding: 67px 0px;
}

.subscribe .allFormInputs {
  width: 100%;
  gap: 24px;
  justify-content: space-between;
}

.subscribe .allFormInputs .input-filed {
  width: 33.33333333%;
  max-width: 33.33333333%;
}

.register-label {
  color: #fff;
  font-size: 18px;
  font-family: DINNextLTArabic-Regular;
  margin-bottom: 8px;
  display: inline-block;
}

.register-input {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  background-color: transparent;
  border: 1px solid #fff;
  padding-inline: 8px;
  color: #fff;
  font-family: DINNextLTArabic-Regular;
  font-size: 18px;
}

.register-btn {
  color: #fff;
  background-color: #dc8851;
  padding: 8px;
  border-radius: 8px;
  font-family: DINNextLTArabic-Bold;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.register-form {
  flex-direction: column;
  row-gap: 24px;
  justify-content: center;
  align-items: center;
}

.register-btn {
  width: 33.33333333%;
  max-width: 33.33333333%;
}

.register-btn button {
  width: 100%;
  color: #fff;
  background-color: #dc8851;
  padding: 8px;
  border-radius: 8px;
  font-family: DINNextLTArabic-Bold;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* end subscribe */

/* start footer */
footer {
    background: url(../images/png/BG_Footer.webp);
    min-height: 300px;
    background-position: 50%;
    position: relative;
    padding-block: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

footer .footer_icon {
  position: absolute;
  bottom: 20%;
  left: 2%;
}

footer .footer_layout {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--main-color), rgba(54, 82, 83, 0));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

footer .row {
  margin-bottom: 32px;
}

footer .container {
  position: relative;
  z-index: 1;
}

footer .container .footer_logo {
  max-width: 250px;
}

footer .container .footer_logo img {
  max-width: 100%;
}

footer .container .footer_content {
  row-gap: 15px;
}

footer .container .footer-heading {
  margin-bottom: 16px;
  color: #fff;
  font-size: 18px;
  line-height: 22px;
  font-family: DINNextLTArabic-Bold;
}

footer .container ul {
  margin: 0;
  padding: 0;
}

footer .container ul li a {
  color: #fff;
  font-size: 16px;
  font-family: DINNextLTArabic-Regular;
  line-height: 35px;
}

footer .container .row.footer_end {
  padding-top: 30px;
  border-top: 2px solid hsla(0, 0%, 100%, 0.2);
  display: flex;
}

footer .container .row.footer_end p {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-family: DINNextLTArabic-Regular;
}

/* end footer */

/* about style page */

.header_about {
  height: 469px;
  z-index: 1;
}

.tourist_page {
  /* height: 100vh; */
  overflow: hidden;
}

.light_header {
  z-index: 1;
  position: relative;
  padding: 24px;
  color: #000;
  background-color: #fff;
  width: 100%;
}

.light_header header {
  background-color: #fff;
  color: #000;
  height: auto;
}

.light_header .header-icons span {
  color: #000;
}

.light_header a i {
  color: #000;
}

.light_header .cloud-icon {
  color: #000;
}

.tourist_data {
  width: 100%;
  height: calc(100vh - 116.68px);
  position: relative;
  overflow: hidden;
}

.tourist_data .row,
.tourist_data .row .col-md-6 {
  max-height: 100%;
}

.tourist_data .light_header_BG {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.tourist_data .light_header_BG img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.tourist_data .tourist_form-container {
  background-color: #2f5252;
  padding: 10px 80px;
  width: 100%;
  height: 100%;
}

.tourist_data .tourist_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.tourist_data .tourist_form h2 {
  font-family: DINNextLTArabic-Medium;
  font-size: 36px;
  color: #fff;
}

.tourist_data .tourist_form h3 {
  font-size: 24px;
  color: #000;
}

.tourist_data .tourist_form .form_info p {
  opacity: 1;
}

.tourist_data .tourist_form p {
  color: #8692a6;
  font-size: 16px;
  font-family: DINNextLTArabic-Medium;
  opacity: 0.6;
  text-wrap: wrap;
}

.tourist_data .tourist_form .form_visitors,
.tourist_data .tourist_form .form_companies {
  display: flex;
  gap: 17px;
  width: 100%;
  background-color: #fff;
  padding: 17px;
  box-shadow: 0 4px 14px 1px rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  white-space: nowrap;
  justify-content: space-between;
  align-items: center;
}

.tourist_data .tourist_form .form_visitors img,
.tourist_data .tourist_form .form_companies img {
  max-width: 74px;
  width: 100%;
}

.tourist_data .form_btn .active {
  padding: 16px 32px;
  background: #ff893f;
  border-radius: 8px;
  margin-top: 24px;
  font-size: 16px;
  font-family: DINNextLTArabic-Medium;
  color: #fff;
  border: 0;
  transition: all 0.1s linear;
}

.tourist_data .form_btn .active:hover {
  color: #ff893f;
  background-color: #fff;
}

.tourist_data .form_btn .disactive {
  padding: 16px 32px;
  background-color: transparent;
  border-radius: 8px;
  margin-top: 24px;
  font-size: 16px;
  font-family: DINNextLTArabic-Medium;
  color: #ff893f;
  border: 1px solid #ff893f;
  transition: all 0.1s linear;
}

.email_form > div:not(:last-child) {
  margin-bottom: 30px;
}

.email_form label {
  font-family: DINNextLTArabic-Medium;
  font-size: 16px;
  color: #fff;
  margin-bottom: 15px;
}

.email_form input {
  width: 100%;
  background-color: #f7f7f7;
  outline: none;
  color: #000;
  border: 1px solid #f7f7f7;
  border-radius: 8px;
  padding: 10px 16px;
  font-family: DINNextLTArabic-Regular;
  font-size: 14px;
}

.email_form input:disabled {
  cursor: not-allowed;
  background-color: #cbcbcb !important;
  border-color: #cbcbcb;
}

.about_content {
  position: relative;
  background-color: #3f6061;
  background: linear-gradient(180deg, #3f6061, #b59b6f);
  padding-block: 82px;
  overflow: hidden;
}

.choices_list {
  height: 100%;
  text-align: center;
  border-right: 1px solid #ccc; /* need rtl style */
}

.choices_list li {
  padding: 10px 0;
  transition: all 0.1s ease-in-out;
}

.choices_list li.active,
.choices_list li:hover {
  background-color: #608183;
}

.new_about_desc {
  line-height: 40px;
}

.about_content_head {
  font-size: clamp(1.6rem, 7vw, 2.3rem);
  color: #fff;
  font-family: DINNextLTArabic-Bold;
  margin-bottom: 24px;
}

.about_content_desc {
  font-size: clamp(16px, 7vw, 18px);
  color: #fff;
  font-family: DINNextLTArabic-Regular;
  margin-bottom: 30px;
}

.about_box {
  padding-inline: 15px;
  height: 632px;
  min-height: 500px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  background-color: hsla(0, 0%, 100%, 0.02);
  border-radius: 8px;
  transition: all 0.5s ease-in-out;
  padding-top: 50px;
  overflow: hidden;
}

.about_box:hover {
  background-color: #3f6061;
  cursor: pointer;
}

.about_box .about_box_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.about_box .box_icon {
  width: 50px;
  height: 50px;
}

.about_box .box_icon img {
  width: 100%;
  height: 100%;
}

.about_box .box_head p {
  font-family: DINNextLTArabic-Bold;
  color: #fff;
  font-size: clamp(20px, 5vw, 34px);
}

.about_box .about_box_info ul,
.wild_content ul {
  margin: 15px;
  list-style: initial;
  font-size: 16px;
  font-family: DINNextLTArabic-Regular;
  color: #fff;
}

/* start wildlife */
.wild_banner {
}

.wild_banner .wild_BGcolor {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #3f6061;
}

.wild_banner .wild_overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  flex-direction: column;
  background: linear-gradient(0deg, #2f5252, rgba(63, 96, 97, 0));
}

.wild_banner .wild_overlay h1 {
  font-family: DINNextLTArabic-Bold;
  font-size: clamp(30px, 7vw, 75px);
  line-height: 120px;
  color: #fff;
}

.wild_content {
  background-color: #3f6061;
  padding: 50px 0;
}

.page-description {
  color: #fff;
  text-align: center;
  font-size: 25px;
  font-family: DINNextLTArabic-Regular;
  margin-bottom: 50px;
}
/* start handle styles of swiper full screen with swiper thumb component */
.swiper-container-main {
  margin-bottom: 10px;
}

.swiper-container-main .swiper-wrapper {
  /* margin-bottom: 20px; */
}

.swiper-container-main .swiper-slide {
  width: 744px;
  height: 360px;
  border-radius: 10px;
  overflow: hidden;
}

.swiper-container-main .swiper-slide img {
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.gallery-thumbs .swiper-slide-thumbs {
    inset: 0px;
    box-sizing: border-box;
    padding: 0px;
    border: none;
    display: block;
    width: 225px;
    height: 90px;
    border-radius: 5px;
    overflow: hidden;
    height: 96px;
    /* width: 0px;
  height: 0px;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%; */
    object-fit: cover;
}
.gallery-thumbs .swiper-slide-thumbs img {
  width: 100%;
  height: 100%;
  max-height:100%;
}

.swiper-container-main .swiper-button-prev {
  top: 50%;
  left: 10px !important;
}

.swiper-container-main .swiper-button-next {
  top: 50%;
  right: 10px !important;
}
/* end handle styles of swiper full screen with swiper thumb component */

.envir_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.envir_icon > div {
    text-align:center;

}

 .envir_icon img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        width: 50px;
        height: 50px;
    }

.envir_icon p {
  text-wrap: nowrap;
}

.wild_content h3 {
  font-size: clamp(18px, 10vw, 25px);
}

.wild_content ul {
  margin: 0;
}

.wild_content ul li {
  font-family: DINNextLTArabic-Regular;
  font-size: 18px;
}

/* end wildLife */

/* start login */

.main_login {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff4dd;
  height: 100vh;
}

    .main_login .logo {
        height: 100%;
        width: 43%;
        background-image: url("../images/png/login-bg.jpg");
        padding-top: 50px;
        display: flex;
        justify-content: center;
    }

.main_login .logo > div {
  width: 273px;
  height: 80.5px;
}

.main_login .logo > div svg {
  width: 100%;
  height: 100%;
}

.main_login .login {
  height: 100%;
  width: 57%;
  display: flex;
  justify-content: center;
}

.main_login .login .login_div {
  width: 100%;
  display: flex;
  justify-content: center;
}

.main_login .login form {
  width: 75%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.main_login .login form label {
  color: #423e1f;
  font-size: 14px;
  font-family: DINNextLTArabic-Regular;
  display: inline-block;
  font-family: DINNextLTArabic-Medium;
}

.main_login .login form input {
  background-color: #f7f7f7;
  border: 1px solid #f7f7f7;
  border-radius: 8px;
  padding: 10px 16px;
  width: 100%;
  font-family: DINNextLTArabic-Regular;
  color: #423e1f;
  font-size: 14px;
}

.main_login .login form button {
  display: block;
  width: 100%;
  max-width: 320px;
  text-align: center;
  font-family: DINNextLTArabic-Regular;
  font-size: 16px;
  color: #fff;
  padding-block: 10px;
  margin-inline: auto;
  background-color: #c19d66;
  border: none;
  border-radius: 8px;
}

/* end login */

/* start permission page styles */
.permissions_cards {
  padding-block: 82px;
}

.permissions_cards .row.lab_view {
  row-gap: 24px;
}

@media only screen and (max-width: 768px) {
  .permissions_cards .row.lab_view {
    display: none;
  }

  .mobile_view {
    display: block;
  }

  .profile_permissions_header {
    margin-top: 20px;
  }

  .profile_permissions_box .profile_box_info,
  .profile_permissions_box .profile_box_date {
    flex-direction: column;
    row-gap: 10px;
  }

  .profile_permissions_box .profile_box_info > div:not(:last-child),
  .profile_permissions_box .profile_box_date > div:not(:last-child) {
    width: 100% !important;
  }

  .profile_permissions_box .profile_box_info > div:last-child,
  .profile_permissions_box .profile_box_date > div:last-child {
    align-self: center;
    width: 40% !important;
  }
}

.permissions_cards .row.lab_view > div {
  position: relative;
  z-index: 0;
}

.permissions_cards .permission_card {
  background-color: #fff;
  width: 100%;
  height: 350px;
  border-radius: 25px;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 280px auto;
  overflow: hidden;
}

    .permissions_cards .permission_card.add_decore::after,
    .permissions_cards .permission_card.add_decore_rtl::after,
    .permissions_cards .permission_card.add_decore_final::after,
    .permissions_cards .permission_card.add_decore_final_rtl::after {
        display: block;
        content: " ";
        background-image: url("../images/png/Decore_Card.png");
        height: 252px;
        width: 96px;
        position: absolute;
        background-repeat: no-repeat;
        background-position: 0;
        z-index: -1;
    }

.permissions_cards .permission_card.add_decore::after {
  top: 180px;
  left: -40px;
  transform: rotate(180deg);
}

.permissions_cards .permission_card.add_decore_final::after {
  top: 180px;
  right: -40px;
}

.permissions_cards .permission_card .permission_img {
  background-color: #fff;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 50px !important;
  height:100%;
}

.permissions_cards .permission_img img {
    position: relative;
    max-height: 100%;
    width: auto;
}

.permissions_cards .permission_card .permission_desc {
  overflow: hidden;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  gap: 10px;
  background-color: #f56600;
  text-align: center;
}

.permissions_cards .permission_card .permission_desc > div:not(:last-child) {
  padding-bottom: 10px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
}

.permissions_cards .permission_card .permission_desc img {
  width: 25px;
  height: auto;
}

.permissions_cards .permission_card .permission_desc span {
  color: #fff;
  font-size: 14px;
  font-family: DINNextLTArabic-Regular;
  min-height: 14px;
}

.permissions_cards .permission_card .permission_desc p {
  font-family: DINNextLTArabic-Bold;
  color: #fff;
  font-size: clamp(18px, 5vw, 24px);
  line-height: 28.13px;
}

.permissions_cards .permission_card .permission_desc .permissions_titles span {
  color: #fff;
  font-size: 14px;
  font-family: DINNextLTArabic-Regular;
  min-height: 14px;
}

.permissions_contact {
  margin-top: 90px;
  background: #485f5b;
  border-radius: 50px 24px 27px 10px;
  padding: 60px;
  text-align: center;
  color: #fff;
  font-size: clamp(15px, 5vw, 24px);
  font-family: DINNextLTArabic-Medium;
  position: relative;
}

.permissions_contact .Permissions_conatct_icon {
  position: absolute;
  top: -15px;
  right: -10px;
  width: 30px;
  height: 30px;
}

.permissions_contact .Permissions_conatct_icon img {
  width: 100%;
  height: 100%;
}

/* end permissions page styles */

/* start permission forms */
.pdf-bg {
    background: transparent url(../images/png/PdfPrint.png) no-repeat;
    background-size: contain;
    font-family: DINNextLTArabic-Regular;
    width: 21cm;
    height: 29cm;
    margin: 0 auto;
    padding: 20px 30px;
    position: relative;
}
.pdf-bg .pdfContent {
  padding: var(--padding-sections);
  margin-top: 80px;
  color: #000;
}
.pdf-bg .pdfContent .general-data table td {
  color: #333;
  font-size: 14px;
}
.pdf-bg .pdfContent .dataTable {
  margin: 10px 0 20px;
  border: 1px solid #a9a9a9;
  border-collapse: collapse;
  border-radius: 0;
  overflow: hidden;
  font-family: DINNextLTArabic-Regular;
}
.pdf-bg .pdfContent .dataTable th,
.pdf-bg .pdfContent .dataTable td {
  text-align: center;
  width: 33%;
  padding: 8px;
  border: 1px solid #a9a9a9;
}
.pdf-bg .pdfContent .general-data .barCode {
  text-align: center;
}
.pdf-bg .pdfContent .general-data .QR {
  width: 120px;
  height: 120px;
}
.pdf-bg .pdfContent .general-data .QR img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}
.pdf-bg button {
  position: absolute;
  left: 0;
  padding: 15px 50px;
  border-radius: 10px;
  color: white;
  width: 10.5cm;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
.form_section {
  padding: var(--padding-sections);
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #3f6061;
  z-index: 3;
}

.form_section .CustomRadioBtn input,
.form_section .CustomRadioBtn label {
  cursor: pointer;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: orange;
}

.form_section .row {
  margin-bottom: 24px;
}

.form_section .permission_form_bg {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.form_section .permission_form_bg img {
  height: 100%;
  width: 100%;
}

.form_section form {
  background-color: #fff;
  border-radius: 8px;
  padding: 50px;
  position: relative;
  z-index: 9999;
}

.form_section form .form_permit_header {
  color: #423e1f;
  font-size: clamp(18px, 5vw, 24px);
  line-height: clamp(25px, 5vw, 35px);
  font-family: "DINNextLTArabic-Medium";
}

.form_section form .row {
  row-gap: 40px;
}

.form_section form label {
  color: #423e1f;
  font-size: 14px;
  font-family: DINNextLTArabic-Medium;
  margin-bottom: 8px;
  display: block;
}

.form_section form label span {
  color: #da0000;
}

.form_section form .custom_upload .upload_box,
.talented_form .custom_upload .upload_box {
  background-color: #f7f7f7;
  border: 1px solid #f7f7f7;
  border-radius: 8px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  grid-gap: 15px;
}

.form_section form .custom_upload .upload_box img {
  width: 45px;
  height: 45px;
}

.form_section form .custom_upload .upload_box .upload_desc {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.form_section form .custom_upload .upload_box .upload_desc h3 {
  color: #dc8851;
  font-family: "DINNextLTArabic-Medium";
  font-size: 13px;
  line-height: 20px;
  text-transform: capitalize;
}

.form_section form .custom_upload .upload_box .upload_desc p {
  color: #423e1f;
  font-family: "DINNextLTArabic-Regular";
  font-size: 12px;
  line-height: 20px;
  text-transform: capitalize;
}

.form_section form .custom_upload .upload_box label,
.talented_form .custom_upload .upload_box label {
  background: transparent;
  border: 1px solid #dc8851;
  border-radius: 8px;
  padding: 8px 10px;
  color: #dc8851;
  font-family: "DINNextLTArabic-Regular";
  cursor: pointer;
}

.form_section form .custom_upload .upload_box label.green-btn {
  padding: 12px 10px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: "DINNextLTArabic-Bold";
  font-size: 14px;
  background-color: #2f5252;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
}

.form_section form .custom_upload .upload_box input[type="file"],
.talented_form .custom_upload .upload_box input[type="file"] {
  display: none;
}

.form_section form input:disabled {
  cursor: not-allowed;
  background-color: #cbcbcb;
}

.form-control:focus {
  border: initial;
  outline: initial;
  box-shadow: initial;
}

.form_section form .form_input,
.form_section form select,
.form-control {
}

.first_calender,
.second_calender {
  width: 50%;
}

.first_calender input {
  border-radius: initial !important;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border-right: 1px solid #ddd !important;
}

.second_calender input:disabled {
  border-radius: initial !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  background-color: #f7f7f7 !important;
}
/* Style the custom select element */
.custom-select {
  position: relative;
  width: 200px;
  height: 40px;
  border: 1px solid black;
  cursor: pointer;
}

/* Style the selected value */

/* Style the list of options */
.options-list {
  display: none; /* hide the list by default */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: white;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  z-index: 1;
}

/* Style the list items */
.options-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 5px; /* add some space between the items */
}

/* Style the list items on hover */
.options-list li:hover {
  background-color: rgb(247 247 247);
}

form .custom-select .select_arrow_icon {
  position: absolute;
  right: 20px; /*need changes in arabic*/
}

form .custom-select > div svg {
  /* text-align: right; */
  color: #ddd;
}

.form_section form input:disabled,
.form_section form .form_input,
.form_section form select,
.form-control,
.custom-select,
.custom_textArea,
.select-selected,
.custom-textArea {
  border: 1px solid #f7f7f7;
  border-radius: 8px;
  padding: 10px 16px;
  width: 100%;
  font-family: "DINNextLTArabic-Regular";
  color: #423e1f;
  font-size: 14px;
}

.form_section form .custom_textArea {
  padding: 10px 16px 35px;
}

.form_section form .form_box {
  border: 2px solid #f1f1f1;
  width: 100%;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.animal_child {
  margin-bottom: 30px;
}

.form_section form .form_box .row,
.animal_child .row {
  row-gap: 20px;
  margin-bottom: 0;
}

.form_section form .formDeleteBtn {
  background-color: transparent;
  border: none;
  width: 20px;
  cursor: pointer;
}

.form_section form input::placeholder {
  color: #999;
  text-transform: capitalize;
}

.form_section .plate_inputs {
  gap: 24px;
}

.form_section .plat_letter {
  width: 13.333% !important;
}

.form_section .plate_num {
  width: 60% !important;
}

.form_section .Permissions_add_btn {
  width: 100%;
  border: 1px solid #dc8851;
  padding: 11px;
  border-radius: 8px;
  background-color: transparent;
  color: #dc8851;
  font-size: 16px;
  font-family: "DINNextLTArabic-Regular";
  cursor: pointer;
}

.terms_conditions p {
  cursor: pointer;
  color: #423e1f;
  font-size: 14px;
  font-family: "DINNextLTArabic-Regular";
  display: inline-block;
  text-decoration: underline;
}

.submit_btn {
  width: 100%;
  background-color: #dc8851;
  border: 1px solid #dc8851;
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  font-family: "DINNextLTArabic-Medium";
  font-size: 16px;
  margin-top: 30px;
  cursor: pointer;
}

.form_section .form-group {
  position: relative;
}

.form_section .form-group input::placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.25);
  font-weight: 700;
}

.form_section .calender_icon {
  position: absolute;
  top: 5px;
  right: 10px;
  color: rgba(0, 0, 0, 0.25);
}

.form_section .calender_icon svg {
}

.datepicker-dropdown {
  width: 270px;
  padding: 0.5rem;
  overflow: hidden;
  vertical-align: top;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  transition: margin 0.3s;
  border: initial;
  overflow: hidden;
}

.table-condensed {
  width: 100%;
  /* border-spacing: 0 10px; 
  border-collapse: separate;  */
}

.table-condensed td {
  height: 30px;
  width: 24px;
  min-width: 24px;
}

.table-condensed thead td:nth-child(2) {
  border-bottom: 1px solid #f0f0f0;
}

.table-condensed thead {
  text-align: center;
}

.table-condensed thead tr:nth-child(2) {
  padding: 0 8px;
  color: rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid #f0f0f0;
}

.table-condensed .day {
  font-family: DINNextLTArabic-Regular;
  cursor: pointer;
}

.table-condensed td.disabled {
  color: rgba(0, 0, 0, 0.25);
  pointer-events: none;
  background-color: rgb(245 245 245);
}

.datepicker-switch {
  font-weight: 500;
  font-size: 15px;
  line-height: 40px;
  color: #333;
  cursor: pointer;
  transition: color 0.3s;
}

.datepicker-switch:hover {
  color: #1890ff;
}

.table-condensed .prev,
.table-condensed .next {
  color: #ddd;
}

.table-condensed .dow {
  color: rgba(0, 0, 0, 0.85);
  line-height: 30px;
  font-size: 15px;
  font-weight: normal;
}

.fa-calendar {
  color: rgba(0, 0, 0, 0.25);
}

.input-group-append {
  cursor: pointer;
}

.form_section .form_desc {
  margin-block: 50px;
  text-align: center;
}

.form_section .form_desc p {
  font-family: "DINNextLTArabic-Regular";
  font-size: clamp(18px, 5vw, 24px);
  color: #fff;
}

.form_section .form_desc a {
  text-align: center;
  font-family: "DINNextLTArabic-Regular";
  font-size: clamp(18px, 5vw, 34px);
  color: #fff;
}

/* end permission forms */

/* start profile styles */

.profile_data {
  width: 100%;
  height: auto;
  padding: var(--padding-sections);
  background-color: var(--main-color);
}

.profile_data .profile_overview {
}

.profile_data .profile_overview .profile_overview_info {
  padding-bottom: 60px;
  border-bottom: 1px solid #e3e2e2;
}

.profile_data .profile_overview .profile_overview_info > div {
  font-family: DINNextLTArabic-Regular;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.4);
}

.profile_data .profile_overview .profile_overview_info .active {
  cursor: pointer;
  background: linear-gradient(
    270deg,
    rgba(220, 136, 81, 0.2) 4.07%,
    rgba(220, 136, 81, 0) 94.99%
  );
  color: #f68c3d;
  border-radius: 16px;
  padding: 12px;
  margin: 0;
}

.profile_data .profile_overview .profile_overview_logout {
  padding: 20px 0;
}

.profile_data .profile_overview .profile_overview_logout button {
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  gap: 11px;
  font-family: DINNextLTArabic-Regular;
  font-size: 18px;
  color: #3a3619;
}

.profile_data .profile_overview .profile_overview_logout img {
  width: 20px;
  height: 25px;
}

.profile_data .profile_permissions {
}

.profile_data .profile_permissions .profile_permissions_header button {
  border-radius: 8px;
  font-size: 17px;
}

.profile_permissions_box .profile_box_info,
.profile_permissions_box .profile_box_date {
  width: 100%;
}

.profile_permissions_box .profile_box_info > div:not(:last-child),
.profile_permissions_box .profile_box_date > div:not(:last-child) {
  width: 35%;
}

.profile_permissions_box .profile_box_info > div:last-child,
.profile_permissions_box .profile_box_date > div:last-child {
  width: 18%;
}

.profile_permissions_box h6 {
  line-height: 25px;
}

.profile_permissions_box span {
  opacity: 0.6;
}

.profile_box_info .profile_box_icon,
.profile_box_date .profile_box_icon {
  background-color: #f7f7f7;
  padding: 12px;
  border-radius: 6px;
  line-height: 1;
  display: flex;
  flex-shrink: 0;
  height: 46px;
}

.profile_box_info img,
.profile_box_date img {
  max-width: 22px;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* end profile styles */

/* start talented styles */
.talented_form {
}

.talented_form > div {
  margin-bottom: 30px;
}

.talented_form .talented_data > div {
  width: 23%;
  margin-bottom: 30px;
}

.talented_form .talented_data {
}

.talented_form label {
  margin-bottom: 10px;
}

.talented_form input,
.talented_form .select-selected {
  background-color: transparent !important;
  color: #ddd;
  border: 1px solid #f7f7f7;
  border-radius: 8px;
  padding: 10px 16px;
  width: 100%;
  font-family: DINNextLTArabic-Regular;
  font-size: 14px;
}

.talented_form input::placeholder {
  color: #ddd;
}

.custom-textArea {
  background-color: transparent;
  color: #ddd;
}

.talented_form .upload_box {
  background-color: transparent !important;
  border: 1px dotted #fff !important;
  max-width: 100px;
  height: 200px;
  text-align: center;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.talented_form .upload_box label.plus-chooseFile {
  color: #fff;
  border: initial;
  text-align: center;
}

.talented_form .custom_upload {
}

.envir_data .localCommunity_desc {
  color: #fff;
  font-size: clamp(18px, 10vw, 25px);
  font-family: DINNextLTArabic-Bold;
  margin-top: 40px;
  margin-bottom: 20px;
}

.envir_data .activitiesPdf {
  background: hsla(0, 0%, 100%, 0.349);
  border-radius: 8px;
  padding: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.envir_data .activitiesPdf a {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.envir_data .activitiesPdf a .downloadDesc {
  display: flex;
  gap: 30px;
  align-items: center;
}

.envir_data .downloadDesc img {
  width: 50px;
  height: 50px;
}

.envir_data .downloadDesc p {
  color: #fff;
  font-family: DINNextLTArabic-Regular;
  font-size: 20px;
  margin-bottom: 0 !important;
}

.envir_data .downloadIcon img {
  width: 24px;
  height: 24px;
}
/* end talented styles */

/* start system page styles */
.grid-swiper,
.wild-grid-swiper {
  width: 100%;
  /* height: 100%; */
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.swiper-grid-column > .swiper-wrapper {
  flex-direction: initial;
  align-items: center;
  row-gap: 40px;
}

.grid-swiper .swiper-slide .system-card,
.wild-grid-swiper .swiper-slide {
  font-size: 18px;
  background: #fff;
  color: #000;
  border-radius: 5px;
  /* height: calc((100% - 30px) / 3) !important; */
  /* height: 25%; */
  margin-right: 30px;
  margin-top: 30px;
  padding: 20px;
}

.grid-swiper .swiper-slide .slide-date {
  color: #a8a7a7;
  font-weight: normal;
  font-size: 16px;
}

.grid-swiper .swiper-slide .slide-date .date {
}

.grid-swiper .swiper-slide .slide-content {
  margin: 20px 0;
}

.grid-swiper .swiper-slide .slide-content h5 {
  color: orange;
}

.grid-swiper .swiper-slide .slide-footer {
  justify-content: space-between;
  padding: 20px 0;
  border-top: 1px solid #b9b8b8;
  flex-wrap: wrap;
  row-gap: 10px;
}

.grid-swiper .swiper-slide .slide-footer .partion {
}

.grid-swiper .swiper-slide .slide-footer .footer-pdf {
}

.grid-swiper .swiper-slide .slide-footer .footer-pdf img {
  width: 30px;
  height: 30px;
}

.grid-swiper .swiper-slide .slide-footer .footer-pdf span {
}

.grid-swiper .grid-swiper-controller {
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-swiper .swiper-pagination {
  width: auto;
  position: initial;
  padding: 0 20px;
}

.grid-swiper .swiper-button-prev {
  left: 0 !important;
  top: 50%;
}

.grid-swiper .swiper-button-next {
  right: 0 !important;
  top: 50%;
}

.grid-swiper .swiper-button-next,
.grid-swiper .swiper-button-prev {
  width: 40px;
  height: 40px;
  background-color: rgb(241, 164, 21);
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

.grid-swiper .swiper-button-prev:after,
.grid-swiper .swiper-button-next:after {
  font-size: 15px;
  font-weight: bold;
}

.grid-swiper .swiper-button-next:after,
.grid-swiper .swiper-rtl .swiper-button-prev:after {
  content: "next" !important;
}

.grid-swiper .swiper-button-prev:after,
.grid-swiper .swiper-rtl .swiper-button-next:after {
  content: "next" !important;
}

.grid-swiper .swiper-pagination-bullet {
  color: #fff !important;
  background-color: initial;
  font-size: 18px;
  opacity: initial;
  line-height: 20px;
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 10px) !important;
}

.grid-swiper .swiper-pagination-bullet-active {
  width: 40px;
  height: 40px;
  background-color: #fff;
  color: #000 !important;
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
}

/* end system page styles */

/* start system details */
.system-details-content {
}

.system-details-content p {
  font-size: 18px;
  font-weight: normal;
}

.intro-banner .wild-deer {
  position: absolute;
  width: 400px;
  height: 300px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.intro-banner .wild-deer {
  max-width: 100%;
  max-height: 100%;
}

.wild-grid-swiper .wild-swiper-slide {
    position: relative;
    background-image: url("/images/png/BG2.webp");
    background-size: cover;
    height: 350px;
    z-index: 1;
    overflow: hidden;
    border-radius: 8px;
}

.wild-grid-swiper .wild-swiper-slide::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(180deg, rgba(63, 96, 97, 32%), #b59b6f 87%);
  /* background: linear-gradient(177.91deg, #b59b6f 5.6%, #3c5152 98.24%); */
  z-index: 2;
}

.wild-grid-swiper .swiper-slide .wild-slide-content {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.wild-grid-swiper .swiper-slide .wild-grid-img {
  position: absolute;
  width: 45%;
  height: 100%;
  right: 0px; /*need restyle in rtl*/
  top: 50%;
  transform: translateY(-50%);
}

.wild-grid-swiper .swiper-slide .wild-grid-img img {
  max-width: 100%;
  height: 90%;
}

.wild-grid-swiper .swiper-slide .wild-grid-desc {
  position: absolute;
  width: 55%;
  left: 0; /*need restyle in rtl*/
  bottom: 10px;
  color: #fff;
}

.wild-grid-swiper .swiper-slide .wild-grid-desc p {
  line-height: 30px;
}

.wild-grid-swiper .swiper-slide .wild-grid-desc .wild-grid-head i {
  font-size: 28px;
}

.wild-grid-swiper .swiper-slide .wild-grid-desc .wild-grid-head h3 {
  margin: 0;
  padding: 0;
}

/* end syystem details */

/* start wild life index */

/* end wild life index */

/* start Ostritch */
.Ostritch .about_overlay {
  align-items: initial;
  text-align: initial;
}

.Ostritch .about_overlay i {
  font-size: 40px;
}

.Ostritch .about_overlay h1 {
  margin-right: auto; /* need style in rtl */
  font-size: clamp(30px, 7vw, 45px);
}

.Ostritch .wild-deer {
  right: 0; /* need style in rtl */
}

.Ostritch-map {
  padding: 40px 0 120px;
}

.Ostritch-map .map-img,
.Ostritch-map .map-img img {
  height: 100%;
}

.Ostritch .wild-deer img {
  transform: rotateY(180deg);
}

.oStritch-imgs img {
  width: 170px;
  height: 150px;
}

/* end Ostritch */

/* start contact us page */
.contact-box {
  background-color: rgb(178 162 130 / 30%);
  padding: 20px 20px 40px 20px;
  border-radius: 8px;
  line-height: 40px;
  margin-bottom: 20px;
}

.contact-box h3 {
  margin-bottom: 10px;
}

.contact-box .contact-box-phone {
  font-family: DINNextLTArabic-Regular;
}

.contact-box .contact-box-phone i,
.contact-box .contact-box-mail i {
  font-size: 20px;
  margin-right: 8px; /* need rtl style */
}

.contact-box .contact-box-phone :nth-child(2),
.contact-box .contact-box-mail :nth-child(2) {
  font-size: 20px;
  margin-right: 10px;
  font-family: DINNextLTArabic-Regular;
}

.contact-box .contact-box-mail {
}

.contact-form input,
.contact-form .select-selected,
.contact-form textarea,
.contact-form .captcha {
  margin-bottom: 20px;
}

.contact-form input:focus {
  outline: none;
}

.contact-form input::placeholder {
  color: #aaa8a8;
}

.contact-form .select-selected {
  background-color: transparent !important;
  color: #ddd;
}

.contact-form .captcha {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

.contact-form .captcha label {
  color: #242424;
}

/* end contact us page */

/* start events-update page styles */
.event-header {
  background-color: var(--sub-main-color);
  width: 100%;
  height: 200px;
  position: relative;
  height: 51px;
}

.event-sections-title {
  margin: 0 20px;
  display: flex;
  border-radius: 10px;
  background-color: transparent;
  height: 51px;
  overflow: hidden;
  width: 320px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -25px;
}

#datepicker .datepicker-inline {
  width: 100%;
  background-color: #fff;
}

#datepicker .datepicker-inline tbody {
  border: 1px solid var(--sub-main-color);
}

#datepicker .datepicker-inline tbody tr {
  height: 150px;
}

#datepicker .datepicker-inline tbody tr td {
  border-right: 1px solid var(--sub-main-color);
  border-bottom: 1px solid var(--sub-main-color);
}

#datepicker .datepicker th {
  padding: 20px 0;
}

#datepicker .table-condensed .dow {
  border: initial;
  border-radius: initial;
  background-color: var(--sub-main-color);
  border: 1px solid var(--sub-main-color);
  color: #fff;
  padding: 10px 0;
}

/* start national day page styles */
.nationalDay-calender {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.nationalDay-calender i {
  font-size: 38px;
}

.nationalDay-content {
  background-color: #fff;
  padding: 30px 25px;
  border-radius: 15px;
  color: #000;
}

.nationalDay-content .nationalDay-img {
}

.nationalDay-content .nationalDay-img img {
}

.nationalDay-content .nationalDay_desc {
}

.talented_form .upload_box.nationalDay {
  border: 1px dashed #000 !important;
  width: 50% !important;
  max-width: 50% !important;
  height: 60px;
  padding: 0px;
  border-radius: initial;
  justify-content: initial !important;
}

.talented_form .custom_upload .upload_box label {
  padding: 0 10px !important;
  margin: 0 !important;
}

.talented_form .custom_upload .upload_box label img {
  margin-right: 10px;
}

.upload_box .national-downloadIcon {
  width: 40px;
  height: 60px;
}

.nationalDay-content .imgs-gallery {
  padding: 20px 0;
}

.nationalDay-content .imgs-gallery h4 {
  color: #000;
  font-weight: bold;
  margin-bottom: 60px;
}

.imgs-gallery .swiper-slide {
  border-radius: 5px;
  height: 355px;
  overflow: hidden;
}

.imgs-gallery .swiper-slide .swiper-slide-img {
  height: 100%;
  width: 80%;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.imgs-gallery .gallery-thumbs {
  width: 80%;
}

.imgs-gallery .swiper-button-next {
  top: 50%;
  right: 20px !important;
}

.imgs-gallery .swiper-button-prev {
  top: 50%;
  left: 20px !important;
}

.imgs-gallery .swiper-button-next:after,
.imgs-gallery .swiper-rtl .swiper-button-prev:after,
.imgs-gallery .swiper-button-prev:after,
.imgs-gallery .swiper-rtl .swiper-button-next:after {
  content: "next" !important;
  color: gray;
  font-weight: bold;
}

.imgs-gallery .swiper-slide-thumbs {
  height: 100px;
}

.imgs-gallery .swiper-slide-thumbs img {
  height: 100%;
}

.shared-actions {
  margin-top: 40px;
  border-top: 1px solid #949393;
}

.shared-actions h3 {
  margin-bottom: 40px;
}

.shared-actions .sharedActions-box {
  padding: 20px;
  border: 1px solid #585858;
  border-radius: 10px;
  margin-bottom: 20px;
}

.shared-actions .sharedActions-box h4 {
  color: var(--orange-color);
  margin-bottom: 25px;
}

.shared-actions .sharedActions-box .addEvent {
  cursor: pointer;
}

.shared-actions .sharedActions-box i {
  color: var(--orange-color);
  margin-right: 10px;
}

.shared-actions .sharedActions-box i.myArrow {
  font-size: 20px;
}

.shared-actions span {
  color: #737171;
}

/* start FAQ page styles */
.FAQ-form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  margin-top: 50px;
}

.FAQ-form button[type="submit"] {
  background-color: #fff;
  border-radius: 5px;
  border: none;
  box-shadow: 0px 0px 5px #ccc;
  cursor: pointer;
  font-size: 16px;
  padding: 20px;
  margin-left: -5px;
}

.FAQ-form .faq-search {
  padding: 20px;
  border-radius: 5px;
  border: none;
  box-shadow: 0px 0px 5px #ccc;
  font-size: 16px;
  width: 100%;
  margin-right: -5px;
}

.FAQ-form i.fa.fa-search {
  color: #555;
}

.FAQ-accordion .accordion-flush .accordion-item {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.FAQ-accordion .accordion-button {
  padding: 1.3rem 1.25rem;
}

.FAQ-accordion .accordion-header i {
  color: var(--orange-color);
  transform: rotateY(180deg);
  margin-right: 10px;
  font-size: 20px;
}

.FAQ-accordion .accordion-button::after {
  font-size: 22px;
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  background-image: initial;
  color: var(--orange-color);
}

.FAQ-accordion .accordion-body {
  color: #797878;
}

/* end FAQ page styles */

/* start images and videos gallery  */
.swiper-slide,
.swiper-slide-next,
.swiper-slide-active {
  margin-top: 0 !important;
}

.img-card {
  position: relative;
  aspect-ratio: 5 / 3;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 30px;
}

.img-card .BG-img {
  width: 100%;
  height: 100%;
}

.img-card .BG-img img {
  object-fit: cover;
}

.img-card .card-desc {
  position: absolute;
  bottom: 10px;
  left: 20px; /* need rtl style */
  display: flex;
  flex-direction: column;
}

.img-card .card-desc .img-title {
  width: fit-content;
}

.img-card .card-desc .img-title i {
  color: var(--orange-color);
  font-size: 24px;
}

.img-card .card-desc h3 {
  font-size: 20px;
}

.img-card .card-desc .img-date {
  align-self: flex-end;
  font-size: 11px;
  margin-top: 10px;
  margin-right: 20px;
}
/* end images and videos gallery */

/* start king abdelaziz palace */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
}

.gallery img {
  width: 100%;
  height: 100%;
}

.gallery .img-desc {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #cccbcb;
  align-items: center;
}

.gallery .img-desc i {
  color: #7a7a7a;
  font-size: 22px;
}

.first {
  width: 35%;
  height: 420px;
  position: relative;
}

.second {
  width: 22%;
  height: 280px;
  position: relative;
}

.third {
  width: 38%;
  height: 280px;
  position: relative;
}

.four {
  width: 35%;
  height: 200px;
  position: relative;
}

.five {
  width: 35%;
  height: 340px;
  position: absolute;
  left: calc(35% + 20px);
  top: 300px;
}

.six {
  position: absolute;
  left: calc(70% + 40px);
  top: 300px;
  width: 25%;
  height: 340px;
}

.seven {
  height: 400px;
}

.eight {
  height: 400px;
}

@media (min-width: 992px) {
  .firstCol-img1 {
    width: 350px;
    height: 440px;
    max-width: 100%;
    overflow: hidden;
  }

  .firstCol-img2 {
  }

  .secondCol-img1 {
    width: 250px;
    height: 300px;
    overflow: hidden;
    position: absolute;
  }

  .secondCol-img2 {
    width: 440px;
    height: 300px;
    overflow: hidden;
    position: absolute;
    top: -145px;
  }

  .thirdCol-img1 {
    width: 400px;
    height: 300px;
    margin-left: -96px;
    overflow: hidden;
  }

  .thirdCol-img2 {
    width: 260px;
    height: 300px;
    margin-left: 50px;
    overflow: hidden;
    position: absolute;
    left: 50px;
    top: -145px;
  }
}

/* end king abdelaziz palace */

/* end national day page styles */
@media only screen and (max-width: 600px) {
  .event-sections-title {
    margin: 0 auto;
    width: 80%;
  }
}

.event-sections-title .events {
  width: 40%;
}

.event-sections-title .events-calender {
  width: 60%;
}

.event-sections-title .events,
.event-sections-title .events-calender {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  background-color: #fff;
  color: #000;
  padding: 12px;
}

.event-sections-title .events.active i,
.event-sections-title .events-calender.active i {
  color: #fff;
}

.event-sections-title .events i,
.event-sections-title .events-calender i {
  color: var(--orange-color);
  font-size: 25px;
}

.event-sections-title .events.active,
.event-sections-title .events-calender.active {
  background-color: var(--orange-color);
  color: #fff;
}

.event-sections-title .events-calender {
}

.swiper-slide.event-swiper-slide {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}

.swiper-slide.event-swiper-slide .card-body {
  padding: 0;
}

.swiper-slide.event-swiper-slide .card-body .card-img {
  height: 320px;
}

.swiper-slide.event-swiper-slide .card-body .card-img img {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.swiper-slide.event-swiper-slide .card-body .card-content {
  padding: 20px;
}

.swiper-slide.event-swiper-slide .card-body .card-content h5 {
  font-weight: bold;
}

.swiper-slide.event-swiper-slide .card-body .card-content p {
  line-height: 30px;
  color: #3b3939;
}

.swiper-slide.event-swiper-slide .card-body .card-footer {
  display: flex;
  justify-content: space-between;
  border: initial;
  padding: 20px;
  font-weight: normal;
}

.swiper-slide.event-swiper-slide .card-body .card-footer .card-calender {
}

.swiper-slide.event-swiper-slide .card-body .card-footer .card-calender i {
  color: var(--orange-color);
}

.swiper-slide.event-swiper-slide .card-body .card-footer .card-calender span {
  color: gray;
}

.swiper-slide.event-swiper-slide .card-body .card-footer a {
  color: var(--orange-color);
}
/* end events-updates page style */

/* start mohafazt */
.img-card-title {
  position: absolute;
  bottom: 20px;
  left: 40px;
  color: #fff;
}

.img-card-title h2 {
  font-weight: bold;
}

.tourism-area-card {
  border: 1px solid #fff;
  padding: 20px;
  border-radius: 10px;
  margin-top: 30px;
  position: relative;
}

.tourism-area-card i {
  position: absolute;
  right: 20px;
  top: 20px;
}

/* end mohafazat */

.display_block {
  display: block;
}

.display_none {
  display: none;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .reserve-section .reserve-description {
    margin-bottom: 30px;
  }

  .reserve-section .map {
    text-align: center;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
  .header-menue .register {
    display: none;
  }

  .header-nav {
    background-color: #dc8851;
    backdrop-filter: initial;
  }

  header .allIcons {
    display: none;
  }

  .header-icon {
    display: block;
  }

  .light_header .allIcons {
    display: none;
  }

  .light_header {
    padding: 10px;
  }

  header .logo_ITBA {
    width: 150px;
    max-width: 150px;
    margin: 0;
  }

  header .logo_ITBA img {
    max-width: 100%;
  }

  .header-nav .container-header {
    flex-direction: column;
    align-items: center;
    /* justify-content: space-around; */
  }

  .header-nav .header-news {
    order: 4;
    width: 100%;
    height: fit-content;
  }

  .header-nav .header-news p {
    font-size: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-nav .container-header {
    padding: 0;
  }

  .header-nav .header-news .date {
    text-align: center;
  }

  .header-nav ul {
    order: 1;
  }

  .login-responsive {
    /* display: block; */
    width: 70%;
    order: 2;
  }

  .header-nav .header-email {
    order: 3;
  }

  .header-nav .container-header .close-menue {
    top: -10px;
    left: 14px;
    font-size: 40px;
  }

  .header-icon .translate-responsive {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    color: #fff;
  }

  .tourist_data {
    height: auto;
  }

  .tourist_form-container {
    margin: auto;
    text-align: center;
    padding: 20px;
  }

  .tourism {
    flex-direction: column;
  }

  .tourism .tourism-details {
    flex-direction: column;
  }

  .tourism .tourism-imgs {
    padding-left: 12px;
    padding-right: 12px;
    align-items: center;
    /* justify-content: center; */
  }

  .tourism .tourism-imgs .img-box {
    height: 320px;
    width: 45%;
  }

  .wildLife-swiper {
    margin-top: 0;
  }

  .swiper-button-next,
  .swiper-button-prev {
    bottom: 0;
  }

  .swiper-button-next {
    right: 35% !important;
  }

  .swiper-button-prev {
    left: 35% !important;
  }

  .wildLife-swiper {
    flex-direction: column;
    align-items: center;
  }

  .wildLife-swiper .wildLife-swiper-img {
    padding: 0 12px;
    width: 100%;
    /* width: 245px; */
  }

  .reserve-section .map .svg_map svg {
    width: 100%;
    height: 400px !important;
    position: absolute !important;
    left: 30% !important;
  }

  .static_map_area {
    display: none;
  }

  .allFormInputs {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .tourism .tourism-icons p {
    font-size: 13px;
  }

  .main_login {
    flex-direction: column;
  }

  .main_login .logo {
    width: 100%;
  }

  .main_login .login {
    width: 100%;
  }

  .main_login .login form {
    width: 90%;
  }

  .main_login .login form button {
    width: 93%;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
  /* .header-nav .container-header {
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  .header-nav .header-news {
    order: 4;
    width: 100%;
    height: fit-content;
    flex-direction: row;
    justify-content: left; 
    background: linear-gradient(270deg, #3f6061, rgba(63, 96, 97, 0));
  }

  .header-nav .header-news .round_img {
    width: 100px !important;
    height: 100px !important;
  }
  .header-nav .header-news .round_img img {
    width: 100% !important;
    height: 100%;
  }
  .header-nav .header-news button {
    margin: 0;
  }

  .header-nav .container-header {
    padding: 0;
  }
  .header-nav .header-news .date {
    text-align: center;
  }
  .header-nav ul {
    order: 1;
  }

  .login-responsive {
  
    width: 70%;
    order: 2;
  }
  .header-nav .header-email {
    order: 3;
  } */
  .tourism .tourism-details {
    flex-direction: column;
  }

  .tourism .tourism-icons {
    flex-direction: row;
    justify-content: space-around;
  }

  .tourism .tourism-icons .icon-box {
    margin-bottom: 40px;
  }

  .tourism .tourism-imgs {
    justify-content: center;
    gap: 20px;
  }

  .tourism .tourism-imgs .img-box a {
    font-size: 16px;
  }

  .tourism .tourism-imgs .img-box {
    height: 320px;
    width: 45%;
  }

  .allFormInputs {
    /* flex-direction: column; */
    align-items: center;
    justify-content: space-between;
  }

  .subscribe .allFormInputs .input-filed {
    width: 100%;
    max-width: 100%;
  }

  .register-btn {
    width: 100%;
    max-width: 100%;
  }

  .justify-content-end {
    justify-content: center !important;
    /* z-index: 99; */
  }

  .local-community .swiper-slide,
  .news .swiper-slide {
    height: 500px;
  }

  .switch-swiper {
    gap: 80px;
  }

  .talented_form .talented_data > div {
    width: 100%;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .header-nav .header-news .round_img {
    width: 50%;
  }
}

.animated-icons .top {
  animation: movingBetweenSection 1s linear infinite;
  animation-delay: 0.7s;
}

.animated-icons .bottom {
  animation: movingBetweenSection 1s linear infinite;
  animation-delay: 0.9s;
}

@keyframes movingBetweenSection {
  0% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  21%,
  100% {
    opacity: 0.5;
  }
}
.page-gradient-bg {
  background-color: #3f6061;
  padding: 50px 0;
}
.triggable-input {
    display: none;
}
.generic-tabs .choices_list {
    border-right: initial !important;
}
 .generic-tabs .choices_list li.active, .generic-tabs .choices_list li:hover {
     background-color: initial !important;
}
.animal_icon.active p, .plant_icon.active p {
    color: var(--orange-color);
}
.animal_icon img,
.plant_icon img {
    width: 50px;
    height: 50px;
    cursor: pointer;
    filter: brightness(300%);
}
.animal_icon.active img, .plant_icon.active img {
    filter: hue-rotate(357deg);
}