/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    section.intro video.foreground {
        display: none !important;
    }
    section.intro video.background {
        display: block !important;
    }
    
    .hero-content .hero {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .card .card-body, .card .card-footer {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    section.intro .box {
        margin-top: 50px;
    }
    
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    html {
        font-size: 90%;
    }
    
    div[data-page="index"] section.intro > div, div[data-page="index"] section.service > div {
        min-height: 100vh;
    }
    section.intro > div, section.service > div {
        min-height: calc(100vh - var(--value-header-height));
    }
    
    section.intro .box {
        margin-top: 0;
    }
    
    .container:not(.intro) > .row {
        margin-top: 150px;
        margin-bottom: 150px;
    }

    footer .container:not(.intro) > .row {
        margin-top: 100px;
        margin-bottom: 100px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    section.intro h1, section.intro h2 {
        color: var(--color-white);
        text-shadow: 0 0 20px rgba(0,0,0,0.5);
    }
    
    section.intro h1 {
        font-size: 8vw;
        line-height: .9;
        text-transform: uppercase;
    }

    section.intro h2 {
        font-size: 3.5vw;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .widget .features i {
        font-size: inherit;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    html {
        font-size: 100%;
    }
    
    a:not(.button).active::after {
        width: 35px;
        transition: width .75s;
    }
    
    .container {
        max-width: 1680px;
    }

    header {
        margin-top: 50px;
        margin-bottom: 50px;
        backdrop-filter: blur(25px) saturate(3);
        -webkit-backdrop-filter: blur(25px) saturate(3);
    }
    
    header nav li a, header nav li button {
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .hero-content .hero {
        padding: 0;
    }
    
    .language-switcher button img {
        width: 52px /*32px*/;
        height: 39px /*24px*/;
    }
    
    .hero-content.hero-first .content {
        text-align: right;
        order: 1;
    }
    .hero-content.hero-first .content div {
        justify-content: flex-end;
    }    
    .hero-content.hero-first .content img {
        margin-left: auto;
    }

    section.intro > div, section.service > div {
        min-height: calc(100vh - 226px);
    }
    
    section.intro h1 {
        font-size: 9.5rem;
    }
    section.intro h2 {
        font-size: 4.25rem;
    }
}