/*
Theme Name: Nicely Theme
Theme URI: http://www.madeNicely.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* html elements */ 
p {margin-bottom: 20px;}


/* Nicely Global */ 
.nicely-no-margin p {margin-bottom: 0px !important;}
.nicely-z-index {position: relative; z-index:999;}

/* Background Effects */
.fl-row.nicely-multiply > .fl-row-content-wrap {
    background-blend-mode: multiply !important;
}

.nicely-diagonal > .fl-row-content-wrap {
    background-image: url("data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjQ0KSIgaGVpZ2h0PSIxMXB4IiB3aWR0aD0iMTFweCIgdmlld0JveD0iMCAwIDExIDExIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xLjQxLDAsMCwxLjQxVjBaTTExLDBIOS41OUwwLDkuNTlWMTFIMS40MUwxMSwxLjQxWm0wLDkuNTlMOS41OSwxMUgxMVoiLz48L3N2Zz4=");
    background-repeat: repeat;
    background-size: 11px 11px;
    background-position: top left;
}

/* Service Areas
/* ==========================================
   Northern Glass Pros — Service Areas
========================================== */

.ngp-service-areas {
    --ngp-blue: #123f5d;
    --ngp-blue-hover: #185b82;
    --ngp-text: #292929;
    --ngp-border: #d8dee3;
    --ngp-background: #ffffff;

    width: 100%;
    margin: 0 auto;
    text-align: center;
}


/* Pill layout
------------------------------------------ */

.ngp-location-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 11px;

    width: 100%;
    text-align: center;
}

/* Location pills
------------------------------------------ */

.ngp-location {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 9px 17px;

    border: 1px solid var(--ngp-border);
    border-radius: 999px;

    background-color: var(--ngp-background);
    color: var(--ngp-text);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transform: translateY(0) scale(1);

    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

/* Pill hover
------------------------------------------ */

.ngp-location:hover,
.ngp-location:focus-visible {
    position: relative;
    z-index: 2;

    border-color: var(--ngp-blue-hover);
    background-color: var(--ngp-blue-hover);
    color: #ffffff;

    text-decoration: none;

    transform: translateY(-2px) scale(1.035);

    box-shadow: 0 7px 16px rgba(18, 63, 93, 0.25);
}

/* Keyboard accessibility */

.ngp-location:focus-visible {
    outline: 3px solid rgba(24, 91, 130, 0.28);
    outline-offset: 3px;
}

/* Click effect */

.ngp-location:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 3px 8px rgba(18, 63, 93, 0.2);
}

/* Mobile
------------------------------------------ */

@media (max-width: 767px) {

    

    .ngp-location-list {
        justify-content: center;
        gap: 8px;
    }

    .ngp-location {
        min-height: 39px;
        padding: 8px 14px;
        font-size: 14px;
    }

    .ngp-location:hover,
    .ngp-location:focus-visible {
        transform: translateY(-1px) scale(1.025);
    }
}

/* Respect reduced-motion preferences
------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .ngp-location {
        transition:
            background-color 180ms ease,
            border-color 180ms ease,
            color 180ms ease,
            box-shadow 180ms ease;
    }

    .ngp-location:hover,
    .ngp-location:focus-visible,
    .ngp-location:active {
        transform: none;
    }
}
/* Forms */

@media only screen and (min-width: 768px) {

}
