@charset "UTF-8";

/************ TABLE OF CONTENTS ***************

  01. VARIBALES CSS START
  02. MIXIN CSS START
  03. SPACE CSS START
  04. ANIMATION CSS START
  05. THEME CSS START
  06. THEME DARK CSS START
  07. BUTTON CSS START
  08. TITLE CSS START
  09. MENU CSS START
  10. MODAL CSS START
  11. CURSOR CSS START
  12. HEADER CSS START
  13. OFFCANVAS CSS START
  14. HERO CSS START
  15. SLIDER CSS START
  16. ABOUT CSS START
  17. SERVICE CSS START
  18. COUNTER CSS START
  19. WORKFLOW CSS START
  20. BRAND CSS START
  21. TESTIMONIAL CSS START
  22. PORTFOLIO CSS START
  23. PORTFOLIO 2 CSS START
  24. BLOG CSS START
  25. CTA CSS START
  26. STORY CSS START
  27. TEAM CSS START
  28. SOLUTION CSS START
  29. DEVELOPMENT CSS START
  30. AWARD CSS START
  31. FAQ CSS START
  32. CAREER CSS START
  33. FEATURE CSS START
  34. CONTACT CSS START
  35. PRICE CSS START
  36. ERROR CSS START
  37. HOME 5 CSS START
  38. FOOTER CSS START
**********************************************/
/*----------------------------------------*/
/*  01. VARIBALES CSS START
/*----------------------------------------*/
:root {
  --primary: #61a60e;
  --secondary: #274E5A;
  --black: #000;
  --black-2: #121212;
  --black-3: #555;
  --black-4: #1d1d1d;
  --black-5: #343434;
  --black-6: #262626;
  --black-7: #555555;
  --black-13: #666;
  --white: #fff;
  --white-2: #efefef;
  --white-3: #e9e9e9;
  --white-4: #f0f0f0;
  --white-5: #fbfbfb;
  --white-6: #d7d7d7;
  --gray: #c2c2c2;
  --gray-2: #999;
  --gray-3: #a8a8a8;
  --gray-4: #f6f6f6;
  --gray-5: #bbb;
  --gray-6: #2b2b2b;
  --gray-7: #b9b9b9;
  --gray-8: #8E8E8E;
  --gray-9: #aaa;
  --gray-10: #7c7c7c;
  --gray-11: #D9D9D9;
  --gray-12: #383838;
  --gray-13: #ccc;
  --gray-14: #dfdfdf;
  --gray-15: #C0C0C0;
  --blue: #27505a;
  --blue-2: #16393f;
  --blue-3: #163948;
  --blue-4: #FFFAF0;
  --blue-5: #E0E3CC;
  --bg-line: #1e1e1e;
  --d-gray: #6A6A6A;
  --d-black: #1A1A1A;
  --d-black-2: #171717;
  --d-black-3: #1A1A1A;
}

@font-face {
  font-family: 'Aeonik Arabic';
  src: url('../fonts/aeonikarabic-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik Arabic';
  src: url('../fonts/aeonikarabic-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik Arabic';
  src: url('../fonts/aeonikarabic-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik Arabic';
  src: url('../fonts/aeonikarabic-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*----------------------------------------*/
/*  02. MIXIN CSS START
/*----------------------------------------*/
/*----------------------------------------*/
/*  03. SPACE CSS START
/*----------------------------------------*/
.pb-100 {
  padding-bottom: 100px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-100 {
    padding-bottom: 90px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-100 {
    padding-bottom: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .pb-100 {
    padding-bottom: 60px;
  }
}

.pt-100 {
  padding-top: 100px;
}

@media only screen and (max-width: 767px) {
  .pt-100 {
    padding-top: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-100 {
    padding-top: 80px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pt-100 {
    padding-top: 90px;
  }
}

/*----------------------------------------*/
/*  04. ANIMATION CSS START
/*----------------------------------------*/
@keyframes wcRotate {
  0% {
    transform: rotate(0deg) scale(1.1);
  }

  50% {
    transform: rotate(5deg) scale(1.17);
  }

  100% {
    transform: rotate(0deg) scale(1.1);
  }
}

@keyframes wcBubble {
  0% {
    scale: 1;
  }

  50% {
    scale: 1.5;
  }

  100% {
    scale: 1;
  }
}

@keyframes wcZoom {
  0% {
    scale: 1;
  }

  50% {
    scale: 0.5;
  }

  100% {
    scale: 1;
  }
}

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

  50% {
    transform: translateY(50px);
  }

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

@keyframes reveal {
  to {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes wcfadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wcSpinner {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*----------------------------------------*/
/*  05. THEME CSS START
/*----------------------------------------*/
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Aeonik Arabic", sans-serif;
  font-weight: 400;
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h4 {
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  position: relative;
  z-index: 1;
}

a {
  text-decoration: none;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

button {
  background-color: transparent;
  border: 0;
}

p {
  padding: 0;
  margin: 0;
  font-style: normal;
  line-height: 1.5;
  font-weight: 400;
  font-size: 16px;
  color: var(--black-3);
  position: relative;
  z-index: 1;
}

video,
img {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.line {
  position: relative;
}

.line::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--white-4);
}

.line::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  left: calc(50% - 1px);
  top: 0;
  background: var(--white-4);
}

.sec-title-wrapper {
  position: relative;
  z-index: 9;
}

.scroll-top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9991;
  color: var(--white);
  transition: all 0.3s;
  display: none;
  width: 0;
  height: 0;
  border-bottom: 16px solid var(--white);
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  mix-blend-mode: exclusion;
}

.scroll-top i {
  font-size: 14px;
  color: var(--black-2);
  padding-top: 18px;
  padding-right: 5px;
}

.scroll-top:hover {
  color: var(--gray-2);
  border-bottom: 23px solid var(--primary);
  mix-blend-mode: normal;
}

.scroll-top:hover i {
  color: var(--white);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .scroll-top {
    bottom: 80px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .scroll-top {
    right: 10px;
    bottom: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .scroll-top {
    right: 5px;
    bottom: 55px;
  }
}

.logo-light {
  display: none;
  width: 94px;
}

.logo-dark {
  display: block;
  width: 94px;
}

/*----------------------------------------*/
/*  06. THEME DARK CSS START
/*----------------------------------------*/
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet {
  border-color: var(--secondary);
}

.dark .portfolio__slider-2-pagination .swiper-pagination-bullet::after {
  background-color: var(--secondary);
}

.dark .portfolio__slider-2-pagination .swiper-pagination-bullet-active,
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet:hover {
  border-color: var(--white);
}

.dark .portfolio__slider-2-pagination .swiper-pagination-bullet-active::after,
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet:hover::after {
  background-color: var(--white);
}

.dark .modal__apply {
  background-color: var(--d-black-2);
}

.dark .modal__apply .input-apply p,
.dark .modal__apply .form-top p {
  color: var(--white);
}

.dark .modal__apply .input-apply-2 p,
.dark .modal__apply .input-apply-2 input[type=file] {
  color: var(--white);
}

.dark .modal__apply .form-top img {
  filter: invert(1);
}

.dark .modal .close_btn-2:hover {
  color: var(--white);
}

.dark .modal__close-2:hover {
  color: var(--white);
}

.dark .circle-pagination button.swiper-pagination-bullet {
  border-color: var(--white);
}

.dark .circle-pagination button.swiper-pagination-bullet span {
  background-color: var(--white);
}

.dark .circle-pagination-2 .swiper-pagination-bullet {
  border-color: var(--white);
}

.dark .circle-pagination-2 .swiper-pagination-bullet::after {
  background-color: var(--white);
}

.dark .modal__apply .input-apply textarea,
.dark .modal__apply .input-apply-2 input {
  color: var(--white);
  background-color: var(--d-black-2);
  border-color: var(--black-3);
}

.dark .modal__apply .input-apply textarea:focus,
.dark .modal__apply .input-apply-2 input:focus {
  border-color: var(--white);
}

/*----------------------------------------*/
/*  07. Button CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  08. TITLE CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  09. MENU CSS START
/*----------------------------------------*/

.menu-heading {
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
  padding-bottom: 10px;
  text-transform: capitalize;
}

/* mean menu customize */
.offcanvas__menu-wrapper.mean-container {
  padding-top: 160px;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 142px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 93px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 93px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 40px;
  }
}

.offcanvas__menu-wrapper.mean-container .mean-nav>ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.offcanvas__menu-wrapper.mean-container .mean-nav>ul>li:last-child>a {
  border-bottom: none;
}

.offcanvas__menu-wrapper.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 20px 0 20px 100px;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--white);
  text-transform: capitalize;
  border-top: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  outline: none;
  transform: translateY(var(--y)) translateZ(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text {
  display: flex;
  overflow: hidden;
  text-shadow: 0 80px 0 var(--white);
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span {
  display: block;
  backface-visibility: hidden;
  font-style: normal;
  transition: transform 0.4s ease;
  transform: translateY(var(--m)) translateZ(0);
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(1) {
  transition-delay: 0.0333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(2) {
  transition-delay: 0.0666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(3) {
  transition-delay: 0.1s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(4) {
  transition-delay: 0.1333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(5) {
  transition-delay: 0.1666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(6) {
  transition-delay: 0.2s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(7) {
  transition-delay: 0.2333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(8) {
  transition-delay: 0.2666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(9) {
  transition-delay: 0.3s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(10) {
  transition-delay: 0.3333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(11) {
  transition-delay: 0.3666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(12) {
  transition-delay: 0.4s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(13) {
  transition-delay: 0.4333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(14) {
  transition-delay: 0.4666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(15) {
  transition-delay: 0.5s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(16) {
  transition-delay: 0.5333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(17) {
  transition-delay: 0.5666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(18) {
  transition-delay: 0.6s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(19) {
  transition-delay: 0.6333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(20) {
  transition-delay: 0.6666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(21) {
  transition-delay: 0.7s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(22) {
  transition-delay: 0.7333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(23) {
  transition-delay: 0.7666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(24) {
  transition-delay: 0.8s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(25) {
  transition-delay: 0.8333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(26) {
  transition-delay: 0.8666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(27) {
  transition-delay: 0.9s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(28) {
  transition-delay: 0.9333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(29) {
  transition-delay: 0.9666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(30) {
  transition-delay: 1s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(31) {
  transition-delay: 1.0333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(32) {
  transition-delay: 1.0666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(33) {
  transition-delay: 1.1s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(34) {
  transition-delay: 1.1333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(35) {
  transition-delay: 1.1666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(36) {
  transition-delay: 1.2s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(37) {
  transition-delay: 1.2333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(38) {
  transition-delay: 1.2666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(39) {
  transition-delay: 1.3s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(40) {
  transition-delay: 1.3333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(41) {
  transition-delay: 1.3666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(42) {
  transition-delay: 1.4s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(43) {
  transition-delay: 1.4333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(44) {
  transition-delay: 1.4666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(45) {
  transition-delay: 1.5s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(46) {
  transition-delay: 1.5333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(47) {
  transition-delay: 1.5666666667s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(48) {
  transition-delay: 1.6s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(49) {
  transition-delay: 1.6333333333s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a:hover {
  --y: -0px;
  background-color: transparent;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a:hover span {
  --m: calc(80px * -1);
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 32px;
    padding-left: 60px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 32px;
    padding-left: 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 28px;
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 30px;
    padding-left: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 20px;
    padding-left: 15px;
  }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  width: 330px;
  height: 56px;
  justify-content: end;
  font-weight: 300;
  border: none !important;
  background: transparent;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 56px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 56px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 57px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 46px;
    width: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 36px;
    width: 36px;
    padding: 11px 12px 13px !important;
  }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover {
  opacity: 0.7;
  color: var(--primary);
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid #26434a;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
  font-size: 24px;
  text-transform: capitalize;
  border-top: none !important;
  padding: 20px 0 20px 150px;
  transition: all 0.3s;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a:hover {
  letter-spacing: 1px;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-left: 90px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-left: 80px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-left: 60px;
    font-size: 24px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    font-size: 20px;
    padding: 15px 0 15px 30px;
  }
}

@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    font-size: 18px;
    padding: 15px 0 15px 30px;
  }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
  height: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 25px;
  }
}

@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 23px;
  }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child {
  border-bottom: 1px solid var(--black-4);
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
  padding-left: 180px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 120px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 30px;
  }
}

.offcanvas__menu-wrapper.mean-container .mean-bar {
  padding: 0;
  background: none;
}

.offcanvas__menu-wrapper.mean-container a.meanmenu-reveal {
  display: none !important;
}

.header__area-2 .main-dropdown {
  background-color: var(--white);
}

.header__area-2 .main-dropdown li a {
  color: var(--black-2);
}

.header__area-2 .main-dropdown li a:hover {
  letter-spacing: 1px;
}

.header__area-2 .main-dropdown li a .menu-text {
  text-shadow: 0 16px 0 var(--black-2);
}

.header__area-2 .main-dropdown .sub-dropdown {
  background-color: var(--white);
}

.header__area-2 .mega-menu,
.header__area-2 .mega-menu-2 {
  background-color: var(--white);
}

.header__area-2 .mega-menu li a,
.header__area-2 .mega-menu-2 li a {
  color: var(--black-2);
}

.header__area-2 .mega-menu li a:hover,
.header__area-2 .mega-menu-2 li a:hover {
  letter-spacing: 1px;
}

.header__area-2 .mega-menu li a:not([href]):not([class]),
.header__area-2 .mega-menu-2 li a:not([href]):not([class]) {
  color: var(--black-2);
}

.header__area-2 .mega-menu li a .menu-text,
.header__area-2 .mega-menu-2 li a .menu-text {
  text-shadow: 0 16px 0 var(--black-2);
}

/*----------------------------------------*/
/*  10. MODAL CSS START
/*----------------------------------------*/
.modal__testimonial {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  z-index: 9991;
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal__testimonial-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white);
  border-radius: 5px;
  width: 760px;
  height: 500px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal__testimonial-content {
    width: 700px;
    height: 480px;
  }
}

@media only screen and (max-width: 767px) {
  .modal__testimonial-content {
    width: 320px;
    height: 300px;
  }
}

.modal__testimonial-content iframe {
  width: 100%;
  height: 100%;
}

.modal__close {
  background: var(--secondary);
  color: var(--white);
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 100%;
  font-size: 18px;
  position: absolute;
  right: -15px;
  top: -15px;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 767px) {
  .modal__close {
    right: -5px;
    top: -5px;
  }
}

.modal__close:hover {
  color: var(--primary);
}

.modal__close-2 {
  background-color: transparent;
  color: var(--black-3);
  width: 30px;
  height: 30px;
  border: none;
  font-size: 24px;
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
  transition: all 0.3s;
}

@media only screen and (max-width: 767px) {
  .modal__close-2 {
    right: 20px;
    top: 15px;
  }
}

.modal__close-2:hover {
  color: var(--black-2);
}

.modal__application {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  z-index: 9991;
}

.modal__apply {
  padding: 100px 50px;
  max-width: 1130px;
  height: 96vh;
  margin: 0 auto;
  margin-top: 2vh;
  overflow-y: auto;
  position: relative;
  background-color: var(--white);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .modal__apply {
    max-width: 960px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal__apply {
    max-width: 720px;
  }
}

@media only screen and (max-width: 767px) {
  .modal__apply {
    padding: 50px 20px;
    margin-top: 0;
    height: 100vh;
  }
}

.modal__apply .wc-btn-primary,
.modal__apply .wc-btn-services,
.modal__apply .wc-btn-secondary,
.modal__apply .wc-btn-pink,
.modal__apply .wc-btn-light,
.modal__apply .wc-btn-black {
  width: 120px;
  height: 120px;
}

.modal__apply .form-top {
  text-align: center;
  padding-bottom: 50px;
}

.modal__apply .form-top img {
  margin-bottom: 40px;
}

.modal__apply .form-top p {
  font-size: 18px;
  color: var(--black-2);
  border: 1px solid var(--black-3);
  border-radius: 30px;
  display: inline-block;
  padding: 5px 35px;
  margin-top: 20px;
}

.modal__apply .input-apply {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  grid-gap: 90px;
  margin-bottom: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .modal__apply .input-apply {
    grid-template-columns: 1fr 2fr;
    grid-gap: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .modal__apply .input-apply {
    grid-template-columns: 1fr 2fr;
    grid-gap: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal__apply .input-apply {
    grid-template-columns: 1fr;
    grid-gap: 10px;
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .modal__apply .input-apply {
    grid-template-columns: 1fr;
    grid-gap: 10px;
    margin-bottom: 30px;
  }
}

.modal__apply .input-apply-2 {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 50px;
  margin-bottom: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .modal__apply .input-apply-2 {
    grid-template-columns: 1fr 2fr;
    grid-gap: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .modal__apply .input-apply-2 {
    grid-template-columns: 1fr 2fr;
    grid-gap: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal__apply .input-apply-2 {
    grid-template-columns: 1fr;
    grid-gap: 10px;
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .modal__apply .input-apply-2 {
    grid-template-columns: 1fr;
    grid-gap: 10px;
    margin-bottom: 30px;
  }
}

.modal__apply .input-apply-2 p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
}

.modal__apply .input-apply-2 input {
  width: 100%;
  border: 1px solid var(--white-4);
  outline: none;
  padding: 15px;
  transition: all 0.3s;
}

.modal__apply .input-apply-2 input:focus {
  border: 1px solid var(--black-3);
}

.modal__apply .input-apply p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
}

.modal__apply .input-apply textarea {
  width: 100%;
  height: 125px;
  border: 1px solid var(--white-4);
  outline: none;
  padding: 15px;
  transition: all 0.3s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .modal__apply .input-apply textarea {
    height: 90px;
  }
}

@media only screen and (max-width: 767px) {
  .modal__apply .input-apply textarea {
    height: 90px;
  }
}

.modal__apply .input-apply textarea:focus {
  border: 1px solid var(--black-3);
}

.modal__apply .form-btn button {
  margin-left: auto;
  margin-top: 30px;
  background-color: transparent;
  z-index: 1;
}

.modal__apply .form-btn-2 {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 20px;
}

.modal__apply .form-btn-2 button {
  background-color: transparent;
  z-index: 1;
}

.modal-show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

/*----------------------------------------*/
/*  11. CURSOR CSS START
/*----------------------------------------*/
.cursor {
  position: fixed;
  left: 0;
  pointer-events: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: var(--white);
  background: var(--black-2);
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  z-index: 999;
  opacity: 0;
  mix-blend-mode: hard-light;
  transition: all 0.3s;
}

.cursor.large {
  width: 180px;
  height: 180px;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
}

.cursor1 {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1px solid var(--primary);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: 0.15s;
  z-index: 999;
  mix-blend-mode: difference;
}

@media (max-width: 1200px) {
  .cursor1 {
    display: none;
  }
}

.cursor1.hide {
  opacity: 0;
  visibility: hidden;
}

.cursor2 {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: var(--primary);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: 0.2s;
  z-index: 999;
  mix-blend-mode: difference;
}

@media (max-width: 1200px) {
  .cursor2 {
    display: none;
  }
}

.cursor2.hide {
  opacity: 0;
  visibility: hidden;
}

.cursor2.circle {
  width: 60px;
  height: 60px;
}

.cursor-testi {
  position: fixed;
  width: 80px;
  height: 80px;
  background-color: var(--black-2);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: 0.2s;
  z-index: 999;
}

@media (max-width: 1200px) {
  .cursor-testi {
    display: none;
  }
}

.cursor-testi.hide {
  opacity: 0;
  visibility: hidden;
}

.cursor-testi.play {
  width: 100px;
  height: 100px;
  mix-blend-mode: unset;
  background-color: var(--black-2);
}

.cursor-testi.play::after {
  position: absolute;
  content: "Play";
  color: var(--white);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.switcher__area {
  position: relative;
  direction: ltr;
}

@media only screen and (max-width: 767px) {
  .switcher__area {
    display: none;
  }
}

.switcher__icon {
  position: fixed;
  width: 50px;
  height: 50px;
  background: var(--white);
  right: 0;
  top: 40%;
  transform: translateY(-50%);
  z-index: 999;
  transition: all 0.3s;
  mix-blend-mode: exclusion;
}

.switcher__icon button {
  font-size: 24px;
  color: var(--black-2);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transition: all 0.3s;
}

.switcher__icon button:hover {
  color: var(--gray-2);
}

.switcher__icon button#switcher_open {
  animation: wcSpinner 5s infinite linear;
}

.switcher__items {
  width: 280px;
  padding: 50px 30px;
  background: var(--black-2);
  position: fixed;
  right: -280px;
  top: 40%;
  z-index: 99;
  transform: translateY(-50%);
  font-weight: 400;
  font-family: "Aeonik Arabic", sans-serif;
  transition: all 0.3s;
}

.switcher__items .wc-col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.switcher__item {
  margin-bottom: 30px;
}

.switcher__item:nth-child(2) {
  margin-bottom: 0;
}

.switcher__item:last-child {
  margin-bottom: 0;
  display: none;
}

.switcher__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--white);
  text-transform: capitalize;
  padding-bottom: 10px;
}

.switcher__btn button {
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-2);
  background: #2B2B2F;
  border-radius: 4px;
  padding: 10px 15px;
  text-transform: capitalize;
}

.switcher__btn button:hover,
.switcher__btn button.active {
  color: var(--white);
}

.switcher__btn select {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-2);
  width: 100%;
  border: none;
  padding: 9px 10px;
  border-radius: 4px;
  background: #2B2B2F;
  text-transform: capitalize;
  outline: none;
  cursor: pointer;
}

#switcher_close {
  display: none;
}

/*----------------------------------------*/
/*  12. HEADER CSS START
/*----------------------------------------*/
.header__area {
  position: fixed;
  width: 100px;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9991;
  border-right: 1px solid rgba(240, 240, 240, 0.07);
  mix-blend-mode: exclusion;
  transition: all 0.5s;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .header__area {
    width: 62px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header__area {
    width: 62px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__area {
    padding: 0 15px;
    width: 100%;
    height: auto;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__area {
    padding: 0 15px;
    width: 100%;
    height: auto;
  }
}

@media only screen and (max-width: 767px) {
  .header__area {
    padding: 0 15px;
    width: 100%;
    height: auto;
  }
}

.header__area button {
  display: block;
  margin-top: -58px;
  padding: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__area button {
    margin-top: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__area button {
    margin-top: 0;
  }
}

@media only screen and (max-width: 767px) {
  .header__area button {
    margin-top: 0;
  }
}

.header__area-2 {
  padding: 3px 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}

.header__area-3 {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9999;
  direction: rtl;
}

.header__area-3.sticky-3 {
  background-color: var(--white);
  background-color: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(46px);
  backdrop-filter: blur(46px);
}

.header__area-7 {
  padding: 3px 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}

.header__inner {
  padding: 50px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 9;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__inner {
    padding: 10px 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__inner {
    padding: 10px 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .header__inner {
    padding: 5px 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
}

.header__inner-2,
.header__inner-3 {
  display: grid;
  grid-template-columns: 150px auto 150px;
  padding: 0 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

  .header__inner-2,
  .header__inner-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .header__inner-2,
  .header__inner-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }
}

@media only screen and (max-width: 767px) {

  .header__inner-2,
  .header__inner-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
  }
}

.header__inner-3 {
  padding: 10px 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__inner-3 {
    padding: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__inner-3 {
    padding: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .header__inner-3 {
    padding: 20px 15px;
  }
}

.header__nav-2 {
  text-align: right;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__nav-2 {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__nav-2 {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .header__nav-2 {
    display: none;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__nav-icon {
    grid-column: -1;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__nav-icon {
    grid-column: -1;
  }
}

@media only screen and (max-width: 767px) {
  .header__nav-icon {
    grid-column: -1;
  }
}

.header__nav-icon-2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.header__nav-icon-2 .menu-icon-2::after {
  position: absolute;
  content: "";
  width: 180px;
  height: 180px;
  right: -60px;
  top: -60px;
  border: 1px solid var(--black-4);
  border-radius: 100%;
  transition: all 0.3s;
}

.header__nav-icon-3 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.header__nav-icon-3 .search-icon {
  padding-bottom: 8px;
  padding-right: 50px;
  position: relative;
  font-size: 18px;
}

.header__nav-icon-3 .search-icon:hover {
  color: var(--primary) !important;
}

.header__nav-icon-3 .search-icon::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 20px;
  right: 25px;
  top: 7px;
  background-color: var(--white-2);
}

.header__nav-icon-3 #search_close {
  display: none;
  padding-right: 55px;
}

.header__nav-icon-3 img {
  margin-top: -5px;
}

.header__nav-icon-7 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.header__nav-icon-7 .menu-icon-2::after {
  position: absolute;
  content: "";
  width: 180px;
  height: 180px;
  right: -60px;
  top: -60px;
  border: 1px solid var(--gray);
  border-radius: 100%;
  transition: all 0.3s;
}

.header__search {
  position: fixed;
  width: 300px;
  right: 60px;
  top: 90px;
  padding: 15px;
  background-color: var(--white-4);
  border-radius: 3px;
  z-index: 99991;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

@media only screen and (max-width: 767px) {
  .header__search {
    right: 10px;
    top: 100px;
  }
}

.header__search.open-search {
  opacity: 1;
  visibility: visible;
  top: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__search.open-search {
    top: 85px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__search.open-search {
    top: 85px;
  }
}

@media only screen and (max-width: 767px) {
  .header__search.open-search {
    top: 85px;
  }
}

.header__search input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--white-2);
  border-radius: 5px;
  outline: none;
  font-size: 16px;
  font-weight: 400;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__support {
    grid-column: 11/11;
    grid-row: 1;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__support {
    grid-column: 11/11;
    grid-row: 1;
  }
}

@media only screen and (max-width: 767px) {
  .header__support {
    display: none;
  }
}

.header__support p {
  width: 215px;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.3;
  color: var(--gray-2);
  text-align: right;
  transform: rotate(-90deg);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__support p {
    transform: rotate(0deg);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__support p {
    transform: rotate(0deg);
  }
}

@media only screen and (max-width: 767px) {
  .header__support p {
    transform: rotate(0deg);
  }
}

.header__support p a {
  display: inline-block;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--white);
}

.header__logo-2 {
  display: flex;
  align-items: center;
}

/*----------------------------------------*/
/*  13. OFFCANVES CSS START
/*----------------------------------------*/
.offcanvas__area {
  background-color: var(--blue-2);
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.offcanvas__body {
  display: grid;
  grid-template-columns: 0.9fr 3fr 1.3fr;
  height: 100%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__body {
    grid-template-columns: 1.2fr 3fr 1.5fr;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__body {
    grid-template-columns: 1.2fr 2fr 1.5fr;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__body {
    grid-template-columns: 1.2fr 2.3fr 1.8fr;
  }
}

@media only screen and (max-width: 767px) {
  .offcanvas__body {
    grid-template-columns: 1fr;
  }
}

.offcanvas__left {
  display: grid;
  grid-template-rows: 0.5fr 2.1fr 1fr;
  border-right: 1px solid #26434a;
}

@media only screen and (max-width: 767px) {
  .offcanvas__left {
    display: none;
  }
}

.offcanvas__mid {
  overflow: hidden;
  overflow-y: auto;
  width: 120%;
}

@media only screen and (max-width: 767px) {
  .offcanvas__mid {
    margin-top: 75px;
  }
}

.offcanvas__mid::-webkit-scrollbar {
  width: 5px;
}

.offcanvas__mid::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--black);
  border-radius: 10px;
}

.offcanvas__mid::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

.offcanvas__right {
  background-color: #26434a;
  padding: 0 50px;
  position: relative;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__right {
    padding: 0 30px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__right {
    padding: 0 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__right {
    padding: 0 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__right {
    padding: 0 15px;
  }
}

@media only screen and (max-width: 767px) {
  .offcanvas__right {
    display: none;
  }
}

.offcanvas__right .shape-1 {
  position: absolute;
  bottom: 0;
  left: 125px;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__right .shape-1 {
    left: 20px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__right .shape-1 {
    left: 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__right .shape-1 {
    left: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__right .shape-1 {
    left: 0;
  }
}

.offcanvas__right .shape-2 {
  position: absolute;
  bottom: 90px;
  right: 110px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__right .shape-2 {
    right: 30px;
  }
}

.offcanvas__logo {
  padding: 25px 0 25px 0px;
  width: 110px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__logo {
    padding: 30px 0 30px 0px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__logo {
    padding: 30px 0 30px 15px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__logo {
    padding: 30px 0 30px 15px;
  }
}

.offcanvas__social {
  padding-left: 50px;
  padding-top: 220px;
  border-bottom: 1px solid var(--black-4);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__social {
    padding-left: 50px;
    padding-top: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__social {
    padding-left: 30px;
    padding-top: 25px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__social {
    padding-left: 15px;
    padding-top: 25px;
  }
}

.offcanvas__social .social-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__social .social-title {
    font-size: 20px;
  }
}

.offcanvas__social ul li {
  padding-bottom: 2px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__social ul li {
    padding-bottom: 5px;
  }
}

.offcanvas__social ul li a {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
}

.offcanvas__social ul li a:hover {
  color: var(--gray-2);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__social ul li a {
    font-size: 16px;
  }
}

.offcanvas__links {
  padding-left: 50px;
  padding-top: 110px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__links {
    padding-left: 30px;
    padding-top: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__links {
    padding-left: 30px;
    padding-top: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__links {
    padding-left: 15px;
    padding-top: 40px;
  }
}

.offcanvas__links ul li {
  padding-bottom: 2px;
}

.offcanvas__links ul li a {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
}

.offcanvas__links ul li a:hover {
  color: var(--gray-2);
}

.offcanvas__close {
  position: absolute;
  right: 40px;
  top: 30px;
}

@media only screen and (max-width: 767px) {
  .offcanvas__close {
    right: 15px;
    top: 15px;
  }
}

.offcanvas__close button {
  font-size: 40px;
  width: 0;
  height: 0;
  color: var(--white);
  /* background: var(--blue-2); */
  /* border-radius: 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  border-bottom: 38px solid transparent;
  border-left: 38px solid transparent;
}

.offcanvas__close button:hover {
  border-bottom: 38px solid var(--white);
  border-bottom: 38px solid var(--primary);
}

@media only screen and (max-width: 767px) {
  .offcanvas__close button {
    font-size: 24px;
    width: 48px;
    height: 48px;
  }
}

.offcanvas__search {
  padding-top: 20px;
  padding-bottom: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__search {
    padding-top: 20px;
    padding-bottom: 60px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__search {
    padding-top: 20px;
    padding-bottom: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__search {
    padding-top: 20px;
    padding-bottom: 60px;
  }
}

.offcanvas__search form {
  position: relative;
}

.offcanvas__search input {
  color: #b7c4c8;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  padding: 20px 45px 20px 20px;
  border: none;
  border-bottom: 1px solid #b7c4c8;
  background-color: transparent;
  outline: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__search input {
    padding: 15px 40px 15px 15px;
  }
}

.offcanvas__search input::-moz-placeholder {
  opacity: 1;
  color: #b7c4c8;
}

.offcanvas__search input::placeholder {
  opacity: 1;
  color: #b7c4c8;
}

.offcanvas__search button {
  color: var(--white);
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
  height: 100%;
  border-radius: 0 100% 100% 0;
}

.offcanvas__contact h3 {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__contact h3 {
    font-size: 20px;
  }
}

.offcanvas__contact li {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 7px;
  max-width: 260px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__contact li {
    font-size: 16px;
  }
}

.offcanvas__contact li a {
  color: var(--white);
}

.offcanvas__contact li a:hover {
  color: var(--gray-2);
}

/*----------------------------------------*/
/*  14. HERO CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  15. SLIDER CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  16. ABOUT CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  17. SERVICE CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  18. COUNTER CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  19. WORKFLOW CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  20. BRAND CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  21. TESTIMONIAL CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  22. PORTFOLIO CSS START
/*----------------------------------------*/
.portfolio__area-2 .swiper-slide-active .sec-title {
  animation: wcfadeUp 1s 0.5s forwards;
}

.portfolio__area-2 .swiper-slide-active p {
  animation: wcfadeUp 1s 0.7s forwards;
}

.portfolio__area-2 .swiper-slide-active .btn-common-wrap {
  animation: wcfadeUp 1s 0.9s forwards;
}

.portfolio__area-3 .swiper-btn {
  display: flex;
  gap: 30px;
}

.portfolio__area-3 .swiper-btn div {
  font-size: 20px;
  color: var(--white);
  border: 1px solid var(--white);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
  z-index: 9;
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 1365px) {
  .portfolio__area-3 .swiper-btn div {
    opacity: 1;
    visibility: visible;
    top: calc(50% - 100px);
  }
}

@media (max-width: 1023px) {
  .portfolio__area-3 .swiper-btn div {
    opacity: 1;
    visibility: visible;
    top: calc(50% - 25px);
  }
}

.portfolio__area-3 .swiper-btn div:hover {
  color: var(--black-2);
  background-color: var(--white);
}

.portfolio__area-3 .swiper-btn div.pp-prev {
  left: 26px;
}

.portfolio__area-3 .swiper-btn div.pp-next {
  right: 0;
}

@media (max-width: 1365px) {
  .portfolio__area-3 .swiper-btn div.pp-next {
    right: -24px;
  }
}

.portfolio__area-3 .swiper-pagination {
  width: 120px;
  left: 370px;
  top: 0;
  bottom: unset;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: var(--white);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__area-3 .swiper-pagination {
    left: 300px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-3 .swiper-pagination {
    left: 180px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio__area-3 .swiper-pagination {
    left: -22px;
    padding-top: 10px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-3 .swiper-pagination {
    left: 0;
  }
}

.portfolio__area-3 .swiper-pagination-total {
  font-size: 22px;
  display: flex;
  justify-content: flex-end;
  margin-top: -50px;
}

.portfolio__slider-2-pagination .swiper-pagination-bullets {
  left: calc(100% - 135px);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullets {
    left: calc(100% - 60px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullets {
    left: calc(100% - 45px);
  }
}

.portfolio__slider-2-pagination .swiper-pagination-bullet {
  display: block;
  margin: 15px 10px !important;
  width: 50px;
  height: 50px;
  background: transparent;
  border: 1px solid #D6D6D6;
  opacity: 1;
  position: relative;
  transition: all 0.3s;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullet {
    margin: 10px !important;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullet {
    margin: 10px !important;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 30px;
    margin: 10px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__slider-2-pagination .swiper-pagination-bullet {
    width: 25px;
    height: 25px;
    margin: 5px !important;
  }
}

.portfolio__slider-2-pagination .swiper-pagination-bullet::after {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  left: 50%;
  top: 50%;
  border-radius: 50px;
  background-color: #D6D6D6;
  transform: translate(-50%, -50%);
}

.portfolio__slider-2-pagination .swiper-pagination-bullet-active,
.portfolio__slider-2-pagination .swiper-pagination-bullet:hover {
  border-color: var(--black-2);
}

.portfolio__slider-2-pagination .swiper-pagination-bullet-active::after,
.portfolio__slider-2-pagination .swiper-pagination-bullet:hover::after {
  background-color: var(--black-2);
}

.portfolio__slider-3:hover .swiper-btn div {
  opacity: 1;
  visibility: visible;
}

.swiper-slide-active .portfolio__title-3 {
  animation: wcfadeUp 1s 0.7s forwards;
}

/*----------------------------------------*/
/*  23. PORTFOLIO 2 CSS START
/*----------------------------------------*/
:root {
  --pink-6: #EEE5DC;
  --purple: #D9DBEB;
  --purple-2: #CCCEDE;
  --green: #81C3A3;
  --green-2: #DCE4E0;
}

@keyframes wcSpinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

.portfolio__page .swiper-slide-active .wc-btn-dark {
  animation: wcfadeUp 1s 0.7s forwards;
}

.portfolio__page .swiper-slide-active .title {
  animation: wcfadeUp 1s 0.6s forwards;
}

.portfolio__page .swiper-slide-active .shape-circle {
  animation: wcfadeUp 1s 0.2s forwards;
}

.portfolio__page .swiper-slide-active .text-stroke {
  animation: wcfadeUp 1s 0.4s forwards;
}

.portfolio__page .swiper-slide-active .sec-title {
  animation: wcfadeUp 1s 0.2s forwards;
}

.portfolio__page .swiper-slide-active .sec-text p {
  animation: wcfadeUp 1s 0.4s forwards;
}

.portfolio__page .swiper-slide-active .portfolio__service .sec-text {
  animation: wcfadeUp 1s 0.4s forwards;
}

.portfolio__page .swiper-slide-active .brand-title {
  animation: wcfadeUp 1s 0.4s forwards;
}

.portfolio__page .swiper-slide-active .brand-logo img {
  animation: wcfadeUp 1s 0.6s forwards;
}

.portfolio__page .swiper-slide-active .pp-title {
  animation: wcfadeUp 1s 0.2s forwards;
}

.portfolio__page .swiper-slide-active .pp-next {
  animation: wcfadeUp 1s 0.4s forwards;
}

.portfolio__page .swiper-slide-active .pp-prev {
  animation: wcfadeUp 1s 0.6s forwards;
}

.portfolio__page .swiper-slide-active .portfolio__service-item {
  animation: wcfadeUp 1s 0.6s forwards;
}

.portfolio__page .swiper-slide-active .ps-btn a {
  animation: wcfadeUp 1s 0.8s forwards;
}

.portfolio__page .swiper-slide-active .pf-title {
  animation: wcfadeUp 1s 0.2s forwards;
}

.portfolio__page .swiper-slide-active .contact__text {
  animation: wcfadeUp 1s 0.4s forwards;
}

.portfolio__page .swiper-slide-active .pf-contact h3 {
  animation: wcfadeUp 1s 0.4s forwards;
}

.portfolio__page .swiper-slide-active .pf-contact ul li {
  animation: wcfadeUp 1s 0.6s forwards;
}

.portfolio__page .swiper-slide-active .pf-social h3 {
  animation: wcfadeUp 1s 0.8s forwards;
}

.portfolio__page .swiper-slide-active .pf-social ul li {
  animation: wcfadeUp 1s 1s forwards;
}

.portfolio__page .swiper-slide-active .contact__form {
  animation: wcfadeUp 1s 0.6s forwards;
}

.portfolio__page .swiper-slide-active .portfolio__about-left img {
  animation: wcfadeUp 1s 0.4s forwards;
}

.portfolio__page .swiper-slide-active .portfolio__project .pp-slider-wrapper {
  animation: wcfadeUp 1s 0.4s forwards;
}

.portfolio__page .swiper-slide-active .portfolio__project .pp-slide-thumb {
  animation: wcfadeUp 1s 0.6s forwards;
}

.portfolio__page .swiper-slide-active .footer__copyright-2 p {
  animation: wcfadeUp 1s 1.2s forwards;
}

.portfolio__page .swiper-slide-active .footer-menu,
.portfolio__page .swiper-slide-active .footer-menu-2 {
  animation: wcfadeUp 1s 1.3s forwards;
}

@media (max-width: 1300px) {
  .swiper-slide .wc-btn-dark {
    animation: wcfadeUp 1s 0.7s forwards;
  }

  .swiper-slide .title {
    animation: wcfadeUp 1s 0.6s forwards;
  }

  .swiper-slide .shape-circle {
    animation: wcfadeUp 1s 0.2s forwards;
  }

  .swiper-slide .text-stroke {
    animation: wcfadeUp 1s 0.4s forwards;
  }

  .swiper-slide .sec-title {
    animation: wcfadeUp 1s 0.2s forwards;
  }

  .swiper-slide .sec-text p {
    animation: wcfadeUp 1s 0.4s forwards;
  }

  .swiper-slide .portfolio__service .sec-text {
    animation: wcfadeUp 1s 0.4s forwards;
  }

  .swiper-slide .brand-title {
    animation: wcfadeUp 1s 0.4s forwards;
  }

  .swiper-slide .brand-logo img {
    animation: wcfadeUp 1s 0.6s forwards;
  }

  .swiper-slide .pp-title {
    animation: wcfadeUp 1s 0.2s forwards;
  }

  .swiper-slide .pp-next {
    animation: wcfadeUp 1s 0.4s forwards;
  }

  .swiper-slide .pp-prev {
    animation: wcfadeUp 1s 0.6s forwards;
  }

  .swiper-slide .portfolio__service-item {
    animation: wcfadeUp 1s 0.6s forwards;
  }

  .swiper-slide .ps-btn a {
    animation: wcfadeUp 1s 0.8s forwards;
  }

  .swiper-slide .pf-title {
    animation: wcfadeUp 1s 0.2s forwards;
  }

  .swiper-slide .contact__text {
    animation: wcfadeUp 1s 0.4s forwards;
  }

  .swiper-slide .pf-contact h3 {
    animation: wcfadeUp 1s 0.4s forwards;
  }

  .swiper-slide .pf-contact ul li {
    animation: wcfadeUp 1s 0.6s forwards;
  }

  .swiper-slide .pf-social h3 {
    animation: wcfadeUp 1s 0.8s forwards;
  }

  .swiper-slide .pf-social ul li {
    animation: wcfadeUp 1s 1s forwards;
  }

  .swiper-slide .contact__form {
    animation: wcfadeUp 1s 0.6s forwards;
  }

  .swiper-slide .portfolio__about-left img {
    animation: wcfadeUp 1s 0.4s forwards;
  }

  .swiper-slide .portfolio__project .pp-slider-wrapper {
    animation: wcfadeUp 1s 0.4s forwards;
  }

  .swiper-slide .portfolio__project .pp-slide-thumb {
    animation: wcfadeUp 1s 0.6s forwards;
  }

  .swiper-slide .footer__copyright-2 p {
    animation: wcfadeUp 1s 1.2s forwards;
  }

  .swiper-slide .footer-menu,
  .swiper-slide .footer-menu-2 {
    animation: wcfadeUp 1s 1.3s forwards;
  }
}

.menu-text-pp {
  color: var(--black-2);
}

.circle-pagination button.swiper-pagination-bullet {
  position: relative;
  width: auto;
  height: auto;
  margin: 10px 0 !important;
  background-color: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .circle-pagination button.swiper-pagination-bullet {
    margin: 5px 0 !important;
  }
}

.circle-pagination .swiper-pagination-bullet span {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--black-2);
  border-radius: 100%;
}

.circle-pagination .swiper-pagination-bullet-active .circle-origin {
  animation: progress 5s backwards;
}

@keyframes progress {
  0% {
    stroke-dashoffset: 156px;
  }

  90% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -156px;
  }
}

.circle-pagination-2 .swiper-pagination-bullet {
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 1px solid var(--black-2);
  position: relative;
  margin: 10px 0 !important;
}

.circle-pagination-2 .swiper-pagination-bullet::after {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--black-2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
}

/*----------------------------------------*/
/*  24. BLOG CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  25. CTA CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  26. STORY CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  27. TEAM CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  28. SOLUTION CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  29. DEVELOPMENT CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  30. AWARD CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  31. FAQ CSS START
/*----------------------------------------*/

.header__area-9 {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9;
}

#main {
  display: flex;
}

.content {
  color: #fff;
  position: absolute;
  bottom: 120px;
  text-align: center;
  left: 50px;
  z-index: 99;
  font-size: 0.8em;
  text-transform: uppercase;
}

.content p {
  color: var(--white);
}

.content a {
  color: rgba(227, 227, 227, 0.78);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.content a:hover {
  padding-bottom: 1px;
}

.section {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__area-10 .swiper.hero10_activition {
  padding-bottom: 110px;
}

.hero__area-10 .swiper-button-prev.hero_prev {
  color: var(--black-3);
  text-transform: uppercase;
  bottom: 20px;
  position: absolute;
  top: unset;
  width: 16px;
  left: 60px;
  justify-content: space-between;
  transition: all 0.3s;
}

@media (max-width: 1365px) {
  .hero__area-10 .swiper-button-prev.hero_prev img {
    margin-left: 0;
  }
}

.hero__area-10 .swiper-button-prev.hero_prev:hover {
  color: var(--primary);
}

.hero__area-10 .swiper-button-prev.hero_prev:hover img {
  filter: invert(85%) sepia(66%) saturate(349%) hue-rotate(148deg) brightness(88%) contrast(91%);
}

@media (max-width: 1365px) {
  .hero__area-10 .swiper-button-prev.hero_prev:hover img {
    margin-left: 0;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-10 .swiper-button-prev.hero_prev {
    bottom: 25px;
  }
}

@media only screen and (max-width: 767px) {
  .hero__area-10 .swiper-button-prev.hero_prev {
    width: 75px;
    left: 50%;
    justify-content: center;
  }
}

.hero__area-10 .swiper-button-prev.hero_prev img {
  transition: all 0.3s;
  max-width: 100%;
}

@media only screen and (max-width: 767px) {
  .hero__area-10 .swiper-button-prev.hero_prev img {
    max-width: 30%;
  }
}

.hero__area-10 .swiper-button-next.hero_next {
  text-transform: uppercase;
  bottom: 20px;
  position: absolute;
  top: unset;
  right: 0;
  width: 16px;
  color: var(--black-3);
  justify-content: space-between;
  transition: all 0.3s;
}

@media (max-width: 1365px) {
  .hero__area-10 .swiper-button-next.hero_next img {
    margin-right: 0;
  }
}

.hero__area-10 .swiper-button-next.hero_next:hover {
  color: var(--primary);
}

.hero__area-10 .swiper-button-next.hero_next:hover img {
  filter: invert(85%) sepia(66%) saturate(349%) hue-rotate(148deg) brightness(88%) contrast(91%);
}

@media (max-width: 1365px) {
  .hero__area-10 .swiper-button-next.hero_next:hover img {
    margin-right: 0;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-10 .swiper-button-next.hero_next {
    bottom: 25px;
  }
}

@media only screen and (max-width: 767px) {
  .hero__area-10 .swiper-button-next.hero_next {
    width: 75px;
    right: 51% !important;
    justify-content: center;
  }
}

.hero__area-10 .swiper-button-next.hero_next img {
  transition: all 0.3s;
  max-width: 100%;
}

@media only screen and (max-width: 767px) {
  .hero__area-10 .swiper-button-next.hero_next img {
    max-width: 30%;
  }
}

.hero__area-10 .swiper-button-prev:after,
.hero__area-10 .swiper-rtl .swiper-button-next:after {
  display: none;
}

.hero__area-10 .swiper-button-next:after,
.hero__area-10 .swiper-rtl .swiper-button-prev:after {
  display: none;
}

.hero__area-10 .hero10_activition .swiper-pagination-current {
  position: relative;
  display: inline-block;
  width: 22px;
}

@media only screen and (max-width: 767px) {
  .hero__area-10 .hero10_activition .swiper-pagination-current {
    margin-left: 22px;
  }
}

.hero__area-10 .hero10_activition .swiper-pagination-current::before {
  content: "0";
  position: absolute;
  left: -5px;
}

.hero__area-10 .hero10_activition .swiper-pagination-total {
  position: relative;
  display: inline-block;
  width: 48px;
}

.hero__area-10 .hero10_activition .swiper-pagination-total::before {
  content: "0";
  position: absolute;
  left: 8px;
}

.hero__area-10 .hero10_activition .swiper-pagination {
  color: var(--black);
  width: 190px;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-10 .hero10_activition .swiper-pagination {
    bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .hero__area-10 .hero10_activition .swiper-pagination {
    width: 160px;
  }
}

.showcase4 {
  margin-bottom: 90px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase4 {
    margin-bottom: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase4 {
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .showcase4 {
    margin-bottom: 40px;
  }
}

.showcase4 .showcase5_content {
  position: absolute;
  bottom: 50px;
  left: 50px;
  color: var(--white);
}

.showcase4__thumb {
  position: relative;
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 500px;
}

.showcase4__thumb img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 130%;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .showcase4__thumb {
    height: 400px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase4__thumb {
    height: 400px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase4__thumb {
    height: unset;
  }

  .showcase4__thumb img {
    position: unset;
    height: auto;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase4__thumb {
    height: unset;
  }

  .showcase4__thumb img {
    position: unset;
    height: auto;
  }
}

.hero__area-12 .swiper-horizontal>.swiper-pagination-bullets,
.hero__area-12 .swiper-pagination-bullets.swiper-pagination-horizontal,
.hero__area-12 .swiper-pagination-custom,
.hero__area-12 .swiper-pagination-fraction {
  bottom: 81px;
  left: 0;
  width: 100%;
}

.hero__area-12 .swiper-pagination-bullet-active {
  outline: 1px solid #121212;
  outline-offset: 4px;
  background: #121212;
}

.hero__area-12 .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.hero__area-12 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 11px;
}

.hero__area-12 .gallery-thumbs .swiper-slide-active {
  opacity: 1;
}

.hero__area-12 .gallery-thumbs .swiper-slide img {
  width: 150px;
}

.hero__area-12 .gallery-slider .swiper-slide {
  width: auto;
}

.showcase5_title {
  font-size: 80px !important;
  margin-bottom: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase5_title {
    font-size: 30px !important;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .showcase5_title {
    font-size: 20px !important;
    margin-bottom: 20px;
  }
}

.showcase5_bottom {
  padding-left: 38px;
  position: relative;
  z-index: 2;
}

.showcase5_bottom span {
  color: var(--white);
}

.showcase5__content img {
  margin-bottom: 35px;
}

.showcase5__content p {
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  text-align: center;
  color: var(--black-3);
  position: relative;
  padding-bottom: 190px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase5__content p {
    font-size: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase5__content p {
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .showcase5__content p {
    font-size: 20px;
    padding-bottom: 100px;
  }
}

.showcase5__content p::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100px;
  bottom: 0px;
  left: 50%;
  background-color: var(--black-2);
}

@media only screen and (max-width: 767px) {
  .showcase5__content p::after {
    height: 50px;
  }
}

.hero__area-15 .swiper-container {
  width: calc(100% - 160px);
  height: calc(100vh - 120px);
  float: left;
  transition: opacity 0.6s ease, transform 0.3s ease;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-15 .swiper-container {
    height: calc(100vh - 80px);
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-15 .swiper-container {
    width: calc(100% - 130px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-15 .swiper-container {
    height: calc(100vh - 60px);
    width: calc(100% - 90px);
  }
}

@media only screen and (max-width: 767px) {
  .hero__area-15 .swiper-container {
    width: 100%;
    height: calc(100vh - 60px);
  }
}

.hero__area-15 .main-slider .swiper-image {
  width: 100%;
  height: 100%;
}

.hero__area-15 .main-slider .swiper-pagination {
  bottom: 60px;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__area-15 .main-slider .swiper-pagination {
    bottom: -40px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-15 .main-slider .swiper-pagination {
    bottom: -40px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-15 .main-slider .swiper-pagination {
    bottom: -40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-15 .main-slider .swiper-pagination {
    bottom: -40px;
  }
}

@media only screen and (max-width: 767px) {
  .hero__area-15 .main-slider .swiper-pagination {
    bottom: -40px;
  }
}

.hero__area-15 .main-slider .swiper-pagination-bullet {
  margin: 0 10px;
  width: 6px;
  height: 6px;
}

.hero__area-15 .main-slider .swiper-pagination-bullet-active {
  outline: 1px solid var(--black-2);
  background: var(--black-2);
  outline-offset: 6px;
}

.hero__area-15 .swiper-slide {
  overflow: hidden;
}

.hero__area-15 .swiper-slide.swiper-slide-active .gallary__thumb {
  background-color: transparent;
}

.hero__area-15 .swiper-slide.swiper-slide-active .gallary12__content {
  opacity: 1;
}

.hero__area-15 .swiper-container.thumb-slider {
  width: 160px;
  overflow: hidden;
  height: calc(100vh - 220px);
  margin-top: 120px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__area-15 .swiper-container.thumb-slider {
    width: 130px;
    margin-top: 110px;
    height: calc(100vh - 180px);
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__area-15 .swiper-container.thumb-slider {
    width: 130px;
    margin-top: 100px;
    height: calc(100vh - 180px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__area-15 .swiper-container.thumb-slider {
    width: 90px;
    margin-top: 110px;
    height: calc(100vh - 180px);
  }
}

@media only screen and (max-width: 767px) {
  .hero__area-15 .swiper-container.thumb-slider {
    width: 100%;
    margin-top: 30px;
    height: 200px;
    display: none;
  }
}

.hero__area-15 .swiper-container.thumb-slider .swiper-slide {
  cursor: pointer;
}

.showcase__top-16 {
  padding: 200px 30px 65px;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .showcase__top-16 {
    padding: 160px 30px 65px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase__top-16 {
    padding: 160px 30px 65px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__top-16 {
    padding: 160px 30px 65px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__top-16 {
    padding: 160px 30px 60px;
  }
}

@media only screen and (max-width: 767px) {
  .showcase__top-16 {
    padding: 140px 30px 40px;
  }
}

.showcase__content-16 a {
  position: relative;
  display: inline-block;
}

.showcase__content-16 img {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
  object-fit: cover;
}

.showcase__info-16 {
  position: absolute;
  bottom: 50px;
  left: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__info-16 {
    bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .showcase__info-16 {
    bottom: 20px;
    left: 20px;
  }
}

.showcase__title-16 {
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: 35px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase__title-16 {
    font-size: 60px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__title-16 {
    font-size: 48px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__title-16 {
    font-size: 36px;
  }
}

@media only screen and (max-width: 767px) {
  .showcase__title-16 {
    font-size: 30px;
    padding-bottom: 10px;
  }

  .showcase__title-16 br {
    display: block;
  }
}

.showcase__title-16 span {
  display: inline-block;
  text-indent: 100px;
  font-family: "newYork";
  position: relative;
}

@media only screen and (max-width: 767px) {
  .showcase__title-16 span {
    text-indent: 30px;
  }
}

.showcase__title-16 span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 70px;
  background-color: var(--white);
}

@media only screen and (max-width: 767px) {
  .showcase__title-16 span::before {
    width: 20px;
  }
}

.showcase__sub-title-16 {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white);
  padding-left: 100px;
  text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
  .showcase__sub-title-16 {
    padding-left: 30px;
  }
}

.showcase_info {
  display: block;
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 9999;
  background-color: var(--white);
  margin-bottom: -3px;
}

.showcase__info-16 {
  position: absolute;
  bottom: 30%;
  left: 50px;
}

.showcase__image-16 {
  overflow: hidden;
  height: 100vh;
}

.showcase__content-16 {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .hero__area-10 .hero10_activition .swiper-pagination-current {
  color: var(--white);
}

.dark .hero__area-10 .hero10_activition .swiper-pagination-total {
  color: var(--white);
}

.dark .hero__area-10 .swiper-button-prev.hero_prev {
  color: var(--white);
}

.dark .hero__area-10 .swiper-button-prev.hero_prev:hover {
  color: var(--gray-3);
}

.dark .hero__area-10 .swiper-button-prev.hero_prev img {
  filter: invert(1);
}

.dark .hero__area-10 .swiper-button-next.hero_next {
  color: var(--white);
}

.dark .hero__area-10 .swiper-button-next.hero_next:hover {
  color: var(--gray-3);
}

.dark .hero__area-10 .swiper-button-next.hero_next img {
  filter: invert(1);
}

.dark .hero__area-15 .main-slider .swiper-pagination-bullet {
  background: var(--white);
  opacity: 0.5;
}

.dark .hero__area-15 .main-slider .swiper-pagination-bullet-active {
  outline: 1px solid var(--white);
  background: var(--white);
  opacity: 1;
}

/*----------------------------------------*/
/*  32. CAREER CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  33. FEATURE CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  34. CONTACT CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  35. PRICE CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  36. 404 CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  37. HOME 5 CSS START
/*----------------------------------------*/
:root {
  --white-6: #d7d7d7;
  --white-7: #B7B7C5;
  --black-14: #323438;
  --lime: #745EFF;
  --lime-2: #5547F5;
  --gray-16: #6B6B6B;
  --gray-17: #F7F7FC;
  --gray-18: #999999;
  --gray-20: #D7D7D7;
  --gray-21: #F2F2F8;
  --gray-22: #FCFCFE;
  --gray-23: #ECECF3;
  --gray-24: #ECECF4;
  --gray-25: #D3D3D3;
}

.header__inner-5 {
  padding: 14px 50px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s;
}

@media only screen and (max-width: 767px) {
  .header__inner-5 {
    padding: 20px 15px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__inner-5 {
    padding: 25px 15px 22px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__inner-5 {
    padding: 25px 15px 22px;
  }
}

.header__area-5 {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 99;
}

.header__area-5.sticky-5 {
  background-color: var(--white);
  border-bottom: 1px solid var(--white-2);
}

.header__area-5.sticky-5 .header__inner-5 {
  padding: 20px 50px;
}

@media (max-width: 1200px) {
  .header__area-5.sticky-5 .header__inner-5 {
    padding: 20px 15px;
  }
}

.menu-text-5 {
  color: var(--black-2);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  padding-right: 10px;
}

.menu-text-pp {
  color: var(--black-2);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  padding-right: 10px;
}

.footer__area-5 {
  padding: 79px 0px 72px;
  text-align: center;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__area-5 {
    padding: 60px 0px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__area-5 {
    padding: 50px 0px;
  }
}

@media only screen and (max-width: 767px) {
  .footer__area-5 {
    padding: 50px 0px;
  }
}

.footer__menu-5 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  flex-wrap: wrap;
}

@media only screen and (max-width: 767px) {
  .footer__menu-5 {
    gap: 25px;
  }
}

.footer__menu-5 li a {
  color: var(--gray-2);
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  transition: all 0.5s;
}

.footer__menu-5 li a .menu-text {
  display: flex;
  overflow: hidden;
  text-shadow: 0 16px 0 var(--black-2);
}

.footer__menu-5 li a .menu-text span {
  display: block;
  backface-visibility: hidden;
  font-style: normal;
  transition: transform 0.4s ease;
  transform: translateY(var(--m)) translateZ(0);
}

.footer__menu-5 li a .menu-text span:nth-child(1) {
  transition-delay: 0.05s;
}

.footer__menu-5 li a .menu-text span:nth-child(2) {
  transition-delay: 0.1s;
}

.footer__menu-5 li a .menu-text span:nth-child(3) {
  transition-delay: 0.15s;
}

.footer__menu-5 li a .menu-text span:nth-child(4) {
  transition-delay: 0.2s;
}

.footer__menu-5 li a .menu-text span:nth-child(5) {
  transition-delay: 0.25s;
}

.footer__menu-5 li a .menu-text span:nth-child(6) {
  transition-delay: 0.3s;
}

.footer__menu-5 li a .menu-text span:nth-child(7) {
  transition-delay: 0.35s;
}

.footer__menu-5 li a .menu-text span:nth-child(8) {
  transition-delay: 0.4s;
}

.footer__menu-5 li a .menu-text span:nth-child(9) {
  transition-delay: 0.45s;
}

.footer__menu-5 li a .menu-text span:nth-child(10) {
  transition-delay: 0.5s;
}

.footer__menu-5 li a .menu-text span:nth-child(11) {
  transition-delay: 0.55s;
}

.footer__menu-5 li a .menu-text span:nth-child(12) {
  transition-delay: 0.6s;
}

.footer__menu-5 li a .menu-text span:nth-child(13) {
  transition-delay: 0.65s;
}

.footer__menu-5 li a .menu-text span:nth-child(14) {
  transition-delay: 0.7s;
}

.footer__menu-5 li a .menu-text span:nth-child(15) {
  transition-delay: 0.75s;
}

.footer__menu-5 li a .menu-text span:nth-child(16) {
  transition-delay: 0.8s;
}

.footer__menu-5 li a .menu-text span:nth-child(17) {
  transition-delay: 0.85s;
}

.footer__menu-5 li a .menu-text span:nth-child(18) {
  transition-delay: 0.9s;
}

.footer__menu-5 li a .menu-text span:nth-child(19) {
  transition-delay: 0.95s;
}

.footer__menu-5 li a .menu-text span:nth-child(20) {
  transition-delay: 1s;
}

.footer__menu-5 li a .menu-text span:nth-child(21) {
  transition-delay: 1.05s;
}

.footer__menu-5 li a .menu-text span:nth-child(22) {
  transition-delay: 1.1s;
}

.footer__menu-5 li a .menu-text span:nth-child(23) {
  transition-delay: 1.15s;
}

.footer__menu-5 li a .menu-text span:nth-child(24) {
  transition-delay: 1.2s;
}

.footer__menu-5 li a .menu-text span:nth-child(25) {
  transition-delay: 1.25s;
}

.footer__menu-5 li a .menu-text span:nth-child(26) {
  transition-delay: 1.3s;
}

.footer__menu-5 li a .menu-text span:nth-child(27) {
  transition-delay: 1.35s;
}

.footer__menu-5 li a .menu-text span:nth-child(28) {
  transition-delay: 1.4s;
}

.footer__menu-5 li a .menu-text span:nth-child(29) {
  transition-delay: 1.45s;
}

.footer__menu-5 li a .menu-text span:nth-child(30) {
  transition-delay: 1.5s;
}

.footer__menu-5 li a .menu-text span:nth-child(31) {
  transition-delay: 1.55s;
}

.footer__menu-5 li a .menu-text span:nth-child(32) {
  transition-delay: 1.6s;
}

.footer__menu-5 li a .menu-text span:nth-child(33) {
  transition-delay: 1.65s;
}

.footer__menu-5 li a .menu-text span:nth-child(34) {
  transition-delay: 1.7s;
}

.footer__menu-5 li a .menu-text span:nth-child(35) {
  transition-delay: 1.75s;
}

.footer__menu-5 li a .menu-text span:nth-child(36) {
  transition-delay: 1.8s;
}

.footer__menu-5 li a .menu-text span:nth-child(37) {
  transition-delay: 1.85s;
}

.footer__menu-5 li a .menu-text span:nth-child(38) {
  transition-delay: 1.9s;
}

.footer__menu-5 li a .menu-text span:nth-child(39) {
  transition-delay: 1.95s;
}

.footer__menu-5 li a .menu-text span:nth-child(40) {
  transition-delay: 2s;
}

.footer__menu-5 li a .menu-text span:nth-child(41) {
  transition-delay: 2.05s;
}

.footer__menu-5 li a .menu-text span:nth-child(42) {
  transition-delay: 2.1s;
}

.footer__menu-5 li a .menu-text span:nth-child(43) {
  transition-delay: 2.15s;
}

.footer__menu-5 li a .menu-text span:nth-child(44) {
  transition-delay: 2.2s;
}

.footer__menu-5 li a .menu-text span:nth-child(45) {
  transition-delay: 2.25s;
}

.footer__menu-5 li a .menu-text span:nth-child(46) {
  transition-delay: 2.3s;
}

.footer__menu-5 li a .menu-text span:nth-child(47) {
  transition-delay: 2.35s;
}

.footer__menu-5 li a .menu-text span:nth-child(48) {
  transition-delay: 2.4s;
}

.footer__menu-5 li a .menu-text span:nth-child(49) {
  transition-delay: 2.45s;
}

.footer__menu-5 li a:hover {
  --y: -4px;
}

.footer__menu-5 li a:hover span {
  --m: calc(16px * -1);
}

.footer__copyright-4 {
  color: var(--gray-2);
  font-size: 16px;
  font-weight: 400;
}

.footer__copyright-4 a {
  color: var(--black-2);
}

.footer__copyright-4 a:hover {
  color: var(--gray);
}

/*----------------------------------------*/
/*  38. FOOTER CSS START
/*----------------------------------------*/
.footer__area {
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  .footer__area {
    /* margin-top: 40px; */
  }
}

.footer__area-2 {
  background-image: url(../imgs/shape/4.png);
  background-repeat: no-repeat;
  background-position: top right;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__area-2 {
    background-size: 380px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__area-2 {
    background-size: 350px;
  }
}

@media only screen and (max-width: 767px) {
  .footer__area-2 {
    background-size: 200px;
  }
}

.footer__area-3 {
  background-color: var(--black-2);
}

.footer__row {
  margin-left: -500px;
}

@media only screen and (max-width: 767px) {
  .footer__row {
    margin-left: 0;
    margin-right: 0;
  }
}

.footer__top {
  text-align: right;
}

.footer__top img {
  margin-bottom: -500px;
  width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__top img {
    margin-bottom: -300px;
    width: 90%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__top img {
    margin-bottom: -250px;
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .footer__top img {
    margin-bottom: 0;
    width: 100%;
  }
}

.footer__top-2 {
  padding-bottom: 70px;
}

@media only screen and (max-width: 767px) {
  .footer__top-2 {
    padding-bottom: 50px;
  }
}

.footer__top-3 {
  border-bottom: 1px solid var(--black-6);
}

.footer__top-wrapper-3 {
  padding: 0 50px;
  display: grid;
  grid-template-columns: 30% 10% auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__top-wrapper-3 {
    grid-template-columns: 35% 15% auto;
    gap: 20px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__top-wrapper-3 {
    grid-template-columns: 35% 20% auto;
    gap: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__top-wrapper-3 {
    grid-template-columns: 35% 25% auto;
  }
}

@media only screen and (max-width: 767px) {
  .footer__top-wrapper-3 {
    padding: 0 15px;
    grid-template-columns: 1fr;
  }
}

.footer__middle-2 {
  border-top: 1px solid var(--white-2);
  border-bottom: 1px solid var(--white-2);
  padding: 95px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__middle-2 {
    padding: 60px 0;
  }
}

@media only screen and (max-width: 767px) {
  .footer__middle-2 {
    padding: 50px 0;
  }
}

.footer__location-2 {
  display: flex;
  gap: 100px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__location-2 {
    gap: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__location-2 {
    flex-direction: column;
    gap: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .footer__location-2 {
    flex-direction: column;
    gap: 30px;
  }
}

.footer__location-2 .location h3 {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--black-2);
  padding-bottom: 10px;
}

@media only screen and (max-width: 767px) {
  .footer__btm {
    background-color: var(--blue-2);
  }

  .footer__btm .container {
    padding: 0;
    background-color: var(--blue-2);
  }
}

.footer__btm-2 {
  padding: 50px 0;
}

@media only screen and (max-width: 767px) {
  .footer__btm-2 {
    padding: 30px 0;
  }

  .footer__btm-2 .row {
    flex-direction: column-reverse;
  }
}

.footer__btm-3 {
  padding: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__btm-3 {
    padding: 40px 15px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__btm-3 {
    padding: 40px 15px;
  }

  .footer__btm-3 .row {
    flex-direction: column-reverse;
  }
}

@media only screen and (max-width: 767px) {
  .footer__btm-3 {
    padding: 30px 10px;
  }

  .footer__btm-3 .row {
    flex-direction: column-reverse;
  }
}

.footer__inner {
  background-color: #16393f;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0px -110px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding-left: 580px;
  padding-top: 60px;
  position: relative;
  z-index: 9;
}

@media only screen and (min-width: 1920px) {
  .footer__inner {
    background-position: 0px 30%;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer__inner {
    padding-left: 550px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .footer__inner {
    background-position: 0px -97px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__inner {
    padding-left: 580px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__inner {
    padding-top: 100px;
    padding-left: 550px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__inner {
    padding-left: 550px;
    padding-top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .footer__inner {
    background-color: transparent;
    background: none;
    padding-left: 0;
    padding-top: 60px;
    grid-template-columns: 1fr;
  }
}

.footer__logo {
  margin-bottom: 30px;
}

.footer__logo-3 img {
  margin-bottom: 30px;
}

.footer__logo-3 p {
  max-width: 310px;
  color: var(--white);
}

.footer__sub-title {
  max-width: 850px;
  font-weight: 300;
  font-size: 36px;
  line-height: 1.3;
  color: var(--black-3);
  padding-top: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__sub-title {
    font-size: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .footer__sub-title {
    font-size: 24px;
  }
}

.footer__widget {
  grid-column: span 4;
  padding: 0px 0 40px 0;
}

@media only screen and (min-width: 1920px) {
  .footer__widget {
    padding: 20px 0 110px 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__widget {
    grid-column: 1/5;
    padding: 0 0 50px 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__widget {
    grid-column: 1/6;
    padding: 0 0 50px 0;
  }
}

@media only screen and (max-width: 767px) {
  .footer__widget {
    padding: 0 0 50px 0;
    grid-column: span 4;
    text-align: center;
  }
}

.footer__widget p {
  max-width: 310px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
  margin-bottom: 30px;
}

@media only screen and (max-width: 767px) {
  .footer__widget p {
    max-width: unset;
  }
}

.footer__widget-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--white);
  padding-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .footer__widget-title {
    text-align: center;
  }
}

.footer__widget-2 {
  grid-column: span 2;
  padding: 0px 0 40px 0;
}

@media only screen and (min-width: 1920px) {
  .footer__widget-2 {
    padding: 40px 0 40px 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__widget-2 {
    grid-column: 6/9;
    padding: 0 0 50px 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__widget-2 {
    grid-column: 7/-1;
    padding: 0 0 50px 0;
  }
}

@media only screen and (max-width: 767px) {
  .footer__widget-2 {
    padding: 0 0 50px 0;
    grid-column: span 4;
    text-align: center;
  }
}

.footer__widget-3 {
  grid-column: span 2;
  padding: 0px 0 40px 0;
  margin-left: 30px;
}

@media only screen and (min-width: 1920px) {
  .footer__widget-3 {
    padding: 40px 0 40px 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__widget-3 {
    grid-column: 9/-1;
    padding: 0 50px 50px 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__widget-3 {
    grid-column: span 6;
    padding: 50px 60px 0 0;
  }
}

@media only screen and (max-width: 767px) {
  .footer__widget-3 {
    padding: 0 0 0px 0;
  }
}

.footer__widget-4 {
  grid-column: span 4;
  grid-row: span 2;
  padding: 0px 30px 30px 70px;
  text-align: center;
  margin-left: 20px;
}

@media only screen and (min-width: 1920px) {
  .footer__widget-4 {
    padding: 99px 30px 30px 70px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer__widget-4 {
    padding: 0px 30px 30px 70px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__widget-4 {
    padding: 0px 40px 0px 70px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__widget-4 {
    grid-column: 7/-1;
    padding: 50px;
    margin-left: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__widget-4 {
    grid-column: span 6;
    padding: 50px 30px;
    margin-left: 0;
  }
}

@media only screen and (max-width: 767px) {
  .footer__widget-4 {
    padding: 30px;
    margin-left: 0;
  }
}

.footer__widget-4 .project-title {
  font-weight: 400;
  font-size: 36px;
  line-height: 1.3;
  color: var(--white);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__widget-4 .project-title {
    font-size: 30px;
  }
}

.footer__widget-4 a {
  color: var(--white);
  border-color: var(--secondary);
  margin: 0 auto;
  margin-bottom: 20px;
}

.footer__widget-4 .contact-time {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--white);
  padding-bottom: 3px;
}

.footer__widget-4 .contact-day {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--white);
}

.footer__social li {
  display: inline-block;
  padding-right: 15px;
}

.footer__social li a {
  display: inline-block;
  color: var(--white);
  font-size: 20px;
}

.footer__social li a:hover {
  color: var(--white);
}

.footer__social-3 {
  border-left: 1px solid var(--black-6);
  border-right: 1px solid var(--black-6);
}

@media only screen and (max-width: 767px) {
  .footer__social-3 {
    margin-top: 50px;
    border-top: 1px solid var(--black-6);
    border-bottom: 1px solid var(--black-6);
  }
}

.footer__social-3 li {
  display: block;
  border-bottom: 1px solid var(--black-6);
}

.footer__social-3 li:last-child {
  border-bottom: 0;
}

.footer__social-3 li a {
  display: block;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  padding: 38px 0;
  background-color: transparent;
  transition: all 0.3s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__social-3 li a {
    padding: 30px 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__social-3 li a {
    padding: 30px 0;
  }
}

@media only screen and (max-width: 767px) {
  .footer__social-3 li a {
    padding: 30px 0;
  }
}

.footer__social-3 li a:hover {
  color: var(--black-2);
  background-color: var(--white);
}

.footer__link li {
  display: block;
  padding-bottom: 15px;
}

.footer__link li a {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-2);
  line-height: 18px;
  text-transform: capitalize;
  color: var(--white);
}

.footer__link li a:hover {
  color: var(--primary);
}

.footer__contact {
  display: block;
  padding-bottom: 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-2);
}

.footer__contact li {
  padding-bottom: 15px;
  color: var(--white);
}

.footer__contact li a {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-2);
}

.footer__contact li a.phone {
  color: var(--white);
  position: relative;
}

.footer__contact li a.phone::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0px;
  background-color: var(--white);
  transition: all 0.3s;
}

.footer__contact li a.phone:hover::after {
  width: 0%;
}

.footer__contact li a:hover {
  color: var(--white);
}

.footer__contact-3 {
  text-align: right;
  padding-top: 90px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__contact-3 {
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__contact-3 {
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__contact-3 {
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

@media only screen and (max-width: 767px) {
  .footer__contact-3 {
    text-align: center;
    margin-bottom: 50px;
    padding-top: 60px;
  }
}

.footer__contact-3 a {
  font-weight: 400;
  font-size: 180px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer__contact-3 a {
    font-size: 140px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__contact-3 a {
    font-size: 90px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__contact-3 a {
    font-size: 72px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__contact-3 a {
    font-size: 48px;
  }
}

@media only screen and (max-width: 767px) {
  .footer__contact-3 a {
    font-size: 50px;
  }
}

.footer__copyright {
  grid-column: span 4;
  border-top: 1px solid var(--primary);
  margin-left: -66px;
  padding: 35px 0 35px 66px;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer__copyright {
    margin-left: -35px;
    padding: 35px 0 35px 35px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__copyright {
    margin-left: -54px;
    padding: 35px 0 35px 54px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__copyright {
    border-top: 0;
    margin-left: 0;
    grid-column: 1/5;
    padding: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__copyright {
    grid-column: 1/-1;
    text-align: center;
    border-top: 0;
  }
}

@media only screen and (max-width: 767px) {
  .footer__copyright {
    grid-column: 1/-1;
    grid-row: 7;
    text-align: center;
    border-top: 0;
    padding-top: 0;
  }
}

.footer__copyright p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-2);
  max-width: 383px;
  color: var(--white);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__copyright p {
    max-width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .footer__copyright p {
    max-width: 100%;
  }
}

.footer__copyright p a {
  color: var(--white);
}

.footer__copyright p a:hover {
  color: var(--gray);
}

.footer__copyright-2 p {
  max-width: 235px;
}

@media only screen and (max-width: 767px) {
  .footer__copyright-2 p {
    max-width: 100%;
    padding-top: 50px;
    text-align: center;
  }
}

.footer__copyright-2 p a {
  color: var(--black-2);
}

.footer__copyright-2 p a:hover {
  color: var(--white);
}

.footer__copyright-3 p {
  color: var(--white);
  max-width: 235px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__copyright-3 p {
    max-width: 100%;
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .footer__copyright-3 p {
    max-width: 100%;
    text-align: center;
  }
}

.footer__copyright-3 p a {
  color: var(--white);
}

.footer__copyright-3 p a:hover {
  color: var(--white);
}

.footer__copyright-8 {
  padding: 20px 100px;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .footer__copyright-8 {
    padding: 20px 50px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__copyright-8 {
    padding: 20px 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__copyright-8 {
    padding: 20px 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__copyright-8 {
    padding: 20px 15px;
  }
}

.footer__copyright-8 p {
  max-width: 235px;
  line-height: 1.4;
}

@media only screen and (max-width: 767px) {
  .footer__copyright-8 p {
    max-width: 100%;
    text-align: center;
  }
}

.footer__copyright-8 p a {
  color: var(--black-2);
}

.footer__copyright-8 p a:hover {
  color: var(--white);
}

.footer__nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media only screen and (max-width: 767px) {
  .footer__nav {
    justify-content: center;
  }
}

.footer__nav-2 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__nav-2 {
    justify-content: center;
  }
}

@media only screen and (max-width: 767px) {
  .footer__nav-2 {
    justify-content: center;
  }
}

.footer__subscribe {
  grid-column: span 4;
  border-top: 1px solid var(--primary);
  padding: 35px 0;
  margin-right: -60px;
  padding-right: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__subscribe {
    grid-column: 1/7;
    grid-row: 2;
    padding: 0 40px 0 0;
    border-top: 0;
    margin-right: 0;
    display: flex;
    align-items: center;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__subscribe {
    grid-column: span 6;
    grid-row: 3;
    border-top: 0;
    padding: 0 20px 0 0;
    margin-right: 0;
  }
}

@media only screen and (max-width: 767px) {
  .footer__subscribe {
    margin-right: 0;
    padding-right: 0;
    border-top: 0;
  }
}

.footer__subscribe form {
  position: relative;
  max-width: 450px;
  width: 100%;
  margin-left: auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__subscribe form {
    max-width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .footer__subscribe form {
    max-width: 100%;
  }
}

.footer__subscribe input {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--white);
  background-color: var(--blue);
  width: 100%;
  border: none;
  border-radius: 0;
  outline: none;
  padding: 21px 50px 21px 15px;
}

.footer__subscribe input::-moz-placeholder {
  opacity: 1;
  color: var(--white);
}

.footer__subscribe input::placeholder {
  opacity: 1;
  color: var(--white);
}

.footer__subscribe .subs-btn {
  position: absolute;
  right: 20px;
  top: 16px;
  background-color: transparent;
  border: none;
  color: var(--white);
}

.footer__subscribe-2 {
  position: relative;
  padding-left: 90px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__subscribe-2 {
    padding-left: 0;
    display: flex;
    align-items: center;
    height: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .footer__subscribe-2 {
    padding-left: 0;
    margin-top: 50px;
  }
}

.footer__subscribe-2::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 120px;
  left: -20px;
  top: -15px;
  background-color: var(--white-2);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__subscribe-2::before {
    height: 100%;
    top: 0;
  }
}

.footer__subscribe-2 input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--black-2);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.5;
  color: var(--black-2);
  padding: 20px 80px 20px 0;
  outline: none;
}

@media only screen and (max-width: 767px) {
  .footer__subscribe-2 input {
    font-size: 18px;
  }
}

.footer__subscribe-2 input::-moz-placeholder {
  color: var(--black-2);
  opacity: 1;
}

.footer__subscribe-2 input::placeholder {
  color: var(--black-2);
  opacity: 1;
}

.footer__subscribe-2 form {
  position: relative;
}

.footer__subscribe-2 .submit {
  position: absolute;
  right: 0;
  top: 10px;
  background: transparent;
  border: none;
}

@media only screen and (max-width: 767px) {
  .footer__subscribe-2 .submit {
    top: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .footer__subscribe-2 .submit img {
    width: 45px;
  }
}

/*----------------------------------------*/
/*  00. PRELOADER CSS START
/*----------------------------------------*/
@keyframes wcLoading {
  0% {
    transform: scaleY(0.1);
    background: var(--white);
  }

  50% {
    transform: scaleY(1);
    background: var(--primary);
  }

  100% {
    transform: scaleY(0.1);
    background: transparent;
  }
}

.preloader {
  width: 100%;
  height: 100vh;
  background-color: var(--black-2);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

:root {
  --white-6: #d7d7d7;
  --white-7: #B7B7C5;
  --black-14: #323438;
  --black-15: #2C2C2C;
  --lime: #745EFF;
  --lime-2: #5547F5;
  --gray-16: #6B6B6B;
  --gray-17: #F7F7FC;
  --gray-18: #999999;
  --gray-20: #D7D7D7;
  --gray-21: #F2F2F8;
  --gray-22: #FCFCFE;
  --gray-23: #ECECF3;
  --gray-24: #ECECF4;
}

main {
  overflow: hidden;
}

.footer__area-6 {
  overflow: hidden;
  background-color: var(--gray-17);
}

.footer__top-6 {
  display: flex;
  justify-content: space-between;
}

@media only screen and (max-width: 767px) {
  .footer__top-6 {
    flex-wrap: wrap;
    padding-bottom: 25px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__top-6 {
    flex-wrap: wrap;
    padding-bottom: 5px;
  }
}

.footer__social-6 {
  display: flex;
  gap: 20px;
}

.footer__social-6 li a {
  color: var(--gray-2);
  font-size: 18px;
  transition: all 0.3s;
}

.footer__social-6 li a:hover {
  color: var(--black-2);
}

.footer__info-6 li {
  color: var(--black-13);
  font-size: 16px;
  margin-bottom: 15px;
}

.footer__info-6 li a {
  color: var(--black-13);
  transition: all 0.5s;
}

.footer__info-6 li a:hover {
  color: var(--black-2);
}

.footer__info-6 li a.phone {
  color: var(--black-2);
  position: relative;
}

.footer__info-6 li a.phone::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0px;
  background-color: var(--white);
  transition: all 0.3s;
}

.footer__info-6 li a.phone:hover::after {
  width: 0%;
}

.footer__info-6 li a.phone::after {
  background-color: var(--black-2);
}

.footer__link-6 li {
  margin-bottom: 8px;
}

.footer__link-6 li a {
  color: var(--black-13);
  transition: all 0.5s;
}

.footer__link-6 li a:hover {
  color: var(--black-2);
}

.footer__item-title {
  font-size: 20px;
  color: var(--black-2);
  font-weight: 600;
  line-height: 1.3;
  padding-bottom: 20px;
  text-transform: capitalize;
}

@media only screen and (max-width: 767px) {
  .footer__item-6 {
    margin-bottom: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6 {
    margin-bottom: 50px;
  }
}

.footer__item-6:nth-child(1) {
  width: 25%;
}

@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(1) {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(1) {
    width: 50%;
    padding-right: 30px;
  }
}

.footer__item-6:nth-child(2) {
  width: 14%;
}

@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(2) {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(2) {
    width: 50%;
  }
}

.footer__item-6:nth-child(3) {
  width: 20%;
}

@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(3) {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(3) {
    width: 50%;
    padding-right: 30px;
  }
}

.footer__item-6:nth-child(4) {
  width: 28%;
}

@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(4) {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(4) {
    width: 50%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__item-6:nth-child(4) {
    width: 33%;
  }
}

.footer__item-6 p {
  padding-bottom: 20px;
  color: var(--gray-2);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__item-6 p br {
    display: none;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__item-6 p br {
    display: none;
  }
}

.footer__item-6-social a:hover {
  color: var(--black-2);
}

.footer__btm-6 {
  border-top: 1px solid var(--gray-24);
  padding-top: 40px;
  padding-bottom: 43px;
}

.footer__newsletter-6 {
  background-color: var(--gray-24);
  display: flex;
  border-radius: 5px;
  position: relative;
}

.footer__newsletter-6 input {
  width: 100%;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 16px 50px 16px 20px;
}

.footer__newsletter-6 input::-moz-placeholder {
  font-size: 14px;
  color: var(--white-7);
  font-weight: 400;
}

.footer__newsletter-6 input::placeholder {
  font-size: 14px;
  color: var(--white-7);
  font-weight: 400;
}

.footer__newsletter-6 button {
  position: absolute;
  right: 20px;
  top: 15px;
}

.footer__copyright-6 {
  color: var(--black-13);
}

.footer__copyright-6 p a {
  color: var(--black-2);
}

.footer__copyright-6 p a:hover {
  color: var(--lime);
}

.footer__chekbox {
  display: flex;
  gap: 15px;
  margin-top: 18px;
}

.footer__chekbox input {
  width: 30px;
  height: 30px;
}

.footer__chekbox label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--black-3);
}

@keyframes leftmove {
  0% {
    margin-left: 0;
  }

  50% {
    margin-left: -20px;
  }

  100% {
    margin-left: 0;
  }
}

@keyframes rightmove {
  0% {
    margin-right: 0;
  }

  50% {
    margin-right: 30px;
  }

  100% {
    margin-right: 0;
  }
}

@keyframes move {
  0% {
    margin-bottom: 0;
  }

  50% {
    margin-bottom: -20px;
  }

  100% {
    margin-bottom: 0;
  }
}

@keyframes move {
  0% {
    margin-top: 0;
  }

  50% {
    margin-top: -20px;
  }

  100% {
    margin-top: 0;
  }
}

@keyframes rotate-icon {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.header__area-7.sticky-7 {
  background: var(--white);
  border-bottom: 1px solid var(--white-2);
}

.about__area-7 {
  position: relative;
}

.about__area-7 .sec-title-wrapper {
  text-align: center;
  padding-bottom: 70px;
}

.portfolio__slider-11-title .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11 {
  font-size: 150px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11 {
    font-size: 100px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11 {
    font-size: 72px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11 {
    font-size: 36px;
  }
}

.scroll-top-2 {
  width: 115px;
  position: fixed;
  right: 100px;
  bottom: 20px;
  z-index: 9991;
  padding: 10px;
  cursor: pointer;
  display: none;
  transition: all 0.3s;
}

.scroll-top-2 i {
  font-size: 18px;
  color: var(--black-2);
}

.scroll-top-2:hover {
  color: var(--gray-2);
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .scroll-top-2 {
    right: 50px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .scroll-top-2 {
    right: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .scroll-top-2 {
    right: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .scroll-top-2 {
    right: 10px;
    bottom: 15px;
  }
}

@media only screen and (max-width: 767px) {
  .scroll-top-2 {
    right: 10px;
    bottom: 15px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    padding: 5px;
    background-color: var(--white);
    mix-blend-mode: exclusion;
  }
}

.scroll-top-2 p {
  color: var(--black-2);
  text-align: left;
}

.scroll-inner {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

@media only screen and (max-width: 767px) {
  .scroll-inner {
    justify-content: center;
  }

  .scroll-inner p {
    display: none;
  }

  .scroll-inner img {
    max-width: 100%;
    height: 30px;
  }
}

.showcase__area-4 {
  padding: 130px 50px 110px;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .showcase__area-4 {
    padding: 120px 50px 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase__area-4 {
    padding: 90px 50px 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__area-4 {
    padding: 80px 30px 100px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__area-4 {
    padding: 80px 20px 60px;
  }
}

@media only screen and (max-width: 767px) {
  .showcase__area-4 {
    padding: 60px 0 80px;
  }
}

.showcase__area-4 .row {
  --bs-gutter-x: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__area-4 .row {
    --bs-gutter-x: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__area-4 .row {
    --bs-gutter-x: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .showcase__area-4 .row {
    --bs-gutter-x: 30px;
  }
}

.showcase__items-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 90px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase__items-4 {
    grid-gap: 30px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__items-4 {
    grid-gap: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__items-4 {
    grid-gap: 15px;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .showcase__items-4 {
    grid-gap: 15px;
    grid-template-columns: repeat(2, 1fr);
  }
}

.showcase__item-4 {
  overflow: hidden;
}

.showcase__item-4:hover img {
  transform: scale(1.2);
}

.showcase__item-4 img {
  transition: all 3s;
  max-width: 100%;
}

.showcase__menu-4 {
  gap: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 30px;
  margin-bottom: 30px;
}

@media only screen and (max-width: 767px) {
  .showcase__menu-4 {
    display: inline-block;
    z-index: 9;
    text-align: center;
    position: relative;
    background-color: var(--white);
  }
}

.showcase__menu-4 button {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--black);
  transition: all 0.3s;
  text-transform: capitalize;
}

.showcase__menu-4 button:hover {
  letter-spacing: 1px;
  color: var(--black-2);
}

@media only screen and (max-width: 767px) {
  .showcase__menu-4 button {
    margin: 0 5px 10px 0;
  }
}

.showcase5__content img {
  animation: wcSpinner 5s infinite linear;
}

.showcase_16_hover {
  width: 300px;
  height: 400px;
  position: absolute;
  top: 100px;
  left: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 75%;
  transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.showcase_16_hover.active {
  opacity: 1;
}

@media (max-width: 1365px) {
  .showcase_16_hover {
    display: none;
  }
}

body {
  position: relative;
}

.portfolio__area-11 .swiper-container {
  width: 100%;
  height: 100vh;
  float: left;
  transition: opacity 0.6s ease, transform 0.3s ease;
}

.portfolio__area-11 .main-slider11 .swiper-image {
  width: 100%;
  height: 100%;
}

.portfolio__area-11 .swiper-slide {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
  font-size: 150px;
  line-height: 0.9;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
    font-size: 100px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
    font-size: 90px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
    font-size: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
    font-size: 48px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
    font-size: 30px;
  }
}

.portfolio__area-11 .swiper-container.thumb-slider11 {
  width: 100%;
  position: absolute;
  overflow: hidden;
  height: 100vh;
  pointer-events: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 {
    margin-top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 {
    margin-top: 80px;
  }
}

.portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide {
  cursor: pointer;
}

.portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
  height: 175px !important;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
    height: 160px !important;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
    height: 150px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
    height: 125px !important;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
    height: 100px !important;
  }
}

@media only screen and (max-width: 767px) {
  .dir-rtl .offcanvas__close {
    left: 15px;
  }
}

.dir-rtl .offcanvas__logo {
  padding: 25px 50px 25px 50px;
  text-align: left;
}

.dir-rtl .offcanvas_imglogo {
  width: 100px;
}

.dir-rtl .offcanvas__right {
  width: 370px;
}

.dir-rtl .offcanvas__body {
  grid-template-columns: 0.9fr 3fr 0.3fr;
}

@media only screen and (max-width: 767px) {
  .dir-rtl .offcanvas__body {
    grid-template-columns: 1fr;
  }
}

.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  box-sizing: border-box;
  padding: 20px 100px 30px 0;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding-right: 60px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding-right: 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding-right: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding-right: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding-right: 20px;
  }
}

.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  right: 0;
  left: unset;
  height: 86px;
  width: 320px;
  cursor: unset;
  padding-left: 30px !important;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 76px;
    width: 260px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 76px;
    width: 260px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    width: 230px;
    height: 76px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    width: 230px;
    height: 76px;
  }
}

@media only screen and (max-width: 767px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    width: 170px;
    height: 60px;
  }
}

.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
  padding: 20px 150px 0px 0;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-right: 90px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-right: 80px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-right: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-right: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-right: 40px;
  }
}

.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
  height: 63px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 59px;
  }
}

@media only screen and (max-width: 767px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 57px;
  }
}

.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-total {
  width: 30px;
  margin-right: 10px;
}

.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-total::before {
  left: 20px;
}

.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-current {
  width: 30px;
}

@media only screen and (max-width: 767px) {
  .dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-current {
    margin-left: 0;
  }
}

.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-current::before {
  left: 20px;
}

.dir-rtl .hero__area-10 .hero10_activition .swiper-button-next.hero_next {
  left: 0;
  right: unset;
}

@media only screen and (max-width: 767px) {
  .dir-rtl .hero__area-10 .hero10_activition .swiper-button-next.hero_next {
    left: -50px;
  }
}

.dir-rtl .hero__area-10 .hero10_activition .swiper-button-next.hero_next img {
  transform: rotate(180deg);
}

.dir-rtl .hero__area-15 .swiper-container {
  float: right;
}

.dir-rtl .hero__area-10 .swiper-button-prev.hero_prev img {
  transform: rotate(180deg);
}

@media only screen and (max-width: 767px) {
  .dir-rtl .portfolio__area-3 .swiper-pagination {
    left: 10px;
  }
}

.dir-rtl .portfolio__page .swiper-slide-active .portfolio__about-left img {
  transform: rotateY(180deg) !important;
}

.dir-rtl .modal__apply .form-btn button {
  margin-left: inherit;
  margin-right: auto;
}

.dir-rtl .modal__close-2 {
  right: unset;
  left: 30px;
}

/* ========== site-en.css ========== */
html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  margin: 0;
}

html.is-scroll header#header {
  position: fixed;
  transform: translateY(-200px);
}

html.is-scrolling-up header#header {
  position: fixed;
  background: #ffffff;
  transition: all 0.4s;
  transform: translateY(0);
}

@media (max-width: 991px) {
  html.dark-menu header#header {
    background: #ffffff;
  }
}

html.dark-menu header#header .menu-wrap .current>a span:after {
  background-color: #000000 !important;
}

header#header .menu-wrap {
  display: flex;
  align-items: center;
  position: relative;
  padding: 45px 0;
}

@media (max-width: 1249px) {
  header#header .menu-wrap {
    padding: 0;
  }
}

header#header .menu-wrap .logo {
  z-index: 99;
  line-height: 0;
}

header#header .menu-wrap .logo img {
  width: 102px;
}

html.is-scrolling-up header#header .menu-wrap .logo img {
  filter: invert(100%);
}

html.dark-menu header#header .menu-wrap .logo img {
  filter: invert(100%);
}

@media (max-width: 767px) {
  header#header .menu-wrap .logo img {
    width: 80px;
  }
}

header#header .menu-wrap nav {
  display: flex;
  margin-left: auto;
  align-items: center;
}

header#header .menu-wrap nav .main-menu {
  display: flex;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu {
    width: 512px;
    height: 140vh;
    padding-top: 144px;
    padding-left: 64px;
    background-color: #000000;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -768px;
    overflow: hidden auto;
    transition: all 0.8s;
  }

  header#header .menu-wrap nav .main-menu.expanded {
    transform: translateX(-768px);
    transition: all 0.8s;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  header#header .menu-wrap nav .main-menu {
    width: 415px;
  }
}

@media (max-width: 767px) {
  header#header .menu-wrap nav .main-menu {
    width: 100%;
    padding-left: 24px;
  }
}

header#header .menu-wrap nav .main-menu li {
  margin-right: 30px;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li {
    margin: 0;
  }
}

header#header .menu-wrap nav .main-menu li.current>a {
  color: #ffffff;
}

header#header .menu-wrap nav .main-menu li.current>a span:after {
  content: "";
  position: absolute;
  width: 32px;
  height: 1px;
  bottom: -4px;
  left: 50%;
  margin-left: -32px;
  z-index: 9999;
  background-color: #ffffff;
  pointer-events: none;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li.current>a span:after {
    content: none;
  }
}

header#header .menu-wrap nav .main-menu li.current>a span:last-child::after {
  margin-left: -16px;
}

header#header .menu-wrap nav .main-menu li:not(.expanded) .megamenu {
  pointer-events: none !important;
}

header#header .menu-wrap nav .main-menu li.expanded>a i {
  transform: rotate(180deg);
  display: inline-block;
  transition: all 0.3s;
  color: #ffffff;
}

header#header .menu-wrap nav .main-menu li.expanded>a span {
  color: #ffffff;
}

header#header .menu-wrap nav .main-menu li.expanded>a i {
  color: #ffffff;
}

header#header .menu-wrap nav .main-menu li.expanded .megamenu {
  visibility: visible;
  opacity: 1;
}

header#header .menu-wrap nav .main-menu li.expanded .megamenu>.container {
  opacity: 1;
  transition: 0.8s;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li.expanded .megamenu {
    display: block;
    max-height: 200rem;
    padding: 40px 0;
  }

  header#header .menu-wrap nav .main-menu li.expanded .megamenu .container {
    display: flex;
    flex-direction: column-reverse;
  }

  header#header .menu-wrap nav .main-menu li.expanded .megamenu .container .megamenu-footer {
    order: 1;
  }

  header#header .menu-wrap nav .main-menu li.expanded .megamenu .container .megamenu-footer a {
    padding-bottom: 2em;
  }
}

header#header .menu-wrap nav .main-menu li:last-child {
  margin-right: 0;
  padding-right: 0;
}

header#header .menu-wrap nav .main-menu li a {

  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  display: flex;
  transition: all 0.1s;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li a {
    margin-bottom: 24px;
  }
}

html.is-scrolling-up header#header .menu-wrap nav .main-menu li a {
  color: #000000;
}

html.is-scrolling-up header#header .menu-wrap nav .main-menu li a:hover {
  color: #ffffff;
  transition: all 0.3s;
}

html.dark-menu header#header .menu-wrap nav .main-menu li a {
  color: #000000;
}

header#header .menu-wrap nav .main-menu li a i {
  font-size: 20px;
  margin-left: 8px;
  transition: transform 0.3s;
}

header#header .menu-wrap nav .main-menu li a.text-button {
  color: #ffffff !important;
}

header#header .menu-wrap nav .main-menu li a:hover {
  color: #ffffff;
  transition: all 0.3s;
}

header#header .menu-wrap nav .main-menu li .megamenu {
  visibility: hidden;
  opacity: 0;
  padding-top: 77px;
  padding-bottom: 71px;
  background-color: #000000;
  position: fixed;
  top: 76px;
  left: 0;
  width: 100%;
  z-index: 99;
  color: #ffffff;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu {
    max-height: 0;
    background-color: #1B1B1B;
    padding: 0;
    margin-left: -64px;
    width: 810px;
    position: initial;
    transition: all 0.5s;
  }
}

header#header .menu-wrap nav .main-menu li .megamenu .container {
  opacity: 0;
  transition: 0.8s;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container {
    padding: 0;
  }
}

header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block {
  margin-bottom: 71px;
  max-width: 196px;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block {
    margin-bottom: 40px;
    max-width: none;
  }
}

header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block a:hover i {
  transform: translateX(4px);
  transition: 0.3s;
}

header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-header {
  margin-bottom: 40px;

  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-header {
    margin-bottom: 20px;
  }
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-header>span {
    padding-left: 88px;
    color: #929292;
  }
}

header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-header a {
  color: #ffffff;
  display: flex;
  align-items: center;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-header a {
    padding-left: 88px;
  }
}

header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-header a i {
  font-size: 20px;
  transition: 0.3s;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-header a i {
    display: none;
  }
}

header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-body {
  color: #929292;
}

header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-body ul li {
  margin-bottom: 24px;

  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-body ul li {
    margin-bottom: 0;
  }
}

header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-body ul li a {
  color: #ffffff;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-body ul li a {
    padding-left: 108px;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-bottom: 0;
  }
}

header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-body ul li i {
  font-size: 19px;
  transition: 0.3s;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-body ul li i {
    display: none;
  }
}

header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-body .introtext {

  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 180%;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-body .category-block .category-body .introtext {
    display: none;
  }
}

header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-footer .text-button {
  justify-content: flex-end;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-footer .text-button {
    justify-content: initial;
    padding-left: 88px;
  }
}

@media (min-width: 1250px) {
  header#header .menu-wrap nav .main-menu li .megamenu .container .megamenu-footer .text-button {
    display: none !important;
  }
}

header#header .menu-wrap nav .lang-menu {
  display: flex;
  margin-left: 64px;
  position: relative;
  z-index: 99;
  cursor: pointer;
}

header#header .menu-wrap nav .lang-menu:hover .ri-arrow-down-s-line {
  color: #ffffff;
}

@media (max-width: 1249px) {
  html.is-scrolling-up header#header .menu-wrap nav .lang-menu:hover .ri-arrow-down-s-line {
    color: #000000;
  }
}

header#header .menu-wrap nav .lang-menu>li {
  display: flex;
  align-items: center;
  position: relative;
}

@media (max-width: 1249px) {
  header#header .menu-wrap nav .lang-menu>li {
    margin-right: 23px;
    margin-left: 0px;
  }
}

header#header .menu-wrap nav .lang-menu>li span,
header#header .menu-wrap nav .lang-menu>li i {
  color: #ffffff;
  transition: all 0.3s;
}

header#header .menu-wrap nav .lang-menu>li span {

  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 9px;
}

html.is-scrolling-up header#header .menu-wrap nav .lang-menu>li span {
  color: #000000;
}

html.dark-menu header#header .menu-wrap nav .lang-menu>li span {
  color: #000000;
}

html.is-scrolling-up header#header .menu-wrap nav .lang-menu>li i:not(.ri-arrow-down-s-line) {
  color: #000000;
}

html.dark-menu header#header .menu-wrap nav .lang-menu>li i {
  color: #000000;
}

header#header .menu-wrap nav .lang-menu>li i.ri-translate-2,
header#header .menu-wrap nav .lang-menu>li i.ri-arrow-down-s-line {
  font-size: 20px;
}

header#header .menu-wrap nav .lang-menu>li i.ri-translate-2 {
  margin-right: 9px;
}

header#header .menu-wrap nav .lang-menu>li i.ri-arrow-down-s-line {
  color: #929292;
}

header#header .menu-wrap nav .lang-menu>li.expanded .lang-layer {
  opacity: 1;
  pointer-events: initial;
}

header#header .menu-wrap nav .lang-menu>li.expanded .ri-arrow-down-s-line {
  transform: rotate(180deg);
  display: inline-block;
  transition: all 0.3s;
  color: #ffffff;
}

header#header .menu-wrap nav .lang-menu .lang-layer {
  width: 110px;
  position: absolute;
  top: 16px;
  right: 0;
  opacity: 0;
  pointer-events: none;
  padding-top: 16px;
  text-align: right;
  padding-right: 12px;
}

header#header .menu-wrap nav .lang-menu .lang-layer li {
  background-color: #000000;
}

header#header .menu-wrap nav .lang-menu .lang-layer li a {
  display: block;

  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #929292;
  padding: 8px 16px;
  transition: all 0.3s;
}

header#header .menu-wrap nav .lang-menu .lang-layer li a:hover {
  color: #ffffff;
  transition: all 0.3s;
}

header#header .menu-wrap .menu-toggle {
  display: none;
  min-width: 148px;
  text-align: center;

  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: #000000;
  color: #ffffff;
  padding: 39px 0;
  z-index: 99999999;
  cursor: pointer;
  transition: all 0.4s;
}

@media (max-width: 1249px) {
  header#header .menu-wrap .menu-toggle {
    display: block;
  }
}

@media (max-width: 767px) {
  header#header .menu-wrap .menu-toggle {
    min-width: 90px;
    padding: 26px 0;
  }
}

header#header .menu-wrap .menu-toggle.menu-toggle--expanded {
  background-color: #ffffff;
  color: #000000;
  transition: all 0.4s;
}

@media (max-width: 1249px) {
  header#header .menu-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #000000;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s;
  }

  header#header .menu-bg-layer.visible {
    opacity: 0.6;
    transition: all 0.4s;
    pointer-events: initial;
  }
}

.slider-pagination {
  display: flex;
  align-items: center;
  height: 40px;
  z-index: 99;
}

.slider-pagination ul {
  display: flex;
  align-items: center;
}

.slider-pagination ul .slider-pagination-bullet {
  position: relative;
  width: 7px;
  height: 7px;
  margin-left: 30px;
  color: #ffffff;
  background-color: #000000;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
}

.slider-pagination ul .slider-pagination-bullet:after {
  content: "";
  position: absolute;
  top: -14px;
  left: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

.slider-pagination ul .slider-pagination-bullet:first-child {
  margin-left: 2px;
}

.slider-pagination ul .slider-pagination-bullet:nth-child(2) {
  margin-left: 36px;
}

.slider-pagination ul .slider-pagination-bullet:nth-child(3) {
  margin-left: 36px;
}

.slider-pagination ul .slider-pagination-bullet:nth-child(4) {
  margin-left: 36px;
}

.slider-pagination ul .slider-pagination-bullet.slider-pagination-bullet-active {
  background-color: #000000;
}

.slider-pagination svg {
  position: absolute;
  z-index: 9;
  transition: transform 0.3s;
  transform: rotate(-93deg);
}

.slider-pagination svg .circle {
  opacity: 0;
  stroke: #000000;
  fill: transparent;
}

.slider-pagination svg .circle-grow {
  fill: transparent;
  stroke: #000000;
  stroke-dasharray: 227;
  stroke-dashoffset: 0;
}

.slider-pagination svg .circle-grow.animate {
  animation: rotate 12s linear reverse;
}

@keyframes rotate {
  to {
    stroke-dashoffset: 227;
  }
}

.slider-pagination.light .slider-pagination-bullet {
  background-color: #ffffff;
}

.slider-pagination.light .slider-pagination-bullet.slider-pagination-bullet-active {
  background-color: var(--primary);
  width: 8px;
  height: 8px;
}

.slider-pagination.light .circle,
.slider-pagination.light .circle-grow {
  stroke: #fff;
  stroke-width: 2px;
}

.wrap-r {
  /* justify-content: flex-start !important; */
  justify-content: center;

}

.scroll-wrapper {
  display: flex;
  justify-content: center;
  transition: opacity 0.5s;
}

.scroll-wrapper.invisible {
  opacity: 0;
  pointer-events: 0;
  transition: opacity 0.5s;
}

.scroll-wrapper .scroll-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  /* margin-inline-start: auto; */
}

@media (max-width: 991px) {
  .scroll-wrapper .scroll-wrap {
    /* display: none; */
  }
}

.scroll-wrapper .scroll-wrap span {
  /*  */
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  font-weight: 600;
  line-height: 160%;
  transform: rotate(-90deg);
  display: inline-block;
  margin-bottom: 30px;
}

.scroll-wrapper .scroll-wrap svg {
  width: 2px;
  height: 80px;
  z-index: 1;
}

.scroll-wrapper .scroll-wrap svg .line {
  opacity: 0.3;
  stroke: #000000;
  fill: transparent;
}

.scroll-wrapper .scroll-wrap svg .line-grow {
  fill: transparent;
  stroke: #000000;
  stroke-width: 1px;
  opacity: 1;
  stroke-dasharray: 80;
  stroke-dashoffset: 150;
  animation-iteration-count: infinite;
  animation-name: grow-line;
  animation-timing-function: linear;
  animation-duration: 3s;
  animation-direction: normal;
}

@keyframes grow-line {
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.scroll-wrapper .scroll-wrap.light span {
  color: #ffffff;
}

.scroll-wrapper .scroll-wrap.light .line,
.scroll-wrapper .scroll-wrap.light .line-grow {
  stroke: #ffffff;
}

@keyframes grow {
  to {
    stroke-dashoffset: 323;
  }
}

@keyframes reduce {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes grow-line {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

.module.module--hero .title {
  font-style: normal;
  font-weight: normal;
  /* line-height: 110%; */
  color: #000000;
}

/* .module.module--hero .title h1 {
  font-size: 34px;
} */

@media (max-width: 991px) {
  .module.module--hero .title {
    font-size: 36px;
    line-height: 110%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .module.module--hero .title {

    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 110%;
  }
}

@media (min-width: 768px) and (max-width: 991px) and (max-width: 991px) {
  .module.module--hero .title {
    font-size: 30px;
    line-height: 110%;
  }
}

.module.module--hero .introtext {
  font-style: normal;
  font-weight: normal;
  color: #929292;
  margin-bottom: 40px;
}

@media (max-width: 991px) {
  .module.module--hero .introtext {
    font-size: 14px;
    line-height: 180%;
  }
}

@media (max-width: 991px) {
  .module.module--hero .introtext {
    margin-bottom: 16px;
  }
}

.module.module--hero.hero--detail {
  min-height: 800px;
}

@media (max-width: 767px) {
  .module.module--hero.hero--detail {
    min-height: 648px;
  }
}

.module.module--hero.hero--detail .container {
  min-height: 800px;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) and (max-width: 991px) {
  .module.module--hero.hero--detail .container {
    justify-content: flex-end;
  }
}

@media (max-width: 767px) {
  .module.module--hero.hero--detail .container {
    min-height: 648px;
  }
}

.module.module--hero.hero--detail .row {
  height: 100%;
}

.module.module--hero.hero--detail .img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.module+.module {
  margin-top: 140px;
}

.module.module--hero.hero--detail .hero-text-wrap {
  height: 100%;
  padding-top: 186px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) and (max-width: 991px) {
  .module.module--hero.hero--detail .hero-text-wrap {
    justify-content: flex-end;
  }
}

.module.module--hero.hero--detail .hero-text-wrap .title {
  color: #ffffff;
}

@media (max-width: 991px) {

  .module.module--hero.hero--detail .hero-text-wrap .title {

    font-style: normal;
    font-weight: normal;
    font-size: 56px;
    line-height: 110%;
  }
}

@media (max-width: 991px) and (max-width: 991px) {

  .module.module--hero.hero--detail .hero-text-wrap .title {
    line-height: 130%;
  }
}

.module.module--hero.hero--detail .hero-text-wrap .introtext {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .module.module--hero.hero--detail .hero-text-wrap .introtext {
    margin-bottom: 16px;
  }
}

.module.module--hero.hero--detail.hero--detail-compact:not(.hero--not-bg) {
  min-height: 600px;
}

@media (max-width: 767px) {
  .module.module--hero.hero--detail.hero--detail-compact:not(.hero--not-bg) {
    min-height: 580px;
  }
}

.module.module--hero.hero--detail.hero--detail-compact .container {
  min-height: 600px;
}

@media (max-width: 767px) {
  .module.module--hero.hero--detail.hero--detail-compact .container {
    min-height: 600px;
    height: calc(1svh*60);
  }
}

@media (max-width: 767px) {
  .module.module--hero.hero--detail.hero--detail-compact .hero-text-wrap {
    padding-top: 112px;
  }
}

.img-wrap {
  position: relative;
  overflow: hidden;
}

.img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  object-fit: cover;
  object-position: center;
  transition: all 0.8s;
}

@media (max-width: 767px) {
  .img-wrap img {
    height: calc(1svh*100) !important;
  }
}

@media (max-width: 767px) {
  .module.module--carousel .swiper-container-carousel {
    height: 524px;
  }
}

.module.module--carousel .swiper-container-carousel .swiper-slide .img-wrap {
  position: absolute;
  height: 100%;
  width: 100%;
}


*.fade:not(.aos-init),
*.fade-up:not(.aos-init),
*.fade-down:not(.aos-init) {
  opacity: 0;
}

[data-aos=custom-fade-up] {
  opacity: 0;
  transform: translatey(20px);
  transition-property: transform, opacity;
}

[data-aos=custom-fade-up].aos-animate {
  opacity: 1;
  transform: translatey(0);
}

[data-aos=custom-fade-down] {
  opacity: 0;
  transform: translatey(-10px);
  transition-property: transform, opacity;
}

[data-aos=custom-fade-down].aos-animate {
  opacity: 1;
  transform: translatey(0);
}

[data-aos=custom-fade] {
  opacity: 0;
  transition-property: opacity;
}

[data-aos=custom-fade].aos-animate {
  opacity: 1;
}

html:not(.htmlReady) *[data-diagonal-clip] {
  opacity: 0;
}

.fade:not(.show) {
  opacity: 1;
}

.slider-overlay {
  background-color: #000;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
}

.offcanvas__area {
  opacity: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  background-color: transparent;
  transition: visibility 1s;
}

.circle_overlay {
  position: absolute;
  margin: 0;
  top: 0;
  right: 0;
  height: 0;
  width: 0;
  background-color: var(--blue-2);
  transform: rotate(45deg);
  transition: height .8s .1s, width .8s .1s, margin .79s .1s;
}

@media (max-width: 767px) {
  .dir-rtl .offcanvas__body {
    background: var(--blue-2);
  }

  .circle_overlay {
    height: 450vw !important;
  }
}

.offcanvas__body {
  /* position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center; */
  opacity: 0;
  transition: opacity 2s;
}

/* .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  font-size: 44px;
} */

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a:hover {
  letter-spacing: 0;
}

.mean-nav>ul li:last-child {
  padding-bottom: 20px;
}

@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 82px;
  }
}

.nav-btn {
  position: relative;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  /* font-size: 43px; */
  line-height: 1.3;
  font-weight: 400;
  font-family: 'Aeonik Arabic', sans-serif;
  color: #fff;
  /* white-space: nowrap; */
}

.nav-btn:before {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  color: var(--primary);
  font-weight: 400;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  -webkit-transition: .5s cubic-bezier(.76, .06, .85, .07);
  -o-transition: .5s cubic-bezier(.76, .06, .85, .07);
  transition: .5s cubic-bezier(.76, .06, .85, .07);
  width: 0%;
  white-space: nowrap;
  overflow: hidden;
  background: transparent;
}

.nav-btn.active:before {
  width: 100%;
}

a:hover .nav-btn:before {
  width: 100%;
}

#video {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 68%;
  transform: translate3d(68%, 0, 0);
}

.cursor-btn {
  height: 70px;
  margin-top: 20px;
}

.cursor-btn .wc-btn-services {
  border: 1px solid var(--white);
}


@media (max-width: 767px) {
  .cursor-btn .wc-btn-services {
    background-color: var(--primary);
    border: none;
  }

  #video {
    position: fixed;
    width: 580px;
    transform: translate3d(18%, 0, 0);
    opacity: .2 !important;
  }

  /* .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  border-top:none;
}
.offcanvas__menu-wrapper.mean-container .mean-nav > ul > li:last-child > a {
  border-bottom: none;
} */
}

/* services boxes */

/* .portfolio__service-item {
  padding: 40px;
  border: 1.3px solid var(--blue-2);
  border-radius: 0;
  position: relative;
  transition: all 0.3s;
  opacity: 0;
}

.portfolio__service-item::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0px;
  right: -1px;
  top: calc(0% - 0px);
  transition: all 0.3s;
  border-radius: 0;
  border-top: 38px solid var(--blue-2);
  border-left: 38px solid transparent;
}

.portfolio__service-item:hover::after {
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  right: -1px;
  top: 0;
  border-radius: 0;
  border-top: 244px solid var(--blue-2);
  border-left: 244px solid var(--blue-2);
} */
@keyframes grow-line {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* #service_1 {
  height: 114vh;
}

#service_2 {
  height: 114vh;
}

#service_3 {
  height: 104vh;
}

#service_4 {
  height: 104vh;
} */

.cls-3 {
  fill: none;
  stroke: #fff;
}

.cls-4 {
  fill: none;
  stroke: var(--white);
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  justify-content: start;
}

/* ----- Diagonal buttons v2 ----- */
.diagonal-serv {
  position: relative;
  line-height: 50px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: var(--primary);
  border: 1px solid var(--gray);
  font-weight: 400;
  font-size: 16px;
  overflow: hidden;
  z-index: 1;
  padding: 0px;
  width: 170px;
  height: 50px;
  transition: all 0.3s;
}

.diagonal-serv:hover {
  color: white;
  border: 1px solid transparent;
}

.diagonal-serv:after {
  content: "";
  position: absolute;
  top: 189px;
  left: 0;
  width: 500%;
  height: 1000%;
  background: var(--primary);
  z-index: -1;
  transform-origin: 0% 0%;
  transform: translateX(calc(4% - 24px)) translateY(0%) rotate(-45deg);
  transition: transform .3s;
  transition: all 0.7s;
}

.diagonal-serv:hover::after {
  transform: translateY(50%) translateX(-545px) rotate(-45deg);
}

.slider_tri {
  width: 0px;
  height: 0;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 50px;
  top: 125px;
  transition: all 0.3s;
  border-left: 450px solid transparent;
  border-bottom: 450px solid #6bbe4a;
  /* border-bottom: 450px solid #3e8622; */
  background: transparent !important;
  opacity: .5;
  /* opacity: .8; */
  /* z-index: -1; */
}

@media (min-width: 768px) and (max-width: 1240px) {
  .slider_tri {
    border-left: 350px solid transparent;
    border-bottom: 350px solid #6bbe4a;
  }
}

@media only screen and (max-width: 549px) {
  .slider_tri {
    width: 0px;
    height: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 30px;
    top: 125px;
    transition: all 0.3s;
    border-left: 290px solid transparent;
    border-bottom: 290px solid #6bbe4a;
  }
}

.slider-tit div {
  display: inline-flex;
  align-items: end;
  /* width: 110px; */
  justify-content: flex-start;
  font-weight: 500;
  /* font-size: 48px; */
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--white);
  height: 32px;
  border-radius: 0%;
  background-color: #61a60e;
  font-family: "Aeonik Arabic", sans-serif;
  margin-bottom: 50px;
}

/*--------------------------------------------------------------
  9. Animations
  --------------------------------------------------------------*/

[data-animation]:before,
[data-animation]:after,
[data-animation] {
  opacity: 0;
}

.tr-delay01,
.tr-delay01:before,
.tr-delay01:after {
  -webkit-transition-delay: .1s !important;
  -o-transition-delay: .1s !important;
  transition-delay: .1s !important;
}

.tr-delay02,
.tr-delay02:before,
.tr-delay02:after {
  -webkit-transition-delay: .2s !important;
  -o-transition-delay: .2s !important;
  transition-delay: .2s !important;
}

.tr-delay03,
.tr-delay03:before,
.tr-delay03:after {
  -webkit-transition-delay: .3s !important;
  -o-transition-delay: .3s !important;
  transition-delay: .3s !important;
}

.tr-delay04,
.tr-delay04:before,
.tr-delay04:after {
  -webkit-transition-delay: .4s !important;
  -o-transition-delay: .4s !important;
  transition-delay: .4s !important;
}

.tr-delay05,
.tr-delay05:before,
.tr-delay05:after {
  -webkit-transition-delay: .5s !important;
  -o-transition-delay: .5s !important;
  transition-delay: .5s !important;
}

.green-color.overlay-anim-box2:before,
.green-color .overlay-anim-box2:before {
  background: #61a60e !important;
}

/* 9.2. Scroll animations */

/* 9.2.1. Scroll overlay animation #1 */

/* 9.2.2. Scroll overlay animation #2 */
[data-animation].overlay-anim-box2:before,
[data-animation].overlay-anim-box2:after,
[data-animation].overlay-anim-box2 {
  opacity: 1;
  line-height: 1.5;
}

.overlay-anim-box2 {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.overlay-anim-box2:before {
  content: '';
  background: #f5f5f5;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: 1s cubic-bezier(.858, .01, .068, .99);
  -o-transition: 1s cubic-bezier(.858, .01, .068, .99);
  transition: 1s cubic-bezier(.858, .01, .068, .99);
  z-index: 3;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.overlay-anim-box2.overlay-anim2:before {
  -webkit-transform: translateX(110%);
  -ms-transform: translateX(110%);
  transform: translateX(110%);
}

/* 9.2.3. Scroll fade animation */
.fade-anim-box {
  /* display: inline-block; */
  opacity: 0;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: 1s cubic-bezier(.767, .01, .18, 1.01);
  -o-transition: 1s cubic-bezier(.767, .01, .18, 1.01);
  transition: 1s cubic-bezier(.767, .01, .18, 1.01);
}

.fade-anim-box.fade-anim {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/* 9.2.4. Scroll title fill animation */


/* 9.1.2. Loading overlay animation #2 */

/* 9.1.3. Loading fade animation */
.fade-loading {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: 1s cubic-bezier(.767, .01, .18, 1.01);
  -o-transition: 1s cubic-bezier(.767, .01, .18, 1.01);
  transition: 1s cubic-bezier(.767, .01, .18, 1.01);
}

/* 9.1.4. Loading title fill animation */

/* 15.1.3. Home slider overlay #2 effect */
.slider-overlay2 {
  display: inline-block;
  overflow: hidden;
  position: relative;
  font-size: 38px;
  line-height: 1.6;
}

@media only screen and (max-width: 549px) {
  .slider-overlay2 {
    font-size: 24px;
  }

  .slide-bg {
    width: 100%;
    background-position: right 90px bottom 40px;
    background-image: none !important;
  }
}

.slider-overlay2:before {
  content: '';
  width: 101%;
  height: 100%;
  background: #f5f5f5;
  position: absolute;
  top: 0;
  right: 100%;
  -webkit-transition: 1s cubic-bezier(.858, .01, .068, .99);
  -o-transition: 1s cubic-bezier(.858, .01, .068, .99);
  transition: 1s cubic-bezier(.858, .01, .068, .99);
  z-index: 3;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}

.green-color.slider-overlay2:before {
  background: #61a60e;
}

.active .slider-overlay2:before {
  -webkit-transform: translateX(-1%);
  -ms-transform: translateX(-1%);
  transform: translateX(-1%);
}

.introtext {
  display: block;
}

.swiper {
  overflow: visible;
}

.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-total::before {
  right: 20px;
}

.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-current::before {
  right: 20px;
}

.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-total {
  margin-right: 0px;
}

.dir-rtl .hero__area-10 .hero10_activition .swiper-pagination-current {
  margin-left: 10px;
}

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

.slider-container {
  padding: 0 50px;
}

.slider-pagi {
  padding: 0 70px;
}

/* .brand__item-2 img {
  width: 50px;
} */

/*--------------------------------------------------------------
  22. Our clients
  --------------------------------------------------------------*/

.hero-text-header div {
  display: inline-flex;
  align-items: end;
  justify-content: flex-start;
  line-height: 1.6;
  color: var(--white);
  height: 30px;
  border-radius: 0;
  background-color: #63ae45;
  font-weight: 500;
  font-family: "Aeonik Arabic", sans-serif;
  margin-top: 24px;
  position: relative;
}

.box-icon {
  width: 105px;
  height: 105px;
  margin-bottom: 32px;
  object-fit: contain;
}

.divider {
  height: 2px;
  background-color: var(--primary);
}

.aec-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.aec-nav__list {
  display: flex;
  gap: 60px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aec-nav__item a {
  position: relative;
  display: inline-block;
  padding: 6px 2px;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.25s ease;
}

.aec-nav__item a:hover {
  color: #8ed14a;
  /* lime brand green on hover */
}

/* Active item gets the green underline */
.aec-nav__item.active a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: #8ed14a;
}

/* Mobile — hide on small screens (use the offcanvas instead) */
@media (max-width: 991.98px) {
  .aec-nav {
    display: none;
  }

  .box-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 30px;
    object-fit: contain;
  }
}

.box-para {
  background: rgba(5, 16, 15, 0.5);
}

.img-bg {
  background-color: #1f383e;
  background-image: url('../imgs/Bottom_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cls-1 {
  fill: none;
}

.cls-2 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

:root {
  --swiper-theme-color: #007aff;
}

:root {
  --color-black: #1d1f22;
  --color-black-10: #e2e0da;
  --color-black-10a: rgba(29, 31, 34, 0.1);
  --color-black-15a: rgba(29, 31, 34, 0.15);
  --color-black-20: #d2d2d3;
  --color-black-20a: rgba(29, 31, 34, 0.2);
  --color-black-30a: rgba(29, 31, 34, 0.3);
  --color-black-50: #8e8f90;
  --color-black-75: #636362;
  --color-black-90: #343538;
  --color-black-90a: rgba(29, 31, 34, 0.9);
  --color-cream: #f3efe5;
  --color-cream-50: #f5f3ea;
  --color-cream-25: #fcfbf8;
  --color-white: #fff;
  --color-white-5a: hsla(0, 0%, 100%, 0.05);
  --color-white-10a: hsla(0, 0%, 100%, 0.1);
  --color-white-15a: hsla(0, 0%, 100%, 0.15);
  --color-white-20a: hsla(0, 0%, 100%, 0.2);
  --color-white-30a: hsla(0, 0%, 100%, 0.3);
  --color-real-black: #000;
  --color-real-black-20a: rgba(0, 0, 0, 0.2);
  --color-deep-black: #161719;
  --color-deep-black-30a: rgba(22, 23, 25, 0.3);
  --color-deep-black-90a: rgba(22, 23, 25, 0.9);
  --color-light-grey: #f8f8f8;
  --color-gold: #D2A260;
  --color-gold-50: #f5df9f;
  --color-gold-25: #faefcf;
  --color-dark-gold-20a: rgba(184, 139, 53, 0.2);
  --color-dark-gold-10a: rgba(184, 149, 53, 0.1);
  --color-dark-gold: #b89535;
  --color-hotspots: #ffd02a;
  --color-bright-yellow: #ffd02a;
  --color-page-background: #f9f7f2;
  --color-mobile-language-selector-background: #111314;
  --color-border-grey: #e8e9e9;
  --color-ui-error: red;
  --color-ui-error-dark: #ff8080;
  --color-ui-success: green;
  --color-dark-blue: #003865;
  --color-green: #2D652F;
  --color-orange: #f18825;
  --color-light-blue: #007bb5;
  --color-red: #e0403f;
  --color-yellow: #ffe973;
  --color-gold-hover: #ffe973;
  --color-nic-navy: #121623;
  --color-dark-cerulean: #104878;
  --color-olive-drab: #628500;
  --color-rouge: #a0346c;
  --color-atoll: #2c818d;
  --color-shuttle-grey: #616366;
  --color-night-shadz: #a63b45;
  --color-sun-orange: #f29132;
  --color-observatory: #068c6e;
  --color-zorba: #9e8e80;
  --color-cannon-pink: #93506a;
  --color-cello: #34495e;
  --color-pine-cone: #796755;
  --color-blue-diamond: #4c2d67;
  --gradient-map-top: linear-gradient(0deg, rgba(29, 31, 34, 0), rgba(29, 31, 34, 0.8));
  --gradient-map-bottom: linear-gradient(0deg, rgba(29, 31, 34, 0.8), rgba(29, 31, 34, 0));
  --gradient-expert-right: linear-gradient(90deg, rgba(29, 31, 34, 0), rgba(29, 31, 34, 0.8));
  --gradient-expert-left: linear-gradient(270deg, rgba(29, 31, 34, 0), rgba(29, 31, 34, 0.8));
  --mask-background-color: rgba(0, 0, 0, 0.9);
  --button-shadow-color: rgba(0, 0, 0, 0.1);
  --containerMargin: 5.5555555556vw;
  --largeContainerMargin: 5.5555555556vw;
  --fluid-type-viewport-width-max: 1440px;
  --containerMaxWidth: var(--fluid-type-viewport-width-max);
  --grid-gap: 20px;
  --block-component-padding: 4.8611111111vw;
  --block-component-padding-large: 9.7222222222vw;
  --block-padding: 40px;
  --dropdown-navigation-offset: 90px;
  --page-indicator-color: var(--color-black-20a);
  --page-indicator-color-active: var(--color-dark-gold);
  --input-border-color: #e8e9e9;
  --input-border-color-focus: var(--color-black-30a);
  --input-border-radius: 4px;
  --input-border-width: 1.5px;
  --input-background-color: var(--color-white);
  --input-text-color: var(--color-black);
  --input-placeholder-color: var(--color-black-50);
  --form-error-color: var(--color-ui-error);
  --modal-background-color: var(--color-cream-50);
  --modal-mask-color: rgba(0, 0, 0, 0.75);
  --modal-heading-color: var(--color-black);
  --modal-text-color: var(--color-black-75);
}

@media(min-width:768px) {
  :root {
    --containerMargin: 4.8611111111vw;
    --largeContainerMargin: 12.5vw;
  }
}

@media(min-width:1024px) {
  :root {
    --block-padding: 60px;
  }
}

@media(min-width:1440px) {
  :root {
    --block-component-padding: 70px;
    --block-component-padding-large: 140px;
    --containerMargin: 70px;
    --largeContainerMargin: 180px;
    --containerMaxWidth: 1780px;
  }
}

@media(min-width:1920px) {
  :root {
    --grid-gap: 26.66px;
  }
}



:after,
:before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#open_offcanvas .imgwhite {
  display: block;
  background: url(../imgs/icon/menu-btn.svg) no-repeat;
  width: 22px;
  height: 18px;
}

#open_offcanvas .imgblack {
  display: none;
}

.sticky-3 #open_offcanvas .imgwhite {
  display: none;
}

.sticky-3 #open_offcanvas .imgblack {
  display: block;
  background: url(../imgs/icon/menu-btn.svg) no-repeat;
  width: 22px;
  height: 18px;
}

.sticky-3 #open_offcanvas .imgblack:hover {
  background: url(../imgs/icon/menu-btn-hover.svg) no-repeat;
}

#open_offcanvas .imgwhite:hover {
  background: url(../imgs/icon/menu-btn-hover.svg) no-repeat;
}

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

.accordion {
  --bs-accordion-color: #000;
  --bs-accordion-bg: #fff;
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0.375rem;
  --bs-accordion-inner-border-radius: calc(0.375rem - 1px);
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-body-color%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%7fbd5b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: #a6d888;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgb(128 189 91 / 32%);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: #80bd5b;
  --bs-accordion-active-bg: #aad78e;
}

.accordion-button:not(.collapsed) {
  color: #284e5a;
  background-color: #f2f9fb;
}

:root {
  --sprite-bg-file: url(../upload/general/sprite-bg%EF%B9%96v=1.svg)
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: 0
}

h2,
h4 {
  margin: 0
}

a {
  background-color: rgba(0, 0, 0, 0)
}

strong {
  font-weight: bolder
}

small {
  font-size: 80%
}

img {
  border-style: none
}

button,
input {
  /* font-family: inherit; */
  /* font-size: 100%; */
  /* line-height: 1.15; */
  /* margin: 0; */
}

button,
input {
  /* overflow: visible; */
}

button {
  /* text-transform: none; */
}

button,
[type=button] {
  /* -webkit-appearance: button; */
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring {
  outline: 1px dotted ButtonText
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

[hidden] {
  display: none
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: 0
}

h2,
h4 {
  margin: 0
}

a {
  background-color: rgba(0, 0, 0, 0)
}

strong {
  font-weight: bolder
}

small {
  font-size: 80%
}

img {
  border-style: none
}

button,
input {
  /* font-family: inherit; */
  /* font-size: 100%; */
  /* line-height: 1.15; */
  /* margin: 0; */
}

button,
input {
  /* overflow: visible; */
}

button {
  /* text-transform: none; */
}

button,
[type=button] {
  /* -webkit-appearance: button; */
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring {
  outline: 1px dotted ButtonText
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

[hidden] {
  display: none
}


svg.icon {
  flex: none !important;
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  font-size: 40px;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor
}

.svg,
.sli-cta::after,
.sli-cta::before {
  background: var(--sprite-bg-file) no-repeat;
  width: 32px;
  height: 32px;
  display: block
}

.sli-cta::before {
  background-position: 0 0
}

.sli-cta::after {
  background-position: 0 4.1184041184%
}

@keyframes show {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes hide {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes toTop {
  0% {
    transform: translateY(100%);
    opacity: 0
  }

  100% {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes toTopDelayed {
  0% {
    transform: translateY(100%);
    opacity: 0
  }

  80% {
    transform: translateY(100%);
    opacity: 0
  }

  100% {
    transform: translateY(0);
    opacity: 1
  }
}

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

  100% {
    transform: translateY(100%);
    opacity: 1
  }
}

@keyframes toRight {
  0% {
    transform: translateX(-100%);
    opacity: 0
  }

  100% {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes toLeft {
  0% {
    transform: translateX(100%);
    opacity: 0
  }

  100% {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes rotating {
  to {
    transform: rotate(360deg)
  }
}

@keyframes menuHover {
  0% {
    transform: translateY(5%);
    opacity: 0
  }

  100% {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes homeServiceHover {
  0% {
    transform: scale(1);
    opacity: 0
  }

  100% {
    transform: scale(1.1);
    opacity: 1
  }
}

@keyframes zoom {
  0% {
    transform: scale(1)
  }

  100% {
    transform: scale(1.2)
  }
}

:root {
  --fs-body-sm: 0.75rem;
  --fs-px-body-sm: 12px;
  --lh-body-sm: 1.417;
  --fw-body-sm: 400;
  --fs-button: 0.875rem;
  --fs-px-button: 14px;
  --lh-button: 1;
  --fw-button: 400;
  --fs-body: 1rem;
  --fs-px-body: 16px;
  --lh-body: 1.3;
  --fw-body: 300;
  --fs-body-md: 1rem;
  --fs-px-body-md: 16px;
  --lh-body-md: 1.2;
  --fw-body-md: 300;
  --fs-h-xxxs: 1.125rem;
  --fs-px-h-xxxs: 18px;
  --lh-h-xxxs: 1.2;
  --fw-h-xxxs: 500;
  --fs-h-xxs: 1.25rem;
  --fs-px-h-xxs: 20px;
  --lh-h-xxs: 1.2;
  --fw-h-xxs: 500;
  --fs-h-xs: 1.5rem;
  --fs-px-h-xs: 24px;
  --lh-h-xs: 1;
  --fw-h-xs: 400;
  --fs-h-sm: 1.5rem;
  --fs-px-h-sm: 24px;
  --lh-h-sm: 1;
  --fw-h-sm: 500;
  --fs-h: 2rem;
  --fs-px-h: 32px;
  --lh-h: 1;
  --fw-h: 400;
  --fs-h-lg: 2rem;
  --fs-px-h-lg: 32px;
  --lh-h-lg: 1;
  --fw-h-lg: 400;
  --fs-h-xl: 2.875rem;
  --fs-px-h-xl: 46px;
  --lh-h-xl: 1;
  --fw-h-xl: 400;
  --theme-color: $c-primary
}

/* html {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-body);
    scroll-behavior: smooth;
    background-color: #f9f6f4;
    color: #171431
} */

body {
  /* overflow: auto;
    color: #171431; */
  background-color: #f5f5f5
}

* {
  box-sizing: border-box
}

::selection {
  background: #006937;
  color: #fff;
  text-shadow: none
}

img {
  /* max-width: 100%; */
  /* display: block; */
  /* width: auto; */
  /* height: auto; */
}

a {
  cursor: pointer;
  outline: none;
  text-decoration: none;
  color: inherit
}

p a {
  text-decoration: underline
}

input {
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  height: 100%;
  width: 100%
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none
}

input::-ms-reveal,
input::-ms-clear {
  display: none
}

figure {
  margin: 0
}

button {
  /* padding: 0; */
  /* background: none; */
  /* border: none; */
  /* color: inherit; */
  /* text-align: left; */
  /* cursor: pointer; */
}

button:focus {
  outline: none
}

.ul-clear {
  padding: 0;
  margin: 0;
  list-style: none
}

.lazy {
  opacity: 0;
  transition: opacity .222s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}

.link {
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  display: inline-block
}

.input {
  position: relative;
  width: 100%
}

.form {
  --form-padding: 24px;
  --form-gap: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
  padding-inline: var(--form-padding)
}

.accordion {
  padding: 0;
  margin: 0;
  list-style: none
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  color: #fff;
  transition: all .222s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}

.footer {
  background-color: #006937;
  color: #fff;
  margin-block-start: 100px
}

.sli-title {
  font-size: var(--fs-h-xs);
  line-height: var(--lh-h-xs);
  font-weight: var(--fw-h-xs)
}

.sli-list-menu .sli-title {
  font-size: 20px;
  line-height: var(--lh-h-xs);
  font-weight: var(--fw-h-xs);
  text-align: center;
}

.sli-subs .link {
  font-weight: 300
}

.sli-cta {
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  margin-block-start: 0
}

.sli-cta::before,
.sli-cta::after {
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 32px
}

.sli-cta::after {
  display: none
}

.sli-cta small {
  order: 1
}

.hps {
  --feeds-padding: 30px;
}

.hps-title {
  font-size: var(--fs-h-xs);
  line-height: var(--lh-h-xxs);
  font-weight: var(--fw-h-xs);
  font-family: 'Aeonik Arabic';
  font-weight: 500;
  color: #fff;
}

.hps-numbers {
  --num-padding: 100px 0
}

.hps-numbers-body {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  padding-block: var(--num-padding)
}

.hps-numbers-inner {
  display: flex;
  flex-direction: column;
  height: 100%
}

.hps-numbers .aus-title {
  color: #fff
}

.hps-feeds {
  padding-block-start: var(--feeds-padding);
  border-block-start: 1px solid #e1dad5
}

.sli-list-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-left: 540px;
}

.sli-list-menu .sli-body .divison {
  width: 70px;
  margin-top: auto;
  margin-left: 42%;
}

.offcanvas__menu-wrapper.mean-container .mean-bar {
  width: 400px;
  float: left;
}

.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  padding-bottom: 22px;
}

@media(max-width: 1550px) {
  .sli-list-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-right: auto;
  }

  .sli-list-menu .sli-body .divison {
    width: 60px;
    margin-top: auto;
    margin-left: 30%;
  }
}

@media(max-width: 1350px) {
  .sli-list-menu .sli-title {
    font-size: 18px;
  }
}

@media(max-width: 1300px) {
  .sli-list-menu .sli-title {
    font-size: 18px;
  }

  .offcanvas__mid {
    width: 130%;
  }
}

@media(max-width: 1170px) {

  /* .sli-list-menu {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        margin-left: auto;
    } */
  .offcanvas__menu-wrapper.mean-container .mean-bar {
    width: 240px;
    float: left;
  }
}


@media(max-width: 960px) {
  .d {
    display: none !important
  }

  html {
    font-size: 16px
  }

  .header {
    background-color: rgba(23, 20, 49, .3);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
  }

  .footer {
    padding-block: 54px 40px
  }

  .sli {
    padding: 30px 45px;
    position: relative
  }

  .sli-list-menu .sli {
    padding: 30px 48px 30px 0;
    padding: unset;
    position: relative
  }

  .sli-media {
    display: none
  }


  .sli-subs {
    margin-block-start: 10px
  }

  .sli-cta {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 30px
  }

  .sli-cta small {
    display: none
  }

  .sli-cta::before {
    transform: scale(0.75);
    transform-origin: 100% 0
  }

  .sli+.sli {
    border-block-start: 1px solid #d9d9d9
  }

  .sli-list-menu .sli+.sli {
    border-block-start: none;
  }

  .sli-list-menu .sli+.sli+.sli {
    border-bottom: 1px solid #214950;
  }

  .hps {
    /* margin-block-start:40px; */
  }

  .hps-title {
    margin-block-end: 30px
  }

  .hps-numbers .aun {
    margin-block-start: auto
  }

}

@media(min-width: 480px) {
  :root {
    --fs-body-sm: 0.778rem;
    --fs-px-body-sm: 14px;
    --lh-body-sm: 1.429;
    --fw-body-sm: 400;
    --fs-button: 0.778rem;
    --fs-px-button: 14px;
    --lh-button: 1;
    --fw-button: 400;
    --fs-body: 1rem;
    --fs-px-body: 18px;
    --lh-body: 1.2;
    --fw-body: 400;
    --fs-body-md: 1.333rem;
    --fs-px-body-md: 24px;
    --lh-body-md: 1.2;
    --fw-body-md: 300;
    --fs-h-xxxs: 1.111rem;
    --fs-px-h-xxxs: 20px;
    --lh-h-xxxs: 1.2;
    --fw-h-xxxs: 500;
    --fs-h-xxs: 1.333rem;
    --fs-px-h-xxs: 24px;
    --lh-h-xxs: 1.2;
    --fw-h-xxs: 500;
    --fs-h-xs: 1.578rem;
    --fs-px-h-xs: 32px;
    --lh-h-xs: 1;
    --fw-h-xs: 400;
    --fs-h-sm: 2rem;
    --fs-px-h-sm: 36px;
    --lh-h-sm: 1;
    --fw-h-sm: 500;
    --fs-h: 2.667rem;
    --fs-px-h: 48px;
    --lh-h: 1;
    --fw-h: 400;
    --fs-h-lg: 3.333rem;
    --fs-px-h-lg: 60px;
    --lh-h-lg: 1;
    --fw-h-lg: 400;
    --fs-h-xl: 4.444rem;
    --fs-px-h-xl: 80px;
    --lh-h-xl: 1;
    --fw-h-xl: 400
  }

  html {
    font-size: 18px
  }

  .link:hover {
    border-bottom: 1px solid currentColor
  }

  .form {
    --form-padding: 80px;
    --form-gap: 30px
  }

  .footer {
    padding-block: 50px 52px
  }

  .sli {
    position: relative
  }

  .sli-media {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0;
    overflow: hidden
  }

  .sli-media figure {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
  }

  .sli-body {
    height: 510px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2
  }

  .sli-list-menu .sli-body {
    height: 196px;
    /* width: 220px; */
    padding: 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2
  }

  .sli-body .divison {
    width: 130px;
    margin-top: 20px;
    margin-left: 10%;
  }




  .sli-body .diagonal-serv {
    margin-top: auto;
    margin-left: 15%;
    color: white;
    border: none;
  }

  .sli-body .diagonal-serv:hover {
    border: none;
  }

  .sli-title {
    max-width: unset;
    display: block;
    padding-top: 20px;
    padding-bottom: 25px;
    text-align: left;
  }

  .sli-subs {
    margin-block-start: 14px
  }

  .sli-cta {
    margin-block-start: auto;
  }

  .sli-cta small {
    margin-inline-start: 15px
  }

  .sli-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .sli-list.unorder {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .sli:not(:nth-child(4n)) {
    border-inline-end: 1px solid #24424d;
  }

  .sli-list-menu .sli:not(:nth-child(4n)) {
    border-inline-end: 1px solid #24424d;
    border-bottom: 1px solid #24424d;
  }

  .sli-list-menu .sli:nth-child(2n) {
    border-right: none;
  }

  .sli-list-menu .sli:nth-child(3n) {
    border-bottom: none;
  }

  .offcanvas__left {
    border-right: none;
  }



  .sli:nth-child(-n+3) {
    /* border-block-end:1px solid #d9d9d9; */
  }

  .sli:hover .sli-media {
    animation: homeServiceHover .333s cubic-bezier(0.215, 0.61, 0.355, 1) forwards
  }

  .sli:hover .sli-media figure {
    animation: zoom 20s cubic-bezier(0.215, 0.61, 0.355, 1) forwards
  }

  .sli .sli-body {
    color: #fff
  }

  .sli:hover .sli-body {
    color: #fff
  }

  .sli:hover .sli-cta::before {
    display: none
  }

  .sli:hover .sli-cta::after {
    display: block
  }

  .hps {
    --feeds-padding: 40px;
    /* margin-block-start:60px; */
  }

  .hps-title-menu {
    margin-block-end: 20px;
    color: #fff;
    text-align: center;
  }

  .hps-title {
    margin-block-end: 60px
  }

  .hps-services .hps-title {
    margin-block-end: 80px
  }

  .hps-numbers {
    --num-padding: 190px 130px
  }

  .hps-numbers .aun {
    color: #fff;
    margin-block-start: auto
  }
}

@media (max-width: 1005px) {
  .sli-list-menu .sli-body {
    height: 196px;
    width: 190px;
    /* padding: 0 30px; */
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
  }

  .sli-list-menu .sli-body .divison {
    width: 50px;
    margin-top: 10px;
    /* margin-right: 86px; */
  }

  .sli-list-menu .sli-title {
    font-size: 15px;
  }

  .sli-list-menu {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, 0.39fr);
    margin-left: auto;
  }

}

@media(max-width: 960px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
  }

  .hps-body {
    /* display: none !important; */
    order: 1;
  }

  .offcanvas__menu-wrapper.mean-container .mean-bar {
    order: 2;
  }
}

@media screen and (min-width: 768px) and (max-width: 960px) {
  .offcanvas__mid {
    width: 170% !important;
  }

  .sli-list-menu {
    margin-top: 80px;
  }
}

@media (max-width:480px) {
  .sli-list-menu {
    margin-top: 0px;
  }

  .sli-list-menu .sli-body {
    height: 140px;
    width: 190px;
    /* padding: 0 30px; */
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
  }

  .sli-body .divison {
    width: 100px !important;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    display: block;
  }

  .sli-list-menu .sli-body .divison {
    width: 60px !important;
    margin-top: 10px;
    margin-left: 35%;
    display: block;
  }

  .sli .sli-body {
    color: #fff;
  }

  .sli-title {
    /* max-width: px; */
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
  }

  .sli-body .diagonal-serv {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    color: white;
    border: none;
  }

  .sli-list-menu .sli {
    padding: 0px;
    position: relative;
  }
}


/* ============================================================
   Banner — 100vh full-viewport on desktop (specificity fix)
   Matches existing 4-class chain to override min-height: 600px
   ============================================================ */
@media (min-width: 992px) {

  /* Override the existing min-height: 600px (and 800px parent rule) */
  .module.module--hero.hero--detail,
  .module.module--hero.hero--detail.hero--detail-compact:not(.hero--not-bg) {
    min-height: 100vh;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }

  /* Container fills the viewport and centers its content vertically */
  .module.module--hero.hero--detail .container,
  .module.module--hero.hero--detail.hero--detail-compact .container {
    min-height: 100vh;
    height: 100vh;
    justify-content: center;
    position: relative;
    z-index: 2;
  }

  /* Kill the 186px top padding that was pushing text down */
  .module.module--hero.hero--detail .hero-text-wrap {
    padding-top: 0;
    padding-bottom: 0;
    justify-content: center;
    height: auto;
  }

  /* Image layer fills entire hero, with teal fallback while loading */
  .module.module--hero.hero--detail .img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #1f383e;
    z-index: -1;
  }

  .module.module--hero.hero--detail .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Scroll indicator pinned to the bottom of the viewport */
  .module.module--hero.hero--detail .scroll-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
  }
}

.partnership .col-card+.col-card::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 2px;
  background: var(--primary);
  opacity: 1;
}

.ar_view.partnership .col-card+.col-card::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: -1%;
  width: 2px;
  background: var(--primary);
  opacity: 1;
}

.partnership__logo {
  height: 130px;
  object-fit: contain;
  margin-bottom: 36px;
}


@media (max-width: 991.98px) {
  .partnership .col-card {
    padding: 0 16px;
    margin-bottom: 50px;
  }

  .partnership .col-card+.col-card::before {
    display: none;
  }
}

.overlay-dark-bg-1:before {
  background: var(--secondary) !important;
}

.hover-box:hover .hover-img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.hover-img {
  transition: 1s cubic-bezier(.858, .01, .068, .99);
}

.blog__area-6 {
  overflow: hidden;
}

.blog__area-6 .blog__item {
  padding-bottom: 35px;
  position: relative;
  z-index: 1;
}

.blog__item {
  position: relative;
  z-index: 5;
}


.blog__item:hover .blog__img {
  transform: scale(1.3);
}

.blog__img-wrapper {
  overflow: hidden;
  margin-bottom: 25px;
  position: relative;
  z-index: 9;
}

.img-box {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.award_image{
  height: 120px;
}

@media only screen and (max-width: 767px) {
  .blog__item {
    padding-bottom: 30px;
  }
  .award_image{
    height:100px
  }
}
/* @media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .img-box {
    height: 325px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .img-box {
    height: 270px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .img-box {
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  .img-box {
    height: auto;
  }
} */
.img-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  object-fit: contain;     
  object-position: left;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* background-size: cover; */
}

@media (max-width: 1023px) {
  .img-box img {
    position: unset;
    width: 100%;
  }
}

.img-box img:nth-child(1) {
  transform: translatex(50%) scalex(2);
  opacity: 0;
  filter: blur(10px);
}

@media (max-width: 1023px) {
  .img-box img:nth-child(1) {
    display: none;
  }
}

.img-box:hover img:nth-child(2) {
  transform: translatex(-50%) scalex(2);
  opacity: 0;
  filter: blur(10px);
}

@media (max-width: 1023px) {
  .img-box:hover img:nth-child(2) {
    opacity: 1;
  }
}

.img-box:hover img:nth-child(1) {
  transform: translatex(0) scalex(1);
  opacity: 1;
  filter: blur(0);
}

.infographic-swiper .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  width: 8px;
  height: 8px;
  transition: background 0.25s, transform 0.25s;
}

.infographic-swiper .swiper-pagination-bullet-active {
  background: var(--primary);
  transform: scale(1.3);
}

.infographic-swiper .swiper-pagination {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.infographic-swiper .swiper-pagination-bullet {
  margin: 0 4px;
}

.infographic-swiper .swiper-button-next,
.infographic-swiper .swiper-button-prev {
  color: var(--primary);
  background: rgba(255, 255, 255, 0.08);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  top: 45%;
  transition: background 0.25s;
}

.infographic-swiper .swiper-button-next:hover,
.infographic-swiper .swiper-button-prev:hover {
  background: rgba(255, 255, 255, 0.26);
}

.infographic-swiper .swiper-button-next::after,
.infographic-swiper .swiper-button-prev::after {
  font-size: 18px;
  font-weight: 700;
}

.infographic-swiper .swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto
}
.gallery-swiper {
  padding: 20px 0 80px;
  overflow: hidden;
}
.gallery-swiper .swiper-button-next, .gallery-swiper .swiper-button-prev{
      transform: rotate(180deg);
      transition: all 0.3s;
    max-width: 100%;
}
.gallery-swiper .swiper-button-next, .gallery-swiper .swiper-button-prev{
  bottom: 5px;
  top: auto;
  width: 20px;
}
.gallery-swiper .swiper-button-prev{
  left: 90px;
}
.gallery-swiper .swiper-button-next::after, .gallery-swiper .swiper-button-prev::after{
  content: '' !important;
}
html[dir="rtl"] .glightbox-container,
html[dir="rtl"] .goverlay,
html[dir="rtl"] .gcontainer,
html[dir="rtl"] .gslider {
  direction: ltr;
}

html[dir="rtl"] .gnext {
  right: auto;
  left: 20px;
  transform: scaleX(-1);   
}

html[dir="rtl"] .gprev {
  left: auto;
  right: 20px;
  transform: scaleX(-1);
}

html[dir="rtl"] .gclose {
  right: auto;
  left: 20px;
}

html[dir="rtl"] .gcounter {
  right: auto;
  left: 20px;
  text-align: left;
}

html[dir="rtl"] .gdesc-inner,
html[dir="rtl"] .gslide-title,
html[dir="rtl"] .gslide-desc {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .gslide-desc a {
  direction: rtl;
}
@media (max-width: 991.98px) {
  .img-box img {
    object-position: center;
  }
}