/* =============================================================================
   Services page layout (html.services-page, #service2-root). Cubecodex.
   ============================================================================= */
html.services-page {
  font-size: 100%;
  background-color: #222222;
}

html.services-page body.page-inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #222222;
  color: #eeeeee;
}

html.services-page body.page-inner>main.flex-shrink-0 {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background-color: #222222;
}

/* service2: footer body-level — smooth-content rule removed */



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

    01. common css
	02. about css
	03. accordion css
	04. animation css
	05. award css
	06. background css
	07. banner css
	08. blog css
	09. brand css
	10. button css
	11. capabilities css
	12. choose css
	13. contact css
	14. counter css
	15. cover css
	16. cta css
	17. cursor css
	18. discuss css
	19. fact css
	20. features css
	21. footer css
	22. gallery css
	23. header css
	24. hero css
	25. history css
	26. idea css
	27. intro css
	28. menu css
	29. page-title css
	30. protfilio css
	31. pricing css
	32. process css
	33. project css
	34. section-title css
	35. service css
	36. settings css
	37. step css
	38. strategy css
	39. team css
	40. testimonial css
	41. theme dark css
	42. video css
	43. work css
	44. sign css

**********************************************/
#service2-root.theme-dark {
  background-color: #222222;
  color: #eeeeee;
  /**
  @font-family declaration
  */
  --tpl-ff-heading: 'Archivo', sans-serif;
  --tpl-ff-body: 'Tenor Sans', sans-serif;
  --tpl-ff-fontawesome: 'Font Awesome 6 Pro';
  --tpl-ff-handwriting: 'autographyregular';
  /**
  @color declaration
  */
  --clr-common-white: #eeeeee;
  --clr-common-black: #222222;
  --clr-common-border: #c7c7c7;
  --clr-common-placeholder: #8a8787;
  --clr-theme-1: #222222;
  --clr-theme-2: #355efc;
  --clr-theme-3: #7c7c7c;
  --clr-theme-primary: #222222;
  --clr-background-primary: #222222;
  --clr-bg-1: #222222;
  --clr-bg-2: #355efc;
  --clr-bg-3: #fffcf6;
  --clr-bg-4: #f2f2f2;
  --clr-bg-5: #F7F7F7;
  --clr-bg-6: #E8F5FF;
}

#service2-root * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

#service2-root main {
  overflow: hidden;
}

#service2-root section {
  position: relative;
  z-index: 2;
}

#service2-root a {
  text-decoration: none;
}

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

#service2-root a,
#service2-root button,
#service2-root span,
#service2-root p,
#service2-root li,
#service2-root img,
#service2-root svg path,
#service2-root *::after,
#service2-root *::before,
#service2-root h2,
#service2-root h3,
#service2-root h4 {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

#service2-root a:focus,
#service2-root .button:focus {
  text-decoration: none;
  outline: none;
}

#service2-root a:focus,
#service2-root a:hover {
  color: var(--clr-theme-2);
  text-decoration: none;
  border-color: var(--clr-theme-2);
}

#service2-root a,
#service2-root button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

#service2-root button:hover {
  cursor: pointer;
}

#service2-root button:focus {
  outline: 0;
  border: 0;
}

#service2-root .uppercase {
  text-transform: uppercase;
}


#service2-root h2,
#service2-root h3,
#service2-root h4 {
  font-family: var(--tpl-ff-heading);
  text-transform: capitalize;
  color: var(--clr-theme-primary);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0px;
  margin-bottom: 0px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

#service2-root h2 {
  font-size: 60px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root h2 {
    font-size: 54px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root h2 {
    font-size: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root h2 {
    font-size: 46px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root h2 {
    font-size: 42px;
  }
}

@media (max-width:450px) {
  #service2-root h2 {
    font-size: 36px;
  }
}

#service2-root h2.xlarge {
  font-size: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root h2.xlarge {
    font-size: 70px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root h2.xlarge {
    font-size: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root h2.xlarge {
    font-size: 46px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root h2.xlarge {
    font-size: 42px;
  }
}

@media (max-width:450px) {
  #service2-root h2.xlarge {
    font-size: 36px;
  }
}

#service2-root h2.large {
  font-size: 65px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root h2.large {
    font-size: 60px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root h2.large {
    font-size: 55px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root h2.large {
    font-size: 46px;
  }
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root h2.large {
    font-size: 40px;
  }
}

@media (max-width:450px) {
  #service2-root h2.large {
    font-size: 35px;
  }
}

#service2-root h3 {
  font-size: 48px;
}

#service2-root h4 {
  font-size: 34px;
}

#service2-root ul {
  margin: 0;
  padding: 0;
}

#service2-root p {
  font-family: var(--tpl-ff-body);
  font-size: 18px;
  font-weight: normal;
  color: var(--clr-theme-primary);
  margin-bottom: 26px;
  line-height: 28px;
}

#service2-root p.xlarge {
  font-size: 24px;
  line-height: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root p.xlarge {
    font-size: 22px;
    line-height: 36px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root p.xlarge {
    font-size: 20px;
    line-height: 34px;
  }
}

#service2-root p.large {
  font-size: 20px;
  line-height: 34px;
}

#service2-root *::-moz-selection {
  background: var(--clr-common-black);
  color: var(--clr-common-white);
  text-shadow: none;
}

#service2-root ::-moz-selection {
  background: var(--clr-common-black);
  color: var(--clr-common-white);
  text-shadow: none;
}

#service2-root ::selection {
  background: var(--clr-common-black);
  color: var(--clr-common-white);
  text-shadow: none;
}

/*--
    - Input Placeholder
-----------------------------------------*/
#service2-root *::-moz-placeholder {
  color: var(--clr-common-placeholder);
  font-size: 16px;
  opacity: 1;
}

#service2-root *::placeholder {
  color: var(--clr-common-placeholder);
  font-size: 16px;
  opacity: 1;
}

/*--
    - Common Classes
-----------------------------------------*/
#service2-root .fix {
  overflow: hidden;
}

#service2-root .p-relative {
  position: relative;
}

#service2-root .section-spacing {
  padding-top: 70px;
  padding-bottom: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .section-spacing {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root .section-spacing {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root .section-spacing {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

#service2-root .section-spacing-top {
  padding-top: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .section-spacing-top {
    padding-top: 120px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root .section-spacing-top {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root .section-spacing-top {
    padding-top: 80px;
  }
}

#service2-root .section-title-spacing {
  margin-bottom: 50px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root .section-title-spacing {
    margin-bottom: 30px;
  }
}

#service2-root .adjust-header-space {
  margin-top: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root .adjust-header-space {
    margin-top: 10px;
  }
}

/*----------------------------------------
    Font Weight
-----------------------------------------*/

#service2-root .fw-500 {
  font-weight: 500;
}

#service2-root .fw-500 {
  font-weight: 500;
}

/*--- color
-----------------------------------------*/

#service2-root .text-white h2,
#service2-root .text-white h3,
#service2-root .text-white h4,
#service2-root .text-white p,
#service2-root .text-white span,
#service2-root .text-white li,
#service2-root .text-white a {
  color: var(--clr-common-white) !important;
}

#service2-root .container {
  width: 100%;
  padding-inline-end: var(--bs-gutter-x, 15px);
  padding-inline-start: var(--bs-gutter-x, 15px);
  margin-inline-end: auto;
  margin-inline-start: auto;
}

#service2-root .row {
  --bs-gutter-x: 30px;
}

/* Accordion (Why Do People Choose Us) inner row should keep `g-5` spacing like template */
#service2-root .why-accordion #accordionExample-st-2>.row.g-5 {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 3rem;
}

/* Global padding reset ki wajah se Bootstrap gutters (row.g-5) ka spacing collapse ho jata hai.
   Is accordion inner row ke columns par gutter padding explicitly wapas set kar rahe hain. */
#service2-root .why-accordion #accordionExample-st-2>.row.g-5>.col-lg-6 {
  padding-left: calc(var(--bs-gutter-x) / 2);
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-top: calc(var(--bs-gutter-y) / 2);
  padding-bottom: calc(var(--bs-gutter-y) / 2);
}


#service2-root .gy-50 {
  --bs-gutter-y: 50px;
}

@media (min-width: 1441px) {
  #service2-root .container {
    max-width: 1440px;
  }
}

/*----------------------------------------
   Flaction customize
-----------------------------------------*/
#service2-root i[class^=flaticon-] {
  line-height: 1;
  top: 2px;
  position: relative;
}

/*----------------------------------------
   Font customize
-----------------------------------------*/
#service2-root .font-highlight {
  font-family: var(--tpl-ff-body);
  font-weight: 400;
}

#service2-root .tpl__item-center {
  width: 100%;
  text-align: center;
}

#service2-root .tpl__theme-color {
  color: var(--clr-theme-2);
}

/*----------------------------------------
   Basic-pagaination
-----------------------------------------*/

/*----------------------------------------
   Mfp customize
-----------------------------------------*/

/*----------------------------------------
	10. button css
----------------------------------------*/

#service2-root .btn-text::after {
  position: absolute;
  content: "";
  width: 70%;
  height: 3px;
  right: auto;
  left: 0;
  bottom: -4px;
  background: var(--clr-theme-2);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}

#service2-root .btn-text:hover::after {
  left: 0;
  width: 100%;
}

#service2-root .circle-btn {
  height: 180px;
  width: 180px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

#service2-root .circle-btn:hover .icon-box {
  color: var(--clr-theme-1);
}

#service2-root .circle-btn:hover .icon-box svg * {
  fill: var(--clr-theme-2);
}

#service2-root .circle-btn:hover .icon-box i {
  animation: arrowSlide 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  color: var(--clr-common-white);
}

#service2-root .circle-btn .icon-box {
  height: 120px;
  width: 120px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--clr-common-black);
  border-radius: 50%;
  font-size: 35px;
  font-weight: 400;
  background: var(--clr-theme-2);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#service2-root .circle-btn .image-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: rotate 20s linear infinite;
}

#service2-root .circle-btn.is-green .icon-box {
  background: var(--clr-theme-2);
  border-color: var(--clr-theme-2);
  color: var(--clr-common-white);
}

#service2-root .circle-btn.is-green .icon-box i {
  font-size: 35px;
}

#service2-root .thumb-video-btn .circle-btn {
  width: 160px;
  height: 160px;
}

#service2-root .thumb-video-btn .circle-btn .icon-box {
  width: 110px;
  height: 110px;
  background-color: #1F1F1F;
}

#service2-root .thumb-video-btn .circle-btn .image-text {
  filter: invert(98%) sepia(100%) saturate(0%) hue-rotate(154deg) brightness(102%) contrast(102%);
}

#service2-root .text-btn {
  color: var(--clr-theme-3);
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 15px;
}

#service2-root .text-btn:hover {
  color: var(--clr-theme-2);
}

#service2-root .c-button {
  border-radius: 100rem;
  width: 200px;
  height: 200px;
  border: 0;
  background: transparent;
  position: relative;
  overflow: hidden;
  transform: scale(1);
  transition: 1s ease;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .c-button {
    width: 170px;
    height: 170px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .c-button {
    width: 150px;
    height: 150px;
  }
}

#service2-root .c-button:after,
#service2-root .c-button:before {
  content: "";
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background-color: var(--clr-theme-1);
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-180deg);
  transform-origin: left;
  transition: 0.4s ease-out;
}

#service2-root .c-button:before {
  transition-delay: 0.15s;
}

#service2-root .c-button:after {
  background-color: #355efc;
}

#service2-root .c-button:hover {
  transform: scale(1);
  border-color: #14CF93;
}

#service2-root .c-button:hover:after,
#service2-root .c-button:hover:before {
  top: 0;
  left: 0;
  transform: rotate(0deg);
  transition: 0.4s ease-out;
}

#service2-root .c-button:hover:after {
  transition-delay: 0.15s;
}

#service2-root .c-button:hover .c-button__text {
  color: var(--clr-common-white);
}

#service2-root .c-button__border {
  position: absolute;
  content: "";
  width: inherit;
  height: inherit;
  border-radius: inherit;
  top: 0;
  left: 0;
  transition: 0.4s ease-out;
  border: 1px solid #5d5d5d;
}

#service2-root .c-button__text {
  position: relative;
  display: block;
  text-align: center;
  z-index: 2;
  font-size: 16px;
  color: var(--clr-theme-primary);
  line-height: 25px;
  transition: 0.4s ease-out;
}

#service2-root .c-button__text i {
  font-size: 25px;
}

#service2-root .c-button.is-white .c-button__text {
  color: var(--clr-common-white);
}

#service2-root .c-button .is-white::after,
#service2-root .c-button::before {
  content: "";
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-180deg);
  transform-origin: left;
  transition: 0.4s ease-out;
}

/* link btn */

/* pulse btn */

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }

  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }

  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }

  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

#service2-root .icon-box i {
  font-size: 24px;
}

#service2-root .btn_wrapper,
#service2-root #btn_wrapper {
  position: relative;
}

/*----------------------------------------
	04. animation css
----------------------------------------*/
@keyframes iconltr {
  49% {
    transform: translateX(30%);
  }

  50% {
    opacity: 0;
    transform: translateX(-30%);
  }

  51% {
    opacity: 1;
  }
}

@keyframes iconrtl {
  49% {
    transform: translateX(-30%);
  }

  50% {
    opacity: 0;
    transform: translateX(30%);
  }

  51% {
    opacity: 1;
  }
}

@keyframes iconlbtr {
  49% {
    transform: translateX(30%) translateY(-30%);
  }

  50% {
    opacity: 0;
    transform: translateX(-30%) translateY(30%);
  }

  51% {
    opacity: 1;
  }
}

@keyframes textup {
  49% {
    transform: translateY(-10px);
  }

  50% {
    opacity: 0;
    transform: translateY(10px);
  }

  51% {
    opacity: 1;
  }
}

/* line animation css - start
================================================== */

@keyframes scroll1 {
  0% {
    top: 0px;
    opacity: 1;
  }

  50% {
    top: 50%;
  }

  100% {
    top: 100%;
    opacity: 1;
  }
}

@keyframes scroll2 {
  0% {
    opacity: 1;
    bottom: 0px;
  }

  50% {
    bottom: 50%;
  }

  100% {
    bottom: 100%;
    opacity: 1;
  }
}

/* line animation css - end
================================================== */

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

  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes translateX {
  0% {
    -webkit-transform: translateX(-80px);
    -moz-transform: translateX(-80px);
    -ms-transform: translateX(-80px);
    transform: translateX(-80px);
  }

  100% {
    -webkit-transform: translateX(40px);
    -moz-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px);
  }
}

@-moz-keyframes translateX {
  0% {
    -webkit-transform: translateX(-80px);
    -moz-transform: translateX(-80px);
    -ms-transform: translateX(-80px);
    transform: translateX(-80px);
  }

  100% {
    -webkit-transform: translateX(40px);
    -moz-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px);
  }
}

@-ms-keyframes translateX {
  0% {
    -webkit-transform: translateX(-80px);
    -moz-transform: translateX(-80px);
    -ms-transform: translateX(-80px);
    transform: translateX(-80px);
  }

  100% {
    -webkit-transform: translateX(40px);
    -moz-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px);
  }
}

@keyframes translateX {
  0% {
    -webkit-transform: translateX(-80px);
    -moz-transform: translateX(-80px);
    -ms-transform: translateX(-80px);
    transform: translateX(-80px);
  }

  100% {
    -webkit-transform: translateX(40px);
    -moz-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px);
  }
}

@-webkit-keyframes translateY {
  0% {
    -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    transform: translateY(-80px);
  }

  100% {
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
  }
}

@-moz-keyframes translateY {
  0% {
    -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    transform: translateY(-80px);
  }

  100% {
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
  }
}

@-ms-keyframes translateY {
  0% {
    -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    transform: translateY(-80px);
  }

  100% {
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
  }
}

@keyframes translateY {
  0% {
    -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    transform: translateY(-80px);
  }

  100% {
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
  }
}

@-webkit-keyframes translateY {
  0% {
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px);
  }

  100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-moz-keyframes translateY {
  0% {
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px);
  }

  100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-ms-keyframes translateY {
  0% {
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px);
  }

  100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes translateY {
  0% {
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px);
  }

  100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes fill-width {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@-moz-keyframes fill-width {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@-ms-keyframes fill-width {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes fill-width {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes dash {
  from {
    stroke-dashoffset: 1500;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes panel {
  0% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

@keyframes panelTop {
  0% {
    height: 100%;
  }

  100% {
    height: 0;
  }
}

@keyframes panelBottom {
  0% {
    height: 100%;
  }

  100% {
    height: 0;
  }
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

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

#service2-root .noise-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  overflow: hidden;
  z-index: -1;
}

#service2-root .noise {
  position: absolute;
  top: -500px;
  right: -500px;
  bottom: -500px;
  left: -500px;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0.04) 0 1px, transparent 2px 5px);
  background-size: 320px 320px;
  opacity: 0.7;
  -webkit-animation: noise 1s steps(8, end) infinite both;
  animation: noise 1s steps(8, end) infinite both;
}

@-webkit-keyframes noise {
  0% {
    transform: translateX(0px, 0px);
  }

  10% {
    transform: translate(-100px, 100px);
  }

  20% {
    transform: translate(150px, -100px);
  }

  30% {
    transform: translate(-100px, 100px);
  }

  40% {
    transform: translate(100px, -150px);
  }

  50% {
    transform: translate(-100px, 200px);
  }

  60% {
    transform: translate(-200px, -100px);
  }

  70% {
    transform: translateY(50px, 100px);
  }

  80% {
    transform: translate(100px, -150px);
  }

  90% {
    transform: translate(0px, 200px);
  }

  100% {
    transform: translate(-100px, 100px);
  }
}

@keyframes noise {
  0% {
    transform: translateX(0px, 0px);
  }

  10% {
    transform: translate(-100px, 100px);
  }

  20% {
    transform: translate(150px, -100px);
  }

  30% {
    transform: translate(-100px, 100px);
  }

  40% {
    transform: translate(100px, -150px);
  }

  50% {
    transform: translate(-100px, 200px);
  }

  60% {
    transform: translate(-200px, -100px);
  }

  70% {
    transform: translateY(50px, 100px);
  }

  80% {
    transform: translate(100px, -150px);
  }

  90% {
    transform: translate(0px, 200px);
  }

  100% {
    transform: translate(-100px, 100px);
  }
}

/*======================================
Animate slide-left 
========================================*/
@keyframes slide-left {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

/*======================================
Hero-6 Animation 
========================================*/

/*----------------------------------------
	23. header css
----------------------------------------*/

@-webkit-keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateY(50px) scaleY(0);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateY(50px) scaleY(0);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/*----------------------------------------
	28. main-menu css
----------------------------------------*/

/*----------------------------------------
	07. banner css
----------------------------------------*/

/*----------------------------------------
	06. Background css
----------------------------------------*/
/*----------------------------------------
	BACKGROUND COLOR CSS START
----------------------------------------*/
/*--- Background color
-----------------------------------------*/

#service2-root .primary-bg {
  background: var(--clr-background-primary);
}

/*----------------------------------------
    17. cursor css
----------------------------------------*/

/*----------------------------------------
	24. hero css
----------------------------------------*/

/*----------------------------------------
	09. brand-area css
----------------------------------------*/

/*----------------------------------------
	14. counter css
----------------------------------------*/

/*----------------------------------------
	34. section title css
----------------------------------------*/
#service2-root .section__title-main {
  line-height: 1.08;
}

#service2-root .section__title-wrapper.is-white .section__title-main {
  color: var(--clr-common-white);
}

#service2-root .section__title-inner {
  font-size: 65px;
  text-transform: capitalize;
  line-height: 1.17;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 1400px) and (max-width: 1600px) {
  #service2-root .section__title-inner {
    font-size: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .section__title-inner {
    font-size: 50px;
  }
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .section__title-inner {
    font-size: 40px;
  }
}

@media (max-width:450px) {
  #service2-root .section__title-inner {
    font-size: 36px;
  }
}

#service2-root .section__title-wrapper.is-white .section__title-inner {
  color: var(--clr-common-white);
}

/*Interactions*/

/*----------------------------------------
	02. about css
----------------------------------------*/

#service2-root .why-wrapper>p {
  color: #D9D9D9;
  max-width: 992px;
  margin-bottom: 70px;
}

#service2-root .why-content {
  position: relative;
  margin-bottom: 40px;
  margin-left: 120px;
  margin-right: 120px;
  z-index: 5;
  padding-bottom: 35px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root .why-content {
    margin-left: 80px;
    margin-right: 80px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root .why-content {
    margin-left: 0;
    margin-right: 0;
  }
}

#service2-root .why-thumb {
  padding-bottom: 35px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 500px;
}

#service2-root .why-content .line {
  position: absolute;
  z-index: 1;
  height: 350px;
  width: 1px;
  background: #D9D9D9;
  left: -60px;
  bottom: 0;
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .why-content .line {
    display: none;
  }
}

/*----------------------------------------
	05. award css
----------------------------------------*/

/*----------------------------------------
	13. contact css
----------------------------------------*/

/*----------------------------------------
	35. services css
----------------------------------------*/

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root .service-page-title-contenet {
    margin-bottom: 50px;
  }
}

#service2-root .service-page-title-contenet h3 {
  font-size: 30px;
  color: var(--clr-common-white);
  margin-bottom: 35px;
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .service-page-title-contenet h3 {
    font-size: 26px;
  }
}

#service2-root .service-page-title-contenet p {
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.7;
  color: var(--clr-common-white);
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .service-page-title-contenet p {
    font-size: 20px;
  }
}

#service2-root .page-title-thumb {
  max-width: 642px;
}

#service2-root .page-title-thumb img {
  width: 100%;
  aspect-ratio: 100/106;
}

/*----------------------------------------
	33. project css
----------------------------------------*/
#service2-root .project-area .noise-wrapper {
  position: absolute;
  opacity: 0.4;
}

/* Light strip — "Our services" block (template default: white on #222 page) */
#service2-root.theme-dark .project-area {
  background-color: #ffffff;
  color: #222222;
}

#service2-root.theme-dark .project-area .section__title-main,
#service2-root.theme-dark .project-area .winning-projects p {
  color: #222222;
}

#service2-root.theme-dark .project-area .project-box-content .project__title,
#service2-root.theme-dark .project-area .project-box-content .project__title a {
  color: #222222;
}

#service2-root.theme-dark .project-area .project-box-content .awards-list-box p {
  color: #222222;
}

#service2-root.theme-dark .project-area .project-box-content .awards-list-box .awards-list ul li {
  color: #626262;
}

#service2-root.theme-dark .project-area .projects-wrapper {
  border-color: #d9d9d9;
}

#service2-root.theme-dark .project-area .projects-wrapper__border {
  border-color: #d9d9d9;
}

#service2-root.theme-dark .project-area .projects-wrapper>* .project-box__thumb {
  border-color: #d9d9d9;
}

#service2-root.theme-dark .project-area .projects-wrapper> :not(:first-child)::before {
  background: #d9d9d9;
}

#service2-root.theme-dark .project-area .projects-wrapper>*:nth-child(2n) .project-box__thumb {
  border-color: #d9d9d9;
}

#service2-root.theme-dark .project-area .b-right {
  border-color: #d9d9d9;
}

#service2-root.theme-dark .project-area .rot-line::before {
  background-color: #d9d9d9;
}

#service2-root.theme-dark .project-area .project-box__btn .text-btn:hover {
  color: #355efc;
}

#service2-root.theme-dark .project-area .project-box .is-black a:hover {
  color: #355efc;
}

#service2-root.theme-dark .project-area .c-button__text {
  color: #222222;
}

#service2-root.theme-dark .project-area .c-button__border {
  border-color: #d0d0d0;
}

#service2-root.theme-dark .project-area .noise-wrapper {
  opacity: 0.08;
}

/* Light strip — "Industries We Cover" (.cover-area)
   Global style.css `.section` uses dark gradient + ::before glow; this block reuses `.section` class. */
#service2-root.theme-dark .cover-area {
  background: #ffffff;
  background-color: #ffffff;
  color: #222222;
  height: auto;
  min-height: 0;
  overflow: visible;
}

#service2-root.theme-dark .cover-area::before {
  content: none;
  display: none;
}

#service2-root.theme-dark .cover-area .section__title-main {
  color: #222222;
}

#service2-root.theme-dark .cover-area .cover-tab {
  border-color: #d9d9d9;
}

#service2-root.theme-dark .cover-area .cover-tab .nav-tabs .nav-link.active,
#service2-root.theme-dark .cover-area .cover-tab .nav-tabs .nav-link:hover {
  background: #ffffff;
  color: #111111;
  box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.07);
}

#service2-root.theme-dark .cover-area .cover-tab .nav-link {
  color: #222222;
}

#service2-root.theme-dark .cover-area .cover-tab .nav-link:hover {
  color: #111111;
  background: #ffffff;
}

#service2-root.theme-dark .cover-area .cover-card-content {
  background: #f2f2f2;
}

#service2-root.theme-dark .cover-area .cover-card-content h3 {
  color: #222222;
}

#service2-root.theme-dark .cover-area .cover-card-content p {
  color: #555555;
}

/* Light strip — Portfolio (.project-area-2) */
#service2-root.theme-dark .project-area-2 {
  background-color: #ffffff;
  color: #222222;
}

#service2-root.theme-dark .project-area-2 .project__text,
#service2-root.theme-dark .project-area-2 .project__sub-title {
  color: #222222;
}

#service2-root.theme-dark .project-area-2 .noise-wrapper {
  opacity: 0.08;
}

#service2-root.theme-dark .project-area-2 .project-box-3-content {
  background-color: #ffffff;
}

#service2-root.theme-dark .project-area-2 .project-box-3-content .tag {
  background: #ffffff;
  color: #355efc;
  border-color: #d9d9d9;
}

#service2-root.theme-dark .project-area-2 .project-box-3-content .tag:hover {
  color: #ffffff;
  background-color: #222222;
  border-color: #222222;
}

#service2-root .winning-projects p {
  font-size: 30px;
  font-family: var(--tpl-ff-heading);
  display: inline-block;
  position: relative;
  margin-bottom: 0;
  line-height: 30px;
}

#service2-root .projects-wrapper {
  border: 1px solid #D9D9D9;
}

#service2-root .projects-wrapper__border {
  border-top: 1px solid #D9D9D9;
  margin-bottom: 75px;
}

@media (max-width:450px) {
  #service2-root .projects-wrapper>* {
    display: block !important;
  }
}

#service2-root .projects-wrapper>* .project-box__thumb {
  border-left: 1px solid #D9D9D9;
}

@media (max-width:450px),
(max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .projects-wrapper>* .project-box__thumb {
    border-left: 0;
    border-top: 1px solid #D9D9D9;
  }
}

#service2-root .projects-wrapper>*:not(:first-child)::before {
  position: absolute;
  content: "";
  width: 92%;
  height: 1px;
  background: #D9D9D9;
  top: 0;
  left: 0;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root .projects-wrapper>*:not(:first-child)::before {
    width: 100%;
  }
}

#service2-root .projects-wrapper>*:nth-child(2n) {
  flex-direction: row-reverse;
}

#service2-root .projects-wrapper>*:nth-child(2n):before {
  right: 0;
  left: auto !important;
}

#service2-root .projects-wrapper>*:nth-child(2n) .project-box__thumb {
  border-right: 1px solid #D9D9D9;
  border-left: 0;
}

#service2-root .b-right {
  border-right: 1px solid #D9D9D9;
  height: 100%;
  position: relative;
  top: -200px;
  z-index: -1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .b-right {
    top: -170px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .b-right {
    top: -150px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root .b-right {
    display: none;
  }
}

#service2-root .rot-line {
  position: relative;
}

#service2-root .rot-line::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 775px;
  background-color: #D9D9D9;
  bottom: -1380px;
  transform: rotate(128.21deg);
  left: -178px;
  z-index: -1;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  #service2-root .rot-line::before {
    width: 730px;
    bottom: -1330px;
    left: -140px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .rot-line::before {
    width: 588px;
    bottom: -1440px;
    left: -112px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .rot-line::before {
    width: 490px;
    bottom: -1530px;
    left: -94px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root .rot-line::before {
    display: none;
  }
}

#service2-root .projects-all-view-btn {
  text-align: center;
  overflow-x: clip;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root .projects-all-view-btn {
    border: 1px solid #D9D9D9;
    border-top: 0;
    padding: 50px 0;
  }
}

#service2-root .projects-all-view-btn .c-button {
  position: sticky;
  top: 0;
}

#service2-root .project__title .icon-box {
  transform: rotate(-45deg);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#service2-root .project-box {
  display: flex;
  position: relative;
}

@media (max-width:450px),
(max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .project-box {
    display: inline;
  }
}

#service2-root .project-box>* {
  flex: 1 1 0;
}

#service2-root .project-box-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#service2-root .project-box-content .project__title {
  font-size: 24px;
  margin-bottom: 88px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px),
(max-width:450px) {
  #service2-root .project-box-content .project__title {
    margin-bottom: 30px;
  }
}

#service2-root .project-box-content .project__title a {
  display: flex;
  justify-content: space-between;
  gap: 0 20px;
  align-items: center;
}

#service2-root .project-box-content .project__title a:hover {
  color: var(--clr-theme-2);
}

#service2-root .project-box-content .project__title a:hover .icon-box i {
  animation: iconltr 0.5s forwards;
}

#service2-root .project-box-content .awards-list-box {
  margin-bottom: 80px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px),
(max-width:450px) {
  #service2-root .project-box-content .awards-list-box {
    margin-bottom: 30px;
  }
}

#service2-root .project-box-content .awards-list-box p {
  font-size: 18px;
  font-family: var(--tpl-ff-heading);
  color: var(--clr-theme-1);
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 10px;
}

#service2-root .project-box-content .awards-list-box .awards-list ul li {
  list-style: none;
  color: #626262;
}

#service2-root .project-box-content .awards-list-box .awards-list ul li:not(:last-child) {
  margin-bottom: 7px;
}

#service2-root .project-box__thumb {
  padding: 24px;
}

#service2-root .project-box__thumb img {
  width: 100%;
  height: 100%;
}

#service2-root .project-box__btn .text-btn {
  color: var(--clr-theme-2);
  font-family: var(--tpl-ff-heading);
}

#service2-root .project-box__btn .text-btn:hover {
  color: var(--clr-common-white);
}

#service2-root .project-box .is-black a:hover {
  color: var(--clr-theme-1);
}

#service2-root .projects-wrapper.is-white {
  border: 1px solid #414141;
}

#service2-root .projects-wrapper.is-white .project-box-content .project__title {
  color: var(--clr-common-white);
}

#service2-root .projects-wrapper.is-white .project-box-content p {
  color: #A5A5A5;
}

#service2-root .projects-wrapper.is-white .project-box-content .awards-list-box .awards-list ul li {
  color: #A5A5A5;
}

#service2-root .projects-wrapper.is-white>* .project-box__thumb {
  border-left: 1px solid #414141;
}

#service2-root .projects-wrapper.is-white> :not(:first-child)::before {
  background: #414141;
}

#service2-root .projects-wrapper.is-white> :nth-child(2n) .project-box__thumb {
  border-right: 1px solid #414141;
  border-left: 0;
}

#service2-root .project-area-2 {
  position: relative;
  background-color: transparent;
  overflow: hidden;
}

#service2-root .project__text {
  font-size: 150px;
  font-weight: 500;
  color: var(--clr-theme-primary);
  text-transform: uppercase;
  padding: 50px 0 50px;
  opacity: 1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .project__text {
    font-size: 125px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .project__text {
    font-size: 100px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root .project__text {
    font-size: 80px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .project__text {
    font-size: 60px;
  }
}

@media (max-width: 575px) {
  #service2-root .project__text {
    font-size: 34px;
  }
}

#service2-root .project__sub-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-theme-primary);
  text-transform: uppercase;
  font-family: var(--tpl-ff-heading);
  margin-bottom: 0;
  line-height: 25px;
  padding-bottom: 10px;
  display: inline-block;
  position: relative;
}

#service2-root .project__sub-title::after {
  position: absolute;
  content: "";
  width: 111px;
  height: 1px;
  bottom: 0;
  left: 0px;
  background-image: linear-gradient(90deg, var(--clr-theme-2) 0%, transparent 100%);
}

#service2-root .project__sub-title span {
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-theme-2);
  font-family: var(--tpl-ff-heading);
  padding-left: 27px;
}

#service2-root .project__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 (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .project__list-1 {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

#service2-root .project__item {
  padding-bottom: 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  scale: 0.5;
  opacity: 0;
}

@media (hover: none) {
  #service2-root .project__item {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
}

#service2-root .project__item:nth-child(2n) {
  top: 50%;
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .project__item:nth-child(2n) {
    top: 0%;
  }
}

#service2-root .row_bottom {
  margin-top: 80vh;
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .row_bottom {
    margin-top: -180px;
  }

}

#service2-root .project-box-3-thumb {
  position: relative;
}

#service2-root .project-box-3-thumb img {
  width: 100%;
  aspect-ratio: 100/110;
}

#service2-root .project-box-3-content {
  padding: 20px 20px;
  position: absolute;
  bottom: 100px;
  background-color: var(--clr-common-white);
  margin: 20px 20px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease-in-out;
}

#service2-root .project-box-3-content .tag {
  font-size: 16px;
  color: var(--clr-theme-2);
  background: var(--clr-common-white);
  padding: 2px 16px;
  display: inline-block;
  border-radius: 0;
  border: 1px solid #D9D9D9;
}

#service2-root .project-box-3-content .tag:hover {
  color: var(--clr-common-white);
  background-color: var(--clr-theme-1);
  border-color: var(--clr-theme-1);
}

#service2-root .project__item:hover .project-box-3-content {
  opacity: 1;
  visibility: visible;
}

/*----------------------------------------
	39. team css
----------------------------------------*/

/*----------------------------------------
	32. process css
----------------------------------------*/

/*----------------------------------------
	40. testimonial css
----------------------------------------*/

/*----------------------------------------
	41. theme dark css
----------------------------------------*/
#service2-root.theme-dark .projects-wrapper {
  border-color: #575757;
}

#service2-root.theme-dark .projects-wrapper>* .project-box__thumb {
  border-color: #575757;
}

#service2-root.theme-dark .project-box-content .awards-list-box p {
  color: var(--clr-common-white);
}

#service2-root.theme-dark .project-box-content .awards-list-box .awards-list ul li {
  color: #d1d1d1;
}

#service2-root.theme-dark .projects-wrapper__border {
  border-color: #575757;
}

#service2-root.theme-dark .projects-wrapper> :not(:first-child)::before {
  background: #575757;
}

#service2-root.theme-dark .rot-line::before {
  background-color: #575757;
}

#service2-root.theme-dark .b-right {
  border-color: #575757;
}

#service2-root.theme-dark #accordionExample-st-2 .accordion-item {
  border-color: #575757 !important;
}

#service2-root.theme-dark #accordionExample-st-2 .accordion-button {
  color: var(--clr-common-white);
}

#service2-root.theme-dark .cover-tab .nav-tabs .nav-link.active,
#service2-root.theme-dark .cover-tab .nav-tabs .nav-link:hover {
  background: #323232;
  color: var(--clr-common-white);
}

#service2-root.theme-dark .cover-tab .nav-link {
  color: var(--clr-common-white);
}

#service2-root.theme-dark .cover-card-content {
  background: #323232;
}

#service2-root.theme-dark .cover-card-content h3 {
  color: var(--clr-common-white);
}

#service2-root.theme-dark .cover-tab {
  border-color: #575757;
}

#service2-root.theme-dark .cover-shape-1 {
  opacity: 0.3;
}

#service2-root.theme-dark .cover-shape-2 {
  opacity: 0.3;
}

/*----------------------------------------
	08. blog css
----------------------------------------*/

/*----------------------------------------
    19. fact css
----------------------------------------*/
#service2-root .fact-area {
  background: #1F1F1F;
}

#service2-root .fact-area-title-wrapper {
  padding: 40px;
  border: 1px solid #414141;
  border-bottom: 0;
}

#service2-root .fact-box-wrapper {
  border: 1px solid #414141;
}

#service2-root .fact-box-wrapper>.row>div:not(:last-child) {
  border-right: 1px solid #414141;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root .fact-box-wrapper>.row>div:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid #414141;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root .fact-box-wrapper>.row>div:nth-child(2n) {
    border-right: 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root .fact-box-wrapper>.row>div:not(:nth-last-child(-n+2)) {
    border-bottom: 1px solid #414141;
  }
}

#service2-root .fact-box-content .fact__number {
  font-size: 30px;
  color: var(--clr-common-white);
  font-weight: 400;
  margin-bottom: 5px;
}

#service2-root .fact-box-content .fact__number span span {
  font-size: 80px;
  color: var(--clr-theme-2);
  font-weight: 500;
  line-height: 1;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .fact-box-content .fact__number span span {
    font-size: 70px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 575px) {
  #service2-root .fact-box-content .fact__number span span {
    font-size: 70px;
  }
}

@media (max-width:450px) {
  #service2-root .fact-box-content .fact__number span span {
    font-size: 60px;
  }
}

#service2-root .fact-box-content .fact__number>span {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Odometer numbers: template jaisa heading font */
#service2-root .odometer,
#service2-root .odometer-value,
#service2-root .odometer-digit-inner {
  font-family: var(--tpl-ff-heading);
  font-weight: 500;
}

/* Theme-class timing mismatch ki wajah se kabhi odometer-digit block ban jata hai.
   Isliye service2 me force kar rahe hain taaki digits horizontal stack ho (template jaisa). */
#service2-root .odometer .odometer-digit {
  display: inline-block !important;
  vertical-align: middle;
  position: relative;
}

/* service.css ka global `transition: all 0.3s...` odometer ki digit rolling ko override kar raha hai,
   isliye speed bhot fast dikh rahi. Odometer ribbon ko template jaisa 2s transition par lock karte hain. */
#service2-root .odometer .odometer-ribbon-inner {
  transition: transform 2s !important;
}

#service2-root .odometer.odometer-auto-theme .odometer-ribbon-inner,
#service2-root .odometer.odometer-theme-default .odometer-ribbon-inner {
  transition: transform 2s !important;
}

#service2-root .fact-box {
  padding: 80px 40px 70px;
}

#service2-root .fact__text p {
  margin-bottom: 0;
  color: #A5A5A5;
  text-transform: uppercase;
  font-size: 16px;
}

/*----------------------------------------
	30. portfolio css
----------------------------------------*/
#service2-root.theme-dark {
  counter-reset: current total;
}

/*----------------------------------------
	11. capabilities css
----------------------------------------*/

@keyframes shape-rote {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#service2-root .capabilities-list ul li {
  list-style: none;
  font-size: 16px;
  line-height: 35px;
  color: var(--clr-theme-primary);
}

/*----------------------------------------
	03. accordion css
----------------------------------------*/

#service2-root .accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

#service2-root .accordion-item {
  background: transparent;
  padding: 0px 0px;
  border: 0;
  border-radius: 0 !important;
}

#service2-root .accordion-button {
  font-size: 30px;
  font-weight: 500;
  border: 0;
  padding: 40px 45px;
  text-align: start;
  color: var(--clr-theme-primary);
  background: transparent;
  font-family: var(--tpl-ff-heading);
  z-index: 2;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
(max-width:450px) {
  #service2-root .accordion-button {
    padding: 40px 30px;
    font-size: 26px;
  }
}

@media (max-width:450px) {
  #service2-root .accordion-button {
    padding: 40px 20px;
  }
}

#service2-root .accordion-button::after {
  width: auto;
  height: auto;
  content: "\f067";
  font-family: var(--tpl-ff-fontawesome);
  color: #A5A5A5;
  font-size: 16px;
  transform: rotate(90deg);
  background-image: none;
  font-weight: 500;
  font-size: 18px;
}

#service2-root .accordion-button:focus {
  border: 0;
  box-shadow: none;
}

#service2-root .accordion-button:not(.collapsed) {
  background: none;
  color: var(--clr-theme-2);
  box-shadow: none;
  pointer-events: none;
}

#service2-root .accordion-button:not(.collapsed)::after {
  color: var(--clr-theme-2);
  transform: rotate(360deg);
  background-image: none;
  content: "\f068";
}

#service2-root .accordion-body {
  background: transparent;
  padding: 40px 45px;
  margin-bottom: 0px;
  margin-top: 0px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .accordion-body {
    padding: 40px 30px;
  }
}

@media (max-width:450px) {
  #service2-root .accordion-body {
    padding: 40px 20px;
  }
}

#service2-root .accordion-collapse {
  border: 0;
}

#service2-root #accordionExample-st-2 .accordion-item {
  border: 1px solid #D9D9D9 !important;
}

#service2-root #accordionExample-st-2 .accordion-button {
  font-size: 24px;
  font-weight: 500;
  font-family: var(--tpl-ff-heading);
  color: #191919;
  padding: 34px 30px;
}

@media (max-width:450px) {
  #service2-root #accordionExample-st-2 .accordion-button {
    padding: 24px 20px;
    font-size: 20px;
  }
}

#service2-root #accordionExample-st-2 .accordion-button::after {
  color: #191919;
}

#service2-root #accordionExample-st-2 .accordion-button:not(.collapsed) {
  color: #191919;
}

#service2-root #accordionExample-st-2 .accordion-body {
  padding: 30px 30px;
  padding-top: 0;
}

@media (max-width:450px) {
  #service2-root #accordionExample-st-2 .accordion-body {
    padding: 30px 20px;
    padding-top: 0;
  }
}

#service2-root .why-accordion .accordion-item {
  background: var(--clr-background-primary);
}

#service2-root .why-accordion .accordion-button {
  background: transparent;
}

#service2-root .why-accordion #accordionExample-st-2 .accordion-item {
  border: 1px solid #414141 !important;
}

#service2-root .why-accordion #accordionExample-st-2 .accordion-button {
  color: var(--clr-common-white);
}

#service2-root .why-accordion #accordionExample-st-2 .accordion-button::after {
  color: var(--clr-common-white);
}

#service2-root .why-accordion .accordion-body {
  background: transparent;
}

#service2-root .why-accordion .choose-accordion-content p {
  color: var(--clr-common-white);
}

/* Why accordion: bi plus/dash icons (about page jaisi) */
#service2-root .why-accordion #accordionExample-st-2 .accordion-button::after {
  display: none;
}

#service2-root .why-accordion #accordionExample-st-2 .accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#service2-root .why-accordion .why-accordion-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 18px;
  color: #ffffff;
}

#service2-root .why-accordion .why-accordion-icon {
  font-size: 18px;
  line-height: 1;
}

#service2-root .why-accordion .why-accordion-icon--open {
  display: none;
}

#service2-root .why-accordion #accordionExample-st-2 .accordion-button:not(.collapsed) .why-accordion-icon--open {
  display: inline-block;
}

#service2-root .why-accordion #accordionExample-st-2 .accordion-button:not(.collapsed) .why-accordion-icon--closed {
  display: none;
}

#service2-root .accordion-header {
  cursor: pointer;
}

/*----------------------------------------
	42. video css
----------------------------------------*/

/*----------------------------------------
	16. cta css
----------------------------------------*/

/*----------------------------------------
	12. choose area css
----------------------------------------*/
#service2-root .choose-accordion-content p {
  margin-bottom: 0;
  font-size: 16px;
  color: #191919;
}

/*----------------------------------------
	22. gallery css
----------------------------------------*/

/*----------------------------------------
    18. cursor css
----------------------------------------*/

/*----------------------------------------
    20. features css
----------------------------------------*/

/*----------------------------------------
	26. idea css
----------------------------------------*/

/*----------------------------------------
	15. cover css
----------------------------------------*/
#service2-root .cover-tab {
  padding-right: 65px;
  border-right: 1px solid #D9D9D9;
  margin-right: 36px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .cover-tab {
    padding-right: 30px;
    margin-right: 0;
  }
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root .cover-tab {
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 35px;
  }
}

#service2-root .cover-tab .nav-tabs {
  border-bottom: 0;
}

#service2-root .cover-tab .nav-tabs .nav-link {
  margin-bottom: 0;
  border-radius: 0;
  border: 0;
  width: 100%;
  text-align: start;
}

#service2-root .cover-tab .nav-tabs .nav-link:hover,
#service2-root .cover-tab .nav-tabs .nav-link:focus {
  border-color: transparent;
}

#service2-root .cover-tab .nav-tabs .nav-link.active,
#service2-root .cover-tab .nav-tabs .nav-link:hover {
  border: 0;
  color: #111111;
  background: var(--clr-common-white);
  box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.07);
}

#service2-root .cover-tab .nav-tabs .nav-link.active i,
#service2-root .cover-tab .nav-tabs .nav-link:hover i {
  opacity: 1;
  visibility: visible;
}

#service2-root .cover-tab .nav-tabs .nav-link i {
  float: right;
  color: var(--clr-theme-2);
  opacity: 0;
  visibility: hidden;
}

#service2-root .cover-tab .nav {
  flex-direction: column;
  justify-content: start;
  gap: 12px 0;
}

#service2-root .cover-tab .nav-link {
  font-size: 24px;
  font-weight: 500;
  font-family: var(--tpl-ff-heading);
  color: var(--clr-theme-1);
  padding: 0 30px;
  height: 66px;
  transition: 0.3s all;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
(max-width:450px) {
  #service2-root .cover-tab .nav-link {
    font-size: 20px;
    padding: 0 25px;
  }
}

#service2-root .cover-tab .nav-link:hover {
  border: 0;
  color: #111111;
  background: var(--clr-common-white);
  box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.07);
}

#service2-root .cover-wrapper {
  margin-left: 30px;
  position: relative;
  z-index: 5;
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .cover-wrapper {
    margin-left: 0;
  }
}

#service2-root .cover-thumb {
  max-width: 585px;
  filter: drop-shadow(0px 4px 44px rgba(0, 0, 0, 0.07));
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root .cover-thumb {
    max-width: 100%;
  }
}

#service2-root .cover-thumb img {
  width: 100%;
  aspect-ratio: 100/106;
}

#service2-root .cover-card-content {
  padding: 30px 30px;
  background: #F2F2F2;
  max-width: 570px;
}

#service2-root .cover-card-content h3 {
  font-size: 30px;
  margin-bottom: 15px;
}

@media (max-width: 575px) {
  #service2-root .cover-card-content h3 {
    font-size: 26px;
  }
}

#service2-root .cover-card-content p {
  margin-bottom: 25px;
}

#service2-root .cover-card-inner {
  position: absolute;
  right: 0;
  top: 290px;
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root .cover-card-inner {
    bottom: 0;
    top: auto;
  }
}

@media (max-width:450px) {
  #service2-root .cover-card-inner {
    position: static;
  }
}

#service2-root .cover-shape-1 {
  left: -400px;
  content: "";
  position: absolute;
  top: 80px;
  overflow: hidden;
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 1400px) and (max-width: 1600px) {
  #service2-root .cover-shape-1 {
    display: none;
  }
}

#service2-root .cover-shape-2 {
  right: -40px;
  content: "";
  position: absolute;
  top: 100px;
  width: 20%;
  overflow: hidden;
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .cover-shape-2 {
    display: none;
  }
}

/*----------------------------------------
	43. work css
----------------------------------------*/

/*----------------------------------------
	25. History css
----------------------------------------*/

/*----------------------------------------
	38. strategy css
----------------------------------------*/

#service2-root.theme-dark {
  counter-reset: current total;
}

/*----------------------------------------
	37. step css
----------------------------------------*/

/* .step-area.is-grey-bg {
  background-color: #f6f6f6;
} */

/*----------------------------------------
	27. section intro css
----------------------------------------*/

#service2-root .title-intro-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px 50px;
  /* border-bottom: 1px solid #414141; */
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .title-intro-wrapper {
    padding-right: 0;
  }
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .title-intro-wrapper {
    justify-content: center;
  }
}

#service2-root .intro__title-inner {
  font-weight: 400;
  font-size: 180px;
  text-transform: unset;
  line-height: 1;
  margin-bottom: 0;
  /* color: var(--clr-theme-2); */
  color: #355efc;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .intro__title-inner {
    font-size: 160px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .intro__title-inner {
    font-size: 130px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .intro__title-inner {
    font-size: 100px;
  }
}

@media (max-width: 575px) {
  #service2-root .intro__title-inner {
    font-size: 85px;
  }
}

@media (max-width:450px) {
  #service2-root .intro__title-inner {
    font-size: 55px;
  }
}

/*----------------------------------------
	29. page-title css
----------------------------------------*/
#service2-root .page-title-area {
  display: flex;
  align-items: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
  z-index: 2;
}

#service2-root .breadcrumb-menu li {
  position: relative;
  list-style: none;
}

#service2-root .breadcrumb-menu li span {
  font-size: 18px;
  font-weight: 500;
  color: var(--clr-theme-1);
  text-transform: capitalize;
  font-family: var(--tpl-ff-heading);
}

#service2-root .breadcrumb-menu li:first-child span {
  color: var(--clr-theme-1);
}

#service2-root .breadcrumb-menu li:not(:last-child):after {
  display: inline-block;
  content: "";
  position: absolute;
  inset-inline-end: -15px;
  width: 1px;
  height: 10px;
  background: #414141;
  top: 50%;
  transform: translateY(-50%);
}

#service2-root .breadcrumb-menu ul {
  display: flex;
  gap: 5px 28px;
  flex-wrap: wrap;
}

@media (max-width: 575px) {
  #service2-root .breadcrumb-menu ul {
    justify-content: flex-start;
  }
}

#service2-root .page-title {
  font-size: 65px;
  font-weight: 500;
  line-height: 1.17;
  /* text-transform: capitalize; */
  text-transform: none;

}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .page-title {
    font-size: 55px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .page-title {
    font-size: 50px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  #service2-root .page-title {
    font-size: 46px;
  }
}

@media (max-width: 575px) {
  #service2-root .page-title {
    font-size: 36px;
    text-align: start;
  }
}

/* SplitText absolute words — anchor + wrap; pehle mobile par br hide se ek line overflow/clipping ho raha tha */
#service2-root .page-title.animation__word_come {
  position: relative;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* Mid desktop only: <br> hatao jahan width kaafi hai; phone/tablet par line-break rakho */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #service2-root .page-title br {
    display: none;
  }
}

#service2-root .page-title-wrappper.is-white .breadcrumb-menu li span {
  color: var(--clr-common-white);
}

#service2-root .page-title-wrappper.is-white .breadcrumb-menu li:not(:last-child):after {
  background: var(--clr-common-white);
}

#service2-root .page-title-wrappper.is-white .breadcrumb-menu li:first-child span {
  color: var(--clr-common-white);
}

#service2-root .page-title-wrappper.is-white .page-title {
  color: var(--clr-common-white);
}

#service2-root .page-title-shapes .shape-1 {
  position: absolute;
  right: 0;
  max-width: 587px;
  z-index: -1;
  bottom: 210px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
  #service2-root .page-title-shapes .shape-1 {
    max-width: 450px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #service2-root .page-title-shapes .shape-1 {
    max-width: 400px;
  }
}

@media (max-width: 575px),
only screen and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px) {
  #service2-root .page-title-shapes .shape-1 {
    display: none;
  }
}

/*----------------------------------------
	31. pricing css
----------------------------------------*/

/*----------------------------------------
	44. signin css
----------------------------------------*/

/*----------------------------------------
	21. footer css
----------------------------------------*/

/*----------------------------------------
	PRELOADER CSS START
----------------------------------------*/

@keyframes ax-loader-aim {
  0% {
    height: 2px;
    margin-top: 0;
    transform: rotate(0deg);
  }

  100% {
    height: 80px;
    transform: rotate(0deg);
  }
}

/*----------------------------------------
	46. progress-bar css
----------------------------------------*/


#service2-root .mt-150 {
  margin-top: 150px;
}

#service2-root .mb-10 {
  margin-bottom: 10px;
}

#service2-root .mb-20 {
  margin-bottom: 20px;
}

#service2-root .mb-30 {
  margin-bottom: 30px;
}

#service2-root .mb-50 {
  margin-bottom: 50px;
}

#service2-root .mb-60 {
  margin-bottom: 60px;
}

#service2-root .mb-70 {
  margin-bottom: 70px;
}

/* Cubecodex services: inner main + backgrounds (theme JS off) + arrow icon */
#service2-root .service2-inner {
  overflow-x: clip;
  overflow-y: visible;
}

#service2-root .why-thumb[data-background] {
  background-image: url("../service/img/gallery/gallery-13.webp");
}

#service2-root .thumb-video-btn .icon-box[data-background] {
  background-image: url("../service/img/gallery/gallery-8.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#service2-root .flaticon-next::before {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  content: "\203A";
}

/* FAQ Styles */
#service2-root .text-dim {
  color: rgba(255, 255, 255, 0.6) !important;
}

#service2-root .faq-item {
  height: 100%;
  margin-bottom: 2rem;
}

#service2-root .faq-item h3 {
  font-size: 1.45rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
  color: #ffffff;
}

#service2-root .faq-item p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 0;
}