@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: #10EFD5;
  --secondary: #2c2c2c;
  --black: #000;
  --black-2: #121212;
  --black-3: #555;
  --black-4: #1d1d1d;
  --black-5: #343434;
  --black-6: #262626;
  --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;
  --pink: #FAEDE9;
  --pink-2: #FF9776;
  --pink-3: #F3ECEC;
  --pink-4: #FFFAF0;
  --pink-5: #E0E3CC;
  --bg-line: #1e1e1e;
  --d-gray: #6A6A6A;
  --d-black: #1A1A1A;
  --d-black-2: #171717;
  --d-black-3: #1A1A1A;
}

/*----------------------------------------*/
/*  02. MIXIN CSS START
/*----------------------------------------*/
/*----------------------------------------*/
/*  03. SPACE CSS START
/*----------------------------------------*/
.pb-100 {
  padding-bottom: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pb-100 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pb-100 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .pb-100 {
    padding-bottom: 60px;
  }
}

.pb-110 {
  padding-bottom: 110px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pb-110 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pb-110 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .pb-110 {
    padding-bottom: 60px;
  }
}

.pb-120 {
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pb-120 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pb-120 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .pb-120 {
    padding-bottom: 60px;
  }
}

.pb-130 {
  padding-bottom: 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pb-130 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pb-130 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .pb-130 {
    padding-bottom: 60px;
  }
}

.pb-140 {
  padding-bottom: 140px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pb-140 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pb-140 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .pb-140 {
    padding-bottom: 60px;
  }
}

.pb-150 {
  padding-bottom: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pb-150 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pb-150 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .pb-150 {
    padding-bottom: 60px;
  }
}

.pt-100 {
  padding-top: 100px;
}
@media only screen and (max-width: 768px) {
  .pt-100 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pt-100 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pt-100 {
    padding-top: 90px;
  }
}
.pt-110 {
  padding-top: 110px;
}
@media only screen and (max-width: 768px) {
  .pt-110 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pt-110 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pt-110 {
    padding-top: 90px;
  }
}

.pt-120 {
  padding-top: 120px;
}
@media only screen and (max-width: 768px) {
  .pt-120 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pt-120 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pt-120 {
    padding-top: 90px;
  }
}
.pt-130 {
  padding-top: 130px;
}
@media only screen and (max-width: 768px) {
  .pt-130 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pt-130 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pt-130 {
    padding-top: 90px;
  }
}

.pt-140 {
  padding-top: 140px;
}
@media only screen and (max-width: 768px) {
  .pt-140 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pt-140 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pt-140 {
    padding-top: 90px;
  }
}

.pt-150 {
  padding-top: 150px;
}
@media only screen and (max-width: 768px) {
  .pt-150 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .pt-150 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .pt-150 {
    padding-top: 90px;
  }
}
/*----------------------------------------*/
/*  04. ANIMATION CSS START
/*----------------------------------------*/
@-webkit-keyframes wcRotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1.1);
            transform: rotate(0deg) scale(1.1);
  }
  50% {
    -webkit-transform: rotate(5deg) scale(1.17);
            transform: rotate(5deg) scale(1.17);
  }
  100% {
    -webkit-transform: rotate(0deg) scale(1.1);
            transform: rotate(0deg) scale(1.1);
  }
}
@keyframes wcRotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1.1);
            transform: rotate(0deg) scale(1.1);
  }
  50% {
    -webkit-transform: rotate(5deg) scale(1.17);
            transform: rotate(5deg) scale(1.17);
  }
  100% {
    -webkit-transform: rotate(0deg) scale(1.1);
            transform: rotate(0deg) scale(1.1);
  }
}
@-webkit-keyframes wcBubble {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.5;
  }
  100% {
    scale: 1;
  }
}
@keyframes wcBubble {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.5;
  }
  100% {
    scale: 1;
  }
}
@-webkit-keyframes wcZoom {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.5;
  }
  100% {
    scale: 1;
  }
}
@keyframes wcZoom {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.5;
  }
  100% {
    scale: 1;
  }
}
@-webkit-keyframes wcSlideBottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes wcSlideBottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes reveal {
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes reveal {
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@-webkit-keyframes wcfadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes wcfadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes wcSpinner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes wcSpinner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*----------------------------------------*/
/*  05. THEME CSS START
/*----------------------------------------*/
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Kanit", sans-serif;
}

html {
  scroll-behavior: smooth;
}

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

ul,
ol {
  padding: 0;
  margin: 0;
}

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

a {
  text-decoration: none;
  -webkit-transition: all 0.3s;
  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,
iframe,
img {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  max-width: 100%;
}

.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);
  z-index: -1;
}
.line-3 {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  right: 0;
  top: 0;
  background: var(--white-4);
}

.shape {
  position: absolute;
  left: -90px;
  bottom: -350px;
}
@media only screen and (max-width: 992px) {
  .shape {
    left: 200%;
    bottom: 0;
  }
}
@media only screen and (max-width: 768px) {
  .shape {
    left: 70%;
  }
}
.shape .primary {
  width: 54px;
  height: 56px;
  background-color: var(--primary);
  margin-top: -37px;
  margin-left: 24px;
}
.shape .secondary {
  width: 53px;
  height: 56px;
  background-color: var(--secondary);
}

.pos-inherit {
  position: inherit;
}

@media only screen and (max-width: 768px) {
  .g-0 {
    padding-right: 15px;
    padding-left: 15px;
  }
}
.sec-title-wrapper {
  position: relative;
  z-index: 9;
}

.footer-line {
  position: relative;
}
.footer-line::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 500px;
  left: 0;
  bottom: -400px;
  background: var(--white-4);
}
@media (max-width: 1023px) {
  .footer-line::after {
    height: 0;
  }
}

.scroll-top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 160px;
  z-index: 9991;
  border-radius: 100px;
  color: var(--white);
  background: var(--white);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: none;
  mix-blend-mode: exclusion;
}
.scroll-top i {
  font-size: 18px;
  color: var(--black-2);
}
.scroll-top:hover {
  color: var(--gray-2);
}
/* @media only screen and (min-width: 992px) and (max-width: 1200px) {
  .scroll-top {
    bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .scroll-top {
    right: 10px;
    bottom: 60px;
  }
}
@media only screen and (max-width: 768px) {
  .scroll-top {
    right: 5px;
    bottom: 55px;
  }
} */

.logo-light {
  display: none;
}
.logo-dark {
  display: block;
}

/*----------------------------------------*/
/*  06. THEME DARK CSS START
/*----------------------------------------*/
.dark {
  background-color: var(--black-2);
}
.dark .logo-light {
  display: block;
}
.dark .logo-dark {
  display: none;
}
.dark .portfolio__page section {
  margin-top: 0;
}
.dark .portfolio__page .wc-btn-dark:hover {
  color: var(--black-2);
  background-color: var(--white);
  border-color: var(--white);
}
.dark .wc-btn-primary, .dark .wc-btn-black, .dark .wc-btn-light, .dark .wc-btn-pink,
.dark .wc-btn-secondary {
  border-color: var(--secondary);
  color: var(--gray-2);
}
.dark .wc-btn-black:hover {
  border-color: var(--white);
  color: var(--black-2);
}
.dark .wc-btn-black:hover span {
  background-color: var(--white);
}
.dark .line::before,
.dark .line::after,
.dark .line-3 {
  background-color: var(--bg-line);
}
.dark p {
  color: var(--gray-2);
}
.dark .sec-title,
.dark .sec-title-2,
.dark .sec-title-3,
.dark .sec-sub-title {
  color: var(--white);
}
.dark .main-dropdown {
  background-color: var(--white);
}
.dark .main-dropdown .sub-dropdown {
  background-color: var(--white);
}
.dark .main-dropdown li a {
  color: var(--black-2) !important;
}
.dark .main-dropdown li a .menu-text {
  text-shadow: 0 16px 0 var(--black-2) !important;
}
.dark .mega-menu, .dark .mega-menu-2 {
  background-color: var(--white);
}
.dark .mega-menu a:not([href]), .dark .mega-menu-2 a:not([href]),
.dark .mega-menu a:not([href]):hover {
  color: var(--black-2);
}
.dark .mega-menu li a, .dark .mega-menu-2 li a {
  color: var(--black-2) !important;
}
.dark .mega-menu li a .menu-text, .dark .mega-menu-2 li a .menu-text {
  text-shadow: 0 16px 0 var(--black-2) !important;
}
.dark .hero__title-5, .dark .hero__content-5 p {
  color: var(--white);
}
.dark .hero-title {
  color: var(--white);
}

.dark .hero__about {
  background-color: var(--d-black-2);
  background-blend-mode: color-burn;
}
.dark .hero__about-award::before {
  background-color: var(--secondary);
}
.dark .hero__about-award img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

.dark .counter__area {
  background-color: var(--black-2);
}
@media (max-width: 1200px) {
  .dark .counter__area-3 {
    background-color: var(--black-2);
  }
}
.dark .counter__area-3 .counter__number {
  color: var(--white);
}
.dark .counter__about {
  background-color: var(--d-black-2);
}
.dark .counter__number {
  color: var(--white);
}
.dark .counter__item {
  border-color: var(--secondary);
}
.dark .counter__item::before {
  background-color: transparent;
}
.dark .counter__item::after {
  background-color: transparent;
}
.dark .counter__img-3 img {
  -webkit-filter: contrast(0.5);
          filter: contrast(0.5);
}
.dark .workflow__area {
  background-color: var(--black-2);
}
.dark .workflow__area .sec-title {
  color: var(--white);
}
.dark .workflow__area-3 {
  background-color: var(--black-2);
}

.dark .workflow__slide::before {
  background-color: var(--bg-line);
}
.dark .workflow__slide::after {
  border-color: var(--black-2);
}

.dark .workflow__number {
  color: var(--d-black-3);
}
.dark .workflow__title {
  color: var(--white);
}

.dark .workflow__step {
  color: var(--white);
}

.dark .brand__about {
  background-color: var(--d-black-2);
}
.dark .brand__title-3 {
  color: var(--white);
}
.dark .brand__list, .dark .brand__list-3, .dark .brand__list-2 {
  background-color: transparent;
  border-color: var(--bg-line);
}
.dark .brand__item {
  border-color: var(--bg-line);
}
.dark .service__area {
  background-color: var(--d-black-2);
}

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

.dark .service__detail {
  background-color: var(--d-black-2);
}
.dark .service-v4.pb-150 {
  padding-bottom: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .dark .service-v4.pb-150 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .dark .service-v4.pb-150 {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 768px) {
  .dark .service-v4.pb-150 {
    padding-bottom: 60px;
  }
}
/* .dark .portfolio__area {
  background-color: var(--d-black-2);
} */
.dark .portfolio__area-2 {
  background-color: var(--black-2);
}
.dark .portfolio__area-2::after {
  background: var(--secondary);
}
.dark .portfolio__area-5 {
  background-color: var(--black-2);
  border-color: var(--secondary);
}
.dark .portfolio__area-5::before, .dark .portfolio__area-5::after,
.dark .portfolio__area-5 .sec-line-1,
.dark .portfolio__area-5 .sec-line-2 {
  -webkit-filter: invert(0);
          filter: invert(0);
}
.dark .portfolio__area-6 {
  background-color: var(--black-2);
}
.dark .portfolio__area-6 .pb-140 {
  padding-bottom: 0;
}
.dark .portfolio__area-6 .sec-title-wrapper p::before {
  background-color: var(--white);
}
.dark .portfolio-v4 {
  background-color: var(--d-black-2);
}
.dark .portfolio__slider-2::after {
  background: var(--secondary);
}
.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 .portfolio__slide-2 {
  background-color: var(--black-2);
}
.dark .portfolio__slide-2 .sec-title a {
  color: var(--white);
}
.dark .portfolio__slide-2 .btn-common {
  color: var(--gray);
}
.dark .portfolio__slide-2 .btn-common:hover {
  color: var(--white);
}
.dark .portfolio__detail {
  background-color: var(--black-2);
}
.dark .portfolio__detail-info ul li {
  color: var(--gray-2);
}
.dark .portfolio__detail-info ul li a,
.dark .portfolio__detail-info ul li span {
  color: var(--gray-2);
}
.dark .portfolio__detail-title {
  color: var(--white);
}
.dark .portfolio__detail-text p,
.dark .portfolio__detail-text li {
  color: var(--gray-2);
}
.dark .portfolio__detail-text .fonts img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__detail-text .fonts ul .semibold,
.dark .portfolio__detail-text .fonts ul .medium {
  color: var(--gray-2);
}
.dark .portfolio__title-6, .dark .portfolio__current {
  color: var(--white);
}
.dark .portfolio__date, .dark .portfolio__pagination-6 {
  color: var(--gray-2);
}
.dark .portfolio__project {
  background-color: var(--black-2);
}
.dark .portfolio__project::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__project .pp-title,
.dark .portfolio__project .pp-slide-title,
.dark .portfolio__project .swipper-btn {
  color: var(--white);
}
.dark .portfolio__project .pp-slide-thumb p {
  color: var(--gray-2);
}
.dark .portfolio__project .pp-prev::after,
.dark .portfolio__project .pp-next::after {
  background-color: var(--white);
}
.dark .portfolio__footer {
  border-color: var(--secondary);
}
.dark .portfolio__footer-area {
  background-color: var(--black-2);
  background-blend-mode: overlay;
}
.dark .portfolio__footer-area::before {
  -webkit-filter: invert(0.8);
          filter: invert(0.8);
}
.dark .portfolio__footer-area::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__footer-area .pf-title,
.dark .portfolio__footer-area .pf-contact h3,
.dark .portfolio__footer-area .pf-contact ul li a,
.dark .portfolio__footer-area .pf-social ul li a {
  color: var(--white);
}
.dark .portfolio__footer-area .pf-social ul li a:hover {
  color: var(--black-2);
  background-color: var(--white);
}
.dark .portfolio__service {
  background-color: var(--d-black-2);
  background-blend-mode: overlay;
}
.dark .portfolio__service .sec-text, .dark .portfolio__service-item {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__service .ps-btn a {
  color: var(--white);
  border-color: var(--white);
}
.dark .portfolio__hero .title {
  color: var(--white);
}
.dark .portfolio__hero .title.text-stroke {
  -webkit-text-stroke: 1px var(--white);
}
.dark .portfolio__hero .title.shape-circle::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__about {
  background-color: var(--d-black-2);
}
.dark .portfolio__about::after {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .portfolio__about .sec-text p {
  color: var(--gray-2);
}
.dark .portfolio__about .sec-title span::before {
  background-color: var(--white);
}
.dark .portfolio__about-left img {
  -webkit-filter: invert(0.5);
          filter: invert(0.5);
}
.dark .portfolio__about .brand-title {
  color: var(--gray-2);
}
.dark .portfolio__about .about-row,
.dark .portfolio__about .brand-title-wrap {
  border-color: var(--secondary);
}
.dark .wc-btn-dark {
  color: var(--white);
  border-color: var(--white);
}

.dark .client__name-3 {
  color: var(--white);
}
.dark .client__role-3 {
  color: var(--gray-2);
}
.dark .team__area {
  background-color: var(--d-black-2);
}
.dark .team__area-6 {
  background-color: var(--black-2);
  background-blend-mode: color-burn;
} 
.dark .team__about {
  background-color: var(--black-2);
}
.dark .team__btm {
  background-color: var(--black-2);
}

.dark .team__member-name-6, .dark .team__member-name-7 {
  color: var(--white);
}
.dark .team__member-role-6, .dark .team__member-role-7 {
  color: var(--gray-2);
}
.dark .team__member-role-7 span {
  color: var(--white);
}
.dark .team__member-role-7::after {
  background-color: var(--white);
}
.dark .team__member-work li a {
  color: var(--white);
}
.dark .team__member-work li a:hover {
  color: var(--black-2);
  background-color: var(--white);
}
.dark .team__member-social li a:hover {
  color: var(--white);
}
.dark .team__detail {
  background-color: var(--black-2);
}
.dark .team__detail.pb-140 {
  padding-bottom: 60px;
}
.dark .team__detail-page .line-1,
.dark .team__detail-page .line-2,
.dark .team__detail-page .line-3 {
  background: var(--bg-line);
}
.dark .team__detail .work-title {
  color: var(--white);
}
.dark .cta__area {
  background-color: var(--black-2);
}
.dark .cta__area .line {
  padding-top: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .dark .cta__area .line {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .dark .cta__area .line {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 768px) {
  .dark .cta__area .line {
    padding-top: 60px;
  }
}
.dark .cta__area .line.no-p {
  padding-top: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .dark .cta__area .line.no-p {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 768px) {
  .dark .cta__area .line.no-p {
    padding-top: 60px;
  }
}
.dark .cta__area .dark-p {
  padding-top: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .dark .cta__area .dark-p {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .dark .cta__area .dark-p {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 768px) {
  .dark .cta__area .dark-p {
    padding-top: 60px;
  }
}

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

.dark .cta__title {
  color: var(--white);
}
.dark .cta__title-2 {
  color: var(--white);
}
.dark .cta__sub-title {
  color: var(--white);
}
@media only screen and (max-width: 768px) {
  .dark .cta__content {
    padding-top: 0px;
  }
}

.dark .footer-menu-2 li a {
  color: var(--white);
}
.dark .footer-menu-2 li a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}
.dark .footer-line::after {
  background: var(--bg-line);
}
.dark .award__area {
  background-color: var(--d-black-2);
}
.dark .main-menu .mega-menu li a, .dark .main-menu .mega-menu-2 li a {
  color: var(--black-2);
}
.dark .choose-title {
  color: var(--white);
}
.dark .research__area {
  background-color: var(--d-black-2);
  background-blend-mode: exclusion;
}
@media (max-width: 1200px) {
  .dark .research__area {
    background-color: var(--black-2);
    padding-bottom: 0;
  }
}
.dark .research__area .sec-sub-title,
.dark .research__area .sec-title-wrapper p {
  color: var(--white);
}
@media only screen and (max-width: 768px) {
  .dark .research__list {
    padding-bottom: 0;
  }
}
.dark .research__item p, .dark .research__number span, .dark .research__title {
  color: var(--white);
}
.dark .research__tools li a {
  color: var(--white);
  border-color: var(--white);
}
.dark .research__tools li a:hover {
  color: var(--black-2);
  background-color: var(--white);
}
.dark .price__area {
  background-color: var(--black-2);
}
.dark .price__item:first-child {
  background-color: var(--d-black-2);
}
.dark .story__area {
  background-color: var(--d-black-2);
}
.dark .story__area .line {
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .dark .story__area .line {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 992px) {
  .dark .story__area .line {
    padding-bottom: 90px;
  }
}
.dark .story__text p {
  color: var(--gray-2);
}
.dark .error__page {
  background-color: var(--d-black-2);
}
.dark .error__content h2 {
  color: var(--white);
}
.dark .error__content img {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .career__top {
  background-color: var(--black-2);
}
.dark .career__gallery {
  background-color: var(--black-2);
}
.dark .career__gallery ul li {
  color: var(--white);
}
.dark .career__gallery ul li::after {
  background-color: var(--white);
}
.dark .career__gallery p {
  color: var(--gray-2);
}
.dark .career__benefits {
  background-color: var(--black-2);
}
.dark .career__benefits-list li {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__area-6 {
  background-color: var(--black-2);
}
.dark .contact__form input::-webkit-input-placeholder, .dark .contact__form textarea::-webkit-input-placeholder {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__form input::-moz-placeholder, .dark .contact__form textarea::-moz-placeholder {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__form input:-ms-input-placeholder, .dark .contact__form textarea:-ms-input-placeholder {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__form input::-ms-input-placeholder, .dark .contact__form textarea::-ms-input-placeholder {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__form textarea,
.dark .contact__form input,
.dark .contact__form input::placeholder,
.dark .contact__form textarea::placeholder {
  color: var(--white);
  border-color: var(--bg-line);
}
.dark .contact__form textarea:focus,
.dark .contact__form input:focus {
  border-color: var(--white);
}
.dark .contact__info h3,
.dark .contact__info ul li span,
.dark .contact__info ul li a {
  color: var(--white);
}
.dark .faq__area {
  background-color: var(--d-black-2);
}
.dark .faq__area-6 {
  background-color: var(--black-2);
}
.dark .faq__btm {
  background-color: var(--black-2);
}
.dark .faq__list .accordion-button, .dark .faq__list-3 .accordion-button, .dark .faq__list-6 .accordion-button {
  color: var(--white);
}
.dark .faq__title {
  color: var(--white);
}
.dark .job__detail {
  background-color: var(--black-2);
}
.dark .job__detail-top {
  background-color: var(--d-black-2);
}
.dark .job__detail-content {
  border-color: var(--bg-line);
}
.dark .job__detail-content ul li {
  color: var(--gray-2);
}
.dark .job__detail-content h1,
.dark .job__detail-content h2,
.dark .job__detail-content h3,
.dark .job__detail-content h4,
.dark .job__detail-content h5,
.dark .job__detail-content h6 {
  color: var(--white);
}
.dark .job__detail-meta li {
  color: var(--gray-2);
}
.dark .job__detail-sidebar {
  background-color: var(--d-black-2);
}
.dark .job__detail-sidebar ul li {
  color: var(--gray-2);
}
.dark .development__area {
  background-color: var(--d-black-2);
}
.dark .development__wrapper ul li {
  color: var(--gray-2);
}
.dark .development__content {
  border-color: var(--secondary);
}
.dark .solution__area {
  background-color: var(--black-2);
}
.dark .solution__title {
  color: var(--white);
}
.dark .solution__mid p {
  color: var(--gray-2);
}
.dark .solution__mid p::before {
  background-color: var(--white);
}
.dark .solution__btm li {
  color: var(--white);
}
.dark .solution__img-1::after, .dark .solution__img-2::after, .dark .solution__img-3::after {
  border-color: var(--secondary);
  z-index: 0;
}
.dark .solution__shape .shape-5 {
  z-index: 0;
}
.dark .solution__shape .shape-2 {
  -webkit-filter: invert(1);
          filter: invert(1);
}
@media only screen and (max-width: 992px) {
  .dark .solution__shape .shape-4 {
    top: 55%;
  }
}
.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 {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .modal .close_btn-2:hover {
  color: var(--white);
}
.dark .modal__close-2:hover {
  color: var(--white);
}
.dark .menu-text-5 {
  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 .circle-origin {
  stroke: 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 .bg-white {
  background-color: var(--black-2) !important;
}
.dark .menu-text-pp {
  color: var(--white);
}
.dark .job__area {
  background-color: var(--d-black-2);
}
.dark .portfolio__area-5 .sec-line {
  background-color: #D3D3D3;
}
.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);
}
.dark .error__content::before {
  -webkit-filter: invert(1);
          filter: invert(1);
}

/*----------------------------------------*/
/*  07. Button CSS START
/*----------------------------------------*/
.wc-btn-primary, .wc-btn-black, .wc-btn-light, .wc-btn-pink, .wc-btn-secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 170px;
  height: 170px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  text-transform: capitalize;
  color: var(--black-3);
  border: 1px solid var(--gray);
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 768px) {
  .wc-btn-primary, .wc-btn-black, .wc-btn-light, .wc-btn-pink, .wc-btn-secondary {
    padding: 30px;
  }
}
.wc-btn-primary:hover, .wc-btn-black:hover, .wc-btn-light:hover, .wc-btn-pink:hover, .wc-btn-secondary:hover {
  color: var(--black-2);
  border: 1px solid var(--primary);
}
.wc-btn-primary:hover span, .wc-btn-black:hover span, .wc-btn-light:hover span, .wc-btn-pink:hover span, .wc-btn-secondary:hover span {
  width: 350px;
  height: 350px;
}
.wc-btn-primary i, .wc-btn-black i, .wc-btn-light i, .wc-btn-pink i, .wc-btn-secondary i {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  padding-left: 5px;
}
.wc-btn-primary span, .wc-btn-black span, .wc-btn-light span, .wc-btn-pink span, .wc-btn-secondary span {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  background-color: var(--primary);
  z-index: -1;
  border-radius: 100%;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.wc-btn-secondary {
  border: 1px solid var(--secondary);
  color: var(--gray-2);
	color: var(--white);
}
.wc-btn-pink {
  border: 1px solid var(--secondary);
  color: var(--gray-2);
}
.wc-btn-pink:hover {
  border-color: var(--pink-2);
}
.wc-btn-pink span {
  background-color: var(--pink-2);
}
.wc-btn-light {
  border: 1px solid var(--secondary);
  color: var(--gray-2);
}
.wc-btn-light:hover {
  border-color: var(--white);
}
.wc-btn-light span {
  background-color: var(--white);
}
.wc-btn-black:hover {
  color: var(--white);
  border-color: var(--black-2);
}
.wc-btn-black span {
  background-color: var(--black-2);
}
.wc-btn-dark {
  display: inline-block;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: var(--black-2);
  border: 1.3px solid var(--black-2);
  border-radius: 33px;
  padding: 20px 54px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.wc-btn-dark:hover {
  color: var(--black-2);
  background-color: var(--white);
  border-color: var(--white);
}

#btn_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 100%;
  margin-left: -40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  #btn_wrapper {
    width: 220px;
    height: 220px;
    margin-left: -25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  #btn_wrapper {
    width: 190px;
    height: 190px;
    margin-left: -10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  #btn_wrapper {
    width: 180px;
    height: 180px;
    margin-left: -5px;
  }
}
@media only screen and (max-width: 768px) {
  #btn_wrapper {
    height: 175px;
    width: 175px;
    margin-left: -2.5px;
  }
}

.btn-item {
  position: absolute;
}

@media only screen and (max-width: 992px) {
  .service__top-btn #btn_wrapper {
    width: 170px;
    height: 170px;
  }
  .service__top-btn #btn_wrapper .btn-item {
    top: 0;
    left: 0;
  }
}
/*----------------------------------------*/
/*  08. TITLE CSS START
/*----------------------------------------*/
.sec-title {
  font-weight: 500;
  font-size: 60px;
  line-height: 1;
  color: var(--black-2);
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .sec-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .sec-title {
    /* font-size: 45px; */
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .sec-title {
    font-size: 36px;
  }
}
@media only screen and (max-width: 768px) {
  .sec-title {
    font-size: 32px;
  }
}
@media only screen and (max-width: 576px) {
  .sec-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 480px) {
  .sec-title {
    font-size: 28px;
  }
}
.sec-title-2 {
  font-weight: 500;
  font-size: 120px;
  line-height: 0.9;
  color: var(--black-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .sec-title-2 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .sec-title-2 {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .sec-title-2 {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .sec-title-2 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 768px) {
  .sec-title-2 {
    font-size: 45px;
  }
}
.sec-title-3 {
  font-weight: 500;
  font-size: 130px;
  line-height: 1;
  color: var(--black-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .sec-title-3 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .sec-title-3 {
    /* font-size: 100px; */
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .sec-title-3 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .sec-title-3 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 768px) {
  .sec-title-3 {
    font-size: 48px;
  }
}
.sec-sub-title {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: var(--black-3);
  padding-bottom: 15px;
  text-transform: capitalize;
}
.sec-sub-title  div{
  display: inline-flex!important;
}
span.exclamation {
  font-size: 25px;
  color: var(--white);
  text-transform: initial;
  padding: 10px 25px;
  margin-right: 18px;
  border-radius: 15px 15px 28px 28px;
  background-color: var(--primary);
  display: inline-block;
}

.hero-title {
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  color: var(--black);
}
@media only screen and (max-width: 1400px) {
  .hero-title {
    font-size: 60px;
  }
}
@media only screen and (max-width: 992px) {
  .hero-title {
    font-size: 48px;
  }
}
@media only screen and (max-width: 768px) {
  .hero-title {
    font-size: 36px;
  }
}

.title-line {
  overflow: hidden;
}

@media (min-width: 1200px) {
  .img-anim {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 565px;
  }
  .img-anim img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 120%;
    margin-left: auto;
    margin-right: auto;
  }
}
/*----------------------------------------*/
/*  09. MENU CSS START
/*----------------------------------------*/
.main-menu li {
  display: inline-block;
  margin: 0 38px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .main-menu li {
    margin: 0 19px;
  }
}
.main-menu li.has-megamenu {
  position: static;
}
.main-menu li:hover .main-dropdown {
  top: 81px;
  opacity: 1;
  visibility: visible;
}
.main-menu li:hover .mega-menu, .main-menu li:hover .mega-menu-2 {
  top: 81px;
  opacity: 1;
  visibility: visible;
}
.main-menu li a {
  display: block;
  font-weight: 400;
  font-size: 18px;
  line-height: 16px;
  color: var(--white);
  padding: 29px 0;
  outline: none;
  text-transform: capitalize;
  -webkit-transform: translateY(var(--y)) translateZ(0);
          transform: translateY(var(--y)) translateZ(0);
  -webkit-transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
}
.main-menu li a .menu-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-shadow: 0 16px 0 var(--white);
}
.main-menu li a .menu-text span {
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-style: normal;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform: translateY(var(--m)) translateZ(0);
          transform: translateY(var(--m)) translateZ(0);
}
.main-menu li a .menu-text span:nth-child(1) {
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
}
.main-menu li a .menu-text span:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.main-menu li a .menu-text span:nth-child(3) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.main-menu li a .menu-text span:nth-child(4) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.main-menu li a .menu-text span:nth-child(5) {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.main-menu li a .menu-text span:nth-child(6) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.main-menu li a .menu-text span:nth-child(7) {
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.main-menu li a .menu-text span:nth-child(8) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.main-menu li a .menu-text span:nth-child(9) {
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}
.main-menu li a .menu-text span:nth-child(10) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.main-menu li a .menu-text span:nth-child(11) {
  -webkit-transition-delay: 0.55s;
          transition-delay: 0.55s;
}
.main-menu li a .menu-text span:nth-child(12) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.main-menu li a .menu-text span:nth-child(13) {
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
}
.main-menu li a .menu-text span:nth-child(14) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.main-menu li a .menu-text span:nth-child(15) {
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}
.main-menu li a .menu-text span:nth-child(16) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.main-menu li a .menu-text span:nth-child(17) {
  -webkit-transition-delay: 0.85s;
          transition-delay: 0.85s;
}
.main-menu li a .menu-text span:nth-child(18) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.main-menu li a .menu-text span:nth-child(19) {
  -webkit-transition-delay: 0.95s;
          transition-delay: 0.95s;
}
.main-menu li a .menu-text span:nth-child(20) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.main-menu li a .menu-text span:nth-child(21) {
  -webkit-transition-delay: 1.05s;
          transition-delay: 1.05s;
}
.main-menu li a .menu-text span:nth-child(22) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.main-menu li a .menu-text span:nth-child(23) {
  -webkit-transition-delay: 1.15s;
          transition-delay: 1.15s;
}
.main-menu li a .menu-text span:nth-child(24) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.main-menu li a .menu-text span:nth-child(25) {
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}
.main-menu li a .menu-text span:nth-child(26) {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
.main-menu li a .menu-text span:nth-child(27) {
  -webkit-transition-delay: 1.35s;
          transition-delay: 1.35s;
}
.main-menu li a .menu-text span:nth-child(28) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.main-menu li a .menu-text span:nth-child(29) {
  -webkit-transition-delay: 1.45s;
          transition-delay: 1.45s;
}
.main-menu li a .menu-text span:nth-child(30) {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.main-menu li a .menu-text span:nth-child(31) {
  -webkit-transition-delay: 1.55s;
          transition-delay: 1.55s;
}
.main-menu li a .menu-text span:nth-child(32) {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.main-menu li a .menu-text span:nth-child(33) {
  -webkit-transition-delay: 1.65s;
          transition-delay: 1.65s;
}
.main-menu li a .menu-text span:nth-child(34) {
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}
.main-menu li a .menu-text span:nth-child(35) {
  -webkit-transition-delay: 1.75s;
          transition-delay: 1.75s;
}
.main-menu li a .menu-text span:nth-child(36) {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}
.main-menu li a .menu-text span:nth-child(37) {
  -webkit-transition-delay: 1.85s;
          transition-delay: 1.85s;
}
.main-menu li a .menu-text span:nth-child(38) {
  -webkit-transition-delay: 1.9s;
          transition-delay: 1.9s;
}
.main-menu li a .menu-text span:nth-child(39) {
  -webkit-transition-delay: 1.95s;
          transition-delay: 1.95s;
}
.main-menu li a .menu-text span:nth-child(40) {
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}
.main-menu li a .menu-text span:nth-child(41) {
  -webkit-transition-delay: 2.05s;
          transition-delay: 2.05s;
}
.main-menu li a .menu-text span:nth-child(42) {
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
}
.main-menu li a .menu-text span:nth-child(43) {
  -webkit-transition-delay: 2.15s;
          transition-delay: 2.15s;
}
.main-menu li a .menu-text span:nth-child(44) {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}
.main-menu li a .menu-text span:nth-child(45) {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}
.main-menu li a .menu-text span:nth-child(46) {
  -webkit-transition-delay: 2.3s;
          transition-delay: 2.3s;
}
.main-menu li a .menu-text span:nth-child(47) {
  -webkit-transition-delay: 2.35s;
          transition-delay: 2.35s;
}
.main-menu li a .menu-text span:nth-child(48) {
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}
.main-menu li a .menu-text span:nth-child(49) {
  -webkit-transition-delay: 2.45s;
          transition-delay: 2.45s;
}
.main-menu li a:hover {
  --y: -4px;
}
.main-menu li a:hover span {
  --m: calc(16px * -1);
}
.main-menu .mega-menu li a, .main-menu .mega-menu-2 li a {
  color: var(--white);
}

.main-dropdown {
  position: absolute;
  width: 300px;
  left: 0;
  top: 85px;
  z-index: 9;
  background-color: var(--black-2);
  text-align: left;
  padding: 15px 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.main-dropdown .sub-dropdown {
  position: absolute;
  width: 300px;
  left: 100%;
  top: 0;
  z-index: 9;
  background-color: var(--black-2);
  text-align: left;
  padding: 15px 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.main-dropdown li {
  display: block;
  margin: 0;
  padding: 0;
}
.main-dropdown li:hover .sub-dropdown {
  opacity: 1;
  visibility: visible;
}
.main-dropdown li a {
  color: var(--white);
  display: block;
  padding: 10px 20px;
  text-transform: capitalize;
}
.main-dropdown li a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}

.mega-menu, .mega-menu-2 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 110px;
  z-index: 9;
  background-color: var(--black-2);
  text-align: left;
  padding: 50px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 30px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.mega-menu li, .mega-menu-2 li {
  padding: 0;
  margin: 0;
}
.mega-menu li a, .mega-menu-2 li a {
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  padding: 10px;
  margin-bottom: 10px;
  text-transform: capitalize;
}
.mega-menu li a .menu-text, .mega-menu-2 li a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}
.mega-menu li a:not([href]):not([class]), .mega-menu-2 li a:not([href]):not([class]) {
  color: var(--white);
}
.mega-menu li ul, .mega-menu-2 li ul {
  text-align: left;
}
.mega-menu li ul li, .mega-menu-2 li ul li {
  display: block;
  margin: 0;
}
.mega-menu li ul li a, .mega-menu-2 li ul li a {
  font-weight: 400;
  font-size: 16px;
  padding: 10px 12px;
  display: block;
  margin-bottom: 0;
  text-transform: capitalize;
}
.mega-menu-2 {
  width: auto;
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: repeat(2, 1fr);
}

.footer-menu-2 {
  text-align: right;
}
@media only screen and (max-width: 768px) {
  .footer-menu-2 {
    text-align: center;
  }
}
.footer-menu-2 li {
  display: inline-block;
  padding-left: 80px;
}
@media only screen and (max-width: 1919px) {
 .footer-menu-2 li {
    padding-left: 60px;
  }
}
@media only screen and (max-width: 1200px) {
  .footer-menu-2 li {
    padding-left: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .footer-menu-2 li {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.footer-menu-2 li a {
  display: block;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: var(--black-2);
  text-transform: capitalize;
}
.footer-menu-2 li a .menu-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  text-shadow: 0 16px 0 var(--black-2);
}
.footer-menu-2 li a .menu-text span {
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-style: normal;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform: translateY(var(--m)) translateZ(0);
          transform: translateY(var(--m)) translateZ(0);
}
.footer-menu-2 li a .menu-text span:nth-child(1) {
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
}
.footer-menu-2 li a .menu-text span:nth-child(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.footer-menu-2 li a .menu-text span:nth-child(3) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.footer-menu-2 li a .menu-text span:nth-child(4) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.footer-menu-2 li a .menu-text span:nth-child(5) {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.footer-menu-2 li a .menu-text span:nth-child(6) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.footer-menu-2 li a .menu-text span:nth-child(7) {
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.footer-menu-2 li a .menu-text span:nth-child(8) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.footer-menu-2 li a .menu-text span:nth-child(9) {
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}
.footer-menu-2 li a .menu-text span:nth-child(10) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.footer-menu-2 li a .menu-text span:nth-child(11) {
  -webkit-transition-delay: 0.55s;
          transition-delay: 0.55s;
}
.footer-menu-2 li a .menu-text span:nth-child(12) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.footer-menu-2 li a .menu-text span:nth-child(13) {
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
}
.footer-menu-2 li a .menu-text span:nth-child(14) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.footer-menu-2 li a .menu-text span:nth-child(15) {
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}
.footer-menu-2 li a .menu-text span:nth-child(16) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.footer-menu-2 li a .menu-text span:nth-child(17) {
  -webkit-transition-delay: 0.85s;
          transition-delay: 0.85s;
}
.footer-menu-2 li a .menu-text span:nth-child(18) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.footer-menu-2 li a .menu-text span:nth-child(19) {
  -webkit-transition-delay: 0.95s;
          transition-delay: 0.95s;
}
.footer-menu-2 li a .menu-text span:nth-child(20) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.footer-menu-2 li a .menu-text span:nth-child(21) {
  -webkit-transition-delay: 1.05s;
          transition-delay: 1.05s;
}
.footer-menu-2 li a .menu-text span:nth-child(22) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.footer-menu-2 li a .menu-text span:nth-child(23) {
  -webkit-transition-delay: 1.15s;
          transition-delay: 1.15s;
}
.footer-menu-2 li a .menu-text span:nth-child(24) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.footer-menu-2 li a .menu-text span:nth-child(25) {
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}
.footer-menu-2 li a .menu-text span:nth-child(26) {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
.footer-menu-2 li a .menu-text span:nth-child(27) {
  -webkit-transition-delay: 1.35s;
          transition-delay: 1.35s;
}
.footer-menu-2 li a .menu-text span:nth-child(28) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.footer-menu-2 li a .menu-text span:nth-child(29) {
  -webkit-transition-delay: 1.45s;
          transition-delay: 1.45s;
}
.footer-menu-2 li a .menu-text span:nth-child(30) {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.footer-menu-2 li a .menu-text span:nth-child(31) {
  -webkit-transition-delay: 1.55s;
          transition-delay: 1.55s;
}
.footer-menu-2 li a .menu-text span:nth-child(32) {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.footer-menu-2 li a .menu-text span:nth-child(33) {
  -webkit-transition-delay: 1.65s;
          transition-delay: 1.65s;
}
.footer-menu-2 li a .menu-text span:nth-child(34) {
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}
.footer-menu-2 li a .menu-text span:nth-child(35) {
  -webkit-transition-delay: 1.75s;
          transition-delay: 1.75s;
}
.footer-menu-2 li a .menu-text span:nth-child(36) {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}
.footer-menu-2 li a .menu-text span:nth-child(37) {
  -webkit-transition-delay: 1.85s;
          transition-delay: 1.85s;
}
.footer-menu-2 li a .menu-text span:nth-child(38) {
  -webkit-transition-delay: 1.9s;
          transition-delay: 1.9s;
}
.footer-menu-2 li a .menu-text span:nth-child(39) {
  -webkit-transition-delay: 1.95s;
          transition-delay: 1.95s;
}
.footer-menu-2 li a .menu-text span:nth-child(40) {
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}
.footer-menu-2 li a .menu-text span:nth-child(41) {
  -webkit-transition-delay: 2.05s;
          transition-delay: 2.05s;
}
.footer-menu-2 li a .menu-text span:nth-child(42) {
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
}
.footer-menu-2 li a .menu-text span:nth-child(43) {
  -webkit-transition-delay: 2.15s;
          transition-delay: 2.15s;
}
.footer-menu-2 li a .menu-text span:nth-child(44) {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}
.footer-menu-2 li a .menu-text span:nth-child(45) {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}
.footer-menu-2 li a .menu-text span:nth-child(46) {
  -webkit-transition-delay: 2.3s;
          transition-delay: 2.3s;
}
.footer-menu-2 li a .menu-text span:nth-child(47) {
  -webkit-transition-delay: 2.35s;
          transition-delay: 2.35s;
}
.footer-menu-2 li a .menu-text span:nth-child(48) {
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}
.footer-menu-2 li a .menu-text span:nth-child(49) {
  -webkit-transition-delay: 2.45s;
          transition-delay: 2.45s;
}
.footer-menu-2 li a:hover {
  --y: -4px;
}
.footer-menu-2 li a:hover span {
  --m: calc(16px * -1);
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .footer-menu-2 {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 768px) {
  .footer-menu-2 {
    margin-bottom: 30px;
  }
}
.footer-menu-2 li a {
  color: var(--white);
  text-transform: uppercase;
}
.footer-menu-2 li a .menu-text {
  text-shadow: 0 16px 0 var(--white);
}

/* mean menu customize */
.offcanvas__menu-wrapper.mean-container {
  padding-top: 142px;
}
@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: 1400px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 142px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 94px;
  }
}

@media only screen and (max-width: 768px) {
  .offcanvas__menu-wrapper.mean-container {
    padding-top: 94px;
  }
}
.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: 1px solid var(--black-4);
}
.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: 80px;
  line-height: 1;
  color: var(--white);
  text-transform: capitalize;
  border-top: 1px solid var(--black-4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  outline: none;
  -webkit-transform: translateY(var(--y)) translateZ(0);
          transform: translateY(var(--y)) translateZ(0);
  -webkit-transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text {
  display: -webkit-box;
  display: -ms-flexbox;
  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;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-style: normal;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform: translateY(var(--m)) translateZ(0);
          transform: translateY(var(--m)) translateZ(0);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(1) {
  -webkit-transition-delay: 0.0333333333s;
          transition-delay: 0.0333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(2) {
  -webkit-transition-delay: 0.0666666667s;
          transition-delay: 0.0666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(3) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(4) {
  -webkit-transition-delay: 0.1333333333s;
          transition-delay: 0.1333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(5) {
  -webkit-transition-delay: 0.1666666667s;
          transition-delay: 0.1666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(6) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(7) {
  -webkit-transition-delay: 0.2333333333s;
          transition-delay: 0.2333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(8) {
  -webkit-transition-delay: 0.2666666667s;
          transition-delay: 0.2666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(9) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(10) {
  -webkit-transition-delay: 0.3333333333s;
          transition-delay: 0.3333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(11) {
  -webkit-transition-delay: 0.3666666667s;
          transition-delay: 0.3666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(12) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(13) {
  -webkit-transition-delay: 0.4333333333s;
          transition-delay: 0.4333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(14) {
  -webkit-transition-delay: 0.4666666667s;
          transition-delay: 0.4666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(15) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(16) {
  -webkit-transition-delay: 0.5333333333s;
          transition-delay: 0.5333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(17) {
  -webkit-transition-delay: 0.5666666667s;
          transition-delay: 0.5666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(18) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(19) {
  -webkit-transition-delay: 0.6333333333s;
          transition-delay: 0.6333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(20) {
  -webkit-transition-delay: 0.6666666667s;
          transition-delay: 0.6666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(21) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(22) {
  -webkit-transition-delay: 0.7333333333s;
          transition-delay: 0.7333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(23) {
  -webkit-transition-delay: 0.7666666667s;
          transition-delay: 0.7666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(24) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(25) {
  -webkit-transition-delay: 0.8333333333s;
          transition-delay: 0.8333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(26) {
  -webkit-transition-delay: 0.8666666667s;
          transition-delay: 0.8666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(27) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(28) {
  -webkit-transition-delay: 0.9333333333s;
          transition-delay: 0.9333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(29) {
  -webkit-transition-delay: 0.9666666667s;
          transition-delay: 0.9666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(30) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(31) {
  -webkit-transition-delay: 1.0333333333s;
          transition-delay: 1.0333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(32) {
  -webkit-transition-delay: 1.0666666667s;
          transition-delay: 1.0666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(33) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(34) {
  -webkit-transition-delay: 1.1333333333s;
          transition-delay: 1.1333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(35) {
  -webkit-transition-delay: 1.1666666667s;
          transition-delay: 1.1666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(36) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(37) {
  -webkit-transition-delay: 1.2333333333s;
          transition-delay: 1.2333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(38) {
  -webkit-transition-delay: 1.2666666667s;
          transition-delay: 1.2666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(39) {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(40) {
  -webkit-transition-delay: 1.3333333333s;
          transition-delay: 1.3333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(41) {
  -webkit-transition-delay: 1.3666666667s;
          transition-delay: 1.3666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(42) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(43) {
  -webkit-transition-delay: 1.4333333333s;
          transition-delay: 1.4333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(44) {
  -webkit-transition-delay: 1.4666666667s;
          transition-delay: 1.4666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(45) {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(46) {
  -webkit-transition-delay: 1.5333333333s;
          transition-delay: 1.5333333333s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(47) {
  -webkit-transition-delay: 1.5666666667s;
          transition-delay: 1.5666666667s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(48) {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(49) {
  -webkit-transition-delay: 1.6333333333s;
          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: 60px;
    padding-left: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 48px;
    padding-left: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 40px;
    padding-left: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 30px;
    padding-left: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .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: 60px;
  height: 96px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 300;
  border: none !important;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 76px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 64px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 57px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 46px;
    width: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .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 {
  background: var(--secondary);
  opacity: 1;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
  font-size: 30px;
  text-transform: capitalize;
  border-top: none !important;
  padding: 20px 0 20px 150px;
}
@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: 1400px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-left: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .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: 992px) {
  .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: 768px) {
  .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: 46px;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 25px;
  }
}
@media only screen and (max-width: 768px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 22px;
  }
}
.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: 1400px) {
  .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: 1200px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 40px;
  }
}
@media only screen and (max-width: 992px) {
  .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 .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: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
/*----------------------------------------*/

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

#featured_cursor {
  background: var(--white);
  color: var(--black-2);
}

@media (max-width: 1200px) {
  #client_cursor {
    display: none;
  }
}

.switcher__area {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .switcher__area {
    display: none;
  }
}
.switcher__icon {
  position: fixed;
  width: 50px;
  height: 50px;
  background: var(--white);
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 999;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  mix-blend-mode: exclusion;
}
.switcher__icon button {
  font-size: 24px;
  color: var(--black-2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.switcher__icon button:hover {
  color: var(--gray-2);
}
.switcher__icon button#switcher_open {
  -webkit-animation: wcSpinner 5s infinite linear;
          animation: wcSpinner 5s infinite linear;
}
.switcher__items {
  width: 280px;
  padding: 50px 30px;
  background: var(--black-2);
  position: fixed;
  right: -280px;
  top: 50%;
  z-index: 99;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-family: "Kanit", sans-serif;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.switcher__items .wc-col-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 10px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.switcher__item {
  margin-bottom: 30px;
}
.switcher__item:last-child {
  margin-bottom: 0;
}
.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-2 {
  background: #121212!important;
}

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

.header__inner-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 250px auto 150px;
  grid-template-columns: 250px auto 150px;
  padding: 0 30px;
}
@media only screen and (max-width: 1200px) {
  .header__inner-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .header__inner-2 {
    padding: 20px 15px;
  }
}

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

.header__nav-icon-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.header__logo-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.site-branding .site-logo-img{
  display: inline-block;
}
.site-branding .site-logo-img img {
  width: 240px;
  height: auto;
}

.sticky-2 .header__nav-icon-2 .menu-icon-2::after {
  width: 100px;
  height: 100px;
  right: -20px;
  top: -30px;
}

@media only screen and (max-width: 1200px) {
  .logo-primary {
    display: none;
  }
}
.logo-secondary {
  display: none;
}
@media only screen and (max-width: 1200px) {
  .logo-secondary {
    display: block;
  }
}


/*----------------------------------------*/
/*  13. OFFCANVES CSS START
/*----------------------------------------*/
.offcanvas__area {
  background-color: var(--black-2);
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.offcanvas__body {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.9fr 3fr 1.3fr;
  grid-template-columns: 0.9fr 3fr 1.3fr;
  height: 100%;
  -ms-grid-columns: 1.1fr 3fr 1.5fr;
  grid-template-columns: 1.1fr 3fr 1.5fr;
  overflow-y: scroll;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .offcanvas__body {
    -ms-grid-columns: 1.2fr 3fr 1.5fr;
    grid-template-columns: 1.2fr 3fr 1.5fr;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .offcanvas__body {
    -ms-grid-columns: 1.2fr 2fr 1.5fr;
    grid-template-columns: 1.2fr 2fr 1.5fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .offcanvas__body {
    -ms-grid-columns: 1.5fr 2fr 1.5fr;
    grid-template-columns: 1.5fr 2fr 1.5fr;
  }
}
@media only screen and (max-width: 768px) {
  .offcanvas__body {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.offcanvas__left {
  display: -ms-grid;
  display: grid;
  /* -ms-grid-rows: 0.5fr 2.1fr 1fr;
  grid-template-rows: 0.5fr 2.1fr 1fr; */
  -ms-grid-rows: 1fr 2.5fr;
  grid-template-rows: 1fr 2.5fr;
  border-right: 1px solid var(--black-4);
}
@media only screen and (max-width: 768px) {
  .offcanvas__left {
    display: none;
  }
}
.offcanvas__mid {
  overflow: hidden;
  overflow-y: auto;
}
@media only screen and (max-width: 768px) {
  .offcanvas__mid {
    margin-top: 75px;
  }
}
.offcanvas__mid::-webkit-scrollbar {
  width: 5px;
}
.offcanvas__mid::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px var(--black);
          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: var(--black-4);
  padding: 0 50px;
  position: relative;
}
@media only screen and (max-width: 1919px) {
  .offcanvas__right {
    padding: 0 30px;
  }
}
@media only screen and (max-width: 992px) {
  .offcanvas__right {
    padding: 0 15px;
  }
}
@media only screen and (max-width: 768px) {
  .offcanvas__right {
    display: none;
  }
}
.offcanvas__right .shape-1 {
  position: absolute;
  bottom: 0;
  left: 125px;
  z-index: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__right .shape-1 {
    left: 20px;
  }
}
@media only screen and (max-width: 1400px) {
  .offcanvas__right .shape-1 {
    left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .offcanvas__right .shape-1 {
    left: 0;
  }
}
.offcanvas__right .shape-2 {
  position: absolute;
  bottom: 90px;
  right: 110px;
  z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .offcanvas__right .shape-2 {
    right: 30px;
  }
}
.offcanvas__logo {
  padding: 55px 0 55px 50px;
  border-bottom: 1px solid var(--black-4);
}
.offcanvas__logo {
  padding: 0px 0 0px 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 143px;
}
.offcanvas__logo .site-branding .site-logo-img img {
  width: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .offcanvas__logo {
    padding: 30px 0 30px 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .offcanvas__logo {
    padding: 30px 0 30px 15px;
  }
  .offcanvas__logo {
    height: 95px;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .offcanvas__logo {
    padding: 30px 0 30px 15px;
  }
}
.offcanvas__social {
  padding-left: 50px;
  padding-top: 120px;
  border-bottom: 1px solid var(--black-4);
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .offcanvas__social {
    padding-left: 50px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .offcanvas__social {
    padding-left: 30px;
    padding-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .offcanvas__social {
    padding-left: 15px;
    padding-top: 50px;
  }
}
.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: 992px) {
  .offcanvas__social .social-title {
    font-size: 20px;
  }
}
.offcanvas__social ul li {
  padding-bottom: 2px;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .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: 992px) {
  .offcanvas__social ul li a {
    font-size: 16px;
  }
}
.offcanvas__links {
  padding-left: 50px;
  padding-top: 110px;
}
@media only screen and (max-width: 1400px) {
  .offcanvas__links {
    padding-left: 30px;
    padding-top: 30px;
  }
}
@media only screen and (max-width: 1200px) {
  .offcanvas__links {
    padding-top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .offcanvas__links {
    padding-left: 15px;
  }
}
.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: 768px) {
  .offcanvas__close {
    right: 15px;
    top: 15px;
  }
}
.offcanvas__close button {
  font-size: 30px;
  width: 60px;
  height: 60px;
  color: var(--white);
  background: #232323;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.offcanvas__close button:hover {
  color: var(--gray-2);
}
@media only screen and (max-width: 768px) {
  .offcanvas__close button {
    font-size: 24px;
    width: 48px;
    height: 48px;
  }
}
.offcanvas__search {
  /* padding-top: 190px;
  padding-bottom: 140px; */
    padding-top: 160px;
    padding-bottom: 80px;
}
@media only screen and (max-width: 1400px) {
  .offcanvas__search {
    padding-top: 140px;
    padding-bottom: 60px;
  }
}
@media only screen and (max-width: 992px) {
  .offcanvas__search {
    padding-top: 120px;
    padding-bottom: 40px;
}
}
.offcanvas__search form {
  position: relative;
}
.offcanvas__search input {
  color: #585858;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  padding: 20px 45px 20px 20px;
  border-radius: 30px;
  border: 1px solid #3C3C3C;
  background-color: transparent;
  outline: none;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .offcanvas__search input {
    padding: 15px 40px 15px 15px;
  }
}
.offcanvas__search input::-webkit-input-placeholder {
  opacity: 1;
  color: #585858;
}
.offcanvas__search input::-moz-placeholder {
  opacity: 1;
  color: #585858;
}
.offcanvas__search input:-ms-input-placeholder {
  opacity: 1;
  color: #585858;
}
.offcanvas__search input::-ms-input-placeholder {
  opacity: 1;
  color: #585858;
}
.offcanvas__search input::placeholder {
  opacity: 1;
  color: #585858;
}
.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 (max-width: 992px) {
  .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 (max-width: 992px) {
  .offcanvas__contact li {
    font-size: 16px;
  }
}
.offcanvas__contact li a {
  color: var(--white);
}
.offcanvas__contact li a:hover {
  color: var(--gray-2);
}
.ahfb-svg-iconset {
  -js-display: inline-flex;
  display: inline-flex;
  align-self: center;
}
.ahfb-svg-iconset svg {
  width: 17px;
  height: 17px;
  transition: none;
}
svg:not(:root) {
  overflow: hidden;
}
.ast-builder-social-element .social-item-label {
  padding-left: 6px;
}
.ast-builder-social-element {
  background: transparent;
  vertical-align: middle;
  transition: all 0.3s;
  margin-left: 0px;
  margin-right: 6px;
  display: flex;
  justify-content: flex-start;
  font-weight: 400;
  font-size: 18px;
  padding: 1px 0px;
  line-height: 1.5;
  color: var(--white);
}
.ast-builder-social-element svg {
  fill: var(--white);
}
.ast-builder-social-element:hover svg {
  fill: var(--color);
}
.ast-builder-social-element:hover{
  /* color: var(--gray-2); */
  color: var(--color);
}
/*----------------------------------------*/
/*  14. HERO CSS START
/*----------------------------------------*/

.hero__area-2 {
  background-image: url(/wp-content/uploads/2023/01/bannerbg_1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
  background-color: var(--black-2);
  overflow: hidden;
  position: relative;
}
.hero__area-2 .hero2-shape {
  position: absolute;
  left: 30%;
  top: 41%;
  max-width: 41%;
  overflow: hidden;
}
@media only screen and (max-width: 1500px) {    
.hero__area-2 .hero2-shape {
    left: 32%;
    max-width: 39%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .hero__area-2 .hero2-shape {
    top: 37%;
    left: 33%;
    max-width: 36%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .hero__area-2 .hero2-shape {
    top: 32%;
    left: 31%;
    max-width: 40%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .hero__area-2 .hero2-shape {
    left: 30%;
    top: 34%;
    max-width: 40%;
  }
}
@media only screen and (max-width: 768px) {
  .hero__area-2 .hero2-shape {
    left: 5%;
    top: 30%;
    max-width: 90%;
  }
}
.hero__area-2 .hero2-shape img {
  max-width: 100%;
}
.hero__area-2 .sec-title-3 {
  color: var(--white);
  padding-right: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .hero__area-2 .sec-title-3 {
    padding-top: 7px;
  }
}
@media only screen and (max-width: 768px) {
  .hero__area-2 .sec-title-3 {
    padding-bottom: 40px;
    padding-right: 75px;
  }
  .hero__area-2 .sec-title-wrapper .bg-shape {
    width: fit-content;
    padding-right: 30px;
    padding-top: 18px;
}
}
.hero__area-2 .sec-title-3:last-child {
  text-align: right;
  padding-top: 110px;
  padding-right: 0;
  margin-top: 30px;
}
@media only screen and (max-width: 1919px) {
  .hero__area-2 .sec-title-3:last-child {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 1200px) {
  .hero__area-2 .sec-title-3:last-child {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 992px) {
  .hero__area-2 .sec-title-3:last-child {
    padding-top: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .hero__area-2 .sec-title-3:last-child {
    padding-top: 30px;
  }
}
.hero__area-2 .sec-title-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 768px) {
  .hero__area-2 .sec-title-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.hero__area-2 .sec-title-wrapper .bg-shape {
  background-image: url(/wp-content/uploads/2022/12/10.png);
  background-repeat: no-repeat;
  background-position: right top;
}

.hero__inner-2 {
  padding: 220px 100px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .hero__inner-2 {
    padding: 140px 100px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .hero__inner-2 {
    padding: 120px 50px 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .hero__inner-2 {
    padding: 160px 30px 60px;
  }
}
@media only screen and (max-width: 768px) {
  .hero__inner-2 {
    padding: 120px 15px 60px;
  }
}

.hero__text-2 {
  /* background-image: url(../imgs/icon/7.png); */
  background-repeat: no-repeat;
  background-position: 64% 58%;
  padding-left: 32%;
  -webkit-transform: translateY(-30%);
          transform: translateY(-30%);
}
@media only screen and (max-width: 1919px) {
  .hero__text-2 {
    padding-left: 30%;
  }
}
@media only screen and (max-width: 1400px) {
  .hero__text-2 {
    padding-left: 20%;
  }
}
@media only screen and (max-width: 1200px) {
  .hero__text-2 {
    padding-left: 15%;
    transform: translateY(-15%);
  }
}
@media only screen and (max-width: 992px) {
  .hero__text-2 {
    padding-left: 5%;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@media only screen and (max-width: 768px) {
  .hero__text-2 {
    padding-left: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
            /* transform: translateY(-135px); */
  }
}
.hero__text-2 p {
  max-width: 315px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-2);
  padding-bottom: 5px;
}
.hero__text-2 p strong, .hero__text-2 p b{
  color: var(--white);
  font-weight: 400;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .hero__text-2 p {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .hero__text-2 p {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .hero__text-2 p {
    padding-bottom: 40px;
  }
}

.hero__about {
  background-image: url(/wp-content/uploads/2022/12/about-bg.png);
  background-repeat: no-repeat;
  background-position: top right;
  overflow: hidden;
}
.hero__about-content {
  padding-top: 170px;
}
@media only screen and (max-width: 768px) {
  .hero__about-content {
    padding-top: 160px;
}
}
.hero__about-content .hero-title {
  padding-bottom: 60px;
}
@media only screen and (max-width: 768px) {
  .hero__about-content .hero-title {
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 575px) {
  .hero__about-content .hero-title {
    font-size: 32px;
  }
}
@media only screen and (max-width: 480px) {
  .hero__about-content .hero-title {
    font-size: 30px;
  }
}
.hero__about-info {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 2.5fr 30px 2.5fr;
  grid-template-columns: 1fr 2.5fr 2.5fr;
  padding-bottom: 80px;
  grid-gap: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .hero__about-info {
    -ms-grid-columns: 1fr 30px 2.5fr 30px 2fr;
    grid-template-columns: 1fr 2.5fr 2fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .hero__about-info {
    -ms-grid-columns: 1fr 20px 2.5fr 20px 1fr;
    grid-template-columns: 1fr 2.5fr 1fr;
    grid-gap: 20px;
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 768px) {
  .hero__about-info {
    padding-bottom: 60px;
  }
}
.hero__about-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 768px) {
  .hero__about-text {
    grid-column: 1/-1;
    -ms-grid-row: 1;
    grid-row: 1;
    margin-bottom: 20px;
  }
}
.hero__about-text p {
  font-size: 18px;
  line-height: 1.4;
  /* padding-left: 80px; */
  padding-left: 60px;
  background-color: var(--white);
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .hero__about-text p {
    padding-left: 20px;
  }
}
@media only screen and (max-width: 992px) {
  .hero__about-text p {
    padding-left: 0;
  }
}
.hero__about-award {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.hero__about-award::before {
  position: absolute;
  content: "";
  left: 75px;
  top: 50%;
  width: 250px;
  height: 1px;
  background-color: var(--white-4);
}
.hero__about-award img {
  width: 200px;
  margin-top: -100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .hero__about-award::before {
    left: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .hero__about-award::before {
    width: 150px;
    left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .hero__about-award {
    position: absolute;
    right: 16px;
    bottom: 0px;
}
.hero__about-text p {
    background-color:unset;
}
}
@media only screen and (max-width: 480px) {
  .hero__about-award {
    bottom: 430px;
}
.hero__about-award img {
    width: 230px;
}
.hero__about-text {
    margin-top: 350px;
}
}
@media only screen and (max-width: 425px) {
  .hero__about-content .hero-title {
    font-size: 28px;
}
.hero__about-award {
    bottom: 450px;
}
.hero__about-award img {
    width: 200px;
}
.hero__about-text {
    margin-top: 300px;
}
}
@media only screen and (max-width: 360px) {
 .hero__about-award {
    bottom: 470px;
}
}
/*----------------------------------------*/
/*  15. SLIDER CSS START
/*----------------------------------------*/

.roll__wrapper {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.roll__slide {
  text-align: center;
}
.roll__slide h2 {
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--black);
}

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

.about__area-3 {
  /* background-image: url(/wp-content/uploads/2023/01/about_bg_1.svg);
  background-position: bottom left;
  background-size: contain;*/
  position: relative;   
}
.about__area-3::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  /* left: 60%; */
  left: 50%;
  bottom: 0px;
  background-color: var(--white-4);
}

@media only screen and (max-width: 768px) {
  .about__area-3::after {
    width: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .about__area-3 .pt-140 {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .about__area-3 .pt-140 {
    padding-top: 90px;
  }
}
.about__area-3 .sec-title {
  color: var(--black-2);
  text-transform: uppercase;
  padding-bottom: 40px;
}
.about__area-3 .sec-sub-title {
  color: var(--black-3);
  text-transform: uppercase;
  padding-top: 45px;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .about__area-3 .sec-sub-title {
    padding-top: 0;
  }
}
.about__area-3 .sec-text p {
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-3);
  padding-bottom: 22px;
}
@media only screen and (max-width: 768px) {
  .about__area-3 .sec-text p {
    padding-bottom: 22px;
  }
}
.about__area-3 .sec-text-wrapper {
  padding-top: 45px;
}
@media only screen and (max-width: 1200px) {
  .about__area-3 .sec-text-wrapper {
    padding-top: 0;
  }
}
@media only screen and (max-width: 992px) {
  .about__area-3 .sec-text-wrapper {
    padding-left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .about__area-3 .sec-text-wrapper {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 576px) {
  .about__area-3 .sec-title {
    padding-bottom: 22px;
  }
}
.about__img-3 {
  overflow: hidden;
  position: relative;
  width: calc(100% - 85px);
  height: 770px;
}
.about__img-3 img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 110%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .about__img-3 {
    overflow: hidden;
    position: relative;
    width: calc(100% - 40px);
    height: 660px;
  }
  .about__img-3 img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 120%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 1200px) {
  .about__img-3 {
    width: 100%;
    height: unset;
  }
}
.about__img-3 img {
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .about__img-3 img {
    position: unset;
    height: auto;
  }
}
.portfolio__item {
  -webkit-transform: perspective(4000px) rotateX(90deg);
          transform: perspective(4000px) rotateX(90deg);
}

/*----------------------------------------*/
/*  17. SERVICE CSS START
/*----------------------------------------*/
.service__area {
  background-color: var(--black-2);
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .service__area.pb-150 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .service__area.pb-150 {
    padding-bottom: 90px;
  }
}
.service__area a:first-child .service__item {
  border-top: 1px solid var(--secondary);
}
.service__area .sec-title,
.service__area .sec-sub-title {
  color: var(--white);
}
.service__area .sec-title-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.service__area-6 {
  padding-left: 100px;
  background-color: var(--black-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__area-6 {
    padding-left: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .service__area-6 {
    padding-top: 100px;
    padding-left: 88px;
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .service__area-6 {
    padding-top: 90px;
    padding-left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .service__area-6 {
    padding-bottom: 0;
    padding-left: 0;
  }
}
.service__area-6 .inherit-row {
  margin-left: -180px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__area-6 .inherit-row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
  .service__area-6 h2.service__title-6 {
    padding-top: 140px;
  }
  .service__area-6 .service__list-6{
    padding-top: 140px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .service__area-6 .inherit-row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
  .service__area-6 .service__list-6{
    padding-top: 120px;
  }
  .service__area-6 h2.service__title-6 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1200px) {
  .service__area-6 .inherit-row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
}
.service__area-6 .content-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 768px) {
  .service__area-6 .content-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.service__area-6 .left-content {
  width: 20%;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .service__area-6 .left-content {
    width: 35%;
    padding-left: 50px;
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .service__area-6 .left-content {
    width: 30%;
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .service__area-6 .left-content {
    display: none;
  }
}
.service__area-6 .right-content {
  width: 40%;
  padding-left: 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__area-6 .right-content {
    padding-left: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .service__area-6 .right-content {
    padding-left: 0;
  }
}
@media only screen and (max-width: 1200px) {
  .service__area-6 .right-content {
    width: 100%;
    padding-left: 0;
  }
}
@media only screen and (max-width: 992px) {
  .service__area-6 .right-content {
    padding-left: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .service__area-6 .right-content {
    padding-left: 0;
  }
}
.service__area-6 .mid-content {
  width: 40%;
  height: 100vh;
  position: relative;
}
.service__area-6 .mid-content .service__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.service__area-6 .mid-content .service__image img {
  width: auto;
  height: 100vh;
}
@media only screen and (max-width: 1200px) {
  .service__area-6 .mid-content {
    display: none;
  }
}
.service__area-6 .mid-content #img1 {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 768px) {
  .service__area-6 .right-content {
    padding-left: 0;
  }
  .service__area-6 .mid-content {
    display: none;
  }
}
.service__top-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
.service__top-text p {
  max-width: 505px;
  color: var(--gray-2);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.4;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .service__top-text p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .service__top-text p {
    font-size: 16px;
  }
}
@media only screen and (max-width: 768px) {
  .service__top-text p {
    font-size: 18px;
    margin: 30px 0;
  }
}
.service__top-text p span {
  color: var(--white);
}
.service__top-btn #btn_wrapper {
  margin-left: auto;
  margin-right: -40px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .service__top-btn #btn_wrapper {
    margin-right: -10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .service__top-btn #btn_wrapper {
    margin-right: 0;
  }
}
@media only screen and (max-width: 768px) {
  .service__top-btn #btn_wrapper {
    margin-right: 0;
    margin-left: 0;
  }
}
.service__list-wrapper {
  margin-top: 40px;
}
.service__img {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
  position: absolute;
  -webkit-transform: rotate(0deg) translateX(-100px);
          transform: rotate(0deg) translateX(-100px);
}
@media only screen and (min-width: 1199px) and (max-width: 1400px) {
  .service__img {
    max-width: 260px;
  }
}
/* @media only screen and (min-width: 992px) and (max-width: 1200px) {
  .service__img {
    max-width: 200px;
  }
} */
.service__img.active {
  opacity: 1;
  -webkit-transform: rotate(15deg) translateX(60px) translateY(30px);
          transform: rotate(15deg) translateX(60px) translateY(30px);
}
.service__img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__img-wrapper {
    display: none;
  }
}
/* .service__img-wrapper span.shape-box-1{
  background-image: url(/wp-content/uploads/2023/01/Strong_development.gif);
}
.service__img-wrapper span.shape-box-2{
  background-image: url(/wp-content/uploads/2023/01/Interactive_web_design.gif);
}
.service__img-wrapper span.shape-box-3{
  background-image: url(/wp-content/uploads/2023/01/Mobile_app.gif);
}
.service__img-wrapper span.shape-box-4{
  background-image: url(/wp-content/uploads/2023/01/Marketing.gif);
} */
.service__img-wrapper span {
  position: absolute;
  width: 125px;
  height: 100px;
  background-color: var(--primary);
  /* background-size: contain;
  background-repeat: no-repeat;
  background-position: center; */
  bottom: 0;
  left: 0;
  -webkit-transform: rotate(-26deg) translate(-100%, -100%);
          transform: rotate(-26deg) translate(-100%, -100%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  z-index: 1;
  -webkit-box-shadow: 4px -2px 6px 0px rgba(42,42,42,0.7);
  -moz-box-shadow: 4px -2px 6px 0px rgba(42,42,42,0.7);
  box-shadow: 4px -2px 6px 0px rgba(42,42,42,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service__img-wrapper span video{
  height: 100px;
}
.service__img-wrapper span.current {
  -webkit-transform: rotate(-26deg) translate(120px, -100%);
          transform: rotate(-26deg) translate(120px, -100%);
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .service__img-wrapper span.current {
    -webkit-transform: rotate(-26deg) translate(150px, -240%);
    transform: rotate(-26deg) translate(150px, -240%);
  }
}
.service__img-6 img {
  max-width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .service__items-6 {
    padding-top: 0;
  }
}
@media only screen and (max-width: 768px) {
  .service__items-6 {
    padding-top: 60px;
  }
}
.service__item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.7fr 2fr 2.5fr 1fr;
  grid-template-columns: 0.7fr 2fr 2.5fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 35px 0;
  border-bottom: 1px solid var(--secondary);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .service__item {
    gap: 30px;
  }
}
@media only screen and (max-width: 768px) {
  .service__item {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    padding: 25px 0 10px;
  }
}
.service__item:hover .service__number span,
.service__item:hover .service a {
  color: var(--white);
}
.service__item:hover .service__title {
  color: var(--white);
}
.service__item:hover .service__link p {
  color: var(--white);
}
.service__item:hover .service__link p i {
  -webkit-transform: translate(60px, -60px) rotate(-45deg);
          transform: translate(60px, -60px) rotate(-45deg);
}
.service__item:hover .service__link p::after {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(20px, -20px) rotate(-45deg);
          transform: translate(20px, -20px) rotate(-45deg);
}
.service__item-6 {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.service__item-6 .image-tab {
  display: none;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .service__item-6 {
    height: auto;
    -webkit-box-orient: unset;
    -webkit-box-direction: unset;
        -ms-flex-direction: unset;
            flex-direction: unset;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 30px 3fr;
    grid-template-columns: 2fr 3fr;
    grid-column-gap: 30px;
    margin-bottom: 60px;
  }
  .service__item-6 .image-tab {
    display: block;
  }
  .service__item-6 .image-tab img {
    width: 100%;
  }
}
@media only screen and (max-width: 992px) {
  .service__item-6 {
    height: auto;
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .service__item-6 {
    padding-bottom: 50px;
  }
}
.service__item-6 p {
  max-width: 550px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-2);
  padding-bottom: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .service__item-6 p {
    padding-bottom: 20px;
  }
}
.service__item-6 ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 240px auto;
  grid-template-columns: 240px auto;
  padding-bottom: 80px;
}
@media only screen and (max-width: 992px) {
  .service__item-6 ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .service__item-6 ul {
    padding-bottom: 20px;
  }
}
.service__item-6 ul li {
  display: inline-block;
  padding-bottom: 10px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .service__item-6 ul li {
    font-size: 16px;
    padding-bottom: 5px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__item-6 ul {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .service__item-6 ul {
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .service__item-6 ul {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .service__item-6 ul {
    padding-bottom: 50px;
    -ms-grid-columns: 240px auto;
    grid-template-columns: 240px auto;
  }
}
.service__number span {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--gray-2);
  background-size: 0px 0px;
  width: 45px;
  height: 45px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.service__number.one span{
  background-image: url(/wp-content/uploads/2022/12/white-pearl.png);
}
.service__number.two span{
  background-image: url(/wp-content/uploads/2022/12/black-pearl.png);
}
.service__number.three span{
  background-image: url(/wp-content/uploads/2022/12/rose-pearl.png);
}
.service__number.four span{
  background-image: url(/wp-content/uploads/2022/12/spark-pearl.png);
}
.service__list a:hover .service__number span {
  background-size: 45px 45px;
  font-size: 0px;
  transition: all ease 0.5s;
}
.service__title {
  display: block;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  color: var(--gray-2);
}
.service__title:hover {
  color: var(--white);
}
@media only screen and (max-width: 992px) {
  .service__title {
    padding: 10px 0 20px;
  }
  .service__title br {
    display: none;
  }
  .service__list .service__number span {
    background-size: 45px 45px;
    font-size: 0px;
    transition: all ease 0.5s;
  }
}
.service__title-6 {
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  color: var(--white);
  padding-bottom: 20px;
}
@media only screen and (max-width: 1400px) {
  .service__title-6 {
    font-size: 32px;
  }
}
@media only screen and (max-width: 1200px) {
  .service__title-6 {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 992px) {
  .service__title-6 {
    font-size: 30px;
  }
}
.service__text {
  max-width: 320px;
}
.service__text p {
  color: var(--gray-2);
}
.service__link {
  text-align: right;
  overflow: hidden;
}
.service__link p {
  display: inline-block;
  font-size: 48px;
  color: var(--gray-2);
}
.service__link p i {
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.service__link p::after {
  position: absolute;
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  left: -20px;
  bottom: -20px;
  -webkit-transform: translate(0, 0) rotate(-45deg);
          transform: translate(0, 0) rotate(-45deg);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.service__list .active .service__number span,
.service__list .active .service__title,
.service__list .active .service__link p {
  color: var(--white);
}
.service__list-6 {
  padding-top: 160px;
}
@media only screen and (max-width: 1919px) {
  .service__list-6 {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 1200px) {
  .service__list-6 {
    padding-top: 60px;
    position: sticky;
    top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .service__list-6 {
    padding-top: 60px;
    position: sticky;
    top: 60px;
  }
}
@media only screen and (max-width: 768px) {
  .service__list-6 {
    padding-top: 60px;
  }
}
.service__list-6 li {
  padding-bottom: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .service__list-6 li {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .service__list-6 li {
    padding-bottom: 20px;
  }
}
.service__list-6 li.active a {
  color: var(--white);
}
@media only screen and (max-width: 768px) {
  .service__list-6 li {
    padding-bottom: 20px;
  }
}
.service__list-6 li a {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--gray-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .service__list-6 li a {
    line-height: 1.4;
  }
}
@media only screen and (max-width: 992px) {
  .service__list-6 li a {
    font-size: 20px;
  }
}
.service__list-6 li a.active {
  color: red;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.service__area-6 .mid-content .service__image:nth-child(1) {
  z-index: 9;
}

.service__image:nth-child(2) {
  z-index: 8;
}

.service__image:nth-child(3) {
  z-index: 7;
}

.service__image:nth-child(4) {
  z-index: 6;
}

.service__image:nth-child(5) {
  z-index: 5;
}

.service__image:nth-child(6) {
  z-index: 4;
}

.service__image:nth-child(7) {
  z-index: 3;
}

.service__image:nth-child(8) {
  z-index: 2;
}

.service__image:nth-child(9) {
  z-index: 1;
}

/*----------------------------------------*/
/*  18. COUNTER CSS START
/*----------------------------------------*/
.counter__area {
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .counter__area .pt-150 {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 1200px) {
  .counter__area-3 {
    background-color: var(--pink-4);
    padding: 100px 0;
  }
}
@media only screen and (max-width: 992px) {
  .counter__area-3 {
    padding: 90px 0;
  }
}
@media only screen and (max-width: 768px) {
  .counter__area-3 {
    padding: 60px 0;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .counter__area-3 .sec-title-wrapper {
    padding-top: 120px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .counter__area-3 .sec-title-wrapper {
    padding-top: 120px;
  }
}
.counter__area-3 .sec-sub-title {
  font-weight: 500;
  color: var(--black);
  text-transform: uppercase;
  padding-bottom: 150px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .counter__area-3 .sec-sub-title {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .counter__area-3 .sec-sub-title {
    padding-bottom: 20px;
  }
}
@media only screen and (max-width: 1200px) {
  .counter__area-3 .sec-sub-title {
    display: none;
  }
}
.counter__area-3 .counter__number {
  color: var(--black-2);
  font-weight: 400;
  padding-bottom: 10px;
}
.counter__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 768px) {
  .counter__wrapper {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 30px 10px;
  }
}
.counter__wrapper-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 768px) {
  .counter__wrapper-2 {
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
  }
}
.counter__wrapper-3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .counter__wrapper-3 {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 50px 40px;
  }
}
.counter__item {
  width: 380px;
  height: 380px;
  border: 1px solid var(--white-2);
  border-radius: 100%;
  margin-left: -67px;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .counter__item {
    margin-left: -60px;
    width: 330px;
    height: 330px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .counter__item {
    margin-left: -25px;
    width: 259px;
    height: 259px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .counter__item {
    margin-left: -27px;
    width: 200px;
    height: 200px;
  }
}
@media only screen and (max-width: 768px) {
  .counter__item {
    margin-left: 0;
    width: 160px;
    height: 160px;
  }
}
.counter__item:first-child {
  margin-left: 0;
}
.counter__item p {
  font-size: 20px;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .counter__item p {
    font-size: 18px;
    line-height: 1.2;
  }
}
@media only screen and (max-width: 768px) {
  .counter__item p {
    font-size: 16px;
    line-height: 1.3;
    padding: 0 7px;
  }
}
.counter__item-2 {
  text-align: center;
}
.counter__item-2 p {
  font-size: 20px;
  line-height: 1.3;
}
.counter__item-3 {
  padding-bottom: 80px;
}
@media only screen and (max-width: 1919px) {
  .counter__item-3 {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 768px) {
  .counter__item-3 {
    text-align: center;
  }
}
.counter__item-3 p {
  font-size: 20px;
}
@media only screen and (max-width: 768px) {
  .counter__item-3 p {
    line-height: 1.2;
  }
}
.counter__number {
  font-weight: 300;
  font-size: 100px;
  line-height: 1.1;
  color: var(--secondary);
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .counter__number {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .counter__number {
    font-size: 60px;
  }
}
@media only screen and (max-width: 768px) {
  .counter__number {
    font-size: 60px;
  }
}
@media only screen and (max-width: 480px) {
  .counter__number {
    font-size: 45px;
  }
}
@keyframes swing  {
  0% { transform: rotate(8deg); }
  50% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}
.counter__img-3 {
    text-align: center;
    position: absolute;
    top: 65px;
    right: 120px;
}
.counter__img-3 img {
  animation: swing 2.4s infinite;
  animation-timing-function: ease-in-out;
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  transform-origin: top;
}
@media only screen and (max-width: 1919px) {
  .counter__img-3 {
    margin-top: 0;
  }
}
@media only screen and (max-width: 1400px) {
  .counter__img-3 {
    margin-top: 0;
    top: -11px;
  }
}
.counter__img-3 img {
    width: 320px;
}

/*----------------------------------------*/
/*  19. WORKFLOW CSS START
/*----------------------------------------*/
.workflow__area {
  overflow: hidden;
}
.workflow__area .sec-title-wrapper {
  text-align: center;
  padding-bottom: 60px;
}
.workflow__area-3 {
  overflow: hidden;
  background-color: var(--pink-4);
  padding-top: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .workflow__area-3 {
    padding-top: 0px;
    background-color: var(--white);
}
}

.workflow__area-3 .wf_panel {
  width: 100%;
  height: 100%;
  will-change: transform;
  opacity: 1 !important;
}
.workflow__wrapper-3 {
  width: 400%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: no-wrap;
      flex-wrap: no-wrap;
}
@media only screen and (max-width: 1200px) {
  .workflow__wrapper-3 {
    width: 100%;
    height: auto;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.workflow__slide {
  text-align: center;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .workflow__slide {
    padding: 0 10px;
  }
}
.workflow__slide::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  top: 58px;
  background-color: var(--black-2);
}
.workflow__slide::after {
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  left: calc(50% - 9px);
  top: 50px;
  background-color: var(--primary);
  border: 3px solid var(--white);
  border-radius: 100%;
  -webkit-animation: wcBubble 1.5s 1s infinite;
          animation: wcBubble 1.5s 1s infinite;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.workflow__slide p {
  max-width: 230px;
  margin: 0 auto;
}

.workflow__step {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--black-2);
  text-transform: capitalize;
  padding-bottom: 50px;
}
.workflow__number {
  font-size: 85px;
  font-weight: 500;
  color: var(--gray-4);
}
.workflow__title {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: var(--black-2);
  padding-bottom: 15px;
}

.choose-title {
  font-weight: 500;
  font-size: 200px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--black);
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .choose-title {
    font-size: 160px;
    margin-top: -100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .choose-title {
    font-size: 120px;
    margin: 0;
  }
  .choose-wrapper.wf_panel {
    height: 100vh;
    background-color: #fff;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .choose-title {
    font-size: 70px;
  }
  
}
@media only screen and (max-width: 768px) {
  .choose-title {
    font-size: 70px;
  }
}
@media only screen and (max-width: 576px) {
  .choose-title {
    font-size: 60px;
  }
}
@media only screen and (max-width: 375px) {
  .choose-title {
    font-size: 50px;  
  }
}
.choose-title-wrapper {
  text-align: center;
}
.choose-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.research__area {
  background-color: var(--pink-3);
  /* background-image: url(../imgs/shape/8.png); */
  background-repeat: no-repeat;
  background-position: 200px calc(100% - 150px);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .research__area {
    background-position: 20px calc(100% - 230px);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .research__area {
    background-position: 20px calc(100% - 220px);
  }
  .research__area.pt-150 {
    padding-top: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .research__area {
    background-position: 20px calc(100% - 100px);
    padding-bottom: 50px;
  }
  .research__area.pt-150 {
    padding-top: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .research__area {
    padding-bottom: 40px;
    background-position: 0 210px;
    background-size: 100px;
  }
}
@media only screen and (max-width: 768px) {
  .research__area {
    background-size: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .research__area.pt-150 {
    padding-top: 60px;
  }
}
.research__area .sec-title {
  text-transform: uppercase;
  padding-bottom: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .research__area .sec-title {
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .research__area .sec-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .research__area .sec-title {
    padding-bottom: 30px;
  }
}
.research__area .sec-title-wrapper {
  padding-right: 80px;
  /* padding-bottom: 100px; */
  padding-bottom: 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .research__area .sec-title-wrapper {
    padding-right: 40px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .research__area .sec-title-wrapper {
    padding-bottom: 40px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .research__area .sec-title-wrapper {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .research__area .sec-title-wrapper {
    padding-right: 0;
    padding-bottom: 40px;
    text-align: center;
  }
}
@media only screen and (max-width: 576px) {
  .research__area .sec-title {
    padding-bottom: 30px;
}
}
.research__area .sec-title-wrapper p {
  max-width: 360px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
  margin-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .research__area .sec-title-wrapper p {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .research__area .sec-title-wrapper p {
    max-width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .research__area .sec-title-wrapper p {
    margin: 0 auto;
  }
}
.research__area .sec-sub-title {
  font-weight: 500;
  text-transform: uppercase;
  color: var(--black);
  padding-bottom: 140px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .research__area .sec-sub-title {
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .research__area .sec-sub-title {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 1200px) {
  .research__area .sec-sub-title {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .research__list {
    padding-bottom: 35px;
  }
}
.research__tools {
  padding-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .research__tools {
    padding-left: 0;
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .research__tools {
    padding-bottom: 60px;
  }
}
@media only screen and (max-width: 768px) {
  .research__tools {
    padding-left: 0;
    padding-bottom: 40px;
    text-align: center;
  }
}
.research__tools li {
  display: inline-block;
}
.research__tools li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--black);
  border: 1px solid var(--black);
  border-radius: 30px;
  padding: 2px 15px;
}
.research__tools li a:hover {
  color: var(--white);
  background-color: var(--black-2);
}
.research__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  padding-bottom: 50px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .research__item {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .research__item {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .research__item {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.research__item:nth-child(odd) {
  padding-left: 100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .research__item:nth-child(odd) {
    padding-left: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .research__item:nth-child(odd) {
    padding-left: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .research__item:nth-child(odd) {
    padding-left: 0;
  }
}
.research__item p {
  max-width: 255px;
  color: var(--black-2);
}
.research__number span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--black-2);
  /* width: 190px;
  height: 190px; */
  width: 180px;
  height: 180px;
  border: 3px solid;
  border-radius: 100%;
  background-color: var(--bs-white);
}
.research__number span .research__img {
    width: 100px;
}

@media only screen and (max-width: 1400px) {
  .research__number span {
    width: 160px;
    height: 160px;
  }
  .research__number span .research__img {
    width: 90px;
  }
}

@media only screen and (max-width: 768px) {
  .research__number span {
    width: 130px;
    height: 130px;
    font-size: 36px;
  }
  .research__number span .research__img {
    width: 80px;
  }
}
@media only screen and (max-width: 480px) {
  .research__number span {
    width: 120px;
    height: 120px;
    font-size: 36px;
  }
  .research__number span .research__img {
    width: 75px;
  }
}@media only screen and (max-width: 360px) {
  .research__number span {
    width: 100px;
    height: 100px;
    font-size: 36px;
  }
  .research__number span .research__img {
    width: 65px;
  }
}
.research__title {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--black-2);
  padding-bottom: 15px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .research__title {
    padding-bottom: 5px;
  }
}

/*----------------------------------------*/
/*  20. BRAND CSS START
/*----------------------------------------*/
.brand__area {
  overflow: hidden;
  background-image: url(/wp-content/uploads/2023/01/about.svg);
  background-size: cover;
}
.brand__area.about_bg {
  background-image: none;
}
.brand__area .pb-100 {
  padding-bottom: 50px;
}
.brand__list .brand__item img {
  width: auto;
	max-height:70px;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .brand__area .pb-100 {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 768px) {
  .brand__area .pb-100 {
    padding-bottom: 0;
  }
}
.brand__area .sec-title-wrapper {
  padding-bottom: 60px;
}
.brand__list, .brand__list-3, .brand__list-2 {
  /* display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[6];
  grid-template-columns: repeat(6, 1fr); */
  background-color: var(--white);
  border-bottom: 1px solid var(--white-3);
  position: relative;
  z-index: 1;
  margin-left: 1px;
}
.swiper.roll__slider{
  padding: 0px calc(var(--bs-gutter-x) * .5);
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .brand__list, .brand__list-3, .brand__list-2 {
    /* -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr); */
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .brand__list, .brand__list-3, .brand__list-2 {
    /* -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr); */
  }
}
@media only screen and (max-width: 768px) {
  .brand__list, .brand__list-3, .brand__list-2 {
    /* -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr); */
    margin-left: 0;
  }
}
.brand__list-2 {
  gap: 40px;
  background-color: transparent;
  border-bottom: none;
  margin-left: 0;
}
.brand__list-3 {
  background-color: transparent;
  border-bottom: none;
  margin-left: 0;
}
@media only screen and (max-width: 1200px) {
  .brand__list-3 {
    gap: 50px;
  }
}
.brand__item {
  padding: 40px;
  text-align: center;
  border-top: 1px solid var(--white-3);
  border-right: 1px solid var(--white-3);
  border-bottom: 1px solid var(--white-3);
	height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .brand__item {
    padding: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .brand__item {
    padding: 30px 25px;
  }
}
@media only screen and (max-width: 768px) {
  .brand__item {
    padding: 30px 0;
    border-left: 1px solid var(--white-3);
  }
  .brand__item:nth-child(even) {
    border-left: none;
  }
}
.brand__item-2 {
  text-align: center;
}
@media only screen and (max-width: 992px) {
  .brand__item-2 {
    padding-bottom: 20px;
  }
}
.brand__title-2 {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 50px;
  text-align: center;
}
.brand__title-3 {
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
  text-align: center;
  padding-bottom: 65px;
  font-weight: 400;
  text-transform: uppercase;
}

.brand-gap {
  gap: 50px 0;
  border: none;
  background-color: transparent;
}

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


/*----------------------------------------*/
/*  22. PORTFOLIO CSS START
/*----------------------------------------*/

.bg_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.bg_image::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  content: "";
}
.bg_image img {
  width: 120%;
}

.row_bottom {
  margin-top: 80vh;
}
@media only screen and (max-width: 768px) {
  .row_bottom {
    margin-top: 30px;
  }
}

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

@keyframes wcSpinner {
  from {
    -webkit-transform: rotate(0turn);
    transform: rotate(0turn);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

/*----------------------------------------*/
/*  24. BLOG CSS START
/*----------------------------------------*/
/* 
/*----------------------------------------*/
/*  25. CTA CSS START
/*----------------------------------------*/
.cta__area {
  overflow: hidden;
  background-image: url(/wp-content/uploads/2023/01/about.svg);
  background-size: cover;
}
.cta__area-3 {
  background-color: var(--pink-5);
}
@media only screen and (min-width: 1920px) {
  .cta__area-3 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .cta__area-3 {
    padding-top: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .cta__area-3 .pt-150 {
    padding-top: 125px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .cta__area-3 {
    background-color: var(--pink-5);
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .cta__area-3 {
    background-color: var(--pink-5);
    padding-bottom: 10px;
  }
}
@media only screen and (max-width: 768px) {
  .cta__area-3 {
    background-color: var(--pink-5);
    padding-bottom: 10px;
  }
}
.cta__content {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1200px) {
  .cta__content {
    width: 80%;
  }
}
@media only screen and (max-width: 992px) {
  .cta__content {
    width: 100%;
  }
}
.cta__content #btn_wrapper {
  margin: 0 auto;
}
.cta__content-2, .cta__content-3 {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
@media only screen and (max-width: 992px) {
  .cta__content-2, .cta__content-3 {
    width: 100%;
  }
}
.cta__content-2 #btn_wrapper, .cta__content-3 #btn_wrapper {
  position: relative;
  z-index: 1;
  width: 350px;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .cta__content-2 #btn_wrapper, .cta__content-3 #btn_wrapper {
    width: 260px;
    height: 260px;
  }
}
@media (max-width: 1200px) {
  .cta__content-2 #btn_wrapper, .cta__content-3 #btn_wrapper {
    width: 200px;
    height: 200px;
  }
}
.cta__content-2 #btn_wrapper .btn-item, .cta__content-3 #btn_wrapper .btn-item {
  top: 25px;
}
@media only screen and (max-width: 768px) {
  .cta__content-2 #btn_wrapper .btn-item, .cta__content-3 #btn_wrapper .btn-item {
    top: 0;
  }
}
.cta__content-2 a, .cta__content-3 a {
  width: 300px;
  height: 300px;
  font-size: 24px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .cta__content-2 a, .cta__content-3 a {
    width: 220px;
    height: 220px;
  }
}
@media only screen and (max-width: 1200px) {
  .cta__content-2 a, .cta__content-3 a {
    width: 200px;
    height: 200px;
  }
}
@media only screen and (max-width: 768px) {
  .cta__content-2 a, .cta__content-3 a {
    font-size: 20px;
  }
}
.cta__content-2 a:hover span, .cta__content-3 a:hover span {
  width: 800px;
  height: 800px;
}
.cta__content-2 a i, .cta__content-3 a i {
  font-size: 30px;
  -webkit-transform: rotate(0);
          transform: rotate(0);
  padding-left: 20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .cta__content-3 a {
    width: 220px;
    height: 220px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .cta__content-3 #btn_wrapper .btn-item {
    top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .cta__content-3 #btn_wrapper .btn-item {
    top: 0;
  }
}
.cta__content-3 a {
  border-color: var(--black-2);
}
.cta__sub-title {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--black-3);
  border: 1px solid var(--gray);
  display: inline-block;
  padding: 5px 17px;
  border-radius: 30px;
  margin-bottom: 10px;
}
.cta__sub-title-2 {
  font-weight: 300;
  font-size: 28px;
  line-height: 1.3;
  color: var(--black-2);
  padding-bottom: 25px;
}
.cta__title {
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  color: var(--black-2);
}
@media only screen and (max-width: 1400px) {
  .cta__title {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .cta__title {
    font-size: 36px;
  }
  .cta__title br{
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .cta__title {
    font-size: 30px;
  }
}
.cta__title-2 {
  font-weight: 300;
  font-size: 100px;
  line-height: 1;
  color: var(--black-2);
  padding-bottom: 60px;
}
@media only screen and (max-width: 1400px) {
  .cta__title-2 {
    font-size: 75px;
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 1200px) {
  .cta__title-2 {
    font-size: 70px;
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 992px) {
  .cta__title-2 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 768px) {
  .cta__title-2 {
    font-size: 48px;
  }
}

/*----------------------------------------*/
/*  26. STORY CSS START
/*----------------------------------------*/
.story__area {
  overflow: hidden;
}
.story__area .sec-title-wrapper {
  padding-bottom: 40px;
}
.story__area .from-text {
  position: absolute;
  top: -140px;
  /* right: -220px; */
  right: 0px;
  width: 160px;
  height: 90px;
  background-color: var(--primary);
  padding: 20px 30px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  color: var(--black-2);
}
@media only screen and (max-width: 1400px) {
  .story__area .from-text {
    right: 0;
  }
}
@media only screen and (max-width: 1200px) {
  .story__area .from-text {
    top: -89px;
  }
}
@media only screen and (max-width: 992px) {
  .story__area .from-text {
    right: -20px;
    top: -80px;
  }
}
@media only screen and (max-width: 768px) {
  .story__area .from-text {
    width: 120px;
    right: 0;
    top: -60px;
  }
}
.story__area .from-text span {
  display: block;
  font-size: 36px;
  font-weight: 500;
}
@media only screen and (max-width: 768px) {
  .story__area .from-text span {
    font-size: 30px;
  }
}
.story__text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-3);
  padding-bottom: 20px;
}
@media (max-height: 1365px) {
  .story__text p {
    padding-top: 30px;
    padding-bottom: 0;
  }
}
.story__img-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 700px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .story__img-wrapper {
    height: 650px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .story__img-wrapper {
    height: 580px;
  }
}
@media (max-width: 1200px) {
  .story__img-wrapper {
    height: 100%;
  }
}
.story__img-wrapper img {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 30px;
  max-width: 100%;
}
@media only screen and (max-width: 768px) {
  .story__img-wrapper img {
    margin-bottom: 20px;
  }
  .story__area .story__img-wrapper img {
    display: none;
  }
  .story__area .story__img-wrapper.img-anim img {
    display: block;
  }
}

/*----------------------------------------*/
/*  27. TEAM CSS START
/*----------------------------------------*/
.team__area {
  background-color: var(--black-2);
  overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .team__area {
    padding-left: 62px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .team__area {
    padding-left: 62px;
  }
}
.team__area .sec-title {
  color: var(--white);
}
.team__area .sec-title-wrapper {
  text-align: center;
  padding-bottom: 60px;
}
.team__area .sec-sub-title {
  color: var(--white);
}
.team__area-6 {
  background-image: url(../imgs/bg/shape.png);
  background-repeat: no-repeat;
  background-position: 100px 180px;
  overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .team__area-6 {
    background-position: 0 180px;
    padding-left: 62px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .team__area-6 {
    background-position: 0 180px;
    padding-left: 62px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .team__area-6 {
    background-position: 0 180px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .team__area-6 .line {
    padding-top: 150px;
  }
}
.team__area-6 .sec-title {
  line-height: 0.9;
  font-size: 120px;
  padding-bottom: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .team__area-6 .sec-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .team__area-6 .sec-title {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .team__area-6 .sec-title {
    font-size: 60px;
  }
}
@media only screen and (max-width: 768px) {
  .team__area-6 .sec-title {
    font-size: 48px;
    padding-top: 90px;
  }
}
.team__area-6 .sec-title-wrapper {
  max-width: 520px;
  padding-bottom: 60px;
}
.team__area-6 .sec-title-wrapper p {
  font-size: 18px;
  line-height: 1.4;
}
@media only screen and (min-width: 1920px) {
  .team__slider {
    margin-left: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .team__slider {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .team__slide {
    padding: 0 20px;
  }
}
.team__slide:nth-child(even) {
  padding-top: 100px;
}
@media only screen and (max-width: 1200px) {
  .team__slide:nth-child(even) {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .team__slide:nth-child(even) {
    padding-top: 0;
  }
}
.team__slide img {
  width: 100%;
}
.team__member-name, .team__member-name-6 {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--white);
  padding-top: 20px;
}
.team__member-name-6 {
  color: var(--black-2);
}
.team__member-name-7 {
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  color: var(--black-2);
  padding-bottom: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .team__member-name-7 {
    font-size: 60px;
    padding-bottom: 20px;
  }
  .team__member-name-7 br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .team__member-name-7 {
    font-size: 60px;
    padding-bottom: 20px;
  }
  .team__member-name-7 br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .team__member-name-7 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .team__member-name-7 {
    font-size: 48px;
  }
  .team__member-name-7 br {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .team__member-name-7 {
    font-size: 36px;
    padding-bottom: 20px;
  }
}
.team__member-role, .team__member-role-6 {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--gray-2);
}
.team__member-role-6 {
  color: var(--black-3);
}
.team__member-role-7 {
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--black-3);
  font-style: italic;
  padding-bottom: 15px;
  margin-bottom: 40px;
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .team__member-role-7 {
    font-size: 20px;
  }
}
@media only screen and (max-width: 992px) {
  .team__member-role-7 {
    font-size: 18px;
  }
}
.team__member-role-7::after {
  position: absolute;
  content: "";
  width: 150px;
  height: 1px;
  left: 0;
  bottom: 0;
  background-color: var(--black-2);
}
@media only screen and (max-width: 992px) {
  .team__member-role-7::after {
    left: calc(50% - 75px);
  }
}
.team__member-role-7 span {
  color: var(--black-2);
  font-weight: 500;
}
/*----------------------------------------*/
/*  28. SOLUTION CSS START
/*----------------------------------------*/
.solution__area {
  padding-left: 100px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .solution__area {
    padding-left: 10px;
    padding-top: 150px;
  }
}
@media only screen and (max-width: 768px) {
  .solution__area {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 90px;
  }
}
.solution__wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.3fr 1.7fr 1fr;
  grid-template-columns: 1.3fr 1.7fr 1fr;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .solution__wrapper {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .solution__wrapper {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .solution__left {
    -ms-grid-column: 1;
    -ms-grid-column-span: 6;
    grid-column: 1/7;
  }
}
.solution__mid {
  padding-left: 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__mid {
    padding-left: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .solution__mid {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .solution__mid {
    padding-left: 0;
    grid-column: 7/-1;
    -ms-grid-row: 1;
    grid-row: 1;
  }
}
@media only screen and (max-width: 768px) {
  .solution__mid {
    padding-left: 0;
    -ms-grid-row: 1;
    grid-row: 1;
  }
}
.solution__mid p {
  max-width: 580px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-3);
  padding-left: 190px;
  position: relative;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__mid p {
    padding-left: 110px;
    max-width: 480px;
  }
}
@media only screen and (max-width: 1400px) {
  .solution__mid p {
    padding-left: 80px;
  }
}
@media only screen and (max-width: 1200px) {
  .solution__mid p {
    padding-left: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .solution__mid p {
    padding-left: 80px;
    padding-bottom: 50px;
  }
}
.solution__mid p::before {
  position: absolute;
  content: "";
  width: 140px;
  height: 1px;
  left: 0;
  top: 10px;
  background-color: var(--black-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__mid p::before {
    width: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .solution__mid p::before {
    width: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .solution__mid p::before {
    width: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .solution__mid p::before {
    width: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .solution__mid p::before {
    width: 70px;
  }
}
.solution__right {
  padding-top: 260px;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .solution__right {
    padding-top: 0;
    grid-column: 1/-1;
    -ms-grid-row: 2;
    grid-row: 2;
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 768px) {
  .solution__right {
    padding-top: 60px;
  }
}
.solution__title {
  font-weight: 600;
  font-size: 150px;
  line-height: 1;
  color: var(--black-2);
  padding-top: 280px;
  padding-bottom: 20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__title {
    font-size: 120px;
    padding-top: 200px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .solution__title {
    padding-top: 80px;
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .solution__title {
    padding-top: 80px;
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .solution__title {
    padding-top: 60px;
    font-size: 60px;
  }
}
@media only screen and (max-width: 768px) {
  .solution__title {
    padding-top: 30px;
    font-size: 36px;
  }
}
.solution__img-1 {
  display: inline-block;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .solution__img-1 {
    margin-left: 30px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .solution__img-1 img {
    max-width: 400px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .solution__img-1 img {
    max-width: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .solution__img-1 img {
    max-width: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .solution__img-1 img {
    max-width: 260px;
  }
}
@media only screen and (max-width: 768px) {
  .solution__img-1 img {
    max-width: 300px;
  }
}
.solution__img-1::after {
  position: absolute;
  content: "";
  width: 100%;
  height: calc(100% + 10px);
  left: 40px;
  top: 0;
  border: 1px solid var(--white-6);
  border-radius: 0 0 290px 230px;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .solution__img-1::after {
    left: 20px;
  }
}
.solution__img-2 {
  position: relative;
  float: right;
  margin-top: 60px;
}
.solution__img-2::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  right: 30px;
  top: 0;
  border: 1px solid var(--white-6);
  border-radius: 200px;
  z-index: -1;
}
.solution__img-3 {
  position: relative;
  float: right;
  margin-top: 60px;
}
@media only screen and (max-width: 1919px) {
  .solution__img-3 img {
    max-width: 360px;
  }
}
@media only screen and (max-width: 1400px) {
  .solution__img-3 img {
    max-width: 300px;
  }
}
@media only screen and (max-width: 1200px) {
  .solution__img-3 img {
    max-width: 220px;
  }
}
@media only screen and (max-width: 992px) {
  .solution__img-3 img {
    max-width: 260px;
  }
}
@media only screen and (max-width: 768px) {
  .solution__img-3 img {
    max-width: 300px;
  }
}
.solution__img-3::after {
  position: absolute;
  content: "";
  width: calc(100% + 20px);
  height: 100%;
  right: 0;
  top: -30px;
  border: 1px solid var(--white-6);
  border-radius: 280px 0 0 200px;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .solution__btm {
    padding-top: 40px;
  }
}
.solution__btm ul {
  text-align: right;
}
.solution__btm li {
  display: inline;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
  padding-right: 40px;
  position: relative;
}
.solution__btm li:last-child {
  padding-right: 0;
}
@media only screen and (max-width: 768px) {
  .solution__btm li {
    padding-right: 30px;
  }
}
.solution__btm li::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  left: -20px;
  top: 12px;
  background-color: var(--black-2);
}
.solution__btm li:first-child::after {
  position: unset;
}
.solution__shape img {
  position: absolute;
}
.solution__shape .shape-1 {
  left: 80%;
  top: 25%;
}
.solution__shape .shape-2 {
  left: 10%;
  top: 75%;
}
.solution__shape .shape-3 {
  left: 33%;
  top: 45%;
}
.solution__shape .shape-4 {
  left: 72%;
  top: 70%;
}
.solution__shape .shape-5 {
  top: 42%;
  left: 68%;
  z-index: -1;
}

/*----------------------------------------*/
/*  29. DEVELOPMENT CSS START
/*----------------------------------------*/
.development__area {
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .development__area .pt-130 {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 768px) {
  .development__area .pt-130 {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 768px) {
  .development__area .pb-150 {
    padding-bottom: 40px;
  }
}
.development__content {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 80px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 80px;
  padding-bottom: 35px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--black-3);
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1400px) {
  .development__content {
    grid-gap: 40px;
  }
}
@media only screen and (max-width: 1200px) {
  .development__content {
    grid-gap: 30px;
  }
}
@media only screen and (max-width: 992px) {
  .development__content {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .development__content {
    padding-top: 30px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.development__content p {
  font-size: 18px;
  line-height: 1.4;
}
.development__wrapper {
  padding-bottom: 55px;
}
@media only screen and (max-width: 768px) {
  .development__wrapper {
    padding-bottom: 15px;
  }
}
.development__wrapper ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 240px auto;
  grid-template-columns: 240px auto;
  -ms-grid-columns: 310px auto;
  grid-template-columns: 310px auto;
}
@media only screen and (max-width: 992px) {
  .development__wrapper ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .development__wrapper ul {
    padding-bottom: 20px;
  }
}
.development__wrapper ul li {
  display: inline-block;
  padding-bottom: 10px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .development__wrapper ul li {
    font-size: 16px;
    padding-bottom: 5px;
  }
}
.development__img {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 400px;
  z-index: 9;
}
.development__img img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 150%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .development__img {
    padding-bottom: 15px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
  }
  .development__img img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .development__img img {
    position: unset;
  }
}
@media only screen and (max-width: 768px) {
  .development__img {
    padding-bottom: 15px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
  }
  .development__img img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .development__img img {
    position: unset;
  }
}
.development__img img {
  width: 100%;
}

/*----------------------------------------*/
/*  30. AWARD CSS START
/*----------------------------------------*/
/*----------------------------------------*/
/*  31. FAQ CSS START
/*----------------------------------------*/
.faq__area {
  overflow: hidden;
}
.faq__area-6 {
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .faq__area-6 .line {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .faq__area-6 .line {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 768px) {
  .faq__area-6 .line {
    padding-top: 120px;
  }
}
.faq__area-6 .sec-title-wrapper {
  padding-bottom: 60px;
}
@media only screen and (max-width: 768px) {
  .faq__area-6 .sec-title-wrapper {
    padding-bottom: 40px;
  }
}
.faq__area-6 .sec-title-wrapper p {
  padding-left: 60px;
  font-size: 18px;
  padding-top: 20px;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .faq__area-6 .sec-title-wrapper p {
    padding-left: 30px;
  }
}
.faq__img {
  padding-right: 85px;
  overflow: hidden;
  position: relative;
  width: calc(100% - 85px);
  height: 630px;
  z-index: 1;
}
.faq__img img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 120%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 1400px) {
  .faq__img {
    padding-right: 30px;
  }
}
@media only screen and (max-width: 1200px) {
  .faq__img {
    padding-right: 0;
    width: calc(100% - 30px);
    height: auto;
  }
  .faq__img img {
    height: auto;
  }
  .faq__img img {
    position: unset;
  }
}
@media only screen and (max-width: 992px) {
  .faq__img {
    width: 100%;
  }
}
.faq__img img {
  width: 100%;
}
.faq__content {
  padding-left: 85px;
  padding-top: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .faq__content {
    padding-left: 30px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .faq__content {
    padding-left: 0;
    padding-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .faq__content {
    padding-left: 0;
    padding-top: 0;
  }
}
@media only screen and (max-width: 768px) {
  .faq__content {
    padding-left: 0;
  }
}
.faq__title {
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  color: var(--black-2);
  max-width: 315px;
  margin-bottom: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .faq__title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 768px) {
  .faq__title {
    font-size: 30px;
  }
}
.faq__list, .faq__list-6, .faq__list-3 {
  padding-right: 1px;
}
.faq__list .accordion-body, .faq__list-6 .accordion-body, .faq__list-3 .accordion-body {
  padding-left: 0;
  min-height: 160px;
}
.faq__list .accordion-item, .faq__list-6 .accordion-item, .faq__list-3 .accordion-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.faq__list .accordion-button, .faq__list-6 .accordion-button, .faq__list-3 .accordion-button {
  background-color: transparent;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
  padding-left: 0;
  padding-right: 10px;
  border-radius: 0;
}
.faq__list .accordion-button.collapsed::after, .faq__list-6 .accordion-button.collapsed::after, .faq__list-3 .accordion-button.collapsed::after {
  background-image: none;
  content: "+";
  font-weight: 300;
  font-size: 30px;
  top: 6px;
  position: absolute;
  right: 0;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.faq__list .accordion-button:not(.collapsed), .faq__list-6 .accordion-button:not(.collapsed), .faq__list-3 .accordion-button:not(.collapsed) {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: transparent;
}
.faq__list .accordion-button:not(.collapsed)::after, .faq__list-6 .accordion-button:not(.collapsed)::after, .faq__list-3 .accordion-button:not(.collapsed)::after {
  background-image: none;
  content: "-";
  font-weight: 300;
  font-size: 30px;
  top: 6px;
  position: absolute;
  right: 0;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.faq__list .accordion-button:focus, .faq__list-6 .accordion-button:focus, .faq__list-3 .accordion-button:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.faq__list-3 {
  padding-right: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .faq__list-3 {
    padding-right: 30px;
  }
}
@media only screen and (max-width: 992px) {
  .faq__list-3 {
    padding-right: 0;
  }
}

.faq__list-3 .accordion-item {
  background-color: transparent;
  border-bottom: 1px solid var(--black-2);
}
.faq__list-3 .accordion-item:first-child {
  border-top: 1px solid var(--black-2);
}
.faq__list-6 {
  padding-left: 1px;
}
.faq__list-6 .accordion-button {
  font-size: 20px;
}
.faq__list-6 .accordion-button.collapsed::after, .faq__list-6 .accordion-button:not(.collapsed)::after {
  font-size: 50px;
  top: -10px;
}
.faq__list-6 .accordion-body p {
  font-size: 18px;
  line-height: 1.4;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .faq__list-6 .accordion-header {
    padding-right: 10px;
  }
}
.faq__btm {
  text-align: center;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .faq__btm .pb-130 {
    padding-bottom: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .faq__btm .pb-130 {
    padding-bottom: 120px;
  }
}
.faq__btm p {
  padding-top: 15px;
  font-size: 18px;
  line-height: 1.4;
}
.faq__btm a {
  margin: 0 auto;
  margin-top: 60px;
}
@media only screen and (max-width: 768px) {
  .faq__btm a {
    margin-top: 0;
  }
}
.faq__btm #btn_wrapper {
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .faq__btm #btn_wrapper {
    margin-top: 40px;
  }
}

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

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

/*----------------------------------------*/
/*  34. CONTACT CSS START
/*----------------------------------------*/
.contact__area-6 {
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .contact__area-6 .line {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 768px) {
  .contact__area-6 .line {
    padding-top: 130px;
  }
}
.contact__text {
  max-width: 330px;
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .contact__text {
    padding-top: 30px;
  }
}
.contact__text p {
  font-size: 18px;
  line-height: 1.4;
}
.contact__btm {
  padding-top: 65px;
}
@media only screen and (max-width: 768px) {
  .contact__btm {
    padding-top: 50px;
  }
}
.contact__info {
  padding-top: 15px;
}
@media only screen and (max-width: 768px) {
  .contact__info {
    padding-bottom: 50px;
  }
}
.contact__info h3 {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: var(--black-2);
  padding-bottom: 30px;
}
.contact__info ul li {
    font-size: 18px;
}
.contact__info ul li a {
  text-decoration-line: underline;
}
.contact__info ul li a,
.contact__info ul li span {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
  display: inline-block;
  margin-bottom: 10px;
}
.contact__form {
  position: relative;
  z-index: 9;
}
.contact__form input,
.contact__form textarea {
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-2);
  border: none;
  border-bottom: 1px solid var(--gray);
  padding: 15px 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  outline: 0;
  position: relative;
  z-index: 1;
  background: transparent;
  margin-bottom: 35px;
}
.drift_bottel {
  /* background-image: url(/wp-content/uploads/2023/01/drift_bottel.gif);
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center; */
}
.drift_bottel button {
  /* font-size: 0px;
  transition: all ease 0.3s; */
}
.drift_bottel button:hover {
  /* font-size: 16px;
  transition: all ease 0.5s; */
}
.drift_bottel button:hover {
  font-size: 0px;
  transition: all ease 0.3s;
}

.drift_bottel .wc-btn-primary span{
  background-image: url(/wp-content/uploads/2023/01/drift_bottel.gif);
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--white);
}
.drift_bottel .wc-btn-primary:hover span{
  height: 170px;
  width: 170px;
  background-size: 100%;
}
.drift_bottel .wc-btn-primary span{
  top: 0px!important;
  left: 0px!important;
  transform: translate(0%, 0%);
}
@media only screen and (max-width: 1200px) {
  .contact__form input,
.contact__form textarea {
    padding: 10px 0;
    margin-bottom: 25px;
  }
  /* .drift_bottel .wc-btn-primary:hover span{
    height: 170px;
    width: 170px;
    background-size: 100%;
  }
  .drift_bottel .wc-btn-primary span{
    top: 0px!important;
    left: 0px!important;
    transform: translate(0%, 0%);
  } */
}
@media only screen and (max-width: 768px) {
  .contact__form input,
.contact__form textarea {
    margin-bottom: 20px;
  }

}
.contact__form input:focus,
.contact__form textarea:focus {
  border-bottom: 1px solid var(--black-2);
}
.contact__form input::-webkit-input-placeholder, .contact__form textarea::-webkit-input-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.contact__form input::-moz-placeholder, .contact__form textarea::-moz-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.contact__form input:-ms-input-placeholder, .contact__form textarea:-ms-input-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.contact__form input::-ms-input-placeholder, .contact__form textarea::-ms-input-placeholder {
  color: var(--black-2);
  opacity: 1;
}
.contact__form input::placeholder,
.contact__form textarea::placeholder {
  color: var(--black-2);
  opacity: 1;
}
.contact__form textarea {
  height: 55px;
  padding: 0.75em;
}
.contact__form #btn_wrapper {
  margin-top: -20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .contact__form #btn_wrapper {
    margin-top: -10px;
  }
}
@media (max-width: 1200px) {
  .contact__form #btn_wrapper {
    margin-top: 10px;
  }
}

/*----------------------------------------*/
/*  35. PRICE CSS START
/*----------------------------------------*/
/* 
/*----------------------------------------*/
/*  36. 404 CSS START
/*----------------------------------------*/
.error__content {
  padding-top: 80px;
  height: 100vh;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .error__content {
    padding-top: 100px;
  }
}
.error__content::before {
  position: absolute;
  content: "";
  width: 38px;
  height: 38px;
  top: 70%;
  left: 10%;
  background-image: url(../imgs/icon/6.png);
  background-repeat: no-repeat;
  -webkit-animation: wcZoom 2s infinite;
          animation: wcZoom 2s infinite;
}
.error__content::after {
  position: absolute;
  content: "";
  width: 38px;
  height: 38px;
  top: 10%;
  right: 10%;
  background-image: url(../imgs/icon/3.png);
  background-repeat: no-repeat;
  -webkit-animation: wcZoom 2s infinite;
          animation: wcZoom 2s infinite;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .error__content::after {
    top: 20%;
  }
}
@media only screen and (max-width: 768px) {
  .error__content::after {
    top: 15%;
  }
}
.error__content h2 {
  font-weight: 500;
  font-size: 36px;
  line-height: 1.5;
  color: var(--black-2);
  padding-top: 25px;
  padding-bottom: 10px;
}
@media only screen and (max-width: 768px) {
  .error__content h2 {
    font-size: 30px;
    line-height: 1.3;
  }
}
.error__content p {
  max-width: 340px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.4;
  padding-bottom: 50px;
}
@media only screen and (max-width: 992px) {
  .error__content p {
    padding-bottom: 30px;
  }
}
.error__content a {
  margin: 0 auto;
}
.error__content img {
  max-width: 100%;
}
.error__content #btn_wrapper {
  margin-left: 0;
  margin-top: -40px;
}
@media (max-width: 1400px) {
  .error__content #btn_wrapper {
    margin-top: 0;
  }
}

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

.btn-together {
  font-weight: 400;
  line-height: 1.3;
  color: var(--white);
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-size: 18px;
  text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
  .btn-together {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .btn-together {
    font-size: 15px;
  }
}
.btn-together i {
  padding-left: 10px;
}
.btn-together::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--white);
  content: "";
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.btn-together:hover::after {
  left: 0;
  width: 1%;
}
.btn-together:hover {
  color: var(--gray);
}


.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;
}
.portfolio__inner-5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 110px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media only screen and (max-width: 768px) {
  .portfolio__inner-5 {
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .portfolio__inner-5 {
    gap: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .portfolio__inner-5 {
    gap: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .portfolio__inner-5 {
    gap: 70px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__inner-5 {
    gap: 80px;
  }
}
.portfolio__item-5 {
  width: 29%;
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media only screen and (max-width: 768px) {
  .portfolio__item-5 {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .portfolio__item-5 {
    width: 48.5%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .portfolio__item-5 {
    width: 48%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .portfolio__item-5 {
    width: 28%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .portfolio__item-5 {
    width: 28%;
  }
}
.portfolio__item-5:hover .portfolio__content-5 {
  opacity: 1;
  right: -50px;
}
.portfolio__item-5 img {
  width: 100%;
  max-width: 100%;
}
.portfolio__content-5 {
  background-color: var(--black-2);
  padding: 20px 30px 22px 30px;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 9;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media only screen and (max-width: 768px) {
  .portfolio__content-5 {
    right: 0;
    opacity: 1;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .portfolio__content-5 {
    right: 0;
    opacity: 1;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .portfolio__content-5 {
    right: -70px;
  }
}
.portfolio__name-5 {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  padding-bottom: 2px;
  color: var(--white);
  text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
  .portfolio__name-5 {
    font-size: 12px;
  }
}
.portfolio__title-5 {
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
  .portfolio__title-5 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .portfolio__title-5 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .portfolio__title-5 {
    font-size: 20px;
  }
}
.cta__list-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 230px 30px auto;
  grid-template-columns: 230px auto;
  gap: 30px;
}
@media only screen and (max-width: 768px) {
  .cta__list-wrapper {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .cta__list-wrapper {
    -ms-grid-columns: 180px 20px auto;
    grid-template-columns: 180px auto;
    gap: 20px;
  }
}
.cta__list-left {
  padding-left: 15px;
}
.cta__list-left li {
  position: relative;
}
.cta__list-left li::before {
  position: absolute;
  top: 0;
  left: -15px;
  width: auto;
  height: auto;
  content: "+";
}
.cta__item-5 h3 {
  font-size: 18px;
  font-weight: 400;
  color: var(--white);
  padding-bottom: 10px;
  text-transform: uppercase;
}
.cta__item-5 li {
  font-size: 18px;
  color: var(--gray-2);
  line-height: 1.5;
  font-weight: 400;
}

@media only screen and (max-width: 992px) {
  .cta__item-5 li {
    font-size: 16px;
  }
  .cta__sub-title-2 {
    font-size: 26px;
  }
  .cta__title-2 {
    font-size: 55px;
  }
  .counter__img-3 img {
      width: 280px;
  }
  .choose-title-wrapper {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.cta__btn-5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .cta__btn-5 {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .counter__img-3 img {
    width: 230px;
}
}

/*----------------------------------------*/
/*  38. FOOTER CSS START
/*----------------------------------------*/

.footer__area-3 {
  background-color: var(--black-2);
}
.footer__row {
  margin-left: -500px;
}
@media only screen and (max-width: 768px) {
  .footer__row {
    margin-left: 0;
    margin-right: 0;
  }
}
.footer__top-3 {
  border-bottom: 1px solid var(--black-6);
}
.footer__top-wrapper-3 {
  padding: 0 50px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 30% 10% auto;
  grid-template-columns: 30% 10% auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .footer__top-wrapper-3 {
    -ms-grid-columns: 35% 20px 15% 20px auto;
    grid-template-columns: 35% 15% auto;
    gap: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .footer__top-wrapper-3 {
    -ms-grid-columns: 35% 20px 20% 20px auto;
    grid-template-columns: 35% 20% auto;
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .footer__top-wrapper-3 {
    -ms-grid-columns: 38% 25% auto;
    grid-template-columns: 38% 25% auto;
  }
}
@media only screen and (max-width: 768px) {
  .footer__top-wrapper-3 {
    padding: 0 15px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.footer__btm-3 {
  padding: 50px;
}
@media only screen and (max-width: 1200px) {
  .footer__btm-3 {
    padding: 40px 15px;
  }
}
@media only screen and (max-width: 992px) {
  .footer__btm-3 .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
@media only screen and (max-width: 768px) {
  .footer__btm-3 {
    padding: 30px 10px;
  }
}

.footer__logo-3 img {
  margin-bottom: 30px;
  width: 250px;
}
.footer__logo-3 p {
  max-width: 310px;
  color: var(--gray-2);
}
.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: 992px) {
  .footer__sub-title {
    font-size: 30px;
  }
  .footer__top-wrapper-3 {
    padding: 0 20px;
  }
}
@media only screen and (max-width: 768px) {
  .footer__sub-title {
    font-size: 24px;
  }
}

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

.footer__social-3 .ast-builder-social-element{
  margin: 0;
}
.footer__social-3 .element-social-inner-wrap a:last-child {
  border-bottom: 0;
}
.footer__social-3 .element-social-inner-wrap 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;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--black-6);
  background-color: transparent;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 1200px) {
  .footer__social-3 .element-social-inner-wrap a {
    padding: 30px 0;
  }
}
.footer__social-3 .element-social-inner-wrap a:hover {
  color: var(--black-2);
  background-color: var(--white);
}
.footer__contact-3 {
  text-align: right;
  padding-top: 90px;
}
@media only screen and (max-width: 1400px) {
  .footer__contact-3 {
    padding-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
@media only screen and (max-width: 768px) {
  .footer__contact-3 {
    text-align: center;
    margin-bottom: 50px;
    padding-top: 60px;
    justify-content: center;
  }
  .footer__logo-3 p {
    max-width: 100%;
  }
}
.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: 1400px) {
  .footer__contact-3 a {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .footer__contact-3 a {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .footer__contact-3 a {
    font-size: 48px;
  }
}
@media only screen and (max-width: 768px) {
  .footer__contact-3 a {
    font-size: 50px;
  }
}
.footer__copyright-3 p {
  color: var(--white);
  /* max-width: 235px; */
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .footer__copyright-3 p {
    max-width: 100%;
    text-align: center;
  }
}
@media only screen and (max-width: 768px) {
  .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(--gray-2);
}

.footer__nav-2 {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media only screen and (max-width: 992px) {
  .footer__nav-2 {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .footer-menu-2 li:first-child {
    padding: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 992px) {
.footer__area-3 .footer__btm-3 .row .col-lg-6{
  width: 100%;
}
}

footer #btn_wrapper {
  margin: 0 auto;
}

/*----------------------------------------*/
/*  00. PRELOADER CSS START
/*----------------------------------------*/
@-webkit-keyframes wcLoading {
  0% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
    background: var(--white);
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    background: var(--primary);
  }
  100% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
    background: transparent;
  }
}
@keyframes wcLoading {
  0% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
    background: var(--white);
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    background: var(--primary);
  }
  100% {
    -webkit-transform: scaleY(0.1);
            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%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}
.loading .bar {
  width: 6px;
  height: 60px;
  background: var(--white);
  display: inline-block;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: wcLoading 1.5s ease-in-out infinite;
          animation: wcLoading 1.5s ease-in-out infinite;
}
.loading .bar1 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.loading .bar2 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.loading .bar3 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.loading .bar4 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.loading .bar5 {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.loading .bar6 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.loading .bar7 {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.loading .bar8 {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

: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;
} */

.line_4 {
  position: relative;
}
.line-col-4 div {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--white-2);
}
/* .line-col-4 div:nth-child(2) {
  left: 33.33%;
}
.line-col-4 div:nth-child(3) {
  left: 66.66%;
} */
.line-col-4 div:nth-child(2) {
  left: 100%;
}

.portfolio6__line .line-col-4 div {
  height: 1000px;
  top: unset;
  bottom: 0;
}

.btn-started {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  padding: 17px 36px 16px;
  color: var(--white);
  border-radius: 5px;
  background: var(--lime);
  display: inline-block;
}
.btn-started i {
  padding-left: 10px;
}
.btn-started:hover {
  color: var(--white);
  background-color: #FF977B;
}
.btn-view {
  font-weight: 500;
  line-height: 1.3;
  color: var(--black-2);
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.btn-view i {
  padding-left: 10px;
}
.btn-view::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--black-2);
  content: "";
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.btn-view:hover::after {
  left: 0;
  width: 1%;
}
.btn-view:hover {
  color: var(--lime-2);
}
.btn-extra {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  padding: 9px 14px 11px;
  border-radius: 5px;
  background-color: var(--black-2);
  border: 1px solid var(--black-2);
}
.btn-extra:hover {
  color: var(--black);
  background-color: transparent;
}

.title-wrapper-6 p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-3);
}
@media only screen and (max-width: 768px) {
  .title-wrapper-6 p {
    font-size: 16px;
  }
}

.sec-subtile-6 {
  font-size: 16px;
  color: var(--black-2);
  line-height: 1.3;
  padding: 2px 14px 3px;
  font-weight: 400;
  border-radius: 16px;
  border: 1px solid var(--gray-16);
  display: inline-block;
  margin-bottom: 17px;
}
@media only screen and (max-width: 768px) {
  .sec-subtile-6 {
    margin-bottom: 10px;
  }
}
.sec-title-6 {
  font-size: 50px;
  color: var(--black-2);
  font-weight: 500;
  line-height: 1.13;
  padding-bottom: 15px;
}
@media only screen and (max-width: 768px) {
  .sec-title-6 {
    font-size: 30px;
    padding-bottom: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .sec-title-6 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .sec-title-6 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .sec-title-6 {
    font-size: 45px;
  }
}

.feature__title-6 {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--white);
  padding-bottom: 22px;
  padding-left: 60px;
}
.feature__title-6::before {
  position: absolute;
  top: 13px;
  left: 0;
  width: 50px;
  height: 1px;
  content: "";
  background: var(--white);
}

.feature__img-1 {
  position: absolute;
  top: 22%;
  right: 10%;
}
@media only screen and (max-width: 992px) {
  .feature__img-1 {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .feature__img-1 {
    top: 9%;
    right: 4%;
  }
}
.feature__img-2 {
  margin-left: 100px;
}
@media only screen and (max-width: 992px) {
  .feature__img-2 {
    display: none;
  }
}
.feature__img-3 {
  position: absolute;
  right: 6%;
  bottom: 5%;
}
@media only screen and (max-width: 992px) {
  .feature__img-3 {
    display: none;
  }
}

.service__img-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .service__img-left img {
    width: 100%;
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 1200px) {
  .service__img-left img {
    width: 100%;
  }
}

.service__item-number {
  font-size: 18px;
  font-weight: 300;
  color: var(--lime-2);
}
.service__item-title {
  font-size: 60px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--black-2);
}
@media only screen and (max-width: 768px) {
  .service__item-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .service__item-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .service__item-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .service__item-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .service__item-title {
    font-size: 50px;
  }
}
.service__item-icon {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media only screen and (max-width: 768px) {
  .service__item-icon {
    opacity: 1;
  }
}
.service__item-icon i {
  font-size: 23px;
  color: var(--black-2);
}
.faq__sec-title p {
  font-size: 18px;
  color: var(--gray-2);
  padding-bottom: 40px;
}
@media only screen and (max-width: 768px) {
  .faq__sec-title p {
    font-size: 16px;
  }
}
.faq__sec-title .btn-view {
  color: var(--white);
}
.faq__sec-title .btn-view::after {
  background-color: var(--white);
}
.faq__sec-title-title-4 {
  padding-right: 105px;
}
.faq__img6-1 {
  position: absolute;
  bottom: 0;
  left: 35%;
  z-index: 0;
}
.faq__img6-2 {
  position: absolute;
  top: 0;
  left: 51px;
  z-index: 0;
}
@media only screen and (max-width: 768px) {
  .faq__img6-2 {
    display: none;
  }
}
.solution__content .sec-title-6 {
  color: var(--white);
}
.solution__content .sec-subtile-6 {
  color: var(--white);
}
.solution__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 270px auto;
  grid-template-columns: 270px auto;
  border-top: 1px solid var(--black-14);
  margin-top: 16px;
  padding-top: 24px;
}
@media only screen and (max-width: 768px) {
  .solution__list {
    -ms-grid-columns: 180px auto;
    grid-template-columns: 180px auto;
  }
}
@media only screen and (max-width: 992px) {
  .solution__list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 1400px) {
  .solution__list {
    -ms-grid-columns: 250px 300px;
    grid-template-columns: 250px 300px;
    border-top: 1px solid var(--white-6);
  }
}
.solution__list li {
  font-size: 18px;
  color: var(--white);
  font-weight: 400;
  position: relative;
  padding-left: 15px;
  margin-bottom: 5px;
}
@media only screen and (max-width: 768px) {
  .solution__list li {
    font-size: 14px;
  }
}
.solution__list li::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  content: "+";
}

.cta__area-4 {
  overflow: hidden;
  background-color: #F1E9E3;
}
.cta__area-4 .btn-started {
  padding: 16px 28px;
}
.cta__inner-4 {
  background-color: #F1E9E3;
  padding: 66px 60px 0px 60px;
  padding: 66px 0px 0px 0px;
  position: relative;
  border-radius: 10px;
}
@media only screen and (max-width: 1200px) {
  .cta__inner-4 {
    padding: 60px 30px 0;
  }
  .cta__inner-4 .cta-shape-2 {
      right: 60px;
      width: 50px;
  }
}
@media only screen and (max-width: 992px) {
  .cta__inner-4 {
    padding: 30px;
  }
}
@media only screen and (max-width: 768px) {
  .cta__inner-4 {
    padding: 40px 20px;
  }
  .cta__inner-4 .cta__content-4{
    text-align: center;
  }
  .cta__inner-4 .cta__content-4 img{
    width: 320px;
  }
}
.cta__inner-4 img {
  max-width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .cta__inner-4 img {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .cta__inner-4 img {
    max-width: 100%;
  }
}
.cta__inner-4 .cta-shape {
  position: absolute;
  bottom: 0;
  right: 460px;
  z-index: 0;
}
.cta__inner-4 .cta-shape {
  opacity: 0.2;
  bottom: 18px;
}
span.author {
  font-size: 22px;
}
 @media only screen and (min-width: 768px) and (max-width: 992px) {
  .cta__inner-4 .cta-shape {
    bottom: 30px;
    right: 250px;
    max-width: 100px;
  }
}
@media only screen and (max-width: 768px) {
  .cta__inner-4 .cta-shape {
    bottom: 30px;
    right: 20px;
    max-width: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) { 
  .cta__inner-4 .cta-shape {
    max-width: 120px;
    right: 360px;
  }
  .cta__inner-4 .cta-shape {
    max-width: 200px;
    right: calc(45% - 100px);
    bottom: calc(50% - 100px);
  }
}
.cta__inner-4 .cta-shape-2 {
  position: absolute;
  bottom: 60px;
  right: 110px;
  z-index: 0;
  opacity: 0.3;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .cta__inner-4 .cta-shape-2 {
    right: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .cta__inner-4 .cta-shape-2 {
    right: 10px;
    bottom: 60px;
}
  .cta__inner-4 .cta-shape {
    max-width: 200px;
    right: calc(45% - 100px);
    bottom: calc(50% - 70px);
}
}
.cta__content-4 {
  height: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .cta__content-4 img {
    width: 100%;
  }
}
.cta__content-4 p {
  font-size: 18px;
  font-weight: 400;
  padding-bottom: 34px;
  margin-top: 15px;
  color: var(--black-2);
}
@media only screen and (max-width: 768px) {
  .cta__content-4 p {
    font-size: 16px;
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .cta__content-4 p {
    font-size: 16px;
    padding-bottom: 20px;
  }
}
.cta__title-4 {
  font-size: 50px;
  font-weight: 500;
  color: var(--black-2);
  line-height: 1.2;
  padding-top: 10px;
}
@media only screen and (max-width: 768px) {
  .cta__title-4 {
    font-size: 28px;
  }
  span.author {
    font-size: 18px;
}
.counter__img-3{
  display: none;
}
.cta__sub-title-2 {
  font-size: 19px;
}
.cta__title-2 {
  font-size: 50px;
}
.cta__inner-4 .cta-shape-2 {
  bottom: 30px;
  right: 16px;
}
.cta__inner-4 .cta-shape {
  bottom: unset;
  right: unset;
  top: 20px;
}
}
@media only screen and (max-width: 576px) {

.cta__sub-title-2 {
  font-size: 18px;
}
.cta__title-2 {
  font-size: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .cta__title-4 {
    padding-top: 30px;
    font-size: 28px;
  }
  span.author {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .cta__title-4 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .cta__title-4 {
    font-size: 40px;
  }
}
.portfolio__sec-title {
  position: absolute;
  bottom: 140px;
}
@media only screen and (max-width: 768px) {
  .portfolio__sec-title {
    position: unset;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .portfolio__sec-title {
    position: unset;
  }
}
.portfolio__sec-title p {
  font-size: 18px;
  color: var(--black-3);
  max-width: 300px;
}

.testimonial__area-4 {
  overflow: hidden;
  text-align: center;
}
.testimonial__sec-title {
  padding-bottom: 60px;
}
.testimonial__sec-title p {
  font-size: 18px;
  color: var(--black-3);
  max-width: 500px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .testimonial__sec-title p {
    width: 100%;
    font-size: 16px;
  }
}
.testimonial__slide-4 {
  background-color: var(--gray-22);
  padding: 50px 50px 44px 50px;
  text-align: left;
}
@media only screen and (max-width: 1200px) {
  .testimonial__slide-4 {
    padding: 35px 30px;
  }
}
@media only screen and (max-width: 992px) {
  .testimonial__slide-4 {
    padding: 35px 30px 30px 30px;
  }
}
@media only screen and (max-width: 768px) {
  .testimonial__slide-4 {
    padding: 35px 30px;
  }
}
.testimonial__slider-4 {
  /* padding-bottom: 150px; */
  height: 100%;
  /* width: 98%; */
  width: calc(100% - 24px);
  /* margin-left: 11px; */
}
.testimonial__slider-4 .prev-button,
.testimonial__slider-4 .next-button {
  width: 40px;
}
.testimonial__slider-4 .prev-button:hover,
.testimonial__slider-4 .next-button:hover {
  color: var(--primary);
}
@media only screen and (max-width: 768px) {
  .testimonial__slider-4 {
    /* width: 93%; */
    /* padding-bottom: 60px; */
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .testimonial__slider-4 {
    /* width: 97%; */
    /* padding-bottom: 80px; */
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .testimonial__slider-4 {
    /* padding-bottom: 100px; */
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .testimonial__slider-4 {
    /* padding-bottom: 110px; */
  }
}
.testimonial__img-4 {
  margin-bottom: 42px;
  border-radius: 100px;
  width: 85px;
  height: auto;
}
.testimonial__feedback-4 {
  font-size: 14px;
  font-weight: 400;
  color: var(--black-2);
  border-radius: 5px;
  padding: 3px 10px;
  margin-bottom: 18px;
  display: inline-block;
  line-height: 1.3;
  background-color: var(--gray-23);
}
.testimonial__info-4 p {
  color: var(--black-3);
  font-weight: 400;
  line-height: 1.5;
  padding-bottom: 19px;
  text-align: left;
}
.testimonial__name-4 {
  font-size: 18px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.3;
}
.testimonial__role-4 {
  font-size: 14px;
  color: var(--black-3);
  font-weight: 400;
}
.testimonial__btn-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 160px;
  padding-top: 68px;
  position: relative;
  z-index: 999;
}
@media only screen and (max-width: 768px) {
  .testimonial__btn-4 {
    padding-top: 35px;
  }
}
.testimonial__btn-4 i {
  font-size: 18px;
}
.testimonial__pagination-4 {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px;
  bottom: 1px;
  z-index: -1;
}

@-webkit-keyframes leftmove {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: -20px;
  }
  100% {
    margin-left: 0;
  }
}

@keyframes leftmove {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: -20px;
  }
  100% {
    margin-left: 0;
  }
}
@-webkit-keyframes rightmove {
  0% {
    margin-right: 0;
  }
  50% {
    margin-right: 30px;
  }
  100% {
    margin-right: 0;
  }
}
@keyframes rightmove {
  0% {
    margin-right: 0;
  }
  50% {
    margin-right: 30px;
  }
  100% {
    margin-right: 0;
  }
}
@-webkit-keyframes move {
  0% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: -20px;
  }
  100% {
    margin-bottom: 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;
  }
}
@-webkit-keyframes rotate-icon {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-icon {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.hero__shape {
  -webkit-animation-name: leftmove;
          animation-name: leftmove;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: leftmove infinite 4s;
          animation: leftmove infinite 4s;
}
.hero__arrow-icon {
  -webkit-animation-name: rightmove;
          animation-name: rightmove;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation: rightmove infinite 3s;
          animation: rightmove infinite 3s;
}
.hero__shape-2 {
  -webkit-animation-name: move;
          animation-name: move;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation: move infinite 4s;
          animation: move infinite 4s;
}
.hero__shape-3 {
  -webkit-animation: rotate-icon 5s linear 0s infinite normal;
          animation: rotate-icon 5s linear 0s infinite normal;
}

.faq__img6-1 {
  -webkit-animation-name: move;
          animation-name: move;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation: move infinite 4s;
          animation: move infinite 4s;
}

.faq__img6-2 {
  -webkit-animation-name: move;
          animation-name: move;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation: move infinite 4s;
          animation: move infinite 4s;
}

.dark .line-col-4 div {
  background: var(--bg-line);
}
.dark .btn-view {
  color: var(--white);
}
.dark .btn-view::after {
  background-color: var(--white);
}
.dark .sec-subtile-6,
.dark .sec-title-6,
.dark .service__item-title,
.dark .service__right-4 p span,
.dark .portfolio__title-4,
.dark .portfolio__icon-4,
.dark .testimonial__name-4,
.dark .footer__item-title,
.dark .footer__newsletter-6 button {
  color: var(--white);
}
.dark .title-wrapper-6 p,
.dark .service__right-4 p,
.dark .portfolio__subtitle-4,
.dark .portfolio__sec-title p,
.dark .testimonial__sec-title p,
.dark .testimonial__info-4 p,
.dark .testimonial__role-4,
.dark .footer__chekbox label {
  color: var(--gray-2);
}

.dark .hero__title-6 {
  color: var(--white);
}
.dark .testimonial__slider-4 {
  color: var(--white);
}
.dark .testimonial__slide-4 {
  background: var(--d-black-2);
}
.dark .testimonial__feedback-4 {
  color: var(--gray-2);
  background-color: var(--black-2);
}

.dark .service__item-4 {
  border-color: var(--bg-line);
}
.dark .service__item-4:first-child {
  border-color: var(--bg-line);
}
.dark .service__item-icon i {
  color: var(--white);
}

.hero__area-7 {
  padding-top: 180px;
  padding-bottom: 140px;
  background-image: url(/wp-content/uploads/2022/12/hero-bg.png);
  background-repeat: repeat;
  position: relative;
}
@media only screen and (max-width: 1400px) {
  .hero__area-7 {
    padding-top: 140px;
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 992px) {
  .hero__area-7 {
    padding-top: 120px;
    padding-bottom: 60px;
}
}
.hero__area-7 .shape-1 {
  position: absolute;
  right: 100px;
  bottom: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .hero__area-7 .shape-1 {
    right: 60px;
    max-width: 260px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .hero__area-7 .shape-1 {
    max-width: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .hero__area-7 .shape-1 {
    max-width: 200px;
    right: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .hero__area-7 .shape-1 {
    max-width: 120px;
    bottom: unset;
    top: 330px;
    right: 0;
  }
}
.hero__title-7 {
  font-weight: 500;
  font-size: 130px;
  line-height: 1;
  color: var(--black-2);
  max-width: 1060px;
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .hero__title-7 {
    font-size: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .hero__title-7 {
    font-size: 112px;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .hero__title-7 {
    font-size: 85px;
  }
  .hero__title-7 img {
    max-width: 90px;
  }
}
@media only screen and (max-width: 768px) {
  .hero__title-7 {
    font-size: 64px;
}
  .hero__title-7 img {
    max-width: 60px;
  }
}
@media only screen and (max-width: 575px) {
  .hero__title-wrap-7 {
    width: 455px;
}
.hero__title-7 {
  font-size: 62px;
}
/* .hero__text-7{
  margin-top: 30px;
} */
}
@media only screen and (max-width: 480px) {
  .hero__title-7 {
    font-size: 48px;
}
  .hero__title-wrap-7 {
    width: 350px;
}
}
@media only screen and (max-width: 375px) {
  .hero__title-7 {
    font-size: 36px;
  }
  .hero__title-wrap-7 {
    width: 296px;
}
}

.hero__text-7 {
  margin-left: 210px;
  margin-top: 60px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 20px auto;
  grid-template-columns: 200px auto;
  grid-gap: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .hero__text-7 {
    margin-left: 60px;
    -ms-grid-columns: 160px 20px auto;
    grid-template-columns: 160px auto;
  }
}
@media only screen and (max-width: 768px) {
  .hero__text-7 {
    margin-left: 0;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.hero__text-7 .about {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-2);
  position: relative;
  text-transform: capitalize;
}
.hero__text-7 .about::after {
  position: absolute;
  content: "";
  width: 90px;
  height: 1px;
  top: 14px;
  left: 60px;
  background-color: var(--black-2);
  padding-left: 9px;
}
.hero__text-7 p {
  max-width: 350px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-3);
}

.dark .hero__area-7 {
  -webkit-filter: invert(1);
          filter: invert(1);
}
.dark .about__mid-7 p,
.dark .service__item-7 ul li {
  color: var(--gray-2);
}
/* Custom Css */

.main-header-menu .menu-link, .main-header-menu>a {
  padding: 29px 0px;
}
.budget_rage {
  width: calc(100% - 12px);
}
.budget_rage label.uacf7-slider-label {
  margin-bottom: 10px;
  padding: 0.75em!important;
}
select.wpcf7-form-control {
  border: none;
  border-bottom: 1px solid var(--gray);
  width: calc(100% - 12px);
  margin-bottom: 15px;
}
.wpcf7-not-valid-tip {
  position: absolute;
  top: -12px;
  left: 12px;
  font-size: 12px;
}
.wpcf7 input:not([type=submit]).wpcf7-not-valid, .wpcf7 select.wpcf7-not-valid, .wpcf7 textarea.wpcf7-not-valid {
  border-color: red;
}
.message_in_bottel {
  margin-bottom: 50px;
}

.search-form-wrapper {
  width: 50%;
}
.search-form-wrapper label {
  width: 100%;
}
.search-form-wrapper [type=search] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
  color: #585858;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  padding: 20px 45px 20px 20px;
  border-radius: 30px;
  border: 1px solid #3C3C3C;
  background-color: transparent;
  outline: none;
  margin: 15px 0px 50px 0px;
}
form.search-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.error__content img.error_img {
  width: 175px;
}

#chaty-widget-0 .chaty-widget .open-chaty .chaty-svg circle,
#chaty-widget-0 .chaty-widget .chaty-cta-button .chaty-svg ellipse
{
  fill: #10efd5;
}
#chaty-widget-0 .chaty-i-trigger .chaty-cta-button {
  background-color: #10efd5;
}
#chaty-widget-0.chaty .chaty-widget {
  bottom: 85px;
  right: 16px;
}
.contact__text.thankyou_text {
    max-width: 545px;
    display: flex;
    flex-wrap: wrap;
}
.contact__text.thankyou_text h3 {
    margin-bottom: 40px;
}
.message_in_bottel.thankyou_page {
    margin-top: 30px;
}
.message_in_bottel.thankyou_page img {
    max-width: 480px;
	width: 100%;
}
.grecaptcha-badge {
    opacity: 0;
}

@media only screen and (max-width: 768px){
  .search-form-wrapper {
    width: 100%;
  }
  .error__content h2 {
    font-size: 28px;
  }
	.line::after{
		display:none;
	}
}
@media only screen and (max-width: 600px){
  .error__content h2 {
    font-size: 24px;
  }
}
@media only screen and (max-width: 575px){
  .error__content h2 {
    font-size: 20px;
  }
}


@media only screen and (max-width: 768px){
  .offcanvas__area .offcanvas__body {
    display: flex;
    flex-wrap: wrap;
}
.offcanvas__area .offcanvas__left{
  display: block;
  width: 100%;
}
.offcanvas__area .offcanvas__left .offcanvas__logo{
  height: 90px;
}
.offcanvas__area .offcanvas__left .offcanvas__social{
  display: none;
}
.offcanvas__area .offcanvas__mid {
  margin-top: 0;
  width: 100%;
}
.offcanvas__menu-wrapper.mean-container {
  padding-top: 0px;
}
.offcanvas__area .offcanvas__right {
  width: 100%;
  display: block;
}
.offcanvas__area .offcanvas__right .offcanvas__search {
  padding-top: 40px;
  padding-bottom: 40px;
}
.offcanvas__area .offcanvas__right .offcanvas__contact {
  display: none;
}
.offcanvas__area .offcanvas__right .shape-1{
  display: none;
}
.offcanvas__area .offcanvas__right .shape-2{
  display: none;
}
}
.footer-menu-2 li {
        padding-left: 25px;
    }