@import url('styles.css');

.hero-section{
    background: var(--primary-5);
}

.hero-section .text-container{
    width: 75%;;
}   

.hero-section h1{
    font-weight: 700;
    font-size: 2rem;
    color: var(--primary-100);
}

.hero-section p{
    font-size: 0.9rem;
    font-weight: 500;
    color: #2C3A37;
}

.solutions h1{
    font-weight: 700;
    font-size: 2rem;
    color: var(--primary-100);
}

.solutions img{
    width: 15%;
}


.solutions .card{
    padding: 20px;
    transition: all 0.25s ease-in-out;
}

.solutions h5{
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-100);
}

.solutions p{
    font-size: 0.9rem;
    color: var(--dark-grey);
}

.solutions .card:hover{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);
}

@media only screen and (max-width: 992px) {

    .hero-section .text-container{
        width: 100%;;
    }   
}


@media only screen and (max-width: 580px) {

    .solutions h1{
        font-size: 1.8rem;
    }   
    .hero-section h1{
        font-size: 1.8rem;
    }   
}