:root {
   --hg2-linear-gradient: linear-gradient(90deg, #d0d500 0%, #47aa29 40%, #20a1f5 100%);

   --hg2-ctp: #1d1d1d;
   --hg2-cts: #333333;
   --hg2-green: #5e7746;
   --hg2-c-grey: #677580;
   --hg2-c-light-grey: #e5e5e5;
   --hg2-c-light-blue: #e1edf6;

   /* Swiper - Material You effect (see dist/js/swiper-effect-material.js) */
   --swiper-material-scale: 1;
   --swiper-material-slide-size: 100%;
   --swiper-material-slide-border-radius: 2.5rem;
}

main#content {
   overflow: hidden;
}

/* Spacing */
.hg2-mb-160 {
   margin-bottom: 5rem;
   @media screen and (min-width: 768px) {
      & {
         margin-bottom: 7.5rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         margin-bottom: 10rem;
      }
   }
}

.hg2-pt-80 {
   padding-top: 3rem;
   @media screen and (min-width: 768px) {
      & {
         padding-top: 4rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         padding-top: 5rem;
      }
   }
}
.hg2-pb-80 {
   padding-bottom: 3rem;
   @media screen and (min-width: 768px) {
      & {
         padding-bottom: 4rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         padding-bottom: 5rem;
      }
   }
}

.hg2-pt-120 {
   padding-top: 3.5rem;
   @media screen and (min-width: 768px) {
      & {
         padding-top: 6rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         padding-top: 7.5rem;
      }
   }
}
.hg2-pb-120 {
   padding-bottom: 3.5rem;
   @media screen and (min-width: 768px) {
      & {
         padding-bottom: 6rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         padding-bottom: 7.5rem;
      }
   }
}

.hg2-container-section {
   padding-inline: 0.75rem;
   @media screen and (min-width: 576px) {
      & {
         padding-inline: 2rem;
      }
   }
   @media screen and (min-width: 768px) {
      & {
         padding-inline: 3rem;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         padding-inline: 4rem;
         max-width: calc(1576px + 8rem);
         margin-inline: auto;
      }
   }
}

/* Typography */
.hg2-type-h1 {
   margin-bottom: 0;
   text-transform: none;
   font-size: 2.5rem;
   font-weight: 600;
   line-height: 110%;
   color: var(--hg2-green);
   text-wrap: balance;
   @media screen and (min-width: 768px) {
      & {
         font-size: 3.25rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         font-size: 4rem;
      }
   }
}

.hg2-type-body {
   margin-bottom: 0;
   font-size: 1rem;
   line-height: 150%;
   color: var(--hg2-cts);
   @media screen and (min-width: 768px) {
      & {
         font-size: 1.125rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         font-size: 1.25rem;
      }
   }
}

.hg2-type-h1 + .hg2-type-body {
   margin-top: 1rem;
   @media screen and (min-width: 768px) {
      & {
         margin-top: 1.25rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         margin-top: 1.5rem;
      }
   }
}

.hg2-type-gradient {
   background: var(--hg2-linear-gradient, #20a1f5);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
.hg2-type-gradient-fit {
   width: fit-content;
}
.hg2-type-gradient-fit-and-center {
   width: fit-content;
   margin-inline: auto;
}

/* bundle.js rewrites .number into sliding digit columns
   (.number-sliding > .nu > .nu-inner) and animates .nu-inner with a transform.
   A transformed descendant paints in its own layer, so its glyphs never reach
   the parent's background-clip:text mask: the gradient above would clip to
   nothing while -webkit-text-fill-color:transparent still inherits down, and
   the number turns invisible. So drop the parent's background (its leftover
   partial mask paints outside the .nu overflow clip) and re-apply the gradient
   on each column instead — hg2.js sets --hg2-nu-width to the full number width
   and --hg2-nu-offset to the column's x offset, so the gradient stays
   continuous across the digits. */
.hg2-type-gradient:has(.number-sliding) {
   background: none;
}
.hg2-type-gradient .number-sliding .nu-inner {
   background: var(--hg2-linear-gradient, #20a1f5);
   background-repeat: no-repeat;
   background-size: var(--hg2-nu-width, 100%) 100%;
   background-position: var(--hg2-nu-offset, 0px) 0;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.hg2-type-grey {
   color: #677580;
}

.hg2-type-green {
   color: #5e7746;
}

.hg2-type-cts {
   color: var(--hg2-cts);
}

.txt-head-center {
   text-align: center;
   margin-inline: auto;
}
.txt-head-center .hg2-type-body {
   margin-inline: auto;
}

/* Button */
.hg2-gradient-btn {
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   white-space: nowrap;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
   font-weight: 500;
   line-height: 100%;
   border-radius: 100vh;
   transition: all 0.2s ease-out;
   background: var(--hg2-linear-gradient, #20a1f5);
   color: #fff;
   box-shadow:
      0 4px 16px -8px rgba(0, 0, 0, 0.24),
      0 2px 4px 0 rgba(255, 255, 255, 0.32) inset;
   border: 0;
}
.hg2-gradient-btn:hover {
   opacity: 0.8;
   box-shadow: 0;
   color: #fff;
   transform: translateY(1px);
}

/* Helpers */
.hg2-bg-white {
   background-color: #fff;
   color: var(--hg2-cts);
}
.hg2-b-light-grey {
   border: 1px solid var(--hg2-c-light-grey);
}
.hg2-b-rounded-40 {
   border-radius: 1.5rem;
   @media screen and (min-width: 768px) {
      & {
         border-radius: 2rem;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         border-radius: 2.5rem;
      }
   }
}

/* Swiper pagination */
.swiper-pagination.hg2-swiper-pagination {
   position: static;
   width: auto;
   text-align: left;
}
.swiper-pagination.hg2-swiper-pagination .swiper-pagination-bullet {
   background: var(--hg2-c-light-grey);
   width: 1.5rem;
   height: 2px;
   border-radius: 2px;
   opacity: 1;
   transition: all 0.4s ease-out;
   @media screen and (min-width: 768px) {
      & {
         width: 2rem;
      }
   }
}
.swiper-pagination.hg2-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
   background: var(--hg2-c-grey);
   width: 2.5rem;
   @media screen and (min-width: 768px) {
      & {
         width: 3rem;
      }
   }
}

/* Swiper navigation */
.hg2-swiper-nav .swiper-button-prev,
.hg2-swiper-nav .swiper-button-next {
   position: static;
   margin: 0;
   width: 2.5rem;
   height: 2.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--hg2-c-light-grey);
   border-radius: 50%;
   color: #9e9da1;
   background: var(--bs-body-bg, #fff);
   transition: background-color 0.3s ease-out;
}
.hg2-swiper-nav .swiper-button-prev::after,
.hg2-swiper-nav .swiper-button-next::after {
   content: none;
}
.hg2-swiper-nav .swiper-button-prev svg,
.hg2-swiper-nav .swiper-button-next svg {
   display: block;
   width: 1.5rem;
   height: 1.5rem;
}
.hg2-swiper-nav .swiper-button-prev:hover,
.hg2-swiper-nav .swiper-button-next:hover {
   background-color: #f1f1f1;
}
.hg2-swiper-nav .swiper-button-disabled {
   opacity: 0.5;
}

/* WPForms */
div.wpforms-container-full .wpforms-form button[type="submit"] {
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   white-space: nowrap;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 2rem !important;
   font-size: 1rem !important;
   font-weight: 500;
   line-height: 100%;
   border-radius: 100vh;
   transition: all 0.2s ease-out;
   background: var(--hg2-linear-gradient, #20a1f5);
   color: #fff !important;
   box-shadow:
      0 4px 16px -8px rgba(0, 0, 0, 0.24),
      0 2px 4px 0 rgba(255, 255, 255, 0.32) inset;
   border: 0 !important;
}
div.wpforms-container-full .wpforms-form button[type="submit"]:hover {
   opacity: 0.8;
   box-shadow: 0;
   color: #fff;
   transform: translateY(1px);
}
/* Form-info.twig partial */
.info-request {
   padding-top: 4rem;
   padding-bottom: 2.5rem;
   margin-bottom: calc(var(--step) * -1);
   @media screen and (min-width: 1600px) {
      & {
         margin-bottom: calc((var(--step) * -1) - 1rem);
      }
   }
}
.info-request div.wpforms-container-full .wpforms-form .wpforms-field-description.wpforms-disclaimer-description {
   background-color: transparent;
   border: 0;
   overflow: hidden;
   height: auto;
   margin-top: 0.125rem;
   padding-left: 0;
}

/* Navbar
------------------------------------------------------------ */
/* Mobile */
#main-menu button.btn.search-mobile,
#main-menu .lang-switch button.btn.dropdown-toggle {
   width: 2.5rem;
   height: 2.5rem;
   margin-bottom: 0 !important;
}
#main-menu button.btn.search-mobile,
#main-menu .lang-switch button.btn.dropdown-toggle,
#main-menu .lang-switch .dropdown-menu {
   border-radius: 0.5rem !important;
   border-color: var(--hg2-c-light-grey) !important;
   color: var(--hg2-cts);
}
#main-menu button.btn.search-mobile:hover,
#main-menu button.btn.search-mobile:focus,
#main-menu button.btn.search-mobile.show,
#main-menu .lang-switch button.btn.dropdown-toggle:hover,
#main-menu .lang-switch button.btn.dropdown-toggle:active,
#main-menu .lang-switch button.btn.dropdown-toggle:focus,
#main-menu .lang-switch button.btn.dropdown-toggle.show,
#main-menu .lang-switch button.btn.dropdown-toggle.show:focus {
   background-color: #f1f1f1;
   box-shadow: none;
}

#main-menu button.btn.search-mobile + .dropdown-menu {
   margin: 0;
   border-radius: 0;
   border: 0;
}
#main-menu .search-form .input-group .topbar-search {
   border-radius: 0.5rem;
   border: 1px solid var(--hg2-c-light-grey);
   color: var(--hg2-cts);
   height: 2rem;
   padding-inline: 0.75rem;
   margin-top: 0.5rem;
}

.main-nav-mobile .social-icons {
   margin-left: 1rem;
}

/* Desktop */
#top-bar .social-icons {
   display: flex;
   align-items: center;
   gap: 1rem;
}
#top-bar .social-icons a {
   font-size: 1.25rem;
}

#top-bar .contacts a {
   margin-right: 0.75rem;
}

#top-bar .tb-link {
   color: #6c6c6c;
}
#top-bar .tb-link:hover {
   color: #535353;
}

#top-bar form .input-group .topbar-search {
   border-radius: 0.5rem 0 0 0.5rem;
   border: 1px solid var(--hg2-c-light-grey);
   color: var(--hg2-cts);
}
#top-bar form .input-group #search-btn {
   border-radius: 0 0.5rem 0.5rem 0;
   border: 1px solid var(--hg2-c-light-grey);
   color: var(--hg2-cts);
   background-color: #fff;
}
#top-bar form .input-group #search-btn:hover,
#top-bar form .input-group #search-btn:focus {
   background-color: #f1f1f1;
   box-shadow: none;
}

#top-bar .lang-switch .dropdown .dropdown-toggle {
   border-radius: 0.5rem;
   border-color: var(--hg2-c-light-grey);
   color: var(--hg2-cts);
   background-color: #fff;
   padding-inline: 0.625rem;
}
#top-bar .lang-switch .dropdown .dropdown-menu {
   border-radius: 0.5rem !important;
   border-color: var(--hg2-c-light-grey);
   color: var(--hg2-cts);
}
#top-bar .lang-switch .dropdown .dropdown-toggle:hover,
#top-bar .lang-switch .dropdown .dropdown-toggle:active,
#top-bar .lang-switch .dropdown .dropdown-toggle:focus,
#top-bar .lang-switch .dropdown .dropdown-toggle.show,
#top-bar .lang-switch .dropdown .dropdown-toggle.show:focus {
   background-color: #f1f1f1;
   box-shadow: none;
}

#main-menu .navbar-nav.navbar-right .nav-item .contattaci:after {
   display: none !important;
}
#main-menu .navbar-nav.navbar-right .nav-item .contattaci {
   padding: 0.75rem 2rem;
   border-radius: 100vh;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   white-space: nowrap;
   font-size: 1rem;
   font-weight: 500;
   line-height: 100%;
   transition: all 0.2s ease-out;
   box-shadow:
      0 4px 16px -8px rgba(0, 0, 0, 0.24),
      0 2px 4px 0 rgba(255, 255, 255, 0.32) inset;
}
#main-menu .navbar-nav.navbar-right .nav-item .contattaci:hover {
   opacity: 0.8;
   box-shadow: 0;
   color: #fff;
   transform: translateY(1px);
}

/* Desktop Menu dropdown submenus */
nav#main-menu .sub {
   padding-block: 1.5rem;
}
nav#main-menu .sub.mission .date {
   @media screen and (min-width: 1200px) {
      & {
         color: #2da7fe;
      }
   }
}
nav#main-menu .sub.mission a.nav-link.sub-link:hover .name {
   @media screen and (min-width: 1200px) {
      & {
         color: var(--hg2-ctp);
      }
   }
}
nav#main-menu .sub.referenze a.nav-link.sub-link .menu-category {
   @media screen and (min-width: 1200px) {
      & {
         color: #2da7fe;
      }
   }
}

/* Mobile fixed bottom bar */
.fixed-cta-mobile .hg2-gradient-btn {
   text-align: center;
   justify-content: center;
}
/* Desktop fixed sidebar */
#contactsSidebar .cselem.cselem-big {
   background-color: #fff;
   border: 1px solid var(--hg2-c-light-grey);
   border-radius: 0.5rem 0 0 0.5rem;
   width: 14.5rem;
   transform: translateX(calc(14.5rem - 50px));
}
#contactsSidebar .cselem.cselem-big a {
   text-decoration: none;
}
#contactsSidebar .cselem.cselem-big .csicon {
   background: var(--hg2-linear-gradient, #20a1f5);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 1.5rem;
}
#contactsSidebar .cselem.cselem-big .cstext {
   color: var(--hg2-cts) !important;
}

/* Footer
------------------------------------------------------------ */
.back-to-top {
   background: var(--hg2-linear-gradient, #20a1f5);
   color: #fff;
   transition: all 0.2s ease-out;
   box-shadow:
      0 4px 16px -8px rgba(0, 0, 0, 0.24),
      0 2px 4px 0 rgba(255, 255, 255, 0.32) inset;
   border: 0;
}
.back-to-top:hover {
   border: 0;
   opacity: 0.8;
   transform: translateY(1px);
}

footer#footer {
   border-top: 0 !important;
   margin-top: 4px;
   position: relative;
}
footer#footer:before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -4px;
   height: 4px;
   background: var(--hg2-linear-gradient, #4f8523);
}

footer#footer .nav-link:hover,
footer#footer .footer-policies a:hover {
   opacity: 0.8;
}

/* Home - Hero 
------------------------------------------------------------ */
.hg2-home-hero {
   position: relative;
   /* Di quanto l'albero decorativo scende sotto la sezione: 0 di base, tutto il
      margin-bottom quando la sezione porta .hg2-mb-160 (vedi sotto). */
   --hg2-hero-bleed: 0rem;
   /* .swiper-material sborda lateralmente sotto i 576px, quindi l'asse X va
      comunque ritagliato: `clip` invece di `hidden` perche' non forza l'asse Y
      a diventare scrollabile e lascia quindi passare lo sbordo dell'albero. Il
      taglio verticale (in alto) lo fa la clip-path, aperta sul solo lato
      inferiore per --hg2-hero-bleed. */
   overflow-x: clip;
   overflow-y: visible;
   clip-path: inset(0 0 calc(-1 * var(--hg2-hero-bleed)) 0);
}
@supports not (overflow-x: clip) {
   /* Safari < 16: niente sbordo, si torna al ritaglio secco della sezione. */
   .hg2-home-hero {
      overflow: hidden;
      clip-path: none;
   }
}

.hg2-home-hero.hg2-mb-160,
.hg2-home-proj.hg2-mb-160 {
   --hg2-hero-bleed: 5rem;
   @media screen and (min-width: 768px) {
      & {
         --hg2-hero-bleed: 7.5rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         --hg2-hero-bleed: 10rem;
      }
   }
}
.hg2-home-hero .hg2-hero-tree {
   position: absolute;
   right: 0;
   bottom: calc(-1 * var(--hg2-hero-bleed, 0rem));
   z-index: 0;
   display: block;
   width: 60vw;
   height: auto;
   aspect-ratio: 766 / 848;
   pointer-events: none;
   @media screen and (min-width: 768px) {
      & {
         width: 30rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         width: 47.875rem;
      }
   }
}
.hg2-home-hero > .container {
   position: relative;
   z-index: 1;
}
.hg2-home-hero .txt-head {
   margin-top: 2rem;
   @media screen and (min-width: 768px) {
      & {
         margin-top: 3rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         margin-top: 4rem;
      }
   }
   @media screen and (min-width: 1200px) and (max-height: 960px) {
      & {
         margin-top: 3rem;
      }
   }
}

.hg2-home-hero .swiper-material {
   margin-top: 2rem;
   @media screen and (min-width: 1200px) {
      & {
         margin-top: 2.5rem;
      }
   }
}

.hg2-home-hero .txt-head {
   max-width: 50rem;
   @media screen and (min-width: 1200px) and (max-height: 960px) {
      & {
         max-width: none;
      }
   }
}
.hg2-home-hero .txt-head .hg2-type-h1 {
   @media screen and (min-width: 1200px) and (max-height: 960px) {
      & {
         font-size: 3rem;
      }
   }
}
.hg2-home-hero .txt-head .hg2-type-body {
   max-width: 40rem;
   color: var(--hg2-cts);
   text-wrap: balance;
   @media screen and (min-width: 1200px) and (max-height: 960px) {
      & {
         max-width: none;
         margin-top: 0.75rem;
      }
   }
}

/* Swiper Material U */
.swiper-material {
   height: 26.25rem;
   overflow: hidden;
   @media screen and (max-width: 576px) {
      & {
         overflow: visible;
      }
   }
   @media screen and (min-width: 768px) {
      & {
         height: 30rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         height: 35rem;
      }
   }
   @media screen and (min-width: 1200px) and (max-height: 1080px) {
      & {
         height: 32.5rem;
      }
   }
   @media screen and (min-width: 1200px) and (max-height: 1020px) {
      & {
         height: 30rem;
      }
   }
   @media screen and (min-width: 1200px) and (max-height: 820px) {
      & {
         height: 27.5rem;
      }
   }
   @media screen and (min-width: 1200px) and (max-height: 720px) {
      & {
         height: 25rem;
      }
   }
}

.swiper-material-wrapper {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   border-radius: var(--swiper-material-slide-border-radius);
   overflow: hidden;
   pointer-events: auto;
}

/* Fixed-size content: stays centered while the frame around it collapses */
.swiper-material-content {
   position: absolute;
   transform: translateZ(0);
   display: flex;
   justify-content: center;
   align-items: center;
}

.swiper-horizontal .swiper-material-content {
   height: 100%;
   width: var(--swiper-material-slide-size);
   left: calc(50% - var(--swiper-material-slide-size) / 2);
   top: 0;
}

.swiper-vertical .swiper-material-content {
   width: 100%;
   height: var(--swiper-material-slide-size);
   top: calc(50% - var(--swiper-material-slide-size) / 2);
   left: 0;
}

.swiper-material-wrapper .hero-card {
   position: absolute;
   inset: 0;
   display: block;
   overflow: hidden;
   background: #212121;
}

.swiper-material-wrapper .hero-card img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: 0.9;
   object-fit: cover;
   display: block;
   /* the effect writes scale() here, so keep the origin at the visual centre */
   transform-origin: center center;
}
.swiper-material-wrapper .hero-card:after {
   content: "";
   position: absolute;
   z-index: 20;
   pointer-events: none;
   inset: 0;
   background: linear-gradient(177deg, rgba(0, 0, 0, 0) 55%, #212121 98%);
}

.swiper-material-wrapper .hero-card-body {
   position: absolute;
   z-index: 30;
   left: 0;
   bottom: 0;
   width: 100%;
   box-sizing: border-box;
   padding: 2rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   color: #fff;
   pointer-events: none;
}

.swiper-material-wrapper .hero-card-body h3 {
   margin: 0;
   font-size: 1.625rem;
   font-weight: 400;
   line-height: 105%;
   color: inherit;
   @media screen and (min-width: 1200px) {
      & {
         font-size: 1.425rem;
      }
   }
   @media screen and (min-width: 1400px) {
      & {
         font-size: 1.75rem;
      }
   }
}

.swiper-material-wrapper .hero-card-cta {
   margin-top: 0.5rem;
   --hg2-hero-cta-height: 2rem;
   overflow: hidden;
   width: 100%;
   max-height: calc(var(--swiper-material-activeness, 0) * var(--hg2-hero-cta-height));
   opacity: var(--swiper-material-activeness, 0);
   transition:
      max-height var(--swiper-material-transition-duration, 0ms) ease,
      opacity var(--swiper-material-transition-duration, 0ms) ease;
}

.swiper-material-wrapper .hero-card-cta a {
   pointer-events: auto;
   font-weight: 500;
   text-decoration: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: opacity 0.3s ease-out;
   font-size: 1.25rem;
   line-height: 130%;
   background: var(--hg2-linear-gradient, #20a1f5);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.swiper-material-wrapper .hero-card-cta a:hover,
.swiper-material-wrapper .hero-card-cta a:focus-visible {
   opacity: 0.7;
}

/* Controls */
.hg2-home-hero .hg2-hero-controls {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
   margin-top: 1.5rem;
   @media screen and (max-width: 576px) {
      & {
         justify-content: center;
      }
   }
}

.hg2-home-hero .hg2-hero-nav {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.hg2-home-hero .hg2-hero-controls .swiper-pagination.hg2-hero-pagination {
   position: static;
   width: auto;
   text-align: left;
}
.hg2-home-hero .hg2-hero-controls .swiper-pagination.hg2-hero-pagination .swiper-pagination-bullet {
   background: var(--hg2-c-light-grey);
   width: 1.5rem;
   height: 2px;
   border-radius: 2px;
   opacity: 1;
   transition: all 0.4s ease-out;
   @media screen and (min-width: 768px) {
      & {
         width: 2rem;
      }
   }
}
.hg2-home-hero .hg2-hero-controls .swiper-pagination.hg2-hero-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
   background: var(--hg2-c-grey);
   width: 2.5rem;
   @media screen and (min-width: 768px) {
      & {
         width: 3rem;
      }
   }
}

.hg2-home-hero .hg2-hero-controls .swiper-button-prev,
.hg2-home-hero .hg2-hero-controls .swiper-button-next {
   position: static;
   margin: 0;
   width: 2.5rem;
   height: 2.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--hg2-c-light-grey);
   border-radius: 50%;
   color: #9e9da1;
   background: var(--bs-body-bg, #fff);
   transition: background-color 0.3s ease-out;
   @media screen and (max-width: 576px) {
      & {
         display: none;
      }
   }
}

/* Kill Swiper's default arrow glyph */
.hg2-home-hero .hg2-hero-controls .swiper-button-prev::after,
.hg2-home-hero .hg2-hero-controls .swiper-button-next::after {
   content: none;
}
.hg2-home-hero .hg2-hero-controls .swiper-button-prev svg,
.hg2-home-hero .hg2-hero-controls .swiper-button-next svg {
   display: block;
   width: 1.5rem;
   height: 1.5rem;
}
.hg2-home-hero .hg2-hero-controls .swiper-button-prev:hover,
.hg2-home-hero .hg2-hero-controls .swiper-button-next:hover {
   background-color: #f1f1f1;
}
.hg2-home-hero .hg2-hero-controls .swiper-button-disabled {
   opacity: 0.5;
}

/* Home Media
------------------------------------------------------------ */
.hg2-home-media {
   background-color: #e5e5e5;
   position: relative;
   isolation: isolate;
   overflow: hidden;
}

.hg2-home-media .txt-head {
   max-width: 50rem;
   margin-bottom: 3rem;
   @media screen and (min-width: 1200px) {
      & {
         margin-bottom: 4rem;
      }
   }
}
.hg2-home-media .txt-head .hg2-type-body {
   max-width: 40rem;
   color: var(--hg2-cts);
   text-wrap: pretty;
}
.hg2-home-media .txt-head .hg2-gradient-btn {
   margin-top: 1.25rem;
   @media screen and (min-width: 992px) {
      & {
         margin-top: 1.5rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         margin-top: 1.75rem;
      }
   }
}

.hg2-home-media .video-wrapper,
.hg2-home-media figure {
   aspect-ratio: 4 / 3;
   isolation: isolate;
   overflow: hidden;
   background-color: var(--hg2-cts);
   border-radius: 1.5rem;
   max-width: 45rem;
   margin-inline: auto;
   @media screen and (min-width: 1200px) {
      & {
         border-radius: 2.5rem;
      }
   }
   @media screen and (min-height: 700px) {
      & {
         max-width: 50rem;
      }
   }
   @media screen and (min-height: 780px) {
      & {
         max-width: 55rem;
      }
   }
   @media screen and (min-height: 820px) {
      & {
         max-width: 60rem;
      }
   }
   @media screen and (min-height: 880px) {
      & {
         max-width: 65rem;
      }
   }
   @media screen and (min-height: 940px) {
      & {
         max-width: 70rem;
      }
   }
}
.hg2-home-media.media-is-long .video-wrapper,
.hg2-home-media.media-is-long figure {
   aspect-ratio: 16 / 9;
}
.hg2-home-media .video-wrapper video,
.hg2-home-media figure img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hg2-home-media.media-is-bg {
   padding: 0;
}

.hg2-home-media.media-is-bg .txt-head .hg2-type-h1.hg2-type-grey {
   color: var(--hg2-ctp);
}
.fullw-container .abs-txt-wrapper {
   position: absolute;
   top: 4rem;
   left: 0;
   right: 0;
   @media screen and (min-width: 768px) {
      & {
         top: 5rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         top: 6.5rem;
      }
   }
   /* @media screen and (min-width: 1440px) {
      & {
         top: 8.5rem;
      }
   } */
}

.fullw-container .fullw-media-wrapper .fullw-video-wrapper {
   aspect-ratio: 4 / 3;
   width: 100%;
   min-height: 640px;
   @media screen and (min-width: 1440px) {
      & {
         aspect-ratio: 4 / 2.9;
      }
   }
}
.fullw-container .fullw-media-wrapper .fullw-video-wrapper video {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Home Projects
------------------------------------------------------------ */
.hg2-home-proj {
   position: relative;
}
.hg2-home-proj .outer-container {
   overflow: hidden;
}
.hg2-home-proj .col-12 {
   @media screen and (min-width: 1600px) {
      & {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 4rem;
      }
   }
}

.hg2-home-proj .txt-head {
   @media screen and (min-width: 1600px) {
      & {
         order: 2;
         position: relative;
         z-index: 40;
         background-color: var(--bs-body-bg);
         padding-top: 1rem;
         padding-bottom: 6rem;
         isolation: isolate;
      }
      &::before {
         content: "";
         position: absolute;
         z-index: 30;
         top: 0;
         bottom: 0;
         right: 100%;
         width: 4rem;
         background-color: var(--bs-body-bg);
      }
      &::after {
         content: "";
         position: absolute;
         z-index: 20;
         top: 0;
         bottom: 0;
         left: 100%;
         width: 100vw;
         background-color: var(--bs-body-bg);
      }
   }
}
.hg2-home-proj .txt-head .hg2-type-h1 {
   user-select: none;
}
.hg2-home-proj .txt-head .hg2-type-body {
   max-width: 40rem;
   color: var(--hg2-cts);
   text-wrap: balance;
}

.hg2-home-proj .deco-tree {
   position: absolute;
   z-index: -10;
   bottom: calc(-1 * var(--hg2-hero-bleed, 0rem));
   left: 60%;
   width: auto;
   height: 28rem;
   pointer-events: none;
   @media screen and (min-width: 1200px) {
      & {
         height: 36rem;
      }
   }
   @media screen and (min-width: 1600px) {
      & {
         height: 40rem;
         z-index: 50;
      }
   }
}

.hg2-home-proj .wrapper {
   overflow: visible;
   margin-top: 2rem;
   @media screen and (min-width: 1200px) {
      & {
         margin-top: 2.5rem;
      }
   }
   @media screen and (min-width: 1600px) {
      & {
         width: 100%;
         order: 1;
         padding-block: 1rem;
         margin: 0;
      }
   }
}
.swiper-home-proj {
   overflow: visible;
   user-select: none;
   @media screen and (min-width: 1600px) {
      & {
         direction: rtl;
      }
   }
}

.swiper-home-proj .swiper-slide .proj-card {
   display: block;
   position: relative;
   overflow: hidden;
   text-align: left;
}
.swiper-home-proj .swiper-slide .proj-card figure {
   margin: 0;
   aspect-ratio: 2 / 3;
   border-radius: 2.5rem;
   background-color: #e1edf6;
   isolation: isolate;
   overflow: hidden;
}
.swiper-home-proj .swiper-slide .proj-card figure img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition:
      transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.3s ease-out;
}
.swiper-home-proj .swiper-slide .proj-card:hover figure img {
   transform: scale(1.05);
   opacity: 0.9;
}

.swiper-home-proj .swiper-slide .proj-card .proj-card-body {
   position: absolute;
   display: flex;
   background-color: #fff;
   left: 0.5rem;
   right: 0.5rem;
   bottom: 0.5rem;
   border-radius: 2rem;
   min-height: 12rem;
   @media screen and (min-width: 1200px) {
      & {
         left: 1rem;
         right: 1rem;
         bottom: 1rem;
      }
   }
}

.swiper-home-proj .swiper-slide .proj-card .proj-card-body .inner {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 2rem;
   justify-content: space-between;
   padding: 1.5rem;
}
.swiper-home-proj .swiper-slide .proj-card .proj-card-body .inner h3 {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 500;
   line-height: 110%;
   color: var(--hg2-ctp);
}
.swiper-home-proj .swiper-slide .proj-card .proj-card-body .inner .proj-card-tags {
   margin: 0;
   font-size: 1rem;
   font-weight: 400;
   line-height: 110%;
   color: var(--hg2-c-grey);
}

.hg2-proj-controls {
   margin-top: 1.5rem;
}
.hg2-proj-controls .hg2-swiper-pagination {
   text-align: center;
   @media screen and (min-width: 1600px) {
      & {
         display: none;
      }
   }
}
.hg2-proj-nav {
   display: none;
   @media screen and (min-width: 1600px) {
      & {
         display: flex;
         gap: 0.5rem;
         position: absolute;
         left: 0;
         bottom: 2.25rem;
      }
   }
}

/* Home Numbers
------------------------------------------------------------ */
.hg2-home-num {
   background-color: #e5f7d2;
}
.hg2-home-num .txt-head {
   max-width: 50rem;
   margin-bottom: 3rem;
   @media screen and (min-width: 1200px) {
      & {
         margin-bottom: 4rem;
      }
   }
}
.hg2-home-num .txt-head .hg2-type-h1 {
   user-select: none;
}
.hg2-home-num .txt-head .hg2-type-body {
   max-width: 40rem;
   color: var(--hg2-cts);
   text-wrap: pretty;
}
.hg2-home-num .txt-head .hg2-gradient-btn {
   margin-top: 1.25rem;
   @media screen and (min-width: 992px) {
      & {
         margin-top: 1.5rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         margin-top: 1.75rem;
      }
   }
}

.hg2-home-num .nums-wrapper {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 1.5rem;
   max-width: 20rem;
   margin-inline: auto;
   @media screen and (min-width: 576px) {
      & {
         max-width: none;
         grid-template-columns: repeat(2, minmax(0, 1fr));
      }
   }
   @media screen and (min-width: 992px) {
      & {
         grid-template-columns: repeat(3, minmax(0, 1fr));
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         gap: 3rem;
      }
   }
   @media screen and (min-width: 1600px) {
      & {
         gap: 6rem;
      }
   }
}

.hg2-home-num .nums-wrapper .hg2-num-box {
   display: flex;
   flex-direction: column;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   margin: 0;
   padding: 1.5rem;
   background-color: #fff;
   border-radius: 2rem;
   color: var(--hg2-green);
   @media screen and (min-width: 992px) {
      & {
         padding: 2rem;
         border-radius: 2.625rem;
      }
   }
}

.hg2-home-num .nums-wrapper .hg2-num-box .icon {
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
   min-height: 5rem;
   @media screen and (min-width: 992px) {
      & {
         min-height: 4rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         min-height: 6rem;
      }
   }
   @media screen and (min-width: 1600px) {
      & {
         min-height: 7rem;
      }
   }
}
.hg2-home-num .nums-wrapper .hg2-num-box .icon img {
   display: block;
   height: 5rem;
   width: auto;
   max-width: 100%;
   object-fit: contain;
   object-position: right top;
   @media screen and (min-width: 992px) {
      & {
         height: 4rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         height: 6rem;
      }
   }
   @media screen and (min-width: 1600px) {
      & {
         height: 7rem;
      }
   }
}

.hg2-home-num .nums-wrapper .hg2-num-box .body {
   margin-top: auto;
   padding-top: 1.5rem;
}
.hg2-home-num .nums-wrapper .hg2-num-box .body .num {
   font-size: 4.5rem;
   font-weight: 400;
   line-height: 0.85;
   @media screen and (min-width: 992px) {
      & {
         font-size: 4rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         font-size: 6rem;
      }
   }
   @media screen and (min-width: 1600px) {
      & {
         font-size: 7rem;
      }
   }
}
.hg2-home-num .nums-wrapper .hg2-num-box .body .label {
   margin-top: 1rem;
   font-size: 1.125rem;
   font-weight: 500;
   line-height: 1.06;
   text-wrap: pretty;
   @media screen and (min-width: 1200px) {
      & {
         font-size: 1.5rem;
      }
   }
   @media screen and (min-width: 1600px) {
      & {
         margin-top: 1.5rem;
         font-size: 2.25rem;
      }
   }
}

/* Home News
------------------------------------------------------------ */
.hg2-home-news {
   overflow: hidden;
}
.hg2-home-news .txt-head {
   max-width: 50rem;
   margin-bottom: 3rem;
   @media screen and (min-width: 1200px) {
      & {
         margin-bottom: 4rem;
      }
   }
}
.hg2-home-news .txt-head .hg2-type-body {
   max-width: 40rem;
   color: var(--hg2-cts);
   text-wrap: pretty;
}
.hg2-home-news .txt-head .hg2-gradient-btn {
   margin-top: 1.25rem;
   @media screen and (min-width: 992px) {
      & {
         margin-top: 1.5rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         margin-top: 1.75rem;
      }
   }
}
.hg2-home-news .news-wrapper {
   position: relative;
   margin-top: 2rem;
   @media screen and (min-width: 1200px) {
      & {
         margin-top: 2.5rem;
      }
   }
}
.hg2-home-news .swiper-home-news {
   overflow: visible;
   user-select: none;
}
.hg2-home-news .swiper-home-news .swiper-wrapper {
   align-items: center;
}
.hg2-home-news .swiper-home-news .swiper-slide .news-card {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   border-radius: 2.5rem;
   user-select: none;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12);
   display: block;
   transform: scale(0.9);
   transform-origin: center center;
   transition: transform 0.3s ease-out;
}
.hg2-home-news .swiper-home-news .swiper-slide-active .news-card {
   transform: scale(1);
}

.swiper-home-news .swiper-slide .news-card figure {
   margin: 0;
   aspect-ratio: 2 / 3;
   background-color: #e1edf6;
   isolation: isolate;
   overflow: hidden;
}
.swiper-home-news .swiper-slide .news-card figure img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition:
      transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.3s ease-out;
}
.swiper-home-news .swiper-slide .news-card:hover figure img {
   transform: scale(1.05);
   opacity: 0.9;
}

.hg2-home-news .swiper-home-news .news-card::after {
   content: "";
   position: absolute;
   z-index: 20;
   pointer-events: none;
   inset: 0;
   background: linear-gradient(177deg, rgba(0, 0, 0, 0) 55%, #212121 98%);
}

.swiper-home-news .swiper-slide .news-card .news-card-body {
   position: absolute;
   z-index: 30;
   left: 1rem;
   right: 1rem;
   bottom: 2rem;
   color: #fff;
   @media screen and (min-width: 992px) {
      & {
         left: 2rem;
         right: 2rem;
         bottom: 2.5rem;
      }
   }
}

.swiper-home-news .swiper-slide .news-card .news-card-body .inner {
   padding-left: 0.75rem;
   position: relative;
}
.swiper-home-news .swiper-slide .news-card .news-card-body .inner::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 3px;
   background: linear-gradient(180deg, #d0d500 -9%, #47aa29 34%, #20a1f5 82%);
   @media screen and (min-width: 1200px) {
      & {
         width: 4px;
      }
   }
}
.swiper-home-news .swiper-slide .news-card .news-card-body .inner h3 {
   margin: 0;
   font-size: 1.125rem;
   font-weight: 600;
   line-height: 110%;
   display: -webkit-box;
   -webkit-line-clamp: 6;
   -webkit-box-orient: vertical;
   overflow: hidden;
   @media screen and (min-width: 992px) {
      & {
         font-size: 1.75rem;
      }
   }
}

.hg2-news-controls {
   margin-top: 1.5rem;
}
.hg2-news-controls .hg2-swiper-pagination {
   text-align: center;
}

/* Hero section - box, img and breadcrumbs
------------------------------------------------------------ */
.hero .box {
   isolation: isolate;
   overflow: hidden;
   border-radius: 1.5rem;
   @media screen and (min-width: 768px) {
      & {
         border-radius: 2rem;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         border-radius: 1.5rem 1.5rem 0 1.5rem;
      }
   }
}
.hero .image img {
   isolation: isolate;
   overflow: hidden;
   border-radius: 1.5rem;
   @media screen and (min-width: 768px) {
      & {
         border-radius: 2rem;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         border-radius: 0 1.5rem 1.5rem 1.5rem;
      }
   }
}
.hero {
   margin-bottom: 3rem;
   @media screen and (min-width: 732px) {
      & {
         margin-bottom: 6rem;
      }
   }
}

/* NEW Intro section - hg2-box-and-numbers
------------------------------------------------------------ */
.hg2-box-and-numbers .box-gridder {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 1.5rem;
}
.hg2-box-and-numbers .box-gridder .box-desc {
   grid-column: -1 / 1;
   background-color: var(--hg2-c-light-grey);
   border-radius: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 1 / 1;
   width: 100%;
   padding: 2rem;
   @media screen and (min-width: 768px) {
      & {
         border-radius: 2rem;
         grid-column: span 6;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         border-radius: 2.5rem;
      }
   }
   @media screen and (min-width: 1400px) {
      & {
         padding: 3rem;
      }
   }
   @media screen and (min-width: 1560px) {
      & {
         padding: 4rem;
      }
   }
}
.hg2-box-and-numbers .box-gridder .box-desc .box-txt p {
   text-wrap: balance;
   @media screen and (min-width: 992px) {
      & {
         font-size: 1.5rem;
      }
   }
   @media screen and (min-width: 1400px) {
      & {
         font-size: 1.75rem;
      }
   }
}
.hg2-box-and-numbers .box-gridder .box-desc.box-desc-w-meta-values .box-txt {
   width: 100%;
   flex-shrink: 0;
}
.hg2-box-and-numbers .box-gridder .box-desc.box-desc-w-meta-values .box-txt .meta-value .value-title {
   font-weight: 700;
}

.hg2-box-and-numbers .box-gridder .box-figure {
   grid-column: -1 / 1;
   background-color: var(--hg2-c-light-grey);
   border-radius: 1.5rem;
   isolation: isolate;
   overflow: hidden;
   aspect-ratio: 1 / 1;
   width: 100%;
   margin: 0;
   @media screen and (min-width: 768px) {
      & {
         border-radius: 2rem;
         grid-column: span 6;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         border-radius: 2.5rem;
      }
   }
}
.hg2-box-and-numbers .box-gridder .box-figure img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hg2-box-and-numbers .num-gridder {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 1.5rem;
   margin-top: 1.5rem;
}
.hg2-box-and-numbers .num-gridder .number-box,
.hg2-box-and-numbers .num-gridder .number-box-w-text {
   grid-column: -1 / 1;
   border-radius: 1.5rem;
   background-color: var(--hg2-c-light-grey);
   margin: 0;
   @media screen and (min-width: 768px) {
      & {
         grid-column: span 4;
         border-radius: 2rem;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         border-radius: 2.5rem;
      }
   }
}
.hg2-box-and-numbers .num-gridder .number-box-w-text {
   padding: 1.5rem;
   @media screen and (min-width: 576px) {
      & {
         padding: 2rem;
      }
   }
   @media screen and (min-width: 1400px) {
      & {
         padding: 3rem;
         display: flex;
         flex-direction: column;
         justify-content: center;
      }
   }
}

.hg2-box-and-numbers .num-gridder .number-box > .outer {
   border: none;
}
.hg2-box-and-numbers .num-gridder .number-box > .outer > .inner {
   color: var(--hg2-cts);
}
.hg2-box-and-numbers .num-gridder .number-box > .outer > .inner .top,
.hg2-box-and-numbers .num-gridder .number-box > .outer > .inner .bot {
   font-size: 1rem;
   @media screen and (min-width: 1400px) {
      & {
         font-size: 1.5rem;
      }
   }
}
.hg2-box-and-numbers .num-gridder .number-box > .outer > .inner .number {
   font-size: 3rem;
   @media screen and (min-width: 768px) {
      & {
         font-size: 4rem;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         font-size: 5rem;
      }
   }
}

/* OLD Intro section - box-and-numbers
------------------------------------------------------------ */
.box-and-numbers.bg-section .box {
   isolation: isolate;
   overflow: hidden;
   border-radius: 1.5rem;
   @media screen and (min-width: 768px) {
      & {
         border-radius: 2rem;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         border-radius: 1.5rem 1.5rem 0 1.5rem;
      }
   }
}
.box-and-numbers.bg-section .box.box-img {
   @media screen and (min-width: 992px) {
      & {
         border-radius: 0 1.5rem 1.5rem 1.5rem;
      }
   }
}

.box-and-numbers.bg-section .number-box > .outer {
   border: 1px solid rgba(256, 256, 256, 0.3);
   background-color: rgba(256, 256, 256, 0.1);
   backdrop-filter: blur(4px);
   border-radius: 1.5rem;
   @media screen and (min-width: 992px) {
      & {
         border-radius: 2rem;
      }
   }
}

.box-and-numbers.bg-section .text {
   text-wrap: balance;
   @media screen and (min-width: 992px) {
      & {
         padding-right: 2rem;
      }
   }
   @media screen and (min-width: 1600px) {
      & {
         padding-right: 4rem;
      }
   }
}

/* Right section
------------------------------------------------------------ */
.content .right-sections {
   border: 0;
   margin-left: 4px;
   position: relative;
}
.content .right-sections::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   background: linear-gradient(180deg, #d0d500 -9%, #47aa29 34%, #20a1f5 82%);
   width: 4px;
}
.content .right-sections h3 {
   color: var(--hg2-ctp);
}

/* Staff
------------------------------------------------------------ */
.staff-members .member {
   margin-top: 0 !important;
}
.staff-members .member .image img {
   border-radius: 1rem;
   @media screen and (min-width: 768px) {
      & {
         border-radius: 1.5rem;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         border-radius: 2rem;
      }
   }
}
.staff-members .member > div h4 {
   color: var(--hg2-ctp);
}

/* Lavora con noi
------------------------------------------------------------ */
.box.position.hg2-bg-white {
   background: #fff;
}
.box.position.hg2-bg-white .inner {
   color: var(--hg2-cts);
}

/* News Tese inside archive
------------------------------------------------------------ */
.hg2-tease-gridder .bg-light {
   overflow: hidden;
   border-radius: 1rem;
   @media screen and (min-width: 992px) {
      & {
         border-radius: 1.5rem;
      }
   }
}
.pagination .btn.disabled {
   opacity: 0;
}
/* Referenze Tese inside archive
------------------------------------------------------------ */
.offset-boxes .col-box .box,
.offset-boxes .col-img .box {
   border-radius: 1rem;
   isolation: isolate;
   overflow: hidden;
   background-color: var(--hg2-c-light-grey) !important;
}
.offset-boxes .col-box .box > .inner {
   background-color: var(--hg2-c-light-grey);
   color: var(--hg2-ctp);
}
.offset-boxes .col-box .read-more {
   background: var(--hg2-linear-gradient, #20a1f5);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

/* NEW Boxed Hero section - 
------------------------------------------------------------ */
.hg2-boxed-hero .gridder {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 1.5rem;
}
.hg2-boxed-hero .gridder .box-title {
   text-wrap: balance;
   position: relative;
   grid-column: -1 / 1;
   /* Brand gradient: base blue + cyan glow top-left, green top-right (darken)
      and lime bottom-right, with the leaf watermark as the topmost layer.
      Radii/positions are in % of the box, so the glows follow it as the grid
      row stretches; the watermark keeps the SVG ratio (height: auto). */
   background-color: #39a8e0;
   background-image: url("../img/hero-foglie.svg"), radial-gradient(ellipse 81.86% 81.86% at 99.24% 91.2%, rgba(153, 255, 10, 0.9) 0%, rgba(153, 255, 10, 0) 100%), radial-gradient(ellipse 70.73% 70.73% at 109.4% 7.33%, rgb(94, 255, 3) 0%, rgba(94, 255, 3, 0) 100%), radial-gradient(ellipse 78.75% 78.75% at -27.57% 13.64%, rgb(110, 240, 237) 0%, rgba(110, 240, 237, 0) 100%);
   background-repeat: no-repeat;
   background-position:
      right bottom,
      center,
      center,
      center;
   background-size:
      46.92% auto,
      cover,
      cover,
      cover;
   background-blend-mode: normal, normal, darken, normal;
   border-radius: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   aspect-ratio: 1 / 1;
   width: 100%;
   padding: 2rem;
   @media screen and (min-width: 576px) {
      & {
         border-radius: 2rem;
         grid-column: span 6;
      }
   }
   @media screen and (min-width: 768px) {
      & {
         grid-column: span 5;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         border-radius: 2.5rem;
      }
   }
   @media screen and (min-width: 1400px) {
      & {
         padding: 3rem;
      }
   }
   @media screen and (min-width: 1560px) {
      & {
         padding: 4rem;
      }
   }
}
.hg2-boxed-hero .gridder .box-title #breadcrumbs {
   position: absolute;
   bottom: 100%;
   left: -0.75rem;
   z-index: 10;
   max-width: 100%;
   transform: translateY(-1rem);
}
.hg2-boxed-hero .gridder .box-title h1 {
   background: none;
   color: #fff;
   -webkit-text-fill-color: #fff;
}

.hg2-boxed-hero .gridder .box-figure {
   grid-column: -1 / 1;
   background-color: var(--hg2-c-light-grey);
   border-radius: 1.5rem;
   isolation: isolate;
   overflow: hidden;
   aspect-ratio: 16 / 11;
   width: 100%;
   margin: 0;
   @media screen and (min-width: 576px) {
      & {
         border-radius: 2rem;
         grid-column: span 6;
         min-height: 100%;
      }
   }
   @media screen and (min-width: 768px) {
      & {
         grid-column: span 7;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         border-radius: 2.5rem;
      }
   }
}
.hg2-boxed-hero .gridder .box-figure img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hg2-boxed-hero .gridder .box-desc {
   grid-column: -1 / 1;
   background-color: var(--hg2-c-light-blue);
   color: var(--hg2-ctp);
   border-radius: 1.5rem;
   width: 100%;
   font-size: 1rem;
   padding: 2rem;
   padding-bottom: 1rem;
   @media screen and (min-width: 576px) {
      & {
         border-radius: 2rem;
      }
   }
   @media screen and (min-width: 768px) {
      & {
         font-size: 1.125rem;
      }
   }
   @media screen and (min-width: 992px) {
      & {
         border-radius: 2.5rem;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         font-size: 1.25rem;
      }
   }
   @media screen and (min-width: 1400px) {
      & {
         padding-inline: 3rem;
         padding-top: 4rem;
         padding-bottom: 4rem;
      }
   }
   @media screen and (min-width: 1560px) {
      & {
         padding-inline: 4rem;
         padding-top: 5rem;
         padding-bottom: 4rem;
      }
   }
}

/* Single Soluzioni 
------------------------------------------------------------ */
.sections .hg2-type-h1 {
   font-size: 2.5rem !important;
   @media screen and (min-width: 768px) {
      & {
         font-size: 3.25rem !important;
      }
   }
   @media screen and (min-width: 1200px) {
      & {
         font-size: 4rem !important;
      }
   }
}

/* Swiper gallery
------------------------------------------------------------ */
.page-gallery .swiper-slide img {
   border-radius: 1.5rem;
   @media screen and (min-width: 768px) {
      & {
         border-radius: 2rem;
      }
   }
}

/* Archive Certificazioni
------------------------------------------------------------ */
.tease-certificazioni.tease.col-12.col-lg-6 a {
   display: block;
   @media screen and (min-width: 768px) {
      & {
         display: flex;
         align-items: flex-start;
         gap: 1rem;
      }
   }
   @media screen and (min-width: 1480px) {
      & {
         gap: 2rem;
      }
   }
}
.tease-certificazioni.tease.col-12.col-lg-6 a:hover {
   color: currentColor !important;
}
.tease-certificazioni.tease.col-12.col-lg-6 a[href]:hover {
   color: #4f8523 !important;
}
.tease-certificazioni.tease.col-12.col-lg-6 a figure {
   aspect-ratio: 1;
   width: 11rem;
   flex-shrink: 0;
   @media screen and (min-width: 992px) {
      & {
         width: 8rem;
      }
   }
   @media screen and (min-width: 1480px) {
      & {
         width: 11rem;
      }
   }
}
.tease-certificazioni.tease.col-12.col-lg-6 a figure img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}
.tease-certificazioni.tease.col-12.col-lg-6.my-4 {
   margin-block: 2rem !important;
}