/*
Theme Name: HVAC
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: HVAC is specially designed product packaged for HVAC services by TemplatesJungle.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Background Color
  2.3 Section
    - Section Paddings
    - Section Margins
    - Section Title
  2.4 Buttons
    - Primary Buttons
    - Button Hover Effect

3. CONTENT ELEMENTS
  - Dropdown
  - Breadcrumb
  - Pagination
  - Accordion
  - Form
  - Swiper
  - Modal Video

4. SITE STRUCTURE
  4.1 Header
  4.2 Brand Section
  4.3 About Section
  4.4 Services Section
  4.5 Project Section
  4.6 CTA Section

5. PAGES STYLE
  5.1 Projects Page
  5.2 Pricing page 
  5.3 Reviews page
    

  
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --primary-color: #93a789;     /* verde principale */
  --secondary-color: #333333;   /* grigio scuro di base */
  --black-color: #222222;
  --light-black-color: #4a4a4a;
  --dark-color: #2b2b2b;
  --body-color: #5A5A5A;
  --gray-color: #777777;
  --light-color: #fdfdfd;

  /* Bootstrap Theme Color  */
  --bs-gray-100: #f4f4f4;
  --bs-gray-300: #d9d9d9;
  --bs-primary-text-emphasis: var(--primary-color);
  --bs-body-color-rgb: 90, 90, 90;
  --bs-light-rgb: 255, 255, 255;
  --bs-dark-rgb: 34, 34, 34;
  --bs-primary-rgb: 147, 167, 137; /* rgb di #93a789 */
}

/* Fonts */
:root {
  --heading-font: "Poppins", sans-serif;
  --body-font: "Poppins", sans-serif;
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

body {
  background-color: var(--light-color);
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 164%;
  letter-spacing: 0.32px;
  color: var(--body-color);
  margin: 0;
}

p {
  color: var(--body-color);
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

a:hover {
  color: var(--primary-color);
}

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

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

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

/* 2.2 Background Color
/*----------------------------------------------*/
.bg-light {
  background-color: var(--light-color) !important;
}

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

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

.bg-gray {
  background-color: var(--bs-gray-100) !important;
}


/*--------------------------------------------------------------
/** 2.3 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-small {
  padding-top: 8em;
  padding-bottom: 8em;
}

.padding-medium {
  padding-top: 10em;
  padding-bottom: 10em;
}

.padding-large {
  padding-top: 12em;
  padding-bottom: 12em;
}

@media only screen and (max-width: 990px) {
  .padding-small {
    padding-top: 6em;
    padding-bottom: 6em;
  }
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 8.125em;
  margin-bottom: 8.125em;
}

.margin-medium {
  margin-top: 10em;
  margin-bottom: 10em;
}

.margin-large {
  margin-top: 12em;
  margin-bottom: 12em;
}


/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
  font-family: var(--heading-font);
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: 0.84px;
  line-height: 115%;
}

h6 {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}

/* - Content width
--------------------------------------------------------------*/
.container-md {
  max-width: 1465px;
}

.container-lg {
  max-width: 1750px;
}

/* Animation */
@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

/* Animate Slide */
@keyframes slide {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }

  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
}

/*--------------------------------------------------------------
/** 2.4 Buttons
--------------------------------------------------------------*/

.btn {
  --bs-btn-padding-x: 2rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 500;
  text-transform: uppercase;
  border-radius: 0px;
  transition: all 0.5s ease-in-out;
}

/* - Primary Buttons
--------------------------------------------------------------*/
.btn-primary {
  --bs-btn-color: var(--light-color);
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: var(--light-color);
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--light-color);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--light-color);
  --bs-btn-disabled-bg: var(--primary-color);
  --bs-btn-disabled-border-color: var(--primary-color);
}

/* - Button Hover Effect
--------------------------------------------------------------*/
.btn-slide.btn-bg {
  background-color: var(--light-color);
}

.btn-slide {
  position: relative;
  display: inline-block;
  border: none;
  cursor: pointer;
  background-color: var(--secondary-color);
}

.btn-slide.hover-slide-right::before {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 3%;
  position: absolute;
  content: "";
  background-color: var(--primary-color);
  transition: 0.3s ease-in-out;
}

.btn-slide span {
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  width: 100%;
  transition: 0.3s;
  font-weight: 600;
}

.btn-slide.hover-slide-right:hover::before {
  width: 100%;
}

.btn-slide.hover-slide-right:hover span {
  color: var(--light-color);
}

/*--------------------------------------------------------------
/** 3.CONTENT ELEMENTS
--------------------------------------------------------------*/

/* Dropdown
------------------------------------------------------------- */
.dropdown-item {
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dark-color);
  font-family: var(--heading-font);
}

.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:active {
  color: var(--dark-color);
  background-color: var(--bs-gray-300);
}

.dropdown-toggle::after {
  border: none;
  margin-left: 0em;
  vertical-align: 0em;
}


/* Breadcrumb
------------------------------------------------------------- */
.breadcrumb-item+.breadcrumb-item::before {
  color: var(--bs-light);
  position: relative;
}


/* Pagination
------------------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--black-color);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--primary-color);
  --bs-pagination-hover-border-color: var(--primary-color);
  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: var(--primary-color);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--primary-color);
  --bs-pagination-active-border-color: var(--primary-color);
}


/* Accordion
------------------------------------------------------------- */
.accordion {
  --bs-accordion-btn-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');
  --bs-accordion-btn-active-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');
  --bs-accordion-border-radius: 0px;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
}


/* Form
------------------------------------------------------------- */
.form-control:focus {
  border: 1px solid #acacac;
  box-shadow: none;
}


/* Swiper
------------------------------------------------------------- */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 12px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 12px));
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--dark-color);
}


/* Modal Video
------------------------------------------------------------- */
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}

.modal-content {
  padding: 0;
  background-color: #f5f3ef;
  border: none;
  border-radius: 0
}



/*----------------------------------------------*/
/* 4 SITE STRUCTURE */
/*----------------------------------------------*/

/* 4.1 Header
/*----------------------------------------------*/
a.nav-link {
  text-transform: capitalize;
  font-weight: 500;
  color: var(--dark-color);
  font-family: var(--heading-font);
  transition: all 0.3s ease-in-out;
}

a.nav-link::after {
  content: "";
  text-align: center;
  display: block;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.9s;
}

a.nav-link.active::after,
a.nav-link:focus::after,
a.nav-link:hover::after {
  width: 100%;
  transition: width 0.9s;
}

#primary-header .dropdown .search::after {
  content: none;
}

#primary-header .search-dropdown .dropdown-menu {
  width: 260px;
}

#primary-header .search-dropdown .dropdown-menu input {
  min-width: 100%;
}

#primary-header .search-dropdown .dropdown-menu button {
  padding: 0 12px;
  min-height: -webkit-fill-available;
  border-radius: 0.25rem;
}

@media only screen and (max-width: 990px) {
  a.nav-link {
    font-size: 1.5rem;
  }

  a.nav-link.active::after,
  a.nav-link:focus::after,
  a.nav-link:hover::after {
    width: 0%;
  }

  a.nav-link.active,
  a.nav-link:focus,
  a.nav-link:hover {
    color: var(--primary-color) !important;
  }
}


/* 4.2 Brand Section
/*----------------------------------------------*/
img.brand-image {
  filter: contrast(0);
  transition: all 0.3s ease-in;
}

img.brand-image:hover {
  filter: contrast(1);
}


/* 4.3 About Section 
/*----------------------------------------------*/
svg.play-icon {
  animation: play 1.5s alternate infinite ease-in;
}

@keyframes play {
  0% {
    transform: scale(.8);
  }

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



/* 4.4 Services Section
/*----------------------------------------------*/
/* Jarallax */
.jarallax {
  min-height: 350px;
  transition: all 0.5s ease-in-out;
}

.service-block {
  transition: all 0.5s ease-in-out;
}

.service-block:hover .jarallax {
  opacity: 0;
}

.service-btn {
  transition: all 0.5s ease-in-out;
}

.service-block:hover .service-btn {
  color: var(--dark-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* TITOLI SERVIZI PIÙ GRANDI */
#services .service-block h3 {
  font-size: 2.8rem;
}

@media (max-width: 991px) {
  #services .service-block h3 {
    font-size: 2.2rem;
  }
}


/* OVERLAY ELEGANTE SUI SERVIZI */
.service-overlay {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  backdrop-filter: blur(2px);
}

/* ANIMAZIONE FADE-IN */
.fade-in {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
/* --- Services: altezza più compatta e centratura corretta --- */

/* il blocco deve avere respiro verticale ma non essere enorme */
#services .service-block {
  padding: 70px 0;          /* desktop */
  position: relative;
  overflow: hidden;
}

/* lo sfondo deve coprire tutto il blocco */
#services .service-bg.jarallax {
  position: absolute;
  inset: 0;
  min-height: 0;            /* disattiva il 350px */
  height: 100%;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

/* su hover continui a “spegnere” lo sfondo */
#services .service-block:hover .service-bg.jarallax {
  opacity: 0;
}

/* mobile: blocchi più bassi e overlay centrato/bello */
@media (max-width: 991px) {
  #services .service-block {
    padding: 35px 0;        /* riduce molto l’altezza */
  }

  /* evita overlay troppo “largo” o attaccato ai bordi */
  #services .service-overlay {
    margin: 0 auto;
  }
}



/* 4.5 Project Section
/*----------------------------------------------*/
.swiper-slide.swiper-width {
  width: auto !important;
}

.project-content .portfolio-img {
  transition: all 0.5s ease-in-out;
}

.project-content:hover .portfolio-img {
  opacity: 0.3;
}

.portfolio-description {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.project-content:hover .portfolio-description {
  opacity: 1;
}



/* 4.6 CTA Section
/*----------------------------------------------*/
.border-dotted {
  border: 2px dashed rgba(255, 255, 255, 0.5);
}






/*----------------------------------------------*/
/* 5 PAGES STYLE */
/*----------------------------------------------*/


/* 5.1 Projects Page
/*----------------------------------------------*/

button.filter-button {
  border: 0;
  background: transparent;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out;
  border-radius: 20px;
}

button.filter-button.active,
button.filter-button:hover {
  color: var(--bs-light);
  background: var(--primary-color);
}


/*--------------------------------------------------------------
 5.2 Pricing page 
  --------------------------------------------------------------*/
.plan-post {
  border: 1px solid var(--secondary-color);
}

span.price-tick {
  color: var(--primary-color);
}

.price-option {
  height: 300px;
}


/*--------------------------------------------------------------
 5.3 Reviews page
--------------------------------------------------------------*/

.reviews-components {
  box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
}

iconify-icon.quote {
  font-size: 60px;
  color: var(--primary-color);
}

.rate {
  color: var(--primary-color);
}

/* RESET MIRATO NELLA HERO: EVITO SFONDI CHE COPRONO IL VIDEO */


/* IMPOSTAZIONE HERO VIDEO */
#billboard {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

/* VIDEO DI SFONDO */
#billboard .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0 !important;
}

/* OVERLAY SOPRA IL VIDEO */
#billboard .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(51, 51, 51, 0.9) 0%,
    rgba(51, 51, 51, 0.6) 40%,
    rgba(51, 51, 51, 0.25) 100%
  ) !important;
  z-index: 1 !important;
}

/* CONTENUTO TESTO SOPRA TUTTO */
#billboard .container {
  position: relative;
  z-index: 2 !important;
}

#billboard .hero-kicker,
#billboard .hero-main,
#billboard p {
  color: #ffffff;
}







/* LOGO HEADER / FOOTER */
img.logo {
  max-height: 80px;   /* puoi scendere a 100 se lo vuoi ancora più piccolo */
  width: auto;
  height: auto;
}

@media (max-width: 991px) {
  img.logo {
    max-height: 80px;
  }
}


/* HERO VIDEO FULLSCREEN */
#billboard {
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--secondary-color);
}

#billboard .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

#billboard .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(51, 51, 51, 0.9) 0%,
    rgba(51, 51, 51, 0.6) 40%,
    rgba(51, 51, 51, 0.25) 100%
  );
  z-index: -1;
}

#billboard .hero-kicker,
#billboard .hero-main,
#billboard p {
  color: #ffffff;
}

/* HERO - CENTRATO */
#billboard .hero-main {
  font-size: 4rem;
}

#billboard .hero-kicker {
  letter-spacing: 2px;
  opacity: 0.9;
}

@media (max-width: 992px) {
  #billboard .hero-main {
    font-size: 2.8rem;
  }
}
/* FORCE VERTICAL CENTERING ON HERO */
#billboard,
#billboard .container,
#billboard .row {
  min-height: 100vh !important;
}

#billboard .row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#billboard .col-lg-8 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#billboard .container {
  display: flex;
  align-items: center;
}

#fullscreen-btn {
  background: rgba(255,255,255,0.85);
  color: #333;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 600;
  transition: 0.2s;
}

#fullscreen-btn:hover {
  background: white;
  transform: scale(1.03);
}

/* FORZA IL PULSANTE PLAY A ESSERE VISIBILE */
.play-circle-btn {
  position: relative !important;
  z-index: 99999 !important;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: #333;
  cursor: pointer;
  transition: 0.2s ease;
}

.play-circle-btn:hover {
  background: #fff;
  transform: scale(1.08);
}

.play-circle-btn i {
  position: relative;
  left: 2px;
}


#billboard .btn.btn-light {
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 4px;
  position: relative;
  z-index: 3; /* sopra overlay/video */
}

#billboard .col-lg-8 {
  position: relative !important;
  z-index: 9999 !important;
}

#billboard .col-lg-8 {
  text-align: center !important;
}

.play-circle-btn {
  display: inline-flex !important;
  margin: 0 auto !important;
}


@media (max-width: 576px) {
  .topbar span.small,
  .topbar a.small {
    font-size: 11px;
  }
}


/* SPAZIO TRA HERO E SEZIONE SERVIZI */
.section-title-spacing {
  padding-top: 100px;   /* aumenta o diminuisci qui */
  padding-bottom: 40px;
}

@media (max-width: 768px) {
  .section-title-spacing {
    padding-top: 60px;
    padding-bottom: 30px;
  }
}


/* CARD PRODOTTI */
.product-card {
  height: 380px;
  border-radius: 8px;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.product-card:hover .product-img {
  transform: scale(1.08);
}

/* OVERLAY */
.product-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 1;
  text-align: center;
}

.product-overlay h4 {
  font-weight: 600;
  font-size: 1.8rem;
}

.product-overlay a {
  font-size: 1.1rem;
}


/* TOPBAR COMPATTA MA SENZA TOCCARE IL LAYOUT */
.topbar {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* su desktop ancora un filo più compatta */
@media (min-width: 992px) {
  .topbar {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* il logo resta grande ma non cresce oltre */
.topbar img {
  max-height: 60px;
  width: auto;
}

/* centriamo verticalmente le due colonne in modo pulito */
.topbar .row {
  align-items: center;
}


/* Topbar un filo più compatta su desktop, logo invariato */
@media (min-width: 992px) {
  .topbar {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}



/* PAGINE INTERNE: HERO */
.page-hero{
  padding: 60px 0 30px;
  background: #f7f7f7;
}
.page-title{
  font-weight: 700;
}

.breadcrumb-home {
  font-size: 14px;
  color: #999;
  text-decoration: none;
}

/* Breadcrumb minimale */
.breadcrumb-wrap .breadcrumb a{ color:#333; text-decoration:none; }
.breadcrumb-wrap .breadcrumb .active{ color:#666; }

/* LAYOUT SIDEBAR */
/* ===== SIDEBAR SERRAMENTI (DESKTOP STICKY) ===== */



.side-link{
  display:block;
  padding: 10px 0;
  color:#1d1d1d;
  text-decoration:none;
  font-weight: 500;
}
.side-link:hover{
  color:#93a789;
}
.side-num{
  display:inline-block;
  min-width: 38px;
  color:#93a789;
  font-weight: 700;
}

.page-section,
.page-section .container,
.page-section .row{
  overflow: visible !important;
}


/* CONTENUTO */
.page-section{ padding: 40px 0 80px; }
.content-block{ scroll-margin-top: 120px; } /* quando clicchi ancora */
.kicker{
  color:#93a789;
  /*text-transform: lowercase;*/
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.content-title{
  font-weight: 700;
  margin-bottom: 14px;
}
.content-subtitle{
  font-weight: 600;
  margin-bottom: 14px;
}
.content-divider{
  margin: 55px 0;
  opacity: .12;
}



/* CTA PARTNERSHIP */
.partnership-cta{
  position: relative;
  padding: 70px 0;
  overflow: hidden;
}

.partnership-bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
}

.partnership-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
}

.partnership-title{
  font-weight: 700;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.25;
}

.partnership-text{
  font-size: 16px;
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 991.98px){
  .partnership-cta{
    padding: 55px 0;
    text-align: center;
  }

  .partnership-cta .btn{
    width: 100%;
  }
}

/* MODAL ARTIGIANI - LAYOUT PANNELLO SU IMMAGINE (DESKTOP OK) */
.modal-artigiani2{
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
}

.artigiani2-wrap{
  position: relative;
  height: min(78vh, 720px); /* non troppo alta su desktop */
}

.artigiani2-bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}

/* pannello grigio scuro “appoggiato” all’immagine */
.artigiani2-panel{
  position:absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(720px, 64%);
  max-height: calc(100% - 64px);
  overflow: auto;

  background: rgba(77,79,82,.85);
  color: #fff;
  padding: 34px 34px;
}

/* scrollbar leggibile */
.artigiani2-panel::-webkit-scrollbar{ width: 10px; }
.artigiani2-panel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.25);
  border-radius: 10px;
}
.artigiani2-panel::-webkit-scrollbar-track{
  background: rgba(0,0,0,.15);
}

.artigiani2-kicker{
  color: #93a789;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 10px;
}

.artigiani2-title{
  font-weight: 800;
  font-size: 44px;
  margin: 0;
}

.artigiani2-text{
  font-size: 16.5px;
  line-height: 1.9;
  color: #f1f1f1; /* testo normale più leggibile */
}


.artigiani2-text strong{
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

.artigiani2-text p{
  margin-bottom: 18px;
  color: white;
}


/* Responsive: su mobile pannello sotto, niente overlay strano */
@media (max-width: 991.98px){
  .artigiani2-wrap{
    height: auto;
  }

  .artigiani2-bg{
    position: relative;
    height: 220px;
  }

  .artigiani2-panel{
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-height: none;
    overflow: visible;
    border-radius: 0;
    padding: 26px 20px;
  }

  .artigiani2-title{
    font-size: 34px;
  }
}

@media (max-width: 991.98px){

  .artigiani2-panel{
    background: #4d4f52; /* pieno, non trasparente */
  }

  .artigiani2-text{
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255,255,255,.9); /* più morbido su mobile */
  }

  .artigiani2-text strong{
    font-weight: 700;
    text-shadow: none; /* su mobile meglio pulito */
  }

}

/* HEADER STICKY (topbar + navbar) */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1030;          /* sopra contenuti, sotto offcanvas/modal */
  background: #fff;       /* evita trasparenze durante scroll */
}

/* Mantieni sopra anche la navbar e i dropdown */
#primary-header{
  background: #fff;
}

.site-header .dropdown-menu{
  z-index: 1031;
}

/* Offcanvas deve stare sopra lo sticky */
.offcanvas{
  z-index: 1055;
}


.video-modal-content{
  background: #000;
  border: 0;
}

#modalVideo{
  width: 100%;
  height: auto;
  display: block;
}

.video-modal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 9999;
  filter: invert(1); /* X bianca su sfondo scuro */
  opacity: 1;
}

/* (consigliato) quando clicchi anchor (#sezioni) evita che finiscano sotto header */
html{
  scroll-padding-top: 140px; /* regola se la tua header è più alta/bassa */
}

/* ===============================
   MOBILE – SERRAMENTI SELECT
   =============================== */
.serramenti-mobile-select{
  display: none;
}

@media (max-width: 991.98px){

  /* mostra select */
  .serramenti-mobile-select{
    display: block;
    margin: 10px 0 20px;
  }

  .serramenti-mobile-label{
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    margin-bottom: 8px;
  }

  .serramenti-mobile-control{
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.14);
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    color: #222;
  }

  /* nasconde menu laterale */
  aside.col-lg-3{
    display: none;
  }
}

/* Header fisso e “non tagliato” */
.site-header--fixed{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030; /* sotto offcanvas/backdrop bootstrap, sopra al contenuto */
  background: #fff;
}

/* Evita micro “saltelli” e rende la separazione pulita */
.site-header--fixed .topbar,
.site-header--fixed #primary-header{
  background: #fff;
}

/* Opzionale: una leggera ombra quando si scrolla (solo estetica) */
.site-header--fixed{
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* IMPORTANTISSIMO: non deve esserci overflow che taglia */
html, body{
  overflow-x: hidden;
}


/* Modal Verniciatura - stile tipo "artigiani 4.0" */
.modal-verniciatura{
  background: rgba(60,60,60,0.98);
  border: 0;
  border-radius: 10px;
  overflow: hidden;
}

.modal-close-abs{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}

.verniciatura-modal-grid{
  display: grid;
  grid-template-columns: 38% 62%;
  min-height: 70vh;
}

.verniciatura-modal-side{
  background-size: cover;
  background-position: center;
  min-height: 280px;
}

.verniciatura-modal-text{
  padding: 48px 46px;
  color: #fff;
}

.verniciatura-modal-text p{
  color: rgba(255,255,255,0.92);
  line-height: 1.65;
}

.verniciatura-modal-text strong{
  color: #fff;
  font-weight: 700;
}

.modal-kicker{
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .85;
  margin-bottom: 10px;
}

.modal-title-big{
  font-size: 3rem;
  line-height: 1.05;
  margin: 0 0 18px 0;
}

/* Mobile */
@media (max-width: 991px){
  .verniciatura-modal-grid{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .verniciatura-modal-text{
    padding: 26px 18px;
  }
  .modal-title-big{
    font-size: 2.2rem;
  }
}


/* Variante senza immagine sotto */
.artigiani2-wrap.no-bg {
  display: flex;
  background: #4a4a4a; /* stesso grigio elegante */
}

/* assicura full width */
.artigiani2-wrap.no-bg .artigiani2-panel {
  max-width: 100%;
}


/* ===== Carousel immagini (Serramenti - Alluminio) ===== */
.carousel-img{
  width: 100%;
  height: 520px;         /* regola a gusto */
  object-fit: cover;
}

/* Mobile: meno alto */
@media (max-width: 991.98px){
  .carousel-img{
    height: 320px;
  }
}

/* Frecce più “leggibili” su immagini */
.carousel-control-prev,
.carousel-control-next{
  width: 12%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
}

/* Puntini un filo più visibili */
.carousel-indicators [data-bs-target]{
  width: 10px;
  height: 10px;
  border-radius: 50%;
}


/* ===============================
   CAROUSEL SERRAMENTI - UI & IMMAGINI
   =============================== */

.carousel-serramenti {
  position: relative;
}

/* wrapper con altezza coerente (evita salti tra immagini) */
.carousel-serramenti .carousel-imgwrap{
  width: 100%;
  height: 520px;              /* desktop: regola se vuoi più alto/basso */
  background: #f3f3f3;        /* fondo neutro per "contain" */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* immagine NON zoomata, sempre visibile per intero */
.carousel-serramenti .carousel-img{
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* chiave: niente crop */
  object-position: center;
  display: block;
}

/* Mobile: altezza più bassa */
@media (max-width: 991.98px){
  .carousel-serramenti .carousel-imgwrap{
    height: 320px;
  }
}

/* INDICATORI: più visibili + contorno scuro */
.carousel-serramenti .carousel-indicators{
  margin-bottom: 0.9rem; /* un filo più su */
}

.carousel-serramenti .carousel-indicators [data-bs-target]{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  opacity: 1;
  background-color: rgba(255,255,255,0.92);
  border: 2px solid rgba(0,0,0,0.55);   /* contorno per immagini chiare */
  margin: 0 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.carousel-serramenti .carousel-indicators .active{
  background-color: #93a789;             /* tuo verde */
  border-color: rgba(0,0,0,0.55);
  transform: scale(1.08);
}

/* FRECCE: più leggibili su qualsiasi immagine */
.carousel-serramenti .carousel-control-prev,
.carousel-serramenti .carousel-control-next{
  width: 12%;
}

.carousel-serramenti .carousel-control-prev-icon,
.carousel-serramenti .carousel-control-next-icon{
  filter: none; /* disattiva eventuali filtri del tema */
  background-size: 100% 100%;
}

.carousel-serramenti .carousel-control-prev-icon,
.carousel-serramenti .carousel-control-next-icon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background-color: rgba(0,0,0,0.55);   /* “pill” scura dietro l’icona */
  background-blend-mode: normal;
}

/* Migliora accessibilità al click */
.carousel-serramenti .carousel-control-prev-icon::after,
.carousel-serramenti .carousel-control-next-icon::after{
  content: "";
}


.content-title,
.content-subtitle {
  text-transform: none;
}

.logo-certificazione {
    max-width: 75px;
    margin-top: 20px;
}


/* ============================
   PRIVACY POLICY (stile tipo vecchio sito)
   ============================ */
.privacy-page h1,
.privacy-page h2,
.privacy-page h3,
.privacy-page h4,
.privacy-page h5,
.privacy-page h6{
  text-transform: none; /* disattiva capitalize globale */
}

.privacy-policy-content h1{
  font-size: clamp(26px, 2.4vw, 40px);
  font-weight: 800;
  margin-bottom: 14px;
}

.privacy-policy-content .one_line_col{
  margin-top: 26px;
}

.privacy-policy-content p{
  line-height: 1.85;
}

.privacy-policy-content a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-policy-content .for_boxes{
  list-style: none;
  padding-left: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 14px;
}

.privacy-policy-content details.box_primary{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.privacy-policy-content details.box_primary > summary{
  cursor: pointer;
  padding: 16px 18px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.03);
}

.privacy-policy-content details.box_primary > summary::-webkit-details-marker{
  display: none;
}

.privacy-policy-content details.box_primary > summary h3{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.privacy-policy-content details.box_primary[open] > summary{
  background: rgba(0,0,0,.05);
}

.privacy-policy-content .details_body{
  padding: 16px 18px 18px;
}

.privacy-policy-content .details_body h4{
  font-size: 16px;
  font-weight: 800;
  margin-top: 14px;
}

.privacy-policy-content .details_body .wrap{
  margin-top: 8px;
}

.privacy-policy-content .iub_footer{
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.10);
  color: rgba(0,0,0,.55);
  font-size: 14px;
}


/* ============================
   COOKIE POLICY
   ============================ */
.cookie-page h1,
.cookie-page h2,
.cookie-page h3,
.cookie-page h4,
.cookie-page h5,
.cookie-page h6{
  text-transform: none; /* disattiva capitalize globale */
}

.cookie-policy-content{
  /* stessa logica della privacy */
}

.cookie-policy-content .for_boxes{
  list-style: none;
  padding-left: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 14px;
}

.cookie-policy-content details.box_primary{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.cookie-policy-content details.box_primary > summary{
  cursor: pointer;
  padding: 16px 18px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.03);
}

.cookie-policy-content details.box_primary > summary::-webkit-details-marker{
  display: none;
}

.cookie-policy-content details.box_primary > summary h3{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.cookie-policy-content details.box_primary[open] > summary{
  background: rgba(0,0,0,.05);
}

.cookie-policy-content .details_body{
  padding: 16px 18px 18px;
}

.cookie-policy-content .iub_footer{
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.10);
  color: rgba(0,0,0,.55);
  font-size: 14px;
}


.bonus-table { background: #fff; }
        .bonus-table-title{
          background: #f2f2f2;
          font-weight: 800;
          letter-spacing: .3px;
          text-transform: uppercase;
          font-size: 13px;
        }
        .bonus-table thead th{
          background: #f7f7f7;
          font-weight: 700;
        }
        .bonus-table td, .bonus-table th{
          border-color: rgba(0,0,0,.15) !important;
          vertical-align: middle;
        }



          .serramenti-compare-wrap{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
  }

  .serramenti-compare-table{
    margin: 0;
    --tbl-border: rgba(0,0,0,.08);
  }

  .serramenti-compare-table thead th{
    background: #333333;
    color: #ffffff;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 14px 14px;
    font-size: 14px;
    letter-spacing: .2px;
    white-space: nowrap;
  }

  .serramenti-compare-table .metric-col{
    min-width: 220px;
  }

  .serramenti-compare-table tbody th{
    font-weight: 700;
    color: #1d1d1d;
    background: #fafafa;
    border-right: 1px solid var(--tbl-border);
    padding: 14px 14px;
    white-space: nowrap;
  }

  .serramenti-compare-table td{
    padding: 14px 14px;
    border-bottom: 1px solid var(--tbl-border);
    white-space: nowrap;
  }

  .serramenti-compare-table tbody tr:nth-child(even) td{
    background: #fcfcfc;
  }

  /* Dots rendering */
  .dots{
    display: inline-flex;
    gap: 6px;
    align-items: center;
    line-height: 1;
    font-size: 14px;
  }
  .dots::before{
    content: "● ● ● ● ●";
    letter-spacing: 2px;
    color: rgba(147,167,137,.22); /* vuoti */
  }

  /* sovrappongo i pieni in verde, “tagliandoli” in base al punteggio */
  .dots::after{
    content: "● ● ● ● ●";
    letter-spacing: 2px;
    color: #93a789; /* pieni */
    position: absolute;
    transform: translateX(0);
    white-space: nowrap;
  }

  .dots{
    position: relative;
  }

  /* Maschera in base a data-score (1..5) */
  .dots[data-score="0"]::after{ width: 0%; overflow: hidden; }
  .dots[data-score="1"]::after{ width: 20%; overflow: hidden; }
  .dots[data-score="2"]::after{ width: 40%; overflow: hidden; }
  .dots[data-score="3"]::after{ width: 60%; overflow: hidden; }
  .dots[data-score="4"]::after{ width: 80%; overflow: hidden; }
  .dots[data-score="5"]::after{ width: 100%; overflow: hidden; }

  /* Mobile: rende più leggibile */
  @media (max-width: 576px){
    .serramenti-compare-table thead th{
      font-size: 13px;
      padding: 12px;
    }
    .serramenti-compare-table tbody th,
    .serramenti-compare-table td{
      padding: 12px;
    }
    .dots{
      font-size: 13px;
      gap: 5px;
    }
  }

  .compare-logo{
    height: 70px;
    width: auto;
    display: block;
    opacity: .95;
    margin-bottom: 80px;
  }

  .serramenti-compare-wrap{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
  }

  .serramenti-compare-table{
    --tbl-border: rgba(0,0,0,.08);
  }

  .serramenti-compare-table thead th{
    background: #333333;
    color: #ffffff;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 14px 12px;
    font-size: 13px;
    letter-spacing: .2px;
    vertical-align: bottom;
  }

  .serramenti-compare-table .metric-col{
    min-width: 220px;
  }

  .serramenti-compare-table .type-col{
    min-width: 170px;
  }

  .type-head{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
  }

  .type-img{
    width: 100%;
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
  }

  /* IMPORTANT: niente zoom, si vede per intero */
  .type-img img{
    width: 100%;
    height: 100%;
    object-fit: contain; /* NON cover */
    background: #2f2f2f; /* evita “buchi” bianchi sul contain */
  }

  .type-name{
    font-weight: 800;
    font-size: 12.5px;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
  }

  .serramenti-compare-table tbody th{
    font-weight: 800;
    color: #1d1d1d;
    background: #fafafa;
    border-right: 1px solid var(--tbl-border);
    padding: 14px 14px;
    white-space: nowrap;
  }

  .serramenti-compare-table td{
    padding: 14px 14px;
    border-bottom: 1px solid var(--tbl-border);
    white-space: nowrap;
    text-align: center;
  }

  .serramenti-compare-table tbody tr:nth-child(even) td{
    background: #fcfcfc;
  }

  /* Dots */
  .dots{
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: 14px;
    letter-spacing: 2px;
  }
  .dots::before{
    content: "● ● ● ● ●";
    color: rgba(147,167,137,.22);
  }
  .dots::after{
    content: "● ● ● ● ●";
    color: #93a789;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .dots[data-score="0"]::after{ width: 0%; }
  .dots[data-score="1"]::after{ width: 20%; }
  .dots[data-score="2"]::after{ width: 40%; }
  .dots[data-score="3"]::after{ width: 60%; }
  .dots[data-score="4"]::after{ width: 80%; }
  .dots[data-score="5"]::after{ width: 100%; }

  /* ===============================
     RESPONSIVE REALE: su mobile diventa "cards"
     =============================== */
  @media (max-width: 991.98px){
    .serramenti-compare-wrap{
      overflow: visible; /* serve per cards layout */
      border-radius: 0;
      border: 0;
      box-shadow: none;
      background: transparent;
    }

    .serramenti-compare-table{
      border-collapse: separate;
      border-spacing: 0 12px;
    }

    /* nascondo header tabella e trasformo righe in card */
    .serramenti-compare-table thead{
      display: none;
    }

    .serramenti-compare-table,
    .serramenti-compare-table tbody,
    .serramenti-compare-table tr,
    .serramenti-compare-table td,
    .serramenti-compare-table th{
      display: block;
      width: 100%;
    }

    .serramenti-compare-table tr{
      background: #fff;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 24px rgba(0,0,0,.04);
    }

    .serramenti-compare-table tbody th{
      background: #333333;
      color: #fff;
      border-right: 0;
      padding: 14px 16px;
      white-space: normal;
    }

    .serramenti-compare-table td{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 16px;
      white-space: normal;
      text-align: left;
      border-bottom: 1px solid rgba(0,0,0,.06);
      background: #fff;
    }

    .serramenti-compare-table td:last-child{
      border-bottom: 0;
    }

    /* Etichette “colonna” ricostruite */
    .serramenti-compare-table td::before{
      content: attr(data-label);
      font-weight: 800;
      color: #1d1d1d;
      font-size: 13px;
      line-height: 1.2;
      flex: 1 1 auto;
      padding-right: 8px;
    }

    .dots{
      flex: 0 0 auto;
      font-size: 14px;
    }
  }


.videoblock {
  width: 100%;
  max-width: 420px;        /* perfetto per colonna sinistra */
  margin: 0 auto;
}

.videoblock video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;   /* forza verticale */
  object-fit: cover;
  background-color: #000;
}

/* VIDEO VERTICALE - BLOCCO "CHI SIAMO" */
.videoblock{
  width: 100%;
}

/* cornice: mantiene ratio verticale e non “collassa” */
.video-frame{
  position: relative;
  width: 100%;
  max-width: 420px;            /* contenuto elegante, non enorme */
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

/* video: NON zoomato a caso, ma riempie bene la cornice */
.video-el{
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;        /* verticale */
  object-fit: cover;           /* riempie senza deformare */
  display: block;
}

/* controlli */
.video-controls{
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 10px;
  z-index: 5;
}

.video-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.video-btn:hover{
  transform: scale(1.06);
  background: rgba(0,0,0,.68);
  border-color: rgba(147,167,137,.75); /* richiama il verde del tema */
}

.video-btn i{
  font-size: 22px;
  line-height: 1;
}

/* Desktop: video a sinistra e testo a destra (già garantito da col-lg-5/7)
   Aggiungo solo un “fine-tuning” per allineare bene l’altezza */
@media (min-width: 992px){
  #chi-siamo .row{
    align-items: center;
  }
}


/* ===============================
   CONTROLLI VIDEO – SEEK BAR
   =============================== */

.video-controls{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* riga pulsanti */
.video-controls-top{
  display: flex;
  gap: 10px;
}

/* barra avanzamento */
.video-progress-wrap{
  width: 100%;
}

.video-progress{
  width: 100%;
  height: 6px;
  appearance: none;
  background: rgba(255,255,255,.35);
  border-radius: 999px;
  cursor: pointer;
}

/* track */
.video-progress::-webkit-slider-runnable-track{
  height: 6px;
  background: rgba(255,255,255,.35);
  border-radius: 999px;
}

/* thumb */
.video-progress::-webkit-slider-thumb{
  appearance: none;
  width: 14px;
  height: 14px;
  background: #93a789; /* verde tema */
  border-radius: 50%;
  margin-top: -4px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}

.video-progress::-moz-range-thumb{
  width: 14px;
  height: 14px;
  background: #93a789;
  border-radius: 50%;
  border: none;
}

/* hover più visibile */
.video-progress:hover{
  background: rgba(255,255,255,.55);
}


/* quando la card va in fullscreen */
.video-frame:fullscreen{
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

.video-frame:fullscreen .azienda-video{
  width: 100%;
  height: 100%;
  object-fit: contain; /* in fullscreen meglio vedere tutto */
  background: #000;
}


/* =========================
   VIDEO (verticale) + CONTROLLI
   ========================= */

.video-frame{
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 14px 44px rgba(0,0,0,.12);
}

/* rapporto verticale “telefono” */
.video-frame::before{
  content:"";
  display:block;
  padding-top: 177.77%; /* 9:16 */
}

.azienda-video{
  position:absolute;
  inset:0;
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover; /* in pagina: riempie bene */
  background:#000;
}

/* scrim leggero per leggibilità controlli */
.video-controls-scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0;
  transition: opacity .18s ease;
  background:
    linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 28%);
  z-index: 2;
}

.video-frame.controls-visible .video-controls-scrim{
  opacity: 1;
}

/* CONTROLLI TOP: 3 colonne */
.video-controls-top{
  position:absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 5;

  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items:center;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.video-controls-top .ctrl-col{
  display:flex;
  align-items:center;
  gap: 10px;
}

.video-controls-top .ctrl-col.left{ justify-content:flex-start; }
.video-controls-top .ctrl-col.center{ justify-content:center; }
.video-controls-top .ctrl-col.right{ justify-content:flex-end; }

/* BOTTOM: seek + tempi */
.video-controls-bottom{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 5;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.video-frame.controls-visible .video-controls-top,
.video-frame.controls-visible .video-controls-bottom{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Pulsanti */
.video-btn{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.48);

  background: rgba(0,0,0,.72);
  backdrop-filter: blur(7px);

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

  color:#fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.video-btn:hover{
  transform: scale(1.06);
  background: rgba(0,0,0,.86);
  border-color: rgba(255,255,255,.78);
}

.video-btn i{ font-size: 20px; line-height: 1; }

/* Seek bar stile leggibile */
.progress-wrap{
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: blur(7px);
}

.video-seek{
  width: 100%;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.32);
  outline: none;
  margin: 0;
}

.video-seek::-webkit-slider-thumb{
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid rgba(147,167,137,1); /* richiama il verde tema */
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

.video-seek::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid rgba(147,167,137,1);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

.time-row{
  display:flex;
  justify-content: space-between;
  margin-top: 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}

.time{
  display:inline-block;
}

/* FULLSCREEN: video intero (NO zoom/crop) */
.video-frame:fullscreen .azienda-video,
.video-frame:-webkit-full-screen .azienda-video{
  object-fit: contain !important;
  background:#000;
}

/* In fullscreen disattivo il rapporto fisso */
.video-frame:fullscreen::before,
.video-frame:-webkit-full-screen::before{
  display:none !important;
}

/* Responsive: su mobile metti video sopra e testo sotto */
@media (max-width: 991.98px){
  .video-frame{
    max-width: 520px;
    margin: 0 auto;
  }
}

/* =========================================
   REALIZZAZIONI – GRID
========================================= */

.rz-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px){
  .rz-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px){
  .rz-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .rz-grid{ grid-template-columns: 1fr; }
}

.rz-item{
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  outline: none;
}

.rz-item:focus-visible{
  outline: 3px solid rgba(147,167,137,.45);
  outline-offset: 3px;
}

.rz-thumb{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
  background: #f2f2f2;
}

@media (max-width: 767.98px){
  .rz-thumb{ height: 210px; }
}

.rz-item:hover .rz-thumb{
  transform: scale(1.03);
}

/* =========================================
   LIGHTBOX
========================================= */

.rz-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.rz-lightbox.is-open{
  display: block;
}

.rz-lb-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(2px);
}

/* pannello centrato */
.rz-lb-panel{
  position: absolute;
  inset: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* bottoni e img riabilitati sotto */
}

@media (max-width: 767.98px){
  .rz-lb-panel{ inset: 14px; }
}

/* figura */
.rz-lb-figure{
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
  pointer-events: none;
}

/* IMPORTANTISSIMO: niente zoom/crop, sempre intera */
.rz-lb-img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: auto;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  margin: auto; /* centra anche verticali */
}

.rz-lb-cap{
  text-align: center;
  color: rgba(255,255,255,.85);
  font-size: 14px;
  pointer-events: none;
  min-height: 18px;
}

/* Bottoni */
.rz-lb-btn{
  position: absolute;
  pointer-events: auto;
  border: 0;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  user-select: none;
}

.rz-lb-btn:hover{
  background: rgba(147,167,137,.85);
}

.rz-lb-btn:focus-visible{
  outline: 3px solid rgba(255,255,255,.45);
  outline-offset: 3px;
}

/* close */
.rz-lb-close{
  top: 14px;
  right: 14px;
  font-size: 20px;
}

/* frecce */
.rz-lb-prev{
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
}

.rz-lb-next{
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

/* Scroll lock */
html.rz-scroll-lock,
body.rz-scroll-lock{
  overflow: hidden !important;
}


/* ===== LIGHTBOX FIX: niente zoom su verticali ===== */

.rz-lb-panel{
  position: absolute;
  inset: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

@media (max-width: 767.98px){
  .rz-lb-panel{ inset: 14px; }
}

/* NON deve essere alta 100%: deve adattarsi al contenuto */
.rz-lb-figure{
  margin: 0;
  width: 100%;
  max-width: min(1100px, 100%);
  pointer-events: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Immagine: sempre intera, mai crop, mai “riempimento” */
.rz-lb-img{
  display: block;
  pointer-events: auto;

  width: auto !important;
  height: auto !important;

  max-width: 100%;
  max-height: calc(100vh - 160px); /* spazio per paddings + bottoni + caption */
  object-fit: contain !important;

  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

/* caption sotto */
.rz-lb-cap{
  text-align: center;
  color: rgba(255,255,255,.85);
  font-size: 14px;
  pointer-events: none;
  min-height: 18px;
}



/* =========================
   ANCHOR FIX (menu fisso)
   ========================= */

:root{
  --header-offset: 140px; /* fallback: viene aggiornato dal JS */
  --anchor-fine: 10px;    /* micro-correzione: riduce lo “scende troppo” */
}

/* quando il browser fa scroll verso un #hash */
html{
  scroll-padding-top: calc(var(--header-offset) - var(--anchor-fine));
}

/* qualunque target raggiunto da #id (senza elencare sezioni) */
main [id],
.page-section [id],
.content-area [id]{
  scroll-margin-top: calc(var(--header-offset) - var(--anchor-fine));
}


/* reCAPTCHA responsive */
.g-recaptcha{
  max-width: 100%;
  overflow: hidden;
}
@media (max-width: 420px){
  .g-recaptcha{
    transform: scale(0.92);
    transform-origin: 0 0;
  }
}

.gt_float_switcher .gt-selected .gt-current-lang {
    padding: 2px 2px !important;
    font-size: 15px !important;
}

.gt_options a {
    padding: 3px 3px !important;
    font-size: 13px !important;
}