@charset "utf-8";

/* =====================================
   HERO
===================================== */

.hero{

    max-width:var(--max-width);

    width:90%;

    margin:70px auto;

    display:grid;

    grid-template-columns:1fr 1.5fr;

    gap:50px;

    align-items:center;

}

.hero-text{

    animation:slideLeft 1s ease-out;

}

.hero h1{

    font-size:52px;

    line-height:1.1;

    margin:0 0 25px;

}

.hero p{

    font-size:20px;

    line-height:1.6;

    color:var(--gray-100);

}

.button{

    display:inline-block;

    margin-top:25px;

    padding:15px 35px;

    background:var(--primary);

    color:var(--white);

    text-decoration:none;

    font-size:18px;

}

.button:hover{

    background:var(--primary-hover);

}

.hero-image{

    animation:slideRight 1s ease-out;

}

.hero-image img{
	width: 700px;
	border: 0px solid var(--gray-500);

}