@import url(./costants.css);
@import url("./text/text.css");
@import url("./text/text-sm.css") screen and (min-width: 552px);
@import url("./text/text-md.css") screen and (min-width: 768px);
@import url("./text/text-lg.css") screen and (min-width: 992px);
@import url("./text/text-xl.css") screen and (min-width: 1200px);
@import url("./text/text-xxl.css") screen and (min-width: 1400px);

/* text-10 per modificare il testo */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Quattrocento", serif;
}
html, body {
    margin:0;
    padding: 0;
    font-family: "Quattrocento", serif;
    font-optical-sizing: auto;
    font-style: normal;
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden;
}

/* Input - START */
input[type="number"] {
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input, textarea, select{
    padding: 12px 16px;
    border-radius: 0px;
    border: 1px solid var(--input);
}
input::placeholder, textarea::placeholder{
    color: var(--input-text)!important;
}
/* Input - END */

ul {
    list-style-type: none;
}
ul, li {
    margin: 0;
    padding: 0;
}
.no-opacity{
    opacity: 0;
}


/* Bottoni - START */
.cstm-btn{
    padding: 8px 12px;
    /*border-radius: 50px;*/
    background-color: transparent;
    color: black;
    transition: all 0.3s ease-in-out;
    border: 0;
}
.square-btn, .swal2-styled{
    width: 200px;
    height: 47px;
    padding: 15px 20px;
    border-radius: 0px;
    background-color: transparent;
    color: black;
    transition: all 0.3s ease-in-out;
}

.swal2-confirm .swal2-styled{ padding: 0px;}
.cstm-btn-white{
    background-color: var(--color-sand);
    color: var(--color-blue);
}
.cstm-btn-black, .swal2-styled{
    background-color: var(--color-blue);
    color: white;
}
/*
.cstm-btn-border{
    color: black;
    border: var(--color-beige) 2px solid;
}*/
.cstm-btn-border-white{
    color: white;
    border: white 2px solid;
}
.cstm-btn-border-black{
    color: black;
    border: black 2px solid;
}
.cstm-btn-black:hover{
    background-color: var(--color-coral);
    color: var(--color-white);
}
.cstm-btn-white:hover{
    background-color: var(--color-coral);
    color: var(--color-white);
}
.btn-dark-green-hover:hover{
    background-color: var(--color-dark-green);
    color: white;
}
.btn-white-hover:hover{
    background-color: white;
    color: black!important;
}
.btn-black-hover:hover{
    background-color: black;
    color: white!important;
}
.no-hover:hover{
    border: unset;
}
/* fine Bottoni - END */


/* Classi per il colore del testo */
.text-light-gray{color:var(--color-light-gray);}
.text-white{color:var(--color-white)!important;}
.text-dark-green{color:var(--color-dark-green);}
.text-brown{color:var(--color-brown);}
.text-beige{color:var(--color-beige);}
.text-cream{color:var(--color-cream);}
.text-coral{color:var(--color-coral);}
.text-lavic-gray{color:var(--color-lavic-gray);}

/* Classi per lo sfondo */
.bg-light-gray{background-color:var(--color-light-gray);}
.bg-light-blue{background-color:var(--color-light-blue);}
.bg-white{background-color:var(--color-white);}
.bg-dark-green{background-color:var(--color-dark-green);}
.bg-brown{background-color:var(--color-brown);}
.bg-beige{background-color:var(--color-beige);}
.bg-cream{background-color:var(--color-cream);}
.bg-dark-green{background-color:#36442F;}
.bg-blue{background-color:var(--color-blue);}
.bg-coral-soft{background-color:var(--color-coral-soft);}

.pointer{
    cursor: pointer;
}

/* Font-Style - START */
/*h1, h2, h3, h4, h5, h6 {}*/

h1{ font-size: 2rem;}
h2{ font-size: 1.8rem;}
/*h3{ font-size: 1.313rem;}*/
h4{ font-size: 1.063rem;}
h5{ font-size: 1.063rem;}

a{
    text-decoration: none;
    color: var(--blue-dark);
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -0.02em;
    margin-bottom: 0;    
    font-weight: 400;
}
.subtitle {
    font-family: "Quattrocento Sans", sans-serif;
    font-size: clamp(14px, calc(12px + 1vw), 24px);
    line-height: 28px;
    letter-spacing: -0.00em;
    margin-bottom: 0;
    font-weight: normal;
}
p, .paragraph-1, .cstm-btn,  .cstm-btn>a, a{
    font-family: "Quattrocento Sans", sans-serif;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.00em;
    margin-bottom: 0;    
    font-weight: normal;
}
.paragraph-2, .paragraph-2>*, .paragraph-2>*>a{
    font-family: "Quattrocento Sans", sans-serif;
    font-size: 14px;
    line-height: 110%;
    margin-bottom: 0;
    font-weight: 400;
}
.paragraph-2>*>a{
    text-decoration: underline!important;
}
.paragraph-3, .paragraph-3>*{
    font-family: "Quattrocento Sans", sans-serif;
    font-size: 14.9px;
    line-height: 130%;
    margin-bottom: 0;
    font-weight: 400;
}

.text-h3{
    font-family: "Quattrocento", serif;
    font-size: 30px;
    line-height: 150%;
    letter-spacing: -0.03em;
    margin-bottom: 0;
    font-weight: bold;
}

.swal2-title, .paragraph-big, .paragraph-big>*, .choices__item{
    font-family: "Quattrocento Sans", sans-serif;
    font-size: 16px;
    line-height: 140%;
    margin-bottom: 0;
    font-weight: 400;
}

.heading-1 {
    font-size: 48px;
    line-height: 110%;  
    letter-spacing: -0.02em;
    margin-bottom: 0;
    font-weight: 400;
}
.title-h1{
    font-size: clamp(32px, calc(20px + 3vw), 56px);
    line-height: 120%;
    letter-spacing: -0.03em;
    margin-bottom: 0;
    font-weight: 400;
}

.heading-2 {
    font-size: 28px;
    line-height: 110%;
    letter-spacing: -0.02em;
    margin-bottom: 0;   
    font-weight: 400;
}
.title-h2, .title-h2>p{
    font-size: clamp(22px, calc(16px + 2vw), 36px);
    line-height: 1.4;
    letter-spacing: -0.00em;
    margin-bottom: 0;
    font-weight: 400;
}
.heading-3, .heading-3>p {
    font-family: "Quattrocento Sans", sans-serif;
    font-size: clamp(14px, calc(12px + 1vw), 21px);
    line-height: 1.33;
    letter-spacing: -0.00em;
    margin-bottom: 0;    
    font-weight: 600;
}

.heading-4 {
    font-size: 15px;
    line-height: 120%;  
    letter-spacing: -0.01em;
    margin-bottom: 0;    
    font-weight: 700;  
}

.caption, .caption>* {
    font-size: 16px;
    line-height: 110%;
    margin-bottom: 0;   
    letter-spacing: -0.02em;
    font-weight: 400;
}

.link{
    font-size: 15px;
    line-height: 110%;
    margin-bottom: 0;
    letter-spacing: -0.02em;
    font-weight: 400;
}

.large-link-hover{
    font-size: 28px;
    line-height: 110%;
    margin-bottom: 0;
    margin-bottom: 0;
    letter-spacing: -0.02em;
    font-weight: 500;
}

.icon{ width: 24px;}

.inter-font-fam, .inter-font-fam>*, .swal2-html-container, .swal2-title, .swal2-styled { font-family: "Inter", sans-serif}
.EBgaramond-font-fam, .EBgaramond-font-fam>* { font-family: "EB Garamond", serif!important; }

.quattrocento-sans-font-fam, .quattrocento-sans-font-fam>*, .quattrocento-sans-font-fam>p, .swal2-html-container, .swal2-title, .swal2-styled { font-family: "Quattrocento Sans", sans-serif}
.quattrocento-font-fam, .quattrocento-font-fam>*, .quattrocento-font-fam>p { font-family: "Quattrocento", serif}

.row>*{
    transition: all 0.3s ease-in-out;
}

@media  (min-width: 768px) {
    h1{ font-size: 3rem;}
    h2{ font-size: 1.5rem;}
    /*h3{ font-size: 1.2rem;}*/
    h4{ font-size: 1.125rem;}
    h5{ font-size: 1.125rem;}

    .heading-1 { font-size: 66px;}
    .heading-2 { font-size: 39px;}
    /*.heading-3 { font-size: 32px;}*/

    .paragraph-3, .paragraph-3>*{
        font-size: 16px;
        line-height: 140%;
    }
    .swal2-title, .paragraph-big, .paragraph-big>*{ font-size: 18px;}
    .large-link-hover{ font-size: 39px;}
    .row>*{
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 32px;
        padding-bottom: 32px;
    }

}

@media  (min-width: 992px) {
    .title-h2, .title-h2>p{
        font-size: 56px;
        line-height: 120%;
        letter-spacing: -0.03em;
        margin-bottom: 0;
    }
}
@media  (min-width: 1200px) {
    .row>*{
        padding-left: 48px;
        padding-right: 48px;
        padding-top: 48px;
        padding-bottom: 48px;
    }
    h1{ font-size: 4.5rem;}
    h2{ font-size: 1.5rem;}
    /*h3{ font-size: 1.3rem;}*/
    h4{ font-size: 1.5rem;}
    h5{ font-size: 1.25rem;}

    .heading-1 { font-size: 80px;}
    .heading-2 { font-size: 48px;}
    /*.heading-3 { font-size: 36px;}*/
    .link{ font-size: 15px;}
    .large-link-hover{ font-size: 48px;}
}
/* Font-Style - END */


/* Size (non cancellare)  - START */

.w-20{ width: 20%;}

/* Size (non cancellare)  - END */


/* Border - START */
/* Border - END */


/* Icone - START */
    /* white-icon */
.icon-phone-white{ background-image: url("../img/icon/white/PhoneReceiverSilhouette.svg");}
.icon-email-white{ background-image: url("../img/icon/white/Email.svg");}
.icon-facebook-white{ background-image: url("../img/icon/white/Facebook.svg");}
.icon-instagram-white{ background-image: url("../img/icon/white/Instagram.svg");}
.icon-twitter-white{ background-image: url("../img/icon/white/Twitter.svg");}
.icon-play-white{ background-image: url("../img/icon/white/Play.svg");}

    /* black-icon */
.icon-down-chevron-black{ background-image: url("../img/icon/black/Down_chevron.svg");}
.icon-circle-down-black{ background-image: url("../img/icon/black/Chevron-Circle-Down.svg");}
.icon-email-black{ background-image: url("../img/icon/black/Email.svg");}
.icon-emailEmpty-black{background-image: url("../img/icon/black/Email.svg");}
.icon-whatsapp-black{ background-image: url("../img/icon/black/Whatsapp.svg");}
.icon-Phone-black{ background-image: url("../img/icon/black/Phone.svg");}
.icon-Headset-black{ background-image: url("../img/icon/black/CustomerServiceHeadset.svg");}
.icon-FastDelivery-black{ background-image: url("../img/icon/black/FastDelivery.svg");}
.icon-edit-black{ background-image: url("../img/icon/pagamenti/Edit.svg");}
.icon-facebook-black{ background-image: url("../img/icon/pagamenti/FacebookBlack.svg");}
.icon-instagram-black{ background-image: url("../img/icon/pagamenti/InstagramBlack.svg");}
.icon-twitter-black{ background-image: url("../img/icon/black/Twitter.svg");}
.icon-symbol-black{ background-image: url("../img/icon/black/Symbol.svg");}
.icon-bag-black{ background-image: url("../img/icon/black/Bag.svg");}
.icon-profile-black{ background-image: url("../img/icon/black/Profile.svg");}
.icon-filter-black{ background-image: url("../img/icon/black/Filter.svg");}
.icon-right-chevron-empty-black{ background-image: url("../img/icon/black/Chevron.svg");}
.icon-calendar{ background-image: url("../img/icon/black/Calendar.svg");}
.icon-discover{ background-image: url("../img/icon/pagamenti/Discover.svg");}
.icon-maestro{ background-image: url("../img/icon/pagamenti/maestro.svg");}
.icon-masterCard{ background-image: url("../img/icon/pagamenti/masterCard.svg");}
.icon-paypal{ background-image: url("../img/icon/pagamenti/paypal.svg");}
.icon-visa{ background-image: url("../img/icon/pagamenti/visa.svg");}
.icon-gls{ background-image: url("../img/gls_icon.png");}
/* fine icone */



/* GOOGLE */
.pac-container {
    z-index: 1057 !important; /* Deve essere più alto del modal */
}
.grecaptcha-badge {
    visibility: hidden;
}



/* INIZIO - UNDERLINE */
.underline{
    text-decoration: underline;
}

.underline-10{
    text-decoration: underline;
    text-underline-offset: 10px;
}
/* FINE - UNDERLINE */

/* IMMAGINI - INIZIO */
/* IMMAGINI - FINE */

.translate-50{ transform: translate(-50%, -50%)}
.translate-x-50{ transform: translate(-50%, 0%)}

.cursor-pointer { cursor: pointer;}
.divider{ border-top: #ffffff 1px solid; width: 35px;}
.w-18{ width: 18%;}

.description-text-justify{
    hyphens: auto!important;
    text-align: justify!important;
    max-width: 640px!important;
}

.text-justify{
    hyphens: auto!important;
    text-align: justify!important;
    max-width: 640px!important;
}

.fw-bold>* {
    font-weight: 700 !important;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 800px;
    }
}



.dynamicImage{transition: opacity 0.6s ease-in-out;}
.descripionImgContainer { max-height: 700px; transition: all 0.3s ease-in-out;}
.bg-image-props{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transition: all 0.3s ease-in-out;
}
.card-img{ width: 48px!important;}

.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands"!important;
}
.fa-classic, .fa-regular, .fa-solid, .far, .fas {
    font-family: "Font Awesome 6 Free"!important;
}