/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
    @media (max-width: 1399.98px) {
    }
    /* `xl` applies to large devices (desktops, less than 1200px) */
    @media (max-width: 1199.98px) {

    }
    @media(min-width: 1024.98px) and (max-width: 1199.98px) {

    }
    /* `lg` applies to medium devices (tablets, less than 992px) */
    @media (max-width: 1024.98px) {
        .servizi {
            /* max-height: 80vh; */
        }
        .servizi .titolo p {
          font-size: 1rem;
          margin-top: 0.5rem;
          margin-bottom: 0.5rem;
          text-align: center;
          color: #00bcf5;
          transition: 1s ease;
        }
        .servizi .servizio-contnet:hover .titolo {
            top: 30%;
            border-top: 1px solid #00bcf5;
            border-bottom: 1px solid #00bcf5;
        }
        .servizi .servizio-contnet:hover .servizio-description {
          transform: translateY(0);
          top: 40%;
        }
        .servizi .servizio-contnet:hover {
            width: 40% !important;
        }
        .servizi .servizio-contnet:hover .servizio-description p {
            font-size: 0.8rem;
        }
        .servizi .servizio-contnet:before {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) -20%, black 60%);
        }
    }

    /* `md` applies to small devices (landscape phones, less than 768px) */
    @media (max-width: 768.98px) {
        .servizi .servizi-body {
            max-height: 50%;
        }
        .servizi .servizi-body a{
            width: 20%;
        }
        .servizi .servizio-contnet {
          height: 50vh;
          min-height: 50vh;
          width: 100%;
        }
        .servizi .titolo {
            transform: translateX(-50%) translateY(-50%) rotate(-90deg);
            width: max-content;
        }
        .servizi .servizio-contnet:hover .servizio-description {
            display: none;
        }
        .servizi .servizio-contnet:hover .titolo {
            top: 50%;
            transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(1.5);
            border-top: 1px solid #00bcf5;
            border-bottom: 1px solid #00bcf5;
        }
        .servizi .servizio-contnet:hover:before {
            opacity: 0.6;
        }
        .servizi .servizi-body-mobile {
            display: block;
        }
        .servizi .mobile-show {
            display: block;
        }

    }
    /* `sm` applies to x-small devices (portrait phones, less than 576px) */
    @media (max-width: 575.98px) {
        .servizi {
            min-height: auto;
        }
        .servizi .titolo p {
            font-family: 'Catamaran', sans-serif;
            text-transform: uppercase;
        }
        .servizi .servizi-body-mobile .description-content {
            padding: 2rem 1rem 1rem;
            width: 95%;
            text-align: center;
            box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
                        rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
                        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            background-color: rgba(129, 128, 131, 0.3);
        }
        .servizi .servizio-contnet .titolo {
            border-top:none;
            border-bottom:none;
        }

        .servizi .servizio-contnet:hover .titolo {
            border-top:none;
            border-bottom:none;
        }
        .servizi .servizi-body-mobile {
            display: block;
            height: 20vh;
        }
        .servizi .servizio-contnet {
            height: 40vh;
            min-height: 40vh;
        }
        .servizi .servizio-contnet:hover .titolo {
            transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(1.2);
        }
        .servizi .mobile-show {
            display: block;
        }

    }