.esc-carousel-wrapper {
  position: relative;
  width: 100%;
}

/* Track */
.esc-carousel {
  display: flex;
  gap: 20px;
  overflow: hidden;
  scroll-behavior: auto;
  will-change: transform;
}

/* Card */
.esc-card {
  flex: 0 0 calc(30% - 10px); /* 4 per view desktop */
  background: #0b1e3f;
  border-radius: 10px;
  padding: 24px 50px 0px 24px;
  color: #fff;
}

.esc-card img {
  margin-top: 50px;
}


.esc-card p {
  font-size: 16px;
}
.esc-card h4 { 
    color: #FFF;
    margin-top: 30px;
    font-size: 1vw;
 }


/* Content */
.esc-card-content p {
  margin-bottom: 0.75em;
}


.esc-prev { right: 50px; }
.esc-next { right: 0; }

/* Header alignment */
.esc-carousel-header {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}
.esc-carousel-header {
  margin-top: -100px;
    position: absolute;
    right: 0;
}

/* Arrow base */
.esc-arrow {
  width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: all 0.25s ease;
    background-color: transparent;
    padding: 0 35px;
}



/* LEFT arrow image */
.esc-prev {
  background-image: url('images/arrow-left.webp');
}

/* RIGHT arrow image */
.esc-next {
  background-image: url('images/arrow-right.webp');
}
.esc-next:hover, .esc-prev:hover, .esc-next:active, .esc-prev:active, .esc-next:focus, .esc-prev:focus { background-color:transparent; }

/* Tablet */
@media (max-width: 1024px) {
  .esc-card {
    flex: 0 0 calc(50% - 10px); /* 2 per view */
  }
}

/* Mobile */
@media (max-width: 767px) {
  .esc-card {
    flex: 0 0 100%; /* 1 per view */
  }
}