#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;
}
#about .row-2{
    width:100%;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:auto;
}
#about .row-2 .column-2{
    padding:40px 80px;
}
#about .row-2 .column-2:first-child{
    background:var(--ccc);
}
#about .row-2 .column-2:nth-child(2){
    background:rgb(184, 182, 182);
}
#about .row-2 .column-2 .heading{
    font-size:25px;
    margin-bottom:40px;
    position:relative;
}
#about .row-2 .column-2 .heading:before{
    content:'';
    position:absolute;
    height:2px;
    width:80px;
    background:var(--crimson);
    top:calc(100% + 15px);
    left:0;
}
#about .row-2 .column-2 p{
    font-size:16px;
    text-align:justify;
    margin-bottom:30px;
}
/* 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,1fr);
    }
    #about .row-2{
        grid-template-columns:1fr;
        grid-template-rows:repeat(2, 1fr);
    }
}
@media screen and (max-width:400px){
    #home{
        height:
    }
    #about .row-2 .column-2{
        padding-inline:20px;
    }
    #about .row .column:first-child{
        padding-left:20px;
        padding-right:20px;
    }
    #about .row{
        padding-inline:0;
    }
}