.aircraft-carousel{
    overflow: hidden;
}
.aircraft-range{
    padding: 85px 0px;
}
.aircraft-range .title h2{
    margin-bottom: 0px;
}
.aircraft-slider .content-wrap{
    text-align: center;
    margin-bottom: 25px;
}
.aircraft-item{
    text-align: center;
}
.aircraft-image{
    height: 251px;
    transform: scale(0.7);
    align-items: center;
    display: flex;
    position: relative;
    transition: var(--transition);
}

.no-slider .aircraft-image{
    transform: scale(1);
}
.no-slider .aircraft-content {
    opacity: 1;
}
.no-slider .aircraft-item .labels,.no-slider .aircraft-item .aircraft-capacity{
    opacity: 1;
}
.slick-center .aircraft-image{
    transform: scale(1.1);
}  
.aircraft-carousel{
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
    height: 0;
}

.aircraft-carousel.slick-initialized {
    visibility: visible;
    opacity: 1;
    height: auto;
}


.aircraft-image::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 227px;
    height: 227px;
    background: url(../images/Circle-background-2.svg);
    background-repeat: no-repeat;
    background-size: cover;
    transition: var(--transition);
    z-index: 1;
}
.aircraft-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}
.aircraft-capacity{
    display: flex;
    gap: 25px;
    justify-content: center;
}
.aircraft-capacity .passenger,.aircraft-capacity .range{
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    color: var(--ivory-text);
    font-weight: 400;
}
.aircraft-capacity .passenger:hover,.aircraft-capacity .range:hover{
    color: var(--ivory-text);
}
.aircraft-capacity .passenger::before{
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('../images/icons/fluent_people-12-filled.svg');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
}

.aircraft-capacity .range::before{
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('../images/icons/majesticons_airplane.svg');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
}
.aircraft-item h4{
    margin-bottom: 5px;
    transition: var(--transition);
}

.aircraft-carousel .slick-slide {
    margin: 0 22.5px;
    height: auto;
}

.aircraft-carousel .slick-list {
    margin: 0 -22.5px;
}

.aircraft-carousel .slick-track {
    display: flex !important;
    margin-left: 0px;
}
.aircraft-item .labels,.aircraft-item .aircraft-capacity,
.aircraft-item .aircraft-content p,.aircraft-item .aircraft-content .button-wrap{
    opacity: 0;
    transition: var(--transition);
}
.slick-center .aircraft-item .labels,
.slick-center .aircraft-item .aircraft-capacity,
.slick-center .aircraft-item .aircraft-content p,
.slick-center .aircraft-item .aircraft-content .button-wrap{
    opacity: 1;
}



.aircraft-carousel .slick-slide{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.aircraft-content{
    opacity: 0.25;
    transition: var(--transition);
}
.slick-center .aircraft-content{
    opacity: 1;
}
.aircraft-carousel .slick-prev{
    top: 54%;
    bottom: 0px;
    transform: translateY(0%) rotate(180deg);
}
.aircraft-carousel .slick-next,.aircraft-carousel .slick-prev{
    top: 54%;
    bottom: 0px;
}
.aircraft-item .button-wrap{
    margin-top: 25px;
}
.aircraft-item p{
    max-width: 350px;
    margin: 0 auto;
}

/* Centre-slide reveal timing.
   The carousel images are eager and already decoded before any interaction, so the
   delay users saw on the newly centred slide was animation, not loading. Measured on
   the live page: the centre state landed ~490ms after the arrow click and the zoom
   finished ~983ms after it, i.e. about a second end to end.
   The slide travel is shortened in dd-custom.js. This shortens the reveal that follows
   it. Scoped to this carousel deliberately: the global --transition is used site-wide
   and must not change.
   Transitions are property-specific rather than `all`, so adding a layout property to
   these elements later cannot accidentally start animating it. */
.aircraft-carousel .aircraft-image,
.aircraft-carousel .aircraft-image::before,
.aircraft-carousel .aircraft-content,
.aircraft-carousel .aircraft-item h4,
.aircraft-carousel .aircraft-item .labels,
.aircraft-carousel .aircraft-item .aircraft-capacity,
.aircraft-carousel .aircraft-item .aircraft-content p,
.aircraft-carousel .aircraft-item .aircraft-content .button-wrap{
    transition: transform 250ms ease-out, opacity 250ms ease-out;
}

/* Infinite-wrap entrance.
   Going forward past the last slide, the slide travelling into view is a clone that
   slick never marks .slick-center, so without this it would sit small and dimmed in the
   centre for the whole animation and then pop to full size when the track repositions.
   dd-custom.js tags that clone with .is-wrap-center for the duration of the animation.
   These rules must mirror the .slick-center appearance exactly. */
.aircraft-carousel .slick-slide.is-wrap-center .aircraft-image{
    transform: scale(1);
}
.aircraft-carousel .slick-slide.is-wrap-center .aircraft-content{
    opacity: 1;
}
.aircraft-carousel .slick-slide.is-wrap-center .aircraft-item .labels,
.aircraft-carousel .slick-slide.is-wrap-center .aircraft-item .aircraft-capacity,
.aircraft-carousel .slick-slide.is-wrap-center .aircraft-content p,
.aircraft-carousel .slick-slide.is-wrap-center .aircraft-content .button-wrap{
    opacity: 1;
}

/* First-view entrance for the slide that starts centred.
   Slick marks that slide .slick-center while the carousel is still hidden, so it is
   already at full size before anyone sees it and looked static next to the slides that
   animate when you arrow to them.
   dd-custom.js adds .is-aircraft-revealing BEFORE slick initialises, so the centre
   slide starts at the non-centre appearance with no transition in flight, then removes
   it when the carousel is first scrolled into view, which plays a clean 0.6 -> 1.
   Applying the pin after init does not work: the live transition animates towards the
   pinned value instead of settling on it. */
.aircraft-carousel.is-aircraft-revealing .slick-center .aircraft-image{
    transform: scale(0.6);
}
.aircraft-carousel.is-aircraft-revealing .slick-center .aircraft-content{
    opacity: 0.25;
}
.aircraft-carousel.is-aircraft-revealing .slick-center .aircraft-item .labels,
.aircraft-carousel.is-aircraft-revealing .slick-center .aircraft-item .aircraft-capacity,
.aircraft-carousel.is-aircraft-revealing .slick-center .aircraft-content p,
.aircraft-carousel.is-aircraft-revealing .slick-center .aircraft-content .button-wrap{
    opacity: 0;
}

/* Respect a reduced-motion preference: keep the state changes, drop the movement.
   Scoped to this carousel because that is what this change touches. */
@media (prefers-reduced-motion: reduce) {
    .aircraft-carousel .aircraft-image,
    .aircraft-carousel .aircraft-image::before,
    .aircraft-carousel .aircraft-content,
    .aircraft-carousel .aircraft-item h4,
    .aircraft-carousel .aircraft-item .labels,
    .aircraft-carousel .aircraft-item .aircraft-capacity,
    .aircraft-carousel .aircraft-item .aircraft-content p,
    .aircraft-carousel .aircraft-item .aircraft-content .button-wrap{
        transition-duration: 1ms;
    }
    .aircraft-carousel .slick-track{
        transition-duration: 1ms !important;
    }
}