.commonsection_container{
  position:relative;
  background:var(--bgcolor_primary);
  color:var(--textcolor_light);
  border:none;
}

.commonsection_titlearea{
  border-color:var(--color_accent);  
}

.commonsection_container.leftover::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:100vw;
    height:100%;
    background:var(--bgcolor_primary);
    z-index:-1;
}

.commonsection_container.rightover::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height:100%;
    background:var(--bgcolor_primary);
    z-index:-1;
}

.content_image{
    display:block;
    width:100%;
    height:100%;
}

.eventflow{
  margin: auto;
  width:90%;
  display:flex;
  flex-direction:column;
}

.eventflow_item{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  background-color:#e9e2f2;
  background-color:var(--bgcolor_secondary);
  color:var(--textcolor_dark);
  border-radius:10px;
  position:relative;
  padding-top:10px;
} 

.eventflow_item:first-of-type{
  margin-top:10px;
}

.eventflow_item:not(:last-child){
  margin-bottom:50px;
}

.eventflow_item:not(:last-child)::after{
  content:"";
  width:20%;
  height:40px;
  position:absolute;
  top:calc(100% - 1px) ;
  left:50%;
  background-color:#e9e2f2;
  background-color:var(--bgcolor_secondary);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.eventflow_item_step{
  padding:0px 10px;
  position:absolute;
  top:0;
  left:0;
  font-size:x-large;
  font-weight:bold;
  background-color: #f5bbef; 
  border-radius:10px 0 10px 0;
}
 
.eventflow_item img{
  margin:0 auto;
  width:auto;
  display:block;
  max-height:320px;
  max-width:320px;
  border:1px solid ;
  border-radius:50%;
}
 
.eventflow_item h3{
  margin:0 auto;
  width:90%;
}
 
.eventflow_item p{
  margin:0 auto;
  padding-left:1rem;
  width:90%;
}


@media screen and (min-width: 768px) {
 
  .commonsection_contentarea{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  
  .content_image{
    display:block;
    width:50%;
  }
  
  .content_image.toright{
    order:1;
  }
  
  .content_text{
    margin:0;
    width:50%;
  }

  .eventflow_item{
    height:340px;
    justify-content:center;
  } 

  .eventflow_item img{
    margin:0 10px ;
  }
 
  .eventflow_item h3{
     width: calc(100% - 340px);
  }
 
  .eventflow_item p{
    width: calc(100% - 340px);
  }
 
}