@charset "utf-8";



:root {

  --primary_color: #00A0DF;

  --scoundary_color: #0C5370;

  --white: #ffffff;

  --black: #000000;

  --gray: #8D91A2;

  --prograph: #A19F9F;

  --lightBg: #F5FCFF;

}



/* 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;

}

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

/* End recall fonts*/





::-moz-selection {

  /* Code for Firefox */

  background: var(--scoundary_color);

  color: var(--white);

  opacity: 10%;

}



::selection {

  background: var(--scoundary_color);

  color: var(--white);

  opacity: 10%;

}



.lg-outer {

  direction: ltr;

}



.Cairo_font {

  font-family: 'Cairo' !important;

}

.font_bold {

  font-family: "Almarai-Bold" !important;

}



.font_regular {

  font-family: "Almarai-Regular" !important;

}



.prograph_color {

  color: var(--prograph);

}



.white_color {

  color: var(--white);

}



.black_color {

  color: var(--black);

}



.gray_color {

  color: var(--gray);

}



.primary_color {

  color: var(--primary_color) !important;

}



.scoundary_color {

  color: var(--scoundary_color) !important;

}



.bg_scoundary_color {

  background-color: var(--scoundary_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(--lightBg);

}







a,

h3,

h2,

h1,

h4,

h5,

p,

span,

div,

li {

  font-family: 'Almarai-Bold' !important;

}





html,body{

  overflow-x: hidden;
  margin: 0;
  padding: 0;

}



p,

h1,

h2,

h3,

h4,

h5,

h6,

ul {

  margin: 0;

}



a {

  text-decoration: none !important;

}



a:hover {

  color: var(--scoundary_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;

  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;

}



/* 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(--scoundary_color) !important;

}



.form-control:focus {

  border: none !important;

  border-bottom: 0.1px solid var(--primary_color);

  box-shadow: 0 0 0 0.1rem var(--primary_color);

}



.form-control::placeholder {

  color: var(--prograph);

}

/*--------------------Start page style ---------------------------*/

.fs-12{font-size: 12px;}

.fh-33{line-height: 33.6px;}

/*--------------------Start page style ---------------------------*/

header {

  position: relative;

  z-index: 1000;

}

.underline-link {

  position: relative;

  display: inline-block;

  text-decoration: none;

}



.underline-link::after {

  content: '';

  position: absolute;

  right: var(--bs-navbar-nav-link-padding-x);

  bottom: -5px; /* Adjust based on font size */

  width: 0;

  height: 2px; /* Adjust based on the thickness of the underline */

  background-color: var(--primary_color); /* Color of the underline */

  transition: width 0.3s ease; /* Adjust duration and easing as needed */

}

.underline-link.active::after {



  width: 80%;

}



.underline-link:hover::after {

  width: 80%;

}



/* body[dir="rtl"] .slide_bg{

  background-repeat: no-repeat;

  background-position: left;

  margin-top: -115px;

height: 650px;

}

body[dir="ltr"] .slide_bg{

  background-repeat: no-repeat;

  margin-top: -115px;

  background-position: right;

height: 650px;

} */
body[dir="rtl"] .slide_bg{

  background-repeat: no-repeat;

  background-position: left;

  margin-top: -105px;

height: 650px;

}

body[dir="ltr"] .slide_bg{

  background-repeat: no-repeat;

  margin-top: -105px;

  background-position: right;

height: 650px;

}



.slide_bg .content{

  position: absolute;

  top: 190px;

}

.border_underline{border-bottom: 3px solid var(--primary_color);}

.statistic-item{border: 4px solid #E8F9FF;}

.ourPartners img{ width: 100% !important;}

.ourPartners .item{ text-align: center;}

.owl-theme .owl-dots .owl-dot.active span{

  background-color: var(--primary_color) !important; width: 30px;

}

.owl-theme .owl-dots .owl-dot:hover span {

  background-color: var(--scoundary_color) !important;

}

.owl-theme .owl-dots .owl-dot span{

  background-color: #D9D9D9 !important; 

}

footer a.scoundary_color:hover{color: var(--primary_color) !important;}

.bg_footer {

  background-image: url(../images/footer_bg.png); background-repeat: no-repeat;

  background-size: cover;

  height: 400px;

}



.news_bg{

    background: var(--lightBg);

    position: absolute;

    z-index: -1;

    width: 100%;

    height: 370px;

    margin-bottom: -295px;

}

.link_icon::before{position: absolute; bottom: -15px;}

.news-item:nth-child(2) {

  margin-top: 120px;  /* Adds a margin to the second .news-item */

}

.news-item a:hover img{

  -webkit-transform: scale(1.01,1.02);

  transform: scale(1.01,1.02);

  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.165);

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.165)

}



.news-item a:hover .content i::before{

  padding-right: 10px;

}





.primary-link{color: var(--primary_color);}

.scoundary_link{color: var(--scoundary_color);}

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

.border-light{border:1.5px solid #EDF4FC;}



body[dir="rtl"] .aboutBg{

  background-repeat: no-repeat;

  background-size: cover; 

  background-position: left; 

  border-left: 15px solid var(--primary_color) ;

}

body[dir="ltr"] .aboutBg{

  background-repeat: no-repeat;

  background-size: cover; 

  background-position: left; 

  border-right: 15px solid var(--primary_color) ;

}



.about .title{

  position: absolute;

  z-index: 1;

  top: 50px;

  

  background: hsla(192, 89%, 47%, 1);



background: linear-gradient(0deg, hsla(192, 89%, 47%, 1) 0%, hsla(198, 100%, 43%, 1) 100%);



background: -moz-linear-gradient(0deg, hsla(192, 89%, 47%, 1) 0%, hsla(198, 100%, 43%, 1) 100%);



background: -webkit-linear-gradient(0deg, hsla(192, 89%, 47%, 1) 0%, hsla(198, 100%, 43%, 1) 100%);



filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#0DBAE4", endColorstr="#009ADA", GradientType=1 );

 width: 650px;}



 .custom_btn .bg_primary_color, .custom_btn .bg_scoundary_color{display: inline-block; margin: 0; font-size: 14px;}

 .custom_btn:hover{color: var(--white) !important;}

 .custom_btn:hover .bg_scoundary_color{padding-left: 20px !important; padding-right: 20px !important;}

 body[dir="rtl"] .custom_btn .bg_primary_color{border-radius: 0 50px 50px 0;}

 body[dir="ltr"] .custom_btn .bg_primary_color{border-radius: 50px 0 0 50px;}



 .about .bg_primary_color.list , .about .BrochureBg{

  height: 370px;



 }

 .about .BrochureBg{background-repeat: no-repeat; background-size: cover;}

 .fs_60{font-size: 60px;}

 .fs_25{font-size: 25px;}

 body[dir="rtl"] .about_single .counter{

  position: absolute;

    top: 40%;

    right: 150px;

 }

.about_single{

background: url(../images/about_single_bg.png) no-repeat;

background-position-x:center;

background-position-y:50px;

 }

 body[dir="ltr"] .about_single .counter{

  position: absolute;

    top: 40%;

    left: 150px;

 }

 .contact_us img{width: 30px;}

/* .our_services{height: 650px;} */

body[dir="rtl"] .our_services #service_img{position: absolute;

top:0;

right: -250px;

width: 600px;

height: 600px;

border: 1px solid #979797;

padding: 50px;

}

body[dir="ltr"] .our_services #service_img{position: absolute;

top:0;

left: -250px;

width: 600px;

height: 600px;

border: 1px solid #979797;

padding: 50px;

}

 .our_services .nav-link{position: absolute; top: 0; right: 0; color: #2B3C52;}

 .our_services .nav-link:hover,.our_services .nav-link.active{color: var(--primary_color);}

 .our_services .nav-link:hover .icon img{

  filter: invert(50%) sepia(100%) saturate(1000%) hue-rotate(180deg);

}

 .our_services .nav-link.active .icon img{

  filter: invert(100%) brightness(1000%) grayscale(100%) saturate(0%);

}

 .our_services .nav-link.active .icon{

  background-color: var(--primary_color);

  border-color: var(--primary_color);

}

  body[dir="rtl"] .our_services .nav-link:first-child{    top: 82px; right: 244px;}

  body[dir="rtl"] .our_services .nav-link:nth-child(2){    top: 169px; right: 288px;}

  body[dir="rtl"] .our_services .nav-link:nth-child(3){    top: 263px; right: 310px;}

  body[dir="rtl"] .our_services .nav-link:nth-child(4){    top: 360px; right: 294px;}

  body[dir="rtl"] .our_services .nav-link:nth-child(5){    top: 451px; right: 249px;}

  body[dir="ltr"] .our_services .nav-link:first-child{    top: 82px; right: 244px;}

  body[dir="ltr"] .our_services .nav-link:nth-child(2){    top: 169px; right: 288px;}

  body[dir="ltr"] .our_services .nav-link:nth-child(3){    top: 263px; right: 310px;}

  body[dir="ltr"] .our_services .nav-link:nth-child(4){    top: 360px; right: 294px;}

  body[dir="ltr"] .our_services .nav-link:nth-child(5){    top: 451px; right: 249px;}



.our_services .icon{

  background-color: var(--white);

  border: 1px solid #979797; padding: 9px;

display: inline-flex; align-items: center;}



.our_services .tab-content{background-color: #E8F9FF; height: 600px;}

 body[dir="rtl"] .our_services .circle{

 position: absolute; height: 600px; right:-80px;

}

 body[dir="ltr"] .our_services .circle{

 position: absolute; height: 600px; left:-80px; transform: scaleX(-1);

}



.navbar-nav .nav-link{color:var(--scoundary_color)}

.navbar-nav .nav-link.active{color:var(--primary_color)}



.btn-secondary {

  --bs-btn-color: #fff;

  --bs-btn-bg: var(--scoundary_color);

  --bs-btn-border-color: var(--scoundary_color);

  --bs-btn-hover-color: #fff;

  --bs-btn-hover-bg: #5c636a00;

  --bs-btn-hover-border-color: var(--scoundary_color);

  --bs-btn-focus-shadow-rgb: 130, 138, 145;

  --bs-btn-active-color: #fff;

  --bs-btn-active-bg: #565e6400;

  --bs-btn-active-border-color: var(--scoundary_color);

  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #fff;

  --bs-btn-disabled-bg: #6c757d;

  --bs-btn-disabled-border-color: #6c757d;

}



.service-icon{

  display: inline;

  width: 90px;

  height: 90px;

  border-radius: 50px;

  background-color: #E1FBCF;

}

.card-shadow{box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px;}

.primary-link:hover .service_item .primary_color{color: var(--scoundary_color) !important;}

.primary-link.btn{border: 1px solid var(--scoundary_color); border-radius: 50px;}

.primary-link.btn:hover{background-color: var(--scoundary_color); color: var(--white) !important;}



.img-animation {

  overflow: hidden;

  position: relative;

}



.img-animation:after {

  background: #fff;

  content: "";

  height: 150%;

  left: -75px;

  opacity: 0.2;

  position: absolute;

  top: -20px;

  transform: rotate(35deg);

  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);

  width: 30px;

  z-index: 10;

}



.owl-nav .owl-prev ,.owl-nav .owl-next{opacity: 0.4; position: absolute; top: 40%;}

.owl-nav .owl-prev {right:0; margin-right: -100px !important;}

.owl-nav .owl-next{left: 0; margin-left: -100px !important;}

.owl-nav .owl-prev:hover, .owl-nav .owl-next:hover{opacity: 1 !important; background-color: var(--white) !important;}



  .custom_shadow{box-shadow: rgba(0, 0, 0, 0.082) 0px 2px 3px 0px;}



  .lightBG{

    background-color: #F9FCFF;

  }

  .newsContent{position: absolute;

  bottom: 0px;

right: 0;}



.date-color{color: #91C1E3;}





  .btn-primary {

    --bs-btn-color: #fff;

    --bs-btn-bg: var(--primary_color);

    --bs-btn-border-color: var(--primary_color);

    --bs-btn-hover-color: #fff;

    --bs-btn-hover-bg: var(--scoundary_color);

    --bs-btn-hover-border-color: var(--scoundary_color);

    --bs-btn-focus-shadow-rgb: 49, 132, 253;

    --bs-btn-active-color: #fff;

    --bs-btn-active-bg: var(--primary_color);

    --bs-btn-active-border-color: var(--primary_color);

    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: #fff;

    --bs-btn-disabled-bg: var(--primary_color);

    --bs-btn-disabled-border-color: var(--primary_color);

}



.modal-dialog {

  max-width: 880px !important;

}



.w-90{width: 90% ;}

.Beneficiaries-Number{border-width: 2px; border-color: #A6C8DF;}

.custom_card{border: 1px solid #F7F7F9;}

.lightBlueBG{background-color: #E6EFF5;}



.pagination .page-item a{background-color: #e6eff500 !important; border-color: var(--primary_color); color: var(--primary_color);}

.pagination .page-item a:hover, .pagination .page-item.active a{background-color: var(--primary_color) !important; border-color: var(--primary_color); color: var(--white) !important;}

.pagination .page-item.disabled a{ color: var(--gray) !important;}



.close {

  color: var(--white);

  position: fixed;

  margin-right: -38px;

  margin-top: -50px;

  box-flex-group: var(--white);

}



.close:hover {

  color: var(--scoundary_color) !important;

}

.centered {

 margin-top: 28% !important;

}



#gallery-videos .centered{margin-top: 20% !important;}

.bg_primary_color .btn:active ,.bg_primary_color .btn:focus-visible ,.bg_primary_color .btn:focus{border: none !important;}



.programItem .content .overlay{

  display: none;

  background-color: var(--primary_color);

  border-radius: 0;

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0.8;

  width: 100%;

  height: 100%;

}

.overlay_content{ 

  display: none;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  text-align: center;

}





  .programItem:hover .overlay , .programItem :hover .overlay_content{display: block;   

    animation: scaleAnimation 0.5s ease-in-out  ;

    transform-origin: top right;

  }



  @keyframes scaleAnimation {

    0% {

      transform: scale(0);

    }

    100% {

      transform: scale(1); /* Adjust the scale factor as needed */

    }

  }

  .navbar-brand img{ width: 260px;}


  .navbar-toggler {
    color: rgb(255 255 255);
    border: var(--bs-border-width) solid rgb(255 255 255);
}
.navbar-toggler-icon {
  filter: invert(100%) brightness(2);
}
.navbar.sticky .navbar-toggler {
  color: var(--bs-navbar-color);
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
}
.navbar.sticky .navbar-toggler-icon {
  filter: none;
}

.customTitle{font-size: 5.7rem;
  line-height : 6rem;
width: 555px;}

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

/*--                  The media query Started                   --*/

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

/*--------------------Start mobile device style ---------------------------*/

@media screen and (max-width: 480px) {

  body[dir="rtl"] .slide_bg{

    background-repeat: no-repeat;
    margin-top: -70px;
    height: 190px;
    margin-bottom: 360px;
    background-size: contain;
  
  }
  
  .customTitle{ width: auto;}

  body[dir="ltr"] .slide_bg{
  
    background-repeat: no-repeat;
    margin-top: 0;
    height: 240px;
    margin-bottom: 360px;
    background-size: cover;
  
  }

.about .title {

  position: relative;

  top: 0px;

 width: 100%;

 align-items: start;

}

.container .row .text-end img.rounded-4{width: 100%;}

.fs_60{font-size: 30px;}

.fs_25{font-size: 15px;}

i.fs_60{font-size: 60px;}

.our_services #service_img{position: relative !important;

  width: 100% !important;

    height: 500px !important;

}

  body[dir="rtl"] .our_services .nav-link:first-child {

    top: 20px;
    right: 0px;

}

  body[dir="rtl"] .our_services .nav-link:nth-child(2) {

    top: 120px;
    right: 55px;

}

  body[dir="rtl"] .our_services .nav-link:nth-child(3) {

    top: 220px;
    right: 70px;

}

  body[dir="rtl"] .our_services .nav-link:nth-child(4) {

    top: 310px;
    right: 58px;

}

  body[dir="rtl"] .our_services .nav-link:nth-child(5) {

    top: 410px;
    right: 10px;

}

.our_services .tab-content {

  height: 100%;

}

  body[dir="ltr"] .our_services .nav-link:first-child {

  top: 10px;

  left: 0px;

}

  body[dir="ltr"] .our_services .nav-link:nth-child(2) {

  top: 80px;

  left: 55px;

}

  body[dir="ltr"] .our_services .nav-link:nth-child(3) {

  top: 160px;

  left: 70px;

}

  body[dir="ltr"] .our_services .nav-link:nth-child(4) {

  top: 240px;

  left: 46px;

}

  body[dir="ltr"] .our_services .nav-link:nth-child(5) {

  top: 300px;

  left: -10px;

}







.w-50{width: 100% !important;}

  footer img{width: 100%;}



  .smallNews img{    border-bottom-right-radius: var(--bs-border-radius-xl) !important;

    border-bottom-left-radius: var(--bs-border-radius-xl) !important;}

    .navbar-brand img{width: 130px;}

    

.row{width: 100%; margin-left:0 ;margin-right: 0px !important;}

.col-12{padding-left: 10px ; padding-right: 10px;}

.w-90{width: 100% ;}

.close {

  margin-right: 1px;

  margin-top: -50px;

}

.single_page .carousel-caption {

  bottom: -20%;

  right: 5%;

}

.single_page .carousel-caption h2{

font-size: 22px;

}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
  width: 96% !important;
}

}





/*--------------------Start ipade and device style ---------------------------*/

@media (max-width: 991px) and (min-width: 480px) {

  body[dir="rtl"] .slide_bg{

    background-repeat: no-repeat;
    margin-top: 0;
    margin-bottom: 260px;
    background-size: contain;
    height: 440px;
  
  }
  
  body[dir="ltr"] .slide_bg{
  
    background-repeat: no-repeat;
    margin-top: 0;
    margin-bottom: 260px;
    background-size: contain;
    height: 440px;
  
  }

.about .title {

  position: relative;

  top: 0px;

 width: 100%;

 align-items: start;

}



.our_services #service_img{position: relative !important;

  }

  .our_services .tab-content {

    height: 100%;

  }





  .owl-nav .owl-prev { margin-right: 0px !important;}

  .owl-nav .owl-next{margin-left: 0px !important;}



.close {

  margin-right: 10px;

  margin-top: -60px;

}
.container, .container-sm {
  max-width: 540px;
}

}



/*--------------------Start laptop device style ---------------------------*/



@media (max-width: 1700px) {

  .our_services .nav-link {    width: 16rem;}

}



/*--------------------Start laptop device (not HD screen) style ---------------------------*/



@media (max-width: 1400px) {



  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{

    max-width: 1280px !important;

  }



  

  }



/*--------------------Start Full HD device style ---------------------------*/

@media screen and (min-width: 1900px) {



}