/* Reset and Base Styles */

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

:root {
	--primary-cyan: #2cbcd6;
	--primary-cyan-dark: #1aa3bc;
	--primary-orange: #f5a623;
	--primary-orange-hover: #e09000;
	--white: #ffffff;
	--text-light: rgba(255, 255, 255, 0.9);
	--text-muted: rgba(0, 0, 0, 0.5);
	--card-bg: rgba(255, 255, 255, 0.95);
	--shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
	--shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.4);
	--primary: #07A8D9;
	--primary-foreground: #073154;
	--secondary: #f5a623;
	--secondary-foreground: #e09000;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Ubuntu", sans-serif;
	font-weight: light;
	line-height: 1.6;
	color: var(--white);
	background: var(--primary);
	min-height: 100vh;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Hero Section */

.hero {
	position: relative;
	display: flex;
	justify-content: center;
	text-align: center;
	padding: 80px 0px;
	overflow: hidden;
	background: radial-gradient(ellipse 90% 75% at 50% 0%, #07a8da, transparent 70%), #1c4364;
}

.evidence {
	padding:  1.25rem;
	display: inline-block;
	margin-bottom: 2rem;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius:  16px;
}

.hero-pattern {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-left: auto;
	margin-right: auto;
	background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
   radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
   url("images/spirale_idorsia-ok.svg");
	maskImage: radial-gradient(ellipse 80% 100% at 50% 30%, #1c4364 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 30%, #ffedf1 20%, transparent 75%);
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0.2;
	pointer-events: none;
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 120s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: rotate;
	-moz-animation-duration: 120s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
}

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

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

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

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

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

.badge {
	display: inline-block;
	background: var(--secondary);
	color: var(--white);
	padding: 10px 28px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 12px;
	text-decoration: none;
}

.event-date {
	font-size: 16px;
	color: var(--text-light);
	margin: 0px;
}

.hero h1 {
	font-size: clamp(28px, 5vw, 48px);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 24px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hero-description {
	font-size: 20px;
	color: var(--text-light);
	margin: 0 auto 40px;
	line-height: 1.4;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 36px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
}

.btn-primary {
	background: var(--primary-orange);
	color: var(--white);
	transition: all 0.3s ease-in-out;
	svg {
	transition: transform .3s ease-in-out;
	margin-left: 1px;
	transition: all 0.3s ease-in;
}

&:hover {
	background: var(--primary-cyan);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	transition: all 0.3s ease-in-out;
	svg {
	transform: rotate(45deg);
	margin-left: 5px;
	transition: all 0.3s ease-in;
}
	}
}

.btn-secondary {
	background: var(--primary-orange);
	color: var(--white);
	transition: all 0.3s ease-in-out;
	svg {
	transition: transform .3s ease-in-out;
	margin-left: 1px;
}

&:hover {
	background: var(--primary-orange-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	transition: all 0.3s ease-in-out;
	svg {
	transform: rotate(45deg);
	margin-left: 5px;
	transition: all 0.3s ease-in;
}
			}
	}

.user-message {
	font-size: 18px;
	color: var(--text-light);
	margin: 0 0 16px;
	line-height: 1.4;
}

.event-note {
	font-size: 13px;
	font-weight:  lighter;
	max-width: 600px;
	margin: 24px auto 0;
	line-height: 1.6;
}

/* Tematiche Section */

.tematiche {
	padding: 80px 20px;
	background: linear-gradient(to bottom, var(--primary) 0%, rgba(255, 255, 255, 0.5) 50%, var(--primary) 100%);
}

.tematiche h2, .relatori h2 {
	font-size: clamp(18px, 4vw, 24px);
	font-weight: 700;
	text-align: center;
	margin-bottom: 16px;
}

.section-description {
	font-size: 16px;
	color: var(--text-light);
	text-align: center;
	max-width: 700px;
	margin: 0 auto 48px;
	line-height: 1.7;
}

.slider-container {
	margin: 0 auto;
}

.slider-wrapper {
	overflow: hidden;
	margin-bottom: 30px;
}

.slider {
	display: flex;
	gap: 20px;
	transition: transform 0.5s ease;
	padding: 0.5rem;
	height: 100%;
}

.slide {
	flex: 0 0 calc(25% - 15px);
	background: var(--card-bg);
	border-radius: 16px;
	padding: 24px;
	color: #333;
	box-shadow: var(--shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: center;
}


.slide:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

.slide-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.icon-brain {
	background: var(--primary-orange);
	color: #fff;
}

.icon-link {
	background: var(--primary-orange);
	color: #fff;
}

.icon-users {
	background: var(--primary-orange);
	color: #fff;
}

.icon-chat {
	background: var(--primary-orange);
	color: #fff;
}

.icon-strategy {
	background: var(--primary-orange);
	color: #fff;
}

.slide p {
	font-size: 14px;
	line-height: 1.4;
	color: #444;
	text-align: left;
}

.slider-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.slider-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.2);
	color: var(--white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.slider-btn:hover {
	background: rgba(255, 255, 255, 0.3);
}

.slider-dots {
	display: flex;
	gap: 8px;
}

.dot {
	width: 32px;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
}

.dot.active {
	background: var(--white);
	width: 48px;
}

/* Relatori Section */

.relatori {
	padding: 80px 20px;
	background: linear-gradient(to bottom, var(--primary) 0%, rgba(255, 255, 255, 0.5) 50%, var(--primary) 100%);
}

.relatori-inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	height: 100%;
}

.relatore-card {
	background: var(--card-bg);
	border-radius: 16px;
	padding: 32px 24px;
	text-align: center;
	color: #333;
	box-shadow: var(--shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.relatore-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

.relatore-image {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 20px;
}

.relatore-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

h3 {
	font-size: 16px;
	font-weight: 500;
	color: #222;
}

.relatore-role {
	font-size: 13px;
	color: #b9b9b9;
	line-height: 1.5;
	padding-top: 0.5rem;
	font-weight: 300;
	text-align: center!important;
}

.relatore-badge {
	width: 100%;
	font-size: 14px;
	padding-top: 1em;
	border-top: 1px solid;
	border-image: linear-gradient(to right, white, #808080, white) 2;
}



/* Footer */

.footer {
	padding: 80px 20px;
	text-align: center;
	background: #fff;
}

.footer p {
	font-size: 14px;
	color: var(--text-muted);
}

.footer .logo {
	width: 200px;
	margin: 1rem 0;
}

/* Responsive Design */

@media (max-width: 1024px) {
	.slide {
		flex: 0 0 calc(33.333% - 14px);
	}
}

@media (max-width: 768px) {
	.hero {
		padding: 40px 0px;
		min-height: auto;
	}
	
	.hero h1 {
		font-size: 28px;
	}
	
	.slide {
		flex: 0 0 calc(50% - 10px);
	}
	
	.tematiche, .relatori {
		padding: 60px 20px;
	}
}

@media (max-width: 480px) {
	.slide {
		flex: 0 0 100%;
	}
	
	.relatori-grid {
		grid-template-columns: 1fr;
	}
	
	.btn {
		padding: 12px 28px;
		font-size: 14px;
	}
	
	.hero-description, .section-description {
		font-size: 14px;
	}
}









.page-events-live-event {
	background-color: #fff;
}


.header {
	float: none;
	text-align: left;
	
}

.header h3 {
	font-weight: bold;
	color: #fff;
}

.chat {
	position: relative;
	height: 100%;
}

.chat iframe {
	position: absolute;
	top:  0px;
	bottom:  0px;
	left: 0px;
	height: -webkit-fill-available;
}

@media (max-width: 992px) {
  .chat iframe {
	 position: relative;
    height: 48svh;
  }
}


iframe {
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	height: auto;
}



@media (min-width: 1100px) {
  .container {
    max-width: 1050px;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media (min-width: 1480px) {
  .container {
    max-width: 1440px;
    padding-left: 0px;
    padding-right: 0px;
  }
}