@font-face {
    font-family: 'Work Sans';
    src: url('../font/WorkSans-Regular.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: 'Work Sans';
    src: url('../font/WorkSans-Bold.ttf') format('truetype');
    font-weight: 700;
}
@font-face {
    font-family: 'Work Sans';
    src: url('../font/WorkSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
}

:root {
   /* font */
    --fs14: 0.875rem; /* --> 14px */
    --fs16: 1rem;     /* --> 16px */
    --fs18: 1.125rem; /* --> 18px */
    --fs20: 1.25rem;  /* --> 20px */
    --fs24: 1.5rem;   /* --> 24px */
    --fs30: 1.875rem; /* --> 30px */
    --fs36: 2.25rem; /* --> 36px */
    --fs40: 2.5rem;   /* --> 40px */
    --fs60: 3.75rem;  /* --> 60px */


    /* colors */
    --black: rgb(9, 9, 11);
    --white: rgb(255, 255, 255);
    --yellow: rgb(255, 228, 3);
    --yellow-btnhover: rgb(214, 191, 0);
    --green:rgb(15, 199, 0);
    --grigio: rgba(0, 0, 0, 0.624);
    --grigio-chiaro: rgb(247, 247, 247);
    --grigio-scuro: rgb(58, 58, 59);
    --black-disabled: rgb(118, 118, 118);
    --rosso: rgb(199, 31, 0);
    --gray-contactform: rgb(112, 112,112);
    --gray-placeholder: rgb(196, 196, 196);

}
html,
body,
p {
    font-family: "Work Sans", sans-serif;
    font-size: 16px!important;
    
}

html {
    background-color: rgb(247, 247, 247);
}
body {
    background-color:var(--white);
    width: 100%;
    max-width: 1440px!important;
    margin-left: auto;
    margin-right: auto;
}

.ew-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left:1.25rem;
    padding-right: 1.25rem;
}
.container {
    width: 100%;
    max-width:100%!important;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1200px) {
    body:not([class*=elementor-page-]) .site-main {
        max-width: 1440px;
    }
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1440px!important;
        margin: 0 auto;
    }
}

/*Reset elementor padding per .e-con-inner . elementor-element*/
.ew-container>.e-con-inner>.elementor-element {
    padding:0rem;
}
ol, ul {
    padding-left: 1rem!important;
}
ul li {
    list-style-position: outside;
}
p{
    margin-bottom:0rem;
}
p + p,
ul + p {
    margin-top: 0.5rem!important;
    margin-bottom: 0rem;
}
.elementor-widget-container p {
    margin-bottom:0px;
}

/* Font */
.fs-14,
.fs-14 .elementor-heading-title {
    font-size: clamp(var(--fs14), 0.79rem + 0.19vw, var(--fs14));
}

.fs-16,
.fs-16 .elementor-heading-title {
    font-size: var(--fs16); 
}

.fs-16-14,
.fs-16-14 .elementor-heading-title {
    font-size: clamp(var(--fs14), 0.839rem + 0.179vw, var(--fs16)); /* desktop 16px mobile 14px */
}

.fs-18,
.fs-18 .elementor-heading-title {
    font-size: var(--fs18);
}
.fs-20,
.fs-20 .elementor-heading-title {
    font-size: var(--fs20);
}

.fs-24-16,
.fs-24-16 .elementor-heading-title {
    font-size: clamp(var(--fs16), 0.857rem + 0.714vw, var(--fs24)); /* desktop 24px, mobile 16px */
}
.fs-24,
.fs-24 .elementor-heading-title {
    font-size: var(--fs24);
}

.fs-30,
.fs-30 .elementor-heading-title {
    font-size: clamp(var(--fs24), 1.393rem + 0.536vw, var(--fs30));
}


.fs-40-20,
.fs-40-20 .elementor-heading-title {
    font-size: clamp(var(--fs20), 0.893rem + 1.786vw, var(--fs40));  /* desktop 40px mobile 20px */
}

.fs-40-24,
.fs-40-24 .elementor-heading-title {
    font-size: clamp(var(--fs24), 1.214rem + 1.429vw, var(--fs40));  /* desktop 40px mobile 24px */
}
.fs-40-30,
.fs-40-30 .elementor-heading-title {
    font-size: clamp(var(--fs30), 1.696rem + 0.893vw, var(--fs40));  /* desktop 40px mobile3 0px */
}

.fs-60-36,
.fs-60-36 .elementor-heading-title {
    font-size: clamp(var(--fs36), 1.821rem + 2.143vw, var(--fs60));
}

.fs-60-24,
.fs-60-24 .elementor-heading-title {
    font-size: clamp(var(--fs24), 0.857rem + 3.214vw, var(--fs60));
}

/*Line height*/

.lh-100,
.lh-100 .elementor-heading-title {
    line-height: 1em;
}
.lh-116,
.lh-116 .elementor-heading-title {
    line-height: 1.16em;
}
.lh-133  {
    line-height: 1.33em;
}
.lh-14,
.lh-14 .elementor-heading-title {
    line-height: 1.4em;
}
.lh-175,
.lh-175 .elementor-heading-title {
    line-height: 1.75em;
}
.lh-1-75,
.lh-1-75 .elementor-heading-title {
    line-height: 1.175em;
}
.lh-183,
.lh-183 .elementor-heading-title {
    line-height: 1.183em;
}


/* Font family*/
.work-sans {
    font-family: "Work Sans", sans-serif;
}
/* Font weigt*/
.fw-700 {
    font-weight: 700;
}
.fw-800 {
    font-weight: 800;
}
.fw-900 {
    font-weight: 900;
}

/* Classi per background */
.bg-black {
    background-color: var(--black)!important;
}
.bg-white {
    background-color: var(--white);
}
.bg-yellow {
    background-color: var(--yellow);
}
.bg-grigio {
    background-color: var(--grigio);
}
.bg-grigio-chiaro {
    background-color: var(--grigio-chiaro);
}
.bg-grigio-scuro {
    background-color: var(--grigio-scuro);
}

/* Classi per colore del testo */
.black {
    color: var(--black);
}
.black-disabled {
    color: var(--black-disabled);
}
.white {
    color: var(--white);
}
.yellow {
    color: var(--yellow);
}
.green {
    color: var(--green);
}
.rosso {
    color: var(--rosso);
}
/* Vaping spazi*/
.p-1-25 {
    padding: 1.25rem;
}

.ppx-5 {
    padding:0 5.7rem;
}

.my-100 {
    margin: 6.25rem 0rem;
}
.mt-80 {
    margin-top:5rem;
}
.mt-40 {
    margin-top: 2.5rem;
}
.mb-20 {
    margin-bottom:1.25rem!important; 
}
@media (min-width: 768px) {
    .ps-50 {
        padding-left:3.125rem;
    }
    .pe-50 {
        padding-right:3.125rem;
    }
}


/* Spazi footer */
#footer-giallo {
    padding: 0.5rem 1.25rem;
}
.footer{
    padding: 1.875rem 1.25rem;
}

/* Spazi dei link del menu footer*/ 
.icona-fb .st0 {
    fill: #3E5C9A!important;
}
.icona-insta svg {
    width: 35px!important;
    height: auto;
}
.icona-fb svg{
    width: 35px!important;
    height: auto;
}
.icona-insta .st0 {
    fill: #fff!important;
}

#socialIconeFooter .e-con-inner {
    display:flex;
    flex-direction:row;
    justify-content: flex-end;
    column-gap: 10px;
}
.footer-menu li a {
    padding:0 0 0.625rem 0!important;
}
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
     margin-top:0px!important; 
   
}
@media (max-width: 767px) {
    #footer2 {
        padding-bottom:0px!important;
    }
    #footer3 {
        padding-top:0px!important;
    }
    #socialIconeFooter .e-con-inner {
       
        justify-content: center;
       
    }
    #footer2 {
        padding-bottom:0.625rem!important;
    }
    .lh-175,
    .lh-175 .elementor-heading-title {
        line-height: 1.16em;
    }
}



@media (max-width: 767px) {
    /*.p-1-25 {
        padding: 2.5rem 1.25rem;
    }*/
    .my-100 {
        margin: 2.5rem 0rem;
    }
    .ppx-5 {
        padding:0 1.25rem;
    }
    .giallo-text {
        padding: 2.5rem 1.25rem!important;
        color: var(--black);
        text-align: center;
        line-height: 1.75rem!important;
    }
    .fumonero-text {
        padding: 2.5rem 1.25rem !important;
        text-align: center!important;
        line-height: 1.4em!important;
    }
    #section-black {
        background-image: none;
    }
    .mt-80 {
        margin-top:2.3rem;
    }
    .mt-40 {
        margin-top: 1.6rem;
    }
    .mt-40-mobile {
        margin-top: 2.5rem;
    }
    .fs-40-20,
    .fs-40-20 .elementor-heading-title {
        line-height: 1.2em!important;
    }
}
@media (min-width: 1024px) {
    .mb-90 {
        margin-bottom:5.625rem!important;
    }
    .navigation-wrapper {
        position: relative;
        overflow: hidden;
    }

    /* Overlay con sfumatura */
    .navigation-wrapper .overlay {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px; /* Regola la larghezza della sfumatura */
        height: 100%;
        background: linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.6), rgba(51, 51, 51, 0.4), transparent);
        pointer-events: none; 
        z-index: 1; 
    }
    
}
/*Header*/

#header {
    padding: 1.125rem 1.25rem;
}
/*Hero slider home page*/

#vapingSlider,
.dots,
.arrow {
    position: relative;
    z-index: 0;
}
  
.dots {
    display: flex;
    padding: 20px 0 10px 0;
    justify-content: center;
}
  
.dot {
    border: none;
    width: 10px;
    height: 10px;
    background: #c5c5c5;
    border-radius: 50%;
    margin: 0 5px;
    padding: 5px;
    cursor: pointer;
}
  
.dot:focus {
    outline: none;
}

.dot--active {
    background: #FFE403;
}
.aspect-ratio8 {
    aspect-ratio:0.8;
}
.img-gallery {
    width: 257px!important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    aspect-ratio: 0.8;
}

.btn-giallo {
    padding: 14px 30px; 
    background-color: var(--yellow); 
    color: var(--black); 
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    border-radius: 0px!important;
}
.btn-black {
    padding: 14px 30px; 
    background-color: var(--black); 
    color: var(--white); 
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    border-radius: 0px!important;
}


/*sezione giallo*/

.giallo-text {
    padding: 7rem 14rem;
    color: var(--black);
    text-align: center;
    line-height: 1.16rem;
    height: fit-content;
}
.fumonero-text {
    color: var(--white);
    text-align: end;
    line-height: 1.16em!important;
    padding-right:12%!important;
}

/*contenitore per le images di sezione news */
.imgnews-container{
    height: 280px;
    padding-bottom: 1.375rem; 
}

.imgnews-container img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

.ew-container-grid {
    display: grid;
    grid-template-columns: 63% 37%;
}
hr.separator {
    width: 30.8%;
    border: none;
    height: 3px;
    background-color: var(--black)!important;
    opacity: 1;
    margin-top: 3.125rem;
    margin-bottom: 2.5rem;
}

/* Tablet Landscape (1024px) - Colonne 50% e 50% */
@media (max-width: 1024px) {
    .ew-container-grid {
        grid-template-columns: 50% 50%;
    }
}

/* Mobile e Tablet Portrait (768px) - Colonne una sotto l'altra */
@media (max-width: 768px) {
    .ew-container-grid {
        grid-template-columns: 100%!important;
    }
    #rightHero {
        min-height: 170px;
    }
    hr.separator {
        width: 40%;
        border: none;
        height: 3px;
        background-color: var(--black)!important;
        opacity: 1;
        margin-top: 1.9rem;
        margin-bottom: 1.9rem;
    }
    #fullScreenModal .modal-body {
        align-items: flex-end!important;
    }
    #uniscitiANoi {
        padding-top:3.75rem!important;
        padding-bottom: 3.75rem!important;
    }
    #contact-form-custom input,
    #contact-form-custom textarea {
    font-size: var(--fs20) !important;
    }

    .page-id-261 #footer-giallo {
        display: none;
    }
}

/* Top shop slider*/

#topShopSlider {
    display: flex; 
}
.tvc-store-card {
    display: flex;
    flex-direction: column; 
    justify-content: space-between; 
    height: 100%; 
    overflow: hidden; 
}
.tvc-store-image {
    aspect-ratio: 1.37;
    background-size: cover; /* Cover the image container */
    background-position: center; /* Center the image */
}
.tvc-store-card-body {
    flex-grow: 1; 
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    flex-direction: column;
}
#topShopSlider .tvc-store-card-body {
    padding: 1.25rem; 
}
#newsSlider .tvc-store-card-body,
#archivioNews .tvc-store-card-body {
    padding: 1.25rem 0rem; 
}

.store-card:hover {
    cursor:pointer;
}
.menu-principale a.active {
    color: var(--yellow);
}
.modal-header {
    border-bottom:0px!important;
    padding: 1.125rem 1.25rem;
}
a.active {
    color: var(--yellow)!important;
}
div#contentSlider {
    padding-right: 10%;
}
#uniscitiANoi {
    padding-top:2.2rem;
    padding-bottom: 3.125rem;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: auto; /* Adjust rows based on content */
    gap: 50px 50px; /* Space between items */
}

.news-card {
    /* Customize styling for each card */
    overflow: hidden;
    border-radius: 8px;
}

/*Pagina diventa nostro partner */

.bg-cover-section {
    background-image: url('/wp-content/uploads/2024/11/bg-diventa-partner.jpg');
    background-size: cover;
    background-position: center;
    height:589px;
}
#contentBannerPartner {
    margin-top: 5rem!important;
}
@media (min-width: 768px) {
    #contentBannerPartner {
        padding: 0 13%;
    }
    .banner-btn {
       max-width:350px; 
    }
    .bg-cover-section {
        height:480px;
    }
}
.banner-btn {
    width: 100%;
}
.cards-partner img {
    height:102px;
}
@media (min-width: 1200px) {
    .col-lg-30 {
        flex: 0 0 30%;
        max-width: 30%;
    }
    .col-lg-70 {
        flex: 0 0 70%;
        max-width: 70%;
    }
}
.row {
    --bs-gutter-x:0rem;
}
.grid-partner {
    display: grid;
    gap: 50px;
}
@media (min-width: 768px) {
    .grid-partner {
        grid-template-columns: 1fr 1fr;
    }
    .col-partner {
        grid-column: span 1;
    }
}
@media (min-width: 1200px) {
    .grid-partner {
        grid-template-columns: 30% 70%;
    }
    .col-partner:first-child {
        grid-column: span 1;
    }
    .col-partner:last-child {
        grid-column: span 1;
    }
}
#accordionContent .accordion-button::after {
    background-image: url(../img/change.svg) !important;
    background-size: 1.5rem !important;
    width: 1.5rem !important;
    height: 1.2rem !important;
    white-space:normal;
}
#accordionContent .accordion-button {
    white-space:normal;
    line-height: 1.33em;
}

#accordionContent .accordion-button:not(.collapsed) {
    color: var(--black) !important;
    background-color: var(--grigio-chiaro) !important;
    box-shadow: none !important;
    white-space:normal;
}

#accordionContent .accordion-button:hover {
    background-color: var(--grigio-chiaro) !important;
    color: var(--black) !important;
    outline: none;
}

#accordionContent .accordion-button:focus {
    box-shadow: none !important;
    background-color: var(--grigio-chiaro) !important;
}
@media (min-width: 768px) {
    div#accordionContent {
        padding: 3.125rem 10%!important;
    }
    #accordionContent .accordion-button {
        white-space:normal;
        line-height: 1.75em;
    }
}
div#accordionContent {
    padding: 3.125rem 0%;
}

#accordionContent .accordion-body,
#accordionContent .collapsed {
    background-color: var(--grigio-chiaro);
    color: var(--black);
}
#accordionContent .accordion-body {
    line-height: 1.75em!important;;
}

/* Stile per i campi di input Contact Form */

#contact-form-custom {
    text-align: left; 
}

#contact-form-custom input,
#contact-form-custom textarea {
    caret-color: var(--white);
    color: var(--white);
    font-size: var(--fs30);
    border: none; 
    border-bottom: 1px solid var(--gray-contactform); 
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    cursor: text;
}

#contact-form-custom input::placeholder,
#contact-form-custom textarea::placeholder {
    color: var(--gray-placeholder); 
    opacity: 1; 
}

#contact-form-custom input:focus,
#contact-form-custom textarea:focus {
    background-color: var(--grigio-scuro);
}

#btn_inviarichiesta {
    font-size: var(--fs16);
    background-color: var(--yellow);
    color: var(--black);
    padding: 15px 52px; 
    border: none; 
    border-radius: 0; 
    cursor: pointer; 
}

#btn_inviarichiesta:hover,
.btn-giallo:hover,
.btn-contatti:hover {
    color: var(--white);
    background-color: var(--yellow-btnhover);
}

.btn-contatti {
    background-color: var(--yellow); 
    color: var(--black); 
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    border-radius: 0;
}

#gmaps {
    aspect-ratio: 1.06;
}

#fullScreenModal img:hover,
#ew-menu-icon:hover {
    cursor: pointer;
}

.page-id-261 #footer-giallo span{
    display: none;
}

.page-id-261 #footer-giallo {
    height: 40px;
}

/* Padding zero della data News, articolo singolo */
#data-news ul {
    padding: 0 !important;
}

/*  Lista negozi, scroll verticale */
.list-cnt {
    max-height: 600px;
    overflow-y: auto;
}

@media (max-width: 767px) {
    .list-cnt {
        max-height: none;
        overflow-y: visible;
    }
}