:root {
    --primary: #7d7270;
    --secondary: #0d578d;
    --white: #ffffff;
    --white-trasparent: #ffffff8f;
    --white-trasparent-logo: #ffffffa9;
    --white-trasparent-light: #ffffff36;
    --black: #000000;
    --black-trasparent: #00000067;
    --gray: #696767;
    --black-trasparent: #00000044;
    --navbar: var(--secondary);
    --white-opacity: #ffffff67;
    --border-color: #344647;
    --btn-back: #da9d1a;
    --btn-nav-back: #da9d1a;
    --btn-hover: #b29b81;
    --red: #ab272d;
}
.navbar-header a{
    color:var(--white)!important;
}
.container-wha{
    position: fixed;
    bottom:1rem;
    z-index: 99999;
    right:1rem;
    width:120px;
}
.marchi {
    padding: 0.5em;
}
.navbar-nav-2{
    padding:0.5em;
    width: 100%;
}
.navbar-nav-2 li{
    
    margin-right:4rem;
}
.navbar-nav-2 li a{
    text-decoration: none;
}
body {
    font-family: 'Urbanist', sans-serif;
}

.col-footer {
    padding: 2em;
}

.container {
    max-width: 85%;
}

.desktop-hidden,
.tablet-hidden,
.mobile-hidden {
    display: none;
}

.desktop-visible,
.table-visible,
.mobile-visible {
    display: block;
}

#map {
    height: 300px;
}

s.image-container {
    overflow: hidden;
    position: relative;
}

.back-macchine-elettroniche:hover,
.back-macchine-industriali:hover,
.back-macchine-industriali:hover,
.back-ricambi-accessori:hover,
.back-filati:hover,
.back-ricamatori:hover,
.back-ferri:hover {
    transform: scale(1.1);
}

.back-macchine-elettroniche {
    background-image: url("../img/icon/header-negozio.jpg");
}

.back-macchine-industriali {
    background-image: url("../img/icon/header-industriali.jpg");
}

.back-ricambi-accessori {
    background-image: url("../img/icon/header-ricambi.jpg");
}

.back-filati {
    background-image: url("../img/icon/filati.jpg");
}

.back-ricamatori {
    background-image: url("../img/icon/ricamatrici.jpg");
}

.back-ferri {
    background-image: url("../img/icon/ferri-da-stiro.jpg");
}

.back-ferri,
.back-ricamatori,
.back-filati,
.back-ricambi-accessori,
.back-macchine-industriali,
.back-macchine-elettroniche,
.back-ferri {
    transition: all 1s;
    aspect-ratio: 1/1;
    border-radius: 55%;
    background-position: center;
    border: 4px solid var(--secondary);
    background-size: cover;
}

/*animation*/
.img-hover-zoom {
    /* [1.1] Set it as per your need */
    overflow: hidden;
    /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
    transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
    transform: scale(1.3);
}

.animated {
    animation-duration: 2s;
}

.hidden-desktop {
    display: none !important;
}

/* -------------- CLASSI ULILITY ------------------*/
/*flex-control*/
.flex-end {
    display: flex;
    justify-content: end;
}

.vertical-bottom {
    display: flex;
    align-items: end;
}

.flex-centered {
    display: flex;
    justify-content: center;
}

.vertical-center {
    display: flex;
    align-items: center;
}

.nopadding {
    padding: 0;
}

.nomargin {
    margin: 0;
}

/*------------- TITLE E TESTI-----------------*/
.subtitle-contatti {
    font-weight: 700;
    text-transform: uppercase;
    padding-top: 0em;
    padding-bottom: 0.5em;
    font-size: calc(45px + (45 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--secondary);
}

.letter {
    font-weight: 600;
    font-size: calc(33px + (100 - 83) * ((100vw - 300px) / (1920 - 300)));
}

.title {
    line-height: 3.5rem;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    padding: 0.2em;
    font-size: calc(83px + (100 - 83) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 800;
    color: var(--white);
}

.text-mini {
    font-family: 'Urbanist', sans-serif;
    font-weight: 400;
    text-transform: none;
    font-size: calc(33px + (100 - 83) * ((100vw - 300px) / (1920 - 300)));
}

.logo-video {
    width: 20%;
    position: absolute;
    bottom: 36%;
    left: 40%;

}

.container-logo {
    position: absolute;
    left: 0
}

.spacer {
    letter-spacing: 0.02rem;
    padding-top: 1.5em;
    position: relative;

}

.border-blue {
    background-color: var(--white-trasparent-logo);
    width: 32%;
    border-radius: 50%;
    padding-bottom: 2em;
    border: 3px solid var(--secondary);
}

.title-page {

    letter-spacing: 0.3rem;
    padding: 0.2em;
    font-size: calc(83px + (100 - 83) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 600;
    color: var(--white);
}

.title-2 {
    text-transform: uppercase;
    line-height: 2rem;
    letter-spacing: 0rem;
    font-size: calc(63px + (100 - 63) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 800;
    color: var(--secondary);

}

.overlay {
    padding: 1em;
}

.icon-contatti {
    width: 100px;
    position: absolute;
    top: -50px;
}

.subtitle {
    font-weight: 700;
    text-transform: uppercase;
    padding-top: 1em;
    padding-left: 1em;
    padding-bottom: 0.5em;
    font-size: calc(45px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--secondary);
}

.subtitle-inverted {
    text-transform: uppercase;
    font-weight: 700;
    padding-top: 1em;
    padding-left: 1em;
    padding-bottom: 0.5em;
    font-size: calc(45px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));
    color: var(--white);
}

.subtitle-footer {

    color: var(--secondary);
    font-weight: 700;
    font-size: calc(45px + (35 - 22) * ((100vw - 300px) / (1920 - 300)));
}

.text {
    padding: 2em;
    font-size: calc(18px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.text-inverted {
    color: var(--white);
    padding: 2em;
    font-size: calc(18px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.spacing-bottom {
    padding-bottom: 1em;
}

/*------------------ VIDEO ------------------*/
.overlay {
    padding: 3em;
    position: relative;

}

#back-video {
    max-height: 86vh;
    z-index: -1;
    position: relative;
    object-fit: cover;
    padding: 0;
}

.logo-footer {
    width: 40%;
}

.spacing-top {
    padding-top: 2em;
}

.img-fondatore {
    padding: 0em;
}

.content-page {
    min-height: 86vh;
}

/*------------------ NAVBAR ------------------*/
.navbar {
    background-color: var(--white);

}

.dropdown-menu {
    background-color: #0d578d;
    border-radius: unset;
    border: 0;

}

.dropdown-menu li {
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));


}

.dropdown-menu li a {
    color: var(--white);

}

.dropdown-menu li a:hover {
    background-color: var(--secondary);
    color: var(--white);
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.navbar-expand-lg {
    flex-wrap: wrap;
    padding-bottom: 0;
}

.logo {
    position: absolute;
    left: 0;
}

.nav-item {
    padding-right: 10em;
}

.nav-link,
.link-second-nav {
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    text-transform: uppercase;
    font-weight: 600;
    color: var(--secondary);

}

.nav-link:hover {
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
    text-transform: uppercase;
    font-weight: 600;
    color: var(--black);
    background-color: var(--white);


}


/*-------------- FOOTER ---------------*/
.link-footer {

    text-decoration: none;
    color: var(--black);
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.dati-aziendali {
    font-family: 'Roboto', sans-serif;
    background-color: #262626;
    color: var(--white);
    padding: 0.5em;
    margin-bottom: 0px;
}

.dati-aziendali a {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    color: var(--white);
    padding: 0.5em;
    margin-bottom: 0px;
}

.logo-footer {
    width: 25%;
    padding: 1em;
}

.col-footer {
    padding-bottom: 1.5em;
}

/*------------------- BORDI --------------------*/
.bordered-top {
    border-top: 5px solid var(--secondary);
}

.bordered {
    border: 2px solid var(--white);
}

.collapse-button {
    padding: 1em;
}

/*------------------- BACKGROUND IMAGE ---------------------*/
.header-negozio {
    position: relative;
    z-index: -1;
    background-image: url("../img/negozio.jpg");
    background-size: cover;
    min-height: 85vh;
    background-position: 20% 100%;
    background-attachment: fixed;
}

.header-macchine-elettroniche {
    position: relative;
    z-index: -1;
    background-image: url("../img/macchina-elettronica.jpg");
    background-size: cover;
    min-height: 85vh;
    background-position: 20% 100%;
    background-attachment: fixed;
}

.header-macchine-industriali {
    position: relative;
    z-index: -1;
    background-image: url("../img/header-industriali.jpg");
    background-size: cover;
    min-height: 83vh;
    background-position: 20% 100%;
    background-attachment: fixed;
}

.header-ferri-da-stiro {
    position: relative;
    z-index: -1;
    background-image: url("../img/ferri-da-stiro.jpg");
    background-size: cover;
    min-height: 83vh;
    background-position: 20% 100%;
    background-attachment: fixed;
}

.header-ricambi {
    position: relative;
    z-index: -1;
    background-image: url("../img/header-ricambi.jpg");
    background-size: cover;
    min-height: 83vh;
    background-position: 20% 100%;
    background-attachment: fixed;
}

.back-macchina-negozio {
    background-image: url("../img/macchina-negozio.jpg");
    background-size: cover;
    min-height: 55vh;
    background-position: 50% 50%;
    background-repeat: no-repeat;

}

.header-filati {
    position: relative;
    z-index: -1;
    background-image: url("../img/filati.jpg");
    background-size: cover;
    min-height: 83vh;
    background-position: 20% 100%;
    background-attachment: fixed;
}

.back-merceria {
    background-image: url("../img/merceria.jpg");
    background-size: cover;
    min-height: 55vh;
    background-position: 50% 50%;
    background-repeat: no-repeat;

}

.back-macchine-cucito {
    min-height: 55vh;
    background-image: url("../img/macchine-cucire.jpg");
    background-position: 50% 5%;
    background-size: cover;
}

.back-preventivo {
    padding: 3em;
    position: relative;

    min-height: 65vh;
    background-image: url("../img/back-preventivo.jpg");
    background-position: 50% 5%;
    background-size: cover;
    background-attachment: fixed;
}

.back-riparazione {
    min-height: 55vh;
    background-image: url("../img/riparazione.jpg");
    background-position: 50% 5%;
    background-size: cover;
}

/*-------------- LINK ---------------------*/
.button {
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    background-color: var(--secondary);
    border: 1px solid var(--secondary);
    color: var(--white);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}

.container-button {
    padding-top: 1em;
    padding-bottom: 2em;
}

.container-button-pdf {
    padding-top: 0.3em;
    padding-bottom: 1em;
}

.button-pdf-jack {
    display: block;
    width: 30vh;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    background-color: var(--white);
    border: 1px solid var(--secondary);
    color: var(--secondary);
    padding: 0.5em;
    font-size: calc(17px + (18 - 17) * ((100vw - 300px) / (1920 - 300)));
}

.button-pdf {
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    background-color: var(--white);
    border: 1px solid var(--secondary);
    color: var(--secondary);
    padding: 0.5em;
    font-size: calc(17px + (18 - 17) * ((100vw - 300px) / (1920 - 300)));
}

.button-pdf,
.button-pdf-jack:hover {
    background-color: var(--secondary);
    border: 1px solid var(--white);
    color: var(--white);

}

.button-inverted {
    white-space: nowrap;
    text-decoration: none;
    background-color: var(--white);
    border: 1px solid var(--secondary);
    color: var(--secondary);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}

.button-inverted:hover {
    text-decoration: none;
    background-color: var(--white);
    border: 1px solid var(--secondary);
    color: var(--secondary);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}

.button:hover {
    text-decoration: none;
    background-color: var(--white);
    border: 1px solid var(--secondary);
    color: var(--secondary);
    padding: 0.5em;
    border-radius: 10px;
    font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
}

.btn-nav {
    border-radius: 10px;
    margin-right: 2rem;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    background-color: var(--secondary);
    border: 1px solid var(--secondary);
    color: var(--white);
    padding: 0.5em;
    white-space: nowrap;
    ;
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.btn-nav:hover {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    border-radius: 10px;
    background-color: var(--secondary);
    border: 1px solid var(--btn-back);
    color: var(--black);
    padding: 0.5em;
    font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
}

/*--------------------------- CLASSI COLORI TESTO ----------------------------------*/
.white {
    color: var(--white);
}

.black {
    color: var(--black);
}

.back-white {
    background-color: var(--white);
}

.back-white-trasparent {
    background-color: var(--white-trasparent);
}

.back-white-trasparent-page {
    background-color: var(--white-trasparent-light);
}

.back-black-trasparent {
    background-color: var(--black-trasparent);
}

.back-icon {
    background-color: var(--secondary);
    border-radius: 50%;
}

.back-blue {
    background-color: var(--secondary);
}

.bordered {
    border: 3px solid white;
}

/*-------------------------------------*/
.icon {
    width: 80%;
    padding: 1em;
}

.subtitle-icon {
    font-family: 'Exo 2', sans-serif;
    padding-top: 1em;

    font-weight: 700;
    color: var(--secondary);
    padding-bottom: 1em;
    font-size: calc(20px + (25 - 22) * ((100vw - 300px) / (1920 - 300)));

}

.link-icon {
    text-decoration: none;
    color: var(--black);
}

@media only screen and (max-width:1920px) {
    .title {
        text-transform: uppercase;
        line-height: 3rem;
        letter-spacing: 0.48rem;
        padding: 0.2em;
        font-size: calc(55px + (62 - 55) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 800;
    }

    .text-mini {
        font-size: calc(27px + (25 - 22) * ((100vw - 300px) / (1920 - 300)));
    }

    .container-logo {
        padding: 3em;
    }

    .title-2 {
        text-transform: uppercase;
        line-height: 1.5rem;
        letter-spacing: 0rem;
        font-size: calc(45px + (45 - 22) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 800;
    }

    .logo-video {
        bottom: 40%;
    }

    .spacer {
        letter-spacing: 0.24rem;
    }

    .nav-item {
        padding-right: 5em;
    }
}

@media only screen and (max-width:1465px) {
    #back-video {
        height: 79vh;
    }

    .logo-nav {
        max-width: 70%;
    }

    .nav-item {
        padding-right: 5em;
    }

    .title {
        padding: 0.2em;
        font-size: calc(83px + (100 - 83) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 800;
        color: var(--white);
    }

    .logo-video {
        width: 20%;
        position: absolute;
        bottom: 36%;
        left: 40%;
    }

    .container-logo {
        position: absolute;
        left: 0
    }

    .spacer {
        letter-spacing: 0.02rem;
        padding-top: 1em;
        position: relative;
    }

    .border-blue {
        background-color: var(--white-trasparent-logo);
        width: 45%;
        border-radius: 50%;
        padding-bottom: 2em;
        border: 3px solid var(--secondary);
    }

    .header-macchine-elettroniche {
        background-position: 20% 66%;
    }

    .header-negozio,
    .content-page,
    .header-macchine-industriali,
    .header-ricambi {
        min-height: 95vh;
    }

    .back-macchine-cucito,
    .back-merceria {
        min-height: 75vh;
    }

    .back-riparazione {
        min-height: 90vh;
    }

    .subtitle-contatti {
        font-size: calc(30px + (36 - 30) * ((100vw - 300px) / (1920 - 300)));
    }

    .btn-nav {
        border-radius: 10px;
    }

    .title-page {
        font-size: calc(52px + (55 - 52) * ((100vw - 300px) / (1920 - 300)));
    }


}

@media only screen and (max-width:1400px) {

    .back-macchine-cucito,
    .back-riparazione {
        min-height: 45vh;
    }

    .title {
        padding-top: 1em;
        font-size: calc(50px + (50 - 22) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 800;
        color: var(--white);
    }

    .back-macchina-negozio {
        background-position: right;
    }
}

@media only screen and (max-width:1171px) {

    .nav-item {
        padding-right: 1em;
    }

    .content {
        min-height: unset;
    }

    .btn-nav {
        margin-right: 0;
        text-align: center;
        font-size: calc(15px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
    }

    .logo-footer {
        width: 50%;
    }

    .nav-item {
        padding-right: 1.4em;
    }

    .logo-video {
        width: 24%;
        position: absolute;
        bottom: 37%;
        left: 38%;

    }

    .container-logo {
        position: absolute;
        left: 0
    }

    .spacer {
        letter-spacing: 0.04rem;
        padding-top: 2em;
        position: relative;
        bottom: 0;
    }

    .border-blue {
        background-color: var(--white-trasparent-logo);
        width: 45%;
        border-radius: 50%;
        border: 3px solid var(--secondary);
    }

}

@media only screen and (max-width:981px) {
    .navbar-nav-2{
        text-align: center;
        width: 100%;
        flex-direction: row;
        display: inline-flex;
        padding:em;
        width:auto;
    }
    .navbar-nav-2 i{
        margin-left:1rem;
    }
    .button-pdf-jack {
        width: 20vh;
    }

    .link-second-nav {
        color: var(--white);
        text-decoration: none;
        padding: 1em;
        text-transform: none;
    }

    .tablet-hidden {
        display: none;
    }

    .tablet-visible {
        display: block;
    }

    .hidden-tablet {
        display: none !important;
    }

    .nav-link {
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
        text-transform: uppercase;
        font-weight: 600;
        color: var(--secondary);

    }

    .nav-link:hover {
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
        text-transform: uppercase;
        font-weight: 600;
        color: var(--secondary);

    }

    .dropdown-menu li a {
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    }

    .logo-video {
        width: 24%;
        position: absolute;
        bottom: 37%;
        left: 36%;

    }

    .container-logo {
        position: absolute;
        left: 0
    }

    .spacer {
        letter-spacing: 0.04rem;
        padding-top: 2em;
        position: relative;
        bottom: 0;
    }

    .border-blue {
        background-color: var(--white-trasparent-logo);
        width: 55%;
        border-radius: 50%;
        border: 3px solid var(--secondary);
    }

    .title-page {
        font-size: calc(60px + (60 - 22) * ((100vw - 300px) / (1920 - 300)));
    }

    /*------------------- BACKGROUND IMAGE ---------------------*/
    .nav-item {
        padding-right: 0;
    }

    .navbar {
        border-bottom: 2px solid var(--secondary);
    }

    .back-preventivo {
        padding: 0.5em;
    }

    .hidden-desktop {
        display: unset !important;
    }

    .header-negozio {
        min-height: 85vh;
    }

    .header-filati {
        min-height: 85vh;
    }

    .header-macchine-elettroniche {
        min-height: 85vh;
    }

    .back-macchina-negozio {
        min-height: 45vh;
    }

    .back-merceria {
        min-height: 45vh;
    }

    .back-macchine-cucito {
        min-height: 45vh;
    }

    .back-preventivo {
        min-height: 45vh;
    }

    .back-riparazione {
        min-height: 45vh;
    }

    .container-button {
        text-align: center;
    }

    .logo-footer {
        width: 100%;
    }

    .nav-link {
        padding-left: 1em;
        padding-top: 0.7em;
        padding-bottom: 0.7em;
    }

    .btn-nav {
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
        width: 100%;
        display: block;
        padding-left: 1em;
        margin-top: 1rem;

    }

    .btn-nav:hover {
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
        width: 100%;
        display: block;
        padding-left: 1em;
        margin-top: 1rem;

    }

    .text {
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    }

    .text-inverted {
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    }

    .link-footer {
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    }

    .col-footer {
        font-size: calc(22px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    }

}

@media only screen and (max-width:630px) {
    .container-wha{
        position: fixed;
        bottom:5rem;
        z-index: 99999;
        right:1rem;
        width:80px;
    }
    .navbar-nav-2{
        text-align: center;
        width: 100%;
        flex-direction: row;
        display: inline-flex;
        padding:em;
        width:auto;
    }
    .navbar-nav-2 i{
        margin-left:1rem;
    }
    .navbar-nav-2 li{
        
        margin-right:0.5rem;
    }
    .button-pdf-jack {
        width: 15vh;
    }

    .row-fondatore {
        justify-content: center;

    }

    .logo-nav {
        max-width: 150px;
    }

    .title-page {
        font-size: calc(45px + (50 - 45) * ((100vw - 300px) / (1920 - 300)));
    }

    .title-macchine {
        font-size: calc(45px + (50 - 45) * ((100vw - 300px) / (1920 - 300)));
    }

    .link-second-nav {
        font-size: calc(16px + (15 - 12) * ((100vw - 300px) / (1920 - 300)));
    }

    #back-video {
        object-fit: contain;
        height: unset;
        padding-top: 7em;
    }

    .mobile-visible {
        display: block;
    }

    .mobile-hidden {
        display: none;
    }

    .title {
        letter-spacing: 0.2rem;
        color: var(--white);
        font-size: calc(35px + (35 - 28) * ((100vw - 300px) / (1920 - 300)));
    }

    .text-mini {
        color: var(--white);
        font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }

    .subtitle-contatti {
        font-weight: 700;
        text-transform: uppercase;
        padding-top: 0em;
        padding-bottom: 0.5em;
        font-size: calc(35px + (35 - 24) * ((100vw - 300px) / (1920 - 300)));
        color: var(--secondary);
    }

    .dropdown-menu li a {
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }

    .nav-link {
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
        text-transform: uppercase;
        font-weight: 600;
        color: var(--secondary);
    }

    .nav-link:hover {
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
        text-transform: uppercase;
        font-weight: 600;
        color: var(--secondary);
    }

    .link-footer {
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }

    .navbar {
        border-bottom: 2px solid var(--secondary);
    }

    .col-footer {
        font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }

    .nav-link {
        padding-left: 1em;
        padding-top: 0.3em;

    }

    .container-button {
        text-align: center;
    }

    .logo-footer {
        width: 100%;
    }

    .subtitle-inverted {
        padding: 0.5em;
        font-size: calc(28px + (32 - 28) * ((100vw - 300px) / (1920 - 300)));
    }

    .logo-video {
        width: 100%;
    }

    .subtitle {
        font-size: calc(28px + (32 - 28) * ((100vw - 300px) / (1920 - 300)));
    }

    .text-inverted {
        padding: 0.5em;
        font-size: calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
    }

    .dati-aziendali {
        padding: 1em;
        font-size: calc(14px + (14 - 11) * ((100vw - 300px) / (1920 - 300)));
    }

    .logo-video {
        width: 26%;
        position: absolute;
        bottom: 29%;
        left: 36%;

    }

    .container-logo {
        position: absolute;
        left: 0
    }

    .spacer {
        letter-spacing: 0.04rem;
        padding-top: 2em;
        position: relative;
    }

    .border-blue {
        background-color: var(--white-trasparent-logo);
        width: 70%;
        border-radius: 50%;
        border: 3px solid var(--secondary);
    }

    /*------------------- BACKGROUND IMAGE ---------------------*/

    .button-pdf {
        font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1920 - 300)));
    }

    .header-negozio {
        background-attachment: unset;
        min-height: 75vh;
    }

    .content-page {
        min-height: 75vh;
    }

    .header-macchine-elettroniche {
        background-attachment: unset;
        min-height: 75vh;
    }

    .header-ferri-da-stiro {
        background-attachment: unset;
        min-height: 75vh;
    }

    .header-macchine-industriali {
        background-attachment: unset;
        min-height: 75vh;
        background-position: 60% 30%;
    }

    .header-ricambi {
        background-attachment: unset;
        min-height: 75vh;
    }

    .header-filati {
        background-attachment: unset;
        min-height: 75vh;
    }

    .back-macchina-negozio {
        min-height: 35vh;
    }

    .back-merceria {
        min-height: 35vh;
    }

    .back-macchine-cucito {
        min-height: 35vh;
    }

    .back-preventivo {
        min-height: 35vh;
    }

    .back-riparazione {
        min-height: 35vh;
    }

    .text {
        padding: 1em;
    }
    @media only screen and ( max-width: 375px){
        .navbar-nav-2{
            
            text-align: center;
            width: 100%;
            flex-direction: row;
            display: inline-flex;
            padding:0em;
            width:auto;
        }
        .navbar-nav-2 i{
            font-size:11px;
            margin-left:1rem;
        }
    }
}