/* Robot Hero CSS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#hero {
        position: relative;
        display: grid;
        width: 100%;
        background-color: #fff;
        background-image: url('../img/hero-bg-1.jpg');
        background-size: cover;
        background-position: center center;
}

.text-mask {
        background-image: url('../img/hero-bg-1.jpg');
        background-attachment: fixed;
        background-size: cover;
        background-position: top;
}

.hero-bg {
        background-image: url('../img/hero-bg-1.jpg');
        background-size: cover;
        background-position: center center;
        height: 600px;
}

.hero-feature {
        display: grid;
        width: 500px;
        max-width: 75vw;
        justify-content: center;
        justify-self: center;
        margin-top: 150px;
        position: absolute;
        z-index: 10;
}

@media(min-width: 768px) {
        .hero-feature {
                margin-top: 250px;
        }
}

.hero-feature-sub-variant {
        margin-top: 150px;
}

.hero-feature h1 {
        color: #fff;
        font-weight: 600;
        font-size: 36px;
        justify-self: center;
        text-align: center;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-shadow: #222222ab 1px 0 30px;
}

.hero-feature p {
        font-weight: 400;
        color: #fff;
        text-align: center;
        justify-self: center;
        letter-spacing: 2px;
        text-shadow: #222222ab 1px 0 30px;
        font-family: "Righteous";
}

.hero-feature .button {
        background-color: var(--colour1);
        justify-self: center;
        padding: 4px 16px;
        color: #fff;
        grid-row: 1;
        border-radius: 8px;
        box-shadow: 0 2px 4px 2px #0000004f;
}

.hero-feature .button h3 {
        color: #fff;
        font-variant: all-small-caps;
        font-weight: 500;
        letter-spacing: 1px;
        font-size: 14px;
}

@media(min-width: 768px) {
        .hero-feature .button h3 {
                font-size: 18px;
        }
}

.abtn {
        background-color: color-mix(in lab, var(--colour1), #fff 60%);
        padding: 4px 16px;
        color: #fff;
        filter: saturate(15);
        border-radius: 8px;
        box-shadow: 0 2px 4px 2px #0000004f;
        transition: all ease .2s;
}

.abtn:hover {
        cursor: pointer;
        transform: scale(0.95);
}

.abtn h3 {
        color: #fff;
        font-variant: all-small-caps;
        font-weight: 500;
        letter-spacing: 1px;
}


.frame-cta-container {
        position: relative;
        bottom: 150px;
        z-index: 15;
        justify-self: center;
}


@media(min-width: 768px) {
        .frame-cta-container {
                bottom: 155px;
        }
}

.hero-feature-button-container {
        margin-top: 32px;
        grid-gap: 16px;
        justify-content: center;
        display: grid;
}

@media(min-width: 768px) {
        .hero-feature-button-container {
                display: flex;
        }
}