@font-face {
    font-family: SFProDisplay;
    font-weight: 300;
    src: url("../fonts/SFPRODISPLAYREGULAR.OTF") format('opentype');
}

@font-face {
    font-family: SFProDisplay;
    font-weight: 400;
    src: url("../fonts/SFPRODISPLAYREGULAR.OTF") format('opentype');
}

@font-face {
    font-family: SFProDisplay;
    font-weight: 500;
    src: url("../fonts/SFPRODISPLAYMEDIUM.OTF") format('opentype');
}

@font-face {
    font-family: SFProDisplay;
    font-weight: 600;
    src: url("../fonts/SFPRODISPLAYMEDIUM.OTF") format('opentype');
}

@font-face {
    font-family: SFProDisplay;
    font-weight: 700;
    src: url("../fonts/SFPRODISPLAYBOLD.OTF") format('opentype');
}

@font-face {
    font-family: SFProDisplay;
    font-weight: 800;
    src: url("../fonts/SFPRODISPLAYBOLD.OTF") format('opentype');
}

@font-face {
    font-family: SFProDisplay;
    font-weight: 900;
    src: url("../fonts/SFPRODISPLAYBLACKITALIC.OTF") format('opentype');
}

html, body {
    font-family: SFProDisplay;
    font-size: 14px;
    font-weight: 400;
}
/* Small devices (≥576px) */
@media (min-width: 576px) {
    html, body {
        font-size: 14px;
    }
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
    html, body {
        font-size: 14px;
    }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
    html, body {
        font-size: 15px;
    }
}

/* Extra large (≥1200px) */
@media (min-width: 1200px) {
    html, body {
        font-size: 16px;
    }
}

/* Extra extra large (≥1400px) */
@media (min-width: 1400px) {
    html, body {
        font-size: 18px;
    }
}

@media (min-width: 1850px) {
    html, body {
        font-size: 19px;
    }
}

:root {
    --grigio-scuro: #C6C6C6;
    --grigio-medio: #D4D4D4;
    --grigio: #E9E9E9;
    --grigio-chiaro: #F4F4F4;
    --B75: #7b7b7b;
}

.bg-grigiochiaro {
    background-color: var(--grigio-chiaro);
}

.bg-grigioscuro {
    background-color: var(--grigio-scuro);
}

.text-B75 {
    color: var(--B75);
}

.nav-bg-image {
    background-color: var(--bs-primary);
}

.margin-nav{
    margin-top: 5.5rem;
}

@media (min-width: 576px) {
    .nav-bg-image {
        background-image: url("../assets/images/nav-bg-image.svg");
        background-size: cover;
        background-position-x: left;
        background-position-y: bottom;
        background-color: transparent;
    }
}

.fs-xsmall {
    font-size: 0.75rem;
}

.fs-small {
    font-size: 0.85rem !important;
}

.fs-medium {
    font-size: 1.15rem !important;
}

.fs-large {
    font-size: 3rem;
}

.fs-xlarge {
    font-size: 3.5rem;
}

.fw-bolder {
    font-weight: 900 !important;
}

.custom-inputtext, .custom-inputtext-white {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid black;
    border-radius: 0;
}
.custom-inputtext-white {
    border-bottom: 1px solid white;
    color: white;
}

    .custom-inputtext:focus, .custom-inputtext-white:focus {        
        box-shadow: none;
    }

    .custom-inputtext-white:focus {
        color: white;
        background-color: transparent;
        border-color: white;
    }

    .custom-inputtext-white::placeholder {
        color: white;
        opacity: 1; /* Firefox */
    }

    .custom-inputtext-white::-ms-input-placeholder { /* Edge 12 -18 */
        color: white;
    }

.custom-inputcheck {
    border-radius: 0 !important;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.1em;
    border-color: black;
}

    .custom-inputcheck:checked {
    }

.custom-inputcheck-white {
    border-radius: 0 !important;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.1em;
}

    .custom-inputcheck-white:checked {
        border-color: white;
    }


.custom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: end;
}

    .custom-nav-item span {
        font-size: 0.5rem;
        color: white;
        opacity: 0.5;
        padding-right: 0.5rem;
    }

    .custom-nav-item .nav-link {
        padding-top: 0px !important;
        line-height: 1rem;
        color: white;
        border-bottom: 4px solid var(--bs-primary);
    }

        .custom-nav-item .nav-link.active {
            border-bottom: 4px solid white;
        }

.text-decoration-none {
    text-decoration: none;
}

.cursor-pointer{
    cursor:pointer;
}

.container-4xl {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

.navbar .container-4xl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

.me-4xl-5 {
    margin-right: 0rem;
}

@media (min-width: 1850px) {
    .container-4xl {
        max-width: 1700px;
    }

    .me-4xl-5 {
        margin-right: 3rem;
    }
}

.card-attrezzatura {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


    .card-attrezzatura div {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgb(169 169 169 / 15%);
        opacity: 0;
    }

        .card-attrezzatura div img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .card-attrezzatura div:hover {
            opacity: 100;
        }

.card-ricambio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

    .card-ricambio header {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .card-ricambio header div.hoverlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgb(169 169 169 / 15%);
            opacity: 0;
            /*transform: scaleX(1.1);*/
        }

            .card-ricambio header div.hoverlay img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .card-ricambio header div.hoverlay:hover {
                opacity: 100;
            }

.tools-home, .spareparts-home {
    width: 100%;
    position: relative;
}

    .tools-home div, .spareparts-home div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%;
        height: 95%;
        background-color: rgb(15 15 15 / 25%);
        opacity: 0;
        border-radius: 0.5rem;
    }

    .tools-home div {
        background-color: rgb(15 15 15 / 57%);
    }

        .tools-home div img, .spareparts-home div img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .tools-home div:hover, .spareparts-home div:hover {
            opacity: 100;
        }

    .tools-home section, .spareparts-home section {
        position: absolute;
        top: 5rem;
    }

.tools-home {
    background-color: var(--bs-primary);
}

    .tools-home section {
        left: 0;
    }

.spareparts-home {
    background-color: var(--grigio);
}

    .spareparts-home section {
        right: 0;
    }

.elenco_descrizioni .row-container {
    margin-bottom: 3rem;
}

@media (min-width: 576px) {
    .elenco_descrizioni .row-container:nth-child(2n) .row {
        flex-direction: row-reverse;
    }
}

@media (min-width: 768px) {
    .elenco_descrizioni .row-container {
        margin-right: 3rem;
    }

        .elenco_descrizioni .row-container:nth-child(2n) {
            margin-left: 3rem;
            margin-right: 0;
        }
}

@media (min-width: 992px) {
    .margin-nav{
        margin-top:7.5rem;
    }
}