/**
 * Value Proposition Block CSS
 * Two-column layout with custom background colors
 */

.moved-up .outer {
  display: flex;
  margin-top: -100px;
  display: grid;
  grid-template-columns: 8fr 4fr;
  position: relative;

      margin-inline: 30px;
}
@media (min-width: 768px) {
  .moved-up .outer {
    margin-inline: 30px;
  }   
}
.moved-up .outer::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000928;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-border-top-left-radius: 45px;
  -webkit-border-bottom-right-radius: 45px;
  -moz-border-radius-topleft: 45px;
  -moz-border-radius-bottomright: 45px;
  border-top-left-radius: 45px;
  border-bottom-right-radius: 45px;
  transform: skew(-2deg, 0deg);
  -webkit-box-shadow: 1px 4px 20px 5px rgba(0,0,0,0.26); 
  box-shadow: 1px 4px 20px 5px rgba(0,0,0,0.26);
}

@media (min-width: 768px) {
  .moved-up .outer::before {
    transform: skew(-6deg, 0deg);
  }   
}

.moved-up .outer > div {
  padding: 60px;
}

.moved-up p {
  font-size: 22px;
  line-height: 1.5;
  color: #fff;
}

.moved-up p a {
  font-weight: 600;
  display: block;
}

.moved-up .left-part {
  /* background: #00C2CB; */
  position: relative;
  clip-path: polygon(
    0% 30px,                   /* top-left corner rounded start */
    30px 0%,                   /* top-left corner rounded end */
    calc(100% - 60px) 0%,      /* top edge moving right */
    calc(100% - 30px) 5%,      /* top-right SKEWED (angled down-right) */
    100% calc(5% + 30px),      /* top-right skew end */
    100% calc(95% - 30px),     /* right edge */
    calc(100% - 30px) 95%,     /* bottom-right SKEWED (angled down-right) */
    calc(100% - 60px) 100%,    /* bottom edge */
    30px 100%,                 /* bottom-left corner rounded start */
    0% calc(100% - 30px)       /* bottom-left corner rounded end */
  );
}

.moved-up .right-part {
  /* background: #545F7F; */
  position: relative;
  clip-path: polygon(
    30px 5%,                   /* top-left SKEWED (angled from left part) */
    60px 0%,                   /* top-left skew end */
    calc(100% - 30px) 0%,      /* top edge */
    100% 30px,                 /* top-right corner rounded */
    100% calc(100% - 30px),    /* right edge */
    calc(100% - 30px) 100%,    /* bottom-right corner rounded start */
    60px 100%,                 /* bottom edge */
    30px 95%,                  /* bottom-left SKEWED (angled from left part) */
    0% calc(95% - 30px),       /* bottom-left skew start */
    0% calc(5% + 30px)         /* left edge back to top */
  );
}
.moved-up .right-part a {
  color: #00C2CB;
}

/* Responsive Styles */
@media (max-width: 1199px) {
  .moved-up .outer > div {
    padding: 30px;
  }
  .moved-up .outer {
    margin-top: -80px;
  }
}

@media (max-width: 991px) {
  .moved-up p {
    font-size: 18px;
  }
  .moved-up .outer {
    margin-top: -85px;
  }
}

@media (max-width: 767px) {
  .moved-up .outer {
    grid-template-columns: 100%;
  }
  .moved-up .left-part {
    clip-path: polygon(
      0 30px,                    /* top-left rounded */
      30px 0,
      calc(100% - 30px) 0,       /* top-right rounded */
      100% 30px,
      100% 100%,                 /* bottom-right straight (no angle when stacked) */
      0 100%                     /* bottom-left straight */
    );
  }
  .moved-up .right-part {
    clip-path: polygon(
      0 0,                       /* top-left straight */
      100% 0,                    /* top-right straight */
      100% calc(100% - 30px),    /* bottom-right angled */
      calc(100% - 30px) 100%,
      30px 100%,                 /* bottom-left rounded */
      0 calc(100% - 30px)
    );
  }
  .moved-up .outer > div {
    padding: 20px 30px;
  }
  .moved-up .outer {
    margin-top: -122px;
  }
}

@media (max-width: 575px) {
  .moved-up .outer > div {
    padding: 20px;
  }
  .moved-up .outer {
    margin-top: -149px;
  }
}