@import url("reset-ySP59Fp.css");
@import url("utility-8l1QKnH.css");

@import url("preloader-a2Z22qr.css");
@import url("navbar-VFXuayh.css");
@import url("slider-8rnqXyc.css");
@import url("lists-qP52UJX.css");
@import url("forms-cLh-KO0.css");
@import url("footer-sy7qBgj.css");
@import url("article-s-EDvY0.css");

:root {
    --clr-white: #FFF;
    --clr-gray: #aaa;
    --clr-primary: #34adff;
    --clr-primary--300: #6fc5ff;
    --clr-primary--500: #4bb3fd;
    --clr-primary--600: #2d95dd;
    --clr-primary--shadow: rgba(7.5, 49, 77.3, 0.3);

    --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%,
        #FFFFFFFF 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);
    display: flex;
    flex-direction: column;
}


main {
    display: flex;
    flex-direction: column;
    flex: 1;
}


.container {
    margin: 0 auto;
    max-width: 1400px;
    width: min(100vw, 1400px);
}

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

a:not([class]), a.link {
    color: var(--clr-primary--600);
    text-decoration: dotted;
    font-weight: bold;
}

a:not([class]):hover, a.link:hover {
    color: var(--clr-primary--500);
}

.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-WLMClX-.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);
    }
    &.bg-light {
        --clr-subtitle: #666;
        background: rgb(239 239 239 / 0.7);
        color: var(--clr-dark-on-light);
    }
    &.rounded-right {
        border-top-right-radius: 18%;
    }
    &.rounded-left {
        border-top-left-radius: 18%;
    }
    & .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;
        border-radius: 1rem;
        box-shadow: 0px 0px 15px 0px rgb(255 255 255 / 0.4), 2px 2px 25px 0px rgb(255 255 255 / 0.3);
    }

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

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

    & .hero-title {
        font-size: clamp(2rem, 1rem + 4vw, 4.2rem);
        margin-bottom: 1rem;
        line-height: 1;
        font-weight: bold;
    }
    & .hero-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 !important;
            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;
    }
}

.rotating-logo {
    & .fan-wrapper {
        rotate: 0deg;
        transition: rotate 1.5s ease-out;
        transform-origin: center center;
    }
    &:hover .fan-wrapper {
        rotate: 360deg;
    }
    & .fan {
        animation: fan 1s infinite linear;
        animation-play-state: running;
        transform-origin: center center;
    }
    &:hover .fan {
        animation-play-state: paused;
    }
}

@keyframes fan {
    to {
        transform: rotate(360deg);
    }
}


.wstep-logo {
    max-width: 300px;
    margin-inline: auto;
}

.contact-page {
    & .title, 
    & .subtitle {
        text-align: center;
    }
    & .info {
        display: flex;
        flex-wrap: wrap;
        gap: 3rem;
        padding: 2rem 3rem;
        border-radius: 1rem;
        background: #f5f5f5;
        width: 100%;

        @media screen and (min-width: 800px) {
            flex-direction: column;
            align-items: flex-start;
            width: auto;
            max-width: 300px;
        }
    }
    & .contact-logo {
        width: 50px;
    }
    & address {
        font-style: normal;
    }

    & .contact-form {
        min-width: min(100vw, 300px);
    }
}

 .social-link {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}