/*  Screen size 1140px */
@media (max-width: 1140px) {

    .service-content .service-col,
    .blog-row .blog-col,
    .recent-row .recent-item {
        flex-basis: 46%;
        max-width: calc((100% - 2.4rem) / 2);
    }

    .contact-info-box {
        padding-left: 4rem;
    }

    .form-box {
        margin: 0 2rem;
    }
}

/*  Screen size 991px */
@media (max-width: 991px) {

    .section-spacing {
        padding: 15rem 0 8rem 0;
    }

    /* Navbar start */
    .navbar-toggler {
        margin-right: 1.5rem;
    }

    /* Once the nav collapses, the brand shares the pill with the toggle button.
       The desktop 5rem indent plus the 24rem cap could not fit a 320px pill and
       pushed the whole page into horizontal scroll; min-width:0 is what actually
       lets a flex item shrink below its content. It must shrink without growing
       — and the basis has to be 0, not auto. A wrapping flex container breaks
       lines on each item's max-content size, so with `flex: 1 1 auto` the brand's
       full 262px measured against the row first and pushed the toggle button onto
       a second line before any shrinking happened. At basis 0 nothing wraps and
       flex-grow hands the brand whatever the button leaves; a long name then
       wraps to two lines inside the pill rather than being cut off. */
    .header-main-block .navbar-brand {
        margin-left: 2rem;
        padding-right: 1.5rem;
        min-width: 0;
        flex: 1 1 0;
    }

    .header-main-block .navbar-brand .brand-text {
        max-width: 100%;
        font-size: 2rem;
    }

    .header-main-block .navbar .nav-link {
        padding: 1.5rem 0;
    }

    .header-main-block .navbar .nav-link::after {
        display: none;
    }

    .nav-link.active-nav::after,
    .nav-link.active-nav:hover::after {
        display: none;
    }

    .header-main-block.header-compact {
        padding-top: 1rem;
    }

    /* Hero area */
    .full-width-block {
        background-size: cover;
        background-position: -26rem 8rem;
    }

    .full-width-block.section-spacing {
        padding: 18rem 0 10rem 0;
    }

    .banner-content .hero-big-title {
        font-size: 5.6rem;
    }

    .banner-text {
        font-size: 2.2rem;
    }

    .banner-right-content {
        padding-left: 0;
    }

    /* About section */
    .about-content {
        padding-left: 0;
        padding-top: 4rem;
    }

    /* role slider */
    .role-title .title {
        font-size: 2rem;
    }

    /* article pages */
    .article-title {
        font-size: 3.6rem;
    }

    /* contact */
    .contact-info-box {
        padding-left: 0;
        padding-bottom: 5rem;
    }

    .contact-info-box .arrow-line {
        position: absolute;
        bottom: 0rem;
        right: 2rem;
        transform: scaleX(-1) rotate(117deg);
    }

    .form-box {
        margin: 0;
    }
}

/*  Screen size 767px */
@media (max-width: 767px) {

    /* main btn */
    .main-btn,
    .main-btn-outlined {
        padding: 1.5rem 3.5rem;
    }

    /* section title */
    .section-title {
        font-size: 4.5rem;
    }

    /* hero area */
    .full-width-block .container .row {
        background-position: right;
        display: flex;
        flex-direction: column-reverse;
    }

    .full-width-block {
        background-position-x: -141rem;
        background-position-y: 5rem;
    }

    .full-width-block .banner-right-content {
        padding: 0 0 5rem 0;
    }

    .full-width-block .banner-content {
        padding: 0 3rem;
    }

    .banner-text {
        margin-bottom: 3rem;
    }

    .hero-big-title {
        font-size: 4rem;
    }

    .full-width-block .banner-content .banner-text {
        font-size: 2rem;
    }

    /* single-column cards */
    .service-content .service-col,
    .blog-row .blog-col,
    .recent-row .recent-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* wave band */
    .cta-section .cta-full-block {
        padding: 10rem 0 8rem 0;
    }

    .cta-section .cta-content h3 {
        font-size: 2.8rem;
    }

    /* marquee slider  */
    .role-title .title {
        font-size: 1.8rem;
    }

    .slide-role .star-icon img {
        width: 2rem;
    }

    /* statement + article pages */
    .statement-box {
        padding: 4rem 2.5rem;
    }

    .statement-box h3 {
        font-size: 2.4rem;
    }

    .article-title {
        font-size: 3rem;
    }

    .article-toc {
        padding: 2.5rem 2rem;
    }

    .article-body h2 {
        font-size: 2.6rem;
    }

    .news-block {
        padding: 3rem 2rem;
    }

    /* contact area */
    .contact-info-box {
        padding-left: 0;
        display: flex;
        flex-direction: column;
    }

    /* Purely ornamental, and at this width it was rotated into a cramped corner
       where its rotated bounding box (154px for a 100px element) reached past the
       viewport and made the whole page scrollable sideways. */
    .contact-info-box .arrow-line {
        display: none;
    }

    .form-box {
        margin: 0;
        padding: 2rem;
    }
}

/*  Screen size 480px */
@media (max-width: 480px) {

    /* common */
    .section-spacing {
        padding: 10rem 0 8rem 0;
    }

    .section-title {
        font-size: 3.5rem;
    }

    /* hero section */
    .full-width-block .banner-content .banner-text {
        font-size: 1.8rem;
    }

    /* role marquee slider */
    .role-title .title {
        font-size: 1.6rem;
    }

    /* service */
    .service-content {
        padding: 1rem;
    }

    /* contact */
    .contact-info-box {
        padding: 2rem 0;
    }

    .contact-info-box .contact-figure {
        max-width: 100%;
    }

    /* article pages */
    .article-title {
        font-size: 2.6rem;
    }

    .article-cover img {
        border-radius: 1.6rem;
    }

    /* footer */
    .footer-section.section-spacing {
        padding-top: 5rem;
    }

    .footer-links,
    .footer-policies,
    .footer-contact {
        gap: 1rem 2rem;
    }
}