.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

.services-swiper .swiper-slide.swiper-slide-visible.swiper-slide-fully-visible.swiper-slide-active {
    padding: 0 50px;
}

.swiper-slide.swiper-slide-visible {
    opacity: 0;
}

.swiper-slide.swiper-slide-visible.swiper-slide-prev,
.swiper-slide.swiper-slide-visible.swiper-slide-next {
    opacity: 0.3;
}

.swiper-slide.swiper-slide-visible.swiper-slide-active {
    opacity: 1;
}

@media (min-width: 576px) {
    .services-swiper .swiper-slide.swiper-slide-visible.swiper-slide-fully-visible.swiper-slide-active {
        padding: 0;
    }
}

.card .rounded {
    overflow: hidden;
    transition: max-height 0.5s ease;
}

/* 7th slide */
.swiper-slide[data-swiper-slide-index="6"] .p-3.rounded {
    max-height: 4em;
}

/* 1st, 2nd, 4th & 7th slides */
.swiper-slide[data-swiper-slide-index="0"] .p-3.rounded,
.swiper-slide[data-swiper-slide-index="1"] .p-3.rounded,
.swiper-slide[data-swiper-slide-index="3"] .p-3.rounded {
    max-height: 6.5em;
}

/* 5th & 6th slides */
.swiper-slide[data-swiper-slide-index="4"] .p-3.rounded,
.swiper-slide[data-swiper-slide-index="5"] .p-3.rounded {
    max-height: 9em;
}

/* 3rd slide (the biggest one) */
.swiper-slide[data-swiper-slide-index="2"] .p-3.rounded {
    max-height: 11em;
}

.swiper-slide-active:hover .card .rounded {
    max-height: 20em;
    /* enough for H2 + p + link */
}

.swiper-slide .card {
  background-position: center;
  background-size: cover;
  width: auto;
}

.swiper-slide .slide-content {
    height: 400px;
    display: flex;
    align-items: flex-end;
}

.swiper-slide .slide-content > .rounded {
    background: #eaeae2f2;
}

.swiper-slide .card-text,
.swiper-slide .card-body a {
    max-height: 0;
    /* collapse it */
    overflow: hidden;
    /* hide the contents */
    opacity: 0;
    /* fade out */
    transform: translateY(10px);
    transition:
        max-height 0.5s ease,
        /* height expands */
        opacity 0.3s ease 0.3s,
        /* then fade in */
        transform 0.3s ease 0.3s;
    /* then slide up */
}

.swiper-slide-active:hover .card-text,
.swiper-slide-active:hover .card-body a {
    max-height: 200px;
    /* big enough to show your content */
    opacity: 1;
    transform: translateY(0);
}

/* 1) Make the button positioning predictable */
.swiper-slide .btn.btn-warning {
    position: relative;
    display: inline-block;
    padding-right: 1em;
    /* leave room for the arrow */
    transition: padding-right 0.3s ease;
}

/* 2) Add an “→” via a pseudo, hidden by default */
.swiper-slide .btn.btn-warning::after {
    content: '>>';
    display: inline-block;
    margin-left: 0.5em;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 3) On hover, reveal the arrow and shift padding so it fits */
.swiper-slide .btn.btn-warning:hover {
    padding-right: 1.5em;
}

.swiper-slide .btn.btn-warning:hover::after {
    opacity: 1;
    /* kick off the pulsating animation */
    animation: pulseArrow 0.8s ease-in-out infinite;
}

/* 4) Define the pulse: nudge right, then left */
@keyframes pulseArrow {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-3px);
    }
}