/* Open Ondo Card Slider v2.0.2 */
.o2cs{ position:relative; width:100%; padding-bottom:110px; }
.o2cs-strip{ display:flex; align-items:flex-end; justify-content:center; gap:20px; overflow:visible; }
.o2cs-slot{ display:flex; align-items:flex-end; transition: width .28s cubic-bezier(.2,.8,.2,1); will-change: width; }

/* Card */
.o2cs-card{ width:100%; display:flex; align-items:flex-end; }
.o2cs-card__inner{
  --inactive-h:66%;
  height:var(--inactive-h);
  width:100%;
  padding:14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  backdrop-filter: blur(8px);
  transform-origin:center bottom;
  will-change: transform, height;
  transition: height .26s cubic-bezier(.2,.8,.2,1), padding .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow:hidden; min-height:0;
}
.o2cs-slot.is-active .o2cs-card__inner{
  height:100%;
  padding:22px 24px;
  background:#fff; color:#111;
  border-color: rgba(17,17,17,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}

/* Body text appears only on active */
.o2cs-card__body{ overflow:hidden; max-height:0; opacity:0; margin-top:0; transition:max-height .22s ease, opacity .18s ease, margin .18s ease; }
.o2cs-slot.is-active .o2cs-card__body{ max-height:420px; opacity:1; margin-top:8px; }

/* Typography: inactive smaller, active larger */
.o2cs .o2cs-card__title{ margin:8px 0 0; font-size:16px !important; line-height:1.28 !important; font-weight:700 !important; color:inherit !important; }
.o2cs .o2cs-card__text{ font-size:14px !important; line-height:1.5 !important; opacity:.9; }
.o2cs-slot.is-active .o2cs-card__title{ font-size:20px !important; }

/* Icon */
.o2cs-card__icon img{ width:22px; height:22px; object-fit:contain; display:block; }

/* Pulse */
.o2cs-slot.becoming-active .o2cs-card__inner{ animation:o2cs-grow .3s cubic-bezier(.2,.8,.2,1); }
@keyframes o2cs-grow{ 0%{transform:scale(.965)} 70%{transform:scale(1.01)} 100%{transform:scale(1)} }

/* Navigation */
.o2cs-nav{
  position:absolute; bottom:72px; right:24px;
  width:40px; height:40px; border-radius:10px;
  background:#fff; border:1px solid rgba(0,0,0,.12);
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
  z-index:5;
}
.o2cs-prev{ right:72px; }
.o2cs-nav:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.16); }
.o2cs-nav:before{
  content:''; display:block; width:18px; height:18px; background:#111;
  -webkit-mask-size:18px 18px; mask-size:18px 18px;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.o2cs-prev:before{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14.7 6.3a1 1 0 010 1.4L10.42 12l4.3 4.3a1 1 0 11-1.42 1.4l-5-5a1 1 0 010-1.4l5-5a1 1 0 011.4 0z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14.7 6.3a1 1 0 010 1.4L10.42 12l4.3 4.3a1 1 0 11-1.42 1.4l-5-5a1 1 0 010-1.4l5-5a1 1 0 011.4 0z"/></svg>'); }
.o2cs-next:before{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9.3 17.7a1 1 0 010-1.4L13.58 12 9.3 7.7A1 1 0 1110.7 6.3l5 5a1 1 0 010 1.4l-5 5a1 1 0 01-1.4 0z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9.3 17.7a1 1 0 010-1.4L13.58 12 9.3 7.7A1 1 0 1110.7 6.3l5 5a1 1 0 010 1.4l-5 5a1 1 0 01-1.4 0z"/></svg>'); }

@media (max-width:1024px){
  .o2cs-card__inner{ border-radius:18px; padding:12px; }
  .o2cs-nav{ bottom:56px; right:18px; }
  .o2cs-prev{ right:66px; }
}