.productFirst{
    padding: 4rem 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.insideProductFirst{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.insideProductFirst h2{
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 400;
    align-self: flex-start;
    border-bottom: 1px solid #000;
    padding-bottom: 1rem;
}

.products {
    width: 100%;
    display: flex;
    flex: 1;
    margin: 6rem 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.productCards {
    border-radius: 10rem;
    height: 10rem;
    width: 20rem;
    margin: 8rem 2rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
} 

.productCards h3 {
    font-size: 22px;
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 1rem;
    position: relative;
    top: -4rem;
    margin-bottom: 1rem;
}


.productCards img {
    height: 14rem;
    border-bottom: 1px solid #000;
    padding-bottom: 1rem;
    top: -4rem;
    position: relative;
}

@media screen and (max-width:1030px){
    .productFirst {
        padding: 7rem 0;
    }  

    .insideProductFirst h2 {
        font-size: 45px;
    }    
    
}

@media screen and (max-width:850px){
    .productCards img {
        height: 12rem;
    }
    .productCards {
        height: 8rem;
        width: 14rem;
        margin: 8rem 4rem;
    }
    .productFirst{
        padding-bottom: 0;
    }
  
}

@media screen and (max-width:785px){
    .productCards {
        margin: 8rem 2rem;
    }
}

@media screen and (max-width:650px){
    .insideProductFirst h2 {
        font-size: 40px;
    }
    .productFirst {
        padding: 6rem 0;
    }
    .productCards img {
        height: 10rem;
        top: -2rem;
    }
    .productCards h3 {
        font-size: 18px;
    }
    .productCards {
        height: 8rem;
        width: 12rem;
    }
    .productCards h3 {
        top: -2.5rem;
    }
   
}

@media screen and (max-width:590px){
    .insideProductFirst h2 {
        font-size: 35px;
    }
    .products {
        margin: 2rem 0;
    }
    .productCards {
        margin: 5rem 1rem;
    }
    .productCards img {
        height: 8rem;
    }
    .productCards {
        height: 8rem;
        width: 10rem;
    }
}

@media screen and (max-width:430px){
    .productFirst {
        padding: 5rem 0;
    }
    .productCards {
        height: 5.5rem;
        width: 6.5rem;
    }
    .productCards img {
        padding-bottom: 0.4rem;
    }
    .productCards h3 {
        font-size: 14px;
        text-align: center;
    }
}