#about{
    background:#f0f0f0;
}
#about .row{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    
}
#about .row .column .heading{
    margin-bottom:30px;
}
#about .row .column .text{
    font-size:16px;
    text-align:justify;
    line-height:20px;    
    margin-bottom:40px;
    
}
#about .row .column:first-child{
    padding:50px 0;
    padding-left:50px;
    padding-right:20px;
}
#about .row .column:nth-child(2) img{
    width:100%;
    height:100%;
    object-fit: cover;
}
/* responsive design starts here */
@media screen and (max-width:1100px){
    #about .row-2 .column-2{
        padding-inline:40px;
    }
}
@media screen and (max-width:800px){
    #about .row .column:first-child{
        padding-left:20px;
    }
    #about .row{
        grid-template-columns:1fr;
        grid-template-rows:repeat(2,auto);
    }
    #about .row-2{
        grid-template-columns:1fr;
        grid-template-rows:repeat(2, 1fr);
    }
}
@media screen and (max-width:400px){
    #about .row-2 .column-2{
        padding-inline:20px;
    }
    #about .row .column:first-child{
        padding-left:20px;
        padding-right:20px;
    }
    #about .row{
        padding-inline:0;
    }
   
    #about .row .column:nth-child(2) img{
       height: 300px;
    }
}
