@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
:root {
   /* Colors: */
   --main-color: #00413A;
   --light-color: #3D7F32;
   --secondry-color: #0F5850;
   --box: #0B7567;
   --linear: transparent linear-gradient(90deg, #006050 0%, #003A33 100%) 0% 0% no-repeat padding-box;
   --linear2: transparent linear-gradient(180deg, #006050 0%, #003A33 100%) 0% 0% no-repeat padding-box;
   --rate: #FFBB00;
   --muted-text: #B4B4B4;
   --dark: #6E6E6E;
   --light: #9196A1;
   --input: #FAFAFA;
   --white: #fff;
   --bs-gutter-x: 3.5rem;
   
}
[dir=rtl] .container-fluid{
   --bs-gutter-x: 3.5rem;
   padding-left: var(--bs-gutter-x);
   padding-right: var(--bs-gutter-x);
}

::-webkit-scrollbar {
   height: 0.5rem;
   width: 0.6rem;
}

::-webkit-scrollbar-thumb {
   background-color: var(--secondry-color);
}

* {
   font-family: 'Roboto', sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
   transition: .2s linear;
}
[dir = rtl] *:not(i) {
    font-family: 'Cairo', sans-serif;
}

p {
   margin: 0;
}

html {
   overflow-x: hidden;
   scroll-behavior: smooth;
}

a {
   text-decoration: none;
   color: #000000;
}

ul {
   padding-left: 0rem !important;
   list-style: none;
   margin: 0;
}

/* width */
::-webkit-scrollbar {
   width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
   box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.63);
}

/* Handle */
::-webkit-scrollbar-thumb {
   background: var(--light-color);
   border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: var(--main-color);
}

::selection {
   color: #fff;
   background-color: var(--secondry-color);
}

/* ------------- global --------------- */
body{
    background: var(--main-color);
}
[dir=rtl] body{
   direction: rtl;
}
[dir=rtl] [type=email], [type=number], [type=tel], [type=url] {
   direction: rtl;
}
[dir=rtl] i[class*="fa-chevron"]{
   transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
}

#loading {
   position: fixed;
   top: 0;
   inset-inline-end: 0;
   width: 100%;
   height: 100%;
   z-index: 999999;
   background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
}

.loader {
   position: relative;
   width: 100px;
   letter-spacing: 2px;
   display: inline-block;
   box-sizing: border-box;
   animation: floating 1s ease-out infinite alternate;
}

.loader img {
   width: 90px;
}

/*.loader::after {
   content: '';
   width: 80%;
   height: 20px;
   background: rgba(0, 0, 0, 0.424);
   position: absolute;
   inset-inline-end: 10%;
   top: 110%;
   filter: blur(4px);
   border-radius: 50%;
   box-sizing: border-box;
   animation: animloader 1s ease-out infinite alternate;
}*/

/* -------- pagination -------- */
.pagination {
   align-items: center;
   gap: 1rem !important;
   justify-content: center;
   margin-block: 1rem;
}
.pagination a {
    color: #a7a7a7;
    background: transparent;
    border: none;
}
.pagination .current {
   border-bottom: 2px solid;
   color: var(--white) !important;
}

@keyframes floating {
   0% {
      transform: translateY(0);
   }

   100% {
      transform: translateY(-25px);
   }
}

@keyframes animloader {
   0% {
      transform: scale(0.8);
   }

   100% {
      transform: scale(1.2);
   }
}


.count_shape{
   --shape-gap: 1.5rem;
   position: relative;
   padding-inline-start: var(--shape-gap) !important;
   overflow: hidden;
}
.count_shape.newsLetter{
    padding-inline-start: calc(var(--shape-gap) + var(--bs-gutter-x))  !important;;
    
}
.count_shape::before{
   content: attr(data-num);
   position: absolute;
   top: 4rem;
   inset-inline-start: var(--shape-gap);
   z-index: 9;
}
.count_shape::after{
   content: '';
   width: 1px;
   height: 100%;
   position: absolute;
   top: 6rem;
   background: #00000042;
   inset-inline-start:  calc( var(--shape-gap) + 8px);
   z-index: 9;
}
.count_shape.bg-main::after,
.count_shape.newsLetter::after{
   background: #ffffff70;
}
#vid.count_shape::after{
   content: '';
   top: 0;
   bottom: 0;
   
}





.main-color {
   color: var(--main-color) !important;
}

.bg-main {
   background: var(--main-color);
   color: #fff;
}

.secName {
   font-weight: 500;
   font-size: 14px;
}

.secTitle {
   max-width: 340px;
   font-size: 2.2rem;
   line-height: 1.6;
   font-weight: bold;
   text-wrap: balance;
   margin: .7rem 0;
}

.more {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 1.25rem;
   font-weight: bold;
   color: var(--main-color) !important;
   margin-bottom: 1rem;
}

.bg-main .more {
   color: #9AD590 !important;
}

.overlay {
   position: absolute;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.62);
   z-index: 3;
}

img {
   max-width: 100%;
   object-fit: cover;
}

.form-control {
   padding: 0.75rem 0.75rem;
   width: 100%;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
   transition: .15s ease-in-out;
   box-shadow: none !important
}

.accordion-button:not(.collapsed)::after {
   filter: brightness(0);
}

.accordion-button::after {
   margin-left: unset;
   margin-right: auto;
}

.link {
   position: absolute;
   inset: 0;
   z-index: 2;
}

.scrollUp {
   position: fixed;
   bottom: 35px;
   left: 30px;
   z-index: 9999;
}

.scrollUp a i {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--main-color);
   background: #fff;
   border-radius: 50%;
   box-shadow: 0 2px 6px 0 rgb(0 0 0 / 30%);
   transition: .5s;
   z-index: 8708;
   font-size: 28px;
   width: 50px;
   height: 50px;
}

.breadcrumb-wrapper {
   position: relative;
   background-color: #024841;
   color: #fff !important;
   --bs-breadcrumb-divider: '>>'
}

.breadcrumb-item+.breadcrumb-item::before {
    float: inline-start;
    padding-inline: .5rem;
}

.breadcrumb-wrapper::before {
   content: '';
   position: absolute;
   top: 1rem;
   bottom: 1rem;
   width: 100%;
   background: url('../images/shape.png');
   background-position: center right;
   background-size: contain;
   background-repeat: no-repeat;
}

.breadcrumb {
   position: relative;
   margin: 0;
   padding: 5.5rem 0;
   font-size: 1.3rem;
}

.breadcrumb .breadcrumb-item a {
   color: #fff;
   font-weight: 300;
}

.breadcrumb .breadcrumb-item.active {
   color: #fff;
   font-weight: bold;
}

.breadcrumb-item+.breadcrumb-item::before {
   color: #fff;
}

.custom-btn,
.custom-btn-outline {
   font-size: 17px;
   height: 45px;
   width: 140px;
   background: var(--main-color);
   color: #fff !important;
   border-radius: 70px;
   text-align: center;
   overflow: hidden;
   position: relative;
   line-height: 2;
   -webkit-border-radius: 70px;
   -moz-border-radius: 70px;
   -ms-border-radius: 70px;
   -o-border-radius: 70px;
   box-shadow: unset !important;
}

.custom-btn-outline {
   background: transparent;
   border: 1px solid #fff;
}

/* ------ owl-carousels section ------  */
.owl-carousel .owl-stage-outer {
   position: relative;
}

.owl-carousel .owl-stage {
   display: flex;
}

/* ------------- navbar ------------ */
nav.navbar {
   padding: 0;
   width: 100%;
   z-index: 999;
   position: sticky;
   background: var(--white);
   box-shadow: 0px 6px 6px #00000029;
}

.navbar-nav {
   justify-content: space-evenly;
   margin: 0 auto;
   gap: 1.5rem;
}

.navbar-light .navbar-brand img {
   width: 212px;
   object-fit: contain;
   overflow: initial;
   margin: .5rem 0;
}

.navbar a.nav-link {
   color: #000 !important;
   font-weight: 500;
}

.navbar .nav-link.active {
   font-weight: bold;
   color: var(--light-color) !important;
}

.main-btn {
   background: var(--linear);
   color: var(--white) !important;
   padding: 10px 30px;
   box-shadow: 0px 3px 6px #00000029;
   border-radius: 35px;
}

.navbar .dropdown .show {
   display: block;
   max-height: 9999px;
   -moz-transform: scaleY(1);
   -ms-transform: scaleY(1);
   -webkit-transform: scaleY(1);
   transform: scaleY(1);
   animation: showAnimation 0.5s ease-in-out;
   -moz-animation: showAnimation 0.5s ease-in-out;
   -webkit-animation: showAnimation 0.5s ease-in-out;
   -moz-transition: max-height 1s ease-in-out;
   -o-transition: max-height 1s ease-in-out;
   -webkit-transition: max-height 1s ease-in-out;
   transition: max-height 1s ease-in-out;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
   position: absolute;
   right: -50%;
}

.navbar .dropdown {
   cursor: pointer;
}

.navbar .dropdown .dropdown-menu {
   overflow: hidden;
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: right;
   background-color: transparent;
   border: none;
}

.navbar .dropdown .dropdown-menu a {
   margin: 5px 0;
   border-radius: 10px;
   display: block;
   padding: .25rem 1rem;
   background-color: var(--secondry-color);
   color: #fff !important;
   position: relative;
}

.navbar .dropdown .dropdown-menu li:first-child a::before {
   content: '';
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-bottom: 6px solid var(--secondry-color);
   position: absolute;
   top: -6px;
   right: 25%;
}

.navbar .dropdown .hide {
   max-height: 0;
   -moz-transform: scaleY(0);
   -ms-transform: scaleY(0);
   -webkit-transform: scaleY(0);
   transform: scaleY(0);
   animation: hideAnimation 0.4s ease-out;
   -moz-animation: hideAnimation 0.4s ease-out;
   -webkit-animation: hideAnimation 0.4s ease-out;
   -moz-transition: max-height 0.6s ease-out;
   -o-transition: max-height 0.6s ease-out;
   -webkit-transition: max-height 0.6s ease-out;
   transition: max-height 0.6s ease-out;
}

.navbar .dropdown .show,
.dropdown .hide {
   -moz-transform-origin: 50% 0%;
   -ms-transform-origin: 50% 0%;
   -webkit-transform-origin: 50% 0%;
   transform-origin: 50% 0%;
}

.navbar .dropdown .icon-arrow {
   position: absolute;
   display: block;
   font-size: 0.7em;
   color: #fff;
   top: 14px;
   inset-inline-end: -10px;
}

.navbar .dropdown .icon-arrow.open {
   -moz-transform: rotate(-180deg);
   -ms-transform: rotate(-180deg);
   -webkit-transform: rotate(-180deg);
   transform: rotate(-180deg);
   -moz-transition: -moz-transform 0.6s;
   -o-transition: -o-transform 0.6s;
   -webkit-transition: -webkit-transform 0.6s;
   transition: transform 0.6s;
}

.navbar .dropdown .icon-arrow.close {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   -moz-transition: -moz-transform 0.6s;
   -o-transition: -o-transform 0.6s;
   -webkit-transition: -webkit-transform 0.6s;
   transition: transform 0.6s;
}

@keyframes hideAnimation {
   0% {
      transform: scaleY(1);
   }

   60% {
      transform: scaleY(0.8);
   }

   80% {
      transform: scaleY(1.02);
   }

   100% {
      transform: scaleY(0);
   }
}

@keyframes showAnimation {
   0% {
      transform: scaleY(0.1);
   }

   40% {
      transform: scaleY(1.04);
   }

   60% {
      transform: scaleY(0.98);
   }

   80% {
      transform: scaleY(1.04);
   }

   100% {
      transform: scaleY(0.98);
   }

   80% {
      transform: scaleY(1.02);
   }

   100% {
      transform: scaleY(1);
   }
}


.fancybox-thumbs {
    background: var(--main-color);
}
.fancybox-thumbs__list a:before {
    border: 2px solid var(--white);
}
.fancybox-bg {
    background: var(--main-color);
}
/* ======================= home page ======================= */

/* ------------- header -------------- */
header {
   z-index: 4;
   position: relative;
}

header .overlay {
   background: transparent linear-gradient(90deg, #003A33, #006050 56%) 0% 0% no-repeat padding-box;
   opacity: 0.7;
}
header img {
   width: 100%;
   height: calc(100vh - 82px);
   object-fit: cover;
}

header .header-content {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   z-index: 9;
}

header .header-content .item {
   width: 100%;
}

header .header-content .content {
   width: 50%;
   padding: .25rem;
   margin-bottom: 1.5rem;
}

.slideCount {
   color: #fff;
   position: absolute;
   width: 20px;
   position: absolute;
   inset-inline-end: 0px;
   transform: translateX(2px);
   top: 0;
}

.Ftitle {
   position: relative;
   width: fit-content;
   margin-bottom: 1rem;
   padding-inline-end: 8px;
}

header .header-content .content .Ftitle:after {
   content: '';
   position: absolute;
   inset-inline-end: -115px;
   width: 115px;
   height: 1px;
   top: 50%;
   border-top: 1px solid #fff;
}

header .header-content .content h2 {
   font-size: 30px;
   color: #fff;
   margin-bottom: 20px;
   font-weight: 700;
}

header .header-content .content h2 span {
   line-height: 1;
   vertical-align: baseline;
   color: var(--main-color);
}

header .header-content .content p {
   color: #fff;
}

header .header-content .owl-carousel.owl-rtl .owl-item {
   display: flex;
   align-items: center;
}

header .header-content .owl-carousel .owl-dots {
   width: 20px;
   position: absolute;
   inset-inline-end: 0px;
   top: 35px;
   display: flex;
   flex-direction: column;
}

header .header-content .owl-carousel .owl-dots .owl-dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: rgba(256, 256, 256, 0.4);
   margin: 5px;
   transition: all 0.4s;
}

header .header-content .owl-carousel .owl-dots .owl-dot.active {
   background: rgba(256, 256, 256, 1);
}

header .header-content .custom-btn {
   background-color: #fff;
   color: var(--main-color) !important;
   font-weight: 500;
}

header .header-content .social {
   color: #fff;
   position: absolute;
   top: 0px;
   inset-inline-end: 3px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: center;
   z-index: 9;
}

header .header-content .social i {
   width: 35px;
   height: 35px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   border: 1px solid #fff;
   opacity: .8;
}

header .header-content .social .ln {
   display: none;
   width: 1px;
   height: 90px;
   background-color: #fff;
}

header .header-content .owl-carousel .owl-dots::before {
   position: relative;
   content: '';
   width: 1px;
   inset-inline-end: -10px;
   top: -5px;
   height: 149px;
   background-color: #fff;
}


.about {
   position: relative;
   z-index: 4;
   color: #fff;
   padding: 4rem 0 3rem 0;
   ;
}

.about .about-content {
   font-weight: 300;
   line-height: 1.6;
   padding-inline-end: 2rem;
}

#vid {
   background: var(--main-color);
   padding-block: 4rem;
   position: fixed;
   bottom: 0%;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.video-wrap {
   position: relative;
   height: 60vh;
   margin: 2rem 0;
   border-radius: 20px;
   overflow: hidden;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 85%);
}
[dir=rtl] .video-wrap{
   clip-path: polygon(100% 0, 100% 85%, 90% 100%, 0 100%, 0 0);
}

.transparent {
   position: relative;
   pointer-events: none
}

.video-wrap:hover img {
   transform: scale(1.05);
   -webkit-transform: scale(1.05);
   -moz-transform: scale(1.05);
   -ms-transform: scale(1.05);
   -o-transform: scale(1.05);
}

.video-wrap .video-cover-img {
   position: absolute;
   right: 0;
   top: 0;
   width: 100%;
   height: 100% !important;
   z-index: 5;
   cursor: pointer;
   border: 0 !important;
   margin: 0 !important;
   background-color: transparent !important;
   filter: brightness(.65);
}

.video-wrap img {
   object-fit: cover;
   transition: .4s;
}

.video-wrap .op-video {
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 6;
   top: 50%;
   width: 50px;
   height: 50px;
   border-radius: 100%;
   text-align: center;
   background: var(--white);
   line-height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--main-color) !important;
   font-size: 18px;
}

.services {
   background: #F4F4F2;
   padding-block: 4rem;
}

.servWrapper {
   background: #fff;
   padding: 2rem;
   padding-bottom: 1rem;
   clip-path: polygon(0 0, 100% 0, 100% 73%, 91% 100%, 0 100%);
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
}
[dir=rtl] .servWrapper{
   clip-path: polygon(100% 0, 100% 100%, 9% 100%, 0 73%, 0 0);
}
.serv {
   text-align: center;
}

.servIcon {
   background: var(--linear2);
   width: 85px;
   height: 85px;
   margin: auto;
   margin-bottom: 1.4rem;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
}

.servIcon img {
   filter: brightness(0) invert(1);
   -webkit-filter: brightness(0) invert(1);
}

.servName {
   font-size: 20px;
   font-weight: bold;
   color: var(--main-color);
}

.projects {
   padding-block: 4rem;
}

.projects .card {
   border: unset;
   overflow: hidden;
   border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   -ms-border-radius: 25px;
   -o-border-radius: 25px;
   clip-path: polygon(0 0, 100% 0, 100% 80%, 83% 100%, 0 100%);
   background: var(--secondry-color);
}
[dir=rtl] .projects .card{
   clip-path: polygon(100% 0, 100% 100%, 17% 100%, 0 80%, 0 0);
}

.projects .card .card-body {
   color: #fff;
   display: flex;
   align-items: center;
   padding: 2rem 1rem;
   justify-content: space-between;
   padding-inline-end: 3rem;
}

.projects .card img {
   aspect-ratio: 6 / 4;
   object-fit: cover;
}

.blogs {
   padding: 4rem 0 3rem 0;
   background: url('../images/blog.svg');
   background-size: cover;
   background-repeat: no-repeat;
}

.blogs .card {
   height: 100%;
   clip-path: polygon(0 0, 100% 0, 100% 85%, 75% 100%, 0 100%);
   background: var(--main-color);
   border: unset;
   overflow: hidden;
   border-radius: 25px;
   color: #fff;
}
[dir=rtl] .blogs .card {
   clip-path: polygon(100% 0, 100% 100%, 25% 100%, 0 85%, 0 0);
}

.blogs .card .card-img-top {
   padding: .85rem;
   padding-bottom: 0;
}

.blogs .card img {
   aspect-ratio: 6 / 4;
   object-fit: cover;
   border-radius: 20px;
   clip-path: polygon(0 0, 100% 0, 100% 76%, 76% 100%, 0 100%);
}

[dir=rtl] .blogs .card img {
   clip-path: polygon(100% 0, 100% 100%, 20% 100%, 0 80%, 0 0);
}

.blogs .card .info {
   color: #C8C8C8;
   margin-bottom: .5rem;
   font-size: 13px;
}

.blogs .card p {
    padding-inline-end: 13%;
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.owl-nav {
   position: absolute;
   top: -70px;
   inset-inline-end: 0;
}

.blogs .owl-carousel .owl-nav button.owl-next,
.blogs .owl-carousel .owl-nav button.owl-prev {
   width: 30px;
   height: 30px;
   background: #fff;
   border-radius: 50%;
   margin: 0 5px;
   color: var(--main-color);
}



.newsLetter {
   background: url('../images/newsLetter.png');
   background-size: cover;
   color: var(--white);
   padding-top: 4rem;
   padding-inline-start: var(--bs-gutter-x);
   overflow: hidden;
   position: relative;
}
[dir=rtl] .newsLetterForm {
   clip-path: polygon(80% 0, 100% 28%, 100% 100%, 0 100%, 0 0);
}

.newsLetter .overlay {
   background: #00413a80;
}

.newsLetterForm {
   position: relative;
   background: #F4F4F2;
   clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0 100%, 0 28%);
   padding: 6rem 4rem;
}

.newsLetterForm label {
   font-weight: 500;
   color: #5A5A5A
}

.newsLetterForm .form-control {
   background: #FFFFFF 0% 0% no-repeat padding-box;
   border-radius: 41px;
   padding: 10px 20px;
   border: none !important;
   box-shadow: none !important;
}

.newsLetterForm::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
   background: url(../images/Mask\ Group\ 6.svg);
   background-size: contain;
   background-repeat: no-repeat;
   z-index: -1;
}

/* ------------- footer --------------- */
footer {
   position: relative;
   background-color: var(--main-color);
}

footer::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
   background: url(../images/footer_asset.svg);
   background-size: contain;
   background-repeat: no-repeat;
}

footer .imgTop {
   width: 265px;
   line-height: 40px;
   text-align: center;
   filter: brightness(0) invert(1);
   -webkit-filter: brightness(0) invert(1);
}


.footer-nav {
   position: relative;
   padding-top: 3rem;
   text-align: center;
   padding-bottom: 1rem;
   color: #fff;
}

.footer-nav .navbar {
   margin-top: 1.5rem;
   position: unset;
   background: transparent;
}

.footer-nav .navbar .nav-link {
   color: #fff !important;
   font-weight: 300;
}

footer .social {
   display: flex;
   justify-content: center;
}

footer .social i {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--main-color);
   font-size: 20px;
   opacity: .8;
}

footer .social div:hover i {
   background-color: var(--main-color);
   color: #fff;
   opacity: 1;
   transform: translateY(-10px);
}

.helps {
   display: flex;
   align-items: center;
   margin-bottom: 0;
}

.helps a {
   color: #fff !important;
   font-weight: 300;
}

footer .sub-footer {
   position: relative;
   color: #fff;
   padding: 10px 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-top: 2px solid #16534B;
   color: #fff;
}

footer .sub-footer .container-fluid {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

footer .sub-footer .nav-link {
   padding: .5rem;
}

footer .sub-footer img {
   width: 110px;
   filter: brightness(0) invert(1);
   object-fit: scale-down;
   margin: 0 10px;
   -webkit-filter: brightness(0) invert(1);
}

footer .navbar a {
   color: var(--main-color) !important;
}



.mission {
   background: #F4F4F2;
   padding-block: 2rem 1rem;
}

.mission-img img {
   margin-bottom: -120px;
   position: relative;
   z-index: 5;
   aspect-ratio: 3 / 3;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   clip-path: polygon(100% 0, 100% 82%, 74% 100%, 0 100%, 0 0);
}
[dir=rtl] .mission-img img {
   clip-path: polygon(100% 0, 100% 100%, 26% 100%, 0 82%, 0 0);
}

.MindSet {
   color: #fff;
   padding-block: 170px 120px;
}

.MindSet li {
   padding-inline-start: 2rem;
   position: relative;
}

.MindSet li::before {
   content: '';
   position: absolute;
   inset-inline-start: 0;
   top: 4px;
   display: inline-flex;
   width: 18px;
   height: 20px;
   transform: matrix(0, 1, -1, 0, 0, 0);
   background: url(../images/download.svg);
   background-size: contain;
   background-repeat: no-repeat;
}
[dir=rtl] .MindSet li::before {
   transform: matrix(0, 1, 1, 0, 0, 0);
}


.servDesc {
   padding: 4rem 0;
}

.serv-wrapper {
   background: transparent linear-gradient(90deg, #177769 0%, #003D35 28%, #00413A 52%, #024239 84%, #1B8272 100%) 0% 0% no-repeat padding-box;
   padding: .65rem;
   border-radius: 30px;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   -ms-border-radius: 30px;
   -o-border-radius: 30px;
   height: 100%;
}

.serv-box {
   height: 100%;
   padding: 1rem;
   background: var(--main-color);
   border-radius: 26px;
   -webkit-border-radius: 26px;
   -moz-border-radius: 26px;
   -ms-border-radius: 26px;
   -o-border-radius: 26px;
}

.servDesc .serv {
   display: flex;
   align-items: center;
   gap: 10PX;
   margin-bottom: 1rem;
}

.servDesc .servIcon {
   background: var(--white);
   width: 70px;
   height: 70px;
   padding: 20px;
   margin: unset;
}

.servDesc .servIcon img {
   filter: unset;
   -webkit-filter: unset;
}

.servDesc .servName {
   width: calc(100% - 70px);
   color: #fff;
   text-align: start;
}

.serv-desc p {
   font-weight: 300;
}

.serv-desc *:not(p) {
   font-size: 1.1rem;
   font-weight: 400;
   color: #fff;
}

.proj-info {
   background: var(--secondry-color);
   border-radius: 36px;
   padding: 3rem 2.5rem;
}

.proj-info .about-content li:not(:last-child) {
   margin-bottom: .5rem;
}

.proj-info .about-content li label {
   font-weight: bold;
}

.blogs.H_blogs {
   background: var(--main-color);
   padding-bottom: 5rem;
}

.blogs.H_blogs .card {
   background: var(--secondry-color);
}


.clientBox .clientImg {
   text-align: center;
   background: #FFFFFF15;
   padding: 2rem;
   border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
   clip-path: polygon(0 0, 100% 0, 100% 80%, 70% 100%, 0 100%);
   margin-bottom: 1.5rem;
}
[dir=rtl] .clientBox .clientImg {
   clip-path: polygon(100% 0, 100% 100%, 30% 100%, 0 80%, 0 0);
}

.ClientName {
   font-weight: bold;
   text-align: center;
   font-size: 1.3rem;
}

.contact {
   padding: 4rem 0 6rem;
}

.info-box {
   position: relative;
   background: var(--box);
   padding: .85rem 1.5rem;
   border-radius: 15px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   -ms-border-radius: 15px;
   -o-border-radius: 15px;
}

.info-box:not(:last-child) {
   margin-bottom: 1rem;
}

.info {
   display: flex;
   align-items: center;
   gap: 1.75rem;
}

.infoIcon {
   background: var(--main-color);
   border-radius: 13px;
   padding: .8rem 1.6rem;
   font-size: 24px;
   -webkit-border-radius: 13px;
   -moz-border-radius: 13px;
   -ms-border-radius: 13px;
   -o-border-radius: 13px;
}

.infoName {
   font-weight: bold;
   font-size: 1.09rem;
   margin-bottom: .75rem;
}

.contact .form-control {
   background: transparent;
   border: unset;
   border-radius: 0;
   border-bottom: 2px solid #29655d;
   color: #fff;
   transition: .3s;
   -webkit-transition: .3s;
   -moz-transition: .3s;
   -ms-transition: .3s;
   -o-transition: .3s;
}

.contact .form-control:focus {
   border-bottom: 1px solid var(--white);
}

.contact .form-control::placeholder {
   color: #ffffff98;
   font-size: small;
   font-weight: 300;
}

.contact .custom-btn {
   background-color: #fff;
   color: var(--main-color) !important;
   font-weight: 500;
   margin: 1.5rem 0 .75rem;
}

.blog_details .card-body {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   padding-inline-end: 15%;
}

.blogs .blog_details .card {
   clip-path: polygon(0 0, 100% 0, 100% 83%, 84% 100%, 0 100%);
   margin-bottom: 1rem;
}
[dir=rtl] .blogs .blog_details .card {
   clip-path: polygon(100% 0, 100% 100%, 16% 100%, 0 84%, 0 0);
}

.blogs .blog_details .card img {
   aspect-ratio: 2 / 1;
   object-fit: cover;
   border-radius: 20px;
   clip-path: polygon(0 0, 100% 0, 100% 80%, 85% 100%, 0 100%);
}
.blogs .blog_details .card img {
   clip-path: polygon(100% 0, 100% 100%, 16% 100%, 0 83%, 0 0);
}
.gallery .gallery-container {
   display: grid;
   grid-template-columns: repeat(24, minmax(0, 1fr));
   grid-auto-rows: minmax(100px, auto);
   gap: 0.85rem;
}

.gallery .gallery-container .img {
   border-radius: 2rem;
   grid-column: span 4;
   grid-row: span 1;
}
.gallery .gallery-container .img:nth-child(-n + 5){
   grid-column: span 5;
}

.gallery .gallery-container .img img {
   -o-object-fit: cover;
   object-fit: cover;
   width: 100%;
   height: 100%;
   border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
}

.gallery .gallery-container .img:nth-child(1) {
   grid-row: span 2;
   grid-column: span 14;
   max-height: unset;
}

.gallery .gallery-container .img:nth-child(1) img {
   aspect-ratio: 9 / 6;
}

@media(max-width: 1200px) {}

@media(max-width: 992px) {
   :root {
      --bs-gutter-x: 1.5rem;
   }

   [dir=rtl] .container-fluid {
      --bs-gutter-x: 1.5rem;
   }

   nav.navbar>.container-fluid {
      flex-direction: row-reverse;
   }

   nav .navbar-nav {
      gap: 0.5rem;
   }

   .navbar-collapse {
      margin-bottom: 1rem;
   }

   .navbar-toggler {
      padding: 0;
      border: unset;
      box-shadow: unset !important;
   }

   header img {
      height: 38vh;
   }

   footer .navbar-nav {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: .5rem 1.5rem;
   }

   .video-wrap {
      height: 38vh;
   }

   .MindSet {
      padding-block: 120px 120px;
   }
}

@media(max-width: 576px) {
   :root {
      --bs-gutter-x: .75rem;
   }
   [dir=rtl] .container-fluid {
      --bs-gutter-x: .75rem;
   }

   header img {
      height: 70vh;
   }

   .video-wrap {
      height: 55vh;
   }

   header .header-content .content {
      width: 90%;
   }

   header .header-content .content .Ftitle:after {
      content: unset;
   }

   .video-wrap {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 80%);
   }
   [dir=rtl] .video-wrap {
      clip-path: polygon(100% 0, 100% 80%, 74% 100%, 0 100%, 0 0);
   }


   .newsLetterForm {
      padding: 6rem 2rem;
   }

   .servWrapper {
      padding-bottom: 3rem;
      clip-path: polygon(0 0, 100% 0, 100% 86%, 66% 100%, 0 100%);
   }
   [dir=rtl] .servWrapper {
      clip-path: polygon(100% 0, 100% 100%, 24% 100%, 0 86%, 0 0);
   }

   footer .sub-footer .container-fluid {
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
   }

   footer .sub-footer .container-fluid a {
      display: flex;
      align-items: center;
      font-size: 12px;
   }

   footer .sub-footer img {
      width: 98px;
      margin: 0px 6px;
   }

   .newsLetterForm::before {
      background-size: cover;
   }

   .breadcrumb {
      padding: 3.5rem 0;
   }

   .mission .missionParent {
      flex-direction: column-reverse;
   }

   .MindSet {
      padding-block: 150px 100px;
   }

   .MindSet li {
      padding-inline-start: 3rem;
   }

   .MindSet li::before {
      inset-inline-start: 1rem;
   }

   .clientBox .clientImg {
      padding: 1.5rem 1rem;
   }

   .gallery .gallery-container {
      grid-template-columns: repeat(12, minmax(0, 1fr));
   }
   .gallery .gallery-container .img:nth-child(-n + 5) {
      grid-column: span 4;
   }
   .gallery .gallery-container .img:nth-child(1) {
      grid-column: span 8;
   }
   
   .count_shape{
       --shape-gap: 1rem;
    }
.count_shape.newsLetter{
    padding-inline-start: calc(var(--shape-gap) + var(--bs-gutter-x))  !important;;
    
}
.count_shape::before{
   inset-inline-start: 6px !important;
}
.count_shape::after{
   inset-inline-start:  var(--shape-gap) ;
}

}