/* Basic resets and font-family */
.certifications-accordion-wrapper {
  font-family: 'Cairo', sans-serif;
  padding: 20px 0;
}

/* Accordion container */
.accordion {
  width: 1052px;
  margin: 12px auto;
  border-radius: 16px;
  background: linear-gradient(37.85deg, rgba(205, 220, 231, 0.5) 5.75%, rgba(219, 235, 221, 0.5) 95.94%);
  box-shadow: 0px 4px 4px 0px #0000001A;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease;
}
.accordion {
    margin-bottom: 2rem !important;
}

/* Open/Closed classes */
.accordion.closed {
  height: auto;
  padding-bottom: 20px;
}
.accordion.open {
  height: auto;
}

/* Header */
.accordion-header {
  padding: 30px 30px 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.title {
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: #000;
  text-transform: capitalize;
  max-width: 70%;
}

.level-tag {
  background: #4A90E2DB;
  color: #fff;
  margin-left: 20px;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 600;
}

/* Content */
.accordion-content {
  padding: 10px 30px 10px 30px;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #000;
  overflow: hidden;
  transition: max-height 0.4s ease;
  max-height: 45px; /* Default collapsed height */
}

.accordion.closed .accordion-content {
  max-height: 65px; /* collapsed approx 2 lines */
}

/* More info */
.more-info {
  padding: 0 30px 20px 30px;
  font-weight: 600;
  font-size: 16px;
  line-height: 27px;
  color: #045185;
  text-transform: capitalize;
  text-decoration: underline;
  cursor: pointer;
  display: none;
}
.accordion.open .more-info {
  display: block;
}

/* Toggle icon */
.toggle-icon {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 1024px) {
  .accordion { width: 90%; }
}
@media (max-width: 768px) {
  .accordion-header { flex-direction: column; align-items:flex-start; }
  .title { max-width:100%; font-size:16px; line-height:22px; }
  .level-tag { margin-left:0; margin-top:10px; font-size:13px; padding:4px 10px; }
  .toggle-icon { top:20px; right:20px; width:28px; height:28px; }
  .accordion-content { font-size:13px; line-height:20px; }
  .more-info { font-size:14px; line-height:24px; }
}
@media (max-width: 480px) {
  .accordion { width:95%; }
  .title { font-size:15px; }
  .level-tag { font-size:12px; margin-left:10px; padding:5px 5px; }
  .toggle-icon { right:30px; top:30px; width:20px; height:20px; }
}