@import url("reset-c923f9f45a678442fb823fa82a493fdd.css");
@import url("utility-4fb43145879ff222667c2212f831694f.css");

@import url("preloader-416a8c013244ab0c85e60c49eb4fd5b3.css");
@import url("navbar-4d0eabc9e236964af03ab2cb93b8e961.css");
@import url("slider-f2b9ea5f271ede555f1504eff2d1f76d.css");
@import url("lists-dc541063c7c952dfedca16ff93df6a3c.css");
@import url("forms-e91972ec572efafeec6441b9307a2634.css");
@import url("footer-830bbb0812f24af2ea43ff8095c7ba13.css");

:root {
    --clr-primary: #137dc5;
    --clr-primary--300: #2199ea;
    --clr-primary--500: #0968ab;
    --clr-primary--600: #0f5f96;
    --clr-primary--shadow: rgba(7.5, 49, 77.3, 0.5);

    --clr-accent: #fb9c2a;
    --clr-accent--300: #fcb35c;
    --clr-accent--600: #e78209;
    --clr-accent--shadow: rgba(98.4, 61.2, 16.5, 0.5);

    --clr-theme-dark: #1e2a4d;
    --clr-theme-red: #ea5455;

    --clr-light-on-dark: #fff;
    --clr-dark-on-light: #333;
    --clr-medium-dark-on-light: #666;
    --bg-main: #fff;

    --clr-loader: var(--clr-primary);

    --bg-header: var(--clr-primary);
    --bg-nav: var(--clr-primary);
    --bg-nav-item--active: var(--clr-primary);
    --clr-nav-bar--active: var(--clr-accent);
    --bg-nav-mobile: var(--clr-primary--600);

    --brand-filter: none;

    --header-padding-h: 1.125rem;
    --nav-padding-h: 1.3125rem;
    --nav-lh: 1rem;
    --header-h: calc(
        2 * var(--header-padding-h) + 2 * var(--nav-padding-h) + var(--nav-lh)
    );

    --bg-hero: linear-gradient(
        -180deg,
        var(--clr-primary) 0%,
        var(--clr-primary) 20%,
        var(--clr-primary--300) 100%
    );

    --bg-primary-gradient--600--inner: var(--clr-primary--600) 0%,
        var(--clr-primary--600) 20%, var(--clr-primary--500) 100%;

    --bg-primary-gradient--600: linear-gradient(
        -180deg,
        var(--bg-primary-gradient--600--inner)
    );

    --bg-primary-gradient--600--reversed: linear-gradient(
        0deg,
        var(--bg-primary-gradient--600--inner)
    );

    --clr-error: #df1d1d;
    --clr-error-dark: #b11414;
    --bg-error: #ffe1e1;
    --clr-success: #329f25;
    --clr-success-dark: #19930b;
    --bg-success: #edfbeb;

    /* buttons */
    --bg-btn-primary: var(--clr-primary);
    --clr-border-btn-primary: var(--clr-primary);
    --bg-btn-primary--hover: var(--clr-primary--600);
    --clr-border-btn-primary--hover: var(--clr-primary--600);
    --clr-shadow-btn-primary--focus: var(--clr-primary--shadow);

    --bg-btn-accent: var(--clr-accent);
    --clr-border-btn-accent: var(--clr-accent);
    --bg-btn-accent--hover: var(--clr-accent--600);
    --clr-border-btn-accent--hover: var(--clr-accent--600);
    --clr-shadow-btn-accent--focus: var(--clr-accent--shadow);
}


html {
    font-size: 16px;
    scroll-padding-top: var(--header-h);
}


@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    background-color: var(--bg-main);
    font-family: "Roboto", system-ui, Arial, sans-serif;
    color: var(--clr-dark-on-light);
}


.container {
    margin: 0 auto;
    max-width: 1400px;
}

a:focus-visible {
    outline: var(--clr-primary--shadow) auto 1px;
    outline-offset: 1px;
}

.flashes {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .flash {
        border: 2px solid var(--clr-border);
        border-radius: 0.5rem;
        padding: 1rem;
        background: var(--bg);
        color: var(--clr-text);

        &.success {
            --clr-text: var(--clr-success);
            --bg: var(--bg-success);
            --clr-border: var(--clr-success-dark);
        }
        &.error {
            --clr-text: var(--clr-error);
            --bg: var(--bg-error);
            --clr-border: var(--clr-error-dark);
        }
    }
}

.parallax-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.parallax-effect-1 {
    background-color: rgba(255, 255, 255, 0.8);
    background-image: url("../images/coldroom-58b302957f88b478fc8ed87259aaec81.webp");
    background-blend-mode: overlay;
    color: var(--clr-dark-on-light);
}

section {
    --clr-subtitle: var(--clr-medium-dark-on-light);
    padding-inline: 1rem;
    padding-block: 3rem;
    position: relative;
    overflow-x: hidden;
    &.bg-main-600 {
        --clr-subtitle: #ddd;
        background: var(--clr-primary--600);
        color: var(--clr-light-on-dark);
    }
    &.bg-main-300 {
        --clr-subtitle: #ddd;
        background: var(--clr-primary);
        color: var(--clr-light-on-dark);
    }
    &.bg-main-gradient-1 {
        --clr-subtitle: #ddd;
        background: var(--bg-primary-gradient--600);
        color: var(--clr-light-on-dark);
    }
    & .title {
        font-size: 2rem;
        text-align: center;
        margin-block: 2rem 0.5rem;
    }
    & .subtitle {
        text-align: center;
        font-size: 1.3rem;
        text-transform: uppercase;
        margin-bottom: 1rem;
        color: var(--clr-subtitle);
    }
    & + section {
        padding-top: 2rem;
    }
    & .content p {
        & + p {
            margin-top: 0.75rem;
        }
    }
}

section.hero {
    background: var(--bg-hero);
    color: var(--clr-light-on-dark);

    position: relative;
    padding: 2rem 2rem 10rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    text-align: center;

    & .container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: center;
        align-items: center;
        width: auto;
    }
    & img {
        max-height: 70vh;
        margin-inline: auto;
    }

    & .content {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    & .cta {
        margin-top: 1.5rem;
        align-self: center;
        padding-inline: 2rem;
    }

    & h1 {
        font-size: clamp(2rem, 1rem + 4vw, 4.2rem);
        margin-bottom: 1rem;
        line-height: 1;
    }
    & .subtitle {
        font-size: clamp(1.3rem, 0.4rem + 2vw, 2rem);
        color: inherit;
        text-align: inherit;
        text-transform: inherit;
    }
    & .slider {
        z-index: 1;
    }

    & svg {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }

    @media screen and (min-width: 1000px) {
        min-height: calc(100dvh - var(--header-h));
        text-align: left;
        & .container {
            display: grid;
            grid-template-columns: 2fr 3fr;
            gap: 4rem;
            align-items: stretch;
        }
        & .subtitle {
            max-width: 21ch;
            flex: 1;
        }
        & .content {
            padding-top: 4rem;
        }
        & img {
            margin-left: auto;
            margin-right: unset;
        }
    }
}

.with-img-on-left {
    display: grid;
    grid-template-columns: 2fr 4fr;
    gap: 2rem;
    align-items: center;
    & > img {
        padding: 0 clamp(0px, 2vw, 3rem);
    }
    @media screen and (max-width: 999px) {
        display: block;
        & > img {
            position: absolute;
            opacity: 0.15;
            max-width: clamp(0px, 50vw, 100%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 0;
        }
    }
}

.with-img-on-right {
    display: grid;
    grid-template-columns: 4fr 2fr;
    gap: 2rem;
    align-items: center;
    & > img {
        padding: 0 clamp(0px, 2vw, 3rem);
    }
    @media screen and (max-width: 999px) {
        display: block;
        & > img {
            position: absolute;
            opacity: 0.15;
            max-width: clamp(0px, 50vw, 100%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 0;
        }
    }
}

.contact-form {
    @media screen and (min-width: 800px) {
        margin: 0 auto;
        max-width: 800px;
    }
}