*{
    padding: 0;
    margin: 0;
}
body{
    background-color: dimgray;
    background: url(./images/contactForm.png);
}

/*=======================
 adding style to about-1 
=======================*/

.about-1{
    margin: 2rem;
    padding: 5px;
}
.about-1 h1{
    text-align: center;
    color: #ffff;
    font-weight: bold;
}
.about-1 p{
    text-align: center;
    padding: 3px;
    color: #fff;

}

/*===========================
 adding style to about items 
============================*/

.about-item{
    margin-bottom: 2rem;
    margin-top: 2rem;
    background-color: #d2d0d0;
    padding: 4rem 2rem;
    box-shadow: 0 0 9px rgba(0,0,0.6);
}

/*======================================
adding style to the icons(book,globe,pencil)
=========================================*/
.about-item i{
    font-size: 2rem;
    margin: 0;
}
footer{
    margin-top: 1.5rem;
}

/*======================================
adding style to h3(heading 3) of each item 
=========================================*/
.about-item h3{
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/*======================================
styling the hr (the blue line in between)
=========================================*/
.about-item hr{
    width: 2rem;
    height: 3px;
    background-color: #5fbff9;
    margin: 0 auto;
    border: none;
    text-align: center;
}

/*========================================
hover means when you put your cursor over it
=========================================*/
.about-item:hover{
    background-color: #027b9a
}
.about-item:hover i,
.about-item:hover h3,
.about-item:hover p{
    color: #fff;
}
.about-item:hover hr{
    background-color: #fff;
}

/*==============================================================================
translate Y: move along the Y axis, negative(-20) moves it up, while positive(20) moves in down by  
================================================================================*/
.about-item:hover i{
    transform: translateY(-20px);
}
.about-item:hover i,
.about-item:hover h3,
.about-item:hover hr{
    transition: all 400ms ease-in-out;
}

/* Image section */
.ownerDetails{
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* background-color:#027b9a; */
    grid-template-rows: 1fr;
    row-gap: 3rem;
}


.ownerDetails img{
    width: 10rem;  
    border-radius: 10rem;
}

.vishalPardeshi img{
    width: 11rem;
}
.ownerContent p{
    margin-top: 4rem;
    color: #fff;
    
}
.aboutHeader{
    margin-top: 2rem;
    margin-bottom: 4rem;
    text-align: center;
}
.aboutHeader h2{
    text-decoration: underline;
    color: #d2d0d0;
}

.dlPardeshi{
    text-align: center;
    color: #d2d0d0;
}

.vishalPardeshi{
text-align: center;
margin-top: 1rem;
color: #d2d0d0;
}


@media(max-width:900px){
    html{
        font-size: 90%;
    }
    
}

@media(min-width:300px) and (max-width:450px){
    .ownerDetails{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
}