.dtr-servicebox-heading{
			line-height: 26px;
			margin-bottom: 20px;
			margin-top: 15px;
			align-self: flex-start;
		}
		.dtr-servicebox-content, .dtr-line-hover {
			min-height: 200px;
		}
		.short-content{
			min-height: 160px !important;
		}
		.who-icon{
			font-size: 22px;
			color: #fff;
			margin: auto;
			padding-bottom: 20px;
		}
		.dtr-animated-headline i{
			color: #ed7672;
		}
		.dtr-intro-subheading{
			text-transform: uppercase;
			color: #ed7672;
			font-size: 14px;
			letter-spacing: 2px;
		}
		.general_button i{
			line-height: 34px;
			position: relative;
			top: 1px;
			left: 3px;
		}
		.general_button_full{
			cursor: pointer;
			font-size: 14px;
			color: #fff;
			background: #292929;
			padding: 12px 25px;
			display: inline-block;
			border-radius: 3px;
			font-weight: bold;
			line-height: 26px;
			width: 100%;
			text-align: center;
		}
		.general_button_full:hover{
			background: #333;
			transition: all 0.3s ease-in;
		}
		.general_button_full.red{
			background: #ff6d6d;
		}
		.general_button_full.red:hover{
			background: #333;
		}
		.approach-line{
			/*border-top: 3px solid #ed7672;*/
			border-top: none;
			padding: 20px;
			border-radius: 5px;
			background: #fafafa;
			margin-bottom: 30px;
			min-height: 310px;
			border: 1px solid #f0f0f0;
			transition: all 0.3s ease-in;
		}
		.approach-line-px{
			margin-bottom: 3px;
			width: 15%;
			height: 2px;
			background: #ed7772;
			transition: width .5s ease, background-color .2s ease, opacity .2s ease;
		}
		.approach-line-minipx{
			margin-bottom: 30px;
			width: 8%;
			height: 2px;
			background: #ed7772;
			transition: width .5s ease, background-color .2s ease, opacity .2s ease;
		}
		.approach-line:hover{
			color: #fff;
			background: #ed7772;
			transition: all 0.3s ease-in;
		}
		.approach-line:hover .approach-line-px, .approach-line:hover .approach-line-minipx{
			background-color: #fff;
			width: 100%;
		}
		
		.about_numbers{
			padding: 30px 0 40px 0;
		}
		.about_numbers span{
			font-size: 26px;
			font-weight: bold;
			color: #000;
		}	
		.about_numbers_desc{
			font-size: 12px;
			line-height: 20px;
			margin-top: 10px;
		}
		
		#press-media{
			padding-top: 50px;
			padding-bottom: 50px;
		}
		.services-press{
			padding: 20px;
			border: 1px solid #f0f0f0;
			border-radius: 5px;
			transition: all 0.3s ease-in;
		}
		.services-press img{
			width: 100%;
			opacity: 0.5;
			transition: all 0.3s ease-in;
		}
		.services-press:hover img{
			opacity: 1;
		}
		.services-press:hover{
			border: 1px solid #ccc;
		}
		.bg-light-black{
			background-color: #121212 !important;
		}
		.color-white-light{
			color: #dadada;
		}
		.servicebox-pain-solution{
			font-size: 12px;
			font-weight: bold;
			color: #ed7772;
		}
		.dtr-servicebox-cnt {
			display: block;
			position: absolute;
			top: -25px;
			right: 20px;
			font-size: 115px;
			line-height: 115px;
			z-index: 1;
			font-weight: 900;
			text-align: right;
			color: #0c1b2a;
			transition: all 0.3s ease-in;
		}
		.dtr-servicebox-wrapper i{
			color: #ed7772;
			position: absolute;
			left: -40px;
			top: 22px;
			transition: all 0.3s ease-in;
		}
		.dtr-servicebox-wrapper:hover .dtr-servicebox-cnt{
			color: #333;
			transition: all 0.3s ease-in;
		}
		.dtr-servicebox-wrapper:hover i{
			left: 30px;
		}
		.dtr-servicebox-wrapper:hover .color-white-light{
			color: #eaeaea;
		}
		.service_gap{
			display:flex;
			justify-content:center;
			align-items:center;
		}
		.service_gap span {
			font-size: 26px;
			color: #000;
			position: relative;
			margin-top: 95px;
		}

		.service_gap span::after {
			content: "\f101";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;

			position: absolute;
			top: 0;
			left: 0;

			color: #ed7772;

			width: 0;
			overflow: hidden;
			white-space: nowrap;

			transition: width 0.5s ease;
		}

		.dtr-servicebox-wrapper:hover .service_gap span::after {
			width: 100%;
		}
		.what-arrow{
			display: inline-block;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: #ed7672;
			color: #fff;
			text-align: center;
			cursor: pointer;
		}
		.what-arrow i{
			font-size: 12px;
			position: relative;
			top: -2px;
		}
		.what-arrow-text{
			height: 36px;
			line-height: 36px;
			font-size: 14px;
			color: #333;
			text-align: center;
			display: inline-block;
			padding: 0 20px;
		}
		
		/* slider service page */
		.text-slider-viewport{
		  overflow: hidden;
		  position: relative;
		  margin: 30px 0;
		}

		.text-slider-track{
		  display: flex;
		  width: 100%;
		  transform: translateX(0%);
		  transition: transform .35s ease;
		  will-change: transform;
		}

		.text-slide{
		  flex: 0 0 100%;
		  box-sizing: border-box;
		  font-size: 14px;
		  line-height: 28px;
		}

		.text-slider-controls{
		  display: flex;
		  align-items: center;
		  gap: 12px;
		  margin-top: 12px;
		}

		.what-arrow.is-disabled{
		  opacity: .35;
		  cursor: not-allowed;
		  pointer-events: none;
		}

		.ts-indicator{
		  font-size: 14px;
		  opacity: .8;
		  min-width: 40px;
		  text-align: center;
		}
		/* end slider service page */

		.features-box{
			display: inline-block;
			width: 49%;
			padding: 50px;
			text-align: left;
			vertical-align: top;
			min-height: 250px;
			transition: all 0.3s ease-in;
		}
		.features-box.line-l{
			border-left: 1px solid #e5dada;
		}
		.features-box.line-b{
			border-bottom: 1px solid #e5dada;
		}
		.parallax-bg{
			background-image: url('/dist/img/background_pattern2.png');
			background-repeat: repeat;
			background-color: #d1c5c5;
			background-position: 0px 0px;
			will-change: background-position;
		}
		.features-box:hover{
			background: rgba(207, 183, 183, 0.44);
		}
		.benefit-line{
			padding: 30px 0;
			border-bottom: 1px solid #f0f0f0;
		}
		.benefit-box{
			padding: 60px 30px 0 30px;
			position: relative;
		}
		.benefit-box-mini{
			padding: 0px 30px 0 30px;
		}
		.benefit-box span{
			top: -5px;
			left: 25px;
			font-size: 60px;
			line-height: 60px;
			z-index: 1;
			font-weight: 900;
			text-align: right;
			position: absolute;
			color: transparent;
			
			background-image: linear-gradient(to bottom, #ed7672 0%, #ed7672 50%, #f0f0f0 50%, #f0f0f0 100%);
			background-size: 100% 200%;
			background-position: 0 100%;

			-webkit-background-clip: text;
			background-clip: text;

			transition: background-position .60s ease;
		}
		.benefit-box:hover span{
		  background-position: 0 0;
		}
		.benefit-title{

		}

		.benefit-box .benefit-title{
			font-size: 18px;
			font-weight: bold;
			padding-bottom: 10px;
			line-height: 26px;
			min-height: 75px;

			color: transparent;
			background-image: linear-gradient(to bottom, #ed7672 0%, #ed7672 50%, #111 50%, #111 100%);
			background-size: 100% 200%;
			background-position: 0 100%;
			-webkit-background-clip: text;
			background-clip: text;

			transition: background-position 2s ease;
			transition-delay: .35s;
		}

		.benefit-box:hover .benefit-title{
			background-position: 0 0;
		}

		.benefit-box .benefit-title{
			transition-delay: 0s;
		}
		.benefit-box:hover .benefit-title{
			transition-delay: .35s;
		}
		.stack-box{
			width: 80%;
			text-align: center;
			margin-top: 30px;
		}
		.stack-icon{
			padding: 7px 5px;
			border-radius: 10px;
			border: 1px solid #d0d0d0;
			width: 23%;
			display: inline-block;
			margin: 8px 0.5%;
		}
		.stack-icon img{
			width: 100%;
		}
		.section-cost{
			background-color: #323d4d;
		}
		.section-cost-paralax{
			background-image: url('/dist/img/background_pattern2.png');
			background-repeat: repeat;
			background-position: 0px 0px;
		}
		.cost-text{
			font-size: 14px;
			line-height: 28px;
			color: #000;
		}
		.cost-text div{
			padding: 10px 0;
			border-bottom: 1px solid #e4ebf6;
		}
		.cost-text i{
			display: none;
		}

		.cost-text .cost-line{
			position: relative;
			padding: 10px 0;
			border-bottom: 1px solid #e4ebf6;
			overflow: hidden;
			z-index: 0;
			transition: all 0.3s ease-in;
			left: 0;

		}

		.cost-text .cost-line::before{
		  content: "";
		  position: absolute;
		  inset: 0;
		  background: #abc5eb;
		  transform: scaleX(0);
		  transform-origin: left; 
		  transition: transform 1s ease;
		  z-index: -1;
		}

		.cost-text .cost-line:hover::before{
		  transform: scaleX(1);
		}
		.cost-text .cost-line:hover{
			font-weight: 600;
			padding-left: 7px;;
		}
		#cost .cost-section-idea{
			margin: 30px 0;
		}
		#who{
			background: #f6f0f0;
		}	
		.who-line{
			font-size: 16px;
			line-height: 28px;
			padding: 10px 10px 10px 40px;
			position: relative;
		}
		.who-line i{
			font-size: 22px;
			margin-right: 15px;
			position: absolute;
			top: 14px;
			left: 0;
			color: #ff6d6d;

			display: inline-block;
			transform-origin: center;
			animation: iconPulse 2s ease-in-out infinite;
		}

		@keyframes iconPulse{
			0%, 70%, 100% { transform: scale(1); opacity: 1; }
			80%           { transform: scale(1.18); opacity: .85; }
			90%           { transform: scale(1.05); opacity: 1; }
		}
		
		.why-info-box{
			width: 49%;
			display: inline-block;
			font-size: 14px;
			text-align: center;
			padding: 5px 0 10px 0;
		}
		.why-info-box .counter{
			font-size: 38px;
			font-weight: bold;
			color: #ff6d6d;
			position: relative;
			top: 9px;
			left: -5px;
		}
		#why-info .plus{
			font-size: 38px;
			top: 9px;
			left: -5px;
			font-weight: bold;
			color: #ff6d6d;
			position: relative;
			opacity: 0;
			transform: translateX(-4px);
			display: inline-block;
			transition: opacity .35s ease, transform .35s ease;
		}

		#why-info .plus.show{
		  opacity: 1;
		  transform: translateX(0);
		}
		.why-text{
			font-size: 16px;
			font-weight: normal;
			line-height: 1.7em;
			padding: 40px 0;
		}
		
		.case-item-title{
			font-size: 18px;
			font-weight: bold;
			color: #000;
			line-height: 26px;
			padding: 10px 0 10px 00px;
			position: relative;
		}
		.case-item-desc{
			font-size: 14px;
			font-weight: normal;
			line-height: 1.7em;
			margin-bottom: 20px;
			padding-left: 0px;
		}
		.case-item-title i{

		}

		.option-one-line .case-item-title i{
			position: absolute;
			top: 8px;
			left: -45px;
			color: #ff6d6d;
			font-size: 18px;
			display: inline-block;
			transition: transform .25s ease;
		}

		.option-one-line:hover .case-item-title i{
			transform: rotate(180deg);
		}

		.option-one-line .case-item-title{
			position: relative;
			display: inline-block;
			z-index: 0;
		}

		.option-one-line .case-item-title::after{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: #ff6d6d;
			transform: scaleX(0);
			transform-origin: left;
			transition: transform 1s ease;
			z-index: -1;    
			border-radius: 3px;
		}

		.option-one-line .case-item-title{
			color: #111;
			padding: 2px 6px;
			border-radius: 6px;
		}

		.option-one-line:hover .case-item-title::after{
			transform: scaleX(1);
		}

		.option-one-line:hover .case-item-title{
			color: #fff;
			transition: color .2s ease;
		}
		

		.process_box {
			padding: 40px;
			position: relative;
			margin: 30px 0;
			transition: border 0.4s ease, color 0.4s ease;
			border: 2px solid #f0f0f0;
			border-radius: 3px;
		}

		.process_box2 {
			background: #7a91eb;
			color: #fff;
			padding: 40px;
			position: relative;
			margin: 30px 0;
		}

		.process_box.active-process {
			border: 2px solid #ed7672;
			color: #000;
		}

		.process_line_title {
			font-size: 18px;
			line-height: 26px;
			font-weight: bold;
			padding: 10px 0;
			min-height: 75px;
		}

		.process_line_desc {
			font-size: 12px;
			line-height: 20px;
			padding: 10px 0;
			position: relative;
			min-height: 140px;
		}

		/* Налаштування для початкового стану "next step" */
		.process_line_desc span {
			font-size: 11px;
			position: absolute;
			bottom: -20px;
			left: 0;
			color: #ed7672;
			font-weight: bold;

			/* Ефект приховування: прозорий + зміщений вниз */
			opacity: 0;
			transform: translateY(15px);

			/* Плавність анімації появи */
			transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
		}

		/* Клас, який буде додавати jQuery для НАСТУПНОГО кроку */
		.process_line_desc span.show-next {
			opacity: 1;
			transform: translateY(0); /* Повертається в оригінальну позицію (злітає вгору) */
		}

		/* Якщо блок стає активним, напис "next step" всередині нього миттєво зникає */
		.process_box.active-process .process_line_desc span {
			opacity: 0 !important;
			transform: translateY(15px) !important;
			transition: none; /* без анімації при зникненні, щоб не "іскрило" */
		}

		.process_step {
			font-size: 11px;
			position: absolute;
			top: 0;
			right: 12px;
		}
		
		.process-title{
			position: relative;
			display: inline-block;
			font-size: 16px;
			padding: 8px 16px 8px 10px;
			border-radius: 3px 0 0 3px;
			line-height: 26px;
			margin-bottom: 15px;
			margin-top: 5px;
			font-weight: bold;
			background: #000;
			color: #fff;
			width: 100%;
			transition: background 1s linear;
		}

		.process-title::after{
			content: "";
			position: absolute;
			top: 50%;
			right: -12px;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-top: 21px solid transparent;
			border-bottom: 21px solid transparent;
			border-left: 12px solid #000;
			transition: border-left-color 1s linear;
		}
		.process-title--left{
			padding: 8px 10px 8px 16px;
			border-radius: 0px 3px 3px 0;
			width: 100%;
		}

		.process-title--left::after{
			right: auto;
			left: -12px;
			border-left: 0;
			border-right: 12px solid #000;
			transition: border-right-color 1s linear;
		}
		.process-title.is-active{
		  background: #3f5471;
		}
		.process-title.is-active::after{
		  border-left-color: #3f5471;
		}
		.process-title.process-title--left.is-active::after{
		  border-right-color: #3f5471;
		}
		.process-box{
			text-align: left;
			position: relative;
			min-height: 220px;
		}
		.process-box.first{
			margin-top: 100px;
		}
		.process-title.is-done{
		  background:#3f5471;
		}
		.process-title.is-done::after{
		  border-left-color:#3f5471;
		}
		.process-title.process-title--left.is-done::after{
		  border-right-color:#3f5471;
		}
		.process-note{
			font-size: 14px;
			line-height: 26px;
			margin-top: 60px;
			padding: 50px;
			color: #fff;
			text-align: center;
			background: #3f5471;
			border-radius: 5px;
		}
		.cir-line{
		  width: 3px;
		  border-radius: 3px;
		  background: #ccc;
		  height: 700px;
		  display: inline-block;
		  position: relative;

		  /* керування анімацією лінії */
		  --fill: 0;              /* 0..1 */
		  --dur: 0ms;
		}

		/* залита частина лінії */
		.cir-line::before{
		  content:"";
		  position:absolute;
		  left:0;
		  top:0;
		  width:100%;
		  height:100%;
		  background:#3f5471;
		  border-radius: 3px;
		  transform-origin: top;
		  transform: scaleY(var(--fill));
		  transition: transform linear var(--dur);
		}

		/* твої кола */
		.cir1{
		  position: absolute;
		  top: 7px;
		  width: 36px;
		  height: 36px;
		  border-radius: 50%;
		  background: #3f5471;
		  left: -16px;
		  display:flex;
		  align-items:center;
		  justify-content:center;
		}
		.cir2{
		  position: relative;
		  width: 16px;
		  height: 16px;
		  border-radius: 50%;
		  background: #fff;
		  display: inline-block;
		}

		/* --- Ring fill (conic-gradient) --- */
		@property --p {
		  syntax: "<number>";
		  inherits: false;
		  initial-value: 0;
		}

		.cir1{
		  --p: 0; 
		  background: conic-gradient(#3f5471 calc(var(--p) * 1turn), #ccc 0);
		}

		/* коли активуємо коло — воно заповнюється за 1s */
		.cir1.is-filling{
		  animation: ringFill 1s linear forwards;
		}

		@keyframes ringFill{
		  from{ --p: 0; }
		  to  { --p: 1; }
		}

		/* коли коло завершене — лишаємо повністю залитим */
		.cir1.is-done{
		  --p: 1;
		}

		.option-two-row > [class*="col-"]{
		  margin-bottom: 30px;
		}
		.option-two-box .features-title{
			min-height: 75px;	
		}
		.option-two-box .features-text{
			min-height: 140px;	
		}
		.option-two-box.big{
			min-height: 584px;
		}
		.option-two-img{
			height: 100%;
			width: 100%;
			border-radius: 5px;
		}
		.option-two-img.s1{
			background: url('/dist/img/screen1.jpg');
			background-size: cover;
		}
		.option-two-img.s2{
			background: url('/dist/img/screen2.jpg');
			background-size: cover;
		}
		.option-two-box{
		  position: relative;
		  border: 2px solid #ccc;
		  background: #f0f0f0;
		  padding: 30px;
		  border-radius: 5px;
		  overflow: hidden;
		}

		@property --p {
		  syntax: "<number>";
		  inherits: false;
		  initial-value: 0;
		}

		.option-two-box::after{
		  content:"";
		  position:absolute;
		  inset:0;
		  border-radius: inherit;
		  pointer-events:none;

		  background: conic-gradient(#ed7672 calc(var(--p) * 1turn), transparent 0);

		  padding: 3px;
		  -webkit-mask:
			linear-gradient(#000 0 0) content-box,
			linear-gradient(#000 0 0);
		  -webkit-mask-composite: xor;
		  mask:
			linear-gradient(#000 0 0) content-box,
			linear-gradient(#000 0 0);
		  mask-composite: exclude;

		  opacity: 0;
		}

		.option-two-box:hover::after{
		  opacity: 1;
		  animation: borderClock 2s linear forwards;
		}

		@keyframes borderClock{
		  from{ --p: 0; }
		  to  { --p: 1; }
		}

		.option-two-box .features-title{
		  min-height: 75px;

		  color: #dadada;

		  background-image: linear-gradient(to bottom, #ed7672 0%, #ed7672 50%, #dadada 50%, #dadada 100%);
		  background-size: 100% 200%;
		  background-position: 0 100%;
		  -webkit-background-clip: text;
		  background-clip: text;
		  -webkit-text-fill-color: transparent;

		  transition: background-position 0s;
		}

		.option-two-box:hover .features-title{
		  transition: background-position 1s linear 2s;
		  background-position: 0 0;
		}
		.option-two-box:hover .features-text{
		  color: #fff;
		}

		@keyframes titleDown{
		  from { clip-path: inset(0 0 100% 0); }
		  to   { clip-path: inset(0 0 0% 0); }
		}
		.option-three-line{
		  position: relative;
		}

		.option-three-line .case-item-title i{
		  position: absolute;
		  top: 16px;
		  left: -45px;
		  color: #000;
		  font-size: 18px;
		  display: inline-block;
		  transition: color .35s ease, transform .25s ease;
		}

		.option-three-line .case-item-title{
		  color: #000;
		  transition: color .35s ease;
		}

		.option-three-line .case-item-desc{
		  position: relative;
		  padding-left: 0;
		}

		.option-three-line .case-item-desc::before{
		  content: "";
		  position: absolute;
		  left: -38px;
		  top: 0;
		  bottom: 0;
		  width: 2px;
		  background: #000;
		  border-radius: 2px;
		  transition: background .35s ease;
		}

		.option-three-line:hover .case-item-title,
		.option-three-line:hover .case-item-title i{
		  color: #ed7772;
		}

		.option-three-line:hover .case-item-desc::before{
		  background: #ed7772;
		}

		.option-three-line:hover .case-item-desc{
			color: #000;
		}
		.case-study-quote-text a, .why-text a, .case-item-desc a, .process-section-desc a, .text-slide a, .cost-text a, .benefit-box-mini a, .features-text a{
			color: #0a1a94;
			text-decoration: underline;
			transition: all .3s ease;
		}
		.why-text a:hover, .case-item-desc a:hover, .process-section-desc a:hover, .text-slide a:hover, .cost-text a:hover, .benefit-box-mini a:hover, , .features-text a:hover{
			text-decoration: none;
		}
		.option-two-box a{
			color: #dee2e6;
			text-decoration: underline;
			transition: all .3s ease;
		}
		.option-two-box a:hover{
			text-decoration: none;
		}
		.process-note a, .cost-section-cta a{
			color: #fff;
			text-decoration: underline;
			transition: all .3s ease;
		}
		.process-note a:hover, .cost-section-cta a:hover{
			text-decoration: none;
		}
		.dtr-servicebox-content a{
			color: #dadada;
			text-decoration: underline;
			transition: all .3s ease;
		}
		.dtr-servicebox-content a:hover{
			text-decoration: none;
		}
		.hero_left{
			padding-left: 10%;
		}
		.hero-wrapper {
			overflow: hidden;
		}
		.hero-image{
			width: 150%;
			position: relative;
			transform: translateX(200px);
		}
		.hero-image-services{
			width: 80%;
			float: right;
		}
		.hero-actions{
			display: flex;
			align-items: center;
			gap: 20px;
			padding-top: 20px;
			margin-bottom: 50px;
		}
		.hero-contacts{
			font-size: 12px;
			line-height: 22px;
		}
		.process-roadmap-left{
			width: 40%;
			display: inline-block;
			position: relative;
			vertical-align: top;
		}
		.process-roadmap-center{
			width: 18%;
			display: inline-block;
			text-align: center;
			vertical-align: top;
		}
		.process-roadmap-right{
			width: 40%;
			display: inline-block;
			position: relative;
			vertical-align: top;
		}
		.features-table-left{
			display: inline-block;
			width: 28%;
			vertical-align: top;
		}
		.features-table-right{
			display: inline-block;
			width: 70%;
			vertical-align: top;
		}
		.features-table-cta{
			margin-top: 30px;
			margin-bottom: 30px;
		}
		.features-table-left .features-box{
			width: 100%;
			padding: 20px 50px;
			min-height: 460px;
			position: relative;
			right: -12px;
		}
		.cost-table-left{
			width: 45%;
			display: inline-block;
			background-color: #c8d9f2;
			padding: 100px 5%;
		}
		.cost-table-right{
			width: 54%;
			display: inline-block;
			float: right;
			background-color: #323d4d;
			padding: 100px 5%;
		}
		#reason{
			background-color: #f6f0f0 !important;
		}
		.reason-table{
			padding: 80px 0px 80px 70px;
			margin-top: 30px;
			border-left: 1px solid #f0f0f0;
		}
		.option_three-left{
			border-right: 1px solid #f0f0f0;
			padding-right: 100px;
		}
		.option_three-right{
			padding-left: 80px;
		}
		.service_link_div{
			padding-left: 20px;
		}
		.service_link{
			font-size: 12px;
			text-decoration: none;
		}
		.service_link:hover{
			opacity: 0.7;
		}
		.service_link.red_dark{
			color: #5c0505;
		}
		.service_link.red_light{
			color: #ff6d6d;
		}
		.service_link.white{
			color: #fff;
		}
		.case-study-quote{
			top: 80px;
			position: relative;
			right: -100px;
		}
		.case-study-quote-div{
			padding: 30px;
			border-radius: 5px;
			border: 1px solid #f0f0f0;
			background: #fff;
			opacity: 0.95;
			width: 120%;
		}
		.case-study-text{
			font-size: 14px;
			line-height: 28px;
		}
		.case-study-quote-text{
			font-size: 14px;
			line-height: 28px;
			display: none;
		}
		.case-study-quote-text.active{
			display: block;
		}
		.case-study-quote-author{
			font-size: 14px;
			padding-top:10px;
			font-style: italic;
		}
		.case-study-img{
			border-radius: 10px;
			width: 100%;
			float: right;
		}
		.case-study-minilink{
			text-transform: uppercase;
			font-size: 12px;
			display: inline-block;
			padding: 0 10px;
			margin: 0 5px;
			cursor: pointer;
			color: #000;
		}
		.case-study-minilink.active{
			border-bottom: 1px solid #ff7575;
			color: #ff7575;
		}
		#case-tech, #case-details, #case-summary{
			padding: 0 25px;
			margin: 20px 0 20px 15px;
			border-left: 1px solid #ccc;
		}
		

		.offers_box{
			padding: 40px;
		}
		.offers_box:nth-child(1),
		.offers_box:nth-child(2) {
			border-right: 2px dotted #c9c9c9;
		}
		.offers_title{
			font-size: 32px;
			font-weight: bold;
			color: #000;
			padding-bottom: 20px;
			min-height: 100px;
			line-height: 42px;
			text-align: center;
		}	
		.offers_subtitle{
			font-size: 16px;
			line-height: 26px;
			padding-bottom: 40px;
		}	
		.offers_features{
			font-size: 14px;
		}	
		.offers_features div{
			font-weight: bold;
		}
		.offers_for{
			font-size: 14px;
			line-height: 26px;
			font-style: italic;
		}
		.offers_features ul {
			list-style: none;
			padding-left: 30px;
			margin: 0;
			min-height: 260px;
		}

		.offers_features li {
			position: relative;
			margin-bottom: 10px;
			line-height: 26px;
		}

		.offers_features li::before {
			content: "\f00c"; /* fa-check */
			font-family: "Font Awesome 6 Free";
			font-weight: 900;

			position: absolute;
			left: -30px;
			top: 2px;

			color: #28a745; /* зелена галочка */
		}
		.offer_links{
			text-align: center;
			font-size: 14px;
			padding-top: 40px;
		}
		.offer_links a{
			font-size: 14px;
		}


		.scope_left{
			padding-right: 40px;
		}
		.scope_block{
			margin-bottom: 40px;
			padding: 0 20px;
		}
		.scope_title{
			font-size: 22px;
			color: #5eead4;
			border-left: 4px solid #5eead4;
			padding-left: 12px;
			margin: 0 0 20px 0;
			font-weight: 600;
		}
		.scope_grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
			gap: 5px;
		}

		/* Стиль інтерактивної картки */
		.tile_card {
			background-color: rgba(255, 255, 255, 0.02);
			border: 1px solid rgba(255, 255, 255, 0.08);
			border-radius: 5px;
			padding: 15px;
			display: flex;
			align-items: center;
			gap: 14px;
			cursor: pointer;
			transition: all 0.2s ease-in-out;
			position: relative;
			user-select: none;
		}

		.tile_card:hover {
			border-color: rgba(94, 234, 212, 0.4);
			background-color: rgba(255, 255, 255, 0.04);
		}

		/* Приховуємо дефолтний чекбокс браузера */
		.hidden-checkbox {
			position: absolute;
			opacity: 0;
			cursor: pointer;
			height: 0;
			width: 0;
		}	
		/* Кастомний квадратний чекбокс у картці */
		.custom-checkbox {
			width: 20px;
			height: 20px;
			border: 2px solid rgba(255, 255, 255, 0.3);
			border-radius: 6px;
			display: flex;
			align-items: center;
			justifyContent: center;
			flex-shrink: 0;
			transition: all 0.2s ease;
		}

		/* Ефекти при кліку (коли інпут всередині лейбла checked) */
		.tile_card input:checked ~ .custom-checkbox {
			border-color: #5eead4;
			background-color: #5eead4;
		}

		.tile_card input:checked ~ .custom-checkbox::after {
			content: "✓";
			color: #020617;
			font-size: 12px;
			font-weight: bold;
			left: 2px;
			position: relative;
		}

		.tile_card input:checked {
			/* Цей селектор працює через JS для додавання класу стану всій картці */
		}

		/* Клас активного стану картки (додається через JS) */
		.tile_card.active {
			background-color: rgba(94, 234, 212, 0.05);
			border-color: #5eead4;
			box-shadow: 0 0 15px rgba(94, 234, 212, 0.1);
		}

		.tile_label {
			font-size: 16px;
			color: #cbd5e1;
			line-height: 1.4;
		}


		/* Нижній блок з формою захоплення */
		.constructor_cta_block {
			margin-top: 30px;
		}

		.selected-counter {
			font-size: 24px;
			margin-bottom: 25px;
			font-weight: 500;
			color: #fff;
		}

		.selected-counter span {
			color: #fff;
			font-weight: 700;
		}

		.inputs-row {
			display: flex;
			flex-wrap: wrap;
			gap: 15px;
			width: 80%;
		}

		.constructor-input {
			padding: 8px 20px;
			border-radius: 5px;
			border: 1px solid rgba(255, 255, 255, 0.1);
			background-color: #0f172a;
			color: #fff;
			font-size: 16px;
			width: 100%;
			outline: none;
			transition: border 0.2s;
		}

		.constructor-input:focus {
			border-color: #5eead4;
		}

		.constructor-submit-btn {
			padding: 8px 30px;
			border-radius: 5px;
			border: none;
			background-color: #5eead4;
			color: #020617;
			font-size: 14px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.2s;
			width: 100%;
		}

		.constructor-submit-btn:hover {
			background-color: #5eead4;
			box-shadow: 0 0 15px rgba(94, 234, 212, 0.3);
		}

		/* Повідомлення про успіх */
		.success-message {
			font-size: 16px;
			color: #5eead4;
			font-weight: 500;
			line-height: 1.6;
		}

		.hidden {
			display: none !important;
		}


		.testimonials_text{
			margin-top: 50px;
			padding: 80px 140px 80px 60px;
			background: #f0f0f0;
			font-size: 14px;
			line-height: 26px;
			position: relative;
			border-radius: 5px;
		}	
		.testimonials_title{
			font-size: 22px;
			line-height: 32px;
			font-weight: bold;
			color: #000;
		}
		.testimonials_position{
			font-size: 16px;
		}
		.testimonials_author{
			position: absolute;
			right: -50px;
			top: 120px;
		}
		.testimonials_author img{
			margin-bottom: 20px;
			border-radius: 5px;
		}
		.testimonials_text i{
			position: absolute;
			font-size: 96px;
			color: #000;
			top: -50px;
			left: 50px;
		}
		@media (max-width: 768px) {
			.case-study-quote{
				top: 0;
				right: 0;
			}
			.case-study-quote-div{
				width: 100%;
				margin-bottom: 50px;
			}
			.case-study-minilink{
				padding: 0;
			}
			.general_button{
				display: block;
			}
			.general_button_case{
				display: block;
				margin-left: 0px;
				padding: 6px 25px;
				background: #98cdf8;
				margin-top: 10px;
			}
			.experience-badge{
				text-align: center;
				margin-bottom: 20px;
			}
			.hero-image{
				display: none;
			}
			.services-press{
				width: 70%;
				margin: auto;
				margin-bottom: 10px;
			}
			#about{
				text-align: center;
			}
			.about_screen{
				margin: 60px 0;
			}
			
			.poster-about{
				margin-bottom: 50px;
			}
			.process-roadmap-left{
				width: 100%;
			}
			.process-roadmap-center{
				display: none;
			}
			.process-roadmap-right{
				width: 100%;
			}
			.process-box{
				min-height: auto;
				margin-bottom: 20px;
			}
			.process-box.first{
				margin-top: 0px;
			}
			.process-title--left::after, .process-title::after{
				display: none;
			}
			.process-note{
				padding: 30px;
			}
			.features-table-left, .features-table-right{
				width: 100%;
			}
			.features-box{
				width: 100%;
				border: none;
				padding: 30px;
				min-height: auto;
			}
			.features-table-left .features-box{
				padding: 0px 30px;
				left: 0px;
				min-height: auto;
			}
			.features-box.line-l, .features-box.line-r, .features-box.line-b{
				border: none;
			}
			.benefit-box span{
				top: 0px;
				left: 0px;
				position: relative;
			}
			.benefit-box{
				padding: 30px 30px 0 30px;
			}
			.cost-table-left{
				width: 100%;
			}
			.cost-table-right{
				width: 100%;
				padding: 30px;
			}
			.cost-chart{
				margin-top: 0px;
			}
			.cost-icon{
				display: none;
			}
			.cost-section-idea{
				padding: 0;
				background: none;
			}
			.cost-section-case{
				display: block;
				float: none;
				margin-top: 30px;
				margin-bottom: 20px;
			}
			.reason-table{
				padding: 10px;
				margin-top: 30px;
				border-left: none;
			}
			.option_three-left{
				border-right: none;
				padding-right: 0px;
			}
			.option_three-right{
				padding-left: 50px;
			}
			.testimonials_author{
				margin-top: 30px;
				position: relative;
				right: 0px;
				top: 0px;
			}
			.hero_left{
				padding: 0 5%;
			}
			.hero-actions{
				display: block;
			}
			.dtr-servicebox-content, .process_line_desc{
				min-height: auto;
			}
			.offers_box:nth-child(1),
			.offers_box:nth-child(2) {
				border-right: none;
			}
			#scope_of_work, #option_one, #services{
				padding: 0 5%;
			}
			.inputs-row{
				width: 100%;
			}
			.testimonials_text{
				padding: 40px;
			}
			.service_gap{
				display: none;
			}
			.dtr-servicebox-heading{
				min-height: auto;
				border-top: 1px solid #fff;
				padding-top: 20px;
				margin-top: 25px;
			}
			.process_box{
				margin: 10px 0;
			}
		}