@charset "utf-8";

:root {
  --main_gradient: linear-gradient(90deg,rgba(2, 155, 224, 1) 0%, rgba(76, 204, 76, 1) 100%);;
  --primary_color: #029BE0;
  --secondary_color: #4CCC4C;
  --third_color: #042A63;
  --white: #ffffff;
  --black: #000000;
  --prograph_light: #676464;
  --prograph: #4B4B4B;
  --bg_light: #F6F3EC;
}

/* Start recall fonts*/
@font-face {
  font-family: 'Almarai-Bold';
  src: url('fonts/Almarai-Bold.woff2') format('woff2'),
      url('fonts/Almarai-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarai-Regular';
  src: url('fonts/Almarai-Regular.woff2') format('woff2'),
      url('fonts/Almarai-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* End recall fonts*/


::-moz-selection {
  /* Code for Firefox */
  background: var(--primary_color);
  color: var(--white);
  opacity: 10%;
}

::selection {
  background: var(--primary_color);
  color: var(--white);
  opacity: 10%;
}
/*--- .lg-outer This class is most important in light gallary  ---*/
.lg-outer {
  direction: ltr;
}

.ltr {
  direction: ltr;
}
.rtl {
  direction: rtl;
}

.font_bold {
  font-family: "Almarai-Bold" !important;
}

.font_regular {
  font-family: "Almarai-Regular" !important;
}



.main_color{
  background: linear-gradient(90deg,rgba(2, 155, 224, 1) 80%, rgba(76, 204, 76, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.main_gradient{ background: var(--main_gradient);}

.prograph_color {
  color: var(--prograph);
}
.prograph_light_color {
  color: var(--prograph_light);
}

.white_color {
  color: var(--white);
}

.black_color {
  color: var(--black);
}

.primary_color {
  color: var(--primary_color) !important;
}

.secondary_color {
  color: var(--secondary_color) !important;
}
.third_color {
  color: var(--third_color) !important;
}

.bg_secondary_color {
  background-color: var(--secondary_color);
}

.bg_primary_color {
  background-color: var(--primary_color);
}

.bg_white {
  background-color: var(--white);
}

.bg_black {
  background-color: var(--black);
}
.bg_light {
  background-color: var(--bg_light);
}
.bg_third {
  background-color: var(--third_color);
}
.bg_light_gradient {
  background: linear-gradient(180deg, rgba(246, 243, 236, 1) 0%, rgba(246, 243, 236, 0) 30%);
}



a,
h3,
h2,
h1,
h4,
h5,
h6
 {
  font-family: 'Almarai-bold' !important;
}
p,
span,
div,
li {
  font-family: 'Almarai-Regular' !important;
}

html,body{
  margin: 0;
  padding: 0;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul {
  margin: 0;
}

a {
  text-decoration: none !important;
}
a.link_primary,a.link_secondary{color: var(--black);}
a.link_primary:hover{color: var(--primary_color);}
a.link_secondary:hover, a.black_color:hover h3 , a.black_color:hover h4, a.black_color:hover,a.prograph_light_color:hover,a.white_color:hover{color: var(--secondary_color) !important;}

.center {
  display: block !important;
  margin: auto !important;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}

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

.sticky {
  position: fixed;
  background-color: var(--white);
  top: 0;
  right: 0;
  padding-top: 5px;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  animation: navbarAnimation 0.5s ease-in-out;  /* Animation when it sticks */
}
 /* Animation keyframes for the navbar */
 @keyframes navbarAnimation {
  from {
      top: -60px;  /* Start from above the screen */
      opacity: 0;
  }
  to {
      top: 0;  /* End at the top of the page */
      opacity: 1;
  }
}


/* to change the tooltips color and the background color */
.tooltip-inner {
  color: var(--white);
  font-size: 0.7rem;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: var(--primary_color) !important;
}

.form-control:focus, .form-select:focus {
  border: none !important;
  box-shadow: 0 0 0 1px var(--primary_color);
}
.form-control, .form-select {
  border: 1px solid #9F9FA442 !important;
}

body[dir="rtl"] .form-control::placeholder ,.form-select {
  color: var(--prograph_light);
  font-family: 'Almarai-Regular';
}
body[dir="ltr"] .form-control::placeholder ,.form-select {
  color: var(--prograph_light);
  font-family: 'Almarai-Regular';
}
body[dir="rtl"] [type=email], body[dir="rtl"] [type=number], body[dir="rtl"] [type=tel], body[dir="rtl"] [type=url] {
    direction: rtl;
}
.underline-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.underline-link::after {
  content: '';
  position: absolute;
  bottom: -5px; /* Adjust based on font size */
  width: 0;
  height: 1px; /* Adjust based on the thickness of the underline */
  background-color: var(--black); /* Color of the underline */
  transition: width 0.3s ease; /* Adjust duration and easing as needed */
}
body[dir="ltr"] .underline-link::after {
left: 3px;
}
body[dir="rtl"] .underline-link::after {
right: 3px;
}

.underline-link.active::after {

  width: 80%;
}

.underline-link:hover::after {
  width: 80%;
}

body[dir="ltr"] .d-rtl{display: none;}
body[dir="rtl"] .d-ltr{display: none;}
/*--------------------Start page style ---------------------------*/
.navbar-nav{position: relative; }
.navbar-nav .nav-link{color: var(--prograph_light);}
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover{
  background: linear-gradient(90deg,rgba(2, 155, 224, 1) 0%, rgba(76, 204, 76, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.navbar .dropdown {position: static;}
.navbar .dropdown-menu {min-width: 85rem;}
.btn_custom{
  background: var(--main_gradient);
  color: var(--white);
}
.btn_custom:hover{
  border:1px solid var(--primary_color);
  background: linear-gradient(90deg,rgba(2, 155, 224, 1) 0%, rgba(76, 204, 76, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.main_carousel{margin-top: -117px;}
header{position: relative;z-index: 1000;}
header .rounded-5 {border-radius: 3rem !important;}
.carousel_main_gradient{background-color: #092F16; opacity: 40%; position: absolute; top: 0; height: 100%; width: 100%;}
.main_carousel .carousel-caption {bottom: 20%;}
.icon_container, .btn_icon{width: 40px; height: 40px;}
.icon_container::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../images/more_arrow_icon.svg");
}

.icon_container {
  display: inline-block;
  position: relative;
  cursor: pointer;
}


.icon_container::after {
  transform: translateX(0%) translateY(0px);
  opacity: 1;
  transition: none;
}

/* Hover -> infinite animation */
.btn_more_details:hover .icon_container::after {
  opacity: 1;
  animation: arrowLoop 1s ease-in-out none ;
}

/* Infinite looping animation */
@keyframes arrowLoop {
  0% {
      transform: translateX(-50%) translateY(10px); /* bottom */
      opacity: 0;
  }
  30% {
      opacity: 1;
  }
  100% {
      transform: translateX(50%) translateY(-10px); /* up */
      opacity: 0;
  }
}


.btn_more_details:hover {
background-color: var(--black) !important;
color: white;
}

.search{width: 40px; height: 40px; border: 1px solid #D9D9D9;}
.white_block{height: 50px; width: 100%; position: absolute; bottom: -5px; left: 0;    border-top-right-radius: 50px !important;border-top-left-radius: 50px !important;}
/* Fullscreen overlay */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 64, 101, 0.95); /* dark blue transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 19999;
}

/* When active */
.search-overlay.active {
  visibility: visible;
  opacity: 1;
}

/* Search form */
.search-form {
  width: 80%;
  max-width: 600px;
  position: relative;
}
body[dir="ltr"] .search-form input {
  width: 100%;
  padding: 20px 60px 20px 20px;
  font-size: 20px;
  border: none;
  border-radius: 50px;
  outline: none;
}
body[dir="rtl"] .search-form input {
  width: 100%;
  padding: 20px 20px 20px 145px;
  font-size: 20px;
  border: none;
  border-radius: 50px;
  outline: none;
}
.search-form button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50px;
  width: 120px;
  height: 50px;
  font-size: 20px;
  cursor: pointer;
}
body[dir="ltr"] .search-form button { right: 15px;}
body[dir="rtl"] .search-form button { left: 15px;}

.close-btn {
  position: absolute;
  top: 20px;
  font-size: 35px;
  color: white;
  cursor: pointer;
}
body[dir="ltr"] .close-btn {right: 40px;}
body[dir="rtl"] .close-btn {left: 40px;}


.border_custom {
  display: inline-block;
  position: relative;
  background: var(--white); 
}

.border_custom::before {
  content: "";
  position: absolute;
  inset: -1px;                
  z-index: -1;
  border-radius: 15px;
  background: linear-gradient(90deg,rgba(2, 155, 224, 1) 0%, rgba(76, 204, 76, 1) 100%);
  filter: blur(0.5px);
}

.custom_text{
  background: linear-gradient(90deg,rgba(2, 155, 224, 1) 20%, rgba(76, 204, 76, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.Numbers_and_facts {
  position: relative;
  background-image: url('../images/Numbers_and_factsBg.jpg'); 
  height: 700px;

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.Numbers_and_facts .gradient{
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: #252E36;
  background: linear-gradient(180deg, rgba(37, 46, 54, 1) 0%, rgba(27, 31, 18, 0) 100%);
}
.Numbers_and_facts .content{
  position: relative;
  bottom: 0;
  height: 700px;
  width: 100%;
  z-index: 1;
}

.Numbers_and_facts .col-3{
  position:relative;
}
.Numbers_and_facts .col-3 .line{
  position:absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 1px;
  background-color: white;
  transition: height 1s ease-in;
}
.Numbers_and_facts .col-3 .line::after {
  content: "";
  display: inline-block;       
  width: 24px;                  
  height: 24px;      
        
  position: relative;
  top: -15px;
  background-image: url("../images/lineTopIcon.svg");
  
  background-size: contain;      
  background-repeat: no-repeat;
  background-position: center;
  /* Animation */
  animation: rotateInfinite 2s linear infinite;
}
body[dir="rtl"] .Numbers_and_facts .col-3 .line::after {left: 12px;}
body[dir="ltr"] .Numbers_and_facts .col-3 .line::after {left: -12px;}

/* Keyframes for infinite rotation */
@keyframes rotateInfinite {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.Numbers_and_facts.animate .col-3:first-child .line{
  height: 400px;
}
.Numbers_and_facts.animate .col-3:nth-child(2) .line{
  height: 216px;
}
.Numbers_and_facts.animate .col-3:nth-child(3) .line{
  height: 500px;
}
.Numbers_and_facts.animate .col-3:last-child .line{
  height: 316px;
}
.Numbers_and_facts .col-3 .item_content{
  position: absolute;
  left: 25px;
  bottom: 0;
  overflow: hidden;
  transition: bottom 1s ease-in;
}

.Numbers_and_facts.animate .col-3:first-child .item_content{
  bottom: 350px;
}
.Numbers_and_facts.animate .col-3:nth-child(2) .item_content{
  bottom: 170px;
}
.Numbers_and_facts.animate .col-3:nth-child(3) .item_content{
  bottom: 440px;
}
.Numbers_and_facts.animate .col-3:last-child .item_content{
  bottom: 270px;
}

.Numbers_and_facts .Count{font-size: 80px;}
.Our_companies .border{border-color: #E0E0E0;}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top:0px;
    width: 40px;
    height: 40px;
    margin-top: 0;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E0E0E0;
    border-radius: 50px;
    color: var(--black);
}
.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 20px;
}

.swiper-button-next {
    left: 0px !important;
    right: auto !important;
}
.swiper-button-prev {
    left: 50px !important;
    right: auto !important;
}
.Our_sectors, .our_values, .distinguishes{background: #F6F3EC; background: linear-gradient(180deg, rgba(246, 243, 236, 1) 0%, rgba(246, 243, 236, 0) 30%);
}
.Our_sectors .border_custom, .Our_signs .border_custom ,.Why_choose .border_custom, .our_values .border_custom, .distinguishes .border_custom{background: var(--bg_light);}
.Our_sectors .icon{ width:80px ; height: 80px; display: flex; align-items: center; justify-content: center;}


.Our_signs .logo-circle {
  width: 160px;
  height: 160px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.Our_signs .logo-circle img {
  max-width: 170px;
  max-height: 170px;
  object-fit: contain;
}
.Our_sectors {
  position: relative;
}

.sticky-box {
  position: sticky;
  top: 100px; 
}

.custom_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom_list li {
  margin-bottom: 10px;
  position: relative;
}

.custom_list li::before {
  content: "";
  position: absolute;
  top: 1px;
  width: 18px;
  height: 18px;

  background-image: url("../images/custom_list_icon.svg"); /* SVG هنا */
  background-size: contain;
  background-repeat: no-repeat;
}
body[dir="rtl"] .custom_list li {padding-right: 25px;}
body[dir="rtl"] .custom_list li::before {right: 0;}
body[dir="ltr"] .custom_list li {padding-left: 25px;}
body[dir="ltr"] .custom_list li::before {left: 0;}

body[dir="rtl"] .rounded_ts {border-top-right-radius: 50px !important;}
body[dir="ltr"] .rounded_ts {border-top-left-radius: 50px !important;}
body[dir="rtl"] .rounded_ts img {border-top-right-radius: 35px !important;}
body[dir="ltr"] .rounded_ts img {border-top-left-radius: 35px !important;}
.Awards .col-lg-4 .border{border-color: #e1e1e1; border-bottom: none !important;}
.Awards .col-lg-4:first-child .border{border-left: none !important; border-right: none !important;}
.Awards .col-lg-4:last-child .border{border-left: none !important; border-right: none !important;}
.date{ position: absolute; top: -10px; color: #8A8A8A;}
.bg_gradient{ position: absolute; top: -15px; color: var(--white); background: var(--main_gradient);}
.img_container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.img_container img {
  display: block;
}

/* الشعاع */
.img_container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 100%;     /* ← شعاع صغير جداً */
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}

/* الحركة على الهوفر */
.last_news a:hover .img_container::before ,.albums a:hover .img_container::before {transform: translateX(350%) ;}

.footer_bg {
  position: relative;
  color: #fff;
  background-image: url("../images/Footerbg.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* طبقة اللون فوق الصورة */
.footer_bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #042a63a8; /* لون + شفافية */
  z-index: 0;
}
.footer_bg > * {
  position: relative;
  z-index: 1;
}
.footer_bg .top {
  position: absolute;
  z-index: 1;
  top: 0;
  background: #fff;
  left: 0;
  width: 100%;
  height: 50px;
}
.footer_bg .border_x{border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;}
.our_influence .border_custom, .President_speech .border_custom{background: var(--third_color); color: var(--white);}


.projects-wrapper {
  gap: 16px;
  overflow: hidden;
}

/* الكرت */
.project-card {
  position: relative;
  height: 420px;
  flex: 1;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: flex 0.6s ease, transform 0.4s ease;
  overflow: hidden;
}

/* Overlay */
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.411);
  transition: opacity .4s ease;
}
/* Overlay */
.project-card::before.active {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--main_gradient);
  transition: opacity .4s ease;
}

.project-card:hover::before,
.project-card.active::before {
  opacity: 0.5;
  background: var(--main_gradient);
}

/* الكرت النشط */
.project-card.active {
  flex: 3; /* 👈 العرض المخصص */
}

/* المحتوى */
.card-content {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: .4s ease;
}

.project-card.active .card-content {
  opacity: 1;
  transform: translateY(0);
}

/* إخفاء النص العمودي للكرت النشط */
.project-card.active {
  opacity: 1;
}
.Our_signs .custom_border{ border-bottom: 1px solid #E0E0E0;}
.Our_signs .border_center{ border-left: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0;}
a.link-underline-success{text-decoration: underline !important; text-decoration-color: #27ca27 !important;}
.pagination .page-item .page-link{ width: 45px; height: 45px; border: none; border-radius: 50px; display: flex; align-items: center; justify-content: center; color: #918F8F;}
.pagination .page-item.active .page-link{color: var(--white); background: var(--main_gradient);}

.albums .item:hover .gradint{background-color: #0000003d;}
.albums .item:hover .content{display: flex !important;}
a.main_gradient_link:hover{ background: none !important; border: 1px solid var(--primary_color);}
.contact_form input, .contact_form textarea{ background-color: #F2F2F2;}
input::placeholder,
textarea::placeholder {
  color: #8A8A8A !important;
}

.strategic_goals_icon{margin-top: -130px;}
.President_speech{  
  position: relative;
  background-color: #042A63;
  padding-bottom: 60px;

  overflow: hidden;}
.President_speech::after {
  content: "";
  position: absolute;
  bottom: -170px;
  width: 55%;
  height: 100%;
  z-index: 1;
}
body[dir="rtl"] .President_speech::after {
  left: 0;
background-image: url(../images/President_speech_bg.svg);
}
body[dir="ltr"] .President_speech::after {
  right: 0;
background-image: url(../images/President_speech_bg_ltr.svg);
}

.light_blue_color{color: #CFE0FB ;}
.distinguishes .border{border-color: #F7F4EE !important; cursor: pointer;}
.distinguishes .border:hover{background-color: #F7F4EE;}
.distinguishes .border img{ filter: brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(144%) hue-rotate(5deg) brightness(100%) contrast(100%); transition: filter 0.1s ease-in-out;}
.distinguishes .border:hover img{   filter: none;}

.Establishing_companies .custom_shadow{
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  
}



.logo-wrap img {
  position: relative;
  z-index: 2;
}

/* shadow */
.logo-wrap::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 14px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: 1;
}
.timeline-dot {
  width: 30px;
  height: 30px;
  background: var(--main_gradient);
  border-radius: 50%;
  margin: 10px auto;
  position: relative;
}

.line { position: relative; margin-bottom: -30px !important; border-width: 5px; border-color: #d3d0d0;}



/*----------------------------------------------------------------*/
/*--                  The media query Started                   --*/
/*----------------------------------------------------------------*/
/*--------------------Start mobile device style ---------------------------*/
@media screen and (max-width: 480px) {
  body, html  { overflow-x: hidden;}
  .navbar .dropdown-menu { min-width: 100%;}
  .navbar-brand img{width: 150px;}
  header .rounded-5 { border-radius: 0rem !important;}
  .main_carousel{top: 0px;}
  .Numbers_and_facts,.main_carousel img{height: 500px;}
  .Numbers_and_facts .Count{font-size: 40px;}
  .Numbers_and_facts .content{height: 500px; }
  .Numbers_and_facts.animate .col-3:first-child .line{
    height: 260px;
  }
  .Numbers_and_facts.animate .col-3:nth-child(2) .line{
    height: 76px;
  }
  .Numbers_and_facts.animate .col-3:nth-child(3) .line{
    height: 346px;
  }
  .Numbers_and_facts.animate .col-3:last-child .line{
    height: 176px;
  }
  .Numbers_and_facts.animate .col-3:first-child .item_content{
    bottom: 220px;
  }
  .Numbers_and_facts.animate .col-3:nth-child(2) .item_content{
    bottom: 26px;
  }
  .Numbers_and_facts.animate .col-3:nth-child(3) .item_content{
    bottom: 306px;
  }
  .Numbers_and_facts.animate .col-3:last-child .item_content{
    bottom: 126px;
  }

  .projects-wrapper {
    flex-direction: column;
  }

  .project-card,
  .project-card.active {
    flex: unset;
    height: 300px;
  }
  .news_details img{height: 300px;}
  .influence_item img{height: 250px;}
.strategic_goals_icon{margin-top: -100px;}
.President_speech::after {display: none;}
  }



/*--------------------Start ipade and device style ---------------------------*/
@media (max-width: 991px) and (min-width: 480px) {
  body, html  { overflow-x: hidden;}
  .navbar .dropdown-menu { min-width: 100%;}
  header .rounded-5 { border-radius: 0rem !important;}
  .main_carousel{top: 0px;}
  .main_carousel img{height: 500px;}
  .news_details img .influence_item img{height: 350px;}
  .strategic_goals_icon{margin-top: -100px;}
  .President_speech::after {display: none;}


}

/*--------------------Start small device style ---------------------------*/
@media (max-width: 1300px) and (min-width: 991px) {
    body, html  { overflow-x: hidden;}
  
}
/*--------------------Start laptop device (not HD screen) style ---------------------------*/
@media (min-width: 1300px) and (max-width: 1899px) {
  .container,.container-lg,.container-md,.container-sm,.container-xl { max-width: 1200px;}

 
}



/*--------------------Start Full HD device style ---------------------------*/
@media screen and (min-width: 1900px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{ max-width: 1400px !important; }
 
}