*{
    padding:0px;
    margin:0px;
}

:root {
    --thm-black: #191f37;
	--thm-black-rgb: 25, 31, 55;
	--thm-base: #2d59fb;
	--thm-base-rgb: 45, 89, 251;
}


.nav-logo{
    height: 70px;
    width: 70px;
    object-fit: contain;
}

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

 

  .swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  
  .mySwiper2 {
    height: calc(100%);
    width: 100%;
  }

  .mySwiper {
   height: 100px;
    box-sizing: border-box;
    padding: 10px 0;
  }

  .mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
  }

  .mySwiper .swiper-slide-thumb-active {
    opacity: 1;
    border-top: 2px solid #fff;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .color-blue{
    color:#002561 ;
  }
  .padding-top{
    padding-top: 100px;
  }
  .padding-bottom{
    padding-bottom: 100px;
  }
  .button-primary{
    padding: 14px 20px;
    background-color: #002561;
    border-radius: 32px;
    text-decoration: none;
    color: #fff;
  }
  .circle{
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    padding: 2px;
    background-color:#EA2026 ;
    border-radius: 50%;
  }


 .swiper-button-next:after, .swiper-button-prev:after{
  font-size: 20px !important;
 }

 .swiper-button-next{
  background-color: #002561;  
  }
  .swiper-button-prev{
    background-color: #002561;
  }

  .line{
    height: 4px;
    width: 0%;
    position: absolute;
    top: 0px;
    background-color:#EA2026 ;
    opacity: 0;
    z-index: 2;
    transition: .6s ease-in;
  }

  .sec2 .shape{
    opacity: 0;
  }

  .sec2 .card:hover .line{ 
    opacity: 1;
    width: 100%;
    left: 0;
  }

  .sec2 .card:hover a{ 
    transition: .4s ease-in;
    transform: scale(1.2);
  }

  .sec2 .card:hover .shape{ 
    opacity: 1;
    transition: .4s ease-in;
  }

  .sec3 .exp-card{
    border: 1px solid #ddd;
  }

  .sec3 .hovered{
    width: 50% !important;
    height: 450px !important;
    position: absolute;
    bottom: 0;
    transition: .4s ease-in;
  }

  .sec3 .hovered .imgbox{
    height: 450px !important;
    transition: .4s ease-in;
  }

.sec3 .hovered .title img{
  display: flex !important;
}
  .sec3 .hovered .text{
    position: absolute;
    height: 100% !important;
    width: 100%;
    color: #fff;
    padding: 48px !important ;
  }

  .sec3 .hovered .text .btn-container{
    display: block !important;
  }

  .footer .links a{
    text-decoration: none;
    color: #fff;
    margin-right: 10px;
  }
  .dropdown-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100px;
  left: 0;
  width: 90%;
  left: 50%;
  transform: translate(-50%);
  background-color: #fff;
  z-index: 1;
  transition: .6s ease-out;
}

.dropdown-content li {
  padding: 10px;
  color: #333 !important;
}

.dropdown-content li a {
  color: #fff;
}

.dropdown1:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
}

  .dropdown1 {
  transition: .6s ease-out;
  color: #333 !important;
  }


.rtl .dropdown1 .fa-angles-right{
  transform: rotate(180deg);
}

.our-history .cardContainer{
  transition: .1s ease-in;
}

.our-history .cardContainer:hover{
background: #fff;
}
.our-history .cardContainer .text-card{
  transition: .4s ease-in;
}
.our-history .cardContainer:hover .text-card{
  display: flex !important;
}

.job-card .card:hover{
  transition: .4s ease-in;
  box-shadow: -8px 8px 0 #002561;
}
.sec3-cards-sector-details .card{
  transition: .4s ease-in;
}

.sec3-cards-sector-details .card:hover{
  box-shadow: -8px 8px 0 #EA2026;
}

.sec3-cards-sector-details .card:hover .imgbox{
  height: 500px !important;
  position: relative;
}

.sec3-cards-sector-details .card:hover .imgbox .overlay{
  display: block !important;
  
}

.sec3-cards-sector-details .card:hover .text{
  position: absolute;
  top: 0px;
  padding: 16px;
  transition: .4s ;
}

.sec3-cards-sector-details .card:hover .text h4,.sec3-cards-sector-details .card:hover .text p{
 color: #fff !important;
}

.hide{
  display: none !important;
  transition: .5s ease-in-out !important;
}


.card-date{
    width:20%;
}

.description1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* Number of lines to show */
    -webkit-box-orient: vertical;
}

.description2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
}

.description3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Number of lines to show */
    -webkit-box-orient: vertical;
}

.sec1 .rtl .text .title {
    text-align: end !important;
}
.sec1 .rtl .text .text-body {
    text-align: end !important;
}
.sec1 .rtl .text .button-container {
    display:flex;
    justify-content:end;
}
.sec1 .rtl .text .button-container .button-primary{
    display: flex;
    flex-direction: row-reverse;
}
.sec1 .rtl .text .button-container .button-primary .fa-arrow-right{
    transform: rotate(180deg);
}
.rtl .fa-arrow-right{
    transform: rotate(180deg);
}
.rtl .icon-img{
    transform: rotateY(180deg);
}
.rtl .fa-arrow-right {
    transform: rotate(180deg);
}
 .list .rtl .fa-angles-right {
    transform: rotate(180deg);
}

@media (min-width: 992px) {
    .our-history .cardContainer{
        width: 20% !important;
    }
}


@media (min-width: 768px) and (max-width: 991.98px) { 
    .our-history .cardContainer{
        width: 33.3% !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .our-history .cardContainer{
        width: 50% !important;
    }
}

@media (max-width: 575.98px) { 
    .our-history .cardContainer{
        width: 100% !important;
    }
}

.special .rtl .swiper-slide .card .text {
    text-align: end;
}
.special .rtl .swiper-slide .card .text .button {
    display: flex;
    justify-content: end;
}
