/* ============================================================
   LEGALFREI HOMEPAGE CUSTOMER REVIEWS
   MEDIUM-DARK NEBULA DESIGN
   VISUAL ONLY
   ============================================================ */

#customer-reviews {

    position: relative !important;

    isolation: isolate !important;

    overflow: hidden !important;

    color: #f4fbff !important;

    background:

        radial-gradient(
            circle at 82% 18%,
            rgba(88,145,255,.24),
            transparent 27%
        ),

        radial-gradient(
            circle at 16% 82%,
            rgba(0,221,255,.18),
            transparent 30%
        ),

        radial-gradient(
            circle at 55% 48%,
            rgba(142,92,255,.13),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #12324d 0%,
            #163b59 48%,
            #14334f 100%
        ) !important;

    border:
        1px solid
        rgba(102,224,255,.28) !important;

    border-radius:
        28px !important;

    box-shadow:

        0 25px 75px
        rgba(5,22,40,.28),

        inset 0 1px 0
        rgba(255,255,255,.08) !important;
}


/* ============================================================
   NEBULA STARS
   ============================================================ */

#customer-reviews::before {

    content: "" !important;

    position: absolute !important;

    inset: -20% !important;

    z-index: -1 !important;

    pointer-events: none !important;

    background:

        radial-gradient(
            circle at 7% 17%,
            rgba(255,255,255,.75) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 24% 72%,
            rgba(112,232,255,.65) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 47% 19%,
            rgba(255,255,255,.65) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 69% 74%,
            rgba(177,143,255,.7) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 88% 29%,
            rgba(255,255,255,.7) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            ellipse at 30% 35%,
            transparent 0 24%,
            rgba(86,220,255,.10) 24.3% 24.5%,
            transparent 25%
        ),

        radial-gradient(
            ellipse at 76% 68%,
            transparent 0 26%,
            rgba(145,105,255,.10) 26.3% 26.5%,
            transparent 27%
        );

    opacity: .95 !important;

    animation:
        lfHomepageReviewNebula
        18s
        ease-in-out
        infinite
        alternate !important;
}


/* ============================================================
   ORBIT
   ============================================================ */

#customer-reviews::after {

    content: "" !important;

    position: absolute !important;

    top: 8% !important;

    right: -10% !important;

    width: 42% !important;

    height: 28% !important;

    z-index: -1 !important;

    pointer-events: none !important;

    border:
        1px solid
        rgba(104,226,255,.22) !important;

    border-radius: 50% !important;

    box-shadow:

        0 0 0 14px
        rgba(83,217,255,.045),

        0 0 0 30px
        rgba(112,113,255,.035),

        0 0 60px
        rgba(81,211,255,.13) !important;

    transform:
        rotate(-12deg) !important;
}


/* ============================================================
   MAIN HEADING
   ============================================================ */

#customer-reviews h1,
#customer-reviews h2,
#customer-reviews h3,
#customer-reviews h4 {

    color:
        #ffffff
        !important;

    visibility:
        visible
        !important;

    opacity:
        1
        !important;

    text-shadow:
        0 2px 18px
        rgba(0,0,0,.22)
        !important;
}


#customer-reviews h2 {

    font-weight:
        850
        !important;

    letter-spacing:
        -.035em
        !important;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

#customer-reviews > p,
#customer-reviews p {

    color:
        #d9e9f3
        !important;

    visibility:
        visible
        !important;

    opacity:
        1
        !important;

    line-height:
        1.8
        !important;
}


/* ============================================================
   REVIEW CARDS
   ============================================================ */

#customer-reviews article,
#customer-reviews [class*="review-card"],
#customer-reviews [class*="review_card"] {

    background:
        rgba(11,38,62,.88)
        !important;

    border:
        1px solid
        rgba(107,220,255,.28)
        !important;

    box-shadow:

        0 18px 50px
        rgba(0,13,27,.24),

        inset 0 1px 0
        rgba(255,255,255,.07)
        !important;

    backdrop-filter:
        blur(8px)
        !important;

    -webkit-backdrop-filter:
        blur(8px)
        !important;
}


/* ============================================================
   REVIEW TEXT
   ============================================================ */

#customer-reviews article p,
#customer-reviews blockquote,
#customer-reviews blockquote p,
#customer-reviews [class*="review"] p {

    color:
        #dcebf4
        !important;

    visibility:
        visible
        !important;

    opacity:
        1
        !important;

    text-shadow:
        none
        !important;
}


/* ============================================================
   CUSTOMER NAME
   ============================================================ */

#customer-reviews strong,
#customer-reviews b {

    color:
        #ffffff
        !important;

    font-weight:
        750
        !important;

    visibility:
        visible
        !important;

    opacity:
        1
        !important;
}


/* ============================================================
   CATEGORY
   ============================================================ */

#customer-reviews small,
#customer-reviews label,
#customer-reviews time,
#customer-reviews [class*="category"] {

    color:
        #9fe9ff
        !important;

    visibility:
        visible
        !important;

    opacity:
        1
        !important;
}


/* ============================================================
   STARS
   ============================================================ */

#customer-reviews [class*="star"],
#customer-reviews .stars {

    color:
        #ffd76a
        !important;

    visibility:
        visible
        !important;

    opacity:
        1
        !important;
}


/* ============================================================
   LINKS
   ============================================================ */

#customer-reviews a {

    color:
        #9feeff
        !important;

    visibility:
        visible
        !important;

    opacity:
        1
        !important;
}


/* ============================================================
   REVIEW FORM
   ============================================================ */

#customer-reviews input,
#customer-reviews textarea,
#customer-reviews select {

    color:
        #f3fbff
        !important;

    background:
        rgba(7,27,45,.82)
        !important;

    border:
        1px solid
        rgba(117,222,255,.28)
        !important;
}


#customer-reviews input::placeholder,
#customer-reviews textarea::placeholder {

    color:
        #a9c1d0
        !important;

    opacity:
        1
        !important;
}


/* ============================================================
   ANIMATION
   ============================================================ */

@keyframes lfHomepageReviewNebula {

    from {

        transform:
            translate3d(-8px,0,0)
            scale(1);
    }

    to {

        transform:
            translate3d(10px,-7px,0)
            scale(1.035);
    }
}


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

@media (max-width:760px) {

    #customer-reviews {

        border-radius:
            22px
            !important;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    #customer-reviews::before {

        animation:
            none
            !important;
    }
}