/* Homepage — utility / shared component styles
 *
 * NOTE: the site-wide baseline (CSS variables, *-reset, body font,
 * a/ul/h2..h6/img/button defaults, [class*="container"]) used to live
 * here and was loaded only by the homepage, which made the masthead
 * render larger on every other page. Those rules were moved to
 * `public/ntm/styles/theme.css` on 2026-05-12 so all NTM pages share
 * the same baseline. Keep this file scoped to homepage-only utilities.
 */

/* Buttons */
.btn-outline-dark {
    border-radius: 5px;
    min-width: 172px;
    width: auto;
    padding: 10px 28px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    border: 1px solid var(--color-black);
    line-height: 1.3;
    transition: background .3s ease, border .3s ease;
    font-family: "Inter", sans-serif;
}

@media(hover: hover) {
    .btn-outline-dark:hover {
        border-color: var(--color-gold);
        background-color: var(--color-gold);
        color: var(--color-black);
    }
}

.btn-outline-dark:focus {
    outline: none;
    border-color: var(--color-gold);
    background: var(--color-gold);
}


.text-center {
    display: flex;
    justify-content: center;
}

.title_32 {
    font-size: 32px;
    font-style: normal;
    line-height: 1.2;
}


.slider-button {
    background: transparent;
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-black);
}


@media(hover: hover) {
    .slider-button:hover {
        border-color: var(--color-gold);
        background: var(--color-gold);
    }
}


.slider-button-right {
    rotate: -180deg;
}

.slider-button img {
    filter: brightness(0) saturate(100%) invert(12%) sepia(61%) saturate(1701%) hue-rotate(163deg) brightness(93%) contrast(103%);
}

.slider-button__white {
    background-color: transparent;
    border-color: var(--color-white);
}

.slider-button__white img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7480%) hue-rotate(29deg) brightness(95%) contrast(86%);
}



@media(hover: hover) {
    .slider-button__white:hover img {
        filter: brightness(0) saturate(100%) invert(5%) sepia(17%) saturate(2%) hue-rotate(314deg) brightness(96%) contrast(80%);
    }
}