/* Fun Fact Styles */
.fun-fact {
  background: #c9e4de;
  border-left: 4px solid #5fa896;
  padding: 15px 15px 15px 50px;
  margin: 15px 0;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.6;
  position: relative;
}

.fun-fact::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.fun-fact strong {
  color: #2c5f4f;
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
}

/* Did You Know Styles */
.did-you-know {
  background: #c6def1;
  border-left: 4px solid #5b9bd5;
  padding: 15px 15px 15px 50px;
  margin: 15px 0;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.6;
  position: relative;
}

.did-you-know::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.did-you-know strong {
  color: #2e5c8a;
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
}

/* FAQ Styles */
.faq-yellow {
  background: #faedcb;
  border-left: 4px solid #e6b325;
  padding: 15px 15px 15px 50px;
  margin: 15px 0;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.6;
  position: relative;
}

.faq-yellow::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.faq-yellow strong {
  color: #8b6914;
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
}

/* Universal Styles */
.universal {
  background: #f7c9c4;
  border-left: 4px solid #e57373;
  padding: 15px;
  margin: 15px 0;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.6;
  position: relative;
}

.universal strong {
  color: #c62828;
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .fun-fact,
  .did-you-know,
  .faq-yellow {
    padding: 12px 12px 12px 45px;
    margin: 12px 0;
    font-size: 15px;
  }

  .universal {
    padding: 12px;
    margin: 12px 0;
    font-size: 15px;
  }

  .fun-fact::before,
  .did-you-know::before,
  .faq-yellow::before {
    width: 20px;
    height: 20px;
    left: 10px;
  }

  .fun-fact strong,
  .did-you-know strong,
  .faq-yellow strong,
  .universal strong {
    font-size: 15px;
  }
}