/* =========================================================
                        GLOBAL
========================================================= */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Cairo", sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
	background: #f4fbff;
}

/* FIX OVERFLOW */

img {
	max-width: 100%;
	display: block;
}

section,
div,
nav {
	max-width: 100%;
}

/* =========================================================
                        SCROLLBAR
========================================================= */

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #eaf7ff;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(#22d3ee, #4b8cff);
	border-radius: 30px;
}

/* =========================================================
                        ANIMATIONS
========================================================= */

@keyframes floating {
	0% {
		transform: translateY(0px);
	}

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

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

@keyframes pulseMove {
	0% {
		transform: scale(1) translate(0, 0);
	}

	50% {
		transform: scale(1.15) translate(30px, -20px);
	}

	100% {
		transform: scale(1) translate(0, 0);
	}
}

@keyframes fadeRight {
	from {
		opacity: 0;
		transform: translateX(-80px);
	}

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

@keyframes fadeLeft {
	from {
		opacity: 0;
		transform: translateX(80px);
	}

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

@keyframes glowText {
	0% {
		text-shadow: 0 0 0px #22d3ee;
	}

	50% {
		text-shadow: 0 0 15px #22d3ee;
	}

	100% {
		text-shadow: 0 0 0px #22d3ee;
	}
}

@keyframes badgePulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.03);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes navSlide {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}

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

/* =========================================================
                        HERO
========================================================= */

.hero {
	width: 100%;
	min-height: 100vh;

	background:
		linear-gradient(
			to left,
			rgba(255, 255, 255, 0.92),
			rgba(255, 255, 255, 0.78)
		),
		url("./images/photo_٢٠٢٦-٠٤-٢٩_١٦-٢٨-٣٩.jpg");

	background-size: cover;
	background-position: center;

	position: relative;
	overflow: hidden;
}

/* GLOW EFFECTS */

.hero::before {
	content: "";
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: linear-gradient(#22d3ee, #4b8cff);
	top: -200px;
	left: -200px;
	opacity: 0.15;
	filter: blur(70px);
	animation: pulseMove 8s linear infinite;
}

.hero::after {
	content: "";
	position: absolute;
	width: 350px;
	height: 350px;
	border-radius: 50%;
	background: #22d3ee;
	right: -100px;
	bottom: -100px;
	opacity: 0.12;
	filter: blur(70px);
	animation: pulseMove 6s linear infinite alternate;
}

/* =========================================================
                        NAVBAR
========================================================= */

nav {
	width: 100%;
	padding: 20px 7%;

	display: flex;
	align-items: center;
	justify-content: space-between;

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

	z-index: 1000;

	background: transparent;

	backdrop-filter: blur(10px);

	transition: 0.4s ease;
}

nav.active {
	position: fixed;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(14px);
	padding: 14px 7%;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

	animation: navSlide 0.5s ease;
}

/* LOGO */

.logo {
	display: flex;
	align-items: center;
	gap: 10px;

	font-size: 30px;
	font-weight: 800;

	color: #0f4566;

	z-index: 1001;
}

.logo .care-plus {
	width: clamp(140px, 18vw, 220px);
	height: auto;

	transition: 0.4s ease;
}

nav.active .care-plus {
	transform: scale(0.92);
}

/* NAV LINKS */

.nav-links {
	list-style: none;

	display: flex;
	align-items: center;
	gap: 35px;
}

.nav-links li a {
	text-decoration: none;
	color: #184f73;

	font-size: 18px;
	font-weight: 700;

	position: relative;

	transition: 0.35s ease;
}

.nav-links li a::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: -8px;

	width: 0%;
	height: 3px;

	border-radius: 30px;

	background: linear-gradient(90deg, #06b6d4, #22d3ee, #38bdf8);

	transition: 0.4s;
}

.nav-links li a:hover::after {
	width: 100%;
}

.nav-links li a:hover {
	color: #06b6d4;
	text-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
}

/* NAV BUTTON */

.nav-btn {
	padding: 14px 28px;
	border-radius: 50px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;
	text-decoration: none;
	font-weight: 700;

	box-shadow: 0 12px 25px rgba(75, 140, 255, 0.25);

	position: relative;
	overflow: hidden;

	transition: 0.3s;
}

.nav-btn:hover {
	transform: translateY(-4px);
}

.nav-btn::before {
	content: "";

	position: absolute;
	top: 0;
	left: -100%;

	width: 100%;
	height: 100%;

	background: rgba(255, 255, 255, 0.3);

	transform: skewX(-30deg);

	transition: 0.7s;
}

.nav-btn:hover::before {
	left: 120%;
}

/* MENU */

.menu-toggle {
	display: none;

	width: 50px;
	height: 50px;

	border-radius: 15px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;

	font-size: 22px;

	cursor: pointer;

	align-items: center;
	justify-content: center;

	box-shadow: 0 10px 25px rgba(75, 140, 255, 0.25);
}

/* =========================================================
                        HERO CONTENT
========================================================= */

.hero-content {
	width: 100%;

	padding: 180px 7% 100px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 60px;

	position: relative;
	z-index: 2;
}

/* LEFT */

.left {
	flex: 1;

	animation: fadeRight 1.2s ease;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding: 14px 24px;

	border-radius: 50px;

	background: rgba(255, 255, 255, 0.8);

	backdrop-filter: blur(8px);

	color: #0f4566;
	font-weight: 700;

	margin-bottom: 30px;

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);

	animation: badgePulse 3s infinite;
}

.badge i {
	color: #22d3ee;
}

.left h1 {
	font-size: clamp(34px, 6vw, 74px);
	line-height: 1.25;

	color: #0f4566;

	margin-bottom: 25px;

	font-weight: 800;
}

.left h1 span {
	color: #22d3ee;

	display: inline-block;

	animation: glowText 2s ease infinite;
}

.left p {
	font-size: clamp(15px, 2vw, 21px);

	line-height: 2;

	color: #4f7088;

	max-width: 700px;

	margin-bottom: 40px;

	font-weight: 600;
}

/* BUTTONS */

.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;

	margin-bottom: 45px;
}

.btn-primary,
.btn-outline {
	padding: 18px 40px;

	border-radius: 50px;

	text-decoration: none;

	font-size: 18px;
	font-weight: 700;

	transition: 0.3s;
}

.btn-primary {
	background: linear-gradient(135deg, #22d3ee, #4b8cff);
	color: #fff;

	box-shadow: 0 15px 35px rgba(75, 140, 255, 0.28);

	position: relative;
	overflow: hidden;
}

.btn-primary:hover {
	transform: translateY(-5px);
}

.btn-primary::before {
	content: "";

	position: absolute;
	top: 0;
	left: -100%;

	width: 100%;
	height: 100%;

	background: rgba(255, 255, 255, 0.25);

	transform: skewX(-30deg);

	transition: 0.7s;
}

.btn-primary:hover::before {
	left: 120%;
}

.btn-outline {
	background: #fff;

	border: 2px solid #dcecf6;

	color: #0f4566;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.btn-outline:hover {
	background: #22d3ee;
	color: #fff;
	border-color: #22d3ee;
}

/* FEATURES */

.features {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.feature {
	flex: 1 1 220px;
	min-width: 250px;

	background: rgba(255, 255, 255, 0.82);

	backdrop-filter: blur(10px);

	border-radius: 30px;

	padding: 28px;

	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.07);

	transition: 0.4s;
}

.feature:hover {
	transform: translateY(-12px) scale(1.03);

	box-shadow: 0 25px 60px rgba(75, 140, 255, 0.18);
}

.feature i {
	width: 70px;
	height: 70px;

	border-radius: 22px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 30px;

	margin-bottom: 22px;

	box-shadow: 0 12px 30px rgba(75, 140, 255, 0.25);

	transition: 0.4s;
}

.feature:hover i {
	transform: rotate(-8deg) scale(1.1);
}

.feature h3 {
	font-size: 24px;
	color: #0f4566;
	margin-bottom: 12px;
}

.feature p {
	font-size: 15px;
	line-height: 1.9;
	color: #68859a;
}

/* RIGHT */

.right {
	width: min(100%, 400px);

	animation: fadeLeft 1.2s ease;
}

.contact-box {
	background: rgba(255, 255, 255, 0.82);

	backdrop-filter: blur(12px);

	border-radius: 35px;

	padding: 40px;

	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);

	animation: floating 5s ease-in-out infinite;
}

.contact-box h2 {
	font-size: 36px;
	color: #0f4566;
	margin-bottom: 18px;
}

.contact-box p {
	color: #648096;
	line-height: 2;
	margin-bottom: 30px;
}

.info {
	display: flex;
	align-items: center;
	gap: 18px;

	margin-bottom: 25px;
}

.info i {
	width: 58px;
	height: 58px;

	border-radius: 18px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 24px;

	box-shadow: 0 10px 25px rgba(75, 140, 255, 0.2);

	transition: 0.4s;
}

.info:hover i {
	transform: rotate(-8deg) scale(1.1);
}

.info h4 {
	color: #0f4566;
	margin-bottom: 5px;
}

.info span {
	color: #6d889c;
}

/* CALL BUTTON */

.call-btn {
	width: 100%;

	padding: 18px;

	border: none;
	border-radius: 20px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;

	font-size: 18px;
	font-weight: 700;

	cursor: pointer;

	margin-top: 15px;

	box-shadow: 0 15px 30px rgba(75, 140, 255, 0.25);

	position: relative;
	overflow: hidden;

	transition: 0.3s;
}

.call-btn:hover {
	transform: translateY(-4px);
}

/* =========================================================
                        SERVICES
========================================================= */

.services {
	width: 100%;

	padding: 110px 7%;

	background: #f7fcff;

	position: relative;
	overflow: hidden;
}

.services::before {
	content: "";

	position: absolute;

	width: 400px;
	height: 400px;

	border-radius: 50%;

	background: linear-gradient(#22d3ee, #4b8cff);

	opacity: 0.08;

	top: -150px;
	right: -150px;

	filter: blur(50px);
}

.services::after {
	content: "";

	position: absolute;

	width: 300px;
	height: 300px;

	border-radius: 50%;

	background: #4b8cff;

	opacity: 0.07;

	bottom: -100px;
	left: -100px;

	filter: blur(50px);
}

/* TOP */

.services-top {
	text-align: center;

	max-width: 850px;

	margin: auto auto 70px;
}

.section-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding: 12px 24px;

	border-radius: 50px;

	background: #fff;

	color: #0f4566;
	font-weight: 700;

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

	margin-bottom: 25px;
}

.section-badge i {
	color: #22d3ee;
}

.services-top h2 {
	font-size: clamp(32px, 5vw, 55px);

	line-height: 1.4;

	color: #0f4566;

	margin-bottom: 20px;

	font-weight: 800;
}

.services-top h2 span {
	color: #22d3ee;
}

.services-top p {
	font-size: clamp(15px, 2vw, 19px);

	line-height: 2;

	color: #6a879a;
}

/* GRID */

.services-container {
	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

	gap: 30px;
}

/* CARD */

.service-card {
	background: #fff;

	border-radius: 35px;

	padding: 40px 35px;

	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);

	position: relative;
	overflow: hidden;

	transition: 0.4s;
}

.service-card::before {
	content: "";

	position: absolute;
	top: 0;
	right: 0;

	width: 100%;
	height: 0%;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	z-index: 0;

	transition: 0.5s;
}

.service-card:hover::before {
	height: 100%;
}

.service-card * {
	position: relative;
	z-index: 2;
}

.service-card:hover {
	transform: translateY(-12px);
}

.service-icon {
	width: 90px;
	height: 90px;

	border-radius: 28px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 36px;

	margin-bottom: 30px;

	box-shadow: 0 12px 30px rgba(75, 140, 255, 0.25);

	transition: 0.4s;
}

.service-card:hover .service-icon {
	transform: rotate(-8deg) scale(1.08);
}

.service-card h3 {
	font-size: 28px;
	font-weight: 800;

	color: #0f4566;

	margin-bottom: 18px;

	transition: 0.4s;
}

.service-card p {
	font-size: 16px;
	line-height: 2;

	color: #6a879a;

	margin-bottom: 25px;

	transition: 0.4s;
}

.service-card a {
	text-decoration: none;

	color: #22d3ee;

	font-weight: 700;

	display: flex;
	align-items: center;
	gap: 10px;

	transition: 0.4s;
}

.service-card:hover h3,
.service-card:hover p,
.service-card:hover a {
	color: #fff;
}

/* =========================================================
                        SCROLL REVEAL
========================================================= */

.hidden {
	opacity: 0;
	transform: translateY(80px);
	transition: all 1s ease;
}

.show {
	opacity: 1;
	transform: translateY(0);
}

/* =========================================================
                        RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
	.hero-content {
		flex-direction: column;
		text-align: center;
	}

	.left,
	.right {
		width: 100%;
	}

	.buttons {
		justify-content: center;
	}

	.features {
		justify-content: center;
	}

	.badge {
		justify-content: center;
	}

	.contact-box {
		max-width: 500px;
		margin: auto;
	}
}

@media (max-width: 992px) {
	nav {
		padding: 18px 5%;
	}

	.hero-content {
		padding: 160px 5% 80px;
	}

	.nav-links {
		gap: 22px;
	}
}

@media (max-width: 768px) {
	nav,
	nav.active {
		padding: 15px 5%;
	}

	.menu-toggle {
		display: flex;
	}

	.nav-links {
		position: absolute;

		top: 100%;
		right: 5%;

		width: 90%;

		background: rgba(255, 255, 255, 0.95);

		backdrop-filter: blur(12px);

		border-radius: 25px;

		padding: 25px;

		flex-direction: column;

		gap: 22px;

		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);

		opacity: 0;
		visibility: hidden;

		transform: translateY(20px);

		transition: 0.4s;
	}

	.nav-links.active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.nav-links li {
		width: 100%;
		text-align: center;
	}

	.nav-links li a {
		display: block;
		padding: 12px;
		border-radius: 14px;
	}

	.nav-links li a:hover {
		background: #f1fbff;
	}

	.nav-btn {
		display: none;
	}

	.hero {
		min-height: auto;
	}

	.hero-content {
		padding: 140px 5% 60px;
		gap: 40px;
	}

	.left {
		text-align: center;
	}

	.buttons {
		flex-direction: column;
		align-items: center;
	}

	.btn-primary,
	.btn-outline {
		width: 100%;
		max-width: 320px;
		text-align: center;
	}

	.features {
		flex-direction: column;
		align-items: center;
	}

	.feature {
		width: 100%;
		max-width: 350px;
	}

	.contact-box {
		padding: 30px 25px;
		border-radius: 25px;
	}

	.services {
		padding: 80px 5%;
	}
}

@media (max-width: 576px) {
	.logo {
		font-size: 24px;
	}

	.badge,
	.section-badge {
		width: 100%;
		justify-content: center;
	}

	.feature {
		min-width: 100%;
	}

	.contact-box h2 {
		font-size: 28px;
	}

	.service-card {
		padding: 30px 24px;
	}
}

/* =========================================================
                    AMBULANCE SECTION
========================================================= */

.ambulance {
	width: 100%;

	padding: 110px 7%;

	background: linear-gradient(135deg, #0f172a, #07152f);

	position: relative;
	overflow: hidden;
}

/* BACKGROUND EFFECTS */

.ambulance::before {
	content: "";

	position: absolute;

	width: 500px;
	height: 500px;

	border-radius: 50%;

	background: linear-gradient(#22d3ee, #4b8cff);

	top: -220px;
	left: -220px;

	opacity: 0.12;

	filter: blur(70px);

	animation: pulseMove 8s linear infinite;
}

.ambulance::after {
	content: "";

	position: absolute;

	width: 350px;
	height: 350px;

	border-radius: 50%;

	background: #22d3ee;

	right: -120px;
	bottom: -120px;

	opacity: 0.08;

	filter: blur(70px);

	animation: pulseMove 6s linear infinite alternate;
}

/* =========================================================
                    CONTAINER
========================================================= */

.ambulance-container {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 70px;

	position: relative;
	z-index: 2;
}

/* =========================================================
                    LEFT CONTENT
========================================================= */

.ambulance-left {
	flex: 1;
}

.ambulance-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding: 14px 24px;

	border-radius: 50px;

	background: rgba(255, 255, 255, 0.08);

	backdrop-filter: blur(12px);

	color: #fff;

	font-weight: 700;

	margin-bottom: 28px;

	border: 1px solid rgba(255, 255, 255, 0.08);

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

	animation: badgePulse 3s infinite;
}

.ambulance-badge i {
	color: #22d3ee;
}

.ambulance-left h2 {
	font-size: clamp(34px, 5vw, 65px);

	line-height: 1.3;

	color: #fff;

	margin-bottom: 25px;

	font-weight: 800;
}

.ambulance-left h2 span {
	color: #22d3ee;

	animation: glowText 2s ease infinite;
}

.ambulance-left p {
	font-size: clamp(15px, 2vw, 20px);

	line-height: 2;

	color: #c7d6e2;

	max-width: 700px;

	margin-bottom: 40px;

	font-weight: 600;
}

/* =========================================================
                    FEATURES
========================================================= */

.ambulance-features {
	display: flex;
	flex-direction: column;

	gap: 20px;

	margin-bottom: 40px;
}

.ambulance-feature {
	display: flex;
	align-items: center;

	gap: 18px;

	color: #fff;

	font-size: 18px;
	font-weight: 600;
}

.ambulance-feature i {
	width: 58px;
	height: 58px;

	border-radius: 18px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	display: flex;
	align-items: center;
	justify-content: center;

	color: #fff;

	font-size: 22px;

	box-shadow: 0 10px 25px rgba(75, 140, 255, 0.25);

	transition: 0.4s;
}

.ambulance-feature:hover i {
	transform: rotate(-8deg) scale(1.1);
}

/* =========================================================
                    BUTTONS
========================================================= */

.ambulance-buttons {
	display: flex;
	flex-wrap: wrap;

	gap: 20px;
}

.call-now,
.learn-more {
	padding: 18px 36px;

	border-radius: 50px;

	text-decoration: none;

	font-size: 17px;
	font-weight: 700;

	transition: 0.35s;
}

.call-now {
	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;

	display: inline-flex;
	align-items: center;
	gap: 12px;

	box-shadow: 0 15px 35px rgba(75, 140, 255, 0.28);

	position: relative;
	overflow: hidden;
}

.call-now:hover {
	transform: translateY(-5px);
}

.call-now::before {
	content: "";

	position: absolute;

	top: 0;
	left: -100%;

	width: 100%;
	height: 100%;

	background: rgba(255, 255, 255, 0.25);

	transform: skewX(-30deg);

	transition: 0.7s;
}

.call-now:hover::before {
	left: 120%;
}

.learn-more {
	border: 2px solid rgba(255, 255, 255, 0.15);

	color: #fff;

	background: rgba(255, 255, 255, 0.05);

	backdrop-filter: blur(10px);
}

.learn-more:hover {
	background: #22d3ee;
	border-color: #22d3ee;
}

/* =========================================================
                    RIGHT CARD
========================================================= */

.ambulance-right {
	flex: 1;

	display: flex;
	justify-content: center;
}

.ambulance-card {
	width: min(100%, 420px);

	background: rgba(255, 255, 255, 0.08);

	backdrop-filter: blur(14px);

	border-radius: 35px;

	padding: 50px 40px;

	text-align: center;

	position: relative;
	overflow: hidden;

	border: 1px solid rgba(255, 255, 255, 0.08);

	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);

	animation: floating 5s ease-in-out infinite;
}

.ambulance-card i {
	font-size: 90px;

	color: #22d3ee;

	margin-bottom: 25px;

	animation: ambulanceMove 2s infinite ease-in-out;
}

.ambulance-card h3 {
	font-size: 32px;

	color: #fff;

	margin-bottom: 18px;

	font-weight: 800;
}

.ambulance-card p {
	font-size: 16px;

	line-height: 2;

	color: #c7d6e2;
}

/* =========================================================
                    PULSE CIRCLE
========================================================= */

.pulse-circle {
	position: absolute;

	width: 260px;
	height: 260px;

	border-radius: 50%;

	border: 2px solid rgba(34, 211, 238, 0.15);

	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);

	animation: pulseCircle 3s infinite;
}

@keyframes pulseCircle {
	0% {
		transform: translate(-50%, -50%) scale(0.8);
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
	}
}

@keyframes ambulanceMove {
	0%,
	100% {
		transform: translateX(0);
	}

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

/* =========================================================
                    RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
	.ambulance-container {
		flex-direction: column;
		text-align: center;
	}

	.ambulance-left,
	.ambulance-right {
		width: 100%;
	}

	.ambulance-features {
		align-items: center;
	}

	.ambulance-buttons {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.ambulance {
		padding: 80px 5%;
	}

	.ambulance-container {
		gap: 50px;
	}

	.ambulance-feature {
		font-size: 16px;
	}

	.ambulance-buttons {
		flex-direction: column;
		align-items: center;
	}

	.call-now,
	.learn-more {
		width: 100%;
		max-width: 320px;

		justify-content: center;
		text-align: center;
	}

	.ambulance-card {
		padding: 40px 25px;
		border-radius: 28px;
	}
}

@media (max-width: 576px) {
	.ambulance-left h2 {
		font-size: 34px;
	}

	.ambulance-badge {
		width: 100%;
		justify-content: center;
	}

	.ambulance-feature {
		flex-direction: column;
		text-align: center;
	}

	.ambulance-card i {
		font-size: 75px;
	}

	.ambulance-card h3 {
		font-size: 26px;
	}
}

/* =========================================================
                    ABOUT SECTION
========================================================= */

.about {
	width: 100%;

	padding: 110px 7%;

	background: #f7fcff;

	position: relative;
	overflow: hidden;
}

/* BACKGROUND EFFECTS */

.about::before {
	content: "";

	position: absolute;

	width: 400px;
	height: 400px;

	border-radius: 50%;

	background: linear-gradient(#22d3ee, #4b8cff);

	opacity: 0.08;

	top: -150px;
	left: -150px;

	filter: blur(60px);
}

.about::after {
	content: "";

	position: absolute;

	width: 300px;
	height: 300px;

	border-radius: 50%;

	background: #4b8cff;

	opacity: 0.06;

	right: -100px;
	bottom: -100px;

	filter: blur(60px);
}

/* =========================================================
                    CONTAINER
========================================================= */

.about-container {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 80px;

	position: relative;
	z-index: 2;
}

/* =========================================================
                    IMAGE SIDE
========================================================= */

.about-image {
	flex: 1;

	display: flex;
	justify-content: center;
}

.about-img-box {
	position: relative;

	width: min(100%, 500px);
}

.about-img-box img {
	width: 100%;

	border-radius: 40px;

	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

/* EXPERIENCE BOX */

.experience-box {
	position: absolute;

	left: -30px;
	bottom: 30px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;

	padding: 24px 30px;

	border-radius: 28px;

	box-shadow: 0 15px 40px rgba(75, 140, 255, 0.3);

	text-align: center;

	animation: floating 4s ease-in-out infinite;
}

.experience-box h3 {
	font-size: 40px;
	font-weight: 800;
}

.experience-box p {
	font-size: 16px;
	margin-top: 6px;
}

/* =========================================================
                    CONTENT
========================================================= */

.about-content {
	flex: 1;
}

.about-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding: 14px 24px;

	border-radius: 50px;

	background: #fff;

	color: #0f4566;

	font-weight: 700;

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

	margin-bottom: 28px;
}

.about-badge i {
	color: #22d3ee;
}

.about-content h2 {
	font-size: clamp(34px, 5vw, 60px);

	line-height: 1.3;

	color: #0f4566;

	margin-bottom: 25px;

	font-weight: 800;
}

.about-content h2 span {
	color: #22d3ee;
}

.about-content p {
	font-size: clamp(15px, 2vw, 19px);

	line-height: 2;

	color: #68859a;

	margin-bottom: 40px;

	font-weight: 600;
}

/* =========================================================
                    FEATURES
========================================================= */

.about-features {
	display: flex;
	flex-direction: column;

	gap: 25px;

	margin-bottom: 40px;
}

.about-feature {
	display: flex;
	align-items: flex-start;

	gap: 18px;

	background: #fff;

	padding: 22px;

	border-radius: 24px;

	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);

	transition: 0.4s;
}

.about-feature:hover {
	transform: translateY(-8px);
}

.about-feature i {
	width: 65px;
	height: 65px;

	border-radius: 20px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 26px;

	box-shadow: 0 10px 25px rgba(75, 140, 255, 0.2);

	flex-shrink: 0;
}

.about-feature h4 {
	font-size: 22px;

	color: #0f4566;

	margin-bottom: 8px;
}

.about-feature p {
	font-size: 15px;

	line-height: 1.9;

	color: #6d889c;

	margin: 0;
}

/* =========================================================
                    BUTTON
========================================================= */

.about-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;

	padding: 18px 36px;

	border-radius: 50px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;

	text-decoration: none;

	font-size: 17px;
	font-weight: 700;

	box-shadow: 0 15px 35px rgba(75, 140, 255, 0.28);

	transition: 0.35s;
}

.about-btn:hover {
	transform: translateY(-5px);
}

/* =========================================================
                    RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
	.about-container {
		flex-direction: column;
		text-align: center;
	}

	.about-content,
	.about-image {
		width: 100%;
	}

	.about-feature {
		text-align: right;
	}
}

@media (max-width: 768px) {
	.about {
		padding: 80px 5%;
	}

	.about-container {
		gap: 50px;
	}

	.experience-box {
		left: 50%;
		transform: translateX(-50%);

		bottom: -20px;
	}

	.about-feature {
		flex-direction: column;
		align-items: center;

		text-align: center;
	}

	.about-btn {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 576px) {
	.about-content h2 {
		font-size: 34px;
	}

	.about-badge {
		width: 100%;
		justify-content: center;
	}

	.about-feature h4 {
		font-size: 20px;
	}

	.experience-box {
		padding: 18px 24px;
		border-radius: 22px;
	}

	.experience-box h3 {
		font-size: 30px;
	}
}

/* =========================================================
                    CONTACT SECTION
========================================================= */

.contact {
	width: 100%;

	padding: 110px 7%;

	background: linear-gradient(135deg, #f7fcff, #eef8ff);

	position: relative;
	overflow: hidden;
}

/* BACKGROUND EFFECTS */

.contact::before {
	content: "";

	position: absolute;

	width: 450px;
	height: 450px;

	border-radius: 50%;

	background: linear-gradient(#22d3ee, #4b8cff);

	opacity: 0.08;

	top: -180px;
	right: -180px;

	filter: blur(70px);
}

.contact::after {
	content: "";

	position: absolute;

	width: 320px;
	height: 320px;

	border-radius: 50%;

	background: #4b8cff;

	opacity: 0.05;

	left: -120px;
	bottom: -120px;

	filter: blur(60px);
}

/* =========================================================
                    CONTAINER
========================================================= */

.contact-container {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 70px;

	position: relative;
	z-index: 2;
}

/* =========================================================
                    LEFT INFO
========================================================= */

.contact-info {
	flex: 1;
}

.contact-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding: 14px 24px;

	border-radius: 50px;

	background: #fff;

	color: #0f4566;

	font-weight: 700;

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

	margin-bottom: 28px;
}

.contact-badge i {
	color: #22d3ee;
}

.contact-info h2 {
	font-size: clamp(34px, 5vw, 60px);

	line-height: 1.3;

	color: #0f4566;

	margin-bottom: 25px;

	font-weight: 800;
}

.contact-info h2 span {
	color: #22d3ee;
}

.contact-info p {
	font-size: clamp(15px, 2vw, 19px);

	line-height: 2;

	color: #68859a;

	margin-bottom: 40px;

	font-weight: 600;
}

/* =========================================================
                    CONTACT ITEMS
========================================================= */

.contact-details {
	display: flex;
	flex-direction: column;

	gap: 22px;
}

.contact-item {
	display: flex;
	align-items: center;

	gap: 18px;

	background: #fff;

	padding: 22px;

	border-radius: 24px;

	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);

	transition: 0.4s;
}

.contact-item:hover {
	transform: translateY(-8px);
}

.contact-item i {
	width: 65px;
	height: 65px;

	border-radius: 20px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 25px;

	box-shadow: 0 10px 25px rgba(75, 140, 255, 0.2);

	flex-shrink: 0;
}

.contact-item h4 {
	font-size: 22px;

	color: #0f4566;

	margin-bottom: 6px;
}

.contact-item span {
	color: #6d889c;

	font-size: 16px;
}

/* =========================================================
                    FORM BOX
========================================================= */

.contact-form-box {
	flex: 1;
}

.contact-form {
	background: rgba(255, 255, 255, 0.9);

	backdrop-filter: blur(14px);

	padding: 45px;

	border-radius: 35px;

	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

/* INPUTS */

.input-box {
	margin-bottom: 22px;
}

.input-box input,
.input-box textarea {
	width: 100%;

	padding: 18px 22px;

	border: 2px solid transparent;

	border-radius: 18px;

	background: #f4fbff;

	font-size: 16px;

	color: #0f4566;

	outline: none;

	transition: 0.35s;
}

.input-box input:focus,
.input-box textarea:focus {
	border-color: #22d3ee;

	background: #fff;

	box-shadow: 0 10px 25px rgba(34, 211, 238, 0.12);
}

.input-box textarea {
	resize: none;
}

/* BUTTON */

.contact-btn {
	width: 100%;

	padding: 18px;

	border: none;
	border-radius: 20px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: #fff;

	font-size: 18px;
	font-weight: 700;

	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;

	box-shadow: 0 15px 35px rgba(75, 140, 255, 0.25);

	transition: 0.35s;
}

.contact-btn:hover {
	transform: translateY(-5px);
}

/* =========================================================
                    RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
	.contact-container {
		flex-direction: column;
		text-align: center;
	}

	.contact-info,
	.contact-form-box {
		width: 100%;
	}

	.contact-item {
		text-align: right;
	}
}

@media (max-width: 768px) {
	.contact {
		padding: 80px 5%;
	}

	.contact-container {
		gap: 50px;
	}

	.contact-item {
		flex-direction: column;
		text-align: center;
	}

	.contact-form {
		padding: 35px 25px;
		border-radius: 28px;
	}
}

@media (max-width: 576px) {
	.contact-info h2 {
		font-size: 34px;
	}

	.contact-badge {
		width: 100%;
		justify-content: center;
	}

	.contact-item h4 {
		font-size: 20px;
	}

	.contact-btn {
		font-size: 16px;
	}
}

/* =========================================================
                    FOOTER
========================================================= */

.footer {
	width: 100%;

	background: linear-gradient(135deg, #07152f, #0f172a);

	padding: 90px 7% 30px;

	position: relative;
	overflow: hidden;
}

/* BACKGROUND EFFECTS */

.footer::before {
	content: "";

	position: absolute;

	width: 450px;
	height: 450px;

	border-radius: 50%;

	background: linear-gradient(#22d3ee, #4b8cff);

	opacity: 0.08;

	top: -180px;
	left: -180px;

	filter: blur(70px);
}

.footer::after {
	content: "";

	position: absolute;

	width: 300px;
	height: 300px;

	border-radius: 50%;

	background: #22d3ee;

	opacity: 0.05;

	right: -120px;
	bottom: -120px;

	filter: blur(60px);
}

/* =========================================================
                    CONTAINER
========================================================= */

.footer-container {
	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

	gap: 50px;

	position: relative;
	z-index: 2;

	padding-bottom: 50px;

	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================================================
                    COLUMNS
========================================================= */

.footer-col h3 {
	font-size: 26px;

	color: #fff;

	margin-bottom: 28px;

	font-weight: 800;

	position: relative;
}

.footer-col h3::after {
	content: "";

	position: absolute;

	right: 0;
	bottom: -10px;

	width: 70px;
	height: 4px;

	border-radius: 30px;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);
}

/* =========================================================
                    LOGO
========================================================= */

.footer-logo {
	display: flex;
	align-items: center;

	gap: 12px;

	font-size: 34px;
	font-weight: 800;

	color: #fff;

	margin-bottom: 25px;
}

.footer-logo i {
	color: #22d3ee;
}

/* =========================================================
                    TEXT
========================================================= */

.footer-col p {
	color: #c7d6e2;

	line-height: 2;

	font-size: 16px;

	margin-bottom: 30px;
}

/* =========================================================
                    LINKS
========================================================= */

.footer-col ul {
	list-style: none;
}

.footer-col ul li {
	margin-bottom: 18px;
}

.footer-col ul li a {
	text-decoration: none;

	color: #c7d6e2;

	font-size: 16px;

	transition: 0.35s;
}

.footer-col ul li a:hover {
	color: #22d3ee;

	padding-right: 8px;
}

/* =========================================================
                    SOCIALS
========================================================= */

.footer-socials {
	display: flex;
	align-items: center;

	gap: 15px;
}

.footer-socials a {
	width: 50px;
	height: 50px;

	border-radius: 16px;

	background: rgba(255, 255, 255, 0.08);

	color: #fff;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 20px;

	text-decoration: none;

	transition: 0.35s;
}

.footer-socials a:hover {
	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	transform: translateY(-6px);
}

/* =========================================================
                    CONTACT
========================================================= */

.footer-contact {
	display: flex;
	flex-direction: column;

	gap: 20px;
}

.footer-contact div {
	display: flex;
	align-items: center;

	gap: 15px;

	color: #c7d6e2;

	font-size: 16px;
}

.footer-contact i {
	width: 50px;
	height: 50px;

	border-radius: 16px;

	background: rgba(255, 255, 255, 0.08);

	display: flex;
	align-items: center;
	justify-content: center;

	color: #22d3ee;

	font-size: 20px;

	flex-shrink: 0;
}

/* =========================================================
                    BOTTOM
========================================================= */

.footer-bottom {
	text-align: center;

	padding-top: 30px;

	position: relative;
	z-index: 2;
}

.footer-bottom p {
	color: #9db2c3;

	font-size: 15px;

	letter-spacing: 0.5px;
}

/* =========================================================
                    RESPONSIVE
========================================================= */

@media (max-width: 768px) {
	.footer {
		padding: 70px 5% 25px;
	}

	.footer-container {
		gap: 40px;
	}

	.footer-col {
		text-align: center;
	}

	.footer-col h3::after {
		right: 50%;
		transform: translateX(50%);
	}

	.footer-socials {
		justify-content: center;
	}

	.footer-contact div {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 576px) {
	.footer-logo {
		justify-content: center;

		font-size: 28px;
	}

	.footer-col h3 {
		font-size: 22px;
	}

	.footer-col p,
	.footer-col ul li a,
	.footer-contact div {
		font-size: 15px;
	}
}

.testimonials {
	padding: 120px 7%;
	background: #f7fcff;
	text-align: center;
}

.section-title {
	max-width: 800px;
	margin: auto;
	margin-bottom: 60px;
}

.section-title h2 {
	font-size: clamp(35px, 5vw, 60px);
	color: #0f4566;
	margin: 20px 0;
	font-weight: 800;
}

.section-title h2 span {
	color: #22d3ee;
}

.section-title p {
	color: #68859a;
	line-height: 2;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	background: white;
	border-radius: 50px;
	font-weight: 700;
	color: #0f4566;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.badge i {
	color: #22d3ee;
}

.testimonial-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

.arrow {
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 18px;
	cursor: pointer;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	color: white;
	font-size: 22px;

	box-shadow: 0 15px 35px rgba(75, 140, 255, 0.25);

	transition: 0.3s;
}

.arrow:hover {
	transform: translateY(-5px);
}

.testimonial-slider {
	position: relative;
	width: 650px;
	max-width: 100%;
}

.testimonial-card {
	display: none;

	background: white;

	padding: 45px;

	border-radius: 35px;

	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);

	animation: fade 0.5s ease;
}

.testimonial-card.active {
	display: block;
}

.quote {
	font-size: 50px;
	color: #22d3ee;
	margin-bottom: 20px;
}

.testimonial-card p {
	font-size: 18px;
	line-height: 2;
	color: #68859a;
	margin-bottom: 25px;
}

.stars {
	color: gold;
	font-size: 22px;
	margin-bottom: 25px;
}

.user {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.user img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	object-fit: cover;
}

.user h4 {
	color: #0f4566;
	margin-bottom: 5px;
}

.user span {
	color: #68859a;
}

.dots {
	margin-top: 35px;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #cfdde8;
	cursor: pointer;
}

.dot.active {
	background: #22d3ee;
	transform: scale(1.3);
}

@keyframes fade {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 768px) {
	.testimonial-wrapper {
		flex-direction: column;
	}

	.arrow {
		display: none;
	}

	.testimonial-card {
		padding: 30px;
	}
}

.testimonial-slider {
	position: relative;
	width: 100%;
	max-width: 1100px;
	height: 450px;

	margin: auto;

	display: flex;
	align-items: center;
	justify-content: center;

	overflow: hidden;
}

.testimonial-card {
	position: absolute;

	width: 650px;
	max-width: 90%;

	padding: 45px;

	border-radius: 35px;

	background: rgba(255, 255, 255, 0.95);

	backdrop-filter: blur(15px);

	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);

	border: 1px solid rgba(255, 255, 255, 0.5);

	transition: 0.6s ease;
}

/* الكارت الأساسي */

.testimonial-card.active {
	transform: translateX(0) scale(1);

	opacity: 1;
	z-index: 5;
}

/* الكارت اللي قبله */

.testimonial-card.prev {
	transform: translateX(-75%) scale(0.82);

	opacity: 0.45;

	filter: blur(2px);

	z-index: 2;
}

/* الكارت اللي بعده */

.testimonial-card.next {
	transform: translateX(75%) scale(0.82);

	opacity: 0.45;

	filter: blur(2px);

	z-index: 2;
}

/* باقي الكروت */

.testimonial-card.hidden-card {
	opacity: 0;
	pointer-events: none;
}

.user img {
	width: 85px;
	height: 85px;

	border-radius: 50%;

	border: 4px solid #22d3ee;

	padding: 3px;

	object-fit: cover;
}

.user h4 {
	font-size: 22px;
	font-weight: 800;
	color: #0f4566;
}

.user span {
	font-size: 15px;
	color: #68859a;
}

.stars {
	font-size: 24px;
	color: #ffc107;

	margin-bottom: 25px;

	letter-spacing: 4px;
}

/* =========================================================
                    STATISTICS SECTION
========================================================= */

.stats {
	width: 100%;
	padding: 110px 7%;

	background: linear-gradient(135deg, #f7fcff, #eef8ff);

	position: relative;
	overflow: hidden;
}

.stats::before {
	content: "";

	position: absolute;

	width: 450px;
	height: 450px;

	border-radius: 50%;

	background: linear-gradient(#22d3ee, #4b8cff);

	opacity: 0.08;

	top: -180px;
	left: -180px;

	filter: blur(70px);
}

.stats-container {
	position: relative;
	z-index: 2;
}

.stats-header {
	text-align: center;

	max-width: 850px;
	margin: auto auto 70px;
}

.stats-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding: 12px 24px;

	border-radius: 50px;

	background: #fff;

	color: #0f4566;
	font-weight: 700;

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

	margin-bottom: 25px;
}

.stats-badge i {
	color: #22d3ee;
}

.stats-header h2 {
	font-size: clamp(34px, 5vw, 58px);

	color: #0f4566;

	margin-bottom: 20px;

	font-weight: 800;
}

.stats-header h2 span {
	color: #22d3ee;
}

.stats-header p {
	font-size: 18px;

	line-height: 2;

	color: #68859a;
}

.stats-grid {
	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

	gap: 30px;
}

.stat-card {
	background: #fff;

	padding: 45px 30px;

	border-radius: 35px;

	text-align: center;

	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);

	transition: 0.4s ease;

	position: relative;
	overflow: hidden;
}

.stat-card::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 0;

	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	transition: 0.5s;

	z-index: 0;
}

.stat-card:hover::before {
	height: 100%;
}

.stat-card * {
	position: relative;
	z-index: 2;
}

.stat-card:hover {
	transform: translateY(-12px);
}

.stat-card:hover i,
.stat-card:hover h3,
.stat-card:hover span {
	color: #fff;
}

.stat-card i {
	font-size: 55px;

	color: #22d3ee;

	margin-bottom: 25px;

	transition: 0.4s;
}

.stat-card h3 {
	font-size: 52px;

	font-weight: 800;

	color: #0f4566;

	margin-bottom: 12px;

	transition: 0.4s;
}

.stat-card span {
	font-size: 18px;

	font-weight: 600;

	color: #68859a;

	transition: 0.4s;
}

@media (max-width: 768px) {
	.stats {
		padding: 80px 5%;
	}

	.stat-card {
		padding: 35px 25px;
	}

	.stat-card h3 {
		font-size: 42px;
	}
}

.testimonials-slider {
	overflow: hidden;
	position: relative;
	width: 100%;
}
.faq {
	padding: 120px 7%;
	background: #f7fcff;
}

.faq-header {
	text-align: center;
	max-width: 800px;
	margin: auto;
	margin-bottom: 60px;
}

.faq-header h2 {
	font-size: clamp(34px, 5vw, 60px);
	color: #0f4566;
	font-weight: 800;
	margin: 20px 0;
}

.faq-header h2 span {
	color: #22d3ee;
}

.faq-header p {
	color: #68859a;
	line-height: 2;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding: 12px 22px;
	background: #fff;
	border-radius: 50px;

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

	font-weight: 700;
	color: #0f4566;
}

.badge i {
	color: #22d3ee;
}

/* CONTAINER */

.faq-container {
	max-width: 900px;
	margin: auto;

	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ITEM */

.faq-item {
	background: #fff;

	border-radius: 25px;

	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);

	overflow: hidden;

	transition: 0.4s;
}

/* QUESTION */

.faq-question {
	padding: 22px 25px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	font-weight: 700;
	color: #0f4566;

	cursor: pointer;

	font-size: 18px;
}

.faq-question i {
	transition: 0.4s;
	color: #22d3ee;
}

/* ANSWER */

.faq-answer {
	max-height: 0;
	overflow: hidden;

	padding: 0 25px;

	color: #68859a;

	line-height: 2;

	transition: 0.4s ease;
}

/* ACTIVE */

.faq-item.active .faq-answer {
	max-height: 200px;
	padding: 0 25px 22px;
}

.faq-item.active .faq-question i {
	transform: rotate(180deg);
}

/* HOVER */

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

.ai-testimonials {
	padding: 120px 7%;
	background: #f7fcff;
}

.ai-header {
	text-align: center;
	max-width: 850px;
	margin: auto;
	margin-bottom: 60px;
}

.ai-header h2 {
	font-size: clamp(34px, 5vw, 60px);
	color: #0f4566;
	font-weight: 800;
	margin: 20px 0;
}

.ai-header h2 span {
	color: #22d3ee;
}

.ai-header p {
	color: #68859a;
	line-height: 2;
}

.ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	background: #0f172a;
	color: #fff;
	border-radius: 50px;
	font-weight: 700;
}

/* GRID */

.ai-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	max-width: 1200px;
	margin: auto;
}

/* CARD */

.ai-card {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);

	padding: 25px;
	border-radius: 28px;

	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);

	transition: 0.4s;
	position: relative;
}

.ai-card:hover {
	transform: translateY(-10px);
}

/* TOP */

.ai-top {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}

.tag {
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
}

.ai-card.positive .tag {
	background: linear-gradient(135deg, #22d3ee, #4b8cff);
}

.ai-card.neutral .tag {
	background: #f59e0b;
}

.score {
	font-weight: 800;
	color: #0f4566;
}

/* TEXT */

.ai-card p {
	color: #68859a;
	line-height: 2;
	margin-bottom: 18px;
}

/* BAR */

.ai-bar {
	height: 8px;
	background: #e6f3ff;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 20px;
}

.ai-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #22d3ee, #4b8cff);
	border-radius: 20px;
}

/* USER */

.ai-user {
	display: flex;
	align-items: center;
	gap: 12px;
}

.avatar {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: linear-gradient(135deg, #22d3ee, #4b8cff);

	display: flex;
	align-items: center;
	justify-content: center;

	color: #fff;
	font-weight: 800;
}

.ai-user h4 {
	font-size: 16px;
	color: #0f4566;
}

.ai-user span {
	font-size: 13px;
	color: #68859a;
}

/* RESPONSIVE */

@media (max-width: 992px) {
	.ai-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ai-grid {
		grid-template-columns: 1fr;
	}
}

.locations {
	padding: 120px 7%;
	background: #f7fcff;
}

.locations-header {
	text-align: center;
	max-width: 800px;
	margin: auto;
	margin-bottom: 60px;
}

.locations-header h2 {
	font-size: clamp(34px, 5vw, 55px);
	color: #0f4566;
	font-weight: 800;
	margin: 20px 0;
}

.locations-header h2 span {
	color: #22d3ee;
}

.locations-header p {
	color: #68859a;
	line-height: 2;
}

.badge {
	background: #0f172a;
	color: #fff;
	padding: 10px 20px;
	border-radius: 50px;
	display: inline-block;
}

/* CONTAINER */

.locations-container {
	display: flex;
	gap: 30px;
	max-width: 1200px;
	margin: auto;
}

/* MAP */

.map-box {
	flex: 2;
	border-radius: 25px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.map-box iframe {
	width: 100%;
	height: 450px;
	border: none;
}

/* LIST */

.locations-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.location {
	background: #fff;
	padding: 20px;
	border-radius: 20px;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	transition: 0.3s;
	border: 2px solid transparent;
}

.location:hover {
	transform: translateY(-5px);
}

.location.active {
	border-color: #22d3ee;
	background: #f0fbff;
}

.location h3 {
	margin: 0;
	color: #0f4566;
}

.location p {
	color: #68859a;
	margin-top: 5px;
	font-size: 14px;
}

/* RESPONSIVE */

@media (max-width: 900px) {
	.locations-container {
		flex-direction: column;
	}

	.map-box iframe {
		height: 350px;
	}
}

/* =========================
   FLOATING BUTTONS
========================= */

.floating-actions {
	position: fixed;
	bottom: 20px;
	left: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 999;
}

.fab {
	width: 55px;
	height: 55px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;
	color: white;

	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);

	transition: 0.3s;
	text-decoration: none;
}

.fab:hover {
	transform: scale(1.1) rotate(5deg);
}

.call {
	background: #4b8cff;
	text-align: center;
}
.whatsapp {
	background: #22c55e;
	text-align: center;
}

.call i {
	text-align: center;
	font-size: 30px;
	padding: 5px;
	border: none;
}

.whatsapp i {
	text-align: center;
	font-size: 30px;
	padding: 10px;
}