/* Global Styles */
:root {
	--background: 0 0% 100%;
	--foreground: 222.2 84% 4.9%;
	--card: 0 0% 100%;
	--card-foreground: 222.2 84% 4.9%;
	--popover: 0 0% 100%;
	--popover-foreground: 222.2 84% 4.9%;
	--primary: 222.2 47.4% 11.2%;
	--primary-foreground: 210 40% 98%;
	--secondary: 210 40% 96.1%;
	--secondary-foreground: 222.2 47.4% 11.2%;
	--muted: 210 40% 96.1%;
	--muted-foreground: 215.4 16.3% 46.9%;
	--accent: 210 40% 96.1%;
	--accent-foreground: 222.2 47.4% 11.2%;
	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 210 40% 98%;
	--border: 214.3 31.8% 91.4%;
	--input: 214.3 31.8% 91.4%;
	--ring: 222.2 84% 4.9%;
	--radius: 0.5rem;

	/* Webwise brand colors */
	--webwise-cyan: #8de1ff;
	--webwise-yellow: #f7f178;
	--webwise-purple: #a078f7;
	--webwise-pink: #f778b5;
	--webwise-red: #f77878;
	--webwise-orange: #ff6d06;
	--webwise-green: #9ef778;
	--webwise-lightpink: #febbf8;
	--webwise-dark: #171717;
	--webwise-gray: #737373;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
}

a {
	color: inherit;
	text-decoration: none;
}

#call {
	scroll-margin-top: 50px;
}

.min-h-screen {
	min-height: 100vh;
}

.cursor-p {
	cursor: pointer;
}

.bg-white {
	background-color: #fff;
}

.fixed {
	position: fixed;
}

.top-0 {
	top: 0;
}

.w-full {
	width: 100%;
}

.z-50 {
	z-index: 50;
}

.bg-white\/80 {
	background-color: rgba(255, 255, 255, 0.8);
}

.backdrop-blur-lg {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.border-b {
	border-bottom-width: 1px;
}

.border-gray-100 {
	border-color: #f3f4f6;
}

.max-w-7xl {
	max-width: 80rem;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.sm\:px-6 {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.lg\:px-8 {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.flex {
	display: flex;
}

.justify-between {
	justify-content: space-between;
}

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

.h-16 {
	height: 4rem;
}

.text-2xl {
	font-size: 1.5rem;
	line-height: 2rem;
}

.font-black {
	font-weight: 900;
}

.text-webwise-dark {
	color: var(--webwise-dark);
}

.hidden {
	display: none;
}

.md\:flex {
	display: none;
}

@media (min-width: 768px) {
	.md\:flex {
		display: flex;
	}
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
	margin-right: 0;
	margin-left: 2rem;
}

.text-webwise-dark {
	color: var(--webwise-dark);
}

.hover\:text-webwise-gray:hover {
	color: var(--webwise-gray);
}

.transition-colors {
	transition-property: color, background-color, border-color,
		text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.md\:hidden {
	display: block;
}

@media (min-width: 768px) {
	.md\:hidden {
		display: none;
	}
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

#mobile-menu a {
	padding: 0.5rem 0;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
	margin-top: 1rem;
	margin-bottom: 0;
}

.block {
	display: block;
}

/* Hero Section */
#home {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	min-height: 100vh;
}

.hero-logo {
	font-size: 5rem;
	font-weight: normal;
	color: #ffffff;
	text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6);
	letter-spacing: 0.02em;
	font-family: 'Sacramento Pro', cursive;
	margin-top: -100px;
}

@media (min-width: 768px) {
	.hero-logo {
		font-size: 8rem;
	}
}

@media (min-width: 1024px) {
	.hero-logo {
		font-size: 10rem;
	}
}

/* Portfolio Section */
#portfolio {
	padding-top: 5rem;
	padding-bottom: 5rem;
	background-color: #fff;
	position: relative;
	margin-top: -6rem;
	z-index: 10;
}

#call {
	padding-top: 5rem;
	padding-bottom: 5rem;
	background-color: #fff;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	position: relative;
	margin-top: -6rem;
	z-index: 10;
}

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

.mb-16 {
	margin-bottom: 4rem;
}

.text-4xl {
	font-size: 2.25rem;
	line-height: 2.5rem;
}

@media (min-width: 768px) {
	.md\:text-6xl {
		font-size: 3.75rem;
		line-height: 1;
	}
}

.mb-4 {
	margin-bottom: 1rem;
}

.tracking-tight {
	letter-spacing: -0.025em;
}

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.text-webwise-gray {
	color: var(--webwise-gray);
}

.mb-8 {
	margin-bottom: 2rem;
}

.bg-webwise-cyan {
	background-color: var(--webwise-cyan);
}

.text-black {
	color: #000;
}

.px-12 {
	padding-left: 3rem;
	padding-right: 3rem;
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.rounded-full {
	border-radius: 9999px;
}

.font-medium {
	font-weight: 500;
}

.hover\:shadow-lg:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.grid {
	display: grid;
}

.grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.md\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gap-6 {
	gap: 1.5rem;
}

.bg-gray-100 {
	background-color: #f3f4f6;
}

.rounded-2xl {
	border-radius: 1rem;
}

.aspect-video {
	aspect-ratio: 16 / 9;
}

.object-cover {
	object-fit: cover;
}

/* About Section */
#chi-siamo {
	padding-top: 5rem;
	padding-bottom: 5rem;
	background-color: #fff;
}

@media (min-width: 1024px) {
	.lg\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gap-16 {
	gap: 4rem;
}

.leading-relaxed {
	line-height: 1.625;
}

.px-8 {
	padding-left: 2rem;
	padding-right: 2rem;
}

/* Services Section */
#servizi {
	padding-top: 5rem;
	padding-bottom: 5rem;
	background-color: #fff;
}

.max-w-2xl {
	max-width: 42rem;
}

.rounded-\[40px\] {
	border-radius: 40px;
}

.border-3 {
	border-width: 3px;
}

.border-black {
	border-color: #000;
}

.p-6 {
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.md\:p-8 {
		padding: 2rem;
	}
}

.shadow-card {
	box-shadow: 8px 8px 0px #000;
}

.transform {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y))
		rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
		scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transition-transform {
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.hover\:scale-105:hover {
	--tw-scale-x: 1.05;
	--tw-scale-y: 1.05;
	transform: scale(1.05);
}

.flex-col {
	flex-direction: column;
}

.h-full {
	height: 100%;
}

.justify-between {
	justify-content: space-between;
}

.flex-grow {
	flex-grow: 1;
}

.font-bold {
	font-weight: 700;
}

.text-base {
	font-size: 1rem;
	line-height: 1.5rem;
}

@media (min-width: 768px) {
	.md\:text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}
}

.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

@media (min-width: 768px) {
	.md\:text-2xl {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

@media (min-width: 768px) {
	.md\:text-xl {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}
}

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

.leading-tight {
	line-height: 1.25;
}

.text-xs {
	font-size: 0.75rem;
	line-height: 1rem;
}

@media (min-width: 768px) {
	.md\:text-sm {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
}

.text-sm {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

@media (min-width: 768px) {
	.md\:text-base {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

.bg-webwise-yellow {
	background-color: var(--webwise-yellow);
}
.bg-webwise-lightpink {
	background-color: var(--webwise-lightpink);
}
.bg-webwise-orange {
	background-color: var(--webwise-orange);
}
.bg-webwise-green {
	background-color: var(--webwise-green);
}
.bg-webwise-red {
	background-color: var(--webwise-red);
}
.bg-webwise-pink {
	background-color: var(--webwise-pink);
}
.bg-webwise-purple {
	background-color: var(--webwise-purple);
}

@media (min-width: 768px) {
	.md\:col-span-2 {
		grid-column: span 2 / span 2;
	}
}

/* Keyframes for accordion */
@keyframes accordion-down {
	from {
		height: 0;
	}
	to {
		height: var(--radix-accordion-content-height);
	}
}

@keyframes accordion-up {
	from {
		height: var(--radix-accordion-content-height);
	}
	to {
		height: 0;
	}
}

.animate-accordion-down {
	animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
	animation: accordion-up 0.2s ease-out;
}

@media (min-width: 1024px) {
	.lg\:col-span-1 {
		grid-column: span 1 / span 1;
	}
	.lg\:col-span-2 {
		grid-column: span 2 / span 2;
	}
}

/* RESERVLY Section */
.relative {
	position: relative;
}

.w-full {
	width: 100%;
}

.h-auto {
	height: auto;
}

.absolute {
	position: absolute;
}

.top-8 {
	top: 2rem;
}

.right-16 {
	right: 4rem;
}

.w-32 {
	width: 8rem;
}

.h-32 {
	height: 8rem;
}

/* CTA Section */
.max-w-4xl {
	max-width: 56rem;
}

.mb-6 {
	margin-bottom: 1.5rem;
}

.mb-12 {
	margin-bottom: 3rem;
}

.gap-2 {
	gap: 0.5rem;
}

.w-2 {
	width: 0.5rem;
}

.h-2 {
	height: 0.5rem;
}

/* Referral Section */
.py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.text-3xl {
	font-size: 1.875rem;
	line-height: 2.25rem;
}

.underline {
	text-decoration-line: underline;
}

/* FAQ Section */
.rounded-b-\[100px\] {
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
}

.overflow-hidden {
	overflow: hidden;
}

.w-full {
	width: 100%;
}

.px-8 {
	padding-left: 2rem;
	padding-right: 2rem;
}

.py-6 {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.text-left {
	text-align: left;
}

.hover\:bg-gray-50:hover {
	background-color: #f9fafb;
}

.w-5 {
	width: 1.25rem;
}

.h-5 {
	height: 1.25rem;
}

.pb-6 {
	padding-bottom: 1.5rem;
}

/* Footer */
.py-20 {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.z-10 {
	z-index: 10;
}

@media (min-width: 768px) {
	.md\:text-7xl {
		font-size: 4.5rem;
		line-height: 1;
	}
}

@media (min-width: 1024px) {
	.lg\:text-8xl {
		font-size: 6rem;
		line-height: 1;
	}
}

.text-5xl {
	font-size: 3rem;
	line-height: 1;
}

.text-webwise-cyan {
	color: var(--webwise-cyan);
}

.bg-webwise-dark {
	background-color: var(--webwise-dark);
}

.opacity-30 {
	opacity: 0.3;
}

.top-16 {
	top: 4rem;
}

.left-20 {
	left: 5rem;
}

.w-8 {
	width: 2rem;
}

.h-4 {
	height: 1rem;
}

.bottom-32 {
	bottom: 8rem;
}

.right-20 {
	right: 5rem;
}

.rotate-12 {
	transform: rotate(12deg);
}

.top-1\/2 {
	top: 50%;
}

.left-1\/4 {
	left: 25%;
}

.w-6 {
	width: 1.5rem;
}

.h-3 {
	height: 0.75rem;
}

.opacity-20 {
	opacity: 0.2;
}

.-rotate-45 {
	transform: rotate(-45deg);
}

.bottom-8 {
	bottom: 2rem;
}

.left-0 {
	left: 0;
}

.right-0 {
	right: 0;
}

@media (min-width: 768px) {
	.md\:flex-row {
		flex-direction: row;
	}
}

.flex-col {
	flex-direction: column;
}

.text-sm {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.gap-4 {
	gap: 1rem;
}

.mb-4 {
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.md\:mb-0 {
		margin-bottom: 0;
	}
}

.flex-wrap {
	flex-wrap: wrap;
}

.hover\:underline:hover {
	text-decoration-line: underline;
}

/* Service card icon placeholder */
.justify-center > \[ICON\] {
	font-size: 2rem;
	font-weight: bold;
}

.faq-button {
	background: transparent;
	border-radius: 120px;
}

#mobile-menu-button {
	background: transparent;
	border: none;
	padding: 0;
}

.custom-navbar {
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.47);
	backdrop-filter: blur(13.5px);
	position: fixed;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	z-index: 50;
}

/* Candidati Form Styles */
.candidati-form-container {
	background-color: #8fe3fe;
	border: 3px solid #000;
	border-radius: 20px;
	padding: 40px;
	max-width: 500px;
	margin: 0 auto;
}

.candidati-title {
	text-align: center;
	font-size: 3rem;
	font-weight: 900;
	margin-bottom: 30px;
	color: #000;
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
	font-size: 0.875rem;
	color: #000;
}

.form-group input {
	width: 100%;
	padding: 15px;
	border: 2px solid #000;
	border-radius: 10px;
	background-color: #fff;
	font-size: 1rem;
}

.form-group input::placeholder {
	color: #aaa;
}

.form-group-checkbox {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.form-group-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #000;
	border-radius: 0;
	background-color: #fff;
	cursor: pointer;
	margin-right: 10px;
	position: relative;
	flex-shrink: 0;
}

.form-group-checkbox input[type="checkbox"]:checked {
	background-color: #000;
}

.form-group-checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.form-group-checkbox label {
	font-size: 0.875rem;
	color: #000;
}

.submit-button {
	width: 100%;
	padding: 15px;
	border: 2px solid #000;
	border-radius: 10px;
	background-color: #fff;
	font-size: 1.125rem;
	font-weight: 700;
	color: #000;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

.submit-button:hover {
	background-color: #000;
	color: #fff;
}