/*
Theme Name: 	Nextawards Child Theme
Description: 	Responsive Starter WordPress Theme (WooCommerce Ready) with: Minimal Style, 4 Header Style, 2 Menus, 11 Amazing Block Patterns, Trasparent Header Template, WhatsApp Chat, Cool animations, Light and fast, Full Site Editing Template! Inspired by Awards Winning Web Sites. Correct setup and installation in theme folder readme file ;)
Version:     	1.5.6
Author:     	Andrea Marchetti
Site:         http://www.marchettidesign.net
Text Domain: 	nextawards
Tested up to: 6.1
Requires PHP: 5.6
Domain Path: 	/languages
Template:   nextawards
Tags:        	blog, custom-colors, custom-logo, custom-menu, e-commerce, theme-options, translation-ready, block-editor-patterns, block-editor-styles, custom-background, featured-images, footer-widgets, photography, portfolio, wide-blocks, full-site-editing
License:    	GNU General Public License v3.0
License URI:	http://www.gnu.org/licenses/gpl-3.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/





/* ! Reset */
:where(.wp-block-group.has-background) {
  padding: 0!important;
}


body, html {
  font-size: 16px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}


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

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  margin: 0;
  padding: 0;
}

p, ol, ul, li {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  margin: 0 0 1rem;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
}

ol, ul {
  padding-left: 20px;
}

img {
  height: auto;
  max-width: 100%;
}

a {
  text-decoration: none;
}

hr {
  border: none;
  border-bottom: 1px solid #000
}

strong {
  font-weight: bold
}

html body {
  overflow-x: hidden;
}

body.admin-bar .header {
  position: fixed;
  top: 32px;
  z-index: 1000;
}

.whatsapp-btn {
  width: 60px;
  height: 60px;
  display: inline-block;
  background-image: url('path/to/whatsapp-icon.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%; /* se vuoi forma circolare */
}


.privacy-check .first {margin:0!important}

/* ------------------------------------------------------------------------- *
/* 1 Base */
/* ------------------------------------------------------------------------- */

:root {
  --site-bg: #f8f6f2;
  --site-text-color: #494949;
  --link-color: #048ea0;
  --link-color-hover: #105862;
  --carta-alpha: 0.6;
  --carta-alpha2: 0.3;
}

/* Typography */
body {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  background-color: var(--site-bg);
  color: var(--site-text-color);
  font-family: 'Lato';
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body.custom-background.dark {
  background-color: var(--site-bg);
}

body.menu-open {
  overflow: hidden;
}

/*block scrolling when menu is open*/

/* ! Title System */
h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin-bottom: 1rem;
  line-height: 130%
}

h1, h2 {
  line-height: 110%;
}

p, ul, li {
  font-size: 1.05rem;
}

@media (max-width: 768px) {
  p, ul, li {
    font-size: 0.95rem;
  }
}





/* Typography helpers */
.text-0 {
  font-size: 5rem;
  line-height: 100%;
}

.text-1 {
  font-size: 3.4rem;
}

.text-2 {
  font-size: 2.2rem;
}

.text-3 {
  font-size: 1.5rem;
}

.text-4 {
  font-size: 1.3rem;
}

@media (max-width: 768px) {
  .text-0 {
    font-size: 3rem;
  }

  h1, .text-1 {
    font-size: 1.6rem;
  }

  h2, .text-2 {
    font-size: 1.4rem;
  }

  h3, .text-3 {
    font-size: 1.1rem;
  }

  h4, .text-4 {
    font-size: 0.9rem;
  }

  h5, p, .text-5, ul, li {
    font-size: 0.9rem;
  }

  h6 {
    font-size: 0.8rem;
  }
}

.evi a {
  color: #fff !important;
  background-color: var(--link-color);
  border-radius: 100px;
  padding-left: 20px !important;
  padding-right: 20px !important;
}



/* Link color */
a {
  color: var(--link-color);
}

a:focus, a:hover {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* Button Link */
.wp-block-button__link {
  text-decoration: none !important;
  color: #fff
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  text-decoration: none !important;
  color: #fff
}


/* ------------------------------------------------------------------------- *
/* 2 Layout */
/* ------------------------------------------------------------------------- */

.wrapper {
  width: 100%;
  padding: 0 !important;
  /* overflow: hidden; */
  position: relative;
}


body .alignfull {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* ------------------------------------------------------------------------- *
/* 2.1 Menu */
/* ------------------------------------------------------------------------- */

.spacer {
  height: 140px;
}

.header__topbar {
  background-color: #333;
  width: 100%;
  padding: 10px 4px;
  color: #fff;
  text-align: center;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  width: auto;
}

@media (max-width: 794px) {
  .header__topbar {
    font-size: 13px;
  }

  .spacer {
    height: 110px;
  }

  .header {
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    padding: 0px 4%;
  }


.header__quick .btn-fill {
    
    padding: 8px 20px;
    font-size: 0.6rem;
    color: #F7F6F2E3;
}

.header__quick .btn-fill a {
    color: #F7F6F2E3 !important;
}



}



.header {
  background-color: var(--site-bg);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  padding: 0px 4%;
  transition: transform 0.5s ease, opacity 0.5s ease;
}


.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.header__content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #222;
  position: relative;
}

.header__logo,
.header__quick {
  display: flex;
  align-items: center;
  color: var(--site-text-color);
  font-weight: bold;
}

.header__quick li {margin:0!important}

.header__quick a {
  color: #F7F6F2E3!important;
}

.header__logo-img,
.header__logo_white-img {
  width: 120px;
  height: auto;
  transition: all 0.6s cubic-bezier(.215, .61, .355, 1)
}

.header__quick ul {
  list-style-type: none;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  gap:20px;
  align-items: center;
}

.header__quick ul li {
  display: inline-block;
}

.header__quick ul li a {
  padding: 10px 5px;
}

.menu,
.menu ul {
  margin: 0;
  position: relative;
}

.menu li {
  display: inline-block;
  position: relative;
  margin: 0;
}

.menu li a {
  color: var(--site-text-color);
  text-transform: uppercase;
  opacity: 1;
  display: inline-block;
  position: relative;
  padding: 10px;
  font-size: 18px;
  font-weight: 400;
  transition: color 0.3s ease;
}

.menu li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 70%;
  width: 0;
  height: 0;
  background-color: #0d438c;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 0;
  z-index: -1;
}

.menu li a:hover::before {
  width: 2.2em;
  height: 2.2em;
  opacity: 0.4;
  transform: translate(-45%, -45%) scale(1);
}





.icon-hamburger {
  display: none;
}

/* hide classes (used on the logos) */
@media (min-width: 1190px) {
  .hide-desktop {
    display: none;
  }
}

@media (max-width: 1190px) {
  .hide-mobile {
    display: none;
  }
}

.hide-all {
  display: none;
}

/* Quick search */

.quick-search {
  width: 140px;
  height: 38px;
  background: #fff;
  border-radius: 30px;
  opacity: 0.8;
  margin: 2px 0 0 0;
  transition: all 0.3s cubic-bezier(.215, .61, .355, 1);
}

.quick-search form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.quick-search__icon {
  border: none;
  background: none;
  padding: 0;
  padding: 13px 2px
}

input.quick-search__input[type=search] {
  padding: 10px 3px;
  font-size: 13px;
  margin: 0;
  border: none;
  background: none
}

/* input.quick-search__input[type=search]:focus{ outline: none;} */
.quick-search:hover {
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width: 1290px) {
  .quick-search {
    width: 40px;
    position: relative;
    background-color: transparent;
    margin-right: 10px;
  }

  .quick-search form {
    width: 38px;
    height: 38px;
    position: absolute;
    right: 0;
    top: 0;
    background: #fff;
    border-radius: 40px;
    transition: all 1s cubic-bezier(.215, .61, .355, 1);
  }

  .quick-search:hover form {
    width: 138px;
  }
}


@media (max-width: 768px) {
    .header__logo-img,
  .header__logo_white-img {
    width: 60px !important;
    height: auto;
  }
}

@media (max-width: 1190px) {

  .header__logo-img,
  .header__logo_white-img {
    width: 100px;
    height: auto;
  }

  .menu {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: var(--site-bg);
    min-width: 100%;
    height: 100vh;
    margin: 0 -5% 0 -5%;
    overflow: auto;
    transition: all 1s cubic-bezier(.215, .61, .355, 1);
    padding-left: 0;
    transform: translateX(-100%);
  }

  .menu li {
    width: 90%;
    margin: 0 5%;
    border-bottom: 1px solid #0D438C
  }

  .menu-open .menu {
    transform: translateX(0%);
  }

  .menu-open .menu>li:last-child {
    margin-bottom: 150px;
    position: relative;
  }

  .icon-hamburger {
    height: 50px;
    width: 50px;
    margin-left: 20px;
    position: absolute;
    top: 10px;
    right: -15px;
    display: block;
    border: none;
    background: transparent;
    z-index: 9999;
  }

  .icon-hamburger strong {
    height: 1px;
    margin-top: -1px;
    overflow: hidden;
    width: 1px;
    display: block;
    margin: 0;
    padding: 0;
  }

  .icon-hamburger span {
    height: 2px;
    width: 30px;
    background: var(--site-text-color);
    position: relative;
    display: block;
    margin-bottom: 11px;
    transition: all 0.2s cubic-bezier(.215, .61, .355, 1);
  }

  .menu-open .icon-hamburger span:nth-child(2) {
    transform: rotate(45deg) translateY(9px);
  }

  .menu-open .icon-hamburger span:nth-child(3) {
    transform: rotate(-45deg) translateY(-9px);
  }

  .header__content {
    padding-right: 50px;
    height: 60px;
  }

  .header__quick {
    display: flex;
    justify-content: flex-end;
  }

  .header__quick ul {
    padding-left: 0;
  }

}

@media (max-width: 400px) {
  .header__quick .menu-item-type-custom {
    display:block !important;
  }

  .header__quick button {
    pointer-events: none;
  }
}

/* Menu transparent */
@media (min-width: 1190px) {
  .page-template-menu-trasparent .spacer {
    display: none;
  }
  
  quick-whatsapp a 

  .page-template-menu-trasparent .header {
    background: transparent;
    transition: all 1s cubic-bezier(.215, .61, .355, 1);
  }

  .page-template-menu-trasparent .header__content {
    border: none
  }

  .scroll-down .header__logo-img {
    width: 100px;
  }
 
   .page-template-menu-trasparent .header__logo-img,
  .page-template-menu-trasparent .header [class^='icon-'] {
    filter: none;
  }

  /*.page-template-menu-trasparent .header__logo{color:#fff}*/

  .page-template-menu-trasparent .menu li a,
  .page-template-menu-trasparent .header__quick ul li a {
    color: #fff
  }

  .page-template-menu-trasparent.scroll-down .header {
    background: linear-gradient(135deg, rgba(46, 46, 46, 0.45), rgba(70, 70, 70, 0.45));
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    background-color: transparent !important;
  }
}

@media (max-width: 1190px) {
  .page-template-menu-trasparent .spacer {
    height: 44px
  }

  .page-template-menu-trasparent .header__content {
    border: none
  }
}

/* Menu black, Blank e Contained Templates */
@media (min-width: 1190px) {
  .page-template-menu-black .spacer {
    display: none;
  }

  .page-template-menu-black .header {
    background: transparent;
    transition: all 1s cubic-bezier(.215, .61, .355, 1);
  }

  .page-template-menu-black .header__content {
    border: none
  }

  .page-template-menu-black.scroll-down .header {
    background-color: var(--site-bg)
  }
}

.page-template-blank .spacer,
.page-template-contained-no-title .spacer {
  height: 75px
}

@media (max-width: 1190px) {

  .page-template-menu-black .spacer,
  .page-template-blank .spacer,
  .page-template-contained-no-title .spacer {
    height: 60px
  }

  .page-template-menu-black .header__content {
    border: none
  }
}



/* Menu Dropdown */
.menu>li>ul {
  background: #eee;
  opacity: 0;
  display: none;
  min-width: 220px;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 0px;
  left: 0;
  padding: 10px;
  border-radius: 10px;
}

.menu li ul>li>a,
.page-template-menu-trasparent .menu li ul>li>a {
  color: #494949;
  border-radius: 7px;
}

.menu li ul>li>a:hover {
  background: #ccc;
  color: #0d438c;
}

/* Mega Menu */
.menu>li.mega-menu>.sub-menu a {
  padding: 12px;
}

.menu>li.mega-menu>.sub-menu .sub-menu {
  padding-left: 0;
  width: 180px;
}

.menu>li.mega-menu>.sub-menu .sub-menu li a {
  padding-top: 7px;
  padding-bottom: 8px;
  font-weight: normal;
  font-size: 14px;
}


/* Open Menus */
@media (min-width: 1190px) {

  .menu>li:hover>ul,
  .menu>li>ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
  }

  .menu>li.mega-menu:hover>ul,
  .menu>li.mega-menu>ul:hover,
  .menu>li.mega-menu:focus-within>ul {
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-wrap: wrap;
    width: 600px;
  }

  .menu>li.mega-menu>ul>li {
    width: 193px;
  }

}

.menu li.open-dropdown>ul {
  visibility: visible;
  opacity: 1;
  display: block;
}

.menu li.mega-menu.open-dropdown>ul {
  visibility: visible;
  opacity: 1;
  display: block;
}

/* open dropdown with focus tab*/
.menu li:focus-within ul {
  visibility: visible;
  opacity: 1;
  display: block;
}

.menu li ul li {
  clear: both;
  width: 100%;
}

.menu>li.menu-item-has-children>a {
  position: relative;
  padding-right: 30px;
}

.menu>li.menu-item-has-children>a::after {
  content: " ";
  width: 30px;
  height: 30px;
  background-size: 30px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: rotate(90deg);
  margin-top: -15px;
  background-size: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"/></svg>');
}

@media (min-width: 1190px) {
  .page-template-menu-trasparent .menu>li.menu-item-has-children>a::after {
    background-image: url('data:image/svg+xml;utf8,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"/></svg>');
    filter: invert(1);
  }
}


@media (max-width: 1190px) {

  .menu li ul {
    position: relative;
    background: none;
  }

  .menu li ul li {
    border: none;
    width: 95%;
  }

  /* .menu li ul li a{padding-left: 30px;} */
  .menu>li.mega-menu>.sub-menu {
    margin-left: 5vw;
  }

  .menu>li.mega-menu>.sub-menu li {
    margin: 0;
  }

  .menu>li.mega-menu>.sub-menu>li {
    width: 40vw;
    margin-bottom: 20px;
  }
}

/* ------------------------------------------------------------------------- *
/* 2.2 Home */
/* ------------------------------------------------------------------------- */

.home-title {
  position: absolute;
  top: -9999px;
  color: #fff;
  font-size: 12px;
}


/* ------------------------------------------------------------------------- *
/* 2.3 Index */
/* ------------------------------------------------------------------------- */

.img-16-9 {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Single, Post & Page */
@media (max-width: 768px) {
  h1 span {
    display: block;
  }
}


/* ------------------------------------------------------------------------- *
/*  Helpers  */
/* ------------------------------------------------------------------------- */

@media(max-width:768px)
{.sma-none {display:none}
    
}

.btn-fill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #f8f6f2;
  background: #0D438C;
  border-radius: 100px;
  overflow: hidden;
  z-index: 1;

  /* Animazioni principali */
  transition: 
    color 0.3s ease,
    transform 0.28s ease,
    box-shadow 0.35s ease;
}

/* Layer di riempimento */
.btn-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: #061387; /* blu hover più acceso */
  z-index: -1;
  transition: width 0.35s ease;
}



/* HOVER EFFECT */
.btn-fill:hover {
  color:  #f8f6f2; /* testo resta chiaro sul blu acceso */
  transform: translateY(-3px); 
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.52); 
}

/* Riempimento orizzontale */
.btn-fill:hover::before {
  width: 100%;
}




.btn-fill-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #f8f6f2;
  background: #0D438C;
  border-radius: 100px;
  overflow: hidden;
  z-index: 1;

  /* Animazioni principali */
  transition: 
    color 0.3s ease,
    transform 0.28s ease,
    box-shadow 0.35s ease;
}

/* Layer di riempimento */
.btn-fill-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: #061387; /* blu hover più acceso */
  z-index: -1;
  transition: width 0.35s ease;
}

/* Icona */
.btn-fill-icon .btn-icon {
  width: 20px;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: brightness(100%);
}

/* HOVER EFFECT */
.btn-fill-icon:hover {
  color:  #f8f6f2; /* testo resta chiaro sul blu acceso */
  transform: translateY(-3px); 
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.52); 
}

/* Riempimento orizzontale */
.btn-fill-icon:hover::before {
  width: 100%;
}

/* Icona ingrandita */
.btn-fill-icon:hover .btn-icon {
  transform: scale(1.2);
  filter: brightness(140%); /* più luminosa sul blu */
}




/* Manage consent tab */
.quick-whatsapp a { 
     width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
  
 	background-image: url("https://birralab24.com/wp-content/uploads/2025/12/whatsapp-brands-solid-full-2.svg") !important; /*  use your .svg path*/
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size:100%!important;
    display: block !important;
    padding: 0 !important;
    min-width: unset !important;
    color: transparent !important; /* hiding . text */
    
  /* Animazioni principali */
  transition: 
    color 0.3s ease,
    transform 0.28s ease,
    box-shadow 0.35s ease;
}

/* Hide the dot (text inside the button) */
.quick-whatsapp a::before {
    content: "" !important;
}


/* HOVER EFFECT */
.quick-whatsapp a:hover {
  color:  #f8f6f2; /* testo resta chiaro sul blu acceso */
  transform: translateY(-3px); 
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.52); 
}

@media (max-width: 1190px) { 

/* Manage consent tab */
.quick-whatsapp a { 
     width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
   /* change color */background-color: transparent!important;
 	background-image: url("https://birralab24.com/wp-content/uploads/2025/12/whatsapp-brands-solid-full-1.svg") !important; /*  use your .svg path*/
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size:100%!important;
    display: block !important;
    padding: 0 !important;
    min-width: unset !important;
    color: transparent !important; /* hiding . text */
}
 }



.j-center, .al-center {
  display: flex;
}

.al-center {
  align-items: center
}

.j-center {
  justify-content: center
}





.relative {
  position: relative;
}

.bg-overlay {
  display: block;
  background: rgb(255, 255, 255);
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5176120448179272) 45%, rgba(0, 0, 0, 0.6941106442577031) 60%);
  ;

}

figure .img-round {
  border-radius: 20px;
}

.img-round {
  border-radius: 20px;
}



.mt-0 {
  margin-top: 0
}

.mt-1 {
  margin-top: 10px
}

.mt-2 {
  margin-top: 20px
}

.mt-3 {
  margin-top: 40px
}

.mt-4 {
  margin-top: 100px
}

.mb-0 {
  margin-bottom: 0
}

.mb-1 {
  margin-bottom: 10px
}

.mb-2 {
  margin-bottom: 20px
}

.mb-3 {
  margin-bottom: 40px
}

.mb-4 {
  margin-bottom: 100px
}

.p-0 {
  padding: 0
}

.p-1 {
  padding: 10px
}

.p-2 {
  padding: 20px
}

.p-3 {
  padding: 40px
}

.p-4 {
  padding: 100px
}

.pt-1 {
  padding-top: 10px;
}

.pt-3 {
  padding-top: 20px;
}

.pt-3 {
  padding-top: 40px;
}

.pt-4 {
  padding-top: 15vh;
}

.pb-1 {
  padding-bottom: 10px;
}

.pb-2 {
  padding-bottom: 20px;
}

.pb-3 {
  padding-bottom: 40px;
}

.pb-4 {
  padding-bottom: 15vh;
}

.img-res {
  width: 100%;
}


/* ! Grid System */
.grid {
  margin: 0 auto;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

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

.col {
  flex: 1;
}

[class*='col-'] {
  position: relative;
  padding: 0;
}

.grid .grid [class*='col-'] {
  padding: 0px;
}

.col-10 {
  width: 10%;
}

.col-20 {
  width: 20%;
}

.col-25 {
  width: 25%;
}

.col-30 {
  width: 30%;
}

.col-33 {
  width: 33.33%;
}

.col-40 {
  width: 40%;
}

.col-50 {
  width: 50%;
}

.col-60 {
  width: 60%;
}

.col-70 {
  width: 70%;
}

.col-80 {
  width: 80%;
}

.col-90 {
  width: 90%;
}

.col-100 {
  width: 100%;
}

@media (max-width: 991px) {
  .tab-20 {
    width: 20%;
  }

  .tab-25 {
    width: 25%;
  }

  .tab-33 {
    width: 33.33%;
  }

  .tab-50 {
    width: 50%;
  }

  .tab-80 {
    width: 80%;
  }

  .tab-90 {
    width: 90%;
  }

  .tab-100 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  [class*='col-'] {
    width: 100%;
  }

  .sma-20 {
    width: 20%;
  }

  .sma-25 {
    width: 25%;
  }

  .sma-33 {
    width: 33.33%;
  }

  .sma-50 {
    width: 50%;
  }

  .sma-100 {
    width: 100%;
  }
}


/* Accessibility */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  right: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/* underline for accesibility */
.text-content a,
.comment-content a {
  text-decoration: underline;
}

/* focus elements */
/* :focus {
  outline: 2px solid #2ba801;
  outline-offset: 2px;
} */

/* hide elements for accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ! Icon System - https://ionicframework.com/docs/v3/ionicons/ */

.icon-arrow {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EArrow Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M268 112l144 144-144 144M392 256H100'/%3E%3C/svg%3E");
}

.icon-fb {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230d438c' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Facebook%3C/title%3E%3Cpath d='M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.icon-ig {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230d438c' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Instagram%3C/title%3E%3Cpath d='M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z'/%3E%3Cpath d='M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z'/%3E%3C/svg%3E");
}

.icon-tw {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' fill='%230d438c' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Twitter%3C/title%3E%3Cpath d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/%3E%3C/svg%3E");
}

.icon-yt {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230d438c' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Youtube%3C/title%3E%3Cpath d='M508.64 148.79c0-45-33.1-81.2-74-81.2C379.24 65 322.74 64 265 64h-18c-57.6 0-114.2 1-169.6 3.6C36.6 67.6 3.5 104 3.5 149 1 184.59-.06 220.19 0 255.79q-.15 53.4 3.4 106.9c0 45 33.1 81.5 73.9 81.5 58.2 2.7 117.9 3.9 178.6 3.8q91.2.3 178.6-3.8c40.9 0 74-36.5 74-81.5 2.4-35.7 3.5-71.3 3.4-107q.34-53.4-3.26-106.9zM207 353.89v-196.5l145 98.2z'/%3E%3C/svg%3E");
}


.icon-in {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z'/%3E%3C/svg%3E");
}

.icon-tk {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Tiktok%3C/title%3E%3Cpath d='M412.19 118.66a109.27 109.27 0 01-9.45-5.5 132.87 132.87 0 01-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14 23.9 350 16 350.13 16h-82.44v318.78c0 4.28 0 8.51-.18 12.69 0 .52-.05 1-.08 1.56 0 .23 0 .47-.05.71v.18a70 70 0 01-35.22 55.56 68.8 68.8 0 01-34.11 9c-38.41 0-69.54-31.32-69.54-70s31.13-70 69.54-70a68.9 68.9 0 0121.41 3.39l.1-83.94a153.14 153.14 0 00-118 34.52 161.79 161.79 0 00-35.3 43.53c-3.48 6-16.61 30.11-18.2 69.24-1 22.21 5.67 45.22 8.85 54.73v.2c2 5.6 9.75 24.71 22.38 40.82A167.53 167.53 0 00115 470.66v-.2l.2.2c39.91 27.12 84.16 25.34 84.16 25.34 7.66-.31 33.32 0 62.46-13.81 32.32-15.31 50.72-38.12 50.72-38.12a158.46 158.46 0 0027.64-45.93c7.46-19.61 9.95-43.13 9.95-52.53V176.49c1 .6 14.32 9.41 14.32 9.41s19.19 12.3 49.13 20.31c21.48 5.7 50.42 6.9 50.42 6.9v-81.84c-10.14 1.1-30.73-2.1-51.81-12.61z'/%3E%3C/svg%3E");
}

.icon-wa {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Whatsapp%3C/title%3E%3Cpath d='M414.73 97.1A222.14 222.14 0 00256.94 32C134 32 33.92 131.58 33.87 254a220.61 220.61 0 0029.78 111L32 480l118.25-30.87a223.63 223.63 0 00106.6 27h.09c122.93 0 223-99.59 223.06-222A220.18 220.18 0 00414.73 97.1zM256.94 438.66h-.08a185.75 185.75 0 01-94.36-25.72l-6.77-4-70.17 18.32 18.73-68.09-4.41-7A183.46 183.46 0 0171.53 254c0-101.73 83.21-184.5 185.48-184.5a185 185 0 01185.33 184.64c-.04 101.74-83.21 184.52-185.4 184.52zm101.69-138.19c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54 2.78-14.4 18-17.65 21.75-6.5 4.16-12.07 1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56 2.44-11.32c2.51-2.49 5.57-6.48 8.36-9.72s3.72-5.56 5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53 20.53 0 00-14.86 6.94c-5.11 5.56-19.51 19-19.51 46.28s20 53.68 22.76 57.38 39.3 59.73 95.21 83.76a323.11 323.11 0 0031.78 11.68c13.35 4.22 25.5 3.63 35.1 2.2 10.71-1.59 33-13.42 37.63-26.38s4.64-24.06 3.25-26.37-5.11-3.71-10.69-6.48z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.icon-search {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 20px;
  height: 20px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ESearch%3C/title%3E%3Cpath d='M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z'/%3E%3C/svg%3E");
}

.icon-angle {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 20px;
  height: 20px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
}

.icon-nav {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 26px;
  height: 26px;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M11.762 3.25c.46.006.99.223 1.276.734l.174.312a82.518 82.518 0 0 1 6.474 14.753c.218.67-.14 1.237-.589 1.5a1.484 1.484 0 0 1-1.552-.037l-4.728-3.04c-.522-.336-1.231-.337-1.72-.028L6.464 20.37a1.483 1.483 0 0 1-1.553.01c-.427-.255-.809-.808-.61-1.482A77.671 77.671 0 0 1 10.307 4.29l.164-.308c.284-.531.832-.737 1.29-.73Zm-.007 1.513-.125.233A76.203 76.203 0 0 0 5.84 18.99l4.455-2.813c1-.63 2.337-.607 3.334.034l4.496 2.892a81.088 81.088 0 0 0-6.222-14.074l-.148-.265Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.icon-mail {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 26px;
  height: 26px;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M2.804 8.353c-.28 2.603-.268 5.605.122 8.197a3.138 3.138 0 0 0 2.831 2.66l1.51.131c3.15.274 6.317.274 9.466 0l1.51-.13a3.138 3.138 0 0 0 2.831-2.66c.39-2.593.402-5.595.122-8.198a30.68 30.68 0 0 0-.122-.904 3.138 3.138 0 0 0-2.831-2.66l-1.51-.13a54.647 54.647 0 0 0-9.465 0l-1.51.13a3.138 3.138 0 0 0-2.832 2.66 31.1 31.1 0 0 0-.122.904Zm4.593-2.2a53.146 53.146 0 0 1 9.206 0l1.51.131a1.64 1.64 0 0 1 1.478 1.389l.034.233-5.561 3.09a4.25 4.25 0 0 1-4.128 0l-5.56-3.09c.01-.078.022-.156.033-.233a1.638 1.638 0 0 1 1.478-1.389l1.51-.131ZM19.81 9.52a29.099 29.099 0 0 1-.218 6.807 1.638 1.638 0 0 1-1.478 1.389l-1.51.131a53.152 53.152 0 0 1-9.206 0l-1.51-.131a1.638 1.638 0 0 1-1.478-1.389 29.101 29.101 0 0 1-.217-6.807l5.016 2.787a5.75 5.75 0 0 0 5.585 0l5.015-2.787Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.icon-call {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 26px;
  height: 26px;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.84 9.856a17.216 17.216 0 0 0 8.922 8.663l.012.005.764.34a2.25 2.25 0 0 0 2.74-.737l1.274-1.763a.25.25 0 0 0-.046-.341l-2.224-1.795a.25.25 0 0 0-.358.046l-.866 1.168a.75.75 0 0 1-.912.237 13.387 13.387 0 0 1-6.67-6.67.75.75 0 0 1 .237-.912L9.88 7.23a.25.25 0 0 0 .046-.358L8.132 4.648a.25.25 0 0 0-.341-.046l-1.773 1.28a2.25 2.25 0 0 0-.732 2.756l.554 1.217v.001Zm8.33 10.041a18.716 18.716 0 0 1-9.694-9.416v-.002l-.555-1.22A3.75 3.75 0 0 1 5.14 4.666l1.773-1.28a1.75 1.75 0 0 1 2.386.32l1.795 2.225a1.75 1.75 0 0 1-.32 2.505l-.67.496a11.891 11.891 0 0 0 5.118 5.118l.497-.67a1.75 1.75 0 0 1 2.504-.32l2.225 1.795a1.75 1.75 0 0 1 .32 2.387l-1.275 1.764a3.75 3.75 0 0 1-4.565 1.229l-.758-.338Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.icon-plus {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 26px;
  height: 26px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12.75 7a.75.75 0 0 0-1.5 0v4.25H7a.75.75 0 0 0 0 1.5h4.25V17a.75.75 0 0 0 1.5 0v-4.25H17a.75.75 0 0 0 0-1.5h-4.25V7Z'/%3E%3C/svg%3E");
}

.icon-check {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 26px;
  height: 26px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M18.03 7.97a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 1 1 1.06-1.06l3.47 3.47 6.47-6.47a.75.75 0 0 1 1.06 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.icon-1 {
  width: 40px;
  height: 40px;
}

.icon-2 {
  width: 70px;
  padding: 8px;
}

.icon-3 {
  width: 100px;
  padding: 8px;
}

.icon-invert {
  filter: invert(1);
}

/* Blocks */

/* Accordion */
.accordion h3 {
  position: relative;
  padding-right: 30px;
  margin-bottom: 15px;
  cursor: pointer
}

.accordion h3:after {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  content: ' ';
  background-image: url('data:image/svg+xml;utf8,<svg width="80px" height="80px" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"/></svg>');
  transform: rotate(90deg);
  background-size: 100%;
}

.accordion .wp-block-column .wp-block-group {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  border-bottom: 2px solid #ddd;
  transition: all 0.2s ease-in-out;
  margin-bottom: 20px;
}

.accordion .wp-block-column .wp-block-group.open-accordion {
  max-height: 500px;
  padding-bottom: 15px;
  overflow: auto;
}

/* Media Text */
@media (max-width: 768px) {
  .wp-block-media-text__media img {
    margin-bottom: 20px;
    margin-top: 40px;
  }
}

/* Animation on scroll */
.fade {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.6s ease-in-out;
  will-change: transform, opacity;
}

.fadeIn {
  opacity: 1;
  transform: translateY(0px)
}


/* Animation System on scroll v2 
--------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease-out, transform .8s cubic-bezier(.2, .7, .25, 1), filter .8s cubic-bezier(.2, .7, .25, 1);
  will-change: opacity, transform, filter;
}

/* Directional variants */
.reveal.reveal-up {
  transform: translateY(30px);
}

.reveal.reveal-down {
  transform: translateY(-30px);
}

.reveal.reveal-left {
  transform: translateX(30px);
}

.reveal.reveal-right {
  transform: translateX(-30px);
}

.reveal.reveal-zoom {
  transform: scale(.95);
}

.reveal.reveal-skew {
  transform: translateY(20px) skewY(5deg);
}

.reveal.reveal-blur {
  filter: blur(6px);
}

/* Active state on scroll */
.reveal.is-inview {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Clip-path effect */
.reveal.reveal-clip {
  display: inline-block;
  position: relative;
  overflow: hidden;
  /* create mask */
  clip-path: inset(0 0 100% 0);
  /* hidden from bottom */
  transform: translateY(20px);
  /* placed below */
}

/* Clip-path active state */
.reveal.reveal-clip.is-inview {
  animation: clip 0.9s cubic-bezier(.2, .7, .25, 1) forwards;
}

/* Keyframes for clip-path reveal */
@keyframes clip {
  0% {
    clip-path: inset(0% 0 100% 0);
    /* masked at bottom */
    transform: translateY(0px);
    /* pushed down */
  }

  100% {
    clip-path: inset(0 0 0 0);
    /* fully visible */
    transform: translateY(0);
    /* normal position */
  }
}

/* Accessibility: disable animations */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* Delay utilities */
.delay-01 {
  transition-delay: .1s;
}

.delay-02 {
  transition-delay: .2s;
}

.delay-03 {
  transition-delay: .3s;
}

.delay-04 {
  transition-delay: .4s;
}

.delay-05 {
  transition-delay: .5s;
}

.delay-06 {
  transition-delay: .6s;
}

.delay-07 {
  transition-delay: .7s;
}

.delay-08 {
  transition-delay: .8s;
}

.delay-09 {
  transition-delay: .9s;
}

.delay-10 {
  transition-delay: 1s;
}

/* Animation System v2 End */

/* Animation on load 
--------------------------------------------------------- */

@keyframes fade-load {
  from {
    opacity: 0;
    top: 20px
  }

  to {
    opacity: 1;
    top: 0;
  }
}

/*.load { 
  opacity: 0; 
  animation: fade-load cubic-bezier(0.385, 0.135, 0.15, 0.86) 0.5s forwards; 
}*/


/* Whats App */
.logo-whats-app {
  display: block;
  width: 38px;
  height: 38px;
  position: fixed;
  bottom: 43px;
  right: 43px;
  z-index: 999;
  border-radius: 100%;
  background: #25D366;
  border: 0px solid #25D366;
}

.logo-whats-app .icon-wa {
  width: 44px;
  height: 44px;
  margin: -3px 0 0 -3px;
  padding: 0;
  filter: invert(1);
}

/* Woo Commerce
------------------------------------------------------------------------ */
.menu-item-type-woocommerce-cart {
  position: relative;
  width: 30px;
  height: 18px;
}

.menu-cart-total {
  position: relative;
  position: absolute;
  top: -10px;
  left: 0;
}

.menu-cart-total svg {
  height: 24px;
  width: 24px;
}

.menu-cart-total span {
  position: absolute;
  bottom: 10px;
  right: -2pxpx;
  font-size: 11px;
}

/* button */
.woocommerce .button {
  background: #222 !important;
  color: #fff !important;
  text-transform: uppercase;
  font-family: inherit !important;
  margin-top: 0;
  margin-right: 10px;
}


.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button {
  border-radius: 3px;
  padding: 15px 25px
}

.woocommerce .woocommerce-message .button {
  padding: 10px 15px;
}


/* columns fix */
.checkout.woocommerce-content [class*='col-'],
.checkout.woocommerce-checkout [class*='col-'] {
  padding: 0;
}

/* select */
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}

.woocommerce-input-wrapper input {
  border-radius: 4px
}

/* Cart */
.woocommerce-cart .variation {
  font-size: 12px;
  margin-top: 0;
}

.woocommerce-cart .variation p {
  font-size: 12px;
  padding: 4px 0 0 0;
}

.woocommerce-cart .variation dt,
.woocommerce-cart .variation dd {
  height: 20px;
}

.woocommerce #coupon_code,
.woocommerce .actions .button {
  height: 36px;
  border-radius: 3px;
  padding: 5px 15px;
  line-height: 17px !important;
}

.woocommerce #coupon_code {
  width: 120px !important
}

@media (max-width: 768px) {
  .woocommerce-page #content table.cart td.actions .coupon .button {
    width: calc(100vw - 210px);
    margin-right: 0;
  }
}

/* table */
#add_payment_method .cart-collaterals .cart_totals tr td,
#add_payment_method .cart-collaterals .cart_totals tr th,
.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
  border-top: 1px solid #ccc
}

/* quantity single products */
.woocommerce .quantity input {
  margin-top: 0;
  border-radius: 3px;
  height: 46px;
}

.woocommerce .quantity .qty {
  width: 60px;
}

/* price */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: #000
}

/* variations */
.woocommerce div.product form.cart .variations {
  padding: 10px;
  border-bottom: 1px solid #222;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  padding-bottom: 10px;
}

.woocommerce select {
  /* Reset */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #666;
  outline: 0;
  font: inherit;
  /* Personalize */
  width: 20em;
  height: 40px;
  padding: 0 4em 0 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E") no-repeat right 0.8em center/1.4em;
  color: #222;
  border-radius: 0.25em;
  cursor: pointer;
}

.woocommerce select option {
  color: inherit;
  background-color: #320a28;
}

.woocommerce select:focus {
  outline: none;
}

.woocommerce select::-ms-expand {
  display: none;
}

.woocommerce .woocommerce-ordering select {
  border: none;
  width: 200px
}

@media (max-width: 768px) {
  .woocommerce-result-count {
    font-size: 12px;
  }

  .woocommerce .woocommerce-ordering select {
    font-size: 12px;
    margin-top: -10px;
    width: 140px
  }
}

/* tabs */
.woocommerce div.product .woocommerce-tabs h2 {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: 0;
  margin-bottom: 0px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent;
  color: #222;
  border-bottom: 4px solid #222
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-color: #222
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
}

.woocommerce table.shop_attributes tr:nth-child(even) td, .woocommerce table.shop_attributes tr:nth-child(even) th {
  background: none;
}

/* review */
.woocommerce #review_form #respond p {
  margin: 10px 10px 10px 0px
}

.woocommerce #review_form #respond p.comment-form-cookies-consent,
.woocommerce #review_form #respond p.form-submit {
  width: 100%;
  float: left;
}


/* messages */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
  padding: 1em 2em 1em 3.5em;
  margin: 0 0 2em;
  border-radius: 4px;
  position: relative;
  background-color: #f7f6f7;
  color: #111;
  border-top: none;
  list-style: none outside;
  line-height: 32px;
  width: auto;
  word-wrap: break-word;
}

.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-error a.button,
.woocommerce .woocommerce-info a.button {
  color: #fff !important
}

.woocommerce .woocommerce-message a.button {
  background: #4CAF50 !important;
}

.woocommerce-message::before {
  color: #4CAF50;
}

.woocommerce .woocommerce-message {
  background: #e5fce5
}

.woocommerce .woocommerce-error a.button {
  background: #F44336 !important;
}

.woocommerce-error::before {
  color: #F44336;
}

.woocommerce .woocommerce-error {
  background: #FEECEB;
  color: #D91811
}

.woocommerce .woocommerce-info a.button {
  background: #2296F2 !important;
}

.woocommerce .woocommerce-info a {
  color: #1478C8
}

.woocommerce-info::before {
  color: #2296F2;
}

.woocommerce .woocommerce-info {
  background: #E9F5FE;
}

/* general fix */
.woocommerce a.added_to_cart {
  padding-left: 10px;
}

.woocommerce-page #content .text-content a {
  text-decoration: none;
}

.woocommerce span.onsale {
  background-color: #444;
}

.woocommerce div.product .product_meta {
  font-size: 14px;
}

.woocommerce .woocommerce-billing-fields {
  margin-bottom: 20px;
}

.woocommerce .woocommerce-variation-price {
  margin-bottom: 10px;
}

/* hide title and button in shop list */
.woocommerce ul.products li.product .button {
  display: none;
}

.woocommerce-shop h1 {
  display: none;
}


/* Woo Pagination */
.woocommerce nav.woocommerce-pagination ul {
  text-align: left;
  width: 100%;
  border: none
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 1px solid #222;
  margin-right: 10px;
}

.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a {
  float: left;
  padding: 14px 19px;
  display: inline-block;
}

/* Cart & Checkout */

.woocommerce-page.woocommerce-cart .cart-collaterals .cart_totals table,
#order_review table.shop_table {
  background: #d4d4d4;
  border: none;
  padding: 10px;
}

.woocommerce-page.woocommerce-cart .cart-collaterals .cart_totals table td,
.woocommerce-page.woocommerce-cart .cart-collaterals .cart_totals table th,
#order_review table.shop_table td,
#order_review table.shop_table th {
  border-color: #acacac !important;
}


@media screen and (min-width: 900px) {
  .woocommerce-page .woocommerce-cart-form {
    width: 62%;
    float: left;
  }

  .woocommerce-page .cart-collaterals {
    width: 36%;
    float: right;
  }

  .woocommerce-page .cart-collaterals .cart_totals {
    width: 100%;
    float: right;
    margin-top: -55px;
    padding-bottom: 20vh;
  }
}

/* Checkout */
.checkout.woocommerce-checkout .select2-container--default .select2-selection--single {
  border: 2px solid #ddd;
  height: 40px;
}

.checkout.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px;
}

.checkout.woocommerce-checkout input[type=text],
.checkout.woocommerce-checkout input[type=number],
.checkout.woocommerce-checkout input[type=tel],
.checkout.woocommerce-checkout input[type=password],
.checkout.woocommerce-checkout input[type=email],
.checkout.woocommerce-checkout input[type=url],
.checkout.woocommerce-checkout textarea {
  border: 2px solid #ddd
}

.woocommerce .checkout-button,
.woocommerce .place-order .button {
  font-size: 18px;
  font-weight: bold;
}

/* Checkout input */
.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
  padding: 10px
}

.checkout.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 20px;
}

.woocommerce-checkout #payment {
  background: #ddd;
}

@media (min-width: 998px) {

  .woocommerce-checkout .checkout.woocommerce-checkout.col2-set,
  .woocommerce-checkout .col2-set {
    width: 50%;
    float: left
  }

  .woocommerce-checkout .checkout.woocommerce-checkout #order_review_heading,
  .woocommerce-checkout .checkout.woocommerce-checkout #order_review {
    width: 45%;
    float: right
  }

  /* Sticky Cart */
  .woocommerce-page .checkout.woocommerce-checkout #order_review_heading {
    position: sticky;
    top: 160px
  }

  .woocommerce-page .checkout.woocommerce-checkout #order_review {
    position: sticky;
    top: 200px
  }

  .woocommerce-page .checkout.woocommerce-checkout {
    float: left;
    width: 100%;
    position: relative;
  }

  .woocommerce-cart .woocommerce .col2-set .col-1,
  .woocommerce-cart .woocommerce-page .col2-set .col-1,
  .woocommerce-cart .woocommerce .col2-set .col-2,
  .woocommerce-cart .woocommerce-page .col2-set .col-2,
  .woocommerce-checkout .woocommerce .col2-set .col-1,
  .woocommerce-checkout .woocommerce-page .col2-set .col-1,
  .woocommerce-checkout .woocommerce .col2-set .col-2,
  .woocommerce-checkout .woocommerce-page .col2-set .col-2 {
    width: 100%
  }

  .woocommerce #payment #place_order,
  .woocommerce-page #payment #place_order {
    width: 100%;
    display: block;
    padding: 20px
  }
}


/* End Woo Commerce
------------------------------------------------------------------------ */


/* Full Site Editing
------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .wp-block-navigation__responsive-container {
    padding: 20px !important;
  }
}

/* End Full Site Editing
------------------------------------------------------------------------ */

/* clearfix for post float images */
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

* html .clearfix {
  zoom: 1;
}

/* IE6 */
*:first-child+html .clearfix {
  zoom: 1;
}

/* IE7 */

/* ! -----------ANIMATION GSAP------------- */


.fade-in {
  opacity: 0;
  transform: translateY(1rem);
}

.text-reveal {
  transform: translateY(1rem);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.text-show {
  transform: translateY(1rem);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}



.text-change .title {
  color: var(--link-color);
  transition: all 1.5s cubic-bezier(.215, .61, .355, 1);
}



.fade-in-up {
  opacity: 0;
  transform: translateY(5rem);
}

.contatti {
  transform: translateX(-120%);
}

.rotate {
  animation: rotation 15s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.slide-left {
  position: relative;
  left: -200px;
}

.slide-right {
  position: relative;
  right: -200px;
}



/* ! SPLIDE CSS */
.splide__container {
  box-sizing: border-box;
  position: relative
}

.splide__list {
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block
}

.splide__pagination {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  pointer-events: none
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto
}

.splide:not(.is-overflow) .splide__pagination {
  display: none
}

.splide__progress__bar {
  width: 0
}

.splide {
  position: relative;
  visibility: hidden
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative
}

.splide__slide img {
  vertical-align: bottom
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0
}

@keyframes splide-loading {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}

.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.splide__track--fade>.splide__list>.splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0
}

.splide__track--fade>.splide__list>.splide__slide.is-active {
  opacity: 1;
  z-index: 1
}

.splide--rtl {
  direction: rtl
}

.splide__track--ttb>.splide__list {
  display: block
}

.splide__arrow {
  -ms-flex-align: center;
  align-items: center;
  background: #ccc;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 2em;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: .7;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  z-index: 1
}

.splide__arrow svg {
  fill: #000;
  height: 1.2em;
  width: 1.2em
}

.splide__arrow:hover:not(:disabled) {
  opacity: .9
}

.splide__arrow:disabled {
  opacity: .3
}

.splide__arrow:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide__arrow--prev {
  left: 1em
}

.splide__arrow--prev svg {
  transform: scaleX(-1)
}

.splide__arrow--next {
  right: 1em
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide__pagination {
  bottom: .5em;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  z-index: 1
}

.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin: 3px;
  opacity: .7;
  padding: 0;
  position: relative;
  transition: transform .2s linear;
  width: 8px
}

.splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.4);
  z-index: 1
}

.splide__pagination__page:hover {
  cursor: pointer;
  opacity: .9
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide__progress__bar {
  background: #ccc;
  height: 3px
}

.splide__slide {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.splide__slide:focus {
  outline: 0
}

@supports(outline-offset:-3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: -3px
  }
}

@media screen and (-ms-high-contrast:none) {
  .splide__slide:focus-visible {
    border: 3px solid #0bf
  }
}

@supports(outline-offset:-3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #0bf;
    outline-offset: -3px
  }
}

@media screen and (-ms-high-contrast:none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #0bf
  }

  .splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus {
    border-color: #0bf
  }
}

.splide__toggle {
  cursor: pointer
}

.splide__toggle:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide__track--nav>.splide__list>.splide__slide {
  border: 3px solid transparent;
  cursor: pointer
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
  border: 3px solid #000
}

.splide__arrows--rtl .splide__arrow--prev {
  left: auto;
  right: 1em
}

.splide__arrows--rtl .splide__arrow--prev svg {
  transform: scaleX(1)
}

.splide__arrows--rtl .splide__arrow--next {
  left: 1em;
  right: auto
}

.splide__arrows--rtl .splide__arrow--next svg {
  transform: scaleX(-1)
}

.splide__arrows--ttb .splide__arrow {
  left: 50%;
  transform: translate(-50%)
}

.splide__arrows--ttb .splide__arrow--prev {
  top: 1em
}

.splide__arrows--ttb .splide__arrow--prev svg {
  transform: rotate(-90deg)
}

.splide__arrows--ttb .splide__arrow--next {
  bottom: 1em;
  top: auto
}

.splide__arrows--ttb .splide__arrow--next svg {
  transform: rotate(90deg)
}

.splide__pagination--ttb {
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: .5em;
  top: 0
}

/* ! Tiles */
/*TILES */

/* Assicura altezza uniforme tra le slide */
.splide__slide {
  display: flex;
  height: auto;
}



.splide__list {
  display: flex;
  align-items: stretch;
  /*tutte le card uguali */
}

.tiles {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  flex: 1;
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 20px;
  border: 2px solid var(--colore-birra, #0D438C);

  /* backdrop-filter: blur(16px) saturate(160%);*/
  /* -webkit-backdrop-filter: blur(16px) saturate(160%);*/
  
  /* BOX-SHADOW ORIGINALE: box-shadow: 0px 0px 10px rgba(45, 45, 45, 0.25); */

  /* ✨ NUOVA OMBRA PER MAGGIORE RISALTO */
  /* Spostamento verticale maggiore, sfocatura aumentata e colore più scuro per l'ombra */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 
              0 6px 6px rgba(0, 0, 0, 0.15);


  /* ✨ sfondo con gradiente dinamico */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--colore-birra, #0D438C) 25%, transparent),
      rgba(255, 255, 255, 0.05));
}


.tiles:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 10px color-mix(in srgb, var(--colore-birra, #0D438C), transparent 60%);
}



/* Contenuto testo */
.tiles__contents {
  margin-top: 20px;
  padding: 10px 30px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  align-items: center;
  flex: 1;
  z-index: 1;
}

/* Titolo colorato */
.tiles h3 {

font-family: 'Oswald';
  color: var(--colore-birra, #0D438C);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  text-align: center;
  font-weight: 500;
  transition: color 0.3s ease;
  margin: 0 !important;
}

/* Testo */
.tiles__contents p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;

}

.blob-button {
  --blob-color: var(--colore-birra, #ff6f00);

  position: relative;
  display: inline-block;
  padding: 1rem 2.5rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--blob-color);
  border: none;
  border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
  box-shadow: 0 8px 25px color-mix(in srgb, var(--blob-color), transparent 70%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: blobMorph 6s ease-in-out infinite;
  overflow: hidden;
}

/* Luce liquida in movimento */

/* Hover interattivo */
.blob-button:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--blob-color), transparent 50%);
  filter: brightness(1.1);
}

/* 💧 Animazione forma blob */
@keyframes blobMorph {
  0% {
    border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
  }

  33% {
    border-radius: 45% 55% 60% 40% / 55% 45% 50% 50%;
  }

  66% {
    border-radius: 50% 50% 45% 55% / 45% 60% 40% 55%;
  }

  100% {
    border-radius: 60% 40% 50% 50% / 50% 50% 60% 40%;
  }
}



.tiles__contents a {
  text-transform: uppercase;
  color: #fffdf8;
}

/* (Opzionale) leggero glow colorato attorno alla card */
.tiles::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at top left,
      color-mix(in srgb, var(--colore-birra, #0D438C), transparent 80%) 0%,
      transparent 70%);
  opacity: 0.4;
}

.beer-card__image img {
  width: auto;
  min-height: 200px;
  max-height: 200px;
  display: block;
  transform: scale(1) translateY(0);
  transition: transform 0.5s ease, filter 0.5s ease;
  will-change: transform, filter;
}

.beer-card__image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}



/*.beer-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: blur(25px);
  transform: scale(1.1);
  background: color-mix(in srgb, var(--colore-birra), transparent 70%);
  opacity: 0.7;
  border-radius: 20px;
  transition: opacity 0.4s ease;
}*/

/* Quando la card è in hover → immagine sale e si ingrandisce */
.tiles:hover .beer-card__image img {
  transform: scale(1.25) translateY(-15px);
  filter: brightness(1.05) saturate(1.1);
}

.beer-card__image::after {
  transition: opacity 0.4s ease, transform 0.5s ease;
}

.tiles:hover .beer-card__image::after {
  opacity: 1;
  transform: scale(1.15);
}


.badge-stagionale {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #d3d800, #b0b000);
  color: #0f0f0f;
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 2;
  transform: rotate(3deg);
  pointer-events: none;
}

.badge-menu-stagionale {
  display: inline-block;
  background: linear-gradient(135deg, #d3d800, #b0b000);
  color: #0f0f0f;
  font-family: 'Oswald', sans-serif;
  font-size: 0.5rem; /* più piccolo per il menu */
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  margin-left: 6px;
  transform: rotate(4deg); /* leggero tocco stilistico coerente */
  pointer-events: none; /* evita click */
  position: relative;
  top: -1px; /* piccolo allineamento verticale */
}


/* ================================================
   Slider MINI — versione compatta nelle singole birre
=================================================== */
.slider-mini {
  margin: 0 auto;
  padding: 20px 0 40px;

}

.slider-mini .splide__list {
  max-width: 100%;
  gap: 15px;
  /* card più ravvicinate */
}



.slider-mini .beer-card__image img {
  max-height: 180px;
  min-height: 160px;
}

@media(max-width:768px){

.slider-container {min-height:60vh!important}
    
} 

@media (max-width: 1190px) and (min-width: 769px) {
    
    .slider-container {min-height:55vh!important}
}
    






/* ! Splide SPlide */
.splide__slide {
  padding: 10px !important;
}

/*IMMAGINI TESTIMONIANZE */

.testimonianza {
  position: relative;
  padding-left: 100px;
}

.testimonianza img {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 20px;
  left: 0;
}

/* ! --------------BLOCKS GUTENBERG----------- */


/* ! ACCORDION TIPO FAQ */
.acc-title {
  padding: 20px;
  margin-bottom: 0px;
  position: relative;
  width: 80%;
}

.acc-title {
  font-weight: 500;
}

.acc-title:after {
  width: 30px;
  height: 30px;
  content: '';
  position: absolute;
  right: 2%;
  top: 30px;
  background: url(../icons/chevron-down-outline.svg);
  background-size: 100%;
}

.acc-panel {
  max-height: 0px;
  overflow: hidden;
  border-width: 2px;
  transition: all 1.5s cubic-bezier(.215, .61, .355, 1);
}

.acc-panel p {
  padding: 20px;
}

.acc-panel--show {
  max-height: 800px;
  margin-bottom: 5px;
}



/*---------------FOOTER --------------*/


.footer-site {
  background-color: #f8f6f2;
  color: #d7d7d7;
  padding: 60px 20px 20px;
  font-size: 0.95rem;
}

.logo-footer {
  width: 150px;
  height: auto;
}

.footer-desc {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  font-size: 1.4rem;
  /* desktop base */
}


.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  align-items: center;
}

.footer-title {
  color: #0d438c;
  /* tono ambrato */
  font-size: 1.2rem;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.footer-desc {
  line-height: 1.6;
  opacity: 0.85;
}

.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-contact li {
  margin-bottom: 8px;
}

.footer-contact a {
  color: #5d5d5d;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-contact a:hover {
  color: #061387;
}



.footer-social {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.footer-social a {
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 1;
  width: 40px;
  height: 40px;
}

.footer-social .icon-fb:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d3d800' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Facebook%3C/title%3E%3Cpath d='M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z' fill-rule='evenodd'/%3E%3C/svg%3E");
}


.footer-social .icon-ig:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d3d800' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Instagram%3C/title%3E%3Cpath d='M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z'/%3E%3Cpath d='M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z'/%3E%3C/svg%3E");
}

.footer-social .icon-tw:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' fill='%23d3d800' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Twitter%3C/title%3E%3Cpath d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/%3E%3C/svg%3E");
}


.footer-social a:hover {
  transform: translateY(-2px);
  opacity: 1;

}


.footer-divider {
  border: none;
  border-top: 1px solid #0d438c;
  margin: 40px 0 20px;
}

.footer-bottom {
  text-align: center;
  font-size: 0.85rem;
  color: #999;
}

.footer-bottom a {
  color: #0d438c;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-bottom a:hover {
  color: #d3d800;
}

.scroll-top svg {
  transition: fill 0.3s ease, transform 0.3s ease;
}

.scroll-top:hover svg {
  fill: #d3d800;
  stroke: #d3d800;
  transform: translateY(-3px);
}




/* Tablet */
@media (max-width: 991px) {
  .footer-desc {
    font-size: 1.2rem;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .footer-desc {
    font-size: 0.9rem;
  }
}





/* HOMEPAGE-------------------------------------
 ------------------------------------------------*/

.hero-home {
  position: relative;
  overflow: hidden;
  /* così l'onda non esce dai bordi */
  z-index: 0;
}

/* overlay nero */
.hero-home::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: -1;
}




/* Highlight words base */
.highlight {
  position: relative;

  display: inline-block;
  transition: color 0.6s ease, transform 0.6s ease;
}

/* Pennellata sotto */
.highlight::after {
 content: "";
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;
    height: 9px;
    background: url(https://birralab24.com/wp-content/uploads/2025/10/Vector-14.svg) no-repeat center / cover;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.4s 
ease-in-out;
    z-index: -1;
    opacity: 0.8;
}

/* Animazione attiva */
.highlight.active {
  /* testo scurito per contrasto sulla pennellata */
  transform: scale(1);
}

.highlight.active::after {
  transform: scaleX(1);
}

/* Ritardi individuali */
.delay1 {
  transition-delay: 0.4s;
}

.delay2 {
  transition-delay: 1s;
}


.hero-content-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}




.claim-hero {
  text-transform: uppercase;
  margin-top: 0.75rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  font-family: "Playfair Display", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  color: #F8F6F2;
  /* o un crema caldo su scuro */
  letter-spacing: 0.04em;
}

.claim-item {
 font-family: 'Kalam', cursive;
font-weight: 300;
display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  white-space: nowrap;
  position: relative;
}

.claim-item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 45px;
  /* regola la lunghezza della pennellata */
  height: 35px;
  margin-left: 1rem;
  background-color: #d3d800;
  /* colore del brand */
  mask-image: url("https://birralab24.com/wp-content/uploads/2025/10/Vector-21.svg");
  /* percorso del tuo svg */
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-image: url("https://birralab24.com/wp-content/uploads/2025/10/Vector-21.svg");
  /* compatibilità Safari */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  transform: translateY(2px);
  /* piccolo allineamento */
  animation: sway 3s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes sway {
  from {
    transform: translateY(2px) rotate(-1deg);
  }

  to {
    transform: translateY(2px) rotate(1deg);
  }
}


/* immagine icona */
.claim-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  opacity: 1;
  transform: translateY(1px);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.claim-item:hover .claim-icon {
  transform: translateY(-2px);
  opacity: 0.8;
}



.container-slider-birre:before {
  content: "";
  position: absolute;
  inset: 0;
  /* copre tutto il blocco */
  background:
    linear-gradient(rgba(255, 255, 255, var(--carta-alpha)), rgba(255, 255, 255, var(--carta-alpha))),
    url('https://birralab24.com/wp-content/uploads/2025/10/2147960178-3.webp') center/cover no-repeat;
  z-index: -1;
  background-attachment: fixed;

  pointer-events: none;
}

.text-chi-siamo,
.img-chi-siamo {

  will-change: transform, opacity;
}

.text-chi-siamo {
  background: rgba(15, 15, 15, 0.4);
  /* nero traslucido */
  backdrop-filter: blur(10px);
  /* effetto vetro */
  -webkit-backdrop-filter: blur(10px);
  /* supporto Safari */
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* leggero contorno per profondità */
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: backdrop-filter 0.4s ease, background 0.4s ease;
}

@media (max-width: 768px) {
    
    .hero-home{
        min-height: 80vh!important;
    }
    
    .hero-title{
        font-size:1.4rem;
    }
    .hero-home-title {
        line-height: 2 !important;
        letter-spacing: 0px!important;
    }
    
    
    .claim-hero {
  text-transform: uppercase;
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap:nowrap;
  font-family: "Playfair Display", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  color: #F8F6F2;
  /* o un crema caldo su scuro */
  letter-spacing: 0.04em;
}

.claim-item{
    gap: 0;
    
}

.claim-item:not(:last-child)::after {
  width: 25px;
  /* regola la lunghezza della pennellata */
  height: 25px;
}

/* Pennellata sotto */
.highlight::after {
  bottom: 10px;
 height: 5px;
 }
    
  
}




/* SVG-TITLE TITOLI SEZIONI */

.title-wrapper {
  position: relative;
  display: inline-block;
}

.title-animated {
  position: relative;
  display: inline-block;
  z-index: 1;
  overflow: visible;
    text-align: center;
}

.title-animated .line {
  display: inline-block;
  width: fit-content !important;
  max-width: 100%;
  position: relative;
}



/* Pennellata dinamica */
.stroke-progressive {
  position: absolute;
  left: 0;
   bottom: clamp(-2px, -0.05em, -6px);
  height: clamp(10px, 0.4em + 0.2vw, 18px);
background: url("https://birralab24.com/wp-content/uploads/2025/10/Vector-14.svg") no-repeat;
  background-size: cover;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
  opacity: 0.6;
  pointer-events: none;
}


/* Hop icon */
.hop-icon {
    margin-top:0!important ;
  position: absolute;
  bottom: -10px;
  right: -50px;
  width: 45px;
  height: auto;
  transform: scale(0);
  opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}


@media (max-width:768px) {
    
   
    
    .hop-icon {
   right: 0px;
  width: 30px;
   bottom: -35px;
    }
}

@media (max-width: 1190px) and (min-width: 769px) {
    
  .hop-icon {
   right: -25px;
  width: 40px;
   bottom: -50px;
    }   
}





/* SEZIONE CARD----------------
--------------------------------*/

.sfondo-carta {
  position: relative;
  z-index: 0;
  /* garantisce che i contenuti restino sopra */
  overflow: hidden;
}

.sfondo-carta::before {
  content: "";
  position: absolute;
  inset: 0;
  /* copre tutto il blocco */
  background:
    linear-gradient(rgba(255, 255, 255, var(--carta-alpha)), rgba(255, 255, 255, var(--carta-alpha))),
    url('https://birralab24.com/wp-content/uploads/2025/10/2147960178-3.webp') center/cover no-repeat;
  z-index: -1;
  /* va dietro ai contenuti */
  pointer-events: none;
  /* evita che blocchi click o hover */
}




/* SEZIONE GUSTO */

.container-text-gusto p {
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: 'Lato', sans-serif;
   font-weight: 400 !important;
}

.container-text-gusto h3 {
  font-family: 'Lato', sans-serif;
  font-style: italic;
  font-size: 2rem;
  font-weight: 400 !important;
}

.sezione-gusto {
  position: relative;
  overflow: hidden;
  /* facoltativo: per evitare che l'immagine esca */
}



.sezione-gusto::after {
  content: "";
  position: absolute;
  inset: 0;
  /* copre tutto il blocco */
  background:
  url('https://birralab24.com/wp-content/uploads/2025/10/SEZIONE-LEGAME-TERRITORIO-1.svg') center/cover no-repeat;
  z-index: -1;
  background-attachment: fixed;
opacity: 0.05;
  pointer-events: none;

}

/* Linee “disegnate” */
.svg-lago .line1,
.svg-lago .line2,
.svg-lago .line3 {
  stroke: #1e1e1e;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

/* Testi — appaiono tramite clip-path */
.svg-lago .giove-text,
.svg-lago .orrido-text,
.svg-lago .leone-text {
  clip-path: inset(0 100% 0 0);
  /* 👈 completamente nascosto */
  transition: clip-path 1s ease-out;
}



@media (max-width:768px){
    .container-text-gusto p {
  font-size: 1.3rem;
  line-height: 1.3;
  font-family: 'Lato', sans-serif;
   font-weight: 400 !important;
}

.container-text-gusto h3 {
  font-family: 'Lato', sans-serif;
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 400 !important;
}
    .svg-lago{height:100% !important}
    .territorio-home{
        max-width:90% !important;
     }
}

@media (max-width: 1190px) and (min-width: 769px) {
    .svg-lago {
        height: 100% !important;
    }
    .territorio-home {
        max-width: 95% !important;
    }
}




/*----PREVIEV-CHI SIAMO------------
-------------*/
.section-chi-siamo {
  position: relative;
  z-index: 0;
  overflow: hidden;
}


.section-chi-siamo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: -1;
}

.icon h4 {
    font-family: 'Kalam', cursive;
font-weight: 400;

}



.text-chi-siamo h3 {
  font-family: 'Lato', sans-serif;
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 500;
  text-transform: uppercase;
}

.text-chi-siamo p {
  font-family: 'Lato', sans-serif;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 140%;
}



.blob-morph.bordered {
  width: 350px;
   max-width: 100%;
  margin: 0 auto;

  /* Forma organica iniziale */
  border-radius: 27% 73% 62% 38% / 48% 30% 70% 52%;

  /* Bordo elegante */
  border: 6px solid rgba(211, 216, 0, 0.95); /* giallo lab24 */

 /* Animazioni */
  transition:
    border-radius 0.85s ease,
    box-shadow 0.6s ease,
    transform 0.5s ease,
    border-color 0.4s ease;
}

.blob-morph.bordered img {
  width: 100%;
  display: block;
  border-radius: inherit;
}

/* Hover raffinato */
@media (hover:hover) {
  .blob-morph.bordered:hover {
    border-radius: 83% 17% 75% 25% / 32% 30% 70% 68% ;
    box-shadow: 26px 28px 10px rgba(211, 216, 0, 0.25);
    transform: scale(1.03);
    border-color: rgba(211, 216, 0, 0.85);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .blob-morph.bordered {
    width: 250px;
    border-width: 4px;
   
  }
}



@media (max-width:768px){
    
    
    
.text-chi-siamo h3 {
  font-family: 'Lato', sans-serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 500;
  text-transform: uppercase;
}

.text-chi-siamo p {
  font-family: 'Lato', sans-serif;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 140%;
}

    
    .icon img {
        
        width: 45px !important;
    }
    
    .preview-svg{
        flex-basis: 30px !important;
    }
    
.preview-svg svg {
    width: 30px;
    height: 15px;
}

.wrapper-chiSiamo-preview{
    max-width: 90%!important;
    gap: 40px!important;
}


.wp-container-core-group-is-layout-d32dbdaf > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 0px !important;
}

.chi-siamo-icon h4 {
    font-size:0.7rem !important;
   
}

}

/* PAGINA birra singola */


/* VIDEO COME BACKGROUND */
.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fa riempire il contenitore */
  z-index: -1;          /* dietro al contenuto */
  pointer-events: none; /* non blocca i click */
}

.birra-hero {
  position: relative;

}

.birra-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.7)
}

 .subtitle-hero {
        
        padding:0% 15%;
    }

.birra-content-hero {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  justify-content: center;
  align-items: center;
  z-index: 2;
  position: relative;
  padding: 40px;
  border-radius: 16px;
  overflow: hidden;


}


.birra-content-hero p {
  font-family: 'Kalam', cursive;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 150%;
}

.title-hero, .subtitle-hero {
  opacity: 0;
  transform: translateY(20px);
}



.bussola-hero {
  width: 50px;
  height: auto;
}


.coordinate-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.coordinate-hero span,
.coordinate-hero svg,
.bussola-hero {
  opacity: 0;
}



.coordinate-hero span {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 2px;
  line-height: 130%;
  color: var(--site-bg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;

}

.birra-transition {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 5;
}

.birra-float {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* piccolo offset per compensare bottiglia alta */
  height: 550px;
  /* garantisce proporzione */
  width: auto;
  object-fit: contain;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

@media (max-width: 768px) {
    
    
.birra-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.55)
}
    
    .birra-hero{
        min-height: 100vh!important;
    }
    
    .title-hero {
        font-size:2.1rem!important;
        letter-spacing: 4px!important;
    }
    
    .subtitle-hero {
        
        padding:0% 5%!important;
    }
    
     .birra-content-hero p {
    font-family: 'Kalam', cursive;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 15px;
    letter-spacing: 2px;
    line-height: 150%;
}
    
    .birra-content-hero {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    justify-content: center;
    align-items: center;
    z-index: 2;
    position: relative;
    padding: 0px;
    overflow: hidden;
}

.coordinate-hero span {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 2px;
  line-height: 130%;
  color: var(--site-bg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;

}

.coordinate-hero svg{
    
    width: 25px!important;
}

.bussola-hero{
    width: 35px;
}
    
    
}




/* scheda tecnica birra */

.colonna-sx-seztecnica figure img {
  opacity: 1;
  /* nascosta finché non arriva */
  transition: opacity 0.4s ease;
}


.sezione-birra-singola:before {
  content: "";
  position: absolute;
  inset: 0;
  /* copre tutto il blocco */
  background:
    linear-gradient(rgba(255, 255, 255, var(--carta-alpha)), rgba(255, 255, 255, var(--carta-alpha))),
    url('https://birralab24.com/wp-content/uploads/2025/10/2147960178-3.webp') center/cover no-repeat;
  z-index: -1;
  background-attachment: fixed;

  pointer-events: none;
}



/* ============================ */
/* CARTELLINO APPESO CON SPAGO */
/* ============================ */

.tag-cartellino {
  position: relative;
  padding: 1.5rem 2rem;
  background: #FAF7EF;
  border-radius: 12px;
  border: 2px solid #c7a67d;
  box-shadow: 
      0px 12px 25px rgba(0,0,0,0.2),
      inset 0 0 20px rgba(0,0,0,0.05);
  max-width: 420px;
  margin: 0 auto;
  transform-origin: top center;
  animation: tagOscillation 5s ease-in-out infinite;
}

/* Foro del cartellino */
.tag-cartellino::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  background: #eae1cf;
  border-radius: 50%;
  border: 3px solid #b8ab93;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
  z-index: 3;
}

/* Spago */
.tag-cartellino::after {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;
  width: 2px;
  height: 55px;
  background: linear-gradient(to bottom, #c9b69b, #8a7966);
  transform: translateX(-50%);
  z-index: 2;
}


/* Graffetta in alto */
.tag-cartellino .graffetta {
  position: absolute;
  top: -25px;
  left: 50%;
  width: 40px;
  height: 55px;
  transform: translateX(-50%);
  border: 3px solid #b3b3b3;
  border-radius: 12px;
  border-top-color: transparent;
  border-left-color: transparent;
  rotate: -8deg;
  z-index: 5;
  background: transparent;
  pointer-events: none;
}

/* effetto 3D leggero */
.tag-cartellino .graffetta::after {
  content: "";
  position: absolute;
  top: 5px;
  right: -6px;
  width: 3px;
  height: 35px;
  background: #9c9c9c;
  border-radius: 2px;
}


/* OSCILLAZIONE LEGGERISSIMA */
@keyframes tagOscillation {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}




/* ============================ */
/* STILE INTERNO DEI DATI       */
/* (riutilizzi il tuo CSS sotto) */
/* ============================ */

.scheda-tecnica__colonna {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.scheda-tecnica__dato {
  position: relative;
  padding-bottom: 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}



.scheda-tecnica__dato:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60%;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to right,
    rgba(200,150,50,0) 0%,
    rgba(200,150,50,0.6) 50%,
    rgba(200,150,50,0) 100%
  );
}

.scheda-tecnica__dato h4 {
  color: #5c4b35;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin: 0;
  font-family: 'Oswald', sans-serif;
}

.scheda-tecnica__dato p {
  font-size: 1rem;
  text-transform: uppercase;
  margin: 0;
  font-weight: 500;
  color: #494949;
}

.scheda-tecnica__colore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.colore-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
.dato-header {
  position: relative;   
  text-align: center;    /* mantiene il titolo centrato */
  display: inline-block; /* permette posizionamento preciso */
}

/* Icona sovrapposta a destra del titolo */
.icon-dato {
  position: absolute;
  right: 10px;   /* distanza dal titolo */
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  opacity: 0.9;
  pointer-events: none; /* non cliccabile */
}




/* MOBILE */
@media (max-width: 768px) {
    
    .container-sezione-tecnica{
        gap: 62px!important;
    }
    
    .scheda-tecnica__colonna {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
    
    .colonna-sx-seztecnica figure img {
        
        height: 45vh!important;
    }
    
    .colonna-sx {
        gap: 1rem!important;
    }
    
    .img-slot{
        flex-basis: 50%!important;
    }
    
    .colonna-scheda-tecnica{
        flex-basis: 45%!important;
    }
    
    .scheda-tecnica__dato p {
    font-size: 0.65rem;
   }
    
    .scheda-tecnica__dato h4 {
   font-size: 0.7rem;
}

.colore-swatch {
    width: 14px;
    height: 14px;
    
}

 .tag-cartellino {
    max-width: 100%;
    padding: 1.4rem 0.6rem;
     border: 1px solid #c7a67d;
  }
  
  .tag-cartellino::after {
    top: -30px;
     height: 25px;
   }
   
   .icon-dato {
    position: absolute;
    right:0px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    opacity: 0.9;
    pointer-events: none;
}

.scheda-tecnica__dato {
    position: relative;
    padding-bottom: 0.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
   
}



.scheda-tecnica__descrizione {
  flex: 1.2;
  background: #f9f3e7;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Contenitore generale */
.descrizione-birra-craft {
    display: flex;
    align-items: center;
   /* colore carta naturale */
  position: relative;
  padding: 50px 70px;
  text-align: left;
  min-height: 350px;
  background: radial-gradient(
    circle,
    #feead5c4 20%,
    #feead5c4 10%,
    rgba(254, 234, 213, 0) 60%
);

}


/* Leggera texture di carta */
.descrizione-birra-craft::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://birralab24.com/wp-content/uploads/2025/12/sfondo-pergamena-trasparent.webp') center/cover no-repeat;
  opacity: 0.85;
  mix-blend-mode: multiply;
  pointer-events: none;
}


/* Ombra leggera attorno al foglio */
.descrizione-birra-craft::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}


/* Testo “handwritten” */
.descrizione-birra-craft__content p {
  font-family: 'Lato', sans-serif;
  position: relative;
  font-style: italic;
  font-weight: 400;
  z-index: 3;
  color: #494949;
  font-size: clamp(0.85rem, 1.18vw, 1.28rem);
  line-height: 1.5;
  /*text-shadow: 0 1px 1px rgba(0,0,0,.15);*/
}

/* --- SCOTCH --- */
.decor-top,
.decor-bottom {
  position: absolute;
  width: 80px;
  height: 25px;
   opacity: 1;
  
  transform: rotate(-4deg);
  z-index: 3;
  
}

/* Scotch effetto carta */


/* Posizioni */
.decor-top {
  top: 5px;
    left: -28px;
    transform: rotate(-35deg);
}

.decor-bottom {
    bottom: 20px;
    right: -23px;
    transform: rotate(324deg);
}

/* Timbro luppolo */
.descrizione-birra-craft__decor-bottom {
 position: absolute;
   width: clamp(50px, 5vw, 100px);
    opacity: 0.8;
    mix-blend-mode: multiply;
    z-index: 2;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%);
    bottom: 25px;
}

/* MOBILE */
@media (max-width: 768px) {
    
    .contenitore-descrizione__birra{
        padding: 5%;
    }
   
/* Contenitore generale */
.descrizione-birra-craft {
        position: relative;
        display: flex;
        padding: 5% 10%;
        text-align: left;
        background: radial-gradient(circle, #feead5c4 20%, #feead5c4 10%, rgba(254, 234, 213, 0) 60%);
        align-items: center;
 
} 
/* Testo “handwritten” */
.descrizione-birra-craft__content p {
 
  line-height: 1.4;

}

    
/* Leggera texture di carta */
.descrizione-birra-craft::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://birralab24.com/wp-content/uploads/2025/12/transparent-Photoroom-6.webp') center/cover no-repeat;
  opacity: 0.85;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.descrizione-birra-craft__decor-bottom { bottom: 20px; opacity: 0.6;}

.decor-top, .decor-bottom {
    position: absolute;
    width: 55px;
    height: 20px;
    
}

.decor-top {
        top: 20px;
        left: -5px;
        transform: rotate(-35deg);
    }
.decor-bottom {
    bottom: 5px;
    right: -5px;
    transform: rotate(324deg);
}

}


/* ingredienti birra */

.ingredienti-birra {
  text-align: center;
  margin-top: 5rem;
}

.ingredienti-titolo {
  font-size: 2rem;
  font-weight: 700;
  color: #5d5d5d;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2rem;
  text-align: center;
}

.ingredienti-lista {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.ingrediente-item {
  background: #FAF7EF;
  border: 2px solid #c7a67d;
  padding: 1rem 1.5rem;
  border-radius: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;

  flex: 1 1 120px;
  max-width: 180px;
  min-width: 110px;

  transition: 
    transform 0.35s cubic-bezier(.25,.8,.25,1),
    box-shadow 0.35s ease;
  
  position: relative;
  z-index: 2;
  will-change: transform;
}

.ingrediente-item:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
.ingrediente-item:hover {
  border-color: #b89163;
}


.ingrediente-icona img {
  width: 40px;
  height: auto;
  margin-bottom: 0.5rem;

  transition: transform 0.35s cubic-bezier(.25,.8,.25,1);
}

.ingrediente-item:hover .ingrediente-icona img {
  transform: translateY(-6px);
}

.ingrediente-item p {
  text-transform: uppercase;
  color: #5d5d5d;
}


.freccia-onda svg{
    width: 30px;
    height: 25px;
    opacity: 0.8;
}



@media (max-width: 768px) {
    .container__ingredienti {
        max-width: 95%!important;
    }
    
    .ingredienti-titolo { 
        font-size: 1.3rem;
        letter-spacing: 0.5px;
    }
    
    
  .ingredienti-lista {
    gap: 0.3rem;
  }
 .freccia-onda {
    display: none !important;
  }

     .ingrediente-item {
        padding: 0.7rem 0.5rem;
        flex: 2 1 calc(25% - 0rem);
        max-width: calc(30% - 0rem);
        min-width: unset;
         border: 1px solid #c7a67d;
    }
    
      

  .ingrediente-icona img {
    width: 25px; /* icona più piccola */
  }

  .ingrediente-item p {
    font-size: 0.6rem;
    font-weight: 500;
    margin: 0!important;
  }
}



/* Partenza: testi fuori asse + invisibili */
.transition-section h3,
.transition-section .frase-emozionale3 {
  opacity: 0;
  will-change: transform, opacity;
}


.transition-section h3,.transition-sectionp p {
    color: #494949;
}

/* wrapper SVG centrato */
.freccia-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.freccia-wrapper svg {
  overflow: visible;
}


.frase-emozionale3 {
  font-family: 'Kalam',cursive;
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1.5;
  letter-spacing: 0.5px;
  font-weight: 300;
  transition: color 0.4s ease;
}

/* --- Contenitore principale --- */
.sezione-territorio {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  color: #F8F6F2;
  z-index: 2;
}

.territorio-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

/* --- Contenitore principale del blob --- */
.blob-territorio {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: clamp(1rem, 6vw, 5rem) clamp(1rem, 7vw, 6rem);
  text-align: center;
  z-index: 2;
  overflow: visible;
}

/* --- Blob dietro (alone) --- */
.blob-bg-dietro {
  position: absolute;
  inset: 0;
  /* leggermente più grande, così eccede visivamente */
  border-radius: 58% 42% 66% 34% / 36% 68% 32% 64%;
  /* forma più asimmetrica e distinta */
  background: radial-gradient(circle at 40% 60%,
      color-mix(in srgb, var(--colore-bordo, #67b294) 60%, rgba(255, 255, 255, 0.1)) 0%,
      color-mix(in srgb, var(--colore-bordo, #67b294) 40%, transparent) 50%,
      transparent 90%);
  transform: scale(1.05) rotate(3deg);
  filter: blur(12px);
  opacity: 0.8;
  z-index: 0;
  animation: blobBackMorph 10s ease-in-out infinite alternate;
}

/* --- Blob principale --- */
.blob-shape {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.55);
  border: 2px solid var(--colore-bordo, #67b294);
  border-radius: 28% 72% 53% 47% / 53% 31% 69% 47%;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  animation: blobMorph 12s ease-in-out infinite alternate;
  z-index: 1;
}



/* --- Animazione blob principale --- */
@keyframes blobMorph {
  0% {
    border-radius: 28% 72% 53% 47% / 53% 31% 69% 47%;
  }

  50% {
    border-radius: 35% 65% 45% 55% / 60% 40% 60% 40%;
  }

  100% {
    border-radius: 25% 75% 50% 50% / 55% 35% 65% 45%;
  }
}

@keyframes blobBackMorph {
  0% {
    border-radius: 58% 42% 66% 34% / 36% 68% 32% 64%;
    transform: scale(1.25) rotate(3deg);
  }

  50% {
    border-radius: 42% 58% 36% 64% / 68% 32% 66% 34%;
    transform: scale(1.3) rotate(-1deg);
  }

  100% {
    border-radius: 60% 40% 70% 30% / 40% 60% 35% 65%;
    transform: scale(1.25) rotate(3deg);
  }
}


.blob-content {
  position: relative;
  z-index: 2;
  color: #F8F6F2;
}


.blob-content {
  max-width: 90%;
  position: relative;
  z-index: 2;
  text-align: center;
}

.titolo-territorio {
  font-family: 'Oswald', serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: clamp(1rem, 2vw, 2rem);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.testo-territorio p {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  line-height: 1.75;
  font-size: clamp(0.8rem, 1.1vw, 1.15rem);
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: 1.2rem;
}

/* --- Bottone "Leggi di più" --- */
.btn-leggi {
  background: transparent;
  border: 2px solid var(--colore-bordo, #67b294);
  color: var(--colore-bordo, #67b294);
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  font-family: 'Lato', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-leggi:hover {
  background: var(--colore-bordo, #67b294);
  color: #fff;
}

/* --- Popup --- */
.popup-legame {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;                    /* 👉 sempre flex */
  align-items: center;
  justify-content: center;
  z-index: 999999999;
  padding: 2rem;

  opacity: 0;                       /* 👉 nascosto di default */
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.popup-legame.active {
  opacity: 1;                       /* 👉 visibile */
  pointer-events: auto;
}

/* --- Finestra interna --- */
.popup-inner {
  background: #F8F6F2;
  color: #393939;
  width: 90%;
  max-width: 850px;
  max-height: 85vh;
  overflow-y: none;

  padding: clamp(2rem, 5vw, 3rem);
  border-radius: 16px;
  position: relative;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.4);

  transform: scale(0.92) translateY(20px);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(.18,.89,.32,1.28),
    opacity 0.35s ease;
}

/* Titolo */
.popup-titolo {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
  text-align: center;
}

/* Testo */
.popup-testo p {
  font-family: 'Lato', sans-serif;
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* Stato visibile del contenuto */
.popup-legame.active .popup-inner {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Animazione chiusura */
.popup-legame.closing .popup-inner {
  transform: scale(0.95) translateY(10px);
  opacity: 0;
}


/* Close button */
.close-popup {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #111;
  transition: color 0.3s ease;
}

.close-popup:hover {
  color: var(--colore-bordo);
}

/* --- Immagine editoriale --- */
.popup-img {
  width: 260px;
  max-width: 40%;
  float: right;
  margin: 0 0 1.2rem 1.5rem;
  border-radius: 12px;
  shape-outside: rectangle(0,0,0,0);
  padding: 10px;
}

 img.popup-img {border-radius:25px}

/* --- Mobile --- */
@media (max-width: 768px) {
    
    
    .frase-emozionale3{
        padding: 0 8%;
    font-family: 'Kalam',cursive;
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.5px;
  font-weight: 300;
  transition: color 0.4s ease;
    }
    
    
    .testo-territorio p {
   line-height: 1.45;
 
}

.blob-territorio {
    min-height: 400px !important;
    max-width: 95%;
}
    
    .sezione-territorio{
        min-height: 100vh!important;
    }
    
    
  .popup-legame {
    padding: 1rem !important;
  }
  
  /* Titolo */
.popup-titolo {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
  text-align: center;
  width:90%;
  text-transform: uppercase;
}

  .popup-inner {
    width: 100%;
    max-height: 90vh;  /* 🔥 Su mobile più generoso */
    padding: 1.5rem;
    overflow-y: auto;
        display: flex;
    flex-direction: column;
    align-items:center;
}

  .popup-img {
    width: 100%;
    float: none;
    display: block;
    margin: 0 auto 1.5rem auto;
    max-width: 100%;
  }
}



/*------------PAGINA CHI SIAMO  ---------
------------------------*/

.chi-siamo-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 0;
  column-gap: 32px;
}


.chi-siamo-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: -1;
}

.hero-title-chiSiamo {
  font-family: "Playfair Display", "Pally Display", serif;
  line-height: 1.5;
  text-align: center;
  margin: 0 auto;
  color: #F7F6F2E3;
}

.hero-line-chiSiamo1 {
  font-size: clamp(1.3rem, 2vw + 0.5rem, 2.4rem);
  font-weight: 400;
  opacity: 1;
  display: inline-block;
}

.hero-line-chiSiamo2 {
  font-size: clamp(1.7rem, 3vw + 1rem, 3.6rem);
  font-weight: 700;
  display: inline-block;
}

.highlight-word {
  color: #f7f6f288;
  /* colore iniziale neutro */
  position: relative;
  display: inline-block;
  transition: color 0.6s ease;
}

.sottotitle-chiSiamo {
font-family: 'Kalam', cursive;
font-weight: 300;
font-size: 1.8rem;
  letter-spacing: 2px;
  opacity: 0;
  transform: translateX(-50px);
  display: block;
  position: relative;
}

.sottotitle-chiSiamo .text {
  position: relative;
  display: inline-block;
  /* serve per far seguire la linea alla lunghezza del testo */
}

.sottotitle-chiSiamo .underline {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background-color: #d4d800f1;
  transform-origin: left;
}


.container-svg svg {
  width: 100%;
  height: 100%;
}

/* solo il gruppo dei path riceve l’hover */
.sticker .sticker-shape {
  pointer-events: all;
  transition: transform 0.2s ease;
  transform-origin: center;
}

/* effetto hover */
.sticker .sticker-shape:hover {
  transform: translateY(-8px) rotate(-3deg) scale(1.15);
}


.sticker .sticker-shape:hover .sticker-highlight {
  filter: drop-shadow(0 0 40px rgb(134, 183, 159)) drop-shadow(0 0 40px rgba(134, 183, 159, 0.3));
  transition: filter 0.3s ease;
}

.sticker .sticker-shape:hover .sticker-highlight2 {
  filter: drop-shadow(0 0 40px rgb(24, 58, 132)) drop-shadow(0 0 40px rgba(134, 183, 159, 0.3));
  transition: filter 0.3s ease;
}

.sticker .sticker-shape:hover .sticker-highlight3 {
  filter: drop-shadow(0 0 40px rgb(255, 102, 6)) drop-shadow(0 0 40px rgba(134, 183, 159, 0.3));
  transition: filter 0.3s ease;
}



@media(max-width:768px){
    
    .chi-siamo-hero{
        min-height: 100vh!important;
    }
    .wrapper-svg{
        gap: 0px!important;
    }
    
    .sottotitle-chiSiamo {
  font-weight: 500;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateX(-50px);
  display: block;
  position: relative;
}
.hero-content-chiSiamo{
    max-width: 95%!important;
}
}




/*timeline*/
.timeline-container-group::before {
  content: "";
  position: absolute;
  inset: 0;
  /* copre tutto il blocco */
  background:
    linear-gradient(rgba(255, 255, 255, var(--carta-alpha)), rgba(255, 255, 255, var(--carta-alpha))),
    url('https://birralab24.com/wp-content/uploads/2025/10/2147960178-3.webp') center/cover no-repeat;
  z-index: -1;
  background-attachment: fixed;

  pointer-events: none;
}


.timeline-section {
  width: 100%;
  position: relative;
  padding: 10vh 0;

  overflow: hidden;
}

.timeline-container {
  position: relative;
  max-width: 90%;
  margin: 0 auto;
}

.timeline-line {
  position: absolute;
  top: 10%;
  left: 50%;
  width: auto;
  height: 90%;
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-line path {
  fill: none;
  stroke-width: 1px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.timeline-line svg,
.timeline-line path {
  height: 100%;
  width: auto;
}


.timeline-item {
  position: relative;
  width: 50%;
  margin: 10vh 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}



.timeline-item:nth-child(odd) {
  right: -50%;
  text-align: center
}

.timeline-item:nth-child(even) {
  left: 0;
  text-align: center;
}

.timeline-card {
  position: relative;
  /* 👈 serve per ancorare l’icona */
  background: #f2e7d5;
  display: inline-block;
  padding: 4em;
  border-radius: 30% 70% 58% 42% / 43% 57% 43% 57%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  max-width: 65%;
  transition: all 0.4s ease;
  overflow: visible;
}

.timeline-year {
  display: block;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.6rem;
  color: #3a3a3a;
  margin-bottom: 1.2rem;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
}

.timeline-icon {
  position: absolute;
  width: 65px;
  height: 65px;
  top: -25px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  /* completamente nascosta a destra */
  transition: clip-path 0.8s ease-out, opacity 0.8s ease-out;
}

.timeline-item:nth-child(odd) .timeline-icon {
  left: -25px;
  /* icona a destra */
}

.timeline-item:nth-child(even) .timeline-icon { 
  right: -25px;
  /* icona a sinistra */
}

/* lo stato "visibile" che GSAP applicherà */
.timeline-icon.visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  /* rivelata */
}


@media (max-width: 1190px) and (min-width: 769px) {
      /* Card full-width e più grandi */
  .timeline-card {
    max-width: 90%;
    padding: 4.5em 2em;
}

.frase-emozionale {
  font-size: clamp(1.2rem, 3vw + 0.5rem, 2.2rem);
  opacity: 0;
  line-height: 1.5;
  transform: translateY(50px);
  transition: color 0.4s ease;
}
    
}

/* ============================
   📱 VERSIONE MOBILE TIMELINE
   ============================ */
@media screen and (max-width: 768px) {
    
    
  /* Container più stretto */
  .timeline-container {
    max-width: 95%;
      display: flex;
        flex-direction: column;
        gap: 100px;
  }

  /* Gli item diventano centrati e full-width */
  .timeline-item {
    width: 100%;
    margin: 8vh 0;
    right: 0 !important;
    left: 0 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Rimuove alternanza dx/sx */
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    left: 0 !important;
    right: 0 !important;
    text-align: center;
  }

  /* Card full-width e più grandi */
  .timeline-card {
    max-width: 90%;
    padding: 4.5em 2em;
}

  /* Titolo anno centrato e più grande */
  .timeline-year {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  
  .timeline-item:nth-child(odd) .timeline-icon {
  left: 25px;
  /* icona a destra */
}

.timeline-item:nth-child(even) .timeline-icon {
  right: 25px;
  /* icona a sinistra */
}

.timeline-icon {
  position: absolute;
  width: 45px;
  height: 45px;
  top: -25px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  /* completamente nascosta a destra */
  transition: clip-path 0.8s ease-out, opacity 0.8s ease-out;
}

  }


/* processo prduttivo */

.frase-emozionale {
    font-family: 'Kalam', cursive;
font-weight: 400;
 font-size: clamp(1.3rem, 2vw + 0.5rem, 2.2rem);
  opacity: 0;
  line-height: 1.5;
  transform: translateY(50px);
  transition: color 0.4s ease;
}

.frase-emozionale .parola {
  color: inherit;
  /* eredita il colore di base */
  transition: color 0.4s ease;
}

.frase-emozionale .highlight {
  color: #d3d800;
  /* colore birra */
}



.processo-produttivo {
  display: flex;
  justify-content: center;
  padding: 100px 0px;
}

.processo-prod-conteiner {
  position: relative;
}

.img-firma {
  position: fixed;
  bottom: 40px;
  right: 5%;
  width: 100px;
  height: auto;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: -1;
}

.img-firma.is-active {
  opacity: 0.4;
  transform: translateY(0);
}


.processo-prod-conteiner::before {
  content: "";
  position: absolute;
  inset: 0;
  /* copre tutto il blocco */
  background:
    linear-gradient(rgba(255, 255, 255, var(--carta-alpha)), rgba(255, 255, 255, var(--carta-alpha2))),
    url('https://birralab24.com/wp-content/uploads/2025/12/419-2.webp') center/cover no-repeat;
  z-index: -1;
  background-attachment: fixed;

  pointer-events: none;

}




.container {
  display: flex;
  gap: 80px;
  max-width: 100%;
  width: 100%;
  padding: 0 10%;
}


.colonna-sinistra {
  position: sticky;
  top: 100px;
  /* regola per offset da header */
  width: 50%;
  height: 600px;
}

.immagini {
  position: relative;
  width: 100%;
  height: 100%;
}

.img-step {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
 /* clip-path: inset(100% 0 0 0);*/
  opacity: 0;
  will-change: transform, clip-path, opacity;
}



.colonna-destra {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.step {
  display: flex;
  height: 600px;
  width: 90%;
  flex-direction: column;
  justify-content: center;
}

.step[data-step] {
  font-size: 2.5rem;
}

.step h3 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.step p {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8rem;
}


@media (max-width:1190px) and (min-width:769px) {
    
    .container {
        padding:0 2%;
        gap: 30px;
        padding-bottom: 50px!important;
    
    }
}

/* =====================================
   📱 MOBILE VERSION (max-width: 768px)
   ===================================== */
@media screen and (max-width: 768px) {
    .img-firma.is-active {
 display: none;
}
    
.img-firma {
  position: fixed;
  bottom: 20px;
  left: 5%;
  width: 80px;
  height: auto;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: -1;
}   

  .processo-produttivo {
    padding: 0;
  }

  .container {
    flex-direction: column;
    gap: 40px;
    padding: 0px 0px 50px 0px;
    justify-content:center;
    align-items: center;
  }

  /* 🔥 Le immagini vanno sopra e diventano sticky */
  .colonna-sinistra {
    position: sticky;
    top: 5px; /* regolabile */
    width: 95%;
    height: 35vh; /* altezza più mobile-friendly */
    order: 1;
    z-index: 5;
    
  }
  
  .colonna-sinistra::before {
  content: "";
  position: absolute;
  border-radius: 12px;
  inset: 0;
  /* copre tutto il blocco */
  background:
    linear-gradient(rgba(255, 255, 255, var(--carta-alpha)), rgba(255, 255, 255, var(--carta-alpha2))),
    url('https://birralab24.com/wp-content/uploads/2025/10/101808.webp') center/cover no-repeat;
  z-index: -1;
  background-attachment: fixed;

  pointer-events: none;

}
  

  .immagini {
      
 height: 35vh;
  }

  .img-step {
    border-radius: 12px;
  }

  /* 📄 La colonna del testo va sotto */
  .colonna-destra {
    width: 90%;
    order: 2;
    align-items: flex-start; /* leggibilità migliore */
  }

  /* Ogni step diventa più compatto */
  .step {
    height: auto;      /* non più vincolato a 600px */
    min-height: 300px;
    width: 100%;
    margin-bottom: 50px;
    justify-content: flex-start;
  }

  .step h3 {
    font-size: 1.2rem;
  }

  .step p {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.2px;
    font-size: 0.9rem;
    line-height: 1.4rem;
  }
}
/* Numero elegante cerchiato */
.step-num {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 95px;
  height: 65px;

  margin: 0 auto 35px auto;

  font-family: "Playfair Display", serif;
  font-size: 2rem;
  font-weight: 600;
  font-style: italic;
  color: #6a4d2f;

  background: #f9f5ee;
  border: 2px solid #c7a67d;
  border-radius: 50%;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.12),
    inset 0 0 8px rgba(0,0,0,0.06);
}

/* Chiodino sopra il cerchio */
.step-num::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);

  width: 12px;
  height: 12px;
  background: #bba58c;
  border-radius: 50%;
  box-shadow:
    inset 0 0 2px rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.25);
}

/* Piccola puntina/ombra come se fosse incastonato */
.step-num::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);

  width: 2px;
  height: 8px;
  background: #8a7763;
  border-radius: 1px;
}




/* birrificio */


.sezione-birrificio {
  position: relative;
  z-index: 0;
}

.sezione-birrificio::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: -1;
}

.content-birrificio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  gap: 32px;
}


.frase-emozionale2 {
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1.5;
  letter-spacing: 0.5px;
  font-weight: 300;
  transition: color 0.4s ease;
}

@media screen and (max-width: 768px) {
    .content-birrificio{
        max-width: 90%!important;
    }
    .territorio-sottotitle{
        font-size:0.9rem!important;
    }
    
    .step-num {
width: 65px;
  height: 50px;
  margin: 0 auto 25px auto;
font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  
}
}



/*--------------------
---------------PAGINA TERRITORIO-------------*/
.hero-territorio {
  position: relative;
  z-index: 0;
}

.hero-territorio>* {
  z-index: 1;
}

.hero-territorio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.8) 0%,
      /* nero al centro */
      rgb(0 0 0 / 75%) 25%,
      /* leggero fade */
      rgb(0 0 0 / 50%) 55%, rgb(0 0 0 / 20%) 100%);
  pointer-events: none;
  z-index: -1;
}

.territorio-sottotitle {
  font-family: 'Kalam', cursive;
font-weight: 300;
font-style: italic;
  font-size: 1.8rem;
  text-transform: uppercase;
  line-height: 160%;

}

.scroll-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px;
  height: 160px;
  justify-content: center;
}

.mouse {
  width: 28px;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: start;
  overflow: hidden;
}

.wheel {
  width: 4px;
  height: 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  margin-top: 8px;
  animation: scrollWheel 1.5s ease-in-out infinite;
}

@keyframes scrollWheel {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  80% {
    transform: translateY(12px);
    opacity: 0;
  }

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


.glass-btn {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  position: relative;
  text-transform: uppercase;
  padding: 20px 40px;
  color: #F7F6F2E3;
  font-size: 1.2rem;
  font-weight: 400;
  background: rgba(0, 0, 0, 0.195);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  /* rilievo */
}

/* effetto luce/hover */
.glass-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  opacity: 0.4;
  pointer-events: none;
}

/* hover */
.glass-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}


.linea-territorio {
  text-align: center;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.linea-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
   margin-bottom: 40px;
}

.linea-centrale {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.linea-centrale .linea {
  display: inline-block;
  width: 400px;
  height: 2px;
  background-color: #d3d800;
  /* colore della linea */
}

.icona-centro {
  width: 60px;
  height: auto;
}

.pennellata {
  position: absolute;
  width: 500px;
  opacity: 0;
  will-change: transform, opacity;
}

.pennellata.sx {
  top: 20%;
  left: -100px;
  /* parte nascosta fuori dal viewport */
}

.pennellata.dx {
  bottom: 10%;
  right: -300px;
}

.testo {
    font-family: 'Kalam', cursive;
font-weight: 400;
font-size: 1.6rem;
  line-height: 1.8;
 font-style: italic;
  max-width: 800px;
  margin: 0 auto;
}

.scroll-writing .word {
  opacity: 0.08;
  transform: translateY(0.4em);
}




@media (max-width: 768px) {
    .hero-territorio{
        min-height: 80vh!important;
    }
    
    .testo {
font-family: 'Kalam', cursive;
font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 90%!important;
  margin: 0 auto;
}
    
    .linea-territorio{
        
        padding:0px!important;
    }
    
    .pennellata {
  position: absolute;
  width: 300px;
  opacity: 0;
  will-change: transform, opacity;
}
    
    
    .pennellata.sx {
  top: 5%;
  left: -100px;
  /* parte nascosta fuori dal viewport */
}

.pennellata.dx {
  bottom: 0%;
  right: -200px;
}
    
}





/*birre griglia*/

.birre-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 70vh);
  min-height: 100vh;
  gap:2px;
  
  /* 👈 piccolo spazio tra le card */

}

.birra-card {
 position: relative;
  background: var(--bg) center/cover no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
   transform-origin: left top;
    /* tuo CSS già presente... */
  will-change: clip-path;
  /* stato iniziale: card completamente “chiusa” dall’alto */
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}



.birra-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  z-index: 0;
  pointer-events: none;
}


/* hover: gradient più intenso */
.birra-card:hover::before {
  background:
    radial-gradient(circle at center,
      rgba(0, 0, 0, 0.8) 0%,
      /* più scuro al centro */
      rgba(0, 0, 0, 0.25) 70%,
      /* bordi leggermente più scuri */
      rgba(0, 0, 0, 0.05) 100%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.6));
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
   opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.bottiglia {
  width: auto;
  height: 200px;
  transition: transform 0.4s ease;
}


/* luce di base */
.bottiglia::after {
  content: "";
  position: absolute;
  bottom: -8px;
  /* distanza dal fondo */
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 20px;
  background: radial-gradient(ellipse at center,
      rgba(255, 200, 100, 0.6) 0%,
      /* colore luce al centro */
      rgba(255, 200, 100, 0.15) 50%,
      /* sfumatura */
      transparent 100%);
  filter: blur(6px);
  opacity: 0.8;
  pointer-events: none;
  transition: all 0.4s ease;
}

/* hover — luce più intensa */
.birra-card:hover .bottiglia::after {
  opacity: 1;
  transform: translateX(-50%) scale(1.2);
  filter: blur(8px);
}

.birre-section h3 {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.birre-section p {
font-family: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.2rem;
  font-style: italic;
  letter-spacing: 0.5px;
  font-weight: 400;
  color: #F7F6F2E3;
}

.btn {
  background: #1f8c64;
  color: #F7F6F2E3;
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.birra-card:hover .bottiglia {
  transform: translateY(-10px);
}

@media (max-width: 900px) {
  .birre-section {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 60vh);
  }
}





/*-----------PAGINA CONTATTI -----------
-----------*/


.contatti-hero {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.contatti-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: -1;
}

.content-contatti {
    display: flex;
    flex-direction: row;
    gap: 60px !important;
    
}

.contact-item {
    padding: 5% 0;
}


.contact-item .icon,
.contact-item .text {
  transition: transform 0.25s ease, color 0.25s ease;
}



.contact-item a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.contact-item .icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
}

.contact-item svg {
  width: 100%;
  height: 100%;
  transition: transform 0.35s ease;
 }

.contact-item:hover {
  color: #0d438c;
}


.contact-item:hover .text {
  transform: translateY(-2px) scale(1.03);
}

.contact-item:hover .icon {
  transform: translateY(-2px);
}

.contact-item:hover svg {
  transform: rotate(-8deg) scale(1.1);
}












/* ONDE DIVISORI PAGINE*/

.hero-wave3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 130px;
  background-image: url('https://birralab24.com/wp-content/uploads/2025/11/wave-clean.svg'); /* la nuova */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.hero-wave3_sfondo1 {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 130px;

  /* texture carta dentro l’onda */
  background:
    linear-gradient(rgba(255, 255, 255, var(--carta-alpha)), rgba(255, 255, 255, var(--carta-alpha))),
    url('https://birralab24.com/wp-content/uploads/2025/10/2147960178-3.webp') center/cover no-repeat;

  /* maschera dell’onda */
  -webkit-mask-image: url('https://birralab24.com/wp-content/uploads/2025/11/wave-clean.svg');
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
  -webkit-mask-size: cover;
  mask-image: url('https://birralab24.com/wp-content/uploads/2025/11/wave-clean.svg');
  mask-repeat: repeat-x;
  mask-position: bottom;
  mask-size: contain;

  /* leggero glow verso la sezione sotto */
  box-shadow: 0 -40px 50px rgba(248, 246, 241, 0.8);
  z-index: 2;
}

.hero-wave3_sfondo2 {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 130px;

  /* texture carta dentro l’onda */
  background:
    linear-gradient(rgba(255, 255, 255, 0.537), rgba(255, 255, 255, 0.438)),
    url('https://birralab24.com/wp-content/uploads/2025/12/419-2.webp') top/cover no-repeat;

  /* maschera dell’onda */
  -webkit-mask-image: url('https://birralab24.com/wp-content/uploads/2025/11/wave-clean.svg');
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
  -webkit-mask-size: cover;
  mask-image: url('https://birralab24.com/wp-content/uploads/2025/11/wave-clean.svg');
  mask-repeat: repeat-x;
  mask-position: bottom;
  mask-size: contain;

  /* leggero glow verso la sezione sotto */
  box-shadow: 0 -40px 50px rgba(248, 246, 241, 0.8);
  z-index: 2;
}


@media (max-width: 768px) {
    
    .hero-wave3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-image: url('https://birralab24.com/wp-content/uploads/2025/11/wave-clean.svg'); /* la nuova */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.hero-wave3_sfondo1 {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 70px;

  /* texture carta dentro l’onda */
  background:
    linear-gradient(rgba(255, 255, 255, var(--carta-alpha)), rgba(255, 255, 255, var(--carta-alpha))),
    url('https://birralab24.com/wp-content/uploads/2025/10/2147960178-3.webp') center/cover no-repeat;

  /* maschera dell’onda */
  -webkit-mask-image: url('https://birralab24.com/wp-content/uploads/2025/11/wave-clean.svg');
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
  -webkit-mask-size: cover;
  mask-image: url('https://birralab24.com/wp-content/uploads/2025/11/wave-clean.svg');
  mask-repeat: repeat-x;
  mask-position: bottom;
  mask-size: contain;

  /* leggero glow verso la sezione sotto */
  box-shadow: 0 -40px 50px rgba(248, 246, 241, 0.8);
  z-index: 2;
}

.hero-wave3_sfondo2 {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 70px;

  /* texture carta dentro l’onda */
  background:
    linear-gradient(rgba(255, 255, 255, 0.537), rgba(255, 255, 255, 0.438)),
    url('https://birralab24.com/wp-content/uploads/2025/12/419-2.webp') center/cover no-repeat;

  /* maschera dell’onda */
  -webkit-mask-image: url('https://birralab24.com/wp-content/uploads/2025/11/wave-clean.svg');
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom;
  -webkit-mask-size: cover;
  mask-image: url('https://birralab24.com/wp-content/uploads/2025/11/wave-clean.svg');
  mask-repeat: repeat-x;
  mask-position: bottom;
  mask-size: contain;

  /* leggero glow verso la sezione sotto */
  box-shadow: 0 -40px 50px rgba(248, 246, 241, 0.8);
  z-index: 2;
}
    

}