@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap');
/* Global Style*/
:root{
  --main-color: #B5102B;
  --second-color: #0F2148;
  --main-transition: all 0.3s;
  --backgroundColor: #F8F8F8;
}
body{
  font-family: 'Cairo', sans-serif;
  direction: rtl;
}
a{
  text-decoration: none;
}
ul{
  list-style: none;
}
*::selection{
  background-color: var(--main-color);
  color: #fff;
}
img::selection{
  background-color:unset;
  color: unset;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--backgroundColor);
}
::-webkit-scrollbar-thumb {
  background: var(--main-color);
}
.owl-nav .owl-prev ,.owl-nav .owl-next{
    background-color: rgba(181, 16, 43, 60%) !important;
    color: var(--second-color) !important;
    height: 52px !important;
    width: 52px !important;
    border-radius: 50% !important;
    position: absolute;
    top: 50%;
    transition: var(--main-transition);
  }
  .owl-nav .owl-prev:hover ,.owl-nav .owl-next:hover{
    background-color: var(--main-color)!important;
    color: #fff !important;
  }
  .owl-next{
    right: -43px;
    transform: translate(-50%,-50%);
  }
  .owl-prev{
   left: 10px;
   transform: translate(-50%,-50%);
  }
  .owl-next i,.owl-prev i{
    font-size: 1.75rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .title h3::after{
    content: "";
    position: absolute;
    width: 50px;
    height: 3px;
    left: 50%;
    bottom: -10px;
    background-color: var(--main-color);
    transform: translateX(-50%);
}
  

/* Start Navbar */
nav .navbar-brand img{
      width: 60px;
      height: 60px;
      transition: var(--main-transition);
    }
    nav .navbar-brand:hover img{
      transform: scale(1.1);
    }
  .navbar-nav .nav-link{
    font-weight: 600 !important;
    position: relative;
  }
  .navbar-nav .nav-link.active::before{
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f043";
      position: absolute;
      top: 0px;
      left: 0;
      bottom: 0px;
      right: 0;
      font-size: 50px;
      line-height: 50px;
      z-index: -1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: all 200ms linear;
}
  .navbar-nav .nav-link span{
    position: relative;
  }
  .navbar-nav .nav-link span::before {
    position: absolute;
    top: 7px;
    left: -10%;
    right: -15px;
    bottom: 3px;
    background: #fff;
    content: "";
    z-index: -1;
}
  .navbar-nav .nav-link.active,
  .nav-link:hover {
    color: var(--main-color);
  }

.dropdown-menu  {
  right: 0;
  text-align: right;
  cursor: pointer;
}
.dropdown-menu  {
  border-top: 5px solid var(--main-color);
  border-radius: 0px !important;
}
.dropdown-menu  .dropdown-item{
  color: var(--main-color) !important;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  padding: 7px;
}
.dropdown-menu  .dropdown-item:hover{
    color: #fff !important;
    background-color: rgba(181,16,43,0.8) !important;
  }

.dropdown-toggle::after {
 color: var(--main-color);

}
.navbar-toggler {
  border:2px solid var(--main-color) !important;
}
.navbar-toggler:focus {
  box-shadow: 2px 2px   var(--main-color) !important;
}
.navbar-toggler i{
  color: var(--main-color) !important;
}

@media screen and (max-width:991.9px){
  nav .navbar-nav .nav-link.active::before{
    content: none;
  }

}

/* Start Header */
header{
    padding: 70px 0px ;
}
header .data{
      min-height: 90vh;
      position: relative;
      background-size: cover;
      background-position: center;
      max-width: 100%;
      z-index: 9;
      animation: bgburnsEast 25s linear infinite alternate;
        -webkit-animation: bgburnsEast 25s linear infinite alternate;
}
 header .data::before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: #000;
        opacity: .5;
        z-index: -1;
    }
  
    .carousel-indicators{
      z-index: 9;

    }
    .carousel-indicators button{
        background-color: #fff;
        width: 30px !important;
        height: 6px !important;
    }
    .carousel-indicators button.active{
        background-color: var(--main-color);
      }

    @keyframes bgburnsEast {
  
    0% {
        transform: scale(1) translateX(0);
        -webkit-transform: scale(1) translateX(0);
    }
    100% {
        transform: scale(1.2) translateX(20px);
        -webkit-transform: scale(1.2) translateX(20px);
        -moz-transform: scale(1.2) translateX(20px);
        -ms-transform: scale(1.2) translateX(20px);
        -o-transform: scale(1.2) translateX(20px);
  }
    }
  @media screen and (max-width: 992px){
  header .data {
      animation: bgburnsEast 25s none;
      -webkit-animation: bgburnsEast none;
  }
  }
  
    .btn.btn-color
    {
      background-color: var(--main-color);
      color: #fff;
      transition: var(--main-transition);
      -webkit-transition: var(--main-transition);
      -moz-transition: var(--main-transition);
      -ms-transition: var(--main-transition);
      -o-transition: var(--main-transition);
    }
    .btn.btn-color:hover{
      color: var(--main-color);
      background-color: #fff;
    }
  
    .carousel-item .text {
      position: absolute;
      z-index: 1000;
      left: 150%;
      bottom: 13%;
      transform: translateX(-50%);
      border-left: 5px solid var(--main-color);
      border-right: 5px solid var(--main-color);
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 20px 0px;
      width: 60%;
    }
    .carousel-item .text  h4{
        font-size: 1.5rem;
        color: var(--second-color);
        font-weight: 700 !important;
      }
      .carousel-item .text p{
        font-size: 1rem;
        font-weight: 500;
      }
      .carousel-item .text a{
       font-size: 1rem;
       color: var(--main-color);
       font-weight: 700 !important;
      }
    @media (max-width: 575.98px) {
    .carousel-item .text {
         font-size:2.5rem;
         width: 100%;
         h4{
          font-size: 1.2rem;
        }
      }
    }
    .carousel-item.active .text {
      animation: move-text 0.5s forwards linear alternate;
      -webkit-animation: move-text 0.5s forwards linear alternate;
    }
  
    @keyframes move-text {
      0% {
         left: 150%;
      }
      100% {
         left: 50%;
      }
    }

/*Start News Section*/
.news{
    padding: 70px 0px;
}
  .news .box{
    background-color: var(--backgroundColor);
   }
   .news .box  h5{
      color: var(--second-color);
      font-size: 18px;
      transition: var(--main-transition);
      line-height: 1.6;
    }
    .news  .box  p{
      overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    }
    .news .box  a{
      color: var(--main-color);
      position: relative;
      transition: var(--main-transition);
      font-weight: 500;
    }
    .news .box  a::after{
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        bottom: -5px;
        right:30px;
        background-color: var(--main-color);
        transition: var(--main-transition);
  
      }
  .news .box .date{
      background-color: var(--second-color);
      color: #fff;
    }
 .news  .box  img{
      transition: var(--main-transition);
      height: 280px;
    }
  .news  .box:hover h5{
        color: var(--main-color);
      }
 .news  .box:hover img{
      transform: scale(1.1);
    }
 .news .box:hover a::after{
      width: 40px;
      height: 3px;
  
    }
 .news .btn.btn-color{
        background-color: var(--main-color);
        transition: var(--main-transition);
        color: #fff;
    }
 .news .btn.btn-color:hover{
        background-color: var(--second-color);
}

/* Start Ministery */
.Ministery{
  padding: 70px 0;
  background-color: var(--backgroundColor);
}
.Ministery .data p,.Ministery .data li{
  line-height: 1.6;
}
.Ministery .image img{
  border-radius: 20px;
}

/* Start Goles */
.goles{
  padding: 70px 0px;
  background-color: #fff;
}
.goles .box{
  background: var(--backgroundColor);
  padding: 30px 25px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  text-align: center;
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}
.goles .box i{
    font-size: 40px;
    color: var(--main-color);
  }
  .goles .box h6{
   color: var(--second-color);
   font-size: 18px;
   transition: var(--main-transition);
     }
     .goles .box p{
    line-height: 1.8;
  }
  .goles .box:hover{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  .goles .box:hover h6{
      color: var(--main-color);
    }
  
  .goles .box::before {
   content: " ";
   width: 95%;
   height: 95%;
   position: absolute;
   z-index: -3;
   top: auto;
   bottom: 1px;
   left: 1px;
   border-radius: 12px;
   outline: 1px solid transparent;
   background: var(--main-color);
   transition:var(--main-transition) ;
   -webkit-transition:var(--main-transition) ;
   -moz-transition:var(--main-transition) ;
   -ms-transition:var(--main-transition) ;
   -o-transition:var(--main-transition) ;
}
.goles  .box::after {
    content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: var(--backgroundColor);

  }
  .goles  .box:hover::before {
    transform: rotate(2deg) translateX(-5px) translateY(16px);
  }

@keyframes heading-move {
  0% {
      transform: translateX(-1px);
  }
  50% {
      transform: translateX(75px);
  }
  100% {
      transform: translateX(-1px);
  }
}

@media screen and (max-width:600px){
  section  .title h2{
        font-size: 1.7rem;
      }
}

/* Start Section Rate */
.rate{
  position: relative;
  background: #192A4E;
  z-index: 1;
}
.rate::before {
    content: "";
    position: absolute;
    background-image: url(../images/rate.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .15;
    z-index: -1;
}
.rate .box{
  text-align: center;
  color: #fff;
}
.rate .icon{
    width: 100px;
    height: 100px;
    background-color: var(--second-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-bottom: 20px;
}
    .rate i{
      font-size: 40px;
      transition: var(--main-transition);
    }

    .rate h4{
    font-size: 3rem;
    font-weight: 700;
  }
  .rate .box:hover i{
    transform:  scale(-1) rotate(180deg);
    -webkit-transform:  scale(-1) rotate(180deg);
    -moz-transform:  scale(-1) rotate(180deg);
    -ms-transform:  scale(-1) rotate(180deg);
    -o-transform:  scale(-1) rotate(180deg);
}


/* Start Partner */
.Partner{
    padding: 70px 0;
    background-color: var(--backgroundColor);
}
    .Partner .card{
      padding: 20px;
      height: 238px;
      transition: var(--main-transition);
      border-bottom: 5px solid var(--main-color);
    }
    .Partner .card  img{
        width: 170px;
        height: 170px;
        padding-bottom: 20px;
        transition: var(--main-transition);
  }
  .Partner .card  h5{
        font-size: 16px;
        transition: var(--main-transition);
      }
      .Partner .card:hover{
        transform: translateY(-10px);
        border-bottom: 5px solid var(--second-color);
      }
        .Partner .card:hover h5{
        color: var(--main-color);
    }

/* Start Photo Section */
.photo{
  padding: 70px 0px;
}
.photo .images{
  overflow: hidden;
}
.photo .images .layer{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  transition: var(--main-transition);
  -webkit-transition: var(--main-transition);
  -moz-transition: var(--main-transition);
  -ms-transition: var(--main-transition);
  -o-transition: var(--main-transition);
}
.photo .images:hover .layer{
  top: 0px;
}
.photo .main-image{
  height: 363px;
}
.photo .small-image{
  height: 175px;
}
.photo .btn-photo{
  background-color: #fff;
  outline: none;
  border: 1px solid var(--main-color);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.photo .btn-photo:hover{
  background-color: var(--main-color);
  color: #fff;
}

/*Start Contact Section*/
.contact{
    padding: 130px 0px  70px 0px;
}

   .contact .box{
      background: #ffffff;
      text-align: center;
      box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.11);
      border-radius: 10px;
      position: relative;
      margin-bottom: 30px;
   }
   .contact .box .icon{
        background-color: var(--main-color);
        top: 0px;
        transform: translateY(-50%);
        width: 80px;
        height: 80px;
        margin: auto;
        border-radius: 50%;
        padding: 10px;
        transition: var(--main-transition);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: var(--main-transition);
        -webkit-transition: var(--main-transition);
        -moz-transition: var(--main-transition);
        -ms-transition: var(--main-transition);
        -o-transition: var(--main-transition);
}
.contact .box:hover .icon{
  background-color: var(--second-color);
}
    .contact .box .icon i{
         font-size: 35px;
         color: #fff;
     }
     .contact .box .icon  h5{
      margin-top: -10px;
     }

     .contact .box  h3{
      color: var(--second-Color);
      font-weight: 600;
    }
    .contact .btn.btn-color{
      background-color: var(--main-color);
      color: #fff;
      transition: var(--main-transition);
      border: 1px solid var(--main-color);
    }
    .contact .btn.btn-color:hover{
        color: var(--main-color);
        background-color: #fff;
      }
  
   .contact   .map {
    height: 510px;
  }

  /* Start Footer */
footer{
    padding-top: 70px;
    background-image: url("../images/ftbg2.png");
    background-size: contain;
    background-color: var(--second-color);
}
    .footer-widget ul li ,
    .footer-widget ul li a{
    color: #efeeee;
    font-size: 16px;
    line-height: 2;
    transition: all 0.3s;
    }
    .footer-widget ul li:hover,
    .footer-widget ul li a:hover{
      transform: translateX(5px);
      -webkit-transform: translateX(5px);
      -moz-transform: translateX(5px);
      -ms-transform: translateX(5px);
      -o-transform: translateX(5px);
  }

  footer .data{
    color: #F8F8F8;
  }
  footer   .data h6{
      font-size: 17px;
      margin: 10px 0px 20px;
    }
    footer .data p{
      line-height: 1.8;
    }
    .footer-social a {
      display: inline-block;
      height: 40px;
      width: 40px;
      background: #434445;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
      margin-right: 7px;
      position: relative;
      z-index: 1;
      transition: all 0.3s;
    }
     .footer-social a:hover {
    background: var(--main-color);
  }
  footer  h5{
      color: #F8F8F8;
      margin-bottom: 30px;
      position: relative;
    }
    footer h5::after{
        content: "";
        position: absolute;
        right: 0px;
        bottom: -10px;
        height: 2px;
        width: 60px;
        background-color: var(--main-color);
      }
  
  .footer-widget i{
    color: var(--main-color);
  }
  
  .copyright-reserved{
    border-top: 1px solid #434445;
    background-color: #192A4E;
  }
    .copyright-text{
      color: #F8F8F8;
    }
    .subscribeFooter{
      background-color: var(--main-color);
    }