@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: #F53F5B;
  --secondary: #2c2c2c;
  --black: #222221;
  --black-2: #121212;
  --black-3: #555;
  --black-4: #1d1d1d;
  --black-5: #343434;
  --black-6: #262626;
  --black-7: #555555;
  --black-13: #666;
  --white: #F6F7F7;
  --white-2: #efefef;
  --white-3: #e9e9e9;
  --white-4: #f0f0f0;
  --white-5: #fbfbfb;
  --white-6: #d7d7d7;
  --white-7: #F5F5F5;
  --gray: #c2c2c2;
  --gray-2: #F6F7F7;
  --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;
  --gray-16: #939393;
  --pink: #FAEDE9;
  --pink-2: #F53F5B;
  --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: 1199px) {
  .pb-100 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-100 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-100 {
    padding-bottom: 60px;
  }
}

.pb-110 {
  padding-bottom: 110px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-110 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-110 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-110 {
    padding-bottom: 60px;
  }
}
.custom-background {
  background-color: var(--white); /* Replace with your color */
}

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

.pb-150 {
  padding-bottom: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pb-150 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pb-150 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .pb-150 {
    padding-bottom: 60px;
  }
}
.row picture { /* Target the picture within the row */
    width: 100%;
    display: block;
}

.row video { /* Target the video within the row */
  width: 100%;
  height: auto; /* Allow height to adjust based on aspect ratio */
  object-fit: cover; /* Fill the container, maintaining aspect ratio */
  display: block;
  margin: 0;
  padding: 0;
}
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}
/* New header animation CSS */
.video-header-menu {
  position: fixed;
  top: -100px; /* Start off-screen */
  width: 100%;
  background-color: rgba(246, 247, 247, 1); /* Semi-transparent black background */
  color: white;
  
  z-index: 1000;
  transition: top 0.3s;
}

.video-header-menu.visible {
  top: 0; /* Bring the header into view */
}

/* Optional: Add padding and styling to the header content */
.video-header-menu nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.video-header-menu nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
}

.pt-42 {
  padding-top: 40px;
}

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

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

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

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

.pt-150 {
  padding-top: 150px;
}
@media only screen and (max-width: 767px) {
  .pt-150 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-150 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .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: "Rubik", sans-serif;
}

html {
  scroll-behavior: smooth;
}

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

ul {
  padding: 0;
  margin: 0;
}

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

a {
  text-decoration: none;
  -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);
  position: relative;
  z-index: 1;
}


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

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

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

.scroll-top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9991;
  border-radius: 100px;
  color: var(--white);
  background: var(--primary);
  -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: 1199px) {
  .scroll-top {
    bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .scroll-top {
    right: 10px;
    bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .scroll-top {
    right: 5px;
    bottom: 55px;
  }
}
.logo-dark {
  display: block;
}

/*----------------------------------------*/
/*  06. THEME DARK CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  07. Button CSS START
/*----------------------------------------*/
.wc-btn-primary, .wc-btn-light, .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: 767px) {
  .wc-btn-primary, .wc-btn-light, .wc-btn-secondary {
    padding: 30px;
  }
}
.wc-btn-primary:hover, .wc-btn-light:hover, .wc-btn-secondary:hover {
  color: var(--black-2);
  border: 1px solid var(--primary);
}
.wc-btn-primary:hover span, .wc-btn-light:hover span, .wc-btn-secondary:hover span {
  width: 350px;
  height: 350px;
}
.wc-btn-primary i, .wc-btn-light i, .wc-btn-secondary i {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  padding-left: 5px;
}
.wc-btn-primary span, .wc-btn-light span, .wc-btn-secondary span {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  background-color: var(--white);
  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);
}
.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);
}

.btn_wrapper,
#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: 1399px) {
  .btn_wrapper,
#btn_wrapper {
    width: 220px;
    height: 220px;
    margin-left: -25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .btn_wrapper,
#btn_wrapper {
    width: 190px;
    height: 190px;
    margin-left: -10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .btn_wrapper,
#btn_wrapper {
    width: 180px;
    height: 180px;
    margin-left: -5px;
  }
}
@media only screen and (max-width: 767px) {
  .btn_wrapper,
#btn_wrapper {
    height: 175px;
    width: 175px;
    margin-left: -2.5px;
  }
}

.btn-item {
  position: absolute;
}

/*----------------------------------------*/
/*  08. TITLE CSS START
/*----------------------------------------*/
.sec-title {
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  color: var(--primary);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-title {
    font-size: 36px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title {
    font-size: 32px;
  }
}
.sec-title-2 {
  font-weight: 500;
  font-size: 70px;
  line-height: 1;
  color: var(--primary);
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .sec-title-2 {
    font-size: 65px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sec-title-2 {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-title-2 {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sec-title-2 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-2 {
    font-size: 45px;
  }
}
.sec-sub-title {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: var(--black-3);
  padding-bottom: 15px;
  text-transform: capitalize;
}

.hero-title {
  font-weight: 500;
  font-size: 65px;
  line-height: 1;
  color: var(--primary);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-title {
    font-size: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-title {
    font-size: 36px;
  }
}

/* Default styles for desktop (centered horizontally) */
.counter__wrapper-2 {
  display: flex; /* Use Flexbox instead of Grid */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  flex-wrap: wrap; /* Allow wrapping if needed */
  gap: 70px; /* Space between counters */
}

.counter__item-2 {
  text-align: center; /* Center text inside each counter */
  flex: 0 0 auto; /* Prevent flex items from growing or shrinking */
}

/* Mobile styles (one counter per line, centered) */
@media (max-width: 767.98px) {
  .counter__wrapper-2 {
    flex-direction: column; /* Stack vertically */
    gap: 20px; /* Space between stacked counters */
  }

  .counter__item-2 {
    width: 100%; /* Ensure each counter takes full width */
  }
}
.counter__wrapper-2 {
  display: flex !important;
}

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

/* mean menu customize */

/*----------------------------------------*/
/*  10. MODAL CSS START
/*----------------------------------------*/

/*----------------------------------------*/
/*  11. CURSOR CSS START
/*----------------------------------------*/
.cursor {
  position: fixed;
  left: 0;
  pointer-events: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: var(--white);
  background: var(--black-2);
  text-transform: capitalize;
  display: -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;
}

.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.05s;
  transition: 0.05s;
  z-index: 999;
}
@media (max-width: 1200px) {
  .cursor1 {
    display: none;
  }
}



.cursor2 {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: var(--primary);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: 0.09s;
  transition: 0.09s;
  z-index: 999;
}
@media (max-width: 1200px) {
  .cursor2 {
    display: none;
  }
}

/*----------------------------------------*/
/*  12. HEADER CSS START
/*----------------------------------------*/
.header__area-3 {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9999;
}
 .header__inner-3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 150px auto 150px;
  grid-template-columns: 150px auto 150px;
  padding: 0 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .header__inner-3 {
    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 (min-width: 768px) and (max-width: 991px) {
   .header__inner-3 {
    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: 767px) {
   .header__inner-3 {
    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 15px;
  }
}
.fixed-header {
  background-color: #F6f7f7 !important;
  position: fixed; /* To keep it at the top */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Ensure it's on top of other elements */
}
.header__inner-3 {
  padding: 10px 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__inner-3 {
    padding: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__inner-3 {
    padding: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .header__inner-3 {
    padding: 20px 15px;
  }
}
.header__nav-2 {
  text-align: right;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__nav-2 {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__nav-2 {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .header__nav-2 {
    display: none;
  }
}
.header__nav-icon-3 {
  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-3 .search-icon {
  padding-top: 3px;
  padding-right: 50px;
  position: relative;
  font-size: 18px;
}
.header__nav-icon-3 .search-icon::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 20px;
  right: 25px;
  top: 5px;
  background-color: var(--white-2);
}
.header__nav-icon-3 #search_close {
  display: none;
  padding-right: 55px;
}
.header__nav-icon-3 img {
  margin-top: -5px;
}
.header__logo-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/*----------------------------------------*/
/*  13. OFFCANVES CSS START
/*----------------------------------------*/
.offcanvas__area {
  background-color: var(--black);
  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%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .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: 1199px) {
  .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: 991px) {
  .offcanvas__body {
    -ms-grid-columns: 1.2fr 2.3fr 1.8fr;
    grid-template-columns: 1.2fr 2.3fr 1.8fr;
  }
}
@media only screen and (max-width: 767px) {
  .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;
  border-right: 1px solid var(--black-4);
}
@media only screen and (max-width: 767px) {
  .offcanvas__left {
    display: none;
  }
}
.offcanvas__mid {
  overflow: hidden;
  overflow-y: auto;
}
@media only screen and (max-width: 767px) {
  .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 (min-width: 1400px) and (max-width: 1919px) {
  .offcanvas__right {
    padding: 0 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__right {
    padding: 0 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__right {
    padding: 0 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__right {
    padding: 0 15px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__right {
    display: none;
  }
}
.offcanvas__logo {
  padding: 55px 0 55px 50px;
  border-bottom: 1px solid var(--black-4);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__logo {
    padding: 30px 0 30px 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__logo {
    padding: 30px 0 30px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__logo {
    padding: 30px 0 30px 15px;
  }
}
.offcanvas__social {
  padding-left: 50px;
  padding-top: 220px;
  border-bottom: 1px solid var(--black-4);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__social {
    padding-left: 50px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__social {
    padding-left: 30px;
    padding-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .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: 991px) {
  .offcanvas__social .social-title {
    font-size: 20px;
  }
}
.offcanvas__social ul li {
  padding-bottom: 2px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__social ul li {
    padding-bottom: 5px;
  }
}
.offcanvas__social ul li a {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
}
.offcanvas__social ul li a:hover {
  color: var(--gray-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__social ul li a {
    font-size: 16px;
  }
}
.offcanvas__links {
  padding-left: 50px;
  padding-top: 110px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__links {
    padding-left: 30px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__links {
    padding-left: 30px;
    padding-top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__links {
    padding-left: 15px;
    padding-top: 40px;
  }
}
.offcanvas__links ul li {
  padding-bottom: 2px;
}
.offcanvas__links ul li a {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
}
.offcanvas__links ul li a:hover {
  color: var(--black);
}
.offcanvas__close {
  position: absolute;
  right: 40px;
  top: 30px;
}
@media only screen and (max-width: 767px) {
  .offcanvas__close {
    right: 15px;
    top: 15px;
  }
}
.offcanvas__close button {
  font-size: 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: 767px) {
  .offcanvas__close button {
    font-size: 24px;
    width: 48px;
    height: 48px;
  }
}
.offcanvas__search {
  padding-top: 190px;
  padding-bottom: 140px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .offcanvas__search {
    padding-top: 140px;
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__search {
    padding-top: 140px;
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__search {
    padding-top: 140px;
    padding-bottom: 60px;
  }
}
.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: 991px) {
  .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 (min-width: 768px) and (max-width: 991px) {
  .offcanvas__contact h3 {
    font-size: 20px;
  }
}
.offcanvas__contact li {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 15px;
  max-width: 260px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offcanvas__contact li {
    font-size: 16px;
  }
}
.offcanvas__contact li a {
  color: var(--white);
}
.offcanvas__contact li a:hover {
  color: var(--gray-2);
}

/*----------------------------------------*/
/*  14. HERO CSS START
/*----------------------------------------*/
.hero__about {
  background-image: url(../imgs/about/about-bg.png);
  background-repeat: no-repeat;
  background-position: top right;
  overflow: hidden;
}
.hero__about-content {
  padding-top: 120px;
  padding-bottom: 10px;

}
@media only screen and (max-width: 767px) {
  .hero__about-content {
    padding-top: 130px;
  }
}
.hero__about-content .hero-title {
  padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .hero__about-content .hero-title {
    padding-bottom: 30px;
  }
}
.hero__about-row {
  position: inherit;
  margin-right: -310px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .hero__about-row {
    margin-right: -50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__about-row {
    margin-right: -150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__about-row {
    margin-right: -150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__about-row {
    margin-right: -120px;
  }
}
@media only screen and (max-width: 767px) {
  .hero__about-row {
    margin-right: calc(-0.5 * var(--bs-gutter-x));
  }
}

/*----------------------------------------*/
/*  15. SLIDER CSS START
/*----------------------------------------*/
.roll__wrapper {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

.contact_wrap {
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact_wrap {
    margin-top: 60px;
  }
}
.contact_wrap:hover .link {
  opacity: 1;
  visibility: visible;
}
.contact_wrap .link {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 18px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  background: var(--black);
  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;
  color: var(--white);
  text-transform: capitalize;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media (max-width: 1365px) {
  .contact_wrap .link {
    width: 130px;
    height: 130px;
  }
}
@media (max-width: 1365px) {
  .contact_wrap .link {
    opacity: 1;
    visibility: visible;
  }
}
.rollslide_title-1 {
  color: var(--primary);
  font-size: 70px;
  line-height: 0.75;
  text-transform: uppercase;
}
.rollslide_title-1 span {
  font-family: "Rubik";
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .rollslide_title-1 {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .rollslide_title-1 {
    font-size: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .rollslide_title-1 {
    font-size: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .rollslide_title-1 {
    font-size: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .rollslide_title-1 {
    font-size: 48px;
  }
}

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

/*----------------------------------------*/
/*  16. ABOUT CSS START
/*----------------------------------------*/
.about__area-3 {
  background-repeat: no-repeat;
  background-position: 100% 30%;
  background-color: var(--primary);
  position: relative;
}
.about__area-3::after {
  position: absolute;
  content: "";
  width: 0px;
  height: 100%;
  left: 60%;
  bottom: 0px;
  background-color: var(--black-5);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__area-3::after {
    left: 55%;
  }
}
@media only screen and (max-width: 767px) {
  .about__area-3::after {
    width: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__area-3 .pt-140 {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__area-3 .pt-140 {
    padding-top: 90px;
  }
}
.about__area-3 .sec-title {
  color: var(--white);
  padding-bottom: 20px;
  background-color: var(--primary);
}
.about__area-3 .sec-sub-title {
  color: var(--white);
  text-transform: uppercase;
  padding-top: 45px;
  background-color: var(--primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__area-3 .sec-sub-title {
    padding-top: 0;
  }
}
.about__area-3 .sec-text p {
  max-width: 410px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--white);
  padding-bottom: 22px;
}
@media only screen and (max-width: 767px) {
  .about__area-3 .sec-text p {
    padding-bottom: 50px;
  }
}
.about__area-3 .sec-text-wrapper {
  padding-left: 210px;
  padding-top: 45px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .about__area-3 .sec-text-wrapper {
    padding-left: 160px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__area-3 .sec-text-wrapper {
    padding-left: 160px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__area-3 .sec-text-wrapper {
    padding-left: 65px;
    padding-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__area-3 .sec-text-wrapper {
    padding-left: 0;
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .about__area-3 .sec-text-wrapper {
    padding-left: 0;
    padding-top: 15px;
  }
}
.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: 1399px) {
  .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;
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__img-3 {
    width: 100%;
    height: unset;
    padding-bottom: 20px;

  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__img-3 {
    width: 100%;
    height: unset;
    padding-bottom: 20px;

  }
}
@media only screen and (max-width: 767px) {
  .about__img-3 {
    width: 100%;
    height: unset;
    padding-bottom: 20px;

  }
}
.about__img-3 img {
  width: 100%;
  padding-bottom: 20px;

}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__img-3 img {
    position: unset;
    height: auto;
    padding-bottom: 20px;

  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__img-3 img {
    position: unset;
    height: auto;
    padding-bottom: 20px;

  }
}
@media only screen and (max-width: 767px) {
  .about__img-3 img {
    position: unset;
    height: auto;
    padding-bottom: 20px;

  }
}

.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: 1199px) {
  .service__area.pb-150 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area.pb-150 {
    padding-bottom: 90px;
  }
}
.service__area a:first-child .service__item {
  border-top: 1px solid var(--primary);
}
.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(--green);
}
@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: 1199px) {
  .service__area-6 {
    padding-top: 100px;
    padding-left: 88px;
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-6 {
    padding-top: 90px;
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .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));
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__area-6 .inherit-row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-6 .inherit-row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-6 .inherit-row {
    margin-left: calc(-0.5 * var(--bs-gutter-x));
  }
}
@media only screen and (max-width: 767px) {
  .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: 767px) {
  .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: 1199px) {
  .service__area-6 .left-content {
    width: 35%;
    padding-left: 50px;
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-6 .left-content {
    width: 30%;
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .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: 1px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__area-6 .right-content {
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-6 .right-content {
    width: 100%;
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-6 .right-content {
    width: 100%;
    padding-left: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .service__area-6 .right-content {
    width: 100%;
    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: -30%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.service__area-6 .mid-content .service__image img {
  width: auto;
  height: 100vh;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__area-6 .mid-content {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__area-6 .mid-content {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .service__area-6 .mid-content {
    display: none;
  }
  .service__area-6 .right-content {
    padding-left: 0;
  }
}
.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: 1399px) {
  .service__top-text p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__top-text p {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .service__top-text p {
    font-size: 18px;
    margin: 30px 0;
  }
}
.service__top-text p span {
  color: var(--white);
}
.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: 1200px) and (max-width: 1399px) {
  .service__img {
    max-width: 260px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__img {
    max-width: 200px;
  }
}
.service__img.active {
  opacity: 1;
  -webkit-transform: rotate(0deg) translateX(10px) translateY(10px);
          transform: rotate(0deg) translateX(10px) translateY(10px);
}
.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 {
  position: absolute;
  width: 175px;
  height: 70px;
  background-color: var(--primary);
  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;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__img-wrapper span {
    bottom: 260px;
    height: 40px;
    width: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__items-6 {
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .service__items-6 {
    padding-top: 60px;
  }
}
.service__item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.1fr 1.8fr 2.5fr 1fr;
  grid-template-columns: 0.1fr 1.3fr 2.4fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--primary);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__item {
    gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .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-6 {
  height: 60vh;
  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: 1199px) {
  .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 (min-width: 768px) and (max-width: 991px) {
  .service__item-6 {
    height: auto;
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .service__item-6 {
    height: auto;
    padding-bottom: 50px;
  }
}
.service__item-6 p {
  max-width: 550px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--white);
  padding-bottom: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .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 (min-width: 768px) and (max-width: 991px) {
  .service__item-6 ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .service__item-6 ul {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    padding-bottom: 20px;
  }
}
.service__item-6 ul li {
  display: inline-block;
  padding-bottom: 10px;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  color: var(--white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .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: 1399px) {
  .service__item-6 ul {
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__item-6 ul {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-6 ul {
    padding-bottom: 50px;
    -ms-grid-columns: 240px auto;
    grid-template-columns: 240px auto;
  }
}

/* New class for the video container */
.service__number span {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--gray-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.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: 767px) {
  .service__title {
    padding: 10px 0 20px;
  }
  .service__title br {
    display: none;
  }
}
.service__title-6 {
  font-weight: 500;
  font-size: 48px;
  line-height: 1.1;
  color: var(--white);
  padding-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service__title-6 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__title-6 {
    font-size: 32px;
    padding-top: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__title-6 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .service__title-6 {
    font-size: 30px;
  }
}

.service__text p {
  color: var(--white);
}
.service__list .active .service__number span,
.service__list .active .service__title {
  color: var(--white);
}

.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: 1199px) {
  .counter__area .pt-150 {
    padding-top: 100px;
  }
}
.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: 767px) {
  .counter__wrapper-2 {
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
  }
}
.counter__item-2 {
  text-align: center;
}
.counter__item-2 p {
  font-size: 20px;
  line-height: 1.3;
}
.counter__number {
  font-weight: 300;
  font-size: 100px;
  line-height: 1.1;
  color: var(--black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .counter__number {
    font-size: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter__number {
    font-size: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .counter__number {
    font-size: 40px;
  }
}

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

/*----------------------------------------*/
/*  20. BRAND CSS START
/*----------------------------------------*/
.brand__area {
  overflow: hidden;
}
.brand__area .pb-100 {
  padding-bottom: 75px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .brand__area .pb-100 {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .brand__area .pb-100 {
    padding-bottom: 0;
  }
}
.brand__area .sec-title-wrapper {
  padding-bottom: 60px;
}
.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;
}

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

/*----------------------------------------*/
/*  22. PORTFOLIO CSS START
/*----------------------------------------*/
.portfolio__text {
  text-align: center;
  font-size: 150px;
  font-weight: 500;
  color: var(--white);
  text-transform: uppercase;
  padding: 120px 0 50px;
  opacity: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__text {
    font-size: 110px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__text {
    font-size: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__text {
    font-size: 45px;
    padding: 50px 0;
  }
}
.portfolio__area {
  position: relative;
  background-color: var(--green);
  overflow: hidden;
}
.portfolio__item {
  padding-bottom: 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  scale: 0.5;
  opacity: 0;
}
.portfolio__item:nth-child(even) {
  top: 50%;
}
@media only screen and (max-width: 767px) {
  .portfolio__item:nth-child(even) {
    top: 0%;
  }
}
.portfolio__item:hover .portfolio__info {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.portfolio__item img {
  width: 100%; /* Ensure the image fills the container width */
  height: 830px; /* Set a fixed height (adjust as needed) */
  object-fit: cover; /* Ensure the image covers the container without distortion */
}
.portfolio__info {
  width: 175px;
  padding: 15px;
  border-radius: 5px;
  background-color: var(--primary);
  position: absolute;
  right: 0;
  bottom: 90px;
  z-index: 1;
  -webkit-transform: translateX(60px);
          transform: translateX(60px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__info {
    opacity: 1;
    visibility: visible;
    right: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__info {
    opacity: 1;
    visibility: visible;
    right: 45px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__info {
    opacity: 1;
    visibility: visible;
    right: 60px;
  }
}
.portfolio__info p {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: var(--white);
}
.portfolio__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.8;
  color: var(--white);
  padding-bottom: 3px;
}
.portfolio__list-1 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 0px 30px;
  position: relative;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .portfolio__list-1 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 0px;
  }
}
.portfolio__btn {
  margin-top: 40px;
}
.portfolio__btn#btn_wrapper, .portfolio__btn.btn_wrapper {
  margin: 0 auto;
}
.portfolio__detail {
  overflow: hidden;
}
.portfolio__detail img {
  width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__detail-top .pt-110 {
    padding-top: 140px;
  }
}
.portfolio__detail-top .sec-title {
  font-size: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__detail-top .sec-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail-top .sec-title {
    font-size: 72px;
    padding-top: 90px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail-top .sec-title {
    font-size: 50px;
    padding-bottom: 50px;
    padding-top: 90px;
  }
}
.portfolio__detail-info {
  height: 100%;
  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: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.portfolio__detail-info ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 80px auto;
  grid-template-columns: auto auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  grid-gap: 25px 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail-info ul {
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px 50px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail-info ul {
    grid-gap: 20px 50px;
  }
}
.portfolio__detail-info ul li {
  font-weight: 400;
  font-size: 25px;
  line-height: 1.5;
  color: var(--primary);
  text-transform: capitalize;
}
/* Client Logos Grid */
.custom-clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 columns */
  grid-template-rows: repeat(6, 1fr); /* 6 rows */
  gap: 20px; /* Adjust the gap between logos */
  justify-items: center; /* Center logos horizontally */
  align-items: center; /* Center logos vertically */
  margin-top: 40px; /* Adjust spacing from the title */
}

/* Client Logo Styling */
.custom-client-logo {
  width: 100%; /* Ensure logos take up the full grid cell */
  max-width: 150px; /* Adjust logo size as needed */
  height: auto; /* Maintain aspect ratio */
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-client-logo img {
  width: 100%;
  height: auto;
  object-fit: contain; /* Ensure logos fit within their container */
}
@media (max-width: 1200px) {
  .custom-clients-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for medium screens */
    grid-template-rows: repeat(9, 1fr); /* 9 rows for medium screens */
  }
}

@media (max-width: 768px) {
  .custom-clients-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns for small screens */
    grid-template-rows: repeat(12, 1fr); /* 12 rows for small screens */
  }
}

@media (max-width: 480px) {
  .custom-clients-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile screens */
    grid-template-rows: repeat(18, 1fr); /* 18 rows for mobile screens */
  }
}
.portfolio__detail-info ul li span,
.portfolio__detail-info ul li a {
  display: block;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-3);
  text-transform: capitalize;
}
.portfolio__detail-thumb {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 85vh;
}
.portfolio__detail-thumb img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 130%;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 1920px) {
  .portfolio__detail-thumb {
    padding-left: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__detail-thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    position: unset;
  }
  .portfolio__detail-thumb img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio__detail-thumb img {
    position: unset;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail-thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    position: unset;
  }
  .portfolio__detail-thumb img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio__detail-thumb img {
    position: unset;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail-thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    position: unset;
  }
  .portfolio__detail-thumb img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio__detail-thumb img {
    position: unset;
  }
}
.portfolio__detail-title {
  max-width: 500px;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  color: var(--black-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail-title {
    max-width: 500px;
    padding-bottom: 30px;
  }
}
.portfolio__detail-text {
  padding-bottom: 60px;
}
.portfolio__detail-text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--black-3);
  padding-bottom: 15px;
}
.portfolio__detail-text li {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--black-2);
  padding-bottom: 5px;
}
.portfolio__detail-text .fonts {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 70px 3.5fr;
  grid-template-columns: 2fr 3.5fr;
  gap: 70px;
  padding-top: 60px;
  padding-bottom: 85px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__detail-text .fonts {
    -ms-grid-columns: 1fr 30px 2fr;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail-text .fonts {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 40px;
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail-text .fonts {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 40px;
    padding-bottom: 0;
  }
}
.portfolio__detail-text .fonts img {
  width: auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__detail-text .fonts img {
    width: 100%;
  }
}
.portfolio__detail-text .fonts ul {
  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: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.portfolio__detail-text .fonts ul li {
  font-weight: 500;
  text-transform: capitalize;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr;
  grid-template-columns: 1fr 2fr;
}
.portfolio__detail .block-thumb {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 65vh;
  z-index: 9;
  margin-bottom: 20px;
}
.portfolio__detail .block-thumb 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 (min-width: 768px) and (max-width: 991px) {
  .portfolio__detail .block-thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
  }
  .portfolio__detail .block-thumb img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio__detail .block-thumb img {
    position: unset;
  }
}
@media only screen and (max-width: 767px) {
  .portfolio__detail .block-thumb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
  }
  .portfolio__detail .block-thumb img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .portfolio__detail .block-thumb img {
    position: unset;
  }
}
.portfolio__detail .block-gallery {
  overflow: hidden;
}
.portfolio__detail .block-gallery img {
  width: 50%;
  float: left;
  padding-bottom: 20px;
}
.portfolio__detail .block-gallery img:nth-child(odd) {
  padding-right: 10px;
}
.portfolio__detail .block-gallery img:nth-child(even) {
  padding-left: 10px;
}
.portfolio__detail .block-content {
  position: relative;
  z-index: 1;
}
.portfolio__detail-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.portfolio__detail-btns a {
  margin: 0 -10px;
}

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

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

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

@media (max-width: 1300px) {
  .swiper-slide .title {
    -webkit-animation: wcfadeUp 1s 0.6s forwards;
            animation: wcfadeUp 1s 0.6s forwards;
  }
  .swiper-slide .sec-title {
    -webkit-animation: wcfadeUp 1s 0.2s forwards;
            animation: wcfadeUp 1s 0.2s forwards;
  }
  .swiper-slide .sec-text p {
    -webkit-animation: wcfadeUp 1s 0.4s forwards;
            animation: wcfadeUp 1s 0.4s forwards;
  }
  .swiper-slide .contact__form {
    -webkit-animation: wcfadeUp 1s 0.6s forwards;
            animation: wcfadeUp 1s 0.6s forwards;
  }
}
@-webkit-keyframes progress {
  0% {
    stroke-dashoffset: 156px;
  }
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -156px;
  }
}
@keyframes progress {
  0% {
    stroke-dashoffset: 156px;
  }
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -156px;
  }
}

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

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

/*----------------------------------------*/
/*  26. STORY CSS START
/*----------------------------------------*/
.story__area {
  overflow: hidden;
}
.story__area .sec-title-wrapper {
  padding-bottom: 40px;
}
.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: 1399px) {
  .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: 767px) {
  .story__img-wrapper img {
    margin-bottom: 20px;
  }
}

/*----------------------------------------*/
/*  27. TEAM CSS START
/*----------------------------------------*/
.team__area {
  background-color: var(--primary);
  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: 1399px) {
  .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);
}
@media only screen and (min-width: 1920px) {
  .team__slider {
    margin-left: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__slider {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .team__slide {
    padding: 0 20px;
  }
}
.team__slide:nth-child(even) {
  padding-top: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__slide:nth-child(even) {
    padding-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__slide:nth-child(even) {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .team__slide:nth-child(even) {
    padding-top: 0;
  }
}
.team__slide img {
  width: 100%;
}
.team__member-name {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--white);
  padding-top: 20px;
  margin-left: 13px; /* Adjust this value as needed */
}
.team__member-role {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--gray-2);
  margin-left: 13px;
}

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

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

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

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

#main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.content {
  color: var(--white);
  position: absolute;
  bottom: 120px;
  text-align: center;
  left: 50px;
  z-index: 99;
  font-size: 0.8em;
  text-transform: uppercase;
}
.content p {
  color: var(--white);
}

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

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

#main .part {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

#main .part .section {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#main .part .section img {
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  left: var(--x);
  pointer-events: none;
}

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

.part:first-child h2 {
  display: block;
  top: 45% !important;
  left: 49% !important;
  position: absolute;
  z-index: 9999999999999 !important;
  width: 500px;
  background: transparent;
  height: 400px;
}

.showcase4 {
  margin-bottom: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase4 {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase4 {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .showcase4 {
    margin-bottom: 40px;
  }
}
.showcase4__thumb {
  position: relative;
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 500px;
}
.showcase4__thumb img {
  position: absolute;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 130%;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .showcase4__thumb {
    height: 400px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase4__thumb {
    height: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase4__thumb {
    height: unset;
  }
  .showcase4__thumb img {
    position: unset;
    height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase4__thumb {
    height: unset;
  }
  .showcase4__thumb img {
    position: unset;
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  .showcase4__thumb {
    height: unset;
  }
  .showcase4__thumb img {
    position: unset;
    height: auto;
  }
}
.showcase4__content {
  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;
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {
  .showcase4__content br {
    display: block;
  }
}
.showcase4__content h2 {
  color: var(--black-2);
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
}
.showcase4__content h2 span {
  color: var(--black-2);
  padding-left: 35px;
  font-family: "Rubik";
  position: relative;
}
.showcase4__content h2 span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 30px;
  background-color: var(--black-13);
}
.showcase4__content span {
  text-transform: uppercase;
  color: var(--black-13);
}
.wc-tilt-2 {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

/*----------------------------------------*/
/*  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: 991px) {
  .contact__area-6 .line {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .contact__area-6 .line {
    padding-top: 130px;
  }
}
.contact__btm {
  padding-top: 65px;
}
@media only screen and (max-width: 767px) {
  .contact__btm {
    padding-top: 50px;
  }
}
.contact__info {
  padding-top: 15px;
}
@media only screen and (max-width: 767px) {
  .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 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: 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;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__form input,
.contact__form textarea {
    padding: 10px 0;
    margin-bottom: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__form input,
.contact__form textarea {
    padding: 10px 0;
    margin-bottom: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .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: 200px;
}
.contact__form #btn_wrapper,
.contact__form .btn_wrapper {
  margin-top: -20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact__form #btn_wrapper,
.contact__form .btn_wrapper {
    margin-top: -10px;
  }
}
@media (max-width: 1200px) {
  .contact__form #btn_wrapper,
.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: 991px) {
  .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: 991px) {
  .error__content::after {
    top: 20%;
  }
}
@media only screen and (max-width: 767px) {
  .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: 767px) {
  .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 (min-width: 768px) and (max-width: 991px) {
  .error__content p {
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .error__content p {
    padding-bottom: 30px;
  }
}
.error__content a {
  margin: 0 auto;
}
.error__content img {
  max-width: 100%;
}
.error__content #btn_wrapper,
.error__content .btn_wrapper {
  margin-left: 0;
  margin-top: -40px;
}
@media (max-width: 1400px) {
  .error__content #btn_wrapper,
.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;
}

/*----------------------------------------*/
/*  38. FOOTER CSS START
/*----------------------------------------*/
.footer__top-2 {
  padding-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .footer__top-2 {
    padding-bottom: 50px;
  }
}
.footer__logo {
  margin-bottom: 20px;
}

footer #btn_wrapper,
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(--primary);
  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;
}

.footer__area-6 {
  overflow: hidden;
  background-color: var(--black);
}
.footer__top-6 {
  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: 767px) {
  .footer__top-6 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-bottom: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__top-6 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-bottom: 5px;
  }
}
.footer__social-6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}
.footer__social-6 li a {
  color: var(--white);
  font-size: 30px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.footer__social-6 li a:hover {
  color: var(--primary);
}
.footer__info-6 li {
  color: var(--white);
  font-size: 16px;
  margin-bottom: 5px;
}
.footer__info-6 li a {
  color: var(--white);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.footer__info-6 li a:hover {
  color: var(--primary);
}
.footer__info-6 li a.phone {
  color: var(--white);
  position: relative;
}
.footer__info-6 li a.phone::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0px;
  background-color: var(--primary);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.footer__info-6 li a.phone:hover::after {
  width: 0%;
}
.footer__info-6 li a.phone::after {
  background-color: transparent;
}
.footer__link-6 li {
  margin-bottom: 4px;
}
.footer__link-6 li a {
  color: var(--white);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.footer__link-6 li a:hover {
  color: var(--primary);
}
@media only screen and (max-width: 767px) {
  .footer__item-6 {
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6 {
    margin-bottom: 50px;
  }
}
.footer__item-6:nth-child(1) {
  width: 25%;
}
@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(1) {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(1) {
    width: 50%;
    padding-right: 30px;
  }
}
.footer__item-6:nth-child(2) {
  width: 10%;
}
@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(2) {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(2) {
    width: 50%;
  }
}
.footer__item-6:nth-child(3) {
  width: 20%;
}
@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(3) {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(3) {
    width: 50%;
    padding-right: 30px;
  }
}
.footer__item-6:nth-child(4) {
  width: 28%;
}
@media only screen and (max-width: 767px) {
  .footer__item-6:nth-child(4) {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer__item-6:nth-child(4) {
    width: 50%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__item-6:nth-child(4) {
    width: 33%;
  }
}
.footer__item-6 p {
  padding-bottom: 20px;
  color: var(--gray-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__item-6 p br {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__item-6 p br {
    display: none;
  }
}
.footer__btm-6 {
  border-top: 1px solid var(--primary);
  padding-top: 20px;
  padding-bottom: 5px;
}
.footer__copyright-6 {
  color: var(--white);
}
.footer__copyright-6 p a {
  color: var(--black-2);
}
.footer__copyright-6 p a:hover {
  color: var(--lime);
}

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

#main .part .section {
  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: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.part p {
  opacity: 0;
}

.part h2 {
  opacity: 0;
}

.showcase__area-4 {
  padding: 130px 50px 110px;
}
@media only screen and (min-width: 1400px) and (max-width: 1919px) {
  .showcase__area-4 {
    padding: 120px 50px 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .showcase__area-4 {
    padding: 90px 50px 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__area-4 {
    padding: 80px 30px 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__area-4 {
    padding: 80px 20px 60px;
  }
}
@media only screen and (max-width: 767px) {
  .showcase__area-4 {
    padding: 60px 25px 80px;
  }
}
.showcase__area-4 .row {
  --bs-gutter-x: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .showcase__area-4 .row {
    --bs-gutter-x: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .showcase__area-4 .row {
    --bs-gutter-x: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .showcase__area-4 .row {
    --bs-gutter-x: 30px;
  }
}

body {
  position: relative;
}

.clients-container {
  width: 100%;
  overflow: hidden;
}

.clients-track {
  display: flex;
  animation: scroll 20s linear infinite;
  white-space: nowrap; /* Prevent wrapping of logos */
  min-width: fit-content;
}

.client-logo {
  flex: 0 0 auto; /* Key change: Do not shrink, grow, or set a specific width */
  margin-right: 40px;
  display: flex;
  align-items: center;
}

.client-logo img {
  display: block; /* Prevents default image spacing */
  max-height: 100px; /* Or whatever maximum height you want */
  width: auto; /* Maintain aspect ratio */
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}