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

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

.text-mask {
        background-image: url("../img/banner-home.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-position: top;
}

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

@media (min-width: 768px) {
        #hero {
                background-color: #fff;
                background-image: url("../img/banner-home.jpg");
                background-size: cover;
                background-position: center center;
        }
}

#heroteam {
        background-color: #fff;
        background-image: url("../img/banner-meet.jpg");
        background-size: cover;
        background-position: center center;
        z-index: 10;
}
@media (max-width: 768px) {
        #heroteam {
                /*background-color: #fff;*/
                background-image: url("../img/banner-teamm.jpg");
                background-size: cover;
                background-position: center center;
        }
}

#heroservices {
        background-color: #fff;
        background-image: url("../img/banner-services3.jpg");
        background-size: cover;
        background-position: center center;
        z-index: 10;
}
@media (max-width: 768px) {
        #heroservices {
                /*background-color: #fff;*/
                background-image: url("../img/banner-services3m.jpg");
                background-size: cover;
                background-position: center center;
        }
}

#herocontact {
        background-color: #fff;
        background-image: url("../img/banner-contact.jpg");
        background-size: cover;
        background-position: center center;
        z-index: 10;
}
@media (max-width: 768px) {
        #herocontact {
                /*background-color: #fff;*/
                background-image: url("../img/banner-contactm.jpg");
                background-size: cover;
                background-position: center center;
        }
}

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

.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;
}

.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;
        text-align: center;
}

@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 0.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: flex;
}