.section-process {
  background-color: #fffcf0;
  text-align: center;
}
.section-process h2 {
  font-size: 48px;
  color: #318d95;
  font-weight: 600;
}
.section-process .sub-title {
  font-size: 18px;
  font-weight: 600;
  color: #104751;
}
.section-process .row {
  max-width: 100%;
}
.title-precess{
	padding-top: 50px;
}
.title-precess br{
	display: none;
}
.container-process {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.dashed-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 0px;
  width: 100%;
  height: 100%;
}

.grid-cell {
	border-right: 1px dashed #318d9536;
	border-bottom: 1px dashed #318d9536;
  box-sizing: border-box;
  height: auto;
  z-index: 2;
}
.dashed-grid > .grid-cell:nth-child(10),
.dashed-grid > .grid-cell:nth-child(19),
.dashed-grid > .grid-cell:nth-child(28),
.dashed-grid > .grid-cell:nth-child(37),
.dashed-grid > .grid-cell:nth-child(46),
.dashed-grid > .grid-cell:nth-child(56),
.dashed-grid > .grid-cell:nth-child(66) {
  border-right: none;
}
.dashed-grid > .grid-cell:nth-last-child(-n + 10) {
  border-bottom: none;
}
.dashed-grid > .grid-cell:nth-child(-n + 10) {
  border-top: none;
}
.dashed-grid > .grid-cell:nth-child(10n + 1) {
  border-left: none;
}
.dashed-grid .date {
  color: rgba(18, 71, 81, 0.3);
  display: flex;
  align-items: end;
  padding: 0 0 20px 20px;
  font-size: 14px;
}
.container-process .click-on {
  position: absolute;
  top: 10%;
  left: 15%;
  transform: translate(-15%, -10%);
  color: #104751;
  font-size: 16px;
  font-weight: 700;
  background-color: #fffcf0;
  z-index: 3;
}
.container-process .click-on span {
  position: relative;
}
.container-process .click-on span::before {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2025/07/CCT_Graphic-Devices-17.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 35px;
  height: 35px;
  left: 120%;
  top: 0;
  transform: translate(-120%, 0);
}
.container-process .click-on br {
  display: none;
}
.merge-cell {
  grid-column: 2 / span 2;
  background-image: none;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  padding: 0;
  box-sizing: border-box;
}
.merge-cell-st1 {
  grid-row: 2 / 3;
}
.merge-cell-st2 {
  grid-row: 3 / 3;
}
.merge-cell-st3 {
  grid-row: 4 / 5;
}
.merge-cell-st4 {
  grid-row: 5 / 5;
}
.merge-cell .button {
  background: #318d95;
  border: none;
  color: white;
  font-size: 28px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  margin: unset;
  text-transform: math-auto;
  transition: unset;
}
.merge-cell .button:hover{
	box-shadow: unset;
	background-color: #e96024;
}
.merge-cell .button.active {
  background-color: #e96024 !important;
}
.button-st1 {
  background-color: #318d95;
}
.button-st2,
.button-st3 {
  background-color: #318d95;
}
.button-st4 {
  background-color: #318d95;
}
.container-process .content-card {
  position: absolute;
  width: 650px;
  height: 40%;
  background-color: #104751;
  border-radius: 40px;
  top: 25%;
  right: 18%;
  transform: translate(-18%, -36%);
  padding: 20px 50px;
  rotate: 5deg;
  box-shadow: rgb(0 0 0 / 61%) 0px 6px 5px;
  overflow: hidden;
  transition: top 0.6s ease, transform 0.6s ease;
  z-index: 3;
}
.container-process.step-current-1 .content-card {
  transform: translate(-18%, -25%) translateY(0);
}
.container-process.step-current-2 .content-card {
  transform: translate(-18%, -52%) translateY(145px);
}
.container-process.step-current-3 .content-card {
  transform: translate(-18%, -76%) translateY(280px);
}
.container-process.step-current-4 .content-card {
  transform: translate(-18%, -80%) translateY(400px);
}
.container-process .content-wrapper,
.container-process .all-steps {
  width: 100%;
  height: 100%;
  position: relative;
}
.all-steps {
  /*overflow: hidden;*/
  display: flex;
  flex-direction: column;
  transition: transform 0.8s ease;
}
.step-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.step-slide.active {
  opacity: 1;
  z-index: 1;
}
.container-process .content-card img {
  width: 150px;
  height: 90px;
  object-fit: cover;
}
.container-process .content-card h3 {
  color: #e7bd11;
  font-size: 28px;
  margin: unset;
  position: relative;
	font-weight: 600;
}
.container-process .content-card h3::before {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2025/07/pin.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 50px;
  height: 50px;
  bottom: 100px;
  left: 102%;
  transform: translate(-100%, 0);
}
.container-process .content-card p {
  color: #fff;
}

.container-process .button.active {
  position: relative;
}
.container-process .img-arrow {
  position: absolute;
  width: 305px;
  height: 100px;
  background-image: url(/wp-content/uploads/2025/07/Vector-1.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 4;
  transition: top 0.8s ease, right 0.8s ease, transform 0.8s ease;
}

.container-process.step-current-1 .img-arrow {
  top: 16%;
  right: 56%;
  transform: rotate(0deg);
}
.container-process.step-current-2 .img-arrow {
  top: 28%;
  right: 56%;
  transform: rotate(5deg);
}
.container-process.step-current-3 .img-arrow {
  top: 40%;
  right: 56%;
  transform: rotate(0deg);
}
.container-process.step-current-4 .img-arrow {
  top: 52%;
  right: 57%;
  transform: rotate(-15deg);
}
.container-process .img-arrow img {
  width: 100%;
  object-fit: cover;
}
.container-process .button-st1::after {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2025/07/ava-step1.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 52px;
  height: 80px;
  right: 64%;
  bottom: 0;
  transform: translate(-64%, 0);
}
.container-process .button-st2::after {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2025/07/ava-step2.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 80px;
  right: 46%;
  bottom: 0;
  transform: translate(-46%, 0);
}
.container-process .button-st3::after {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2025/07/ava-step3.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 80px;
  right: 46%;
  bottom: 0;
  transform: translate(-46%, 0);
}
.container-process .button-st4::after {
  position: absolute;
  content: "";
  background-image: url(/wp-content/uploads/2025/07/ava-step4.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 80px;
  right: 46%;
  bottom: 0;
  transform: translate(-46%, 0);
}
.grid-icon {
  display: flex;
  align-items: end;
  justify-content: center;
}
.grid-icon img {
  width: 90px;
  height: 90px;
  object-fit: cover;
}
.grid-icon2 {
  display: flex;
  align-items: start;
  justify-content: center;
}
.grid-icon3 {
  display: flex;
  align-items: end;
  justify-content: start;
}
.grid-icon2 img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.grid-icon2.type3 img,
.grid-icon3 img {
  width: 100px;
  height: 100px;
}
.container-process .grid-img {
  position: absolute;
  content: "";
  right: 10%;
  top: 90%;
  background-color: #fffcf0;
  transform: translate(-10%, -90%);
  z-index: 3;
}

.container-process .grid-img img {
  width: 450px;
  height: 170px;
  opacity: 0.3;
  object-fit: contain;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .section-process {
    padding-bottom: 85px !important;
  }
  .dashed-grid {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }
	.title-precess{
		padding-top: unset;
	}
  .dashed-grid .cell-3,
  .dashed-grid .cell-7,
  .dashed-grid .cell-8,
  .dashed-grid .cell-9,
  .dashed-grid .cell-10,
  .dashed-grid .cell-11,
  .dashed-grid .cell-13,
  .dashed-grid .cell-14,
  .dashed-grid .cell-24,
  .dashed-grid .cell-25,
  .dashed-grid .cell-26,
  .dashed-grid .cell-27,
  .dashed-grid .cell-28,
  .dashed-grid .cell-29,
  .dashed-grid .cell-31,
  .dashed-grid .cell-32,
  .dashed-grid .cell-33,
  .dashed-grid .cell-34,
  .dashed-grid .cell-35,
  .dashed-grid .cell-36,
  .dashed-grid .cell-37,
  .dashed-grid .cell-44,
  .dashed-grid .cell-46,
  .dashed-grid .cell-47,
  .dashed-grid .cell-49 {
    display: none;
  }
  .container-process .dashed-grid .cell-48,
  .container-process .dashed-grid .cell-50 {
    border-bottom: 1px dashed #318d95;
  }
  .merge-cell {
    grid-column: span 1;
  }
  .container-process .content-card {
    width: 450px;
    height: 400px;
  }
  .container-process .content-card {
    right: 0;
  }
  .container-process .click-on {
    left: 10%;
    transform: translate(-10%, -10%);
  }
  .container-process .grid-img img {
    width: 270px;
    height: 130px;
  }
  .container-process .grid-img {
    top: 100%;
    transform: translate(-10%, -100%);
  }
  .grid-icon3 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .merge-cell .button {
    font-size: 22px;
    justify-content: end;
    padding: 10px 20px;
  }
  .container-process .button-st1::after {
    right: 40%;
    transform: translate(-40%, 0);
  }
  .container-process .button-st2::after,
  .container-process .button-st3::after,
  .container-process .button-st4::after {
    right: 10%;
    transform: translate(-10%, 0);
  }
  .container-process .img-arrow {
    width: 180px;
    height: 70px;
  }
  .container-process.step-current-1 .img-arrow {
    top: 20%;
  }
  .container-process.step-current-2 .img-arrow {
    top: 32%;
  }
  .container-process.step-current-3 .img-arrow {
    top: 55%;
    transform: rotate(-5deg);
  }
  .container-process.step-current-4 .img-arrow {
    top: 64%;
  }
}

@media only screen and (max-width: 767px) {
  .section-process {
    padding-bottom: 150px !important;
  }
  .container-process {
    padding: 20px 0;
  }
	.title-precess br{
		display: block;
	}
	.title-precess span{
		color: #e96024;
	}
	.grid-cell{
		border-bottom: 1px dashed #318d9536 !important;
	}
  .dashed-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }
  .dashed-grid .cell-2,
  .dashed-grid .cell-3,
  .dashed-grid .cell-15,
  .dashed-grid .cell-7,
  .dashed-grid .cell-8,
  .dashed-grid .cell-9,
  .dashed-grid .cell-10,
  .dashed-grid .cell-11,
  .dashed-grid .cell-13,
  .dashed-grid .cell-14,
  .dashed-grid .cell-18,
  .dashed-grid .cell-20,
  .dashed-grid .cell-23,
  .dashed-grid .cell-24,
  .dashed-grid .cell-25,
  .dashed-grid .cell-26,
  .dashed-grid .cell-27,
  .dashed-grid .cell-28,
  .dashed-grid .cell-29,
  .dashed-grid .cell-31,
  .dashed-grid .cell-32,
  .dashed-grid .cell-33,
  .dashed-grid .cell-34,
  .dashed-grid .cell-35,
  .dashed-grid .cell-36,
  .dashed-grid .cell-37,
  .dashed-grid .cell-38,
  .dashed-grid .cell-43,
  .dashed-grid .cell-45,
  .dashed-grid .cell-47,
  .dashed-grid .cell-48,
  .dashed-grid .cell-49 {
    display: none;
  }
  .dashed-grid .cell-17,
  .dashed-grid .cell-19,
  .dashed-grid .cell-30,
  .dashed-grid .cell-42,
  .dashed-grid .cell-39,
  .dashed-grid .cell-50,
  .dashed-grid .cell-52 {
    position: relative;
  }
.dashed-grid .cell-18{
	display: flex;
    align-items: center;
    justify-content: center;
}
	.dashed-grid .cell-41{
		z-index: -1;
	}
  .dashed-grid .cell-17::before,
  .dashed-grid .cell-42::before {
    position: absolute;
    content: "";
    background-image: url(/wp-content/uploads/2025/07/process-icon-day2.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
  }
	.dashed-grid .grid-cell.cell-54,
	.dashed-grid .grid-cell.cell-55{
		border-bottom: unset !important;
	}
	.dashed-grid .grid-cell.cell-56{
		border-right: 1px dashed #318d9536 !important;
	}
  .dashed-grid .cell-42::before {
    top: 100%;
    transform: translate(-50%, -100%);
  }
  .dashed-grid .cell-19::before {
    position: absolute;
    content: "";
    background-image: url(/wp-content/uploads/2025/07/process-icon-day4.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
  }
  .dashed-grid .cell-30::before,
  .dashed-grid .cell-52::before {
    position: absolute;
    content: "";
    background-image: url(/wp-content/uploads/2025/07/process-icon-day3.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
  }
  .dashed-grid .cell-52::before {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .dashed-grid .cell-39::before {
    position: absolute;
    content: "";
    background-image: url(/wp-content/uploads/2025/07/process-icon-day5.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .dashed-grid .cell-50::before {
    position: absolute;
    content: "";
    background-image: url(/wp-content/uploads/2025/07/process-icon-day4.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .grid-icon2 img {
    width: 110px;
    height: 110px;
  }
  .container-process .dashed-grid .cell-50,
  .container-process .dashed-grid .cell-51,
  .container-process .dashed-grid .cell-52 {
    border-bottom: 1px dashed #318d95;
  }
  .dashed-grid .cell-6,
  .dashed-grid .cell-15,
  .container-process .dashed-grid .cell-52,
  .dashed-grid .cell-41 {
    border-right: unset;
  }
  .container-process .dashed-grid .cell-1 {
    border-left: unset;
  }
	.container-process .dashed-grid .cell-42{
		display: none;
	}
  .merge-cell {
    grid-column: span 1;
  }
  .container-process .click-on br {
    display: block;
  }
  .merge-cell .button {
    font-size: 16px;
  }
  .container-process .click-on {
    font-size: 14px;
    left: 3%;
    transform: translate(-3%, -10%);
  }
  .container-process .click-on span::before {
    width: 30px;
    height: 30px;
    left: 185%;
    top: 45px;
    transform: translate(-150%, 0);
  }
  .dashed-grid .date {
    padding: 0 0 20px 5px;
  }
  .container-process .content-card h3 {
    font-size: 21px;
    padding: 10px 0 15px 0;
  }
  .container-process .content-card p {
    font-size: 14px;
  }
  .container-process .content-card {
    width: 255px;
    height: 360px;
    padding: 10px;
    right: -12%;
    rotate: 3deg;
  }
  .container-process .content-card img {
    width: 100px;
    height: 60px;
  }
  .merge-cell .button {
    height: 30%;
    left: 20%;
    border-radius: 6px;
    padding: 10px;
  }
  .merge-cell .button-st2 {
    bottom: 30%;
  }
  .merge-cell .button-st3 {
    bottom: 62%;
  }
  .merge-cell .button-st4 {
    bottom: 95%;
	  z-index: 2;
  }
  .container-process .img-arrow {
    width: 80px;
    height: 26px;
  }
  .container-process .button-st1::after {
    width: 50px;
    height: 80px;
    right: 48%;
    transform: translate(-48%, 0);
  }
  .container-process .button-st2::after,
  .container-process .button-st3::after,
  .container-process .button-st4::after {
    width: 60px;
    height: 70px;
    right: 30%;
    bottom: 0;
    transform: translate(-30%, 0);
  }
  .container-process.step-current-1 .img-arrow {
    top: 24%;
    right: 54%;
  }
  .container-process.step-current-2 .img-arrow {
    top: 36%;
    right: 54%;
  }
  .container-process.step-current-3 .img-arrow {
    top: 45%;
    right: 54%;
    transform: rotate(-25deg);
  }
  .container-process.step-current-4 .img-arrow {
    top: 55%;
    right: 54%;
    transform: rotate(-10deg);
  }
  .container-process.step-current-1 .content-card {
    transform: translate(-30%, -8%) translateY(15px);
  }
  .container-process.step-current-2 .content-card {
    transform: translate(-30%, -18%) translateY(100px);
  }
  .container-process.step-current-3 .content-card {
    transform: translate(-30%, -35%) translateY(220px);
  }
  .container-process.step-current-4 .content-card {
    transform: translate(-30%, -32%) translateY(260px);
  }
  .container-process .grid-img {
    top: 98%;
    transform: translate(-10%, -98%);
  }
  .container-process .grid-img img {
    width: 220px;
    height: 100px;
  }
  .grid-cell {
    z-index: 1;
  }
  .container-process .content-card h3::before {
    width: 40px;
    height: 40px;
    bottom: 65px;
	left: 98%;
    transform: translate(-100%, -30px);
  }
	.title-precess{
		padding-top: unset;
	}
		.container-process .step-slide:nth-child(1) h3::before{
		bottom: 74px;
	}
	.container-process .step-slide:nth-child(2) h3::before{
		bottom: 72px;
	}
	.container-process .step-slide:nth-child(3) h3::before{
		bottom: 85px;
	}
}

@media only screen and (max-width: 391px){
	.container-process .content-card{
		rotate: 2deg;
	}
	.container-process .content-card h3::before{
		left: 95%;
	}
	.container-process.step-current-1 .content-card{
		transform: translate(-22%, -8%) translateY(15px);
	}
	.container-process.step-current-2 .content-card{
		transform: translate(-22%, -18%) translateY(100px);
	}
	.container-process.step-current-3 .content-card{
		transform: translate(-22%, -35%) translateY(220px);
	}
	.container-process.step-current-4 .content-card{
		transform: translate(-22%, -32%) translateY(260px);
	}
	.container-process .button-st1::after{
		 right: 45%;
        transform: translate(-45%, 0);
	}
	.title-precess{
		padding-top: unset;
	}
	.container-process .step-slide:nth-child(1) h3::before{
		bottom: 74px;
	}
	.container-process .step-slide:nth-child(2) h3::before{
		bottom: 72px;
	}
	.container-process .step-slide:nth-child(3) h3::before{
		bottom: 85px;
	}
}

@media only screen and (min-width: 1080px) and (max-width: 1440px) {
  .container-process .content-card {
    top: 28%;
    right: 5%;
  }
  .container-process.step-current-1 .img-arrow,
  .container-process.step-current-2 .img-arrow,
  .container-process.step-current-3 .img-arrow,
  .container-process.step-current-4 .img-arrow {
    right: 54%;
  }
  .container-process .button-st2::after,
  .container-process .button-st3::after,
  .container-process .button-st4::after {
    right: 38%;
    transform: translate(-38%, 0);
  }
}

@media (min-width: 1441px) and (max-width: 1680px) {
  .container-process .content-card {
    top: 28%;
    right: 10%;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1536px) and (-webkit-min-device-pixel-ratio: 2) {
}