/* 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: 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 .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;
}