/* Hero - section */


.grc-hero {
    position: relative;
    width: 100%;
    height: 50vh;
    margin: auto;
    display: flex;
    background: linear-gradient(to right,
    rgba(0,0,0,0.2), 
    rgba(0,0,0,0.2)), url('../assets/grc_1.jpg') no-repeat  center center/ cover;
}

.grc-hero::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.hero-section {
    position: relative;
    margin: 0 auto;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2rem;

}

.hero-section h1 {
    color: var(--white-color);
    
}

.hero-section a {
    background-color: var(--secondary-color);
    font-size: 1rem;
    color: var(--white-color);
    padding: 10px 20px;
    border-radius: 5px;

}


/* md */
@media (min-width: 768px) {

    .grc-hero {
        height: 65vh;
    }

    .hero-section a {
        font-size: 1.125rem;
    }
    
}



/* lg */
@media (min-width: 1024px) {
    .grc-hero {
        height: 85vh;
    }
}

/* xl */
@media (min-width: 1280px) {

    .hero-section a {
        font-size: 1.25rem;
    }

}

/* 2xl */
/* @media (min-width: 1536px) {

} */