#hero-icons {
    margin-top: 80px;
}

.logo-main {
    max-width: 240px!important;
}

#experts-img {
    border-radius: 0 0 60px 0;
}

/* Homepage hero background on small screens: the photo's subject (technician) sits
   bottom-left, so anchor the cover-crop to the left instead of the empty center */
@media (max-width: 991.98px) {
    #home-hero .jarallax-img {
        /* !important needed: jarallax sets object-position inline */
        object-position: 10% 50% !important;
    }
}

/* Compact numbered steps inside the pickup-delivery channel cards */
.mini-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
}

.mini-step:last-child {
    margin-bottom: 0;
}

.mini-step .num {
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: #1b1b1b;
    font-weight: 700;
    text-align: center;
    flex-shrink: 0;
    margin-right: 14px;
}

/* "Book a Repair" nav item: accent-colored so it reads as the action among links */
#mainmenu li a.menu-cta {
    color: var(--secondary-color) !important;
    font-weight: 700;
}

header.smaller.scroll-light #mainmenu li a.menu-cta {
    color: var(--primary-color) !important;
}

/* Social icons in the contact page info panel: primary teal instead of the default lime */
.social-icons.social-teal a i {
    color: var(--primary-color);
}

/* Content-column hero images on service-family pages: short banner crop instead of full-height photo */
.service-banner {
    height: 300px;
    object-fit: cover;
}

@media (max-width: 767px) {
    .service-banner {
        height: 200px;
    }
}

/* Hero pickup badge: plane periodically "flies off" and returns; whole pill lifts on hover */
.hero-badge {
    transition: all 350ms ease-in-out;
}

/* Fill each badge via an inset shadow (colors unchanged) so hover can "drain" it
   into a thin inset ring + outer glow */
.hero-badge.bg-color-2 {
    background-color: transparent !important;
    box-shadow: 0 0 40px 40px var(--secondary-color) inset, 0 0 0 0 var(--secondary-color);
}

.hero-badge.bg-white {
    background-color: transparent !important;
    box-shadow: 0 0 40px 40px #ffffff inset, 0 0 0 0 #ffffff;
}

.hero-badge .hero-plane {
    display: inline-block;
    height: 1em;
    width: auto;
    vertical-align: -0.125em;
    animation: hero-plane-fly 5s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes hero-plane-fly {
    0%, 55% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    70% { transform: translate(26px, -18px) rotate(14deg); opacity: 0; }
    70.01% { transform: translate(-26px, 18px) rotate(14deg); opacity: 0; }
    85%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

.hero-badge-icon {
    height: 1em;
    width: auto;
    vertical-align: -0.125em;
}

.hero-badge:hover {
    color: #ffffff !important;
}

.hero-badge.bg-color-2:hover {
    box-shadow: 0 0 10px 0 var(--secondary-color) inset;
}

.hero-badge.bg-white:hover {
    box-shadow: 0 0 10px 0 #ffffff inset;
}

/* the badge icons are black SVGs — flip them white when the fill drains */
.hero-badge:hover .hero-plane,
.hero-badge:hover .hero-badge-icon {
    filter: invert(1);
}

@media (prefers-reduced-motion: reduce) {
    .hero-badge {
        transition: none;
    }
    .hero-badge .hero-plane {
        animation: none;
    }
}