/* ===== STYLE 4 ===== */
.style-4{
  display:flex;
  background:#f8faff;
  border-radius:40px;
  margin-bottom:40px;
  overflow:hidden;
  min-height:400px;
  align-items:stretch;
  position:relative;
}

.style-4.reverse{
  flex-direction:row-reverse;
}

.style-4 .content-box{
  flex:1.2;
  padding:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.style-4 .image-box-wrapper{
  flex:1;
  position:relative;
  padding:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.style-4 .image-box{
  width:100%;
  height:100%;
  min-height:300px;
  background-size:cover;
  background-position:center;
  border-radius:30px;
  z-index:2;
  position:relative;
  box-shadow:0 15px 35px rgba(0,0,0,0.1);
}

.style-4 .image-box-wrapper::after{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,#eaddff,#d1b8ff);
  border-radius:40px;
  top:10px;
  right:10px;
  z-index:1;
  clip-path:polygon(100% 0,100% 100%,0 100%,60% 60%);
}

.style-4 .btn {
  background: var(--primary-color);
  color: var(--text-light);
  border: none;
  padding: 14px 35px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  width: fit-content;
  box-shadow: 0 5px 15px rgba(125, 42, 232, 0.3);
  transition: transform 0.2s;
}
@media(max-width:768px){.style-4, .style-4.reverse{ flex-direction:column; }
  .style-4 .image-box-wrapper::after{ display:none; }
}