/* Wider content sections across the site on desktop (was 1170-1200px).
   Covers the page banner title, #main-content and the footer; the header keeps its own width. */
@media (min-width: 1025px) {
    body #featured-title .surince-container,
    body #main-content .surince-container {
        width: 1400px;
    }
    body #main-content .elementor-section.elementor-section-boxed > .elementor-container,
    body .surince-footer .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1400px;
    }
    body #main-content .e-con,
    body .surince-footer .e-con {
        --container-max-width: 1400px;
    }
    body .clcm-home .wrap {
        width: min(1400px, 100% - 40px);
    }
}

/* Header on laptop screens (1025-1600px): the three equal columns were too narrow for the logo
   plus "Call Experts", so it wrapped under the logo. Logo and icon columns now size to their
   content and the main menu takes the remaining space. */
@media (min-width: 1025px) and (max-width: 1600px) {
    body .surince-header .elementor-element-4bbe52f,
    body .surince-header .elementor-element-de94ea0 {
        width: auto;
        flex: 0 0 auto;
    }
    body .surince-header .elementor-element-ff535c6 {
        width: auto;
        flex: 1 1 auto;
    }
    body .surince-header .elementor-element-4bbe52f > .elementor-widget-wrap {
        flex-wrap: nowrap;
    }
}

/* Smaller laptops: tighten the menu spacing (30px each side by default) so it fits beside the logo and icons */
@media (min-width: 1025px) and (max-width: 1366px) {
    body .elementor-4477 .elementor-element.elementor-element-22023d6.menu-default .surince-menu > ul > li {
        margin: 0 14px;
    }
}
@media (min-width: 1025px) and (max-width: 1199px) {
    body .elementor-4477 .elementor-element.elementor-element-22023d6.menu-default .surince-menu > ul > li {
        margin: 0 8px;
    }
    body .elementor-4477 .elementor-element.elementor-element-22023d6 .surince-menu > ul > li > a {
        font-size: 14px;
    }
}

/* Desktop and laptop show the full menu, so the three-line menu button is only kept for tablet and phone */
@media (min-width: 1025px) {
    body .surince-header .elementor-widget-mae-hamburger,
    body .surince-header-fixed .elementor-widget-mae-hamburger {
        display: none;
    }
}

/* Mobile pop-out menu: highlight the page you are on (only the pop-out list, only on tablet/phone) */
@media (max-width: 1024px) {
    body .menu-panel-wrap ul.menu > li.current-menu-item > a,
    body .menu-panel-wrap ul.menu > li.current-menu-item > a span {
        color: #28B79A;
        font-weight: 700;
    }
    body .menu-panel-wrap ul.menu > li.current-menu-item > a {
        position: relative;
        padding-left: 16px;
    }
    body .menu-panel-wrap ul.menu > li.current-menu-item > a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 4px;
        height: 22px;
        border-radius: 2px;
        background: #28B79A;
        transform: translateY(-50%);
    }
}