@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Cairo:wght@200..1000&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
:root {
   /* Colors: */
   --main: #0B0B1D;
   --secondry: #13142F;
   --light-color: #4B60AC;
   --box: #13142f9d;
   --linear: linear-gradient(180deg,
         rgba(67, 69, 138, 0.425) 0%,
         rgba(67, 69, 138, 0.322) 53%,
         rgba(67, 69, 138, 0.055) 100%);
   --linear2: transparent linear-gradient(180deg, #4B60AC 0%, #4B60AC 22%, #4B60AC61 71%, #4B60AC00 100%) 0% 0% no-repeat padding-box;
   --rate: #FFBB00;
   --muted-text: #B4B4B4;
   --dark: #6E6E6E;
   --light: #9196A1;
   --input: #FAFAFA;
   --white: #fff;
   --black: #000;

   /* Layout */
   --gutter-x: 2rem;

   /* opacity */
   --mainOp: 11, 11, 29;
   --secOp: 19, 20, 47;
   --whiteOp: 255, 255, 255;
   --blackOp: 0, 0, 0;
   --dir-multiplier: 1;
}

@font-face {
   font-family: "Challenge";
   src: url("font/Challenge Bold Std Regular.otf");
   font-weight: bold;
   font-style: normal;
}

[dir="ltr"] {
   --dir-multiplier: -1;
}

[dir="ltr"] * {
   text-transform: capitalize;
}


.container-fluid {
   --bs-gutter-x: calc(var(--gutter-x) * 2) !important;
}

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

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

* {
   font-family: 'Rubik', 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;
   color: var(--white);
}

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

a {
   text-decoration: none;
   color: inherit;
}

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

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

/* ------------- global --------------- */
body {
   background: var(--main);
   color: var(--white);
}

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

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

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

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

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


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

.bg-secondry {
   background: var(--secondry);
}

.secName {
   border: 1px solid rgba(var(--whiteOp), .5);
   padding: .7rem 2rem;
   font-size: 1.1rem;
   border-radius: 70px;
   -webkit-border-radius: 70px;
   -moz-border-radius: 70px;
   -ms-border-radius: 70px;
   -o-border-radius: 70px;
}

.secTitle {
   font-family: 'Challenge', 'Rubik';
   /*font-size: 2.2rem;*/
   font-size: 2.8rem;
   line-height: 1.6;
   font-weight: bold;
   text-wrap: balance;
   margin: .7rem 0;
}

[dir="rtl"] .secTitle{
    font-family: "Aref Ruqaa", serif;
}

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

.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.85rem 1.5rem .4rem 1.5rem !important;
   width: 100%;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   border: 1px solid var(--white);
   color: var(--white) !important;
   border-radius: 70px;
   background: transparent !important;
   transition: .15s ease-in-out;
   box-shadow: none !important;
   -webkit-border-radius: 70px;
   -moz-border-radius: 70px;
   -ms-border-radius: 70px;
   -o-border-radius: 70px;
}

textarea.form-control {
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
}

.form-floating>label {
   padding: 1rem 1.75rem;
}

.form-floating>label,
.form-control::placeholder {
   color: #B7B8BB;
}

select option{
    color: var(--dark);
}

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

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

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

.scrollUp {
   position: fixed;
   bottom: 5.5rem;
   inset-inline-start: var(--gutter-x);
   z-index: 9999;
}

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

#whatsapp {
   position: fixed;
   bottom: 2rem;
   inset-inline-start: var(--gutter-x);
   background: #52B436;
   color: var(--white);
   padding: 8px;
   border-radius: 50%;
   /* animation: floating 1s ease-out infinite alternate; */
   transition: all 0.3s;
   width: 3.125rem;
   aspect-ratio: 1/1;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   z-index: 999;
   box-shadow: 0px -10px 25px #B2B2B22B;
}


.Stars {
   --percent: calc(var(--rating) / 5 * 100%);
   font-size: 1.125rem;
   transform: rotateY(calc((180deg) * var(--dir-multiplier)));
   -webkit-transform: rotateY(calc((180deg) * var(--dir-multiplier)));
   -moz-transform: rotateY(calc((180deg) * var(--dir-multiplier)));
   -ms-transform: rotateY(calc((180deg) * var(--dir-multiplier)));
   -o-transform: rotateY(calc((180deg) * var(--dir-multiplier)));
}

.Stars::before {
   content: "\f005 \f005 \f005 \f005 \f005";
   font-family: fontAwesome;
   background: linear-gradient(-90deg, #fbf30e var(--percent), #e6e6e6 var(--percent));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.breadcrumb-wrapper {
   position: relative;
   background: var(--secondry) url('../images/breadcrumb.svg');
   color: #fff !important;
   --bs-breadcrumb-divider: '>>';
   background-position: top right;
   background-size: 40%;
   background-repeat: no-repeat;
}

/* 
.breadcrumb-wrapper::before {
   content: '';
   position: absolute;
   top: 1rem;
   bottom: 1rem;
   width: 100%;
   background: url('../images/breadcrumb.svg');
} */

.breadcrumb {
   position: relative;
   margin: 0;
   padding-block: 9rem 6rem;
   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;
}

.main-btn,
.main-btn-outline {
   background: var(--white) !important;
   color: var(--main) !important;
   text-align: center;
   overflow: hidden;
   position: relative;
   padding: .5rem 1.75rem;
   font-weight: 500;
   border-radius: 70px;
   -webkit-border-radius: 70px;
   -moz-border-radius: 70px;
   -ms-border-radius: 70px;
   -o-border-radius: 70px;
   box-shadow: unset !important;
}

.main-btn-outline {
   background: transparent;
   border: 1px solid #fff;
}
.main-btn *,
.main-btn-outlin *{
   color: var(--main);
}
/* ------ owl-carousels section ------  */
.owl-carousel .owl-stage-outer {
   position: relative;
}

.owl-carousel .owl-stage {
   display: flex;
   /*align-items: center;*/
}

/* ------------- navbar ------------ */
nav.navbar {
   padding: 0;
   width: 100%;
   z-index: 999;
   position: fixed;
   color: var(--white);
   /* inset-inline: var(--gutter-x); */
}

nav.navbar.fixed {
   box-shadow: 0px 6px 6px #00000029;
   background: rgba(var(--mainOp), .38);
   position: fixed;
   backdrop-filter: blur(18px);
}

.navbar-toggler-icon {
   filter: brightness(0) invert(1);
}


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

.navbar-brand img {
   width: 13rem;
   object-fit: contain;
   border-radius: 50%;
   overflow: initial;
   margin: .5rem 0;
}

.navbar a.nav-link {
   color: inherit !important;
}

.navbar .nav-link.active {
   font-weight: bold;
}


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

/* ======================= home page ======================= */

/* ------------- .hero-sec -------------- */
.hero-sec {
   z-index: 4;
   position: relative;
   color: var(--white);
   min-height: 100vh;
   height: 100vh;
}
.hero-sec .owl-carousel .owl-stage{
    align-items: center;
}

.hero-sec .overlay {
   background: rgba(var(--secOp), .75);
}

.hero-sec .overlay.altra {
   background: rgba(var(--secOp), .25);
}

.grid-col * {
   width: 100%;
   border-inline-start: 1px solid rgba(var(--whiteOp), .25);
}

.hero-sec img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -2;
}

.hero-sec .header-content {
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 99;
   display: flex;
   flex-direction: column;
}

.hero-sec .header-content .main-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-grow: 1;
   padding-top: 6rem;
}

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

.hero-sec .header-content .header-slider {
   width: 50%;
}

.hero-sec .header-content .content {
   padding: .25rem;
   margin-bottom: 1.5rem;
}

.silder-attach {
   width: fit-content;
   margin-inline-start: auto;
   color: #fff;
}

.silder-attach .slider-counter {
   display: flex;
   align-items: center;
   font-size: 1rem;
   gap: .1rem;
}

.silder-attach .slider-counter .current {
   font-size: 2.1rem;
   font-weight: bold;
}

.silder-attach .slider-counter .len {
   color: #ccc;
}


.hero-sec .header-content .content .Ftitle {
   font-size: 1.875rem;
   margin-bottom: 1.25rem;
   font-weight: 700;
}

.social-icons {
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 1rem;
}

.social-icons i {
   width: 2.75rem;
   aspect-ratio: 1/1;
   border-radius: 50%;
   background-color: transparent;
   border: 1px solid var(--white);
   display: flex;
   justify-content: center;
   line-height: 0;
   align-items: center;
   color: var(--white) !important;
   font-size: 1.125rem;
   transition: .4s;
   -webkit-transition: .4s;
   -moz-transition: .4s;
   -ms-transition: .4s;
   -o-transition: .4s;
}

.social-icons i:hover {
   background-color: var(--main);
   border-color: var(--main) !important;
}

.features {
   position: relative;
   z-index: 9;
   width: 100%;
   padding-block: 4.3rem 1.6rem;
   background: var(--secondry);
   color: var(--white);
   clip-path: polygon(50% 36%, 100% 0, 100% 100%, 0 100%, 0 0);
}

.features ul {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: space-between;
}

.features ul li {
   position: relative;
   font-size: 1.2rem;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   gap: .4rem;
}

.features ul li::before {
   content: '';
   background: url(../images/check.svg);
   width: 1.5rem;
   height: 1.5rem;
   background-size: contain;
}

[dir='rtl'] .more i {
   transform: rotateY(calc(180deg * var(--dir-multiplier))) !important;
   -webkit-transform: rotateY(calc(180deg * var(--dir-multiplier))) !important;
   -moz-transform: rotateY(calc(180deg * var(--dir-multiplier))) !important;
   -ms-transform: rotateY(calc(180deg * var(--dir-multiplier))) !important;
   -o-transform: rotateY(calc(180deg * var(--dir-multiplier))) !important;
}

.float-icon {
   z-index: 99;
   width: 2.75rem;
   aspect-ratio: 1 / 1;
   border-radius: 100%;
   text-align: center;
   background: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: auto;
   color: var(--main) !important;
   font-size: 1rem;
   transform: translate(0%, 50%);
   -moz-transform: translate(0%, 50%);
   -ms-transform: translate(0%, 50%);
   -o-transform: translate(0%, 50%);
   -webkit-transform: translate(0%, 50%);
}
.hero-sec .float-icon i{
   color: var(--main);
}

.float-icon:before {
   content: "";
   position: absolute;
   border: .375rem solid rgba(var(--whiteOp), .5);
   inset: -.375rem;
   box-shadow: 0 0 0 .375rem rgba(var(--whiteOp), .25);
   border-radius: 100%;
   -webkit-border-radius: 100%;
   -moz-border-radius: 100%;
   -ms-border-radius: 100%;
   -o-border-radius: 100%;
}

.float-icon:hover:before {
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   animation-fill-mode: forwards;
   -webkit-animation: ripple-out 1s infinite;
   animation: ripple-out 1s infinite;
}

/* Ripple Out */
@keyframes ripple-out {
   100% {
      inset: -10px;
      opacity: 0;
   }
}

@-webkit-keyframes ripple-out {
   100% {
      inset: -10px;
      opacity: 0;
   }
}

/* ------------- about --------------- */
.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;
   color: #B7B8BB;
}

.about .about-content * {
   color: #B7B8BB;
   margin-bottom: .75rem;
   font-weight: 500;
}

.about .about-img {
   -webkit-mask-image: url(../images/Mask.svg);
   mask-image: url(../images/Mask.svg);
   mask-repeat: no-repeat;
   mask-size: 75%;
   mask-position: center;
}

.about .about-img img{
    aspect-ratio: 6 / 4;
}

.principles_wrapper .hexagonIcon {
   mask-image: url('../images/principle-mask.svg');
   background: #33354b;
   width: 8rem;
}

.testimonials .review {
   border: 1px solid var(--light-color);
   padding: 1rem .5rem;
   border-radius: 22px;
   -webkit-border-radius: 22px;
   -moz-border-radius: 22px;
   -ms-border-radius: 22px;
   -o-border-radius: 22px;
}

.card-title  {
   color: var(--white) !important;
}
.testimonials .review .card-title::before {
   content: '';
   position: absolute;
   inset-inline-end: 1rem;
   z-index: 2;
   width: 33px;
   height: 44px;
   background-image: url(../images/quote.png);
   background-repeat: no-repeat;
   background-size: contain;
}

/* ------------- hexagon sections --------------- */
.card {
   height: 100%;
   border: unset;
   background: transparent;
}

.services {
   padding-block: 4rem;
}

.servWrapper {
   border: 1px solid var(--light-color);
   margin-block: 1.85rem;
}

.serv {
   position: relative;
   text-align: center;
   padding: 3rem .5rem;
}

.servWrapper .col:not(:nth-child(4n)) {
   border-inline-end: 1px solid var(--light-color);
}

.servWrapper .col:not(:nth-child(-n + 4)) {
   border-block-start: 1px solid var(--light-color);
}

.servName,
.achievementName {
   font-size: 1.25rem;
   font-weight: bold;
}

.outer_hex_icon,
.inner_hex_icon,
.hexagonIcon {
   background: var(--linear2);
   width: 6rem;
   aspect-ratio: 1/1;
   margin: auto;
   margin-bottom: 1.4rem;
   display: flex;
   align-items: center;
   justify-content: center;
   mask-image: url(../images/Mask.svg);
   mask-repeat: no-repeat;
   mask-size: 100%;
   mask-position: center;
}

.hexagonIcon img {
   width: 40%;
   filter: brightness(0) invert(1);
   -webkit-filter: brightness(0) invert(1);
}

.outer_hex_icon,
.inner_hex_icon {
   margin: 0;
   position: relative;
}

.double_hex_line+* {
   word-spacing: 4rem;
   width: calc(100% - 3.1rem);
}

.outer_hex_icon {
   box-shadow: inset 0px 3px 6px #00000029;
   width: 3.1rem;
}

.inner_hex_icon {
   background: var(--white);
   width: 55%;
}

.double_hex_line::after {
   content: '';
   position: absolute;
   inset-inline-end: -13px;
   background: var(--linear2);
   width: 16px;
   height: 6px;
   border-start-end-radius: 70px;
   border-end-end-radius: 70px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 0;
}

.serv-img img {
   width: 100%;
   aspect-ratio: 3 / 2;
   border-radius: 20px;
}

.serv_features .card::before{
   content: '';
   position: absolute;
   top: 1.5rem;
   /*inset-inline-start: 3.9rem;*/
   /*width: calc(100% - 2.8rem);*/
   inset-inline-start: 0rem;
   width: 100%;
   border-bottom: 2px solid var(--white);
}
.serv_features .card .feature-desc{
   color: #B7B8BB;
}

/* ------------- vid section --------------- */
.video-wrap {
   position: relative;
   margin-bottom: 2rem;
}

.video-wrap::before {
   content: '';
   position: absolute;
   width: 100%;
   height: calc(100% + 8px);
   inset-inline-start: -8px;
   inset-block-start: -8px;
   background: var(--light-color);
   z-index: -1;
   border-radius: 20px !important;
   -webkit-border-radius: 20px !important;
   -moz-border-radius: 20px !important;
   -ms-border-radius: 20px !important;
   -o-border-radius: 20px !important;
}

.video-wrap::after {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(var(--mainOp), .5);
   width: 100%;
   height: 100%;
   inset-inline-start: -8px;
   z-index: 2;
   border-radius: 20px !important;
   -webkit-border-radius: 20px !important;
   -moz-border-radius: 20px !important;
   -ms-border-radius: 20px !important;
   -o-border-radius: 20px !important;
}

.video-wrap .video-cover-img {
   border-radius: 20px;
   overflow: hidden;
   aspect-ratio: 9/5;

}

.video-wrap .video-cover-img img {
   width: 100%;
   height: 100%;
   transition: .4s;
}

.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 .op-video {
   position: absolute;
   inset-inline-end: 50%;
   z-index: 6;
   top: 50%;
   width: 3.125rem;
   aspect-ratio: 1/1;
   border-radius: 100%;
   text-align: center;
   background: var(--main);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white) !important;
   font-size: 1.125rem;
   transform: translate(calc(-50% * var(--dir-multiplier)), -50%);
   -webkit-transform: translate(calc(-50% * var(--dir-multiplier)), -50%);
   -moz-transform: translate(calc(-50% * var(--dir-multiplier)), -50%);
   -ms-transform: translate(calc(-50% * var(--dir-multiplier)), -50%);
   -o-transform: translate(calc(-50% * var(--dir-multiplier)), -50%);
}

/* ------------- projects --------------- */
.projects.inHome {
   background: var(--linear);
}

.projects.inHome .section-bg {
   background: url('../images/achievement.svg');
   background-repeat: no-repeat;
   background-position: right bottom;
   background-size: cover;
}

.projects .section-bg {
   padding-block: 4rem 1rem;
}

.nav-pills .nav-link {
   color: #B7B8BB;
   background: transparent !important;
   font-weight: 500;
   font-size: 1.1rem;
}

.nav-pills .nav-link.active {
   color: var(--white);
   position: relative;
}

.nav-pills .nav-link.active::after {
   content: '';
   position: absolute;
   bottom: 0;
   inset-inline: 0;
   border-bottom: 6px dotted var(--light-color);
   width: 100%;
}

.projects .card {
   mask-image: url(../images/Mask.svg);
   mask-repeat: no-repeat;
   mask-size: 92%;
   mask-position: center;
}

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

.projects .card .card-img-overlay {
   position: absolute;
   display: flex;
   justify-content: end;
   flex-direction: column;
   margin-bottom: 2.2rem;
   padding-inline: 28% 18%;
   background: rgba(var(--mainOp), .38);
   transform: translateY(100%);
}

.projects .card:hover .card-img-overlay {
   transform: translateY(0%);
   -webkit-transform: translateY(0%);
   -moz-transform: translateY(0%);
   -ms-transform: translateY(0%);
   -o-transform: translateY(0%);
}

.projects .card .card-img-overlay .more {
   font-size: 1rem;
   font-weight: normal;
}

.projects .card .card-img-overlay .more i {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--light-color);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
   transform: rotate(calc(45deg * var(--dir-multiplier)));
   -webkit-transform: rotate(calc(45deg * var(--dir-multiplier)));
   -moz-transform: rotate(calc(45deg * var(--dir-multiplier)));
   -ms-transform: rotate(calc(45deg * var(--dir-multiplier)));
   -o-transform: rotate(calc(45deg * var(--dir-multiplier)));
}


.projects .card .card-img-overlay .more:hover i {
   background: var(--secondry);
   color: var(--white);
   transform: rotate(0);
   -webkit-transform: rotate(0);
   -moz-transform: rotate(0);
   -ms-transform: rotate(0);
   -o-transform: rotate(0);
}

/* .all {
   width: 100%;
   height: auto;
   display: inline-block;
   position: relative;
}

.all .slider {
   border-radius: 3px;
   border-radius: 10px;
   position: relative;
} */

.one .item {
   border-radius: 22px;
   -webkit-border-radius: 22px;
   -moz-border-radius: 22px;
   -ms-border-radius: 22px;
   -o-border-radius: 22px;
   overflow: hidden;
}
.item img{
   width: 100%;
   object-fit: cover;
}

.one .item img{ 
   aspect-ratio: 11 / 7;
}
.project_details li {
   padding: .85rem 0;
   font-size: 1.2rem;
   display: flex;
   justify-content: space-between;
}

.one .item:after {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: absolute;
   content: "";
   display: block;
}


.slider-two .item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.slider-two {
   width: auto;
   height: auto;
   overflow: hidden;
   position: relative;
   right: 0;
   bottom: 0;
   width: 100%;
   padding: 0;
   z-index: 1;
   margin-top: 15px;
}

.slider-two .item {
   transition: all ease .25s;
   border: solid 2px transparent;
   cursor: pointer;
   overflow: hidden;
   border-radius: 12px;
   aspect-ratio: 4/3;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
}

.owl-theme .owl-nav [class*=owl-] {
   position: absolute;
   z-index: 9;
   top: calc(50% - 20px);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--white) !important;
}

.owl-nav .owl-prev {
   inset-inline-start: 1rem;
}

.owl-nav .owl-next {
   inset-inline-end: 1rem;
}

.owl-theme .owl-nav [class*=owl-]:hover {
   color: #000;
}

.slider-two .item.active-thumb {
   border: solid 2px var(--light-color);
   box-shadow: 0px 3px 6px #00000029;
}

.slider-two .owl-stage {
   padding: 15px 0 30px;
}

.project_details .project-info{
   padding: 4rem 2rem;
   padding-inline-end: 4rem;
   border-radius: 22px;
   -webkit-border-radius: 22px;
   -moz-border-radius: 22px;
   -ms-border-radius: 22px;
   -o-border-radius: 22px;
   margin-bottom: 2rem;
}

/* ------------- achievements --------------- */
.achievements {
   background: var(--linear);
}

.achievements .section-bg {
   background: url(../images/project.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover !important;
   padding-block: 4rem;
}


.achievements .hexagonIcon {
   background: #464769;
   font-weight: bold;
   width: 8rem;
   font-size: 1.5rem;
}

.our_team .card-img-top,
.blogs .card-img-top {
   border-radius: 22px;
   -webkit-border-radius: 22px;
   -moz-border-radius: 22px;
   -ms-border-radius: 22px;
   -o-border-radius: 22px;
   overflow: hidden;
}

.blogs .card-img-top img {
   aspect-ratio: 12 / 12;
}

.our_team .card-img-top img {
   aspect-ratio: 10/12;
}

.our_team .card-body,
.blogs .card-body {
   position: absolute;
   bottom: 0;
   inset-inline: 0;
   flex-grow: 1;
   padding: 1.75rem;
   box-shadow: 0px 3px 6px #00000029;
   background: rgba(var(--secOp), .5);
   border-radius: 22px;
   -webkit-border-radius: 22px;
   -moz-border-radius: 22px;
   -ms-border-radius: 22px;
   -o-border-radius: 22px;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   color: var(--white);
}

.our_team .card-body {
   padding: 1.75rem 1rem;
}

.blogs .card-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-top: .3rem;
}

.blog-title {
   font-size: 1.125rem;
   font-weight: bold;
   color: var(--white);
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.blog-desc {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.single_blog .card {
   height: auto;
}

.single_blog .card:not(:last-child) {
   margin-bottom: 1.25rem;
}

.blogs .blog_details .card-img-top img {
   aspect-ratio: 7 / 4;
}

.blogs .blog_details .blog-title {
   color: var(--main);
   padding-bottom: .85rem;
   margin-bottom: .85rem;
   border-bottom: 1px solid rgba(var(--mainOp), .25);
}

.blogs .blog_details .card-body {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   padding-inline: 0;
   background: transparent;
}

.blogs .blog_details .blog-desc {
   display: flex;
   color: #4E4E4E !important;
   flex-direction: column;
   gap: .65rem;
}

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


/* ------------- contact --------------- */
.contact {
   padding-block: 4rem;
   background: url('../images/contact.svg');
   background-position: left top;
   background-repeat: no-repeat;
}

.contact-data .contact-info {
   position: relative;
   height: 100%;
   border-radius: 22px;
   -webkit-border-radius: 22px;
   -moz-border-radius: 22px;
   -ms-border-radius: 22px;
   -o-border-radius: 22px;
   background-size: cover;
   background-position: center;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.233);
   overflow: hidden;
}

.contact-data .contact-info::before {
   content: '';
   position: absolute;
   display: block;
   width: 45%;
   aspect-ratio: 1/1;
   inset-inline-start: 50%;
   top: 50%;
   background: radial-gradient(var(--white), rgba(var(--whiteOp), .35));
   transform: translate(calc(50% * var(--dir-multiplier)), -50%);
   -webkit-transform: translate(calc(50% * var(--dir-multiplier)), -50%);
   -moz-transform: translate(calc(50% * var(--dir-multiplier)), -50%);
   -ms-transform: translate(calc(50% * var(--dir-multiplier)), -50%);
   -o-transform: translate(calc(50% * var(--dir-multiplier)), -50%);
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
}

.contact-data .contact-wrapper {
   padding: 1.85rem 1.2rem;
   background-color: rgba(var(--mainOp), .38);
   backdrop-filter: blur(33px);
   height: 100%;
}

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

.contact-data .contact-info i {
   display: flex;
   align-items: center;
   width: auto;
   height: 48px;
   margin-bottom: .25rem;
   font-size: 2rem;
   color: var(--white);
}

.contact-data iframe {
   width: 100%;
   height: 55vh;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   margin-top: 3rem;
}

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

.footer-nav .navbar .nav-link {
   color: var(--white) !important;
}


footer .sub-footer {
   background: var(--main);
}

footer .sub-footer a {
   position: relative;
   color: #fff;
   padding: 10px 0;
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   font-size: .85rem;
}

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: 6.875rem;
   object-fit: scale-down;
   margin: 0 6px;
}

footer .navbar a {
   color: var(--main) !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;
}

.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);
   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 .hexagonIcon {
   background: var(--white);
   width: 70px;
   height: 70px;
   padding: 20px;
   margin: unset;
}

.servDesc .hexagonIcon 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);
   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;
}

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


/* -------- media -------- */
@media (min-width: 768px) {
   html {
      font-size: 16px;
   }
}

@media (min-width: 1200px) {
   html {
      font-size: 16px;
   }

}

@media (min-width: 1600px) {
   html {
      font-size: 22px;
   }
}

@media (min-width: 2400px) {
   html {
      font-size: 36px;
   }
}


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

@media(max-width: 992px) {
   :root {
      --gutter-x: 1.5rem;
   }
   
   nav.navbar {
        box-shadow: 0px 6px 6px #00000029;
        background: rgba(var(--mainOp), .38);
        position: fixed;
        backdrop-filter: blur(18px);
    }

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

   .hero-sec .header-content .header-slider {
      width: 70%;
   }

   .servWrapper .col:not(:nth-child(-n + 2)) {
      border-block-start: 1px solid var(--light-color);
   }

   .servWrapper .col:nth-child(even) {
      border-inline-end: unset;
   }

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

   footer .navbar a {
      margin: auto !important;
   }

   .features {
      clip-path: polygon(50% 20%, 100% 0, 100% 100%, 0 100%, 0 0);
   }
   .double_hex_line+* {
       word-spacing: 0rem;
    }
}

@media(max-width: 576px) {
   :root {
      --gutter-x: .5rem;
   }


   .hero-sec {
      height: auto;
      min-height: 100vh;
   }

   .hero-sec .header-content .header-slider {
      width: 85%;
   }


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

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

}

.no_data svg path{
    stroke: var(--white)
}