:root {
    --narrow: 1140px !important;
    --shadow: 0px 20px 40px -10px rgba(0, 0, 0, 0.15);
    --shadowstrong: 0px 20px 40px -10px rgba(0, 0, 0, 0.5);
    --primaryhover: var(--primary) !important;
}

.rounded,
.rounded img {
    border-radius: 2rem;
}

.shadow-strong {
    box-shadow: var(--shadowstrong) !important;
}

.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25) !important;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25) !important;
}

.btn-secondary:focus, .btn-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25) !important;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25) !important;
}

.form-control:focus, 
.form-control:active {
    border-color: rgba(233, 30, 99, 0.25) !important;
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25) !important;
}

/*slider styles*/
.atf-slider-elem {
    cursor: default !important;
}

.atf-slider-wrapper .atf-slider-arrow-navi {
    color: var(--primary) !important;
    background: none !important;
}

.atf-slider-wrapper .atf-slider-arrow-navi:hover {
    color: var(--secondary) !important;
}

.atf-slider-navi .nav-item.icon:hover::before {
    background-color: var(--secondary) !important;
}

/*admin-styles*/
.admin-page-settings {
    font-size: 1rem;
}

@media (prefers-reduced-motion: no-preference) {

    .fade-elem {
        opacity: 0;
        transition: transform 2000ms ease, opacity 0.9s;
        transform: translateY(150px);
    }
    
    .fade-elem.loaded {
        opacity: 1;
        transform: translateY(0);
        animation-delay: 0s;
    }

}
body,
p {
    font-size: clamp(1rem, 0.9375rem + 0.25vw, 1.125rem) !important;
}

.h1,
h1 {
    font-size: clamp(1.875rem, 1.375rem + 2vw, 2.75rem) !important;
}

.h2,
h2 {
    font-size: clamp(1.625rem, 1.2rem + 1.25vw, 2.25rem) !important;
}

.h3,
h3 {
    font-size: clamp(1.375rem, 1.1rem + 0.75vw, 1.875rem) !important;
}

.h4,
h4 {
    font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.625rem) !important;
}

.h5,
h5 {
    font-size: clamp(1.125rem, 1rem + 0.25vw, 1.375rem) !important;
}

.h6,
h6 {
    font-size: clamp(1rem, 0.9375rem + 0.2vw, 1.125rem) !important;
}

@media screen and (max-width: 1440px) and (max-height: 800px) {

    body,
    p {
        font-size: 0.9375rem !important;
    }

    .h1,
    h1 {
        font-size: 1.75rem !important;
    }

    .h2,
    h2 {
        font-size: 1.5rem !important;
    }

    .h3,
    h3 {
        font-size: 1.25rem !important;
    }

    .h4,
    h4 {
        font-size: 1.125rem !important;
    }

    .h5,
    h5 {
        font-size: 1rem !important;
    }

    .h6,
    h6 {
        font-size: 0.9375rem !important;
    }

}