root{
    --red: #EF1A0B;
    --white: #ffffff;
}

h1{
    color: var(--red);
    text-align: center;
    font-size: 4vw;
}

h3{
    color: var(--red);
}

section{
    padding: 6vw 4vw 4vw 4vw;
}


.main-content{
    display: flex;
    flex-direction: column;
    gap: 3vw;
    padding: 2vw 0;
}

.btn{
    background-color: var(--red);
    color: var(--white);
    padding: .5vw 1vw;
    border-radius: 6px;
    font-weight: 600;
    border: none;
}

.cards-box{
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 2vw;
    flex-wrap: wrap;
}

.card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
    width: 30%;
    border-radius: 5px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px;
    padding: 2vw;
}

.card img{
    width: 80%;
    display: block;
    margin: 0 auto;
}

.card .content{
    display: flex;
    flex-direction: column;
    gap: 1vw;
    align-items: center;
}

@media (max-width: 768px) {
    .main-content{
        padding: 20vw 0 3vw 0;
        gap: 6vw;
    }
    .cards-box{
        flex-direction: column;
        align-items: center;
        gap: 6vw;
    }
    .card{
         width: 90%;
    }
    
}