.custom-box {
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  border-radius: 20px;
  padding: 24px 20px;
  margin-top: 10px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 6px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
  border: 1px solid #e6e6e6;
}

/* On hover: slightly lift for interactive feel */
.custom-box:hover {
  transform: translateY(-4px);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Adjust spacing between columns for background gap */
.col-md-4 {
  margin-right: 10px;
}

.col-md-8 {
  margin-left: 10px;
}



.modern-panel {
  background: linear-gradient(135deg, #ffffff, #f9f9f9);
  border-radius: 20px;
  padding: 20px 15px;
  margin-top: 15px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 12px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

/* Optional hover effect for interactivity */
.modern-panel:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Optional for better typography inside */
.modern-panel h2,
.modern-panel h3,
.modern-panel h4,
.modern-panel p {
  font-family: 'YekanBakh', sans-serif;
  color: #333;
  margin-bottom: 15px;
}





 /* Apply modern look to all Bootstrap panels with both classes */
.panel.panel-body {
  background: linear-gradient(135deg, #ffffff, #f9f9f9);
  border-radius: 20px;
  padding: 10px 5px;
  margin-top: 5px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 12px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

/* Corrected hover effect */
.panel.panel-body:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 20px 40px rgba(0, 0, 0, 0.12);
}