.logo,
nav {
	align-items: center;
	display: flex
}

.logo,
.nav-links,
nav {
	display: flex
}

.nav-links a,
.nav-links li {
	position: relative
}

.nav-links a.active::after,
.nav-links a:hover::after,
body,
html,
nav {
	width: 100%
}

.close-btn,
.dropdown-toggle,
.hamburger {
	cursor: pointer
}

.side-menu::before,
header {
	backdrop-filter: blur(6px)
}

*,
::after,
::before {
	box-sizing: border-box
}

body,
html {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background-color: #0f172a
}

:root {
	--container-width: 1200px;
	--nav-height: 72px
}

header {
	position: sticky;
	top: 0;
	z-index: 1100;
	background: rgba(255, 255, 255, .96);
	transition: box-shadow .3s, background .3s;
	border-bottom: 1px solid #e2e8f0
}

header.scrolled {
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08)
}

nav {
	padding: 0 50px;
	justify-content: space-between;
	height: 110px
}

.logo img {
	height: 110px;
	width: auto;
	display: block
}

.nav-links {
	list-style: none;
	gap: 26px;
	align-items: center
}

.nav-links a {
	text-decoration: none;
	font-size: 20px;
	color: #334155;
	font-weight: 500;
	padding: 8px 4px;
	transition: color .25s
}

.nav-links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 0%;
	height: 2px;
	background: #0284c7;
	transition: width .25s
}

.nav-links a.active {
	color: #0284c7
}

@media (max-width:992px) {
	.nav-links {
		display: none !important
	}

	.hamburger {
		display: flex !important
	}
}

.dropdown-menu a {
	display: block;
	padding: 12px 18px;
	font-size: 18px;
	color: #0f172a;
	transition: .2s
}

.dropdown-menu a:hover {
	background: #f1f5f9;
	color: #0284c7
}

.side-menu a.active,
.side-menu a:hover {
	background: rgba(34, 197, 94, .15);
	color: #22c55e
}

.arrow {
	font-size: 12px;
	transition: transform .25s
}

.dropdown.active .arrow,
.has-submenu.active>a::after {
	transform: rotate(180deg)
}

.dropdown.active .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0)
}

.dropdown-menu {
	position: absolute;
	top: 120%;
	left: 0;
	background: #fff;
	min-width: 240px;
	border-radius: 14px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
	padding: 12px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	list-style: none;
	top: calc(100% + 10px);
	transition: opacity .2s, transform .2s
}

@media (min-width:993px) {
	.dropdown-menu {
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px)
	}

	.dropdown.active .dropdown-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0)
	}
}

@media(max-width:768px) {
	nav {
		padding: 0 16px
	}
}

.hamburger {
	display: none;
	flex-direction: column;
	gap: 5px
}

.hamburger span {
	width: 26px;
	height: 3px;
	background: #0f172a;
	border-radius: 2px;
	transition: .3s
}

.hamburger.active span:first-child {
	transform: translateY(8px) rotate(45deg)
}

.hamburger.active span:nth-child(2) {
	opacity: 0
}

.hamburger.active span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg)
}

.side-menu {
	position: fixed;
	inset: 0;
	background: linear-gradient(135deg, #020617, #0f172a);
	z-index: 2000;
	padding: 80px 24px 40px;
	transform: translateX(100%);
	transition: transform .35s;
	overflow-y: auto
}

.close-btn,
.side-menu a {
	transition: .25s;
	display: flex
}

.contact,
.faq-answer,
.faq-item {
	overflow: hidden
}

.side-menu.active {
	transform: translateX(0)
}

.close-btn {
	position: absolute;
	top: 18px;
	right: 20px;
	background: rgba(255, 255, 255, .08);
	border: none;
	color: #fff;
	font-size: 28px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	align-items: center;
	justify-content: center
}

.close-btn:hover {
	background: rgba(255, 255, 255, .15);
	transform: rotate(90deg)
}

.footer-col ul,
.side-menu ul {
	list-style: none;
	padding: 0;
	margin: 0
}

.side-menu li {
	margin-bottom: 12px
}

.side-menu a {
	align-items: center;
	justify-content: space-between;
	padding: 22px;
	border-radius: 14px;
	font-size: 18px;
	font-weight: 600;
	color: #e5e7eb;
	text-decoration: none;
	background: rgba(255, 255, 255, .04)
}

.checkbox a,
.cookie-content a:hover,
.faq-answer a:hover {
	text-decoration: underline
}

.side-menu a:hover {
	transform: translateX(4px)
}

.side-menu .dropdown-menu a {
	font-size: 16px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, .03);
	color: #fff
}

.side-menu .has-submenu.active .dropdown-menu {
	max-height: 500px
}

.side-menu::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(2, 6, 23, .6);
	z-index: -1
}

.has-submenu>a::after {
	content: "▾";
	font-size: 14px;
	opacity: .6;
	transition: transform .3s
}

.side-menu .dropdown-menu {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s;
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	background: 0 0;
	padding: 8px 0 0
}

.btn,
.btn.link {
	padding: 14px 28px;
	text-decoration: none
}

.hero-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap
}

.btn {
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	transition: transform .25s, background .25s
}

.about-step,
.about-step.highlight,
.trust-grid>div {
	transition: transform .25s, box-shadow .25s
}

.btn.primary {
	background: #16A34A;
	color: #fff
}

.btn.primary:hover {
	background: #15803d;
	transform: translateY(-2px)
}

.btn.secondary {
	border: 1px solid rgba(255, 255, 255, .6);
	color: #fff
}

.btn.secondary:hover {
	background: rgba(255, 255, 255, .1)
}

.trust {
	background: #f8fafc;
	padding: clamp(60px, 8vw, 80px) 20px
}

.services .container,
.trust .container {
	max-width: 1100px;
	margin: 0 auto
}

.trust h2 {
	text-align: center;
	font-size: clamp(26px, 4vw, 32px);
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 50px
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px
}

.trust-grid>div {
	background: #fff;
	border-radius: 16px;
	padding: 24px 22px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .05)
}

.contact .btn.primary,
.service-grid article {
	transition: transform .25s, box-shadow .25s, background .25s
}

.trust-grid i {
	font-size: 18px;
	color: #22a452;
	min-width: 28px
}

.trust-grid span {
	font-size: 18px;
	font-weight: 600;
	color: #334155;
	line-height: 1.4
}

.location-seo,
.services {
	background: #fff;
	padding: clamp(70px, 9vw, 90px) 20px
}

.services h2 {
	text-align: center;
	font-size: clamp(26px, 4vw, 32px);
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 60px
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 30px
}

.service-grid article {
	background: #f8fafc;
	border-radius: 18px;
	padding: 40px 28px;
	text-align: center;
	border: 1px solid #e2e8f0
}

.service-grid i {
	font-size: 32px;
	color: #0284c7;
	margin-bottom: 20px;
	transition: color .25s
}

.service-grid h3 {
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 12px
}

.areas h2,
.contact h2 {
	font-weight: 800;
	position: relative
}

.service-grid p {
	font-size: 15px;
	color: #475569;
	line-height: 1.6
}

.about-step::before,
.areas h2::after {
	background: #16a34a;
	content: "";
	height: 4px
}

.about-home {
	padding: 90px 20px;
	background: #f8f9fb
}

.about-home-header {
	max-width: 700px;
	margin-bottom: 50px
}

.about-home-header h2 {
	font-size: clamp(30px, 4vw, 42px);
	margin-bottom: 12px;
	color: #111
}

.about-home-header p {
	font-size: 17px;
	line-height: 1.6;
	color: #555
}

.about-home-timeline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px
}

.about-step {
	background: #fff;
	padding: 35px 30px;
	border-radius: 18px;
	text-align: left;
	box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
	position: relative
}

.about-step::before {
	position: absolute;
	top: -6px;
	left: 30px;
	width: 40px;
	border-radius: 2px
}

.step-year {
	font-size: 14px;
	font-weight: 700;
	color: #16a34a;
	letter-spacing: 1px
}

.about-step.highlight .step-year,
.about-step.highlight h3,
.about-step.highlight p,
.contact {
	color: #fff
}

.about-step h3 {
	font-size: 20px;
	margin: 10px 0;
	color: #111
}

.about-step p {
	font-size: 15px;
	color: #555;
	line-height: 1.5
}

.about-step.highlight {
	background: linear-gradient(135deg, #16a34a, #16a34a);
	color: #111
}

@media (max-width:992px) {
	.about-home-timeline {
		grid-template-columns: 1fr
	}

	.about-step {
		max-width: 500px;
		margin: 0 auto
	}
}

.about-step:hover {
	transform: translateY(-10px);
	box-shadow: 0 25px 60px rgba(0, 0, 0, .18)
}

.about-step.highlight:hover {
	transform: translateY(-12px) scale(1.02)
}

@media (hover:hover) and (pointer:fine) {
	.about-step:hover {
		transform: translateY(-10px);
		box-shadow: 0 25px 60px rgba(0, 0, 0, .18)
	}
}

.areas {
	background: #f8fafc;
	padding: clamp(70px, 9vw, 90px) 20px
}

.areas .container,
.location-wrapper,
.service-cta .container {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center
}

.areas h2 {
	font-size: clamp(26px, 4vw, 32px);
	margin-bottom: 25px;
	color: #0f172a
}

.areas h2::after {
	display: block;
	width: 70px;
	margin: 18px auto 0;
	border-radius: 3px
}

.areas p {
	font-size: 17px;
	color: #334155;
	max-width: 800px;
	margin: 0 auto 35px;
	line-height: 1.7
}

.btn.link {
	background: 0 0;
	color: #16a34a;
	font-weight: 700;
	border: 2px solid #22c55e;
	border-radius: 999px;
	transition: background .3s, color .3s, transform .2s
}

.contact {
	position: relative;
	background: radial-gradient(600px 300px at 50% -10%, rgba(34, 197, 94, .12), transparent 60%), #0f172a;
	padding: clamp(80px, 10vw, 120px) 20px
}

.contact .container {
	max-width: 620px;
	margin: 0 auto;
	text-align: center
}

.contact h2 {
	font-size: clamp(26px, 4vw, 34px);
	margin-bottom: 40px;
	letter-spacing: -.4px
}

.contact h2::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	background: linear-gradient(90deg, #22c55e, #4ade80);
	margin: 18px auto 0;
	border-radius: 999px
}

.contact form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: rgba(255, 255, 255, .03);
	backdrop-filter: blur(10px);
	padding: 32px 26px;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05)
}

.contact input,
.contact textarea {
	padding: 16px 18px;
	font-size: 16px;
	border-radius: 14px;
	border: 1px solid transparent;
	outline: 0;
	background: #fff;
	color: #0f172a;
	width: 100%;
	transition: box-shadow .25s, border-color .25s, transform .15s
}

.contact textarea {
	min-height: 140px;
	resize: vertical
}

.contact input:focus,
.contact textarea:focus {
	border-color: #22c55e;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, .35), 0 8px 20px rgba(34, 197, 94, .25)
}

.checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: #cbd5e1;
	line-height: 1.4
}

.checkbox input {
	width: 18px;
	height: 18px;
	accent-color: #22C55E;
	flex-shrink: 0
}

.checkbox a {
	color: #22c55e;
	font-weight: 600;
	text-underline-offset: 3px
}

.cookie-content a,
.cta a,
.faq-answer a,
.floating-call,
.footer-col a {
	text-decoration: none
}

.checkbox-error {
	display: none;
	margin-top: -6px;
	font-size: 13px;
	color: #f87171;
	text-align: left
}

.contact .btn.primary,
.faq-question {
	width: 100%;
	font-size: 17px;
	cursor: pointer
}

.faq-container h2,
.faq-question {
	color: #0f172a;
	position: relative
}

.contact .btn.primary {
	margin: 18px auto 0;
	padding: 16px;
	font-weight: 700;
	border-radius: 999px;
	background: linear-gradient(180deg, #22c55e, #16a34a);
	color: #fff;
	border: none;
	max-width: 420px;
	box-shadow: 0 14px 30px rgba(34, 197, 94, .35), inset 0 1px 0 rgba(255, 255, 255, .3)
}

.faq-section {
	background: #f8fafc;
	padding: clamp(70px, 10vw, 100px) 20px
}

.faq-container {
	max-width: 900px;
	margin: 0 auto
}

.faq-container h2 {
	text-align: center;
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 800;
	margin-bottom: 50px
}

.faq-container h2::after {
	content: "";
	width: 80px;
	height: 4px;
	background: #22c55e;
	display: block;
	margin: 18px auto 0;
	border-radius: 3px
}

.faq-item {
	background: #fff;
	border-radius: 14px;
	margin-bottom: 16px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .06)
}

.faq-question {
	background: 0 0;
	border: none;
	padding: 22px 60px 22px 24px;
	font-weight: 700;
	text-align: left
}

.faq-question::after {
	content: "+";
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 26px;
	color: #22c55e;
	transition: transform .25s
}

.faq-item.active .faq-question::after {
	content: "−"
}

.faq-answer {
	max-height: 0;
	transition: max-height .4s
}

.faq-answer p {
	padding: 0 24px 22px;
	font-size: 16px;
	color: #475569;
	line-height: 1.6
}

.faq-answer a {
	color: #16a34a;
	font-weight: 700
}

.location-seo h2 {
	font-size: clamp(24px, 4vw, 30px);
	font-weight: 800;
	margin-bottom: 28px;
	color: #0f172a
}

.location-seo p {
	font-size: 17px;
	line-height: 1.7;
	color: #475569;
	margin-bottom: 18px
}

.location-seo strong {
	color: #0f172a
}

.cta a,
.footer-col h3 {
	color: #fff;
	font-weight: 800
}

.cta {
	background: linear-gradient(135deg, #fff, #fff);
	padding: clamp(60px, 8vw, 70px) 20px;
	text-align: center;
	color: #000
}

.cta h2 {
	font-size: clamp(24px, 4vw, 30px);
	font-weight: 800;
	margin-bottom: 20px
}

.cta a {
	display: inline-block;
	padding: 16px 34px;
	font-size: 20px;
	background: #16a34a;
	border-radius: 999px;
	transition: transform .25s, box-shadow .25s
}

@media (hover:hover) {
	.trust-grid>div:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 35px rgba(0, 0, 0, .08)
	}

	.service-grid article:hover {
		background: #fff;
		transform: translateY(-6px);
		box-shadow: 0 20px 40px rgba(0, 0, 0, .08)
	}

	.service-grid article:hover i {
		color: #16a34a
	}

	.btn.link:hover {
		background: #22c55e;
		color: #fff;
		transform: translateY(-2px)
	}

	.checkbox a:hover {
		color: #4ade80
	}

	.contact .btn.primary:hover {
		transform: translateY(-3px);
		box-shadow: 0 20px 45px rgba(34, 197, 94, .45), inset 0 1px 0 rgba(255, 255, 255, .35)
	}

	.cta a:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 25px rgba(0, 0, 0, .2)
	}
}

.site-footer {
	background: #0f172a;
	color: #cbd5e1;
	padding: clamp(60px, 8vw, 80px) 20px 30px;
	font-size: 15px
}

.footer-container {
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px
}

.footer-col h3 {
	font-size: 18px;
	margin-bottom: 16px
}

.footer-col ul li {
	margin-bottom: 8px
}

.footer-col a {
	color: #cbd5e1;
	transition: color .25s
}

.footer-col a:hover,
.footer-col i {
	color: #22c55e
}

.footer-col i {
	margin-right: 8px
}

.footer-col p {
	margin-bottom: 10px;
	line-height: 1.6
}

.footer-col:last-child p {
	font-size: 14px;
	line-height: 1.7;
	color: #94a3b8
}

.footer-bottom {
	margin-top: 50px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	text-align: center;
	font-size: 14px;
	color: #94a3b8
}

@media (min-width:1024px) {
	.footer-container {
		grid-template-columns: repeat(4, 1fr);
		align-items: start
	}

	.footer-areas {
		grid-column: 1/-1;
		margin-top: 30px
	}

	.footer-areas h3 {
		text-align: left
	}

	.footer-bottom {
		grid-column: 1/-1;
		text-align: center
	}
}

.cookie-banner {
	position: fixed;
	inset-inline: 20px;
	bottom: 20px;
	margin-inline: auto;
	max-width: 900px;
	background: #0f172a;
	color: #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
	z-index: 10000;
	display: none
}

.cookie-content {
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px
}

.cookie-content p {
	font-size: 14px;
	line-height: 1.6
}

.cookie-content a {
	color: #22a452;
	font-weight: 600
}

.cookie-buttons {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	flex-wrap: wrap
}

.cookie-buttons button {
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: background .25s, transform .2s
}

#acceptCookies {
	background: #22c55e;
	color: #fff
}

#acceptCookies:hover {
	background: #16a34a;
	transform: translateY(-1px)
}

#rejectCookies {
	background: 0 0;
	color: #cbd5e1;
	border: 1px solid #475569
}

#rejectCookies:hover {
	background: rgba(255, 255, 255, .06)
}

@media (max-width:600px) {
	.about-home {
		padding: 70px 15px
	}

	.about-home-header {
		text-align: center
	}

	.cookie-buttons {
		flex-direction: column;
		align-items: stretch
	}
}

.floating-call {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9000;
	display: none;
	align-items: center;
	gap: 8px;
	background-color: #28a745;
	color: #fff;
	padding: 14px 18px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 600;
	animation: 2s infinite pulse
}

@supports (padding:max(0px)) {

	.cookie-banner,
	.floating-call {
		bottom: max(20px, env(safe-area-inset-bottom))
	}
}

@keyframes pulse {
	0% {
		transform:scale(1);
	}

	50% {
		transform: scale(1.05);
	}

	100% {
		transform: scale(1);
	}
}

@media (max-width:1024px) {
	.hero {
		min-height: auto;
		padding: 60px 0
	}

	.hero-content {
		margin-left: 0;
		max-width: 100%;
		padding: 60px 30px
	}

	.about-home-timeline {
		grid-template-columns: 1fr 1fr
	}
}

@media (max-width:480px) {
	.contact form {
		padding: 26px 20px
	}

	.hero-content {
		padding: 50px 18px
	}

	.hero-contact {
		font-size: 18px
	}

	.areas h2,
	.services h2,
	.trust h2 {
		font-size: 24px
	}

	.service-grid article {
		padding: 30px 22px
	}

	.about-step {
		padding: 28px 22px
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(20px)
	}

	100% {
		opacity: 1;
		transform: translateY(0)
	}
}

.avarini-services {
	padding: 80px 20px;
	background-color: #f4f7f6;
	color: #333
}

.services-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto
}

.services-left {
	flex: 1;
	min-width: 300px
}

.services-left h2 {
	font-size: 2rem;
	margin-bottom: 30px
}

.services-list {
	list-style: disc inside;
	padding-left: 0;
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.8
}

.services-list li {
	margin-bottom: 15px;
	font-weight: 500;
	transition: .3s
}

.services-list li:hover {
	color: #32a852
}

.service-icon {
	font-size: 1.8rem
}

.services-right {
	flex: 1;
	min-width: 300px;
	background: url('https://plus.unsplash.com/premium_photo-1750594942124-f2a118afbb8e?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8ZW1lcmdlbmN5JTIwcGlwZXxlbnwwfHwwfHx8MA%3D%3D') center center/cover no-repeat;
	border-radius: 12px;
	padding: 40px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center
}

.services-text {
	background-color: rgba(0, 0, 0, .6);
	padding: 20px;
	border-radius: 8px
}

.services-text h3 {
	margin-bottom: 15px;
	font-size: 1.8rem
}

.services-text p {
	margin-bottom: 15px;
	line-height: 1.6
}

.why-floating {
	background: #fff;
	padding: 120px 20px;
	font-family: Arial, sans-serif
}

.why-floating-container {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center
}

.why-floating-title {
	font-size: 2.4em;
	margin-bottom: 15px;
	color: #222
}

.why-floating-subtitle {
	max-width: 700px;
	margin: 0 auto 80px;
	font-size: 1.1em;
	color: #666;
	line-height: 1.6
}

.why-floating-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px
}

.floating-card {
	background: #fff;
	padding: 50px 35px;
	border-radius: 16px;
	width: 320px;
	box-shadow: 0 25px 50px rgba(0, 0, 0, .08);
	transition: transform .4s, box-shadow .4s
}

.floating-card:hover {
	transform: translateY(-12px);
	box-shadow: 0 35px 65px rgba(0, 0, 0, .12)
}

.floating-icon {
	margin-bottom: 25px;
	color: #32a852
}

.floating-icon svg {
	width: 60px;
	height: 60px
}

.floating-card h4 {
	font-size: 1.3em;
	margin-bottom: 15px;
	color: #32a852
}

.floating-card p {
	font-size: 1em;
	line-height: 1.7;
	color: #555
}

.cta-map {
	padding: 80px 20px;
	background-color: #fff
}

.cta-map-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center
}

.avarini-cta-content h2 {
	font-size: 2rem;
	margin-bottom: 20px;
	color: #333;
	font-weight: 700
}

.avarini-cta-content p {
	font-size: 1.1rem;
	margin-bottom: 30px;
	color: #555
}

.cta-map-embed iframe {
	width: 100%;
	height: 400px;
	border: 0;
	border-radius: 15px
}

@media (max-width:900px) {
	.cta-map-grid {
		grid-template-columns: 1fr
	}

	.avarini-hero h1 {
		font-size: 2.2rem
	}

	.avarini-hero-text {
		font-size: 1.1rem
	}
}

.service-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	padding: 100px 5%;
	background: #f0f2f4
}

.service-duo .service-includes,
.service-duo .service-when {
	padding: 0
}

.service-duo .container {
	height: 100%
}

@media (max-width:1024px) {
	.service-duo {
		grid-template-columns: 1fr;
		gap: 40px
	}
}

.service-when {
	padding: 80px 0
}

.service-when .container {
	background: #fff;
	padding: 50px 55px;
	border-radius: 18px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
	height: 100%
}

.service-when h2 {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 35px;
	color: #1c1c1c
}

.service-when .shtrangove-list {
	list-style: none;
	padding: 0;
	margin: 0 0 35px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 30px
}

.service-when .shtrangove-list li {
	position: relative;
	padding-left: 34px;
	font-size: 18px;
	line-height: 1.5;
	color: #333
}

.service-when .shtrangove-list li::before {
	content: "✔";
	position: absolute;
	left: 0;
	top: 0;
	color: #0a7cff;
	font-weight: 700
}

.service-when p {
	font-size: 19px;
	line-height: 1.6;
	color: #000;
	background: #f6f8fa;
	padding: 20px 25px;
	border-left: 5px solid red;
	border-radius: 8px
}

.service-includes .container {
	background: linear-gradient(135deg, #0a7cff, #0057b8);
	padding: 50px 45px;
	border-radius: 18px;
	color: #fff;
	height: 100%
}

.service-includes h2 {
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 30px;
	line-height: 1.3
}

.service-includes .service-list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: step
}

.service-includes .service-list li {
	font-size: 18px;
	line-height: 1.6;
	padding: 14px 0 14px 42px;
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, .25)
}

.service-includes .service-list li:last-child {
	border-bottom: none
}

.service-includes .service-list li::before {
	content: counter(step);
	counter-increment: step;
	position: absolute;
	left: 0;
	top: 14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	color: #0a7cff;
	font-weight: 700;
	text-align: center;
	line-height: 28px
}

.service-duo-price-trust {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0
}

.service-price {
	background: #fff;
	padding: clamp(80px, 10vw, 120px) 0;
	border-bottom: 1px solid #e5e7eb
}

.service-price .container,
.service-trust .container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px
}

.service-price h2 {
	font-size: clamp(30px, 4vw, 40px);
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 28px;
	letter-spacing: -.4px
}

.service-price p {
	font-size: 18px;
	line-height: 1.75;
	color: #334155;
	max-width: 820px;
	margin-bottom: 28px
}

.service-price .service-list {
	margin: 30px 0;
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: 14px;
	max-width: 720px
}

.service-price .service-list li {
	font-size: 17px;
	color: #0f172a;
	padding-left: 26px;
	position: relative;
	line-height: 1.6
}

.service-price .service-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: #16a34a;
	font-weight: 700
}

.service-price ul.service-price {
	margin: 40px 0;
	padding: 28px 32px;
	list-style: none;
	background: #f8fafc;
	border-radius: 18px;
	border: 1px solid #e2e8f0;
	display: grid;
	gap: 14px;
	max-width: 520px
}

.service-price ul.service-price li {
	font-size: 17px;
	font-weight: 600;
	color: #0f172a
}

.service-trust {
	background: #f8fafc;
	padding: clamp(90px, 11vw, 130px) 0
}

.service-trust h2 {
	font-size: clamp(28px, 3.8vw, 38px);
	font-weight: 800;
	color: #020617;
	margin-bottom: 24px
}

.service-trust p {
	font-size: 18px;
	line-height: 1.8;
	color: #334155;
	max-width: 900px;
	margin-bottom: 36px
}

.service-trust .service-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px
}

.service-trust .service-list li {
	background: #fff;
	padding: 22px 24px;
	border-radius: 16px;
	font-size: 17px;
	font-weight: 600;
	color: #0f172a;
	box-shadow: 0 10px 25px rgba(15, 23, 42, .06)
}

@media (max-width:768px) {
	.footer-container {
		gap: 30px
	}

	.hero {
		background-position: center top;
		background-size: cover
	}

	.hero:hover {
		transform: none !important
	}

	.floating-call {
		display: flex
	}

	.cookie-banner[style*="display: block"]~.floating-call {
		bottom: 110px
	}

	.hero h1 {
		font-size: 30px
	}

	.areas p,
	.hero h2,
	.service-includes .service-list li,
	.service-when .shtrangove-list li,
	.service-when p {
		font-size: 16px
	}

	.hero-text {
		font-size: 15px
	}

	.hero-buttons {
		flex-direction: column;
		align-items: stretch
	}

	.btn {
		text-align: center;
		width: 100%
	}

	.trust-grid {
		gap: 18px
	}

	.trust-grid>div {
		padding: 20px
	}

	.service-grid {
		gap: 22px
	}

	.about-home-timeline,
	.service-when .shtrangove-list {
		grid-template-columns: 1fr
	}

	.service-includes .container,
	.service-when .container {
		padding: 35px 25px
	}

	.service-when h2 {
		font-size: 26px
	}

	.service-includes h2 {
		font-size: 24px
	}

	.service-price,
	.service-trust {
		padding: 70px 0
	}

	.service-price p,
	.service-trust p {
		font-size: 17px
	}
}

.service-cta {
	background: linear-gradient(135deg, #0f172a, #020617);
	color: #fff;
	padding: 6rem 1.5rem
}

.service-cta h2 {
	font-size: clamp(2rem, 4vw, 2.6rem);
	font-weight: 700;
	margin-bottom: 1.2rem;
	letter-spacing: -.02em
}

.service-cta p {
	font-size: 1.1rem;
	max-width: 700px;
	margin: 0 auto 2.5rem;
	line-height: 1.6;
	color: #cbd5e1
}