.header-wrapper {
  padding-top: 20px;
  padding-bottom: 20px;
}

#masthead .header-nav.nav-left {
  justify-content: center;
  gap: 20px;
}

.header-wrapper.stuck {
  box-shadow: none !important;
}

.header .flex-row {
  /* height: 100%; */
  border-radius: 100px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  /* margin-right: auto; */
  padding: 12px 12px 12px 24px !important;
  display: flex;
  box-shadow: 0 2px 32px #0082f333;
  background-color: #FFF;
}

.stuck .header-main .nav>li>a {
  line-height: 16px !important;
}

.header-wrapper .nav>li.active>a {
  color: #0082f3 !important;
}

.btn-register {
  grid-column-gap: 10px;
  color: #fff;
  text-transform: capitalize;
  background-image: linear-gradient(150deg, #085bc5, #1ea9ff 55%, #80bbff);
  border-radius: 100px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: 15px 28px;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.dt-title {
  font-size: 42px;
  color: #333;
  text-transform: capitalize;
  text-align: center;
}

.sub-title {
  color: #333;
  font-size: 28px;
}

.dt-service .row-service .col .col-inner {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  padding: 15px;
  background-color: #005ab3;
}

.dt-service .row-service .col .col-inner img {
  border-radius: 12px;
}

.dt-service .row-service .col .col-inner h3 {
  font-size: 24px;
  color: #384057;
}

.dt-service .row-service .col .col-inner p {
  color: #fff;
  min-height: 70px;
  margin-top: 15px;
}

.dt-title .blue {
  color: #1498FB;
  font-family: "Archivo Black", sans-serif;
  font-size: 46px;
  font-weight: 900;
}

.dt-title .gradient {
  font-family: "Archivo Black", sans-serif;
  font-weight: 900;
  font-size: 46px;
  background: linear-gradient(to right, #f38d4f, #ffde59);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.button.is-bevel {
  background-color: #feff0e;
  font-weight: 400;
  text-transform: math-auto;
  color: #000;
  border-radius: 8px !important;
}

.dt-industry {
  background: #FFFcf9;
  border-radius: 20px;
  border: 1px solid rgb(236 188 116);
  padding: 30px;
}

.bang-gia-wrapper {
  max-width: 1300px;
  margin: auto;
  font-family: 'Segoe UI', sans-serif;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bang-gia-row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ddd;
}

.bang-gia-cell {
  flex: 1 1 20%;
  min-width: 120px;
  padding: 10px;
}

.bang-gia-header {
  display: none;
}

.btn-consult {
  background: linear-gradient(to right, #EDDE5D, #F09819);
  border: none;
}

table {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
  background: #fff;
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.08); */
}

.dt-pricing th,
.dt-pricing td {
  border: 1px solid #ddd;
  padding: 12px 14px;
  text-align: center;
  vertical-align: middle;
  color: #3068d6;
  text-transform: unset;
  font-size: 18px;
}

.dt-pricing thead th {
  background: #fff;
  color: #000;
  font-size: 22px;
  border-color: #fff;
  font-weight: 400;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
}

.dt-pricing thead th:first-child,
.dt-pricing thead th:last-child {
  background-color: #0077ed;
  color: #fff;
  text-align: center;
}

.dt-pricing thead th:nth-child(2) {
  background: linear-gradient(to right, #EDDE5D, #F09819);
  color: #FFF;
  background-image: radial-gradient(#c5abff, #397fff);
}

.dt-pricing thead th:nth-child(3) {
  background: linear-gradient(to right, #0072ff, #00c6ff);
  color: #FFF;
  background-image: radial-gradient(#00c6ff, #0072ff);

}

.dt-pricing thead th:nth-child(4) {
  background: linear-gradient(to right, #F45C43, #EB3349);
  color: #FFF;
  background-image: radial-gradient(#0d6cc1, #062c4f);
}

.dt-pricing .btn-consult {
  background: linear-gradient(to right, #EDDE5D, #F09819);
  border-radius: 10px;
  border: none;
  padding: 10px;
  width: 90%;
  margin-top: 15px;
  font-size: 20px;
  box-shadow: 0px 20px 60px -20px #FFE659;
  color: #fff;
  font-weight: bold;
  text-transform: unset;
}

.dt-pricing thead h3 {
  color: #fff;
  font-size: 24px;
}

.dt-pricing p {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 1.4;
}

.dt-pricing td:last-child {
  max-width: 130px;
  padding-right: 14px;
}

.dt-pricing td:first-child,
.dt-pricing th:first-child {
  text-align: left;

}

.dt-pricing tr:not(.group-title) td:first-child {
  position: relative;
  text-align: left;
}
.dt-pricing tbody tr td:first-child {
  padding-left: 15px;
}

.dt-pricing tr:not(.group-title) td:first-child::before {
  content: '';
  width: 2px;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #ffbf2b;
  position: absolute;

}

.dt-pricing .group-title {
  background: #00c6ff;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #0072ff, #00c6ff);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: white;
  font-weight: bold;
  font-size: 16px;
}

.dt-pricing thead .price {
  color: #fff;
  font-size: 28px;
}

.dt-pricing .group-title td {
  color: white;

}

.check {
  color: #28a745;
  font-weight: bold;
}

.cross {
  color: #bbb;
  font-weight: bold;
}

.price {
  color: red;
  font-weight: bold;
}
.dt-package .package{

}
.dt-package .package-header{
  background: linear-gradient(to right, #0072ff, #00c6ff);
  color: #FFF;
  background-image: radial-gradient(#00c6ff, #0072ff);
  border-radius: 8px;
  padding: 26px 18px 16px;
  text-align: center;
  z-index: 2;
  transition: all 0.5s;
}
.dt-package .package-header h3{
  line-height: 1.21;
  letter-spacing: -0.5px;
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 30px;
}
.dt-package .package .accordion .toggle{
  left: unset;
  right: 0;
}
.dt-package .package .accordion-title{
  border-top: unset;
  border-bottom: 1px solid #ddd;
  padding: 10px 42px 10px 10px;;
}
.dt-package .package .accordion-title:last-child{
  border-bottom: none;
}
.dt-package .package .col-inner{
  background: #f2fcffee;
  border-radius: 12px;
  padding: 12px;
}
.dt-package .package .col-inner .accordion {
    background: #FFF;
    border-radius: 20px;
    padding: 10px;
}
.dt-package .package .col-inner .accordion * {
  color: #333;
}
.dt-package .package .accordion-title.active{
  background-color: transparent;
}
.dt-package .package .accordion-inner{
  padding: 15px;
}
.dt-package .package-label{
    padding: 12px 5px;
    background: linear-gradient(180deg, #AEEAFD 0%, rgba(200, 242, 255, 0) 100%);
    color: #0047BA;
    font-size: 13px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.4px;
}
.banner img {
  border-radius: 20px;
}

.why-choose-us {
  padding: 60px 20px;
  background: #ffffff;
}

.why-choose-us .row-why {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.why-choose-us .img.has-hover {
  width: 360px;
  z-index: 2;
}

.why-choose-us .img.has-hover img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Wrapper cho toàn bộ box */
.why-choose-us .col-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

/* Các box số */
.why-choose-us .nummber-box {
  width: 385px;
  background: #007bff;
  color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin: 10px;
  position: absolute;
  display: flex;
  align-items: flex-start;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

/* Số thứ tự */
.why-choose-us .nummber-box .number {
  font-size: 28px;
  font-weight: bold;
  background: #ffffff;
  color: #007bff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

/* Nội dung */
.why-choose-us .nummber-box .content {
  text-align: left;
}

.why-choose-us .nummber-box .title-box {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.why-choose-us .nummber-box .content-box {
  font-size: 15px;
  line-height: 1.4;
}

/* Định vị từng box */
.why-choose-us .nummber-box:nth-child(2) {
  top: 30px;
  left: 7%;
}

.why-choose-us .nummber-box:nth-child(3) {
  top: 30px;
  right: 7%;
}

.why-choose-us .nummber-box:nth-child(4) {
  bottom: 45%;
  left: -30px;
  transform: translateY(50%);
}

.why-choose-us .nummber-box:nth-child(5) {
  bottom: 45%;
  right: -30px;
  transform: translateY(50%);
}

.why-choose-us .nummber-box:nth-child(6) {
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.industry-list {
  padding: 60px 20px;
  background: #fff;
}

.industry-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.industry-col {
  flex: 1 1 30%;
  min-width: 280px;
}

.industry-header {
  margin-bottom: 20px;
}

.industry-icon {
  width: 40px;
  height: 40px;
}

.industry-header h3 {
  font-size: 20px;
  font-weight: bold;
  color: #002c6c;
}

.industry-header .icon-wrapper {
  background-color: #e0eefd;
  display: inline-block;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.industry-items {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #ddd;
}

.industry-items li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  color: #333;
  margin-left: 0 !important;
}

.industry-items .icon-wrapper {
  background: #f0f1f3;
  border-radius: 4px;
  height: 28px;
  margin-right: 14px;
  padding: 4px;
  width: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.industry-items li img {
  height: 16px;
  width: 16px;
  filter: invert(46%) sepia(9%) saturate(719%) hue-rotate(173deg) brightness(94%) contrast(90%);
}

.item-icon {
  width: 24px;
  height: 24px;
  background: #f0f0f0;
  border-radius: 5px;
  margin-right: 10px;
  display: inline-block;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 14px;
  width: 40px !important;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: #0071e3;
  color: #fff;
}

.swiper-button-next,
.swiper-button-prev {
  width: 40px;
  height: 40px;
  bottom: -50px;
  top: unset;
}

.swiper-button-next {
  right: 0%;
}

.swiper-button-prev {
  left: 92%;
}

.row-reels .col {
  padding: 0 !important;
}

.row-reels .col p {
  margin-bottom: 0;
}

.row-reels .col iframe {
  border-radius: 12px;
}

.dt-service .row-service .col .col-inner {
  background-color: hsla(215.1219512195122, 100%, 91%, 1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3000 3000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at 22% 18%, hsla(215.05617977528095, 0%, 100%, 1) 20.896764782891754%, transparent 71.81999464541818%), radial-gradient(circle at 47% 2%, hsla(215.1219512195122, 100%, 91%, 1) 20.9661540892965%, transparent 63.59768942128057%), radial-gradient(circle at 61% 96%, hsla(215.07692307692307, 81%, 46%, 1) 32.555815028683575%, transparent 62.819772397838356%), radial-gradient(circle at 83% 90%, hsla(215.0561797752809, 100%, 65%, 1) 32.555815028683575%, transparent 88.10773884501434%);
  background-blend-mode: overlay, normal, normal, normal, normal;
}

@keyframes hero-gradient-animation {
  0% {
    --y-0: 96%;
    --x-0: 11%;
    --s-start-0: 37%;
    --s-end-0: 90%;
    --c-0: hsla(195.00000000000085, 100%, 95%, 1);
    --s-start-1: 31%;
    --s-end-1: 84%;
    --y-1: 92%;
    --c-1: hsla(271.99999999999994, 89%, 75%, 1);
    --x-1: 95%;
    --c-2: hsla(216, 95%, 54%, 1);
    --y-2: 7%;
    --x-2: 58%;
    --s-start-2: 41%;
    --s-end-2: 61%;
    --s-start-3: 22%;
    --s-end-3: 59%;
    --y-3: 35%;
    --x-3: 62%;
    --c-3: hsla(239, 76%, 52%, 1);
    --y-4: 63%;
    --x-4: 2%;
    --c-4: hsla(232, 81%, 92%, 1);
    --s-start-4: 19%;
    --s-end-4: 70%;
  }

  50% {
    --y-0: 12%;
    --x-0: 6%;
    --s-start-0: 29%;
    --s-end-0: 73%;
    --c-0: hsla(313, 78%, 76%, 1);
    --s-start-1: 8%;
    --s-end-1: 52.61503700898072%;
    --y-1: 29%;
    --c-1: hsla(235, 87%, 56%, 1);
    --x-1: 77%;
    --c-2: hsla(220, 51%, 96%, 1);
    --y-2: 23%;
    --x-2: 75%;
    --s-start-2: 29%;
    --s-end-2: 80%;
    --s-start-3: 2%;
    --s-end-3: 81%;
    --y-3: 64%;
    --x-3: 76%;
    --c-3: hsla(218, 76%, 75%, 1);
    --y-4: 86%;
    --x-4: 41%;
    --c-4: hsla(315, 89%, 98%, 1);
    --s-start-4: 24%;
    --s-end-4: 81%;
  }

  100% {
    --s-start-1: 8%;
    --s-end-1: 21.71776697271709%;
    --y-1: 13%;
    --c-1: hsla(235, 87%, 56%, 1);
    --x-1: 36%;
  }
}

@property --y-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 96%
}

@property --x-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 11%
}

@property --s-start-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 37%
}

@property --s-end-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 90%
}

@property --c-0 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(195.00000000000085, 100%, 95%, 1)
}

@property --s-start-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 31%
}

@property --s-end-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 84%
}

@property --y-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 92%
}

@property --c-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(271.99999999999994, 89%, 75%, 1)
}

@property --x-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 95%
}

@property --c-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(216, 95%, 54%, 1)
}

@property --y-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 7%
}

@property --x-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 58%
}

@property --s-start-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 41%
}

@property --s-end-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 61%
}

@property --s-start-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 22%
}

@property --s-end-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 59%
}

@property --y-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 35%
}

@property --x-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 62%
}

@property --c-3 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(239, 76%, 52%, 1)
}

@property --y-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 63%
}

@property --x-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 2%
}

@property --c-4 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(232, 81%, 92%, 1)
}

@property --s-start-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 19%
}

@property --s-end-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 70%
}

.comit-block {
  background-image: url(/wp-content/themes/datatalk/assets/img/comit-bg.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  height: 100%;
  padding: 32px;
  flex: 0 0 34%;
  min-width: 34%;
  height: 100%;
  box-sizing: border-box;
  padding: 1.5rem;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  border-radius: 16px;
}
.comit-scroll-container {
  position: relative;
}

.comit-section {
  position: sticky;
  top: 30%;
  height: 450px;
  overflow: hidden;
  background: #fff;
  z-index: 10;
}

.comit-wrapper {
  display: flex;
  height: 100%;
  width: auto; /* tự động theo số lượng block */
  gap: 20px
}

.block-title {
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #111827;
    padding-left: 105px;
}
.block-title-text {
  letter-spacing: -.32px;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(125deg, #085bc5, #1ea9ff 55%, #80bbff);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 15px;
    line-height: 42px;
}
.block-description {
  font-size: 32px;
  color: #374151;
  line-height: 1.5;
}
#footer .section {
  background-color: hsla(210.17543859649123, 85%, 39%, 1);
  background-image: radial-gradient(circle at 60% -19%, hsla(223.84615384615384, 100%, 20%, 1) 0%, transparent 46.76479111708604%), radial-gradient(circle at 39% 107%, hsla(222.7826086956522, 98%, 22%, 1) 3.1210986267166043%, transparent 41.804976793018696%), radial-gradient(circle at 41% 31%, hsla(207.0967741935484, 81%, 44%, 1) 3.1210986267166043%, transparent 76.4190383017679%), radial-gradient(circle at 8% 3%, hsla(222.7826086956522, 98%, 22%, 1) 3.1210986267166043%, transparent 45.38487571252063%), radial-gradient(circle at 36% 39%, hsla(207.0967741935484, 81%, 44%, 1) 3.1210986267166043%, transparent 28.404855174935737%), radial-gradient(circle at 85% 7%, hsla(223.84615384615384, 100%, 20%, 1) 0%, transparent 76.82030298802759%), radial-gradient(circle at 107% 58%, hsla(223.84615384615384, 100%, 20%, 1) 0%, transparent 76.82030298802759%);
  background-blend-mode: normal, normal, lighten, normal, lighten, normal, normal;
}

@keyframes hero-gradient-animation {
  0% {
    --x-0: 37%;
    --y-0: 99%;
    --c-0: hsla(291, 76%, 91%, 1);
    --s-start-0: 15%;
    --s-end-0: 72%;
    --s-start-1: 4%;
    --s-end-1: 56%;
    --c-1: hsla(224, 99%, 60%, 1);
    --y-1: 78%;
    --x-1: 41%;
    --s-start-2: 2%;
    --s-end-2: 81%;
    --x-2: 49%;
    --c-2: hsla(183, 52%, 85%, 1);
    --y-2: 27%;
    --c-3: hsla(207, 75%, 75%, 1);
    --y-3: 43%;
    --x-3: 59%;
    --s-start-3: 7%;
    --s-end-3: 70%;
    --y-4: 8%;
    --c-4: hsla(183, 73%, 64%, 1);
    --x-4: 87%;
    --s-start-4: 0%;
    --s-end-4: 62%;
  }

  100% {
    --x-0: 79%;
    --y-0: 13%;
    --c-0: hsla(276, 51%, 95%, 1);
    --s-start-0: 19%;
    --s-end-0: 83%;
    --s-start-1: 1%;
    --s-end-1: 73%;
    --c-1: hsla(298, 86%, 62%, 1);
    --y-1: 20%;
    --x-1: 66%;
    --s-start-2: 15%;
    --s-end-2: 66%;
    --x-2: 47%;
    --c-2: hsla(218, 71%, 85%, 1);
    --y-2: 96%;
    --c-3: hsla(236, 68%, 100%, 1);
    --y-3: 84%;
    --x-3: 28%;
    --s-start-3: 5%;
    --s-end-3: 68%;
    --y-4: 82%;
    --c-4: hsla(239, 59%, 70%, 1);
    --x-4: 37%;
    --s-start-4: 20%;
    --s-end-4: 75%;
  }
}

@property --x-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 37%
}

@property --y-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 99%
}

@property --c-0 {
  syntax: '<color>';
  inherits: false;
  initial-value: rgb(249, 244, 215)
}

@property --s-start-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 15%
}

@property --s-end-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 72%
}

@property --s-start-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 4%
}

@property --s-end-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 56%
}

@property --c-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(224, 99%, 60%, 1)
}

@property --y-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 78%
}

@property --x-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 41%
}

@property --s-start-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 2%
}

@property --s-end-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 81%
}

@property --x-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 49%
}

@property --c-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(183, 52%, 85%, 1)
}

@property --y-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 27%
}

@property --c-3 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(207, 75%, 75%, 1)
}

@property --y-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 43%
}

@property --x-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 59%
}

@property --s-start-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 7%
}

@property --s-end-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 70%
}

@property --y-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 8%
}

@property --c-4 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(183, 73%, 64%, 1)
}

@property --x-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 87%
}

@property --s-start-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%
}

@property --s-end-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 62%
}

span.block-number {
  position: absolute;
  left: -1px;
  font-size: 87px;
  top: -1px;
  width: 115px;
  text-align: center;
  letter-spacing: -.32px;
  background: linear-gradient(to right, #f38d4f, #ffde59);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-radius: 16px 0 0 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgb(192 232 255 / 30%);
}

.dt-features .row-features .col {
  flex-basis: 20%;
  max-width: 20%;
}

.dt-features .col .col-inner {
  height: 100%;
}

.dt-features .col:nth-child(odd) .col-inner .tech-feature-box {
  background-color: #FFF7E6;
}

.dt-features .col:nth-child(even) .col-inner .tech-feature-box {
  background-color: #E6F4FF;
}

.dt-features .icon-box {
  transition: all 0.3s ease;
  background: #fdfdfd;
  border-radius: 16px;
  padding: 20px 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  position: relative;
}

.dt-features .icon-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  background-color: #fffdfa;
}

.dt-features .icon-box-img {
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.dt-features .icon-box:hover .icon-box-img {
  background: rgb(226, 252, 238);
}

.dt-features h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dt-features p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0;
}

.tech-feature-box {
  background-color: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.service-box .row {
  border-radius: 20px;
  margin-bottom: 30px;
  padding: 20px;
}

.service-box .row .img .img-inner {
  text-align: center;
}

.service-box .row img {
  /* width: 60%;
  max-width: 60%; */
  border-radius: 20px;
  margin: auto;
}

.service-box .row:first-child {
  background-color: #f2f8fe;
}

.service-box .row:nth-child(2) {
  background-color: #fff9f2;
}

.service-box .row:nth-child(3) {
  background-color: #f2fbf5;
}

.service-box .row:last-child {
  margin-bottom: 0;
}

.service-banner .section-bg {
  background: linear-gradient(198.23deg, #ddefff 29.05%, rgba(255, 255, 255, 0) 77.49%) !important;
}

@keyframes blues-gradient-animation {
  0% {
    --c-0: hsla(154, 55%, 87%, 1);
    --y-0: 55%;
    --s-start-0: 20%;
    --s-end-0: 69%;
    --x-0: 14%;
    --y-1: 35%;
    --s-start-1: 20%;
    --s-end-1: 69%;
    --x-1: 19%;
    --c-1: hsla(200, 60%, 98%, 1);
    --y-2: 54%;
    --s-start-2: 20%;
    --s-end-2: 69%;
    --c-2: hsla(151, 81%, 77%, 1);
    --x-2: 4%;
    --x-3: 33%;
    --c-3: hsla(168, 80%, 82%, 1);
    --y-3: 6%;
    --s-start-3: 20%;
    --s-end-3: 69%;
    --y-4: 50%;
    --s-start-4: 47.15307326228125%;
    --s-end-4: 69%;
    --c-4: hsla(207, 87%, 72%, 1);
    --x-4: 36%;
  }

  100% {
    --c-0: hsla(154, 55%, 87%, 1);
    --y-0: 67%;
    --s-start-0: 20;
    --s-end-0: 69;
    --x-0: 20%;
    --y-1: 4%;
    --s-start-1: 20;
    --s-end-1: 69;
    --x-1: 58%;
    --c-1: hsla(200, 60%, 98%, 1);
    --y-2: 80%;
    --s-start-2: 20;
    --s-end-2: 69;
    --c-2: hsla(151, 81%, 77%, 1);
    --x-2: 13%;
    --x-3: 39%;
    --c-3: hsla(168, 80%, 82%, 1);
    --y-3: 45%;
    --s-start-3: 20;
    --s-end-3: 69;
    --y-4: 6%;
    --s-start-4: 20;
    --s-end-4: 69;
    --c-4: hsla(207, 87%, 72%, 1);
    --x-4: 92%;
  }
}

@property --c-0 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(154, 55%, 87%, 1)
}

@property --y-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 55%
}

@property --s-start-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20%
}

@property --s-end-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 69%
}

@property --x-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 14%
}

@property --y-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 35%
}

@property --s-start-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20%
}

@property --s-end-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 69%
}

@property --x-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 19%
}

@property --c-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(200, 60%, 98%, 1)
}

@property --y-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 54%
}

@property --s-start-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20%
}

@property --s-end-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 69%
}

@property --c-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(151, 81%, 77%, 1)
}

@property --x-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 4%
}

@property --x-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 33%
}

@property --c-3 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(168, 80%, 82%, 1)
}

@property --y-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 6%
}

@property --s-start-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20%
}

@property --s-end-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 69%
}

@property --y-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%
}

@property --s-start-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 47.15307326228125%
}

@property --s-end-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 69%
}

@property --c-4 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(207, 87%, 72%, 1)
}

@property --x-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 36%
}

/* .dt-process {
  --c-0: hsla(154, 55%, 87%, 1);
  --y-0: 55%;
  --x-0: 14%;
  --y-1: 35%;
  --x-1: 19%;
  --c-1: hsla(200, 60%, 98%, 1);
  --y-2: 54%;
  --c-2: hsla(151, 81%, 77%, 1);
  --x-2: 4%;
  --x-3: 33%;
  --c-3: hsla(168, 80%, 82%, 1);
  --y-3: 6%;
  --y-4: 50%;
  --c-4: hsla(207, 87%, 72%, 1);
  --x-4: 36%;
  ;
  background-color: hsla(200, 60%, 98%, 1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3000 3000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));
  animation: blues-gradient-animation 10s linear infinite alternate;
  background-blend-mode: overlay, normal, normal, normal, normal, normal;
} */
.dt-process .box-process {
  background-image: linear-gradient(150deg, #085bc5, #1ea9ff 55%, #80bbff);
  border-radius: 20px;
  padding: 20px 10px 20px 85px;
  color: #fff;
  height: 100%;
}

.dt-process .process-title {
  font-size: 24px;
}

.dt-process .number {
  font-size: 35px;
  width: 70px;
  height: 70px;
  background-color: #ffdb60;
  text-align: center;
  line-height: 70px;
  color: #255fff;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 12px 0 32px 0;
}

.map-wrapper {
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.map-wrapper iframe {
  border-radius: 20px;
}

.dt-contact {
  background-color: hsla(207.79411764705884, 100%, 70%, 1);
  background-image: radial-gradient(circle at 10% -90%, hsla(240, 0%, 100%, 1) 45%, transparent 58%), radial-gradient(circle at 90% -90%, hsla(240, 0%, 100%, 1) 45%, transparent 58%), radial-gradient(circle at 50% -90%, hsla(240, 0%, 100%, 1) 62%, transparent 101%), radial-gradient(circle at 75% -90%, hsla(201.17647058823525, 100%, 73%, 1) 66%, transparent 73%), radial-gradient(circle at 50% 100%, hsla(202.50000000000003, 81%, 87%, 1) 0%, transparent 100%);
  background-blend-mode: normal, normal, normal, normal, normal;
}

.dt-contact .section-bg :is(img, picture, video) {
  height: auto;
  left: 40%;
  -o-object-fit: cover;
  object-fit: contain;
  -o-object-position: 50% 50%;
  /* object-position: 40% 81%; */
  position: absolute;
  top: 60%;
  width: auto;
  transform: translate(-50%, -50%);
}

.contact-right .col-inner {
  background-color: rgb(165 227 255 / 6%);
  border-radius: 20px;
  padding: 70px 50px;
  backdrop-filter: blur(30px);
  border: 1px solid #c7f0ff;
}

.contact-left .row .col-inner {
  border-radius: 20px;
  backdrop-filter: blur(15px);
  height: 100%;
  padding: 20px;
  border: 1px solid #c7f0ff;
}

.contact-right .col-inner input,
.contact-right .col-inner textarea {
  height: 3.571428em;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-border-radius: 0;
  border-radius: 0;
  background: none;
  border-width: 1px;
  border-style: solid;
  padding: 10px 18px;
  width: 100%;
  display: block;
  outline: none !important;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

.contact-right .col-inner input[type="submit"] {
  grid-column-gap: 10px;
  color: #fff;
  text-transform: capitalize;
  background-image: linear-gradient(150deg, #085bc5, #1ea9ff 55%, #80bbff);
  border-radius: 100px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: 15px 28px;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}
/* Popup */
.popup-overlay {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 100%; height: 100%;
  background: #1d2939cc;
  backdrop-filter: blur(15px);
  z-index: 999999;

}

.popup-content {
  background: #fff;
  width: 90%;
  max-width: 900px;
  margin: 10% auto;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
      border-radius: 20px;
    /* background: linear-gradient(153deg, #a2fdc752 8.46%, #e5f4ff00 85.51%); */
}

.popup-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}

.popup-body {
  background: linear-gradient(153deg, #a2fdc752 8.46%, #e5f4ff00 85.51%);
}
.dialog{
    height: auto;
    padding: 32px 48px;
    display: flex;
    /* align-items: center; */
    gap: 48px;
    border-radius: 20px;
    background: linear-gradient(209deg, #d2ebff 6.34%, #e5edff00 59.49%);
}

.popup-left {
  flex: 1;
  padding-right: 30px;
  border-right: 1px solid #eee;
}

.popup-right {
  flex: 1;
  padding: 30px;
  border-radius: 20px;
  border: 1.5px solid #FFF;
  background: linear-gradient(180deg, #ffffff73, #fffc);
}
.dialog label{
  color: #344054;
  font-weight: 400;
  line-height: 20px;
}
body .dialog input:focus,body .dialog select:focus,
body .dialog input:hover,body .dialog select:hover{
  border-color: #9fcaff;
  box-shadow: 0 0 5px #5ba5ff;
}
body .dialog input,body .dialog select{
  height: 48px;
  padding: 12px 16px;
  border-radius: 8px;
  color: #1D2939;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
  margin-top: 8px;
  margin-bottom: 10px;
}
body .dialog .wpcf7-spinner{
  position: absolute;
}
body .dialog input.wpcf7-submit{
  color: #FFF;
}
.stats {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}
.stats div {
  text-align: center;
}

/* End Popup */
@media (min-width: 1024px) {
  .dt-features .row.row-full-width>div.col {
    padding: 15px;
  }
}

@media (max-width: 767px) {
  .dt-features .icon-box {
    text-align: center;
    align-items: center;
  }

  .dt-features .icon-box-text {
    text-align: center;
  }
}