/*pattern001*/
.title-pattern-001 h1 {
  font-weight: 400 !important;
  padding-right: 70px;
  position: relative;
  transition:0.3s;
}
@media(max-width:991px){
.title-pattern-001 h1 {
  padding-right: 50px;
  position: relative;
  font-weight: 300;
  transition:0.3s;
}}
.title-pattern-001 h1:hover {
    padding-right: 60px;
    position: relative;
}
@media(max-width:991px){
.title-pattern-001 h1:hover {
    padding-right: 40px;
    position: relative;
}}

.title-pattern-001 h1:after {
  content: "";
  position: absolute;
  background: #8c53ff;
  width: 40px;
  border-radius: 40px;
  height: 40px;
  transition: 0.3s;
  right: 5px;
  transition:0.3s;
  top: 0px;
  margin:auto;
  bottom: 0px;
}
@media(max-width:991px){
.title-pattern-001 h1:after {
  content: "";
  position: absolute;
  background: #8c53ff;
  width: 25px;
  border-radius: 30px;
  height: 25px;
}}

.title-pattern-001 h1:hover:after {
  content: "";
  position: absolute;
  background: #8c53ff;
  width: 40px;
  border-radius: 0px;
  height: 40px;
  transition: 0.3s;
  right: 5px;
  top: 0px;
  margin:auto;
  bottom: 0px;
}
@media(max-width:991px){
.title-pattern-001 h1:hover:after {
  content: "";
  position: absolute;
  background: #8c53ff;
  width: 25px;
  border-radius: 0px;
  height: 25px;
}}

/*pattern002*/
.title-pattern-002 h1 {
  padding-left: 70px;
  position: relative;
    font-weight: 300;
  transition:0.3s;
}
@media(max-width:991px){
.title-pattern-002 h1 {
  padding-left: 55px;
  position: relative;
    font-weight: 300;
  transition:0.3s;
}}
.title-pattern-002 h1:hover {
    padding-left: 60px;
    position: relative;
}
@media(max-width:991px){
.title-pattern-002 h1:hover {
    padding-left: 48px;
    position: relative;
}}
.title-pattern-002 h1:after {
  content: "";
  position: absolute;
  background: #8c53ff;
  width: 40px;
  border-radius: 30px;
  height: 40px;
  transition: 0.3s;
  left: 5px;
  top: 0px;
  margin:auto;
  bottom: 0px;
}
@media(max-width:991px){
.title-pattern-002 h1:after {
  content: "";
  position: absolute;
  background: #8c53ff;
  width: 25px;
  border-radius: 30px;
  height: 25px;
}}

.title-pattern-002 h1:hover:after {
  content: "";
  position: absolute;
  background: #8c53ff;
  width: 40px;
  border-radius: 0px;
  height: 40px;
  transition: 0.3s;
  left: 5px;
  top: 0px;
  margin:auto;
  bottom: 0px;
}
@media(max-width:991px){
.title-pattern-002 h1:hover:after {
  content: "";
  position: absolute;
  background: #8c53ff;
  width: 25px;
  border-radius: 0px;
  height: 25px;
}}

/*titlepttern003*/
.title-pattern-003 h4{
    position: relative;
}
.title-pattern-003 h4:after {
  content: "";
  position: absolute;
  background: #8c53ff;
  width: 10px;
  border-radius: 30px;
  height: 10px;
  transition: 0.3s;
  right: 0px;
  left:0px;
  top: 0px;
  margin:auto;
  bottom: -65px;
}
@media(max-width:991px){
.title-pattern-003 h4:after {
  content: "";
  position: absolute;
  background: #8c53ff;
  width: 7px;
  border-radius: 30px;
  height: 7px;
  transition: 0.3s;
  right: 0px;
  left:0px;
  top: 0px;
  margin:auto;
  bottom: -35px;
}}


/*img*/
.img-001 img.sppb-img-responsive {
    border-radius: 40px;
  transition:0.3s;
}
.img-001 img.sppb-img-responsive:hover {
    border-radius: 0px;
}

/*border*/
/*border-bg-001*/
.border-bg-001 {
    position: relative;
}
.border-bg-001:before {
  content: "";
  position: absolute;
  background: #ff914d;
  width: 2px;
  height: 50%;
  left: 0px;
  z-index: 999;
  right:0px;
  top:0px;
  bottom:0px;
  margin: auto;
  transition:0.6s;
}
@media(max-width:991px){
.border-bg-001:before {
  content: "";
  position: absolute;
  background: #ff914d;
  width: 70px;
  height: 2px;
  transition: 0.3s;
  left: 0px;
  right:0px;
  top: 40px;
  bottom:0px;
  margin: auto;
  transition:0.6s;
}}