*{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body {
overflow-x: hidden;
width: 100%;
display: block;
background-color: #fff;
}
body::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
}
.load-body{
    animation: removeBlur 0.5s ease-in-out;
}
@keyframes removeBlur {
 0% {
   filter: blur(15px);
 }
 50% {
   filter: blur(7px);
 }
 100% {
   filter: blur(0px);
 }
}
a{
text-decoration: none;
color: #000;
}
ul {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
p {
margin-top: 0;
margin-bottom: 0;
}
.scroll-none{
overflow: hidden;
}
.menu{
position: fixed;
width: 100%;
z-index: 1500;
}
.bgd-nav {
transition: 0.3s;
display: flex;
width: 100%;
padding: 0 2rem;
justify-content: space-between;
align-items: center;
border: 0;
border-radius: 20px;
margin-top: 1rem;
background-color: #fff;
}
.top-head{
background-color: #122b54;
}
.head{background-color: transparent;position: relative;z-index: 1000;transition: all 0.3s;}
.top-head-menu {
display: flex;
}
.item-top-head {
color: var(--default-color);
font-family: "Inter", sans-serif;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
padding: 0.8rem 2rem;
position: relative;
transition: all 0.3s;
}
.item-top-head:hover:before {
opacity: 0.1;
}
.item-top-head:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-color: #000;
transition: 0.2s;
}
.item-top-head span {
position: relative;
color: #fff;
}
.item-top-head:not(:last-child):after {
content: '|';
position: absolute;
right: -5px;
color: #fff;
}
.navbar-cont {
display: flex;
transition: 0.3s;
justify-content: space-between;
align-items: center;
gap: 4rem;
}
.logo {
width: 8rem;
transition: 0.3s;
position: relative;
text-align: center;
display: flex;
align-items: center;
}
.logo > img {
height: 100%;
}
.navigation-bar {
display: flex;
align-items: center;
justify-content: flex-start;
}
span.item-menu {
cursor: pointer;
}
.item-menu {
color: var(--default-color);
font-family: "Inter", sans-serif;
text-transform: uppercase;
font-size: 13px;
font-weight: 400;
letter-spacing: 0px;
padding: 2rem 1.2rem;
position: relative;
transition: all 0.3s;
}
.item-menu span {
transition: all 0.3s;
position: relative;
color: #122b54;
}
.fake-menu {
display: flex;
gap: 10px;
align-items: center;
transition: all 0.3s;
}
.icon-dropdown {
width: 0.65rem;
height: 0.65rem;
transition: all 0.3s;
position: relative;
display: flex;
align-items: center;
margin-top: -2px;
}
.icon-dropdown .cls-3{
fill: #122b54;
width: 100%;
height: 100%;
}
.scroll .icon-dropdown .cls-3{
fill: #122b54;
width: 100%;
height: 100%;
}
.icon-dropdown svg{transition: all 0.3s ease;width: 0.65rem;height: 0.65rem;}
.icon-dropdown.active svg{
transform: rotate(45deg);
}
.dropdown-open .icon-dropdown .cls-3{
fill: #122b54;
width: 100%;
height: 100%;
}
.scroll .icon-square {
border: 1px solid #122b54;
}
.scroll .icon-line {
background-color: #122b54;
}
.top-head-container {
display: flex;
width: 100%;
transition: 0.1s;
justify-content: space-between;
align-items: center;
}
.top-head-cta{
display: flex;
gap: 2rem;
align-items: center;
}
.top-head-cta a span{
color: #fff;
font-size: 14px;
}
.mail-cta, .tel-cta{
padding: 0.5rem 0;
}
.mail-cta-content, .tel-cta-content{
display: flex;
gap: 6px;
align-items: center;
border-radius: 7px;
padding: 1px 10px;
transition: all 0.3s ease;
border: 1px solid #122b54;
}
.tel-cta-content svg, .mail-cta-content svg{
width: 0.8rem;
height: 0.8rem;
}
.tel-cta-content:hover, .mail-cta-content:hover{
border: 1px solid #fff;
}
.head-prev-cta span{
color:#fff;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
transition: all 0.3s;
}
.head-prev-cta{
background-color: #122b54;
padding: 6px 12px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
border: 2px solid #122b54;
}
.scroll .head-prev-cta{
padding: 6px 12px;
}
.scroll .head-prev-cta span{
font-size: 12px;
}
.head-prev-cta:hover {
background-color: #fff;
border: 2px solid #122b54;
}
.scroll .head-prev-cta:hover {
border: 2px solid #122b54;
}
.head-prev-cta:hover span{
color: #122b54;
}
.head.dropdown-open {
-webkit-box-shadow: 0px 9px 20px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 9px 20px 5px rgba(0, 0, 0, 0.1);
}
.bgd-nav {
box-shadow: 0px 6px 20px 5px rgba(0, 0, 0, 0.1);
}
.scroll .bgd-nav.no-shadow {
box-shadow: none;
}
.logo-gramma {
width: 2.5rem;
transition: all 0.3s;
}
.logo-gramma-div {
width: 8rem;
transition: all 0.3s;
display: block;
}
.logo-gramma-div svg{
width: 7rem;
height: 100%;
fill: #fff;
transition: all 0.3s;
}
.logo-gramma-div .cls-1{
transition: all 0.3s;
}
.logo-gramma-div:hover svg{
width: 7.5rem;
}
.scroll .logo-gramma-div svg{
fill: #122b54;
width: 6rem;
}
.logo-tipo {
margin-left: 0.5rem;
width: 8rem;
transition: all 0.3s;
}
.logo-tipo-div {
margin-left: 0.5rem;
width: 8rem;
transition: all 0.3s;
display: block;
}
.scroll .logo-gramma {
width: 2rem;
transition: 0.3s;
}
.scroll .item-menu {
padding: 1.5rem 1.2rem;
transition: all 0.3s;
}
.sub-menu-wrapper {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
padding-top: 4rem;
padding-bottom: 4rem;
}
.sub-menu-flex {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10rem;
width: 100%;
}
.hero {
position: relative;
z-index: 1;
}
.cards-section {
position: relative;
z-index: 5;
margin-top: -120px;
padding-bottom: 8rem;
}
.cards-wrapper {
display: flex;
justify-content: center;
gap: 25px;
}
.card {
flex: 1;
max-width: 700px;
display: flex;
flex-direction: column;
border: 1px solid #e0e0e0;
border-radius: 30px;
overflow: hidden;
padding: 4rem 5rem;
background-color: #fff;
box-shadow: 0 4px 20px 5px rgba(0, 0, 0, 0.1);
}
.card-title {
font-size: 40px;
font-weight: 600;
margin: 0 0 15px;
color: #122b54;
}
.card-desc {
flex-grow: 1;
margin: 0 0 30px;
font-size: 18px;
font-weight: 300;
}
.card-cta {
text-transform: uppercase;
display: flex;
padding: 15px 20px;
background-color: #fff;
color: #122b54;
text-decoration: none;
border-radius: 10px;
text-align: center;
transition: all 0.3s;
border: 2px solid #122b54;
font-size: 14px;
font-weight: 500;
align-items: center;
justify-content: center;
gap: 1rem;
}
.card:hover .card-cta{
background-color: #122b54;
color: #fff;
}
.logo-tipo-div {
transform-origin: left;
}
.logo-tipo {
transform-origin: left;
transition: all 0.18s;
}
.scroll .logo-tipo {
opacity: 0;
margin-left: 0;
transform: translateX(-20px);
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
FONT-WEIGHT: 500;
FONT-WEIGHT: 600;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
.hero-title-container{
width: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
z-index: 3;
align-items: center;
height: 100vh;
justify-content: center;
}
.hero-title {
position: relative;
width: 100%;
height: fit-content;
display: flex;
padding-top: 0rem;
}
.hero-inside-container{
display: flex;
flex-direction: column;
gap: 3rem;
width: 75%;
}
.hero-inside-container-title{
display: flex;
flex-direction: column;
gap: 2rem;
}
.hero-inside-container h1{
font-size: 100px;
line-height: 105px;
font-weight: 500;
color: #fff;
text-align: left;
}
.hero-inside-container h2{
font-size: 100px;
line-height: 105px;
font-weight: 500;
color: #fff;
text-align: left;
}
.swiper-nav{
display: flex;
flex-direction: column;
gap: 0;
}
.swiper-nav.home-swiper-nav{
position: absolute;
top: 18.5rem;
right: 7.6rem;
z-index: 99;
border: 2px solid #ffffff80;
border-radius: 17px;
}
.swiper-button{
cursor: pointer;
display: flex;
width: 3rem;
height: 4rem;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
border-radius: 14px;
pointer-events: auto;
}
.swiper-button-b{
cursor: pointer;
display: flex;
border: 0;
border-radius: 14px;
width: 5rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.prev-p svg{
transform: rotate(90deg);
}
.next-p svg{
transform: rotate(90deg);
}
.swiper-button svg {
width: 1.5rem;
height: 1.5rem;
fill: #ffffff;
transition: all 0.3s;
}
.swiper-button-b svg {
width: 1.5rem;
height: 1.5;
fill: #122b5450;
transition: all 0.3s;
}
.swiper-button:hover{
background-color: #fff;
}
.swiper-button:hover .cls-2{
fill: #122b54;
}
.swiper-button-b:hover{
background-color: #122b54;
}
.swiper-button-b:hover .cls-4{
fill: #fff;
}
.right-buttons-container{
display: flex;
flex-direction: column;
gap: 15px;
position: fixed;
right: 0;
top: 40%;
z-index: 99;
transform: translateX(78%);
}
.btn-right{
background-color: #122b54;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.2);
border-right: 0;
display: flex;
gap: 15px;
padding: 1rem 1rem;
transition: all 0.3s ease;
align-items: center;
}
.btn-right:hover{
transform: translateX(-78%);
}
.btn-right span{
color: #fff;
text-transform: uppercase;
font-size: 14px;
line-height: 14px;
font-weight: 600;
}
.btn-right svg{
width: 1.5rem;
height: 1.5rem;
fill: #ffffff80;
transition: all 0.3s;
}
.banner-pvc {
padding-top: 4rem;
padding-bottom: 4rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 0;
}
.banner-pvc::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.banner-content{
display: flex;
flex-direction: column;
gap: 2rem;
}
.banner-title {
position: relative;
z-index: 2;
padding-bottom: 2rem;
display: flex;
flex-direction: column;
gap: 0;
}
.banner-title-mini {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0;
}
.banner-content{
position: relative;
z-index: 2;
}
.banner-title h2 span{
font-size: 50px;
line-height: 54px;
font-weight: 300;
color: #fff;
}
.banner-title h2 {
font-size: 60px;
line-height: 62px;
font-weight: 500;
color: #122b54;
margin: 0;
}
.banner-title h3 {
font-size: 50px;
line-height: 54px;
font-weight: 300;
color: #fff;
}
.banner-title h6 {
font-size: 20px;
line-height: 21px;
font-weight: 700;
color: #122b54;
text-transform: uppercase;
}
.banner-title-mini h6 {
font-size: 18px;
line-height: 20px;
font-weight: 700;
color: #122b54;
text-transform: uppercase;
}
.banner-desc *{
font-size: 18px;
line-height: 24px;
font-weight: 300;
}
.banner-desc p{
margin-bottom: 1rem;
color: #122b54;
}
.banner-desc p span{
font-weight: 500;
}
.banner-ul ul {
margin-bottom: 2rem;
padding-left: 0;
}
.banner-ul ul li {
position: relative;
padding-left: 28px;
margin-bottom: 4px;
}
.banner-ul ul li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 14px;
background-image: url("/assets/frontend/img/svg/piu-3.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.banner-cta, .apply-cta{
background-color: #122b54;
padding: 15px 3rem;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
border: 2px solid #122b54;
gap: 1rem;
}
.top-head-cta{
display: flex;
gap: 1rem;
align-items: center;
}
.top-head-cta a span{
color: #fff;
font-size: 13px;
}
.banner-btn{
display: flex;
justify-content: flex-start;
align-items: center;
}
.banner-cta svg, .apply-cta svg{
width: 1rem;
height: 1rem;
}
.banner-cta span, .apply-cta span{
color: #fff;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
transition: all 0.3s;
letter-spacing: 1px;
}
.banner-cta:hover, .apply-cta:hover {
background-color: #fff;
}
.banner-cta:hover .cls-3, .apply-cta:hover .cls-3 {
stroke: #122b54;
}
.banner-cta:hover span, .apply-cta:hover span{
color: #122b54;
}
.banner-cta:hover .cls-91, .apply-cta:hover .cls-91{
stroke: #122b54;
}
.banner-products{
padding-top: 5rem;
padding-bottom: 5rem;
position: relative;
border-radius: 90px;
margin-top: -10rem;
background-color: #fff;
z-index: 10;
}
.banner-title.black h2, .banner-title.black h3{
color: #122b54;
}
.banner-title.black h2 span{
color: #122b54;
}
.product{
font-weight: inherit;
text-align: inherit;
align-items: inherit;
background-position: inherit;
background-repeat: no-repeat;
background-size: inherit;
filter: brightness(1);
padding: 2rem;
transition: all 0.3s ease;
margin-bottom: 0;
border: 2px solid #d1d5dc;
border-radius: 30px;
background-color: #f7f7f7;
display: flex;
gap: 3rem;
justify-content: space-between;
}
.product.macro{
padding: 4rem 8rem;
}
.product.macro {
background-color: #f7f7f7;
background-image: none !important;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
}
.product.macro.subcategory-card{
height: fit-content;
padding: 2rem;
width: 100%;
min-height: 6rem;
}
.product.macro::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: var(--bg-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.product.macro.subcategory-card.active::before {
opacity: 1;
filter: brightness(0.6);
}
.product.macro.subcategory-card.active h4 {
color:#fff;
}
.product.macro:hover::before {
opacity: 1;
filter: brightness(0.6);
}
.product.macro.subcategory-card:hover::before {
opacity: 0;
filter: brightness(1);
}
.product.macro > * {
position: relative;
z-index: 2;
}
.prod-swiper-wrapper{
gap: 0;
}
.prod-swiper-wrapper-beta {
gap: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.prod-swiper-nav {
display: flex;
justify-content: right;
gap: 0;
border: 2px solid #d1d5dc;
border-radius: 17px;
}
.slider-product-half .swiper-button-c.prev-p {
transform: translateX(20px);
}
.slider-product-half .swiper-button-c.next-p {
transform: translateX(-20px);
}
.products-wrapper{
padding: 1.5rem;
}
.product-cta{
background-color: #f7f7f7;
padding: 15px 3rem;
border-radius: 15px;
transition: all 0.3s;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border: 2px solid #d1d5dc;
gap: 2rem;
}
.product.macro:hover .product-cta{
background-color: #fff;
}
.product-btn{
display: flex;
justify-content: flex-start;
align-items: center;
flex: 0 0 auto;
margin-top: auto;
padding-top: 0;
}
.product-cta span{
color: #122b54;
text-transform: uppercase;
font-size: 13px;
font-weight: 800;
transition: all 0.3s;
letter-spacing: 1px;
}
.product:hover .product-cta{
background-color: #d1d5dc;
}
.product:hover .product-img{
transform: scale(1);
}
.product:hover{
background-color: #fff;
border-color: #fff;
box-shadow: 0 4px 20px 5px rgba(0, 0, 0, 0.1);
}
.product.macro:hover{
background-color: inherit;
border-color: #d1d5dc;
}
.product{
display: flex;
gap: 10px;
justify-content: space-between;
gap: 2rem;
height: 100%;
transition: all 0.3s;
}
.product-img{
display: block;
width: 10rem;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
flex: 0 0 auto;
transition: all 0.3s;
transform: scale(0.95);
border-radius: 20px;
}
.product-span {
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
border-radius: 7px;
color: #9fa5b0;
transition: all 0.3s;
z-index: 99;
letter-spacing: 1px;
}
.product.macro:hover .product-span{
color: #fff;
}
.subcategory-card .product-title{
flex: 1;
flex-grow: 0;
display: flex;
flex-direction: column;
gap:0;
}
.product-title{
flex: 0 0 auto;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
.product-title h4{
font-size: 37px;
line-height: 41px;
font-weight: 600;
color: #122b54;
margin: 0;
transition: all 0.3s;
}
.product-title h5{
font-size: 24px;
line-height: 27px;
font-weight: 300;
color: #122b54;
transition: all 0.3s;
}
.product-title p{
font-size: 18px;
line-height: 24px;
font-weight: 300;
color: #122b54;
padding-top: 0.5rem;
transition: all 0.3s;
}
.product.macro:hover h4, .product.macro:hover h5, .product.macro:hover p{
color: #fff;
}
.product.macro.subcategory-card h4{
font-size: 27px;
line-height: 31px;
font-weight: 500;
text-align: center;
}
.product.macro.subcategory-card:hover h4{
color: #122b54;
}
.product-details{
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: space-between;
width: 100%;
}
.subcategory-group .product-details{
justify-content:center;
}
.det-a{
display: flex;
gap: 5px;
justify-content: center;
align-items: center;
}
.bottom-product{
display: flex;
flex-direction: column;
gap: 15px;
flex: 1 0 auto;
}
.grafic-det {
width: 100%;
height: 8px;
background-color: #122b5420;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.grafic-det::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #122b54;
border-radius: 4px;
transition: width 0.8s ease-in-out;
width: var(--value-percent, 0%);
}
.det-a {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.det-a span {
min-width: 100px;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
color: #122b54;
}
.reasons{
padding-top: 6rem;
padding-bottom: 6rem;
border-top: 1px solid #00000030;
}
.banner-title-orange {
padding-bottom: 2rem;
}
.banner-title-orange h2 {
font-size: 50px;
line-height: 54px;
font-weight: 500;
color: #122b54;
margin: 0;
}
.banner-title-orange h2 span {
font-size: 50px;
line-height: 54px;
font-weight: 300;
color: #122b54;
}
.banner-title-orange h3 {
font-size: 50px;
line-height: 54px;
font-weight: 300;
color: #122b54;
}
.banner-cards-container{
background-color: #f0f0f0;
border-radius: 30px;
display: flex;
}
.banner-card{
background-color: #f0f0f0;
border-radius: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: auto;
min-height: 250px;
padding: 2rem;
flex: 1;
gap: 1rem;
transition: all 0.3s;
}
.banner-card-btn {
flex: 0 0 auto;
width: 100%;
padding-top: 1rem;
}
.banner-card-cta {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 15px 20px;
background-color: #f0f0f0;
border-radius: 12px;
transition: all 0.3s;
border: 2px solid #122b54;
}
.banner-card-cta span{
color: #122b54;
font-size: 14px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
transition: all 0.3s ease;
}
.banner-card-cta svg{
width: 1rem;
height: 1rem;
fill: #122b54;
}
.banner-card-cta.big svg {
width: 1.3rem;
height: 1.3rem;
fill: #122b54;
}
.banner-card-title{
flex: 0 0 auto;
}
.banner-card-title h4{
font-size: 30px;
line-height: 30px;
font-weight: 600;
color: #122b54;
margin: 0;
transition: all 0.3s;
}
.banner-card-title h5{
font-size: 30px;
line-height: 30px;
font-weight: 300;
color: #122b54;
}
.banner-card-title h6{
font-size: 18px;
line-height: 18px;
font-weight: 500;
color: #122b54;
text-transform: uppercase;
padding-top: 1rem;
}
.banner-card-desc{
flex: 1 0 auto;
}
.banner-card-desc p{
font-size: 18px;
line-height: 22px;
font-weight: 200;
}
.banner-card:hover{
background-color: #fff;
box-shadow: 0 4px 20px 5px rgba(0, 0, 0, 0.1);
transform: scale(1.02);
}
.banner-card:hover .banner-card-title h4{
color: #122b54;
}
.banner-card:hover .banner-card-cta{
background-color: #122b54;
border-color: #122b54;
color: #fff;
}
.banner-card:hover .banner-card-cta span{
color: #fff;
}
.banner-card:hover .banner-card-cta svg{
fill: #fff;
}
.banner-card:hover .cls-5, .banner-card:hover .cls-6, .banner-card:hover .cls-7{
transition: all 0.3s;
stroke:#fff;
}
.plus-minus-wrapper {
width: .9rem;
height: .9rem;
position: relative;
}
.plus-minus-square {
width: 100%;
height: 100%;
border: 1px solid #122b54;
border-radius: 2px;
transition: all 0.3s ease;
}
.plus-minus-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.5rem;
height: 0.5rem;
}
.plus-minus-line {
position: absolute;
background-color: #122b54;
transition: all 0.3s ease;
}
.plus-minus-horizontal {
width: 100%;
height: 1px;
top: 50%;
transform: translateY(-50%);
}
.plus-minus-vertical {
height: 100%;
width: 0.5px;
left: 50%;
transform: translateX(-50%);
}
.plus-minus-wrapper.active .plus-minus-vertical {
transform: translateX(-50%) rotate(90deg);
}
.card:hover .plus-minus-line {
background-color: #fff;
}
.card:hover .plus-minus-square {
border: 1px solid #fff;
}
.icon-wrapper {
width: .8rem;
height: .8rem;
position: relative;
}
.icon-square {
width: 100%;
height: 100%;
border: 1px solid #fff;
border-radius: 2px;
transition: all 0.3s ease;
}
.icon-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.4rem;
height: 0.4rem;
}
.icon-line {
position: absolute;
background-color: #fff;
transition: all 0.3s ease;
}
.icon-horizontal {
width: 100%;
height: 0.5px;
top: 50%;
transform: translateY(-50%);
}
.icon-vertical {
height: 100%;
width: 1px;
left: 50%;
transform: translateX(-50%);
}
.icon-square {
border: 1px solid #122b54;
}
.icon-line{
background-color: #122b54;
}
.dropdown-open .icon-square{
border: 1px solid #122b54;
}
.dropdown-open .icon-line{
background-color: #122b54;
}
.icon-wrapper.active .icon-vertical {
transform: translateX(-50%) rotate(90deg);
}
.icon-wrapper.active .icon-square{
border: 1px solid #122b54;
}
.icon-wrapper.active .icon-line{
background-color: #122b54;
}
.item-menu:hover, .item-menu.active{
background-color: #122b5410;
}
.scroll .item-menu:hover, .scroll .item-menu.active {
background-color: #122b5410;
}
.cls-11, .cls-12{
transition: all 0.3s ease;
}
.banner-card:hover .cls-11{
stroke: #fff;
}
.find-container{
display: flex;
}
.find-center{
padding-top: 4rem;
padding-bottom: 4rem;
background-color: #122b54;
}
.find-left{
display: flex;
flex-direction: column;
gap: 2rem;
height: 100%;
justify-content: center;
}
.find-title h4{
font-size: 40px;
line-height: 45px;
font-weight: 300;
color: #fff;
}
.find-title h4 span{
font-weight: 600;
}
.find-btn{
display: flex;
padding-top: 1rem;
width: 100%;
gap: 1rem;
}
.find-cta{
background-color: #fff;
border: 2px solid #fff;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 15px 30px;
border-radius: 12px;
transition: all 0.3s;
}
.find-cta svg{
width: 1rem;
height: 1rem;
transition: all 0.3s ease;
}
.find-cta span{
color: #122b54;
font-size: 14px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
transition: all 0.3s ease;
}
.find-cta:hover{
background-color: #122b54;
}
.find-cta:hover span{
color: #fff;
}
.find-cta:hover .cls-12{
stroke: #fff;
}
.find-right{
display: flex;
flex-direction: column;
gap: 1.5rem;
height: 100%;
justify-content: center;
}
.find-info p{
color: #fff;
font-size: 18px;
line-height: 21px;
font-weight: 100;
}
.find-info p a{
color: #fff;
font-weight: 400;
text-decoration: underline;
font-size: 18px;
line-height: 21px;
}
.find-ul li{
color: #fff;
font-size: 18px;
line-height: 21px;
font-weight: 100;
padding-left: 2rem;
position: relative;
}
.find-ul li:not(:last-child) {
margin-bottom: 1rem;
}
.find-ul li span{
color: #fff;
font-weight: 500;
text-transform: uppercase;
font-size: 17px;
line-height: 21px;
}
.find-ul li::before {
content: '';
position: absolute;
left: 0;
top: 5px;
width: 14px;
height: 14px;
background-image: url("/assets/frontend/img/svg/piu-3.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.banner-sost {
padding-top: 6rem;
padding-bottom: 6rem;
position: relative;
}
.banner-sost::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/assets/frontend/img/jpg/banner-sostenibilita.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.7);
z-index: -1;
}
.sost-content {
display: flex;
flex-direction: column;
gap: 2rem;
position: relative;
}
.sost-title h2 {
font-size: 50px;
line-height: 54px;
font-weight: 500;
color: #fff;
margin-bottom: 0;
}
.sost-title h3 {
font-size: 50px;
line-height: 54px;
font-weight: 300;
color: #fff;
}
.sost-btn{
display: flex;
}
.sost-cta{
background-color: transparent;
border: 2px solid #fff;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 15px 3rem;
border-radius: 12px;
transition: all 0.3s;
}
.sost-cta svg {
width: 1rem;
height: 1rem;
transition: all 0.3s ease;
}
.sost-cta span {
color: #fff;
font-size: 14px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
transition: all 0.3s ease;
}
.sost-cta:hover{
background-color: #f0f0f0;
border: 2px solid #122b54;
}
.sost-cta:hover span{
color: #122b54;
}
.sost-cta:hover .cls-14{
stroke: #122b54;
}
.quality-banner{
padding-top: 4rem;
padding-bottom: 4rem;
background-color: #fff6ed;
background-image: url('/assets/frontend/img/jpg/banner-catalogo-mobile.jpg');
background-position: bottom -3rem right 0rem;
background-repeat: no-repeat;
background-size: contain;
}
.qual-content{
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.qual-title h2{
font-size: 40px;
line-height: 44px;
font-weight: 300;
color: #122b54;
}
.qual-title h2 span{
font-weight: 500;
}
.qual-p p{
color: #122b54;
font-size: 18px;
line-height: 21px;
font-weight: 300;
}
.qual-ul li span{
color: #122b54;
font-size: 15px;
line-height: 16px;
font-weight: 300;
text-transform: uppercase;
}
.qual-ul li:not(:last-child){
margin-bottom: 5px;
}
.qual-ul li{
padding-left: 2rem;
position: relative;
}
.qual-ul li::before {
content: '';
position: absolute;
left: 0;
top: 5px;
width: 14px;
height: 14px;
background-image: url("/assets/frontend/img/svg/piu.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.qual-btn {
display: flex;
}
.qual-cta {
background-color: #122b54;
border: 2px solid #122b54;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 15px 3rem;
border-radius: 12px;
transition: all 0.3s;
}
.qual-cta svg {
width: 1rem;
height: 1rem;
transition: all 0.3s ease;
}
.qual-cta span {
color: #fff;
font-size: 14px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
transition: all 0.3s ease;
}
.qual-cta:hover{
background-color: #fff6ed;
border: 2px solid #122b54;
}
.qual-cta:hover span{
color: #122b54;
}
.qual-cta:hover .cls-16{
stroke: #122b54;
}
.blog-banner{
padding: 5rem 0;
}
.blog-banner-title{
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 2rem;
}
.prod-banner-title{
display: flex;
justify-content: space-between;
align-items: center;
}
.blog-banner-title h2{
font-size: 50px;
line-height: 54px;
font-weight: 300;
color: #122b54;
}
.blog-banner-title h2 span{
font-weight: 500;
}
.blog-card-text h4 {
font-size: 23px;
line-height: 27px;
font-weight: 600;
color: #122b54;
margin-bottom: 1rem;
min-height: 60px;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.blog-card-text p {
font-size: 16px;
line-height: 20px;
font-weight: 200;
color: #122b54;
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.blog-ban-wrapper{
display: flex;
justify-content: space-between;
gap: 2rem;
}
.blog-ban-card{
display: flex;
flex-direction: column;
gap: 1.5rem;
justify-content: space-between;
border-radius: 20px;
background-color: #f0f0f0;
transition: all 0.3s ease;
width: calc((100% - 4rem) / 3);
min-height: 0;
}
.blog-card-img{
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
position: relative;
height: 200px;
flex-shrink: 0;
overflow: hidden;
border: 2px solid #f0f0f0;
}
.blog-card-img::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: inherit;
background-position: inherit;
background-repeat: inherit;
background-size: inherit;
transition: transform 0.3s ease;
}
.blog-ban-card:hover .blog-card-img::before {
transform: scale(1.1);
}
.blog-card-img span{
padding: 5px 15px;
background-color: #122b54;
border-radius: 7px;
color: #fff;
text-transform: uppercase;
font-size: 9px;
position: absolute;
top: 15px;
right: 15px;
}
.blog-card-text{
padding: 0 2rem;
flex-grow: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.blog-card-btn{
padding: 0 2rem 2rem 2rem;
margin-top: auto;
}
.blog-card-cta {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 15px 20px;
background-color: #f0f0f0;
border-radius: 12px;
transition: all 0.3s;
border: 2px solid #122b54;
}
.blog-card-cta svg {
width: 1rem;
height: 1rem;
fill: #122b54;
}
.blog-card-cta span {
color: #122b54;
font-size: 14px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
transition: all 0.3s ease;
}
.blog-ban-card:hover{
box-shadow: 0 4px 20px 5px rgba(0, 0, 0, 0.1);
}
.blog-ban-card:hover .blog-card-cta{
background-color: #122b54;
}
.blog-ban-card:hover .blog-card-cta span{
color: #fff;
}
.blog-ban-card:hover .blog-card-cta .cls-11{
stroke: #fff;
}
.blog-ban-cta{
display: flex;
gap: 15px;
align-items: center;
}
.blog-ban-cta span{
color: #122b54;
font-size: 14px;
line-height: 14px;
font-weight: 500;
text-transform: uppercase;
}
.blog-ban-cta svg{
width: 1rem;
height: 1rem;
stroke: #122b54;
}
.footer-desktop{
padding: 7rem 0 4rem 0;
background-color: #122b54;
}
.footer-mobile{
display: none;
}
.footer-mobile {padding: 3rem 0 15px 0;background-color: #122b54;}
.footer-container{
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 3rem;
}
.footer-col-left{display: flex;flex-direction: column;gap: 5rem;justify-content: flex-start;height: 100%;}
.footer-logo-title h5{
color: #fff;
font-size: 18px;
line-height: 20px;
font-weight: 500;
text-transform: uppercase;
}
.footer-social h6{
color: #fff;
font-size: 18px;
line-height: 20px;
font-weight: 400;
}
.footer-social ul li a{
color: #f0f0f0;
font-size: 14px;
line-height: 18px;
font-weight: 300;
transition: all 0.3s ease;
position: relative;
}
.footer-social ul li a::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background-color: #fff;
opacity: 0;
transition: opacity 0.3s ease;
}
.footer-social ul li a:hover::after {
opacity: 1;
}
.footer-veka{
display: flex;
gap: 20px;
align-items: center;
}
.footer-veka img{
display: block;
width: 8rem;
height: 100%;
}
.footer-veka span{
color: #fff;
font-size: 16px;
line-height: 18px;
font-weight: 100;
}
.cta-b{
background: transparent;
border: none;
padding-top: 1rem;
}
.footer-col-central{
display: flex;
flex-direction: column;
gap: 15px;
}
.footer-links h6{
color: #fff;
font-size: 18px;
line-height: 20px;
font-weight: 400;
}
.footer-links ul li a{
color: #f0f0f0;
font-size: 13px;
line-height: 13px;
font-weight: 300;
text-transform: uppercase;
transition: all 0.3s ease;
position: relative;
}
.footer-links ul li a:hover{
margin-left: 4px;
}
.footer-links ul li {
margin-bottom: 4px;
}
.footer-login h6{
color: #fff;
font-size: 18px;
line-height: 20px;
font-weight: 400;
margin-bottom: 1rem;
}
.footer-btn{
display: flex;
padding-bottom: 1rem;
}
.footer-cta{
background-color: #122b54;
border-radius: 7px;
display: flex;
justify-content: center;
align-items: center;
padding: 15px 4rem;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid #122b54;
}
.footer-cta span{
color: #fff;
font-size: 14px;
line-height: 17px;
font-weight: 500;
text-transform: uppercase;
transition: all 0.3s ease;
}
.footer-cta:hover{
background-color: #122b54;
border: 2px solid #fff;
}
.login-span{
color: #f0f0f0;
font-size: 14px;
line-height: 17px;
font-weight: 200;
width: 70%;
display: block;
}
.login-span a{
color: #f0f0f0;
font-size: 14px;
line-height: 14px;
font-weight: 300;
text-decoration: underline;
transition: all 0.3s ease;
}
.login-span a:hover{
color: #fff;
}
.contact-form {
width: 100%;
margin: 0 auto;
position: relative;
}
.form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding-top: 2rem;
}
.input-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.checkbox-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding-top: 1rem;
}
.single-group {
display: grid;
grid-template-columns: 1fr;
gap: 0px;
}
.triple-group{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.input-group input, .input-c, .input-d {
width: 100%;
padding: 10px 19px;
border: 1px solid #f0f0f0;
background: #f0f0f0;
color: #122b54;
font-size: 16px;
font-weight: 400;
border-radius: 15px!important;
}
.input-d {
-moz-appearance: none !important;
-webkit-appearance: none !important;
appearance: none !important;
background-size: 15px !important;
background-repeat: no-repeat !important;
background-position: calc(100% - 10px) center !important;
background-color: #f0f0f0 !important;
}
.input-c{
color: #122b54;
font-size: 11px;
font-weight: 400;
}
.input-d{
color: #122b54;
font-size: 16px;
font-weight: 400;
}
.input-group input:focus, .input-c:focus, .input-d:focus {
outline: none !important;
box-shadow: none !important;
border-color: #122b5470 !important;
}
.input-group input:focus-visible, .input-c:focus-visible, .input-d:focus-visible{
outline: none !important;
}
/* .input-group input, .input-c, .input-d{
-webkit-appearance: none;
} */
.input-group input::placeholder{
color: #9fa5b0;
font-size: 16px;
font-weight: 400;
}
.input-c::placeholder{
font-size: 16px;
}
.input-c option{
color: #122b54;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.input-c option:first-child {
display: none;
}
.privacy-group {
width: 100%;
}
.privacy-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
margin-bottom: 10px;
}
.checkbox-c[type=checkbox] {
background: transparent;
appearance: none;
color: #fff;
height: 20px;
border: 1px solid #fff;
width: 20px;
cursor: pointer;
border-radius: 2px;
min-width: 12px;
flex: 0 0 12px;
}
.privacy-label span {
flex: 1;
line-height: 1.4;
}
.privacy-label input[type="checkbox"] {
margin-top: 3px;
}
.checkbox-c:checked[type=checkbox] {
background-image: url(/assets/frontend/img/svg/select.svg);
background-size: 15px 15px;
background-position: center;
background-repeat: no-repeat;
}
.privacy-label span {
color: #f0f0f0;
font-size: 14px;
line-height: 17px;
font-weight: 200;
}
.privacy-label span a{
color: #f0f0f0;
font-size: 14px;
line-height: 17px;
font-weight: 400;
text-decoration: underline;
}
.submit-but {
display: flex;
align-items: center;
margin-top: 0;
}
.not-show{display: none;}
.message-send.show{POSITION: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-content: center;justify-content: center;align-items: center;background-color: #d1d5dc99;z-index: 1000;font-size: 23px;font-weight: 400;color: #122b54;}
.checkbox-group h6{
font-size: 14px;
line-height: 17px;
font-weight: 300;
color: #fff;
text-transform: uppercase;
margin-bottom: 15px;
}
.footer-right h6{
color: #fff;
font-size: 20px;
line-height: 25px;
font-weight: 500;
letter-spacing: 0.5px;
}
.footer-right p{
color: #f0f0f0;
font-size: 14px;
line-height: 18px;
font-weight: 200;
width: 100%;
display: block;
}
.item-menu {
opacity: 1;
transition: opacity 0.3s ease;
}
.item-menu:hover {
opacity: 1 !important;
}
.dropdown-open .item-menu {
opacity: 1 !important;
}
.scroll .item-menu {
opacity: 1 !important;
}
.scroll .item-menu:hover .icon-square{
border: 1px solid #122b54;
}
.scroll .item-menu:hover .icon-line{
background-color: #122b54;
}
.scroll .item-menu span {
color: #122b54;
}
.scroll .item-menu:hover span{
color: #122b54;
}
.input-c {-moz-appearance: none!important;-webkit-appearance: none!important;appearance: none!important;background-color: #f0f0f0;background-image: url(/assets/frontend/img/svg/piu_icona_pos.svg)!important;background-size: 13px!important;background-repeat: no-repeat!important;background-position: calc(100% - 16px) center!important;cursor: pointer!important;line-height: 25px;font-size: 16px;}
.menu-mobile{
display: none;
}
.mobile-menu-container {
display: none;
}
.mobile-blog-news-btn{
display: none;
}
.blog-ban-cta-b{
display: flex;
gap: 15px;
align-items: center;
background: #122b54;
border-radius: 12px;
padding: 15px 3rem;
justify-content: center;
border: 2px solid #122b54;
}
.blog-ban-cta-b span{
color: #fff;
font-size: 14px;
line-height: 14px;
font-weight: 500;
text-transform: uppercase;
}
.blog-ban-cta-b svg{
width: 1rem;
height: 1rem;
stroke: #fff;
}
.hero {
position: relative;
padding-top: 6rem;
}
.hero.maincategory-hero{
padding-bottom: 10rem;
}
.hero.small{
padding-bottom: 4rem;
}
.breadcrumbs-container ul {
display: flex;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumbs-container li {
display: flex;
align-items: center;
font-size: 13px;
font-weight: 300;
}
.breadcrumbs-container li:not(:last-child)::after {
content: "/";
margin: 0 6px;
color: #666;
}
.breadcrumbs-container a {
color: #122b54;
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumbs-container a:hover {
color: #333;
}
.breadcrumbs-container li.active a {
color: #122b54;
font-weight: 600;
}
.breadcrumbs-container.withe a {
color: #fff;
}
.breadcrumbs-container.withe li:not(:last-child)::after {
color: #fff;
}
.breadcrumbs-container.withe li.active a {
color: #fff;
}
.breadcrumbs-container.withe a:hover {
color: #fff;
}
.breadcrumbs-container.withe li span{
color: #fff;
}
.hero-title-b {
margin-top: 1rem;
}
.hero-title-b h1 {
font-size: 70px;
line-height: 70px;
font-weight: 300;
color: #122b54;
}
.hero-title-b h1 span {
font-weight: 500;
font-size: 70px;
line-height: 70px;
margin-right: 0;
}
.hero-title-c {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.hero-title-z {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.hero-title-z h1{
font-size: 60px;
line-height: 58px;
font-weight: 500;
color: #122b54;
margin: 0;
}
.hero-title-c h1{
font-size: 80px;
line-height: 80px;
font-weight: 500;
color: #122b54;
margin: 0;
}
.hero-title-c h2 {
font-size: 60px;
line-height: 60px;
font-weight: 300;
color: #122b54;
margin: 0;
}
.hero-title-c p {
font-size: 18px;
line-height: 24px;
font-weight: 300;
color: #122b54;
}
.hero-title-d {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-title-d h1 {
font-size: 80px;
line-height: 80px;
font-weight: 500;
color: #fff;
}
.hero-title-d h1 span {
font-weight: 500;
font-size: 70px;
line-height: 70px;
margin-right: 0;
}
.hero-title-d h2 {
font-size: 40px;
line-height: 40px;
font-weight: 300;
color: #fff;
}
.hero-title-d p , .hero-title-f p{
font-size: 18px;
line-height: 23px;
font-weight: 300;
color: #fff;
}
.hero-title-f {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-title-d{
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-title-c{
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-title-f h1 {
font-weight: 500;
font-size: 80px;
line-height: 80px;
margin-right: 0;
color: #fff;
}
.hero-title-f h2 {
font-size: 70px;
line-height: 70px;
font-weight: 300;
color: #fff;
}
.hero {
position: relative;
padding-top: 13rem;
padding-bottom: 14rem;
}
.hero.category-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--hero-bg-image);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.6);
z-index: -1;
}
.hero.soste::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(/assets/frontend/img/jpg/banner-sostenibilita.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.6);
z-index: -1;
}
.hero.azienda::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(/assets/frontend/img/jpg/fail_azienda_cover.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.6);
z-index: -1;
}
.hero.design-pvc{
padding-bottom: 4rem;
}
.hero.design-pvc::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(/assets/frontend/img/jpg/design_cover.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.6);
z-index: -1;
}
.hero.design-alluminio{
padding-bottom: 4rem;
}
.hero.design-alluminio::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(/assets/frontend/img/jpg/design-alluminio_cover.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.6);
z-index: -1;
}
.hero.comfort-pvc{
padding-bottom: 4rem;
}
.hero.comfort-pvc::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(/assets/frontend/img/jpg/comfort_cover.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.6);
z-index: -1;
}
.hero.comfort-alluminio{
padding-bottom: 4rem;
}
.hero.comfort-alluminio::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(/assets/frontend/img/jpg/comfort-alluminio_cover.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.6);
z-index: -1;
}
.hero.sicurezza-pvc{
padding-bottom: 4rem;
}
.hero.sicurezza-pvc::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(/assets/frontend/img/jpg/sicurezza_cover.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.6);
z-index: -1;
}
.hero.sicurezza-alluminio{
padding-bottom: 4rem;
}
.hero.sicurezza-alluminio::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(/assets/frontend/img/jpg/sicurezza-alluminio_cover.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.6);
z-index: -1;
}
.hero.landing-img::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: var(--before-bg);background-position: center;background-repeat: no-repeat;background-size: cover;/* filter: brightness(0.6); */z-index: -1;}
.blog-tab-menu {
margin-bottom: 2rem;
position: relative;
background-color: #f7f7f7;
border-radius: 15px;
}
.blog-tab-menu ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 0;
min-width: min-content;
justify-content: space-between;
position: relative;
}
.blog-tab-menu li {
color: #9fa5b0;
opacity: 0.8;
cursor: pointer;
transition: all 0.3s ease;
padding: 20px 2rem;
white-space: nowrap;
font-size: 13px;
line-height: 14px;
font-weight: 600;
user-select: none;
text-transform: uppercase;
position: relative;
width: 100%;
display: flex;
justify-content: center;
letter-spacing: 0.5px;
}
.blog-tab-menu li:hover {
opacity: 1;
}
.blog-tab-menu li.active {
color: #FF6B00;
opacity: 1;
font-weight: 700;
}
.blog-tab-menu li.colors-active {
color: #122b54;
opacity: 1;
font-weight: 700;
background-color: #fff;
box-shadow: 0px 0px 18px 5px rgba(0, 0, 0, 0.1);
border-radius: 15px;
}
.blog-tab-menu li.handles-active {
color: #FF6B00;
opacity: 1;
font-weight: 700;
}
.blog-tab-menu li.active::after {
content: '';
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 5px;
border-radius: 4px;
background-color: #FF6B00;
z-index: 2;
}
.news-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
min-height: 200px;
padding-bottom: 4rem;
}
.news-card {
transition: opacity 0.3s ease-in-out;
will-change: opacity;
}
.news-card.fade {
opacity: 0;
}
.news-card.blog-ban-card{
width: 100%;
}
.news-content{
display: flex;
justify-content: space-between;
}
.news{
padding-bottom: 6rem;
}
.news-img{
display: block;
width: 100%;
height: 75vh;
background-position: top;
background-repeat: no-repeat;
background-size: contain;
margin-bottom: 4rem;
}
.tab-container {
display: flex;
flex-direction: column;
}
.tab-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 25px;
background-color: #f0f0f0;
border-radius: 6px;
cursor: pointer;
margin-bottom: 0;
transition: all 0.3s ease;
}
.tab-header h6{
color: #122b54;
margin: 0;
transition: all 0.3s;
}
.tab-header h6 {
font-size: 14px;
line-height: 14px;
font-weight: 500;
text-transform: uppercase;
}
.tab-header:hover, .tab-header.active {
background-color: #122b54;
}
.tab-header:hover h6, .tab-header.active h6 {
color: #fff;
}
.tab-body {
background-color: #fff;
border-radius: 7px;
margin-bottom: 10px;
height: 0;
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: all 0.3s ease;
}
.tab-body::-webkit-scrollbar {
display: block;
width: 10px;
height: 3rem;
}
.tab-body::-webkit-scrollbar-track {
background: #f1f1f1;
}
.tab-body::-webkit-scrollbar-thumb {
background: #122b5450;
border-radius: 3px;
cursor: pointer;
}
.tab-body.active {
padding: 15px 25px;
min-height: 125px;
max-height: 230px;
opacity: 1;
visibility: visible;
overflow-y: auto;
transition: all 0.3s ease;
position: relative;
padding-top: 2rem;
}
.other-news {
opacity: 0;
transition: opacity 0.3s ease-out;
padding-bottom: 1.5rem;
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
}
.other-news:not(:first-child) {
padding-top: 1.5rem;
}
.other-news:not(:last-child) {
border-bottom: 1px solid #f0f0f0;
}
.tab-body.active .other-news {
opacity: 1;
transition-delay: 0.2s;
}
.other-news-img {
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 30%;
height: 4rem;
flex-shrink: 0;
}
.other-news-txt {
width: 70%;
display: flex;
flex-direction: column;
gap: 5px;
}
.other-news-txt h6 {
color: #122b54;
font-size: 18px;
font-weight: 700;
line-height: 18px;
margin: 0;
}
.other-news-txt p {
color: #122b54;
font-size: 12px;
font-weight: 300;
line-height: 14px;
margin: 0;
}
.col-tab {
width: 30%;
}
.tab-header:hover .icon-square, .tab-header.active .icon-square{
border: 1px solid #fff;
}
.tab-header:hover .icon-line, .tab-header.active .icon-line{
background-color: #fff;
}
.tab-header.active .icon-vertical{
transform: translateX(-50%) rotate(90deg);
}
.social-share{
margin-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
}
.social-share span{
font-size: 18px;
line-height: 18px;
font-weight: 700;
color: #122b54;
text-transform: uppercase;
}
.social-icon-container{
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: center;
}
.social-icon{
display: flex;
height: 3rem;
width: 3rem;
border: 2px solid #122b54;
border-radius: 4px;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
.social-icon svg{
width: 1rem;
height: 1rem;
transition: all 0.3s;
}
.social-icon:hover{
background-color: #122b54;
}
.social-icon:hover svg{
fill:#fff;
}
.social-icon:hover #Dribbble-Light-Preview{
fill:#fff!important;
}
.footer-info {display: flex;flex-direction: column;gap: 2px;font-size: 12px;line-height: 15px;font-weight: 100;color: #f0f0f0;text-align: left;padding-top: 0;color: #f0f0f0;MARGIN-TOP: AUTO;}
.footer-info:first-child {
text-transform: uppercase;
}
.footer-info span:last-child {
padding-right: 0;
}
.footer-info a {
text-decoration: none;
color: #fff;
transition: all 0.3s;
}
.footer-info a span{
border-bottom: 1px solid #ffffff90;
transition: all 0.3s;
}
.footer-info a:hover {
color: #ffffff90;
}
.footer-info a:hover span{
border-bottom: 1px solid #ffffff70;
}
.template-image{
display: block;
height: 60vh;
width: 100%;
margin: 2rem 0;
background-repeat: no-repeat;
}
.template-text{
padding: 2rem 0;
display: flex;
flex-direction: column;
gap: .5rem;
}
.template-title h2{
font-size: 40px;
line-height: 40px;
font-weight: 700;
color: #122b54;
}
.template-subtitle h3{
font-size: 30px;
line-height: 30px;
font-weight: 400;
color: #122b54;
}
.news-text, .template-content{
color: #122b54;
}
.news-text{
margin-bottom: 0;
}
.content-container{
display: flex;
}
.col-desc-p{
display: flex;
flex-direction: column;
gap: 2rem;
}
.col-desc-p{
width: 47%;
}
.col-space{
width: 6%;
}
.col-desc-p p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.col-desc-p p a{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 400;
text-decoration: underline;
}
.col-desc-p span{
font-weight: 600;
}
.numbers{
padding-top: 7rem;
padding-bottom: 7rem;
}
.numbers-container{
display: flex;
align-items: center;
justify-content: space-around;
gap: 1rem;
}
.numbers-col{
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: space-between;
padding: 2rem;
align-items: center;
}
.num-image{
display: block;
width: 100%;
height: 6rem;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.num span{
color: #122b54;
font-size: 90px;
line-height: 90px;
font-weight: 700;
}
.num-name span{
color: #122b54;
font-size: 30px;
line-height: 30px;
font-weight: 300;
}
.milestones-mobile{
display: none;
}
.milestones{
background-color: #122b54;
padding-top: 5rem;
padding-bottom: 6rem;
}
.mile-title h2{
color: #fff;
font-size: 60px;
font-weight: 400;
}
.years-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.year span{
color: #fff;
font-size: 35px;
font-weight: 500;
}
.year{
position: relative;
padding-bottom: 1rem;
padding-top: 2rem;
}
.timeline::after{
display: block;
content: '';
width: 75%;
height:2px;
background-color: #fff;
transform: translateX(10px);
}
.point{
display: block;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #ffffff50;
position: absolute;
bottom: -16px;
left: -4px;
}
.inner-point{
display: block;
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: #ffffff;
position: absolute;
bottom: -8px;
left: 4px;
}
.year-desc{
padding-top: 2rem;
padding-right: 2.6rem;
}
.year-desc p{
color: #fff;
font-size: 18px;
line-height: 23px;
font-weight: 200;
}
.year-desc span{
font-weight: 400;
}
.impianti{
padding-top: 5rem;
padding-bottom: 5rem;
}
.impanti-container{
display: flex;
flex-direction: column;
gap: 2rem;
}
.impianti-title h4{
color: #122b54;
font-size: 60px;
line-height: 56px;
font-weight: 400;
}
.impianti-desc{
display: flex;
flex-direction: column;
gap: 2rem;
}
.impianti-desc p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.impianti-desc p span{
font-weight: 500;
}
.impianti-desc p a{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 500;
text-decoration: underline;
}
.impianti-desc .mini-p{
color: #122b54;
font-size: 16px;
line-height: 17px;
font-weight: 300;
}
.impianti-ul li span{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 500;
text-transform: uppercase;
}
.impianti-ul.orange li span{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 500;
text-transform: uppercase;
}
.impianti-ul li:not(:last-child){
margin-bottom: 15px;
}
.impianti-ul li{
padding-left: 2rem;
position: relative;
}
.impianti-ul li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 14px;
background-image: url("/assets/frontend/img/svg/piu_icona_pos.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.impianti-ul li p span{
font-weight: 500;
text-transform: none;
}
.impianti-ul li p a{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 500;
text-decoration: underline;
}
.impianti-ul li p i{
font-weight: 500;
text-transform: none;
font-style: normal;
}
.impianti-video-container{
padding-right: 2rem;
display: block;
width: 100%;
height: 50vh;
}
.video-iframe {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin-top: 9px;
}
.video-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.banner-cert{
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #f0f0f0;
}
.banner-cert-title h2 {
color: #122b54;
margin: 0;
font-size: 60px;
line-height: 56px;
font-weight: 300;
}
.banner-cert-title h2 span{
font-weight: 500;
}
.banner-cert-ul{
padding-top: 2rem;
padding-bottom: 2rem;
}
.banner-cert-ul li{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.banner-cert-ul li span{
font-weight: 500;
}
.banner-cert-ul li:not(:last-child){
margin-bottom: 1rem;
}
.banner-cert-ul li{
padding-left: 2rem;
position: relative;
}
.banner-cert-ul li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 14px;
background-image: url("/assets/frontend/img/svg/piu-2.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.hero-b{
position: relative;
padding-top: 0;
border-bottom: 0;
}
.splash-hero-container{
display: flex;
border-bottom-right-radius: 90px;
border-bottom-left-radius: 90px;
}
.splash-hero{
padding: 5rem;
padding-top: 10rem;
padding-bottom: 5rem;
padding-right: 4rem;
padding-left: 7rem;
min-height: 90vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.prod-img{
display: block;
width: 100%;
height: 100%;
min-height: 90vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-bottom-right-radius: 90px;
}
.prod-img.height-max{
min-height: 70vh;
background-size: contain;
margin-top: 8rem;
height: inherit;
}
.product-description{
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 0;
}
.product-description p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.product-description p span{
font-weight: 500;
}
.splash-buttons{
display: flex;
gap: 1rem;
justify-content: flex-start;
align-items: center;
margin-top: 2.5rem;
}
.minimal-splash{
display: flex;
padding-top: 1rem;
padding-bottom: 0;
}
.minimal-list li{
display: flex;
gap: 1rem;
justify-content: flex-start;
align-content: flex-start;
align-items: center;
}
.minimal-list li{
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid #122b5430;
}
.minimal-text{
flex-direction: column;
gap: 0;
margin: 0;
justify-content: flex-start;
}
.min-svg {
display: block;
width: 2rem;
height: 2rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.min-svg img{
width: 2.5rem;
height: 100%;
}
.min-title h6{color: #122b54;font-size: 16px;line-height: 33px;font-weight: 300;/* text-transform: uppercase; */margin: 0;}
.min-desc p{
color: #122b54;
font-size: 16px;
line-height: 20px;
font-weight: 300;
margin: 0;
}
.minimal-img{
display: block;
width: 100%;
height: 70vh;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
.minimal-button{
display: flex;
padding-top: 3rem;
}
.minimal-cta {
text-transform: uppercase;
display: flex;
padding: 15px 50px;
background-color: #fff;
color: #122b54;
text-decoration: none;
border-radius: 10px;
text-align: center;
transition: all 0.3s;
border: 2px solid #122b54;
font-size: 14px;
font-weight: 500;
align-items: center;
justify-content: center;
gap: 1rem;
}
.minimal-cta:hover{
background-color: #122b54;
color: #fff;
}
.slider-product-half{
border-radius:50px
}
.slider-product-half .swiper{
border-radius:50px
}
.product-b.swiper-slide {
height: 70vh;
filter: brightness(1);
border-radius: 50px;
}
.domo-img.swiper-slide {
filter: brightness(1);
}
.swiper-button-c{
cursor: pointer;
display: flex;
border: 2px solid #122b54;
border-radius: 10px;
width: 3rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.swiper-nav-b {
position: absolute;
top: 63%;
width: 100%;
max-width: 1400px;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
flex-direction: row;
gap: 1rem;
z-index: 9;
pointer-events: none;
}
.half-nav-swiper {
position: absolute;
top: 50%;
width: 100%;
max-width: 1400px;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
flex-direction: row;
gap: 1rem;
z-index: 9;
pointer-events: none;
}
.swiper-button-c{
cursor: pointer;
display: flex;
border: 2px solid #00000050;
border-radius: 10px;
width: 3rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
pointer-events: auto;
}
.swiper-button-c svg {
width: 1rem;
height: 1rem;
fill: #00000050;
transition: all 0.3s;
}
.swiper-button-c:hover{
border-color: #122b54;
}
.swiper-button-c:hover svg{
fill: #122b54;
}
.swiper-button-c.prev-c{
transform: translateX(2rem);
background: #fff;
}
.swiper-button-c.next-c{
transform: translateX(-2rem);
background: #fff;
}
.myProductSwiper{
padding-bottom: 5rem;
border-bottom: 1px solid #122b5450;
}
.info-prod-container{
display: flex;
padding-bottom: 5rem;
border-bottom: 1px solid #122b5450;
}
.info-prod-text{
display: flex;
flex-direction: column;
gap: 2rem;
}
.info-prod-desc{
display: flex;
flex-direction: column;
gap: 0;
}
.info-prod-desc h5{
color: #122b54;
font-size: 16px;
line-height: 17px;
font-weight: 700;
margin: 0;
text-transform: uppercase;
}
.mini-span{
color: #122b54;
font-size: 14px;
line-height: 17px;
font-weight: 300;
margin: 0;
padding-left: 0;
padding-top: 1rem;
}
.info-prod-buttons{
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 2rem;
}
.scheda-btn {
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
}
.scheda-cta {
background-color: #fff;
padding: 15px 3rem;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
border: 2px solid #122b54;
gap: 1rem;
}
.scheda-cta svg {
width: 1rem;
height: 2rem;
transform: rotate(90deg);
transition: all 0.3s;
}
.scheda-cta span {
color: #122b54;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
transition: all 0.3s;
padding-right: 2.5rem;
}
.scheda-cta:hover{
background-color: #122b54;
}
.scheda-cta:hover span{
color: #fff;
}
.scheda-cta:hover .cls-22{
fill: #fff;
}
.scheda-cta:hover svg{
transform: rotate(180deg);
}
.find-beta-btn {
display: flex;
justify-content: flex-start;
align-items: center;
}
.find-beta-cta {
background-color: #fff;
padding: 15px 3.85rem;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
border: 2px solid #122b54;
gap: 1rem;
}
.find-beta-cta span {
color: #122b54;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
transition: all 0.3s;
}
.find-beta-cta:hover{
background-color: #122b54;
}
.find-beta-cta:hover span{
color: #fff;
}
.info-prod-img{
display: block;
width: 100%;
height: 80vh;
background-image: url('/assets/frontend/img/png/ultraluce82_angolo.png');
background-position: center right 5rem;
background-repeat: no-repeat;
background-size: contain;
}
.section-colors, .section-handle, .section-portoncini{
padding-top: 5rem;
padding-bottom: 5rem;
}
.colors-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2rem;
min-height: 100px;
}
.color-card {width: 100%;display: flex;flex-direction: column;gap: 1rem;justify-content: flex-start;margin-bottom: 0;}
.color-card.fade {
opacity: 0;
}
.color-card {
transition: opacity 0.3s ease-in-out;
will-change: opacity;
}
.color-card {
transition: opacity 0.3s ease;
}
.color-card.fade-out {
opacity: 0;
}
.color-img, .accessory-img{
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 140px;
flex-shrink: 0;
overflow: hidden;
border: 2px solid #f7f7f7;
border-radius: 15px;
}
.color-experience{
padding: 7px;
background-color: #122b54;
border-radius: 4px;
color: #fff;
text-transform: uppercase;
font-size: 9px;
position: absolute;
top: 10px;
right: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.color-experience svg{
width: 20px;
height: 20px;
}
.color-text, .accessory-text{
display: flex;
flex-direction: column;
gap: 2px;
}
.color-text h4, .accessory-text h4{
color: #122b54;
font-size: 16px;
line-height: 18px;
font-weight: 500;
margin: 0;
}
.color-text h5{color: #122b54;font-size: 16px;line-height: 18px;font-weight: 500;/* text-transform: uppercase; */margin: 0;}
.handle-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
min-height: 100px;
padding-bottom: 5rem;
border-bottom: 1px solid #122b5450;
}
.handle-card {
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: space-between;
padding-left: 4rem;
padding-right: 4rem;
margin-bottom: 2rem;
}
.handle-card.fade {
opacity: 0;
}
.handle-card {
transition: opacity 0.3s ease-in-out;
will-change: opacity;
}
.handle-card {
transition: opacity 0.3s ease;
}
.handle-card.fade-out {
opacity: 0;
}
.handle-img{
width: 100%;
background-position: center left 0rem;
background-repeat: no-repeat;
background-size: contain;
position: relative;
height: 230px;
flex-shrink: 0;
overflow: hidden;
}
.handle-experience{
padding: 7px;
background-color: #122b54;
border-radius: 4px;
color: #fff;
text-transform: uppercase;
font-size: 9px;
position: absolute;
top: 0;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.handle-experience svg{
width: 20px;
height: 20px;
}
.handle-text{
display: flex;
flex-direction: column;
gap: 2px;
}
.handle-text h4{
color: #122b54;
font-size: 16px;
line-height: 18px;
font-weight: 700;
text-transform: uppercase;
margin: 0;
}
.handle-text h5{
color: #122b54;
font-size: 16px;
line-height: 18px;
font-weight: 400;
text-transform: uppercase;
margin: 0;
}
.find-form-banner{
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #122b54;
}
.find-form-container{
display: flex;
flex-direction: column;
gap: 1rem;
height: 100%;
justify-content: left;
}
.find-title-b h4{
font-size: 50px;
line-height: 54px;
font-weight: 300;
color: #fff;
}
.find-title-b h4 span{
font-weight: 500;
}
.find-form-info p{
color: #fff;
font-size: 18px;
line-height: 21px;
font-weight: 100;
}
.find-form-info p span{
font-weight: 400;
}
.find-form-btn{
display: flex;
cursor: pointer;
}
.find-form-cta{
background-color: #fff;
border: 2px solid #fff;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 15px 5rem;
border-radius: 12px;
transition: all 0.3s;
}
.find-form-cta svg{
width: 1rem;
height: 1rem;
transition: all 0.3s ease;
}
.find-form-cta span{
color: #122b54;
font-size: 14px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
transition: all 0.3s ease;
}
.find-form-cta:hover{
background-color: #122b54;
}
.find-form-cta:hover span{
color: #fff;
}
.find-form-cta:hover .cls-12{
stroke: #fff;
}
.correlati{
padding-top: 5rem;
padding-bottom: 5rem;
}
.correlati-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding-top: 1rem;
}
.corr-card{
display: flex;
border: 1px solid #122b5430;
border-radius: 10px;
padding: 2rem;
gap: 1.5rem;
transition: all 0.3s ease;
}
.corr-card:hover{
box-shadow: 0 4px 20px 5px rgba(0, 0, 0, 0.1);
}
.corr-img{
display: block;
width: 10rem;
height: 10rem;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
flex-shrink: 0;
}
.corr-txt{
display: flex;
flex-direction: column;
gap: 5px;
padding-top: 1rem;
padding-bottom: 1rem;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
flex-grow:1 ;
}
.corr-txt h6{
font-size: 30px;
line-height: 30px;
font-weight: 700;
color: #122b54;
margin: 0;
}
.corr-txt p{
font-size: 21px;
line-height: 21px;
font-weight: 300;
color: #122b54;
margin: 0;
width: 75%;
}
.suggest-container{
padding-top: 5rem;
}
.suggest-cards-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
padding-top: 1rem;
}
.suggest-cards-container.single-item {
grid-template-columns: 1fr;
}
.suggest-card {
position: relative;
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;
height: 10rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
justify-content: center;
align-items: flex-start;
padding: 10rem 5rem;
border-radius: 15px;
overflow: hidden;
}
.suggest-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: inherit;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.8);
z-index: 1;
}
.suggest-card * {
position: relative;
z-index: 2;
}
.sugg-title h6{
font-size: 40px;
line-height: 40px;
font-weight: 700;
color: #fff;
margin: 0;
}
.sugg-btn {
display: flex;
}
.sugg-cta {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 15px 3rem;
background-color: transparent;
border-radius: 12px;
transition: all 0.3s;
border: 2px solid #fff;
}
.sugg-cta span{
color: #fff;
font-size: 14px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
transition: all 0.3s ease;
}
.sugg-cta svg{
width: 1rem;
height: 1rem;
fill: #fff;
}
.suggest-card:hover .sugg-cta{
background-color: #122b54;
border-color: #122b54;
}
.handle-desc{
margin-bottom: 2rem;
}
.handle-desc p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.template-content ul {
margin-top: 1rem!important;
margin-bottom: 1rem!important;
padding-left: 0;
}
.template-content ul li {
position: relative;
padding-left: 28px;
margin-bottom: 4px;
font-weight: 300;
font-size: 18px;
}
.template-content ul li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 14px;
background-image: url("/assets/frontend/img/svg/piu-2.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.template-content p{
font-size: 18px;
font-weight: 300;
}
.news-text p{
font-weight: 300;
font-size: 18px;
}
.no-posts p{
font-weight: 300;
font-size: 18px;
color: #122b54;
}
.cert-wrapper{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
padding-top: 4rem;
padding-bottom: 6rem;
border-bottom: 1px solid #122b5450;
}
.cert-img{
display: block;
width: 100%;
height: 7rem;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.partner-container{
padding-top: 5rem;
padding-bottom: 2rem;
}
.partner-wrapper{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding-top: 4rem;
padding-bottom: 0;
}
.partner-img{
display: block;
width: 100%;
height: 7rem;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
filter: grayscale(100%);
transition: all 0.3s ease;
}
.partner-img:hover{
filter: grayscale(0%);
}
.made-container{
display: flex;
flex-direction: column;
gap: 0rem;
padding-top: 2rem;
}
.banner-made {
padding-top: 5rem;
padding-bottom: 5rem;
}
.made-img{
display: block;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.banner-become{
padding-top:5rem;
padding-bottom: 5rem;
background-color: #122b54;
}
.become-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.become-btn {
display: flex;
}
.become-cta {
background-color: #122b54;
border-radius: 7px;
display: flex;
gap: 2rem;
justify-content: center;
align-items: center;
padding: 15px 3rem;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid #122b54;
}
.become-cta span {
color: #fff;
font-size: 14px;
line-height: 17px;
font-weight: 500;
text-transform: uppercase;
transition: all 0.3s ease;
}
.become-cta:hover {
background-color: #122b54;
border: 2px solid #fff;
}
.become-cta svg{
width: 1rem;
height: 1rem;
}
.products-description{
display: flex;
flex-direction: column;
gap: 1rem;
padding-bottom: 5rem;
border-bottom: 1px solid #122b5450;
}
.products-description p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.products-description p span{
font-weight: 500;
}
.banner-perfect {
padding-top: 4rem;
padding-bottom: 4rem;
position: relative;
background-color: #f0f0f0;
}
.perfect-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.bottom-product.perfect{
flex: none;
}
.hero-description{
padding: 2rem 0 5rem 0;
}
.hero-subtitle{
padding: 1rem 0 2rem 0;
}
.hero-subtitle h2{
font-weight: 200;
font-size: 50px;
line-height: 55px;
display: inline-block;
margin: 0;
color: #fff;
}
.hero-description p{
color: #fff;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.soste-section{
padding-top: 5rem;
padding-bottom: 0;
}
.soste-container{
padding-bottom: 5rem;
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 5rem;
}
.soste-inner {
display: flex;
flex-direction: column;
gap: 0rem;
}
.soste-gallery-container{
padding-top: 5rem;
}
.soste-desc{
display: flex;
flex-direction: column;
gap: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
.maniglie-desc{
display: flex;
flex-direction: column;
padding-bottom: 2rem;
}
.maniglie-desc p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.maniglie-desc p span{
font-weight: 500;
}
.soste-desc p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.soste-desc p span{
font-weight: 500;
}
.hermans-gallery {
padding-bottom: 4rem;
}
.hermans-gallery-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
height: 32rem;
overflow: hidden;
transition: height 0.3s ease;
}
.hermans-gallery-container.expanded {
height: max-content;
}
.hermans-img {
display: block;
height: 15rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
border: 1px solid #122b54;
}
.gallery-pattern {
background: #000000ad;
position: fixed;
top: 0;
width: 100%;
display: flex;
height: 100%;
z-index: 9999;
align-content: center;
align-items: center;
left: 0;
transition: 0.5s;
opacity: 0;
visibility: hidden;
justify-content: center;
}
.close-gallery {
position: absolute;
z-index: 999;
color: #fff;
top: 0.5rem;
height: 1.5rem;
right: 1.5rem;
width: 1.5rem;
cursor: pointer;
}
.controls {
display: flex;
align-content: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
position: relative;
align-items: center;
width: 100%;
z-index: 11;
margin: auto 8rem;
}
.images-gallery {
top: 0;
position: fixed;
width: 100%;
z-index: 10;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.box-image-gallery {
width: 80%;
top: 0rem;
display: flex;
height: 70vh;
position: relative;
flex-wrap: nowrap;
flex-direction: row;
align-content: center;
justify-content: center;
}
.item-gallery {
width: 100%;
display: none;
text-align: center;
}
.item-gallery.animate__animated {
animation-duration: 0.3s;
--animate-delay: 0.3s;
}
.item-gallery > img {
max-width: 100%;
height: auto;
max-height: 70vh;
border-radius: 0;
max-width: 77vw;
}
.show-more-btn {
width: 100%;
display: flex;
justify-content: center;
}
.gallery-toggle {
cursor: pointer;
}
.cta-content {
display: flex;
gap: 20px;
align-items: center;
}
.cta-content svg {
fill: #fff;
width: 1rem;
transition: all 0.3s;
mix-blend-mode: difference;
}
.arrow-cta svg {
width: 1rem;
height: 1rem;
transition: all 0.3s;
}
.arrow-cta{
display: flex;
}
.cta-content span {
font-size: 12px;
line-height: 14px;
font-weight: 600;
transition: all 0.3s;
text-transform: uppercase;
}
.cta-c {
padding: 14px 30px;
border: 2px solid #122b54;
border-radius: 8px;
transition: all 0.3s;
background-color: transparent;
}
.cta-c .cta-content span {
color: #122b54;
}
.cta-c:hover {
background-color: #122b54;
}
.cta-c:hover .cta-content span {
color: #fff;
}
.cta-c:hover .cls-111{
stroke: #fff;
}
.show {
visibility: visible !important;
opacity: 1 !important;
transform: translateY(0);
}
.item-gallery.show {
display: block;
}
.button-c {
width: 2rem;
height: 2rem;
text-align: center;
color: var(--default-color);
padding: 2px 0px;
transition: 0.5s all;
cursor: pointer;
}
.event-btn-sec{
padding-bottom: 5rem;
}
.banner-produzione {
padding-top: 6rem;
padding-bottom: 6rem;
position: relative;
}
.banner-produzione::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/assets/frontend/img/jpg/banner-produzione-sostenibile.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.7);
z-index: -1;
}
.banner-design {
padding-top: 10rem;
padding-bottom: 5rem;
position: relative;
}
.banner-design::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/assets/frontend/img/jpg/banner_lavorazioni-di-design.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.7);
z-index: -1;
}
.produzione-content {
display: flex;
flex-direction: column;
gap: 2rem;
position: relative;
}
.produzione-title h2 {
font-size: 50px;
line-height: 54px;
font-weight: 300;
color: #fff;
margin-bottom: 0;
}
.produzione-title h2 span{
font-weight: 500;
}
.produzione-desc p{
color: #fff;
font-weight: 500;
font-size: 17px;
line-height: 21px;
}
.banner-visita{
padding-top: 2rem;
padding-bottom: 5rem;
}
.visita-container {
display: flex;
flex-direction: column;
gap: 0rem;
}
.visita-desc{
padding-top: 4rem;
display: flex;
flex-direction: column;
}
.visita-desc p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.visita-desc p span{
font-weight: 500;
}
.visita-desc p a{
font-weight: 500;
text-decoration: underline;
color: #122b54;
transition: all 0.3s;
}
.visita-desc p a:hover{
color: #000;
}
.diventa-content p {
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.diventa-content{
display: flex;
flex-direction: column;
gap: 2rem;
padding-top: 2rem;
padding-bottom: 4rem;
}
.diventa-content p span{
font-weight: 500;
}
.diventa-content p a{
text-decoration: underline;
font-weight: 500;
color: #122b54;
transition: all 0.3s;
}
.diventa-content p a:hover{
color: #000;
}
.contatti-section{
padding-top: 1rem;
padding-bottom: 1rem;
}
.contatti-content{
display: flex;
flex-direction: column;
gap: 2rem;
}
.contatti-desc{
display: flex;
flex-direction: column;
gap: 5px;
}
.contatti-desc h4 {
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 500;
text-transform: uppercase;
}
.contatti-desc p {
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.contatti-cards-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4rem;
padding-top: 2rem;
padding-bottom: 5rem;
}
.contatti-card{
display: flex;
gap: 3rem;
padding: 2rem 4rem;
background-color: #f0f0f0;
border-radius: 30px;
align-items: center;
justify-content: flex-start;
transition: all 0.3s;
}
.contatti-img{
display: flex;
width: 4rem;
height: 4rem;
}
.contatti-img img{
display: block;
width: 4rem;
height: 4rem;
}
.contatti-text{
display: flex;
flex-direction: column;
gap: 7px;
}
.contatti-text span{
color: #122b54;
font-size: 14px;
line-height: 14px;
font-weight: 500;
text-transform: uppercase;
}
.contatti-text h4{
color: #122b54;
font-size: 30px;
line-height: 30px;
font-weight: 500;
}
.contatti-text.orange span, .contatti-text.orange h4{
color: #122b54;
}
.contatti-card:hover {
background-color: #fff;
box-shadow: 0 4px 20px 5px rgba(0, 0, 0, 0.1);
transform: scale(1.02);
}
.find-desc p{
color: #fff;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.find-cta.beta {
background-color: #122b54;
border: 2px solid #fff;
padding: 15px 3.5rem;
}
.find-cta.beta span {
color: #fff;
}
.find-cta.beta:hover{
background-color: #fff;
}
.find-cta.beta:hover span{
color: #122b54;
}
.find-cta.beta:hover .cls-142{
stroke: #122b54;
}
.banner-newsletter{
padding-top: 5rem;
padding-bottom: 5rem;
}
.find-title-c h4{
font-size: 50px;
line-height: 54px;
font-weight: 300;
color: #122b54;
}
.find-title-c h4 span{
font-weight: 500;
}
.find-desc-c{
padding-top: 1rem;
display: flex;
flex-direction: column;
gap: 15px;
}
.find-desc-c p {
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.find-desc-c p a{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.find-desc-c p span{
font-weight: 500;
}
.find-desc-d{
padding-top: 13px;
display: flex;
flex-direction: column;
gap: 15px;
}
.find-desc-d p {
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.find-desc-d p a{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.find-desc-d p span{
font-weight: 500;
}
.input-group.grey input, .input-group.grey .input-c {
border: 1px solid #f0f0f0;
background: #f0f0f0;
color: #122b54;
}
.input-group.grey .input-c {
-moz-appearance: none !important;
-webkit-appearance: none !important;
appearance: none !important;
background: url(/assets/frontend/img/svg/piu.svg) !important;
background-size: 15px !important;
background-repeat: no-repeat !important;
background-position: calc(100% - 10px) center !important;
cursor: pointer !important;
background-color: #f0f0f0 !important;
}
.input-group.grey input::placeholder, .input-d::placeholder{
color: #9fa5b0;
font-size: 16px;
font-weight: 400;
}
.input-group.grey .input-c option{
color: #9fa5b0;
font-size: 16px;
font-weight: 400;
;
cursor: pointer;
}
.privacy-label.grey span {
color: #122b54;
font-weight: 300;
}
.privacy-label.grey .checkbox-c[type=checkbox]{
background: #f0f0f0;
border: 1px solid #f0f0f0;
flex: 0 0 20px;
}
.privacy-label.grey .checkbox-c:checked[type=checkbox] {
background-size: 15px 11px;
background-position: center;
background-repeat: no-repeat;
background-image: url(/assets/frontend/img/svg/chiudi_icona_pos.svg);
border: 1px solid #122b54;
}
.checkbox-group.grey h6 {
font-weight: 600;
color: #122b54;
}
.privacy-label.grey span a {
color: #122b54;
}
.banner-candidatura {
padding-top: 1rem;
padding-bottom: 5rem;
}
.cv-sec{
padding-top: 0;
}
.cv-title{
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 0.7rem;
}
.cv-title label{
font-size: 15px;
line-height: 15px;
font-weight: 700;
color: #122b54;
text-transform: uppercase;
}
small{
font-size: 14px;
line-height: 14px;
color: #122b54;
font-weight: 300;
}
.custom-file-input {
position: relative;
overflow: hidden;
width: 100%;
cursor: pointer;
}
.custom-file-input input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.custom-file-input .file-custom {
position: relative;
display: inline-flex;
height: 48px;
width: 100%;
}
.custom-file-input .file-select {
background-color: #122b54;
border: 2px solid #122b54;
color: #fff;
padding: 12px 30px;
border-radius: 10px;
text-transform: uppercase;
cursor: pointer;
font-size: 13px;
position: absolute;
transition: all 0.3s;
}
.custom-file-input .file-name {
color: #122b54;
border: 1px solid #f0f0f0;
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 12px 10rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
background-color: #f0f0f0;
font-size: 13px;
display: flex;
flex-direction: row;
}
.current-pdf{
margin-top: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.pdf-link{
font-size: 14px;
line-height: 14px;
font-weight: 400;
color: #122b54;
display: flex;
align-items: center;
gap: 5px;
}
.posizioni-section{
background-color: #f7f7f7;
position: relative;
border-top-left-radius: 90px;
padding-top: 2rem;
padding-bottom: 5rem;
}
.posizioni-card{
background-color: #f7f7f7;
border-radius: 0;
padding: 2rem 0;
transition: all 0.3s;
height: 8rem;
cursor: pointer;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: 4px dotted #122b5450;
}
.posizioni-card.active{
background-color: #f7f7f7;
height: max-content;
}
.posizioni-header{
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.posizioni-header h4 {
display: -webkit-box;
/* -webkit-line-clamp: 1; */
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 56px;
font-size: 47px;
line-height: 53px;
color: #122b54;
}
.posizioni-header.active h4{
color: #122b54;
/* -webkit-line-clamp: unset; */
max-height: none;
}
.posizioni-body {
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 1rem;
padding-right: 2rem;
}
.posizioni-card.active .posizioni-body {
opacity: 1;
transform: translateY(0);
}
.icon-dropdown-b {width: 1.5rem;height: 1.5rem;transition: all 0.3s;position: relative;display: flex;align-items: center;flex-shrink: 0;}
.icon-dropdown-b svg {
fill: #fff;
width: 100%;
height: 100%;
}
.icon-wrapper-b {
width: 1.5rem;
height: 1.5rem;
position: relative;
}
.icon-square-b {
width: 100%;
height: 100%;
border: 1px solid #fff;
border-radius: 2px;
transition: all 0.3s ease;
}
.icon-icon-b {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.60rem;
height: 0.60rem;
}
.icon-line-b {
position: absolute;
background-color: #fff;
transition: all 0.3s ease;
}
.icon-horizontal-b {
width: 100%;
height: 1px;
top: 50%;
transform: translateY(-50%);
}
.icon-vertical-b {
height: 100%;
width: 1px;
left: 50%;
transform: translateX(-50%);
}
.icon-square-b {
border: 2px solid #122b54;
}
.icon-line-b{
background-color: #122b54;
}
.icon-wrapper-b.active .icon-vertical-b {
transform: translateX(-50%) rotate(90deg);
}
.icon-wrapper-b.active .icon-square-b{
border: 2px solid #122b54;
}
.icon-wrapper-b.active .icon-line-b{
background-color: #122b54;
}
.posizioni-cards-container{
display: flex;
flex-direction: column;
gap: 0;
padding-top: 2rem;
padding-bottom: 5rem;
border-bottom: 0;
}
.candidatura-form-title{
padding-top: 5rem;
}
.candidatura-form-title h2 {
font-size: 50px;
line-height: 54px;
font-weight: 300;
color: #122b54;
margin: 0;
}
.candidatura-form-title h2 span {
font-size: 50px;
line-height: 54px;
font-weight: 500;
color: #122b54;
}
.posizioni-foot{
display: flex;
flex-direction: column;
gap: 2rem;
padding-top: 2rem;
}
.posizioni-body p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.posizioni-body p span{
font-weight: 500;
}
.posizioni-foot p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.posizioni-body ul {
margin-top: 1.5rem;
margin-bottom: 1.5rem!important;
padding-left: 0;
}
.posizioni-body ul li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: #122b54;
font-weight: 100;
line-height: inherit;
}
.posizioni-body ul li {
position: relative;
padding-left: 1rem;
margin-bottom: 1.5rem;
font-weight: 300;
font-size: 18px;
color: #122b54;
}
.posizioni-body li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 14px;
background-image: url("/assets/frontend/img/svg/piu-2.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.form-richiedi-prev{
padding-bottom: 5rem;
}
.form-scarica-catalogo{
padding-bottom: 5rem;
}
.blog-tab-menu-mobile {
display: none;
}
.blog-tab-menu-mobile {
display: none;
margin-bottom: 2rem;
}
.input-group.grey-b .input-c {
-moz-appearance: none !important;
-webkit-appearance: none !important;
appearance: none !important;
background: url(/assets/frontend/img/svg/piu_icona_pos.svg) !important;
background-size: 15px !important;
background-repeat: no-repeat !important;
background-position: calc(100% - 10px) center !important;
cursor: pointer !important;
background-color: #fff !important;
}
.input-group.grey-b input, .input-group.grey-b .input-c {
border: 1px solid #122b5480;
background: #f0f0f0;
color: #122b54;
}
.input-group.grey-b .input-c option {
color: #122b54;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
.input-group.grey-b .input-c:focus{
outline: none !important;
box-shadow: none !important;
border-color: #122b5480 !important;
}
.text-success {
color: #122b54!important;
}
.grid-container {
width: 100%;
}
.grid-item {
width: 31.33%;
box-sizing: border-box;
}
.finestructure{
padding-top: 5rem;
padding-bottom: 5rem;
}
.desc-p p {
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.finespan{
display: flex;
gap: 1rem;
align-items: center;
justify-content: flex-start;
margin-top: 4rem;
}
.finespan svg{
display: block;
width: 2rem;
height: 2rem;
}
.finespan span {
color: #122b54;
font-size: 16px;
line-height: 23px;
font-weight: 400;
text-transform: uppercase;
}
.info-fines-desc {
display: flex;
flex-direction: column;
padding-top: 4rem;
height: 100%;
}
.fines-content{
display: flex;
flex-direction: column;
height: 100%;
}
.creat{
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #f0f0f0;
}
.creat-container{
display: flex;
flex-direction: column;
gap: 4rem;
padding-top: 4rem;
}
.creat-sec{
display: grid;
grid-template-columns: repeat(2,1fr);
}
.creat-title{
display: flex;
flex-direction: column;
gap: 5px;
}
.creat-title h4{
color: #122b54;
margin: 0;
font-size: 33px;
line-height: 35px;
font-weight: 300;
}
.creat-title span{
color: #122b54;
margin: 0;
font-size: 23px;
line-height: 27px;
font-weight: 500;
text-transform: uppercase;
}
.creat-desc{
padding-top: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.creat-desc p {
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.creat-desc p a{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 600;
text-decoration: underline;
}
.creat-desc p span{
font-weight: 600;
}
.creat-img {
display: block;
width: 100%;
height: 52vh;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
.creat-text.mla{
margin-left: auto;
}
.color-card.show{
display: flex!important;
}
.prot-section{
padding-top: 5rem;
padding-bottom: 5rem;
}
.prot-grid{
display: grid;
grid-template-columns: repeat(2,1fr);
padding-top: 1rem;
gap: 3rem;
}
.prot-handle{
display: flex;
justify-content: left;
align-items: flex-start;
gap: 2rem;
}
.prot-img{
display: block;
height: 10rem;
width: 5rem;
min-width: 5rem;
flex-shrink: 0;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.prot-text{
display: flex;
flex-direction: column;
gap: 5px;
justify-content: flex-start;
height: 100%;
flex: 1;
}
.prot-text h6 {
font-size: 16px;
line-height: 16px;
font-weight: 500;
color: #122b54;
text-transform: uppercase;
}
.prot-text p {
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.design-desc{
padding-top: 5rem;
padding-bottom: 5rem;
}
.mini-style{
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #f0f0f0;
position: relative;
}
.mini-grid{
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 5rem;
}
.mini-right-img{
display: block;
height: 80vh;
width: calc(50% - 2.5rem);
flex-shrink: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('/assets/frontend/img/jpg/design_stile-minimal.jpg');
position: absolute;
top: 0;
right: 0;
}
.mini-pretitle{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 500;
text-transform: uppercase;
}
.mini-left{
display: flex;
flex-direction: column;
gap: 2rem;
}
.impianti-ul li p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.mini-title h4{
color: #122b54;
font-size: 18px;
line-height: 21px;
font-weight: 500;
margin: 0;
}
.mini-title{
padding-top: 4rem;
padding-bottom: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.mini-right{
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.banner-title.black .pretitle{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 500;
text-transform: uppercase;
padding-bottom: 0.5rem;
}
.taglio-section{
padding-top: 5rem;
background-color: #fff;
position: relative;
}
.taglio-img{
display: block;
height: 100%;
width: 28rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('/assets/frontend/img/png/design_taglionovanta.png');
position: absolute;
top: 0;
left: 0;
}
.taglio-container{
display: flex;
justify-content: flex-end;
padding-bottom: 5rem;
border-bottom: 1px solid #122b5450;
}
.forme-container{
display: flex;
justify-content: space-between;
}
.forme-section{
padding-top: 5rem;
padding-bottom: 5rem;
}
.forme-img{
display: block;
height: 34vh;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url('/assets/frontend/img/svg/design_forme-irregolari.svg');
}
.ingle-container{
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 5rem;
padding-top: 5rem;
border-top: 1px solid #122b5450;
}
.ingle-container-b {
display: flex;
gap: 5rem;
padding-top: 5rem;
border-top: 1px solid #122b5450;
}
.iso-container{
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 5rem;
}
.mini-title p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.mini-title p span{
font-weight: 500;
}
.ingle-section{
padding-bottom: 5rem;
}
.ingle-img{
display: block;
height: 90VH;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('/assets/frontend/img/jpg/design_inglesine.jpg');
}
.scuretti-img{
display: block;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('/assets/frontend/img/jpg/design_scuretti-interni-1.jpg');
}
.iso-section{
padding-top: 5rem;
padding-bottom: 5rem;
}
.iso-img{
display: block;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('/assets/frontend/img/jpg/comfort_isolamento-termico.jpg');
}
.acu-img{
display: block;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('/assets/frontend/img/jpg/comfort_isolamento-acustico.jpg');
}
.ingle-left-b, .ingle-right-b {
width: 50%;
}
.myDomoticSwiper{
display: block;
height: 100%;
width: 39.5vw;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.domo-img.swiper-slide {
height: 50vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.domo-img.big.swiper-slide {
height: 90vh;
}
.domo-info-img{
height: 8rem;
width: 12rem;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
}
.domo-info-container{
display: grid;
grid-template-columns: repeat(2,1fr);
padding-top: 4rem;
}
.domo-info{
display: flex;
gap: 2rem;
}
.domo-info-txt{
flex: 1;
}
.domo-desc{
display: flex;
flex-direction: column;
gap: 10px;
}
.domo-desc p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.domo-desc p span{
font-weight: 500;
}
.domo-desc h6{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 500;
text-transform: uppercase;
margin: 0;
}
.sicu-img{
display: block;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('/assets/frontend/img/jpg/sicurezza_vetrate-sicure.jpg');
}
.anti-img{
display: block;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('/assets/frontend/img/jpg/sicurezza_antintrusione.jpg');
}
.bonus-section{
padding-bottom: 5rem;
background-color: #f0f0f0;
}
.bonus-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
padding-top: 5rem;
}
.bonus-left{
border-right: 1px solid #122b5450;
}
.bonus-right{
display: flex;
justify-content: flex-end;
}
.bonus-img{
display: block;
height: 15rem;
width: 15rem;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.bonus-title h4{
color: #122b54;
font-size: 18px;
line-height: 21px;
font-weight: 500;
margin: 0;
text-transform: uppercase;
}
.bonus-title{
padding-top: 2rem;
padding-bottom: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.incentivi-img{
display: block;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('/assets/frontend/img/jpg/incentivi_banner.jpg');
}
.disclaimer-container{
background-color: #f0f0f0;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.disclaimer-container h4{
color: #122b54;
font-size: 31px;
line-height: 36px;
font-weight: 500;
margin: 0;
}
.banner-bonus {
padding-top: 6rem;
padding-bottom: 6rem;
position: relative;
}
.banner-bonus::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/assets/frontend/img/jpg/incentivi_banner.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.4);
z-index: -1;
}
.mini-right-img-mobile{
display: none;
height: 44vh;
width: 100%;
flex-shrink: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(/assets/frontend/img/jpg/design_stile-minimal.jpg);
position: relative;
margin-top: 3rem;
}
.taglio-img-mobile {
display: none;
height: 45vh;
width: 100%;
background-position: left;
background-repeat: no-repeat;
background-size: contain;
background-image: url(/assets/frontend/img/png/design_taglionovanta.png);
margin-top: -7rem;
transform: rotateY(180deg) rotate(90deg) translateX(9rem);
margin-bottom: 4rem;
}
.bb0{
border-bottom: 0;
}
.desk-none{
display: none;
}
.mobile-menu-footer{
padding-top: 3rem;
margin-top: auto;
}
.mobile-menu-footer-btns{
display: flex;
width: 100%;
gap: 1rem;
}
.mobile-menu-cta{
padding: 1rem;
border: 2px solid #122b54;
border-radius: 10px;
}
.mobile-menu-cta svg{
display: block;
width: 1rem;
height: 1rem;
}
.mobile-prev-cta{
background-color: #122b54;
padding: 11px 25px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
border: 2px solid #122b54;
width: 100%;
}
.mobile-prev-cta span {
color: #fff;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
transition: all 0.3s;
}
.mobile-menu-list li svg{
display: block;
width: 25px;
height: 25px;
padding: 5px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.back-button svg{
display: block;
width: 21px;
height: 21px;
border: 1px solid #122b54;
padding: 5px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
}
.mobile-menu-list .cls-1444{
fill: #122b54;
}
.mobile-menu-list a {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.mobile-menu-list a {
color: #122b54;
text-decoration: none;
font-size: 23px;
font-weight: 700;
display: block;
width: 100%;
text-transform: uppercase;
}
.section-container{
padding-top: 5rem;
background-color: #f7f7f7;
position: relative;
}
.image-content{
display: flex;
width: 100%;
height: 100%;
align-items: center;
}
.content-img{
display: block;
height: 70vh;
width: 100%;
background-position: left;
background-repeat: no-repeat;
}
.two-columns-container{
display: flex;
justify-content: space-between;
gap: 2rem;
}
.right .image-content-half .content-img{
background-position: center;
}
.icon-list-half-content{
display: flex;
flex-direction: column;
gap: 1rem;
width: 65%;
}
.dotazione{
padding-bottom: 1rem;
}
.dotazione h5{
color: #122b54;
text-transform: uppercase;
font-size: 18px;
line-height: 18px;
font-weight: 700;
}
.icon-list-desc{
padding-top: 1rem;
}
.icon-list-desc p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
margin: 0;
}
.cat-access-desc{
padding-top: 2rem;
padding-bottom: 0rem;
}
.cat-access-desc p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
margin: 0;
}
.fade-out {
opacity: 0;
transition: opacity 300ms ease-out;
}
.handle-card, .handle-desc-row {
opacity: 1;
transition: opacity 300ms ease-in;
}
.slider-product-half .myProductSwiper{
padding-bottom: 0;
border-bottom: 0;
}
.left .icon-list-half{
padding-right: 1rem;
}
.right .icon-list-half {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
.content-text p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
margin: 0;
}
.icon-list-desc ul{
padding-top: 2rem;
padding-bottom: 2rem;
}
.icon-list-desc li{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.icon-list-desc li p{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.icon-list-desc li span{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 500;
text-transform: uppercase;
}
.icon-list-desc.orange li span{
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 500;
text-transform: uppercase;
}
.icon-list-desc li:not(:last-child){
margin-bottom: 15px;
}
.icon-list-desc li{
padding-left: 2rem;
position: relative;
}
.icon-list-desc li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 14px;
background-image: url("/assets/frontend/img/svg/piu-2.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.icon-list-desc li span{
font-weight: 500;
text-transform: none;
}
.col-desk-8{
width: 66.66666667%;
}
.porte-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2rem 1rem;
min-height: 100px;
padding-bottom: 5rem;
border-bottom: 1px solid #122b5450;
}
.porte-card {
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: space-between;
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
align-items: flex-start;
align-content: flex-start;
}
.porte-img {
width: 100%;
background-position: center left -2rem;
background-repeat: no-repeat;
background-size: contain;
position: relative;
height: 400px;
flex-shrink: 0;
overflow: hidden;
}
.inverse .creat-img {
background-position: left;
}
.item-menu {
color: var(--default-color);
font-family: "Inter", sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
letter-spacing: 0px;
padding: 2rem 1.4rem;
position: relative;
transition: all 0.3s;
cursor: pointer;
letter-spacing: 0.5px;
}
*/
.scroll .item-menu {
padding: 1.5rem 1rem;
transition: all 0.3s;
}
.sub-menu-wrapper {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
padding-top: 2rem;
padding-bottom: 4rem;
}
.banner-pvc::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 50%);
z-index: 1;
}
.grafic-det::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #122b54;
border-radius: 4px;
transition: width 0.8s ease-in-out;
}
.percent-70 .grafic-det::after {
width: 70%;
}
.percent-90 .grafic-det::after {
width: 90%;
}
.percent-40 .grafic-det::after {
width: 40%;
}
.banner-card-btn {
flex: 0 0 auto;
width: 100%;
padding-top: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.correlati{
padding-top: 0;
padding-bottom: 0;
}
.suggest-container{
padding-top: 5rem;
padding-bottom: 5rem;
}
.h6-a{
padding: 0.5rem 0;
border-bottom: 1px solid #122b5450;
text-transform: uppercase;
font-size: 15px;
line-height: 19px;
font-weight: 600;
margin: 0;
color: #56565C;
}
.h6-b{
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #122b5450;
text-transform: uppercase;
font-size: 15px;
line-height: 19px;
font-weight: 400;
margin: 0;
color: #56565C;
}
.h6-c {
text-transform: uppercase;
font-size: 15px;
line-height: 19px;
font-weight: 600;
margin: 0;
color: #56565C;
}
.ul-a{
padding-top: 1rem;
}
.ul-a li a{
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
margin-bottom: 10px;
color: #122b54;
transition: color 0.3s;
}
.ul-a li a:hover{
color: #122b54;
}
.ul-a li a.active{
color: #122b54;
}
.ul-a li:first-child a{
font-weight: 600;
text-transform: none;
}
.half-col-menu{
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 2rem;
}
.sub-menu-col{
min-width: 28vw;
}
.sub-menu-col-b{
min-width: 8vw;
}
.ul-b{
background-color: #fff;
padding: 5px 10px;
}
.ul-b li a{
font-size: 15px;
font-weight: 400;
margin-bottom: 10px;
color: #122b54;
transition: color 0.3s;
}
.ul-b li a:hover{
color: #122b54;
}
.ul-b li a.active {
color: #122b54;
}
.ul-b li:first-child a {
font-weight: 500;
}
.half-collapse-header{
display: flex;
justify-content: space-between;
align-items:center;
border-bottom: 1px solid #122b5450;
padding: 0.5rem 10px;
cursor: pointer;
}
.half-collapse-header svg{
display: block;
width: 14px;
height: 14px;
}
.myProductSwiper{
padding-bottom: 0;
}
.h6-c {
text-transform: uppercase;
font-size: 15px;
line-height: 19px;
font-weight: 600;
margin: 0;
color: #56565C;
transition: all 0.3s;
}
.cls-911{
transition: all 0.3s;
}
.half-collapse-header:hover .h6-c{
color: #122b54;
}
.half-collapse-header:hover .cls-911{
stroke: #122b54;
}
.half-collapse-header.active .h6-c{
color: #122b54;
}
.half-collapse-header.active .cls-911{
stroke: #122b54;
}
.half-collapse-body {
overflow: hidden;
transition: max-height 0.3s ease-out;
max-height: 0;
}
.half-collapse-body.active {
max-height: auto;
}
.half-collapse-header {
cursor: pointer;
}
.section-container.divisore .double-columns-container .left{
border-right: 4px dotted #122b5490;
}
.item-top-head.in-page span {
color: #122b54;
}
.item-menu.in-page span{
color: #122b54;
}
.item-menu.in-page .icon-line {
background-color: #122b54;
}
.item-menu.in-page .icon-square {
border: 1px solid #122b54;
}
.bt0{
border-top: 0!important;
}
.privacy-content{
padding-top: 3rem;
}
.find-title-d h2 {
font-size: 40px;
line-height: 40px;
font-weight: 500;
color: #122b54;
margin: 0;
}
.find-desc-d h3 {font-size: 30px;line-height: 35px;font-weight: 400;color: #122b54;margin: 0;margin-top: 1rem;}
.find-desc-d h4 {font-size: 25px;line-height: 25px;font-weight: 400;color: #122b54;margin: 0;margin-top: 0.5rem;}
.privacy-section{
padding-bottom: 10rem;
}
.ml-2{
margin-left: 1rem;
margin-top: -0.5rem;
color: #122b54;
font-size: 18px;
line-height: 23px;
font-weight: 300;
}
.submenu {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #f0f0f0;
transition: transform 0.3s ease;
transform: translateX(100%);
overflow-y: auto;
}
.submenu.active {
display: flex;
padding: 1rem;
padding-top: 5.5rem;
flex-direction: column;
height: 100%;
}
.submenu-header {
display: flex;
align-items: center;
padding: 15px 0;
border-bottom: 2px solid #122b54;
position: relative;
gap: 15px;
}
.submenu-title {
flex-grow: 1;
text-align: left;
margin: 0;
font-size: 21px;
font-weight: 700;
color: #122b54;
text-transform: uppercase;
}
.back-button {
display: flex;
align-items: center;
color: #122b54;
text-decoration: none;
}
.arrow-icon {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
fill: #122b54;
}
.arrow-icon.back {
transform: rotate(180deg);
margin-right: 0;
fill: #122b54;
}
.mobile-menu-list li a, .submenu-list li a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0px;
color: #ffffff90;
text-decoration: none;
transition: background-color 0.2s ease;
font-size: 19px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
}
.mobile-menu-list li:not(:last-child) a, .submenu-list li:not(:last-child) a {
border-bottom: 2px dotted #b6cff850;
}
.mobile-menu-list li{
position:relative;
}
.mobile-menu-list li.active a{color: #ffffff;}
.mobile-menu-list li.active a{/* border-bottom: 2px dotted #b6cff8; */}
.sub-col-body-child{
    position: relative;
}
.sub-col-body-child.active span{
    margin-left: 15px;
}
.sub-col-body-child.active::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 9px;
    color: #fff;
    font-weight: 900;
    line-height: inherit;
}
.submenu-list.minor-first li:first-child a {
text-transform: none;
font-weight: 400;
}
.submenu-list li a {
padding: 15px;
padding-left: 37px;
}
.submenu-list li a span{
transition: all 0.3s;
}
.mobile-menu-list.special li a, .submenu-list.special li a {
border-bottom: 2px solid #122b54;
}
.submenu-trigger {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.has-submenu > a {
padding-right: 15px;
}
.mobile-menu-cta {
justify-content: center;
}
.mobile-menu, .submenu {
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
backface-visibility: hidden;
will-change: transform;
}
body.scroll-none {
overflow: hidden;
}
.inner-ul{
padding-left: 20px;
}
.inner-ul li a{
border-bottom: 1px solid #122b5450!important;
font-weight: 400;
text-transform: none;
padding-top: 11px;
padding-bottom: 11px;
}
.image_title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.4));
color: white;
padding: 30px 20px 20px 20px;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
align-content: center;
}
.home-pic:hover .image_title {
opacity: 1;
transform: translateY(0);
}
.image_title h6{
color: #fff;
font-size: 16px;
line-height: 20px;
margin: 0;
font-weight: 500;
text-align: left;
}
.image_title span{
color: #fff;
text-transform: uppercase;
font-size: 11px;
line-height: 12px;
font-weight: 400;
text-align: left;
letter-spacing: 1px;
}
.hero-title-container {
pointer-events: none;
}
.swiper-wrapper {
pointer-events: auto;
}
.swiper-slide.hero-slide {
pointer-events: none;
}
.hero-section {
position: relative;
height: 110vh;
z-index: 0;
}
.swiper-slide.hero-slide {position: relative;display: flex;align-items: center;height: 85vh;width: 100%;}
.hero-slide-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
transition: opacity 0.6s ease;
filter: brightness(0.6);
}
.swiper-slide-active .hero-slide-content {
opacity: 1;
transform: translateY(0);
}
.swiper-slide-next .hero-slide-content, .swiper-slide-prev .hero-slide-content {
transform: translateY(50px);
}
.hero-inside-button {
display: inline-block;
transition: background-color 0.3s ease;
}
.hero-slide.swiper-slide::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
filter: brightness(0.6);
background-image: inherit;
}
.hero-slide-content {
position: relative;
z-index: 3;
color: white;
text-align: center;
width: 100%;
pointer-events: none;
transition: opacity 0.6s ease, transform 0.6s ease;
padding-bottom: 6rem;
}
.hero-inside-button-container {
pointer-events: auto;
display: flex;
}
.menu-mobile{
display: none;
}
.header__icons {
display: flex;
align-items: center;
width: 38px;
}
.icon-hamburger {
height: 40px;
width: 30px;
margin-bottom: 12px;
}
.header__icons a {
color: #fff;
opacity: 0.8;
font-size: 27px;
transition: color 0.3s;
}
.burger-menu {
display: flex;
flex-direction: column;
gap: 0.5rem;
height: 3rem;
justify-content: center;
}
.burger-menu .line {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background: #122b54;
width: 2.3rem;
height: 3px;
transition: 0.3s;
}
.burger-menu .line {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background: #122b54;
width: 2.3rem;
height: 3.2px;
transition: 0.3s;
}
.burger-menu.change .bar_1 {
transform: rotate(45deg) translate(8px, 6px) scaleX(1);
}
.burger-menu.change .bar_3 {
transform: rotate(-45deg) translate(2px, 0px) scaleX(1);
}
.menu-mobile.open .burger-menu .line {
background: #122b54;
}
.scroll .burger-menu .line {
background: #122b54;
}
.section-colors.pt-0 .container {
padding-top: 0;
border-top:0;
}
.test-grey{
background-color:#122b54;
}
.blog-iframe {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
margin-bottom: 3rem;
}
.blog-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.cv-error span{
font-size: 16px;
line-height: 15px;
color: #e23535;
font-weight: 400;
}
.hsfc-FormWrapper {
--hsf-background__padding: 0 !important;
}
.hs-form-frame iframe{
margin-left: -2.5rem;
margin-right: -2.5rem;
}
.height-max{
min-height: 80vh;
background-position: top;
}
.text-content h2 {color: #122b54;margin: 0;font-size: 50px;line-height: 55px;font-weight: 500;}
.text-content h3 {color: #122b54;margin: 0;font-size: 35px;line-height: 40px;font-weight: 300;}
.left .text-content-half{
padding-right: 2rem;
}
.content-text{padding-top: 1.5rem;padding-bottom: 2rem;}
.pb-20{
padding-bottom: 5rem;
}
.scroll .bgd-nav{
margin-top:0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #fff;
}
.footer-sedi-list{display: flex;flex-direction: column;padding-top: 0;}
.footer-sede.mini{
border-bottom: 1px solid #f0f0f099;
}
.footer-sede.mini{
padding: 10px 0;
font-size: 13px;
line-height: 16px;
font-weight: 400;
color: #fff;
text-transform: uppercase;
}
.footer-sede.mini .sede-header{
padding: 10px 0;
border-bottom: 0;
}
.footer-sede.mini .sede-header span{
padding: 7px 0;
font-size: 13px;
line-height: 16px;
font-weight: 400;
color: #f0f0f0;
text-transform: uppercase;
padding: 0;
}
.footer-sede.mini .sede-header svg {
width: 0.6rem;
transition: transform 0.3s ease;
transform: rotate(0deg);
}
.footer-sede.mini .sede-header.active svg {
transform: rotate(45deg);
}
.footer-sede.mini .sede-header.active span {
color: #fff;
}
.footer-sede.mini{
transition: all 0.3s;
}
.footer-sede.mini:hover{
color: #fff;
}
.footer-sede.mini:hover .sede-header span {
color: #fff;
}
.sede-body.mini.active{
padding: 5px 10px 15px 10px;
}
.sede-body.mini ul li:not(:last-child){
padding-bottom: 5px;
}
.sede-body.mini ul li a:hover{
color: #fff;
}
.footer-logo {display: flex;width: 100%;height: 3rem;justify-content: flex-start;}
.footer-logo img{display: block;height: 3rem;}
.menu-icon{
display: block;
width: 1.5rem;
height: 1.5rem;
transition: all 0.3s;
}
.sede-header{
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s;
cursor: pointer;
padding: 20px 0;
border-bottom: 1px solid #a0a0a0;
}
.sede-header:hover span{
color: #fff;
}
.sede-header span{font-size: 21px;line-height: 23px;font-weight: 400;color: #fff;transition: all 0.3s;}
.sede-header.active span{
color: #fff;
}
.sede-header svg{
width: 1rem;
transition: transform 0.3s ease;
transform: rotate(0deg);
}
.sede-header.active svg{
transform: rotate(45deg);
}
.sede-body{
display: flex;
height: 0;
transition: all 0.3s;
opacity: 0;
visibility: hidden;
overflow: hidden;
transform: translateY(-10px);
flex-direction: column;
gap: 1rem;
}
.sede-body.active{
height: max-content;
opacity: 1;
visibility: visible;
transform: translateY(0px);
padding: 15px 0;
}
.sede-info h6{
font-size: 14px;
line-height: 14px;
font-weight: 400;
color: #a0a0a0;
text-transform: uppercase;
margin: 0;
}
.sede-info p{
font-size: 16px;
line-height: 17px;
font-weight: 300;
color: #a0a0a0;
}
.sede-info{
display: flex;
flex-direction: column;
gap: 5px;
}
.sede-body.mini ul li a{
font-size: 13px;
line-height: 19px;
font-weight: 300;
color: #fff;
text-transform: none;
transition: all 0.3s;
}
.sede-body.big ul li a{
font-size: 17px;
line-height: 21px;
font-weight: 300;
color: #ffffff;
text-transform: none;
transition: all 0.3s;
}
.footer-office h6{
color: #fff;
font-size: 20px;
line-height: 25px;
font-weight: 500;
letter-spacing: 0.5px;
}
.footer-office {
padding-bottom: 5px;
border-bottom: 1px solid #fff;
}
.footer-office-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.office-det h6{
font-size: 13px;
line-height: 16px;
font-weight: 100;
color: #fff;
text-transform: uppercase;
}
.office-det{
font-size: 16px;
line-height: 22px;
font-weight: 400;
color: #fff;
}
.tab-linee-container{
background-color: #122b54;
border-radius: 50px;
display:flex;
justify-content: space-between;
align-items: stretch;
margin-bottom: 5rem;
}
.single-line{
background-color: #122b54;
border-radius: 50px;
display:flex;
justify-content: center;
align-items: stretch;
align-content: center;
transition: all 0.3s;
gap: 1.5rem;
padding: 4rem;
width: 100%;
cursor: pointer;
}
.single-line h4{
font-size: 50px;
line-height: 50px;
font-weight: 500;
color: #fff;
transition: all 0.3s;
}
.single-line p{
font-size: 13px;
line-height: 15px;
font-weight: 600;
color: #ffffff60;
text-transform: uppercase;
transition: all 0.3s;
letter-spacing: 1px;
}
.single-line:hover, .single-line.active{
background-color: #fff;
box-shadow: 1px 2px 20px 5px rgba(0, 0, 0, 0.2);
}
.lin-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.single-line:hover .lin-text h4, .single-line:hover .lin-text p, .single-line.active .lin-text h4{
color: #122b54;
}
.single-line svg{
display: block;
width: 3rem;
height: 100%;
}
.st0, .st1, .cls-2, .cls-4, .st-000{
transition: all 0.3s;
}
.single-line:hover .st0{
fill:#122b54;
}
.single-line:hover .st1{
stroke:#122b54;
}
.section-withe{
padding-top: 5rem;
padding-bottom: 5rem;
border-radius: 90px;
position: relative;
margin-top: -9rem;
background-color: #fff;
z-index: 1;
}
.mask svg{
display: block;
width: 7rem;
height: 7rem;
position: absolute;
top: -7rem;
right: 0;
z-index: 999;
}
.mask.bottom svg{
top: inherit;
bottom: 2rem;
transform: rotateX(180deg);
}
.mask.bottom.navy svg{
bottom: -7rem;
}
.mask.bottom.left.navy svg{
bottom: 0;
}
.mask.bottom.right.navy svg{
bottom: 0;
transform: rotateY(360deg);
}
.home-container{
display: flex;
align-items: center;
}
.home-img{
display: block;
height: 60vh;
width: 100%;
flex-shrink: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50px;
}
.section-blue{
padding-top: 5rem;
padding-bottom: 16rem;
position: relative;
background-color: #122b54;
border-top-right-radius: 90px;
}
.section-navy{
padding-top: 5rem;
padding-bottom: 5rem;
position: relative;
background-color: #d1d5dc;
border-radius: 90px;
border-top-left-radius: 0;
}
.section-navy.full{
background-color: #f7f7f7;
border-radius: 90px;
}
.absolute-img{
display: block;
height: 100%;
width: 50%;
flex-shrink: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 85px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
position: absolute;
top: 0;
right: 0;
z-index: 0;
}
.banner-small {
display: flex;
flex-direction: column;
gap: 2rem;
}
.banner-small h4 {
font-size: 40px;
line-height: 45px;
font-weight: 500;
color: #fff;
}
.banner-small p{
font-size: 18px;
line-height: 24px;
font-weight: 300;
color: #fff;
}
.banner-small p span{
font-weight: 500;
}
.banner-small.blue h4, .banner-small.blue p{
color: #122b54;
}
.cat-list{
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.cat-list a{
display: flex;
gap:2rem;
align-content:center;
align-items:center;
width: 100%;
transition: all 0.3s;
}
.cat-icon{
display:block;
width: 3.5rem;
height:100%;
transition: all 0.3s;
}
.cat-content{
display: flex;
width: 100%;
gap: 1rem;
padding-bottom: 1rem;
border-bottom: 3px dotted #f7f7f730;
justify-content: space-between;
transition: all 0.3s;
}
.cat-content.blue{
border-bottom: 3px dotted #122b5490;
}
.cat-content-text h6{
font-size: 27px;
line-height: 27px;
font-weight: 600;
color: #f7f7f790;
transition: all 0.3s;
}
.cat-content-text p{
font-size: 13px;
line-height: 17px;
font-weight: 500;
color: #f7f7f790;
text-transform: uppercase;
transition: all 0.3s;
}
.cat-content-text.blue h6, .cat-content-text.blue p{
color: #122b5490;
}
.cat-content-svg {display: block;overflow: hidden;width: 2rem;flex-shrink: 0;}
.cat-content-svg svg{
width: 2rem;
height: 100%;
transform: translateX(-100%);
transition: all 0.3s;
opacity: 0;
}
.cat-list a:hover .cat-content-svg svg{
transform: translateX(0);
opacity: 1;
}
.cat-list a:hover .st000{
fill:#fff;
transition: all 0.3s;
}
.cat-list.blue a:hover .st000{
fill:#122b54;
}
.cat-list a:hover .cat-content-text h6{
color: #fff;
}
.cat-list a:hover .cat-content-text p{
color: #fff;
}
.cat-list a:hover .cat-content{
border-bottom: 3px dotted #f7f7f799;
}
.cat-list a:hover .cat-content.blue{
border-bottom: 3px dotted #122b54;
}
.cat-list a:hover .cat-content-text.blue h6, .cat-list a:hover .cat-content-text.blue p{
color: #122b54;
}
.mask.left svg{
right: inherit;
z-index: 999;
left: 0;
transform: rotate(90deg);
}
.product-cta svg{
width: 1rem;
}
.home-swiper, .home-pic{
border-top-left-radius: 150px;
height: 70vh;
}
.home-gallery{
position: relative;
margin-top:-10rem;
}
.mask.bottom-left svg {
top: inherit;
right: inherit;
bottom: 0;
transform: rotateY(180deg);
left: 0;
}
.mask.top-left svg {
top: 9.9rem;
right: inherit;
bottom: inherit;
transform: rotate(180deg);
left: 0;
}
.mask.mini-right svg {
top: 2.55rem;
}
.mask.mini-top-left svg{
left:0;
top:0;
transform: rotate(180deg);
}
.prev-d, .next-d{
border: 1px solid #fff;
width: 4rem;
height: 3rem;
}
.prev-d{
transform: translateX(3.3rem);
}
.next-d{
transform: translateX(-3.3rem);
}

.scroll .dropdown-menu{
top: 4.17rem;
}
.dropdown-menu {
  min-width: 10rem;
  background: #122b54;
  display: flex;
  border: none;
  max-height: 0; /* Cambia da height a max-height */
  left: 0;
  width: fit-content;
  top: 5.2rem;
  padding: 0 1rem;
  transition: all 0.2s;
  border-radius: 20px;
  border-top-left-radius: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  box-shadow: 0px 20px 20px 5px rgba(0, 0, 0, 0.12);
  z-index: 99;
}

.dropdown-menu.active {
  max-height: 300px; /* Imposta un valore massimo ragionevole */
  opacity: 1;
  visibility: visible;
  padding: 1rem 2rem;
}
.dropdown-menu .sub-menu {min-width: 11rem;position: relative;padding: 0;border-radius: 0;/* padding-bottom: 1rem; */}
.sub-menu {
width: 100%;
height: 100%;
position: relative;
overflow-y: scroll;
}
.dropdown-menu .sub-menu .nav-item{
position: relative;
}
.dropdown-menu .sub-menu .nav-item:not(:last-child) {
border-bottom: none;
padding-bottom: 3px;
margin-bottom: 0;
}
.dropdown-menu .sub-menu .nav-item:not(:last-child)::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-image: url('/assets/frontend/img/svg/dot.svg');
background-size: 2px 2px;
background-repeat: repeat-x;
mask-image: linear-gradient(to right, black 2px, transparent 2px, transparent 4px);
mask-size: 6px 100%;
mask-repeat: repeat-x;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.nav-link.cms {
padding: 0;
font-size: 10px;
font-weight: 500;
line-height: 1.5em;
padding: 2rem;
margin: 0 1rem;
letter-spacing: 2px;
display: flex;
color: #fff;
transition: 0.2s;
cursor: pointer;
align-items: center;
gap: 1rem;
}
.dropdown-menu .sub-menu .nav-item .nav-link.cms {
color: #fff;
margin: 0;
padding: 1rem 1rem 0 1rem;
transition: 0.1s all;
}
.dropdown-menu .sub-menu .nav-item .nav-link.cms {
color: #fff;
margin: 0;
padding: 10px;
transition: 0.2s all;
font-size: 14px;
line-height: 17px;
font-weight: 600;
letter-spacing: 0;
border-radius: 0;
padding: 10px 0 12px 0;
text-transform: none;
min-width: 12rem;
}
.nav-link.cms img {
width: .8rem;
}
.dropdown-menu .sub-menu .nav-item .nav-link.cms p {
white-space: nowrap;
transition: all 0.3s;
}
.nav-link.cms:hover p{
margin-left: 7px;
color: #ffffff90;
}
.footer-sede.mini-dropdown{
padding: 0;
}
.office-det p{
transition: all 0.3s;
}
.footer-office-list a:hover p{
color: #ffffff90
}
.chad-container{
max-width: 1370px;
}
.custom-pagination {
position: absolute;
bottom: 14rem;
left: 10rem;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.custom-dot {
width: 10px;
height: 10px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.custom-dot:hover {
background: rgba(255, 255, 255, 0.8);
transform: scale(1.1);
}
.custom-dot.active {
width: 32px;
background: rgba(255, 255, 255, 0.9);
border-radius: 6px;
}
.menu-icon .cls1{
transition: all 0.3s;
}
.scroll .menu-icon .cls1{
fill: #fff;
}
.section-shadow{
padding-top: 5rem;
padding-bottom: 5rem;
border-radius: 90px;
position: relative;
margin-top: -6rem;
background-color: #fff;
z-index: 1;
}
.shadow-container{
display: flex;
flex-direction: column;
gap: 5rem;
}
.shadow-card{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6rem;
}
.product-container{
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 2rem;
}
.subcategory-group .product-container{
display: flex;
}
.prod-img-container{
position: absolute;
top: 0;
right: 0;
}
.section-container.first-section {
border-top-left-radius: 90px;
}
.section-container.last-section {
padding-bottom: 5rem;
border-bottom-left-radius: 90px;
border-bottom-right-radius: 90px;
}
.grid-item .img-fluid {
max-width: 100%;
height: auto;
min-height: 18rem;
aspect-ratio: 4/3;
}
.grid-container {
width: 100%;
height: 100%!important;
display: flex;
flex-wrap: wrap;
gap: 2rem;
overflow: hidden;
transition: height 0.3s ease;
}
.grid-item {
position: relative!important;
left: 0!important;
top: 0!important;
height: 18rem;
transition: all 0.3s ease;
}
.grid-item.width-100 {
height: 28rem;
}
.grid-item.width-100 {
width: 100%;
}
.grid-item.width-50 {
width: calc(50% - 1rem);
}
.grid-item.width-25 {
width: calc(25% - 1.5rem);
}
.glight-img {
display: block;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
border: 0;
border-radius: 20px;
}
.image_title_p{
position: absolute;
bottom: 0.5rem;
background-color: #ffffff70;
padding: 5px 10px;
border-radius: 5px;
margin-right: auto;
margin-top: auto;
}
.image_title_p span{
color: #122b54;
text-transform: uppercase;
font-size: 14px;
}
.item-menu.in-page::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: 5px;
width: 100%;
background-color: #122b54;
border-radius: 0;
transition: all 0.3s ease;
}
.item-menu.has-dropdown.in-page::after {
width: 80%;
}
.item-menu.in-page.has-dropdown.active::after {
bottom: 0;
left: 0;
transform: none;
width: 100%;
border-radius: 0;
}
.works .image_title {
transform: translateY(0px);
align-content: center;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.glight-img:hover .image_title {
opacity: 1;
}
.single-line.small {
padding: 2rem 2rem;
align-items: center;
}
.single-line.small h4 {
font-size: 30px;
line-height: 29px;
}
.single-line.small svg {
width: 2.5rem;
}
.single-line.small p {
font-size: 16px;
line-height: 16px;
font-weight: 200;
color: #fff;
text-transform: none;
}
.section-navy.inverted{
border-radius: 90px;
border-top-right-radius: 0;
}
.button-svg{
width: 3.5rem;
height: 100%;
transition: all 0.3s;
border: 2px solid #122b54;
border-radius: 10px;
position: absolute;
right: 0;
top: 0;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
.scheda-cta:hover .cls-4{
fill:#fff;
}
.works-section{
padding-bottom: 5rem;
position: relative;
}
.fade-transition {
transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out;
}
.blur-transition {
transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.blur-transition.loading {
filter: blur(3px);
opacity: 0.7;
}
.hover-effect {
transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.subcategory-group {
transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out;
overflow: hidden;
}
.subcategory-group[style*="opacity: 0"] {
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.subcategory-group[style*="opacity: 1"] {
height: auto !important;
overflow: visible !important;
}
#accessories-section {
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s ease;
padding-bottom: 5rem;
}
.color-card, .accessory-card {
transition: all 0.2s ease-out;
opacity: 1;
transform: scale(1);
pointer-events: auto;
display: block;
height: auto;
overflow: visible;
margin: inherit;
padding: inherit;
}
.color-card.hidden, .accessory-card.hidden {
opacity: 0 !important;
transform: scale(0.95) !important;
pointer-events: none !important;
display: none !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(15px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.accessory-card:not(.hidden), .color-card:not(.hidden) {
animation: fadeInUp 0.3s ease forwards;
}
html {
scroll-behavior: smooth;
}
.blog-tab-menu ul li {
transition: all 0.2s ease;
}
.blog-tab-menu ul li:hover {
transform: translateY(-1px);
}
#accessories-title {
transition: opacity 0.15s ease-in-out;
}
.back-button-container {
display: none !important;
}
.subcategory-group, .color-card, .accessory-card, #accessories-container {
will-change: opacity, transform, height;
}
@media (max-width: 768px) {
.fade-transition, .blur-transition, .color-card, .accessory-card {
transition-duration: 0.15s;
}
.hover-effect:hover {
transform: none;
box-shadow: none;
}
}
[style*="opacity: 0"][style*="pointer-events: none"] {
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
[style*="opacity: 1"][style*="pointer-events: auto"] {
height: auto !important;
overflow: visible !important;
}
.accessory-text{
padding-top: 1rem;
}
.tab-linee-container.beta{
margin-bottom:0;
}
.beta .single-line:hover{
background-color:#122b54;
box-shadow:none;
}
.beta .single-line:hover .lin-text h4{
color: #9fa5b0;
}
.beta .single-line.active:hover {
background-color: #fff;
box-shadow: 1px 2px 20px 5px rgba(0, 0, 0, 0.2);
}
.beta .single-line.active:hover .lin-text h4{
color:#122b54;
}
.plus-red-pos svg{
transition: all 0.3s;
}
.posizioni-card.active .plus-red-pos svg{
transform: rotate(-180deg);
}
.filter-section{
display: flex;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
padding-bottom: 3rem;
}
.filter-group{
display: flex;
justify-content: flex-start;
align-content: center;
align-items: center;
gap: 1rem;
width: 100%;
}
.filter-card{
padding: 20px 1rem;
background-color: #122b54;
border: 2px solid #f7f7f750;
border-radius: 15px;
cursor: pointer;
width: 11rem;
transition: all 0.3s;
}
.filter-card span{
color:#fff;
font-size: 13px;
line-height: 18px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
display: block;
width: 100%;
transition: all 0.3s;
}
.main_cat_access{
padding-bottom: 0;
}
.filter-card:hover{
background-color: #fff;
border: 2px solid #122b54;
}
.filter-card:hover span{
color: #122b54;
}
.filter-card.active{
background-color: #fff;
border: 2px solid #122b54;
}
.filter-card.active span{
color: #122b54;
}
.filter-group-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.filter-label {
margin-bottom: 1rem;
padding-left: 0.5rem;
}
.filter-label span {
color: #b9bfcb;
font-size: 18px;
font-weight: 400;
}
.mask.blue-left svg{
left:0;
top: 0;
transform: rotate(180deg);
}
.home-form-title-container{
display: flex;
flex-direction: column;
gap: 1rem;
}
.home-form-title-container h4{
font-size: 60px;
line-height: 62px;
font-weight: 500;
color: #122b54;
}
.home-form-title-container span{
font-size: 18px;
line-height: 24px;
font-weight: 300;
color: #122b54;
}
.dropdown-menu .sub-menu .nav-item .nav-link.cms.active p::before{
content: "•";
position: absolute;
left: 0;
top: 9px;
color: #fff;
font-weight: 900;
line-height: inherit;
}
.nav-link.cms.active p{
margin-left: 15px;
}
.nav-link.cms.active:hover p{
color: #fff;
}
.banner-small-container{
display: flex;
flex-direction: column;
gap: 1rem;
}
.absolute-img.mobile{
display: none;
}
.sub-col-body{background-color: #122b5450;border-radius: 25px;border-top-left-radius: 0;padding: 1rem 2rem;display: flex;flex-direction: column;}
.mobile-menu-list .sub-col-body-child{
color: #fff;
font-size: 15px;
line-height: 18px;
font-weight: 300;
padding: 10px 0;
text-transform: none;
letter-spacing: 0;
}
.sub-col-body{
background: #214168;
}
.sub-col-body a:not(:last-child){
border-bottom: 2px dotted #ffffff90!important;
}
.sub-col-body a:last-child{
border-bottom:0!important;
}
.has-submenu.active .submenu-trigger{
border-bottom: 2px dotted #122b54!important;
}
.has-submenu.active .submenu-trigger span{
color:#fff!important;
}
.has-submenu.active .submenu-trigger .cls111{
fill:#fff!important;
}
.has-submenu.active .submenu-trigger svg{
transform: rotate(45deg);
}
.select-cascade-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.select-wrapper {
position: relative;
}
.input-c {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
.input-c:disabled {
background-color: #f0f0f090;
border: 1px solid #f0f0f090;
color: #9fa5b0;
cursor: not-allowed;
}
.select-loading::before {
content: '';
position: absolute;
right: 2.5rem;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid #e5e7eb;
border-top: 2px solid #4F46E5;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 10;
}
.btrr-0{
    border-top-right-radius: 0;
}











@keyframes spin {
0% {
transform: translateY(-50%) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(360deg);
}
}
.fade-in {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}


/*HAMBURGER MENU ICON*/
.menu-icon {
    width: 24px;
    height: 19px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Stili per le linee dell'hamburger */
.hamburger-line {
    width: 1.5rem;
    height: 3px;
    background-color: white;
    transition: all 0.3s ease;
    transform-origin: center;
}

.hamburger-line:nth-child(1) {
    transform-origin: center;
}

.hamburger-line:nth-child(2) {
    transform-origin: center;
}

.hamburger-line:nth-child(3) {
    transform-origin: center;
}

/* Animazioni quando il menu è aperto */
.menu-mobile.open .hamburger-line:nth-child(1) {
    transform: rotate(-45deg) translate(0, 11.5px);
}

.menu-mobile.open .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-mobile.open .hamburger-line:nth-child(3) {
    transform: rotate(45deg) translate(0, -11px);
}

.hero.landing-img{
    padding-bottom: 2rem;
}