/* Mobile-first layout fixes for phones. Desktop styles stay unchanged. */

.page_topline a.topline-link {
    font-size: 20px;
}

@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    #canvas,
    #box_wrapper {
        overflow-x: hidden;
        max-width: 100%;
    }

    img {
        max-width: 100%;
    }

    .home-intro .container .container {
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }

    /* ----- Top contact bar ----- */
    .page_topline {
        padding: 10px 12px !important;
    }

    .page_topline .container-fluid,
    .page_topline [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .page_topline .inline-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 4px;
        margin: 0;
    }

    .page_topline .inline-content > * {
        display: flex;
        align-items: center;
        margin: 0;
        line-height: 1.3;
    }

    .page_topline p.grey {
        margin: 0;
        line-height: 1.3;
    }

    .page_topline a {
        font-size: 13px !important;
        white-space: nowrap;
    }

    .page_topline img {
        width: 18px !important;
        height: auto !important;
        margin-right: 4px !important;
    }

    .topline-sep {
        display: none;
    }

    /* ----- Header / hamburger ----- */
    .page_header.section_padding_15 [class*="container"],
    .page_header .container-fluid {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .page_header a.logo img {
        width: 86px;
    }

    /* ----- Hero slider (same carousel as laptop) ----- */
    .hero-desktop-spacer,
    .toppadding_50.hero-desktop-spacer {
        padding-top: 0 !important;
        display: none !important;
    }

    .hero-desktop-wrap {
        display: block !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #myCarousel {
        margin: 0;
        overflow: hidden;
        background: #0a2154;
    }

    #myCarousel .carousel-inner {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100vw;
        max-height: 430px;
    }

    #myCarousel .item {
        height: 100%;
        min-height: 100%;
    }

    #myCarousel .item.active {
        position: relative;
        display: block;
        height: 100%;
    }

    /* Keep incoming/outgoing slides on top of each other so page content does not jump */
    #myCarousel .item.next,
    #myCarousel .item.prev,
    #myCarousel .item.active.left,
    #myCarousel .item.active.right {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    #myCarousel .item img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
    }

    #myCarousel .banner-slide img.visible-xs {
        object-fit: contain;
        background: #0a2154;
    }

    #myCarousel .overlay {
        padding: 10px 12px;
        background: rgba(0, 0, 0, 0.55);
    }

    #myCarousel .overlay h4 {
        font-size: 14px;
        line-height: 1.35;
        margin: 0;
    }

    #myCarousel .overlay .with_padding,
    #myCarousel .overlay .huge-padding {
        padding: 8px !important;
    }

    #myCarousel .carousel-indicators {
        position: absolute;
        bottom: 8px;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        z-index: 5;
    }

    #myCarousel .carousel-indicators li {
        border: 2px solid #ffffff;
        background: transparent;
    }

    #myCarousel .carousel-indicators .active {
        background: #ffffff;
        border-color: #ffffff;
    }

    /* ----- Floating side icons ----- */
    .sticky-icon-mobile {
        top: auto;
        bottom: 16px;
        right: 8px;
        width: auto;
        transform: none;
        pointer-events: auto;
    }

    .sticky-icon-mobile a {
        transform: none !important;
        margin: 4px 0;
        padding: 0;
        background: transparent !important;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sticky-icon-mobile a span {
        display: none !important;
    }

    .sticky-icon-mobile a i.fa-linkedin,
    .sticky-icon-mobile a img {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        line-height: 36px !important;
        font-size: 18px !important;
    }

    section.ls.section_padding_50.visible-xs {
        padding: 0;
        height: 0;
        overflow: visible;
    }

    /* ----- Homepage copy ----- */
    .home-intro .container {
        padding-left: 18px;
        padding-right: 58px;
    }

    .home-intro .section_header {
        font-size: 26px;
        margin-bottom: 12px;
        margin-top: 8px;
    }

    .home-intro h4 {
        font-size: 16px;
        line-height: 1.35;
        margin-bottom: 12px;
        padding: 0 6px;
    }

    .home-intro p {
        text-align: left;
        font-size: 14px;
        line-height: 1.55;
        padding: 0;
        margin-bottom: 16px;
    }

    .home-intro .teaser.media {
        text-align: left;
        margin-bottom: 8px;
    }

    .home-qr-section .row {
        display: flex;
        align-items: center;
    }

    .home-qr-section img {
        width: 120px !important;
        max-width: 100%;
        height: auto;
    }

    .home-qr-section h3 {
        font-size: 18px;
        line-height: 1.25;
        margin: 0;
    }

    .home-qr-section h3 br {
        display: none;
    }

    /* ----- Footer / iframes ----- */
    .page_footer img {
        width: 160px !important;
    }

    .page_footer iframe,
    .fw-iframe {
        width: 100% !important;
        max-width: 100%;
        height: 240px;
    }

    .page_footer .bootstrap5-iso .col-5 {
        width: 100%;
        padding: 0;
    }

    .widget-news-post {
        overflow: hidden;
    }

    /* ----- Popup ----- */
    #myModal .modal-dialog {
        width: calc(100% - 24px);
        margin: 20px auto;
        min-height: 0;
        display: block;
    }

    #myModal .modal-content {
        border-radius: 12px;
    }

    #myModal img {
        width: 100%;
        height: auto;
        display: block;
    }
}

@media (max-width: 480px) {
    .home-intro .section_header {
        font-size: 22px;
    }
}