@charset "utf-8";

:root {
  --primary_color: #00702D;
  --scoundary_color: #472301;
  --white: #ffffff;
  --black: #000000;
  --prograph_light: #817575;
  --prograph: #74787C;
  --bg_light: #F6F4F2;
}

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

::selection {
  background: var(--scoundary_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;
}

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

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

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

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

.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(--bg_light);
}



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

.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;
  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(--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);
}
.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%;
}
/*--------------------Start page style ---------------------------*/
header {
  position: relative;
  z-index: 1000;
}
body[dir="rtl"] .language .language_icon{ width: 25px; height: 25px; background: url(../images/icon-flag-en.svg) no-repeat; background-size: cover;}
body[dir="ltr"] .language .language_icon{ width: 25px; height: 25px; background: url(../images/icon-flag-sa.svg) no-repeat; background-size: cover;}
a.primary_color:hover{color: var(--scoundary_color) !important;}
a.scoundary_color:hover, a.text-black:hover{color: var(--primary_color) !important;}
.navbar-nav .nav-link{color:var(--scoundary_color);}
.navbar-nav .nav-link:hover{color:var(--primary_color) !important;}
.navbar-nav .nav-link.active{color:var(--primary_color);}
.gradient{
  height:100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: -webkit-linear-gradient(to top, var(--scoundary_color), #1a3e4d00);
  background: linear-gradient(to top, var(--scoundary_color),#1a3e4d00);
  }

  .carousel-indicators {
    bottom: 90px;
    right: -55px;
    flex-direction: column;
}
.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.news a:hover.item .content{background-color: var(--bg_light) !important; height: 100%;}
.news a:hover.item  p{color: var(--scoundary_color) !important;}
.news a:hover.item  span{color: var(--primary_color) !important;}
.smallNewsImg{height: 120px;  object-fit: cover;}
.bigNewsImg{height: 465px;  object-fit: cover;}
body[dir="rtl"] .statements.owl-carousel .bg_scoundary_color{ position: absolute; bottom: 0; right: 0; color: var(--white); border-top-left-radius: 14px; opacity: 70%;}
body[dir="ltr"] .statements.owl-carousel .bg_scoundary_color{ position: absolute; bottom: 0; left: 0; color: var(--white); border-top-right-radius: 14px; opacity: 70%;}
.statements.owl-carousel img{ height: 384px; object-fit: cover;}
.statements .item .content , .custom_shadow{
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,5%);
  -webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,5%);
  -moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,5%);}

.owl-carousel .owl-nav button.owl-prev,.owl-carousel .owl-nav button.owl-next{font-size: 30px; padding: 1px 19px !important; border: 1px solid #D9D9D9 !important; border-radius: 50px !important; background-color: var(--white); color: #D9D9D9;}
.owl-carousel .owl-nav button.owl-prev:hover,.owl-carousel .owl-nav button.owl-next:hover{ background-color: var(--scoundary_color); color: var(--white); border-color: var(--scoundary_color) !important;}
.owl-nav .owl-prev{position: absolute; bottom: 45%; right: -65px;}
.owl-nav .owl-next{position: absolute; bottom: 45%; left: -65px;}

.videos{background:url(../images/video_BG.jpg) no-repeat; background-size: cover;}
.vid_gradent{
  height:100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: var(--scoundary_color);
  opacity: 50%;
}
.black_gradient{
  height:100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: var(--black);
  opacity: 20%;
}
.vidio_icon{height:100%; width: 100%; position: absolute;  top: 0; right: 0;}
.vidio_link{cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center;}
.vidio_link div:first-child{width: 100px; height: 100px; background-color: #ffffff5d; position: absolute;}
.vidio_link div:nth-child(2){width: 80px; height: 80px; background-color: #ffffffa4; position: absolute;}
.vidio_link div:nth-child(3){width: 60px; height: 60px; background-color: #fff; position: absolute;}
.play_icon{width: 15px !important;}
.bg_footer{background-color: #341A02;}
footer a.text-white:hover{color: var(--prograph_light) !important;}
.breadcrumb a:hover, .breadcrumb li p,.carousel-caption .date{color: #DDBEA1 !important;}
.about_single .counter{position: absolute; top: 55%; border: 1px solid var(--primary_color);}
.list-unstyled.custom li{
position: relative;
margin-bottom: 10px;
}
.list-unstyled.custom li::before{
  content: "\3da4";
  font-family: 'hgi-stroke-rounded' !important;
  color: var(--scoundary_color);
  font-size: 20px;
  position: absolute;
  right: -5px;
  top: -4px;
}
.bg-vision{
  background: url(../images/vision-and-missionBg.png) no-repeat;
  background-position: bottom left;
  background-size: contain;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: var(--scoundary_color);
  opacity: 100%;
  background-color: var(--bg_light);
  border-color: var(--scoundary_color);
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-color: #ffffff00;
}
.nav-tabs .nav-link{
  color: var(--scoundary_color) !important;
  opacity: 50%;
}
.nav-tabs .nav-link:hover{
  color: var(--scoundary_color) !important;
  opacity: 100%;
}
.nav-tabs {
  --bs-nav-tabs-border-color: var(--scoundary_color);
  --bs-nav-tabs-link-hover-border-color:#ffffff00;
}
.contact_us img {
  width: 30px;
}
.owl-stage{padding-bottom: 10px;}
.Secretary img{margin-top: -100px;}
.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;
}
  .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;
}

.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 */
    }
  }

/*----------------------------------------------------------------*/
/*--                  The media query Started                   --*/
/*----------------------------------------------------------------*/
/*--------------------Start mobile device style ---------------------------*/
@media screen and (max-width: 480px) {
  .smallNewsImg{height: 100%;  object-fit: fill;}
  .bigNewsImg{height: 200px;  object-fit: fill;}
  .owl-carousel .owl-nav button.owl-prev,.owl-carousel .owl-nav button.owl-next{border: 1px solid #D9D9D9 !important; background-color: var(--primary_color); color: var(--white);}
  .owl-carousel .owl-nav button.owl-prev:hover,.owl-carousel .owl-nav button.owl-next:hover{ background-color: var(--scoundary_color); color: var(--white);}
  .owl-nav .owl-prev{position: absolute; bottom: 45%; right: 0px;}
  .owl-nav .owl-next{position: absolute; bottom: 45%; left: 0px;}

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

    .navbar-brand{width: 70%;}
    .navbar-brand img{width: 100%;}
    
.row{width: 100%; margin-left:0 ;margin-right: 0px !important;}
.close {
  margin-right: 1px;
  margin-top: -50px;
}
.single_page .carousel-caption {
  bottom: -46%;
  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) {
  .smallNewsImg{height: 200px;  object-fit: fill;}
  .bigNewsImg{height: 435px;  object-fit: fill;}

  .owl-carousel .owl-nav button.owl-prev,.owl-carousel .owl-nav button.owl-next{border: 1px solid #D9D9D9 !important; background-color: var(--primary_color); color: var(--white);}
  .owl-carousel .owl-nav button.owl-prev:hover,.owl-carousel .owl-nav button.owl-next:hover{ background-color: var(--scoundary_color); color: var(--white);}
  .owl-nav .owl-prev{position: absolute; bottom: 45%; right: 0px;}
  .owl-nav .owl-next{position: absolute; bottom: 45%; left: 0px;}

.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 (min-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) {

}