/* ============================================
   Refactored Responsive Styles
   ============================================ */

/* --- Extra Large Screens (min-width: 1920px) --- */
@media (min-width: 1920px) {

    .class-chi-siamo,
    .class-specialisti-della-privacy,
    .class-contattaci {
        background-position: right !important;
    }

    .m24-wrapper {
        max-width: 80%;
    }

    .m24-title h2 {
        font-size: 4.4rem;
        line-height: 4.6rem;
    }

    .m24-subtitle h3 {
        font-size: 2.1rem;
        line-height: 2.4rem;
    }

    .m24-navbar ul.m24-menu>li.nav-item:not(:last-child) {
        margin-right: 2rem;
    }

    .m24-navbar ul.m24-menu>li ul.dropdown-menu {
        min-width: 40rem;
        padding: 2rem 3rem;
    }

    .hero h1,
    .subhero h1 {
        font-size: 7.8rem;
        line-height: 7.9rem;
        font-family: 'Averta-Black' !important;
        font-weight: 800;
    }

    .wehelp-business .img-clipbox img {
        clip-path: polygon(100% 0, 100% 100%, 30% 100%, 0 65%, 0 0);
    }

    .m24-loginsoftware {
        right: 2.5rem;
    }

    .our-clients {
        padding-left: 7rem;
    }

    .our-clients .ourclients-slider {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .our-achievement .our-achievement-list h5 {
        font-size: 1.4rem;
    }

    .formazione .formazione-list .card .m24-subtitle h3 {
        font-size: 2.8rem;
    }
}

/* --- High Definition Screens (min-width: 1400px) --- */
@media (min-width: 1400px) {
    .wehelp-business .img-clipbox img {
        clip-path: polygon(100% 0, 100% 100%, 30% 100%, 0 67%, 0 0);
    }
}

/* --- Standard Desktop (min-width: 1200px) --- */
@media (min-width: 1200px) {

    .m24-navbar ul.m24-menu>li>a:hover:before,
    .m24-navbar ul.m24-menu>li>a.active:before,
    .m24-navbar ul.m24-menu>li>a.show:before {
        width: 100%;
    }

    .m24-navbar ul.m24-menu>li.dropdown>a.dropdown-toggle:after {
        border: 0px;
        width: 0px;
        margin: 0px;
    }

    .m24-navbar ul.m24-menu>li ul.dropdown-menu {
        min-width: 38rem;
        padding: 1.5rem 2rem;
        border-radius: 0px;
        margin: 0px;
        transform: translateX(-8%);
    }

    .m24-navbar ul.m24-menu>li ul.dropdown-menu:after {
        position: absolute;
        content: "";
        top: -1px;
        left: 10.5%;
        border-width: 1em 1em 0px;
        border-top-style: solid;
        border-top-color: var(--green);
        border-right-style: solid;
        border-right-color: transparent;
        border-left-style: solid;
        border-left-color: transparent;
        vertical-align: 0.255em;
    }

    .m24-navbar ul.m24-menu>li ul.dropdown-menu .dropdownmenu-seprator {
        display: flex;
        flex-flow: row wrap;
        position: relative;
    }

    .m24-navbar ul.m24-menu>li ul.dropdown-menu .dropdownmenu-seprator:before {
        position: absolute;
        content: "";
        top: 0px;
        left: 50%;
        width: 1px;
        height: 100%;
        background: #dee2e6;
        transform: translateX(-50%);
    }

    .m24-navbar ul.m24-menu>li ul.dropdown-menu li {
        width: 50%;
        display: flex;
    }

    .m24-navbar ul.m24-menu>li ul.dropdown-menu li a {
        background: transparent !important;
        font-size: 1.2rem;
        line-height: 1.4rem;
        padding: 1rem;
    }

    .m24-navbar ul.m24-menu>li ul.dropdown-menu li a img {
        width: 56px;
        height: 56px;
    }
}

/* --- Specific Desktop Range (min-width: 1200px and max-width: 1365px) --- */
@media (min-width: 1200px) and (max-width: 1365px) {
    .m24-navbar .navbar-brand {
        width: 260px;
    }

    .m24-navbar .navbar-brand img {
        width: 100%;
    }

    .m24-navbar ul.m24-menu>li>a {
        padding-top: 68px;
    }
}

/* --- Large Tablets / Small Desktop (min-width: 1025px) --- */
@media (min-width: 1025px) {
    .m24-subhero:before {
        position: absolute;
        content: "";
        top: 0px;
        left: 0px;
        width: 75%;
        height: 100%;
        background: linear-gradient(90deg, rgba(40, 38, 93, 1) 0%, rgba(40, 38, 93, 1) 60%, rgba(40, 38, 93, 0) 100%);
        opacity: 0.76;
    }
}

/* --- Laptops (max-width: 1500px) --- */
@media (max-width: 1500px) {
    .m24-expertteam {
        background-position: right center !important;
    }
}

/* --- Medium Desktop (max-width: 1199px) --- */
@media (max-width: 1199px) {
    .total-background {
        background-position: center right !important;
    }

    .class-specialisti-della-privacy {
        background-position: right 0 !important;
    }

    .class-videosorveglianza-e-privacy-il-nostro-supporto,
    .class-chi-siamo,
    .class-contattaci {
        background-position: 70% !important;
    }


    .class-intelligenza-artificiale-usala-senza-rischi {
        background-position: 20% 0 !important;
    }



    .blu-text-shadow {
        text-shadow: 0 0 20px #fff;
    }

    .total-header-title {
        position: absolute;
        bottom: 20%;
    }

    .m24-navbar .navbar-brand {
        width: 240px;
    }

    .m24-navbar .navbar-brand img {
        width: 100%;
    }

    .m24-navbar .m24-hamburger span {
        display: block;
        background: var(--prime);
        width: 35px;
        height: 4px;
        border-radius: 0.25rem;
    }

    .navbar-collapse {
        position: fixed;
        top: 0px;
        left: -100%;
        width: 80%;
        height: 100vh !important;
        padding: 1.2rem;
        background: rgb(255, 255, 255);
        overflow-y: auto;
        z-index: 999;
        transition: left .3s ease-in-out;
    }

    .navbar-collapse.show {
        left: 0px;
    }

    .m24-navbar ul.m24-menu {
        padding-top: 1.5rem;
    }

    .m24-navbar ul.m24-menu .menu-close {
        position: absolute;
        top: 0px;
        right: 0;
        font-size: 1.8rem;
        color: var(--prime);
        display: flex !important;
    }

    .m24-navbar ul.m24-menu>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .m24-loginsoftware {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        margin-bottom: 10px;
        margin-top: 10px !important;
    }

    .m24-loginsoftware a.login-software {
        margin-top: 0px;
    }

    .m24-navbar .telbox {
        margin-bottom: 0px;
    }

    .screen-overlay {
        width: 0%;
        height: 100%;
        z-index: 30;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        background-color: rgba(34, 34, 34, 0.6);
        transition: opacity .2s linear, visibility .1s, width 1s ease-in;
    }

    .screen-overlay.show {
        transition: opacity .5s ease, width 0s;
        opacity: 1;
        width: 100%;
        visibility: visible;
    }

    .m24-navbar ul.m24-menu li {
        margin-right: 0px !important;
    }

    .m24-navbar ul.m24-menu li a {
        border-bottom: 1px solid var(--prime) !important;
    }

    .m24-navbar ul.m24-menu>li.dropdown>a.dropdown-toggle:after {
        position: absolute;
        content: "\eab2";
        right: 0px;
        border: 0px !important;
        color: var(--prime);
        font-size: 2rem;
        font-family: IcoFont !important;
        line-height: 1.85rem;
        transition: all .3s ease-in-out;
    }

    .m24-navbar ul.m24-menu>li.dropdown>a.show.dropdown-toggle:after {
        color: var(--green);
        transform: rotate(180deg);
    }

    .m24-navbar ul.m24-menu>li.dropdown .dropdown-menu {
        border: 0px !important;
        margin: 0px;
        padding: 0px 0px 0px 1.5rem;
        border-bottom: 1px solid var(--prime) !important;
        border-radius: 0px !important;
    }

    .m24-navbar ul.m24-menu>li.dropdown .dropdown-menu li a.dropdown-item {
        padding: 10px 0px;
    }

    .m24-navbar ul.m24-menu>li.dropdown .dropdown-menu li:last-child a.dropdown-item,
    .m24-navbar ul.m24-menu>li.dropdown .dropdown-menu li:last-child {
        border-bottom: 0px !important;
    }

    .m24-navbar ul.m24-menu>li.dropdown .dropdown-menu li a.dropdown-item .align-items-end {
        align-items: center !important;
    }

    .m24-navbar ul.m24-menu>li.dropdown .dropdown-menu .menuitem-title {
        display: flex;
    }

    .m24-navbar ul.m24-menu>li.dropdown .dropdown-menu .menuitem-title img {
        height: 40px;
        margin: 0px 1rem 0px 0px !important;
    }

    .m24-navbar ul.m24-menu>li.dropdown .dropdown-menu .menuitem-title p {
        margin-bottom: 0px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: normal;
    }

    .m24-navbar ul.m24-menu>li.dropdown .dropdown-menu .menuitem-link i {
        font-size: 1.8rem !important;
    }
}

/* --- Tablets / Small Screens (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .m24-subhero::before {
        position: absolute;
        content: "";
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 50%;
        background: linear-gradient(0deg, rgba(40, 38, 93, 1) 0%, rgba(40, 38, 93, 1) 60%, rgba(40, 38, 93, 0) 100%);
        opacity: 0.76;
    }

    .hero h1,
    .subhero h1 {
        font-size: 4.5rem;
        line-height: 4.5rem;
    }

    .m24-title h2 {
        font-size: 2.2rem;
        line-height: normal;
    }

    .m24-subtitle h3 {
        font-size: 1.4rem;
        line-height: normal;
    }

    .m24-subtitle-lg h4 {
        font-size: 2.2rem;
        line-height: normal;
    }

    .m24-section {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .m24-btn {
        font-size: 1.3rem;
    }

    .m24-triangle-bottomleft:after,
    .m24-triangle-bottomright:after,
    .m24-triangle-topright:after,
    .m24-wehelpyou:after {
        height: 35px;
    }

    .m24-triangle-topleft-cliping {
        clip-path: polygon(0 2%, 100% 0, 100% 100%, 0% 100%);
    }

    .m24-triangle-topright-cliping {
        clip-path: polygon(0 0, 100% 0, 100% 98%, 0% 100%);
    }

    .m24-triangle-bottomleft-cliping {
        clip-path: polygon(0 0, 100% 2%, 100% 100%, 0% 100%);
    }

    .m24-triangle-topbottomleftright-cliping {
        clip-path: polygon(0 0, 100% 2%, 100% 98%, 0% 100%);
    }

    .m24-faq .faq button.accordion-button {
        font-size: 1.5rem;
        line-height: normal;
        min-height: auto;
    }

    .wehelp-business .img-clipbox {
        padding: 1rem;
    }

    .wehelp-business .img-clipbox img {
        border-top-left-radius: 32px;
        clip-path: polygon(100% 0, 100% 100%, 20% 100%, 0 80%, 0 0);
    }

    .wehelp-business .img-clipbox:before,
    .img-squareshape:before {
        width: 100px;
        height: 100px;
    }

    .wehelp-business .img-clipbox:after {
        width: 100px;
        height: 100px;
        border-bottom: 100px solid var(--green);
        border-right: 100px solid transparent;
    }

    .m24-expertteam {
        background-position: right center;
    }

    .software-design .m24-title object {
        height: 60px;
    }

    .m24-wehelpbusiness {
        padding-top: 1.5rem !important;
    }

    .m24-footer .footer-news .ultimenews-list h5 {
        font-size: 1rem;
        line-height: 1.2rem;
    }

    .img-squareshape {
        padding-top: 1rem;
        padding-right: 1rem;
    }
}

/* --- Mobile Menu & Timeline Breakdown (max-width: 991.98px) --- */
@media (max-width: 991.98px) {
    .class-chi-siamo {
        background-position: 70% 0 !important;
    }

    .class-contattaci {
        background-position: 80% 0 !important;
    }

    .class-formazione {
        background-position: center !important;
    }

    .class-antiriciclaggio {
        background-position: right !important;
    }

    .m24-btn {
        font-size: 1.2rem;
    }

    .m24-slider .swiper-btn,
    .m24-linkbtn,
    .m24-sm-linkbtn {
        width: 45px;
        height: 45px;
    }

    .our-clients .ourclients-slider {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .wehelp-business .img-clipbox img {
        clip-path: polygon(100% 0, 100% 100%, 12% 100%, 0 83%, 0 0);
    }

    .timeline::before {
        left: 20px;
    }

    .timeline-dot {
        left: 20px;
        top: 0;
        transform: translate(-50%, 0);
        margin-top: 16px;
    }

    .timeline-step {
        flex-direction: column !important;
        min-height: 0;
    }

    .text-section,
    .photo-section {
        width: 100%;
        padding: 1rem 0;
    }

    .photo-main,
    .photo-overlap,
    .photo-overlap-third {
        width: 95% !important;
        max-width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        position: relative !important;
        margin-bottom: 1rem;
        transform: none !important;
    }

    .photo-overlap,
    .photo-overlap-third {
        display: none;
    }

    .photo-section {
        min-height: 0;
    }

    .text-section {
        order: 1 !important;
    }

    .photo-section {
        order: 2 !important;
    }
}

/* --- Utilities (min-width: 992px) --- */
@media (min-width: 992px) {
    .w-md-80 {
        width: 80% !important;
    }

    .w-md-40 {
        width: 40% !important;
    }
}

/* --- Large Mobile / Small Tablet (768px - 992px) --- */
@media (min-width: 768px) and (max-width: 992px) {

    .hero h1,
    .subhero h1 {
        font-size: 4.2rem;
        line-height: 4.2rem;
    }

    .m24-title h2 {
        font-size: 2.2rem;
    }

    .m24-subtitle h3 {
        font-size: 1.4rem;
    }

    .m24-subtitle-lg h4 {
        font-size: 2.2rem;
    }

    .m24-section {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .contattaci .contattaci-left .contattaci-linfo {
        padding: 1rem 2rem !important;
    }

    .contattaci .contattaci-left .contattaci-linfo:first-child:before {
        top: 50%;
        left: auto;
        right: 0px;
        bottom: auto;
        width: 1px;
        height: 70%;
        transform: translate(0%, -50%);
    }
}

/* --- Specific Tablet Breakdown (768px - 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .youhave-question .card object {
        width: 55px;
    }

    .youhave-question .card h3 {
        font-size: 1.4rem;
    }

    .m24-totalservice-pillstabs .nav-pills {
        padding-right: 2rem;
    }

    .m24-totalservice-pillstabs .nav-pills button {
        font-size: 1.3rem;
    }

    .our-achievement .our-achievement-list object {
        width: 45px;
    }

    .our-achievement .our-achievement-list h3 {
        font-size: 2rem;
    }

    .our-achievement .our-achievement-list h5 {
        font-size: 1rem;
    }

    .formazione .formazione-list .card figure object {
        width: 65px;
    }

    .formazione .formazione-list .card .m24-subtitle h3 {
        font-size: 2rem;
    }

    .totalnews-filterresult .totalnews-box .card {
        min-height: 580px;
    }
}

/* --- Mobile Landscape (max-width: 767px) --- */
@media (max-width: 767px) {
    body {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    .hero h1,
    .subhero h1 {
        font-size: 4rem;
        line-height: 4rem;
    }

    .m24-title h2 {
        font-size: 2.5rem;
    }

    .m24-subtitle h3 {
        font-size: 1.6rem;
    }

    .m24-subtitle-lg h4 {
        font-size: 2rem;
        line-height: 2.4rem;
    }

    .m24-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .m24-triangle-topleft-cliping {
        clip-path: polygon(0 1%, 100% 0, 100% 100%, 0% 100%);
    }

    .m24-triangle-topright-cliping {
        clip-path: polygon(0 0, 100% 0, 100% 99%, 0% 100%);
    }

    .m24-triangle-bottomleft-cliping {
        clip-path: polygon(0 0, 100% 1%, 100% 100%, 0% 100%);
    }

    .m24-triangle-topbottomleftright-cliping {
        clip-path: polygon(0 0, 100% 1%, 100% 99%, 0% 100%);
    }

    .m24-btn {
        font-size: 1.1rem;
    }

    .youhave-question .card object {
        width: 50px;
    }

    .youhave-question .card h3 {
        font-size: 1.2rem;
    }

    .m24-navbar .navbar-brand {
        width: 180px;
    }

    #m24_ourSkills {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .m24-expertteam {
        clip-path: polygon(100% 0, 100% 95%, 0 100%, 0 5%);
    }

    .m24-securesolutions {
        padding-bottom: 8rem;
    }

    .wehelp-business .img-clipbox img {
        clip-path: polygon(100% 0, 100% 100%, 15% 100%, 0 78%, 0 0);
    }

    .m24-faq .faq button.accordion-button {
        font-size: 1.4rem;
        min-height: auto;
    }

    .m24-faq .faq ol.program-orderlist>li span {
        font-size: 1.3rem;
        top: 0;
    }

    .m24-faq .faq ol.program-orderlist>li span i {
        font-size: 0.25rem;
    }

    .m24-faq .faq ol.program-orderlist>li h4,
    ul.custom-check-liststyle li h4 {
        font-size: 1.1rem;
    }

    .m24-totalservice-pillstabs .nav-pills,
    .total-news .totalnews-filterbtn {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        flex: 0 0 100%;
        padding-right: 0px;
        margin-right: 0px;
    }

    .m24-totalservice-pillstabs .nav-pills button {
        margin-right: 1rem;
        font-size: 1.4rem;
        text-align: center;
        padding: 0.5rem 0rem;
    }

    .m24-totalservice-pillstabs .nav-pills:after {
        display: none;
    }

    .our-achievement .our-achievement-list object {
        width: 32px;
    }

    .our-achievement .our-achievement-list h3 {
        font-size: 2rem;
    }

    .our-achievement .our-achievement-list h5 {
        font-size: 0.85rem;
    }

    .privacy .privacy-points {
        padding: 1rem;
    }

    .privacy .privacy-points .privacy-point object {
        width: 32px;
    }

    .privacy .privacy-points .privacy-point h4 {
        font-size: 1rem;
    }

    .formazione .formazione-list .card figure object {
        width: 65px;
    }

    .formazione .formazione-list .card .m24-subtitle h3 {
        font-size: 1.6rem;
    }

    .m24-coursevideo .m24-playbtn {
        width: 50px;
        height: 50px;
    }

    .guarantee-privacy .m24-quotes .quote-mark svg {
        width: 20px;
    }

    .article-page.class-iscrizione-eventi-di-formazione .subhero h1 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
}

/* --- Small Mobile Landscape (576px - 767px) --- */
@media (min-width: 576px) and (max-width: 767px) {

    .class-whistleblowing,
    {
    background-position: 75% 0 !important;
}

.class-intelligenza-artificiale-usala-senza-rischi {
    background-position: 40% 0 !important;
}

/* homepage hero image adjustment for mobile */
.m24-hero.total-background {
    background-position: 67% 0 !important;
}

.m24-hero,
.m24-subhero {
    padding-top: 6rem;
}

.contattaci .contattaci-left .contattaci-linfo {
    padding: 1rem 2rem !important;
}

.contattaci .contattaci-left .contattaci-linfo:first-child:before {
    top: 50%;
    left: auto;
    right: 0px;
    bottom: auto;
    width: 1px;
    height: 70%;
    transform: translate(0%, -50%);
}
}

/* --- Large Phones Portrait (max-width: 575px) --- */
@media (max-width: 575px) {
    .total-background {
        background-position: 85% 0 !important;
    }

    /* homepage hero image adjustment for mobile */
    .m24-hero.total-background {
        background-position: 67% 0 !important;
        min-height: 314px !important;
    }

    .class-videosorveglianza-e-privacy-il-nostro-supporto,
    .class-intelligenza-artificiale-usala-senza-rischi {
        background-position: 20% 0 !important;
    }

    .m24-subhero.total-background.class-specialisti-della-privacy {
        background-position: right 0 !important;
    }

    .class-contattaci {
        background-position: 80% 0 !important;
    }

    .m24-subhero.total-background {
        background-position: 67% 0 !important;
        min-height: 314px !important;
    }



    .m24-faq .faq button.accordion-button {
        font-size: 1.2rem;
    }

    .m24-footer .footer-news .ultimenews-list h5 {
        font-size: 1rem;
    }

    .m24-footer .footer-service ul li a i {
        margin-right: 1rem;
    }

    .our-achievement .ourachievement-box:not(:last-child) .our-achievement-list {
        height: auto !important;
        margin-bottom: 1.5rem;
        border-right: 0px;
        border-bottom: 1px solid rgba(255, 255, 255, 27%);
    }

    .privacy .privacy-points:not(:last-child) {
        border-right: 0px !important;
        border-bottom: 1px solid #dee2e6 !important;
    }
}

/* --- Standard Phones Portrait (max-width: 480px) --- */
@media (max-width: 480px) {

    .hero h1,
    .subhero h1 {
        font-size: 3rem;
        line-height: 3rem;
    }

    .m24-title {
        margin-bottom: 1.5rem;
    }

    .m24-title h2,
    .m24-subtitle-lg h4 {
        font-size: 1.5rem;
    }

    .m24-subtitle h3 {
        font-size: 1.3rem;
    }

    .m24-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .navbar-collapse {
        width: 95%;
    }

    .m24-navbar ul.m24-menu>li.dropdown .dropdown-menu {
        padding-left: 1rem;
    }

    .m24-hero,
    .m24-subhero {
        padding-top: 5rem;

    }

    .m24-securesolutions {
        padding-bottom: 5rem;
    }

    .wehelp-business .img-clipbox img {
        clip-path: polygon(100% 0, 100% 100%, 20% 100%, 0 70%, 0 0);
    }

    .wehelp-business .img-clipbox:before,
    .wehelp-business .img-clipbox:after {
        width: 80px;
        height: 80px;
    }

    .wehelp-business .img-clipbox:after {
        border-bottom: 80px solid var(--green);
        border-right: 80px solid transparent;
    }

    .software-design .m24-title object {
        height: 40px;
    }

    .m24-footer {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .m24-chat {
        height: 95px;
    }

    .m24-chat .m24-chatimg {
        width: 95px;
        height: 95px;
    }

    .m24-chat .m24-chattext {
        padding: 0.5rem !important;
    }

    .m24-chat .m24-chattext h5 {
        font-size: 0.9rem;
    }

    .m24-chat .m24-chattext .m24-btn {
        font-size: 0.85rem;
        padding: 0.3rem 0.5rem;
    }


}

/* --- Smallest Phones Portrait (max-width: 320px) --- */
@media (max-width: 320px) {

    .hero h1,
    .subhero h1 {
        font-size: 2.8rem;
        line-height: 2.8rem;
    }

    .wehelp-business .img-clipbox img {
        clip-path: polygon(100% 0, 100% 100%, 25% 100%, 0 62%, 0 0);
    }
}