body{
    font-family: Roboto;
    padding: 20px;
    background: #f1f1f1;
}
.card1 div{
    display: inline-block;

}
.card{
    background-color: white;
}
.header{
    max-width: 1200px;
    margin-bottom: 15px;
    padding: 15px 20px;
    background-color: white;
    text-align: center;
    font-size: 40px;
}
.row{
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 75% 25%;

   
}
.row1{
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 100%;
  
}
.leftcolumn{
    display: grid;
    grid-auto-rows: minmax(400px auto);
    margin-right: 10px;
}
.rightcolumn{
    display: grid;
    grid-auto-rows: minmax(200px auto);
}
.img{
    height: 200px;
    background-color: #aaa;
    padding: 20px;
    background-size: cover;
    background-position: center;
}
.card{
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}
i{
    font-size: 30px!important;
    padding-right: 15px;
}
a{
    text-decoration: none;
    color:black;
}
.footer{
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}
.row2{
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 100%;
}

@media (max-width: 699px){
    .row{
        grid-template-columns: 1fr;
    }
    .row1{
    
    }
    h2{
        font-size: 20px;
    }
    .header{
        padding: 5px 20px;
        margin-bottom: 0px;
    }
    .leftcolumn{
        margin-right: 0px;

    }
    .footer{
        padding: 5px 20px;

    }
    .card1{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-items:center;
    }
    h3{
        text-align: center;
    }
}