/* =========================================================
   VALTERRA - CUSTOM CSS
   ========================================================= */


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

.valterra-contact-banner {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible !important;
}

.valterra-contact-banner img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center center !important;
}


/* =========================================================
   SERVICIOS HOME IMAGE
   ========================================================= */

.servicios-home-img {
	width: 100%;
	max-width: 760px;
	height: auto;
	display: block;
	margin: 0 auto;
}


/* =========================================================
   HOME HERO CAROUSEL - GENERAL STRUCTURE
   ========================================================= */

#homeHeroCarousel,
#homeHeroCarousel .owl-stage-outer,
#homeHeroCarousel .owl-stage,
#homeHeroCarousel .owl-item {
	height: 100vh;
}

/* Mantiene altezza minima corretta anche su schermi bassi */
#homeHeroCarousel .position-relative[style*="height: 100vh"],
#homeHeroCarousel .video[style*="height: 100vh"] {
	min-height: 720px;
}

/* Allarga le colonne del testo nelle slide */
#homeHeroCarousel .col-lg-6,
#homeHeroCarousel .col-lg-8,
#homeHeroCarousel .col-lg-10,
#homeHeroCarousel .col-lg-11,
#homeHeroCarousel .col-xl-9,
#homeHeroCarousel .col-xl-10 {
	width: 100%;
	max-width: 1220px;
	flex: 0 0 100%;
}

/* Blocco interno del contenuto hero */
#homeHeroCarousel .d-flex.flex-column.align-items-center,
#homeHeroCarousel .hero-video-content {
	width: 100%;
	max-width: 1220px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}


/* =========================================================
   HOME HERO CAROUSEL - TEXT FIX
   ========================================================= */

/* Etichetta superiore: VALTERRA INGREDIENTS */
#homeHeroCarousel h3 {
	white-space: nowrap;
	text-align: center;
}

/* Titoli principali delle slide */
#homeHeroCarousel h1,
#homeHeroCarousel .hero-video-title {
	display: block;
	width: 100%;
	max-width: min(1180px, calc(100vw - 80px));
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	line-height: 1.14 !important;
	letter-spacing: -0.025em;
	white-space: normal;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
	text-wrap: balance;
}

/* Sottotitoli */
#homeHeroCarousel p,
#homeHeroCarousel .hero-video-subtitle {
	max-width: min(900px, calc(100vw - 80px));
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	line-height: 1.35 !important;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* Sottotitolo video su righe controllate */
#homeHeroCarousel .hero-video-subtitle span {
	display: block;
}


/* =========================================================
   HERO VIDEO - TEXT AND LOGO ANIMATION
   ========================================================= */

/* Contenitore generale del contenuto video */
.hero-video-content {
	position: relative;
	width: 100%;
	min-height: 260px;
	text-align: center;
}

/* Blocco testo del video */
.hero-video-text {
	text-align: center;
	opacity: 1;
	transform: translateY(0);
}

/* Titolo e sottotitolo inizialmente nascosti */
.hero-video-title,
.hero-video-subtitle {
	opacity: 0;
}

/* Logo inizialmente nascosto */
.hero-video-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
}

.hero-video-logo img {
	width: 280px;
	max-width: 80vw;
	height: auto;
	display: block;
}

/* Animazioni solo quando la slide video è attiva */
.owl-item.active .hero-video-title {
	animation: heroTitleFadeIn 1.2s ease forwards;
	animation-delay: 1s;
}

.owl-item.active .hero-video-subtitle {
	animation: heroSubtitleFadeIn 1.2s ease forwards;
	animation-delay: 2.8s;
}

/* Testo visibile quasi per tutta la durata del video */
/* Video attuale: circa 47 secondi */
.owl-item.active .hero-video-text {
	animation: heroTextFadeOut 1.5s ease forwards;
	animation-delay: 41s;
}

/* Logo finale */
.owl-item.active .hero-video-logo {
	animation: heroLogoFadeIn 1.5s ease forwards;
	animation-delay: 43s;
}

/* Reset totale quando la slide non è attiva */
.owl-item:not(.active) .hero-video-title,
.owl-item:not(.active) .hero-video-subtitle,
.owl-item:not(.active) .hero-video-text,
.owl-item:not(.active) .hero-video-logo {
	animation: none !important;
}

/* Stato corretto quando la slide non è attiva */
.owl-item:not(.active) .hero-video-title,
.owl-item:not(.active) .hero-video-subtitle,
.owl-item:not(.active) .hero-video-logo {
	opacity: 0;
}

.owl-item:not(.active) .hero-video-text {
	opacity: 1;
	transform: translateY(0);
}


/* =========================================================
   HERO VIDEO - KEYFRAMES
   ========================================================= */

@keyframes heroTitleFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
		filter: blur(8px);
	}

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

@keyframes heroSubtitleFadeIn {
	from {
		opacity: 0;
		transform: translateY(15px);
	}

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

@keyframes heroTextFadeOut {
	from {
		opacity: 1;
		transform: translateY(0);
	}

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

@keyframes heroLogoFadeIn {
	from {
		opacity: 0;
		transform: translate(-50%, -45%);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}


/* =========================================================
   HERO CAROUSEL - DESKTOP LARGE
   ========================================================= */

@media (min-width: 1200px) {
	#homeHeroCarousel h1,
	#homeHeroCarousel .hero-video-title {
		white-space: normal;
		font-size: clamp(42px, 3.1vw, 52px) !important;
		line-height: 1.14 !important;
		max-width: min(1180px, calc(100vw - 120px));
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		text-wrap: balance;
	}

	#homeHeroCarousel p,
	#homeHeroCarousel .hero-video-subtitle {
		font-size: 25px !important;
		max-width: min(900px, calc(100vw - 120px));
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}


/* =========================================================
   HERO CAROUSEL - DESKTOP / LAPTOP
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {
	#homeHeroCarousel h1,
	#homeHeroCarousel .hero-video-title {
		white-space: normal;
		font-size: 42px !important;
		max-width: min(900px, calc(100vw - 80px));
		line-height: 1.15 !important;
	}

	#homeHeroCarousel p,
	#homeHeroCarousel .hero-video-subtitle {
		font-size: 23px !important;
		max-width: min(780px, calc(100vw - 80px));
	}
}


/* =========================================================
   HERO CAROUSEL - TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 991px) {
	#homeHeroCarousel .position-relative[style*="height: 100vh"],
	#homeHeroCarousel .video[style*="height: 100vh"] {
		min-height: 680px;
	}

	#homeHeroCarousel .d-flex.flex-column.align-items-center,
	#homeHeroCarousel .hero-video-content {
		max-width: 760px;
		padding-left: 28px;
		padding-right: 28px;
	}

	#homeHeroCarousel h1,
	#homeHeroCarousel .hero-video-title {
		white-space: normal;
		font-size: 38px !important;
		line-height: 1.15 !important;
		max-width: 100%;
	}

	#homeHeroCarousel p,
	#homeHeroCarousel .hero-video-subtitle {
		font-size: 21px !important;
		max-width: 680px;
	}
}


/* =========================================================
   HERO CAROUSEL - MOBILE
   ========================================================= */

@media (max-width: 767px) {
	#homeHeroCarousel,
	#homeHeroCarousel .owl-stage-outer,
	#homeHeroCarousel .owl-stage,
	#homeHeroCarousel .owl-item {
		height: 100vh;
		min-height: 620px;
	}

	#homeHeroCarousel .position-relative[style*="height: 100vh"],
	#homeHeroCarousel .video[style*="height: 100vh"] {
		min-height: 620px;
	}

	#homeHeroCarousel .d-flex.flex-column.align-items-center,
	#homeHeroCarousel .hero-video-content {
		max-width: 100%;
		padding-left: 24px;
		padding-right: 24px;
	}

	#homeHeroCarousel h3 {
		font-size: 16px !important;
		line-height: 1.3 !important;
		white-space: normal;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#homeHeroCarousel h1,
	#homeHeroCarousel .hero-video-title {
		white-space: normal;
		font-size: 31px !important;
		line-height: 1.16 !important;
		letter-spacing: -0.02em;
		max-width: 100%;
	}

	#homeHeroCarousel p,
	#homeHeroCarousel .hero-video-subtitle {
		font-size: 18px !important;
		line-height: 1.35 !important;
		max-width: 100%;
	}

	#homeHeroCarousel .btn {
		margin-top: 24px !important;
	}
}


/* =========================================================
   HERO CAROUSEL - SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
	#homeHeroCarousel h1,
	#homeHeroCarousel .hero-video-title {
		font-size: 28px !important;
	}

	#homeHeroCarousel p,
	#homeHeroCarousel .hero-video-subtitle {
		font-size: 17px !important;
	}

	#homeHeroCarousel h3 {
		font-size: 14px !important;
	}
}
/* =========================================================
   HERO CAROUSEL - SUBTITLE CLEAN LINE BREAKS
   ========================================================= */

#homeHeroCarousel .hero-slide-subtitle {
	display: block;
	width: 100%;
	max-width: min(820px, calc(100vw - 70px));
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	line-height: 1.35 !important;
	white-space: normal !important;
	word-break: keep-all !important;
	overflow-wrap: normal !important;
	hyphens: none !important;
	text-wrap: balance;
}

/* Mobile: sottotitoli più stretti e senza parole spezzate */
@media (max-width: 767px) {
	#homeHeroCarousel .hero-slide-subtitle {
		max-width: 310px;
		font-size: 18px !important;
		line-height: 1.35 !important;
		letter-spacing: 0;
		word-break: keep-all !important;
		overflow-wrap: normal !important;
		hyphens: none !important;
	}
}

/* iPhone SE / mobile molto piccolo */
@media (max-width: 390px) {
	#homeHeroCarousel .hero-slide-subtitle {
		max-width: 300px;
		font-size: 17px !important;
		line-height: 1.35 !important;
	}
}
/* =========================================================
   HERO CAROUSEL - SLIDE SUBTITLE FADE IN
   ========================================================= */

#homeHeroCarousel .hero-slide-subtitle {
	opacity: 0;
	transform: translateY(14px);
	transition: none;
}

/* Il sottotitolo appare dopo il titolo */
#homeHeroCarousel .owl-item.active .hero-slide-subtitle {
	animation: heroSlideSubtitleFadeIn 1.1s ease forwards;
	animation-delay: 1.25s;
}

/* Reset quando la slide non è attiva */
#homeHeroCarousel .owl-item:not(.active) .hero-slide-subtitle {
	opacity: 0;
	transform: translateY(14px);
	animation: none !important;
}

@keyframes heroSlideSubtitleFadeIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 0.75;
		transform: translateY(0);
	}
}
html {
	scroll-behavior: smooth;
}

#almidones,
#proteinas,
#fibras,
#hidrocoloides,
#lecitinas,
#aromas {
	scroll-margin-top: 110px;
}
@media (max-width: 767px) {

	.portfolio-list .portfolio-item {
		margin-bottom: 15px;
	}

	.portfolio-list .thumb-info-inner {
		font-size: 13px !important;
		line-height: 1.2 !important;
	}

	.portfolio-list .thumb-info-type {
		font-size: 10px !important;
		line-height: 1.2 !important;
	}

	.portfolio-list .thumb-info-action {
		display: none !important;
	}

}
@media (max-width: 767px) {
	.portfolio-list .thumb-info-type {
		display: none !important;
	}

	.portfolio-list .thumb-info-inner {
		font-size: 14px !important;
		line-height: 1.2 !important;
	}

	.portfolio-list .thumb-info-action {
		display: none !important;
	}
}
/* Related links cards - Empresa / Productos / Servicios / Calidad */
.valterra-related-links {
	row-gap: 20px;
}

.valterra-related-links .card {
	overflow: hidden;
}

.valterra-related-links .card-img-top {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	object-position: center;
	background-color: #f7f7f7;
}

.valterra-related-links a {
	text-decoration: none;
}

@media (max-width: 991px) {

	.valterra-related-links > div > h4 {
		font-size: 17px !important;
		margin-bottom: 12px !important;
	}

	.valterra-related-links .card-body {
		padding: 12px 8px;
	}

	.valterra-related-links .card-title {
		font-size: 14px !important;
		line-height: 1.2 !important;
	}

}

@media (max-width: 767px) {

	.valterra-related-links {
		margin-left: -6px;
		margin-right: -6px;
	}

	.valterra-related-links > div {
		padding-left: 6px;
		padding-right: 6px;
	}

	.valterra-related-links > div > h4 {
		font-size: 13px !important;
		line-height: 1.2 !important;
		margin-bottom: 8px !important;
	}

	.valterra-related-links .card-body {
		padding: 8px 4px;
	}

	.valterra-related-links .card-title {
		font-size: 11px !important;
		line-height: 1.15 !important;
	}

}
@media (max-width: 767px) {

	.valterra-product-section {
		padding-top: 15px !important;
		padding-bottom: 15px !important;
	}

	.valterra-product-section .container {
		margin-top: 10px !important;
		margin-bottom: 10px !important;
	}

	.valterra-product-section h3 {
		margin-bottom: 14px !important;
	}

	.valterra-product-section p {
		margin-bottom: 15px !important;
	}

	.valterra-product-section img {
		margin-bottom: 15px !important;
	}

}
@media (max-width: 767px) {

	.valterra-empresa-section {
		padding-top: 15px !important;
		padding-bottom: 15px !important;
	}

	.valterra-empresa-section .container {
		margin-top: 10px !important;
		margin-bottom: 10px !important;
	}

	.valterra-empresa-section h3 {
		margin-bottom: 14px !important;
	}

	.valterra-empresa-section p {
		margin-bottom: 15px !important;
	}

	.valterra-empresa-section img {
		margin-bottom: 15px !important;
	}

}
.page-header-background {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* === DESKTOP: spazio tra immagine e testo === */
.custom-el-4 {
  margin-right: 20px;
}

/* === MOBILE (< 576px) === */
@media (max-width: 575px) {
  /* Layout verticale */
  .btn-with-arrow-solid.btn-xl {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
    padding-bottom: 50px !important; /* spazio per la freccia in fondo */
  }

  /* Immagine larghezza piena */
  .custom-el-4 {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
  .custom-el-4 img {
    height: auto !important;
    width: 100% !important;
    object-fit: cover;
  }

  /* Testo giustificato su tutta la larghezza, ultima riga a sinistra */
  .btn-with-arrow-solid strong {
    font-size: 0.95rem !important;
    top: 0 !important;
    text-align: justify !important;
    text-align-last: left !important;
    display: block !important;
    width: 100% !important;
  }

  /* Freccia in basso a destra */
  .btn-with-arrow-solid .bg-secondary {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
  }
}

/* === TABLET iPad (576px - 1199px) === */
@media (min-width: 576px) and (max-width: 1199px) {
  .custom-el-4 {
    display: inline-block !important;
    margin-right: 20px;
  }
  .custom-el-4 img {
    height: 90px !important;
    width: auto;
  }

  .btn-with-arrow-solid strong {
    font-size: 0.85rem !important;
    top: 0 !important;
    line-height: 1.2 !important;
  }

  .btn-with-arrow-solid.btn-xl {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
}

html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 80px; /* aggiusta in base all'altezza della tua navbar */
}