@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-BoldItalic.eot');
    src: local('Inter Bold Italic'), local('Inter-BoldItalic'),
        url('../fonts/Inter-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-BoldItalic.woff2') format('woff2'),
        url('../fonts/Inter-BoldItalic.woff') format('woff'),
        url('../fonts/Inter-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-MediumItalic.eot');
    src: local('Inter Medium Italic'), local('Inter-MediumItalic'),
        url('../fonts/Inter-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-MediumItalic.woff2') format('woff2'),
        url('../fonts/Inter-MediumItalic.woff') format('woff'),
        url('../fonts/Inter-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-ThinItalicBETA.eot');
    src: local('Inter Thin Italic BETA'), local('Inter-ThinItalicBETA'),
        url('../fonts/Inter-ThinItalicBETA.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-ThinItalicBETA.woff2') format('woff2'),
        url('../fonts/Inter-ThinItalicBETA.woff') format('woff'),
        url('../fonts/Inter-ThinItalicBETA.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.eot');
    src: local('Inter Regular'), local('Inter-Regular'),
        url('../fonts/Inter-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-Regular.woff2') format('woff2'),
        url('../fonts/Inter-Regular.woff') format('woff'),
        url('../fonts/Inter-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Black.eot');
    src: local('Inter Black'), local('Inter-Black'),
        url('../fonts/Inter-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-Black.woff2') format('woff2'),
        url('../fonts/Inter-Black.woff') format('woff'),
        url('../fonts/Inter-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-BlackItalic.eot');
    src: local('Inter Black Italic'), local('Inter-BlackItalic'),
        url('../fonts/Inter-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-BlackItalic.woff2') format('woff2'),
        url('../fonts/Inter-BlackItalic.woff') format('woff'),
        url('../fonts/Inter-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-LightBETA.eot');
    src: local('Inter Light BETA'), local('Inter-LightBETA'),
        url('../fonts/Inter-LightBETA.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-LightBETA.woff2') format('woff2'),
        url('../fonts/Inter-LightBETA.woff') format('woff'),
        url('../fonts/Inter-LightBETA.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-SemiBold.eot');
    src: local('Inter Semi Bold'), local('Inter-SemiBold'),
        url('../fonts/Inter-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-SemiBold.woff2') format('woff2'),
        url('../fonts/Inter-SemiBold.woff') format('woff'),
        url('../fonts/Inter-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-ExtraBoldItalic.eot');
    src: local('Inter Extra Bold Italic'), local('Inter-ExtraBoldItalic'),
        url('../fonts/Inter-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Inter-ExtraBoldItalic.woff') format('woff'),
        url('../fonts/Inter-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.eot');
    src: local('Inter Bold'), local('Inter-Bold'),
        url('../fonts/Inter-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-Bold.woff2') format('woff2'),
        url('../fonts/Inter-Bold.woff') format('woff'),
        url('../fonts/Inter-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-ExtraLightItalicBETA.eot');
    src: local('Inter Extra Light Italic BETA'), local('Inter-ExtraLightItalicBETA'),
        url('../fonts/Inter-ExtraLightItalicBETA.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-ExtraLightItalicBETA.woff2') format('woff2'),
        url('../fonts/Inter-ExtraLightItalicBETA.woff') format('woff'),
        url('../fonts/Inter-ExtraLightItalicBETA.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-ExtraLightBETA.eot');
    src: local('Inter Extra Light BETA'), local('Inter-ExtraLightBETA'),
        url('../fonts/Inter-ExtraLightBETA.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-ExtraLightBETA.woff2') format('woff2'),
        url('../fonts/Inter-ExtraLightBETA.woff') format('woff'),
        url('../fonts/Inter-ExtraLightBETA.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-ExtraBold.eot');
    src: local('Inter Extra Bold'), local('Inter-ExtraBold'),
        url('../fonts/Inter-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-ExtraBold.woff2') format('woff2'),
        url('../fonts/Inter-ExtraBold.woff') format('woff'),
        url('../fonts/Inter-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-ThinBETA.eot');
    src: local('Inter Thin BETA'), local('Inter-ThinBETA'),
        url('../fonts/Inter-ThinBETA.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-ThinBETA.woff2') format('woff2'),
        url('../fonts/Inter-ThinBETA.woff') format('woff'),
        url('../fonts/Inter-ThinBETA.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-LightItalicBETA.eot');
    src: local('Inter Light Italic BETA'), local('Inter-LightItalicBETA'),
        url('../fonts/Inter-LightItalicBETA.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-LightItalicBETA.woff2') format('woff2'),
        url('../fonts/Inter-LightItalicBETA.woff') format('woff'),
        url('../fonts/Inter-LightItalicBETA.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Italic.eot');
    src: local('Inter Italic'), local('Inter-Italic'),
        url('../fonts/Inter-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-Italic.woff2') format('woff2'),
        url('../fonts/Inter-Italic.woff') format('woff'),
        url('../fonts/Inter-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-SemiBoldItalic.eot');
    src: local('Inter Semi Bold Italic'), local('Inter-SemiBoldItalic'),
        url('../fonts/Inter-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Inter-SemiBoldItalic.woff') format('woff'),
        url('../fonts/Inter-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Medium.eot');
    src: local('Inter Medium'), local('Inter-Medium'),
        url('../fonts/Inter-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-Medium.woff2') format('woff2'),
        url('../fonts/Inter-Medium.woff') format('woff'),
        url('../fonts/Inter-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

:root {
	--bg-primary: #f8fafc;
	--bg-secondary: #f1f5f9;
	--bg-tertiary: #e2e8f0;
	--text-primary: #1e293b;
	--text-secondary: #475569;
	--border-color: #cbd5e1;
	--scrollbar-color: #3f5a73;
	--accent-color: #0d5eb5;
	--accent-hover: #1672d0;
}

body {
	color: var(--text-primary);
	font-size: 1rem;
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
	font-family: "Inter", Roboto, Arial, sans-serif;
	background: var(--bg-primary);
	padding-top: 80px;
	/* Same as header height */
}

button,
input {
	overflow: visible;
}

body::-webkit-scrollbar {
	width: 6px; /* ширина scrollbar */
}

body::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-color); /* цвет плашки */
}

.link,
a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.3s;
}

a {
	background-color: initial;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: cover;
}

h1 {
	margin-bottom: 30px;
	font-weight: 700;
}

.section {
	margin-bottom: 70px;
}

.up-arrow-btn {
	border-radius: 30px;
	background-color: var(--bg-tertiary);
	border-color: transparent;
	border-style: solid;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	z-index: 20;
	bottom: 26px;
	right: 26px;
	width: 40px;
	height: 40px;
	position: fixed;
}

.btn-up_hide {
	display: none;
}

/* Hero section styles */
#hero {
	position: relative;
	overflow: hidden;
}

#hero .container {
	position: relative;
	z-index: 1;
}

#hero-content .grid {
	transition: all 0.3s ease;
}

#hero-content .bg-\[\#1f2e4a\] {
	transition: all 0.3s ease;
}

#hero-content .bg-\[\#1f2e4a\]:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

#hero-image img {
	margin-top: auto;
	object-position: bottom;
}

@media (max-width: 768px) {
	#hero {
		min-height: auto;
		height: auto;
	}

	#hero-content {
		padding-bottom: 2rem;
	}
}

/* Стили для секции НАШИ ВОЗМОЖНОСТИ */
#capabilities .rounded-lg {
	border-radius: 0.75rem;
	overflow: hidden;
}

#capabilities .grid {
	margin-left: auto;
	margin-right: auto;
}

#capabilities img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.5s ease;
}

#capabilities .overflow-hidden:hover img {
	transform: scale(1.05);
}

#capabilities .px-6 {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
	#capabilities .grid {
		gap: 1rem;
	}

	#capabilities .h-64 {
		height: 14rem;
	}
}

/* Стили для секции ПОЧЕМУ МЫ */
#why-us svg {
	transition: transform 0.3s ease;
}

#why-us .flex:hover svg {
	transform: scale(1.1);
}

#why-us h3 {
	position: relative;
	display: inline-block;
}

#why-us h3::after {
	content: "";
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--accent-color);
	transition: width 0.3s ease;
}

#why-us .flex:hover h3::after {
	width: 70%;
}

@media (max-width: 768px) {
	#why-us .w-20 {
		width: 4rem;
	}

	#why-us .h-20 {
		height: 4rem;
	}

	#why-us .mb-16 {
		margin-bottom: 2.5rem;
	}
}

/* Стили для секции НАШИ КЛИЕНТЫ */
#clients {
	background-color: var(--bg-secondary);
}

#clients .header {
	position: relative;
	display: inline-block;
}

#clients .header::after {
	content: "";
	position: absolute;
	width: 60px;
	height: 2px;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	background-color: white;
	transition: width 0.3s ease;
}

#clients .header:hover::after {
	width: 100px;
}

#clients .client-logo {
	transition: transform 0.3s ease, filter 0.3s ease;
	filter: brightness(0);
	opacity: 0.8;
}

#clients .flex:hover .client-logo {
	transform: scale(1.1);
	opacity: 1;
}

@media (max-width: 768px) {
	#clients .client-logo {
		height: 2.5rem;
	}
}

/* Styles for feature blocks */
#features .grid > div {
	background-color: #1b263c;
	border-color: #293a5c;
	border-width: 1px;
	color: #fff;
}

#features .grid > div:hover {
	background-color: #293a5c;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

#features .grid > div p {
	color: #a0aec0;
}

/* Styles for FAQ accordion */
#faq-accordion .bg-\[\#1b263c\] {
	background-color: var(--bg-secondary);
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#faq-accordion details {
	overflow: hidden;
}

#faq-accordion summary {
	list-style: none;
}

#faq-accordion summary::-webkit-details-marker {
	display: none;
}

#faq-accordion summary h3 {
	transition: color 0.2s ease;
	color: var(--text-primary);
}

#faq-accordion details[open] summary h3 {
	color: var(--accent-color);
}

#faq-accordion details > div {
	transform-origin: top center;
	animation: faq-slide-down 0.3s ease forwards;
}

#faq-accordion details:not([open]) > div {
	display: none;
}

@keyframes faq-slide-down {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

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

#faq-accordion details:hover summary h3 {
	color: var(--accent-color);
}

#faq-accordion .bg-\[\#1b263c\]:hover {
	background-color: var(--bg-tertiary);
	border-color: var(--accent-color);
	transform: translateY(-2px);
}

#faq-section {
	position: relative;
	overflow: hidden;
}

#faq-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at top right, rgba(13, 94, 181, 0.05), transparent 60%);
	pointer-events: none;
}

/* Header styles */
.site-header {
	background-color: var(--bg-primary);
	padding: 1rem 0;
	border-bottom: 1px solid var(--border-color);
}

.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.logo-container img {
	max-height: 40px;
}

.contact-info {
	display: flex;
	align-items: center;
}

.address-block {
	margin-right: 2rem;
	font-size: 0.9rem;
}

.address-block .street {
	color: var(--text-primary);
	font-weight: 500;
}

.address-block .hours {
	color: var(--text-secondary);
	font-size: 0.8rem;
}

.social-icons {
	display: flex;
	gap: 0.75rem;
	margin-right: 2rem;
}

.social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.1);
	color: var(--text-primary);
	transition: background-color 0.3s ease;
}

.social-icons a:hover {
	background-color: var(--bg-tertiary);
}

.phone-number {
	font-weight: 500;
	color: var(--text-primary);
	font-size: 1rem;
}

@media (max-width: 768px) {
	.header-container {
		flex-direction: column;
		gap: 1rem;
	}

	.contact-info {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	.address-block {
		margin-right: 0;
		text-align: center;
	}

	.social-icons {
		margin-right: 0;
	}
}

/* Styles for label calculator form */
#calculator-form {
	background-color: var(--bg-primary);
}

#calculator-form h2 {
	font-size: 2rem;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-primary);
}

#calculator-form .text-gray-600 {
	color: var(--text-secondary);
}

#calculator-form select option {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}

#calculator-form input[type="number"]::-webkit-inner-spin-button,
#calculator-form input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#calculator-form input[type="number"] {
	-moz-appearance: textfield;
}

#calculator-form button[type="submit"] {
	background-color: var(--accent-color);
	min-width: 200px;
	font-weight: 600;
	letter-spacing: 1px;
}

#calculator-form button[type="submit"]:hover {
	background-color: var(--accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
	#calculator-form h2 {
		font-size: 1.5rem;
	}

	#calculator-form .md\:col-span-2 button {
		width: 100%;
	}
}

/* Styles for steps navigation in calculator form */
#calculator-form .steps-nav {
	margin-bottom: 2.5rem;
}

#calculator-form .step-item {
	transition: all 0.3s ease;
}

#calculator-form .step-circle {
	transition: all 0.3s ease;
	box-shadow: 0 0 0 4px #151c2a;
}

#calculator-form .step-item.active .step-circle {
	background-color: #293a5c;
	color: white;
}

#calculator-form .step-item:not(.active) .step-circle {
	background-color: #1b263c;
	color: #7b8aa9;
}

#calculator-form .step-item.active .step-label {
	color: white;
}

#calculator-form .step-item:not(.active) .step-label {
	color: #7b8aa9;
}

#calculator-form .step-line {
	background: linear-gradient(to right, #293a5c 50%, #1b263c 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all 0.5s ease;
}

#calculator-form .steps-nav.step-2-active .step-line {
	background-position: left bottom;
}

#calculator-form .steps-nav.step-2-active .step-item:nth-child(3) .step-circle {
	background-color: #293a5c;
	color: white;
}

#calculator-form .steps-nav.step-2-active .step-item:nth-child(3) .step-label {
	color: white;
}

@media (max-width: 640px) {
	#calculator-form .step-label {
		font-size: 0.75rem;
	}

	#calculator-form .step-circle {
		height: 2.5rem;
		width: 2.5rem;
		font-size: 1rem;
	}
}

/* Styles for form error messages */
#calculator-form .error-message {
	color: #ff4d6a;
	font-size: 0.8rem;
	margin-top: 0.25rem;
	display: none;
}

#calculator-form .error-message.active {
	display: block;
	animation: fadeIn 0.3s ease;
}

#calculator-form .input-error {
	border-color: #ff4d6a !important;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}

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

/* Enhanced styles for select dropdown options */
#calculator-form select {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-overflow: ellipsis;
}

#calculator-form select option {
	background-color: #1b263c;
	color: #fff;
	padding: 12px 16px;
	font-size: 14px;
	cursor: pointer;
	border-bottom: 1px solid #293a5c;
	transition: background-color 0.2s ease;
}

#calculator-form select option:hover,
#calculator-form select option:focus {
	background-color: #293a5c !important;
	color: white;
}

#calculator-form select::-ms-expand {
	display: none;
}

/* Custom styling for select container */
#calculator-form .select-container {
	position: relative;
	width: 100%;
}

#calculator-form .select-container::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #a0aec0;
	pointer-events: none;
	transition: transform 0.3s ease;
}

#calculator-form .select-container:focus-within::after {
	transform: translateY(-50%) rotate(180deg);
	border-top-color: #fff;
}

/* Enhance input focus state */
#calculator-form select:focus,
#calculator-form input:focus {
	border-color: #3e5686;
	box-shadow: 0 0 0 2px rgba(62, 86, 134, 0.3);
	outline: none;
}

/* Make dropdown more consistent across browsers */
@-moz-document url-prefix() {
	#calculator-form select {
		color: #fff;
		background-color: #1b263c;
	}

	#calculator-form select option {
		background-color: #1b263c;
	}
}

/* Webkit browsers custom scrollbar for select */
#calculator-form select::-webkit-scrollbar {
	width: 8px;
}

#calculator-form select::-webkit-scrollbar-track {
	background: #151c2a;
}

#calculator-form select::-webkit-scrollbar-thumb {
	background-color: #293a5c;
	border-radius: 4px;
	border: 2px solid #151c2a;
}

/* Modal Animation Styles */
.modal {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.3s, opacity 0.3s ease;
}

.modal.modal-visible {
	visibility: visible;
	opacity: 1;
}

.modal-container {
	overflow: scroll;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-overlay {
	transition: opacity 0.3s ease;
}

/* Cookie modal specific styles */
#cookie-modal .modal-container {
	transform: translateY(100%);
	transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

#cookie-modal.modal-visible .modal-container {
	transform: translateY(0);
}

/* Special cookie modal class that doesn't block page interactions */
.cookie-modal {
	pointer-events: none;
	/* This allows clicks to pass through to the elements behind */
}

.cookie-modal .modal-container {
	pointer-events: auto;
	/* But the modal container itself should receive clicks */
}

/* Additional styling for modal close button hover */
.modal__close:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal__close {
	z-index: 1000;
	cursor: pointer;
	transition: all 0.2s ease;
}

/* Modal entry animation */
@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-20px);
	}

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

/* Modal exit animation */
@keyframes modalFadeOut {
	from {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	to {
		opacity: 0;
		transform: scale(0.95) translateY(-20px);
	}
}

/* Success checkmark animation */
.modal-content svg path {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: draw 1s ease forwards 0.3s;
}

@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* Modal success animation */
.modal-container .modal-content {
	opacity: 0;
	transform: translateY(20px);
}

.modal-container-visible .modal-content {
	opacity: 1;
	transform: translateY(0);
	transition: all 0.5s ease 0.1s;
}

/* Improve modal overlay animation */
.modal-overlay {
	backdrop-filter: blur(0px);
	transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.modal-visible .modal-overlay {
	backdrop-filter: blur(2px);
}

/* Additional Modern Workflow Effects */
#workflow {
	position: relative;
	background: var(--bg-secondary);
	overflow: hidden;
}

.workflow-container {
	position: relative;
	padding: 2rem 0;
}

.path-dot {
	position: absolute;
	width: 8px;
	height: 8px;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	z-index: 1;
}

.path-dot:nth-child(1) {
	top: 40%;
	left: 25%;
	animation: pulse-light 3s infinite alternate ease-in-out;
}

.path-dot:nth-child(2) {
	top: 60%;
	left: 50%;
	animation: pulse-light 3s infinite alternate-reverse ease-in-out;
	animation-delay: 0.5s;
}

.path-dot:nth-child(3) {
	top: 40%;
	right: 25%;
	animation: pulse-light 3s infinite alternate ease-in-out;
	animation-delay: 1s;
}

.workflow-title {
	background: linear-gradient(90deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%);
	background-size: 200% auto;
	color: var(--text-primary);
	-webkit-background-clip: text;
	background-clip: text;
	animation: shine 3s linear infinite;
	position: relative;
}

.workflow-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	width: 40px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #ffffff, transparent);
	transform: translateX(-50%);
}

.workflow-circle {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-color);
	color: white;
	border-radius: 50%;
	font-size: 2rem;
	font-weight: bold;
	position: relative;
	z-index: 2;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.workflow-circle::before {
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.workflow-circle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	background-size: 200% 200%;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.workflow-circle:hover::before {
	opacity: 1;
}

.workflow-circle:hover::after {
	opacity: 1;
	animation: shine-circle 2s infinite;
}

.workflow-item {
	position: relative;
	z-index: 1;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.workflow-item.animate {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(var(--step-index) * 0.15s);
}

.workflow-circle:hover {
	transform: scale(1.1);
	background: var(--accent-hover);
	color: white;
	box-shadow: 0 8px 25px rgba(61, 90, 128, 0.5);
}

.workflow-circle span {
	position: relative;
	z-index: 2;
}

.workflow-item h3 {
	position: relative;
	transform: translateY(0);
	transition: transform 0.3s ease;
}

.workflow-item:hover h3 {
	transform: translateY(-5px);
}

/* Pulse animation for mobile click effect */
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}

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

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

.workflow-circle.pulse {
	animation: pulse 1s 1;
}

/* Subtle glow for path dots */
@keyframes pulse-light {
	0% {
		transform: scale(1);
		opacity: 0.3;
	}

	100% {
		transform: scale(1.5);
		opacity: 0.8;
	}
}

/* Shine effect animations */
@keyframes shine {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 200% 50%;
	}
}

@keyframes shine-circle {
	0% {
		background-position: 200% 200%;
	}

	100% {
		background-position: 0% 0%;
	}
}

/* Active item styles for mobile */
.workflow-item.active-item .workflow-circle {
	background: var(--accent-hover);
	color: white;
	transform: scale(1.1);
}

/* Media queries for responsive design */
@media (max-width: 768px) {
	.workflow-container {
		padding: 0;
	}

	.workflow-circle {
		width: 70px;
		height: 70px;
		font-size: 1.75rem;
	}

	.workflow-item {
		margin-bottom: 2rem;
	}

	.workflow-item:last-child {
		margin-bottom: 0;
	}

	.workflow-title {
		margin-bottom: 2rem;
	}

	.path-dot {
		display: none;
	}
}

/* Delivery icon animation */
.delivery-icon svg {
	transition: transform 0.3s ease;
}

.workflow-item:hover .delivery-icon svg {
	transform: translateX(5px);
	color: #ffffff;
}

/* Стили для модальных окон */
.modal .modal-container {
	transform: scale(0.95);
	opacity: 0;
	overflow: scroll;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal .modal-overlay {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.modal input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.modal input.border-red-500 {
	border-color: #ef4444;
}

.modal input.border-red-500:focus {
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}

[data-modal] {
	cursor: pointer;
}

/* Text Block Styles Without Classes */
.text-block h1,
.text-block h2,
.text-block h3,
.text-block h4,
.text-block h5,
.text-block h6,
.text-block p,
.text-block ul,
.text-block ol,
.text-block blockquote {
	margin: 0;
	padding: 0;
	color: var(--text-primary);
	font-family: "Inter", Roboto, Arial, sans-serif;
}

/* Reset the gradient text for headings in light mode */
.text-block h1,
.privacy h1,
.terms h1,
.page-content h1 {
	background: none;
	color: var(--text-primary);
	-webkit-background-clip: unset;
	background-clip: unset;
}

/* Client logo adjustments for light mode */
#clients .client-logo {
	filter: brightness(0);
	/* Make logos black in light mode */
	opacity: 0.8;
}

#clients .client-logo:hover {
	opacity: 1;
}

/* Headings */
.text-block h1 {
	font-size: 2.75rem;
	line-height: 1.2;
	font-weight: 700;
	margin-bottom: 1.5rem;
}

.text-block h2 {
	font-size: 2.25rem;
	line-height: 1.2;
	font-weight: 700;
	margin-bottom: 1.25rem;
	position: relative;
}

.text-block h2::after {
	content: "";
	position: absolute;
	bottom: -0.5rem;
	left: 0;
	height: 3px;
	width: 3rem;
	background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
}

.text-block h2.centered {
	text-align: center;
}

.text-block h2.centered::after {
	left: 50%;
	transform: translateX(-50%);
}

.text-block h3 {
	font-size: 1.5rem;
	line-height: 1.3;
	font-weight: 600;
	margin-bottom: 1rem;
}

.text-block div {
	margin-bottom: 1rem;
}

.text-block h4 {
	font-size: 1.25rem;
	line-height: 1.4;
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.text-block h5 {
	font-size: 1.1rem;
	line-height: 1.4;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.text-block h6 {
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--text-secondary);
}

/* Paragraphs */
.text-block p {
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 1rem;
	color: var(--text-primary);
}

.text-block p.large {
	font-size: 1.125rem;
	line-height: 1.75;
}

.text-block p.small {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--text-secondary);
}

.text-block p.lead {
	font-size: 1.25rem;
	line-height: 1.6;
	font-weight: 300;
	color: var(--text-primary);
	margin-bottom: 1.5rem;
}

/* Lists */
.text-block ul,
.text-block ol {
	margin-bottom: 1.5rem;
	padding-left: 1.5rem;
	color: var(--text-primary);
}

.text-block li {
	margin-bottom: 0.5rem;
	line-height: 1.6;
}

/* Standard list styles */
.text-block ul {
	list-style-type: disc;
}

.text-block ol {
	list-style-type: decimal;
}

/* Nested list styles */
.text-block ul ul,
.text-block ol ul {
	list-style-type: circle;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.text-block ul ul ul,
.text-block ol ul ul {
	list-style-type: square;
}

.text-block ol ol,
.text-block ul ol {
	list-style-type: lower-alpha;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.text-block ol ol ol,
.text-block ul ol ol {
	list-style-type: lower-roman;
}

/* Custom list types */
.text-block ul.disc {
	list-style-type: disc;
}

.text-block ul.circle {
	list-style-type: circle;
}

.text-block ul.square {
	list-style-type: square;
}

.text-block ol.decimal {
	list-style-type: decimal;
}

.text-block ol.alpha {
	list-style-type: lower-alpha;
}

.text-block ol.roman {
	list-style-type: lower-roman;
}

.text-block ol.upper-alpha {
	list-style-type: upper-alpha;
}

.text-block ol.upper-roman {
	list-style-type: upper-roman;
}

/* Custom colored list styles */
.text-block ul.colored-disc {
	list-style: none;
	padding-left: 0;
}

.text-block ul.colored-disc li {
	position: relative;
	padding-left: 1.5rem;
}

.text-block ul.colored-disc li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--accent-color);
	font-size: 1.2em;
}

/* Highlighted list items */
.text-block ul.check-list {
	list-style: none;
	padding-left: 0;
}

.text-block ul.check-list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.75rem;
}

.text-block ul.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1rem;
	height: 1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233d5a80'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7'%3E%3C/path%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Arrow list style */
.text-block ul.arrow-list {
	list-style: none;
	padding-left: 0;
}

.text-block ul.arrow-list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.75rem;
}

.text-block ul.arrow-list li::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--accent-color);
}

/* Inline list style */
.text-block ul.inline {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	list-style: none;
}

.text-block ul.inline li {
	margin-right: 1.5rem;
}

/* Two-column list for desktop */
@media (min-width: 768px) {
	.text-block ul.two-columns {
		column-count: 2;
		column-gap: 2rem;
	}

	.text-block ul.three-columns {
		column-count: 3;
		column-gap: 2rem;
	}
}

/* Bordered list */
.text-block ul.bordered {
	list-style: none;
	padding-left: 0;
}

.text-block ul.bordered li {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--border-color);
}

.text-block ul.bordered li:first-child {
	border-top: 1px solid var(--border-color);
}

/* Blockquotes */
.text-block blockquote {
	border-left: 3px solid #3d5a80;
	padding: 0.5rem 0 0.5rem 1.5rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: #a0aec0;
}

.text-block blockquote p {
	color: #a0aec0;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

.text-block blockquote cite {
	display: block;
	font-size: 0.9rem;
	font-weight: 500;
	font-style: normal;
	color: #718096;
}

/* Links */
.text-block a:not(.btn):not([class]) {
	color: #3d5a80;
	text-decoration: none;
	border-bottom: 1px solid rgba(61, 90, 128, 0.3);
	transition: color 0.3s ease, border-color 0.3s ease;
}

.text-block a:not(.btn):not([class]):hover {
	color: #5681bd;
	border-bottom-color: #5681bd;
}

/* Tables */
.text-block table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 1.5rem 0;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.text-block thead {
	background: linear-gradient(90deg, #293a5c, #3d5a80);
	color: white;
}

.text-block th {
	text-align: left;
	padding: 1rem;
	font-weight: 600;
	border-bottom: 2px solid rgba(255, 255, 255, 0.1);
	position: relative;
}

.text-block th:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 25%;
	height: 50%;
	width: 1px;
	background-color: rgba(255, 255, 255, 0.2);
}

.text-block tbody tr {
	background-color: #f2f6ff;
	transition: background-color 0.2s ease;
}

.text-block tbody tr:not(:last-child) {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.text-block td {
	padding: 0.75rem 1rem;
	color: #1f2a3c;
	vertical-align: middle;
}

.text-block td:not(:last-child) {
	border-right: 1px solid rgba(0, 0, 0, 0.05);
}

/* Special table styles */
.text-block table.striped tbody tr:nth-child(even) {
	background-color: var(--bg-tertiary);
}

.text-block table.bordered {
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.text-block table.bordered th,
.text-block table.bordered td {
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.text-block table.compact th,
.text-block table.compact td {
	padding: 0.5rem 0.75rem;
	font-size: 0.9rem;
}

/* Responsive table */
@media (max-width: 768px) {
	.text-block .table-responsive {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.text-block table.stack-mobile {
		display: block;
	}

	.text-block table.stack-mobile thead {
		display: none;
	}

	.text-block table.stack-mobile tbody,
	.text-block table.stack-mobile tr,
	.text-block table.stack-mobile td {
		display: block;
		width: 100%;
	}

	.text-block table.stack-mobile tr {
		margin-bottom: 1rem;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 0.5rem;
		overflow: hidden;
	}

	.text-block table.stack-mobile td {
		padding-left: 50%;
		position: relative;
		text-align: right;
		border-right: none;
	}

	.text-block table.stack-mobile td::before {
		content: attr(data-label);
		position: absolute;
		left: 1rem;
		width: 45%;
		padding-right: 0.5rem;
		text-align: left;
		font-weight: 600;
		color: #a0aec0;
	}
}

/* Text utilities */
.text-block .accent {
	color: #3d5a80;
}

.text-block .muted {
	color: #718096;
}

.text-block .text-container {
	max-width: 65ch;
	margin-left: auto;
	margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.text-block h1 {
		font-size: 2rem;
	}

	.text-block h2 {
		font-size: 1.75rem;
	}

	.text-block h3 {
		font-size: 1.35rem;
	}

	.text-block p.lead {
		font-size: 1.125rem;
	}
}

/* Section styles for text blocks */
.text-block section:not([class]) {
	padding: 4rem 0;
	background: linear-gradient(135deg, #1b263c 0%, #0d1b2a 100%);
}

.text-block article {
	max-width: 800px;
	margin: 0 auto;
	padding: 1.5rem;
}

/* Dividers */
.text-block hr {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, #3d5a80, transparent);
	margin: 2.5rem 0;
}

/* Page Layout Without Hero */
.page-no-hero {
	background: var(--bg-primary);
	padding-top: 100px;
	/* Extra padding for better spacing on non-hero pages */
}

.page-no-hero .container {
	position: relative;
	z-index: 1;
}

.privacy,
.terms,
.page-content {
	padding: 1rem 0 4rem;
	min-height: 80vh;
}

.privacy h1,
.terms h1,
.page-content h1 {
	font-size: 2.5rem;
	line-height: 1.2;
	font-weight: 700;
	margin-bottom: 2rem;
	text-align: center;
	color: var(--text-primary);
	position: relative;
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
}

.privacy h1::after,
.terms h1::after,
.page-content h1::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -12px;
	width: 80px;
	height: 3px;
	background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
	transform: translateX(-50%);
}

/* Add appropriate container spacing */
.container:not(.container-fluid) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Apply text block styles for content pages */
.privacy .text-block,
.terms .text-block,
.page-content .text-block {
	background-color: #ffffff;
	border-radius: 0.75rem;
	padding: 2rem;
	margin-top: 2rem;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--border-color);
}

@media (max-width: 768px) {
	.privacy,
	.terms,
	.page-content {
		padding: 5rem 0 3rem;
	}

	.privacy h1,
	.terms h1,
	.page-content h1 {
		font-size: 2rem;
	}

	.privacy .text-block,
	.terms .text-block,
	.page-content .text-block {
		padding: 1.5rem;
	}
}

/* Logo styles */
#logo a {
	display: block;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

#logo a:hover {
	opacity: 0.9;
	transform: scale(1.02);
}

[class*="copyrights-pane"] {
	display: none !important;
}

[class*="ground-pane"] {
	filter: grayscale(1);
}

/* Animation styles for 404 page and site-wide animations */
@keyframes float-slow {
	0% {
		transform: translateY(0) translateX(0);
	}

	50% {
		transform: translateY(-10px) translateX(10px);
	}

	100% {
		transform: translateY(0) translateX(0);
	}
}

@keyframes pulse-slow {
	0% {
		opacity: 0.4;
	}

	50% {
		opacity: 0.6;
	}

	100% {
		opacity: 0.4;
	}
}

.animate-float-slow {
	animation: float-slow 6s ease-in-out infinite;
}

.animate-pulse-slow {
	animation: pulse-slow 4s ease-in-out infinite;
}

/* Add responsive animations - disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.animate-pulse-slow,
	.animate-float-slow {
		animation: none;
	}
}

#footer {
	min-height: 400px;
}

/* Fixed header styles to prevent content overlap */
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 15;
	transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Header behind modal - ensure it stays behind modal content */
#header.header-behind-modal {
	z-index: 1;
}

/* Styles for when scrolling down - can add header shrinking effect */
#header.scrolled {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Hidden header when scrolling down (optional feature) */
#header.header-hidden {
	transform: translateY(-100%);
}

/* Service Detail Page Animations */
.animate-fade-in {
	animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Service detail page styles */
.service-detail-hero {
	position: relative;
	overflow: hidden;
}

.service-detail-hero h1 {
	position: relative;
	z-index: 2;
}

.service-detail-hero .container {
	position: relative;
	z-index: 1;
}

.service-price-card {
	transition: all 0.3s ease;
}

.service-price-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Other technologies section */
.other-tech-card {
	transition: all 0.3s ease;
}

.other-tech-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.other-tech-card img {
	transition: transform 0.5s ease;
}

.other-tech-card:hover img {
	transform: scale(1.05);
}

/* Styles from core/templates/header.html */
.background-animate {
	background-size: 400%;
	animation: gradient-animation 8s ease infinite;
}

@keyframes gradient-animation {
	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

/* Styles from core/templates/modals.html */
@keyframes slide-in-right {
	from {
		transform: translateX(100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.animate-slide-in-right {
	animation: slide-in-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Styles from core/templates/blocks/features.html */
/* Animation delays for staggered effects */
.animation-delay-300 {
	animation-delay: 0.3s;
}

.animation-delay-600 {
	animation-delay: 0.6s;
}

.animation-delay-900 {
	animation-delay: 0.9s;
}

.animation-delay-1500 {
	animation-delay: 1.5s;
}

.animation-delay-2500 {
	animation-delay: 2.5s;
}

.animation-delay-3500 {
	animation-delay: 3.5s;
}

/* Enhanced float animations for particles */
@keyframes float-slow {
	0%,
	100% {
		transform: translateY(0) translateX(0);
	}

	25% {
		transform: translateY(-15px) translateX(10px);
	}

	50% {
		transform: translateY(-25px) translateX(-5px);
	}

	75% {
		transform: translateY(-15px) translateX(-10px);
	}
}

@keyframes float-medium {
	0%,
	100% {
		transform: translateY(0) translateX(0);
	}

	25% {
		transform: translateY(-10px) translateX(8px);
	}

	50% {
		transform: translateY(-20px) translateX(-8px);
	}

	75% {
		transform: translateY(-10px) translateX(-4px);
	}
}

@keyframes float-fast {
	0%,
	100% {
		transform: translateY(0) translateX(0);
	}

	25% {
		transform: translateY(-8px) translateX(5px);
	}

	50% {
		transform: translateY(-15px) translateX(-5px);
	}

	75% {
		transform: translateY(-8px) translateX(-2px);
	}
}

.animate-float-slow {
	animation: float-slow 15s ease-in-out infinite;
}

.animate-float-medium {
	animation: float-medium 10s ease-in-out infinite;
}

.animate-float-fast {
	animation: float-fast 7s ease-in-out infinite;
}

/* Enhanced pulse animation for background elements */
@keyframes pulse-slow {
	0%,
	100% {
		opacity: 0.4;
	}

	50% {
		opacity: 0.7;
	}
}

.animate-pulse-slow {
	animation: pulse-slow 8s ease-in-out infinite;
}

/* Enhanced shimmer animation */
@keyframes shimmer-fast {
	100% {
		transform: translateX(100%);
	}
}

.animate-shimmer-fast {
	animation: shimmer-fast 1.5s forwards;
}

/* Enhanced text gradient animation */
@keyframes text-gradient-fast {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.animate-text-gradient-fast {
	background-size: 200% auto;
	animation: text-gradient-fast 3s linear infinite;
}

/* Enhanced background animate for rainbow line */
@keyframes background-animate-fast {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.background-animate-fast {
	background-size: 400% 400%;
	animation: background-animate-fast 5s ease infinite;
}

/* Styles from core/templates/blocks/contacts.html */
/* Input focus effect */
.input-with-focus.focused label,
.input-with-focus input:focus ~ label,
.input-with-focus input:not(:placeholder-shown) ~ label,
.input-with-focus textarea:focus ~ label,
.input-with-focus textarea:not(:placeholder-shown) ~ label {
	top: -10px;
	left: 10px;
	font-size: 0.75rem;
	padding: 0 4px;
	background-color: white;
	border-radius: 4px;
	color: #3b82f6;
}

/* Animation for background */
.background-animate {
	background-size: 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

/* Animation for text gradient */
.animate-text-gradient {
	background-size: 200% auto;
	animation: textGradient 5s ease-in-out infinite alternate;
}

@keyframes textGradient {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}

/* Shimmer effect for buttons */
@keyframes shimmer {
	100% {
		transform: translateX(100%);
	}
}

.animate-shimmer {
	animation: shimmer 1.5s infinite;
}

/* Floating animations */
@keyframes float-slow {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-20px);
	}
}

@keyframes float-medium {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-15px);
	}
}

@keyframes float-fast {
	0%,
	100% {
		transform: translateY(0);
	}

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

.animate-float-slow {
	animation: float-slow 6s ease-in-out infinite;
}

.animate-float-medium {
	animation: float-medium 4s ease-in-out infinite;
}

.animate-float-fast {
	animation: float-fast 3s ease-in-out infinite;
}

/* Animation delays */
.animation-delay-1000 {
	animation-delay: 1s;
}

.animation-delay-2000 {
	animation-delay: 2s;
}

.animation-delay-3000 {
	animation-delay: 3s;
}

/* Pulsing animation */
@keyframes pulse-slow {
	0%,
	100% {
		opacity: 0.7;
	}

	50% {
		opacity: 0.4;
	}
}

.animate-pulse-slow {
	animation: pulse-slow 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Spin animation */
@keyframes spin-slow {
	from {
		transform: rotate(0deg);
	}

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

.animate-spin-slow {
	animation: spin-slow 30s linear infinite;
}

/* Scroll-triggered animations */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.active {
	opacity: 1;
	transform: translateY(0);
}

/* Enhanced hover effects for paragraphs */
.hover-paragraph {
	padding-left: 1rem;
	transform: translateX(0);
	transition: transform 0.3s ease-out;
}

.hover-paragraph:hover {
	transform: translateX(5px);
}

/* Feature icon animations */
.feature-icon {
	transform: scale(1);
	transition: transform 0.3s ease-out;
}

.feature-item:hover .feature-icon {
	transform: scale(1.15);
}

/* Styles from core/templates/blocks/about.html */
/* Animation for scroll reveal */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
	opacity: 1;
	transform: translateY(0);
}

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

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

.animate-spin-slow {
	animation: spin-slow 20s linear infinite;
}

/* Enhanced hover effects for paragraphs */
.hover-paragraph {
	transition: all 0.3s ease;
}

.hover-paragraph:hover {
	transform: translateX(5px);
	background: linear-gradient(to right, rgba(59, 130, 246, 0.05), transparent);
	border-radius: 4px;
}

/* Enhanced feature icons animation */
.feature-item {
	transition: all 0.3s ease;
}

.feature-item:hover {
	transform: translateX(5px);
}

.feature-icon {
	transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
	transform: scale(1.2);
}

/* Gallery item staggered animations */
.gallery-item {
	opacity: 0;
	animation: fadeInUp 0.6s ease forwards;
}

.gallery-item:nth-child(1) {
	animation-delay: 0.3s;
}

.gallery-item:nth-child(2) {
	animation-delay: 0.5s;
}

.gallery-item:nth-child(3) {
	animation-delay: 0.7s;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

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

/* Shimmer effect for button */
@keyframes shimmer {
	100% {
		transform: translateX(100%);
	}
}

.animate-shimmer {
	animation: shimmer 1.5s infinite;
}

/* Enhanced animation delays */
.animation-delay-1000 {
	animation-delay: 1s;
}

.animation-delay-2000 {
	animation-delay: 2s;
}

.animation-delay-3000 {
	animation-delay: 3s;
}

/* Float animations for particles */
@keyframes float-slow {
	0%,
	100% {
		transform: translateY(0) translateX(0);
	}

	25% {
		transform: translateY(-15px) translateX(10px);
	}

	50% {
		transform: translateY(-25px) translateX(-5px);
	}

	75% {
		transform: translateY(-15px) translateX(-10px);
	}
}

@keyframes float-medium {
	0%,
	100% {
		transform: translateY(0) translateX(0);
	}

	25% {
		transform: translateY(-10px) translateX(8px);
	}

	50% {
		transform: translateY(-20px) translateX(-8px);
	}

	75% {
		transform: translateY(-10px) translateX(-4px);
	}
}

@keyframes float-fast {
	0%,
	100% {
		transform: translateY(0) translateX(0);
	}

	25% {
		transform: translateY(-8px) translateX(5px);
	}

	50% {
		transform: translateY(-15px) translateX(-5px);
	}

	75% {
		transform: translateY(-8px) translateX(-2px);
	}
}

.animate-float-slow {
	animation: float-slow 15s ease-in-out infinite;
}

.animate-float-medium {
	animation: float-medium 10s ease-in-out infinite;
}

.animate-float-fast {
	animation: float-fast 7s ease-in-out infinite;
}

/* Pulse animation for background elements */
@keyframes pulse-slow {
	0%,
	100% {
		opacity: 0.4;
	}

	50% {
		opacity: 0.7;
	}
}

.animate-pulse-slow {
	animation: pulse-slow 8s ease-in-out infinite;
}

/* Text gradient animation */
@keyframes text-gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.animate-text-gradient {
	background-size: 200% auto;
	animation: text-gradient 5s ease infinite;
}

/* Background animation */
@keyframes background-animate {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.background-animate {
	background-size: 200% auto;
	animation: background-animate 5s ease infinite;
}

/* Styles from core/templates/blocks/calculator_form.html */
/* Base animations */
@keyframes pulse-slow {
	0%,
	100% {
		opacity: 0.5;
	}

	50% {
		opacity: 0.8;
	}
}

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

	50% {
		transform: translateY(-15px);
	}
}

@keyframes shimmer {
	100% {
		transform: translateX(100%);
	}
}

.animate-shimmer {
	animation: shimmer 2s infinite;
}

.animation-delay-1000 {
	animation-delay: 1s;
}

.animation-delay-2000 {
	animation-delay: 2s;
}

.animation-delay-3000 {
	animation-delay: 3s;
}

.animate-pulse-slow {
	animation: pulse-slow 6s ease-in-out infinite;
}

.animate-float {
	animation: float 8s ease-in-out infinite;
}

.animate-text-gradient {
	background-size: 200% auto;
	animation: textShine 4s ease-in-out infinite alternate;
}

@keyframes textShine {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}

@keyframes gradient-x {
	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

.animate-gradient-x {
	background-size: 200%;
	animation: gradient-x 15s ease infinite;
}

/* Remove animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	.animate-pulse-slow,
	.animate-float,
	.animate-shimmer,
	.animate-text-gradient,
	.animate-gradient-x {
		animation: none;
	}
}

/* Styles from core/templates/blocks/services.html */
/* Service slider container padding for navigation buttons */
.service-slider-container {
	padding: 0 30px;
	position: relative;
	margin: 0 auto;
	max-width: 1400px;
	overflow: hidden;
}

/* Service slider container padding for navigation buttons */
.service-slider-container {
	padding: 0 30px;
	position: relative;
	margin: 0 auto;
	max-width: 1400px;
}

/* Custom swiper container styles */
.capabilities-swiper {
	padding: 40px 10px 60px;
	overflow: hidden;
}

/* Card-specific styling for swiper slides */
.capabilities-swiper .swiper-slide {
	height: auto;
	padding: 10px 0;
	display: flex;
	justify-content: center;
}

.capabilities-swiper .swiper-slide a {
	height: 100%;
	min-height: 400px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.1);
	width: 100%;
}

/* Fix image aspect ratio */
.capabilities-swiper .aspect-w-1.aspect-h-1 {
	position: relative;
	padding-bottom: 75%;
}

.capabilities-swiper .aspect-w-1.aspect-h-1 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Navigation buttons styling */
.capabilities-button-prev,
.capabilities-button-next {
	width: 48px;
	height: 48px;
	background: linear-gradient(to right, rgba(37, 99, 235, 0.9), rgba(79, 70, 229, 0.9));
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.2);
	opacity: 0.9;
	transform: translateY(-50%);
	z-index: 20;
	transition: all 0.3s ease;
}

.capabilities-button-prev {
	left: 5px;
}

.capabilities-button-next {
	right: 5px;
}

.capabilities-button-prev:hover,
.capabilities-button-next:hover {
	opacity: 1;
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 4px 20px rgba(37, 99, 235, 0.5);
}

/* Make navigation buttons more visible on small screens */
@media (max-width: 768px) {
	.capabilities-button-prev,
	.capabilities-button-next {
		width: 40px;
		height: 40px;
		opacity: 0.8;
	}

	.capabilities-button-prev {
		left: 15px;
	}

	.capabilities-button-next {
		right: 15px;
	}
}

/* Custom pagination bullets */
.capabilities-swiper .swiper-pagination {
	bottom: 15px;
}

.capabilities-swiper .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.2);
	opacity: 1;
	transition: all 0.3s ease;
	margin: 0 5px;
}

.capabilities-swiper .swiper-pagination-bullet-active {
	background: linear-gradient(to right, #3b82f6, #6366f1);
	border-color: rgba(255, 255, 255, 0.7);
	width: 20px;
	border-radius: 5px;
}

/* Active slide styling */
.capabilities-swiper .swiper-slide {
	transition: all 0.5s ease;
	opacity: 0.75;
	transform: scale(0.95);
}

.capabilities-swiper .swiper-slide-active {
	opacity: 1;
	transform: scale(1);
}

.capabilities-swiper .swiper-slide-active a {
	box-shadow: 0 6px 25px rgba(59, 130, 246, 0.15);
}

/* Styles from core/templates/blocks/clients.html */
/* Animation for client logos */
@keyframes pulse-soft {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}

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

	50% {
		transform: translateY(-15px);
	}
}

@keyframes pulse-slow {
	0%,
	100% {
		opacity: 0.5;
	}

	50% {
		opacity: 0.8;
	}
}

/* Animation for shimmer effect */
@keyframes shimmer {
	100% {
		transform: translateX(100%);
	}
}

.animate-shimmer {
	animation: shimmer 2s infinite;
}

.animation-delay-1000 {
	animation-delay: 1s;
}

.animation-delay-2000 {
	animation-delay: 2s;
}

.animation-delay-3000 {
	animation-delay: 3s;
}

.animate-float-slow {
	animation: float 10s ease-in-out infinite;
}

.animate-float-medium {
	animation: float 8s ease-in-out infinite;
}

.animate-float-fast {
	animation: float 6s ease-in-out infinite;
}

.animate-pulse-slow {
	animation: pulse-slow 6s ease-in-out infinite;
}

.background-animate {
	background-size: 200%;
	animation: gradient-x 15s ease infinite;
}

@keyframes gradient-x {
	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

.animate-text-gradient {
	background-size: 200% auto;
	animation: textShine 4s ease-in-out infinite alternate;
}

@keyframes textShine {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}

.animate-gradient-x {
	animation: gradient-x 10s ease infinite;
}

.client-logo {
	transition: filter 0.5s ease, transform 0.5s ease;
}

/* Adjust focus style for input fields */
.input-focused {
	box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

/* Add responsive animations */
@media (prefers-reduced-motion: reduce) {
	.animate-pulse-slow,
	.animate-float-slow,
	.animate-float-medium,
	.animate-float-fast,
	.background-animate,
	.animate-text-gradient,
	.animate-gradient-x,
	.animate-shimmer {
		animation: none;
	}
}

/* Styles from core/templates/blocks/hero.html */
@keyframes pulse-slow {
	0%,
	100% {
		opacity: 0.5;
		transform: scale(1);
	}

	50% {
		opacity: 0.8;
		transform: scale(1.1);
	}
}

@keyframes text-gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0px);
	}

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

@keyframes float-fast {
	0%,
	100% {
		transform: translateY(0px) translateX(0px);
	}

	25% {
		transform: translateY(-5px) translateX(3px);
	}

	50% {
		transform: translateY(0px) translateX(6px);
	}

	75% {
		transform: translateY(5px) translateX(3px);
	}
}

@keyframes float-medium {
	0%,
	100% {
		transform: translateY(0px) translateX(0px);
	}

	33% {
		transform: translateY(-8px) translateX(4px);
	}

	66% {
		transform: translateY(4px) translateX(-6px);
	}
}

@keyframes float-slow {
	0%,
	100% {
		transform: translateY(0px) translateX(0px);
	}

	33% {
		transform: translateY(-12px) translateX(-6px);
	}

	66% {
		transform: translateY(8px) translateX(10px);
	}
}

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

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

.background-animate {
	background-size: 400%;
	animation: gradient-animation 8s ease infinite;
}

@keyframes gradient-animation {
	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

.animate-pulse-slow {
	animation: pulse-slow 6s ease-in-out infinite;
}

.animate-text-gradient {
	background-size: 200%;
	animation: text-gradient 6s linear infinite;
}

.animate-float {
	animation: float 6s ease-in-out infinite;
}

.animate-float-fast {
	animation: float-fast 4s ease-in-out infinite;
}

.animate-float-medium {
	animation: float-medium 7s ease-in-out infinite;
}

.animate-float-slow {
	animation: float-slow 10s ease-in-out infinite;
}

.animate-spin-slow {
	animation: spin-slow 15s linear infinite;
}

.animation-delay-1000 {
	animation-delay: 1s;
}

.animation-delay-2000 {
	animation-delay: 2s;
}

.animation-delay-3000 {
	animation-delay: 3s;
}

.animation-delay-4000 {
	animation-delay: 4s;
}

/* Breadcrumbs Styles */
.breadcrumbs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0.75rem 0;
	margin: 0 0 1.5rem 0;
	font-size: 0.875rem;
}

.breadcrumbs li {
	display: inline-flex;
	align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin: 0 0.5rem;
	color: var(--text-secondary);
	opacity: 0.6;
}

.breadcrumbs a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.breadcrumbs a:hover {
	color: var(--accent-color);
}

.breadcrumbs span {
	color: var(--accent-color);
	font-weight: 500;
}

/* Breadcrumbs in specific pages */
.privacy .breadcrumbs,
.terms .breadcrumbs,
.page-content .breadcrumbs {
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 1rem;
	margin-bottom: 2rem;
}

/* Responsive breadcrumbs */
@media (max-width: 768px) {
	.breadcrumbs {
		font-size: 0.75rem;
		padding: 0.5rem 0;
	}

	.breadcrumbs li:not(:last-child)::after {
		margin: 0 0.35rem;
	}
}

/* Other Services Slider in Service Detail Page */
.other-services-swiper {
	padding-bottom: 20px;
}

.other-services-swiper .swiper-wrapper {
	align-items: stretch;
}

.other-services-swiper .swiper-slide {
	height: auto;
}

.other-services-swiper .swiper-slide a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	display: block;
	height: 100%;
}

.other-services-swiper .swiper-slide a:hover .other-tech-card {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.other-services-swiper .swiper-slide a:hover img {
	transform: scale(1.05);
}

.other-services-swiper .swiper-slide a:hover .text-blue-600 {
	color: #1e40af; /* darker blue on hover */
}

.price-badge {
	background: linear-gradient(to right, #2563eb, #4f46e5);
	color: white;
	padding: 5px 12px;
	border-radius: 20px;
	font-weight: 600;
	font-size: 0.9rem;
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
	display: inline-block;
	white-space: nowrap;
}

.quantity-badge {
	background: #f3f4f6;
	color: #4b5563;
	border: 1px solid #e5e7eb;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 0.85rem;
	font-weight: 500;
	display: inline-block;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.price-badge, .quantity-badge {
		font-size: 0.8rem;
		padding: 4px 8px;
	}
}

.swiper-pagination {
	position: relative !important;
	bottom: 0 !important;
	text-align: right;
	width: auto !important;
	margin-right: 10px;
}

.swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: #cbd5e1;
	opacity: 1;
	margin: 0 5px;
	transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
	width: 24px;
	border-radius: 5px;
	background: linear-gradient(to right, #2563eb, #7c3aed, #db2777);
}

.swiper-button-next,
.swiper-button-prev,
.swiper-gallery-next,
.swiper-gallery-prev {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	margin-top: 0 !important;
	color: #3b82f6;
	width: 32px !important;
	height: 32px !important;
	background: white;
	border-radius: 50%;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.swiper-button-next {
	margin-left: 10px;
}

.swiper-button-next:after,
.swiper-button-prev:after,
.swiper-gallery-next:after,
.swiper-gallery-prev:after {
	font-size: 14px !important;
	font-weight: bold;
}

.swiper-button-next:hover,
.swiper-button-prev:hover,
.swiper-gallery-next:hover,
.swiper-gallery-prev:hover {
	color: #1e40af;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}