.customer-support-section {
  padding: 96px 24px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}

.customer-support-inner {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 85px;
  align-items: center;
}

.customer-support-heading > p {
  margin: 0 0 20px;
  color: #0879bd;
  font: 700 12px/1.2 "Manrope", sans-serif;
  letter-spacing: 2.2px;
}

.customer-support-heading h2 {
  margin: 0;
  color: #14202b;
  font-size: clamp(42px, 4vw, 66px);
  line-height: 1.2;
  letter-spacing: -3px;
}

.customer-support-heading > span {
  width: 54px;
  height: 2px;
  margin: 30px 0;
  display: block;
  background: #0879bd;
}

.customer-support-heading h3 {
  margin: 0;
  color: #68737e;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.85;
}

.support-accordion {
  height: 500px;
  display: flex;
  overflow: hidden;
  background: #071b2e;
}

.support-card {
  position: relative;
  flex: 1;
  padding: 35px 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.14);
  color: #fff;
  background-color: #0a243d;
  background-position: center;
  background-size: cover;
  text-decoration: none;
  transition: flex .45s cubic-bezier(.25,.8,.25,1), background-color .3s ease;
}

.support-card:nth-child(1) { background-image: url("../img/support/accordian01.jpg"); }
.support-card:nth-child(2) { background-image: url("../img/support/accordian02.jpg"); }
.support-card:nth-child(3) { background-image: url("../img/support/accordian03.jpg"); }
.support-card:nth-child(4) { background-image: url("../img/support/accordian04.jpg"); }
.support-card:nth-child(5) { background-image: url("../img/support/accordian05.jpg"); }

.support-card::before {
  position: absolute;
  inset: 0;
  background: rgba(4, 19, 32, .62);
  content: "";
  transition: background-color .3s ease;
}

.support-card > * { position: relative; z-index: 1; }

.support-card:last-child { border-right: 0; }
.support-card:first-child { flex: 2; }
.support-card:first-child::before { background: rgba(8, 121, 189, .76); }
.support-accordion:hover .support-card { flex: 1; }
.support-accordion:hover .support-card::before { background: rgba(4, 19, 32, .62); }
.support-accordion .support-card:hover { flex: 2; }
.support-accordion .support-card:hover::before { background: rgba(8, 121, 189, .76); }
.support-card > span { color: rgba(255,255,255,.58); font: 700 11px "Manrope", sans-serif; }
.support-card strong { writing-mode: vertical-rl; align-self: center; font-size: 25px; letter-spacing: 1px; }
.support-card i { align-self: end; font-size: 23px; font-style: normal; }

@media (max-width: 900px) {
  .customer-support-section { padding: 90px 24px; display: block; }
  .customer-support-inner { grid-template-columns: 1fr; gap: 45px; }
  .support-accordion { height: 420px; }
}

@media (max-width: 560px) {
  .support-accordion { height: auto; flex-direction: column; }
  .support-card, .support-card:first-child, .support-accordion:hover .support-card, .support-accordion .support-card:hover { min-height: 95px; flex: none; }
  .support-card { flex-direction: row; align-items: center; }
  .support-card strong { writing-mode: horizontal-tb; font-size: 20px; }
}