/* all common css start */
*{
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;

}
/* all common css end */
.ma{
    display: flex ;
    position: relative;
}

.div1{
    background:thistle;
    position: absolute;
    height: 300px;
    width: 300px;
    top:0;
    left: 0;
    z-index: 3;
}
.div2{
    background:teal;
    position: absolute;
    height: 300px;
    width: 300px;
    top:25px;
    left:25px ;
    z-index: 1;
}
.div3{
    background:indigo;
    position: absolute;
    height: 300px;
    width: 300px;
    top:50px;
    left:50px ;
    z-index: 4;
}
.div4{
    background:blueviolet;
    padding: 150px 0px;
    
    width: 300px;
     margin: 0 auto;
    text-align: center;
}
.div4 h1{
   font-size: 15px;
    text-align: center;
    
    display: inline-block;
    position: relative;
}
.div4 h1::before{
position: absolute;
    height: 2px;
    width: 59px;
    top: 33%;
    left: 101%;
content: "";
background: fuchsia;;
}
.div4 h1::after{
position: absolute;
    height: 2px;
    width: 59px;
    top: 33%;
    right: 101%;
content: "";
background: fuchsia;;
}
#hey h3::after{
position: absolute;
  height: 2px;
    width: 46px;
    top: -2px;
    left: -39%;
content: "";
background: red;;
}
.div4 h3{
   font-size: 15px;
    text-align: center;
    
    display: inline-block;
    position: relative;
}
#hey h3::before{
position: absolute;
height: 2px;
    width: 155px;
    bottom: 36px;
    left: -207%;
content: "";
background: red;;
}