/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .btn-solid-red {
        white-space: nowrap;
    }
    .hero-background {
        width: 550px;
    }
    .logo-header {
        height: 80px;
    }

    .mt--50 {
        margin-top: -50%
    }

    .left-1 {
        left: -1% !important;
        width: 75%;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        color: white !important;
    }


    .black .breadcrumb-item + .breadcrumb-item::before {
        color: black !important;
    }

    .position-sm-absolute {
        position: absolute;
    }

    .position-sm-absolute.text-white-hero {
        color: white;
    }

    .position-sm-absolute.translate-y {
        transform: translateY(-50%) !important;
    }

    .h-200 {
        min-height: 300px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .hero-background {
        width: 700px;
    }
    .border-md-end {
        border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }

    .position-md-absolute {
        position: absolute;
    }

    .left-1 {
        left: -1% !important;
        width: 100%;
    }

    .background-grey {
        background: url('/assets/site/custom/img/Unione 7.png') right no-repeat;
        background-size: contain;
    }

    .position-sm-absolute.top-50-custom {
        top: 5% !important;
    }

    .container-bigger {
        max-width: 780px;
    }

    .border-lg-bottom {
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--black) !important;
    }

    .height-200 {
        height: 200px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .hero-background {
        width: 700px;
    }
    .logo-header {
        height: 90px;
    }

    .min-h-150 {
        min-height: 100px;
    }

    .size-custom {
        background-size: 48% auto !important;
        background-position-y: bottom !important;
    }

    .bg-size-contain {
        background-size: 100% !important;
    }

    .mt--5 {
        margin-top: -5% !important;
    }

    .border-highlight {
        position: relative;
    }

    .border-highlight::after {
        content: '';
        position: absolute;
        left: -2px;
        top: -10px;
        width: 4px;
        height: 200px;
        background-color: var(--red);
    }

    .border-highlight::before {
        content: '';
        position: absolute;
        left: 0;
        top: -10px;
        width: 1px;
        height: calc(100% + 10px);
        background-color: red;
    }

    .position-bottom {
        margin-bottom: -78px;
        margin-top: 79px !important;
    }

    .parallelogramma {

        width: 600px;
        height: 643px;
    }

    .bg-form-contatti {
        background-size: contain !important;
        background-position: right !important;
        background-repeat: no-repeat !important;
    }

    .bg-mission-vision {
        background-size: contain !important;
        min-height: 500px;
    }

    .container-bigger {
        max-width: 1040px;
    }

    .year-display {
        font-size: 76px;
    }

    .timeline {
        margin-top: 7rem;
    }

    .year-display {
        font-size: 96px;
    }

    .right-timeline-dashed {
        right: -28% !important;
    }
    .height-video {
        height: 400px;
        margin-bottom: -6%;
        margin-top: 4%;
    }
    .height-200 {
        height: 200px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .height-video {
        height: 500px;
        margin-bottom: -6%;
        margin-top: 4%;
    }
    .hero-background {
        width: 900px;
    }
    .right-timeline-dashed {
        right: -24% !important;
    }

    .container-bigger {
        max-width: 1240px;
    }

    .min-h-150 {
        min-height: 150px;
    }

    .bg-size-contain {
        background-size: 87% !important;
    }

    .position-bottom {
        margin-top: 20px !important;
    }

    .parallelogramma {
        width: 700px;
        height: 650px;
    }

    .left-90 {
        left: 97% !important;
    }
}

@media (min-width: 1400px) {
    .right-timeline-dashed {
        right: -20% !important;
    }

    .container-bigger {
        max-width: 1440px;
    }

    .size-custom {
        background-size: 44% auto !important;
        background-position-y: bottom !important;
    }

    .bg-size-contain {
        background-size: 81% !important;
    }

    .mt-6-custom {
        margin-top: 10rem;
    }
}

@media (min-width: 1600px) {
    .hero-background {
        width: 1000px;
    }
    .size-custom {
        background-size: 42% auto !important;
        background-position-y: bottom !important;
    }

    .left-90 {
        left: 100% !important;
    }

    .bg-mission-vision {
        background-size: contain !important;
        min-height: 700px;
    }
}

@media (min-width: 1920px) {
    .site-wrap {
        width: 1920px;
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 1399.98px) {
    .mt-6-custom {
        margin-top: 9rem;
    }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .min-h-150 {
        min-height: 150px;
    }

    .mt-6-custom {
        margin-top: 8rem;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {


    .bg-mission-vision {
        background: none !important;
    }

    .bg-form-contatti {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .mt-6-custom {
        margin-top: 7rem;
    }

    .timeline {
        margin-top: 7rem;
    }

    .year-display {
        font-size: 76px;
    }

    .size-custom {
        background-size: 51% auto !important;
        background-position-y: bottom !important;
    }
    .height-video {
        height: 400px;
        margin-bottom: -6%;
        margin-top: 4%;
    }

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

    .height-200 {
        height: 200px;
    }
    .mt-6-custom {
        margin-top: 6rem;
    }
    .background-none {
        background: none !important;
    }

    .border-md-end {
        border-right: 0;
    }

    .background-grey {
        background: var(--light-grey);
    }

    .left-1 {
        left: -1% !important;
    }

    .position-bottom {
        margin-bottom: 0;
    }

    .position-md-absolute {
        position: relative;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
    }

    .height-video {
        height: 300px;
        margin-top: 0;
    }
     
}


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    
    .btn-solid-red {
        white-space: normal;
    }
    .mt-6-custom {
        margin-top: 4rem;
    }
    .logo-header {
        height: 60px;
    }

    .mt--50 {
        margin-top: 3rem;
    }

    .hero-title {
        font-size: 22px;
    }

    .overlay::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 0;
    }

    .left-1 {
        left: 0 !important;
    }

    .position-sm-absolute {
        position: relative;
    }

    .position-sm-absolute.text-white-hero {
        color: black;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        color: black !important;
    }

    .h-200 {
        min-height: 200px;
    }
}