/* ==========================================
   NX SERVICE CARD CONTENT
   PREMIUM AUTOMOTIVE GLASS
========================================== */

.nx-service-card-content{
    position:absolute;
    left:1.25rem;
    right:1.25rem;
    bottom:1.5rem;
    z-index:2;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:.75rem !important;

    padding:1.5rem !important;

    color:#fff;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.16) 0%,
            rgba(70,75,82,.28) 48%,
            rgba(18,20,24,.48) 100%
        );

    border-top:1px solid rgba(255,255,255,.30);
    border-left:1px solid rgba(255,255,255,.20);
    border-right:1px solid rgba(255,255,255,.13);
    border-bottom:1px solid rgba(255,255,255,.09);

    border-radius:1.25rem;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(150%);

    backdrop-filter:
        blur(24px)
        saturate(150%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 -1px 0 rgba(255,255,255,.04),
        0 18px 48px rgba(0,0,0,.26);

    overflow:hidden;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        background .35s cubic-bezier(.22,1,.36,1),
        border-color .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s cubic-bezier(.22,1,.36,1);
}


/* ==========================================
   SOFT GLASS HIGHLIGHT
========================================== */

.nx-service-card-content::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12) 0%,
            rgba(255,255,255,.03) 38%,
            rgba(255,255,255,0) 62%
        );

    border-radius:inherit;
}


/* ==========================================
   RESET ELEMENTOR MARGIN
========================================== */

.nx-service-card-content > *,
.nx-service-card-content h1,
.nx-service-card-content h2,
.nx-service-card-content h3,
.nx-service-card-content h4,
.nx-service-card-content h5,
.nx-service-card-content h6,
.nx-service-card-content p{
    margin:0 !important;
}


/* ==========================================
   IMAGE / LOGO INSIDE GLASS
========================================== */

.nx-service-card-content img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
}


/* ==========================================
   BUTTON INSIDE GLASS
========================================== */

.nx-service-card-content .nx-btn{
    width:auto !important;
    align-self:flex-start !important;
}


/* ==========================================
   HOVER
========================================== */

.nx-service-card-content:hover{
    transform:translateY(-4px);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.21) 0%,
            rgba(76,81,90,.34) 48%,
            rgba(18,20,24,.56) 100%
        );

    border-top-color:rgba(255,255,255,.38);
    border-left-color:rgba(255,255,255,.25);
    border-right-color:rgba(237,28,36,.28);
    border-bottom-color:rgba(237,28,36,.38);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(255,255,255,.06),
        0 26px 64px rgba(0,0,0,.34);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:767px){

    .nx-service-card-content{
        left:1rem;
        right:1rem;
        bottom:1rem;

        gap:.625rem !important;
        padding:1.25rem !important;

        border-radius:1rem;

        -webkit-backdrop-filter:
            blur(20px)
            saturate(145%);

        backdrop-filter:
            blur(20px)
            saturate(145%);
    }
}


/* ==========================================
   TOUCH DEVICE
   PREVENT STICKY HOVER
========================================== */

@media (hover:none){

    .nx-service-card-content:hover{
        transform:none;
    }
}


.nx-glass{
    background:
        rgba(255,255,255,.22);

    border:1px solid rgba(255,255,255,.35);

    -webkit-backdrop-filter:
        blur(32px)
        saturate(160%);

    backdrop-filter:
        blur(32px)
        saturate(160%);
}