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

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

@media( max-width: 768px ) {
    
    #hero {
        background-image: url('../img/homehero-m.jpg');
    }
}
   
    
    
    
#hero2
{
	position: relative;	
	display: grid;	
	width: 100%;		
	background-color: #fff;		
	background-image: url('../img/landlordhero.jpg');
	background-size: cover;
	background-position: center center;	
}

 

@media( max-width: 768px ) {
    
    #hero2 {
        background-image: url('../img/landlordhero-m.jpg');
    }
}

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

@media( max-width: 768px ) {
    
    #hero3 {
        background-image: url('../img/trusthero-m.jpg');
    }
}


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

@media( max-width: 768px ) {
    
    #hero4 {
        background-image: url('../img/hero3-m.jpg');
    }
}

.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
{
    background-color:#282826a5;
        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: 325px;
}

.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: #ffe08b;
	text-align: center;
	justify-self: center;	
	letter-spacing: 2px;
	text-shadow: #222222ab 1px 0 30px;
	font-family: "ivypresto-headline", serif;
	margin-top: 8px;
}

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