.ddli_image {
  position: relative;
  overflow: hidden;
  padding-bottom: 55px;
}

.ddlii_inner img {
  width: 100%;
  max-height: 384px;
  -o-object-fit: cover;
  object-fit: cover;
}
.ddli_hov {
  bottom: -67px;
  left: 0;
  margin: 0 10px;
  padding: 30px 0;
  position: absolute;
  right: 0;
  -webkit-box-shadow: 0px 0px 65px 0px rgb(0 0 0 / 8%);
  box-shadow: 0px 0px 65px 0px rgb(0 0 0 / 8%);
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background-color: var(--quaternary_color);
}
.ddlih_social a {
  background: var(--quaternary_color) none repeat scroll 0% 0;
  border-radius: 50%;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  margin: 14px 3px 0;
  text-align: center;
  width: 35px;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.ddlih_social a svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: var(--primary_color);
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.ddlih_social a:hover svg {
  fill: var(--quaternary_color);
}
.ddli_image:hover .ddli_hov .ddlih_det * {
  color: var(--quaternary_color);
}
.ddlih_det p {
  margin-bottom: 0;
}
.ddli_meta {
  margin: 30px 0 20px;
  padding-bottom: 25px;
}
.pb_fix {
  position: relative;
  margin-top: 30px;
  border-radius: 6px;
  border: 1px solid var(--primary_color);
  padding: 2px;
}
.fillmult {
  height: 100%;
  width: 0;
  background-color: var(--primary_color);
  border-radius: 6px;
  text-align: left;
}
.pb_fix span.pb_title {
  position: absolute;
  top: -30px;
  padding-right: 20px;
}
.pb_fix span.pb_title h6 {
  margin-bottom: 0; 
}
.perc {
  position: absolute;
  display: none;
  top: -30px;
  right: 0;
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  color: var(--tertiary_color);
  font-family: 'Red Hat Text',sans-serif;
}
.pb_fix:not(:last-child) {
  margin-bottom: 45px;
}
.ddr_inner {
  -webkit-box-shadow: 0px 0px 20px 0px rgb(42 67 113 / 15%);
  box-shadow: 0px 0px 20px 0px rgb(42 67 113 / 15%);
}
.ddr_inner_image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
}
.ddr_content {
  padding: 30px;
}
.ddrc_cta {
  margin-top: 30px;
}
.ddrc_cta a.cta_button[title] {
  border-radius: 6px;
}


@media (min-width: 576px) {
  .dd_left,.dd_right{
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%; 
  }
}
@media (min-width: 768px) {
  .dd_left {
    -ms-flex: 0 0 41.666667%;
    -webkit-box-flex: 0;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .dd_right {
    -ms-flex: 0 0 58.333333%;
    -webkit-box-flex: 0;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .doc_details_main.flex {
    margin: 0 -15px;
  }
  .dd_left, .dd_right {
    padding: 0 15px;
  }
}

@media (min-width: 992px) {
  .dd_left {
    -ms-flex: 0 0 33.333333%;
    -webkit-box-flex: 0;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .dd_right {
    -ms-flex: 0 0 66.666667%;
    -webkit-box-flex: 0;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

@media (max-width: 767px) {
  .doc_details_main.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media (max-width: 575px) {
  .dd_left,.dd_right {
    width: 100%;
  }
  .dd_right {
    margin-top: 50px;
  }
}