@charset "utf-8";

:root {
  --primary_color: #1E4D82;
  --scoundary_color: #65B330;
  --white: #ffffff;
  --black: #000000;
  --gray: #807E7E;
  --prograph: #7A7979;
}

/* 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(--scoundary_color);
  opacity: 10%;
}

::selection {
  background: var(--scoundary_color);
  opacity: 10%;
}

.lg-outer {
  direction: ltr;
}

.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_footer {
  background-color: var(--primary_color);
}


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


body {
  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(--scoundary_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%;
}
.primary-link{color: var(--primary_color);}
.border-light{border:1.5px solid #EDF4FC;}

.navbar-nav .nav-link{color:var(--gray)}
.navbar-nav .nav-link.active{color:var(--primary_color)}
.border-start, .border-end{border-color: var(--scoundary_color) !important; border-width: 5px !important;}

.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;}
.TransportingBG{
    /* The image used */
    background-image: url('../images/TransportingBG.svg');
    /* Full height */
    height: 100vh;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
.statisticBG{
    /* The image used */
    background-image: url('../images/statisticBg.svg');
    /* Full height */
    height: 100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
.FoundingDateBG{
    /* The image used */
    background-image: url('../images/FoundingDate.svg');
    /* Full height */
    height: 100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
.visionBG{
    /* The image used */
    background-image: url('../images/visionBG.svg');
    width: 100%;
    height: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}

.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;
}

.smallNews .news_item:hover .img-animation:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.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;}
.social_media_list a {
  color: var(--primary_color);
  font-size: 20px;
}
.social_media_list .list-inline-item {
  background-color: var(--white);
  border: 1.5px solid var(--white);
  padding: 7px 13px;
  border-radius: 50px;
}
.social_media_list .list-inline-item:hover {
  background-color: var(--primary_color);
  border: 1.5px solid var(--white);
  padding: 7px 13px;
  border-radius: 50px;
  animation: completeBorder 1.5s infinite alternate; /* Adjust duration as needed */
}

@keyframes completeBorder {
  0% {
      border: 1.5px solid transparent;
  }
  100% {
      border:  0 solid var(--white); /* Adjust border color and width as needed */
  }
}
.social_media_list .list-inline-item:hover a ,.social_media_list .list-inline-item a:hover {
  color: var(--white) !important;
}

.lightBlue_color{color: #BDDCFF;}
.darkblueBG{background-color: #153D6A !important; height: 50px; width: 100%;}




.carousel-caption {
  bottom: 26%;
}


  .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;}


.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
background-color: var(--scoundary_color);
}
.owl-theme .owl-dots .owl-dot span{
  background-color: var(--light_background);
  }

  
  .footer_list{ list-style-type: none;}
  .footer_list a:hover{color: var(--white) !important;}

  .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(--scoundary_color) !important; border-color: var(--scoundary_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 16px 0 16px ;
  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 */
    }
  }

/*----------------------------------------------------------------*/
/*--                  The media query Started                   --*/
/*----------------------------------------------------------------*/
/*--------------------Start mobile device style ---------------------------*/
@media screen and (max-width: 480px) {
  .w-50{width: 100% !important;}
  footer img{width: 100%;}
  footer img.Ecy_logo{width: 30px !important;}

  .smallNews img{    border-bottom-right-radius: var(--bs-border-radius-xl) !important;
    border-bottom-left-radius: var(--bs-border-radius-xl) !important;}
    .navbar-brand{width: 70%;}
    .navbar-brand img{width: 100%;}
    
.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;
}
}


/*--------------------Start ipade and device style ---------------------------*/
@media (max-width: 991px) and (min-width: 480px) {
  footer img{width: 100%;}
  footer img.Ecy_logo{width: 30px !important;}
  .owl-nav .owl-prev { margin-right: 0px !important;}
  .owl-nav .owl-next{margin-left: 0px !important;}
  .w-50{width: 100% !important;}
  
.w-90{width: 50% ;}
.close {
  margin-right: 10px;
  margin-top: -60px;
}
}

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

@media (min-width: 992px) {
  .statistics .col-lg-2 {
    width: 20% !important;
}
}

/*--------------------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) {

}