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

:root {
  --main-card-shadow                 : 0px 4px 20px 0px #0000001a;
  --main-color                       : #488253;
  /* --primary-color                 : #818188; */
  --secondary-color                  : #141414;
  --primary-white-color              : #fff;
  --gray-color                       : #f7f8fa;
  --dark-gray-color                  : #c4c4c2;
  --gray-text-color                  : #8f8e8e;
  --rounded-sm                       : 0.5rem;
  --line-border-fill                 : #0c5adb;
  --line-border-empty                : #eaecf0;
  --accordion-button-background-color: #015184;
  --director-card-background-color   : #01518412;
  --navigaion-active-color           : #c9ac80;
  --navigation-hover                 : #c9ac802c;
  --search-btn-flying-navbar-hover   : #fff;
  --searchBarOpen-btn                : #c9ac80;
  --searchBarOpen-bg-color           : rgba(0, 46, 97, 0.4);
  --navigation-scrolled-background   : #ffffff;
  --navigation-boxshadow             : 0px 20px 20px 0px #b6b6b640;
  --animation-transition             : all 0.3s ease-out;
  --navbar-border-color              : rgba(20, 20, 20, 0.3);
}

.gold-gradient-text {
  background             : linear-gradient(90deg, #F0D097 0%, #D9B676 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
  /* for Firefox */
  color                  : transparent;
  min-height: 60px;
  /* fallback */
}


body {
  background-color: rgba(18, 18, 18, 1);
  color           : rgba(254, 254, 254, 1) !important;
}

ul li {
  font-size: 0.8rem;
}

.arabic-version ul li {
  font-size: 0.9rem;
}

ul li::marker {
  color    : white;
  opacity  : 0.6;
  font-size: 24px;
}

ul {
  padding-inline-start: 1.5rem;
}

@media (min-width: 2030px) {
  html {
    font-size: 22px;
  }
}

@media (min-width: 1800px) and (max-width: 2030px) {
  html {
    font-size: 19px;
  }
}

@media (max-width: 991.888888889px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  html {
    font-size: 13px;
  }
}

@media (min-width: 1600px) {

  .container,
  .container-fluid {
    max-width: 80%;
  }

  .container .container,
  .container .container-fluid,
  .container-fluid .container,
  .container-fluid .container-fluid {
    max-width: 100%;
  }
}

/* english fonts  */

@font-face {
  font-family : "Avenir";
  src         : url("/assets/fonts/Avenir\ LT\ Std\ 35\ Light.otf");
  font-weight : 100;
  font-style  : normal;
  font-display: swap;
}


@font-face {
  font-family : "Avenir";
  src         : url("/assets/fonts/Avenir\ LT\ Std\ 45\ Book.otf");
  font-weight : 300;
  font-style  : normal;
  font-display: swap;
}

@font-face {
  font-family : "Avenir";
  src         : url("/assets/fonts/Avenir\ LT\ Std\ 65\ Medium.otf");
  font-weight : 400;
  font-style  : normal;
  font-display: swap;
}




@font-face {
  font-family : "CenturyGothic";
  src         : url("/assets/fonts/CenturyGothic.ttf");
  font-weight : 400;
  font-style  : normal;
  font-display: swap;
}

@font-face {
  font-family : "CenturyGothic";
  src         : url("/assets/fonts/CenturyGothicBold.ttf");
  font-weight : 700;
  font-style  : normal;
  font-display: swap;
}

* {
  font-family: Avenir;
}

h1 {
  font-size  : 4rem;
  font-weight: 400;
  font-family: CenturyGothic;
}

h2 {
  font-size  : 2.5rem;
  font-weight: 400;
  font-family: CenturyGothic;
}

h3 {
  font-size  : 2rem;
  font-weight: 500;
}

h4 {
  font-size  : 1.5rem;
  font-weight: 500;
}

h5 {
  font-size  : 1rem;
  font-weight: 500;
}

p {
  font-size    : 1rem;
  font-weight  : 400;
  margin-bottom: unset !important;
}

li {
  font-size  : 1rem;
  font-weight: 400;
}

a {
  font-size  : 1rem;
  font-weight: 500;
}

span {
  font-size  : 1rem;
  font-weight: 500;
}

label {
  font-size  : 0.85rem;
  font-weight: 500;
}

th {
  font-size  : 0.8rem;
  font-weight: 400;
}

td {
  font-size  : 0.7rem;
  font-weight: 500;
}


/* For IE10 */
select::-ms-expand {
  display: none;
}

.arabic-version {
  direction: rtl;
}

/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */

/* section topic  */
.section-topic-left {
  display        : flex;
  justify-content: space-between;
  gap            : 1rem;
  margin-bottom  : 4rem;
}

.section-topic-circles {
  padding-top   : 13rem;
  padding-bottom: 13rem;
}

.section-topic-circles div {
  display        : flex;
  justify-content: center;
  align-items    : center;
  flex-direction : column;
  height         : 100%;
}

.section-topic-circles img {
  position          : absolute;
  width             : 500px;
  height            : 500px;
  inset-inline-start: 50%;
  inset-block-start : 50%;
  transform         : translate(-50%, -50%);
}

.arabic-version .section-topic-circles img {
  inset-inline-start: unset;
  inset-inline-end  : 50%;
}

.section-topic-circles h2 {
  width     : 70%;
  text-align: center;
}

.section-topic-circles h5 {
  opacity   : 0.6;
  text-align: center;
}

.about-intro-section p {
  opacity: 0.6;
}

@media (max-width: 991.89px) {
  .section-topic-left {
    flex-direction: column;
  }

  .section-topic-circles h2 {
    width: 80%;
  }
}

@media (max-width: 767.89px) {
  .section-topic-circles img {
    width: 100%;
  }


}

@media (max-width:575.89px) {
  .section-topic-circles img {
    width : 320px;
    height: 320px;
  }
}

@media (max-width: 400px) {


  .section-topic-circles h2 {
    width: 90%;
  }

}



.border-bottom-none {
  border-bottom: none !important;
}

/* buttons  */
.main-btn {
  background-color: transparent;
  color           : white;
  padding         : 10px 20px;
  border-radius   : 12px;
  border          : 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter : blur(48px);
  box-shadow      : 0px 0px 12px 0px rgba(255, 255, 255, 0.2) inset;
  font-size       : 1.125rem;
  text-decoration : none;
  display         : flex;
  justify-content : center;
  align-items     : center;
  gap             : 0.5rem;
}

.main-btn span {
  font-size: 0.8rem;
}

.main-btn i {
  font-size: 0.7rem;
}

.main-btn:hover {
  color: white;
}

.sub-btn {
  background-color: transparent;
  color           : white;
  padding         : 10px 0px;
  border-radius   : 12px;
  font-size       : 1.125rem;
  text-decoration : none;
  display         : flex;
  justify-content : center;
  align-items     : center;
  gap             : 0.5rem;
  width           : fit-content;
  flex-shrink     : 0;
}

.arabic-version .main-btn i {
  transform: scaleX(-1);
}

.sub-btn span {
  font-size: 0.8rem;
}

.sub-btn i {
  font-size: 0.7rem;
}

.sub-btn:hover {
  color: white;
}

.arabic-version .sub-btn i {
  transform: scaleX(-1);
}

.section-topic {
  display      : flex;
  color        : var(--main-color);
  padding-top  : 3rem;
  margin-top   : 3rem;
  margin-bottom: 3rem;
  gap          : 10px;
  align-items  : center;
}

.section-topic h2 {
  font-size: 28px;
}

.MW-table-box td {
  text-align: start;
}

/* pagination */

.research-report-pagination nav ul li a {
  border : none;
  outline: none;
  color  : #000;
}

.research-report-pagination nav ul li a:hover {
  background-color: transparent;
  color           : var(--primary-color);
}

.research-report-pagination .page-item .page-link {
  border-radius  : 100%;
  color          : var(--main-color);
  padding        : 0.4rem 1rem;
  background     : transparent;
  border         : solid var(--main-color) 1.5px;
  width          : 50px;
  aspect-ratio   : 1;
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.research-report-pagination .page-item.active .page-link {
  border-radius: 100%;
  width        : 50px;
  aspect-ratio : 1;
  color        : white;
  padding      : 0.4rem 1rem;
  border       : none;
  background   : rgba(201, 172, 128, 1);
}

.research-report-pagination .page-link.next,
.research-report-pagination .page-link.prev {
  color           : white;
  background-color: var(--main-color);
}

.research-report-pagination nav ul {
  gap          : 1rem;
  padding-top  : 0.5rem;
  margin-top   : 3rem;
  margin-bottom: 2rem;
}

.research-report-pagination .page-link.next i,
.research-report-pagination .page-link.prev i {
  transform: rotate(180deg);
}

.arabic-version .research-report-pagination .page-link.next i,
.arabic-version .research-report-pagination .page-link.prev i {
  transform: rotate(0deg);
}

@media (max-width: 767.888888888px) {
  .research-report-pagination {
    justify-content: center !important;
  }

  .research-report-pagination .page-item .page-link {
    width : 35px;
    height: 35px;
  }

  .research-report-pagination .page-item.active .page-link {
    width : 35px;
    height: 35px;
  }
}

@media (max-width: 400px) {
  .research-report-pagination nav ul {
    gap: 0.5rem;
  }
}

form div .main-btn {
  position : absolute;
  right    : 5px;
  top      : 50%;
  transform: translateY(-50%);
  padding  : 0.2rem 1rem;
}

form div .main-btn svg {
  fill: white;
}

form div .main-btn:hover svg {
  fill: var(--main-color);
}

.arabic-version div .main-btn {
  right: unset;
  left : 5px;
}

form textarea {
  border-radius: 5px;
  height       : 100px;
}

@media (max-width: 575px) {
  form .g-recaptcha {
    transform               : scale(0.77);
    -webkit-transform       : scale(0.77);
    transform-origin        : 0 0;
    -webkit-transform-origin: 0 0;
  }
}

.hover-growing-links {
  display        : flex;
  gap            : 0.4rem;
  position       : relative;
  color          : inherit;
  text-decoration: none;
  color          : var(--main-color);
  /* overflow    : hidden; */
  border-radius  : 25px;
  overflow       : hidden;
  outline        : none;
  align-items    : center;
  width          : max-content;
}

.hover-growing-links span {
  font-size: 0.8rem;
  color    : var(--main-color);
}

.arabic-version .hover-growing-links span {
  font-size: 0.85rem;
}

.hover-growing-links[data-hover-pos="start"] {
  padding-inline-start: 1rem;
}

.hover-growing-links[data-hover-pos="end"] {
  padding-inline-end: 1rem;
}

.hover-growing-links[data-hover-pos="start"]::after,
.hover-growing-links::after {
  position             : absolute;
  width                : 100%;
  height               : 100%;
  content              : "";
  top                  : 0;
  inset-inline-start   : 100%;
  transition           : all 0.3s ease-out;
  /* inset-inline-start: -100%; */
  background           : var(--main-color);
}

.hover-growing-links[data-hover-pos="end"]::after {
  inset-inline-start: -100%;
}

.hover-growing-links:hover[data-hover-pos="start"]::after {
  inset-inline-end: 0;
}

.hover-growing-links:hover[data-hover-pos="end"]::after,
.hover-growing-links:hover::after {
  transition        : all 0.3s ease-out;
  inset-inline-start: 0;
}

.hover-growing-links:hover[data-hover-pos="end"]::after {
  inset-inline-end: 0;
}

.hover-growing-links[data-hover-pos="end"]:hover i {
  transform : translateX(5px);
  color     : #fff;
  transition: all 0.3s ease-out;
}

.hover-growing-links[data-hover-pos="start"]:hover i {
  color       : #fff;
  transform   : rotate(-45deg) !important;
  /* transform: translateX(-5px) !important; */
  transition  : all 0.3s ease-out;
}

.arabic-version .hover-growing-links[data-hover-pos="start"]:hover i {
  transform: rotate(-150deg) !important;
}

.hover-growing-links i {
  position  : relative;
  z-index   : 3;
  transition: all 0.3s ease-out;
  color     : #fff;
}

.hover-growing-links>* {
  position  : relative;
  transition: all 0.3s ease-out;
  z-index   : 3;
}

.hover-growing-links:hover .link {
  transition: all 0.3s ease-out;

  position: relative;
  z-index : 3;
  color   : #fff;
}

.hover-growing-links .arrow {
  position        : relative;
  z-index         : 3;
  border-radius   : 100%;
  padding         : 0.5rem;
  width           : 35px;
  height          : 35px;
  display         : flex;
  justify-content : center;
  align-items     : center;
  aspect-ratio    : 1;
  border          : 1px solid var(--main-color);
  background-color: var(--main-color);
}


/* ======================================================================== */
/* inputs  */
/* ======================================================================== */

input[type="date"] {
  appearance        : none;
  /* For Chrome, Safari, Edge */
  -webkit-appearance: none;
  /* For WebKit browsers */
  -moz-appearance   : none;
  /* For Firefox */
  width             : 100%;
}

.date-wrapper {
  position: relative;
}

.date-wrapper::after {
  /* position: absolute; */
  inset-inline-end: 1rem;
  top             : 1px;
  /* background   : url("/assets/Icons svg/CalendarBlank.svg") no-repeat center; */
  width           : 3rem;
  height          : 95%;
  background-size : 1.75rem;
  border-radius   : 10px;

  content: "";
}

.arabic-version input[type="date"] {
  text-indent: 50%;
}

.date-wrapper:hover::after {
  filter: brightness(1.5);
}

/* Remove native date picker icon in Chrome/Safari */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* Remove native date picker icon in Firefox */
input[type="date"]::-moz-calendar-picker-indicator {
  /* display: none; */
  background: #000;
}

/* Remove any extra styling for focus in Firefox */
input[type="date"]::-moz-focus-inner {
  border: 0;
}

/* Remove native date picker icon in Edge */
input[type="date"]::-ms-clear {
  display: none;
}

/*  */
/* fancybox custom */
/*  */
.fancybox__container {
  z-index: 9999999;
}

/* remove un used btns */
/* right toolbar */
.fancybox__button--zoom,
.fancybox__button--slideshow,
.fancybox__button--fullscreen,
.fancybox__button--thumbs {
  display: none;
}

/* left toolbar */
.fancybox__toolbar__items--left {
  display: none;
}

/* remove fancybox thum  */
.fancybox__thumbs {
  display: none;
}

/* change arrows / x color  */
.fancybox__button--close {
  border-radius    : 12px;
  width            : 56px;
  height           : 56px;
  justify-content  : center;
  align-items      : center;
  border           : 2px solid rgba(254, 254, 254, 0.08);
  backdrop-filter  : blur(48px);
  box-shadow       : 0px 0px 12px 0px rgba(255, 255, 255, 0.2) inset;
  background-color : black;
  margin-inline-end: 1.5rem;
}

body:not(.is-using-mouse) .fancybox__container :focus {
  box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.2) inset;
}

.fancybox__button--close i {
  color: #fff !important;
}

.carousel__button svg {
  stroke: #ebca8f;
}

.carousel__button.is-prev {
  background-color   : #fff;
  background-image   : url(/assets/Icons/Vector.svg);
  background-repeat  : no-repeat;
  background-position: center center;
}

.carousel__button.is-next {
  background-color   : #fff;
  background-image   : url(/assets/Icons/Vector-reverse.svg);
  background-repeat  : no-repeat;
  background-position: center center;
}

.carousel__button.is-next svg,
.carousel__button.is-prev svg {
  display: none;
}

/* fancybox caption scroll  */
.fancybox__caption {
  height    : 5rem;
  overflow-y: auto;
  /* Default to no scrollbar */
}

.fancybox__caption::-webkit-scrollbar {
  width: 10px;
  /* Width of the scrollbar */
}

.fancybox__caption::-webkit-scrollbar-track {
  background   : #e2ebe2;
  /* Background color of the scrollbar track */
  border-radius: 10px;
  /* Rounding the track edges */
}

.fancybox__caption::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  /* Scrollbar thumb color */
  border-radius   : 10px;
  /* Rounding the thumb */
  border          : 3px solid #e2ebe2;
  /* Creates space around the thumb */
}

/* video fancybox  */

.fancybox__content>.carousel__button.is-close {
  background-color: var(--main-color);
  top             : -3rem;
}



@media (max-width:767.8888px) {
  .fancybox__button--close {
    margin-top: 1rem;
  }
}





/* servie global box  */

.services-section .service-box {
  display        : flex;
  flex-direction : column;
  justify-content: flex-start;
  padding        : 15px;
}

.services-section .service-box h5 {
  padding-top  : 1rem;
  margin-bottom: unset;
}

.services-section .service-box p {
  font-size: 0.8rem;
}

.services-section .service-box picture {
  padding        : 32px;
  width          : fit-content;
  display        : flex;
  justify-content: center;
  align-items    : center;
  border         : 2px solid rgba(254, 254, 254, 0.08);
  backdrop-filter: blur(48px);
  box-shadow     : 0px 0px 12px 0px rgba(255, 255, 255, 0.2) inset;
  border-radius  : 16px;
}

.services-section .service-box h4 {
  width: 85%;
}

@media (max-width:575.89px) {
  .services-section .service-box {
    padding    : 0;
    text-align : center;
    align-items: center;
  }
}

/* product global box  */
.product-box {
  border-radius: 16px;
  height       : 425px;
  overflow     : hidden;
  position     : relative;
}

.product-box::after {
  /*content   : "";*/
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(212.59deg, rgba(0, 0, 0, 0.1) -0.01%, #000000 90.04%);
  transition: all 0.3s ease;
}

.product-box img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.product-box h4 {
  position: absolute;
  bottom  : 20px;
  left    : 20px;
  color   : white;
  z-index : 2;
}

.product-box h5 {
  position: absolute;
  bottom  : 20px;
  left    : 20px;
  color   : white;
  z-index : 2;
}