.text-green {color:#317059!important;}

.elenco {border:none!important;
text-align:center!important;
color: #317059!important;
	font-family:'din-2014,sans-serif';
}
/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
:root {
	--verde-scuro: #317059 ;
	--giallo: #A67600; /**** og logo #FDC535**/
	--lilla: #8A5F93 ; /** og logo #D3BBDB **/
	--light: #fff7e2;
	--grigio-testo: #616160; 
	--cnvs-primary-menu-active-color: #ebb58a;
	--din-font:"din-2014";
	--cnvs-body-font:"din-2014";
	--bs-card-color:#616160 !important;
}

.feature-box{
  display:flex;
  flex-direction:column;
  align-items:center;   /* centra icona e testo */
  text-align:center;
}

.icona-piccola img{
  width:70px;
  height:auto;
}

.fbox-media{
  margin-bottom:10px; /* spazio tra icona e titolo */
}

.categorie-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    max-width:1000px;
    margin:auto;
}

.categoria{
    display:flex;
    align-items:center;
    background:#fff7e2;
    padding:18px 24px;
    border-radius:4px;
   
    font-size:18px;
    color:#2d5c55;
}

.icona{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:16px;
    flex-shrink:0;
}

.icona img{
    width:60px;
    height:60px;
}

.categoria span{
    font-weight:500;
}



/* Griglia soluzioni */
.solutions-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding: 2rem;
}
.solutions-grid .card {
  border: 1px solid #ddd;
  padding: 1rem;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.solutions-grid .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.solutions-grid .btn-secondary {
  margin-top: .8rem;
  background: #0066CC;
  color: #fff;
  padding: .6rem 1rem;
}


/********** CLASSI NEWS ****/
strong {
  color: #fcc435;   /* giallo caldo */
  font-weight: 600; /* meno pesante del bold standard */
}

.date { color: #fcc435;   /* giallo caldo */
  font-weight: 600; /* meno pesante del bold standard */}

.h3-news {font-size:25px; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.news-item {
  border: 1px solid #e0e0e0;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}

/* Tablet */
@media (max-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}


#footer .footer-widgets-wrap {
    padding-top: 30px 0px 30px 0px!important;
}




/**************** nav *************/
@media (min-width: 992px) {
	.morph-marker {
		--cnvs-morph-height: 3px;
		--cnvs-morph-duration: .3s;
		position: absolute;
		display: block;
		background: var(--verde-scuro);
		height: var(--cnvs-morph-height);
		border-radius: var(--bs-border-radius);
		transition: all var(--cnvs-morph-duration);
	}
	
	.morph-bg .morph-marker {
		--cnvs-morph-height: 100%;
		opacity: .1;
		bottom: 0 !important;
	}
	
	.morph-bg .menu-link {
		position: relative;
		--cnvs-primary-menu-padding-y: 11px;
		--cnvs-primary-menu-hover-color: var(--cnvs-primary-menu-color);
		z-index: 1;
	}
}



/*********** colori *********/

 .is-expanded-menu.side-header:not(.open-header) #wrapper {
    margin: 0 0 0 0 !important;
}

.bg-color{
	background-color: var(--verde-scuro) !important;
}

.bg-light{
	background-color: var(--light) !important;
}

.light{
	color: var(--light) !important;
}

.giallo{
	color: var(--giallo) !important;
}

.lilla{
	color: var(--lilla) !important;
}

.bg-giallo{
	background-color: var(--giallo) !important;
}

.bg-lilla{
	background-color: var(--lilla) !important;
}

.gradient-light-pink{
	background-image: linear-gradient(to right,#D3BBDB, #FDC535)!important;
}


.dark{
	color: var(--verde-scuro)!important;
}

.text-verde{
	color: var(--verde-scuro) !important;
}

#top-bar p{
	font-size: 13px;
}

.w-90p{
	max-width: 90px;
}

.section{
	background-color: white !important;
}

.section.bg-transparent{
	background-color: transparent !important;
}



.before-heading::before{
	background-color: var(--giallo);
}


/*********** tipografia ************/
.din-font, .product-title{
	font-family: var(--din-font);
}

.before-heading{
	font-family: var(--din-font);
	font-size: 15px;
}

h1, h2, h3, h5{
	color: var(--verde-scuro) !important;
	font-family: var(--din-font) !important;
}

h1{
	font-size: 40px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

h2{
	font-size: 34px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

h3{
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	font-size: 2rem;
}

h4{
	font-family: var(--din-font) !important;
	font-style: normal;
	font-weight: 500 !important;
	line-height: normal;
}

h4 span{
	color: var(--lilla) !important;
}

p{
	color: var(--grigio-testo);
	font-family: var(--din-font);
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.8;
}

.fbox-content p{
	color: var(--grigio-testo);
}

ul li{
	color: var(--grigio-testo);
	margin-bottom: 5px;
}


/*************************** button ***********************/
a.button.gradient-light-pink:hover{
	background-color: transparent;
	
}

.button, .button:hover, .button:focus{
	font-family: var(--din-font);
	font-size: 17px !important;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-transform: uppercase;
	display: inline-flex;
	padding: 10px 36px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	color: var(--verde-scuro);
	width: auto;
	margin-top: 30px;
	border: 2px solid transparent !important;  
    box-sizing: border-box !important;
}


.button:hover,
.button:focus {
    border-color: 2px solid var(--verde-scuro) !important; /* compare senza ingrandire */
}

/********** navbar ************/
.is-expanded-menu .menu-link{
	padding: 30px;
}
.menu-link{
	font-family: var(--din-font);
	font-size: 16px;
	font-style: normal;
	font-weight: 400; 
	line-height: normal;
	text-transform: uppercase;
}

.menu-link img{
	max-width: 140px;
}

.menu-item.current > .menu-link{
	color: var(--verde-scuro);
	font-weight: bolder;
}

.is-expanded-menu .sub-menu-container .menu-item:hover > .menu-link, .is-expanded-menu .sub-menu-container .menu-item.current > .menu-link, .sub-menu-container .menu-item > .menu-link {
    font-family: var(--din-font)!important;
	color: var(--grigio-testo) !important;
	font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.is-expanded-menu .sub-menu-container .menu-item > .menu-link{
	 font-weight: 400;
}
/* ----- Tab ----- */
.block-tab-2 .nav-tabs {
	--bs-nav-tabs-border-width: 0px;
	--bs-nav-link-color: var(--grigio-testo);
	--bs-nav-link-hover-color: var(--lilla);
}

.block-tab-2 .nav-tabs .nav-item .nav-link {
	position: relative;
	font-size: 15px;
	font-weight: 400;
	padding: 0 0 20px 0;
}

.block-tab-2 .nav-tabs .nav-item .nav-link i {
	display: block;
	font-size: 38px;
	margin: 0 0 10px 0;
}

.block-tab-2 .nav-tabs .nav-item .nav-link.active {
	top: 0;
}

.block-tab-2 .nav-tabs .nav-item .nav-link.active i {
	color: var(--bs-danger);
}

.block-tab-2 .nav-tabs .nav-item .nav-link.active::after {
	content: '';
	position: absolute;
	width: 200px;
	height: 6px;
	bottom: 0;
	left: 0;
	margin-left: -3px;
	background: linear-gradient(to right,var(--lilla), var(--giallo))!important;
}

#canvas-tab .nav-item img{
	max-height: 80px;
}

/* --- MOBILE FIX per tab tutte uguali --- */
@media (max-width: 768px) {

    .block-tab-2 .nav-tabs {
        display: flex;
        flex-wrap: nowrap;      /* evita l'andare a capo */
        width: 100%;
    }

    .block-tab-2 .nav-tabs .nav-item {
        flex: 1 1 25%;          /* 4 tab → 25% ciascuna */
        text-align: center;
        max-width: 25%;
    }

    .block-tab-2 .nav-tabs .nav-link {
        width: 100%;            /* forza la larghezza piena */
        padding: 0 5px 20px;    /* leggero padding laterale */
    }

    .block-tab-2 .nav-tabs .nav-item img {
        max-height: 55px;       /* riduce l’icona per mobile */
    }

    /* Allineamento della linea colorata sotto la tab */
    .block-tab-2 .nav-tabs .nav-item .nav-link.active::after {
        width: 100%;            /* invece di 200px */
        left: 0;
        margin-left: 0;
    }
}

/*************************** footer **********************/
#copyrights.border-top{
	border-top: 1px solid rgba(255, 247, 226, 0.50) !important;
}

footer .text-white-50{
	color: #aac4b2 !important;
}


/******************** ticker *****************/
@-webkit-keyframes ticker {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}
	
	100% {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes ticker {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}
	
	100% {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

.ticker-wrap {
	--ticker-duration: 40s;
	width: 100%;
	overflow: hidden;
	padding-left: 100%;
	box-sizing: content-box;
}

.ticker-wrap .ticker {
	display: inline-block;
	white-space: nowrap;
	padding-right: 100%;
	box-sizing: content-box;
	-webkit-animation: ticker var(--ticker-duration) linear infinite;
	animation: ticker var(--ticker-duration) linear infinite;
}

.ticker-wrap .ticker-item {
	display: inline-block;
	padding: 0 2rem;
	font-size: 1.5rem;
}

.ticker-wrap.pause-on-hover .ticker:hover {
	animation-play-state: paused;
}

a.ticker-item:hover {
	text-decoration: underline !important;
}


/**************** team **************/
.team-person {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.person-container {
	border-radius: 50%;
	height: 312px;
	-webkit-tap-highlight-color: transparent;
	transform: scale(0.48);
	transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 400px;
}

.person-container:hover {
	transform: scale(0.54);
}

.person-container-inner {
	position: relative;
	clip-path: path( "M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z" );
	transform-origin: 50%;
	top: -200px;
}

.person-circle {
	border-radius: 50%;
	cursor: pointer;
	height: 380px;
	left: 10px;
	pointer-events: none;
	position: absolute;
	top: 210px;
	width: 380px;
}

.person-img {
	pointer-events: none;
	position: relative;
	transform: translateY(20px) scale(1.16);
	transform-origin: 50% bottom;
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 380px;
	left: 22px;
	top: 164px;
}

.person-container:hover .person-img {
	transform: translateY(0) scale(1.2);
}

.person-divider {
	height: 1px;
	width: 160px;
	background-color: var(--lilla);
}

/************************ cta split ***************/
@media (min-width: 576px) {
	.section-split {
		--section-width: 50%;
		--hover-width: 65%;
		--less-width: calc(100% - var(--hover-width));
		--hover-speed: 1s;
		--bg-opacity: 0.7;
		
		position: absolute;
		left: 0;
		top: 0;
		width: var(--section-width);
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: center center;
		transition: width var(--hover-speed) ease;
	}
	
	.section-split.split-right {
		left: auto;
		right: 0;
	}
	
	.section-split:hover ~ .section-split {
		width: var(--less-width);
	}
	
	.section-split:hover {
		width: var(--hover-width);
	}
}

/**************** form contatti *************/
.block-form-9 .form-control {
	--cnvs-input-btn-padding-x: 1rem;
	--cnvs-input-btn-padding-y: 0.875rem;
	--cnvs-input-btn-border-width: 1px;
	--cnvs-input-btn-border-color: var(--grigio-testo);
	--cnvs-form-control-radius: 0.875rem;
}

.form-control:focus {
    color: var(--grigio-testo);
    border-color: var(--verde-scuro);
	box-shadow: 0 0 0 0.25rem rgba(4,1 86, 54, 0.25);
}

.block-form-9 label {
	--cnvs-input-label-mb: 0.75rem;
	color: var(--grigio-testo);
}

.block-form-9 form .btn {
	--bs-btn-padding-y: 0.875rem;
	--bs-btn-border-radius: 0.875rem;
}

.block-form-9 .form-select {
	padding: 0.875rem 1rem;
	border-color: var(--cnvs-contrast-1000);
	border-radius: 0.875rem;
}


.fluid-width-video-wrapper{
	padding-top: 70% !important;
}

.btn-check:checked + .btn{
	background-color: var(--verde-scuro);
}

/************** carousel ***************/
#oc-images .oc-item {
    max-height: 500px; /* o l’altezza che ti serve */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#oc-images .oc-item img {
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* oppure 'cover', se vuoi riempire senza bordi */
}

/********+ rotating text****************/
.text {
  position: absolute;
  width: 450px;
  left: 50%;
  margin-left: -225px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
}

p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

.word {
  position: absolute;
  width: 450px;
  opacity: 0;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/***************************. breadcrumbs ******************************/

    .page-title-row {
        flex-direction: row;
        justify-content: end;
        align-items: end;
    }


.page-title{
	border:none;
}

.breadcrumb-item.active a{
	color: var(--lilla);
	text-decoration: underline !important;
}


/************* varie ************/
header ul {
	list-style-type: none !important;
}

ul {
  list-style: none; /* rimuove i punti standard */
  padding-left: 0;
}

header ul li{
  padding-left: 0; /* spazio per l’icona */
  margin-bottom: 0;
}

ul li {
  position: relative;
  padding-left: 30px; /* spazio per l’icona */
  margin-bottom: 12px;
}

header ul li::before, #prodotti ul li::before {
  content: none !important;
}


ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;   
  height: 24px;  
  background-image: url('../IMAGES/icone/foglia.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

::marker{
	width: 20px;
}



@media only screen and (max-width:992px){
	section .titolo{
		padding: 0px 20px !important;
	}
	
	.fbox-desc h3{
		font-size: 1.3rem;
	}
	
}

section .titolo{
	padding: 100px 0;
}

.feature-box.media-box .fbox-media{
	margin-bottom: 20px;
	max-width: 150px;
}

.fbox-media i{
	font-size: 40px;
}

/**************

/******** bg-cerchi ********/
#wrapper.bg-logo{
	background:url('../IMAGES/bg-cerchi-big.png');
	background-repeat: repeat-y;
	background-size: 100% auto;
}



@media (min-width: 992px) {
    .hero-img {
        width: 100%;
        margin-top: 100px; /* puoi lasciare */
        border-radius: 0; /* se vuoi senza arrotondamento */
    }
}

@media (max-width:992px){
	#wrapper.bg-logo{
	background:url('../IMAGES/bg-cerchi-mobile.png');
	background-repeat: repeat-y;
}
}



/*********** accessibilità *********/
#skiptocontent a{
	padding: 6px;
    position: absolute;
    top: -40px;
    left: 0px;
    color: white;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    border-bottom-right-radius: 8px;
    background: var(--verde-scuro);
    -webkit-transition: top .5s ease-out;
    transition: top .5s ease-out;
    z-index: 100;
}

#skiptocontent a:focus {
    position: absolute;
    left: 0px;
    top: 0px;
    outline-color: transparent;
    -webkit-transition: top .05s 
ease-in;
    transition: top .05s 
ease-in;
}

a:focus{
	border: 1px solid var(--verde-scuro);
	border-radius: 30px;
	padding: 5px;
}

a.button:focus{
	border: 2px solid var(--verde-scuro);
}