/*-----------------------------------------------------------------------------------

    Theme Name: Bexon - Corporate Business HTML5 Template
    Author: Theme-Junction
    Author URI: https://themeforest.net/user/theme-junction
    Description: Bexon - Corporate Business HTML5 Template
    Version: 1.0

-----------------------------------------------------------------------------------


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

  Theme Default CSS
	Buttons CSS
	Header CSS
	Footer CSS
	Search CSS
	Hamburger CSS
	Preloader CSS
	Heading CSS
	Hero CSS
	Choose CSS
	Client CSS
	About CSS
	Services CSS
	Marquee CSS
	Project CSS
	Testimonial CSS
	Faq CSS
	Blog CSS
	CTA CSS
	Countup CSS
	Working process CSS
	Contact CSS
	Slider CSS
	Team CSS
	Team details
	Breadcrumb CSS
	Pricing CSS
	Blog Details CSS
	Error 404
	Animate CSS

**********************************************/
/**----------------------------------------
START: Theme Default CSS
----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap");
:root {
  /**
     @Font-Family Declaration
   */
  --tj-ff-body: 'Mona Sans', sans-serif;;
  --tj-ff-heading: 'Mona Sans', sans-serif;;
  --tj-ff-fontawesome: "Font Awesome 6 Pro";
  /**
     @Font-weight Declaration
   */
  --tj-fw-normal: normal;
  --tj-fw-thin: 100;
  --tj-fw-elight: 200;
  --tj-fw-light: 300;
  --tj-fw-regular: 400;
  --tj-fw-medium: 500;
  --tj-fw-sbold: 600;
  --tj-fw-bold: 700;
  --tj-fw-ebold: 800;
  --tj-fw-black: 900;
  /**
     @Font-Size Declaration
   */
  --tj-fs-body: 16px;
  --tj-fs-p: 16px;
  --tj-fs-h1: 74px;
  --tj-fs-h2: 48px;
  --tj-fs-h3: 32px;
  --tj-fs-h4: 24px;
  --tj-fs-h5: 20px;
  --tj-fs-h6: 18px;
  /**
     @Color Declaration
   */
  --tj-color-common-white: #ffffff;
  --tj-color-common-black: #000000;
  --tj-color-heading-primary: #0c1e21;
  --tj-color-text-body: #364e52;
  --tj-color-text-body-2: #a9b8b8;
  --tj-color-text-body-3: #67787a;
  --tj-color-text-body-4: #18292c;
  --tj-color-text-body-5: rgba(255, 255, 255, 0.8);
  --tj-color-theme-primary: #1d69cc;
  --tj-color-review: #f5d907;
  --tj-color-theme-bg: #f2fbff;
  --tj-color-theme-bg-2: #cee0e0;
  --tj-color-theme-bg-3: #202e30;
  --tj-color-theme-dark: #0c1e21;
  --tj-color-theme-dark-2: #18292c;
  --tj-color-theme-dark-3: #364e52;
  --tj-color-theme-dark-4: #67787a;
  --tj-color-theme-dark-5: #676e7a;
  --tj-color-red-1: #ff0000;
  --tj-color-grey-1: #ecf0f0;
  --tj-color-grey-2: #a9b8b8;
  --tj-color-grey-3: rgba(255, 255, 255, 0.1019607843);
  --tj-color-border-1: #c9d1d1;
  --tj-color-border-2: #313d3d;
  --tj-color-border-3: rgba(255, 255, 255, 0.1490196078);
  --tj-color-border-4: rgba(255, 255, 255, 0.2);
  --tj-color-border-5: rgba(30, 138, 138, 0.1490196078);
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.site-main {
  position: relative;
}

body {
  font-family: var(--tj-ff-body);
  font-size: var(--tj-fs-body);
  font-weight: normal;
  color: var(--tj-color-text-body);
  background-color: var(--tj-color-grey-1);
  line-height: 1.5;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--tj-ff-heading);
  color: var(--tj-color-heading-primary);
  margin-top: 0px;
  font-weight: var(--tj-fw-medium);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

h1 {
  font-size: var(--tj-fs-h1);
  line-height: 1.108;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  h1 {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  h1 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  h1 {
    font-size: 45px;
  }
}

h2 {
  font-size: var(--tj-fs-h2);
  line-height: 1.125;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  h2 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  h2 {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  h2 {
    font-size: 30px;
  }
}

h3 {
  font-size: var(--tj-fs-h3);
  line-height: 1.25;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  h3 {
    font-size: 28px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  h3 {
    font-size: 25px;
  }
}

h4 {
  font-size: var(--tj-fs-h4);
  line-height: 1.333;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  h4 {
    font-size: 22px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  h4 {
    font-size: 20px;
  }
}

h5 {
  font-size: var(--tj-fs-h5);
  line-height: 1.4;
}

h6 {
  font-size: var(--tj-fs-h6);
  line-height: 1.444;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
  line-height: inherit;
  display: block;
}

h1:hover a,
h2:hover a,
h3:hover a,
h4:hover a,
h5:hover a,
h6:hover a {
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
}

ul {
  margin: 0px;
  padding: 0px;
}

a,
.btn,
button,
span,
p,
input,
select,
textarea,
li,
svg path,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a:focus,
button:focus,
button:focus-visible {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: 0 0 0;
          box-shadow: 0 0 0;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: var(--tj-color-theme-primary);
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

select,
.nice-select,
input[type=search],
input[type=tel],
input[type=text],
input[type=email],
input[type=url],
textarea {
  outline: none;
  background-color: var(--tj-color-common-white);
  height: auto;
  width: 100%;
  font-size: var(--tj-fs-body);
  border: 1px solid var(--tj-color-border-1);
  color: var(--tj-color-text-body);
  padding: 10px 15px;
  -webkit-box-shadow: 0 0 0;
          box-shadow: 0 0 0;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--tj-color-theme-primary) var(--tj-color-common-white);
}

::-webkit-scrollbar {
  height: 4px;
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--tj-color-theme-primary);
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

*::-moz-selection {
  background: var(--tj-color-common-black);
  color: var(--tj-color-common-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--tj-color-common-black);
  color: var(--tj-color-common-white);
  text-shadow: none;
}

::selection {
  background: var(--tj-color-common-black);
  color: var(--tj-color-common-white);
  text-shadow: none;
}

*::-webkit-input-placeholder {
  color: var(--tj-color-text-body);
  font-size: var(--tj-fs-body);
  opacity: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
*::-moz-placeholder {
  color: var(--tj-color-text-body);
  font-size: var(--tj-fs-body);
  opacity: 1;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
*:-ms-input-placeholder {
  color: var(--tj-color-text-body);
  font-size: var(--tj-fs-body);
  opacity: 1;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
*::-ms-input-placeholder {
  color: var(--tj-color-text-body);
  font-size: var(--tj-fs-body);
  opacity: 1;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
*::placeholder {
  color: var(--tj-color-text-body);
  font-size: var(--tj-fs-body);
  opacity: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

/**
 	Common Classes CSS
*/
table {
  border-collapse: separate;
  border-spacing: 0;
}

img {
  max-width: 100%;
}

.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.section-gap {
  padding-top: 50px;
  padding-bottom: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-gap {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-gap {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

.section-gap-2 {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-gap-2 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-gap-2 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.gap-top,
.section-top-gap {
  padding-top: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .gap-top,
  .section-top-gap {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .gap-top,
  .section-top-gap {
    padding-top: 70px;
  }
}

.gap-bottom,
.section-bottom-gap {
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .gap-bottom,
  .section-bottom-gap {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .gap-bottom,
  .section-bottom-gap {
    padding-bottom: 70px;
  }
}

.section-gap-x {
  -webkit-margin-start: 15px;
          margin-inline-start: 15px;
  -webkit-margin-end: 15px;
          margin-inline-end: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-gap-x {
    -webkit-margin-start: 12px;
            margin-inline-start: 12px;
    -webkit-margin-end: 12px;
            margin-inline-end: 12px;
  }
}

.section-separator {
  border-top: 1px dashed var(--tj-color-border-1);
}

.mt-10 {
  margin-top: 10px;
}

.rg-30 {
  row-gap: 30px;
}

.rg-40 {
  row-gap: 40px;
}

.rg-50 {
  row-gap: 50px;
}

.rg-60 {
  row-gap: 60px;
}

.rg-70 {
  row-gap: 70px;
}

.rg-80 {
  row-gap: 80px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mb-60 {
  margin-bottom: 60px;
}

.gap-15 {
  --bs-gutter-x: 15px;
  padding: 0 15px;
}
.gap-15 .row {
  --bs-gutter-x: 15px;
  --bs-gutter-y: 15px;
}

.space-for-header {
  padding-top: 105px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .space-for-header {
    padding-top: 95px;
  }
}

.top-space-15 {
  padding-top: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .top-space-15 {
    padding-top: 12px;
  }
}

.top-space-65 {
  padding-top: 65px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .top-space-65 {
    padding-top: 94px;
  }
}

.gap-30 {
  --bs-gutter-x: 30px;
}
.gap-30 .row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
}

.gap-0 {
  --bs-gutter-x: 0;
}
.gap-0 .row {
  --bs-gutter-x: 0;
}

.wow {
  visibility: hidden;
}

.container-end-align {
  -webkit-margin-start: calc((100% - 1320px) / 2);
          margin-inline-start: calc((100% - 1320px) / 2);
  width: auto;
  min-width: auto;
  max-width: inherit;
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .container-end-align {
    -webkit-margin-start: calc((100% - 1140px) / 2);
            margin-inline-start: calc((100% - 1140px) / 2);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .container-end-align {
    -webkit-margin-start: calc((100% - 960px) / 2);
            margin-inline-start: calc((100% - 960px) / 2);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .container-end-align {
    -webkit-margin-start: calc((100% - 720px) / 2);
            margin-inline-start: calc((100% - 720px) / 2);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .container-end-align {
    -webkit-margin-start: calc((100% - 540px) / 2);
            margin-inline-start: calc((100% - 540px) / 2);
  }
}
@media (max-width: 575px) {
  .container-end-align {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
    -webkit-padding-end: 12px;
            padding-inline-end: 12px;
  }
}

.vbox-grab .vbox-child img {
  border-radius: 12px;
}

#smooth-content {
  padding-bottom: 15px;
  /* will-change: transform was here for GSAP ScrollSmoother (no longer
     initialized for perf). With will-change, this element creates a containing
     block which can interfere with `position: sticky` descendants — keeping
     the styling minimal so the Industries scroll-pinned section works. */
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  #smooth-content {
    padding-bottom: 0;
  }
}

.tj-sticky-panel-2,
.slidebar-stickiy {
  will-change: transform;
}

@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  [data-speed=".8"] {
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
  }
}

/**
  Buttons CSS
*/
.tj-primary-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  position: relative;
  background-color: var(--tj-color-theme-primary);
  font-size: 16px;
  font-weight: var(--tj-fw-sbold);
  padding: 5px 5px 5px 25px;
  text-align: center;
  border-radius: 50px;
  line-height: 1;
  z-index: 2;
  overflow: hidden;
  white-space: nowrap;
}
.tj-primary-btn .btn-text {
  color: var(--tj-color-common-white);
  overflow: hidden;
}
.tj-primary-btn .btn-text span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 1;
  text-shadow: 0 30px 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
.tj-primary-btn .btn-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
  line-height: 1;
  width: 42px;
  height: 42px;
  overflow: hidden;
  background-color: var(--tj-color-theme-dark);
  border-radius: 50%;
}
.tj-primary-btn .btn-icon i {
  color: var(--tj-color-common-white);
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tj-primary-btn.btn-dark {
  background-color: var(--tj-color-theme-dark);
}
.tj-primary-btn.btn-dark .btn-icon {
  background-color: var(--tj-color-common-white);
}
.tj-primary-btn.btn-dark .btn-icon i {
  color: var(--tj-color-theme-dark);
}
.tj-primary-btn.transparent-btn {
  background-color: transparent;
  border: 1px solid var(--tj-color-border-1);
}
.tj-primary-btn.transparent-btn .btn-text {
  color: var(--tj-color-heading-primary);
}
.tj-primary-btn.transparent-btn:hover {
  border-color: var(--tj-color-theme-dark);
}
.tj-primary-btn:hover .btn-text span {
  -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
          transform: translateY(-30px);
}
.tj-primary-btn:hover .btn-icon i {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
.tj-primary-btn-lg {
  font-size: 20px;
  padding: 7px 7px 7px 44px;
  gap: 14px;
}
.tj-primary-btn-lg .btn-icon {
  font-size: 27px;
  width: 59px;
  height: 59px;
}

.text-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  position: relative;
  font-size: 16px;
  font-weight: var(--tj-fw-sbold);
  text-align: center;
  line-height: 1;
  z-index: 2;
}
.text-btn .btn-text {
  color: var(--tj-color-heading-primary);
  overflow: hidden;
}
.text-btn .btn-text span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 1;
  text-shadow: 0 30px 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
.text-btn .btn-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
  line-height: 1;
  width: 30px;
  height: 30px;
  overflow: hidden;
  background-color: var(--tj-color-theme-dark);
  border-radius: 50%;
}
.text-btn .btn-icon i {
  color: var(--tj-color-common-white);
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.text-btn:hover .btn-text span {
  -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
          transform: translateY(-30px);
}
.text-btn:hover .btn-icon {
  background-color: var(--tj-color-theme-primary);
}
.text-btn:hover .btn-icon i {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}

.tji-icon-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--tj-color-theme-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 26px;
}
.tji-icon-btn i {
  color: var(--tj-color-theme-primary);
  font-weight: var(--tj-fw-normal);
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tji-icon-btn:hover {
  background-color: var(--tj-color-theme-primary);
}
.tji-icon-btn:hover i {
  color: var(--tj-color-common-white);
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tji-icon-btn {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tji-icon-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}

/**----------------------------------------
START: Theme Header CSS
----------------------------------------*/
.header-area {
  background-color: var(--tj-color-common-white);
  border-end-start-radius: 12px;
  border-end-end-radius: 12px;
  position: relative;
  z-index: 99;
}
.header-area.header-1.header-absolute {
  top: 0;
  position: absolute;
  inset-inline-start: 0;
  width: calc(100% - 30px);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.header-1.header-absolute {
    width: calc(100% - 24px);
  }
}
.header-area.header-1 .header-wrapper {
  padding: 0 18px;
  background-color: var(--tj-color-common-white);
}
.header-area.header-2.header-absolute {
  position: absolute;
  top: 30px;
  inset-inline-start: 15px;
  width: calc(100% - 60px);
  z-index: 999;
  background-color: transparent;
  border-radius: 0;
}
.header-area.header-2.header-absolute > .container-fluid {
  --bs-gutter-x: 0;
}
.header-area.header-2.header-absolute > .container-fluid > .row {
  --bs-gutter-x: 0;
}
.header-area.header-2.header-absolute .header-wrapper {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 0 20px;
  border-radius: 14px;
}
.header-area.header-2.header-absolute .search_popup {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.header-area.header-2.header-absolute .search_popup .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]),
.header-area.header-2.header-absolute .search_popup .search-box input[type=text] {
  background-color: var(--tj-color-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.header-2.header-absolute {
    top: 24px;
    inset-inline-start: 12px;
    width: calc(100% - 48px);
  }
}
.header-area.header-2.header-sticky .header-wrapper {
  padding: 0 8px;
}
.header-area.header-3.header-absolute {
  background-color: transparent;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: calc(100% - 30px);
  z-index: 999;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.header-3.header-absolute {
    width: calc(100% - 24px);
  }
}
.header-area.header-3 .header-wrapper {
  padding: 0 12px;
  border-start-start-radius: 12px;
  border-start-end-radius: 12px;
}
.header-area.header-duplicate {
  display: none;
  opacity: 0;
  visibility: hidden;
}
.header-area.sticky {
  position: fixed;
  width: calc(100% - 30px);
  top: 0;
  inset-inline-start: 0;
  -webkit-animation: sticky 0.9s;
  animation: sticky 0.9s;
  border-bottom: none;
  z-index: 1002;
  -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  opacity: 1;
  visibility: visible;
  background-color: var(--tj-color-common-white);
  display: block;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.sticky {
    width: 100%;
  }
  .header-area.sticky.section-gap-x {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-area.header-3 .header-wrapper, .header-area.header-1 .header-wrapper {
    padding: 0 8px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-area.header-3 .header-wrapper, .header-area.header-1 .header-wrapper {
    padding: 0 4px;
  }
  .header-area.header-2.header-absolute .header-wrapper {
    padding: 0 16px;
  }
  .header-area.header-2.header-sticky .header-wrapper {
    padding: 0 4px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.header-3 .header-wrapper, .header-area.header-1 .header-wrapper {
    padding: 15px 0px;
  }
  .header-area.header-2.header-absolute .header-wrapper {
    padding: 15px 12px;
  }
  .header-area.header-2.header-sticky .header-wrapper {
    padding: 15px 0;
  }
}

.header-top {
  background-color: var(--tj-color-theme-primary);
  border-end-start-radius: 12px;
  border-end-end-radius: 12px;
  padding: 0 12px;
  margin-bottom: 15px;
}
.header-top-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header-top-content .topbar-text {
  color: var(--tj-color-common-white);
  padding: 13px 0;
  margin: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.header-top-content .topbar-text i {
  color: var(--tj-color-common-white);
  font-size: 20px;
}
.header-top-content .topbar-text a {
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-sbold);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.header-top-content .topbar-text a::after {
  content: "\e913";
  font-size: 21px;
  line-height: 1.2;
  font-family: "bexon-icons" !important;
  font-weight: normal;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: var(--tj-color-common-white);
}
.header-top-content .topbar-text a:hover {
  opacity: 0.7;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-top-content .topbar-text {
    font-size: 15px;
  }
  .header-top-content .topbar-text i {
    font-size: 18px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-top-content .topbar-text {
    font-size: 15px;
    padding: 10px 0;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .header-top-content .topbar-text i {
    font-size: 18px;
  }
}
.header-top-content .header-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.header-top-content .header-info .info-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  position: relative;
  padding: 0 15px;
  -webkit-border-start: 1px dashed rgba(255, 255, 255, 0.15);
          border-inline-start: 1px dashed rgba(255, 255, 255, 0.15);
}
.header-top-content .header-info .info-item:last-child {
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-top-content .header-info .info-item:last-child {
    display: none;
  }
}
.header-top-content .header-info .info-item span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  color: var(--tj-color-common-white);
}
.header-top-content .header-info .info-item a {
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-top-content .header-info .info-item {
    border: 0;
    padding: 0 10px 10px 10px;
  }
}
.header-top-content .header-info .social-links ul li a {
  width: 22px;
  height: 22px;
  font-size: 14px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-top-content {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-top {
    padding: 0 8px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-top {
    padding: 0px;
  }
}

.header-bottom {
  border-bottom: 1px dashed #c9d1d1;
}

.header-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  z-index: 99;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-wrapper {
    padding: 15px 0;
  }
}

.site_logo .logo {
  display: inline-block;
  max-width: 136px;
  width: 100%;
}

.menu-area {
  gap: 25px;
}

.mainmenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.mainmenu ul > li {
  position: relative;
  z-index: 1;
}
.mainmenu ul > li > a {
  position: relative;
  font-size: 16px;
  color: var(--tj-color-heading-primary);
  display: block;
  padding: 37px 0;
  font-weight: var(--tj-fw-medium);
  line-height: 1;
}
.mainmenu ul > li.menu-item-has-children > a, .mainmenu ul > li.has-dropdown > a {
  -webkit-padding-end: 20px;
          padding-inline-end: 20px;
}
.mainmenu ul > li.menu-item-has-children > a::after, .mainmenu ul > li.has-dropdown > a::after {
  content: "\e929";
  font-family: "bexon-icons";
  color: inherit;
  font-size: 12px;
  position: absolute;
  top: 40px;
  inset-inline-end: 0;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.mainmenu ul > li.menu-item-has-children:hover > a::after, .mainmenu ul > li.has-dropdown:hover > a::after {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
.mainmenu ul > li.current-menu-ancestor > a, .mainmenu ul > li.current-menu-item > a, .mainmenu ul > li:hover > a {
  color: var(--tj-color-theme-primary);
}
.mainmenu ul > li.current-menu-ancestor > a::after, .mainmenu ul > li.current-menu-item > a::after, .mainmenu ul > li:hover > a::after {
  color: var(--tj-color-theme-primary);
}
.mainmenu ul > li.current-menu-ancestor > a::before, .mainmenu ul > li.current-menu-item > a::before, .mainmenu ul > li:hover > a::before {
  opacity: 1;
  visibility: visible;
}
.mainmenu ul > li > .sub-menu {
  display: block;
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: 220px;
  top: 100%;
  inset-inline-start: 0;
  z-index: 99;
  text-align: start;
  background-color: var(--tj-color-common-white);
  -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
  opacity: 0;
  visibility: hidden;
  gap: 0;
  padding: 10px 0;
  pointer-events: none;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.mainmenu ul > li > .sub-menu > li {
  display: block;
  width: 100%;
}
.mainmenu ul > li > .sub-menu > li > a {
  position: relative;
  padding: 10px 20px;
  display: block;
  color: var(--tj-color-text-body);
}
.mainmenu ul > li > .sub-menu > li > a::before {
  display: none;
}
.mainmenu ul > li > .sub-menu > li:last-child {
  padding-bottom: 0;
}
.mainmenu ul > li > .sub-menu > li.menu-item-has-children > a::after, .mainmenu ul > li > .sub-menu > li.has-dropdown > a::after {
  top: 13px;
  inset-inline-end: 15px;
  color: var(--tj-color-text-body);
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.mainmenu ul > li > .sub-menu > li.current-menu-ancestor > a, .mainmenu ul > li > .sub-menu > li.current-menu-item > a, .mainmenu ul > li > .sub-menu > li:hover > a {
  color: var(--tj-color-theme-primary);
}
.mainmenu ul > li > .sub-menu > li.current-menu-ancestor > a::before, .mainmenu ul > li > .sub-menu > li.current-menu-item > a::before, .mainmenu ul > li > .sub-menu > li:hover > a::before {
  opacity: 1;
  visibility: visible;
  width: 14px;
}
.mainmenu ul > li > .sub-menu > li.current-menu-ancestor > a::after, .mainmenu ul > li > .sub-menu > li.current-menu-item > a::after, .mainmenu ul > li > .sub-menu > li:hover > a::after {
  color: var(--tj-color-theme-primary);
}
.mainmenu ul > li > .sub-menu > li > .sub-menu {
  inset-inline-start: 100%;
  top: -10px;
}
.mainmenu ul > li:hover > .sub-menu,
.mainmenu ul > li.is-mega-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scaleY(1);
      -ms-transform: scaleY(1);
          transform: scaleY(1);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  pointer-events: inherit;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mainmenu ul {
    gap: 0 22px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mainmenu ul {
    gap: 0 16px;
  }
}

.header-search {
  line-height: 1;
  position: relative;
}
.header-search .search {
  color: var(--tj-color-heading-primary);
  font-size: 20px;
  line-height: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--tj-color-grey-1);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.header-search .search i {
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-search .search {
    font-size: 18px;
    width: 44px;
    height: 44px;
  }
}
.header-search .search:hover i {
  -webkit-animation: gelatine 0.6s;
          animation: gelatine 0.6s;
}
.header-search .search.search-hide {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
}
.header-search .search_close_btn {
  color: var(--tj-color-heading-primary);
  font-size: 20px;
  line-height: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--tj-color-grey-1);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset-inline-start: 0;
  top: 0;
}
.header-search .search_close_btn i {
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-search .search_close_btn {
    font-size: 18px;
    width: 44px;
    height: 44px;
  }
}
.header-search .search_close_btn.close-show {
  opacity: 1;
  visibility: visible;
}

.header-contact {
  font-size: 20px;
  line-height: 1;
  color: var(--tj-color-heading-primary);
  gap: 8px;
}
.header-contact .call-text {
  font-weight: var(--tj-fw-sbold);
  position: relative;
}
.header-contact .call-text::after {
  content: "";
  position: absolute;
  bottom: -1px;
  inset-inline-end: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}
.header-contact:hover .call-text::after {
  -webkit-animation: linehover 0.8s linear;
          animation: linehover 0.8s linear;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-contact {
    font-size: 18px;
  }
}

.header-right-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.header-right-item .tj-primary-btn .btn-icon {
  width: 38px;
  height: 38px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-right-item .tj-primary-btn .btn-icon {
    width: 35px;
    height: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-right-item {
    gap: 12px;
  }
}

.menu_bar {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-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;
  gap: 6px;
  width: 25px;
  height: 25px;
  position: relative;
  top: 0;
  inset-inline-start: 0;
  -webkit-margin-start: 5px;
          margin-inline-start: 5px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.menu_bar span {
  display: block;
  width: 18px;
  height: 2px;
  background-color: var(--tj-color-common-black);
  border-radius: 10px;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.menu_bar span:last-child, .menu_bar span:first-child {
  width: 25px;
}
.menu_bar.mobile_menu_bar {
  width: 50px;
  height: 50px;
  padding: 12px;
  background: var(--tj-color-theme-primary);
  border-radius: 7px;
}
.menu_bar.mobile_menu_bar span {
  background-color: var(--tj-color-common-white);
}
.menu_bar:hover span {
  width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .menu_bar {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }
}

.header-2.header-absolute .mainmenu > ul > li > a {
  color: var(--tj-color-common-white);
  padding-top: 32px;
  padding-bottom: 32px;
}
.header-2.header-absolute .mainmenu > ul > li.menu-item-has-children > a::after, .header-2.header-absolute .mainmenu > ul > li.has-dropdown > a::after {
  color: currentColor;
  top: 35px;
}
.header-2.header-absolute .mainmenu > ul > li:hover > a, .header-2.header-absolute .mainmenu > ul > li.current-menu-ancestor > a {
  color: var(--tj-color-text-body-2);
}
.header-2.header-absolute .mainmenu > ul > li:hover > a::after, .header-2.header-absolute .mainmenu > ul > li.current-menu-ancestor > a::after {
  color: currentColor;
}
.header-2.header-absolute .menu_bar span {
  background-color: var(--tj-color-common-white);
}

.header-3.header-absolute .mainmenu > ul > li > a {
  padding-top: 32px;
  padding-bottom: 32px;
}
.header-3.header-absolute .mainmenu > ul > li.menu-item-has-children > a::after, .header-3.header-absolute .mainmenu > ul > li.has-dropdown > a::after {
  color: currentColor;
  top: 35px;
}

/* !END: Theme Header CSS */
/* START: Mega Menu CSS */
.gap-60-25 {
  --bs-gutter-x: 60px;
}
.gap-60-25 .row {
  --bs-gutter-x: 25px;
  --bs-gutter-y: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .gap-60-25 {
    --bs-gutter-x: 40px;
  }
  .gap-60-25 .row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .gap-60-25 {
    --bs-gutter-x: 32px;
  }
  .gap-60-25 .row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .gap-60-25 {
    --bs-gutter-x: 0;
  }
  .gap-60-25 .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 20px;
  }
}

.gap-30-30 {
  --bs-gutter-x: 30;
}
.gap-30-30 .row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .gap-30-30 {
    --bs-gutter-x: 20px;
  }
  .gap-30-30 .row {
    --bs-gutter-y: 20px;
  }
}

.header-wrapper:has(.mega-menu) {
  position: static;
}

.mainmenu ul > li:has(.mega-menu),
.mobile_menu ul > li:has(.mega-menu) {
  position: static;
}
.mainmenu ul > li > .mega-menu,
.mobile_menu ul > li > .mega-menu {
  max-width: 1920px;
  width: 100%;
  inset-inline-start: 50%;
  -webkit-transform: scaleY(0) translateX(-50%);
      -ms-transform: scaleY(0) translateX(-50%);
          transform: scaleY(0) translateX(-50%);
  padding: 30px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mainmenu ul > li > .mega-menu,
  .mobile_menu ul > li > .mega-menu {
    padding: 20px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mainmenu ul > li > .mega-menu,
  .mobile_menu ul > li > .mega-menu {
    padding: 16px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .mainmenu ul > li > .mega-menu,
  .mobile_menu ul > li > .mega-menu {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
  .mainmenu ul > li > .mega-menu li,
  .mobile_menu ul > li > .mega-menu li {
    -webkit-padding-start: 0 !important;
            padding-inline-start: 0 !important;
  }
}
.mainmenu ul > li > .mega-menu::before,
.mobile_menu ul > li > .mega-menu::before {
  display: none;
}
.mainmenu ul > li > .mega-menu .container-fluid,
.mobile_menu ul > li > .mega-menu .container-fluid {
  max-width: 1920px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  width: 100%;
}
.mainmenu ul > li > .mega-menu .col-xl-3,
.mobile_menu ul > li > .mega-menu .col-xl-3 {
  width: 20%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mainmenu ul > li > .mega-menu .col-xl-3,
  .mobile_menu ul > li > .mega-menu .col-xl-3 {
    width: 25%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .mainmenu ul > li > .mega-menu .col-xl-3,
  .mobile_menu ul > li > .mega-menu .col-xl-3 {
    width: 100%;
  }
}
.mainmenu ul > li > .mega-menu-pages,
.mobile_menu ul > li > .mega-menu-pages {
  width: calc(100% - 30px);
  max-width: 1320px;
  padding: 0;
  margin: 0 auto;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-wrapper,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-wrapper,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single {
  width: 315px;
  -webkit-border-start: 1px solid var(--tj-color-border-1);
          border-inline-start: 1px solid var(--tj-color-border-1);
  padding: 26px 30px 20px;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child, .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:first-child,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single:first-child {
  -webkit-border-start: 0;
          border-inline-start: 0;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child {
  width: 377px;
  padding: 15px 15px;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child {
    width: 350px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child {
    width: 100%;
    padding: 0;
  }
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box {
  position: relative;
  background: var(--tj-color-theme-dark);
  border-radius: 10px;
  overflow: hidden;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content {
  padding: 30px 28px 30px;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .title,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .title {
  font-size: 74px;
  color: var(--tj-color-common-white);
  margin-bottom: 15px;
  line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .title,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .title,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .title,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .title {
    font-size: 60px;
  }
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content > span,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content > span {
  display: block;
  font-size: 20px;
  font-family: var(--tj-ff-heading);
  font-weight: var(--tj-fw-medium);
  color: var(--tj-color-common-white);
  line-height: 1;
  margin-bottom: 26px;
}
@media (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content > span,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content > span {
    margin-bottom: 20px;
  }
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact {
  background-color: var(--tj-color-theme-primary);
  padding: 7px 12px;
  border-radius: 50px;
  line-height: 1;
  overflow: hidden;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact span,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact span {
  color: var(--tj-color-common-white);
  font-size: 18px;
  font-weight: var(--tj-fw-sbold);
  margin: 0;
  text-shadow: 0 30px 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact i,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact i {
  color: var(--tj-color-common-white);
  font-size: 20px;
  -webkit-margin-end: 6px;
          margin-inline-end: 6px;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact:hover span,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content .feature-contact:hover span {
  -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
          transform: translateY(-30px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-content {
    padding: 30px 20px;
  }
}
@media (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box {
    max-width: 360px;
    margin: 0 auto;
  }
}
@media (max-width: 400px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box {
    max-width: 320px;
    margin: 0 auto;
  }
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images {
  width: 285px;
  height: 285px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-margin-start: 116px;
          margin-inline-start: 116px;
  margin-bottom: -50px;
  border: 5px solid var(--tj-color-theme-primary);
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images img,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images {
    width: 299px;
    height: 299px;
    -webkit-margin-start: 102px;
            margin-inline-start: 102px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images {
    width: 325px;
    height: 325px;
    -webkit-margin-start: 56px;
            margin-inline-start: 56px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images {
    width: 500px;
    height: 500px;
    -webkit-margin-start: 260px;
            margin-inline-start: 260px;
    margin-bottom: -70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images {
    -webkit-margin-start: 180px;
            margin-inline-start: 180px;
  }
}
@media (max-width: 400px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box .feature-images {
    width: 320px;
    height: 320px;
    -webkit-margin-start: 45px;
            margin-inline-start: 45px;
  }
}
@media (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .feature-box {
    padding: 20px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single {
    width: 100%;
    padding: 20px 0;
    -webkit-border-start: 0;
            border-inline-start: 0;
  }
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-title,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-title {
  font-size: 18px;
  font-family: var(--tj-ff-body);
  font-weight: var(--tj-fw-sbold);
  padding-bottom: 10px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-pages .mega-menu-title,
  .mobile_menu ul > li > .mega-menu-pages .mega-menu-title {
    color: var(--tj-color-common-white);
  }
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-title::before,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-title::before {
  position: absolute;
  content: "";
  width: 32px;
  height: 3px;
  background: var(--tj-color-border-1);
  bottom: 0px;
  inset-inline-start: 0;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-list,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-list a,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-list a {
  font-weight: var(--tj-fw-medium);
  color: var(--tj-color-common-black-2);
  padding: 12px 0;
  line-height: 1;
  position: relative;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-list a:has(.mega-menu-badge),
.mobile_menu ul > li > .mega-menu-pages .mega-menu-list a:has(.mega-menu-badge) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-list a:hover, .mainmenu ul > li > .mega-menu-pages .mega-menu-list a.active,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-list a:hover,
.mobile_menu ul > li > .mega-menu-pages .mega-menu-list a.active {
  color: var(--tj-color-theme-primary);
  -webkit-padding-start: 5px;
          padding-inline-start: 5px;
}
.mainmenu ul > li > .mega-menu .mega-menu-badge,
.mobile_menu ul > li > .mega-menu .mega-menu-badge {
  font-size: 10px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-primary);
  padding: 3px 7px;
  border-radius: 40px;
}
.mainmenu ul > li > .mega-menu .mega-menu-badge-hot,
.mobile_menu ul > li > .mega-menu .mega-menu-badge-hot {
  background-color: var(--tj-color-red-1);
}
.mainmenu ul > li:hover .mega-menu,
.mobile_menu ul > li:hover .mega-menu {
  -webkit-transform: scaleY(1) translateX(-50%);
      -ms-transform: scaleY(1) translateX(-50%);
          transform: scaleY(1) translateX(-50%);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .mainmenu ul > li:hover .mega-menu,
  .mobile_menu ul > li:hover .mega-menu {
    -webkit-transform: scaleY(1) translateX(0);
        -ms-transform: scaleY(1) translateX(0);
            transform: scaleY(1) translateX(0);
  }
}
.mainmenu ul > li > .mega-menu-service,
.mobile_menu ul > li > .mega-menu-service {
  width: 346px;
  -webkit-margin-start: -25px;
          margin-inline-start: -25px;
  padding: 15px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-service,
  .mobile_menu ul > li > .mega-menu-service {
    width: 100%;
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }
}
.mainmenu ul > li > .mega-menu-service::before,
.mobile_menu ul > li > .mega-menu-service::before {
  display: none;
}
.mainmenu ul > li > .mega-menu-service li a,
.mobile_menu ul > li > .mega-menu-service li a {
  padding: 15px 25px;
  border-bottom: 1px solid var(--tj-color-border-1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  font-size: 16px;
  font-weight: var(--tj-fw-sbold);
  font-weight: var(--tj-fw-medium);
  letter-spacing: -0.03em;
}
.mainmenu ul > li > .mega-menu-service li:last-child a,
.mobile_menu ul > li > .mega-menu-service li:last-child a {
  border-bottom: 0;
}
.mainmenu ul > li > .mega-menu-service li:hover a,
.mobile_menu ul > li > .mega-menu-service li:hover a {
  -webkit-padding-start: 25px;
          padding-inline-start: 25px;
}
.mainmenu ul > li > .mega-menu-service li:hover a::before,
.mobile_menu ul > li > .mega-menu-service li:hover a::before {
  display: none;
}
.mainmenu ul > li > .mega-menu-service-single,
.mobile_menu ul > li > .mega-menu-service-single {
  gap: 12px;
}
.mainmenu ul > li > .mega-menu-service-single .mega-menu-service-icon,
.mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-icon {
  width: 54px;
  height: 54px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  text-align: center;
  background: linear-gradient(-45deg, rgba(30, 138, 138, 0.3) 0%, rgba(30, 138, 138, 0) 50%, rgba(30, 138, 138, 0.3) 100%);
  color: var(--tj-color-theme-primary);
  font-size: 40px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: 0.4s ease-in-out 0s;
  transition: 0.4s ease-in-out 0s;
}
.mainmenu ul > li > .mega-menu-service-single .mega-menu-service-title,
.mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-title {
  line-height: 1.375;
  max-width: 171px;
  display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-title,
  .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-title {
    max-width: 156px;
  }
}
.mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav,
.mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  position: relative;
  inset-inline-end: -16px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  min-width: 45px;
  height: 100%;
  z-index: 2;
  font-size: 1.6em;
  line-height: 1;
  color: var(--tj-color-theme-primary);
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav,
  .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav {
    color: var(--tj-color-common-white);
  }
}
.mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav i,
.mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav i {
  -webkit-transition: -webkit-transform 0.4s ease-in-out 0s;
  transition: -webkit-transform 0.4s ease-in-out 0s;
  transition: transform 0.4s ease-in-out 0s;
  transition: transform 0.4s ease-in-out 0s, -webkit-transform 0.4s ease-in-out 0s;
}
.mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav i:last-child,
.mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav i:last-child {
  position: absolute;
  -webkit-transform: translateX(-150%);
      -ms-transform: translateX(-150%);
          transform: translateX(-150%);
}
.mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav:hover i:first-child,
.mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav:hover i:first-child {
  -webkit-transform: translateX(150%);
      -ms-transform: translateX(150%);
          transform: translateX(150%);
}
.mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav:hover i:last-child,
.mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav:hover i:last-child {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
.mainmenu ul > li > .mega-menu-service-single:hover .mega-menu-service-icon,
.mobile_menu ul > li > .mega-menu-service-single:hover .mega-menu-service-icon {
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
.mainmenu ul > li > .mega-menu-service-single:hover .mega-menu-service-nav,
.mobile_menu ul > li > .mega-menu-service-single:hover .mega-menu-service-nav {
  opacity: 1;
}

.tj-demo-wrapper {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-demo-wrapper {
    margin-bottom: 0px;
  }
}
.tj-demo-top-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  row-gap: 20px;
  margin-bottom: 50px;
}
.tj-demo-top-title {
  font-size: 32px;
  margin-bottom: 0;
}
.tj-demo-top-title span {
  color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tj-demo-top-title {
    font-size: 28px;
  }
}
@media (max-width: 575px) {
  .tj-demo-top-title {
    font-size: 24px;
  }
}
.tj-demo-thumb {
  padding: 9px 9px 20px;
  position: relative;
  z-index: 1;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 10px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-demo-thumb {
    border-color: var(--tj-color-border-2);
  }
}
.tj-demo-thumb .image {
  max-width: 596px;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 8px;
  overflow: hidden;
}
.tj-demo-thumb .image::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  background: var(--tj-color-theme-dark);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.tj-demo-thumb .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-demo-thumb .image {
    max-width: 100%;
  }
}
.tj-demo-thumb .tj-demo-title {
  color: var(--tj-color-heading-primary);
  font-weight: var(--tj-fw-medium);
  font-size: 16px;
  text-align: center;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-demo-thumb .tj-demo-title {
    font-size: 14px;
  }
}
.tj-demo-thumb .tj-demo-title a {
  color: var(--tj-color-heading-primary);
}
.tj-demo-thumb .tj-demo-title a:hover {
  color: var(--tj-color-theme-primary);
}
.tj-demo-thumb:not(.coming):hover .image::before {
  opacity: 0.6;
  visibility: visible;
}
.tj-demo-thumb:not(.coming):hover .tj-demo-button {
  top: 50%;
  opacity: 1;
  visibility: visible;
}
@media (max-width: 575px) {
  .tj-demo-thumb {
    padding: 15px 15px 25px;
  }
}
.tj-demo-thumb.coming .image::before {
  display: none;
}
.tj-demo-thumb .tj-demo-badge {
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-red-1);
  padding: 3px 7px;
  border-radius: 40px;
  position: absolute;
  inset-inline-start: 11px;
  top: 11px;
}
.tj-demo-button {
  position: absolute;
  top: 60%;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}
.tj-demo-button .tj-primary-btn {
  background-color: var(--tj-color-common-white);
}
.tj-demo-button .tj-primary-btn .btn-text {
  color: var(--tj-color-theme-dark);
}

.hamburger_menu .mean-container .mean-nav ul li:has(.tj-demo-thumb) > a {
  border-bottom: 0;
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu li a,
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-service a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  float: none;
  border-bottom: 0;
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu li a:has(.mega-menu-badge),
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-service a:has(.mega-menu-badge) {
  gap: 5px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu li a.tj-primary-btn,
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-service a.tj-primary-btn {
  padding: 4.5px;
  -webkit-padding-start: 15px;
          padding-inline-start: 15px;
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu li a .mega-menu-badge,
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-service a .mega-menu-badge {
  font-size: 10px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-primary);
  padding: 3px 7px;
  border-radius: 40px;
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu li a .mega-menu-badge-hot,
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-service a .mega-menu-badge-hot {
  background-color: var(--tj-color-red-1);
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu li .tj-demo-title a,
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-service .tj-demo-title a {
  padding: 0;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .hamburger_menu .mean-container .mean-nav ul li .mega-menu-service li,
  .hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li {
    -webkit-padding-start: 0 !important;
            padding-inline-start: 0 !important;
  }
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-service li a,
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li a {
  border-bottom: 1px solid var(--tj-color-border-2);
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li .mega-menu-title::after {
  background-color: var(--tj-color-theme-dark);
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li a:not(.tj-primary-btn) {
  width: 100%;
  padding: 18px 0;
  text-transform: capitalize;
  color: var(--tj-color-common-white);
  border-bottom: 1px solid var(--tj-color-border-2);
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li a:not(.tj-primary-btn)::before {
  display: none;
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li a:not(.tj-primary-btn):hover {
  color: var(--tj-color-text-body);
  padding: 18px 0;
}
.hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li .cta-btn .tj-primary-btn {
  width: auto;
}

/* !END: Mega Menu CSS */
/**----------------------------------------
START: Theme Footer CSS
----------------------------------------*/
.tj-footer-section {
  background-color: var(--tj-color-theme-bg-3);
  position: relative;
  z-index: 1;
  padding-top: 195px;
  border-radius: 12px;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-footer-section {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section {
    padding-top: 135px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-footer-section {
    padding-top: 320px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section {
    padding-top: 270px;
    margin-bottom: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
}

.footer-main-area {
  position: relative;
  padding: 100px 0 90px 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .footer-main-area {
    padding: 70px 0;
  }
}

.footer-logo {
  max-width: 150px;
}

.award-logo-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 18px;
}
.award-logo-area .award-logo {
  max-width: 96px;
}

.footer-widget .footer-text {
  max-width: 280px;
  width: 100%;
}
.footer-widget .footer-text p {
  margin-top: 28px;
  margin-bottom: 34px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .footer-widget .footer-text p {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .footer-widget .footer-text {
    max-width: 100%;
  }
}
.footer-widget .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 33px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .footer-widget .title {
    margin-bottom: 18px;
  }
}
.footer-widget.footer-col-1 .footer-text p {
  color: var(--tj-color-text-body-2);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .footer-widget.footer-col-1 {
    margin-bottom: 10px;
  }
}

.social-links ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}
.social-links ul li a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(12, 30, 33, 0.3);
  font-size: 16px;
  line-height: 1;
}
.social-links ul li a i {
  color: var(--tj-color-theme-bg);
}
.social-links ul li a:hover {
  background-color: var(--tj-color-theme-primary);
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
}
.social-links ul li a:hover i {
  color: var(--tj-color-common-white);
}
.social-links ul li::after {
  display: none;
}
.social-links.style-2 ul li a {
  background-color: var(--tj-color-common-white);
  opacity: 0.4;
}
.social-links.style-2 ul li a i {
  color: var(--tj-color-theme-primary);
}
.social-links.style-2 ul li a:hover {
  opacity: 1;
}
.social-links.style-3 ul li a {
  background-color: var(--tj-color-common-white);
  opacity: 0.3;
}
.social-links.style-3 ul li a i {
  color: var(--tj-color-theme-dark);
}
.social-links.style-3 ul li a:hover {
  background-color: var(--tj-color-theme-primary);
  opacity: 1;
}
.social-links.style-3 ul li a:hover i {
  color: var(--tj-color-common-white);
}

.widget-nav-menu {
  -webkit-padding-start: 40px;
          padding-inline-start: 40px;
}
.widget-nav-menu ul {
  list-style: none;
}
.widget-nav-menu ul li {
  padding: 6px 0;
}
.widget-nav-menu ul li:first-child {
  padding-top: 0;
}
.widget-nav-menu ul li a {
  color: var(--tj-color-grey-2);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
}
.widget-nav-menu ul li a .badge {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-primary);
  border-radius: 50px;
  padding: 3px 6px 4px;
}
.widget-nav-menu ul li a:hover {
  color: var(--tj-color-theme-primary);
  -webkit-padding-start: 5px;
          padding-inline-start: 5px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .widget-nav-menu {
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .widget-nav-menu {
    -webkit-padding-start: 80px;
            padding-inline-start: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .widget-nav-menu {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .widget-nav-menu {
    margin-top: 30px;
  }
}
.widget-nav-menu.footer-col-3, .widget-nav-menu.footer-col-2 {
  -webkit-padding-start: 115px;
          padding-inline-start: 115px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .widget-nav-menu.footer-col-3, .widget-nav-menu.footer-col-2 {
    -webkit-padding-start: 70px;
            padding-inline-start: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .widget-nav-menu.footer-col-3, .widget-nav-menu.footer-col-2 {
    margin-top: 30px;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
.widget-nav-menu.footer-col-3 {
  -webkit-padding-start: 120px;
          padding-inline-start: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .widget-nav-menu.footer-col-3 {
    -webkit-padding-start: 80px;
            padding-inline-start: 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) {
  .widget-nav-menu.footer-col-3 {
    margin-top: 30px;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}

.widget-subscribe {
  max-width: 350px;
  width: 100%;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.widget-subscribe .title {
  margin-bottom: 25px;
  font-weight: var(--tj-fw-medium);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .widget-subscribe {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
    margin-top: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .widget-subscribe {
    max-width: 100%;
    -webkit-margin-start: 0;
            margin-inline-start: 0;
    margin-top: 30px;
  }
}

.subscribe-form {
  position: relative;
}
.subscribe-form input[type=email] {
  height: 64px;
  padding: 15px 60px 15px 25px;
  border: 0;
  border-radius: 8px;
  outline: 1px solid transparent;
}
.subscribe-form input[type=email]:focus {
  outline-color: var(--tj-color-theme-primary);
}
.subscribe-form input[type=checkbox] {
  position: relative;
  -webkit-margin-end: 8px;
          margin-inline-end: 8px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--tj-color-theme-dark);
  border-radius: 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  cursor: pointer;
}
.subscribe-form input[type=checkbox]::before {
  content: "\e911";
  font-size: 10px;
  line-height: 1;
  font-family: "bexon-icons" !important;
  color: var(--tj-color-common-white);
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 16px;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.subscribe-form input[type=checkbox]:checked {
  background-color: var(--tj-color-theme-dark);
}
.subscribe-form input[type=checkbox]:checked::before {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.subscribe-form button {
  position: absolute;
  width: 64px;
  height: 64px;
  inset-inline-end: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--tj-color-theme-primary);
}
.subscribe-form button i {
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.subscribe-form button:hover i, .subscribe-form button:focus i {
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}
.subscribe-form button::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 20px;
  height: 24px;
  -webkit-border-start: 1px solid var(--tj-color-border-1);
          border-inline-start: 1px solid var(--tj-color-border-1);
}
.subscribe-form label {
  color: var(--tj-color-text-body);
  margin-top: 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.subscribe-form label a {
  color: var(--tj-color-theme-dark);
  font-weight: var(--tj-fw-sbold);
  -webkit-margin-start: 4px;
          margin-inline-start: 4px;
}
.subscribe-form label a:hover {
  color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .subscribe-form {
    margin-top: 18px;
  }
}

.copyright-content-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 30px;
  padding: 20px 0;
}
.copyright-content-area .footer-contact ul {
  list-style: none;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 22px;
}
.copyright-content-area .footer-contact ul li a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 7px;
  color: var(--tj-color-text-body);
}
.copyright-content-area .footer-contact ul li a .icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  font-size: 28px;
  line-height: 1;
}
.copyright-content-area .footer-contact ul li a .icon i {
  color: var(--tj-color-common-white);
}
.copyright-content-area .footer-contact ul li a .text {
  position: relative;
}
.copyright-content-area .footer-contact ul li a .text::before {
  content: "";
  position: absolute;
  bottom: -2px;
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: 0;
  height: 1px;
  background-color: var(--tj-color-text-body);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.copyright-content-area .footer-contact ul li a:hover .text::before {
  width: 100%;
  inset-inline-start: 0;
  inset-inline-end: auto;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .copyright-content-area .footer-contact {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .copyright-content-area .social-links ul {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .copyright-content-area .social-links {
    width: 100%;
  }
}
.copyright-content-area .copyright-text p {
  margin: 0;
}
.copyright-content-area .copyright-text a {
  color: var(--tj-color-common-black);
}
.copyright-content-area .copyright-text a:hover {
  color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .copyright-content-area .copyright-text {
    width: 100%;
    text-align: center;
  }
}
.copyright-content-area .copyright-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  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;
}
.copyright-content-area .copyright-menu ul li {
  position: relative;
  -webkit-margin-end: 13px;
          margin-inline-end: 13px;
  -webkit-padding-end: 12px;
          padding-inline-end: 12px;
  z-index: 1;
}
.copyright-content-area .copyright-menu ul li::before {
  content: "";
  background: var(--tj-color-border-2);
  position: absolute;
  width: 1px;
  height: 11px;
  top: 50%;
  inset-inline-end: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.copyright-content-area .copyright-menu ul li a {
  font-size: 16px;
  font-weight: var(--tj-fw-regular);
  color: var(--tj-color-text-body-2);
}
.copyright-content-area .copyright-menu ul li a:hover {
  color: var(--tj-color-common-white);
}
.copyright-content-area .copyright-menu ul li:last-child {
  -webkit-padding-end: 0;
          padding-inline-end: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}
.copyright-content-area .copyright-menu ul li:last-child::before {
  display: none;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .copyright-content-area .copyright-menu {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .copyright-content-area {
    gap: 18px;
  }
}

.tj-copyright-area {
  padding-bottom: 30px;
}
.tj-copyright-area .copyright-content-area {
  border-top: 1px solid var(--tj-color-border-1);
  border-bottom: 1px solid var(--tj-color-border-1);
  padding: 20px 0;
}

.tj-footer-section.footer-2 {
  background-color: var(--tj-color-theme-dark);
  padding-top: 100px;
}
.tj-footer-section.footer-2 .footer-widget .title {
  color: var(--tj-color-common-white);
}
.tj-footer-section.footer-2 .footer-widget ul li a {
  color: var(--tj-color-text-body-2);
}
.tj-footer-section.footer-2 .footer-widget ul li a:hover {
  color: var(--tj-color-theme-primary);
}
.tj-footer-section.footer-2 .footer-col-1 {
  position: relative;
}
.tj-footer-section.footer-2 .footer-col-1::before {
  content: "";
  position: absolute;
  bottom: -160px;
  inset-inline-start: -50px;
  width: 350px;
  height: 300px;
  border-radius: 50%;
  background: var(--tj-color-theme-primary);
  -webkit-filter: blur(50px);
  filter: blur(50px);
  opacity: 0.15;
  z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.footer-2 {
    padding-top: 60px;
  }
}

.footer-subscribe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 40px 50px;
  border-radius: 12px;
}
.footer-subscribe .subscribe-form {
  width: 49%;
}
.footer-subscribe .subscribe-form input[type=email] {
  color: var(--tj-color-text-body-2);
  background-color: transparent;
  backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 5px 205px 5px 30px;
  outline: 1px solid transparent;
}
@media (max-width: 575px) {
  .footer-subscribe .subscribe-form input[type=email] {
    padding: 5px 24px 5px;
  }
}
.footer-subscribe .subscribe-form input[type=email]::-webkit-input-placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-2);
}
.footer-subscribe .subscribe-form input[type=email]::-moz-placeholder {
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-2);
}
.footer-subscribe .subscribe-form input[type=email]:-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-2);
}
.footer-subscribe .subscribe-form input[type=email]::-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-2);
}
.footer-subscribe .subscribe-form input[type=email]::placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-2);
}
.footer-subscribe .subscribe-form input[type=email]:focus {
  outline-color: var(--tj-color-theme-primary);
}
.footer-subscribe .subscribe-form button {
  width: auto;
  height: auto;
  top: 6px;
  inset-inline-end: 8px;
  font-size: 16px;
  font-weight: var(--tj-fw-sbold);
}
@media (max-width: 575px) {
  .footer-subscribe .subscribe-form button {
    position: static;
    margin-top: 20px;
  }
}
.footer-subscribe .subscribe-form button::before {
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-subscribe .subscribe-form {
    width: 70%;
    margin-top: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .footer-subscribe .subscribe-form {
    width: 100%;
    margin-top: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .footer-subscribe {
    padding: 30px 20px;
  }
}

.subscribe-logo {
  max-width: 225px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .subscribe-logo {
    max-width: 160px;
  }
}

.widget-contact {
  -webkit-padding-start: 76px;
          padding-inline-start: 76px;
}
.widget-contact .title {
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .widget-contact {
    -webkit-padding-start: 30px;
            padding-inline-start: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .widget-contact {
    margin-top: 30px;
    -webkit-padding-start: 70px;
            padding-inline-start: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .widget-contact {
    margin-top: 30px;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}

.footer-contact-info {
  max-width: 230px;
  width: 100%;
}
.footer-contact-info .contact-item {
  margin-bottom: 14px;
}
.footer-contact-info .contact-item:last-child {
  margin-bottom: 0;
}
.footer-contact-info .contact-item span {
  color: var(--tj-color-text-body-2);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.footer-contact-info .contact-item span i {
  font-size: 20px;
  color: var(--tj-color-theme-primary);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
.footer-contact-info .contact-item a {
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-sbold);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: 3px;
}
.footer-contact-info .contact-item a:hover {
  color: var(--tj-color-theme-primary);
}

.footer-marquee {
  border-top: 1px dashed var(--tj-color-border-2);
  border-bottom: 1px dashed var(--tj-color-border-2);
}
.footer-marquee .marquee-text {
  opacity: 0.2;
}
.footer-marquee .marquee-text:hover {
  opacity: 0.7;
}

.tj-copyright-area-2 .copyright-content-area {
  padding: 25px 0;
}
.tj-copyright-area-2 .copyright-text p {
  color: var(--tj-color-text-body-2);
}
.tj-copyright-area-2 .copyright-text a {
  color: var(--tj-color-common-white);
}
.tj-copyright-area-2 .copyright-text a:hover {
  color: var(--tj-color-theme-bg);
}

.tj-footer-section.footer-3 {
  background-color: var(--tj-color-theme-dark);
  position: relative;
  z-index: 1;
  padding-top: 0;
}
.tj-footer-section.footer-3 .footer-main-area {
  padding-top: 120px;
  padding-bottom: 110px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.footer-3 .footer-main-area {
    padding-top: 100px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.footer-3 .footer-main-area {
    padding-top: 70px;
    padding-bottom: 60px;
  }
}
.tj-footer-section.footer-3 .footer-widget .title {
  color: var(--tj-color-common-white);
}
.tj-footer-section.footer-3 .footer-widget ul li a {
  color: var(--tj-color-text-body-2);
}
.tj-footer-section.footer-3 .footer-widget ul li a:hover {
  color: var(--tj-color-theme-primary);
}

.footer-bottom-area {
  padding-bottom: 50px;
}

.widget-subscribe-2 {
  max-width: 850px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 40px 30px;
  border-radius: 12px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 50px;
}
.widget-subscribe-2 .title {
  color: var(--tj-color-common-white);
  max-width: 250px;
  width: 100%;
  margin-bottom: 25px;
  font-weight: var(--tj-fw-medium);
}
.widget-subscribe-2 .subscribe-form {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.widget-subscribe-2 .subscribe-form input[type=email] {
  background-color: transparent;
  backdrop-filter: blur(10px);
  border-radius: 10px;
  color: var(--tj-color-text-body-2);
  outline: 1px solid transparent;
}
.widget-subscribe-2 .subscribe-form input[type=email]::-webkit-input-placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-2);
}
.widget-subscribe-2 .subscribe-form input[type=email]::-moz-placeholder {
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-2);
}
.widget-subscribe-2 .subscribe-form input[type=email]:-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-2);
}
.widget-subscribe-2 .subscribe-form input[type=email]::-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-2);
}
.widget-subscribe-2 .subscribe-form input[type=email]::placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-2);
}
.widget-subscribe-2 .subscribe-form input[type=email]:focus {
  outline-color: var(--tj-color-theme-primary);
}
.widget-subscribe-2 .subscribe-form button::before {
  border-color: var(--tj-color-theme-dark-4);
}
.widget-subscribe-2 .subscribe-form input[type=checkbox] {
  border: 1px solid var(--tj-color-text-body-2);
}
.widget-subscribe-2 .subscribe-form input[type=checkbox]::before {
  color: var(--tj-color-theme-dark);
}
.widget-subscribe-2 .subscribe-form input[type=checkbox]:checked {
  background-color: var(--tj-color-common-white);
  border-color: var(--tj-color-common-white);
}
.widget-subscribe-2 .subscribe-form label {
  color: var(--tj-color-text-body-2);
}
.widget-subscribe-2 .subscribe-form label a {
  color: var(--tj-color-common-white);
}
.widget-subscribe-2 .subscribe-form label a:hover {
  color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .widget-subscribe-2 .subscribe-form {
    margin-top: 0;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .widget-subscribe-2 {
    max-width: 760px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .widget-subscribe-2 {
    padding: 30px 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .widget-subscribe-2 {
    max-width: 100%;
    -webkit-margin-start: 0;
            margin-inline-start: 0;
    margin-top: 30px;
    padding: 30px 20px;
    gap: 0;
  }
}

.tj-copyright-area-3 {
  background-color: var(--tj-color-theme-primary);
}
.tj-copyright-area-3 .copyright-content-area {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 25px 0;
}
.tj-copyright-area-3 .copyright-text p {
  color: var(--tj-color-common-white);
}
.tj-copyright-area-3 .copyright-text a {
  color: var(--tj-color-common-white);
}
.tj-copyright-area-3 .copyright-text a:hover {
  color: var(--tj-color-theme-bg);
}

/* !END: Theme Footer CSS */
/**----------------------------------------
START: Theme Search CSS
----------------------------------------*/
.search_popup {
  position: absolute;
  top: 101%;
  inset-inline-start: 0;
  width: 100%;
  height: auto;
  background-color: var(--tj-color-common-white);
  padding: 80px 0;
  -webkit-transform: translateY(calc(-100% - 200px));
  -ms-transform: translateY(calc(-100% - 200px));
  transform: translateY(calc(-100% - 200px));
  -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  z-index: 10;
  border-radius: 12px;
}
.search_popup .search_close {
  position: absolute;
  top: 36px;
  inset-inline-end: 36px;
}
.search_popup .search_close .search_close_btn {
  font-size: 24px;
  color: var(--tj-color-theme-dark);
}
.search_popup .search_close .search_close_btn svg {
  width: 24px;
  height: 24px;
  -webkit-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}
.search_popup .search_close .search_close_btn svg path {
  fill: var(--tj-color-theme-dark);
}
.search_popup .search_close .search_close_btn svg:hover {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.search_popup .search_close .search_close_btn svg:hover path {
  fill: var(--tj-color-theme-primary);
}
.search_popup.search-opened {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.search_popup.search-opened .search_form .search_input {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.search_popup.search-opened .search_form .search_input::after {
  width: 100%;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.search_popup .logo {
  max-width: 150px;
  width: 100%;
  position: absolute;
  inset-inline-start: 36px;
  top: 36px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .search_popup {
    display: none;
  }
}

.tj_search_wrapper {
  min-height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.tj_search_wrapper .search_form {
  width: 100%;
}
.tj_search_wrapper .search_form form .search_input {
  position: relative;
  z-index: 1;
}
.tj_search_wrapper .search_form form .search_input .search-box {
  position: relative;
  z-index: 1;
}
.tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]),
.tj_search_wrapper .search_form form .search_input .search-box input[type=text] {
  width: 100%;
  height: 65px;
  font-size: 20px;
  font-family: var(--tj-ff-body);
  color: var(--tj-color-text-body);
  border-color: var(--tj-color-border-1);
  background: transparent;
  padding: 16px 90px 16px 24px;
  border-radius: 10px;
}
.tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-webkit-input-placeholder, .tj_search_wrapper .search_form form .search_input .search-box input[type=text]::-webkit-input-placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 20px;
  color: var(--tj-color-text-body);
}
.tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-moz-placeholder, .tj_search_wrapper .search_form form .search_input .search-box input[type=text]::-moz-placeholder {
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 20px;
  color: var(--tj-color-text-body);
}
.tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):-ms-input-placeholder, .tj_search_wrapper .search_form form .search_input .search-box input[type=text]:-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 20px;
  color: var(--tj-color-text-body);
}
.tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .tj_search_wrapper .search_form form .search_input .search-box input[type=text]::-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 20px;
  color: var(--tj-color-text-body);
}
.tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::placeholder,
.tj_search_wrapper .search_form form .search_input .search-box input[type=text]::placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 20px;
  color: var(--tj-color-text-body);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-webkit-input-placeholder, .tj_search_wrapper .search_form form .search_input .search-box input[type=text]::-webkit-input-placeholder {
    font-size: 20px;
  }
  .tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-moz-placeholder, .tj_search_wrapper .search_form form .search_input .search-box input[type=text]::-moz-placeholder {
    font-size: 20px;
  }
  .tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):-ms-input-placeholder, .tj_search_wrapper .search_form form .search_input .search-box input[type=text]:-ms-input-placeholder {
    font-size: 20px;
  }
  .tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .tj_search_wrapper .search_form form .search_input .search-box input[type=text]::-ms-input-placeholder {
    font-size: 20px;
  }
  .tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::placeholder,
  .tj_search_wrapper .search_form form .search_input .search-box input[type=text]::placeholder {
    font-size: 20px;
  }
}
.tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):focus,
.tj_search_wrapper .search_form form .search_input .search-box input[type=text]:focus {
  border-color: var(--tj-color-theme-primary);
}
.tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):focus + button,
.tj_search_wrapper .search_form form .search_input .search-box input[type=text]:focus + button {
  border-color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]),
  .tj_search_wrapper .search_form form .search_input .search-box input[type=text] {
    font-size: 20px;
  }
}
.tj_search_wrapper .search_form form .search_input .search-box button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  max-width: 60px;
  font-size: 25px;
  color: var(--tj-color-theme-primary);
  width: 100%;
  height: 100%;
}
.tj_search_wrapper .search_form form .search_input .search-box button::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 18px;
  height: 30px;
  -webkit-border-start: 1px solid var(--tj-color-border-1);
          border-inline-start: 1px solid var(--tj-color-border-1);
}

.search-popup-overlay {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(12, 30, 33, 0.01);
  z-index: 99;
  -webkit-transform: translateY(calc(-100% - 80px));
  -ms-transform: translateY(calc(-100% - 80px));
  transform: translateY(calc(-100% - 80px));
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.search-popup-overlay.search-popup-overlay-open {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/* !END: Theme Search CSS */
/* !START: hamburger CSS */
.hamburger-area {
  position: fixed;
  inset-inline-end: -490px;
  top: 15px;
  width: 450px;
  height: calc(100% - 30px);
  -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
          box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  z-index: 9999;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: scroll;
  border-radius: 12px;
}
.hamburger-area::-webkit-scrollbar {
  display: none;
}
.hamburger-area.opened {
  inset-inline-end: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .hamburger-area.opened {
    inset-inline-end: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .hamburger-area {
    top: 0;
    height: 100%;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
}
@media (max-width: 575px) {
  .hamburger-area {
    width: 320px;
  }
}
.hamburger_bg {
  background-color: var(--tj-color-theme-dark);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: -1;
  border-start-start-radius: 12px;
  border-end-start-radius: 12px;
}
.hamburger_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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  padding: 40px;
  overflow: auto;
  height: 100%;
}
.hamburger_wrapper::before {
  content: "";
  position: absolute;
  top: 3%;
  inset-inline-end: 3%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--tj-color-theme-primary);
  -webkit-filter: blur(50px);
  filter: blur(50px);
  opacity: 0.26;
  z-index: -1;
  backdrop-filter: blur(10px);
}
@media (max-width: 575px) {
  .hamburger_wrapper {
    padding: 40px 20px;
  }
}
.hamburger_top {
  margin-bottom: 30px;
}
.hamburger_close_btn {
  display: inline-block;
  font-size: 35px;
  line-height: 1;
  color: var(--tj-color-common-white);
}
@media (max-width: 575px) {
  .hamburger_close_btn {
    font-size: 30px;
  }
}
.hamburger_close_btn:hover {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  color: var(--tj-color-theme-bg);
}
.hamburger_search {
  position: relative;
  margin-bottom: 30px;
}
.hamburger_search select,
.hamburger_search .nice-select,
.hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.hamburger_search input {
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 40px 0 16px;
  background: var(--tj-color-common-white);
  border: none;
  outline: none;
  font-size: 18px;
  font-family: var(--tj-ff-body);
  color: var(--tj-color-text-body);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 10px;
}
.hamburger_search select::-webkit-input-placeholder, .hamburger_search .nice-select::-webkit-input-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-webkit-input-placeholder, .hamburger_search input::-webkit-input-placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.hamburger_search select::-moz-placeholder, .hamburger_search .nice-select::-moz-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-moz-placeholder, .hamburger_search input::-moz-placeholder {
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.hamburger_search select:-ms-input-placeholder, .hamburger_search .nice-select:-ms-input-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox]):-ms-input-placeholder, .hamburger_search input:-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.hamburger_search select::-ms-input-placeholder, .hamburger_search .nice-select::-ms-input-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .hamburger_search input::-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.hamburger_search select::placeholder,
.hamburger_search .nice-select::placeholder,
.hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder,
.hamburger_search input::placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.hamburger_search button {
  position: absolute;
  height: 58px;
  width: 58px;
  top: 50%;
  inset-inline-end: 0;
  font-size: 24px;
  color: var(--tj-color-theme-dark);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-border-start: 1px solid var(--tj-color-border-1);
          border-inline-start: 1px solid var(--tj-color-border-1);
}
.hamburger_menu .mean-container .mean-bar {
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 30px;
}
.hamburger_menu .mean-container .mean-bar * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.hamburger_menu .mean-nav {
  background: transparent;
  margin-top: 0;
  overflow: hidden;
}
.hamburger_menu .mean-nav > ul {
  display: block !important;
}
.hamburger_menu .mean-nav > ul > li:first-child > a {
  border-top: none;
}
.hamburger_menu .mean-nav ul li {
  position: relative;
}
.hamburger_menu .mean-nav ul li a {
  color: var(--tj-color-common-white);
  width: 100%;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.5px;
  font-family: var(--tj-ff-body);
  font-weight: var(--tj-fw-medium);
  text-transform: capitalize;
  padding: 18px 0;
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}
.hamburger_menu .mean-nav ul li a:hover {
  color: var(--tj-color-theme-primary);
}
.hamburger_menu .mean-nav ul li a.mean-expand {
  padding: 0;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  inset-inline-end: 0;
  top: 12px;
  -webkit-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}
.hamburger_menu .mean-nav ul li a.mean-expand:hover {
  color: var(--tj-color-common-white);
}
.hamburger_menu .mean-nav ul li a.mean-expand i {
  font-size: 15px;
}
.hamburger_menu .mean-nav ul li a.mean-expand.mean-clicked {
  color: var(--tj-color-theme-primary);
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.hamburger_menu .mean-nav ul li a.mean-expand.mean-clicked i {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.hamburger_menu .mean-nav ul li .sub-menu li {
  -webkit-padding-start: 25px;
          padding-inline-start: 25px;
  position: relative;
}
.hamburger_menu .mean-nav ul li .sub-menu li a {
  width: 100%;
  padding: 18px 0;
}
.hamburger_menu .mean-nav ul li .sub-menu li a.mean-expand {
  padding: 0;
  width: 30px;
}
.hamburger_menu .mean-nav ul li.dropdown-opened > a {
  color: var(--tj-color-theme-primary);
}

.tj-offcanvas-area {
  position: fixed;
  inset-inline-end: -490px;
  top: 15px;
  width: 470px;
  height: calc(100% - 30px);
  -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
          box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  z-index: 9999;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: scroll;
  border-start-start-radius: 12px;
  border-end-start-radius: 12px;
  border-radius: 12px;
}
.tj-offcanvas-area::-webkit-scrollbar {
  display: none;
}
.tj-offcanvas-area.opened {
  inset-inline-end: 15px;
}

.offcanvas-text {
  margin-bottom: 40px;
}
.offcanvas-text p {
  color: var(--tj-color-text-body-2);
  margin-bottom: 0;
}

.hamburger-search-area {
  margin-bottom: 45px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .hamburger-search-area {
    margin-bottom: 30px;
  }
}

.hamburger-title {
  color: var(--tj-color-common-white);
  font-size: 22px;
  line-height: 1;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}

.hamburger-infos {
  margin-bottom: 45px;
}
.hamburger-infos .contact-info .contact-item {
  padding: 15px 0 10px 0;
}
.hamburger-infos .contact-info .contact-item:first-child {
  padding-top: 0;
}

.hamburger_logo .mobile_logo {
  display: inline-block;
  max-width: 136px;
  width: 100%;
}

.menu-bar button {
  height: 25px;
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  cursor: pointer;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}
.menu-bar button span {
  height: 3px;
  width: 35px;
  display: block;
  background: var(--tj-color-common-white);
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.menu-bar button span:nth-child(2) {
  width: 40px;
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
}
.menu-bar button span:nth-child(3) {
  width: 30px;
}
.menu-bar button span:nth-child(4) {
  position: absolute;
  top: -8px;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  width: 3px;
  height: 0;
  -webkit-transition: height 400ms;
  transition: height 400ms;
}
.menu-bar.style-2 button span {
  background: var(--tj-color-heading-primary);
}
.menu-bar.menu-bar-toggeled button {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}
.menu-bar.menu-bar-toggeled button span:nth-child(1) {
  width: 0;
}
.menu-bar.menu-bar-toggeled button span:nth-child(3) {
  width: 0;
}
.menu-bar.menu-bar-toggeled button span:nth-child(4) {
  height: 40px;
  -webkit-transition: height 200ms ease;
  transition: height 200ms ease;
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .menu-bar {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }
}

.body-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  inset-inline-start: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  backdrop-filter: blur(10px);
}
.body-overlay.opened {
  opacity: 1;
  visibility: visible;
}

/* !END: hamburger CSS */
/**----------------------------------------
START: Preloader CSS
----------------------------------------*/
.tj-preloader {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  z-index: 100000000;
  color: #fdfdf9;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.tj-preloader.is-loading .tj-preloader-ball-inner,
.tj-preloader.is-loading .tj-preloader-ball-shadow {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.tj-preloader.is-loaded {
  pointer-events: none;
}

.tj-preloader .tj-preloader-overlay {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  z-index: 99999999;
  opacity: 1;
  -webkit-animation: tj-fade-out 2s forwards;
          animation: tj-fade-out 2s forwards;
}

@-webkit-keyframes tj-fade-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes tj-fade-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.tj-preloader .tj-preloader-inner {
  width: 100%;
  height: 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;
}

.tj-preloader .tj-preloader-ball-wrap {
  gap: 10px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  inset-inline-start: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: translateX(16px);
      -ms-transform: translateX(16px);
          transform: translateX(16px);
}

@media only screen and (min-width: 1025px) {
  .tj-preloader .tj-preloader-ball-wrap {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
}
.tj-preloader .tj-preloader-ball-inner-wrap {
  position: absolute;
  width: 10px;
  height: 100%;
  top: 50%;
  inset-inline-start: -16px;
  -webkit-transform: translate(-100%, -50%);
      -ms-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
  z-index: 10000;
}
@media only screen and (min-width: 1025px) {
  .tj-preloader .tj-preloader-ball-inner-wrap {
    inset-inline-start: -30px;
  }
}

.tj-preloader .tj-preloader-ball-shadow {
  position: absolute;
  width: 16px;
  height: 4px;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #00ffc2;
  bottom: 0;
  border-radius: 50%;
  -webkit-filter: blur(12px);
          filter: blur(12px);
  -webkit-box-shadow: 0 4px 20px 0 #20e7b7;
          box-shadow: 0 4px 20px 0 #20e7b7;
  -webkit-transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation: tj-shadow-blur 1s linear infinite;
          animation: tj-shadow-blur 1s linear infinite;
}

.tj-preloader .tj-preloader-ball-inner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00ffc2;
  -webkit-animation: tj-bounce-anim 1s linear infinite;
          animation: tj-bounce-anim 1s linear infinite;
  -webkit-box-shadow: 0 0 12px 0 #fdfdf9;
          box-shadow: 0 0 12px 0 #fdfdf9;
  -webkit-transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.tj-preloader.is-loaded .tj-preloader-ball-shadow {
  display: none;
}

.tj-preloader.is-loaded .tj-preloader-ball-inner {
  -webkit-animation: fadeLeftToRight 0.7s linear;
          animation: fadeLeftToRight 0.7s linear;
}

.tj-preloader .tj-preloader-ball {
  position: absolute;
  width: 14px;
  height: 14px;
  bottom: 50%;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  border-radius: 50%;
  background-color: rgba(0, 255, 194, 0.1);
  -webkit-box-shadow: 0 0 20px 0 #20e7b7;
          box-shadow: 0 0 20px 0 #20e7b7;
  -webkit-filter: blur(10px);
          filter: blur(10px);
}

.tj-preloader .tj-preloader-text {
  font-size: 20px;
  position: relative;
  letter-spacing: 0;
  -webkit-transform: translateY(-0.03em);
      -ms-transform: translateY(-0.03em);
          transform: translateY(-0.03em);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-weight: var(--tj-fw-sbold);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-preloader .tj-preloader-text {
    font-size: 16px;
  }
}

.tj-preloader.is-loaded .tj-preloader-text {
  opacity: 0;
  visibility: hidden;
}

#tj-weave-anim span {
  position: relative;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: inline-block;
  -webkit-animation: tj-weave-anim 1.15s ease infinite;
          animation: tj-weave-anim 1.15s ease infinite;
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#tj-weave-anim span:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
#tj-weave-anim span:nth-child(2) {
  -webkit-animation-delay: 0.05s;
          animation-delay: 0.05s;
}
#tj-weave-anim span:nth-child(3) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
#tj-weave-anim span:nth-child(4) {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}
#tj-weave-anim span:nth-child(5) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
#tj-weave-anim span:nth-child(6) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
#tj-weave-anim span:nth-child(7) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
#tj-weave-anim span:nth-child(8) {
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
#tj-weave-anim span:nth-child(9) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
#tj-weave-anim span:nth-child(10) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}
#tj-weave-anim span:nth-child(11) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#tj-weave-anim span:nth-child(12) {
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
}
#tj-weave-anim span:nth-child(13) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
#tj-weave-anim span:nth-child(14) {
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
#tj-weave-anim span:nth-child(15) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
#tj-weave-anim span:nth-child(16) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
#tj-weave-anim span:nth-child(17) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
#tj-weave-anim span:nth-child(18) {
  -webkit-animation-delay: 0.85s;
          animation-delay: 0.85s;
}
#tj-weave-anim span:nth-child(19) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
#tj-weave-anim span:nth-child(20) {
  -webkit-animation-delay: 0.95s;
          animation-delay: 0.95s;
}
#tj-weave-anim span:nth-child(21) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
#tj-weave-anim span:nth-child(22) {
  -webkit-animation-delay: 1.05s;
          animation-delay: 1.05s;
}
#tj-weave-anim span:nth-child(23) {
  -webkit-animation-delay: 1.15s;
          animation-delay: 1.15s;
}

@-webkit-keyframes tj-shadow-blur {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    -webkit-transform: translate(-50%) scale(0.6);
            transform: translate(-50%) scale(0.6);
    opacity: 0.4;
  }
  30% {
    -webkit-filter: blur(2px);
            filter: blur(2px);
    -webkit-transform: translate(-50%, -0.5rem) scale(1);
            transform: translate(-50%, -0.5rem) scale(1);
    opacity: 1;
  }
  to {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    -webkit-transform: translate(-50%) scale(0.6);
            transform: translate(-50%) scale(0.6);
    opacity: 0.4;
  }
}

@keyframes tj-shadow-blur {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    -webkit-transform: translate(-50%) scale(0.6);
            transform: translate(-50%) scale(0.6);
    opacity: 0.4;
  }
  30% {
    -webkit-filter: blur(2px);
            filter: blur(2px);
    -webkit-transform: translate(-50%, -0.5rem) scale(1);
            transform: translate(-50%, -0.5rem) scale(1);
    opacity: 1;
  }
  to {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    -webkit-transform: translate(-50%) scale(0.6);
            transform: translate(-50%) scale(0.6);
    opacity: 0.4;
  }
}
@-webkit-keyframes fadeLeftToRight {
  0% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-transform: translate(0) scale(1);
            transform: translate(0) scale(1);
    opacity: 1;
  }
  30% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-transform: translate(-3000%, 0) scale(1);
            transform: translate(-3000%, 0) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-transform: translate(-2000%, 0) scale(1);
            transform: translate(-2000%, 0) scale(1);
    opacity: 1;
  }
  60% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-transform: translate(0%, 0) scale(1);
            transform: translate(0%, 0) scale(1);
    opacity: 1;
  }
  to {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    -webkit-transform: translate(1000%, 0) scale(7);
            transform: translate(1000%, 0) scale(7);
    opacity: 0.4;
  }
}
@keyframes fadeLeftToRight {
  0% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-transform: translate(0) scale(1);
            transform: translate(0) scale(1);
    opacity: 1;
  }
  30% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-transform: translate(-3000%, 0) scale(1);
            transform: translate(-3000%, 0) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-transform: translate(-2000%, 0) scale(1);
            transform: translate(-2000%, 0) scale(1);
    opacity: 1;
  }
  60% {
    -webkit-filter: blur(0);
            filter: blur(0);
    -webkit-transform: translate(0%, 0) scale(1);
            transform: translate(0%, 0) scale(1);
    opacity: 1;
  }
  to {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    -webkit-transform: translate(1000%, 0) scale(7);
            transform: translate(1000%, 0) scale(7);
    opacity: 0.4;
  }
}
@-webkit-keyframes tj-bounce-anim {
  0% {
    -webkit-transform: translateY(calc(-50% - 1rem)) scaleX(1.4);
            transform: translateY(calc(-50% - 1rem)) scaleX(1.4);
  }
  3% {
    -webkit-transform: translateY(calc(-50% - 0.95rem)) scale(1.1, 1.05);
            transform: translateY(calc(-50% - 0.95rem)) scale(1.1, 1.05);
  }
  5% {
    -webkit-transform: translateY(calc(-50% - 0.9rem)) scale(1.2, 1.1);
            transform: translateY(calc(-50% - 0.9rem)) scale(1.2, 1.1);
  }
  8% {
    -webkit-transform: translateY(calc(-50% - 0.8rem)) scale(0.98, 1.15);
            transform: translateY(calc(-50% - 0.8rem)) scale(0.98, 1.15);
  }
  12% {
    -webkit-transform: translateY(calc(-50% - 0.7rem)) scale(0.95, 1.2);
            transform: translateY(calc(-50% - 0.7rem)) scale(0.95, 1.2);
  }
  16% {
    -webkit-transform: translateY(calc(-50% - 0.5rem)) scale(0.92, 1.25);
            transform: translateY(calc(-50% - 0.5rem)) scale(0.92, 1.25);
  }
  20% {
    -webkit-transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4);
            transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4);
  }
  24% {
    -webkit-transform: translateY(calc(-50% + 0.4rem)) scale(0.9, 1.7);
            transform: translateY(calc(-50% + 0.4rem)) scale(0.9, 1.7);
  }
  26% {
    -webkit-transform: translateY(calc(-50% + 0.8rem)) scale(0.9, 1.4);
            transform: translateY(calc(-50% + 0.8rem)) scale(0.9, 1.4);
  }
  28% {
    -webkit-transform: translateY(calc(-50% + 0.95rem)) scale(1.2, 0.7);
            transform: translateY(calc(-50% + 0.95rem)) scale(1.2, 0.7);
  }
  30% {
    -webkit-transform: translateY(calc(-50% + 1rem)) scale(1.5, 0.3);
            transform: translateY(calc(-50% + 1rem)) scale(1.5, 0.3);
  }
  32% {
    -webkit-transform: translateY(calc(-50% + 0.8rem)) scale(1.4, 0.4);
            transform: translateY(calc(-50% + 0.8rem)) scale(1.4, 0.4);
  }
  36% {
    -webkit-transform: translateY(calc(-50% + 0.5rem)) scale(1.2, 0.8);
            transform: translateY(calc(-50% + 0.5rem)) scale(1.2, 0.8);
  }
  42% {
    -webkit-transform: translateY(calc(-50% + 0.2rem)) scaleY(1.2);
            transform: translateY(calc(-50% + 0.2rem)) scaleY(1.2);
  }
  48% {
    -webkit-transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4);
            transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4);
  }
  54% {
    -webkit-transform: translateY(calc(-50% - 0.3rem)) scale(0.92, 1.3);
            transform: translateY(calc(-50% - 0.3rem)) scale(0.92, 1.3);
  }
  62% {
    -webkit-transform: translateY(calc(-50% - 0.5rem)) scale(0.95, 1.2);
            transform: translateY(calc(-50% - 0.5rem)) scale(0.95, 1.2);
  }
  68% {
    -webkit-transform: translateY(calc(-50% - 0.6rem)) scale(0.97, 1.15);
            transform: translateY(calc(-50% - 0.6rem)) scale(0.97, 1.15);
  }
  75% {
    -webkit-transform: translateY(calc(-50% - 0.7rem)) scale(0.98, 1.1);
            transform: translateY(calc(-50% - 0.7rem)) scale(0.98, 1.1);
  }
  80% {
    -webkit-transform: translateY(calc(-50% - 0.8rem)) scale(0.99, 1.08);
            transform: translateY(calc(-50% - 0.8rem)) scale(0.99, 1.08);
  }
  85% {
    -webkit-transform: translateY(calc(-50% - 0.9rem)) scaleY(1.05);
            transform: translateY(calc(-50% - 0.9rem)) scaleY(1.05);
  }
  90% {
    -webkit-transform: translateY(calc(-50% - 0.95rem)) scale(1.2, 1.03);
            transform: translateY(calc(-50% - 0.95rem)) scale(1.2, 1.03);
  }
  95% {
    -webkit-transform: translateY(calc(-50% - 0.98rem)) scale(1.1, 1.01);
            transform: translateY(calc(-50% - 0.98rem)) scale(1.1, 1.01);
  }
  to {
    -webkit-transform: translateY(calc(-50% - 1rem)) scaleX(1.4);
            transform: translateY(calc(-50% - 1rem)) scaleX(1.4);
  }
}
@keyframes tj-bounce-anim {
  0% {
    -webkit-transform: translateY(calc(-50% - 1rem)) scaleX(1.4);
            transform: translateY(calc(-50% - 1rem)) scaleX(1.4);
  }
  3% {
    -webkit-transform: translateY(calc(-50% - 0.95rem)) scale(1.1, 1.05);
            transform: translateY(calc(-50% - 0.95rem)) scale(1.1, 1.05);
  }
  5% {
    -webkit-transform: translateY(calc(-50% - 0.9rem)) scale(1.2, 1.1);
            transform: translateY(calc(-50% - 0.9rem)) scale(1.2, 1.1);
  }
  8% {
    -webkit-transform: translateY(calc(-50% - 0.8rem)) scale(0.98, 1.15);
            transform: translateY(calc(-50% - 0.8rem)) scale(0.98, 1.15);
  }
  12% {
    -webkit-transform: translateY(calc(-50% - 0.7rem)) scale(0.95, 1.2);
            transform: translateY(calc(-50% - 0.7rem)) scale(0.95, 1.2);
  }
  16% {
    -webkit-transform: translateY(calc(-50% - 0.5rem)) scale(0.92, 1.25);
            transform: translateY(calc(-50% - 0.5rem)) scale(0.92, 1.25);
  }
  20% {
    -webkit-transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4);
            transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4);
  }
  24% {
    -webkit-transform: translateY(calc(-50% + 0.4rem)) scale(0.9, 1.7);
            transform: translateY(calc(-50% + 0.4rem)) scale(0.9, 1.7);
  }
  26% {
    -webkit-transform: translateY(calc(-50% + 0.8rem)) scale(0.9, 1.4);
            transform: translateY(calc(-50% + 0.8rem)) scale(0.9, 1.4);
  }
  28% {
    -webkit-transform: translateY(calc(-50% + 0.95rem)) scale(1.2, 0.7);
            transform: translateY(calc(-50% + 0.95rem)) scale(1.2, 0.7);
  }
  30% {
    -webkit-transform: translateY(calc(-50% + 1rem)) scale(1.5, 0.3);
            transform: translateY(calc(-50% + 1rem)) scale(1.5, 0.3);
  }
  32% {
    -webkit-transform: translateY(calc(-50% + 0.8rem)) scale(1.4, 0.4);
            transform: translateY(calc(-50% + 0.8rem)) scale(1.4, 0.4);
  }
  36% {
    -webkit-transform: translateY(calc(-50% + 0.5rem)) scale(1.2, 0.8);
            transform: translateY(calc(-50% + 0.5rem)) scale(1.2, 0.8);
  }
  42% {
    -webkit-transform: translateY(calc(-50% + 0.2rem)) scaleY(1.2);
            transform: translateY(calc(-50% + 0.2rem)) scaleY(1.2);
  }
  48% {
    -webkit-transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4);
            transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4);
  }
  54% {
    -webkit-transform: translateY(calc(-50% - 0.3rem)) scale(0.92, 1.3);
            transform: translateY(calc(-50% - 0.3rem)) scale(0.92, 1.3);
  }
  62% {
    -webkit-transform: translateY(calc(-50% - 0.5rem)) scale(0.95, 1.2);
            transform: translateY(calc(-50% - 0.5rem)) scale(0.95, 1.2);
  }
  68% {
    -webkit-transform: translateY(calc(-50% - 0.6rem)) scale(0.97, 1.15);
            transform: translateY(calc(-50% - 0.6rem)) scale(0.97, 1.15);
  }
  75% {
    -webkit-transform: translateY(calc(-50% - 0.7rem)) scale(0.98, 1.1);
            transform: translateY(calc(-50% - 0.7rem)) scale(0.98, 1.1);
  }
  80% {
    -webkit-transform: translateY(calc(-50% - 0.8rem)) scale(0.99, 1.08);
            transform: translateY(calc(-50% - 0.8rem)) scale(0.99, 1.08);
  }
  85% {
    -webkit-transform: translateY(calc(-50% - 0.9rem)) scaleY(1.05);
            transform: translateY(calc(-50% - 0.9rem)) scaleY(1.05);
  }
  90% {
    -webkit-transform: translateY(calc(-50% - 0.95rem)) scale(1.2, 1.03);
            transform: translateY(calc(-50% - 0.95rem)) scale(1.2, 1.03);
  }
  95% {
    -webkit-transform: translateY(calc(-50% - 0.98rem)) scale(1.1, 1.01);
            transform: translateY(calc(-50% - 0.98rem)) scale(1.1, 1.01);
  }
  to {
    -webkit-transform: translateY(calc(-50% - 1rem)) scaleX(1.4);
            transform: translateY(calc(-50% - 1rem)) scaleX(1.4);
  }
}
@-webkit-keyframes tj-weave-anim {
  0% {
    -webkit-transform: translate3D(0, 0, 0) scale(1) rotateY(0);
            transform: translate3D(0, 0, 0) scale(1) rotateY(0);
  }
  12% {
    -webkit-transform: translate3D(2px, -2px, 2px) scale(1.16) rotateY(6deg);
            transform: translate3D(2px, -2px, 2px) scale(1.16) rotateY(6deg);
  }
  24% {
    -webkit-transform: translate3D(0, 0, 0) scale(1) rotateY(0);
            transform: translate3D(0, 0, 0) scale(1) rotateY(0);
  }
  36% {
    -webkit-transform: translate3D(0, 0, 0) scale(1);
            transform: translate3D(0, 0, 0) scale(1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes tj-weave-anim {
  0% {
    -webkit-transform: translate3D(0, 0, 0) scale(1) rotateY(0);
            transform: translate3D(0, 0, 0) scale(1) rotateY(0);
  }
  12% {
    -webkit-transform: translate3D(2px, -2px, 2px) scale(1.16) rotateY(6deg);
            transform: translate3D(2px, -2px, 2px) scale(1.16) rotateY(6deg);
  }
  24% {
    -webkit-transform: translate3D(0, 0, 0) scale(1) rotateY(0);
            transform: translate3D(0, 0, 0) scale(1) rotateY(0);
  }
  36% {
    -webkit-transform: translate3D(0, 0, 0) scale(1);
            transform: translate3D(0, 0, 0) scale(1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/* !END: Preloader CSS */
/**----------------------------------------
START: Error 404 CSS
----------------------------------------*/
.tj-error-section {
  padding: 150px 0 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-error-section {
    padding: 100px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-error-section {
    padding: 70px 0;
  }
}
.tj-error-content {
  position: relative;
  max-width: 900px;
  width: 100%;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  z-index: 1;
}
.tj-error-content .error-img {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 800px;
  margin-bottom: 45px;
}
@media (max-width: 575px) {
  .tj-error-content .error-img {
    padding: 0 20px;
    margin-bottom: 30px;
  }
}
.tj-error-content .error-title {
  font-size: var(--tj-fs-h1);
  margin: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-error-content .error-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-error-content .error-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-error-content .error-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-error-content .error-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tj-error-content .error-title {
    font-size: 45px;
  }
}
@media (max-width: 575px) {
  .tj-error-content .error-title {
    font-size: 40px;
  }
}
.tj-error-content .error-desc {
  max-width: 600px;
  margin: 20px auto 0;
}
.tj-error-content .error-btn {
  margin-top: 35px;
}
@media (max-width: 575px) {
  .tj-error-content .error-btn {
    margin-top: 25px;
  }
}

/* !END: Error 404 CSS */
/**----------------------------------------
START: Back to top CSS
----------------------------------------*/
#tj-back-to-top {
  height: 60px;
  width: 60px;
  background-color: var(--tj-color-common-white);
  border-radius: 50%;
  position: fixed;
  bottom: 30px;
  inset-inline-end: 40px;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  display: grid;
  place-items: center;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 100;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  #tj-back-to-top {
    height: 50px;
    width: 50px;
  }
}
#tj-back-to-top.active {
  bottom: 40px;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  visibility: visible;
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running scrollToTop;
          animation: 500ms ease-in-out 0s normal none 1 running scrollToTop;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background: var(--tj-color-theme-primary);
}
#tj-back-to-top .return {
  visibility: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#tj-back-to-top-percentage {
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  background-color: var(--tj-color-common-white);
  color: var(--tj-color-theme-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: var(--tj-fw-sbold);
  -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 15px 0px;
          box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 15px 0px;
}
#tj-back-to-top-percentage i {
  font-size: var(--tj-fs-h5);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #tj-back-to-top {
    inset-inline-end: 30px;
  }
  #tj-back-to-top.active {
    bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  #tj-back-to-top {
    bottom: 20px;
    inset-inline-end: 20px;
  }
  #tj-back-to-top.active {
    bottom: 20px;
  }
}

@-webkit-keyframes scrollToTop {
  0% {
    -webkit-transform: translate3d(0, 80%, 0);
            transform: translate3d(0, 80%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

@keyframes scrollToTop {
  0% {
    -webkit-transform: translate3d(0, 80%, 0);
            transform: translate3d(0, 80%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}
/* !END: Back to top CSS */
/**----------------------------------------
START: Theme Footer CSS
----------------------------------------*/
.tj-footer-section.footer-4 {
  padding-top: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.footer-4 {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.footer-4 {
    padding-top: 70px;
  }
}

.footer-cta .cta-title {
  max-width: 580px;
  font-size: 74px;
  line-height: 1.108;
  margin-bottom: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-cta .cta-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-cta .cta-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-cta .cta-title {
    font-size: 50px;
  }
}
@media (max-width: 575px) {
  .footer-cta .cta-title {
    font-size: 43px;
    margin-bottom: 25px;
  }
}
.footer-cta .cta-btn {
  background-color: var(--tj-color-theme-primary);
  border-radius: 50px;
  padding: 10px;
  -webkit-padding-end: 25px;
          padding-inline-end: 25px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 9px;
}
.footer-cta .cta-btn .customers ul li img {
  width: 48px;
  height: 48px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .footer-cta .cta-btn .customers ul li img {
    width: 40px;
    height: 40px;
  }
}
.footer-cta .cta-btn .btn-text {
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-sbold);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
  overflow: hidden;
}
.footer-cta .cta-btn .btn-text span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 1;
  text-shadow: 0 30px 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
.footer-cta .cta-btn .btn-text i {
  font-size: 20px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.footer-cta .cta-btn:hover .customers ul li:not(:first-child) {
  -webkit-margin-start: -12px;
          margin-inline-start: -12px;
}
.footer-cta .cta-btn:hover .btn-text span {
  -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
          transform: translateY(-30px);
}

.widget-subscribe-3 {
  background-color: var(--tj-color-theme-primary);
  padding: 40px 30px;
  border-radius: 12px;
}
.widget-subscribe-3 .title {
  color: var(--tj-color-common-white);
  margin-bottom: 25px;
  font-weight: var(--tj-fw-medium);
}
.widget-subscribe-3 .subscribe-form input[type=email] {
  background-color: var(--tj-color-common-white);
  border-radius: 50px;
  color: var(--tj-color-text-body-4);
  padding: 15px 180px 15px 25px;
  outline: 1px solid transparent;
}
@media (max-width: 575px) {
  .widget-subscribe-3 .subscribe-form input[type=email] {
    padding: 15px 25px 15px;
  }
}
.widget-subscribe-3 .subscribe-form input[type=email]::-webkit-input-placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-4);
}
.widget-subscribe-3 .subscribe-form input[type=email]::-moz-placeholder {
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-4);
}
.widget-subscribe-3 .subscribe-form input[type=email]:-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-4);
}
.widget-subscribe-3 .subscribe-form input[type=email]::-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-4);
}
.widget-subscribe-3 .subscribe-form input[type=email]::placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body-4);
}
.widget-subscribe-3 .subscribe-form input[type=email]:focus {
  outline-color: var(--tj-color-theme-primary);
}
.widget-subscribe-3 .subscribe-form button {
  width: auto;
  height: auto;
  top: 6px;
  inset-inline-end: 8px;
  font-size: 16px;
  font-weight: var(--tj-fw-sbold);
}
@media (max-width: 575px) {
  .widget-subscribe-3 .subscribe-form button {
    position: static;
    margin-top: 15px;
    background-color: var(--tj-color-common-white);
  }
  .widget-subscribe-3 .subscribe-form button .btn-text {
    color: var(--tj-color-heading-primary);
  }
}
.widget-subscribe-3 .subscribe-form button::before {
  display: none;
}
.widget-subscribe-3 .subscribe-form input[type=checkbox] {
  border: 1px solid var(--tj-color-grey-1);
}
.widget-subscribe-3 .subscribe-form input[type=checkbox]::before {
  color: var(--tj-color-common-white);
}
.widget-subscribe-3 .subscribe-form input[type=checkbox]:checked {
  background-color: var(--tj-color-theme-dark);
  border-color: var(--tj-color-theme-dark);
}
.widget-subscribe-3 .subscribe-form label {
  color: var(--tj-color-grey-1);
  margin-top: 15px;
}
.widget-subscribe-3 .subscribe-form label a {
  color: var(--tj-color-common-white);
}
.widget-subscribe-3 .subscribe-form label a:hover {
  color: var(--tj-color-theme-dark);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .widget-subscribe-3 .subscribe-form {
    margin-top: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .widget-subscribe-3 {
    padding: 30px 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .widget-subscribe-3 {
    margin-top: 30px;
    padding: 30px 20px;
  }
}
@media (max-width: 575px) {
  .widget-subscribe-3 {
    padding: 24px 20px 32px;
  }
}

.widget-contact.style-2 .title {
  color: var(--tj-color-heading-primary);
}
.widget-contact.style-2 .footer-contact-info .contact-item span {
  color: var(--tj-color-text-body);
}
.widget-contact.style-2 .footer-contact-info .contact-item a {
  color: var(--tj-color-heading-primary);
}
.widget-contact.style-2 .footer-contact-info .contact-item a:hover {
  color: var(--tj-color-theme-primary);
}

.tj-copyright-area-4 {
  background-color: var(--tj-color-theme-primary);
}
.tj-copyright-area-4 .copyright-content-area {
  padding: 25px 0;
}
.tj-copyright-area-4 .copyright-text p {
  color: var(--tj-color-common-white);
}
.tj-copyright-area-4 .copyright-text a {
  color: var(--tj-color-common-white);
  position: relative;
}
.tj-copyright-area-4 .copyright-text a::before {
  content: "";
  position: absolute;
  bottom: 2px;
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: 0;
  height: 1px;
  background-color: var(--tj-color-common-white);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.tj-copyright-area-4 .copyright-text a:hover {
  color: var(--tj-color-common-white);
}
.tj-copyright-area-4 .copyright-text a:hover::before {
  width: 100%;
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.tj-copyright-area-4 .social-links.style-2 ul li a:hover {
  background-color: var(--tj-color-theme-dark);
}
.tj-copyright-area-4 .social-links.style-2 ul li a:hover i {
  color: var(--tj-color-common-white);
}
.tj-copyright-area-4 .copyright-menu ul li::before {
  background: var(--tj-color-border-1);
}
.tj-copyright-area-4 .copyright-menu ul li a {
  color: var(--tj-color-grey-1);
}
.tj-copyright-area-4 .copyright-menu ul li a:hover {
  color: var(--tj-color-heading-primary);
}

/* !END: Theme Footer CSS */
/**----------------------------------------
START: Animation  CSS
----------------------------------------*/
.tj-anim-move-var-big {
  -webkit-animation-name: moveVarBig;
          animation-name: moveVarBig;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@-webkit-keyframes moveVarBig {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(150px);
            transform: translateY(150px);
  }
}

@keyframes moveVarBig {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(150px);
            transform: translateY(150px);
  }
}
.tj-anim-move-var-big-reverse {
  -webkit-animation-name: moveVarBigReverse;
          animation-name: moveVarBigReverse;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@-webkit-keyframes moveVarBigReverse {
  0% {
    -webkit-transform: translateY(150px);
            transform: translateY(150px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes moveVarBigReverse {
  0% {
    -webkit-transform: translateY(150px);
            transform: translateY(150px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.tj-zoom-in-out-anim {
  -webkit-animation-name: zoomInOutAnim;
          animation-name: zoomInOutAnim;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@-webkit-keyframes zoomInOutAnim {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}

@keyframes zoomInOutAnim {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
/* !END: Animation CSS */
/* cursor css  */
.cb-cursor {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 150;
  contain: layout style size;
  pointer-events: none;
  will-change: transform;
  -webkit-transition: opacity 0.3s, color 0.4s;
  transition: opacity 0.3s, color 0.4s;
}

.cb-cursor:before {
  content: "";
  position: absolute;
  top: -24px;
  inset-inline-start: -24px;
  display: block;
  width: 164px;
  height: 52px;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  border-radius: 100px;
  -webkit-transition: opacity 0.1s, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.1s, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.1s;
  transition: transform 0.3s ease-in-out, opacity 0.1s, -webkit-transform 0.3s ease-in-out;
}

.cb-cursor-text {
  position: absolute;
  top: -24px;
  inset-inline-start: -24px;
  width: 164px;
  height: 52px;
  line-height: 55px;
  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-transform: scale(0) rotate(10deg);
      -ms-transform: scale(0) rotate(10deg);
          transform: scale(0) rotate(10deg);
  opacity: 0;
  color: var(--tj-color-theme-dark);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
  font-weight: var(--tj-fw-sbold);
  -webkit-transition: opacity 0.4s, -webkit-transform 0.3s;
  transition: opacity 0.4s, -webkit-transform 0.3s;
  transition: opacity 0.4s, transform 0.3s;
  transition: opacity 0.4s, transform 0.3s, -webkit-transform 0.3s;
}

@supports (mix-blend-mode: exclusion) {
  .cb-cursor.-exclusion,
  .cb-cursor.-opaque {
    mix-blend-mode: exclusion;
  }
}
@supports (mix-blend-mode: exclusion) {
  .cb-cursor.-exclusion:before,
  .cb-cursor.-opaque:before {
    background: white;
  }
}
.cb-cursor.-normal,
.cb-cursor.-text {
  mix-blend-mode: normal;
}

.cb-cursor.-normal:before,
.cb-cursor.-text:before {
  background: currentColor;
}

.cb-cursor.-inverse {
  color: white;
}

.cb-cursor.-visible:before {
  -webkit-transform: scale(0.2);
      -ms-transform: scale(0.2);
          transform: scale(0.2);
}

.cb-cursor.-visible.-active:before {
  -webkit-transform: scale(0.23);
      -ms-transform: scale(0.23);
          transform: scale(0.23);
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

.cb-cursor.-pointer:before {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}

.cb-cursor.-text:before {
  background: var(--tj-color-common-white);
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.cb-cursor.-text .cb-cursor-text {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.cb-cursor.-text.-active:before {
  -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

/*----------------------------------------*/
/*  2.178 Range Slider css start
/*----------------------------------------*/
.ui-button-icon-only,
.ui-controlgroup-vertical .ui-controlgroup-item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.ui-checkboxradio-disabled,
.ui-state-disabled {
  pointer-events: none;
}

.ui-datepicker .ui-icon,
.ui-icon {
  text-indent: -99999px;
  background-repeat: no-repeat;
}

.ui-helper-reset,
.ui-menu {
  outline: 0;
  list-style: none;
}

.ui-helper-hidden,
.ui-resizable-autohide .ui-resizable-handle,
.ui-resizable-disabled .ui-resizable-handle {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
}

.ui-helper-clearfix:after,
.ui-helper-clearfix:before {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
}

.ui-front {
  z-index: 100;
}

.ui-state-disabled {
  cursor: default !important;
}

.ui-icon {
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.25em;
  position: relative;
  overflow: hidden;
}

.ui-widget-icon-block {
  inset-inline-start: 50%;
  -webkit-margin-start: -8px;
          margin-inline-start: -8px;
  display: block;
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
}

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0;
  padding: 0.5em 0.5em 0.5em 0.7em;
  font-size: 100%;
}

.ui-autocomplete,
.ui-menu .ui-menu {
  position: absolute;
}

.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  overflow: auto;
}

.ui-autocomplete {
  top: 0;
  inset-inline-start: 0;
  cursor: default;
}

.ui-menu {
  padding: 0;
  margin: 0;
  display: block;
}

.ui-button,
.ui-controlgroup {
  display: inline-block;
  vertical-align: middle;
}

.ui-button,
.ui-menu-icons,
.ui-resizable {
  position: relative;
}

.ui-menu .ui-menu-item {
  margin: 0;
  cursor: pointer;
  list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

.ui-menu .ui-menu-item-wrapper {
  position: relative;
  padding: 3px 1em 3px 0.4em;
}

.ui-menu .ui-menu-divider {
  margin: 5px 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0;
}

.ui-menu .ui-state-active,
.ui-menu .ui-state-focus {
  margin: -1px;
}

.ui-menu-icons .ui-menu-item-wrapper {
  -webkit-padding-start: 2em;
          padding-inline-start: 2em;
}

.ui-button,
.ui-controlgroup .ui-controlgroup-label {
  padding: 0.4em 1em;
}

.ui-menu .ui-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0.2em;
  margin: auto 0;
}

.ui-menu .ui-menu-icon {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.ui-button {
  line-height: normal;
  -webkit-margin-end: 0.1em;
          margin-inline-end: 0.1em;
  cursor: pointer;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: visible;
}

.ui-button,
.ui-button:active,
.ui-button:hover,
.ui-button:link,
.ui-button:visited {
  text-decoration: none;
}

.ui-button-icon-only {
  width: 2em;
  text-indent: -9999px;
  white-space: nowrap;
}

input.ui-button.ui-button-icon-only {
  text-indent: 0;
}

.ui-button-icon-only .ui-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  margin-top: -8px;
  -webkit-margin-start: -8px;
          margin-inline-start: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
  padding: 0;
  width: 2.1em;
  height: 2.1em;
  text-indent: -9999px;
  white-space: nowrap;
}

input.ui-button.ui-icon-notext .ui-icon {
  width: auto;
  height: auto;
  text-indent: 0;
  white-space: normal;
  padding: 0.4em 1em;
}

button.ui-button::-moz-focus-inner,
input.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ui-controlgroup > .ui-controlgroup-item {
  float: left;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}

.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus,
.ui-controlgroup > .ui-controlgroup-item:focus {
  z-index: 9999;
}

.ui-controlgroup-vertical > .ui-controlgroup-item {
  display: block;
  float: none;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: start;
}

.ui-controlgroup .ui-controlgroup-label span {
  font-size: 80%;
}

.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
  -webkit-border-start: none;
          border-inline-start: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
  border-top: none;
}

.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
  -webkit-border-end: none;
          border-inline-end: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
  border-bottom: none;
}

.ui-controlgroup-vertical .ui-spinner-input {
  width: 75%;
  width: calc(100% - 2.4em);
}

.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
  border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
  -webkit-box-shadow: inset 1px 1px 1px #ccc;
          box-shadow: inset 1px 1px 1px #ccc;
  border-radius: 0.12em;
  border: none;
}

.ui-checkboxradio-radio-label .ui-icon-background {
  width: 16px;
  height: 16px;
  border-radius: 1em;
  overflow: visible;
  border: none;
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
  background-image: none;
  width: 8px;
  height: 8px;
  border-width: 4px;
  border-style: solid;
}

.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-prev-hover {
  top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
  inset-inline-start: 2px;
}

.ui-datepicker .ui-datepicker-next {
  inset-inline-end: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  inset-inline-start: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
  inset-inline-end: 1px;
}

.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
  display: block;
  position: absolute;
  inset-inline-start: 50%;
  -webkit-margin-start: -8px;
          margin-inline-start: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: 700;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: block;
  padding: 0.2em;
  text-align: end;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0;
  padding: 0 0.2em;
  -webkit-border-start: 0;
          border-inline-start: 0;
  -webkit-border-end: 0;
          border-inline-end: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-multi .ui-datepicker-group,
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-inline-start-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  inset-inline-end: 2px;
  inset-inline-start: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  inset-inline-start: 2px;
  inset-inline-end: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  inset-inline-end: 1px;
  inset-inline-start: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  inset-inline-start: 1px;
  inset-inline-end: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-inline-end-width: 0;
  border-inline-start-width: 1px;
}

.ui-datepicker .ui-icon {
  display: block;
  overflow: hidden;
  inset-inline-start: 0.5em;
  top: 0.3em;
}

.ui-dialog {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  padding: 0.2em;
  outline: 0;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.4em 1em;
  position: relative;
}

.ui-dialog .ui-dialog-title {
  float: left;
  margin: 0.1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  inset-inline-end: 0.3em;
  top: 50%;
  width: 20px;
  margin: -10px 0 0;
  padding: 1px;
  height: 20px;
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0.5em 1em;
  background: 0 0;
  overflow: auto;
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: start;
  border-width: 1px 0 0;
  background-image: none;
  margin-top: 0.5em;
  padding: 0.3em 1em 0.5em 0.4em;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em 0;
  cursor: pointer;
}

.ui-dialog .ui-resizable-n {
  height: 2px;
  top: 0;
}

.ui-dialog .ui-resizable-e {
  width: 2px;
  inset-inline-end: 0;
}

.ui-dialog .ui-resizable-s {
  height: 2px;
  bottom: 0;
}

.ui-dialog .ui-resizable-w {
  width: 2px;
  inset-inline-start: 0;
}

.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw,
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw {
  width: 7px;
  height: 7px;
}

.ui-dialog .ui-resizable-se {
  inset-inline-end: 0;
  bottom: 0;
}

.ui-dialog .ui-resizable-sw {
  inset-inline-start: 0;
  bottom: 0;
}

.ui-dialog .ui-resizable-ne {
  inset-inline-end: 0;
  top: 0;
}

.ui-dialog .ui-resizable-nw {
  inset-inline-start: 0;
  top: 0;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

.ui-draggable-handle,
.ui-selectable,
.ui-sortable-handle {
  -ms-touch-action: none;
  touch-action: none;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  inset-inline-start: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  inset-inline-start: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  inset-inline-end: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  inset-inline-start: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  inset-inline-end: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  inset-inline-start: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  inset-inline-start: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  inset-inline-end: -5px;
  top: -5px;
}

.ui-progressbar {
  height: 2em;
  text-align: start;
  overflow: hidden;
}

.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
}

.ui-progressbar .ui-progressbar-overlay {
  background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
  height: 100%;
  opacity: 0.25;
}

.ui-progressbar-indeterminate .ui-progressbar-value {
  background-image: none;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted #000;
}

.ui-selectmenu-menu {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: none;
}

.ui-selectmenu-menu .ui-menu {
  overflow: auto;
  overflow-x: hidden;
  padding-bottom: 1px;
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 0.4em;
  margin: 0.5em 0 0;
  height: auto;
  border: 0;
}

.ui-selectmenu-open {
  display: block;
}

.ui-selectmenu-text {
  display: block;
  -webkit-margin-end: 20px;
          margin-inline-end: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-selectmenu-button.ui-button {
  text-align: start;
  white-space: nowrap;
  width: 14em;
}

.ui-selectmenu-icon.ui-icon {
  float: right;
  margin-top: 0;
}

.ui-slider {
  position: relative;
  text-align: start;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  -webkit-filter: inherit;
          filter: inherit;
}

.ui-slider-horizontal {
  height: 0.8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  -webkit-margin-start: -0.6em;
          margin-inline-start: -0.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  inset-inline-start: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  inset-inline-end: 0;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  inset-inline-start: -0.3em;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  margin-bottom: -0.6em;
}

.ui-slider-vertical .ui-slider-range {
  inset-inline-start: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min,
.ui-spinner-down {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max,
.ui-spinner-up {
  top: 0;
}

.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.ui-spinner-input {
  border: none;
  background: 0 0;
  color: inherit;
  padding: 0.222em 0;
  margin: 0.2em 2em 0.2em 0.4em;
  vertical-align: middle;
}

.ui-spinner-button {
  width: 1.6em;
  height: 50%;
  font-size: 0.5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  inset-inline-end: 0;
}

.ui-spinner a.ui-spinner-button {
  border-top-style: none;
  border-bottom-style: none;
  border-inline-end-style: none;
}

.ui-tabs {
  position: relative;
  padding: 0.2em;
}

.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0.2em 0.2em 0;
}

.ui-tabs .ui-tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 0;
  margin: 1px 0.2em 0 0;
  border-bottom-width: 0;
  padding: 0;
  white-space: nowrap;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  float: left;
  padding: 0.5em 1em;
  text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
  cursor: text;
}

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
  cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: 0 0;
}

.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
}

body .ui-tooltip {
  border-width: 2px;
}

.ui-widget,
.ui-widget button,
.ui-widget input,
.ui-widget select,
.ui-widget textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}

.ui-widget-content {
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
}

.ui-widget-content a,
.ui-widget-header a {
  color: #333;
}

.ui-widget-header {
  border: 1px solid #ddd;
  background: #e9e9e9;
  color: #333;
  font-weight: 700;
}

.ui-button,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
html .ui-button.ui-state-disabled:active,
html .ui-button.ui-state-disabled:hover {
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: 400;
  color: #454545;
}

.ui-button,
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button {
  color: #454545;
  text-decoration: none;
}

.ui-button:focus,
.ui-button:hover,
.ui-state-focus,
.ui-state-hover,
.ui-widget-content .ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-focus,
.ui-widget-header .ui-state-hover {
  border: 1px solid #ccc;
  background: #ededed;
  font-weight: 400;
  color: #2b2b2b;
}

.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
a.ui-button:focus,
a.ui-button:hover {
  color: #2b2b2b;
  text-decoration: none;
}

.ui-visual-focus {
  -webkit-box-shadow: 0 0 3px 1px #5e9ed6;
          box-shadow: 0 0 3px 1px #5e9ed6;
}

.ui-button.ui-state-active:hover,
.ui-button:active,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active {
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: 400;
  color: #fff;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #fff;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #fff;
  text-decoration: none;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}

.ui-state-checked {
  border: 1px solid #dad55e;
  background: #fffa90;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #777620;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #f1a899;
  background: #fddfdf;
  color: #5f3f3f;
}

.ui-state-error a,
.ui-state-error-text,
.ui-widget-content .ui-state-error a,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error a,
.ui-widget-header .ui-state-error-text {
  color: #5f3f3f;
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: 700;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  filter: Alpha(Opacity=70);
  font-weight: 400;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  filter: Alpha(Opacity=35);
  background-image: none;
}

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35);
}

.ui-icon {
  width: 16px;
  height: 16px;
}

.ui-icon,
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon {
  background-image: url("images/ui-icons_444444_256x240.png");
}

.ui-button:focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-hover .ui-icon {
  background-image: url("images/ui-icons_555555_256x240.png");
}

.ui-button:active .ui-icon,
.ui-state-active .ui-icon {
  background-image: url("images/ui-icons_ffffff_256x240.png");
}

.ui-button .ui-state-highlight.ui-icon,
.ui-state-highlight .ui-icon {
  background-image: url("images/ui-icons_777620_256x240.png");
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background-image: url("images/ui-icons_cc0000_256x240.png");
}

.ui-button .ui-icon {
  background-image: url("images/ui-icons_777777_256x240.png");
}

.ui-icon-blank {
  background-position: 16px 16px;
}

.ui-icon-caret-1-n {
  background-position: 0 0;
}

.ui-icon-caret-1-ne {
  background-position: -16px 0;
}

.ui-icon-caret-1-e {
  background-position: -32px 0;
}

.ui-icon-caret-1-se {
  background-position: -48px 0;
}

.ui-icon-caret-1-s {
  background-position: -65px 0;
}

.ui-icon-caret-1-sw {
  background-position: -80px 0;
}

.ui-icon-caret-1-w {
  background-position: -96px 0;
}

.ui-icon-caret-1-nw {
  background-position: -112px 0;
}

.ui-icon-caret-2-n-s {
  background-position: -128px 0;
}

.ui-icon-caret-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
  background-position: -65px -16px;
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
  background-position: -65px -32px;
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
  background-position: 1px -48px;
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}

.ui-icon-arrow-4 {
  background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}

.ui-icon-extlink {
  background-position: -32px -80px;
}

.ui-icon-newwin {
  background-position: -48px -80px;
}

.ui-icon-refresh {
  background-position: -64px -80px;
}

.ui-icon-shuffle {
  background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}

.ui-icon-folder-open {
  background-position: -16px -96px;
}

.ui-icon-document {
  background-position: -32px -96px;
}

.ui-icon-document-b {
  background-position: -48px -96px;
}

.ui-icon-note {
  background-position: -64px -96px;
}

.ui-icon-mail-closed {
  background-position: -80px -96px;
}

.ui-icon-mail-open {
  background-position: -96px -96px;
}

.ui-icon-suitcase {
  background-position: -112px -96px;
}

.ui-icon-comment {
  background-position: -128px -96px;
}

.ui-icon-person {
  background-position: -144px -96px;
}

.ui-icon-print {
  background-position: -160px -96px;
}

.ui-icon-trash {
  background-position: -176px -96px;
}

.ui-icon-locked {
  background-position: -192px -96px;
}

.ui-icon-unlocked {
  background-position: -208px -96px;
}

.ui-icon-bookmark {
  background-position: -224px -96px;
}

.ui-icon-tag {
  background-position: -240px -96px;
}

.ui-icon-home {
  background-position: 0 -112px;
}

.ui-icon-flag {
  background-position: -16px -112px;
}

.ui-icon-calendar {
  background-position: -32px -112px;
}

.ui-icon-cart {
  background-position: -48px -112px;
}

.ui-icon-pencil {
  background-position: -64px -112px;
}

.ui-icon-clock {
  background-position: -80px -112px;
}

.ui-icon-disk {
  background-position: -96px -112px;
}

.ui-icon-calculator {
  background-position: -112px -112px;
}

.ui-icon-zoomin {
  background-position: -128px -112px;
}

.ui-icon-zoomout {
  background-position: -144px -112px;
}

.ui-icon-search {
  background-position: -160px -112px;
}

.ui-icon-wrench {
  background-position: -176px -112px;
}

.ui-icon-gear {
  background-position: -192px -112px;
}

.ui-icon-heart {
  background-position: -208px -112px;
}

.ui-icon-star {
  background-position: -224px -112px;
}

.ui-icon-link {
  background-position: -240px -112px;
}

.ui-icon-cancel {
  background-position: 0 -128px;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-close {
  background-position: -80px -128px;
}

.ui-icon-closethick {
  background-position: -96px -128px;
}

.ui-icon-key {
  background-position: -112px -128px;
}

.ui-icon-lightbulb {
  background-position: -128px -128px;
}

.ui-icon-scissors {
  background-position: -144px -128px;
}

.ui-icon-clipboard {
  background-position: -160px -128px;
}

.ui-icon-copy {
  background-position: -176px -128px;
}

.ui-icon-contact {
  background-position: -192px -128px;
}

.ui-icon-image {
  background-position: -208px -128px;
}

.ui-icon-video {
  background-position: -224px -128px;
}

.ui-icon-script {
  background-position: -240px -128px;
}

.ui-icon-alert {
  background-position: 0 -144px;
}

.ui-icon-info {
  background-position: -16px -144px;
}

.ui-icon-notice {
  background-position: -32px -144px;
}

.ui-icon-help {
  background-position: -48px -144px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-bullet {
  background-position: -80px -144px;
}

.ui-icon-radio-on {
  background-position: -96px -144px;
}

.ui-icon-radio-off {
  background-position: -112px -144px;
}

.ui-icon-pin-w {
  background-position: -128px -144px;
}

.ui-icon-pin-s {
  background-position: -144px -144px;
}

.ui-icon-play {
  background-position: 0 -160px;
}

.ui-icon-pause {
  background-position: -16px -160px;
}

.ui-icon-seek-next {
  background-position: -32px -160px;
}

.ui-icon-seek-prev {
  background-position: -48px -160px;
}

.ui-icon-seek-end {
  background-position: -64px -160px;
}

.ui-icon-seek-first,
.ui-icon-seek-start {
  background-position: -80px -160px;
}

.ui-icon-stop {
  background-position: -96px -160px;
}

.ui-icon-eject {
  background-position: -112px -160px;
}

.ui-icon-volume-off {
  background-position: -128px -160px;
}

.ui-icon-volume-on {
  background-position: -144px -160px;
}

.ui-icon-power {
  background-position: 0 -176px;
}

.ui-icon-signal-diag {
  background-position: -16px -176px;
}

.ui-icon-signal {
  background-position: -32px -176px;
}

.ui-icon-battery-0 {
  background-position: -48px -176px;
}

.ui-icon-battery-1 {
  background-position: -64px -176px;
}

.ui-icon-battery-2 {
  background-position: -80px -176px;
}

.ui-icon-battery-3 {
  background-position: -96px -176px;
}

.ui-icon-circle-plus {
  background-position: 0 -192px;
}

.ui-icon-circle-minus {
  background-position: -16px -192px;
}

.ui-icon-circle-close {
  background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}

.ui-icon-circle-check {
  background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

.ui-corner-all,
.ui-corner-left,
.ui-corner-tl,
.ui-corner-top {
  border-start-start-radius: 3px;
}

.ui-corner-all,
.ui-corner-right,
.ui-corner-top,
.ui-corner-tr {
  border-start-end-radius: 3px;
}

.ui-corner-all,
.ui-corner-bl,
.ui-corner-bottom,
.ui-corner-left {
  border-end-start-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-br,
.ui-corner-right {
  border-end-end-radius: 3px;
}

.ui-widget-overlay {
  background: #aaa;
  opacity: 0.3;
  filter: Alpha(Opacity=30);
}

.ui-widget-shadow {
  -webkit-box-shadow: 0 0 5px #666;
  box-shadow: 0 0 5px #666;
}

/**----------------------------------------
START: Heading CSS
----------------------------------------*/
.form-side-heading {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  width: 100%;
  margin-bottom: 2px;
}
.sec-heading {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  width: 100%;
  margin-bottom: 52px;
}
.sec-heading-centered {
  max-width: 550px;
  text-align: center;
}
.sec-heading .sec-title {
  margin-bottom: 0;
}
.sec-heading .sec-title span {
  color: var(--tj-color-theme-primary);
}
.sec-heading .sub-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  color: var(--tj-color-heading-primary);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: var(--tj-fw-bold);
  border: 1px dashed var(--tj-color-border-1);
  padding: 2px 10px;
  margin-bottom: 20px;
  border-radius: 4px;
}
.sec-heading .sub-title i {
  color: var(--tj-color-theme-primary);
  font-size: 22px;
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .sec-heading .sub-title {
    margin-bottom: 15px;
  }
}
.sec-heading .sub-title.text-white {
  border-color: rgba(255, 255, 255, 0.15);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .sec-heading .sub-title {
    font-size: 13px;
  }
}
.sec-heading.style-2 .sec-title span {
  color: var(--tj-color-text-body-2);
}
.sec-heading.style-2 .sub-title {
  color: var(--tj-color-theme-primary);
  background-color: var(--tj-color-common-white);
  border: 0;
  padding: 7px 10px;
}
.sec-heading.style-3 .sub-title {
  color: var(--tj-color-theme-primary);
  padding: 0;
  border: 0;
}
.sec-heading.style-4 .sub-title {
  color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.sec-heading.style-6 .sub-title {
  padding: 4px 8px;
}
.sec-heading.style-7 .sub-title {
  color: var(--tj-color-heading-primary);
  padding: 4px 8px;
}
.sec-heading.style-8 .sub-title {
  color: var(--tj-color-theme-primary);
  border: 0;
  padding: 0 0 0 12px;
  position: relative;
}
.sec-heading.style-8 .sub-title::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .sec-heading {
    margin-bottom: 35px;
  }
}

.heading-wrap-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 25px;
  margin-bottom: 52px;
}
.heading-wrap-content .sec-heading {
  max-width: 500px;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  margin-bottom: 0;
}
.heading-wrap-content .desc {
  max-width: 360px;
  margin-bottom: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .heading-wrap-content .desc {
    max-width: 100%;
  }
}
.heading-wrap-content .btn-wrap {
  max-width: 220px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .heading-wrap-content {
    margin-bottom: 35px;
  }
}

.sec-heading-wrap .sub-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  color: var(--tj-color-heading-primary);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: var(--tj-fw-bold);
  border: 1px dashed var(--tj-color-border-1);
  padding: 2px 10px;
  margin-bottom: 20px;
  border-radius: 4px;
}
.sec-heading-wrap .sub-title i {
  color: var(--tj-color-theme-primary);
  font-size: 22px;
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .sec-heading-wrap .sub-title {
    margin-bottom: 15px;
  }
}
.sec-heading-wrap.style-3 .sub-title {
  color: var(--tj-color-theme-primary);
  padding: 0;
  border: 0;
}

.content-wrap .sec-heading {
  max-width: 550px;
  margin: 0 0 20px 0;
}
.content-wrap .desc {
  margin-bottom: 0;
}
.content-wrap .tj-primary-btn {
  margin-top: 14px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .content-wrap .tj-primary-btn {
    margin-top: 5px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .content-wrap .desc br {
    display: none;
  }
}

.title-anim > div {
  overflow: hidden;
}

.tj-text-invert > div {
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--tj-color-heading-primary)), color-stop(50%, var(--tj-color-text-body-2)));
  background-image: linear-gradient(to right, var(--tj-color-heading-primary) 50%, var(--tj-color-text-body-2) 50%);
}

.line {
  position: relative;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  --highlight-offset: 0%;
  background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-color-heading-primary)), to(var(--tj-color-text-body-2)));
  background-image: linear-gradient(90deg, var(--tj-color-heading-primary) var(--highlight-offset), var(--tj-color-text-body-2) var(--highlight-offset));
}

/* !END: Heading CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.tj-banner-section {
  position: relative;
}

.banner-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-height: 792px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-area {
    min-height: 700px;
  }
}

.banner-left-box {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  padding: 70px;
  width: calc(50% - 15px);
  -webkit-margin-end: 15px;
          margin-inline-end: 15px;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}
.banner-left-box::before {
  content: "";
  position: absolute;
  top: 5%;
  inset-inline-start: 5%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: var(--tj-color-theme-primary);
  -webkit-filter: blur(65px);
  filter: blur(65px);
  opacity: 0.26;
  z-index: -1;
  backdrop-filter: blur(10px);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .banner-left-box {
    -webkit-padding-end: 40px;
            padding-inline-end: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-left-box {
    -webkit-padding-start: 50px;
            padding-inline-start: 50px;
    -webkit-padding-end: 40px;
            padding-inline-end: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .banner-left-box {
    width: 100%;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
    margin-bottom: 15px;
    padding: 60px 0;
  }
}

.banner-content {
  max-width: 635px;
  width: 100%;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.banner-content .sub-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: var(--tj-color-common-white);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: var(--tj-fw-bold);
  border: 1px dashed var(--tj-color-border-2);
  padding: 6px 10px;
  margin-bottom: 20px;
  border-radius: 4px;
}
.banner-content .sub-title i {
  color: var(--tj-color-theme-primary);
  font-size: 22px;
}
.banner-content .banner-title {
  color: var(--tj-color-common-white);
  line-height: 1.135;
  margin-bottom: 15px;
}
.banner-content .banner-title span {
  display: inline-block;
  color: var(--tj-color-theme-primary);
  font-weight: var(--tj-fw-medium);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .banner-content .banner-title {
    font-size: 68px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner-content .banner-title {
    font-size: 58px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-content .banner-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .banner-content .banner-title {
    font-size: 45px;
  }
}
@media (max-width: 575px) {
  .banner-content .banner-title {
    font-size: 38px;
  }
}
.banner-content .banner-link {
  font-size: 75px;
  color: var(--tj-color-common-white);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  padding: 10px 30px 15px 0;
  -webkit-border-end: 1px dashed var(--tj-color-border-2);
          border-inline-end: 1px dashed var(--tj-color-border-2);
}
.banner-content .banner-link span {
  overflow: hidden;
}
.banner-content .banner-link i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  -webkit-transform: rotate(-45deg) translateX(0);
      -ms-transform: rotate(-45deg) translateX(0);
          transform: rotate(-45deg) translateX(0);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  text-shadow: -120px 0 0;
}
.banner-content .banner-link:hover i {
  -webkit-transform: rotate(-45deg) translateX(120px);
      -ms-transform: rotate(-45deg) translateX(120px);
          transform: rotate(-45deg) translateX(120px);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner-content .banner-link {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-content .banner-link {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .banner-content .banner-link {
    font-size: 45px;
  }
}
.banner-content .banner-desc-area {
  max-width: 475px;
  width: 100%;
  border-top: 1px dashed var(--tj-color-border-2);
  border-bottom: 1px dashed var(--tj-color-border-2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 23px 0;
  margin-top: 40px;
  -webkit-margin-end: 57px;
          margin-inline-end: 57px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.banner-content .banner-desc-area .banner-desc {
  -webkit-padding-start: 44px;
          padding-inline-start: 44px;
}
@media (max-width: 575px) {
  .banner-content .banner-desc-area .banner-desc {
    -webkit-padding-start: 35px;
            padding-inline-start: 35px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner-content .banner-desc-area {
    -webkit-margin-end: 20px;
            margin-inline-end: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .banner-content .banner-desc-area {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
@media (max-width: 480px) {
  .banner-content .banner-desc-area {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
.banner-content .banner-desc {
  color: var(--tj-color-text-body-2);
  font-size: 18px;
  line-height: 1.444;
  max-width: 517px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) {
  .banner-content .banner-desc {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner-content {
    max-width: 565px;
    -webkit-padding-start: 10px;
            padding-inline-start: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-content {
    -webkit-padding-start: 10px;
            padding-inline-start: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .banner-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 15px;
  }
}

.banner-img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.banner-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
}

.banner-shape {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.banner-shape img {
  width: 100%;
  height: 100%;
}

.banner-scroll {
  position: absolute;
  inset-inline-start: 38px;
  bottom: 50px;
  z-index: 5;
}
.banner-scroll .scroll-down {
  color: var(--tj-color-common-white);
  line-height: 1;
  font-weight: var(--tj-fw-sbold);
  -webkit-writing-mode: sideways-lr;
      -ms-writing-mode: sideways-lr;
          writing-mode: sideways-lr;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  opacity: 0.5;
}
.banner-scroll .scroll-down span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 22px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.banner-scroll .scroll-down:hover {
  opacity: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .banner-scroll {
    inset-inline-start: 23px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-scroll {
    inset-inline-start: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-scroll {
    bottom: 150px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .banner-scroll {
    display: none;
  }
}

.banner-right-box {
  width: 50%;
  position: relative;
  min-height: 390px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .banner-right-box {
    width: 100%;
  }
}
.banner-right-box .box-area {
  max-width: 261px;
}
@media (max-width: 575px) {
  .banner-right-box .box-area {
    max-width: 200px;
  }
}

.customers-box {
  background-color: var(--tj-color-common-white);
  border-radius: 10px;
  padding: 30px 25px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .customers-box {
    padding: 25px 18px 20px;
  }
}

.customers ul {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  list-style: none;
}
.customers ul li {
  line-height: 1;
  -webkit-margin-start: -15px;
          margin-inline-start: -15px;
}
.customers ul li img {
  width: 59px;
  height: 59px;
  background-color: var(--tj-color-common-white);
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 2px var(--tj-color-common-white);
          box-shadow: 0 0 0 2px var(--tj-color-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .customers ul li img {
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 575px) {
  .customers ul li img {
    width: 40px;
    height: 40px;
  }
}
.customers ul li:first-child {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
}
.customers ul li:last-child span {
  width: 59px;
  height: 59px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 22px;
  -webkit-box-shadow: 0 0 0 2px var(--tj-color-common-white);
          box-shadow: 0 0 0 2px var(--tj-color-common-white);
}
.customers ul li:last-child span i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .customers ul li:last-child span {
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 575px) {
  .customers ul li:last-child span {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 575px) {
  .customers ul li {
    -webkit-margin-start: -16px;
            margin-inline-start: -16px;
  }
}

.customers-number {
  color: var(--tj-color-theme-dark);
  font-size: 58px;
  line-height: 0.8;
  letter-spacing: -1.2px;
  font-family: var(--tj-ff-heading);
  font-weight: var(--tj-fw-sbold);
  padding: 45px 0 13px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .customers-number {
    font-size: 50px;
    padding: 25px 0 13px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .customers-number {
    font-size: 40px;
    padding: 20px 0 10px 0;
  }
}

.customers-text {
  color: var(--tj-color-text-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  margin-bottom: 0;
  font-weight: var(--tj-fw-regular);
}

.tj-banner-section-2 {
  background-color: var(--tj-color-theme-bg);
  padding-top: 125px;
  padding-bottom: 55px;
  border-radius: 12px;
  position: relative;
  z-index: 1;
}
.tj-banner-section-2 .banner-content-2 {
  max-width: 450px;
  padding: 40px 0;
}
.tj-banner-section-2 .banner-content-2 .sub-title {
  font-size: 14px;
  font-weight: var(--tj-fw-bold);
  color: var(--tj-color-theme-primary);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding-bottom: 15px;
}
.tj-banner-section-2 .banner-content-2 .sub-title i {
  font-size: 22px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-banner-section-2 .banner-content-2 .banner-title {
    line-height: 1.25;
  }
}
.tj-banner-section-2 .banner-content-2 .title-video {
  max-width: 148px;
  border-radius: 6px;
  vertical-align: top;
  margin-top: 10px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  overflow: hidden;
  position: relative;
}
.tj-banner-section-2 .banner-content-2 .title-video i {
  position: absolute;
  top: 50%;
  inset-inline-start: 54%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 14px;
  color: var(--tj-color-common-white);
  z-index: 2;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.tj-banner-section-2 .banner-content-2 .title-video::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  opacity: 0.25;
}
.tj-banner-section-2 .banner-content-2 .title-video:hover i {
  -webkit-transform: translate(-50%, -50%) scale(1.2);
      -ms-transform: translate(-50%, -50%) scale(1.2);
          transform: translate(-50%, -50%) scale(1.2);
}
.tj-banner-section-2 .banner-content-2 .title-video:hover::after {
  opacity: 0.4;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-banner-section-2 .banner-content-2 .title-video {
    max-width: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-banner-section-2 .banner-content-2 .title-video {
    max-width: 95px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-banner-section-2 .banner-content-2 .title-video {
    max-width: 100px;
    margin-top: 7px;
  }
}
.tj-banner-section-2 .banner-content-2 .btn-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.tj-banner-section-2 .banner-content-2 .btn-area .number {
  color: var(--tj-color-heading-primary);
  font-size: 20px;
  font-weight: var(--tj-fw-sbold);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  gap: 8px;
}
.tj-banner-section-2 .banner-content-2 .btn-area .number i {
  font-size: 19px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.tj-banner-section-2 .banner-content-2 .btn-area .number span {
  position: relative;
}
.tj-banner-section-2 .banner-content-2 .btn-area .number span::after {
  content: "";
  position: absolute;
  bottom: -2px;
  inset-inline-end: 0;
  width: 100%;
  height: 1px;
  background-color: var(--tj-color-heading-primary);
}
.tj-banner-section-2 .banner-content-2 .btn-area .number:hover span::after {
  -webkit-animation: linehover 0.8s linear;
  animation: linehover 0.8s linear;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-banner-section-2 .banner-content-2 {
    padding-top: 0;
    -webkit-padding-start: 30px;
            padding-inline-start: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-banner-section-2 .banner-content-2 {
    padding-top: 0;
    -webkit-padding-start: 40px;
            padding-inline-start: 40px;
  }
}
.tj-banner-section-2 .banner-img-area {
  position: relative;
  z-index: 1;
  max-width: 704px;
  width: 100%;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: -30px;
          margin-inline-end: -30px;
}
.tj-banner-section-2 .banner-img-area::before {
  content: "";
  background-color: var(--tj-color-common-white);
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 50%;
  height: 343px;
  z-index: -1;
  border-start-start-radius: 100%;
  border-end-start-radius: 8px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tj-banner-section-2 .banner-img-area::before {
    height: 290px;
  }
}
@media (max-width: 575px) {
  .tj-banner-section-2 .banner-img-area::before {
    height: 260px;
  }
}
.tj-banner-section-2 .banner-img-area .banner-author {
  position: absolute;
  left: 88px;
  bottom: 224px;
  -webkit-writing-mode: sideways-lr;
      -ms-writing-mode: sideways-lr;
          writing-mode: sideways-lr;
}
.tj-banner-section-2 .banner-img-area .banner-author .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 0;
  position: relative;
}
.tj-banner-section-2 .banner-img-area .banner-author .title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  position: absolute;
  bottom: -18px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation: pulse3 1.5s linear infinite;
          animation: pulse3 1.5s linear infinite;
}
.tj-banner-section-2 .banner-img-area .banner-author .designation {
  font-size: 14px;
  color: var(--tj-color-text-body);
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-banner-section-2 .banner-img-area .banner-author {
    left: 60px;
    bottom: 180px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tj-banner-section-2 .banner-img-area .banner-author {
    left: 40px;
    bottom: 150px;
  }
}
@media (max-width: 575px) {
  .tj-banner-section-2 .banner-img-area .banner-author {
    left: 20px;
    bottom: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-banner-section-2 .banner-img-area {
    -webkit-margin-end: -20px;
            margin-inline-end: -20px;
  }
}
@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) {
  .tj-banner-section-2 .banner-img-area {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
.tj-banner-section-2 .banner-img {
  max-width: 507px;
  width: 100%;
  position: relative;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
@media (max-width: 575px) {
  .tj-banner-section-2 .banner-img > img {
    min-height: 440px;
  }
}
.tj-banner-section-2 .banner-img .brand-name {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.6);
  font-weight: var(--tj-fw-sbold);
  font-size: 120px;
  -webkit-writing-mode: sideways-lr;
      -ms-writing-mode: sideways-lr;
          writing-mode: sideways-lr;
  line-height: 0.9;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (max-width: 575px) {
  .tj-banner-section-2 .banner-img .brand-name {
    font-size: 100px;
  }
}
@media (max-width: 430px) {
  .tj-banner-section-2 .banner-img .brand-name {
    font-size: 90px;
  }
}
.tj-banner-section-2 .banner-img .growth-box {
  width: 198px;
  height: 209px;
  position: absolute;
  inset-inline-start: 15px;
  bottom: 15px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 20px;
}
.tj-banner-section-2 .banner-img .growth-box img {
  border-radius: 0;
}
@media (max-width: 575px) {
  .tj-banner-section-2 .banner-img .growth-box {
    width: 165px;
    height: 175px;
    padding: 10px;
  }
}
@media (max-width: 430px) {
  .tj-banner-section-2 .banner-img .growth-box {
    width: 145px;
    height: 155px;
    inset-inline-start: 10px;
    bottom: 10px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-banner-section-2 .banner-img {
    max-width: 460px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-banner-section-2 .banner-img {
    max-width: 400px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tj-banner-section-2 .banner-img {
    max-width: calc(100% - 110px);
  }
}
@media (max-width: 575px) {
  .tj-banner-section-2 .banner-img {
    max-width: calc(100% - 90px);
    min-height: 440px;
  }
}
.tj-banner-section-2 .banner-scroll .scroll-down {
  color: var(--tj-color-heading-primary);
  opacity: 1;
}
.tj-banner-section-2 .banner-scroll .scroll-down span {
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-primary);
  overflow: hidden;
}

.marquee-vr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.marquee-vr .text {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  white-space: nowrap;
  -webkit-animation: marquee 15s linear infinite;
          animation: marquee 15s linear infinite;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.marquee-vr .text .icon {
  margin: 40px 0;
}

/* !END: Hero CSS */
/**----------------------------------------
START: Choose CSS
----------------------------------------*/
.tj-choose-section {
  overflow: hidden;
}
.tj-choose-section .sec-heading {
  max-width: 550px;
}
.tj-choose-section.choose-3 .sec-heading {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}

.choose-box {
  height: 100%;
  padding: 50px 28px 45px;
  background-color: var(--tj-color-common-white);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.choose-box .choose-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
.choose-box .choose-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: var(--tj-color-theme-primary);
  font-size: 88px;
  line-height: 1;
  max-width: 88px;
  margin-bottom: 43px;
}
.choose-box .choose-icon i {
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .choose-box .choose-icon {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .choose-box .choose-icon {
    font-size: 65px;
    max-width: 65px;
    margin-bottom: 20px;
  }
}
.choose-box .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .choose-box .title {
    font-size: 18px;
    margin-bottom: 10px;
  }
}
.choose-box .desc {
  margin-bottom: 0;
}
.choose-box .text-btn {
  margin-top: auto;
  padding-top: 27px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.choose-box:hover {
  background-color: var(--tj-color-theme-primary);
}
.choose-box:hover .choose-icon {
  color: var(--tj-color-common-white);
  -webkit-animation: gelatine 0.6s;
          animation: gelatine 0.6s;
}
.choose-box:hover .btn-icon {
  background-color: var(--tj-color-theme-dark);
}
.choose-box:hover .btn-text,
.choose-box:hover .desc,
.choose-box:hover .title {
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .choose-box {
    padding: 40px 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .choose-box {
    padding: 30px 15px;
  }
}
.choose-box.style-2 {
  padding: 40px 28px;
}
.choose-box.style-2 .choose-icon {
  margin-bottom: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .choose-box.style-2 .choose-icon {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .choose-box.style-2 {
    padding: 30px 15px;
  }
}

.work-experience-area {
  max-width: 570px;
}
.work-experience-area .sec-heading {
  margin-bottom: 65px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .work-experience-area .sec-heading {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .work-experience-area .sec-heading {
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .work-experience-area {
    max-width: 100%;
    margin-bottom: 50px;
  }
}

.experience-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  border-top: 1px dashed rgba(0, 0, 0, 0.16);
  border-bottom: 1px dashed rgba(0, 0, 0, 0.16);
}
.experience-wrap .year-count {
  color: var(--tj-color-theme-primary);
  font-size: 404px;
  line-height: 0.75;
  font-family: var(--tj-ff-heading);
  font-weight: var(--tj-fw-light);
  letter-spacing: -8.08px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 17px 30px 38px 0;
  -webkit-border-end: 1px dashed rgba(0, 0, 0, 0.16);
          border-inline-end: 1px dashed rgba(0, 0, 0, 0.16);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .experience-wrap .year-count {
    font-size: 335px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .experience-wrap .year-count {
    font-size: 250px;
  }
}
@media (max-width: 575px) {
  .experience-wrap .year-count {
    font-size: 210px;
  }
}
.experience-wrap .experience-text {
  -webkit-padding-start: 32px;
          padding-inline-start: 32px;
  padding-bottom: 35px;
}
.experience-wrap .experience-text .title {
  max-width: 110px;
  font-size: 16px;
  font-weight: var(--tj-fw-sbold);
  font-family: var(--tj-ff-body);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 0;
}
.experience-wrap .experience-text span {
  color: var(--tj-color-theme-primary);
  font-size: 24px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
.experience-wrap .experience-text span i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
@media (max-width: 575px) {
  .experience-wrap .experience-text {
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }
}

/* !END: Choose CSS */
/**----------------------------------------
START: Client CSS
----------------------------------------*/
.tj-client-section {
  position: relative;
}
.tj-client-section .client-container {
  padding: 0;
  overflow: hidden;
}
.tj-client-section-2 {
  background-color: var(--tj-color-theme-primary);
  border-radius: 12px;
  padding: 30px 5px;
  margin-top: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-client-section-2 {
    padding: 18px 5px;
  }
}

.client-section-gap {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .client-section-gap {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .client-section-gap {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.client-section-gap-2 {
  padding: 100px 0;
  margin: 120px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .client-section-gap-2 {
    padding: 80px 0;
    margin: 90px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .client-section-gap-2 {
    padding: 65px 0;
    margin: 70px 0;
  }
}
@media (max-width: 575px) {
  .client-section-gap-2 {
    padding: 60px 0;
    margin: 50px 0;
  }
}

.client-content {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px dashed var(--tj-color-border-1);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}
.client-content .sec-title {
  max-width: 200px;
  width: 100%;
  letter-spacing: 0;
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .client-content .sec-title {
    font-size: 15px;
  }
}
.client-content span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.client-content .client-numbers {
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-primary);
  line-height: 1.2;
  border-radius: 50px;
  padding: 0 5px;
}
.client-content .client-text {
  color: var(--tj-color-text-body-3);
  position: relative;
}
.client-content .client-text::after {
  content: "";
  position: absolute;
  bottom: 3px;
  inset-inline-start: auto;
  width: 100%;
  border-bottom: 1px solid rgba(12, 30, 33, 0.2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .client-content {
    width: 260px;
    height: 260px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .client-content {
    width: 220px;
    height: 220px;
  }
}
@media (max-width: 575px) {
  .client-content {
    width: 190px;
    height: 190px;
  }
}
.client-content.style-2 {
  max-width: 440px;
  width: 100%;
  display: block;
  margin: 0 auto 60px;
  height: auto;
  border-radius: 40px;
  position: unset;
  background: transparent;
  -webkit-transform: translate(0);
      -ms-transform: translate(0);
          transform: translate(0);
  padding: 0 15px 4px;
}
@media (max-width: 575px) {
  .client-content.style-2 {
    padding: 4px 15px 4px;
  }
}
.client-content.style-2 .sec-title {
  max-width: 100%;
  line-height: 1.2;
  margin-bottom: 0;
  letter-spacing: -0.6px;
}
.client-content.style-2 .client-numbers {
  color: var(--tj-color-theme-primary);
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.client-content.style-2 .client-text::after {
  display: none;
}
@media (max-width: 575px) {
  .client-content.style-2 {
    width: calc(100% - 30px);
    margin: 0 auto 40px;
  }
}

.client-slider .swiper-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}

.client-slider-1 {
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.client-slider-1::before, .client-slider-1::after {
  content: "";
  position: absolute;
  width: 448px;
  height: 100%;
  background-image: -webkit-gradient(linear, left top, right top, from(rgb(233, 237, 237)), to(rgba(233, 237, 237, 0)));
  background-image: linear-gradient(90deg, rgb(233, 237, 237) 0%, rgba(233, 237, 237, 0) 100%);
  top: 0;
  inset-inline-start: 0;
  z-index: 2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .client-slider-1::before, .client-slider-1::after {
    width: 300px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .client-slider-1::before, .client-slider-1::after {
    width: 200px;
  }
}
@media (max-width: 575px) {
  .client-slider-1::before, .client-slider-1::after {
    width: 100px;
  }
}
.client-slider-1::after {
  inset-inline-start: auto;
  inset-inline-end: 0;
  background-image: -webkit-gradient(linear, right top, left top, from(rgb(233, 237, 237)), to(rgba(233, 237, 237, 0)));
  background-image: linear-gradient(-90deg, rgb(233, 237, 237) 0%, rgba(233, 237, 237, 0) 100%);
}

.client-item {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-padding-end: 30px;
          padding-inline-end: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .client-item {
    -webkit-padding-end: 20px;
            padding-inline-end: 20px;
  }
}

.client-logo {
  width: 284px;
  height: 120px;
  background-color: var(--tj-color-common-white);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -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: 5;
  border-radius: 8px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .client-logo {
    width: 220px;
    height: 90px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .client-logo {
    width: 190px;
    height: 70px;
    padding: 20px;
  }
}

.client-slider-2 .client-logo {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.client-slider-2 .client-logo img {
  opacity: 0.85;
}

/* !END: Client CSS */
/**----------------------------------------
START: About CSS
----------------------------------------*/
.about-img-area {
  position: relative;
  -webkit-margin-end: -8px;
          margin-inline-end: -8px;
}
.about-img-area .about-img {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
}
.about-img-area .about-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
}
@media (max-width: 575px) {
  .about-img-area .box-area {
    max-width: 230px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .about-img-area {
    margin-top: 15px;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
.about-img-area.style-2 {
  max-width: 591px;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
}
.about-img-area.style-2 .box-area {
  max-width: 343px;
  background-color: var(--tj-color-theme-bg);
}
.about-img-area.style-2 .box-area::after, .about-img-area.style-2 .box-area::before {
  background: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-11 h-11"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23d8e5e5"></path></svg>');
}
@media (max-width: 575px) {
  .about-img-area.style-2 .box-area {
    max-width: 270px;
  }
}
.about-img-area.style-2 .box-area.style-2 {
  background: transparent;
  padding: 0 0 15px 15px;
  border-start-end-radius: 0;
  border-end-start-radius: 12px;
}
.about-img-area.style-2 .box-area.style-2::after, .about-img-area.style-2 .box-area.style-2::before {
  display: none;
}
.about-img-area.style-2 .box-area.style-2 .progress-box {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
}
.about-img-area.style-2 .box-area.style-2 .progress-box .tj-progress-percent,
.about-img-area.style-2 .box-area.style-2 .progress-box .tj-progress-title,
.about-img-area.style-2 .box-area.style-2 .progress-box .title {
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .about-img-area.style-2 {
    max-width: 100%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-img-area {
    height: 100%;
  }
}

.box-area {
  background: var(--tj-color-grey-1);
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  max-width: 241px;
  width: 100%;
  padding: 15px 15px 0 0;
  border-start-end-radius: 12px;
}
.box-area::after, .box-area::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: -13px;
  width: 13px;
  height: 13px;
  background: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-11 h-11"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23ecf0f0"></path></svg>');
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.box-area::after {
  inset-inline-start: auto;
  top: auto;
  inset-inline-end: -13px;
  bottom: 0;
}

.experience-box {
  background-color: var(--tj-color-common-white);
  border-radius: 10px;
  padding: 28px 25px;
}
.experience-box .sub-title {
  color: var(--tj-color-theme-primary);
  font-weight: var(--tj-fw-medium);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .experience-box {
    padding: 25px 18px 20px;
  }
}

.about-content-area.style-1 {
  background-color: var(--tj-color-common-white);
  border-radius: 12px;
  padding: 30px;
  min-height: 408px;
  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: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-content-area.style-1 {
    min-height: 300px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .about-content-area.style-1 {
    padding: 30px 20px;
    min-height: 300px;
  }
}
.about-content-area .sec-heading {
  margin-bottom: 30px;
}

.about-bottom-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
}
.about-bottom-area .client-review-cont {
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-radius: 10px;
  padding: 30px;
}
.about-bottom-area .client-review-cont .rating-area {
  margin-bottom: 12px;
}
.about-bottom-area .client-review-cont .star-ratings {
  font-size: 16px;
  letter-spacing: 4px;
  -webkit-text-stroke: 1px var(--tj-color-common-white);
}
.about-bottom-area .client-review-cont .star-ratings .fill-ratings {
  color: var(--tj-color-common-white);
}
.about-bottom-area .client-review-cont .desc {
  margin-bottom: 38px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-bottom-area .client-review-cont .desc {
    margin-bottom: 20px;
  }
}
.about-bottom-area .client-review-cont .quote-icon {
  font-size: 40px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .about-bottom-area .client-review-cont .quote-icon {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-bottom-area .client-review-cont {
    padding: 30px 15px;
  }
}
@media (max-width: 575px) {
  .about-bottom-area .client-review-cont {
    padding: 15px;
  }
}
.about-bottom-area .client-info-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.about-bottom-area .client-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.about-bottom-area .client-info .title {
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-common-white);
  line-height: 1;
  margin-bottom: 6px;
}
.about-bottom-area .client-info .designation {
  font-size: 14px;
  color: var(--tj-color-theme-bg);
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.video-img {
  max-width: 224px;
  width: 100%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.video-img::before {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  opacity: 0.25;
}
.video-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .video-img {
    max-width: 180px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .video-img {
    max-width: 120px;
  }
}
@media (max-width: 575px) {
  .video-img {
    max-width: 100px;
  }
}

.video-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 60px;
  height: 60px;
  line-height: 1;
  color: var(--tj-color-common-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  z-index: 5;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  backdrop-filter: blur(10px);
}
.video-btn span {
  font-size: 15px;
  -webkit-margin-start: 2px;
          margin-inline-start: 2px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
.video-btn:hover {
  color: var(--tj-color-common-white);
  -webkit-transform: translate(-50%, -50%) scale(1.1);
      -ms-transform: translate(-50%, -50%) scale(1.1);
          transform: translate(-50%, -50%) scale(1.1);
}

.about-content-area-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 85px;
}
.about-content-area-2 .about-content {
  max-width: 550px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .about-content-area-2 .about-content {
    max-width: 440px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-content-area-2 .about-content {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .about-content-area-2 .about-content {
    width: calc(100% - 130px);
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }
}
.about-content-area-2 .sec-heading {
  margin-bottom: 27px;
}
.about-content-area-2 .video-img {
  max-width: 120px;
}
.about-content-area-2 .video-img::before {
  opacity: 0.15;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .about-content-area-2 .video-img {
    max-width: 100px;
  }
}
.about-content-area-2 .video-btn:hover {
  -webkit-transform: translate(-50%, -50%) scale(0.9);
      -ms-transform: translate(-50%, -50%) scale(0.9);
          transform: translate(-50%, -50%) scale(0.9);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-content-area-2 {
    gap: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .about-content-area-2 {
    gap: 20px;
  }
}

.customers-box.style-2 {
  background-color: var(--tj-color-theme-primary);
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.customers-box.style-2 .customers-bg {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: luminosity;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  opacity: 0.15;
  z-index: -1;
}
.customers-box.style-2 ul li span {
  background-color: var(--tj-color-theme-dark);
}
.customers-box.style-2 .customers-text {
  max-width: 250px;
  font-size: 24px;
  line-height: 1.333;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-common-white);
}
.customers-box.style-2 .star-icon {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  inset-inline-end: 120px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .customers-box.style-2 {
    min-height: 315px;
  }
}

.countup-item.style-2 {
  width: 100%;
  background-color: var(--tj-color-common-white);
  border-radius: 10px;
  padding: 28px 30px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  text-align: start;
}
.countup-item.style-2 .count-inner {
  padding-top: 90px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .countup-item.style-2 .count-inner {
    padding-top: 60px;
  }
}
.countup-item.style-2 .count-text {
  color: var(--tj-color-text-body);
  font-weight: var(--tj-fw-medium);
}
.countup-item.style-2 .inline-content {
  color: var(--tj-color-heading-primary);
  margin: 11px 0 10px;
}
.countup-item.style-2 .inline-content .odometer {
  color: var(--tj-color-heading-primary);
}
.countup-item.style-2 .inline-content .odometer .odometer-digit,
.countup-item.style-2 .inline-content .odometer span {
  color: var(--tj-color-heading-primary);
}
.countup-item.style-2 .count-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--tj-color-grey-1);
  font-size: 48px;
  color: var(--tj-color-theme-primary);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
}
.countup-item.style-2 .steps {
  position: absolute;
  top: 28px;
  inset-inline-end: 30px;
  color: var(--tj-color-text-body);
  font-size: 20px;
  line-height: 1;
  font-weight: var(--tj-fw-sbold);
}
@media (max-width: 575px) {
  .countup-item.style-2 .steps {
    inset-inline-end: 20px;
  }
}
@media (max-width: 575px) {
  .countup-item.style-2 {
    padding: 25px 20px;
  }
}

.tj-about-section-2 {
  background-color: var(--tj-color-theme-bg);
  /* Stretch the light section bg edge-to-edge so the dark page background
     doesn't peek through the 15px .section-gap-x margins or the rounded
     corners. Negative left/right margins compensate for the wrapper gap;
     border-radius removed so the fill is flush. */
  margin-left: calc(-1 * (50vw - 50%));
  margin-right: calc(-1 * (50vw - 50%));
  border-radius: 0 !important;
  position: relative;
  z-index: 1;
}

.progress-box {
  background-color: var(--tj-color-common-white);
  border-radius: 10px;
  padding: 28px 30px 35px;
}
.progress-box .title {
  font-weight: var(--tj-fw-sbold);
}
@media (max-width: 575px) {
  .progress-box {
    padding: 20px 18px 25px;
  }
}

.mission-vision-box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: var(--tj-color-common-white);
  border-radius: 12px;
  padding: 25px 20px 30px 26px;
}
.mission-vision-box .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 18px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .mission-vision-box {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.about-btn-area {
  margin-top: 15px;
}
.about-btn-area .tj-primary-btn {
  width: 100%;
  border-radius: 10px;
  padding: 13px;
}
.about-btn-area .tj-primary-btn .btn-icon {
  width: 30px;
  height: 30px;
  font-size: 20px;
}

/* !END: About CSS */
/**----------------------------------------
START: Services CSS
----------------------------------------*/
.tj-service-section {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  position: relative;
  z-index: 1;
}
.tj-service-section .sec-heading {
  max-width: 550px;
}
.tj-service-section .sec-heading .sub-title {
  color: var(--tj-color-common-white);
  border-color: rgba(255, 255, 255, 0.15);
}
.tj-service-section .sec-heading.style-2 {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}
.tj-service-section .sec-heading.style-2 .sub-title {
  color: var(--tj-color-theme-primary);
  background-color: var(--tj-color-theme-dark-2);
}
.tj-service-section.service-2 {
  overflow-x: hidden;
}
.tj-service-section.service-3 {
  background: transparent;
}
.tj-service-section.service-3 .sec-heading .sub-title {
  color: var(--tj-color-theme-primary);
}
.tj-service-section.service-4 {
  background: transparent;
}

.bg-shape-2, .bg-shape-1 {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  max-width: 370px;
  width: 100%;
  z-index: -1;
  mix-blend-mode: difference;
  pointer-events: none;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .bg-shape-2, .bg-shape-1 {
    max-width: 260px;
  }
}
.bg-shape-2 {
  top: inherit;
  inset-inline-start: inherit;
  bottom: 0;
  inset-inline-end: 0;
}

.service-item {
  background: var(--tj-color-common-white);
  padding: 40px 30px 45px;
  margin-bottom: 30px;
  position: relative;
  border-radius: 12px;
}
.service-item:last-child {
  margin-bottom: 0;
}
.service-item .service-icon {
  font-size: 70px;
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, rgba(30, 138, 138, 0.3) 0%, rgba(30, 138, 138, 0) 50%, rgba(30, 138, 138, 0.3) 100%);
  border-radius: 50%;
  border: 1px solid rgba(30, 138, 138, 0.15);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.service-item .service-icon i {
  color: var(--tj-color-theme-primary);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item .service-icon {
    font-size: 50px;
    width: 65px;
    height: 65px;
  }
}
.service-item .title {
  max-width: 300px;
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 20px;
  -webkit-transition: none;
  transition: none;
}
.service-item .title a:hover {
  color: var(--tj-color-theme-primary);
}
.service-item .desc {
  margin-bottom: 0;
}
.service-item .text-btn {
  margin-top: 25px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item {
    padding: 30px 20px;
  }
}
.service-item.style-1 {
  border: 0;
  padding: 0;
  background-color: var(--tj-color-theme-dark);
  position: relative;
  overflow: hidden;
  height: 450px;
}
.service-item.style-1::before {
  content: "";
  background: var(--tj-color-theme-dark-2);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  pointer-events: none;
  z-index: 2;
}
.service-item.style-1::after {
  content: "";
  background: var(--tj-color-theme-primary);
  position: absolute;
  width: 100%;
  height: 100%;
  top: -50%;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  -webkit-filter: blur(90px);
          filter: blur(90px);
  backdrop-filter: blur(30px);
  border-radius: 50%;
  opacity: 0;
}
.service-item.style-1 .service-img {
  position: relative;
  height: 100%;
}
.service-item.style-1 .service-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--tj-color-theme-primary);
  border-radius: 12px;
}
.service-item.style-1 .service-icon {
  position: absolute;
  top: 35px;
  inset-inline-start: 30px;
  z-index: 2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .service-item.style-1 .service-icon {
    font-size: 60px;
    width: 70px;
    height: 70px;
  }
}
.service-item.style-1 .service-content {
  position: absolute;
  width: 100%;
  inset-inline-start: 0;
  bottom: 0;
  padding: 40px 30px 20px;
  z-index: 3;
  overflow: hidden;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.service-item.style-1 .service-content .title {
  margin-bottom: 15px;
}
.service-item.style-1 .service-content .title a {
  color: var(--tj-color-common-white);
}
.service-item.style-1 .service-content .title a:hover {
  color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .service-item.style-1 .service-content .title {
    font-size: 19px;
  }
}
.service-item.style-1 .service-content .desc {
  color: var(--tj-color-text-body-2);
  opacity: 0;
  visibility: hidden;
  height: 0;
  -webkit-transition: none;
  transition: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .service-item.style-1 .service-content {
    padding: 25px 20px;
  }
}
@media (max-width: 575px) {
  .service-item.style-1 .service-content {
    padding: 18px 15px;
  }
}
.service-item.style-1 .text-btn {
  position: absolute;
  inset-inline-start: auto;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: none;
  transition: none;
}
.service-item.style-1 .text-btn .btn-text {
  color: var(--tj-color-common-white);
}
.service-item.style-1 .text-btn .btn-icon {
  background-color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .service-item.style-1 .text-btn {
    inset-inline-start: 20px;
  }
}
@media (max-width: 575px) {
  .service-item.style-1 .text-btn {
    inset-inline-start: 15px;
  }
}
.service-item.style-1:hover::before {
  background: var(--tj-color-theme-dark);
  opacity: 0.7;
}
.service-item.style-1:hover::after {
  opacity: 0.3;
}
.service-item.style-1:hover .service-icon {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}
.service-item.style-1:hover .service-content {
  padding-bottom: 95px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .service-item.style-1:hover .service-content {
    padding-bottom: 80px;
  }
}
.service-item.style-1:hover .desc {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.service-item.style-1:hover .text-btn {
  opacity: 1;
  visibility: visible;
  bottom: 40px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .service-item.style-1:hover .text-btn {
    bottom: 30px;
  }
}
@media (max-width: 575px) {
  .service-item.style-1 {
    height: 400px;
  }
}
.service-item-wrapper {
  margin-bottom: 30px;
}
.service-item-wrapper:last-child {
  margin-bottom: 0;
}
.service-item.style-2 {
  background-color: transparent;
  border: 1px dashed var(--tj-color-border-2);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  padding: 65px 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.service-item.style-2 .service-content,
.service-item.style-2 .title-area {
  width: 48%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-2 .service-content,
  .service-item.style-2 .title-area {
    width: 100%;
  }
}
.service-item.style-2 .service-icon {
  margin-bottom: 33px;
}
.service-item.style-2 .service-icon i {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.service-item.style-2 .title {
  color: var(--tj-color-common-white);
  margin-bottom: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-2 .title {
    margin-bottom: 25px;
  }
}
.service-item.style-2 .desc {
  color: var(--tj-color-text-body-2);
  margin-bottom: 22px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-2 .desc {
    margin-bottom: 16px;
  }
}
.service-item.style-2 .list-items li {
  color: var(--tj-color-text-body-2);
}
.service-item.style-2:hover {
  background-color: var(--tj-color-theme-dark-2);
  border-color: var(--tj-color-theme-dark-2);
}
.service-item.style-2:hover .service-icon i {
  -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .service-item.style-2 {
    padding: 40px 25px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-2 {
    padding: 30px 15px;
  }
}
.service-item.style-3 {
  margin-bottom: 20px;
  padding: 40px 60px 40px 30px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.service-item.style-3:hover {
  background-color: var(--tj-color-theme-primary);
}
.service-item.style-3:hover .title {
  color: var(--tj-color-common-white);
}
.service-item.style-3:hover .service-icon {
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 100%);
  border-color: rgba(255, 255, 255, 0.15);
}
.service-item.style-3:hover .service-icon i {
  color: var(--tj-color-common-white);
}
.service-item.style-3:hover .desc {
  color: var(--tj-color-grey-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-item.style-3 {
    padding: 40px 40px 40px 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-3 {
    padding: 30px 20px;
  }
}
.service-item.style-4 {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.service-item.style-4 .service-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 95px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-item.style-4 .service-icon {
    margin-bottom: 75px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-item.style-4 .service-icon {
    width: 80px;
    height: 80px;
    font-size: 60px;
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-4 .service-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 40px;
  }
}
.service-item.style-4 .title {
  max-width: 275px;
}
.service-item.style-4:hover {
  background-color: var(--tj-color-theme-primary);
}
.service-item.style-4:hover .service-icon {
  background: var(--tj-color-common-white);
}
.service-item.style-4:hover .desc,
.service-item.style-4:hover .title {
  color: var(--tj-color-common-white);
}
.service-item.style-4:hover .desc a,
.service-item.style-4:hover .title a {
  color: var(--tj-color-common-white);
}
.service-item.style-4:hover .text-btn .btn-text {
  color: var(--tj-color-common-white);
}
.service-item.style-4:hover .text-btn .btn-icon {
  background-color: var(--tj-color-theme-dark);
}

.list-items {
  list-style: none;
}
.list-items li {
  color: var(--tj-color-text-body);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 9px;
  margin-bottom: 7px;
}
.list-items li:last-child {
  margin-bottom: 0;
}
.list-items li i {
  font-size: 12px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  color: var(--tj-color-theme-primary);
  margin-top: 6px;
}

.service-content-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  z-index: 2;
}
.service-content-wrap .service-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: wrap;
      -ms-flex: wrap;
          flex: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 400px;
  width: 100%;
  gap: 20px;
}
.service-content-wrap .service-title .service-icon {
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
.service-content-wrap .service-title .service-icon i {
  color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-content-wrap .service-title .service-icon {
    font-size: 60px;
    width: 70px;
    height: 70px;
  }
}
.service-content-wrap .service-title .title {
  -webkit-transition: none;
  transition: none;
  margin-bottom: 0;
}
.service-content-wrap .service-title .title a:hover {
  color: var(--tj-color-common-white);
}
.service-content-wrap .service-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.service-content-wrap .service-content .desc {
  max-width: 360px;
  width: 100%;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-content-wrap .service-content .desc {
    max-width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-content-wrap .service-content {
    width: 100%;
    margin-top: 20px;
    -webkit-padding-start: 90px;
            padding-inline-start: 90px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-content-wrap .service-content {
    margin-top: 20px;
    -webkit-padding-start: 80px;
            padding-inline-start: 80px;
  }
}

.service-reveal-bg {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 291px;
  height: 303px;
  opacity: 0;
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transform: translate(-50%, -50%) scale(0.7);
      -ms-transform: translate(-50%, -50%) scale(0.7);
          transform: translate(-50%, -50%) scale(0.7);
  -webkit-transition: opacity 0.6s, -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.6s, -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.6s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.6s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 5;
}
.service-reveal-bg:first-child {
  margin-top: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service-reveal-bg {
    width: 260px;
    height: 270px;
  }
}
@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) {
  .service-reveal-bg {
    display: none;
  }
}

.service-item:first-child .service-reveal-bg {
  margin-top: 40px;
}
.service-item:last-child .service-reveal-bg {
  margin-top: -40px;
}
.service-item:hover .service-reveal-bg {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

.service-btn-area {
  margin-top: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-service-section .content-wrap {
    margin-bottom: 50px;
  }
}

.bg-shape-3,
.bg-shape-4 {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  max-width: 915px;
  z-index: -1;
}

.bg-shape-4 {
  bottom: auto;
  inset-inline-start: auto;
  top: 0;
  inset-inline-end: 0;
  -webkit-transform: scale(-1);
      -ms-transform: scale(-1);
          transform: scale(-1);
}

/* !END: Services CSS */
/**----------------------------------------
START: Theme Marquee CSS
----------------------------------------*/
.tj-marquee-section {
  background-color: var(--tj-color-theme-primary);
  position: relative;
  padding-top: 33px;
  padding-bottom: 37px;
  border-radius: 12px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-marquee-section {
    padding-top: 22px;
    padding-bottom: 16px;
  }
}

.marquee-slider {
  padding-bottom: 10px;
}
.marquee-slider .swiper-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}

.marquee-item {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  -webkit-padding-end: 30px;
          padding-inline-end: 30px;
}
.marquee-item .marquee-text {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--tj-color-common-white);
  font-size: 136px;
  font-weight: var(--tj-fw-sbold);
  font-family: var(--tj-ff-heading);
  line-height: 1.2;
  margin: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .marquee-item .marquee-text {
    font-size: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .marquee-item .marquee-text {
    font-size: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .marquee-item .marquee-text {
    font-size: 50px;
    -webkit-text-stroke: 1px var(--tj-color-common-white);
  }
}
.marquee-item .marquee-img {
  position: relative;
  top: 4px;
  color: var(--tj-color-theme-primary);
  height: 98px;
  border-radius: 4px;
  overflow: hidden;
}
.marquee-item .marquee-img img {
  height: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .marquee-item .marquee-img {
    height: 75px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .marquee-item .marquee-img {
    height: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .marquee-item .marquee-img {
    height: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .marquee-item {
    gap: 25px;
    -webkit-padding-end: 25px;
            padding-inline-end: 25px;
  }
}
@media (max-width: 575px) {
  .marquee-item {
    gap: 20px;
    -webkit-padding-end: 20px;
            padding-inline-end: 20px;
  }
}

/* !END: Theme Marquee CSS */
/**----------------------------------------
START: Project CSS
----------------------------------------*/
.tj-project-section {
  position: relative;
}
.tj-project-section .sec-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.tj-project-section .sec-text {
  max-width: 550px;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tj-project-section .sec-text {
    max-width: 380px;
  }
}
.tj-project-section .project-navigation {
  gap: 20px;
  margin-bottom: 27px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tj-project-section .project-navigation {
    margin-bottom: 20px;
  }
}
.tj-project-section-2 {
  overflow: hidden;
}
.tj-project-section-2 .container-fluid,
.tj-project-section-2 .project-wrapper {
  padding: 0;
}
.tj-project-section-2 .sec-heading {
  max-width: 550px;
}
.tj-project-section-3 {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-project-section-3 .container-fluid {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }
}
.tj-project-section-3 .sub-title {
  color: var(--tj-color-theme-primary);
  border: 0;
  padding: 0;
}
.tj-project-section-3 .sec-title {
  color: var(--tj-color-common-white);
}
.tj-project-section-3 .slider-next,
.tj-project-section-3 .slider-prev {
  border-color: var(--tj-color-border-2);
}
.tj-project-section-3 .slider-next .anim-icon i,
.tj-project-section-3 .slider-prev .anim-icon i {
  color: var(--tj-color-common-white);
}

.project-wrapper {
  padding: 0 15px;
}
@media (max-width: 575px) {
  .project-wrapper {
    padding: 0;
  }
}

.project-area {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  position: relative;
}
.project-area .project-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 550px;
  grid-column: span 1/span 3;
}
.project-area .project-item:first-child, .project-area .project-item:last-child {
  grid-column: span 2/span 3;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .project-area .project-item:first-child, .project-area .project-item:last-child {
    grid-column: span 3/span 5;
  }
}
.project-area .project-item .project-img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset-inline-start: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.project-area .project-item .project-img::before {
  opacity: 0.25;
}
.project-area .project-item .project-content {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  padding: 30px;
  z-index: 3;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .project-area .project-item .project-content {
    padding: 20px;
  }
}
.project-area .project-item .project-content .title {
  color: var(--tj-color-common-white);
  max-width: 245px;
  width: 100%;
  margin-bottom: 0;
}
.project-area .project-item .project-content .title a {
  color: var(--tj-color-common-white);
}
.project-area .project-item .project-content .title a:hover {
  opacity: 0.8;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .project-area .project-item .project-content .title {
    font-size: 20px;
    width: calc(100% - 70px);
  }
}
@media (max-width: 575px) {
  .project-area .project-item .project-content .title {
    font-size: 20px;
    width: calc(100% - 70px);
  }
}
.project-area .project-item .project-content .project-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 18px;
}
.project-area .project-item .project-content .categories a {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--tj-color-common-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.project-area .project-item .project-content .categories a:hover {
  background-color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 576px) and (max-width: 767px) {
  .project-area .project-item .project-content {
    padding: 25px;
  }
}
@media (max-width: 575px) {
  .project-area .project-item .project-content {
    padding: 25px 20px;
  }
}
.project-area .project-item:hover .project-img {
  -webkit-transform: scale(1.1) rotate(-2deg);
      -ms-transform: scale(1.1) rotate(-2deg);
          transform: scale(1.1) rotate(-2deg);
}
.project-area .project-item:hover .project-btn {
  opacity: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .project-area .project-item {
    min-height: 450px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .project-area .project-item {
    min-height: 450px;
    grid-column: span 2/span 5;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .project-area .project-item {
    min-height: 350px;
    grid-column: 1/3;
  }
}
.project-area .project-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 22px;
  backdrop-filter: blur(15px);
  opacity: 0;
}
.project-area .project-btn i {
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-normal);
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.project-area .project-btn:hover {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.project-area .project-btn:hover i {
  color: var(--tj-color-common-white);
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .project-area .project-btn {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
}
@media (max-width: 575px) {
  .project-area .project-btn {
    width: 55px;
    height: 55px;
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .project-area {
    gap: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .project-area {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .project-area {
    min-height: 350px;
    gap: 20px;
    grid-template-columns: 1fr;
  }
}

.project-item {
  background-color: var(--tj-color-common-white);
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.project-item .project-img {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.project-item .project-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.project-item .project-img::before {
  content: "";
  background: var(--tj-color-theme-dark);
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  inset-inline-start: 0;
  opacity: 0.16;
  pointer-events: none;
  z-index: 2;
}
.project-item .project-content {
  padding: 25px 20px 25px 30px;
}
.project-item .project-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 18px;
}
.project-item .title {
  max-width: 245px;
  width: 100%;
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 0;
}
.project-item .title a:hover {
  color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .project-item .title {
    width: calc(100% - 60px);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .project-item .title {
    max-width: 100%;
    width: calc(100% - 60px);
  }
}
.project-item .categories a {
  background-color: transparent;
  backdrop-filter: none;
  color: var(--tj-color-text-body);
  border-color: var(--tj-color-border-1);
}
.project-item:hover .project-img img {
  -webkit-transform: scale(1.1) rotate(-2deg);
      -ms-transform: scale(1.1) rotate(-2deg);
          transform: scale(1.1) rotate(-2deg);
}
.project-item:hover .project-btn {
  opacity: 1;
}

.project-btn {
  font-size: 35px;
  width: 50px;
  height: 50px;
  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;
  opacity: 0;
}
.project-btn i {
  color: var(--tj-color-theme-dark);
  font-weight: var(--tj-fw-bold);
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.project-btn:hover i {
  color: var(--tj-color-theme-primary);
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}

.categories {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}
.categories a {
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 16px;
  line-height: 1;
  color: var(--tj-color-text-body);
  font-weight: var(--tj-fw-medium);
  padding: 2px 7px 4px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--tj-color-border-1);
  backdrop-filter: blur(15px);
}
.categories a:hover {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}

.project-slider .project-item {
  position: relative;
  min-height: 550px;
  overflow: hidden;
}
.project-slider .project-item .project-img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset-inline-start: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.project-slider .project-item .project-content {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  bottom: inherit;
  width: 100%;
  padding: 0 20px;
  z-index: 3;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.project-slider .project-item .project-content .categories {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.project-slider .project-item .project-content .categories a {
  color: var(--tj-color-text-body-2);
  background-color: rgba(255, 255, 255, 0.1);
}
.project-slider .project-item .project-content .categories a:hover {
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-primary);
}
.project-slider .project-item .project-content .title {
  color: var(--tj-color-common-white);
  max-width: 350px;
  margin: 0 auto;
  text-align: center;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .project-slider .project-item .project-content .title {
    font-size: 20px;
    width: calc(100% - 70px);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .project-slider .project-item .project-content .title {
    font-size: 20px;
    width: calc(100% - 70px);
  }
}
@media (max-width: 575px) {
  .project-slider .project-item .project-content .title {
    font-size: 20px;
    width: calc(100% - 70px);
  }
}
.project-slider .project-item .project-content .project-text {
  display: block;
  margin-top: 15px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 576px) and (max-width: 767px) {
  .project-slider .project-item .project-content {
    padding: 25px;
  }
}
@media (max-width: 575px) {
  .project-slider .project-item .project-content {
    padding: 25px 20px;
  }
}
.project-slider .project-item .project-content .project-btn {
  background-color: transparent;
  border: 0;
  opacity: 1;
  backdrop-filter: none;
  width: 60px;
  height: 60px;
  font-size: 52px;
  margin: 35px auto 0;
}
.project-slider .project-item .project-content .project-btn i {
  color: var(--tj-color-common-white);
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.project-slider .project-item .project-content .project-btn:hover i {
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .project-slider .project-item .project-content {
    opacity: 1;
    visibility: visible;
  }
}
.project-slider .project-item:hover .project-img {
  -webkit-transform: scale(1.1) rotate(-2deg);
      -ms-transform: scale(1.1) rotate(-2deg);
          transform: scale(1.1) rotate(-2deg);
}
.project-slider .project-item:hover .project-img::before {
  opacity: 0.6;
}
.project-slider .project-item:hover .project-content {
  opacity: 1;
  visibility: visible;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .project-slider .project-item {
    min-height: 450px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .project-slider .project-item {
    min-height: 400px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .project-slider .project-item {
    min-height: 330px;
  }
}

.project-slider-2 .project-item {
  background-color: var(--tj-color-theme-dark-2);
}
.project-slider-2 .project-item .title {
  color: var(--tj-color-common-white);
  margin-bottom: 0;
}
.project-slider-2 .project-item .title a {
  display: inline;
}
.project-slider-2 .project-item .title a:hover {
  color: var(--tj-color-theme-primary);
}
.project-slider-2 .project-item .categories a {
  background-color: transparent;
  backdrop-filter: none;
  color: var(--tj-color-text-body-2);
  border-color: rgba(255, 255, 255, 0.1);
}
.project-slider-2 .project-item .categories a:hover {
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
.project-slider-2 .project-item .project-btn i {
  color: var(--tj-color-common-white);
}
.project-slider-2 .project-item .project-btn:hover i {
  color: var(--tj-color-theme-primary);
}

/* !END: Project CSS */
/**----------------------------------------
START: Testimonial CSS
----------------------------------------*/
.tj-testimonial-section {
  background-color: var(--tj-color-theme-bg);
  position: relative;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
}
.tj-testimonial-section .sec-heading-wrap {
  padding-top: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-testimonial-section .sec-heading-wrap {
    padding-top: 100px;
  }
}

.testimonial-wrapper {
  position: relative;
  height: 100%;
}
@media (max-width: 575px) {
  .testimonial-wrapper {
    -webkit-margin-end: -12px;
            margin-inline-end: -12px;
  }
}

.testimonial-slider .testimonial-item {
  background-color: var(--tj-color-common-white);
  border: 2px solid var(--tj-color-common-white);
  padding: 45px 26px 35px;
  height: 100%;
  border-radius: 12px;
}
.testimonial-slider .testimonial-item .quote-icon {
  color: var(--tj-color-theme-primary);
  font-size: 46px;
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.testimonial-slider .testimonial-item .rating-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.testimonial-slider .testimonial-item .rating-wrap .rating-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-bg);
  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;
}
.testimonial-slider .testimonial-item .rating-wrap .rating-img img {
  width: 33px;
  height: 33px;
}
.testimonial-slider .testimonial-item .rating-wrap .rating-text {
  color: var(--tj-color-text-body-2);
  font-size: 14px;
}
.testimonial-slider .testimonial-item .rating-wrap .rating-text strong {
  font-size: 16px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-common-black);
}
.testimonial-slider .testimonial-item .desc {
  font-size: 18px;
  line-height: 1.444;
  padding-top: 23px;
  padding-bottom: 22px;
}
.testimonial-slider .testimonial-item .desc p {
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial-slider .testimonial-item .desc {
    font-size: 17px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider .testimonial-item .desc {
    font-size: 16px;
  }
}
.testimonial-slider .testimonial-item .testimonial-author .title {
  line-height: 1;
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 2px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial-slider .testimonial-item {
    padding: 35px 23px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider .testimonial-item {
    padding: 30px 20px;
  }
}
.testimonial-slider .swiper-slide-active .testimonial-item {
  border-color: var(--tj-color-theme-primary);
}

.testimonial-author {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 30px;
  border-top: 1px dashed var(--tj-color-border-1);
}
.testimonial-author .author-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
.testimonial-author .author-img {
  width: 59px;
  height: 59px;
  border-radius: 50%;
  overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-author .author-img {
    width: 50px;
    height: 50px;
  }
}
.testimonial-author .title {
  margin-bottom: 0;
  line-height: 1;
}
.testimonial-author .designation {
  font-size: 14px;
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.testimonial-author .quote-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  color: var(--tj-color-theme-primary);
  font-size: 43px;
}
.testimonial-author .quote-icon i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-author .quote-icon {
    font-size: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-author {
    padding-top: 20px;
  }
}

.star-ratings {
  unicode-bidi: bidi-override;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 3px;
  position: relative;
  margin: 0;
  padding: 0;
  -webkit-text-stroke: 1px var(--tj-color-review);
}
.star-ratings .fill-ratings {
  color: var(--tj-color-review);
  padding: 0;
  position: absolute;
  z-index: 1;
  display: block;
  top: 0;
  inset-inline-start: 0;
  overflow: hidden;
}
.star-ratings .fill-ratings span {
  display: inline-block;
  margin: 0;
}
.star-ratings .empty-ratings {
  padding: 0;
  display: block;
  z-index: 0;
  color: transparent;
}

.tj-testimonial-section-2 {
  overflow: hidden;
}
@media (max-width: 575px) {
  .tj-testimonial-section-2 .testimonial-wrapper {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}

.testimonial-img-area {
  position: relative;
}
.testimonial-img-area .testimonial-img {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.testimonial-img-area .testimonial-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-img-area .testimonial-img img {
    -o-object-fit: unset;
       object-fit: unset;
  }
}
.testimonial-img-area .testimonial-img .sec-heading {
  position: absolute;
  top: 40px;
  inset-inline-start: 30px;
  width: 60%;
  z-index: 2;
}
.testimonial-img-area .testimonial-img .sec-heading .sec-title {
  color: var(--tj-color-common-white);
}
.testimonial-img-area .testimonial-img .sec-heading .sec-title span {
  color: var(--tj-color-text-body-3);
}
.testimonial-img-area .testimonial-img::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  opacity: 0.25;
}
.testimonial-img-area .box-area {
  max-width: 239px;
  bottom: 0;
  inset-inline-end: 0;
  inset-inline-start: inherit;
  padding: 15px 0 0 15px;
  border-start-start-radius: 12px;
  border-start-end-radius: 0;
}
.testimonial-img-area .box-area::before {
  inset-inline-start: inherit;
  inset-inline-end: 0;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.testimonial-img-area .box-area::after {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  inset-inline-start: -12px;
  inset-inline-end: inherit;
}
@media (max-width: 575px) {
  .testimonial-img-area .box-area {
    max-width: 215px;
  }
}

.rating-box {
  background-color: var(--tj-color-theme-primary);
  border-radius: 10px;
  padding: 18px 25px 25px;
}
.rating-box .rating-area {
  margin-bottom: 8px;
}
.rating-box .star-ratings {
  -webkit-text-stroke: 1px var(--tj-color-common-white);
}
.rating-box .star-ratings .fill-ratings {
  color: var(--tj-color-common-white);
}
.rating-box .rating-text {
  color: var(--tj-color-common-white);
}
.rating-box .title {
  font-size: 74px;
  line-height: 1;
  color: var(--tj-color-common-white);
  margin-bottom: 58px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .rating-box .title {
    font-size: 50px;
    margin-bottom: 20px;
  }
}
.rating-box .number {
  color: var(--tj-color-common-white);
  font-size: 20px;
  font-weight: var(--tj-fw-sbold);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1.1;
  border-bottom: 1px solid currentColor;
}
@media (max-width: 575px) {
  .rating-box .number {
    font-size: 18px;
  }
}
@media (max-width: 575px) {
  .rating-box {
    padding: 20px 18px 25px;
  }
}

.testimonial-slider-2 {
  height: 100%;
}
.testimonial-slider-2 .testimonial-item {
  background-color: var(--tj-color-common-white);
  padding: 60px 50px;
  height: 100%;
  border-radius: 12px;
}
.testimonial-slider-2 .testimonial-item .quote-icon {
  color: var(--tj-color-theme-primary);
  font-size: 63px;
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider-2 .testimonial-item .quote-icon {
    font-size: 45px;
  }
}
.testimonial-slider-2 .testimonial-item .desc {
  font-size: 22px;
  line-height: 1.444;
  padding-top: 30px;
  padding-bottom: 15px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial-slider-2 .testimonial-item .desc {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider-2 .testimonial-item .desc {
    font-size: 16px;
    padding-top: 20px;
  }
}
.testimonial-slider-2 .testimonial-item .testimonial-author .author-img {
  width: 80px;
  height: 80px;
}
.testimonial-slider-2 .testimonial-item .testimonial-author .title {
  line-height: 1;
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 2px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-slider-2 .testimonial-item {
    padding: 50px 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial-slider-2 .testimonial-item {
    padding: 35px 26px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider-2 .testimonial-item {
    padding: 30px 20px;
  }
}
.testimonial-slider-2 .swiper-pagination-area {
  position: absolute;
  inset-inline-start: inherit;
  bottom: 60px;
  inset-inline-end: 45px;
  z-index: 10;
  max-width: 200px;
  width: auto;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider-2 .swiper-pagination-area {
    bottom: 30px;
  }
}

.tj-testimonial-section-3 {
  overflow: hidden;
}

.testimonial-wrapper-2 {
  background-color: var(--tj-color-theme-bg);
  border-radius: 12px;
  margin-top: 20px;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}
.testimonial-wrapper-2 .sec-title {
  max-width: 290px;
  width: 100%;
  display: block;
  margin: 0 auto;
  border: 1px dashed var(--tj-color-border-1);
  background-color: var(--tj-color-grey-1);
  border-radius: 40px;
  padding: 2px 22px 4px;
  position: relative;
  top: -19px;
  font-weight: var(--tj-fw-sbold);
}
.testimonial-wrapper-2 .sec-title span {
  color: var(--tj-color-theme-primary);
}
.testimonial-wrapper-2 .client-thumb {
  max-width: 270px;
  margin: 0 auto;
  padding-top: 50px;
}
.testimonial-wrapper-2 .client-thumb .thumb-item {
  margin-bottom: 14px;
}
.testimonial-wrapper-2 .client-thumb .thumb-img {
  width: 82px;
  height: 82px;
  background-color: var(--tj-color-theme-bg);
  border-radius: 50%;
  border: 2px solid transparent;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.testimonial-wrapper-2 .client-thumb .thumb-img img {
  mix-blend-mode: luminosity;
}
.testimonial-wrapper-2 .client-thumb .author-header {
  width: 140px;
  text-align: center;
  margin-top: 15px;
  position: relative;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}
.testimonial-wrapper-2 .client-thumb .author-header .title {
  font-size: 20px;
  line-height: 1;
}
.testimonial-wrapper-2 .client-thumb .swiper-slide-active .thumb-img {
  border-color: var(--tj-color-theme-primary);
}
.testimonial-wrapper-2 .client-thumb .swiper-slide-active .author-header {
  opacity: 1;
  visibility: visible;
}
.testimonial-wrapper-2 .client-thumb .swiper-slide-active img {
  mix-blend-mode: unset;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-wrapper-2 .client-thumb {
    padding-top: 30px;
  }
}
.testimonial-wrapper-2 .testimonial-item {
  background-color: var(--tj-color-common-white);
  border-radius: 12px;
  position: relative;
  margin: 17px 220px 0;
  padding: 40px 38px;
}
.testimonial-wrapper-2 .testimonial-item::before {
  content: "";
  position: absolute;
  top: -12px;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%) rotate(45deg);
      -ms-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
  width: 24px;
  height: 24px;
  background-color: var(--tj-color-common-white);
}
.testimonial-wrapper-2 .testimonial-item .desc {
  font-size: 26px;
  line-height: 1.385;
  text-align: center;
}
.testimonial-wrapper-2 .testimonial-item .desc p {
  margin: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-wrapper-2 .testimonial-item .desc {
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial-wrapper-2 .testimonial-item .desc {
    font-size: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-wrapper-2 .testimonial-item .desc {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-wrapper-2 .testimonial-item {
    margin: 17px 160px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial-wrapper-2 .testimonial-item {
    margin: 17px 120px 0;
    padding: 35px 25px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-wrapper-2 .testimonial-item {
    margin: 17px 15px 0;
    padding: 30px 20px;
  }
}
.testimonial-wrapper-2 .testimonial-navigation {
  position: absolute;
  top: 54%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 5;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.testimonial-wrapper-2 .slider-prev {
  margin-top: -52px;
  -webkit-margin-start: -24px;
          margin-inline-start: -24px;
  background-color: #ecf0f0;
}
.testimonial-wrapper-2 .slider-next {
  background-color: #ecf0f0;
  margin-top: -52px;
  -webkit-margin-end: -24px;
          margin-inline-end: -24px;
}
.testimonial-wrapper-2:hover .testimonial-navigation {
  opacity: 1;
  visibility: visible;
}
.testimonial-wrapper-2 .quote-icon {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  font-size: 299px;
  color: var(--tj-color-theme-primary);
  opacity: 0.1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
.testimonial-wrapper-2 .quote-icon i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-wrapper-2 .quote-icon {
    font-size: 190px;
  }
}
.testimonial-wrapper-2 .bg-shape-2,
.testimonial-wrapper-2 .bg-shape-1 {
  max-width: 280px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-wrapper-2 {
    padding-bottom: 60px;
  }
}

.slider-navigation {
  gap: 13px;
}

.slider-next,
.slider-prev {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 24px;
  background-color: transparent;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.slider-next .anim-icon,
.slider-prev .anim-icon {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  overflow: hidden;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}
.slider-next .anim-icon i,
.slider-prev .anim-icon i {
  position: relative;
  top: 0;
  color: var(--tj-color-common-black);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.slider-next .anim-icon i:last-child,
.slider-prev .anim-icon i:last-child {
  position: absolute;
  -webkit-transform: translateX(150%);
      -ms-transform: translateX(150%);
          transform: translateX(150%);
  color: var(--tj-color-common-white);
}
.slider-next:hover,
.slider-prev:hover {
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.slider-next:hover .anim-icon i:first-child,
.slider-prev:hover .anim-icon i:first-child {
  -webkit-transform: translateX(-150%);
      -ms-transform: translateX(-150%);
          transform: translateX(-150%);
}
.slider-next:hover .anim-icon i:last-child,
.slider-prev:hover .anim-icon i:last-child {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .slider-next,
  .slider-prev {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

.slider-next .anim-icon i:last-child {
  -webkit-transform: translateX(-150%);
      -ms-transform: translateX(-150%);
          transform: translateX(-150%);
}
.slider-next:hover .anim-icon i:first-child {
  -webkit-transform: translateX(150%);
      -ms-transform: translateX(150%);
          transform: translateX(150%);
}

.swiper-pagination-area {
  text-align: center;
  line-height: 0;
  margin-top: 55px;
}
.swiper-pagination-area.white-pagination .swiper-pagination-bullet {
  background-color: var(--tj-color-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .swiper-pagination-area {
    margin-top: 30px;
  }
}
.swiper-pagination-bullet {
  width: 12px;
  height: 8px;
  background-color: var(--tj-color-theme-primary);
  border-radius: 30px;
  opacity: 0.15;
  position: relative;
  margin: 5px;
  -webkit-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}
.swiper-pagination-bullet-active {
  width: 64px;
  opacity: 1;
}

/* !END: Testimonial CSS */
/**----------------------------------------
START: Faq CSS
----------------------------------------*/
.tj-faq-section .sec-heading {
  max-width: 550px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-faq-section .sec-heading {
    max-width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-faq-section .content-wrap .desc {
    margin-bottom: 20px;
  }
  .tj-faq-section .content-wrap .desc br {
    display: none;
  }
}

.faq-img-area {
  max-width: 585px;
  position: relative;
}
.faq-img-area .faq-img {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.faq-img-area .faq-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.faq-img-area .faq-img .title {
  position: absolute;
  top: 40px;
  inset-inline-start: 30px;
  max-width: 400px;
  color: var(--tj-color-common-white);
  z-index: 2;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .faq-img-area .faq-img .title {
    max-width: 280px;
  }
}
.faq-img-area .faq-img::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  opacity: 0.25;
}
.faq-img-area .box-area {
  max-width: 239px;
  bottom: 0;
  inset-inline-end: 0;
  inset-inline-start: inherit;
  padding: 15px 0 0 15px;
  border-start-start-radius: 12px;
  border-start-end-radius: 0;
}
.faq-img-area .box-area::before {
  inset-inline-start: inherit;
  inset-inline-end: 0;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.faq-img-area .box-area::after {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  inset-inline-start: -12px;
  inset-inline-end: inherit;
}
@media (max-width: 575px) {
  .faq-img-area .box-area {
    max-width: 215px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq-img-area {
    max-width: 100%;
  }
}

.call-box {
  background-color: var(--tj-color-theme-primary);
  border-radius: 10px;
  padding: 25px 20px 30px;
}
.call-box .call-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--tj-color-theme-dark);
  color: var(--tj-color-common-white);
  font-size: 20px;
  height: 52px;
  width: 52px;
  border-radius: 50%;
  margin-bottom: 9px;
}
@media (max-width: 575px) {
  .call-box .call-icon {
    font-size: 18px;
    height: 45px;
    width: 45px;
  }
}
.call-box .title {
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-sbold);
  max-width: 145px;
  margin-bottom: 29px;
}
@media (max-width: 575px) {
  .call-box .title {
    margin-bottom: 18px;
  }
}
.call-box .number {
  color: var(--tj-color-common-white);
  font-size: 20px;
  font-weight: var(--tj-fw-sbold);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
.call-box .number span {
  position: relative;
}
.call-box .number span::after {
  content: "";
  position: absolute;
  bottom: -2px;
  inset-inline-end: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}
.call-box .number:hover span::after {
  -webkit-animation: linehover 0.8s linear;
  animation: linehover 0.8s linear;
}
@media (max-width: 575px) {
  .call-box .number {
    font-size: 18px;
  }
}
.call-box:hover .call-icon {
  -webkit-animation: bellshake 0.5s linear;
          animation: bellshake 0.5s linear;
}
@media (max-width: 575px) {
  .call-box {
    padding: 20px 18px 25px;
  }
}

.tj-faq .accordion-item {
  margin-bottom: 20px;
  padding: 0 30px;
  border-radius: 8px;
  border: 0;
  position: relative;
}
.tj-faq .accordion-item:last-child {
  margin-bottom: 0;
}
.tj-faq .accordion-item .faq-title {
  font-size: 18px;
  text-align: start;
  color: var(--tj-color-heading-primary);
  font-family: var(--tj-ff-heading);
  font-weight: var(--tj-fw-sbold);
  padding: 27px 60px 27px 0;
  width: 100%;
  position: relative;
  z-index: 2;
  -webkit-transition: none;
  transition: none;
}
.tj-faq .accordion-item .faq-title::after {
  content: "\e927";
  color: var(--tj-color-theme-primary);
  font-size: 20px;
  font-family: "bexon-icons" !important;
  font-weight: normal;
  text-align: center;
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--tj-color-theme-primary);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-faq .accordion-item .faq-title {
    padding: 20px 40px 20px 0;
  }
}
.tj-faq .accordion-item .accordion-body {
  padding: 0;
  padding-bottom: 25px;
  margin-top: 15px;
  color: var(--tj-color-text-body);
}
.tj-faq .accordion-item .accordion-body p:last-child {
  margin-bottom: 0;
}
.tj-faq .accordion-item.active .faq-title {
  border-bottom: 1px dashed var(--tj-color-border-1);
}
.tj-faq .accordion-item.active .faq-title::after {
  content: "\e918";
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-faq .accordion-item {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-faq {
    padding-top: 40px;
  }
}
.tj-faq.style-2 .accordion-item.active {
  background-color: var(--tj-color-theme-primary);
}
.tj-faq.style-2 .accordion-item.active .faq-title {
  color: var(--tj-color-common-white);
  border-color: rgba(255, 255, 255, 0.15);
}
.tj-faq.style-2 .accordion-item.active .faq-title::after {
  color: var(--tj-color-common-white);
  border-color: rgba(255, 255, 255, 0.1);
}
.tj-faq.style-2 .accordion-item.active .accordion-body p {
  color: var(--tj-color-common-white);
}

/* !END: Faq CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.tj-blog-section .sec-heading {
  max-width: 550px;
}
.tj-blog-section-2 .sec-heading-wrap .sub-title {
  color: var(--tj-color-theme-primary);
  background-color: var(--tj-color-common-white);
  border: 0;
  padding: 7px 10px;
}
.tj-blog-section-3 {
  background-color: var(--tj-color-theme-bg);
  border-radius: 12px;
  position: relative;
  z-index: 1;
}
.tj-blog-section-3 .sec-heading {
  max-width: 550px;
}

.blog-item {
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.blog-item .blog-thumb {
  min-height: 280px;
  overflow: hidden;
  position: relative;
}
.blog-item .blog-thumb::before {
  content: "";
  background-color: var(--tj-color-theme-dark);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  opacity: 0.25;
  z-index: 1;
  pointer-events: none;
}
.blog-item .blog-thumb img {
  width: 100%;
  min-height: 280px;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .blog-item .blog-thumb {
    min-height: 240px;
  }
  .blog-item .blog-thumb img {
    min-height: 240px;
  }
}
.blog-item .blog-content {
  background-color: var(--tj-color-common-white);
  padding: 25px 28px 35px 28px;
  height: 100%;
}
.blog-item .blog-content .title {
  font-weight: var(--tj-fw-sbold);
  margin: 0;
}
.blog-item .blog-content .title a {
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 100%);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 85%;
  display: inline;
}
.blog-item .blog-content .title a:hover {
  background-size: 100% 2px;
}
.blog-item .blog-content .desc {
  margin-top: 15px;
}
.blog-item .blog-content .desc:last-of-type {
  margin-bottom: 0;
}
.blog-item .blog-content .text-btn {
  margin-top: 15px;
}
.blog-item .blog-content .categories a:hover {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
.blog-item:hover .blog-thumb img {
  -webkit-transform: scale(1.1) rotate(-2deg);
      -ms-transform: scale(1.1) rotate(-2deg);
          transform: scale(1.1) rotate(-2deg);
}
.blog-item.style-2 {
  padding: 15px 0 15px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: var(--tj-color-common-white);
}
@media (max-width: 575px) {
  .blog-item.style-2 {
    padding: 15px;
  }
}
.blog-item.style-2 .blog-thumb {
  width: 47%;
  border-radius: 10px;
}
@media (max-width: 575px) {
  .blog-item.style-2 .blog-thumb {
    width: 100%;
  }
}
.blog-item.style-2 .blog-content {
  width: 53%;
  height: auto;
  padding: 35px 30px;
  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: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-item.style-2 .blog-content .title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-item.style-2 .blog-content {
    padding: 30px 24px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-item.style-2 .blog-content {
    padding: 25px 20px;
  }
}
@media (max-width: 575px) {
  .blog-item.style-2 .blog-content {
    width: 100%;
    padding: 25px 12px 15px;
  }
}
.blog-item.style-3 {
  border: 0;
  padding: 0;
  position: relative;
}
.blog-item.style-3 .blog-thumb::before {
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(12, 30, 33)), to(rgba(12, 30, 33, 0)));
  background: linear-gradient(0deg, rgb(12, 30, 33) 0%, rgba(12, 30, 33, 0) 100%);
  opacity: 1;
}
.blog-item.style-3 .blog-content {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  padding: 28px;
  z-index: 3;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: transparent;
}
.blog-item.style-3 .blog-content .title a {
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .blog-item.style-3 .blog-content .title {
    font-size: 19px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-item.style-3 .blog-content {
    padding: 25px 20px;
  }
}
@media (max-width: 575px) {
  .blog-item.style-3 .blog-content {
    padding: 18px 15px;
  }
}
.blog-item.style-3 .blog-meta .categories a {
  color: var(--tj-color-text-body-2);
  border-color: transparent;
}
.blog-item.style-3 .blog-meta .categories a:hover {
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
.blog-item.style-3 .blog-meta span {
  color: var(--tj-color-text-body-2);
}
.blog-item.style-3 .blog-meta span a {
  color: var(--tj-color-grey-1);
}
.blog-item.style-3 .text-btn {
  position: absolute;
  margin: 0;
  inset-inline-start: 30px;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.blog-item.style-3 .text-btn .btn-text {
  color: var(--tj-color-common-white);
}
.blog-item.style-3 .text-btn .btn-icon {
  background-color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-item.style-3 .text-btn {
    inset-inline-start: 20px;
  }
}
@media (max-width: 575px) {
  .blog-item.style-3 .text-btn {
    inset-inline-start: 15px;
  }
}
.blog-item.style-3:hover::before {
  height: 100%;
}
.blog-item.style-3:hover .blog-content {
  padding-bottom: 90px;
}
@media (max-width: 575px) {
  .blog-item.style-3:hover .blog-content {
    padding-bottom: 70px;
  }
}
.blog-item.style-3:hover .text-btn {
  opacity: 1;
  visibility: visible;
  bottom: 35px;
}
@media (max-width: 575px) {
  .blog-item.style-3:hover .text-btn {
    bottom: 25px;
  }
}

.blog-date {
  position: absolute;
  inset-inline-start: 15px;
  top: 15px;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 6px;
  z-index: 2;
}
.blog-date .date {
  display: block;
  font-family: var(--tj-ff-heading);
  font-size: 32px;
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-medium);
  letter-spacing: -0.96px;
  margin-bottom: 8px;
  line-height: 1;
}
.blog-date .month {
  display: block;
  font-size: 14px;
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-bold);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1;
}

.blog-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.blog-meta span {
  color: var(--tj-color-text-body-3);
  line-height: 1;
}
.blog-meta span a {
  color: var(--tj-color-heading-primary);
}
.blog-meta span a:hover {
  color: var(--tj-color-theme-primary);
}
@media (max-width: 575px) {
  .blog-meta {
    margin-bottom: 15px;
  }
}

.blog-post-wrapper .blog-item {
  margin-bottom: 40px;
}
.blog-post-wrapper .blog-item .blog-thumb {
  border-radius: 12px;
}
.blog-post-wrapper .blog-item .blog-content {
  background-color: transparent;
  padding: 25px 0 0 0;
}
.blog-post-wrapper .blog-item .blog-meta {
  margin-bottom: 12px;
}

.tj-pagination {
  margin-top: 50px;
}
.tj-pagination ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.tj-pagination ul li .page-numbers {
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  line-height: 48px;
  text-align: center;
  border: 1px solid var(--tj-color-border-1);
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-heading-primary);
}
.tj-pagination ul li .page-numbers i {
  line-height: 1;
  color: var(--tj-color-heading-primary);
}
.tj-pagination ul li .page-numbers:hover {
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  border-color: var(--tj-color-theme-primary);
}
.tj-pagination ul li .page-numbers:hover i {
  color: var(--tj-color-common-white);
}
.tj-pagination ul li .page-numbers.current {
  background-color: var(--tj-color-theme-dark);
  color: var(--tj-color-common-white);
  border-color: var(--tj-color-theme-dark);
}
.tj-pagination ul li .page-numbers.current i {
  color: var(--tj-color-common-white);
}
.tj-pagination ul li .page-numbers.next {
  font-size: 22px;
}

/* !END: Blog CSS */
/**----------------------------------------
START: CTA CSS
----------------------------------------*/
/* Removed the negative margin-bottom pattern that originally pulled the
   footer up to overlap the CTA card — it was clipping the "Let's Build
   Future Together" title + the "Get Started Now" button. The CTA now
   sits fully visible above the footer with normal flow spacing. */
.tj-cta-section {
  /* Bottom padding trimmed so the CTA section doesn't add a second
   * gap on top of .dawki-cta-modern's own padding-bottom.
   * Was: padding-bottom: 40px. */
  margin-bottom: 0;
  padding-bottom: 0;
}

.cta-area {
  background-color: var(--tj-color-theme-primary);
  position: relative;
  z-index: 3;
  overflow: hidden;
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.cta-area .cta-content {
  width: 50%;
  margin: 0;
  padding: 44px 15px 60px 55px;
}
.cta-area .cta-content .title {
  font-size: 74px;
  line-height: 1.12;
  color: var(--tj-color-common-white);
  margin-bottom: 17px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cta-area .cta-content .title {
    font-size: 62px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta-area .cta-content .title {
    font-size: 56px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta-area .cta-content .title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cta-area .cta-content .title {
    font-size: 50px;
  }
}
@media (max-width: 575px) {
  .cta-area .cta-content .title {
    font-size: 43px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta-area .cta-content {
    padding: 34px 15px 45px 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cta-area .cta-content {
    width: 100%;
    padding: 34px 30px 45px 30px;
  }
}
.cta-area .cta-img {
  width: 50%;
}
.cta-area .cta-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .cta-area .cta-img {
    width: 100%;
  }
}

/* !END: CTA CSS */
/**----------------------------------------
START: Countup CSS
----------------------------------------*/
.tj-countup-section {
  position: relative;
  z-index: 2;
  margin-bottom: -122px;
}

.countup-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: var(--tj-color-theme-primary);
  border-radius: 12px;
}

.countup-item {
  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;
  width: 25%;
  padding: 68px 50px 74px 50px;
  position: relative;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .countup-item {
    padding: 55px 30px 60px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .countup-item {
    width: 50%;
    padding: 45px 30px 50px 30px;
  }
}
@media (max-width: 575px) {
  .countup-item {
    width: 100%;
    padding: 38px 0 45px 0;
    text-align: center;
  }
  .countup-item:last-child {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .countup-item:nth-child(2) .count-separator {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .countup-item:nth-child(4), .countup-item:nth-child(3) {
    padding-top: 0;
  }
}

.inline-content {
  font-size: 50px;
  line-height: 1;
  font-weight: var(--tj-fw-medium);
  color: var(--tj-color-common-white);
  font-family: var(--tj-ff-heading);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 5px;
  letter-spacing: -1.48px;
}
.inline-content .odometer {
  font-weight: var(--tj-fw-medium);
  color: var(--tj-color-common-white);
  font-family: var(--tj-ff-heading);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.inline-content .odometer .odometer-digit,
.inline-content .odometer span {
  font-weight: var(--tj-fw-medium);
  color: var(--tj-color-common-white);
  font-family: var(--tj-ff-heading);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: bottom;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .inline-content {
    font-size: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .inline-content {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .inline-content {
    font-size: 55px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.count-text {
  color: var(--tj-color-common-white);
  display: block;
}

.count-separator {
  position: absolute;
  width: 10px;
  height: 90px;
  top: 50%;
  inset-inline-end: -5px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0.15;
}
@media (max-width: 575px) {
  .count-separator {
    top: inherit;
    bottom: 0;
    inset-inline-end: 50%;
    -webkit-transform: translate(0, 50%) rotate(90deg);
        -ms-transform: translate(0, 50%) rotate(90deg);
            transform: translate(0, 50%) rotate(90deg);
  }
}

/* !END: Countup CSS */
/**----------------------------------------
START: Working process CSS
----------------------------------------*/
.tj-working-process {
  background-color: var(--tj-color-theme-bg);
  position: relative;
  z-index: 1;
  border-radius: 12px;
}
.tj-working-process .sec-heading-wrap .sub-title {
  color: var(--tj-color-theme-primary);
  background-color: var(--tj-color-common-white);
  border: 0;
  padding: 7px 10px;
}
.tj-working-process .content-wrap {
  margin-bottom: 45px;
}

.working-process-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px;
}

.process-item {
  max-width: 422px;
  width: 100%;
  background-color: var(--tj-color-common-white);
  padding: 25px 28px 40px 28px;
  position: relative;
  border-radius: 10px;
  z-index: 3;
}
.process-item:nth-child(2) {
  z-index: 2;
}
.process-item:last-child {
  z-index: 1;
}
.process-item:not(:last-child)::after {
  content: "\e916";
  font-size: 24px;
  line-height: 1;
  color: var(--tj-color-theme-primary);
  font-family: "bexon-icons" !important;
  font-weight: normal;
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: var(--tj-color-common-white);
  border: 7px solid var(--tj-color-theme-bg);
  top: 50%;
  inset-inline-end: -34px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 5;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-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: none;
  transition: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .process-item:not(:last-child)::after {
    font-size: 20px;
    width: 50px;
    height: 50px;
    inset-inline-end: -30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .process-item:not(:last-child)::after {
    -webkit-transform: translate(-50%, 0) rotate(90deg);
        -ms-transform: translate(-50%, 0) rotate(90deg);
            transform: translate(-50%, 0) rotate(90deg);
    top: inherit;
    inset-inline-end: inherit;
    bottom: -40px;
    inset-inline-start: 50%;
  }
}
.process-item .process-step {
  font-size: 120px;
  color: var(--tj-color-theme-primary);
  background: -webkit-gradient(linear, left top, left bottom, from(var(--tj-color-theme-primary)), color-stop(90%, var(--tj-color-common-white)));
  background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-common-white) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: var(--tj-fw-sbold);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  margin-bottom: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .process-item .process-step {
    font-size: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .process-item .process-step {
    font-size: 80px;
    margin-bottom: 20px;
  }
}
.process-item .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .process-item .title {
    margin-bottom: 10px;
  }
}
.process-item .desc {
  margin: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .process-item {
    max-width: 362px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .process-item {
    max-width: 302px;
    padding: 35px 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .process-item {
    max-width: 100%;
    padding: 35px 15px 30px 15px;
  }
}

.working-process-wrap {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .working-process-wrap {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .working-process-wrap {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .working-process-wrap .content-wrap {
    margin-bottom: 30px;
  }
}

.tj-faq.style-3 {
  max-width: 460px;
  width: 100%;
  padding: 0;
  counter-reset: steps;
}
.tj-faq.style-3 .accordion-item {
  background: transparent;
  border: none;
  -webkit-border-start: 4px solid var(--tj-color-border-1);
          border-inline-start: 4px solid var(--tj-color-border-1);
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
  margin-bottom: 0;
}
.tj-faq.style-3 .accordion-item .faq-title {
  -webkit-padding-end: 0;
          padding-inline-end: 0;
  -webkit-padding-start: 27px;
          padding-inline-start: 27px;
  color: var(--tj-color-heading-primary);
}
.tj-faq.style-3 .accordion-item .faq-title::after {
  display: none;
}
.tj-faq.style-3 .accordion-item .faq-title::before {
  counter-increment: steps;
  content: "0" counter(steps) ".";
  font-size: 14px;
  line-height: 1;
  font-weight: var(--tj-fw-medium);
  position: absolute;
  top: 50%;
  inset-inline-start: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-faq.style-3 .accordion-item .faq-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-faq.style-3 .accordion-item .faq-title {
    font-size: 18px;
  }
}
.tj-faq.style-3 .accordion-item .accordion-body {
  padding: 0 0 23px 27px;
}
.tj-faq.style-3 .accordion-item.active {
  border-color: var(--tj-color-theme-primary);
}
.tj-faq.style-3 .accordion-item.active .faq-title::before {
  color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-faq.style-3 .accordion-item {
    -webkit-padding-start: 10px;
            padding-inline-start: 10px;
  }
}

.working-img-area {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 50%;
  height: 100%;
}
.working-img-area .circle-text-wrap.video-btn {
  inset-inline-end: inherit;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 5;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .working-img-area .circle-text-wrap.video-btn {
    width: 130px;
    height: 130px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .working-img-area {
    position: relative;
    width: 100%;
    min-height: 500px;
  }
}

.working-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 2;
}
.working-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* !END: Working process CSS */
/**----------------------------------------
START: Contact CSS
----------------------------------------*/
.tj-contact-section {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.tj-contact-section .sec-heading {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  margin-bottom: 35px;
}
.tj-contact-section .sec-heading .sec-title {
  color: var(--tj-color-common-white);
}

.map-area {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.map-area iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .map-area {
    height: auto;
    margin-top: 30px;
  }
}

.contact-info .contact-item {
  padding: 13px 0 9px 0;
}
.contact-info .contact-item .subtitle {
  display: block;
  font-size: 14px;
  line-height: 1;
  color: var(--tj-color-text-body-2);
  margin-bottom: 7px;
}
.contact-info .contact-item a:hover {
  color: var(--tj-color-theme-primary);
}
.contact-info .contact-item .contact-link {
  display: inline-block;
  color: var(--tj-color-common-white);
}
.contact-info .contact-item:last-child {
  border: 0;
}

.contact-form {
  background-color: var(--tj-color-common-white);
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 15px;
          margin-inline-end: 15px;
  padding: 60px 50px;
  border-radius: 12px;
}
.contact-form .title {
  margin-bottom: 35px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .contact-form .title {
    margin-bottom: 25px;
  }
}
.contact-form .form-input {
  margin-bottom: 27px;
  position: relative;
}
.contact-form .form-input textarea,
.contact-form .form-input select,
.contact-form .form-input .nice-select,
.contact-form .form-input input[type=tel],
.contact-form .form-input input[type=text],
.contact-form .form-input input[type=email] {
  background-color: transparent;
  color: var(--tj-color-text-body-3);
  padding: 11px 0;
  border: 0;
  border-bottom: 1px dashed var(--tj-color-border-1);
}
.contact-form .form-input textarea::-webkit-input-placeholder,
.contact-form .form-input select::-webkit-input-placeholder,
.contact-form .form-input .nice-select::-webkit-input-placeholder,
.contact-form .form-input input[type=tel]::-webkit-input-placeholder,
.contact-form .form-input input[type=text]::-webkit-input-placeholder,
.contact-form .form-input input[type=email]::-webkit-input-placeholder {
  color: var(--tj-color-text-body-3);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form .form-input textarea::-moz-placeholder,
.contact-form .form-input select::-moz-placeholder,
.contact-form .form-input .nice-select::-moz-placeholder,
.contact-form .form-input input[type=tel]::-moz-placeholder,
.contact-form .form-input input[type=text]::-moz-placeholder,
.contact-form .form-input input[type=email]::-moz-placeholder {
  color: var(--tj-color-text-body-3);
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form .form-input textarea:-ms-input-placeholder,
.contact-form .form-input select:-ms-input-placeholder,
.contact-form .form-input .nice-select:-ms-input-placeholder,
.contact-form .form-input input[type=tel]:-ms-input-placeholder,
.contact-form .form-input input[type=text]:-ms-input-placeholder,
.contact-form .form-input input[type=email]:-ms-input-placeholder {
  color: var(--tj-color-text-body-3);
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form .form-input textarea::-webkit-input-placeholder, .contact-form .form-input select::-webkit-input-placeholder, .contact-form .form-input .nice-select::-webkit-input-placeholder, .contact-form .form-input input[type=tel]::-webkit-input-placeholder, .contact-form .form-input input[type=text]::-webkit-input-placeholder, .contact-form .form-input input[type=email]::-webkit-input-placeholder {
  color: var(--tj-color-text-body-3);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form .form-input textarea::-moz-placeholder, .contact-form .form-input select::-moz-placeholder, .contact-form .form-input .nice-select::-moz-placeholder, .contact-form .form-input input[type=tel]::-moz-placeholder, .contact-form .form-input input[type=text]::-moz-placeholder, .contact-form .form-input input[type=email]::-moz-placeholder {
  color: var(--tj-color-text-body-3);
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form .form-input textarea:-ms-input-placeholder, .contact-form .form-input select:-ms-input-placeholder, .contact-form .form-input .nice-select:-ms-input-placeholder, .contact-form .form-input input[type=tel]:-ms-input-placeholder, .contact-form .form-input input[type=text]:-ms-input-placeholder, .contact-form .form-input input[type=email]:-ms-input-placeholder {
  color: var(--tj-color-text-body-3);
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form .form-input textarea::-ms-input-placeholder, .contact-form .form-input select::-ms-input-placeholder, .contact-form .form-input .nice-select::-ms-input-placeholder, .contact-form .form-input input[type=tel]::-ms-input-placeholder, .contact-form .form-input input[type=text]::-ms-input-placeholder, .contact-form .form-input input[type=email]::-ms-input-placeholder {
  color: var(--tj-color-text-body-3);
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form .form-input textarea::placeholder,
.contact-form .form-input select::placeholder,
.contact-form .form-input .nice-select::placeholder,
.contact-form .form-input input[type=tel]::placeholder,
.contact-form .form-input input[type=text]::placeholder,
.contact-form .form-input input[type=email]::placeholder {
  color: var(--tj-color-text-body-3);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form .form-input textarea:focus,
.contact-form .form-input select:focus,
.contact-form .form-input .nice-select:focus,
.contact-form .form-input input[type=tel]:focus,
.contact-form .form-input input[type=text]:focus,
.contact-form .form-input input[type=email]:focus {
  border-color: var(--tj-color-theme-dark);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .contact-form .form-input textarea,
  .contact-form .form-input select,
  .contact-form .form-input .nice-select,
  .contact-form .form-input input[type=tel],
  .contact-form .form-input input[type=text],
  .contact-form .form-input input[type=email] {
    padding: 6px 0 10px;
  }
}
.contact-form .form-input .cf-label {
  font-size: 16px;
  color: var(--tj-color-text-body-3);
  position: absolute;
  top: 10px;
  inset-inline-start: 0;
  pointer-events: none;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.contact-form .form-input .cf-label span {
  color: var(--tj-color-theme-primary);
}
.contact-form .form-input textarea:focus ~ .cf-label,
.contact-form .form-input input[type=tel]:focus ~ .cf-label,
.contact-form .form-input input[type=text]:focus ~ .cf-label,
.contact-form .form-input input[type=email]:focus ~ .cf-label {
  visibility: hidden;
  opacity: 0;
}
.contact-form .form-input .nice-select {
  color: var(--tj-color-text-body-3);
  line-height: 1.5;
  border-radius: 0;
  margin-bottom: 27px;
}
.contact-form .form-input .nice-select .list {
  width: 100%;
  border-radius: 8px;
}
.contact-form .form-input .nice-select .list .option {
  color: var(--tj-color-theme-dark);
  padding: 0 20px;
}
.contact-form .form-input .nice-select .list .option:hover, .contact-form .form-input .nice-select .list .option.focus {
  background: var(--tj-color-theme-bg);
  color: var(--tj-color-theme-dark);
}
.contact-form .form-input .nice-select::after {
  content: "\e929";
  font-family: "bexon-icons";
  color: var(--tj-color-common-black);
  font-size: 16px;
  line-height: 1;
  width: 16px;
  height: 16px;
  top: 20px;
  inset-inline-end: 5px;
  border: 0;
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}
.contact-form .form-input .nice-select.open::after {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .contact-form .form-input .nice-select {
    margin-bottom: 20px;
  }
}
.contact-form .form-input textarea {
  height: 130px;
  resize: none;
  padding-top: 0;
}
.contact-form .form-input.message-input {
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .contact-form .form-input {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .contact-form {
    max-width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .contact-form {
    padding: 25px 20px 30px;
  }
}
.contact-form.style-2 {
  max-width: 610px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 2;
}
.contact-form.style-2 .title {
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .contact-form.style-2 .title {
    margin-bottom: 20px;
  }
}
.contact-form.style-2 .form-input {
  margin-bottom: 27px;
  position: relative;
}
.contact-form.style-2 .form-input.message-input {
  margin-top: 0;
}
@media (max-width: 575px) {
  .contact-form.style-2 .form-input.message-input {
    margin-top: 20px;
  }
}
.contact-form.style-2 .form-input textarea,
.contact-form.style-2 .form-input input[type=tel],
.contact-form.style-2 .form-input input[type=text],
.contact-form.style-2 .form-input input[type=email] {
  color: var(--tj-color-text-body-2);
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.contact-form.style-2 .form-input textarea::-webkit-input-placeholder,
.contact-form.style-2 .form-input input[type=tel]::-webkit-input-placeholder,
.contact-form.style-2 .form-input input[type=text]::-webkit-input-placeholder,
.contact-form.style-2 .form-input input[type=email]::-webkit-input-placeholder {
  color: var(--tj-color-text-body-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-2 .form-input textarea::-moz-placeholder,
.contact-form.style-2 .form-input input[type=tel]::-moz-placeholder,
.contact-form.style-2 .form-input input[type=text]::-moz-placeholder,
.contact-form.style-2 .form-input input[type=email]::-moz-placeholder {
  color: var(--tj-color-text-body-2);
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-2 .form-input textarea:-ms-input-placeholder,
.contact-form.style-2 .form-input input[type=tel]:-ms-input-placeholder,
.contact-form.style-2 .form-input input[type=text]:-ms-input-placeholder,
.contact-form.style-2 .form-input input[type=email]:-ms-input-placeholder {
  color: var(--tj-color-text-body-2);
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-2 .form-input textarea::-webkit-input-placeholder, .contact-form.style-2 .form-input input[type=tel]::-webkit-input-placeholder, .contact-form.style-2 .form-input input[type=text]::-webkit-input-placeholder, .contact-form.style-2 .form-input input[type=email]::-webkit-input-placeholder {
  color: var(--tj-color-text-body-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-2 .form-input textarea::-moz-placeholder, .contact-form.style-2 .form-input input[type=tel]::-moz-placeholder, .contact-form.style-2 .form-input input[type=text]::-moz-placeholder, .contact-form.style-2 .form-input input[type=email]::-moz-placeholder {
  color: var(--tj-color-text-body-2);
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-2 .form-input textarea:-ms-input-placeholder, .contact-form.style-2 .form-input input[type=tel]:-ms-input-placeholder, .contact-form.style-2 .form-input input[type=text]:-ms-input-placeholder, .contact-form.style-2 .form-input input[type=email]:-ms-input-placeholder {
  color: var(--tj-color-text-body-2);
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-2 .form-input textarea::-ms-input-placeholder, .contact-form.style-2 .form-input input[type=tel]::-ms-input-placeholder, .contact-form.style-2 .form-input input[type=text]::-ms-input-placeholder, .contact-form.style-2 .form-input input[type=email]::-ms-input-placeholder {
  color: var(--tj-color-text-body-2);
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-2 .form-input textarea::placeholder,
.contact-form.style-2 .form-input input[type=tel]::placeholder,
.contact-form.style-2 .form-input input[type=text]::placeholder,
.contact-form.style-2 .form-input input[type=email]::placeholder {
  color: var(--tj-color-text-body-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-2 .form-input textarea:focus,
.contact-form.style-2 .form-input input[type=tel]:focus,
.contact-form.style-2 .form-input input[type=text]:focus,
.contact-form.style-2 .form-input input[type=email]:focus {
  border-color: rgb(255, 255, 255);
}
.contact-form.style-2 .form-input .cf-label {
  color: var(--tj-color-text-body-2);
}
.contact-form.style-2 .form-input .nice-select {
  color: var(--tj-color-text-body-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.contact-form.style-2 .form-input .nice-select.open {
  border-color: rgb(255, 255, 255);
}
.contact-form.style-2 .form-input .nice-select::after {
  color: var(--tj-color-common-white);
  font-size: 13px;
  width: 13px;
  height: 13px;
}
.contact-form.style-2 .form-input textarea {
  height: 140px;
}
@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) {
  .contact-form.style-2 {
    max-width: 100%;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .contact-form.style-2 {
    padding: 35px 20px 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .contact-form {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}

.contact-item.style-2 {
  padding: 30px 25px 40px;
  background-color: var(--tj-color-common-white);
  text-align: center;
  border-radius: 12px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-item.style-2 {
    padding: 25px;
  }
}
.contact-item.style-2 p {
  margin-bottom: 0;
  max-width: 224px;
  margin: 0 auto;
}
.contact-item.style-2:hover .contact-icon {
  background: var(--tj-color-theme-primary);
}
.contact-item.style-2:hover .contact-icon i {
  color: var(--tj-color-common-white);
}
.contact-item.style-2 .contact-icon {
  width: 88px;
  height: 88px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: var(--tj-color-theme-bg);
  border-radius: 50%;
  margin-bottom: 22px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.contact-item.style-2 .contact-icon i {
  font-size: 32px;
  color: var(--tj-color-theme-primary);
}
.contact-item.style-2 .contact-title {
  font-size: 24px;
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-item.style-2 .contact-title {
    font-size: 20px;
  }
}
.contact-item.style-2 .contact-list {
  list-style: none;
}
.contact-item.style-2 .contact-list li a {
  color: var(--tj-color-text-body);
}
.contact-item.style-2 .contact-list li a:hover {
  color: var(--tj-color-theme-primary);
}
.contact-item.style-2 .contact-list li.active a {
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-theme-primary);
}

.global-map {
  width: 1167px;
  height: 100%;
  position: relative;
  z-index: 1;
  inset-inline-start: -115px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.global-map::before {
  content: "";
  position: absolute;
  top: 30%;
  inset-inline-start: 28%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--tj-color-theme-primary);
  -webkit-filter: blur(40px);
  filter: blur(40px);
  opacity: 0.1;
  z-index: -1;
  backdrop-filter: blur(10px);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .global-map::before {
    width: 120px;
    height: 120px;
    top: 25%;
    inset-inline-start: 27%;
  }
}
@media (max-width: 575px) {
  .global-map::before {
    width: 100px;
    height: 100px;
    inset-inline-start: 25%;
  }
}
.global-map-img {
  position: relative;
  width: 100%;
  z-index: 2;
}
.global-map-img img {
  width: 100%;
  opacity: 0.4;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .global-map-img {
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .global-map {
    inset-inline-start: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .global-map {
    width: calc(100% + 360px);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .global-map {
    width: calc(100% + 300px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .global-map {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .global-map {
    width: 580px;
    inset-inline-start: -20px;
  }
}

.location-indicator {
  width: 19px;
  height: 19px;
  background-color: var(--tj-color-common-white);
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
  z-index: 1;
}
@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) {
  .location-indicator {
    width: 12px;
    height: 12px;
  }
}
.location-indicator.loc-1 {
  top: 38%;
  inset-inline-start: 21%;
}
.location-indicator.loc-2 {
  top: 36%;
  inset-inline-start: 46%;
}
.location-indicator.loc-3 {
  top: 73%;
  inset-inline-start: 30%;
}
.location-indicator::after {
  content: "";
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
  height: 100%;
  z-index: -2;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  border-radius: 50%;
  -webkit-animation: pulse4 1.6s linear infinite;
          animation: pulse4 1.6s linear infinite;
}
.location-indicator:hover .location-tooltip {
  opacity: 1;
  visibility: visible;
  margin-bottom: 42px;
}
.location-tooltip {
  width: 222px;
  background-color: var(--tj-color-theme-primary);
  font-size: 14px;
  padding: 15px;
  position: absolute;
  margin-bottom: 35px;
  inset-inline-start: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  cursor: default;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.location-tooltip::after {
  content: "";
  background: var(--tj-color-theme-primary);
  width: 14px;
  height: 14px;
  z-index: -1;
  position: absolute;
  inset-inline-start: 50%;
  bottom: -7px;
  -webkit-transform: translateX(-50%) rotate(45deg);
      -ms-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
}
.location-tooltip span {
  color: var(--tj-color-common-white);
  margin-bottom: 5px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.location-tooltip p {
  color: var(--tj-color-common-white);
  margin-bottom: 5px;
}
.location-tooltip a {
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-medium);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.location-tooltip a:hover {
  color: var(--tj-color-theme-bg);
}
@media (max-width: 575px) {
  .location-tooltip {
    width: 205px;
  }
}

/* !END: Contact CSS */
/**----------------------------------------
START: Theme Slider CSS
----------------------------------------*/
.tj-slider-section {
  position: relative;
  z-index: 1;
  margin: 0 15px 0 15px;
  border-radius: 16px;
  overflow: hidden;
}
.tj-slider-section .banner-scroll {
  inset-inline-start: 60px;
  bottom: 60px;
}
.tj-slider-section .banner-scroll .scroll-down {
  color: var(--tj-color-common-white);
}
.tj-slider-section .banner-scroll .scroll-down span {
  border-color: var(--tj-color-common-white);
}
.tj-slider-section .banner-scroll .scroll-down span::before {
  background-color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-slider-section .banner-scroll {
    inset-inline-start: 27px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-slider-section .banner-scroll {
    inset-inline-start: 12px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-slider-section {
    border-radius: 14px;
    margin: 0 12px 0;
  }
}

.tj-slider-item {
  min-height: 92.5vh;
  background-color: #0c1e21;
  position: relative;
  z-index: 1;
}
.tj-slider-item::after {
  position: absolute;
  content: "";
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgb(12, 30, 33)), color-stop(60%, rgba(12, 30, 33, 0.4)), to(rgba(12, 30, 33, 0.1)));
  background: linear-gradient(90deg, rgb(12, 30, 33) 20%, rgba(12, 30, 33, 0.4) 60%, rgba(12, 30, 33, 0.1) 100%);
}
.tj-slider-item .slider-wrapper {
  padding: 195px 0 347px;
  position: relative;
  z-index: 3;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .tj-slider-item .slider-wrapper {
    -webkit-padding-start: 50px;
            padding-inline-start: 50px;
    padding-top: 170px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-slider-item .slider-wrapper {
    padding: 170px 0 280px 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-slider-item .slider-wrapper {
    padding: 170px 0 280px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-slider-item .slider-wrapper {
    padding: 150px 0 450px 0;
  }
}
.tj-slider-item .slider-content {
  max-width: 660px;
}
.tj-slider-item .slider-content .slider-title {
  color: var(--tj-color-common-white);
  font-size: 96px;
  line-height: 1.042;
  letter-spacing: -2.88px;
  margin-bottom: 10px;
}
.tj-slider-item .slider-content .slider-title span {
  color: var(--tj-color-text-body-2);
}
.tj-slider-item .slider-content .slider-title img {
  max-width: 188px;
  border-radius: 50px;
  border: 4px solid var(--tj-color-theme-primary);
  vertical-align: top;
  margin-top: 5px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-slider-item .slider-content .slider-title img {
    max-width: 165px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-slider-item .slider-content .slider-title img {
    max-width: 140px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-slider-item .slider-content .slider-title img {
    max-width: 105px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-slider-item .slider-content .slider-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-slider-item .slider-content .slider-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-slider-item .slider-content .slider-title {
    font-size: 50px;
  }
}
.tj-slider-item .slider-content .slider-desc {
  max-width: 440px;
  font-size: 18px;
  line-height: 1.444;
  color: var(--tj-color-text-body-2);
}
.tj-slider-item .slider-content .slider-btn {
  margin-top: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-slider-item .slider-content {
    max-width: 600px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-slider-item .slider-content {
    max-width: 550px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .tj-slider-item {
    min-height: 95vh;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-slider-item {
    min-height: auto;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-slider-item {
    min-height: 100vh;
  }
}

.swiper-slide .slider-content .slider-title,
.swiper-slide .slider-content .slider-desc,
.swiper-slide .slider-content .slider-btn {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.swiper-slide.swiper-slide-active .slider-content .slider-title,
.swiper-slide.swiper-slide-active .slider-content .slider-desc,
.swiper-slide.swiper-slide-active .slider-content .slider-btn {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.swiper-slide.swiper-slide-active .slider-content .slider-title {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.swiper-slide.swiper-slide-active .slider-content .slider-desc {
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}
.swiper-slide.swiper-slide-active .slider-content .slider-btn {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.slider-bg-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
}

.hero-thumb {
  max-width: 1320px;
  width: 100%;
  padding: 0 10px;
  margin: 0 auto;
  position: absolute;
  inset-inline-start: 50%;
  bottom: 60px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.hero-thumb .swiper-wrapper {
  max-width: 270px;
  margin: 0;
}
.hero-thumb .thumb-item {
  width: 80px !important;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.hero-thumb .thumb-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  border-radius: 6px;
  background-color: var(--tj-color-theme-dark);
  opacity: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-thumb .thumb-item {
    width: 70px !important;
    height: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .hero-thumb .thumb-item {
    width: 65px !important;
    height: 65px;
  }
}
.hero-thumb .swiper-slide-thumb-active {
  border: 2px solid var(--tj-color-common-white);
}
.hero-thumb .swiper-slide-thumb-active::after {
  opacity: 0.25;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .hero-thumb {
    -webkit-padding-start: 60px;
            padding-inline-start: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-thumb {
    max-width: 1140px;
    bottom: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-thumb {
    max-width: 960px;
    bottom: 110px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-thumb {
    max-width: 720px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-thumb {
    max-width: 540px;
    bottom: 270px;
  }
}
@media (max-width: 575px) {
  .hero-thumb {
    bottom: 270px;
  }
}

.hero-navigation {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 5;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 30px;
  margin-top: 26px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.hero-navigation .slider-next,
.hero-navigation .slider-prev {
  width: 60px;
  height: 60px;
  font-size: 28px;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  margin-top: -60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-navigation .slider-next,
  .hero-navigation .slider-prev {
    margin-top: 0;
  }
}
.hero-navigation .slider-next .anim-icon i,
.hero-navigation .slider-prev .anim-icon i {
  color: var(--tj-color-common-white);
}
.hero-navigation .slider-next .anim-icon i:last-child,
.hero-navigation .slider-prev .anim-icon i:last-child {
  color: var(--tj-color-common-black);
}
.hero-navigation .slider-next:hover,
.hero-navigation .slider-prev:hover {
  border-color: var(--tj-color-common-white);
  background-color: var(--tj-color-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .hero-navigation .slider-next,
  .hero-navigation .slider-prev {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-navigation {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .hero-navigation {
    padding: 0 15px;
  }
}

.circle-text-wrap {
  position: absolute;
  width: 200px;
  height: 200px;
  bottom: 60px;
  inset-inline-end: 285px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  z-index: 5;
  overflow: hidden;
}
.circle-text-wrap .circle-icon,
.circle-text-wrap .circle-text {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 6;
}
.circle-text-wrap .circle-text {
  width: 164px;
  height: 160px;
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-animation: textrotate 20s infinite linear;
  animation: textrotate 20s infinite linear;
}
@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) {
  .circle-text-wrap .circle-text {
    width: 134px;
    height: 130px;
  }
}
.circle-text-wrap .circle-icon {
  color: var(--tj-color-common-white);
  font-size: 73px;
  width: 200px;
  height: 200px;
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.circle-text-wrap .circle-icon i {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.circle-text-wrap .circle-icon:hover i {
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}
@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) {
  .circle-text-wrap .circle-icon {
    font-size: 60;
    width: 150px;
    height: 150px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .circle-text-wrap {
    inset-inline-end: 6%;
    bottom: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .circle-text-wrap {
    bottom: 100px;
  }
}
@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) {
  .circle-text-wrap {
    width: 160px;
    height: 160px;
    inset-inline-end: 6%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .circle-text-wrap {
    inset-inline-end: 10%;
    bottom: 40px;
  }
}
@media (max-width: 575px) {
  .circle-text-wrap {
    inset-inline-end: 15px;
    bottom: 40px;
  }
}

/* !END: Slider CSS */
/**----------------------------------------
START: Team CSS
----------------------------------------*/
.tj-team-section {
  padding-top: 120px;
  padding-bottom: 90px;
  overflow: hidden;
}
.tj-team-section .sec-heading {
  max-width: 550px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-team-section {
    padding-top: 100px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-team-section {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
.tj-team-section-2 .sub-title {
  color: var(--tj-color-theme-primary);
  border: 0;
  padding: 0;
}
.tj-team-section-3 {
  background-color: var(--tj-color-theme-bg);
  padding-top: 120px;
  padding-bottom: 90px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border-radius: 12px;
}
.tj-team-section-3 .sec-heading {
  max-width: 500px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-team-section-3 {
    padding-top: 100px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-team-section-3 {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}

.team-item {
  position: relative;
  margin-bottom: 30px;
}
.team-item .team-img {
  position: relative;
  z-index: 0;
}
.team-item .team-img .team-img-inner {
  background-color: var(--tj-color-grey-2);
  border-radius: 10px;
  overflow: hidden;
}
.team-item .team-img img {
  width: 100%;
  border-radius: 10px;
  -webkit-transition: -webkit-transform 500ms;
  transition: -webkit-transform 500ms;
  transition: transform 500ms;
  transition: transform 500ms, -webkit-transform 500ms;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1);
          transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1);
}
.team-item .team-img::after, .team-item .team-img::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  opacity: 0;
  border-radius: 10px;
  z-index: -1;
}
.team-item .team-img::before {
  z-index: 1;
}
.team-item .team-img::after {
  background-color: var(--tj-color-theme-primary);
  opacity: 1;
  z-index: -1;
}
.team-item .social-links {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}
.team-item .social-links ul {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.team-item .social-links ul li a {
  width: 30px;
  height: 30px;
  background-color: var(--tj-color-theme-bg);
  opacity: 0.4;
}
.team-item .social-links ul li a i {
  color: var(--tj-color-theme-dark);
}
.team-item .social-links ul li a:hover {
  opacity: 1;
  background-color: var(--tj-color-theme-primary);
}
.team-item .social-links ul li a:hover i {
  color: var(--tj-color-common-white);
}
.team-item .team-content {
  position: relative;
  margin-top: 18px;
}
.team-item .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 0;
  width: calc(100% - 35px);
}
.team-item .title a {
  display: inline-block;
}
.team-item .title a:hover {
  color: var(--tj-color-theme-primary);
}
.team-item .designation {
  font-size: 14px;
  color: var(--tj-color-text-body-3);
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.team-item .mail-at {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background-color: var(--tj-color-common-white);
  color: var(--tj-color-heading-primary);
  font-size: 22px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 6px;
  inset-inline-end: 0;
}
.team-item .mail-at:hover {
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
.team-item:hover .team-img img {
  -webkit-transform: perspective(400px) rotateX(0.09deg) rotateY(0) scaleX(1.1) scaleY(1.1);
          transform: perspective(400px) rotateX(0.09deg) rotateY(0) scaleX(1.1) scaleY(1.1);
}
.team-item:hover .team-img::before {
  opacity: 0.75;
}
.team-item:hover .team-img::after {
  -webkit-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
          transform: rotate(3deg);
}
.team-item:hover .social-links {
  opacity: 1;
  visibility: visible;
}

.team-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-wrapper {
    gap: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.team-img-wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-img-wrap {
    display: none;
  }
}
.team-img-wrap .team-img {
  height: 100%;
  background-color: var(--tj-color-grey-2);
  border-radius: 12px;
  overflow: hidden;
}
.team-img-wrap .team-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-img-wrap {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

.team-item-wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.team-item-wrap .team-item {
  overflow: hidden;
  margin-bottom: 20px;
  padding: 0;
}
.team-item-wrap .team-item:last-child {
  margin-bottom: 0;
  padding: 0;
}
.team-item-wrap .team-item-inner {
  background-color: var(--tj-color-common-white);
  position: relative;
  text-align: start;
  width: 100%;
  border-radius: 12px;
  padding: 35px 30px 30px;
  z-index: 1;
  overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-item-wrap .team-item-inner {
    padding: 20px;
  }
}
.team-item-wrap .team-item .team-link {
  color: var(--tj-color-theme-primary);
  font-size: 75px;
  line-height: 1;
  position: absolute;
  top: 20px;
  inset-inline-end: 15px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.team-item-wrap .team-item .team-link:hover {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team-item-wrap .team-item .team-link {
    font-size: 65px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-item-wrap .team-item .team-link {
    font-size: 50px;
    top: 12px;
  }
}
.team-item-wrap .team-item .team-content {
  margin-top: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.team-item-wrap .team-item .title {
  width: calc(100% - 50px);
  font-weight: var(--tj-fw-medium);
  line-height: 1;
  -webkit-transition: none;
  transition: none;
  margin-bottom: 11px;
}
.team-item-wrap .team-item .designation {
  font-size: 16px;
}
.team-item-wrap .team-item .social-links {
  top: inherit;
  inset-inline-start: inherit;
  bottom: 30px;
  -webkit-transform: translate(0);
      -ms-transform: translate(0);
          transform: translate(0);
}
.team-item-wrap .team-item .social-links ul {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.team-item-wrap .team-item .social-links ul li a {
  width: 24px;
  height: 24px;
  font-size: 14px;
  background-color: var(--tj-color-theme-dark);
}
.team-item-wrap .team-item .social-links ul li a i {
  color: var(--tj-color-common-white);
}
.team-item-wrap .team-item .social-links ul li a:hover {
  background-color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-item-wrap .team-item .social-links {
    bottom: 20px;
  }
}
.team-item-wrap .team-item .desc {
  opacity: 0;
  visibility: hidden;
}
.team-item-wrap .team-item .team-img-wrap {
  display: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.team-item-wrap .team-item .team-img-wrap .team-img::after, .team-item-wrap .team-item .team-img-wrap .team-img::before {
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-item-wrap .team-item .team-img-wrap {
    display: block;
    width: 100%;
    height: 0;
  }
  .team-item-wrap .team-item .team-img-wrap img {
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.team-item-wrap .team-item.active .team-item-inner {
  margin-bottom: 0px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-item-wrap .team-item.active .team-item-inner {
    margin-bottom: 20px;
  }
}
.team-item-wrap .team-item.active .team-link {
  opacity: 1;
  visibility: visible;
}
.team-item-wrap .team-item.active .team-content {
  margin-bottom: 110px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .team-item-wrap .team-item.active .team-content {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-item-wrap .team-item.active .team-content {
    margin-bottom: 50px;
  }
}
.team-item-wrap .team-item.active .social-links {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.team-item-wrap .team-item.active .team-img-wrap {
  height: 755px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .team-item-wrap .team-item.active .team-img-wrap {
    height: 516px;
  }
}
@media (max-width: 575px) {
  .team-item-wrap .team-item.active .team-img-wrap {
    height: 337px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-item-wrap {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}

/* !END: Team CSS */
/**----------------------------------------
START: Team Details CSS
----------------------------------------*/
.team-details {
  padding: 120px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team-details {
    padding: 100px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team-details {
    padding: 80px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details {
    padding: 60px 0;
  }
}
.team-details__img {
  background-color: var(--tj-color-grey-2);
  border-radius: 12px;
  overflow: hidden;
}
.team-details__img img {
  border-radius: 12px;
  width: 100%;
}
.team-details__content {
  -webkit-padding-start: 30px;
          padding-inline-start: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details__content {
    margin-top: 30px;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details__content {
    margin-top: 20px;
  }
}
.team-details .team-details__subtitle {
  margin-bottom: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details .team-details__subtitle {
    margin-bottom: 12px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details__name {
    font-size: 36px;
    margin-bottom: 8px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details__name {
    font-size: 30px;
    margin-bottom: 8px;
  }
}
.team-details__desig {
  margin-bottom: 20px;
  color: var(--tj-color-text-body-3);
  display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details__desig {
    margin-bottom: 8px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details__desig {
    margin-bottom: 8px;
  }
}
.team-details .social-links ul li a i {
  color: var(--tj-color-common-white);
}
.team-details__contact-info ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px dashed var(--tj-color-border-1);
  margin: 30px 0;
  border-radius: 12px;
  list-style: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details__contact-info ul {
    margin: 20px 0;
  }
}
.team-details__contact-info ul li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
  padding: 25px 28px;
  -webkit-border-end: 1px dashed var(--tj-color-border-1);
          border-inline-end: 1px dashed var(--tj-color-border-1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.team-details__contact-info ul li:last-child {
  -webkit-border-end: 0;
          border-inline-end: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .team-details__contact-info ul li {
    padding: 16px 18px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details__contact-info ul li {
    padding: 12px 14px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.team-details__contact-info ul span {
  color: var(--tj-color-text-body-3);
  display: inline-block;
}
@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) {
  .team-details__contact-info ul span {
    font-size: 14px;
  }
}
.team-details__contact-info ul a {
  font-size: 20px;
  color: var(--tj-color-heading-primary);
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 0;
  position: relative;
  display: inline-block;
}
.team-details__contact-info ul a::after {
  content: "";
  width: 0;
  height: 1px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: absolute;
  bottom: 2px;
  inset-inline-start: 0;
  background-color: var(--tj-color-heading-primary);
}
@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) {
  .team-details__contact-info ul a {
    font-size: 16px;
  }
}
.team-details__contact-info ul a:hover::after {
  width: 100%;
}
.team-details__experience {
  margin-top: 50px;
  margin-bottom: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .team-details__experience {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details__experience {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
.team-details__experience__list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px dashed var(--tj-color-border-1);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 25px 0;
  border-radius: 12px;
  list-style: none;
  border-radius: 10px;
}
.team-details__experience__list ul li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
  padding: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  border: 1px dashed var(--tj-color-border-1);
  border-top: 0;
  -webkit-border-start: 0;
          border-inline-start: 0;
}
.team-details__experience__list ul li p {
  margin-bottom: 0;
}
.team-details__experience__list ul li i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 22px;
  width: 100%;
  height: 22px;
  font-size: 10px;
  color: var(--tj-color-common-white);
  background: var(--tj-color-theme-primary);
  border-radius: 50%;
  margin-top: 4px;
}
.team-details__experience__list ul li:last-child {
  -webkit-border-end: 0;
          border-inline-end: 0;
  border-bottom: 0;
}
.team-details__experience__list ul li:nth-last-child(2) {
  border-bottom: 0;
}
.team-details__experience__list ul li:nth-child(2n) {
  -webkit-border-end: 0;
          border-inline-end: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .team-details__experience__list ul li {
    padding: 16px;
  }
}
@media (max-width: 575px) {
  .team-details__experience__list ul li {
    -webkit-border-end: 0;
            border-inline-end: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }
  .team-details__experience__list ul li:nth-last-child(2) {
    border-bottom: 1px dashed var(--tj-color-border-1);
  }
}

/* !END: Team Details CSS */
/**----------------------------------------
START: Progress bar CSS
----------------------------------------*/
.tj-progress {
  width: 100%;
  padding: 0;
  margin: 0;
  height: 4px;
  background: var(--tj-color-theme-bg);
  position: relative;
  z-index: 0;
}
.tj-progress-list {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
  margin-top: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-progress-list {
    gap: 20px;
  }
}
.tj-progress-title {
  font-size: 16px;
  color: var(--tj-color-text-body);
  font-weight: var(--tj-fw-sbold);
  letter-spacing: 0;
  margin-bottom: 3px;
}
.tj-progress-bar {
  width: 0;
  height: 100%;
  background: var(--tj-color-theme-primary);
  position: relative;
  z-index: 1;
}
.tj-progress-percent {
  font-size: 16px;
  line-height: 1;
  font-weight: var(--tj-fw-sbold);
  height: auto;
  position: absolute;
  inset-inline-end: 0;
  bottom: 11px;
  z-index: 2;
}

/* !END: Progress bar CSS */
/**----------------------------------------
START: Breadcrumb CSS
----------------------------------------*/
.tj-page-header {
  padding-top: 133px;
  padding-bottom: 150px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--tj-color-theme-dark);
  background-blend-mode: luminosity;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-page-header {
    padding-top: 90px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-page-header {
    padding-top: 60px;
    padding-bottom: 70px;
  }
}
.tj-page-title {
  color: var(--tj-color-common-white);
  line-height: 1;
  margin-bottom: 0;
}
.tj-page-link {
  margin-top: 32px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  position: relative;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  padding: 5px 12px;
  z-index: 2;
}
.tj-page-link span {
  color: var(--tj-color-common-white);
  font-size: 16px;
  font-weight: var(--tj-fw-medium);
  position: relative;
  display: inline-block;
  line-height: 1;
}
.tj-page-link span i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  font-size: 16px;
  color: var(--tj-color-theme-primary);
}
.tj-page-link span:not(:first-child) i {
  font-size: 18px;
  font-weight: var(--tj-fw-bold);
  color: var(--tj-color-theme-dark-4);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 7px;
  margin-top: 2px;
}
.tj-page-link span a {
  color: var(--tj-color-grey-2);
}
.tj-page-link span a:hover {
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-page-link {
    margin-top: 25px;
  }
}

.page-header-overlay {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* !END: Breadcrumb CSS */
/**----------------------------------------
START: Pricing CSS
----------------------------------------*/
.tj-pricing-section {
  background-color: var(--tj-color-theme-bg);
  position: relative;
  z-index: 1;
}
.tj-pricing-section .sec-heading {
  max-width: 550px;
}

.pricing-box {
  padding: 46px 30px 40px;
  background-color: var(--tj-color-common-white);
  border-radius: 12px;
}
.pricing-box.active {
  background-color: var(--tj-color-theme-primary);
}
.pricing-box.active .package-name {
  color: var(--tj-color-common-white);
}
.pricing-box.active .package-desc p {
  color: var(--tj-color-common-white);
}
.pricing-box.active .package-price {
  color: var(--tj-color-common-white);
}
.pricing-box.active .package-currency {
  color: var(--tj-color-common-white);
}
.pricing-box.active .package-period {
  color: var(--tj-color-common-white);
}
.pricing-box.active .pricing-btn a {
  background-color: var(--tj-color-common-white);
  border-color: var(--tj-color-common-white);
}
.pricing-box.active .pricing-btn a .btn-text {
  color: var(--tj-color-heading-primary);
}
.pricing-box.active .list-items ul li {
  color: var(--tj-color-common-white);
}
.pricing-box.active .list-items ul li i {
  color: var(--tj-color-common-white);
}

.package-name {
  font-weight: var(--tj-fw-sbold);
  line-height: 1;
  margin-bottom: 11px;
}
.package-desc p {
  margin-bottom: 0;
}
.package-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 64px;
  color: var(--tj-color-heading-primary);
  font-family: var(--tj-ff-heading);
  font-weight: var(--tj-fw-sbold);
  line-height: 0.8;
  margin: 30px 0 40px;
}
.package-currency {
  font-size: 24px;
}
.package-period {
  font-size: 16px;
  font-weight: var(--tj-fw-regular);
  color: var(--tj-color-text-body);
  margin-top: auto;
}

.pricing-btn {
  overflow: hidden;
  margin-bottom: 37px;
}
.pricing-btn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  border: 1px solid var(--tj-color-theme-primary);
  padding: 12px;
  border-radius: 50px;
}
.pricing-btn a .btn-text {
  font-weight: var(--tj-fw-sbold);
}

.list-items ul li {
  gap: 12px;
  margin-bottom: 16px;
}

/* !END: Pricing CSS */
/**----------------------------------------
START: Blog Details CSS
----------------------------------------*/
.post-details-wrapper .blog-images {
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
}
.post-details-wrapper .title {
  line-height: 1.1;
  margin-bottom: 22px;
}
.post-details-wrapper p {
  margin-bottom: 30px;
}
.post-details-wrapper p:last-child {
  margin-bottom: 0;
}
.post-details-wrapper .images-wrap {
  margin-bottom: 10px;
}
.post-details-wrapper .image-box {
  margin-bottom: 25px;
  border-radius: 12px;
  overflow: hidden;
}
.post-details-wrapper .image-box img {
  width: 100%;
}
.post-details-wrapper .blog-text h3 {
  margin-bottom: 25px;
}
.post-details-wrapper .blog-text ul {
  margin-bottom: 50px;
  list-style: none;
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
}
.post-details-wrapper .blog-text ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  color: var(--tj-color-heading-primary);
  font-weight: var(--tj-fw-medium);
  margin-bottom: 16px;
}
.post-details-wrapper .blog-text ul li:last-child {
  margin-bottom: 0;
}
.post-details-wrapper .blog-text ul li span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 20px;
  height: 20px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 8px;
  line-height: 1;
  margin-top: 3px;
  color: var(--tj-color-common-white);
  background: var(--tj-color-theme-primary);
  border-radius: 50%;
}
@media (max-width: 575px) {
  .post-details-wrapper .blog-text ul {
    margin-bottom: 30px;
    -webkit-columns: 1;
       -moz-columns: 1;
            columns: 1;
  }
}
.post-details-wrapper .blog-text .blog-video {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 60px;
  margin-bottom: 50px;
}
.post-details-wrapper .blog-text .blog-video .video-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 90px;
  height: 90px;
  line-height: 1;
  color: var(--tj-color-heading-primary);
  background: var(--tj-color-common-white);
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
}
.post-details-wrapper .blog-text .blog-video .video-btn span {
  font-size: 20px;
}
.post-details-wrapper .blog-text .blog-video .video-btn::before {
  position: absolute;
  content: "";
  inset-inline-start: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-animation: pulse2 2s linear infinite;
          animation: pulse2 2s linear infinite;
  z-index: -1;
  border-radius: 50%;
}
@media (max-width: 575px) {
  .post-details-wrapper .blog-text .blog-video .video-btn::before {
    width: 70px;
    height: 70px;
  }
}
@media (max-width: 575px) {
  .post-details-wrapper .blog-text .blog-video .video-btn {
    width: 70px;
    height: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .post-details-wrapper .blog-text .blog-video {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

.blog-category-two {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px dashed var(--tj-color-border-1);
  border-radius: 10px;
  margin-bottom: 25px;
}
.blog-category-two .category-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-border-end: 1px dashed var(--tj-color-border-1);
          border-inline-end: 1px dashed var(--tj-color-border-1);
  padding: 25px 30px;
  gap: 10px;
  width: 33.33%;
}
.blog-category-two .category-item:last-child {
  -webkit-border-end: none;
          border-inline-end: none;
}
.blog-category-two .category-item .cate-images {
  width: 52px;
  height: 52px;
}
.blog-category-two .category-item .cate-images img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .blog-category-two .category-item .cate-images {
    width: 45px;
    height: 45px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-category-two .category-item .cate-images {
    width: 35px;
    height: 35px;
  }
}
.blog-category-two .category-item .cate-text .degination {
  display: block;
  color: var(--tj-color-text-body-3);
  font-size: 14px;
  line-height: 1;
  margin-bottom: 6px;
}
.blog-category-two .category-item .cate-text .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .blog-category-two .category-item .cate-text .title {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-category-two .category-item .cate-text .title {
    font-size: 14px;
  }
}
.blog-category-two .category-item .cate-icons {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 24px;
  width: 52px;
  height: 52px;
  line-height: 1;
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-primary);
  border-radius: 50%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .blog-category-two .category-item .cate-icons {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-category-two .category-item .cate-icons {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
}
.blog-category-two .category-item .text {
  font-weight: var(--tj-fw-sbold);
  line-height: 1;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .blog-category-two .category-item .text {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-category-two .category-item .text {
    font-size: 14px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-category-two .category-item {
    padding: 25px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-category-two .category-item {
    padding: 20px 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .blog-category-two .category-item {
    width: 100%;
    padding: 0;
    border: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .blog-category-two {
    padding: 20px;
    gap: 20px;
  }
}

blockquote {
  position: relative;
  padding: 40px 30px 30px;
  background: var(--tj-color-theme-bg);
  border: 2px solid var(--tj-color-theme-primary);
  border-radius: 12px;
  margin-top: 55px;
  margin-bottom: 50px;
  z-index: 2;
}
blockquote::before {
  content: "\e92e";
  font-size: 40px;
  color: var(--tj-color-theme-primary);
  font-family: "bexon-icons";
  display: inline-block;
  margin-bottom: 20px;
  line-height: 1;
}
blockquote p {
  color: var(--tj-color-heading-primary);
  font-family: var(--tj-ff-heading);
  font-weight: var(--tj-fw-sbold);
  font-size: 24px;
  margin-bottom: 20px !important;
  letter-spacing: -0.6px;
  line-height: 1.417;
  border-radius: 12px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  blockquote p {
    font-size: 20px;
    margin-bottom: 15px !important;
  }
}
blockquote cite {
  color: var(--tj-color-heading-primary);
  display: block;
  text-align: end;
  font-style: normal;
  position: relative;
  z-index: 1;
}
blockquote cite::before {
  content: "";
  display: inline-block;
  background: var(--tj-color-theme-primary);
  height: 1px;
  width: 50px;
  top: -4px;
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  position: relative;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  blockquote {
    padding: 25px 15px;
    margin-bottom: 40px;
  }
}

.tj-tags-post {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  row-gap: 20px;
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-top: 1px dashed var(--tj-color-border-1);
  border-bottom: 1px dashed var(--tj-color-border-1);
  padding: 22px 0;
  margin-top: 30px;
  margin-bottom: 30px;
}
.tj-tags-post .tagcloud {
  width: calc(100% - 200px);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-tags-post .tagcloud {
    width: 100%;
  }
}
.tj-tags-post .post-share ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 15px;
     -moz-column-gap: 15px;
          column-gap: 15px;
  row-gap: 10px;
}
.tj-tags-post .post-share ul li {
  font-size: 16px;
  color: var(--tj-color-heading-primary);
  margin-bottom: 0;
}
.tj-tags-post .post-share ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 17px;
  line-height: 1;
  color: var(--tj-color-heading-primary);
}
.tj-tags-post .post-share ul li a i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
.tj-tags-post .post-share ul li a:hover i {
  color: var(--tj-color-theme-primary);
}
.tj-tags-post.no_socials {
  width: 100%;
}

.tj-post__navigation {
  background-color: var(--tj-color-common-white);
  padding: 20px 25px;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 25px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 50px;
}
.tj-post__navigation .tj-nav-post__nav a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  color: var(--tj-color-heading-primary);
  font-weight: var(--tj-fw-sbold);
}
.tj-post__navigation .tj-nav-post__nav a span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 52px;
  height: 52px;
  background-color: var(--tj-color-common-white);
  border-radius: 50%;
  border: 1px solid var(--tj-color-border-1);
  font-size: 24px;
  line-height: 1;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.tj-post__navigation .tj-nav-post__nav a span i {
  color: var(--tj-color-theme-dark);
}
@media (max-width: 575px) {
  .tj-post__navigation .tj-nav-post__nav a span {
    width: 48px;
    height: 48px;
  }
}
.tj-post__navigation .tj-nav-post__nav a:hover span {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.tj-post__navigation .tj-nav-post__nav a:hover span i {
  color: var(--tj-color-common-white);
}
.tj-post__navigation .tj-nav-post__grid {
  font-size: 30px;
  line-height: 1;
  color: var(--tj-color-common-black);
}
.tj-post__navigation .tj-nav-post__grid a {
  color: currentColor;
}
.tj-post__navigation .tj-nav-post__grid a:hover {
  color: var(--tj-color-theme-primary);
}
@media (max-width: 575px) {
  .tj-post__navigation {
    padding: 20px;
    gap: 20px;
  }
}

.tj-comments-wrap .comments-title .title {
  margin-bottom: 22px;
}
@media (max-width: 575px) {
  .tj-comments-wrap .comments-title .title {
    margin-bottom: 15px;
  }
}

.tj-latest-comments ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tj-latest-comments ul .tj-comment {
  margin-bottom: 20px;
}
.tj-latest-comments ul .tj-comment:last-child {
  margin-bottom: 0;
}
.tj-latest-comments ul .tj-comment .comment-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  padding: 30px;
  background-color: var(--tj-color-common-white);
  border-radius: 10px;
  position: relative;
}
.tj-latest-comments ul .tj-comment .comment-content .comment-avatar {
  max-width: 64px;
  height: 64px;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.tj-latest-comments ul .tj-comment .comment-content .comment-avatar img {
  width: 100%;
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header {
  margin-top: 10px;
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .avatar-name .title {
  font-size: 18px;
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 6px;
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .avatar-name .title a:hover {
  color: var(--tj-color-theme-primary);
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply {
  position: absolute;
  top: 35px;
  inset-inline-end: 30px;
  font-size: 16px;
  font-family: var(--tj-ff-heading);
  font-weight: var(--tj-fw-medium);
  color: var(--tj-color-theme-dark-3);
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply:hover {
  color: var(--tj-color-theme-primary);
}
.tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text span {
  font-size: 14px;
  color: var(--tj-color-theme-dark-4);
  font-weight: var(--tj-fw-regular);
}
@media (max-width: 575px) {
  .tj-latest-comments ul .tj-comment .comment-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .tj-latest-comments ul .tj-comment .comment-content .comment-avatar {
    -webkit-margin-end: auto;
            margin-inline-end: auto;
  }
}
.tj-latest-comments ul .tj-comment .desc {
  margin-top: 14px;
}
.tj-latest-comments ul .tj-comment .desc p:last-child {
  margin-bottom: 0;
}
.tj-latest-comments ul .tj-comment > .children {
  -webkit-padding-start: 75px;
          padding-inline-start: 75px;
}
@media (max-width: 575px) {
  .tj-latest-comments ul .tj-comment > .children {
    -webkit-padding-start: 35px;
            padding-inline-start: 35px;
  }
}
.tj-latest-comments ul .tj-comment:last-child .comment-content .comments-header {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.tj-comments__container {
  margin-top: 50px;
}

.comment-respond .comment-reply-title {
  margin-bottom: 25px;
}
.comment-respond .form-input {
  margin-bottom: 30px;
}
.comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]),
.comment-respond .form-input textarea,
.comment-respond .form-input input[type=email],
.comment-respond .form-input input[type=text] {
  background: var(--tj-color-common-white);
  height: 60px;
  padding: 18px 20px;
  border: 1px solid var(--tj-color-common-white);
  border-radius: 10px;
}
.comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-webkit-input-placeholder, .comment-respond .form-input textarea::-webkit-input-placeholder, .comment-respond .form-input input[type=email]::-webkit-input-placeholder, .comment-respond .form-input input[type=text]::-webkit-input-placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-moz-placeholder, .comment-respond .form-input textarea::-moz-placeholder, .comment-respond .form-input input[type=email]::-moz-placeholder, .comment-respond .form-input input[type=text]::-moz-placeholder {
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):-ms-input-placeholder, .comment-respond .form-input textarea:-ms-input-placeholder, .comment-respond .form-input input[type=email]:-ms-input-placeholder, .comment-respond .form-input input[type=text]:-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .comment-respond .form-input textarea::-ms-input-placeholder, .comment-respond .form-input input[type=email]::-ms-input-placeholder, .comment-respond .form-input input[type=text]::-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::placeholder,
.comment-respond .form-input textarea::placeholder,
.comment-respond .form-input input[type=email]::placeholder,
.comment-respond .form-input input[type=text]::placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):focus,
.comment-respond .form-input textarea:focus,
.comment-respond .form-input input[type=email]:focus,
.comment-respond .form-input input[type=text]:focus {
  border-color: var(--tj-color-theme-primary);
}
.comment-respond .form-input textarea {
  min-height: 180px;
  resize: none;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .comment-respond .form-input {
    margin-bottom: 20px;
  }
}

.tj-main-sidebar {
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
}
@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) {
  .tj-main-sidebar {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}

.tj-sidebar-widget {
  background-color: var(--tj-color-theme-bg);
  margin-bottom: 30px;
  padding: 30px;
  position: relative;
  z-index: 3;
  border-radius: 10px;
  overflow: hidden;
}
.tj-sidebar-widget:last-child {
  margin-bottom: 0;
}
.tj-sidebar-widget .widget-title {
  color: var(--tj-color-heading-primary);
  font-weight: var(--tj-fw-sbold);
  position: relative;
  margin-bottom: 25px;
  line-height: 1;
  z-index: 1;
}
.tj-sidebar-widget.widget-search .search-box form {
  position: relative;
  width: 100%;
  z-index: 1;
}
.tj-sidebar-widget.widget-search .search-box form input[type=search] {
  font-size: 16px;
  background: var(--tj-color-common-white);
  width: 100%;
  height: 60px;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 8px;
  padding: 18px 65px 18px 20px;
  line-height: 1;
}
.tj-sidebar-widget.widget-search .search-box form input[type=search]::-webkit-input-placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-search .search-box form input[type=search]::-moz-placeholder {
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-search .search-box form input[type=search]:-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-search .search-box form input[type=search]::-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-search .search-box form input[type=search]::placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-search .search-box form :focus {
  outline: none;
  -webkit-box-shadow: 0 0 0;
          box-shadow: 0 0 0;
}
.tj-sidebar-widget.widget-search .search-box form button {
  font-size: 22px;
  color: var(--tj-color-heading-primary);
  width: 54px;
  height: 60px;
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-border-start: 1px solid var(--tj-color-border-1);
          border-inline-start: 1px solid var(--tj-color-border-1);
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}
.tj-sidebar-widget.widget-search .search-box form button i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
.tj-sidebar-widget.tj-recent-posts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tj-sidebar-widget.tj-recent-posts ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 15px;
     -moz-column-gap: 15px;
          column-gap: 15px;
  margin-bottom: 15px;
}
.tj-sidebar-widget.tj-recent-posts ul li:last-child {
  margin-bottom: 0;
}
.tj-sidebar-widget.tj-recent-posts ul li:hover .post-thumb img {
  -webkit-transform: scale(1.15);
      -ms-transform: scale(1.15);
          transform: scale(1.15);
}
.tj-sidebar-widget.tj-recent-posts .post-thumb {
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  border-radius: 8px;
  overflow: hidden;
}
.tj-sidebar-widget.tj-recent-posts .post-thumb a {
  display: inline-block;
  width: 100%;
}
.tj-sidebar-widget.tj-recent-posts .post-thumb a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.tj-sidebar-widget.tj-recent-posts .post-content .post-title {
  font-size: 18px;
  line-height: 1.444;
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 10px;
}
.tj-sidebar-widget.tj-recent-posts .post-content .post-title a:hover {
  color: var(--tj-color-theme-primary);
}
.tj-sidebar-widget.tj-recent-posts .post-content .blog-meta {
  margin-bottom: 0;
}
.tj-sidebar-widget.tj-recent-posts .post-content .blog-meta ul li {
  font-size: 14px;
  color: var(--tj-color-text-body);
}
.tj-sidebar-widget.widget-categories ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tj-sidebar-widget.widget-categories ul li {
  margin-bottom: 10px;
}
.tj-sidebar-widget.widget-categories ul li:last-child {
  margin-bottom: 0;
}
.tj-sidebar-widget.widget-categories ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-heading-primary);
  background: var(--tj-color-common-white);
  padding: 20px 15px 17px 25px;
  border-radius: 10px;
}
.tj-sidebar-widget.widget-categories ul li a span {
  color: var(--tj-color-heading-primary);
}
.tj-sidebar-widget.widget-categories ul li a .icon {
  font-size: 24px;
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.tj-sidebar-widget.widget-categories ul li a:hover {
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-primary);
}
.tj-sidebar-widget.widget-categories ul li a:hover span {
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .tj-sidebar-widget {
    padding: 25px 15px;
  }
}

.tagcloud {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
  row-gap: 12px;
}
.tagcloud a {
  background-color: var(--tj-color-common-white);
  font-size: 14px;
  line-height: 1;
  color: var(--tj-color-text-body);
  font-weight: var(--tj-fw-medium);
  padding: 5px 10px;
  border-radius: 4px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  overflow: hidden;
}
.tagcloud a:hover {
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}

.infos-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
  padding: 20px 0;
}
.infos-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.infos-item .project-icons {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 20px;
  color: var(--tj-color-common-white);
  background: var(--tj-color-theme-primary);
  border-radius: 50%;
  position: relative;
  top: 2px;
}
.infos-item .project-text span {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  color: var(--tj-color-text-body);
  margin: 0;
}
.infos-item .project-text .title {
  line-height: 1.1;
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .infos-item .project-text .title {
    font-size: 16px;
  }
}

.service-categories ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-categories ul li {
  margin-bottom: 10px;
}
.service-categories ul li:last-child {
  margin-bottom: 0;
}
.service-categories ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-heading-primary);
  background: var(--tj-color-common-white);
  padding: 20px 15px 17px 25px;
  border-radius: 10px;
}
.service-categories ul li a span {
  color: var(--tj-color-heading-primary);
}
.service-categories ul li a .icon {
  font-size: 24px;
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.service-categories ul li a:hover, .service-categories ul li a.active {
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-primary);
}
.service-categories ul li a:hover span, .service-categories ul li a.active span {
  color: var(--tj-color-common-white);
}

.widget-feature-item {
  padding: 20px;
}
.widget-feature-item .feature-box {
  position: relative;
  background: var(--tj-color-theme-dark);
  border-radius: 10px;
  overflow: hidden;
}
.widget-feature-item .feature-box .feature-content {
  padding: 30px 28px 30px;
}
.widget-feature-item .feature-box .feature-content .title {
  font-size: 74px;
  color: var(--tj-color-common-white);
  margin-bottom: 15px;
  line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .widget-feature-item .feature-box .feature-content .title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .widget-feature-item .feature-box .feature-content .title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .widget-feature-item .feature-box .feature-content .title {
    font-size: 60px;
  }
}
.widget-feature-item .feature-box .feature-content > span {
  display: block;
  font-size: 20px;
  font-family: var(--tj-ff-heading);
  font-weight: var(--tj-fw-medium);
  color: var(--tj-color-common-white);
  line-height: 1;
  margin-bottom: 26px;
}
@media (max-width: 575px) {
  .widget-feature-item .feature-box .feature-content > span {
    margin-bottom: 20px;
  }
}
.widget-feature-item .feature-box .feature-content .feature-contact {
  background-color: var(--tj-color-theme-primary);
  padding: 7px 12px;
  border-radius: 50px;
  line-height: 1;
  overflow: hidden;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0;
}
.widget-feature-item .feature-box .feature-content .feature-contact span {
  color: var(--tj-color-common-white);
  font-size: 18px;
  font-weight: var(--tj-fw-sbold);
  margin: 0;
  text-shadow: 0 30px 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
.widget-feature-item .feature-box .feature-content .feature-contact i {
  color: var(--tj-color-common-white);
  font-size: 20px;
  -webkit-margin-end: 6px;
          margin-inline-end: 6px;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
}
.widget-feature-item .feature-box .feature-content .feature-contact:hover span {
  -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
          transform: translateY(-30px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .widget-feature-item .feature-box .feature-content {
    padding: 30px 20px;
  }
}
@media (max-width: 575px) {
  .widget-feature-item .feature-box {
    max-width: 360px;
    margin: 0 auto;
  }
}
@media (max-width: 400px) {
  .widget-feature-item .feature-box {
    max-width: 320px;
    margin: 0 auto;
  }
}
.widget-feature-item .feature-images {
  width: 370px;
  height: 370px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-margin-start: 60px;
          margin-inline-start: 60px;
  margin-bottom: -50px;
  border: 5px solid var(--tj-color-theme-primary);
}
.widget-feature-item .feature-images img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .widget-feature-item .feature-images {
    width: 320px;
    height: 320px;
    -webkit-margin-start: 45px;
            margin-inline-start: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .widget-feature-item .feature-images {
    width: 500px;
    height: 500px;
    -webkit-margin-start: 260px;
            margin-inline-start: 260px;
    margin-bottom: -70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .widget-feature-item .feature-images {
    -webkit-margin-start: 180px;
            margin-inline-start: 180px;
  }
}
@media (max-width: 400px) {
  .widget-feature-item .feature-images {
    width: 320px;
    height: 320px;
    -webkit-margin-start: 45px;
            margin-inline-start: 45px;
  }
}
@media (max-width: 575px) {
  .widget-feature-item {
    padding: 20px 15px;
  }
}

.details-content-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: 15px;
     -moz-column-gap: 15px;
          column-gap: 15px;
  row-gap: 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 50px;
}

.service-details-item {
  background-color: var(--tj-color-common-white);
  border-radius: 10px;
  padding: 30px 17px 25px 18px;
  max-width: 275px;
  width: 100%;
}
.service-details-item .number {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 33px;
  height: 33px;
  font-size: 16px;
  font-family: var(--tj-ff-heading);
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-primary);
  border-radius: 50%;
  margin-bottom: 20px;
}
.service-details-item .title {
  line-height: 1.444;
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 18px;
}
.service-details-item .desc {
  margin-bottom: 0;
}
.service-details-item .desc p:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service-details-item {
    max-width: 235px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-details-item {
    max-width: 220px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .service-details-item {
    max-width: 250px;
    padding: 30px 15px 15px 15px;
  }
}
@media (max-width: 575px) {
  .service-details-item {
    max-width: 100%;
  }
}

.blog-text .tj-faq {
  margin-bottom: 40px;
  padding-top: 10px;
}

.gallery {
  position: relative;
  display: block;
}
.gallery::before {
  content: "\e91c";
  font-family: "bexon-icons" !important;
  color: var(--tj-color-common-white);
  font-size: 30px;
  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;
  background-color: rgba(12, 30, 33, 0.4);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  opacity: 0;
  visibility: hidden;
}
.gallery:hover::before {
  opacity: 1;
  visibility: visible;
}

/* !END: Blog Details CSS */
/**----------------------------------------
START: Animate CSS
----------------------------------------*/
@-webkit-keyframes sticky {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@keyframes sticky {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
.jumping {
  -webkit-animation: jumping 1.5s infinite;
          animation: jumping 1.5s infinite;
}

@-webkit-keyframes jumping {
  0% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  25% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  50% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  75% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  100% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
}
@keyframes jumping {
  0% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  25% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  50% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  75% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  100% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
}
@-webkit-keyframes linehover {
  0% {
    width: 100%;
  }
  50% {
    width: 0;
    inset-inline-end: 0;
  }
  100% {
    width: 100%;
    inset-inline-start: 0;
  }
}
@keyframes linehover {
  0% {
    width: 100%;
  }
  50% {
    width: 0;
    inset-inline-end: 0;
  }
  100% {
    width: 100%;
    inset-inline-start: 0;
  }
}
@-webkit-keyframes textrotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes textrotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes rotates {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotates {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes gelatine {
  from, to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.7, 1.1);
            transform: scale(0.7, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.7);
            transform: scale(1.1, 0.7);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
            transform: scale(0.95, 1.05);
  }
}
@keyframes gelatine {
  from, to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.7, 1.1);
            transform: scale(0.7, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.7);
            transform: scale(1.1, 0.7);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
            transform: scale(0.95, 1.05);
  }
}
@-webkit-keyframes borderanimate {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
  }
  60% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1.5);
            transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}
@keyframes borderanimate {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
  }
  60% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1.5);
            transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}
@-webkit-keyframes bellshake {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  15% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  30% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  45% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  75% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  85% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  92% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes bellshake {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  15% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  30% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  45% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  75% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  85% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  92% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
.pulse2 {
  -webkit-animation: pulse2 2s linear infinite;
          animation: pulse2 2s linear infinite;
}

@-webkit-keyframes pulse2 {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgb(255, 255, 255);
    box-shadow: 0 0 0 0px rgb(255, 255, 255);
  }
  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}
@keyframes pulse2 {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgb(255, 255, 255);
    box-shadow: 0 0 0 0px rgb(255, 255, 255);
  }
  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}
.pulse3 {
  -webkit-animation: pulse3 2s linear infinite;
          animation: pulse3 2s linear infinite;
}

@-webkit-keyframes pulse3 {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(30, 138, 138, 0.4);
    box-shadow: 0 0 0 0px rgba(30, 138, 138, 0.4);
  }
  100% {
    -webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
  }
}
@keyframes pulse3 {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(30, 138, 138, 0.4);
    box-shadow: 0 0 0 0px rgba(30, 138, 138, 0.4);
  }
  100% {
    -webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
  }
}
.pulse4 {
  -webkit-animation: pulse4 2s linear infinite;
          animation: pulse4 2s linear infinite;
}

@-webkit-keyframes pulse4 {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 0 12px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 12px rgba(0, 0, 0, 0);
  }
}
@keyframes pulse4 {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 0 12px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 12px rgba(0, 0, 0, 0);
  }
}
@-webkit-keyframes shine {
  0% {
    -webkit-transform: skewX(-25deg) translateX(0);
            transform: skewX(-25deg) translateX(0);
  }
  100% {
    -webkit-transform: skewX(-25deg) translateX(250%);
            transform: skewX(-25deg) translateX(250%);
  }
}
@keyframes shine {
  0% {
    -webkit-transform: skewX(-25deg) translateX(0);
            transform: skewX(-25deg) translateX(0);
  }
  100% {
    -webkit-transform: skewX(-25deg) translateX(250%);
            transform: skewX(-25deg) translateX(250%);
  }
}
.zoomInOut {
  -webkit-animation: zoomEffect 3s linear infinite;
          animation: zoomEffect 3s linear infinite;
}

@-webkit-keyframes zoomEffect {
  0%, 100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes zoomEffect {
  0%, 100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes marquee {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@-webkit-keyframes tj-bounce-ball {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}
@keyframes tj-bounce-ball {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}
/* !END: Animate CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.h4-banner-section {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  padding: 0 80px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h4-banner-section {
    padding: 0 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h4-banner-section {
    padding: 0 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-banner-section {
    padding: 0 15px;
  }
}
.h4-banner-section .bg-shape-1,
.h4-banner-section .bg-shape-2 {
  max-width: 480px;
}
.h4-banner-section .bg-shape-1 img,
.h4-banner-section .bg-shape-2 img {
  width: 100%;
}
.h4-banner-section .banner-img-area {
  position: relative;
}
.h4-banner-section .banner-img-area .banner-img {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border-start-start-radius: 12px;
  border-start-end-radius: 12px;
}
.h4-banner-section .banner-img-area .banner-img::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 49%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(rgb(12, 30, 33)), color-stop(50%, rgba(12, 30, 33, 0.4)), to(rgba(12, 30, 33, 0)));
  background: linear-gradient(90deg, rgb(12, 30, 33) 0%, rgba(12, 30, 33, 0.4) 50%, rgba(12, 30, 33, 0) 100%);
  opacity: 0.5;
}
.h4-banner-section .banner-img-area .banner-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-start-start-radius: 12px;
  border-start-end-radius: 12px;
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h4-banner-section .banner-img-area .banner-img img {
    min-height: 500px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-banner-section .banner-img-area .banner-img img {
    min-height: 300px;
  }
}
.h4-banner-section .banner-img-area .h4-rating-box {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 10px;
  position: absolute;
  max-width: 256px;
  width: 100%;
  top: 30px;
  inset-inline-start: 30px;
  padding: 30px;
}
.h4-banner-section .banner-img-area .h4-rating-box .title {
  color: var(--tj-color-common-white);
  font-size: 74px;
  line-height: 1.216;
  text-align: center;
  position: relative;
  margin-bottom: 20px;
}
.h4-banner-section .banner-img-area .h4-rating-box .title::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 42px;
  height: 100%;
  background-color: var(--tj-color-common-white);
  -webkit-mask-image: url(../images/shape/leafs.svg);
          mask-image: url(../images/shape/leafs.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.h4-banner-section .banner-img-area .h4-rating-box .title::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 42px;
  height: 100%;
  background-color: var(--tj-color-common-white);
  -webkit-mask-image: url(../images/shape/leafs.svg);
          mask-image: url(../images/shape/leafs.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-banner-section .banner-img-area .h4-rating-box .title {
    font-size: 50px;
  }
}
.h4-banner-section .banner-img-area .h4-rating-box .desc {
  color: var(--tj-color-common-white);
  font-size: 18px;
  font-weight: var(--tj-fw-sbold);
  letter-spacing: -0.03em;
  margin: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h4-banner-section .banner-img-area .h4-rating-box .desc {
    font-size: 16px;
  }
}
@media (max-width: 575px) {
  .h4-banner-section .banner-img-area .h4-rating-box .desc {
    font-size: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-banner-section .banner-img-area .h4-rating-box {
    max-width: 200px;
    padding: 26px;
    top: 15px;
    inset-inline-start: 15px;
  }
}
@media (max-width: 575px) {
  .h4-banner-section .banner-img-area .h4-rating-box {
    max-width: 158px;
    padding: 15px;
  }
}
.h4-banner-area {
  max-width: 1480px;
  width: 100%;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h4-banner-area {
    min-height: 700px;
  }
}
.h4-banner-content {
  padding-top: 120px;
  padding-bottom: 115px;
  position: relative;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h4-banner-content {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h4-banner-content {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-banner-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.h4-banner-content::before {
  content: "";
  position: absolute;
  bottom: -20%;
  inset-inline-end: -8%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: var(--tj-color-theme-primary);
  -webkit-filter: blur(80px);
  filter: blur(80px);
  opacity: 0.4;
  z-index: -1;
  backdrop-filter: blur(10px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h4-banner-content::before {
    width: 320px;
    height: 320px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-banner-content::before {
    width: 250px;
    height: 250px;
    inset-inline-end: -2%;
    bottom: -15px;
    -webkit-filter: blur(60px);
    filter: blur(60px);
  }
}
.h4-banner-content .sub-title {
  color: var(--tj-color-common-white);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: var(--tj-fw-bold);
  border: 1px dashed var(--tj-color-border-2);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 13px;
  border-radius: 4px;
}
.h4-banner-content .sub-title i {
  color: var(--tj-color-theme-primary);
  font-size: 22px;
}
.h4-banner-content .banner-title {
  max-width: 1180px;
  color: var(--tj-color-common-white);
  font-size: 96px;
  line-height: 1.042;
  margin-bottom: 22px;
}
.h4-banner-content .banner-title span {
  display: inline-block;
  color: var(--tj-color-theme-primary);
  font-weight: var(--tj-fw-medium);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h4-banner-content .banner-title {
    font-size: 85px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h4-banner-content .banner-title {
    max-width: 1000px;
    font-size: 75px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h4-banner-content .banner-title {
    max-width: 800px;
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h4-banner-content .banner-title {
    max-width: 675px;
    font-size: 55px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-banner-content .banner-title {
    font-size: 45px;
  }
}
.h4-banner-content .banner-desc-area {
  max-width: 610px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
@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) {
  .h4-banner-content .banner-desc-area {
    max-width: 520px;
  }
}
@media (max-width: 575px) {
  .h4-banner-content .banner-desc-area {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 20px;
  }
}
.h4-banner-content .tj-primary-btn {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.h4-banner-content .banner-desc {
  max-width: 428px;
  color: var(--tj-color-text-body-2);
  font-size: 18px;
  line-height: 1.444;
  -webkit-padding-start: 15px;
          padding-inline-start: 15px;
}
@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) {
  .h4-banner-content .banner-desc {
    font-size: 16px;
  }
}
@media (max-width: 575px) {
  .h4-banner-content .banner-desc {
    padding: 0;
  }
}

/* !END: Hero CSS */
/**----------------------------------------
START: Choose CSS
----------------------------------------*/
.tj-choose-section {
  overflow: hidden;
}
.tj-choose-section .sec-heading {
  max-width: 550px;
}
.tj-choose-section .countup-item.style-2 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.tj-choose-section .countup-item.style-2::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  opacity: 0.7;
  z-index: -1;
}
.tj-choose-section .countup-item.style-2 .count-icon {
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
.tj-choose-section .countup-item.style-2 .count-text {
  color: var(--tj-color-text-body-2);
}
.tj-choose-section .countup-item.style-2 .inline-content {
  color: var(--tj-color-common-white);
}
.tj-choose-section .countup-item.style-2 .inline-content .odometer {
  color: var(--tj-color-common-white);
}
.tj-choose-section .countup-item.style-2 .inline-content .odometer .odometer-digit,
.tj-choose-section .countup-item.style-2 .inline-content .odometer span {
  color: var(--tj-color-common-white);
}

.h4-content-wrap {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.h4-content-wrap .sec-heading {
  margin-bottom: 25px;
}

/* !END: Choose CSS */
/**----------------------------------------
START: About CSS
----------------------------------------*/
.about-content-area.style-3 .sec-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 25px;
}
.about-content-area.style-3 .sec-heading .subtitle-text {
  max-width: 200px;
}
.about-content-area.style-3 .sec-heading .sec-title {
  width: 67.2%;
}
.about-content-area.style-3 .sec-heading .sec-title img {
  height: 50px;
  border-radius: 4px;
  margin-top: -9px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-content-area.style-3 .sec-heading .sec-title img {
    margin-top: -6px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .about-content-area.style-3 .sec-heading .sec-title img {
    height: 40px;
    margin-top: -6px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .about-content-area.style-3 .sec-heading .sec-title {
    width: 100%;
    line-height: 1.3;
  }
}
.about-content-area.style-3 .about-bottom-area {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 20px;
  margin-top: -62px;
}
.about-content-area.style-3 .about-bottom-area .about-btn-area-2 {
  width: 67.2%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .about-content-area.style-3 .about-bottom-area .about-btn-area-2 {
    width: 100%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .about-content-area.style-3 .about-bottom-area {
    margin-top: 25px;
    gap: 35px;
  }
}

.customers-box.style-3 {
  max-width: 195px;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}
.customers-box.style-3 ul li span,
.customers-box.style-3 ul li img {
  width: 50px;
  height: 50px;
}
.customers-box.style-3 .customers-text {
  font-size: 18px;
  line-height: 1.444;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-text-body-3);
  margin-top: 15px;
}
.customers-box.style-3 .customers-text span {
  color: var(--tj-color-theme-dark-2);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .customers-box.style-3 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

.client-container-2 {
  -webkit-padding-end: 0;
          padding-inline-end: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  overflow: hidden;
}

/* !END: About CSS */
/**----------------------------------------
START: Services CSS
----------------------------------------*/
.tj-service-section-5 .sec-heading {
  max-width: 550px;
}

.service-item.style-5 {
  background-color: var(--tj-color-theme-dark);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0;
  overflow: hidden;
}
.service-item.style-5 .service-icon {
  font-size: 64px;
  margin-bottom: 50px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-5 .service-icon {
    font-size: 50px;
  }
}
.service-item.style-5 .service-content-area {
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .service-item.style-5 .service-content-area {
    padding: 50px 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-5 .service-content-area {
    padding: 40px 20px;
  }
}
.service-item.style-5 .service-content {
  max-width: 360px;
}
.service-item.style-5 .no {
  color: var(--tj-color-text-body-3);
  font-size: 20px;
  font-weight: var(--tj-fw-sbold);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  margin-bottom: 16px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-5 .no {
    font-size: 18px;
  }
}
.service-item.style-5 .title {
  max-width: 360px;
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-medium);
}
.service-item.style-5 .desc {
  color: var(--tj-color-text-body-2);
}
.service-item.style-5 .tj-primary-btn {
  margin-top: 30px;
}
.service-item.style-5 .service-img {
  max-width: 581px;
  width: 100%;
  height: 605px;
}
.service-item.style-5 .service-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service-item.style-5 .service-img {
    max-width: 500px;
    height: 590px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-item.style-5 .service-img {
    max-width: 460px;
    height: 560px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-5 .service-img {
    max-width: 100%;
    height: 500px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-5 .service-img {
    height: 400px;
  }
}

.service-bottom-text {
  text-align: center;
  margin-top: 55px;
}
.service-bottom-text .desc {
  color: var(--tj-color-theme-dark-2);
  font-weight: var(--tj-fw-medium);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  margin: 0;
}
.service-bottom-text .desc span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-bottom-text .desc span {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    display: inline-block;
  }
}
.service-bottom-text i {
  font-size: 28px;
  color: var(--tj-color-theme-primary);
  vertical-align: middle;
}
.service-bottom-text a {
  color: var(--tj-color-theme-dark);
  font-weight: var(--tj-fw-sbold);
  line-height: 1.1;
  position: relative;
  -webkit-padding-end: 14px;
          padding-inline-end: 14px;
  display: inline-block;
}
.service-bottom-text a::before {
  content: "";
  background-color: currentColor;
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  inset-inline-end: 0;
}
.service-bottom-text a::after {
  content: "\e916";
  font-family: "bexon-icons" !important;
  font-style: normal;
  font-weight: var(--tj-fw-medium);
  font-size: 18px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  position: absolute;
  top: 0;
}
.service-bottom-text a:hover {
  color: var(--tj-color-theme-primary);
}
.service-bottom-text a:hover::before {
  -webkit-animation: linehover 0.8s linear;
          animation: linehover 0.8s linear;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-bottom-text {
    margin-top: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-bottom-text {
    text-align: start;
  }
}

/* !END: Services CSS */
/**----------------------------------------
START: Countup CSS
----------------------------------------*/
.tj-funfact-section {
  background-color: var(--tj-color-theme-bg);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.tj-funfact-section .heading-wrap-content .sec-heading {
  max-width: 550px;
}
.tj-funfact-section .heading-wrap-content .progress-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}
.tj-funfact-section .heading-wrap-content .progress-item .progress-circle {
  margin-bottom: 0;
}
.tj-funfact-section .heading-wrap-content .progress-item .progress-text {
  max-width: 160px;
}
.tj-funfact-section .countup-item {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.tj-funfact-section .countup-item:hover {
  -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
}

.progress-item .progress-circle {
  margin-bottom: 10px;
}
.progress-item .progress-circle input {
  color: var(--tj-color-heading-primary) !important;
  font-size: 22px !important;
  width: auto;
  font-weight: var(--tj-fw-bold) !important;
  font-family: var(--tj-ff-heading) !important;
}
.progress-item .progress-text .sub-title {
  display: block;
  font-size: 16px;
  font-family: var(--tj-ff-heading);
  font-weight: var(--tj-fw-regular);
  letter-spacing: initial;
  text-transform: unset;
  color: var(--tj-color-heading-primary);
  margin-bottom: 0px;
  line-height: 1.5;
}

/* !END: Countup CSS */
/**----------------------------------------
START: Project CSS
----------------------------------------*/
.tj-project-section-4 {
  overflow: hidden;
}
.tj-project-section-4 .sec-heading {
  max-width: 550px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-project-section-4 .container-fluid,
  .tj-project-section-4 .project-wrapper {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }
}

.project-item.h4-project-item {
  padding: 30px;
}
.project-item.h4-project-item .project-content {
  padding: 0 0 25px 0;
}
.project-item.h4-project-item .project-content .title {
  max-width: 250px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .project-item.h4-project-item .project-content .title {
    max-width: 230px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .project-item.h4-project-item .project-content {
    padding: 0 0 20px 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .project-item.h4-project-item .project-text {
    margin-top: 14px;
  }
}
.project-item.h4-project-item .project-img {
  height: 445px;
  border-radius: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .project-item.h4-project-item .project-img {
    height: 345px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .project-item.h4-project-item .project-img {
    height: 300px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .project-item.h4-project-item {
    padding: 20px;
  }
}

/* !END: Project CSS */
/**----------------------------------------
START: Pricing CSS
----------------------------------------*/
.tj-pricing-section-2 .content-wrap .tj-primary-btn {
  margin-top: 24px;
}

.accordion.pricing-accordion {
  max-width: 820px;
}
.accordion.pricing-accordion .pricing-box {
  margin-bottom: 30px;
}
.accordion.pricing-accordion .pricing-box:last-child {
  margin-bottom: 0;
}
.accordion.pricing-accordion .pricing-box .faq-title {
  font-size: 24px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .accordion.pricing-accordion .pricing-box .faq-title {
    font-size: 20px;
  }
}
.accordion.pricing-accordion .pricing-box.active .faq-title {
  color: var(--tj-color-common-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.accordion.pricing-accordion .pricing-box.active .faq-title::after {
  color: var(--tj-color-heading-primary);
  background-color: var(--tj-color-common-white);
  border-color: var(--tj-color-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .accordion.pricing-accordion .pricing-box {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .accordion.pricing-accordion .pricing-box {
    margin-bottom: 20px;
  }
}
.accordion.pricing-accordion .pricing-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  margin-top: 0;
  padding-top: 30px;
  padding-bottom: 45px;
}
.accordion.pricing-accordion .pricing-inner::after {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 45px);
  top: 0;
  inset-inline-start: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .accordion.pricing-accordion .pricing-inner::after {
    display: none;
  }
}
.accordion.pricing-accordion .pricing-inner .pricing-header,
.accordion.pricing-accordion .pricing-inner .list-items {
  width: 50%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .accordion.pricing-accordion .pricing-inner .pricing-header,
  .accordion.pricing-accordion .pricing-inner .list-items {
    width: 100%;
  }
}
.accordion.pricing-accordion .pricing-inner .pricing-header {
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-padding-end: 30px;
          padding-inline-end: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .accordion.pricing-accordion .pricing-inner .pricing-header {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }
}
.accordion.pricing-accordion .pricing-inner .list-items {
  -webkit-padding-start: 30px;
          padding-inline-start: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .accordion.pricing-accordion .pricing-inner .list-items {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
    padding-top: 40px;
  }
}
.accordion.pricing-accordion .pricing-inner .package-price {
  margin: 20px 0 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .accordion.pricing-accordion .pricing-inner .package-price {
    margin-bottom: 40px;
  }
}
.accordion.pricing-accordion .pricing-inner .pricing-btn {
  margin-bottom: 0;
}

/* !END: Pricing CSS */
/**----------------------------------------
START: Contact CSS
----------------------------------------*/
.h4-contact-section {
  position: relative;
  overflow: hidden;
}
.h4-contact-section::before {
  content: "";
  position: absolute;
  bottom: 2%;
  inset-inline-start: 38%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--tj-color-theme-primary);
  -webkit-filter: blur(80px);
  filter: blur(80px);
  opacity: 0.3;
  z-index: -1;
  backdrop-filter: blur(10px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h4-contact-section::before {
    width: 280px;
    height: 280px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-contact-section::before {
    width: 200px;
    height: 200px;
  }
}

.contact-form.style-3 {
  max-width: 610px;
  background-color: transparent;
  padding: 0;
}
.contact-form.style-3 .form-input {
  margin-bottom: 20px;
  position: relative;
}
.contact-form.style-3 .form-input.message-input {
  margin-top: 0;
  margin-bottom: 25px;
}
.contact-form.style-3 .form-input textarea,
.contact-form.style-3 .form-input input[type=tel],
.contact-form.style-3 .form-input input[type=text],
.contact-form.style-3 .form-input input[type=email] {
  color: var(--tj-color-text-body-2);
  padding: 12px 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 6px;
}
.contact-form.style-3 .form-input textarea::-webkit-input-placeholder,
.contact-form.style-3 .form-input input[type=tel]::-webkit-input-placeholder,
.contact-form.style-3 .form-input input[type=text]::-webkit-input-placeholder,
.contact-form.style-3 .form-input input[type=email]::-webkit-input-placeholder {
  color: var(--tj-color-text-body-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-3 .form-input textarea::-moz-placeholder,
.contact-form.style-3 .form-input input[type=tel]::-moz-placeholder,
.contact-form.style-3 .form-input input[type=text]::-moz-placeholder,
.contact-form.style-3 .form-input input[type=email]::-moz-placeholder {
  color: var(--tj-color-text-body-2);
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-3 .form-input textarea:-ms-input-placeholder,
.contact-form.style-3 .form-input input[type=tel]:-ms-input-placeholder,
.contact-form.style-3 .form-input input[type=text]:-ms-input-placeholder,
.contact-form.style-3 .form-input input[type=email]:-ms-input-placeholder {
  color: var(--tj-color-text-body-2);
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-3 .form-input textarea::-webkit-input-placeholder, .contact-form.style-3 .form-input input[type=tel]::-webkit-input-placeholder, .contact-form.style-3 .form-input input[type=text]::-webkit-input-placeholder, .contact-form.style-3 .form-input input[type=email]::-webkit-input-placeholder {
  color: var(--tj-color-text-body-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-3 .form-input textarea::-moz-placeholder, .contact-form.style-3 .form-input input[type=tel]::-moz-placeholder, .contact-form.style-3 .form-input input[type=text]::-moz-placeholder, .contact-form.style-3 .form-input input[type=email]::-moz-placeholder {
  color: var(--tj-color-text-body-2);
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-3 .form-input textarea:-ms-input-placeholder, .contact-form.style-3 .form-input input[type=tel]:-ms-input-placeholder, .contact-form.style-3 .form-input input[type=text]:-ms-input-placeholder, .contact-form.style-3 .form-input input[type=email]:-ms-input-placeholder {
  color: var(--tj-color-text-body-2);
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-3 .form-input textarea::-ms-input-placeholder, .contact-form.style-3 .form-input input[type=tel]::-ms-input-placeholder, .contact-form.style-3 .form-input input[type=text]::-ms-input-placeholder, .contact-form.style-3 .form-input input[type=email]::-ms-input-placeholder {
  color: var(--tj-color-text-body-2);
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-3 .form-input textarea::placeholder,
.contact-form.style-3 .form-input input[type=tel]::placeholder,
.contact-form.style-3 .form-input input[type=text]::placeholder,
.contact-form.style-3 .form-input input[type=email]::placeholder {
  color: var(--tj-color-text-body-2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.contact-form.style-3 .form-input textarea:focus,
.contact-form.style-3 .form-input input[type=tel]:focus,
.contact-form.style-3 .form-input input[type=text]:focus,
.contact-form.style-3 .form-input input[type=email]:focus {
  border-color: var(--tj-color-theme-primary);
}
.contact-form.style-3 .form-input .cf-label {
  color: var(--tj-color-text-body-2);
  position: unset;
  margin-bottom: 10px;
}
.contact-form.style-3 .form-input .nice-select {
  color: var(--tj-color-text-body-2);
  padding: 12px 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 6px;
  z-index: 2;
  margin-bottom: 20px;
}
.contact-form.style-3 .form-input .nice-select.open {
  border-color: var(--tj-color-theme-primary);
}
.contact-form.style-3 .form-input .nice-select::after {
  color: var(--tj-color-common-white);
  font-size: 13px;
  width: 13px;
  height: 13px;
  top: 22px;
  inset-inline-end: 18px;
}
.contact-form.style-3 .form-input textarea {
  height: 183px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .contact-form.style-3 {
    max-width: 100%;
    margin-bottom: 60px;
  }
}

/* !END: Contact CSS */
/**----------------------------------------
START: Testimonial CSS
----------------------------------------*/
.testimonial-wrapper-3 {
  position: relative;
}

.testimonial-slider-2.h4-testimonial {
  max-width: 610px;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 60px;
}
.testimonial-slider-2.h4-testimonial .tes-title {
  color: var(--tj-color-common-white);
  margin-bottom: 0;
  padding: 0 30px;
}
.testimonial-slider-2.h4-testimonial .tes-title span {
  color: var(--tj-color-text-body-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial-slider-2.h4-testimonial .tes-title {
    padding: 0 25px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider-2.h4-testimonial .tes-title {
    padding: 0 20px;
  }
}
.testimonial-slider-2.h4-testimonial .testimonial-item {
  background-color: transparent;
  padding: 50px 30px 0;
  height: auto;
}
.testimonial-slider-2.h4-testimonial .testimonial-item .desc {
  color: var(--tj-color-grey-1);
  line-height: 1.545;
  padding-bottom: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-slider-2.h4-testimonial .testimonial-item .desc {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial-slider-2.h4-testimonial .testimonial-item .desc {
    font-size: 18px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider-2.h4-testimonial .testimonial-item .desc {
    font-size: 16px;
    padding-top: 20px;
  }
}
.testimonial-slider-2.h4-testimonial .testimonial-item .testimonial-author {
  border-color: var(--tj-color-border-2);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider-2.h4-testimonial .testimonial-item .testimonial-author .author-img {
    width: 60px;
    height: 60px;
  }
}
.testimonial-slider-2.h4-testimonial .testimonial-item .testimonial-author .title {
  color: var(--tj-color-common-white);
}
.testimonial-slider-2.h4-testimonial .testimonial-item .testimonial-author .designation {
  color: var(--tj-color-text-body-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial-slider-2.h4-testimonial .testimonial-item {
    padding: 35px 25px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider-2.h4-testimonial .testimonial-item {
    padding: 30px 20px 0;
  }
}
.testimonial-slider-2.h4-testimonial .testimonial-navigation {
  position: absolute;
  inset-inline-end: 30px;
  bottom: 75px;
  z-index: 2;
  gap: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider-2.h4-testimonial .testimonial-navigation {
    bottom: 30px;
  }
}
.testimonial-slider-2.h4-testimonial .slider-next,
.testimonial-slider-2.h4-testimonial .slider-prev {
  border: 1px solid var(--tj-color-border-2);
}
.testimonial-slider-2.h4-testimonial .slider-next .anim-icon i,
.testimonial-slider-2.h4-testimonial .slider-prev .anim-icon i {
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider-2.h4-testimonial {
    padding: 35px 0 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .testimonial-slider-2.h4-testimonial {
    max-width: 100%;
  }
}

/* !END: Testimonial CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.h4-blog-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 28px;
}
.h4-blog-wrap .blog-item.style-3 {
  height: 260px;
}
.h4-blog-wrap .blog-item.style-3:first-child {
  grid-row: span 2;
  grid-column: 1/3;
  height: 550px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-blog-wrap .blog-item.style-3:first-child {
    height: 300px;
  }
}
.h4-blog-wrap .blog-item.style-3 .blog-thumb {
  height: 100%;
}
.h4-blog-wrap .blog-item.style-3 .blog-content .title {
  max-width: 360px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-blog-wrap .blog-item.style-3 .blog-content .title {
    max-width: 285px;
  }
}
.h4-blog-wrap .blog-item.style-3 .blog-date {
  top: auto;
  inset-inline-start: auto;
  inset-inline-end: 30px;
  bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h4-blog-wrap .blog-item.style-3 .blog-date {
    inset-inline-end: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-blog-wrap .blog-item.style-3 .blog-date {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h4-blog-wrap .blog-item.style-3 {
    grid-column: 50%;
    height: 300px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-blog-wrap .blog-item.style-3 {
    grid-column: 1/3;
    height: 300px;
  }
}
@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) {
  .h4-blog-wrap {
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h4-blog-wrap {
    grid-template-columns: auto;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h4-blog-wrap {
    grid-template-columns: 1fr;
  }
}

/* !END: Blog CSS */
/* START: Careers CSS */
.tj-careers {
  padding: 30px;
  border: 1px solid var(--tj-color-border-3);
  background-color: var(--tj-color-common-white);
  border-radius: 12px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.tj-careers-icon {
  width: 88px;
  height: 88px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 48px;
  line-height: 1;
  background-color: var(--tj-color-theme-bg-2);
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.tj-careers-icon i {
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  color: var(--tj-color-theme-primary);
}
.tj-careers-tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.tj-careers-tag span {
  display: inline-block;
  padding: 2px 14px;
  border: 1px dashed var(--tj-color-border-1);
  background-color: transparent;
  text-transform: capitalize;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.tj-careers-tag span:hover {
  color: var(--tj-color-common-white) !important;
  border-color: var(--tj-color-theme-primary) !important;
  background-color: var(--tj-color-theme-primary);
}
.tj-careers-title {
  margin-bottom: 0;
  font-weight: var(--tj-fw-sbold);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-careers-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-careers-title {
    font-size: 19px;
  }
}
.tj-careers-salary {
  margin-top: 15px;
  font-family: var(--tj-ff-heading);
  font-weight: 600;
  font-size: 20px;
  color: var(--tj-color-common-black-3);
}
.tj-careers-salary span {
  color: var(--tj-color-text-body);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.tj-careers-bottom {
  margin-top: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
}
.tj-careers-bottom .location {
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.tj-careers-bottom .location i {
  color: var(--tj-color-common-black-3);
  -webkit-margin-end: 5px;
          margin-inline-end: 5px;
}
.tj-careers-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-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(--tj-color-heading-primary);
}
.tj-careers-btn span.btn-icon {
  overflow: hidden;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: var(--tj-color-heading-primary);
}
.tj-careers-btn span.btn-icon i {
  color: var(--tj-color-heading-primary);
  font-weight: 700;
  margin-top: 2px;
}
.tj-careers-btn span.btn-icon i:first-child, .tj-careers-btn span.btn-icon i:last-child {
  -webkit-transition: -webkit-transform 0.4s ease-in-out 0s;
  transition: -webkit-transform 0.4s ease-in-out 0s;
  transition: transform 0.4s ease-in-out 0s;
  transition: transform 0.4s ease-in-out 0s, -webkit-transform 0.4s ease-in-out 0s;
}
.tj-careers-btn span.btn-icon i:last-child {
  position: absolute;
  -webkit-transform: translateX(-150%);
      -ms-transform: translateX(-150%);
          transform: translateX(-150%);
}
.tj-careers-btn .btn-text {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  overflow: hidden;
  color: var(--tj-color-heading-primary);
  text-shadow: 0 23px 0 currentColor;
  font-weight: 700;
}
.tj-careers-btn .btn-text > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.tj-careers:hover {
  border-color: var(--tj-color-theme-dark);
  background-color: var(--tj-color-theme-dark);
}
.tj-careers:hover .tj-careers-icon {
  background-color: var(--tj-color-theme-primary);
}
.tj-careers:hover .tj-careers-icon i {
  color: var(--tj-color-common-white);
}
.tj-careers:hover .tj-careers-tag span {
  border: 1px dashed var(--tj-color-border-2);
  color: var(--tj-color-text-body-2);
}
.tj-careers:hover .tj-careers-title a {
  color: var(--tj-color-common-white);
}
.tj-careers:hover .tj-careers-salary {
  color: var(--tj-color-text-body-2);
}
.tj-careers:hover .tj-careers-salary span {
  color: var(--tj-color-common-white);
}
.tj-careers:hover .tj-careers-bottom .location {
  color: var(--tj-color-text-body-2);
}
.tj-careers:hover .tj-careers-btn {
  color: var(--tj-color-common-white);
}
.tj-careers:hover .tj-careers-btn span.btn-icon {
  color: var(--tj-color-common-white);
}
.tj-careers:hover .tj-careers-btn span.btn-icon i {
  color: var(--tj-color-common-white);
}
.tj-careers:hover .tj-careers-btn span.btn-icon i:first-child {
  -webkit-transform: translateX(150%);
      -ms-transform: translateX(150%);
          transform: translateX(150%);
}
.tj-careers:hover .tj-careers-btn span.btn-icon i:last-child {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
.tj-careers:hover .tj-careers-btn .btn-text {
  color: var(--tj-color-common-white);
}
.tj-careers:hover .tj-careers-btn .btn-text > span {
  -webkit-transform: translateY(-24px);
      -ms-transform: translateY(-24px);
          transform: translateY(-24px);
}

/* !END: Careers CSS */
/* START: Careers details CSS */
.tj-careers-details .tj-post-single-post {
  border: 1px dashed var(--tj-color-border-1);
  padding: 30px;
  margin-bottom: 50px;
  border-radius: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-careers-details .tj-post-single-post {
    margin-bottom: 35px;
  }
}
.tj-careers-details .tj-check-list ul {
  list-style: none;
}
.tj-careers-details .tj-check-list ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  color: var(--tj-color-heading-primary);
  font-weight: var(--tj-fw-medium);
  margin-bottom: 10px;
}
.tj-careers-details .tj-check-list ul li:last-child {
  margin-bottom: 0;
}
.tj-careers-details .tj-check-list ul li span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 20px;
  height: 20px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 8px;
  line-height: 1;
  margin-top: 3px;
  color: var(--tj-color-common-white);
  background: var(--tj-color-theme-primary);
  border-radius: 50%;
}
.tj-careers-details .service-check-list ul li span {
  font-weight: 400;
}
.tj-careers-details .tj-post-details_tags_share {
  margin-top: 25px;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.tj-careers-details .project_catagory ul {
  background-color: var(--tj-color-common-white);
  padding: 0 20px 25px 20px;
  margin: 0;
  list-style: none;
  border-radius: 8px;
}
.tj-careers-details .project_catagory ul li:first-child {
  padding-top: 19px;
}
.tj-careers-details .project_catagory ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 19px 0;
  position: relative;
  z-index: 1;
  border-bottom: 1px dashed var(--tj-color-border-1);
  font-weight: 400;
}
.tj-careers-details .project_catagory ul li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.tj-careers-details .project_catagory ul li span {
  color: var(--tj-color-body-text);
}
.tj-careers-details .project_catagory ul li span.first-child {
  min-width: 100px;
  position: relative;
  z-index: 1;
}
.tj-careers-details .project_catagory ul li span.first-child::before {
  position: absolute;
  content: ":";
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  inset-inline-end: 0;
}
.tj-careers-details .tj-sidebar-widget {
  border-color: var(--tj-color-border-3);
}
.tj-careers-top {
  padding: 30px;
  background-color: var(--tj-color-theme-bg-2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 30px;
  border-radius: 8px;
}
.tj-careers-top-icon {
  width: 130px;
  height: 130px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--tj-color-theme-primary);
  border-radius: 8px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-careers-top-icon {
    width: 100px;
    height: 100px;
  }
}
.tj-careers-top-icon i {
  font-size: 70px;
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-careers-top-icon i {
    font-size: 55px;
  }
}
.tj-careers-top-title {
  margin-bottom: 0;
}
.tj-careers-top .tj-careers-tag span {
  border-color: var(--tj-color-border-1);
}
.tj-careers-top .tj-careers-tag span:hover {
  border-color: var(--tj-color-theme-primary);
}
.tj-careers-top .location {
  display: block;
  margin-top: 15px;
  color: var(--tj-color-heading-primary);
}
.tj-careers-top .location i {
  -webkit-margin-end: 5px;
          margin-inline-end: 5px;
}

.tj-careers-form .form-input {
  margin-bottom: 20px;
}
.tj-careers-form .form-input.reduce {
  margin-top: -10px;
}
.tj-careers-form .form-input textarea,
.tj-careers-form .form-input input {
  height: 60px;
  border-color: transparent;
  border-radius: 8px;
}
.tj-careers-form .form-input textarea::-webkit-input-placeholder, .tj-careers-form .form-input input::-webkit-input-placeholder {
  color: var(--tj-color-common-black-2);
}
.tj-careers-form .form-input textarea::-moz-placeholder, .tj-careers-form .form-input input::-moz-placeholder {
  color: var(--tj-color-common-black-2);
}
.tj-careers-form .form-input textarea:-ms-input-placeholder, .tj-careers-form .form-input input:-ms-input-placeholder {
  color: var(--tj-color-common-black-2);
}
.tj-careers-form .form-input textarea::-ms-input-placeholder, .tj-careers-form .form-input input::-ms-input-placeholder {
  color: var(--tj-color-common-black-2);
}
.tj-careers-form .form-input textarea::placeholder,
.tj-careers-form .form-input input::placeholder {
  color: var(--tj-color-common-black-2);
}
.tj-careers-form .form-input textarea:focus,
.tj-careers-form .form-input input:focus {
  border: 1px solid var(--tj-color-theme-primary);
}
.tj-careers-form .form-input textarea {
  min-height: 160px;
}
.tj-careers-form .form-input label {
  color: var(--tj-color-common-black-2);
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}
.tj-careers-form .form-input input[type=file] {
  padding: 7px;
  cursor: pointer;
  background: var(--tj-color-common-white);
  border: 1px solid transparent;
}
.tj-careers-form .form-input input[type=file]:focus {
  border-color: var(--tj-color-theme-primary);
}
.tj-careers-form .form-input input::-webkit-file-upload-button {
  width: 125px;
  height: 44px;
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  color: var(--tj-color-theme-primary);
  background: var(--tj-color-theme-bg-2);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.tj-careers-form .form-input input::file-selector-button {
  width: 125px;
  height: 44px;
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  color: var(--tj-color-theme-primary);
  background: var(--tj-color-theme-bg-2);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* !END: Careers details CSS */
/* START: History CSS */
.timeline {
  position: relative;
  width: 100%;
  padding: 0;
}

.timeline::after {
  content: "";
  position: absolute;
  width: 0;
  -webkit-border-end: 1px dashed var(--tj-color-border-1);
          border-inline-end: 1px dashed var(--tj-color-border-1);
  top: 0;
  bottom: 0;
  inset-inline-start: 50%;
  -webkit-margin-start: -1px;
          margin-inline-start: -1px;
}

.timeline-inner {
  position: relative;
  background: inherit;
  width: 50%;
}

.timeline-inner:nth-child(odd) {
  inset-inline-start: 0;
  -webkit-padding-end: 90px;
          padding-inline-end: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .timeline-inner:nth-child(odd) {
    -webkit-padding-end: 60px;
            padding-inline-end: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline-inner:nth-child(odd) {
    -webkit-padding-end: 40px;
            padding-inline-end: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .timeline-inner:nth-child(odd) {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
    -webkit-padding-start: 40px;
            padding-inline-start: 40px;
  }
}

.timeline-inner:nth-child(even) {
  inset-inline-start: 50%;
  -webkit-padding-start: 90px;
          padding-inline-start: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .timeline-inner:nth-child(even) {
    -webkit-padding-start: 60px;
            padding-inline-start: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline-inner:nth-child(even) {
    -webkit-padding-start: 40px;
            padding-inline-start: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .timeline-inner:nth-child(even) {
    -webkit-padding-start: 40px;
            padding-inline-start: 40px;
  }
}

.timeline-inner::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  inset-inline-end: -8px;
  background: #ffffff;
  border: 4px solid var(--tj-color-text-body-3);
  border-radius: 16px;
  z-index: 1;
}

.timeline-inner:nth-child(even)::after {
  inset-inline-start: -8px;
}

.timeline-inner .date {
  position: absolute;
  display: inline-block;
  top: calc(50% - 25px);
  text-align: center;
  font-size: 48px;
  line-height: 1;
  font-weight: bold;
  color: var(--tj-color-text-body-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline-inner .date {
    font-size: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .timeline-inner .date {
    font-size: 24px;
    top: calc(50% - 12px);
  }
}

.timeline-inner:nth-child(odd) .date {
  inset-inline-end: -200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .timeline-inner:nth-child(odd) .date {
    inset-inline-end: -170px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline-inner:nth-child(odd) .date {
    inset-inline-end: -130px;
  }
}

.timeline-inner:nth-child(even) .date {
  inset-inline-start: -200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .timeline-inner:nth-child(even) .date {
    inset-inline-start: -170px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline-inner:nth-child(even) .date {
    inset-inline-start: -130px;
  }
}

.timeline-inner .content {
  padding: 30px 30px;
  background: var(--tj-color-common-white);
  border-radius: 12px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .timeline-inner .content {
    padding: 20px;
  }
}
.timeline-inner .content .top {
  -webkit-padding-start: 40px;
          padding-inline-start: 40px;
  position: relative;
}
.timeline-inner .content .top span {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  font-size: 24px;
  font-family: var(--tj-ff-heading);
  line-height: 1.2;
  font-weight: 600;
  color: var(--tj-color-text-body-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .timeline-inner .content .top span {
    font-size: 20px;
  }
}
.timeline-inner .content .top .title {
  margin-bottom: 15px;
  font-weight: var(--tj-fw-sbold);
}
.timeline-inner .content .top p {
  margin: 0;
}
.timeline-inner .content .bottom {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.timeline-inner .content .bottom img {
  border-radius: 10px;
}

@media (max-width: 767.98px) {
  .timeline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 60px;
    padding-top: 30px;
  }
  .timeline::after {
    inset-inline-start: 10px;
  }
  .timeline-inner {
    width: 100%;
  }
  .timeline-inner:nth-child(even) {
    inset-inline-start: 0%;
  }
  .timeline-inner:nth-child(odd)::after,
  .timeline-inner:nth-child(even)::after {
    inset-inline-start: 1px;
    top: -38px;
  }
  .timeline-inner:nth-child(odd) .date,
  .timeline-inner:nth-child(even) .date {
    inset-inline-end: auto;
    inset-inline-start: 40px;
    top: -42px;
  }
}
/* !END: History CSS */
/* START: T&D CSS */
.terms-and-conditions-wrapper h1,
.terms-and-conditions-wrapper h2,
.terms-and-conditions-wrapper h3,
.terms-and-conditions-wrapper h4,
.terms-and-conditions-wrapper h5,
.terms-and-conditions-wrapper h6 {
  padding-top: 30px;
  margin-bottom: 15px;
}
.terms-and-conditions-wrapper ul {
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
}
.terms-and-conditions-wrapper ul:not(:first-child) {
  margin-bottom: 30px;
}

/* !END: T&D CSS */
/**----------------------------------------
START: Theme Header CSS
----------------------------------------*/
.header-area.header-5.header-absolute {
  inset-inline-start: 0;
  inset-inline-end: 0;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  backdrop-filter: blur(10px);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.header-5.header-absolute {
    top: 24px;
    inset-inline-start: 0;
    width: calc(100% - 48px);
  }
}
.header-area.header-5.header-absolute .header-wrapper {
  max-width: 1000px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  border-radius: 8px;
  backdrop-filter: none;
}
.header-area.header-5.header-absolute .mainmenu > ul > li > a {
  padding-top: 25px;
  padding-bottom: 25px;
}
.header-area.header-5.header-absolute .mainmenu > ul > li.menu-item-has-children > a::after, .header-area.header-5.header-absolute .mainmenu > ul > li.has-dropdown > a::after {
  top: 28px;
}

/* !END: Theme Header CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.h5-banner-section {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.h5-banner-section .banner-bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(-109deg, rgba(12, 30, 33, 0.95) 20%, rgba(12, 30, 33, 0.2) 40%, rgba(12, 30, 33, 0.95) 70%);
  z-index: 1;
}
.h5-banner-section .banner-scroll {
  inset-inline-start: 30px;
  bottom: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h5-banner-section .banner-scroll {
    display: none;
  }
}
.h5-banner-section .banner-scroll .scroll-down {
  opacity: 1;
}
.h5-banner-section .banner-scroll .scroll-down:hover {
  margin-bottom: -6px;
}
.h5-banner-section::after, .h5-banner-section::before {
  content: "";
  position: absolute;
  top: 5%;
  inset-inline-end: -13%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: var(--tj-color-theme-primary);
  -webkit-filter: blur(80px);
  filter: blur(80px);
  opacity: 0.8;
  backdrop-filter: blur(10px);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h5-banner-section::after, .h5-banner-section::before {
    width: 460px;
    height: 460px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h5-banner-section::after, .h5-banner-section::before {
    width: 400px;
    height: 400px;
    inset-inline-end: -18%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-banner-section::after, .h5-banner-section::before {
    width: 350px;
    height: 320px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-banner-section::after, .h5-banner-section::before {
    width: 250px;
    height: 250px;
    inset-inline-end: -20%;
    top: 15%;
    -webkit-filter: blur(60px);
    filter: blur(60px);
  }
}
.h5-banner-section::after {
  top: auto;
  inset-inline-end: auto;
  bottom: -18%;
  inset-inline-start: -15%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-banner-section::after {
    bottom: -15%;
    inset-inline-start: -20%;
  }
}
.h5-banner-area {
  max-width: 1460px;
  width: 100%;
  min-height: 883px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  position: relative;
  z-index: 2;
  padding-top: 215px;
  padding-bottom: 60px;
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-banner-area {
    min-height: 700px;
  }
}
.h5-banner-area .solution-box {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 10px;
  max-width: 366px;
  width: 100%;
  margin-top: -44px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  padding: 30px 30px 12px 30px;
}
.h5-banner-area .solution-box .list-icon {
  color: var(--tj-color-common-white);
  font-size: 20px;
  margin-bottom: 25px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-banner-area .solution-box .list-icon {
    font-size: 18px;
    margin-bottom: 15px;
  }
}
.h5-banner-area .solution-box .hero-counter {
  color: var(--tj-color-common-white);
  font-size: 96px;
  line-height: 1;
  font-weight: var(--tj-fw-medium);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.h5-banner-area .solution-box .hero-counter sup {
  font-size: 0.5em;
  line-height: 0;
  top: -1.06em;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-banner-area .solution-box .hero-counter {
    font-size: 75px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-banner-area .solution-box .hero-counter {
    font-size: 60px;
  }
}
.h5-banner-area .solution-box .desc {
  color: var(--tj-color-common-white);
  font-size: 18px;
  line-height: 1.444;
  margin-bottom: 2px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-banner-area .solution-box .desc {
    font-size: 16px;
    margin-bottom: 5px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-banner-area .solution-box {
    margin-top: -244px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-banner-area .solution-box {
    margin-top: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-banner-area .solution-box {
    max-width: 310px;
    padding: 20px 20px 10px 20px;
    margin-top: 50px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-banner-area {
    -webkit-padding-start: 30px;
            padding-inline-start: 30px;
    -webkit-padding-end: 30px;
            padding-inline-end: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-banner-area {
    padding-top: 190px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-banner-area {
    padding-top: 160px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-banner-area {
    padding: 140px 12px 15px;
    min-height: 90vh;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-banner-area {
    min-height: 700px;
  }
}
.h5-banner-content .banner-title {
  max-width: 715px;
  color: var(--tj-color-common-white);
  font-size: 96px;
  line-height: 1;
  margin-bottom: 30px;
}
.h5-banner-content .banner-title .tj-image-slider {
  width: 157.32px;
  height: 80px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-bottom: -8px;
  -webkit-margin-end: -10px;
          margin-inline-end: -10px;
}
.h5-banner-content .banner-title .tj-image-slider img {
  height: 100%;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.h5-banner-content .banner-title .tj-image-slider img.active {
  display: block;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-banner-content .banner-title .tj-image-slider {
    width: 138.25px;
    height: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-banner-content .banner-title .tj-image-slider {
    width: 98.75px;
    height: 50px;
    margin-bottom: -3px;
    -webkit-margin-end: -7px;
            margin-inline-end: -7px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-banner-content .banner-title .tj-image-slider {
    width: 79px;
    height: 40px;
    margin-bottom: 0;
    -webkit-margin-end: -5px;
            margin-inline-end: -5px;
  }
}
@media (max-width: 575px) {
  .h5-banner-content .banner-title .tj-image-slider {
    margin-bottom: -3px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h5-banner-content .banner-title {
    font-size: 85px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-banner-content .banner-title {
    max-width: 600px;
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-banner-content .banner-title {
    max-width: 560px;
    font-size: 65px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h5-banner-content .banner-title {
    font-size: 55px;
  }
}
@media (max-width: 575px) {
  .h5-banner-content .banner-title {
    font-size: 50px;
  }
}

.banner-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}

.wow {
  visibility: hidden;
}

/* !END: Hero CSS */
/**----------------------------------------
START: Services CSS
----------------------------------------*/
.h5-service-section .sec-heading {
  max-width: 550px;
}

.service-item.style-6 {
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0;
  overflow: hidden;
  height: 390px;
  padding: 30px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.service-item.style-6 .service-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto;
}
.service-item.style-6 .service-icon i {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-6 .service-icon {
    width: 70px;
    height: 70px;
    font-size: 50px;
  }
}
.service-item.style-6 .title {
  max-width: 250px;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .service-item.style-6 .title {
    font-size: 20px;
  }
}
.service-item.style-6 .text-btn {
  position: absolute;
  inset-inline-start: auto;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  margin: 0;
}
.service-item.style-6:hover {
  background-color: var(--tj-color-theme-primary);
}
.service-item.style-6:hover .service-icon {
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 100%);
  border-color: rgba(255, 255, 255, 0.15);
}
.service-item.style-6:hover .service-icon i {
  color: var(--tj-color-common-white);
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}
.service-item.style-6:hover .desc,
.service-item.style-6:hover .title {
  color: var(--tj-color-common-white);
}
.service-item.style-6:hover .desc a,
.service-item.style-6:hover .title a {
  color: var(--tj-color-common-white);
}
.service-item.style-6:hover .desc {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
}
.service-item.style-6:hover .text-btn {
  opacity: 1;
  visibility: visible;
  bottom: 30px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-6:hover .text-btn {
    bottom: 20px;
  }
}
.service-item.style-6:hover .text-btn .btn-text {
  color: var(--tj-color-common-white);
}
.service-item.style-6:hover .text-btn .btn-icon {
  background-color: var(--tj-color-theme-dark);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .service-item.style-6 {
    padding: 20px;
  }
}

/* !END: Services CSS */
/**----------------------------------------
START: Home 5 About CSS
----------------------------------------*/
.h5-about {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.h5-about .bg-shape-3 {
  top: 0;
  -webkit-transform: translate(19%, -20%) scaleY(-1);
      -ms-transform: translate(19%, -20%) scaleY(-1);
          transform: translate(19%, -20%) scaleY(-1);
  bottom: auto;
}
.h5-about-content {
  margin-bottom: 60px;
}
.h5-about-content.style-3 .sec-heading .h5-sec-title-wrapper {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.h5-about-content.style-3 .sec-heading .subtitle-text {
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.h5-about-content.style-3 .sec-heading .sec-title {
  color: var(--tj-color-common-white);
  width: 100%;
  margin-bottom: 24px;
}
.h5-about-content.style-3 .sec-heading .sec-title .line {
  position: relative;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  --highlight-offset: 0%;
  background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-color-common-white)), to(var(--tj-color-text-body-3)));
  background-image: linear-gradient(90deg, var(--tj-color-common-white) var(--highlight-offset), var(--tj-color-text-body-3) var(--highlight-offset));
}
.h5-about-content-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  width: 67.2%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-about-content-right {
    width: 100%;
    gap: 15px;
  }
}
@media (max-width: 575px) {
  .h5-about-content-right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.h5-about-counter {
  font-size: 96px;
  line-height: 1.04;
  font-weight: var(--tj-fw-medium);
  letter-spacing: -0.03em;
  color: var(--tj-color-common-white);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: -24px;
}
.h5-about-counter-symbol {
  line-height: 1;
  margin-bottom: 5px;
  display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h5-about-counter {
    font-size: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-about-counter {
    font-size: 86px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .h5-about-counter {
    font-size: 80px;
    margin-bottom: 0;
  }
}
@media (max-width: 575px) {
  .h5-about-counter {
    font-size: 76px;
    margin-bottom: 0;
  }
}

.h5-client-item {
  -webkit-padding-end: 15px;
          padding-inline-end: 15px;
}
.h5-client-item .client-logo {
  width: 254px;
  height: 254px;
  background-color: inherit;
  position: relative;
  overflow: hidden;
  z-index: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .h5-client-item .client-logo {
    width: 200px;
    height: 200px;
  }
}
@media (max-width: 575px) {
  .h5-client-item .client-logo {
    width: 150px;
    height: 150px;
  }
}
.h5-client-item .client-logo:before, .h5-client-item .client-logo::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  opacity: 0;
}
.h5-client-item .client-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/brands/h5-brand-bg.webp") no-repeat center;
  background-size: cover;
  mix-blend-mode: luminosity;
  z-index: -2;
  pointer-events: none;
}
.h5-client-item .client-logo::after {
  background: rgba(30, 138, 138, 0.6);
}
.h5-client-item .client-logo:hover {
  border-radius: 100%;
  backdrop-filter: blur(0);
  background: rgba(30, 138, 138, 0.7);
}
.h5-client-item .client-logo:hover::before, .h5-client-item .client-logo:hover::after {
  opacity: 1;
}

/* !END: Home 5 About CSS  */
/**----------------------------------------
START: Strategy CSS
----------------------------------------*/
.gap-30-30 {
  --bs-gutter-x: 30px;
}
.gap-30-30 .row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
}

.h5-strategy-heading {
  padding: 60px 30px;
  border-radius: 10px;
  background-color: var(--tj-color-common-white);
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .h5-strategy-heading {
    padding: 40px 20px;
  }
}
.h5-strategy-heading .sec-title {
  margin-bottom: 30px;
}
.h5-strategy-item {
  padding: 30px;
  background-color: var(--tj-color-common-white);
  border-radius: 10px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
@media (max-width: 575px) {
  .h5-strategy-item {
    padding: 20px;
  }
}
.h5-strategy-item-3 {
  background: url("../images/strategy/strategy-item-bg.webp") no-repeat center;
  background-size: cover;
}
.h5-strategy-item-3::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-heading-primary);
  opacity: 0.7;
  z-index: -1;
}
.h5-strategy-title {
  font-weight: var(--tj-fw-sbold);
}
.h5-strategy-avatar {
  max-width: 295px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  margin-top: 40px;
}
.h5-strategy-counter {
  margin-bottom: -7px;
}
.h5-strategy-counter-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 5px;
  border-top: 1px dashed var(--tj-color-border-1);
  margin-top: 60px;
}
.h5-strategy-counter-inner .inline-content {
  margin-bottom: 0;
}
.h5-strategy-counter-inner .inline-content .odometer-inside {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.h5-strategy-counter-inner .inline-content .odometer span {
  color: var(--tj-color-heading-primary);
}
.h5-strategy-counter-inner .count-text {
  color: var(--tj-color-text-body-3);
}
.h5-strategy-chart {
  margin-top: 71px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h5-strategy-chart {
    margin-top: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-strategy-chart {
    margin-top: 145px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-strategy-chart {
    margin-top: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-strategy-chart img {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    -webkit-margin-end: auto;
            margin-inline-end: auto;
    display: block;
  }
}
.h5-strategy-tag {
  padding: 5px 8px 7px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  line-height: 1;
  color: var(--tj-color-common-white);
}
.h5-strategy-tag-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  margin-top: 180px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h5-strategy-tag-wrapper {
    margin-top: 153px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-strategy-tag-wrapper {
    margin-top: 106px;
  }
}
.h5-strategy-tag:hover {
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  border-color: var(--tj-color-theme-primary);
}
.h5-strategy-item-3 .h5-strategy-title {
  color: var(--tj-color-common-white);
}
.h5-strategy-item-3 .h5-strategy-desc {
  color: var(--tj-color-grey-1);
  margin-top: 18px;
}

/* !END: Strategy CSS */
/**----------------------------------------
START: Working process CSS
----------------------------------------*/
.sec-heading-centered {
  max-width: 550px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  width: 100%;
  text-align: center;
}

.h5-working-process {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.h5-working-process-inner {
  position: relative;
  z-index: 0;
  padding-top: 42px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-inner {
    padding-top: 0;
    margin-top: 72px;
  }
}
.h5-working-process-inner::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 21px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  height: 0;
  border-bottom: 1px dashed var(--tj-color-border-2);
  z-index: -1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-inner::after {
    inset-inline-start: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 0;
    height: 100%;
    border-bottom: 0;
    -webkit-border-end: 1px dashed var(--tj-color-border-2);
            border-inline-end: 1px dashed var(--tj-color-border-2);
  }
}
.h5-working-process-wrapper {
  gap: 30px;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@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) {
  .h5-working-process-wrapper {
    gap: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 85px;
  }
}
.h5-working-process-item {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  margin-top: 60px;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  position: static;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-item {
    margin-top: 30px;
  }
}
.h5-working-process-item .h5-working-process-indicator {
  padding: 9px 34px 11px;
  font-size: 20px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1;
  letter-spacing: -0.03em;
  border: 1px dashed var(--tj-color-border-2);
  border-radius: 50px;
  color: var(--tj-color-common-white);
  background-color: var(--tj-color-theme-dark);
  margin-bottom: 0;
  position: absolute;
  -webkit-transition: all 0.2s 0.3s;
  transition: all 0.2s 0.3s;
  top: -60px;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, -100%);
      -ms-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  white-space: nowrap;
  z-index: 0;
}
.h5-working-process-item .h5-working-process-indicator::before, .h5-working-process-item .h5-working-process-indicator::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  bottom: -60px;
  -webkit-transform: translateX(-50%) scaleY(-1);
      -ms-transform: translateX(-50%) scaleY(-1);
          transform: translateX(-50%) scaleY(-1);
  width: 0;
  height: 60px;
  -webkit-border-end: 1px dashed var(--tj-color-border-2);
          border-inline-end: 1px dashed var(--tj-color-border-2);
  z-index: -1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.h5-working-process-item .h5-working-process-indicator::after {
  height: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-item .h5-working-process-indicator {
    top: -30px;
  }
  .h5-working-process-item .h5-working-process-indicator::before {
    display: none;
  }
  .h5-working-process-item .h5-working-process-indicator::after {
    bottom: -30px;
  }
}
.h5-working-process-item:nth-child(2) {
  margin-top: 192px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-item:nth-child(2) {
    margin-top: 30px;
  }
}
.h5-working-process-item:nth-child(2) .h5-working-process-indicator {
  top: -192px;
}
.h5-working-process-item:nth-child(2) .h5-working-process-indicator::before, .h5-working-process-item:nth-child(2) .h5-working-process-indicator::after {
  bottom: -192px;
}
.h5-working-process-item:nth-child(2) .h5-working-process-indicator::before {
  height: 192px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-item:nth-child(2) .h5-working-process-indicator {
    top: -30px;
  }
  .h5-working-process-item:nth-child(2) .h5-working-process-indicator::after {
    bottom: -30px;
  }
}
.h5-working-process-item:nth-child(3) {
  margin-top: 324px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-item:nth-child(3) {
    margin-top: 30px;
  }
  .h5-working-process-item:nth-child(3)::after {
    bottom: -30px;
  }
}
.h5-working-process-item:nth-child(3) .h5-working-process-indicator {
  top: -324px;
}
.h5-working-process-item:nth-child(3) .h5-working-process-indicator::before, .h5-working-process-item:nth-child(3) .h5-working-process-indicator::after {
  bottom: -324px;
}
.h5-working-process-item:nth-child(3) .h5-working-process-indicator::before {
  height: 324px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-item:nth-child(3) .h5-working-process-indicator {
    top: -30px;
  }
  .h5-working-process-item:nth-child(3) .h5-working-process-indicator::after {
    bottom: -30px;
  }
}
.h5-working-process-item:not(:last-child)::after {
  display: none;
}
.h5-working-process-item:hover .h5-working-process-indicator {
  border-color: var(--tj-color-theme-primary);
}
.h5-working-process-item:hover .h5-working-process-indicator::after {
  height: 60px;
  border-color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-item:hover .h5-working-process-indicator::after {
    height: 30px;
  }
}
.h5-working-process-item:hover:nth-child(2) .h5-working-process-indicator::after {
  height: 192px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-item:hover:nth-child(2) .h5-working-process-indicator::after {
    height: 30px;
  }
}
.h5-working-process-item:hover:nth-child(3) .h5-working-process-indicator::after {
  height: 324px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-working-process-item:hover:nth-child(3) .h5-working-process-indicator::after {
    height: 30px;
  }
}
.h5-working-process-item .process-step {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--tj-color-theme-primary)), color-stop(116.09%, rgba(30, 138, 138, 0)));
  background-image: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, rgba(30, 138, 138, 0) 116.09%);
}
.h5-working-process .title {
  color: var(--tj-color-common-white);
}
.h5-working-process .desc {
  color: var(--tj-color-text-body-2);
}

/* !END: Working process CSS */
/**----------------------------------------
START: Home 5 Project CSS
----------------------------------------*/
.h5-project {
  overflow: hidden;
}
.h5-project .sec-heading {
  max-width: 550px;
}
.h5-project-wrapper {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-project-wrapper {
    gap: 30px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.h5-project-item-wrapper {
  width: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  will-change: transform;
}
.h5-project-item-wrapper:not(:last-child) {
  -webkit-padding-end: 30px;
          padding-inline-end: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-project-item-wrapper:not(:last-child) {
    -webkit-padding-end: 20px;
            padding-inline-end: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-project-item-wrapper:not(:last-child) {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }
}
.h5-project-item-wrapper .h5-project-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-project-item-wrapper .h5-project-item {
    gap: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-project-item-wrapper .h5-project-item {
    gap: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.h5-project-item.project-item .project-content {
  max-width: 360px;
  padding-bottom: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-project-item.project-item .project-content {
    padding: 0 0 10px 0;
  }
}
.h5-project-item.project-item .project-content .title {
  margin-bottom: 20px;
  max-width: 308px;
  font-weight: var(--tj-fw-medium);
}
.h5-project-item.project-item .project-content .desc {
  margin-bottom: 24px;
}
.h5-project-item.project-item .project-img {
  max-width: 615px;
  height: 505px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-project-item.project-item .project-img {
    height: 350px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-project-item.project-item .project-img {
    max-width: 330px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-project-item.project-item .project-img {
    height: 300px;
  }
}

/* !END: Home 5 Project CSS */
/**----------------------------------------
START: Testimonial CSS
----------------------------------------*/
.h5-testimonial {
  background-color: var(--tj-color-theme-bg);
  position: relative;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
}
.h5-testimonial .sec-heading-wrap {
  padding-top: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-testimonial .sec-heading-wrap {
    padding-top: 100px;
  }
}
@media (max-width: 575px) {
  .h5-testimonial-wrapper {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
.h5-testimonial-wrapper .swiper {
  overflow: visible;
}
.h5-testimonial-wrapper .testimonial-item {
  background-color: var(--tj-color-common-white);
  border: 2px solid var(--tj-color-common-white);
  padding: 40px 30px 35px;
  height: 100%;
  border-radius: 12px;
}
.h5-testimonial-wrapper .testimonial-item .testimonial-author .title {
  font-weight: var(--tj-fw-sbold);
}
.h5-testimonial-wrapper .testimonial-item .desc {
  font-size: 24px;
  line-height: 1.3333;
  color: var(--tj-color-theme-dark-2);
  font-weight: var(--tj-fw-medium);
}
.h5-testimonial-wrapper .testimonial-item .desc p {
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-testimonial-wrapper .testimonial-item .desc {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-testimonial-wrapper .testimonial-item .desc {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-testimonial-wrapper .testimonial-item {
    padding: 35px 23px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-testimonial-wrapper .testimonial-item {
    padding: 30px 20px;
  }
}
.h5-testimonial-wrapper .h5-testimonial-author-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-bottom: 30px;
  margin-bottom: 25px;
  border-bottom: 1px dashed var(--tj-color-border-1);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-testimonial-wrapper .h5-testimonial-author-wrapper {
    padding-top: 0;
    padding-bottom: 20px;
    margin-bottom: 16px;
  }
}
.h5-testimonial-wrapper .h5-testimonial-author-wrapper .testimonial-author {
  padding-top: 0;
  border-top: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-testimonial-wrapper .h5-testimonial-author-wrapper .testimonial-author {
    padding-top: 0;
  }
}

/* !END: Testimonial CSS */
/**----------------------------------------
START: Pricing CSS
----------------------------------------*/
.h5-pricing .heading-wrap-content .sec-heading {
  max-width: 360px;
}
.h5-pricing-tab-controllers {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  padding: 6px;
  background-color: var(--tj-color-theme-dark);
  border-radius: 100px;
  gap: 0px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-pricing-tab-controllers {
    padding: 5px;
  }
}
.h5-pricing-tab-controller {
  background: transparent;
  color: var(--tj-color-common-white);
  font-size: 16px;
  padding: 14px 20px;
  border-radius: 50px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  white-space: nowrap;
  font-weight: var(--tj-fw-sbold);
  line-height: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-pricing-tab-controller {
    font-size: 14px;
    padding: 10px 15px;
  }
}
.h5-pricing-tab-controller.active {
  background: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
.h5-pricing-box-wrapper {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  padding: 30px;
  position: relative;
  z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .h5-pricing-box-wrapper {
    padding: 30px 15px;
  }
}
.h5-pricing-box-wrapper .bg-shape-3 {
  inset-inline-start: 20%;
}
.h5-pricing-box {
  padding: 26px 30px 30px;
  background-color: var(--tj-color-common-white);
  border-radius: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
  .h5-pricing-box {
    padding: 26px 15px 30px;
  }
}
.h5-pricing-box .list-items .h5-pricing-list-title {
  margin-bottom: 24px;
  font-weight: var(--tj-fw-sbold);
}
.h5-pricing-box .package-desc {
  margin-bottom: 35px;
}
.h5-pricing-box .package-price {
  margin: 35px 0;
}
.h5-pricing-box .pricing-btn {
  margin-bottom: 0;
  margin-top: 28px;
}
.h5-pricing-box .pricing-btn a {
  background-color: var(--tj-color-theme-primary);
  border: 0;
}
.h5-pricing-box .pricing-btn a .btn-text {
  color: var(--tj-color-common-white);
}
.h5-pricing-box .pricing-btn a:hover .btn-icon {
  background-color: var(--tj-color-theme-dark);
}
.h5-pricing-box.active .package-name, .h5-pricing-box-basic .package-name {
  color: var(--tj-color-common-white);
}
.h5-pricing-box.active .package-desc p, .h5-pricing-box-basic .package-desc p {
  color: var(--tj-color-text-body-2);
}
.h5-pricing-box.active .package-price, .h5-pricing-box-basic .package-price {
  color: var(--tj-color-common-white);
}
.h5-pricing-box.active .package-currency, .h5-pricing-box-basic .package-currency {
  color: var(--tj-color-common-white);
}
.h5-pricing-box.active .package-period, .h5-pricing-box-basic .package-period {
  color: var(--tj-color-text-body-2);
}
.h5-pricing-box.active .pricing-btn a, .h5-pricing-box-basic .pricing-btn a {
  background-color: var(--tj-color-theme-primary);
  border: 0;
}
.h5-pricing-box.active .pricing-btn a .btn-text, .h5-pricing-box-basic .pricing-btn a .btn-text {
  color: var(--tj-color-common-white);
}
.h5-pricing-box.active .list-items .h5-pricing-list-title, .h5-pricing-box-basic .list-items .h5-pricing-list-title {
  color: var(--tj-color-common-white);
}
.h5-pricing-box.active .list-items ul li, .h5-pricing-box-basic .list-items ul li {
  color: var(--tj-color-grey-1);
}
.h5-pricing-box.active .list-items ul li i, .h5-pricing-box-basic .list-items ul li i {
  color: var(--tj-color-theme-primary);
}
.h5-pricing-box-basic {
  background-color: transparent;
  border: 1px solid var(--tj-color-border-3);
}
.h5-pricing-box.active {
  background-color: var(--tj-color-grey-3);
}

/* !END: Pricing CSS */
/**----------------------------------------
START: Theme Marquee CSS
----------------------------------------*/
.h5-maquee {
  position: relative;
  overflow: hidden;
  padding: 70px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-maquee {
    padding: 40px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-maquee {
    padding: 30px 0;
  }
}
.h5-maquee-inner {
  position: relative;
  background: var(--tj-color-theme-primary);
  padding: 31px 0;
  rotate: 2deg;
  z-index: 3;
  width: 105%;
  -webkit-margin-start: -5px;
          margin-inline-start: -5px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-maquee-inner {
    padding: 25px 0;
    rotate: 4deg;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h5-maquee-inner {
    padding: 20px 0;
    rotate: 4deg;
  }
}
@media (max-width: 575px) {
  .h5-maquee-inner {
    padding: 15px 0;
    rotate: 4deg;
  }
}
.h5-maquee-inner .h5-maquee-slider-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}
.h5-maquee-inner .h5-maquee-slider-item {
  width: auto;
  display: inline-block;
}
.h5-maquee-inner .h5-maquee-slider-item .marquee-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 50px;
}
.h5-maquee-inner .h5-maquee-slider-item .marquee-box .marquee-icon {
  line-height: 1;
  -webkit-animation: rotateImg2 6s infinite linear;
          animation: rotateImg2 6s infinite linear;
  color: var(--tj-color-common-white);
}
.h5-maquee-inner .h5-maquee-slider-item .marquee-box .marquee-title .title {
  font-size: 24px;
  font-weight: var(--tj-fw-sbold);
  text-transform: capitalize;
  line-height: 1;
  margin-bottom: 0;
  white-space: nowrap;
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-maquee-inner .h5-maquee-slider-item .marquee-box {
    gap: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h5-maquee-inner .h5-maquee-slider-item .marquee-box {
    gap: 30px;
  }
  .h5-maquee-inner .h5-maquee-slider-item .marquee-box .marquee-icon {
    font-size: 14px;
  }
  .h5-maquee-inner .h5-maquee-slider-item .marquee-box .marquee-title .title {
    font-size: 20px;
  }
}
.h5-maquee-inner-rtl {
  background: var(--tj-color-common-white);
  rotate: -4deg;
  position: absolute;
  inset-inline-start: 0;
  width: 105%;
  top: 70px;
  z-index: 2;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h5-maquee-inner-rtl {
    top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .h5-maquee-inner-rtl {
    top: 30px;
  }
}
@media (max-width: 575px) {
  .h5-maquee-inner-rtl {
    top: 30px;
    rotate: -7deg;
  }
}
.h5-maquee-inner-rtl .h5-maquee-slider-item .marquee-box .marquee-icon {
  -webkit-animation: rotateImg 6s infinite linear;
          animation: rotateImg 6s infinite linear;
  color: var(--tj-color-theme-primary);
}
.h5-maquee-inner-rtl .h5-maquee-slider-item .marquee-box .marquee-title .title {
  color: var(--tj-color-theme-primary);
}

@-webkit-keyframes rotateImg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotateImg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateImg2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes rotateImg2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
/* !END: Theme Marquee CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.h5-blog-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(50% - 15px), 1fr));
  grid-gap: 30px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.h5-blog-wrapper .blog-item.h5-blog-item {
  padding: 15px;
}
.h5-blog-wrapper .blog-item.h5-blog-item .blog-thumb {
  width: 41%;
}
.h5-blog-wrapper .blog-item.h5-blog-item .blog-date {
  top: auto;
  bottom: 15px;
  inset-inline-start: auto;
  inset-inline-end: 15px;
}
.h5-blog-wrapper .blog-item.h5-blog-item .blog-content {
  padding: 35px 15px 35px 25px;
  width: 59%;
}
.h5-blog-wrapper .blog-item:first-child {
  grid-row: 1/3;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 0;
}
.h5-blog-wrapper .blog-item:first-child.h5-blog-item .blog-thumb {
  width: 100%;
}
.h5-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content {
  width: 100%;
  padding: 20px 15px 15px;
}
.h5-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .title {
  font-size: 32px;
  font-weight: var(--tj-fw-medium);
}
.h5-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .text-btn {
  margin-top: 24px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h5-blog-wrapper {
    grid-template-columns: 696px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h5-blog-wrapper {
    grid-template-columns: 516px;
  }
  .h5-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content {
    padding: 20px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h5-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .blog-title {
    font-size: 26px;
  }
}
@media (max-width: 575px) {
  .h5-blog-wrapper {
    grid-template-columns: 100%;
  }
  .h5-blog-wrapper .blog-item.h5-blog-item .blog-thumb {
    width: 100%;
    max-height: 240px;
  }
  .h5-blog-wrapper .blog-item.h5-blog-item .blog-content {
    padding: 20px 0 10px 0;
    width: 100%;
  }
  .h5-blog-wrapper .blog-item.h5-blog-item .blog-content .title {
    font-size: 24px;
  }
  .h5-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content {
    padding: 20px 0 10px 0;
  }
  .h5-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .title {
    font-size: 24px;
    font-weight: var(--tj-fw-sbold);
  }
  .h5-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .text-btn {
    margin-top: 16px;
  }
}

/* !END: Blog CSS */
/**----------------------------------------
START: Theme Footer CSS
----------------------------------------*/
@media (max-width: 575px) {
  .tj-footer-section.h5-footer .h5-footer-subscribe {
    padding: 24px 20px 32px;
  }
}
.tj-footer-section.h5-footer .h5-footer-subscribe .title {
  color: var(--tj-color-common-white);
  max-width: 500px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.h5-footer .h5-footer-subscribe .title {
    max-width: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-footer-section.h5-footer .h5-footer-subscribe .title {
    max-width: 100%;
  }
}
.tj-footer-section.h5-footer .h5-footer-subscribe .subscribe-form input[type=checkbox] {
  border: 1px solid var(--tj-color-text-body-2);
}
.tj-footer-section.h5-footer .h5-footer-subscribe .subscribe-form input[type=checkbox]::before {
  color: var(--tj-color-theme-dark);
}
.tj-footer-section.h5-footer .h5-footer-subscribe .subscribe-form input[type=checkbox]:checked {
  background-color: var(--tj-color-common-white);
  border-color: var(--tj-color-common-white);
}
.tj-footer-section.h5-footer .h5-footer-subscribe .subscribe-form label {
  color: var(--tj-color-text-body-2);
}
.tj-footer-section.h5-footer .h5-footer-subscribe .subscribe-form label a {
  color: var(--tj-color-common-white);
}
.tj-footer-section.h5-footer .h5-footer-subscribe .subscribe-form label a:hover {
  color: var(--tj-color-theme-primary);
}
.tj-footer-section.h5-footer .h5-footer-copyright {
  border-top: 1px dashed var(--tj-color-border-2);
}

/* !END: Theme Footer CSS */
/**----------------------------------------
START: Theme Header CSS
----------------------------------------*/
.header-area.h6-header.header-absolute {
  top: 30px;
  inset-inline-start: 15px;
  width: calc(100% - 60px);
  border-radius: 12px;
  z-index: 999;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.h6-header.header-absolute {
    inset-inline-start: 12px;
    top: 24px;
    width: calc(100% - 48px);
  }
}
.header-area.h6-header.sticky {
  width: calc(100% - 30px);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.h6-header.sticky {
    width: 100%;
  }
}

/* !END: Theme Header CSS */
/**----------------------------------------
START: Theme Footer CSS
----------------------------------------*/
.tj-footer-section.h6-footer {
  padding-top: 0;
}
.tj-footer-section.h6-footer .h6-footer-subscribe {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
}
@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) {
  .tj-footer-section.h6-footer .h6-footer-subscribe {
    margin-top: 0;
  }
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form input[type=email] {
  background-color: var(--tj-color-grey-3);
  backdrop-filter: blur(10px);
  color: var(--tj-color-common-white);
  outline: 1px solid transparent;
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form input[type=email]::-webkit-input-placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-common-white);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form input[type=email]::-moz-placeholder {
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-common-white);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form input[type=email]:-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-common-white);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form input[type=email]::-ms-input-placeholder {
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-common-white);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form input[type=email]::placeholder {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--tj-color-common-white);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form input[type=email]:focus {
  outline-color: var(--tj-color-theme-primary);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form input[type=checkbox] {
  border: 1px solid var(--tj-color-grey-3);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form input[type=checkbox]::before {
  color: var(--tj-color-common-white);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form input[type=checkbox]:checked {
  background-color: var(--tj-color-grey-3);
  border-color: var(--tj-color-grey-3);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form button::before {
  border-color: var(--tj-color-grey-3);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form label {
  color: var(--tj-color-grey-1);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form label a {
  color: var(--tj-color-common-white);
}
.tj-footer-section.h6-footer .h6-footer-subscribe .subscribe-form label a:hover {
  color: var(--tj-color-theme-primary);
}
.tj-footer-section.h6-footer .h6-footer-col-2 {
  -webkit-padding-start: 17px;
          padding-inline-start: 17px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-footer-section.h6-footer .h6-footer-col-2 {
    -webkit-padding-start: 90px;
            padding-inline-start: 90px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h6-footer .h6-footer-col-2 {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
.tj-footer-section.h6-footer .h6-footer-col-3.widget-nav-menu {
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.h6-footer .h6-footer-col-3.widget-nav-menu {
    margin-top: 0;
    -webkit-padding-start: 10px;
            padding-inline-start: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-footer-section.h6-footer .h6-footer-col-3.widget-nav-menu {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h6-footer .h6-footer-col-3.widget-nav-menu {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.h6-footer .h6-footer-contact {
    margin-top: 0;
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-footer-section.h6-footer .h6-footer-contact {
    -webkit-padding-start: 90px;
            padding-inline-start: 90px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h6-footer .h6-footer-contact {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
.tj-footer-section.h6-footer .h6-footer-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}
.tj-footer-section.h6-footer .h6-footer-logo-area {
  padding-bottom: 50px;
}
.tj-footer-section.h6-footer .h6-footer-copyright {
  border-color: var(--tj-color-border-4);
}
.tj-footer-section.h6-footer .h6-footer-copyright .copyright-menu ul li::before {
  background: var(--tj-color-border-4);
}
.tj-footer-section.h6-footer .bg-shape-3 {
  max-width: 100%;
  inset-inline-start: 0;
  width: 100%;
}

.social-links.style-6 ul li a {
  background-color: var(--tj-color-common-white);
  opacity: 0.3;
}
.social-links.style-6 ul li a i {
  color: var(--tj-color-theme-dark);
}
.social-links.style-6 ul li a:hover {
  background-color: var(--tj-color-common-white);
  opacity: 1;
}
.social-links.style-6 ul li a:hover i {
  color: var(--tj-color-theme-dark);
}

/* !END: Theme Footer CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.h6-hero {
  position: relative;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-hero.section-gap-x {
    border-start-end-radius: 12px;
    border-start-start-radius: 12px;
  }
}
.h6-hero .banner-area {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  gap: 15px;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-hero .banner-area {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.h6-hero .banner-content {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  max-width: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .h6-hero .banner-content {
    padding: 0;
  }
}
.h6-hero .banner-content .banner-title {
  color: var(--tj-color-heading-primary);
  line-height: 1.12;
  max-width: 681px;
  margin-bottom: 24px;
}
.h6-hero .banner-left-box {
  background-color: var(--tj-color-theme-bg);
  padding: 225px 60px 60px 50px;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  width: 50%;
  border-radius: 16px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h6-hero .banner-left-box {
    padding: 195px 40px 40px 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h6-hero .banner-left-box {
    padding: 180px 30px 40px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-hero .banner-left-box {
    padding: 170px 30px 40px 30px;
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-hero .banner-left-box {
    border-radius: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h6-hero .banner-left-box {
    padding: 150px 15px 30px 15px;
  }
}
@media (max-width: 575px) {
  .h6-hero .banner-left-box {
    padding: 140px 15px 30px 15px;
  }
}
.h6-hero .banner-left-box::before {
  display: none;
}
.h6-hero-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 30px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .h6-hero-bottom {
    gap: 15px;
    padding-top: 50px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media (max-width: 575px) {
  .h6-hero-bottom {
    padding-top: 40px;
  }
}
.h6-hero-history {
  max-width: 348px;
}
.h6-hero-history-title {
  padding-bottom: 15px;
  margin-bottom: 15px;
  position: relative;
  z-index: 0;
}
.h6-hero-history-title::after, .h6-hero-history-title::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--tj-color-border-1);
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
          transform: translateY(50%);
  z-index: -2;
}
.h6-hero-history-title:after {
  width: 32px;
  height: 3px;
  background-color: var(--tj-color-theme-primary);
}
.h6-hero-card-wrapper {
  position: relative;
  z-index: 0;
  max-width: 315px;
  padding: 15px;
  background-color: var(--tj-color-common-white);
  border-radius: 12px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px) {
  .h6-hero-card-wrapper {
    max-width: 250px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-hero-card-wrapper {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    -webkit-margin-end: auto;
            margin-inline-end: auto;
  }
}
.h6-hero-card-wrapper .swiper-pagination-area {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: 15px;
  bottom: 20px;
  text-align: end;
  line-height: 0;
  margin-top: 0;
  z-index: 1;
}
.h6-hero-card-wrapper .swiper-pagination-area .swiper-pagination-bullet {
  width: 8px;
}
.h6-hero-card-wrapper .swiper-pagination-area .swiper-pagination-bullet-active {
  width: 8px;
}
.h6-hero-card-banner {
  border-radius: 12px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.h6-hero-card-banner::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  opacity: 0.3;
  z-index: 1;
}
.h6-hero-card-video {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid var(--tj-color-grey-3);
  position: absolute;
  z-index: 2;
  inset-inline-start: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  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;
  line-height: 1;
  -webkit-animation: pulse4 1.3s ease-out infinite;
          animation: pulse4 1.3s ease-out infinite;
}
.h6-hero-card-video i {
  color: var(--tj-color-common-white);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-padding-start: 4px;
          padding-inline-start: 4px;
}
.h6-hero-card-video:hover i {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}
.h6-hero-card-content {
  padding: 15px 5px 5px;
  font-weight: var(--tj-fw-sbold);
}
.h6-hero-card-title {
  margin: 0;
  opacity: 0;
  -webkit-transform: translateY(10%);
      -ms-transform: translateY(10%);
          transform: translateY(10%);
  -webkit-transition: 0.3s 0.6s;
  transition: 0.3s 0.6s;
}
.h6-hero-card-title a:hover {
  color: var(--tj-color-theme-primary);
}
.h6-hero-card-wrapper .swiper-slide-active .h6-hero-card-title {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  max-width: 207px;
}
.h6-hero .banner-left-box {
  border-radius: 16px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-hero .banner-left-box {
    border-radius: 14px;
  }
}

/* !END: Hero CSS */
/**----------------------------------------
START: Choose CSS
----------------------------------------*/
.h6-choose {
  overflow: hidden;
}
.h6-choose-box .choose-icon {
  border-radius: 100%;
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  font-size: 65px;
  max-width: 90px;
  height: 90px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.h6-choose-box .choose-icon i {
  width: 42px;
}
.h6-choose-box .choose-icon .tji-support {
  -webkit-margin-start: -8px;
          margin-inline-start: -8px;
  margin-top: -3px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-choose-box .choose-icon {
    max-width: 80px;
    height: 80px;
    font-size: 56px;
  }
  .h6-choose-box .choose-icon i {
    width: 36px;
  }
}
.h6-choose-box:hover {
  background-color: var(--tj-color-common-white);
}
.h6-choose-box:hover .title {
  color: var(--tj-color-heading-primary);
}
.h6-choose-box:hover .desc {
  color: var(--tj-color-text-body);
}

/* !END: Choose CSS */
/**----------------------------------------
START: Home 5 About CSS
----------------------------------------*/
.h6-about {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.h6-about-content.about-content-area {
  background-color: transparent;
  max-width: 561px;
  padding: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-about-content.about-content-area {
    max-width: 100%;
  }
}
.h6-about-content .sec-heading.style-2 .sub-title {
  background-color: var(--tj-color-grey-3);
}
.h6-about-content .sec-title {
  color: var(--tj-color-common-white);
  margin-bottom: 16px;
}
.h6-about-content .desc {
  color: var(--tj-color-text-body-2);
  margin-bottom: 0;
}
.h6-about-funfact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 30px 26px;
  width: 100%;
}
.h6-about-funfact-wrapper {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  width: 100%;
  border-radius: 8px;
  width: 100%;
  margin-bottom: 30px;
  position: relative;
  z-index: 0;
}
@media (max-width: 575px) {
  .h6-about-funfact {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 20px 15px 26px;
  }
}
.h6-about-funfact .countup-item {
  width: 50%;
  padding: 0;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.h6-about-funfact .countup-item:not(:last-child) {
  -webkit-padding-end: 45px;
          padding-inline-end: 45px;
}
.h6-about-funfact .countup-item:not(:first-child) {
  -webkit-padding-start: 30px;
          padding-inline-start: 30px;
  position: relative;
  z-index: 0;
}
.h6-about-funfact .countup-item:not(:first-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 52%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0;
  height: 88%;
  -webkit-border-end: 1px dashed var(--tj-color-border-3);
          border-inline-end: 1px dashed var(--tj-color-border-3);
}
.h6-about-funfact .countup-item .count-text {
  max-width: 205px;
  color: var(--tj-color-text-body-2);
}
.h6-about-funfact .countup-item .inline-content {
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .h6-about-funfact .countup-item .inline-content {
    margin-bottom: 5px;
  }
}
@media (max-width: 575px) {
  .h6-about-funfact .countup-item {
    width: 100%;
    text-align: start;
  }
  .h6-about-funfact .countup-item:not(:last-child) {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
    padding-bottom: 20px;
  }
  .h6-about-funfact .countup-item:not(:first-child) {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
    padding-top: 15px;
  }
  .h6-about-funfact .countup-item:not(:first-child)::after {
    inset-inline-start: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100%;
    height: 0;
    -webkit-border-end: 0;
            border-inline-end: 0;
    border-top: 1px dashed var(--tj-color-border-3);
  }
}
.h6-about-funfact-shape {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  z-index: -1;
  border-radius: 8px;
  height: 100%;
  overflow: hidden;
}
.h6-about-funfact-shape img {
  height: 100%;
}
.h6-about-img {
  -webkit-margin-start: 60px;
          margin-inline-start: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h6-about-img {
    -webkit-margin-start: 15px;
            margin-inline-start: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-about-img {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
    margin-top: 50px;
  }
}
.h6-about-box {
  inset-inline-start: 25px;
  bottom: 25px;
  padding: 0;
  background-color: transparent;
  max-width: 248px;
}
.h6-about-box::before, .h6-about-box::after {
  display: none;
}
.h6-about-box .customers-box {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.h6-about-box .customers-box .customers-text {
  margin-top: 24px;
  color: var(--tj-color-common-white);
  font-size: 20px;
  font-weight: var(--tj-fw-sbold);
}

/* !END: Home 5 About CSS  */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
.h6-service-item {
  height: 100%;
  padding: 15px;
  padding-bottom: 0;
  background-color: var(--tj-color-common-white);
  border-radius: 10px;
  overflow: hidden;
}
.h6-service-item .h6-service-thumb {
  min-height: 280px;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}
.h6-service-item .h6-service-thumb img {
  width: 100%;
  min-height: 280px;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 500ms;
  transition: -webkit-transform 500ms;
  transition: transform 500ms;
  transition: transform 500ms, -webkit-transform 500ms;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1);
          transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1);
  border-radius: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .h6-service-item .h6-service-thumb {
    min-height: 240px;
  }
  .h6-service-item .h6-service-thumb img {
    min-height: 240px;
  }
}
.h6-service-item .h6-service-content {
  padding: 25px 15px 30px;
  height: 100%;
}
.h6-service-item .h6-service-content .title {
  font-weight: var(--tj-fw-sbold);
  margin: 0;
  width: calc(100% - 50px);
}
.h6-service-item .h6-service-content .title a:hover {
  color: var(--tj-color-theme-primary);
}
.h6-service-item .h6-service-content .desc {
  margin-top: 15px;
}
.h6-service-item .h6-service-content .desc:last-of-type {
  margin-bottom: 0;
}
.h6-service-item .h6-service-content .text-btn .btn-icon {
  width: 40px;
  height: 40px;
}
.h6-service-item .h6-service-index {
  color: var(--tj-color-text-body-3);
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 16px;
}
.h6-service-item:hover .h6-service-thumb img {
  -webkit-transform: perspective(400px) rotateX(0.09deg) rotateY(0) scale(1.1);
          transform: perspective(400px) rotateX(0.09deg) rotateY(0) scale(1.1);
}
.h6-service-title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}

/* !END: Service CSS */
/* START: Case Study CSS */
.h6-project {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.h6-project .heading-wrap-content {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.h6-project .sec-heading.style-2 .sub-title {
  background-color: var(--tj-color-grey-3);
}
.h6-project .sec-heading.style-2 .sec-title {
  color: var(--tj-color-common-white);
}
.h6-project-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  padding: 0 18px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-project-inner {
    gap: 20px;
    padding: 0 8px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h6-project-inner {
    gap: 15px;
    padding: 0 3px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-project-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.h6-project-item {
  width: 184px;
  height: 580px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  border-radius: 10px;
}
@media (min-width: 1921px) {
  .h6-project-item {
    width: 13%;
    height: 600px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h6-project-item {
    height: 400px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-project-item {
    width: 100%;
    height: 300px;
  }
}
.h6-project-item-inner {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  height: 100%;
  min-height: 100%;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  z-index: 0;
  overflow: hidden;
}
.h6-project-item-inner::after {
  content: " ";
  width: 100%;
  height: 100%;
  background: rgba(12, 30, 33, 0.5);
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  z-index: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-project-item-inner::after {
    opacity: 1;
  }
}
.h6-project-item .project-content {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  padding: 30px;
  z-index: 3;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: 0.4s 0.3s;
  transition: 0.4s 0.3s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h6-project-item .project-content {
    padding: 20px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h6-project-item .project-content {
    padding: 20px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h6-project-item .project-content {
    padding: 20px 10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-project-item .project-content {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
}
@media (max-width: 575px) {
  .h6-project-item .project-content {
    padding: 15px 15px;
  }
}
.h6-project-item .project-content .categories a {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--tj-color-common-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.h6-project-item .project-content .categories a:hover {
  background-color: var(--tj-color-theme-primary);
}
.h6-project-item .project-content .project-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 18px;
  gap: 15px;
}
.h6-project-item .project-content .project-text .title {
  color: var(--tj-color-common-white);
  max-width: 351px;
  min-width: 351px;
  width: 100%;
  margin-bottom: 0;
}
.h6-project-item .project-content .project-text .title a {
  color: var(--tj-color-common-white);
}
.h6-project-item .project-content .project-text .title a:hover {
  opacity: 0.8;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h6-project-item .project-content .project-text .title {
    min-width: 284px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h6-project-item .project-content .project-text .title {
    font-size: 20px;
    max-width: 200px;
    min-width: auto;
  }
}
@media (max-width: 575px) {
  .h6-project-item .project-content .project-text .title {
    font-size: 20px;
    width: calc(100% - 70px);
    min-width: auto;
  }
}
@media (max-width: 575px) {
  .h6-project-item .project-content .project-text {
    margin-top: 12px;
  }
}
.h6-project-item .project-content .project-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 22px;
  backdrop-filter: blur(15px);
  opacity: 1;
}
.h6-project-item .project-content .project-btn i {
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-normal);
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.h6-project-item .project-content .project-btn:hover {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.h6-project-item .project-content .project-btn:hover i {
  color: var(--tj-color-common-white);
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h6-project-item .project-content .project-btn {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
}
@media (max-width: 575px) {
  .h6-project-item .project-content .project-btn {
    width: 55px;
    height: 55px;
    font-size: 18px;
  }
}
.h6-project-item:hover .project-content {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}
.h6-project-item.active {
  width: 759px;
  place-content: unset;
}
@media (min-width: 1921px) {
  .h6-project-item.active {
    width: 48%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-project-item.active {
    width: 100%;
    height: 300px;
  }
}
.h6-project-item.active .h6-project-item-inner::after {
  opacity: 1;
}
.h6-project-item.active .h6-project-item-inner .project-content {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

/* !END: Case Study CSS */
/**----------------------------------------
START: Working process CSS
----------------------------------------*/
.h6-working-process {
  position: relative;
  z-index: 1;
}
.h6-working-process .content-wrap .tj-primary-btn {
  margin-top: 24px;
}
.h6-working-process .content-wrap {
  max-width: 550px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-working-process .content-wrap {
    max-width: 100%;
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }
}
.h6-working-process-inner {
  padding: 60px 50px 75px;
  border-radius: 10px;
  background-color: var(--tj-color-common-white);
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h6-working-process-inner {
    padding: 50px 40px 65px;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h6-working-process-inner {
    margin-top: 45px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-working-process-inner {
    padding: 40px 15px 55px;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
    margin-top: 45px;
  }
}
.h6-working-process-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 45px;
  position: relative;
  z-index: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h6-working-process-wrapper {
    gap: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-working-process-wrapper {
    gap: 25px;
  }
}
.h6-working-process-wrapper::after {
  content: "";
  position: absolute;
  inset-inline-start: 34px;
  top: 0;
  width: 0;
  height: 100%;
  -webkit-border-end: 1px dashed var(--tj-color-border-1);
          border-inline-end: 1px dashed var(--tj-color-border-1);
  z-index: -1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-working-process-wrapper::after {
    inset-inline-start: 29px;
  }
}
.h6-working-process-item {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  position: static;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  -webkit-padding-start: 95px;
          padding-inline-start: 95px;
  position: relative;
  z-index: 0;
  max-width: 100%;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h6-working-process-item {
    -webkit-padding-start: 75px;
            padding-inline-start: 75px;
  }
}
@media (max-width: 575px) {
  .h6-working-process-item {
    -webkit-padding-start: 70px;
            padding-inline-start: 70px;
  }
}
.h6-working-process-item:not(:last-child)::after {
  display: none;
}
.h6-working-process-item .process-step {
  background-image: none;
  background-clip: inherit;
  background-color: var(--tj-color-theme-bg);
  -webkit-text-fill-color: inherit;
  font-size: 24px;
  -webkit-transform: 0.4s;
      -ms-transform: 0.4s;
          transform: 0.4s;
  line-height: 1;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  outline: 15px solid var(--tj-color-common-white);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.h6-working-process-item .process-step span {
  color: var(--tj-color-heading-primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h6-working-process-item .process-step {
    font-size: 22px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-working-process-item .process-step {
    font-size: 20px;
    width: 60px;
    height: 60px;
    outline-width: 10px;
  }
}
.h6-working-process-item .process-content .title {
  margin-top: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-working-process-item .process-content .title {
    margin-top: 10px;
  }
}
.h6-working-process-item.active .process-step {
  background-color: var(--tj-color-theme-primary);
}
.h6-working-process-item.active .process-step span {
  color: var(--tj-color-common-white);
}

/* !END: Working process CSS */
/**----------------------------------------
START: Award CSS
----------------------------------------*/
.tj-award-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px;
  position: relative;
  z-index: 0;
}
.tj-award-wrapper .active-bg {
  top: 0px;
  bottom: 0px;
  inset-inline-start: 0px;
  inset-inline-end: 0px;
  position: absolute;
  opacity: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  background-color: var(--tj-color-theme-primary);
  border-radius: 8px;
  z-index: 1;
}
.tj-award-wrapper:has(.tj-award-item:hover) .active-bg {
  opacity: 1;
}
.tj-award-title, .tj-award-date, .tj-award-index, .tj-award-result {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.tj-award-item {
  background-color: var(--tj-color-common-white);
  border-radius: 8px;
}
.tj-award-item-inner {
  padding: 35px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
@media (max-width: 575px) {
  .tj-award-item-inner {
    padding: 30px 15px;
  }
}
.tj-award-item-inner .tj-award-img {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.tj-award-item-inner .tj-award-img img {
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.tj-award-item-inner .tj-award-img img:first-child {
  opacity: 1;
}
.tj-award-item-inner .tj-award-img img:nth-child(2) {
  position: absolute;
  width: 100%;
  inset-inline-start: 0;
  top: 0;
  z-index: -1;
}
.tj-award-item-inner .tj-award-img-wrapper {
  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;
  gap: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-award-item-inner .tj-award-img-wrapper {
    gap: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-award-item-inner .tj-award-img-wrapper {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}
.tj-award-item-inner .tj-award-title-wrapper {
  -webkit-padding-start: 40px;
          padding-inline-start: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-award-item-inner .tj-award-title-wrapper {
    -webkit-padding-start: 30px;
            padding-inline-start: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-award-item-inner .tj-award-title-wrapper {
    -webkit-padding-start: 12px;
            padding-inline-start: 12px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-award-item-inner .tj-award-title-wrapper {
    margin-top: 10px;
  }
}
.tj-award-item-inner .tj-award-result {
  color: var(--tj-colot-theme-dark-3);
}
.tj-award-item-inner .tj-award-date-wrapper {
  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;
  gap: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-award-item-inner .tj-award-date-wrapper {
    -webkit-padding-start: 30px;
            padding-inline-start: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-award-item-inner .tj-award-date-wrapper {
    margin-top: 12px;
  }
}
.tj-award-item-inner:hover .tj-award-title, .tj-award-item-inner:hover .tj-award-date, .tj-award-item-inner:hover .tj-award-index, .tj-award-item-inner:hover .tj-award-result {
  color: var(--tj-color-common-white);
}
.tj-award-item-inner:hover .tj-award-img img:first-child {
  opacity: 0;
}

/* !END: Award CSS */
/**----------------------------------------
START: Testimonial CSS
----------------------------------------*/
.h6-testimonial {
  background-color: var(--tj-color-theme-dark);
  position: relative;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
}
.h6-testimonial .container {
  --bs-gutter-x: 30px;
}
.h6-testimonial .container .row {
  --bs-gutter-x: 30px;
}
@media (max-width: 575px) {
  .h6-testimonial .container {
    --bs-gutter-x: 24px;
  }
  .h6-testimonial .container .row {
    --bs-gutter-x: 24px;
  }
}
.h6-testimonial .sec-heading.style-2 .sub-title {
  background-color: var(--tj-color-grey-3);
}
.h6-testimonial .sec-heading.style-2 .sec-title {
  color: var(--tj-color-common-white);
}
.h6-testimonial .content-wrap {
  max-width: 500px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h6-testimonial .content-wrap {
    max-width: 100%;
  }
}
.h6-testimonial .content-wrap .desc {
  color: var(--tj-color-text-body-2);
}
.h6-testimonial .content-wrap .tj-primary-btn {
  margin-top: 24px;
}
.h6-testimonial-banner {
  border-radius: 12px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin-bottom: 60px;
}
.h6-testimonial-banner img {
  width: 100%;
}
.h6-testimonial-banner::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  opacity: 0.3;
  z-index: 1;
}
.h6-testimonial-banner-video {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid var(--tj-color-grey-3);
  position: absolute;
  z-index: 2;
  inset-inline-start: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  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;
  line-height: 1;
  -webkit-animation: pulse4 1.3s ease-out infinite;
          animation: pulse4 1.3s ease-out infinite;
}
.h6-testimonial-banner-video i {
  color: var(--tj-color-common-white);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-padding-start: 4px;
          padding-inline-start: 4px;
}
.h6-testimonial-banner-video:hover i {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}
.h6-testimonial-wrapper {
  height: 750px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-testimonial-wrapper {
    margin-top: 50px;
    height: auto;
  }
}
@media (max-width: 575px) {
  .h6-testimonial-wrapper {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
.h6-testimonial-wrapper .swiper {
  overflow: visible;
  height: 100%;
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(5%, rgba(12, 30, 33, 0)), color-stop(21%, #0c1e21));
  -webkit-mask-image: linear-gradient(0deg, rgba(12, 30, 33, 0) 5%, #0c1e21 21%);
          mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(5%, rgba(12, 30, 33, 0)), color-stop(21%, #0c1e21));
          mask-image: linear-gradient(0deg, rgba(12, 30, 33, 0) 5%, #0c1e21 21%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .h6-testimonial-wrapper .swiper {
    -webkit-mask-image: -webkit-gradient(linear, right top, left top, from(rgba(12, 30, 33, 0)), color-stop(20%, #0c1e21));
    -webkit-mask-image: linear-gradient(-90deg, rgba(12, 30, 33, 0) 0%, #0c1e21 20%);
            mask-image: -webkit-gradient(linear, right top, left top, from(rgba(12, 30, 33, 0)), color-stop(20%, #0c1e21));
            mask-image: linear-gradient(-90deg, rgba(12, 30, 33, 0) 0%, #0c1e21 20%);
  }
}
@media (max-width: 575px) {
  .h6-testimonial-wrapper .swiper {
    -webkit-mask-image: none;
            mask-image: none;
  }
}
.h6-testimonial-wrapper .swiper-slide {
  height: auto;
}
.h6-testimonial-wrapper .testimonial-item {
  background-color: var(--tj-color-grey-3);
  padding: 40px 30px 35px;
  height: 100%;
  border-radius: 12px;
}
.h6-testimonial-wrapper .testimonial-item .testimonial-author .title {
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-common-white);
}
.h6-testimonial-wrapper .testimonial-item .desc {
  font-size: 24px;
  line-height: 1.3333;
  color: var(--tj-color-text-body-2);
  font-weight: var(--tj-fw-medium);
}
.h6-testimonial-wrapper .testimonial-item .desc p {
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h6-testimonial-wrapper .testimonial-item .desc {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-testimonial-wrapper .testimonial-item .desc {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h6-testimonial-wrapper .testimonial-item {
    padding: 35px 23px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-testimonial-wrapper .testimonial-item {
    padding: 30px 20px;
  }
}
.h6-testimonial-wrapper .h6-testimonial-author-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-bottom: 30px;
  margin-bottom: 25px;
  border-bottom: 1px dashed var(--tj-color-border-2);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-testimonial-wrapper .h6-testimonial-author-wrapper {
    padding-top: 0;
    padding-bottom: 20px;
    margin-bottom: 16px;
  }
}
.h6-testimonial-wrapper .h6-testimonial-author-wrapper .testimonial-author {
  padding-top: 0;
  border-top: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h6-testimonial-wrapper .h6-testimonial-author-wrapper .testimonial-author {
    padding-top: 0;
  }
}
.h6-testimonial-wrapper .h6-testimonial-author-wrapper .testimonial-author .designation {
  color: var(--tj-color-text-body-2);
}

/* !END: Testimonial CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.h6-blog-wrapper .blog-date {
  top: auto;
  inset-inline-start: auto;
  bottom: 15px;
  inset-inline-end: 15px;
}

/* !END: Blog CSS */
/**----------------------------------------
START: Client CSS
----------------------------------------*/
.h6-client {
  margin: 0 15px 15px;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}
.h6-client .container-fluid {
  --bs-gutter-x: 0;
}
.h6-client .container-fluid .row {
  --bs-gutter-x: 0;
}
.h6-client-title {
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-bold);
  line-height: 1.57;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.h6-client-title-wrapper {
  text-align: center;
  padding: 25px 15px 55px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 575px) {
  .h6-client-title-wrapper {
    padding: 15px 15px 35px;
  }
}
@media (max-width: 575px) {
  .h6-client-title {
    gap: 0px;
  }
}
.h6-client-title::after, .h6-client-title::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--tj-color-common-white);
  border-radius: 100%;
  line-height: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.h6-client-slider .client-logo {
  background: var(--tj-color-grey-3);
  border: 0;
}
.h6-client-slider .client-logo img {
  opacity: 1;
}
.h6-client-slider .client-logo:hover img {
  -webkit-animation: gelatine 0.6s;
          animation: gelatine 0.6s;
}

/* !END: Client CSS */
/**----------------------------------------
START: Theme Header CSS
----------------------------------------*/
.h7-header.header-area.header-absolute {
  background: transparent;
  padding: 5px 0;
  z-index: 1001;
  top: 15px;
}
.h7-header.header-area.header-absolute .header-wrapper {
  background: transparent;
  border-radius: 0;
  backdrop-filter: blur(0);
  padding: 0 5px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h7-header.header-area.header-absolute .header-wrapper {
    padding: 0 1px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-header.header-area.header-absolute .header-wrapper {
    padding: 15px 0;
  }
}
.h7-header.header-area.header-absolute .search_popup {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  inset-inline-start: 5px;
  width: calc(100% - 10px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h7-header.header-area.header-absolute .search_popup {
    inset-inline-start: 1px;
    width: calc(100% - 2px);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-header.header-area.header-absolute {
    top: 12px;
    width: calc(100% - 48px);
    padding: 5px 0;
  }
}

/* !END: Theme Header CSS */
/**----------------------------------------
START: Theme Footer CSS
----------------------------------------*/
.tj-footer-section.h7-footer {
  padding-top: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.h7-footer {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h7-footer {
    padding-top: 70px;
  }
}
.tj-footer-section.h7-footer .h7-footer-main {
  padding-top: 0;
}
.tj-footer-section.h7-footer .h7-footer-copyright {
  border-top: 1px dashed var(--tj-color-border-1);
  padding: 30px 0;
}
.tj-footer-section.h7-footer .h7-footer-copyright .copyright-content-area {
  border: 0;
  padding: 0;
}

/* !END: Theme Footer CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.h7-hero {
  position: relative;
  margin: 0 15px 0 15px;
  border-radius: 16px;
  overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-hero {
    border-radius: 12px;
    margin: 0 12px 0;
  }
}
.h7-hero-inner {
  background: var(--tj-color-theme-dark);
  position: relative;
}
.h7-hero-inner::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 90px;
  width: 100%;
  height: 1px;
  background-color: var(--tj-color-border-2);
  z-index: 998;
}
.h7-hero-bg-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  mix-blend-mode: Luminosity;
}
.h7-hero-item {
  min-height: 92.5vh;
  background-color: #0c1e21;
  position: relative;
}
.h7-hero-item::after {
  position: absolute;
  content: "";
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgb(12, 30, 33)), color-stop(60%, rgba(12, 30, 33, 0.4)), to(rgba(12, 30, 33, 0.1)));
  background: linear-gradient(90deg, rgb(12, 30, 33) 20%, rgba(12, 30, 33, 0.4) 60%, rgba(12, 30, 33, 0.1) 100%);
}
.h7-hero-item-wrapper {
  padding: 242px 0 30px;
  min-height: 883px;
  position: relative;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h7-hero-item-wrapper {
    -webkit-padding-start: 50px;
            padding-inline-start: 50px;
    padding-top: 170px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h7-hero-item-wrapper {
    padding: 170px 0 280px 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h7-hero-item-wrapper {
    padding: 170px 0 280px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h7-hero-item-wrapper {
    padding: 170px 0 0 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-hero-item-wrapper {
    padding: 150px 0 0 0;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h7-hero-item {
    height: 95vh;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h7-hero-item {
    min-height: auto;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-hero-item {
    min-height: 840px;
  }
}
.h7-hero-content {
  max-width: 660px;
  position: relative;
  z-index: 1000;
  max-width: 898px;
  margin: 0 auto;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h7-hero-content {
    margin: 0;
  }
}
.h7-hero-content .h7-hero-title {
  color: var(--tj-color-common-white);
  font-size: 140.59px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0;
}
.h7-hero-content .h7-hero-title span {
  width: 100%;
  display: block;
}
.h7-hero-content .h7-hero-title span:nth-child(2) {
  text-align: end;
}
.h7-hero-content .h7-hero-title span:nth-child(3) {
  text-align: center;
}
.h7-hero-content .h7-hero-title span:has(img) {
  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;
  gap: 10px;
}
.h7-hero-content .h7-hero-title span:has(img) img {
  width: 104px;
  height: 104px;
  -o-object-fit: cover;
     object-fit: cover;
  padding: 20px 19px 18px;
  background: linear-gradient(135deg, rgba(30, 138, 138, 0.3) 0%, rgba(30, 138, 138, 0) 50%, rgba(30, 138, 138, 0.3) 100%);
  border: 3px solid var(--tj-color-theme-primary);
  border: 2px solid var(--tj-color-border-5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 100%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-hero-content .h7-hero-title span:has(img) img {
    width: 70px;
    height: 70px;
    padding: 15px 14px 13px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h7-hero-content .h7-hero-title {
    font-size: 130px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h7-hero-content .h7-hero-title {
    font-size: 110px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h7-hero-content .h7-hero-title {
    font-size: 70px;
  }
}
@media (max-width: 575px) {
  .h7-hero-content .h7-hero-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h7-hero-content {
    max-width: 720px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h7-hero-content {
    max-width: 708px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h7-hero-content {
    max-width: 640px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h7-hero-content {
    max-width: 450px;
  }
}
.h7-hero-banner {
  position: absolute;
  inset-inline-end: -17%;
  bottom: 0;
  z-index: 9;
  pointer-events: none;
}
@media only screen and (min-width: 1765px) {
  .h7-hero-banner {
    z-index: 999;
  }
}
@media only screen and (min-width: 1601px) and (max-width: 1764px) {
  .h7-hero-banner {
    inset-inline-end: -10%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h7-hero-banner {
    inset-inline-end: -2%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h7-hero-banner {
    position: relative;
    inset-inline-end: -9%;
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-hero-banner {
    position: relative;
    inset-inline-end: -3%;
    margin-top: 40px;
  }
}
.h7-hero-shape {
  position: absolute;
  top: 10px;
  z-index: 1;
}
.h7-hero-shape-2 {
  inset-inline-end: 0;
}
.h7-hero .circle-text-wrap {
  z-index: 1000;
  background-color: transparent;
  backdrop-filter: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h7-hero .circle-text-wrap {
    bottom: 48px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-hero .circle-text-wrap {
    bottom: 164px;
  }
}
.h7-hero .circle-text-wrap .circle-icon {
  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
      -ms-transform: translate(-50%, -50%) rotate(-135deg);
          transform: translate(-50%, -50%) rotate(-135deg);
}
.h7-hero-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  inset-inline-start: 0;
  bottom: 60px;
  z-index: 1000;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h7-hero-box {
    inset-inline-start: 3%;
  }
}
@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) {
  .h7-hero-box {
    inset-inline-start: 10px;
  }
}
.h7-hero-box .star-ratings {
  font-size: 19px;
}
.h7-hero-box .customers-text {
  font-size: 20px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-common-white);
  margin-top: 8px;
  letter-spacing: -0.03em;
}
@media (max-width: 575px) {
  .h7-hero-box .customers-text {
    font-size: 18px;
  }
}

/* !END: Hero CSS */
/**----------------------------------------
START: Choose CSS
----------------------------------------*/
.h7-choose-item-wrapper {
  --bs-gutter-x: 0;
  border-radius: 12px;
  background-color: var(--tj-color-common-white);
}
.h7-choose-item:not(:last-child) {
  -webkit-border-end: 2px solid var(--tj-color-grey-1);
          border-inline-end: 2px solid var(--tj-color-grey-1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-choose-item:not(:last-child) {
    -webkit-border-end: 0;
            border-inline-end: 0;
    border-bottom: 2px solid var(--tj-color-grey-1);
  }
}
.h7-choose-box {
  text-align: center;
  border-radius: 0;
  background-color: transparent;
}
.h7-choose-box .choose-content {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.h7-choose-box .choose-icon {
  background-color: var(--tj-color-grey-1);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  width: 100%;
  margin-bottom: 30px;
}
.h7-choose-box .choose-icon i {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  color: var(--tj-color-theme-primary);
}
.h7-choose-box .text-btn:hover .btn-icon {
  background-color: var(--tj-color-theme-primary);
}
.h7-choose-box:hover .choose-icon {
  background-color: var(--tj-color-theme-primary);
}
.h7-choose-box:hover .choose-icon i {
  color: var(--tj-color-common-white);
}
.h7-choose-box:hover .btn-text {
  color: var(--tj-color-heading-primary);
}

/* !END: Choose CSS */
/**----------------------------------------
START: Home 7 About CSS
----------------------------------------*/
.h7-about {
  background-color: var(--tj-color-theme-bg);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  padding-bottom: 15px;
  z-index: 1;
}
.h7-about .sec-heading.style-7 {
  margin-bottom: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h7-about .sec-heading.style-7 {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-about .sec-heading.style-7 {
    margin-bottom: 60px;
  }
}
.h7-about .sec-heading.style-7 .sec-title {
  margin-bottom: 35px;
}
.h7-about .sec-heading.style-7 .sub-title {
  margin-top: 12px;
}
.h7-about-content-inner {
  max-width: 755px;
}
.h7-about-card {
  margin-bottom: 30px;
}
.h7-about-card-icon {
  border-radius: 100%;
  background-color: var(--tj-color-common-white);
  color: var(--tj-color-theme-primary);
  font-size: 48px;
  max-width: 80px;
  width: 100%;
  height: 80px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  margin-bottom: 24px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-about-card-icon {
    max-width: 80px;
    height: 80px;
    font-size: 56px;
  }
}
.h7-about-card .desc {
  margin-bottom: 0;
}
.h7-about-banner {
  border-radius: 12px;
  overflow: hidden;
}
.h7-about-banner img {
  width: 100%;
}
.h7-about-counter-wrapper .style-2 {
  border-radius: 10px;
  overflow: hidden;
  min-height: 345px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.h7-about-counter-wrapper .style-2.countup-item .counter-title {
  font-weight: var(--tj-fw-medium);
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tj-color-border-1);
}
.h7-about-counter-wrapper .style-2.countup-item .steps {
  color: var(--tj-color-text-body-3);
}
.h7-about-counter-wrapper .style-2.countup-item .count-text {
  font-size: 18px;
  font-weight: var(--tj-fw-regular);
  letter-spacing: 0;
  line-height: 1.44;
}
.h7-about-counter-wrapper .style-2.img-box {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.h7-about-counter-wrapper .style-2.customers-box .customers-text {
  font-size: 32px;
  font-weight: var(--tj-fw-medium);
  line-height: 1.25;
  max-width: 343px;
  letter-spacing: -0.03em;
}
.h7-about-counter-wrapper .style-2.customers-box .customers-bg {
  opacity: 0.5;
}
.h7-about-counter-wrapper .style-2.customers-box .text-btn {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.h7-about-counter-wrapper .style-2.customers-box .text-btn .btn-text {
  color: var(--tj-color-common-white);
}
.h7-about-counter-wrapper .style-2.customers-box .text-btn .btn-icon {
  background-color: var(--tj-color-heading-primary);
}

/* !END: Home 7 About CSS  */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-service .sec-heading.style-7 {
    margin-bottom: 18px;
  }
}
.h7-service .sec-heading.style-7 .sub-title {
  margin-top: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-service .sec-heading.style-7 .sub-title {
    margin-top: 0;
  }
}
.h7-service .sec-heading.style-7 .sec-title {
  max-width: 550px;
}
.h7-service .sec-heading.style-7 .sec-title-wrapper {
  max-width: 870px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-service .sec-heading.style-7 .sec-title-wrapper {
    max-width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-service .sec-heading.style-7 .sec-title {
    max-width: 100%;
  }
}
.h7-service-wrapper {
  max-width: 870px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-service-wrapper {
    max-width: 100%;
  }
}
.h7-service .section-desc-wrapper .desc {
  margin-bottom: 24px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-service .section-desc-wrapper {
    margin-bottom: 42px;
  }
  .h7-service .section-desc-wrapper .desc {
    margin-bottom: 22px;
  }
}
.h7-service-item {
  padding: 35px 30px;
  border-radius: 8px;
}
.h7-service-item:not(:last-child) {
  margin-bottom: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-service-item {
    padding: 30px 20px;
  }
}
.h7-service-item .service-content-wrap .service-title .title a:hover {
  color: var(--tj-color-theme-primary);
}
@media (max-width: 575px) {
  .h7-service-item .h7-service-action .text-btn {
    margin-top: 12px;
    -webkit-margin-start: 85px;
            margin-inline-start: 85px;
  }
}
.h7-service-item .h7-service-action .text-btn .btn-icon {
  width: 40px;
  height: 40px;
  font-size: 24px;
  background-color: transparent;
  border: 1px solid var(--tj-color-border-1);
}
.h7-service-item .h7-service-action .text-btn .btn-icon i {
  color: var(--tj-color-theme-dark);
}
.h7-service-item:hover .service-icon {
  -webkit-animation: gelatine 0.6s;
          animation: gelatine 0.6s;
}
.h7-service-item:hover .h7-service-action .text-btn .btn-icon {
  background-color: var(--tj-color-theme-dark);
  border: 1px solid var(--tj-color-theme-dark);
}
.h7-service-item:hover .h7-service-action .text-btn .btn-icon i {
  color: var(--tj-color-common-white);
}

/* !END: Service CSS */
/**----------------------------------------
START: Testimonial CSS
----------------------------------------*/
.h7-testimonial {
  background-color: var(--tj-color-theme-dark);
  position: relative;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
}
.h7-testimonial .sec-heading.style-2 .sub-title {
  background-color: var(--tj-color-grey-3);
  color: var(--tj-color-grey-1);
}
.h7-testimonial .sec-heading.style-2 .sec-title {
  color: var(--tj-color-common-white);
}
.h7-testimonial-wrapper {
  position: relative;
  z-index: 0;
}
.h7-testimonial-wrapper .slider-next,
.h7-testimonial-wrapper .slider-prev {
  border-color: var(--tj-color-border-2);
  background-color: var(--tj-color-theme-dark);
  position: absolute;
  top: calc(50% - 31.5px);
  inset-inline-start: 0;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  z-index: 1;
  opacity: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-testimonial-wrapper .slider-next,
  .h7-testimonial-wrapper .slider-prev {
    top: calc(50% - 15px);
    display: none;
  }
}
.h7-testimonial-wrapper .slider-next i,
.h7-testimonial-wrapper .slider-prev i {
  color: var(--tj-color-common-white);
}
.h7-testimonial-wrapper .slider-next:hover,
.h7-testimonial-wrapper .slider-prev:hover {
  background-color: var(--tj-color-theme-primary);
}
.h7-testimonial-wrapper .slider-next {
  inset-inline-start: 100%;
  -webkit-transform: translate(-100%, -50%);
      -ms-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}
.h7-testimonial-wrapper:hover .slider-next,
.h7-testimonial-wrapper:hover .slider-prev {
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h7-testimonial-wrapper:hover .slider-next,
  .h7-testimonial-wrapper:hover .slider-prev {
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h7-testimonial-wrapper:hover .slider-next {
    -webkit-transform: translate(-100%, -50%);
        -ms-transform: translate(-100%, -50%);
            transform: translate(-100%, -50%);
  }
}
.h7-testimonial-wrapper .bg-shape-3 {
  bottom: 50%;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.h7-testimonial-wrapper .testimonial-item {
  border-color: transparent;
  background-color: var(--tj-color-grey-3);
  padding: 30px 30px 35px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .h7-testimonial-wrapper .testimonial-item {
    padding: 30px 20px;
  }
}
.h7-testimonial-wrapper .testimonial-item .testimonial-author {
  padding-top: 0;
  border-top: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.h7-testimonial-wrapper .testimonial-item .testimonial-author .author-inner {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
}
.h7-testimonial-wrapper .testimonial-item .testimonial-author .author-img {
  width: 100px;
  height: 100px;
}
.h7-testimonial-wrapper .testimonial-item .testimonial-author .title {
  color: var(--tj-color-common-white);
}
.h7-testimonial-wrapper .testimonial-item .testimonial-author .designation {
  color: var(--tj-color-text-body-2);
}
.h7-testimonial-wrapper .testimonial-item .desc {
  color: var(--tj-color-grey-1);
  text-align: center;
}
.h7-testimonial-wrapper .testimonial-item .star-ratings {
  margin: 0 auto;
}
.h7-testimonial-wrapper .swiper-slide-active .testimonial-item {
  background-color: var(--tj-color-grey-3);
}

/* !END: Testimonial CSS */
/* START: Case Study CSS */
.h7-project .sec-heading.style-2 .tj-primary-btn {
  margin-top: 30px;
}
.h7-project-wrapper {
  padding: 0;
  max-width: 870px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-project-wrapper {
    max-width: 100%;
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }
}
.h7-project-wrapper .h4-project-item {
  margin-bottom: 30px;
}
@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) {
  .h7-project-wrapper .h4-project-item {
    padding: 20px 20px 30px;
  }
}
.h7-project-wrapper .h4-project-item .project-content {
  padding-bottom: 0;
  padding-top: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-project-wrapper .h4-project-item .project-content {
    padding-top: 15px;
  }
}
.h7-project-wrapper .h4-project-item .project-content .project-text {
  margin-top: 0;
  gap: 20px 10px;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.h7-project-wrapper .h4-project-item .project-content .title {
  max-width: 504px;
  margin-bottom: 20px;
  font-weight: var(--tj-fw-medium);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .h7-project-wrapper .h4-project-item .project-content .title {
    max-width: 100%;
    width: 100%;
  }
}
.h7-project-wrapper .h4-project-item .project-content .tji-icon-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.h7-project-wrapper .h4-project-item:hover .project-content .tji-icon-btn {
  border-color: var(--tj-color-theme-primary);
  background-color: var(--tj-color-theme-primary);
}
.h7-project-wrapper .h4-project-item:hover .project-content .tji-icon-btn i {
  color: var(--tj-color-common-white);
}

/* !END: Case Study CSS */
/**----------------------------------------
START: Team CSS
----------------------------------------*/
.h7-team {
  background-color: var(--tj-color-theme-dark);
  position: relative;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
}
.h7-team .sec-heading.style-2 .sub-title {
  background-color: var(--tj-color-grey-3);
  color: var(--tj-color-grey-1);
}
.h7-team .sec-heading.style-2 .sec-title {
  color: var(--tj-color-common-white);
}
.h7-team-wrapper {
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(2.91%, rgba(255, 255, 255, 0)), color-stop(30.6%, var(--tj-color-theme-dark)), color-stop(69.51%, var(--tj-color-theme-dark)), color-stop(97.03%, rgba(255, 255, 255, 0)));
  -webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 2.91%, var(--tj-color-theme-dark) 30.6%, var(--tj-color-theme-dark) 69.51%, rgba(255, 255, 255, 0) 97.03%);
          mask-image: -webkit-gradient(linear, left top, right top, color-stop(2.91%, rgba(255, 255, 255, 0)), color-stop(30.6%, var(--tj-color-theme-dark)), color-stop(69.51%, var(--tj-color-theme-dark)), color-stop(97.03%, rgba(255, 255, 255, 0)));
          mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 2.91%, var(--tj-color-theme-dark) 30.6%, var(--tj-color-theme-dark) 69.51%, rgba(255, 255, 255, 0) 97.03%);
}
.h7-team-wrapper .swiper-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}
.h7-team-wrapper .swiper-slide {
  width: auto;
}
.h7-team-wrapper .h7-team-marquee:not(:first-child) {
  margin-top: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-team-wrapper .h7-team-marquee:not(:first-child) {
    margin-top: 20px;
  }
}
.h7-team-wrapper .team-item {
  width: 407px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 14px 14px 14px 34px;
  border-radius: 200px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-team-wrapper .team-item {
    width: 300px;
    padding: 10px 10px 10px 24px;
  }
}
.h7-team-wrapper .team-item .team-content {
  margin-top: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.h7-team-wrapper .team-item .team-content .title {
  color: var(--tj-color-common-white);
  width: 100%;
}
.h7-team-wrapper .team-item .team-content .designation {
  color: var(--tj-color-text-body-2);
}
.h7-team-wrapper .team-item .team-img {
  width: 96.77px;
  height: 96.77px;
  border-radius: 100%;
  background-color: var(--tj-color-theme-dark-5);
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-team-wrapper .team-item .team-img {
    width: 80px;
    height: 80px;
  }
}
.h7-team-wrapper .team-item .team-img::before, .h7-team-wrapper .team-item .team-img::after {
  display: none;
}
.h7-team-wrapper .team-item:hover .team-img img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}
.h7-team-wrapper .h7-team-marquee:nth-child(2) .team-item {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  text-align: end;
}
.h7-team-wrapper .h7-team-marquee:nth-child(2) .team-content .title {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.h7-team .bg-shape-3 {
  bottom: 50%;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}

/* !END: Team CSS */
/**----------------------------------------
START: FAQ CSS
----------------------------------------*/
.h7-faq {
  border-bottom: 1px dashed var(--tj-color-border-1);
}
.h7-faq .sec-heading.style-7 {
  max-width: 340px;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-faq .sec-heading.style-7 {
    margin-bottom: 40px;
  }
}
.h7-faq .sec-heading.style-7 .number {
  color: var(--tj-color-heading-primary);
  font-size: 20px;
  font-weight: var(--tj-fw-sbold);
  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: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-top: 40px;
  line-height: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-faq .sec-heading.style-7 .number {
    margin-top: 30px;
  }
}
.h7-faq .sec-heading.style-7 .number .call-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  font-size: 20px;
  height: 52px;
  width: 52px;
  border-radius: 50%;
  margin-bottom: 9px;
}
@media (max-width: 575px) {
  .h7-faq .sec-heading.style-7 .number .call-icon {
    font-size: 18px;
    height: 45px;
    width: 45px;
  }
}
.h7-faq .sec-heading.style-7 .number span:not(.call-icon) {
  position: relative;
}
.h7-faq .sec-heading.style-7 .number span:not(.call-icon)::after {
  content: "";
  position: absolute;
  bottom: -2px;
  inset-inline-end: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}
.h7-faq .sec-heading.style-7 .number:hover .call-icon {
  -webkit-animation: bellshake 0.5s linear;
          animation: bellshake 0.5s linear;
}
.h7-faq .sec-heading.style-7 .number:hover span::after {
  -webkit-animation: linehover 0.8s linear;
          animation: linehover 0.8s linear;
}
@media (max-width: 575px) {
  .h7-faq .sec-heading.style-7 .number {
    font-size: 18px;
  }
}
.h7-faq-wrapper {
  background-color: var(--tj-color-common-white);
  border-radius: 8px;
  overflow: hidden;
}
.h7-faq-wrapper.style-2 {
  padding-top: 0;
}
.h7-faq-wrapper.style-2 .accordion-item {
  margin-bottom: 0;
  border-top: 1px dashed var(--tj-color-border-1);
  border-radius: 0;
}
.h7-faq-wrapper.style-2 .accordion-item .accordion-body {
  margin-top: 0;
  padding-top: 15px;
  border-top: 1px dashed var(--tj-color-border-3);
  max-width: 585px;
}
.h7-faq-wrapper.style-2 .accordion-item.active {
  border-radius: 12px;
}
.h7-faq-wrapper.style-2 .accordion-item.active .faq-title {
  border: none;
}
.h7-faq-wrapper.style-2 .accordion-item.active .faq-title::after {
  border-color: var(--tj-color-common-white);
  background-color: var(--tj-color-common-white);
  color: var(--tj-color-heading-primary);
}
.h7-faq-wrapper.style-2 .accordion-item:not(.active) .faq-title {
  padding-top: 32px;
  padding-bottom: 32px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-faq-wrapper.style-2 .accordion-item:not(.active) .faq-title {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.h7-faq-wrapper.style-2 .accordion-item:first-child, .h7-faq-wrapper.style-2 .accordion-item.active, .h7-faq-wrapper.style-2 .accordion-item.active + .accordion-item {
  border-top: 0;
}

/* !END: FAQ CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.h7-blog-wrapper .blog-meta {
  position: absolute;
  inset-inline-start: 15px;
  top: 15px;
  z-index: 1;
}
.h7-blog-wrapper .blog-meta .categories a {
  border-radius: 34px;
  background-color: var(--tj-color-common-white);
  color: var(--tj-color-heading-primary);
  border-color: var(--tj-color-common-white);
}
.h7-blog-wrapper .blog-meta .categories a:hover {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}
.h7-blog-wrapper .blog-content {
  background-color: var(--tj-color-common-white);
  padding: 20px 25px 30px;
}
.h7-blog-wrapper .blog-content .title {
  max-width: 250px;
}
.h7-blog-wrapper .blog-content .title-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.h7-blog-wrapper .blog-content .text-btn .btn-icon {
  width: 48px;
  height: 48px;
  font-size: 24px;
}
.h7-blog-wrapper .blog-date {
  position: static;
  padding: 0;
  text-align: start;
}
.h7-blog-wrapper .blog-item:hover .blog-content .text-btn .btn-icon {
  background-color: var(--tj-color-theme-primary);
}

/* !END: Blog CSS */
/**----------------------------------------
START: CTA CSS
----------------------------------------*/
.h7-cta {
  background: url("../images/cta/h7-cta-bg.webp") no-repeat center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  z-index: 0;
  border-radius: 12px;
  margin-bottom: 15px;
}
.h7-cta-inner {
  background-color: transparent;
}
.h7-cta-inner .cta-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  -webkit-padding-end: 0;
          padding-inline-end: 0;
  padding: 50px 0 65px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h7-cta-inner .cta-content {
    padding: 34px 0 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h7-cta-inner .cta-content {
    padding: 34px 0 45px;
  }
}
.h7-cta-inner .cta-content .title {
  max-width: 624px;
  margin-bottom: 0;
}
.h7-cta-inner .cta-content .cta-btn {
  margin-top: 15px;
}
@media (max-width: 575px) {
  .h7-cta-inner .cta-content .cta-btn {
    margin-top: 5px;
  }
}
.h7-cta .bg-shape-3 {
  inset-inline-start: 32%;
}

/* !END: CTA CSS */
/**----------------------------------------
START: Theme Header CSS
----------------------------------------*/
.header-area.h8-header.header-absolute {
  position: absolute;
  top: 15px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: calc(100% - 30px);
  margin: 0 auto;
  z-index: 999;
  padding-bottom: 15px;
  background-color: transparent;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.h8-header.header-absolute {
    inset-inline-start: 50%;
    inset-inline-end: auto;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    max-width: 1382px;
    margin: 0 auto;
    border-radius: 12px;
    z-index: 999;
    border-start-end-radius: 0;
    border-start-start-radius: 0;
    background-color: var(--tj-color-grey-1);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-area.h8-header.header-absolute {
    width: 86%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-area.h8-header.header-absolute {
    top: 12px;
    width: 86%;
    padding-bottom: 12px;
  }
}
@media (max-width: 575px) {
  .header-area.h8-header.header-absolute {
    top: 12px;
    width: 78%;
    padding-bottom: 12px;
  }
}
.header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 92%;
  max-width: 1382px;
  height: 100%;
  background-color: var(--tj-color-grey-1);
  margin: 0 auto;
  border-radius: 12px;
  border-start-end-radius: 0;
  border-start-start-radius: 0;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape {
    display: none;
  }
}
.header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::after, .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::before {
  content: "";
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  background: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-11 h-11"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23ecf0f0"></path></svg>');
}
.header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::before {
  inset-inline-start: -13px;
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::after {
  inset-inline-end: -13px;
}
.header-area.h8-header.header-absolute .header-wrapper {
  border-radius: 7px;
  width: calc(92% - 6px);
  max-width: 1352px;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-area.h8-header.header-absolute .header-wrapper {
    padding: 0 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-area.h8-header.header-absolute .header-wrapper {
    width: calc(100% - 6px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.h8-header.header-absolute .header-wrapper {
    width: auto;
    max-width: inherit;
    margin: 0 3px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-area.h8-header.header-absolute .header-wrapper {
    padding: 15px 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.h8-header.header-absolute .header-wrapper {
    padding: 15px 12px;
    margin: 0;
  }
}
.header-area.h8-header.header-absolute::after, .header-area.h8-header.header-absolute::before {
  content: "";
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  background: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-11 h-11"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23ecf0f0"></path></svg>');
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.h8-header.header-absolute::after, .header-area.h8-header.header-absolute::before {
    display: block;
  }
}
.header-area.h8-header.header-absolute::before {
  inset-inline-start: -13px;
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.header-area.h8-header.header-absolute::after {
  inset-inline-end: -13px;
}
.header-area.h8-header.header-absolute .mainmenu ul > li > .mega-menu {
  top: calc(100% - 15px);
}
.header-area.h8-header.sticky {
  width: calc(100% - 30px);
  max-width: inherit;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .header-area.h8-header.sticky {
    width: 100%;
  }
}

/* !END: Theme Header CSS */
/**----------------------------------------
START: Theme Footer CSS
----------------------------------------*/
.tj-footer-section.h8-footer .bg-shape-3 {
  inset-inline-end: 0;
  inset-inline-start: auto;
  width: auto;
}
.tj-footer-section.h8-footer .bg-shape-4 {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  inset-inline-end: auto;
  inset-inline-start: 0;
}
.tj-footer-section.h8-footer .h6-footer-logo-area {
  padding: 120px 0 80px;
  border-bottom: 1px dashed var(--tj-color-border-4);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.h8-footer .h6-footer-logo-area {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h8-footer .h6-footer-logo-area {
    padding-top: 70px;
  }
}
.tj-footer-section.h8-footer .h8-footer-logo {
  max-width: 562px;
  width: 100%;
}
.tj-footer-section.h8-footer .h8-footer-logo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tj-footer-section.h8-footer .h8-footer-logo-wrapper {
    gap: 30px;
  }
}
@media (max-width: 575px) {
  .tj-footer-section.h8-footer .h8-footer-logo-wrapper {
    gap: 30px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.tj-footer-section.h8-footer .h8-footer-logo-content {
  max-width: 443px;
  width: 100%;
}
.tj-footer-section.h8-footer .h8-footer-logo-content .footer-text {
  margin-bottom: 24px;
  color: var(--tj-color-text-body-2);
  font-size: 18px;
  font-weight: var(--tj-fw-sbold);
  letter-spacing: -0.03em;
  line-height: 1.444;
}
.tj-footer-section.h8-footer .h8-footer-main {
  padding-top: 80px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h8-footer .h8-footer-main {
    padding-top: 70px;
  }
}
.tj-footer-section.h8-footer .h8-footer-contact {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  -webkit-padding-end: 76px;
          padding-inline-end: 76px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-footer-section.h8-footer .h8-footer-contact {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
    -webkit-padding-end: 30px;
            padding-inline-end: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-footer-section.h8-footer .h8-footer-contact {
    margin-top: 0;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
    -webkit-padding-end: 0px;
            padding-inline-end: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h8-footer .h8-footer-contact {
    margin-top: 0;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
.tj-footer-section.h8-footer .h8-footer-col-2 {
  -webkit-padding-start: 35px;
          padding-inline-start: 35px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h8-footer .h8-footer-col-2 {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
.tj-footer-section.h8-footer .h8-footer-subscribe {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-footer-section.h8-footer .h8-footer-subscribe {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h8-footer .h8-footer-subscribe {
    margin-top: 30px;
  }
}
.tj-footer-section.h8-footer .h8-footer-copyright {
  border-color: var(--tj-color-border-4);
}
.tj-footer-section.h8-footer .h8-footer-copyright .copyright-content-area {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* !END: Theme Footer CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.h8-hero {
  position: relative;
  margin: 0 15px 0 15px;
  border-radius: 12px;
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-hero {
    margin: 0 12px 0;
  }
}
.h8-hero-inner {
  background: var(--tj-color-theme-bg-2);
}
.h8-hero-bg-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  mix-blend-mode: color-burn;
  width: 1890;
}
.h8-hero-item {
  min-height: 92.5vh;
  background-color: #0c1e21;
  position: relative;
}
.h8-hero-item::after {
  position: absolute;
  content: "";
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgb(12, 30, 33)), color-stop(60%, rgba(12, 30, 33, 0.4)), to(rgba(12, 30, 33, 0.1)));
  background: linear-gradient(90deg, rgb(12, 30, 33) 20%, rgba(12, 30, 33, 0.4) 60%, rgba(12, 30, 33, 0.1) 100%);
}
.h8-hero-item-wrapper {
  padding: 202px 0 30px;
  min-height: 849px;
  position: relative;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h8-hero-item-wrapper {
    padding-top: 170px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h8-hero-item-wrapper {
    padding: 170px 0 280px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h8-hero-item-wrapper {
    padding: 170px 0 280px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-hero-item-wrapper {
    padding: 170px 0 0 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-hero-item-wrapper {
    padding: 150px 0 0 0;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h8-hero-item {
    height: 95vh;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h8-hero-item {
    min-height: auto;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-hero-item {
    min-height: 840px;
  }
}
.h8-hero-content .h8-hero-title {
  font-size: 148px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 0;
  position: relative;
}
.h8-hero-content .h8-hero-title span {
  display: inline-block;
  white-space: nowrap;
}
.h8-hero-content .h8-hero-title span:first-child {
  width: 43%;
}
.h8-hero-content .h8-hero-title span:nth-child(2) {
  text-align: end;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  width: 54%;
}
.h8-hero-content .h8-hero-title span:nth-child(3) {
  text-align: end;
  display: block;
  width: 100%;
}
.h8-hero-content .h8-hero-title span:has(img) {
  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;
  gap: 10px;
}
.h8-hero-content .h8-hero-title span:has(img) img {
  width: 104px;
  height: 104px;
  -o-object-fit: cover;
     object-fit: cover;
  padding: 20px 19px 18px;
  background: linear-gradient(135deg, rgba(30, 138, 138, 0.3) 0%, rgba(30, 138, 138, 0) 50%, rgba(30, 138, 138, 0.3) 100%);
  border: 3px solid var(--tj-color-theme-primary);
  border: 2px solid var(--tj-color-border-5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 100%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-hero-content .h8-hero-title span:has(img) img {
    width: 70px;
    height: 70px;
    padding: 15px 14px 13px;
  }
}
.h8-hero-content .h8-hero-title .title-year {
  font-size: 18px;
  position: absolute;
  inset-inline-end: 0;
  top: 100%;
  display: block;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  letter-spacing: 0;
  line-height: 1.44;
  margin-top: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h8-hero-content .h8-hero-title {
    font-size: 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h8-hero-content .h8-hero-title {
    font-size: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-hero-content .h8-hero-title {
    font-size: 92px;
    line-height: 1.1;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h8-hero-content .h8-hero-title {
    font-size: 70px;
    line-height: 1.3;
  }
}
@media (max-width: 575px) {
  .h8-hero-content .h8-hero-title {
    font-size: 44px;
    line-height: 1.3;
  }
  .h8-hero-content .h8-hero-title .title-year {
    margin-top: 10px;
  }
}
.h8-hero-banner {
  position: absolute;
  inset-inline-start: 54%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0;
  z-index: 9;
  max-width: 669px;
  width: 100%;
  max-height: 745px;
  pointer-events: none;
}
@media only screen and (min-width: 1601px) and (max-width: 1764px) {
  .h8-hero-banner {
    inset-inline-end: -10%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h8-hero-banner {
    inset-inline-end: -2%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h8-hero-banner {
    inset-inline-start: 58%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h8-hero-banner {
    max-width: 602px;
    inset-inline-start: 65%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-hero-banner {
    position: static;
    max-width: 602px;
    inset-inline-start: 0;
    margin-top: 50px;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-hero-banner {
    position: relative;
    max-width: 602px;
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-hero-banner {
    margin-top: 40px;
  }
}
.h8-hero-shape {
  position: absolute;
  top: 10px;
  z-index: 1;
}
.h8-hero-shape-2 {
  inset-inline-end: 0;
}
.h8-hero .circle-text-wrap {
  z-index: 1000;
  height: 160px;
  width: 160px;
  inset-inline-end: 0;
  bottom: 60px;
  background-color: var(--tj-color-theme-dark);
  border-radius: 100%;
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-sbold);
  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-animation: tj-bounce-ball 2s infinite;
          animation: tj-bounce-ball 2s infinite;
  -webkit-transform: all 0.4s;
      -ms-transform: all 0.4s;
          transform: all 0.4s;
}
.h8-hero .circle-text-wrap .desc {
  max-width: 83px;
}
.h8-hero .circle-text-wrap .desc i {
  -webkit-transform: rotate(-45deg) translateY(3px);
      -ms-transform: rotate(-45deg) translateY(3px);
          transform: rotate(-45deg) translateY(3px);
  display: inline-block;
  font-size: 22px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.h8-hero .circle-text-wrap:hover {
  background-color: var(--tj-color-theme-primary);
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.h8-hero .circle-text-wrap:hover .desc i {
  -webkit-transform: rotate(0deg) translateY(5px);
      -ms-transform: rotate(0deg) translateY(5px);
          transform: rotate(0deg) translateY(5px);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-hero .circle-text-wrap {
    bottom: 2%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h8-hero .circle-text-wrap {
    bottom: 30%;
  }
}
@media (max-width: 575px) {
  .h8-hero .circle-text-wrap {
    height: 120px;
    width: 120px;
    bottom: 25%;
  }
}
.h8-hero-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 148px;
  position: absolute;
  inset-inline-start: 0;
  bottom: 88px;
  z-index: 1000;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h8-hero-box {
    inset-inline-start: 8px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h8-hero-box {
    inset-inline-start: 8px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-hero-box {
    inset-inline-start: 52%;
    bottom: 37%;
    gap: 66px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-hero-box {
    position: static;
    gap: 40px;
    margin-top: -46px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-margin-start: 3px;
            margin-inline-start: 3px;
    -webkit-margin-end: 3px;
            margin-inline-end: 3px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h8-hero-box {
    gap: 50px;
    margin-top: -66px;
  }
}
.h8-hero-box .customers ul li {
  -webkit-margin-start: -22px;
          margin-inline-start: -22px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-hero-box .customers ul li {
    -webkit-margin-start: -16px;
            margin-inline-start: -16px;
  }
}
.h8-hero-box .customers ul li:first-child {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
}
.h8-hero-box-content {
  max-width: 330px;
  font-size: 18px;
  color: var(--tj-color-theme-dark-2);
  letter-spacing: 0;
  line-height: 1.44;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-hero-box-content {
    max-width: 100%;
    -webkit-margin-start: 10px;
            margin-inline-start: 10px;
    -webkit-margin-end: 10px;
            margin-inline-end: 10px;
  }
}
@media (max-width: 575px) {
  .h8-hero-box-content {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
.h8-hero-box-icon {
  margin-bottom: 20px;
}

/* !END: Hero CSS */
/**----------------------------------------
START: Theme Marquee CSS
----------------------------------------*/
.h8-maquee {
  position: relative;
  overflow: hidden;
}
.h8-maquee-inner {
  padding: 26px 0;
  rotate: 0deg;
  width: 100%;
  border-radius: 12px;
  border-start-end-radius: 0;
  border-start-start-radius: 0;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h8-maquee-inner {
    padding: 20px 0;
  }
}
@media (max-width: 575px) {
  .h8-maquee-inner {
    padding: 15px 0;
  }
}
.h8-maquee-inner .h5-maquee-slider-item .marquee-box .marquee-icon {
  font-size: 24px;
  font-weight: var(--tj-fw-sbold);
  text-transform: capitalize;
  line-height: 1;
  margin-bottom: 0;
  white-space: nowrap;
  color: var(--tj-color-common-white);
  -webkit-animation: none;
          animation: none;
}

/* !END: Theme Marquee CSS */
/**----------------------------------------
START: Home 7 About CSS
----------------------------------------*/
.h8-about {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.h8-about.section-gap {
  padding-bottom: 30px;
}
.h8-about .sec-heading.style-3 {
  margin-bottom: 0;
}
.h8-about .sec-heading.style-3 .sec-title {
  margin-bottom: 35px;
}
.h8-about .sec-heading.style-3 .sub-title {
  margin-top: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-about .sec-heading.style-3 .sub-title {
    margin-top: 0;
    margin-bottom: 15px;
  }
}
.h8-about-left {
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.h8-about-video {
  border-radius: 100%;
  width: 248px;
  height: 248px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-about-video {
    margin-bottom: 30px;
  }
}
.h8-about-video::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  opacity: 0.15;
  mix-blend-mode: Color;
  z-index: 1;
}
.h8-about-video-btn {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid var(--tj-color-grey-3);
  position: absolute;
  z-index: 2;
  inset-inline-start: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  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;
  line-height: 1;
  -webkit-animation: pulse4 1.3s ease-out infinite;
          animation: pulse4 1.3s ease-out infinite;
}
.h8-about-video-btn i {
  color: var(--tj-color-common-white);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-padding-start: 4px;
          padding-inline-start: 4px;
}
.h8-about-video-btn:hover i {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}
.h8-about-item-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px dashed var(--tj-color-border-1);
  -webkit-border-start: 0;
          border-inline-start: 0;
  -webkit-border-end: 0;
          border-inline-end: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-about-item-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.h8-about-item-counter {
  width: 310px;
  padding-top: 50px;
  padding-bottom: 50px;
  -webkit-padding-end: 40px;
          padding-inline-end: 40px;
  -webkit-border-end: 1px dashed var(--tj-color-border-1);
          border-inline-end: 1px dashed var(--tj-color-border-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-about-item-counter {
    padding-top: 35px;
    padding-bottom: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-about-item-counter {
    -webkit-padding-end: 0px;
            padding-inline-end: 0px;
    -webkit-border-end: 0;
            border-inline-end: 0;
    border-bottom: 1px dashed var(--tj-color-border-1);
    width: 100%;
    padding-top: 15px;
    padding-bottom: 20px;
  }
}
.h8-about-item-counter .countup-item.style-2 {
  padding: 0;
  background-color: transparent;
}
.h8-about-item-counter .countup-item.style-2 .count-inner {
  padding: 0;
}
.h8-about-item-counter .countup-item.style-2 .inline-content {
  font-size: 130px;
  font-weight: var(--tj-fw-sbold);
  margin-top: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-about-item-counter .countup-item.style-2 .inline-content {
    font-size: 110px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-about-item-counter .countup-item.style-2 .inline-content {
    font-size: 100px;
  }
}
.h8-about-item-counter .countup-item.style-2 .inline-content .odometer {
  -webkit-margin-start: -6px;
          margin-inline-start: -6px;
}
.h8-about-item-counter .countup-item.style-2 .inline-content .odometer span {
  font-weight: var(--tj-fw-sbold);
}
.h8-about-item-counter .countup-item.style-2 .inline-content sup {
  font-weight: var(--tj-fw-medium);
  font-size: 0.57em;
}
.h8-about-item-counter .countup-item.style-2 .count-text {
  font-weight: var(--tj-fw-sbold);
  font-size: 18px;
  max-width: 195px;
  line-height: 1.44;
  color: var(--tj-color-theme-dark-3);
}
.h8-about-item-desc {
  width: 530px;
  padding-top: 50px;
  padding-bottom: 55px;
  -webkit-padding-start: 60px;
          padding-inline-start: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-about-item-desc {
    padding-top: 35px;
    padding-bottom: 40px;
    -webkit-padding-start: 35px;
            padding-inline-start: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-about-item-desc {
    padding-top: 20px;
    padding-bottom: 25px;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
.h8-about-item-desc .desc {
  margin-bottom: 24px;
  color: var(--tj-color-theme-dark-3);
}

/* !END: Home 7 About CSS  */
/**----------------------------------------
START: Choose CSS
----------------------------------------*/
.h8-choose {
  background-color: var(--tj-color-theme-bg);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.h8-choose-content-wrapper {
  max-width: 550px;
  -webkit-margin-start: 125px;
          margin-inline-start: 125px;
  padding: 50px 0;
  -webkit-margin-end: 12px;
          margin-inline-end: 12px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h8-choose-content-wrapper {
    -webkit-margin-start: 80px;
            margin-inline-start: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h8-choose-content-wrapper {
    -webkit-margin-start: 40px;
            margin-inline-start: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-choose-content-wrapper {
    -webkit-margin-start: 30px;
            margin-inline-start: 30px;
    -webkit-margin-end: 30px;
            margin-inline-end: 30px;
    max-width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-choose-content-wrapper {
    -webkit-margin-start: 12px;
            margin-inline-start: 12px;
    max-width: 100%;
  }
}
.h8-choose .sec-heading.style-3 {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-choose .sec-heading.style-3 {
    max-width: 100%;
  }
}
.h8-choose-banner {
  height: 100%;
}
.h8-choose-banner img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.h8-choose-box {
  background-color: transparent;
  border-radius: 0;
  padding: 24px 0 22px;
  border-bottom: 1px dashed var(--tj-color-border-1);
}
.h8-choose-box-wrapper {
  border: 1px dashed var(--tj-color-border-1);
  -webkit-border-start: 0;
          border-inline-start: 0;
  -webkit-border-end: 0;
          border-inline-end: 0;
}
.h8-choose-box:last-child {
  border-bottom: 0;
}
.h8-choose-box .choose-content {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 15px;
}
.h8-choose-box .choose-content .title {
  margin-bottom: 18px;
}
.h8-choose-box .choose-content .choose-icon {
  margin-bottom: 0;
  margin-top: 6px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  background-color: var(--tj-color-theme-dark);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.h8-choose-box:hover {
  background-color: transparent;
}
.h8-choose-box:hover .choose-content .choose-icon {
  background-color: var(--tj-color-theme-primary);
  -webkit-animation: none;
          animation: none;
}

/* !END: Choose CSS */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
.h8-service-item {
  padding: 35px 30px 34px;
  border-radius: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-service-item {
    padding: 30px 20px;
  }
}
.h8-service-item .service-icon {
  font-size: 59px;
  width: 84px;
  height: 84px;
  margin: 0 0 24px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-service-item .service-icon {
    font-size: 52px;
    width: 70px;
    height: 70px;
  }
}
.h8-service-item .service-content .desc {
  margin-bottom: 22px;
}
.h8-service-item:hover .service-icon {
  -webkit-animation: gelatine 0.6s;
          animation: gelatine 0.6s;
}
.h8-service-more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 60px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-service-more {
    margin-top: 35px;
  }
}

/* !END: Service CSS */
/* START: Case Study CSS */
.h8-project {
  background-color: var(--tj-color-theme-bg);
  position: relative;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
}
.h8-project .heading-wrap-content .sec-heading {
  max-width: 550px;
}
.h8-project .slider-next,
.h8-project .slider-prev {
  background-color: var(--tj-color-common-white);
  border-color: var(--tj-color-common-white);
}
.h8-project .slider-next:hover,
.h8-project .slider-prev:hover {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.h8-project-wrapper {
  padding: 0;
  max-width: 1591px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-project-wrapper {
    max-width: 100%;
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }
}
.h8-project-wrapper .h4-project-item {
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .h8-project-wrapper .h4-project-item {
    padding: 15px 15px 30px;
  }
}
.h8-project-wrapper .h4-project-item .project-img {
  height: 520px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-project-wrapper .h4-project-item .project-img {
    height: 345px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-project-wrapper .h4-project-item .project-img {
    height: 300px;
  }
}
.h8-project-wrapper .h4-project-item .project-content .tji-icon-btn {
  margin-top: 4px;
  border-color: var(--tj-color-border-1);
}
.h8-project-wrapper .h4-project-item .project-content .tji-icon-btn i {
  color: var(--tj-color-theme-dark);
}
.h8-project-wrapper .h4-project-item:hover .project-content .tji-icon-btn {
  border-color: var(--tj-color-theme-dark);
  background-color: var(--tj-color-theme-dark);
}
.h8-project-wrapper .h4-project-item:hover .project-content .tji-icon-btn i {
  color: var(--tj-color-common-white);
}

/* !END: Case Study CSS */
/**----------------------------------------
START: Countup CSS
----------------------------------------*/
.h8-funfact-banner {
  max-width: 585px;
  position: relative;
  margin-bottom: 40px;
}
.h8-funfact-banner-img {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 575px) {
  .h8-funfact-banner-img {
    height: 440px;
  }
}
.h8-funfact-banner-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.h8-funfact-banner-img::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  opacity: 0.25;
}
.h8-funfact-banner .box-area {
  max-width: 239px;
  bottom: 0;
  inset-inline-end: 0;
  inset-inline-start: inherit;
  padding: 15px 0 0 15px;
  border-start-start-radius: 12px;
  border-start-end-radius: 0;
}
.h8-funfact-banner .box-area::before {
  inset-inline-start: inherit;
  inset-inline-end: 0;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.h8-funfact-banner .box-area::after {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  inset-inline-start: -12px;
  inset-inline-end: inherit;
}
@media (max-width: 575px) {
  .h8-funfact-banner .box-area {
    max-width: 215px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-funfact-banner {
    max-width: 100%;
  }
}
.h8-funfact-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px;
}
.h8-funfact .pl-0 {
  -webkit-padding-start: 3px;
          padding-inline-start: 3px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .h8-funfact .pl-0 {
    -webkit-padding-start: 12px;
            padding-inline-start: 12px;
  }
}
.h8-funfact-item.countup-item {
  padding: 41px 35px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .h8-funfact-item.countup-item {
    padding: 30px 25px;
  }
}
@media (max-width: 575px) {
  .h8-funfact-item.countup-item {
    padding: 20px 20px 30px;
  }
}
.h8-funfact-item.countup-item .count-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 0;
}
@media (max-width: 575px) {
  .h8-funfact-item.countup-item .count-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 25px;
  }
}
.h8-funfact-item.countup-item .counter-desc {
  -webkit-padding-start: 30px;
          padding-inline-start: 30px;
  -webkit-border-start: 1px dashed var(--tj-color-border-1);
          border-inline-start: 1px dashed var(--tj-color-border-1);
}
@media (max-width: 575px) {
  .h8-funfact-item.countup-item .counter-desc {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
    padding-top: 20px;
    -webkit-border-start: 0;
            border-inline-start: 0;
    border-top: 1px dashed var(--tj-color-border-1);
  }
}
.h8-funfact-item.countup-item .counter-desc .counter-title {
  margin-bottom: 20px;
  line-height: 1;
}
.h8-funfact-item.countup-item .counter-desc .count-text {
  margin-bottom: 0;
  font-weight: var(--tj-fw-regular);
}
.h8-funfact-item.countup-item .inline-content {
  margin: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transform: translateY(-19px);
      -ms-transform: translateY(-19px);
          transform: translateY(-19px);
  font-size: 68px;
  width: 180px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h8-funfact-item.countup-item .inline-content {
    font-size: 65px;
    -webkit-transform: translateY(-32px);
        -ms-transform: translateY(-32px);
            transform: translateY(-32px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-funfact-item.countup-item .inline-content {
    font-size: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h8-funfact-item.countup-item .inline-content {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .h8-funfact-item.countup-item .inline-content {
    font-size: 55px;
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    width: 100%;
  }
}

/* !END: Countup CSS */
/**----------------------------------------
START: Team CSS
----------------------------------------*/
.h8-team {
  background-color: var(--tj-color-theme-bg);
  position: relative;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h8-team .sec-heading .sec-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h8-team .sec-heading .sec-title {
    font-size: 38px;
  }
}
.h8-team-item-wrapper .team-item {
  padding: 35px 15px 30px;
  margin-bottom: 0;
  border: 1px solid var(--tj-color-border-1);
  border-top: 0;
  -webkit-border-start: 0;
          border-inline-start: 0;
  text-align: center;
}
.h8-team-item-wrapper .team-item .team-img {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 100%;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .h8-team-item-wrapper .team-item .team-img {
    width: 200px;
    height: 200px;
  }
}
.h8-team-item-wrapper .team-item .team-img::after {
  display: none;
}
.h8-team-item-wrapper .team-item .title {
  width: 100%;
}
.h8-team-item-wrapper:nth-child(2) .team-item, .h8-team-item-wrapper:nth-child(3) .team-item, .h8-team-item-wrapper:nth-child(4) .team-item, .h8-team-item-wrapper:nth-child(5) .team-item {
  border-top: 1px solid var(--tj-color-border-1);
}
.h8-team-item-wrapper:nth-child(2) .team-item, .h8-team-item-wrapper:nth-child(5) .team-item, .h8-team-item-wrapper:nth-child(9) .team-item {
  -webkit-border-start: 1px solid var(--tj-color-border-1);
          border-inline-start: 1px solid var(--tj-color-border-1);
}
.h8-team-item-wrapper:nth-child(5) .team-item {
  margin-top: -1px;
  -webkit-margin-end: -1px;
          margin-inline-end: -1px;
}
.h8-team-item-wrapper:nth-child(9) .team-item {
  -webkit-margin-end: -1px;
          margin-inline-end: -1px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .h8-team-item-wrapper:nth-child(2) .team-item, .h8-team-item-wrapper:nth-child(3) .team-item, .h8-team-item-wrapper:nth-child(4) .team-item, .h8-team-item-wrapper:nth-child(5) .team-item {
    border-top: 0;
  }
  .h8-team-item-wrapper:nth-child(2) .team-item, .h8-team-item-wrapper:nth-child(3) .team-item {
    border-top: 1px solid var(--tj-color-border-1);
  }
  .h8-team-item-wrapper:nth-child(3) .team-item, .h8-team-item-wrapper:nth-child(5) .team-item, .h8-team-item-wrapper:nth-child(7) .team-item {
    -webkit-border-start: 1px solid var(--tj-color-border-1);
            border-inline-start: 1px solid var(--tj-color-border-1);
    margin-top: -1px;
    -webkit-margin-end: -1px;
            margin-inline-end: -1px;
  }
  .h8-team-item-wrapper:nth-child(5) .team-item, .h8-team-item-wrapper:nth-child(7) .team-item {
    border-top: 0;
    margin-top: 0px;
  }
  .h8-team-item-wrapper:nth-child(7) .team-item {
    margin-top: 0;
    -webkit-margin-end: -1px;
            margin-inline-end: -1px;
  }
  .h8-team-item-wrapper:nth-child(9) .team-item {
    margin-top: 0px;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
@media (max-width: 575px) {
  .h8-team-item-wrapper .team-item {
    -webkit-border-start: 1px solid var(--tj-color-border-1);
            border-inline-start: 1px solid var(--tj-color-border-1);
    margin-top: 0;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
  .h8-team-item-wrapper:nth-child(3) .team-item, .h8-team-item-wrapper:nth-child(4) .team-item, .h8-team-item-wrapper:nth-child(5) .team-item {
    border-top: 0;
  }
}
.h8-team-action {
  height: 100%;
  position: relative;
  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;
}
@media (max-width: 575px) {
  .h8-team-action {
    margin-top: 10px;
  }
}
.h8-team-action .circle-text-wrap {
  position: static;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: transparent;
  backdrop-filter: blur(0);
}
.h8-team-action .circle-text-wrap .circle-icon {
  font-size: 85px;
}
.h8-team-action .circle-text-wrap i {
  color: var(--tj-color-theme-primary);
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/* !END: Team CSS */
/**----------------------------------------
START: Testimonial CSS
----------------------------------------*/
.h8-testimonial {
  overflow: hidden;
}
.h8-testimonial-wrapper {
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30.6%, var(--tj-color-grey-1)), color-stop(69.4%, var(--tj-color-grey-1)), to(rgba(255, 255, 255, 0)));
  -webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--tj-color-grey-1) 30.6%, var(--tj-color-grey-1) 69.4%, rgba(255, 255, 255, 0) 100%);
          mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30.6%, var(--tj-color-grey-1)), color-stop(69.4%, var(--tj-color-grey-1)), to(rgba(255, 255, 255, 0)));
          mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--tj-color-grey-1) 30.6%, var(--tj-color-grey-1) 69.4%, rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 575px) {
  .h8-testimonial-wrapper {
    -webkit-mask-image: none;
            mask-image: none;
    -webkit-margin-start: 12px;
            margin-inline-start: 12px;
    -webkit-margin-end: 12px;
            margin-inline-end: 12px;
  }
}
.h8-testimonial-wrapper .testimonial-item {
  background-color: var(--tj-color-common-white);
  border: 2px solid var(--tj-color-common-white);
  padding: 40px 30px 35px;
  height: 100%;
  border-radius: 8px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h8-testimonial-wrapper .testimonial-item {
    padding: 35px 23px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-testimonial-wrapper .testimonial-item {
    padding: 30px 20px;
  }
}
.h8-testimonial-wrapper .testimonial-item .desc {
  font-size: 18px;
  line-height: 1.444;
  padding-top: 23px;
  padding-bottom: 22px;
}
.h8-testimonial-wrapper .testimonial-item .desc p {
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h8-testimonial-wrapper .testimonial-item .desc {
    font-size: 17px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-testimonial-wrapper .testimonial-item .desc {
    font-size: 16px;
  }
}
.h8-testimonial-wrapper .testimonial-item .testimonial-author .author-img {
  width: 80px;
  height: 80px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-testimonial-wrapper .testimonial-item .testimonial-author .author-img {
    width: 60px;
    height: 60px;
  }
}
.h8-testimonial-wrapper .testimonial-item .testimonial-author .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 3px;
}

/* !END: Testimonial CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.h8-blog {
  border-top: 1px dashed var(--tj-color-border-1);
}
.h8-blog-more {
  margin-top: 24px;
}
.h8-blog-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h8-blog-wrapper {
    gap: 20px;
  }
}
.h8-blog-wrapper .blog-item.style-2 .blog-thumb {
  width: 42.6%;
  height: 300px;
}
@media (max-width: 575px) {
  .h8-blog-wrapper .blog-item.style-2 .blog-thumb {
    width: 100%;
    -webkit-margin-end: 15px;
            margin-inline-end: 15px;
  }
}
.h8-blog-wrapper .blog-item.style-2 .blog-thumb a {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.h8-blog-wrapper .blog-item.style-2 .blog-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.h8-blog-wrapper .blog-item.style-2 .blog-content {
  width: 57.4%;
}
.h8-blog-wrapper .blog-item.style-2 .blog-content .title {
  font-weight: var(--tj-fw-medium);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h8-blog-wrapper .blog-item.style-2 .blog-content .title {
    font-size: 28px;
  }
}
@media (max-width: 575px) {
  .h8-blog-wrapper .blog-item.style-2 .blog-content {
    width: 100%;
  }
}
.h8-blog-wrapper .blog-item.style-2 .text-btn .btn-icon {
  width: 48px;
  height: 48px;
  font-size: 24px;
}

/* !END: Blog CSS */
/**----------------------------------------
START: Theme Header CSS
----------------------------------------*/
.h9-header.header-absolute {
  position: absolute;
  top: 15px;
  inset-inline-start: 0;
  width: calc(100% - 30px);
  z-index: 999;
  background-color: transparent;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-header.header-absolute {
    padding: 15px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-header.header-absolute {
    width: calc(100% - 24px);
  }
}
.h9-header.header-absolute .header-wrapper {
  padding: 0 18px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), 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) {
  .h9-header.header-absolute .header-wrapper {
    padding: 0 8px;
  }
}
.h9-header.header-absolute .mainmenu > ul > li {
  padding: 30px 0;
}
.h9-header.header-absolute .mainmenu > ul > li > a {
  color: var(--tj-color-common-white);
  border-radius: 50px;
  border: 1px solid var(--tj-color-border-2);
  padding: 5px 12px;
}
.h9-header.header-absolute .mainmenu > ul > li.menu-item-has-children > a::after, .h9-header.header-absolute .mainmenu > ul > li.has-dropdown > a::after {
  display: none;
}
.h9-header.header-absolute .mainmenu > ul > li:hover > a, .h9-header.header-absolute .mainmenu > ul > li.current-menu-ancestor > a {
  border-color: var(--tj-color-common-white);
}
.h9-header.header-absolute .header-search .search_close_btn,
.h9-header.header-absolute .header-search .search {
  color: var(--tj-color-grey-1);
  background-color: transparent;
  border: 1px solid var(--tj-color-border-2);
}
.h9-header.header-absolute .search_popup {
  background-color: rgba(var(--tj-color-theme-dark), 0.3);
  backdrop-filter: blur(15px);
  height: 100vh;
}
.h9-header.header-absolute .search_popup .tj_search_wrapper {
  min-height: 620px;
}
.h9-header.header-absolute .search_popup .tj_search_wrapper .search_form form .search_input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]),
.h9-header.header-absolute .search_popup .tj_search_wrapper .search_form form .search_input .search-box input[type=text] {
  background: var(--tj-color-common-white);
}

/* !END: Theme Header CSS */
/**----------------------------------------
START: Theme Footer CSS
----------------------------------------*/
.tj-footer-section.h9-footer .h9-footer-subscribe {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
}
@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) {
  .tj-footer-section.h9-footer .h9-footer-subscribe {
    margin-top: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-footer-section.h9-footer .h9-footer-widget-2 {
    -webkit-padding-start: 60px;
            padding-inline-start: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.h9-footer .h9-footer-widget-2 {
    -webkit-padding-start: 15px;
            padding-inline-start: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-footer-section.h9-footer .h9-footer-widget-2 {
    -webkit-padding-start: 70px;
            padding-inline-start: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-footer-section.h9-footer .h9-footer-widget-3 {
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.h9-footer .h9-footer-widget-3 {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-footer-section.h9-footer .h9-footer-widget-3 {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.h9-footer .h9-footer-contact {
    margin-top: 0;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
.tj-footer-section.h9-footer .h9-footer-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: -40px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h9-footer .h9-footer-logo {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0;
  }
}
@media (max-width: 575px) {
  .tj-footer-section.h9-footer .h9-footer-logo {
    margin-bottom: -24px;
  }
}
.tj-footer-section.h9-footer .h9-footer-logo a {
  max-width: 532px;
  width: 100%;
}
.tj-footer-section.h9-footer .h9-footer-logo .h9-footer-award {
  margin-bottom: 38px;
}
.tj-footer-section.h9-footer .h9-footer-copyright {
  position: relative;
  padding: 0;
  border-color: rgba(49, 61, 61, 0.3);
  z-index: 2;
}
.tj-footer-section.h9-footer .h9-footer-copyright .copyright-content-area {
  padding: 30px 0;
  background-color: var(--tj-color-theme-bg);
}
.tj-footer-section.h9-footer .h9-footer-copyright .copyright-menu ul li::before {
  background-color: var(--tj-color-border-1);
}
.tj-footer-section.h9-footer .h9-footer-copyright .copyright-menu ul li a {
  color: var(--tj-color-theme-dark-3);
}
.tj-footer-section.h9-footer .h9-footer-copyright .copyright-menu ul li a:hover {
  color: var(--tj-color-theme-primary);
}

/* !END: Theme Footer CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.h9-hero {
  position: relative;
  margin: 0 15px 0 15px;
  border-radius: 16px;
  overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero {
    border-radius: 12px;
    margin: 0 12px 0;
  }
}
.h9-hero-inner {
  background: var(--tj-color-theme-dark);
}
.h9-hero-bg-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  mix-blend-mode: Luminosity;
}
.h9-hero-item {
  min-height: 92.5vh;
  background-color: #0c1e21;
  position: relative;
}
.h9-hero-item::after {
  position: absolute;
  content: "";
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgb(12, 30, 33)), color-stop(60%, rgba(12, 30, 33, 0.4)), to(rgba(12, 30, 33, 0.1)));
  background: linear-gradient(90deg, rgb(12, 30, 33) 20%, rgba(12, 30, 33, 0.4) 60%, rgba(12, 30, 33, 0.1) 100%);
}
.h9-hero-item-wrapper {
  padding: 162px 0 80px;
  min-height: 883px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-hero-item-wrapper {
    padding: 140px 0 300px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-hero-item-wrapper {
    padding: 170px 0 0 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-item-wrapper {
    padding: 150px 0 0 0;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h9-hero-item {
    height: 95vh;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-hero-item {
    min-height: auto;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-item {
    min-height: 840px;
  }
}
.h9-hero-content {
  max-width: 1480px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.h9-hero-content .h9-hero-title {
  color: var(--tj-color-common-white);
  font-size: 168px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0;
}
.h9-hero-content .h9-hero-title span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 220px;
  height: 121px;
  border-radius: 100px;
  border: 18px solid var(--tj-color-theme-primary);
  position: relative;
}
.h9-hero-content .h9-hero-title span::before {
  content: "";
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  position: absolute;
  top: 50%;
  inset-inline-end: 10px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (min-width: 1601px) and (max-width: 1764px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h9-hero-content .h9-hero-title span::before {
    width: 55px;
    height: 55px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-hero-content .h9-hero-title span::before {
    width: 50px;
    height: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-hero-content .h9-hero-title span::before {
    width: 40px;
    height: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-hero-content .h9-hero-title span::before {
    width: 35px;
    height: 35px;
  }
}
@media (max-width: 575px) {
  .h9-hero-content .h9-hero-title span::before {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 575px) {
  .h9-hero-content .h9-hero-title span::before {
    width: 24px;
    height: 24px;
    inset-inline-end: 5px;
  }
}
@media only screen and (min-width: 1601px) and (max-width: 1764px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h9-hero-content .h9-hero-title span {
    width: 200px;
    height: 105px;
    border-width: 15px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-hero-content .h9-hero-title span {
    width: 180px;
    height: 90px;
    border-width: 13px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-hero-content .h9-hero-title span {
    width: 160px;
    height: 80px;
    border-width: 12px;
    top: 4px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-hero-content .h9-hero-title span {
    width: 140px;
    height: 70px;
    border-width: 10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-content .h9-hero-title span {
    width: 120px;
    height: 60px;
    border-width: 8px;
    top: 4px;
  }
}
@media (max-width: 575px) {
  .h9-hero-content .h9-hero-title span {
    width: 100px;
    height: 48px;
  }
}
@media only screen and (min-width: 1601px) and (max-width: 1764px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h9-hero-content .h9-hero-title {
    font-size: 140px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-hero-content .h9-hero-title {
    font-size: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-hero-content .h9-hero-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-hero-content .h9-hero-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-content .h9-hero-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1601px) and (max-width: 1764px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-hero-content {
    padding: 0 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-hero-content {
    max-width: 920px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-hero-content {
    max-width: 700px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-content {
    padding: 0 15px;
  }
}
.h9-hero-desc-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 150px;
  margin-top: 108px;
  -webkit-margin-start: 220px;
          margin-inline-start: 220px;
}
.h9-hero-desc-area .title {
  max-width: 160px;
  color: var(--tj-color-common-white);
  position: relative;
  font-weight: var(--tj-fw-sbold);
  padding-top: 15px;
  margin: 0;
}
.h9-hero-desc-area .title::before, .h9-hero-desc-area .title::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background-color: var(--tj-color-border-2);
}
.h9-hero-desc-area .title::after {
  width: 32px;
  height: 3px;
  top: -1px;
  background-color: var(--tj-color-theme-primary);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h9-hero-desc-area .title {
    max-width: 135px;
  }
}
@media (max-width: 575px) {
  .h9-hero-desc-area .title {
    max-width: 100%;
  }
}
.h9-hero-desc-area .desc-inner {
  max-width: 416px;
}
.h9-hero-desc-area .desc-inner .desc {
  font-size: 18px;
  color: var(--tj-color-text-body-2);
  margin-bottom: 0;
}
.h9-hero-desc-area .desc-inner .desc a {
  color: var(--tj-color-common-white);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}
.h9-hero-desc-area .desc-inner .desc a::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--tj-color-common-white);
  position: absolute;
  bottom: 2px;
  inset-inline-end: 0;
}
.h9-hero-desc-area .desc-inner .desc a:hover::after {
  -webkit-animation: linehover 0.8s linear;
          animation: linehover 0.8s linear;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-desc-area .desc-inner .desc {
    font-size: 16px;
  }
}
.h9-hero-desc-area .desc-inner .tj-primary-btn {
  margin-top: 25px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-desc-area .desc-inner {
    max-width: 370px;
  }
}
@media only screen and (min-width: 1601px) and (max-width: 1764px), only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h9-hero-desc-area {
    gap: 120px;
    -webkit-margin-start: 150px;
            margin-inline-start: 150px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-hero-desc-area {
    gap: 70px;
    margin-top: 80px;
    -webkit-margin-start: 100px;
            margin-inline-start: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-hero-desc-area {
    gap: 70px;
    margin-top: 80px;
    -webkit-margin-start: 100px;
            margin-inline-start: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-hero-desc-area {
    gap: 50px;
    margin-top: 70px;
    -webkit-margin-start: 70px;
            margin-inline-start: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-desc-area {
    gap: 30px;
    margin-top: 40px;
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }
}
@media (max-width: 575px) {
  .h9-hero-desc-area {
    gap: 15px;
  }
}
.h9-hero-social {
  margin-top: 148px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-hero-social {
    margin-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-hero-social {
    margin-top: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-social {
    margin-top: 40px;
  }
}
.h9-hero-img {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  max-width: 619px;
  width: 100%;
  height: 360px;
  z-index: 3;
}
.h9-hero-img img {
  height: 150%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: none;
  transition: none;
  position: absolute;
  inset-inline-start: 0;
  top: 0;
}
@media only screen and (min-width: 1601px) and (max-width: 1764px) {
  .h9-hero-img {
    inset-inline-end: -5%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .h9-hero-img {
    inset-inline-end: -5%;
    max-width: 580px;
    height: 350px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-hero-img {
    inset-inline-end: -3%;
    max-width: 510px;
    height: 325px;
    overflow: hidden;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-hero-img {
    height: 360px;
    overflow: hidden;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-hero-img {
    position: relative;
    margin-top: -50px;
    max-width: 400px;
    height: 280px;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    overflow: hidden;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-img {
    position: relative;
    margin-top: 40px;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    -webkit-margin-end: auto;
            margin-inline-end: auto;
    overflow: hidden;
  }
}
@media (max-width: 575px) {
  .h9-hero-img {
    height: 280px;
  }
}
.h9-hero-shape-1 {
  max-width: 620px;
  pointer-events: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-hero-shape-1 {
    max-width: 450px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-shape-1 {
    max-width: 320px;
  }
}
.h9-hero-shape-2 {
  max-width: 609px;
  inset-inline-end: 0;
  pointer-events: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-hero-shape-2 {
    max-width: 420px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-hero-shape-2 {
    max-width: 300px;
  }
}

@-webkit-keyframes moving {
  0% {
    inset-inline-start: 60%;
  }
  50% {
    inset-inline-start: 6%;
  }
  100% {
    inset-inline-start: 60%;
  }
}

@keyframes moving {
  0% {
    inset-inline-start: 60%;
  }
  50% {
    inset-inline-start: 6%;
  }
  100% {
    inset-inline-start: 60%;
  }
}
/* !END: Hero CSS */
/**----------------------------------------
START: Choose CSS
----------------------------------------*/
.h9-choose-box.customers-box {
  background-color: var(--tj-color-common-white);
  padding: 30px;
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.h9-choose-box.customers-box .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 20px;
}
.h9-choose-box.customers-box .rating-area {
  margin-top: 18px;
}
.h9-choose-box.customers-box .customers-text {
  font-size: 18px;
  line-height: 1.44;
  color: var(--tj-color-text-body);
  font-weight: var(--tj-fw-regular);
  padding-top: 6px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-choose-box.customers-box {
    padding: 30px 15px;
    min-height: 250px;
  }
}
.h9-choose-box.choose-box {
  background-color: var(--tj-color-common-white);
  padding: 30px;
}
.h9-choose-box.choose-box .choose-icon {
  max-width: 90px;
  height: 90px;
  font-size: 64px;
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  border-radius: 50%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 5px;
  margin-bottom: 68px;
}
.h9-choose-box.choose-box .choose-icon i {
  width: 43px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-choose-box.choose-box .choose-icon i {
    width: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-choose-box.choose-box .choose-icon {
    margin-bottom: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-choose-box.choose-box .choose-icon {
    max-width: 80px;
    height: 80px;
    font-size: 55px;
    margin-top: 0;
    margin-bottom: 30px;
  }
}
.h9-choose-box.choose-box .title {
  color: var(--tj-color-heading-primary);
  margin-bottom: 18px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-choose-box.choose-box .title {
    font-size: 20px;
  }
}
.h9-choose-box.choose-box .desc {
  color: var(--tj-color-text-body);
}
.h9-choose-box.choose-box .text-btn .btn-text {
  color: var(--tj-color-common-white);
}
.h9-choose-box.choose-box .text-btn .btn-icon {
  background-color: var(--tj-color-theme-primary);
}
.h9-choose-box.choose-box .customers ul li img {
  width: 67px;
  height: 67px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-choose-box.choose-box {
    padding: 30px 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-choose-box.choose-box {
    padding: 30px 15px;
    min-height: 250px;
  }
}
.h9-choose-box.h9-choose-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .h9-choose-box.h9-choose-bg {
    min-height: 360px;
  }
}
@media (max-width: 575px) {
  .h9-choose-box.h9-choose-bg {
    min-height: 308px;
  }
}
.h9-choose-box.h9-choose-bg::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tj-color-theme-dark);
  opacity: 0.75;
  z-index: -1;
}
.h9-choose-box.h9-choose-bg .desc,
.h9-choose-box.h9-choose-bg .title {
  color: var(--tj-color-common-white);
}

/* !END: Choose CSS */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
.h9-service {
  background-color: var(--tj-color-theme-dark);
  position: relative;
  z-index: 0;
  border-radius: 12px;
  overflow: hidden;
}
.h9-service.section-gap {
  padding-top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-service .pin-spacer:has(.sec-heading.style-8) {
    height: auto !important;
  }
}
.h9-service .sec-heading.style-8 {
  padding-top: 120px;
  margin-bottom: 0;
  z-index: 2;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-service .sec-heading.style-8 {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-service .sec-heading.style-8 {
    padding-top: 70px;
  }
  .h9-service .sec-heading.style-8.tj-sticky-panel-2 {
    position: relative !important;
    inset-inline-start: 0 !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
    height: auto !important;
    max-height: inherit !important;
    margin-bottom: -30px !important;
  }
}
.h9-service .sec-heading.style-8 .sec-title {
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-service .sec-heading.style-8 .sec-title {
    font-size: 44px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-service .sec-heading.style-8 .sec-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-service .sec-heading.style-8 .sec-title {
    max-width: 100%;
  }
}
.h9-service .sec-heading.style-8 .h9-service-more {
  margin-top: 24px;
}
.h9-service-wrapper .service-item.style-5 {
  padding: 30px 30px 35px;
  background-color: var(--tj-color-theme-bg-3);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-service-wrapper .service-item.style-5 {
    padding: 20px 15px 15px;
  }
}
.h9-service-wrapper .service-item.style-5 .service-content-area {
  padding: 0;
  margin-bottom: 40px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 22px;
  position: relative;
  z-index: 0;
}
@media (max-width: 575px) {
  .h9-service-wrapper .service-item.style-5 .service-content-area {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .h9-service-wrapper .service-item.style-5 .service-content-area .service-icon {
    margin-bottom: 5px;
  }
}
.h9-service-wrapper .service-item.style-5 .service-content-area .service-content {
  max-width: 100%;
}
.h9-service-wrapper .service-item.style-5 .service-content-area .title {
  max-width: 300px;
}
.h9-service-wrapper .service-item.style-5 .h9-service-nav {
  font-size: 59px;
  color: var(--tj-color-common-white);
  font-weight: var(--tj-fw-sbold);
  position: absolute;
  inset-inline-end: 0;
  top: -10px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-service-wrapper .service-item.style-5 .h9-service-nav {
    font-size: 50px;
    inset-inline-end: -9px;
    top: -16px;
  }
}
.h9-service-wrapper .service-item.style-5 .h9-service-nav:hover {
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  color: var(--tj-color-theme-primary);
}
.h9-service-wrapper .service-item.style-5 .service-img {
  max-width: 100%;
  height: 433px;
  border-radius: 11px;
  overflow: hidden;
  -webkit-margin-start: 10px;
          margin-inline-start: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-service-wrapper .service-item.style-5 .service-img {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
    height: 300px;
  }
}
.h9-service-wrapper .service-item.style-5 .service-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 500ms;
  transition: -webkit-transform 500ms;
  transition: transform 500ms;
  transition: transform 500ms, -webkit-transform 500ms;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1);
          transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1);
  border-radius: 11px;
}
.h9-service-wrapper .service-item.style-5:hover .service-img img {
  -webkit-transform: perspective(400px) rotateX(0.09deg) rotateY(0) scale(1.1);
          transform: perspective(400px) rotateX(0.09deg) rotateY(0) scale(1.1);
}

.tj-scroll-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  margin-bottom: 60px;
  background-color: var(--tj-color-theme-dark);
  padding-top: 120px;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-scroll-progress {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-scroll-progress {
    padding-top: 70px;
    margin-bottom: 30px;
  }
}
.tj-scroll-progress::before {
  content: "";
  position: absolute;
  bottom: -48px;
  inset-inline-start: 0;
  width: 100%;
  height: 48px;
  pointer-events: none;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--tj-color-theme-dark)), to(transparent));
  background: linear-gradient(180deg, var(--tj-color-theme-dark), transparent);
}
.tj-scroll-progress-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}
.tj-scroll-progress-item .tj-scroll-progress-sln {
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-grey-2);
  line-height: 1;
  margin-bottom: 0;
}
.tj-scroll-progress-item .tj-scroll-progress-ind {
  width: 0;
  height: 1px;
  background-color: var(--tj-color-border-2);
  position: relative;
  z-index: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.tj-scroll-progress-item .tj-scroll-progress-ind-inner {
  position: absolute;
  inset-inline-start: 0;
  top: -1px;
  width: 0;
  height: 3px;
  -webkit-transition: 0.3s 0.3s;
  transition: 0.3s 0.3s;
  background-color: var(--tj-color-theme-primary);
}
.tj-scroll-progress-item:last-child .tj-scroll-progress-ind {
  opacity: 0;
  visibility: hidden;
}
.tj-scroll-progress-item.active .tj-scroll-progress-sln {
  color: var(--tj-color-common-white);
}
.tj-scroll-progress-item.active .tj-scroll-progress-ind {
  width: 72px;
}
.tj-scroll-progress-item.active .tj-scroll-progress-ind-inner {
  width: 100%;
}

/* !END: Service CSS */
/**----------------------------------------
START: Home 9 About CSS
----------------------------------------*/
.h9-about-section {
  padding-top: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-about-section {
    padding-top: 70px;
  }
}

.h9-sec-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 30px;
}
.h9-sec-heading .sub-title {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.h9-sec-heading .sec-title {
  width: 58%;
}
.h9-sec-heading .sec-title span {
  color: inherit;
  -webkit-padding-start: 105px;
          padding-inline-start: 105px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-sec-heading .sec-title span {
    -webkit-padding-start: 80px;
            padding-inline-start: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-sec-heading .sec-title span {
    -webkit-padding-start: 70px;
            padding-inline-start: 70px;
  }
}
.h9-sec-heading .sec-title .line {
  background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-color-heading-primary)), to(var(--tj-color-text-body-3)));
  background-image: linear-gradient(90deg, var(--tj-color-heading-primary) var(--highlight-offset), var(--tj-color-text-body-3) var(--highlight-offset));
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-sec-heading .sec-title {
    width: 55%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-sec-heading .sec-title {
    width: 65%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-sec-heading .sec-title {
    width: 100%;
  }
}

.h9-about {
  background-color: var(--tj-color-theme-dark);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.h9-about-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.h9-about-content {
  width: 50%;
}
.h9-about-content .desc {
  margin-bottom: 0;
}
.h9-about-content .about-btn-area-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
}
.h9-about-content .about-btn-area-2 .video-btn {
  width: auto;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 15px;
  border: none;
  background: none;
  backdrop-filter: none;
  position: unset;
  -webkit-transform: unset;
      -ms-transform: unset;
          transform: unset;
}
.h9-about-content .about-btn-area-2 .video-btn .play-btn {
  background-color: var(--tj-color-theme-bg);
  color: var(--tj-color-theme-primary);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 14px;
  position: relative;
  -webkit-animation: pulse3 2s infinite;
          animation: pulse3 2s infinite;
  z-index: 5;
  margin: 0;
}
.h9-about-content .about-btn-area-2 .video-btn .play-btn i {
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.h9-about-content .about-btn-area-2 .video-btn .video-text {
  color: var(--tj-color-heading-primary);
  font-weight: var(--tj-fw-sbold);
  font-size: 16px;
  line-height: 1.2;
  position: relative;
}
.h9-about-content .about-btn-area-2 .video-btn .video-text::after {
  content: "";
  position: absolute;
  bottom: 1px;
  inset-inline-end: 0;
  width: 100%;
  height: 1px;
  background-color: var(--tj-color-heading-primary);
}
.h9-about-content .about-btn-area-2 .video-btn:hover {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.h9-about-content .about-btn-area-2 .video-btn:hover .video-text::after {
  -webkit-animation: linehover 0.8s linear;
          animation: linehover 0.8s linear;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-about-content .about-btn-area-2 {
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-about-content {
    width: 100%;
  }
}
.h9-about-funfact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 530px;
  width: 100%;
  padding: 20px 0 24px;
  margin: 30px 0;
  border-top: 1px dashed rgba(12, 30, 33, 0.2);
  border-bottom: 1px dashed rgba(12, 30, 33, 0.2);
}
.h9-about-funfact .countup-item {
  width: 50%;
  padding: 0;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.h9-about-funfact .countup-item:not(:last-child) {
  -webkit-padding-end: 55px;
          padding-inline-end: 55px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-about-funfact .countup-item:not(:last-child) {
    -webkit-padding-end: 30px;
            padding-inline-end: 30px;
  }
}
.h9-about-funfact .countup-item:not(:first-child) {
  -webkit-padding-start: 30px;
          padding-inline-start: 30px;
  position: relative;
  z-index: 0;
}
.h9-about-funfact .countup-item:not(:first-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: -15px;
  top: 52%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0;
  height: 88%;
  -webkit-border-end: 1px dashed rgba(12, 30, 33, 0.2);
          border-inline-end: 1px dashed rgba(12, 30, 33, 0.2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-about-funfact .countup-item:not(:first-child)::after {
    inset-inline-start: 0;
  }
}
.h9-about-funfact .countup-item .count-text {
  max-width: 205px;
  color: var(--tj-color-text-body);
}
.h9-about-funfact .countup-item .inline-content {
  color: var(--tj-color-heading-primary);
  margin-bottom: 15px;
}
.h9-about-funfact .countup-item .inline-content .odometer {
  color: var(--tj-color-heading-primary);
}
.h9-about-funfact .countup-item .inline-content .odometer .odometer-digit,
.h9-about-funfact .countup-item .inline-content .odometer span {
  color: var(--tj-color-heading-primary);
}
@media (max-width: 575px) {
  .h9-about-funfact .countup-item .inline-content {
    margin-bottom: 5px;
  }
}
@media (max-width: 575px) {
  .h9-about-funfact .countup-item {
    width: 100%;
    text-align: start;
  }
  .h9-about-funfact .countup-item:not(:last-child) {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
    padding-bottom: 20px;
  }
  .h9-about-funfact .countup-item:not(:first-child) {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
    padding-top: 15px;
  }
  .h9-about-funfact .countup-item:not(:first-child)::after {
    inset-inline-start: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100%;
    height: 0;
    -webkit-border-end: 0;
            border-inline-end: 0;
    border-top: 1px dashed rgba(12, 30, 33, 0.2);
  }
}
.h9-about-img {
  max-width: 450px;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  margin-top: -77px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-about-img {
    max-width: 100%;
    width: 100%;
  }
}
.h9-about-img .box-area {
  max-width: 194px;
  bottom: 0;
  inset-inline-end: 0;
  inset-inline-start: inherit;
  padding: 17px 0 0 28px;
  border-start-start-radius: 12px;
  border-start-end-radius: 0;
}
.h9-about-img .box-area::before {
  inset-inline-start: inherit;
  inset-inline-end: 0;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.h9-about-img .box-area::after {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  inset-inline-start: -12px;
  inset-inline-end: inherit;
}
.h9-about-img .author-info {
  position: relative;
  -webkit-padding-start: 18px;
          padding-inline-start: 18px;
}
.h9-about-img .author-info::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  position: absolute;
  top: 13px;
  inset-inline-start: 0;
  -webkit-animation: pulse3 1.5s linear infinite;
          animation: pulse3 1.5s linear infinite;
}
.h9-about-img .author-info .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 0;
}
.h9-about-img .author-info .designation {
  font-size: 14px;
  color: var(--tj-color-text-body);
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-about-img {
    max-width: 420px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-about-img {
    margin: 0 auto 30px;
  }
}

/* !END: Home 9 About CSS  */
/**----------------------------------------
START: Team CSS
----------------------------------------*/
.h9-team-item-wrap .team-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 40px 43px 50px 30px;
  background-color: var(--tj-color-common-white);
  border-radius: 8px;
  position: relative;
}
.h9-team-item-wrap .team-item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  background-color: var(--tj-color-theme-primary);
  top: 50%;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  border-radius: 8px;
}
.h9-team-item-wrap .team-item .team-content {
  max-width: 300px;
  width: 100%;
  margin-top: 0;
  z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-team-item-wrap .team-item .team-content {
    text-align: center;
  }
}
.h9-team-item-wrap .team-item .title {
  width: 100%;
  font-weight: var(--tj-fw-medium);
  margin-bottom: 13px;
  -webkit-transition: none;
  transition: none;
}
.h9-team-item-wrap .team-item .title a:hover {
  color: var(--tj-color-common-white);
  letter-spacing: 0;
}
.h9-team-item-wrap .team-item .designation {
  background-color: var(--tj-color-theme-bg);
  color: var(--tj-color-theme-primary);
  font-size: 16px;
  padding: 4px 10px;
  border-radius: 40px;
}
.h9-team-item-wrap .team-item .text-btn {
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
  gap: 0;
}
.h9-team-item-wrap .team-item .text-btn .btn-text {
  color: var(--tj-color-common-white);
  text-indent: -100px;
}
.h9-team-item-wrap .team-item .text-btn .btn-icon {
  width: 48px;
  height: 48px;
}
.h9-team-item-wrap .team-item .team-img {
  width: 238px;
  height: 238px;
  overflow: hidden;
  border-radius: 100%;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  background-color: var(--tj-color-grey-2);
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.8);
      -ms-transform: translate(-50%, -50%) scale(0.8);
          transform: translate(-50%, -50%) scale(0.8);
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.h9-team-item-wrap .team-item .team-img::after, .h9-team-item-wrap .team-item .team-img::before {
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-team-item-wrap .team-item .team-img {
    width: 200px;
    height: 200px;
    opacity: 1;
    visibility: visible;
    position: unset;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    margin: 20px auto;
  }
}
.h9-team-item-wrap .team-item:hover::before {
  height: 100%;
  opacity: 1;
  visibility: visible;
}
.h9-team-item-wrap .team-item:hover .title {
  color: var(--tj-color-common-white);
}
.h9-team-item-wrap .team-item:hover .designation {
  background-color: var(--tj-color-common-white);
}
.h9-team-item-wrap .team-item:hover .team-img {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-team-item-wrap .team-item:hover .team-img {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
}
.h9-team-item-wrap .team-item:hover .text-btn {
  gap: 10px;
}
.h9-team-item-wrap .team-item:hover .text-btn .btn-text {
  text-indent: 0;
}
.h9-team-item-wrap .team-item:hover .text-btn .btn-icon {
  background-color: var(--tj-color-common-white);
}
.h9-team-item-wrap .team-item:hover .text-btn .btn-icon i {
  color: var(--tj-color-theme-dark);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-team-item-wrap .team-item {
    -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;
    padding: 30px 20px 35px 20px;
  }
}

/* !END: Team CSS */
/**----------------------------------------
START: Testimonial CSS
----------------------------------------*/
.h9-testimonial {
  overflow: hidden;
}
.h9-testimonial-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-testimonial-wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-testimonial-wrap {
    margin-top: 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-testimonial-wrap.style-2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.h9-testimonial .testimonial-item {
  background-color: var(--tj-color-common-white);
  padding: 35px 30px 35px;
  height: 100%;
  border-radius: 8px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-testimonial .testimonial-item {
    padding: 35px 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-testimonial .testimonial-item {
    padding: 30px 20px;
  }
}
.h9-testimonial .testimonial-item .star-ratings {
  font-size: 20px;
}
.h9-testimonial .testimonial-item .desc {
  font-size: 18px;
  line-height: 1.444;
  padding-top: 27px;
  padding-bottom: 22px;
}
.h9-testimonial .testimonial-item .desc p {
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-testimonial .testimonial-item .desc {
    font-size: 17px;
  }
}
@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) {
  .h9-testimonial .testimonial-item .desc {
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 18px;
  }
}
.h9-testimonial .testimonial-item .testimonial-author {
  border: 0;
  padding-top: 0;
}
.h9-testimonial .testimonial-item .testimonial-author .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 7px;
}
.h9-testimonial .testimonial-item .testimonial-author .designation {
  font-size: 16px;
  color: var(--tj-color-text-body-3);
}
.h9-testimonial .testimonial-item.style-2 {
  background-color: var(--tj-color-theme-bg);
}
.h9-testimonial-heading {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--tj-color-theme-primary)), to(var(--tj-color-theme-dark)));
  background-image: linear-gradient(var(--tj-color-theme-primary), var(--tj-color-theme-dark));
  border-radius: 10px;
  position: relative;
  z-index: 1;
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
}
.h9-testimonial-heading .sec-heading {
  padding: 35px 30px 0 30px;
  margin-bottom: 10px;
}
.h9-testimonial-heading .sec-heading .sub-title {
  color: var(--tj-color-common-white);
}
.h9-testimonial-heading .sec-heading .sub-title::before {
  background-color: var(--tj-color-common-white);
}
.h9-testimonial-heading .sec-heading .sec-title {
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-testimonial-heading .sec-heading {
    padding: 30px 20px 0 20px;
  }
}
.h9-testimonial-heading .testimonial-img {
  max-width: 415px;
  margin: 0 auto;
}
.h9-testimonial-heading .shape-icon {
  max-width: 420px;
  width: 100%;
  position: absolute;
  bottom: 0;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
}

/* !END: Testimonial CSS */
/**----------------------------------------
START: CTA CSS
----------------------------------------*/
.h9-cta-section {
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 12px;
  margin-bottom: 15px;
  background-color: var(--tj-color-theme-dark);
}
.h9-cta-section::before {
  content: "";
  position: absolute;
  top: -50px;
  inset-inline-start: -100px;
  width: 550px;
  height: 200px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  backdrop-filter: blur(60px);
  -webkit-filter: blur(60px);
          filter: blur(60px);
  opacity: 0.3;
  z-index: -1;
}
.h9-cta-section::after {
  content: "";
  position: absolute;
  bottom: -50px;
  inset-inline-end: -30px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  backdrop-filter: blur(60px);
  -webkit-filter: blur(60px);
          filter: blur(60px);
  opacity: 0.3;
  z-index: -1;
}
.h9-cta-section .cta-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: luminosity;
  opacity: 0.15;
  z-index: -1;
}
.h9-cta-section .cta-content {
  padding: 100px 0;
}
.h9-cta-section .cta-content .title {
  color: var(--tj-color-common-white);
  font-size: 94px;
  line-height: 1;
  margin: 0;
}
.h9-cta-section .cta-content .title::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  backdrop-filter: blur(60px);
  -webkit-filter: blur(60px);
          filter: blur(60px);
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  z-index: -1;
}
.h9-cta-section .cta-content .title .cta-img {
  position: relative;
  display: inline-block;
  margin: 0 25px;
}
.h9-cta-section .cta-content .title .cta-img a {
  position: absolute;
  width: 88px;
  height: 88px;
  font-size: 45px;
  bottom: -40px;
  inset-inline-start: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: var(--tj-color-theme-primary);
}
.h9-cta-section .cta-content .title .cta-img a i {
  color: var(--tj-color-common-white);
}
.h9-cta-section .cta-content .title .cta-img a:hover {
  -webkit-transform: translateX(-50%) scale(0.9);
      -ms-transform: translateX(-50%) scale(0.9);
          transform: translateX(-50%) scale(0.9);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-cta-section .cta-content .title .cta-img a {
    width: 78px;
    height: 78px;
    font-size: 38px;
    bottom: -38px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-cta-section .cta-content .title .cta-img a {
    width: 70px;
    height: 70px;
    font-size: 35px;
    bottom: -35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-cta-section .cta-content .title .cta-img a {
    width: 70px;
    height: 70px;
    font-size: 35px;
    bottom: -35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-cta-section .cta-content .title .cta-img a {
    width: 60px;
    height: 60px;
    font-size: 30px;
    bottom: -30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-cta-section .cta-content .title .cta-img {
    margin-top: 30px;
    margin-bottom: 55px;
  }
}
.h9-cta-section .cta-content .title img {
  max-width: 240px;
  width: 100%;
  background-color: var(--tj-color-text-body-2);
  border: 3px solid var(--tj-color-common-white);
  border-radius: 10px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-cta-section .cta-content .title img {
    max-width: 220px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-cta-section .cta-content .title img {
    max-width: 190px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h9-cta-section .cta-content .title img {
    max-width: 190px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-cta-section .cta-content .title img {
    max-width: 180px;
  }
}
.h9-cta-section .cta-content .title:hover::before {
  opacity: 0.4;
}
.h9-cta-section .cta-content .title:hover img {
  -webkit-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
          transform: rotate(3deg);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h9-cta-section .cta-content .title {
    font-size: 78px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h9-cta-section .cta-content .title {
    font-size: 64px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-cta-section .cta-content .title {
    font-size: 55px;
    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;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-cta-section .cta-content {
    padding: 60px 0;
  }
}

/* !END: CTA CSS */
/* START: Case Study CSS */
.h9-project-wrapper {
  background-color: var(--tj-color-theme-dark);
}
.h9-project-wrapper .project-item {
  background-color: transparent;
  border-radius: 10px;
  height: 527px;
}
.h9-project-wrapper .project-item .project-content {
  position: absolute;
  bottom: 30px;
  inset-inline-start: 30px;
  inset-inline-end: 30px;
  padding: 25px 20px 20px 25px;
  background-color: var(--tj-color-common-white);
  border-radius: 10px;
  opacity: 0;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  z-index: 3;
}
@media (max-width: 575px) {
  .h9-project-wrapper .project-item .project-content {
    bottom: 15px;
    inset-inline-start: 15px;
    inset-inline-end: 15px;
  }
}
.h9-project-wrapper .project-item .project-content .project-text {
  margin-top: 14px;
}
.h9-project-wrapper .project-item:hover .project-content {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h9-project-wrapper .project-item {
    height: 380px;
  }
}
.h9-project-slider {
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(12, 30, 33, 0)), color-stop(20%, var(--tj-color-theme-dark)), color-stop(80%, var(--tj-color-theme-dark)), to(rgba(12, 30, 33, 0)));
  -webkit-mask-image: linear-gradient(90deg, rgba(12, 30, 33, 0) 0%, var(--tj-color-theme-dark) 20%, var(--tj-color-theme-dark) 80%, rgba(12, 30, 33, 0) 100%);
          mask-image: -webkit-gradient(linear, left top, right top, from(rgba(12, 30, 33, 0)), color-stop(20%, var(--tj-color-theme-dark)), color-stop(80%, var(--tj-color-theme-dark)), to(rgba(12, 30, 33, 0)));
          mask-image: linear-gradient(90deg, rgba(12, 30, 33, 0) 0%, var(--tj-color-theme-dark) 20%, var(--tj-color-theme-dark) 80%, rgba(12, 30, 33, 0) 100%);
}
@media (max-width: 575px) {
  .h9-project-slider {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* !END: Case Study CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.h9-blog-wrapper .blog-item.h5-blog-item {
  padding: 15px;
}
.h9-blog-wrapper .blog-item.h5-blog-item .blog-thumb {
  width: 42.2%;
  height: 265px;
  min-height: 0;
}
.h9-blog-wrapper .blog-item.h5-blog-item .blog-thumb::before {
  display: none;
}
.h9-blog-wrapper .blog-item.h5-blog-item .blog-thumb a {
  display: inline-block;
  height: 100%;
  width: 100%;
}
.h9-blog-wrapper .blog-item.h5-blog-item .blog-thumb a img {
  min-height: 100%;
}
.h9-blog-wrapper .blog-item.h5-blog-item .blog-date {
  top: 15px;
  bottom: auto;
  inset-inline-start: auto;
  inset-inline-end: 15px;
  display: none;
  background-color: var(--tj-color-common-white);
}
.h9-blog-wrapper .blog-item.h5-blog-item .blog-date .date {
  color: var(--tj-color-theme-dark);
}
.h9-blog-wrapper .blog-item.h5-blog-item .blog-date .month {
  color: var(--tj-color-theme-dark-3);
}
.h9-blog-wrapper .blog-item.h5-blog-item .blog-content {
  padding: 25px 15px 25px 25px;
  width: 57.8%;
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item {
  position: relative;
  z-index: 0;
  padding: 0;
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-thumb {
  width: 100%;
  min-height: 100%;
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-thumb::before {
  display: block;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(12, 30, 33, 0)), to(var(--tj-color-theme-dark)));
  background: linear-gradient(180deg, rgba(12, 30, 33, 0) 0%, var(--tj-color-theme-dark) 100%);
  opacity: 1;
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-date {
  display: block;
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content {
  position: absolute;
  bottom: 30px;
  inset-inline-start: 30px;
  inset-inline-end: 15px;
  width: calc(100% - 45px);
  padding: 0;
  background-color: transparent;
  z-index: 2;
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .blog-meta span a {
  color: var(--tj-color-text-body-2);
  border: 0;
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .blog-meta span:nth-child(2) {
  color: var(--tj-color-text-body-2);
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .blog-meta span:nth-child(2) a {
  color: var(--tj-color-text-body-5);
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .blog-meta span:nth-child(2) a:hover {
  color: var(--tj-color-theme-primary);
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .title {
  font-size: 32px;
  font-weight: var(--tj-fw-medium);
  color: var(--tj-color-common-white);
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .text-btn {
  margin-top: 24px;
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .text-btn .btn-text {
  color: var(--tj-color-common-white);
}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .text-btn .btn-icon {
  background-color: var(--tj-color-theme-primary);
}
@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) {
  .h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-thumb {
    height: 500px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content {
    bottom: 15px;
    inset-inline-start: 15px;
  }
  .h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .blog-title {
    font-size: 26px;
  }
}
@media (max-width: 575px) {
  .h9-blog-wrapper .blog-item.h5-blog-item .blog-thumb {
    width: 100%;
    height: 240px;
  }
  .h9-blog-wrapper .blog-item.h5-blog-item .blog-content {
    padding: 20px 0 10px 0;
    width: 100%;
  }
  .h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-thumb {
    height: 400px;
    max-height: 400px;
  }
  .h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .title {
    font-size: 24px;
    font-weight: var(--tj-fw-sbold);
  }
  .h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-content .text-btn {
    margin-top: 16px;
  }
}

/* !END: Blog CSS */
/**----------------------------------------
START: Theme Header CSS
----------------------------------------*/
.h10-header.header-area.header-absolute {
  top: 15px;
  padding-top: 24px;
  padding-bottom: 24px;
  z-index: 999;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-header.header-area.header-absolute {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-header.header-area.header-absolute {
    top: 12px;
  }
}
.h10-header.header-area.header-absolute .header-bottom {
  border-bottom: 0;
}
.h10-header.header-area.header-absolute .mainmenu > ul {
  padding: 0 30px;
  background-color: var(--tj-color-common-white);
  border-radius: 56px;
}
.h10-header.header-area.header-absolute .mainmenu > ul > li > .mega-menu {
  top: calc(100% - 24px);
}
.h10-header.header-area.header-absolute .mainmenu > ul > li > a {
  padding-top: 16px;
  padding-bottom: 16px;
}
.h10-header.header-area.header-absolute .mainmenu > ul > li.has-dropdown > a::after {
  top: 19px;
}

/* !END: Theme Header CSS */
/**----------------------------------------
START: Theme Footer CSS
----------------------------------------*/
.tj-footer-section.h10-footer {
  padding-top: 0;
}
.tj-footer-section.h10-footer .h10-footer-title {
  font-size: 64px;
  color: var(--tj-color-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-footer-section.h10-footer .h10-footer-title {
    font-size: 58px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-footer-section.h10-footer .h10-footer-title {
    font-size: 44px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tj-footer-section.h10-footer .h10-footer-title {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .tj-footer-section.h10-footer .h10-footer-title {
    font-size: 38px;
  }
}
.tj-footer-section.h10-footer .h10-footer-subscribe-wrapper {
  margin-bottom: 30px;
}
.tj-footer-section.h10-footer .h10-footer-subscribe-wrapper .award-logo-area {
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h10-footer .h10-footer-subscribe-wrapper .award-logo-area {
    margin-bottom: 30px;
  }
}
.tj-footer-section.h10-footer .footer-col-1::before {
  display: none;
}
.tj-footer-section.h10-footer .footer-col-1 .bg-shape-widget {
  position: absolute;
  bottom: -160px;
  inset-inline-start: -50px;
  width: 362px;
  height: 372px;
  opacity: 1;
  border-radius: 50%;
  background: var(--tj-color-theme-primary);
  -webkit-filter: blur(110px);
          filter: blur(110px);
  z-index: -1;
}
.tj-footer-section.h10-footer .footer-col-1 .text-btn {
  font-size: 20px;
  letter-spacing: -0.03em;
  line-height: 1;
  padding: 5px 20px 8px;
  border: 1px solid var(--tj-color-grey-3);
  border-radius: 50px;
  margin-top: 24px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h10-footer .footer-col-1 .text-btn {
    font-size: 18px;
    margin-top: 16px;
  }
}
.tj-footer-section.h10-footer .footer-col-1 .text-btn .btn-text {
  color: var(--tj-color-common-white);
}
.tj-footer-section.h10-footer .footer-col-2 {
  -webkit-padding-start: 30px;
          padding-inline-start: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-footer-section.h10-footer .footer-col-2 {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.h10-footer .footer-col-2 {
    -webkit-padding-start: 30px;
            padding-inline-start: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-footer-section.h10-footer .footer-col-2 {
    -webkit-padding-start: 70px;
            padding-inline-start: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h10-footer .footer-col-2 {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
.tj-footer-section.h10-footer .footer-col-3 {
  -webkit-padding-start: 80px;
          padding-inline-start: 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-footer-section.h10-footer .footer-col-3 {
    -webkit-padding-start: 44px;
            padding-inline-start: 44px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.h10-footer .footer-col-3 {
    margin-top: 0;
    -webkit-padding-start: 12px;
            padding-inline-start: 12px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h10-footer .footer-col-3 {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-footer-section.h10-footer .widget-contact {
    margin-top: 0;
    -webkit-padding-start: 10px;
            padding-inline-start: 10px;
  }
}
.tj-footer-section.h10-footer .footer-subscribe {
  padding: 42px 30px 46px;
  -webkit-margin-start: 30px;
          margin-inline-start: 30px;
  border: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-footer-section.h10-footer .footer-subscribe {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tj-footer-section.h10-footer .footer-subscribe {
    padding: 32px 20px 36px;
  }
}
@media (max-width: 575px) {
  .tj-footer-section.h10-footer .footer-subscribe {
    padding: 32px 20px 36px;
  }
}
.tj-footer-section.h10-footer .footer-subscribe .title {
  max-width: 100%;
}
.tj-footer-section.h10-footer .footer-subscribe .subscribe-form {
  width: 100%;
}
.tj-footer-section.h10-footer .footer-subscribe .subscribe-form label {
  margin-top: 16px;
}
.tj-footer-section.h10-footer .footer-subscribe .subscribe-form button {
  inset-inline-end: 6px;
}
.tj-footer-section.h10-footer .bg-shape-4 {
  top: auto;
  bottom: 0;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

/* !END: Theme Footer CSS */
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.h10-hero {
  padding-bottom: 0;
  overflow: hidden;
}
@media only screen and (min-width: 1765px), only screen and (min-width: 1601px) and (max-width: 1764px) {
  .h10-hero .container {
    max-width: 1422px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-hero {
    padding-top: 98px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-hero {
    padding-top: 75px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-hero-award-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
    gap: 50px;
  }
}
.h10-hero-award-wrapper .h6-hero-history {
  margin-top: 43px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h10-hero-award-wrapper .h6-hero-history {
    margin-top: 23px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-hero-award-wrapper .h6-hero-history {
    margin-top: 20px;
  }
}
.h10-hero-award-wrapper .circle-text-wrap {
  margin-top: 90px;
  position: relative;
  inset-inline-end: auto;
  bottom: 0;
  background-color: var(--tj-color-common-white);
  width: 192px;
  height: 192px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-hero-award-wrapper .circle-text-wrap {
    margin-top: 41px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-hero-award-wrapper .circle-text-wrap {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h10-hero-award-wrapper .circle-text-wrap {
    width: 162px;
    height: 162px;
  }
}
.h10-hero-award-wrapper .circle-text-wrap .circle-text {
  width: 158px;
  height: 163px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h10-hero-award-wrapper .circle-text-wrap .circle-text {
    width: 132px;
    height: 137px;
  }
}
.h10-hero-award-wrapper .circle-text-wrap .circle-icon {
  font-size: 30px;
}
.h10-hero-award-wrapper .circle-text-wrap .circle-icon i {
  color: var(--tj-color-theme-dark);
}
.h10-hero .banner-content-2 {
  max-width: 875px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h10-hero .banner-content-2 {
    padding-top: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-hero .banner-content-2 {
    padding-top: 20px;
    padding-bottom: 20px;
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-hero .banner-content-2 {
    padding-bottom: 10px;
  }
}
.h10-hero .banner-content-2 .banner-title {
  font-size: 94px;
  line-height: 1.043;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h10-hero .banner-content-2 .banner-title {
    font-size: 84px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h10-hero .banner-content-2 .banner-title {
    font-size: 64px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-hero .banner-content-2 .banner-title {
    font-size: 64px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h10-hero .banner-content-2 .banner-title {
    font-size: 54px;
  }
}
@media (max-width: 575px) {
  .h10-hero .banner-content-2 .banner-title {
    font-size: 35px;
  }
}
.h10-hero .banner-content-2 .banner-title i {
  font-size: 82px;
  -webkit-margin-start: 5px;
          margin-inline-start: 5px;
  display: inline-block;
  position: relative;
  bottom: -5px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-hero .banner-content-2 .banner-title i {
    font-size: 62px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h10-hero .banner-content-2 .banner-title i {
    font-size: 50px;
    -webkit-margin-start: 1px;
            margin-inline-start: 1px;
  }
}
@media (max-width: 575px) {
  .h10-hero .banner-content-2 .banner-title i {
    font-size: 30px;
    -webkit-margin-start: 1px;
            margin-inline-start: 1px;
  }
}
.h10-hero .banner-content-2 .banner-desc-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  margin-top: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-hero .banner-content-2 .banner-desc-area {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-hero .banner-content-2 .banner-desc-area {
    margin-top: 20px;
  }
}
@media (max-width: 575px) {
  .h10-hero .banner-content-2 .banner-desc-area {
    font-size: 16px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 24px;
  }
}
.h10-hero .banner-content-2 .banner-desc-area .tj-primary-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.h10-hero .banner-content-2 .banner-desc-area .banner-desc {
  max-width: 375px;
  width: 100%;
  font-size: 18px;
  line-height: 1.444;
  color: var(--tj-color-text-body-4);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-hero .banner-content-2 .banner-desc-area .banner-desc {
    font-size: 16px;
  }
}
.h10-hero-banner {
  margin: 65px auto 0;
  text-align: center;
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-hero-banner {
    margin-top: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-hero-banner {
    margin-top: 70px;
    height: 500px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-hero-banner {
    margin-top: 70px;
    height: 300px;
  }
}
.h10-hero-banner-video {
  height: 100%;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  z-index: 0;
}
.h10-hero-banner-video video {
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: inline-block;
  margin-bottom: -10px;
}

/* !END: Hero CSS */
/**----------------------------------------
START: Service CSS
----------------------------------------*/
.h10-service-wrapper .service-item.style-4 {
  padding: 30px 30px 35px;
  position: relative;
  border-radius: 8px;
  z-index: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-service-wrapper .service-item.style-4 {
    padding: 30px 20px;
  }
}
.h10-service-wrapper .service-item.style-4 .h10-service-sln {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 48px;
  height: 48px;
  background-color: var(--tj-color-grey-1);
  border-end-start-radius: 8px;
  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;
  line-height: 1;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-theme-dark-3);
  margin-bottom: 0;
  z-index: 1;
}
.h10-service-wrapper .service-item.style-4 .h10-service-sln::before, .h10-service-wrapper .service-item.style-4 .h10-service-sln::after {
  content: "";
  position: absolute;
  inset-inline-start: -8px;
  top: 0;
  width: 8px;
  height: 8px;
  background: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-11 h-11"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23ecf0f0"></path></svg>');
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.h10-service-wrapper .service-item.style-4 .h10-service-sln::after {
  inset-inline-start: auto;
  top: auto;
  inset-inline-end: 0;
  bottom: -8px;
}
.h10-service-wrapper .service-item.style-4 .service-icon {
  width: 90px;
  height: 90px;
  margin-bottom: 54px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-service-wrapper .service-item.style-4 .service-icon {
    width: 80px;
    height: 80px;
    font-size: 60px;
    margin-bottom: 45px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-service-wrapper .service-item.style-4 .service-icon {
    margin-bottom: 35px;
  }
}
.h10-service-wrapper .service-item.style-4 .service-content {
  overflow: hidden;
}
.h10-service-wrapper .service-item.style-4 .text-btn {
  -webkit-transform: translateX(calc(-100% + 30px));
      -ms-transform: translateX(calc(-100% + 30px));
          transform: translateX(calc(-100% + 30px));
}
.h10-service-wrapper .service-item.style-4:hover .service-icon {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 100%);
  backdrop-filter: blur(15px);
}
.h10-service-wrapper .service-item.style-4:hover .service-icon i {
  color: var(--tj-color-common-white);
}
.h10-service-wrapper .service-item.style-4:hover .desc {
  color: var(--tj-color-grey-1);
}
.h10-service-wrapper .service-item.style-4:hover .text-btn {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

/* !END: Service CSS */
/**----------------------------------------
START: Home 10 About CSS
----------------------------------------*/
.h10-about-content-wrapper {
  max-width: 644px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h10-about-content-wrapper {
    max-width: 629px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h10-about-content-wrapper {
    max-width: 524px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-about-content-wrapper {
    max-width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-about-content-wrapper {
    margin-bottom: 30px;
  }
}
.h10-about-content .desc {
  max-width: 375px;
  font-size: 18px;
  line-height: 1.444;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-about-banner {
    height: 100%;
  }
}
.h10-about-clients.customers-box {
  padding-top: 10px;
  margin-bottom: 28px;
}
.h10-about-clients.customers-box ul li:not(:first-child) {
  -webkit-margin-start: -19px;
          margin-inline-start: -19px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-about-clients.customers-box ul li:not(:first-child) {
    -webkit-margin-start: -16px;
            margin-inline-start: -16px;
  }
}
.h10-about-clients.customers-box ul li img,
.h10-about-clients.customers-box ul li span {
  width: 57px;
  height: 57px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-about-clients.customers-box ul li img,
  .h10-about-clients.customers-box ul li span {
    width: 50px;
    height: 50px;
  }
}
.h10-about-funfact {
  border-top-style: solid;
  border-color: var(--tj-color-border-1);
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
  z-index: 0;
}
.h10-about-funfact::before {
  content: "";
  position: absolute;
  top: -2px;
  inset-inline-start: 0;
  width: 32px;
  height: 3px;
  background-color: var(--tj-color-theme-primary);
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-about-funfact .countup-item:not(:last-child) {
    -webkit-padding-end: 30px;
            padding-inline-end: 30px;
  }
}
.h10-about-funfact .countup-item:not(:first-child) {
  -webkit-padding-start: 15px;
          padding-inline-start: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-about-funfact .countup-item:not(:first-child) {
    padding: 0;
  }
}
@media (max-width: 575px) {
  .h10-about-funfact .countup-item:not(:first-child) {
    padding-top: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h10-about-funfact .countup-item:not(:first-child)::after {
    inset-inline-start: -26px;
  }
}
.h10-about-funfact .countup-item::after {
  border: 0;
}

/* !END: Home 10 About CSS  */
/**----------------------------------------
START: Process CSS
----------------------------------------*/
.h10-process {
  background-color: var(--tj-color-theme-dark);
  position: relative;
  z-index: 0;
  border-radius: 12px;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .h10-process .bg-shape-3 {
    inset-inline-start: -16%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h10-process .bg-shape-3 {
    inset-inline-start: -28%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process .bg-shape-3 {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process .pin-spacer:has(.sec-heading.style-3) {
    height: auto !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process .sec-heading.style-3.tj-sticky-panel-3 {
    position: relative !important;
    inset-inline-start: 0 !important;
    top: 0 !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
    height: auto !important;
    max-height: inherit !important;
  }
}
.h10-process .sec-heading.style-3 .sec-title {
  color: var(--tj-color-common-white);
}
.h10-process .sec-heading.style-3 .h10-process-more {
  margin-top: 24px;
}
.h10-process-wrapper {
  max-width: 644px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process-wrapper {
    max-width: 100%;
  }
}
.h10-process-wrapper .h10-process-item {
  background-color: var(--tj-color-theme-bg-3);
  padding: 108px 30px 35px;
  position: relative;
  border-radius: 8px;
  z-index: 0;
}
.h10-process-wrapper .h10-process-item:not(:last-child) {
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process-wrapper .h10-process-item {
    padding: 90px 20px 30px;
  }
}
.h10-process-wrapper .h10-process-item .title {
  max-width: 300px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-common-white);
  margin-bottom: 20px;
  -webkit-transition: none;
  transition: none;
}
.h10-process-wrapper .h10-process-item .desc {
  margin-bottom: 0;
  color: var(--tj-color-text-body-2);
}
.h10-process-wrapper .h10-process-icon {
  font-size: 48px;
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  background: var(--tj-color-theme-primary);
  border-radius: 50%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.h10-process-wrapper .h10-process-icon i {
  color: var(--tj-color-common-white);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process-wrapper .h10-process-icon {
    font-size: 38px;
    width: 65px;
    height: 65px;
  }
}
.h10-process-wrapper .h10-process-sln {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  padding: 13px 21px 17px;
  margin-bottom: 0;
  background-color: var(--tj-color-theme-dark);
  border-end-end-radius: 8px;
  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;
  line-height: 1;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-text-body-2);
  z-index: 1;
}
.h10-process-wrapper .h10-process-sln::before, .h10-process-wrapper .h10-process-sln::after {
  content: "";
  position: absolute;
  inset-inline-end: -8px;
  top: 0;
  width: 8px;
  height: 8px;
  background: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-11 h-11"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%230c1e21"></path></svg>');
}
.h10-process-wrapper .h10-process-sln::after {
  inset-inline-end: auto;
  inset-inline-start: 0;
  top: auto;
  bottom: -8px;
}

/* !END: Process CSS */
/* START: Case Study CSS */
.h10-project.section-gap {
  padding-bottom: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h10-project.section-gap {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-project.section-gap {
    padding-bottom: 35px;
  }
}
.h10-project-filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 34px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-project-filter {
    margin-top: 24px;
  }
}
.h10-project-button-group {
  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;
  gap: 8px;
  position: relative;
}
@media (max-width: 575px) {
  .h10-project-button-group {
    gap: 4px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.h10-project-button-group button {
  background: var(--tj-color-theme-bg);
  border: none;
  color: var(--tj-color-theme-dark-2);
  text-transform: capitalize;
  font-weight: var(--tj-fw-medium);
  line-height: 1;
  padding: 14px 23px;
  border-radius: 4px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.h10-project-button-group button::after {
  content: "";
  width: 0;
  height: 100%;
  background: var(--tj-color-theme-primary);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 4px;
  z-index: -1;
}
@media (max-width: 575px) {
  .h10-project-button-group button {
    font-size: 14px;
    padding: 9px 11px;
  }
}
.h10-project-button-group button.active {
  color: var(--tj-color-common-white);
  background: transparent;
}
.h10-project-button-group button.active::after {
  width: 100%;
}
.h10-project-wrapper {
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: calc(100% + 30px);
  margin: 0 -15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .h10-project-wrapper {
    max-width: calc(100% + 20px);
    margin: 0 -10px;
  }
}
@media (max-width: 575px) {
  .h10-project-wrapper {
    max-width: calc(100% + 20px);
    margin: 0 -10px;
  }
}
.h10-project-wrapper .project-item.h4-project-item {
  width: 50%;
  background-color: transparent;
  padding: 0 15px;
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .h10-project-wrapper .project-item.h4-project-item {
    padding: 0 10px;
    margin-bottom: 35px;
  }
}
@media (max-width: 575px) {
  .h10-project-wrapper .project-item.h4-project-item {
    width: 100%;
    padding: 0 10px;
    margin-bottom: 35px;
  }
}
.h10-project-wrapper .project-item.h4-project-item .project-img {
  height: 460px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-project-wrapper .project-item.h4-project-item .project-img {
    height: 345px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-project-wrapper .project-item.h4-project-item .project-img {
    height: 300px;
  }
}
.h10-project-wrapper .project-item.h4-project-item .project-content .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 10px;
}
.h10-project-wrapper .project-item.h4-project-item .categories a {
  border-radius: 20px;
}

/* !END: Case Study CSS */
/**----------------------------------------
START: Testimonial CSS
----------------------------------------*/
.h10-testimonial {
  background-color: var(--tj-color-theme-dark);
  position: relative;
  z-index: 0;
  border-radius: 12px;
  overflow: hidden;
}
.h10-testimonial .sec-heading.style-3 .sec-title {
  color: var(--tj-color-common-white);
}
.h10-testimonial .slider-next,
.h10-testimonial .slider-prev {
  border-color: var(--tj-color-border-2);
}
.h10-testimonial .slider-next .anim-icon i,
.h10-testimonial .slider-prev .anim-icon i {
  color: var(--tj-color-common-white);
}
.h10-testimonial-wrapper {
  -webkit-mask-image: none;
          mask-image: none;
}
.h10-testimonial-wrapper .testimonial-item {
  background-color: var(--tj-color-grey-3);
  border: 0;
}
.h10-testimonial-wrapper .testimonial-item .desc {
  border-bottom: 1px dashed var(--tj-color-border-2);
  padding-bottom: 25px;
}
.h10-testimonial-wrapper .testimonial-item .desc p {
  color: var(--tj-color-text-body-2);
}
.h10-testimonial-wrapper .testimonial-author {
  padding-top: 0;
  border-top: 0;
}
.h10-testimonial-wrapper .testimonial-author .title {
  color: var(--tj-color-common-white);
}
.h10-testimonial-wrapper .testimonial-author .designation {
  color: var(--tj-color-text-body-2);
}
.h10-testimonial-wrapper .star-ratings {
  margin-top: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-testimonial-wrapper .star-ratings {
    margin-top: 20px;
  }
}

/* !END: Testimonial CSS */
/**----------------------------------------
START: Pricing CSS
----------------------------------------*/
.h10-pricing-box {
  padding: 15px;
}
.h10-pricing-box .pricing-header {
  padding: 36px 22px 40px;
  border-radius: 12px;
  background-color: var(--tj-color-theme-bg);
  position: relative;
  z-index: 0;
}
.h10-pricing-box .pricing-header .package-price {
  margin-bottom: 0;
}
.h10-pricing-box .pricing-header .pricing-badge {
  padding: 4px 7px 4px 5px;
  border-radius: 4px;
  background: var(--tj-color-theme-dark);
  color: var(--tj-color-common-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  font-size: 14px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1;
  letter-spacing: -0.03em;
  position: absolute;
  inset-inline-end: 20px;
  top: 20px;
  z-index: 1;
}
.h10-pricing-box .pricing-header .pricing-badge i {
  font-size: 15px;
}
.h10-pricing-box .pricing-body {
  padding: 24px 20px 20px;
}
.h10-pricing-box .pricing-body .title-wrapper {
  margin-bottom: 20px;
}
.h10-pricing-box .pricing-body .title-wrapper .title {
  margin-bottom: 2px;
  font-weight: var(--tj-fw-sbold);
}
.h10-pricing-box .pricing-body .title-wrapper .desc {
  margin-bottom: 0;
}
.h10-pricing-box .pricing-body .list-items ul li {
  color: var(--tj-color-text-body-4);
}
.h10-pricing-box .pricing-body .list-items ul li i {
  color: var(--tj-color-theme-primary);
}
.h10-pricing-box .pricing-body .pricing-btn {
  margin-top: 26px;
  margin-bottom: 0;
}
.h10-pricing-box.active {
  background: var(--tj-color-common-white);
}
.h10-pricing-box.active .pricing-header {
  background-color: var(--tj-color-theme-primary);
}
.h10-pricing-box.active .pricing-btn a {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.h10-pricing-box.active .pricing-btn a .btn-text {
  color: var(--tj-color-common-white);
}
.h10-pricing-box.active .pricing-btn a:hover .btn-icon {
  background-color: var(--tj-color-theme-dark);
}

/* !END: Pricing CSS */
/**----------------------------------------
START: Blog CSS
----------------------------------------*/
.h10-blog-wrapper .blog-item.style-2 {
  padding: 15px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-blog-wrapper .blog-item.style-2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 12px;
  }
}
.h10-blog-wrapper .blog-item.style-2 .blog-thumb {
  width: 25.3%;
  height: 210px;
  min-height: 100%;
  border-radius: 8px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-blog-wrapper .blog-item.style-2 .blog-thumb {
    width: 30%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-blog-wrapper .blog-item.style-2 .blog-thumb {
    width: 100%;
  }
}
.h10-blog-wrapper .blog-item.style-2 .blog-thumb a {
  display: inline-block;
  height: 100%;
  width: 100%;
}
.h10-blog-wrapper .blog-item.style-2 .blog-thumb a img {
  min-height: 100%;
}
.h10-blog-wrapper .blog-item.style-2 .blog-content {
  max-width: 800px;
  width: 100%;
  padding: 9px 15px 15px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@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) {
  .h10-blog-wrapper .blog-item.style-2 .blog-content {
    max-width: 640px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-blog-wrapper .blog-item.style-2 .blog-content {
    gap: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-blog-wrapper .blog-item.style-2 .blog-content {
    max-width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 15px 10px;
  }
}
.h10-blog-wrapper .blog-item.style-2 .title-area {
  max-width: 400px;
  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-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-blog-wrapper .blog-item.style-2 .title-area {
    max-width: 363px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h10-blog-wrapper .blog-item.style-2 .title-area .title {
    font-size: 26px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-blog-wrapper .blog-item.style-2 .title-area {
    max-width: 100%;
  }
}
.h10-blog-wrapper .blog-item.style-2 .blog-meta {
  padding-top: 6px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-blog-wrapper .blog-item.style-2 .blog-meta {
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.h10-blog-wrapper .blog-item.style-2 .blog-meta .blog-date-wrapper .blog-author {
  font-size: 18px;
  font-weight: var(--tj-fw-sbold);
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.h10-blog-wrapper .blog-item.style-2 .blog-meta .blog-date-wrapper span {
  display: block;
}
.h10-blog-wrapper .blog-item.style-2 .blog-meta .categories a {
  border-color: var(--tj-color-theme-primary);
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  border-radius: 13px;
}
.h10-blog-wrapper .blog-item.style-2 .blog-meta .categories a:hover {
  background-color: transparent;
  border-color: var(--tj-color-border-1);
  color: var(--tj-color-theme-dark-3);
}
.h10-blog-wrapper .blog-item.style-2 .blog-date {
  position: static;
  padding: 0;
  text-align: start;
}
.h10-blog-wrapper .blog-item.style-2 .text-btn .btn-icon {
  width: 30px;
  height: 30px;
  font-size: 20px;
}

/* !END: Blog CSS *//*# sourceMappingURL=main.css.map */

  .gradient-text {
  background: linear-gradient(90deg, #ff7e5f, #feb47b); /* Customize colors */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

  .gradient-text-blue {
  background: linear-gradient(90deg, #1109fa, #a957fb); /* Customize colors */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: bold;
}

/* === Custom: Our Solutions / service-2 visual refresh === */
.tj-service-section.service-2 {
  background: radial-gradient(1200px 600px at 0% 0%, rgba(41, 98, 255, 0.18), transparent 60%),
              radial-gradient(900px 500px at 100% 100%, rgba(0, 200, 255, 0.12), transparent 55%),
              linear-gradient(135deg, #0a1628 0%, #0f1f3a 50%, #0a1628 100%);
  border: 1px solid rgba(41, 98, 255, 0.15);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  content-visibility: auto;
  contain-intrinsic-size: 1px 1200px;
}

.tj-service-section.service-2 .sec-heading.style-2 .sub-title {
  background: linear-gradient(90deg, rgba(41, 98, 255, 0.18), rgba(0, 200, 255, 0.10));
  color: #5b8bff;
  border: 1px solid rgba(91, 139, 255, 0.35);
  letter-spacing: 1.5px;
  padding: 8px 18px;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: 600;
}

.tj-service-section.service-2 .service-item.style-2 {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(41, 98, 255, 0.04) 100%);
  border: 1px solid rgba(91, 139, 255, 0.18);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease,
              background 0.4s ease;
}

.tj-service-section.service-2 .service-item.style-2::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(41, 98, 255, 0.55), transparent 40%, transparent 60%, rgba(0, 200, 255, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.tj-service-section.service-2 .service-item.style-2:hover::before {
  opacity: 1;
}

.tj-service-section.service-2 .service-item.style-2:hover {
  background: linear-gradient(145deg, rgba(41, 98, 255, 0.10) 0%, rgba(0, 200, 255, 0.05) 100%);
  border-color: rgba(91, 139, 255, 0.45);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(41, 98, 255, 0.25), 0 0 0 1px rgba(91, 139, 255, 0.20);
}

.tj-service-section.service-2 .service-item.style-2 .service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-soft, rgba(79, 124, 255, 0.18)), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--accent-border, rgba(79, 124, 255, 0.35));
  box-shadow: 0 10px 30px var(--accent-glow, rgba(79, 124, 255, 0.30)), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: transform 0.5s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.tj-service-section.service-2 .service-item.style-2 .service-icon i {
  display: inline-block;
  width: 40px;
  height: 40px;
  font-size: 0;
  background-color: var(--accent, #4f7cff);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 0 14px var(--accent-glow, rgba(79, 124, 255, 0.65)));
  transition: transform 0.5s ease;
}

.tj-service-section.service-2 .service-item.style-2 .service-icon i::before {
  content: none;
}

.tj-service-section.service-2 .service-item.style-2:hover .service-icon {
  box-shadow: 0 14px 40px var(--accent-glow, rgba(79, 124, 255, 0.55)), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.tj-service-section.service-2 .service-item.style-2:hover .service-icon i {
  transform: scale(1.1) rotate(-6deg);
}

/* Per-card accent colors + icon SVGs */
.tj-service-section.service-2 .service-item-wrapper:nth-child(1) .service-item.style-2 {
  --accent: #4f7cff;
  --accent-soft: rgba(79, 124, 255, 0.18);
  --accent-border: rgba(79, 124, 255, 0.40);
  --accent-glow: rgba(79, 124, 255, 0.45);
}
.tj-service-section.service-2 .service-item-wrapper:nth-child(1) .service-icon i {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/></svg>");
}

.tj-service-section.service-2 .service-item-wrapper:nth-child(2) .service-item.style-2 {
  --accent: #ec4899;
  --accent-soft: rgba(236, 72, 153, 0.18);
  --accent-border: rgba(236, 72, 153, 0.40);
  --accent-glow: rgba(236, 72, 153, 0.45);
}
.tj-service-section.service-2 .service-item-wrapper:nth-child(2) .service-icon i {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A.996.996 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A.996.996 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/></svg>");
}

.tj-service-section.service-2 .service-item-wrapper:nth-child(3) .service-item.style-2 {
  --accent: #06b6d4;
  --accent-soft: rgba(6, 182, 212, 0.18);
  --accent-border: rgba(6, 182, 212, 0.40);
  --accent-glow: rgba(6, 182, 212, 0.45);
}
.tj-service-section.service-2 .service-item-wrapper:nth-child(3) .service-icon i {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z'/></svg>");
}

.tj-service-section.service-2 .service-item-wrapper:nth-child(4) .service-item.style-2 {
  --accent: #a855f7;
  --accent-soft: rgba(168, 85, 247, 0.18);
  --accent-border: rgba(168, 85, 247, 0.40);
  --accent-glow: rgba(168, 85, 247, 0.45);
}
.tj-service-section.service-2 .service-item-wrapper:nth-child(4) .service-icon i {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5 0 .12.05.23.13.33.41.47.64 1.06.64 1.67A2.5 2.5 0 0 1 12 22z'/><circle fill='black' cx='6.5' cy='11.5' r='1.5'/><circle fill='black' cx='9.5' cy='7.5' r='1.5'/><circle fill='black' cx='14.5' cy='7.5' r='1.5'/><circle fill='black' cx='17.5' cy='11.5' r='1.5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5 0 .12.05.23.13.33.41.47.64 1.06.64 1.67A2.5 2.5 0 0 1 12 22z'/><circle fill='black' cx='6.5' cy='11.5' r='1.5'/><circle fill='black' cx='9.5' cy='7.5' r='1.5'/><circle fill='black' cx='14.5' cy='7.5' r='1.5'/><circle fill='black' cx='17.5' cy='11.5' r='1.5'/></svg>");
}

/* Per-card hover border tint */
.tj-service-section.service-2 .service-item-wrapper:nth-child(1) .service-item.style-2:hover {
  border-color: rgba(79, 124, 255, 0.50);
  box-shadow: 0 20px 50px rgba(79, 124, 255, 0.25), 0 0 0 1px rgba(79, 124, 255, 0.25);
}
.tj-service-section.service-2 .service-item-wrapper:nth-child(2) .service-item.style-2:hover {
  border-color: rgba(236, 72, 153, 0.50);
  box-shadow: 0 20px 50px rgba(236, 72, 153, 0.25), 0 0 0 1px rgba(236, 72, 153, 0.25);
}
.tj-service-section.service-2 .service-item-wrapper:nth-child(3) .service-item.style-2:hover {
  border-color: rgba(6, 182, 212, 0.50);
  box-shadow: 0 20px 50px rgba(6, 182, 212, 0.25), 0 0 0 1px rgba(6, 182, 212, 0.25);
}
.tj-service-section.service-2 .service-item-wrapper:nth-child(4) .service-item.style-2:hover {
  border-color: rgba(168, 85, 247, 0.50);
  box-shadow: 0 20px 50px rgba(168, 85, 247, 0.25), 0 0 0 1px rgba(168, 85, 247, 0.25);
}

.tj-service-section.service-2 .service-item.style-2 .title a {
  background: linear-gradient(90deg, #ffffff, #cfe0ff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: filter 0.3s ease;
}

.tj-service-section.service-2 .service-item.style-2:hover .title a {
  filter: brightness(1.15);
}

.tj-service-section.service-2 .service-item.style-2 .desc {
  color: rgba(207, 224, 255, 0.72);
}

.tj-service-section.service-2 .service-item.style-2 .list-items li {
  color: rgba(207, 224, 255, 0.85);
}

.tj-service-section.service-2 .service-item.style-2 .list-items li i {
  color: #5b8bff;
  filter: drop-shadow(0 0 6px rgba(91, 139, 255, 0.5));
}
/* === END Custom === */

/* Hide client logos rotating section */
.tj-client-section-2 {
  display: none !important;
}

/* === Custom: Our Process / tj-working-process visual refresh === */
.tj-working-process {
  background: linear-gradient(135deg, #f0f5ff 0%, #ffffff 50%, #faf5ff 100%) !important;
  position: relative;
  overflow: hidden;
}

.tj-working-process {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

.tj-working-process::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.tj-working-process::after {
  content: "";
  position: absolute;
  bottom: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.tj-working-process > .container {
  position: relative;
  z-index: 2;
}

.tj-working-process .sec-heading-wrap .sub-title {
  background: linear-gradient(90deg, #4f7cff, #a855f7) !important;
  color: #ffffff !important;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  letter-spacing: 1.8px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
  border: 0 !important;
}

.tj-working-process .working-process-area {
  gap: 70px !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

@media (max-width: 991px) {
  .tj-working-process .working-process-area {
    flex-wrap: wrap !important;
    gap: 60px 25px !important;
  }
}

/* Card baseline */
.tj-working-process .process-item {
  flex: 1 1 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  background: linear-gradient(145deg, #ffffff 0%, var(--step-soft, rgba(79, 124, 255, 0.04)) 100%) !important;
  border-radius: 20px !important;
  padding: 30px 26px 35px 26px !important;
  border: 1px solid var(--step-border, rgba(79, 124, 255, 0.15));
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  overflow: visible;
}

@media (max-width: 991px) {
  .tj-working-process .process-item {
    flex: 1 1 100% !important;
  }
}

.tj-working-process .process-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--step-color, #4f7cff), var(--step-color-2, #4f7cff));
  border-radius: 20px 20px 0 0;
  z-index: 4;
}

.tj-working-process .process-item:hover {
  transform: translateY(-8px);
  border-color: var(--step-color, #4f7cff);
  box-shadow: 0 25px 60px var(--step-glow, rgba(79, 124, 255, 0.25));
}

/* Number gradient — per step */
.tj-working-process .process-item .process-step {
  background: linear-gradient(180deg, var(--step-color, #4f7cff) 0%, var(--step-color-2, #a855f7) 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 130px !important;
  font-weight: 800;
  filter: drop-shadow(0 8px 20px var(--step-glow, rgba(79, 124, 255, 0.25)));
  margin-bottom: 8px !important;
  transition: transform 0.4s ease;
}

.tj-working-process .process-item:hover .process-step {
  transform: scale(1.05);
}

.tj-working-process .process-item .title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0f172a;
  margin-bottom: 14px !important;
  position: relative;
  display: inline-block;
}

.tj-working-process .process-item .title::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--step-color, #4f7cff), var(--step-color-2, #a855f7));
  margin-top: 6px;
  transition: width 0.4s ease;
  border-radius: 2px;
}

.tj-working-process .process-item:hover .title::after {
  width: 100%;
}

.tj-working-process .process-item .desc {
  color: #475569;
  line-height: 1.7;
}

/* Per-step accent variables */
.tj-working-process .process-item:nth-child(1) {
  --step-color: #4f7cff;
  --step-color-2: #06b6d4;
  --step-soft: rgba(79, 124, 255, 0.05);
  --step-border: rgba(79, 124, 255, 0.18);
  --step-glow: rgba(79, 124, 255, 0.30);
}
.tj-working-process .process-item:nth-child(2) {
  --step-color: #a855f7;
  --step-color-2: #ec4899;
  --step-soft: rgba(168, 85, 247, 0.05);
  --step-border: rgba(168, 85, 247, 0.18);
  --step-glow: rgba(168, 85, 247, 0.30);
}
.tj-working-process .process-item:nth-child(3) {
  --step-color: #14b8a6;
  --step-color-2: #4f7cff;
  --step-soft: rgba(20, 184, 166, 0.05);
  --step-border: rgba(20, 184, 166, 0.18);
  --step-glow: rgba(20, 184, 166, 0.30);
}

/* Connector arrow circle — make it pop */
.tj-working-process .process-item:not(:last-child)::after {
  background: linear-gradient(135deg, #ffffff 0%, #f0f5ff 100%) !important;
  border: 3px solid var(--step-color, #4f7cff) !important;
  color: var(--step-color, #4f7cff) !important;
  box-shadow: 0 6px 20px var(--step-glow, rgba(79, 124, 255, 0.35)), 0 0 0 6px rgba(255, 255, 255, 0.7);
  width: 52px !important;
  height: 52px !important;
  font-size: 20px !important;
  inset-inline-end: -46px !important;
  z-index: 10;
}

@media (max-width: 991px) {
  .tj-working-process .process-item:not(:last-child)::after {
    inset-inline-end: inherit !important;
    inset-inline-start: 50% !important;
    bottom: -40px !important;
    top: auto !important;
    transform: translate(-50%, 0) rotate(90deg) !important;
  }
}

@keyframes process-arrow-pulse {
  0%, 100% {
    box-shadow: 0 6px 20px var(--step-glow, rgba(79, 124, 255, 0.35)), 0 0 0 6px rgba(255, 255, 255, 0.7);
  }
  50% {
    box-shadow: 0 6px 25px var(--step-glow, rgba(79, 124, 255, 0.55)), 0 0 0 10px rgba(255, 255, 255, 0.9);
  }
}
/* === END Process Custom === */

/* === Custom: Success Stories / h5-project visual refresh === */
.h5-project {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f0f5ff 100%);
  position: relative;
}

.h5-project::before {
  content: "";
  position: absolute;
  top: 10%;
  right: 5%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.h5-project::after {
  content: "";
  position: absolute;
  bottom: 15%;
  left: 3%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* "PROUD PROJECTS" badge */
.h5-project .sec-heading-wrap.style-3 .sub-title {
  background: linear-gradient(90deg, #4f7cff, #a855f7) !important;
  color: #ffffff !important;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  letter-spacing: 1.8px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
  border: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.h5-project .sec-heading-wrap.style-3 .sub-title i {
  color: #ffffff !important;
}

/* Project image — main visual upgrade */
.h5-project-item.project-item .project-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15), 0 10px 25px rgba(79, 124, 255, 0.10);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
  perspective: 1000px;
}

.h5-project-item.project-item .project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}

.h5-project-item.project-item .project-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, transparent 60%, rgba(79, 124, 255, 0.15) 100%);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.h5-project-item.project-item .project-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-25deg);
  z-index: 3;
  pointer-events: none;
  transition: left 0.9s ease;
}

.h5-project-item.project-item:hover .project-img {
  transform: translateY(-6px);
  box-shadow: 0 35px 80px rgba(79, 124, 255, 0.25), 0 15px 35px rgba(168, 85, 247, 0.15);
}

.h5-project-item.project-item:hover .project-img img {
  transform: scale(1.05);
  filter: brightness(1.05) saturate(1.1);
}

.h5-project-item.project-item:hover .project-img::before {
  opacity: 1;
}

.h5-project-item.project-item:hover .project-img::after {
  left: 150%;
}

/* Category badge */
.h5-project-item.project-item .project-content .categories {
  display: inline-block;
  margin-bottom: 20px;
}

.h5-project-item.project-item .project-content .categories a {
  display: inline-block;
  padding: 6px 16px !important;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.12), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(79, 124, 255, 0.30);
  border-radius: 20px;
  color: #4f7cff !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.h5-project-item.project-item:hover .project-content .categories a {
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff !important;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.35);
  transform: translateY(-2px);
}

/* Title */
.h5-project-item.project-item .project-content .title {
  font-weight: 700 !important;
  transition: color 0.3s ease;
  position: relative;
  display: inline-block;
}

.h5-project-item.project-item .project-content .title a {
  background-image: linear-gradient(90deg, #4f7cff, #a855f7);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease, color 0.3s ease;
  padding-bottom: 4px;
}

.h5-project-item.project-item:hover .project-content .title a {
  background-size: 100% 2px;
  color: #4f7cff !important;
}

/* Description */
.h5-project-item.project-item .project-content .desc {
  color: #475569;
  line-height: 1.75;
}

/* Learn More button - subtle scale on card hover */
.h5-project-item.project-item .project-content .tj-primary-btn {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.h5-project-item.project-item:hover .project-content .tj-primary-btn {
  transform: translateX(4px);
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.35);
}
/* === END Success Stories Custom === */

/* === Success Stories Swiper Layout (replaces broken horizontal scroll) === */
.h5-project .success-stories-wrapper {
  position: relative;
  margin-top: 40px;
}

.h5-project .success-stories-slider {
  overflow: hidden;
  border-radius: 20px;
}

.h5-project .success-stories-slider .swiper-slide {
  height: auto;
}

.h5-project .success-stories-slider .h5-project-item.project-item {
  display: flex !important;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
  padding: 30px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(91, 139, 255, 0.18);
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}

@media (max-width: 991px) {
  .h5-project .success-stories-slider .h5-project-item.project-item {
    flex-direction: column;
    gap: 30px;
    padding: 24px;
  }
}

.h5-project .success-stories-slider .h5-project-item.project-item .project-img {
  flex: 1 1 480px;
  max-width: 100% !important;
  height: 420px !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(79, 124, 255, 0.20);
}

@media (max-width: 991px) {
  .h5-project .success-stories-slider .h5-project-item.project-item .project-img {
    flex: 1 1 100%;
    height: 280px !important;
  }
}

.h5-project .success-stories-slider .h5-project-item.project-item .project-content {
  flex: 1 1 360px;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Controls row — arrows + pagination */
.h5-project .success-stories-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 36px;
}

.h5-project .success-stories-prev,
.h5-project .success-stories-next {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  border: 0;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.h5-project .success-stories-prev:hover,
.h5-project .success-stories-next:hover {
  transform: scale(1.10);
  box-shadow: 0 12px 28px rgba(168, 85, 247, 0.50);
}

.h5-project .success-stories-prev i,
.h5-project .success-stories-next i {
  color: #ffffff;
}

.h5-project .success-stories-pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.h5-project .success-stories-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(91, 139, 255, 0.30);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 1;
}

.h5-project .success-stories-pagination .swiper-pagination-bullet-active {
  width: 30px;
  border-radius: 5px;
  background: linear-gradient(90deg, #4f7cff, #a855f7);
}
/* === END Success Stories Swiper === */

/* === Success Stories — Google review-style cards (continuous marquee) === */
.h5-project .success-stories-wrapper {
  margin-top: 50px;
}

.google-reviews-marquee {
  overflow: hidden;
  position: relative;
  padding: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.google-reviews-track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
  /* Force-on the marquee so it keeps scrolling even when the global
     prefers-reduced-motion reset clamps animations to 0.01ms. The motion is
     slow + linear and purely decorative. */
  animation: google-reviews-scroll 60s linear infinite !important;
  animation-duration: 60s !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
}

.google-reviews-marquee:hover .google-reviews-track {
  animation-play-state: paused !important;
}

@keyframes google-reviews-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 12px)); }
}

@media (max-width: 575px) {
  .google-reviews-track {
    animation-duration: 45s !important;
    gap: 16px;
  }
}

/* Card */
.google-review-card {
  flex: 0 0 auto;
  width: 360px;
  background: #ffffff;
  border-radius: 18px;
  padding: 24px 24px 22px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.google-review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(79, 124, 255, 0.18), 0 4px 10px rgba(15, 23, 42, 0.06);
  border-color: rgba(79, 124, 255, 0.25);
}

@media (max-width: 575px) {
  .google-review-card { width: 280px; padding: 20px; }
}

/* Header: avatar + name + Google logo */
.google-review-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.google-review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.google-review-meta {
  flex: 1;
  min-width: 0;
}

.google-review-name {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 0 2px 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-review-time {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

.google-review-source {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Stars + verified */
.google-review-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.google-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.google-stars .gr-star {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #fbbf24;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.30));
}

.google-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Review text */
.google-review-text {
  color: #334155 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Read more link */
.google-review-readmore {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  align-self: flex-start;
  transition: color 0.3s ease;
}

.google-review-readmore:hover {
  color: #4f7cff !important;
}

/* Section bg — keep light/clean */
.h5-project {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f0f5ff 100%) !important;
}
/* === END Google Review Cards === */

/* === About Hero Section (background image, LEFT-aligned content) === */
.dawki-about-hero {
  position: relative;
  padding: 160px 30px 110px;
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 768px) {
  .dawki-about-hero {
    padding: 110px 20px 80px;
  }
}

.dawki-about-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1920&q=85');
  background-size: cover;
  background-position: right center;
  z-index: -2;
  animation: about-hero-zoom 25s ease-in-out infinite alternate;
}

@keyframes about-hero-zoom {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}

/* Asymmetric overlay — heavy dark on left for text readability, lighter on right */
.dawki-about-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 10, 22, 0.95) 0%, rgba(8, 15, 32, 0.85) 35%, rgba(8, 15, 32, 0.55) 65%, rgba(8, 15, 32, 0.45) 100%),
    radial-gradient(ellipse 800px 500px at 10% 30%, rgba(79, 124, 255, 0.20), transparent 60%),
    radial-gradient(ellipse 700px 400px at 90% 80%, rgba(168, 85, 247, 0.18), transparent 60%);
  z-index: -1;
}

.dawki-about-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 !important;
  text-align: left !important;
}

/* Badge */
.dawki-about-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(79, 124, 255, 0.15);
  border: 1px solid rgba(91, 139, 255, 0.40);
  color: #88b4ff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.dawki-about-hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #88b4ff;
  box-shadow: 0 0 10px #88b4ff;
  animation: about-badge-blink 1.5s ease-in-out infinite;
}

@keyframes about-badge-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

/* Hero title — left aligned, gradient on accent word */
.dawki-about-hero-title {
  color: #ffffff !important;
  font-size: clamp(44px, 7vw, 84px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -1.5px;
  margin-bottom: 24px !important;
  text-align: left !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.dawki-about-hero-title span {
  background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: about-title-gradient 6s linear infinite;
  filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.40));
}

@keyframes about-title-gradient {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Hero description — left aligned */
.dawki-about-hero-desc {
  color: rgba(207, 224, 255, 0.90) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  margin: 0 0 50px 0 !important;
  max-width: 640px;
  text-align: left !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Badge — left aligned (no auto centering) */
.dawki-about-hero-badge {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Cards grid — left aligned, max-width to keep them on left half */
.dawki-about-hero-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 720px;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .dawki-about-hero-cards {
    grid-template-columns: 1fr;
  }
}

.dawki-about-hero-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(79, 124, 255, 0.05));
  border: 1px solid rgba(91, 139, 255, 0.25);
  border-radius: 18px;
  padding: 32px 28px;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
}

.dawki-about-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4f7cff, #a855f7, transparent);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.dawki-about-hero-card:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 139, 255, 0.55);
  box-shadow: 0 20px 50px rgba(79, 124, 255, 0.25);
}

.dawki-about-hero-card:hover::before {
  opacity: 1;
}

.dawki-about-hero-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(79, 124, 255, 0.40);
  transition: transform 0.4s ease;
}

.dawki-about-hero-card:hover .dawki-about-hero-card-icon {
  transform: scale(1.10) rotate(-8deg);
}

.dawki-about-hero-card-title {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  line-height: 1.2;
}

.dawki-about-hero-card-desc {
  color: rgba(207, 224, 255, 0.78) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
/* === END About Hero === */

/* === About: Core Values Section === */
.dawki-values {
  position: relative;
  padding: 100px 30px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f0f5ff 100%);
  overflow: hidden;
}

@media (max-width: 768px) {
  .dawki-values { padding: 70px 20px; }
}

.dawki-values-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
}

.dawki-values-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #4f7cff, #a855f7);
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
}

.dawki-values-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
  animation: dawki-dot-blink 1.5s ease-in-out infinite;
}

@keyframes dawki-dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.dawki-values-title {
  font-size: clamp(30px, 4.5vw, 50px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-bottom: 18px !important;
  color: #0f172a;
  letter-spacing: -0.5px;
}

.dawki-values-title span {
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: dawki-text-flow 6s linear infinite;
}

@keyframes dawki-text-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.dawki-values-subtitle {
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

.dawki-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .dawki-values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .dawki-values-grid { grid-template-columns: 1fr; }
}

.dawki-values-card {
  background: #ffffff;
  border: 1px solid rgba(91, 139, 255, 0.18);
  border-radius: 18px;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.dawki-values-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4f7cff, #a855f7);
  border-radius: 18px 18px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.dawki-values-card:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 139, 255, 0.40);
  box-shadow: 0 18px 40px rgba(79, 124, 255, 0.18);
}

.dawki-values-card:hover::before {
  transform: scaleX(1);
}

.dawki-values-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(79, 124, 255, 0.35);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dawki-values-card:hover .dawki-values-card-icon {
  transform: scale(1.10) rotate(-8deg);
}

.dawki-values-card-title {
  color: #0f172a !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  line-height: 1.3;
}

.dawki-values-card-desc {
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* === About: Our Journey Timeline === */
.dawki-journey {
  position: relative;
  padding: 100px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0f1f3a 50%, #1a1045 100%);
  overflow: hidden;
}

@media (max-width: 768px) {
  .dawki-journey { padding: 70px 20px; }
}

.dawki-journey::before {
  content: "";
  position: absolute;
  top: 10%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

.dawki-journey::after {
  content: "";
  position: absolute;
  bottom: 5%;
  right: -5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

.dawki-journey-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 70px;
  position: relative;
  z-index: 2;
}

.dawki-journey-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(79, 124, 255, 0.15);
  border: 1px solid rgba(91, 139, 255, 0.40);
  color: #88b4ff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.dawki-journey-pill .dawki-values-dot {
  background: #88b4ff;
  box-shadow: 0 0 10px #88b4ff;
}

.dawki-journey-title {
  color: #ffffff !important;
  font-size: clamp(30px, 4.5vw, 50px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px;
  margin-bottom: 18px !important;
}

.dawki-journey-title span {
  background: linear-gradient(90deg, #5b9eff, #a855f7, #ec4899);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: dawki-text-flow 6s linear infinite;
}

.dawki-journey-subtitle {
  color: rgba(207, 224, 255, 0.78);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

/* Timeline — CENTER alignment with alternating left/right cards */
.dawki-timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

/* Center vertical line */
.dawki-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(180deg, #4f7cff, #a855f7, #ec4899);
  z-index: 1;
}

/* Each milestone — grid: content | marker | image (alternating swaps left/right) */
.dawki-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  padding: 28px 0;
  min-height: 220px;
}

/* Marker (centered) */
.dawki-timeline-marker {
  grid-column: 2;
  display: flex;
  justify-content: center;
  z-index: 3;
}

.dawki-timeline-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.20),
              0 0 16px rgba(79, 124, 255, 0.55);
  position: relative;
}

.dawki-timeline-dot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(79, 124, 255, 0.30);
  animation: dawki-timeline-pulse 2s ease-in-out infinite;
}

@keyframes dawki-timeline-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.6); opacity: 0; }
}

/* Content card */
.dawki-timeline-content {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(79, 124, 255, 0.04));
  border: 1px solid rgba(91, 139, 255, 0.22);
  border-radius: 16px;
  padding: 24px 28px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
  position: relative;
  z-index: 2;
}

/* Image (hidden by default — shows on hover on the OPPOSITE side) */
.dawki-timeline-image {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.dawki-timeline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease-in-out;
}

/* Glowing gradient ring around image (like home hero) */
.dawki-timeline-image-glow {
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  padding: 3px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.80), rgba(168, 85, 247, 0.70), rgba(236, 72, 153, 0.70));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  filter: drop-shadow(0 0 20px rgba(79, 124, 255, 0.50));
}

/* Layout — LEFT items: content on left, image on right (revealed on hover) */
.dawki-timeline-item--left .dawki-timeline-content {
  grid-column: 1;
  text-align: right;
  margin-right: 20px;
}

.dawki-timeline-item--left .dawki-timeline-image {
  grid-column: 3;
  margin-left: 20px;
  justify-self: start;
  transform-origin: left center;
  transform: scale(0.85) translateX(-20px);
}

/* Layout — RIGHT items: content on right, image on left */
.dawki-timeline-item--right .dawki-timeline-content {
  grid-column: 3;
  text-align: left;
  margin-left: 20px;
}

.dawki-timeline-item--right .dawki-timeline-image {
  grid-column: 1;
  margin-right: 20px;
  justify-self: end;
  transform-origin: right center;
  transform: scale(0.85) translateX(20px);
}

/* HOVER — reveal image with glow + zoom */
.dawki-timeline-item:hover .dawki-timeline-image {
  opacity: 1;
  transform: scale(1) translateX(0);
}

.dawki-timeline-item:hover .dawki-timeline-image img {
  transform: scale(1.10);
}

/* Hover — content card lifts and glows */
.dawki-timeline-item:hover .dawki-timeline-content {
  transform: translateY(-4px);
  border-color: rgba(91, 139, 255, 0.55);
  box-shadow: 0 18px 40px rgba(79, 124, 255, 0.25);
}

/* Hover — dot grows */
.dawki-timeline-item:hover .dawki-timeline-dot {
  transform: scale(1.30);
  box-shadow: 0 0 0 5px rgba(79, 124, 255, 0.30),
              0 0 24px rgba(168, 85, 247, 0.70);
}

.dawki-timeline-dot {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.dawki-timeline-year {
  display: inline-block;
  background: linear-gradient(90deg, #5b9eff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.dawki-timeline-title {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  line-height: 1.3;
}

.dawki-timeline-desc {
  color: rgba(207, 224, 255, 0.82) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* Mobile — stack everything left of the timeline line */
@media (max-width: 991px) {
  .dawki-timeline::before {
    left: 24px;
    transform: none;
  }
  .dawki-timeline-item,
  .dawki-timeline-item--left,
  .dawki-timeline-item--right {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
    min-height: auto;
  }
  .dawki-timeline-marker {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 8px;
  }
  .dawki-timeline-item--left .dawki-timeline-content,
  .dawki-timeline-item--right .dawki-timeline-content {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    margin: 0;
  }
  .dawki-timeline-item--left .dawki-timeline-image,
  .dawki-timeline-item--right .dawki-timeline-image {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin: 12px 0 0 0;
    transform: scale(0.95) translateY(10px);
    transform-origin: top left;
    max-width: 320px;
  }
  .dawki-timeline-item:hover .dawki-timeline-image {
    transform: scale(1) translateY(0);
  }
}
/* === END About Extra Sections === */

/* === Fix: Choose Section heading on About page (text not visible on dark bg) === */
.tj-choose-section .sec-heading .sec-title,
.tj-choose-section .sec-heading .sec-title strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(30px, 4.5vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

/* The first strong has gradient class — keep its rainbow gradient */
.tj-choose-section .sec-heading .sec-title strong.gradient-text-blue {
  background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
  animation: choose-gradient-flow 6s linear infinite;
}

/* Sub-title pill */
.tj-choose-section .sec-heading .sub-title {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #4f7cff, #a855f7) !important;
  color: #ffffff !important;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  letter-spacing: 1.8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
  border: 0 !important;
  margin-bottom: 22px !important;
}

.tj-choose-section .sec-heading .sub-title i {
  color: #ffffff !important;
}

/* Force visibility on choose section heading (kill any GSAP autoAlpha) */
.tj-choose-section .sec-heading,
.tj-choose-section .sec-heading *,
.tj-choose-section .sec-heading .sec-title,
.tj-choose-section .sec-heading .sec-title strong {
  opacity: 1 !important;
  visibility: visible !important;
}
/* === END Choose Fix === */

/* === Choose Section sub-title pill — works for both .sec-heading and .sec-heading-wrap === */
.tj-choose-section .sec-heading-wrap .sub-title,
.tj-choose-section .sec-heading .sub-title,
.tj-choose-section .sub-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(90deg, #4f7cff, #a855f7) !important;
  background-image: linear-gradient(90deg, #4f7cff, #a855f7) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  letter-spacing: 1.8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30) !important;
  border: 0 !important;
  margin-bottom: 22px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.tj-choose-section .sec-heading-wrap .sub-title i,
.tj-choose-section .sec-heading .sub-title i,
.tj-choose-section .sub-title i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Apply gradient text to BOTH parts of "Empowering Business with Expertise" on About page too */
.tj-choose-section .sec-heading-wrap .sec-title,
.tj-choose-section .sec-heading-wrap .sec-title strong {
  background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: choose-gradient-flow 6s linear infinite !important;
  display: inline-block;
  font-size: clamp(30px, 4.5vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* === END Choose Sub-title Fix === */

/* === Apply rainbow gradient to BOTH parts of Choose heading === */
.tj-choose-section .sec-heading .sec-title,
.tj-choose-section .sec-heading .sec-title strong {
  background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: choose-gradient-flow 6s linear infinite !important;
  display: inline-block;
}

/* === FAQ Section heading fix (Need Help? Start Here…) === */
.tj-faq-section {
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #050d1c 100%);
}

.tj-faq-section .sec-heading .sec-title {
  color: #ffffff !important;
  font-size: clamp(30px, 4.5vw, 50px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-image: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* The gradient span stays gradient */
.tj-faq-section .sec-heading .sec-title .gradient-text-blue,
.tj-faq-section .sec-heading .sec-title span.gradient-text-blue {
  background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
  animation: choose-gradient-flow 6s linear infinite;
}

/* FAQ sub-title pill */
.tj-faq-section .sec-heading .sub-title {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #4f7cff, #a855f7) !important;
  color: #ffffff !important;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  letter-spacing: 1.8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
  border: 0 !important;
  margin-bottom: 22px !important;
}

.tj-faq-section .sec-heading .sub-title i {
  color: #ffffff !important;
}

/* FAQ description */
.tj-faq-section .desc {
  color: rgba(207, 224, 255, 0.78) !important;
}

/* Force visibility on all FAQ heading elements */
.tj-faq-section .sec-heading,
.tj-faq-section .sec-heading * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* FAQ accordion items — visible on dark bg */
.tj-faq-section .accordion-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(91, 139, 255, 0.20) !important;
  border-radius: 14px !important;
  margin-bottom: 16px !important;
  overflow: hidden;
}

.tj-faq-section .accordion-item .faq-title {
  color: #ffffff !important;
  background: transparent !important;
  font-weight: 600 !important;
}

.tj-faq-section .accordion-item.active {
  border-color: rgba(91, 139, 255, 0.45) !important;
  background: rgba(79, 124, 255, 0.08) !important;
}

.tj-faq-section .accordion-item.active .faq-title {
  color: #88b4ff !important;
}

.tj-faq-section .accordion-item .faq-text,
.tj-faq-section .accordion-item .faq-text p {
  color: rgba(207, 224, 255, 0.82) !important;
}
/* === END FAQ Fix === */

/* === About: Clients Section (white logo cards marquee) === */
.dawki-clients.h7-team {
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #050d1c 100%) !important;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.dawki-clients-heading {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.dawki-clients-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(79, 124, 255, 0.15);
  border: 1px solid rgba(91, 139, 255, 0.40);
  color: #88b4ff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.dawki-clients-pill .dawki-values-dot {
  background: #88b4ff;
  box-shadow: 0 0 10px #88b4ff;
}

.dawki-clients-title {
  color: #ffffff !important;
  font-size: clamp(28px, 4vw, 46px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px;
  margin: 0 !important;
}

.dawki-clients-title span {
  background: linear-gradient(90deg, #5b9eff, #a855f7, #ec4899);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: dawki-text-flow 6s linear infinite;
}

.dawki-clients-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* === END Clients Marquee === */

/* === About: Static Client Logo Grid (auto-flip cells) — white theme === */
.dawki-clients {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f0f5ff 100%) !important;
  padding: 100px 30px;
  position: relative;
  overflow: hidden;
}

/* Soft glow accents in corners for visual interest on white bg */
.dawki-clients::before {
  content: "";
  position: absolute;
  top: 5%;
  left: -5%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.10) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

.dawki-clients::after {
  content: "";
  position: absolute;
  bottom: 5%;
  right: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

.dawki-clients > .container {
  position: relative;
  z-index: 2;
}

/* Heading on white bg — dark text */
.dawki-clients .dawki-clients-title {
  color: #0f172a !important;
}

.dawki-clients .dawki-clients-pill {
  background: linear-gradient(90deg, #4f7cff, #a855f7) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.35);
}

.dawki-clients .dawki-clients-pill .dawki-values-dot {
  background: #ffffff !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 768px) {
  .dawki-clients { padding: 70px 20px; }
}

.dawki-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 40px;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
}

@media (max-width: 1199px) {
  .dawki-logo-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
  .dawki-logo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .dawki-logo-grid { grid-template-columns: repeat(2, 1fr); }
}

.dawki-logo-cell {
  position: relative;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 22px;
  min-height: 130px;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transition: background 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  perspective: 800px;
}

/* Remove right border on every 6th item (last column on desktop) */
.dawki-logo-cell:nth-child(6n) { border-right: 0; }

@media (max-width: 1199px) {
  .dawki-logo-cell:nth-child(6n) { border-right: 1px solid rgba(91, 139, 255, 0.10); }
  .dawki-logo-cell:nth-child(4n) { border-right: 0; }
}

@media (max-width: 767px) {
  .dawki-logo-cell:nth-child(4n) { border-right: 1px solid rgba(91, 139, 255, 0.10); }
  .dawki-logo-cell:nth-child(3n) { border-right: 0; }
}

@media (max-width: 480px) {
  .dawki-logo-cell:nth-child(3n) { border-right: 1px solid rgba(91, 139, 255, 0.10); }
  .dawki-logo-cell:nth-child(2n) { border-right: 0; }
}

.dawki-logo-cell:hover {
  background: linear-gradient(145deg, #ffffff, #f0f5ff);
  transform: translateY(-2px);
  z-index: 2;
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.20);
}

.dawki-logo-cell img {
  max-width: 90% !important;
  max-height: 70px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  position: absolute;
  inset: 0;
  margin: auto;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  filter: none !important;
  opacity: 1 !important;
}

@media (max-width: 480px) {
  .dawki-logo-cell {
    padding: 20px 16px;
    min-height: 100px;
  }
  .dawki-logo-cell img {
    max-height: 50px !important;
  }
}
/* === END Logo Grid === */

/* === Footer: Offices Row (4 location cards above main footer) === */
.dawki-footer-offices {
  /* Tightened top padding so the offices grid sits close to whatever
   * section came before it (CTA / contact / etc), eliminating the dead
   * vertical band the user reported on the welcome page.
   * Was: padding-top: 60px. */
  padding-top: 24px;
  padding-bottom: 50px;
  position: relative;
}

.dawki-footer-offices::after {
  content: "";
  display: block;
  margin-top: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 139, 255, 0.30), transparent);
}

.dawki-footer-offices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

@media (max-width: 991px) {
  .dawki-footer-offices-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .dawki-footer-offices-grid { grid-template-columns: 1fr; }
}

.dawki-footer-office-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(79, 124, 255, 0.04));
  border: 1px solid rgba(91, 139, 255, 0.20);
  border-radius: 16px;
  padding: 22px 22px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease,
              background 0.4s ease;
}

.dawki-footer-office-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4f7cff, #a855f7, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dawki-footer-office-card:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 139, 255, 0.50);
  background: linear-gradient(145deg, rgba(79, 124, 255, 0.10), rgba(168, 85, 247, 0.06));
  box-shadow: 0 18px 40px rgba(79, 124, 255, 0.20);
}

.dawki-footer-office-card:hover::before {
  opacity: 1;
}

.dawki-footer-office-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.dawki-footer-office-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(91, 139, 255, 0.25);
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dawki-footer-office-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dawki-footer-office-card:hover .dawki-footer-office-flag {
  transform: scale(1.15) rotate(-8deg);
}

.dawki-footer-office-city {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  letter-spacing: 0.2px;
}

.dawki-footer-office-address {
  color: rgba(207, 224, 255, 0.72) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Office phone — display-only row below the address. Mint accent matches
   the palette used in the admin panel Contact card so the brand cue stays
   consistent. Non-interactive: click-to-call was intentionally removed. */
.dawki-footer-office-phone {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 12px !important;
  color: #5eead4 !important;          /* mint */
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em;
}
.dawki-footer-office-phone svg {
  flex-shrink: 0;
  opacity: 0.85;
}

@media (max-width: 575px) {
  .dawki-footer-offices { padding-top: 18px; padding-bottom: 30px; }
  .dawki-footer-offices::after { margin-top: 30px; }
}
/* === END Footer Offices === */

/* === About: Trusted by Clients — Ratings Showcase (clean white) === */
.dawki-ratings {
  position: relative;
  padding: 80px 0 70px;
  background: #ffffff;
  overflow: hidden;
}

@media (max-width: 768px) {
  .dawki-ratings { padding: 56px 0 48px; }
}

/* Removed the soft blue radial accent — pure white theme now */
.dawki-ratings::before { content: none; }

.dawki-ratings > .container {
  position: relative;
  z-index: 2;
}

.dawki-ratings-heading {
  text-align: left;
  max-width: 1100px;
  margin: 0 auto 40px;
}

@media (max-width: 768px) {
  .dawki-ratings-heading {
    text-align: center;
    margin-bottom: 28px;
  }
}

.dawki-ratings-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #4f7cff, #a855f7);
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
}

.dawki-ratings-pill .dawki-values-dot {
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
}

.dawki-ratings-title {
  color: #0f172a !important;
  font-size: clamp(26px, 3.6vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px;
  margin: 0 !important;
  white-space: normal;
}

.dawki-ratings-subtitle {
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 6px 0;
}

/* Ratings grid */
.dawki-ratings-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

@media (max-width: 1199px) { .dawki-ratings-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .dawki-ratings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dawki-ratings-grid { grid-template-columns: 1fr; } }

.dawki-rating-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.dawki-rating-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.dawki-rating-card:hover {
  transform: translateY(-8px);
  border-color: rgba(91, 139, 255, 0.40);
  box-shadow: 0 22px 50px rgba(79, 124, 255, 0.18);
}

.dawki-rating-card:hover::before {
  transform: scaleX(1);
}

/* Logo box (square brand mark from Clearbit Logo API) */
.dawki-rating-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: linear-gradient(145deg, #f8fafc, #ffffff);
  border: 1px solid rgba(15, 23, 42, 0.08);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.dawki-rating-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dawki-rating-card:hover .dawki-rating-logo {
  transform: scale(1.10) rotate(-6deg);
  box-shadow: 0 12px 28px rgba(79, 124, 255, 0.20);
}

.dawki-rating-card:hover .dawki-rating-logo img {
  transform: scale(1.08);
}

/* Brand name on its own line */
.dawki-rating-brand {
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
  text-align: center;
}

/* Star ratings */
.dawki-rating-stars {
  position: relative;
  display: inline-block;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.dawki-rating-star-fill,
.dawki-rating-star-empty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.dawki-rating-star-fill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.dawki-rating-star-fill i,
.dawki-rating-star-empty i {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #fbbf24;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.35));
}

.dawki-rating-star-empty i {
  background-color: rgba(15, 23, 42, 0.18);
  filter: none;
}

/* Rating value */
.dawki-rating-value {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
}

.dawki-rating-value strong {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.5px;
}

.dawki-rating-value span {
  color: #64748b;
  font-weight: 500;
}
/* === END Ratings Showcase === */

/* === Trusted Logos — clean row of brand logos with rating label below ====
   Each item is a vertical stack: white logo card + "X.X Rating" caption. */
.dawki-ratings-logos {
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px 24px;
  max-width: 1100px;
  padding: 10px 0;
}

.dawki-ratings-logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1 1 0;
  min-width: 160px;
}

.dawki-ratings-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  width: 100%;
  max-width: 230px;
  flex: 0 0 auto;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 18px 24px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.dawki-ratings-logo-rating {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: 0.2px;
  text-align: center;
}

.dawki-ratings-logo-img {
  max-height: 56px;
  max-width: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.dawki-ratings-logo-cell:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(79, 124, 255, 0.14);
  border-color: rgba(91, 139, 255, 0.30);
}

.dawki-ratings-logo-cell:hover .dawki-ratings-logo-img {
  transform: scale(1.06);
}

/* Fallback when Clearbit can't resolve a domain — styled wordmark text */
.dawki-ratings-logo-fallback {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
  text-align: center;
  background: linear-gradient(135deg, #1e293b, #475569);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 991px) {
  .dawki-ratings-logo-item {
    flex: 1 1 30%;
    min-width: 140px;
  }
}

@media (max-width: 575px) {
  .dawki-ratings-logos {
    gap: 22px 16px;
  }
  .dawki-ratings-logo-item {
    flex: 1 1 45%;
    min-width: 130px;
    gap: 10px;
  }
  .dawki-ratings-logo-cell {
    height: 76px;
    padding: 12px 16px;
  }
  .dawki-ratings-logo-img {
    max-height: 42px;
    max-width: 130px;
  }
  .dawki-ratings-logo-rating {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dawki-ratings-logo-cell,
  .dawki-ratings-logo-img {
    transition: none;
  }
}
/* === END Trusted Logos === */

/* === About: Our Core Values (image-left + values-right) === */
.dawki-corevalues {
  position: relative;
  padding: 100px 30px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f0f5ff 100%);
  overflow: hidden;
}

/* Floating decorative orbs in bg */
.dawki-corevalues::before {
  content: "";
  position: absolute;
  top: 15%;
  right: -5%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  animation: corevalues-orb 12s ease-in-out infinite;
}

.dawki-corevalues::after {
  content: "";
  position: absolute;
  bottom: 10%;
  left: -3%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  animation: corevalues-orb 14s ease-in-out infinite reverse;
}

@keyframes corevalues-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -25px) scale(1.10); }
}

.dawki-corevalues > .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) { .dawki-corevalues { padding: 70px 20px; } }

.dawki-corevalues-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 991px) {
  .dawki-corevalues-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* LEFT: image */
.dawki-corevalues-imgwrap {
  position: relative;
}

.dawki-corevalues-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.18);
}

@media (max-width: 991px) {
  .dawki-corevalues-img { aspect-ratio: 16 / 10; }
}

.dawki-corevalues-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: corevalues-img-float 8s ease-in-out infinite;
}

.dawki-corevalues-img:hover img {
  transform: scale(1.05);
  animation-play-state: paused;
}

@keyframes corevalues-img-float {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Glowing border ring around image */
.dawki-corevalues-img::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.50), rgba(168, 85, 247, 0.50), rgba(236, 72, 153, 0.40));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.dawki-corevalues-img:hover::after {
  opacity: 1;
}

.dawki-corevalues-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.20) 0%, transparent 50%, rgba(168, 85, 247, 0.20) 100%);
  pointer-events: none;
}

/* RIGHT: content */
.dawki-corevalues-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* "OUR FOUNDATION" pill */
.dawki-corevalues-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #4f7cff, #a855f7);
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
}

.dawki-corevalues-pill .dawki-values-dot {
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
}

.dawki-corevalues-title {
  color: #0f172a !important;
  font-size: clamp(34px, 5vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px;
  margin: 0 !important;
}

/* Flowing rainbow gradient on "Core Values" — like the reference */
.dawki-corevalues-title span {
  background: linear-gradient(90deg, #ec4899 0%, #4f7cff 35%, #a855f7 65%, #06b6d4 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: corevalues-gradient-flow 5s linear infinite;
  filter: drop-shadow(0 4px 16px rgba(168, 85, 247, 0.25));
}

@keyframes corevalues-gradient-flow {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}

.dawki-corevalues-desc {
  color: #475569 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin: 12px 0 0 0 !important;
  max-width: 560px;
}

.dawki-corevalues-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 16px;
}

@media (max-width: 575px) {
  .dawki-corevalues-grid { grid-template-columns: 1fr; gap: 20px; }
}

.dawki-corevalue-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #ffffff;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.dawki-corevalue-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #4f7cff, #a855f7);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s ease;
}

.dawki-corevalue-item:hover {
  transform: translateY(-4px);
  border-color: rgba(91, 139, 255, 0.40);
  box-shadow: 0 16px 36px rgba(79, 124, 255, 0.18);
}

.dawki-corevalue-item:hover::before {
  transform: scaleY(1);
}

.dawki-corevalue-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.30);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  position: relative;
}

/* Pulsing halo around icon */
.dawki-corevalue-icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  filter: blur(10px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}

/* Per-card unique colors */
.dawki-corevalue-item:nth-child(1) .dawki-corevalue-icon { background: linear-gradient(135deg, #4f7cff, #06b6d4); }
.dawki-corevalue-item:nth-child(2) .dawki-corevalue-icon { background: linear-gradient(135deg, #fbbf24, #f97316); }
.dawki-corevalue-item:nth-child(3) .dawki-corevalue-icon { background: linear-gradient(135deg, #10b981, #06b6d4); }
.dawki-corevalue-item:nth-child(4) .dawki-corevalue-icon { background: linear-gradient(135deg, #a855f7, #ec4899); }
.dawki-corevalue-item:nth-child(1) .dawki-corevalue-icon::before { background: linear-gradient(135deg, #4f7cff, #06b6d4); }
.dawki-corevalue-item:nth-child(2) .dawki-corevalue-icon::before { background: linear-gradient(135deg, #fbbf24, #f97316); }
.dawki-corevalue-item:nth-child(3) .dawki-corevalue-icon::before { background: linear-gradient(135deg, #10b981, #06b6d4); }
.dawki-corevalue-item:nth-child(4) .dawki-corevalue-icon::before { background: linear-gradient(135deg, #a855f7, #ec4899); }

.dawki-corevalue-item:hover .dawki-corevalue-icon {
  transform: scale(1.15) rotate(-10deg);
  animation: corevalue-icon-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dawki-corevalue-item:hover .dawki-corevalue-icon::before {
  opacity: 0.55;
  animation: corevalue-icon-pulse 1.8s ease-in-out infinite;
}

@keyframes corevalue-icon-bounce {
  0% { transform: scale(1) rotate(0deg); }
  60% { transform: scale(1.25) rotate(-15deg); }
  100% { transform: scale(1.15) rotate(-10deg); }
}

@keyframes corevalue-icon-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.10); }
}

.dawki-corevalue-title {
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.3;
}

.dawki-corevalue-desc {
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
/* === END Core Values v2 === */

/* === About: Testimonials section (Google review marquee) === */
.dawki-about-testimonials {
  position: relative;
  padding: 100px 0 80px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f0f5ff 100%);
  overflow: hidden;
}

@media (max-width: 768px) { .dawki-about-testimonials { padding: 70px 0 60px; } }

.dawki-about-testimonials::before {
  content: "";
  position: absolute;
  top: 10%;
  left: -5%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.10) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

.dawki-about-testimonials::after {
  content: "";
  position: absolute;
  bottom: 10%;
  right: -5%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

.dawki-about-testimonials > .container {
  position: relative;
  z-index: 2;
}

.dawki-about-testimonials-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}

.dawki-about-testimonials-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #4f7cff, #a855f7);
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
}

.dawki-about-testimonials-pill .dawki-values-dot {
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
}

.dawki-about-testimonials-title {
  color: #0f172a !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px;
  margin: 0 !important;
}

.dawki-about-testimonials-title span {
  background: linear-gradient(90deg, #ec4899 0%, #4f7cff 35%, #a855f7 65%, #06b6d4 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: about-testimonials-flow 5s linear infinite;
  filter: drop-shadow(0 4px 16px rgba(168, 85, 247, 0.25));
}

@keyframes about-testimonials-flow {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}

.dawki-about-testimonials-subtitle {
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
  margin: 14px 0 0 0;
}
/* === END About Testimonials === */

/* ============================================================================
 * Contact Page — Top banner hero (bg image + content)
 * ============================================================================ */
.dawki-contact-banner {
  position: relative;
  padding: 130px 30px 100px;
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 768px) {
  .dawki-contact-banner { padding: 90px 20px 70px; }
}

.dawki-contact-banner-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1920&q=85');
  background-size: cover;
  background-position: center;
  z-index: -2;
  animation: contact-banner-zoom 25s ease-in-out infinite alternate;
}

@keyframes contact-banner-zoom {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.10) translate(-1%, -1%); }
}

.dawki-contact-banner-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(5, 12, 28, 0.92) 0%, rgba(15, 31, 65, 0.78) 50%, rgba(42, 24, 69, 0.88) 100%),
    radial-gradient(ellipse 800px 500px at 30% 20%, rgba(79, 124, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 700px 400px at 70% 80%, rgba(168, 85, 247, 0.18), transparent 60%);
  z-index: -1;
}

.dawki-contact-banner-content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.dawki-contact-banner-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(79, 124, 255, 0.15);
  border: 1px solid rgba(91, 139, 255, 0.40);
  color: #88b4ff;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 26px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.dawki-contact-banner-pill .dawki-contact-dot {
  background: #88b4ff;
  box-shadow: 0 0 10px #88b4ff;
}

.dawki-contact-banner-title {
  color: #ffffff !important;
  font-size: clamp(40px, 6vw, 76px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px;
  margin: 0 0 22px 0 !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.dawki-contact-banner-title span {
  background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: contact-banner-flow 5s linear infinite;
  filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.40));
}

@keyframes contact-banner-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.dawki-contact-banner-subtitle {
  color: rgba(207, 224, 255, 0.88) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin: 0 auto 36px !important;
  max-width: 700px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.dawki-contact-banner-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  color: rgba(207, 224, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
  padding-top: 10px;
}

.dawki-contact-banner-meta strong { margin-right: 4px; font-weight: 700; }

.dawki-contact-banner-divider {
  width: 1px;
  height: 18px;
  background: rgba(91, 139, 255, 0.40);
}

@media (max-width: 575px) {
  .dawki-contact-banner-meta { gap: 12px; font-size: 12.5px; }
  .dawki-contact-banner-divider { display: none; }
}

/* ============================================================================
 * Contact Page — Modern split layout (image+logos LEFT, form RIGHT)
 * ============================================================================ */
.dawki-contact-hero {
  position: relative;
  padding: 80px 30px 80px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f0f5ff 100%);
  overflow: hidden;
}

@media (max-width: 768px) { .dawki-contact-hero { padding: 60px 16px; } }

.dawki-contact-hero::before {
  content: "";
  position: absolute;
  top: 5%; left: -5%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.dawki-contact-hero::after {
  content: "";
  position: absolute;
  bottom: 5%; right: -5%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.dawki-contact-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 50px;
  align-items: start;
  position: relative;
  z-index: 2;
}

@media (max-width: 991px) {
  .dawki-contact-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* LEFT COLUMN */
.dawki-contact-left { display: flex; flex-direction: column; gap: 24px; }

.dawki-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #4f7cff, #a855f7);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(79, 124, 255, 0.30);
  align-self: flex-start;
  margin-bottom: 14px;
}

.dawki-contact-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
  animation: contact-dot-blink 1.5s ease-in-out infinite;
}

.dawki-contact-dot--small { width: 6px; height: 6px; }

@keyframes contact-dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.dawki-contact-title {
  color: #0f172a !important;
  font-size: clamp(34px, 4.5vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px;
  margin: 0 0 14px 0 !important;
}

.dawki-contact-title span {
  background: linear-gradient(90deg, #ec4899 0%, #4f7cff 35%, #a855f7 65%, #06b6d4 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: contact-flow 5s linear infinite;
  filter: drop-shadow(0 4px 14px rgba(168, 85, 247, 0.25));
}

@keyframes contact-flow {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}

.dawki-contact-subtitle {
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 8px 0;
  max-width: 480px;
}

/* Hero image */
.dawki-contact-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18);
}

.dawki-contact-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dawki-contact-image:hover img { transform: scale(1.05); }

.dawki-contact-image-glow {
  position: absolute;
  inset: -3px;
  border-radius: 22px;
  padding: 3px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.65), rgba(168, 85, 247, 0.55), rgba(236, 72, 153, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(79, 124, 255, 0.40));
}

/* Trusted clients block */
.dawki-contact-trusted {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.dawki-contact-trusted-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin: 0 0 14px 0;
  text-transform: uppercase;
}

.dawki-contact-trusted-label .dawki-contact-dot--small {
  background: #4f7cff;
  box-shadow: 0 0 8px rgba(79, 124, 255, 0.6);
}

/* Auto-flipping logo grid */
.dawki-contact-flipgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 575px) {
  .dawki-contact-flipgrid { grid-template-columns: repeat(3, 1fr); }
}

.dawki-contact-flipcell {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  min-height: 80px;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
  perspective: 600px;
}

.dawki-contact-flipcell:nth-child(4n) { border-right: 0; }
.dawki-contact-flipcell:nth-last-child(-n+4) { border-bottom: 0; }

.dawki-contact-flipcell img {
  max-width: 80%;
  max-height: 50px;
  width: auto; height: auto;
  object-fit: contain;
  position: absolute;
  inset: 0;
  margin: auto;
  backface-visibility: hidden;
}

/* RIGHT COLUMN — Form card */
.dawki-contact-form-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);
  position: relative;
  overflow: hidden;
}

.dawki-contact-form-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
}

@media (max-width: 575px) {
  .dawki-contact-form-card { padding: 28px 22px; }
}

.dawki-contact-form { display: flex; flex-direction: column; gap: 20px; }

.dawki-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 575px) { .dawki-form-row { grid-template-columns: 1fr; } }

.dawki-form-field { display: flex; flex-direction: column; gap: 8px; }

.dawki-form-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.dawki-form-required { color: #ec4899; }

.dawki-form-optional {
  background: rgba(15, 23, 42, 0.05);
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: lowercase;
}

.dawki-form-input {
  width: 100%;
  background: #fafbfc;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 14.5px;
  color: #0f172a;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.dawki-form-input::placeholder { color: #94a3b8; }

.dawki-form-input:focus {
  background: #ffffff;
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
}

.dawki-form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.dawki-form-phone {
  display: flex;
  background: #fafbfc;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dawki-form-phone:focus-within {
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
}

.dawki-form-phone-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: #f1f5f9;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}

.dawki-form-phone .dawki-form-input {
  border: 0;
  background: transparent;
  border-radius: 0;
  flex: 1;
}

.dawki-form-phone .dawki-form-input:focus {
  box-shadow: none;
  background: transparent;
}

/* Help — split: visual on left, option list on right */
.dawki-form-help-split {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 767px) {
  .dawki-form-help-split { grid-template-columns: 1fr; }
}

/* LEFT: animated visual block */
.dawki-form-help-visual {
  background: linear-gradient(145deg, #4f7cff 0%, #a855f7 60%, #ec4899 100%);
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(79, 124, 255, 0.30);
  min-height: 240px;
}

@media (max-width: 767px) {
  .dawki-form-help-visual { min-height: auto; padding: 22px; }
}

.dawki-form-help-visual-inner {
  position: relative;
  width: 84px;
  height: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.dawki-form-help-visual-icon {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #ffffff;
  animation: help-visual-bob 3s ease-in-out infinite;
}

@keyframes help-visual-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.dawki-form-help-visual-orbit,
.dawki-form-help-visual-orbit--2 {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.35);
  animation: help-visual-spin 8s linear infinite;
  z-index: 1;
}

.dawki-form-help-visual-orbit--2 {
  inset: -16px;
  border-style: dotted;
  animation-duration: 12s;
  animation-direction: reverse;
  border-color: rgba(255, 255, 255, 0.20);
}

@keyframes help-visual-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.dawki-form-help-visual-text {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  max-width: 140px;
}

/* RIGHT: vertical list of option rows */
.dawki-form-help-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dawki-form-help-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: #fafbfc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.25s ease;
}

.dawki-form-help-row:hover {
  border-color: rgba(79, 124, 255, 0.40);
  background: #ffffff;
  transform: translateX(3px);
}

.dawki-form-help-row.is-active {
  border-color: #4f7cff;
  background: linear-gradient(90deg, rgba(79, 124, 255, 0.08), rgba(168, 85, 247, 0.04));
  box-shadow: 0 6px 16px rgba(79, 124, 255, 0.15);
}

.dawki-form-help-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.dawki-form-help-row:hover .dawki-form-help-row-icon {
  transform: scale(1.08) rotate(-6deg);
}

.dawki-form-help-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dawki-form-help-row-title {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.dawki-form-help-row-desc {
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.3;
}

.dawki-form-help-row-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(15, 23, 42, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.dawki-form-help-row.is-active .dawki-form-help-row-check {
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  border-color: transparent;
  color: #ffffff;
  transform: scale(1.10);
  box-shadow: 0 4px 12px rgba(79, 124, 255, 0.40);
}

/* Submit button */
.dawki-form-submit {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  padding: 16px 22px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dawki-form-submit::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.20) 50%, transparent 70%);
  transform: skewX(-25deg);
  animation: dawki-form-shine 3.5s ease-in-out infinite;
}

@keyframes dawki-form-shine {
  0% { left: -100%; }
  100% { left: 200%; }
}

.dawki-form-submit:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  box-shadow: 0 18px 40px rgba(79, 124, 255, 0.40);
}

.dawki-form-submit svg { transition: transform 0.3s ease; }
.dawki-form-submit:hover svg { transform: translateX(4px); }

.dawki-form-legal {
  color: #64748b;
  font-size: 12.5px;
  text-align: center;
  margin: 4px 0 0 0;
  line-height: 1.5;
}

.dawki-form-legal a {
  color: #4f7cff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dawki-form-legal a:hover { color: #a855f7; }

/* Contact Info Cards Section */
.dawki-contact-info-grid {
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #050d1c 100%);
  position: relative;
  overflow: hidden;
}

.dawki-contact-info-heading {
  text-align: center;
  margin-bottom: 50px;
}

.dawki-contact-info-title {
  color: #ffffff !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.dawki-contact-info-title span {
  background: linear-gradient(90deg, #5b9eff, #a855f7, #ec4899);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: contact-flow 6s linear infinite;
}

.dawki-contact-info-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 991px) { .dawki-contact-info-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-contact-info-cards { grid-template-columns: 1fr; } }

.dawki-contact-info-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(79, 124, 255, 0.04));
  border: 1px solid rgba(91, 139, 255, 0.20);
  border-radius: 18px;
  padding: 28px 22px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
}

.dawki-contact-info-card:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 139, 255, 0.50);
  box-shadow: 0 20px 50px rgba(79, 124, 255, 0.20);
}

.dawki-contact-info-icon {
  font-size: 36px;
  margin-bottom: 14px;
  display: inline-block;
  filter: drop-shadow(0 4px 12px rgba(79, 124, 255, 0.40));
}

.dawki-contact-info-cardtitle {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
}

.dawki-contact-info-body,
.dawki-contact-info-body p,
.dawki-contact-info-body a,
.dawki-contact-info-body ul,
.dawki-contact-info-body li {
  color: rgba(207, 224, 255, 0.78);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  list-style: none;
  padding: 0;
}

.dawki-contact-info-body a {
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.dawki-contact-info-body a:hover { color: #88b4ff; }
/* === END Contact Page === */

/* === Footer cleanup — links on single line + better column widths === */
/* Force nav menu links to display on one line each (no truncation) */
.tj-footer-section.footer-1 .footer-widget.widget-nav-menu ul li {
  white-space: nowrap;
  overflow: visible;
}

.tj-footer-section.footer-1 .footer-widget.widget-nav-menu ul li a {
  white-space: nowrap;
  display: inline-block;
  font-size: 13.5px !important;
}

/* Now that "Our Office" column is gone, give columns enough room */
.tj-footer-section.footer-1 .footer-main-area .row {
  justify-content: flex-start;
  gap: 0;
}

/* Logo column compact; nav columns wider so links fit on one line */
.tj-footer-section.footer-1 .footer-main-area .col-xl-3 {
  flex: 0 0 auto;
  width: 22%;
}

.tj-footer-section.footer-1 .footer-main-area .col-xl-2 {
  flex: 0 0 auto;
  width: 26%;
}

@media (max-width: 991px) {
  .tj-footer-section.footer-1 .footer-main-area .col-xl-3,
  .tj-footer-section.footer-1 .footer-main-area .col-xl-2 {
    width: 50%;
  }
  .tj-footer-section.footer-1 .footer-widget.widget-nav-menu ul li {
    white-space: normal;
  }
  .tj-footer-section.footer-1 .footer-widget.widget-nav-menu ul li a {
    white-space: normal;
  }
}

@media (max-width: 575px) {
  .tj-footer-section.footer-1 .footer-main-area .col-xl-3,
  .tj-footer-section.footer-1 .footer-main-area .col-xl-2 {
    width: 100%;
  }
}
/* === END Footer cleanup === */

/* ============================================================================
 * Custom Software Development page — Video hero + dynamic sections
 * ============================================================================ */
.dawki-svc-hero {
  position: relative;
  min-height: 620px;
  padding: 130px 30px 100px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 768px) {
  .dawki-svc-hero { min-height: 500px; padding: 100px 20px 70px; }
}

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

.dawki-svc-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 10, 22, 0.95) 0%, rgba(5, 10, 22, 0.85) 35%, rgba(5, 10, 22, 0.55) 65%, rgba(5, 10, 22, 0.45) 100%),
    radial-gradient(ellipse 800px 500px at 10% 30%, rgba(79, 124, 255, 0.20), transparent 60%),
    radial-gradient(ellipse 700px 400px at 90% 80%, rgba(168, 85, 247, 0.18), transparent 60%);
}

.dawki-svc-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

/* Breadcrumb at top */
.dawki-svc-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  font-size: 13px;
  color: rgba(207, 224, 255, 0.78);
}

.dawki-svc-breadcrumb a,
.dawki-svc-breadcrumb-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(207, 224, 255, 0.82);
  font-weight: 500;
  transition: color 0.3s ease;
}

.dawki-svc-breadcrumb a:hover { color: #88b4ff; }

.dawki-svc-breadcrumb-current { color: #ffffff; font-weight: 600; }

.dawki-svc-breadcrumb i {
  font-size: 14px;
  color: #88b4ff;
}

.dawki-svc-breadcrumb > span {
  color: rgba(91, 139, 255, 0.50);
}

/* Pill */
.dawki-svc-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(79, 124, 255, 0.15);
  border: 1px solid rgba(91, 139, 255, 0.40);
  color: #88b4ff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 22px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.dawki-svc-hero-pill .dawki-contact-dot {
  background: #88b4ff;
  box-shadow: 0 0 8px #88b4ff;
}

/* Title */
.dawki-svc-hero-title {
  color: #ffffff !important;
  font-size: clamp(40px, 6vw, 72px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -1.5px;
  margin: 0 0 22px 0 !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.dawki-svc-hero-title span {
  background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: contact-banner-flow 5s linear infinite;
  filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.40));
}

.dawki-svc-hero-subtitle {
  color: rgba(207, 224, 255, 0.90) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin: 0 0 32px 0 !important;
  max-width: 600px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Hero CTAs */
.dawki-svc-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.dawki-svc-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff !important;
  padding: 14px 26px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.40);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dawki-svc-hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.55);
  color: #ffffff !important;
}

.dawki-svc-hero-cta--ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.dawki-svc-hero-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

/* === Features section === */
.dawki-csd-section {
  position: relative;
  padding: 100px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #050d1c 100%);
  overflow: hidden;
}

@media (max-width: 768px) { .dawki-csd-section { padding: 70px 20px; } }

.dawki-csd-section::before {
  content: "";
  position: absolute;
  top: 5%; left: -5%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.dawki-csd-section::after {
  content: "";
  position: absolute;
  bottom: 5%; right: -5%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.dawki-csd-section > .container { position: relative; z-index: 2; }

.dawki-csd-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
}

.dawki-csd-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #4f7cff, #a855f7);
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
}

.dawki-csd-pill .dawki-contact-dot { background: #ffffff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.85); }

.dawki-csd-title {
  color: #ffffff !important;
  font-size: clamp(32px, 4.5vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px;
  margin: 0 0 16px 0 !important;
}

.dawki-csd-title span {
  background: linear-gradient(90deg, #5b9eff, #a855f7, #ec4899);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: contact-banner-flow 6s linear infinite;
}

.dawki-csd-subtitle {
  color: rgba(207, 224, 255, 0.78);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

/* Feature grid */
.dawki-csd-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 80px;
}

@media (max-width: 991px) { .dawki-csd-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-csd-features { grid-template-columns: 1fr; } }

.dawki-csd-feature {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(79, 124, 255, 0.04));
  border: 1px solid rgba(91, 139, 255, 0.20);
  border-radius: 18px;
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
}

.dawki-csd-feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dawki-csd-feature:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 139, 255, 0.50);
  box-shadow: 0 20px 50px rgba(79, 124, 255, 0.25);
}

.dawki-csd-feature:hover::before { opacity: 1; }

.dawki-csd-feature-icon {
  font-size: 38px;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 12px rgba(79, 124, 255, 0.40));
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dawki-csd-feature:hover .dawki-csd-feature-icon {
  transform: scale(1.15) rotate(-8deg);
}

.dawki-csd-feature-title {
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3;
}

.dawki-csd-feature-desc {
  color: rgba(207, 224, 255, 0.78) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Process steps */
.dawki-csd-process {
  margin-top: 30px;
  padding: 50px 40px;
  background: linear-gradient(145deg, rgba(79, 124, 255, 0.08), rgba(168, 85, 247, 0.05));
  border: 1px solid rgba(91, 139, 255, 0.22);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) { .dawki-csd-process { padding: 36px 22px; } }

.dawki-csd-process::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #4f7cff, #a855f7, #ec4899, transparent);
}

.dawki-csd-process-title {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  text-align: center;
  margin: 0 0 36px 0 !important;
}

.dawki-csd-process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

@media (max-width: 991px) { .dawki-csd-process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-csd-process-steps { grid-template-columns: 1fr; } }

.dawki-csd-step {
  text-align: center;
  position: relative;
}

.dawki-csd-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  margin: 0 auto 16px;
  box-shadow: 0 10px 24px rgba(79, 124, 255, 0.40);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dawki-csd-step:hover .dawki-csd-step-num {
  transform: scale(1.10) rotate(-8deg);
}

.dawki-csd-step-title {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
}

.dawki-csd-step-desc {
  color: rgba(207, 224, 255, 0.78) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
/* === END CSD page === */

/* ============================================================================
 * Custom Software Development — Services We Offer (12 cards with hover anims)
 * ============================================================================ */
.dawki-csd-services {
  position: relative;
  padding: 100px 30px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f0f5ff 100%);
  overflow: hidden;
}

@media (max-width: 768px) { .dawki-csd-services { padding: 70px 20px; } }

.dawki-csd-services::before {
  content: "";
  position: absolute;
  top: 0; left: -8%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.10) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

.dawki-csd-services::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

.dawki-csd-services > .container { position: relative; z-index: 2; }

.dawki-csd-services-heading {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 60px;
}

.dawki-csd-services-title {
  color: #0f172a !important;
  font-size: clamp(30px, 4.5vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px;
  margin: 18px 0 16px 0 !important;
}

.dawki-csd-services-title span {
  background: linear-gradient(90deg, #ec4899 0%, #4f7cff 35%, #a855f7 65%, #06b6d4 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: contact-flow 5s linear infinite;
  filter: drop-shadow(0 4px 16px rgba(168, 85, 247, 0.25));
}

.dawki-csd-services-subtitle {
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

/* Grid */
.dawki-csd-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 991px) { .dawki-csd-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-csd-services-grid { grid-template-columns: 1fr; } }

/* Card */
.dawki-csd-svc-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 32px 26px 28px;
  overflow: hidden;
  cursor: default;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.45s ease;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

/* Top gradient strip — fills from left on hover */
.dawki-csd-svc-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  border-radius: 18px 18px 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Diagonal shine sweep across the entire card */
.dawki-csd-svc-card::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(79, 124, 255, 0.08) 50%, transparent 70%);
  transform: skewX(-22deg);
  transition: left 0.85s ease;
  pointer-events: none;
  z-index: 1;
}

/* Glow halo behind card */
.dawki-csd-svc-card-glow {
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.45), rgba(168, 85, 247, 0.40), rgba(236, 72, 153, 0.35));
  filter: blur(18px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease;
}

/* Hover state — multi-layer reaction */
.dawki-csd-svc-card:hover {
  transform: translateY(-10px);
  border-color: transparent;
  box-shadow: 0 25px 60px rgba(79, 124, 255, 0.25),
              0 8px 20px rgba(168, 85, 247, 0.18);
}

.dawki-csd-svc-card:hover::before { transform: scaleX(1); }
.dawki-csd-svc-card:hover::after { left: 200%; }
.dawki-csd-svc-card:hover .dawki-csd-svc-card-glow { opacity: 0.55; }

/* Icon — circular badge with gradient */
.dawki-csd-svc-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(79, 124, 255, 0.30);
  position: relative;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.dawki-csd-svc-card-icon svg {
  width: 28px;
  height: 28px;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dawki-csd-svc-card:hover .dawki-csd-svc-card-icon {
  transform: scale(1.10) rotate(-10deg);
  box-shadow: 0 14px 32px rgba(168, 85, 247, 0.45);
}

.dawki-csd-svc-card:hover .dawki-csd-svc-card-icon svg {
  transform: rotate(10deg);
}

/* Per-card unique gradient on icon */
.dawki-csd-svc-card:nth-child(1) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #4f7cff, #06b6d4); }
.dawki-csd-svc-card:nth-child(2) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #ec4899, #f97316); }
.dawki-csd-svc-card:nth-child(3) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #a855f7, #6366f1); }
.dawki-csd-svc-card:nth-child(4) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #14b8a6, #4f7cff); }
.dawki-csd-svc-card:nth-child(5) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #f97316, #ec4899); }
.dawki-csd-svc-card:nth-child(6) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #06b6d4, #a855f7); }
.dawki-csd-svc-card:nth-child(7) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #10b981, #06b6d4); }
.dawki-csd-svc-card:nth-child(8) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #fbbf24, #f97316); }
.dawki-csd-svc-card:nth-child(9) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #4f7cff, #ec4899); }
.dawki-csd-svc-card:nth-child(10) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #a855f7, #ec4899); }
.dawki-csd-svc-card:nth-child(11) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #06b6d4, #4f7cff); }
.dawki-csd-svc-card:nth-child(12) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #f97316, #fbbf24); }

/* Title */
.dawki-csd-svc-card-title {
  color: #0f172a !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.3;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.dawki-csd-svc-card:hover .dawki-csd-svc-card-title {
  background: linear-gradient(90deg, #4f7cff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* Description */
.dawki-csd-svc-card-desc {
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

/* Arrow — appears in top-right corner on hover */
.dawki-csd-svc-card-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff;
  opacity: 0;
  transform: translate(8px, -8px) scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.40);
}

.dawki-csd-svc-card:hover .dawki-csd-svc-card-arrow {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
/* === END CSD Services === */

/* ============================================================================
 * CSD Services — Vertical Zigzag Timeline (opt-in via servicesLayout="timeline")
 * Cards alternate left/right of a center spine. Spine fills as user scrolls.
 * ============================================================================ */
.dawki-csd-svc-timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 0 6px;
}

/* Static center track */
.dawki-csd-svc-timeline-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: linear-gradient(180deg,
    rgba(79, 124, 255, 0.18) 0%,
    rgba(168, 85, 247, 0.18) 50%,
    rgba(236, 72, 153, 0.18) 100%);
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}

/* Scroll-driven fill that draws the spine */
.dawki-csd-svc-timeline-track-fill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: linear-gradient(180deg, #4f7cff 0%, #a855f7 50%, #ec4899 100%);
  border-radius: 999px;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.45);
  pointer-events: none;
  z-index: 1;
  will-change: height;
}

.dawki-csd-svc-timeline-rows {
  position: relative;
  z-index: 2;
}

/* Row layout: [card-area | center | card-area] */
.dawki-csd-svc-timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 78px 1fr;
  align-items: center;
  margin-bottom: 38px;
}

.dawki-csd-svc-timeline-row:last-child { margin-bottom: 0; }

/* Place the card in the correct half */
.dawki-csd-svc-timeline-row.is-left .dawki-csd-svc-card {
  grid-column: 1;
  margin-right: 18px;
}

.dawki-csd-svc-timeline-row.is-right .dawki-csd-svc-card {
  grid-column: 3;
  margin-left: 18px;
}

/* Tail/connector from card to spine */
.dawki-csd-svc-timeline-row .dawki-csd-svc-card {
  position: relative;
}

.dawki-csd-svc-timeline-row.is-left .dawki-csd-svc-card::after {
  /* Override: do NOT collide with the existing diagonal sweep `::after`.
     We add the connector via the card's right edge using a separate element below. */
}

/* Center node dot on the spine */
.dawki-csd-svc-timeline-node {
  grid-column: 2;
  justify-self: center;
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  box-shadow:
    0 0 0 5px #ffffff,
    0 0 0 7px rgba(79, 124, 255, 0.30),
    0 0 18px rgba(168, 85, 247, 0.55);
  z-index: 2;
}

.dawki-csd-svc-timeline-node-pulse {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.55) 0%, transparent 70%);
  animation: dawki-csd-svc-timeline-pulse 2.4s ease-in-out infinite;
}

@keyframes dawki-csd-svc-timeline-pulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.7); opacity: 0; }
}

/* Per-row icon gradient (re-applies the original 12-color rotation) */
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(1) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #4f7cff, #06b6d4); }
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(2) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #ec4899, #f97316); }
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(3) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #a855f7, #6366f1); }
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(4) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #14b8a6, #4f7cff); }
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(5) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #f97316, #ec4899); }
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(6) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #06b6d4, #a855f7); }
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(7) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #10b981, #06b6d4); }
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(8) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #fbbf24, #f97316); }
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(9) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #4f7cff, #ec4899); }
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(10) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #a855f7, #ec4899); }
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(11) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #06b6d4, #4f7cff); }
.dawki-csd-svc-timeline-rows > .dawki-csd-svc-timeline-row:nth-child(12) .dawki-csd-svc-card-icon { background: linear-gradient(135deg, #f97316, #fbbf24); }

/* Mobile: collapse to single column on the left, line moves to left edge */
@media (max-width: 767px) {
  .dawki-csd-svc-timeline { padding-left: 8px; }
  .dawki-csd-svc-timeline-track,
  .dawki-csd-svc-timeline-track-fill {
    left: 22px;
    transform: none;
  }
  .dawki-csd-svc-timeline-row {
    grid-template-columns: 44px 1fr;
    margin-bottom: 28px;
  }
  .dawki-csd-svc-timeline-node {
    grid-column: 1;
    justify-self: center;
  }
  .dawki-csd-svc-timeline-row.is-left .dawki-csd-svc-card,
  .dawki-csd-svc-timeline-row.is-right .dawki-csd-svc-card {
    grid-column: 2;
    margin-left: 10px;
    margin-right: 0;
  }
}

/* Hover preview — image appears in the OPPOSITE grid column when the row
   is hovered. The card sits in column 1 (is-left) or column 3 (is-right),
   so the preview takes the empty 1fr column on the other side of the spine. */
.dawki-csd-svc-timeline-preview {
  position: relative;
  align-self: stretch;
  min-height: 220px;
  border-radius: 18px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0.9) translateX(0);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  box-shadow: 0 24px 60px -18px rgba(8, 18, 40, 0.45);
  outline: 2px solid rgba(79, 124, 255, 0.35);
  outline-offset: -2px;
}

.dawki-csd-svc-timeline-row.is-left .dawki-csd-svc-timeline-preview {
  grid-column: 3;
  margin-left: 18px;
  transform-origin: left center;
}
.dawki-csd-svc-timeline-row.is-right .dawki-csd-svc-timeline-preview {
  grid-column: 1;
  margin-right: 18px;
  transform-origin: right center;
}

.dawki-csd-svc-timeline-row:hover .dawki-csd-svc-timeline-preview,
.dawki-csd-svc-timeline-row:focus-within .dawki-csd-svc-timeline-preview {
  opacity: 1;
  transform: scale(1) translateX(0);
}

/* On mobile the row collapses to a single text column — no room for an
   opposite-side preview, so hide it. */
@media (max-width: 991px) {
  .dawki-csd-svc-timeline-preview { display: none; }
}
/* === END CSD Services Timeline === */

/* ============================================================================
 * Enterprise — Integration Hub (orbital logos around glowing core)
 * ============================================================================ */
.dawki-ent-hub {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 55%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-ent-hub { padding: 70px 20px; } }

.dawki-ent-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(79, 124, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 124, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.dawki-ent-hub > .container { position: relative; z-index: 2; }

.dawki-ent-hub-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
}

.dawki-ent-hub-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 124, 255, 0.1);
  border: 1px solid rgba(79, 124, 255, 0.3);
  color: #93c5fd;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-ent-hub-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4f7cff; box-shadow: 0 0 8px #4f7cff;
}

.dawki-ent-hub-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.18;
}
.dawki-ent-hub-title span {
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-ent-hub-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto;
}

/* Stage */
.dawki-ent-hub-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.dawki-ent-hub-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dawki-ent-hub-line {
  animation: dawki-ent-hub-march 3.4s linear infinite;
  filter: drop-shadow(0 0 2px rgba(79, 124, 255, 0.6));
}
@keyframes dawki-ent-hub-march {
  to { stroke-dashoffset: -6; }
}

/* Pulse rings */
.dawki-ent-hub-ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 1.5px solid rgba(79, 124, 255, 0.45);
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
  opacity: 0;
  animation: dawki-ent-hub-ripple 4.2s ease-out infinite;
}
.dawki-ent-hub-ripple:nth-of-type(2) { animation-delay: 1.4s; border-color: rgba(168, 85, 247, 0.4); }
.dawki-ent-hub-ripple:nth-of-type(3) { animation-delay: 2.8s; border-color: rgba(236, 72, 153, 0.35); }
@keyframes dawki-ent-hub-ripple {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* Center core */
.dawki-ent-hub-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff 0%, #a855f7 50%, #ec4899 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 60px rgba(79, 124, 255, 0.55),
    0 0 110px rgba(168, 85, 247, 0.35),
    inset 0 0 30px rgba(255, 255, 255, 0.18);
  z-index: 3;
  animation: dawki-ent-hub-core-glow 3.5s ease-in-out infinite alternate;
}
@keyframes dawki-ent-hub-core-glow {
  from { box-shadow: 0 0 50px rgba(79, 124, 255, 0.45), 0 0 90px rgba(168, 85, 247, 0.30), inset 0 0 30px rgba(255, 255, 255, 0.15); }
  to   { box-shadow: 0 0 80px rgba(79, 124, 255, 0.65), 0 0 140px rgba(168, 85, 247, 0.45), inset 0 0 35px rgba(255, 255, 255, 0.22); }
}
.dawki-ent-hub-core-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(2, 6, 15, 0.55);
  color: #ffffff;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.dawki-ent-hub-core-label {
  position: absolute;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  background: rgba(2, 6, 15, 0.85);
  border: 1px solid rgba(79, 124, 255, 0.35);
  padding: 6px 14px;
  border-radius: 999px;
}

/* Orbit logos */
.dawki-ent-hub-orbit {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  z-index: 4;
  transition: box-shadow 0.4s ease;
}
.dawki-ent-hub-orbit img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.dawki-ent-hub-orbit-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.55) 0%, transparent 70%);
  z-index: -1;
  animation: dawki-ent-hub-orbit-glow 3.2s ease-in-out infinite alternate;
}
@keyframes dawki-ent-hub-orbit-glow {
  from { opacity: 0.25; transform: scale(0.9); }
  to   { opacity: 0.7;  transform: scale(1.18); }
}
.dawki-ent-hub-orbit:hover {
  box-shadow:
    0 20px 50px rgba(79, 124, 255, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}
.dawki-ent-hub-orbit-label {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: rgba(226, 232, 240, 0.85);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.4px;
}

/* Tag row */
.dawki-ent-hub-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 76px;
}
.dawki-ent-hub-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(79, 124, 255, 0.22);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.85);
  font-size: 13px;
  font-weight: 500;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.dawki-ent-hub-tag span {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  box-shadow: 0 0 10px rgba(79, 124, 255, 0.6);
}
.dawki-ent-hub-tag:hover {
  border-color: rgba(168, 85, 247, 0.5);
  transform: translateY(-2px);
}

@media (max-width: 575px) {
  .dawki-ent-hub-stage { max-width: 380px; }
  .dawki-ent-hub-orbit { width: 56px; height: 56px; }
  .dawki-ent-hub-orbit img { width: 30px; height: 30px; }
  .dawki-ent-hub-orbit-label { font-size: 9px; bottom: -20px; }
  .dawki-ent-hub-core { width: 110px; height: 110px; }
  .dawki-ent-hub-core-inner { width: 70px; height: 70px; }
  .dawki-ent-hub-core-inner svg { width: 30px; height: 30px; }
  .dawki-ent-hub-core-label { font-size: 10px; padding: 5px 12px; }
}
/* === END Enterprise Integration Hub === */

/* ============================================================================
 * Enterprise — Outcomes Dashboard (animated metric cards)
 * ============================================================================ */
.dawki-ent-out {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0e1a35 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-ent-out { padding: 70px 20px; } }

.dawki-ent-out::before {
  content: "";
  position: absolute;
  top: 5%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 420px;
  background: radial-gradient(ellipse, rgba(79, 124, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-ent-out::after {
  content: "";
  position: absolute;
  bottom: 0; right: -10%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-ent-out > .container { position: relative; z-index: 2; }

.dawki-ent-out-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.dawki-ent-out-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-ent-out-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-ent-out-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-ent-out-title span {
  background: linear-gradient(90deg, #06b6d4, #4f7cff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-ent-out-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-ent-out-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1100px) { .dawki-ent-out-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .dawki-ent-out-grid { grid-template-columns: 1fr; } }

.dawki-ent-out-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 30px 26px 28px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.dawki-ent-out-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  opacity: 0.7;
}
.dawki-ent-out-card:hover {
  transform: translateY(-8px);
  border-color: rgba(79, 124, 255, 0.4);
  box-shadow: 0 22px 50px rgba(79, 124, 255, 0.18);
}

/* Visualization slots — fixed height for grid alignment */
.dawki-ent-out-gauge,
.dawki-ent-out-line {
  width: 100%;
  height: 90px;
  display: block;
  margin-bottom: 8px;
}

.dawki-ent-out-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 90px;
  margin-bottom: 14px;
  padding: 0 4px;
}
.dawki-ent-out-bar {
  flex: 1;
  height: 100%;
  background: linear-gradient(180deg, #06b6d4 0%, #4f7cff 50%, #a855f7 100%);
  border-radius: 4px 4px 2px 2px;
  transform-origin: bottom;
  box-shadow: 0 0 12px rgba(79, 124, 255, 0.35);
}

.dawki-ent-out-orbit {
  position: relative;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f7cff;
  margin-bottom: 14px;
}
.dawki-ent-out-orbit::before,
.dawki-ent-out-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(79, 124, 255, 0.45);
  top: 50%;
  left: 50%;
}
.dawki-ent-out-orbit::before {
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  animation: dawki-ent-out-spin 14s linear infinite;
}
.dawki-ent-out-orbit::after {
  width: 116px; height: 116px;
  margin: -58px 0 0 -58px;
  border-color: rgba(168, 85, 247, 0.32);
  animation: dawki-ent-out-spin 22s linear infinite reverse;
}
@keyframes dawki-ent-out-spin {
  to { transform: rotate(360deg); }
}
.dawki-ent-out-orbit > span {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  box-shadow: 0 0 12px rgba(79, 124, 255, 0.7);
}
.dawki-ent-out-orbit > span:nth-of-type(1) { top: 6px; left: 50%; transform: translateX(-50%); }
.dawki-ent-out-orbit > span:nth-of-type(2) { bottom: 14px; left: 28%; }
.dawki-ent-out-orbit > span:nth-of-type(3) { top: 28%; right: 24%; background: linear-gradient(135deg, #ec4899, #a855f7); }
.dawki-ent-out-orbit > svg {
  position: relative;
  z-index: 2;
}

/* Value text */
.dawki-ent-out-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
}
.dawki-ent-out-num {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-ent-out-suffix {
  font-size: 24px;
  font-weight: 700;
  color: #a855f7;
}
.dawki-ent-out-label {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.dawki-ent-out-desc {
  color: rgba(226, 232, 240, 0.65);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
/* === END Enterprise Outcomes === */

/* ============================================================================
 * SaaS — Growth Funnel (tier widths + connectors + flow drops)
 * ============================================================================ */
.dawki-saas-funnel {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0e1a35 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-saas-funnel { padding: 70px 20px; } }

.dawki-saas-funnel::before {
  content: "";
  position: absolute;
  top: 8%; left: 50%;
  transform: translateX(-50%);
  width: 720px; height: 360px;
  background: radial-gradient(ellipse, rgba(34, 197, 94, 0.16) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-saas-funnel::after {
  content: "";
  position: absolute;
  bottom: 0; right: -10%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-saas-funnel > .container { position: relative; z-index: 2; }

.dawki-saas-funnel-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.dawki-saas-funnel-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: #86efac;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-saas-funnel-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
}
.dawki-saas-funnel-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-saas-funnel-title span {
  background: linear-gradient(90deg, #22c55e, #06b6d4, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-saas-funnel-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-saas-funnel-stages {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.dawki-saas-funnel-stage {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 22px 30px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.dawki-saas-funnel-stage:nth-child(1) { width: 100%; }
.dawki-saas-funnel-stage:nth-child(2) { width: 84%; }
.dawki-saas-funnel-stage:nth-child(3) { width: 68%; }
.dawki-saas-funnel-stage:nth-child(4) { width: 54%; }
.dawki-saas-funnel-stage:nth-child(5) { width: 42%; }

.dawki-saas-funnel-stage:hover {
  transform: scale(1.02);
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 18px 45px rgba(34, 197, 94, 0.18);
}

/* Per-stage progressive gradient on left edge */
.dawki-saas-funnel-stage::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(180deg, #22c55e, #06b6d4, #a855f7);
  border-radius: 16px 0 0 16px;
}

.dawki-saas-funnel-stage-label {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.1px;
}
.dawki-saas-funnel-stage-sublabel {
  color: rgba(226, 232, 240, 0.6);
  font-size: 12.5px;
  margin-top: 2px;
}

.dawki-saas-funnel-stage-count {
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-align: center;
  white-space: nowrap;
}
.dawki-saas-funnel-stage-count-suffix {
  font-size: 22px;
  font-weight: 700;
  -webkit-text-fill-color: initial;
  background: none;
  color: #22c55e;
  margin-left: 2px;
}

.dawki-saas-funnel-stage-pct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  justify-self: end;
}
.dawki-saas-funnel-stage-pct svg { width: 13px; height: 13px; }

/* Connectors between stages — soft glowing lines */
.dawki-saas-funnel-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.55), rgba(168, 85, 247, 0.18));
  border-radius: 999px;
}

@media (max-width: 767px) {
  .dawki-saas-funnel-stage {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 18px 20px;
  }
  .dawki-saas-funnel-stage-pct { grid-column: 2; }
  .dawki-saas-funnel-stage-count { grid-column: 1 / -1; text-align: left; font-size: 26px; }
  .dawki-saas-funnel-stage:nth-child(2) { width: 92%; }
  .dawki-saas-funnel-stage:nth-child(3) { width: 84%; }
  .dawki-saas-funnel-stage:nth-child(4) { width: 76%; }
  .dawki-saas-funnel-stage:nth-child(5) { width: 68%; }
}
/* === END SaaS Funnel === */

/* ============================================================================
 * SaaS — Architecture Stack (vertical layered diagram + flowing data packets)
 * ============================================================================ */
.dawki-saas-stack {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-saas-stack { padding: 70px 20px; } }

.dawki-saas-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.dawki-saas-stack > .container { position: relative; z-index: 2; }

.dawki-saas-stack-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.dawki-saas-stack-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-saas-stack-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-saas-stack-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-saas-stack-title span {
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-saas-stack-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-saas-stack-frame {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.dawki-saas-stack-layer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  z-index: 2;
}

.dawki-saas-stack-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, var(--lyr-color-a, #4f7cff), var(--lyr-color-b, #a855f7));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.dawki-saas-stack-layer:hover {
  transform: translateX(6px);
  box-shadow: 0 18px 45px rgba(79, 124, 255, 0.16);
}
.dawki-saas-stack-layer:hover::before { opacity: 1; }

.dawki-saas-stack-layer-num {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--lyr-color-a), var(--lyr-color-b));
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 0 24px var(--lyr-glow, rgba(79, 124, 255, 0.5));
}

.dawki-saas-stack-layer-content {
  flex: 1;
  min-width: 0;
}
.dawki-saas-stack-layer-name {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.1px;
}
.dawki-saas-stack-layer-desc {
  color: rgba(226, 232, 240, 0.7);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}

.dawki-saas-stack-layer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
  max-width: 280px;
  justify-content: flex-end;
}
.dawki-saas-stack-layer-tag {
  font-size: 11px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Vertical connector + flowing data packet */
.dawki-saas-stack-connector {
  position: absolute;
  left: 50px; /* aligns under the num badge */
  width: 2px;
  background: linear-gradient(180deg, rgba(79, 124, 255, 0.4), rgba(168, 85, 247, 0.4), rgba(236, 72, 153, 0.3));
  border-radius: 999px;
  z-index: 1;
}
.dawki-saas-stack-frame {
  position: relative;
}
.dawki-saas-stack-frame > .dawki-saas-stack-connector {
  top: 56px;
  bottom: 56px;
}

/* Data packet that travels top-to-bottom continuously */
.dawki-saas-stack-packet {
  position: absolute;
  left: 50px;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #4f7cff);
  box-shadow:
    0 0 16px rgba(79, 124, 255, 0.85),
    0 0 32px rgba(168, 85, 247, 0.5);
  animation: dawki-saas-stack-flow 4.2s ease-in-out infinite;
  z-index: 3;
}
.dawki-saas-stack-packet--b { animation-delay: 1.4s; }
.dawki-saas-stack-packet--c { animation-delay: 2.8s; }

@keyframes dawki-saas-stack-flow {
  0%   { top: 0; opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  10%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; transform: translate(-50%, 0) scale(0.6); }
}

@media (max-width: 767px) {
  .dawki-saas-stack-layer { flex-wrap: wrap; padding: 18px 22px; gap: 16px; }
  .dawki-saas-stack-layer-tags { max-width: 100%; justify-content: flex-start; }
  .dawki-saas-stack-connector,
  .dawki-saas-stack-packet { left: 38px; }
  .dawki-saas-stack-layer-num { width: 44px; height: 44px; font-size: 13px; }
}
/* === END SaaS Architecture Stack === */

/* ============================================================================
 * UI/UX — Design Process Journey (horizontal flow with traveling orb)
 * ============================================================================ */
.dawki-uxd-journey {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #0a0817 0%, #15102b 50%, #0a0817 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-uxd-journey { padding: 70px 20px; } }

.dawki-uxd-journey::before {
  content: "";
  position: absolute;
  top: 8%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(236, 72, 153, 0.16) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-uxd-journey::after {
  content: "";
  position: absolute;
  bottom: 0; left: -6%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-uxd-journey > .container { position: relative; z-index: 2; }

.dawki-uxd-journey-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 70px;
}
.dawki-uxd-journey-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(236, 72, 153, 0.10);
  border: 1px solid rgba(236, 72, 153, 0.30);
  color: #fbcfe8;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-uxd-journey-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ec4899; box-shadow: 0 0 8px #ec4899;
}
.dawki-uxd-journey-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-uxd-journey-title span {
  background: linear-gradient(90deg, #ec4899, #a855f7, #4f7cff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-uxd-journey-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

/* Path/track */
.dawki-uxd-journey-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 991px) { .dawki-uxd-journey-path { grid-template-columns: 1fr; gap: 36px; } }

/* Connecting line behind nodes (desktop horizontal) */
.dawki-uxd-journey-track {
  position: absolute;
  top: 36px; /* matches half of node height */
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(236, 72, 153, 0.4) 0%,
    rgba(168, 85, 247, 0.5) 50%,
    rgba(79, 124, 255, 0.4) 100%);
  border-radius: 999px;
  z-index: 1;
}
@media (max-width: 991px) { .dawki-uxd-journey-track { display: none; } }

/* Animated traveling orb */
.dawki-uxd-journey-orb {
  position: absolute;
  top: 28px;
  left: 10%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #a855f7);
  box-shadow:
    0 0 18px rgba(236, 72, 153, 0.85),
    0 0 36px rgba(168, 85, 247, 0.5);
  z-index: 3;
  animation: dawki-uxd-journey-orb-fly 6s ease-in-out infinite;
}
@keyframes dawki-uxd-journey-orb-fly {
  0%, 100% { left: 10%; }
  50%      { left: calc(90% - 18px); }
}
@media (max-width: 991px) { .dawki-uxd-journey-orb { display: none; } }

/* Stage / station */
.dawki-uxd-journey-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
}

.dawki-uxd-journey-node {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--node-a, #ec4899), var(--node-b, #a855f7));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  position: relative;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.95), 0 0 30px var(--node-glow, rgba(236, 72, 153, 0.55));
  margin-bottom: 18px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dawki-uxd-journey-stage:hover .dawki-uxd-journey-node { transform: scale(1.08); }

.dawki-uxd-journey-node svg { width: 30px; height: 30px; }

.dawki-uxd-journey-node-num {
  position: absolute;
  top: -6px; right: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(15, 23, 42, 0.95);
}

.dawki-uxd-journey-stage-name {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.1px;
}

.dawki-uxd-journey-stage-output {
  color: rgba(226, 232, 240, 0.65);
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 180px;
}

.dawki-uxd-journey-stage-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--tag-color, #fbcfe8);
  background: var(--tag-bg, rgba(236, 72, 153, 0.10));
  border: 1px solid var(--tag-border, rgba(236, 72, 153, 0.28));
  border-radius: 999px;
}
/* === END UI/UX Journey === */

/* ============================================================================
 * UI/UX — Design System Showcase (tokens + typography + components)
 * ============================================================================ */
.dawki-uxd-tokens {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0e0a1c 0%, #050313 60%, #02010a 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-uxd-tokens { padding: 70px 20px; } }

.dawki-uxd-tokens > .container { position: relative; z-index: 2; }

.dawki-uxd-tokens-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.dawki-uxd-tokens-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-uxd-tokens-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-uxd-tokens-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-uxd-tokens-title span {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-uxd-tokens-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-uxd-tokens-frame {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.dawki-uxd-tokens-row {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 24px 26px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.dawki-uxd-tokens-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.dawki-uxd-tokens-row-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
}
.dawki-uxd-tokens-row-label-text {
  color: rgba(226, 232, 240, 0.75);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Color swatches row */
.dawki-uxd-tokens-colors {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
}
@media (max-width: 991px) { .dawki-uxd-tokens-colors { grid-template-columns: repeat(4, 1fr); } }

.dawki-uxd-tokens-color {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  cursor: default;
  background: var(--swatch);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dawki-uxd-tokens-color:hover { transform: translateY(-6px) scale(1.04); }
.dawki-uxd-tokens-color::after {
  content: attr(data-hex);
  position: absolute;
  bottom: 8px; left: 8px; right: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  font-family: ui-monospace, "Courier New", monospace;
  text-align: center;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* Typography row */
.dawki-uxd-tokens-typo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dawki-uxd-tokens-typo-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.dawki-uxd-tokens-typo-row:last-child { border-bottom: none; }
.dawki-uxd-tokens-typo-text {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.5px;
  flex: 1;
  min-width: 0;
}
.dawki-uxd-tokens-typo-meta {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}
.dawki-uxd-tokens-typo-meta-item {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 11.5px;
  color: rgba(226, 232, 240, 0.65);
}
.dawki-uxd-tokens-typo-meta-item strong {
  color: #d8b4fe;
  font-weight: 700;
}

/* Components row */
.dawki-uxd-tokens-components {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 767px) { .dawki-uxd-tokens-components { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dawki-uxd-tokens-components { grid-template-columns: 1fr; } }

.dawki-uxd-tokens-comp {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 130px;
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.dawki-uxd-tokens-comp:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 85, 247, 0.4);
}
.dawki-uxd-tokens-comp-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
  font-family: ui-monospace, "Courier New", monospace;
}

/* Demo button */
.dawki-uxd-tokens-comp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: default;
  box-shadow: 0 8px 20px rgba(168, 85, 247, 0.35);
}

/* Demo badge */
.dawki-uxd-tokens-comp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.dawki-uxd-tokens-comp-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

/* Demo input */
.dawki-uxd-tokens-comp-input {
  width: 100%;
  max-width: 180px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  color: rgba(226, 232, 240, 0.85);
  font-size: 12.5px;
  text-align: left;
  font-family: inherit;
}

/* Demo card */
.dawki-uxd-tokens-comp-card {
  width: 100%;
  max-width: 180px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dawki-uxd-tokens-comp-card-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ec4899);
  flex-shrink: 0;
}
.dawki-uxd-tokens-comp-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.dawki-uxd-tokens-comp-card-line {
  height: 6px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}
.dawki-uxd-tokens-comp-card-line--short { width: 60%; height: 5px; opacity: 0.6; }
/* === END UI/UX Tokens === */

/* ============================================================================
 * Marketing — Channel Mix Donut (animated SVG donut + legend)
 * ============================================================================ */
.dawki-mkt-donut {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #1c0613 0%, #150a25 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-mkt-donut { padding: 70px 20px; } }

.dawki-mkt-donut::before {
  content: "";
  position: absolute;
  top: 5%; left: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-mkt-donut::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-mkt-donut > .container { position: relative; z-index: 2; }

.dawki-mkt-donut-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.dawki-mkt-donut-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(249, 115, 22, 0.10);
  border: 1px solid rgba(249, 115, 22, 0.30);
  color: #fed7aa;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-mkt-donut-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f97316; box-shadow: 0 0 8px #f97316;
}
.dawki-mkt-donut-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-mkt-donut-title span {
  background: linear-gradient(90deg, #f97316, #ec4899, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-mkt-donut-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-mkt-donut-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: center;
  gap: 56px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .dawki-mkt-donut-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Donut canvas */
.dawki-mkt-donut-canvas {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.dawki-mkt-donut-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.18));
}

.dawki-mkt-donut-center {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 6, 15, 0.95) 0%, rgba(2, 6, 15, 0.85) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.05),
    0 0 40px rgba(168, 85, 247, 0.18);
}
.dawki-mkt-donut-center-eyebrow {
  color: rgba(226, 232, 240, 0.65);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.dawki-mkt-donut-center-value {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #ffffff 0%, #fed7aa 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}
.dawki-mkt-donut-center-label {
  color: rgba(226, 232, 240, 0.55);
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

/* Legend list */
.dawki-mkt-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dawki-mkt-donut-legend-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  transition: border-color 0.4s ease, transform 0.4s ease, background 0.4s ease;
}
.dawki-mkt-donut-legend-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(249, 115, 22, 0.3);
  transform: translateX(4px);
}
.dawki-mkt-donut-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--seg-color);
  box-shadow: 0 0 10px var(--seg-color);
}
.dawki-mkt-donut-legend-content { min-width: 0; }
.dawki-mkt-donut-legend-name {
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
}
.dawki-mkt-donut-legend-desc {
  color: rgba(226, 232, 240, 0.62);
  font-size: 12px;
  margin-top: 2px;
}
.dawki-mkt-donut-legend-pct {
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--seg-color), #ffffff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* === END Marketing Donut === */

/* ============================================================================
 * Marketing — Customer Journey Curve (wavy path through stages)
 * ============================================================================ */
.dawki-mkt-journey {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #150a25 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-mkt-journey { padding: 70px 20px; } }

.dawki-mkt-journey > .container { position: relative; z-index: 2; }

.dawki-mkt-journey-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.dawki-mkt-journey-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(236, 72, 153, 0.10);
  border: 1px solid rgba(236, 72, 153, 0.30);
  color: #fbcfe8;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-mkt-journey-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ec4899; box-shadow: 0 0 8px #ec4899;
}
.dawki-mkt-journey-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-mkt-journey-title span {
  background: linear-gradient(90deg, #ec4899, #a855f7, #4f7cff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-mkt-journey-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-mkt-journey-canvas {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.dawki-mkt-journey-curve {
  width: 100%;
  height: 220px;
  display: block;
}
@media (max-width: 991px) { .dawki-mkt-journey-curve { display: none; } }

.dawki-mkt-journey-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: -90px;
  position: relative;
  z-index: 2;
}
@media (max-width: 991px) {
  .dawki-mkt-journey-stages { grid-template-columns: 1fr; gap: 32px; margin-top: 0; }
}

.dawki-mkt-journey-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10px;
}

.dawki-mkt-journey-bubble {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--st-a, #ec4899), var(--st-b, #a855f7));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: 18px;
  box-shadow:
    0 0 0 4px rgba(2, 6, 15, 1),
    0 0 0 6px rgba(255, 255, 255, 0.06),
    0 0 28px var(--st-glow, rgba(236, 72, 153, 0.55));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dawki-mkt-journey-stage:hover .dawki-mkt-journey-bubble {
  transform: scale(1.1) rotate(-6deg);
}
.dawki-mkt-journey-bubble svg { width: 28px; height: 28px; }

.dawki-mkt-journey-stage-name {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.1px;
}
.dawki-mkt-journey-stage-metric {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--st-b, #d8b4fe);
  background: var(--st-bg, rgba(168, 85, 247, 0.10));
  border: 1px solid var(--st-border, rgba(168, 85, 247, 0.30));
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.dawki-mkt-journey-stage-desc {
  color: rgba(226, 232, 240, 0.6);
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 180px;
}
/* === END Marketing Journey === */

/* ============================================================================
 * SEO — SERP Mockup with #1 rank highlight (Google-style search results)
 * ============================================================================ */
.dawki-seo-serp {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0e1a35 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-seo-serp { padding: 70px 20px; } }

.dawki-seo-serp::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(6, 182, 212, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-seo-serp > .container { position: relative; z-index: 2; }

.dawki-seo-serp-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.dawki-seo-serp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 182, 212, 0.10);
  border: 1px solid rgba(6, 182, 212, 0.30);
  color: #67e8f9;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-seo-serp-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #06b6d4; box-shadow: 0 0 8px #06b6d4;
}
.dawki-seo-serp-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-seo-serp-title span {
  background: linear-gradient(90deg, #06b6d4, #4f7cff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-seo-serp-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

/* Browser frame */
.dawki-seo-serp-frame {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dawki-seo-serp-frame::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.55), rgba(79, 124, 255, 0.5), rgba(168, 85, 247, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.dawki-seo-serp-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #f1f5f9;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.dawki-seo-serp-chrome-dots {
  display: flex;
  gap: 6px;
}
.dawki-seo-serp-chrome-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.18);
}
.dawki-seo-serp-chrome-dots span:nth-child(1) { background: #ff605c; }
.dawki-seo-serp-chrome-dots span:nth-child(2) { background: #ffbd44; }
.dawki-seo-serp-chrome-dots span:nth-child(3) { background: #00ca4e; }
.dawki-seo-serp-chrome-url {
  flex: 1;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  color: #475569;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-seo-serp-chrome-url-protocol {
  color: #94a3b8;
}

.dawki-seo-serp-body {
  padding: 24px 30px 30px;
}

.dawki-seo-serp-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 24px;
  padding: 10px 18px;
  margin-bottom: 24px;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
  max-width: 580px;
}
.dawki-seo-serp-search-bar svg { color: #94a3b8; flex-shrink: 0; }
.dawki-seo-serp-search-bar-text {
  color: #0f172a;
  font-size: 14px;
  flex: 1;
}
.dawki-seo-serp-search-bar-cursor {
  display: inline-block;
  width: 1.5px;
  height: 16px;
  background: #4f7cff;
  margin-left: 2px;
  animation: dawki-seo-serp-blink 1s steps(2) infinite;
  vertical-align: middle;
}
@keyframes dawki-seo-serp-blink {
  to { opacity: 0; }
}

.dawki-seo-serp-meta {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 18px;
}

.dawki-seo-serp-results {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dawki-seo-serp-result {
  position: relative;
  padding: 14px 16px;
  border-radius: 10px;
  transition: background 0.4s ease;
}
.dawki-seo-serp-result:hover {
  background: rgba(15, 23, 42, 0.03);
}

.dawki-seo-serp-result-url {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.dawki-seo-serp-result-url-favicon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fav-bg, #cbd5e1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
  flex-shrink: 0;
}
.dawki-seo-serp-result-url-text {
  color: #475569;
}
.dawki-seo-serp-result-title {
  color: #1a0dab;
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 4px;
  line-height: 1.35;
}
.dawki-seo-serp-result-desc {
  color: #4d5156;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}

/* The featured (#1) result — yours */
.dawki-seo-serp-result--featured {
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.10) 0%, rgba(168, 85, 247, 0.06) 100%);
  border: 1px solid rgba(79, 124, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.2), 0 18px 40px rgba(79, 124, 255, 0.18);
}
.dawki-seo-serp-result--featured .dawki-seo-serp-result-title {
  color: #4f7cff;
  font-weight: 700;
}
.dawki-seo-serp-result-rank-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #06b6d4, #4f7cff, #a855f7);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dawki-seo-serp-result-rank-badge svg { width: 12px; height: 12px; }

@media (max-width: 575px) {
  .dawki-seo-serp-body { padding: 18px 18px 22px; }
  .dawki-seo-serp-result-title { font-size: 15px; }
  .dawki-seo-serp-result-desc { font-size: 12.5px; }
}
/* === END SEO SERP === */

/* ============================================================================
 * SEO — Organic Traffic Growth Chart (animated area + milestone markers)
 * ============================================================================ */
.dawki-seo-growth {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-seo-growth { padding: 70px 20px; } }

.dawki-seo-growth::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34, 197, 94, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 197, 94, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
}

.dawki-seo-growth > .container { position: relative; z-index: 2; }

.dawki-seo-growth-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.dawki-seo-growth-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: #86efac;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-seo-growth-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
}
.dawki-seo-growth-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-seo-growth-title span {
  background: linear-gradient(90deg, #22c55e, #06b6d4, #4f7cff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-seo-growth-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

/* Headline metric */
.dawki-seo-growth-headline {
  text-align: center;
  margin: 0 auto 38px;
  max-width: 1040px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 18px;
}
.dawki-seo-growth-headline-value {
  font-size: clamp(48px, 8vw, 92px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 1;
  background: linear-gradient(135deg, #22c55e 0%, #06b6d4 50%, #4f7cff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.dawki-seo-growth-headline-label {
  color: rgba(226, 232, 240, 0.7);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Chart frame */
.dawki-seo-growth-frame {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px 22px 22px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.dawki-seo-growth-svg {
  width: 100%;
  height: 320px;
  display: block;
}
@media (max-width: 768px) { .dawki-seo-growth-svg { height: 240px; } }

.dawki-seo-growth-grid line {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.dawki-seo-growth-axis-label {
  fill: rgba(226, 232, 240, 0.55);
  font-size: 10.5px;
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.5px;
}

.dawki-seo-growth-area {
  fill: url(#dawkiSeoAreaGrad);
  opacity: 0.85;
}

.dawki-seo-growth-line {
  fill: none;
  stroke: url(#dawkiSeoLineGrad);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.55));
}

.dawki-seo-growth-milestone-line {
  stroke: rgba(34, 197, 94, 0.4);
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
}

.dawki-seo-growth-milestone-dot {
  fill: #ffffff;
  filter: drop-shadow(0 0 8px #22c55e);
}

.dawki-seo-growth-milestone-label {
  fill: rgba(226, 232, 240, 0.92);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
}

.dawki-seo-growth-milestone-sub {
  fill: rgba(226, 232, 240, 0.6);
  font-size: 9.5px;
  font-family: ui-monospace, "Courier New", monospace;
}

/* Bottom caption strip */
.dawki-seo-growth-captions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 30px;
}
@media (max-width: 767px) { .dawki-seo-growth-captions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dawki-seo-growth-captions { grid-template-columns: 1fr; } }

.dawki-seo-growth-caption {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.dawki-seo-growth-caption:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 197, 94, 0.4);
}
.dawki-seo-growth-caption-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cap-color, #86efac);
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-seo-growth-caption-value {
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}
.dawki-seo-growth-caption-text {
  color: rgba(226, 232, 240, 0.62);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}
/* === END SEO Growth === */

/* ============================================================================
 * Custom Software — Code Editor Mockup (VS Code-style with animated code)
 * ============================================================================ */
.dawki-csw-code {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-csw-code { padding: 70px 20px; } }

.dawki-csw-code::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(79, 124, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-csw-code > .container { position: relative; z-index: 2; }

.dawki-csw-code-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.dawki-csw-code-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 124, 255, 0.10);
  border: 1px solid rgba(79, 124, 255, 0.30);
  color: #93c5fd;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-csw-code-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4f7cff; box-shadow: 0 0 8px #4f7cff;
}
.dawki-csw-code-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-csw-code-title span {
  background: linear-gradient(90deg, #4f7cff, #06b6d4, #22c55e);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-csw-code-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

/* Editor window */
.dawki-csw-code-window {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background: #0d1117;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dawki-csw-code-window::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.5), rgba(168, 85, 247, 0.4), rgba(34, 197, 94, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.dawki-csw-code-titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #0a0e15;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.dawki-csw-code-dots {
  display: flex; gap: 6px;
}
.dawki-csw-code-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.dawki-csw-code-dots span:nth-child(1) { background: #ff605c; }
.dawki-csw-code-dots span:nth-child(2) { background: #ffbd44; }
.dawki-csw-code-dots span:nth-child(3) { background: #00ca4e; }
.dawki-csw-code-titlebar-title {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.5);
  flex: 1;
  text-align: center;
}

.dawki-csw-code-tabs {
  display: flex;
  background: #0a0e15;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.dawki-csw-code-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  cursor: default;
  transition: color 0.3s ease, background 0.3s ease;
}
.dawki-csw-code-tab--active {
  background: #0d1117;
  color: #ffffff;
  position: relative;
}
.dawki-csw-code-tab--active::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #4f7cff, #06b6d4);
}
.dawki-csw-code-tab svg { width: 14px; height: 14px; }
.dawki-csw-code-tab-close {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0.4;
}

.dawki-csw-code-body {
  display: grid;
  grid-template-columns: 200px 1fr;
}
@media (max-width: 767px) {
  .dawki-csw-code-body { grid-template-columns: 1fr; }
  .dawki-csw-code-sidebar { display: none; }
}

.dawki-csw-code-sidebar {
  background: #0a0e15;
  padding: 14px 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 12px;
}
.dawki-csw-code-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dawki-csw-code-tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  color: rgba(226, 232, 240, 0.7);
  cursor: default;
}
.dawki-csw-code-tree-item--folder { color: #fbbf24; }
.dawki-csw-code-tree-item--active {
  background: rgba(79, 124, 255, 0.15);
  color: #ffffff;
}
.dawki-csw-code-tree-item--child { padding-left: 22px; }
.dawki-csw-code-tree-item svg { width: 12px; height: 12px; flex-shrink: 0; }

.dawki-csw-code-editor {
  padding: 18px 22px;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.7;
  background: #0d1117;
  min-height: 320px;
}
.dawki-csw-code-line {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  white-space: pre;
}
.dawki-csw-code-line-num {
  color: rgba(226, 232, 240, 0.25);
  text-align: right;
  user-select: none;
}
.dawki-csw-code-line-content {
  color: rgba(226, 232, 240, 0.85);
  white-space: pre;
}

/* Syntax highlight */
.csw-kw   { color: #ff7b72; }              /* keyword (export, function, return) */
.csw-fn   { color: #d2a8ff; }              /* function name */
.csw-str  { color: #a5d6ff; }              /* string */
.csw-num  { color: #79c0ff; }              /* number */
.csw-cmt  { color: #8b949e; font-style: italic; } /* comment */
.csw-tag  { color: #7ee787; }              /* JSX tag */
.csw-prop { color: #79c0ff; }              /* prop name */
.csw-var  { color: #ffa657; }              /* variable */
.csw-punc { color: rgba(226, 232, 240, 0.6); }
.csw-cursor {
  display: inline-block;
  width: 7px;
  height: 16px;
  background: #4f7cff;
  margin-left: 2px;
  vertical-align: middle;
  animation: csw-blink 1s steps(2) infinite;
}
@keyframes csw-blink { to { opacity: 0; } }

.dawki-csw-code-statusbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 18px;
  background: linear-gradient(90deg, #4f7cff 0%, #06b6d4 100%);
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 11px;
  color: #ffffff;
}
.dawki-csw-code-statusbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dawki-csw-code-statusbar-item svg { width: 12px; height: 12px; }
.dawki-csw-code-statusbar-spacer { flex: 1; }
/* === END Custom Software Code Editor === */

/* ============================================================================
 * Custom Software — Sprint Kanban Board (4 columns + ticket cards)
 * ============================================================================ */
.dawki-csw-sprint {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-csw-sprint { padding: 70px 20px; } }

.dawki-csw-sprint::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
}

.dawki-csw-sprint > .container { position: relative; z-index: 2; }

.dawki-csw-sprint-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.dawki-csw-sprint-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-csw-sprint-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-csw-sprint-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-csw-sprint-title span {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-csw-sprint-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-csw-sprint-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 991px) { .dawki-csw-sprint-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-csw-sprint-board { grid-template-columns: 1fr; } }

.dawki-csw-sprint-column {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.dawki-csw-sprint-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.dawki-csw-sprint-column-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.dawki-csw-sprint-column-name-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--col-color, #4f7cff);
  box-shadow: 0 0 10px var(--col-color, #4f7cff);
}
.dawki-csw-sprint-column-count {
  color: rgba(226, 232, 240, 0.6);
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.dawki-csw-sprint-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 14px;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  cursor: default;
}
.dawki-csw-sprint-card:hover {
  border-color: rgba(168, 85, 247, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(168, 85, 247, 0.18);
}
.dawki-csw-sprint-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.dawki-csw-sprint-card-key {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 11px;
  color: rgba(226, 232, 240, 0.5);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dawki-csw-sprint-card-priority {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pri-color, #fbbf24);
  margin-left: auto;
}
.dawki-csw-sprint-card-priority-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pri-color, #fbbf24);
  box-shadow: 0 0 6px var(--pri-color, #fbbf24);
}
.dawki-csw-sprint-card-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 14px;
}
.dawki-csw-sprint-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dawki-csw-sprint-card-points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(79, 124, 255, 0.12);
  border: 1px solid rgba(79, 124, 255, 0.25);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.dawki-csw-sprint-card-assignee {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--av-a, #4f7cff), var(--av-b, #a855f7));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border: 2px solid rgba(2, 6, 15, 1);
}
/* === END Custom Software Sprint Board === */

/* ============================================================================
 * Paid Ads — Creative Gallery (Google + Meta + YouTube ad mockups)
 * ============================================================================ */
.dawki-pad-gallery {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #14081a 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-pad-gallery { padding: 70px 20px; } }

.dawki-pad-gallery::before {
  content: "";
  position: absolute;
  top: 5%; left: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-pad-gallery::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-pad-gallery > .container { position: relative; z-index: 2; }

.dawki-pad-gallery-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.dawki-pad-gallery-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(249, 115, 22, 0.10);
  border: 1px solid rgba(249, 115, 22, 0.30);
  color: #fed7aa;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-pad-gallery-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f97316; box-shadow: 0 0 8px #f97316;
}
.dawki-pad-gallery-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-pad-gallery-title span {
  background: linear-gradient(90deg, #f97316, #ec4899, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-pad-gallery-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-pad-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 991px) { .dawki-pad-gallery-grid { grid-template-columns: 1fr; gap: 28px; max-width: 520px; } }

/* Common mockup card */
.dawki-pad-mockup {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
}

.dawki-pad-mockup-head {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dawki-pad-mockup-head-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dawki-pad-mockup-head-icon svg { width: 14px; height: 14px; }
.dawki-pad-mockup-body {
  flex: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

/* Google search ad mockup — white */
.dawki-pad-mockup--google { background: #ffffff; }
.dawki-pad-mockup--google .dawki-pad-mockup-head {
  background: #f1f5f9;
  color: #0f172a;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.dawki-pad-mockup--google .dawki-pad-mockup-head-icon {
  background: linear-gradient(135deg, #4285F4, #34A853);
  color: #ffffff;
}
.dawki-pad-google-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  padding: 8px 14px;
  margin-bottom: 18px;
  font-size: 12.5px;
  color: #475569;
}
.dawki-pad-google-search svg { color: #94a3b8; flex-shrink: 0; }

.dawki-pad-google-ad {
  position: relative;
  padding: 14px 14px 14px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.06) 0%, rgba(168, 85, 247, 0.04) 100%);
  border: 1px solid rgba(79, 124, 255, 0.18);
  margin-bottom: 14px;
}
.dawki-pad-google-ad-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
.dawki-pad-google-ad-url {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #0f172a;
  margin-bottom: 4px;
}
.dawki-pad-google-ad-url-favicon {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}
.dawki-pad-google-ad-title {
  color: #1a0dab;
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.3;
}
.dawki-pad-google-ad-desc {
  color: #4d5156;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.dawki-pad-google-ad-sitelinks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.dawki-pad-google-ad-sitelink {
  font-size: 12px;
  color: #1a0dab;
  font-weight: 500;
}
.dawki-pad-google-organic {
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 23, 42, 0.1);
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}

/* Meta / Facebook feed ad mockup — white */
.dawki-pad-mockup--meta { background: #ffffff; }
.dawki-pad-mockup--meta .dawki-pad-mockup-head {
  background: #f1f5f9;
  color: #0f172a;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.dawki-pad-mockup--meta .dawki-pad-mockup-head-icon {
  background: linear-gradient(135deg, #0866FF, #1877F2);
  color: #ffffff;
}
.dawki-pad-meta-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.dawki-pad-meta-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #f97316);
  flex-shrink: 0;
}
.dawki-pad-meta-meta { flex: 1; min-width: 0; }
.dawki-pad-meta-name {
  color: #050505;
  font-size: 13.5px;
  font-weight: 700;
  display: block;
}
.dawki-pad-meta-sponsored {
  color: #65676B;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dawki-pad-meta-text {
  color: #050505;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 12px;
}
.dawki-pad-meta-image {
  position: relative;
  width: calc(100% + 36px);
  margin: 0 -18px 12px;
  aspect-ratio: 1.4 / 1;
  background: linear-gradient(135deg, #4f7cff 0%, #a855f7 50%, #ec4899 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.dawki-pad-meta-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.25) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.18) 0%, transparent 40%);
}
.dawki-pad-meta-image-badge {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.dawki-pad-meta-cta {
  background: #f0f2f5;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dawki-pad-meta-cta-text { font-size: 12px; color: #65676B; }
.dawki-pad-meta-cta-btn {
  background: #e4e6eb;
  color: #050505;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
}
.dawki-pad-meta-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 8px;
  border-top: 1px solid #e4e6eb;
  font-size: 12px;
  color: #65676B;
}
.dawki-pad-meta-actions span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* YouTube preroll mockup — dark */
.dawki-pad-mockup--youtube { background: #0a0a0a; }
.dawki-pad-mockup--youtube .dawki-pad-mockup-head {
  background: #181818;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dawki-pad-mockup--youtube .dawki-pad-mockup-head-icon {
  background: #FF0000;
  color: #ffffff;
}
.dawki-pad-youtube-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  margin: -18px -18px 14px;
  overflow: hidden;
}
.dawki-pad-youtube-player::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(79, 124, 255, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.18) 0%, transparent 50%);
}
.dawki-pad-youtube-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  z-index: 2;
}
.dawki-pad-youtube-play svg { margin-left: 3px; }
.dawki-pad-youtube-skip {
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 10px 6px 12px;
  border-left: 3px solid #ffffff;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.dawki-pad-youtube-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
}
.dawki-pad-youtube-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 18%;
  background: #FF0000;
}
.dawki-pad-youtube-tag {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
}
.dawki-pad-youtube-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dawki-pad-youtube-channel-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #f97316);
  flex-shrink: 0;
}
.dawki-pad-youtube-meta { flex: 1; min-width: 0; }
.dawki-pad-youtube-title {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 4px;
}
.dawki-pad-youtube-channel {
  color: #aaaaaa;
  font-size: 12px;
}
/* === END Paid Ads Gallery === */

/* ============================================================================
 * Paid Ads — Multi-Platform Performance Strip (cards + sparklines)
 * ============================================================================ */
.dawki-pad-perf {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #14081a 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-pad-perf { padding: 70px 20px; } }

.dawki-pad-perf > .container { position: relative; z-index: 2; }

.dawki-pad-perf-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.dawki-pad-perf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: #86efac;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-pad-perf-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
}
.dawki-pad-perf-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-pad-perf-title span {
  background: linear-gradient(90deg, #22c55e, #06b6d4, #4f7cff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-pad-perf-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-pad-perf-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto;
}
@media (max-width: 1199px) { .dawki-pad-perf-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .dawki-pad-perf-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .dawki-pad-perf-strip { grid-template-columns: 1fr; } }

.dawki-pad-perf-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 18px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}
.dawki-pad-perf-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--p-grad);
  opacity: 0.85;
}
.dawki-pad-perf-card:hover {
  transform: translateY(-6px);
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 0 16px 36px rgba(34, 197, 94, 0.18);
}

.dawki-pad-perf-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.dawki-pad-perf-card-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--p-grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}
.dawki-pad-perf-card-meta { flex: 1; min-width: 0; }
.dawki-pad-perf-card-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.1px;
  line-height: 1.2;
}
.dawki-pad-perf-card-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #86efac;
  margin-top: 2px;
  font-weight: 600;
}
.dawki-pad-perf-card-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: dawki-pad-perf-blink 2s ease-in-out infinite;
}
@keyframes dawki-pad-perf-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Sparkline */
.dawki-pad-perf-spark {
  width: 100%;
  height: 60px;
  display: block;
  margin-bottom: 14px;
}

.dawki-pad-perf-card-roas {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.dawki-pad-perf-card-roas-x {
  font-size: 18px;
  -webkit-text-fill-color: initial;
  background: none;
  color: var(--p-accent, #22c55e);
}
.dawki-pad-perf-card-roas-label {
  color: rgba(226, 232, 240, 0.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace;
  margin-bottom: 14px;
}

.dawki-pad-perf-card-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.dawki-pad-perf-card-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
}
.dawki-pad-perf-card-row-key {
  color: rgba(226, 232, 240, 0.55);
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.dawki-pad-perf-card-row-val {
  color: #ffffff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* === END Paid Ads Performance Strip === */

/* ============================================================================
 * Social — Phone Feed Mockup (IG-style feed with stories + posts)
 * ============================================================================ */
.dawki-soc-feed {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #14081a 0%, #1a0a25 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-soc-feed { padding: 70px 20px; } }

.dawki-soc-feed::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(236, 72, 153, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-soc-feed::after {
  content: "";
  position: absolute;
  bottom: 0; left: -8%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-soc-feed > .container { position: relative; z-index: 2; }

.dawki-soc-feed-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.dawki-soc-feed-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(236, 72, 153, 0.10);
  border: 1px solid rgba(236, 72, 153, 0.30);
  color: #fbcfe8;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-soc-feed-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ec4899; box-shadow: 0 0 8px #ec4899;
}
.dawki-soc-feed-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-soc-feed-title span {
  background: linear-gradient(90deg, #ec4899, #a855f7, #4f7cff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-soc-feed-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-soc-feed-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .dawki-soc-feed-grid { grid-template-columns: 1fr; gap: 40px; }
  .dawki-soc-feed-grid > .dawki-soc-phone-stage { order: 2; }
}

.dawki-soc-phone-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}

.dawki-soc-phone {
  position: relative;
  width: 280px;
  height: 580px;
  border-radius: 42px;
  background: linear-gradient(155deg, #1a1a1a 0%, #0a0a0a 100%);
  padding: 8px;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.dawki-soc-phone::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #0a0a0a;
  border-radius: 999px;
  z-index: 5;
}

.dawki-soc-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dawki-soc-phone-statusbar {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 26px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  flex-shrink: 0;
}

.dawki-soc-phone-statusbar-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dawki-soc-phone-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
}
.dawki-soc-phone-app-header-brand {
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, #f97316, #ec4899, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: cursive;
  letter-spacing: -0.5px;
}
.dawki-soc-phone-app-header-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0f172a;
}
.dawki-soc-phone-app-header-icons svg { width: 18px; height: 18px; }

.dawki-soc-stories-row {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  overflow: hidden;
  flex-shrink: 0;
}
.dawki-soc-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 56px;
}
.dawki-soc-story-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(from 220deg, #f97316, #ec4899, #a855f7, #f97316);
  padding: 2px;
  margin-bottom: 4px;
}
.dawki-soc-story-ring--seen {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
}
.dawki-soc-story-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--st-a, #4f7cff), var(--st-b, #a855f7));
  border: 2px solid #ffffff;
}
.dawki-soc-story-name {
  font-size: 9.5px;
  color: #0f172a;
  font-weight: 500;
  max-width: 56px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dawki-soc-feed-scroll {
  flex: 1;
  overflow: hidden;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.dawki-soc-post {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.dawki-soc-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
}
.dawki-soc-post-header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--av-a, #ec4899), var(--av-b, #f97316));
  flex-shrink: 0;
}
.dawki-soc-post-header-handle {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  flex: 1;
}
.dawki-soc-post-header-handle small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
  margin-top: 1px;
}

.dawki-soc-post-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--p-a, #4f7cff) 0%, var(--p-b, #a855f7) 50%, var(--p-c, #ec4899) 100%);
  overflow: hidden;
}
.dawki-soc-post-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.18) 0%, transparent 45%);
}
.dawki-soc-post-image-tag {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dawki-soc-post-image-caption {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.dawki-soc-post-actions {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 14px;
  color: #0f172a;
}
.dawki-soc-post-actions svg { width: 20px; height: 20px; }
.dawki-soc-post-actions svg.heart { color: #ef4444; }
.dawki-soc-post-actions-spacer { flex: 1; }

.dawki-soc-post-meta {
  padding: 0 12px 10px;
}
.dawki-soc-post-likes {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
}
.dawki-soc-post-caption {
  font-size: 11.5px;
  color: #0f172a;
  line-height: 1.4;
  margin: 0;
}
.dawki-soc-post-caption strong { font-weight: 700; }
.dawki-soc-post-caption .tag { color: #4f7cff; }
.dawki-soc-post-time {
  font-size: 9.5px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 6px;
}

/* Floating reactions around phone */
.dawki-soc-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.dawki-soc-float {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: linear-gradient(135deg, var(--f-a, #ec4899), var(--f-b, #a855f7));
  color: #ffffff;
  box-shadow: 0 0 30px var(--f-glow, rgba(236, 72, 153, 0.55));
  animation: dawki-soc-float-bob 4s ease-in-out infinite;
}
.dawki-soc-float--a { top: 18%; left: -6%;  animation-delay: 0s; }
.dawki-soc-float--b { top: 12%; right: -2%; animation-delay: 0.8s; }
.dawki-soc-float--c { bottom: 24%; left: -8%; animation-delay: 1.6s; }
.dawki-soc-float--d { bottom: 14%; right: -4%; animation-delay: 2.4s; }
@keyframes dawki-soc-float-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-12px) scale(1.06); }
}

/* Side info panel */
.dawki-soc-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dawki-soc-side-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.dawki-soc-side-stat:hover {
  transform: translateX(6px);
  border-color: rgba(236, 72, 153, 0.4);
}
.dawki-soc-side-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ic-a, #ec4899), var(--ic-b, #a855f7));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}
.dawki-soc-side-stat-content { flex: 1; min-width: 0; }
.dawki-soc-side-stat-value {
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 2px;
}
.dawki-soc-side-stat-label {
  color: rgba(226, 232, 240, 0.65);
  font-size: 12.5px;
  font-weight: 500;
}
.dawki-soc-side-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #86efac;
  margin-top: 4px;
}
/* === END Social Phone Feed === */

/* ============================================================================
 * Social — Content Calendar (month grid + platform-coded scheduled dots)
 * ============================================================================ */
.dawki-soc-cal {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #1a0a25 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-soc-cal { padding: 70px 20px; } }

.dawki-soc-cal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(236, 72, 153, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 72, 153, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
}

.dawki-soc-cal > .container { position: relative; z-index: 2; }

.dawki-soc-cal-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.dawki-soc-cal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-soc-cal-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-soc-cal-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-soc-cal-title span {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-soc-cal-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-soc-cal-frame {
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 28px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.dawki-soc-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.dawki-soc-cal-month {
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.dawki-soc-cal-month-stat {
  font-size: 11px;
  font-weight: 700;
  color: #d8b4fe;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.dawki-soc-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.dawki-soc-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: rgba(226, 232, 240, 0.75);
  font-weight: 600;
}
.dawki-soc-cal-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--leg);
  box-shadow: 0 0 8px var(--leg);
}

/* Calendar grid */
.dawki-soc-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
@media (max-width: 575px) { .dawki-soc-cal-grid { gap: 4px; } }

.dawki-soc-cal-weekday {
  font-size: 11px;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 0;
  text-align: center;
}

.dawki-soc-cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 8px 8px 4px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, background 0.3s ease;
}
@media (max-width: 575px) {
  .dawki-soc-cal-day { padding: 5px 4px 2px; border-radius: 6px; }
}
.dawki-soc-cal-day:hover {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.35);
}
.dawki-soc-cal-day--other { opacity: 0.32; }
.dawki-soc-cal-day--today {
  border-color: rgba(168, 85, 247, 0.6);
  background: rgba(168, 85, 247, 0.12);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.2);
}
.dawki-soc-cal-day-num {
  font-size: 12px;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.85);
  font-variant-numeric: tabular-nums;
}
.dawki-soc-cal-day--today .dawki-soc-cal-day-num {
  color: #ffffff;
}
@media (max-width: 575px) { .dawki-soc-cal-day-num { font-size: 10.5px; } }

.dawki-soc-cal-day-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  align-items: flex-end;
}
.dawki-soc-cal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 6px var(--dot);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dawki-soc-cal-day:hover .dawki-soc-cal-dot {
  transform: scale(1.4);
}
@media (max-width: 575px) {
  .dawki-soc-cal-dot { width: 6px; height: 6px; }
}
/* === END Social Calendar === */

/* ============================================================================
 * AI Strategy — Chat Interface Mockup (streaming AI response)
 * ============================================================================ */
.dawki-aic-chat {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0c1832 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-aic-chat { padding: 70px 20px; } }

.dawki-aic-chat::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(79, 124, 255, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-aic-chat::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-aic-chat > .container { position: relative; z-index: 2; }

.dawki-aic-chat-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.dawki-aic-chat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 124, 255, 0.10);
  border: 1px solid rgba(79, 124, 255, 0.30);
  color: #93c5fd;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-aic-chat-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4f7cff; box-shadow: 0 0 8px #4f7cff;
}
.dawki-aic-chat-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-aic-chat-title span {
  background: linear-gradient(90deg, #4f7cff, #06b6d4, #22c55e);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-aic-chat-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-aic-chat-window {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  background: #0a0e15;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dawki-aic-chat-window::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.55), rgba(6, 182, 212, 0.45), rgba(34, 197, 94, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.dawki-aic-chat-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: linear-gradient(180deg, #0d1117 0%, #0a0e15 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dawki-aic-chat-titlebar-dots {
  display: flex; gap: 6px;
}
.dawki-aic-chat-titlebar-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.dawki-aic-chat-titlebar-dots span:nth-child(1) { background: #ff605c; }
.dawki-aic-chat-titlebar-dots span:nth-child(2) { background: #ffbd44; }
.dawki-aic-chat-titlebar-dots span:nth-child(3) { background: #00ca4e; }
.dawki-aic-chat-titlebar-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  flex: 1;
}
.dawki-aic-chat-titlebar-badge {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.dawki-aic-chat-titlebar-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #86efac;
  font-weight: 600;
}
.dawki-aic-chat-titlebar-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: dawki-aic-blink 2s ease-in-out infinite;
}
@keyframes dawki-aic-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.dawki-aic-chat-body {
  padding: 26px 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 380px;
}

.dawki-aic-chat-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.dawki-aic-chat-msg--user { justify-content: flex-end; }
.dawki-aic-chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--av-a, #4f7cff), var(--av-b, #06b6d4));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.dawki-aic-chat-msg-bubble {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #e2e8f0;
}
.dawki-aic-chat-msg--user .dawki-aic-chat-msg-bubble {
  background: linear-gradient(135deg, #4f7cff 0%, #6366f1 100%);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}
.dawki-aic-chat-msg--ai .dawki-aic-chat-msg-bubble {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 4px;
}

.dawki-aic-chat-msg-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
}
.dawki-aic-chat-msg-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: dawki-aic-typing 1.4s ease-in-out infinite;
}
.dawki-aic-chat-msg-typing span:nth-child(2) { animation-delay: 0.18s; }
.dawki-aic-chat-msg-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dawki-aic-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.dawki-aic-chat-msg-stream {
  display: inline-block;
  border-right: 2px solid #4f7cff;
  padding-right: 2px;
  vertical-align: text-bottom;
  animation: dawki-aic-cursor 1s steps(2) infinite;
}
@keyframes dawki-aic-cursor {
  to { border-color: transparent; }
}

.dawki-aic-chat-msg-bullets {
  margin: 12px 0 6px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dawki-aic-chat-msg-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #cbd5e1;
}
.dawki-aic-chat-msg-bullet-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(79, 124, 255, 0.18);
  color: #93c5fd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  margin-top: 1px;
}
.dawki-aic-chat-msg-bullet strong { color: #ffffff; }
.dawki-aic-chat-msg-bullet em {
  display: inline-block;
  margin-left: 6px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 1px 7px;
  border-radius: 999px;
}

.dawki-aic-chat-msg-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.dawki-aic-chat-msg-suggestion {
  font-size: 12px;
  font-weight: 600;
  color: #93c5fd;
  background: rgba(79, 124, 255, 0.10);
  border: 1px solid rgba(79, 124, 255, 0.28);
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: default;
}

.dawki-aic-chat-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.dawki-aic-chat-input-box {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.55);
  font-family: inherit;
}
.dawki-aic-chat-input-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(226, 232, 240, 0.4);
}
.dawki-aic-chat-input-tools svg { width: 18px; height: 18px; }
.dawki-aic-chat-input-send {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f7cff, #06b6d4);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: default;
  box-shadow: 0 6px 18px rgba(79, 124, 255, 0.35);
  flex-shrink: 0;
}
.dawki-aic-chat-input-send svg { width: 16px; height: 16px; }
/* === END AI Chat === */

/* ============================================================================
 * AI Strategy — Use Case Matrix (Impact vs Effort 2D scatter quadrant)
 * ============================================================================ */
.dawki-aic-matrix {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-aic-matrix { padding: 70px 20px; } }

.dawki-aic-matrix > .container { position: relative; z-index: 2; }

.dawki-aic-matrix-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-aic-matrix-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-aic-matrix-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-aic-matrix-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-aic-matrix-title span {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-aic-matrix-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-aic-matrix-frame {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 26px 26px 18px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.dawki-aic-matrix-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4 / 1;
  margin-left: 56px;
  margin-bottom: 36px;
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 0 0 0 4px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 25% 100%;
}
@media (max-width: 575px) {
  .dawki-aic-matrix-canvas {
    margin-left: 36px;
    aspect-ratio: 1 / 1;
  }
}

/* Quadrant divider lines */
.dawki-aic-matrix-canvas::before,
.dawki-aic-matrix-canvas::after {
  content: "";
  position: absolute;
  background: rgba(168, 85, 247, 0.22);
  pointer-events: none;
}
.dawki-aic-matrix-canvas::before {
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
}
.dawki-aic-matrix-canvas::after {
  left: 0; right: 0;
  top: 50%;
  height: 1px;
}

/* Quadrant labels */
.dawki-aic-matrix-quadrant {
  position: absolute;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.45);
  pointer-events: none;
}
.dawki-aic-matrix-quadrant--tl { top: 12px;    left: 14px; }
.dawki-aic-matrix-quadrant--tr { top: 12px;    right: 14px; text-align: right; }
.dawki-aic-matrix-quadrant--bl { bottom: 12px; left: 14px; }
.dawki-aic-matrix-quadrant--br { bottom: 12px; right: 14px; text-align: right; }
.dawki-aic-matrix-quadrant strong {
  display: block;
  color: var(--q-color, #d8b4fe);
  font-size: 11px;
  margin-bottom: 2px;
}

/* Y-axis label */
.dawki-aic-matrix-axis-y {
  position: absolute;
  top: 50%;
  left: -36px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.65);
  white-space: nowrap;
}
.dawki-aic-matrix-axis-y-end {
  position: absolute;
  top: -8px; left: -52px;
  font-size: 10px;
  color: rgba(226, 232, 240, 0.45);
  font-weight: 700;
}
.dawki-aic-matrix-axis-y-start {
  position: absolute;
  bottom: -22px; left: -52px;
  font-size: 10px;
  color: rgba(226, 232, 240, 0.45);
  font-weight: 700;
}
@media (max-width: 575px) {
  .dawki-aic-matrix-axis-y { left: -28px; font-size: 10px; }
  .dawki-aic-matrix-axis-y-end,
  .dawki-aic-matrix-axis-y-start { left: -34px; font-size: 9px; }
}

/* X-axis label */
.dawki-aic-matrix-axis-x {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.65);
  white-space: nowrap;
}
.dawki-aic-matrix-axis-x-start {
  position: absolute;
  bottom: -34px; left: 0;
  font-size: 10px;
  color: rgba(226, 232, 240, 0.45);
  font-weight: 700;
}
.dawki-aic-matrix-axis-x-end {
  position: absolute;
  bottom: -34px; right: 0;
  font-size: 10px;
  color: rgba(226, 232, 240, 0.45);
  font-weight: 700;
}

/* Bubble */
.dawki-aic-matrix-bubble {
  position: absolute;
  transform: translate(-50%, 50%);
  width: var(--b-size, 44px);
  height: var(--b-size, 44px);
  border-radius: 50%;
  background: var(--b-color, #4f7cff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  box-shadow:
    0 0 0 3px rgba(2, 6, 15, 0.95),
    0 0 22px var(--b-color, #4f7cff),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s;
  z-index: 2;
}
.dawki-aic-matrix-bubble:hover {
  transform: translate(-50%, 50%) scale(1.18);
  z-index: 5;
}
.dawki-aic-matrix-bubble-tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(2, 6, 15, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.dawki-aic-matrix-bubble-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(2, 6, 15, 0.95);
}
.dawki-aic-matrix-bubble:hover .dawki-aic-matrix-bubble-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Legend */
.dawki-aic-matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.dawki-aic-matrix-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.75);
  font-weight: 600;
}
.dawki-aic-matrix-legend-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--leg);
  box-shadow: 0 0 8px var(--leg);
}
/* === END AI Use Case Matrix === */

/* ============================================================================
 * AI Agents — Reasoning Trace (debug-style step list)
 * ============================================================================ */
.dawki-aag-trace {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0c1832 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-aag-trace { padding: 70px 20px; } }

.dawki-aag-trace::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(34, 197, 94, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-aag-trace::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-aag-trace > .container { position: relative; z-index: 2; }

.dawki-aag-trace-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-aag-trace-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: #86efac;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-aag-trace-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
}
.dawki-aag-trace-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-aag-trace-title span {
  background: linear-gradient(90deg, #22c55e, #06b6d4, #4f7cff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-aag-trace-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-aag-trace-frame {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  background: #0a0e15;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dawki-aag-trace-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #0d1117 0%, #0a0e15 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dawki-aag-trace-titlebar-dots {
  display: flex; gap: 6px;
}
.dawki-aag-trace-titlebar-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.dawki-aag-trace-titlebar-dots span:nth-child(1) { background: #ff605c; }
.dawki-aag-trace-titlebar-dots span:nth-child(2) { background: #ffbd44; }
.dawki-aag-trace-titlebar-dots span:nth-child(3) { background: #00ca4e; }
.dawki-aag-trace-titlebar-name {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.6);
  flex: 1;
  text-align: center;
}
.dawki-aag-trace-titlebar-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #86efac;
}
.dawki-aag-trace-titlebar-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: dawki-aag-pulse 2s ease-in-out infinite;
}
@keyframes dawki-aag-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.dawki-aag-trace-body {
  padding: 24px 24px 28px;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 13px;
  position: relative;
}

/* Vertical timeline bar */
.dawki-aag-trace-body::before {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 50px;
  width: 2px;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.45), rgba(79, 124, 255, 0.4), rgba(168, 85, 247, 0.4));
  border-radius: 999px;
}

.dawki-aag-trace-step {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  padding: 14px 0;
}

.dawki-aag-trace-step-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--tg-color, #86efac);
  background: var(--tg-bg, rgba(34, 197, 94, 0.10));
  border: 1px solid var(--tg-border, rgba(34, 197, 94, 0.30));
  padding: 4px 9px;
  border-radius: 6px;
  text-align: center;
  align-self: flex-start;
  margin-top: 1px;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}
.dawki-aag-trace-step-tag::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 2px;
  width: 16px;
  height: 2px;
  background: var(--tg-border, rgba(34, 197, 94, 0.4));
  transform: translateY(-50%);
}

.dawki-aag-trace-step-content {
  color: #cbd5e1;
  line-height: 1.6;
  font-size: 13px;
  padding-left: 14px;
}
.dawki-aag-trace-step-content strong { color: #ffffff; }

.dawki-aag-trace-step-code {
  display: block;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 8px;
  color: #d2a8ff;
  font-size: 12.5px;
  white-space: pre-wrap;
  overflow-x: auto;
}
.dawki-aag-trace-step-code .csw-fn  { color: #d2a8ff; }
.dawki-aag-trace-step-code .csw-str { color: #a5d6ff; }
.dawki-aag-trace-step-code .csw-num { color: #79c0ff; }
.dawki-aag-trace-step-code .csw-prop{ color: #79c0ff; }
.dawki-aag-trace-step-code .csw-kw  { color: #ff7b72; }
.dawki-aag-trace-step-code .csw-cmt { color: #8b949e; font-style: italic; }
.dawki-aag-trace-step-code .csw-var { color: #ffa657; }

.dawki-aag-trace-step-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(226, 232, 240, 0.5);
}
.dawki-aag-trace-step-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.65);
  font-weight: 700;
  letter-spacing: 0.3px;
}

@media (max-width: 575px) {
  .dawki-aag-trace-body { padding: 18px 16px 22px; }
  .dawki-aag-trace-body::before { left: 36px; }
  .dawki-aag-trace-step { grid-template-columns: 80px 1fr; gap: 12px; }
  .dawki-aag-trace-step-tag { font-size: 9.5px; padding: 3px 6px; }
  .dawki-aag-trace-step-content { padding-left: 6px; font-size: 12px; }
  .dawki-aag-trace-step-tag::before { width: 8px; }
}
/* === END AI Agent Trace === */

/* ============================================================================
 * AI Agents — Multi-Agent Workflow DAG (network of specialized agents)
 * ============================================================================ */
.dawki-aag-crew {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-aag-crew { padding: 70px 20px; } }

.dawki-aag-crew::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
}

.dawki-aag-crew > .container { position: relative; z-index: 2; }

.dawki-aag-crew-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-aag-crew-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-aag-crew-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-aag-crew-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-aag-crew-title span {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-aag-crew-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-aag-crew-stage {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 1.55 / 1;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
@media (max-width: 767px) {
  .dawki-aag-crew-stage { aspect-ratio: auto; min-height: 720px; }
}

/* SVG line layer */
.dawki-aag-crew-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.dawki-aag-crew-edge {
  fill: none;
  stroke: url(#dawkiAagEdgeGrad);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 5;
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.4));
}

/* Animated message dot along path */
.dawki-aag-crew-packet-dot {
  fill: #ffffff;
  filter: drop-shadow(0 0 6px #a855f7);
}

/* Agent card */
.dawki-aag-crew-agent {
  position: absolute;
  width: 200px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 14px;
  z-index: 2;
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.dawki-aag-crew-agent::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, var(--ag-a, #a855f7), var(--ag-b, #ec4899));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.dawki-aag-crew-agent:hover {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.22);
}
.dawki-aag-crew-agent:hover::before { opacity: 1; }
.dawki-aag-crew-agent--terminal {
  width: 170px;
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(168, 85, 247, 0.35);
}

@media (max-width: 991px) { .dawki-aag-crew-agent { width: 170px; padding: 12px; } }
@media (max-width: 767px) { .dawki-aag-crew-agent { width: 160px; padding: 10px; transform: none; position: relative; margin: 12px auto; } }

.dawki-aag-crew-agent-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dawki-aag-crew-agent-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ag-a, #a855f7), var(--ag-b, #ec4899));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px var(--ag-glow, rgba(168, 85, 247, 0.5));
}
.dawki-aag-crew-agent-avatar svg { width: 18px; height: 18px; }
.dawki-aag-crew-agent-meta { flex: 1; min-width: 0; }
.dawki-aag-crew-agent-name {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  line-height: 1.2;
  margin: 0;
}
.dawki-aag-crew-agent-role {
  color: rgba(226, 232, 240, 0.55);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace;
  margin-top: 1px;
  display: block;
}
.dawki-aag-crew-agent-task {
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.78);
  margin: 0;
}

.dawki-aag-crew-agent-status {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--st-c, #86efac);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-aag-crew-agent-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--st-c, #22c55e);
  box-shadow: 0 0 6px var(--st-c, #22c55e);
  animation: dawki-aag-blink 2s ease-in-out infinite;
}
@keyframes dawki-aag-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Mobile flow stack — hide SVG, stack agents */
.dawki-aag-crew-stage--mobile {
  display: none;
}
@media (max-width: 767px) {
  .dawki-aag-crew-stage { display: none; }
  .dawki-aag-crew-stage--mobile {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 360px;
    margin: 0 auto;
    align-items: center;
  }
  .dawki-aag-crew-stage--mobile .dawki-aag-crew-agent {
    position: relative;
    transform: none;
    width: 100%;
  }
  .dawki-aag-crew-stage--mobile .dawki-aag-crew-mobile-arrow {
    color: rgba(168, 85, 247, 0.6);
    font-size: 22px;
  }
}

/* Bottom legend */
.dawki-aag-crew-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.dawki-aag-crew-legend-pill {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(226, 232, 240, 0.78);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dawki-aag-crew-legend-pill > span:first-child {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--leg);
  box-shadow: 0 0 6px var(--leg);
}
/* === END AI Agent Crew === */

/* ============================================================================
 * Salesforce — Lightning Opportunity Mockup (pixel-accurate Lightning UI)
 * ============================================================================ */
.dawki-sfd-light {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0a1a36 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-sfd-light { padding: 70px 20px; } }

.dawki-sfd-light::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(0, 161, 224, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-sfd-light::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-sfd-light > .container { position: relative; z-index: 2; }

.dawki-sfd-light-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-sfd-light-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 161, 224, 0.10);
  border: 1px solid rgba(0, 161, 224, 0.30);
  color: #7dd3fc;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-sfd-light-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00A1E0; box-shadow: 0 0 8px #00A1E0;
}
.dawki-sfd-light-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-sfd-light-title span {
  background: linear-gradient(90deg, #00A1E0, #4f7cff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-sfd-light-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-sfd-light-window {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  background: #f3f3f3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Top app launcher bar */
.dawki-sfd-light-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: linear-gradient(180deg, #032D60 0%, #0070D2 100%);
  color: #ffffff;
}
.dawki-sfd-light-topbar-launcher {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dawki-sfd-light-topbar-launcher svg { width: 14px; height: 14px; color: #ffffff; }
.dawki-sfd-light-topbar-app {
  font-size: 13px;
  font-weight: 700;
  margin-right: 14px;
}
.dawki-sfd-light-topbar-tabs {
  display: flex;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  flex: 1;
}
.dawki-sfd-light-topbar-tab {
  color: rgba(255, 255, 255, 0.78);
  padding: 6px 0;
  position: relative;
}
.dawki-sfd-light-topbar-tab--active {
  color: #ffffff;
}
.dawki-sfd-light-topbar-tab--active::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0; right: 0;
  height: 3px;
  background: #ffffff;
  border-radius: 3px 3px 0 0;
}
.dawki-sfd-light-topbar-search {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
  min-width: 200px;
}

/* Sub-nav with breadcrumbs */
.dawki-sfd-light-subnav {
  background: #ffffff;
  border-bottom: 1px solid #dddbda;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #54698d;
}
.dawki-sfd-light-subnav-icon {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #FFB75D, #FF7E00);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
}
.dawki-sfd-light-subnav-bread {
  color: #0070d2;
  font-weight: 600;
}
.dawki-sfd-light-subnav-chev {
  color: #b0adab;
}
.dawki-sfd-light-subnav-current {
  color: #181818;
  font-weight: 700;
}

/* Header strip with record info */
.dawki-sfd-light-record {
  background: #ffffff;
  padding: 14px 22px 0;
  border-bottom: 1px solid #dddbda;
}
.dawki-sfd-light-record-eyebrow {
  font-size: 11px;
  color: #54698d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.dawki-sfd-light-record-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 14px;
}
.dawki-sfd-light-record-title-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, #FFB75D, #FF7E00);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dawki-sfd-light-record-title-icon svg { width: 18px; height: 18px; }
.dawki-sfd-light-record-title {
  color: #16325c;
  font-size: 22px;
  font-weight: 600;
  flex: 1;
}
.dawki-sfd-light-record-actions {
  display: flex;
  gap: 8px;
}
.dawki-sfd-light-record-btn {
  font-size: 12px;
  font-weight: 600;
  color: #0070d2;
  border: 1px solid #0070d2;
  background: #ffffff;
  padding: 5px 14px;
  border-radius: 4px;
}
.dawki-sfd-light-record-btn--primary {
  background: #0070d2;
  color: #ffffff;
}

.dawki-sfd-light-record-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-bottom: 14px;
}
@media (max-width: 767px) { .dawki-sfd-light-record-meta { grid-template-columns: repeat(2, 1fr); } }

.dawki-sfd-light-record-meta-key {
  font-size: 11px;
  color: #54698d;
  font-weight: 600;
  margin-bottom: 2px;
}
.dawki-sfd-light-record-meta-val {
  font-size: 13.5px;
  color: #181818;
  font-weight: 600;
}

/* Path / Stage strip */
.dawki-sfd-light-path {
  display: flex;
  background: #fafaf9;
  border-bottom: 1px solid #dddbda;
  font-family: "Salesforce Sans", sans-serif;
}
.dawki-sfd-light-path-step {
  flex: 1;
  position: relative;
  padding: 10px 18px 10px 26px;
  font-size: 12px;
  font-weight: 600;
  color: #54698d;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  border-right: 1px solid #dddbda;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dawki-sfd-light-path-step::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 14px;
  height: 50%;
  background: inherit;
  border-right: 1px solid #dddbda;
  transform: skewX(-30deg) translateX(-7px);
  transform-origin: top right;
}
.dawki-sfd-light-path-step::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 14px;
  height: 50%;
  background: inherit;
  border-right: 1px solid #dddbda;
  transform: skewX(30deg) translateX(-7px);
  transform-origin: bottom right;
}
.dawki-sfd-light-path-step--done {
  background: #d9eaf6;
  color: #16325c;
}
.dawki-sfd-light-path-step--current {
  background: #0070d2;
  color: #ffffff;
}
.dawki-sfd-light-path-step--done::before,
.dawki-sfd-light-path-step--done::after {
  background: #d9eaf6;
}
.dawki-sfd-light-path-step--current::before,
.dawki-sfd-light-path-step--current::after {
  background: #0070d2;
}
.dawki-sfd-light-path-step:first-child::before,
.dawki-sfd-light-path-step:first-child::after { display: none; }
.dawki-sfd-light-path-step svg { width: 12px; height: 12px; flex-shrink: 0; position: relative; z-index: 2; }
.dawki-sfd-light-path-step-label { position: relative; z-index: 2; }

/* Body 2-col layout */
.dawki-sfd-light-body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  padding: 14px;
}
@media (max-width: 767px) { .dawki-sfd-light-body { grid-template-columns: 1fr; } }

.dawki-sfd-light-card {
  background: #ffffff;
  border: 1px solid #dddbda;
  border-radius: 6px;
  padding: 0;
}
.dawki-sfd-light-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid #ecebea;
  font-size: 13px;
  font-weight: 700;
  color: #16325c;
}
.dawki-sfd-light-card-header-actions {
  font-size: 11px;
  color: #0070d2;
  font-weight: 600;
}
.dawki-sfd-light-card-body {
  padding: 12px 14px 14px;
}

/* Detail field rows */
.dawki-sfd-light-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  font-size: 12.5px;
}
@media (max-width: 575px) { .dawki-sfd-light-fields { grid-template-columns: 1fr; } }
.dawki-sfd-light-field-key {
  color: #54698d;
  font-weight: 600;
  font-size: 11.5px;
  margin-bottom: 1px;
}
.dawki-sfd-light-field-val {
  color: #181818;
  font-weight: 500;
}
.dawki-sfd-light-field-val a { color: #0070d2; font-weight: 600; }

/* Related lists */
.dawki-sfd-light-related {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dawki-sfd-light-related-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #ecebea;
  font-size: 12.5px;
}
.dawki-sfd-light-related-row:last-child { border-bottom: none; }
.dawki-sfd-light-related-row-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--rel-bg, linear-gradient(135deg, #4f7cff, #a855f7));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dawki-sfd-light-related-row-icon svg { width: 14px; height: 14px; }
.dawki-sfd-light-related-row-content { flex: 1; min-width: 0; }
.dawki-sfd-light-related-row-name {
  color: #0070d2;
  font-weight: 600;
}
.dawki-sfd-light-related-row-sub {
  color: #54698d;
  font-size: 11.5px;
  margin-top: 1px;
}

/* Activity timeline */
.dawki-sfd-light-activity {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dawki-sfd-light-activity-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #ecebea;
  position: relative;
}
.dawki-sfd-light-activity-item:last-child { border-bottom: none; }
.dawki-sfd-light-activity-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--act-bg, linear-gradient(135deg, #ec4899, #f97316));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dawki-sfd-light-activity-icon svg { width: 13px; height: 13px; }
.dawki-sfd-light-activity-content { font-size: 12.5px; min-width: 0; }
.dawki-sfd-light-activity-title {
  color: #181818;
  font-weight: 600;
  margin-bottom: 1px;
}
.dawki-sfd-light-activity-meta {
  color: #54698d;
  font-size: 11.5px;
}
/* === END Salesforce Lightning === */

/* ============================================================================
 * Salesforce — Object Schema ERD (database-style with relationships)
 * ============================================================================ */
.dawki-sfd-erd {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-sfd-erd { padding: 70px 20px; } }

.dawki-sfd-erd::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 161, 224, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 161, 224, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
}

.dawki-sfd-erd > .container { position: relative; z-index: 2; }

.dawki-sfd-erd-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-sfd-erd-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-sfd-erd-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-sfd-erd-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-sfd-erd-title span {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-sfd-erd-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-sfd-erd-frame {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 1.55 / 1;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
@media (max-width: 991px) {
  .dawki-sfd-erd-frame { aspect-ratio: auto; min-height: 880px; }
}

.dawki-sfd-erd-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.dawki-sfd-erd-edge {
  fill: none;
  stroke: rgba(168, 85, 247, 0.55);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.4));
}
.dawki-sfd-erd-edge-marker {
  fill: rgba(168, 85, 247, 0.85);
}
.dawki-sfd-erd-edge-label {
  fill: #d8b4fe;
  font-size: 9px;
  font-weight: 700;
  font-family: ui-monospace, "Courier New", monospace;
  text-anchor: middle;
}

/* Object card */
.dawki-sfd-erd-obj {
  position: absolute;
  width: 200px;
  background: linear-gradient(180deg, rgba(11, 17, 32, 0.95) 0%, rgba(2, 6, 15, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  z-index: 2;
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-family: ui-monospace, "Courier New", monospace;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.dawki-sfd-erd-obj:hover {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.22);
}
@media (max-width: 991px) {
  .dawki-sfd-erd-obj {
    position: relative;
    transform: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 16px;
  }
  .dawki-sfd-erd-obj:hover { transform: scale(1); }
  .dawki-sfd-erd-edges { display: none; }
}

.dawki-sfd-erd-obj-head {
  background: linear-gradient(135deg, var(--obj-a, #4f7cff) 0%, var(--obj-b, #a855f7) 100%);
  color: #ffffff;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.dawki-sfd-erd-obj-head svg { width: 14px; height: 14px; }
.dawki-sfd-erd-obj-head-pk {
  margin-left: auto;
  font-size: 9px;
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.dawki-sfd-erd-obj-fields {
  padding: 6px 0;
}
.dawki-sfd-erd-obj-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 12px;
  font-size: 11.5px;
  color: rgba(226, 232, 240, 0.85);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.dawki-sfd-erd-obj-field:last-child { border-bottom: none; }
.dawki-sfd-erd-obj-field-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dawki-sfd-erd-obj-field-key-icon {
  font-size: 9px;
  color: rgba(226, 232, 240, 0.4);
  font-weight: 800;
}
.dawki-sfd-erd-obj-field-key-icon--pk { color: #fbbf24; }
.dawki-sfd-erd-obj-field-key-icon--fk { color: #93c5fd; }
.dawki-sfd-erd-obj-field-type {
  color: rgba(226, 232, 240, 0.45);
  font-size: 10px;
}

.dawki-sfd-erd-stage--mobile {
  display: none;
}
@media (max-width: 991px) {
  .dawki-sfd-erd-frame > svg { display: none; }
  .dawki-sfd-erd-stage--mobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
  }
}

.dawki-sfd-erd-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}
.dawki-sfd-erd-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(226, 232, 240, 0.78);
  font-weight: 600;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-sfd-erd-legend-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--leg-color);
}
/* === END Salesforce ERD === */

/* ============================================================================
 * Business Intelligence — Live Dashboard Mockup
 * ============================================================================ */
.dawki-bi-dash {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-bi-dash { padding: 70px 20px; } }

.dawki-bi-dash::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(34, 197, 94, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-bi-dash::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-bi-dash > .container { position: relative; z-index: 2; }

.dawki-bi-dash-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-bi-dash-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: #86efac;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-bi-dash-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
}
.dawki-bi-dash-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-bi-dash-title span {
  background: linear-gradient(90deg, #22c55e, #06b6d4, #4f7cff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-bi-dash-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-bi-dash-frame {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  background: #0d1117;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dawki-bi-dash-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #161d2e 0%, #0d1117 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dawki-bi-dash-toolbar-dots {
  display: flex; gap: 6px;
}
.dawki-bi-dash-toolbar-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.dawki-bi-dash-toolbar-dots span:nth-child(1) { background: #ff605c; }
.dawki-bi-dash-toolbar-dots span:nth-child(2) { background: #ffbd44; }
.dawki-bi-dash-toolbar-dots span:nth-child(3) { background: #00ca4e; }
.dawki-bi-dash-toolbar-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  flex: 1;
}
.dawki-bi-dash-toolbar-name-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #22c55e, #06b6d4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dawki-bi-dash-toolbar-name-icon svg { width: 12px; height: 12px; color: #ffffff; }
.dawki-bi-dash-toolbar-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dawki-bi-dash-toolbar-filter {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.78);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 11px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dawki-bi-dash-toolbar-filter svg { width: 11px; height: 11px; }

.dawki-bi-dash-body {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.dawki-bi-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 767px) { .dawki-bi-dash-kpis { grid-template-columns: repeat(2, 1fr); } }
.dawki-bi-dash-kpi {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.dawki-bi-dash-kpi-label {
  font-size: 10.5px;
  color: rgba(226, 232, 240, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.dawki-bi-dash-kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}
.dawki-bi-dash-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-bi-dash-kpi-trend--up   { color: #86efac; }
.dawki-bi-dash-kpi-trend--down { color: #fca5a5; }

.dawki-bi-dash-kpi-spark {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 70px;
  height: 28px;
}

.dawki-bi-dash-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}
@media (max-width: 767px) { .dawki-bi-dash-grid { grid-template-columns: 1fr; } }

.dawki-bi-dash-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 16px 16px;
}
.dawki-bi-dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.dawki-bi-dash-card-title {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
}
.dawki-bi-dash-card-action {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.55);
  font-family: ui-monospace, "Courier New", monospace;
}

/* Bar chart */
.dawki-bi-dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  padding: 0 4px;
}
.dawki-bi-dash-bar {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
}
.dawki-bi-dash-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #06b6d4 0%, #4f7cff 50%, #a855f7 100%);
  border-radius: 4px 4px 2px 2px;
  transform-origin: bottom;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}
.dawki-bi-dash-bar-label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  color: rgba(226, 232, 240, 0.55);
  font-family: ui-monospace, "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Donut chart */
.dawki-bi-dash-donut-wrap {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: center;
}
@media (max-width: 575px) { .dawki-bi-dash-donut-wrap { grid-template-columns: 1fr; } }
.dawki-bi-dash-donut {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 130px;
}
.dawki-bi-dash-donut-center {
  fill: #d1d5db;
  font-size: 22px;
  font-weight: 800;
  font-family: ui-monospace, "Courier New", monospace;
  text-anchor: middle;
}
.dawki-bi-dash-donut-center-sub {
  fill: rgba(226, 232, 240, 0.45);
  font-size: 8px;
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dawki-bi-dash-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dawki-bi-dash-donut-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-bi-dash-donut-legend-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(226, 232, 240, 0.85);
}
.dawki-bi-dash-donut-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--leg);
}
.dawki-bi-dash-donut-legend-pct {
  color: #ffffff;
  font-weight: 700;
}

/* Mini area / line chart */
.dawki-bi-dash-line {
  width: 100%;
  height: 140px;
}

/* Table */
.dawki-bi-dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.dawki-bi-dash-table th,
.dawki-bi-dash-table td {
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-bi-dash-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(226, 232, 240, 0.45);
  text-transform: uppercase;
}
.dawki-bi-dash-table td {
  color: rgba(226, 232, 240, 0.85);
}
.dawki-bi-dash-table td:last-child {
  color: #86efac;
  font-weight: 700;
  text-align: right;
}
.dawki-bi-dash-table tr:last-child td { border-bottom: none; }

.dawki-bi-dash-table-pill {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(79, 124, 255, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(79, 124, 255, 0.32);
}
/* === END BI Dashboard === */

/* ============================================================================
 * Business Intelligence — Modern Data Stack Pipeline (horizontal flow)
 * ============================================================================ */
.dawki-bi-pipe {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-bi-pipe { padding: 70px 20px; } }

.dawki-bi-pipe > .container { position: relative; z-index: 2; }

.dawki-bi-pipe-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-bi-pipe-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-bi-pipe-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-bi-pipe-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-bi-pipe-title span {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-bi-pipe-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-bi-pipe-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 1100px) { .dawki-bi-pipe-flow { grid-template-columns: 1fr; gap: 18px; max-width: 480px; } }

.dawki-bi-pipe-stage {
  position: relative;
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Connecting arrow between stages (desktop only) */
.dawki-bi-pipe-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 36px;
  right: -14px;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--st-color, #a855f7), transparent);
  z-index: 0;
}
.dawki-bi-pipe-stage:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 33px;
  right: -16px;
  width: 0; height: 0;
  border: 4px solid transparent;
  border-left-color: var(--st-color, #a855f7);
  z-index: 1;
}
@media (max-width: 1100px) {
  .dawki-bi-pipe-stage:not(:last-child)::after,
  .dawki-bi-pipe-stage:not(:last-child)::before { display: none; }
  .dawki-bi-pipe-stage:not(:last-child) .dawki-bi-pipe-stage-mobile-arrow { display: block; }
}
.dawki-bi-pipe-stage-mobile-arrow {
  display: none;
  text-align: center;
  font-size: 22px;
  color: rgba(168, 85, 247, 0.6);
  margin-top: 8px;
}

/* Stage circle (numbered) */
.dawki-bi-pipe-stage-num {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--st-a), var(--st-b));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
  box-shadow:
    0 0 0 5px rgba(2, 6, 15, 1),
    0 0 0 7px rgba(168, 85, 247, 0.18),
    0 0 24px var(--st-glow, rgba(168, 85, 247, 0.5));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dawki-bi-pipe-stage:hover .dawki-bi-pipe-stage-num {
  transform: scale(1.08);
}

.dawki-bi-pipe-stage-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 0 0 8px;
  text-align: center;
}
.dawki-bi-pipe-stage-desc {
  color: rgba(226, 232, 240, 0.62);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 12px;
  max-width: 200px;
}

.dawki-bi-pipe-stage-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.dawki-bi-pipe-stage-tool {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.85);
  border-radius: 999px;
  font-family: ui-monospace, "Courier New", monospace;
}

/* Live data flow indicator strip below */
.dawki-bi-pipe-track {
  position: relative;
  max-width: 1180px;
  margin: 32px auto 0;
  height: 3px;
  background: rgba(168, 85, 247, 0.18);
  border-radius: 999px;
  overflow: hidden;
}
@media (max-width: 1100px) { .dawki-bi-pipe-track { display: none; } }
.dawki-bi-pipe-track-bullet {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #a855f7, #ec4899, transparent);
  box-shadow: 0 0 12px #a855f7;
  animation: dawki-bi-pipe-fly 4s linear infinite;
}
.dawki-bi-pipe-track-bullet--b { animation-delay: 1.3s; }
.dawki-bi-pipe-track-bullet--c { animation-delay: 2.6s; }
@keyframes dawki-bi-pipe-fly {
  0%   { left: -10%; }
  100% { left: 110%; }
}

.dawki-bi-pipe-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1080px;
  margin: 50px auto 0;
}
@media (max-width: 991px) { .dawki-bi-pipe-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dawki-bi-pipe-stats { grid-template-columns: 1fr; } }

.dawki-bi-pipe-stat {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
}
.dawki-bi-pipe-stat-key {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
  font-family: ui-monospace, "Courier New", monospace;
  margin-bottom: 4px;
}
.dawki-bi-pipe-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.dawki-bi-pipe-stat-sub {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.55);
  margin-top: 2px;
}
/* === END BI Pipeline === */

/* ============================================================================
 * IT Consulting — Maturity Radar Chart (current vs target polygons)
 * ============================================================================ */
.dawki-itc-radar {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #1a0e25 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-itc-radar { padding: 70px 20px; } }

.dawki-itc-radar::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(168, 85, 247, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-itc-radar::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-itc-radar > .container { position: relative; z-index: 2; }

.dawki-itc-radar-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-itc-radar-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-itc-radar-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-itc-radar-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-itc-radar-title span {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-itc-radar-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-itc-radar-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 36px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
@media (max-width: 991px) {
  .dawki-itc-radar-frame { grid-template-columns: 1fr; gap: 32px; padding: 24px; }
}

.dawki-itc-radar-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin: 0 auto;
}

.dawki-itc-radar-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.dawki-itc-radar-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}
.dawki-itc-radar-axis {
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 1;
}
.dawki-itc-radar-poly-current {
  fill: rgba(249, 115, 22, 0.20);
  stroke: #f97316;
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.55));
}
.dawki-itc-radar-poly-target {
  fill: rgba(34, 197, 94, 0.18);
  stroke: #22c55e;
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.55));
}
.dawki-itc-radar-dot-current { fill: #f97316; }
.dawki-itc-radar-dot-target  { fill: #22c55e; }

.dawki-itc-radar-axis-label {
  fill: rgba(226, 232, 240, 0.85);
  font-size: 9.5px;
  font-weight: 700;
  text-anchor: middle;
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.dawki-itc-radar-key {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dawki-itc-radar-key-toggle {
  display: flex;
  gap: 14px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.dawki-itc-radar-key-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.85);
}
.dawki-itc-radar-key-pill::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--key-color);
  box-shadow: 0 0 6px var(--key-color);
}

.dawki-itc-radar-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.dawki-itc-radar-row:hover {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.32);
}

.dawki-itc-radar-row-name {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
}
.dawki-itc-radar-row-name small {
  display: block;
  color: rgba(226, 232, 240, 0.55);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-top: 1px;
}

.dawki-itc-radar-row-score {
  text-align: center;
  font-family: ui-monospace, "Courier New", monospace;
  min-width: 38px;
}
.dawki-itc-radar-row-score-val {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--score-color, #ffffff);
  line-height: 1;
}
.dawki-itc-radar-row-score-label {
  font-size: 9.5px;
  color: rgba(226, 232, 240, 0.55);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 3px;
}

.dawki-itc-radar-row-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #06b6d4);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dawki-itc-radar-row-arrow svg { width: 12px; height: 12px; }
/* === END IT Consulting Radar === */

/* ============================================================================
 * IT Consulting — Transformation Gantt Roadmap
 * ============================================================================ */
.dawki-itc-gantt {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-itc-gantt { padding: 70px 20px; } }

.dawki-itc-gantt > .container { position: relative; z-index: 2; }

.dawki-itc-gantt-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-itc-gantt-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 182, 212, 0.10);
  border: 1px solid rgba(6, 182, 212, 0.30);
  color: #67e8f9;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-itc-gantt-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #06b6d4; box-shadow: 0 0 8px #06b6d4;
}
.dawki-itc-gantt-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-itc-gantt-title span {
  background: linear-gradient(90deg, #06b6d4, #4f7cff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-itc-gantt-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-itc-gantt-frame {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 28px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  overflow-x: auto;
}

.dawki-itc-gantt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 14px;
}
.dawki-itc-gantt-toolbar-name {
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dawki-itc-gantt-toolbar-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #67e8f9;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.32);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.dawki-itc-gantt-toolbar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dawki-itc-gantt-toolbar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(226, 232, 240, 0.78);
  font-weight: 600;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-itc-gantt-toolbar-legend-dot {
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--leg);
}

.dawki-itc-gantt-grid {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  min-width: 760px;
}
@media (max-width: 575px) {
  .dawki-itc-gantt-grid { grid-template-columns: 130px 1fr; min-width: 600px; }
}

.dawki-itc-gantt-headers {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.dawki-itc-gantt-header-month {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
  font-family: ui-monospace, "Courier New", monospace;
  text-align: center;
  border-right: 1px dashed rgba(255, 255, 255, 0.06);
}
.dawki-itc-gantt-header-month:last-child { border-right: none; }
.dawki-itc-gantt-header-month strong {
  display: block;
  color: rgba(226, 232, 240, 0.85);
  font-size: 9px;
  letter-spacing: 0.6px;
}

.dawki-itc-gantt-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  margin-bottom: 14px;
  position: relative;
}
.dawki-itc-gantt-row:last-child { margin-bottom: 0; }

.dawki-itc-gantt-label {
  grid-column: 1;
  padding-right: 14px;
}
.dawki-itc-gantt-label-name {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.1px;
  margin-bottom: 2px;
}
.dawki-itc-gantt-label-owner {
  font-size: 10.5px;
  color: rgba(226, 232, 240, 0.55);
  font-weight: 600;
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.3px;
}

.dawki-itc-gantt-track {
  grid-column: 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 38px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 8px;
  overflow: hidden;
}
.dawki-itc-gantt-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(8.333% - 1px),
    rgba(255, 255, 255, 0.04) calc(8.333% - 1px),
    rgba(255, 255, 255, 0.04) 8.333%
  );
}

.dawki-itc-gantt-bar {
  position: absolute;
  top: 6px;
  bottom: 6px;
  background: linear-gradient(135deg, var(--bar-a), var(--bar-b));
  border-radius: 6px;
  z-index: 2;
  transform-origin: left center;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 0 16px var(--bar-glow, rgba(168, 85, 247, 0.4)),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.dawki-itc-gantt-bar-mile {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--mile-color, #ffffff);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 3;
  box-shadow: 0 0 8px var(--mile-color, #ffffff);
}

/* Dependency arrow between bars */
.dawki-itc-gantt-dep {
  position: absolute;
  border-left: 2px dashed rgba(168, 85, 247, 0.55);
  border-bottom: 2px dashed rgba(168, 85, 247, 0.55);
  z-index: 1;
  pointer-events: none;
}

/* "Today" line marker (vertical) */
.dawki-itc-gantt-today {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: linear-gradient(180deg, transparent, #ec4899, transparent);
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
}
.dawki-itc-gantt-today::before {
  content: "TODAY";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #ec4899;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: ui-monospace, "Courier New", monospace;
}

.dawki-itc-gantt-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1080px;
  margin: 36px auto 0;
}
@media (max-width: 991px) { .dawki-itc-gantt-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dawki-itc-gantt-stats { grid-template-columns: 1fr; } }

.dawki-itc-gantt-stat {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
}
.dawki-itc-gantt-stat-key {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
  font-family: ui-monospace, "Courier New", monospace;
  margin-bottom: 4px;
}
.dawki-itc-gantt-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.dawki-itc-gantt-stat-sub {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.55);
  margin-top: 2px;
}
/* === END IT Consulting Gantt === */

/* ============================================================================
 * Automated Testing — Test Runner Terminal Output
 * ============================================================================ */
.dawki-ats-runner {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0a1c1a 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-ats-runner { padding: 70px 20px; } }

.dawki-ats-runner::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(34, 197, 94, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-ats-runner::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-ats-runner > .container { position: relative; z-index: 2; }

.dawki-ats-runner-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-ats-runner-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: #86efac;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-ats-runner-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
}
.dawki-ats-runner-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-ats-runner-title span {
  background: linear-gradient(90deg, #22c55e, #06b6d4, #4f7cff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-ats-runner-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-ats-runner-window {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background: #0a1115;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dawki-ats-runner-window::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(6, 182, 212, 0.4), rgba(79, 124, 255, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.dawki-ats-runner-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #11181c 0%, #0a1115 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dawki-ats-runner-titlebar-dots {
  display: flex; gap: 6px;
}
.dawki-ats-runner-titlebar-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.dawki-ats-runner-titlebar-dots span:nth-child(1) { background: #ff605c; }
.dawki-ats-runner-titlebar-dots span:nth-child(2) { background: #ffbd44; }
.dawki-ats-runner-titlebar-dots span:nth-child(3) { background: #00ca4e; }
.dawki-ats-runner-titlebar-name {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.6);
  flex: 1;
  text-align: center;
}
.dawki-ats-runner-titlebar-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #86efac;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-ats-runner-titlebar-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: dawki-ats-pulse 1.6s ease-in-out infinite;
}
@keyframes dawki-ats-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.dawki-ats-runner-body {
  padding: 18px 20px 14px;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.85);
}

.dawki-ats-runner-cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.55);
  margin-bottom: 14px;
}
.dawki-ats-runner-cmd-prompt {
  color: #22c55e;
  font-weight: 800;
}
.dawki-ats-runner-cmd-text {
  color: rgba(226, 232, 240, 0.92);
}

.dawki-ats-runner-suite {
  margin-bottom: 14px;
}

.dawki-ats-runner-suite-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  margin-bottom: 8px;
  padding: 4px 0;
}
.dawki-ats-runner-suite-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--tag-bg);
  color: #ffffff;
}
.dawki-ats-runner-suite-tag--pass { background: #22c55e; }
.dawki-ats-runner-suite-tag--fail { background: #ef4444; }
.dawki-ats-runner-suite-tag--skip { background: #fbbf24; color: #422006; }
.dawki-ats-runner-suite-name {
  color: rgba(226, 232, 240, 0.85);
}
.dawki-ats-runner-suite-name strong {
  color: #ffffff;
  font-weight: 700;
}
.dawki-ats-runner-suite-time {
  margin-left: auto;
  color: rgba(226, 232, 240, 0.4);
  font-size: 11.5px;
}

.dawki-ats-runner-tests {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px dashed rgba(255, 255, 255, 0.08);
  margin-left: 6px;
}
.dawki-ats-runner-test {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  padding: 2px 0;
}
.dawki-ats-runner-test-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 13px;
  line-height: 1;
}
.dawki-ats-runner-test-icon--pass { color: #22c55e; }
.dawki-ats-runner-test-icon--fail { color: #ef4444; }
.dawki-ats-runner-test-icon--skip { color: #fbbf24; }
.dawki-ats-runner-test-name {
  color: rgba(226, 232, 240, 0.88);
}
.dawki-ats-runner-test-name--skip { color: rgba(226, 232, 240, 0.55); }
.dawki-ats-runner-test-name--fail { color: #fca5a5; }
.dawki-ats-runner-test-time {
  font-size: 10.5px;
  color: rgba(226, 232, 240, 0.4);
  font-variant-numeric: tabular-nums;
}

.dawki-ats-runner-fail-block {
  background: rgba(239, 68, 68, 0.06);
  border-left: 2px solid #ef4444;
  padding: 8px 12px;
  margin: 6px 0 6px 32px;
  font-size: 11.5px;
  color: rgba(252, 165, 165, 0.95);
  border-radius: 0 6px 6px 0;
}
.dawki-ats-runner-fail-block-line {
  display: block;
  white-space: pre;
}

.dawki-ats-runner-summary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 20px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 12px;
}
.dawki-ats-runner-summary-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(226, 232, 240, 0.78);
}
.dawki-ats-runner-summary-line strong {
  color: #ffffff;
  font-weight: 700;
}
.dawki-ats-runner-summary-line-pass strong { color: #86efac; }
.dawki-ats-runner-summary-line-fail strong { color: #fca5a5; }
.dawki-ats-runner-summary-line-skip strong { color: #fde68a; }
.dawki-ats-runner-summary-bar {
  flex: 1 1 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
  display: flex;
}
.dawki-ats-runner-summary-bar-seg {
  height: 100%;
  transform-origin: left center;
}
.dawki-ats-runner-summary-bar-seg--pass { background: linear-gradient(90deg, #22c55e, #06b6d4); }
.dawki-ats-runner-summary-bar-seg--skip { background: #fbbf24; }
.dawki-ats-runner-summary-bar-seg--fail { background: #ef4444; }
/* === END Automated Testing Runner === */

/* ============================================================================
 * Automated Testing — Cross-Browser/Device Test Matrix
 * ============================================================================ */
.dawki-ats-matrix {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-ats-matrix { padding: 70px 20px; } }

.dawki-ats-matrix > .container { position: relative; z-index: 2; }

.dawki-ats-matrix-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-ats-matrix-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 124, 255, 0.10);
  border: 1px solid rgba(79, 124, 255, 0.30);
  color: #93c5fd;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-ats-matrix-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4f7cff; box-shadow: 0 0 8px #4f7cff;
}
.dawki-ats-matrix-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-ats-matrix-title span {
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-ats-matrix-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-ats-matrix-frame {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 24px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  overflow-x: auto;
}

.dawki-ats-matrix-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.dawki-ats-matrix-toolbar-name {
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dawki-ats-matrix-toolbar-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.32);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.dawki-ats-matrix-toolbar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-ats-matrix-toolbar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(226, 232, 240, 0.78);
  font-weight: 600;
}
.dawki-ats-matrix-toolbar-legend-dot {
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--leg);
  box-shadow: 0 0 6px var(--leg);
}

.dawki-ats-matrix-grid {
  display: grid;
  grid-template-columns: 220px repeat(var(--cols, 6), 1fr);
  gap: 6px;
  min-width: 760px;
}
@media (max-width: 575px) {
  .dawki-ats-matrix-grid { grid-template-columns: 140px repeat(var(--cols, 6), 1fr); min-width: 600px; }
}

.dawki-ats-matrix-corner {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(226, 232, 240, 0.45);
  text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace;
  display: flex;
  align-items: flex-end;
  padding-bottom: 8px;
}

.dawki-ats-matrix-col-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.dawki-ats-matrix-col-head img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.dawki-ats-matrix-col-head-letter {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--head-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}
.dawki-ats-matrix-col-head-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(226, 232, 240, 0.65);
  font-family: ui-monospace, "Courier New", monospace;
  text-transform: uppercase;
  text-align: center;
}

.dawki-ats-matrix-row-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12.5px;
  color: #ffffff;
  font-weight: 700;
  padding-right: 12px;
  letter-spacing: -0.1px;
}
.dawki-ats-matrix-row-label small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.55);
  margin-top: 1px;
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.3px;
}

.dawki-ats-matrix-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dawki-ats-matrix-cell:hover {
  transform: scale(1.1);
  z-index: 3;
}
.dawki-ats-matrix-cell--pass {
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.20) 0%, rgba(34, 197, 94, 0.06) 100%);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #86efac;
}
.dawki-ats-matrix-cell--flake {
  background: linear-gradient(160deg, rgba(251, 191, 36, 0.20) 0%, rgba(251, 191, 36, 0.06) 100%);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fde68a;
}
.dawki-ats-matrix-cell--fail {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.22) 0%, rgba(239, 68, 68, 0.06) 100%);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}
.dawki-ats-matrix-cell--skip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.4);
}
.dawki-ats-matrix-cell svg { width: 18px; height: 18px; }

.dawki-ats-matrix-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1080px;
  margin: 36px auto 0;
}
@media (max-width: 991px) { .dawki-ats-matrix-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dawki-ats-matrix-stats { grid-template-columns: 1fr; } }

.dawki-ats-matrix-stat {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
}
.dawki-ats-matrix-stat-key {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
  font-family: ui-monospace, "Courier New", monospace;
  margin-bottom: 4px;
}
.dawki-ats-matrix-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.dawki-ats-matrix-stat-sub {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.55);
  margin-top: 2px;
}
/* === END Automated Testing Matrix === */

/* ============================================================================
 * FAQ Page — Hero, Stats, Tabs, Accordion, Help Cards
 * ============================================================================ */
.dawki-faq-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 30px 90px;
  background: #02060f;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 768px) { .dawki-faq-hero { padding: 110px 20px 70px; min-height: 380px; } }

.dawki-faq-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  z-index: 0;
}
.dawki-faq-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(2, 6, 15, 0.35) 0%, rgba(2, 6, 15, 0.92) 70%),
    linear-gradient(180deg, rgba(2, 6, 15, 0.55), rgba(2, 6, 15, 0.85));
  z-index: 1;
}

.dawki-faq-hero-marks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.dawki-faq-hero-mark {
  position: absolute;
  font-size: 42px;
  font-weight: 800;
  color: rgba(168, 85, 247, 0.18);
  font-family: ui-monospace, "Courier New", monospace;
  animation: dawki-faq-mark-bob 6s ease-in-out infinite;
}
.dawki-faq-hero-mark--a { top: 18%; left: 8%;  animation-delay: 0s; }
.dawki-faq-hero-mark--b { top: 58%; left: 12%; animation-delay: 1.2s; }
.dawki-faq-hero-mark--c { top: 22%; right: 10%; animation-delay: 2.4s; }
.dawki-faq-hero-mark--d { top: 64%; right: 14%; animation-delay: 3.6s; }
@keyframes dawki-faq-mark-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0.18; }
  50%      { transform: translateY(-14px) rotate(6deg); opacity: 0.28; }
}

.dawki-faq-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.dawki-faq-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-faq-hero-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-faq-hero-title {
  color: #ffffff;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 0 0 18px;
}
.dawki-faq-hero-title span {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-faq-hero-subtitle {
  color: rgba(226, 232, 240, 0.78);
  font-size: 17px;
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto;
}

/* Stats strip */
.dawki-faq-stats {
  position: relative;
  padding: 70px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0d1530 50%, #050d1c 100%);
}
@media (max-width: 768px) { .dawki-faq-stats { padding: 60px 20px; } }

.dawki-faq-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 991px) { .dawki-faq-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dawki-faq-stats-grid { grid-template-columns: 1fr; } }

.dawki-faq-stat {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 22px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.dawki-faq-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.18);
}
.dawki-faq-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--st-a), var(--st-b));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 0 18px var(--st-glow, rgba(168, 85, 247, 0.45));
}
.dawki-faq-stat-icon svg { width: 22px; height: 22px; }
.dawki-faq-stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}
.dawki-faq-stat-suffix {
  font-size: 18px;
  font-weight: 800;
  margin-left: 2px;
  -webkit-text-fill-color: initial;
  color: var(--st-a);
}
.dawki-faq-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(226, 232, 240, 0.6);
  text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace;
  margin-top: 4px;
}

/* FAQ list section */
.dawki-faq-main {
  position: relative;
  padding: 90px 30px 110px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
}
@media (max-width: 768px) { .dawki-faq-main { padding: 70px 20px 90px; } }

.dawki-faq-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.dawki-faq-main > .container { position: relative; z-index: 2; }

.dawki-faq-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.dawki-faq-heading-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 12px;
}
.dawki-faq-heading-title span {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-faq-heading-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 15.5px;
  line-height: 1.7;
}

/* Search bar */
.dawki-faq-search {
  max-width: 600px;
  margin: 0 auto 22px;
  position: relative;
}
.dawki-faq-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 14px 18px 14px 46px;
  color: #ffffff;
  font-size: 14.5px;
  font-family: inherit;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.dawki-faq-search-input::placeholder {
  color: rgba(226, 232, 240, 0.5);
}
.dawki-faq-search-input:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.12);
}
.dawki-faq-search-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: rgba(226, 232, 240, 0.55);
  pointer-events: none;
}
.dawki-faq-search-icon svg { width: 18px; height: 18px; }

/* Tabs */
.dawki-faq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto 32px;
}
.dawki-faq-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(226, 232, 240, 0.78);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  letter-spacing: 0.3px;
}
.dawki-faq-tab:hover {
  background: rgba(168, 85, 247, 0.08);
  color: #ffffff;
}
.dawki-faq-tab--active {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(168, 85, 247, 0.32);
}
.dawki-faq-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 800;
  font-family: ui-monospace, "Courier New", monospace;
}

/* FAQ list */
.dawki-faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dawki-faq-item {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.dawki-faq-item--open {
  border-color: rgba(168, 85, 247, 0.40);
  box-shadow: 0 16px 40px rgba(168, 85, 247, 0.18);
}

.dawki-faq-item-trigger {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 18px 22px;
  color: #ffffff;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  letter-spacing: -0.1px;
  font-family: inherit;
}
@media (max-width: 575px) { .dawki-faq-item-trigger { padding: 16px 18px; font-size: 14.5px; } }

.dawki-faq-item-cat {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--cat-bg, rgba(168, 85, 247, 0.16));
  color: var(--cat-color, #d8b4fe);
  border: 1px solid var(--cat-border, rgba(168, 85, 247, 0.32));
  font-family: ui-monospace, "Courier New", monospace;
  flex-shrink: 0;
}

.dawki-faq-item-q {
  flex: 1;
  line-height: 1.4;
}

.dawki-faq-item-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(226, 232, 240, 0.85);
  flex-shrink: 0;
  transition: background 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dawki-faq-item--open .dawki-faq-item-toggle {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  border-color: transparent;
  color: #ffffff;
  transform: rotate(45deg);
}
.dawki-faq-item-toggle svg { width: 14px; height: 14px; }

.dawki-faq-item-body {
  overflow: hidden;
}
.dawki-faq-item-body-inner {
  padding: 0 22px 20px 22px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 14.5px;
  line-height: 1.7;
}
@media (max-width: 575px) { .dawki-faq-item-body-inner { padding: 0 18px 18px 18px; font-size: 14px; } }

.dawki-faq-empty {
  text-align: center;
  padding: 48px 20px;
  color: rgba(226, 232, 240, 0.5);
  font-size: 14.5px;
}

/* Help cards section */
.dawki-faq-help {
  position: relative;
  padding: 90px 30px;
  background: linear-gradient(135deg, #0e0a1c 0%, #14081a 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-faq-help { padding: 70px 20px; } }

.dawki-faq-help::before {
  content: "";
  position: absolute;
  top: 5%; left: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-faq-help > .container { position: relative; z-index: 2; }

.dawki-faq-help-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px;
}
.dawki-faq-help-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(236, 72, 153, 0.10);
  border: 1px solid rgba(236, 72, 153, 0.30);
  color: #fbcfe8;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-faq-help-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ec4899; box-shadow: 0 0 8px #ec4899;
}
.dawki-faq-help-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 12px;
}
.dawki-faq-help-title span {
  background: linear-gradient(90deg, #ec4899, #a855f7, #4f7cff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-faq-help-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 15.5px;
  line-height: 1.7;
}

.dawki-faq-help-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1140px;
  margin: 0 auto;
}
@media (max-width: 991px) { .dawki-faq-help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-faq-help-grid { grid-template-columns: 1fr; } }

.dawki-faq-help-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 26px 22px 22px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.dawki-faq-help-card:hover {
  transform: translateY(-6px);
  border-color: var(--ch-color, rgba(236, 72, 153, 0.45));
  box-shadow: 0 22px 48px rgba(236, 72, 153, 0.18);
}

.dawki-faq-help-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--ch-a), var(--ch-b));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 0 22px var(--ch-glow, rgba(236, 72, 153, 0.5));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dawki-faq-help-card-icon svg { width: 22px; height: 22px; }
.dawki-faq-help-card:hover .dawki-faq-help-card-icon {
  transform: scale(1.08) rotate(-6deg);
}

.dawki-faq-help-card-title {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.1px;
}
.dawki-faq-help-card-desc {
  color: rgba(226, 232, 240, 0.68);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 14px;
  flex: 1;
}
.dawki-faq-help-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ch-color, #fbcfe8);
  letter-spacing: 0.2px;
}
.dawki-faq-help-card-cta svg {
  width: 13px; height: 13px;
  transition: transform 0.3s ease;
}
.dawki-faq-help-card:hover .dawki-faq-help-card-cta svg {
  transform: translateX(3px);
}
/* === END FAQ Page === */

/* ============================================================================
 * Blog Index — Hero, Card Grid
 * ============================================================================ */
.dawki-blog-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 30px 90px;
  background: #02060f;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 768px) { .dawki-blog-hero { padding: 110px 20px 70px; min-height: 380px; } }

.dawki-blog-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  z-index: 0;
}
.dawki-blog-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(2, 6, 15, 0.30) 0%, rgba(2, 6, 15, 0.92) 70%),
    linear-gradient(180deg, rgba(2, 6, 15, 0.55), rgba(2, 6, 15, 0.85));
  z-index: 1;
}

.dawki-blog-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.dawki-blog-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 124, 255, 0.10);
  border: 1px solid rgba(79, 124, 255, 0.30);
  color: #93c5fd;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-blog-hero-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4f7cff; box-shadow: 0 0 8px #4f7cff;
}
.dawki-blog-hero-title {
  color: #ffffff;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 0 0 18px;
}
.dawki-blog-hero-title span {
  background: linear-gradient(90deg, #4f7cff, #06b6d4, #22c55e);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-blog-hero-subtitle {
  color: rgba(226, 232, 240, 0.78);
  font-size: 17px;
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto;
}

/* Card grid */
.dawki-blog-list {
  position: relative;
  padding: 90px 30px 110px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
}
@media (max-width: 768px) { .dawki-blog-list { padding: 70px 20px 90px; } }

.dawki-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 991px) { .dawki-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-blog-grid { grid-template-columns: 1fr; max-width: 420px; } }

.dawki-blog-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.45s ease,
              border-color 0.45s ease;
}
.dawki-blog-card:hover {
  transform: translateY(-8px);
  border-color: rgba(79, 124, 255, 0.28);
  box-shadow: 0 26px 60px rgba(79, 124, 255, 0.18);
}

.dawki-blog-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e2e8f0;
}
.dawki-blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dawki-blog-card:hover .dawki-blog-card-thumb img {
  transform: scale(1.05);
}

.dawki-blog-card-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.95);
  color: var(--cat-color, #4f7cff);
  padding: 5px 11px;
  border-radius: 999px;
  font-family: ui-monospace, "Courier New", monospace;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 2;
}

.dawki-blog-card-content {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.dawki-blog-card-date {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

.dawki-blog-card-title {
  color: #1d4ed8;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.2px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}
.dawki-blog-card-title a {
  color: inherit;
  text-decoration: none;
}
.dawki-blog-card:hover .dawki-blog-card-title { color: #4f7cff; }

.dawki-blog-card-spacer { flex: 1; }

.dawki-blog-card-cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #4f7cff 0%, #06b6d4 100%);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 22px rgba(79, 124, 255, 0.32);
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.dawki-blog-card-cta:hover {
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(79, 124, 255, 0.45);
}
.dawki-blog-card-cta svg {
  width: 14px; height: 14px;
  transition: transform 0.3s ease;
}
.dawki-blog-card-cta:hover svg {
  transform: translateX(3px);
}
/* === END Blog Index === */

/* ============================================================================
 * Home — Industries We Power (animated industry cards grid)
 * ============================================================================ */
.dawki-home-ind {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-home-ind { padding: 80px 20px; } }

.dawki-home-ind::before {
  content: "";
  position: absolute;
  top: 5%; left: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}
.dawki-home-ind::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

.dawki-home-ind > .container { position: relative; z-index: 2; }

.dawki-home-ind-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.dawki-home-ind-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 124, 255, 0.10);
  border: 1px solid rgba(79, 124, 255, 0.30);
  color: #93c5fd;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-home-ind-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4f7cff; box-shadow: 0 0 8px #4f7cff;
}
.dawki-home-ind-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-home-ind-title span {
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-home-ind-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-home-ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1140px;
  margin: 0 auto;
}
@media (max-width: 991px) { .dawki-home-ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-home-ind-grid { grid-template-columns: 1fr; max-width: 380px; } }

.dawki-home-ind-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px 26px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  cursor: default;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.45s ease, box-shadow 0.45s ease;
}

/* Gradient border ring animates in on hover */
.dawki-home-ind-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(135deg, var(--ic-a, #4f7cff), var(--ic-b, #a855f7));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Diagonal shine sweep on hover */
.dawki-home-ind-card::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.10) 50%, transparent 70%);
  transform: skewX(-22deg);
  transition: left 0.85s ease;
  pointer-events: none;
}

.dawki-home-ind-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px var(--ic-glow, rgba(79, 124, 255, 0.22));
}
.dawki-home-ind-card:hover::before { opacity: 1; }
.dawki-home-ind-card:hover::after  { left: 200%; }

.dawki-home-ind-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ic-a, #4f7cff), var(--ic-b, #a855f7));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 0 22px var(--ic-glow, rgba(79, 124, 255, 0.5));
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dawki-home-ind-card:hover .dawki-home-ind-card-icon {
  transform: scale(1.1) rotate(-6deg);
}
.dawki-home-ind-card-icon svg { width: 26px; height: 26px; }

.dawki-home-ind-card-title {
  color: #ffffff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin: 0 0 8px;
}
.dawki-home-ind-card-desc {
  color: rgba(226, 232, 240, 0.72);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 14px;
}

.dawki-home-ind-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dawki-home-ind-card-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ic-color, #93c5fd);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: ui-monospace, "Courier New", monospace;
}
/* === END Industries We Power === */

/* === Industries cards — horizontal compact layout =========================
   Image on the left, content on the right. Compact height (~180px each) so
   multiple cards fit within the pinned viewport, and the scroll-translated
   track moves cleanly past all of them in one scroll session. */

.dawki-home-ind-card {
    padding: 0 !important;
    overflow: hidden;
    display: grid !important;
    grid-template-columns: 200px 1fr;
    align-items: stretch;
}

.dawki-home-ind-card-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 180px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dawki-home-ind-card:hover .dawki-home-ind-card-image {
    transform: scale(1.06);
}
.dawki-home-ind-card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, rgba(5, 13, 28, 0.55) 100%);
    pointer-events: none;
}

.dawki-home-ind-card-body {
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
}

/* Icon now sits inline with title, not floating over image */
.dawki-home-ind-card-icon {
    margin-bottom: 14px !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 22px var(--ic-glow, rgba(79, 124, 255, 0.4));
}

/* Tighter title/desc spacing for compact card */
.dawki-home-ind-card-title {
    margin-bottom: 6px !important;
    font-size: 18px !important;
}
.dawki-home-ind-card-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 0 10px !important;
}

@media (max-width: 575px) {
    .dawki-home-ind-card {
        grid-template-columns: 130px 1fr;
    }
    .dawki-home-ind-card-image { min-height: 150px; }
    .dawki-home-ind-card-body { padding: 16px 18px; }
}

/* Bento grid layout — clean 3-column grid with stagger entrance + subtle
   floating idle animation per card + 3D tilt-in reveal. No sticky/scroll
   trickery, no wasted vertical space. */
.dawki-home-ind--bento .dawki-home-ind-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    perspective: 1200px;
}
@media (max-width: 991px) {
    .dawki-home-ind--bento .dawki-home-ind-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}
@media (max-width: 575px) {
    .dawki-home-ind--bento .dawki-home-ind-grid {
        grid-template-columns: 1fr;
    }
}

.dawki-home-ind-grid-cell {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
    /* Subtle infinite float — alternates direction by data-index via JS or
     * by nth-child rules below for visual variety */
    animation: dawki-bento-float 6s ease-in-out infinite;
}
.dawki-home-ind-grid-cell:nth-child(2n) { animation-direction: reverse; }
.dawki-home-ind-grid-cell:nth-child(3n) { animation-duration: 7s; }
.dawki-home-ind-grid-cell:nth-child(4n) { animation-duration: 8s; }

@keyframes dawki-bento-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Card itself — fills grid cell, vertical layout (image on top, content below) */
.dawki-home-ind--bento .dawki-home-ind-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    height: 100%;
    min-height: 0;
}
.dawki-home-ind--bento .dawki-home-ind-card-image {
    aspect-ratio: 16 / 10;
    min-height: 0;
    border-radius: 18px 18px 0 0;
    width: 100%;
    height: auto;
}
.dawki-home-ind--bento .dawki-home-ind-card-image-overlay {
    background: linear-gradient(180deg, transparent 50%, rgba(5, 13, 28, 0.65) 100%);
}
.dawki-home-ind--bento .dawki-home-ind-card-body {
    padding: 22px 24px 26px;
    justify-content: flex-start;
}
.dawki-home-ind--bento .dawki-home-ind-card-icon {
    margin-top: -42px !important;
    margin-bottom: 14px !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 24px var(--ic-glow, rgba(79, 124, 255, 0.5)),
                0 0 0 4px rgba(5, 13, 28, 0.95);
}
.dawki-home-ind--bento .dawki-home-ind-card-title {
    font-size: 18px !important;
    margin-bottom: 8px !important;
}
.dawki-home-ind--bento .dawki-home-ind-card-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 0 12px !important;
}

@media (prefers-reduced-motion: reduce) {
    .dawki-home-ind-grid-cell {
        animation: none;
    }
}
/* === END Industries bento grid === */

/* === Home Contact — "Let's Build Something Great Together" =================
   Light-themed split: heading + supporting copy on the left, white form card
   with radio-style help-type cards on the right. Posts to the same /contact
   endpoint as the dedicated Contact page via Inertia useForm. */
.dawki-home-contact {
    position: relative;
    padding: clamp(70px, 9vw, 120px) 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%, #f0f5ff 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-home-contact::before,
.dawki-home-contact::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}
.dawki-home-contact::before {
    width: 380px; height: 380px;
    top: -120px; left: -100px;
    background: radial-gradient(circle, rgba(91, 158, 255, 0.18) 0%, transparent 70%);
}
.dawki-home-contact::after {
    width: 420px; height: 420px;
    bottom: -180px; right: -120px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 70%);
}
.dawki-home-contact > .container {
    position: relative;
    z-index: 1;
}

.dawki-home-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 60px;
    align-items: center;
}
@media (max-width: 991px) {
    .dawki-home-contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* Centered variant — heading on top (full width), form below in single column */
.dawki-home-contact--centered .dawki-home-contact-top {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.dawki-home-contact--centered .dawki-home-contact-title {
    margin-bottom: 16px;
}
.dawki-home-contact--centered .dawki-home-contact-subtitle {
    margin-left: auto;
    margin-right: auto;
}
.dawki-home-contact-form-wrap {
    max-width: 760px;
    margin: 0 auto;
}
@media (max-width: 575px) {
    .dawki-home-contact--centered .dawki-home-contact-top { margin-bottom: 32px; }
}

/* LEFT — heading column */
.dawki-home-contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 158, 255, 0.12), rgba(168, 85, 247, 0.12));
    border: 1px solid rgba(91, 158, 255, 0.30);
    color: #4f7cff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.dawki-home-contact-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.6);
}
.dawki-home-contact-title {
    font-size: clamp(32px, 4.6vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    color: #0a1628;
    letter-spacing: -0.5px;
    margin: 0 0 18px;
}
.dawki-home-contact-title span {
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-home-contact-subtitle {
    font-size: 16px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
    max-width: 480px;
}

/* RIGHT — form card */
.dawki-home-contact-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08),
                0 4px 14px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
}
.dawki-home-contact-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    background-size: 250% auto;
}
@media (max-width: 575px) {
    .dawki-home-contact-card { padding: 22px; border-radius: 18px; }
}

.dawki-home-contact-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(6, 182, 212, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.40);
    color: #15803d;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
}

.dawki-home-contact-row {
    margin-bottom: 18px;
}
.dawki-home-contact-row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 575px) {
    .dawki-home-contact-row--two { grid-template-columns: 1fr; }
}

.dawki-home-contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.dawki-home-contact-field label {
    font-size: 13px;
    font-weight: 700;
    color: #0a1628;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dawki-home-contact-required { color: #ec4899; font-weight: 800; }
.dawki-home-contact-optional {
    color: #94a3b8;
    font-weight: 500;
    font-size: 11px;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 999px;
}

.dawki-home-contact-field input,
.dawki-home-contact-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    color: #0a1628;
    background: #ffffff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    font-family: inherit;
}
.dawki-home-contact-field input::placeholder,
.dawki-home-contact-field textarea::placeholder {
    color: #94a3b8;
}
.dawki-home-contact-field input:focus,
.dawki-home-contact-field textarea:focus {
    outline: none;
    border-color: #5b9eff;
    box-shadow: 0 0 0 4px rgba(91, 158, 255, 0.12);
}
.dawki-home-contact-field textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.55;
}

.dawki-home-contact-error {
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
}

/* Phone input with country code prefix */
.dawki-home-contact-phone {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.dawki-home-contact-phone:focus-within {
    border-color: #5b9eff;
    box-shadow: 0 0 0 4px rgba(91, 158, 255, 0.12);
}
.dawki-home-contact-phone-cc {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: #f8fafc;
    border-right: 1.5px solid #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
}
.dawki-home-contact-phone input {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1;
    padding: 13px 16px;
}
.dawki-home-contact-phone input:focus {
    box-shadow: none !important;
}

/* "How can we help?" radio cards */
.dawki-home-contact-help {
    margin-bottom: 22px;
}
.dawki-home-contact-help-label {
    font-size: 13px;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dawki-home-contact-help-hint {
    color: #94a3b8;
    font-weight: 500;
    font-size: 11px;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: lowercase;
}
.dawki-home-contact-help-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dawki-home-contact-help-option {
    display: grid;
    grid-template-columns: 44px 1fr 24px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}
.dawki-home-contact-help-option:hover {
    border-color: #c7d6ff;
    background: #f8fafc;
}
.dawki-home-contact-help-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.dawki-home-contact-help-option.is-active {
    border-color: #5b9eff;
    background: linear-gradient(135deg, rgba(91, 158, 255, 0.06), rgba(168, 85, 247, 0.04));
    box-shadow: 0 4px 14px rgba(91, 158, 255, 0.10);
}
.dawki-home-contact-help-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(91, 158, 255, 0.25);
}
.dawki-home-contact-help-icon svg { width: 22px; height: 22px; }
.dawki-home-contact-help-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dawki-home-contact-help-text strong {
    color: #0a1628;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.dawki-home-contact-help-text span {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}
.dawki-home-contact-help-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.dawki-home-contact-help-check svg {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.dawki-home-contact-help-option.is-active .dawki-home-contact-help-check {
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    border-color: transparent;
    transform: scale(1.05);
}
.dawki-home-contact-help-option.is-active .dawki-home-contact-help-check svg {
    opacity: 1;
    transform: scale(1);
}

/* Submit button */
.dawki-home-contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 12px 28px rgba(91, 158, 255, 0.35);
}
.dawki-home-contact-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(91, 158, 255, 0.45);
}
.dawki-home-contact-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
.dawki-home-contact-submit svg {
    transition: transform 0.3s ease;
}
.dawki-home-contact-submit:hover svg {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .dawki-home-contact-help-option,
    .dawki-home-contact-help-check,
    .dawki-home-contact-help-check svg,
    .dawki-home-contact-submit,
    .dawki-home-contact-submit svg,
    .dawki-home-contact-field input,
    .dawki-home-contact-field textarea {
        transition: none !important;
    }
}
/* === END Home Contact === */

/* === HomeStats — animated impact counters ================================= */
.dawki-home-stats {
    position: relative;
    padding: clamp(60px, 7vw, 90px) 0;
    background: linear-gradient(180deg, #050d1c 0%, #0a1628 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-home-stats::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 400px;
    background: radial-gradient(ellipse at center, rgba(91, 158, 255, 0.10) 0%, transparent 70%);
    pointer-events: none;
}
.dawki-home-stats > .container {
    position: relative;
    z-index: 1;
}
.dawki-home-stats-heading {
    text-align: center;
    margin-bottom: 48px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-home-stats-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(91, 158, 255, 0.12);
    border: 1px solid rgba(91, 158, 255, 0.30);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-home-stats-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.6);
}
.dawki-home-stats-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.dawki-home-stats-title span {
    background: linear-gradient(90deg, #5b9eff, #a855f7, #ec4899);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-home-stats-subtitle {
    color: rgba(255, 255, 255, 0.65);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}
.dawki-home-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
@media (max-width: 991px) { .dawki-home-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-home-stats-grid { grid-template-columns: 1fr; } }

.dawki-home-stats-card {
    text-align: center;
    padding: 32px 24px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
}
.dawki-home-stats-card:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 158, 255, 0.30);
    box-shadow: 0 18px 40px rgba(91, 158, 255, 0.18);
}
.dawki-home-stats-num {
    font-size: clamp(38px, 4.4vw, 56px);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #5b9eff, #a855f7, #ec4899);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -1.5px;
}
.dawki-home-stats-num em {
    font-style: normal;
    margin-left: 2px;
}
.dawki-home-stats-label {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
}
/* === END HomeStats === */

/* === HomeWhyChoose — 6 differentiator cards =============================== */
.dawki-home-why {
    position: relative;
    padding: clamp(80px, 10vw, 130px) 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-home-why-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}
.dawki-home-why-orb--a {
    width: 380px; height: 380px;
    top: -120px; left: -100px;
    background: radial-gradient(circle, rgba(91, 158, 255, 0.18) 0%, transparent 70%);
}
.dawki-home-why-orb--b {
    width: 420px; height: 420px;
    bottom: -180px; right: -120px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 70%);
}
.dawki-home-why > .container {
    position: relative;
    z-index: 1;
}
.dawki-home-why-heading {
    text-align: center;
    margin-bottom: 56px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-home-why-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 158, 255, 0.12), rgba(168, 85, 247, 0.12));
    border: 1px solid rgba(91, 158, 255, 0.30);
    color: #4f7cff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.dawki-home-why-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.6);
}
.dawki-home-why-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #0a1628;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-home-why-title span {
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-home-why-subtitle {
    color: #475569;
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}
.dawki-home-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 991px) { .dawki-home-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-home-why-grid { grid-template-columns: 1fr; } }

.dawki-home-why-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    padding: 30px 28px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    position: relative;
    overflow: hidden;
}
.dawki-home-why-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--w-a, #5b9eff), var(--w-b, #a855f7));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.dawki-home-why-card:hover {
    transform: translateY(-8px);
    border-color: rgba(91, 158, 255, 0.30);
    box-shadow: 0 22px 44px rgba(91, 158, 255, 0.14);
}
.dawki-home-why-card:hover::before { transform: scaleX(1); }
.dawki-home-why-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--w-a, #5b9eff), var(--w-b, #a855f7));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 10px 24px rgba(91, 158, 255, 0.30);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dawki-home-why-card-icon svg { width: 26px; height: 26px; }
.dawki-home-why-card:hover .dawki-home-why-card-icon {
    transform: scale(1.08) rotate(-6deg);
}
.dawki-home-why-card-title {
    font-size: 19px;
    font-weight: 700;
    color: #0a1628;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}
.dawki-home-why-card-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}
/* === END HomeWhyChoose === */

/* === HomeFAQ — accordion ================================================== */
.dawki-home-faq {
    position: relative;
    padding: clamp(70px, 9vw, 120px) 0;
    background: linear-gradient(180deg, #050d1c 0%, #0a1628 100%);
    overflow: hidden;
}
.dawki-home-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 70px;
    align-items: start;
}
@media (max-width: 991px) {
    .dawki-home-faq-grid { grid-template-columns: 1fr; gap: 36px; }
}
.dawki-home-faq-left { position: sticky; top: 110px; }
@media (max-width: 991px) { .dawki-home-faq-left { position: static; } }

.dawki-home-faq-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(91, 158, 255, 0.12);
    border: 1px solid rgba(91, 158, 255, 0.30);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.dawki-home-faq-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.6);
}
.dawki-home-faq-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}
.dawki-home-faq-title span {
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-home-faq-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 24px;
}
.dawki-home-faq-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #93c5fd;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease, gap 0.3s ease;
}
.dawki-home-faq-link:hover {
    color: #ffffff;
    gap: 12px;
}

.dawki-home-faq-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dawki-home-faq-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.dawki-home-faq-item.is-open {
    border-color: rgba(91, 158, 255, 0.40);
    background: linear-gradient(160deg, rgba(91, 158, 255, 0.06), rgba(168, 85, 247, 0.04));
}
.dawki-home-faq-q {
    width: 100%;
    background: transparent;
    border: none;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.1px;
    cursor: pointer;
    text-align: left;
    transition: color 0.3s ease;
}
.dawki-home-faq-q:hover { color: #93c5fd; }
.dawki-home-faq-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dawki-home-faq-item.is-open .dawki-home-faq-icon {
    transform: rotate(45deg);
}
.dawki-home-faq-a {
    padding: 0 24px;
}
.dawki-home-faq-a p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    padding: 0 0 22px;
}

@media (prefers-reduced-motion: reduce) {
    .dawki-home-stats-card,
    .dawki-home-why-card,
    .dawki-home-why-card-icon,
    .dawki-home-why-card::before,
    .dawki-home-faq-item,
    .dawki-home-faq-q,
    .dawki-home-faq-icon,
    .dawki-home-faq-link {
        transition: none !important;
    }
}
/* === END HomeFAQ === */

/* === HomeEngagement — "How You Hire Us" tab switcher ===================== */
.dawki-home-eng {
    position: relative;
    padding: clamp(80px, 9vw, 120px) 0;
    background: linear-gradient(180deg, #0a1628 0%, #050d1c 100%);
    overflow: hidden;
}

.dawki-home-eng-heading {
    text-align: center;
    margin-bottom: 40px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-home-eng-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(91, 158, 255, 0.12);
    border: 1px solid rgba(91, 158, 255, 0.30);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-home-eng-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.6);
}
.dawki-home-eng-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-home-eng-title span {
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-home-eng-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

/* Tab pills */
.dawki-home-eng-tabs-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
}
.dawki-home-eng-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}
.dawki-home-eng-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.dawki-home-eng-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}
.dawki-home-eng-tab.is-active {
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 100%);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(91, 158, 255, 0.35);
}
.dawki-home-eng-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dawki-home-eng-tab-icon svg { width: 16px; height: 16px; }
@media (max-width: 575px) {
    .dawki-home-eng-tabs { flex-direction: column; border-radius: 18px; }
    .dawki-home-eng-tab { justify-content: center; }
}

/* Detail panel */
.dawki-home-eng-panel-wrap {
    max-width: 1100px;
    margin: 0 auto;
}
.dawki-home-eng-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 50px;
    padding: 44px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(91, 158, 255, 0.20);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 767px) {
    .dawki-home-eng-panel { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
}

.dawki-home-eng-panel-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 12px 28px rgba(91, 158, 255, 0.35);
}
.dawki-home-eng-panel-icon svg { width: 30px; height: 30px; }

.dawki-home-eng-panel-title {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 14px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.dawki-home-eng-panel-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 22px;
}
.dawki-home-eng-panel-best {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    padding: 14px 18px;
    background: rgba(91, 158, 255, 0.10);
    border-left: 3px solid #5b9eff;
    border-radius: 8px;
}
.dawki-home-eng-panel-best strong { color: #ffffff; }

.dawki-home-eng-panel-right h4 {
    font-size: 13px;
    font-weight: 700;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 18px;
}
.dawki-home-eng-panel-right ul {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dawki-home-eng-panel-right li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.5;
}
.dawki-home-eng-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #06b6d4);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.dawki-home-eng-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(90deg, #5b9eff, #a855f7);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-radius: 999px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 24px rgba(91, 158, 255, 0.30);
}
.dawki-home-eng-cta:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(91, 158, 255, 0.45);
}
.dawki-home-eng-cta svg { transition: transform 0.3s ease; }
.dawki-home-eng-cta:hover svg { transform: translateX(3px); }
/* === END HomeEngagement === */

/* === HomeLifecycle — "From Idea to Launch" 5-step horizontal flow ========= */
.dawki-home-life {
    position: relative;
    padding: clamp(80px, 9vw, 120px) 0;
    background: linear-gradient(180deg, #ffffff 0%, #f0f5ff 100%);
    overflow: hidden;
}

.dawki-home-life-heading {
    text-align: center;
    margin-bottom: 60px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-home-life-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 158, 255, 0.12), rgba(168, 85, 247, 0.12));
    border: 1px solid rgba(91, 158, 255, 0.30);
    color: #4f7cff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-home-life-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.6);
}
.dawki-home-life-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #0a1628;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-home-life-title span {
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-home-life-subtitle {
    color: #475569;
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

.dawki-home-life-track {
    position: relative;
}

/* Connecting horizontal line behind the markers (animates 0 → 100% on view) */
.dawki-home-life-progress {
    position: absolute;
    top: 38px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    border-radius: 999px;
    transform-origin: left center;
    z-index: 0;
}
@media (max-width: 991px) {
    .dawki-home-life-progress { display: none; }
}

.dawki-home-life-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) { .dawki-home-life-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-home-life-grid { grid-template-columns: 1fr; } }

.dawki-home-life-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.dawki-home-life-step-marker {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: #4f7cff;
    box-shadow: 0 12px 28px rgba(91, 158, 255, 0.18),
                0 0 0 6px rgba(91, 158, 255, 0.08);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}
.dawki-home-life-step:hover .dawki-home-life-step-marker {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 18px 36px rgba(91, 158, 255, 0.30),
                0 0 0 8px rgba(91, 158, 255, 0.15);
    color: #ffffff;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
}
.dawki-home-life-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dawki-home-life-step-icon svg { width: 28px; height: 28px; }
.dawki-home-life-step-num {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(91, 158, 255, 0.40);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dawki-home-life-step-body {
    padding: 0 8px;
}
.dawki-home-life-step-time {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(91, 158, 255, 0.10);
    color: #4f7cff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.dawki-home-life-step-title {
    font-size: 17px;
    font-weight: 700;
    color: #0a1628;
    margin: 0 0 8px;
    letter-spacing: -0.2px;
    line-height: 1.25;
}
.dawki-home-life-step-desc {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dawki-home-eng-tab,
    .dawki-home-eng-cta,
    .dawki-home-eng-cta svg,
    .dawki-home-life-step-marker {
        transition: none !important;
    }
}
/* === END HomeLifecycle === */

/* === HomeMobileShowcase — animated phone mockup ============================
   Animations are pure CSS @keyframes with transform/opacity ONLY → all
   GPU-composited, zero layout/paint cost while idle. */
.dawki-mobile-show {
    position: relative;
    padding: clamp(80px, 9vw, 120px) 0;
    background: linear-gradient(180deg, #050d1c 0%, #0a1628 100%);
    overflow: hidden;
}
.dawki-mobile-show::before {
    content: "";
    position: absolute;
    top: 10%; right: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.dawki-mobile-show-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    .dawki-mobile-show-grid { grid-template-columns: 1fr; gap: 50px; }
}

/* Content side */
.dawki-mobile-show-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.30);
    color: #d8b4fe;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-mobile-show-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}
.dawki-mobile-show-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
}
.dawki-mobile-show-title span {
    background: linear-gradient(90deg, #a855f7 0%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-mobile-show-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 24px;
}
.dawki-mobile-show-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dawki-mobile-show-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.5;
}
.dawki-mobile-show-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.dawki-mobile-show-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-radius: 999px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 24px rgba(168, 85, 247, 0.30);
}
.dawki-mobile-show-cta:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(168, 85, 247, 0.45);
}
.dawki-mobile-show-cta svg { transition: transform 0.3s ease; }
.dawki-mobile-show-cta:hover svg { transform: translateX(3px); }

/* Phone stage */
.dawki-mobile-show-stage {
    position: relative;
    height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floating decorative chips around the phone */
.dawki-mobile-show-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #0a1628;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.20);
    z-index: 3;
    will-change: transform;
}
.dawki-mobile-show-chip--star {
    top: 12%;
    left: 6%;
    animation: dawki-mobile-float 4s ease-in-out infinite;
}
.dawki-mobile-show-chip--users {
    bottom: 16%;
    left: 0;
    animation: dawki-mobile-float 4.5s ease-in-out -1.5s infinite;
}
.dawki-mobile-show-chip--notif {
    top: 22%;
    right: 4%;
    animation: dawki-mobile-float 5s ease-in-out -2.5s infinite;
}
@keyframes dawki-mobile-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Phone frame */
.dawki-mobile-show-phone {
    position: relative;
    width: 280px;
    height: 560px;
    background: #0a1628;
    border-radius: 42px;
    border: 8px solid #1a2238;
    box-shadow:
        0 40px 80px rgba(168, 85, 247, 0.25),
        0 0 0 2px rgba(255, 255, 255, 0.05),
        inset 0 0 0 2px rgba(255, 255, 255, 0.02);
    overflow: hidden;
    z-index: 2;
    will-change: transform;
    animation: dawki-mobile-bob 6s ease-in-out infinite;
}
@keyframes dawki-mobile-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.dawki-mobile-show-phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 28px;
    background: #050d1c;
    border-radius: 16px;
    z-index: 5;
}
.dawki-mobile-show-phone-screen {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #f8fafc 0%, #e0e7ff 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dawki-mobile-show-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px 6px;
    font-size: 12px;
    font-weight: 700;
    color: #0a1628;
}
.dawki-mobile-show-statusbar-icons { display: inline-flex; gap: 4px; }
.dawki-mobile-show-statusbar-icons i {
    width: 6px; height: 8px;
    background: #0a1628;
    border-radius: 2px;
    display: inline-block;
}

/* Carousel — sliding screens animation */
.dawki-mobile-show-carousel {
    flex: 1;
    display: flex;
    width: 300%;
    animation: dawki-mobile-slide 12s ease-in-out infinite;
    will-change: transform;
}
@keyframes dawki-mobile-slide {
    0%,   25%  { transform: translateX(0%); }
    33%,  58%  { transform: translateX(-33.333%); }
    66%,  91%  { transform: translateX(-66.666%); }
    100%       { transform: translateX(0%); }
}
.dawki-mobile-show-screen {
    flex: 0 0 33.333%;
    padding: 14px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dawki-mobile-show-greet {
    font-size: 18px;
    font-weight: 800;
    color: #0a1628;
}

/* Home screen content */
.dawki-mobile-show-balance {
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    padding: 16px 18px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dawki-mobile-show-balance span { font-size: 11px; opacity: 0.85; }
.dawki-mobile-show-balance strong { font-size: 22px; font-weight: 800; }
.dawki-mobile-show-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.dawki-mobile-show-actions span {
    background: rgba(91, 158, 255, 0.10);
    color: #0a1628;
    text-align: center;
    padding: 10px 4px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}
.dawki-mobile-show-list-tx {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.dawki-mobile-show-list-tx > div {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 8px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.dawki-mobile-show-list-tx i { width: 22px; height: 22px; border-radius: 50%; }
.dawki-mobile-show-list-tx span { font-size: 11px; color: #475569; font-weight: 600; }
.dawki-mobile-show-list-tx strong { font-size: 11px; font-weight: 800; color: #0a1628; }

/* Chart screen */
.dawki-mobile-show-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
    height: 220px;
    padding: 16px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.dawki-mobile-show-bars span {
    flex: 1;
    background: linear-gradient(180deg, #a855f7, #5b9eff);
    border-radius: 4px;
    transform-origin: bottom;
    animation: dawki-mobile-bar-grow 1.4s ease-out backwards;
}
.dawki-mobile-show-bars span:nth-child(1) { animation-delay: 0.1s; }
.dawki-mobile-show-bars span:nth-child(2) { animation-delay: 0.2s; }
.dawki-mobile-show-bars span:nth-child(3) { animation-delay: 0.3s; }
.dawki-mobile-show-bars span:nth-child(4) { animation-delay: 0.4s; }
.dawki-mobile-show-bars span:nth-child(5) { animation-delay: 0.5s; }
.dawki-mobile-show-bars span:nth-child(6) { animation-delay: 0.6s; }
.dawki-mobile-show-bars span:nth-child(7) { animation-delay: 0.7s; }
@keyframes dawki-mobile-bar-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
.dawki-mobile-show-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}
.dawki-mobile-show-stats-row > div {
    background: #ffffff;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dawki-mobile-show-stats-row strong { font-size: 16px; font-weight: 800; color: #22c55e; }
.dawki-mobile-show-stats-row span { font-size: 10px; color: #64748b; font-weight: 600; }

/* Chat screen */
.dawki-mobile-show-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}
.dawki-mobile-show-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    max-width: 80%;
}
.dawki-mobile-show-bubble--in {
    background: #ffffff;
    color: #0a1628;
    align-self: flex-start;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.dawki-mobile-show-bubble--out {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #ffffff;
    align-self: flex-end;
}
.dawki-mobile-show-typing {
    display: inline-flex;
    align-self: flex-start;
    gap: 4px;
    padding: 12px 14px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.dawki-mobile-show-typing i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: dawki-mobile-typing 1.4s ease-in-out infinite;
}
.dawki-mobile-show-typing i:nth-child(2) { animation-delay: 0.2s; }
.dawki-mobile-show-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dawki-mobile-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1; transform: translateY(-3px); }
}

.dawki-mobile-show-home-indicator {
    width: 100px;
    height: 4px;
    background: #0a1628;
    border-radius: 999px;
    margin: 8px auto 6px;
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .dawki-mobile-show-phone,
    .dawki-mobile-show-chip,
    .dawki-mobile-show-carousel,
    .dawki-mobile-show-bars span,
    .dawki-mobile-show-typing i,
    .dawki-mobile-show-cta,
    .dawki-mobile-show-cta svg { animation: none !important; transition: none !important; }
}
/* === END HomeMobileShowcase === */

/* === HomeWebShowcase — animated browser / dashboard mockup ================= */
.dawki-web-show {
    position: relative;
    padding: clamp(80px, 9vw, 120px) 0;
    background: linear-gradient(180deg, #ffffff 0%, #f0f5ff 100%);
    overflow: hidden;
}
.dawki-web-show::before {
    content: "";
    position: absolute;
    top: 10%; left: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(91, 158, 255, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.dawki-web-show-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    .dawki-web-show-grid { grid-template-columns: 1fr; gap: 50px; }
    .dawki-web-show-visual { order: 2; }
    .dawki-web-show-content { order: 1; }
}

/* Content side (right) */
.dawki-web-show-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91, 158, 255, 0.12), rgba(168, 85, 247, 0.12));
    border: 1px solid rgba(91, 158, 255, 0.30);
    color: #4f7cff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-web-show-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.6);
}
.dawki-web-show-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #0a1628;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
}
.dawki-web-show-title span {
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-web-show-subtitle {
    color: #475569;
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 24px;
}
.dawki-web-show-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dawki-web-show-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #1e293b;
    font-size: 15px;
    line-height: 1.5;
}
.dawki-web-show-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.dawki-web-show-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(90deg, #5b9eff, #a855f7);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-radius: 999px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 24px rgba(91, 158, 255, 0.30);
}
.dawki-web-show-cta:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(91, 158, 255, 0.45);
}
.dawki-web-show-cta svg { transition: transform 0.3s ease; }
.dawki-web-show-cta:hover svg { transform: translateX(3px); }

/* Browser stage */
.dawki-web-show-stage {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
}

/* Floating chips */
.dawki-web-show-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #ffffff;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    color: #0a1628;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
    z-index: 3;
    will-change: transform;
}
.dawki-web-show-chip--score {
    top: -20px;
    left: -30px;
    animation: dawki-web-float 4s ease-in-out infinite;
}
.dawki-web-show-chip--score .dawki-web-show-chip-num {
    background: linear-gradient(135deg, #22c55e, #5b9eff);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 18px;
    font-weight: 800;
}
.dawki-web-show-chip--code {
    bottom: 10%;
    left: -50px;
    animation: dawki-web-float 4.5s ease-in-out -1.5s infinite;
}
.dawki-web-show-chip--users {
    top: 30%;
    right: -40px;
    animation: dawki-web-float 5s ease-in-out -2.5s infinite;
}
@keyframes dawki-web-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Browser frame */
.dawki-web-show-monitor {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 30px 60px rgba(15, 23, 42, 0.18),
        0 8px 20px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    z-index: 2;
    will-change: transform;
    animation: dawki-web-bob 6s ease-in-out infinite;
}
@keyframes dawki-web-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Browser top bar */
.dawki-web-show-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}
.dawki-web-show-bar-dots { display: inline-flex; gap: 6px; }
.dawki-web-show-bar-dots span {
    width: 12px; height: 12px;
    border-radius: 50%;
}
.dawki-web-show-bar-dots span:nth-child(1) { background: #ff6b6b; }
.dawki-web-show-bar-dots span:nth-child(2) { background: #ffd93d; }
.dawki-web-show-bar-dots span:nth-child(3) { background: #6bcf7f; }
.dawki-web-show-bar-url {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #ffffff;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.dawki-web-show-bar-url svg { color: #22c55e; }
.dawki-web-show-bar-tabs { display: inline-flex; gap: 4px; }
.dawki-web-show-bar-tabs span {
    width: 18px; height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
}

/* Dashboard content */
.dawki-web-show-content {
    /* (overridden when used inside .dawki-web-show-monitor) */
}
.dawki-web-show-monitor .dawki-web-show-content {
    display: grid;
    grid-template-columns: 56px 1fr;
    height: 360px;
    position: relative;
}

/* Sidebar */
.dawki-web-show-sidebar {
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.dawki-web-show-logo {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
}
.dawki-web-show-nav-item {
    width: 32px; height: 8px;
    background: #cbd5e1;
    border-radius: 4px;
}
.dawki-web-show-nav-item.is-active {
    background: linear-gradient(90deg, #5b9eff, #a855f7);
    width: 38px;
}

/* Main panel */
.dawki-web-show-main {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}
.dawki-web-show-header { display: grid; grid-template-columns: 1fr 90px; gap: 12px; align-items: center; }
.dawki-web-show-h1 { height: 14px; width: 60%; background: linear-gradient(90deg, #cbd5e1, #e2e8f0); border-radius: 4px; }
.dawki-web-show-search { height: 26px; background: #f1f5f9; border-radius: 8px; border: 1px solid #e2e8f0; }

.dawki-web-show-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dawki-web-show-kpi {
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dawki-web-show-kpi span { font-size: 9px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.dawki-web-show-kpi strong { font-size: 16px; font-weight: 800; color: #0a1628; }
.dawki-web-show-kpi em { font-size: 10px; font-weight: 700; font-style: normal; }
.dawki-web-show-kpi em.up { color: #22c55e; }

.dawki-web-show-chart {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    height: 140px;
    display: flex;
    align-items: flex-end;
}
.dawki-web-show-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 6px;
}
.dawki-web-show-chart-bars span {
    flex: 1;
    background: linear-gradient(180deg, #5b9eff, #a855f7);
    border-radius: 4px 4px 0 0;
    transform-origin: bottom;
    animation: dawki-web-bar-grow 1.6s ease-out backwards;
}
.dawki-web-show-chart-bars span:nth-child(1) { animation-delay: 0.1s; }
.dawki-web-show-chart-bars span:nth-child(2) { animation-delay: 0.2s; }
.dawki-web-show-chart-bars span:nth-child(3) { animation-delay: 0.3s; }
.dawki-web-show-chart-bars span:nth-child(4) { animation-delay: 0.4s; }
.dawki-web-show-chart-bars span:nth-child(5) { animation-delay: 0.5s; }
.dawki-web-show-chart-bars span:nth-child(6) { animation-delay: 0.6s; }
.dawki-web-show-chart-bars span:nth-child(7) { animation-delay: 0.7s; }
.dawki-web-show-chart-bars span:nth-child(8) { animation-delay: 0.8s; }
@keyframes dawki-web-bar-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

.dawki-web-show-rows { display: flex; flex-direction: column; gap: 6px; }
.dawki-web-show-rows > div {
    height: 12px;
    background: linear-gradient(90deg, #f1f5f9, #e2e8f0);
    border-radius: 4px;
}
.dawki-web-show-rows > div:nth-child(1) { width: 90%; }
.dawki-web-show-rows > div:nth-child(2) { width: 70%; }
.dawki-web-show-rows > div:nth-child(3) { width: 80%; }

/* Cursor that hops between hotspots */
.dawki-web-show-cursor {
    position: absolute;
    width: 20px; height: 20px;
    z-index: 10;
    will-change: transform;
    pointer-events: none;
    animation: dawki-web-cursor 6s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.30));
}
@keyframes dawki-web-cursor {
    0%   { transform: translate(220px, 60px); }
    25%  { transform: translate(120px, 130px); }
    50%  { transform: translate(360px, 200px); }
    75%  { transform: translate(80px, 270px); }
    100% { transform: translate(220px, 60px); }
}

@media (prefers-reduced-motion: reduce) {
    .dawki-web-show-monitor,
    .dawki-web-show-chip,
    .dawki-web-show-chart-bars span,
    .dawki-web-show-cursor,
    .dawki-web-show-cta,
    .dawki-web-show-cta svg { animation: none !important; transition: none !important; }
}
/* === END HomeWebShowcase === */

/* === Showcase mock — content-rich variants ================================
   Premium dashboard / store / phone / chat / pipeline mockups inside the
   service coverflow card frames. Pure CSS, transform/opacity animations only,
   zero JS so they don't add re-render cost. */

/* Browser bar URL pill */
.dawki-showcase-mock-bar { align-items: center; }
.dawki-showcase-mock-url {
    margin-left: 10px;
    padding: 3px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: center;
}

/* WEB — hero banner + 3 feature pills */
.dawki-showcase-mock-hero {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dawki-showcase-mock-hero-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 8px;
    background: #ffffff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    color: #b45309;
}
.dawki-showcase-mock-hero-title {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.2;
}
.dawki-showcase-mock-hero-cta {
    align-self: flex-start;
    padding: 4px 10px;
    background: #b45309;
    color: #ffffff;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
}
.dawki-showcase-mock-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 4px;
}
.dawki-showcase-mock-features > div {
    background: #ffffff;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.dawki-showcase-mock-features > div span {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-bottom: 2px;
}
.dawki-showcase-mock-features > div strong {
    font-size: 10px;
    font-weight: 800;
    color: #1f2937;
}
.dawki-showcase-mock-features > div em {
    font-size: 9px;
    color: #6b7280;
    font-style: normal;
}

/* E-COMMERCE — product cards + cart */
.dawki-showcase-mock-shop-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.dawki-showcase-mock-shop-prod {
    background: #ffffff;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.dawki-showcase-mock-shop-img {
    height: 50px;
    border-radius: 6px;
}
.dawki-showcase-mock-shop-prod strong {
    font-size: 10px;
    font-weight: 700;
    color: #1f2937;
}
.dawki-showcase-mock-shop-prod span {
    font-size: 11px;
    font-weight: 800;
    color: #be185d;
}
.dawki-showcase-mock-shop-cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(90deg, #be185d, #ec4899);
    color: #ffffff;
    border-radius: 8px;
    margin-top: 4px;
}
.dawki-showcase-mock-shop-cart span {
    font-size: 11px;
    font-weight: 600;
}
.dawki-showcase-mock-shop-cart strong {
    font-size: 13px;
    font-weight: 800;
}

/* CLOUD — KPI row + chart */
.dawki-showcase-mock-cloud-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.dawki-showcase-mock-cloud-kpis > div {
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.dawki-showcase-mock-cloud-kpis strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #1e40af;
    line-height: 1;
}
.dawki-showcase-mock-cloud-kpis span {
    display: block;
    font-size: 9px;
    color: #6b7280;
    font-weight: 600;
    margin-top: 2px;
}

/* UI/UX — design system cards */
.dawki-showcase-mock-uiux-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.dawki-showcase-mock-uiux-card {
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}
.dawki-showcase-mock-uiux-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
}
.dawki-showcase-mock-uiux-card strong {
    font-size: 10px;
    font-weight: 800;
    color: #1f2937;
}
.dawki-showcase-mock-uiux-card span {
    font-size: 9px;
    color: #6b7280;
}
.dawki-showcase-mock-uiux-swatches {
    display: inline-flex;
    gap: 4px;
}
.dawki-showcase-mock-uiux-swatches i {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
}
.dawki-showcase-mock-uiux-comp {
    display: flex;
    gap: 6px;
    align-items: center;
}
.dawki-showcase-mock-uiux-btn {
    padding: 5px 10px;
    border-radius: 6px;
    background: #6d28d9;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
}
.dawki-showcase-mock-uiux-btn.outline {
    background: transparent;
    color: #6d28d9;
    border: 1.5px solid #6d28d9;
}
.dawki-showcase-mock-uiux-input {
    flex: 1;
    height: 22px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    font-size: 9px;
    color: #94a3b8;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
}

/* MOBILE — phone with screen content */
.dawki-showcase-mock-phone-screen {
    flex: 1;
    background: linear-gradient(180deg, #f0fdf4, #dcfce7);
    border-radius: 0 0 18px 18px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}
.dawki-showcase-mock-phone-status {
    font-size: 10px;
    font-weight: 700;
    color: #15803d;
    text-align: right;
}
.dawki-showcase-mock-phone-greet {
    font-size: 14px;
    font-weight: 800;
    color: #1f2937;
}
.dawki-showcase-mock-phone-card {
    background: linear-gradient(135deg, #15803d, #22c55e);
    border-radius: 10px;
    padding: 10px 12px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dawki-showcase-mock-phone-card span {
    font-size: 9px;
    opacity: 0.9;
}
.dawki-showcase-mock-phone-card strong {
    font-size: 16px;
    font-weight: 800;
}
.dawki-showcase-mock-phone-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 2px;
}
.dawki-showcase-mock-phone-grid span {
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 0;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* AI — chat with avatars + tags */
.dawki-showcase-mock-ai-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dawki-showcase-mock-ai-msg {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}
.dawki-showcase-mock-ai-msg.out { flex-direction: row; }
.dawki-showcase-mock-ai-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #f97316;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}
.dawki-showcase-mock-ai-avatar.ai {
    background: linear-gradient(135deg, #c2410c, #f97316);
}
.dawki-showcase-mock-ai-msg p {
    margin: 0;
    background: #ffffff;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 10px;
    color: #1f2937;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.dawki-showcase-mock-ai-msg.out p {
    background: linear-gradient(135deg, #fed7aa, #fdba74);
    color: #7c2d12;
}
.dawki-showcase-mock-ai-tags {
    display: inline-flex;
    gap: 6px;
    margin-top: 2px;
    margin-left: 28px;
    flex-wrap: wrap;
}
.dawki-showcase-mock-ai-tags span {
    padding: 3px 8px;
    background: #ffffff;
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-size: 9px;
    font-weight: 700;
    border-radius: 999px;
}

/* DEVOPS — pipeline steps + status */
.dawki-showcase-mock-devops-pipeline {
    display: flex;
    align-items: center;
    gap: 4px;
}
.dawki-showcase-mock-devops-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    background: #ffffff;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    justify-content: center;
}
.dawki-showcase-mock-devops-step span {
    width: 14px; height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #ffffff;
    flex-shrink: 0;
}
.dawki-showcase-mock-devops-step.done { color: #15803d; }
.dawki-showcase-mock-devops-step.done span { background: #22c55e; }
.dawki-showcase-mock-devops-step.running { color: #0e7490; }
.dawki-showcase-mock-devops-step.running span {
    background: #0e7490;
    animation: dawki-showcase-spin 1.4s linear infinite;
}
@keyframes dawki-showcase-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.dawki-showcase-mock-devops-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding: 6px 10px;
    background: #ffffff;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 600;
    color: #475569;
}
.dawki-showcase-mock-devops-meta .ok {
    color: #15803d;
    font-weight: 700;
}
/* === END Showcase mock content === */

/* === Estimate Project Cost — pricing calculator page ====================== */
.dawki-est {
    position: relative;
    padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 9vw, 120px);
    background: linear-gradient(180deg, #050d1c 0%, #0a1628 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-est-bg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
    z-index: 0;
}
.dawki-est-bg-orb--a {
    width: 480px; height: 480px;
    top: -160px; left: -120px;
    background: radial-gradient(circle, rgba(91, 158, 255, 0.20) 0%, transparent 70%);
}
.dawki-est-bg-orb--b {
    width: 520px; height: 520px;
    bottom: -200px; right: -160px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.20) 0%, transparent 70%);
}
.dawki-est > .container {
    position: relative;
    z-index: 1;
}

/* Heading */
.dawki-est-heading {
    text-align: center;
    margin-bottom: 48px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-est-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.30);
    color: #67e8f9;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.dawki-est-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #5b9eff);
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}
.dawki-est-title {
    font-size: clamp(34px, 5.2vw, 60px);
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
}
.dawki-est-title span {
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-est-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

/* Calculator card */
.dawki-est-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: clamp(24px, 4vw, 48px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.30);
    max-width: 1100px;
    margin: 0 auto;
}

/* Steps */
.dawki-est-step {
    margin-bottom: 36px;
}
.dawki-est-step:last-of-type { margin-bottom: 0; }
.dawki-est-step-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.dawki-est-step-num {
    font-size: 11px;
    font-weight: 800;
    color: #5b9eff;
    background: rgba(91, 158, 255, 0.10);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.5px;
}
.dawki-est-step-head h2 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.2px;
}
.dawki-est-step-hint {
    margin-left: auto;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 575px) { .dawki-est-step-hint { margin-left: 0; flex-basis: 100%; } }

/* Build cards grid */
.dawki-est-builds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 991px) { .dawki-est-builds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-est-builds { grid-template-columns: 1fr; } }

.dawki-est-build {
    text-align: left;
    padding: 22px 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dawki-est-build:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(91, 158, 255, 0.25);
    transform: translateY(-3px);
}
.dawki-est-build.is-active {
    background: linear-gradient(135deg, rgba(91, 158, 255, 0.10), rgba(168, 85, 247, 0.06));
    border-color: rgba(91, 158, 255, 0.55);
    box-shadow: 0 12px 28px rgba(91, 158, 255, 0.18),
                0 0 0 4px rgba(91, 158, 255, 0.08);
}
.dawki-est-build-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(91, 158, 255, 0.22), rgba(168, 85, 247, 0.18));
    color: #93c5fd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
.dawki-est-build-icon svg { width: 20px; height: 20px; }
.dawki-est-build.is-active .dawki-est-build-icon {
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    transform: scale(1.05) rotate(-4deg);
}
.dawki-est-build strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.dawki-est-build > span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

/* Extra pages stepper */
.dawki-est-pages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}
.dawki-est-pages-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.10);
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.dawki-est-pages-btn:hover:not(:disabled) {
    background: rgba(91, 158, 255, 0.20);
    border-color: rgba(91, 158, 255, 0.50);
    transform: scale(1.05);
}
.dawki-est-pages-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dawki-est-pages-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.dawki-est-pages-display strong {
    font-size: 32px;
    font-weight: 800;
    color: #5b9eff;
    line-height: 1;
}
.dawki-est-pages-display span {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 1.5px;
}

/* Add-ons grid */
.dawki-est-addons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 991px) { .dawki-est-addons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-est-addons { grid-template-columns: 1fr; } }

.dawki-est-addon {
    display: grid;
    grid-template-columns: 44px 1fr 24px;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.dawki-est-addon:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(91, 158, 255, 0.25);
}
.dawki-est-addon.is-active {
    background: linear-gradient(135deg, rgba(91, 158, 255, 0.10), rgba(168, 85, 247, 0.06));
    border-color: rgba(91, 158, 255, 0.50);
}
.dawki-est-addon-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(91, 158, 255, 0.22), rgba(168, 85, 247, 0.18));
    color: #93c5fd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, color 0.3s ease;
}
.dawki-est-addon-icon svg { width: 22px; height: 22px; }
.dawki-est-addon.is-active .dawki-est-addon-icon {
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
}
.dawki-est-addon-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dawki-est-addon-text strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dawki-est-addon-text > span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}
.dawki-est-addon-badge {
    background: linear-gradient(90deg, #ec4899, #f97316);
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    font-style: normal;
}
.dawki-est-addon-toggle {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.20);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.dawki-est-addon-plus { font-size: 18px; line-height: 1; color: rgba(255, 255, 255, 0.5); }
.dawki-est-addon.is-active .dawki-est-addon-toggle {
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    border-color: transparent;
}

/* Summary */
.dawki-est-summary {
    margin-top: 32px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(91, 158, 255, 0.08), rgba(168, 85, 247, 0.05));
    border: 1.5px solid rgba(91, 158, 255, 0.20);
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
}
@media (max-width: 767px) {
    .dawki-est-summary { grid-template-columns: 1fr; gap: 20px; }
}

/* Centered variant — only the total shown, no per-item breakdown column */
.dawki-est-summary--centered {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 36px 28px;
}
.dawki-est-summary--centered .dawki-est-summary-right {
    text-align: center;
    align-items: center;
}
.dawki-est-summary-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dawki-est-summary-line {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}
.dawki-est-summary-line span { font-weight: 500; }
.dawki-est-summary-line strong { color: #ffffff; font-weight: 700; }

.dawki-est-summary-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
@media (max-width: 767px) { .dawki-est-summary-right { text-align: left; } }
.dawki-est-summary-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.dawki-est-summary-total {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.dawki-est-summary-total strong {
    font-weight: 800;
    background: inherit;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dawki-est-summary-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* Action buttons */
.dawki-est-actions {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
    justify-content: center;
}
.dawki-est-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(90deg, #25d366, #128c7e);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    border-radius: 999px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35);
}
.dawki-est-whatsapp:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(37, 211, 102, 0.50);
}
.dawki-est-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-radius: 999px;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.dawki-est-secondary:hover {
    color: #ffffff;
    background: rgba(91, 158, 255, 0.15);
    border-color: rgba(91, 158, 255, 0.40);
    transform: translateY(-3px);
}
.dawki-est-secondary svg { transition: transform 0.3s ease; }
.dawki-est-secondary:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .dawki-est-build,
    .dawki-est-addon,
    .dawki-est-pages-btn,
    .dawki-est-build-icon,
    .dawki-est-addon-icon,
    .dawki-est-whatsapp,
    .dawki-est-secondary,
    .dawki-est-secondary svg { transition: none !important; }
}
/* === END Estimate Project Cost === */

/* === Offshore Development Center — Cost Showdown ========================== */
.dawki-odc-cost {
    position: relative;
    padding: clamp(70px, 9vw, 110px) 0;
    background: linear-gradient(180deg, #050d1c 0%, #0a1628 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-odc-cost::before {
    content: "";
    position: absolute;
    top: 10%; left: -10%;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-odc-cost::after {
    content: "";
    position: absolute;
    bottom: 10%; right: -10%;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(91, 158, 255, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-odc-cost > .container { position: relative; z-index: 1; }

.dawki-odc-cost-heading {
    text-align: center;
    margin-bottom: 48px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-odc-cost-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.30);
    color: #86efac;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-odc-cost-pill > span:first-child {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #06b6d4);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
.dawki-odc-cost-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-odc-cost-title span {
    background: linear-gradient(90deg, #22c55e 0%, #06b6d4 50%, #5b9eff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-odc-cost-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

.dawki-odc-cost-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 991px) { .dawki-odc-cost-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-odc-cost-grid { grid-template-columns: 1fr; } }

.dawki-odc-cost-card {
    position: relative;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease;
    will-change: transform;
}
.dawki-odc-cost-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cc-a, #5b9eff), var(--cc-b, #a855f7));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}
.dawki-odc-cost-card:hover {
    transform: translateY(-6px);
    border-color: var(--cc-border, rgba(91, 158, 255, 0.30));
    box-shadow: 0 22px 48px var(--cc-glow, rgba(91, 158, 255, 0.22));
}
.dawki-odc-cost-card:hover::before { transform: scaleX(1); }

.dawki-odc-cost-card-role {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}

/* Role card head — icon + title + seniority chip */
.dawki-odc-role-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.dawki-odc-role-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cc-a, #5b9eff), var(--cc-b, #a855f7));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 18px var(--cc-glow, rgba(91, 158, 255, 0.40));
}
.dawki-odc-role-icon svg { width: 22px; height: 22px; }
.dawki-odc-role-seniority {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.dawki-odc-role-owns {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.dawki-odc-role-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dawki-odc-role-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--cc-bg, rgba(91, 158, 255, 0.10));
    border: 1px solid var(--cc-border, rgba(91, 158, 255, 0.30));
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.dawki-odc-cost-card-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.dawki-odc-cost-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.30);
}
.dawki-odc-cost-card-row strong { color: rgba(255, 255, 255, 0.85); font-weight: 800; }
.dawki-odc-cost-card-row--odc {
    background: var(--cc-bg, rgba(91, 158, 255, 0.10));
    border-color: var(--cc-border, rgba(91, 158, 255, 0.30));
    color: #ffffff;
    text-decoration: none;
}
.dawki-odc-cost-card-row--odc strong {
    color: #ffffff;
    font-size: 14px;
}

.dawki-odc-cost-card-savings {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(6, 182, 212, 0.10));
    border: 1px solid rgba(34, 197, 94, 0.40);
    border-radius: 10px;
}
.dawki-odc-cost-card-savings span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.dawki-odc-cost-card-savings strong {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(90deg, #22c55e, #06b6d4);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-odc-cost-card-savings em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #86efac;
    margin-left: auto;
}

.dawki-odc-cost-disclaimer {
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    margin-top: 28px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .dawki-odc-cost-card,
    .dawki-odc-cost-card::before { transition: none !important; }
    .dawki-odc-cost-card:hover { transform: none; }
}
/* === END Offshore Development Center === */

/* === Staff Augmentation — Vetting Funnel ================================== */
.dawki-saug-funnel {
    position: relative;
    padding: clamp(70px, 9vw, 110px) 0;
    background: linear-gradient(180deg, #050d1c 0%, #0a1628 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-saug-funnel::before {
    content: "";
    position: absolute;
    top: 5%; right: -8%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-saug-funnel::after {
    content: "";
    position: absolute;
    bottom: 5%; left: -8%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(91, 158, 255, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-saug-funnel > .container { position: relative; z-index: 1; }

.dawki-saug-funnel-heading {
    text-align: center;
    margin-bottom: 56px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-saug-funnel-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.30);
    color: #d8b4fe;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-saug-funnel-pill > span:first-child {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}
.dawki-saug-funnel-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-saug-funnel-title span {
    background: linear-gradient(90deg, #a855f7 0%, #ec4899 50%, #f97316 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-saug-funnel-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

.dawki-saug-funnel-frame {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
}

.dawki-saug-funnel-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    align-items: center;
}

.dawki-saug-funnel-rank {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.dawki-saug-funnel-content {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 18px 22px;
}
.dawki-saug-funnel-content-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
}
.dawki-saug-funnel-content-label {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.dawki-saug-funnel-content-count {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
    flex-shrink: 0;
}
.dawki-saug-funnel-content-desc {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 14px;
}

.dawki-saug-funnel-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.dawki-saug-funnel-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

@media (max-width: 575px) {
    .dawki-saug-funnel-row { grid-template-columns: 44px 1fr; gap: 14px; }
    .dawki-saug-funnel-rank { width: 44px; height: 44px; font-size: 13px; border-radius: 11px; }
    .dawki-saug-funnel-content { padding: 14px 16px; }
    .dawki-saug-funnel-content-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}
/* === END Staff Augmentation === */

/* === Metaverse Development — Headset Gallery ============================== */
.dawki-meta-gallery {
    position: relative;
    padding: clamp(70px, 9vw, 110px) 0;
    background: linear-gradient(180deg, #050d1c 0%, #0a1628 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-meta-gallery::before {
    content: "";
    position: absolute;
    top: 5%; right: -8%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(91, 158, 255, 0.20) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-meta-gallery::after {
    content: "";
    position: absolute;
    bottom: 5%; left: -8%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.20) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-meta-gallery > .container { position: relative; z-index: 1; }

.dawki-meta-gallery-heading {
    text-align: center;
    margin-bottom: 48px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-meta-gallery-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(91, 158, 255, 0.12);
    border: 1px solid rgba(91, 158, 255, 0.30);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-meta-gallery-pill > span:first-child {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.6);
}
.dawki-meta-gallery-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-meta-gallery-title span {
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-meta-gallery-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

.dawki-meta-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 991px) { .dawki-meta-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-meta-gallery-grid { grid-template-columns: 1fr; } }

.dawki-meta-gallery-card {
    position: relative;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease;
    will-change: transform;
}
.dawki-meta-gallery-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mh-a, #5b9eff), var(--mh-b, #a855f7));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}
.dawki-meta-gallery-card:hover {
    transform: translateY(-6px);
    border-color: var(--mh-border, rgba(91, 158, 255, 0.30));
    box-shadow: 0 22px 48px var(--mh-glow, rgba(91, 158, 255, 0.22));
}
.dawki-meta-gallery-card:hover::before { transform: scaleX(1); }

.dawki-meta-gallery-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.dawki-meta-gallery-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mh-a, #5b9eff), var(--mh-b, #a855f7));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px var(--mh-glow, rgba(91, 158, 255, 0.40));
}
.dawki-meta-gallery-icon svg { width: 24px; height: 24px; }
.dawki-meta-gallery-type {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mh-bg, rgba(91, 158, 255, 0.10));
    border: 1px solid var(--mh-border, rgba(91, 158, 255, 0.30));
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.dawki-meta-gallery-name {
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}
.dawki-meta-gallery-maker {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
}

.dawki-meta-gallery-specs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}
.dawki-meta-gallery-specs li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}
.dawki-meta-gallery-specs li span {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}
.dawki-meta-gallery-specs li strong {
    color: #ffffff;
    font-weight: 700;
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .dawki-meta-gallery-card,
    .dawki-meta-gallery-card::before { transition: none !important; }
    .dawki-meta-gallery-card:hover { transform: none; }
}
/* === END Metaverse Development === */

/* === Security Testing — Pentest Kill-Chain (horizontal stepper) =========== */
.dawki-sec-chain {
    position: relative;
    padding: clamp(70px, 9vw, 110px) 0;
    background: linear-gradient(180deg, #050d1c 0%, #0a1628 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-sec-chain::before {
    content: "";
    position: absolute;
    top: -120px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 500px;
    background: radial-gradient(ellipse, rgba(239, 68, 68, 0.16) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-sec-chain > .container { position: relative; z-index: 1; }

.dawki-sec-chain-heading {
    text-align: center;
    margin-bottom: 56px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-sec-chain-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.30);
    color: #fca5a5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-sec-chain-pill > span:first-child {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444, #f97316);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
.dawki-sec-chain-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-sec-chain-title span {
    background: linear-gradient(90deg, #ef4444 0%, #f97316 50%, #fbbf24 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-sec-chain-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

/* Horizontal stepper track — cards in a row with arrow connectors between */
.dawki-sec-chain-track {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    flex-wrap: nowrap;
}
@media (max-width: 1199px) {
    .dawki-sec-chain-track { flex-wrap: wrap; gap: 18px; justify-content: center; }
}

.dawki-sec-chain-card {
    flex: 1 1 0;
    min-width: 170px;
    max-width: 230px;
    position: relative;
    padding: 22px 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease;
    will-change: transform;
}
.dawki-sec-chain-card:hover {
    transform: translateY(-6px);
    border-color: var(--kc-a, rgba(239, 68, 68, 0.40));
    box-shadow: 0 22px 48px var(--kc-glow, rgba(239, 68, 68, 0.22));
}

.dawki-sec-chain-num {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 10px;
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
}
.dawki-sec-chain-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--kc-a, #5b9eff), var(--kc-b, #a855f7));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 10px 24px var(--kc-glow, rgba(91, 158, 255, 0.40));
}
.dawki-sec-chain-icon svg { width: 26px; height: 26px; }
.dawki-sec-chain-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.2px;
    margin: 0 0 8px;
}
.dawki-sec-chain-desc {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
}

.dawki-sec-chain-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    padding: 0 6px;
    align-self: center;
}
@media (max-width: 1199px) {
    .dawki-sec-chain-arrow { display: none; }
}

/* === Security Testing — Threat Coverage Matrix (severity-coded grid) ===== */
.dawki-sec-matrix {
    position: relative;
    padding: clamp(70px, 9vw, 110px) 0;
    background: linear-gradient(180deg, #0a1628 0%, #050d1c 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-sec-matrix::after {
    content: "";
    position: absolute;
    bottom: -200px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 500px;
    background: radial-gradient(ellipse, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-sec-matrix > .container { position: relative; z-index: 1; }

.dawki-sec-matrix-heading {
    text-align: center;
    margin-bottom: 48px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-sec-matrix-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.30);
    color: #d8b4fe;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-sec-matrix-pill > span:first-child {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}
.dawki-sec-matrix-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-sec-matrix-title span {
    background: linear-gradient(90deg, #a855f7 0%, #ec4899 50%, #f97316 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-sec-matrix-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

/* Compact 4-column grid of threat cards */
.dawki-sec-matrix-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1199px) { .dawki-sec-matrix-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .dawki-sec-matrix-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dawki-sec-matrix-grid { grid-template-columns: 1fr; } }

.dawki-sec-matrix-card {
    position: relative;
    padding: 16px 16px 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.dawki-sec-matrix-card::before {
    /* Severity stripe along the left edge */
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--sev-a, #f97316), var(--sev-b, #fbbf24));
}
.dawki-sec-matrix-card:hover {
    transform: translateY(-3px);
    border-color: var(--sev-a, rgba(255, 255, 255, 0.20));
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.dawki-sec-matrix-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.dawki-sec-matrix-code {
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.4px;
}
.dawki-sec-matrix-family {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.dawki-sec-matrix-sev {
    font-size: 9px;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(90deg, var(--sev-a, #f97316), var(--sev-b, #fbbf24));
    padding: 3px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-left: auto;
}
.dawki-sec-matrix-title-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin: 0 0 6px;
    line-height: 1.25;
}
.dawki-sec-matrix-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dawki-sec-chain-card,
    .dawki-sec-matrix-card { transition: none !important; }
    .dawki-sec-chain-card:hover,
    .dawki-sec-matrix-card:hover { transform: none; }
}
/* === END Security Testing === */

/* === Performance Testing — Live Load Test Dashboard ======================
   Animated monitoring-console mockup with RPS counter, gauge, KPIs, sparkline.
   Visual identity: green/cyan terminal-grade, no resemblance to other pages. */
.dawki-perf-dash {
    position: relative;
    padding: clamp(70px, 9vw, 110px) 0;
    background: linear-gradient(180deg, #050d1c 0%, #0a1628 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-perf-dash::before {
    content: "";
    position: absolute;
    top: -120px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 500px;
    background: radial-gradient(ellipse, rgba(34, 197, 94, 0.18) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-perf-dash > .container { position: relative; z-index: 1; }

.dawki-perf-dash-heading {
    text-align: center;
    margin-bottom: 48px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-perf-dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.30);
    color: #86efac;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-perf-dash-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #06b6d4);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
    animation: dawki-perf-pulse 1.4s ease-in-out infinite;
}
@keyframes dawki-perf-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.5); opacity: 0.6; }
}
.dawki-perf-dash-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-perf-dash-title span {
    background: linear-gradient(90deg, #22c55e 0%, #06b6d4 50%, #5b9eff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-perf-dash-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

/* Console frame */
.dawki-perf-dash-frame {
    background: #0a1628;
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.40),
                0 0 60px rgba(34, 197, 94, 0.10) inset;
    max-width: 1100px;
    margin: 0 auto;
}

/* Console top bar */
.dawki-perf-dash-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dawki-perf-dash-bar-dots { display: inline-flex; gap: 6px; }
.dawki-perf-dash-bar-dots span {
    width: 10px; height: 10px;
    border-radius: 50%;
}
.dawki-perf-dash-bar-dots span:nth-child(1) { background: #ef4444; }
.dawki-perf-dash-bar-dots span:nth-child(2) { background: #fbbf24; }
.dawki-perf-dash-bar-dots span:nth-child(3) { background: #22c55e; }

.dawki-perf-dash-bar-tabs {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.dawki-perf-dash-bar-tab {
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dawki-perf-dash-bar-tab.is-active {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.30);
    color: #86efac;
}
.dawki-perf-dash-bar-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.30);
    color: #86efac;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dawki-perf-dash-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
    animation: dawki-perf-pulse 1.4s ease-in-out infinite;
}

/* Dashboard grid */
.dawki-perf-dash-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    padding: 22px;
}
@media (max-width: 991px) {
    .dawki-perf-dash-grid { grid-template-columns: repeat(2, 1fr); padding: 16px; }
}

.dawki-perf-dash-rps {
    grid-column: span 3;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(6, 182, 212, 0.04));
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
@media (max-width: 991px) { .dawki-perf-dash-rps { grid-column: span 2; } }
.dawki-perf-dash-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.dawki-perf-dash-rps strong {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    background: linear-gradient(90deg, #22c55e, #06b6d4);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -1px;
}
.dawki-perf-dash-trend {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
}
.dawki-perf-dash-trend.up { color: #86efac; }

.dawki-perf-dash-gauge {
    grid-column: span 3;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}
@media (max-width: 991px) { .dawki-perf-dash-gauge { grid-column: span 2; } }
.dawki-perf-dash-gauge svg {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
}
.dawki-perf-dash-gauge-text {
    display: flex;
    flex-direction: column;
}
.dawki-perf-dash-gauge-text strong {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -0.5px;
}
.dawki-perf-dash-gauge-text span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.dawki-perf-dash-kpi {
    grid-column: span 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
@media (max-width: 991px) { .dawki-perf-dash-kpi { grid-column: span 1; } }
.dawki-perf-dash-kpi span {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.dawki-perf-dash-kpi strong {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -0.5px;
}
.dawki-perf-dash-kpi strong em {
    font-size: 11px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
    font-weight: 600;
}
.dawki-perf-dash-kpi--err strong { color: #86efac; }

.dawki-perf-dash-graph {
    grid-column: span 6;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}
@media (max-width: 991px) { .dawki-perf-dash-graph { grid-column: span 2; } }
.dawki-perf-dash-graph-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
}
.dawki-perf-dash-graph-legend {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
}
.dawki-perf-dash-graph-legend i {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    margin-right: 6px;
}
.dawki-perf-dash-graph svg {
    width: 100%;
    height: 100px;
    display: block;
}

/* === Performance Testing — Test Type Quadrant (axis-mapped 2x2 matrix) ==== */
.dawki-perf-quad {
    position: relative;
    padding: clamp(70px, 9vw, 110px) 0;
    background: linear-gradient(180deg, #0a1628 0%, #050d1c 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-perf-quad::after {
    content: "";
    position: absolute;
    bottom: -200px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 500px;
    background: radial-gradient(ellipse, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-perf-quad > .container { position: relative; z-index: 1; }

.dawki-perf-quad-heading {
    text-align: center;
    margin-bottom: 56px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-perf-quad-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.30);
    color: #d8b4fe;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-perf-quad-pill > span:first-child {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}
.dawki-perf-quad-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-perf-quad-title span {
    background: linear-gradient(90deg, #a855f7 0%, #ec4899 50%, #f97316 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-perf-quad-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

/* Quadrant frame with axis labels */
.dawki-perf-quad-frame {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 50px 50px 50px 70px;
}
@media (max-width: 767px) { .dawki-perf-quad-frame { padding: 30px 0 0; } }

.dawki-perf-quad-axis {
    position: absolute;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dawki-perf-quad-axis--y {
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
}
.dawki-perf-quad-axis--x {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
}
.dawki-perf-quad-axis-arrow {
    font-size: 16px;
    color: #a855f7;
}
.dawki-perf-quad-origin,
.dawki-perf-quad-end-x,
.dawki-perf-quad-end-y {
    position: absolute;
    color: rgba(255, 255, 255, 0.30);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.dawki-perf-quad-origin { bottom: 30px; left: 30px; }
.dawki-perf-quad-end-x { bottom: 30px; right: 8px; }
.dawki-perf-quad-end-y { top: 8px; left: 30px; }
@media (max-width: 767px) {
    .dawki-perf-quad-axis,
    .dawki-perf-quad-origin,
    .dawki-perf-quad-end-x,
    .dawki-perf-quad-end-y { display: none; }
}

/* 2x2 grid */
.dawki-perf-quad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    position: relative;
}
@media (max-width: 575px) { .dawki-perf-quad-grid { grid-template-columns: 1fr; grid-template-rows: auto; } }

.dawki-perf-quad-card {
    position: relative;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px 22px 20px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease;
    will-change: transform;
}
.dawki-perf-quad-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qc-a, #5b9eff), var(--qc-b, #a855f7));
}
.dawki-perf-quad-card:hover {
    transform: translateY(-6px);
    border-color: var(--qc-a, rgba(91, 158, 255, 0.40));
    box-shadow: 0 22px 48px var(--qc-glow, rgba(91, 158, 255, 0.22));
}
.dawki-perf-quad-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--qc-a, #5b9eff), var(--qc-b, #a855f7));
    color: #ffffff;
    margin-bottom: 12px;
    box-shadow: 0 8px 18px var(--qc-glow, rgba(91, 158, 255, 0.40));
}
.dawki-perf-quad-card-icon svg { width: 22px; height: 22px; }

.dawki-perf-quad-card-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.dawki-perf-quad-card-name {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin: 0 0 8px;
}
.dawki-perf-quad-card-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 14px;
}
.dawki-perf-quad-card-when {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--qc-a, #5b9eff);
    border-radius: 6px;
}
.dawki-perf-quad-card-when span {
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.dawki-perf-quad-card-when strong {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .dawki-perf-quad-card { transition: none !important; }
    .dawki-perf-quad-card:hover { transform: none; }
    .dawki-perf-dash-pill-dot,
    .dawki-perf-dash-pulse { animation: none !important; }
}
/* === END Performance Testing === */

/* === Floating Estimate Calculator FAB =====================================
   Sticks to the bottom-right of every page. Gradient pill with icon + name +
   sub-line + a "NEW" badge. Two pulsing rings draw the eye. Click → /estimate.
   Hover lifts + scales + brightens the glow. Auto-shrinks to icon on mobile. */
.dawki-est-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px 12px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    background-size: 200% auto;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700;
    box-shadow: 0 18px 38px rgba(91, 158, 255, 0.45),
                0 6px 14px rgba(168, 85, 247, 0.30),
                0 0 0 6px rgba(255, 255, 255, 0.04);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.35s ease,
                background-position 0.6s ease;
    animation: dawki-est-fab-flow 5s linear infinite,
               dawki-est-fab-bob 3s ease-in-out infinite;
}
.dawki-est-fab:hover {
    color: #ffffff !important;
    transform: translateY(-4px) scale(1.04);
    background-position: 100% center;
    box-shadow: 0 24px 50px rgba(91, 158, 255, 0.55),
                0 10px 22px rgba(236, 72, 153, 0.35),
                0 0 0 8px rgba(255, 255, 255, 0.06);
}
@keyframes dawki-est-fab-flow {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}
@keyframes dawki-est-fab-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Pulsing rings — draw the eye every 2.4s */
.dawki-est-fab-pulse {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    pointer-events: none;
    animation: dawki-est-fab-ring 2.4s ease-out infinite;
    opacity: 0;
}
.dawki-est-fab-pulse:nth-child(2) {
    animation-delay: 1.2s;
}
@keyframes dawki-est-fab-ring {
    0%   { transform: scale(1); opacity: 0.6; }
    80%  { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Icon badge inside the FAB */
.dawki-est-fab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.20);
}

/* Text block */
.dawki-est-fab-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.dawki-est-fab-text strong {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #ffffff;
}
.dawki-est-fab-text span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
}

/* "NEW" badge — small notification chip on top-right corner */
.dawki-est-fab-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    background: #ffffff;
    color: #ec4899;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 999px;
    letter-spacing: 0.6px;
    box-shadow: 0 4px 10px rgba(236, 72, 153, 0.40);
    animation: dawki-est-fab-badge-tilt 2.6s ease-in-out infinite;
}
@keyframes dawki-est-fab-badge-tilt {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50%      { transform: rotate(8deg) scale(1.08); }
}

/* Mobile / small screens — shrink to icon-only circle to save space */
@media (max-width: 575px) {
    .dawki-est-fab {
        bottom: 20px;
        right: 16px;
        padding: 14px;
        gap: 0;
        border-radius: 50%;
    }
    .dawki-est-fab-text { display: none; }
    .dawki-est-fab-icon {
        width: 28px;
        height: 28px;
        background: transparent;
        border: none;
    }
    .dawki-est-fab-badge {
        font-size: 8px;
        padding: 2px 6px;
        top: -4px;
        right: -2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dawki-est-fab,
    .dawki-est-fab-pulse,
    .dawki-est-fab-badge { animation: none !important; }
    .dawki-est-fab-pulse { display: none; }
}
/* === END Floating Estimate Calculator FAB === */

/* === eLearning — Live Lesson Player ======================================
   LMS player mockup with chapter list, video stage, AI tutor, progress bar.
   Visually unique to this page. */
.dawki-elearn-player {
    position: relative;
    padding: clamp(70px, 9vw, 110px) 0;
    background: linear-gradient(180deg, #050d1c 0%, #0a1628 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-elearn-player::before {
    content: "";
    position: absolute;
    top: -120px; right: -120px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.20) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-elearn-player > .container { position: relative; z-index: 1; }

.dawki-elearn-player-heading {
    text-align: center;
    margin-bottom: 48px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-elearn-player-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.30);
    color: #d8b4fe;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-elearn-player-pill > span:first-child {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}
.dawki-elearn-player-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-elearn-player-title span {
    background: linear-gradient(90deg, #a855f7 0%, #ec4899 50%, #f97316 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-elearn-player-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

/* Player window */
.dawki-elearn-player-window {
    background: #0a1628;
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.40);
    max-width: 1100px;
    margin: 0 auto;
}
.dawki-elearn-player-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 14px;
    flex-wrap: wrap;
}
.dawki-elearn-player-course {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}
.dawki-elearn-player-course strong { color: #d8b4fe; }
.dawki-elearn-player-badge {
    padding: 4px 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

/* Body — video stage + chapter sidebar */
.dawki-elearn-player-body {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 0;
}
@media (max-width: 991px) {
    .dawki-elearn-player-body { grid-template-columns: 1fr; }
}

.dawki-elearn-player-stage {
    padding: 20px 22px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 991px) { .dawki-elearn-player-stage { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } }

.dawki-elearn-player-stage-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1e293b 0%, #312e81 60%, #6d28d9 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}
.dawki-elearn-player-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    z-index: 2;
}
.dawki-elearn-player-avatar-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.30);
    animation: dawki-elearn-avatar-pulse 2s ease-out infinite;
}
@keyframes dawki-elearn-avatar-pulse {
    0%   { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}
.dawki-elearn-player-stage-caption {
    text-align: center;
    z-index: 2;
}
.dawki-elearn-player-stage-name {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}
.dawki-elearn-player-stage-title {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}
.dawki-elearn-player-play {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #6d28d9;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
}

.dawki-elearn-player-progress {
    position: relative;
    margin-top: 14px;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.dawki-elearn-player-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #ec4899);
    transition: width 0.08s linear;
}
.dawki-elearn-player-time {
    position: absolute;
    top: -22px;
    right: 0;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dawki-elearn-player-tutor {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.10), rgba(236, 72, 153, 0.06));
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 12px;
}
.dawki-elearn-player-tutor-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 6px 14px rgba(168, 85, 247, 0.40);
}
.dawki-elearn-player-tutor strong {
    color: #d8b4fe;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.dawki-elearn-player-tutor p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.5;
    margin: 4px 0 0;
}

/* Chapter sidebar */
.dawki-elearn-player-chapters {
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.01);
}
.dawki-elearn-player-chapters-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 700;
}
.dawki-elearn-player-chapters-count {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 600;
}
.dawki-elearn-player-chapters ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dawki-elearn-player-chapters li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}
.dawki-elearn-player-chapters li.is-done .dawki-elearn-player-chap-num {
    background: linear-gradient(135deg, #22c55e, #06b6d4);
    color: #ffffff;
    border: none;
}
.dawki-elearn-player-chapters li.is-current {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.10), rgba(236, 72, 153, 0.06));
    border-color: rgba(168, 85, 247, 0.40);
}
.dawki-elearn-player-chap-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dawki-elearn-player-chap-pulse {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ec4899;
    box-shadow: 0 0 12px #ec4899;
    animation: dawki-elearn-chap-pulse 1.4s ease-in-out infinite;
}
@keyframes dawki-elearn-chap-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.6; }
}
.dawki-elearn-player-chap-text strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.1px;
}
.dawki-elearn-player-chap-text span {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* === eLearning — Cohort Engagement Dashboard ============================ */
.dawki-elearn-cohort {
    position: relative;
    padding: clamp(70px, 9vw, 110px) 0;
    background: linear-gradient(180deg, #0a1628 0%, #050d1c 100%);
    overflow: hidden;
    isolation: isolate;
}
.dawki-elearn-cohort::after {
    content: "";
    position: absolute;
    bottom: -200px; left: -120px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(91, 158, 255, 0.20) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.dawki-elearn-cohort > .container { position: relative; z-index: 1; }

.dawki-elearn-cohort-heading {
    text-align: center;
    margin-bottom: 48px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-elearn-cohort-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(91, 158, 255, 0.12);
    border: 1px solid rgba(91, 158, 255, 0.30);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.dawki-elearn-cohort-pill > span:first-child {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.6);
}
.dawki-elearn-cohort-title {
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.dawki-elearn-cohort-title span {
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-elearn-cohort-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

.dawki-elearn-cohort-frame {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.30);
}

/* KPI tiles */
.dawki-elearn-cohort-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}
@media (max-width: 575px) { .dawki-elearn-cohort-kpis { grid-template-columns: 1fr; } }
.dawki-elearn-cohort-kpi {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dawki-elearn-cohort-kpi-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.dawki-elearn-cohort-kpi strong {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    line-height: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dawki-elearn-cohort-kpi strong i {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    margin-left: 2px;
    font-style: normal;
    font-weight: 600;
}
.dawki-elearn-cohort-kpi em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #86efac;
}

/* Grid: chart + leaderboard */
.dawki-elearn-cohort-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 14px;
}
@media (max-width: 991px) { .dawki-elearn-cohort-grid { grid-template-columns: 1fr; } }

/* Bar chart */
.dawki-elearn-cohort-chart {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px;
}
.dawki-elearn-cohort-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 700;
    flex-wrap: wrap;
    gap: 8px;
}
.dawki-elearn-cohort-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 600;
}
.dawki-elearn-cohort-chart-legend i {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
}
.dawki-elearn-cohort-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    height: 200px;
}
.dawki-elearn-cohort-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.dawki-elearn-cohort-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #5b9eff, #a855f7);
    border-radius: 6px 6px 0 0;
    position: relative;
    display: block;
}
.dawki-elearn-cohort-bar-fill em {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
}
.dawki-elearn-cohort-bar-label {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Leaderboard */
.dawki-elearn-cohort-leader {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px;
}
.dawki-elearn-cohort-leader-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 700;
}
.dawki-elearn-cohort-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.30);
    color: #86efac;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
}
.dawki-elearn-cohort-live i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    animation: dawki-elearn-chap-pulse 1.4s ease-in-out infinite;
}
.dawki-elearn-cohort-leader ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dawki-elearn-cohort-leader li {
    display: grid;
    grid-template-columns: 22px 32px 1fr;
    gap: 10px;
    align-items: center;
}
.dawki-elearn-cohort-rank {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 800;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dawki-elearn-cohort-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.dawki-elearn-cohort-leader-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dawki-elearn-cohort-leader-meta strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.1px;
}
.dawki-elearn-cohort-leader-meta span {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dawki-elearn-cohort-leader-pct {
    grid-column: 1 / -1;
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-top: -2px;
}
.dawki-elearn-cohort-leader-pct span {
    display: block;
    height: 100%;
    border-radius: 999px;
}
.dawki-elearn-cohort-leader-pct em {
    position: absolute;
    top: -16px;
    right: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
    .dawki-elearn-player-avatar-pulse,
    .dawki-elearn-player-chap-pulse,
    .dawki-elearn-cohort-live i { animation: none !important; }
}
/* === END eLearning === */

/* ============================================================================
 * Contact form — success / error feedback
 * ============================================================================ */
.dawki-form-success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(6, 182, 212, 0.10));
  border: 1px solid rgba(34, 197, 94, 0.40);
  color: #16a34a;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 18px;
}
.dawki-form-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
  letter-spacing: 0.2px;
}
.dawki-form-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
/* === END Contact form feedback === */

/* ============================================================================
 * Healthcare — Live Patient Vitals Monitor (animated ECG + vital cards)
 * ============================================================================ */
.dawki-hc-vitals {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0a1830 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-hc-vitals { padding: 70px 20px; } }

.dawki-hc-vitals::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(34, 197, 94, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-hc-vitals::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-hc-vitals > .container { position: relative; z-index: 2; }

.dawki-hc-vitals-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-hc-vitals-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: #86efac;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-hc-vitals-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
}
.dawki-hc-vitals-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-hc-vitals-title span {
  background: linear-gradient(90deg, #22c55e, #06b6d4, #4f7cff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-hc-vitals-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-hc-vitals-window {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  background: #050d12;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dawki-hc-vitals-titlebar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: linear-gradient(180deg, #0d1820 0%, #050d12 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dawki-hc-vitals-titlebar-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  font-family: ui-monospace, "Courier New", monospace;
  flex: 1;
}
.dawki-hc-vitals-titlebar-name strong {
  font-weight: 800;
  color: #86efac;
}
.dawki-hc-vitals-titlebar-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #86efac;
  font-family: ui-monospace, "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dawki-hc-vitals-titlebar-status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  animation: dawki-hc-pulse 1.4s ease-in-out infinite;
}
@keyframes dawki-hc-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}

.dawki-hc-vitals-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
}
@media (max-width: 991px) { .dawki-hc-vitals-body { grid-template-columns: 1fr; } }

/* ECG monitor area */
.dawki-hc-vitals-ecg {
  position: relative;
  padding: 22px 22px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 22px, rgba(34, 197, 94, 0.04) 22px, rgba(34, 197, 94, 0.04) 23px),
    repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(34, 197, 94, 0.04) 22px, rgba(34, 197, 94, 0.04) 23px);
}
@media (max-width: 991px) { .dawki-hc-vitals-ecg { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } }

.dawki-hc-vitals-ecg-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.dawki-hc-vitals-ecg-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: rgba(226, 232, 240, 0.55);
  text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-hc-vitals-ecg-bpm {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.dawki-hc-vitals-ecg-bpm-value {
  font-size: 38px;
  font-weight: 900;
  color: #22c55e;
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.55);
}
.dawki-hc-vitals-ecg-bpm-unit {
  font-size: 12px;
  font-weight: 800;
  color: rgba(34, 197, 94, 0.7);
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.5px;
}

.dawki-hc-vitals-ecg-svg {
  width: 100%;
  height: 180px;
  display: block;
}
.dawki-hc-vitals-ecg-line {
  fill: none;
  stroke: #22c55e;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.7));
}
.dawki-hc-vitals-ecg-cursor {
  fill: #22c55e;
  filter: drop-shadow(0 0 8px #22c55e);
}

.dawki-hc-vitals-ecg-stripe {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(34, 197, 94, 0.18);
  font-size: 10.5px;
  color: rgba(226, 232, 240, 0.55);
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.4px;
}
.dawki-hc-vitals-ecg-stripe span strong {
  color: #ffffff;
}

/* Vital cards on the right */
.dawki-hc-vitals-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 22px;
}

.dawki-hc-vitals-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.dawki-hc-vitals-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 4px;
  height: 28px;
  background: var(--vc-color);
  border-radius: 4px 0 0 4px;
  box-shadow: 0 0 10px var(--vc-color);
}
.dawki-hc-vitals-card-name {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: rgba(226, 232, 240, 0.55);
  text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-hc-vitals-card-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.dawki-hc-vitals-card-num {
  font-size: 28px;
  font-weight: 900;
  color: var(--vc-color);
  font-family: ui-monospace, "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1;
}
.dawki-hc-vitals-card-unit {
  font-size: 11px;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.55);
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-hc-vitals-card-spark {
  width: 100%;
  height: 30px;
  display: block;
  margin-top: 4px;
}
.dawki-hc-vitals-card-status {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(226, 232, 240, 0.55);
  text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace;
  margin-top: 2px;
}
.dawki-hc-vitals-card-status--ok { color: #86efac; }

.dawki-hc-vitals-alert {
  grid-column: 1 / -1;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.30);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: ui-monospace, "Courier New", monospace;
  color: #86efac;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dawki-hc-vitals-alert::before {
  content: "✓";
  font-weight: 900;
}
/* === END Healthcare Vitals === */

/* ============================================================================
 * Healthcare — Compliance Trust Wall (animated certification badges)
 * ============================================================================ */
.dawki-hc-trust {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-hc-trust { padding: 70px 20px; } }

.dawki-hc-trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(79, 124, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 124, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
}

.dawki-hc-trust > .container { position: relative; z-index: 2; }

.dawki-hc-trust-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-hc-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 124, 255, 0.10);
  border: 1px solid rgba(79, 124, 255, 0.30);
  color: #93c5fd;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-hc-trust-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4f7cff; box-shadow: 0 0 8px #4f7cff;
}
.dawki-hc-trust-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-hc-trust-title span {
  background: linear-gradient(90deg, #4f7cff, #06b6d4, #22c55e);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-hc-trust-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-hc-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 991px) { .dawki-hc-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-hc-trust-grid { grid-template-columns: 1fr; max-width: 380px; } }

.dawki-hc-trust-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 26px 24px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  cursor: default;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.dawki-hc-trust-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, var(--tc-glow, rgba(79, 124, 255, 0.25)) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dawki-hc-trust-card:hover {
  transform: translateY(-6px);
  border-color: var(--tc-color, rgba(79, 124, 255, 0.5));
  box-shadow: 0 18px 45px var(--tc-glow, rgba(79, 124, 255, 0.22));
}
.dawki-hc-trust-card:hover::before { opacity: 1; }

.dawki-hc-trust-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

/* Shield-style badge with animated check seal */
.dawki-hc-trust-card-shield {
  position: relative;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dawki-hc-trust-card-shield::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--tc-a, #4f7cff), var(--tc-b, #06b6d4));
  box-shadow: 0 0 22px var(--tc-glow, rgba(79, 124, 255, 0.5)),
              inset 0 0 0 2px rgba(255, 255, 255, 0.18);
  transform: rotate(-3deg);
}
.dawki-hc-trust-card-shield-check {
  position: relative;
  z-index: 2;
  color: #ffffff;
}
.dawki-hc-trust-card-shield-check svg { width: 32px; height: 32px; }

.dawki-hc-trust-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.32);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-hc-trust-card-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: dawki-hc-pulse 2s ease-in-out infinite;
}

.dawki-hc-trust-card-name {
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0 0 4px;
}
.dawki-hc-trust-card-meta {
  color: rgba(226, 232, 240, 0.55);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-family: ui-monospace, "Courier New", monospace;
  margin: 0 0 14px;
}
.dawki-hc-trust-card-desc {
  color: rgba(226, 232, 240, 0.72);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 16px;
}

.dawki-hc-trust-card-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.dawki-hc-trust-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tc-a, #4f7cff), var(--tc-b, #06b6d4));
  border-radius: 999px;
  box-shadow: 0 0 10px var(--tc-glow, rgba(79, 124, 255, 0.5));
  transform-origin: left center;
}
.dawki-hc-trust-card-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-hc-trust-card-progress-row span:first-child { color: rgba(226, 232, 240, 0.55); text-transform: uppercase; }
.dawki-hc-trust-card-progress-row span:last-child  { color: var(--tc-color, #93c5fd); font-variant-numeric: tabular-nums; }
/* === END Healthcare Trust Wall === */

/* ============================================================================
 * Portfolio Page — Hero, Stats Strip, Case Study Cards
 * ============================================================================ */
.dawki-pf-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 30px 90px;
  background: #02060f;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 768px) { .dawki-pf-hero { padding: 110px 20px 70px; min-height: 380px; } }

.dawki-pf-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  z-index: 0;
}
.dawki-pf-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(2, 6, 15, 0.30) 0%, rgba(2, 6, 15, 0.92) 70%),
    linear-gradient(180deg, rgba(2, 6, 15, 0.55), rgba(2, 6, 15, 0.85));
  z-index: 1;
}

.dawki-pf-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.dawki-pf-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 124, 255, 0.10);
  border: 1px solid rgba(79, 124, 255, 0.30);
  color: #93c5fd;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-pf-hero-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4f7cff; box-shadow: 0 0 8px #4f7cff;
}
.dawki-pf-hero-title {
  color: #ffffff;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 0 0 18px;
}
.dawki-pf-hero-title span {
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-pf-hero-subtitle {
  color: rgba(226, 232, 240, 0.78);
  font-size: 17px;
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto;
}

/* Stats strip */
.dawki-pf-stats {
  position: relative;
  padding: 60px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0d1530 50%, #050d1c 100%);
  border-bottom: 1px solid rgba(79, 124, 255, 0.08);
}
.dawki-pf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 991px) { .dawki-pf-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.dawki-pf-stat {
  text-align: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 18px 20px;
}
.dawki-pf-stat-value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #4f7cff 0%, #a855f7 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}
.dawki-pf-stat-label {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.65);
  font-family: ui-monospace, "Courier New", monospace;
}

/* Case studies list */
.dawki-pf-list {
  position: relative;
  padding: 90px 30px 110px;
  background: #02060f;
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-pf-list { padding: 70px 20px 90px; } }

.dawki-pf-list::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(79, 124, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 124, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.dawki-pf-list > .container { position: relative; z-index: 2; }

.dawki-pf-list-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.dawki-pf-list-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 12px;
}
.dawki-pf-list-title span {
  background: linear-gradient(90deg, #4f7cff, #06b6d4);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-pf-list-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 15.5px;
  line-height: 1.7;
}

/* Case study row — alternating left/right (image | content) */
.dawki-pf-case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto 90px;
}
.dawki-pf-case:last-child { margin-bottom: 0; }
@media (max-width: 991px) { .dawki-pf-case { grid-template-columns: 1fr; gap: 32px; max-width: 600px; } }

.dawki-pf-case--reverse .dawki-pf-case-image { order: 2; }
.dawki-pf-case--reverse .dawki-pf-case-content { order: 1; }
@media (max-width: 991px) {
  .dawki-pf-case--reverse .dawki-pf-case-image,
  .dawki-pf-case--reverse .dawki-pf-case-content { order: unset; }
}

.dawki-pf-case-image {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cs-a, #4f7cff) 0%, var(--cs-b, #a855f7) 100%);
}
.dawki-pf-case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dawki-pf-case:hover .dawki-pf-case-image img {
  transform: scale(1.04);
}
.dawki-pf-case-image::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(135deg, var(--cs-a, #4f7cff), var(--cs-b, #a855f7));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}

/* Floating tag chips on the image */
.dawki-pf-case-tag {
  position: absolute;
  top: 18px; left: 18px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: ui-monospace, "Courier New", monospace;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
}
.dawki-pf-case-stage {
  position: absolute;
  bottom: 18px; right: 18px;
  background: linear-gradient(135deg, var(--cs-a, #4f7cff), var(--cs-b, #a855f7));
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 5px 11px;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 0 18px var(--cs-glow, rgba(79, 124, 255, 0.5));
}

/* Content side */
.dawki-pf-case-brand {
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 20px;
  line-height: 1;
}
@media (max-width: 575px) { .dawki-pf-case-brand { font-size: 28px; } }

.dawki-pf-case-desc {
  color: rgba(226, 232, 240, 0.85);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 28px;
}

.dawki-pf-case-meta {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 22px;
  margin-bottom: 28px;
  align-items: start;
}
.dawki-pf-case-meta-divider {
  background: rgba(255, 255, 255, 0.10);
}
.dawki-pf-case-meta-block strong {
  display: block;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
  line-height: 1.1;
}
.dawki-pf-case-meta-block span {
  color: rgba(226, 232, 240, 0.65);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.dawki-pf-case-services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.dawki-pf-case-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cs-color, #93c5fd);
  background: var(--cs-bg, rgba(79, 124, 255, 0.10));
  border: 1px solid var(--cs-border, rgba(79, 124, 255, 0.30));
  padding: 5px 11px;
  border-radius: 999px;
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.3px;
}

.dawki-pf-case-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--cs-a, #4f7cff) 0%, var(--cs-b, #a855f7) 100%);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 10px 26px var(--cs-glow, rgba(79, 124, 255, 0.32));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dawki-pf-case-cta:hover {
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 16px 36px var(--cs-glow, rgba(79, 124, 255, 0.45));
}
.dawki-pf-case-cta svg {
  width: 14px; height: 14px;
  transition: transform 0.3s ease;
}
.dawki-pf-case-cta:hover svg { transform: translateX(3px); }

/* Modal-style detail panel that opens beneath the card on Read More */
.dawki-pf-case-detail {
  grid-column: 1 / -1;
  margin-top: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid var(--cs-border, rgba(79, 124, 255, 0.30));
  border-radius: 16px;
  padding: 28px 30px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.dawki-pf-case-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}
@media (max-width: 767px) { .dawki-pf-case-detail-grid { grid-template-columns: 1fr; gap: 26px; } }

.dawki-pf-case-detail-h {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: var(--cs-color, #93c5fd);
  text-transform: uppercase;
  margin: 0 0 8px;
  font-family: ui-monospace, "Courier New", monospace;
}
.dawki-pf-case-detail-text {
  color: rgba(226, 232, 240, 0.85);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 18px;
}
.dawki-pf-case-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dawki-pf-case-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(226, 232, 240, 0.85);
  line-height: 1.5;
}
.dawki-pf-case-detail-list li::before {
  content: "→";
  color: var(--cs-color, #93c5fd);
  font-weight: 800;
  margin-top: 1px;
  flex-shrink: 0;
}
/* === END Portfolio === */

/* ============================================================================
 * Dedicated Teams — Engineer Talent Wall (profile card grid)
 * ============================================================================ */
.dawki-ddt-wall {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0e1a35 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-ddt-wall { padding: 70px 20px; } }

.dawki-ddt-wall::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 380px;
  background: radial-gradient(ellipse, rgba(79, 124, 255, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-ddt-wall::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-ddt-wall > .container { position: relative; z-index: 2; }

.dawki-ddt-wall-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-ddt-wall-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 124, 255, 0.10);
  border: 1px solid rgba(79, 124, 255, 0.30);
  color: #93c5fd;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-ddt-wall-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4f7cff; box-shadow: 0 0 8px #4f7cff;
}
.dawki-ddt-wall-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-ddt-wall-title span {
  background: linear-gradient(90deg, #4f7cff, #06b6d4, #22c55e);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-ddt-wall-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-ddt-wall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
}
@media (max-width: 991px) { .dawki-ddt-wall-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dawki-ddt-wall-grid { grid-template-columns: 1fr; max-width: 380px; } }

.dawki-ddt-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 22px 22px 20px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  cursor: default;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.dawki-ddt-card:hover {
  transform: translateY(-6px);
  border-color: var(--ec-color, rgba(79, 124, 255, 0.5));
  box-shadow: 0 20px 50px var(--ec-glow, rgba(79, 124, 255, 0.22));
}

.dawki-ddt-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.dawki-ddt-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ec-a), var(--ec-b));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  flex-shrink: 0;
  box-shadow: 0 0 18px var(--ec-glow, rgba(79, 124, 255, 0.5));
  position: relative;
}
.dawki-ddt-card-avatar::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid #050d1c;
  box-shadow: 0 0 8px #22c55e;
}
.dawki-ddt-card-meta { flex: 1; min-width: 0; }
.dawki-ddt-card-name {
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin: 0;
  line-height: 1.2;
}
.dawki-ddt-card-handle {
  color: rgba(226, 232, 240, 0.55);
  font-size: 11.5px;
  font-weight: 600;
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.3px;
  margin-top: 2px;
  display: block;
}

.dawki-ddt-card-role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--ec-color, #93c5fd);
  background: var(--ec-bg, rgba(79, 124, 255, 0.10));
  border: 1px solid var(--ec-border, rgba(79, 124, 255, 0.30));
  padding: 4px 11px;
  border-radius: 999px;
  text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace;
  margin-bottom: 12px;
}

.dawki-ddt-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.dawki-ddt-card-stat-key {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: rgba(226, 232, 240, 0.55);
  text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace;
  margin-bottom: 2px;
}
.dawki-ddt-card-stat-val {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}

.dawki-ddt-card-skills-h {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: rgba(226, 232, 240, 0.55);
  text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace;
  margin-bottom: 8px;
}
.dawki-ddt-card-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.dawki-ddt-card-skill {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(226, 232, 240, 0.85);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 9px;
  border-radius: 6px;
  font-family: ui-monospace, "Courier New", monospace;
}

.dawki-ddt-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.dawki-ddt-card-foot-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  color: #86efac;
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.4px;
}
.dawki-ddt-card-foot-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: dawki-hc-pulse 1.6s ease-in-out infinite;
}
.dawki-ddt-card-foot-rate {
  color: rgba(226, 232, 240, 0.78);
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, "Courier New", monospace;
}
/* === END Dedicated Teams Wall === */

/* ============================================================================
 * Dedicated Teams — 3-Week Hiring Sprint (vertical day-by-day timeline)
 * ============================================================================ */
.dawki-ddt-sprint {
  position: relative;
  padding: 110px 30px;
  background: radial-gradient(ellipse at top, #0a1628 0%, #050d1c 60%, #02060f 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-ddt-sprint { padding: 70px 20px; } }

.dawki-ddt-sprint > .container { position: relative; z-index: 2; }

.dawki-ddt-sprint-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}
.dawki-ddt-sprint-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-ddt-sprint-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a855f7; box-shadow: 0 0 8px #a855f7;
}
.dawki-ddt-sprint-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-ddt-sprint-title span {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-ddt-sprint-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.dawki-ddt-sprint-frame {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

/* Vertical spine */
.dawki-ddt-sprint-frame::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 122px;
  width: 2px;
  background: linear-gradient(180deg, #06b6d4 0%, #4f7cff 35%, #a855f7 70%, #22c55e 100%);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
}
@media (max-width: 575px) {
  .dawki-ddt-sprint-frame::before { left: 28px; }
}

.dawki-ddt-sprint-week {
  margin-bottom: 28px;
  position: relative;
}
.dawki-ddt-sprint-week:last-child { margin-bottom: 0; }

.dawki-ddt-sprint-week-head {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
  position: relative;
}
@media (max-width: 575px) { .dawki-ddt-sprint-week-head { grid-template-columns: 16px 1fr; gap: 12px; } }

.dawki-ddt-sprint-week-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 110px;
  padding: 10px 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--wk-a), var(--wk-b));
  color: #ffffff;
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 22px var(--wk-glow, rgba(168, 85, 247, 0.45));
}
.dawki-ddt-sprint-week-badge strong {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.dawki-ddt-sprint-week-badge span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.85;
}
@media (max-width: 575px) { .dawki-ddt-sprint-week-badge { display: none; } }

.dawki-ddt-sprint-week-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0 0 4px;
}
.dawki-ddt-sprint-week-title-sub {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.6);
  font-weight: 600;
  letter-spacing: 0.2px;
  font-family: ui-monospace, "Courier New", monospace;
}

.dawki-ddt-sprint-days {
  margin-left: 110px;
  padding-left: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 575px) {
  .dawki-ddt-sprint-days { margin-left: 16px; padding-left: 26px; }
}

.dawki-ddt-sprint-day {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.dawki-ddt-sprint-day:hover {
  border-color: var(--day-color, rgba(168, 85, 247, 0.4));
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  transform: translateX(4px);
}
/* Connector dot to the spine */
.dawki-ddt-sprint-day::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -36px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--day-color, #a855f7);
  border: 2px solid #050d1c;
  transform: translateY(-50%);
  box-shadow: 0 0 10px var(--day-color, #a855f7);
  z-index: 2;
}
.dawki-ddt-sprint-day::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -22px;
  width: 22px;
  height: 1px;
  background: var(--day-color, #a855f7);
  opacity: 0.4;
  transform: translateY(-50%);
}
@media (max-width: 575px) {
  .dawki-ddt-sprint-day::before { left: -26px; width: 11px; height: 11px; }
  .dawki-ddt-sprint-day::after { left: -15px; width: 15px; }
}

.dawki-ddt-sprint-day-num {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  color: rgba(226, 232, 240, 0.5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 9px;
  border-radius: 6px;
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  align-self: flex-start;
  margin-top: 1px;
}
.dawki-ddt-sprint-day-content { flex: 1; min-width: 0; }
.dawki-ddt-sprint-day-title {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  margin: 0 0 4px;
  line-height: 1.4;
}
.dawki-ddt-sprint-day-desc {
  color: rgba(226, 232, 240, 0.68);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0;
}

.dawki-ddt-sprint-day-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #22c55e;
  align-self: center;
}
.dawki-ddt-sprint-day-check svg { width: 12px; height: 12px; }

/* Final flag at the bottom */
.dawki-ddt-sprint-flag {
  margin-top: 24px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(6, 182, 212, 0.10));
  border: 1px solid rgba(34, 197, 94, 0.40);
  border-radius: 14px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 800;
  color: #86efac;
  letter-spacing: 0.3px;
  font-family: ui-monospace, "Courier New", monospace;
  text-transform: uppercase;
}
/* === END Dedicated Teams Sprint === */

/* ============================================================================
 * Enterprise — Video Showcase (custom playable video with animated frame)
 * ============================================================================ */
.dawki-ent-video {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(180deg, #050d1c 0%, #0a1628 60%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-ent-video { padding: 70px 20px; } }

.dawki-ent-video::before {
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 720px; height: 360px;
  background: radial-gradient(ellipse, rgba(79, 124, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-ent-video > .container { position: relative; z-index: 2; }

.dawki-ent-video-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.dawki-ent-video-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(236, 72, 153, 0.10);
  border: 1px solid rgba(236, 72, 153, 0.30);
  color: #fbcfe8;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-ent-video-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ec4899; box-shadow: 0 0 8px #ec4899;
}
.dawki-ent-video-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-ent-video-title span {
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-ent-video-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

/* Video frame with gradient border glow */
.dawki-ent-video-frame {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: #02060f;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(79, 124, 255, 0.18) inset;
}
.dawki-ent-video-frame::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.6), rgba(168, 85, 247, 0.5), rgba(236, 72, 153, 0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
.dawki-ent-video-frame-glow {
  position: absolute;
  inset: -20px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.35), rgba(168, 85, 247, 0.30), rgba(236, 72, 153, 0.25));
  filter: blur(40px);
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
  animation: dawki-ent-video-glow 5s ease-in-out infinite alternate;
}
@keyframes dawki-ent-video-glow {
  from { opacity: 0.45; }
  to   { opacity: 0.85; }
}

.dawki-ent-video-frame video,
.dawki-ent-video-frame iframe,
.dawki-ent-video-frame img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #02060f;
  border: 0;
}

/* Custom play overlay */
.dawki-ent-video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #4f7cff 0%, #a855f7 50%, #ec4899 100%);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 50px rgba(168, 85, 247, 0.55),
    0 0 0 8px rgba(79, 124, 255, 0.18);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  z-index: 4;
}
.dawki-ent-video-play:hover {
  transform: translate(-50%, -50%) scale(1.10);
  box-shadow:
    0 0 70px rgba(168, 85, 247, 0.75),
    0 0 0 10px rgba(79, 124, 255, 0.25);
}
.dawki-ent-video-play svg {
  position: relative;
  z-index: 2;
  margin-left: 4px;
}
.dawki-ent-video-play-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.85);
  pointer-events: none;
  animation: dawki-ent-video-play-pulse 2.6s ease-out infinite;
  opacity: 0;
}
.dawki-ent-video-play-pulse:nth-of-type(2) { animation-delay: 1.3s; }
@keyframes dawki-ent-video-play-pulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(2.0); opacity: 0; }
}

@media (max-width: 575px) {
  .dawki-ent-video-play { width: 70px; height: 70px; }
  .dawki-ent-video-play svg { width: 22px; height: 22px; }
}
/* === END Enterprise Video === */

/* ============================================================================
 * Home — Success Stories (video on left + testimonial cards on right)
 * ============================================================================ */
.dawki-home-stories {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #050d1c 100%);
  overflow: hidden;
}
@media (max-width: 768px) { .dawki-home-stories { padding: 70px 20px; } }

.dawki-home-stories::before {
  content: "";
  position: absolute;
  top: 5%; left: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.dawki-home-stories::after {
  content: "";
  position: absolute;
  bottom: 0; right: -8%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.dawki-home-stories > .container { position: relative; z-index: 2; }

.dawki-home-stories-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.dawki-home-stories-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 124, 255, 0.10);
  border: 1px solid rgba(79, 124, 255, 0.30);
  color: #93c5fd;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dawki-home-stories-pill > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4f7cff; box-shadow: 0 0 8px #4f7cff;
}
.dawki-home-stories-title {
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 14px;
}
.dawki-home-stories-title span {
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dawki-home-stories-subtitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

/* Two-column layout */
.dawki-home-stories-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 991px) {
  .dawki-home-stories-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* LEFT — video + CTA */
.dawki-home-stories-left {
  position: sticky;
  top: 100px;
}
@media (max-width: 991px) { .dawki-home-stories-left { position: static; } }

.dawki-home-stories-video {
  position: relative;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #02060f;
  aspect-ratio: 4 / 3;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(79, 124, 255, 0.2) inset;
}
.dawki-home-stories-video::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.55), rgba(168, 85, 247, 0.45), rgba(236, 72, 153, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
.dawki-home-stories-video-glow {
  position: absolute;
  inset: -18px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.30), rgba(168, 85, 247, 0.25), rgba(236, 72, 153, 0.20));
  filter: blur(36px);
  opacity: 0.7;
  z-index: -1;
  animation: dawki-home-stories-glow 5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes dawki-home-stories-glow {
  from { opacity: 0.45; }
  to   { opacity: 0.85; }
}
.dawki-home-stories-video video,
.dawki-home-stories-video iframe,
.dawki-home-stories-video img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #02060f;
  border: 0;
}

.dawki-home-stories-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #4f7cff 0%, #a855f7 50%, #ec4899 100%);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 45px rgba(168, 85, 247, 0.55),
    0 0 0 7px rgba(79, 124, 255, 0.18);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  z-index: 4;
}
.dawki-home-stories-play:hover {
  transform: translate(-50%, -50%) scale(1.10);
  box-shadow:
    0 0 60px rgba(168, 85, 247, 0.75),
    0 0 0 9px rgba(79, 124, 255, 0.25);
}
.dawki-home-stories-play svg { position: relative; z-index: 2; margin-left: 4px; }
.dawki-home-stories-play-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.85);
  pointer-events: none;
  animation: dawki-home-stories-pulse 2.6s ease-out infinite;
  opacity: 0;
}
.dawki-home-stories-play-pulse:nth-of-type(2) { animation-delay: 1.3s; }
@keyframes dawki-home-stories-pulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(2.0); opacity: 0; }
}

.dawki-home-stories-cta { margin-top: 28px; }
.dawki-home-stories-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: linear-gradient(135deg, #4f7cff 0%, #a855f7 100%);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dawki-home-stories-cta-btn:hover {
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.45);
}

/* RIGHT — testimonial cards */
.dawki-home-stories-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dawki-home-stories-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 22px 24px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.dawki-home-stories-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  border-radius: 18px 18px 0 0;
  opacity: 0.7;
}
.dawki-home-stories-card:hover {
  border-color: rgba(79, 124, 255, 0.4);
  box-shadow: 0 18px 40px rgba(79, 124, 255, 0.18);
}

.dawki-home-stories-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.dawki-home-stories-card-head img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(79, 124, 255, 0.4);
  flex-shrink: 0;
}
.dawki-home-stories-card-meta { flex: 1; min-width: 0; }
.dawki-home-stories-card-meta h4 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.2;
}
.dawki-home-stories-card-meta span {
  color: rgba(226, 232, 240, 0.65);
  font-size: 12.5px;
  display: block;
  line-height: 1.4;
}
.dawki-home-stories-card-stars {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}
.dawki-home-stories-card-text {
  color: rgba(226, 232, 240, 0.85);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 575px) {
  .dawki-home-stories-card-head { flex-wrap: wrap; }
  .dawki-home-stories-play { width: 64px; height: 64px; }
  .dawki-home-stories-play svg { width: 22px; height: 22px; }
}
/* === END Home Success Stories === */

/* ============================================================================
 * Tech Stack — auto-flipping logo grid (between Process and Services)
 * ============================================================================ */
.dawki-tech-section {
  position: relative;
  padding: 80px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #0f1f3a 100%);
  overflow: hidden;
}

@media (max-width: 768px) { .dawki-tech-section { padding: 60px 20px; } }

.dawki-tech-section::before {
  content: "";
  position: absolute;
  top: -10%; left: -5%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.dawki-tech-section::after {
  content: "";
  position: absolute;
  bottom: -10%; right: -5%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.dawki-tech-section > .container { position: relative; z-index: 2; }

.dawki-tech-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

.dawki-tech-title {
  color: #ffffff !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px;
  margin: 18px 0 12px 0 !important;
}

.dawki-tech-title span {
  background: linear-gradient(90deg, #5b9eff, #a855f7, #ec4899);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: contact-banner-flow 5s linear infinite;
}

.dawki-tech-subtitle {
  color: rgba(207, 224, 255, 0.78);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
}

/* Tech flip grid — 6 cols × 2 rows = 12 cells */
.dawki-tech-flipgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.30),
              0 0 0 1px rgba(91, 139, 255, 0.20);
  margin-top: 30px;
}

@media (max-width: 1199px) { .dawki-tech-flipgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .dawki-tech-flipgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .dawki-tech-flipgrid { grid-template-columns: repeat(2, 1fr); } }

.dawki-tech-flipcell {
  position: relative;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  min-height: 110px;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
  perspective: 600px;
  transition: background 0.3s ease, transform 0.3s ease;
}

/* Remove right border on every 6th item (last column on desktop) */
.dawki-tech-flipcell:nth-child(6n) { border-right: 0; }

@media (max-width: 1199px) {
  .dawki-tech-flipcell:nth-child(6n) { border-right: 1px solid rgba(15, 23, 42, 0.06); }
  .dawki-tech-flipcell:nth-child(4n) { border-right: 0; }
}

@media (max-width: 767px) {
  .dawki-tech-flipcell:nth-child(4n) { border-right: 1px solid rgba(15, 23, 42, 0.06); }
  .dawki-tech-flipcell:nth-child(3n) { border-right: 0; }
}

@media (max-width: 480px) {
  .dawki-tech-flipcell:nth-child(3n) { border-right: 1px solid rgba(15, 23, 42, 0.06); }
  .dawki-tech-flipcell:nth-child(2n) { border-right: 0; }
}

.dawki-tech-flipcell:hover {
  background: linear-gradient(145deg, #ffffff, #f0f5ff);
  z-index: 2;
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.20);
}

.dawki-tech-flipcell img {
  max-width: 75px !important;
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  position: absolute;
  inset: 0;
  margin: auto;
  backface-visibility: hidden;
}

@media (max-width: 480px) {
  .dawki-tech-flipcell { padding: 18px 14px; min-height: 90px; }
  .dawki-tech-flipcell img { max-width: 55px !important; max-height: 45px !important; }
}
/* === END Tech Stack === */

/* ============================================================================
 * Robust Tools & Technologies — masonry grid (after CSD Services)
 * ============================================================================ */
.dawki-tools-section {
  position: relative;
  padding: 90px 30px;
  background: #ffffff;
  overflow: hidden;
}

@media (max-width: 768px) { .dawki-tools-section { padding: 60px 16px; } }

.dawki-tools-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}

.dawki-tools-title {
  color: #0f172a !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px;
  margin: 0 0 14px 0 !important;
}

.dawki-tools-title span {
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: contact-banner-flow 6s linear infinite;
}

.dawki-tools-subtitle {
  color: #475569;
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
}

/* Masonry-style multi-column grid */
.dawki-tools-grid {
  column-count: 7;
  column-gap: 14px;
}

@media (max-width: 1399px) { .dawki-tools-grid { column-count: 6; } }
@media (max-width: 1199px) { .dawki-tools-grid { column-count: 5; } }
@media (max-width: 991px)  { .dawki-tools-grid { column-count: 4; } }
@media (max-width: 767px)  { .dawki-tools-grid { column-count: 3; } }
@media (max-width: 480px)  { .dawki-tools-grid { column-count: 2; } }

/* Card */
.dawki-tool-card {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  padding: 16px 14px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease;
  cursor: default;
}

.dawki-tool-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 124, 255, 0.45);
  box-shadow: 0 14px 28px rgba(79, 124, 255, 0.15);
}

.dawki-tool-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dawki-tool-card:hover .dawki-tool-icon {
  transform: scale(1.15) rotate(-6deg);
}

.dawki-tool-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.dawki-tool-name {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.1px;
}
/* === END Tools Grid === */

/* ============================================================================
 * Tools Vertical — opt-in via toolsLayout="vertical" (rich stacked cards)
 * ============================================================================ */
.dawki-tools-vertical {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.dawki-tools-vertical-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 26px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  cursor: default;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, transform 0.4s ease;
}

.dawki-tools-vertical-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: linear-gradient(180deg, #4f7cff, #a855f7, #ec4899);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dawki-tools-vertical-card:hover {
  border-color: transparent;
  box-shadow: 0 18px 45px rgba(79, 124, 255, 0.22), 0 6px 16px rgba(168, 85, 247, 0.12);
}

.dawki-tools-vertical-card:hover::before {
  transform: scaleY(1);
}

.dawki-tools-vertical-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border: 1px solid rgba(79, 124, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s ease;
}

.dawki-tools-vertical-card:hover .dawki-tools-vertical-icon {
  transform: scale(1.08) rotate(-4deg);
  border-color: rgba(79, 124, 255, 0.3);
}

.dawki-tools-vertical-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Letter fallback for tools whose logo couldn't load */
.dawki-tools-vertical-icon-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dawki-tools-vertical-content {
  flex: 1;
  min-width: 0;
}

.dawki-tools-vertical-name {
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.2;
  letter-spacing: -0.1px;
  transition: color 0.3s ease, background 0.3s ease;
}

.dawki-tools-vertical-card:hover .dawki-tools-vertical-name {
  background: linear-gradient(90deg, #4f7cff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dawki-tools-vertical-desc {
  color: #475569;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

.dawki-tools-vertical-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(79, 124, 255, 0.10);
  color: #4f7cff;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, color 0.4s ease;
}

.dawki-tools-vertical-card:hover .dawki-tools-vertical-arrow {
  opacity: 1;
  transform: translateX(0);
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff;
}

@media (max-width: 575px) {
  .dawki-tools-vertical-card { padding: 16px 18px; gap: 16px; }
  .dawki-tools-vertical-icon { width: 52px; height: 52px; }
  .dawki-tools-vertical-icon img { width: 30px; height: 30px; }
  .dawki-tools-vertical-name { font-size: 16px; }
  .dawki-tools-vertical-desc { font-size: 12.5px; }
  .dawki-tools-vertical-arrow { display: none; }
}
/* === END Tools Vertical === */

/* ============================================================================
 * Proven Results — masonry grid (videos + text reviews) — About page
 * ============================================================================ */
.dawki-pr-section {
  position: relative;
  padding: 100px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #0a1240 100%);
  overflow: hidden;
}

@media (max-width: 768px) { .dawki-pr-section { padding: 70px 16px; } }

/* Decorative glow orbs in bg */
.dawki-pr-bg-orb {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.dawki-pr-bg-orb--a {
  top: -10%; left: -8%;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.30) 0%, transparent 70%);
}

.dawki-pr-bg-orb--b {
  bottom: -5%; right: -8%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.30) 0%, transparent 70%);
}

.dawki-pr-section > .container { position: relative; z-index: 2; }

/* Heading area */
.dawki-pr-heading {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 60px;
}

.dawki-pr-title {
  color: #ffffff !important;
  font-size: clamp(40px, 7vw, 88px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -2px;
  margin: 0 !important;
  text-shadow: 0 4px 30px rgba(79, 124, 255, 0.30);
}

.dawki-pr-sub {
  color: #ffffff !important;
  font-size: clamp(18px, 2.4vw, 26px) !important;
  font-weight: 600 !important;
  margin: 8px 0 16px 0 !important;
}

.dawki-pr-desc {
  color: rgba(207, 224, 255, 0.78) !important;
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 auto 24px !important;
  max-width: 700px;
}

.dawki-pr-cta {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff !important;
  padding: 13px 28px;
  border-radius: 50px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.40);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 36px;
}

.dawki-pr-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.55);
  color: #ffffff !important;
}

/* Stats row */
.dawki-pr-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
  flex-wrap: wrap;
  padding: 18px 0 0;
  border-top: 1px solid rgba(91, 139, 255, 0.18);
}

.dawki-pr-stat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.dawki-pr-stat-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 124, 255, 0.15);
  border: 1px solid rgba(91, 139, 255, 0.40);
  font-size: 18px;
}

.dawki-pr-stat-num {
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.dawki-pr-stat-label {
  color: rgba(207, 224, 255, 0.70);
  font-size: 13px;
  font-weight: 500;
}

/* Masonry grid */
.dawki-pr-grid {
  column-count: 4;
  column-gap: 18px;
}

@media (max-width: 1199px) { .dawki-pr-grid { column-count: 3; } }
@media (max-width: 767px)  { .dawki-pr-grid { column-count: 2; } }
@media (max-width: 480px)  { .dawki-pr-grid { column-count: 1; } }

.dawki-pr-grid > * {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 18px;
}

/* Card baseline — subtle glass on dark bg */
.dawki-pr-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(79, 124, 255, 0.04));
  border: 1px solid rgba(91, 139, 255, 0.18);
  border-radius: 16px;
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.5s ease,
              background 0.4s ease;
}

/* Subtle "tilted lift" on hover — comes into view */
.dawki-pr-card:hover {
  transform: translateY(-8px) rotate(-0.6deg);
  border-color: rgba(91, 139, 255, 0.55);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(168, 85, 247, 0.06));
  box-shadow: 0 24px 50px rgba(79, 124, 255, 0.30),
              0 0 0 1px rgba(91, 139, 255, 0.30);
}

/* Tags row */
.dawki-pr-card-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.dawki-pr-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(91, 139, 255, 0.22);
  color: rgba(207, 224, 255, 0.92);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 30px;
}

.dawki-pr-tag i {
  font-style: normal;
  font-size: 11px;
}

.dawki-pr-tag--alt { color: #a78bfa; }

/* Quote text */
.dawki-pr-quote {
  color: #ffffff !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0 0 16px 0 !important;
  font-weight: 500;
}

/* Author row */
.dawki-pr-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(91, 139, 255, 0.22);
}

.dawki-pr-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

.dawki-pr-author-name {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
}

.dawki-pr-author-role {
  color: rgba(207, 224, 255, 0.65);
  font-size: 11.5px;
  margin-top: 2px;
  line-height: 1.3;
}

/* Video cards */
.dawki-pr-card--video {
  padding: 0;
}

.dawki-pr-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 14;
  background: #000;
  overflow: hidden;
}

.dawki-pr-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dawki-pr-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.50);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dawki-pr-card--video:hover .dawki-pr-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.4);
}

.dawki-pr-card--video .dawki-pr-card-body {
  padding: 16px 18px 16px;
}
/* === END Proven Results === */

/* ============================================================================
 * Our Products — CRM + AI Grow showcase (Home page, replaces Proud Projects)
 * ============================================================================ */
.dawki-products {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0a1240 50%, #1a0a3a 100%);
  overflow: hidden;
}

@media (max-width: 768px) { .dawki-products { padding: 70px 16px; } }

.dawki-products-orb {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.dawki-products-orb--a {
  top: -10%; left: -8%;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.30) 0%, transparent 70%);
  animation: products-orb-float 12s ease-in-out infinite;
}

.dawki-products-orb--b {
  bottom: -10%; right: -8%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.30) 0%, transparent 70%);
  animation: products-orb-float 14s ease-in-out infinite reverse;
}

@keyframes products-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.10); }
}

.dawki-products > .container { position: relative; z-index: 2; }

/* Heading */
.dawki-products-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 70px;
}

.dawki-products-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(79, 124, 255, 0.15);
  border: 1px solid rgba(91, 139, 255, 0.40);
  color: #88b4ff;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.dawki-products-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #88b4ff;
  box-shadow: 0 0 10px #88b4ff;
  animation: contact-dot-blink 1.5s ease-in-out infinite;
}

.dawki-products-title {
  color: #ffffff !important;
  font-size: clamp(34px, 5vw, 60px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px;
  margin: 0 0 16px 0 !important;
}

.dawki-products-title span {
  background: linear-gradient(90deg, #ec4899 0%, #4f7cff 35%, #a855f7 65%, #06b6d4 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: contact-flow 5s linear infinite;
  filter: drop-shadow(0 4px 16px rgba(168, 85, 247, 0.30));
}

.dawki-products-subtitle {
  color: rgba(207, 224, 255, 0.78);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

/* Products list */
.dawki-products-list {
  display: flex;
  flex-direction: column;
  gap: 90px;
}

@media (max-width: 768px) { .dawki-products-list { gap: 60px; } }

/* Product card — split layout */
.dawki-product-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 991px) {
  .dawki-product-card { grid-template-columns: 1fr; gap: 40px; }
}

.dawki-product-card--reverse .dawki-product-visual { order: 2; }
.dawki-product-card--reverse .dawki-product-content { order: 1; }

@media (max-width: 991px) {
  .dawki-product-card--reverse .dawki-product-visual,
  .dawki-product-card--reverse .dawki-product-content { order: initial; }
}

/* Visual side — browser frame around product image */
.dawki-product-visual {
  position: relative;
}

.dawki-product-frame {
  position: relative;
  background: #0f172a;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.50),
              0 0 0 1px rgba(91, 139, 255, 0.25);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
}

.dawki-product-card:hover .dawki-product-frame {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 40px 90px rgba(79, 124, 255, 0.40),
              0 0 0 1px rgba(91, 139, 255, 0.50);
}

.dawki-product-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border-bottom: 1px solid rgba(91, 139, 255, 0.18);
}

.dawki-product-frame-bar span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.dawki-product-frame-bar span:nth-child(1) { background: #ff5f57; }
.dawki-product-frame-bar span:nth-child(2) { background: #febc2e; }
.dawki-product-frame-bar span:nth-child(3) { background: #28c840; }

.dawki-product-frame img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dawki-product-card:hover .dawki-product-frame img {
  transform: scale(1.04);
}

/* Glow halo behind frame */
.dawki-product-frame-glow {
  position: absolute;
  inset: -10px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.50), rgba(168, 85, 247, 0.40));
  filter: blur(34px);
  opacity: 0.35;
  z-index: -1;
  transition: opacity 0.5s ease;
}

.dawki-product-frame-glow--alt {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.50), rgba(168, 85, 247, 0.45), rgba(6, 182, 212, 0.35));
}

.dawki-product-card:hover .dawki-product-frame-glow {
  opacity: 0.65;
}

/* Content side */
.dawki-product-content { position: relative; }

.dawki-product-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(79, 124, 255, 0.15);
  border: 1px solid rgba(91, 139, 255, 0.40);
  color: #88b4ff;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.dawki-product-badge--alt {
  background: rgba(236, 72, 153, 0.15);
  border-color: rgba(236, 72, 153, 0.45);
  color: #f9a8d4;
}

.dawki-product-title {
  color: #ffffff !important;
  font-size: clamp(28px, 3.6vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px;
  margin: 0 0 16px 0 !important;
}

.dawki-product-title span {
  background: linear-gradient(90deg, #5b9eff, #a855f7, #ec4899);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: contact-flow 6s linear infinite;
}

.dawki-product-desc {
  color: rgba(207, 224, 255, 0.85) !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  margin: 0 0 22px 0 !important;
}

/* Feature list */
.dawki-product-features {
  list-style: none;
  margin: 0 0 28px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dawki-product-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(207, 224, 255, 0.92);
  font-size: 14.5px;
  line-height: 1.55;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(91, 139, 255, 0.18);
  border-radius: 10px;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.dawki-product-features li:hover {
  transform: translateX(4px);
  background: rgba(79, 124, 255, 0.10);
  border-color: rgba(91, 139, 255, 0.45);
}

.dawki-product-features li i {
  font-style: normal;
  font-size: 18px;
  flex-shrink: 0;
}

/* Action button */
.dawki-product-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.dawki-product-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff !important;
  padding: 13px 26px;
  border-radius: 50px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.40);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dawki-product-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.55);
  color: #ffffff !important;
}

.dawki-product-btn svg {
  transition: transform 0.3s ease;
}

.dawki-product-btn:hover svg {
  transform: translateX(4px);
}
/* === END Our Products === */

/* === Custom: Hero Banner full-bg image takeover === */
/* Kill any white background on body/html so no white shows on edges.
   `overflow-x: clip` (instead of hidden) prevents horizontal scrollbars
   without creating a scroll container — critical so `position: sticky`
   keeps working on descendants like the Industries scroll-pinned section. */
html, body {
  background-color: #050d1c !important;
  overflow-x: clip;
}

/* Ensure the page wrapper / main has no white bg */
#primary,
.site-main,
main {
  background-color: transparent !important;
}

.tj-banner-section.section-gap-x {
  padding-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.tj-banner-section .banner-area {
  position: relative;
  background-image:
    linear-gradient(90deg, rgba(5, 10, 22, 0.92) 0%, rgba(8, 15, 32, 0.78) 35%, rgba(8, 15, 32, 0.55) 60%, rgba(8, 15, 32, 0.50) 85%, rgba(8, 15, 32, 0.55) 100%),
    linear-gradient(180deg, rgba(5, 10, 22, 0.20) 0%, rgba(5, 10, 22, 0.10) 50%, rgba(5, 10, 22, 0.40) 100%),
    url('https://images.unsplash.com/photo-1542831371-29b0f74f9713?auto=format&fit=crop&w=1920&q=85');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 0 !important;
  min-height: 760px;
  display: flex !important;
  align-items: center;
  padding: 120px 80px !important;
  overflow: hidden;
}

@media (max-width: 991px) {
  .tj-banner-section .banner-area {
    background-image:
      linear-gradient(180deg, rgba(5, 10, 22, 0.88) 0%, rgba(8, 15, 32, 0.75) 50%, rgba(8, 15, 32, 0.85) 100%),
      url('https://images.unsplash.com/photo-1542831371-29b0f74f9713?auto=format&fit=crop&w=1200&q=80');
    padding: 100px 30px !important;
  }
}

@media (max-width: 768px) {
  .tj-banner-section .banner-area {
    padding: 80px 24px !important;
    min-height: 600px;
  }
}

/* Kill the dark card background on left-box — let image show through */
.tj-banner-section .banner-left-box {
  background-color: transparent !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Animated radial accents over the image */
.tj-banner-section .banner-area::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.30) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.tj-banner-section .banner-area::after {
  content: "";
  position: absolute;
  bottom: -25%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* Hide right box entirely — image-only hero */
.tj-banner-section .banner-right-box {
  display: none !important;
}

/* Hide the decorative background shape (no longer needed over real image) */
.tj-banner-section .banner-shape {
  display: none !important;
}

/* Left box → full width, centered */
.tj-banner-section .banner-left-box {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  position: relative;
  z-index: 3;
  padding: 0 !important;
}

.tj-banner-section .banner-content {
  max-width: 880px;
  margin: 0 !important;
  text-align: left;
  position: relative;
  z-index: 3;
}

/* "RECOGNIZED FOR EXCELLENCE" badge — glassmorphism */
.tj-banner-section .banner-content .sub-title {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: rgba(91, 158, 255, 0.18) !important;
  color: #88b4ff !important;
  padding: 10px 22px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(91, 158, 255, 0.35) !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  margin-bottom: 30px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.tj-banner-section .banner-content .sub-title i {
  color: #88b4ff !important;
}

/* Banner title — massive, dramatic, gradient accent */
.tj-banner-section .banner-content .banner-title {
  color: #ffffff !important;
  font-size: clamp(40px, 6vw, 78px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  margin-bottom: 24px !important;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.4);
  letter-spacing: -1px;
}

.tj-banner-section .banner-content .banner-title span {
  background: linear-gradient(135deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 0 30px rgba(91, 158, 255, 0.4));
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force GSAP-split lines and inner divs to remain visible (override stuck autoAlpha:0) */
.tj-banner-section .banner-content .banner-title,
.tj-banner-section .banner-content .banner-title > div,
.tj-banner-section .banner-content .banner-title .line,
.tj-banner-section .banner-content .banner-title .line-outer {
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* Tagline — under title */
.tj-banner-section .banner-content .banner-tagline {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  margin-bottom: 30px !important;
  margin-top: 4px !important;
  line-height: 1.4;
  animation: hero-fade-up 0.8s ease-out 0.2s both;
}

.tj-banner-section .banner-content .banner-tagline span {
  background: linear-gradient(90deg, #5b9eff 0%, #ec4899 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

@media (max-width: 575px) {
  .tj-banner-section .banner-content .banner-tagline {
    font-size: 17px !important;
  }
}

/* Description area — left aligned, stacked, description ABOVE button */
.tj-banner-section .banner-content .banner-desc-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 28px;
  margin-top: 0 !important;
  margin-bottom: 36px !important;
  padding: 0 !important;
  width: 100%;
  max-width: 720px;
}

.tj-banner-section .banner-content .banner-desc {
  color: rgba(255, 255, 255, 0.85) !important;
  width: 100%;
  max-width: 680px;
  font-size: 17px !important;
  line-height: 1.75 !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tj-banner-section .banner-content .banner-desc-area .banner-link {
  order: 2;
  margin: 0 !important;
}

@media (max-width: 575px) {
  .tj-banner-section .banner-content .banner-desc {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  .tj-banner-section .banner-content .banner-desc-area {
    gap: 22px;
  }
}

/* CTA button — pill style "Schedule a Call →" */
.tj-banner-section .banner-content .banner-link {
  background: linear-gradient(135deg, #4f7cff, #a855f7) !important;
  border: 0 !important;
  box-shadow: 0 14px 35px rgba(79, 124, 255, 0.50) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 30px 18px 36px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  border-radius: 60px !important;
  width: auto !important;
  height: auto !important;
  border-inline-end: 0 !important;
  text-transform: none !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
  white-space: nowrap;
}

.tj-banner-section .banner-content .banner-link:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 45px rgba(168, 85, 247, 0.60) !important;
}

.tj-banner-section .banner-content .banner-link .banner-link-text {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  overflow: visible !important;
  text-shadow: none !important;
}

.tj-banner-section .banner-content .banner-link .banner-link-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.20) !important;
  transition: transform 0.4s ease, background 0.3s ease !important;
}

.tj-banner-section .banner-content .banner-link:hover .banner-link-icon {
  transform: translateX(4px) !important;
  background: rgba(255, 255, 255, 0.30) !important;
}

.tj-banner-section .banner-content .banner-link i {
  color: #ffffff !important;
  font-size: 18px !important;
  text-shadow: none !important;
  transform: none !important;
}

.tj-banner-section .banner-content .banner-link:hover i {
  transform: none !important;
}

/* Trust row — actual JSX element */
.tj-banner-section .banner-content .banner-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
  margin-top: 50px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 720px;
  animation: hero-fade-up 0.8s ease-out 0.5s both;
}

.tj-banner-section .banner-content .banner-trust-row .trust-item {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  letter-spacing: 0.4px;
  font-weight: 500;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.tj-banner-section .banner-content .banner-trust-row .trust-item strong {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, #5b9eff 0%, #a855f7 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.tj-banner-section .banner-content .banner-trust-row .trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.20);
}

@media (max-width: 575px) {
  .tj-banner-section .banner-content .banner-trust-row {
    gap: 14px 16px;
  }
  .tj-banner-section .banner-content .banner-trust-row .trust-item {
    font-size: 12px;
  }
  .tj-banner-section .banner-content .banner-trust-row .trust-item strong {
    font-size: 18px;
  }
  .tj-banner-section .banner-content .banner-trust-row .trust-divider {
    display: none;
  }
}

/* Scroll down — repositioned over hero, white */
.tj-banner-section .banner-scroll {
  bottom: 30px !important;
  z-index: 4;
}

.tj-banner-section .banner-scroll a,
.tj-banner-section .banner-scroll .scroll-down {
  color: rgba(255, 255, 255, 0.85) !important;
}

.tj-banner-section .banner-scroll a span,
.tj-banner-section .banner-scroll .scroll-down span {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
}

.tj-banner-section .banner-scroll a span i,
.tj-banner-section .banner-scroll .scroll-down span i {
  color: #ffffff !important;
}

/* Subtle entry animation */
.tj-banner-section .banner-content .sub-title,
.tj-banner-section .banner-content .banner-title,
.tj-banner-section .banner-content .banner-desc-area {
  animation: hero-fade-up 0.8s ease-out both;
}

.tj-banner-section .banner-content .banner-title { animation-delay: 0.1s; }
.tj-banner-section .banner-content .banner-desc-area { animation-delay: 0.3s; }

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
/* === END Hero Banner Custom === */

/* === Custom: Service Section 3 — "Tailor Business Solutions" === */
.tj-service-section.service-3 {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f0f5ff 100%) !important;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  padding: 100px 60px !important;
  margin: 60px 30px;
  content-visibility: auto;
  contain-intrinsic-size: 1px 1400px;
  border: 1px solid rgba(91, 139, 255, 0.10);
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.06);
}

@media (max-width: 768px) {
  .tj-service-section.service-3 {
    padding: 70px 24px !important;
    margin: 40px 16px;
    border-radius: 16px;
  }
}

.tj-service-section.service-3::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.tj-service-section.service-3::after {
  content: "";
  position: absolute;
  bottom: -25%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.tj-service-section.service-3 > .container {
  position: relative;
  z-index: 2;
}

/* Heading area */
.tj-service-section.service-3 .sec-heading.style-3 {
  margin-bottom: 60px;
}

.tj-service-section.service-3 .sec-heading.style-3 .sub-title {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #4f7cff, #a855f7) !important;
  color: #ffffff !important;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  letter-spacing: 1.8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
  border: 0 !important;
  margin-bottom: 24px !important;
}

.tj-service-section.service-3 .sec-heading.style-3 .sub-title i {
  color: #ffffff !important;
}

.tj-service-section.service-3 .sec-heading.style-3 .sec-title {
  font-size: clamp(32px, 4.5vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, #1e293b 0%, #4f7cff 30%, #a855f7 60%, #ec4899 90%, #1e293b 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: service3-title-flow 8s linear infinite;
}

@keyframes service3-title-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.tj-service-section.service-3 .sec-heading.style-3 .sec-title strong,
.tj-service-section.service-3 .sec-heading.style-3 .sec-title span {
  background: inherit !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* === LIST/TABLE LAYOUT (AppInventiv-style) === */
.tj-service-section.service-3 .service-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-bottom: 50px;
  border-top: 1px solid rgba(91, 139, 255, 0.20);
}

/* Each service = horizontal row */
.tj-service-section.service-3 .service-item.style-3 {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr 340px;
  gap: 40px;
  align-items: center;
  padding: 40px 28px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(91, 139, 255, 0.20) !important;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease, padding 0.4s ease !important;
}

/* Row hover: subtle gradient sweep on light bg */
.tj-service-section.service-3 .service-item.style-3:hover {
  background: linear-gradient(90deg, rgba(79, 124, 255, 0.06), rgba(168, 85, 247, 0.04), rgba(236, 72, 153, 0.02)) !important;
}

/* Diagonal shine sweep on hover */
.tj-service-section.service-3 .service-item.style-3 .service-content-wrap > .service-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.04) 50%, transparent 70%);
  transform: skewX(-20deg);
  transition: left 1s ease;
  pointer-events: none;
  z-index: 1;
}

.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap > .service-title::before {
  left: 200%;
}

/* Subtle accent line on left edge that grows on hover */
.tj-service-section.service-3 .service-item.style-3 > .service-content-wrap::before {
  content: "";
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 4px !important;
  height: auto !important;
  background: linear-gradient(180deg, var(--svc-color, #4f7cff), var(--svc-color-2, #a855f7)) !important;
  border-radius: 0 !important;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.4s ease;
  z-index: 5;
}

/* Hide corner number — replace with cleaner inline number */
.tj-service-section.service-3 .service-item.style-3 > .service-content-wrap::after {
  display: none !important;
}

/* Make .service-content-wrap "transparent" so its children become direct grid cells */
.tj-service-section.service-3 .service-item.style-3 .service-content-wrap {
  display: contents;
}

/* Row hover */
.tj-service-section.service-3 .service-item.style-3:hover {
  background: linear-gradient(90deg, rgba(79, 124, 255, 0.06), rgba(168, 85, 247, 0.04), rgba(79, 124, 255, 0.02)) !important;
  transform: none !important;
  box-shadow: none !important;
}

.tj-service-section.service-3 .service-item.style-3:hover > .service-content-wrap::before {
  transform: scaleY(1);
  box-shadow: 0 0 20px var(--svc-color, #4f7cff);
}

/* Icon: rotate + scale on hover */
.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-title .service-icon {
  transform: scale(1.15) rotate(-12deg) !important;
  box-shadow: 0 12px 30px var(--svc-glow, rgba(79, 124, 255, 0.6)),
              inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  animation: svc-icon-row-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes svc-icon-row-bounce {
  0% { transform: scale(1) rotate(0deg); }
  60% { transform: scale(1.25) rotate(-15deg); }
  100% { transform: scale(1.15) rotate(-12deg); }
}

/* Title: gradient color flash on hover */
.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-title .title a {
  background: linear-gradient(90deg, var(--svc-color, #4f7cff), var(--svc-color-2, #a855f7)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 12px var(--svc-glow, rgba(79, 124, 255, 0.5)));
}

/* Subtle row entrance — fade up when scrolled into view (one-time on hover-ready) */
.tj-service-section.service-3 .service-item.style-3 {
  opacity: 1;
  animation: svc-row-fadein 0.6s ease-out both;
}

.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(1) { animation-delay: 0.05s; }
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(2) { animation-delay: 0.10s; }
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(3) { animation-delay: 0.15s; }
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(4) { animation-delay: 0.20s; }
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(5) { animation-delay: 0.25s; }
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(6) { animation-delay: 0.30s; }

@keyframes svc-row-fadein {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hover row: subtle padding expansion (feels like the row is "leaning in") */
.tj-service-section.service-3 .service-item.style-3:hover {
  padding-left: 40px !important;
}

/* Cell 1: icon + title (left) */
.tj-service-section.service-3 .service-content-wrap .service-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 !important;
  padding-left: 12px;
}

.tj-service-section.service-3 .service-content-wrap .service-title .service-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  padding: 12px !important;
  flex-shrink: 0;
  animation: none !important;
}

.tj-service-section.service-3 .service-content-wrap .service-title .service-icon::before {
  inset: -2px !important;
  border-radius: 16px !important;
  filter: blur(8px) !important;
}

.tj-service-section.service-3 .service-content-wrap .service-title .service-icon::after {
  width: 32px !important;
  height: 32px !important;
}

.tj-service-section.service-3 .service-content-wrap .service-title .title {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  transition: transform 0.4s ease !important;
}

.tj-service-section.service-3 .service-content-wrap .service-title .title a {
  color: #0f172a !important;
  background-image: none !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
}

.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-title .title a {
  background: linear-gradient(90deg, var(--svc-color, #4f7cff), var(--svc-color-2, #a855f7)) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 8px var(--svc-glow, rgba(79, 124, 255, 0.30)));
}

.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-title .title {
  transform: translateX(6px);
}

/* Cell 2: description (middle) */
.tj-service-section.service-3 .service-content-wrap .service-content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Description — force solid dark color, reset ALL inherited gradient/transparent styles */
.tj-service-section.service-3 .service-content-wrap .service-content,
.tj-service-section.service-3 .service-content-wrap .service-content .desc,
.tj-service-section.service-3 .service-content-wrap .service-content p,
.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-content,
.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-content .desc,
.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-content p {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  filter: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.tj-service-section.service-3 .service-content-wrap .service-content .desc {
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-content .desc {
  font-weight: 600 !important;
}

/* Title also bigger and bolder for better hierarchy */
.tj-service-section.service-3 .service-content-wrap .service-title .title {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  transition: transform 0.4s ease !important;
}

/* Force visibility — kill any wow/gsap transparency, BUT exclude service-reveal-bg (hover-only) */
.tj-service-section.service-3 .service-item.style-3,
.tj-service-section.service-3 .service-content-wrap,
.tj-service-section.service-3 .service-content,
.tj-service-section.service-3 .service-content .desc,
.tj-service-section.service-3 .service-title,
.tj-service-section.service-3 .service-title .title,
.tj-service-section.service-3 .service-title .title a {
  opacity: 1 !important;
  visibility: visible !important;
}

/* CRITICAL: reveal image stays hidden until row is hovered */
.tj-service-section.service-3 .service-item.style-3 .service-reveal-bg {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(60px) scale(0.85) rotate(2deg) !important;
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s linear 0.6s !important;
}

.tj-service-section.service-3 .service-item.style-3:hover .service-reveal-bg {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) scale(1) rotate(-3deg) !important;
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s linear 0s !important;
  animation: svc-image-float 4s ease-in-out infinite !important;
}

/* === Gradient text for service titles (per row accent) === */
.tj-service-section.service-3 .service-content-wrap .service-title .title a {
  background: linear-gradient(90deg, var(--svc-color, #4f7cff), var(--svc-color-2, #a855f7)) !important;
  background-size: 200% auto !important;
  background-position: 0% center !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  transition: background-position 0.5s ease, filter 0.4s ease !important;
}

.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-title .title a {
  background-position: 100% center !important;
  filter: drop-shadow(0 0 12px var(--svc-glow, rgba(79, 124, 255, 0.40))) brightness(1.1);
}

/* Cell 3: hover-reveal image (right) — bigger inline preview */
.tj-service-section.service-3 .service-item.style-3 .service-reveal-bg {
  position: relative !important;
  display: block !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 320px !important;
  height: 200px !important;
  border-radius: 16px !important;
  background-position: center center !important;
  background-size: cover !important;
  opacity: 0;
  transform: translateX(60px) scale(0.85) rotate(2deg);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  overflow: hidden !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.50),
              0 0 0 1px rgba(255, 255, 255, 0.08);
  justify-self: end;
  animation: none !important;
}

/* Colored corner overlay + shine sweep */
.tj-service-section.service-3 .service-item.style-3 .service-reveal-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, var(--svc-color, rgba(79, 124, 255, 0.55)) 100%) !important;
  border-radius: 16px;
  opacity: 0.45;
  mix-blend-mode: overlay;
  z-index: 2;
}

/* Image shine-sweep on appear */
.tj-service-section.service-3 .service-item.style-3 .service-reveal-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.30) 50%, transparent 70%);
  transform: skewX(-25deg);
  transition: left 0.9s ease;
  z-index: 3;
  pointer-events: none;
}

.tj-service-section.service-3 .service-item.style-3:hover .service-reveal-bg {
  opacity: 1;
  transform: translateX(0) scale(1) rotate(-3deg);
  animation: svc-image-float 4s ease-in-out infinite !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.60),
              0 0 0 1px var(--svc-color, rgba(79, 124, 255, 0.40)),
              0 0 30px var(--svc-glow, rgba(79, 124, 255, 0.30));
}

.tj-service-section.service-3 .service-item.style-3:hover .service-reveal-bg::after {
  left: 200%;
}

/* Glowing border ring around image */
.tj-service-section.service-3 .service-item.style-3 .service-reveal-bg {
  position: relative !important;
}

/* Floating animation — subtle bob + tilt sway (like a sticker floating) */
@keyframes svc-image-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(-1deg); }
}

/* Fade other rows when ANY row is hovered (sibling dimming effect) */
.tj-service-section.service-3 .service-wrapper:hover > .service-item.style-3 {
  opacity: 0.45;
  transition: opacity 0.4s ease;
}

.tj-service-section.service-3 .service-wrapper:hover > .service-item.style-3:hover {
  opacity: 1;
}

@media (max-width: 991px) {
  .tj-service-section.service-3 .service-item.style-3 {
    grid-template-columns: 1fr 1.5fr;
    gap: 24px;
  }
  .tj-service-section.service-3 .service-item.style-3 .service-reveal-bg {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .tj-service-section.service-3 .service-item.style-3 {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 18px !important;
  }
  .tj-service-section.service-3 .service-content-wrap .service-title {
    padding-left: 0;
  }
}

/* Reveal-bg image overlay — shows on hover, fills only TOP HALF so text bottom stays readable */
.tj-service-section.service-3 .service-item.style-3 .service-reveal-bg {
  display: block !important;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  border-radius: 20px;
  opacity: 0;
  transform: scale(1.20);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Strong dark gradient — image stays visible at top, full dark at bottom for text */
.tj-service-section.service-3 .service-item.style-3 .service-reveal-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5, 13, 28, 0.20) 0%,
    rgba(5, 13, 28, 0.30) 30%,
    rgba(5, 13, 28, 0.85) 65%,
    rgba(5, 13, 28, 0.97) 100%);
  border-radius: 20px;
}

/* High-quality Unsplash images per card (override JS-set background) */
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(1) .service-reveal-bg {
  background-image: url("https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1000&q=80") !important;
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(2) .service-reveal-bg {
  background-image: url("https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=1000&q=80") !important;
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(3) .service-reveal-bg {
  background-image: url("https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=1000&q=80") !important;
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(4) .service-reveal-bg {
  background-image: url("https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=1000&q=80") !important;
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(5) .service-reveal-bg {
  background-image: url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1000&q=80") !important;
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(6) .service-reveal-bg {
  background-image: url("https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=1000&q=80") !important;
}

/* Per-card overlay — uniform bottom-heavy gradient with accent tint at top */
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(1) .service-reveal-bg::before {
  background: linear-gradient(180deg, rgba(79, 124, 255, 0.20) 0%, rgba(5, 13, 28, 0.30) 35%, rgba(5, 13, 28, 0.90) 70%, rgba(5, 13, 28, 0.98) 100%);
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(2) .service-reveal-bg::before {
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.20) 0%, rgba(5, 13, 28, 0.30) 35%, rgba(5, 13, 28, 0.90) 70%, rgba(5, 13, 28, 0.98) 100%);
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(3) .service-reveal-bg::before {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.20) 0%, rgba(5, 13, 28, 0.30) 35%, rgba(5, 13, 28, 0.90) 70%, rgba(5, 13, 28, 0.98) 100%);
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(4) .service-reveal-bg::before {
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.20) 0%, rgba(5, 13, 28, 0.30) 35%, rgba(5, 13, 28, 0.90) 70%, rgba(5, 13, 28, 0.98) 100%);
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(5) .service-reveal-bg::before {
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.20) 0%, rgba(5, 13, 28, 0.30) 35%, rgba(5, 13, 28, 0.90) 70%, rgba(5, 13, 28, 0.98) 100%);
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(6) .service-reveal-bg::before {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.20) 0%, rgba(5, 13, 28, 0.30) 35%, rgba(5, 13, 28, 0.90) 70%, rgba(5, 13, 28, 0.98) 100%);
}

/* Title — STAYS visible and BIGGER on hover */
.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-title .title a {
  color: #ffffff !important;
  background-image: none !important;
  background-size: 0 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.8);
}

.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-title .title {
  font-size: 24px !important;
  transition: font-size 0.4s ease;
}

.tj-service-section.service-3 .service-content-wrap .service-title .title {
  transition: font-size 0.4s ease;
}

.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-content .desc {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.7);
  font-weight: 500;
}

/* Hover: corner number badge becomes brighter and bigger */
.tj-service-section.service-3 .service-item.style-3:hover > .service-content-wrap::after {
  opacity: 0.75 !important;
  transform: scale(1.20) translateY(-3px) !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

/* Hover: icon badge stays elevated above image */
.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-title .service-icon {
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.5),
              0 0 30px var(--svc-glow, rgba(79, 124, 255, 0.5)),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Stronger card hover boost */
.tj-service-section.service-3 .service-item.style-3:hover {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.50), 0 0 0 1px var(--svc-color, #4f7cff);
  transform: translateY(-10px) !important;
}

/* Hover: reveal the image with continuous slow zoom (Ken Burns effect) */
.tj-service-section.service-3 .service-item.style-3:hover .service-reveal-bg {
  opacity: 1;
  transform: scale(1);
  animation: svc-image-kenburns 8s ease-in-out infinite alternate;
}

@keyframes svc-image-kenburns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.10) translate(-2%, -2%); }
}

/* Make sure the content sits above the reveal-bg */
.tj-service-section.service-3 .service-item.style-3 .service-content-wrap {
  position: relative;
  z-index: 3;
}

/* On hover the icon badge pops out a bit more above the image */
.tj-service-section.service-3 .service-item.style-3:hover .service-icon {
  z-index: 4;
}

/* Animated gradient border on hover */
.tj-service-section.service-3 .service-item.style-3::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, var(--svc-color, #4f7cff), transparent 40%, transparent 60%, var(--svc-color-2, #a855f7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Top accent stripe */
.tj-service-section.service-3 .service-item.style-3::after {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--svc-color, #4f7cff), var(--svc-color-2, #a855f7)) !important;
  border-radius: 20px 20px 0 0 !important;
  opacity: 0.7;
  transition: opacity 0.4s ease, height 0.4s ease;
  display: block !important;
}

.tj-service-section.service-3 .service-item.style-3:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, var(--svc-soft-hover, rgba(79, 124, 255, 0.12)) 100%) !important;
  border-color: transparent !important;
  transform: translateY(-8px);
  box-shadow: 0 25px 60px var(--svc-glow, rgba(79, 124, 255, 0.30));
}

.tj-service-section.service-3 .service-item.style-3:hover::before {
  opacity: 1;
}

.tj-service-section.service-3 .service-item.style-3:hover::after {
  opacity: 1;
  height: 4px;
}

/* Service icon — circular badge */
.tj-service-section.service-3 .service-content-wrap .service-title {
  margin-bottom: 22px;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.tj-service-section.service-3 .service-content-wrap .service-title .service-icon {
  width: 78px !important;
  height: 78px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--svc-color, #4f7cff), var(--svc-color-2, #a855f7));
  border: 0 !important;
  box-shadow: 0 10px 24px var(--svc-glow, rgba(79, 124, 255, 0.45)),
              inset 0 1px 0 rgba(255, 255, 255, 0.18),
              inset 0 -2px 8px rgba(0, 0, 0, 0.15);
  padding: 16px !important;
  transition: transform 0.5s ease, box-shadow 0.4s ease;
  position: relative;
}

.tj-service-section.service-3 .service-content-wrap .service-title .service-icon::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--svc-color, #4f7cff), var(--svc-color-2, #a855f7));
  opacity: 0.30;
  filter: blur(12px);
  z-index: -1;
  transition: opacity 0.4s ease;
}

/* Re-hide img (we removed it from showing earlier); keep hidden */
.tj-service-section.service-3 .service-content-wrap .service-title .service-icon img {
  display: none !important;
}

/* Hover: badge pulses faster */
.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-title .service-icon {
  animation-duration: 1.5s !important;
}

/* Hide the bad PNG icons */
.tj-service-section.service-3 .service-content-wrap .service-title .service-icon img {
  display: none !important;
}

/* Show proper SVG icons via mask */
.tj-service-section.service-3 .service-content-wrap .service-title .service-icon::after {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  background-color: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.30));
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--svc-icon);
  mask-image: var(--svc-icon);
  animation: svc-icon-float 3.5s ease-in-out infinite;
}

@keyframes svc-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Per-card SVG icons */
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(1) {
  /* AI Development — chip/brain */
  --svc-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M21 11h-2V9h2V7h-2V6c0-1.1-.9-2-2-2h-1V2h-2v2h-2V2h-2v2H9V2H7v2H6c-1.1 0-2 .9-2 2v1H2v2h2v2H2v2h2v2H2v2h2v1c0 1.1.9 2 2 2h1v2h2v-2h2v2h2v-2h2v2h2v-2h1c1.1 0 2-.9 2-2v-1h2v-2h-2v-2h2v-2zm-4 7H7V6h10v12z'/><path d='M9 8h6v6H9z'/></svg>");
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(2) {
  /* Mobile App Development — phone */
  --svc-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/><circle cx='12' cy='17' r='1'/></svg>");
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(3) {
  /* Software Development — code brackets </> */
  --svc-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/></svg>");
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(4) {
  /* IT Consulting — headset/support */
  --svc-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M21 12.22C21 6.73 16.74 3 12 3 7.31 3 3 6.65 3 12.28 2.4 12.62 2 13.26 2 14v2c0 1.1.9 2 2 2h1v-6.1c0-3.87 3.13-7 7-7s7 3.13 7 7V19h-8v2h8c1.1 0 2-.9 2-2v-1.22c.59-.31 1-.92 1-1.64v-2.3c0-.7-.41-1.31-1-1.62z'/><circle cx='9' cy='13' r='1'/><circle cx='15' cy='13' r='1'/><path d='M18 11.03A6.04 6.04 0 0 0 12.05 6C8.74 6 5.18 8.74 5.46 13.05a8.07 8.07 0 0 0 4.85-5.66c1.58 3.18 4.84 5.36 8.62 5.36V11.03z'/></svg>");
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(5) {
  /* DevOps — infinity loop */
  --svc-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18.178 8c5.096 0 5.096 8 0 8-5.095 0-7.133-8-12.739-8-4.585 0-4.585 8 0 8 5.606 0 7.644-8 12.74-8z'/></svg>");
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(6) {
  /* Cloud Managed Services — cloud with arrow */
  --svc-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/></svg>");
}

/* === Per-icon unique animations === */
/* AI — chip pulse + slow rotate */
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(1) .service-icon::after {
  animation: svc-anim-pulse-rotate 4s ease-in-out infinite !important;
}
@keyframes svc-anim-pulse-rotate {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.08) rotate(180deg); }
}

/* Mobile — gentle wiggle */
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(2) .service-icon::after {
  animation: svc-anim-wiggle 2.5s ease-in-out infinite !important;
}
@keyframes svc-anim-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

/* Code </> — flicker + slight scale */
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(3) .service-icon::after {
  animation: svc-anim-flicker 2s ease-in-out infinite !important;
}
@keyframes svc-anim-flicker {
  0%, 100% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.1); opacity: 0.85; }
  60% { transform: scale(0.95); opacity: 1; }
}

/* Headset — bounce */
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(4) .service-icon::after {
  animation: svc-anim-bounce 2.2s ease-in-out infinite !important;
}
@keyframes svc-anim-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-6px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-3px); }
}

/* Infinity — continuous rotation */
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(5) .service-icon::after {
  animation: svc-anim-spin 5s linear infinite !important;
}
@keyframes svc-anim-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Cloud — floating up & down */
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(6) .service-icon::after {
  animation: svc-anim-float-cloud 3.5s ease-in-out infinite !important;
}
@keyframes svc-anim-float-cloud {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* === Card top accent stripe (static) === */
.tj-service-section.service-3 .service-item.style-3 {
  position: relative;
}

.tj-service-section.service-3 .service-item.style-3 > .service-content-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--svc-color, #4f7cff), var(--svc-color-2, #a855f7));
  border-radius: 20px 20px 0 0;
  pointer-events: none;
  z-index: 5;
}

/* === Corner number badge for each card === */
.tj-service-section.service-3 .service-wrapper > .service-item {
  counter-increment: svc-counter;
}
.tj-service-section.service-3 .service-wrapper {
  counter-reset: svc-counter;
}

.tj-service-section.service-3 .service-item.style-3 > .service-content-wrap::after {
  content: "0" counter(svc-counter);
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 38px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--svc-color, #4f7cff), var(--svc-color-2, #a855f7));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.20;
  line-height: 1;
  letter-spacing: -1px;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tj-service-section.service-3 .service-item.style-3:hover > .service-content-wrap::after {
  opacity: 0.55;
  transform: scale(1.15) translateY(-2px);
}

/* === Hover — boost all animations === */
.tj-service-section.service-3 .service-item.style-3:hover .service-icon::after {
  animation-duration: 1.5s !important;
}

.tj-service-section.service-3 .service-item.style-3:hover .service-icon {
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 18px 40px var(--svc-glow, rgba(79, 124, 255, 0.65)),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.tj-service-section.service-3 .service-item.style-3:hover .service-icon::before {
  opacity: 0.55;
}

/* Title */
.tj-service-section.service-3 .service-content-wrap .service-title .title {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.tj-service-section.service-3 .service-content-wrap .service-title .title a {
  color: #ffffff !important;
  background-image: linear-gradient(90deg, var(--svc-color, #4f7cff), var(--svc-color-2, #a855f7));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease, color 0.3s ease;
  padding-bottom: 4px;
}

.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-title .title a {
  background-size: 100% 2px;
  color: var(--svc-color, #4f7cff) !important;
}

/* Description */
.tj-service-section.service-3 .service-content-wrap .service-content .desc {
  color: rgba(207, 224, 255, 0.75) !important;
  line-height: 1.7;
  margin: 0;
}

.tj-service-section.service-3 .service-item.style-3:hover .service-content-wrap .service-content .desc {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Per-card accent variables */
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(1) {
  --svc-color: #4f7cff;
  --svc-color-2: #06b6d4;
  --svc-soft: rgba(79, 124, 255, 0.15);
  --svc-soft-hover: rgba(79, 124, 255, 0.20);
  --svc-border: rgba(79, 124, 255, 0.35);
  --svc-glow: rgba(79, 124, 255, 0.35);
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(2) {
  --svc-color: #ec4899;
  --svc-color-2: #f97316;
  --svc-soft: rgba(236, 72, 153, 0.15);
  --svc-soft-hover: rgba(236, 72, 153, 0.20);
  --svc-border: rgba(236, 72, 153, 0.35);
  --svc-glow: rgba(236, 72, 153, 0.35);
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(3) {
  --svc-color: #a855f7;
  --svc-color-2: #6366f1;
  --svc-soft: rgba(168, 85, 247, 0.15);
  --svc-soft-hover: rgba(168, 85, 247, 0.20);
  --svc-border: rgba(168, 85, 247, 0.35);
  --svc-glow: rgba(168, 85, 247, 0.35);
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(4) {
  --svc-color: #14b8a6;
  --svc-color-2: #4f7cff;
  --svc-soft: rgba(20, 184, 166, 0.15);
  --svc-soft-hover: rgba(20, 184, 166, 0.20);
  --svc-border: rgba(20, 184, 166, 0.35);
  --svc-glow: rgba(20, 184, 166, 0.35);
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(5) {
  --svc-color: #f97316;
  --svc-color-2: #ec4899;
  --svc-soft: rgba(249, 115, 22, 0.15);
  --svc-soft-hover: rgba(249, 115, 22, 0.20);
  --svc-border: rgba(249, 115, 22, 0.35);
  --svc-glow: rgba(249, 115, 22, 0.35);
}
.tj-service-section.service-3 .service-wrapper > .service-item:nth-child(6) {
  --svc-color: #06b6d4;
  --svc-color-2: #a855f7;
  --svc-soft: rgba(6, 182, 212, 0.15);
  --svc-soft-hover: rgba(6, 182, 212, 0.20);
  --svc-border: rgba(6, 182, 212, 0.35);
  --svc-glow: rgba(6, 182, 212, 0.35);
}

/* "More Services" button */
.tj-service-section.service-3 .service-btn-area .tj-primary-btn {
  background: linear-gradient(135deg, #4f7cff, #a855f7) !important;
  border: 0 !important;
  padding: 16px 36px !important;
  border-radius: 50px !important;
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.40) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.tj-service-section.service-3 .service-btn-area .tj-primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.55) !important;
}
/* === END Service 3 Custom === */

/* === Custom: Tech Marquee — "From MVPs to Enterprise" === */
.h7-team {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f0f5ff 100%) !important;
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

.h7-team::before {
  content: "";
  position: absolute;
  top: 5%;
  left: -5%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.10) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}

.h7-team::after {
  content: "";
  position: absolute;
  bottom: 5%;
  right: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}

.h7-team > .container-fluid {
  position: relative;
  z-index: 2;
}

/* Section heading — animated gradient text for an eye-catching tech-stack feel */
.h7-team .sec-heading.style-2 .sec-title {
  font-size: clamp(32px, 4.5vw, 56px) !important;
  font-weight: 900 !important;
  margin-bottom: 60px !important;
  letter-spacing: -0.5px;
  line-height: 1.15 !important;
  background: linear-gradient(
    90deg,
    #06b6d4 0%,
    #4f7cff 25%,
    #a855f7 50%,
    #ec4899 75%,
    #06b6d4 100%
  ) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 4px 20px rgba(79, 124, 255, 0.25));
  position: relative;
  display: inline-block;
  animation: heading-gradient-flow 6s linear infinite;
}

@keyframes heading-gradient-flow {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* Sparkle accents around the heading */
.h7-team .sec-heading.style-2 .sec-title::before,
.h7-team .sec-heading.style-2 .sec-title::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ffffff 0%, #a855f7 60%, transparent 100%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: heading-sparkle 3.4s ease-in-out infinite;
}
.h7-team .sec-heading.style-2 .sec-title::before {
  top: -6px;
  left: -22px;
  animation-delay: 0.4s;
}
.h7-team .sec-heading.style-2 .sec-title::after {
  bottom: 8px;
  right: -24px;
  width: 8px;
  height: 8px;
  animation-delay: 1.6s;
}
@keyframes heading-sparkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  40%, 60% { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .h7-team .sec-heading.style-2 .sec-title { animation: none; }
  .h7-team .sec-heading.style-2 .sec-title::before,
  .h7-team .sec-heading.style-2 .sec-title::after { animation: none; opacity: 0; }
}

/* Subtle underline accent that pulses */
.h7-team .sec-heading.style-2 {
  text-align: center;
  position: relative;
}

.h7-team .sec-heading.style-2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, #06b6d4, #4f7cff, #a855f7, #ec4899);
  background-size: 200% auto;
  border-radius: 4px;
  animation: heading-underline-flow 4s linear infinite, heading-underline-pulse 2.5s ease-in-out infinite;
}

@keyframes heading-underline-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes heading-underline-pulse {
  0%, 100% { width: 80px; opacity: 0.85; }
  50% { width: 120px; opacity: 1; }
}

/* Marquee row spacing */
.h7-team-wrapper {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* === Pure CSS Marquee (replaces Swiper) === */
.h7-team .h7-team-wrapper {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.h7-team .css-marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.h7-team .css-marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

/* Force-on marquee animations — overrides the global prefers-reduced-motion
   reset so the tech-stack rows always scroll. The motion is slow + linear and
   purely decorative, so it's safe to keep. */
.h7-team .css-marquee-ltr .css-marquee-track {
  animation: marquee-scroll-ltr 22s linear infinite !important;
  animation-duration: 22s !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
}

.h7-team .css-marquee-rtl .css-marquee-track {
  animation: marquee-scroll-rtl 28s linear infinite !important;
  animation-duration: 28s !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
}

/* Third row (second LTR) — different speed for variety */
.h7-team .css-marquee-ltr:nth-of-type(3) .css-marquee-track {
  animation-duration: 34s !important;
  animation-direction: reverse !important;
}

.h7-team .css-marquee:hover .css-marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll-ltr {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 12px)); }
}

@keyframes marquee-scroll-rtl {
  from { transform: translateX(calc(-50% - 12px)); }
  to { transform: translateX(0); }
}

.h7-team .css-marquee-item {
  flex: 0 0 auto;
  width: 170px;
  height: 100px;
  background: #ffffff;
  border: 1px solid rgba(91, 139, 255, 0.18);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06),
              0 1px 3px rgba(15, 23, 42, 0.04);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease,
              background 0.4s ease;
  animation: card-gentle-float 4s ease-in-out infinite;
}

/* Gentle floating animation, staggered per card position */
@keyframes card-gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.h7-team .css-marquee-track > .css-marquee-item:nth-child(2n) {
  animation-delay: -1s;
}
.h7-team .css-marquee-track > .css-marquee-item:nth-child(3n) {
  animation-delay: -2s;
}
.h7-team .css-marquee-track > .css-marquee-item:nth-child(5n) {
  animation-delay: -3s;
}

/* Diagonal shine sweep overlay (visible on hover) */
.h7-team .css-marquee-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(79, 124, 255, 0.20) 50%, transparent 70%);
  transform: skewX(-20deg);
  transition: left 0.8s ease;
  pointer-events: none;
}

.h7-team .css-marquee-item:hover::before {
  left: 130%;
}

/* Bottom gradient accent line */
.h7-team .css-marquee-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #4f7cff, #a855f7);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.h7-team .css-marquee-item:hover::after {
  width: 70%;
}

.h7-team .css-marquee-item img {
  max-width: 80px;
  max-height: 55px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.h7-team .css-marquee-item:hover {
  transform: translateY(-12px) !important;
  border-color: rgba(79, 124, 255, 0.50);
  background: linear-gradient(145deg, #ffffff, #f0f5ff);
  box-shadow: 0 25px 50px rgba(79, 124, 255, 0.30),
              0 10px 25px rgba(168, 85, 247, 0.18),
              0 0 0 4px rgba(79, 124, 255, 0.10);
  animation-play-state: paused;
}

.h7-team .css-marquee-item:hover img {
  animation: logo-bounce-rotate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(1.25) rotate(-8deg);
}

@keyframes logo-bounce-rotate {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.30) rotate(8deg); }
  70% { transform: scale(1.20) rotate(-12deg); }
  100% { transform: scale(1.25) rotate(-8deg); }
}

@media (max-width: 575px) {
  .h7-team .css-marquee-item {
    width: 130px;
    height: 80px;
    padding: 14px 12px;
  }
  .h7-team .css-marquee-item img {
    max-width: 60px;
    max-height: 42px;
  }
  .h7-team .css-marquee-ltr .css-marquee-track { animation-duration: 25s; }
  .h7-team .css-marquee-rtl .css-marquee-track { animation-duration: 35s; }
}

/* === Tech Stack Mastered — extra polish: pulsing orbs, ping highlight, aurora === */
.h7-team {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Decorative pulsing orbs behind the marquee rows */
.h7-team::before,
.h7-team::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
}
.h7-team::before {
  width: 540px; height: 540px;
  top: 12%; left: -8%;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.18) 0%, transparent 70%);
  animation: dawki-h7-orb-a 9s ease-in-out infinite alternate;
}
.h7-team::after {
  width: 620px; height: 620px;
  bottom: 4%; right: -10%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, transparent 70%);
  animation: dawki-h7-orb-b 11s ease-in-out infinite alternate;
}
@keyframes dawki-h7-orb-a {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
  100% { transform: translate(60px, 30px) scale(1.15); opacity: 1; }
}
@keyframes dawki-h7-orb-b {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
  100% { transform: translate(-50px, -40px) scale(1.18); opacity: 1; }
}

/* Aurora gradient strip behind the heading */
.h7-team .sec-heading.style-2 {
  position: relative;
  z-index: 2;
}
.h7-team .sec-heading.style-2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 36px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(79, 124, 255, 0.45), rgba(168, 85, 247, 0.45), transparent);
  border-radius: 999px;
  filter: blur(28px);
  z-index: -1;
  animation: dawki-h7-aurora 5s ease-in-out infinite alternate;
}
@keyframes dawki-h7-aurora {
  0%   { opacity: 0.5; transform: translate(-50%, -50%) scaleX(1); }
  100% { opacity: 1;   transform: translate(-50%, -50%) scaleX(1.4); }
}

/* Marquee container glow on rows */
.h7-team .h7-team-wrapper {
  position: relative;
  z-index: 1;
}

/* Random "ping" highlight — cards subtly glow occasionally */
.h7-team .css-marquee-track > .css-marquee-item:nth-child(7n + 1) {
  animation:
    card-gentle-float 4s ease-in-out infinite,
    dawki-h7-ping 8s ease-in-out infinite;
}
.h7-team .css-marquee-track > .css-marquee-item:nth-child(7n + 4) {
  animation:
    card-gentle-float 4s ease-in-out infinite,
    dawki-h7-ping 8s ease-in-out -4s infinite;
}
@keyframes dawki-h7-ping {
  0%, 92%, 100% {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    border-color: rgba(91, 139, 255, 0.18);
  }
  95% {
    box-shadow:
      0 8px 22px rgba(79, 124, 255, 0.35),
      0 0 0 2px rgba(79, 124, 255, 0.30),
      0 0 26px rgba(168, 85, 247, 0.30);
    border-color: rgba(168, 85, 247, 0.55);
  }
}

/* Gradient ring around image on hover (in addition to existing transforms) */
.h7-team .css-marquee-item {
  position: relative;
}

/* Floating tech tag chips that drift around (purely decorative, behind marquee) */
.h7-team-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.h7-team-float {
  position: absolute;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(79, 124, 255, 0.10);
  border: 1px solid rgba(79, 124, 255, 0.22);
  color: rgba(79, 124, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: dawki-h7-float-drift 12s ease-in-out infinite;
  opacity: 0.55;
}
.h7-team-float--a { top: 15%; left: 6%;  animation-delay: 0s; }
.h7-team-float--b { top: 8%;  right: 9%; background: rgba(168, 85, 247, 0.10); border-color: rgba(168, 85, 247, 0.25); color: rgba(168, 85, 247, 0.85); animation-delay: 2.4s; }
.h7-team-float--c { bottom: 18%; left: 14%; background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.25); color: rgba(34, 197, 94, 0.85); animation-delay: 4.8s; }
.h7-team-float--d { bottom: 12%; right: 8%; background: rgba(236, 72, 153, 0.10); border-color: rgba(236, 72, 153, 0.25); color: rgba(236, 72, 153, 0.85); animation-delay: 7.2s; }
@keyframes dawki-h7-float-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.55; }
  50%      { transform: translate(20px, -14px); opacity: 0.85; }
}
@media (max-width: 991px) { .h7-team-floats { display: none; } }

/* === END Tech Stack extras === */

/* Old swiper-based legacy (kept harmless in case any other page uses it) */
.h7-team .h7-team-marquee .swiper-slide {
  width: 170px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* === Testimonial Marquee — continuous right-to-left scroll === */
.testimonial-wrapper .testimonial-marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  padding: 20px 0;
}

.testimonial-wrapper .testimonial-marquee-track {
  display: flex;
  gap: 30px;
  width: max-content;
  will-change: transform;
  animation: testimonial-marquee-scroll 60s linear infinite;
}

.testimonial-wrapper .testimonial-marquee:hover .testimonial-marquee-track {
  animation-play-state: paused;
}

@keyframes testimonial-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 15px)); }
}

.testimonial-wrapper .testimonial-marquee-item {
  flex: 0 0 auto;
  width: 460px;
}

@media (max-width: 991px) {
  .testimonial-wrapper .testimonial-marquee-item {
    width: 380px;
  }
  .testimonial-wrapper .testimonial-marquee-track {
    animation-duration: 50s;
  }
}

@media (max-width: 575px) {
  .testimonial-wrapper .testimonial-marquee-item {
    width: 320px;
  }
  .testimonial-wrapper .testimonial-marquee-track {
    animation-duration: 40s;
    gap: 20px;
  }
}

.testimonial-wrapper .testimonial-marquee-item .testimonial-item {
  height: 100%;
  background: #ffffff !important;
  border: 1px solid rgba(91, 139, 255, 0.18) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06),
              0 2px 6px rgba(15, 23, 42, 0.04);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease !important;
}

/* Top gradient accent strip */
.testimonial-wrapper .testimonial-marquee-item .testimonial-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  border-radius: 20px 20px 0 0;
}

/* Big decorative quote mark in background */
.testimonial-wrapper .testimonial-marquee-item .testimonial-item::after {
  content: "\201C";
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 110px;
  font-family: Georgia, serif;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Card hover */
.testimonial-wrapper .testimonial-marquee-item .testimonial-item:hover {
  transform: translateY(-8px);
  border-color: rgba(79, 124, 255, 0.45) !important;
  box-shadow: 0 25px 50px rgba(79, 124, 255, 0.18),
              0 8px 20px rgba(168, 85, 247, 0.10);
}

.testimonial-wrapper .testimonial-marquee-item .testimonial-item:hover::after {
  opacity: 0.30;
  transform: scale(1.1) rotate(-5deg);
}

/* Author wrapper */
.testimonial-wrapper .testimonial-marquee-item .h5-testimonial-author-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(91, 139, 255, 0.25);
  position: relative;
  z-index: 2;
}

/* Author info */
.testimonial-wrapper .testimonial-marquee-item .testimonial-author .author-inner {
  display: flex !important;
  align-items: center;
  gap: 14px;
}

.testimonial-wrapper .testimonial-marquee-item .author-img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0;
  position: relative;
  padding: 3px;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  transition: transform 0.4s ease;
}

.testimonial-wrapper .testimonial-marquee-item .author-img img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #ffffff;
}

.testimonial-wrapper .testimonial-marquee-item .testimonial-item:hover .author-img {
  transform: scale(1.08) rotate(-4deg);
}

.testimonial-wrapper .testimonial-marquee-item .author-header .title {
  color: #0f172a !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  line-height: 1.3;
}

.testimonial-wrapper .testimonial-marquee-item .author-header .designation {
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.4;
  display: block;
}

/* Star ratings */
.testimonial-wrapper .testimonial-marquee-item .star-ratings {
  position: relative;
  display: inline-block;
  font-size: 16px;
  letter-spacing: 2px;
  flex-shrink: 0;
}

.testimonial-wrapper .testimonial-marquee-item .star-ratings .empty-ratings {
  color: rgba(15, 23, 42, 0.15);
}

.testimonial-wrapper .testimonial-marquee-item .star-ratings .fill-ratings {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.30));
}

.testimonial-wrapper .testimonial-marquee-item .testimonial-item:hover .star-ratings .fill-ratings {
  animation: testimonial-stars-twinkle 1.2s ease-in-out;
}

@keyframes testimonial-stars-twinkle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); filter: drop-shadow(0 4px 12px rgba(245, 158, 11, 0.55)); }
}

/* Description text */
.testimonial-wrapper .testimonial-marquee-item .testimonial-item .desc {
  position: relative;
  z-index: 2;
}

.testimonial-wrapper .testimonial-marquee-item .testimonial-item .desc p {
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  font-style: italic;
}

/* Section heading "Success Stories Fuel our Innovation." — gradient flow */
.testimonial-wrapper ~ * .sec-title,
section:has(.testimonial-wrapper) .sec-title {
  /* keep specificity low — handled below by section-level */
}

/* Target the testimonial section heading */
.h7-testimonial,
.tj-testimonial-section,
section.tj-testimonial-section {
  position: relative;
}
/* === END Testimonial Card Polish === */

/* === Custom: Contact Section visual refresh === */
.tj-contact-section.h4-contact-section {
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #050d1c 100%) !important;
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

.tj-contact-section.h4-contact-section::before {
  content: "";
  position: absolute;
  top: 5%;
  left: -8%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.tj-contact-section.h4-contact-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -8%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.tj-contact-section.h4-contact-section > .container {
  position: relative;
  z-index: 2;
}

/* "GET IN TOUCH" pill — gradient */
.tj-contact-section.h4-contact-section .sec-heading.style-4 .sub-title {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #4f7cff, #a855f7) !important;
  color: #ffffff !important;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  letter-spacing: 1.8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
  border: 0 !important;
  margin-bottom: 20px !important;
}

.tj-contact-section.h4-contact-section .sec-heading.style-4 .sub-title i {
  color: #ffffff !important;
}

/* Heading — gradient text */
.tj-contact-section.h4-contact-section .sec-heading.style-4 .sec-title {
  color: #ffffff !important;
  font-size: clamp(32px, 4.5vw, 50px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, #ffffff 0%, #cfe0ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 36px !important;
}

/* Form labels */
.tj-contact-section.h4-contact-section .contact-form .form-input .cf-label {
  color: rgba(207, 224, 255, 0.85) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  margin-bottom: 8px !important;
  text-transform: uppercase;
}

/* Form inputs — modern styling */
.tj-contact-section.h4-contact-section .contact-form .form-input input[type=text],
.tj-contact-section.h4-contact-section .contact-form .form-input input[type=email],
.tj-contact-section.h4-contact-section .contact-form .form-input input[type=tel],
.tj-contact-section.h4-contact-section .contact-form .form-input textarea,
.tj-contact-section.h4-contact-section .contact-form .form-input .nice-select,
.tj-contact-section.h4-contact-section .contact-form .form-input select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(91, 139, 255, 0.20) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  padding: 16px 18px !important;
  font-size: 15px !important;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
  width: 100% !important;
}

.tj-contact-section.h4-contact-section .contact-form .form-input input:focus,
.tj-contact-section.h4-contact-section .contact-form .form-input textarea:focus,
.tj-contact-section.h4-contact-section .contact-form .form-input select:focus,
.tj-contact-section.h4-contact-section .contact-form .form-input .nice-select.open {
  background: rgba(79, 124, 255, 0.08) !important;
  border-color: rgba(91, 139, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15), 0 8px 20px rgba(79, 124, 255, 0.15) !important;
  outline: none !important;
}

.tj-contact-section.h4-contact-section .contact-form .form-input textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

/* Nice select dropdown */
.tj-contact-section.h4-contact-section .contact-form .nice-select::after {
  border-color: #88b4ff !important;
}
.tj-contact-section.h4-contact-section .contact-form .nice-select .list {
  background: #0f1f3a !important;
  border: 1px solid rgba(91, 139, 255, 0.30) !important;
}
.tj-contact-section.h4-contact-section .contact-form .nice-select .list li {
  color: rgba(207, 224, 255, 0.85) !important;
}
.tj-contact-section.h4-contact-section .contact-form .nice-select .list li:hover,
.tj-contact-section.h4-contact-section .contact-form .nice-select .list li.selected {
  background: rgba(79, 124, 255, 0.20) !important;
  color: #ffffff !important;
}

/* Submit button — gradient pill */
.tj-contact-section.h4-contact-section .contact-form .submit-btn {
  margin-top: 24px;
}

.tj-contact-section.h4-contact-section .contact-form .submit-btn .tj-primary-btn {
  background: linear-gradient(135deg, #4f7cff, #a855f7) !important;
  border: 0 !important;
  padding: 16px 36px !important;
  border-radius: 50px !important;
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.40) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.tj-contact-section.h4-contact-section .contact-form .submit-btn .tj-primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.55) !important;
}

/* === Both columns — center-align right card vertically (smaller, content-sized) === */
.tj-contact-section.h4-contact-section .container > .row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
}

.tj-contact-section.h4-contact-section .container > .row > [class*="col-"] {
  display: flex !important;
  flex-direction: column !important;
}

/* Right card — sized to its content, vertically centered in the row */
.tj-contact-section.h4-contact-section .testimonial-wrapper-3 {
  background: linear-gradient(145deg, rgba(79, 124, 255, 0.08) 0%, rgba(168, 85, 247, 0.05) 100%) !important;
  border: 1px solid rgba(91, 139, 255, 0.22) !important;
  border-radius: 24px !important;
  padding: 40px 36px !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 28px;
}

.tj-contact-section.h4-contact-section .testimonial-wrapper-3 .about-content-area,
.tj-contact-section.h4-contact-section .testimonial-wrapper-3 .h6-about-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px;
  width: 100% !important;
  height: auto !important;
}

.tj-contact-section.h4-contact-section .testimonial-wrapper-3 .sec-heading.style-2 {
  margin-bottom: 0 !important;
}

.tj-contact-section.h4-contact-section .testimonial-wrapper-3 .sec-heading.style-2 .sec-title {
  margin-bottom: 0 !important;
}

.tj-contact-section.h4-contact-section .testimonial-wrapper-3 .h6-about-funfact-wrapper {
  margin-top: 0 !important;
}

.tj-contact-section.h4-contact-section .testimonial-wrapper-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #4f7cff, #a855f7, transparent);
}

.tj-contact-section.h4-contact-section .h6-about-content .sec-heading.style-2 .sec-title {
  color: #ffffff !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 22px !important;
}

.tj-contact-section.h4-contact-section .h6-about-content .desc {
  color: rgba(207, 224, 255, 0.78) !important;
  line-height: 1.75 !important;
  font-size: 15px !important;
  margin-bottom: 36px !important;
}

/* Stats wrapper */
.tj-contact-section.h4-contact-section .h6-about-funfact-wrapper {
  background: linear-gradient(145deg, rgba(79, 124, 255, 0.12), rgba(168, 85, 247, 0.06));
  border: 1px solid rgba(91, 139, 255, 0.25);
  border-radius: 18px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}

.tj-contact-section.h4-contact-section .h6-about-funfact-shape {
  display: none !important;
}

.tj-contact-section.h4-contact-section .h6-about-funfact {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}

.tj-contact-section.h4-contact-section .h6-about-funfact .countup-item {
  flex: 1 1 0;
  padding: 0 24px;
  position: relative;
  text-align: left;
}

.tj-contact-section.h4-contact-section .h6-about-funfact .countup-item:first-child {
  padding-left: 0;
}

.tj-contact-section.h4-contact-section .h6-about-funfact .countup-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 70%;
  background: linear-gradient(180deg, transparent, rgba(91, 139, 255, 0.50), transparent);
}

/* Big numbers */
.tj-contact-section.h4-contact-section .h6-about-funfact .inline-content {
  display: inline-flex !important;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 12px;
}

.tj-contact-section.h4-contact-section .h6-about-funfact .countup-number,
.tj-contact-section.h4-contact-section .h6-about-funfact .count-plus {
  font-size: 56px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, #5b9eff 0%, #a855f7 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 12px rgba(79, 124, 255, 0.30));
}

.tj-contact-section.h4-contact-section .h6-about-funfact .count-text {
  color: rgba(207, 224, 255, 0.78) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500;
  display: block;
}

@media (max-width: 575px) {
  .tj-contact-section.h4-contact-section .testimonial-wrapper-3 {
    padding: 36px 24px;
  }
  .tj-contact-section.h4-contact-section .h6-about-funfact-wrapper {
    padding: 24px 18px;
  }
  .tj-contact-section.h4-contact-section .h6-about-funfact .countup-item {
    flex: 1 1 100%;
    padding: 16px 0;
  }
  .tj-contact-section.h4-contact-section .h6-about-funfact .countup-item:not(:last-child)::after {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 70%;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, rgba(91, 139, 255, 0.50), transparent);
    transform: none;
  }
  .tj-contact-section.h4-contact-section .h6-about-funfact .countup-number,
  .tj-contact-section.h4-contact-section .h6-about-funfact .count-plus {
    font-size: 44px !important;
  }
}
/* === END Contact Custom === */

/* === Custom: Footer visual refresh — AppInventiv-style clean columns === */
.tj-footer-section.footer-1 {
  background: linear-gradient(180deg, #0a1628 0%, #050d1c 50%, #050d1c 100%) !important;
  position: relative;
  overflow: hidden;
}

.tj-footer-section.footer-1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 124, 255, 0.40), rgba(168, 85, 247, 0.40), transparent);
  z-index: 5;
}

/* Footer main area: equal-width clean columns */
.tj-footer-section.footer-1 .footer-main-area {
  padding-top: 80px;
  padding-bottom: 60px;
}

.tj-footer-section.footer-1 .footer-main-area .row {
  align-items: flex-start;
  gap: 0;
}

.tj-footer-section.footer-1 .footer-widget {
  margin-bottom: 30px;
}

.tj-footer-section.footer-1 > .footer-main-area,
.tj-footer-section.footer-1 > .footer-bottom-area,
.tj-footer-section.footer-1 > .tj-copyright-area-2 {
  position: relative;
  z-index: 2;
}

/* Footer logo */
.tj-footer-section.footer-1 .footer-logo {
  margin-bottom: 24px;
}

.tj-footer-section.footer-1 .footer-logo img {
  max-width: 180px;
  height: auto;
}

/* Footer description text */
.tj-footer-section.footer-1 .footer-text p {
  color: rgba(207, 224, 255, 0.72) !important;
  line-height: 1.75 !important;
  font-size: 15px !important;
  margin-bottom: 28px;
  max-width: 320px;
}

/* Social icons — circular pill style */
.tj-footer-section.footer-1 .social-links.style-3 ul {
  display: flex !important;
  gap: 10px !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tj-footer-section.footer-1 .footer-widget .social-links.style-3 ul li a {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: rgba(79, 124, 255, 0.10) !important;
  border: 1px solid rgba(91, 139, 255, 0.30) !important;
  color: #88b4ff !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
}

.tj-footer-section.footer-1 .footer-widget .social-links.style-3 ul li a:hover {
  background: linear-gradient(135deg, #4f7cff, #a855f7) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.40);
}

.tj-footer-section.footer-1 .footer-widget .social-links.style-3 ul li a i {
  color: inherit !important;
}

/* Column titles */
.tj-footer-section.footer-1 .footer-widget .title {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  margin-bottom: 26px !important;
  position: relative;
  padding-bottom: 14px;
  display: inline-block;
}

.tj-footer-section.footer-1 .footer-widget .title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, #4f7cff, #a855f7);
  border-radius: 2px;
}

/* Footer column nav links */
.tj-footer-section.footer-1 .footer-widget.widget-nav-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tj-footer-section.footer-1 .footer-widget.widget-nav-menu ul li {
  margin-bottom: 12px !important;
}

.tj-footer-section.footer-1 .footer-widget.widget-nav-menu ul li a {
  color: rgba(207, 224, 255, 0.70) !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  transition: color 0.3s ease, padding-left 0.3s ease !important;
  position: relative;
  padding-left: 0;
  display: inline-block;
}

.tj-footer-section.footer-1 .footer-widget.widget-nav-menu ul li a::before {
  content: "→";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  color: #88b4ff;
  opacity: 0;
  transition: opacity 0.3s ease, left 0.3s ease;
  font-size: 12px;
}

.tj-footer-section.footer-1 .footer-widget.widget-nav-menu ul li a:hover {
  color: #ffffff !important;
  padding-left: 18px;
}

.tj-footer-section.footer-1 .footer-widget.widget-nav-menu ul li a:hover::before {
  opacity: 1;
  left: 0;
}

/* Office contact info */
.tj-footer-section.footer-1 .footer-contact-info .contact-item {
  margin-bottom: 16px;
  color: rgba(207, 224, 255, 0.70);
  font-size: 14.5px;
  line-height: 1.7;
}

.tj-footer-section.footer-1 .footer-contact-info .contact-item span,
.tj-footer-section.footer-1 .footer-contact-info .contact-item a {
  color: rgba(207, 224, 255, 0.70) !important;
  display: block;
  transition: color 0.3s ease;
  line-height: 1.7;
}

.tj-footer-section.footer-1 .footer-contact-info .contact-item a:hover {
  color: #88b4ff !important;
}

.tj-footer-section.footer-1 .footer-contact-info .contact-item i {
  color: #88b4ff;
  margin-right: 8px;
}

/* Newsletter subscribe area — no top border, flows seamlessly */
.tj-footer-section.footer-1 .footer-bottom-area {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 0 !important;
}

.tj-footer-section.footer-1 .widget-subscribe-2 {
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.12), rgba(168, 85, 247, 0.08));
  border: 1px solid rgba(91, 139, 255, 0.25);
  border-radius: 20px;
  padding: 36px 40px;
  position: relative;
  overflow: hidden;
}

.tj-footer-section.footer-1 .widget-subscribe-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4f7cff, #a855f7, transparent);
}

.tj-footer-section.footer-1 .widget-subscribe-2 .title {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0;
  display: block;
}

.tj-footer-section.footer-1 .widget-subscribe-2 .title::after {
  display: none;
}

.tj-footer-section.footer-1 .widget-subscribe-2 .subscribe-form form {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  position: relative;
}

.tj-footer-section.footer-1 .widget-subscribe-2 .subscribe-form input[type=email] {
  flex: 1 1 280px;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(91, 139, 255, 0.25) !important;
  border-radius: 50px !important;
  color: #ffffff !important;
  padding: 14px 60px 14px 24px !important;
  font-size: 15px !important;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
  outline: none;
}

.tj-footer-section.footer-1 .widget-subscribe-2 .subscribe-form input[type=email]:focus {
  border-color: rgba(91, 139, 255, 0.55) !important;
  background: rgba(79, 124, 255, 0.10) !important;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15);
}

.tj-footer-section.footer-1 .widget-subscribe-2 .subscribe-form input::placeholder {
  color: rgba(207, 224, 255, 0.50) !important;
}

.tj-footer-section.footer-1 .widget-subscribe-2 .subscribe-form button[type=submit] {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 44px !important;
  height: 44px !important;
  background: linear-gradient(135deg, #4f7cff, #a855f7) !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer;
}

.tj-footer-section.footer-1 .widget-subscribe-2 .subscribe-form button[type=submit]:hover {
  transform: scale(1.08) rotate(-8deg);
  box-shadow: 0 12px 28px rgba(168, 85, 247, 0.50);
}

.tj-footer-section.footer-1 .widget-subscribe-2 .subscribe-form button[type=submit] i {
  color: #ffffff !important;
  font-size: 16px;
}

.tj-footer-section.footer-1 .widget-subscribe-2 .subscribe-form label {
  flex: 1 1 100%;
  color: rgba(207, 224, 255, 0.65) !important;
  font-size: 13px !important;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tj-footer-section.footer-1 .widget-subscribe-2 .subscribe-form label a {
  color: #88b4ff !important;
  text-decoration: underline;
}

.tj-footer-section.footer-1 .widget-subscribe-2 .subscribe-form label a:hover {
  color: #b4cdff !important;
}

/* Award logos area */
.tj-footer-section.footer-1 .award-logo-area {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.tj-footer-section.footer-1 .award-logo img {
  height: 90px;
  width: auto;
  filter: brightness(1) opacity(0.85);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.tj-footer-section.footer-1 .award-logo:hover img {
  filter: brightness(1.1) opacity(1);
  transform: scale(1.05);
}

/* Copyright bar — no top border, no bg band, flows with footer */
.tj-footer-section.footer-1 .tj-copyright-area-2 {
  margin-top: 30px;
  padding: 20px 0 24px;
  border-top: 0 !important;
  background: transparent !important;
}

.tj-footer-section.footer-1 .copyright-content-area {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  padding: 0;
}

.tj-footer-section.footer-1 .copyright-text {
  justify-self: start;
}

.tj-footer-section.footer-1 .copyright-text p {
  color: rgba(207, 224, 255, 0.65) !important;
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1.5;
}

.tj-footer-section.footer-1 .copyright-text a {
  color: #88b4ff !important;
  font-weight: 600 !important;
  transition: color 0.3s ease;
}

.tj-footer-section.footer-1 .copyright-text a:hover {
  color: #b4cdff !important;
}

.tj-footer-section.footer-1 .copyright-content-area .social-links.style-3 {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tj-footer-section.footer-1 .copyright-content-area .social-links.style-3 img {
  height: 44px;
  width: auto;
  max-width: 100%;
  filter: brightness(1) opacity(0.90);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.tj-footer-section.footer-1 .copyright-content-area .social-links.style-3 img:hover {
  filter: brightness(1.1) opacity(1);
  transform: scale(1.03);
}

.tj-footer-section.footer-1 .copyright-menu {
  justify-self: end;
}

@media (max-width: 991px) {
  .tj-footer-section.footer-1 .copyright-content-area {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 18px;
  }
  .tj-footer-section.footer-1 .copyright-text,
  .tj-footer-section.footer-1 .copyright-content-area .social-links.style-3,
  .tj-footer-section.footer-1 .copyright-menu {
    justify-self: center;
  }
}

.tj-footer-section.footer-1 .copyright-menu ul {
  display: flex !important;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tj-footer-section.footer-1 .copyright-menu ul li {
  position: relative;
}

.tj-footer-section.footer-1 .copyright-menu ul li:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(91, 139, 255, 0.40);
}

.tj-footer-section.footer-1 .copyright-menu ul li a {
  color: rgba(207, 224, 255, 0.70) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color 0.3s ease;
}

.tj-footer-section.footer-1 .copyright-menu ul li a:hover {
  color: #ffffff !important;
}

/* BG shapes — soft glow accents only, no animation */
.tj-footer-section.footer-1 .bg-shape-1,
.tj-footer-section.footer-1 .bg-shape-2 {
  position: absolute;
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

@media (max-width: 991px) {
  .tj-footer-section.footer-1 .widget-subscribe-2 {
    padding: 28px 24px;
  }
  .tj-footer-section.footer-1 .widget-subscribe-2 .subscribe-form form {
    flex-direction: column;
    align-items: stretch;
  }
  .tj-footer-section.footer-1 .award-logo-area {
    margin-bottom: 24px;
  }
}

@media (max-width: 575px) {
  .tj-footer-section.footer-1 .copyright-content-area {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .tj-footer-section.footer-1 .copyright-menu ul {
    gap: 18px;
  }
}
/* === END Footer Custom === */

/* === Custom: Modern CTA Section === */
.dawki-cta-modern {
  /* Trimmed top + bottom padding so the gap between the CTA card and the
   * footer offices grid is tight, not a void of empty page background.
   * Was: 100px 0 80px. */
  padding: 60px 0 24px;
  background: transparent;
  position: relative;
}

.dawki-cta-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(10, 22, 40, 0.92) 0%, rgba(26, 26, 58, 0.88) 50%, rgba(42, 24, 69, 0.92) 100%),
    url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  border-radius: 28px;
  padding: 80px 60px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(79, 124, 255, 0.25),
              0 0 0 1px rgba(91, 139, 255, 0.20);
  text-align: center;
  animation: cta-bg-zoom 20s ease-in-out infinite alternate;
}

@keyframes cta-bg-zoom {
  0% { background-size: cover, 110%; background-position: center, center; }
  100% { background-size: cover, 125%; background-position: center, 60% 40%; }
}

@media (max-width: 768px) {
  .dawki-cta-card {
    padding: 60px 28px;
    border-radius: 20px;
  }
}

/* Decorative grid pattern overlay + animated stars */
.dawki-cta-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 28% 65%, rgba(255, 255, 255, 0.70), transparent),
    radial-gradient(2px 2px at 45% 35%, rgba(91, 139, 255, 0.80), transparent),
    radial-gradient(1px 1px at 62% 80%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(2px 2px at 78% 22%, rgba(168, 85, 247, 0.80), transparent),
    radial-gradient(1px 1px at 88% 58%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(2px 2px at 18% 88%, rgba(236, 72, 153, 0.70), transparent),
    radial-gradient(1px 1px at 70% 12%, rgba(255, 255, 255, 0.60), transparent),
    linear-gradient(rgba(91, 139, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 139, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 60px 60px, 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
  pointer-events: none;
  animation: cta-stars-twinkle 4s ease-in-out infinite;
}

@keyframes cta-stars-twinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Floating particles layer */
.dawki-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(91, 139, 255, 0.15) 0%, transparent 4%),
    radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.15) 0%, transparent 4%),
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.12) 0%, transparent 5%),
    radial-gradient(circle at 30% 80%, rgba(91, 139, 255, 0.10) 0%, transparent 4%),
    radial-gradient(circle at 70% 20%, rgba(168, 85, 247, 0.10) 0%, transparent 4%);
  animation: cta-particles-drift 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cta-particles-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -15px); }
}

/* Floating orbs */
.dawki-cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}

.dawki-cta-orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.45) 0%, transparent 70%);
  top: -150px;
  left: -100px;
  animation: cta-orb-float-a 14s ease-in-out infinite;
}

.dawki-cta-orb-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, transparent 70%);
  bottom: -120px;
  right: -80px;
  animation: cta-orb-float-b 16s ease-in-out infinite;
}

.dawki-cta-orb-3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.30) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: cta-orb-pulse 8s ease-in-out infinite;
}

@keyframes cta-orb-float-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(40px, -30px); }
}

@keyframes cta-orb-float-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-40px, 30px); }
}

@keyframes cta-orb-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }
}

/* Content */
.dawki-cta-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

/* Badge */
.dawki-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(79, 124, 255, 0.15);
  border: 1px solid rgba(91, 139, 255, 0.35);
  color: #88b4ff;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.dawki-cta-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #88b4ff;
  box-shadow: 0 0 10px #88b4ff;
  animation: cta-badge-blink 1.5s ease-in-out infinite;
}

@keyframes cta-badge-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

/* Title */
.dawki-cta-title {
  color: #ffffff !important;
  font-size: clamp(34px, 5vw, 60px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -1px;
  margin-bottom: 22px !important;
}

.dawki-cta-title span {
  background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: cta-title-gradient-flow 5s linear infinite;
}

@keyframes cta-title-gradient-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Description */
.dawki-cta-desc {
  color: rgba(207, 224, 255, 0.85) !important;
  font-size: 17px !important;
  line-height: 1.7;
  margin: 0 auto 36px !important;
  max-width: 620px;
}

/* Action buttons */
.dawki-cta-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.dawki-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  white-space: nowrap;
}

.dawki-cta-btn-primary {
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.45);
  position: relative;
  overflow: hidden;
}

/* Continuous shine sweep on primary button */
.dawki-cta-btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.30) 50%, transparent 70%);
  transform: skewX(-25deg);
  animation: cta-btn-shine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cta-btn-shine {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* Pulsing glow ring around primary button */
.dawki-cta-btn-primary::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50px;
  background: linear-gradient(135deg, #4f7cff, #a855f7, #ec4899);
  z-index: -1;
  opacity: 0;
  filter: blur(12px);
  animation: cta-btn-pulse 2.5s ease-in-out infinite;
}

@keyframes cta-btn-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

.dawki-cta-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.60);
  color: #ffffff !important;
}

.dawki-cta-btn-primary i {
  color: #ffffff !important;
  transition: transform 0.3s ease;
  font-size: 14px;
}

.dawki-cta-btn-primary:hover i {
  transform: translateX(4px);
}

.dawki-cta-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.20);
}

.dawki-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.40);
  transform: translateY(-3px);
  color: #ffffff !important;
}

/* Trust meta row */
.dawki-cta-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  color: rgba(207, 224, 255, 0.75);
  font-size: 14px;
  font-weight: 500;
}

.dawki-cta-meta strong {
  margin-right: 4px;
  font-weight: 600;
}

.dawki-cta-meta-divider {
  width: 1px;
  height: 16px;
  background: rgba(91, 139, 255, 0.35);
}

@media (max-width: 575px) {
  .dawki-cta-meta {
    gap: 12px;
    font-size: 12px;
  }
  .dawki-cta-meta-divider {
    display: none;
  }
  .dawki-cta-actions {
    flex-direction: column;
    width: 100%;
  }
  .dawki-cta-btn {
    width: 100%;
    justify-content: center;
  }
}
/* === END Modern CTA === */

/* === Global UX Polish === */

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Branded text selection */
::selection {
  background: rgba(168, 85, 247, 0.30);
  color: #ffffff;
}
::-moz-selection {
  background: rgba(168, 85, 247, 0.30);
  color: #ffffff;
}

/* Custom scrollbar — slim, gradient */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #050d1c;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4f7cff, #a855f7);
  border-radius: 10px;
  border: 2px solid #050d1c;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #88b4ff, #c084fc);
}

/* Scroll progress bar at top of page */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #4f7cff, #a855f7, #ec4899);
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-progress, 0));
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 1px 8px rgba(168, 85, 247, 0.50);
  transition: transform 0.1s ease-out;
}

/* Back to top floating button */
.dawki-back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  border: 0;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(79, 124, 255, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease;
  z-index: 998;
  font-size: 18px;
}

.dawki-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.dawki-back-to-top:hover {
  transform: translateY(-4px) scale(1.10);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.60);
}

.dawki-back-to-top::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f7cff, #a855f7);
  filter: blur(12px);
  opacity: 0.4;
  z-index: -1;
  animation: back-to-top-pulse 2.5s ease-in-out infinite;
}

@keyframes back-to-top-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.10); }
}

@media (max-width: 575px) {
  .dawki-back-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}

/* Section reveal animation — fade up when entering viewport */
.dawki-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dawki-reveal.dawki-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Focus-visible accessibility ring (keyboard nav) */
*:focus-visible {
  outline: 2px solid #88b4ff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reduced motion — respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* === END Global UX Polish === */

/* === Global Fix: GSAP SplitText leaves lines stuck invisible === */
/* Force all .text-anim / .title-anim elements + their split children to stay visible */
.text-anim,
.text-anim > div,
.text-anim .line,
.text-anim .line-outer,
.text-anim .word,
.text-anim .char,
.text-anim span,
.title-anim,
.title-anim > div,
.title-anim .line,
.title-anim .line-outer,
.title-anim .word,
.title-anim .char,
.title-anim span {
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}
/* === END SplitText Fix === */

/* === Blog Section text color fix === */
.tj-blog-section-2 {
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #050d1c 100%) !important;
}

.tj-blog-section-2 .sec-heading .sec-title {
  color: #ffffff !important;
  font-size: clamp(32px, 4.5vw, 54px) !important;
  font-weight: 800 !important;
}

.tj-blog-section-2 .sec-heading .sec-title span {
  background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === IntersectionObserver-driven reveal for fade-right items
       (replaces the GSAP ScrollTrigger that drove .tj-fadein-right-on-scroll).
       transform + opacity only — composited on the GPU, no reflow. === */
.tj-fadein-right-on-scroll.dawki-prep {
  opacity: 0;
  transform: translate3d(60px, 0, 0);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}
.tj-fadein-right-on-scroll.dawki-prep.dawki-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .tj-fadein-right-on-scroll.dawki-prep {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === Choose Section — animated, attractive rebuild =======================
   Decorative pulsing orbs + flowing-gradient heading + subtle grid overlay,
   plus rich card hover (shine sweep, icon rotate-scale, gradient ring). The
   continuous keyframes are explicitly re-enabled in the welcome page's
   injected perf-overrides stylesheet so they don't get clamped to 0.001ms.
   ======================================================================== */
.dawki-choose {
  padding: clamp(60px, 8vw, 110px) 0;
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #050d1c 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Pulsing background orbs */
.dawki-choose-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.55;
  z-index: 0;
}
.dawki-choose-orb--a {
  width: 480px;
  height: 480px;
  top: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(91, 158, 255, 0.55) 0%, transparent 70%);
  animation: dawki-choose-orb-pulse 9s ease-in-out infinite;
}
.dawki-choose-orb--b {
  width: 520px;
  height: 520px;
  bottom: -200px;
  right: -160px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.50) 0%, transparent 70%);
  animation: dawki-choose-orb-pulse 11s ease-in-out -3s infinite;
}
@keyframes dawki-choose-orb-pulse {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.45; }
  50%      { transform: scale(1.15) translate(20px, -20px); opacity: 0.7; }
}
/* Subtle dotted grid overlay */
.dawki-choose-grid-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.dawki-choose > .container {
  position: relative;
  z-index: 1;
}

.dawki-choose-heading {
  text-align: center;
  margin-bottom: 56px;
}
.dawki-choose-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5b9eff 0%, #a855f7 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 22px;
  box-shadow: 0 8px 28px rgba(91, 158, 255, 0.45),
              0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  position: relative;
}
.dawki-choose-pill::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(91, 158, 255, 0.35), rgba(168, 85, 247, 0.35));
  z-index: -1;
  filter: blur(14px);
  opacity: 0.7;
}
.dawki-choose-pill i { font-size: 14px; }

.dawki-choose-title {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}
.dawki-choose-gradient {
  background: linear-gradient(
    90deg,
    #5b9eff 0%,
    #a855f7 35%,
    #ec4899 65%,
    #5b9eff 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: dawki-choose-gradient-flow 6s linear infinite;
}
@keyframes dawki-choose-gradient-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 250% center; }
}
.dawki-choose-strong { color: #fff; }

.dawki-choose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1199px) {
  .dawki-choose-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .dawki-choose-grid { grid-template-columns: 1fr; }
}

/* Stagger wrapper passes through display: contents not needed —
   framer-motion's div renders at full width inside the grid. */
.dawki-choose-card-wrap { display: block; height: 100%; }

.dawki-choose-card {
  position: relative;
  padding: 32px 28px 28px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.35s ease;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Animated gradient top border */
.dawki-choose-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(
    90deg,
    #5b9eff 0%,
    #a855f7 35%,
    #ec4899 65%,
    #5b9eff 100%
  );
  background-size: 250% auto;
  animation: dawki-choose-gradient-flow 5s linear infinite;
}
/* Soft glow that fades in on hover */
.dawki-choose-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px transparent inset;
  transition: box-shadow 0.4s ease;
}
.dawki-choose-card:hover {
  transform: translate3d(0, -10px, 0);
  box-shadow: 0 30px 60px rgba(91, 158, 255, 0.30),
              0 12px 28px rgba(168, 85, 247, 0.18);
  border-color: rgba(91, 158, 255, 0.30);
}
.dawki-choose-card:hover::after {
  box-shadow: 0 0 0 1px rgba(91, 158, 255, 0.35) inset;
}

/* Diagonal shine sweep on hover */
.dawki-choose-card-shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(91, 158, 255, 0.18) 50%,
    transparent 70%
  );
  transform: skewX(-20deg);
  transition: left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
.dawki-choose-card:hover .dawki-choose-card-shine {
  left: 130%;
}

.dawki-choose-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}
.dawki-choose-card-num {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, #5b9eff 0%, #a855f7 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: 0.85;
}
.dawki-choose-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(91, 158, 255, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5b9eff;
  font-size: 28px;
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.4s ease,
              color 0.4s ease,
              box-shadow 0.4s ease;
}
.dawki-choose-card:hover .dawki-choose-card-icon {
  transform: rotate(-8deg) scale(1.12);
  background: linear-gradient(135deg, #5b9eff 0%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(91, 158, 255, 0.40);
}

.dawki-choose-card-title {
  font-size: 22px;
  font-weight: 700;
  color: #0a1628;
  margin: 0 0 12px;
  line-height: 1.25;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}
.dawki-choose-card:hover .dawki-choose-card-title {
  background: linear-gradient(90deg, #5b9eff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dawki-choose-card-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #4a5568;
  margin: 0 0 22px;
  flex-grow: 1;
  position: relative;
  z-index: 2;
}

.dawki-choose-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0a1628;
  text-decoration: none;
  transition: color 0.25s ease-out, gap 0.25s ease-out;
  position: relative;
  z-index: 2;
  align-self: flex-start;
}
.dawki-choose-card-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #5b9eff, #a855f7);
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-radius: 2px;
}
.dawki-choose-card:hover .dawki-choose-card-link {
  color: #5b9eff;
  gap: 12px;
}
.dawki-choose-card:hover .dawki-choose-card-link::after {
  width: 75%;
}
.dawki-choose-card-link i {
  font-size: 15px;
  color: #5b9eff;
  transition: transform 0.3s ease;
}
.dawki-choose-card:hover .dawki-choose-card-link i {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .dawki-choose-card,
  .dawki-choose-card-link,
  .dawki-choose-card-icon,
  .dawki-choose-card-shine {
    transition: none;
  }
  .dawki-choose-card:hover {
    transform: none;
  }
  .dawki-choose-orb,
  .dawki-choose-gradient,
  .dawki-choose-card::before {
    animation: none;
  }
}
/* === END Choose Section rebuild === */

.tj-blog-section-2 .sec-heading-wrap .sub-title {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #4f7cff, #a855f7) !important;
  color: #ffffff !important;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  letter-spacing: 1.8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
  border: 0 !important;
}

.tj-blog-section-2 .sec-heading-wrap .desc {
  color: rgba(207, 224, 255, 0.78) !important;
}

.tj-blog-section-2 .slider-prev,
.tj-blog-section-2 .slider-next {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(91, 139, 255, 0.40) !important;
  color: #88b4ff !important;
}

.tj-blog-section-2 .slider-prev:hover,
.tj-blog-section-2 .slider-next:hover {
  background: linear-gradient(135deg, #4f7cff, #a855f7) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.tj-blog-section-2 .slider-prev i,
.tj-blog-section-2 .slider-next i {
  color: inherit !important;
}
/* === END Blog Section Fix === */

/* === Choose Section text color fix === */
.tj-choose-section {
  background: linear-gradient(135deg, #050d1c 0%, #0a1628 50%, #050d1c 100%);
}

.tj-choose-section .sec-heading.style-3 .sec-title,
.tj-choose-section .sec-heading.style-3 .sec-title strong {
  color: #ffffff !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.tj-choose-section .sec-heading.style-3 .sec-title strong {
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-image: none !important;
}

.tj-choose-section .sec-heading.style-3 .sec-title strong.gradient-text-blue {
  background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: choose-gradient-flow 6s linear infinite;
  display: inline-block;
}

@keyframes choose-gradient-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.tj-choose-section .sec-heading.style-3 .sub-title {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #4f7cff, #a855f7) !important;
  color: #ffffff !important;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  letter-spacing: 1.8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.30);
  border: 0 !important;
  margin-bottom: 22px !important;
}

.tj-choose-section .sec-heading.style-3 .sub-title i {
  color: #ffffff !important;
}
/* === END Choose Section Fix === */

/* === Logo blend fix — dark logo bg merges with navbar === */
.header-area.header-1.header-absolute .logo img,
.header-area.header-1.header-duplicate.header-sticky .logo img {
  mix-blend-mode: screen;
  filter: none !important;
}

/* Make sure the logo container has no white/odd bg */
.header-area.header-1 .site_logo,
.header-area.header-1 .logo {
  background: transparent !important;
}
/* === END Logo Fix === */

/* === Dynamic Showcase Section (CSS-only animated visual) === */
.dawki-showcase {
  position: relative;
  padding: 110px 30px;
  background: linear-gradient(135deg, #050d1c 0%, #0f1f3a 50%, #1a1045 100%);
  overflow: hidden;
  border-top: 1px solid rgba(91, 139, 255, 0.10);
  border-bottom: 1px solid rgba(91, 139, 255, 0.10);
}

@media (max-width: 768px) {
  .dawki-showcase { padding: 80px 20px; }
}

.dawki-showcase-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Animated mesh gradient background */
.dawki-showcase-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 400px at 20% 30%, rgba(79, 124, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 700px 400px at 80% 70%, rgba(168, 85, 247, 0.18), transparent 60%),
    radial-gradient(ellipse 600px 400px at 50% 50%, rgba(236, 72, 153, 0.10), transparent 60%);
  animation: showcase-mesh-shift 18s ease-in-out infinite alternate;
}

@keyframes showcase-mesh-shift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
  50%  { background-position: 30% 20%, 70% 80%, 60% 40%; }
  100% { background-position: 100% 100%, 0% 0%, 40% 60%; }
}

/* Subtle grid */
.dawki-showcase-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(91, 139, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 139, 255, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}

/* Floating orbs */
.dawki-showcase-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.dawki-showcase-orb-1 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.40) 0%, transparent 70%);
  top: -100px; left: -50px;
  animation: showcase-orb-a 12s ease-in-out infinite;
}
.dawki-showcase-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.40) 0%, transparent 70%);
  bottom: -120px; right: -80px;
  animation: showcase-orb-b 14s ease-in-out infinite;
}
.dawki-showcase-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.30) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: showcase-orb-c 10s ease-in-out infinite;
}
@keyframes showcase-orb-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(40px, 30px); }
}
@keyframes showcase-orb-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-40px, -30px); }
}
@keyframes showcase-orb-c {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* Floating particles */
.dawki-showcase-particles {
  position: absolute;
  inset: 0;
}
.dawki-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  animation: particle-float 8s ease-in-out infinite;
}
.dawki-particle-1 { top: 15%; left: 12%; background: rgba(91, 158, 255, 0.85); box-shadow: 0 0 12px rgba(91, 158, 255, 0.7); animation-delay: 0s; }
.dawki-particle-2 { top: 25%; left: 80%; background: rgba(168, 85, 247, 0.85); box-shadow: 0 0 12px rgba(168, 85, 247, 0.7); animation-delay: -1s; }
.dawki-particle-3 { top: 65%; left: 15%; background: rgba(236, 72, 153, 0.85); box-shadow: 0 0 12px rgba(236, 72, 153, 0.7); animation-delay: -2s; }
.dawki-particle-4 { top: 75%; left: 75%; background: rgba(91, 158, 255, 0.85); box-shadow: 0 0 12px rgba(91, 158, 255, 0.7); animation-delay: -3s; }
.dawki-particle-5 { top: 40%; left: 50%; background: rgba(255, 255, 255, 0.85); animation-delay: -4s; }
.dawki-particle-6 { top: 85%; left: 40%; background: rgba(168, 85, 247, 0.85); box-shadow: 0 0 12px rgba(168, 85, 247, 0.7); animation-delay: -5s; }
.dawki-particle-7 { top: 10%; left: 60%; background: rgba(91, 158, 255, 0.85); box-shadow: 0 0 12px rgba(91, 158, 255, 0.7); animation-delay: -6s; }
.dawki-particle-8 { top: 55%; left: 90%; background: rgba(236, 72, 153, 0.85); box-shadow: 0 0 12px rgba(236, 72, 153, 0.7); animation-delay: -7s; }

@keyframes particle-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  25% { transform: translate(20px, -30px) scale(1.3); opacity: 1; }
  50% { transform: translate(-10px, -50px) scale(1); opacity: 0.6; }
  75% { transform: translate(-30px, -20px) scale(1.2); opacity: 0.9; }
}

/* Content */
.dawki-showcase-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}

.dawki-showcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(79, 124, 255, 0.15);
  border: 1px solid rgba(91, 139, 255, 0.35);
  color: #88b4ff;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.dawki-showcase-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #88b4ff;
  box-shadow: 0 0 10px #88b4ff;
  animation: badge-blink 1.5s ease-in-out infinite;
}

@keyframes badge-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.dawki-showcase-title {
  color: #ffffff !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px;
  margin-bottom: 60px !important;
}

.dawki-showcase-title span {
  background: linear-gradient(90deg, #5b9eff, #a855f7, #ec4899);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: showcase-title-flow 5s linear infinite;
}

@keyframes showcase-title-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Stats grid */
.dawki-showcase-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .dawki-showcase-stats { grid-template-columns: repeat(2, 1fr); }
}

.dawki-stat-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(79, 124, 255, 0.04));
  border: 1px solid rgba(91, 139, 255, 0.20);
  border-radius: 18px;
  padding: 36px 24px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}

.dawki-stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4f7cff, #a855f7, transparent);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.dawki-stat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(91, 139, 255, 0.50);
  box-shadow: 0 20px 50px rgba(79, 124, 255, 0.25);
}

.dawki-stat-card:hover::before {
  opacity: 1;
}

.dawki-stat-icon {
  font-size: 36px;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 12px rgba(79, 124, 255, 0.40));
  display: inline-block;
  animation: stat-icon-bob 3s ease-in-out infinite;
}

.dawki-stat-card:nth-child(2) .dawki-stat-icon { animation-delay: -0.5s; }
.dawki-stat-card:nth-child(3) .dawki-stat-icon { animation-delay: -1s; }
.dawki-stat-card:nth-child(4) .dawki-stat-icon { animation-delay: -1.5s; }

@keyframes stat-icon-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.dawki-stat-number {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #5b9eff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
  letter-spacing: -1.5px;
  filter: drop-shadow(0 4px 12px rgba(79, 124, 255, 0.30));
}

.dawki-stat-number span {
  font-size: 0.55em;
  margin-left: 2px;
}

.dawki-stat-label {
  color: rgba(207, 224, 255, 0.78);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.dawki-stat-card:hover .dawki-stat-icon {
  animation-duration: 1.5s;
}
/* === END Dynamic Showcase === */

/* === Custom: Transparent Header overlaying hero === */
/* Initial absolute header — transparent over the hero */
.header-area.header-1.header-absolute {
  background-color: transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  width: 100% !important;
  inset-inline-start: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-area.header-1.header-absolute .header-wrapper {
  background-color: transparent !important;
  background: transparent !important;
  padding: 0 30px !important;
}

/* Menu links — white on transparent header */
.header-area.header-1.header-absolute .mainmenu > ul > li > a {
  color: rgba(255, 255, 255, 0.92) !important;
  transition: color 0.3s ease;
}

.header-area.header-1.header-absolute .mainmenu > ul > li > a:hover,
.header-area.header-1.header-absolute .mainmenu > ul > li.current-menu-ancestor > a,
.header-area.header-1.header-absolute .mainmenu > ul > li.active > a {
  color: #88b4ff !important;
}

.header-area.header-1.header-absolute .mainmenu > ul > li.menu-item-has-children > a::after,
.header-area.header-1.header-absolute .mainmenu > ul > li.has-dropdown > a::after {
  color: rgba(255, 255, 255, 0.92);
}

/* Hamburger / mobile bar icon */
.header-area.header-1.header-absolute .hamburger-btn,
.header-area.header-1.header-absolute .hamburger-btn span,
.header-area.header-1.header-absolute .mobile-bar i {
  color: #ffffff !important;
}

.header-area.header-1.header-absolute .hamburger-btn span,
.header-area.header-1.header-absolute .mobile-bar span {
  background-color: #ffffff !important;
}

/* Logo — uses dark-version (already designed for dark bg) */
.header-area.header-1.header-absolute .logo img,
.header-area.header-1.header-absolute .footer-logo img {
  filter: none;
}

/* Contact Us button stays distinct */
.header-area.header-1.header-absolute .tj-primary-btn,
.header-area.header-1.header-absolute .header-btn .tj-primary-btn {
  background: linear-gradient(135deg, #4f7cff, #a855f7) !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.40) !important;
}

/* Pull hero section up so it extends behind the transparent navbar */
.space-for-header {
  padding-top: 0 !important;
  height: 0 !important;
}

/* Banner section gets top padding to compensate */
.tj-banner-section.section-gap-x .banner-area {
  padding-top: 130px !important;
}

@media (max-width: 768px) {
  .tj-banner-section.section-gap-x .banner-area {
    padding-top: 110px !important;
  }
}

/* === Sticky header (appears on scroll) — glass dark === */
.header-area.header-1.header-duplicate.header-sticky {
  background: rgba(8, 18, 38, 0.88) !important;
  background-color: rgba(8, 18, 38, 0.88) !important;
  border-radius: 0 !important;
  width: 100% !important;
  inset-inline-start: 0 !important;
  border-bottom: 1px solid rgba(91, 139, 255, 0.20);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}

.header-area.header-1.header-duplicate.header-sticky .header-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 30px !important;
}

.header-area.header-1.header-duplicate.header-sticky .mainmenu > ul > li > a {
  color: rgba(255, 255, 255, 0.92) !important;
}

.header-area.header-1.header-duplicate.header-sticky .mainmenu > ul > li > a:hover,
.header-area.header-1.header-duplicate.header-sticky .mainmenu > ul > li.current-menu-ancestor > a,
.header-area.header-1.header-duplicate.header-sticky .mainmenu > ul > li.active > a {
  color: #88b4ff !important;
}

.header-area.header-1.header-duplicate.header-sticky .mainmenu > ul > li.menu-item-has-children > a::after,
.header-area.header-1.header-duplicate.header-sticky .mainmenu > ul > li.has-dropdown > a::after {
  color: rgba(255, 255, 255, 0.92);
}

.header-area.header-1.header-duplicate.header-sticky .logo img {
  filter: none;
}

.header-area.header-1.header-duplicate.header-sticky .hamburger-btn span,
.header-area.header-1.header-duplicate.header-sticky .mobile-bar span,
.header-area.header-1.header-duplicate.header-sticky .mobile-bar i {
  background-color: #ffffff !important;
  color: #ffffff !important;
}

.header-area.header-1.header-duplicate.header-sticky .tj-primary-btn,
.header-area.header-1.header-duplicate.header-sticky .header-btn .tj-primary-btn {
  background: linear-gradient(135deg, #4f7cff, #a855f7) !important;
  border: 0 !important;
}

/* Dropdown menu items — make readable */
.header-area.header-1.header-absolute .mainmenu .submenu,
.header-area.header-1.header-duplicate.header-sticky .mainmenu .submenu {
  background: #0f1f3a !important;
  border: 1px solid rgba(91, 139, 255, 0.20) !important;
}

.header-area.header-1.header-absolute .mainmenu .submenu li a,
.header-area.header-1.header-duplicate.header-sticky .mainmenu .submenu li a {
  color: rgba(207, 224, 255, 0.85) !important;
}

.header-area.header-1.header-absolute .mainmenu .submenu li a:hover,
.header-area.header-1.header-duplicate.header-sticky .mainmenu .submenu li a:hover {
  color: #ffffff !important;
  background: rgba(79, 124, 255, 0.15) !important;
}
/* === END Header Custom === */

/* Solid dark card — overrides EVERYTHING */
.h7-team .h7-team-marquee .swiper-slide .team-item {
  margin: 0 !important;
  background: #0f1f3a !important;
  background-color: #0f1f3a !important;
  border: 1px solid rgba(91, 139, 255, 0.25) !important;
  border-radius: 14px !important;
  padding: 20px 16px !important;
  height: 100px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.4s ease !important;
}

/* Hide text */
.h7-team .h7-team-marquee .swiper-slide .team-item .team-content,
.h7-team .h7-team-marquee .swiper-slide .team-item .social-links {
  display: none !important;
}

/* Wipe ALL pseudo-elements on team-img + inner */
.h7-team .h7-team-marquee .swiper-slide .team-item .team-img::before,
.h7-team .h7-team-marquee .swiper-slide .team-item .team-img::after,
.h7-team .h7-team-marquee .swiper-slide .team-item .team-img-inner::before,
.h7-team .h7-team-marquee .swiper-slide .team-item .team-img-inner::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
}

/* Wipe ALL backgrounds on inner wrappers */
.h7-team .h7-team-marquee .swiper-slide .team-item .team-img,
.h7-team .h7-team-marquee .swiper-slide .team-item .team-img-inner {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Logo image — clean, no decorations */
.h7-team .h7-team-marquee .swiper-slide .team-item .team-img img {
  max-width: 75px !important;
  max-height: 55px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  border: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: transform 0.4s ease !important;
}

/* Hover */
.h7-team .h7-team-marquee .swiper-slide .team-item:hover {
  transform: translateY(-4px);
  border-color: rgba(91, 139, 255, 0.55) !important;
  background: linear-gradient(145deg, #14264a, #1a1d3a) !important;
  background-color: #14264a !important;
  box-shadow: 0 14px 32px rgba(79, 124, 255, 0.30) !important;
}

.h7-team .h7-team-marquee .swiper-slide .team-item:hover .team-img img {
  transform: scale(1.10) !important;
}

@media (max-width: 575px) {
  .h7-team .h7-team-marquee .swiper-slide {
    width: 130px !important;
  }
  .h7-team .h7-team-marquee .swiper-slide .team-item {
    height: 80px !important;
    padding: 14px 12px !important;
  }
  .h7-team .h7-team-marquee .swiper-slide .team-item .team-img img {
    max-width: 55px !important;
    max-height: 40px !important;
  }
}
/* === END Tech Marquee Custom === */

/* === Service Page Extras: Stats / Why-Choose / Industries === */
.dawki-stats-section {
    padding: 90px 0;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    position: relative;
    overflow: hidden;
}
.dawki-stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.18), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.18), transparent 45%);
    pointer-events: none;
}
.dawki-stats-heading {
    text-align: center;
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
}
.dawki-stats-title {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}
.dawki-stats-subtitle {
    color: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}
.dawki-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
}
.dawki-stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 38px 28px;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    backdrop-filter: blur(8px);
}
.dawki-stat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(255, 255, 255, 0.06);
}
.dawki-stat-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 800;
    background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.03em;
}
.dawki-stat-suffix {
    font-size: 0.6em;
    font-weight: 700;
}
.dawki-stat-label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}
@media (max-width: 991px) {
    .dawki-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .dawki-stats-grid { grid-template-columns: 1fr; }
}

.dawki-why-section {
    padding: 100px 0;
    background: #f8f9ff;
    position: relative;
}
.dawki-why-heading {
    text-align: center;
    margin-bottom: 60px;
}
.dawki-why-title {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    color: #0a0e27;
    margin: 14px 0;
    letter-spacing: -0.02em;
}
.dawki-why-subtitle {
    color: #6b7280;
    font-size: 16px;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}
.dawki-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.dawki-why-card {
    background: #fff;
    border: 1px solid #eef0fa;
    border-radius: 20px;
    padding: 36px 28px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}
.dawki-why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.dawki-why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
}
.dawki-why-card:hover::before { transform: scaleX(1); }
.dawki-why-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(168, 85, 247, 0.12) 100%);
    border-radius: 16px;
    margin-bottom: 22px;
}
.dawki-why-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #0a0e27;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}
.dawki-why-card-desc {
    color: #64748b;
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}
@media (max-width: 991px) {
    .dawki-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .dawki-why-grid { grid-template-columns: 1fr; }
}

.dawki-industries-section {
    padding: 100px 0;
    background: #fff;
    position: relative;
}
.dawki-industries-heading {
    text-align: center;
    margin-bottom: 60px;
}
.dawki-industries-title {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    color: #0a0e27;
    margin: 14px 0;
    letter-spacing: -0.02em;
}
.dawki-industries-subtitle {
    color: #6b7280;
    font-size: 16px;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}
.dawki-industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.dawki-industry-card {
    background: linear-gradient(180deg, #fafbff 0%, #f3f5fc 100%);
    border: 1px solid #eef0fa;
    border-radius: 18px;
    padding: 32px 24px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.dawki-industry-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    background: #fff;
}
.dawki-industry-icon {
    font-size: 38px;
    margin-bottom: 16px;
    line-height: 1;
}
.dawki-industry-title {
    font-size: 17px;
    font-weight: 700;
    color: #0a0e27;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.dawki-industry-desc {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 1199px) {
    .dawki-industries-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .dawki-industries-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .dawki-industries-grid { grid-template-columns: 1fr; }
}
/* === END Service Page Extras === */

/* === Google Reviews Slider === */
.dawki-greviews-section {
    padding: 100px 0 110px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
    position: relative;
    overflow: hidden;
}
.dawki-greviews-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.08), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(168, 85, 247, 0.08), transparent 40%);
    pointer-events: none;
}
.dawki-greviews-heading {
    text-align: center;
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
}
.dawki-greviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    margin-bottom: 18px;
}
.dawki-greviews-title {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    color: #0a0e27;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}
.dawki-greviews-subtitle {
    color: #6b7280;
    font-size: 16px;
    max-width: 640px;
    margin: 0 auto 22px;
    line-height: 1.6;
}
.dawki-greviews-rating {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #f1f3fa;
    padding: 10px 20px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}
.dawki-greviews-stars {
    display: inline-flex;
    gap: 2px;
}
.dawki-greviews-rating-text {
    font-size: 14px;
    color: #4b5563;
    font-weight: 600;
}
.dawki-greviews-slider {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 8px 4px 50px;
}
.dawki-greview-card {
    background: #fff;
    border: 1px solid #eef0fa;
    border-radius: 18px;
    padding: 28px;
    height: 100%;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 240px;
}
.dawki-greview-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
}
.dawki-greview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dawki-greview-author {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.dawki-greview-author img,
.dawki-greview-avatar-fallback {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.dawki-greview-avatar-fallback {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}
.dawki-greview-author-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dawki-greview-name {
    font-size: 15px;
    font-weight: 700;
    color: #0a0e27;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dawki-greview-role {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.dawki-greview-google-mark {
    flex-shrink: 0;
    opacity: 0.95;
}
.dawki-greview-stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.dawki-greview-date {
    margin-left: 10px;
    font-size: 12px;
    color: #9ca3af;
}
.dawki-greview-text {
    color: #4b5563;
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dawki-greviews-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
}
.dawki-greviews-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #cbd5e1;
    opacity: 1;
    transition: width 0.3s ease, background 0.3s ease;
    border-radius: 999px;
}
.dawki-greviews-pagination .swiper-pagination-bullet-active {
    width: 26px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
}
/* === END Google Reviews Slider === */

/* === Mobile App Showcase Section === */
.mob-showcase {
    position: relative;
    padding: 110px 0 130px;
    background: linear-gradient(180deg, #0b1024 0%, #1a1740 60%, #0b1024 100%);
    overflow: hidden;
    color: #fff;
}
.mob-showcase-orb {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.5;
    pointer-events: none;
}
.mob-showcase-orb--a {
    background: radial-gradient(circle, #6366f1 0%, transparent 70%);
    top: -120px;
    left: -120px;
}
.mob-showcase-orb--b {
    background: radial-gradient(circle, #a855f7 0%, transparent 70%);
    bottom: -180px;
    right: -160px;
}
.mob-showcase-heading {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
    z-index: 1;
}
.mob-showcase-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #c4b5fd;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    margin-bottom: 18px;
}
.mob-showcase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a855f7;
    box-shadow: 0 0 10px #a855f7;
}
.mob-showcase-title {
    font-size: clamp(32px, 4.2vw, 52px);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    color: #fff;
}
.mob-showcase-title span {
    background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mob-showcase-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    max-width: 660px;
    margin: 0 auto;
    line-height: 1.65;
}

.mob-showcase-stage {
    position: relative;
    z-index: 1;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mob-phones-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 30px;
    width: 100%;
    position: relative;
    z-index: 2;
}
.mob-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.mob-phone--side .mob-phone-frame {
    transform: scale(0.88);
}
.mob-phone-frame {
    position: relative;
    width: 240px;
    height: 480px;
    background: linear-gradient(180deg, #1a1f3a 0%, #0a0e27 100%);
    border-radius: 38px;
    padding: 14px 12px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    transition: transform 0.4s ease;
}
.mob-phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 22px;
    background: #000;
    border-radius: 0 0 14px 14px;
    z-index: 2;
}
.mob-phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    border-radius: 28px;
    padding: 30px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    position: relative;
}
.mob-phone-screen--ios { background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%); }
.mob-phone-screen--android { background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%); }
.mob-phone-screen--tablet { background: linear-gradient(180deg, #faf5ff 0%, #ede9fe 100%); }

.mob-phone-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #1f2937;
    padding: 0 4px;
}
.mob-phone-status--android { color: #047857; }
.mob-phone-status-icons {
    display: flex;
    align-items: center;
    gap: 4px;
}
.mob-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1f2937;
}
.mob-status-bar {
    width: 18px;
    height: 8px;
    background: #1f2937;
    border-radius: 2px;
}
.mob-phone-app-header {
    padding: 0 4px;
    margin-top: 4px;
}
.mob-phone-app-header h4 {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.mob-phone-search {
    height: 30px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 10px;
}

.mob-phone-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mob-phone-card {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border-radius: 12px;
}
.mob-phone-card--lg { height: 100px; }
.mob-phone-card--sm { height: 70px; flex: 1; }
.mob-phone-card-row {
    display: flex;
    gap: 8px;
}

.mob-phone-hero {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
    margin-top: 4px;
}
.mob-phone-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34d399, #10b981);
}
.mob-phone-hero-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mob-phone-hero-line {
    height: 8px;
    background: rgba(15, 23, 42, 0.18);
    border-radius: 4px;
}
.mob-phone-hero-line--short { width: 50%; }
.mob-phone-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 6px;
    height: 130px;
    padding: 14px 6px 0;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.08);
    margin-top: 6px;
}
.mob-phone-chart > div {
    flex: 1;
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    border-radius: 4px 4px 2px 2px;
}
.mob-phone-cta {
    height: 40px;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    border-radius: 12px;
    margin-top: auto;
}
.mob-phone-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mob-phone-grid-cell {
    aspect-ratio: 1.3;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.85) 0%, rgba(192, 132, 252, 0.85) 100%);
    border-radius: 12px;
}
.mob-phone-tabbar {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 4px 4px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.mob-tab {
    width: 28px;
    height: 5px;
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
}
.mob-tab--active { background: #6366f1; width: 36px; }

.mob-phone-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 0 20px currentColor;
}

.mob-feature-pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 9px 16px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 3;
    white-space: nowrap;
}
.mob-feature-pill-icon {
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 991px) {
    .mob-phones-row { gap: 14px; }
    .mob-phone-frame { width: 200px; height: 400px; }
    .mob-phone--side .mob-phone-frame { transform: scale(0.85); }
}
@media (max-width: 768px) {
    .mob-showcase { padding: 80px 0 100px; }
    .mob-feature-pill { font-size: 11px; padding: 7px 12px; }
    .mob-feature-pill-icon { font-size: 13px; }
    .mob-phones-row { flex-wrap: wrap; gap: 20px; }
    .mob-phone-frame { width: 180px; height: 360px; }
    .mob-phone--side .mob-phone-frame { transform: none; }
    .mob-showcase-stage { min-height: auto; }
}
@media (max-width: 480px) {
    .mob-feature-pill { display: none; }
}
/* === END Mobile App Showcase Section === */

/* === Mobile App Journey Section === */
.mob-journey {
    padding: 110px 0 120px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
    position: relative;
    overflow: hidden;
}
.mob-journey::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.06), transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.06), transparent 45%);
    pointer-events: none;
}
.mob-journey-heading {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}
.mob-journey-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #6366f1;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.mob-journey-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366f1;
    box-shadow: 0 0 10px #6366f1;
}
.mob-journey-title {
    font-size: clamp(32px, 4.2vw, 52px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0a0e27;
    margin-bottom: 16px;
}
.mob-journey-title span {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mob-journey-subtitle {
    color: #64748b;
    font-size: 16px;
    max-width: 660px;
    margin: 0 auto;
    line-height: 1.65;
}
.mob-journey-track {
    position: relative;
    z-index: 1;
    padding-top: 30px;
}
.mob-journey-line {
    position: absolute;
    top: 80px;
    left: 5%;
    right: 5%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4) 10%, rgba(168, 85, 247, 0.4) 90%, transparent);
    transform-origin: left;
    border-radius: 999px;
    z-index: 0;
}
.mob-journey-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    position: relative;
    z-index: 1;
}
.mob-journey-step {
    text-align: center;
    padding: 0 6px;
}
.mob-journey-bubble {
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(99, 102, 241, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
    cursor: default;
}
.mob-journey-bubble::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #6366f1, #a855f7, #f472b6, #6366f1);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    filter: blur(8px);
}
.mob-journey-bubble:hover::before { opacity: 0.6; }
.mob-journey-icon {
    font-size: 36px;
    line-height: 1;
}
.mob-journey-num {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
.mob-journey-step-title {
    font-size: 16px;
    font-weight: 700;
    color: #0a0e27;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.mob-journey-step-desc {
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 1199px) {
    .mob-journey-steps { grid-template-columns: repeat(3, 1fr); row-gap: 50px; }
    .mob-journey-line { display: none; }
}
@media (max-width: 600px) {
    .mob-journey-steps { grid-template-columns: repeat(2, 1fr); }
    .mob-journey-bubble { width: 76px; height: 76px; }
    .mob-journey-icon { font-size: 30px; }
}
/* === END Mobile App Journey Section === */

/* === Service Card Sweep & Hover Polish === */
.dawki-csd-svc-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.dawki-csd-svc-card-sweep {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 38%,
        rgba(99, 102, 241, 0.08) 50%,
        rgba(168, 85, 247, 0.08) 60%,
        transparent 72%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-position: -150% 0;
    pointer-events: none;
    transition: background-position 0.9s ease;
    z-index: 0;
}
.dawki-csd-svc-card:hover .dawki-csd-svc-card-sweep {
    background-position: 150% 0;
}
.dawki-csd-svc-card:hover {
    border-color: rgba(99, 102, 241, 0.35) !important;
    box-shadow:
        0 22px 48px rgba(99, 102, 241, 0.15),
        0 0 0 1px rgba(99, 102, 241, 0.18);
}
.dawki-csd-svc-card-icon,
.dawki-csd-svc-card-title,
.dawki-csd-svc-card-desc,
.dawki-csd-svc-card-arrow,
.dawki-csd-svc-card-glow {
    position: relative;
    z-index: 1;
}
.dawki-csd-svc-card-icon {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dawki-csd-svc-card:hover .dawki-csd-svc-card-icon {
    transform: scale(1.08) rotate(-5deg);
}
.dawki-csd-svc-card-arrow {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
}
.dawki-csd-svc-card:hover .dawki-csd-svc-card-arrow {
    transform: translate(4px, -4px);
    color: #6366f1;
}
/* === END Service Card Sweep & Hover Polish === */

/* === "Your Tech Stack, Mastered." heading — animated gradient text ===
   Apply the flowing gradient on both the title and any SplitText child wrappers
   so the heading stays vibrant regardless of how it's split. */
.h7-team .sec-heading.style-2 .sec-title,
.h7-team .sec-heading.style-2 .sec-title .line,
.h7-team .sec-heading.style-2 .sec-title .line-outer,
.h7-team .sec-heading.style-2 .sec-title .word,
.h7-team .sec-heading.style-2 .sec-title .char,
.h7-team .sec-heading.style-2 .sec-title > div,
.h7-team .sec-heading.style-2 .sec-title span {
    background: linear-gradient(
        90deg,
        #06b6d4 0%,
        #4f7cff 25%,
        #a855f7 50%,
        #ec4899 75%,
        #06b6d4 100%
    ) !important;
    background-size: 300% auto !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: heading-gradient-flow 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .h7-team .sec-heading.style-2 .sec-title,
    .h7-team .sec-heading.style-2 .sec-title span {
        animation: none !important;
    }
}
/* === END Tech Stack heading fix === */

/* === Scroll-perf: skip rendering off-screen sections ===
   `content-visibility: auto` tells the browser it can skip layout/paint for any
   section that isn't near the viewport. Combined with `contain-intrinsic-size:
   auto <h>` (browser remembers the last rendered size) this avoids the
   scrollbar-jump that naive content-visibility usage causes.

   The hero (`.tj-banner-section`) is intentionally excluded — it's always in
   view on first paint and we don't want to delay it.

   Inside skipped subtrees the browser also pauses CSS animations + Web Animations,
   which kills the per-frame paint cost of the gradient flows / marquees / pulses
   that were running even while off-screen. */
.tj-choose-section,
.tj-about-section-2,
.tj-service-section,
.tj-process-section,
.dawki-products,
.h7-team,
.h5-testimonial,
.tj-contact-section,
.tj-blog-section-2,
.tj-cta-section,
.dawki-ent-video {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* Promote elements that move on scroll to their own composite layer so the
   compositor — not the main thread — handles the transform. */
.banner-content,
.dawki-csd-svc-timeline-track-fill,
.css-marquee-track,
.dawki-back-to-top {
    will-change: transform;
}
/* === END scroll-perf block === */

/* === Robust Tools & Technologies — static white grid =====================
   Replaces the old marquee-based tech-stack section. Clean, screenshot-style
   layout: white cards with brand-colored logos sourced from simpleicons CDN.
   ========================================================================= */
.dawki-tech-section {
    background: #ffffff;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.dawki-tech-heading {
    text-align: center;
    margin-bottom: 50px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.dawki-tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(79, 124, 255, 0.08);
    border: 1px solid rgba(79, 124, 255, 0.20);
    color: #4f7cff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 30px;
    margin-bottom: 18px;
}

.dawki-tech-pill .dawki-tech-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f7cff, #a855f7);
    box-shadow: 0 0 8px rgba(79, 124, 255, 0.5);
}

.dawki-tech-title {
    font-size: clamp(26px, 3.6vw, 42px);
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.5px;
    line-height: 1.18;
    margin: 0 0 16px;
}

.dawki-tech-title span {
    background: linear-gradient(90deg, #4f7cff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.dawki-tech-subtitle {
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.dawki-tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 14px;
}

.dawki-tech-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 110px;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    will-change: transform;
}

.dawki-tech-card:hover {
    transform: translateY(-4px);
    border-color: #c7d6ff;
    box-shadow: 0 14px 28px rgba(79, 124, 255, 0.10),
                0 4px 10px rgba(15, 23, 42, 0.04);
}

.dawki-tech-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dawki-tech-card:hover .dawki-tech-icon {
    transform: scale(1.12);
}

.dawki-tech-name {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.1px;
}

@media (max-width: 991px) {
    .dawki-tech-section {
        padding: 80px 0;
    }
    .dawki-tech-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 575px) {
    .dawki-tech-section {
        padding: 60px 0;
    }
    .dawki-tech-heading {
        margin-bottom: 32px;
    }
    .dawki-tech-grid {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
        gap: 10px;
    }
    .dawki-tech-card {
        padding: 16px 8px;
        min-height: 92px;
        gap: 8px;
        border-radius: 12px;
    }
    .dawki-tech-icon {
        width: 30px;
        height: 30px;
    }
    .dawki-tech-name {
        font-size: 11px;
    }
}
/* === END Robust Tools & Technologies === */
}

/* === Global gradient-text flow animation (right-to-left) ================
   Every dawki-style gradient title (Shipped Reality, Empowering Business,
   A Decade of Building & Scaling, Robust Tools, Trusted by Teams, etc.)
   gets the same flowing-gradient animation here so the entire site uses
   one consistent shimmering motion. The animation moves background-position
   from 0% → 200%, which makes the colors visually flow right → left.
   Class-level + !important specificity beats the universal animation
   killer injected on the welcome page, so it works everywhere. */
@keyframes dawki-rtl-gradient-flow {
    from { background-position: 0% center; }
    to   { background-position: 200% center; }
}

[class*="dawki-"][class*="-title"] span,
.tj-banner-section .banner-content .banner-title span,
.banner-content .banner-title span,
.dawki-choose-gradient,
.dawki-tech-title span,
.dawki-journey-title span,
.dawki-corevalues-title span,
.dawki-clients-title span,
.dawki-products-title span,
.dawki-cta-title span,
.dawki-ent-video-title span,
.dawki-home-stories-title span,
.dawki-about-testimonials-title span,
.dawki-pr-title span,
.dawki-values-title span,
.dawki-csd-svc-title span,
.dawki-about-hero-title span,
.dawki-contact-banner-title span,
.gradient-text-blue,
.gradient-text {
    background-size: 200% auto !important;
    animation: dawki-rtl-gradient-flow 6s linear infinite !important;
    animation-duration: 6s !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
}

@media (prefers-reduced-motion: reduce) {
    [class*="dawki-"][class*="-title"] span,
    .tj-banner-section .banner-content .banner-title span,
    .banner-content .banner-title span,
    .dawki-choose-gradient,
    .gradient-text-blue,
    .gradient-text {
        animation: none !important;
    }
}
/* === END Global gradient-text flow === */

/* === Welcome page hero — full-screen custom background + tech chips =====
   Replaces the default banner panel look on the home page. The hero-bg.png
   image fills the section; the inner banner-left-box drops its dark fill +
   border-radius so the bg shows through cleanly. A subtle dark gradient
   overlay keeps the text readable on top of the busy artwork. */
.dawki-hero-bg {
    background-image: url("/assets/images/header/demo/hero-bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.dawki-hero-bg .banner-area {
    min-height: 100vh;
    align-items: center;
    position: relative;
    z-index: 2;
}

.dawki-hero-bg .banner-left-box {
    background-color: transparent !important;
    border-radius: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: clamp(40px, 8vh, 90px);
    padding-bottom: clamp(40px, 8vh, 90px);
}

.dawki-hero-bg .banner-left-box::before { display: none !important; }

/* Soft dark gradient overlay for legibility over the artwork */
.dawki-hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(5, 13, 28, 0.85) 0%,
        rgba(5, 13, 28, 0.65) 45%,
        rgba(5, 13, 28, 0.20) 75%,
        rgba(5, 13, 28, 0.05) 100%
    );
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 991px) {
    .dawki-hero-bg-overlay {
        background: linear-gradient(180deg,
            rgba(5, 13, 28, 0.90) 0%,
            rgba(5, 13, 28, 0.75) 60%,
            rgba(5, 13, 28, 0.55) 100%);
    }
    .dawki-hero-bg {
        min-height: auto;
    }
    .dawki-hero-bg .banner-area {
        min-height: auto;
    }
}

/* === Hero tech-stack chips (HTML, CSS, JS, React, Next.js, Node.js) === */
.dawki-hero-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.dawki-hero-tech-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                background 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease;
    cursor: default;
}

.dawki-hero-tech-chip:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(91, 158, 255, 0.40);
    box-shadow: 0 12px 28px rgba(79, 124, 255, 0.20);
}

.dawki-hero-tech-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dawki-hero-tech-chip:hover .dawki-hero-tech-img {
    transform: scale(1.15) rotate(-6deg);
}

.dawki-hero-tech-chip span {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

@media (max-width: 575px) {
    .dawki-hero-tech {
        gap: 8px;
        margin-top: 24px;
    }
    .dawki-hero-tech-chip {
        padding: 8px 12px;
        gap: 8px;
        border-radius: 12px;
    }
    .dawki-hero-tech-img {
        width: 22px;
        height: 22px;
    }
    .dawki-hero-tech-chip span {
        font-size: 12px;
    }
}
/* === END Welcome hero === */

/* === Sticky Service cards — visual polish ================================
   Adds: diagonal shine sweep on hover, per-card colored list bullets,
   smoother card padding + spacing. Pairs with the framer-motion SlideInRight
   entrance applied in welcome.tsx. */
.tj-service-section.service-2 {
    /* Clip horizontally so the right→left slide entrance never produces
       a horizontal scrollbar flash during the animation */
    overflow-x: clip;
}
.tj-service-section.service-2 .service-wrapper-2 {
    overflow-x: clip;
}
.tj-service-section.service-2 .service-item.style-2 {
    padding: 36px 40px !important;
}
@media (max-width: 991px) {
    .tj-service-section.service-2 .service-item.style-2 {
        padding: 28px 26px !important;
    }
}

/* Diagonal shine sweep across the whole card on hover */
.tj-service-section.service-2 .service-item.style-2::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 70%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
}
.tj-service-section.service-2 .service-item.style-2:hover::after {
    left: 130%;
}

/* Make sure content sits above the shine */
.tj-service-section.service-2 .service-item.style-2 .title-area,
.tj-service-section.service-2 .service-item.style-2 .service-content {
    position: relative;
    z-index: 2;
}

/* List items — per-card colored arrow + subtle slide on hover */
.tj-service-section.service-2 .service-item.style-2 .list-items li {
    color: rgba(207, 224, 255, 0.85);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
}
.tj-service-section.service-2 .service-item.style-2 .list-items li i {
    color: var(--accent, #4f7cff) !important;
    filter: drop-shadow(0 0 8px var(--accent-glow, rgba(79, 124, 255, 0.45)));
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tj-service-section.service-2 .service-item.style-2:hover .list-items li {
    color: #ffffff;
}
.tj-service-section.service-2 .service-item.style-2:hover .list-items li:nth-child(1) i { transform: translateX(4px); }
.tj-service-section.service-2 .service-item.style-2:hover .list-items li:nth-child(2) i { transform: translateX(4px); }
.tj-service-section.service-2 .service-item.style-2:hover .list-items li:nth-child(3) i { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .tj-service-section.service-2 .service-item.style-2,
    .tj-service-section.service-2 .service-item.style-2::after,
    .tj-service-section.service-2 .service-item.style-2 .service-icon,
    .tj-service-section.service-2 .service-item.style-2 .list-items li,
    .tj-service-section.service-2 .service-item.style-2 .list-items li i {
        transition: none !important;
    }
    .tj-service-section.service-2 .service-item.style-2:hover {
        transform: none;
    }
}
/* === END Sticky Service cards polish === */

/* === Home Service Showcase — appinventiv-style 3D coverflow ==============
   Tab bar at top + stage with cards. Active card = straight + scaled, side
   cards = tilted back. Framer-motion handles the spring animations; this
   stylesheet just defines layout, card chrome, and the mock visuals. */
.dawki-showcase {
    position: relative;
    padding: clamp(70px, 9vw, 120px) 0;
    background: #050d1c;
    overflow: hidden;
    isolation: isolate;
}
.dawki-showcase::before {
    content: "";
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(79, 124, 255, 0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.dawki-showcase > .container {
    position: relative;
    z-index: 1;
}

/* Heading */
.dawki-showcase-heading {
    text-align: center;
    margin-bottom: 50px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dawki-showcase-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(79, 124, 255, 0.10);
    border: 1px solid rgba(79, 124, 255, 0.25);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.dawki-showcase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.6);
}
.dawki-showcase-title {
    font-size: clamp(30px, 4.4vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
    color: #ffffff;
}
.dawki-showcase-title span {
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-showcase-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* Tab bar */
.dawki-showcase-tabs-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 56px;
    max-width: 100%;
}
.dawki-showcase-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.dawki-showcase-tabs::-webkit-scrollbar { display: none; }

.dawki-showcase-tab {
    flex: 0 0 auto;
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.dawki-showcase-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transform: translateY(-1px);
}
.dawki-showcase-tab.is-active {
    background: #ffffff;
    color: #0a1628;
    border-color: #ffffff;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

.dawki-showcase-nav {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.dawki-showcase-nav:hover {
    background: rgba(91, 158, 255, 0.18);
    border-color: rgba(91, 158, 255, 0.45);
    transform: translateY(-2px);
}

/* Stage */
.dawki-showcase-stage {
    position: relative;
    height: 620px;
    perspective: 1400px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Don't clip the tilted side cards that peek out to the edges */
    overflow: visible;
}

/* Card */
.dawki-showcase-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(540px, 90vw);
    height: 560px;
    margin-left: calc(min(540px, 90vw) / -2);
    border-radius: 28px;
    padding: 38px 38px 0;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.45),
        0 12px 28px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    cursor: pointer;
    /* Pivot from bottom so the tilt looks like cards "leaning back" naturally */
    transform-origin: 50% 90%;
    will-change: transform, opacity;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dawki-showcase-card.is-active {
    cursor: default;
}

.dawki-showcase-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.dawki-showcase-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}
.dawki-showcase-card-icon svg { width: 26px; height: 26px; }
.dawki-showcase-card-name {
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 800;
    color: #1f2937;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.4px;
}
.dawki-showcase-card-tagline {
    font-size: 15px;
    color: #374151;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 12px;
}
.dawki-showcase-card-desc {
    font-size: 14px;
    color: rgba(31, 41, 55, 0.78);
    line-height: 1.6;
    margin: 0 0 22px;
}

/* Stats */
.dawki-showcase-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    margin-bottom: 22px;
}
.dawki-showcase-card-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dawki-showcase-card-stats strong {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
}
.dawki-showcase-card-stats span {
    font-size: 12px;
    color: rgba(31, 41, 55, 0.65);
    font-weight: 500;
}

/* Visual area at bottom */
.dawki-showcase-card-visual {
    flex: 1;
    min-height: 0;
    margin: 0 -38px -0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

/* === Mock visual styles (browser frame, lines, charts, phone) ============ */
.dawki-showcase-mock {
    width: 86%;
    margin-bottom: 0;
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    padding: 14px 18px 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 180px;
    overflow: hidden;
}
.dawki-showcase-mock-bar {
    display: flex;
    gap: 6px;
}
.dawki-showcase-mock-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
}
.dawki-showcase-mock-bar span:nth-child(1) { background: #ff6b6b; }
.dawki-showcase-mock-bar span:nth-child(2) { background: #ffd93d; }
.dawki-showcase-mock-bar span:nth-child(3) { background: #6bcf7f; }
.dawki-showcase-mock-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.dawki-showcase-mock-line {
    height: 8px;
    background: linear-gradient(90deg, #e5e7eb, #f3f4f6);
    border-radius: 4px;
}
.dawki-showcase-mock-line.w-50 { width: 50%; }
.dawki-showcase-mock-line.w-60 { width: 60%; }
.dawki-showcase-mock-line.w-70 { width: 70%; }
.dawki-showcase-mock-line.w-80 { width: 80%; }
.dawki-showcase-mock-line.w-90 { width: 90%; }

.dawki-showcase-mock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 4px;
}
.dawki-showcase-mock-grid > div {
    height: 50px;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-radius: 8px;
}

.dawki-showcase-mock-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.dawki-showcase-mock-products > div {
    height: 80px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fce7f3, #f9a8d4);
}

.dawki-showcase-mock-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 100px;
    padding-top: 10px;
}
.dawki-showcase-mock-chart span {
    flex: 1;
    background: linear-gradient(180deg, #60a5fa, #3b82f6);
    border-radius: 4px 4px 0 0;
}

.dawki-showcase-mock-shapes {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 6px 0;
}
.dawki-showcase-mock-shape {
    width: 60px; height: 60px;
}
.dawki-showcase-mock-shape.s1 { background: #c084fc; border-radius: 14px; }
.dawki-showcase-mock-shape.s2 { background: #a855f7; border-radius: 50%; }
.dawki-showcase-mock-shape.s3 { background: #7c3aed; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }

.dawki-showcase-mock--phone {
    background: transparent;
    box-shadow: none;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
}
.dawki-showcase-mock-phone {
    width: 130px;
    height: 160px;
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    border: 4px solid #1f2937;
    border-bottom: none;
    padding: 22px 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.20);
}
.dawki-showcase-mock-phone-notch {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 6px;
    background: #1f2937;
    border-radius: 4px;
}

.dawki-showcase-mock-chat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dawki-showcase-mock-bubble {
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.dawki-showcase-mock-bubble--in {
    background: #f3f4f6;
    color: #374151;
    align-self: flex-start;
    width: 60%;
}
.dawki-showcase-mock-bubble--out {
    background: linear-gradient(90deg, #f97316, #ea580c);
    color: #ffffff;
    align-self: flex-end;
    width: 70%;
    height: 16px;
}

.dawki-showcase-mock-pipe {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 80px;
}
.dawki-showcase-mock-pipe span {
    flex: 1;
    height: 8px;
    background: linear-gradient(90deg, #06b6d4, #0891b2);
    border-radius: 999px;
    position: relative;
}
.dawki-showcase-mock-pipe span:nth-child(2) { opacity: 0.75; }
.dawki-showcase-mock-pipe span:nth-child(3) { opacity: 0.55; }
.dawki-showcase-mock-pipe span:nth-child(4) { opacity: 0.35; }

@media (max-width: 767px) {
    .dawki-showcase-stage {
        height: 580px;
    }
    .dawki-showcase-card {
        width: min(420px, 88vw);
        margin-left: calc(min(420px, 88vw) / -2);
        height: 540px;
        padding: 26px 24px 0;
    }
    .dawki-showcase-card-name { font-size: 20px; }
    .dawki-showcase-card-stats strong { font-size: 22px; }
    .dawki-showcase-card-visual { margin: 0 -24px 0; }
    .dawki-showcase-mock { padding: 12px 14px 0; }
    .dawki-showcase-tab { padding: 10px 16px; font-size: 13px; }
    .dawki-showcase-nav { width: 38px; height: 38px; }
}
/* === END Home Service Showcase === */

/* === Our Process — premium 3-step flow ====================================
   Heading split (left/right), 3 cards with big gradient numbers + connecting
   arrows + per-card accent gradient + hover lift/glow/shine. JS-driven entrance
   via framer-motion (RevealUp + StaggerWrap/Ch in welcome.tsx). */
.dawki-process {
    position: relative;
    padding: clamp(70px, 9vw, 120px) 0;
    background: linear-gradient(180deg, #f8fafc 0%, #f0f5ff 100%);
    overflow: hidden;
    isolation: isolate;
}

.dawki-process-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.5;
    z-index: 0;
}
.dawki-process-orb--a {
    width: 380px;
    height: 380px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, rgba(91, 158, 255, 0.30) 0%, transparent 70%);
}
.dawki-process-orb--b {
    width: 420px;
    height: 420px;
    bottom: -180px;
    right: -120px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.22) 0%, transparent 70%);
}

.dawki-process > .container {
    position: relative;
    z-index: 1;
}

/* Heading row */
.dawki-process-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 60px;
}
@media (max-width: 991px) {
    .dawki-process-heading {
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: stretch;
    }
}

.dawki-process-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5b9eff 0%, #a855f7 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px rgba(91, 158, 255, 0.35);
}
.dawki-process-pill .dawki-process-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

.dawki-process-title {
    font-size: clamp(30px, 4.4vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0;
    color: #0a1628;
}
.dawki-process-title span {
    color: #94a3b8;
    font-weight: 800;
    margin-left: 6px;
}

.dawki-process-heading-right {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
    justify-self: end;
    max-width: 520px;
}
@media (max-width: 991px) {
    .dawki-process-heading-right { justify-self: start; }
}

.dawki-process-subtitle {
    font-size: 16px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

.dawki-process-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #0a1628;
    color: #ffffff;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                background 0.35s ease,
                box-shadow 0.35s ease;
    align-self: flex-start;
    position: relative;
    overflow: hidden;
}
.dawki-process-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #5b9eff, #a855f7);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
}
.dawki-process-cta:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(10, 22, 40, 0.30),
                0 0 0 4px rgba(91, 158, 255, 0.18);
}
.dawki-process-cta:hover::after { opacity: 1; }
.dawki-process-cta svg {
    transition: transform 0.35s ease;
}
.dawki-process-cta:hover svg {
    transform: translate(2px, -2px);
}

/* Cards grid */
.dawki-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
@media (max-width: 991px) {
    .dawki-process-grid { grid-template-columns: 1fr; gap: 20px; }
}

.dawki-process-card-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 100%;
}

.dawki-process-card {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    padding: 38px 32px 36px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    overflow: hidden;
    width: 100%;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    display: flex;
    flex-direction: column;
}
/* Animated gradient top border */
.dawki-process-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--p-a, #5b9eff), var(--p-b, #a855f7));
}
/* Diagonal shine sweep on hover */
.dawki-process-card-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(91, 158, 255, 0.10) 50%, transparent 70%);
    transform: skewX(-20deg);
    transition: left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}
.dawki-process-card:hover {
    transform: translate3d(0, -10px, 0);
    border-color: rgba(91, 158, 255, 0.30);
    box-shadow: 0 24px 50px var(--p-accent, rgba(91, 158, 255, 0.20)),
                0 8px 20px rgba(15, 23, 42, 0.06);
}
.dawki-process-card:hover .dawki-process-card-shine {
    left: 130%;
}

/* Big gradient number */
.dawki-process-card-num {
    font-size: clamp(80px, 8vw, 120px);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--p-a, #5b9eff) 0%, var(--p-b, #a855f7) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
    position: relative;
    z-index: 2;
}
.dawki-process-card:hover .dawki-process-card-num {
    transform: scale(1.05) translateY(-2px);
}

.dawki-process-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #0a1628;
    margin: 0 0 12px;
    line-height: 1.25;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 2;
}

.dawki-process-card-desc {
    font-size: 15px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
    position: relative;
    z-index: 2;
    flex-grow: 1;
}

/* Connecting arrow between cards */
.dawki-process-arrow {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translate(50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid;
    border-image: linear-gradient(135deg, var(--p-a, #5b9eff), var(--p-b, #a855f7)) 1;
    /* border-image doesn't apply to round borders, fall back to a colored border */
    border-color: rgba(91, 158, 255, 0.45);
    color: #5b9eff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 6px 14px rgba(91, 158, 255, 0.18);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.35s ease,
                color 0.35s ease;
}
.dawki-process-card-wrap:hover .dawki-process-arrow {
    transform: translate(50%, -50%) scale(1.15);
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    border-color: transparent;
}
@media (max-width: 991px) {
    /* On stacked layout, arrow rotates to point down between cards */
    .dawki-process-arrow {
        right: 50%;
        top: auto;
        bottom: -22px;
        transform: translate(50%, 0) rotate(90deg);
    }
    .dawki-process-card-wrap:hover .dawki-process-arrow {
        transform: translate(50%, 0) rotate(90deg) scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dawki-process-card,
    .dawki-process-card-num,
    .dawki-process-card-shine,
    .dawki-process-arrow,
    .dawki-process-cta,
    .dawki-process-cta svg {
        transition: none !important;
    }
    .dawki-process-card:hover { transform: none; }
}
/* === END Our Process === */


/* ===========================================================================
 * Industries → Hotels & Restaurants — Section 1: Hotel Property Dashboard
 * (.dawki-hr-dash-*)  Live KPIs + animated occupancy room grid.
 * =========================================================================== */
.dawki-hr-dash {
    padding: 110px 0 110px;
    background:
        radial-gradient(circle at 12% 15%, rgba(91, 158, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 88% 85%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}
.dawki-hr-dash::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(91, 158, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 158, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.dawki-hr-dash-heading {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
}
.dawki-hr-dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(91, 158, 255, 0.10);
    color: #5b9eff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(91, 158, 255, 0.18);
}
.dawki-hr-dash-pill > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: dawkiHrPulse 1.6s ease-out infinite;
}
@keyframes dawkiHrPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.dawki-hr-dash-title {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: #0a1628;
    margin: 0 0 16px;
}
.dawki-hr-dash-title span {
    background: linear-gradient(135deg, #5b9eff 0%, #a855f7 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-hr-dash-subtitle {
    font-size: 17px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

/* Frame -- the "console" */
.dawki-hr-dash-frame {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #0d1726 0%, #14213a 100%);
    border-radius: 22px;
    overflow: hidden;
    padding: 0;
    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.30),
        0 12px 25px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dawki-hr-dash-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 1px;
}
.dawki-hr-dash-bar-name {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}
.dawki-hr-dash-bar-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #22c55e;
    font-weight: 700;
}
.dawki-hr-dash-bar-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
    animation: dawkiHrBlink 1.2s ease-in-out infinite;
}
@keyframes dawkiHrBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* KPI tiles */
.dawki-hr-dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dawki-hr-dash-kpi {
    padding: 22px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.00) 100%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.dawki-hr-dash-kpi > span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}
.dawki-hr-dash-kpi > strong {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -1px;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}
.dawki-hr-dash-kpi > strong i {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
    font-weight: 600;
    margin-left: 2px;
}
.dawki-hr-dash-kpi > em {
    font-size: 12px;
    color: #22c55e;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Room grid section */
.dawki-hr-dash-rooms {
    padding: 26px 24px 28px;
}
.dawki-hr-dash-rooms-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.dawki-hr-dash-rooms-head > span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.dawki-hr-dash-rooms-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.dawki-hr-dash-rooms-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}
.dawki-hr-dash-rooms-legend i {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
}
.dawki-hr-dash-rooms-legend i.is-occupied  { background: #5b9eff; box-shadow: 0 0 6px rgba(91, 158, 255, 0.5); }
.dawki-hr-dash-rooms-legend i.is-available { background: rgba(255, 255, 255, 0.18); }
.dawki-hr-dash-rooms-legend i.is-arriving  { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.5); }
.dawki-hr-dash-rooms-legend i.is-dirty     { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }

.dawki-hr-dash-rooms-grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 6px;
}
.dawki-hr-dash-room {
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease;
    cursor: pointer;
}
.dawki-hr-dash-room.is-occupied {
    background: linear-gradient(135deg, #5b9eff, #4f7cff);
    box-shadow: 0 0 12px rgba(91, 158, 255, 0.45);
}
.dawki-hr-dash-room.is-available {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.dawki-hr-dash-room.is-arriving {
    background: linear-gradient(135deg, #fbbf24, #f97316);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
    animation: dawkiHrRoom 1.6s ease-in-out infinite;
}
.dawki-hr-dash-room.is-dirty {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}
.dawki-hr-dash-room:hover {
    transform: scale(1.18);
    z-index: 2;
}
@keyframes dawkiHrRoom {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@media (max-width: 991px) {
    .dawki-hr-dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .dawki-hr-dash-rooms-grid { grid-template-columns: repeat(10, 1fr); }
}
@media (max-width: 575px) {
    .dawki-hr-dash { padding: 70px 0 70px; }
    .dawki-hr-dash-kpis { grid-template-columns: 1fr 1fr; }
    .dawki-hr-dash-kpi > strong { font-size: 26px; }
    .dawki-hr-dash-rooms-grid { grid-template-columns: repeat(8, 1fr); }
    .dawki-hr-dash-bar { padding: 12px 16px; }
    .dawki-hr-dash-rooms { padding: 20px 16px 22px; }
}

/* ===========================================================================
 * Industries → Hotels & Restaurants — Section 2: Order Flow
 * (.dawki-hr-flow-*)  6-step horizontal journey with auto-advancing active.
 * =========================================================================== */
.dawki-hr-flow {
    padding: 110px 0 110px;
    background:
        radial-gradient(circle at 90% 10%, rgba(236, 72, 153, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(34, 197, 94, 0.08) 0%, transparent 45%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
    overflow: hidden;
}

.dawki-hr-flow-heading {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 64px;
    position: relative;
    z-index: 2;
}
.dawki-hr-flow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.10), rgba(168, 85, 247, 0.10));
    color: #ec4899;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(236, 72, 153, 0.18);
}
.dawki-hr-flow-pill > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ec4899;
    animation: dawkiHrPulse 1.6s ease-out infinite;
}
.dawki-hr-flow-title {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: #0a1628;
    margin: 0 0 16px;
}
.dawki-hr-flow-title span {
    background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #5b9eff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-hr-flow-subtitle {
    font-size: 17px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

/* Track — horizontal on desktop, stacks on mobile */
.dawki-hr-flow-track {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* Cards */
.dawki-hr-flow-card {
    flex: 1 1 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 22px 18px 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.5s ease,
                border-color 0.5s ease;
}
.dawki-hr-flow-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--fc-a, #5b9eff) 0%, var(--fc-b, #a855f7) 100%);
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 0;
}
.dawki-hr-flow-card > * {
    position: relative;
    z-index: 1;
}
.dawki-hr-flow-card.is-active {
    transform: translateY(-10px) scale(1.04);
    border-color: transparent;
    box-shadow:
        0 24px 50px var(--fc-glow, rgba(91, 158, 255, 0.40)),
        0 8px 18px rgba(15, 23, 42, 0.10);
}
.dawki-hr-flow-card.is-active::before {
    opacity: 1;
}
.dawki-hr-flow-card.is-active .dawki-hr-flow-card-step,
.dawki-hr-flow-card.is-active .dawki-hr-flow-card-title,
.dawki-hr-flow-card.is-active .dawki-hr-flow-card-desc,
.dawki-hr-flow-card.is-active .dawki-hr-flow-card-time { color: #ffffff; }
.dawki-hr-flow-card.is-active .dawki-hr-flow-card-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.30);
}
.dawki-hr-flow-card.is-active .dawki-hr-flow-card-time {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.dawki-hr-flow-card-step {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #94a3b8;
    text-transform: uppercase;
    transition: color 0.35s ease;
}
.dawki-hr-flow-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--fc-a, #5b9eff) 0%, var(--fc-b, #a855f7) 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 14px var(--fc-glow, rgba(91, 158, 255, 0.30));
    transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}
.dawki-hr-flow-card-icon svg {
    width: 22px;
    height: 22px;
}
.dawki-hr-flow-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #0a1628;
    margin: 4px 0 0;
    line-height: 1.3;
    letter-spacing: -0.2px;
    transition: color 0.35s ease;
}
.dawki-hr-flow-card-desc {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.55;
    margin: 0;
    flex-grow: 1;
    transition: color 0.35s ease;
}
.dawki-hr-flow-card-time {
    align-self: flex-start;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #5b9eff;
    background: rgba(91, 158, 255, 0.10);
    padding: 4px 10px;
    border-radius: 999px;
    transition: background 0.35s ease, color 0.35s ease;
}

/* Arrow between cards */
.dawki-hr-flow-arrow {
    align-self: center;
    flex: 0 0 28px;
    height: 28px;
    margin: 0 -2px;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.4s ease, transform 0.4s ease;
}
.dawki-hr-flow-arrow svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 1199px) {
    .dawki-hr-flow-track {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
    .dawki-hr-flow-arrow { display: none; }
    .dawki-hr-flow-card.is-active { transform: translateY(-6px) scale(1.02); }
}
@media (max-width: 767px) {
    .dawki-hr-flow-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .dawki-hr-flow { padding: 70px 0 70px; }
    .dawki-hr-flow-track { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .dawki-hr-dash-pill > span,
    .dawki-hr-flow-pill > span,
    .dawki-hr-dash-bar-pulse,
    .dawki-hr-dash-room { animation: none !important; }
    .dawki-hr-flow-card,
    .dawki-hr-flow-card-icon,
    .dawki-hr-flow-card-time,
    .dawki-hr-flow-arrow,
    .dawki-hr-dash-room { transition: none !important; }
    .dawki-hr-flow-card.is-active { transform: none; }
}
/* === END Hotels & Restaurants === */


/* ===========================================================================
 * Industries → Real Estate — Section 1: Property Explorer (Map + Listing)
 * (.dawki-re-explorer-*)  Map with pulsing pins + auto-cycling listing card.
 * =========================================================================== */
.dawki-re-explorer {
    padding: 110px 0 110px;
    background:
        radial-gradient(circle at 12% 15%, rgba(91, 158, 255, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 88% 85%, rgba(34, 197, 94, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.dawki-re-explorer-heading {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
}
.dawki-re-explorer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(91, 158, 255, 0.10);
    color: #5b9eff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(91, 158, 255, 0.18);
}
.dawki-re-explorer-pill > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: dawkiRePulseDot 1.6s ease-out infinite;
}
@keyframes dawkiRePulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.dawki-re-explorer-title {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: #0a1628;
    margin: 0 0 16px;
}
.dawki-re-explorer-title span {
    background: linear-gradient(135deg, #5b9eff 0%, #22c55e 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-re-explorer-subtitle {
    font-size: 17px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

/* Frame -- the marketplace console */
.dawki-re-explorer-frame {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.18),
        0 12px 25px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.dawki-re-explorer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    background: linear-gradient(90deg, #0d1726 0%, #14213a 100%);
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.6px;
    flex-wrap: wrap;
    gap: 10px;
}
.dawki-re-explorer-bar-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}
.dawki-re-explorer-bar-name > i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
    animation: dawkiReBarBlink 1.2s ease-in-out infinite;
}
@keyframes dawkiReBarBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.dawki-re-explorer-bar-meta {
    display: inline-flex;
    gap: 18px;
    color: rgba(255, 255, 255, 0.65);
    flex-wrap: wrap;
}
.dawki-re-explorer-bar-meta strong {
    color: #ffffff;
    font-weight: 700;
}

.dawki-re-explorer-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    min-height: 460px;
}

/* MAP CANVAS */
.dawki-re-explorer-map {
    position: relative;
    background: #eaf3ff;
    overflow: hidden;
    border-right: 1px solid rgba(15, 23, 42, 0.06);
}
.dawki-re-explorer-map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(91, 158, 255, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 158, 255, 0.10) 1px, transparent 1px);
    background-size: 40px 40px;
}
.dawki-re-explorer-road {
    position: absolute;
    background: linear-gradient(90deg, rgba(91, 158, 255, 0.0), rgba(91, 158, 255, 0.35), rgba(91, 158, 255, 0.0));
    box-shadow: 0 0 8px rgba(91, 158, 255, 0.25);
}
.dawki-re-explorer-road-h { left: 0; right: 0; height: 4px; }
.dawki-re-explorer-road-v {
    top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, rgba(91, 158, 255, 0.0), rgba(91, 158, 255, 0.35), rgba(91, 158, 255, 0.0));
}

/* Pulsing pin */
.dawki-re-explorer-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
    cursor: pointer;
}
.dawki-re-explorer-pin > i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #5b9eff;
    border: 3px solid #ffffff;
    box-shadow:
        0 0 0 0 rgba(91, 158, 255, 0.55),
        0 4px 10px rgba(15, 23, 42, 0.18);
    animation: dawkiReMapPulse 2.2s ease-out infinite;
}
.dawki-re-explorer-pin > em {
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    color: #0a1628;
    background: #ffffff;
    padding: 3px 8px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
    border: 1px solid rgba(15, 23, 42, 0.06);
    transform: translateY(-2px);
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.dawki-re-explorer-pin.is-active > i {
    background: #ec4899;
    box-shadow:
        0 0 0 6px rgba(236, 72, 153, 0.20),
        0 0 18px rgba(236, 72, 153, 0.55);
    transform: scale(1.25);
}
.dawki-re-explorer-pin.is-active > em {
    background: linear-gradient(135deg, #ec4899, #a855f7);
    color: #ffffff;
    border-color: transparent;
}
@keyframes dawkiReMapPulse {
    0%   { box-shadow: 0 0 0 0 rgba(91, 158, 255, 0.55), 0 4px 10px rgba(15, 23, 42, 0.18); }
    70%  { box-shadow: 0 0 0 14px rgba(91, 158, 255, 0), 0 4px 10px rgba(15, 23, 42, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(91, 158, 255, 0), 0 4px 10px rgba(15, 23, 42, 0.18); }
}
.dawki-re-explorer-compass {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    font-size: 11px;
    font-weight: 800;
    color: #ec4899;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10);
}
.dawki-re-explorer-compass::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 14px;
    background: linear-gradient(180deg, #ec4899, transparent);
}

/* LISTING CARD */
.dawki-re-explorer-card {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #ffffff;
}
.dawki-re-explorer-card-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}
.dawki-re-explorer-card-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.18) 0%, transparent 50%),
        linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.30) 100%);
}
.dawki-re-explorer-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    z-index: 2;
}
.dawki-re-explorer-card-badge.is-new        { background: #22c55e; }
.dawki-re-explorer-card-badge.is-pending    { background: #f97316; }
.dawki-re-explorer-card-badge.is-for-sale   { background: #5b9eff; }
.dawki-re-explorer-card-badge.is-open-house { background: #ec4899; }

.dawki-re-explorer-card-photo-meta {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}
.dawki-re-explorer-card-photo-meta > i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-block;
}

.dawki-re-explorer-card-body {
    padding: 18px 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dawki-re-explorer-card-price {
    font-size: 30px;
    font-weight: 800;
    color: #0a1628;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -0.8px;
    line-height: 1;
}
.dawki-re-explorer-card-price > i {
    font-size: 16px;
    color: #5b9eff;
    font-style: normal;
    margin-left: 2px;
    font-weight: 700;
}
.dawki-re-explorer-card-addr {
    font-size: 17px;
    font-weight: 700;
    color: #0a1628;
    margin: 6px 0 0;
}
.dawki-re-explorer-card-city {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
}
.dawki-re-explorer-card-stats {
    display: flex;
    gap: 14px;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    list-style: none;
    padding-left: 0;
}
.dawki-re-explorer-card-stats li {
    display: inline-flex;
    flex-direction: column;
    font-size: 12px;
    color: #64748b;
    text-transform: lowercase;
    letter-spacing: 0.2px;
}
.dawki-re-explorer-card-stats li strong {
    font-size: 18px;
    color: #0a1628;
    font-weight: 800;
    margin-bottom: 2px;
}
.dawki-re-explorer-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.dawki-re-explorer-card-cta {
    flex: 1;
    text-align: center;
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #5b9eff, #4f7cff);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(91, 158, 255, 0.30);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dawki-re-explorer-card-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(91, 158, 255, 0.40);
}
.dawki-re-explorer-card-fav {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(236, 72, 153, 0.10);
    color: #ec4899;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.dawki-re-explorer-card-fav:hover {
    background: #ec4899;
    color: #ffffff;
}

@media (max-width: 991px) {
    .dawki-re-explorer-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .dawki-re-explorer-map {
        min-height: 360px;
        border-right: 0;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }
}
@media (max-width: 575px) {
    .dawki-re-explorer { padding: 70px 0 70px; }
    .dawki-re-explorer-bar { padding: 12px 16px; font-size: 11px; }
    .dawki-re-explorer-bar-meta { gap: 12px; }
    .dawki-re-explorer-card-price { font-size: 26px; }
    .dawki-re-explorer-pin > em { font-size: 9.5px; padding: 2px 6px; }
}

/* ===========================================================================
 * Industries → Real Estate — Section 2: Deal Pipeline
 * (.dawki-re-pipe-*)  5-column kanban with auto-advancing "hot" indicator.
 * =========================================================================== */
.dawki-re-pipe {
    padding: 110px 0 110px;
    background:
        radial-gradient(circle at 90% 12%, rgba(168, 85, 247, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 8% 90%, rgba(91, 158, 255, 0.08) 0%, transparent 45%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
    overflow: hidden;
}

.dawki-re-pipe-heading {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 64px;
    position: relative;
    z-index: 2;
}
.dawki-re-pipe-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.10), rgba(91, 158, 255, 0.10));
    color: #a855f7;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(168, 85, 247, 0.18);
}
.dawki-re-pipe-pill > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a855f7;
    animation: dawkiRePulseDot 1.6s ease-out infinite;
}
.dawki-re-pipe-title {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: #0a1628;
    margin: 0 0 16px;
}
.dawki-re-pipe-title span {
    background: linear-gradient(135deg, #a855f7 0%, #5b9eff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-re-pipe-subtitle {
    font-size: 17px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

.dawki-re-pipe-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    position: relative;
    z-index: 2;
}

.dawki-re-pipe-col {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-top: 3px solid var(--re-accent, #5b9eff);
    padding: 16px 14px 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.45s ease;
    min-height: 320px;
}
.dawki-re-pipe-col.is-hot {
    transform: translateY(-8px);
    box-shadow:
        0 24px 50px var(--re-glow, rgba(91, 158, 255, 0.40)),
        0 8px 18px rgba(15, 23, 42, 0.08);
    z-index: 2;
}

.dawki-re-pipe-col-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.10);
}
.dawki-re-pipe-col-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--re-accent, #5b9eff);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.dawki-re-pipe-col-count {
    display: block;
    margin-top: 4px;
    font-size: 22px;
    font-weight: 800;
    color: #0a1628;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -0.5px;
    line-height: 1;
}
.dawki-re-pipe-col-value {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: var(--re-accent, #5b9eff);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px var(--re-glow, rgba(91, 158, 255, 0.30));
}

/* Deal cards */
.dawki-re-pipe-card {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 12px;
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.dawki-re-pipe-col.is-hot .dawki-re-pipe-card {
    transform: translateX(2px);
}
.dawki-re-pipe-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}
.dawki-re-pipe-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dawki-re-pipe-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--re-accent, #5b9eff), #4f7cff);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px var(--re-glow, rgba(91, 158, 255, 0.30));
}
.dawki-re-pipe-card-price {
    font-size: 13px;
    font-weight: 800;
    color: #0a1628;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -0.3px;
}
.dawki-re-pipe-card-addr {
    font-size: 13.5px;
    font-weight: 700;
    color: #0a1628;
    line-height: 1.3;
}
.dawki-re-pipe-card-agent {
    font-size: 11.5px;
    color: #64748b;
    letter-spacing: 0.2px;
}
.dawki-re-pipe-card-bar {
    margin-top: 4px;
    height: 4px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.dawki-re-pipe-card-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--re-accent, #5b9eff), #4f7cff);
    border-radius: 999px;
    transition: width 0.6s ease;
}

/* HOT badge */
.dawki-re-pipe-col-pulse {
    position: absolute;
    top: -10px;
    right: 10px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.40);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    animation: dawkiRePipeHot 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.dawki-re-pipe-col-pulse > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
    animation: dawkiReBarBlink 0.9s ease-in-out infinite;
}
@keyframes dawkiRePipeHot {
    from { opacity: 0; transform: translateY(-6px) scale(0.8); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1199px) {
    .dawki-re-pipe-board {
        grid-template-columns: repeat(3, 1fr);
    }
    .dawki-re-pipe-col.is-hot { transform: translateY(-4px); }
}
@media (max-width: 767px) {
    .dawki-re-pipe-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .dawki-re-pipe { padding: 70px 0 70px; }
    .dawki-re-pipe-board { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .dawki-re-explorer-pin > i,
    .dawki-re-explorer-bar-name > i,
    .dawki-re-explorer-pill > span,
    .dawki-re-pipe-pill > span,
    .dawki-re-pipe-col-pulse,
    .dawki-re-pipe-col-pulse > i { animation: none !important; }
    .dawki-re-pipe-col,
    .dawki-re-pipe-card,
    .dawki-re-explorer-card-cta { transition: none !important; }
    .dawki-re-pipe-col.is-hot { transform: none; }
}
/* === END Real Estate === */


/* ===========================================================================
 * Industries → Performance Management — Section 1: OKR Cascade Tree
 * (.dawki-pm-okr-*)  Org-tree visualization Company → Departments → KRs.
 * =========================================================================== */
.dawki-pm-okr {
    padding: 110px 0 110px;
    background:
        radial-gradient(circle at 14% 18%, rgba(91, 158, 255, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 86% 82%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.dawki-pm-okr-heading {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
}
.dawki-pm-okr-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(91, 158, 255, 0.10);
    color: #5b9eff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(91, 158, 255, 0.18);
}
.dawki-pm-okr-pill > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: dawkiPmPulse 1.6s ease-out infinite;
}
@keyframes dawkiPmPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.dawki-pm-okr-title {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: #0a1628;
    margin: 0 0 16px;
}
.dawki-pm-okr-title span {
    background: linear-gradient(135deg, #5b9eff 0%, #a855f7 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-pm-okr-subtitle {
    font-size: 17px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

/* Frame */
.dawki-pm-okr-frame {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #0d1726 0%, #14213a 100%);
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.30),
        0 12px 25px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 0 36px;
}
.dawki-pm-okr-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.6px;
    flex-wrap: wrap;
    gap: 10px;
}
.dawki-pm-okr-bar-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #22c55e;
    font-weight: 700;
}
.dawki-pm-okr-bar-meta > span > i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
    animation: dawkiPmBlink 1.2s ease-in-out infinite;
}
@keyframes dawkiPmBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.dawki-pm-okr-bar-stats {
    display: inline-flex;
    gap: 20px;
    color: rgba(255, 255, 255, 0.65);
    flex-wrap: wrap;
}
.dawki-pm-okr-bar-stats strong {
    color: #ffffff;
    font-weight: 700;
}

.dawki-pm-okr-tree {
    padding: 36px 28px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    position: relative;
}

/* Company row */
.dawki-pm-okr-row {
    display: flex;
    justify-content: center;
    gap: 18px;
}
.dawki-pm-okr-row-dept { flex-wrap: wrap; }
.dawki-pm-okr-row-kr   { flex-wrap: wrap; }

.dawki-pm-okr-company {
    display: flex;
    gap: 22px;
    align-items: center;
    padding: 22px 28px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(91, 158, 255, 0.10), rgba(168, 85, 247, 0.10));
    border: 1px solid rgba(255, 255, 255, 0.10);
    max-width: 720px;
    width: 100%;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.20);
}
.dawki-pm-okr-company-ring {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}
.dawki-pm-okr-company-ring svg {
    width: 100%;
    height: 100%;
}
.dawki-pm-okr-company-pct {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -0.5px;
}
.dawki-pm-okr-company-pct > i {
    font-size: 14px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.55);
    margin-left: 1px;
    font-weight: 600;
}
.dawki-pm-okr-company-body { flex: 1; }
.dawki-pm-okr-company-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #5b9eff;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.dawki-pm-okr-company-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}
.dawki-pm-okr-company-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
    margin: 0;
}

/* Connectors */
.dawki-pm-okr-connectors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    height: 32px;
    position: relative;
    pointer-events: none;
}
.dawki-pm-okr-connectors > span {
    position: relative;
}
.dawki-pm-okr-connectors > span::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: linear-gradient(180deg, rgba(91, 158, 255, 0.45), rgba(168, 85, 247, 0.05));
    transform: translateX(-50%);
}
.dawki-pm-okr-connectors-down { grid-template-columns: repeat(6, 1fr); }
.dawki-pm-okr-connectors-down > span::before {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.45), rgba(91, 158, 255, 0.05));
}

/* Department cards */
.dawki-pm-okr-dept {
    flex: 1 1 220px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top: 3px solid var(--n-accent, #5b9eff);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25), 0 0 0 0 var(--n-glow, transparent);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.dawki-pm-okr-dept:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.30), 0 0 18px var(--n-glow, rgba(91, 158, 255, 0.30));
}
.dawki-pm-okr-dept-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.dawki-pm-okr-dept-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.2px;
}
.dawki-pm-okr-dept-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.3px;
}

/* Status pill */
.dawki-pm-okr-status {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}
.dawki-pm-okr-status.is-on-track  { background: rgba(34, 197, 94, 0.15);  color: #4ade80; }
.dawki-pm-okr-status.is-at-risk   { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
.dawki-pm-okr-status.is-off-track { background: rgba(239, 68, 68, 0.15);  color: #f87171; }

/* Progress line (used in dept + KR) */
.dawki-pm-okr-bar-line {
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.dawki-pm-okr-bar-line > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--n-accent, #5b9eff), #a855f7);
    border-radius: 999px;
    transition: width 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 10px var(--n-glow, rgba(91, 158, 255, 0.40));
}

/* KR mini cards */
.dawki-pm-okr-kr {
    flex: 1 1 200px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 0.35s ease, transform 0.35s ease;
}
.dawki-pm-okr-kr:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}
.dawki-pm-okr-kr-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dawki-pm-okr-kr-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(91, 158, 255, 0.30);
}
.dawki-pm-okr-kr-title {
    font-size: 13px;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}
.dawki-pm-okr-kr-pct {
    align-self: flex-end;
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.3px;
}

@media (max-width: 991px) {
    .dawki-pm-okr-tree { padding: 28px 16px 8px; }
    .dawki-pm-okr-connectors { display: none; }
    .dawki-pm-okr-row-kr { gap: 10px; }
    .dawki-pm-okr-kr { flex-basis: calc(50% - 5px); }
}
@media (max-width: 575px) {
    .dawki-pm-okr { padding: 70px 0 70px; }
    .dawki-pm-okr-company { padding: 18px 18px; gap: 16px; }
    .dawki-pm-okr-company-ring { width: 76px; height: 76px; }
    .dawki-pm-okr-company-pct  { font-size: 22px; }
    .dawki-pm-okr-company-title { font-size: 16px; }
    .dawki-pm-okr-row-dept,
    .dawki-pm-okr-row-kr { gap: 10px; }
    .dawki-pm-okr-dept   { flex-basis: 100%; }
    .dawki-pm-okr-kr     { flex-basis: 100%; }
}

/* ===========================================================================
 * Industries → Performance Management — Section 2: 360° Feedback Radar
 * (.dawki-pm-radar-*)  Polar SVG chart + side panel of AI-summarised insights.
 * =========================================================================== */
.dawki-pm-radar {
    padding: 110px 0 110px;
    background:
        radial-gradient(circle at 90% 12%, rgba(34, 197, 94, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 8% 90%, rgba(168, 85, 247, 0.08) 0%, transparent 45%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
    overflow: hidden;
}
.dawki-pm-radar-heading {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 64px;
    position: relative;
    z-index: 2;
}
.dawki-pm-radar-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.10), rgba(91, 158, 255, 0.10));
    color: #22c55e;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(34, 197, 94, 0.18);
}
.dawki-pm-radar-pill > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: dawkiPmPulse 1.6s ease-out infinite;
}
.dawki-pm-radar-title {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: #0a1628;
    margin: 0 0 16px;
}
.dawki-pm-radar-title span {
    background: linear-gradient(135deg, #22c55e 0%, #5b9eff 50%, #a855f7 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-pm-radar-subtitle {
    font-size: 17px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

/* Frame */
.dawki-pm-radar-frame {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    background: linear-gradient(180deg, #0d1726 0%, #14213a 100%);
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.30),
        0 12px 25px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}

/* LEFT — radar stage */
.dawki-pm-radar-stage {
    padding: 28px 24px 22px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dawki-pm-radar-stage-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.dawki-pm-radar-stage-name {
    display: block;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.2px;
}
.dawki-pm-radar-stage-meta {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    margin-top: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.4px;
}
.dawki-pm-radar-stage-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.dawki-pm-radar-stage-score > strong {
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1;
    letter-spacing: -0.8px;
    background: linear-gradient(135deg, #22c55e, #5b9eff);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-pm-radar-stage-score > em {
    font-style: normal;
    font-size: 11.5px;
    color: #4ade80;
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 0.3px;
}

.dawki-pm-radar-svg {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    margin: 6px auto 0;
    display: block;
}

.dawki-pm-radar-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 8px;
}
.dawki-pm-radar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--leg-tag, rgba(255, 255, 255, 0.05));
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.dawki-pm-radar-legend-item > i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--leg-c, #5b9eff);
    box-shadow: 0 0 8px var(--leg-c, #5b9eff);
}
.dawki-pm-radar-legend-item:hover {
    transform: translateY(-1px);
    color: #ffffff;
}
.dawki-pm-radar-legend-item.is-active {
    color: #ffffff;
    border-color: var(--leg-c, #5b9eff);
    box-shadow: 0 4px 12px var(--leg-tag, rgba(91, 158, 255, 0.20));
}

/* RIGHT — side panel */
.dawki-pm-radar-side {
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(255, 255, 255, 0.02);
}
.dawki-pm-radar-side-head h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 8px 0 0;
    letter-spacing: -0.3px;
}
.dawki-pm-radar-side-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: #a855f7;
    background: rgba(168, 85, 247, 0.14);
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}

.dawki-pm-radar-side-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dawki-pm-radar-side-row {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dawki-pm-radar-side-row p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    line-height: 1.55;
}
.dawki-pm-radar-side-row-tag {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
}
.dawki-pm-radar-side-row-tag.is-strength { background: rgba(34, 197, 94, 0.18);  color: #4ade80; }
.dawki-pm-radar-side-row-tag.is-growth   { background: rgba(91, 158, 255, 0.18); color: #93c5fd; }
.dawki-pm-radar-side-row-tag.is-watch    { background: rgba(249, 115, 22, 0.18); color: #fb923c; }

.dawki-pm-radar-side-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    gap: 12px;
    flex-wrap: wrap;
}
.dawki-pm-radar-side-foot > div {
    display: flex;
    flex-direction: column;
}
.dawki-pm-radar-side-foot span {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 600;
}
.dawki-pm-radar-side-foot strong {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    margin-top: 2px;
    letter-spacing: -0.5px;
    line-height: 1;
}
.dawki-pm-radar-side-cta {
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(168, 85, 247, 0.40);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-transform: none;
    letter-spacing: 0;
}
.dawki-pm-radar-side-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(168, 85, 247, 0.50);
}

@media (max-width: 991px) {
    .dawki-pm-radar-frame {
        grid-template-columns: 1fr;
    }
    .dawki-pm-radar-stage {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
}
@media (max-width: 480px) {
    .dawki-pm-radar { padding: 70px 0 70px; }
    .dawki-pm-radar-stage,
    .dawki-pm-radar-side { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .dawki-pm-okr-pill > span,
    .dawki-pm-okr-bar-meta > span > i,
    .dawki-pm-radar-pill > span { animation: none !important; }
    .dawki-pm-okr-dept,
    .dawki-pm-okr-kr,
    .dawki-pm-radar-legend-item,
    .dawki-pm-radar-side-cta,
    .dawki-pm-okr-bar-line > span { transition: none !important; }
    .dawki-pm-okr-dept:hover,
    .dawki-pm-okr-kr:hover { transform: none; }
}
/* === END Performance Management === */


/* ===========================================================================
 * Industries → Financial Apps — Section 1: Live Portfolio Console
 * (.dawki-fin-port-*)  Trading dashboard with chart + ticker + positions.
 * =========================================================================== */
.dawki-fin-port {
    padding: 110px 0 110px;
    background:
        radial-gradient(circle at 14% 18%, rgba(34, 197, 94, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 86% 82%, rgba(91, 158, 255, 0.10) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.dawki-fin-port-heading {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
}
.dawki-fin-port-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.10);
    color: #22c55e;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(34, 197, 94, 0.18);
}
.dawki-fin-port-pill > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: dawkiFinPulse 1.6s ease-out infinite;
}
@keyframes dawkiFinPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.dawki-fin-port-title {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: #0a1628;
    margin: 0 0 16px;
}
.dawki-fin-port-title span {
    background: linear-gradient(135deg, #22c55e 0%, #5b9eff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-fin-port-subtitle {
    font-size: 17px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

/* Console frame */
.dawki-fin-port-frame {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #0a1428 0%, #11203a 100%);
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.30),
        0 12px 25px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Live ticker strip */
.dawki-fin-port-ticker {
    overflow: hidden;
    background: rgba(34, 197, 94, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 0;
}
.dawki-fin-port-ticker-track {
    display: inline-flex;
    gap: 32px;
    white-space: nowrap;
    animation: dawkiFinTickerScroll 38s linear infinite;
    will-change: transform;
}
.dawki-fin-port-ticker-track > span {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.dawki-fin-port-ticker-track > span.is-up   { color: #4ade80; }
.dawki-fin-port-ticker-track > span.is-down { color: #f87171; }
@keyframes dawkiFinTickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.dawki-fin-port-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    flex-wrap: wrap;
    gap: 8px;
}
.dawki-fin-port-bar-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4ade80;
    font-weight: 700;
}
.dawki-fin-port-bar-name > i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
    animation: dawkiFinBlink 1.2s ease-in-out infinite;
}
@keyframes dawkiFinBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.dawki-fin-port-bar-meta {
    color: rgba(255, 255, 255, 0.55);
}

/* KPI tiles */
.dawki-fin-port-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dawki-fin-port-kpi {
    padding: 22px 22px;
    background: rgba(10, 20, 40, 0.55);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dawki-fin-port-kpi > span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}
.dawki-fin-port-kpi > strong {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -0.8px;
    line-height: 1;
}
.dawki-fin-port-kpi > strong.is-pos { color: #4ade80; }
.dawki-fin-port-kpi > strong.is-neg { color: #f87171; }
.dawki-fin-port-kpi > em {
    font-size: 12px;
    color: #4ade80;
    font-style: normal;
    font-weight: 600;
}

/* Chart + Positions grid */
.dawki-fin-port-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
}

/* Chart */
.dawki-fin-port-chart {
    padding: 22px 22px 26px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dawki-fin-port-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.dawki-fin-port-chart-label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}
.dawki-fin-port-chart-value {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -0.8px;
    line-height: 1;
}
.dawki-fin-port-chart-tabs {
    display: inline-flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.04);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.dawki-fin-port-chart-tabs > span {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.dawki-fin-port-chart-tabs > span:hover { color: #ffffff; }
.dawki-fin-port-chart-tabs > span.is-active {
    background: linear-gradient(135deg, #5b9eff, #22c55e);
    color: #ffffff;
}
.dawki-fin-port-chart-svg {
    width: 100%;
    height: 220px;
    display: block;
}

/* Positions */
.dawki-fin-port-positions {
    padding: 22px 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dawki-fin-port-positions-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}
.dawki-fin-port-positions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow: hidden;
}
.dawki-fin-port-pos {
    display: grid;
    grid-template-columns: 60px 1fr 70px 60px;
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dawki-fin-port-pos.is-active {
    background: rgba(91, 158, 255, 0.12);
    border-color: rgba(91, 158, 255, 0.45);
    transform: translateX(3px);
    box-shadow: 0 4px 14px rgba(91, 158, 255, 0.20);
}
.dawki-fin-port-pos-sym {
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}
.dawki-fin-port-pos-name {
    color: rgba(255, 255, 255, 0.55);
    font-family: inherit;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dawki-fin-port-pos-chg {
    text-align: right;
    font-weight: 700;
}
.dawki-fin-port-pos-chg.is-pos { color: #4ade80; }
.dawki-fin-port-pos-chg.is-neg { color: #f87171; }
.dawki-fin-port-pos-side {
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.dawki-fin-port-pos-side.is-buy  { background: rgba(34, 197, 94, 0.15);  color: #4ade80; }
.dawki-fin-port-pos-side.is-sell { background: rgba(239, 68, 68, 0.15);  color: #f87171; }
.dawki-fin-port-pos-side.is-hold { background: rgba(91, 158, 255, 0.15); color: #93c5fd; }

@media (max-width: 991px) {
    .dawki-fin-port-grid { grid-template-columns: 1fr; }
    .dawki-fin-port-chart { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .dawki-fin-port-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .dawki-fin-port { padding: 70px 0 70px; }
    .dawki-fin-port-kpis { grid-template-columns: 1fr 1fr; }
    .dawki-fin-port-kpi > strong { font-size: 22px; }
    .dawki-fin-port-pos { grid-template-columns: 50px 1fr 60px 50px; padding: 8px; }
    .dawki-fin-port-pos-name { font-size: 11px; }
    .dawki-fin-port-bar { padding: 10px 16px; }
}

/* ===========================================================================
 * Industries → Financial Apps — Section 2: AI Fraud Defense
 * (.dawki-fin-fraud-*)  3-column pipeline: incoming → AI scoring → verdict.
 * =========================================================================== */
.dawki-fin-fraud {
    padding: 110px 0 110px;
    background:
        radial-gradient(circle at 90% 12%, rgba(239, 68, 68, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 8% 90%, rgba(168, 85, 247, 0.08) 0%, transparent 45%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
    overflow: hidden;
}
.dawki-fin-fraud-heading {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
}
.dawki-fin-fraud-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.10), rgba(168, 85, 247, 0.10));
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(239, 68, 68, 0.18);
}
.dawki-fin-fraud-pill > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: dawkiFinPulse 1.6s ease-out infinite;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
}
.dawki-fin-fraud-title {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: #0a1628;
    margin: 0 0 16px;
}
.dawki-fin-fraud-title span {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #a855f7 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.dawki-fin-fraud-subtitle {
    font-size: 17px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

.dawki-fin-fraud-frame {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #0a1428 0%, #14213a 100%);
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.30),
        0 12px 25px rgba(15, 23, 42, 0.18);
}

.dawki-fin-fraud-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
}
.dawki-fin-fraud-stat {
    padding: 20px 22px;
    background: rgba(10, 20, 40, 0.55);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dawki-fin-fraud-stat > span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 1.1px;
    text-transform: uppercase;
    font-weight: 600;
}
.dawki-fin-fraud-stat > strong {
    font-size: 26px;
    color: #ffffff;
    font-weight: 800;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -0.6px;
    line-height: 1;
}
.dawki-fin-fraud-stat > strong > i {
    font-size: 14px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.55);
    margin-left: 2px;
}
.dawki-fin-fraud-stat > strong.is-bad  { color: #f87171; }
.dawki-fin-fraud-stat > strong.is-warn { color: #fb923c; }
.dawki-fin-fraud-stat > strong.is-good { color: #4ade80; }

/* Pipeline columns */
.dawki-fin-fraud-pipe {
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.9fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
}
.dawki-fin-fraud-col {
    padding: 22px 20px 24px;
    background: rgba(10, 20, 40, 0.55);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 380px;
}
.dawki-fin-fraud-col-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: #93c5fd;
    text-transform: uppercase;
}

.dawki-fin-fraud-stream {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dawki-fin-fraud-row {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
}
.dawki-fin-fraud-row-merch {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    grid-column: 1 / 2;
}
.dawki-fin-fraud-row-amt {
    color: #4ade80;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 800;
    grid-column: 2 / 3;
    text-align: right;
}
.dawki-fin-fraud-row-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    grid-column: 1 / 3;
    letter-spacing: 0.3px;
}

/* AI scoring card */
.dawki-fin-fraud-col-score {
    border-left: 1px dashed rgba(255, 255, 255, 0.10);
    border-right: 1px dashed rgba(255, 255, 255, 0.10);
}
.dawki-fin-fraud-score {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.10), rgba(91, 158, 255, 0.06));
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 14px;
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 12px 26px rgba(168, 85, 247, 0.15);
}
.dawki-fin-fraud-score-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.dawki-fin-fraud-score-head > span {
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
}
.dawki-fin-fraud-score-head > strong {
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.3px;
}
.dawki-fin-fraud-score-meter {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dawki-fin-fraud-score-meter-bar {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.dawki-fin-fraud-score-meter-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s ease;
}
.dawki-fin-fraud-score-meter-bar > span.is-good { background: linear-gradient(90deg, #4ade80, #22c55e); }
.dawki-fin-fraud-score-meter-bar > span.is-warn { background: linear-gradient(90deg, #fbbf24, #f97316); }
.dawki-fin-fraud-score-meter-bar > span.is-bad  { background: linear-gradient(90deg, #f87171, #ef4444); }

.dawki-fin-fraud-score-meter > strong {
    font-size: 22px;
    font-weight: 800;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -0.5px;
    min-width: 40px;
    text-align: right;
}
.dawki-fin-fraud-score-meter > strong.is-good { color: #4ade80; }
.dawki-fin-fraud-score-meter > strong.is-warn { color: #fb923c; }
.dawki-fin-fraud-score-meter > strong.is-bad  { color: #f87171; }

.dawki-fin-fraud-score-reasons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dawki-fin-fraud-score-reasons li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px;
    line-height: 1.4;
}
.dawki-fin-fraud-score-reasons li > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a855f7;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.6);
}

/* Verdict gates */
.dawki-fin-fraud-col-verdict {
    gap: 14px;
}
.dawki-fin-fraud-gate {
    border-radius: 14px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.45s ease,
                border-color 0.45s ease,
                background 0.45s ease;
}
.dawki-fin-fraud-gate > span {
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.8px;
    grid-column: 1 / 2;
}
.dawki-fin-fraud-gate > strong {
    font-size: 22px;
    font-weight: 800;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
    line-height: 1;
}
.dawki-fin-fraud-gate > em {
    grid-column: 1 / 2;
    font-style: normal;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.3px;
}

.dawki-fin-fraud-gate.is-good { background: rgba(34, 197, 94, 0.07);  border-color: rgba(34, 197, 94, 0.20); }
.dawki-fin-fraud-gate.is-good > strong { color: #4ade80; }
.dawki-fin-fraud-gate.is-warn { background: rgba(249, 115, 22, 0.07); border-color: rgba(249, 115, 22, 0.20); }
.dawki-fin-fraud-gate.is-warn > strong { color: #fb923c; }
.dawki-fin-fraud-gate.is-bad  { background: rgba(239, 68, 68, 0.07);  border-color: rgba(239, 68, 68, 0.20); }
.dawki-fin-fraud-gate.is-bad  > strong { color: #f87171; }

.dawki-fin-fraud-gate.is-active.is-good {
    transform: translateX(6px) scale(1.02);
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.55);
    box-shadow: 0 12px 26px rgba(34, 197, 94, 0.25);
}
.dawki-fin-fraud-gate.is-active.is-warn {
    transform: translateX(6px) scale(1.02);
    background: rgba(249, 115, 22, 0.18);
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: 0 12px 26px rgba(249, 115, 22, 0.25);
}
.dawki-fin-fraud-gate.is-active.is-bad {
    transform: translateX(6px) scale(1.02);
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 12px 26px rgba(239, 68, 68, 0.30);
    animation: dawkiFinShake 0.45s ease both;
}
@keyframes dawkiFinShake {
    0%   { transform: translateX(6px) scale(1.02); }
    25%  { transform: translateX(2px) scale(1.02); }
    50%  { transform: translateX(10px) scale(1.02); }
    75%  { transform: translateX(4px) scale(1.02); }
    100% { transform: translateX(6px) scale(1.02); }
}

@media (max-width: 991px) {
    .dawki-fin-fraud-pipe { grid-template-columns: 1fr; }
    .dawki-fin-fraud-col-score {
        border-left: 0; border-right: 0;
        border-top: 1px dashed rgba(255, 255, 255, 0.10);
        border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
    }
    .dawki-fin-fraud-stats { grid-template-columns: repeat(2, 1fr); }
    .dawki-fin-fraud-col   { min-height: 0; }
}
@media (max-width: 480px) {
    .dawki-fin-fraud { padding: 70px 0 70px; }
    .dawki-fin-fraud-stats { grid-template-columns: 1fr 1fr; }
    .dawki-fin-fraud-stat > strong { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .dawki-fin-port-pill > span,
    .dawki-fin-fraud-pill > span,
    .dawki-fin-port-bar-name > i,
    .dawki-fin-port-ticker-track,
    .dawki-fin-fraud-gate.is-active.is-bad { animation: none !important; }
    .dawki-fin-port-pos,
    .dawki-fin-fraud-gate,
    .dawki-fin-fraud-score-meter-bar > span { transition: none !important; }
    .dawki-fin-port-pos.is-active,
    .dawki-fin-fraud-gate.is-active { transform: none; }
}
/* === END Financial Apps === */


/* ===========================================================================
 * Blog → Show (single post detail)  (.dawki-blogshow-*)
 * Modern dark-theme reading experience: blurred hero with featured image
 * background, big headline, byline strip, full-width article body with
 * professional typography, sticky sidebar with categories + recent + CTA.
 * =========================================================================== */
.dawki-blogshow {
    background: #0a1428;
    color: #cbd5e1;
}

/* ============ HERO ============ */
.dawki-blogshow-hero {
    position: relative;
    padding: 110px 0 70px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dawki-blogshow-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.2);
    transform: scale(1.15);
    opacity: 0.45;
}
.dawki-blogshow-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 30%, rgba(91, 158, 255, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(168, 85, 247, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, rgba(10, 20, 40, 0.88) 0%, rgba(10, 20, 40, 0.96) 100%);
}
.dawki-blogshow-hero-content {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.dawki-blogshow-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.4px;
    margin-bottom: 18px;
}
.dawki-blogshow-crumb a {
    color: #93c5fd;
    text-decoration: none;
    transition: color 0.2s ease;
}
.dawki-blogshow-crumb a:hover { color: #ffffff; }
.dawki-blogshow-crumb > span[aria-hidden="true"] { color: rgba(255, 255, 255, 0.3); }

.dawki-blogshow-cat {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 22px;
    box-shadow: 0 8px 18px rgba(91, 158, 255, 0.30);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dawki-blogshow-cat:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(91, 158, 255, 0.45);
}

.dawki-blogshow-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.8px;
    color: #ffffff !important;
    margin: 0 0 18px;
    text-wrap: balance;
}
.dawki-blogshow-excerpt {
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 28px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Meta strip */
.dawki-blogshow-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    backdrop-filter: blur(14px);
    flex-wrap: wrap;
    justify-content: center;
}
.dawki-blogshow-meta-author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.dawki-blogshow-meta-author img,
.dawki-blogshow-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.dawki-blogshow-meta-author > div {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.1;
}
.dawki-blogshow-meta-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}
.dawki-blogshow-meta-author strong {
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    margin-top: 2px;
}
.dawki-blogshow-meta-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.14);
}
.dawki-blogshow-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 500;
}
.dawki-blogshow-meta-item svg {
    width: 16px;
    height: 16px;
    color: #93c5fd;
}

/* ============ BODY + SIDEBAR ============ */
.dawki-blogshow-body {
    padding: 70px 0 100px;
}
.dawki-blogshow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: flex-start;
}

/* ===== Main article column ===== */
.dawki-blogshow-main {
    min-width: 0;
}

.dawki-blogshow-cover {
    margin-bottom: 36px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.dawki-blogshow-cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* === Article content typography === */
.dawki-blogshow-content {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #d8e1ee;
    font-size: 17px;
    line-height: 1.8;
    letter-spacing: 0.1px;
}
.dawki-blogshow-content > * + * { margin-top: 1.4em; }

.dawki-blogshow-content p {
    margin: 0;
    color: #d8e1ee;
}
.dawki-blogshow-content h1,
.dawki-blogshow-content h2,
.dawki-blogshow-content h3,
.dawki-blogshow-content h4,
.dawki-blogshow-content h5,
.dawki-blogshow-content h6 {
    color: #ffffff !important;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.4px;
    margin: 2em 0 0.5em;
    text-wrap: balance;
}
.dawki-blogshow-content h1 { font-size: clamp(28px, 3.4vw, 36px); }
.dawki-blogshow-content h2 { font-size: clamp(24px, 2.8vw, 30px); }
.dawki-blogshow-content h3 { font-size: clamp(20px, 2.2vw, 24px); }
.dawki-blogshow-content h4 { font-size: 18px; }

.dawki-blogshow-content a {
    color: #93c5fd;
    text-decoration: underline;
    text-decoration-color: rgba(147, 197, 253, 0.45);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.dawki-blogshow-content a:hover {
    color: #ffffff;
    text-decoration-color: #ffffff;
}

.dawki-blogshow-content strong, .dawki-blogshow-content b {
    color: #ffffff;
    font-weight: 700;
}
.dawki-blogshow-content em, .dawki-blogshow-content i {
    color: #cbd5e1;
}

.dawki-blogshow-content ul, .dawki-blogshow-content ol {
    padding-left: 1.6em;
    color: #d8e1ee;
}
.dawki-blogshow-content li { margin: 0.4em 0; }
.dawki-blogshow-content li::marker { color: #93c5fd; }

.dawki-blogshow-content blockquote {
    margin: 0;
    padding: 18px 22px;
    border-left: 4px solid #5b9eff;
    background: rgba(91, 158, 255, 0.06);
    border-radius: 0 12px 12px 0;
    color: #ffffff;
    font-size: 18px;
    font-style: italic;
    line-height: 1.6;
}
.dawki-blogshow-content blockquote p { color: #ffffff; }

.dawki-blogshow-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.dawki-blogshow-content figure {
    margin: 0;
}
.dawki-blogshow-content figcaption {
    margin-top: 8px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    font-style: italic;
}

.dawki-blogshow-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: rgba(255, 255, 255, 0.08);
    color: #93c5fd;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.dawki-blogshow-content pre {
    background: #0d1726;
    color: #d8e1ee;
    padding: 18px 22px;
    border-radius: 12px;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
    line-height: 1.6;
}
.dawki-blogshow-content pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
}

.dawki-blogshow-content hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    margin: 2.4em 0;
}

.dawki-blogshow-content table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    overflow: hidden;
}
.dawki-blogshow-content th, .dawki-blogshow-content td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #d8e1ee;
}
.dawki-blogshow-content th {
    background: rgba(91, 158, 255, 0.10);
    color: #ffffff;
    font-weight: 700;
}

/* ===== Foot: tags + share ===== */
.dawki-blogshow-foot {
    margin-top: 48px;
    padding: 22px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.dawki-blogshow-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dawki-blogshow-tags-label,
.dawki-blogshow-share-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-right: 4px;
}
.dawki-blogshow-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(91, 158, 255, 0.10);
    border: 1px solid rgba(91, 158, 255, 0.20);
    color: #93c5fd;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dawki-blogshow-tag:hover {
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-1px);
}

.dawki-blogshow-share {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dawki-blogshow-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
}
.dawki-blogshow-share-btn svg {
    width: 16px; height: 16px;
}
.dawki-blogshow-share-btn:hover {
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    transform: translateY(-2px);
}

/* ===== Author bio ===== */
.dawki-blogshow-bio {
    margin-top: 36px;
    padding: 24px 26px;
    background: linear-gradient(135deg, rgba(91, 158, 255, 0.08), rgba(168, 85, 247, 0.06));
    border: 1px solid rgba(91, 158, 255, 0.18);
    border-radius: 16px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.dawki-blogshow-bio-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
}
.dawki-blogshow-bio-avatar-fallback {
    background: linear-gradient(135deg, #5b9eff, #a855f7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}
.dawki-blogshow-bio-label {
    font-size: 11px;
    font-weight: 700;
    color: #93c5fd;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.dawki-blogshow-bio h4 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 4px 0 6px;
}
.dawki-blogshow-bio p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0;
}

/* ===== Prev / Next nav ===== */
.dawki-blogshow-nav {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.dawki-blogshow-nav-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #ffffff;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.dawki-blogshow-nav-link:hover {
    background: rgba(91, 158, 255, 0.10);
    border-color: rgba(91, 158, 255, 0.35);
    transform: translateY(-2px);
}
.dawki-blogshow-nav-link.is-next { text-align: right; }
.dawki-blogshow-nav-label {
    font-size: 11px;
    font-weight: 700;
    color: #93c5fd;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.dawki-blogshow-nav-link strong {
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
}

/* ============ SIDEBAR ============ */
.dawki-blogshow-side {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.dawki-blogshow-widget {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px 22px;
}
.dawki-blogshow-widget-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #93c5fd;
    text-transform: uppercase;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.dawki-blogshow-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dawki-blogshow-cat-list li + li {
    margin-top: 4px;
}
.dawki-blogshow-cat-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    color: #d8e1ee;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.dawki-blogshow-cat-list a:hover {
    background: rgba(91, 158, 255, 0.10);
    color: #ffffff;
}
.dawki-blogshow-cat-list a em {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 28px;
    text-align: center;
}

.dawki-blogshow-post-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dawki-blogshow-post-link {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    border-radius: 10px;
    padding: 4px;
    transition: background 0.2s ease;
}
.dawki-blogshow-post-link:hover {
    background: rgba(255, 255, 255, 0.04);
}
.dawki-blogshow-post-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}
.dawki-blogshow-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dawki-blogshow-post-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dawki-blogshow-post-text strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.dawki-blogshow-post-text em {
    margin-top: 4px;
    font-size: 11.5px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.3px;
}

/* Sidebar CTA card */
.dawki-blogshow-cta {
    background: linear-gradient(135deg, #5b9eff 0%, #a855f7 100%);
    border-radius: 16px;
    padding: 24px 22px;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 14px 30px rgba(91, 158, 255, 0.30);
}
.dawki-blogshow-cta h4 {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.35;
}
.dawki-blogshow-cta p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    margin: 0 0 14px;
    line-height: 1.5;
}
.dawki-blogshow-cta-btn {
    display: inline-block;
    padding: 10px 18px;
    background: #ffffff;
    color: #0a1628;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dawki-blogshow-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20);
}

/* ============ Responsive ============ */
@media (max-width: 991px) {
    .dawki-blogshow-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .dawki-blogshow-side {
        position: static;
    }
    .dawki-blogshow-hero { padding: 90px 0 50px; }
}
@media (max-width: 575px) {
    .dawki-blogshow-hero { padding: 80px 0 40px; }
    .dawki-blogshow-body { padding: 50px 0 70px; }
    .dawki-blogshow-meta {
        gap: 10px;
        padding: 10px 14px;
    }
    .dawki-blogshow-meta-divider { display: none; }
    .dawki-blogshow-content { font-size: 16px; line-height: 1.75; }
    .dawki-blogshow-foot {
        flex-direction: column;
        align-items: flex-start;
    }
    .dawki-blogshow-bio {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .dawki-blogshow-nav {
        grid-template-columns: 1fr;
    }
    .dawki-blogshow-nav-link.is-next { text-align: left; }
}
/* === END Blog → Show === */


/* ===========================================================================
 * Global override — "Let's Build Future Together" CTA banner
 * ----------------------------------------------------------------------------
 * The legacy CTA banner ships across 6 pages (Welcome, Blog, About, Portfolio,
 * FAQ, Industries, Service template) with a right-side "customer journey"
 * image that the user wants gone everywhere. Doing it via CSS is cleaner than
 * editing 6 JSX files and risking layout regressions.
 *
 * After hiding the image, the .cta-content half-width becomes full-width so
 * the headline + button stay readable. Section padding is also trimmed so
 * the gap to the footer offices grid is tight.
 * =========================================================================== */
/* User wants the entire legacy "Let's Build Future Together" banner gone
 * across every page. The welcome page uses a different CTA variant
 * (.dawki-cta-modern — the modern card with orbs) which we KEEP. The
 * legacy banner is the only one that uses .cta-area, so this single
 * :not() selector hides just the legacy section without touching the
 * modern welcome CTA. */
.tj-cta-section:not(.dawki-cta-modern) {
    display: none !important;
}

/* Welcome-page modern CTA — leave card layout alone, just keep its
 * spacing to the footer tight. */
.dawki-cta-modern.tj-cta-section {
    margin-bottom: 0 !important;
    padding-top: 50px !important;
    padding-bottom: 24px !important;
}

/* Squeeze the footer offices grid right under the CTA. */
.dawki-footer-offices {
    padding-top: 18px !important;
}
@media (max-width: 768px) {
    .dawki-footer-offices { padding-top: 14px !important; }
}
/* === END CTA banner override === */


/* ===========================================================================
 * Tighten the gap between any page's LAST section and the footer offices
 * grid. Different pages end with different section classes — each carries
 * its own (60-110px) padding-bottom which, paired with the footer's top
 * padding, produced a noticeable dark band the user reported.
 *
 * Two-pronged fix:
 *   1. Trim the bottom padding of the most common "last-section" classes.
 *   2. Generic safety net: any <section> that is the last child of a page's
 *      <main> element gets a small bottom padding cap.
 *   3. Pull the footer flush with a small negative top margin.
 * =========================================================================== */

/* Common last-section classes we use across templates */
.dawki-blogshow-body          { padding-bottom: 24px !important; }
.dawki-blog-list              { padding-bottom: 24px !important; }
.tj-blog-section.section-gap  { padding-bottom: 28px !important; }
.h4-contact-section.section-gap { padding-bottom: 28px !important; }
.dawki-home-faq               { padding-bottom: 32px !important; }
.dawki-home-contact           { padding-bottom: 32px !important; }
.dawki-pm-radar,
.dawki-fin-fraud,
.dawki-re-pipe,
.dawki-hr-flow,
.dawki-perf-quad,
.dawki-sec-matrix,
.dawki-elearn-cohort,
.dawki-saug-sprint,
.dawki-meta-pipeline {
    padding-bottom: 50px !important;
}

/* Generic safety net: trim trailing padding on the last section of any
 * page's main wrapper. Catches anything we forgot above. */
main#primary > section:last-child,
main.site-main > section:last-child {
    padding-bottom: 24px !important;
    margin-bottom: 0 !important;
}

/* Footer wrapper itself ships with padding-top: 195px (legacy theme spec
 * that originally accounted for an overlapping countup ribbon, which we
 * removed). Today nothing overlaps it, so 195px reads as pure dead space.
 * Cap it to a small breathing-room value across all breakpoints. */
.tj-footer-section,
.tj-footer-section.footer-1 {
    padding-top: 30px !important;
}
@media (max-width: 991px) {
    .tj-footer-section,
    .tj-footer-section.footer-1 { padding-top: 20px !important; }
}

/* Pull the footer up tight against the trimmed last section. */
.tj-footer-section.footer-1 {
    margin-top: 0 !important;
}
/* === END footer-gap override === */


/* ===========================================================================
 * Contact form select dropdown — option visibility fix
 * ----------------------------------------------------------------------------
 * The legacy theme inherits a faded grey text color on the <select> element
 * (var(--tj-color-text-body-3)) which propagates to native <option> items.
 * Browsers render the option dropdown panel with a light system background
 * — grey-on-light made the options unreadable. Force a strong dark color +
 * explicit white background on options so they're legible regardless of
 * whether the surrounding form sits on a light or dark page.
 * =========================================================================== */
.contact-form .form-input select,
.contact-form .form-input select:focus {
    color: #0a1628 !important;
}
.contact-form .form-input select option {
    color: #0a1628 !important;
    background-color: #ffffff !important;
    font-size: 15px;
    font-weight: 500;
    padding: 10px;
}
.contact-form .form-input select option:checked,
.contact-form .form-input select option:hover {
    background-color: #5b9eff !important;
    color: #ffffff !important;
}
/* === END contact-form select fix === */


/* ===========================================================================
 * FAQ section visibility on dark page backgrounds
 * ----------------------------------------------------------------------------
 * The legacy theme renders the FAQ heading + collapsed FAQ titles in a
 * dark heading color (var(--tj-color-heading-primary)) which assumed a
 * light page background. On the current dark theme that color blends
 * straight into the bg making the heading + inactive items unreadable.
 *
 * Force a high-contrast color set: white heading, light-grey collapsed
 * titles on a frosted card background, and bright body text when expanded.
 * =========================================================================== */
.tj-blog-section.slidebar-stickiy-container > .container > .row > .col-lg-12 > h3,
.tj-blog-section .container > .row > .col-lg-12 > h3 {
    color: #ffffff !important;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 28px;
}

/* Each accordion item — frosted card on dark bg */
.tj-faq.style-2 .accordion-item {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    margin-bottom: 14px;
    padding: 0 24px;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.tj-faq.style-2 .accordion-item:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(91, 158, 255, 0.30);
}

/* Collapsed (inactive) title — readable light grey */
.tj-faq.style-2 .accordion-item .faq-title {
    color: #ffffff !important;
    font-weight: 600;
}
.tj-faq.style-2 .accordion-item.active .faq-title {
    color: #ffffff !important;
}

/* Plus / minus icon visibility when collapsed */
.tj-faq.style-2 .accordion-item .faq-title::after {
    color: #93c5fd !important;
    border-color: rgba(91, 158, 255, 0.45) !important;
}

/* Expanded body text */
.tj-faq.style-2 .accordion-item .accordion-body,
.tj-faq.style-2 .accordion-item .accordion-body p,
.tj-faq.style-2 .accordion-item .accordion-body .faq-text,
.tj-faq.style-2 .accordion-item .accordion-body .faq-text p {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 15px;
    line-height: 1.7;
}

/* Active item — keep the legacy blue treatment but override its text colors
 * so the visibility we set above wins. */
.tj-faq.style-2 .accordion-item.active {
    border-color: transparent;
}
.tj-faq.style-2 .accordion-item.active .faq-title {
    color: #ffffff !important;
}
.tj-faq.style-2 .accordion-item.active .accordion-body p,
.tj-faq.style-2 .accordion-item.active .accordion-body .faq-text p {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* === WOW.js safety-net ===
   wow.css sets `.wow { visibility: hidden }` and the animation makes it
   visible. Inertia (SPA) navigation between pages doesn't re-trigger
   WOW.init(), so .wow elements that scroll into view AFTER the first page
   load stay invisible. The footer columns showed this symptom on
   /contact: elements rendered but invisible, leaving a tall empty void.
   Forcing visibility:visible on every .wow element is harmless on the
   first paint (the keyframes still play) and fixes every subsequent
   client-side route change. */
.wow {
    visibility: visible !important;
}
/* === END WOW safety-net === */
/* === END FAQ visibility === */