:root {
  --btn: #5cb74e;
  --p: #a7a9ac;
  --FFFFFF: #fff;
  --span: #cc9;
  --h2: #385698;
  --transition: all 400ms ease;
}

* {
  padding: 0px;
  margin: 0px;
  outline: none;
  box-sizing: border-box;
  text-decoration: none !important;
  border: none;
}

body,
html {
  overflow-x: hidden !important;
}

body {
  font-family: "Almarai", sans-serif;
  background: #f9fafb;
}

a {
  text-decoration: none;
  color: initial;
}

::selection {
  color: var(--FFFFFF);
  background: var(--h2);
}

::-webkit-scrollbar-thumb {
  width: 100%;
  border-radius: 0.25rem;
  background-color: var(--h2);
}
form.formHero::-webkit-scrollbar {
      background: transparent !important;

}
::-webkit-scrollbar {
  width: 0.5rem;
  background: #e6dede !important;
}

ul {
  list-style: none;
}

h1,
h4,
h5,
h2,
h3,
h1 span,
h4 span,
h5 span,
h2 span,
h3 span {
  line-height: 1.5;
  font-weight: bold;
}

h1 {
  font-weight: 800;
}

a {
  color: inherit !important;
  transition: var(--transition);
}

a:hover {
  /* color: var(--color-primary); */
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
address,
ul,
label,
li {
  padding: 0;
  margin: 0px !important;
  /* line-height: normal !important; */
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
  text-transform: capitalize;
}

h2  , h1{
  font-weight: 900 !important;
}

/* p,
h6,
h5,
span,
button,
taple,
td, 
tr,
input,
label,
textarea,
a,
address,
ul,
li {
  font-family: "Poppins", sans-serif;

} */

/* ================================ */
/* .lang-nav p {
  font-family: "arabic_reg", sans-serif !important;
} */

.nav_mobile {
  display: none;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 0;
}

.nav_mobile .logo-img img {
  position: unset;
}

/* a.lang-nav   {
  font-family: "arabic_reg", sans-serif !important;
}
a.lang-nav p {
  font-family: "arabic_reg", sans-serif !important;
} */
.offcanvas {
  background: #293d69;
}
.offcanvas img{
  width: 60%;
}

.offcanvas-body .btn-nav-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
}
.navbar-toggler{
  display: none;
}

/* .offcanvas-header {
  padding: 30px;
} */

/* .offcanvas_body_direction .lang-nav p {
  font-size: 16px;
} */

/* .offcanvas_body_direction .lang-nav {
  background: transparent;
} */

.offcanvas-body .offcanvas_body_direction {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  color:#FFFFFF;
  gap: 60px;
  font-size: 16px;
}

button.btn-close {
  filter: invert(1);
}

.offcanvas-body li {
  list-style: none;
  padding: 20px 0;
  /* border-bottom: 1px solid #5c5876; */
  transition: var(--transition);
}

.offcanvas-body li:hover {
  padding-right: 10px;
}

.offcanvas-body li:last-of-type {
  border-bottom: transparent;
}

.offcanvas-body li:hover a {
  color: #fff !important;
}

.offcanvas-body li a {
  transition: var(--transition);
}

.offcanvas-body .offcanvas_body_direction a {
  font-size: 14px;
}

.offcanvas-body {
  /* padding: 50px 30px; */
}

.offcanvas-body .lang_gap_search {
  margin-left: 0;
  font-size: 14px;
}

/* h2 span {
 } */

.ctn-preloader {
  -webkit-box-align: center;
  align-items: center;
  cursor: none;
  display: -webkit-box;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  transition-delay: 1s;
  z-index: 999;
}

.ctn-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}

.ctn-preloader .loader-section {
  background: #020c20;
  height: 100%;
  position: fixed;
  top: 0;
  -webkit-transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
  transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
  width: calc(50% + 1px);
}

.ctn-preloader.loaded {
  cursor: auto !important;
  visibility: hidden;
  z-index: 0;
}

.ctn-preloader .loader-section.section-left {
  left: 0;
}

.ctn-preloader .loader-section.section-right {
  right: 0;
}

.loaded .animation-preloader {
  opacity: 0;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.loaded .loader-section.section-left {
  -webkit-transform: translateX(-101%);
  transform: translateX(-101%);
  -webkit-transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
  transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
}

.loaded .loader-section.section-right {
  -webkit-transform: translateX(101%);
  transform: translateX(101%);
  -webkit-transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
  transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2);
}

#myDiv {
  display: none;
  z-index: 9999;
  position: relative;
  width: 100%;
  height: 100%;
}

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

.cursor-inner {
  margin-left: 0;
  margin-top: 0;
  width: 10px;
  height: 10px;
  z-index: 10000001;
  background-color: var(--btn);
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cursor-inner.cursor-hover {
  margin-left: -40px;
  margin-top: -40px;
  width: 100px;
  height: 100px;
  background-color: var(--btn);
  opacity: 0.3;
}

.cursor-outer {
  margin-left: -25px;
  margin-top: -25px;
  width: 60px;
  height: 60px;
  border: 1px solid var(--btn);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  -webkit-transition: all 0.08s ease-out;
  -o-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}

.cursor-outer.cursor-hover {
  opacity: 0;
}

.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}

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

.overlay {
  position: fixed;
  width: 100%;
  z-index: 9999;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.866);
}

.popup {
  position: absolute;
  width: 100%;
  max-width: 600px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.popup__h2 {
  text-align: center;
}

.close-popup {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 23px;
  height: 23px;
  cursor: pointer;
}

.close-popup:before {
  content: "";
  background-color: #fff;
  position: absolute;
  height: 1px;
  width: 20px;
  top: 11px;
  left: -4px;
  transform: rotate(-45deg);
}

.close-popup:after {
  content: "";
  background-color: #fff;
  position: absolute;
  height: 1px;
  width: 20px;
  top: 11px;
  transform: rotate(45deg);
  left: -4px;
}

/*  */
.searchBox-nav {
  display: flex;
  /* max-width: 100%; */
  width: 100%;

  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #707070b9;
  border-radius: 50px;
  position: relative;
}

.searchButton-nav {
  color: #fff;
  position: absolute;
  left: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--orang_o) !important;
  border: 0;
  display: inline-block;
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

/*hover effect*/
.searchButton-nav:hover {
  color: #fff;
  background-color: #1a1a1a;
  box-shadow: rgba(61, 61, 61, 0.151) 0 10px 20px;
  transform: translateY(-3px);
}

/*button pressing effect*/
.searchButton-nav:active {
  box-shadow: none;
  transform: translateY(0);
}

.searchInput-nav {
  border: none;
  background: none;
  outline: none;
  color: white;
  font-size: 15px;
  width: 100%;
  padding: 24px 26px 24px 46px;
}

@media (max-width: 440px) {
  .searchBox-nav {
    width: 300px;
    margin: auto;
    margin-left: 34px;
  }
}

@media (max-width: 328px) {
  .searchBox-nav {
    width: 250px;
    margin: auto;
    margin-left: 34px;
  }
}

/* ----------------------------------------------------------------------- */

.progress {
  position: relative;
  height: 5px !important;
  background: var(--h2) !important;
  top: 0;
  left: 0;
  transition: all linear 0.1s;
  min-width: 0%;
  z-index: 99;
}

.header-progress-par {
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  background: transparent !important;
  z-index: 99;
  width: 100%;
}

/* ----------------------------------------------------------------------- */

.hero h1 {
  text-align: center;
  font-size: 62px;
  padding: 20px 0;
  font-weight: 900;
  color: var(--FFFFFF);
}

.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #020c20cf;
}

.header-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.iconFixed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
}

.iconFixed .icon {
  width: 40px;
  display: flex;
  height: 40px;
  background: transparent;
  border: 1px solid #9fa4b1;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.shown{
  position: absolute;
  left: 55px;
  color: #ffffff;
  background: var(--btn);
  padding: 0px 20px;
  font-size: 18px;
  display: none;
}
.iconFixed .icon:hover .shown{
  display: block;
}

.iconFixed .icon svg {
  transition: var(--transition);
  max-width: 23px;
  max-height: 23px;
  fill: #9fa4b1;
}

.iconFixed .icon:hover {
  border-color: var(--btn);
  background: var(--btn);
  transform: scale(1.1);
}

.iconFixed .icon:hover svg {
  fill: #fff;
}

.heroText {
  max-width: 850px;
  margin: auto;
  pointer-events: none;
}

.fadeIn {
  animation: fadeIn 1s;
}

.fadeOut {
  animation: fadeOut 1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.hero .button {
  margin: auto !important;
  margin-top: 30px !important;
}

.hero #btnFormHero {
  position: absolute;
  left: -47px;
  transform: translateY(-50%) rotate(-90deg);
}

.formHero .logoTitle img {
  width: 69.75px;
  height: 70px;
}

p.p {
  color: var(--p);
  font-size: 14px;
  line-height: 1.4;
}

h2.h2 {
  color: var(--h2);
  font-size: 35px;
}

h2.h2 span {
  color: #cc9;
 
}

h2.h2.logoTitle {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
   font-size: 26px;
}

.formHero .logoTitle span {
  margin-right: -29px;
  margin-top: 14px;
}

.radio-group {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition);
  font-size: 14px;
  color: #717071;
}

.radio-input {
  position: absolute;
  opacity: 0;
}

.radio-inner-circle {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #717071;
  border-radius: 50%;
  margin-right: 0.5em;
  transition: border-color 0.2s;
  position: relative;
}

.radio-label:hover .radio-inner-circle {
  border-color: #717071;
}

.radio-input:checked+.radio-label .radio-inner-circle {
  border-color: #5cb74e;
}

.radio-input:checked+.radio-label {
  color: #5cb74e;
}

.radio-input:checked+.radio-label .radio-inner-circle::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #5cb74e;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.input_full {
  border: 1px solid transparent;
  height: 40px;
  outline: none;
  padding: 10px 10px 10px 30px;
  transition: 0.5s linear;
  font-size: 14px;
  width: 100%;
  background: #ededed;
  color: #9a9a9a;
}

.input_full::placeholder {
  color: #9a9a9a;
}

.input_form:focus-within label {
  color: #5cb74e !important;
}
.form-close-btn {
    position: absolute;
    top: 10px;
    left: 40px;
    font-size: 50px;
    cursor: pointer;
    color: #385698;
    z-index: 110;
}
form.formHero {
    padding: 30px;
    padding-top: 20px;
    background: #fff;
    max-width: 702px;
    position: absolute;
    top: 0;
    left: -100%;
    height: 100vh;
    transition: var(--transition);
    z-index: 100;
    overflow-y: scroll;
}

.input_full:focus {
  border: 1px solid #5cb74e;
  background: #fff;
}

.input_form label {
  color: #717071;
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
}

.input_form {
  padding-bottom: 10px;
}

.input_form textarea {
  height: auto !important;
  max-height: 150px;
}

.formHero.active {
  left: 0;
  /*transform: unset;*/
  display:block;
}

.about {
  padding: 30px 0;
  background-image: url("../img/Cli.png");
  background-color: #cc9;
  background-size: cover;
  background-repeat: no-repeat;
}
.about h2 {
  font-size: 38px;
}

.about .div {
  max-width: 800px;
  margin: auto;
}

.about p.p {
  color: #7b7e85;
  font-size: 18px;
}

.nav-link {
  transition: var(--transition);
}

.tab-pane {
  padding: 0 15px;
}

.nav-tabs {
  position: relative;
}

.nav-tabs li {
  margin: 0px !important;
}

.nav.nav-tabs {
  border-bottom: 1px solid #a7a9ac;
}

.tab-content {
  margin-top: 30px;
}

.nav-tabs li button {
  position: relative;
  margin-right: 0px !important;
  padding: 15px 40px !important;
  color: #a7a9ac !important;
  font-size: 18px;
  border: none !important;
  text-align: center;
}

.nav-tabs a:hover {
  background-color: transparent !important;
  border: none;
}

.sliderTap {
  display: inline-block;
  width: 30px;
  height: 5px;
  background-color: #cc9;
  position: absolute;
  z-index: 12;
  bottom: -3px;
  transition: all 0.4s linear;
}

.nav-tabs .active {
  background-color: transparent !important;
  border: none !important;
  color: #385698 !important;
  font-weight: bold;
  font-size: 18px;
}

.aboutUs .img img {
  width: 100%;
  height: 650px;
  object-fit: cover;
}
.abt-image{
    height:420px !important;
}

.aboutUs .img::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #020c20;
  opacity: 0.7;
  height: 100%;
}

.aboutUs .img {
  position: relative;
}

.aboutUs .left {
  position: relative;
}

.pB {
  padding: 30px;
  border: 1.6px solid #385698;
  font-size: 16px;
  color: #7e879b;
  margin-bottom: 30px !important;
}

.pB2 {
  border: 1.6px solid #5CB74E;
  color: #95B191;
}

.h22 span {
  color: var(--btn) !important;
}

.h22 {
  max-width: 940px;
  margin: auto !important;
  padding-bottom: 50px;
}

.aboutUs .left img.imgLOgo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: auto;
  height: auto;
  max-width: 80%;
  transform: translate(-50%, -50%);
}

.cardVision {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  box-shadow: 0px 0px 35px 0px rgba(56, 86, 152, 0.07);
  padding: 48px;
  height: 100%;
  transition: var(--transition);
  border: 2px solid transparent;
}

.cardVisionMision h2 {
  color: #fff;
}

.cardVisionMision {
  height: 100%;
  padding: 48px;
  background: #385698;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardVision img {
  width: auto;
  height: auto;
  max-width: 100px;
}

.cardVision:hover {
  border: 2px solid var(--btn);
  background: #f9fafb;
  box-shadow: 0px 0px 35px 0px rgba(92, 183, 78, 0.14);
}

.projectManeger .img::before {
  content: none;
}

.projectManeger.Maneger .img img {
  height: 204px;
  max-width: 100%;
  margin: auto;
  object-fit: cover;
}

.projectManeger.Maneger .img {
  width: 204px !important;
  height: 193px;
  margin: auto;
}

.projectManeger.Maneger h2.h2 {
  font-size: 34px;
}

a.btnMore {
  display: block;
  color: var(--btn) !important;
  font-size: 14px;
  font-weight: 800;
  margin-top: 22px !important;
}

.gridImgs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  justify-content: center;
  padding-top: 24px;
  gap: 24px;
  border-top: 1px solid #385698;
  position: relative;
  margin-top:200px;
}

.projectManeger.Maneger .gridImgs .img,
.projectManeger.Maneger .gridImgs img {
  width: 100% !important;
  transition: var(--transition);
  max-width: 85%;
}

.projectManeger.Maneger .row {
  padding-bottom: 24px;
}

.gridImgs::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  background: #385698;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.gridImgs::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  background: #385698;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.projectManeger.Maneger .gridImgs .img::after {
  content: "";
  position: absolute;
  top: -29.5px;
  left: 50%;
  background: #385698;
  transform: translateX(-50%);
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.projectManeger.Maneger .img.img2::before {
  content: " ";
  opacity: 1;
  background: #385698;
  height: 222px;
  width: 1px;
  top: unset;
  bottom: -222px;
  left: 50%;
  transform: translateX(-50%);
}

/* .aboutUs.aboutUspage .gridImgs {
  padding-top: 70px;
}

.aboutUs.aboutUspage .projectManeger.Maneger .row {
  padding-bottom: 70px;
} */





.projectManeger.Maneger .img .content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  transition: var(--transition);
  opacity: 0;
  pointer-events: none;
  background: rgba(2, 5, 12, 0.8);
}
.gridImgs .img .content {
    left: 75px !important;
    width: 71% !important;
    height: 114% !important;
}


.projectManeger.Maneger .img:hover .content {
  opacity: 1;
  pointer-events: visible;
  border: 2px solid var(--btn);
}

.projectManeger.Maneger .img .content .h3 {
  color: #f9fafb;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}

.projectManeger.Maneger .img .content p {
  color: #d6dae4;
  font-size: 12px;
  font-weight: 400;
}

.projectManeger.Maneger .gridImgs .img::before {
  content: " ";
  opacity: 1;
  background: #385698;
  height: 29px;
  width: 1px;
  top: -29px;
  left: 50%;
  transform: translateX(-50%);
}

.nav.nav-tabs {
  max-width: 98.5%;
      display: flex;
    justify-content: space-between;
}

.aboutUs {
  padding: 30px 0;
}

.tab-content .tab-pane {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.tab-content .tab-pane.show {
  opacity: 1;
}

.title2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 20px;
}

.cardProgramming {
  background: #f9fafb;
  box-shadow: 0px 0px 8px 0px rgba(30, 30, 30, 0.07);
  padding: 20px;
  border: 1px solid #d4e1d4;
      margin-bottom: 20px !important;
  /*height: 100%;*/
  transition: var(--transition);
}
.cardProgramming:hover{
    border: 1px solid #5cb74e;
}
/*.cardProgramming .col-md-3{*/
/*    margin-bottom:20px !important;*/
/*}*/
.cardProgramming .img img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  transition: var(--transition);
  height: 100%;
}

.cardProgramming .img {
  height: 196px;
  transition: var(--transition);
  overflow: hidden;
}

.cardProgramming:hover a i {
  transform: scale(1.3);
  animation: moveRight 1s infinite alternate;
}

@keyframes moveRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-10px);
  }
}

.cardProgramming:hover img {
  transform: scale(1.3);
}

.cardProgramming h3 {
  color: var(--h2);
  font-family: Almarai;
  font-size: 18px;
  font-weight: 800;
  padding-top: 12px;
  min-height:70px;
}

.cardProgramming p {
  /*padding-top: 12px;*/
  min-height:80px;
}

a.btnDetails {
  display: flex;
  color: var(--btn) !important;
  font-size: 14px;
  font-weight: 800;
  margin-top: 22px !important;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.owl-dots {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 40px !important;
  transition: var(--transition);
}

.owl-dots .owl-dot span {
  width: 8px !important;
  height: 8px !important;
  margin: 0 5px !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: 1px solid var(--btn);
  transition: var(--transition);
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--btn) !important;
}

.MyPrograming {
   height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/Clip\ path\ group.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.services h2.h2 {
  color: #f9fafb;
}

.services .buttom_fill {
  background: #f9fafb;
  color: var(--btn) !important;
  transition: 0.3s all ease-in;
}
.services .buttom_fill:hover{
    border:1px solid #ffffff;
    color: #ffffff !important;
    background: transparent !important;
}

.services .owl-dots {
  filter: brightness(10);
}

.services {
  /* padding: 100px 0; */
  background-image: url(../img/Frame.png);
  background-color: var(--btn);
  background-size: cover;
  background-repeat: no-repeat;
  /* margin-top: 100px; */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stars {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  padding-top: 20px;
  color: #f9fafb;
}

.cardServices h3 {
  color: #f9fafb;
  font-size: 20px;
  font-weight: 800;
  padding-top: 23px;
}

.cardServices {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  padding: 50px 20px;
  border: 1px solid #fff;
  height: 250px;
  position: relative;
  overflow: hidden;
}


.cardServices div.img {
  width: 70px !important;
  height: 70px;
}

.cardServices .content {
  position: absolute;
  left: 0;
  bottom: -150%;
  background: #f9fafb;
  width: 100%;
  height: 100%;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: var(--transition);
}

.cardServices .content h3 {
  color: var(--h2);
  padding: 0;
}

.cardServices .content a.button {
  width: 150px;
  padding: 10px;
}
 
.cardServices:hover .content {
    bottom: 0;  
}
.ui-widget.ui-widget-content {
  background: #f9fafb;
  box-shadow: 0px 0px 35px 0px rgba(56, 86, 152, 0.07);
  width: 100%;
  border: none !important;
  padding: 10px;
    margin: auto;
}

.ui-widget-header .ui-icon {
  background-image: none !important;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  display: flex;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  background: #fff;
  align-items: center;
  justify-content: center;
}

.ui-datepicker-header {
  background-color: #2196f3;
  color: white;
  text-align: center;
  padding: 10px;
  height: 40px;
  border-radius: 8px 8px 0px 0px;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: none;
}

.ui-datepicker-prev::before {
  content: "\f053";
  /* Font Awesome code for the left arrow */
  font-family: "Font Awesome 6 Free";
  /* Ensure this matches the Font Awesome version you are using */
  font-weight: 900;
  /* Font Awesome solid icons use font-weight 900 */
  font-size: 1rem;
  float: left;
  cursor: pointer;
}

.ui-datepicker-next::before {
  content: "\f054";
  /* Font Awesome code for the right arrow */
  font-family: "Font Awesome 6 Free";
  /* Ensure this matches the Font Awesome version you are using */
  font-weight: 900;
  /* Font Awesome solid icons use font-weight 900 */
  font-size: 1rem;
  float: right;
  cursor: pointer;
}

span.ui-datepicker-month {
  color: #385698;
  font-size: 20px;
}

span.ui-datepicker-year {
  color: #6d85b5;
  font-size: 16px;
  font-weight: 400;
}

.ui-datepicker-calendar th {
  font-size: 14px;
  padding: 10px;
  color: #292a3459;
  font-weight: 400 !important;
}

.ui-datepicker table {
  border-collapse: collapse;
  margin: 0 !important;
  margin-top: 25px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.062) !important;
}

.ui-datepicker th {
    padding-top: 12px !important;
}
.ui-datepicker-calendar {
  text-align: center;
  margin: 0 auto;
  padding: 8px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: none !important;
  background: #fff !important;
  padding: 30px 16px;
  color: #292a34 !important;
  text-align: center;
  font-family: Inter;
  font-size: 20px;
}

.ui-datepicker-title {
  padding: 10px;
}

.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev:hover {
  transform: scale(1.1);
  background: rgba(232, 235, 239, 0.4) !important;
  border: none !important;
}

.ui-datepicker-calendar td {
  padding: 4px 0px;
}

.ui-datepicker td {
  padding: 10px !important;
}

.ui-datepicker-calendar .ui-state-default {
  text-decoration: none;
  color: #5cb74e !important;
      border-radius: 50%;
    width: 50px !important;
    height:50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
}

.ui-datepicker-calendar .ui-state-active {
  color: #5cb74e;
}

a.ui-state-default.ui-state-active {
      background: #5cb74e !important;
    color: #fff !important;
    /*width:40px !important;*/
    /*height:40px !important;*/
     
}

.cardNews .img {
  position: relative;
}

.cardNews .img::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #385698;
  opacity: 0.4;
  height: 100%;
  z-index: 1;
}

.ui-datepicker-calendar .ui-state-default:hover {
  background: rgba(232, 235, 239, 0.4) !important;
}

.cardNews {
  position: relative;
  display: block;
  transition: var(--transition);
}

.cardNews img {
  width: 100%;
  height: 442px;
  object-fit: cover;
}

.cardNews .content {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  background: linear-gradient(180deg, #020c22 0%, #66666600 350.7%);
  padding: 20px;
  min-height: 100px;
  transition: var(--transition);
  z-index: 2;
  width: 100%;
}

.cardNews .content p {
  color: #c0cee9;
  font-size: 14px;
}

.cardNews .content h4 {
  color: #f9fafb;
  font-size: 16px;
  flex-basis: 71%;
}

.cardNews:hover .content {
  opacity: 0;
}

.dates {
  background-image: url(../img/frame2.png);
  background-size: cover;
  background-repeat: no-repeat;
  margin: 100px 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.news {
  background-image: url(../img/frame2.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardNews:hover .content2 {
  opacity: 1;
}

.cardNews .content2 {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  gap: 15px;
  align-items: center;
  background: linear-gradient(180deg, #020c22 0%, #66666600 350.7%);
  padding: 20px;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: var(--transition);
  text-align: center;
  z-index: 2;
  flex-direction: column;
}

.cardNews .content2 h6 {
  color: #cc9;
  font-size: 16px;
}

.cardNews .content2 h4 {
  color: #f9fafb;
  font-size: 20px;
}

.cardNews .content2 p {
  color: #a3afc9;
  padding-bottom: 10px;
  font-size: 14px;
}

.contactHome .div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contactHome .icon {
  width: 50px !important;
  height: 50px !important;
  background: #203b7521;
  display: flex;
  align-items: center;
  color: #385698;
  justify-content: center;
}

.contactHome .div h5 {
  color: var(--h2);
  padding-bottom: 8px;
  font-size: 20px !important;
}

.contactHome .div a {
      color: #839897 !important;
    font-size: 14px;
    font-weight: 400;
}

.contactHome {
  padding: 30px 0;
  background-image: url(../img/Cli.png);
  background-color: #cc9;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.predcramp {
  font-size: 14px;
  color: #a7a9ac !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px !important;
  padding-bottom:25px;
}

.predcramp span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.predcramp .active {
  font-weight: bold;
  color: #fff !important;
}

.heroPage {
    height: 60vh;
    z-index: 43;
    position: relative;
}

img.heroPageimg {
  position: absolute;
  left: 0;
  z-index: -1;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.heroPage::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #000a1f;
  opacity: 0.7;
  height: 100%;
  z-index: -1;
}

.heroPage h1 {
    text-align: center;
    font-size: 32px;
    color: #f9fafb;
    margin-top: 30px !important;
    margin-bottom: 25px !important;
}
.heroPage .div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.pattern {
  padding: 100px 0;
  background-image: url(../img/frame2.png);
  background-color: #fff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.MissionVisionValues .cardVisionMision p.p {
  color: #CDD5E5;
}

.MissionVisionValues .cardVisionMision.cardVisionMisio2 p.p {
  color: #D2EBCE;
}

.MissionVisionValues .cardVisionMision {
  flex-direction: column;
  gap: 30px;
  text-align: center;
  padding:  70px 50px;
}

.MissionVisionValues .cardVisionMision.cardVisionMisio2 {
  background: var(--btn);
}

.valuses .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  justify-content: center;
  padding-top: 50px;
  gap: 24px;
  position: relative;
}

.carrdValues {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  justify-content: center;
  padding: 50px 20px;
  transition: var(--transition);
  background: #F8F8EE;
  border: 1px solid transparent;
}
.carrdValues:hover {
  border: 1px solid var(--btn);
  transform: translateY(-10px);
}
.carrdValues h3 {
  color: #385698;
  font-size: 20px;
  text-align: center;
  font-weight: 800;
}

.valuses {
  padding: 100px 0;
  background-image: url(../img/Cli.png);
  background-color: #cc9;
  background-size: 100% 100%;
  margin-bottom: 100px;
  background-repeat: no-repeat;
}
.makers h2{
  font-size: 52px;
  color: var(--h2);
  margin-bottom: 50px !important;
}
.makers .owl-carousel .owl-nav.disabled {
  position: absolute;
  width: 112%;
  display: flex !important;
  justify-content: space-between;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.makers .owl-next i,
.makers .owl-prev i{
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #5CB74E;
border: 1px solid #5CB74E;
transition: 0.3s all ease-in;
}
.makers .owl-next i:hover,
.makers.owl-prev i:hover{
color: #FFFFFF !important;
}
.makers .owl-theme .owl-nav [class*=owl-]:hover {
background: #5CB74E !important;
}
.comapnys .cardd {
  background: var(--wh, #fff);
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 24px;
  gap: 15px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  transition: var(--transition);
}
.comapnys  .cardd:hover {
      border: 1px solid #cc9;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transform: scale(0.9);
    background: #ffffff;
}
.cardd .img {
  height: 113px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comapnys .cardd img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.comapnys .cardd h3 {
  color: #385698;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  min-height: 68px;
}

.teamCard img {
  width: 100%;
  height: 315px;
  object-fit: cover;
}
.teamCard {
  position: relative;
  border: 1px solid var(--sc-00, #CC9);
  background: var(--wh, #F9FAFB);
  z-index:  1;
  margin-bottom: 24px;
  overflow: hidden;
}
.teamCard h3 {
  color: #385698;
  font-size: 26px;
  font-weight: 800;
}
.teamCard .row {
  align-items: center;
}

.teamCard:before {
    position: absolute;
    left: 0; /* بدلاً من right: 0 */
    bottom: -1px;
    z-index: -1;
    content: " ";
    background: url("../img/frames.svg") no-repeat;
    background-size: 100% 100%;
    width: 163px;
    height: 163.781px;
}
.teamCard  .img img {
  transition: var(--transition);
}
.teamCard  .img {
  width: 100%;
  overflow: hidden;
  height: 100%;
  transition: var(--transition);
}
.teamCard:hover .img img {
transform: scale(1.2);
} 
.mySwiper {
  width: 100%;
  height: 100vh;
}

 .swiper-slide {
  background-color: #f9fafb;
  height: 100%;
}

span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background:   var(--btn) !important;

}
.swiper-pagination .swiper-pagination-bullet {
  border-radius: 0px !important;
  width: 8px !important;
  height: 8px !important;
  margin:   5px !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: 1px solid var(--btn);
}
.swiper-pagination {
  position: fixed !important;
  z-index: 3123 !important;
  margin: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}


/* start building */
.building{
  background-image: url(../img/Clip\ path\ group.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
}
.building p{
  font-size: 20px;
  color: #757F95;
  margin-bottom: 20px !important;
}
.building span{
  font-size: 18px;
  color: #757F95;
}
.building a{
  margin: 30px auto !important;
}
.building .owl-carousel {
  margin: 50px 0 !important;
}
.building .owl-carousel .owl-nav.disabled {
    position: absolute;
    width: 112%;
    display: flex !important;
    justify-content: space-between;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}
.building .owl-next i,
.building .owl-prev i{
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5CB74E;
  border: 1px solid #5CB74E;
  transition: 0.3s all ease-in;
}
.building .owl-next i:hover,
.building .owl-prev i:hover{
  color: #FFFFFF !important;
}
.building .owl-theme .owl-nav [class*=owl-]:hover {
  background: #5CB74E !important;
  /* color: #FFFFFF !important; */
}
/* end building */

/* start training */
.training{
  background-image: url(../img/Clip\ path\ group.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
}
.training p{
  /* font-size: 20px; */
  color: #757F95;
  margin-bottom: 20px !important;
      min-height: 60px;
}
.training span{
  font-size: 18px;
  color: #757F95;
}
.training a{
  margin: 30px auto !important;
}
.training .owl-carousel {
  margin: 50px 0 !important;
}
.training .owl-carousel .owl-nav.disabled {
    position: absolute;
    width: 112%;
    display: flex !important;
    justify-content: space-between;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}
.training .owl-next i,
.training .owl-prev i{
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5CB74E;
  border: 1px solid #5CB74E;
  transition: 0.3s all ease-in;
}
.training .owl-next i:hover,
.training .owl-prev i:hover{
  color: #FFFFFF !important;
}
.training .owl-theme .owl-nav [class*=owl-]:hover {
  background: #5CB74E !important;
  /* color: #FFFFFF !important; */
}
/* end training */

/* start startegies */
.strategies{
  background-image: url(../img/Clip\ path\ group.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
}
.strategies .cards{
  height: 100%;
  margin-bottom: 30px;
}
.strategies .image img{
  width: 100%;
  height: 240px;
}
.strategies .info{
  border: 1px solid #C0C9DB;
    background: #F9FAFB;
  padding: 20px;
    height: 130px;
}
.strategies .info h3{
  color: var(--h2);
  font-size: 20px;
  margin-bottom: 10px !important;
}
.strategies .info p{
  color: #525867;
  font-size: 14px;
  min-height: 45px;
}
/* end strategies */

/* start cooperative */
  .cooperative{
    background-image: url(../img/Clip\ path\ group.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
  }
  .cooperative .image img{
    width: 100%;
  }
  .cooperative .coo-share {
    background: #fff;
    padding: 50px 140px;
    margin-top: 50px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  .cooperative .coo-share h2{
    font-size: 52px;
    color: #385698;
  }
  .cooperative .coo-share span{
    color: #cc9;
  }
  .cooperative .coo-share .first{
    margin: 30px 0 20px 0 !important;
  }
  .cooperative .coo-share p{
    font-size: 16px;
    color: #C0C8DC;
  }
  .goals{
    margin: 50px 0 100px 0;
  }
  .goals::before{
    content: "";
    position: absolute;
    background-image: url(../img/Ellipse\ 1.png);
    background-repeat: no-repeat;
    width: 3px;
    height: 290px;
    top: 35%;
    left: 50%;
  }
  .goals h2{
    color: var(--h2);
    font-size: 52px;
    margin-bottom: 50px !important;
  }
  .goals .cards{
    background: linear-gradient(to right , #385698 50% , #fff 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: var(--transition);
    padding: 40px;
    width: 90%;
    height: 130px;
    margin: 15px !important;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  .goals .left{
    margin-right: 60px !important;
  }
  .goals .cards:hover{
    background-position: left bottom;
  }
  .goals .cards:hover p{
    color: #FFFFFF;
  }
  .goals .cards p{
    color: var(--h2);
    font-size: 20px;
    font-weight: bold;
  }
/* end cooperative */

/* start education */
.education{
  background-image: url(../img/Clip\ path\ group.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
}
.education .text p{
  margin-bottom: 30px !important;
}
.education .text p,
.education .text span {
  font-size: 22px;
  color: #576374;
}
.taps_services{
  background: var(--h2);
  padding: 80px 50px;
  margin-top: 70px;
}
.div_img_logo{
  width: 100%;
  height: 300px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #CCCC99;
}
.flex_tap{
  padding-right: 120px;
}
.flex_tap p{
  font-size: 16px;
  color: #9BA5BB;
  margin: 22px 0 30px 0 !important;
}
.education .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #fff;
  background-color: transparent !important;
  border-left: 2px solid var(--btn);
}
.education .nav-pills .nav-link{
  color: #B5BDCE;
  background: 0 0;
  border: 0;
  padding: 20px 0;
  border-radius: 0 !important;
  border-left: 2px solid #BECCCF33;
  text-align: start;
}
.dates .text h2{
  margin-bottom: 100px !important;
}
/* end education */

/* start single-page */
.single-page{
  margin-top: 100px;
}
.single-page h2{
  color: var(--h2);
  font-size: 52px;
  margin-bottom: 25px !important;
}
.single-page .paragraphs {
    display: flex;
    flex-direction: column;
    gap: 25px;
    color: #a7a9ac;
    font-size: 14px;
    max-width: 95%;
    text-align: justify;
}

.single-page p{
  color: #646E84;
  font-size: 16px;
}
.single-page .image img{
  width: 100%;
  height: 430px;
    object-fit: cover;
}
/* end single-page */

/* start plan */
.plan{
  margin-top: 100px;
  background-image: url(../img/Group\ 15736.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
}
.plan::before{
  content: "";
  position: absolute;
  background-image: url(../img/Ellipse\ 2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 1px;
  height: 280px;
  left: 50%;
  top: 35%;
}
.plan h2{
  color: #FFFFFF;
  font-size: 52px;
  margin-bottom: 30px !important;
}
.plan .cards{
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 35px !important;
}
.plan .cards img{
  background: #FFFFFF24;
  width: 50px;
  height: 50px;
  padding:  10px ;
}
.plan .card-info p{
  color: #FFFFFF;
  font-size: 18px;
}
.plan .right{
  margin-right: 190px !important;
}
/* end plan */

/* start table  */
.table{
  margin: 100px 0;
}
.table table{
  width: 100%;
  border: transparent !important;
}
.table table thead tr th{
  background-color: var(--h2);
  color: #FFFFFF;
  padding: 30px 0;
  text-align: center;
  border-right: 2px solid var(--span);
}
.table table .size{
  width: 15%;
}
.table table .one{
  text-align: center;
  padding: 30px 0;
  background-color: var(--span);
  color: var(--h2);
  font-weight: bold;
}
.table table tbody tr .special{
  background-color: #F0F1E7;
  color: var(--h2);
  padding: 30px 0;
  text-align: center;
  border-right: 2px solid var(--h2);
  border-bottom: 2px solid var(--h2);
  border-left: 2px solid var(--h2);
}
/* end table */

/*start request */
.request{
  background-image: url(../img/Clip\ path\ group.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
}
.request h2{
  color: var(--h2);
  font-size: 52px;
  margin-bottom: 50px !important;
}
.request .success{
  border: 1px solid var(--h2);
  padding: 80px;
}
.request .success .image{
  background-color: #CCCC9924;
    width: 250px;
    height: 250px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto !important;
}
.request .success p{
  color: var(--h2);
  font-size: 24px;
}
/* end request */

/* start verify */
.verify{
  background-image: url(../img/Clip\ path\ group.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
}
.verify h2{
  color: var(--h2);
  font-size: 52px;
  margin-bottom: 50px !important;
}
.first-nums{
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}
.first-nums p{
  color: #9CA2AC;
  margin-bottom: 15px !important;
}
.first-nums span{
  color: red;
}
.first-nums input{
  width: 100%;
  padding: 20px 20px 20px 250px;
  border: 1px solid #9196A3;
  background-color: #D4D9E2;
  color: #9CA2AC;
  caret-color: #020c20;
  border: 2px solid #ffffff00;
}
.first-nums input:focus{
      background-color: transparent;
    caret-color: #385698;
    color: #385698;
    border: 2px solid #385698;
}
.first-nums input:focus::placeholder{
  color: #385698;
}
input.buttom_fill {
  padding: 10px 50px !important;
  margin: auto !important;
  width:fit-content;
}
/* end verify */


/* start hiring */
.hiring{
  background-image: url(../img/Clip\ path\ group.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
}
.hiring h2{
  color: var(--h2);
  font-size: 52px;
  margin-bottom: 50px !important;
}
.hiring .cards{
  background: #DCE1EC;
  padding: 38px 38px 38px 130px;
  border: 1px solid var(--h2);
  margin-bottom: 30px !important;
}
.hiring .cards h3{
  color: var(--h2);
  font-size: 22px;
}
.hiring .cards p{
  font-size: 16px;
  color: #8994AA;
  margin: 15px 0 !important;
}
.hiring .cards span{
  color: var(--btn);
  font-size: 16px;
  font-weight: bold;
}
.hiring .cards img{
  position: absolute;
  left: 10%;
  top: 60%;
  background: var(--h2);
  padding: 15px;
}
/* end hiring */

/* start serv-info */
.serv-info{
  margin-top: 100px;
}
.serv-info .title2{
  margin-bottom: 60px !important;
}
.serv-info .info{
    position:relative;
  background-color: #F9FAFB;
  padding: 55px;
  margin-bottom: 30px !important;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  /*height: 100%;*/
}
.serv-info .info:before{
        position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 1;
    content: " ";
    background: url(../img/frames.svg) no-repeat;
    background-size: 100% 100%;
    width: 163px;
    height: 163.781px;
}
.serv-info .col-lg-4{
    margin-bottom:20px;
}
.serv-info .info h3{
    position:relative;
  color: var(--h2);
  font-size: 32px;
  margin-bottom: 10px !important;
}
.serv-info .info h3:before{
       position: absolute;
    right: -30px;
    bottom: 8px;
    z-index: 1;
    content: " ";
    background-image: url(../img/logoTitle.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 60px;
    height: 60px;
}
.serv-info .info p{
  color: #8994AA;
  font-size: 14px;
}
/* end serv-info */

/* start services */
.services-cards{
  background-image: url(../img/Group\ 15736.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
}
.services-cards.owl-carousel {
  margin: 50px 0 !important;
}
.services-cards .owl-carousel .owl-nav.disabled {
    position: absolute;
    width: 112%;
    display: flex !important;
    justify-content: space-between;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.services-cards .owl-next i,
.services-cards .owl-prev i{
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  transition: 0.3s all ease-in;
}
.services-cards .owl-next i:hover,
.services-cards .owl-prev i:hover{
  color: var(--btn) !important;
  background-color: #FFFFFF;
}
.services-cards .owl-theme .owl-nav [class*=owl-]:hover {
  background: #5CB74E !important;
}
.services-cards .owl-dots .owl-dot span {
  width: 8px !important;
  height: 8px !important;
  margin: 0 5px !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: 1px solid #FFFFFF;
  transition: var(--transition);
}
.services-cards .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
  background-color: #FFFFFF !important;
}
/* end services */

.hiringGate .first-nums input,
.hiringGate .first-nums select {
  padding: 20px 20px 20px 150px !important;
}
.hiringGate .first-nums input,
.hiringGate .first-nums select {
  width: 90%;
  border: 1px solid #9196A3;
  background-color: #D4D9E2;
  color: #9CA2AC;
  caret-color: #020c20;
}
.hiringGate p{
  color: #9CA2AC;
  margin-bottom: 15px !important;
}
.hiringGate span{
  color: red;
  font-size: 12px;
}

.hiringGate .labl-1 input,
.hiringGate .labl-1 select,
.hiringGate .labl-1 textarea{
  width: 100%;
  padding: 20px 20px 20px 20px;
  border: none;
  background-color: #38569821;
  color: #9CA2AC;
  caret-color: #020c20;
  font-size:12px;
  border: 2px solid #ffffff00;
}
.hiringGate .labl-1 select{
    height:61px !important;
}
.hiringGate .labl-1 input:focus,
.hiringGate .labl-1 textarea:focus{
  background-color: transparent;
    caret-color: #385698;
    color: #385698;
    border: 2px solid #385698;
}
.hiringGate .labl-1 input:focus::placeholder{
  color: #385698;
  
}
.hiringGate .labl-1{
  margin-bottom: 20px !important;
}
.hiringGate .upload{
  width: 100%;
   border: 1px solid #9196A3;
  background-color: #D4D9E2;
      padding: 30px 0 !important;
       cursor:pointer;
}
.hiringGate .upload p{
  color: #9CA2AC;
  font-size: 16px !important;
  margin-top: 20px !important;
 
}
.hiringGate .upload span{
  color: var(--h2);
}
.hiringGate .upload input{
  opacity: 0;
  cursor: pointer;
  position:absolute;
}

/* start activiy  */
.activiy .owl-carousel {
  margin: 50px 0 !important;
}
.activiy .owl-carousel .owl-nav.disabled {
    position: absolute;
    width: 112%;
    display: flex !important;
    justify-content: space-between;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}
.activiy .owl-next i,
.activiy .owl-prev i{
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5CB74E;
  border: 1px solid #5CB74E;
  transition: 0.3s all ease-in;
}
.activiy .owl-next i:hover,
.activiy .owl-prev i:hover{
  color: #FFFFFF !important;
}
.activiy .owl-theme .owl-nav [class*=owl-]:hover {
  background: #5CB74E !important;
  /* color: #FFFFFF !important; */
}
.single-activity{
  /* margin-top: 100px; */
  padding: 100px 0;
  background-image: url(../img/Clip\ path\ group.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.single-activity .text{
  margin-bottom: 50px !important;
}
.single-activity .text h6{
  color: var(--btn);
  font-size: 18px;
  margin-bottom: 20px !important;
}
.single-activity .text h2{
  color: var(--h2);
  font-size: 52px;
      margin-bottom: 20px !important;
}
.single-activity .image{
  z-index: 1;
}
.single-activity .owl-carousel img{
  width: 100%;
  height: 550px;
}
.single-activity  .owl-item.active.center     {
  opacity:1;
  transform: scale(1.1);
}
.single-activity  .owl-item   {
  opacity:30%
}
.single-activity .owl-stage {
  padding: 50px 0;
}
/* end activity */



/* start step wizzard */
.step-wizzard{
  margin-top: 100px;
}
.step-wizzard ul{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: auto !important;
}
.step-wizzard ul::before{
  content: "";
  position: absolute;
  border-bottom: 5px solid var(--span);
  width: 80%;
  left: 10%;
  top: 45%;
}
.step-wizzard .div{
  display: flex;
  justify-content: center;
  align-items: center;
}
.step-wizzard .div span{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  background-color: #848A96;
  color: #A8B5D1;
  border: 5px solid var(--span);
  font-size: 32px;
  font-weight: bold;
}
.step-wizzard .title-head h2{
  color: var(--h2);
  font-size: 52px;
  margin: 50px 0 !important;
}
.hiringGate input:focus .labl-1 p{
  color: var(--h2);
}
.step-wizzard .send{
        display: flex
;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.step-wizzard .send button{
  margin: 50px 0 !important;
      text-transform: uppercase;
}
.progressbar .progressbar-list.active .div span{
  background-color: var(--h2);
  color: #FFFFFF;
}
.step-wizzard .radio{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.step-wizzard .radio p{
  font-size: 20px;
  color: var(--h2);
  margin-bottom: 0 !important;
}
.step-wizzard .check{
  display: flex;
  align-items: center;
  gap: 10px;
}


/* إخفاء المظهر الافتراضي للـ checkbox */
.check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--btn); /* تحديد لون الإطار */
    background-color: transparent; /* لون الخلفية */
    border-radius: 4px; /* جعل الحواف دائرية قليلاً */
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease-in-out;
}

/* عند تحديد الـ checkbox */
.check input[type="checkbox"]:checked {
    background-color: var(--btn);
    border-color: var(--btn);
    padding: 0px !important;
}

/* إضافة علامة ✔ عند التحديد */
.check input[type="checkbox"]::after {
    content: "✔";
    font-size: 14px;
    color: white;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* إظهار العلامة عند التحديد */
.check input[type="checkbox"]:checked::after {
    opacity: 1;
}

.reading{
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 40px 0 !important;
  background-color: var(--h2);
  padding: 50px;
}
.reading .image{
  background-color: #CCCC9924;
  padding: 20px;

}
.reading .info h3{
  color: var(--span);
  font-size: 32px;
}
.reading .info p{
  margin-top: 15px !important;
  font-size: 16px;
  color: #C9D5ED;
}
.sec-row{
  display: flex;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    margin: auto !important;
}
.sub-head h5{
  margin: 50px 0 30px 0 !important;
  font-size: 20px;
  color: var(--h2);
}
.labl-3{
  /*border: 1px solid #B0BBAE;*/
  /*padding: 20px;*/
  /*background: #ffffff;*/
  margin-bottom: 30px !important;

}
/* end step wizzard */


.all .cardProgramming,
.all-ser .cardServices{
  margin-bottom: 20px !important;
}
.all-ser{
  /* margin: 100px 0 100px 0 !important; */
  padding: 100px;
}

/* start popup message */
 .popupp {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2222222;
  left: 0;
  top: 0;
  } 
 .popupp:before {
    content: "";
    position: absolute;
    background-color: #020c20cf;
    width: 100%;
    height: 100%;
    top: 0;
    backdrop-filter: blur(18px);
    left: 0;
}
  .closee-popup i {
    position: absolute;
    color: var(--span);
    right: 4%;
    top: 7%;
    font-size: 35px;
    cursor: pointer;
    z-index: 55555555555;
}
/* start popup ceo */
.poup {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2222222;
  left: 0;
  top: 0;
  } 
  .poup:before{
  content: "";
  position: absolute;
  background-color: #020c20cf;
   
    backdrop-filter: blur(18px);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
   }
  .cls-popup i {
    position: absolute;
    color: var(--span);
    right: 4%;
    top: 2%;
    font-size: 35px;
    cursor: pointer;
    z-index: 55555555555;
}
.poup1 {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2222222;
  left: 0;
  top: 0;
  } 
  .poup1:before{
  content: "";
  position: absolute;
  background-color: #020c20cf;
   
    backdrop-filter: blur(18px);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
   
  }
  .cls-popup1 i {
    position: absolute;
    color: var(--span);
    right: 4%;
    top: 7%;
    font-size: 35px;
    cursor: pointer;
    z-index: 55555555555;
}
/* .map{
  width: 1000px !important;
}
iframe{
  width: 1000px !important;
} */

.abt p.p{
  line-height: 1.6;
  font-size: 14px;
}
.education .div_img_logo img{
  width: auto;
    height: auto;
    object-fit: contain;
    max-width: 70%;
}
.dates .load{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 30px auto;
    background: #5cb74e;
    padding: 10px 30px;
    cursor: pointer;
}
.dates .load p{
  font-size: 18px;
    color: #ffffff;
}
.dates .load i{
  color: #ffffff;
}
iframe {
  display:block;
  margin-top: 20px;
  margin-left: 200px;
  width:100%;
  height:800px;
}






.faq{
  margin-top: 100px;
}
.accordion-button:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  color: var(--h2) !important;
  font-size: 22px;
  background-color: transparent !important;
  box-shadow: none !important;
}
.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  /* border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); */
  margin-bottom: 40px !important;
  border: 2px solid #cc9;
}
.accordion-button{
  padding: 50px !important;
}
button.accordion-button.collapsed{
  color: var(--h2);
  font-size: 22px;
}
.accordion-body {
  color: var(--p);
  font-size: 18px;
}



.privacy{
  margin: 100px 0;
}
.privacy-content{
  margin-bottom: 30px;
}
.privacy-content h2{
  color: var(--h2);
}
.privacy-content p{
  margin: 10px 0 !important;
  color: var(--p);
}
.privacy-content ul{
  list-style: circle;
}
.privacy-content ul li{
  color: #8994AA;
}


#poping {
    background: #fff;
    width: fit-content;
    padding: 19px 15px;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 106px;
    top: 130px;
    gap: 10px;
    font-size: 13px;
    border: 1px solid var(--h2);
    border-radius: 8px;
    box-shadow: rgb(127 157 186 / 20%) 0px 8px 24px;
}
#poping #content__poping{
  color: var(--h2) !important;
  font-size: 18px;
     display: flex;
}
#poping #clsPopup {
    color: var(--h2);
    margin: auto;
    display: block;
    width: 30px;
    height: 30px;
    background: #cbd7e3;
    border-radius: 50%;
    font-size: 16px;
}

.single-calender p{
  color: var(--p);
  font-size: 20px;
  max-width: 400px;
}
.single-center p{
    max-width:none !important;
}





/*edit*/
nav.nav-bar.nav_fix {
    background-image: url(../img/footer.png);
    background-color: #385698;
    background-size: cover;
    background-repeat: no-repeat;
}
.logo-main {
    max-width: 160px;

}

.cardServices div.img{
    width: 70px;
    height: 70px;
     min-height: 70px;
    background: #ffffff21 ;
    display: flex
;
    align-items: center;
    justify-content: center;
}

.cardServices div.img img{
    width: 40px !important;
    height: 40px;
    object-fit: contain;
}


.error-msg {
    display: block;
}



.swiper-slide {
    display: flex !important
;
    flex-direction: column;
    justify-content: center;
}

.swiper-slide.last-slide {
 
      justify-content: flex-end;

}
.error-message {
    color: red;
  font-size: 12px; 
}

.dates .container {
    position: relative;
}

#submitBtn:disabled {
    cursor: no-drop;
}


.siteMap {
    margin:100px 0;
}
.siteMap h3{
    color:#385698;
    font-size:28px;
    margin-bottom: 15px !important;
}
.siteMap ul{
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #a7a9ac;
}

.siteMap .SUBmenu {
    display: flex;
    flex-direction: column;
    top:65%;
}

.sec-table{
    margin-bottom:50px !important;
}
body[dir="'ltr'"] .footer img.logo{
    max-width:40%;
}
body[dir="'ltr'"] .cardProgramming p {
    min-height: 80px !important;
}
body[dir="'ltr'"] .cardProgramming h3 {
    min-height: 70px !important;
}
body[dir="'ltr'"] .div-member .img::before{
    left: -46% !important;
    width: 185px !important;
}

body[dir="'ltr'"] .div-member .img::after {
    right: 187% !important;
}


body[dir="'ltr'"] .projectManeger.Maneger .img.img2::before {
    height: 96px !important;
    bottom: -122px !important;
}

body[dir="'ltr'"] .gridImgs .img .content {
    left: -1px !important;
}


.first-nums {
 
    gap: 15px;
}




/* إخفاء المظهر الافتراضي للـ checkbox */
.check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--btn); /* تحديد لون الإطار */
    background-color: transparent; /* لون الخلفية */
    border-radius: 4px; /* جعل الحواف دائرية قليلاً */
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease-in-out;
        padding: 0px !important;

}

/* عند تحديد الـ checkbox */
.check input[type="checkbox"]:checked {
    background-color: var(--btn);
    border-color: var(--btn);
}

/* إضافة علامة ✔ عند التحديد */
.check input[type="checkbox"]::after {
    content: "✔";
    font-size: 12px;
    color: white;
    font-weight: bold;
    position: absolute;
    top:58%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* إظهار العلامة عند التحديد */
.check input[type="checkbox"]:checked::after {
    opacity: 1;
}


.ui-datepicker .ui-datepicker-title select {
    font-size: 18px !important;
    color: #5cb74e;
}
.ui-datepicker-title{
        display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    align-content: flex-end;
    flex-direction: row-reverse;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: unset !important;
}


.cardProgramming span{
    margin: 20px auto 0 auto;
    display: block;
    color:#5cb74e;
}
.ui-datepicker select  {
    max-height: 30px; /* تقليل الارتفاع */
    font-size: 14px; /* تحسين حجم النص */
    padding: 5px;
    border: 1px solid #b8c2d947;
    border-radius: 5px;
    background: transpaarent;
    cursor: pointer;
}

.ui-datepicker select:focus {
    outline: none;
    border-color: #b8c2d947;
    box-shadow: 0 0 5px rgb(196 209 223 / 50%);
}

.formHero .col-md-6{
    width:100% !important;
}
body[dir="'ltr'"] .cardNews .content{
    direction:ltr;
}
 .cardNews .content h4{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 35px;

}
.chosen-container-single .chosen-single {
    border-color: #eee !important;
    box-shadow: none !important;
}
.chosen-container-single .chosen-single span {
    color: #385698;
    font-size: 14px !important;
}
.chosen-search {
    display: none !important; 
}
.chosen-container-single .chosen-single div {
     top: 11px  !important; 
}
.chosen-container.chosen-container-single {
    width: 117px !important; 
}.chosen-container-single .chosen-single {
    border-color: #eee !important;
    box-shadow: none !important;
    padding: 10px !important;
    height: auto !important;
    width: 100%;
}
.chosen-container-single .chosen-single span {
    
    display: flex!important;
    justify-content: flex-end;
    align-items: center;
}

.nice-select , .ui-datepicker-year ,.ui-datepicker-month{
    -webkit-tap-highlight-color: transparent;
    background-color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    display: flex
;
    color: var(--h2);
    align-items: center;
    line-height: 40px;
    outline: none;
    padding-right: 18px;
    padding-left: 30px;
    position: relative;
    text-align: right !important;
    -webkit-transition: all 0.2sease-in-out;
    transition: all 0.2sease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    min-width: 100px;
    border: 1px solid #cbd7e3;
}
   
  .nice-select:active, .nice-select.open, .nice-select:focus {
    border: 2px solid var(--h2); }
   .nice-select:after {
    border-bottom: 3px solid #cbd7e3;
    border-right: 3px solid #cbd7e3;
    content: '';
    display: block;
    height: 10px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    left: 19px;
    top: 45%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15sease-in-out;
    transition: all 0.15sease-in-out;
    width: 10px;
}
  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
            transform: rotate(-135deg); }
  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
        -ms-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0); }
    /* .nice-select.disabled:after { */
      /* border-color: #cccccc; */
     /* } */
  .nice-select.wide {
    width: 100%; }
    .nice-select.wide .list {
      left: 0 !important;
      right: 0 !important; }
  .nice-select.right {
    float: right; }
    .nice-select.right .list {
      left: auto;
      right: 0; }
  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; }
    .nice-select.small:after {
      height: 4px;
      width: 4px; }
    .nice-select.small .option {
      line-height: 34px;
      min-height: 34px; }
  .nice-select .list {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgb(240 240 241) 0px 20px 30px ;
    color: #385698;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;    
      width: 100% !important;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    -webkit-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
        -ms-transform: scale(0.75) translateY(-21px);
            transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
  font-size: 13px; }
    .nice-select .list:hover .option:not(:hover) {
      background-color: transparent !important; }
  
  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    list-style: none;
    display: flex
;
    align-items: center;
    outline: none;
    padding: 0px 9px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
  
    .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
      background-color: #f6f6f6; }
    .nice-select .option.selected {
      font-weight: bold; }
    .nice-select .option.disabled {
      background-color: transparent;
      color: #999;
      cursor: default; }

.no-csspointerevents .nice-select .list {
  display: none; }

.no-csspointerevents .nice-select.open .list {
  display: block; }
  
  
  .nice-select .list {
    max-height: 200px;
    overflow-y: scroll;
}
 .nice-select .list::-webkit-scrollbar {
  width: 4px;
  background: #fff !important;
}
 body[dir="'rtl'"] .nice-select  {
    padding-right:13px ;
  padding-left:25px ;
}
body[dir="'ltr'"] .nice-select  {
    padding-left:13px ;
  padding-right:25px ;
}

select.ui-datepicker-year, select.ui-datepicker-month {
    padding: 19px;
}

.edu-date{
    color:#CCCC99 !important;
    text-align:center;
}

.div-member{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -257px;
}

.div-member .img::before{
       content: " ";
    opacity: 1;
    background: #385698;
    height: 1px;
    width: 156px;
    top: 50%;
    right: -114%;
    transform: translate(-50%, -50%);
}
.div-member .img::after{
        content: "";
    position: absolute;
    bottom: 98px;
    right: -4%;
    background: #385698;
    transform: translateX(-50%);
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.labl-1{
    position: relative;
}
.labl-1 .iban{
   position: absolute;
    /*left: 2%;*/
    /*bottom: 2%;*/
    z-index: 100;
        /*color: #185cbf;*/
    /*background: #ffffff;*/
    width: 45px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 10%;
}

/*.abt-paragraph{*/
/*    max-width:360px;*/
/*}*/


.aboutUs .hiringGate .labl-1 input, .hiringGate .labl-1 select, .hiringGate .labl-1 textarea {

    padding: 20px 20px 15px 20px;
}
.aboutUs .hiringGate p {
    margin-bottom: 5px !important;
}
.aboutUs .hiringGate .labl-1 {
    margin-bottom: 10px !important;
}
.hiringGate .abt-image {
    height: 837px !important;
}

.aboutUs .labl-1 input, .labl-1 select, .labl-1 textarea {
    background-color: #38569821 !important;
    border:none !important;
}
.aboutUs .labl-1 input:focus,
.aboutUs .labl-1 textarea:focus{
    background:transparent !important;
    border:1px solid #385698 !important;
}
input[type="date"] {
    cursor: pointer;
    padding: 10px;
    width: 100% !important;
}
.track-success{
    color:#5cb74e;
}
.check img{
    filter: grayscale(1);
}
.check input[type="checkbox"]:checked + label img {
    filter: none; 
}
.rad-check{
        margin: auto;
    width: fit-content;
}


.projectManeger.Maneger .img img {
    height: 220px;
}
.projectManeger.Maneger .img {
    /*width: 150px !important;*/
    height: 193px;
}
.projectManeger.Maneger h2.h2 {
    font-size: 30px;
    margin-top: 8px !important;
}
a.btnMore {
    margin-top: 10px !important;
}
.projectManeger.Maneger .img.img2::before {
        height: 71px;
    bottom: -99px;
}

/*التنسيق المظبوط في الشاشه 100%*/
.ceo-director  .div-member {
    position: absolute;
       left: 50% !important;
    transform: translate(-50%, -50%);
    margin-left: -258px !important;
    top: 30% !important;
}
body[dir="'ltr'"] .ceo-director .div-member {
    position: absolute;
    left: 85% !important;
    transform: translate(-50%, -50%);
    margin-left: -165px !important;
    top: 30% !important;
}


.div-member .img::before {
    width: 157px;
    right: -115%;
    top: 102%;
}
.div-member .img::after {
    bottom: -8px;
    right: -80%;
}
.gridImgs {
    padding-top: 24px;
    margin-top: 75px;
}
.projectManeger.Maneger .gridImgs img {
    max-width: 70%;
}
.projectManeger.Maneger .gridImgs .img::before {
    left: 62%;
}
.projectManeger.Maneger .gridImgs .img::after {
    left: 62%;
}
.projectManeger.Maneger .img .content {
    height: 120%;
}
.ceo-tab .img img {
    height: 520px !important;
}
.ceo-tab h2.h2 {
    font-size: 28px;
}
.ceo-tab .buttom_fill{
    margin-top:10px !important;
}
body[dir="'ltr'"] .hero #btnFormHero {
    right: -47px !important;
    left:unset;
    transform: translateY(-50%) rotate(90deg);
}

body[dir="'ltr'"] .iconFixed {
    left: 50px !important;
}
body[dir="'ltr'"] .swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets{
    right:unset;
}

body[dir="'ltr'"] form.formHero {
    right: -100% !important;
    left:unset;
}

body[dir="'ltr'"] .formHero.active {
    right: 0 !important;
    left:unset;
}
body[dir="'ltr'"] .formHero .logoTitle img {
    transform: scaleX(-0.8);
}

body[dir="'ltr'"] .formHero .logoTitle span {
    margin-left: -33px;
    margin-top: 30px;
}

.vimision--btn{
        margin: 25px auto 0 !important;
}
/*.ceo-director .div-member{*/
/*    left: 57%;*/
/*         margin-left: -365px !important;*/
/*    top: 95% !important;*/
/*}*/

.p-text{
    font-size: 18px !important;
}
body[dir="'ltr'"] div#ftn0ucj2crkg1739974800848 {
    left: 45px !important;
    /* right: unset !important; */
    transform: translateX(-95%) !important;
}


.alert-success {
    margin: 40px 0 !important;
}

body[dir="'ltr'"] .labl-1 .iban {

    left: unset !important;
    right: 0% !important;
}

div#preview img {
    object-fit: fill;
}
.hide-col{
    display:none;
}
.about-tab .img img{
    height: 520px;
}
.about-tab h2{
    font-size: 30px ;
}
.ceo-section .div-member {
    position: absolute;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin-left: -257px !important;
    top: 30% !important;
}

.ceo-image img{
    height:520px !important;
}
.aboutUspage .img img {
    height:650px;
}
/*.event-name{*/
/*        position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    width: 80px;*/
/*    height: 50px;*/
/*    background: #fff;*/
/*    border: 1px solid var(--h2);*/
/*    border-radius: 8px;*/
/*    width: 80px;*/
/*    height: 50px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    box-shadow:rgb(127 157 186 / 20%) 0px 8px 24px;*/
/*}*/
/*.event-name p{*/
/*    font-size:12px;*/
/*    color:var(--h2);*/
/*}*/

.seminers .sim-img img{
    height:500px !important;
}

body[dir="'ltr'"] .serv-info .info h3:before {
    left: -30px !important;
    right:unset !important;
    transform: rotate(270deg);
}

body[dir="'ltr'"]  .serv-info .info:before {
    right: 0 !important;
    left:unset !important;
    transform: rotate(270deg);
}
/*body[dir="'ltr'"] .ceo-director .div-member {*/
/*    left: 93% !important;*/
/*}*/
body[dir="'ltr'"] .ceo-director .projectManeger.Maneger .img.img2::before {
    height: 78px !important;
    bottom: -104px !important;
}

/* تخصيص نمط التاريخ المميز */
.ui-datepicker td.highlight a {
    background-color: #ffeb3b;  /* اللون الخلفي */
    color: #000;                /* اللون النص */
    font-weight: bold;          /* جعل النص غامق */
}

/* تخصيص نص البيانات الثابتة بجانب التاريخ */
.ui-datepicker td.highlight a:after {
    content: attr(title);      /* عرض النص الثابت */
    display: block;
    font-size: 12px;
    color: #d32f2f;
    margin-top: 5px;
}
.searchBox-nav i{
        position: absolute;
    left: 5%;
    top: 41%;
    font-size: 16px;
    color: #fff;
}
.search-results{
    margin-top: 10px;
    background: #fff;
    max-height: 300px;
    overflow-y: scroll;
    padding: 12px;
    border-radius: 8px;
}
.search-results h3{
    font-size: 16px;
    color: #385698;
    padding-bottom: 10px;
    font-weight: 800;
}
.search-results a{
        color: #a7a9ac !important;
    font-size: 13px;
    padding-bottom: 11px !important;
    display: block;
}
.job-gate .labl-1 .iban {
    top: 67%;
}
body[dir="'ltr'"] .heroPage i{
    transform:rotate(180deg);
}

body[dir="'ltr'"] .ceo-section .div-member {
    margin-left: 199px;
    top: 30%;
    position: absolute;
    left: 93% !important
}
body[dir="'ltr'"] .form-close-btn {
    right: 40px;
}
.fc-timegrid.fc-timeGridWeek-view.fc-view::-webkit-scrollbar , .fc-timegrid.fc-timeGridDay-view.fc-view::-webkit-scrollbar {
      background: transparent !important;
}
.search-results::-webkit-scrollbar{
    background: transparent !important;
}


.accordion-button::after{
    margin-right:auto !important;
    margin-left: unset !important;
}

/* ---- EN Style Calendar PUIUX ----*/

body[lang="en"] .left-text-puiux{
    text-align: left;
    padding: 10px 10px;
    background: #efefef;
    margin: 10px 0;
    border-radius: 3px;
}
body[lang="en"] p.event-details-h{
    text-align: left;
}
.about-ceo img{
    height:650px !important;
}
.projectManeger.Maneger{
    position:relative;
}
body[dir="'ltr'"] .ceo-section.projectManeger.Maneger .img.img2::before {
    height: 81px !important;
    bottom: -108px !important;
}

#playButton {
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}
@media only screen and (max-width: 767px) {
    /* إخفاء الزر على الديسكتوب إذا لم يكن هناك حاجة */
    #playButton.hidden-on-desktop {
        display: none !important;
    }
}